/*
 * Tema tampilan (D35).
 *
 * 1. Token warna per tema ada di [data-theme="<nama>"]. Nama tema = nilai App\Enums\Theme.
 * 2. Override komponen Argon/Bootstrap 4 hanya aktif di bawah html.themed, jadi tema
 *    bawaan (hijau) tetap memakai argon.css dan css per tipe akun tanpa perubahan.
 * 3. .theme-preview dipakai halaman Pengaturan Tema untuk pratinjau tiap tema.
 */

/* -------------------------------------------------------------------------
 * Token
 * ---------------------------------------------------------------------- */

[data-theme] {
    --t-font: Open Sans, sans-serif;
    --t-radius: .375rem;
    --t-radius-lg: .375rem;
    --t-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
    --t-shadow-sm: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);
    --t-control: var(--t-primary);
    --t-on-control: var(--t-on-primary);
    --t-stripe: rgba(0, 0, 0, .025);
}

[data-theme="default"] {
    --t-primary: #4c7273;
    --t-primary-hover: #3f6061;
    --t-on-primary: #fff;
    --t-ring: rgba(76, 114, 115, .25);
    --t-header-from: #4c7273;
    --t-header-to: #50c0e1;
    --t-bg: #f8f9fe;
    --t-surface: #fff;
    --t-surface-alt: #f7fafc;
    --t-border: #e9ecef;
    --t-text: #525f7f;
    --t-heading: #32325d;
    --t-muted: #8898aa;
    --t-link: #4c7273;
    --t-input-bg: #fff;
    --t-input-border: #cad1d7;
    --t-strong: #075266;
}

/* Biru Korporat: terinspirasi Atlassian Design System */
[data-theme="ocean"] {
    --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-radius: 3px;
    --t-radius-lg: 6px;
    --t-shadow: 0 1px 1px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .31);
    --t-shadow-sm: 0 1px 1px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .31);
    --t-primary: #0c66e4;
    --t-primary-hover: #0055cc;
    --t-on-primary: #fff;
    --t-ring: rgba(12, 102, 228, .3);
    --t-header-from: #0747a6;
    --t-header-to: #0c66e4;
    --t-bg: #f7f8f9;
    --t-surface: #fff;
    --t-surface-alt: #f1f2f4;
    --t-border: #dcdfe4;
    --t-text: #44546f;
    --t-heading: #172b4d;
    --t-muted: #626f86;
    --t-link: #0c66e4;
    --t-input-bg: #fff;
    --t-input-border: #b3b9c4;
    --t-strong: #172b4d;
    --t-stripe: rgba(9, 30, 66, .03);
}

/* Netral Minimalis: terinspirasi shadcn/ui (zinc) */
[data-theme="zinc"] {
    --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-radius: .5rem;
    --t-radius-lg: .75rem;
    --t-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --t-primary: #18181b;
    --t-primary-hover: #3f3f46;
    --t-on-primary: #fafafa;
    --t-ring: rgba(24, 24, 27, .15);
    --t-header-from: #18181b;
    --t-header-to: #3f3f46;
    --t-bg: #fafafa;
    --t-surface: #fff;
    --t-surface-alt: #f4f4f5;
    --t-border: #e4e4e7;
    --t-text: #27272a;
    --t-heading: #09090b;
    --t-muted: #71717a;
    --t-link: #18181b;
    --t-input-bg: #fff;
    --t-input-border: #e4e4e7;
    --t-strong: #09090b;
    --t-stripe: rgba(0, 0, 0, .02);
}

