/* ============================================================
DIPS Theme — drop-in stylesheet
------------------------------------------------------------
Add this file to public/css/ and link it AFTER Bootstrap in
every view (or once in views/layout.ejs), e.g.:
← new
No markup changes are required. This file:
• Defines the U-Turn-derived design tokens
• Restyles Bootstrap primitives (navbar, card, btn, table,
badge, form-control, modal, dropdown, nav-tabs, alert)
• Restyles Tabulator headers/rows
• Restyles the existing per-page custom CSS where it uses
hard-coded Bootstrap-default grays — those now read the
tokens so future palette changes are one-line
Default mode: Cool surface · Tight density · Soft corners · Inter.
Surface/density/radius are switchable later via [data-*] on
if you want to expose them as user preferences.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ── 1. Design tokens ─────────────────────────────────────── */
:root {
/* Brand neutrals & accents (from U-Turn DS) */
--bone: #F4EFE6;
--paper: #FBF8F2;
--cream: #EDE5D6;
--ink: #1A1714;
--graphite: #3A322C;
--slate: #6B6259;
--stone: #A89E92;
--hairline: #D9D2C3;
--signal-red: #C8362B;
--signal-red-deep:#9A2A22;
--signal-red-tint:#FBE9E7;
--walnut: #5C3A24;
--oak: #C8A675;
--moss: #4A5D3A;
--moss-tint: #E8EDE2;
--sky: #7AA3B8;
--sky-tint: #E4ECF1;
--amber: #B8731A;
--amber-tint: #F6E8D1;
/* Cool grays (default surface mode) */
--cool-50: #F6F7F9;
--cool-100: #EEF0F3;
--cool-200: #E2E5EA;
--cool-300: #CFD3DA;
--cool-500: #6E7480;
--cool-700: #3A3F47;
--cool-900: #14171C;
/* Semantic — wired to Cool by default */
--bg: var(--cool-50);
--surface: #FFFFFF;
--surface-2: var(--cool-100);
--surface-hover: #F2F4F7;
--fg: var(--cool-900);
--fg-muted: var(--cool-700);
--fg-subtle: var(--cool-500);
--fg-disabled: #9097A2;
--fg-on-dark: var(--bone);
--link-color: var(--ink);
/* Primary button = ink (near-black) on light bg in light mode; inverts to a
light button with dark text in dark mode so it isn't black-on-black. */
--btn-primary-bg: var(--ink);
--btn-primary-fg: var(--bone);
--border: var(--cool-200);
--border-strong: var(--cool-300);
--hairline-soft: #EEF0F3;
--accent: var(--signal-red);
--accent-fg: #FFFFFF;
--shadow-sm: 0 1px 2px rgba(20,23,28,.05), 0 1px 1px rgba(20,23,28,.04);
--shadow-md: 0 8px 20px rgba(20,23,28,.08), 0 2px 4px rgba(20,23,28,.05);
--shadow-pop: 0 12px 28px rgba(20,23,28,.12), 0 4px 10px rgba(20,23,28,.06);
/* Type */
--font-display: 'Oswald', 'Helvetica Neue Condensed', sans-serif;
--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
--fs-eyebrow: 11px;
--fs-caption: 12px;
--fs-sm: 13px;
--fs-body: 14px;
--fs-md: 15px;
--fs-lg: 17px;
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
/* Tight density — most DIPS screens are dense ops tools */
--ctrl-h: 32px;
--ctrl-h-sm: 26px;
--row-py: 8px;
--table-cell-py: 8px;
--table-cell-px: 10px;
/* Soft corners */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-pill: 999px;
/* Motion */
--dur-fast: 120ms;
--dur-base: 200ms;
--ease-out: cubic-bezier(.2,.7,.2,1);
}
/* ── 2. Base type / surface ───────────────────────────────── */
html, body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
}
body {
font-feature-settings: "ss01", "cv11";
/* Fill the viewport so the themed background covers short pages — otherwise
the (un-themed) background shows as a strip below the content in
dark mode (CSS custom properties set on don't reach ). */
min-height: 100vh;
}
:where(table, .num, .font-monospace, .mono, [class*="numeric"]) {
font-variant-numeric: tabular-nums;
}
/* Headings — keep Bootstrap structure but warm them up. Oswald is
reserved for the navbar wordmark; the rest of the app reads in Inter. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-body);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--fg);
}
/* Common Bootstrap utility text colors → tokens.
Existing markup like … now reads
the cool palette automatically. */
.text-muted { color: var(--fg-subtle) !important; }
.text-secondary { color: var(--fg-subtle) !important; }
.text-primary { color: var(--fg) !important; }
.text-success { color: #2C7A4B !important; }
.text-danger { color: var(--signal-red) !important; }
.text-warning { color: var(--amber) !important; }
.text-info { color: #3076A8 !important; }
.text-dark { color: var(--fg) !important; }
.text-reset { color: var(--fg) !important; }
.text-body { color: var(--fg) !important; }
.small, small { font-size: var(--fs-caption); }
.font-monospace { font-family: var(--font-mono); }
/* ── 3. Navbar (the dark top bar) ─────────────────────────── */
.navbar.navbar-dark,
.navbar.bg-dark {
background: #14171C !important;
border-bottom: 1px solid rgba(255,255,255,.06);
padding: 0 24px;
min-height: 52px;
}
.navbar.navbar-dark .navbar-brand,
.navbar.bg-dark .navbar-brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.06em;
color: #fff;
text-decoration: none;
}
.navbar.navbar-dark .navbar-brand img {
height: 22px;
width: auto;
}
.navbar.navbar-dark .nav-link,
.navbar.bg-dark .nav-link {
font-size: 13.5px;
font-weight: 500;
color: rgba(244,239,230,.78) !important;
padding: 6px 12px !important;
border-radius: var(--radius-md);
transition: color var(--dur-fast), background var(--dur-fast);
text-decoration: none;
}
.navbar.navbar-dark .nav-link:hover,
.navbar.bg-dark .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.06); }
.navbar.navbar-dark .nav-link.active,
.navbar.bg-dark .nav-link.active,
.navbar.navbar-dark .nav-link.show,
.navbar.bg-dark .nav-link.show { color: #fff !important; background: rgba(255,255,255,.10); }
.navbar.navbar-dark .dropdown-toggle::after { opacity: .5; margin-left: 4px; }
.navbar.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,.15); }
.navbar.navbar-dark form .btn-link { color: rgba(255,255,255,.6); text-decoration: none; }
.navbar.navbar-dark form .btn-link:hover { color: #fff; }
.navbar.navbar-dark .text-white-50 { color: rgba(255,255,255,.65) !important; }
.navbar.navbar-dark .form-control,
.navbar.navbar-dark input[type="search"] {
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.10) !important;
color: #fff !important;
border-radius: var(--radius-md);
height: 30px;
font-size: 13px;
}
.navbar.navbar-dark .form-control::placeholder { color: rgba(244,239,230,.5); }
.navbar.navbar-dark .form-control:focus {
background: rgba(255,255,255,.10) !important;
border-color: rgba(200,54,43,.65) !important;
box-shadow: 0 0 0 2px rgba(200,54,43,.18) !important;
}
/* ── 4. Card ──────────────────────────────────────────────── */
.card {
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: none;
overflow: hidden;
}
/* Bootstrap list groups default to a white background + dark text — theme them
so they follow dark mode (used on role-detail members, etc.). */
.list-group-item {
background: var(--surface);
color: var(--fg);
border-color: var(--hairline-soft);
}
.list-group-item-action:hover,
.list-group-item-action:focus { background: var(--surface-hover); color: var(--fg); }
.card.shadow-sm { box-shadow: var(--shadow-sm); }
.card-header {
background: var(--surface);
color: var(--fg);
border-bottom: 1px solid var(--hairline-soft);
padding: 10px 16px;
font-size: var(--fs-md);
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.card-header.bg-warning,
.card-header.bg-warning-subtle,
.card-header[class*="bg-opacity"] {
background: var(--amber-tint) !important;
color: #6B3F0A !important;
border-bottom-color: rgba(184,115,26,.25);
}
.card-body { padding: 14px 16px; }
.card-footer {
background: var(--surface-2);
border-top: 1px solid var(--hairline-soft);
padding: 10px 16px;
}
.border-warning { border-color: rgba(184,115,26,.45) !important; }
/* ── 5. Buttons ────────────────────────────────────────────── */
.btn {
border-radius: var(--radius-md);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-sm);
height: var(--ctrl-h);
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
/* Middle-align so a button placed among inline content (e.g. action
cells in tall table rows) centers on the line box instead of riding
the text baseline, which otherwise makes the label look high. */
vertical-align: middle;
gap: 6px;
border: 1px solid transparent;
transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform 60ms;
white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-sm { height: var(--ctrl-h-sm); padding: 0 10px; font-size: 12.5px; }
.btn-xs { height: 22px; padding: 0 8px; font-size: 11.5px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: var(--fs-body); }
.btn:focus, .btn:focus-visible {
box-shadow: 0 0 0 3px rgba(200,54,43,.18);
outline: none;
}
/* Primary maps to ink → red on hover (the U-Turn signature) */
.btn-primary {
background: var(--btn-primary-bg) !important;
border-color: var(--btn-primary-bg) !important;
color: var(--btn-primary-fg) !important;
}
.btn-primary:hover,
.btn-primary:focus {
background: var(--signal-red) !important;
border-color: var(--signal-red) !important;
color: #fff !important;
}
.btn-secondary,
.btn-light {
background: var(--surface) !important;
border-color: var(--border-strong) !important;
color: var(--fg) !important;
}
.btn-secondary:hover,
.btn-light:hover {
background: var(--surface-hover) !important;
border-color: var(--fg-muted) !important;
}
.btn-outline-primary {
background: var(--surface) !important;
border-color: var(--btn-primary-bg) !important;
color: var(--btn-primary-bg) !important;
}
.btn-outline-primary:hover { background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; }
.btn-outline-secondary {
background: var(--surface) !important;
border-color: var(--border-strong) !important;
color: var(--fg) !important;
}
.btn-outline-secondary:hover { background: var(--surface-hover) !important; border-color: var(--fg-muted) !important; }
.btn-outline-success {
background: var(--surface) !important;
border-color: #2C7A4B !important;
color: #2C7A4B !important;
}
.btn-outline-success:hover { background: #2C7A4B !important; color: #fff !important; }
.btn-outline-danger {
background: var(--surface) !important;
border-color: var(--signal-red) !important;
color: var(--signal-red) !important;
}
.btn-outline-danger:hover { background: var(--signal-red) !important; color: #fff !important; }
.btn-success {
background: #2C7A4B !important;
border-color: #2C7A4B !important;
color: #fff !important;
}
.btn-success:hover { background: #1F5C38 !important; border-color: #1F5C38 !important; }
.btn-danger {
background: var(--signal-red) !important;
border-color: var(--signal-red) !important;
color: #fff !important;
}
.btn-danger:hover { background: var(--signal-red-deep) !important; border-color: var(--signal-red-deep) !important; }
.btn-warning {
background: var(--amber) !important;
border-color: var(--amber) !important;
color: #fff !important;
}
.btn-link {
color: var(--ink);
text-decoration: none;
padding: 0 4px;
height: auto;
}
.btn-link:hover { color: var(--signal-red); }
/* Compact buttons used inside .btn-group-sm — Bootstrap normally
sizes group children as small, but my .btn padding above is the
same regardless of group context, which overflows narrow sidebars
(e.g. the schedule builder's "Unassigned / Assigned" toggle). */
.btn-group-sm > .btn {
height: var(--ctrl-h-sm);
padding: 0 10px;
font-size: 12.5px;
}
.btn-group-sm > .btn-outline-primary {
background: var(--surface) !important;
border-color: var(--border-strong) !important;
color: var(--fg-muted) !important;
}
.btn-group-sm > .btn-outline-primary:hover {
background: var(--surface-hover) !important;
color: var(--fg) !important;
}
.btn-group-sm > .btn-outline-primary.active {
background: var(--ink) !important;
color: var(--bone) !important;
border-color: var(--ink) !important;
}
/* ── 6. Form controls ─────────────────────────────────────── */
.form-control,
.form-select {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--fg);
height: var(--ctrl-h);
font-size: var(--fs-sm);
padding: 4px 10px;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-select {
/* Restore Bootstrap's chevron arrow (the shorthand above would wipe it) */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B6259' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.6rem center;
background-size: 12px 10px;
padding-right: 28px;
appearance: none;
}
.form-control:focus,
.form-select:focus {
border-color: #3076A8;
box-shadow: 0 0 0 3px rgba(48,118,168,.15);
background-color: var(--surface);
color: var(--fg);
}
.form-control-sm,
.form-select-sm { height: var(--ctrl-h-sm); font-size: 12.5px; padding: 2px 8px; }
.form-control::placeholder { color: var(--fg-disabled); }
textarea.form-control { height: auto; min-height: 64px; padding: 8px 10px; line-height: var(--lh-snug); }
.form-label {
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .04em;
color: var(--fg-muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.form-text { font-size: 11.5px; color: var(--fg-subtle); }
/* Input groups */
.input-group { border-radius: var(--radius-md); }
.input-group-text {
background: var(--surface-2);
border-color: var(--border);
color: var(--fg-subtle);
font-size: 12px;
}
/* Checkbox / radio */
.form-check-input {
border: 1.5px solid var(--border-strong);
background: var(--surface);
width: 16px;
height: 16px;
margin-top: 0.18em;
border-radius: var(--radius-xs);
}
/* Traditional checkbox: light box, dark check mark — no solid fill. */
.form-check-input[type="checkbox"]:checked {
background-color: var(--surface);
border-color: var(--fg-muted);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231A1714' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input[type="radio"]:checked {
background-color: var(--surface);
border-color: var(--fg-muted);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%231A1714'/%3e%3c/svg%3e");
}
.form-check-input:focus {
border-color: var(--fg-muted);
box-shadow: 0 0 0 3px rgba(48,118,168,.18);
}
.form-check-label { font-size: var(--fs-sm); color: var(--fg); }
/* Dark mode: the box uses --surface (= the modal/page bg, so it disappears)
and the check/dot glyph is hardcoded dark (#1A1714, invisible on dark).
Lift the box to --surface-2 and swap the glyph to a light stroke/fill. */
body[data-theme="dark"] .form-check-input { background-color: var(--surface-2); border-color: var(--border-strong); }
body[data-theme="dark"] .form-check-input[type="checkbox"]:checked,
body[data-theme="dark"] .form-check-input[type="radio"]:checked { background-color: var(--surface-2); border-color: var(--fg-muted); }
body[data-theme="dark"] .form-check-input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ECEEF2' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
body[data-theme="dark"] .form-check-input[type="radio"]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%23ECEEF2'/%3e%3c/svg%3e");
}
/* ── 7. Tables (plain + .table-sm + .table-bordered) ─────── */
.table {
color: var(--fg);
font-size: var(--fs-sm);
margin-bottom: 0;
border-color: var(--hairline-soft);
}
.table > :not(caption) > * > * {
background-color: transparent;
/* Bootstrap sets a cell-level color via --bs-table-color (dark); set it
here too so cell text follows the theme in dark mode. Contextual rows
(.table-danger etc.) override with !important and still win. */
color: var(--fg);
padding: var(--table-cell-py) var(--table-cell-px);
border-bottom-color: var(--hairline-soft);
vertical-align: middle;
}
.table > thead {
background: var(--surface-2);
color: var(--fg-muted);
}
.table > thead > tr > th {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--fg-muted);
border-bottom: 1px solid var(--border);
border-top: 0;
background: var(--surface-2);
white-space: normal;
line-height: 1.25;
}
.table-light,
.table > thead.table-light,
.table > thead.table-light > tr > th {
background: var(--surface-2) !important;
color: var(--fg-muted) !important;
/* Bootstrap's .table-light variant computes its own light
--bs-table-border-color (#c6c7c8), which shows as a stray light line at
the top of bordered tables in dark mode. Pin it to the theme token. */
--bs-table-border-color: var(--hairline-soft);
}
.table-bordered,
.table-bordered > :not(caption) > * > * {
border-color: var(--hairline-soft);
}
.table-bordered > thead > tr > th {
border-color: var(--border);
border-bottom-width: 1px;
}
/* Spec-table pattern: | labels +
value | . The fw-semibold + text-muted combo makes labels feel
heavier than their values, which inverts the visual hierarchy.
Lighten the labels so the value reads as the prominent cell. */
.table > tbody > tr > td.fw-semibold.text-muted {
font-weight: 500 !important;
color: var(--fg-subtle) !important;
background: var(--surface-2);
}
.table tbody tr { transition: background var(--dur-fast); }
.table-hover tbody tr:hover > * { background-color: var(--surface-hover); }
.table-sm > :not(caption) > * > * { padding: 6px 10px; }
/* Status-tint rows (overdue / stale / due-soon — used on POs and Cycle Count)
keep a light tint background in BOTH themes, so force dark text + links for
contrast (mirrors the Tabulator .row-tint on the Part/Inventory managers).
Accent spans/badges keep their own colors. */
tr.row-overdue td, tr.row-overdue td a,
tr.row-stale td, tr.row-stale td a,
tr.row-overdue-strong td, tr.row-overdue-strong td a,
tr.row-due-soon td, tr.row-due-soon td a { color: #1b1e23 !important; }
:is(tr.row-overdue, tr.row-stale, tr.row-overdue-strong, tr.row-due-soon) td :is(.text-muted, small),
body[data-theme="dark"] :is(tr.row-overdue, tr.row-stale, tr.row-overdue-strong, tr.row-due-soon) td :is(.text-muted, small) {
color: #5b6068 !important;
}
/* Row state colors (used heavily in po-detail.ejs for overdue/warn rows) */
.table-danger,
.table-danger > * { background: var(--signal-red-tint) !important; color: var(--signal-red-deep) !important; }
.table-warning,
.table-warning > * { background: var(--amber-tint) !important; color: #6B3F0A !important; }
.table-success,
.table-success > * { background: var(--moss-tint) !important; color: #2F4621 !important; }
.table-info,
.table-info > * { background: var(--sky-tint) !important; color: #2A4A5C !important; }
/* Dark mode: color-coded rows get SOLID dark-blended backgrounds + bright
text instead of light washes / forced dark text. Solid tones render
consistently over zebra + hover (alpha washes muddied). Covers Bootstrap
.table-* and the custom status rows (POs / Cycle Count). */
body[data-theme="dark"] .table-danger,
body[data-theme="dark"] .table-danger > * { background: #3A2320 !important; color: #F2ADA4 !important; }
body[data-theme="dark"] .table-warning,
body[data-theme="dark"] .table-warning > * { background: #382C19 !important; color: #EBC684 !important; }
body[data-theme="dark"] .table-success,
body[data-theme="dark"] .table-success > * { background: #213027 !important; color: #A9D6A2 !important; }
body[data-theme="dark"] .table-info,
body[data-theme="dark"] .table-info > * { background: #1E2D37 !important; color: #AFD3E6 !important; }
body[data-theme="dark"] .table-hover .table-danger:hover > * { background: #4A2C28 !important; }
body[data-theme="dark"] .table-hover .table-warning:hover > * { background: #483820 !important; }
body[data-theme="dark"] .table-hover .table-success:hover > * { background: #2A3E31 !important; }
body[data-theme="dark"] .table-hover .table-info:hover > * { background: #263945 !important; }
body[data-theme="dark"] tr.row-overdue-strong > td { background: #3A2320 !important; }
body[data-theme="dark"] tr.row-overdue > td,
body[data-theme="dark"] tr.row-stale > td { background: #382C19 !important; }
body[data-theme="dark"] tr.row-due-soon > td { background: #213027 !important; }
body[data-theme="dark"] tr.row-overdue-strong:hover > td { background: #4A2C28 !important; }
body[data-theme="dark"] tr.row-overdue:hover > td,
body[data-theme="dark"] tr.row-stale:hover > td { background: #483820 !important; }
body[data-theme="dark"] tr.row-due-soon:hover > td { background: #2A3E31 !important; }
body[data-theme="dark"] tr.row-overdue-strong > td,
body[data-theme="dark"] tr.row-overdue-strong > td * { color: #F2ADA4 !important; }
body[data-theme="dark"] tr.row-overdue > td, body[data-theme="dark"] tr.row-overdue > td *,
body[data-theme="dark"] tr.row-stale > td, body[data-theme="dark"] tr.row-stale > td * { color: #EBC684 !important; }
body[data-theme="dark"] tr.row-due-soon > td,
body[data-theme="dark"] tr.row-due-soon > td * { color: #A9D6A2 !important; }
/* Muted/small spans on tinted rows (out-specify the light-mode #5b6068 rule). */
body[data-theme="dark"] tr.row-overdue-strong td :is(.text-muted, small) { color: #F2ADA4 !important; }
body[data-theme="dark"] tr.row-overdue td :is(.text-muted, small),
body[data-theme="dark"] tr.row-stale td :is(.text-muted, small) { color: #EBC684 !important; }
body[data-theme="dark"] tr.row-due-soon td :is(.text-muted, small) { color: #A9D6A2 !important; }
/* Wrap any .table-responsive in a soft-bordered surface so naked tables
sitting between labels still look like first-class panels. */
.table-responsive {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
/* Image/file drop zones (.upload-drop) hardcode a white bg + light dashed
border in style.css — theme them so they follow dark mode (used on the
new/edit part, product, and subassembly forms). */
.upload-drop {
background: var(--surface) !important;
border-color: var(--border-strong) !important;
color: var(--fg-muted);
}
.upload-drop:hover,
.upload-drop.drag-over {
background: var(--surface-hover) !important;
border-color: var(--sky, #7AA3B8) !important;
}
/* FullCalendar (v6) — point its CSS variables at theme tokens so the calendar
(Absences page, and any future one) follows light/dark. */
.fc {
--fc-border-color: var(--border);
--fc-page-bg-color: var(--surface);
--fc-neutral-bg-color: var(--surface-2);
--fc-neutral-text-color: var(--fg-muted);
--fc-today-bg-color: var(--surface-hover);
--fc-list-event-hover-bg-color: var(--surface-hover);
--fc-button-bg-color: var(--surface-2);
--fc-button-border-color: var(--border-strong);
--fc-button-text-color: var(--fg);
--fc-button-hover-bg-color: var(--surface-hover);
--fc-button-hover-border-color: var(--fg-muted);
--fc-button-active-bg-color: var(--surface-hover);
--fc-button-active-border-color: var(--fg-muted);
color: var(--fg);
}
.fc .fc-col-header-cell { background: var(--surface-2); }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion { color: var(--fg-muted); }
.fc .fc-toolbar-title { color: var(--fg); }
/* Native date/time picker icons are dark glyphs baked into the control —
invert them in dark mode so they're visible on the dark input. */
body[data-theme="dark"] ::-webkit-calendar-picker-indicator { filter: invert(0.85); }
/* Bootstrap's .btn-close is a dark SVG glyph — invert it in dark mode (the
same filter .btn-close-white uses) so the modal close X is visible. */
body[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
/* Disabled / readonly inputs default to Bootstrap's light --bs-secondary-bg,
which stays light in dark mode. Theme them so they read as a muted surface. */
.form-control:disabled, .form-control[readonly],
.form-select:disabled, textarea.form-control:disabled {
background-color: var(--surface-2) !important;
color: var(--fg-muted);
border-color: var(--border);
}
/* ── 8. Badges & pill chips ───────────────────────────────── */
.badge {
font-family: var(--font-body);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0;
padding: 3px 8px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
line-height: 1.4;
vertical-align: middle;
}
.badge.bg-success { background: var(--moss-tint) !important; color: #2F4621 !important; border-color: rgba(74,93,58,.25); }
.badge.bg-info { background: var(--sky-tint) !important; color: #2A4A5C !important; border-color: rgba(122,163,184,.30); }
.badge.bg-warning { background: var(--amber-tint) !important; color: #6B3F0A !important; border-color: rgba(184,115,26,.28); }
.badge.bg-warning.text-dark { color: #6B3F0A !important; }
.badge.bg-danger { background: var(--signal-red-tint) !important; color: var(--signal-red-deep) !important; border-color: rgba(200,54,43,.28); }
.badge.bg-secondary { background: var(--surface-2) !important; color: var(--fg-muted) !important; border-color: var(--border); }
.badge.bg-primary { background: var(--ink) !important; color: var(--bone) !important; border-color: var(--ink); }
.badge.bg-dark { background: var(--cool-700) !important; color: #fff !important; }
.badge.bg-light { background: var(--surface-2) !important; color: var(--fg-muted) !important; border-color: var(--border); }
/* Small status dot inside a badge (e.g. the "Active" pill). Inherits the
badge's text color. */
.badge .dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
margin-right: 5px;
vertical-align: middle;
opacity: .9;
}
/* ── 8b. Identity utilities (avatar, icon button, eyebrow/caption) ──
Reusable across the visual refresh — avatars in user lists/headers,
borderless icon buttons (modal close, etc.), and the small uppercase
eyebrow / muted caption text pair. */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
flex: none;
border-radius: 50%;
background: var(--cool-700);
color: #fff;
font-weight: 600;
font-size: 12px;
letter-spacing: .02em;
text-transform: uppercase;
user-select: none;
}
.avatar-lg { width: 40px; height: 40px; font-size: 14.5px; }
.avatar-md { width: 28px; height: 28px; font-size: 11.5px; }
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--fg-muted);
cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--fg); }
.u-eyebrow {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--fg-muted);
}
.u-caption { font-size: var(--fs-caption); color: var(--fg-muted); }
/* ── 8c. Navbar user menu (hosts the dark-mode toggle) ──────────────
The trigger sits on the always-dark navbar (light text); the dropdown
is a themed surface popover that follows light/dark. */
.user-trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 8px; border: 1px solid transparent;
background: transparent; border-radius: var(--radius-md);
cursor: pointer; font: inherit; color: rgba(255,255,255,.85);
}
.user-trigger:hover,
.user-trigger[aria-expanded="true"] { background: rgba(255,255,255,.10); }
.user-trigger .user-trigger-name { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.85); }
.user-trigger .fa-chevron-down { color: rgba(255,255,255,.6); }
.user-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 1050;
width: 250px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--shadow-pop); overflow: hidden;
}
.user-menu[hidden] { display: none; }
.user-menu .um-identity { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--hairline-soft); }
.user-menu .um-identity .nm { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu .um-section { padding: 4px; }
.user-menu .um-section + .um-section { border-top: 1px solid var(--hairline-soft); }
.um-row {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border: 0; background: transparent;
font: inherit; font-size: 13px; color: var(--fg);
cursor: pointer; border-radius: var(--radius-sm); text-align: left;
}
.um-row:hover { background: var(--surface-hover); }
.um-row .label { flex: 1; }
.um-switch { width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0; background: var(--border-strong); position: relative; transition: background var(--dur-fast); }
.um-switch[data-on="true"] { background: var(--moss); }
.um-switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: left var(--dur-fast) var(--ease-out); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.um-switch[data-on="true"] .knob { left: 16px; }
/* ── 9. Alerts ────────────────────────────────────────────── */
.alert {
border-radius: var(--radius-md);
border: 1px solid;
padding: 10px 14px;
font-size: var(--fs-sm);
}
.alert-success { background: var(--moss-tint); border-color: rgba(74,93,58,.30); color: #2F4621; }
.alert-info { background: var(--sky-tint); border-color: rgba(122,163,184,.30); color: #2A4A5C; }
.alert-warning { background: var(--amber-tint); border-color: rgba(184,115,26,.30); color: #6B3F0A; }
.alert-danger { background: var(--signal-red-tint); border-color: rgba(200,54,43,.30); color: var(--signal-red-deep); }
/* ── 10. Nav tabs (used by RMAs, etc.) ────────────────────── */
.nav-tabs {
border-bottom: 1px solid var(--border);
gap: 2px;
}
.nav-tabs .nav-link {
color: var(--fg-subtle);
border: 1px solid transparent;
border-bottom: 0;
background: transparent;
border-radius: var(--radius-md) var(--radius-md) 0 0;
padding: 9px 14px;
font-size: var(--fs-sm);
font-weight: 500;
margin-bottom: -1px;
transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-tabs .nav-link:hover { color: var(--fg); background: var(--surface-2); border-color: transparent; }
.nav-tabs .nav-link.active {
color: var(--fg);
background: var(--surface);
border-color: var(--border);
border-bottom-color: var(--surface);
}
.nav-tabs .nav-link .badge.bg-secondary {
font-size: 10.5px;
padding: 1px 6px;
}
.nav-tabs .nav-link.active .badge.bg-secondary {
background: var(--ink) !important;
color: var(--bone) !important;
border-color: var(--ink);
}
/* ── 11. Dropdowns ────────────────────────────────────────── */
.dropdown-menu {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: 0;
font-size: var(--fs-sm);
color: var(--fg);
min-width: 200px;
}
.dropdown-item {
border-radius: 0;
padding: 5px 12px;
color: var(--fg);
line-height: 1.5;
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--surface-hover); color: var(--fg); }
.dropdown-item.active,
.dropdown-item:active { background: #3076A8; color: #fff; }
.dropdown-header {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--fg-subtle);
padding: 8px 12px 4px;
}
.dropdown-divider { border-color: var(--hairline-soft); margin: 3px 0; }
/* Toggle arrow on .dropdown-toggle — muted so the label reads first */
.dropdown-toggle::after {
border-top-color: currentColor;
opacity: .55;
margin-left: 6px;
vertical-align: middle;
}
/* ── 12. Modal ─────────────────────────────────────────────── */
.modal-content {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-pop);
color: var(--fg);
}
.modal-header {
border-bottom: 1px solid var(--hairline-soft);
padding: 12px 16px;
}
.modal-header .modal-title {
font-size: var(--fs-md);
font-weight: 600;
letter-spacing: -0.005em;
}
.modal-body { padding: 16px; }
.modal-footer {
background: var(--surface-2);
border-top: 1px solid var(--hairline-soft);
padding: 10px 16px;
}
.btn-close { opacity: .5; }
.btn-close:hover { opacity: .85; }
/* ── 13. Misc Bootstrap utilities tied to defaults ───────── */
hr { border-color: var(--hairline-soft); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-dark { background-color: var(--cool-900) !important; }
a { color: var(--link-color); }
a:hover { color: var(--signal-red); }
/* ── Default link indication ─────────────────────────────────
At rest, content links read as plain text — give them a faint
dotted underline so they're discoverable without relying on
the hover color change. Scoped so it doesn't decorate things
that are clearly NOT body-text links: nav items, buttons,
dropdown items, tabs, and anything Bootstrap-marked with
.text-decoration-none. The :where() wrapper keeps specificity
at 0 so any explicit text-decoration override still wins. */
:where(a):not(
.navbar a, .navbar-brand,
.nav-link, .nav-tabs a,
.dropdown-item, .dropdown-toggle,
.btn, .btn-link, [class*="btn-"],
.page-link, .breadcrumb a,
.text-decoration-none, .text-decoration-none *,
.text-reset, .text-reset *
) {
text-decoration: underline dotted var(--border-strong);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
:where(a):not(
.navbar a, .navbar-brand,
.nav-link, .nav-tabs a,
.dropdown-item, .dropdown-toggle,
.btn, .btn-link, [class*="btn-"],
.page-link, .breadcrumb a,
.text-decoration-none, .text-decoration-none *,
.text-reset, .text-reset *
):hover {
text-decoration: underline solid var(--signal-red);
color: var(--signal-red);
}
/* DIPS sprinkles class="text-decoration-none" on virtually every table
link (Tabulator formatters, EJS table cells) to kill Bootstrap's
default underline. That's now too aggressive — we WANT a link
indication. Re-enable the dotted underline for links inside data
surfaces (tables, cards, definition lists), even when the link is
marked .text-decoration-none. Outside those surfaces .text-decoration-none
still wins. */
.tabulator a,
.table a,
.card-body a,
dl a,
.def-list a {
text-decoration: underline dotted var(--border-strong) !important;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.tabulator a:hover,
.table a:hover,
.card-body a:hover,
dl a:hover,
.def-list a:hover {
text-decoration: underline solid var(--signal-red) !important;
color: var(--signal-red);
}
/* But still let buttons-styled-as-links and explicit opt-outs inside
tables/cards win where they were meant to: */
.tabulator .btn,
.table .btn,
.card-body .btn,
.tabulator a.btn,
.table a.btn,
.card-body a.btn {
text-decoration: none !important;
}
/* Bootstrap's .table-light tweaks bleed into spec
panels in po-detail / shipping; keep them readable. */
th.bg-light, td.bg-light {
background: var(--surface-2) !important;
color: var(--fg-muted) !important;
font-weight: 600;
font-size: 12px;
}
/* Code/monospace cells (.font-monospace) — make build-order IDs and
serials sit at a consistent weight + size. */
.font-monospace,
.mono {
font-family: var(--font-mono);
font-size: 12.5px;
}
/* ── 14. Tabulator (used by inventory / parts / orders) ───── */
.tabulator {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: var(--fs-sm);
color: var(--fg);
}
.tabulator .tabulator-header {
background: var(--surface-2) !important;
border-bottom: 1px solid var(--border) !important;
}
.tabulator .tabulator-header .tabulator-col {
background: var(--surface-2) !important;
border-right: 1px solid var(--hairline-soft) !important;
position: relative;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
padding: 6px 6px !important;
height: 100% !important;
box-sizing: border-box;
}
/* Layout: title-holder fills the full column box. Title shrinks to its
text on the left (allowing wrap when the column is too narrow), and
the sort arrow is pushed to the far right via margin-left: auto.
align-items: center on a 100%-height holder vertically centers
everything to the column — so the arrow stays in the same vertical
spot whether the title is one line or two. */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder {
display: flex !important;
align-items: center !important;
width: 100% !important;
height: 100% !important;
gap: 0;
position: static !important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title,
.tabulator .tabulator-header .tabulator-col .tabulator-col-title-wrap {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--fg-muted);
line-height: 1.25;
white-space: normal;
text-overflow: clip;
overflow: visible;
flex: 0 1 auto !important; /* shrink to content (no growth) */
min-width: 0 !important;
width: auto !important;
max-width: calc(100% - 12px) !important; /* leave room for the sorter */
padding-right: 0 !important; /* override Tabulator's 25px ghost pad */
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter {
position: static !important;
flex: 0 0 8px;
width: 8px;
height: 12px;
margin: 0 0 0 auto !important; /* push to far right of the column */
align-self: center;
display: flex;
align-items: center;
justify-content: center;
}
/* Arrow visibility: hidden by default (space reserved by sorter's fixed
width, so no text shift), gray on hover, ink on active sort. */
.tabulator .tabulator-col[aria-sort="none"] .tabulator-arrow,
.tabulator .tabulator-col:not([aria-sort]) .tabulator-arrow {
visibility: hidden;
}
.tabulator .tabulator-col.tabulator-sortable:hover[aria-sort="none"] .tabulator-arrow,
.tabulator .tabulator-col.tabulator-sortable:hover:not([aria-sort]) .tabulator-arrow {
visibility: visible;
border-bottom-color: var(--fg-subtle) !important;
opacity: .45;
}
.tabulator .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
.tabulator .tabulator-col[aria-sort="descending"] .tabulator-arrow {
visibility: visible;
border-bottom-color: var(--fg) !important;
border-top-color: var(--fg) !important;
}
.tabulator .tabulator-row {
border-bottom: 1px solid var(--hairline-soft);
background: var(--surface);
}
.tabulator .tabulator-row.tabulator-row-even:not(.row-tint) { background: var(--surface) !important; }
.tabulator .tabulator-row:not(.row-tint):hover,
.tabulator .tabulator-row.tabulator-row-even:not(.row-tint):hover {
background: var(--surface-hover) !important;
}
.tabulator .tabulator-row .tabulator-cell {
border-right: 1px solid var(--hairline-soft);
padding: 7px 10px;
color: var(--fg);
}
/* Part / Inventory Manager status-tinted rows (low-stock / due-soon / overdue).
The row formatter sets a .row-* class (+ .row-tint, which keeps the row out
of the zebra/hover surface overrides); the colour lives here so it can swap
per theme. LIGHT keeps the original pastels with dark text. */
.tabulator .tabulator-row.row-lowstock { background: #C9DDFF !important; }
.tabulator .tabulator-row.row-due-soon { background: #FEEFB3 !important; }
.tabulator .tabulator-row.row-overdue { background: #FFBABA !important; }
.tabulator .tabulator-row.row-tint .tabulator-cell { color: #1b1e23 !important; }
.tabulator .tabulator-row.row-tint .text-muted { color: #5b6068 !important; }
/* DARK: solid hue-blended backgrounds + bright text (matches the POs / cycle-
count treatment) instead of the light pastels. Per-status text colour also
covers links + muted cells, which the light .row-tint rule above leaves out. */
body[data-theme="dark"] .tabulator .tabulator-row.row-lowstock { background: #1E2D37 !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-due-soon { background: #382C19 !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-overdue { background: #3A2320 !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-lowstock:hover { background: #263945 !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-due-soon:hover { background: #483820 !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-overdue:hover { background: #4A2C28 !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-lowstock .tabulator-cell,
body[data-theme="dark"] .tabulator .tabulator-row.row-lowstock .tabulator-cell a,
body[data-theme="dark"] .tabulator .tabulator-row.row-lowstock .text-muted { color: #AFD3E6 !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-due-soon .tabulator-cell,
body[data-theme="dark"] .tabulator .tabulator-row.row-due-soon .tabulator-cell a,
body[data-theme="dark"] .tabulator .tabulator-row.row-due-soon .text-muted { color: #EBC684 !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-overdue .tabulator-cell,
body[data-theme="dark"] .tabulator .tabulator-row.row-overdue .tabulator-cell a,
body[data-theme="dark"] .tabulator .tabulator-row.row-overdue .text-muted { color: #F2ADA4 !important; }
.tabulator .tabulator-footer {
background: var(--surface-2);
border-top: 1px solid var(--border);
color: var(--fg-muted);
}
/* ── 15. Global search dropdown (style.css overrides) ─────── */
#searchDropdown {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-pop) !important;
}
.srch-cat {
font-size: 10.5px;
letter-spacing: .10em;
color: var(--fg-subtle);
font-weight: 600;
}
.srch-item { color: var(--fg); border-radius: var(--radius-sm); }
.srch-item:hover { background: var(--surface-hover) !important; color: var(--fg); }
.srch-title { font-size: var(--fs-sm); }
.srch-sub { font-size: 11.5px; color: var(--fg-subtle); }
.srch-div { border-color: var(--hairline-soft); }
.srch-msg { color: var(--fg-subtle); font-size: var(--fs-sm); }
/* ── 16. Page polish — H4/H5 page titles (every view uses
… or …) ───── */
.container-fluid > .d-flex > h4,
.container-fluid > .d-flex > h5,
.container-fluid > div > h4.mb-0,
.container-fluid > div > h5.mb-0 {
font-family: var(--font-body);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--fg);
}
/* (Removed) The Claude-design divider under the top-of-page filter bar
(border-bottom + 12px padding + 18px !important margin) added ~30px of
vertical space and only applied to bars still using a bare `.d-flex`
(parts/inventory switched to `d-md-flex` for the mobile bar and so lost
it, creating an inconsistency). Dropped so every manager page keeps the
tight, consistent spacing (just the Bootstrap mb-3). */
/* ── 17. Optional: density / surface / dark mode hooks ─────
Toggle these on etc to
swap the look without touching markup. Defaults above are
Cool / Tight / Soft / Light. ─────────────────────────────── */
body[data-surface="bone"] {
--bg: var(--bone);
--surface: var(--paper);
--surface-2: var(--cream);
--surface-hover: #ECE5D5;
--border: var(--hairline);
--border-strong: var(--stone);
--hairline-soft: #E6E0D0;
--fg: var(--ink);
--fg-muted: var(--graphite);
--fg-subtle: var(--slate);
}
body[data-surface="paper"] {
--bg: #F2EFE9;
--surface: #FBFAF6;
--surface-2: #F6F4EE;
--surface-hover: #F0EDE5;
--border: #E3DED1;
--border-strong: #CDC5B1;
--hairline-soft: #ECE7DA;
--fg: var(--ink);
--fg-muted: var(--graphite);
--fg-subtle: var(--slate);
}
body[data-density="comfortable"] {
--ctrl-h: 36px;
--ctrl-h-sm: 30px;
--table-cell-py: 11px;
--table-cell-px: 14px;
}
body[data-radius="sharp"] {
--radius-xs: 0;
--radius-sm: 0;
--radius-md: 2px;
--radius-lg: 4px;
--radius-pill: 4px;
}
body[data-theme="dark"] {
--bg: #15171C;
--surface: #1D2026;
--surface-2: #25282F;
--surface-hover: #2A2D35;
--fg: #ECEEF2;
--fg-muted: #BCC0C8;
--fg-subtle: #8A8F99;
--fg-disabled: #5A5F69;
--border: #2E323A;
--border-strong: #3A3F49;
--hairline-soft: #24262C;
/* Content links are --ink (near-black) in light mode; in dark they must be
light. Re-point the token so every follows the theme — no per-page
overrides. */
--link-color: #EAECF1;
/* Primary buttons invert in dark mode: light surface, dark text (otherwise
the --ink background is black-on-black). Hover still goes signal-red. */
--btn-primary-bg: #E8EAEF;
--btn-primary-fg: #15171C;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-md: 0 8px 20px rgba(0,0,0,.45);
--shadow-pop: 0 12px 28px rgba(0,0,0,.55);
}
/* Dark mode: lift muted/secondary text in BOTH Tabulator and Bootstrap tables
off the dark surface (--fg-subtle is too dim). Light mode untouched. */
body[data-theme="dark"] :is(.tabulator, .table) .text-muted,
body[data-theme="dark"] :is(.tabulator, .table) small.text-muted { color: var(--fg-muted) !important; }
/* ============================================================
18. Per-page | |