/* EuroBillr — design tokens & component overrides * Tailwind handles the bulk of the work via CDN; this file holds: * - Brand color tokens * - Typography refinements * - Dark mode tweaks * - Print rules for invoice PDFs */ /* Required for Alpine.js x-cloak directive */ [x-cloak] { display: none !important; } :root { --eb-navy: #0c1527; --eb-blue: #2563eb; --eb-blue-2: #1d4ed8; --eb-mint: #d1fae5; --eb-success: #16a34a; --eb-danger: #dc2626; --eb-warning: #f59e0b; --eb-border: #e2e8f0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-feature-settings: 'cv02','cv03','cv04','cv11'; } /* Tabular numbers for monetary columns */ .tabular-nums, table td.right, table td:last-child { font-variant-numeric: tabular-nums; } /* Subtle scrollbar in app shell */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Dark mode (toggled via .dark on body) */ .dark { background: #0b1224 !important; color: #e2e8f0; } .dark .bg-white { background-color: #0f172a !important; } .dark .bg-slate-50 { background-color: #0b1224 !important; } .dark .bg-slate-100 { background-color: #1e293b !important; } .dark .bg-slate-200 { background-color: #334155 !important; } .dark .border-slate-200 { border-color: #1e293b !important; } .dark .border-slate-300 { border-color: #334155 !important; } .dark .text-slate-900 { color: #f8fafc !important; } .dark .text-slate-800 { color: #e2e8f0 !important; } .dark .text-slate-700 { color: #cbd5e1 !important; } .dark .text-slate-600 { color: #94a3b8 !important; } .dark .text-slate-500 { color: #94a3b8 !important; } .dark .text-slate-400 { color: #64748b !important; } .dark thead.bg-slate-50 { background-color: #111c33 !important; } /* Tinted status backgrounds — keep the brand hue but darken so the matching dark text below still has contrast. */ .dark .bg-emerald-50, .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .15) !important; } .dark .bg-blue-50, .dark .bg-blue-100 { background-color: rgba(59, 130, 246, .15) !important; } .dark .bg-brand-50 { background-color: rgba(37, 99, 235, .15) !important; } .dark .bg-amber-50, .dark .bg-amber-100 { background-color: rgba(245, 158, 11, .15) !important; } .dark .bg-rose-50, .dark .bg-rose-100 { background-color: rgba(244, 63, 94, .15) !important; } .dark .bg-red-50, .dark .bg-red-100 { background-color: rgba(239, 68, 68, .15) !important; } .dark .bg-violet-50, .dark .bg-violet-100 { background-color: rgba(139, 92, 246, .15) !important; } .dark .bg-indigo-50, .dark .bg-indigo-100 { background-color: rgba( 99, 102, 241, .15) !important; } .dark .bg-yellow-50, .dark .bg-yellow-100 { background-color: rgba(234, 179, 8, .15) !important; } .dark .bg-purple-50, .dark .bg-purple-100 { background-color: rgba(168, 85, 247, .15) !important; } .dark .bg-pink-50, .dark .bg-pink-100 { background-color: rgba(236, 72, 153, .15) !important; } .dark .bg-cyan-50, .dark .bg-cyan-100 { background-color: rgba(6, 182, 212, .15) !important; } .dark .bg-teal-50, .dark .bg-teal-100 { background-color: rgba(20, 184, 166, .15) !important; } .dark .bg-orange-50, .dark .bg-orange-100 { background-color: rgba(249, 115, 22, .15) !important; } .dark .bg-sky-50, .dark .bg-sky-100 { background-color: rgba(14, 165, 233, .15) !important; } .dark .bg-lime-50, .dark .bg-lime-100 { background-color: rgba(132, 204, 22, .15) !important; } .dark .bg-fuchsia-50, .dark .bg-fuchsia-100 { background-color: rgba(217, 70, 239, .15) !important; } /* Tinted text — lift to the 300/400 band so it reads on the dark background without losing the colour cue. */ .dark .text-emerald-500, .dark .text-emerald-600, .dark .text-emerald-700, .dark .text-emerald-800 { color: #6ee7b7 !important; } .dark .text-blue-500, .dark .text-blue-600, .dark .text-blue-700, .dark .text-blue-800 { color: #93c5fd !important; } .dark .text-brand-500, .dark .text-brand-600 { color: #93c5fd !important; } .dark .text-amber-500, .dark .text-amber-600, .dark .text-amber-700, .dark .text-amber-800, .dark .text-amber-900 { color: #fcd34d !important; } .dark .text-rose-500, .dark .text-rose-600, .dark .text-rose-700, .dark .text-rose-800 { color: #fda4af !important; } .dark .text-red-500, .dark .text-red-600, .dark .text-red-700, .dark .text-red-800 { color: #fca5a5 !important; } .dark .text-violet-500, .dark .text-violet-600, .dark .text-violet-700, .dark .text-violet-800 { color: #c4b5fd !important; } .dark .text-indigo-500, .dark .text-indigo-600, .dark .text-indigo-700 { color: #a5b4fc !important; } .dark .text-purple-600, .dark .text-purple-700, .dark .text-purple-800 { color: #d8b4fe !important; } .dark .text-pink-600, .dark .text-pink-700 { color: #f9a8d4 !important; } .dark .text-cyan-600, .dark .text-cyan-700 { color: #67e8f9 !important; } .dark .text-teal-600, .dark .text-teal-700 { color: #5eead4 !important; } .dark .text-orange-600, .dark .text-orange-700 { color: #fdba74 !important; } .dark .text-yellow-600, .dark .text-yellow-700 { color: #fde047 !important; } .dark .text-lime-600, .dark .text-lime-700 { color: #bef264 !important; } .dark .text-fuchsia-600, .dark .text-fuchsia-700 { color: #f0abfc !important; } .dark .text-sky-600, .dark .text-sky-700 { color: #7dd3fc !important; } /* Coloured borders — soften so they don't clash with the dark surface */ .dark .border-red-200 { border-color: rgba(239, 68, 68, .35) !important; } .dark .border-amber-200 { border-color: rgba(245, 158, 11, .35) !important; } .dark .border-emerald-200{ border-color: rgba(16, 185, 129, .35) !important; } .dark .border-blue-200 { border-color: rgba(59, 130, 246, .35) !important; } /* Hover bg-* utilities — make sure hover doesn't flash a bright tint */ .dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; } .dark .hover\:bg-slate-100:hover { background-color: #334155 !important; } .dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, .25) !important; } /* Inputs in dark mode */ .dark input, .dark select, .dark textarea { background-color: #1e293b; color: #f8fafc; border-color: #334155; } .dark input::placeholder, .dark textarea::placeholder { color: #64748b; } /* Buttons inherit body / parent text colour in dark mode (browser defaults ship `color: ButtonText` which renders as black on dark surfaces and made the "Manage in Stripe portal" button look empty). Explicit text-X-Y utility classes below still win via class specificity. */ .dark button { color: inherit; } /* Headings without an explicit text-* class default to body colour in dark mode rather than the browser's near-black default. */ .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #f8fafc; } /* Generic links inside the app shell: keep brand-blue but lift the shade so it reads on a dark surface. Explicit text-* classes still override this. */ .dark a:not([class*="text-"]) { color: #93c5fd; } /* ── Dark-mode catch-alls for content that has no explicit text-* class ── The hand-written templates often lean on the body's text-slate-900 default for table cells, paragraphs and amount displays. In dark mode those inherit from `body.app-shell` (overridden above), but browser default styles for some elements (TD, TH, P inside complex ancestors) sometimes break the inheritance chain. These rules guarantee that money values, table data and paragraph text stay readable across every page. */ .dark table, .dark thead, .dark tbody, .dark tfoot, .dark tr, .dark th, .dark td { color: inherit; } .dark .tabular-nums { color: inherit; } .dark p, .dark span, .dark dd, .dark dt, .dark li, .dark label { color: inherit; } /* Native form-control accent colour & color scheme so checkboxes, radios, range sliders and date pickers don't render a bright white widget on the dark surface. */ .dark { color-scheme: dark; } .dark input[type="checkbox"], .dark input[type="radio"] { accent-color: #2563eb; } /* Striped / hover rows on tables. Without these the alternate-row shading is invisible on dark mode (white-on-white). */ .dark tbody tr:nth-child(even) { background-color: rgba(148, 163, 184, .04); } .dark .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, .15) !important; } .dark .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, .15) !important; } .dark .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, .15) !important; } .dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, .15) !important; } .dark .hover\:bg-violet-50:hover { background-color: rgba(139, 92, 246, .15) !important; } .dark .hover\:bg-purple-50:hover { background-color: rgba(168, 85, 247, .15) !important; } .dark .hover\:bg-indigo-50:hover { background-color: rgba( 99, 102, 241, .15) !important; } .dark .hover\:bg-brand-500\/40:hover { background-color: rgba(37, 99, 235, .25) !important; } /* Card surfaces that aren't strictly bg-white but use a tinted slate */ .dark .bg-slate-800, .dark .bg-slate-900 { background-color: #0f172a !important; } /* Divide-y lines between rows */ .dark .divide-slate-100 > * + *, .dark .divide-slate-200 > * + * { border-color: #1e293b !important; } /* Disabled / placeholder states */ .dark .text-slate-400 { color: #64748b !important; } .dark [disabled], .dark .opacity-50, .dark .text-slate-300 { color: #475569 !important; } /* Dark-mode borders for tinted callouts */ .dark .border-rose-200 { border-color: rgba(244, 63, 94, .35) !important; } .dark .border-violet-200 { border-color: rgba(139, 92, 246, .35) !important; } .dark .border-purple-200 { border-color: rgba(168, 85, 247, .35) !important; } .dark .border-brand-500\/40 { border-color: rgba(37, 99, 235, .50) !important; } /* Selects keep the dropdown arrow from disappearing in dark mode */ .dark select { background-image: none; } /* Money value emphasis — when tabular-nums sits inside a colored bg, still readable */ .dark .text-2xl.tabular-nums, .dark .text-3xl.tabular-nums, .dark .text-xl.tabular-nums { color: inherit; } /* Status pill `bg-purple-50 text-purple-700` (refunded invoice etc.) */ .dark .text-purple-700, .dark .text-purple-800 { color: #d8b4fe !important; } /* The "Manage in Stripe portal" / billing buttons — explicit overrides make sure a light-gray button surface flips to a slate one. */ .dark .bg-gray-100 { background-color: #1e293b !important; } .dark .bg-gray-200 { background-color: #334155 !important; } .dark .text-gray-600, .dark .text-gray-700, .dark .text-gray-800, .dark .text-gray-900 { color: #e2e8f0 !important; } /* Subtle hover lift for cards on landing */ .lift { transition: transform .25s ease, box-shadow .25s ease; } .lift:hover { transform: translateY(-2px); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .15); } /* ── Modern app shell — premium UI utilities ───────────────────── */ /* Smooth page enter animation: every authenticated page fades + lifts on first paint so navigations feel instant rather than blank-then-pop. */ @keyframes app-page-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .app-page-enter { animation: app-page-enter .28s cubic-bezier(.2,.8,.2,1) both; } /* Skeleton shimmer for loading states. Apply .skeleton to any block to get a soft pulsing placeholder. */ @keyframes app-skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%); background-size: 200% 100%; animation: app-skeleton 1.4s ease-in-out infinite; border-radius: 8px; } /* Sidebar collapse — width transitions for a smooth icon-only mode */ .app-sidebar { transition: width .25s cubic-bezier(.4,0,.2,1); } .app-sidebar-label { transition: opacity .15s ease, max-width .25s ease; } .app-sidebar.is-collapsed .app-sidebar-label { opacity: 0; max-width: 0; pointer-events: none; } .app-sidebar.is-collapsed .app-sidebar-tooltip { display: block; } .app-sidebar-tooltip { display: none; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: #0f172a; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 50; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); opacity: 0; transition: opacity .15s ease; } .app-sidebar.is-collapsed .app-sidebar-link:hover .app-sidebar-tooltip { opacity: 1; } .app-sidebar.is-collapsed .app-sidebar-section-label { opacity: 0; height: 0; margin: 0; padding: 0; pointer-events: none; } .app-sidebar.is-collapsed .app-sidebar-section { padding-top: 8px; padding-bottom: 8px; } .app-sidebar.is-collapsed .app-sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; } /* Active-link accent: gradient bar on the left edge with subtle glow */ .app-sidebar-link[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(180deg, #2563eb, #7c3aed); border-radius: 0 4px 4px 0; } .app-sidebar.is-collapsed .app-sidebar-link[aria-current="page"]::before { display: none; } .app-sidebar.is-collapsed .app-sidebar-link[aria-current="page"] svg { color: #c7d2fe; } /* Focus rings — consistent, accessible, subtle */ :where(button, a, input, select, textarea):focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); border-radius: 6px; } /* Smooth hover lift on cards inside the app, not just the landing */ .card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card-hover:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .12); } /* Pretty backdrop for the mobile drawer overlay */ .app-mobile-backdrop { backdrop-filter: blur(2px); background: rgba(15, 23, 42, .45); } /* Slim scrollbar inside the dark sidebar */ .app-sidebar nav::-webkit-scrollbar { width: 6px; } .app-sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); } .app-sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); } /* Print: invoice PDF */ @media print { body { background: #fff; } nav, aside, header.h-16, .no-print { display: none !important; } main { padding: 0; } } /* ──────────────────────────────────────────────────────────────── Dark-mode NUCLEAR fallback. Catches every pattern the explicit rules above don't cover: black inline styles, Tailwind colour scales (gray/zinc/neutral/stone/950), buttons that ship a default black `color`, SVG icons that render dark via currentColor, and any element whose direct ancestor was a tinted card. Rule: anything that ends up dark on dark gets nudged into the readable band. Anything that already has an explicit *light* colour (text-white, text-slate-100/200/300 on dark surfaces) is left alone via attribute matching. ──────────────────────────────────────────────────────────────── */ /* 1. text-black / text-gray-* / text-zinc-* / text-neutral-* / text-stone-* — Tailwind's neutral scales aren't slate. Force every dark shade (700+) to the body's light colour. */ .dark .text-black, .dark .text-slate-950, .dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700, .dark .text-zinc-900, .dark .text-zinc-800, .dark .text-zinc-700, .dark .text-neutral-900, .dark .text-neutral-800, .dark .text-neutral-700, .dark .text-stone-900, .dark .text-stone-800, .dark .text-stone-700 { color: #f8fafc !important; } .dark .text-gray-600, .dark .text-zinc-600, .dark .text-neutral-600, .dark .text-stone-600 { color: #cbd5e1 !important; } .dark .text-gray-500, .dark .text-zinc-500, .dark .text-neutral-500, .dark .text-stone-500 { color: #94a3b8 !important; } .dark .text-gray-400, .dark .text-zinc-400, .dark .text-neutral-400, .dark .text-stone-400 { color: #64748b !important; } /* 2. Inline styles — phpMyAdmin / OCR / PDF preview pages emit `style="color:#000"` or `color:#0f172a` from their own renderers. Override any near-black inline style. We only target the most common literals because inline styles can't be matched by colour value in CSS. */ .dark [style*="color:#000"], .dark [style*="color: #000"], .dark [style*="color:#0f172a"], .dark [style*="color: #0f172a"], .dark [style*="color:#0c1527"], .dark [style*="color: #0c1527"], .dark [style*="color:#1e293b"], .dark [style*="color: #1e293b"], .dark [style*="color:black"], .dark [style*="color: black"] { color: #f8fafc !important; } .dark [style*="background-color:#fff"], .dark [style*="background-color: #fff"], .dark [style*="background-color:#ffffff"], .dark [style*="background-color: #ffffff"], .dark [style*="background:#fff"], .dark [style*="background: #fff"], .dark [style*="background:white"], .dark [style*="background: white"] { background-color: #0f172a !important; } /* 3. SVG icons — fill="currentColor" inherits from the closest `color`. If a parent has no explicit text-* class it falls back to body, which is now light. But SVGs with fill="#0f172a" (some brand glyphs) bypass currentColor — neutralise that too. */ .dark svg[fill="#000"], .dark svg[fill="black"], .dark svg[fill="#0f172a"], .dark svg[fill="#0c1527"] { fill: #f8fafc !important; } .dark svg[stroke="#000"], .dark svg[stroke="black"], .dark svg[stroke="#0f172a"], .dark svg[stroke="#0c1527"] { stroke: #f8fafc !important; } .dark svg path[fill="#000"], .dark svg path[fill="black"] { fill: currentColor !important; } /* 4. Buttons & inputs — browser defaults ship `color: ButtonText` (system black). We covered button{} earlier; extend to summary, details, fieldset, legend that browsers also style with ButtonText / Canvas defaults. */ .dark button, .dark summary, .dark details, .dark fieldset, .dark legend, .dark optgroup, .dark option { color: inherit; background-color: inherit; } .dark option { background-color: #1e293b; color: #f8fafc; } /* 5. Catch-all for any descendant of a `.bg-white` card whose own colour wasn't explicitly set. Without this, deeply nested /
can keep a near-black colour from a parent that had `class="text-slate-900"` set by Tailwind's reset. */ .dark .bg-white *:not(svg):not(path):not(circle):not(rect):not(line):not(polygon):not(g) { color: inherit; } /* 6. Tooltip / popover bubbles built with hardcoded backgrounds — keep them dark but readable. */ .dark [role="tooltip"], .dark .tooltip { background: #1e293b !important; color: #f8fafc !important; } /* 7. Numbers: total, subtotal, balance — typical pattern is

with no colour class. They inherit from card body which is now light. Force `currentColor` to make sure no inherited dark literal sneaks in. */ .dark .tabular-nums, .dark .font-mono, .dark .font-semibold, .dark .font-bold { color: inherit; } /* 8. The bg-slate-100 chip backgrounds (used for tag pills like "Office Supplies" or category labels in tables) — already defined above but ensure their CHILD text is also legible. */ .dark .bg-slate-100 *, .dark .bg-slate-200 *, .dark .bg-slate-50 * { color: inherit; } /* 9. PRE / CODE blocks (audit-log JSON, raw payloads on inbound detail pages) keep their monospace identity but flip palette. */ .dark pre, .dark code { background-color: #1e293b !important; color: #e2e8f0 !important; } /* 10. Dropdown menus / modal panels that stack on top of dark cards. Tailwind's `bg-white shadow-xl` becomes invisible chrome — keep the slate surface but lift the shadow opacity. */ .dark .shadow, .dark .shadow-md, .dark .shadow-lg, .dark .shadow-xl, .dark .shadow-2xl, .dark .shadow-soft { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6) !important; } /* 11. Action-bar buttons that use bg-white as their resting state and only flip on hover. The bg gets covered above; ensure the text inside stays readable irrespective of nested classes. */ .dark .bg-white { color: #e2e8f0; } .dark .bg-white .text-slate-900, .dark .bg-white .text-slate-800, .dark .bg-white .text-slate-700 { color: #f1f5f9 !important; } /* 12. Status pills / badges that build with `bg-{color}-50 text-{color}-700`. Already handled above — but ensure the parent .bg-{color}-50 doesn't override its child colour when the child is currentColor. */ .dark .inline-flex *, .dark .inline-block * { color: inherit; } /* 13. RING utilities — Tailwind's `ring-X-200` family creates a 2-3px coloured outline. In dark mode the light pastel shades disappear against the navy surface; the original ring colour is kept but its alpha is lowered so it reads as a subtle accent rather than a glowing band. Covers every colour used across status pills, cards and badges. */ .dark .ring-slate-100, .dark .ring-slate-200 { --tw-ring-color: rgba(148, 163, 184, .25) !important; box-shadow: 0 0 0 1px rgba(148, 163, 184, .25) !important; } .dark .ring-slate-300 { --tw-ring-color: rgba(148, 163, 184, .35) !important; } .dark .ring-emerald-100, .dark .ring-emerald-200 { --tw-ring-color: rgba( 16, 185, 129, .35) !important; } .dark .ring-blue-100, .dark .ring-blue-200 { --tw-ring-color: rgba( 59, 130, 246, .35) !important; } .dark .ring-sky-100, .dark .ring-sky-200 { --tw-ring-color: rgba( 14, 165, 233, .35) !important; } .dark .ring-amber-100, .dark .ring-amber-200 { --tw-ring-color: rgba(245, 158, 11, .35) !important; } .dark .ring-rose-100, .dark .ring-rose-200 { --tw-ring-color: rgba(244, 63, 94, .35) !important; } .dark .ring-red-100, .dark .ring-red-200 { --tw-ring-color: rgba(239, 68, 68, .35) !important; } .dark .ring-violet-100, .dark .ring-violet-200 { --tw-ring-color: rgba(139, 92, 246, .35) !important; } .dark .ring-purple-100, .dark .ring-purple-200 { --tw-ring-color: rgba(168, 85, 247, .35) !important; } .dark .ring-indigo-100, .dark .ring-indigo-200 { --tw-ring-color: rgba( 99, 102, 241, .35) !important; } .dark .ring-yellow-100, .dark .ring-yellow-200 { --tw-ring-color: rgba(234, 179, 8, .35) !important; } .dark .ring-pink-100, .dark .ring-pink-200 { --tw-ring-color: rgba(236, 72, 153, .35) !important; } .dark .ring-cyan-100, .dark .ring-cyan-200 { --tw-ring-color: rgba( 6, 182, 212, .35) !important; } .dark .ring-teal-100, .dark .ring-teal-200 { --tw-ring-color: rgba( 20, 184, 166, .35) !important; } .dark .ring-orange-100, .dark .ring-orange-200 { --tw-ring-color: rgba(249, 115, 22, .35) !important; } .dark .ring-lime-100, .dark .ring-lime-200 { --tw-ring-color: rgba(132, 204, 22, .35) !important; } /* 14. ICON-ONLY action buttons (eye, pencil, download, etc.) live inside table action cells with no explicit text-* class — they style via `text-slate-500 hover:bg-slate-100 hover:text-slate-700`. The 500 shade on dark navy is borderline invisible. Lift one stop. */ .dark .text-slate-500 { color: #cbd5e1 !important; } /* 15. Ghost / outline buttons: `border border-slate-300 text-slate-700 bg-white hover:bg-slate-50` — the border softens, bg flips, but the text needs to be the lighter slate-100 band on dark surface, not the muted 700 that's already overridden to 300. Re-pin the ghost-button text colour explicitly. */ .dark button.border, .dark a.border, .dark .btn-ghost, .dark [class*="border-slate-300"][class*="bg-white"] { color: #e2e8f0 !important; } /* 16. Solid coloured buttons (bg-emerald-600 / bg-amber-600 / bg-rose-600 / bg-brand-navy etc. with text-white) are visible in both modes by design. But hover states shouldn't darken them further on the already-dark surface. */ .dark .hover\:bg-amber-700:hover { background-color: #b45309 !important; } .dark .hover\:bg-emerald-700:hover { background-color: #047857 !important; } .dark .hover\:bg-rose-700:hover { background-color: #be123c !important; } .dark .hover\:bg-brand-600:hover { background-color: #1e40af !important; } /* 17. Disabled buttons / "cursor-not-allowed" state — keep the muted look but don't make them completely invisible. */ .dark .cursor-not-allowed, .dark [disabled], .dark button:disabled, .dark a[aria-disabled="true"] { color: #64748b !important; opacity: .7; } /* 18. Form labels & legend (template-level