/*
 * Mode gelap asset-web. Aktif bila <html data-theme="dark"> (dipasang skrip di <head>
 * sesuai pilihan Terang / Gelap / Otomatis). Dimuat di layout dan layar masuk setelah
 * stylesheet lain.
 *
 * Seluruh komponen (shell, crm-app.css, crm-auth.css) memakai token warna, jadi bagian
 * terbesarnya cukup membalik token di sini. Selector html[data-theme] sengaja lebih kuat
 * dari :root supaya juga menang atas palet dari Pengaturan Aplikasi; warna utama, sidebar,
 * dan aksen tetap mengikuti palet itu.
 */
html[data-theme="dark"] {
    color-scheme: dark;

    --color-ground: #0b1220;
    --color-surface: #121b2e;
    --color-ink: #e6ebf5;
    --color-ink-muted: #9aa6bf;

    --color-line: #24314b;
    --color-line-row: #1f2b43;
    --color-line-cell: #1b263c;
    --color-row-hover: #172238;
    --color-row-emphasis: #151f34;

    --color-field-border: #2e3c5a;
    --color-btn-border: #2e3c5a;
    --color-btn-border-hover: #40527a;
    --color-tile-border-hover: #40527a;

    --color-primary-soft: color-mix(in srgb, var(--color-primary) 20%, #121b2e);
    --color-tone-info: color-mix(in srgb, var(--color-primary) 20%, #121b2e);
    --color-tone-info-ink: color-mix(in srgb, var(--color-primary) 55%, #ffffff);

    --color-tone-ok: #10301f;
    --color-tone-ok-ink: #4ade80;
    --color-tone-ok-line: #1f5a3a;
    --color-tone-risk: #33270d;
    --color-tone-risk-ink: #fbbf24;
    --color-tone-risk-line: #5c4714;
    --color-tone-off: #3a1421;
    --color-tone-off-ink: #fb7185;
    --color-tone-off-line: #6b2337;
    --color-tone-off-ink-hover: #fda4af;
    --color-tone-neu: #1f2b43;
    --color-tone-neu-ink: #9aa6bf;
    --color-tone-purple: #2a1f45;
    --color-tone-purple-ink: #c4b5fd;

    --color-accent-ink: color-mix(in srgb, var(--color-accent) 70%, #ffffff);

    /* Sidebar mode gelap otomatis: warna sidebar palet terang dicampur hampir hitam agar terpisah
     * dari konten. Palet mode gelap di Pengaturan Aplikasi menimpa keduanya (App\Support\Palette). */
    --color-shell-dark: color-mix(in srgb, var(--color-shell) 62%, #050912);
    --color-shell-dark-raised: color-mix(in srgb, var(--color-shell-raised) 70%, #050912);

    --shadow-tile: 0 1px 2px rgb(0 0 0 / 0.35), 0 12px 32px -20px rgb(0 0 0 / 0.6);
    --shadow-tile-hover: 0 2px 4px rgb(0 0 0 / 0.4), 0 18px 40px -20px rgb(0 0 0 / 0.7);
    --shadow-auth-card: 0 1px 2px rgb(0 0 0 / 0.35), 0 24px 48px -28px rgb(0 0 0 / 0.7);
    --shadow-field-focus: 0 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent);

    /* Variabel Bootstrap/Velzon yang masih dibaca CSS plugin dan gaya inline lama. */
    --vz-body-color: #e6ebf5;
    --vz-body-bg: #0b1220;
    --vz-dark: #e6ebf5;
    --vz-secondary-color: #9aa6bf;
    --vz-border-color: #24314b;
    --vz-input-bg-custom: #121b2e;
    --vz-input-border-custom: #2e3c5a;
    --bs-body-bg: #121b2e;
    --bs-border-color: #24314b;
    --bs-table-color: #e6ebf5;
    --bs-table-striped-bg: #151f34;
    --bs-dropdown-link-color: #e6ebf5;
    --bs-dropdown-link-hover-color: #e6ebf5;
    --bs-dropdown-link-hover-bg: #172238;
}

/* Kelas berwarna putih tetap di markup lama dan CSS komponen. */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .alert-white,
html[data-theme="dark"] .btn-white {
    background-color: var(--color-surface) !important;
    color: var(--color-ink);
}

html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-dark {
    color: var(--color-ink) !important;
}

html[data-theme="dark"] .crm-topbar,
html[data-theme="dark"] .crm-menu-pop {
    background: var(--color-surface);
}

/* Isian tanggal dan berkas memakai kontrol bawaan peramban; color-scheme sudah menggelapkannya. */
html[data-theme="dark"] .form-control::placeholder {
    color: #6f7d99;
}

html[data-theme="dark"] .btn-close {
    color: var(--color-ink-muted);
}

html[data-theme="dark"] img.photo-preview,
html[data-theme="dark"] .img-thumbnail {
    background-color: var(--color-row-emphasis);
}

/* ---- Plugin ---- */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--color-surface);
    border-color: var(--color-field-border);
    color: var(--color-ink);
}

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

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

html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--color-row-emphasis);
}

html[data-theme="dark"] .daterangepicker,
html[data-theme="dark"] .daterangepicker .calendar-table,
html[data-theme="dark"] .daterangepicker .drp-buttons,
html[data-theme="dark"] .daterangepicker .ranges {
    background-color: var(--color-surface);
    border-color: var(--color-line);
    color: var(--color-ink);
}

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

html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range {
    background-color: transparent;
    color: #5d6a85;
}

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(--color-row-hover);
}

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

