/* Navigation shell V2. Loaded last and activated only by Platform Admin. */
.na-shell-modern {
    --na-sidebar-width: 272px;
    --na-topbar-height: 76px;
    --nav-panel: rgba(10, 15, 31, .94);
    --nav-line: rgba(143, 170, 214, .15);
    --nav-muted: #94a3ba;
    --nav-cyan: #13d8f5;
    --nav-violet: #a855f7;
    --nav-magenta: #ec4899;
}

.na-shell-modern:has(.na-sidebar-modern.is-collapsed) { --na-sidebar-width: 78px; }

.na-shell-modern .na-sidebar-modern {
    position: fixed;
    z-index: 1100;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--na-sidebar-width);
    flex-direction: column;
    gap: 18px;
    padding: 18px 14px 14px;
    border-right: 1px solid var(--nav-line);
    background: linear-gradient(180deg, rgba(13, 20, 42, .98), rgba(7, 11, 25, .98));
    box-shadow: 16px 0 48px rgba(0, 0, 0, .16);
    transition: width .2s ease, transform .2s ease;
}

.na-modern-sidebar-brand { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 8px; }
.na-modern-sidebar-brand a { display: flex; min-width: 0; align-items: center; }
.na-modern-sidebar-brand img { display: block; width: min(190px, 100%); height: auto; max-height: 40px; object-fit: contain; object-position: left center; }
.na-modern-sidebar-toggle { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--nav-line); border-radius: 11px; color: #dbeafe; background: rgba(255,255,255,.035); cursor: pointer; font-size: 1.15rem; }
.na-modern-sidebar-toggle:hover { border-color: rgba(19,216,245,.5); background: rgba(19,216,245,.09); }

