/*
 * SPA Academy Contest - dark theme.
 *
 * Scoped entirely to html[data-theme="dark"]. Nothing here applies in light
 * mode, so the file can be loaded unconditionally and the theme can be
 * switched by flipping one attribute - no second request, no flash.
 *
 * WHY IT IS WRITTEN BY HAND. The template appears to ship a dark mode twice
 * and ships neither. The public layout defines a `body.night` palette
 * (--bg-main, --font-1, --border-color, ...) and the admin layout swaps a
 * --background-N set behind a `dashboard_dark_mode` setting. Both are
 * vestigial: across the four stylesheets the front actually loads, those
 * variable names are read a total of four times. The surfaces that matter -
 * card, dropdown, modal, table, pagination, navbar, form control - never
 * consult them. Turning the setting on repainted almost nothing.
 *
 * WHAT DOES WORK. Bootstrap 5.2 gives every component a set of custom
 * properties, and this theme sets them ON THE COMPONENT SELECTOR
 * (`.card{--bs-card-bg:#fff}`), not on :root. A :root override therefore
 * loses - the element-scoped declaration is more specific. Each component is
 * re-pointed below against its own selector, which is why almost none of this
 * needs !important: `html[data-theme=dark] .card` simply outranks `.card`.
 * !important appears only where the theme itself used it.
 *
 * THREE SURFACES, NOT ONE. A dark page that paints every panel the same
 * colour loses the card edges that carry the layout. Page is darkest, cards
 * sit one step lighter, hovers and inputs one step further.
 *
 * Contrast against the page colour, measured, not eyeballed:
 *   body text #c9d5de   11.9:1     headings #eaf1f6   14.6:1
 *   muted    #8b9aa8    6.0:1      teal     #00b8c3    7.0:1
 * The brand's bright teal is the readable one here - the darkened #00838c
 * that white text needs in light mode is too close to the background.
 */

html[data-theme="dark"] {
    /* Tells the browser to render its own furniture dark: scrollbars, the
       native select popup, date pickers, form control defaults. Without it a
       dark page keeps a white scrollbar and a white dropdown list. */
    color-scheme: dark;

    --spa-d-bg: #0d1922;
    --spa-d-surface: #142430;
    --spa-d-raised: #1b2f3d;
    --spa-d-input: #101f2a;
    --spa-d-line: rgba(255, 255, 255, .10);
    --spa-d-line-2: rgba(255, 255, 255, .16);
    --spa-d-ink: #c9d5de;
    --spa-d-head: #eaf1f6;
    --spa-d-mute: #8b9aa8;

    /* Bootstrap's base. */
    --bs-body-bg: #0d1922;
    --bs-body-bg-rgb: 13, 25, 34;
    --bs-body-color: #c9d5de;
    --bs-body-color-rgb: 201, 213, 222;
    --bs-heading-color: #eaf1f6;
    --bs-border-color: #25394a;
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-link-color: #00b8c3;
    --bs-link-hover-color: #5fd8e0;
    --bs-code-color: #d3dde5;
    --bs-highlight-bg: #3d3616;
    --bs-secondary-color: #8b9aa8;

    /* The public layout's own set - #aside-menu and .top-navbar-link:hover
       read these, so the slide-out menu follows without touching its rules. */
    --bg-main: #142430;
    --bg-second: #1b2f3d;
    --font-1: #eaf1f6;
    --font-2: #c9d5de;
    --border-color: #25394a;
    --scroll-bar-color: #31485c;
    --main-color: #00b8c3;
    --main-color-rgb: 0, 184, 195;
    --main-color-flexable: #00b8c3;

    /* The admin shell's set. */
    --background-0: #0d1922;
    --background-1: #142430;
    --background-2: #1b2f3d;
    --background-aside: #0a1119;
    --background-active-link: #1b2f3d;
    --background-form-control-focus: #12222e;
    --color-1: #eaf1f6;
    --color-2: #c9d5de;
}

