/* Bridge: makes Bootstrap and the legacy modern-style.css utilities obey the
 * token layer.
 *
 * Why this file exists. The app still ships bootstrap.min.css (and needs
 * Bootstrap's JS for 19 modals, the dropdowns and the offcanvas), and
 * modern-style.css defines its own hand-written utilities like `bg-gray-50` and
 * `text-gray-600` with hardcoded light colours. Without remapping those, dark
 * mode would render white cards on a dark canvas.
 *
 * This is deliberately a bridge, not a foundation: as pages move to the `ui-`
 * components, the rules here lose their targets and can be deleted in chunks.
 *
 * Load order (set in includes/layout.php) is what makes this work: this file
 * comes after bootstrap.min.css and modern-style.css, so on equal specificity
 * it wins by source order without needing !important.
 */

/* ---------------------------------------------------------------- the grey ramp
 * modern-style.css defines --gray-50..900 in :root and leans on them 75 times.
 * Re-pointing the ramp at semantic tokens fixes all of those at once instead of
 * chasing individual components.
 *
 * Safe to invert wholesale because the usage is strictly separated: 50-300 appear
 * only in background and border properties, 400-900 only in `color`. Verified
 * against the stylesheet, not assumed.
 */
[data-theme="dark"] {
    --gray-50: var(--surface-sunken);
    --gray-100: var(--surface-sunken);
    --gray-200: var(--border);
    --gray-300: var(--border-strong);
    --gray-400: var(--text-subtle);
    --gray-500: var(--text-subtle);
    --gray-600: var(--text-muted);
    --gray-700: var(--text-muted);
    --gray-800: var(--text);
    --gray-900: var(--text);
}

/* ---------------------------------------------------------------- page shell */
body {
    background: var(--canvas);
    color: var(--text);
}

/* modern-style.css sets these on body; re-point them at tokens so the canvas
 * follows the theme. */
.bg-gray-50 { background-color: var(--canvas); }
.bg-white { background-color: var(--surface); }

/* Page headings still come from modern-style.css, which hardcodes #111827 and
 * #4b5563 — effectively invisible on a dark canvas. */
.page-title { color: var(--text); }
.page-subtitle { color: var(--text-muted); }

/* ---------------------------------------------------------------- neutral text utilities */
.text-gray-900 { color: var(--text); }
.text-gray-800 { color: var(--text); }
.text-gray-700 { color: var(--text-muted); }
.text-gray-600 { color: var(--text-muted); }
.text-gray-500 { color: var(--text-muted); }
.text-gray-400 { color: var(--text-subtle); }
.text-black { color: var(--text); }
.text-muted { color: var(--text-muted) !important; }

.border-gray-100 { border-color: var(--border); }
.border-gray-200 { border-color: var(--border); }
.border-gray-300 { border-color: var(--border-strong); }

/* ---------------------------------------------------------------- cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    box-shadow: var(--elev-2);
}

/* Hardcoded #111827 in modern-style.css; 1.03:1 on a dark card. */
.card-title { color: var(--text); }

.card-header,
.card-footer {
    background: var(--surface-sunken);
    border-color: var(--border);
    color: var(--text);
}

/* ---------------------------------------------------------------- tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    /* modern-style.css declares .table twice, and the second one (line ~949) sets
     * `background: white`, so this has to be restated rather than left to the
     * Bootstrap variable above. */
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.table > thead {
    color: var(--text-muted);
    background: var(--surface-sunken);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--border);
    color: var(--text);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-hover);
    color: var(--text);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: color-mix(in oklab, var(--text) 3%, transparent);
    color: var(--text);
}

/* ---------------------------------------------------------------- legacy white surfaces
 * These hardcode `background: white` rather than using the ramp, so the ramp
 * remap above can't reach them. Still used by pages not yet on ui- components.
 */
