/* shell.css — v4.3 PMP Portal look: navy sidebar with collapsible groups, red rule, PMP logo.
   Two themes: "pmp" (light, default) and "dark". Components keep using the tokens from theme.css. */

[data-theme="pmp"]{
  --font-sans:'Geist',var(--cjk),system-ui,sans-serif;
  --font-num:'Geist Mono',ui-monospace,Consolas,monospace;
  --bg:#F0F2F5; --surface:#FFFFFF; --surface2:#F6F7F9; --surface3:#ECEFF3;
  --border:#E2E6EA; --border-strong:#1A3A6B;
  --text:#1A2332; --muted:#6B7A8D; --muted2:#45536A;
  --input-bg:#FFFFFF; --input-border:#CDD4DD;
  --table-head:#F6F7F9; --table-hover:#F2F5F9;
  --shadow:0 6px 24px rgba(15,35,71,.14); --overlay:rgba(10,26,56,.45);
  --accent:#1A3A6B; --accent-fg:#FFFFFF; --focus:#CC1818;
  --red:#C21B1B;    --red-bg:#FDECEC;    --red-bd:#E7A3A3;
  --orange:#B45309; --orange-bg:#FEF3E2; --orange-bd:#F2C48A;
  --green:#0E8A5F;  --green-bg:#E6F6EF;  --green-bd:#9ED9BF;
  --blue:#1E4FA3;   --blue-bg:#E9F0FB;   --blue-bd:#A9C1E8;
  --teal:#0F766E;   --teal-bg:#E1F4F2;   --teal-bd:#8DD0C9;
  --yellow:#8A6A00; --yellow-bg:#FBF4D9; --yellow-bd:#E2CD7A;
  --guard:#5B3E8C;  --guard-bg:#F2EEF8;  --guard-bd:#C5BAD2;
  --dot-ontime:#0E8A5F; --dot-out:#9AA5B4; --dot-pending:#CDD4DD;
  --r:10px; --r-sm:6px; --bw:1px; --alert-bw:2px;
  --header-rule:1px solid var(--border);
  --icon-sw:1.7; --stat-fs:30px; --stat-fw:600;
  --label-tt:none; --label-ls:0; --label-fw:500; --h-fw:600;
}
:root{--navy:#1A3A6B;--navy-dark:#0F2347;--navy-deeper:#0A1A38;--navy-light:#1E4480;--pmp-red:#CC1818;--side-w:248px;--top-h:56px}
[data-theme="dark"]{--navy:#141C2B;--navy-dark:#0E1420;--navy-deeper:#0A0F18;--navy-light:#1A2436}

/* ── layout ── */
#app{flex-direction:row!important}
#sidebar{width:var(--side-w);flex-shrink:0;display:flex;flex-direction:column;height:100dvh;color:#fff;
  background:linear-gradient(180deg,var(--navy-deeper) 0%,var(--navy) 100%);border-right:1px solid rgba(255,255,255,.06);z-index:60}
#main{flex:1;min-width:0;display:flex;flex-direction:column;height:100dvh}
.side-brand{display:flex;align-items:center;gap:10px;padding:16px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-brand img{height:34px;width:auto}
.side-brand .sb-name{font-weight:600;font-size:15px;line-height:1.1}
.side-brand .sb-sub{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.04em}
.side-nav{flex:1;overflow-y:auto;padding:6px 0 12px}
.nav-group{margin-top:4px}
.nav-glabel{display:flex;align-items:center;width:100%;gap:6px;padding:10px 18px 4px;border:0;background:none;cursor:pointer;
  font:600 10.5px/1 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.nav-glabel:hover{color:rgba(255,255,255,.7)}
.nav-glabel .chev{margin-left:auto;transition:transform .15s;width:14px;height:14px}
.nav-group.closed .nav-glabel .chev{transform:rotate(-90deg)}
.nav-group.closed .nav-items{display:none}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 18px 9px 15px;border:0;border-left:3px solid transparent;background:none;cursor:pointer;
  color:rgba(255,255,255,.66);font:400 13.5px/1.2 var(--font-sans);text-align:left}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--pmp-red);font-weight:500}
