:root{
  /* PTH Brand — Dark Mode (matches pickthehit.com.au 2026) */
  --bg:#0A0C14;--surface:#111422;--surface2:#181C2E;--surface3:#1e2440;
  /* Borders */
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.16);
  /* Text */
  --text:#FFFFFF;--text2:#F0F2F8;--text3:#8A93B2;
  /* Brand — PTH Red */
  --brand:#E8192C;--brand-dim:rgba(232,25,44,0.12);
  --brand-glow:rgba(232,25,44,0.4);
  /* Visual consistency pass (Step 1/2, Nov 2026): primary-button gradient and
     red/purple accents now match pickthehit.com.au's own brand hex exactly —
     see the Red Rule block further down for which contexts each is allowed
     in (--grad-brand is reserved for the primary button, --red for real
     problems, --purple for non-problem highlights/selection states). */
  --grad-brand:linear-gradient(135deg,#D4162A,#E85A28);
  /* Gold accent */
  --gold:#FFAB00;
  /* Neon accent */
  --neon:#00E5FF;
  /* Status colours */
  --blue:#5b9bff;--blue-dim:rgba(91,155,255,0.15);
  --green:#3ddf80;--green-dim:rgba(61,223,128,0.14);
  --red:#FF5252;--red-dim:rgba(255,82,82,0.14);
  --orange:#ffA040;--orange-dim:rgba(255,160,64,0.14);
  --purple:#9B72FF;--purple-dim:rgba(155,114,255,0.14);--r:10px;--rsm:6px;
  /* Aliases carried over from the original mockup — var(--text1), var(--text4)
     and var(--surface1) are used throughout shell.css/shell.js/calendar.php but
     were never actually defined, so they silently fell back to the browser
     default (invisible on backgrounds like the Calendar search dropdown). */
  --text1:var(--text);--text4:var(--text3);--surface1:var(--surface);
  /* ── Visual consistency pass — Step 1 design system ───────────────────
     Shared type scale (base 14px, nothing below 12px) and spacing scale,
     used by the page template, buttons, inputs, tables, badges, empty/
     loading states and modals below. Font roles: Bebas Neue for page/modal
     titles, Outfit for body text and buttons, Righteous reserved for big
     stat numbers only (dashboard KPI tiles etc — not used on every page). */
  --font-title:'Bebas Neue',sans-serif;--font-body:'Outfit',sans-serif;--font-stat:'Righteous',sans-serif;
  --fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px
}
body.light{
  /* PTH Brand — Light Mode (matches pickthehit.com.au 2026) */
  --bg:#F4F5F9;--surface:#FFFFFF;--surface2:#ECEEF7;--surface3:#DDE0F0;
  --border:#E3E6EE;--border2:#C9CEDE;
  --text:#0A0C14;--text2:#252840;--text3:#5B6277;
  --brand:#E8192C;--brand-dim:rgba(232,25,44,0.10);
  --brand-glow:rgba(232,25,44,0.25);
  --grad-brand:linear-gradient(135deg,#D4162A,#E85A28);
  --gold:#C98B00;
  --neon:#0096B3;
  --blue:#3b7dd6;--blue-dim:rgba(59,125,214,0.15);
  --green:#2ba85f;--green-dim:rgba(43,168,95,0.15);
  --red:#e63946;--red-dim:rgba(230,57,70,0.15);
  --orange:#f77f00;--orange-dim:rgba(247,127,0,0.15);
  --purple:#7C4DFF;--purple-dim:rgba(124,77,255,0.12);
  --text1:var(--text);--text4:var(--text3);--surface1:var(--surface)
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column}

/* LOGIN */
#loginScreen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:28px;
  background-image:radial-gradient(ellipse at 30% 60%,rgba(232,25,44,0.08) 0%,transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(0,229,255,0.05) 0%,transparent 60%)}
.l-logo{display:flex;flex-direction:column;align-items:center;gap:12px}
.l-mark{width:72px;height:72px;background:var(--grad-brand);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#fff;letter-spacing:-1px;box-shadow:0 4px 24px var(--brand-glow)}
.l-mark-text{font-size:22px;font-weight:900;color:#fff;letter-spacing:-1px}
.l-title{font-family:'Bebas Neue',sans-serif;font-size:32px;font-weight:400;letter-spacing:.08em}.l-title span{color:var(--brand)}
.l-box{background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:28px;width:340px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.l-err{color:var(--red);font-size:12px;display:none;padding:8px 10px;background:var(--red-dim);border-radius:var(--rsm)}
.l-2fa{display:none;flex-direction:column;gap:10px}
.l-2fa-hint{font-size:12px;color:var(--text2);text-align:center}

/* APP SHELL */
#app{display:none;flex-direction:column;height:100%}
.topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0}
.tb-brand{display:flex;align-items:center;gap:8px;margin-right:4px}
.tb-mark{width:30px;height:30px;background:var(--brand);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0;letter-spacing:-0.5px}
.tb-mark-text{font-size:11px;font-weight:900;color:#fff;letter-spacing:-0.5px}
.tb-name{font-size:14px;font-weight:800;white-space:nowrap;letter-spacing:-0.3px}.tb-name span{color:var(--text3);font-weight:500}
.nav-tabs{display:flex;gap:2px}
.ntab{padding:5px 12px;border-radius:var(--rsm);font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);border:none;background:transparent;font-family:'Outfit',sans-serif;transition:color .15s,background .15s;white-space:nowrap;position:relative;text-decoration:none}
.ntab:hover{color:var(--text);background:var(--surface2)}
.ntab.on{color:var(--text)}
.ntab.on::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--grad-brand);border-radius:2px 2px 0 0}
.tb-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.tb-user{font-size:12px;color:var(--text2);font-weight:600}
.bell{cursor:pointer;font-size:17px;color:var(--text2);padding:4px;position:relative;transition:color .15s}.bell:hover{color:var(--brand)}
.bell-n{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;font-size:9px;font-weight:700;width:15px;height:15px;border-radius:50%;display:none;align-items:center;justify-content:center}

