/* =============================================================================
   theme-vendor.css — dark-mode overrides for third-party widgets
   =============================================================================

   Load AFTER theme.css (it consumes the --fal-* tokens defined there).

   Select2, flatpickr, bootstrap-datepicker and SweetAlert2 all ship light-only
   CSS and render into document.body, so they are targeted from the html element
   rather than from a page container. DataTables 2.1.8 already understands
   data-bs-theme natively and needs only the pieces styles.css restyled.

   Many rules here use !important because styles.css styles Select2 that way and
   SweetAlert2 sets inline styles — the weight has to match to win.
   ============================================================================= */


/* =============================================================================
   Select2
   ============================================================================= */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--fal-surface-inset) !important;
    border-color: var(--fal-border) !important;
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--fal-text-subtle) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--fal-text-muted) !important;
}

[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--fal-text-muted) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-dropdown,
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--fal-surface-raised) !important;
    border-color: var(--fal-border) !important;
    color: var(--fal-text) !important;
    box-shadow: var(--fal-shadow-lg) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--fal-text) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--fal-surface-active) !important;
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__group {
    color: var(--fal-text-muted) !important;
}

[data-bs-theme="dark"] .select2-search__field,
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--fal-surface-inset) !important;
    border-color: var(--fal-border) !important;
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fal-surface-active) !important;
    border-color: var(--fal-border-strong) !important;
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--fal-text-muted) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear,
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--fal-text-muted) !important;
}

[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #232a34 !important;
    color: var(--fal-text-muted) !important;
}


/* =============================================================================
   flatpickr
   ============================================================================= */
[data-bs-theme="dark"] .flatpickr-calendar {
    background: var(--fal-surface-raised);
    color: var(--fal-text);
    border: 1px solid var(--fal-border);
    box-shadow: var(--fal-shadow-lg);
}

[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--fal-surface-raised);
}

[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--fal-surface-raised);
}

[data-bs-theme="dark"] .flatpickr-months,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month {
    background: transparent;
    color: var(--fal-text);
    fill: var(--fal-text);
}

[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year {
    background: var(--fal-surface-raised);
    color: var(--fal-text);
}

[data-bs-theme="dark"] .flatpickr-monthDropdown-month {
    background: var(--fal-surface-raised);
    color: var(--fal-text);
}

[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--fal-text-muted);
}

[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--bs-primary);
}

[data-bs-theme="dark"] .flatpickr-weekdays,
[data-bs-theme="dark"] .flatpickr-weekdaycontainer,
[data-bs-theme="dark"] .flatpickr-days,
[data-bs-theme="dark"] .dayContainer {
    background: transparent;
}

[data-bs-theme="dark"] span.flatpickr-weekday {
    background: transparent;
    color: var(--fal-text-muted);
}

[data-bs-theme="dark"] .flatpickr-day {
    color: var(--fal-text);
    border-color: transparent;
}

[data-bs-theme="dark"] .flatpickr-day:hover,
[data-bs-theme="dark"] .flatpickr-day:focus {
    background: var(--fal-surface-hover);
    border-color: var(--fal-surface-hover);
    color: var(--fal-text);
}

[data-bs-theme="dark"] .flatpickr-day.today {
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-day.endRange,
[data-bs-theme="dark"] .flatpickr-day.selected:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

[data-bs-theme="dark"] .flatpickr-day.inRange {
    background: var(--fal-accent-wash-strong);
    border-color: var(--fal-accent-wash-strong);
    box-shadow: -5px 0 0 var(--fal-accent-wash-strong), 5px 0 0 var(--fal-accent-wash-strong);
}

[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
[data-bs-theme="dark"] .flatpickr-day.notAllowed {
    color: var(--fal-text-subtle);
    opacity: .55;
}

[data-bs-theme="dark"] .flatpickr-time input,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator {
    background: transparent;
    color: var(--fal-text);
}

[data-bs-theme="dark"] .flatpickr-time input:hover,
[data-bs-theme="dark"] .flatpickr-time input:focus,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--fal-surface-hover);
}

[data-bs-theme="dark"] .flatpickr-time {
    border-top-color: var(--fal-border);
}

