/* The dark mode: every rule that differs from the light one.

   Selected by Bootstrap's colour mode rather than by this skin's key, so a skin built on the dark
   mode (manifest "mode": "dark") starts from all of this and only changes what it means to. */

/* The palette. A skin on the dark mode overrides any of these under :root[data-skin="<key>"]. */
[data-bs-theme="dark"] {
    --skin-accent: #6ea8fe; /* links-as-buttons, checked boxes, the active editor tool */
    --skin-accent-hover: #8bb9ff; /* the accent under the pointer */
    --skin-accent-rgb: 110, 168, 254; /* the accent as r, g, b for Bootstrap's focus ring */
    --skin-on-accent: #000; /* text on a filled accent, muted or danger button */
    --skin-strong: #fff; /* the brand, the hovered and the active navbar link */
    --skin-nav: rgba(255, 255, 255, 0.8); /* navbar links at rest */
    --skin-field-bg: #2c3034; /* inputs, selects, checkboxes, menus, the editor */
    --skin-field-color: #dee2e6; /* text inside them */
    --skin-field-border: #495057; /* their borders */
    --skin-field-disabled-bg: #212529; /* a disabled field */
    --skin-faint: #6c757d; /* a disabled field's text, the editor's placeholder */
    --skin-muted: #adb5bd; /* secondary buttons, editor icons */
    --skin-danger: #ea868f; /* outline danger buttons */
    --skin-menu-hover-bg: #343a40; /* a navbar menu item under the pointer */
    --skin-map-bg: #374151; /* the map before its tiles arrive */
    --skin-popup-shadow: rgba(0, 0, 0, .6); /* the shadow under the date picker */
}

/* Dark theme: make navbar-brand and nav-links readable (Lux sets dark colors that don't adapt) */
[data-bs-theme="dark"] .navbar-brand {
    color: var(--skin-strong);
}
[data-bs-theme="dark"] .navbar-brand:hover {
    color: var(--skin-nav);
}

[data-bs-theme="dark"] .navbar .nav-link {
    color: var(--skin-nav);
}
[data-bs-theme="dark"] .navbar .nav-link:hover {
    color: var(--skin-strong);
}

[data-bs-theme="dark"] .navbar .nav-link.active {
    color: var(--skin-strong) !important;
}

/* Dark theme: form inputs — explicit colors so they contrast with page bg */
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control {
    background-color: var(--skin-field-bg) !important;
    color: var(--skin-field-color) !important;
    border-color: var(--skin-field-border) !important;
}
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control:disabled {
    background-color: var(--skin-field-disabled-bg) !important;
    color: var(--skin-faint) !important;
}

/* Dark theme: outline buttons — direct color overrides beat Lux's hardcoded values */
[data-bs-theme="dark"] .btn-outline-primary {
    color: var(--skin-accent) !important;
    border-color: var(--skin-accent) !important;
    background-color: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus,
[data-bs-theme="dark"] .btn-outline-primary:active {
    color: var(--skin-on-accent) !important;
    background-color: var(--skin-accent) !important;
    border-color: var(--skin-accent) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--skin-muted) !important;
    border-color: var(--skin-muted) !important;
    background-color: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:active {
    color: var(--skin-on-accent) !important;
    background-color: var(--skin-muted) !important;
    border-color: var(--skin-muted) !important;
}
[data-bs-theme="dark"] .btn-outline-danger {
    color: var(--skin-danger) !important;
    border-color: var(--skin-danger) !important;
    background-color: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-outline-danger:active {
    color: var(--skin-on-accent) !important;
    background-color: var(--skin-danger) !important;
    border-color: var(--skin-danger) !important;
}

/* Event results keep a visible fill against Lux's dark page, including hover and focus. */
[data-bs-theme="dark"] .competition-result-link {
    --bs-btn-color: var(--skin-on-accent);
    --bs-btn-bg: var(--skin-accent);
    --bs-btn-border-color: var(--skin-accent);
    --bs-btn-hover-color: var(--skin-on-accent);
    --bs-btn-hover-bg: var(--skin-accent-hover);
    --bs-btn-hover-border-color: var(--skin-accent-hover);
    --bs-btn-active-color: var(--skin-on-accent);
    --bs-btn-active-bg: var(--skin-accent-hover);
    --bs-btn-active-border-color: var(--skin-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--skin-accent-rgb);
    background-color: var(--bs-btn-bg);
}
[data-bs-theme="dark"] .competition-result-link:hover,
[data-bs-theme="dark"] .competition-result-link:focus-visible {
    background-color: var(--bs-btn-hover-bg);
}
[data-bs-theme="dark"] .competition-result-link:active {
    background-color: var(--bs-btn-active-bg);
}

/* Dark theme: radio and checkbox inputs */
[data-bs-theme="dark"] .form-check-input {
    background-color: var(--skin-field-bg) !important;
    border-color: var(--skin-field-border) !important;
}
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--skin-accent) !important;
    border-color: var(--skin-accent) !important;
}