/* ── Neumorphic theme toggle ── */
.theme-toggle{position:relative;display:flex;align-items:center;width:90px;height:36px;border-radius:18px;cursor:pointer;flex-shrink:0;border:none;padding:0;background:#0d0f1c;box-shadow:inset 3px 3px 8px rgba(0,0,0,.7),inset -2px -2px 6px rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.5);transition:background .35s,box-shadow .35s;overflow:hidden}
.theme-toggle::before{content:'';position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a2d42,#13162a);box-shadow:3px 3px 8px rgba(0,0,0,.6),-1px -1px 4px rgba(255,255,255,.06),inset 1px 1px 3px rgba(255,255,255,.08);transition:transform .35s cubic-bezier(.4,0,.2,1),background .35s,box-shadow .35s;z-index:2}
.theme-toggle .tog-icon{position:absolute;left:3px;top:3px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#7b82aa;transition:transform .35s cubic-bezier(.4,0,.2,1),color .35s;z-index:3;pointer-events:none}
.theme-toggle .tog-label{position:absolute;right:8px;font-size:.46rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4a5080;line-height:1;text-align:center;width:38px;transition:opacity .35s,color .35s;pointer-events:none;z-index:1;user-select:none}
.theme-toggle:hover::before{filter:brightness(1.1)}
body.light .theme-toggle{background:#dde1f0;box-shadow:inset 3px 3px 8px rgba(180,185,210,.6),inset -2px -2px 6px rgba(255,255,255,.9),0 2px 8px rgba(180,185,210,.4)}
body.light .theme-toggle::before{transform:translateX(54px);background:radial-gradient(circle at 35% 35%,#f5f6fb,#dde1f0);box-shadow:3px 3px 8px rgba(160,165,190,.5),-1px -1px 4px rgba(255,255,255,.9),inset 1px 1px 3px rgba(255,255,255,.8)}
body.light .theme-toggle .tog-icon{transform:translateX(54px);color:#5a6080}
body.light .theme-toggle .tog-label{right:auto;left:8px;width:38px;color:#6a7090}
/* Light mode — make calendar grid lines visible against white bg */
body.light .ccell{border-color:rgba(0,0,0,0.13)}
body.light .vlbl{border-color:rgba(0,0,0,0.13);background:#e8eaf5}
body.light .wdh{border-color:rgba(0,0,0,0.13);background:#f4f5fa}
body.light .wgrid{background:#dde0ef}
body.light .ccell:not(.dk):hover{background:rgba(0,0,0,0.03)}

/* APP BODY */
.app-body{display:flex;flex:1;overflow:hidden}
/* Quick Links flyout (replaces the old sidebar's Quick Links section --
   fixed so it floats over every page, not just calendar.php). Click the
   trigger to toggle .open (toggleQuickLinks() in shell.js); click outside,
   pick an item, or press Escape to close -- hover alone used to open it
   but the gap between button and panel let the cursor leave the hover box
   mid-move, closing the menu before you could reach an item. Fades to low
   opacity when idle, full opacity on hover/open so it stays out of the
   way until needed. */
.qlinks-fab{position:fixed;right:16px;bottom:16px;z-index:400;opacity:.3;transition:opacity .25s}
.qlinks-fab:hover,.qlinks-fab.open{opacity:1}
.qlinks-trigger{width:46px;height:46px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:17px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.qlinks-trigger:hover{transform:scale(1.06)}
.qlinks-panel{display:none;position:absolute;right:0;bottom:56px;min-width:210px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.28);padding:6px;flex-direction:column;gap:1px}
.qlinks-fab.open .qlinks-panel{display:flex}

/* Calendar toolbar Filters dropdown (replaces the old sidebar's Hosts/Show
   Types/Venues filter lists -- calendar-only now, see header.php's comment
   on why). Reuses the sidebar's existing .sbl/.sbi/.sb-add styling as-is. */
.rg-filters-panel{display:none;position:absolute;top:calc(100% + 5px);left:0;width:230px;max-height:420px;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.22);z-index:300;padding:10px;flex-direction:column;gap:18px}
.rg-filters-panel.open{display:flex}

.sbl{font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);padding:0 8px;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between;font-family:'Outfit',sans-serif}
.sbl.sb-collapsible{cursor:pointer;user-select:none;border-radius:var(--rsm);padding:3px 8px;transition:background .12s}
.sbl.sb-collapsible:hover{background:var(--surface2)}
.sb-chev{font-size:10px;opacity:.6;transition:transform .2s;display:inline-block}
.sb-chev.collapsed{transform:rotate(-90deg)}
.sbi{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:var(--rsm);cursor:pointer;font-size:13px;font-weight:500;color:var(--text2);transition:color .15s,background .15s}
.sbi:hover{background:var(--surface2);color:var(--text)}.sbi.on{background:var(--surface3);color:var(--text)}
.sbi-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sbi-ct{margin-left:auto;font-size:10px;font-weight:600;padding:2px 5px;border-radius:8px;background:var(--surface3);color:var(--text3)}
.sb-add{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:var(--rsm);font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;border:1px dashed var(--border2);background:transparent;font-family:'Outfit',sans-serif;width:100%;transition:border-color .15s,color .15s;margin-top:4px}
.sb-add:hover{border-color:var(--brand);color:var(--brand)}
main{flex:1;overflow:auto;display:flex;flex-direction:column}

/* BUTTONS */
.btn{padding:7px 16px;border-radius:50px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:'Outfit',sans-serif;transition:background .2s,border-color .2s,color .2s;letter-spacing:.05em;text-transform:uppercase;position:relative;overflow:hidden}
.btn-brand{background:var(--grad-brand);color:#fff;box-shadow:0 0 16px var(--brand-glow)}
.btn-brand::before{content:'';position:absolute;inset:0;background:transparent;transition:background .15s;pointer-events:none}
.btn-brand:hover::before{background:rgba(0,0,0,.10)}
.btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--border2)}.btn-ghost:hover{background:var(--surface2);color:var(--text);border-color:var(--brand)}
.btn-danger{background:var(--red-dim);color:var(--red);border:1.5px solid rgba(255,92,92,.25)}.btn-danger:hover{background:rgba(255,92,92,.22)}
/* Type scale: nothing below 12px (Step 1) — both button sizes bumped up
   from their original 11px/10px. */
.btn-sm{padding:5px 13px;font-size:12px}
.btn-xs{padding:4px 10px;font-size:12px}

/* ALERTS BAR */
.alerts-bar{padding:7px 20px;min-height:35px;display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0;align-items:center;box-sizing:border-box}
.al{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;cursor:pointer}
.al.red{color:var(--red)}.al.orange{color:var(--orange)}.al.blue{color:var(--blue)}.al.yellow{color:var(--gold)}

/* FOCUS — one rule, app-wide: buttons, nav tabs, menu items and the
   sidebar/dropdown entries (.sbi) had no visible keyboard-focus state at
   all before this, so tabbing through the page showed no indication of
   where you were. The form fields below already had their own :focus
   rule (border colour change) and keep it. */
.btn:focus-visible,.ntab:focus-visible,.snav-btn:focus-visible,.sbi:focus-visible,.mcls:focus-visible,.rtab:focus-visible,.daychk:focus-within,a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* INPUTS */
.inp{width:100%;padding:9px 12px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rsm);color:var(--text);font-size:14px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .15s}
.inp:focus{border-color:var(--brand)}.inp::placeholder{color:var(--text3);opacity:.5;font-style:italic}
.fsel{width:100%;padding:9px 11px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rsm);color:var(--text);font-size:14px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .15s}
.fsel:focus{border-color:var(--brand)}.fsel option{background:var(--surface2)}
.fta{width:100%;padding:9px 11px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rsm);color:var(--text);font-size:13px;font-family:'Outfit',sans-serif;outline:none;resize:vertical;min-height:65px;transition:border-color .15s}
.fta:focus{border-color:var(--brand)}

/* CALENDAR */
#calView{display:flex;flex-direction:column;flex:1;min-height:0}
.cal-tb{padding:10px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;flex-wrap:wrap}
.wnav{display:flex;align-items:center;gap:7px}
.wnav button{width:27px;height:27px;border-radius:var(--rsm);border:1px solid var(--border2);background:var(--surface2);color:var(--text);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.wnav button:hover{background:var(--surface3)}
.wlbl{font-size:14px;font-weight:800;min-width:200px;text-align:center;letter-spacing:-0.3px}
.vtog{display:flex;gap:2px;background:var(--surface2);padding:3px;border-radius:var(--rsm)}
.vbtn{padding:4px 11px;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text2);border:none;background:transparent;font-family:'Outfit',sans-serif;transition:color .12s,background .12s}
.vbtn.on{background:var(--surface3);color:var(--text)}
.fpill{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.fpill.on{border-color:var(--brand);color:var(--brand);background:var(--brand-dim)}
.cal-wrap{flex:1;overflow:auto;display:flex;flex-direction:column}

/* WEEK GRID */
.wgrid{display:grid;grid-template-columns:200px repeat(7,1fr);min-width:860px}
.wdh{background:var(--surface);border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:8px 10px;text-align:center;position:sticky;top:0;z-index:5}
.wdh:not(:first-child):hover{background:var(--surface2)}
.mdate:hover{color:var(--brand)}
.wdh:first-child{text-align:left;display:flex;align-items:center;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);border-right:2px solid var(--border2)}
.wdh.today .ddate{color:var(--brand)}
.dday{font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.ddate{font-size:20px;font-weight:900;line-height:1.1}
.vlbl{background:var(--surface2);border-bottom:1px solid var(--border);border-right:2px solid var(--border2);padding:9px 11px;cursor:pointer;min-height:80px;display:flex;flex-direction:column;justify-content:center;user-select:none}
.vlbl:hover{background:var(--surface3)}.vn{font-size:12px;font-weight:700}.vs{font-size:11px;color:var(--text3);margin-top:1px}
.vtags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.vtag{font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:.3px}
.ccell{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:5px;min-height:80px;display:flex;flex-direction:column;gap:3px;cursor:pointer;user-select:none}
.ccell.dk{background:rgba(0,0,0,.25);cursor:default}.ccell:not(.dk):hover{background:rgba(255,255,255,.025)}
.asgn{border-radius:5px;padding:5px 7px;font-size:11px;font-weight:600;cursor:pointer;border-left:3px solid transparent;position:relative;user-select:none;overflow:hidden}
.asgn::before{content:'';position:absolute;inset:0;background:transparent;transition:background .12s;pointer-events:none;border-radius:inherit}
.asgn:hover::before{background:rgba(255,255,255,.18)}
.asgn.has-conflict{outline:2px solid var(--red);box-shadow:0 0 8px rgba(255,0,0,.25)}
.asgn.has-conflict::after{content:'⚠';position:absolute;top:2px;right:4px;font-size:9px;color:var(--red);font-weight:900;line-height:1}
.asgn.conflict-waived::after{content:'✓';position:absolute;top:2px;right:4px;font-size:10px;color:var(--green);font-weight:900;line-height:1}
.asgn-h{font-size:12px;font-weight:700}.asgn-t{font-size:10px;opacity:.7;margin-top:1px}
.asgn-n{font-size:10px;opacity:.65;font-style:italic;margin-top:1px}
.asgn-unc{font-size:9px;color:var(--orange);margin-top:2px;font-weight:600}
.asgn .xbtn{position:absolute;top:3px;right:3px;font-size:9px;opacity:0;color:#fff;cursor:pointer;border:none;background:rgba(0,0,0,.45);padding:2px 4px;line-height:1;border-radius:3px;pointer-events:none;font-weight:700}
.asgn:hover .xbtn{opacity:1;pointer-events:auto}
.chint{font-size:10px;text-align:center;margin:auto;pointer-events:none;padding:6px;width:100%}
.chint-type{font-size:10px;font-weight:700;margin-bottom:2px}
.chint-time{font-size:9px;color:var(--text3);margin-bottom:5px}
.chint-cta{display:inline-block;font-size:9px;font-weight:600;color:var(--text3);border:1px dashed var(--border2);border-radius:3px;padding:1px 6px}
.evcard{border-radius:5px;padding:5px 7px;font-size:11px;font-weight:600;cursor:pointer;border-left:3px solid;position:relative;user-select:none;overflow:hidden}
.evcard::before{content:'';position:absolute;inset:0;background:transparent;transition:background .12s;pointer-events:none;border-radius:inherit}
.evcard:hover::before{background:rgba(255,255,255,.15)}
.grid-sep{grid-column:1/-1;background:var(--surface2);border-bottom:1px solid var(--border);border-top:2px solid var(--border2);padding:5px 12px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text3)}

/* MONTH GRID */
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:700px}
.mdh{background:var(--surface);border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:7px 10px;font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;text-align:center;position:sticky;top:0;z-index:5}
.mcell{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:5px;min-height:150px;display:flex;flex-direction:column;gap:4px}
.mcell.om{background:rgba(0,0,0,.15)}.mcell.past{opacity:.5}.mcell.td{background:var(--blue-dim)}.mcell.td .mdate{color:var(--brand);font-weight:800}
.mdate{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:3px}
.mpill{background:var(--surface);border:1px solid var(--border);border-radius:var(--rsm);padding:4px 7px;font-size:12px;font-weight:600;cursor:pointer;overflow:hidden;position:relative;user-select:none}
.mpill:hover{border-color:var(--border2)}
.mpill.mpill-cancelled{opacity:.55;border-style:dashed}
.mpill-v{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;font-size:12.5px;font-weight:700}
.mpill-vtext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.mpill-s{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:var(--text3);margin-top:2px}
.mpill-freq{font-size:10px;color:var(--text3);margin-top:1px;font-style:italic}
.mmore{font-size:10px;color:var(--text3);padding:1px 5px;cursor:pointer}
.mpill.has-conflict{outline:2px solid var(--red);box-shadow:0 0 6px rgba(255,0,0,.2)}
.mpill.has-conflict::after{content:'⚠';position:absolute;top:1px;right:3px;font-size:8px;color:var(--red);font-weight:900}
.mpill.conflict-waived::after{content:'✓';position:absolute;top:1px;right:3px;font-size:9px;color:var(--green);font-weight:900}

/* DETAIL PANEL */
.dpanel{width:290px;min-width:290px;background:var(--surface);border-left:1px solid var(--border);overflow:visible;flex-direction:column;gap:12px;flex-shrink:0;position:relative;display:none}
.dpanel-scroll{overflow-y:auto;height:100%;padding:18px;box-sizing:border-box}
.dclose{position:absolute;top:12px;right:12px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:var(--rsm);width:25px;height:25px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}
.dp-vn{font-size:16px;font-weight:800;line-height:1.3;padding-right:28px;letter-spacing:-0.3px}
.dp-vs{font-size:12px;color:var(--text3);margin-top:2px}
.dp-sec{border-top:1px solid var(--border);padding-top:11px}
.dp-lbl{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.dp-r{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.dp-k{font-size:11px;color:var(--text3);font-weight:500;flex-shrink:0}.dp-v{font-size:11px;font-weight:600;text-align:right;max-width:170px}
.dp-jp{background:var(--brand-dim);border:1px solid rgba(255,0,0,0.2);border-radius:7px;padding:9px 12px;text-align:center}
.dp-jl{font-size:9px;color:var(--brand);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.dp-jv{font-size:19px;font-weight:900;color:var(--brand)}
.dp-jn{font-size:10px;color:var(--text3);margin-top:2px}
.dp-note{background:var(--surface2);border-radius:5px;padding:9px 11px;font-size:12px;color:var(--text2);line-height:1.6;border-left:3px solid var(--brand)}

/* DAY VIEW */
.dgrid{display:flex;flex-direction:column;gap:0;padding:0 18px 20px}
.dday-banner{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.dday-banner-date{font-family:'Bebas Neue',sans-serif;font-size:38px;font-weight:400;line-height:1;letter-spacing:.04em}
.dday-banner-dow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.dday-banner-today{display:inline-block;background:var(--brand);color:#fff;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;margin-top:3px}
.dday-section{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:.1em;color:var(--text3);padding:16px 0 6px;text-transform:uppercase}
.drow{display:flex;align-items:stretch;gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:8px;cursor:pointer;transition:border-color .15s;background:var(--surface)}
.drow:hover{border-color:var(--border2)}
.drow-accent{width:4px;flex-shrink:0}
.drow-time{width:72px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border-right:1px solid var(--border);background:var(--surface2)}
.drow-time-h{font-family:'Bebas Neue',sans-serif;font-size:20px;font-weight:400;line-height:1;letter-spacing:.04em}
.drow-time-m{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.05em}
.drow-body{flex:1;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.drow-venue{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow-meta{font-size:11px;color:var(--text3)}
.drow-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:12px 14px;gap:5px;flex-shrink:0}
.drow-host{font-size:12px;font-weight:700}
.drow-unassigned{font-size:12px;font-weight:700;color:var(--red)}
.drow-event{border-left:3px solid var(--purple);background:rgba(155,114,255,0.05)}
.drow-empty{text-align:center;padding:40px;color:var(--text3);font-size:13px}

/* DAY VIEW -- hourly time-axis (8am-midnight), replaces the flat .drow
   list above. Columns are whichever Group-by option is active, built
   from the same _rgBuildRows()/_rgCard() markup Week/Custom use, so a
   card here looks and behaves identically to one in the roster grid. */
.dtl-wrap{padding:0 0 20px}
.dtl-untimed-row{display:flex;border-bottom:2px solid var(--border2);background:var(--surface2)}
.dtl-untimed-label{width:64px;flex-shrink:0;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:10px 6px 10px 0;text-align:right}
.dtl-untimed-cols{display:flex;flex:1;min-width:0}
.dtl-untimed-col{flex:1;min-width:180px;padding:7px;display:flex;flex-direction:column;gap:5px;border-left:1px solid var(--border)}
.dtl-grid{display:grid;position:relative;min-width:700px}
.dtl-corner{position:sticky;top:0;left:0;z-index:6;background:var(--surface);border-bottom:1px solid var(--border)}
.dtl-colhead{background:var(--surface2);border-bottom:1px solid var(--border);border-left:1px solid var(--border);padding:9px 11px;display:flex;align-items:center;gap:9px;position:sticky;top:0;z-index:5;min-height:62px}
.dtl-gutter{position:relative;border-right:1px solid var(--border);position:sticky;left:0;z-index:4;background:var(--surface)}
.dtl-hourlabel{position:absolute;right:8px;transform:translateY(-50%);font-size:10px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtl-track{position:relative;border-left:1px solid var(--border);background-image:repeating-linear-gradient(to bottom,var(--border) 0,var(--border) 1px,transparent 1px,transparent 56px)}
.dtl-block{position:absolute}
.dtl-block .rg-card{height:100%;box-sizing:border-box;overflow:hidden}
.occ-row{display:flex;align-items:center;gap:12px;padding:9px 20px;border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer}
.occ-row:hover{background:var(--surface2)}
.occ-row.occ-sel{background:var(--brand-dim)}
.occ-row-date{font-family:'Bebas Neue',sans-serif;font-size:18px;line-height:1;width:48px;text-align:center;flex-shrink:0}
.occ-row-dow{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);text-align:center}
.occ-row-info{flex:1;min-width:0}
.occ-row-venue{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.occ-row-meta{font-size:11px;color:var(--text3)}
.occ-row-host{font-size:12px;font-weight:700;flex-shrink:0;text-align:right}
.occ-row-cb{width:18px;height:18px;accent-color:var(--brand);flex-shrink:0;cursor:pointer}

/* DATE JUMP INPUT */
.cal-datejump{padding:3px 8px;height:28px;border-radius:var(--rsm);border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-size:11px;font-family:'Outfit',sans-serif;outline:none;cursor:pointer;transition:border-color .15s}
.cal-datejump:focus{border-color:var(--brand)}

/* VIEWS */
/* display:none here is a leftover from the original SPA's own show/hide-one-
   view pattern — every multi-page rebuild screen (dashboard.php, venues.php,
   hosts.php, ...) overrides it inline with style="display:flex" per the
   page-header comment on each of those. flex-direction:column is added
   here, not on each page's inline override, because "display:flex" alone
   defaults to flex-direction:row — a real bug found while building
   hosts.php: with a page's several top-level blocks (.ph, a filter bar,
   the actual grid/content) as flex ROW items instead of stacked ones, the
   page rendered as a few narrow strips side-by-side with the real content
   pushed oddly to one side, instead of the intended top-to-bottom page
   layout. Present in dashboard.php and venues.php too (identical inline
   style, same missing property) — this one shared fix corrects all three
   already-delivered pages as well as hosts.php, rather than patching four
   separate inline styles with the same missing declaration. */
.view-page{padding:20px;overflow-y:auto;display:none;flex:1;flex-direction:column}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ph-title{font-family:'Bebas Neue',sans-serif;font-size:28px;font-weight:400;letter-spacing:.06em;line-height:1}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:13px}
.hcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;transition:border-color .15s;cursor:pointer}
.hcard:hover{border-color:var(--border2)}
.hct{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.hav{width:42px;height:42px;border-radius:50%;font-size:15px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hn{font-size:14px;font-weight:800;letter-spacing:-0.2px}.hp{font-size:11px;color:var(--text3);margin-top:2px}
.hrows{display:flex;flex-direction:column;gap:4px}
.hrow{display:flex;align-items:center;gap:7px;font-size:11px;padding:5px 7px;background:var(--surface2);border-radius:var(--rsm)}
.hrd{font-weight:700;min-width:26px;font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.hrf{color:var(--text2);flex:1}.hft{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;color:var(--text3);display:flex;justify-content:space-between}
.hft-shows-link{color:var(--blue);cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:2px}.hft-shows-link:hover{color:var(--brand)}
/* STAFF STATUS BADGES */
.staff-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
/* SKILL RATINGS */
.skill-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.skill-row:last-child{border-bottom:none}
.skill-stars{display:flex;gap:3px}
.skill-star{font-size:14px;cursor:pointer;color:var(--border2);transition:color .1s}
.skill-star.on{color:#F59E0B}
.skill-star:hover,.skill-star:hover~.skill-star{color:var(--border2)}
.skill-stars:hover .skill-star{color:#F59E0B}
.skill-stars .skill-star:hover~.skill-star{color:var(--border2)}
/* HR LOG */
.hrlog-entry{padding:10px 12px;border-radius:var(--rsm);border-left:3px solid;margin-bottom:8px;background:var(--surface2)}
.hrlog-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.hrlog-meta{font-size:10px;color:var(--text3);margin-top:2px}
.hrlog-text{font-size:12px;color:var(--text);margin-top:5px;line-height:1.5}
/* TOGGLE CHIPS (regions, crowd, equipment) */
.tchip{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text2);transition:border-color .12s,background .12s,color .12s;user-select:none}
.tchip.on{background:var(--brand-dim,rgba(0,229,255,.12));border-color:var(--brand);color:var(--brand)}
/* REQ asterisk */
.req{color:var(--red);margin-left:2px}
/* EQUIPMENT REGISTER */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:13px}
.eq-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px;cursor:pointer;transition:border-color .15s;position:relative}
.eq-card:hover{border-color:var(--border2)}
.eq-card-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.eq-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.eq-components-list .comp-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px}
.eq-components-list .comp-item:last-child{border-bottom:none}
.eq-log-entry{padding:9px 12px;border-radius:var(--rsm);border-left:3px solid;margin-bottom:8px;background:var(--surface2)}
.eq-stat{padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rsm);flex:1;min-width:110px;text-align:center}
.eq-stat-n{font-size:22px;font-weight:900;letter-spacing:-1px}
.eq-stat-l{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* TABLES */
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{text-align:left;padding:8px 13px;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:2}
.dtable td{padding:10px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
.dtable tr:hover td{background:var(--surface2);cursor:pointer}
.sbadge{display:inline-flex;font-size:10px;font-weight:700;padding:3px 7px;border-radius:20px}
.tbadge{display:inline-flex;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px}

/* DASHBOARD */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--border2);border-radius:var(--r);padding:16px;transition:background .2s,border-color .2s}
.kpi.clickable{cursor:pointer}
.kpi.clickable:hover{background:var(--surface2);border-color:var(--border2);border-top-color:var(--brand);box-shadow:0 6px 20px rgba(0,0,0,.22),0 0 0 0px var(--brand-glow)}
.kpi-n{font-family:'Righteous',sans-serif;font-size:34px;font-weight:400;letter-spacing:0;line-height:1;color:var(--text)}
.kpi-l{font-size:10px;color:var(--text3);margin-top:4px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kpi-sub{font-size:11px;color:var(--text2);margin-top:6px}
.kpi-act{font-size:10px;margin-top:8px;color:var(--brand);font-weight:600;opacity:.7}

/* MODALS */
.moverlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.moverlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border:1px solid var(--border2);border-top:2px solid var(--brand);border-radius:13px;width:640px;max-width:95vw;max-height:90vh;overflow-y:auto;padding:26px 24px 0;transform:translateY(14px);transition:transform .22s;box-shadow:0 24px 80px rgba(0,0,0,.75),0 0 0 1px var(--border)}
.moverlay.open .modal{transform:translateY(0)}
/* Visual consistency pass: one modal width everywhere (~640px) — .mlg and
   .modal-lg used to size some modals up to 560/720px; both now resolve to
   the same standard width so every modal in the app reads the same. */
.mlg{width:640px}.modal-lg{width:640px;max-width:95vw}
.mtitle{font-family:'Bebas Neue',sans-serif;font-size:22px;font-weight:400;letter-spacing:.06em;margin-bottom:2px}
.msub{font-size:12px;color:var(--text3);margin-bottom:20px}
/* .mh/.mttl/.mcls — the title-bar-with-close-button pattern the Venue,
   Host, ShowType, User and Client modals all use in the original app. Found
   while building the Host modal: index.html has used this markup since
   before this rebuild started, but never actually defined these three
   classes anywhere in its own <style> block either — so in the live
   production app today, and in this rebuild's already-delivered Venue
   modal, that title bar has always rendered as plain unstyled text next to
   a plain unstyled "✕" button (no spacing, no hover state, no pointer
   cursor). Real, pre-existing gap, not something this rebuild introduced —
   fixed here rather than carried forward, same as the other real bugs found
   and fixed while building each page (see README).*/
.mh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:2px}
.mttl{font-family:'Bebas Neue',sans-serif;font-size:22px;font-weight:400;letter-spacing:.06em}
.mcls{background:none;border:none;color:var(--text3);font-size:16px;line-height:1;cursor:pointer;padding:4px;margin:-4px -4px 0 0;border-radius:6px;transition:color .15s,background .15s}
.mcls:hover{color:var(--text);background:var(--surface2)}
.fg{margin-bottom:13px}
.fl{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:.5px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* Sticky footer: .modal now has no bottom padding of its own (moved onto
   .mactions below) so the footer can stick flush to the modal's bottom edge
   while the fields above it keep scrolling underneath. */
.mactions{display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;margin:18px -24px 0;padding:14px 24px 20px;background:var(--surface);border-top:1px solid var(--border);z-index:2}
.hpicker{display:flex;flex-direction:column;gap:4px;max-height:175px;overflow-y:auto}
.hopt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);transition:border-color .12s,background .12s}
.hopt:hover,.hopt.sel{border-color:var(--brand);background:var(--brand-dim)}
.hopt-n{font-size:13px;font-weight:600;flex:1}.hopt-c{font-size:11px;color:var(--text3)}
.hopt-warn{font-size:10px;color:var(--orange);margin-top:2px;font-weight:500}
.hopt-unavail{border-color:rgba(255,140,66,.3)!important}.hopt-unavail:hover,.hopt-unavail.sel{border-color:var(--orange)!important;background:var(--orange-dim)!important}
.conflict-banner{border-radius:var(--rsm);padding:10px 13px;border:1px solid;margin-bottom:2px}
.conflict-banner.active{background:rgba(232,25,44,.08);border-color:rgba(232,25,44,.3)}
.conflict-banner.waived{background:rgba(255,171,0,.07);border-color:rgba(255,171,0,.3)}
.conflict-banner-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.conflict-banner.active .conflict-banner-title{color:var(--red)}
.conflict-banner.waived .conflict-banner-title{color:var(--gold)}
.conflict-banner-msg{font-size:12px;color:var(--text2);margin-bottom:7px}

/* STATUS PIPELINE */
.spipe{display:flex;margin:10px 0;border-radius:7px;overflow:hidden;border:1px solid var(--border)}
.sstep{flex:1;padding:7px 4px;text-align:center;font-size:9px;font-weight:700;cursor:pointer;transition:color .15s,background .15s;color:var(--text3);background:var(--surface2);border-right:1px solid var(--border)}
.sstep:last-child{border-right:none}.sstep.on{background:var(--brand);color:#fff}
.sstep.done{background:var(--green-dim);color:var(--green)}.sstep.canc{background:var(--red-dim);color:var(--red)}

/* TOGGLE */
.pubtog{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--surface2);border-radius:var(--rsm);border:1px solid var(--border2);cursor:pointer;transition:border-color .15s,background .15s}
.pubtog.on{border-color:var(--green);background:var(--green-dim)}
.ptdot{width:18px;height:18px;border-radius:4px;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;transition:border-color .15s,background .15s}
.pubtog.on .ptdot{border-color:var(--green);background:var(--green);color:#000}
.ptlbl{font-size:13px;font-weight:600}

/* DAY CHECKBOXES */
.daychk{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:border-color .15s,background .15s,color .15s;user-select:none}
.daychk:hover{background:var(--surface2);border-color:var(--border2)}
.daychk input[type="checkbox"]{margin:0;cursor:pointer;accent-color:var(--brand)}

/* ── COMBOBOX (typeahead + confirm) ──────────────────────────────────────── */
.cbx-wrap{position:relative}
.cbx-drop{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rsm);box-shadow:0 8px 28px rgba(0,0,0,.22);z-index:300;max-height:230px;overflow-y:auto;display:none}
.cbx-drop.open{display:block}
.cbx-item{padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px}
.cbx-item:last-child{border-bottom:none}
.cbx-item:hover,.cbx-item.focused{background:var(--surface2)}
.cbx-item-name{font-weight:600;color:var(--text)}
.cbx-item-sub{font-size:11px;color:var(--text3);margin-top:2px}
.cbx-item-add{color:var(--brand);font-weight:600;font-size:13px}
.cbx-card{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rsm);padding:11px 13px;margin-top:5px;font-size:12px}
.cbx-card-name{font-weight:700;font-size:13px;color:var(--green);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.cbx-card-row{display:flex;gap:12px;flex-wrap:wrap;color:var(--text2);margin-bottom:4px;font-size:11px}
.cbx-card-actions{display:flex;gap:6px;margin-top:8px}

/* ── SHOW SHEET (annual table view) ──────────────────────────────────────── */
.ss-wrap{overflow:auto;flex:1}
.ss-tbl{width:100%;border-collapse:collapse;font-size:12px}
.ss-tbl th{position:sticky;top:0;background:var(--surface);z-index:5;padding:7px 10px;text-align:left;font-size:11px;color:var(--text3);font-weight:700;border-bottom:2px solid var(--border2);white-space:nowrap}
.ss-tbl td{padding:6px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.ss-tbl tr:hover td{background:var(--surface2)}
.ss-tr-canc td{opacity:.4;background:rgba(100,100,100,.06)!important}
.ss-tr-hold td{background:rgba(251,191,36,.05)!important}
.ss-td-r{cursor:pointer;min-width:110px;border-radius:3px}
.ss-td-r:hover{background:rgba(0,229,255,.08)!important;outline:1px dashed var(--brand)}
.ss-inp{background:var(--surface);border:1px solid var(--brand);border-radius:3px;color:var(--text);padding:3px 7px;font-size:12px;width:100%;min-width:90px}
.ss-jp{font-weight:700;color:var(--gold)}
.ss-jp-won{font-size:10px;color:var(--gold);background:rgba(255,171,0,.15);border:1px solid var(--gold);border-radius:10px;padding:1px 7px;display:inline-block}
.ss-won-btn{background:none;border:none;cursor:pointer;font-size:15px;padding:0 2px;opacity:.2;transition:opacity .15s;line-height:1}
.ss-won-btn.on{opacity:1}
.ss-wk{font-size:11px;color:var(--text3);font-weight:700;white-space:nowrap}
.ss-date{white-space:nowrap;font-weight:600}
.ss-imp{font-size:10px;color:var(--orange);font-style:italic;max-width:130px}
.ss-note{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:var(--text2)}
.ss-note:hover{white-space:normal;overflow:visible;background:var(--surface2);padding:4px 6px;border-radius:4px}
.ss-players{font-size:12px;color:var(--text2);cursor:pointer;min-width:40px;text-align:right}
.ss-players:hover{background:rgba(0,229,255,.08)!important;border-radius:3px}
.ss-status-cell{cursor:pointer}
.ss-master-tag{font-size:9px;color:var(--text3);display:block;margin-top:1px;font-style:italic}

/* TYPE/STATUS BADGES — show-type colours are now data-driven via stBadge()/stVtag() */
/* Event-type badges (Corporate / Fundraiser / Private) keep static classes */
.tco{background:rgba(232,25,44,.1);border-color:var(--brand);color:var(--brand)}
.tfu{background:rgba(52,211,116,.1);border-color:var(--green);color:var(--green)}
.tpr{background:rgba(155,114,255,.1);border-color:var(--purple);color:var(--purple)}
/* Event status badge classes — one per pipeline stage */
.se  {background:rgba(139,139,139,.15);color:#8b8b8b}          /* enquiry / unknown */
.sfr {background:rgba(74,140,255,.15);color:#4a8cff}            /* form_received */
.sc  {background:var(--brand-dim);color:var(--brand)}           /* confirmed */
.sq  {background:var(--blue-dim);color:var(--blue)}             /* invoiced */
.sd  {background:var(--orange-dim);color:var(--orange)}         /* deposit_paid */
.sfd {background:rgba(251,191,36,.18);color:#d97706}            /* final_details_sent/received */
.sco {background:var(--green-dim);color:var(--green)}           /* paid_full / show_complete */
.sfu {background:rgba(6,182,212,.15);color:#0891b2}             /* follow_up_sent */
.soh {background:rgba(251,146,60,.18);color:#ea580c}            /* on_hold */
.sca {background:var(--red-dim);color:var(--red)}               /* cancelled */
.sp2 {background:rgba(74,140,255,.15);color:#4a8cff}            /* legacy */

/* LOADING / SPINNERS */
.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text3);font-size:13px;gap:10px}
.spin{width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:40px;text-align:center;color:var(--text3);font-size:13px}
/* Visual consistency pass — Step 1: standard empty state (icon, one line,
   one button) and loading skeleton (rows that mimic the real content's
   shape, instead of a spinner) used by every page as it's migrated. */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:52px 20px;text-align:center;grid-column:1/-1}
.empty-state-icon{font-size:26px;color:var(--text3);opacity:.55}
.empty-state-msg{font-size:var(--fs-base);color:var(--text2);font-weight:500}
.skel{background:linear-gradient(100deg,var(--surface2) 30%,var(--surface3) 45%,var(--surface2) 60%);background-size:300% 100%;animation:skel-shimmer 1.3s ease-in-out infinite;border-radius:var(--rsm)}
@keyframes skel-shimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}
.skel-card{height:152px;border-radius:var(--r);border:1px solid var(--border)}

/* PRINT OVERLAY — roster */
@media print{
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  body>*:not(#prOverlay):not(#ppPrintFrame){display:none!important}
  #prOverlay{display:block!important;position:static!important;background:#fff!important;overflow:visible!important;height:auto!important;width:100%!important}
  #prTopBar{display:none!important}
  #prContent{overflow:visible!important;padding:0!important;max-width:100%!important;flex:none!important;height:auto!important;width:100%!important}
  .pr-day{break-inside:avoid;page-break-inside:avoid}
  .pr-gtbl{break-inside:avoid;page-break-inside:avoid}
  /* In-app bingo card print frame */
  #ppPrintFrame{display:block!important;position:static!important;overflow:visible!important;background:transparent!important;z-index:auto!important}
  #ppPrintBar{display:none!important}
  @page{margin:12mm;size:A4 portrait}
}
/* TOAST */
.toast{position:fixed;bottom:18px;right:18px;background:var(--surface2);border:1px solid var(--border2);border-radius:9px;padding:11px 15px;font-size:13px;font-weight:600;color:var(--text);z-index:9998;transform:translateY(70px);opacity:0;transition:transform .25s,opacity .25s,border-color .25s;box-shadow:0 8px 28px rgba(0,0,0,.5);max-width:300px}
.toast.show{transform:translateY(0);opacity:1}.toast.ok{border-color:var(--green)}.toast.err{border-color:var(--red)}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* CONFLICT / ALERT CARDS */
.conflict-card{background:var(--red-dim);border:1px solid rgba(255,92,92,.3);border-radius:8px;padding:12px;margin-bottom:8px}
.conflict-type{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--red);margin-bottom:4px}
/* Conflict action dropdown (shown when a card has 3+ actions) */
.cact-wrap{position:relative;display:inline-block}
.cact-toggle{font-size:10px;padding:3px 10px;white-space:nowrap}
.cact-menu{position:fixed;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.5);min-width:210px;z-index:9999;display:none;overflow:hidden}
.cact-wrap.open .cact-menu{display:block}
.cact-item{display:block;width:100%;padding:9px 14px;font-size:12px;font-weight:600;text-align:left;cursor:pointer;background:none;border:none;color:var(--text1);white-space:nowrap;transition:background .15s}
.cact-item:hover{background:var(--hover)}
.cact-item.cact-primary{color:var(--brand)}

/* DASHBOARD — ACTION CARDS */
.dash-action-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;flex:1;min-width:140px;transition:border-color .2s,background .2s}
.dash-action-card.dash-action-ok{border-top:2px solid var(--green)}
.dash-action-card.dash-action-warn{border-top:2px solid var(--orange)}
.dash-action-card.dash-action-warn:hover{background:var(--orange-dim);border-color:var(--orange)}
.dash-action-card.dash-action-danger{border-top:2px solid var(--red)}
.dash-action-card.dash-action-danger:hover{background:var(--red-dim);border-color:var(--red)}
.dash-action-card.dash-action-info{border-top:2px solid var(--brand)}
.dash-action-card.dash-action-info:hover{background:var(--brand-dim);border-color:var(--brand)}
.dash-action-icon{font-size:20px;flex-shrink:0;width:36px;text-align:center}
.dash-action-card.dash-action-ok .dash-action-icon{color:var(--green)}
.dash-action-card.dash-action-warn .dash-action-icon{color:var(--orange)}
.dash-action-card.dash-action-danger .dash-action-icon{color:var(--red)}
.dash-action-card.dash-action-info .dash-action-icon{color:var(--brand)}
.dash-action-n{font-family:'Righteous',sans-serif;font-size:30px;font-weight:400;line-height:1;letter-spacing:0}
.dash-action-l{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);line-height:1.4;margin-top:2px}
.dash-action-cta{margin-left:auto;font-size:10px;font-weight:700;color:inherit;opacity:.7;flex-shrink:0}

/* DASHBOARD — WEEK STRIP */
.dash-week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:20px}
.dash-week-day{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 6px;text-align:center;transition:border-color .15s,background .15s}
.dash-week-day:hover{background:var(--surface2);border-color:var(--border2)}
.dash-week-today{border-top:2px solid var(--brand);background:var(--brand-dim)}
.dash-week-dayname{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.dash-week-date{font-family:'Bebas Neue',sans-serif;font-size:22px;font-weight:400;line-height:1.1;margin:2px 0}
.dash-week-dots{display:flex;justify-content:center;min-height:16px;align-items:center}
.dash-week-count{background:var(--surface3);color:var(--text2);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.dash-week-count-warn{background:var(--orange-dim);color:var(--orange)}
.dash-week-empty{width:6px;height:6px;border-radius:50%;background:var(--border2)}

/* DASHBOARD — SHOW ROWS */
.dash-show-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:12px;transition:background .12s}
/* Step 5: one shared class for the small Bebas Neue section labels
   Dashboard repeats five times as inline styles ("This Week", "Today's
   Shows", "Host Workload"...) -- same look, one declaration. */
.dash-section-label{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.06em;color:var(--text3);margin-bottom:8px}
.dash-show-row:hover{background:var(--surface2)}

/* EDIT MODE SELECTOR */
.edit-mode-sel{display:flex;gap:8px;flex-direction:column}
.edit-mode-opt{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:7px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);transition:border-color .12s,background .12s}
.edit-mode-opt:hover,.edit-mode-opt.sel{border-color:var(--brand);background:var(--brand-dim)}
.edit-mode-opt input{margin-top:2px;accent-color:var(--brand)}
.edit-mode-title{font-size:13px;font-weight:700}.edit-mode-desc{font-size:11px;color:var(--text3);margin-top:2px}

/* REPORT / ROUNDS SUB-TABS */
.rtab-row{display:flex;gap:4px;padding:0 0 14px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-shrink:0}
.sub-nav{display:none;background:var(--surface2);border-bottom:1px solid var(--border);padding:4px 16px;gap:4px;flex-shrink:0}
.sub-nav.visible{display:flex}
.sub-nav-2{background:var(--surface3);padding-left:32px}
.snav-btn{padding:5px 14px;border-radius:var(--rsm);font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);border:none;background:transparent;font-family:'Outfit',sans-serif;white-space:nowrap;transition:color .15s,background .15s;text-decoration:none}
.snav-btn:hover{background:var(--surface3);color:var(--text)}
.snav-btn.on{color:var(--text);border-bottom:2px solid var(--brand)}
.sub-nav-2 .snav-btn{font-size:11px;padding:4px 12px;color:var(--text3)}
.sub-nav-2 .snav-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}
.sub-nav-2 .snav-btn.on{color:var(--text);border-bottom:2px solid var(--brand)}
.rtab{padding:6px 16px;border-radius:var(--rsm);font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);border:none;background:transparent;font-family:'Outfit',sans-serif;transition:color .15s,background .15s}
.rtab:hover{background:var(--surface2);color:var(--text)}.rtab.on{background:var(--surface3);color:var(--text)}

/* SEGMENTED CONTROL — a plain in-page toggle (e.g. "which CSV am I
   importing"), visually distinct from .rtab/.snav-btn so it never reads as
   another level of navigation. */
.seg-row{display:inline-flex;gap:3px;padding:3px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r)}
.seg-btn{padding:5px 14px;border-radius:calc(var(--r) - 4px);font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);border:none;background:transparent;font-family:'Outfit',sans-serif;transition:color .15s,background .15s}
.seg-btn:hover{color:var(--text)}
.seg-btn.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* ROUNDS TABLE */
.rnd-past{opacity:.7}
.rnd-sel{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--border2);border-radius:5px;padding:4px 6px;font-family:'Outfit',sans-serif;font-size:12px;cursor:pointer}
.rnd-sel:focus{outline:2px solid var(--brand);border-color:transparent}
.rnd-warn{display:inline-block;background:rgba(255,140,66,.13);border:1px solid rgba(255,140,66,.3);border-radius:4px;font-size:10px;color:var(--orange);padding:1px 5px;margin-top:3px;white-space:nowrap}
.rnd-saved{color:var(--green);font-size:10px;margin-top:2px;display:none}

/* HOST PERFORMANCE CARDS */
.hperf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;padding-bottom:24px}
.hperf-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.hperf-name{font-size:16px;font-weight:800;margin-bottom:2px;letter-spacing:-.3px}
.hperf-sub{font-size:11px;color:var(--text3);margin-bottom:12px}
.hperf-stat-row{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.hperf-stat{flex:1;min-width:70px;background:var(--surface2);border-radius:var(--rsm);padding:10px 12px;text-align:center}
.hperf-stat-n{font-size:22px;font-weight:900;line-height:1}
.hperf-stat-l{font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-top:3px}
.hperf-section{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);margin:12px 0 6px}
.hperf-bar-row{margin-bottom:6px}
.hperf-bar-label{font-size:11px;color:var(--text2);display:flex;justify-content:space-between;margin-bottom:3px}
.hperf-bar{height:5px;background:var(--surface3);border-radius:3px;overflow:hidden}
.hperf-bar-fill{height:100%;border-radius:3px;transition:width .4s}
.hperf-trend{display:flex;align-items:flex-end;gap:3px;height:36px;margin-top:4px}
.hperf-tbar{flex:1;border-radius:2px 2px 0 0;min-width:8px;position:relative;cursor:default;transition:opacity .2s}
.hperf-tbar:hover{opacity:.75}
.hperf-tbar-lbl{font-size:8px;color:var(--text3);text-align:center;margin-top:2px}
.hperf-no-data{padding:40px;text-align:center;color:var(--text3);font-size:13px}
/* ── Toggle switch ─────────────────────────────────────────── */
.tog-wrap{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer}
.tog-wrap input{opacity:0;width:0;height:0;position:absolute}
.tog-slider{position:absolute;inset:0;background:var(--border2);border-radius:11px;transition:background .2s}
.tog-slider::before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}
.tog-wrap input:checked + .tog-slider{background:var(--green)}
.tog-wrap input:checked + .tog-slider::before{transform:translateX(18px)}

