/* ── Mobile table scroll ─────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── CSS Custom Properties ───────────────────────────────────────────────── */ :root { --primary: #7c3aed; --primary-hover: #5a44d8; --primary-active: #4c38c4; --accent: #F59E0B; --accent-hover: #D97706; --bg-page: #F8FAFC; --bg-surface: #FFFFFF; --bg-hover: #F1F5F9; --border: #E2E8F0; --border-2: #CBD5E1; --text: #0F172A; --text-muted: #64748B; --text-tertiary:#94A3B8; --text-disabled:#CBD5E1; } html.dark { --primary: #5b21b6; --primary-hover: #6d28d9; --primary-active: #4c1d95; --accent: #FBBF24; --accent-hover: #F59E0B; --bg-page: #0F172A; --bg-surface: #1E293B; --bg-hover: #334155; --border: #334155; --border-2: #475569; --text: #F8FAFC; --text-muted: #CBD5E1; --text-tertiary: #94A3B8; --text-disabled: #475569; } /* ── Base component styles ───────────────────────────────────────────────── */ .h-7 { height: 3.5rem; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } /* ── Logo dark/light switching ──────────────────────────────────────────── */ .logo-dark { display: none; } /* Reserve scrollbar space so pages with fewer rows don't shift left/right when navigating between filters/pagination. */ html { scrollbar-gutter: stable; } /* Stop wide page elements from pushing the body wider than the viewport. This used to cause a visible 'page grows then shrinks' flash on first paint while Tailwind CDN was still processing utility classes. */ html, body { overflow-x: hidden; } body { max-width: 100vw; } /* FOUC mask — hide body until Tailwind CDN finishes injecting styles. The tag gets the .tw-ready class from a script at the very end of , after Tailwind has had a chance to process the DOM. */ html:not(.tw-ready) body { visibility: hidden; } html.tw-ready body { visibility: visible; } html.dark .logo-light { display: none; } html.dark .logo-dark { display: block; } /* ── Accessibility: skip-to-main link ───────────────────────────────────── */ .skip-link { position: absolute; top: -40px; left: 0.5rem; z-index: 200; padding: 0.5rem 1rem; background: var(--primary); color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: top 0.15s ease; } .skip-link:focus { top: 0.5rem; outline: 2px solid #fff; outline-offset: 2px; } /* Utility: visually hidden */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Contrast floor ──────────────────────────────────────────────────────── */ .text-slate-400 { color: rgb(100 116 139) !important; } .text-gray-400 { color: rgb(107 114 128) !important; } .hover\:text-slate-600:hover { color: rgb(71 85 105) !important; } .hover\:text-slate-700:hover { color: rgb(51 65 85) !important; } /* ── Prefers-reduced-motion ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-spin, .animate-bounce, .animate-pulse { animation: none !important; } } /* ── Labels ──────────────────────────────────────────────────────────────── */ .field-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.375rem; } /* ── Inputs ──────────────────────────────────────────────────────────────── */ .input { display: block; width: 100%; padding: 0.5625rem 0.875rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg-surface); font-size: 0.875rem; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.12); } .input::placeholder { color: var(--text-tertiary); } html.dark .input { background: var(--bg-surface); border-color: var(--border); color: var(--text); } html.dark .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); } html.dark .input::placeholder { color: var(--text-muted); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5625rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; cursor: pointer; white-space: nowrap; } .btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.2); } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); } .btn-primary:active { background: var(--primary-active); } .btn-secondary { background: var(--bg-surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); } .btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-2); } .btn-danger { background: white; color: rgb(185 28 28); border-color: rgb(252 165 165); } .btn-danger:hover { background: rgb(254 242 242); } html.dark .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); } html.dark .btn-secondary:hover { background: var(--bg-surface); } /* ── Badges ──────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .badge-draft { background: rgb(243 244 246); color: rgb(75 85 99); } .badge-issued { background: rgb(237 233 254); color: rgb(109 40 217); } .badge-paid { background: #D1FAE5; color: #065F46; } .badge-void { background: rgb(254 226 226); color: rgb(153 27 27); } .badge-pending { background: #FEF3C7; color: #92400E; } .badge-submitted{ background: rgb(224 231 255); color: rgb(67 56 202); } .badge-failed { background: rgb(254 226 226); color: rgb(153 27 27); } .badge-complete { background: #D1FAE5; color: #065F46; } html.dark .badge-draft { background: rgb(55 65 81); color: rgb(209 213 219); } html.dark .badge-issued, html.dark .badge-submitted { background: rgb(46 16 101); color: rgb(196 181 253); } html.dark .badge-paid, html.dark .badge-complete { background: #064E3B; color: #34D399; } html.dark .badge-void, html.dark .badge-failed { background: #7F1D1D; color: #F87171; } html.dark .badge-pending { background: #78350F; color: #FBBF24; } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05); } /* ── Tables ──────────────────────────────────────────────────────────────── */ .table-auto thead th { background: var(--bg-page); padding: 0.75rem 1.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); text-align: left; } .table-auto tbody tr { border-bottom: 1px solid var(--border); } .table-auto tbody tr:hover { background: var(--bg-hover); } .table-auto tbody td { padding: 0.875rem 1.25rem; font-size: 0.875rem; color: var(--text); } /* ── Dark mode: Tailwind class overrides ─────────────────────────────────── */ html.dark body { background-color: #0F172A; color: #F8FAFC; } html.dark #sidebar { background: #1E293B; border-color: #334155; } html.dark #sidebar .border-slate-100, html.dark #sidebar .border-b { border-color: #334155 !important; } html.dark #sidebar a.text-slate-600 { color: #CBD5E1; } html.dark #sidebar a:hover { background: #334155 !important; color: #F8FAFC !important; } html.dark #sidebar .bg-slate-100 { background: #334155; } html.dark #top-bar { background: #1E293B; border-color: #334155; } html.dark #top-bar .bg-slate-100 { background: #334155; } html.dark #main-content { background: #0F172A; } html.dark .bg-white { background: #1E293B !important; } html.dark .card { background: #1E293B !important; border-color: #334155 !important; } html.dark .bg-slate-50 { background: #0F172A !important; } html.dark .bg-slate-100 { background: #1E293B !important; } html.dark .bg-gray-50 { background: #0F172A !important; } html.dark .border-slate-200, html.dark .border-gray-200 { border-color: #334155 !important; } html.dark .border-slate-100, html.dark .border-gray-100 { border-color: #1E293B !important; } html.dark .text-slate-900, html.dark .text-gray-900 { color: #F8FAFC !important; } html.dark .text-slate-800, html.dark .text-gray-800 { color: #E2E8F0 !important; } html.dark .text-slate-700, html.dark .text-gray-700 { color: #CBD5E1 !important; } html.dark .text-slate-600, html.dark .text-gray-600 { color: #CBD5E1 !important; } html.dark .text-slate-500, html.dark .text-gray-500 { color: #94A3B8 !important; } html.dark .text-slate-400, html.dark .text-gray-400 { color: #94A3B8 !important; } html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-gray-50:hover { background: #1E293B !important; } html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-gray-100:hover { background: #334155 !important; } html.dark .table-auto thead th { background: #0F172A !important; color: #64748B; border-color: #334155; } html.dark .table-auto tbody tr { border-color: #1E293B; } html.dark .table-auto tbody tr:hover { background: #1E293B !important; } html.dark .table-auto tbody td { color: #CBD5E1; } html.dark table thead { background: #0F172A !important; } html.dark table thead th { color: #64748B; } html.dark table tr.border-t { border-color: #334155; } html.dark table tr:hover { background: #1E293B !important; } /* Soft accent backgrounds — used by alert cards, stat tiles, evidence boxes */ html.dark .bg-amber-50, html.dark .bg-amber-50\/40, html.dark .bg-amber-50\/30 { background: rgba(146, 64, 14, 0.25) !important; } html.dark .bg-emerald-50, html.dark .bg-emerald-50\/40, html.dark .bg-emerald-50\/30 { background: rgba(6, 95, 70, 0.25) !important; } html.dark .bg-rose-50, html.dark .bg-rose-50\/40, html.dark .bg-rose-50\/30 { background: rgba(159, 18, 57, 0.25) !important; } html.dark .bg-indigo-50, html.dark .bg-indigo-50\/40, html.dark .bg-indigo-50\/30 { background: rgba(67, 56, 202, 0.18) !important; } /* Hover variants for the same alert/quick-action cards */ html.dark .hover\:bg-amber-100:hover { background: rgba(146, 64, 14, 0.4) !important; } html.dark .hover\:bg-emerald-100:hover{ background: rgba(6, 95, 70, 0.4) !important; } html.dark .hover\:bg-rose-100:hover { background: rgba(159, 18, 57, 0.4) !important; } html.dark .hover\:bg-indigo-100:hover { background: rgba(67, 56, 202, 0.3) !important; } /* Bigger contrast badges */ html.dark .bg-amber-100 { background: rgba(146, 64, 14, 0.5) !important; } html.dark .bg-emerald-100 { background: rgba(6, 95, 70, 0.5) !important; } html.dark .bg-rose-100 { background: rgba(159, 18, 57, 0.5) !important; } html.dark .bg-indigo-100 { background: rgba(67, 56, 202, 0.4) !important; } /* Borders */ html.dark .border-amber-200, html.dark .border-amber-300 { border-color: #B45309 !important; } html.dark .border-emerald-200, html.dark .border-emerald-300 { border-color: #047857 !important; } html.dark .border-rose-200, html.dark .border-rose-300 { border-color: #BE123C !important; } html.dark .border-indigo-200, html.dark .border-indigo-300 { border-color: #6366F1 !important; } /* Foreground text — light pastel on dark accent background */ html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #FCD34D !important; } html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900 { color: #34D399 !important; } html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900 { color: #FCA5A5 !important; } html.dark .text-indigo-600, html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #A5B4FC !important; } html.dark .text-\[\#7c3aed\] { color: #A5B4FC !important; } html.dark pre { background: rgb(2 6 23) !important; } html.dark code { background: #1E293B !important; } html.dark #loading-overlay > div { background: #0F172A; }