/* SOP Markdown Rendering */
.sop-md { font-size: 13px; line-height: 1.8; color: var(--text-secondary); }
.sop-md h1 { font-size: 20px; font-weight: 800; color: var(--text-bright); margin: 24px 0 12px; padding: 10px 14px; background: rgba(42,123,228,0.08); border-left: 3px solid var(--text-accent); border-radius: 0 6px 6px 0; }
.sop-md h2 { font-size: 16px; font-weight: 700; color: var(--text-accent); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-primary); }
/* SOP body subheadings — explicitly reset the global `h3 { Barlow Condensed + uppercase + letter-spacing }`
 * so subsection labels (### A. Item) read as normal Title-Case sub-headings, not shouty banners.
 */
.sop-md h3, .sop-rendered h3 { font-family: inherit; letter-spacing: normal; text-transform: none; font-size: 15px; font-weight: 700; color: var(--text-bright); margin: 18px 0 8px; }
.sop-md h4, .sop-rendered h4 { font-family: inherit; letter-spacing: normal; text-transform: none; font-size: 13px; font-weight: 600; color: var(--text-accent); margin: 12px 0 6px; }
.sop-md h5, .sop-rendered h5 { font-family: inherit; letter-spacing: normal; text-transform: none; font-size: 12px; font-weight: 600; font-style: italic; color: var(--text-secondary); margin: 10px 0 4px; }
.sop-md h6, .sop-rendered h6 { font-family: inherit; letter-spacing: normal; text-transform: none; font-size: 12px; font-weight: 500; color: var(--text-muted); margin: 8px 0 4px; }
.sop-md p { margin: 8px 0; }
.sop-md strong { color: var(--text-bright); }
.sop-md ul, .sop-md ol { padding-left: 24px; margin: 8px 0; }
.sop-md li { margin-bottom: 4px; }
.sop-md table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.sop-md th { background: var(--bg-surface); border: 1px solid var(--border-primary); padding: 8px 10px; text-align: left; font-weight: 700; color: var(--text-bright); font-size: 12px; }
.sop-md td { border: 1px solid var(--border-primary); padding: 6px 10px; font-size: 12px; }
.sop-md tr:nth-child(even) td { background: var(--bg-surface); }
.sop-md blockquote { border-left: 3px solid var(--text-accent); padding: 10px 14px; margin: 12px 0; background: rgba(42,123,228,0.05); color: var(--text-secondary); }
.sop-md code { background: var(--bg-surface); padding: 2px 6px; border-radius: 3px; font-size: 12px; color: var(--text-accent); }
.sop-md pre { background: var(--bg-surface); border: 1px solid var(--border-primary); padding: 12px; border-radius: 6px; overflow-x: auto; margin: 12px 0; }
.sop-md pre code { background: none; padding: 0; }
.sop-md hr { border: none; border-top: 1px solid var(--border-primary); margin: 20px 0; }
.sop-md a { color: var(--text-accent); }

/* ============================================================
   MODERN DOC RENDERER (.modern-doc)
   Stripe / Linear / Vercel-style with UCORE brand colors.
   Yellow (#f0b429) + Blue (#2a7be4) + Red (#d63031) accents.
   Used by the in-app help viewer.
   ============================================================ */
/* Hero block at the top of every help doc */
.modern-doc-hero { position: relative; padding: 36px 32px; margin: 0 0 32px; border-radius: 16px; background: linear-gradient(135deg, #1a1d20 0%, #0a1f40 100%); border: 1px solid var(--border-primary); overflow: hidden; }
.modern-doc-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #f0b429 0%, #d63031 50%, #2a7be4 100%); }
.modern-doc-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(240,180,41,0.08) 0%, transparent 70%); pointer-events: none; }
.modern-doc-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #f0b429; margin: 0 0 10px; }
.modern-doc-hero-title { font-size: 38px; font-weight: 800; letter-spacing: -0.022em; line-height: 1.1; color: #f0f2f5; margin: 0 0 8px; }
.modern-doc-hero-sub { font-size: 16px; line-height: 1.55; color: #9aa1ab; margin: 0 0 18px; max-width: 580px; }
.modern-doc-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.modern-doc-hero-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; background: rgba(42,123,228,0.15); border: 1px solid rgba(42,123,228,0.35); color: #5aa3f5; }
.modern-doc-hero-pill.gold { background: rgba(240,180,41,0.12); border-color: rgba(240,180,41,0.35); color: #f0b429; }
.modern-doc-hero-pill.dim { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #9aa1ab; }

/* ============================================================
   MODERN DOC RENDERER (.modern-doc)
   Stripe / Linear / Vercel / Apple-style help content.
   Used by the in-app help viewer for the OT Calendar guide
   and other markdown-rendered docs.
   ============================================================ */
.modern-doc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 0 8px; }
@media (max-width: 900px) { .modern-doc-wrap { grid-template-columns: 1fr; } .modern-doc-toc { display: none !important; } }
.modern-doc { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.7; color: var(--text-primary); max-width: 720px; -webkit-font-smoothing: antialiased; }
.modern-doc > *:first-child { margin-top: 0; }
.modern-doc h1 { font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -0.022em; color: var(--text-bright); margin: 0 0 12px; padding: 0; border: 0; background: none; }
.modern-doc h1 + p { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 24px; }
.modern-doc h2 { font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -0.018em; color: var(--text-bright); margin: 56px 0 16px; padding: 0 0 0 14px; border: 0; background: none; scroll-margin-top: 24px; position: relative; }
.modern-doc h2::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #f0b429 0%, #2a7be4 100%); }
.modern-doc h3 { font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -0.012em; color: var(--text-bright); margin: 36px 0 12px; padding: 0; border: 0; scroll-margin-top: 24px; }
.modern-doc h3::after { content: ""; display: block; width: 32px; height: 2px; background: #f0b429; border-radius: 2px; margin-top: 8px; opacity: 0.7; }
.modern-doc h4 { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--text-bright); margin: 24px 0 8px; padding: 0; border: 0; }
.modern-doc p { margin: 0 0 16px; color: var(--text-primary); }
.modern-doc strong, .modern-doc b { font-weight: 700; color: var(--text-bright); }
.modern-doc em, .modern-doc i { font-style: italic; color: var(--text-secondary); }
.modern-doc a { color: var(--text-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.modern-doc a:hover { border-bottom-color: var(--text-accent); }
.modern-doc ul, .modern-doc ol { margin: 0 0 20px; padding-left: 22px; }
.modern-doc ul { list-style: none; padding-left: 0; }
.modern-doc ul li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.modern-doc ul li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-accent); }
.modern-doc ol { counter-reset: ol-counter; list-style: none; padding-left: 0; }
.modern-doc ol li { position: relative; padding-left: 32px; margin-bottom: 8px; counter-increment: ol-counter; }
.modern-doc ol li::before { content: counter(ol-counter); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(42,123,228,0.12); color: var(--text-accent); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.modern-doc table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 14px; }
.modern-doc th { text-align: left; padding: 10px 14px 10px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-primary); background: none; }
.modern-doc td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--border-primary); vertical-align: top; color: var(--text-primary); }
.modern-doc tr:last-child td { border-bottom: none; }
.modern-doc tbody tr { transition: background-color 0.15s; }
.modern-doc tbody tr:hover { background: rgba(255,255,255,0.02); }
.modern-doc blockquote { background: rgba(42,123,228,0.06); border-left: 3px solid var(--text-accent); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 20px 0; color: var(--text-primary); font-size: 15px; line-height: 1.65; }
.modern-doc blockquote p { margin: 0; }
.modern-doc blockquote p + p { margin-top: 8px; }
.modern-doc code { background: var(--bg-surface); padding: 2px 6px; border-radius: 4px; font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace; font-size: 0.88em; color: var(--text-bright); border: 1px solid var(--border-primary); }
.modern-doc pre { background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 10px; padding: 16px 18px; overflow-x: auto; font-size: 13px; line-height: 1.55; margin: 18px 0 24px; }
.modern-doc pre code { background: none; border: 0; padding: 0; color: var(--text-primary); font-size: 13px; }
.modern-doc hr { border: 0; height: 1px; background: var(--border-primary); margin: 48px 0; }
.modern-doc-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px 0; margin: 0 0 32px; border-bottom: 1px solid var(--border-primary); font-size: 13px; color: var(--text-muted); }
.modern-doc-meta .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border-primary); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.modern-doc-meta .pill-accent { background: rgba(42,123,228,0.1); border-color: rgba(42,123,228,0.3); color: var(--text-accent); }

/* Sticky right-side TOC */
.modern-doc-toc { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; padding: 4px 0 0 16px; border-left: 1px solid var(--border-primary); }
.modern-doc-toc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; padding-left: 0; }
.modern-doc-toc ul { list-style: none; padding: 0; margin: 0; }
.modern-doc-toc li { margin: 0; padding: 0; }
.modern-doc-toc a { display: block; padding: 5px 0 5px 10px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); border-left: 2px solid transparent; margin-left: -2px; transition: color 0.15s, border-color 0.15s; text-decoration: none; }
.modern-doc-toc a:hover { color: var(--text-bright); }
.modern-doc-toc a.toc-active { color: var(--text-accent); border-left-color: var(--text-accent); font-weight: 600; }
.modern-doc-toc a.toc-h3 { padding-left: 22px; font-size: 12px; }
.modern-doc-toc::-webkit-scrollbar { width: 6px; }
.modern-doc-toc::-webkit-scrollbar-track { background: transparent; }
.modern-doc-toc::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; }

