/* ============================================================================
   CONCIERGE THEME  ·  warm editorial re-skin for the whole app (light + dark)
   ----------------------------------------------------------------------------
   Loaded AFTER tailwind.css and index.html's <style>, so these rules win by
   cascade order (equal specificity) or by a small specificity bump. It covers
   the whole app by (a) re-defining the design tokens, (b) re-pointing the shared
   accent/surface rules from cool-teal to warm-pine, (c) warming the common
   hardcoded Tailwind gray/pastel utilities, (d) an editorial serif for headings.
   Nothing here changes markup — pure paint. Safe to toggle on/off.
   ============================================================================ */

:root { --cg-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }

/* ---------- Tokens · LIGHT (warm porcelain / pine) ----------
   `html body…` (specificity 0,1,2) beats index.html's `:root` / `body.dark`
   (0,1,0 / 0,1,1) regardless of stylesheet order, so these tokens always win. */
html body:not(.dark) {
    --ls-bg:        #f1ece4;
    --ls-bg-2:      #e9e1d5;
    --ls-card:      #fcfaf6;
    --ls-border:    #e7dfd1;
    --ls-text:      #241f18;
    --ls-muted:     #6f6557;
    --ls-accent:    #1f6e5e;   /* pine */
    --ls-accent-2:  #2b8a76;
    --ls-shadow:    0 1px 2px rgba(52,40,22,.05), 0 2px 10px rgba(52,40,22,.05);
    --ls-shadow-lg: 0 8px 28px rgba(52,40,22,.10);
    --ls-topbar:    #173d35;   /* deep pine top bar (keeps the white logo legible) */
}
/* ---------- Tokens · DARK (warm evening / luminous pine — "Luna") ---------- */
html body.dark {
    --ls-bg:        #0b0f16;   /* CommPeak-inspired cool slate (was warm brown-black) */
    --ls-bg-2:      #10151e;
    --ls-card:      #161c27;
    --ls-border:    #263041;
    --ls-text:      #e8edf5;
    --ls-muted:     #8b96a8;
    --ls-accent:    #22d3ee;   /* cyan (was pine) */
    --ls-accent-2:  #38bec9;
    --ls-shadow:    0 1px 2px rgba(0,0,0,.45), 0 2px 12px rgba(0,0,0,.40);
    --ls-shadow-lg: 0 10px 34px rgba(0,0,0,.55);
    --ls-topbar:    #080b11;
}

/* ---------- Page ground: warm wash instead of teal/violet ---------- */
body:not(.dark) {
    background:
        radial-gradient(1000px 460px at 0% -12%, rgba(31,110,94,.06), transparent 60%),
        radial-gradient(920px 460px at 100% -6%, rgba(224,169,86,.09), transparent 55%),
        var(--ls-bg) !important;
}
body.dark {
    background:
        radial-gradient(1100px 520px at 100% -10%, rgba(230,190,120,.05), transparent 58%),
        radial-gradient(900px 520px at 0% -6%, rgba(77,171,148,.05), transparent 55%),
        var(--ls-bg) !important;
}

