/* CHAI Campaign Manager (CCM) — web UI.
 * CHAI brand palette (chai-brand-theme.css): the --chai-* variables are the source of truth; the short tokens below
 * (--brand, --turq, --gold, --ok, --bad, --info …) map onto them and are what the components use. */
:root{
  --chai-dark-blue:#003E78;  /* Primary: headers, primary buttons, active tabs & sidebar links */
  --chai-turquoise:#117996;  /* Secondary: sub-headers, outline-button hover, input focus */
  --chai-light-blue:#D5E7EF; /* Accent BG: info boxes, light badges, optional tags */
  --chai-gold:#F4B71B;       /* Warning: warning buttons, alert borders, notice accents */
  --chai-light-gold:#FDF1D1; /* Notice BG: warning alerts, notice cards, light warning badges */
  --chai-dark-red:#7C1220;   /* Danger: delete/cancel, critical alerts, missing-status badges */
  --chai-green:#1ED47F;      /* Success: success buttons, verified badges, confirmations */
  --chai-teal:#6EDBCD;       /* Info / status: info buttons, category metadata, helper accents */
  --chai-light-grey:#F2F2F2; /* Neutral base: table and card borders, inactive tabs */
  /* supporting shades */
  --chai-dark-blue-hover:#002D59;--chai-dark-blue-border:#002850;
  --chai-gold-hover:#D99F0F;--chai-gold-text:#4D3B00;--chai-gold-text-2:#6B4E00;
  --chai-red-hover:#5E0E18;--chai-red-light:#F6D9DC;
  --chai-green-hover:#17B869;--chai-green-text:#0F9A5C;--chai-green-light:#D7F9E9;
  --chai-teal-hover:#57C9BA;--chai-teal-text:#063B35;--chai-teal-light:#E4F9F6;

  --canvas:#F7F8FA;--surface:#FFFFFF;--soft:var(--chai-light-grey);--field:#FFFFFF;--text:#1F2A35;--muted:#56616C;--faint:#7A8792;
  --line:#E4E7EA;--line-soft:var(--chai-light-grey);--edge:#9AA5AF;
  --brand:var(--chai-dark-blue);--brand-press:var(--chai-dark-blue-hover);--brand-soft:var(--chai-light-blue);--on-brand:#FFFFFF;
  --turq:var(--chai-turquoise);--turq-soft:var(--chai-light-blue);
  --gold:var(--chai-gold);--gold-press:var(--chai-gold-hover);--gold-soft:var(--chai-light-gold);--gold-text:var(--chai-gold-text-2);
  --ok:var(--chai-green);--ok-press:var(--chai-green-hover);--ok-soft:var(--chai-green-light);--ok-text:var(--chai-green-text);
  --bad:var(--chai-dark-red);--bad-press:var(--chai-red-hover);--bad-soft:var(--chai-red-light);
  --info:var(--chai-teal);--info-press:var(--chai-teal-hover);--info-soft:var(--chai-teal-light);--info-text:var(--chai-teal-text);
  --focus:var(--chai-turquoise);--side:var(--chai-dark-blue);--side-text:#D5E7EF;--side-on:#FFFFFF;--side-w:256px;--side-w-c:72px;
  --shadow:0 1px 2px rgba(0,30,60,.06),0 1px 1px rgba(0,30,60,.04);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --canvas:#0D1417;--surface:#162024;--soft:#1D292E;--field:#192428;--text:#E7EDEF;--muted:#A6B5BA;--faint:#76868C;--line:#2A3A3F;--line-soft:#22313A;--edge:#748A91;
  --brand:#6AA6DD;--brand-press:#8DBCE6;--brand-soft:#15303D;--on-brand:#0D1417;--turq:#5FC6D4;--turq-soft:#13343A;
  --gold:#F4B71B;--gold-press:#D99F0F;--gold-soft:#33270F;--gold-text:#F4D27A;--ok:#1ED47F;--ok-press:#17B869;--ok-soft:#10301F;--ok-text:#6FE5AA;
  --bad:#F08A96;--bad-press:#E46B7A;--bad-soft:#3A1E22;--info:#6EDBCD;--info-press:#57C9BA;--info-soft:#123532;--info-text:#9DEBDF;--focus:#6EDBCD;
  --side:#021C36;--side-text:#C7D6E4;--side-on:#FFFFFF;color-scheme:dark;
}
:root[data-theme="light"]{
  --canvas:#F7F8FA;--surface:#FFFFFF;--soft:var(--chai-light-grey);--field:#FFFFFF;--text:#1F2A35;--muted:#56616C;--faint:#7A8792;
  --line:#E4E7EA;--line-soft:var(--chai-light-grey);--edge:#9AA5AF;
  --brand:var(--chai-dark-blue);--brand-press:var(--chai-dark-blue-hover);--brand-soft:var(--chai-light-blue);--on-brand:#FFFFFF;
  --turq:var(--chai-turquoise);--turq-soft:var(--chai-light-blue);
  --gold:var(--chai-gold);--gold-press:var(--chai-gold-hover);--gold-soft:var(--chai-light-gold);--gold-text:var(--chai-gold-text-2);
  --ok:var(--chai-green);--ok-press:var(--chai-green-hover);--ok-soft:var(--chai-green-light);--ok-text:var(--chai-green-text);
  --bad:var(--chai-dark-red);--bad-press:var(--chai-red-hover);--bad-soft:var(--chai-red-light);
  --info:var(--chai-teal);--info-press:var(--chai-teal-hover);--info-soft:var(--chai-teal-light);--info-text:var(--chai-teal-text);
  --focus:var(--chai-turquoise);--side:var(--chai-dark-blue);--side-text:#D5E7EF;--side-on:#FFFFFF;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#0D1417;--surface:#162024;--soft:#1D292E;--field:#192428;--text:#E7EDEF;--muted:#A6B5BA;--faint:#76868C;--line:#2A3A3F;--line-soft:#22313A;--edge:#748A91;
  --brand:#6AA6DD;--brand-press:#8DBCE6;--brand-soft:#15303D;--on-brand:#0D1417;--turq:#5FC6D4;--turq-soft:#13343A;
  --gold:#F4B71B;--gold-press:#D99F0F;--gold-soft:#33270F;--gold-text:#F4D27A;--ok:#1ED47F;--ok-press:#17B869;--ok-soft:#10301F;--ok-text:#6FE5AA;
  --bad:#F08A96;--bad-press:#E46B7A;--bad-soft:#3A1E22;--info:#6EDBCD;--info-press:#57C9BA;--info-soft:#123532;--info-text:#9DEBDF;--focus:#6EDBCD;
  --side:#021C36;--side-text:#C7D6E4;--side-on:#FFFFFF;color-scheme:dark}}
.theme-toggle{color:var(--text);border-radius:50%;width:34px;height:34px;display:inline-grid;place-items:center;background:var(--soft);border:1px solid var(--line);cursor:pointer;transition:all .15s}
.theme-toggle:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
body.role-recorder .top .theme-toggle{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#fff}
body.role-recorder .top .theme-toggle:hover{background:rgba(255,255,255,.25)}
.pin-toggle-btn{color:var(--muted);transition:color .15s ease;}
.pin-toggle-btn:hover{color:var(--text);}
.pin-toggle-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--text);font-family:"Fira Sans","Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--turq)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h2{font-size:1.45rem}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic.s{width:14px;height:14px;vertical-align:-2px}.ic.l{width:22px;height:22px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--surface);padding:8px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;transition:grid-template-columns .18s}
.side{background:var(--side);color:var(--side-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:10px;align-items:center;padding:14px 14px 10px}
.brand-logo{display:block;width:88px;height:auto;flex:none}
.brand-text{min-width:0}
.brand b{display:block;color:var(--side-on);font-size:.95rem}.brand small{display:block;opacity:.8}
.logo-img{display:block;height:auto}
.side nav{flex:1;padding:4px 8px}
.navg{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin:14px 10px 4px}
.side nav a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--side-text);text-decoration:none}
.side nav a:hover{background:rgba(255,255,255,.08)}
.side nav a.on{background:rgba(255,255,255,.16);color:var(--side-on);font-weight:600}
.side nav a span:first-of-type{flex:1}
.badge{background:var(--gold);color:#1F2A35;border-radius:10px;padding:0 7px;font-size:.75rem;font-weight:700}
.me{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid rgba(255,255,255,.12)}
.me b{display:block;color:var(--side-on);font-size:.9rem}.me small{opacity:.8}.me>span:nth-child(2){flex:1;min-width:0}
.ava{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:.8rem;flex:none}
.iconbtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;border:0;background:transparent;color:inherit;cursor:pointer}
.iconbtn:hover{background:rgba(127,127,127,.15)}
.main{min-width:0}
.top{display:flex;gap:12px;align-items:center;padding:10px 24px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .menu{display:none}
.desk-only{display:inline-grid}
@media (max-width:900px){.desk-only{display:none}}
.camp-pick select{border:1px solid var(--line);background:var(--field);border-radius:8px;padding:7px 10px;max-width:420px}
.today{margin-left:auto;color:var(--muted);font-size:.9rem;white-space:nowrap}
.page{padding:22px 24px 60px;max-width:1280px}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:20;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .top{padding:8px 16px}.top .menu{display:inline-grid}
  .page{padding:16px}
  .camp-pick select{max-width:56vw}
}