/* Koral Hangat: terinspirasi Asana */
[data-theme="coral"] {
    --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-radius: 6px;
    --t-radius-lg: 8px;
    --t-shadow: 0 1px 3px rgba(30, 31, 33, .1), 0 0 0 1px rgba(30, 31, 33, .04);
    --t-shadow-sm: 0 1px 2px rgba(30, 31, 33, .08);
    --t-primary: #de4c4a;
    --t-primary-hover: #c53b39;
    --t-on-primary: #fff;
    --t-ring: rgba(222, 76, 74, .25);
    --t-header-from: #e8574f;
    --t-header-to: #f59b7a;
    --t-bg: #f9f8f8;
    --t-surface: #fff;
    --t-surface-alt: #f6f5f4;
    --t-border: #edeae9;
    --t-text: #3d3e40;
    --t-heading: #1e1f21;
    --t-muted: #6d6e6f;
    --t-link: #c53b39;
    --t-input-bg: #fff;
    --t-input-border: #cfcbcb;
    --t-strong: #1e1f21;
}

/* Mawar Ramah: terinspirasi Airbnb */
[data-theme="rose"] {
    --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-radius: 8px;
    --t-radius-lg: 12px;
    --t-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
    --t-primary: #e31c5f;
    --t-primary-hover: #c8154f;
    --t-on-primary: #fff;
    --t-ring: rgba(227, 28, 95, .2);
    --t-header-from: #e61e4d;
    --t-header-to: #d70466;
    --t-bg: #f7f7f7;
    --t-surface: #fff;
    --t-surface-alt: #f7f7f7;
    --t-border: #dddddd;
    --t-text: #222222;
    --t-heading: #222222;
    --t-muted: #717171;
    --t-link: #222222;
    --t-input-bg: #fff;
    --t-input-border: #b0b0b0;
    --t-strong: #222222;
    --t-stripe: rgba(0, 0, 0, .02);
}

/* Hijau Malam: warna bawaan E-Setda dalam mode gelap */
[data-theme="setda-dark"] {
    color-scheme: dark;
    --t-radius: .375rem;
    --t-radius-lg: .5rem;
    --t-shadow: 0 0 0 1px #263735;
    --t-shadow-sm: 0 0 0 1px #263735;
    --t-primary: #5fb8a8;
    --t-primary-hover: #82cbbd;
    --t-on-primary: #0c1615;
    --t-ring: rgba(95, 184, 168, .3);
    --t-header-from: #173c3d;
    --t-header-to: #1d5a68;
    --t-bg: #0d1413;
    --t-surface: #141e1d;
    --t-surface-alt: #1a2726;
    --t-border: #263735;
    --t-text: #b8cbc8;
    --t-heading: #e4efed;
    --t-muted: #88a19c;
    --t-link: #6fc6d9;
    --t-input-bg: #101917;
    --t-input-border: #33484a;
    --t-strong: #2e5556;
    --t-stripe: rgba(255, 255, 255, .03);
}

/* Biru Malam: terinspirasi Atlassian Design System (dark) */
[data-theme="ocean-dark"] {
    color-scheme: dark;
    --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-radius: 3px;
    --t-radius-lg: 6px;
    --t-shadow: 0 0 0 1px #38414a;
    --t-shadow-sm: 0 0 0 1px #38414a;
    --t-primary: #579dff;
    --t-primary-hover: #85b8ff;
    --t-on-primary: #1d2125;
    --t-ring: rgba(87, 157, 255, .35);
    --t-header-from: #09326c;
    --t-header-to: #0055cc;
    --t-bg: #161a1d;
    --t-surface: #22272b;
    --t-surface-alt: #2c333a;
    --t-border: #38414a;
    --t-text: #b6c2cf;
    --t-heading: #dee4ea;
    --t-muted: #8c9bab;
    --t-link: #579dff;
    --t-input-bg: #1d2125;
    --t-input-border: #454f59;
    --t-strong: #454f59;
    --t-stripe: rgba(255, 255, 255, .03);
}