/* Modern callout cards (parsed from blockquotes that start with NOTE/TIP/WARNING/IMPORTANT) */
.modern-doc .callout { display: flex; gap: 12px; padding: 16px 18px; margin: 22px 0; border-radius: 10px; border: 1px solid var(--border-primary); background: var(--bg-surface); }
.modern-doc .callout-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; }
.modern-doc .callout-body { flex: 1; min-width: 0; }
.modern-doc .callout-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.modern-doc .callout-body p:last-child { margin-bottom: 0; }
.modern-doc .callout-tip { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.25); }
.modern-doc .callout-tip .callout-icon { background: rgba(34,197,94,0.18); color: #4ade80; }
.modern-doc .callout-tip .callout-label { color: #4ade80; }
.modern-doc .callout-note { background: rgba(42,123,228,0.06); border-color: rgba(42,123,228,0.25); }
.modern-doc .callout-note .callout-icon { background: rgba(42,123,228,0.18); color: var(--text-accent-light); }
.modern-doc .callout-note .callout-label { color: var(--text-accent-light); }
.modern-doc .callout-warning { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.25); }
.modern-doc .callout-warning .callout-icon { background: rgba(245,158,11,0.18); color: #fbbf24; }
.modern-doc .callout-warning .callout-label { color: #fbbf24; }
.modern-doc .callout-important { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.25); }
.modern-doc .callout-important .callout-icon { background: rgba(239,68,68,0.18); color: #f87171; }
.modern-doc .callout-important .callout-label { color: #f87171; }

/* KBD-style inline references — for buttons and nav items mentioned in text.
   Marked in markdown with [[Submit]] or [[OT Calendar]] — converted by the renderer. */
.modern-doc .nav-kbd { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 6px; background: linear-gradient(180deg, #2a7be4 0%, #1e5fb8 100%); border: 1px solid #1e5fb8; color: white; font-family: inherit; font-size: 0.88em; font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); white-space: nowrap; vertical-align: baseline; line-height: 1.4; }
.modern-doc .nav-kbd.gold { background: linear-gradient(180deg, #f0b429 0%, #d49a18 100%); border-color: #d49a18; color: #1a1d20; }
.modern-doc .nav-kbd.danger { background: linear-gradient(180deg, #d63031 0%, #a02424 100%); border-color: #a02424; color: white; }
.modern-doc .nav-kbd.ghost { background: var(--bg-surface); border-color: var(--border-primary); color: var(--text-primary); box-shadow: none; }

/* Stat blocks — for highlighting key numbers like "8 hours" / "24-hour wait" */
.modern-doc .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 22px 0 28px; }
.modern-doc .stat-card { padding: 18px 18px; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border-primary); position: relative; overflow: hidden; }
.modern-doc .stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.modern-doc .stat-card.gold::before { background: #f0b429; }
.modern-doc .stat-card.blue::before { background: #2a7be4; }
.modern-doc .stat-card.red::before { background: #d63031; }
.modern-doc .stat-card.green::before { background: #16a34a; }
.modern-doc .stat-value { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-bright); }
.modern-doc .stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.modern-doc .stat-sub { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.45; }

/* Section divider with brand gradient */
.modern-doc hr { border: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, #f0b429 30%, #2a7be4 70%, transparent 100%); margin: 56px 0 48px; opacity: 0.5; }

/* Subtle background grid behind the entire help-md content for tactical vibe */
.modern-doc { background-image: linear-gradient(rgba(240,180,41,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(240,180,41,0.015) 1px, transparent 1px); background-size: 32px 32px; padding: 8px 0; }

/* Section anchor link on hover */
.modern-doc h2, .modern-doc h3 { position: relative; }
.modern-doc h2 .anchor-link, .modern-doc h3 .anchor-link { opacity: 0; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 400; font-size: 0.7em; padding: 0 4px; text-decoration: none; transition: opacity 0.15s; border: 0; }
.modern-doc h2:hover .anchor-link, .modern-doc h3:hover .anchor-link { opacity: 0.6; }
.modern-doc h2 .anchor-link:hover, .modern-doc h3 .anchor-link:hover { opacity: 1; color: var(--text-accent); border: 0; }

/* Print/PDF action button */
.modern-doc-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 16px; }
.modern-doc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 8px; color: var(--text-primary); cursor: pointer; font-size: 13px; font-weight: 600; transition: background-color 0.15s, border-color 0.15s; font-family: inherit; }
.modern-doc-btn:hover { background: var(--bg-surface2); border-color: var(--text-accent); color: var(--text-bright); }

/* ====== DARK THEME (default — matches UCSO tactical design) ====== */
:root {
    --fs-scale: 1;
    --bg-body: #111314;
    --text-primary: #d4d9e0;
    --text-secondary: #9aa1ab;
    --text-muted: #7a818b;
    --text-dim: #8a9099;
    --text-accent: #2a7be4;
    --text-accent-light: #5aa3f5;
    --text-bright: #f0f2f5;
    
    --bg-header: linear-gradient(90deg, #1a1d20 0%, #1e2126 60%, #1a1d20 100%);
    --bg-nav: #1a1d20;
    --bg-card: #1a1d20;
    --bg-surface: #212428;
    --bg-surface2: #272b30;
    --bg-input: #212428;
    --bg-cell: #1a1d20;
    --bg-cell-hover: #272b30;
    --bg-today: #0a1f40;
    --bg-modal-overlay: rgba(0,0,0,0.75);
    --bg-modal: #1a1d20;
    --bg-employee-option: #212428;
    --bg-employee-hover: #0a1f40;
    --bg-table-header: #272b30;
    --bg-spreadsheet-name: #1a1d20;
    --bg-spreadsheet-total: #0a1f40;
    --bg-table-hover: #212428;
    
    --border-primary: #2e3338;
    --border-accent: #f0b429;
    --border-input: #383d44;
    --border-section: #2e3338;
    
    --bg-info: #0a1f40;
    --text-info: #5aa3f5;
    --border-info: #2a7be4;
    --bg-success: #0d2d1a;
    --text-success: #27ae60;
    --border-success: #27ae60;
    --bg-error: #3d0d0d;
    --text-error: #ff6b6b;
    --border-error: #d63031;
    
    --bg-shift-box: #0a1f40;
    --border-shift-box: #2a7be4;
    --text-shift-box: #5aa3f5;
    --bg-detail-item: #212428;
    --border-detail-item: #2e3338;
    
    --bg-legend: #1a1d20;
    --border-legend: #2e3338;
    
    --bg-mandate-info: #0a1f40;
    --border-mandate-info: #2a7be4;
    --text-mandate-label: #5aa3f5;
    
    --bg-signups: #212428;
    --border-signups: #2e3338;
    --bg-audit: #0a1f40;
    --border-audit: #2a7be4;
    
    --bg-mandate-rotation: #3d0d0d;
    --border-mandate-rotation: #7f1d1d;
    --bg-half-options: #1a1500;
    --border-half-options: #92400e;
    --bg-issue-mandate: #0a1f40;
    --border-issue-mandate: #2a7be4;
    
    --bg-custom-time: #212428;
    --bg-approval: #0d2d1a;
    
    --close-color: #7a818b;
    --close-hover: #f0f2f5;
    
    --btn-disabled-bg: #383d44;
    --btn-disabled-color: #7a818b;

    --bg-spreadsheet-footer: #1a1d20;
    --text-spreadsheet-name: #f0f2f5;
    --text-spreadsheet-total: #5aa3f5;
    --border-spreadsheet: #2e3338;
    
    --gold: #f0b429;
    --gold-dim: #1a1500;

    --shift-a-bg: #831843;
    --shift-a-text: #ec4899;
    --shift-b-bg: #713f12;
    --shift-b-text: #eab308;
    --shift-b-on-text: #1a1a1a;
    --shift-c-bg: #1e3a5f;
    --shift-c-text: #3b82f6;
    --spreadsheet-header-bg: #1e40af;
}

/* ====== LIGHT THEME ====== */
[data-theme="light"] {
    --bg-body: #eef1f5;
    --text-primary: #1a1d20;
    --text-secondary: #5a6270;
    --text-muted: #6b7280;
    --text-dim: #64748b;
    --text-accent: #1e40af;
    --text-accent-light: #2563eb;
    --text-bright: #111314;
    
    --bg-header: linear-gradient(90deg, #ffffff 0%, #f8f9fb 60%, #ffffff 100%);
    --bg-nav: #ffffff;
    --bg-card: #ffffff;
    --bg-surface: #f3f4f6;
    --bg-surface2: #e9ecf0;
    --bg-input: #ffffff;
    --bg-cell: #f9fafb;
    --bg-cell-hover: #eef1f5;
    --bg-today: #dbeafe;
    --bg-modal-overlay: rgba(0,0,0,0.5);
    --bg-modal: #ffffff;
    --bg-employee-option: #f3f4f6;
    --bg-employee-hover: #dbeafe;
    --bg-table-header: #e9ecf0;
    --bg-spreadsheet-name: #f3f4f6;
    --bg-spreadsheet-total: #dbeafe;
    --bg-table-hover: #f3f4f6;
    
    --border-primary: #d1d5db;
    --border-accent: #c8940a;
    --border-input: #d1d5db;
    --border-section: #d1d5db;
    
    --bg-info: #eff6ff;
    --text-info: #1e40af;
    --border-info: #2563eb;
    --bg-success: #f0fdf4;
    --text-success: #15803d;
    --border-success: #22c55e;
    --bg-error: #fef2f2;
    --text-error: #dc2626;
    --border-error: #dc2626;
    
    --bg-shift-box: #eff6ff;
    --border-shift-box: #2563eb;
    --text-shift-box: #1e40af;
    --bg-detail-item: #ffffff;
    --border-detail-item: #d1d5db;
    
    --bg-legend: #f3f4f6;
    --border-legend: #d1d5db;
    
    --bg-mandate-info: #eff6ff;
    --border-mandate-info: #2563eb;
    --text-mandate-label: #2563eb;
    
    --bg-signups: #f3f4f6;
    --border-signups: #d1d5db;
    --bg-audit: #eff6ff;
    --border-audit: #2563eb;
    
    --bg-mandate-rotation: #fef2f2;
    --border-mandate-rotation: #fecaca;
    --bg-half-options: #fef3c7;
    --border-half-options: #fcd34d;
    --bg-issue-mandate: #eff6ff;
    --border-issue-mandate: #bfdbfe;
    
    --bg-custom-time: #f3f4f6;
    --bg-approval: #f0fdf4;
    
    --close-color: #9ca3af;
    --close-hover: #111314;
    
    --btn-disabled-bg: #d1d5db;
    --btn-disabled-color: #9ca3af;

    --bg-spreadsheet-footer: #f3f4f6;
    --text-spreadsheet-name: #1a1d20;
    --text-spreadsheet-total: #1e40af;
    --border-spreadsheet: #d1d5db;
    
    --gold: #c8940a;
    --gold-dim: #fef3c7;

    --shift-a-bg: #fce7f3;
    --shift-a-text: #be185d;
    --shift-b-bg: #fef9c3;
    --shift-b-text: #eab308;
    --shift-b-on-text: #1a1a1a;
    --shift-c-bg: #dbeafe;
    --shift-c-text: #1d4ed8;
    --spreadsheet-header-bg: #1e40af;
}

/* ====== THEME TOGGLE BUTTON ====== */
.theme-toggle {
    padding: 5px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1px;
    line-height: 1;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}
.theme-toggle:hover {
    border-color: var(--text-accent);
    color: var(--text-accent);
}

/* ====== FONT SIZE SCALING ====== */
html[data-fontsize="small"] { --fs-scale: 0.85; }
html[data-fontsize="medium"] { --fs-scale: 1; }
html[data-fontsize="large"] { --fs-scale: 1.2; }
html[data-fontsize="small"] body { zoom: 0.875; }
html[data-fontsize="large"] body { zoom: 1.2; }

/* ====== BASE STYLES ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'Barlow', sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

/* Subtle grid background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(240,180,41,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(240,180,41,0.02) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] body::before { opacity: 0.3; }

.container { max-width: 1800px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-header);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    height: 52px;
}

/* Gold left accent bar on header */
header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #f0b429 0%, #d63031 50%, #2a7be4 100%);
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    width: 220px;
    background: var(--bg-nav);
    border-right: 1px solid var(--border-primary);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 45;
    transition: width 0.2s ease, transform 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 2px; }

.sidebar-identity {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-primary);
}
.sidebar-identity .sid-name { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.sidebar-identity .sid-role { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.sidebar-identity .sid-shift { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 3px; margin-top: 4px; }
.sid-shift-A { background: var(--shift-a-bg); color: var(--shift-a-text); }
.sid-shift-B { background: var(--shift-b-bg); color: var(--shift-b-text); }
.sid-shift-C { background: var(--shift-c-bg); color: var(--shift-c-text); }

.sidebar-pinned { padding: 8px 0; border-bottom: 1px solid var(--border-primary); margin-bottom: 4px; }
.sidebar-group { padding: 8px 0; }
.sidebar-group-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 16px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color 0.15s;
}
.sidebar-group-label:hover { color: var(--text-bright); }
.sidebar-group-label .sg-chevron {
    font-size: 8px;
    transition: transform 0.2s;
    color: var(--text-muted);
}
.sidebar-group.collapsed .sidebar-group-label .sg-chevron { transform: rotate(-90deg); }
.sidebar-group.collapsed .sidebar-item { display: none !important; }
.sidebar-group.collapsed .sidebar-item.active { display: flex !important; }
.sidebar-search {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-primary);
}
.sidebar-search input {
    width: 100%;
    padding: 6px 10px 6px 28px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 12px;
    outline: none;
}
.sidebar-search input:focus { border-color: var(--text-accent); }
.sidebar-search-wrap { position: relative; }
.sidebar-search-wrap::before {
    content: '🔍';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    pointer-events: none;
}
.sidebar-item.sb-hidden { display: none !important; }
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.sidebar-item:hover {
    background: var(--bg-surface);
    color: var(--text-bright);
}
.sidebar-item.active {
    background: var(--bg-surface);
    color: var(--gold);
    border-left-color: var(--gold);
    font-weight: 700;
}
.sidebar-item .si-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-item .si-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item .si-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 99px;
    font-weight: 700;
}

.sidebar-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border-primary);
    margin-top: auto;
}
.sidebar-footer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
}
.sidebar-footer-item:hover { color: var(--text-bright); }

/* Hamburger */
.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text-bright);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 44;
}

/* Main content offset */
#appContainer > main {
    margin-left: 220px;
    margin-top: 52px;
    transition: margin-left 0.2s ease;
}

/* Responsive — Tablet */
@media (max-width: 1023px) {
    .sidebar { width: 56px; }
    .sidebar .si-label, .sidebar-group-label, .sidebar-identity .sid-name,
    .sidebar-identity .sid-role, .sidebar-footer-item .si-label { display: none; }
    .sidebar-search { display: none; }
    .sidebar-identity { padding: 10px 8px; text-align: center; }
    .sidebar-item { padding: 10px 0; justify-content: center; gap: 0; }
    .sidebar-item .si-icon { font-size: 18px; width: auto; }
    .sidebar-item .si-badge { display: none; }
    .sidebar-footer { padding: 8px 4px; text-align: center; }
    .sidebar-footer-item { justify-content: center; gap: 0; }
    .sidebar-footer-item .si-label { display: none; }
    #appContainer > main { margin-left: 56px; }
}
/* Responsive — Mobile */
@media (max-width: 767px) {
    .hamburger { display: block; }
    .sidebar { transform: translateX(-100%); width: 260px; }
    .sidebar.open { transform: translateX(0); }
    .sidebar.open + .sidebar-overlay { display: block; }
    .sidebar .si-label, .sidebar-group-label, .sidebar-identity .sid-name,
    .sidebar-identity .sid-role, .sidebar-footer-item .si-label { display: block; }
    .sidebar-search { display: block; }
    .sidebar-item { padding: 10px 16px; justify-content: flex-start; gap: 10px; }
    .sidebar-item .si-badge { display: inline-block; }
    #appContainer > main { margin-left: 0; margin-top: 52px; padding: 16px 12px; }
    .card { padding: 16px; }
}

.header-content {
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo-area img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

h1 { 
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--text-bright);
    text-transform: uppercase;
    line-height: 1.1;
}
h1 span { color: var(--gold); }

.header-subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 1px;
}

.header-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.admin-btn {
    padding: 6px 14px;
    background: #d63031;
    color: white;
    border: none;
    border-radius: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-btn:hover { filter: brightness(1.15); }
.admin-btn-hidden { display: none; }

/* Old nav replaced by sidebar */

nav button {
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

nav button:hover { color: var(--text-primary); }

nav button.active {
    color: var(--text-accent);
    border-bottom-color: var(--text-accent);
}

nav .nav-divider {
    width: 1px;
    background: var(--border-primary);
    margin: 6px 4px;
    flex-shrink: 0;
}

nav .nav-sup-btn {
    color: var(--gold);
}
nav .nav-sup-btn:hover { color: #ffd057; }
nav .nav-sup-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 768px) {
    .header-content { padding: 8px 12px; }
    .header-logo-area img { width: 36px; height: 36px; }
    h1 { font-size: 16px; letter-spacing: 2px; }
    .header-subtitle { font-size: 8px; letter-spacing: 1px; }
    .header-right { gap: 6px; }
    .header-right .hide-mobile { display: none; }
    .font-size-controls { display: none !important; }
    #headerUserName { display: none !important; }
    nav { padding: 0 8px; }
    nav button { padding: 8px 10px; font-size: 11px; letter-spacing: 1px; }
}

main { padding: 28px 24px; max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.section { display: none; }
.section.active { display: block; }

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-top: 2px solid var(--border-primary);
    padding: 20px;
    margin-bottom: 24px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: border-top-color 0.2s;
}
.card:hover { border-top-color: var(--text-accent); }
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(42,123,228,0.02) 0%, transparent 60%);
    pointer-events: none;
}

.calendar {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 20px;
    table-layout: fixed;
}

.calendar th {
    background: var(--bg-surface);
    padding: 10px 4px;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
}

.calendar td {
    padding: 8px 4px;
    text-align: left;
    border: 1px solid var(--border-primary);
    height: 140px;
    background: var(--bg-cell);
    vertical-align: top;
    cursor: pointer;
    overflow-y: auto;
    min-width: 0;
    color: var(--text-primary);
    word-wrap: break-word;
}

@media (min-width: 1200px) {
    .calendar td { height: 180px; }
}

@media (max-width: 768px) {
    .calendar td { height: 80px; font-size: 11px; padding: 4px 2px; }
    .calendar th { font-size: 10px; padding: 6px 2px; }
    .shift-indicator { font-size: 10px !important; padding: 2px 4px !important; }
    nav button { padding: 8px 10px; font-size: 10px; letter-spacing: 1px; }
    .calendar-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .calendar { min-width: 500px; }
    .dash-grid-2col { grid-template-columns: 1fr !important; }
    .dash-grid-3col { grid-template-columns: 1fr 1fr !important; }
    .dash-grid-7col { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 480px) {
    .dash-grid-7col { grid-template-columns: repeat(3, 1fr) !important; }
}

.calendar td:hover { background: var(--bg-cell-hover); }
.calendar td.today { background: var(--bg-today); border-color: var(--text-accent); }
/* Adjacent-month days ("calendar bleed"): dimmed so the primary month still reads as
   primary, but the day number and any OT on neighbor days stay visible and clickable. */
.calendar td.cal-othermonth { background: var(--bg-surface); }
.calendar td.cal-othermonth > div:first-child { color: var(--text-muted); opacity: .55; }

.shift-indicator {
    display: block;
    padding: 4px 6px;
    margin: 3px 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
    font-family: 'Barlow', sans-serif;
}

.shift-indicator:hover { opacity: 0.85; }

.shift-split {
    display: flex !important;
    padding: 0 !important;
    overflow: hidden;
}
.shift-split-left, .shift-split-right {
    flex: 1;
    padding: 3px 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shift-split-warning {
    background: #d63031 !important;
    color: white !important;
    animation: pulse-warning 2s infinite;
}

.shift-a { background: var(--shift-a-text); color: #fff; }
.shift-b { background: var(--shift-b-text); color: var(--shift-b-on-text, #1a1a1a); }
.shift-c { background: var(--shift-c-text); color: #dbeafe; }
.shift-birthday { background: #15803d; color: #ffffff; font-weight: 700; }
.shift-nocover { background: transparent; color: var(--text-dim, #6b7280); font-weight: 400; border: 1px dashed var(--border2, #64748b); font-style: italic; }

.shift-warning-48h {
    background: #d63031 !important;
    color: white !important;
    border: 2px solid #ff6b6b !important;
    animation: pulse-warning 2s infinite;
}

.shift-mandate-window {
    background: #d63031 !important;
    color: #fff !important;
    border: 2px solid #ff6b6b !important;
    animation: pulse-mandate 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(214, 48, 49, 0.7); }
    50% { box-shadow: 0 0 0 4px rgba(214, 48, 49, 0); }
}

@keyframes pulse-mandate {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0.7); }
    50% { box-shadow: 0 0 0 4px rgba(240, 180, 41, 0); }
}
@keyframes stormPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.3); }
    50% { box-shadow: 0 0 12px 4px rgba(220,38,38,0.15); }
}

.legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1px;
}

.legend-box {
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

.info-box {
    background: var(--bg-info);
    border-left: 3px solid var(--border-info);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-info);
}

.success-box {
    background: var(--bg-success);
    border-left: 3px solid var(--border-success);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-success);
}

.error-box {
    background: var(--bg-error);
    border-left: 3px solid var(--border-error);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-error);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 16px;
}

table th {
    background: var(--bg-surface);
    padding: 10px 12px;
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-primary);
}

table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-size: 13px;
}

table tr:hover { background: var(--bg-table-hover); }

.shift-box {
    background: var(--bg-shift-box);
    border: 1px solid var(--border-shift-box);
    padding: 14px;
    margin-bottom: 10px;
}

.shift-box h4 {
    margin-bottom: 10px;
    color: var(--text-shift-box);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 1px;
}

.shift-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}