/* ---------- building blocks ---------- */
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.card.narrow{max-width:520px}
.card>h3:first-child,.card>h2:first-child{margin-top:0}
.lead{color:var(--muted);margin:-4px 0 16px;max-width:75ch}
.sub{color:var(--muted);font-size:.88rem;margin:4px 0}
.center{text-align:center}
.crumb{color:var(--muted);font-size:.88rem;margin:0 0 6px}.crumb a{color:var(--muted)}
.h3{font-weight:600;font-size:1.08rem;margin:20px 0 8px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}.row.between{justify-content:space-between}
.grow{flex:1}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}}
.pagehead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px}

.btn{display:inline-flex;gap:6px;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:8px 14px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--edge)}
.btn.p{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.btn.p:hover{background:var(--brand-press)}
.btn.bad{color:var(--bad);border-color:var(--bad)}.btn.bad.p{background:var(--bad);color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:5px 10px;font-size:.88rem}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn{border:0;background:none;color:var(--turq);padding:0;cursor:pointer;text-decoration:underline}

.field{margin-bottom:12px}
.lbl{display:block;font-weight:500;font-size:.9rem;margin-bottom:4px}
.fld{width:100%;border:1px solid var(--line);background:var(--field);border-radius:8px;padding:8px 10px}
.fld:focus{border-color:var(--focus);outline:none;box-shadow:0 0 0 3px var(--turq-soft)}
textarea.fld{min-height:110px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
.fld.pin{letter-spacing:.4em;font-size:1.2rem;max-width:12rem}
.fe{color:var(--bad);font-size:.85rem;margin:4px 0 0}
.check{display:flex;gap:8px;align-items:flex-start}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--field);border-radius:8px;padding:0 10px}
.search input{border:0;background:transparent;padding:8px 0;flex:1;outline:none;min-width:0}