/* ---------- Editorial type: serif headings + serif KPI numbers ---------- */
h1, h2, h3,
.ls-dash-card [data-count],
.bg-white .text-3xl.font-bold,
.bg-white .text-4xl.font-bold,
.bg-white .text-2xl.font-bold {
    font-family: var(--cg-serif) !important;
    letter-spacing: -.01em;
    font-weight: 600;
}
h1 { letter-spacing: -.015em; }
/* keep the big KPI numbers warm, not slate */
body:not(.dark) .bg-white .text-3xl.font-bold,
body:not(.dark) .bg-white .text-4xl.font-bold {
    background: linear-gradient(180deg, #241f18 0%, #4b4232 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Cards: warm hairline + warm hover lift ---------- */
body:not(.dark) .bg-white.rounded-2xl,
body:not(.dark) .bg-white.rounded-xl {
    background-image: linear-gradient(180deg, #fefdfb 0%, #faf7f1 100%) !important;
    border: 1px solid rgba(52,40,22,.08) !important;
}
body:not(.dark) .bg-white.rounded-2xl:hover,
body:not(.dark) .bg-white.shadow-sm:hover,
body:not(.dark) .bg-white.shadow:hover {
    box-shadow: 0 8px 24px rgba(52,40,22,.09), 0 1px 3px rgba(52,40,22,.05) !important;
    border-color: rgba(31,110,94,.20) !important;
}

/* ---------- Top navbar: warm pine wash ---------- */
nav.bg-teal-700 {
    background: linear-gradient(90deg, #143f37 0%, #1f6e5e 60%, #2b8a76 100%) !important;
}
#main-app > nav { background: var(--ls-topbar) !important; }
/* ...and its TEXT. The nav carries bg-teal-700, so the solid-button rule below claims it and sets a
   dark foreground meant for a cyan button. The background gets overridden here; the colour has to
   be too, or every plain glyph in the bar (the mobile menu button especially) goes dark-on-dark. */
body.dark #main-app > nav,
body.dark #main-app > nav .mobile-nav-toggle { color: #fff !important; }

/* ---------- Sidebar nav: pine hover + active ---------- */
body:not(.dark) :is(.sidebar-col ul button, .sidebar-col ul a):hover,
body:not(.dark) .sidebar-col details summary:hover {
    background-color: rgba(31,110,94,.09) !important;
    color: #1a5c4e !important;
}
body:not(.dark) :is(.sidebar-col ul button, .sidebar-col ul a).active,
body:not(.dark) :is(.sidebar-col ul button, .sidebar-col ul a)[aria-current="page"] {
    background-color: rgba(31,110,94,.12) !important;
    color: #1a5c4e !important;
}
body:not(.dark) :is(.sidebar-col ul button, .sidebar-col ul a).active::before,
body:not(.dark) :is(.sidebar-col ul button, .sidebar-col ul a)[aria-current="page"]::before {
    background: linear-gradient(180deg, #2b8a76, #1f6e5e) !important;
}
body.dark :is(.sidebar-col ul button, .sidebar-col ul a).active,
body.dark :is(.sidebar-col ul button, .sidebar-col ul a)[aria-current="page"] {
    background-color: rgba(77,171,148,.16) !important; color: #86d8c2 !important;
}
body.dark :is(.sidebar-col ul button, .sidebar-col ul a).active::before,
body.dark :is(.sidebar-col ul button, .sidebar-col ul a)[aria-current="page"]::before {
    background: linear-gradient(180deg, #5cc0a6, #4dab94) !important;
}

/* ---------- Inputs: pine focus ring ---------- */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(31,110,94,.18) !important;
    border-color: #2b8a76 !important;
}
body:not(.dark) input:hover:not(:focus),
body:not(.dark) select:hover:not(:focus),
body:not(.dark) textarea:hover:not(:focus) { border-color: rgba(31,110,94,.35) !important; }

/* ---------- Buttons: solid teal & indigo actions → pine ---------- */
.bg-teal-600, .bg-teal-700, .bg-teal-500,
.bg-indigo-600, .bg-indigo-700, .bg-indigo-500,
.hover\:bg-teal-700:hover, .hover\:bg-teal-600:hover,
.hover\:bg-indigo-700:hover, .hover\:bg-indigo-600:hover { background-color: #1f6e5e !important; }
body:not(.dark) button.bg-teal-600, body:not(.dark) button.bg-teal-700,
body:not(.dark) button.bg-indigo-600, body:not(.dark) button.bg-indigo-700 {
    background-image: linear-gradient(180deg, #2b8a76 0%, #1f6e5e 100%) !important;
    box-shadow: 0 1px 2px rgba(31,110,94,.16), 0 4px 14px rgba(31,110,94,.18) !important;
}
.text-teal-600, .text-teal-700, .text-indigo-600, .text-indigo-700 { color: #1f6e5e !important; }
/* dark teal buttons (e.g. Logout) got recolored purple by an app rule → dark pine */
.bg-teal-800 { background-color: #143f37 !important; }
.bg-teal-900 { background-color: #0f322c !important; }
.hover\:bg-teal-900:hover { background-color: #0f322c !important; }
/* Page titles use .text-teal-900 (which an existing inline rule paints purple) → deep pine */
body:not(.dark) .text-teal-900, body:not(.dark) .text-teal-800 { color: #16463c !important; }
body.dark .text-teal-900, body.dark .text-teal-800 { color: #86d8c2 !important; }
.border-teal-500, .border-teal-600, .ring-teal-500 { border-color: #2b8a76 !important; }

/* Page/section titles use purple accents app-wide → re-point to pine */
body:not(.dark) .text-purple-500, body:not(.dark) .text-purple-600,
body:not(.dark) .text-purple-700, body:not(.dark) .text-purple-800,
body:not(.dark) .text-purple-900, body:not(.dark) .text-violet-600,
body:not(.dark) .text-violet-700 { color: #1a5c4e !important; }
body.dark .text-purple-600, body.dark .text-purple-700,
body.dark .text-purple-800, body.dark .text-purple-900 { color: #86d8c2 !important; }
body:not(.dark) .bg-purple-600, body:not(.dark) .bg-purple-700 { background-color: #1f6e5e !important; }
/* purple pastel surfaces (Admin group etc.) → warm sand */
body:not(.dark) .bg-purple-50  { background-color: #f0ece2 !important; }
body:not(.dark) .bg-purple-100 { background-color: #e9e1d2 !important; }

/* ---------- Tables: warm header + pine hover ---------- */
body:not(.dark) thead tr { background-image: linear-gradient(180deg, #f6f1e9 0%, #efe7db 100%) !important; }
body:not(.dark) thead th { color: #6f6557 !important; }
tbody tr:hover { background-color: rgba(31,110,94,.055) !important; }
body.dark tbody tr:hover { background-color: rgba(77,171,148,.07) !important; }

/* ---------- Warm the cool grays (LIGHT only; dark handled below) ---------- */
body:not(.dark) .text-gray-800, body:not(.dark) .text-slate-800 { color: #241f18 !important; }
body:not(.dark) .text-gray-700, body:not(.dark) .text-slate-700 { color: #3b342a !important; }
body:not(.dark) .text-gray-600, body:not(.dark) .text-slate-600 { color: #554c3f !important; }
body:not(.dark) .text-gray-500, body:not(.dark) .text-slate-500 { color: #6f6557 !important; }
body:not(.dark) .text-gray-400, body:not(.dark) .text-slate-400 { color: #998f7d !important; }
body:not(.dark) .bg-gray-50  { background-color: #f1ece4 !important; }
body:not(.dark) .bg-gray-100 { background-color: #e9e1d5 !important; }
body:not(.dark) .bg-slate-50 { background-color: #f1ece4 !important; }
body:not(.dark) .border-gray-100, body:not(.dark) .border-gray-200,
body:not(.dark) .border-gray-300 { border-color: var(--ls-border) !important; }
body:not(.dark) .divide-gray-100 > *, body:not(.dark) .divide-gray-200 > * { border-color: var(--ls-border) !important; }

/* Warm the dark-mode grays a touch (were cool slate) */
body.dark .text-gray-700, body.dark .text-slate-700 { color: #d8cebd !important; }
body.dark .text-gray-600, body.dark .text-slate-600 { color: #c6bcaa !important; }
body.dark .text-gray-500 { color: #a99d8b !important; }

/* Warm teal text accents in dark → pine */
body.dark .text-teal-700 { color: #86d8c2 !important; }
body.dark .text-teal-600 { color: #5cc0a6 !important; }

/* ---------- Toasts / command palette accent already use --ls-accent (auto) ---------- */
.ls-toast.info { border-left-color: var(--ls-accent) !important; }

/* ---------- Top bar on mobile: keep every control reachable ----------
   The digital clock readout + wide Clock-IN eat the width so the avatar/logout
   fall off-screen. Drop the clock on phones and tighten spacing; keep Clock IN. */
@media (max-width: 640px) {
    #main-app > nav #clock-time,
    #main-app > nav #clock-date,
    #main-app > nav #clock-time-mobile { display: none !important; }
    #main-app > nav { padding-left: .6rem !important; padding-right: .6rem !important; gap: .35rem !important; }
    #main-app > nav > div { gap: .45rem !important; }
    #clock-punch-btn { padding: .4rem .6rem !important; }
    #notif-bell, #theme-icon { padding: .15rem !important; }
}
/* Top-bar icon buttons: crisp line icons, aligned */
#main-app > nav #notif-bell svg,
#main-app > nav #clock-punch-icon svg { color: #fff; }

/* Account dropdown (avatar menu): profile / theme / logout */
.tb-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 15px; font-size: 14px; color: var(--ls-text); background: transparent; border: 0; text-align: left; cursor: pointer; }
.tb-menu-item:hover { background: var(--ls-bg-2); }
.tb-menu-item svg { width: 17px; height: 17px; color: var(--ls-muted); flex: none; }
.tb-menu-item.tb-menu-danger { color: #c15542; }
.tb-menu-item.tb-menu-danger svg { color: #c15542; }

/* Notifications panel: on phones span the width with small margins so it can't
   clip off the left edge (was anchored right and overflowing). */
@media (max-width: 640px) {
    #notif-panel { position: fixed !important; left: .5rem !important; right: .5rem !important; width: auto !important; max-width: none !important; top: 3.6rem !important; }
}

/* ---------- Scrollbar: warm ---------- */
body:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(111,101,87,.35); }
body:not(.dark) ::-webkit-scrollbar-thumb:hover { background: rgba(111,101,87,.55); }

/* ============================================================================
   HARDCODED UTILITY REMAP  ·  from the color audit (~1,500 hardcoded classes)
   These don't follow the token change, so remap the high-frequency ones.
   ============================================================================ */

/* Neutral dark surfaces (used in both modes) → warm charcoal, not cool slate */
.bg-gray-900 { background-color: #17110a !important; }
.bg-gray-800 { background-color: #241d13 !important; }
.bg-gray-700 { background-color: #2f2618 !important; }

/* Borders — the two heaviest classes (354 + 228). Warm hairline. */
body:not(.dark) .border-gray-600,
body:not(.dark) .border-gray-700,
body:not(.dark) .border-gray-300 { border-color: var(--ls-border) !important; }

/* Neutral hover states → warm */
body:not(.dark) .hover\:bg-gray-50:hover  { background-color: #ece4d9 !important; }
body:not(.dark) .hover\:bg-gray-100:hover { background-color: #e4dccd !important; }
.hover\:bg-gray-700:hover { background-color: #33291a !important; }
.hover\:bg-gray-800:hover { background-color: #241d13 !important; }

/* ---- Dark-mode `dark:` variants (compiled as `.dark .dark\:x`): warm them so
        dark surfaces/borders match the warm-evening tokens, not cool slate ---- */
body.dark .dark\:bg-gray-900 { background-color: var(--ls-bg) !important; }
body.dark .dark\:bg-gray-800 { background-color: var(--ls-card) !important; }   /* cards use this */
body.dark .dark\:bg-gray-700 { background-color: var(--ls-bg-2) !important; }
body.dark .dark\:border-gray-600,
body.dark .dark\:border-gray-700 { border-color: var(--ls-border) !important; }
body.dark .dark\:text-gray-300 { color: #d9cfbe !important; }
body.dark .dark\:text-gray-400 { color: var(--ls-muted) !important; }
body.dark .dark\:hover\:bg-gray-700:hover { background-color: #332a1c !important; }
body.dark .dark\:hover\:bg-gray-800:hover { background-color: #241d13 !important; }

/* ============================================================================
   COOL DARK REPAINT (CommPeak-inspired)  ·  DARK MODE ONLY — light mode untouched.
   Overrides the warm-evening dark rules above with a cool slate + cyan accent.
   ============================================================================ */
/* accent text: pine/teal + repointed-purple accents → cyan */
body.dark .text-teal-700, body.dark .text-teal-800, body.dark .text-teal-900,
body.dark .text-teal-600, body.dark .text-teal-500,
body.dark .text-purple-600, body.dark .text-purple-700,
body.dark .text-purple-800, body.dark .text-purple-900 { color: #67e8f9 !important; }
/* primary solid buttons (teal/indigo) → bright cyan fill + dark text, matching the reference */
body.dark .bg-teal-600, body.dark .bg-teal-700, body.dark .bg-teal-500,
body.dark .bg-indigo-600, body.dark .bg-indigo-700, body.dark .bg-indigo-500,
body.dark .hover\:bg-teal-700:hover, body.dark .hover\:bg-teal-600:hover,
body.dark .hover\:bg-indigo-700:hover, body.dark .hover\:bg-indigo-600:hover {
    background-color: #22d3ee !important; background-image: none !important; color: #06202a !important;
    box-shadow: 0 1px 2px rgba(34,211,238,.18), 0 4px 14px rgba(34,211,238,.15) !important;
}
body.dark .bg-teal-600:hover, body.dark .bg-teal-700:hover,
body.dark .bg-indigo-600:hover, body.dark .bg-indigo-700:hover { background-color: #38dcee !important; }
body.dark .bg-teal-800 { background-color: #0e7490 !important; }
body.dark .bg-teal-900 { background-color: #155e75 !important; }
/* input focus ring → cyan */
body.dark input:focus, body.dark select:focus, body.dark textarea:focus {
    box-shadow: 0 0 0 3px rgba(34,211,238,.22) !important; border-color: #22d3ee !important;
}
/* sidebar active + hover → cyan */
body.dark :is(.sidebar-col ul button, .sidebar-col ul a).active,
body.dark :is(.sidebar-col ul button, .sidebar-col ul a)[aria-current="page"] { background-color: rgba(34,211,238,.13) !important; color: #67e8f9 !important; }
body.dark :is(.sidebar-col ul button, .sidebar-col ul a).active::before,
body.dark :is(.sidebar-col ul button, .sidebar-col ul a)[aria-current="page"]::before { background: linear-gradient(180deg, #38bec9, #22d3ee) !important; }
body.dark :is(.sidebar-col ul button, .sidebar-col ul a):hover,
body.dark .sidebar-col details summary:hover { background-color: rgba(34,211,238,.08) !important; color: #a5f0fb !important; }
/* raw dark gray surfaces (used in both modes) → cool slate in dark */
body.dark .bg-gray-900 { background-color: #0b0f16 !important; }
body.dark .bg-gray-800 { background-color: #161c27 !important; }
body.dark .bg-gray-700 { background-color: #1c2431 !important; }
body.dark .hover\:bg-gray-700:hover { background-color: #1c2431 !important; }
body.dark .hover\:bg-gray-800:hover { background-color: #161c27 !important; }
body.dark .dark\:hover\:bg-gray-700:hover { background-color: #1e2735 !important; }
body.dark .dark\:hover\:bg-gray-800:hover { background-color: #161c27 !important; }
/* cool the dark gray text (previously warmed) */
body.dark .text-gray-700, body.dark .text-slate-700 { color: #c3cbd8 !important; }
body.dark .text-gray-600, body.dark .text-slate-600 { color: #aab4c4 !important; }
body.dark .text-gray-500 { color: #8b96a8 !important; }
body.dark .dark\:text-gray-300 { color: #c3cbd8 !important; }
/* table row hover → cyan tint; scrollbar → cool */
body.dark tbody tr:hover { background-color: rgba(34,211,238,.06) !important; }
body.dark ::-webkit-scrollbar-thumb { background: rgba(139,150,168,.30); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(139,150,168,.5); }

/* ---- full-page coverage: slate surfaces, gray gaps, and the accent family (teal/indigo/violet/
        purple) → cyan, so every page reads cool + cyan, not just the ones with gray tokens ---- */
/* slate surfaces → cool slate (match the gray tokens) */
body.dark .bg-slate-800, body.dark .dark\:bg-slate-800 { background-color: var(--ls-card) !important; }
body.dark .bg-slate-700, body.dark .dark\:bg-slate-700 { background-color: #1c2431 !important; }
body.dark .bg-slate-600, body.dark .dark\:bg-slate-600 { background-color: #232d3d !important; }
body.dark .dark\:border-slate-500, body.dark .dark\:border-slate-600 { border-color: var(--ls-border) !important; }
body.dark .dark\:text-slate-100 { color: var(--ls-text) !important; }
body.dark .dark\:text-slate-300 { color: #c3cbd8 !important; }
body.dark .dark\:text-slate-400 { color: var(--ls-muted) !important; }
/* gray gaps not remapped above */
body.dark .bg-gray-600, body.dark .dark\:bg-gray-600 { background-color: #232d3d !important; }
body.dark .dark\:border-gray-800 { border-color: #1a2230 !important; }
body.dark .dark\:text-gray-600 { color: var(--ls-muted) !important; }
/* accent family text → cyan (badges/labels) */
body.dark .dark\:text-teal-200, body.dark .dark\:text-teal-300, body.dark .dark\:text-teal-400,
body.dark .dark\:text-indigo-200, body.dark .dark\:text-indigo-300, body.dark .dark\:text-indigo-400,
body.dark .dark\:text-violet-200, body.dark .dark\:text-violet-300, body.dark .dark\:text-violet-400,
body.dark .dark\:text-purple-200, body.dark .dark\:text-purple-300, body.dark .dark\:text-purple-400 { color: #7fe9f7 !important; }
/* accent family borders → cyan */
body.dark .dark\:border-teal-600, body.dark .dark\:border-teal-700,
body.dark .dark\:border-indigo-600, body.dark .dark\:border-indigo-700, body.dark .dark\:border-indigo-800,
body.dark .dark\:border-violet-600, body.dark .dark\:border-violet-700,
body.dark .dark\:border-purple-600, body.dark .dark\:border-purple-700 { border-color: rgba(34,211,238,.35) !important; }
/* accent family faint tint backgrounds (any opacity variant) → faint cyan */
body.dark [class*="bg-teal-900"], body.dark [class*="bg-indigo-900"],
body.dark [class*="bg-violet-900"], body.dark [class*="bg-purple-900"] { background-color: rgba(34,211,238,.10) !important; }

/* ── Tab strips on phones ──────────────────────────────────────────────────────────────────────
   px-4/py-2 at 14px is comfortable on a laptop and wasteful on a 390px screen, where three tabs
   wrap onto two rows and push the content below the fold. Same treatment for both strips. */
@media (max-width: 640px) {
    [data-um-tab], [data-accom-tab] {
        padding: 6px 10px !important;
        font-size: 12.5px !important;
        gap: 6px !important;
        border-radius: 9px !important;
    }
    [data-um-tab] svg, [data-accom-tab] svg { width: 14px !important; height: 14px !important; }
}

/* ── Page-help popup ("?" beside the page title) ───────────────────────────────────────────────
   Desktop keeps the anchored dropdown. On a phone it is a centred fixed sheet: an absolutely
   positioned 94vw box that starts inside the card's 32px padding overflows the viewport and
   pushes the document sideways. `right` + `left` together also mean the width never has to be
   computed, so it cannot be wrong. */
@media (max-width: 640px) {
    #content-help-pop {
        position: fixed !important;
        top: 72px !important;                       /* clear of the sticky top bar */
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        margin-top: 0 !important;
        max-height: calc(100vh - 96px) !important;
        max-height: calc(100dvh - 96px) !important; /* dvh accounts for mobile browser chrome */
        padding: 16px !important;                   /* p-6 is a lot of the screen at this width */
        border-radius: 16px !important;
    }
}

/* ── Timekeeping requests: table on a desktop, cards on a phone ────────────────────────────────
   A six-column table in a horizontal scroller is unusable on a phone: the name is clipped, the
   note is a ribbon, and Approve/Deny sit off-screen — so a manager cannot see what they are
   approving without scrolling sideways. Same markup, re-laid-out; the cells' data-label becomes
   the heading for each line, so there is no second renderer to keep in step. */
@media (max-width: 640px) {
    .prq-wrap { overflow-x: visible !important; border: 0 !important; }
    .prq-cards, .prq-cards tbody, .prq-cards tr, .prq-cards td { display: block; width: 100%; }
    .prq-cards thead { display: none; }
    .prq-cards tr {
        border: 1px solid var(--ls-border) !important;
        border-radius: 14px; background: var(--ls-card);
        padding: 12px 14px; margin-bottom: 10px;
    }
    .prq-cards td { padding: 3px 0 !important; border: 0 !important; max-width: none !important; }
    .prq-cards td[data-label]::before {
        content: attr(data-label);
        display: block; margin-bottom: 2px;
        font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
        color: var(--ls-muted);
    }
    /* The name is the card's title and the type sits beside it — neither wants a label. */
    .prq-cards td.prq-who { font-size: 15px; padding-bottom: 2px !important; }
    .prq-cards td.prq-type { padding-bottom: 8px !important; }
    /* Approve / Deny become full-width targets at the foot of the card, which is the whole point:
       everything needed to decide is now above them. */
    .prq-cards td.prq-actions {
        display: flex; gap: 8px; text-align: left !important;
        margin-top: 10px; padding-top: 10px !important;
        border-top: 1px solid var(--ls-border) !important;
    }
    .prq-cards td.prq-actions button { flex: 1 1 0; padding: 10px 8px !important; font-size: 13px !important; margin: 0 !important; }
    .prq-cards td.prq-actions input { flex: 1 1 auto; }
}