.stat-card,
.table-container,
.quick-action,
.job-item,
.login-card {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.btn-outline { background: var(--surface); color: var(--text); }
.btn-outline:hover { background: var(--surface-hover); }

.quick-action:hover,
.job-item:hover { background: var(--surface-hover); }

/* ---------------------------------------------------------------- solid buttons
 * modern-style.css paints these with its 600-level shades, which put white text
 * at roughly 3.3:1. One step darker clears 4.5:1 and is barely distinguishable.
 */
.btn-success { background-color: #15803d; border-color: #15803d; }
.btn-success:hover { background-color: #166534; border-color: #166534; }

/* ---------------------------------------------------------------- inline code
 * Bootstrap's default pink sits at 3.6:1 on the grey the templates use.
 */
code { --bs-code-color: #a61e5d; }
[data-theme="dark"] code { --bs-code-color: #f9a8d4; }

/* ---------------------------------------------------------------- badges
 * Bootstrap's yellow and cyan are light enough that its default white badge text
 * lands at 1.6:1 and 2.0:1 — its own docs pair these two fills with dark text.
 * Applies to both themes; the fills are identical either way.
 */
.badge.bg-warning,
.badge.bg-info { color: #101828; }

/* ---------------------------------------------------------------- outline buttons
 * Bootstrap's outline variants paint the text in the same saturated hue it uses
 * for the solid fill, which is picked for contrast against white and drops to
 * roughly 3:1 or worse on a dark surface. Re-point them at the theme's lighter
 * tints, and flip the hover text dark, since hover fills the button with that
 * now-light tint.
 */
[data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: #101828; }
[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-bg: var(--text-muted); --bs-btn-hover-border-color: var(--text-muted); --bs-btn-hover-color: #101828; }
[data-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #101828; }
[data-theme="dark"] .btn-outline-success { --bs-btn-color: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success); --bs-btn-hover-color: #101828; }
[data-theme="dark"] .btn-outline-warning { --bs-btn-color: var(--warning); --bs-btn-border-color: var(--warning); --bs-btn-hover-bg: var(--warning); --bs-btn-hover-border-color: var(--warning); --bs-btn-hover-color: #101828; }
[data-theme="dark"] .btn-outline-info { --bs-btn-color: var(--info); --bs-btn-border-color: var(--info); --bs-btn-hover-bg: var(--info); --bs-btn-hover-border-color: var(--info); --bs-btn-hover-color: #101828; }

/* ---------------------------------------------------------------- forms */
/* .form-input is modern-style.css's own field class, used on 11 pages, and needs
 * the same treatment as Bootstrap's. */
.form-input,
.form-control,
.form-select {
    background-color: var(--surface);
    border-color: var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
}

.form-input:focus,
.form-control:focus,
.form-select:focus {
    background-color: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    color: var(--text);
}

.form-input::placeholder,
.form-control::placeholder { color: var(--text-subtle); }

.form-label { color: var(--text-muted); }

/* Bootstrap hardcodes this to a translucent near-black. */
.form-text { color: var(--text-muted); }

.input-group-text {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    color: var(--text-muted);
}

/* Browser-rendered pickers, select popups and dropdown arrows need to know the
 * surface is dark, otherwise they render as light widgets on a dark field. */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] select { color-scheme: dark; }

/* ---------------------------------------------------------------- dropdowns */
.dropdown-menu {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-4);
    padding: var(--space-2);
    color: var(--text);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text);
    padding: var(--space-2) var(--space-3);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-hover);
    color: var(--text);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--accent-soft);
    color: var(--accent);
}

.dropdown-divider { border-color: var(--border); }

/* ---------------------------------------------------------------- offcanvas (mobile nav) */
.offcanvas {
    background: var(--surface);
    color: var(--text);
}

.offcanvas-header { border-bottom: 1px solid var(--border); }
.offcanvas-title { color: var(--text); }

/* ---------------------------------------------------------------- modals */
.modal-content {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    color: var(--text);
}

.modal-header,
.modal-footer { border-color: var(--border); }

/* ---------------------------------------------------------------- list groups */
.list-group-item {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.list-group-item-action:hover { background: var(--surface-hover); color: var(--text); }

/* ---------------------------------------------------------------- pagination
 * modern-style.css owns .pagination/.page-link; point them at tokens so paging
 * controls follow the theme.
 */
.page-link {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
}

.page-link:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.page-item.disabled .page-link {
    background: transparent;
    border-color: var(--border);
    color: var(--text-subtle);
}

/* ---------------------------------------------------------------- close buttons */
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------------------------------------------------------------- accent text in dark mode
 * The 600-weight brand colours were picked for white backgrounds and fall below
 * a readable contrast ratio on a dark canvas, so lift them.
 */
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-800 { color: #7aa2ff; }
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-800 { color: #4ade80; }
[data-theme="dark"] .text-red-600 { color: #f87171; }
[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-800 { color: #fbbf24; }
[data-theme="dark"] .text-orange-600 { color: #fb923c; }
[data-theme="dark"] .text-purple-600 { color: #c084fc; }
[data-theme="dark"] .text-indigo-600 { color: #a5b4fc; }
[data-theme="dark"] .text-emerald-600 { color: #34d399; }

/* Soft tinted panels: the -50/-100 fills are near-white, so swap them for a
 * translucent wash of the same hue that works on a dark surface. */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100 { background-color: rgb(96 165 250 / 0.14); }
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100 { background-color: rgb(74 222 128 / 0.14); }
[data-theme="dark"] .bg-red-50 { background-color: rgb(248 113 113 / 0.14); }
[data-theme="dark"] .bg-yellow-50 { background-color: rgb(251 191 36 / 0.14); }
[data-theme="dark"] .bg-purple-50 { background-color: rgb(192 132 252 / 0.14); }
[data-theme="dark"] .bg-indigo-50 { background-color: rgb(165 180 252 / 0.14); }
[data-theme="dark"] .bg-emerald-50 { background-color: rgb(52 211 153 / 0.14); }
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-200 { background-color: var(--surface-sunken); }

/* Inline alerts (18 pages) are built from the -50/-200/-800 ramp, which renders
 * as a near-white callout on a dark page. Same treatment as the tinted panels
 * above: translucent wash of the hue, lifted text. */
[data-theme="dark"] .alert-success {
    background-color: rgb(74 222 128 / 0.12);
    border-color: rgb(74 222 128 / 0.3);
    color: #86efac;
}
[data-theme="dark"] .alert-danger {
    background-color: rgb(248 113 113 / 0.12);
    border-color: rgb(248 113 113 / 0.3);
    color: #fca5a5;
}
[data-theme="dark"] .alert-warning {
    background-color: rgb(251 191 36 / 0.12);
    border-color: rgb(251 191 36 / 0.3);
    color: #fcd34d;
}
[data-theme="dark"] .alert-info {
    background-color: rgb(96 165 250 / 0.12);
    border-color: rgb(96 165 250 / 0.3);
    color: #93c5fd;
}

/* ---------------------------------------------------------------- misc legacy surfaces */
.main-content { background: transparent; }

/* .login-page hardcodes a pale gradient and no text colour. Since the bridge
 * sets `body { color: var(--text) }`, a dark-theme visitor would otherwise get
 * white text on a near-white background. */
[data-theme="dark"] .login-page {
    background: linear-gradient(135deg, #0b0f19 0%, #1b2130 100%);
}

.modal-backdrop { background-color: #101828; }

/* SweetAlert2 popups are generated at runtime, so they can only be reached from
 * CSS; without this they stay white in dark mode. */
[data-theme="dark"] .swal2-popup {
    background: var(--surface-raised);
    color: var(--text);
}
[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container { color: var(--text); }