[data-bs-theme="dark"] .numInputWrapper span {
    border-color: var(--fal-border);
}

[data-bs-theme="dark"] .numInputWrapper span:hover {
    background: var(--fal-surface-hover);
}

[data-bs-theme="dark"] .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--fal-text-muted);
}

[data-bs-theme="dark"] .numInputWrapper span.arrowDown:after {
    border-top-color: var(--fal-text-muted);
}

[data-bs-theme="dark"] .flatpickr-weekwrapper .flatpickr-weeks {
    box-shadow: 1px 0 0 var(--fal-border);
}

/* Selve ugenumrene. flatpickr saetter dem til rgba(57,57,57,.3) — naesten sort ved
   30% opacitet, hvilket er fint paa hvidt og usynligt paa moerkt. Skillelinjen
   ovenfor var temaet, men ikke tallene. text-subtle, saa de bliver laesbare uden at
   konkurrere med dagene. */
[data-bs-theme="dark"] .flatpickr-weekwrapper span.flatpickr-day,
[data-bs-theme="dark"] .flatpickr-weekwrapper span.flatpickr-day:hover {
    color: var(--fal-text-subtle);
}


/* =============================================================================
   bootstrap-datepicker
   ============================================================================= */
[data-bs-theme="dark"] .datepicker,
[data-bs-theme="dark"] .datepicker-dropdown {
    background: var(--fal-surface-raised);
    color: var(--fal-text);
    border-color: var(--fal-border);
    box-shadow: var(--fal-shadow-lg);
}

[data-bs-theme="dark"] .datepicker-dropdown:before {
    border-bottom-color: var(--fal-border);
}

[data-bs-theme="dark"] .datepicker-dropdown:after {
    border-bottom-color: var(--fal-surface-raised);
}

[data-bs-theme="dark"] .datepicker table tr td,
[data-bs-theme="dark"] .datepicker table tr th {
    color: var(--fal-text);
}

[data-bs-theme="dark"] .datepicker table tr td.day:hover,
[data-bs-theme="dark"] .datepicker table tr td.focused,
[data-bs-theme="dark"] .datepicker table tr th.prev:hover,
[data-bs-theme="dark"] .datepicker table tr th.next:hover,
[data-bs-theme="dark"] .datepicker table tr th.datepicker-switch:hover,
[data-bs-theme="dark"] .datepicker .datepicker-months span:hover,
[data-bs-theme="dark"] .datepicker .datepicker-years span:hover {
    background: var(--fal-surface-hover);
    color: var(--fal-text);
}

[data-bs-theme="dark"] .datepicker table tr td.active,
[data-bs-theme="dark"] .datepicker table tr td.active:hover,
[data-bs-theme="dark"] .datepicker table tr td.active.active {
    background: var(--bs-primary);
    background-image: none;
    color: #fff;
    text-shadow: none;
}

[data-bs-theme="dark"] .datepicker table tr td.old,
[data-bs-theme="dark"] .datepicker table tr td.new,
[data-bs-theme="dark"] .datepicker table tr td.disabled {
    color: var(--fal-text-subtle);
}

[data-bs-theme="dark"] .datepicker table tr td.today {
    background: var(--fal-accent-wash-strong);
    background-image: none;
    color: var(--fal-text);
}


/* =============================================================================
   SweetAlert2
   ============================================================================= */
[data-bs-theme="dark"] .swal2-popup {
    background: var(--fal-surface-raised) !important;
    color: var(--fal-text) !important;
    border: 1px solid var(--fal-border);
    box-shadow: var(--fal-shadow-lg);
}