/* app.css carries `body{background:#fff!important}` from the template's own
   override layer, so this needs the same weapon and a heavier selector.
 *
 * The variable block is repeated here for a reason that is easy to miss: the
 * public layout declares --bg-main and friends on `body`, not on :root. A
 * custom property set on body wins for body and everything inside it over the
 * same property set on html, whatever the selector specificity - inheritance
 * takes the nearest ancestor that declares it. Setting them on html alone left
 * the slide-out menu white on a dark page. */
html[data-theme="dark"] body {
    background: var(--spa-d-bg) !important;
    color: var(--spa-d-ink);

    --bg-main: #142430;
    --bg-second: #1b2f3d;
    --font-1: #eaf1f6;
    --font-2: #c9d5de;
    --border-color: #25394a;
    --scroll-bar-color: #31485c;
    --main-color: #00b8c3;
    --main-color-rgb: 0, 184, 195;
    --main-color-flexable: #00b8c3;
}

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6,
html[data-theme="dark"] .display-1, html[data-theme="dark"] .display-2,
html[data-theme="dark"] .display-3, html[data-theme="dark"] .display-4,
html[data-theme="dark"] .display-5, html[data-theme="dark"] .display-6 {
    color: var(--spa-d-head);
}

/* ---- surface utilities ---------------------------------------------------
   .bg-white and .bg-light are how this theme paints alternating sections, so
   they carry the page rather than decorating it. Both are !important in the
   theme. */

html[data-theme="dark"] .bg-white { background-color: var(--spa-d-surface) !important; }
html[data-theme="dark"] .bg-light { background-color: #11202b !important; }
html[data-theme="dark"] .bg-gray { background-color: #0f1d27 !important; }
html[data-theme="dark"] .bg-dark, html[data-theme="dark"] .badge.bg-dark { background-color: #071018 !important; }
html[data-theme="dark"] .text-muted { color: var(--spa-d-mute) !important; }
html[data-theme="dark"] .text-dark { color: var(--spa-d-head) !important; }
html[data-theme="dark"] .text-body { color: var(--spa-d-ink) !important; }

/* The pale tints are opaque pastels - a lilac panel on a navy page. Same hue
   as a translucent wash instead, so they tint whatever they sit on. */
html[data-theme="dark"] .bg-soft-primary { background-color: rgba(0, 184, 195, .14) !important; }
html[data-theme="dark"] .bg-soft-blue { background-color: rgba(63, 120, 224, .16) !important; }
html[data-theme="dark"] .bg-soft-green { background-color: rgba(69, 196, 160, .15) !important; }
html[data-theme="dark"] .bg-soft-red { background-color: rgba(226, 98, 107, .16) !important; }
html[data-theme="dark"] .bg-soft-yellow { background-color: rgba(250, 183, 88, .15) !important; }
html[data-theme="dark"] .bg-soft-violet { background-color: rgba(160, 124, 197, .16) !important; }
html[data-theme="dark"] .badge.bg-light { background: rgba(255, 255, 255, .12) !important; color: var(--spa-d-ink) !important; }

/* A shadow is a lighter surface on a dark page, so the theme's soft grey
   shadows vanish. Deepen them and let the card border do the separating. */
html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg, html[data-theme="dark"] .card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .45) !important;
}

/* ---- components ----------------------------------------------------------
   Each block re-points the variables the theme sets on that same selector.
   Anything not listed here inherits from :root and needs no rule. */

html[data-theme="dark"] .card {
    --bs-card-bg: var(--spa-d-surface);
    --bs-card-color: var(--spa-d-ink);
    --bs-card-border-color: rgba(255, 255, 255, .09);
    --bs-card-cap-bg: #182936;
    --bs-card-cap-color: var(--spa-d-head);
}

html[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: #172936;
    --bs-dropdown-color: var(--spa-d-ink);
    --bs-dropdown-border-color: rgba(255, 255, 255, .10);
    --bs-dropdown-divider-bg: rgba(255, 255, 255, .10);
    --bs-dropdown-link-color: var(--spa-d-ink);
    --bs-dropdown-link-hover-color: #00b8c3;
    --bs-dropdown-link-hover-bg: var(--spa-d-raised);
    --bs-dropdown-link-active-color: #00b8c3;
    --bs-dropdown-link-active-bg: var(--spa-d-raised);
    --bs-dropdown-link-disabled-color: #6d7d8b;
    --bs-dropdown-header-color: #00b8c3;
    --bs-dropdown-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .navbar {
    --bs-navbar-color: var(--spa-d-ink);
    --bs-navbar-hover-color: #00b8c3;
    --bs-navbar-active-color: #00b8c3;
    --bs-navbar-brand-color: var(--spa-d-head);
    --bs-navbar-brand-hover-color: #00b8c3;
    --bs-navbar-disabled-color: rgba(201, 213, 222, .35);
}

/* app.css forces these two literally, so the variables above do not reach
   the collapsed menu on a small screen. */
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--spa-d-ink); }
html[data-theme="dark"] .navbar-expand-lg .navbar-collapse .nav-link,
html[data-theme="dark"] .navbar-expand-lg .navbar-collapse .dropdown-item { color: var(--spa-d-ink) !important; }