/* ============================================================
   ROSTER GRID (calendar.php Week view, and later Day/Custom/Month) —
   Group by (Host/Venue/Show type) rows x day columns. See calendar.php's
   own comment above _rgRenderGrid() for the why. New block, additive —
   the old .wgrid/.vlbl/.ccell/.asgn/.mgrid/.mcell/.mpill rules above are
   left in place since Day and Month still use them until their own
   stages land.
   ============================================================ */
.rg-wrap{overflow:auto;flex:1;min-height:0}
.rg-summary{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:12px;color:var(--text2);padding:10px 18px 6px}
.rg-summary b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.rg-summary .rg-sum-clash b{color:var(--red)}
.rg-grid{display:grid;min-width:900px}
.rg-head{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:8px 10px;text-align:center}
.rg-head:first-child{text-align:left;border-right:2px solid var(--border2)}
.rg-head.today .rg-ddate{color:var(--brand)}
.rg-dday{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3)}
.rg-ddate{font-size:16px;font-weight:800;line-height:1.3}
.rg-rowlabel{background:var(--surface2);border-bottom:1px solid var(--border);border-right:2px solid var(--border2);padding:9px 11px;display:flex;align-items:center;gap:9px;min-height:62px}
.rg-avatar{width:28px;height:28px;border-radius:50%;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.02em}
.rg-avatar.none{background:var(--orange-dim);color:var(--orange);border:1px dashed var(--orange)}
.rg-rowtext{min-width:0}
.rg-rowname{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-rowsub{font-size:10.5px;color:var(--text3);margin-top:1px;font-variant-numeric:tabular-nums}
.rg-cell{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:6px;display:flex;flex-direction:column;gap:5px;min-height:62px}
.rg-rowlabel.rg-row-thin,.rg-cell.rg-row-thin{min-height:30px}
.rg-rowlabel.rg-row-thin{padding:4px 11px}
.rg-rowlabel.rg-row-thin .rg-avatar{width:20px;height:20px;font-size:8px}
.rg-rowlabel.rg-rowlabel-wrap{min-height:74px;align-items:flex-start}
.rg-rowlabel-wrap .rg-rowname{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.rg-hostfree{padding:10px 18px;font-size:11px;color:var(--text3);cursor:pointer;border-top:1px solid var(--border);transition:color .12s}
.rg-hostfree:hover{color:var(--text)}
.rg-hostfree b{color:var(--text2);font-weight:700}
.rg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rsm);padding:5px 7px;font-size:11px;cursor:pointer}
.rg-card.rg-unassigned{background:var(--orange-dim);border:1px dashed var(--orange)}
.rg-card.rg-clash{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.rg-card.rg-cancelled{opacity:.5;border-style:dashed}
.rg-ct{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.rg-time{font-weight:700;font-size:10.5px;font-variant-numeric:tabular-nums}
.rg-tag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--surface3);color:var(--text2);text-transform:uppercase;letter-spacing:.03em}
.rg-tag-clash{background:var(--red-dim);color:var(--red)}
.rg-l1{font-size:11.5px;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-l2{font-size:10.5px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:4px;overflow-wrap:anywhere}
.rg-hostdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.rg-typedot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;margin-right:1px}
.rg-type-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--text3);font-weight:600}
.rg-type-legend span{display:flex;align-items:center;gap:4px}
.rg-legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.rg-need{color:var(--orange);font-weight:700}


