*{
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}
body {
    background-color: #FDFDFD;
    font-size: 0.875rem; /* 14px - reduced from default 16px */
}

/* Reduce heading sizes */
h1, .h1 { font-size: 1.75rem; } /* ~28px - reduced from 2.5rem */
h2, .h2 { font-size: 1.5rem; }  /* ~24px - reduced from 2rem */
h3, .h3 { font-size: 1.25rem; } /* ~20px - reduced from 1.75rem */
h4, .h4 { font-size: 1.1rem; }  /* ~17.6px - reduced from 1.5rem */
h5, .h5 { font-size: 1rem; }    /* ~16px - reduced from 1.25rem */
h6, .h6 { font-size: 0.875rem; } /* ~14px - reduced from 1rem */

/* Reduce table font size */
.table {
    font-size: 0.8125rem; /* ~13px */
}

/* Reduce form elements */
.form-label {
    font-size: 0.8125rem; /* ~13px */
}

.form-control, .form-select {
    font-size: 0.8125rem; /* ~13px */
}

/* Reduce button text */
.btn {
    font-size: 0.8125rem; /* ~13px */
}

/* Reduce badge text */
.badge {
    font-size: 0.75rem; /* ~12px */
}

/* Reduce card text */
.card-title {
    font-size: 1rem; /* ~16px */
}

.card-text {
    font-size: 0.8125rem; /* ~13px */
}

header{
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

.card {
border-radius: .5rem;
/* filter: drop-shadow(5px 5px 10px #d6d6d6); */
}

/* Alpine's x-cloak CSS Rule*/
[x-cloak] {
  display: none !important;
}

/* Utility class for Alpine.js visibility toggling (replaces x-show) */
.hidden {
  display: none !important;
}

/* Utility classes for CSP-compliant inline style replacements */
.min-height-60vh {
  min-height: 60vh;
}

.sidebar-narrow {
  max-width: 120px;
}

.logo-min-height {
  min-height: 1.75rem;
}

.editor-container {
  height: 600px;
  width: 100%;
}

.version-list-scroll {
  max-height: 600px;
  overflow-y: auto;
}

.error-pre {
  font-size: 0.8rem;
  overflow-x: auto;
}

/* Pricing admin page styles */
.version-item {
  cursor: pointer;
  transition: background-color 0.2s;
}

.version-item:hover {
  background-color: #f8f9fa;
}

.version-item.active {
  background-color: #e7f3ff;
  border-left: 4px solid #0d6efd;
}

.version-badge {
  font-size: 0.75rem;
}

@view-transition {
  navigation : auto;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
  background-color:#DDD;
}

#sidebar{
  border-right:2px solid #DDD;
}

.sidebar {
  min-height: calc(100vh - 56px);
  padding-top: 1rem;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link:hover {
  color: #007bff;
}

.sidebar .nav-link.active {
  color: #007bff;
  background-color: rgba(0, 123, 255, 0.1);
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

.sidebar-sticky {
  position: sticky;
  top: 1rem;
  height: calc(100vh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Ensure toggle button is visible */
button[data-bs-toggle="offcanvas"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer;
}

@media (min-width: 768px) {
  button[data-bs-toggle="offcanvas"] {
    display: none !important;
  }
}