/* Netral Gelap: terinspirasi shadcn/ui (zinc dark) */
[data-theme="zinc-dark"] {
    color-scheme: dark;
    --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-radius: .5rem;
    --t-radius-lg: .75rem;
    --t-shadow: 0 0 0 1px #27272a;
    --t-shadow-sm: 0 0 0 1px #27272a;
    --t-primary: #fafafa;
    --t-primary-hover: #d4d4d8;
    --t-on-primary: #18181b;
    --t-ring: rgba(212, 212, 216, .25);
    --t-control: #71717a;
    --t-on-control: #fafafa;
    --t-header-from: #18181b;
    --t-header-to: #27272a;
    --t-bg: #09090b;
    --t-surface: #111113;
    --t-surface-alt: #18181b;
    --t-border: #27272a;
    --t-text: #d4d4d8;
    --t-heading: #fafafa;
    --t-muted: #a1a1aa;
    --t-link: #fafafa;
    --t-input-bg: #09090b;
    --t-input-border: #3f3f46;
    --t-strong: #3f3f46;
    --t-stripe: rgba(255, 255, 255, .03);
}

/* -------------------------------------------------------------------------
 * Dasar
 * ---------------------------------------------------------------------- */

html.themed body,
html.themed .main-content,
html.themed .footer {
    color: var(--t-text);
    background-color: var(--t-bg);
    font-family: var(--t-font);
}

html.themed h1, html.themed h2, html.themed h3, html.themed h4, html.themed h5, html.themed h6,
html.themed .h1, html.themed .h2, html.themed .h3, html.themed .h4, html.themed .h5, html.themed .h6,
html.themed .display-1, html.themed .display-2, html.themed .display-3, html.themed .display-4 {
    color: var(--t-heading);
    font-family: var(--t-font);
}

html.themed a {
    color: var(--t-link);
}

html.themed a:hover {
    color: var(--t-primary-hover);
}

html.themed hr,
html.themed .dropdown-divider {
    border-color: var(--t-border);
}

html.themed .text-primary {
    color: var(--t-primary) !important;
}

html.themed .text-muted,
html.themed .heading-small,
html.themed .copyright {
    color: var(--t-muted) !important;
}

html.themed .text-dark,
html.themed .text-default {
    color: var(--t-heading) !important;
}

html.themed .form-control-label,
html.themed label {
    color: var(--t-text);
}

html.themed .shadow {
    box-shadow: var(--t-shadow) !important;
}

html.themed .border,
html.themed .border-top,
html.themed .border-bottom,
html.themed .border-left,
html.themed .border-right {
    border-color: var(--t-border) !important;
}

/* -------------------------------------------------------------------------
 * Latar
 * ---------------------------------------------------------------------- */

html.themed .bg-primary {
    background-color: var(--t-primary) !important;
}

html.themed .bg-default {
    background-color: var(--t-header-from) !important;
}

html.themed .bg-gradient-primary,
html.themed .bg-gradient-default {
    background: linear-gradient(87deg, var(--t-header-from) 0, var(--t-header-to) 100%) !important;
}

html.themed .bg-white {
    background-color: var(--t-surface) !important;
}

html.themed .bg-secondary {
    background-color: var(--t-surface-alt) !important;
}

/* Dipakai legacy untuk baris tabel nonaktif, misalnya pejabat nonaktif di pejabat.index */
html.themed .bg-light {
    background-color: var(--t-surface-alt) !important;
}

html.themed tr.bg-light > td,
html.themed tr.bg-light .badge-dot {
    color: var(--t-muted);
}

html.themed .badge-dot {
    color: var(--t-text);
}

/* -------------------------------------------------------------------------
 * Sidebar dan navbar
 * ---------------------------------------------------------------------- */

html.themed .navbar-vertical.navbar-light,
html.themed .navbar-vertical .navbar-collapse.show,
html.themed .navbar-vertical .navbar-collapse.collapsing {
    background-color: var(--t-surface) !important;
    border-color: var(--t-border) !important;
}

html.themed .navbar-vertical.navbar-light {
    box-shadow: inset -1px 0 0 var(--t-border);
}

html.themed .navbar-light .navbar-nav .nav-link,
html.themed .navbar-vertical .navbar-nav .nav-link > i {
    color: var(--t-text);
}

html.themed .navbar-light .navbar-nav .nav-link:hover,
html.themed .navbar-light .navbar-nav .nav-link:focus {
    color: var(--t-heading);
}

