@import "tailwindcss"; /* --------------------------------------------------------------------------- Dark mode is driven by data-theme="dark" on (set server-side from a cookie so there is no flash, toggled client-side by the `theme` Stimulus controller). Use the `dark:` variant anywhere in markup. --------------------------------------------------------------------------- */ @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *)); /* --------------------------------------------------------------------------- Design tokens. "Refined professional blue" — a calmer, slightly deeper brand blue than the stock Tailwind blue, plus a system font stack (no external font dependency, works offline / in production behind a strict CSP). --------------------------------------------------------------------------- */ @theme { --font-sans: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace; --color-brand-50: #eff5ff; --color-brand-100: #dbe8fe; --color-brand-200: #bfd7fe; --color-brand-300: #93bbfd; --color-brand-400: #6096fa; --color-brand-500: #3b76f6; --color-brand-600: #2563eb; --color-brand-700: #1d4fd7; --color-brand-800: #1e40af; --color-brand-900: #1e3a8a; --color-brand-950: #172554; --radius-card: 0.75rem; } /* --------------------------------------------------------------------------- Reusable component classes — one source of truth for buttons, cards, inputs and labels so every screen (index / show / form / report) looks the same. Markup uses these instead of repeating long utility strings. --------------------------------------------------------------------------- */ @layer components { /* Base button appearance — shared as a real utility so the variants can @apply it (Tailwind v4 @apply only accepts utilities, not components). */ .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost { /* appearance-none is essential: gets appearance:button from Preflight, which makes native buttons ignore our background-color. */ @apply inline-flex cursor-pointer appearance-none items-center justify-center gap-1.5 rounded-lg px-4 py-2 text-sm font-semibold leading-none transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:focus:ring-offset-slate-900; } .btn-primary { @apply bg-brand-600 text-white shadow-sm hover:bg-brand-700 focus:ring-brand-500; } .btn-secondary { @apply border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus:ring-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700; } .btn-danger { @apply bg-red-600 text-white shadow-sm hover:bg-red-700 focus:ring-red-500; } .btn-ghost { @apply text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100; } /* Defined last so it overrides the size utilities from the base above. */ .btn-sm { @apply px-3 py-1.5 text-xs; } .card { @apply rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900; } .card-pad { @apply p-5 sm:p-6; } /* Form fields — fully self-styled (no @tailwindcss/forms plugin), so text inputs, selects and textareas look identical and professional everywhere. */ .field-label { @apply mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300; } .input { @apply block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition-colors placeholder:text-slate-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/40 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder-slate-500 dark:disabled:bg-slate-800/50; } select.input { @apply pr-9; } textarea.input { @apply min-h-24 leading-relaxed; } .checkbox { @apply h-4 w-4 rounded border border-slate-300 text-brand-600 focus:ring-2 focus:ring-brand-500/40 dark:border-slate-600 dark:bg-slate-800; } .form-hint { @apply mt-1 text-xs text-slate-500 dark:text-slate-400; } .form-actions { @apply mt-6 flex flex-wrap items-center gap-3 border-t border-slate-200 pt-5 dark:border-slate-800; } .alert-error { @apply rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300; } .link { @apply font-medium text-brand-600 hover:underline dark:text-brand-400; } .kpi-label { @apply text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400; } } /* --------------------------------------------------------------------------- Base styling for EVERY form control. There is no @tailwindcss/forms plugin, and Tailwind's reset zeroes native borders — so without this, `border-slate-300` only sets a colour and fields render borderless. This gives every text input, select and textarea a consistent, professional border/padding/focus, whether or not it also carries the .input class or a custom width. --------------------------------------------------------------------------- */ @layer base { input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], input:not([type]), select, textarea { @apply rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/40 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder-slate-500; } select { @apply pr-9; } textarea { @apply leading-relaxed; } input[type="checkbox"], input[type="radio"] { @apply h-4 w-4 border border-slate-300 bg-white text-brand-600 shadow-none focus:ring-2 focus:ring-brand-500/40 dark:border-slate-600 dark:bg-slate-800; } input[type="checkbox"] { @apply rounded; } input[type="radio"] { @apply rounded-full; } } /* Colour-scheme hints so native controls (scrollbars, date pickers) match. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* Smooth theme transitions on the big surfaces only (avoid janky animation on every element). */ body, aside, header, .theme-surface { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } input, select, textarea { font-size: 0.875rem; } /* Turbo progress bar (page navigations) */ .turbo-progress-bar { height: 3px; background: var(--color-brand-600); } /* Turbo frames show a subtle busy state while loading */ turbo-frame[busy] { opacity: 0.5; pointer-events: none; transition: opacity 150ms ease-in; } turbo-frame[busy]::after { content: "Loading…"; display: block; padding: 0.5rem 0; font-size: 0.75rem; color: #64748b; } /* Thin, unobtrusive scrollbars (esp. the sidebar) */ .scrollbar-slim { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.4) transparent; } .scrollbar-slim::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar-slim::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.4); border-radius: 9999px; } /* Print: drop the app chrome and page-fit statements/invoices/reports. Add data-no-print to hide action bars/filters from the printout. */ @media print { aside, header, #toasts, [data-no-print] { display: none !important; } main { padding: 0 !important; } body { background: #fff !important; } .shadow-sm, .shadow, .shadow-lg { box-shadow: none !important; } a[href] { text-decoration: none; color: #000; } }