/* Dark theme: dropdown menus in navbar */
[data-bs-theme="dark"] .navbar .dropdown-menu {
    background-color: var(--skin-field-bg);
    border-color: var(--skin-field-border);
}
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item {
    color: var(--skin-field-color);
}
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--skin-menu-hover-bg);
    color: var(--skin-strong);
}

/* Dark theme: input-group-text (labels inside input groups) */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Dark theme: cards (Lux hardcodes white background) */
[data-bs-theme="dark"] .card {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* Dark theme: prevent Bootstrap from darkening Leaflet tile images */
[data-bs-theme="dark"] .leaflet-container {
    background: var(--skin-map-bg);
}
[data-bs-theme="dark"] .leaflet-tile {
    filter: none !important;
}

/* Dark theme: Quill rich-text editor (used in frontend editing forms) */
[data-bs-theme="dark"] .ql-toolbar,
[data-bs-theme="dark"] .ql-container {
    background-color: var(--skin-field-bg);
    color: var(--skin-field-color);
    border-color: var(--skin-field-border) !important;
}
[data-bs-theme="dark"] .ql-editor {
    color: var(--skin-field-color);
    background-color: var(--skin-field-bg);
    caret-color: var(--skin-field-color);
}
[data-bs-theme="dark"] .ql-editor.ql-blank::before {
    color: var(--skin-faint);
}
[data-bs-theme="dark"] .ql-toolbar .ql-stroke {
    stroke: var(--skin-muted);
}
[data-bs-theme="dark"] .ql-toolbar .ql-fill {
    fill: var(--skin-muted);
}
[data-bs-theme="dark"] .ql-toolbar .ql-picker-label,
[data-bs-theme="dark"] .ql-toolbar .ql-picker-item {
    color: var(--skin-field-color);
}
[data-bs-theme="dark"] .ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .ql-toolbar .ql-active .ql-stroke {
    stroke: var(--skin-accent);
}
[data-bs-theme="dark"] .ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .ql-toolbar .ql-active .ql-fill {
    fill: var(--skin-accent);
}
[data-bs-theme="dark"] .ql-toolbar .ql-active .ql-picker-label,
[data-bs-theme="dark"] .ql-toolbar .ql-picker-label:hover {
    color: var(--skin-accent);
}
[data-bs-theme="dark"] .ql-toolbar .ql-picker-options {
    background-color: var(--skin-field-bg);
    border-color: var(--skin-field-border);
}

/* Dark theme: the date picker of the list and map filters (flatpickr, calendar_app/_datepicker.html) */
/* :root lifts these one step above flatpickr's own rules, which the page loads after this file:
   when they lived in the template they came last and won the ties. */
[data-bs-theme="dark"]:root .flatpickr-calendar { background: var(--skin-field-bg); color: var(--skin-field-color); box-shadow: 0 3px 13px var(--skin-popup-shadow); }
[data-bs-theme="dark"]:root .flatpickr-calendar.arrowTop::before, [data-bs-theme="dark"]:root .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--skin-field-bg); }
[data-bs-theme="dark"]:root .flatpickr-calendar.arrowBottom::before, [data-bs-theme="dark"]:root .flatpickr-calendar.arrowBottom::after { border-top-color: var(--skin-field-bg); }
[data-bs-theme="dark"]:root .flatpickr-months .flatpickr-month, [data-bs-theme="dark"]:root .flatpickr-weekday { background: var(--skin-field-bg); color: var(--skin-muted); }
[data-bs-theme="dark"]:root .flatpickr-months .flatpickr-prev-month svg, [data-bs-theme="dark"]:root .flatpickr-months .flatpickr-next-month svg { fill: var(--skin-field-color); }
[data-bs-theme="dark"]:root .flatpickr-current-month input.cur-year, [data-bs-theme="dark"]:root .flatpickr-monthDropdown-months { background: var(--skin-field-bg); color: var(--skin-field-color); }
[data-bs-theme="dark"]:root .flatpickr-day { color: var(--skin-field-color); }
[data-bs-theme="dark"]:root .flatpickr-day:hover, [data-bs-theme="dark"]:root .flatpickr-day.prevMonthDay:hover, [data-bs-theme="dark"]:root .flatpickr-day.nextMonthDay:hover { background: var(--skin-field-border); border-color: var(--skin-field-border); }
[data-bs-theme="dark"]:root .flatpickr-day.today { border-color: var(--skin-accent); }
[data-bs-theme="dark"]:root .flatpickr-day.selected { background: var(--skin-accent); border-color: var(--skin-accent); color: var(--skin-on-accent); }
[data-bs-theme="dark"]:root .flatpickr-day.flatpickr-disabled, [data-bs-theme="dark"]:root .flatpickr-day.prevMonthDay, [data-bs-theme="dark"]:root .flatpickr-day.nextMonthDay { color: var(--skin-faint); }