/*
|--------------------------------------------------------------------------
| Dark mode patches for third-party CSS that doesn't use Bootstrap 5's
| theme-aware CSS variables (var(--bs-body-bg) etc), so it doesn't
| respond to [data-bs-theme="dark"] on its own.
|--------------------------------------------------------------------------
| Loaded after select2-bootstrap-5-theme.min.css in css.blade.php, so
| these overrides win on equal specificity. select2-bootstrap-5-theme
| 1.3.0 (the latest release) hardcodes light-mode colors throughout and
| has no dark variant upstream -- see handoff.md for details.
*/

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}

/* The theme hardcodes the single-select's chosen-value text to #212529 (near-black) on
   `.select2-selection--single .select2-selection__rendered` -- more specific than the
   `.select2-selection { color }` patch above, so the selected value is invisible on a
   dark background until this equally-scoped rule restores a theme-aware color. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

/* The single-select dropdown caret is a background-image SVG with a hardcoded dark
   stroke (#343a40), nearly invisible on a dark field -- swap in a light-stroke copy. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    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='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
    color: var(--bs-body-color);
    background-color: transparent;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
    color: #fff;
    background-color: var(--bs-primary);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-disabled="true"] {
    color: var(--bs-secondary-color);
}

/* Readonly/disabled form fields (mainframe.css:966) -- hardcodes a light background regardless of theme */
[data-bs-theme="dark"] .readonly,
[data-bs-theme="dark"] div.form-group span.readonly,
[data-bs-theme="dark"] input:read-only,
[data-bs-theme="dark"] .form-control[disabled],
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] fieldset[disabled] .form-control {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* "Active" checkbox box (form.is-active, used across nearly every module form) -- hardcodes a white box */
[data-bs-theme="dark"] .bordered-checkbox {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* Generic bordered container (order form's Shipping/Billing panels, invoices/payments,
   uploads, etc.) -- .bordered hardcodes `background: white` + `border: lightgrey`, so the
   whole panel renders as a white slab in dark mode. Use tertiary-bg (one step lighter than
   the body-bg form fields inside) so the panel reads as a card and the darker fields sit
   recessed within it, matching the other box patches above. */
[data-bs-theme="dark"] .bordered {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* Fixed form action bar (.cta-block: Save/Delete + Created/Updated stamps + Change log).
   project.css lumps it into `.content-wrapper,...,.cta-block { background:#f4f4f4 }`, which
   loads last and wins -- so in dark mode the bar stays light grey while its stamp text
   switches to light theme colors, leaving the Created/Updated meta near-invisible. Restore
   the theme surface; specificity (0,2,0) beats project.css's (0,1,0) regardless of order. */
[data-bs-theme="dark"] .cta-block {
    background-color: var(--bs-body-bg);
}

/* Upload thumbnail preview icon box (uploads-list-default.blade.php) -- hardcodes a white box */
[data-bs-theme="dark"] div.filecard .info-box-icon {
    background-color: var(--bs-tertiary-bg);
}

/* jQuery-Upload-File plugin dropzone (form/uploads.blade.php) -- vendored plugin, hardcodes a white dropzone */
[data-bs-theme="dark"] .ajax-upload-dragdrop {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* jQuery UI datepicker (form/date-jq.blade.php) -- also predates BS5 color modes */
[data-bs-theme="dark"] .ui-widget-content {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ui-widget-header {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ui-state-default {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* daterangepicker (moment-daterangepicker, form/date-range) -- vendored plugin that
   hardcodes light colors (white panels, #ddd borders, #eee hovers) with no dark
   variant, so the whole popup renders as a white box on a dark page. */
[data-bs-theme="dark"] .daterangepicker {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

/* Popup caret: the fill triangle (:after) must match the panel bg, the outline
   triangle (:before) the panel border -- for both the drop-down and drop-up cases. */
[data-bs-theme="dark"] .daterangepicker:before {
    border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .daterangepicker:after {
    border-bottom-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .daterangepicker.drop-up:before {
    border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .daterangepicker.drop-up:after {
    border-top-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .daterangepicker td.available:hover,
[data-bs-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .daterangepicker td.off,
[data-bs-theme="dark"] .daterangepicker td.off.in-range,
[data-bs-theme="dark"] .daterangepicker td.off.start-date,
[data-bs-theme="dark"] .daterangepicker td.off.end-date {
    background-color: var(--bs-body-bg);
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .daterangepicker td.in-range {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .daterangepicker td.active,
[data-bs-theme="dark"] .daterangepicker td.active:hover {
    background-color: var(--bs-primary);
    color: #fff;
}

[data-bs-theme="dark"] .daterangepicker .drp-buttons {
    border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .daterangepicker .ranges li.active {
    background-color: var(--bs-primary);
    color: #fff;
}

[data-bs-theme="dark"] .daterangepicker select.monthselect,
[data-bs-theme="dark"] .daterangepicker select.yearselect,
[data-bs-theme="dark"] .daterangepicker select.hourselect,
[data-bs-theme="dark"] .daterangepicker select.minuteselect,
[data-bs-theme="dark"] .daterangepicker select.secondselect,
[data-bs-theme="dark"] .daterangepicker select.ampmselect {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

/* CKEditor 4 (classic; form/textarea with class "ckeditor") chrome -- the toolbar, frame
   border and status bar live in the parent document and hardcode the light "moono-lisa"
   skin colors. (The editing surface itself is an <iframe>, which parent CSS can't reach;
   it's themed via mainframe.js -> applyEditorTheme.) */
[data-bs-theme="dark"] .cke_chrome {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .cke_top,
[data-bs-theme="dark"] .cke_bottom {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    box-shadow: none;
}

[data-bs-theme="dark"] .cke_inner,
[data-bs-theme="dark"] .cke_contents {
    background: var(--bs-body-bg);
}

/* Toolbar button glyphs and the combo dropdown arrows are dark sprite icons drawn for a
   light bar -- invert so they stay visible on the dark toolbar. */
[data-bs-theme="dark"] .cke_button_icon,
[data-bs-theme="dark"] .cke_combo_open {
    filter: invert(0.85);
}

[data-bs-theme="dark"] .cke_button:hover,
[data-bs-theme="dark"] .cke_button:focus,
[data-bs-theme="dark"] .cke_button__on {
    background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .cke_toolbar_separator {
    background: var(--bs-border-color);
}

/* Format/Styles dropdown labels, button labels, and the bottom element-path ("body") */
[data-bs-theme="dark"] .cke_combo_text,
[data-bs-theme="dark"] .cke_button_label,
[data-bs-theme="dark"] .cke_path_item {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .cke_combo_button {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}