/* ============================================================
   ROSTER PAGE CLEANUP — items 6-12 (toolbar labels, date picker,
   header redesign, clashes pill, past/today shading, sticky grid)
   ============================================================ */

/* Item 6: small uppercase labels in front of the Range / Group by
   button clusters in the calendar toolbar. Same look as .sbl (sidebar
   section labels) but inline-sized for the toolbar row. */
.tb-label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text3);font-family:'Outfit',sans-serif;white-space:nowrap;margin-right:-4px}

/* Item 9: clashes pill in the roster summary line, replacing the old
   full-width #alertsBar banner on this page. */
.rg-clash-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;color:var(--red);background:var(--red-dim);cursor:pointer;transition:filter .12s}
.rg-clash-pill:hover{filter:brightness(1.08)}

/* Item 11: dim cards/headers for days already in the past; light tint
   on today's whole column (header + every cell in it). */
.rg-head.past{opacity:.5}
.rg-card.rg-past{opacity:.55}
.rg-head.today,.rg-cell.today{background:var(--blue-dim)}

/* Item 12: sticky left column (row names) to match the day headers
   (.rg-head already had position:sticky;top:0 from the original
   mockup port — this just adds the horizontal half). The corner cell
   (.rg-head:first-child) needs to stick on BOTH axes so it stays put
   over the row labels as well as the day headers. */
