/* Dark theme — third-party surfaces that hardcode their own light colours.
 *
 * Our own CSS needs nothing here: it uses var(--color-*) tokens, and
 * global.css redefines those under :root[data-theme="dark"]. This file maps
 * Bootstrap 3, Flask-AppBuilder, select2, the datepickers, CodeMirror,
 * highlight.js and CKEditor back onto the same tokens. Every rule is scoped
 * to [data-theme="dark"], so the light theme is untouched by this file.
 *
 * The scope is wrapped in :where() so each rule has exactly the specificity
 * of the library selector it overrides. Load order then does the rest: this
 * file comes after Bootstrap (wins) and before feature CSS (loses), so a
 * page's own styling of an input or a modal is never trumped from here.
 * Loaded from partials/theme_head.html, after global.css.
 */

/* ── Page ──────────────────────────────────────────────────────────── */
:where([data-theme="dark"]) body {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) a {
    color: var(--color-primary-light);
}

:where([data-theme="dark"]) a:hover,
:where([data-theme="dark"]) a:focus {
    color: var(--color-info-light);
}

:where([data-theme="dark"]) hr {
    border-top-color: var(--color-border);
}

:where([data-theme="dark"]) .text-muted,
:where([data-theme="dark"]) .help-block {
    color: var(--color-text-muted);
}

:where([data-theme="dark"]) h1, :where([data-theme="dark"]) h2, :where([data-theme="dark"]) h3,
:where([data-theme="dark"]) h4, :where([data-theme="dark"]) h5, :where([data-theme="dark"]) h6,
:where([data-theme="dark"]) legend {
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) legend {
    border-bottom-color: var(--color-border);
}

:where([data-theme="dark"]) ::selection {
    background: rgb(var(--color-primary-rgb) / 0.35);
}

/* ── Forms ─────────────────────────────────────────────────────────── */
:where([data-theme="dark"]) .form-control,
:where([data-theme="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
    background-color: var(--color-bg-white);
    border-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .form-control::placeholder,
:where([data-theme="dark"]) input::placeholder,
:where([data-theme="dark"]) textarea::placeholder {
    color: var(--color-text-muted);
}

:where([data-theme="dark"]) .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.25);
}

:where([data-theme="dark"]) .form-control[disabled],
:where([data-theme="dark"]) .form-control[readonly],
:where([data-theme="dark"]) fieldset[disabled] .form-control {
    background-color: var(--color-gray-100);
    color: var(--color-text-muted);
}

:where([data-theme="dark"]) .input-group-addon {
    background-color: var(--color-gray-100);
    border-color: var(--color-border-dark);
    color: var(--color-text-secondary);
}