.detail-item {
    background: var(--bg-detail-item);
    padding: 8px;
    border: 1px solid var(--border-detail-item);
}

.detail-item strong { display: block; color: var(--text-shift-box); font-size: 11px; font-family: 'Share Tech Mono', monospace; letter-spacing: 1px; }

button {
    padding: 8px 16px;
    background: #2a7be4;
    color: white;
    border: none;
    border-radius: 6px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}

button:hover { filter: brightness(1.15); }
button:active { transform: scale(0.97); }
button:disabled { background: var(--btn-disabled-bg); cursor: not-allowed; color: var(--btn-disabled-color); filter: none; transform: none; }

.btn-danger { background: #d63031; }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-primary); }
.btn-secondary:hover { background: var(--bg-surface2); border-color: var(--text-accent); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-bright); background: var(--bg-surface); }

.filter-btn { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-primary); padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 6px; }
.filter-btn:hover { border-color: var(--text-accent); color: var(--text-bright); }
.filter-btn.active { background: var(--text-accent); color: white; border-color: var(--text-accent); }

.logout-btn { padding: 4px 10px; font-size: 10px; background: #d63031; font-family: 'Share Tech Mono', monospace; letter-spacing: 1px; }

.form-group { display: flex; flex-direction: column; margin-bottom: 16px; }
.form-group label { font-size: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea {
    padding: 10px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Barlow', sans-serif;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--text-accent);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px rgba(42,123,228,0.15);
}

.form-group input::placeholder, .form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group textarea {
    min-height: 80px;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    resize: vertical;
}

.form-group select {
    background: var(--bg-input);
    color: var(--text-primary);
}

.radio-group {
    display: flex;
    gap: 16px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
}

.radio-item input[type="radio"] {
    cursor: pointer;
    width: auto;
    padding: 0;
    accent-color: var(--text-accent);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-modal-overlay);
}

.modal-content {
    background: var(--bg-modal);
    margin: 2% auto;
    padding: 24px;
    width: 95%;
    max-width: 1200px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    max-height: 92vh;
    overflow-y: auto;
    border: 1px solid var(--border-primary);
    border-top: 3px solid var(--text-accent);
    border-radius: 8px;
}
@media (max-width: 767px) {
    .modal-content { margin: 0; width: 100%; max-height: 100vh; border-radius: 0; padding: 16px; }
}

.close { color: var(--close-color); float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: var(--close-hover); }

.employee-option {
    padding: 10px 14px;
    border: 1px solid var(--border-primary);
    border-left: 3px solid transparent;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-employee-option);
}

