/* =====================================================================
   2026-09 — Sidebar navigation (design ported from
   design_handoff_navigation_menu/NavigationMenu.dc.html).
   Two chrome variants selected by data-nav-theme on .nm-sidebar-shell
   (or on <html> for the pre-mount early-apply). Content pages are NOT
   affected — only the sidebar surface changes when the user toggles.
   ===================================================================== */

/* AdminLTE 4 (adminlte.css) lays .app-wrapper out as a CSS grid with the
   sidebar in an `auto`-sized column driven by .app-sidebar's min/max width
   (--lte-sidebar-width, default 250px). We DON'T add our own margin-left —
   that used to stack a 280px margin on top of AdminLTE's own 250px column
   and produced the big blank gap the user reported. Instead we widen the
   grid column to 280 and let the grid put main + footer at the correct
   offset automatically. Collapse (.collapsed on the shell) shrinks the
   column to 0 so the content stretches full-width. */

.nm-sidebar-shell {
    /* Force the grid column to our 280 (AdminLTE's default is 250). */
    min-width: 280px !important;
    max-width: 280px !important;
    width: 280px !important;
    /* Own the chrome via data-nav-theme — reset AdminLTE's dark defaults. */
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

/* Desktop collapse: shrink the sidebar to an icon-only rail (68 px). The
   text/labels/subtitles/sections/user card collapse; the icons stay so the
   operator can click one and be taken to the page. Clicking the top-bar
   hamburger re-expands. Scoped to desktop so the mobile off-canvas rule
   further down keeps its own translateX(-100%) behaviour. */
@media (min-width: 992px) {
    .nm-sidebar-shell.collapsed {
        min-width: 68px !important;
        max-width: 68px !important;
        width: 68px !important;
        overflow: visible;
    }
    .nm-sidebar-shell.collapsed .nm-sidebar { display: flex; }

    .nm-sidebar-shell.collapsed .nm-brand-name,
    .nm-sidebar-shell.collapsed .nm-brand-sub,
    .nm-sidebar-shell.collapsed .nm-brand-tag,
    .nm-sidebar-shell.collapsed .nm-brand > div:not(.nm-logo),
    .nm-sidebar-shell.collapsed .nm-collapse,
    .nm-sidebar-shell.collapsed .nm-section-hd span,
    .nm-sidebar-shell.collapsed .nm-section-hd .chev,
    .nm-sidebar-shell.collapsed .nm-item .nm-lbl,
    .nm-sidebar-shell.collapsed .nm-item .count,
    .nm-sidebar-shell.collapsed .nm-user-info,
    .nm-sidebar-shell.collapsed .nm-btn span {
        display: none !important;
    }

    .nm-sidebar-shell.collapsed .nm-brand { justify-content: center; padding: 14px 8px; cursor: pointer; }
    .nm-sidebar-shell.collapsed .nm-brand-l { justify-content: center; gap: 0; }
    /* 2026-09 — Expanded logo is 64×64, but the collapsed icon rail is only
        68px wide (16px of horizontal padding on .nm-brand). Shrink the tile
        back to 44×44 in collapsed mode so it fits cleanly and stays visually
        aligned with the icon-only nav rows below. */
    .nm-sidebar-shell.collapsed .nm-logo { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 4px 10px rgba(59,107,255,.35); }
    .nm-sidebar-shell.collapsed .nm-logo i { font-size: 1.2rem; }
    .nm-sidebar-shell.collapsed .nm-section-hd { padding: 10px 0 4px; justify-content: center; }
    .nm-sidebar-shell.collapsed .nm-item { justify-content: center; padding: 8px 0; }
    .nm-sidebar-shell.collapsed .nm-item i.nm-ico { margin: 0; font-size: 15px; }
    .nm-sidebar-shell.collapsed .nm-user { padding: 8px 6px; }
    .nm-sidebar-shell.collapsed .nm-user-card { justify-content: center; padding: 6px 0; }
    .nm-sidebar-shell.collapsed .nm-actions { flex-direction: column; gap: 6px; align-items: stretch; }
    .nm-sidebar-shell.collapsed .nm-btn { justify-content: center; padding: 8px 0; }
}

.nm-sidebar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.nm-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
}