html.themed .navbar-light .navbar-nav .show > .nav-link,
html.themed .navbar-light .navbar-nav .active > .nav-link,
html.themed .navbar-light .navbar-nav .nav-link.show,
html.themed .navbar-light .navbar-nav .nav-link.active {
    color: var(--t-primary);
}

html.themed .navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before {
    border-color: var(--t-primary);
}

html.themed .navbar-vertical .navbar-heading,
html.themed .navbar-vertical .navbar-collapse-header {
    color: var(--t-muted);
    border-color: var(--t-border);
}

html.themed .navbar-light .navbar-toggler-icon {
    filter: var(--t-icon-filter, none);
}

/* Menu sidebar versi mobile: Argon memaksa warna link #075266 !important di bawah 768px */
@media (max-width: 767.98px) {
    html.themed .navbar-vertical .navbar-collapse .navbar-nav .nav-link {
        color: var(--t-text) !important;
    }

    html.themed .navbar-vertical .navbar-collapse .navbar-nav .nav-link:hover,
    html.themed .navbar-vertical .navbar-collapse .navbar-nav .nav-link:focus {
        color: var(--t-heading) !important;
    }

    html.themed .navbar-vertical .navbar-collapse .navbar-nav .nav-link.active,
    html.themed .navbar-vertical .navbar-collapse .navbar-nav .active > .nav-link {
        color: var(--t-primary) !important;
    }

    html.themed .navbar-collapse .navbar-collapse-header {
        border-color: var(--t-border);
    }

    html.themed .navbar-collapse .navbar-toggler span {
        background: var(--t-heading);
    }

    html.themed .navbar-collapse.collapsing,
    html.themed .navbar-collapse.show {
        border-radius: var(--t-radius-lg);
        box-shadow: var(--t-shadow), 0 15px 35px rgba(0, 0, 0, .25);
    }
}

/* -------------------------------------------------------------------------
 * Card, dropdown, modal, list
 * ---------------------------------------------------------------------- */

html.themed .card,
html.themed .modal-content,
html.themed .dropdown-menu,
html.themed .list-group-item,
html.themed .popover {
    color: var(--t-text);
    background-color: var(--t-surface);
    border-color: var(--t-border);
}

html.themed .card,
html.themed .modal-content {
    border-radius: var(--t-radius-lg);
}

html.themed .card-header,
html.themed .card-footer,
html.themed .modal-header,
html.themed .modal-footer {
    background-color: transparent;
    border-color: var(--t-border);
}

html.themed .card-header:first-child {
    border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0;
}

html.themed .card-header.bg-white {
    background-color: var(--t-surface) !important;
}

html.themed .card.bg-secondary {
    background-color: var(--t-surface-alt) !important;
}

html.themed .dropdown-menu {
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow);
}

html.themed .dropdown-menu-arrow:before {
    background: var(--t-surface);
    border-color: var(--t-border);
}

html.themed .dropdown-item,
html.themed .dropdown-header {
    color: var(--t-text);
}

html.themed .dropdown-item:hover,
html.themed .dropdown-item:focus {
    color: var(--t-heading);
    background-color: var(--t-surface-alt);
}

/* Popover grafik dashboard (admin.dashboard._esetda, _super, _vipagenda) */
html.themed .popover-body {
    color: var(--t-text);
}

html.themed .popover-body-value {
    color: var(--t-heading);
    background: var(--t-surface-alt);
}

html.themed .close,
html.themed .close:hover {
    color: var(--t-heading);
}

/* -------------------------------------------------------------------------
 * Tombol
 * ---------------------------------------------------------------------- */

html.themed .btn {
    border-radius: var(--t-radius);
    font-family: var(--t-font);
}