.tag{display:inline-flex;gap:4px;align-items:center;border-radius:999px;padding:1px 9px;font-size:.8rem;font-weight:500;background:var(--soft);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.tag.ok{background:var(--ok-soft);color:var(--ok-text);border-color:transparent}
.tag.warn{background:var(--gold-soft);color:var(--gold-text);border-color:transparent}
.tag.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.tag.info{background:var(--turq-soft);color:var(--turq);border-color:transparent}

.note{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:10px 12px;margin:0 0 14px;background:var(--turq-soft)}
.note.ok{background:var(--ok-soft);color:var(--ok-text)}
.note.warn{background:var(--gold-soft);color:var(--gold-text)}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.note .ic{margin-top:2px}

.tw{overflow-x:auto;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.tb{width:100%;border-collapse:collapse;font-size:.92rem}
.tb th{text-align:left;font-weight:600;color:var(--brand);font-size:.82rem;background:var(--soft);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tb td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tb tr:last-child td{border-bottom:0}
.tb .n{text-align:right;font-variant-numeric:tabular-nums}
.tb tr.click{cursor:pointer}.tb tr.click:hover td{background:var(--soft)}
.tb.nw td{white-space:nowrap}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.kpi .k{margin:0;color:var(--muted);font-size:.85rem}.kpi .v{margin:2px 0 0;font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums}.kpi .d{margin:0;color:var(--muted);font-size:.82rem}
.kpi.warn{border-color:var(--gold)}.kpi.bad{border-color:var(--bad)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto}
.tabs a,.tabs button{border:0;background:none;padding:9px 12px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;font-weight:500;white-space:nowrap;cursor:pointer}
.tabs .on{color:var(--brand);border-bottom-color:var(--brand)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chips a,.chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:.88rem;text-decoration:none;color:var(--text);cursor:pointer}
.chips .on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

.empty{padding:28px;text-align:center;color:var(--muted)}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px;color:var(--muted)}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0}
.steps{list-style:none;margin:0;padding:0}
.steps>li{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:10px}
.steps .sh{display:flex;gap:12px;align-items:center;padding:12px 14px}
.steps .num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:600;flex:none}
.steps .done .num{background:var(--ok);color:#fff}
.steps .sb{padding:0 14px 14px 54px}
.meter{height:8px;border-radius:5px;background:var(--soft);overflow:hidden}.meter i{display:block;height:100%;background:var(--ok)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cmp .side-b{border:1px solid var(--line);border-radius:10px;padding:10px}
.toks{display:flex;gap:6px;flex-wrap:wrap}.tok{border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-family:ui-monospace,Menlo,monospace}
mark{background:var(--gold-soft);color:var(--gold-text)}
.drop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px dashed var(--edge);border-radius:10px;padding:14px;background:var(--soft)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--soft);padding:1px 5px;border-radius:4px}

