/* Shared navigation and responsive layout; feature modules keep their own state. */
body{--bg:#f5f7fa;--panel:#fff;--panel-2:#f6f8fb;--text:#202b3a;--muted:#627185;--line:#dce3ec;--nav:#edf3ff;--accent:#2463d6;--nav-active:#2463d6;--up:#078774;--down:#d44056;letter-spacing:0}
body.theme-dark{--bg:#181b20;--panel:#20252c;--panel-2:#282f38;--text:#edf1f7;--muted:#a9b5c5;--line:#39424e;--nav:#25354f;--accent:#81adff;--nav-active:#2463d6;--up:#39c4a8;--down:#ff8093}
.shell-ready :is(h1,h2,h3,button,.site){letter-spacing:0}body.traffic-view .card-head>.interface-status{grid-column:2;grid-row:1;justify-self:end;align-self:start;width:auto}body.traffic-view .card .interface-focus-link{display:block;position:relative;min-height:0;padding:0 20px 0 0;text-align:left;width:100%;line-height:1.4}body.traffic-view .interface-focus-link img{position:absolute;right:0;top:2px;width:14px;height:14px}
.shell-sidebar{display:none}.shell-menu-group{min-width:0;margin:0 0 15px}.shell-menu-group h3{margin:0;padding:9px 12px 7px;font-size:11px;font-weight:600;color:var(--muted);line-height:1.4;letter-spacing:0}.shell-menu-items{display:grid;gap:3px}.shell-menu-items button{display:flex;align-items:center;gap:10px;min-width:0;text-align:left;font-size:13px;font-weight:500;line-height:1.4;min-height:36px;padding:7px 11px;border:0;border-left:3px solid transparent;border-radius:5px;background:transparent;color:var(--text)}.shell-menu-items button.active{background:var(--nav);border-left-color:var(--accent);color:var(--accent);font-weight:600}.shell-menu-items button:hover{background:var(--panel-2)}.shell-menu-items button.active:hover{background:var(--nav)}.shell-menu-items button span{min-width:0;overflow-wrap:anywhere}.shell-menu-items .mobile-icon{width:18px;height:18px;flex-basis:18px;color:var(--muted)}.shell-menu-items button.active .mobile-icon{color:var(--accent)}
.shell-menu-search{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);padding:0 10px}.shell-menu-search .mobile-icon{width:17px;height:17px;flex-basis:17px;color:var(--muted)}.shell-menu-search input{width:100%;min-width:0;height:38px!important;padding:6px 0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px!important;color:var(--text);font-weight:400}.shell-menu-search:focus-within{outline:2px solid var(--accent);outline-offset:1px}.shell-menu-search input:focus-visible{outline:none}.shell-no-results{font-size:13px;color:var(--muted);padding:10px}.shell-no-results[hidden],.shell-menu-group[hidden],.shell-menu-items button[hidden]{display:none!important}
body.shell-ready:not(.locked) #mainNav{display:none}body>main{min-width:0}.status-line{color:var(--muted)}#cards{min-width:0}#cards>article{min-width:0}.card{border-color:var(--line)}.card .site{font-size:16px;line-height:1.4}.traffic-value,.summary .value{font-variant-numeric:tabular-nums}.traffic-box{border-radius:0}.card-head .interface-status{min-width:64px;height:30px;font-size:11px}.card .details{line-height:1.6;font-size:12px}body.traffic-view .card[data-traffic-interface]{content-visibility:auto;contain-intrinsic-size:auto 660px}
@media(min-width:901px){
  body.shell-ready:not(.locked){padding-left:224px}body.shell-ready:not(.locked)>.shell-sidebar{display:flex;position:fixed;inset:0 auto 0 0;width:224px;box-sizing:border-box;z-index:85;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);padding:16px 10px 10px}
  .shell-brand{display:flex;align-items:center;gap:9px;padding:0 9px 18px;min-height:44px}.shell-brand img{flex:none;object-fit:contain}.shell-brand strong{font-size:15px;line-height:1.35;overflow-wrap:anywhere}.shell-sidebar>.shell-menu-search{margin:0 5px 12px}.shell-desktop-menu{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1}.shell-sidebar>footer{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid var(--line);padding:12px 7px 0;margin-top:8px}.shell-sidebar>footer>div{display:grid;gap:3px;min-width:0}.shell-sidebar>footer small{font-size:10px;color:var(--muted)}.shell-sidebar>footer strong{font-size:13px;overflow-wrap:anywhere}.shell-sidebar>footer button{background:transparent;border:0;padding:6px;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}.shell-sidebar>footer .mobile-icon{width:16px;height:16px;flex-basis:16px}
  body.shell-ready:not(.locked)>header,body.shell-ready.theme-dark:not(.locked)>header{display:block;padding:14px 22px;background:var(--panel)}body.shell-ready:not(.locked)>header .app-brand{display:none}.shell-ready:not(.locked) #currentAccount,.shell-ready:not(.locked) #logoutBtn{display:none}.shell-ready .toolbar{width:100%;min-width:0}.shell-ready .control-bar{gap:8px}.shell-ready .control-bar button,.shell-ready .control-bar select{min-height:36px}.shell-ready .control-bar #routerSelect{max-width:340px}.shell-ready>main{padding:20px 22px 32px}.shell-ready .summary{margin-bottom:18px}.shell-ready .summary .value{font-size:22px}
}
@media(max-width:900px){
  body>header,body.theme-dark>header{position:sticky;top:0;z-index:50;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--panel);gap:6px}.app-brand h1{font-size:15px;line-height:20px}.app-brand img{width:30px;height:30px}.mobile-account{font-size:11px;line-height:17px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}.mobile-tools{gap:5px}.mobile-tools button{width:42px;height:42px;border:1px solid var(--line);background:var(--panel);border-radius:6px}.mobile-tools #loginAuditBell{width:42px;height:42px}.mobile-quick #trafficPlayback{padding:4px 0}.mobile-quick #trafficPlayback button{height:38px;font-size:12px}.mobile-quick #trafficPlaybackStatus{font-size:10px}
  body>main{padding:14px 12px calc(82px + env(safe-area-inset-bottom))}.status-line{font-size:11px;line-height:1.5}.summary{margin:0 0 16px;padding:0 0 14px;row-gap:14px}.summary .label{font-size:10px}.summary .value{font-size:19px;line-height:1.4}.summary .metric{padding:0 10px}
  .mobile-nav{padding-top:5px;background:var(--panel);border-color:var(--line);z-index:90}.mobile-nav button{height:51px;min-height:44px;font-size:10px;gap:4px}.mobile-nav button.active{background:transparent;color:var(--accent)}.mobile-nav .mobile-icon{width:21px;height:21px;flex-basis:21px}.mobile-nav button.active .mobile-icon{width:21px;height:21px}.mobile-nav button.active::before{content:'';position:absolute;top:0;height:2px;width:32px;background:var(--accent)}
  .mobile-panel{inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:0 16px calc(20px + env(safe-area-inset-bottom));background:var(--panel);overscroll-behavior:contain}.mobile-panel-head{padding:calc(10px + env(safe-area-inset-top)) 0 10px;margin:0 0 16px;border-color:var(--line)}.mobile-panel-head h2{font-size:20px}.mobile-panel .mobile-close{width:44px;height:44px;border:1px solid var(--line);background:var(--panel)}.mobile-panel>.shell-menu-search{position:sticky;top:77px;z-index:3;margin-bottom:14px;background:var(--panel-2)}.mobile-panel>.shell-menu-search input{font-size:16px!important;height:44px!important}.mobile-menu-list{display:block}.mobile-menu-list[hidden],.mobile-panel .shell-menu-search[hidden],.mobile-controls[hidden]{display:none}.mobile-menu-list .shell-menu-group{margin-bottom:18px}.mobile-menu-list .shell-menu-group h3{padding:9px 4px;font-size:12px}.mobile-menu-list .shell-menu-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}.mobile-menu-list button{min-height:50px;border:0;border-left:3px solid transparent;border-radius:5px;padding:10px 8px;font-size:13px;gap:9px;background:transparent}.mobile-menu-list button.active{border-left-color:var(--accent);background:var(--nav)}
  .mobile-panel .control-bar{grid-template-columns:minmax(0,1fr);gap:14px}.mobile-panel .control-bar :is(input,select,button){height:46px;min-height:44px;font-size:16px}.mobile-panel #routerSelect{max-width:100%}.mobile-panel #refreshBtn{background:var(--nav-active);color:#fff}.mobile-panel #logoutBtn{color:var(--down)}.mobile-overview{margin-bottom:16px;border:1px solid var(--line);border-radius:6px;padding:0 12px;background:var(--panel)}.mobile-overview>summary{min-height:45px;font-size:13px}.mobile-overview #topTraffic{background:transparent}
  body.traffic-view #cards{grid-template-columns:minmax(0,1fr);gap:14px}body.traffic-view .card{padding:16px;border-radius:7px}body.traffic-view .card-head{min-height:44px;gap:10px}body.traffic-view .card .site{font-size:15px;line-height:1.4}body.traffic-view .traffic-value{font-size:23px}.card .vlan{font-size:11px}.card .details{font-size:11px}.rt-chart{margin-top:12px}.rt-chart .rt-stats{font-size:11px}
  #cards :is(h2,.site){overflow-wrap:anywhere}#cards h2{font-size:20px;line-height:1.4}#cards h3{font-size:16px}#cards :is(input:not([type=checkbox],[type=radio]),select,textarea){font-size:16px;max-width:100%;min-width:0;box-sizing:border-box}#cards button{min-height:40px}#cards :is(.admin-panel,.settings-fields,.rp-fields,.resource-facts){min-width:0}#cards :is(.admin-table,.vpn table,.ipam table){font-size:12px}#cards table th{white-space:nowrap}#cards table td{overflow-wrap:anywhere}#cards :is(.vpn-tabs,.ipam-tabs){gap:6px;scrollbar-width:thin;padding-bottom:5px}#cards :is(.vpn-tabs,.ipam-tabs) button{padding:8px 12px;min-height:44px}
  dialog{max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);box-sizing:border-box}dialog:not(.mobile-panel) :is(input:not([type=checkbox],[type=radio]),select,textarea){font-size:16px;min-width:0;max-width:100%}dialog:not(.mobile-panel) button{min-height:44px}.ops-view>header,.health-view>header{gap:12px}.ops-view .ops-filters{margin:16px 0}.ops-view table td{min-width:95px}
}
@media(max-width:900px){html{scroll-padding-top:130px}.mobile-tools button,.mobile-tools #loginAuditBell{width:44px;height:44px}#adminAccessForm{scroll-margin-top:130px}.access-users-table tbody tr,#adminAccessForm{border-radius:7px}.access-users-table td::before{letter-spacing:0}#cards :is(select,input:not([type=checkbox],[type=radio])){height:44px;min-height:44px;padding:8px 12px;line-height:1.35}}
@media(max-width:360px){.mobile-menu-list .shell-menu-items{grid-template-columns:minmax(0,1fr)}.app-brand h1{font-size:14px}.mobile-account{font-size:10px}.mobile-tools{gap:3px}.summary .value{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{body.shell-ready:not(.locked){padding-left:0}.shell-sidebar{display:none!important}body>header{position:static}}