* { box-sizing: border-box; } table { border-collapse: collapse; } .modal-backdrop { background: rgba(0,0,0,.5); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } /* ───────────────────────── Theming ───────────────────────── The admin panel is built with utility classes off the Tailwind CDN, so the theme is applied by (a) picking an accent palette via CSS variables and remapping the `teal-*` utilities to it, and (b) remapping the neutral `slate`/`white` utilities for dark mode. `data-theme` / `data-accent` live on (set by applyTheme() in app.js). Default = light + teal. */ :root { --a-50:#f0fdfa; --a-100:#ccfbf1; --a-400:#2dd4bf; --a-500:#14b8a6; --a-600:#0d9488; --a-700:#0f766e; } html[data-accent="blue"] { --a-50:#eff6ff; --a-100:#dbeafe; --a-400:#60a5fa; --a-500:#3b82f6; --a-600:#2563eb; --a-700:#1d4ed8; } html[data-accent="indigo"] { --a-50:#eef2ff; --a-100:#e0e7ff; --a-400:#818cf8; --a-500:#6366f1; --a-600:#4f46e5; --a-700:#4338ca; } html[data-accent="violet"] { --a-50:#f5f3ff; --a-100:#ede9fe; --a-400:#a78bfa; --a-500:#8b5cf6; --a-600:#7c3aed; --a-700:#6d28d9; } html[data-accent="emerald"] { --a-50:#ecfdf5; --a-100:#d1fae5; --a-400:#34d399; --a-500:#10b981; --a-600:#059669; --a-700:#047857; } html[data-accent="rose"] { --a-50:#fff1f2; --a-100:#ffe4e6; --a-400:#fb7185; --a-500:#f43f5e; --a-600:#e11d48; --a-700:#be123c; } html[data-accent="amber"] { --a-50:#fffbeb; --a-100:#fef3c7; --a-400:#fbbf24; --a-500:#f59e0b; --a-600:#d97706; --a-700:#b45309; } html[data-accent="slate"] { --a-50:#f8fafc; --a-100:#f1f5f9; --a-400:#94a3b8; --a-500:#64748b; --a-600:#475569; --a-700:#334155; } /* Accent remap — applies in both light & dark (a no-op when accent = teal). */ .bg-teal-50 { background-color: var(--a-50) !important; } .bg-teal-100 { background-color: var(--a-100) !important; } .bg-teal-500 { background-color: var(--a-500) !important; } .bg-teal-600 { background-color: var(--a-600) !important; } .text-teal-400 { color: var(--a-400) !important; } .text-teal-500 { color: var(--a-500) !important; } .text-teal-600 { color: var(--a-600) !important; } .text-teal-700 { color: var(--a-700) !important; } .border-teal-500 { border-color: var(--a-500) !important; } .accent-teal-600 { accent-color: var(--a-600) !important; } .hover\:bg-teal-50:hover { background-color: var(--a-50) !important; } .hover\:bg-teal-100:hover { background-color: var(--a-100) !important; } .hover\:bg-teal-700:hover { background-color: var(--a-700) !important; } .hover\:text-teal-600:hover { color: var(--a-600) !important; } .hover\:bg-teal-50\/30:hover { background-color: var(--a-50) !important; } .focus\:ring-teal-500:focus { --tw-ring-color: var(--a-500) !important; } .from-teal-500 { --tw-gradient-from: var(--a-500) !important; } /* ───────── Dark mode ───────── */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] body { background-color: #0f172a; color: #e2e8f0; } html[data-theme="dark"] .bg-white { background-color: #1e293b !important; } html[data-theme="dark"] .bg-slate-50 { background-color: #1e293b !important; } html[data-theme="dark"] .bg-slate-100 { background-color: #334155 !important; } html[data-theme="dark"] .bg-slate-200 { background-color: #475569 !important; } html[data-theme="dark"] .bg-slate-900 { background-color: #020617 !important; } html[data-theme="dark"] .bg-slate-800 { background-color: #0f172a !important; } html[data-theme="dark"] .hover\:bg-white:hover { background-color: #1e293b !important; } html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: #263449 !important; } html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: #334155 !important; } html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: #475569 !important; } html[data-theme="dark"] .hover\:bg-slate-800:hover { background-color: #1e293b !important; } html[data-theme="dark"] .text-slate-800 { color: #f1f5f9 !important; } html[data-theme="dark"] .text-slate-700 { color: #e2e8f0 !important; } html[data-theme="dark"] .text-slate-600 { color: #cbd5e1 !important; } html[data-theme="dark"] .text-slate-500 { color: #a9b6c8 !important; } html[data-theme="dark"] .text-slate-400 { color: #8a98ab !important; } html[data-theme="dark"] .text-slate-300 { color: #64748b !important; } html[data-theme="dark"] .text-slate-200 { color: #475569 !important; } html[data-theme="dark"] .hover\:text-slate-800:hover { color: #f1f5f9 !important; } html[data-theme="dark"] .hover\:text-slate-600:hover { color: #cbd5e1 !important; } html[data-theme="dark"] .border-slate-50 { border-color: #1e293b !important; } html[data-theme="dark"] .border-slate-100 { border-color: #2b3a52 !important; } html[data-theme="dark"] .border-slate-200 { border-color: #334155 !important; } html[data-theme="dark"] .border-slate-300 { border-color: #475569 !important; } html[data-theme="dark"] .border-slate-800 { border-color: #1e293b !important; } html[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: #263449 !important; } html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; } /* coloured tint panels → dark translucent */ html[data-theme="dark"] .bg-teal-50, html[data-theme="dark"] .hover\:bg-teal-50:hover, html[data-theme="dark"] .hover\:bg-teal-50\/30:hover { background-color: #223140 !important; background-color: color-mix(in srgb, var(--a-500) 16%, #1e293b) !important; } html[data-theme="dark"] .bg-amber-50 { background-color: #3a2f13 !important; } html[data-theme="dark"] .bg-amber-100 { background-color: #4a3a15 !important; } html[data-theme="dark"] .bg-red-50 { background-color: #3b1d20 !important; } html[data-theme="dark"] .bg-red-50\/60, html[data-theme="dark"] .bg-red-50\/70 { background-color: #3b1d20 !important; } html[data-theme="dark"] .bg-rose-50 { background-color: #3b1d28 !important; } html[data-theme="dark"] .bg-rose-100 { background-color: #4a2233 !important; } html[data-theme="dark"] .bg-violet-50 { background-color: #2b2350 !important; } html[data-theme="dark"] .bg-blue-50 { background-color: #17293f !important; } html[data-theme="dark"] .bg-emerald-50 { background-color: #12352a !important; } html[data-theme="dark"] .bg-emerald-100{ background-color: #16412f !important; } html[data-theme="dark"] .bg-slate-100.text-slate-600, html[data-theme="dark"] .bg-slate-100.text-slate-700 { color: #e2e8f0 !important; } html[data-theme="dark"] .text-amber-700, html[data-theme="dark"] .text-amber-800, html[data-theme="dark"] .text-amber-900 { color: #fcd34d !important; } html[data-theme="dark"] .text-red-600 { color: #f87171 !important; } html[data-theme="dark"] .border-amber-200, html[data-theme="dark"] .border-amber-300 { border-color: #6b551f !important; } /* inputs / selects */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0f172a; color: #e2e8f0; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b; } html[data-theme="dark"] option { background-color: #1e293b; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; } html[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.65); } /* Quill editor */ html[data-theme="dark"] .ql-toolbar, html[data-theme="dark"] .ql-container { border-color: #475569 !important; } html[data-theme="dark"] .ql-toolbar { background: #1e293b; } html[data-theme="dark"] .ql-editor { background: #0f172a; color: #e2e8f0; } html[data-theme="dark"] .ql-editor.ql-blank::before { color: #64748b; } html[data-theme="dark"] .ql-snow .ql-stroke { stroke: #cbd5e1; } html[data-theme="dark"] .ql-snow .ql-fill { fill: #cbd5e1; } html[data-theme="dark"] .ql-snow .ql-picker { color: #cbd5e1; } /* The rendered report preview (.rpt-preview) stays light — it represents a printed document — so no dark overrides there. */ /* ───────── Font family + interface size (data-font / data-scale) ───────── */ :root { --ui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ui-scale: 1; } html[data-font="serif"] { --ui-font: Georgia, Cambria, "Times New Roman", serif; } html[data-font="mono"] { --ui-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } html[data-font="rounded"] { --ui-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, "Segoe UI", system-ui, sans-serif; } html[data-font="compact"] { --ui-font: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif; } html[data-scale="sm"] { --ui-scale: .92; } html[data-scale="lg"] { --ui-scale: 1.08; } html[data-scale="xl"] { --ui-scale: 1.16; } html { font-family: var(--ui-font); font-size: calc(16px * var(--ui-scale)); } body, input, select, textarea, button { font-family: var(--ui-font); } .font-mono, code, pre, .ql-editor pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ───────── Data-table appearance (data-tbl-*) — targets #view table.w-full, the shared list/stat table markup; leaves report/preview tables alone. The default ("grey" header, rows-only borders) needs no rules. ───── */ html[data-tbl-header="accent"] #view table.w-full thead tr, html[data-tbl-header="accent"] #view table.w-full thead th { background-color: var(--a-50) !important; color: var(--a-700) !important; } html[data-tbl-header="dark"] #view table.w-full thead tr, html[data-tbl-header="dark"] #view table.w-full thead th { background-color: #334155 !important; color: #f1f5f9 !important; } html[data-tbl-header="plain"] #view table.w-full thead tr, html[data-tbl-header="plain"] #view table.w-full thead th { background-color: transparent !important; } html[data-tbl-stripe="1"] #view table.w-full tbody tr:nth-child(even) > td { background-color: rgba(15,23,42,.035); } html[data-tbl-stripe="1"][data-theme="dark"] #view table.w-full tbody tr:nth-child(even) > td { background-color: rgba(255,255,255,.04); } html[data-tbl-border="grid"] #view table.w-full th, html[data-tbl-border="grid"] #view table.w-full td { border: 1px solid #e2e8f0; } html[data-tbl-border="grid"][data-theme="dark"] #view table.w-full th, html[data-tbl-border="grid"][data-theme="dark"] #view table.w-full td { border-color: #334155; } html[data-tbl-border="none"] #view table.w-full { border-collapse: collapse; } html[data-tbl-border="none"] #view table.w-full tbody, html[data-tbl-border="none"] #view table.w-full tbody tr, html[data-tbl-border="none"] #view table.w-full thead tr { border: 0 !important; } html[data-tbl-border="none"] #view table.w-full tbody > tr > td, html[data-tbl-border="none"] #view table.w-full > tbody { border-color: transparent !important; } html[data-tbl-compact="1"] #view table.w-full th, html[data-tbl-compact="1"] #view table.w-full td { padding-top: .3rem !important; padding-bottom: .3rem !important; } html[data-tbl-compact="1"] #view table.w-full { font-size: .8rem; }