/* ==========================================================================
   theme-dark-vendor.css — dark mode for third-party widgets
   --------------------------------------------------------------------------
   Every rule is scoped to html[data-theme="dark"]; light mode is untouched.
   Tokens come from theme.css. Covered: Select2, bootstrap-datepicker,
   daterangepicker, bootstrap-table, SweetAlert2, jQuery Toast, FullCalendar 6,
   asColorPicker, jQuery Tags Input, TinyMCE 6 chrome, CKEditor 4 chrome,
   dragula, ApexCharts tooltips/menus.
   ========================================================================== */

/* ---------- Select2 ---------- */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-surface);
    border-color: var(--border-input);
}

html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--theme-color-text);
}

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

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder,
html[data-theme="dark"] .select2-search__field::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent;
}

html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-secondary) transparent;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: var(--text-secondary);
}

html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--theme-color-soft);
    border-color: color-mix(in srgb, var(--theme-color-text) 35%, transparent);
    color: var(--text-primary);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-secondary);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--text-primary);
}

html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-container--default .select2-dropdown {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-body);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field,
html[data-theme="dark"] .select2-container--default .select2-dropdown .select2-search__field {
    background-color: var(--bg-surface);
    border-color: var(--border-input);
    color: var(--text-primary);
}

html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    background-color: transparent;
}

html[data-theme="dark"] .select2-results__option,
html[data-theme="dark"] .select2-container--default .select2-results__group {
    color: var(--text-body);
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
html[data-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--theme-color);
    color: var(--on-theme);
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled=true] {
    color: var(--text-muted);
}

html[data-theme="dark"] .select2-close-mask {
    background-color: transparent;
}

/* ---------- bootstrap-datepicker ---------- */
html[data-theme="dark"] .datepicker-dropdown,
html[data-theme="dark"] .datepicker.dropdown-menu,
html[data-theme="dark"] .datepicker.datepicker-inline {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-body);
    box-shadow: var(--shadow-lg);
}

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

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

html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top:before {
    border-top-color: var(--border-subtle);
}

