body { font-family: system-ui, -apple-system, sans-serif; }
    .nav-active { background: rgba(255,255,255,0.1); border-left-color: #f59e0b !important; color: #fff; }
    .nav-item { border-left: 3px solid transparent; transition: all 0.15s; }
    /* Compact sidebar — tighter rows so more nav items fit without scrolling. */
    #sidebar .nav-item { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
    #sidebar .sb-hide.px-5.pt-4.pb-2, #sidebar p.px-5.pt-4.pb-2 { padding-top: 0.4rem !important; padding-bottom: 0.15rem !important; }
    #sidebar p.px-5.py-2 { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
    .stagnant-row { animation: pulsered 2s infinite; }
    kbd { display:inline-flex;align-items:center;padding:2px 7px;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;font-size:11px;font-family:ui-monospace,monospace;font-weight:600;color:#334155;box-shadow:0 1px 0 #94a3b8; }
    @keyframes pulsered { 0%,100%{background:rgba(239,68,68,0.05)}50%{background:rgba(239,68,68,0.12)} }
    .progress-fill { transition: width 0.4s ease; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
    .modal-box { animation: fadein 0.18s ease; }
    @keyframes fadein { from{opacity:0;transform:scale(0.96)} to{opacity:1;transform:scale(1)} }

    /* ===== AUTH SCREENS ===== */
    .auth-screen { background: radial-gradient(ellipse at top, #0f2040 0%, #0a0f1a 60%, #000 100%); }
    .code-box {
      width: 60px; height: 68px; font-size: 1.75rem; font-weight: 700;
      text-align: center; background: rgba(255,255,255,0.04);
      border: 2px solid rgba(255,255,255,0.12); color: #fff;
      border-radius: 10px; transition: border-color 0.15s, background 0.15s;
      caret-color: #f59e0b;
    }
    .code-box:focus { outline: none; border-color: #f59e0b; background: rgba(245,158,11,0.06); }
    .auth-input {
      width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.05);
      border: 1.5px solid rgba(255,255,255,0.12); color: #fff; border-radius: 8px;
      font-size: 0.875rem; transition: border-color 0.15s, background 0.15s;
    }
    .auth-input:focus { outline: none; border-color: #f59e0b; background: rgba(245,158,11,0.05); }
    .auth-input::placeholder { color: rgba(255,255,255,0.25); }
    .auth-btn {
      width: 100%; padding: 11px; background: #b45309; color: #fff;
      font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em;
      border: none; border-radius: 8px; cursor: pointer;
      transition: background 0.15s, transform 0.1s;
    }
    .auth-btn:hover { background: #92400e; }
    .auth-btn:active { transform: scale(0.99); }
    .auth-shake { animation: shake 0.4s ease; }
    @keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
    .scan-line {
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, rgba(245,158,11,0.4), transparent);
      animation: scan 3s ease-in-out infinite;
    }
    @keyframes scan { 0%{top:0;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }

    /* ===== REPORT CARDS ===== */
    .report-section-text { max-height: 5.5rem; overflow: hidden; transition: max-height 0.35s ease; }
    .report-section-text.expanded { max-height: 120rem; }
    .report-card { transition: box-shadow 0.15s; }
    .report-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }

    /* ===== PRINT STYLES ===== */
    @media not print {
      #print-report { display: none !important; }
      #lp-print-area { display: none !important; }
      #proj-print-area { display: none !important; }
    }
    @media print {
      @page { size: letter; margin: 0.5in; }
      body { background: white !important; }
      /* ── Dashboard Executive Report print (body.dash-printing) ── */
      body.dash-printing #sidebar,
      body.dash-printing #topbar,
      body.dash-printing .no-print { display: none !important; }
      body.dash-printing #main-wrapper { margin-left: 0 !important; }
      body.dash-printing #content { display: none !important; }
      body.dash-printing #lp-print-area { display: none !important; }
      body.dash-printing #print-report { display: block !important; }
      .print-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 12px; break-inside: avoid; }
      .print-header { text-align: center; margin-bottom: 24px; border-bottom: 2px solid #1e3a5f; padding-bottom: 12px; }
      /* ── LP print (body.lp-printing) ── */
      body.lp-printing > *:not(#lp-print-area) { display: none !important; }
      body.lp-printing #lp-print-area { display: block !important; background: white; }
      /* ── Long-Term Project print (body.proj-printing) ── */
      body.proj-printing > *:not(#proj-print-area) { display: none !important; }
      body.proj-printing #proj-print-area { display: block !important; background: white; }
      .proj-pr-page { font-family: 'Segoe UI', Arial, Helvetica, sans-serif; color: #0f172a; }
      .proj-pr-header { padding-bottom: 12pt; margin-bottom: 14pt; border-bottom: 2pt solid #1e293b; }
      .proj-pr-org { font-size: 9pt; color: #64748b; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
      .proj-pr-title { font-size: 22pt; font-weight: 700; color: #0f172a; margin: 4pt 0 0 0; line-height: 1.2; }
      .proj-pr-meta { display: flex; flex-wrap: wrap; gap: 6pt; margin-top: 10pt; font-size: 9.5pt; }
      .proj-pr-meta span { padding: 2pt 9pt; background: #f1f5f9; border: 0.5pt solid #cbd5e1; border-radius: 12pt; font-weight: 600; color: #1e293b; }
      .proj-pr-meta .pri-Critical { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
      .proj-pr-meta .pri-High     { background: #ffedd5; border-color: #fdba74; color: #9a3412; }
      .proj-pr-meta .pri-Medium   { background: #fef9c3; border-color: #fde047; color: #854d0e; }
      .proj-pr-meta .pri-Routine  { background: #dcfce7; border-color: #86efac; color: #166534; }
      .proj-pr-meta .stat-active   { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
      .proj-pr-meta .stat-archived { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
      .proj-pr-timeline { margin-bottom: 14pt; padding: 10pt 12pt; background: #f8fafc; border-left: 3pt solid #3b82f6; border-radius: 4pt; font-size: 10pt; color: #0f172a; }
      .proj-pr-timeline-bar { height: 6pt; background: #e2e8f0; border-radius: 3pt; margin-top: 6pt; overflow: hidden; }
      .proj-pr-timeline-fill { height: 100%; background: #3b82f6; }
      .proj-pr-timeline-fill.over { background: #ef4444; }
      .proj-pr-section-title { font-size: 13pt; font-weight: 700; color: #0f172a; margin: 18pt 0 8pt; padding-bottom: 4pt; border-bottom: 1pt solid #cbd5e1; }
      .proj-pr-desc { font-size: 10.5pt; color: #1e293b; line-height: 1.55; padding: 9pt 11pt; background: #fafafa; border-radius: 4pt; }
      .proj-pr-note { margin-bottom: 8pt; padding: 8pt 11pt; background: #fafaf9; border-left: 3pt solid #6366f1; border-radius: 4pt; page-break-inside: avoid; break-inside: avoid; }
      .proj-pr-note-text { font-size: 10pt; color: #1e293b; white-space: pre-wrap; line-height: 1.5; }
      .proj-pr-note-meta { font-size: 8.5pt; color: #94a3b8; margin-top: 4pt; font-weight: 600; }
      .proj-pr-subtasks { width: 100%; border-collapse: collapse; }
      .proj-pr-subtasks th { background: #f1f5f9; padding: 6pt 9pt; text-align: left; font-size: 8.5pt; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1pt solid #cbd5e1; }
      .proj-pr-subtasks td { padding: 7pt 9pt; font-size: 10pt; color: #1e293b; border-bottom: 0.5pt solid #e2e8f0; vertical-align: top; }
      .proj-pr-subtasks tr.is-done td { color: #94a3b8; text-decoration: line-through; }
      .proj-pr-subtask-status { font-weight: 700; font-size: 9pt; white-space: nowrap; text-decoration: none !important; }
      .proj-pr-subtask-status.s-done    { color: #059669; }
      .proj-pr-subtask-status.s-overdue { color: #dc2626; }
      .proj-pr-subtask-status.s-soon    { color: #d97706; }
      .proj-pr-subtask-status.s-upcoming{ color: #475569; }
      .proj-pr-subtask-status.s-pending { color: #94a3b8; }
      .proj-pr-empty { font-style: italic; color: #94a3b8; padding: 4pt 0; font-size: 10pt; }
      .proj-pr-footer { margin-top: 24pt; padding-top: 8pt; border-top: 0.5pt solid #cbd5e1; font-size: 8.5pt; color: #94a3b8; text-align: center; font-style: italic; }
      /* ── Credential Tracker print (body.ct-printing) ── */
      body.ct-printing #sidebar,
      body.ct-printing #topbar,
      body.ct-printing .no-print { display: none !important; }
      body.ct-printing #main-wrapper { margin-left: 0 !important; padding: 0 !important; }
      body.ct-printing #content { overflow: visible !important; padding: 0.2in !important; }
      body.ct-printing .ct-table-wrap { overflow: visible !important; border: none !important; border-radius: 0 !important; }
      body.ct-printing .ct-table { font-size: 0.55rem !important; }
      body.ct-printing .ct-cat-hdr,
      body.ct-printing .ct-cert-hdr { background: #334155 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      body.ct-printing .ct-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      body.ct-printing .ct-name-cell { background: #f8fafc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      body.ct-printing #ct-print-header { display: block !important; }
      body.ct-printing #ct-print-footer { display: block !important; }
      body.ct-printing .ct-print-only { display: block !important; }
    }
    /* Hide combined print table on screen */
    .ct-print-only { display: none; }

    /* ===== STAFFING CALENDAR DAY BLOCKS ===== */
    .sc-day-block { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
    .sc-day-block:hover { border-color: #93c5fd !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }

    /* ===== COLLAPSIBLE SIDEBAR ===== */
    #sidebar { transition: width 0.25s ease; width: max-content; min-width: 220px; }
    #sidebar .nav-item span, #sidebar .sb-hide p, #sidebar .sb-hide { white-space: nowrap; }
    #main-wrapper { transition: margin-left 0.25s ease; }
    #sidebar.sb-collapsed { width: 60px !important; min-width: 0 !important; overflow: hidden; }
    @media (min-width: 1024px) {
      #sidebar.sb-collapsed + #main-wrapper { margin-left: 60px !important; }
    }
    #sidebar.sb-collapsed #sb-header { padding: 0.5rem 0 !important; }
    #sidebar.sb-collapsed #sb-header-inner { justify-content: center !important; gap: 0 !important; }
    #sidebar.sb-collapsed .sb-hide { display: none !important; }
    #sidebar.sb-collapsed .nav-item { padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; justify-content: center !important; }
    #sidebar.sb-collapsed .nav-item > div,
    #sidebar.sb-collapsed .nav-item > span { display: none !important; }
    #sidebar.sb-collapsed #sb-toggle { justify-content: center !important; }
    #sidebar.sb-collapsed #sb-footer { padding: 0.5rem 0 !important; }
    #sidebar.sb-collapsed #sb-footer-user { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 0.5rem !important; margin-bottom: 0 !important; }
    #sidebar.sb-collapsed #sb-footer-meta { display: none !important; }

    /* ===== DARK MODE ===== */
    body.dark { background-color: #0f172a !important; color: #e2e8f0; color-scheme: dark; }

    /* Smooth transitions */
    body, body *, body *::before, body *::after {
      transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    /* Skip transitions on SVG paths and decorative elements */
    body svg *, body img { transition: none !important; }

    /* --- Surfaces --- */
    body.dark .bg-white        { background-color: #1e293b !important; }
    body.dark .bg-slate-50     { background-color: #162032 !important; }
    body.dark .bg-slate-100    { background-color: #253347 !important; }
    body.dark .bg-slate-200    { background-color: #334155 !important; }
    body.dark #topbar          { background-color: #1e293b !important; border-color: #334155 !important; }
    #topbar                    { transition: height 0.25s ease; }
    body.dark .modal-box       { background-color: #1e293b !important; }

    /* --- Text --- */
    body.dark .text-slate-900  { color: #f1f5f9 !important; }
    body.dark .text-slate-800  { color: #e2e8f0 !important; }
    body.dark .text-slate-700  { color: #cbd5e1 !important; }
    body.dark .text-slate-600  { color: #94a3b8 !important; }
    body.dark .text-slate-500  { color: #64748b !important; }

    /* --- Borders --- */
    body.dark .border-slate-100 { border-color: #1e293b !important; }
    body.dark .border-slate-200 { border-color: #334155 !important; }
    body.dark .border-slate-300 { border-color: #475569 !important; }

    /* --- Dividers (divide-y, divide-slate-*) --- */
    body.dark [class*="divide-"] > * + * { border-color: #334155 !important; }

    /* --- Hover states --- */
    body.dark .hover\:bg-slate-50:hover   { background-color: #253347 !important; }
    body.dark .hover\:bg-slate-100:hover  { background-color: #334155 !important; }
    body.dark .hover\:bg-slate-200:hover  { background-color: #475569 !important; }
    body.dark .hover\:bg-red-50:hover     { background-color: rgba(239,68,68,0.15) !important; }
    body.dark .hover\:bg-red-100:hover    { background-color: rgba(239,68,68,0.18) !important; }
    body.dark .hover\:bg-orange-50:hover  { background-color: rgba(249,115,22,0.12) !important; }
    body.dark .hover\:bg-amber-50:hover   { background-color: rgba(251,191,36,0.12) !important; }
    body.dark .hover\:bg-amber-50\/60:hover { background-color: rgba(251,191,36,0.12) !important; }
    body.dark .hover\:bg-blue-50:hover    { background-color: rgba(59,130,246,0.12) !important; }
    body.dark .hover\:bg-sky-50:hover     { background-color: rgba(14,165,233,0.12) !important; }
    body.dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,0.12) !important; }
    body.dark .hover\:bg-purple-50:hover  { background-color: rgba(168,85,247,0.12) !important; }
    body.dark .hover\:bg-violet-50:hover  { background-color: rgba(139,92,246,0.12) !important; }

    /* --- Form fields --- */
    body.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    body.dark textarea,
    body.dark select {
      background-color: #0f172a !important;
      border-color: #475569 !important;
      color: #e2e8f0 !important;
    }
    body.dark input::placeholder,
    body.dark textarea::placeholder { color: #64748b !important; }

    /* --- Accent pastel backgrounds (soften in dark) — -50 variants --- */
    body.dark .bg-amber-50  { background-color: rgba(251,191,36,0.10)  !important; }
    body.dark .bg-blue-50   { background-color: rgba(59,130,246,0.10)  !important; }
    body.dark .bg-cyan-50   { background-color: rgba(6,182,212,0.10)   !important; }
    body.dark .bg-sky-50    { background-color: rgba(14,165,233,0.10)  !important; }
    body.dark .bg-teal-50   { background-color: rgba(20,184,166,0.10)  !important; }
    body.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.10)  !important; }
    body.dark .bg-violet-50 { background-color: rgba(139,92,246,0.10)  !important; }
    body.dark .bg-red-50    { background-color: rgba(239,68,68,0.10)   !important; }
    body.dark .bg-orange-50      { background-color: rgba(249,115,22,0.10)  !important; }
    body.dark .bg-orange-50\/60  { background-color: rgba(239,68,68,0.14)   !important; } /* overdue task rows */
    body.dark .bg-green-50,
    body.dark .bg-emerald-50{ background-color: rgba(16,185,129,0.10)  !important; }
    body.dark .bg-purple-50 { background-color: rgba(168,85,247,0.10)  !important; }
    body.dark .bg-yellow-50 { background-color: rgba(234,179,8,0.10)   !important; }

    /* --- Accent borders (calendar staffing toggle, offline banner, etc.) --- */
    body.dark .border-cyan-200   { border-color: rgba(6,182,212,0.35)  !important; }
    body.dark .border-indigo-200 { border-color: rgba(99,102,241,0.40) !important; }
    body.dark .border-blue-200   { border-color: rgba(59,130,246,0.40) !important; }
    body.dark .border-green-200  { border-color: rgba(34,197,94,0.35)  !important; }
    body.dark .border-emerald-200{ border-color: rgba(16,185,129,0.35) !important; }
    body.dark .border-red-200    { border-color: rgba(239,68,68,0.40)  !important; }
    body.dark .border-orange-200 { border-color: rgba(249,115,22,0.40) !important; }
    body.dark .border-purple-200 { border-color: rgba(168,85,247,0.40) !important; }
    body.dark .border-violet-200 { border-color: rgba(139,92,246,0.40) !important; }
    body.dark .border-sky-200    { border-color: rgba(14,165,233,0.40) !important; }

    /* --- Accent pastel backgrounds — -100 variants (branch badges, notification icons, etc.) --- */
    body.dark .bg-red-100     { background-color: rgba(239,68,68,0.18)    !important; }
    body.dark .bg-orange-100  { background-color: rgba(249,115,22,0.18)   !important; }
    body.dark .bg-amber-100   { background-color: rgba(251,191,36,0.15)   !important; }
    body.dark .bg-yellow-100  { background-color: rgba(234,179,8,0.15)    !important; }
    body.dark .bg-green-100   { background-color: rgba(34,197,94,0.18)    !important; }
    body.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.18)   !important; }
    body.dark .bg-teal-100    { background-color: rgba(20,184,166,0.18)   !important; }
    body.dark .bg-sky-100     { background-color: rgba(14,165,233,0.18)   !important; }
    body.dark .bg-blue-100    { background-color: rgba(59,130,246,0.18)   !important; }
    body.dark .bg-indigo-100  { background-color: rgba(99,102,241,0.18)   !important; }
    body.dark .bg-violet-100  { background-color: rgba(139,92,246,0.18)   !important; }
    body.dark .bg-purple-100  { background-color: rgba(168,85,247,0.18)   !important; }

    /* --- Offline banner amber borders --- */
    body.dark .border-amber-200 { border-color: rgba(251,191,36,0.35) !important; }
    body.dark .border-amber-300 { border-color: rgba(251,191,36,0.50) !important; }

    /* -800 text + additional high-chroma variants (lighten for dark bg) */
    body.dark .text-cyan-800   { color: #67e8f9 !important; }
    body.dark .text-lime-800   { color: #bef264 !important; }
    body.dark .text-rose-800   { color: #fda4af !important; }
    body.dark .text-pink-800   { color: #f9a8d4 !important; }
    body.dark .text-fuchsia-800{ color: #f0abfc !important; }
    /* Colored text on pastel backgrounds — lighten so it reads on dark bg */
    body.dark .text-red-800    { color: #fca5a5 !important; }
    body.dark .text-orange-800 { color: #fdba74 !important; }
    body.dark .text-yellow-800 { color: #fde047 !important; }
    body.dark .text-green-800  { color: #86efac !important; }
    body.dark .text-emerald-800{ color: #6ee7b7 !important; }
    body.dark .text-blue-800   { color: #93c5fd !important; }
    body.dark .text-sky-800    { color: #7dd3fc !important; }
    body.dark .text-amber-800  { color: #fcd34d !important; }
    body.dark .text-indigo-800 { color: #a5b4fc !important; }
    body.dark .text-violet-800 { color: #c4b5fd !important; }
    body.dark .text-purple-800 { color: #d8b4fe !important; }
    /* -700 text variants (branch badges, status labels, etc.) */
    body.dark .text-red-700    { color: #fca5a5 !important; }
    body.dark .text-orange-700 { color: #fdba74 !important; }
    body.dark .text-amber-700  { color: #fcd34d !important; }
    body.dark .text-yellow-700 { color: #fde047 !important; }
    body.dark .text-green-700  { color: #86efac !important; }
    body.dark .text-emerald-700{ color: #6ee7b7 !important; }
    body.dark .text-teal-700   { color: #5eead4 !important; }
    body.dark .text-sky-700    { color: #7dd3fc !important; }
    body.dark .text-blue-700   { color: #93c5fd !important; }
    body.dark .text-indigo-700 { color: #a5b4fc !important; }
    body.dark .text-violet-700 { color: #c4b5fd !important; }
    body.dark .text-purple-700 { color: #d8b4fe !important; }
    /* Mid-range colored text (urgency bar, due date labels) */
    body.dark .text-red-600    { color: #f87171 !important; }
    body.dark .text-red-900    { color: #fca5a5 !important; }
    body.dark .text-yellow-600 { color: #facc15 !important; }
    body.dark .text-green-600  { color: #4ade80 !important; }
    body.dark .text-amber-600  { color: #fbbf24 !important; }
    body.dark .text-orange-600 { color: #fb923c !important; }
    body.dark .text-orange-500 { color: #f97316 !important; }
    body.dark .text-blue-600   { color: #60a5fa !important; }
    body.dark .text-indigo-600 { color: #818cf8 !important; }
    body.dark .text-violet-600 { color: #a78bfa !important; }
    body.dark .text-cyan-600   { color: #22d3ee !important; }
    body.dark .text-sky-600    { color: #38bdf8 !important; }
    /* Priority badges — solid pastel background + dark text so it's always readable */
    body.dark .priority-badge                    { color: #0f172a !important; }
    body.dark .priority-badge.bg-red-100         { background-color: #fecaca !important; border-color: #fca5a5 !important; }
    body.dark .priority-badge.bg-orange-100      { background-color: #fed7aa !important; border-color: #fdba74 !important; }
    body.dark .priority-badge.bg-yellow-100      { background-color: #fef08a !important; border-color: #fde047 !important; }
    body.dark .priority-badge.bg-green-100       { background-color: #bbf7d0 !important; border-color: #86efac !important; }

    /* --- kbd (keyboard shortcut pill) dark mode --- */
    body.dark kbd {
      background: #334155 !important; border-color: #475569 !important;
      color: #e2e8f0 !important; box-shadow: 0 1px 0 #64748b !important;
    }

    /* --- HUD Clock sub-labels (always on dark clock bg — make them readable) --- */
    #clock-date { color: #94a3b8; }
    #clock-ampm { color: #22d3ee; }

    /* Gradient backgrounds (background-image — not caught by bg-* overrides) */
    body.dark .from-slate-50 { --tw-gradient-from: #253347 !important; }
    body.dark .from-white    { --tw-gradient-from: #1e293b !important; }
    body.dark .to-white      { --tw-gradient-to:   #1e293b !important; }
    body.dark .to-slate-50   { --tw-gradient-to:   #253347 !important; }

    /* --- Scrollbars --- */
    body.dark ::-webkit-scrollbar-track { background: #0f172a; }
    body.dark ::-webkit-scrollbar-thumb { background: #334155; }
    body.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
    /* Sidebar always uses dark scrollbar regardless of day/night mode */
    #sidebar ::-webkit-scrollbar-track { background: #0f172a !important; }
    #sidebar ::-webkit-scrollbar-thumb { background: #334155 !important; }
    #sidebar ::-webkit-scrollbar-thumb:hover { background: #475569 !important; }

    /* --- Print: force light mode regardless of dark toggle --- */
    @media print {
      body.dark, body.dark * { background-color: unset !important; color: unset !important; border-color: unset !important; }
    }

    /* ── Division Calendar — base styles ── */
    .cal-card          { background:#fff; border:1px solid #e2e8f0; box-shadow:0 0 40px rgba(99,102,241,0.05),0 4px 6px -1px rgba(0,0,0,0.04); }
    .cal-hdr           { background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0c1f3a 100%); }
    .cal-day-hdr-row   { background:#f8fafc; border-bottom:1px solid rgba(99,102,241,0.12); }
    .cal-wkday-hdr-txt { color:#475569; }
    .cal-wknd-hdr-txt  { color:#94a3b8; }
    .cal-grid-body     { border-left:1px solid #f1f5f9; border-top:1px solid #f1f5f9; }
    .cal-cell-border   { border-color:#f1f5f9; }
    .cal-wknd-cell     { background:rgba(248,250,252,0.85); }
    .cal-day-num       { color:#374151; }
    .cal-day-num-oom   { color:#cbd5e1; }
    .cal-pill          { transition:filter .15s; }
    .cal-pill:hover    { filter:brightness(1.15); }
    .cal-legend-strip  { background:#fff; border:1px solid #e2e8f0; }
    .cal-legend-label  { color:#94a3b8; }
    .cal-legend-pill   { }
    .cal-sb-card       { background:#fff; border:1px solid #e2e8f0; }
    .cal-sb-hdr        { background:linear-gradient(135deg,#1e293b,#334155); }
    .cal-sb-divider    { border-bottom:1px solid #f1f5f9; }
    .cal-sb-divider:last-child { border-bottom:none; }
    .cal-overdue-body  { background:#fef2f2; }
    .cal-overdue-row   { border-bottom:1px solid #fee2e2; }
    .cal-overdue-row:last-child { border-bottom:none; }

    /* ── Division Calendar — dark mode ── */
    body.dark .cal-card        { background:#1e293b !important; border-color:#334155 !important; box-shadow:0 0 40px rgba(99,102,241,0.10),0 4px 6px -1px rgba(0,0,0,0.35) !important; }
    body.dark .cal-day-hdr-row { background:#0f172a !important; border-color:rgba(99,102,241,0.18) !important; }
    body.dark .cal-wkday-hdr-txt { color:#64748b !important; }
    body.dark .cal-wknd-hdr-txt  { color:#334155 !important; }
    body.dark .cal-grid-body   { border-color:#253347 !important; }
    body.dark .cal-cell-border { border-color:#253347 !important; }
    body.dark .cal-wknd-cell   { background:rgba(10,20,40,0.55) !important; }
    body.dark .cal-day-num     { color:#cbd5e1 !important; }
    body.dark .cal-day-num-oom { color:#2d3f55 !important; }
    body.dark .cal-legend-strip { background:#1e293b !important; border-color:#334155 !important; }
    body.dark .cal-legend-label { color:#475569 !important; }
    body.dark .cal-sb-card     { background:#1e293b !important; border-color:#334155 !important; }
    body.dark .cal-sb-divider  { border-color:#253347 !important; }
    body.dark .cal-overdue-body { background:rgba(239,68,68,0.07) !important; }
    body.dark .cal-overdue-row { border-color:rgba(239,68,68,0.12) !important; }
    body.dark .text-red-700    { color:#fca5a5 !important; }
    /* Calendar pill notes sub-line */
    .cal-pill-notes            { color:#334155; font-style:italic; }
    body.dark .cal-pill-notes  { color:rgba(255,255,255,0.65) !important; }

    /* Calendar filter bar (above the date grid) — light strip in day mode,
       dark navy in night mode. Replaces a hardcoded inline #0f172a that
       previously rendered as a dark stripe on the light background. */
    .cal-filter-bar            { background:#f1f5f9; }
    body.dark .cal-filter-bar  { background:#0f172a !important; }

    #content.mbd-fullbleed { padding: 0 !important; }
    /* ===== MEMBER DASHBOARD ===== */
    /* -- Theme variables (Night / dark-mode defaults) -- */
    .mbd-root {
      --mbd-bg:           #07091a;
      --mbd-card-bg:      rgba(8,14,36,0.95);
      --mbd-card-border:  rgba(56,189,248,0.16);
      --mbd-scan:         rgba(56,189,248,0.01);
      --mbd-accent:       rgba(56,189,248,0.5);
      --mbd-faint:        rgba(56,189,248,0.035);
      --mbd-cell-bg:      rgba(56,189,248,0.02);
      --mbd-cell-bdr:     rgba(56,189,248,0.07);
      --mbd-cell-div:     rgba(56,189,248,0.06);
      --mbd-today-bdr:    rgba(56,189,248,0.30);
      --mbd-today-bg:     rgba(56,189,248,0.055);
      --mbd-today-date:   #38bdf8;
      --mbd-glow:         0 0 22px rgba(56,189,248,0.4),0 0 8px rgba(56,189,248,0.2);
      --mbd-dot:          rgba(56,189,248,0.8);
      --mbd-badge-bg:     rgba(56,189,248,0.08);
      --mbd-badge-fg:     rgba(56,189,248,0.7);
      --mbd-prog:         rgba(56,189,248,0.55);
      display: flex; gap: 0.75rem; padding: 0.75rem;
      background: var(--mbd-bg); min-height: calc(100vh - 4rem);
      overflow-x: hidden; overflow-y: auto;
      font-family: 'SF Mono','Fira Code','Consolas','Courier New',monospace;
      transition: background 0.3s ease;
    }
    /* -- Day/light mode override (toggle = Day) -- */
    body:not(.dark) .mbd-root {
      --mbd-bg:          #ffffff;
      --mbd-card-bg:     rgba(15,35,75,0.95);
      --mbd-card-border: rgba(96,165,250,0.2);
      --mbd-scan:        rgba(96,165,250,0.012);
      --mbd-accent:      rgba(96,165,250,0.6);
      --mbd-faint:       rgba(96,165,250,0.04);
      --mbd-cell-bg:     rgba(96,165,250,0.025);
      --mbd-cell-bdr:    rgba(96,165,250,0.08);
      --mbd-cell-div:    rgba(96,165,250,0.07);
      --mbd-today-bdr:   rgba(96,165,250,0.32);
      --mbd-today-bg:    rgba(96,165,250,0.06);
      --mbd-today-date:  #60a5fa;
      --mbd-glow:        0 0 22px rgba(96,165,250,0.35),0 0 8px rgba(96,165,250,0.18);
      --mbd-dot:         rgba(96,165,250,0.85);
      --mbd-badge-bg:    rgba(96,165,250,0.1);
      --mbd-badge-fg:    rgba(96,165,250,0.75);
      --mbd-prog:        rgba(96,165,250,0.6);
    }
    /* -- Layout -- (tightened so the dashboard fits 1080p without scroll) */
    .mbd-left  { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.55rem; }
    .mbd-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; }
    /* -- Card -- */
    .mbd-card {
      background: var(--mbd-card-bg);
      border: 1px solid var(--mbd-card-border); border-radius: 10px;
      padding: 0.6rem 0.8rem;
      box-shadow: 0 0 28px rgba(0,0,0,0.2), 0 6px 24px rgba(0,0,0,0.55);
      position: relative; overflow: hidden;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    .mbd-card::after {
      content: ''; position: absolute; inset: 0;
      background: repeating-linear-gradient(0deg, transparent, transparent 3px, var(--mbd-scan) 3px, var(--mbd-scan) 4px);
      pointer-events: none;
    }
    .mbd-card-title {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
      color: var(--mbd-accent); text-transform: uppercase; margin-bottom: 0.4rem;
      transition: color 0.3s ease;
    }
    /* -- Clock -- */
    .mbd-clock-time {
      font-size: 2.4rem; font-weight: 900; color: #fff;
      letter-spacing: -0.02em; line-height: 1;
      text-shadow: var(--mbd-glow);
      transition: text-shadow 0.3s ease;
    }
    .mbd-clock-date { font-size: 0.82rem; color: rgba(255,255,255,0.9); margin-top: 0.3rem; letter-spacing: 0.04em; }
    /* -- Weather -- */
    .mbd-wx-temp  { font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1; }
    .mbd-wx-icon  { font-size: 2rem; line-height: 1; }
    .mbd-wx-cond  { font-size: 0.78rem; color: #ffffff; margin-top: 0.1rem; }
    .mbd-wx-feels { font-size: 0.72rem; color: rgba(255,255,255,0.85); }
    .mbd-wx-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 0.65rem; margin-top: 0.4rem; font-size: 0.7rem; color: rgba(255,255,255,0.9); }
    .mbd-wx-hourly { display: flex; gap: 0.2rem; margin-top: 0.7rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .mbd-wx-hourly::-webkit-scrollbar { display: none; }
    .mbd-wx-hour {
      flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
      gap: 2px; min-width: 38px; font-size: 0.72rem; color: rgba(255,255,255,0.9);
      background: var(--mbd-faint); border-radius: 5px; padding: 3px 2px;
    }
    .mbd-wx-hour-time { color: var(--mbd-accent); font-size: 0.68rem; font-weight: 700; }
    .mbd-wx-forecast { display: flex; gap: 0.2rem; margin-top: 0.6rem; }
    .mbd-wx-fday {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 2px; font-size: 0.72rem; color: rgba(255,255,255,0.9);
      background: var(--mbd-faint); border-radius: 5px; padding: 5px 2px;
    }
    .mbd-wx-fday-label { color: var(--mbd-accent); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; }
    /* -- Weather slider -- */
    .mbd-wx-slider-wrap { overflow: hidden; position: relative; }
    .mbd-wx-slider { display: flex; will-change: transform; transition: transform 0.95s cubic-bezier(0.25,0.46,0.45,0.94); }
    .mbd-wx-slide  { flex-shrink: 0; width: 100%; }
    .mbd-wx-dot    { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: background 0.3s, transform 0.3s; cursor: pointer; }
    .mbd-wx-dot.active { background: var(--mbd-dot); transform: scale(1.3); }
    @keyframes mbd-wx-prog { from{width:0%} to{width:100%} }
    /* Calendar subscribe button glow */
    .cal-subscribe-btn { animation: calSubGlow 2.5s ease-in-out infinite; }
    @keyframes calSubGlow {
      0%,100% { box-shadow: 0 0 6px 1px rgba(239,68,68,0.45), 0 0 0 1px rgba(239,68,68,0.5); }
      50%      { box-shadow: 0 0 14px 3px rgba(239,68,68,0.7), 0 0 0 1px rgba(239,68,68,0.8); }
    }
    /* -- AQI -- */
    .mbd-aqi-row { display: grid; grid-template-columns: minmax(82px, max-content) auto 1fr; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
    .mbd-aqi-row:last-child { margin-bottom: 0; }
    .mbd-aqi-badge { min-width: 38px; padding: 2px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-align: center; color: #04060f; white-space: nowrap; }
    .mbd-aqi-loc { font-size: 0.75rem; color: rgba(255,255,255,0.9); line-height: 1.35; white-space: nowrap; }
    .mbd-aqi-bar-wrap { min-width: 0; }
    .mbd-aqi-bar  { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.05); overflow: hidden; margin-bottom: 3px; }
    .mbd-aqi-fill { height: 100%; border-radius: 2px; }
    .mbd-aqi-label { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* -- Heat & UV -- */
    .mbd-huv-row { display: grid; grid-template-columns: minmax(82px, max-content) 1fr 1fr; align-items: center; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .mbd-huv-row:last-child { border-bottom: none; }
    .mbd-huv-loc { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.9); white-space: nowrap; }
    .mbd-huv-stat { display: flex; flex-direction: column; min-width: 0; }
    .mbd-huv-label { font-size: 0.68rem; color: rgba(255,255,255,0.55); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mbd-huv-val { font-size: 0.85rem; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
    .mbd-huv-val > span { white-space: nowrap; }
    /* Heat index danger (>100°F) */
    .mbd-huv-row.hi-danger { border-radius: 6px; margin: 1px 0; border-bottom: 1px solid rgba(239,68,68,0.3); animation: hiDangerRow 1.2s ease-in-out infinite; }
    .mbd-huv-row.hi-danger:last-child { border-bottom: 1px solid rgba(239,68,68,0.3); }
    @keyframes hiDangerRow {
      0%,100% { background: rgba(239,68,68,0.08); box-shadow: none; }
      50%      { background: rgba(239,68,68,0.28); box-shadow: 0 0 12px 2px rgba(239,68,68,0.5); }
    }
    .mbd-huv-val.hi-danger-val { animation: hiDangerVal 1.2s ease-in-out infinite; }
    @keyframes hiDangerVal {
      0%,100% { color: #fca5a5; text-shadow: 0 0 4px rgba(239,68,68,0.4); }
      50%      { color: #ff2020; text-shadow: 0 0 10px rgba(239,68,68,1), 0 0 20px rgba(239,68,68,0.7); }
    }
    /* -- Tasks -- */
    .mbd-task-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.75rem; transition: background 0.15s; border-radius: 4px; }
    .mbd-task-row:hover { background: rgba(56,189,248,0.08); }
    .mbd-task-row:last-child { border-bottom: none; }
    /* -- Task Detail Modal -- */
    .mbd-detail-section { display: flex; flex-direction: column; gap: 6px; }
    .mbd-detail-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; opacity: 0.5; }
    .mbd-detail-text { font-size: 0.78rem; line-height: 1.5; opacity: 0.85; white-space: pre-wrap; }
    .mbd-task-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffff; }
    .mbd-task-badge { font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; background: var(--mbd-badge-bg); color: var(--mbd-badge-fg); white-space: nowrap; flex-shrink: 0; transition: background 0.3s, color 0.3s; }
    .mbd-task-badge.overdue { background: rgba(239,68,68,0.12) !important; color: #fca5a5 !important; }
    .mbd-tasks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    /* -- Schedule -- */
    .mbd-sch-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; }
    .mbd-sch-cell { min-width: 0; background: var(--mbd-cell-bg); border: 1px solid var(--mbd-cell-bdr); border-radius: 5px; padding: 4px 5px; min-height: 68px; transition: background 0.3s, border-color 0.3s; }
    .mbd-sch-today { border-color: var(--mbd-today-bdr) !important; background: var(--mbd-today-bg) !important; }
    .mbd-sch-wknd  { background: rgba(0,0,0,0.18) !important; }
    .mbd-sch-cell-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--mbd-cell-div); }
    .mbd-sch-day  { font-size: 0.6rem; font-weight: 700; color: var(--mbd-accent); letter-spacing: 0.08em; transition: color 0.3s; }
    .mbd-sch-date { font-size: 0.65rem; color: rgba(255,255,255,0.85); }
    .mbd-sch-today .mbd-sch-date { color: var(--mbd-today-date); font-weight: 700; }
    .mbd-sch-pills { display: flex; flex-direction: column; gap: 2px; }
    .mbd-sch-pill { border: 1px solid; border-radius: 3px; padding: 2px 4px; font-size: 0.7rem; cursor: default; line-height: 1.35; min-width: 0; }
    .mbd-sch-mine { animation: mbd-glow 2.5s ease-in-out infinite; }
    @keyframes mbd-glow { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.3)} }
    .mbd-sch-staff { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.9); white-space: normal; word-break: break-word; }
    .mbd-sch-you   { display: block; font-size: 0.7rem; color: #fbbf24; font-weight: 700; white-space: normal; word-break: break-word; }
    .mbd-sch-empty { font-size: 0.7rem; color: rgba(255,255,255,0.3); }
    /* -- Responsive -- */
    @media (max-width: 900px) {
      .mbd-root { flex-direction: column; padding: 0.75rem; }
      .mbd-left { width: 100%; }
      .mbd-sch-grid { grid-template-columns: repeat(4, 1fr); }
      .mbd-tasks-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .mbd-sch-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ===== CREDENTIAL TRACKER ===== */
    .ct-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
    body.dark .ct-table-wrap { border-color: #334155; }
    .ct-table { border-collapse: collapse; min-width: 100%; font-size: 0.75rem; }
    .ct-table thead { position: sticky; top: 0; z-index: 2; }
    .ct-cat-hdr {
      padding: 6px 8px; text-align: center; font-size: 0.6rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.12em; color: #fff;
      background: #334155; border: 1px solid #475569; white-space: nowrap;
    }
    body.dark .ct-cat-hdr { background: #1e293b; border-color: #334155; }
    .ct-cert-hdr {
      padding: 4px 6px; text-align: center; font-size: 0.58rem; font-weight: 700;
      color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0;
      white-space: nowrap; min-width: 72px; max-width: 110px;
    }
    .ct-cert-hdr span { display: block; overflow: hidden; text-overflow: ellipsis; }
    body.dark .ct-cert-hdr { background: #0f172a; color: #94a3b8; border-color: #334155; }
    .ct-corner, .ct-corner-name {
      position: sticky; left: 0; z-index: 3;
      background: #f8fafc; border: 1px solid #e2e8f0; padding: 4px 10px;
      font-size: 0.6rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em;
    }
    .ct-corner { background: #334155; border-color: #475569; }
    body.dark .ct-corner { background: #1e293b; border-color: #334155; }
    body.dark .ct-corner-name { background: #0f172a; color: #94a3b8; border-color: #334155; }
    .ct-name-cell {
      position: sticky; left: 0; z-index: 1;
      background: #fff; border: 1px solid #e2e8f0; padding: 5px 10px; min-width: 140px; white-space: nowrap;
    }
    body.dark .ct-name-cell { background: #1e293b; border-color: #334155; }
    .ct-name { font-size: 0.72rem; font-weight: 700; color: #1e293b; }
    body.dark .ct-name { color: #e2e8f0; }
    .ct-role { font-size: 0.55rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; }
    .ct-cell {
      border: 1px solid #e2e8f0; padding: 4px 5px; text-align: center;
      min-width: 72px; transition: background 0.15s;
    }
    .ct-cell:hover { filter: brightness(1.15); }
    body.dark .ct-cell { border-color: #334155; }

    /* Panel wrapper — overflow:hidden clips table corners against border-radius */
    .ct-panel-wrap { overflow: hidden; border-radius: 10px; border: 1px solid #e2e8f0; }
    body.dark .ct-panel-wrap { border-color: #334155; }

    /* Rank group header row */
    .ct-group-hdr td {
      background: #dbeafe; color: #1d4ed8;
      font-size: 0.6rem; font-weight: 800;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 5px 10px; border-color: #93c5fd;
    }
    body.dark .ct-group-hdr td {
      background: #172554; color: #93c5fd;
      border-color: #1e3a8a;
    }

    /* Member row — stronger horizontal separator */
    tr.ct-member-row td { border-bottom: 1px solid #cbd5e1; }
    body.dark tr.ct-member-row td { border-bottom: 1px solid #475569; }

    /* ===== THUMBS-UP REACTION TOOLTIP ===== */
    .thumbwrap { position: relative; display: inline-flex; align-items: center; }
    .thumbtip {
      display: none;
      position: absolute;
      bottom: calc(100% + 7px);
      left: 50%;
      transform: translateX(-50%);
      background: #1e293b;
      color: #f1f5f9;
      font-size: 0.65rem;
      font-weight: 500;
      line-height: 1.4;
      padding: 5px 9px;
      border-radius: 7px;
      white-space: normal;
      max-width: 200px;
      text-align: center;
      z-index: 200;
      pointer-events: none;
      box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    }
    .thumbtip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #1e293b;
    }
    .thumbwrap:hover .thumbtip { display: block; }

    /* Training Rosters: roster-list row hover/active (was inline JS, but
       inline onmouseover broke iOS taps — first tap fired only the hover
       event, never the click).  Pure CSS works on both desktop and touch. */
    .tr-roster-row:hover {
      background: rgba(56,189,248,0.12) !important;
      border-color: #38bdf8 !important;
      box-shadow: 0 0 16px rgba(56,189,248,0.18);
    }
    .tr-roster-row:active {
      background: rgba(56,189,248,0.22) !important;
      transform: scale(0.997);
    }

    /* ── Training Rosters: mobile responsive ─────────────────────────────
       Phones can't run the kiosk in its full 2-column tablet layout. We
       collapse it to a single scrollable column and reformat the landing
       roster rows into a card-style stack. */
    @media (max-width: 768px) {
      /* Kiosk: drop the position:absolute takeover and let the page scroll */
      .tr-kiosk {
        position: static !important;
        height: auto !important;
        min-height: calc(100vh - 4rem) !important;
        overflow: visible !important;
      }
      body main#content {
        position: static !important;
        overflow: auto !important;
      }
      .tr-kiosk-main {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
      }
      .tr-kiosk-header-panel {
        border-right: none !important;
        border-bottom: 1px solid rgba(56,189,248,0.18) !important;
        overflow: visible !important;
      }
      .tr-kiosk-right { overflow: visible !important; }
      #tr-k-attendees {
        overflow: visible !important;
        flex: none !important;
        min-height: 280px;
      }
      /* Top-bar action buttons wrap onto multiple lines on narrow screens */
      .tr-kiosk-topbar { flex-wrap: wrap !important; gap: 0.45rem !important; }

      /* Landing/archive roster rows: collapse to a 2-row card layout */
      .tr-roster-row {
        grid-template-columns: 70px 1fr auto !important;
        grid-template-areas:
          "date title status"
          "ops  ops   actions" !important;
        gap: 0.35rem 0.55rem !important;
        padding: 0.7rem 0.75rem !important;
      }
      /* Mobile: fix the iOS double-tap bug on radio buttons by removing the
         300ms tap delay.  Without touch-action:manipulation, iOS Safari can
         consume the first tap as a "phantom hover" and ignore the click. */
      .tr-radio-btn { touch-action: manipulation; -webkit-tap-highlight-color: rgba(56,189,248,0.25); }
      .tr-roster-row > .tr-rr-cat,
      .tr-roster-row > .tr-rr-att,
      .tr-roster-row > .tr-rr-arrow { display: none !important; }
      .tr-roster-row > .tr-rr-date    { grid-area: date; }
      .tr-roster-row > .tr-rr-title   { grid-area: title; white-space: normal !important; }
      .tr-roster-row > .tr-rr-status  { grid-area: status; }
      .tr-roster-row > .tr-rr-ops     { grid-area: ops; justify-self: start !important; max-width: max-content; }
      .tr-roster-row > .tr-rr-actions { grid-area: actions; display: flex; gap: 0.35rem; align-items: center; }
    }

    /* ── Training Evals: PDF print view ───────────────────────────────────
       Mirrors the official PSO Training Evaluation form (1 page, optional
       continuation page). Normally hidden; only visible inside print. */
    #te-print-doc { display: none; }
    @media print {
      /* Only hide the rest of the page when WE have content to print —
         otherwise leave the dashboard / lesson-plan / other prints alone. */
      body:has(#te-print-doc:not(:empty)) > *:not(#te-print-doc) { display: none !important; }
      #te-print-doc:not(:empty) { display: block !important; }
      .te-pr-page { font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 11pt; line-height: 1.35; }
      .te-pr-headerline { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 4pt; }
      .te-pr-org { font-size: 11pt; }
      .te-pr-title { font-size: 16pt; font-weight: 700; font-style: italic; letter-spacing: 0.04em; }
      .te-pr-rule { border-top: 1pt solid #000; margin: 0 0 12pt; }
      .te-pr-desc { font-size: 9.5pt; line-height: 1.4; margin-bottom: 18pt; text-align: justify; }
      .te-pr-namerow { display: grid; grid-template-columns: 1fr 1fr 1fr 0.7fr; column-gap: 12pt; align-items: end; margin-bottom: 2pt; }
      .te-pr-fill { border-bottom: 0.7pt solid #000; min-height: 14pt; padding: 0 4pt; }
      .te-pr-namelabels { display: grid; grid-template-columns: 1fr 1fr 1fr 0.7fr; column-gap: 12pt; font-size: 8pt; margin-bottom: 14pt; }
      .te-pr-namelabels > span:first-child { padding-left: 0; }
      .te-pr-section { margin-top: 10pt; }
      .te-pr-section-label { font-size: 10pt; margin-bottom: 3pt; }
      .te-pr-box { border: 0.7pt solid #000; padding: 6pt; min-height: 100pt; font-size: 10pt; white-space: pre-wrap; word-wrap: break-word; }
      .te-pr-box-large { min-height: 320pt; }
      /* Keep signatures together — flows to next page if Insights box pushes them off */
      .te-pr-sigblock { page-break-inside: avoid; break-inside: avoid; margin-top: 14pt; }
      .te-pr-sigrow { display: grid; grid-template-columns: 2.2fr 0.6fr 2.2fr 0.6fr; column-gap: 10pt; }
      .te-pr-sigline { border-bottom: 0.7pt solid #000; min-height: 14pt; padding: 0 4pt; }
      .te-pr-siglabel { font-size: 8.5pt; font-style: italic; font-weight: 700; margin-top: 2pt; }
      .te-pr-footer { font-size: 7pt; color: #555; margin-top: 14pt; }
    }

    /* ── Requisitions: PDF print view ─────────────────────────────────────
       Pixel-mirrors the official PSO Requisition for Supplies & Services
       form (PSO# 20025). Normally hidden; only visible inside print.
       Tuned to ALWAYS fit on a single Letter page — even when the user's
       browser has "Headers and footers" turned on, which eats ~0.5in of
       vertical space top + bottom. */
    #req-print-doc { display: none; }
    @media print {
      body:has(#req-print-doc:not(:empty)) > *:not(#req-print-doc) { display: none !important; }
      #req-print-doc:not(:empty) { display: block !important; }
      @page { size: letter; margin: 0.3in; }
      html, body { background: #fff !important; color: #000 !important; }
      /* Force browser to preserve background colors / text colors / borders
         when printing. Without this, Chrome/Safari/Edge strip the black
         banners, yellow text, and red borders by default. Applying it to
         every element inside the print container guarantees coverage. */
      #req-print-doc, #req-print-doc * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
      }
      /* One-page lock: page-break rules tell the browser to keep the form
         together. NO overflow:hidden / max-height — those clip the footer
         instead of preventing breaks (Chrome ignores them during print
         pagination anyway). */
      .req-pr-page {
        font-family: Arial, Helvetica, sans-serif;
        color: #000;
        font-size: 8.5pt;
        line-height: 1.22;
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-after: avoid;
      }

      /* Header */
      .req-pr-headerline { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4pt; }
      .req-pr-org { font-size: 11pt; }
      .req-pr-title { font-size: 14pt; }
      .req-pr-title b { font-weight: 700; }

      /* Top section: 2-column grid — checkboxes on LEFT, banner stacked over
         REQUISITION NO./DATE/(Outside Purchase Only) on RIGHT */
      .req-pr-toprow { display: grid; grid-template-columns: 1fr 1.55fr; column-gap: 10pt; margin-bottom: 3pt; align-items: start; }
      .req-pr-types { font-size: 9pt; padding-top: 2pt; }
      .req-pr-typeline { margin-bottom: 2pt; line-height: 1.25; }
      .req-pr-typesub { margin-left: 14pt; margin-top: -1pt; margin-bottom: 2pt; }
      .req-pr-ck { display: inline-block; width: 11pt; font-size: 12pt; line-height: 1; vertical-align: middle; }
      .req-pr-ck-on { font-weight: 700; }
      .req-pr-rightcol { display: flex; flex-direction: column; }
      .req-pr-desc-banner { background: #000; color: #fff; padding: 4pt 8pt; margin-bottom: 4pt; }
      .req-pr-desc-title { color: #f0c419; font-size: 10pt; text-align: center; margin-bottom: 1pt; }
      .req-pr-desc-note { color: #f0c419; font-size: 8pt; line-height: 1.25; }
      /* Inside right column the REQ NO + DATE row needs different proportions */
      .req-pr-rightcol .req-pr-line-rn { grid-template-columns: 1.4fr 1fr; column-gap: 12pt; }
      .req-pr-rightcol .req-pr-subline { margin-left: 76pt; }

      /* Lines (label + fill-in) — grid-based, never wraps */
      .req-pr-line { display: grid; align-items: end; column-gap: 14pt; margin: 1.5pt 0; font-size: 9pt; }
      .req-pr-line-rn  { grid-template-columns: 1.4fr 1fr; }
      .req-pr-line-csa { grid-template-columns: 1fr 1.6fr 1.1fr; }
      .req-pr-line-rdt { grid-template-columns: 1.55fr 2fr 0.65fr; }
      .req-pr-cell { display: flex; align-items: baseline; gap: 4pt; min-width: 0; }
      .req-pr-lbl { white-space: nowrap; flex: 0 0 auto; font-weight: 400; font-size: 9pt; }
      .req-pr-fill {
        display: inline-block;
        flex: 1 1 0;
        min-width: 0;
        border-bottom: 0.6pt solid #000;
        padding: 0 2pt;
        min-height: 10pt;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
      }
      .req-pr-subline { font-size: 7pt; margin: 0 0 2pt 78pt; line-height: 1; }

      /* Federal Forfeiture warning */
      .req-pr-fed { color: #c00; font-weight: 700; font-size: 9pt; text-align: center; margin: 4pt 0 2pt; }

      /* Items table */
      .req-pr-table { width: 100%; border-collapse: collapse; font-size: 8pt; table-layout: fixed; }
      .req-pr-table th, .req-pr-table td { border: 0.5pt solid #000; padding: 2pt 3pt; vertical-align: top; height: 14pt; }
      .req-pr-table th { background: #e5e7eb; text-align: center; font-size: 7.5pt; font-weight: 700; line-height: 1.1; }
      .req-pr-table .w-qty { width: 5%; }
      .req-pr-table .w-unit { width: 9%; }
      .req-pr-table .w-com { width: 11%; }
      .req-pr-table .w-part { width: 11%; }
      .req-pr-table .w-num { width: 10%; }
      .req-pr-num { text-align: right; font-variant-numeric: tabular-nums; }
      .req-pr-desc-cell { word-break: break-word; }

      /* Reason / shipping / total */
      .req-pr-reason-tbl { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
      .req-pr-reason-tbl td { border: 0.5pt solid #000; padding: 3pt 4pt; vertical-align: top; }
      .req-pr-reason-cell { width: 80%; height: 38pt; }
      .req-pr-reason-lbl { margin-bottom: 2pt; }
      .req-pr-reason-body { white-space: pre-wrap; word-wrap: break-word; font-size: 8.5pt; }
      .req-pr-ship-lbl { width: 12%; text-align: center; font-size: 7.5pt; font-weight: 700; line-height: 1.1; }
      .req-pr-ship-val { width: 8%; text-align: right; font-variant-numeric: tabular-nums; }
      .req-pr-total-lbl { text-align: center; font-weight: 700; }
      .req-pr-total-val { text-align: right; font-variant-numeric: tabular-nums; }

      /* Vendor row */
      .req-pr-vendor-tbl { width: 100%; border-collapse: collapse; font-size: 8.5pt; margin-top: 0; }
      .req-pr-vendor-tbl th, .req-pr-vendor-tbl td { border: 0.5pt solid #000; padding: 3pt 4pt; vertical-align: top; }
      .req-pr-vendor-tbl th { background: #fff; font-size: 7.5pt; text-align: left; font-weight: 700; }
      .req-pr-vendor-tbl .w-vno { width: 10%; }
      .req-pr-vendor-tbl .w-vph { width: 14%; }
      .req-pr-vendor-tbl .w-vfx { width: 12%; }
      .req-pr-vname { white-space: pre-wrap; }

      /* Quote list */
      .req-pr-quote-banner { background: #000; color: #fff; text-align: center; font-weight: 700; font-size: 11pt; padding: 3pt; margin-top: 4pt; letter-spacing: 0.06em; }
      .req-pr-quote-sub { font-size: 8pt; padding: 2pt 4pt; border-bottom: 0.5pt solid #000; border-left: 0.5pt solid #000; border-right: 0.5pt solid #000; }
      .req-pr-quote-tbl { width: 100%; border-collapse: collapse; font-size: 8pt; }
      .req-pr-quote-tbl th, .req-pr-quote-tbl td { border: 0.5pt solid #000; padding: 3pt 3pt; vertical-align: middle; height: 17pt; }
      .req-pr-quote-tbl th { background: #fff; font-size: 7.5pt; text-align: center; font-weight: 700; }
      .req-pr-quote-tbl .w-q-n { width: 4%; text-align: center; }
      .req-pr-quote-tbl .w-q-d { width: 9%; }

      /* Approvals — visually each row is two big cells:
           [LABEL ........ sig ........ DATE __input space__]
           [DIS   ........ sig ........ DATE __input space__]
         Implemented as a 4-column table where borders between label
         and sig cells are removed, so they read as one merged cell.
         DATE label is absolute-positioned to the bottom of the sig
         cell, well-left of the right edge, so an Adobe date form
         field drops in to the right of it. */
      .req-pr-appr-tbl { width: 100%; border-collapse: collapse; font-size: 8pt; margin-top: 0; table-layout: fixed; }
      .req-pr-appr-tbl td { border: 0.5pt solid #000; padding: 4pt 5pt; vertical-align: top; height: 30pt; position: relative; }
      /* white-space: nowrap stops "BUREAU COMMANDER" from wrapping to two
         lines (which made that row taller than the rest); the explicit
         <br> in the HTML still breaks line 2 below the bold label. */
      .req-pr-appr-lbl  { width: 17%; font-size: 8pt; line-height: 1.2; border-right: none !important; white-space: nowrap; }
      .req-pr-appr-dis  { width: 17%; font-size: 8pt; line-height: 1.2; border-right: none !important; white-space: nowrap; }
      /* Sig cells lose their LEFT border so the label visually merges in. */
      .req-pr-appr-lbl + .req-pr-appr-fill,
      .req-pr-appr-dis + .req-pr-appr-fill { border-left: none !important; }
      .req-pr-appr-fill { width: 33%; }
      /* DATE label — absolute-positioned, bottom of the cell, ~95pt from
         the right border. Big empty rectangle to the right is the Adobe
         date-stamp landing zone. */
      .req-pr-appr-datelbl {
        position: absolute !important;
        bottom: 3pt !important;
        right: 65pt !important;
        font-size: 8pt;
        font-weight: 700;
        letter-spacing: 0.02em;
      }

      /* Red note + footer.  page-break-inside: avoid keeps both lines of
         the rednote together so they can't split across two pages. */
      .req-pr-rednote {
        border: 1pt solid #c00; color: #c00;
        padding: 3pt 6pt; margin-top: 3pt;
        font-size: 8.5pt; font-weight: 700; text-align: center; line-height: 1.25;
        page-break-inside: avoid; break-inside: avoid;
      }
      .req-pr-footer-line { font-size: 7.5pt; margin-top: 3pt; }
    }

    /* ── Training Rosters: PDF print view ─────────────────────────────────
       Mirrors the official PSO Training Roster form. Normally hidden;
       only visible inside print. */
    #tr-print-roster { display: none; }
    @media print {
      /* Only hide the rest of the page when WE have content to print —
         otherwise leave the dashboard / lesson-plan / other prints alone. */
      body:has(#tr-print-roster:not(:empty)) > *:not(#tr-print-roster) { display: none !important; }
      #tr-print-roster:not(:empty) { display: block !important; }
      @page { size: letter; margin: 0.4in; }
      html, body { background: #fff !important; color: #000 !important; }
      .tr-pr-page { font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 9pt; line-height: 1.25; }
      .tr-pr-headerline { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:6pt; }
      .tr-pr-org { font-size: 10pt; }
      .tr-pr-title { font-size: 16pt; font-weight: 700; font-style: italic; letter-spacing: 0.04em; }
      .tr-pr-rule { border-top: 1pt solid #000; margin: 4pt 0 6pt; }
      .tr-pr-cb { font-family: Arial, sans-serif; font-size: 10pt; margin-right: 14pt; white-space: nowrap; }
      .tr-pr-cb b { font-weight: 700; }
      .tr-pr-row { margin-bottom: 5pt; }
      .tr-pr-row b i { font-style: italic; font-weight: 700; }
      .tr-pr-fill { display: inline-block; min-width: 200pt; border-bottom: 0.7pt solid #000; padding: 0 4pt; }
      .tr-pr-fill-sm { min-width: 80pt; }
      .tr-pr-fill-md { min-width: 120pt; }
      .tr-pr-ack { font-style: italic; font-weight: 700; font-size: 8.5pt; margin: 6pt 0 4pt; line-height: 1.3; }
      .tr-pr-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 2pt; }
      .tr-pr-table th, .tr-pr-table td { border: 0.5pt solid #000; padding: 1.5pt 3pt; font-size: 8pt; vertical-align: middle; height: 14pt; }
      .tr-pr-table th { background: #f0f0f0; font-weight: 700; text-align: left; font-size: 7.5pt; }
      .tr-pr-table td.num { text-align: right; color: #555; font-size: 7pt; }
      .tr-pr-table .gap { border: none; width: 6pt; padding: 0; }
      .tr-pr-notes-legend { font-size: 7.5pt; margin-top: 3pt; }
      .tr-pr-instructors { display: grid; grid-template-columns: 1fr 1fr; gap: 6pt 18pt; margin-top: 8pt; font-size: 9.5pt; }
      .tr-pr-instructor-line { border-bottom: 0.7pt solid #000; min-height: 12pt; padding: 0 4pt; }
      .tr-pr-divider { border-top: 1pt solid #000; margin-top: 12pt; padding-top: 6pt; }
      .tr-pr-divider-title { font-weight: 700; font-size: 9.5pt; margin-bottom: 4pt; }
      .tr-pr-forward { font-style: italic; font-weight: 700; font-size: 9pt; text-align: right; margin-top: 6pt; }
      .tr-pr-footer-note { font-size: 7pt; color: #333; margin-top: 6pt; line-height: 1.3; }
    }


/* ── K-9 Credentials — audit-ready PDF print ─────────────────────────────── */
@media print {
  body.k9-printing #k9-print-doc:not(:empty) ~ * { display: none !important; }
  body.k9-printing > *:not(#k9-print-doc):not(script):not(style) { display: none !important; }
  body.k9-printing #k9-print-doc { display: block !important; }
  body.k9-printing #k9-print-doc * { color: #000 !important; }

  @page { size: letter portrait; margin: 0.4in; }
  body.k9-printing { background: #fff !important; }

  #k9-print-doc { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; line-height: 1.3; color: #000; }
  #k9-print-doc .k9pr-h1     { font-size: 14pt; font-weight: 700; letter-spacing: 0.03em; margin: 0; }
  #k9-print-doc .k9pr-sub    { font-size: 9pt; color: #333; margin-top: 2pt; }
  #k9-print-doc .k9pr-rule   { border-top: 1pt solid #000; margin: 6pt 0 8pt; }
  #k9-print-doc .k9pr-team   {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 0.7pt solid #000;
    border-radius: 4pt;
    padding: 6pt 8pt;
    margin-bottom: 8pt;
  }
  #k9-print-doc .k9pr-team-hdr { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 0.5pt solid #555; padding-bottom: 2pt; margin-bottom: 4pt; }
  #k9-print-doc .k9pr-team-name { font-weight: 700; font-size: 10.5pt; }
  #k9-print-doc .k9pr-team-meta { font-size: 8.5pt; color: #444; }
  #k9-print-doc .k9pr-cert-table { width: 100%; border-collapse: collapse; }
  #k9-print-doc .k9pr-cert-table th,
  #k9-print-doc .k9pr-cert-table td { border: 0.4pt solid #000; padding: 2pt 4pt; font-size: 8pt; text-align: left; }
  #k9-print-doc .k9pr-cert-table th { background: #e7e7e7 !important; print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; font-weight: 700; }
  #k9-print-doc .k9pr-status-pill { display: inline-block; padding: 0.5pt 4pt; border-radius: 2pt; font-size: 7.5pt; font-weight: 700; print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
  #k9-print-doc .k9pr-footer { margin-top: 8pt; font-size: 7.5pt; color: #555; text-align: center; border-top: 0.4pt solid #555; padding-top: 4pt; }
}

/* Hide the print container during normal viewing */
#k9-print-doc { display: none; }

/* ── Light/dark-aware status banners (v11.95) ──────────────────────────────
   The portal previously used inline styles like
     background: rgba(234,179,8,0.18); color: #fde047
   which renders yellow-on-white in day mode (unreadable).  These classes
   give us a single source of truth that switches with the .dark body class.
   ───────────────────────────────────────────────────────────────────────── */

/* Yellow / amber — "awaiting", "saved", "draft", "timesheets due" */
.banner-warn {
  background: linear-gradient(90deg, #fef3c7 0%, #fef9c3 100%);
  border: 1.5px solid #f59e0b;
  color: #78350f;
}
.banner-warn .banner-fg     { color: #78350f; }
.banner-warn .banner-sub    { color: #92400e; opacity: 0.85; }
.banner-warn .banner-button {
  background: #fde68a; border: 1px solid #f59e0b; color: #78350f;
}
.banner-warn .banner-button:hover { background: #fcd34d; }

body.dark .banner-warn {
  background: linear-gradient(90deg, rgba(234,179,8,0.18) 0%, rgba(234,179,8,0.06) 100%);
  border-color: rgba(234,179,8,0.45);
  color: #fde047;
}
body.dark .banner-warn .banner-fg     { color: #fde047; }
body.dark .banner-warn .banner-sub    { color: rgba(253,224,71,0.78); }
body.dark .banner-warn .banner-button { background: rgba(234,179,8,0.25); border-color: rgba(234,179,8,0.55); color: #fde047; }
body.dark .banner-warn .banner-button:hover { background: rgba(234,179,8,0.4); }

/* Emerald — "ready for download / transfer", success-state */
.banner-success {
  background: linear-gradient(90deg, #d1fae5 0%, #ecfdf5 100%);
  border: 1.5px solid #10b981;
  color: #064e3b;
}
.banner-success .banner-fg  { color: #064e3b; }
.banner-success .banner-sub { color: #047857; opacity: 0.85; }

body.dark .banner-success {
  background: linear-gradient(90deg, rgba(16,185,129,0.20) 0%, rgba(16,185,129,0.06) 100%);
  border-color: rgba(16,185,129,0.55);
  color: #6ee7b7;
}
body.dark .banner-success .banner-fg  { color: #6ee7b7; }
body.dark .banner-success .banner-sub { color: rgba(110,231,183,0.78); }

/* Red — "stale / overdue / blocking" */
.banner-error {
  background: linear-gradient(90deg, #fee2e2 0%, #fef2f2 100%);
  border: 1.5px solid #ef4444;
  color: #7f1d1d;
}
.banner-error .banner-fg  { color: #7f1d1d; }
.banner-error .banner-sub { color: #991b1b; opacity: 0.85; }

body.dark .banner-error {
  background: linear-gradient(90deg, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.06) 100%);
  border-color: rgba(239,68,68,0.6);
  color: #fecaca;
}
body.dark .banner-error .banner-fg  { color: #fecaca; }
body.dark .banner-error .banner-sub { color: #fca5a5; }

/* ── K-9 live update indicator ────────────────────────────────────────────── */
@keyframes k9LiveDotPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; box-shadow: 0 0 0 0 rgba(16,185,129,0.45); }
  50%      { transform: scale(1.18); opacity: 1;    box-shadow: 0 0 8px 2px rgba(16,185,129,0.55); }
}
@keyframes k9LiveDotFlash {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(16,185,129,0.9); }
  35%  { transform: scale(1.7); box-shadow: 0 0 14px 5px rgba(16,185,129,0.85); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.k9-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: k9LiveDotPulse 2.4s ease-in-out infinite;
  vertical-align: middle;
}
.k9-live-dot.flash {
  animation: k9LiveDotFlash 0.85s ease-out;
}

/* ── Lesson Plan rich-text editor (v12.35) ────────────────────────────────
   Tailwind's preflight strips list bullets and heading sizing, which makes
   execCommand('insertUnorderedList') *appear* to do nothing (the tags get
   inserted but render as flat indented text).  Restore the standard look
   inside the contenteditable area and on the read-only View. */
.lp-rte-area ul,
#lp-view-outline ul,
.lp-render ul                 { list-style: disc inside; margin: 0.4em 0 0.4em 1em; }
.lp-rte-area ol,
#lp-view-outline ol,
.lp-render ol                 { list-style: decimal inside; margin: 0.4em 0 0.4em 1em; }
.lp-rte-area li,
#lp-view-outline li,
.lp-render li                 { margin: 0.15em 0; }

.lp-rte-area h2,
#lp-view-outline h2,
.lp-render h2                 { font-size: 1.15rem; font-weight: 700; margin: 0.7em 0 0.3em; color: #0f172a; }
.lp-rte-area h3,
#lp-view-outline h3,
.lp-render h3                 { font-size: 1rem;    font-weight: 700; margin: 0.6em 0 0.25em; color: #0f172a; }
.lp-rte-area blockquote,
.lp-render blockquote         { border-left: 3px solid #cbd5e1; padding: 0.1em 0.6em; color: #475569; margin: 0.4em 0; }
.lp-rte-area pre,
.lp-render pre                { background: #f1f5f9; padding: 0.5em 0.7em; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 0.85em; white-space: pre-wrap; }
.lp-rte-area a,
.lp-render a                  { color: #0369a1; text-decoration: underline; }

.lp-rte-area:focus            { outline: none; }

/* Lesson Plan form textareas — let users drag the bottom-right corner to
   make any field taller.  Pairs with the grow-only lpExpand() helper so
   the auto-grow on typing won't shrink a manually-enlarged box. */
textarea[id^="lp-"]                { resize: vertical; min-height: 60px; }