/* Dark mode. Bootstrap 5.2 has no data-bs-theme (5.3+),
   so this sheet overrides the SB Admin Pro surfaces and the Bootstrap
   component CSS variables under html[data-theme="dark"]. The attribute is
   set by the inline boot script in app.php's head hook (before first
   paint), from the viewer's usr_theme, or from prefers-color-scheme when
   that is "system" (and for a visitor with no session at all). */

html[data-theme="dark"] body {
    background-color: #10141b;
    color: #cfd6e4;
}

html[data-theme="dark"] .card {
    --bs-card-bg: #1a2029;
    --bs-card-border-color: #2a3341;
    --bs-card-cap-bg: #1e2530;
    color: #cfd6e4;
}
html[data-theme="dark"] .card .card-header { color: #dfe5f0; }

html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #cfd6e4;
    --bs-table-border-color: #2a3341;
    --bs-table-striped-bg: #1e2530;
    --bs-table-hover-bg: #232b37;
    --bs-table-hover-color: #dfe5f0;
}

html[data-theme="dark"] .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: #cfd6e4;
    --bs-list-group-border-color: #2a3341;
    --bs-list-group-action-hover-bg: #232b37;
    --bs-list-group-action-hover-color: #dfe5f0;
    --bs-list-group-action-active-bg: #232b37;
}

html[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: #1e2530;
    --bs-dropdown-color: #cfd6e4;
    --bs-dropdown-link-color: #cfd6e4;
    --bs-dropdown-link-hover-bg: #2a3341;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-border-color: #2a3341;
    --bs-dropdown-header-color: #8b95a7;
}

html[data-theme="dark"] .modal-content {
    --bs-modal-bg: #1a2029;
    --bs-modal-border-color: #2a3341;
    color: #cfd6e4;
}

/* Headings. The theme inks every h1 to h6 #363d47, meant for a white page;
   on a dark surface that is grey on grey (a popup's title, the headings of
   a compiler's rendered tips). Anything with its own colour class keeps it. */