html.themed .btn-primary,
html.themed .btn-primary:disabled,
html.themed .btn-primary.disabled {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed .btn-primary:hover,
html.themed .btn-primary:focus,
html.themed .btn-primary:not(:disabled):not(.disabled):active,
html.themed .btn-primary:not(:disabled):not(.disabled).active {
    color: var(--t-on-primary);
    background-color: var(--t-primary-hover);
    border-color: var(--t-primary-hover);
}

html.themed .btn-primary:focus,
html.themed .btn-outline-primary:focus {
    box-shadow: 0 0 0 .2rem var(--t-ring);
}

html.themed .btn-outline-primary {
    color: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed .btn-outline-primary:hover,
html.themed .btn-outline-primary:not(:disabled):not(.disabled):active {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed .btn-default {
    color: #fff;
    background-color: var(--t-strong);
    border-color: var(--t-strong);
}

html.themed .btn-secondary,
html.themed .btn-neutral,
html.themed .btn-white,
html.themed .btn-light {
    color: var(--t-heading);
    background-color: var(--t-surface-alt);
    border-color: var(--t-border);
}

html.themed .btn-secondary:hover,
html.themed .btn-neutral:hover,
html.themed .btn-white:hover,
html.themed .btn-light:hover {
    color: var(--t-heading);
    background-color: var(--t-border);
    border-color: var(--t-border);
}

/* Hijau (success) dan cyan (info) Argon dipakai sebagai warna aksi utama di view legacy,
   jadi ikut warna tema. Danger dan warning tetap semantik. */
html.themed .btn-success,
html.themed .btn-success:disabled,
html.themed .btn-success.disabled {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed .btn-success:hover,
html.themed .btn-success:focus,
html.themed .btn-success:not(:disabled):not(.disabled):active,
html.themed .btn-success:not(:disabled):not(.disabled).active {
    color: var(--t-on-primary);
    background-color: var(--t-primary-hover);
    border-color: var(--t-primary-hover);
}

html.themed .btn-info,
html.themed .btn-info:disabled,
html.themed .btn-info.disabled {
    color: #fff;
    background-color: var(--t-strong);
    border-color: var(--t-strong);
}

html.themed .btn-info:hover,
html.themed .btn-info:focus,
html.themed .btn-info:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--t-strong);
    border-color: var(--t-strong);
    filter: brightness(1.15);
}

html.themed .btn-success:focus,
html.themed .btn-info:focus {
    box-shadow: 0 0 0 .2rem var(--t-ring);
}

html.themed .btn-outline-success {
    color: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed .btn-outline-success:hover {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed .alert-success,
html.themed .alert-primary {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed .alert-info {
    color: #fff;
    background-color: var(--t-strong);
    border-color: var(--t-strong);
}

html.themed .alert-success .close,
html.themed .alert-primary .close {
    color: var(--t-on-primary);
}

html.themed .alert-info .close {
    color: #fff;
}

html.themed .text-success {
    color: var(--t-primary) !important;
}

html.themed .text-info {
    color: var(--t-muted) !important;
}

html.themed .bg-success {
    background-color: var(--t-primary) !important;
}

html.themed .bg-info {
    background-color: var(--t-strong) !important;
}

html.themed .badge {
    border-radius: var(--t-radius);
}

html.themed .badge-primary,
html.themed .badge-success {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
}

html.themed .badge-info {
    color: #fff;
    background-color: var(--t-strong);
}

/* -------------------------------------------------------------------------
 * Form
 * ---------------------------------------------------------------------- */

html.themed .form-control,
html.themed .custom-select,
html.themed .input-group-text {
    color: var(--t-heading);
    background-color: var(--t-input-bg);
    border-color: var(--t-input-border);
    border-radius: var(--t-radius);
}

html.themed .form-control-alternative,
html.themed .input-group-alternative {
    border: 1px solid var(--t-input-border);
    box-shadow: var(--t-shadow-sm);
}

html.themed .form-control:focus,
html.themed .custom-select:focus,
html.themed .form-control-alternative:focus {
    color: var(--t-heading);
    background-color: var(--t-input-bg);
    border-color: var(--t-primary);
    box-shadow: 0 0 0 .2rem var(--t-ring);
}

html.themed .form-control::placeholder {
    color: var(--t-muted);
}

html.themed .form-control:disabled,
html.themed .form-control[readonly] {
    background-color: var(--t-surface-alt);
}

html.themed .custom-control-label::before {
    background-color: var(--t-input-bg);
    border-color: var(--t-input-border);
}

html.themed .custom-control-input:checked ~ .custom-control-label::before {
    color: var(--t-on-control);
    background-color: var(--t-control);
    border-color: var(--t-control);
}

html.themed .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem var(--t-ring);
}

html.themed .custom-toggle input:checked + .custom-toggle-slider {
    border-color: var(--t-control);
}

html.themed .custom-toggle input:checked + .custom-toggle-slider:before {
    background: var(--t-control);
}

/* -------------------------------------------------------------------------
 * Tabel dan paginasi
 * ---------------------------------------------------------------------- */

html.themed .table {
    color: var(--t-text);
}

html.themed .table th,
html.themed .table td,
html.themed .table thead th,
html.themed .table-bordered,
html.themed .table-bordered th,
html.themed .table-bordered td {
    border-color: var(--t-border);
}

html.themed .table .thead-light th {
    color: var(--t-muted);
    background-color: var(--t-surface-alt);
    border-color: var(--t-border);
}

html.themed .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--t-stripe);
}

html.themed .table-hover tbody tr:hover {
    color: var(--t-heading);
    background-color: var(--t-surface-alt);
}

html.themed .page-link {
    color: var(--t-text);
    background-color: var(--t-surface);
    border-color: var(--t-border);
}

html.themed .page-link:hover {
    color: var(--t-heading);
    background-color: var(--t-surface-alt);
    border-color: var(--t-border);
}

html.themed .page-item.active .page-link {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed .page-item.disabled .page-link {
    color: var(--t-muted);
    background-color: var(--t-surface);
    border-color: var(--t-border);
}

/* -------------------------------------------------------------------------
 * Nav pills dan tabs
 * ---------------------------------------------------------------------- */

html.themed .nav-pills .nav-link {
    color: var(--t-primary);
    background-color: var(--t-surface);
    box-shadow: var(--t-shadow-sm);
}

html.themed .nav-pills .nav-link.active,
html.themed .nav-pills .show > .nav-link {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
}

html.themed .nav-tabs {
    border-color: var(--t-border);
}

html.themed .nav-tabs .nav-link.active,
html.themed .nav-tabs .nav-item.show .nav-link {
    color: var(--t-heading);
    background-color: var(--t-surface);
    border-color: var(--t-border) var(--t-border) var(--t-surface);
}

/* -------------------------------------------------------------------------
 * Plugin jQuery: Select2, DataTables, bootstrap-datepicker, SweetAlert2, Summernote
 * ---------------------------------------------------------------------- */

html.themed .select2-container--default .select2-selection--single,
html.themed .select2-container--default .select2-selection--multiple {
    background-color: var(--t-input-bg);
    border: 1px solid var(--t-input-border) !important;
    border-radius: var(--t-radius);
}

html.themed .select2-container--default .select2-selection--single .select2-selection__rendered,
html.themed .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--t-heading);
}

html.themed .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--t-heading);
    background-color: var(--t-surface-alt);
    border-color: var(--t-border);
}