.nm-brand-l {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.nm-brand-l:hover { text-decoration: none; }

/* 2026-09 — Logo block sizes/shape from
   design_handoff_navigation_menu/README.md. Colours are theme-scoped
   further down (data-nav-theme="light"|"dark"). */
.nm-logo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b6bff 0%, #1e46c8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(59,107,255,.35);
}
.nm-logo i { font-size: 1.75rem; }

.nm-brand-name {
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: -.01em;
    display: flex;
    align-items: baseline;
    gap: 1px;
    white-space: nowrap;
}
/* 2026-09 — Wordmark colours are declared as DEFAULTS (light-theme) here so
    the brand block renders correctly wherever it's used — Login card, error
    pages, etc. — not only inside the sidebar shell. The dark-theme override
    lives under .nm-sidebar-shell[data-nav-theme="dark"] further down. */
.nm-brand-name .uni  { color: #0f172a; font-weight: 800; }
.nm-brand-name .mate { color: #3b6bff; font-weight: 800; }

.nm-brand-sub {
    color: #0f172a;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1;
    margin-top: 4px;
}

.nm-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 2px;
}
.nm-brand-tag {
    color: #94a3b8;
    font-size: .6rem;
    letter-spacing: .18em;
    font-weight: 600;
    margin-top: 6px;
    text-transform: uppercase;
}
.nm-brand-tag .dot { display: inline-block; margin: 0 4px; opacity: .7; }
.nm-collapse {
    border: 0;
    background: transparent;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.nm-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px 10px;
    scrollbar-width: thin;
}
.nm-scroll::-webkit-scrollbar { width: 6px; }
.nm-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 3px; }

.nm-section { margin-bottom: 6px; }
.nm-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}
.nm-section-hd .chev {
    font-size: .72rem;
    transition: transform .2s ease;
}
.nm-section.collapsed .chev { transform: rotate(-90deg); }
.nm-section.collapsed .nm-items { display: none; }

.nm-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
.nm-item i.nm-ico {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}
.nm-item .nm-lbl {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nm-item .count {
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

.nm-user { padding: 12px; }
.nm-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    margin-bottom: 8px;
}
.nm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nm-user-info { min-width: 0; flex: 1; }
.nm-user-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    font-weight: 700;
}
.nm-role {
    font-size: .62rem;
    font-weight: 700;
    color: #f97316;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.nm-workspace {
    font-size: .75rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}
.nm-workspace::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #3b82f6;
    border-radius: 999px;
    display: inline-block;
}

.nm-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
}
.nm-btn {
    font-size: .78rem;
    font-weight: 500;
    padding: 7px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    text-decoration: none;
}
.nm-btn.icon-only { padding: 7px 10px; }
.nm-btn:hover { text-decoration: none; }