.rg-rowlabel{position:sticky;left:0;z-index:4}
.rg-head:first-child{position:sticky;left:0;z-index:6}

/* Item 8: dark-mode toggle simplified to a plain round icon button in
   the app header. The elaborate neumorphic pill-switch rules above
   (.theme-toggle / .tog-icon / .tog-label) are left as-is — this layers
   a compact override on top via the extra .theme-toggle-icon class
   rather than rewriting them, so nothing else that might reuse
   .theme-toggle keeps working unchanged. */
.theme-toggle.theme-toggle-icon{width:32px;height:32px;border-radius:50%;background:var(--surface2);box-shadow:none;border:1px solid var(--border2)}
.theme-toggle.theme-toggle-icon::before{display:none}
.theme-toggle.theme-toggle-icon .tog-icon,
body.light .theme-toggle.theme-toggle-icon .tog-icon{position:static !important;transform:none !important;width:auto;height:auto;font-size:13px;color:var(--text2)}
.theme-toggle.theme-toggle-icon:hover{background:var(--surface3)}
.theme-toggle.theme-toggle-icon:hover .tog-icon{color:var(--brand)}
body.light .theme-toggle.theme-toggle-icon{background:var(--surface2);box-shadow:none}

/* Items 8 & 10: one small generic dropdown-menu mechanism, used for the
   header "+ New" menu, the user-name menu (Sign out) and the Manage
   quick-links menu (Venues/Clients/Reports) — replaces the old
   Quick-Links-FAB-specific click/outside-click/Escape handling in
   shell.js with one shared version all three menus use. Reuses the
   existing .sbi item styling (sidebar filter rows) as-is. */