html.themed .select2-container--default.select2-container--disabled .select2-selection--single,
html.themed .select2-container--disabled .selection .select2-selection {
    background-color: var(--t-surface-alt);
}

html.themed .select2-dropdown {
    color: var(--t-text);
    background-color: var(--t-surface);
    border-color: var(--t-border);
}

html.themed .select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--t-heading);
    background-color: var(--t-input-bg);
    border-color: var(--t-input-border);
}

html.themed .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--t-surface-alt);
}

html.themed .select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
}

html.themed .dataTables_wrapper,
html.themed .dataTables_wrapper .dataTables_info,
html.themed .dataTables_wrapper .dataTables_length,
html.themed .dataTables_wrapper .dataTables_filter {
    color: var(--t-text);
}

html.themed .dataTables_wrapper .dataTables_filter input,
html.themed .dataTables_wrapper .dataTables_length select {
    color: var(--t-heading);
    background-color: var(--t-input-bg);
    border: 1px solid var(--t-input-border);
    border-radius: var(--t-radius);
}

html.themed .dataTables_wrapper .dataTables_paginate .paginate_button,
html.themed .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--t-text) !important;
}

html.themed .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.themed .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--t-on-primary) !important;
    background: var(--t-primary);
    border-color: var(--t-primary);
}

