:root{--bg:#08192c;--panel:#0e2038;--panel2:#0e233c;--line:#1c3050;--text:#e7edf7;--muted:#8793a8;--blue:#005ed8;--teal:#01c7b6;--green:#00da6f;--yellow:#fc721a;--red:#f84649;--purple:#5943ff;--cyan:#3ec7ff}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:10px}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{height:100%;display:grid;grid-template-rows:auto 1fr}.topbar{background:#0e1524;border-bottom:1px solid #202b40;display:flex;align-items:center;padding:8px 14px;gap:7px;flex-wrap:wrap;row-gap:6px}.brand{display:flex;align-items:center;gap:8px;width:165px;font-weight:700;flex-shrink:0}.logo{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}.brand small{display:block;color:#758197;font-size:9px;font-weight:500;margin-top:1px}.pill{border:1px solid #25334b;background:#101a2a;border-radius:5px;padding:5px 9px;color:#cbd5e1;white-space:nowrap;flex-shrink:0;font-size:11px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}.top-search{flex:1;max-width:280px;min-width:60px;display:flex;align-items:center;gap:8px;background:#0b1c33;border:1px solid #1c3050;border-radius:6px;padding:7px 11px;color:#5c6d85;margin-left:6px;overflow:hidden}.top-search .ic{display:flex;color:#5c6d85}.top-search input{background:none;border:0;outline:0;color:#e7edf7;flex:1;font-size:11px}.top-search input::placeholder{color:#5c6d85}
.top-icon{position:relative;display:flex;align-items:center;color:#9aa8bd;padding:6px;border-radius:6px;cursor:pointer;margin-left:2px}.top-icon:hover{background:#121e31;color:#fff}.top-icon.alert .badge{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;border-radius:10px;padding:1px 4px;font-size:8px;min-width:13px;text-align:center}
.user{display:flex;align-items:center;gap:6px;padding-left:10px;margin-left:4px;border-left:1px solid #273149;color:#aeb8c9;cursor:pointer;flex-shrink:0;white-space:nowrap}.user .avatar{color:#5c9dff;display:flex}.user b{display:block;font-size:11px;color:#e7edf7}.user small{display:block;font-size:9px;color:#7c899e}.user .chev{color:#7c899e;font-size:10px}.body{min-height:0;display:grid;grid-template-columns:212px 1fr}.sidebar{background:#0d1421;border-right:1px solid #202b40;overflow:auto;padding:10px 7px}.sidebar::-webkit-scrollbar,.main::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track,.main::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb,.main::-webkit-scrollbar-thumb{background:#2a3850;border-radius:3px}.sidebar,.main{scrollbar-width:thin;scrollbar-color:#2a3850 transparent}.side-section{margin:10px 8px 5px;color:#66738a;font-size:10px;text-transform:uppercase;letter-spacing:.6px}.navitem,.navsub{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:4px;color:#9ba7ba;transition:.15s;user-select:none}.navitem:hover,.navsub:hover{background:#121e31;color:#e8edf6}.navitem.active{background:#173254;color:#dfe9fb;border-left:2px solid var(--blue);padding-left:8px}.navitem .ndot{width:7px;height:7px;border-radius:50%;background:var(--blue)}.navitem.teal .ndot{background:var(--teal)}.navitem.red .ndot{background:var(--red)}.navitem.gold .ndot{background:var(--yellow)}.navitem.purple .ndot{background:var(--purple)}.chev{margin-left:auto;color:#66738a}.submenu{display:none;padding-left:10px}.submenu.open{display:block}.navsub{font-size:11px;padding:6px 9px}.navsub.active{color:#fff;background:#13243a}.main{overflow:auto;padding:15px;background:#080d18}.dash-wrap{width:100%}.page-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.page-title h1{font-size:16px;margin:0}.page-title p{margin:3px 0 0;color:var(--muted);font-size:11px}.actions{display:flex;gap:7px}.btn{background:#111c2d;border:1px solid #2a3850;color:#d9e2ef;border-radius:4px;padding:7px 11px}.btn:hover{border-color:#41618e;background:#14243a}.btn.primary{background:#1455ad;border-color:#1e73df}.btn.success{background:#0d5c46;border-color:#167f62}.btn.danger{background:#5a1d27;border-color:#8e2b3a}.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.card{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:8px}.kpi{position:relative;min-height:70px}.kpi .orb{position:absolute;left:12px;top:13px;width:34px;height:34px;border-radius:50%;opacity:.7}.orb.blue{background:#143e80}.orb.green{background:#07513d}.orb.yellow{background:#604714}.orb.red{background:#5b202d}.orb.purple{background:#42216a}.kpi .label{margin-left:48px;color:#8c98aa;font-size:10px}.kpi .value{margin-left:48px;font-size:18px;font-weight:700;margin-top:2px}.kpi .sub{margin-left:48px;font-size:10px;color:#7e8ba0}.card h3{margin:0 0 6px;font-size:11px}.h3-boxed{display:inline-block;border:1px solid #2b4f7a;border-radius:4px;padding:4px 10px;margin:0 0 8px;background:#0d1f36}.chart{height:170px;position:relative;overflow:hidden}.chart svg{width:100%;height:100%}.legend{display:flex;gap:15px;color:#8290a6;font-size:10px;justify-content:center}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.donut{height:130px;display:grid;place-items:center}.donut-ring{width:88px;height:88px;border-radius:50%;background:conic-gradient(var(--blue) 0 45%,var(--yellow) 45% 49.5%,var(--teal) 49.5% 61%,var(--purple) 61% 100%);position:relative}.donut-ring:after{content:'';position:absolute;inset:18px;background:var(--panel);border-radius:50%}.resources{display:flex;justify-content:space-around;text-align:center}.gauge{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--blue) 0 32%,#243047 32%)}.gauge.ram{background:conic-gradient(var(--teal) 0 48%,#243047 48%)}.gauge.disk{background:conic-gradient(var(--purple) 0 29%,#243047 29%)}.gauge:after{content:'';position:absolute;inset:11px;border-radius:50%;background:var(--panel)}.gauge b{z-index:1}.resource-label{color:#77849a;font-size:9px;margin-top:5px}.table-wrap{overflow-x:auto;max-width:100%}.table{width:100%;border-collapse:collapse}.table th{color:#758197;font-size:9px;text-align:left;font-weight:500;padding:5px 8px;border-bottom:1px solid #273149}.table td{padding:3px 8px;border-bottom:1px solid #1d293d;color:#b8c3d3;font-size:9.5px}.status-up{color:var(--green)!important}.status-down{color:var(--red)!important}.status-warn{color:var(--yellow)!important}.flow{margin-top:10px}.flowbox{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:6px}.flowbox .mini{border:1px solid #2b3a53;border-radius:5px;padding:9px;background:#111b2b}.mini h4{font-size:10px;margin:0 0 7px}.mini p{margin:3px 0;color:#8d99ab;font-size:9px}.timeline{display:flex;justify-content:space-between;margin:9px 20px 0}.step{text-align:center;color:#7d899d;font-size:9px}.step .bubble{width:18px;height:18px;border-radius:50%;margin:auto auto 3px;background:#28354a}.step.done .bubble{background:var(--green)}.step.live .bubble{background:var(--blue)}.bottom{margin-top:10px}.alert-row{padding:7px 0;border-bottom:1px solid #1d293d;font-size:10px;color:#aab5c7}.alert-row .mark{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;background:var(--red)}.quick{display:grid;grid-template-columns:1fr 1fr;gap:6px}.quick .btn{font-size:10px}.integrations{display:flex;gap:6px;flex-wrap:wrap}.int{border:1px solid #2a3850;background:#111b2b;border-radius:4px;padding:8px 9px;min-width:80px}.int b{display:block;font-size:10px}.int span{color:var(--green);font-size:9px}.toolbar{display:flex;gap:8px;margin-bottom:10px}.search{flex:1;background:#0e1726;border:1px solid #2a3850;color:#e4eaf3;border-radius:4px;padding:8px}.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.module-card{background:#101827;border:1px solid #26334a;border-radius:6px;padding:12px;cursor:pointer}.module-card:hover{border-color:#3f6ea7;transform:translateY(-1px)}.module-card h3{margin:0 0 5px;font-size:12px}.module-card p{margin:0;color:#7f8da3;font-size:10px;line-height:1.4}.tag{display:inline-block;border:1px solid #2c405c;color:#88a2c5;border-radius:10px;padding:2px 6px;font-size:8px;margin-top:7px}.detail{display:grid;grid-template-columns:230px 1fr;gap:10px}.module-nav{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:8px;height:max-content}.module-nav button{width:100%;text-align:left;background:none;border:0;color:#92a0b3;padding:8px;border-radius:4px}.module-nav button.active,.module-nav button:hover{background:#15253b;color:white}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{display:flex;flex-direction:column;gap:4px}.field.full{grid-column:1/-1}.field label{font-size:9.5px;color:#8491a6}.field input,.field select,.field textarea{background:#0b1320;border:1px solid #2b3850;color:#dce5f1;border-radius:4px;padding:6px 8px;font-size:11px}.field textarea{min-height:110px;resize:vertical}.switch{display:flex;align-items:center;gap:8px}.switch input{accent-color:var(--green)}.notice{padding:9px 10px;border:1px solid #29405b;background:#0d1b2b;border-radius:5px;color:#9eb0c7;font-size:10px;margin-bottom:10px}.toast{position:fixed;right:18px;bottom:18px;background:#12243a;border:1px solid #355d88;color:#dfe9f7;border-radius:5px;padding:10px 14px;z-index:50;box-shadow:0 10px 30px #0008}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:40}.modalbox{width:min(780px,90vw);max-height:80vh;overflow:auto;background:#0f1827;border:1px solid #31415c;border-radius:8px;padding:16px}.modalbox h2{margin:0 0 12px;font-size:14px}.codebox{background:#080d15;border:1px solid #28364d;border-radius:5px;padding:12px;color:#9bc8b8;white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:10px}.hidden{display:none!important}@media(max-width:1000px){.grid5{grid-template-columns:repeat(2,1fr)}.module-grid{grid-template-columns:1fr}.detail{grid-template-columns:1fr}.flowbox{grid-template-columns:1fr 1fr}.top-stat{display:none}}

.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.help-grid .card p{line-height:1.55;color:#a7b4c7;font-size:12px}.notice{line-height:1.5}@media(max-width:900px){.help-grid{grid-template-columns:1fr}}

.help-card summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}.help-card summary::-webkit-details-marker{display:none}.help-num{font-family:monospace;color:#6fb7ff;min-width:26px}.help-chevron{margin-left:auto;color:#7f96b2;font-size:20px}.help-card[open] .help-chevron{transform:rotate(90deg)}.help-body{padding:10px 4px 3px 36px;color:#b4c3d5;line-height:1.4;font-size:12.5px}.help-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.btn.small{font-size:10px;padding:5px 8px}.notice{background:#0f2032;border:1px solid #29435f;border-radius:9px;padding:11px;margin-bottom:12px;color:#aebfd2}.notice b{color:#eef5ff}
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px;overflow-x:auto}.tabbar button{background:none;border:0;color:#92a0b3;padding:9px 13px;border-bottom:2px solid transparent;font-size:10.5px;white-space:nowrap;cursor:pointer}.tabbar-lg button{padding:10px 16px;font-size:13px}.media-bright .detailrow span:first-child{color:#c9d4e3}.media-bright .detailrow span:last-child:not(.status-up):not(.status-down){color:#ffffff}.media-bright .card h3{color:#ffffff}.media-bright .kpistrip-lg .kpi2 .lbl{color:#e7edf7}.media-bright .kpistrip-lg .kpi2 .sub{color:#9fb0c7}.tabbar button:hover{color:#e8edf6}.tabbar button.active{color:#fff;border-color:var(--blue)}
.tabbar-boxed{border-bottom:0;gap:4px;flex-wrap:wrap}.tabbar-boxed button{background:#111b2b;border:1px solid var(--line);border-radius:6px;padding:6px 12px}.tabbar-boxed button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.kpistrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:8px}.kpi2{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px;display:flex;gap:5px;align-items:flex-start;min-width:0;overflow:hidden}.kpi2 .ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;flex-shrink:0}.kpi2 .val{font-size:13px;font-weight:700}.kpi2 .lbl{font-size:9px;color:#8c98aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi2>div:last-child{min-width:0;overflow:hidden}.kpi2 .sub{font-size:9px;color:#7e8ba0;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpistrip-lg{grid-template-columns:repeat(4,1fr)}.kpistrip-lg .kpi2{padding:12px 16px;gap:12px}.kpistrip-lg .kpi2 .ic{width:56px;height:56px;font-size:32px;border-radius:10px}.kpistrip-lg .kpi2 .val{font-size:26px}.kpistrip-lg .kpi2 .lbl{font-size:13px;white-space:normal;overflow:visible;text-overflow:clip}.kpistrip-lg .kpi2 .sub{font-size:11px;white-space:normal;overflow:visible;text-overflow:clip}.trend-up{color:var(--green)}.trend-down{color:var(--red)}
.toggle{position:relative;display:inline-block;width:34px;height:18px;flex-shrink:0}.toggle input{opacity:0;width:0;height:0}.toggle .slider{position:absolute;inset:0;background:#2a3850;border-radius:20px;cursor:pointer;transition:.15s}.toggle .slider:before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:#c7d2e2;border-radius:50%;transition:.15s}.toggle input:checked+.slider{background:var(--blue)}.toggle input:checked+.slider:before{transform:translateX(16px);background:#fff}
.detailrow{display:flex;padding:4px 0;font-size:11px}.detailrow span:first-child{color:#8291a6;min-width:130px;flex-shrink:0;white-space:nowrap}.detailrow span:last-child{color:#dbe4f1;text-align:left;min-width:0}
.pill-status{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:9px;font-weight:700;color:#fff}.pill-status.up{background:#028e4f}.pill-status.warn{background:#c5860e}.pill-status.down{background:#c52e34}.pill-status.info{background:#005ed8}
.pagination{display:flex;gap:4px;align-items:center;font-size:11px;color:#9fb0c7}.pagenum{padding:4px 9px;border-radius:6px;background:var(--panel);border:1px solid var(--line);color:#9fb0c7;font-size:11px;cursor:pointer}.pagenum.active{background:var(--blue);color:#fff;border-color:var(--blue)}.pagenum:disabled{opacity:.4;cursor:default}
.iconbtn{width:21px;height:21px;border-radius:5px;background:var(--panel);border:1px solid var(--line);color:#9fb0c7;display:inline-grid;place-items:center;cursor:pointer;font-size:9px;margin-right:2px}.table td:has(.iconbtn){white-space:nowrap}.iconbtn:hover{border-color:#3a4a63;color:#fff}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.qa-btn{padding:5px 8px;border-radius:6px;background:var(--panel);border:1px solid var(--line);color:#dbe4f1;font-size:9.5px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:5px}.qa-btn:hover{border-color:#3a4a63}.qa-btn.green{background:#0d3324;border-color:#1a5c3f;color:#7ee9ab}.qa-btn.red{background:#3a1420;border-color:#6b2233;color:#f28b9a}
.cdr-split{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.table td.checkcol,.table th.checkcol{width:22px}
.breadcrumb{font-size:10.5px;color:#7e8ba0;margin-bottom:8px;display:flex;justify-content:space-between}.breadcrumb b{color:#c7d2e2;font-weight:600}.breadcrumb .bc-date{color:#7e8ba0}
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.svc-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;gap:10px;align-items:flex-start}.svc-card .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex-shrink:0;background:#2e83ff22;color:#2e83ff}.svc-card .name{font-weight:700;font-size:12px}.svc-card .meta{font-size:9px;color:#8291a6;margin-top:2px}.svc-card .stats{display:flex;gap:10px;margin-top:6px;font-size:9px;color:#9fb0c7}
.hbar{height:8px;border-radius:5px;background:#1c2739;overflow:hidden;margin:4px 0}.hbar i{display:block;height:100%;border-radius:5px}
.resbar{display:flex;flex-direction:column;gap:2px;font-size:9px;color:#9fb0c7}.resbar .track{height:6px;border-radius:4px;background:#1c2739;overflow:hidden}.resbar .track i{display:block;height:100%}
.navbadge{display:inline-block;margin-left:auto;font-size:8px;font-weight:700;border-radius:9px;padding:2px 6px}.navbadge.new{background:var(--purple);color:#fff}.navbadge.count{background:var(--red);color:#fff}
.dash-footer{margin-top:14px;padding:12px 4px;border-top:1px solid var(--line);color:#7e8ba0;font-size:10px;display:flex;align-items:center;gap:4px}.dash-footer-links{margin-left:auto;color:#7e8ba0}
.formgrid6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px 14px}.formgrid6 .field.span2{grid-column:span 2}.daterange-pair{display:flex;align-items:center;gap:8px}.daterange-pair input{flex:1;min-width:0}

/* Mobile navigation overrides — placed at the true end of this file
   deliberately, not near related desktop rules. CSS cascades per-property,
   not per-rule: a media-query block placed earlier in the file can still
   lose individual properties (like width/height) to a later same-specificity
   base rule for that same selector, even though the media condition matches.
   Keeping every mobile override here, after everything else, is what
   actually guarantees it wins — regardless of where else in this file a
   given selector happens to be styled, now or in any future edit. */
.hamburger{display:none;background:none;border:1px solid #2a3850;color:#dce5f1;border-radius:5px;width:32px;height:32px;font-size:15px;flex-shrink:0;align-items:center;justify-content:center}
.sidebar-backdrop{display:none}
@media(max-width:860px){
 .hamburger{display:flex}
 .body{grid-template-columns:1fr!important}
 .sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;max-width:82vw;z-index:41;transform:translateX(-100%);transition:transform .22s ease;box-shadow:6px 0 24px rgba(0,0,0,.5)}
 .sidebar.open{transform:translateX(0)}
 .sidebar-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40}
 .brand{width:auto}
 .brand small{display:none}
 .topbar{padding:8px 10px}
 .iconbtn{width:32px!important;height:32px!important;font-size:12px}
}

/* Login screen */
.loginscreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0a0f1a;padding:20px}
.loginbox{width:100%;max-width:360px;background:#111a2b;border:1px solid #22314a;border-radius:12px;padding:32px;text-align:center}
.loginbox .field{text-align:left}
.loginbox input{width:100%;box-sizing:border-box;padding:9px 10px;background:#0d1421;border:1px solid #22314a;border-radius:6px;color:#e7edf7;font-size:13px}
.loginbox label{display:block;font-size:11px;color:#9fb0c7;margin-bottom:4px}

/* Global: every text color on the site forced to solid white for
   readability, per explicit request. The one deliberate exception is the
   platform's real status/trend indicators (Online/Down/Warning pills and
   dashboard trend arrows) — these exist specifically to be told apart at a
   glance across a live ops console, and collapsing green/red/yellow into
   white would make "up" and "down" visually identical, a real functional
   loss rather than a readability gain. Every status/trend rule already
   carries or is given !important below, so it wins over this override by
   specificity (a class beats the universal selector) even though this
   block is !important too. */
*{color:#ffffff!important}
.trend-up{color:var(--green)!important}
.trend-down{color:var(--red)!important}