html[data-theme="dark"] h1, html[data-theme="dark"] .h1,
html[data-theme="dark"] h2, html[data-theme="dark"] .h2,
html[data-theme="dark"] h3, html[data-theme="dark"] .h3,
html[data-theme="dark"] h4, html[data-theme="dark"] .h4,
html[data-theme="dark"] h5, html[data-theme="dark"] .h5,
html[data-theme="dark"] h6, html[data-theme="dark"] .h6 {
    color: #dfe5f0;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: #141922;
    border-color: #2a3341;
    color: #cfd6e4;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #141922;
    color: #dfe5f0;
    border-color: #4a90d9;
}
html[data-theme="dark"] .form-control::placeholder { color: #5f6a7d; }
html[data-theme="dark"] .form-check-input {
    background-color: #141922;
    border-color: #3a465a;
}
html[data-theme="dark"] .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
html[data-theme="dark"] .input-group-text {
    background-color: #1e2530;
    border-color: #2a3341;
    color: #cfd6e4;
}

/* SB Admin sidenav (light variant is hardcoded white). */
html[data-theme="dark"] .sidenav,
html[data-theme="dark"] #layoutSidenav_nav .sidenav-light {
    background-color: #151a23;
    color: #cfd6e4;
}
html[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link { color: #aeb8c9; }
html[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link:hover { color: #ffffff; }
html[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link.active { color: #4a90d9; }
html[data-theme="dark"] .sidenav-light .sidenav-menu-heading { color: #5f6a7d; }
/* The sidebar pills (app.css): the day theme's grey sinks into the dark
   sidenav, so the pill lifts instead. */
html[data-theme="dark"] .sidenav .sidenav-menu .nav .nav-link .badge {
    background-color: #4c5560 !important;
    color: #eaeef4 !important;
}
html[data-theme="dark"] .sidenav .sidenav-menu .nav .nav-link.active .badge {
    background-color: #4a90d9 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .sidenav-light .sidenav-footer { background-color: #10141b; }

html[data-theme="dark"] .footer-admin.footer-light {
    background-color: transparent;
    color: #8b95a7;
}

/* Text + border utilities that read wrong on a dark ground. */
html[data-theme="dark"] .text-dark { color: #dfe5f0 !important; }
html[data-theme="dark"] .text-muted { color: #8b95a7 !important; }
html[data-theme="dark"] .bg-light { background-color: #1e2530 !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end { border-color: #2a3341 !important; }
html[data-theme="dark"] hr { border-color: #2a3341; opacity: 1; }

html[data-theme="dark"] .alert-info {
    background-color: #12293a;
    border-color: #1d4a66;
    color: #9fd0ee;
}
html[data-theme="dark"] .alert-warning {
    background-color: #3a2f12;
    border-color: #66531d;
    color: #eed99f;
}
html[data-theme="dark"] .alert-danger {
    background-color: #3a1216;
    border-color: #661d26;
    color: #ee9fa8;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: #aeb8c9;
    border-color: #3a465a;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #2a3341;
    color: #ffffff;
    border-color: #3a465a;
}
html[data-theme="dark"] .btn-light {
    background-color: #1e2530;
    border-color: #2a3341;
    color: #cfd6e4;
}

html[data-theme="dark"] a { color: #6cb2f5; }
html[data-theme="dark"] a:hover { color: #8ec4f8; }
html[data-theme="dark"] .nav-link, html[data-theme="dark"] .topnav a.nav-link { color: inherit; }

/* Tabs (the test sets list, the compiler tips popup). The theme paints the
   active tab a pale blue so it joins a white surface; on a dark card or popup
   that is a light block with light text on it. */
html[data-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: #2a3341;
    --bs-nav-tabs-link-hover-border-color: #2a3341;
    --bs-nav-tabs-link-active-bg: #1a2029;
    --bs-nav-tabs-link-active-color: #dfe5f0;
    --bs-nav-tabs-link-active-border-color: #2a3341 #2a3341 #1a2029;
}
html[data-theme="dark"] .card .card-header .card-header-tabs .nav-link.active {
    background-color: var(--bs-card-bg);
    border-bottom-color: var(--bs-card-bg);
}

/* The amber internal-note tint drowns dark text; keep the tint, fix the ink. */
html[data-theme="dark"] .bg-warning.bg-opacity-25,
html[data-theme="dark"] .bg-warning.bg-opacity-10 { color: #cfd6e4; }

/* TinyMCE lives in an iframe with its own white document; leave it light
   deliberately - restyling third-party editor internals breaks on upgrade. */

html[data-theme="dark"] .draft-pending {
    background-color: #16222e;
    border-color: #2a4a66;
}

/* ── Contrast ─────────────────────────────────────────────────────────────
   Each of these is a light-on-light or dark-on-dark pair that only shows up
   once the rest of the page is dark. */

/* .text-dark is flipped to a LIGHT ink above, which is right on a dark card
   and wrong on the light chips it is paired with all over the app
   (badge bg-warning text-dark, badge bg-info text-dark). Inside a coloured
   badge the dark ink is the correct ink, so put it back. */
html[data-theme="dark"] .badge.bg-warning.text-dark,
html[data-theme="dark"] .badge.bg-info.text-dark,
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.bg-info { color: #10141b !important; }

/* A bg-light badge is the neutral chip (a submission's kind, a chapter count,
   a deadline). .bg-light above turns it into a #1e2530 ground, where neither
   ink reads and the chip vanishes into the card, so it gets a grey of its own
   a step above the card, with the light ink. */
html[data-theme="dark"] .badge.bg-light {
    background-color: #2f3848 !important;
    color: #dfe5f0 !important;
}

/* A bg-dark badge is a #212832 chip, invisible on a #1a2029 card, so lift the
   chip off the card. */
html[data-theme="dark"] .badge.bg-dark {
    background-color: #39445a !important;
    color: #e6ebf5 !important;
}

/* A bg-info badge with no text-dark partner is white on cyan. The rule above
   darkens the ink; this keeps the chip itself from glowing. */
html[data-theme="dark"] .badge.bg-info { background-color: #35b6bb !important; }
html[data-theme="dark"] .badge.bg-warning { background-color: #d99b2a !important; }

/* Floating autocompletes are position-absolute .list-group elements, and the
   transparent list-group background above would leave them see-through, their
   text drawn straight over the page beneath. Only the floating ones need a
   ground, so key off the positioning the app gives them. */
html[data-theme="dark"] .list-group.position-absolute,
html[data-theme="dark"] .dropdown-menu .list-group {
    --bs-list-group-bg: #232b37;
    background-color: #232b37;
    border-color: #2a3341;
}

/* The bare `a` colour above (specificity 0,1,2) beats .btn and .dropdown-item,
   which would take the white ink off every anchor rendered as a solid button
   (#6cb2f5 on the #3f6fb6 primary bg is 2.2:1) and the dropdown link colour
   this sheet defines off dropdown items. Restore both. */
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-secondary,
html[data-theme="dark"] a.btn-success,
html[data-theme="dark"] a.btn-danger,
html[data-theme="dark"] a.btn-warning,
html[data-theme="dark"] a.btn-info { color: #ffffff; }
html[data-theme="dark"] a.btn-outline-primary { color: #8fa8e8; }
html[data-theme="dark"] .dropdown-item { color: #cfd6e4; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { color: #ffffff; background-color: #2a3341; }

/* SB Admin's --bs-secondary (#6900c7) and --bs-primary (#3f6fb6) are utilities
   designed for a white page; on #10141b they measure ~2.1:1 and ~3.7:1. */
html[data-theme="dark"] .text-secondary { color: #aeb8c9 !important; }
html[data-theme="dark"] .text-primary { color: #8fa8e8 !important; }

/* styles.css sets pre { color: #69707a }, which is 2.6:1 on the dark ground. */
html[data-theme="dark"] pre,
html[data-theme="dark"] pre code { color: #c3cbd8; }

/* Server-rendered chart SVG (@piechart, @linechart) hardcodes fill="#333" on
   its legend text, and #333 on a #1a2029 card is ~1.3:1. The SVG carries no
   class of its own, so this keys off the card that holds it; a CSS fill beats
   the presentation attribute. Slice fills are data colours and are deliberately left alone. */
html[data-theme="dark"] .card svg text { fill: #cfd6e4; }