html.themed table.dataTable tbody tr {
    background-color: transparent;
}

html.themed .datepicker.dropdown-menu,
html.themed .bootstrap-timepicker-widget.dropdown-menu {
    color: var(--t-text);
    background-color: var(--t-surface);
}

html.themed .datepicker table tr td.day:hover,
html.themed .datepicker table tr td span:hover,
html.themed .datepicker .datepicker-switch:hover,
html.themed .datepicker .prev:hover,
html.themed .datepicker .next:hover {
    background: var(--t-surface-alt);
}

html.themed .datepicker table tr td.active,
html.themed .datepicker table tr td.active:hover,
html.themed .datepicker table tr td span.active,
html.themed .datepicker table tr td span.active:hover {
    color: var(--t-on-primary);
    background: var(--t-primary);
    text-shadow: none;
}

html.themed .swal2-popup {
    color: var(--t-text);
    background: var(--t-surface);
    border-radius: var(--t-radius-lg);
}

html.themed .swal2-title,
html.themed .swal2-html-container {
    color: var(--t-heading);
}

html.themed .swal2-styled.swal2-confirm {
    color: var(--t-on-primary);
    background-color: var(--t-primary);
}

html.themed .note-editor.note-frame,
html.themed .note-editor .note-toolbar {
    background-color: var(--t-surface);
    border-color: var(--t-border);
}

html.themed .note-editor .note-editing-area .note-editable {
    color: var(--t-heading);
    background-color: var(--t-input-bg);
}

/* -------------------------------------------------------------------------
 * Tema gelap: penyesuaian tambahan
 * ---------------------------------------------------------------------- */

html.themed[data-theme$="-dark"] {
    --t-icon-filter: invert(1);
}

html.themed[data-theme$="-dark"] .alert {
    border: 0;
}

html.themed[data-theme$="-dark"] .table .thead-dark th {
    background-color: var(--t-surface-alt);
    border-color: var(--t-border);
}

html.themed[data-theme$="-dark"] .card-profile-image img {
    background-color: #fff;
    border-radius: var(--t-radius);
}

html.themed[data-theme$="-dark"] .ck.ck-editor__main > .ck-editor__editable {
    color: #32325d;
}

/* -------------------------------------------------------------------------
 * Pratinjau di halaman Pengaturan Tema
 * ---------------------------------------------------------------------- */

.theme-option {
    cursor: pointer;
}

.theme-preview {
    display: flex;
    height: 120px;
    overflow: hidden;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: box-shadow .15s ease, transform .15s ease;
}

.theme-option:hover .theme-preview {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.theme-preview-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 26%;
    padding: 14px 10px;
    background: var(--t-surface);
    border-right: 1px solid var(--t-border);
}

.theme-preview-sidebar span {
    height: 6px;
    border-radius: 3px;
    background: var(--t-muted);
    opacity: .35;
}

.theme-preview-sidebar span.active {
    background: var(--t-primary);
    opacity: 1;
}

.theme-preview-main {
    position: relative;
    flex: 1;
}

.theme-preview-header {
    height: 52px;
    background: linear-gradient(87deg, var(--t-header-from) 0, var(--t-header-to) 100%);
}

.theme-preview-card {
    position: absolute;
    top: 30px;
    right: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
}

.theme-preview-line {
    width: 70%;
    height: 6px;
    border-radius: 3px;
    background: var(--t-heading);
    opacity: .7;
}

.theme-preview-line.short {
    width: 45%;
    background: var(--t-muted);
    opacity: .45;
}

.theme-preview-button {
    align-self: flex-end;
    width: 46px;
    height: 14px;
    border-radius: var(--t-radius);
    background: var(--t-primary);
}