.hdr-menu{position:relative}
.hdr-menu-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.22);z-index:400;padding:6px;flex-direction:column;gap:2px}
.hdr-menu-panel.open{display:flex}
.hdr-menu-panel.left{right:auto;left:0}
.tb-user-trigger{display:flex;align-items:center;gap:5px;cursor:pointer;padding:4px 2px;border-radius:var(--rsm);transition:color .12s}
.tb-user-trigger:hover{color:var(--text)}
/* S-2: .bell, .sbi and .tb-user-trigger are now real <button> elements (were plain <div onclick>, unreachable by keyboard) — reset the native button chrome so they still look exactly like the old divs. */
button.bell,button.sbi,button.tb-user-trigger{appearance:none;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer}
.hdr-menu-panel button.sbi{width:100%}
.hdr-menu-sep{margin:4px 2px 2px;padding:5px 9px 3px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);border-top:1px solid var(--border)}
.nav-caret-btn{border:none;background:transparent;color:var(--text3);cursor:pointer;padding:4px 6px;font-size:10px;border-radius:var(--rsm);transition:color .12s,background .12s;align-self:center}
.nav-caret-btn:hover{color:var(--text);background:var(--surface2)}

/* Drag-and-drop host reassignment (Grid view, grouped by Host only) --
   see calendar.php's _rgDragStart/_rgCellDragOver/_rgCellDrop. */
.rg-card.rg-draggable{cursor:grab}
.rg-card.rg-draggable:active{cursor:grabbing}
.rg-card.rg-dragging{opacity:.35}
.rg-cell.rg-dragover{background:var(--brand-dim);outline:2px dashed var(--brand);outline-offset:-2px}