.employee-option:hover { background: var(--bg-employee-hover); border-left-color: var(--text-accent); }
.employee-option.selected { background: #0a1f40; color: white; border-left-color: #2a7be4; box-shadow: 0 0 8px rgba(42,123,228,0.3); }

.employee-stats {
    font-size: 11px;
    color: var(--text-secondary, #475569);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.employee-option.selected .employee-stats { color: #5aa3f5; }

.auth-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-top: 3px solid var(--gold);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* SPREADSHEET VIEW STYLES */
.spreadsheet-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.spreadsheet-scroll {
    overflow-x: auto;
    overflow-y: visible;
    isolation: isolate;
}

.spreadsheet-table {
    border-collapse: collapse;
    font-size: 11px;
    width: 100%;
}

.spreadsheet-table th, .spreadsheet-table td {
    padding: 8px;
    text-align: right;
    border: 1px solid var(--border-spreadsheet);
    white-space: nowrap;
}

.spreadsheet-table th {
    background: var(--spreadsheet-header-bg);
    color: white;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 10;
}

.spreadsheet-table tbody td {
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #374151);
}

.spreadsheet-table tbody tr:nth-child(even) td {
    background: var(--bg-surface2, #f8fafc);
}

.spreadsheet-table th.employee-header {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 11;
}

.spreadsheet-table td.employee-name {
    text-align: left;
    background: var(--bg-spreadsheet-name);
    position: sticky;
    left: 0;
    z-index: 5;
    font-weight: 500;
    color: var(--text-spreadsheet-name);
}

.spreadsheet-table td.total-cell {
    background: var(--bg-spreadsheet-total);
    font-weight: 600;
    color: var(--text-spreadsheet-total);
}

.spreadsheet-table tr:hover td:not(.employee-name) {
    background: var(--bg-cell-hover);
}

.spreadsheet-footer {
    background: var(--bg-surface);
    padding: 12px 16px;
    border-top: 1px solid var(--border-primary);
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1px;
    text-align: right;
}

/* Section headings */
h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-bright);
}
/* Quiz mode/option buttons */
.qz-mode-btn{padding:6px 14px;background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border-primary);border-radius:6px;font-size:11px;cursor:pointer;font-weight:600;transition:all .15s;font-family:'Barlow',sans-serif;}
.qz-mode-btn:hover{border-color:#2a7be4;color:var(--text-primary);}
.qz-mode-btn.qz-mode-active{background:#2a7be415;border-color:#2a7be4;color:#2a7be4;font-weight:700;}
/* Quiz police lights */
.qz-police-bar{display:none;height:4px;border-radius:2px;overflow:hidden;margin-bottom:8px;}
.qz-police-bar.active{display:flex;}
.qz-police-left,.qz-police-right{flex:1;position:relative;overflow:hidden;}
.qz-police-left::after,.qz-police-right::after{content:'';position:absolute;inset:0;}
.qz-police-left::after{animation:qzFlashRed 0.9s ease-in-out infinite;}
.qz-police-right::after{animation:qzFlashBlue 0.9s ease-in-out infinite 0.45s;}
.qz-police-bar.flash-med .qz-police-left::after{animation-duration:0.42s;}
.qz-police-bar.flash-med .qz-police-right::after{animation-duration:0.42s;}
.qz-police-bar.flash-fast .qz-police-left::after{animation-duration:0.16s;}
.qz-police-bar.flash-fast .qz-police-right::after{animation-duration:0.16s;}
@keyframes qzFlashRed{0%,100%{background:transparent}50%{background:#dc2626}}
@keyframes qzFlashBlue{0%,100%{background:transparent}50%{background:#2563eb}}

/* ====== GLOBAL RESPONSIVE OVERRIDES ====== */
@media (max-width: 767px) {
    /* Collapse inline 3+ column grids to 1-2 cols on mobile */
    [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns: 300px 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:300px 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    /* Two-column grids in modals collapse to 1 col on small phones */
    .modal-content [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
    .modal-content [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    /* Profile page grids */
    [style*="grid-template-columns: 1fr 1fr;"] { grid-template-columns: 1fr !important; }
    /* FAB bottom padding so content isn't hidden behind floating buttons */
    #appContainer > main { padding-bottom: 100px !important; }
    /* Spreadsheet scroll hint */
    .spreadsheet-scroll::after {
        content: 'Scroll right for more →';
        display: block;
        text-align: center;
        font-size: 11px;
        color: var(--text-muted);
        padding: 6px;
        font-family: 'Share Tech Mono', monospace;
        letter-spacing: 1px;
    }
    /* FAB repositioning on mobile — stack vertically on the LEFT edge (chat bubble owns the right) */
    #floatingBugBtn { bottom: 12px !important; left: 12px !important; right: auto !important; }
    #floatingIdeaBtn { bottom: 56px !important; left: 12px !important; right: auto !important; }
    #floatingAiBtn { bottom: 100px !important; left: 12px !important; right: auto !important; }
    /* AI chat popup — full width on mobile */
    #floatingAiChat { left: 8px !important; right: 8px !important; width: auto !important; bottom: 60px !important; height: 60vh !important; }
    /* Spreadsheet: stack table and activity log vertically on mobile */
    #spreadsheetContainer { flex-direction: column !important; }
    #spreadsheetActivityPanel { width: 100% !important; max-height: 300px !important; }
}
@media (max-width: 480px) {
    [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ============================================================ */
/* Dashboard Widget Grid (v10.9.0)                              */
/* ============================================================ */
.dash-widget-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: row dense;            /* backfill holes left by role/empty variability */
    gap: 16px;                            /* spacing scale step */
    align-items: stretch;                 /* equal-height tiles within a row */
    max-width: 1440px;                    /* stop stretching into emptiness on wide monitors */
    margin-inline: auto;
}
.dash-widget {
    grid-column: span 6;       /* default = full width */
    min-width: 0;
}
.dash-widget[data-width="full"]  { grid-column: span 6; }
.dash-widget[data-width="half"]  { grid-column: span 3; }
.dash-widget[data-width="third"] { grid-column: span 2; }
.dash-widget.dash-widget-pinned {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
    border-radius: 8px;
    position: relative;
}
.dash-widget.dash-widget-pinned::after {
    content: '⚡ Pinned';
    position: absolute;
    top: -10px; right: 8px;
    background: #f59e0b;
    color: #1a1a1a;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
}
.dash-widget.dash-widget-pulse {
    animation: dashWidgetPulse 1.5s ease-in-out 2;
}
@keyframes dashWidgetPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
    50%      { box-shadow: 0 0 0 6px rgba(37,99,235,0.25); }
}
/* Reduced motion: no auto-pin pulse for users who opt out (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .dash-widget.dash-widget-pulse { animation: none; }
}

/* ---- Section zone headers (full-span, non-draggable separators) ---- */
.dash-section-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 2px 6px;
    margin-top: 8px;
    border-bottom: 1px solid var(--border-primary);
}
.dash-section-head::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--text-muted);
}
.dash-section-head:first-child { margin-top: 0; }
.dash-section-head[data-section-head="alerts"] { color: var(--accent-red); }
.dash-section-head[data-section-head="alerts"]::before { background: var(--accent-red); }
.dash-section-head[data-section-head="shift"]::before  { background: var(--accent-blue); }
.dash-section-head[data-section-head="ops"]::before    { background: var(--accent-gold); }

/* ---- Dashboard accessibility (WCAG 2.2) ---- */
/* Scoped muted-text bump so dashboard labels clear 4.5:1 (global token stays put) */
#dashWidgetContainer { --text-muted: #7a828c; }
#dashWidgetContainer :focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
/* 44px minimum touch targets on Quick Actions */
#dashQuickActions button,
#dashQuickActions a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Importance accents on alert-zone tiles (Round 2) ---- */
/* Alert tiles auto-hide when nothing is wrong, so a visible one is always urgent.
   Give it an accent edge. Reserved shift colors are untouched. */
#dashWidgetContainer .dash-widget[data-section="alerts"] { position: relative; }
#dashWidgetContainer .dash-widget[data-section="alerts"]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--accent-orange);
    z-index: 1;
}
#dashWidgetContainer .dash-widget[data-widget-id="stormAlertBanner"]::before,
#dashWidgetContainer .dash-widget[data-widget-id="dashStaffingAlert"]::before {
    background: var(--accent-red);
}

/* ---- New OT fold: badge-with-reveal inside the Upcoming OT tile (Round 2) ---- */
.newot-fold { margin-bottom: 10px; }
.newot-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: rgba(42,123,228,0.12);
    border: 1px solid rgba(42,123,228,0.35);
    color: var(--text-bright);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
}
.newot-badge:hover { background: rgba(42,123,228,0.18); }
.newot-badge:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.newot-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-blue);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(42,123,228,0.25);
}
.newot-badge-label { flex: 1; }
.newot-chev { transition: transform 0.15s ease; color: var(--text-secondary); }
.newot-badge.open .newot-chev { transform: rotate(180deg); }
.newot-panel { padding-top: 8px; }

/* Customize mode visuals */
body.dash-customize-mode .dash-widget {
    outline: 1px dashed var(--border-primary);
    outline-offset: 4px;
    border-radius: 8px;
}
body.dash-customize-mode .dash-widget[draggable="true"] {
    cursor: grab;
}
body.dash-customize-mode .dash-widget.dash-drag-over {
    outline: 2px solid var(--text-accent);
}
body.dash-customize-mode .dash-widget.dash-dragging {
    opacity: 0.4;
}

/* Compact density: halve vertical padding on cards inside dashboard */
.dash-widget-grid.dash-density-compact .card {
    padding: 10px 16px;
    margin-bottom: 12px;
}

/* Customize panel widget rows */
.dash-customize-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    font-size: 12px;
}
.dash-customize-row .grip {
    cursor: grab;
    color: var(--text-muted);
    font-size: 14px;
    padding: 2px 4px;
    user-select: none;
}
.dash-customize-row.locked-required { opacity: 0.7; }
.dash-customize-row .lock-badge {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(245,158,11,0.2);
    color: #f59e0b;
    border: 1px solid #f59e0b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive ladder (6-col base, capped + centered above). Keep multi-up on tablet,
   then drop to 2-col and finally 1-col on phones instead of jumping straight to one. */
@media (max-width: 1099px) and (min-width: 820px) {
    /* thirds become halves so it reads as a clean 2-up, not a cramped 3-up */
    .dash-widget[data-width="third"] { grid-column: span 3; }
}
@media (max-width: 819px) and (min-width: 560px) {
    .dash-widget-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-widget[data-width="full"]  { grid-column: span 2; }
    .dash-widget[data-width="half"]  { grid-column: span 1; }
    .dash-widget[data-width="third"] { grid-column: span 1; }
}
@media (max-width: 559px) {
    .dash-widget-grid { grid-template-columns: 1fr; gap: 8px; }
    .dash-widget[data-width="full"],
    .dash-widget[data-width="half"],
    .dash-widget[data-width="third"] { grid-column: 1 / -1; }
}
/* Customize panel becomes a bottom sheet on phones */
@media (max-width: 700px) {
    #dashCustomizePanel.dash-bottom-sheet {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 9000;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
        margin-bottom: 0;
    }
}


/* Calendar right-click context menu (Ticket #219) */
.cal-ctx-item {
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.1s;
}
.cal-ctx-item:hover {
    background: var(--bg-cell-hover, rgba(255,255,255,0.07));
}

/* ════════════════════════════════════════════════════════════════════════
   v11 HORIZONTAL NAV — feature-flagged, only active under body[data-ui="v11"]
   Legacy chrome is untouched; everything here is scoped so it cannot leak.
   ════════════════════════════════════════════════════════════════════════ */
.v11-nav { display: none; }
.v11-substrip { display: none; }
.v11-mobile-sheet { display: none; }

/* Hide legacy chrome when v11 is on */
body[data-ui="v11"] #appContainer > header { display: none !important; }
body[data-ui="v11"] .sidebar { display: none !important; }
/* Clear the fixed top nav (56px) + substrip (40px) once, on the container, so it
   applies to whichever in-flow block is first. This keeps the v11 announcement
   banner fully below the fixed chrome instead of clipped behind it, and stops the
   banner's height from stacking on top of main's old margin (a ~96px dead band on
   mobile while the banner is shown). No-banner layout is unchanged: main still
   starts at 96px. */
body[data-ui="v11"] #appContainer { padding-top: 96px; }
body[data-ui="v11"] #appContainer > main { margin-left: 0 !important; margin-top: 0 !important; }

/* Top bar */
body[data-ui="v11"] .v11-nav {
    display: flex; align-items: center; gap: 4px;
    position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 60;
    background: var(--bg-header, #101013);
    border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
    padding: 0 14px; box-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
body[data-ui="v11"] .v11-brand { display: flex; align-items: center; gap: 9px; margin-right: 10px; cursor: pointer; }
body[data-ui="v11"] .v11-brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
body[data-ui="v11"] .v11-brand b { font-size: 16px; font-weight: 800; letter-spacing: .5px; color: var(--text-bright, #fafafa); }
body[data-ui="v11"] .v11-brand b span { color: var(--gold, #d4a843); }

body[data-ui="v11"] .v11-items { display: flex; align-items: center; gap: 2px; height: 100%; }
body[data-ui="v11"] .v11-item {
    position: relative; display: flex; align-items: center; gap: 5px; height: 56px;
    padding: 0 14px; font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
    color: var(--text-secondary, #a1a1aa); background: none; border: none;
    border-bottom: 2px solid transparent; white-space: nowrap;
}
body[data-ui="v11"] .v11-item:hover { color: var(--text-bright, #fafafa); background: rgba(255,255,255,0.04); }
body[data-ui="v11"] .v11-item.active { color: var(--text-bright, #fafafa); border-bottom-color: #3b82f6; }
body[data-ui="v11"] .v11-item .v11-caret { font-size: 9px; opacity: .7; }

/* Dropdown panels */
body[data-ui="v11"] .v11-panel {
    display: none; position: absolute; top: 54px; left: 0; min-width: 230px;
    background: var(--bg-card, #161619); border: 1px solid var(--border-primary, rgba(255,255,255,0.1));
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 6px;
    z-index: 70; backdrop-filter: blur(20px);
}
body[data-ui="v11"] .v11-panel.open { display: block; }
body[data-ui="v11"] .v11-panel.v11-mega { min-width: 460px; }
body[data-ui="v11"] .v11-panel.v11-mega.open { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
body[data-ui="v11"] .v11-link {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px;
    font-size: 13px; color: var(--text-primary, #e4e4e7); cursor: pointer; white-space: nowrap;
}
body[data-ui="v11"] .v11-link:hover { background: rgba(255,255,255,0.06); color: var(--text-bright, #fafafa); }
body[data-ui="v11"] .v11-link.active { color: #3b82f6; }
body[data-ui="v11"] .v11-sec {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-muted, #71717a); padding: 9px 11px 4px; border-top: 1px solid var(--border-primary, rgba(255,255,255,0.07)); margin-top: 4px;
}
/* Inline SVG icons: sit on the line, never shrink, inherit text color via stroke */
body[data-ui="v11"] .v11-ico { flex-shrink: 0; display: inline-block; vertical-align: -3px; }
body[data-ui="v11"] .v11-sec .v11-ico { opacity: .7; }
body[data-ui="v11"] .v11-item > .v11-ico { opacity: .85; }
body[data-ui="v11"] .v11-mega .v11-sec:first-child, body[data-ui="v11"] .v11-panel > .v11-sec:first-child { border-top: none; margin-top: 0; }

/* Right cluster */
body[data-ui="v11"] .v11-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
body[data-ui="v11"] .v11-search {
    display: flex; align-items: center; gap: 6px; min-width: 200px; height: 34px; padding: 0 10px;
    background: var(--bg-surface, rgba(255,255,255,0.05)); border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
    border-radius: 8px; color: var(--text-muted, #71717a); cursor: text;
}
body[data-ui="v11"] .v11-search input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary, #e4e4e7); font-size: 13px; }
body[data-ui="v11"] .v11-search .v11-kbd { font-size: 10px; padding: 1px 5px; border: 1px solid var(--border-primary, rgba(255,255,255,0.15)); border-radius: 4px; }
body[data-ui="v11"] .v11-iconbtn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; position: relative;
    background: var(--bg-surface, rgba(255,255,255,0.05)); border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
    border-radius: 8px; cursor: pointer; color: var(--text-secondary, #a1a1aa); font-size: 15px;
}
body[data-ui="v11"] .v11-iconbtn:hover { color: var(--text-bright, #fafafa); }
body[data-ui="v11"] .v11-badge {
    position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
    background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
body[data-ui="v11"] .v11-pill {
    height: 34px; display: none; align-items: center; gap: 6px; padding: 0 12px; border-radius: 8px;
    font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
}
body[data-ui="v11"] .v11-pill.show { display: inline-flex; }
body[data-ui="v11"] .v11-pill.green { background: rgba(34,197,94,.15); color: #22c55e; border-color: rgba(34,197,94,.3); }
body[data-ui="v11"] .v11-pill.amber { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.3); }
body[data-ui="v11"] .v11-pill.red { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.3); }
body[data-ui="v11"] .v11-env { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* Profile chip + menu */
body[data-ui="v11"] .v11-profile { position: relative; }
body[data-ui="v11"] .v11-chip {
    display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 8px; border-radius: 8px;
    background: var(--bg-surface, rgba(255,255,255,0.05)); border: 1px solid var(--border-primary, rgba(255,255,255,0.08)); cursor: pointer;
}
body[data-ui="v11"] .v11-avatar { width: 24px; height: 24px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
body[data-ui="v11"] .v11-chip .v11-cname { font-size: 13px; font-weight: 600; color: var(--text-bright, #fafafa); }
body[data-ui="v11"] .v11-chip .v11-crole { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: #3b82f6; padding: 1px 6px; border-radius: 4px; }
body[data-ui="v11"] .v11-menu {
    display: none; position: absolute; top: 44px; right: 0; min-width: 220px;
    background: var(--bg-card, #161619); border: 1px solid var(--border-primary, rgba(255,255,255,0.1));
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 6px; z-index: 70;
}
body[data-ui="v11"] .v11-menu.open { display: block; }
body[data-ui="v11"] .v11-menu .v11-uiver { font-size: 11px; color: var(--text-muted, #71717a); padding: 8px 11px 2px; }

/* Substrip / breadcrumb */
body[data-ui="v11"] .v11-substrip {
    display: flex; align-items: center; position: fixed; top: 56px; left: 0; right: 0; height: 40px; z-index: 55;
    background: var(--bg-header, #101013); border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.06));
    padding: 0 18px; font-size: 13px; color: var(--text-secondary, #a1a1aa);
}
body[data-ui="v11"] .v11-crumb b { color: var(--text-bright, #fafafa); font-weight: 600; }
body[data-ui="v11"] .v11-crumb span { opacity: .5; margin: 0 7px; }

/* Mobile */
body[data-ui="v11"] .v11-hamb { display: none; }
@media (max-width: 768px) {
    body[data-ui="v11"] .v11-items, body[data-ui="v11"] .v11-search, body[data-ui="v11"] .v11-pill { display: none !important; }
    body[data-ui="v11"] .v11-hamb { display: flex; }
    body[data-ui="v11"] .v11-chip .v11-cname, body[data-ui="v11"] .v11-chip .v11-crole { display: none; }
    body[data-ui="v11"] .v11-mobile-sheet.open {
        display: block; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 58;
        background: var(--bg-body, #0a0a0c); overflow-y: auto; padding: 12px;
    }
    body[data-ui="v11"] .v11-mobile-sheet .v11-link { padding: 13px 14px; font-size: 15px; }
    body[data-ui="v11"] .v11-mobile-sheet .v11-sec { font-size: 12px; }
}

/* Configurable nav: rendered (flat) panels can get long — cap height and scroll */
body[data-ui="v11"] .v11-panel { max-height: 72vh; overflow-y: auto; }
body[data-ui="v11"] .v11-panel.v11-rendered.open { display: block; }

/* Nav Layout editor (admin) */
#navEditor .navedit-col {
    flex: 1; min-width: 200px; background: var(--bg-card, #161619);
    border: 1px solid var(--border-primary, rgba(255,255,255,0.1)); border-radius: 12px; padding: 10px;
}
#navEditor .navedit-colhead {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted, #71717a); padding: 4px 6px 10px; border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08)); margin-bottom: 8px;
}
#navEditor .navedit-list { min-height: 60px; display: flex; flex-direction: column; gap: 6px; }
#navEditor .navedit-chip {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: grab;
    background: var(--bg-surface, rgba(255,255,255,0.05)); border: 1px solid var(--border-primary, rgba(255,255,255,0.1));
    font-size: 13px; color: var(--text-primary, #e4e4e7);
}
#navEditor .navedit-chip:hover { border-color: #3b82f6; }
#navEditor .navedit-chip.dragging { opacity: .4; }
#navEditor .navedit-chip .navedit-role {
    margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase;
    color: var(--text-muted, #71717a); border: 1px solid var(--border-primary, rgba(255,255,255,0.15)); border-radius: 4px; padding: 1px 5px;
}
#navEditor .navedit-chip svg { flex-shrink: 0; }

/* v11 merged-calendar filter chips (hidden in legacy, shown only under data-ui=v11) */
#v11CalChips { display: none; }
body[data-ui="v11"] #v11CalChips { display: flex; }
body[data-ui="v11"] .v11-chipbtn {
    padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
    background: var(--bg-surface, rgba(255,255,255,0.05)); color: var(--text-secondary, #a1a1aa);
    border: 1px solid var(--border-primary, rgba(255,255,255,0.1));
}
body[data-ui="v11"] .v11-chipbtn:hover { color: var(--text-bright, #fafafa); }
body[data-ui="v11"] .v11-chipbtn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/* Nav editor: section header rows are draggable too */
#navEditor .navedit-sec {
    padding: 9px 10px 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-muted, #71717a); cursor: grab; border-top: 1px dashed var(--border-primary, rgba(255,255,255,0.12)); margin-top: 4px;
}
#navEditor .navedit-sec:first-child { border-top: none; margin-top: 0; }
#navEditor .navedit-sec.dragging { opacity: .4; }

/* C: v11 re-skin of the OT slot modals — VISUAL ONLY. DOM, handlers, mandate
   endpoints and all behavior are unchanged; this only restyles the presentation. */
body[data-ui="v11"] #employeeModal,
body[data-ui="v11"] #mandateModal {
    background: rgba(0,0,0,0.66); backdrop-filter: blur(10px);
}
body[data-ui="v11"] #employeeModal .modal-content,
body[data-ui="v11"] #mandateModal .modal-content {
    background: var(--bg-elevated, var(--bg-card, #1f1f24));
    border: 1px solid var(--border-strong, rgba(255,255,255,0.16));
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55);
    animation: v11ModalIn .25s cubic-bezier(0.34, 1.3, 0.64, 1);
    border-top: 5px solid #64748b;            /* shift-color accent stripe */
    margin-top: 4% !important;
}
body[data-ui="v11"] #employeeModal[data-shift="A"] .modal-content,
body[data-ui="v11"] #mandateModal[data-shift="A"] .modal-content { border-top-color: #e11d48; }
body[data-ui="v11"] #employeeModal[data-shift="B"] .modal-content,
body[data-ui="v11"] #mandateModal[data-shift="B"] .modal-content { border-top-color: #d97706; }
body[data-ui="v11"] #employeeModal[data-shift="C"] .modal-content,
body[data-ui="v11"] #mandateModal[data-shift="C"] .modal-content { border-top-color: #2563eb; }
@keyframes v11ModalIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Header */
body[data-ui="v11"] #employeeModal .modal-content > h2,
body[data-ui="v11"] #mandateModal .modal-content > h2 {
    font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--text-bright, #fafafa) !important;
    padding-bottom: 14px; border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}
/* Close button */
body[data-ui="v11"] #employeeModal .close,
body[data-ui="v11"] #mandateModal .close {
    font-size: 20px; opacity: .6; transition: all .15s; width: 32px; height: 32px; line-height: 30px; text-align: center;
    border-radius: 8px;
}
body[data-ui="v11"] #employeeModal .close:hover,
body[data-ui="v11"] #mandateModal .close:hover { opacity: 1; background: rgba(255,255,255,0.08); }
/* Info grid → carded */
body[data-ui="v11"] #employeeModal #empModalInfo,
body[data-ui="v11"] #mandateModal #empModalInfo {
    border-radius: 14px !important; border-width: 1px !important; padding: 18px !important;
    background: var(--bg-card, rgba(255,255,255,0.03)) !important; gap: 22px !important;
}
body[data-ui="v11"] #employeeModal #empModalInfo strong,
body[data-ui="v11"] #mandateModal #empModalInfo strong {
    font-size: 10px; text-transform: uppercase; letter-spacing: .6px; opacity: .8;
}
/* Buttons → rounded (inline colors preserved) */
body[data-ui="v11"] #employeeModal .modal-content button,
body[data-ui="v11"] #mandateModal .modal-content button { border-radius: 10px !important; }

/* ── Mobile bottom tab bar (v11, <768px) ─────────────────────────────────── */
.v11-tabbar { display: none; }
.v11-mtitle { display: none; }
@media (max-width: 768px) {
    body[data-ui="v11"] .v11-tabbar {
        display: flex; align-items: stretch; justify-content: space-around;
        position: fixed; bottom: 0; left: 0; right: 0; height: 60px; z-index: 65;
        background: var(--bg-header, #101013);
        border-top: 1px solid var(--border-primary, rgba(255,255,255,0.08));
        padding-bottom: env(safe-area-inset-bottom);
    }
    body[data-ui="v11"] .v11-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        background: none; border: none; cursor: pointer; padding: 4px 2px; min-width: 0; position: relative;
        color: var(--text-muted, #71717a); border-top: 2px solid transparent;
    }
    body[data-ui="v11"] .v11-tab.active { color: #3b82f6; border-top-color: #3b82f6; }
    body[data-ui="v11"] .v11-tab .v11-tabico svg { width: 22px; height: 22px; display: block; }
    body[data-ui="v11"] .v11-tab .v11-tablabel { font-size: 11px; font-weight: 600; letter-spacing: 0.2px; }
    body[data-ui="v11"] .v11-tab .v11-tabbadge {
        position: absolute; top: 4px; right: 18%;
        min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
        background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
    }
    /* Top bar simplification: centered page title, hide hamburger (bottom bar covers it) and Bell/Chat icon-buttons */
    body[data-ui="v11"] .v11-hamb { display: none !important; }
    body[data-ui="v11"] .v11-mtitle {
        display: block; position: absolute; left: 50%; transform: translateX(-50%);
        font-size: 15px; font-weight: 700; color: var(--text-bright, #fafafa); letter-spacing: -0.2px;
        max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    body[data-ui="v11"] .v11-brand b { display: none; } /* keep just the crest on mobile */
    body[data-ui="v11"] .v11-right > .v11-iconbtn[aria-label="Notifications"],
    body[data-ui="v11"] .v11-right > .v11-iconbtn[aria-label="Chat"] { display: none; }
    /* Content reflow: leave room for the bottom bar */
    body[data-ui="v11"] #appContainer > main { padding-bottom: 80px !important; }
}

/* ── OT calendar mobile agenda (vertical day list, v11 + <768px) ──────────── */
#v11Agenda { display: flex; flex-direction: column; gap: 8px; }
.v11-agenda-day {
    background: var(--bg-card, #161619); border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
    border-radius: 12px; padding: 12px 14px;
}
.v11-agenda-day.v11-day-empty { background: transparent; opacity: .55; }
.v11-agenda-day.v11-day-past { opacity: .55; }
.v11-agenda-day.v11-day-empty.v11-day-past { opacity: .35; }
.v11-agenda-dayhead { display: flex; align-items: baseline; gap: 12px; }
.v11-agenda-dow { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: var(--text-muted); width: 32px; }
.v11-agenda-date { font-size: 18px; font-weight: 700; color: var(--text-bright); }
.v11-agenda-status { margin-left: auto; }
.v11-agenda-slot {
    margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-primary, rgba(255,255,255,0.06)); cursor: pointer;
}
.v11-agenda-slot.open { border-style: dashed; }
.v11-agenda-letter {
    width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.v11-agenda-meta { min-width: 0; flex: 1; }
.v11-agenda-title { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.v11-agenda-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.v11-agenda-mand {
    font-size: 10px; font-weight: 800; letter-spacing: .5px;
    background: rgba(239,68,68,.15); color: #ef4444; padding: 3px 8px; border-radius: 6px; flex-shrink: 0;
}

/* ── v11 employee-modal structural skin (legacy untouched) ────────────────── */
.v11emp-only { display: none; }                                        /* default: hidden everywhere */
body[data-ui="v11"] .v11emp-only { display: flex; }                    /* show only under v11 */
body[data-ui="v11"] #employeeModal > .modal-content > h2 { display: none; }   /* legacy title hidden */
body[data-ui="v11"] #employeeModal #empModalInfo { display: none !important; }/* legacy 4-col grid hidden */
body[data-ui="v11"] #employeeModal .v11emp-legacyfooter { display: none; }    /* legacy close row hidden */

body[data-ui="v11"] #employeeModal .v11emp-hero {
    display: flex; align-items: center; gap: 16px; padding: 6px 0 18px;
    border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08)); margin-bottom: 18px;
}
body[data-ui="v11"] #employeeModal .v11emp-letter {
    width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: #fff; background: #64748b; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
body[data-ui="v11"] #employeeModal[data-shift="A"] .v11emp-letter { background: linear-gradient(135deg, #e11d48, #be123c); }
body[data-ui="v11"] #employeeModal[data-shift="B"] .v11emp-letter { background: linear-gradient(135deg, #d97706, #b45309); }
body[data-ui="v11"] #employeeModal[data-shift="C"] .v11emp-letter { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
body[data-ui="v11"] #employeeModal .v11emp-heroinfo { min-width: 0; flex: 1; }
body[data-ui="v11"] #employeeModal .v11emp-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted, #71717a); }
body[data-ui="v11"] #employeeModal .v11emp-title { font-size: 20px; font-weight: 700; color: var(--text-bright, #fafafa); margin-top: 2px; }
body[data-ui="v11"] #employeeModal .v11emp-time { font-size: 13px; color: var(--text-secondary, #a1a1aa); margin-top: 2px; }

body[data-ui="v11"] #employeeModal .v11emp-footer {
    display: flex; align-items: center; gap: 14px; padding-top: 16px; margin-top: 16px;
    border-top: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}
body[data-ui="v11"] #employeeModal .v11emp-shiftid {
    font-size: 11px; color: var(--text-muted, #71717a); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    user-select: all; margin-right: auto;
}
body[data-ui="v11"] #employeeModal .v11emp-closebtn {
    padding: 10px 22px; background: var(--bg-surface, rgba(255,255,255,0.06)); color: var(--text-bright, #fafafa);
    border: 1px solid var(--border-primary, rgba(255,255,255,0.12)); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
body[data-ui="v11"] #employeeModal .v11emp-closebtn:hover { background: var(--bg-card-hover, rgba(255,255,255,0.10)); }

/* Same hero/pills/grid/footer treatment on the SUPERVISOR modal */
body[data-ui="v11"] #mandateModal > .modal-content > h2 { display: none; }
body[data-ui="v11"] #mandateModal #mandateInfo { display: none !important; }
body[data-ui="v11"] #mandateModal .v11emp-hero { display: flex; align-items: center; gap: 16px; padding: 6px 0 18px;
    border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08)); margin-bottom: 18px; }
body[data-ui="v11"] #mandateModal .v11emp-letter { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: #fff; background: #64748b; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
body[data-ui="v11"] #mandateModal[data-shift="A"] .v11emp-letter { background: linear-gradient(135deg, #e11d48, #be123c); }
body[data-ui="v11"] #mandateModal[data-shift="B"] .v11emp-letter { background: linear-gradient(135deg, #d97706, #b45309); }
body[data-ui="v11"] #mandateModal[data-shift="C"] .v11emp-letter { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
body[data-ui="v11"] #mandateModal .v11emp-heroinfo { min-width: 0; flex: 1; }
body[data-ui="v11"] #mandateModal .v11emp-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted, #71717a); }
body[data-ui="v11"] #mandateModal .v11emp-title { font-size: 20px; font-weight: 700; color: var(--text-bright, #fafafa); margin-top: 2px; }
body[data-ui="v11"] #mandateModal .v11emp-time { font-size: 13px; color: var(--text-secondary, #a1a1aa); margin-top: 2px; }
/* Supervisor button row → footer style under v11 */
body[data-ui="v11"] #mandateModal .v11mand-actions {
    background: rgba(255,255,255,0.02); border: 1px solid var(--border-primary, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important; padding: 12px !important; margin-top: 18px !important;
}
body[data-ui="v11"] #mandateModal .v11mand-actions button { border-radius: 10px !important; }

/* Tag pills (Voluntary/Mandatory, Open/Filled, etc.) */
body[data-ui="v11"] .v11emp-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
body[data-ui="v11"] .v11-pill-tag {
    font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 6px; border: 1px solid transparent;
}
body[data-ui="v11"] .v11-pill-tag.green { background: rgba(34,197,94,.15); color: #22c55e; border-color: rgba(34,197,94,.3); }
body[data-ui="v11"] .v11-pill-tag.red { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.3); }
body[data-ui="v11"] .v11-pill-tag.blue { background: rgba(59,130,246,.15); color: #3b82f6; border-color: rgba(59,130,246,.3); }
body[data-ui="v11"] .v11-pill-tag.amber { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.3); }

/* 2x2 info grid: each cell carded */
body[data-ui="v11"] .v11emp-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px;
}
body[data-ui="v11"] .v11-cell {
    background: var(--bg-card, rgba(255,255,255,0.03)); border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
    border-radius: 12px; padding: 14px 16px;
}
body[data-ui="v11"] .v11-cell label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted, #71717a); margin-bottom: 6px; }
body[data-ui="v11"] .v11-cell .v11-cellval { font-size: 15px; font-weight: 700; color: var(--text-bright, #fafafa); line-height: 1.3; }
body[data-ui="v11"] .v11-cell .v11-cellnote { font-size: 12px; color: var(--text-secondary, #a1a1aa); margin-top: 4px; }
@media (max-width: 540px) { body[data-ui="v11"] .v11emp-grid { grid-template-columns: 1fr; } }

/* ── Supervisor modal tabs (v11 only): kills the scroll-in-scroll problem ──
   Status / Assign / Edit each become their own page within the modal. Legacy unaffected. */
body[data-ui="v11"] #mandateModal .v11mand-tabs {
    display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}
body[data-ui="v11"] #mandateModal .v11mand-tab {
    padding: 10px 18px; background: none; border: none; cursor: pointer;
    color: var(--text-muted, #71717a); font-size: 13px; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
body[data-ui="v11"] #mandateModal .v11mand-tab:hover { color: var(--text-bright, #fafafa); }
body[data-ui="v11"] #mandateModal .v11mand-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }

/* Hide every tagged section by default; show only the active tab's.
   IMPORTANT: exclude the tab buttons (.v11mand-tab) — they share the data-mtab attribute
   for tracking active state, but they must always stay visible. !important beats inline
   style="display: grid" on the OT-Type/Category wrapper. */
body[data-ui="v11"] #mandateModal [data-mtab]:not(.v11mand-tab) { display: none !important; }
body[data-ui="v11"] #mandateModal.v11mand-show-status [data-mtab="status"]:not(.v11mand-tab) { display: block !important; }
body[data-ui="v11"] #mandateModal.v11mand-show-assign [data-mtab="assign"]:not(.v11mand-tab) { display: block !important; }
body[data-ui="v11"] #mandateModal.v11mand-show-edit  [data-mtab="edit"]:not(.v11mand-tab)  { display: block !important; }
/* OT Type/Category wrapper keeps its internal 2-col grid when revealed.
   Specificity has to beat the generic [data-mtab="edit"] show rule above, so the
   selector includes both the attribute and the class. */
body[data-ui="v11"] #mandateModal.v11mand-show-edit [data-mtab="edit"].v11mand-edit-ottype { display: grid !important; }
/* The Edit Shift toggle is a small pill button, not a block */
body[data-ui="v11"] #mandateModal.v11mand-show-edit button[data-mtab="edit"] { display: inline-block !important; }

/* Break the 2-col grid in v11: each tab's column takes full width when shown. */
body[data-ui="v11"] #mandateModal .v11mand-twocol { display: block !important; }

/* Kill the inner scrollers — single modal scroll instead of scroll-in-scroll. */
body[data-ui="v11"] #mandateModal #currentSignups,
body[data-ui="v11"] #mandateModal #auditLog,
body[data-ui="v11"] #mandateModal #mandateEmployeeList,
body[data-ui="v11"] #mandateModal #mandateRotationList,
body[data-ui="v11"] #mandateModal #calloffResponseList {
    max-height: none !important; overflow-y: visible !important;
}

/* Card-ify the inner sections for cleaner separation */
body[data-ui="v11"] #mandateModal #currentSignups,
body[data-ui="v11"] #mandateModal #auditLog,
body[data-ui="v11"] #mandateModal #mandateEmployeeList {
    background: rgba(255,255,255,0.025) !important;
    border-radius: 10px !important;
}
/* Soft fade when switching tabs */
body[data-ui="v11"] #mandateModal [data-mtab] { animation: v11mandFade .15s ease; }
@keyframes v11mandFade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ── v11 top-of-dashboard widgets (2-week OT + My OT) ─────────────────────
   #dashWidgetContainer is a 6-column grid. Both widgets are full-row (span 6).
   The 2-week calendar swaps between desktop table and mobile day-list at 768px.
   My OT is hidden entirely by JS when the user has no OT this week. */
body[data-ui="v11"] .v11dash-top { margin-bottom: 14px; grid-column: span 6; min-width: 0; }
body[data-ui="v11"] .v11dash-cal-mobile { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
body[data-ui="v11"] .v11-day-today { outline: 1px solid #3b82f6; outline-offset: -1px; }
body[data-ui="v11"] .v11dash-card {
    background: var(--bg-card, #161619);
    border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 14px 16px;
}
body[data-ui="v11"] .v11dash-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
body[data-ui="v11"] .v11dash-header h3 { font-size: 13px; font-weight: 700; color: var(--text-bright, #fafafa); margin: 0; letter-spacing: .3px; }
body[data-ui="v11"] .v11dash-sub { font-size: 11px; color: var(--text-muted, #71717a); }

/* One-row OT calendar inside the dashboard widget — inherits the .calendar
   styling so cells/shift-indicators look identical to the real OT calendar. */
body[data-ui="v11"] .v11dash-weekcal { width: 100%; margin-top: 4px; }
body[data-ui="v11"] .v11dash-weekcal td { vertical-align: top; min-height: 110px; height: 110px; }
body[data-ui="v11"] .v11dash-weekcal td.today { background: rgba(59,130,246,0.08); }
/* My-OT mini calendar: same two-week pattern as the week calendar above, but more
   compact since it only holds one person's OT. */
body[data-ui="v11"] .v11dash-myotcal td { min-height: 64px; height: 64px; }
body[data-ui="v11"] .v11dash-myotcal td.v11-myot-empty { background: var(--bg-surface); }

/* List card rows (My OT, Open OT) */
body[data-ui="v11"] .v11dash-list { display: flex; flex-direction: column; gap: 6px; }
body[data-ui="v11"] .v11dash-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border-primary, rgba(255,255,255,0.06));
}
body[data-ui="v11"] .v11dash-row:hover { border-color: #3b82f6; }
body[data-ui="v11"] .v11dash-letter {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff;
}
body[data-ui="v11"] .v11dash-meta { min-width: 0; flex: 1; }
body[data-ui="v11"] .v11dash-title { font-size: 12px; font-weight: 700; color: var(--text-bright, #fafafa); }
body[data-ui="v11"] .v11dash-sub2 { font-size: 11px; color: var(--text-secondary, #a1a1aa); margin-top: 1px; }
body[data-ui="v11"] .v11dash-empty { font-size: 12px; color: var(--text-muted, #71717a); padding: 8px 4px; }

/* Collapsed Slot Timeline inside the supervisor modal (Status tab) */
body[data-ui="v11"] #mandateModal details.v11-timeline-collapse {
    margin-top: 12px; border: 1px solid var(--border-primary, rgba(255,255,255,0.08)); border-radius: 10px;
    background: rgba(255,255,255,0.02);
}
body[data-ui="v11"] #mandateModal details.v11-timeline-collapse > summary {
    cursor: pointer; user-select: none; list-style: none;
    padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: .3px;
    color: var(--text-bright, #fafafa); display: flex; align-items: center; gap: 8px;
}
body[data-ui="v11"] #mandateModal details.v11-timeline-collapse > summary::-webkit-details-marker { display: none; }
body[data-ui="v11"] #mandateModal details.v11-timeline-collapse > summary::before {
    content: '▸'; color: var(--text-muted, #71717a); transition: transform .15s; display: inline-block;
}
body[data-ui="v11"] #mandateModal details.v11-timeline-collapse[open] > summary::before { transform: rotate(90deg); }
body[data-ui="v11"] #mandateModal details.v11-timeline-collapse > #auditLog { margin: 0 8px 10px; }
@media (max-width: 640px) {
    body[data-ui="v11"] .v11dash-weekcal td { min-height: 80px; height: 80px; font-size: 10px; }
    body[data-ui="v11"] .v11dash-myotcal td { min-height: 56px; height: 56px; }
}

/* ════════════════════════════════════════════════════════════════════════
   v11 DASHBOARD COHESION PASS
   Treats every legacy .dash-widget inside #myDashboard as a v11-styled card
   (background, 1px border, 12px radius, tight padding) and flattens any nested
   legacy .card so we don't get card-in-a-card.  My own v11 widgets
   (.v11emp-only) are excluded via :not() so they keep their existing styling.
   Scoped tight: nothing outside body[data-ui="v11"] #myDashboard is touched.
   ════════════════════════════════════════════════════════════════════════ */

/* The dashboard's top-level heading row (My Dashboard / ⚙️ Customize) */
body[data-ui="v11"] #myDashboard > div:first-child h2#dashTitle {
    font-size: 16px !important; letter-spacing: .2px !important;
}

/* Each legacy widget becomes a v11 card. Excludes my v11emp-only widgets, the
   stormAlertBanner (own full-bleed banner), and weekCalendar (renders its own
   inner v11dash-card via v11DashTopFill(), so the generic box would double it). */
body[data-ui="v11"] #myDashboard .dash-widget:not(.v11emp-only):not([data-widget-id="stormAlertBanner"]):not([data-widget-id="weekCalendar"]) {
    background: var(--bg-card, #161619) !important;
    border: 1px solid var(--border-primary, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
}

/* Flatten the inner .card so it doesn't render a second border/background. */
body[data-ui="v11"] #myDashboard .dash-widget:not(.v11emp-only) .card {
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Kill the inline `border-left: 3px solid …` accent strip on dashBriefing */
body[data-ui="v11"] #myDashboard #dashBriefing[style*="border-left"],
body[data-ui="v11"] #myDashboard .dash-widget [style*="border-left:"] {
    border-left: none !important;
}

/* Unify section headers inside widgets */
body[data-ui="v11"] #myDashboard .dash-widget:not(.v11emp-only) h2,
body[data-ui="v11"] #myDashboard .dash-widget:not(.v11emp-only) h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    color: var(--text-bright, #fafafa) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}
body[data-ui="v11"] #myDashboard .dash-widget:not(.v11emp-only) h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    color: var(--text-muted, #71717a) !important;
    margin: 14px 0 6px !important;
}

/* Tighter widget grid gap to match v11 card rhythm */
body[data-ui="v11"] #myDashboard .dash-widget-grid { gap: 14px !important; }

/* The top-of-dashboard v11 widgets had a margin-bottom from earlier — the grid gap
   already handles spacing, so drop it to avoid double-spacing under v11. */
body[data-ui="v11"] #myDashboard .v11dash-top { margin-bottom: 0 !important; }

/* Customize panel inherits the same card look */
body[data-ui="v11"] #myDashboard #dashCustomizePanel {
    background: var(--bg-card, #161619) !important;
    border: 1px solid var(--border-primary, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
}