:where([data-theme="dark"]) label {
    color: var(--color-text-primary);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
:where([data-theme="dark"]) .btn-default {
    background-color: var(--color-bg-white);
    border-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .btn-default:hover,
:where([data-theme="dark"]) .btn-default:focus,
:where([data-theme="dark"]) .btn-default:active,
:where([data-theme="dark"]) .btn-default.active,
:where([data-theme="dark"]) .open > .dropdown-toggle.btn-default {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .btn-link {
    color: var(--color-primary-light);
}

:where([data-theme="dark"]) .close {
    color: var(--color-text-primary);
    text-shadow: none;
    opacity: 0.6;
}

:where([data-theme="dark"]) .close:hover {
    color: var(--color-text-primary);
    opacity: 0.9;
}

/* ── Dropdowns, popovers ───────────────────────────────────────────── */
:where([data-theme="dark"]) .dropdown-menu {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xl);
}

:where([data-theme="dark"]) .dropdown-menu > li > a {
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .dropdown-menu > li > a:hover,
:where([data-theme="dark"]) .dropdown-menu > li > a:focus {
    background-color: var(--color-gray-100);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .dropdown-menu .divider {
    background-color: var(--color-border);
}

:where([data-theme="dark"]) .dropdown-header {
    color: var(--color-text-muted);
}

:where([data-theme="dark"]) .popover {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .popover-title {
    background-color: var(--color-gray-100);
    border-bottom-color: var(--color-border);
}

:where([data-theme="dark"]) .popover.top > .arrow:after { border-top-color: var(--color-bg-white); }
:where([data-theme="dark"]) .popover.bottom > .arrow:after { border-bottom-color: var(--color-bg-white); }
:where([data-theme="dark"]) .popover.left > .arrow:after { border-left-color: var(--color-bg-white); }
:where([data-theme="dark"]) .popover.right > .arrow:after { border-right-color: var(--color-bg-white); }

/* ── Modals ────────────────────────────────────────────────────────── */
:where([data-theme="dark"]) .modal-content {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-xl);
}

:where([data-theme="dark"]) .modal-header,
:where([data-theme="dark"]) .modal-footer {
    border-color: var(--color-border);
}

:where([data-theme="dark"]) .modal-backdrop.in {
    opacity: 0.7;
}

/* ── Tables ────────────────────────────────────────────────────────── */
:where([data-theme="dark"]) .table {
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .table > thead > tr > th,
:where([data-theme="dark"]) .table > tbody > tr > th,
:where([data-theme="dark"]) .table > tbody > tr > td,
:where([data-theme="dark"]) .table > tfoot > tr > td,
:where([data-theme="dark"]) .table-bordered,
:where([data-theme="dark"]) .table-bordered > thead > tr > th,
:where([data-theme="dark"]) .table-bordered > tbody > tr > td {
    border-color: var(--color-border);
}

:where([data-theme="dark"]) .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--color-bg-lighter);
}

:where([data-theme="dark"]) .table-hover > tbody > tr:hover {
    background-color: var(--color-gray-100);
}

:where([data-theme="dark"]) .table > tbody > tr.active > td,
:where([data-theme="dark"]) .table > tbody > tr > td.active {
    background-color: var(--color-gray-100);
}

/* ── Panels, wells, list groups ────────────────────────────────────── */
:where([data-theme="dark"]) .panel,
:where([data-theme="dark"]) .list-group-item {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .panel-default > .panel-heading,
:where([data-theme="dark"]) .panel-footer {
    background-color: var(--color-gray-100);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) a.list-group-item:hover,
:where([data-theme="dark"]) button.list-group-item:hover {
    background-color: var(--color-gray-100);
}

:where([data-theme="dark"]) .well,
:where([data-theme="dark"]) .breadcrumb {
    background-color: var(--color-gray-100);
    border-color: var(--color-border);
}

:where([data-theme="dark"]) .progress {
    background-color: var(--color-gray-200);
}

/* ── Tabs, pills, pagination ───────────────────────────────────────── */
:where([data-theme="dark"]) .nav-tabs {
    border-bottom-color: var(--color-border);
}

:where([data-theme="dark"]) .nav-tabs > li > a:hover,
:where([data-theme="dark"]) .nav > li > a:hover,
:where([data-theme="dark"]) .nav > li > a:focus {
    background-color: var(--color-gray-100);
    border-color: var(--color-border);
}

:where([data-theme="dark"]) .nav-tabs > li.active > a,
:where([data-theme="dark"]) .nav-tabs > li.active > a:hover,
:where([data-theme="dark"]) .nav-tabs > li.active > a:focus {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    border-bottom-color: transparent;
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .pagination > li > a,
:where([data-theme="dark"]) .pagination > li > span {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
    color: var(--color-primary-light);
}

:where([data-theme="dark"]) .pagination > li > a:hover {
    background-color: var(--color-gray-100);
}

:where([data-theme="dark"]) .pagination > .disabled > a,
:where([data-theme="dark"]) .pagination > .disabled > span {
    background-color: var(--color-bg-white);
    color: var(--color-text-muted);
}

/* ── Alerts, labels, code ──────────────────────────────────────────── */
:where([data-theme="dark"]) .alert-info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
}

:where([data-theme="dark"]) .alert-success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

:where([data-theme="dark"]) .alert-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

:where([data-theme="dark"]) .alert-danger {
    background-color: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error-text);
}

:where([data-theme="dark"]) code {
    background-color: var(--color-gray-100);
    color: var(--color-error-text);
}

:where([data-theme="dark"]) pre {
    background-color: var(--color-gray-50);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) kbd {
    background-color: var(--color-gray-200);
    color: var(--color-text-primary);
}

/* ── FAB navbar / list views ───────────────────────────────────────── */
:where([data-theme="dark"]) .navbar-default {
    background-color: var(--color-bg-white);
    border-color: var(--color-border);
}

:where([data-theme="dark"]) .navbar-default .navbar-nav > li > a,
:where([data-theme="dark"]) .navbar-default .navbar-brand {
    color: var(--color-text-secondary);
}

/* ── select2 ───────────────────────────────────────────────────────── */
:where([data-theme="dark"]) .select2-container--default .select2-selection--single,
:where([data-theme="dark"]) .select2-container--default .select2-selection--multiple,
:where([data-theme="dark"]) .select2-container--bootstrap .select2-selection,
:where([data-theme="dark"]) .select2-dropdown {
    background-color: var(--color-bg-white);
    border-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .select2-container--default .select2-selection--single .select2-selection__rendered,
:where([data-theme="dark"]) .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .select2-container--default .select2-selection--multiple .select2-selection__choice,
:where([data-theme="dark"]) .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-gray-100);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

:where([data-theme="dark"]) .select2-container--default .select2-results__option[aria-selected="true"],
:where([data-theme="dark"]) .select2-container--bootstrap .select2-results__option[aria-selected="true"] {
    background-color: var(--color-gray-100);
}

:where([data-theme="dark"]) .select2-search--dropdown .select2-search__field {
    background-color: var(--color-bg-light);
    border-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

/* ── Datepickers (bootstrap-datepicker, flatpickr) ─────────────────── */
:where([data-theme="dark"]) .datepicker.dropdown-menu,
:where([data-theme="dark"]) .flatpickr-calendar,
:where([data-theme="dark"]) .flatpickr-months .flatpickr-month,
:where([data-theme="dark"]) .flatpickr-current-month .flatpickr-monthDropdown-months,
:where([data-theme="dark"]) span.flatpickr-weekday,
:where([data-theme="dark"]) .flatpickr-weekdays {
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    fill: var(--color-text-primary);
    border-color: var(--color-border);
}

:where([data-theme="dark"]) .datepicker table tr td.day:hover,
:where([data-theme="dark"]) .datepicker table tr td.focused,
:where([data-theme="dark"]) .datepicker .datepicker-switch:hover,
:where([data-theme="dark"]) .datepicker .prev:hover,
:where([data-theme="dark"]) .datepicker .next:hover,
:where([data-theme="dark"]) .flatpickr-day:hover,
:where([data-theme="dark"]) .flatpickr-day:focus {
    background: var(--color-gray-100);
    border-color: var(--color-gray-100);
}

:where([data-theme="dark"]) .flatpickr-day,
:where([data-theme="dark"]) .flatpickr-months .flatpickr-prev-month,
:where([data-theme="dark"]) .flatpickr-months .flatpickr-next-month {
    color: var(--color-text-primary);
    fill: var(--color-text-primary);
}

:where([data-theme="dark"]) .flatpickr-day.prevMonthDay,
:where([data-theme="dark"]) .flatpickr-day.nextMonthDay,
:where([data-theme="dark"]) .flatpickr-day.flatpickr-disabled,
:where([data-theme="dark"]) .datepicker table tr td.old,
:where([data-theme="dark"]) .datepicker table tr td.new {
    color: var(--color-text-muted);
}

/* ── CodeMirror (neat / idea themes are light-only) ───────────────── */
:where([data-theme="dark"]) .CodeMirror {
    background: var(--color-code-bg);
    color: var(--color-code-text);
}

:where([data-theme="dark"]) .CodeMirror-gutters {
    background: var(--color-code-bg-dark);
    border-right-color: var(--color-code-border);
}

:where([data-theme="dark"]) .CodeMirror-linenumber {
    color: var(--color-gray-500);
}

:where([data-theme="dark"]) .CodeMirror-cursor {
    border-left-color: var(--color-code-text-muted);
}

:where([data-theme="dark"]) .CodeMirror-selected,
:where([data-theme="dark"]) .CodeMirror-focused .CodeMirror-selected {
    background: rgb(var(--color-primary-rgb) / 0.3);
}

:where([data-theme="dark"]) .CodeMirror-activeline-background {
    background: rgb(var(--color-ink-rgb) / 0.05);
}

:where([data-theme="dark"]) .CodeMirror .CodeMirror-placeholder {
    color: var(--color-gray-500);
}

:where([data-theme="dark"]) .CodeMirror .cm-keyword { color: var(--color-info-light); }
:where([data-theme="dark"]) .CodeMirror .cm-string,
:where([data-theme="dark"]) .CodeMirror .cm-string-2 { color: var(--color-warning-light); }
:where([data-theme="dark"]) .CodeMirror .cm-number { color: var(--color-success-light); }
:where([data-theme="dark"]) .CodeMirror .cm-comment { color: var(--color-gray-500); }
:where([data-theme="dark"]) .CodeMirror .cm-variable,
:where([data-theme="dark"]) .CodeMirror .cm-variable-2,
:where([data-theme="dark"]) .CodeMirror .cm-property { color: var(--color-code-text); }
:where([data-theme="dark"]) .CodeMirror .cm-builtin,
:where([data-theme="dark"]) .CodeMirror .cm-def,
:where([data-theme="dark"]) .CodeMirror .cm-type { color: var(--color-accent-purple-dark); }
:where([data-theme="dark"]) .CodeMirror .cm-operator,
:where([data-theme="dark"]) .CodeMirror .cm-bracket { color: var(--color-code-text-light); }
:where([data-theme="dark"]) .CodeMirror .cm-atom { color: var(--color-secondary-light); }

/* ── highlight.js on pages that load the light github theme ────────── */
:where([data-theme="dark"]) .hljs {
    background: var(--color-code-bg);
    color: var(--color-code-text);
}

/* ── CKEditor 5 ────────────────────────────────────────────────────── */
:where([data-theme="dark"]) .ck.ck-reset_all,
:where([data-theme="dark"]) .ck.ck-editor,
:where([data-theme="dark"]) .ck-body-wrapper {
    --ck-color-base-foreground: var(--color-gray-100);
    --ck-color-base-background: var(--color-bg-white);
    --ck-color-base-border: var(--color-border);
    --ck-color-base-text: var(--color-text-primary);
    --ck-color-text: var(--color-text-primary);
    --ck-color-toolbar-background: var(--color-bg-lighter);
    --ck-color-toolbar-border: var(--color-border);
    --ck-color-button-default-hover-background: var(--color-gray-100);
    --ck-color-button-default-active-background: var(--color-gray-200);
    --ck-color-button-on-background: var(--color-gray-200);
    --ck-color-button-on-hover-background: var(--color-gray-300);
    --ck-color-dropdown-panel-background: var(--color-bg-white);
    --ck-color-dropdown-panel-border: var(--color-border);
    --ck-color-input-background: var(--color-bg-white);
    --ck-color-input-border: var(--color-border-dark);
    --ck-color-input-text: var(--color-text-primary);
    --ck-color-list-background: var(--color-bg-white);
    --ck-color-list-button-hover-background: var(--color-gray-100);
    --ck-color-panel-background: var(--color-bg-white);
    --ck-color-panel-border: var(--color-border);
    --ck-color-labeled-field-label-background: var(--color-bg-white);
    --ck-color-split-button-hover-background: var(--color-gray-100);
    --ck-color-split-button-hover-border: var(--color-border);
}

:where([data-theme="dark"]) .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
    background: var(--color-bg-white);
    color: var(--color-text-primary);
}