/* =====================================================================
   Dark-mode overrides for third-party plugins (loaded after theme-tokens.css).
   Only active under [data-theme="dark"]; light mode keeps plugin defaults.
   Color values mirror the --mku-* token palette.
   ===================================================================== */

/* ---------- SweetAlert2 ---------- */
html[data-theme="dark"] .swal2-popup {
    background: var(--mku-surface);
    color: var(--mku-text-1);
}
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content { color: var(--mku-text-1); }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
    background: var(--mku-field);
    border-color: var(--mku-line);
    color: var(--mku-text-1);
}
html[data-theme="dark"] .swal2-footer { border-top-color: var(--mku-line); color: #a7adbe; }

/* ---------- toastr (neutral/info toasts; success/error keep their colour) ---------- */
html[data-theme="dark"] #toast-container > .toast { box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
html[data-theme="dark"] #toast-container > .toast-info { background-color: #1f4d63; }
html[data-theme="dark"] #toast-container > div:not([class*="toast-success"]):not([class*="toast-error"]):not([class*="toast-warning"]):not([class*="toast-info"]) {
    background-color: var(--mku-surface);
    color: var(--mku-text-1);
}

/* ---------- daterangepicker ---------- */
html[data-theme="dark"] .daterangepicker {
    background: var(--mku-surface);
    border-color: var(--mku-line);
    color: var(--mku-text-1);
}
html[data-theme="dark"] .daterangepicker:after { border-bottom-color: var(--mku-surface); }
html[data-theme="dark"] .daterangepicker:before { border-bottom-color: var(--mku-line); }
html[data-theme="dark"] .daterangepicker .calendar-table { background: var(--mku-surface); border-color: var(--mku-surface); }
html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover { background-color: var(--mku-field); }
html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range { background-color: #0f1729; color: #6b7280; }
html[data-theme="dark"] .daterangepicker td.in-range { background-color: rgba(16, 185, 129, .12); color: var(--mku-text-1); }
html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover { background-color: var(--accent-600, #047857); color: #fff; }
html[data-theme="dark"] .daterangepicker .ranges li:hover { background-color: var(--mku-field); }
html[data-theme="dark"] .daterangepicker .ranges li.active { background-color: var(--accent-600, #047857); }
html[data-theme="dark"] .daterangepicker select,
html[data-theme="dark"] .daterangepicker .input-mini { background: var(--mku-field); border-color: var(--mku-line); color: var(--mku-text-1); }
html[data-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--mku-line); }

/* ---------- bootstrap-datetimepicker (uses .dropdown-menu, already dark; add cells) ---------- */
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.hour:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.minute:hover { background: var(--mku-field); }
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active:hover { background-color: var(--accent-600, #047857); color: #fff; }
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.old,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.new { color: #6b7280; }