html[data-theme="dark"] .modal {
    --bs-modal-bg: var(--spa-d-surface);
    --bs-modal-color: var(--spa-d-ink);
    --bs-modal-border-color: rgba(255, 255, 255, .10);
    --bs-modal-header-border-color: rgba(255, 255, 255, .10);
    --bs-modal-footer-border-color: rgba(255, 255, 255, .10);
    --bs-modal-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .modal.show { background: rgba(0, 0, 0, .66); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

html[data-theme="dark"] .table {
    --bs-table-color: var(--spa-d-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255, 255, 255, .10);
    --bs-table-striped-color: var(--spa-d-ink);
    --bs-table-striped-bg: rgba(255, 255, 255, .04);
    --bs-table-active-color: var(--spa-d-head);
    --bs-table-active-bg: rgba(255, 255, 255, .07);
    --bs-table-hover-color: var(--spa-d-head);
    --bs-table-hover-bg: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .pagination {
    --bs-pagination-color: var(--spa-d-ink);
    --bs-pagination-bg: var(--spa-d-surface);
    --bs-pagination-border-color: rgba(255, 255, 255, .10);
    --bs-pagination-hover-color: #00b8c3;
    --bs-pagination-hover-bg: var(--spa-d-raised);
    --bs-pagination-hover-border-color: rgba(255, 255, 255, .10);
    --bs-pagination-focus-color: #00b8c3;
    --bs-pagination-focus-bg: var(--spa-d-raised);
    --bs-pagination-active-color: #00b8c3;
    --bs-pagination-active-bg: var(--spa-d-raised);
    --bs-pagination-active-border-color: rgba(255, 255, 255, .10);
    --bs-pagination-disabled-color: #61717f;
    --bs-pagination-disabled-bg: #101e28;
    --bs-pagination-disabled-border-color: rgba(255, 255, 255, .10);
}

html[data-theme="dark"] .list-group {
    --bs-list-group-color: var(--spa-d-ink);
    --bs-list-group-bg: var(--spa-d-surface);
    --bs-list-group-border-color: rgba(255, 255, 255, .10);
    --bs-list-group-action-color: var(--spa-d-ink);
    --bs-list-group-action-hover-color: var(--spa-d-head);
    --bs-list-group-action-hover-bg: var(--spa-d-raised);
    --bs-list-group-disabled-color: #6d7d8b;
    --bs-list-group-disabled-bg: var(--spa-d-surface);
}

html[data-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: rgba(255, 255, 255, .10);
    --bs-nav-tabs-link-active-color: #00b8c3;
    --bs-nav-tabs-link-active-bg: transparent;
}

html[data-theme="dark"] .popover {
    --bs-popover-bg: #172936;
    --bs-popover-border-color: rgba(255, 255, 255, .10);
    --bs-popover-header-bg: #172936;
    --bs-popover-header-color: var(--spa-d-head);
    --bs-popover-body-color: var(--spa-d-ink);
}
html[data-theme="dark"] .tooltip { --bs-tooltip-bg: #1b2f3d; --bs-tooltip-color: var(--spa-d-head); }

html[data-theme="dark"] .offcanvas { --bs-offcanvas-bg: var(--spa-d-bg); --bs-offcanvas-color: var(--spa-d-ink); }
html[data-theme="dark"] .offcanvas { background-color: var(--spa-d-bg) !important; }
html[data-theme="dark"] .offcanvas.bg-light { background: #11202b; color: var(--spa-d-ink); }

/* ---- forms ---------------------------------------------------------------
   An input has to read as a well, not a panel, so it is darker than the card
   it sits in rather than lighter. */

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .input-group-text {
    color: var(--spa-d-head);
    background-color: var(--spa-d-input);
    border-color: rgba(255, 255, 255, .13);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    color: #fff;
    background: #12222e !important;
    border: 1px solid #00b8c3 !important;
    box-shadow: 0 0 0 .2rem rgba(0, 184, 195, .18);
}
html[data-theme="dark"] .form-control::placeholder { color: #7a8a98; opacity: 1; }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] { background-color: #0c1720; color: #8b9aa8; }
html[data-theme="dark"] .col-form-label,
html[data-theme="dark"] .form-label { color: var(--spa-d-ink) !important; }

/* Bootstrap draws the select chevron as an SVG stroked in near-black, which
   disappears against a dark well. Same path, light stroke. */
html[data-theme="dark"] .form-select {
    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='%23c9d5de' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .form-check-input {
    background-color: var(--spa-d-input);
    border-color: rgba(255, 255, 255, .22);
}
html[data-theme="dark"] .form-check-input:checked {
    background-color: #00838c;
    border-color: #00838c;
}

/* ---- alerts --------------------------------------------------------------
   Same reasoning as the soft backgrounds: a pastel card on a navy page reads
   as a hole in the layout. Tint the surface, keep the hue as the signal. */

html[data-theme="dark"] .alert { border-width: 1px; border-style: solid; }
html[data-theme="dark"] .alert-soft-primary,
html[data-theme="dark"] .alert-primary { background-color: rgba(0, 184, 195, .13); border-color: rgba(0, 184, 195, .32); color: #a6e9ee; }
html[data-theme="dark"] .alert-info { background-color: rgba(84, 168, 199, .13); border-color: rgba(84, 168, 199, .32); color: #a9d8ea; }
html[data-theme="dark"] .alert-success { background-color: rgba(69, 196, 160, .13); border-color: rgba(69, 196, 160, .32); color: #a6e5d3; }
html[data-theme="dark"] .alert-warning { background-color: rgba(250, 183, 88, .13); border-color: rgba(250, 183, 88, .32); color: #f2d3a1; }
html[data-theme="dark"] .alert-danger { background-color: rgba(226, 98, 107, .13); border-color: rgba(226, 98, 107, .32); color: #f0b3b7; }
html[data-theme="dark"] .alert-light { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--spa-d-ink); }

/* ---- the admin shell -----------------------------------------------------
   main-dashboard.css paints the panel and the active menu item white
   literally, and colours everything inside the sidebar a mid grey. */

html[data-theme="dark"] .main-box,
html[data-theme="dark"] .main-box-wedit { background: var(--spa-d-surface); color: var(--spa-d-ink); }
html[data-theme="dark"] .aside * { color: var(--spa-d-ink); }
html[data-theme="dark"] .aside .item-container.active { background: var(--spa-d-raised); }
html[data-theme="dark"] .aside .item-container.active * { color: #00b8c3; }
html[data-theme="dark"] .sub-item.active a.active,
html[data-theme="dark"] .sub-item.active a.active * { color: #00b8c3; }
html[data-theme="dark"] .divider,
html[data-theme="dark"] .divider-right { opacity: .25; }

/* Plugins the admin forms load. Left light, each of these is a white card
   inside a dark form. */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-search__field {
    background-color: var(--spa-d-input) !important;
    border-color: rgba(255, 255, 255, .13) !important;
    color: var(--spa-d-head) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--spa-d-head); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--spa-d-raised); color: #00b8c3; }
html[data-theme="dark"] .fileuploader,
html[data-theme="dark"] .fileuploader-theme-dragdrop .fileuploader-input { background: var(--spa-d-input); color: var(--spa-d-ink); }

/* The brand wordmark is set in the academy's navy, which is a dark colour on
   a dark surface. The Latin line stays bright teal - it already is. */
html[data-theme="dark"] .spa-brand-ar { color: var(--spa-d-head) !important; }

/* ---- the switch itself ---------------------------------------------------
   Two icons in one button, one shown per theme. Declared for both themes
   because the button exists in both, and kept in this always-loaded file so
   PurgeCSS cannot decide the hidden half is unused. */

.theme-toggle { background: transparent; border: 0; line-height: 1; cursor: pointer; color: inherit; }
.theme-toggle:hover { color: #00838c; }
html[data-theme="dark"] .theme-toggle:hover { color: #00b8c3; }
.theme-toggle .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline-block; }

/* ---- panels that hardcode a light background -----------------------------
   A few screens paint their own panel rather than using a Bootstrap class,
   because the colour carries meaning: the restricted-data block on the photo
   details screen is pale red to say "this is GPS and EXIF author data, and
   only two roles see it".

   An inline background survives the theme switch, and the text inside does
   not: .table above repaints table text to --spa-d-ink, which is near-white,
   and near-white on #fdf7f7 is invisible. The panel was still there in dark
   mode, correctly bordered, holding text nobody could read. Reported from the
   image and video details screens on 2026-09-28.

   !important because the value it overrides is an inline style attribute, and
   nothing weaker wins against one. */
html[data-theme="dark"] .spa-restricted {
    background: rgba(226, 98, 107, .12) !important;
    border-color: rgba(226, 98, 107, .38) !important;
}

/* ---- floating labels -----------------------------------------------------
   Bootstrap makes the floating-label pattern work by hiding the input's real
   placeholder, so the <label> can stand in its place:

     .form-floating>.form-control::placeholder{color:transparent}

   The placeholder rule above is one step more specific than that - the
   html[data-theme="dark"] prefix adds an element and an attribute - so it won
   on every .form-floating field on the site. The placeholder came back,
   underneath the label that exists to replace it, and the two read as one
   smeared line. Reported from the contact page on 2026-09-29: the entered text
   "coincides with the field title and neither disappears nor moves".

   Restated here rather than weakened above, because a visible placeholder is
   wanted everywhere that is NOT a floating label. */
html[data-theme="dark"] .form-floating > .form-control::placeholder,
html[data-theme="dark"] .form-floating > .form-control-plaintext::placeholder {
    color: transparent;
}

/* The floating label is a bare <label>, so neither .form-label nor
   .col-form-label above reaches it, and it kept the light theme's colour. */
html[data-theme="dark"] .form-floating > label { color: #7a8a98; }
html[data-theme="dark"] .form-floating > .form-control:focus ~ label,
html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--spa-d-mute);
}

/* ---- text written for a light page ---------------------------------------
   Each of these sets a near-black or navy colour in a style attribute or a
   page <style> block, which no theme file reaches unless it says so. On a dark
   background they run from hard to read to invisible. The brand pair is the
   worst: it is the site's own name, on every page. */
html[data-theme="dark"] .spa-brand-ar { color: var(--spa-d-head) !important; }
html[data-theme="dark"] .tree-sub { color: var(--spa-d-ink) !important; }
html[data-theme="dark"] .cp-current .cp-label { color: var(--spa-d-head); }
html[data-theme="dark"] .cp-current .cp-note { color: #6ea8ff; }

/* ---- more panels that paint their own light background -------------------
   Same defect as .spa-restricted above and the same cure. The colour carries
   meaning - a confirmation step, a warning - so these are re-tinted rather
   than flattened into the card behind them. */
html[data-theme="dark"] .spa-panel-soft {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
html[data-theme="dark"] .spa-panel-ok {
    background: rgba(69, 196, 160, .12) !important;
    border-color: rgba(69, 196, 160, .35) !important;
}