html[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top:after {
    border-top-color: var(--bg-surface-raised);
}

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

html[data-theme="dark"] .datepicker.datepicker-dropdown .datepicker-days table.table-condensed thead tr th.prev,
html[data-theme="dark"] .datepicker.datepicker-dropdown .datepicker-days table.table-condensed thead tr th.next,
html[data-theme="dark"] .datepicker.datepicker-dropdown .datepicker-days table.table-condensed thead tr th.datepicker-switch,
html[data-theme="dark"] .datepicker.datepicker-inline .datepicker-days table.table-condensed thead tr th.prev,
html[data-theme="dark"] .datepicker.datepicker-inline .datepicker-days table.table-condensed thead tr th.next,
html[data-theme="dark"] .datepicker.datepicker-inline .datepicker-days table.table-condensed thead tr th.datepicker-switch {
    background: transparent;
    color: var(--text-primary);
}

html[data-theme="dark"] .datepicker.datepicker-dropdown .datepicker-days table.table-condensed thead tr th.dow,
html[data-theme="dark"] .datepicker.datepicker-inline .datepicker-days table.table-condensed thead tr th.dow {
    color: var(--text-secondary);
}

html[data-theme="dark"] .datepicker.datepicker-dropdown .datepicker-days table.table-condensed tbody td.day,
html[data-theme="dark"] .datepicker.datepicker-inline .datepicker-days table.table-condensed tbody td.day {
    color: var(--text-body);
}

html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td.day.focused,
html[data-theme="dark"] .datepicker table tr td span:hover,
html[data-theme="dark"] .datepicker table tr td span.focused,
html[data-theme="dark"] .datepicker .datepicker-switch:hover,
html[data-theme="dark"] .datepicker .prev:hover,
html[data-theme="dark"] .datepicker .next:hover,
html[data-theme="dark"] .datepicker tfoot tr th:hover,
html[data-theme="dark"] .datepicker.datepicker-dropdown .datepicker-days table.table-condensed tbody td.day:hover,
html[data-theme="dark"] .datepicker.datepicker-inline .datepicker-days table.table-condensed tbody td.day:hover {
    background: var(--bg-surface-sunken);
    color: var(--text-primary);
}

html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new,
html[data-theme="dark"] .datepicker table tr td span.old,
html[data-theme="dark"] .datepicker table tr td span.new,
html[data-theme="dark"] .datepicker table tr td.disabled,
html[data-theme="dark"] .datepicker table tr td.disabled:hover,
html[data-theme="dark"] .datepicker table tr td span.disabled,
html[data-theme="dark"] .datepicker.datepicker-dropdown .datepicker-days table.table-condensed tbody td.old.day,
html[data-theme="dark"] .datepicker.datepicker-dropdown .datepicker-days table.table-condensed tbody td.new.day,
html[data-theme="dark"] .datepicker.datepicker-inline .datepicker-days table.table-condensed tbody td.old.day {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .datepicker table tr td.range,
html[data-theme="dark"] .datepicker table tr td.highlighted {
    background: var(--theme-color-soft);
}

html[data-theme="dark"] .datepicker table tr td.today:not(.active),
html[data-theme="dark"] .datepicker table tr td.today:not(.active):hover {
    background-image: none;
    background-color: var(--warning-soft);
    border-color: transparent;
    color: var(--warning);
}

html[data-theme="dark"] .input-daterange .add-on {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-input);
}

/* ---------- daterangepicker ---------- */
html[data-theme="dark"] .daterangepicker {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-body);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .daterangepicker:before {
    border-bottom-color: var(--border-subtle);
}

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

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

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

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

html[data-theme="dark"] .daterangepicker .calendar-table th,
html[data-theme="dark"] .daterangepicker .calendar-table td {
    color: var(--text-body);
}

html[data-theme="dark"] .daterangepicker .calendar-table .next span,
html[data-theme="dark"] .daterangepicker .calendar-table .prev span {
    border-color: var(--text-body);
}

html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover,
html[data-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
}

html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date {
    background-color: transparent;
    color: var(--text-muted);
}

html[data-theme="dark"] .daterangepicker td.in-range {
    background-color: var(--theme-color-soft);
    color: var(--text-primary);
}

html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover,
html[data-theme="dark"] .daterangepicker .ranges li.active {
    background-color: var(--theme-color);
    color: var(--on-theme);
}

html[data-theme="dark"] .daterangepicker td.week,
html[data-theme="dark"] .daterangepicker th.week,
html[data-theme="dark"] .daterangepicker td.disabled,
html[data-theme="dark"] .daterangepicker option.disabled,
html[data-theme="dark"] .daterangepicker .calendar-time select.disabled {
    color: var(--text-muted);
}

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

html[data-theme="dark"] .daterangepicker .drp-buttons,
html[data-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left,
html[data-theme="dark"] .daterangepicker.show-ranges.rtl .drp-calendar.right,
html[data-theme="dark"] .daterangepicker.show-ranges.single.ltr .drp-calendar.left,
html[data-theme="dark"] .daterangepicker.show-ranges.single.rtl .drp-calendar.left {
    border-color: var(--border-subtle);
}

/* ---------- bootstrap-table ---------- */
html[data-theme="dark"] .bootstrap-table .fixed-table-container,
html[data-theme="dark"] .bootstrap-table .fixed-table-container.fixed-height:not(.has-footer),
html[data-theme="dark"] .bootstrap-table .fixed-table-container.fixed-height.has-card-view,
html[data-theme="dark"] .bootstrap-table .fixed-table-container.fixed-height .fixed-table-border,
html[data-theme="dark"] .bootstrap-table .fixed-table-container.fixed-height .table thead th {
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading,
html[data-theme="dark"] .bootstrap-table.fullscreen,
html[data-theme="dark"] .fixed-columns,
html[data-theme="dark"] .fixed-columns-right {
    background: var(--bg-surface);
    color: var(--text-body);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot,
html[data-theme="dark"] .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after,
html[data-theme="dark"] .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::before {
    background: var(--text-primary);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-container .table tbody tr.selected td {
    background-color: var(--theme-color-soft);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-container .table thead th .sortable,
html[data-theme="dark"] .bootstrap-table .fixed-table-container .table thead th .th-inner {
    color: var(--text-secondary);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-pagination > .pagination-detail,
html[data-theme="dark"] .bootstrap-table .fixed-table-pagination > .pagination-detail .pagination-info {
    color: var(--text-secondary);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.page-intermediate a {
    color: var(--text-muted);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-toolbar .columns label,
html[data-theme="dark"] .bootstrap-table .fixed-table-toolbar .dropdown-menu label {
    color: var(--text-body);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-toolbar .btn-secondary,
html[data-theme="dark"] .bootstrap-table .fixed-table-toolbar .btn-default,
html[data-theme="dark"] .bootstrap-table .fixed-table-pagination .btn-secondary {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-input) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .bootstrap-table .card-view .card-view-title {
    color: var(--text-secondary);
}

html[data-theme="dark"] .bootstrap-table .fixed-table-footer,
html[data-theme="dark"] .bootstrap-table .fixed-table-header {
    background-color: var(--bg-surface-sunken);
}

html[data-theme="dark"] .reorder-rows-on-drag-class td {
    background-color: var(--theme-color-soft) !important;
}

/* ---------- SweetAlert2 ---------- */
/* The success icon's masking pieces take the popup's computed background,
   so setting the popup background keeps that icon clean. */
html[data-theme="dark"] .swal2-popup {
    background: var(--bg-surface-raised);
    color: var(--text-body);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl);
}

html[data-theme="dark"] .swal2-title {
    color: var(--text-primary);
}

html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
    color: var(--text-body);
}

html[data-theme="dark"] .swal2-container.swal2-backdrop-show {
    background: var(--bg-overlay);
}

html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-file,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
    background: var(--bg-surface);
    border-color: var(--border-input);
    color: var(--text-primary);
}

html[data-theme="dark"] .swal2-input:focus,
html[data-theme="dark"] .swal2-file:focus,
html[data-theme="dark"] .swal2-textarea:focus {
    border-color: var(--theme-color-text);
    box-shadow: 0 0 0 3px var(--theme-color-soft);
}

html[data-theme="dark"] .swal2-validation-message {
    background: var(--bg-surface-sunken);
    color: var(--text-body);
}

html[data-theme="dark"] .swal2-close {
    color: var(--text-secondary);
}

html[data-theme="dark"] .swal2-close:hover {
    color: var(--danger);
}

html[data-theme="dark"] .swal2-footer {
    border-top-color: var(--border-subtle);
    color: var(--text-secondary);
}

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

/* ---------- jQuery Toast ---------- */
html[data-theme="dark"] .jq-toast-single {
    box-shadow: var(--shadow-lg);
}

/* ---------- FullCalendar 6 ---------- */
html[data-theme="dark"] .fc {
    --fc-border-color: var(--border-subtle);
    --fc-page-bg-color: var(--bg-surface);
    --fc-neutral-bg-color: var(--bg-surface-sunken);
    --fc-neutral-text-color: var(--text-secondary);
    --fc-list-event-hover-bg-color: var(--bg-surface-sunken);
    --fc-today-bg-color: var(--theme-color-soft);
    --fc-highlight-color: var(--theme-color-soft);
    --fc-non-business-color: rgba(0, 0, 0, .25);
    --fc-button-text-color: var(--on-theme);
    color: var(--text-body);
}

html[data-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-daygrid-day-number,
html[data-theme="dark"] .fc .fc-timegrid-slot-label-cushion,
html[data-theme="dark"] .fc .fc-toolbar-title,
html[data-theme="dark"] .fc .fc-list-day-text,
html[data-theme="dark"] .fc .fc-list-day-side-text {
    color: var(--text-primary);
}

html[data-theme="dark"] .fc .fc-popover {
    background: var(--bg-surface-raised);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] #external-events {
    background: var(--bg-surface-sunken);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .remove-timetable:hover {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

/* ---------- asColorPicker ---------- */
html[data-theme="dark"] .asColorPicker-dropdown {
    background: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .asColorPicker-trigger,
html[data-theme="dark"] .asColorPicker-gradient-wheel {
    border-color: var(--border-input);
}

html[data-theme="dark"] .asColorPicker-clear {
    color: var(--text-secondary);
}

html[data-theme="dark"] .asColorPicker-hex {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-input);
}

/* ---------- jQuery Tags Input ---------- */
html[data-theme="dark"] div.tagsinput {
    background: var(--bg-surface);
    border-color: var(--border-input);
}

html[data-theme="dark"] div.tagsinput input {
    color: var(--text-primary);
}

html[data-theme="dark"] div.tagsinput span.tag {
    background: var(--theme-color-soft);
    border-color: color-mix(in srgb, var(--theme-color-text) 35%, transparent);
    color: var(--text-primary);
}

html[data-theme="dark"] div.tagsinput span.tag a {
    color: var(--text-secondary);
}

html[data-theme="dark"] .not_valid {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}

/* ---------- TinyMCE 6 ---------- */
/* The editor itself is re-initialised with the oxide-dark skin by
   theme-switcher.js; this only covers the gap before re-init and the
   surrounding container border. */
html[data-theme="dark"] .tox-tinymce {
    border-color: var(--border-subtle) !important;
}

/* ---------- CKEditor 4 ---------- */
/* The bundled skin is light-only with sprite icons. Inverting the chrome
   (with a hue rotate to keep icon colours) gives a consistent dark toolbar
   without replacing the skin. The editable iframe body is themed from JS. */
html[data-theme="dark"] .cke_chrome {
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .cke_top,
html[data-theme="dark"] .cke_bottom,
html[data-theme="dark"] .cke_panel,
html[data-theme="dark"] .cke_dialog_body,
html[data-theme="dark"] .cke_menu_panel {
    filter: invert(.9) hue-rotate(180deg);
}

html[data-theme="dark"] .cke_dialog_background_cover {
    background-color: #000 !important;
}

/* ---------- dragula ---------- */
html[data-theme="dark"] .gu-mirror {
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
}

/* ---------- ApexCharts chrome (SVG colours come from theme-switcher.js) ---------- */
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-body);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--bg-surface-sunken);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip {
    background: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-body);
}

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

html[data-theme="dark"] .apexcharts-menu {
    background: var(--bg-surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-body);
}

html[data-theme="dark"] .apexcharts-menu-item:hover {
    background: var(--bg-surface-sunken);
}

html[data-theme="dark"] .apexcharts-toolbar svg,
html[data-theme="dark"] .apexcharts-menu-icon svg {
    fill: var(--text-secondary);
}

html[data-theme="dark"] .apexcharts-legend-text {
    color: var(--text-body) !important;
}