/* Original NPS navy/blue theme. Responsive layout only; never scale browser zoom. */
:root{--nav:#0b2436;--nav-2:#143a52;--ink:#102d42;--muted:#637d90;--line:#d8e4eb;--bg:#f2f6f9;--card:#fff;--blue:#0878c9;--blue-2:#0e8bda;--blue-soft:#eaf5fd;--green:#07965a;--green-soft:#e7f7ef;--orange:#ef9f19;--nps-green:#0878c9;--nps-green-dark:#0b2436;--nps-yellow:#eaf5fd;--nps-surface:#f2f6f9;--nps-border:#d8e4eb;--nps-ink:#102d42;--dbg-accent:#0878c9;--dbg-accent-dark:#0b2436;--dbg-gold:#eaf5fd;--dbg-bg:#f2f6f9;--dbg-border:#d8e4eb;--dbg-copy:#102d42}
html,body{min-width:0;max-width:100%;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink)}
#app .shell,#app .body-grid,#app .main,#app .main>*{min-width:0}
#app .sidebar{background:var(--nav)!important}#app .nav-item.active{background:var(--nav-2)!important;color:#fff!important}
#app .btn.primary,#app .config-tabs button.active,#app .nps-report-controls .btn.primary{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
#app .ce-division h2,#app .ce-field h3{color:var(--ink)!important}
#app .page-head,#app .head-actions{flex-wrap:wrap;gap:10px;max-width:100%}
#app input,#app select,#app textarea{min-width:0;max-width:100%}
#app .table-scroll,#app .table-wrap,#app .fleet-table-wrap,#app .meter-v2-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#app .nps-report-controls{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important;max-width:100%}
body .dbg-tabs button.active,body .tab.active{background:var(--blue)!important;color:#fff!important}
body>.topbar .dbg-brand img{background:#fff}
@media(max-width:1400px){body #app main.main[data-page="config"]>.ce-sections{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:1180px){
 #app .body-grid{display:block!important}
 #app .sidebar{position:fixed!important;top:0!important;bottom:0;width:min(290px,86vw)!important;height:100dvh!important;z-index:12000!important;transform:translateX(-102%)!important;overflow-y:auto!important}
 body.nav-open #app .sidebar{transform:translateX(0)!important}
 #app .main{margin-left:0!important;width:100%!important;max-width:100%!important}
 #app .mobile-menu{display:inline-flex!important;min-width:40px;min-height:40px}
 #app .sidebar .sidebar-brand{padding-top:18px}
}
@media(max-width:700px){
 #app .main{padding:12px!important}#app .page-head{align-items:flex-start!important}
 #app .head-actions{width:100%!important}#app .head-actions>*{flex:1 1 140px;max-width:100%}
 #app .topbar .user-text,#app .topbar .connection-badge{display:none!important}
 #app .main input:not([type=checkbox]):not([type=radio]),#app .main select,#app .main textarea{font-size:16px!important}
 body #app main.main[data-page="config"]{grid-template-columns:minmax(0,1fr)!important}
 body #app main.main[data-page="config"]>.config-tabs{position:static!important;flex-direction:row!important;flex-wrap:wrap!important;width:100%!important;top:auto!important}
 body #app main.main[data-page="config"]>.ce-sections{grid-template-columns:minmax(0,1fr)!important}
 html body #app main.main[data-page="config"] .ce-division .ce-grid,html body #app main.main[data-page="config"] .ce-division .ce-grid:has(>.ce-field){grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app .nps-report-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .login-shell,.login-panel,.login-card{min-width:0;max-width:100%}.login-panel{padding:16px!important}.login-card{padding:24px 18px!important}
 .login-card input{font-size:16px!important}
}
@media(max-width:420px){html body #app main.main[data-page="config"] .ce-division .ce-grid,html body #app main.main[data-page="config"] .ce-division .ce-grid:has(>.ce-field),html body #app main.main[data-page="config"] .ce-division .ce-grid:has(>.ce-field:nth-child(2):last-child),#app .nps-report-controls{grid-template-columns:minmax(0,1fr)!important}#app .brand-copy small{display:none}}

/* Keep sign-out at the far right of the header on every screen size. */
#app .topbar>#nps-logout-button{order:100;flex:0 0 38px;margin-left:10px;align-self:center}
@media(max-width:700px){#app .topbar>#nps-logout-button{width:40px;height:40px;flex-basis:40px;margin-left:6px}}

/* Light NPS palette; preserve device-status and fault colours. */
:root{--nav:#edf3f9;--nav-2:#dce9f7;--ink:#263c53;--muted:#60758b;--line:#dce5ee;--bg:#f7f9fc;--card:#fff;--blue:#3a6da4;--blue-2:#2d5988;--blue-soft:#eaf2fc;--shadow:0 2px 8px rgba(38,60,83,.035);--nps-green:#3a6da4;--nps-green-dark:#edf3f9;--nps-surface:#f7f9fc;--nps-border:#dce5ee;--nps-ink:#263c53;--dbg-accent:#3a6da4;--dbg-accent-dark:#edf3f9;--dbg-bg:#f7f9fc;--dbg-border:#dce5ee;--dbg-copy:#263c53}
body #app .sidebar{background:#edf3f9!important;border-right:1px solid #dce5ee}
body #app .sidebar .nav-item{color:#415d79!important;background:transparent}
body #app .sidebar .nav-item .nav-icon,body #app .sidebar .nav-label{color:#526e8b!important}
body #app .sidebar .nav-item:hover{background:#e3edf8!important;color:#234f80!important}
body #app .sidebar .nav-item.active{background:#dce9f7!important;color:#214c83!important;box-shadow:inset 3px 0 0 #83aad4}
body #app .sidebar .nav-item.active .nav-icon{background:#fff!important;color:#3a6da4!important}
body #app .sidebar .sidebar-brand,body #app .sidebar .sidebar-brand b{color:#263c53!important}
body #app .topbar{background:#fff;border-bottom-color:#dce5ee;box-shadow:0 1px 4px rgba(38,60,83,.025)}
body #app .topbar .user-chip,body #app .topbar .brand-mark{background:#e3eefb!important;color:#214c83!important}
body #app .main .card{border-color:#dce5ee;box-shadow:0 2px 8px rgba(38,60,83,.035)}
body #app .main h1,body #app .main h2{color:#263c53}
body #app .main .page-head p{color:#60758b}
body #app .btn.primary,body #app .config-tabs button.active,body #app .nps-report-controls .btn.primary,body .login-panel .sign-in-button{background:#dbeafe!important;border-color:#b8d0ed!important;color:#214c83!important}
body #app .btn.primary:hover,body #app .nps-report-controls .btn.primary:hover,body .login-panel .sign-in-button:hover{background:#cbdff8!important;border-color:#99bce5!important;color:#173f70!important}
body #app .btn:focus-visible,body #app input:focus-visible,body #app select:focus-visible{outline:3px solid #8eb4e4;outline-offset:2px}
body:has(main.workspace)>.topbar{background:#fff!important;color:#263c53!important;border-color:#dce5ee!important}
body>.topbar .dbg-brand-copy strong,body>.topbar .dbg-brand-copy small{color:#415d79!important}
body>.topbar .top-actions button,body>.topbar .top-actions a{background:#eaf2fc!important;color:#214c83!important;border-color:#b8d0ed!important}


/* Configuration fields: one box model for numbers, units and selectors. */
html body #app main.main[data-page="config"] .ce-division .ce-grid>.ce-field{
 display:flex!important;flex-direction:column!important;min-width:0!important;
 padding:8px!important;gap:5px!important;box-sizing:border-box!important;
}
html body #app main.main[data-page="config"] .ce-division .ce-field h3{
 line-height:1.3!important;min-height:16px!important;overflow-wrap:anywhere;
}
html body #app main.main[data-page="config"] .ce-field .ce-input{display:block!important;min-width:0!important;width:100%!important}
html body #app main.main[data-page="config"] .ce-field .ce-input>div{
 display:grid!important;grid-template-columns:minmax(0,1fr) 38px!important;
 align-items:stretch!important;box-sizing:border-box!important;height:36px!important;
 min-height:36px!important;overflow:hidden!important;border:1px solid #bfd0e2!important;
 border-radius:7px!important;background:#fff!important;
}
html body #app main.main[data-page="config"] .ce-field .ce-input>div>input{
 width:100%!important;min-width:0!important;height:34px!important;min-height:0!important;
 padding:0 8px!important;margin:0!important;border:0!important;border-radius:0!important;
 line-height:normal!important;box-sizing:border-box!important;font-size:13px!important;
}
html body #app main.main[data-page="config"] .ce-field .ce-input>div>b{
 position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;
 width:38px!important;min-width:38px!important;max-width:38px!important;height:34px!important;
 min-height:0!important;padding:0 3px!important;margin:0!important;box-sizing:border-box!important;
 border:0!important;border-left:1px solid #dce5ee!important;background:#f2f6fb!important;
 line-height:1!important;font-size:11px!important;white-space:nowrap!important;
}
html body #app main.main[data-page="config"] .ce-field select,
html body #app main.main[data-page="config"] .ce-field .ce-readonly{
 width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;
 box-sizing:border-box!important;margin:0!important;padding:0 8px!important;
 border:1px solid #bfd0e2!important;border-radius:7px!important;font-size:13px!important;
 line-height:normal!important;background-color:#fff!important;
}
html body #app main.main[data-page="config"] .ce-field .ce-readonly{display:flex!important;align-items:center!important;justify-content:center!important}
html body #app main.main[data-page="config"] .ce-field .ce-pair{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:6px!important;align-items:end!important;min-width:0!important;
}
html body #app main.main[data-page="config"] .ce-field .ce-pair .ce-input>span{
 display:block!important;text-align:left!important;line-height:14px!important;
 min-height:14px!important;margin:0 0 4px!important;font-size:11px!important;
}
html body #app main.main[data-page="config"] .ce-field .ce-range{
 line-height:1.35!important;margin:0!important;overflow-wrap:anywhere;
}
html body #app main.main[data-page="config"] .ce-field .ce-input>div:focus-within{
 border-color:#3a6da4!important;box-shadow:0 0 0 2px #e1ecfa!important;
}
/* Two section columns leave room for paired fields on smaller laptops. */
@media(min-width:1100px) and (max-width:1450px){
 html body #app main.main[data-page="config"]>.ce-sections{column-count:2!important}
}
@media(max-width:700px){
 html body #app main.main[data-page="config"] .ce-field select,
 html body #app main.main[data-page="config"] .ce-field .ce-readonly,
 html body #app main.main[data-page="config"] .ce-field .ce-input>div{height:44px!important;min-height:44px!important;font-size:16px!important}
 html body #app main.main[data-page="config"] .ce-field .ce-input>div>input{height:42px!important;font-size:16px!important}
 html body #app main.main[data-page="config"] .ce-field .ce-input>div>b{height:42px!important}
}