.nav-item .nb{margin-left:auto;font:600 10px/1 var(--font-num);padding:3px 6px;border-radius:999px;background:var(--pmp-red);color:#fff}
.nav-item .soon{margin-left:auto;font:500 9.5px/1 var(--font-num);padding:3px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.45)}
.nav-item.planned{color:rgba(255,255,255,.38)}
.nav-item .exp{margin-left:auto;width:14px;height:14px;transition:transform .15s;opacity:.6}
.nav-item.open .exp{transform:rotate(90deg)}
.nav-subs{display:none;padding:2px 0 4px}
.nav-item.open+.nav-subs{display:block}
.nav-sub{display:block;width:100%;padding:7px 18px 7px 45px;border:0;background:none;cursor:pointer;text-align:left;
  color:rgba(255,255,255,.5);font:400 13px/1.2 var(--font-sans);position:relative}
.nav-sub::before{content:"";position:absolute;left:26px;top:50%;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25);transform:translateY(-50%)}
.nav-sub:hover{color:#fff}
.nav-sub.active{color:#fff;font-weight:500}
.nav-sub.active::before{background:var(--pmp-red)}
.side-foot{border-top:1px solid rgba(255,255,255,.08);padding:12px 14px;display:flex;align-items:center;gap:10px}
.side-foot .side-who{flex:1;min-width:0}
.side-foot .side-who b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .side-who span{font-size:11px;color:rgba(255,255,255,.45);text-transform:capitalize}
.side-foot .avatar{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.side-ver{font:400 10px var(--font-num);color:rgba(255,255,255,.28);padding:0 18px 10px}

#topbar{height:var(--top-h);flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--surface);
  border-bottom:1px solid var(--border);box-shadow:inset 0 -2px 0 var(--pmp-red);position:relative;z-index:40}
#topbar .menu-btn{display:none;border:0;background:none;color:var(--text);padding:6px;margin-left:-6px;cursor:pointer}
#topbar .menu-btn svg{width:22px;height:22px}
.crumb{display:flex;align-items:baseline;gap:8px;min-width:0}
.crumb .c-group{font-size:12px;color:var(--muted)}
.crumb .c-title{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar .hright{margin-left:auto;display:flex;align-items:center;gap:10px}
#pages{flex:1;display:flex;flex-direction:column;min-height:0}
#scrim{display:none}

/* planned module page */
.planned-page{max-width:640px;margin:40px auto;padding:0 20px;text-align:center}
.planned-page .pp-ver{display:inline-block;font:600 12px var(--font-num);color:var(--pmp-red);border:1px solid var(--red-bd);border-radius:999px;padding:3px 10px}
.planned-page h2{margin:14px 0 8px;font-size:22px}
.planned-page ul{text-align:left;margin:16px auto;max-width:460px;line-height:1.7;color:var(--muted2)}

/* dashboard */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;border-top:3px solid var(--navy);text-align:left;cursor:pointer;color:var(--text);font:inherit}
.kpi:hover{box-shadow:var(--shadow)}
.kpi.red{border-top-color:var(--pmp-red)} .kpi.green{border-top-color:var(--green)} .kpi.orange{border-top-color:var(--orange)}
.kpi .k-lbl{font-size:12px;color:var(--muted)}
.kpi .k-val{font:600 28px/1.2 var(--font-num);margin-top:4px}
.kpi .k-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.panel h3{font-size:14px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.panel h3 .grow{flex:1}
.bar-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:4px 0}
.bar-row .bl{width:120px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .bt{flex:1;height:8px;border-radius:4px;background:var(--surface3);overflow:hidden}
.bar-row .bt i{display:block;height:100%;background:var(--navy);border-radius:4px}
.bar-row .bv{width:48px;text-align:right;font-family:var(--font-num)}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}

/* login */
#login{background:linear-gradient(160deg,var(--navy-deeper) 0%,var(--navy) 60%,var(--navy-light) 100%)!important}
#login .login-card{background:var(--surface);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);border:0}
.login-logo{display:flex;justify-content:center;margin-bottom:4px}
.login-logo img{height:64px}
.login-title{text-align:center}
#login .muted{text-align:center}
.otp-in{font:600 26px/1 var(--font-num)!important;letter-spacing:.5em;text-align:center}

/* mobile: sidebar slides in */
@media (max-width:900px){
  #sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-102%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  #app.side-open #sidebar{transform:none}
  #app.side-open #scrim{display:block;position:fixed;inset:0;background:rgba(10,26,56,.45);z-index:55}
  #topbar{padding:0 12px;background:linear-gradient(90deg,var(--navy-deeper),var(--navy));color:#fff;border-bottom:0;box-shadow:inset 0 -2px 0 var(--pmp-red)}
  #topbar .menu-btn{display:block;color:#fff}
  .crumb .c-group{display:none}
  .crumb .c-title{color:#fff;font-size:16px}
  #topbar .pill{font-size:11px}
}
/* the inside-page sub tabs stay for phones; on a wide screen the sidebar shows them */
@media (min-width:901px){ .page .htabs.side-mirrored{display:none} }
.sw-pmp span:nth-child(1){background:#F0F2F5}.sw-pmp span:nth-child(2){background:#1A3A6B}.sw-pmp span:nth-child(3){background:#CC1818}

/* breakdowns */
.card-list{display:flex;flex-direction:column;gap:8px}
.bd-card{text-align:left}
.bd-card .card-top{display:flex;align-items:center;gap:8px}
.bpill{display:inline-block;font:600 11px/1 var(--font-sans);padding:4px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.b-new{background:var(--red-bg);color:var(--red);border-color:var(--red-bd)}
.b-disp{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bd)}
.b-wait{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-bd)}
.b-cont{background:var(--teal-bg);color:var(--teal);border-color:var(--teal-bd)}
.b-done{background:var(--green-bg);color:var(--green);border-color:var(--green-bd)}
.b-phone{background:var(--guard-bg);color:var(--guard);border-color:var(--guard-bd)}
.b-off{background:var(--surface3);color:var(--muted);border-color:var(--border)}
.c-orange{color:var(--orange)} .c-blue{color:var(--blue)} .c-green{color:var(--green)}
.sr-day{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;background:var(--surface2)}
.wa-pre{white-space:pre-wrap;font:13px/1.5 var(--font-num);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin:0;user-select:text}
.chip-chk{display:inline-flex;cursor:pointer}
.chip-chk input{position:absolute;opacity:0;pointer-events:none}
.chip-chk span{padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;background:var(--surface)}
.chip-chk input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip-chk input:focus-visible+span{outline:2px solid var(--focus)}
.sr-checks{margin-top:12px;border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;background:var(--surface)}
.sr-checks summary{cursor:pointer;font-weight:500}
.ck-group{margin-top:8px}
.ck-g{font:600 11px var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 2px}
.ck-row{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid var(--border);font-size:13px}
.ck-row>span:first-child{flex:1}
.ck-btns{display:flex;gap:4px}
.ck{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:6px;padding:3px 8px;font-size:12px;cursor:pointer;min-width:36px}
.ck.on.ck-ok{background:var(--green);color:#fff;border-color:var(--green)}
.ck.on.ck-x{background:var(--red);color:#fff;border-color:var(--red)}
.ck.on.ck-na{background:var(--muted);color:#fff;border-color:var(--muted)}
.sr-part{border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;margin-top:6px}
.linkrow{width:100%;background:none;border:0;border-bottom:1px solid var(--border);text-align:left;cursor:pointer;color:var(--text);align-items:center}
.linkrow:hover{background:var(--surface2)}
.mc-picked{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.mc-picked:empty{display:none}
.chip-x{border:0;background:none;color:inherit;font-size:15px;line-height:1;padding:0 0 0 4px;cursor:pointer}
.pick-list{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);max-height:260px;overflow:auto;margin-top:4px;box-shadow:var(--shadow)}
.pick-list button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);background:none;padding:9px 12px;cursor:pointer;color:var(--text);font-size:13px}
.pick-list button:hover{background:var(--surface2)}
/* the code page opened from the sign-in email */
.code-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:linear-gradient(160deg,var(--navy-deeper) 0%,var(--navy) 60%,var(--navy-light) 100%)}
.code-card{background:#fff;color:#1a2332;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);max-width:420px;width:100%;padding:32px 28px;text-align:center}
.code-card img{height:64px}
.code-card h1{font-size:20px;margin:14px 0 4px}
.code-digits{font:700 40px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.3em;color:#0f2347;background:#f0f2f5;border:1px solid #e2e6ea;border-radius:12px;padding:18px 10px 18px 22px;margin:20px 0 10px;user-select:all}
.code-card .muted{color:#6b7a8d;font-size:13px;line-height:1.6}
.pick-list[hidden]{display:none}
.mbody .fld input[type=checkbox],.mbody .fld input[type=radio]{width:16px}