html[data-theme="dark"] .daterangepicker select {
    background-color: var(--color-surface);
    color: var(--color-ink);
    border-color: var(--color-field-border);
}

html[data-theme="dark"] .flatpickr-calendar,
html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] span.flatpickr-weekday {
    background: var(--color-surface);
    color: var(--color-ink);
    fill: var(--color-ink);
}

html[data-theme="dark"] .flatpickr-calendar {
    box-shadow: var(--shadow-tile-hover);
}

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

html[data-theme="dark"] .flatpickr-day {
    color: var(--color-ink);
}

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

html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled {
    color: #5d6a85;
}

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

html[data-theme="dark"] .swal2-popup {
    background: var(--color-surface) !important;
    color: var(--color-ink);
}

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

html[data-theme="dark"] .jstree-default .jstree-anchor {
    color: var(--color-ink);
}

html[data-theme="dark"] .easy-autocomplete-container ul,
html[data-theme="dark"] .comboTreeDropDownContainer,
html[data-theme="dark"] .combotree-dropdown {
    background: var(--color-surface);
    border-color: var(--color-line);
    color: var(--color-ink);
}

html[data-theme="dark"] .comboTreeItemTitle:hover,
html[data-theme="dark"] .comboTreeItemHover {
    background: var(--color-row-hover);
}

html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-menu {
    background: var(--color-surface) !important;
    border-color: var(--color-line) !important;
    color: var(--color-ink) !important;
}

html[data-theme="dark"] .apexcharts-tooltip-title {
    background: var(--color-row-emphasis) !important;
    border-color: var(--color-line) !important;
}

html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-legend-text,
html[data-theme="dark"] .apexcharts-datalabel-label,
html[data-theme="dark"] .apexcharts-datalabel-value {
    fill: var(--color-ink-muted) !important;
    color: var(--color-ink-muted) !important;
}

html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-xaxis line,
html[data-theme="dark"] .apexcharts-grid-borders line {
    stroke: var(--color-line);
}

/* Layar masuk: foto terang di panel kanan diredupkan agar kartu tetap menonjol. */
html[data-theme="dark"] .login-card-photo {
    opacity: 0.25;
}

/* Gambar foto bawaan (latar terang) diredupkan agar tidak menyilaukan. */
html[data-theme="dark"] img[src*="no-photo.svg"] {
    filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
}

/* Tombol buka-detail baris DataTables Responsive. */
html[data-theme="dark"] table.dataTable td.dtr-control::before,
html[data-theme="dark"] table.dataTable th.dtr-control::before {
    color: var(--color-ink-muted);
    border-color: var(--color-ink-muted);
}

/* ---- Sidebar ----
 * Di mode terang menu aktif berupa "pil" putih (surface) di atas sidebar. Di mode gelap
 * surface ikut gelap sehingga pil itu nyaris sama dengan sidebar dan teks utamanya tenggelam.
 * Di sini sidebar memakai --color-shell-dark agar terpisah dari konten, dan menu aktif
 * memakai warna utama palet dengan teks putih. */
html[data-theme="dark"] .crm-sb {
    background: var(--color-shell-dark);
    border-inline-end: 1px solid var(--color-line);
}

html[data-theme="dark"] .crm-nav a:hover,
html[data-theme="dark"] .crm-nav .crm-grp:hover {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

html[data-theme="dark"] .crm-nav > a[aria-current="page"],
html[data-theme="dark"] .crm-nav .crm-sub a[aria-current="page"] {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

html[data-theme="dark"] .crm-nav > a[aria-current="page"] svg,
html[data-theme="dark"] .crm-nav > a[aria-current="page"] .crm-ico,
html[data-theme="dark"] .crm-nav .crm-sub a[aria-current="page"] svg,
html[data-theme="dark"] .crm-nav .crm-sub a[aria-current="page"] .crm-ico {
    color: #fff;
}

html[data-theme="dark"] .crm-nav .crm-grp.crm-in {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

/* Kartu sambutan dashboard mengikuti gradasi sidebar yang digelapkan di atas. */
html[data-theme="dark"] .dashboard-hero {
    background: linear-gradient(135deg, var(--color-shell-dark) 0%, var(--color-shell-dark-raised) 100%);
    border: 1px solid var(--color-line);
}

/* Tombol buka/tutup baris DataTables Responsive (▶/+) agar kontras di mode gelap. */
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > :is(td, th).dtr-control::before,
html[data-theme="dark"] table.dataTable.dtr-column > tbody > tr > :is(td, th).dtr-control::before {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: #fff;
    box-shadow: none;
}

html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr.parent > :is(td, th).dtr-control::before {
    border-color: var(--color-tone-off-ink);
    background-color: color-mix(in srgb, var(--color-tone-off-ink) 22%, transparent);
}

html[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: var(--color-line-row);
}