/* -------- LIGHT variant (default) -------- */
.nm-sidebar-shell[data-nav-theme="light"] .nm-sidebar { background: #ffffff; border-right: 1px solid #eef1f5; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-brand { border-bottom: 1px solid #eef1f5; }
/* Legacy .light-weight span kept for any older markup still using it. Colours
    for .uni / .mate / .nm-brand-sub / .nm-brand-tag are declared as light-theme
    defaults higher up so they also apply on the login card. */
.nm-sidebar-shell[data-nav-theme="light"] .nm-brand-name .light { color: #0f172a; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-badge { background: #eef2ff; color: #4f46e5; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-brand-tag { color: #94a3b8; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-collapse { color: #94a3b8; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-collapse:hover { background: #f1f5f9; color: #0f172a; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-section-hd { color: #94a3b8; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-section-hd .chev { color: #cbd5e1; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-item { color: #475569; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-item i.nm-ico { color: #64748b; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-item:hover { background: #f8fafc; color: #0f172a; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-item:hover i.nm-ico { color: #0f172a; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-item.active { background: #e8f0ff; color: #2563eb; font-weight: 600; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-item.active i.nm-ico { color: #2563eb; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: #2563eb;
    border-radius: 0 3px 3px 0;
}
.nm-sidebar-shell[data-nav-theme="light"] .nm-item .count { background: #eef1f5; color: #64748b; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-item.active .count { background: #dbe7ff; color: #2563eb; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-user { border-top: 1px solid #eef1f5; background: #fff; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-avatar { background: #e0e7ff; color: #4338ca; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-user-top { color: #0f172a; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-workspace { color: #64748b; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-btn { border: 1px solid #e2e8f0; background: #fff; color: #334155; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-btn.signout { color: #dc2626; border-color: #fecaca; }
.nm-sidebar-shell[data-nav-theme="light"] .nm-btn.signout:hover { background: #fef2f2; color: #dc2626; }

/* -------- DARK NAVY variant (matches original app color #152944) -------- */
.nm-sidebar-shell[data-nav-theme="dark"] .nm-sidebar { background: #152944; border-right: 1px solid rgba(255,255,255,.06); }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-brand { border-bottom: 1px solid rgba(255,255,255,.08); }
/* 2026-09 — Dark theme uses a lighter shade for "Mate" to keep readable
    contrast on the navy sidebar (#60a5fa) instead of the base brand blue. */
.nm-sidebar-shell[data-nav-theme="dark"] .nm-brand-name .uni { color: #ffffff; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-brand-name .mate { color: #60a5fa; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-brand-sub { color: #e2e8f0; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-brand-name .light { color: #cbd5e1; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-badge { background: rgba(99,102,241,.25); color: #c7d2fe; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-brand-tag { color: #94a3b8; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-collapse { color: #94a3b8; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-collapse:hover { background: rgba(255,255,255,.06); color: #f8fafc; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-section-hd { color: #8b9cb4; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-section-hd .chev { color: #64748b; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item { color: #c7d2df; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item i.nm-ico { color: #94a3b8; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item:hover i.nm-ico { color: #fff; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item.active {
    background: linear-gradient(90deg, rgba(59,130,246,.28) 0%, rgba(59,130,246,.14) 100%);
    color: #fff;
    font-weight: 600;
}
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item.active i.nm-ico { color: #93c5fd; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: #60a5fa;
    border-radius: 0 3px 3px 0;
}
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item .count { background: rgba(255,255,255,.08); color: #c7d2df; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-item.active .count { background: rgba(96,165,250,.3); color: #dbeafe; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-user { border-top: 1px solid rgba(255,255,255,.08); background: #0f2038; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-avatar { background: rgba(99,102,241,.25); color: #c7d2fe; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-user-top { color: #f8fafc; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-role { color: #fb923c; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-workspace { color: #94a3b8; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-btn { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #e2e8f0; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-btn.signout { color: #fca5a5; border-color: rgba(220,38,38,.3); }
.nm-sidebar-shell[data-nav-theme="dark"] .nm-btn.signout:hover { background: rgba(220,38,38,.15); color: #fca5a5; }

/*  2026-09 — Sidebar scrollbar recoloured for the dark navy theme. The
    base .nm-scroll rules above use a light-grey thumb which looked
    awkward against the #152944 background. On dark: subtle white
    thumb (20% alpha) with a slightly brighter hover state (35%),
    transparent track so it blends with the sidebar. Firefox uses
    `scrollbar-color` (thumb, track); Chromium / Safari / Edge use the
    -webkit-scrollbar-* pseudo elements. Light theme is unchanged. */
.nm-sidebar-shell[data-nav-theme="dark"] .nm-scroll {
    scrollbar-color: rgba(255,255,255,.20) transparent;
}
.nm-sidebar-shell[data-nav-theme="dark"] .nm-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.nm-sidebar-shell[data-nav-theme="dark"] .nm-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.20);
    border-radius: 3px;
}
.nm-sidebar-shell[data-nav-theme="dark"] .nm-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.35);
}

/* 2026-09 — Mobile off-canvas sidebar. Overrides AdminLTE's own
   .app-sidebar mobile rules with !important on every dimension so the
   sidebar always renders at its full 280-px width when open, sits ABOVE
   page content (z-index), and slides fully off-screen when closed.
   Without these !important flags AdminLTE was clipping the sidebar to
   a narrow strip on iPhone-sized viewports so opening the hamburger
   only revealed a sliver of the nav. */
@media (max-width: 991.98px) {
    .nm-sidebar-shell {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        /* 2026-09 — margin-left MUST be 0 !important. AdminLTE's own mobile
           rule at adminlte.css:13541 sets .sidebar-expand-lg .app-sidebar
           { margin-left: calc(var(--lte-sidebar-width) * -1); } — a 250-px
           negative margin that off-canvases the sidebar. That rule fought
           our transform-based toggle: with translateX(0) the sidebar was
           at -250-px margin + 0 translate = the rightmost 30 px poking
           out (280-px sidebar width − 250-px lte width). Zeroing the
           margin here hands full control back to transform. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-width: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1050;
        transition: transform .25s ease;
        transform: translateX(0);
        box-shadow: 2px 0 12px rgba(15, 23, 42, .15);
    }
    .nm-sidebar-shell.collapsed {
        transform: translateX(-100%);
        box-shadow: none;
    }
    /* The .nm-sidebar inside must fill its shell and be visible on mobile
       (the desktop icon-only rule sets display:flex; make sure nothing
       else has hidden it here). */
    .nm-sidebar-shell .nm-sidebar {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
    }

    /* Dim the page behind the sidebar when it's open so it reads as a
       modal overlay. Tap-through is not enabled here — the operator
       closes with the sidebar's own X, the top-bar hamburger, or by
       navigating; adding a click-to-close on the backdrop can be a
       follow-up if requested. */
    .nm-sidebar-shell:not(.collapsed)::after {
        content: "";
        position: fixed;
        top: 0; right: 0; bottom: 0;
        left: 280px;
        background: rgba(15, 23, 42, .35);
        z-index: -1;
        pointer-events: none;
    }
}

/* =========================================================================
   2026-09 — Top bar (page title + notification bell).
   Replaces the previous AdminLTE hamburger-only header. Sits above the
   main content, spans full width to the right of the sidebar.
   ========================================================================= */
.nm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-default, #ececec);
    min-height: 56px;
}

.nm-topbar-l {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.nm-topbar-toggle {
    /* 2026-09 — flex-shrink:0 so a long page title (or narrow mobile
       viewport) can't squeeze the hamburger button to zero width and hide
       it. display:inline-flex + explicit dimensions were already there; the
       missing shrink guard was the actual cause of "nav bar not showing"
       on iPhone-sized viewports. */
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary, #525252);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nm-topbar-toggle:hover { background: #f5f7fb; color: #0f172a; border-color: #e2e8f0; }
.nm-topbar-toggle:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 2px; }

.nm-page { min-width: 0; }
.nm-page-title {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-heading, #0a0a0a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nm-page-sub {
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-subtle, #a3a3a3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.nm-topbar-r {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nm-topbar-bell {
    /* 2026-09 — flex-shrink:0 so a long page title on a narrow viewport
       can't squeeze the bell out of view. */
    flex: 0 0 38px;
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nm-topbar-bell:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.nm-topbar-bell:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 2px; }
.nm-topbar-bell i { font-size: 15px; }
.nm-bell-dot {
    position: absolute;
    top: 8px; right: 9px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px #ffffff;
}