:root{
  --navy:#0b2a4a; --navy2:#123e6b; --sky:#1b7fc1; --bg:#eef2f7;
  --card:#ffffff; --ink:#1c2b3a; --mut:#5c6f84; --line:#d9e2ec;
  --ok:#15803d; --okbg:#dcfce7; --warn:#b45309; --warnbg:#fef3c7;
  --bad:#b91c1c; --badbg:#fee2e2; --info:#1d4ed8; --infobg:#dbeafe;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);
     display:flex;flex-direction:column;min-height:100vh;padding-bottom:34px}
.topbar{background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff;padding:14px 22px;display:flex;gap:16px;align-items:center;position:sticky;top:0;z-index:10}
.topbar .logo{width:44px;height:44px;border-radius:10px;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:900;font-size:22px}
.topbar h1{font-size:18px;margin:0}
.topbar small{opacity:.8}
.topbar .sp{flex:1}
.btn{background:var(--sky);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.danger{background:var(--bad)}
.btn.small{padding:5px 10px;font-size:12px;border-radius:6px}
.layout{display:flex;flex:1 0 auto}
nav.side{width:230px;background:#0f3358;color:#dbeafe;padding:14px 10px;display:flex;flex-direction:column;gap:4px}
nav.side button{background:transparent;border:0;color:#dbeafe;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px}
nav.side button.active,nav.side button:hover{background:#ffffff22;color:#fff}
nav.side .sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin:10px 8px 2px}
main{flex:1;padding:20px;max-width:1280px}
.view{display:none}
.view.active{display:block}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.kpi .v{font-size:26px;font-weight:800}
.kpi .l{font-size:12px;color:var(--mut)}
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:13.5px}
.alert.critical{background:var(--badbg);border-color:#fecaca}
.alert.warning{background:var(--warnbg);border-color:#fde68a}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700}
.b-compliant,.b-closed,.b-serviceable,.b-approved,.b-low{background:var(--okbg);color:var(--ok)}
.b-partially-compliant,.b-mitigating,.b-monitoring,.b-degraded,.b-under-review,.b-medium,.b-obs,.b-capa-in-progress,.b-pending-verification{background:var(--warnbg);color:var(--warn)}
.b-non-compliant,.b-open,.b-high,.b-l1,.b-down,.b-suspended,.b-critical{background:var(--badbg);color:var(--bad)}
.b-l2,.b-deferred,.b-planned,.b-not-assessed{background:var(--infobg);color:var(--info)}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:10px;overflow:hidden}
th,td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#0f3358;color:#fff;font-size:12px}
tr:hover td{background:#f6fafd}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
input,select,textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;width:100%}
.toolbar input,.toolbar select{width:auto;min-width:170px;background:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.two{grid-template-columns:1fr}nav.side{display:none}main{padding:12px}}
.scorebar{height:10px;background:#e5eaf0;border-radius:6px;overflow:hidden}
.scorebar>div{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e)}
.modal{position:fixed;inset:0;background:#0008;display:none;place-items:center;z-index:50;padding:16px}
.modal.open{display:grid}
.sheet{background:#fff;border-radius:14px;max-width:760px;width:100%;max-height:92vh;overflow:auto;padding:18px 18px 64px}
.sheet h3{margin-top:0}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frm .full{grid-column:1/-1}
label{font-size:12px;color:var(--mut);display:block;margin-bottom:3px}
.foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.mut{color:var(--mut);font-size:12.5px}
h2{margin:6px 0 4px}
.printable{background:#fff;padding:24px;border-radius:12px}
@media print{nav.side,.topbar .sp,.topbar .btn,.toolbar,.no-print{display:none!important}main{padding:0}.card,table{break-inside:avoid}}

/* ---------------- login ---------------- */
/* The [hidden] rule MUST come after display:grid, otherwise the overlay stays
   on top of the app forever and the user can never reach it after login. */
.login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#0b2a4a,#123e6b);display:grid;place-items:center;z-index:100;padding:16px}
.login-overlay[hidden]{display:none}
.login-card{background:#fff;border-radius:16px;padding:26px;width:100%;max-width:420px;box-shadow:0 18px 50px #0006}
.login-logo{width:52px;height:52px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:26px;margin-bottom:10px}
.login-card h2{font-size:17px;margin:0 0 4px}
.login-card input{margin:2px 0 10px}
.login-card .btn{width:100%;padding:10px}
.login-card .mut{margin:8px 0 0;line-height:1.5}

/* ---------------- always-visible footer ---------------- */
.app-footer{position:fixed;left:0;right:0;bottom:0;z-index:101;
  background:linear-gradient(90deg,var(--navy),var(--navy2));color:#cfe3f5;
  font-size:12px;text-align:center;padding:7px 12px;letter-spacing:.02em;
  border-top:1px solid #0a2340;box-shadow:0 -1px 4px #0002}
.app-footer span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
@media(max-width:600px){.app-footer{font-size:10.5px;padding:6px 8px}}
/* keep the modal's action buttons clear of the bar (padding set on .sheet) */
/* print: a normal footer at the end of the document, not a fixed overlay */
@media print{.app-footer{position:static;background:none;color:#444;border:0;box-shadow:none}}

/* ---------------- topbar search + user chip ---------------- */
.searchwrap{position:relative;width:260px}
.searchwrap input{padding:6px 10px;border-radius:8px;border:1px solid #ffffff55;background:#ffffff22;color:#fff;width:100%}
.searchwrap input::placeholder{color:#cfe3f5}
.searchresults{position:absolute;right:0;top:34px;width:380px;max-height:60vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px #0003;z-index:20}
.sres{padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}
.sres:hover{background:#f1f6fb}
.stype{display:inline-block;background:#eef2f7;border-radius:10px;padding:1px 7px;font-size:11px;color:var(--navy);margin-right:6px}
.userchip{color:#fff;font-size:12.5px;background:#ffffff22;border-radius:20px;padding:5px 11px;white-space:nowrap}

/* ---------------- charts ---------------- */
.chart{width:100%;height:auto;display:block}
.bars{display:flex;flex-direction:column;gap:7px;margin:6px 0}
.brow{display:grid;grid-template-columns:150px 1fr 44px;gap:8px;align-items:center;font-size:12.5px}
.blabel{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btrack{background:#e8edf3;border-radius:6px;height:14px;overflow:hidden}
.bfill{display:block;height:100%;border-radius:6px}
.bval{text-align:right;font-weight:700}

/* ---------------- calendar ---------------- */
.calrow{display:grid;grid-template-columns:88px 74px 150px 1fr 120px;gap:8px;align-items:center;
  padding:7px 8px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}
.calrow:hover{background:#f6fafd}
.calrow.critical{background:var(--badbg)}
.calrow.warning{background:var(--warnbg)}
.caldate{font-weight:700}
.caldays{color:var(--mut)}
.calkind{font-size:11.5px;font-weight:700;color:var(--navy)}
.callabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.calrow{grid-template-columns:1fr;gap:2px}}

/* ---------------- misc ---------------- */
.rowlate td{background:#fff7f7}
.attbox{border:1px dashed var(--line);border-radius:10px;padding:8px;margin-top:4px}
.attrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:3px 0;font-size:13px}
.attrow a{color:var(--sky)}
.searchwrap+.btn{margin-left:4px}
.sideme{border-left:1px solid var(--line);padding-left:8px;margin-left:8px}
.b-admin,.b-manager,.b-critical,.b-create,.b-implemented,.b-approved{background:var(--badbg);color:var(--bad)}
.b-auditor,.b-login,.b-export,.b-proposed{background:var(--infobg);color:var(--info)}
.b-restore{background:#f3e8ff;color:#6b21a8}
.b-delete{background:#fee2e2;color:#b91c1c}
.b-update{background:var(--warnbg);color:var(--warn)}
.b-high{background:var(--badbg);color:var(--bad)}
.b-medium{background:var(--warnbg);color:var(--warn)}
.b-low,.b-closed,.b-held,.b-active,.b-implemented{background:var(--okbg);color:var(--ok)}
.b-conditional,.b-in-progress,.b-assessment,.b-draft{background:var(--warnbg);color:var(--warn)}
.b-suspended,.b-not-approved,.b-blocked,.b-rejected,.b-disabled{background:var(--badbg);color:var(--bad)}
.b-not-assessed,.b-planned,.b-logout{background:var(--infobg);color:var(--info)}