.na-modern-sidebar-context { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--nav-line); border-radius: 15px; background: linear-gradient(125deg, rgba(20,216,245,.08), rgba(168,85,247,.08)); }
.na-modern-sidebar-context .na-sidebar-context-mark { flex-basis: 34px; width: 34px; height: 34px; border-radius: 11px; font-size: .65rem; }
.na-modern-sidebar-context .na-sidebar-context-copy { display: grid; min-width: 0; gap: 3px; }
.na-modern-sidebar-context .na-sidebar-context-copy strong { color: #f4f7ff; font-size: .78rem; }
.na-modern-sidebar-context .na-sidebar-context-copy small { overflow: hidden; color: var(--nav-muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.na-modern-context-chevron { margin-left: auto; color: var(--nav-muted); }

.na-modern-nav { display: grid; min-height: 0; gap: 5px; align-content: start; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.25) transparent; }
.na-modern-nav-heading { display: flex; min-height: 22px; align-items: center; justify-content: space-between; gap: 6px; }
.na-modern-nav-label { padding: 4px 10px 3px; color: #71829e; font-size: .59rem; font-weight: 850; letter-spacing: .14em; }
.na-modern-nav-customize { border: 0; padding: 4px 8px; border-radius: 8px; color: #8aa2c1; background: transparent; cursor: pointer; font: inherit; font-size: .62rem; }
.na-modern-nav-customize:hover { color: #eafaff; background: rgba(19,216,245,.08); }
.na-modern-quick-editor { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(19,216,245,.24); border-radius: 14px; background: linear-gradient(145deg, rgba(10,20,39,.98), rgba(24,17,42,.98)); }
.na-modern-quick-editor > strong { color: #edf6ff; font-size: .72rem; }
.na-modern-quick-editor > p { margin: -5px 0 1px; color: var(--nav-muted); font-size: .63rem; line-height: 1.45; }
.na-modern-quick-editor label { display: grid; gap: 4px; color: #aebbd0; font-size: .62rem; font-weight: 700; }
.na-modern-quick-editor select { width: 100%; min-height: 35px; border: 1px solid var(--nav-line); border-radius: 9px; padding: 0 8px; color: #edf6ff; background: #0a1020; font: inherit; }
.na-modern-quick-editor-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.na-modern-quick-editor-actions button { min-height: 32px; border: 1px solid var(--nav-line); border-radius: 9px; padding: 0 9px; color: #c8d4e6; background: rgba(255,255,255,.04); cursor: pointer; font: inherit; font-size: .64rem; font-weight: 750; }
.na-modern-quick-editor-actions button.is-primary { border-color: rgba(19,216,245,.32); color: #eaffff; background: rgba(19,216,245,.12); }
.na-modern-quick-editor-actions button:disabled { cursor: not-allowed; opacity: .55; }
.na-modern-quick-editor .na-modern-quick-editor-error { margin: 0; color: #fda4af; }
.na-modern-nav-link { display: flex; min-width: 0; min-height: 48px; align-items: center; gap: 11px; padding: 7px 10px; border: 1px solid transparent; border-radius: 13px; color: #d5deed; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.na-modern-nav-link:hover { transform: translateX(2px); border-color: rgba(19,216,245,.2); color: #fff; background: rgba(19,216,245,.065); }
.na-modern-nav-link.active { border-color: rgba(19,216,245,.38); color: #fff; background: linear-gradient(110deg, rgba(19,216,245,.13), rgba(168,85,247,.1)); box-shadow: inset 3px 0 #13d8f5; }
.na-modern-nav-link .na-nav-icon { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 10px; color: var(--nav-cyan); background: rgba(19,216,245,.09); font-size: .87rem; }
.na-modern-nav-link .na-nav-copy { display: grid; min-width: 0; gap: 2px; }
.na-modern-nav-link .na-nav-copy strong { overflow: hidden; color: inherit; font-size: .74rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.na-modern-nav-link .na-nav-copy small { overflow: hidden; color: var(--nav-muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.na-modern-nav-link em { min-width: 21px; margin-left: auto; padding: 2px 5px; border-radius: 999px; color: #eafaff; background: rgba(19,216,245,.13); font-size: .63rem; font-style: normal; text-align: center; }

.na-modern-nav-group { margin-top: 8px; border-top: 1px solid var(--nav-line); padding-top: 10px; }
.na-modern-nav-group summary { display: flex; min-height: 49px; align-items: center; gap: 11px; padding: 7px 10px; border: 1px solid transparent; border-radius: 13px; color: #d5deed; cursor: pointer; list-style: none; }
.na-modern-nav-group summary::-webkit-details-marker { display: none; }
.na-modern-nav-group summary:hover, .na-modern-nav-group[open] summary { border-color: var(--nav-line); background: rgba(255,255,255,.035); }
.na-modern-nav-group summary > .na-nav-icon { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 10px; color: #d8b4fe; background: rgba(168,85,247,.12); }
.na-modern-nav-group summary > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.na-modern-nav-group summary strong { font-size: .74rem; }
.na-modern-nav-group summary small { color: var(--nav-muted); font-size: .61rem; }
.na-modern-nav-chevron { margin-left: auto; color: var(--nav-muted); transition: transform .16s ease; }
.na-modern-nav-group[open] .na-modern-nav-chevron { transform: rotate(180deg); }
.na-modern-nav-group-items { display: grid; gap: 3px; padding: 5px 0 0 9px; }
.na-modern-nav-group-items .na-modern-nav-link { min-height: 43px; }
.na-modern-nav-group { margin-top: 3px; padding-top: 8px; }
.na-modern-nav-group summary { min-height: 45px; border-radius: 11px; }
.na-modern-nav-group-items { padding-left: 8px; }

.na-modern-sidebar-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; border: 1px solid var(--nav-line); border-radius: 13px; background: rgba(255,255,255,.025); }
.na-modern-footer-mark { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 9px; color: #e9d5ff; background: linear-gradient(135deg, rgba(168,85,247,.45), rgba(19,216,245,.2)); }
.na-modern-sidebar-footer > span:last-child { display: grid; min-width: 0; gap: 2px; }
.na-modern-sidebar-footer small { overflow: hidden; color: var(--nav-muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.na-modern-sidebar-footer strong { color: #d8e2f2; font-size: .65rem; }

.na-sidebar-modern.is-collapsed .na-modern-sidebar-brand { justify-content: center; }
.na-sidebar-modern.is-collapsed .na-modern-sidebar-brand a,
.na-sidebar-modern.is-collapsed .na-modern-sidebar-context .na-sidebar-context-copy,
.na-sidebar-modern.is-collapsed .na-modern-context-chevron,
.na-sidebar-modern.is-collapsed .na-modern-nav-label,
.na-sidebar-modern.is-collapsed .na-modern-nav-customize,
.na-sidebar-modern.is-collapsed .na-modern-quick-editor,
.na-sidebar-modern.is-collapsed .na-modern-nav-heading,
.na-sidebar-modern.is-collapsed .na-modern-nav-link .na-nav-copy,
.na-sidebar-modern.is-collapsed .na-modern-nav-link em,
.na-sidebar-modern.is-collapsed .na-modern-nav-group summary > span:nth-child(2),
.na-sidebar-modern.is-collapsed .na-modern-nav-chevron,
.na-sidebar-modern.is-collapsed .na-modern-sidebar-footer > span:last-child { display: none; }
.na-sidebar-modern.is-collapsed .na-modern-sidebar-context,
.na-sidebar-modern.is-collapsed .na-modern-nav-link,
.na-sidebar-modern.is-collapsed .na-modern-nav-group summary,
.na-sidebar-modern.is-collapsed .na-modern-sidebar-footer { justify-content: center; padding-inline: 5px; }
.na-sidebar-modern.is-collapsed .na-modern-nav-group-items { padding-left: 0; }
.na-sidebar-modern.is-collapsed .na-modern-nav-link { gap: 0; }
.na-sidebar-modern.is-collapsed .na-modern-sidebar-toggle { width: 38px; flex-basis: 38px; }

.na-shell-modern .na-topbar-modern { position: fixed !important; inset: 0 0 auto var(--na-sidebar-width) !important; z-index: 1000; display: flex; min-height: var(--na-topbar-height); align-items: center; justify-content: space-between; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--nav-line); background: rgba(8, 13, 29, .83); box-shadow: 0 10px 32px rgba(0,0,0,.12); backdrop-filter: blur(22px); transition: left .2s ease; }
.na-topbar-page-context { display: grid; min-width: 140px; gap: 3px; }
.na-topbar-page-context > span { color: #8494ae; font-size: .61rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.na-topbar-page-context > span a { color: inherit; text-decoration: none; }
.na-topbar-page-context > span a:hover { color: var(--nav-cyan); }
.na-topbar-page-context i { padding: 0 5px; color: var(--nav-cyan); font-style: normal; }
.na-topbar-page-context > strong { color: #f5f7ff; font-size: .94rem; font-weight: 760; }
.na-shell-modern .na-topbar-modern-actions { display: flex; min-width: 0; align-items: center; gap: 9px; }
.na-shell-modern .na-topbar-modern .na-topbar-secondary-info { display: flex; align-items: center; gap: 9px; }
.na-topbar-quick-search { position: relative; }
.na-topbar-quick-search > summary { display: flex; min-width: 116px; height: 38px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--nav-line); border-radius: 12px; color: #b8c5d9; background: rgba(255,255,255,.035); cursor: pointer; font-size: .72rem; list-style: none; }
.na-topbar-quick-search > summary::-webkit-details-marker { display: none; }
.na-topbar-quick-search > summary > span:first-child { color: var(--nav-cyan); font-size: 1.2rem; }
.na-topbar-quick-search[open] > summary, .na-topbar-quick-search > summary:hover { border-color: rgba(19,216,245,.4); color: #fff; background: rgba(19,216,245,.07); }
.na-topbar-search-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1500; width: min(360px, calc(100vw - 28px)); padding: 14px; border: 1px solid rgba(124,153,195,.24); border-radius: 16px; background: rgba(9,14,30,.98); box-shadow: 0 22px 58px rgba(0,0,0,.42); }
.na-topbar-search-panel > label { display: block; margin-bottom: 7px; color: #aebbd0; font-size: .69rem; font-weight: 750; }
.na-topbar-search-panel > input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid rgba(124,153,195,.23); border-radius: 11px; outline: none; color: #f4f7ff; background: rgba(3,8,22,.85); }
.na-topbar-search-panel > input:focus { border-color: var(--nav-cyan); box-shadow: 0 0 0 3px rgba(19,216,245,.1); }
.na-topbar-search-panel nav { display: grid; max-height: min(55vh, 430px); gap: 4px; margin-top: 9px; overflow: auto; }
.na-topbar-search-panel nav > a { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 10px; color: #e5ecf8; text-decoration: none; }
.na-topbar-search-panel nav > a:hover { background: rgba(19,216,245,.09); }
.na-topbar-search-panel nav > a > span:first-child { color: var(--nav-cyan); }
.na-topbar-search-panel nav > a > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.na-topbar-search-panel nav strong { font-size: .72rem; }
.na-topbar-search-panel nav small { overflow: hidden; color: var(--nav-muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.na-topbar-search-panel nav b { margin-left: auto; color: var(--nav-muted); }
.na-topbar-search-panel nav p { padding: 7px; color: var(--nav-muted); font-size: .72rem; }
.na-topbar-notifications { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--nav-line); border-radius: 12px; color: #d7e6f5; background: rgba(255,255,255,.035); font-size: 1.05rem; text-decoration: none; }
.na-topbar-notifications:hover { border-color: rgba(19,216,245,.38); color: var(--nav-cyan); }
.na-shell-modern .na-topbar-modern-actions :is(.na-topbar-quick-search > summary, .na-topbar-notifications, .na-topbar-mobile-menu, .na-topbar-account > summary, .na-now-launchers .na-now-launcher) { min-height: 40px; border: 1px solid var(--nav-line); border-radius: 11px; color: #d7e2f2; background: rgba(255,255,255,.035); box-shadow: none; }
.na-shell-modern .na-topbar-modern-actions :is(.na-topbar-quick-search > summary, .na-topbar-notifications, .na-topbar-account > summary, .na-now-launchers .na-now-launcher):hover { border-color: rgba(19,216,245,.42); color: #fff; background: rgba(19,216,245,.07); }
.na-shell-modern .na-topbar-modern-actions .na-now-launchers .na-now-launcher { padding: 0 11px; }
.na-topbar-account { position: relative; }
.na-topbar-account > summary { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 3px 9px 3px 4px; cursor: pointer; list-style: none; }
.na-topbar-account > summary::-webkit-details-marker { display: none; }
.na-topbar-account[open] > summary { border-color: rgba(19,216,245,.42); background: rgba(19,216,245,.07); }
.na-topbar-account .na-user-avatar { width: 31px; height: 31px; flex: 0 0 31px; }
.na-topbar-account .na-user-meta { gap: 2px; }
.na-topbar-account .na-user-meta strong { max-width: 128px; font-size: .7rem; }
.na-topbar-account .na-user-meta small { font-size: .58rem; }
.na-account-chevron { color: var(--nav-muted); font-size: .75rem; }
.na-topbar-account-panel { position: absolute; top: calc(100% + 9px); right: 0; z-index: 1500; display: grid; width: min(300px, calc(100vw - 24px)); gap: 10px; padding: 12px; border: 1px solid rgba(124,153,195,.24); border-radius: 15px; background: rgba(9,14,30,.98); box-shadow: 0 22px 58px rgba(0,0,0,.42); }
.na-account-context { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--nav-line); border-radius: 10px; }
.na-account-context-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #35c988; box-shadow: 0 0 10px #35c98880; }
.na-account-context > span:last-child { display: grid; min-width: 0; gap: 4px; }
.na-account-context small { color: #8494ae; font-size: .57rem; font-weight: 800; letter-spacing: .1em; }
.na-account-context strong { overflow: hidden; color: #e7edf8; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.na-account-appearance { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 3px; color: #aebbd0; font-size: .69rem; }
.na-account-appearance .na-theme-trigger { min-height: 34px; border-radius: 9px; }
.na-topbar-account-panel .na-auth-logout { min-height: 36px; justify-content: space-between; border-radius: 9px; }
.na-shell-modern .na-topbar-secondary-info > .na-auth-button { min-height: 40px; border-radius: 11px; }
.na-topbar-mobile-menu { display: none; }

.na-shell-modern .na-mobile-bottom-nav { display: none; }
.na-shell-modern :is(.na-nav, .na-nav-link, .na-modern-nav-link, summary, button, a):focus-visible { outline: 2px solid var(--nav-cyan); outline-offset: 2px; }

@media (max-width: 1120px) {
    .na-shell-modern { --na-sidebar-width: 0px; }
    .na-shell-modern:has(.na-sidebar-modern.is-mobile-open) { --na-sidebar-width: 0px; }
    .na-shell-modern .na-sidebar-modern { width: 280px; transform: translateX(-105%); }
    .na-shell-modern .na-sidebar-modern.is-mobile-open { transform: translateX(0); }
    .na-shell-modern .na-topbar-modern { left: 0 !important; padding: 0 16px; }
    .na-topbar-mobile-menu { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--nav-line); border-radius: 12px; color: #e9f1fc; background: rgba(255,255,255,.045); cursor: pointer; }
    .na-topbar-page-context { margin-right: auto; }
    .na-shell-modern .na-mobile-bottom-nav { display: none !important; }
    .na-modern-sidebar-backdrop { position: fixed; z-index: 1090; inset: 0; border: 0; background: rgba(1,5,17,.62); backdrop-filter: blur(3px); }
}

@media (max-width: 760px) {
    .na-shell-modern { --na-topbar-height: 66px; }
    .na-shell-modern .na-topbar-modern { gap: 9px; padding: 0 10px; }
    .na-topbar-page-context > span { font-size: .52rem; }
    .na-topbar-page-context > strong { max-width: 34vw; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
    .na-topbar-quick-search > summary { min-width: 38px; width: 38px; justify-content: center; padding: 0; }
    .na-topbar-quick-search > summary > span:nth-child(2) { display: none; }
    .na-shell-modern .na-topbar-secondary-info .na-status-pill,
    .na-shell-modern .na-topbar-secondary-info .na-user-meta,
    .na-shell-modern .na-topbar-secondary-info .na-auth-logout { display: none; }
    .na-shell-modern .na-topbar-secondary-info { gap: 5px; }
    .na-topbar-notifications { width: 36px; height: 36px; }
    .na-topbar-account > summary { width: 40px; min-width: 40px; justify-content: center; padding: 3px; }
    .na-topbar-account .na-user-meta, .na-account-chevron { display: none; }
    .na-topbar-account-panel { position: fixed; top: calc(var(--na-topbar-height) - 1px); right: 8px; }
    .na-account-appearance { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .na-shell-modern *, .na-shell-modern *::before, .na-shell-modern *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
