/* ============================================================
   Compact navigation — the slide-in panel (tablet) / bottom sheet (phone)
   ============================================================
   Every rule here applies ONLY while the nav is compact. This file has no
   @media wrapper: app/views/layouts/main.php loads it with the breakpoint in
   the <link media> attribute, so the one compact switch lives in one place:

     signed out  (max-width: 1023.98px)
     signed in   (max-width: 1199.98px)

   Why two: the signed-in bar carries two more links plus bell/avatar/
   settings/logout. With every destination kept it needs ~1200px before the
   quick search is usable (logo 76 + links 530 + actions 315 + gaps, measured
   2026-09-19); the signed-out bar fits from 1024px. app.js reads this link's
   media query to know when the panel stops being a panel.

   Load order matters: after theme.css / theme-light.css (the frost rule below
   ties their html[data-theme] .navbar on specificity) and BEFORE
   responsive.css, whose phone (≤700.98px) block overrides the side-sheet
   placement here with a bottom sheet at equal specificity.

   The bar itself never wraps — .nav-search is given a small flex-basis so it
   shrinks instead of pushing the hamburger onto a second row (which used to
   happen on any viewport ≤380px, i.e. every iPhone SE / mini and any 390px
   phone once a scrollbar appeared). */

/* .nav-panel below is position:fixed and must anchor to the VIEWPORT.
   Any non-none filter / backdrop-filter turns an element into the
   containing block for its fixed-position descendants — so the frosted
   navbar would pin the sheet to the 64px bar instead of the screen.
   Do not re-add backdrop-filter here; the frost rule further down clears
   it and paints the compact bar opaque instead. */
.nav-toggle { display: flex; }
.nav-panel {
    display: flex;
    position: fixed;
    /* starts below the bar so the toggle (now an ✕) stays reachable */
    top: 64px;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(360px, 88vw);
    flex-direction: column;
    align-items: stretch;
    /* the full bar right-aligns its contents; the sheet must top-align */
    justify-content: flex-start;
    gap: 0;
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
    background: var(--bg-surface-solid, #12121a);
    border-bottom: none;
    border-left: 1px solid var(--border-default, #2a2a3a);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 320;
    transform: translateX(100%);
    visibility: hidden;
    /* visibility is stepped, not eased: it flips to hidden only AFTER the
       slide-out finishes, and back to visible immediately on open. A plain
       `visibility 0.28s` leaves the panel non-rendered for the whole
       opening frame, and the transform transition then never ticks — the
       sheet stays parked off-screen. */
    transition: transform 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                visibility 0s linear 0.28s;
}
.navbar.is-open .nav-panel {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                visibility 0s linear 0s;
}
.nav-panel__scroll {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex: 0 0 auto;
}
.nav-group-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #6b7280);
    margin: 14px 0 6px;
    padding: 0 8px;
}
.nav-group-label:first-child { margin-top: 4px; }
.nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
}
.nav-links--account {
    border-left: none;
    padding-left: 0;
    margin-top: 0;
}
.nav-link {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
}
.nav-actions {
    flex-direction: column;
    align-items: stretch;
    border-left: none;
    padding: 16px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    gap: 8px;
}
/* The navbar is a stacking context (position:sticky + z-index:200), and
   the panel lives inside it — so the scrim, a sibling of the navbar, would
   paint over the panel no matter how high the panel's own z-index is.
   Lift the whole navbar above the scrim while the menu is open. */
.navbar.is-open { z-index: 330; }
.nav-account { max-width: none; justify-content: flex-start; }
/* .navbar--auth .nav-account__name{display:none} is declared later in this
   file, so the compact override needs one more level of specificity. */
.nav-panel .nav-account__name,
.navbar--auth .nav-panel .nav-account__name { display: inline; }
.nav-cta { text-align: center; padding: 12px 16px; }
/* Quick search stays in the bar between logo and hamburger. A small
   flex-basis (not `auto`) is what keeps the bar on a single row. */
.nav-search { flex: 1 1 120px; max-width: none; }
.nav-search__results {
    position: fixed;
    top: 70px;
    left: 12px;
    right: 12px;
    width: auto;
}

/* Dimmer behind the panel (hidden on the full bar, see app.css) */
.nav-scrim { display: block; }

/* ---- Frosted bar → opaque (was responsive.css §2) ---- */
/* The compact nav panel is position:fixed and must anchor to the viewport.
   Any non-none filter / backdrop-filter makes an element the containing block
   for its fixed-position descendants, so the frosted navbar would pin the
   sheet to the 64px bar. Clear the frost while compact and paint the bar
   opaque. Selectors are written at [data-theme] specificity and this file
   loads after the theme sheets, so they beat their own .navbar backgrounds. */
html .navbar,
html[data-theme="light"] .navbar,
html[data-theme="dark"] .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-surface-solid, #12121a);
}

/* ---- Panel rows: compact-only labels (was responsive.css §3) ----
   Icon-only controls (bell, gear) get a text label inside the panel so
   every row reads the same way; on the full bar the label is dropped. */
.nav-compact-label { display: inline; }
.nav-li--compact { display: block; }

/* Every panel row: full width, same height, icon then label */
.nav-panel .nav-notif-btn,
.nav-panel .nav-link--icon,
.nav-panel .nav-account,
.nav-panel .nav-link--muted {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}
.nav-panel .nav-notif-btn,
.nav-panel .nav-link--icon {
    color: var(--text-secondary, #9ca3b8);
    background: none;
}
/* These controls centre their content on the full bar; in the panel every
   row must read left-to-right like the links above them. */
.nav-panel .nav-notif-btn,
.nav-panel .nav-link--icon,
.nav-panel .theme-toggle {
    justify-content: flex-start;
    padding-left: 14px;
}
.nav-panel .theme-toggle { gap: 12px; }
.nav-panel .theme-toggle::after { margin-left: 0; }
.nav-panel .nav-notif-btn i,
.nav-panel .nav-link--icon i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}
.nav-panel .nav-notif-btn .nav-badge { margin-left: auto; }
.nav-panel .nav-link--muted { color: var(--text-muted, #6b7280); font-size: 0.9rem; }
.nav-panel .nav-account { border-radius: 12px; }
.nav-panel .nav-cta { min-height: 46px; }
/* Lock the page behind an open panel so only the panel scrolls */
body.nav-open { overflow: hidden; }

/* ---- Currency picker & theme toggle rows (was theme.css) ---- */
.nav-panel .currency-picker {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 0 14px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    margin-top: 8px;
}

.nav-panel .currency-picker__label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary, #9ca3b8);
}

.nav-panel .currency-picker__select {
    height: 44px;
    min-width: 96px;
}

.nav-panel .theme-toggle-wrap {
    width: 100%;
    padding: 8px 0 0;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    margin-top: 8px;
}

.nav-panel .theme-toggle {
    width: 100%;
    height: 44px;
    gap: 8px;
}

.nav-panel .theme-toggle::after {
    content: 'Appearance';
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 8px;
}

/* ---- Light theme: softer panel shadow (was theme-light.css) ----
   Background comes from --bg-surface-solid (opaque in both themes); only the
   drop shadow needs softening for light. */
html[data-theme="light"] .navbar.is-open .nav-panel {
    box-shadow: -12px 0 40px rgba(15, 15, 28, 0.18);
}