[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-content,
[data-bs-theme="dark"] .swal2-label {
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select,
[data-bs-theme="dark"] .swal2-file {
    background: var(--fal-surface-inset) !important;
    color: var(--fal-text) !important;
    border-color: var(--fal-border) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .swal2-input::placeholder,
[data-bs-theme="dark"] .swal2-textarea::placeholder {
    color: var(--fal-text-subtle) !important;
}

[data-bs-theme="dark"] .swal2-validation-message {
    background: var(--bs-danger-bg-subtle) !important;
    color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="dark"] .swal2-footer {
    border-top-color: var(--fal-border) !important;
    color: var(--fal-text-muted) !important;
}

[data-bs-theme="dark"] .swal2-close {
    color: var(--fal-text-muted) !important;
}

[data-bs-theme="dark"] .swal2-close:hover {
    color: var(--fal-text) !important;
}

/* Dimningen bag en dialog. Maa IKKE ramme toasts: SweetAlert genbruger den samme
   .swal2-container til dem, og den er placeret i et hjoerne — saa reglen malede et
   stort sort felt hen over siden bag toasten i stedet for at dimme noget.
   Biblioteket markerer selv toast-tilstanden paa <body> (body.swal2-toast-shown) og
   bruger samme undtagelse i sin egen CSS, saa vi foelger den konvention. */
[data-bs-theme="dark"] body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show,
[data-bs-theme="dark"] body:not(.swal2-toast-shown) .swal2-container.swal2-shown {
    background-color: rgba(0, 0, 0, .68) !important;
}

[data-bs-theme="dark"] .swal2-timer-progress-bar {
    background: rgba(255, 255, 255, .25) !important;
}


/* =============================================================================
   DataTables
   DataTables 2.1.8 has native data-bs-theme support; these cover the pieces
   styles.css restyled for light via its own .datatable-* classes.
   ============================================================================= */
[data-bs-theme="dark"] .datatable-pagination a,
[data-bs-theme="dark"] .datatable-pagination button {
    color: var(--fal-text);
    background-color: transparent;
}

[data-bs-theme="dark"] .datatable-pagination a:hover,
[data-bs-theme="dark"] .datatable-pagination button:hover {
    background-color: var(--fal-surface-hover);
    color: var(--fal-text);
}

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

[data-bs-theme="dark"] .datatable-info,
[data-bs-theme="dark"] .dt-info,
[data-bs-theme="dark"] .datatable-dropdown label,
[data-bs-theme="dark"] .dt-length label,
[data-bs-theme="dark"] .dt-search label {
    color: var(--fal-text-muted);
}

[data-bs-theme="dark"] table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--fal-accent-wash-strong);
    color: var(--fal-text);
}

[data-bs-theme="dark"] div.dt-scroll-body thead tr,
[data-bs-theme="dark"] div.dt-scroll-head {
    background-color: var(--fal-surface);
}


/* =============================================================================
   HugeRTE / TinyMCE
   The editor chrome is switched to the oxide-dark skin from falcron-theme.js;
   this only keeps the outer frame consistent with our form controls.
   ============================================================================= */
[data-bs-theme="dark"] .tox.tox-tinymce {
    border-color: var(--fal-border) !important;
}

[data-bs-theme="dark"] .tox .tox-statusbar {
    border-top-color: var(--fal-border) !important;
}


/* =============================================================================
   ApexCharts
   Chart series/axis colours are handed to the chart config from JS
   (falTheme.chart()); these are the bits Apex injects straight into the DOM.
   ============================================================================= */
[data-bs-theme="dark"] .apexcharts-tooltip,
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--fal-surface-raised) !important;
    color: var(--fal-text) !important;
    border-color: var(--fal-border) !important;
    box-shadow: var(--fal-shadow) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-title {
    background: var(--fal-surface-hover) !important;
    border-bottom-color: var(--fal-border) !important;
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
    background: var(--fal-surface-raised) !important;
    color: var(--fal-text) !important;
    border-color: var(--fal-border) !important;
}

[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom:before,
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: var(--fal-surface-raised) !important;
}

[data-bs-theme="dark"] .apexcharts-menu {
    background: var(--fal-surface-raised) !important;
    border-color: var(--fal-border) !important;
}

[data-bs-theme="dark"] .apexcharts-menu-item:hover {
    background: var(--fal-surface-hover) !important;
}

[data-bs-theme="dark"] .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-title-text,
[data-bs-theme="dark"] .apexcharts-legend-text,
[data-bs-theme="dark"] .apexcharts-datalabel {
    fill: var(--fal-text) !important;
    color: var(--fal-text) !important;
}

[data-bs-theme="dark"] .apexcharts-gridline,
[data-bs-theme="dark"] .apexcharts-grid line {
    stroke: var(--fal-border) !important;
}