/* CAULDRA-NAV-UI-001: primary navigation (Dashboard, Inventory, Settings),
   the Operations menu, and the Settings destination.

   Breakpoints follow the available width, not device names, and reuse the
   app's existing Tailwind steps (md 768px, lg 1024px):
     compact  < 768px      phones: bottom bar, Operations drawer
     medium   768-1023px   tablet portrait: bottom bar, wider content
     wide     >= 1024px    tablet landscape and desktop: left rail
   The rail needs about 220px; below 1024px that would leave the workspace
   narrower than a phone in landscape, so the bottom bar stays until then.

   Signed-in app use sets body.nav-app and body[data-primary-view]. Without
   them (guests, the public home page) the page is unchanged: one scrolling
   page, the menu button and drawer. */

:root {
    --primary-tab-h: 60px;
    --nav-bottom-space: calc(var(--primary-tab-h) + env(safe-area-inset-bottom, 0px));
    --primary-rail-w: 220px;
}

/* ---- primary rail (wide) -------------------------------------------- */
.primary-rail { display: none; }
.primary-nav-item {
    width: 100%; min-height: 40px; display: flex; align-items: center; gap: .625rem;
    padding: .5rem .625rem; border: 1px solid transparent; border-radius: .5rem;
    background: transparent; color: #7C8BA1; font-weight: 500; text-align: left; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.primary-nav-item[aria-current="page"] { background: rgba(67, 107, 238, .15); border-color: rgba(67, 107, 238, .25); color: #436BEE; font-weight: 600; }
.primary-rail-ops { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #172033; }
.primary-nav-ops-caret { margin-left: auto; font-size: 10px; }
.primary-nav-ops[aria-expanded="true"] { background: #131C31; color: #E2E8F0; }
body:not(.nav-app) #rail-operations-group { display: none; }

@media (min-width: 1024px) {
    .primary-rail { display: flex; }
    /* id + class: outranks the Tailwind .flex on the button (Tailwind is linked last). */
    #mobile-menu-btn.ops-menu-btn { display: none; }
}

/* ---- Operations drawer ---------------------------------------------- */
.drawer-ops-title { display: none; }
body.nav-app .drawer-ops-title {
    display: block; margin: 0 0 .5rem; padding: 0 .5rem;
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7C8BA1;
}
body.nav-app .drawer-guest-only { display: none; }
/* A closed drawer is off screen AND out of the tab order / accessibility tree. */
#mobile-nav-drawer { transition: transform .2s ease, visibility 0s linear 0s; }
#mobile-nav-drawer.-translate-x-full { visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }

/* ---- bottom bar (compact + medium) ----------------------------------- */
.primary-bottom-nav { display: none; }
.primary-tab {
    position: relative; min-width: 0; min-height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 0; background: transparent; color: #7C8BA1;
    font-size: 11px; font-weight: 600; line-height: 1.1; cursor: pointer;
}
.primary-tab i { font-size: 18px; }
.primary-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.primary-tab[aria-current="page"] { color: #436BEE; }
.primary-tab[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 3px;
    transform: translateX(-50%); border-radius: 0 0 3px 3px; background: #436BEE;
}

@media (max-width: 1023.98px) {
    body.nav-app .primary-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
        display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        height: var(--nav-bottom-space); padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
        border-top: 1px solid #172033; background: rgba(10, 15, 29, .97);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    }
    /* Modals and dialogs sit above everything; the bar never covers them. */
    body.nav-app:has([id$="-modal"]:not(.hidden), dialog[open], #payment-overlay:not([hidden])) .primary-bottom-nav { display: none; }
    /* The last row of every view clears the bar. */
    body.nav-app main { padding-bottom: calc(var(--nav-bottom-space) + 24px); }
    body.nav-app #chat-launcher-root { bottom: calc(var(--nav-bottom-space) + 12px); }
    body.nav-app .offline-access-button { bottom: calc(var(--nav-bottom-space) + 12px); }
    /* The drawer stops at the bar, so the primary tabs stay reachable. */
    body.nav-app #mobile-nav-drawer,
    body.nav-app #mobile-nav-overlay { bottom: var(--nav-bottom-space); }
    body.nav-app #mobile-nav-drawer { padding-bottom: 0; }
}

/* On wide screens the drawer opens beside the rail instead of over it. */
@media (min-width: 1024px) {
    body.nav-app #mobile-nav-drawer { left: var(--primary-rail-w); width: 300px; max-width: 300px; }
    body.nav-app #mobile-nav-overlay { left: var(--primary-rail-w); }
    html[dir="rtl"] body.nav-app #mobile-nav-drawer { left: auto; right: var(--primary-rail-w); }
    html[dir="rtl"] body.nav-app #mobile-nav-overlay { left: 0; right: var(--primary-rail-w); }
}

/* ---- one primary destination at a time -------------------------------- */
.settings-view { display: none; }
body.nav-app[data-primary-view="dashboard"] #inventory-section,
body.nav-app[data-primary-view="inventory"] #dynamic-dashboard-container,
body.nav-app[data-primary-view="settings"] #dynamic-dashboard-container,
body.nav-app[data-primary-view="settings"] #inventory-section { display: none !important; }
body.nav-app[data-primary-view="settings"] .settings-view { display: block; }

/* ---- Settings -------------------------------------------------------- */
.settings-view { width: 100%; max-width: 1100px; margin: 0 auto; }
.settings-view-title { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; color: #E2E8F0; }
.settings-group { display: grid; gap: .5rem; margin-top: 1.25rem; }
.settings-group-title { margin: 0 0 .125rem; padding: 0 .25rem; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7C8BA1; }
.settings-row {
    width: 100%; min-height: 60px; display: flex; align-items: center; gap: .75rem;
    padding: .75rem .875rem; border: 1px solid #172033; border-radius: 1rem;
    background: #0D1322; color: #E2E8F0; text-align: left; cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.settings-row[aria-current="true"] { border-color: rgba(67, 107, 238, .5); background: rgba(67, 107, 238, .10); }
.settings-row-static { cursor: default; flex-wrap: wrap; }
.settings-row-icon {
    width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center;
    border-radius: .75rem; background: rgba(67, 107, 238, .15); color: #436BEE; font-size: 14px;
}
.settings-row-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.settings-row-title { font-size: .8125rem; font-weight: 600; color: #E2E8F0; }
.settings-row-sub { font-size: 11px; color: #7C8BA1; line-height: 1.35; }
.settings-row-caret { flex: 0 0 auto; font-size: 10px; color: #7C8BA1; }
.settings-row-select {
    flex: 0 1 200px; min-width: 140px; min-height: 40px; padding: .375rem .625rem;
    border: 1px solid #172033; border-radius: .75rem; background: #070B14; color: #E2E8F0; font-size: .75rem; cursor: pointer;
}
.settings-signout {
    width: 100%; min-height: 48px; margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
    border: 1px solid rgba(217, 65, 65, .3); border-radius: 1rem; background: rgba(217, 65, 65, .10);
    color: #D94141; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.settings-detail { display: none; }
.settings-detail-sub { margin: .375rem 0 0; font-size: 12px; color: #7C8BA1; }
.settings-detail-body { margin-top: 1rem; font-size: .75rem; }
.settings-back {
    min-height: 40px; margin: 0 0 .75rem -.25rem; padding: .25rem .5rem; display: inline-flex; align-items: center; gap: .5rem;
    border: 0; border-radius: .5rem; background: transparent; color: #436BEE; font-size: .8125rem; font-weight: 600; cursor: pointer;
}

/* compact + medium: Settings home, then each page full width. */
body[data-settings-pane="security"] .settings-home { display: none; }
body[data-settings-pane="security"] .settings-detail { display: block; }

/* medium: the extra width holds two columns of rows. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .settings-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-group-title { grid-column: 1 / -1; }
    .settings-signout { max-width: 320px; }
}

/* wide: list and page side by side (master-detail). */
@media (min-width: 1024px) {
    body.nav-app[data-primary-view="settings"] .settings-view { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
    body[data-settings-pane] .settings-home,
    body[data-settings-pane] .settings-detail { display: block; }
    .settings-detail { padding: 1.25rem; border: 1px solid #172033; border-radius: 1rem; background: #0D1322; }
    .settings-back { display: none; }
}

@media (max-width: 380px) {
    .settings-row-select { flex-basis: 100%; }
}

/* Wide: the rail already shows Cauldra and the business, so the Operations
   panel keeps only its close button. */
@media (min-width: 1024px) {
    body.nav-app #mobile-nav-drawer .drawer-identity { display: none; }
    body.nav-app #mobile-nav-drawer .drawer-close { margin-left: auto; }
    html[dir="rtl"] body.nav-app #mobile-nav-drawer .drawer-close { margin-left: 0; margin-right: auto; }
}

/* Role gating hides items with the shared .hidden class; the display rules
   above must never bring one back. */
#primary-bottom-nav .hidden,
#primary-rail .hidden,
#settings-view .hidden { display: none !important; }

/* Logged out (the public home page), the sidebar keeps its original 768px
   breakpoint; the new bands apply only to signed-in app use. */
@media (min-width: 768px) {
    body:not(.nav-app) .primary-rail { display: flex; }
    body:not(.nav-app) #mobile-menu-btn.ops-menu-btn { display: none; }
}

/* Hover only where there is a pointer that hovers: on touch screens a tapped
   tab would otherwise keep its hover colour next to the active one. */
@media (hover: hover) {
    .primary-nav-item:hover { background: #131C31; color: #E2E8F0; }
    .primary-tab:hover { color: #E2E8F0; }
    button.settings-row:hover { background: #131C31; border-color: rgba(67, 107, 238, .35); }
    .settings-signout:hover { background: rgba(217, 65, 65, .2); }
    .settings-back:hover { background: #131C31; }
}

/* Phones in landscape: little height, plenty of width, so a slimmer bar with
   the icon beside its label. */
@media (max-width: 1023.98px) and (max-height: 480px) {
    :root { --primary-tab-h: 48px; }
    .primary-tab { flex-direction: row; gap: 8px; min-height: 44px; }
    .primary-tab i { font-size: 16px; }
}

/* Phones in landscape: the Operations list gets the height; the drawer keeps
   only its close button (the header already shows where you are). */
@media (max-width: 1023.98px) and (max-height: 480px) {
    body.nav-app #mobile-nav-drawer .drawer-identity { display: none; }
    body.nav-app #mobile-nav-drawer .drawer-close { margin-left: auto; }
    html[dir="rtl"] body.nav-app #mobile-nav-drawer .drawer-close { margin-left: 0; margin-right: auto; }
}