/*
* Dark mode base layer.
*
* Activated by the `dark` class on , which is set before first paint by
* the inline script in (preference persisted in localStorage
* under "theme") and toggled by the top-nav sun/moon button
* (DarkModeToggleRenderer).
*
* Strategy: the app's views style themselves with light-palette Tailwind
* utilities (bg-white, text-gray-*, border-gray-*), so rather than dark:
* variants in every view, this sheet remaps those utilities — plus the shared
* chrome (nav, sidebar, cards, tables, inputs) — under html.dark. The
* html.dark prefix outranks the single-class utility, so no !important is
* needed except where views set inline styles.
*
* Palette (Tailwind slate-ish):
* page bg #0f172a
* surface #1e293b (cards, nav, tables — was white / gray-50)
* raised #334155 (hovers, wells — was gray-100/200)
* border #334155
* text #e2e8f0 (was gray-700..900)
* muted text #94a3b8 (was gray-400..600)
*/
html.dark {
color-scheme: dark;
/* Brand-derived text colours (defaults in styles.css :root). On dark
surfaces the brand colour is remixed toward white instead of grey so
headings/tabs stay on-brand but readable. html.dark outranks :root,
so these win wherever the vars are consumed. */
--brand-ink: color-mix(in srgb, var(--brand-primary-colour, #691EDA) 45%, #ffffff);
--brand-accent-ink: color-mix(in srgb, var(--brand-primary-colour, #691EDA) 55%, #ffffff);
/* Section-title colour from the brand "header colour" setting — same
treatment: keep the hue, lift it toward white. */
--header-colour: color-mix(in srgb, var(--brand-primary-colour, #691EDA) 45%, #ffffff);
/* Brand surface variables — widgets (.widget), toolbars and anything
else painted with the content/page brand settings pick these up
automatically, so each component doesn't need its own dark rule. */
--page-bg-colour: #0f172a;
--page-bg-image: none;
--page-text-colour: #e2e8f0;
--content-bg-colour: #1e293b;
--content-bg-image: none;
--content-text-colour: #e2e8f0;
--content-border-colour: #334155;
}
/* ---- Page chrome ---- */
html.dark body {
background-color: #0f172a;
background-image: none;
color: #e2e8f0;
}
html.dark .site-nav {
background-color: #1e293b;
border-bottom-color: #334155 !important; /* inline style on the nav */
}
/* ---- Background utilities ---- */
html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-gray-50 { background-color: #1e293b; }
html.dark .bg-gray-100 { background-color: #283548; }
html.dark .bg-gray-200 { background-color: #334155; }
html.dark .hover\:bg-gray-50:hover { background-color: #283548; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155; }
html.dark .hover\:bg-gray-200:hover { background-color: #3e4c62; }
/* ---- Text utilities ---- */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 { color: #e2e8f0; }
html.dark .text-gray-600,
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #64748b; }
html.dark .text-black { color: #e2e8f0; }
html.dark .hover\:text-gray-600:hover,
html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-900:hover { color: #e2e8f0; }
/* ---- Border utilities ---- */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: #334155; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; }
/* ---- Shared components (styles.css chrome) ---- */
html.dark .page-container,
html.dark .main-panel,
html.dark .page-content {
background-color: transparent;
}
html.dark .card,
html.dark .layout-cell {
background-color: #1e293b;
border-color: #334155;
}
/* Section cards (sections/base.blade.php) set their background as an INLINE
style from the content-bg-colour brand setting, so this needs !important —
it's the only way a stylesheet can outrank an inline declaration. */
html.dark .section-card {
background-color: #1e293b !important;
border-color: #334155 !important;
}
/* Tables render on a card surface; header band + zebra rows get the
raised tone. */
html.dark table thead th { background-color: #283548; color: #94a3b8; }
html.dark table tbody tr:hover { background-color: #283548; }
/* Table-section toolbar band (search + quick filters): styles.css gives it a
light grey gradient; flatten to the raised surface tone. */
html.dark .table-section .table-search-container,
html.dark .table-section .table-quick-filters {
background: #283548;
border-bottom-color: #334155;
}
/* Search toolbar (widget grids / find pages): advanced form panel is
hardcoded white in styles.css. */
html.dark .widget-search form.advanced {
background-color: #1e293b;
}
/* Quick-filter pill group: styles.css tints the brand colour toward white;
re-tint toward the raised surface instead. */
html.dark .quick-filter-pills {
background-color: color-mix(in srgb, var(--brand-primary-colour, #691EDA) 18%, #1e293b);
border-color: color-mix(in srgb, var(--brand-primary-colour, #691EDA) 32%, #1e293b);
}
/* ---- Form controls ---- */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark textarea,
html.dark select {
background-color: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #64748b;
}
/* ---- Pagination ----
styles.css hardcodes the paginator's light palette (link text #374151,
hover #f9fafb, chevrons #9ca3af) per breakpoint, so the utility remaps
above don't reach it. Mirror its two media queries. */
@media screen and (min-width: 601px) {
html.dark .paginator > nav > a {
border-color: #334155;
color: #e2e8f0;
}
html.dark .paginator > nav > a:hover {
background-color: #283548;
}
html.dark .paginator > nav > a.active-page {
background-color: var(--button-primary-bg, #691EDA);
border-color: var(--button-primary-bg, #691EDA);
color: var(--button-primary-fg, #fff);
}
html.dark .paginator > nav > a:first-child,
html.dark .paginator > nav > a:last-child {
border-color: transparent;
color: #64748b;
}
html.dark .paginator > nav > a:first-child:hover,
html.dark .paginator > nav > a:last-child:hover {
background-color: transparent;
color: #94a3b8;
}
/* Ellipsis glyph between page-number gaps */
html.dark .paginator > nav > svg {
color: #64748b;
}
}
@media screen and (max-width: 600px) {
html.dark .paginator > nav > a,
html.dark .paginator > nav > svg {
color: #e2e8f0;
}
html.dark .paginator > nav > a:hover {
background: #283548;
}
html.dark .paginator > nav > a.active-page {
background: var(--button-primary-bg, #691EDA);
color: var(--button-primary-fg, #fff) !important;
}
html.dark .paginator > nav > svg {
color: #64748b;
}
}
/* ---- Misc ---- */
/* hints (command palette trigger) */
html.dark kbd {
background-color: #0f172a;
border-color: #334155;
color: #94a3b8;
}
/* Dropdown panels (Jetstream x-dropdown renders bg-white via utility, already
remapped above); ring utilities used for their border */
html.dark .ring-black { --tw-ring-color: rgb(51 65 85 / 0.6); }
/* Scrollbars follow the dark scheme via color-scheme above. */