/* Theme + table enhancements layered on top of Tailwind (works with built CSS and the CDN fallback). Dark mode is class-based on . */ :root { --bg: #f1f5f9; --card: #ffffff; --text: #1e293b; --muted: #64748b; --line: #e2e8f0; --zebra: #f8fafc; --hover: #eef2f7; --input: #ffffff; --inputline: #cbd5e1; } html.dark { --bg: #0f172a; --card: #1e293b; --text: #e2e8f0; --muted: #94a3b8; --line: #334155; --zebra: #273449; --hover: #334155; --head: #334155; --input: #0f172a; --inputline: #475569; } /* ---------- tables: lines + zebra (list tables; matrix handles its own) ---- */ main table:not(.matrix) tbody tr { border-top: 1px solid var(--line); } main table:not(.matrix) tbody tr:nth-child(even) { background: var(--zebra); } main table:not(.matrix) tbody tr:hover { background: var(--hover); } /* payroll matrix zebra incl. sticky cells (driven by row class) */ .matrix tr.row-b, .matrix tr.row-b .stick { background: var(--zebra); } .matrix tr.row-a, .matrix tr.row-a .stick { background: var(--card); } .matrix tr:hover, .matrix tr:hover .stick { background: var(--hover); } /* sortable header affordance + injected live-search box */ main th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } main th.sortable:hover { color: #2563eb; } th.sortable .arrow { font-size: 9px; opacity: .35; margin-left: 2px; } th.sortable.asc .arrow, th.sortable.desc .arrow { opacity: 1; } .table-tools { margin-bottom: .5rem; } .table-tools input { width: 100%; max-width: 20rem; } /* ---------- dark-mode overrides for the Tailwind utilities we use --------- */ html.dark body { background: var(--bg); color: var(--text); } html.dark .card, html.dark .bg-white { background: var(--card) !important; } /* raised surfaces: table headers, footers, section chips */ html.dark thead .bg-slate-50, html.dark thead .bg-slate-100, html.dark tfoot .bg-slate-100, html.dark .bg-slate-100 { background: var(--head) !important; } html.dark .bg-slate-50 { background: #243244 !important; } html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: var(--text) !important; } html.dark .text-slate-600, html.dark .text-slate-500, html.dark .text-slate-400, html.dark .text-slate-300 { color: var(--muted) !important; } html.dark .border-slate-200, html.dark .border-slate-300, html.dark .border-slate-100 { border-color: var(--line) !important; } html.dark .divide-y > * + * { border-color: var(--line) !important; } html.dark .input { background: var(--input) !important; border-color: var(--inputline) !important; color: var(--text) !important; } html.dark .btn-ghost { background: var(--card) !important; border-color: var(--inputline) !important; color: var(--text) !important; } html.dark .btn-ghost:hover { background: var(--hover) !important; } html.dark .th { color: var(--muted) !important; } html.dark .td { color: var(--text) !important; } html.dark .label { color: #cbd5e1 !important; } html.dark .text-blue-700, html.dark a.text-blue-700 { color: #60a5fa !important; } html.dark .bg-slate-50\/40 { background: rgba(0,0,0,.18) !important; } /* status / category chips: translucent tints instead of bright light pills */ html.dark .chip.bg-slate-100 { background: #334155 !important; color: #cbd5e1 !important; } html.dark .chip.bg-green-100 { background: rgba(34,197,94,.20) !important; color: #86efac !important; } html.dark .chip.bg-amber-100 { background: rgba(245,158,11,.20) !important; color: #fcd34d !important; } html.dark .chip.bg-red-100 { background: rgba(239,68,68,.20) !important; color: #fca5a5 !important; } html.dark .chip.bg-blue-100, html.dark .chip.bg-blue-50 { background: rgba(59,130,246,.20) !important; color: #93c5fd !important; } html.dark .chip.bg-violet-50, html.dark .chip.bg-purple-100 { background: rgba(168,85,247,.20) !important; color: #d8b4fe !important; } /* ---------- collapsible sidebar (desktop only) --------------------------- */ @media (min-width: 768px) { html.sidebar-collapsed #sidebar { width: 3.5rem !important; } html.sidebar-collapsed #sidebar .sidebar-label { display: none; } html.sidebar-collapsed #sidebar nav a { justify-content: center; padding-left: 0; padding-right: 0; } html.sidebar-collapsed #sidebar .sidebar-footer { justify-content: center; } } #sidebar-collapse-icon { display: inline-flex; transition: transform .15s; } html.sidebar-collapsed #sidebar-collapse-icon { transform: rotate(180deg); } /* ---------- mobile sidebar drawer ---------------------------------------- */ #sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; display: none; } #sidebar-backdrop.show { display: block; } @media (min-width: 768px) { #sidebar-backdrop { display: none !important; } }