:root{
  --blue:#003B75;--blue2:#0057A6;--bg:#f3f6fa;--card:#fff;--line:#d9e1ea;
  --txt:#172033;--muted:#667085;--green:#d9f2df;--yellow:#fff0bf;--red:#ffd8d3;
  --shadow:0 4px 14px rgba(0,35,80,.08)
}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:11px}
header{height:44px;background:linear-gradient(135deg,var(--blue),#042445);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.1px}
.headright{display:flex;align-items:center;gap:10px;font-size:11px}
.headright .who{opacity:.9}
.kpiribbon{position:sticky;top:44px;z-index:18;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;background:#e9eef5;border-bottom:1px solid var(--line);padding:6px 8px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 7px;box-shadow:var(--shadow);min-height:42px}
.kpi b{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.25px}
.kpi span{font-size:15px;font-weight:800;color:var(--blue);line-height:18px}
main{padding:8px}
nav{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.tab{border:1px solid var(--line);background:#fff;color:var(--blue);padding:6px 9px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer}
.tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.tab.adminonly{display:none}
.adminonly-inline{display:none}
body.is-admin .tab.adminonly,
body.is-admin .adminonly-inline{display:inline-block}
.pane{display:none}
.pane.active{display:block}
.grid{display:grid;gap:8px}
.g2{grid-template-columns:1.15fr .85fr}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:var(--shadow)}
h2{font-size:13px;margin:0 0 6px;color:var(--blue)}
h3{font-size:11px;margin:0 0 5px;color:var(--blue)}
.mini{font-size:10px;color:var(--muted)}
.toolbar{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:4px 0 6px}
.btn{border:none;background:var(--blue);color:#fff;border-radius:7px;padding:5px 8px;font-size:10px;font-weight:700;cursor:pointer}
.btn.secondary{background:#fff;color:var(--blue);border:1px solid var(--line)}
.btn.danger{background:#b42318}
.btn:disabled{opacity:.55;cursor:not-allowed}
.tablewrap{max-height:60vh;overflow:auto;border-radius:8px;border:1px solid var(--line)}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
th,td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:3px 4px;vertical-align:top;min-width:92px}
th{position:sticky;top:0;background:var(--blue);color:#fff;font-size:9.5px;text-align:left;z-index:2;white-space:nowrap}
td:last-child,th:last-child{border-right:0}
.wide{min-width:180px}
.med{min-width:130px}
.narrow{min-width:58px}
input,select,textarea{font-family:inherit;font-size:10.5px;width:100%;border:1px solid #cbd5df;border-radius:5px;padding:3px 4px;background:#fff;line-height:14px}
textarea{min-height:30px;resize:vertical}
.insight{border-left:4px solid var(--blue);padding:6px 7px;background:#f8fbff;border-radius:7px;margin-bottom:5px;line-height:15px}
.good{border-left-color:#16833a;background:#f5fff7}
.warn{border-left-color:#a46400;background:#fffbef}
.bad{border-left-color:#b42318;background:#fff7f6}
.pill{display:inline-block;border-radius:999px;padding:2px 6px;font-size:9.5px;font-weight:800}
.Green{background:var(--green);color:#0f6b2f}
.Yellow{background:var(--yellow);color:#7a5300}
.Red{background:var(--red);color:#9d1c18}
.Closed{background:#e7ebf0;color:#344054}
.heat{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.heat>div{border:1px solid var(--line);border-radius:8px;background:#f8fbff;padding:6px;min-height:58px}
.bar{height:8px;background:#e7eef6;border-radius:999px;overflow:hidden;margin:2px 0 6px}
.bar div{height:100%;background:var(--blue2)}
.leaderList{display:grid;gap:5px}
.leaderItem{border:1px solid var(--line);border-left:4px solid #b42318;background:#fff7f6;border-radius:8px;padding:6px}
.leaderItem b{color:#971b16}
.compactText{line-height:14px}
.sectionNote{margin:0 0 6px;color:var(--muted);font-size:10px}
.deleteCol{min-width:40px;text-align:center}

/* ---- Users / admin table ---- */
.utable td,.utable th{min-width:auto}
.utable td{vertical-align:middle}
.rolepill{font-size:9px;font-weight:800;border-radius:999px;padding:2px 7px}
.role-admin{background:#e0ecff;color:#0043a6}
.role-user{background:#eef1f5;color:#475467}
.statuspill{font-size:9px;font-weight:800;border-radius:999px;padding:2px 7px}
.statuspill.active{background:#e3f5e9;color:#166534}
.statuspill.pending{background:#fff3d6;color:#8a5a00}
.loginHint{font-size:10px;color:var(--muted);margin-top:12px;line-height:15px;text-align:left}
.formrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.formrow input,.formrow select{width:auto;min-width:150px}
.hint{font-size:10px;color:var(--muted);margin:2px 0 8px;line-height:15px}
.result{font-size:10.5px;line-height:15px;margin-top:6px}
.result .ok{color:#0f6b2f;font-weight:700}
.result .bad{color:#b42318}
.result ul{margin:4px 0 0 16px;padding:0}

/* ---- Notifications ---- */
.badge{display:inline-block;min-width:15px;text-align:center;background:#b42318;color:#fff;border-radius:999px;font-size:9px;font-weight:800;padding:1px 5px;margin-left:4px}
.notifItem{border:1px solid var(--line);border-left:4px solid var(--blue2);background:#f8fbff;border-radius:8px;padding:6px;margin-bottom:5px}

/* ---- Login screen ---- */
.loginWrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eaf1f9,#dce7f4);padding:20px}
.loginCard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,35,80,.18);width:340px;max-width:100%;padding:22px}
.loginCard h1{color:var(--blue);font-size:20px;margin:0 0 2px}
.loginCard .sub{color:var(--muted);font-size:11px;margin-bottom:16px}
.loginCard label{display:block;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin:10px 0 3px}
.loginCard input{font-size:13px;padding:8px}
.loginCard .btn{width:100%;font-size:13px;padding:10px;margin-top:16px;border-radius:9px}
.loginErr{color:#b42318;font-size:11px;margin-top:10px;min-height:14px}

/* ---- Modal ---- */
.modalBack{position:fixed;inset:0;background:rgba(10,25,50,.45);z-index:80;display:none;align-items:center;justify-content:center;padding:16px}
.modalBack.open{display:flex}
.modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,35,80,.3);width:520px;max-width:100%;max-height:88vh;overflow:auto;padding:14px}
.modal h2{display:flex;justify-content:space-between;align-items:center}
.modal .x{background:transparent;border:none;font-size:18px;cursor:pointer;color:var(--muted)}
.snapList{display:grid;gap:4px;max-height:220px;overflow:auto;margin-top:6px}
.snapList button{text-align:left;border:1px solid var(--line);background:#f8fbff;color:var(--blue);border-radius:7px;padding:6px 8px;font-size:11px;cursor:pointer}

@media(max-width:1100px){
  .kpiribbon{grid-template-columns:repeat(4,1fr)}
  .g2,.g3{grid-template-columns:1fr}
  .heat{grid-template-columns:repeat(2,1fr)}
}
@media print{
  header,.kpiribbon,nav,.toolbar,.deleteCol{display:none}
  .pane{display:block}
  .card{box-shadow:none}
  .tablewrap{max-height:none;overflow:visible}
}

/* CCS Mods Copilot side panel */
.copilotToggle{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--blue);color:#fff;border:none;border-radius:999px;padding:9px 13px;font-size:11px;font-weight:800;box-shadow:0 8px 22px rgba(0,35,80,.25);cursor:pointer}
.copilotPanel{position:fixed;right:14px;bottom:58px;width:360px;max-width:calc(100vw - 28px);height:520px;max-height:calc(100vh - 85px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,35,80,.22);z-index:59;display:none;flex-direction:column;overflow:hidden}
.copilotPanel.open{display:flex}
.copilotHead{background:linear-gradient(135deg,var(--blue),#042445);color:#fff;padding:8px 10px;display:flex;justify-content:space-between;align-items:center}
.copilotHead b{font-size:12px}
.copilotClose{background:transparent;color:#fff;border:none;font-size:16px;cursor:pointer}
.copilotBody{padding:8px;overflow:auto;flex:1;background:#f8fbff}
.copilotMsg{margin:0 0 7px;padding:7px 8px;border-radius:8px;line-height:15px;font-size:11px}
.copilotUser{background:#e9eef5;color:var(--txt);margin-left:30px}
.copilotBot{background:#fff;border:1px solid var(--line);margin-right:8px}
.copilotInput{display:flex;gap:5px;padding:7px;border-top:1px solid var(--line);background:#fff}
.copilotInput input{font-size:11px}
.copilotInput button{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:5px 8px;font-size:10px;font-weight:800;cursor:pointer}
.promptGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px;border-top:1px solid var(--line);background:#fff}
.promptGrid button{border:1px solid var(--line);background:#fff;color:var(--blue);border-radius:7px;padding:5px;font-size:10px;cursor:pointer;text-align:left}
.copilotList{margin:4px 0 0 14px;padding:0}
.copilotList li{margin-bottom:3px}
.copilotStat{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px}
.copilotStat div{border:1px solid var(--line);border-radius:7px;padding:5px;background:#f8fbff}
.copilotStat b{display:block;color:var(--blue);font-size:13px}

/* ---- Carrier branding ---- */
.brandLeft{display:flex;align-items:center;gap:10px;min-width:0}
.brandChip{display:inline-flex;align-items:center;justify-content:center}
.headerLogo{height:30px;width:auto;display:block}
.loginLogo{display:block;height:auto;width:190px;max-width:80%;margin:0 auto 14px}
.brandLogo{image-rendering:auto}
@media(max-width:1100px){.headerLogo{height:26px}}