/* dialogs: <dialog class="sheet" id="x">…</dialog>, open with data-open="x" */
dialog.sheet{border:0;border-radius:14px;padding:0;max-width:640px;width:calc(100% - 32px);background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.sheet::backdrop{background:rgba(10,20,30,.45)}
dialog.sheet .sh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
dialog.sheet .sh h3{margin:0;flex:1;font-size:1.1rem}
dialog.sheet .sb{padding:16px 18px;max-height:70vh;overflow:auto}
dialog.sheet .sf{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
dialog.sheet.wide{max-width:980px}

/* sign in */
body.bare{background:var(--surface)}
.signin{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.signin-hero{background:var(--brand);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.signin-hero h1{font-size:2rem}.signin-hero p{max-width:42ch;opacity:.9}
.route{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0;margin:8px 0 0}
.route li{background:rgba(255,255,255,.14);border-radius:999px;padding:4px 12px;font-size:.9rem}
.signin-form{display:grid;place-items:center;padding:24px}
.signin-form .card{width:100%;max-width:400px;border:0}
.signin-mobile-brand{display:none}
@media (max-width:800px){
  .signin{display:flex!important;justify-content:center!important;align-items:center!important;min-height:100vh!important;padding:16px!important;background:var(--canvas)!important}
  .signin-hero{display:none!important}
  .signin-form{width:100%!important;max-width:390px!important;margin:0 auto!important;padding:0!important;display:block!important}
  .signin-form .card{border:1px solid var(--line)!important;box-shadow:0 6px 24px rgba(0,30,60,.1)!important;border-radius:14px!important;padding:24px 20px!important;background:var(--surface)!important;margin:0!important}
  .signin-form h2{font-size:1.25rem!important;margin-bottom:14px!important;text-align:center!important}
  .signin-mobile-brand{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;margin-bottom:14px!important}
  .signin-mobile-brand .logo-img-mobile{height:40px!important;width:auto!important;margin-bottom:6px!important}
  .signin-mobile-brand h3{font-size:1.1rem!important;color:var(--brand)!important;margin:0!important;font-weight:700!important}
  .signin-mobile-brand .signin-mobile-sub{font-size:.8rem!important;color:var(--muted)!important;margin:2px 0 0!important}
}
@media print{.side,.top{display:none}.shell{display:block}}

/* ---------- CHAI button and badge variants ---------- */
.btn:hover{border-color:var(--turq);color:var(--turq)}
.btn.p:hover{color:var(--on-brand);border-color:var(--chai-dark-blue-border)}
.btn.warn{background:var(--gold);border-color:var(--gold);color:var(--chai-gold-text)}.btn.warn:hover{background:var(--gold-press);color:var(--chai-gold-text)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#06331F}.btn.ok:hover{background:var(--ok-press);color:#06331F}
.btn.info{background:var(--info);border-color:var(--info);color:var(--info-text)}.btn.info:hover{background:var(--info-press);color:var(--info-text)}
.btn.bad{color:var(--bad);border-color:var(--bad)}.btn.bad:hover{color:var(--bad-press);border-color:var(--bad-press)}
.btn.bad.p{background:var(--bad);color:#fff}.btn.bad.p:hover{background:var(--bad-press);color:#fff}
.tag.p{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.tag.teal{background:var(--info-soft);color:var(--info-text);border-color:transparent}
.tag.info{background:var(--brand-soft);color:var(--turq)}
.note.warn{border-left:4px solid var(--gold)}.note.bad{border-left:4px solid var(--bad)}.note.ok{border-left:4px solid var(--ok)}
.note{background:var(--brand-soft);color:var(--brand)}
.tabs{border-bottom-color:var(--line-soft)}.tabs a,.tabs button{color:var(--faint)}
h2,.h3{color:var(--brand)}
.sub-h{color:var(--turq);font-weight:600}

/* ---------- collapsible sidebar (desktop) + hamburger (phone) ---------- */
.side-toggle{display:inline-grid}
.side .brand .collapse-btn{margin-left:auto;color:var(--side-text)}
body.side-collapsed .shell{grid-template-columns:var(--side-w-c) 1fr}
body.side-collapsed .side .brand-text,body.side-collapsed .side nav a span,body.side-collapsed .side .navg,body.side-collapsed .me>span:nth-child(2),
body.side-collapsed .side .badge{display:none}
body.side-collapsed .side .brand{flex-direction:column;padding:12px 8px}
body.side-collapsed .side .brand-logo{width:48px}
body.side-collapsed .side .brand .collapse-btn{margin:0}
body.side-collapsed .side nav a{justify-content:center;padding:10px 0;position:relative}
body.side-collapsed .side nav a .dot{display:block}
body.side-collapsed .me{flex-direction:column;padding:10px 6px}
.side nav a .dot{display:none;position:absolute;top:6px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.collapse-btn .ic{transition:transform .18s}
body.side-collapsed .collapse-btn .ic{transform:rotate(180deg)}
.top .menu{display:none}
@media (max-width:900px){
  body.side-collapsed .shell{grid-template-columns:1fr}
  .side .collapse-btn{display:none}
  .top .menu{display:inline-grid}
  .side{width:min(84vw,300px)}
  body.side-collapsed .side .brand-text,body.side-collapsed .side nav a span,body.side-collapsed .side .navg,body.side-collapsed .me>span:nth-child(2){display:revert}
}
.signin-hero .logo-img{width:220px;background:#fff;border-radius:12px;padding:10px 14px}
.signin-form .logo-img{width:150px;margin:0 auto 6px}
.app-name{font-weight:700;letter-spacing:.02em}
@media (max-width:900px){.top .desk-only{display:none!important}}
@media (max-width:480px){.top .today{display:none}}

/* v22 overflow menu */
.ovf{position:relative;display:inline-block}.ovf-b{min-width:40px;font-size:1.1rem;line-height:1}
.ovf-m{position:absolute;right:0;top:calc(100% + 4px);z-index:45;min-width:12rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px -16px rgba(0,30,60,.4);padding:4px;display:flex;flex-direction:column;gap:2px}
.ovf-m[hidden]{display:none}.ovf-m .btn{width:100%;justify-content:flex-start;border:0;background:none;text-align:left;color:var(--text)}.ovf-m .btn:hover{background:var(--soft)}
.ovf-m form{margin:0}.ovf-m form .btn{width:100%}

/* User Profile Menu in Topbar */
.user-menu{position:relative;margin-left:auto}
.user-menu > summary{list-style:none;cursor:pointer}
.user-menu > summary::-webkit-details-marker{display:none}
.user-menu-btn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 5px;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--text);cursor:pointer;transition:all .15s}
.user-menu-btn:hover{background:var(--brand-soft);border-color:var(--brand)}
.user-ava{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.84rem;flex:none}
.user-name-role{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.user-name-role b{font-size:.88rem;color:var(--text)}
.user-name-role small{font-size:.76rem;color:var(--muted)}
.user-menu-pop{position:absolute;right:0;top:calc(100% + 8px);width:280px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,30,60,.22);z-index:200;padding:12px;display:flex;flex-direction:column;gap:10px}
.user-menu-hdr{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.user-ava-lg{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:1.1rem;font-weight:700;flex:none}
.user-menu-title{font-weight:700;font-size:.95rem;color:var(--text)}
.user-menu-sub{font-size:.8rem;color:var(--muted)}
.user-menu-badge{display:inline-block;margin-top:3px;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.user-menu-details{display:flex;flex-direction:column;gap:4px;font-size:.82rem;padding:6px 0;border-bottom:1px solid var(--line)}
.user-menu-row{display:flex;justify-content:space-between;color:var(--muted)}
.user-menu-row .v{font-weight:500;color:var(--text);text-align:right}
.user-menu-actions{display:flex;flex-direction:column;gap:4px}
.user-menu-link{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;text-decoration:none;font-size:.88rem;color:var(--text);font-weight:500;transition:background .15s}
.user-menu-link:hover{background:var(--soft)}
.user-menu-logout{color:var(--bad)}
.user-menu-logout:hover{background:var(--bad-soft);color:var(--bad)}

/* Mobile PWA Recorder Layout & Top/Bottom Shell */
body.role-recorder .shell{display:block;min-height:100vh;background:var(--canvas)}
body.role-recorder .side{display:none}
body.role-recorder .main{margin-left:0;width:100%}
body.role-recorder .page{padding-bottom:86px;max-width:540px;margin:0 auto}

/* Global Centered Modal Dialogs (Mobile PWA & Desktop) */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.modal-card {
  background: var(--surface, #162024);
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  padding: 22px;
  box-sizing: border-box;
  border: 1px solid var(--line, #2A3A40);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  max-height: 90vh;
  overflow-y: auto;
  margin: auto;
}
.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text, #E7EDEF);
  margin: 0;
}
.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--muted, #7A8792);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.modal-close-btn:hover {
  color: var(--text, #E7EDEF);
}
.modal-subtitle {
  font-size: 0.85rem;
  color: var(--muted, #94A3B8);
  line-height: 1.45;
  margin: 8px 0 16px;
}
.form-field-group {
  margin-bottom: 14px;
}
.form-field-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text, #E7EDEF);
  margin-bottom: 6px;
}
.form-field-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line, #2A3A40);
  background: var(--bg, #0E171B);
  color: var(--text, #ffffff);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field-input:focus {
  outline: none;
  border-color: #38BDF8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}
.modal-action-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: #5B9BD5;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  transition: opacity 0.15s;
}
.modal-action-btn:hover {
  opacity: 0.95;
}
.modal-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Ensure SweetAlert2 alerts render in front of any modal overlay */
.swal2-container {
  z-index: 9999999 !important;
}