/* ============================================================
   Dark Theme – Klinik Hayyu
   Body class trigger: body.theme-dark
   (template-v2 marker assumed always present on body; not scoped)
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
body.theme-dark {
   /* Background Layers (teal-grey neutrals) */
   --dk-bg-darkest:      #14181a;
   --dk-bg-dark:         #181d1e;
   --dk-bg-surface:      #1e2526;
   --dk-bg-surface-alt:  #212829;
   --dk-bg-item-multi:   #242c2d;
   --dk-bg-input:        #2b3436;
   --dk-bg-input-addon:  #24322f;
   --dk-bg-hover-teal:   #2d4e4d;
   --dk-bg-teal-dim:     #1a3a39;
   --dk-bg-teal-preview: #1e3c3b;
   --dk-bg-teal-deep:    #0d4e4d;

   /* Brand */
   --dk-color-primary-darkest: #004845;
   --dk-color-primary-darker:  #00524f;
   --dk-color-primary:         #006462;
   --dk-color-accent:          #5fb8b5;

   /* Text */
   --dk-text-primary:   #e8eaed;
   --dk-text-secondary: #c8cdd5;
   --dk-text-muted:     #93a09f;
   --dk-text-disabled:  #6b7a7a;
   --dk-text-faded:     #465352;
   --dk-text-white:     #ffffff;

   /* Semantic */
   --dk-color-danger:      #ef4444;
   --dk-color-info-bg:     rgba(23, 162, 184, 0.15);
   --dk-color-info-text:   #6edff6;
   --dk-color-warn-bg:     rgba(255, 193, 7, 0.15);
   --dk-color-warn-text:   #ffda6a;
   --dk-color-danger-bg:   rgba(220, 53, 69, 0.15);
   --dk-color-danger-text: #f1aeb5;
   --dk-color-success-bg:  rgba(40, 167, 69, 0.15);
   --dk-color-success-text:#a3cfbb;

   /* Borders */
   --dk-border-strong: #5c6664;
   --dk-border-normal: #3a4442;
   --dk-border-base:   #353f3e;
   --dk-border-solid:  #3f4d4b;
   --dk-border-subtle: #2c3534;
   --dk-border-faint:  #272f2e;
   --dk-border-ghost:  #232a29;

   /* Focus ring — authoritative for ALL inputs */
   --dk-focus-border: var(--dk-color-accent);
   --dk-focus-shadow: rgba(95, 184, 181, 0.20);

   /* Shadows */
   --dk-shadow-sm: rgba(0, 0, 0, 0.40);
   --dk-shadow-md: rgba(0, 0, 0, 0.50);

   /* Table */
   --dk-bg-row-hover: #243a39;
   --dk-bg-thead:     #212829;
   --dk-thead-text:   #7fd1cf;
   --dk-thead-border: #2d8583;

   /* Status solid (badge/pill di dark) — samain hex badge-*-new existing */
   --dk-status-neutral: #4b5563;
   --dk-status-gold:    #b45309;
   --dk-status-teal:    var(--dk-color-primary);
   --dk-status-orange:  #c2410c;
   --dk-status-amber:   #a16207;
   --dk-status-cyan:    #0e7490;
   --dk-status-lime:    #4d7c0f;
   --dk-status-green:   #15803d;
   --dk-status-red:     #b91c1c;
   --dk-status-purple:  #6d28d9;
}

/* ============================================================
   2. LAYOUT (body, main, breadcrumb, headings)
   ============================================================ */
body.theme-dark {
   background-color: var(--dk-bg-darkest) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .main {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
}

/* Kasir fullscreen page — override inline background-color: #ffffff */
.theme-dark .row.kasir { background-color: var(--dk-bg-dark) !important; }
.theme-dark .footer-kasir {
   background-color: var(--dk-bg-surface) !important;
   border-top-color: var(--dk-border-faint) !important;
}

.theme-dark #app-splash-screen { background: var(--dk-bg-darkest) !important; }
.theme-dark #app-splash-screen .hayyu-ring::before { border-color: var(--dk-border-solid) !important; border-top-color: var(--dk-color-accent) !important; }

.theme-dark .state-label {
    color: var(--dk-text-white) !important;
}

.theme-dark .breadcrumb {
   background-color: transparent !important;
   color: var(--dk-text-muted) !important;
   border: none !important;
}

.theme-dark .breadcrumb-item a { color: var(--dk-text-muted) !important; }
.theme-dark .breadcrumb-item.active { color: var(--dk-text-primary) !important; }

.theme-dark .text-muted,
body.theme-dark .text-muted,
body:has(.theme-dark) .text-muted {
   color: var(--dk-text-muted) !important;
}

.theme-dark .page-header {
   background-color: var(--dk-bg-dark) !important;
   border-bottom: none !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6 { color: var(--dk-text-primary) !important; }

.theme-dark hr { border-top-color: var(--dk-border-subtle) !important; }
.theme-dark .wrapper-md.dker.b-b { border-bottom-color: var(--dk-border-subtle) !important; }

/* ============================================================
   3. CARD / PANEL
   ============================================================ */
.theme-dark .card,
.theme-dark .card.bg-white,
.theme-dark .panel,
.theme-dark .panel-body,
.theme-dark .panel-heading:not(.bg-hayyu-hijau-new):not(.bg-hayyu-grey-new),
.theme-dark .panel-footer {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .card-header,
.theme-dark .card-footer,
.theme-dark .card-header.bg-white,
.theme-dark .card-footer.bg-white {
   background-color: var(--dk-bg-dark) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .card-body { color: var(--dk-text-primary) !important; }

.theme-dark .card-header-v2,
.theme-dark .modal.modal-hayyu .modal-header,
.theme-dark .modal-info-row {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-ghost) !important;
}
.theme-dark .card-header-v2 .card-title { color: var(--dk-text-primary) !important; }

.theme-dark .card-stat {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .card-stat:hover { background-color: var(--dk-bg-dark) !important; }
.theme-dark .card-stat__content h1 i { color: var(--dk-color-accent) !important; }
.theme-dark .card-stat__content h5 { color: var(--dk-text-primary) !important; }

.theme-dark .bg-hayyu-grey-new {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .bg-hayyu-grey-new th {
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-subtle) !important;
}

.theme-dark [dnd-list],
.theme-dark [dnd-list] li {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}

/* ============================================================
   4. INPUTS & FORMS — UNIFIED
   Semua input variant (bootstrap + custom) berbagi style + focus.
   Focus authoritative: teal border + 3px teal shadow.
   ============================================================ */

/* Labels */
.theme-dark label,
.theme-dark .form-label,
.theme-dark .label-form { color: var(--dk-text-secondary) !important; }

/* Base input style — semua variant */
.theme-dark .form-control,
.theme-dark select.form-control,
.theme-dark .input-form,
.theme-dark .input-password-form,
.theme-dark .textarea-form,
.theme-dark .input-form-group,
.theme-dark .input-style,
.theme-dark .input-flatpickr,
.theme-dark .input-flatpickr.form-control,
.theme-dark .form-control.input-flatpickr,
.theme-dark .input-datepicker,
.theme-dark .input-datepicker.form-control,
.theme-dark .input-daterangepicker,
.theme-dark .input-daterangepicker.form-control,
.theme-dark .all-period-datepicker,
.theme-dark .all-period-datepicker.form-control,
.theme-dark .datepicker-input,
.theme-dark .monthpicker-input,
.theme-dark .clear-btn,
.theme-dark .input-group-text,
.theme-dark .icon-input,
.theme-dark .eye-logo-form,
.theme-dark [class*="tableComponent"] .form-control,
.theme-dark .filterTable .form-control,
.theme-dark .header-filter input,
.theme-dark .header-filter select {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border: 1px solid var(--dk-border-solid) !important;
}

.theme-dark timepicker-field .input-group-text {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Focus — SATU aturan untuk semua */
.theme-dark .form-control:focus,
.theme-dark select.form-control:focus,
.theme-dark .input-form:focus,
.theme-dark .input-password-form:focus,
.theme-dark .textarea-form:focus,
.theme-dark .input-form-group:focus-within,
.theme-dark .input-style:focus,
.theme-dark .input-flatpickr:focus,
.theme-dark .input-flatpickr.active,
.theme-dark .input-datepicker:focus,
.theme-dark .input-datepicker.active,
.theme-dark .input-daterangepicker:focus,
.theme-dark .all-period-datepicker:focus,
.theme-dark .all-period-datepicker.active,
.theme-dark .datepicker-input:focus,
.theme-dark .datepicker-input.active,
.theme-dark [class*="tableComponent"] .form-control:focus,
.theme-dark [class*="tableComponent"] .input-flatpickr:focus,
.theme-dark [class*="tableComponent"] .input-flatpickr.active,
.theme-dark .filterTable .form-control:focus,
.theme-dark .header-filter input:focus,
.theme-dark .header-filter select:focus {
   outline: none !important;
   border-color: var(--dk-focus-border) !important;
   box-shadow: 0 0 0 3px var(--dk-focus-shadow) !important;
}

/* Placeholders */
.theme-dark .form-control::placeholder,
.theme-dark .input-form::placeholder,
.theme-dark .textarea-form::placeholder,
.theme-dark .input-style::placeholder,
.theme-dark .input-flatpickr::placeholder,
.theme-dark .input-datepicker::placeholder,
.theme-dark .input-datepicker::-webkit-input-placeholder,
.theme-dark .input-daterangepicker::placeholder,
.theme-dark .input-daterangepicker::-webkit-input-placeholder {
   color: var(--dk-text-disabled) !important;
   opacity: 1 !important;
}
.theme-dark .header-filter input::placeholder { color: var(--dk-text-disabled) !important; }

/* Disabled / readonly */
.theme-dark .form-control:disabled,
.theme-dark .form-control[disabled],
.theme-dark .form-control[readonly],
.theme-dark .input-form:disabled,
.theme-dark .input-form[disabled],
.theme-dark .input-form[readonly],
.theme-dark .textarea-form:disabled,
.theme-dark .textarea-form[disabled],
.theme-dark .input-datepicker:disabled,
.theme-dark .input-daterangepicker:disabled {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-white) !important;
   border-color: var(--dk-border-solid) !important;
}

/* Flatpickr/monthpicker use readonly to disable keyboard — override readonly muted */
.theme-dark .form-control.input-flatpickr[readonly],
.theme-dark .input-flatpickr[readonly],
.theme-dark .monthpicker-input[readonly],
.theme-dark .monthpicker-input {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}

/* Input group internals */
.theme-dark .input-form-group .input-form-text {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .input-form-group .input-form-text:first-child { border-right: 1px solid var(--dk-border-solid) !important; }
.theme-dark .input-form-group .input-form-text:last-child  { border-left:  1px solid var(--dk-border-solid) !important; }
.theme-dark .input-form-group .input-form-text.cursor-pointer:hover {
   background-color: var(--dk-bg-hover, #2d3748) !important;
   color: var(--dk-text-primary, #ffffff) !important;
}

/* Inner input in group: wrapper own border+focus, strip child */
.theme-dark .input-form-group .input-form,
.theme-dark .input-form-group .input-form:focus { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* Input inside input-group joins button smoothly */
.theme-dark .input-group .input-flatpickr,
.theme-dark .input-group .input-datepicker,
.theme-dark .input-group .datepicker-input { border-right: none !important; }

/* Input + adjacent icon-input: strip double border, wrapper handle focus ring */
.theme-dark .input-datepicker + .icon-input,
.theme-dark .input-flatpickr + .icon-input,
.theme-dark .datepicker-input + .icon-input,
.theme-dark .input-form + .icon-input { border-left: 0 !important; }
/* Strip inner shadow when input paired with icon-input; wrapper d-flex gets ring */
.theme-dark .d-flex:focus-within > .input-datepicker,
.theme-dark .d-flex:focus-within > .input-flatpickr,
.theme-dark .d-flex:focus-within > .datepicker-input,
.theme-dark .d-flex:focus-within > .input-form { box-shadow: none !important; border-color: var(--dk-focus-border) !important; }
.theme-dark .d-flex:focus-within > .icon-input { border-color: var(--dk-focus-border) !important; }
.theme-dark .d-flex:has(> .icon-input):focus-within { box-shadow: 0 0 0 3px var(--dk-focus-shadow) !important; border-radius: 7px; }

.theme-dark .input-flatpickr,
.theme-dark .input-flatpickr.form-control { border-radius: 7px 0 0 7px !important; }

/* Button flatpickr (clear/picker icon append) */
.theme-dark .button-flatpickr {
   background-color: var(--dk-bg-input) !important;
   border: 1px solid var(--dk-border-solid) !important;
   border-left: none !important;
   border-radius: 0 7px 7px 0 !important;
   height: 32px !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .button-flatpickr:hover {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-strong) !important;
   border-left: none !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .button-flatpickr svg,
.theme-dark .button-flatpickr i {
   color: var(--dk-text-secondary) !important;
   fill: var(--dk-text-secondary) !important;
}
.theme-dark .button-flatpickr:hover svg,
.theme-dark .button-flatpickr:hover i {
   color: var(--dk-text-primary) !important;
   fill: var(--dk-text-primary) !important;
}
.theme-dark .input-flatpickr:focus ~ .input-group-append .button-flatpickr,
.theme-dark .input-flatpickr.active ~ .input-group-append .button-flatpickr,
.theme-dark .input-group:focus-within .button-flatpickr {
   border-color: var(--dk-focus-border) !important;
   border-left: none !important;
   box-shadow: none !important;
}
/* Focus ring at wrapper edge — strip inner input shadow */
.theme-dark .input-group:focus-within > .input-flatpickr,
.theme-dark .input-group:focus-within > .form-control { box-shadow: none !important; }
.theme-dark .input-group:has(> .input-group-append):focus-within { box-shadow: 0 0 0 3px var(--dk-focus-shadow) !important; border-radius: 7px; }

/* Daterangepicker addon icon */
.theme-dark .icon-daterangepicker-input {
   background-color: var(--dk-bg-input) !important;
   border: 1px solid var(--dk-border-solid) !important;
   border-left: none !important;
   color: var(--dk-text-muted) !important;
   cursor: pointer;
}
.theme-dark .icon-daterangepicker-input:hover {
   background-color: var(--dk-bg-surface-alt) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .icon-daterangepicker-input i,
.theme-dark .icon-daterangepicker-input .fa {
   color: var(--dk-text-secondary) !important;
}
.theme-dark .input-daterangepicker:focus ~ .icon-daterangepicker-input {
   border-color: var(--dk-focus-border) !important;
}

/* Checkboxes / radios */
.theme-dark .form-check-input,
.theme-dark .hy-cb,
.theme-dark .i-checks > i {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-strong) !important;
}
.theme-dark .form-check-input:checked,
.theme-dark .hy-cb:checked {
   background-color: var(--dk-color-primary) !important;
   border-color: var(--dk-color-primary) !important;
}
.theme-dark .i-checks input:checked + i {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-color-primary, #006462) !important;
}
.theme-dark .i-checks input:checked + i:before {
   background-color: var(--dk-color-primary, #006462) !important;
}
.theme-dark input[type="checkbox"] {
   color-scheme: dark !important;
   accent-color: var(--dk-color-primary) !important;
}

/* Button radio (Tipe & Aplikasi) */
.theme-dark .button-radio {
   background-color: var(--dk-bg-input) !important;
   border: 1px solid var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .button-radio:hover {
   background-color: var(--dk-bg-surface) !important;
   z-index: 1 !important;
}
.theme-dark .button-radio:focus {
   z-index: 2 !important;
}
.theme-dark .button-radio.active,
.theme-dark .button-selected {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-color-accent) !important;
   z-index: 2 !important;
}
.theme-dark .button-radio:disabled,
.theme-dark .button-radio[disabled] {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-disabled) !important;
   opacity: 0.65;
}

/* Input group addon (poin, Rp, %, prefix/suffix) - disamakan seperti .icon-input */
.theme-dark .input-group-addon,
.theme-dark .input-group-addon[style*="background-color: #e6f0ef"],
.theme-dark .input-group-addon[style*="background-color:#e6f0ef"],
.theme-dark .input-group-addon[style*="background-color: rgb(230, 240, 239)"],
.theme-dark .input-form-text,
.theme-dark .input-form-text[style*="background-color: #e6f0ef"],
.theme-dark .input-form-text[style*="background-color:#e6f0ef"] {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-solid) !important;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.theme-dark .btn-light {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .btn-light:hover,
.theme-dark .btn-light:focus {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark .button-outline-primary {
   background-color: transparent !important;
   border: 1px solid var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .button-outline-primary:hover,
.theme-dark .button-outline-primary:focus {
   background-color: var(--dk-color-primary) !important;
   border-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
   opacity: 1 !important;
   box-shadow: none !important;
}
.theme-dark .button-outline-primary:hover div,
.theme-dark .button-outline-primary:hover span,
.theme-dark .button-outline-primary:hover svg,
.theme-dark .button-outline-primary:hover i,
.theme-dark .button-outline-primary:focus div,
.theme-dark .button-outline-primary:focus span,
.theme-dark .button-outline-primary:focus svg,
.theme-dark .button-outline-primary:focus i {
   color: var(--dk-text-white) !important;
   stroke: var(--dk-text-white) !important;
   fill: none;
}
.theme-dark .button-outline-primary div[style*="color:#006462"],
.theme-dark .button-outline-primary div[style*="color: #006462"],
.theme-dark .button-outline-primary svg[style*="color:#006462"],
.theme-dark .button-outline-primary svg[style*="color: #006462"] {
   color: var(--dk-color-accent) !important;
}

/* Icon-only / toolbar button kanonik (css/_button.css section 5). */
.theme-dark .button-icon {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .button-icon:hover,
.theme-dark .button-icon:focus {
   background-color: rgba(255, 255, 255, 0.08) !important;
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-text-primary) !important;
   box-shadow: none !important;
}
.theme-dark .button-icon:active {
   background-color: rgba(255, 255, 255, 0.12) !important;
}
.theme-dark .button-icon:disabled {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-muted) !important;
}
/* Danger harus menang atas .theme-dark .button-icon di atas (sama-sama
   !important, jadi urutan yg menentukan). */
.theme-dark .button-icon.button-icon-danger {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-color-danger) !important;
   color: var(--dk-color-danger) !important;
}
.theme-dark .button-icon.button-icon-danger:hover,
.theme-dark .button-icon.button-icon-danger:focus {
   background-color: var(--dk-color-danger-bg) !important;
   border-color: var(--dk-color-danger) !important;
   color: var(--dk-color-danger) !important;
   box-shadow: none !important;
}
.theme-dark .button-icon.button-icon-danger:active {
   background-color: var(--dk-color-danger-bg) !important;
}

.theme-dark .button-icon-group .button-icon.is-active,
.theme-dark .button-icon-group .button-icon.is-active:hover,
.theme-dark .button-icon-group .button-icon.is-active:focus {
   background-color: var(--dk-color-primary) !important;
   border-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark .button-outline-dark {
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .button-outline-dark:hover,
.theme-dark .button-outline-dark:focus {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-white) !important;
}

/* Secondary/cancel/back button group */
.theme-dark .btn-secondary,
.theme-dark .button-secondary,
.theme-dark .button-outline-secondary,
.theme-dark .button-back,
.theme-dark .button-cancel {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
   opacity: 1 !important;
}
.theme-dark .btn-secondary:hover,
.theme-dark .btn-secondary:focus,
.theme-dark .button-secondary:hover,
.theme-dark .button-secondary:focus,
.theme-dark .button-outline-secondary:hover,
.theme-dark .button-outline-secondary:focus,
.theme-dark .button-back:hover,
.theme-dark .button-back:focus,
.theme-dark .button-cancel:hover,
.theme-dark .button-cancel:focus {
   background-color: var(--dk-color-primary) !important;
   border-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
   opacity: 1 !important;
   box-shadow: none !important;
}

/* btn-action / button-style */
.theme-dark .btn-action,
.theme-dark .button-style {
   background-color: transparent !important;
   border: 1px solid var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .btn-action:hover,
.theme-dark .btn-action:focus,
.theme-dark .button-style:hover,
.theme-dark .button-style:focus {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
   border-color: var(--dk-color-primary) !important;
   opacity: 1 !important;
   box-shadow: none !important;
}
.theme-dark .btn-action div,
.theme-dark .btn-action svg,
.theme-dark .button-style div,
.theme-dark .button-style svg {
   color: var(--dk-color-accent) !important;
   stroke: var(--dk-color-accent) !important;
}
.theme-dark .btn-action:hover div,
.theme-dark .btn-action:hover svg,
.theme-dark .button-style:hover div,
.theme-dark .button-style:hover svg {
   color: var(--dk-text-white) !important;
   stroke: var(--dk-text-white) !important;
}

.theme-dark .tc3-display-col-btn div[style*="color"],
.theme-dark .tc3-display-col-btn svg[style*="color"],
.theme-dark .tc-display-col-btn div[style*="color"],
.theme-dark .tc-display-col-btn svg[style*="color"] {
   color: var(--dk-color-accent) !important;
   stroke: var(--dk-color-accent) !important;
}
.theme-dark .tc3-display-col-btn:hover div[style*="color"],
.theme-dark .tc3-display-col-btn:hover svg[style*="color"],
.theme-dark .tc-display-col-btn:hover div[style*="color"],
.theme-dark .tc-display-col-btn:hover svg[style*="color"] {
   color: var(--dk-text-white) !important;
   stroke: var(--dk-text-white) !important;
}

.theme-dark button.button-outline-primary[style*='width:60px'],
.theme-dark button.button-outline-primary[style*='width: 60px'] {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}

/* Button trash preview (delete icon overlay on uploaded preview) */
.theme-dark .button-trash-preview {
   background-color: var(--dk-color-danger-bg) !important;
   border: none !important;
}
.theme-dark .button-trash-preview .icon-trash-preview,
.theme-dark .icon-trash-preview { color: var(--dk-color-danger) !important; stroke: var(--dk-color-danger) !important; }
.theme-dark .button-trash-preview:hover,
.theme-dark .button-trash-preview:focus {
   background: var(--dk-color-danger) !important;
   box-shadow: 0 4px 12px 0 rgba(239, 68, 68, 0.35) !important;
}
.theme-dark .button-trash-preview:hover .icon-trash-preview,
.theme-dark .button-trash-preview:focus .icon-trash-preview { color: var(--dk-text-white) !important; stroke: var(--dk-text-white) !important; }

/* Action menu (3-dot) — inline color:black override */
.theme-dark button[ng-click*="openActionMenu"] svg {
   color: var(--dk-text-secondary) !important;
   stroke: var(--dk-text-secondary) !important;
}
.theme-dark button[ng-click*="openActionMenu"]:hover svg {
   color: var(--dk-text-white) !important;
   stroke: var(--dk-text-white) !important;
}

/* ============================================================
   6. TABLES
   ============================================================ */
.theme-dark .table-style > tbody { background-color: var(--dk-bg-surface) !important; color: var(--dk-text-primary) !important; }
.theme-dark .table-style > tbody > tr > td,
.theme-dark .table-style > tbody > tr > th {
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-faint) !important;
   background-color: inherit !important;
}
.theme-dark .reconfirm-wa-link {
   color: var(--dk-text-primary) !important;
   text-decoration: underline !important;
}
.theme-dark .reconfirm-wa-link:hover,
.theme-dark .reconfirm-wa-link:focus {
   color: var(--dk-text-white) !important;
   text-decoration: underline !important;
}
.theme-dark .reconfirm-wa-zero {
   color: var(--dk-text-muted) !important;
}
.theme-dark .table-style > tbody > tr:nth-child(odd)  { background-color: var(--dk-bg-surface) !important; }
.theme-dark .table-style > tbody > tr:nth-child(even) { background-color: var(--dk-bg-surface-alt) !important; }
.theme-dark .table-style > tbody > tr:hover           { background-color: var(--dk-bg-dark) !important; }

.theme-dark .report-table-style:not(.body-stripped) tbody tr:nth-child(odd) { background-color: var(--dk-bg-surface-alt) !important; }
.theme-dark .report-table-style.body-stripped tbody:nth-child(odd) tr       { background-color: var(--dk-bg-surface-alt) !important; }
.theme-dark .report-table-style.body-stripped tbody                         { border-bottom-color: var(--dk-border-faint) !important; }

.theme-dark table.table-style tbody tr td.tc-sticky-num,
.theme-dark table.table-style tbody tr td.tc-sticky-col,
.theme-dark table.table-style tbody tr td.tc-sticky-col-after-num,
.theme-dark table.table-style tbody tr td.tc3-sticky-num,
.theme-dark table.table-style tbody tr td.tc3-sticky-col,
.theme-dark table.table-style tbody tr td.tc3-sticky-col-after-num,
.theme-dark table.table-style tbody tr td.tc3-sticky-action,
.theme-dark table.table-style tbody tr td.tc3-action-col { background-color: inherit !important; }

.theme-dark table.table-style tbody tr,
.theme-dark .table-hover tbody tr,
.theme-dark .table tbody tr,
.theme-dark table tbody tr td,
.theme-dark .table-hover tbody tr td,
.theme-dark .table tbody tr td { transition: background-color 0.15s ease-in-out !important; }

.theme-dark table.table-style tbody tr:hover,
.theme-dark .table-hover tbody tr:hover,
.theme-dark .table tbody tr:hover,
.theme-dark tbody tr:hover,
.theme-dark tbody tr:hover > td { background-color: var(--dk-bg-row-hover) !important; }

.theme-dark tr.header-filter:hover,
.theme-dark tr.header-filter:hover > td,
.theme-dark tr.header-filter:hover > th,
.theme-dark .header-filter:hover,
.theme-dark .header-filter:hover > td { background-color: var(--dk-bg-thead) !important; }

.theme-dark thead tr:hover,
.theme-dark thead tr:hover > th,
.theme-dark thead tr:hover > td { background-color: var(--dk-bg-dark) !important; }

.theme-dark .table-laporan tbody tr:nth-of-type(odd) { background-color: rgba(74, 158, 156, 0.08) !important; }
.theme-dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02) !important; }

.theme-dark .table td,
.theme-dark .table th {
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .thead-light th,
.theme-dark .table thead th,
.theme-dark .table-style thead th {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .table tbody + tbody { border-top-color: var(--dk-border-subtle) !important; }

/* Table-style thead + bg-hayyu-grey-new headers */
.theme-dark .table-style > thead,
.theme-dark .table-style > thead > tr > th,
.theme-dark .bg-hayyu-grey-new {
   background-color: var(--dk-bg-thead) !important;
   color: var(--dk-thead-text) !important;
}
.theme-dark .table-style > thead > tr > th { border-bottom: 2px solid var(--dk-thead-border) !important; }

.theme-dark .table-style > thead .btn-primary,
.theme-dark .table-style > thead .button-primary,
.theme-dark .bg-hayyu-grey-new .btn-primary,
.theme-dark .bg-hayyu-grey-new .button-primary {
   background-color: var(--dk-color-primary) !important;
   background-image: none !important;
   color: var(--dk-text-white) !important;
   border-color: var(--dk-color-primary) !important;
}
.theme-dark .table-style > thead .btn-primary:hover,
.theme-dark .table-style > thead .btn-primary:focus,
.theme-dark .table-style > thead .button-primary:hover,
.theme-dark .table-style > thead .button-primary:focus,
.theme-dark .bg-hayyu-grey-new .btn-primary:hover,
.theme-dark .bg-hayyu-grey-new .btn-primary:focus,
.theme-dark .bg-hayyu-grey-new .button-primary:hover,
.theme-dark .bg-hayyu-grey-new .button-primary:focus {
   background-color: var(--dk-color-primary-darker) !important;
   border-color: var(--dk-color-primary-darker) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .table-style > thead .button-outline-primary,
.theme-dark .bg-hayyu-grey-new .button-outline-primary {
   background-color: transparent !important;
   color: var(--dk-color-accent) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .table-style > thead .button-outline-primary:hover,
.theme-dark .table-style > thead .button-outline-primary:focus,
.theme-dark .bg-hayyu-grey-new .button-outline-primary:hover,
.theme-dark .bg-hayyu-grey-new .button-outline-primary:focus {
   background-color: rgba(95, 184, 181, 0.15) !important;
   color: var(--dk-color-accent) !important;
}

/* Header filter inline row (V1 tableComponent) */
.theme-dark .header-filter,
.theme-dark .header-filter td {
   border-bottom: 2px solid var(--dk-thead-border) !important;
   background-color: var(--dk-bg-thead) !important;
   color: var(--dk-text-white) !important;
}

/* Table empty / loading colspan */
.theme-dark .table-responsive,
.theme-dark .table-responsive-hayyu { background-color: transparent !important; }
.theme-dark .table-style > tbody > tr > td[colspan='100%'] {
   background-color: var(--dk-bg-surface) !important;
   border-bottom: 1px solid var(--dk-border-faint) !important;
   border-top: none !important;
}
.theme-dark .table-style > tbody > tr > td[colspan='100%'] .text-muted { color: var(--dk-text-muted) !important; }

/* Print / laporan sticky table */
.theme-dark .table-style-wrapper {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-radius: 10px !important;
   overflow: hidden !important;
}
.theme-dark .table-overflow {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   overflow-x: auto !important;
}
.theme-dark .print-area h4,
.theme-dark .print-area p { color: var(--dk-text-primary) !important; }

.theme-dark .table-style,
.theme-dark .table-print {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .table-style td,
.theme-dark .table-style th,
.theme-dark .table-print td,
.theme-dark .table-print th {
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .table-style tbody tr,
.theme-dark .table-print tbody tr { background-color: var(--dk-bg-surface) !important; }
.theme-dark .table-style tbody tr:hover,
.theme-dark .table-print tbody tr:hover { background-color: var(--dk-bg-dark) !important; }

.theme-dark .table-style thead th[style*="position: sticky"],
.theme-dark .table-style thead th[style*="position:sticky"],
.theme-dark .table-print thead th[style*="position: sticky"],
.theme-dark .table-print thead th[style*="position:sticky"] {
   background-color: var(--dk-bg-thead) !important;
   color: var(--dk-text-white) !important;
   box-shadow: inset 1px 0 0 var(--dk-border-base), inset -1px 0 0 var(--dk-border-base) !important;
}
.theme-dark .table-style tbody td[style*="position: sticky"],
.theme-dark .table-style tbody td[style*="position:sticky"],
.theme-dark .table-print tbody td[style*="position: sticky"],
.theme-dark .table-print tbody td[style*="position:sticky"] {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   box-shadow: inset 1px 0 0 var(--dk-border-base), inset -1px 0 0 var(--dk-border-base) !important;
}
.theme-dark .table-style tbody tr:hover td[style*="position: sticky"],
.theme-dark .table-style tbody tr:hover td[style*="position:sticky"],
.theme-dark .table-print tbody tr:hover td[style*="position: sticky"],
.theme-dark .table-print tbody tr:hover td[style*="position:sticky"] {
   background-color: var(--dk-bg-dark) !important;
}
.theme-dark .table-style tbody b,
.theme-dark .table-print tbody b { color: var(--dk-color-accent) !important; }
.theme-dark .table-style tfoot,
.theme-dark .table-print tfoot { background-color: var(--dk-bg-dark) !important; }
.theme-dark .table-style tfoot th,
.theme-dark .table-style tfoot td,
.theme-dark .table-print tfoot th,
.theme-dark .table-print tfoot td {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .table-style tfoot th[style*="position: sticky"],
.theme-dark .table-style tfoot th[style*="position:sticky"],
.theme-dark .table-print tfoot th[style*="position: sticky"],
.theme-dark .table-print tfoot th[style*="position:sticky"] {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
   box-shadow: inset 1px 0 0 var(--dk-border-base), inset -1px 0 0 var(--dk-border-base) !important;
}
.theme-dark .table-style tfoot b,
.theme-dark .table-print tfoot b { color: var(--dk-color-accent) !important; }

/* Form builder table */
.theme-dark .form-builder-table {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .form-builder-table th,
.theme-dark .form-builder-table td {
   background-color: inherit !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .form-builder-table thead.bg-hayyu-grey-new,
.theme-dark .form-builder-table thead.bg-hayyu-grey-new tr,
.theme-dark .form-builder-table thead.bg-hayyu-grey-new th {
   background-color: var(--dk-bg-thead) !important;
   color: var(--dk-thead-text) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .form-builder-table tbody tr { background-color: var(--dk-bg-surface) !important; }
.theme-dark .form-builder-table tbody tr:nth-child(even) { background-color: var(--dk-bg-surface-alt) !important; }
.theme-dark .form-builder-table tbody tr:hover { background-color: var(--dk-bg-row-hover) !important; }

.theme-dark .header-form {
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
}
.theme-dark .header-form::after {
   background-color: var(--dk-border-subtle) !important;
   border-color: var(--dk-border-subtle) !important;
}

.theme-dark .tc3-action-dropdown .btn svg,
.theme-dark .tc3-action-dropdown .btn-sm svg {
   color: var(--dk-text-secondary) !important;
   stroke: var(--dk-text-secondary) !important;
}
.theme-dark .tc3-action-dropdown .btn:hover svg,
.theme-dark .tc3-action-dropdown .btn-sm:hover svg {
   color: var(--dk-text-primary) !important;
   stroke: var(--dk-text-primary) !important;
}

/* ============================================================
   7. MODALS / DIALOGS / SWEETALERT
   ============================================================ */
body:has(.theme-dark) .modal-content,
body.theme-dark .modal-content,
html.theme-dark .modal-content,
.theme-dark ~ .modal .modal-content,
.theme-dark .modal-content,
.theme-dark .modal-dialog .modal-content,
.theme-dark [uib-modal-window] .modal-content,
.theme-dark [uib-modal-transclude] {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .modal-header,
.theme-dark .modal-dialog .modal-header,
.theme-dark .modal-content .modal-header,
.theme-dark [uib-modal-transclude] .modal-header {
   background-color: var(--dk-bg-surface) !important;
   border-bottom: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .modal-header .modal-title,
.theme-dark .modal-header h1,
.theme-dark .modal-header h2,
.theme-dark .modal-header h3,
.theme-dark .modal-header h4,
.theme-dark .modal-header h5,
.theme-dark .modal-header h6,
.theme-dark .modal-title { color: var(--dk-text-primary) !important; }

.theme-dark .close,
.theme-dark button.close,
.theme-dark .modal-header .close,
.theme-dark .modal-header button.close {
   color: var(--dk-text-primary) !important;
   text-shadow: none !important;
   opacity: 0.8 !important;
}
.theme-dark .close:hover,
.theme-dark .close:focus,
.theme-dark button.close:hover,
.theme-dark button.close:focus,
.theme-dark .modal-header .close:hover,
.theme-dark .modal-header .close:focus,
.theme-dark .modal-header button.close:hover,
.theme-dark .modal-header button.close:focus {
   color: var(--dk-text-white) !important;
   opacity: 1 !important;
   outline: none !important;
}

.theme-dark .modal-body,
.theme-dark .modal-dialog .modal-body,
.theme-dark .modal-content .modal-body,
.theme-dark [uib-modal-transclude] .modal-body {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .modal-footer,
.theme-dark .modal-dialog .modal-footer,
.theme-dark .modal-content .modal-footer,
.theme-dark [uib-modal-transclude] .modal-footer {
   background-color: var(--dk-bg-surface) !important;
   border-top: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .modal-hayyu .modal-content {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .modal-hayyu .modal-body { color: var(--dk-text-primary) !important; }
.theme-dark .modal-hayyu .modal-footer {
   background-color: var(--dk-bg-surface) !important;
   border-top-color: var(--dk-border-subtle) !important;
}
.theme-dark .modal-hayyu .modal-header {
   background-color: var(--dk-bg-teal-preview) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .modal-hayyu .modal-header .close,
.theme-dark .modal-hayyu .modal-header h1,
.theme-dark .modal-hayyu .modal-header h2,
.theme-dark .modal-hayyu .modal-header h3,
.theme-dark .modal-hayyu .modal-header h4,
.theme-dark .modal-hayyu .modal-header h5,
.theme-dark .modal-hayyu .modal-header .modal-title { color: var(--dk-text-white) !important; }

.theme-dark .modal-header.bg-primary {
   background-color: var(--dk-bg-surface) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
}
.theme-dark .modal-info-label { color: var(--dk-text-secondary) !important; }
.theme-dark .modal-info-value { color: var(--dk-text-primary) !important; }
.theme-dark .modal-detail-pasien .modal-content {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
}

/* Modal body wrapper (light #f8f9fa base) */
.theme-dark .modal-detail-pasien .modal-body-detail-pasien {
   background: var(--dk-bg-dark) !important;
}

/* Card putih → dark surface */
.theme-dark .modal-detail-pasien .card-section {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-base) !important;
}

/* Info rows — bg putih/pastel + border putih */
.theme-dark .modal-detail-pasien .info-row {
   border-bottom-color: var(--dk-border-base) !important;
}
.theme-dark .modal-detail-pasien .info-row-highlight {
   background: var(--dk-bg-teal-dim) !important;
}
.theme-dark .modal-detail-pasien .info-row-warning {
   background: var(--dk-color-warn-bg) !important;
}

/* Text hardcoded gelap → light */
.theme-dark .modal-detail-pasien .section-heading-outside,
.theme-dark .modal-detail-pasien .info-label-sm,
.theme-dark .modal-detail-pasien .info-label-paket,
.theme-dark .modal-detail-pasien .info-value-reservation,
.theme-dark .modal-detail-pasien .history-customer-label {
   color: var(--dk-text-primary) !important;
}
/* Btn lihat detail — bg putih + border putih */
.theme-dark .modal-detail-pasien .btn-lihat-detail {
   background: var(--dk-bg-input) !important;
   color: var(--dk-color-accent) !important;
   border-color: var(--dk-border-normal) !important;
}
.theme-dark .modal-detail-pasien .info-value-sm,
.theme-dark .modal-detail-pasien .info-value-sm.text-muted,
.theme-dark .modal-detail-pasien .paket-detail-list,
.theme-dark .modal-detail-pasien .paket-detail-list li,
.theme-dark .modal-detail-pasien .info-reservation-details {
   color: var(--dk-text-secondary) !important;
}
.theme-dark .modal-detail-pasien .info-value-lg {
   color: var(--dk-color-accent) !important;
}
/* Highlight value pakai inline style dari BE → paksa */
.theme-dark .modal-detail-pasien .info-row-highlight .info-value-lg[style] {
   color: var(--dk-color-accent) !important;
}
/* Warning row (catatan) — kuning gold */
.theme-dark .modal-detail-pasien .info-label-warning,
.theme-dark .modal-detail-pasien .info-label-warning i,
.theme-dark .modal-detail-pasien .catatan-customer-list li {
   color: var(--dk-color-warn-text) !important;
}

/* Voucher value pill — glass putih → dark glass di atas card teal */
.theme-dark .modal-detail-pasien .voucher-value-pill {
   background: rgba(20, 24, 26, 0.55) !important;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}
.theme-dark .modal-detail-pasien .voucher-amount-large {
   color: var(--dk-color-accent) !important;
}

/* Skeleton body (light shimmer #e8ecef/#f5f7f9) → dark shimmer */
.theme-dark .modal-detail-pasien .modal-body-detail-pasien .sk-line,
.theme-dark .modal-detail-pasien .modal-body-detail-pasien .sk-icon-circle,
.theme-dark .modal-detail-pasien .modal-body-detail-pasien .sk-section-title,
.theme-dark .modal-detail-pasien .modal-body-detail-pasien .sk-voucher-card,
.theme-dark .modal-detail-pasien .modal-body-detail-pasien .sk-voucher-pill,
.theme-dark .modal-detail-pasien .modal-body-detail-pasien .sk-btn-placeholder,
.theme-dark .modal-detail-pasien .modal-body-detail-pasien .sk-highlight-row {
   background: linear-gradient(90deg, var(--dk-bg-surface) 0%, var(--dk-bg-surface-alt) 35%, var(--dk-bg-surface) 60%) !important;
   background-size: 600px 100% !important;
}
.theme-dark .modal-detail-pasien .sk-info-row {
   border-bottom-color: var(--dk-border-base) !important;
}

/* t_exam modal header (inline bg #b0cfce) */
.theme-dark .modal-header[style*="#b0cfce"],
.theme-dark .modal-header[style*="b0cfce"] {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .modal-header[style*="#b0cfce"] .modal-title,
.theme-dark .modal-header[style*="b0cfce"] .modal-title { color: var(--dk-text-white) !important; }
.theme-dark .modal-header[style*="#b0cfce"] .close,
.theme-dark .modal-header[style*="b0cfce"] .close {
   color: var(--dk-text-white) !important;
   opacity: 0.8;
}

/* SweetAlert */
.theme-dark .hayyu-swal-popup,
body.theme-dark .swal2-popup,
body.theme-dark .new-swal2-popup {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border: 1px solid var(--dk-border-base) !important;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
.theme-dark .hayyu-swal-title,
body.theme-dark .swal2-title,
body.theme-dark .new-swal2-title { color: var(--dk-text-primary) !important; }
.theme-dark .hayyu-swal-html,
body.theme-dark .swal2-html-container,
body.theme-dark .new-swal2-html-container { color: var(--dk-text-secondary) !important; }

.theme-dark .hayyu-swal-html .swal2-textarea,
.theme-dark .hayyu-swal-html textarea,
body.theme-dark .swal2-input,
body.theme-dark .new-swal2-input,
body.theme-dark .swal2-textarea,
body.theme-dark .new-swal2-textarea {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-normal) !important;
}
.theme-dark .hayyu-swal-html .swal2-textarea:focus,
.theme-dark .hayyu-swal-html textarea:focus,
body.theme-dark .swal2-input:focus,
body.theme-dark .new-swal2-input:focus,
body.theme-dark .swal2-textarea:focus,
body.theme-dark .new-swal2-textarea:focus {
   border-color: var(--dk-focus-border) !important;
   box-shadow: 0 0 0 3px var(--dk-focus-shadow) !important;
}
.theme-dark .hayyu-swal-html .swal2-textarea::placeholder,
.theme-dark .hayyu-swal-html textarea::placeholder,
body.theme-dark .swal2-input::placeholder,
body.theme-dark .new-swal2-input::placeholder,
body.theme-dark .swal2-textarea::placeholder,
body.theme-dark .new-swal2-textarea::placeholder { color: var(--dk-text-muted) !important; }

.theme-dark .hayyu-swal-btn-outline {
   background-color: transparent !important;
   color: var(--dk-color-accent) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .hayyu-swal-btn-outline:hover {
   background-color: rgba(74, 158, 156, 0.15) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .hayyu-swal-btn-primary {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .hayyu-swal-btn-primary:hover { background-color: var(--dk-color-primary-darker) !important; }

/* ============================================================
   8. DROPDOWNS / POPOVERS / MENUS
   ============================================================ */
.theme-dark .dropdown-menu,
.theme-dark .bd-menu {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 4px 16px var(--dk-shadow-sm) !important;
}
.theme-dark .dropdown-item {
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-faint) !important;
}
.theme-dark .dropdown-item:hover,
.theme-dark .dropdown-item:focus,
.theme-dark .bd-menu a:hover {
   background-color: var(--dk-bg-row-hover) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .dropdown-item.active,
.theme-dark .dropdown-item:active {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .dropdown-divider { border-top-color: var(--dk-border-subtle) !important; }
.theme-dark .bd-menu a { color: var(--dk-text-primary) !important; }
.theme-dark .bd-menu a[style*='rgb(0, 100, 98)'],
.theme-dark .bd-menu a[style*='#006462'],
.theme-dark .bd-menu a[style*='rgb(0, 100, 98)']:hover,
.theme-dark .bd-menu a[style*='#006462']:hover {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark .popover.tc-hasil-popover,
.theme-dark .popover.tc3-hasil-popover {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 3px 10px -3px var(--dk-shadow-md) !important;
}
.theme-dark .popover.tc-hasil-popover .popover-body,
.theme-dark .popover.tc3-hasil-popover .popover-body {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
}

/* Filter enum wrap */
.theme-dark .filter-enum-wrap,
.theme-dark .tc3-filter-enum-wrap {
   background-color: var(--dk-bg-dark) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .filter-enum-wrap:hover,
.theme-dark .tc3-filter-enum-wrap:hover { background-color: var(--dk-bg-surface) !important; }

/* Column visibility */
.theme-dark .tc-display-col-btn {
   background-color: transparent !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tc-display-column-menu,
.theme-dark .tc3-display-column-menu {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 6px 20px var(--dk-shadow-md) !important;
   scrollbar-color: var(--dk-border-strong) var(--dk-bg-surface) !important;
   scrollbar-width: thin !important;
}
.theme-dark .tc-display-column-menu::-webkit-scrollbar,
.theme-dark .tc3-display-column-menu::-webkit-scrollbar {
   width: 8px !important;
   background-color: var(--dk-bg-surface) !important;
}
.theme-dark .tc-display-column-menu::-webkit-scrollbar-thumb,
.theme-dark .tc3-display-column-menu::-webkit-scrollbar-thumb {
   background-color: var(--dk-border-strong) !important;
   border-radius: 4px !important;
}
.theme-dark .tc-display-column-menu::-webkit-scrollbar-thumb:hover,
.theme-dark .tc3-display-column-menu::-webkit-scrollbar-thumb:hover { background-color: var(--dk-color-accent) !important; }
.theme-dark .tc-display-column-menu .dropdown-item,
.theme-dark .tc3-display-column-menu .dropdown-item {
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-faint) !important;
}
.theme-dark .tc-display-column-menu .dropdown-item:hover,
.theme-dark .tc3-display-column-menu .dropdown-item:hover { background-color: var(--dk-bg-dark) !important; }

/* ============================================================
   9. PAGINATION
   ============================================================ */
.theme-dark [data-testid='per-page-btn'] {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-color-accent) !important;
   border: 1px solid var(--dk-border-base) !important;
}
.theme-dark [data-testid='per-page-btn']:hover {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-color-accent) !important;
}

.theme-dark .pagination .page-item .page-link,
.theme-dark .pagination > li > a,
.theme-dark .pagination > li > span {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .pagination .page-item.active .page-link,
.theme-dark .pagination > .active > a,
.theme-dark .pagination > .active > span,
.theme-dark .pagination li.active a {
   background-color: var(--dk-color-primary) !important;
   border-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .pagination .page-item.disabled .page-link,
.theme-dark .pagination > .disabled > span,
.theme-dark .pagination > .disabled > a {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-ghost) !important;
   color: var(--dk-text-disabled) !important;
}

.theme-dark .pagination { gap: 2px; }
.theme-dark .pagination li a,
.theme-dark .pagination li a.foreground {
   color: var(--dk-text-secondary) !important;
   background-color: transparent !important;
}
.theme-dark .pagination li a:hover {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .pagination li a.foreground[ng-class*="currentPage"] { color: var(--dk-text-disabled) !important; }

.theme-dark .pagination-template,
.theme-dark .pagination-template div,
.theme-dark .pagination-template span,
.theme-dark .pagination-template [style*="color: #006462"],
.theme-dark .pagination-template [style*="color:#006462"],
.theme-dark .pagination-template [style*="color: #006462"] span,
.theme-dark .pagination-template [style*="color:#006462"] span,
.theme-dark .pagination-template .page-detail { color: var(--dk-text-secondary) !important; }

.theme-dark page-size-dropdown button {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border: 1px solid var(--dk-border-solid) !important;
}
.theme-dark page-size-dropdown button:hover,
.theme-dark page-size-dropdown button:focus {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .pagination-template .options-mobile span { color: var(--dk-text-muted) !important; }

/* ============================================================
   10. NAVIGATION — Sidebar, Navbar, Tabs
   ============================================================ */
.theme-dark .app-header.navbar {
   background-color: var(--dk-bg-dark) !important;
   border-bottom: 1px solid var(--dk-border-ghost) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .app-header.navbar .btn-nav {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .app-header.navbar .btn-nav:hover { background-color: var(--dk-bg-dark) !important; }
.theme-dark .app-header.navbar .btn-nav.with-text span { color: var(--dk-text-primary) !important; }

.theme-dark .app-header.navbar .menu-search-trigger {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-base) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .app-header.navbar .menu-search-trigger:hover { background-color: var(--dk-bg-dark) !important; }
.theme-dark .app-header.navbar .menu-search-trigger-text,
.theme-dark .app-header.navbar .menu-search-trigger-icon { color: var(--dk-text-muted) !important; }
.theme-dark .app-header.navbar .menu-search-trigger-kbd kbd {
   background-color: var(--dk-bg-darkest) !important;
   color: var(--dk-text-muted) !important;
   border: 1px solid var(--dk-border-normal) !important;
}

.theme-dark .app-header.navbar .custom-dropdown .ng-binding { color: var(--dk-text-primary) !important; }
.theme-dark .app-header.navbar .custom-dropdown b.ng-binding { color: var(--dk-color-accent) !important; }

/* Menu search modal (command palette) */
.theme-dark .menu-search-dialog {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
}
.theme-dark .menu-search-header-icon { color: var(--dk-color-accent) !important; }
.theme-dark .menu-search-input { color: var(--dk-text-primary) !important; }
.theme-dark .menu-search-input::placeholder { color: var(--dk-text-disabled) !important; }
.theme-dark .menu-search-esc-kbd,
.theme-dark .menu-search-footer kbd {
   background-color: var(--dk-bg-darkest) !important;
   color: var(--dk-text-muted) !important;
   border-color: var(--dk-border-normal) !important;
}
.theme-dark .menu-search-esc-kbd:hover { background-color: var(--dk-bg-dark) !important; }
.theme-dark .menu-search-divider { background-color: var(--dk-border-subtle) !important; }
.theme-dark .menu-search-results::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2) !important; }
.theme-dark .menu-search-result:hover,
.theme-dark .menu-search-result.is-selected { background-color: var(--dk-bg-dark) !important; }
.theme-dark .menu-search-result-icon { background-color: var(--dk-bg-dark) !important; }
.theme-dark .menu-search-result-label { color: var(--dk-text-primary) !important; }
.theme-dark .menu-search-result-label mark {
   background-color: rgba(74, 158, 156, 0.2) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .menu-search-result-parent { color: var(--dk-text-muted) !important; }
.theme-dark .menu-search-result-arrow { color: var(--dk-text-disabled) !important; }
.theme-dark .menu-search-result.is-selected .menu-search-result-arrow { color: var(--dk-color-accent) !important; }
.theme-dark .menu-search-empty { color: var(--dk-text-muted) !important; }
.theme-dark .menu-search-empty .fa { color: rgba(255, 255, 255, 0.1) !important; }
.theme-dark .menu-search-footer {
   border-top-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-muted) !important;
}

/* Sidebar */
.theme-dark .dashboard .sidebar,
.theme-dark .sidebar {
   background-color: var(--dk-bg-darkest) !important;
   border-right: none !important;
}
.theme-dark .sidebar .nav-link {
   color: #a7b3b2 !important;
   padding-top: 10px !important;
   padding-bottom: 10px !important;
   transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
}
.theme-dark .sidebar .nav-link:active { transform: scale(0.98) !important; }

.theme-dark .sidebar .nav-link:hover,
.theme-dark .dashboard .sidebar .nav-link:hover,
.theme-dark .dashboard .navbar .sidebar .dropdown-toggle:hover,
.theme-dark .dashboard .sidebar .nav-dropdown.open > .nav-link:hover {
   background-color: rgba(255, 255, 255, 0.08) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark .sidebar .nav-link.active,
.theme-dark .dashboard .navbar .sidebar .active.dropdown-toggle,
.theme-dark .dashboard .sidebar .nav-link.active,
.theme-dark .dashboard .sidebar .navbar .active.dropdown-toggle,
.theme-dark .dashboard .sidebar .nav-dropdown.open > .nav-link {
   background-color: var(--dk-bg-teal-preview) !important;
   color: #9fdedc !important;
   font-weight: 600 !important;
   position: relative;
   overflow: hidden;
}
.theme-dark .dashboard .sidebar .nav-link.active::after,
.theme-dark .dashboard .sidebar .navbar .active.dropdown-toggle::after,
.theme-dark .dashboard .sidebar .nav-dropdown.open > .nav-link::after {
   content: "";
   position: absolute;
   left: 0; top: 0; bottom: 0;
   width: 3px;
   background-color: #35a09d;
}

.theme-dark .sidebar .nav-dropdown-toggle::before {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !important;
}
.theme-dark .sidebar .nav-link:hover.nav-dropdown-toggle::before,
.theme-dark .sidebar .nav-link.active.nav-dropdown-toggle::before,
.theme-dark .sidebar .nav-dropdown.open > .nav-link.nav-dropdown-toggle::before {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23ffffff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !important;
}

.theme-dark .sidebar .dot-sidebar { filter: brightness(0) invert(1) opacity(0.7) !important; }
.theme-dark .sidebar .active > .dot-sidebar,
.theme-dark .sidebar .nav-dropdown.open > .nav-link > .dot-sidebar { filter: brightness(0) invert(1) opacity(1) !important; }

.theme-dark .sidebar .sidebar-nav::-webkit-scrollbar-track { background-color: transparent !important; }
.theme-dark .sidebar .sidebar-nav::-webkit-scrollbar-thumb { background-color: transparent !important; }
.theme-dark .sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb { background-color: #4a8e8c !important; }
.theme-dark .sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb:hover { background-color: #6ba9a7 !important; }
.theme-dark .sidebar .sidebar-nav {
   scrollbar-color: transparent transparent;
   scrollbar-width: thin;
}
.theme-dark .sidebar .sidebar-nav:hover {
   scrollbar-color: #4a8e8c transparent;
}

.theme-dark .sidebar-theme-toggle { border-top-color: rgba(255, 255, 255, 0.15); }
.theme-dark .sidebar-theme-toggle .theme-toggle-btn { color: var(--dk-text-white); }
.theme-dark .sidebar-theme-toggle .theme-toggle-btn:hover {
   background: rgba(255, 255, 255, 0.12);
   color: var(--dk-text-white);
}
.theme-dark .sidebar-theme-toggle .theme-toggle-btn.active {
   background: rgba(255, 255, 255, 0.22);
   color: var(--dk-text-white);
}

.dashboard .sidebar .active.dropdown-toggle .sidebar-icon,
.dashboard .sidebar .nav-link.active .sidebar-icon,
.dashboard .sidebar .navbar .active.dropdown-toggle .sidebar-icon,
.dashboard .sidebar .nav-dropdown.open > .nav-link .sidebar-icon { display: block !important; }

/* Tab navigation */
.theme-dark .tab-navigation .nav-tabs,
.theme-dark .tab-navigation .tab-content {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-ghost) !important;
}
.theme-dark .tab-navigation .nav-link { color: var(--dk-text-muted) !important; }
.theme-dark .tab-navigation .nav-pills .nav-link.active,
.theme-dark .tab-navigation .nav-tabs .nav-link.active {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tab-navigation .nav-link:hover:not(.active) {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .nav-pills .nav-item[style*="border-bottom"] { border-bottom-color: var(--dk-border-subtle) !important; }
.theme-dark .nav-pills .nav-link[style*="color: #536c79"] { color: var(--dk-text-muted) !important; }
.theme-dark .nav-pills .nav-link:hover[style*="color: #536c79"] { color: var(--dk-text-primary) !important; }
.theme-dark .card-header h5[style*="color: #006462"] { color: var(--dk-color-accent) !important; }

/* Top bar */
.theme-dark .top-bar,
.theme-dark .alert-light.top-bar {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .top-bar h4 { color: var(--dk-text-primary) !important; }
.theme-dark .top-bar span { color: var(--dk-text-secondary) !important; }
.theme-dark [style*="#257260"],
.theme-dark [style*="rgb(37, 114, 96)"] { color: var(--dk-color-accent) !important; }

/* ============================================================
   11. DATEPICKER POPUPS (Flatpickr, DRPv2, Monthpicker, custom-my-picker)
   ============================================================ */

/* Flatpickr calendar container */
.theme-dark .flatpickr-calendar,
.theme-dark .flatpickr-calendar .flatpickr-innerContainer,
.theme-dark .flatpickr-calendar .flatpickr-rContainer,
.theme-dark .flatpickr-calendar .flatpickr-days,
.theme-dark .flatpickr-calendar .dayContainer,
.theme-dark .flatpickr-weekdays {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .flatpickr-calendar {
   border: 1px solid var(--dk-border-subtle) !important;
   box-shadow: 0 4px 16px var(--dk-shadow-sm) !important;
}
.theme-dark .flatpickr-calendar.arrowTop:before    { border-bottom-color: var(--dk-border-subtle) !important; }
.theme-dark .flatpickr-calendar.arrowTop:after     { border-bottom-color: var(--dk-bg-surface) !important; }
.theme-dark .flatpickr-calendar.arrowBottom:before { border-top-color: var(--dk-border-subtle) !important; }
.theme-dark .flatpickr-calendar.arrowBottom:after  { border-top-color: var(--dk-bg-surface) !important; }

.theme-dark .flatpickr-months .flatpickr-month {
   color: var(--dk-text-white) !important;
   fill: var(--dk-text-white) !important;
}
.theme-dark .flatpickr-months .flatpickr-prev-month,
.theme-dark .flatpickr-months .flatpickr-next-month,
.theme-dark .flatpickr-prev-month,
.theme-dark .flatpickr-next-month,
.theme-dark .flatpickr-calendar .flatpickr-prev-month,
.theme-dark .flatpickr-calendar .flatpickr-next-month {
   background: var(--dk-bg-input) !important;
   border: 1px solid var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
   fill: var(--dk-text-primary) !important;
}
.theme-dark .flatpickr-months .flatpickr-prev-month:hover,
.theme-dark .flatpickr-months .flatpickr-next-month:hover,
.theme-dark .flatpickr-prev-month:hover,
.theme-dark .flatpickr-next-month:hover,
.theme-dark .flatpickr-calendar .flatpickr-prev-month:hover,
.theme-dark .flatpickr-calendar .flatpickr-next-month:hover {
   background: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-strong) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .flatpickr-months .flatpickr-prev-month svg,
.theme-dark .flatpickr-months .flatpickr-next-month svg,
.theme-dark .flatpickr-prev-month svg,
.theme-dark .flatpickr-next-month svg,
.theme-dark .flatpickr-calendar .flatpickr-prev-month svg,
.theme-dark .flatpickr-calendar .flatpickr-next-month svg {
   fill: var(--dk-text-primary) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .flatpickr-months .flatpickr-prev-month:hover svg,
.theme-dark .flatpickr-months .flatpickr-next-month:hover svg,
.theme-dark .flatpickr-prev-month:hover svg,
.theme-dark .flatpickr-next-month:hover svg,
.theme-dark .flatpickr-calendar .flatpickr-prev-month:hover svg,
.theme-dark .flatpickr-calendar .flatpickr-next-month:hover svg {
   fill: var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
}

.theme-dark .flatpickr-current-month {
   color: var(--dk-text-white) !important;
   border-color: transparent !important;
}
.theme-dark .flatpickr-current-month:hover,
.theme-dark .flatpickr-current-month .cur-month:hover,
.theme-dark .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.theme-dark .flatpickr-current-month input.cur-year:hover,
.theme-dark .flatpickr-current-month .numInputWrapper:hover {
   background: rgba(255, 255, 255, 0.08) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-color-accent) !important;
   border-radius: 4px;
}
.theme-dark .flatpickr-current-month .cur-month { color: var(--dk-text-primary) !important; }
.theme-dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.theme-dark .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
   background: var(--dk-bg-surface) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .flatpickr-current-month input.cur-year {
   color: var(--dk-text-white) !important;
   background: transparent !important;
}

.theme-dark .flatpickr-weekday { color: var(--dk-text-muted) !important; }

/* Day cells */
html body.theme-dark .flatpickr-calendar .flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.today) {
   color: var(--dk-text-white) !important;
   font-weight: 500 !important;
}
html body.theme-dark .flatpickr-calendar .flatpickr-day:hover,
html body.theme-dark .flatpickr-calendar .flatpickr-day:focus {
   background: rgba(255, 255, 255, 0.08) !important;
   border-color: rgba(255, 255, 255, 0.08) !important;
   color: var(--dk-text-white) !important;
}
html body.theme-dark .flatpickr-calendar .flatpickr-day.today:not(.selected) {
   color: #2dd4bf !important;
   border-color: #2dd4bf !important;
   font-weight: 600 !important;
}
html body.theme-dark .flatpickr-calendar .flatpickr-day.today:not(.selected):hover {
   background: rgba(255, 255, 255, 0.08) !important;
   border-color: rgba(255, 255, 255, 0.08) !important;
   color: var(--dk-text-white) !important;
}

/* Range picker dark — cukup redefine var --fp-range-* (dari _form.css).
   Struktur bar (::before) + rule selected/start/end/inRange reuse light block.
   4-chain 'html body.theme-dark .flatpickr-calendar' menang spesifisitas lawan
   light 3-chain → warna dark dipakai, TAK ada fill terang nembus. */
html body.theme-dark .flatpickr-calendar {
   --fp-range-solid: var(--dk-color-primary);   /* #006462 */
   --fp-range-fill: rgba(74, 158, 156, 0.2);    /* teal-dim, cocok bg gelap */
   --fp-range-text: var(--dk-text-white);       /* #ffffff */
}

.theme-dark .flatpickr-day.flatpickr-disabled,
.theme-dark .flatpickr-day.flatpickr-disabled:hover,
.theme-dark .flatpickr-day.prevMonthDay,
.theme-dark .flatpickr-day.nextMonthDay,
.theme-dark .flatpickr-day.notAllowed,
.theme-dark .flatpickr-day.notAllowed.prevMonthDay,
.theme-dark .flatpickr-day.notAllowed.nextMonthDay { color: var(--dk-text-disabled) !important; background: transparent !important; border-color: transparent !important; cursor: not-allowed; }

.theme-dark .flatpickr-time,
.theme-dark .flatpickr-time .numInputWrapper,
.theme-dark .flatpickr-time input { background: var(--dk-bg-surface) !important; }
.theme-dark .flatpickr-time { border-top: 1px solid var(--dk-border-subtle) !important; }
.theme-dark .flatpickr-time input { color: var(--dk-text-white) !important; }
.theme-dark .flatpickr-time input:hover,
.theme-dark .flatpickr-time .flatpickr-am-pm:hover,
.theme-dark .flatpickr-time input:focus,
.theme-dark .flatpickr-time .flatpickr-am-pm:focus { background: rgba(255, 255, 255, 0.08) !important; }
.theme-dark .flatpickr-time .flatpickr-time-separator,
.theme-dark .flatpickr-time .flatpickr-am-pm { color: var(--dk-text-primary) !important; }

/* Custom Month/Year picker popup */
.theme-dark .custom-my-picker-popup {
   background: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   box-shadow: 0 4px 16px var(--dk-shadow-md) !important;
}
.theme-dark .custom-my-year-label { color: var(--dk-text-primary) !important; }
.theme-dark .custom-my-year-nav,
.theme-dark .custom-my-month-btn {
   background: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .custom-my-year-nav:hover {
   background: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-strong) !important;
}
.theme-dark .custom-my-month-btn:hover {
   background: var(--dk-bg-teal-dim) !important;
   color: var(--dk-color-accent) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .custom-my-month-btn.active,
.theme-dark .custom-my-month-btn.active:hover {
   background: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
   border-color: var(--dk-color-primary) !important;
}

/* Monthpicker library */
.theme-dark .monthpicker-container,
.theme-dark .monthpicker-dropdown {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
   box-shadow: 0 8px 32px var(--dk-shadow-md) !important;
}
.theme-dark .monthpicker-header {
   background-color: var(--dk-bg-darkest) !important;
   border-bottom: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .monthpicker-current,
.theme-dark .monthpicker-prev,
.theme-dark .monthpicker-next { color: var(--dk-text-primary) !important; }
.theme-dark .monthpicker-prev:hover,
.theme-dark .monthpicker-next:hover { color: var(--dk-color-accent) !important; }
.theme-dark .monthpicker-body { background-color: var(--dk-bg-surface) !important; }
.theme-dark .monthpicker-items,
.theme-dark .monthpicker-months li { color: var(--dk-text-primary) !important; }
.theme-dark .monthpicker-items:hover,
.theme-dark .monthpicker-months li:hover {
   background-color: var(--dk-bg-hover-teal) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .monthpicker-items.selected,
.theme-dark .monthpicker-months li.selected {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .monthpicker-items.disabled,
.theme-dark .monthpicker-months li.disabled { color: var(--dk-text-faded) !important; }

/* DRPv2 daterangepicker */
.theme-dark .drpv2-popup {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 8px 32px var(--dk-shadow-md) !important;
}
.theme-dark .drpv2-ranges { border-right-color: var(--dk-border-subtle) !important; }
.theme-dark .drpv2-range-item { color: var(--dk-text-primary) !important; }
.theme-dark .drpv2-range-item:hover { background-color: rgba(255, 255, 255, 0.06) !important; }
.theme-dark .drpv2-range-item.active {
   background-color: var(--dk-bg-teal-dim) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .drpv2-input {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .drpv2-input:focus {
   border-color: var(--dk-focus-border) !important;
   box-shadow: 0 0 0 3px var(--dk-focus-shadow) !important;
}
.theme-dark .drpv2-input-icon { color: var(--dk-text-muted) !important; }
.theme-dark .drpv2-nav-btn { color: var(--dk-text-primary) !important; }
.theme-dark .drpv2-nav-btn:hover:not(.drpv2-disabled) { background-color: rgba(255, 255, 255, 0.08) !important; }
.theme-dark .drpv2-month-label { color: var(--dk-text-primary) !important; }
.theme-dark .drpv2-month-label:hover {
   background-color: rgba(255, 255, 255, 0.06) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .drpv2-mypicker { background-color: var(--dk-bg-surface) !important; }
.theme-dark .drpv2-my-year-btn { color: var(--dk-text-primary) !important; }
.theme-dark .drpv2-my-year-btn:hover { background-color: rgba(255, 255, 255, 0.08) !important; }
.theme-dark .drpv2-my-year-label { color: var(--dk-color-accent) !important; }
.theme-dark .drpv2-my-month { color: var(--dk-text-primary) !important; }
.theme-dark .drpv2-my-month:hover {
   background-color: rgba(255, 255, 255, 0.06) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .drpv2-my-month.active {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .drpv2-dayname { color: var(--dk-text-muted) !important; }
.theme-dark .drpv2-day { color: var(--dk-text-primary) !important; }
.theme-dark .drpv2-day:hover:not(.disabled):not(.off):not(.start):not(.end),
.theme-dark .drpv2-day:focus:not(.disabled):not(.off):not(.start):not(.end) {
   background-color: var(--dk-bg-hover-teal) !important;
   color: var(--dk-text-primary) !important;
   outline: none !important;
}
.theme-dark .drpv2-day.off,
.theme-dark .drpv2-day.disabled { color: var(--dk-text-faded) !important; }
.theme-dark .drpv2-day.today { color: var(--dk-color-accent) !important; }
.theme-dark .drpv2-day.in-range {
   background-color: var(--dk-bg-teal-dim) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .drpv2-day.in-range.preview { background-color: var(--dk-bg-teal-preview) !important; }
.theme-dark .drpv2-day.start,
.theme-dark .drpv2-day.end {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .drpv2-footer { border-top-color: var(--dk-border-subtle) !important; }
.theme-dark .drpv2-btn-clear {
   color: var(--dk-text-muted) !important;
   border-color: var(--dk-border-normal) !important;
}
.theme-dark .drpv2-btn-clear:hover {
   background-color: rgba(255, 255, 255, 0.08) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .drpv2-btn-cancel {
   color: var(--dk-color-accent) !important;
   border-color: var(--dk-color-accent) !important;
   background-color: transparent !important;
}
.theme-dark .drpv2-btn-cancel:hover { background-color: rgba(74, 158, 156, 0.1) !important; }
.theme-dark .drpv2-btn-apply {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
   border-color: var(--dk-color-primary) !important;
}
.theme-dark .drpv2-btn-apply:hover { background-color: var(--dk-color-primary-darker) !important; }

@media (max-width: 720px) {
   .theme-dark .drpv2-ranges {
      border-bottom-color: var(--dk-border-subtle) !important;
      border-right: none !important;
   }
}

/* Daterangepicker mobile drawer */
.theme-dark .daterangepicker-mobile-trigger,
.theme-dark .button-select-drawer {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .daterangepicker-responsive svg,
.theme-dark .daterangepicker-mobile-trigger svg,
.theme-dark .button-select-drawer svg,
.theme-dark .daterangepicker-mobile-trigger .lucide,
.theme-dark .daterangepicker-mobile-trigger .lucide-16 {
   color: var(--dk-text-secondary) !important;
   stroke: var(--dk-text-secondary) !important;
}
.theme-dark .drawer-modal .text-select,
.theme-dark .daterangepicker-responsive .text-select,
.theme-dark .daterangepicker-mobile-trigger .text-select,
.theme-dark .button-select-drawer .text-select { color: var(--dk-text-primary) !important; }

.theme-dark .drawer-modal .modal-content,
.theme-dark .drawer-modal .modal-body {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .drawer-modal .drawer-footer {
   background-color: var(--dk-bg-surface) !important;
   box-shadow: 4px 0px 13px 0px var(--dk-shadow-sm) !important;
}
.theme-dark .drawer-modal .text-range { color: var(--dk-color-accent) !important; }
.theme-dark .drawer-modal .bg-inherit { color: var(--dk-text-primary) !important; }
.theme-dark .drawer-modal i.text-dark,
.theme-dark .drawer-modal .lucide,
.theme-dark .drawer-modal .lucide-16 {
   color: var(--dk-text-primary) !important;
   stroke: var(--dk-text-primary) !important;
}
.theme-dark .drawer-modal i[data-lucide="calendar-days"] { color: var(--dk-color-accent) !important; }
.theme-dark .drawer-modal .picker-item { color: var(--dk-text-primary) !important; }
.theme-dark .drawer-modal .picker-item:hover { background-color: rgba(255, 255, 255, 0.08) !important; }
.theme-dark .drawer-modal .picker-item.active {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark .drawer-datepicker {
   background-color: var(--dk-bg-surface) !important;
   box-shadow: 0 -4px 13px var(--dk-shadow-md) !important;
}
.theme-dark .drawer-datepicker .drawer-footer {
   background-color: var(--dk-bg-surface) !important;
   border-top: 1px solid var(--dk-border-subtle) !important;
}

/* ============================================================
   12. TOM SELECT / UI-SELECT
   ============================================================ */
.theme-dark .ts-wrapper,
.theme-dark .ts-wrapper.single,
.theme-dark .ts-wrapper.multi {
   background-color: transparent !important;
   border: none !important;
   box-shadow: none !important;
}
.theme-dark .ts-control,
.theme-dark .ts-wrapper .ts-control,
.theme-dark [class*="tableComponent"] .ts-control,
.theme-dark .header-filter .ts-control {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border: 1px solid var(--dk-border-solid) !important;
   border-radius: 7px !important;
   box-shadow: none !important;
}
.theme-dark .ts-wrapper.focus .ts-control,
.theme-dark .ts-control.focus,
.theme-dark .ts-control:focus-within,
.theme-dark .ts-wrapper .ts-control:focus-within {
   border-color: var(--dk-focus-border) !important;
   box-shadow: 0 0 0 3px var(--dk-focus-shadow) !important;
}
.theme-dark .ts-wrapper .ts-control input,
.theme-dark .ts-wrapper .ts-control input:focus,
.theme-dark .ts-control input,
.theme-dark .ui-select-search,
.theme-dark .ui-select-search:focus {
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   background-color: transparent !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .ts-control input::placeholder { color: var(--dk-text-disabled) !important; }

.theme-dark .ts-dropdown,
.theme-dark .ts-wrapper .ts-dropdown {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
   box-shadow: 0 6px 20px var(--dk-shadow-md) !important;
}
.theme-dark .ts-dropdown .ts-dropdown-content {
   scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
}
.theme-dark .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb        { background-color: rgba(255, 255, 255, 0.2) !important; }
.theme-dark .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb:hover  { background-color: rgba(255, 255, 255, 0.3) !important; }
.theme-dark .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb:active { background-color: rgba(255, 255, 255, 0.4) !important; }

.theme-dark .ts-dropdown .option,
.theme-dark .ts-dropdown [data-selectable] {
   background-color: transparent !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .ts-dropdown .option:hover,
.theme-dark .ts-dropdown .option.active {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .ts-dropdown .option.selected {
   background-color: var(--dk-color-primary-darkest) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .ts-dropdown .optgroup-header {
   background-color: var(--dk-bg-darkest) !important;
   color: var(--dk-text-muted) !important;
   border-bottom-color: var(--dk-border-faint) !important;
}
.theme-dark .ts-dropdown .no-results {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .ts-wrapper.single .ts-control::after { border-top-color: var(--dk-text-muted) !important; }
.theme-dark .ts-wrapper.disabled .ts-control {
   background-color: var(--dk-bg-surface-alt) !important;
   color: var(--dk-text-disabled) !important;
   opacity: 0.7 !important;
}

.theme-dark .ts-wrapper .ts-control .item,
.theme-dark .ts-wrapper.single .ts-control .item {
   background-color: transparent !important;
   color: var(--dk-text-primary) !important;
   border: none !important;
}
.theme-dark .ts-wrapper.multi .ts-control .item {
   background-color: var(--dk-bg-item-multi) !important;
   color: var(--dk-text-primary) !important;
   border: 1px solid var(--dk-border-base) !important;
}
.theme-dark .ts-wrapper.multi .ts-control .item .remove {
   border-left: 1px solid var(--dk-border-base) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .ts-wrapper.multi .ts-control .item .remove:hover { color: var(--dk-text-white) !important; }

/* ============================================================
   13. TABLE COMPONENT (V1/V2/V3) + FILTER TABLE
   ============================================================ */
.theme-dark [class*="tableComponent"] .allperiod-box,
.theme-dark [class*="tableComponent"] .input-allperiod-box,
.theme-dark [class*="tableComponent"] .icon-input-allperiod {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark [class*="tableComponent"] .icon-input-allperiod { border-left: none !important; }
.theme-dark [class*="tableComponent"] .icon-input-allperiod svg {
   color: var(--dk-text-muted) !important;
   stroke: var(--dk-text-muted) !important;
}

.theme-dark [class*="tableComponent"] .custom-checkbox {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-strong) !important;
}
.theme-dark [class*="tableComponent"] .custom-checkbox.checked {
   background-color: var(--dk-color-primary) !important;
   border-color: var(--dk-color-primary) !important;
}

.theme-dark .tableComponent .all-periode.input-group-text {
   background-color: var(--dk-bg-teal-deep) !important;
   border-color: var(--dk-color-primary-darkest) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark [class*="tableComponent"] .dropdown-menu {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 5px 17px 0 var(--dk-shadow-sm) !important;
}
.theme-dark [class*="tableComponent"] .dropdown-item {
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-faint) !important;
}
.theme-dark [class*="tableComponent"] .dropdown-item:hover,
.theme-dark [class*="tableComponent"] .dropdown-item:focus {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark [class*="tableComponent"] .ui-select-container input,
.theme-dark .select-table-component .ui-select-container input {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark [class*="tableComponent"] .ui-select-toggle.btn,
.theme-dark [class*="tableComponent"] .ui-select-container .btn-default,
.theme-dark .select-table-component .ui-select-toggle.btn,
.theme-dark .select-table-component .ui-select-container .btn-default {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .select-table-component .ui-select-choices-row.active > span {
   background-color: var(--dk-color-primary-darkest) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark [class*="tableComponent"] .ui-select-multiple .ui-select-container,
.theme-dark .select-table-component .ui-select-multiple .ui-select-container {
   border-color: var(--dk-border-solid) !important;
   background-color: var(--dk-bg-input) !important;
}

.theme-dark .select-table-component .ui-select-search.form-control {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}

/* filterTable */
.theme-dark .filterTable .label-styling { color: var(--dk-text-secondary) !important; }
.theme-dark .filterTable .filter-text,
.theme-dark .filterTable .text-hayyu-hijau { color: var(--dk-color-accent) !important; }

.theme-dark .filterTable .custom-drawer-bottom,
.theme-dark .filterTable .drawer-footer {
   background-color: var(--dk-bg-surface) !important;
   box-shadow: 0 -4px 13px var(--dk-shadow-md) !important;
}
.theme-dark .filterTable .drawer-header-text { color: var(--dk-text-primary) !important; }

.theme-dark .filterTable .button-select,
.theme-dark .filterTable .button-select-drawer {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .filterTable .button-select:hover,
.theme-dark .filterTable .button-select-drawer:hover {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .filterTable .button-select:focus,
.theme-dark .button-select-drawer:focus {
   outline: none !important;
   box-shadow: none !important;
   background-color: var(--dk-bg-dark) !important;
}
.theme-dark .filterTable .text-select { color: var(--dk-text-primary) !important; }

.theme-dark .button-select-allperiod {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .button-select-allperiod:hover,
.theme-dark .button-select-allperiod:focus {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .button-select-allperiod:disabled {
   background-color: rgba(255, 255, 255, 0.05) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-disabled) !important;
}
.theme-dark .button-select-allperiod svg,
.theme-dark .button-select-allperiod .lucide {
   color: var(--dk-text-secondary) !important;
   stroke: var(--dk-text-secondary) !important;
}

.theme-dark .all-periode-text {
   background-color: var(--dk-bg-surface-alt) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .all-periode-text.disabled {
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-disabled) !important;
}

.theme-dark .filterTable .allperiod-box,
.theme-dark .filterTable .input-allperiod-box,
.theme-dark .filterTable .icon-input-allperiod {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-solid) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .filterTable .allperiod-box    { border-right-width: 0 !important; }
.theme-dark .filterTable .icon-input-allperiod { border-left: none !important; }
.theme-dark .filterTable .icon-input-allperiod svg {
   color: var(--dk-text-muted) !important;
   stroke: var(--dk-text-muted) !important;
}
.theme-dark .filterTable .input-allperiod-box .datepicker-input {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .filterTable .wrapper-multiselect,
.theme-dark .filterTable .wrapper-item-multiselect {
   border-color: var(--dk-border-solid) !important;
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .filterTable .radio-indicator {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .filterTable .radio-indicator.selected::after { background-color: var(--dk-color-accent) !important; }

.theme-dark .uiselect-filtertable .ui-select-container {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-solid) !important;
}

/* ============================================================
   14. CKEDITOR
   ============================================================ */
.theme-dark .ck {
   --ck-color-base-background: var(--dk-bg-input) !important;
   --ck-color-base-border: var(--dk-border-base) !important;
   --ck-color-base-text: var(--dk-text-primary) !important;
   --ck-color-focus-border: var(--dk-color-accent) !important;
   --ck-color-focus-outer-shadow: var(--dk-focus-shadow) !important;
   --ck-color-toolbar-background: var(--dk-bg-surface) !important;
   --ck-color-toolbar-border: var(--dk-border-base) !important;
   --ck-color-dropdown-panel-background: var(--dk-bg-surface) !important;
   --ck-color-dropdown-panel-border: var(--dk-border-subtle) !important;
   --ck-color-button-default-hover-background: var(--dk-bg-dark) !important;
   --ck-color-button-on-background: var(--dk-bg-dark) !important;
   --ck-color-button-on-hover-background: var(--dk-bg-surface) !important;
   --ck-color-button-on-color: var(--dk-text-white) !important;
   --ck-color-list-background: var(--dk-bg-surface) !important;
   --ck-color-list-button-hover-background: var(--dk-bg-dark) !important;
   --ck-color-list-button-on-background: var(--dk-color-primary) !important;
   --ck-color-list-button-on-text: var(--dk-text-white) !important;
   --ck-color-panel-background: var(--dk-bg-surface) !important;
   --ck-color-panel-border: var(--dk-border-subtle) !important;
}
.theme-dark .ck.ck-editor__main > .ck-editor__editable {
   background-color: var(--ck-color-base-background) !important;
   border-color: var(--ck-color-base-border) !important;
   color: var(--ck-color-base-text) !important;
}
.theme-dark .ck.ck-editor__main > .ck-editor__editable.ck-focused {
   border-color: var(--ck-color-focus-border) !important;
   box-shadow: 0 0 0 3px var(--ck-color-focus-outer-shadow) !important;
}
.theme-dark .ck.ck-editor__top,
.theme-dark .ck.ck-toolbar,
.theme-dark .ck.ck-menu-bar {
   background-color: var(--ck-color-toolbar-background) !important;
   border-color: var(--ck-color-toolbar-border) !important;
}
.theme-dark .ck.ck-toolbar .ck-button,
.theme-dark .ck.ck-menu-bar .ck-button,
.theme-dark .ck.ck-button__label { color: var(--ck-color-base-text) !important; }
.theme-dark .ck.ck-toolbar .ck-button:hover,
.theme-dark .ck.ck-toolbar .ck-button.ck-on,
.theme-dark .ck.ck-menu-bar .ck-button:hover,
.theme-dark .ck.ck-menu-bar .ck-button.ck-on {
   background-color: var(--ck-color-button-on-background) !important;
}
.theme-dark .ck.ck-dropdown__panel,
.theme-dark .ck.ck-menu-bar__menu__panel {
   background-color: var(--ck-color-panel-background) !important;
   border-color: var(--ck-color-panel-border) !important;
}

/* ============================================================
   15. CHARTS (Chart card, ApexCharts, ZingChart, v2Bars, tooltip)
   ============================================================ */
.theme-dark .card-apex,
.theme-dark .chart-card,
.theme-dark .v2-card {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   box-shadow: 0 2px 8px var(--dk-shadow-sm) !important;
}

.theme-dark .v2-card-title {
   color: var(--dk-text-primary) !important;
}

.theme-dark .v2-compare-label,
.theme-dark .v2-compare-row,
.theme-dark .v2-compare-label b {
   color: var(--dk-text-primary) !important;
}

.theme-dark .hy-tooltip.hy-tooltip-light,
.theme-dark .hy-tooltip.hy-tooltip-light .hy-tooltip-arrow {
   background: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-subtle) !important;
}

.theme-dark .v2bar-label,
.theme-dark .v2bar-empty-label,
.theme-dark .v2bar-outside-label,
.theme-dark .v2bar-value-line,
.theme-dark .v2bar-tooltip-title,
.theme-dark .v2bar-tooltip-val { color: var(--dk-text-primary) !important; }
.theme-dark .v2bar-tooltip-title,
.theme-dark .v2bar-tooltip-val { border-bottom-color: var(--dk-border-subtle) !important; }
.theme-dark .v2bar-track,
.theme-dark .v2bar-single { background-color: var(--dk-bg-dark) !important; }
.theme-dark .v2bar-tooltip {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
   box-shadow: 0 4px 16px var(--dk-shadow-sm) !important;
}
.theme-dark .v2bar-tooltip-name,
.theme-dark .v2bar-tooltip-caption { color: var(--dk-text-secondary) !important; }
.theme-dark .v2bar-pill--up   { background-color: #1f6b3e !important; color: #ffffff !important; }
.theme-dark .v2bar-pill--down { background-color: #a83232 !important; color: #ffffff !important; }
.theme-dark .v2bar-pill--flat { background-color: #3a4442 !important; color: var(--dk-text-primary) !important; }
.theme-dark .v2bar-pill--baru { background-color: #8a6a1a !important; color: #ffffff !important; }

/* ZingChart */
.theme-dark [id$="-graph-id0-c"] > path[fill="#ffffff"],
.theme-dark [id$="-graph-id0-c"] > path[fill="#FFFFFF"] { fill: var(--dk-bg-surface) !important; }
.theme-dark .zc-svg tspan {
   fill: var(--dk-text-muted) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark [id$="-graph-id0-title"] tspan,
.theme-dark [id*="-title"] tspan {
   fill: var(--dk-text-primary) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .zc-scale-item tspan,
.theme-dark [class*="-scale-item"] tspan,
.theme-dark [id*="-scale-item"] tspan {
   fill: var(--dk-text-muted) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .zc-value-box tspan,
.theme-dark [class*="-value-box"] tspan,
.theme-dark [id*="-value-box"] tspan {
   fill: var(--dk-text-white) !important;
   color: var(--dk-text-white) !important;
}

/* ApexCharts */
.theme-dark .apexcharts-canvas svg { background: transparent !important; }
.theme-dark .apexcharts-canvas svg > rect:first-child { fill: var(--dk-bg-surface) !important; }
.theme-dark .apexcharts-canvas text,
.theme-dark .apexcharts-canvas tspan { fill: var(--dk-text-muted) !important; }
.theme-dark .apexcharts-xaxis-label,
.theme-dark .apexcharts-yaxis-label,
.theme-dark .apexcharts-xaxis-label tspan,
.theme-dark .apexcharts-yaxis-label tspan {
   fill: var(--dk-text-muted) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .apexcharts-xaxis-title-text,
.theme-dark .apexcharts-yaxis-title-text,
.theme-dark .apexcharts-xaxis-title text,
.theme-dark .apexcharts-yaxis-title text { fill: var(--dk-text-secondary) !important; }
.theme-dark .apexcharts-title-text,
.theme-dark .apexcharts-subtitle-text { fill: var(--dk-text-primary) !important; }
.theme-dark .apexcharts-datalabel,
.theme-dark .apexcharts-datalabel-label,
.theme-dark .apexcharts-datalabel-value,
.theme-dark .apexcharts-datalabels text { fill: var(--dk-text-white) !important; }
.theme-dark .apexcharts-legend-text { color: var(--dk-text-secondary) !important; }
.theme-dark .apexcharts-gridlines-horizontal line,
.theme-dark .apexcharts-gridlines-vertical line,
.theme-dark .apexcharts-grid line { stroke: var(--dk-border-faint) !important; }
.theme-dark .apexcharts-grid-borders line,
.theme-dark .apexcharts-xaxis-tick,
.theme-dark .apexcharts-yaxis-tick,
.theme-dark line.apexcharts-xaxis-tick { stroke: var(--dk-border-subtle) !important; }
.theme-dark .apexcharts-tooltip {
   background: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 4px 16px var(--dk-shadow-md) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .apexcharts-tooltip-title {
   background: var(--dk-bg-dark) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .apexcharts-tooltip-text-y-label,
.theme-dark .apexcharts-tooltip-text-y-value,
.theme-dark .apexcharts-tooltip-text-goals-label,
.theme-dark .apexcharts-tooltip-text-goals-value,
.theme-dark .apexcharts-tooltip-text-z-value { color: var(--dk-text-primary) !important; }
.theme-dark .apexcharts-xcrosshairs,
.theme-dark .apexcharts-ycrosshairs { stroke: var(--dk-border-normal) !important; }

/* ============================================================
   16. UPLOAD / FILE
   ============================================================ */
.theme-dark .upload-cropper-container,
.theme-dark .upload-cropper-container.has-image,
.theme-dark .file-upload-container,
.theme-dark .file-upload-container.has-file,
.theme-dark .image-box-fileupload,
.theme-dark .image-box-upload {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-normal) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .upload-cropper-container:hover,
.theme-dark .upload-cropper-container.has-image:hover,
.theme-dark .file-upload-container:hover,
.theme-dark .file-upload-container.has-file:hover {
   border-color: var(--dk-color-accent) !important;
   background-color: var(--dk-bg-surface) !important;
}
.theme-dark .file-upload-container.disabled,
.theme-dark .file-upload-container.disabled:hover {
   background-color: var(--dk-border-ghost) !important;
   border-color: var(--dk-border-ghost) !important;
}
.theme-dark .file-upload-container.drag-over {
   background-color: var(--dk-bg-hover-teal) !important;
   border-color: var(--dk-color-accent) !important;
}

.theme-dark .upload-empty-state,
.theme-dark .upload-subtitle,
.theme-dark .upload-terms-condition,
.theme-dark .file-upload-empty-state,
.theme-dark .file-upload-subtitle,
.theme-dark .file-upload-hint { color: var(--dk-text-muted) !important; }
.theme-dark .upload-title,
.theme-dark .file-upload-title,
.theme-dark .choice-file-text,
.theme-dark .drag-drop-text,
.theme-dark .text-terms-condition { color: var(--dk-text-primary) !important; }
.theme-dark .file-upload-icon { color: var(--dk-text-secondary) !important; }
.theme-dark .icon-dot { color: var(--dk-color-accent) !important; }
.theme-dark small[style*="color: #006462"],
.theme-dark small[style*="color:#006462"] { color: var(--dk-color-accent) !important; }

.theme-dark .image-action-buttons .action-btn {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-normal) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .image-action-buttons .action-btn:hover {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-color-accent) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .image-action-buttons .action-btn-delete {
   color: var(--dk-color-danger) !important;
   border-color: rgba(239, 68, 68, 0.4) !important;
}
.theme-dark .image-action-buttons .action-btn-delete:hover {
   color: var(--dk-color-danger) !important;
   background-color: rgba(239, 68, 68, 0.1) !important;
}

.theme-dark .upload-cropper-modal .cropArea,
.theme-dark .upload-cropper-modal .cropper-preview-placeholder {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-normal) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .upload-cropper-modal .panel-title { color: var(--dk-text-primary) !important; }

.theme-dark .file-preview-container   { background: var(--dk-bg-surface) !important; }
.theme-dark .file-preview-icon        { background: var(--dk-bg-dark) !important; color: var(--dk-color-accent) !important; }
.theme-dark .file-preview-name        { color: var(--dk-text-primary) !important; }
.theme-dark .file-preview-size        { color: var(--dk-text-muted) !important; }
.theme-dark .file-action-btn          { background: rgba(30, 34, 40, 0.95) !important; box-shadow: 0 2px 4px var(--dk-shadow-sm) !important; }
.theme-dark .file-action-btn-download { color: var(--dk-color-accent) !important; border-color: rgba(74, 158, 156, 0.2) !important; }
.theme-dark .file-action-btn-download:hover {
   background: var(--dk-bg-hover-teal) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .file-action-btn-delete   { color: var(--dk-color-danger) !important; border-color: rgba(239, 68, 68, 0.2) !important; }
.theme-dark .file-action-btn-delete:hover {
   background: rgba(239, 68, 68, 0.2) !important;
   color: var(--dk-color-danger) !important;
   border-color: var(--dk-color-danger) !important;
}
.theme-dark .file-upload-progress-bar  { background: var(--dk-bg-surface) !important; }
.theme-dark .file-upload-progress-fill { background: linear-gradient(90deg, var(--dk-color-primary), var(--dk-color-accent)) !important; }
.theme-dark .file-upload-progress-text { color: var(--dk-text-secondary) !important; }

/* Multi upload */
.theme-dark .image-box-multiupload,
.theme-dark .box-wrapper,
.theme-dark .image-wrapper-multiupload {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .image-box-multiupload:hover,
.theme-dark .box-wrapper:hover {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .icon-box-multiupload-wrapper { background-color: rgba(255, 255, 255, 0.08) !important; }
.theme-dark .icon-box-multiupload         { color: var(--dk-text-primary) !important; }

/* NGF drop / border dashed / bg-light drop zone */
.theme-dark .border-dashed,
.theme-dark [ngf-drop],
.theme-dark [ngf-select] {
   background-color: var(--dk-bg-surface-alt) !important;
   border: 2px dashed var(--dk-border-normal) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .border-dashed:hover,
.theme-dark [ngf-drop]:hover {
   background-color: var(--dk-bg-hover-teal) !important;
   border: 2px dashed var(--dk-color-accent) !important;
}
.theme-dark .border-dashed.drag-over,
.theme-dark [ngf-drop].drag-over,
.theme-dark .ngf-drag-over {
   background-color: var(--dk-bg-teal-dim) !important;
   border: 2px dashed var(--dk-color-accent) !important;
}
.theme-dark .border-dashed .fa,
.theme-dark [ngf-drop] .fa,
.theme-dark [ngf-drop] i { color: var(--dk-text-muted) !important; }
.theme-dark .border-dashed h5,
.theme-dark [ngf-drop] h5 { color: var(--dk-text-primary) !important; }
.theme-dark .border-dashed .text-muted,
.theme-dark [ngf-drop] .text-muted { color: var(--dk-text-muted) !important; }

.theme-dark .has-no-file.bg-light {
   background-color: var(--dk-bg-dark) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .has-no-file .text-muted { color: var(--dk-text-muted) !important; }
.theme-dark embed { border-color: var(--dk-color-accent) !important; }

.theme-dark .m-b-md[style*="background-color: #c2cfd6"] { background-color: var(--dk-bg-dark) !important; }
.theme-dark .b-dashed.bg-white {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-normal) !important;
}
.theme-dark .progress.bg-light { background-color: var(--dk-bg-darkest) !important; }

/* ============================================================
   17. NOTIFICATIONS
   ============================================================ */
.theme-dark notifications,
.theme-dark .notifications,
notifications,
.notifications {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 6px 19px 0 var(--dk-shadow-md) !important;
}
.theme-dark .notifications header,
.theme-dark .notifications .rows {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .notifications .rows { scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important; }
.theme-dark .notifications .rows::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2) !important; }
.theme-dark .notifications .dropdown-item,
.theme-dark .notifications .dropdown-item[style*="f0f3f5"],
.theme-dark .notifications .dropdown-item[style*="240, 243, 245"],
.theme-dark .notifications .dropdown-item.read-all {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
}
.theme-dark .notifications .tabs-titles { border-bottom-color: var(--dk-border-subtle) !important; }
.theme-dark .notifications .tabs-titles p:hover { background-color: rgba(255, 255, 255, 0.06) !important; }
.theme-dark .notifications .tabs-titles p.active { color: var(--dk-text-primary) !important; }
.theme-dark .notifications .tabs-titles p::after { background-color: var(--dk-color-accent) !important; }
.theme-dark .notifications .group-header {
   background-color: var(--dk-bg-darkest) !important;
   color: var(--dk-text-muted) !important;
   border-bottom-color: var(--dk-border-faint) !important;
}
.theme-dark .notifications .include > div {
   border-bottom-color: var(--dk-border-faint) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .notifications .include > div.uncheck-colored { background-color: rgba(0, 100, 98, 0.15) !important; }
.theme-dark .notifications .include > div:hover {
   background-color: var(--dk-bg-dark) !important;
   box-shadow: 0 0 19px 0 var(--dk-shadow-sm) !important;
}
.theme-dark .notifications .row-title       { color: var(--dk-text-primary) !important; }
.theme-dark .notifications .row-description span { color: var(--dk-text-secondary) !important; }
.theme-dark .notifications .row-meta         { color: var(--dk-text-muted) !important; }

/* ============================================================
   18. ALERTS / BADGES
   ============================================================ */
.theme-dark .alert,
.theme-dark .card-body.alert-info,
.theme-dark .card-body.alert-warning,
.theme-dark .card-body.alert-danger,
.theme-dark .card-body.alert-success,
.theme-dark .alert-info,
.theme-dark .alert-warning,
.theme-dark .alert-danger,
.theme-dark .alert-success,
.theme-dark .alert-secondary {
   border-color: var(--dk-border-normal) !important;
}

.theme-dark .alert                  { background-color: var(--dk-bg-surface-alt) !important; color: var(--dk-text-primary) !important; }
.theme-dark .card-body.alert-info,
.theme-dark .alert-info             { background-color: var(--dk-color-info-bg) !important;   color: var(--dk-color-info-text) !important;   border-color: rgba(110, 223, 246, 0.3) !important; }
.theme-dark .card-body.alert-warning,
.theme-dark .alert-warning          { background-color: var(--dk-color-warn-bg) !important;   color: var(--dk-color-warn-text) !important;   border-color: rgba(255, 218, 106, 0.3) !important; }
.theme-dark .card-body.alert-danger,
.theme-dark .alert-danger           { background-color: var(--dk-color-danger-bg) !important; color: var(--dk-color-danger-text) !important; border-color: rgba(241, 174, 181, 0.3) !important; }
.theme-dark .card-body.alert-success,
.theme-dark .alert-success          { background-color: var(--dk-color-success-bg) !important; color: var(--dk-color-success-text) !important; border-color: rgba(163, 207, 187, 0.3) !important; }
.theme-dark .alert-secondary        { background-color: rgba(108, 117, 125, 0.15) !important;  border-color: rgba(108, 117, 125, 0.2) !important; color: var(--dk-text-primary) !important; }

/* Alert links in dark mode */
.theme-dark .alert .alert-link,
.theme-dark .card-body[class*="alert-"] .alert-link {
   text-decoration: underline;
   font-weight: 700;
}
.theme-dark .alert .alert-link { color: var(--dk-color-accent) !important; }
.theme-dark .alert-info .alert-link,
.theme-dark .card-body.alert-info .alert-link { color: #8fe8fa !important; }
.theme-dark .alert-warning .alert-link,
.theme-dark .card-body.alert-warning .alert-link { color: #ffe28a !important; }
.theme-dark .alert-danger .alert-link,
.theme-dark .card-body.alert-danger .alert-link { color: #f8c3c8 !important; }
.theme-dark .alert-success .alert-link,
.theme-dark .card-body.alert-success .alert-link { color: #bfe5d3 !important; }
.theme-dark .alert-secondary .alert-link,
.theme-dark .card-body.alert-secondary .alert-link { color: var(--dk-text-primary) !important; }

/* Badges — solid dark variants */
.theme-dark .badge          { color: var(--dk-text-white) !important; }
.theme-dark .badge-primary  { background-color: var(--dk-color-primary) !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-secondary{ background-color: #4a5568 !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-success  { background-color: #15803d !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-danger   { background-color: #b91c1c !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-warning  { background-color: #b45309 !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-info     { background-color: #0e7490 !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-light    { background-color: #4b5563 !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-dark     { background-color: #111827 !important; color: var(--dk-text-white) !important; }

.theme-dark .badge-green-new  { background-color: #15803d !important; border-color: #166534 !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-blue-new   { background-color: #0369a1 !important; border-color: #075985 !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-red-new    { background-color: #b91c1c !important; border-color: #991b1b !important; color: var(--dk-text-white) !important; }
.theme-dark .badge-yellow-new { background-color: #b45309 !important; border-color: #78350f !important; color: var(--dk-text-white) !important; }

.theme-dark .hh-tag-badge                    { color: var(--dk-text-white) !important; }
.theme-dark .hh-tag-badge.tag-treatment { background: var(--dk-color-primary) !important; color: var(--dk-text-white) !important; }
.theme-dark .hh-tag-badge.tag-addon     { background: #0e7490 !important; color: var(--dk-text-white) !important; }
.theme-dark .hh-tag-badge.tag-produk    { background: #b45309 !important; color: var(--dk-text-white) !important; }
.theme-dark .hh-tag-badge.tag-paket     { background: #6b21a8 !important; color: var(--dk-text-white) !important; }
.theme-dark .hh-tag-badge.tag-diganti   { background: #b91c1c !important; color: var(--dk-text-white) !important; }

.theme-dark .list-group.bg-white { background-color: transparent !important; }
.theme-dark .list-group-item.bg-white,
.theme-dark .list-group-item {
   background-color: transparent !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-subtle) !important;
}

/* ============================================================
   19. TASKING MODULE (tfc-*, tasking-*)
   ============================================================ */
body.theme-dark,
.theme-dark,
.theme-dark .tasking-modal-card,
.theme-dark .tasking-form-card,
.theme-dark.tasking-form-card {
   --tfc-border: var(--dk-border-subtle) !important;
   --tfc-text: var(--dk-text-primary) !important;
   --tfc-text-sec: var(--dk-text-secondary) !important;
   --tfc-text-muted: var(--dk-text-muted) !important;
   --tfc-pill: var(--dk-bg-input) !important;
   --tfc-accent: var(--dk-color-accent) !important;
   --tfc-accent-dark: var(--dk-color-primary-darker) !important;
}

.theme-dark .tasking-shell,
.theme-dark .tasking-main-layout,
.theme-dark .tasking-main,
.theme-dark .tasking-projek,
.theme-dark .tasking-board,
.theme-dark .tasking-board-content {
   background-color: var(--dk-bg-darkest) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-projek .tasking-page-title { color: var(--dk-color-accent) !important; }
.theme-dark .tasking-board .tasking-board-header { background-color: transparent !important; }

.theme-dark .tasking-board .tasking-board-title,
.theme-dark .tasking-projek .tasking-section-title,
.theme-dark .tasking-projek .tasking-card-name,
.theme-dark .tasking-board .tasking-task-title { color: var(--dk-text-primary) !important; }

.theme-dark .tasking-projek .tasking-card-update,
.theme-dark .tasking-board .tasking-task-foot,
.theme-dark .tasking-board .tasking-task-stat,
.theme-dark .tasking-board .tasking-column-empty { color: var(--dk-text-muted) !important; }

.theme-dark .tasking-board .tasking-task-stat.is-done { color: #4ADE80 !important; }

.theme-dark .tasking-board .tasking-task-private,
.theme-dark .tasking-form-card .tfc-private-hint { color: var(--dk-text-muted) !important; }

.theme-dark .tasking-form-card .tfc-badge-lock {
   background-color: rgba(74, 158, 156, 0.2) !important;
   color: var(--dk-color-accent) !important;
}

.theme-dark .tasking-form-card .tfc-private-toggle {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-form-card .tfc-private-toggle:hover,
.theme-dark .tasking-form-card .tfc-private-toggle.is-active {
   background-color: rgba(74, 158, 156, 0.2) !important;
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
}

.theme-dark .tasking-board .tasking-search-input {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-board .tasking-search-icon { color: var(--dk-text-muted) !important; }

.theme-dark .tasking-projek .tasking-card,
.theme-dark .tasking-board .tasking-task-card {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
   box-shadow: none !important;
}
.theme-dark .tasking-projek .tasking-card:hover,
.theme-dark .tasking-board .tasking-task-card:hover {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-color-accent) !important;
}

.theme-dark .tasking-projek .tasking-card-icon,
.theme-dark .tasking-projek .tasking-empty-myproject .tasking-empty-hero-icon,
.theme-dark .tasking-board .tasking-board-icon {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .tasking-board .tasking-column {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
}
.theme-dark .tasking-board .tasking-column-body { background-color: var(--dk-bg-surface) !important; }
/* Scrollbar tasking dark mode: cukup override 2 var di :root, semua
   scrollbar tasking (kanban, list view OS, form_card, dropdown) ikut. */
.theme-dark {
   --tasking-scrollbar-thumb: rgba(255, 255, 255, 0.12);
   --tasking-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
}

/* List view: header tabel tetap memakai warna kolom (--list-accent), sementara
   panel, baris, dan kontrol lain mengikuti permukaan dark theme. */
/* Kartu grup list view: index.list.css hardcode background #fff + border #e9edf2,
   tak ada override dark -> kartu putih & border terang. border-left sengaja
   dibiarkan pakai --list-accent (identitas warna kolom). */
.theme-dark .tasking-board .tasking-list-group {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   border-left-color: var(--list-accent, var(--dk-border-subtle)) !important;
   box-shadow: none !important;
}

/* Baris skeleton list: border-top #f2f4f7 hardcode. */
.theme-dark .tasking-board .tasking-list-skeleton-row {
   border-top-color: var(--dk-border-subtle) !important;
}

.theme-dark .tasking-board .tasking-list-group-head {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: none !important;
}
.theme-dark .tasking-board .tasking-list-group-name { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-board .tasking-list-table {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-board .tasking-list-thead {
   background-color: var(--list-accent, var(--dk-bg-thead)) !important;
   border-bottom-color: rgba(0, 0, 0, 0.24) !important;
}
.theme-dark .tasking-board .tasking-list-th { color: var(--dk-text-white) !important; }
.theme-dark .tasking-board .tasking-list-row {
   background-color: var(--dk-bg-surface) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-board .tasking-list-row:hover { background-color: var(--dk-bg-surface-alt) !important; }
.theme-dark .tasking-board .tasking-list-title { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-board .tasking-list-dash { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-board .tasking-list-add {
   border-top-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .tasking-board .tasking-list-add:hover {
   background-color: var(--dk-bg-surface-alt) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tasking-board .tasking-list-head-btn {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .tasking-board .tasking-list-head-btn:hover {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
}

/* Column header keeps pastel bg from DB — force dark text */
.theme-dark .tasking-board .tasking-column-header,
.theme-dark .tasking-board .tasking-column-title,
.theme-dark .tasking-board .tasking-column-head .tasking-column-title { color: #1f2d3d !important; }
.theme-dark .tasking-board .tasking-column-head .tasking-col-icon-btn { color: #4a5a72 !important; }
.theme-dark .tasking-board .tasking-column-head .tasking-col-icon-btn:hover {
   background: rgba(0, 0, 0, 0.08) !important;
   color: #1f2d3d !important;
}

.theme-dark .tasking-board .tasking-column-add-phantom {
   border-color: var(--dk-border-base) !important;
   background: transparent !important;
}
.theme-dark .tasking-board .tasking-column-add-phantom:hover {
   border-color: var(--dk-color-accent) !important;
   background: rgba(74, 158, 156, 0.1) !important;
}
.theme-dark .tasking-board .tasking-column-add-phantom-inner { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-board .tasking-column-adding {
   background: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
}
.theme-dark .tasking-board .tasking-task-check {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-strong) !important;
}
.theme-dark .tasking-board .tasking-task-label.tasking-label-more,
.theme-dark .tasking-avatar.tasking-avatar-more {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .tasking-projek .tasking-dot-btn,
.theme-dark .tasking-board .tasking-col-icon-btn { color: var(--dk-text-secondary) !important; }
.theme-dark .tasking-projek .tasking-dot-btn:hover,
.theme-dark .tasking-board .tasking-col-icon-btn:hover {
   background-color: rgba(255, 255, 255, 0.08) !important;
   color: var(--dk-text-primary) !important;
}
/* Toolbar board: popover filter + panel member */

.theme-dark .tasking-filter-popover {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-filter-popover-title {
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-filter-popover-group > label { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-filter-popover-actions { border-top-color: var(--dk-border-subtle) !important; }

.theme-dark .tasking-board .tasking-member-stack:hover {
   background: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .tasking-board .tasking-member-panel-title {
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-board .tasking-member-panel-count {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .tasking-board .tasking-member-row-name { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-board .tasking-member-remove-btn { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-board .tasking-member-remove-btn:hover {
   background: rgba(239, 68, 68, 0.18) !important;
   color: #f87171 !important;
}
.theme-dark .tasking-board .tasking-member-empty { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-board .tasking-member-panel-foot { border-top-color: var(--dk-border-subtle) !important; }
.theme-dark .tasking-board .tasking-member-add-btn {
   background: transparent !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tasking-board .tasking-member-add-btn:hover {
   background: rgba(74, 158, 156, 0.1) !important;
   border-color: var(--dk-color-accent) !important;
}

/* Tombol pulihkan panel arsip di index task (index projek pakai tasking-dot-btn) */
.theme-dark .tasking-archived-panel .tasking-archived-restore-btn { color: var(--dk-text-secondary) !important; }
.theme-dark .tasking-archived-panel .tasking-archived-restore-btn:hover {
   background: rgba(255, 255, 255, 0.08) !important;
   color: var(--dk-text-primary) !important;
}

/* Empty state — custom subtle add button */
.theme-dark .tasking-board .tasking-empty-add-btn {
   color: var(--dk-text-muted) !important;
   background: transparent !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .tasking-board .tasking-empty-add-btn:hover {
   background-color: rgba(255, 255, 255, 0.06) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-color-accent) !important;
}

/* Modal form task detail */
.theme-dark .tasking-modal-kolom .modal-content,
.theme-dark .tasking-modal-card .modal-content,
.theme-dark .modal-form-projek .modal-content,
.theme-dark .modal-task-detail .modal-content,
.theme-dark .tasking-modal-projek .modal-content,
.theme-dark .tasking-form-card {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-modal-projek .modal-header,
.theme-dark .tasking-form-card .tfc-header,
.theme-dark .tfc-head {
   background-color: var(--dk-bg-surface) !important;
   border-bottom: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-modal-projek .modal-header .modal-title,
.theme-dark .tasking-modal-projek .modal-header h6,
.theme-dark .tfc-head-title,
.theme-dark .tfc-section-title,
.theme-dark .tfc-section-title .fa,
.theme-dark .tfc-meta-label,
.theme-dark .tfc-meta-label .fa { color: var(--dk-text-primary) !important; }
.theme-dark .tfc-head-subtitle,
.theme-dark .tasking-form-card .tfc-header span:not(.tfc-badge) { color: var(--dk-text-muted) !important; }

.theme-dark .tasking-form-card .tfc-badge,
.theme-dark .tfc-badge {
   background-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark .tfc-close-btn,
.theme-dark .tfc-edit-btn {
   color: var(--dk-text-muted) !important;
   background: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .tfc-close-btn:hover,
.theme-dark .tfc-edit-btn:hover {
   color: var(--dk-text-primary) !important;
   background: var(--dk-bg-surface-alt) !important;
}

.theme-dark .tasking-form-card .tfc-left  { border-right-color: var(--dk-border-subtle) !important; }
.theme-dark .tasking-form-card .tfc-right {
   background-color: var(--dk-bg-surface-alt) !important;
   border-left: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-form-card .tfc-divider { border-top-color: var(--dk-border-subtle) !important; }
.theme-dark .tasking-form-card .tfc-title-input,
.theme-dark .tasking-form-card .tfc-title-text { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-form-card .tfc-desk-text { color: var(--dk-text-secondary) !important; }

.theme-dark .tasking-form-card .tfc-tab-header { border-bottom-color: var(--dk-border-subtle) !important; }
.theme-dark .tasking-form-card .tfc-tab-switcher { background-color: var(--dk-bg-input) !important; }
.theme-dark .tasking-form-card .tfc-tab-btn { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-form-card .tfc-tab-btn.active {
   background-color: var(--dk-color-accent) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark .tasking-form-card .tfc-comment-date-separator span {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .tasking-form-card .tfc-comment-author { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-form-card .tfc-comment-action { color: var(--dk-text-secondary) !important; }
.theme-dark .tasking-form-card .tfc-comment-time { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-form-card .tfc-history-action { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-form-card .tfc-history-author { color: var(--dk-text-secondary) !important; }
.theme-dark .tasking-form-card .tfc-history-time,
.theme-dark .tasking-form-card .tfc-history-meta-dot,
.theme-dark .tasking-form-card .tfc-history-meta { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-form-card .tfc-history-day-label { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-form-card .tfc-history-empty { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-form-card .tfc-history-event::before { background: var(--dk-border-base) !important; }
.theme-dark .tasking-form-card .tfc-history-dot {
   background: var(--dk-border-base) !important;
   box-shadow: 0 0 0 3px var(--dk-bg-card) !important;
}
.theme-dark .tasking-form-card .tfc-history-search {
   background: var(--dk-bg-input) !important;
   border-bottom-color: var(--dk-border-base) !important;
   box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.3) !important;
}
.theme-dark .tasking-form-card .tfc-history-search-input { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-form-card .tfc-history-search-input::placeholder { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-form-card .tfc-history-search i { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-form-card .tfc-comment-text {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-form-card .tfc-comment-item.is-me .tfc-comment-text {
   background-color: var(--dk-bg-teal-dim) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tasking-form-card .tfc-comment-attachment-icon {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-form-card .tfc-comment-attachment-name { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-form-card .tfc-comment-attachment-dl {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-muted) !important;
}

.theme-dark .tasking-form-card .tfc-komentar-input-wrap,
.theme-dark .tasking-form-card .tfc-komentar-input-bar {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-form-card .tfc-komentar-input-bar input,
.theme-dark .tasking-form-card .tfc-komentar-input-bar textarea,
.theme-dark .tfc-act-input,
.theme-dark .tfc-new-item-input,
.theme-dark .tfc-new-group-input {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .tasking-form-card .tfc-attach-btn {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .tasking-form-card .tfc-attach-btn:hover { background-color: var(--dk-bg-surface-alt) !important; }

/* @-mention dark */
.theme-dark .tasking-form-card .tfc-mention {
   background-color: rgba(255, 255, 255, 0.08) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tasking-form-card .tfc-mention-banner {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tasking-form-card .tfc-mention-banner:hover { background-color: var(--dk-bg-input) !important; }
.theme-dark .tasking-form-card .tfc-mention-panel {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-form-card .tfc-mention-option-name { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-form-card .tfc-mention-option:hover,
.theme-dark .tasking-form-card .tfc-mention-option.active { background-color: var(--dk-bg-input) !important; }

.theme-dark .tasking-form-card .tfc-pending-file {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .tasking-form-card .tfc-pending-name { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-form-card .tfc-pending-meta { color: var(--dk-text-muted) !important; }
.theme-dark .tasking-form-card .tfc-mobile-footer {
   background-color: var(--dk-bg-surface) !important;
   border-top-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-form-card .tfc-sheet-handle span { background-color: var(--dk-border-subtle) !important; }
.theme-dark .tasking-form-card .tfc-sheet-trigger {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-form-card .tfc-sheet-trigger-count {
   background-color: var(--dk-color-accent) !important;
   color: #0b1f1e !important;
}
.theme-dark .tasking-form-card .tfc-sheet-trigger.is-open {
   background-color: var(--dk-color-accent) !important;
   border-color: var(--dk-color-accent) !important;
   color: #0b1f1e !important;
}
.theme-dark .tasking-form-card .tfc-sheet-trigger.is-open .tfc-sheet-trigger-count {
   background-color: rgba(11, 31, 30, 0.22) !important;
   color: #0b1f1e !important;
}
.theme-dark .tasking-form-card .tfc-sheet-backdrop { background-color: rgba(0, 0, 0, 0.5) !important; }
.theme-dark .tasking-form-card .tfc-right {
   box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .tfc-header-dropdown-menu {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   box-shadow: 0 10px 30px var(--dk-shadow-md) !important;
}
.theme-dark .tfc-header-dropdown-item:not(.text-danger):not(.danger):not(.text-warning):not(.warning) { color: var(--dk-text-primary) !important; }
.theme-dark .tfc-header-dropdown-item:not(.text-danger):not(.danger):not(.text-warning):not(.warning):hover { background-color: var(--dk-bg-hover-teal) !important; }
.theme-dark .tfc-header-dropdown-item.text-warning:hover,
.theme-dark .tfc-header-dropdown-item.warning:hover {
   background-color: rgba(217, 119, 6, 0.18) !important;
   color: #f59e0b !important;
}
.theme-dark .tfc-header-dropdown-item.text-danger:hover,
.theme-dark .tfc-header-dropdown-item.danger:hover {
   background-color: rgba(239, 68, 68, 0.18) !important;
   color: #f87171 !important;
}

/* Sub-komponen tasking */
.theme-dark .member-input-box {
   background: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .member-input-box:focus-within { border-color: var(--dk-color-accent) !important; }
.theme-dark .member-inline-search-input,
.theme-dark .member-name { color: var(--dk-text-primary) !important; }
.theme-dark .member-chip {
   background: var(--dk-bg-surface-alt) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .btn-chip-remove {
   background: transparent !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .btn-chip-remove:hover { color: #f87171 !important; }
.theme-dark .member-dropdown-loader-more {
   background: var(--dk-bg-surface-alt) !important;
   color: var(--dk-color-accent) !important;
   box-shadow: 0 4px 12px var(--dk-shadow-md) !important;
}

.theme-dark .member-dropdown-menu,
.theme-dark .custom-member-dropdown-menu,
.theme-dark .custom-label-dropdown-menu,
.theme-dark .custom-checklist-dropdown-menu,
.theme-dark .custom-attachment-dropdown-menu,
.theme-dark .tasking-form-card .tfc-item-popup,
.theme-dark .tfc-item-popup-inner {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 10px 30px var(--dk-shadow-md) !important;
}
.theme-dark .tasking-form-card .tfc-item-popup-title,
.theme-dark .tfc-item-popup-inner .tfc-item-popup-title { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-form-card .tfc-item-attachment-row,
.theme-dark .tfc-item-popup-inner .tfc-item-attachment-row { border-bottom-color: var(--dk-border-subtle) !important; }
.theme-dark .tasking-form-card .tfc-item-attachment-name,
.theme-dark .tfc-item-popup-inner .tfc-item-attachment-name { color: var(--dk-text-primary) !important; }
.theme-dark .member-dropdown-search-box { border-bottom-color: var(--dk-border-subtle) !important; }
.theme-dark .member-dropdown-search-input {
   background: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .member-dropdown-menu .member-dropdown-item:hover,
.theme-dark .member-dropdown-item:hover,
.theme-dark .label-dropdown-item:hover,
.theme-dark .create-new-item:hover { background-color: var(--dk-bg-hover-teal) !important; }
.theme-dark .member-dropdown-menu .member-dropdown-name,
.theme-dark .member-dropdown-name,
.theme-dark .member-dropdown-jabatan { color: var(--dk-text-muted) !important; }

.theme-dark .member-checkbox-round,
.theme-dark .label-checkbox-round {
   background: var(--dk-bg-input) !important;
   border-color: var(--dk-border-strong) !important;
}

/* Member picker — overlay loading/empty + bottom-sheet mobile.
   Backdrop drawer numpang spread box-shadow, jadi rule .member-dropdown-menu
   di atas (box-shadow !important) wajib di-override khusus drawer. */
.theme-dark .member-dropdown-menu.member-dropdown-drawer {
   box-shadow: 0 -4px 13px var(--dk-shadow-md), 0 0 0 100vmax rgba(0, 0, 0, 0) !important;
}
.theme-dark .member-dropdown-menu.member-dropdown-drawer.is-open {
   box-shadow: 0 -4px 13px var(--dk-shadow-md), 0 0 0 100vmax rgba(0, 0, 0, 0.6) !important;
}
.theme-dark .member-dropdown-overlay {
   background: var(--dk-bg-surface) !important;
}
.theme-dark .member-dropdown-empty { color: var(--dk-text-muted) !important; }
.theme-dark .member-dropdown-empty .lucide,
.theme-dark .member-dropdown-empty .lucide-14 {
   color: var(--dk-color-accent) !important;
   stroke: var(--dk-color-accent) !important;
}
.theme-dark .member-drawer-header { border-bottom-color: var(--dk-border-subtle) !important; }
.theme-dark .member-drawer-title { color: var(--dk-text-primary) !important; }
.theme-dark .member-drawer-count {
   background: var(--dk-bg-hover-teal) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .member-drawer-close {
   background: transparent !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .member-drawer-close .lucide,
.theme-dark .member-drawer-close .lucide-16 {
   color: var(--dk-text-muted) !important;
   stroke: var(--dk-text-muted) !important;
}
.theme-dark .member-drawer-search-input {
   background: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .member-drawer-search-input:focus { outline-color: var(--dk-color-accent) !important; }
.theme-dark .member-drawer-search-input::placeholder { color: var(--dk-text-muted) !important; }

.theme-dark .tfc-checklist-group,
.theme-dark .tfc-checklist-item {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tfc-checklist-item:hover { border-color: var(--dk-color-accent) !important; }
.theme-dark .tfc-checklist-group-title,
.theme-dark .tfc-checklist-input,
.theme-dark .tfc-new-group-input:focus {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .tfc-checklist-add-group-row {
   border-color: var(--dk-border-base) !important;
   background-color: var(--dk-bg-surface) !important;
}
.theme-dark .tfc-checklist-prog-bar  { background: var(--dk-bg-input) !important; }
.theme-dark .tfc-checklist-prog-fill { background: var(--dk-color-accent) !important; }

.theme-dark .tfc-btn-ghost,
.theme-dark .tfc-add-checklist-btn {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .tfc-btn-ghost:hover,
.theme-dark .tfc-add-checklist-btn:hover {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .checklist-dropdown-footer,
.theme-dark .label-dropdown-footer,
.theme-dark .label-chips-selected {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
}

.theme-dark .tfc-pill,
.theme-dark .tfc-label-picker-wrapper .tfc-pill,
.theme-dark .tfc-member-picker-wrapper .tfc-pill,
.theme-dark .tfc-attachment-picker-wrapper .tfc-pill {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tfc-pill:hover,
.theme-dark .tfc-pill:active,
.theme-dark .tfc-pill:focus,
.theme-dark .tfc-pill:focus-visible,
.theme-dark .tfc-pill.is-active,
.theme-dark .tasking-form-card .tfc-pill:active,
.theme-dark .tasking-form-card .tfc-pill.is-active,
.theme-dark .tasking-form-card .tfc-pill:focus,
.theme-dark .tasking-form-card .tfc-pill:focus-visible {
   background-color: rgba(74, 158, 156, 0.2) !important;
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
   outline: none !important;
   box-shadow: none !important;
}

.theme-dark .label-dropdown-search-input-wrapper,
.theme-dark .label-edit-input {
   background: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .label-search-input-field { color: var(--dk-text-primary) !important; }
.theme-dark .label-dropdown-item {
   border-bottom-color: var(--dk-border-subtle) !important;
   background-color: transparent !important;
}
.theme-dark .label-dropdown-item.is-selected { background-color: rgba(74, 158, 156, 0.15) !important; }
.theme-dark .btn-label-edit,
.theme-dark .btn-label-save { color: var(--dk-text-muted) !important; }
.theme-dark .btn-label-edit:hover,
.theme-dark .btn-label-save:hover {
   color: var(--dk-color-accent) !important;
   background-color: var(--dk-bg-input) !important;
}
.theme-dark .label-selected-chip {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark .tasking-task-deadline.normal,
.theme-dark .tasking-task-deadline.ongoing { color: var(--dk-text-primary) !important; }
.theme-dark .tfc-deadline-chip,
.theme-dark .tfc-pop-deadline-input {
   background: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .tfc-deadline-chip:hover { background: var(--dk-bg-surface-alt) !important; }

.theme-dark .tfc-tautan-group,
.theme-dark .tfc-tautan-item,
.theme-dark .tfc-attachment-card {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tfc-tautan-item:hover,
.theme-dark .tfc-attachment-card:hover {
   background: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .tfc-attachment-icon,
.theme-dark .tfc-tautan-icon {
   background: var(--dk-bg-input) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tfc-attachment-name { color: var(--dk-color-accent) !important; }
.theme-dark .tfc-attachment-meta { color: var(--dk-text-muted) !important; }
.theme-dark .tfc-tautan-title    { color: var(--dk-text-primary) !important; }
.theme-dark .tfc-tautan-url      { color: var(--dk-text-muted) !important; }

.theme-dark .tfc-attachment-action-download,
.theme-dark .tfc-attachment-action-delete,
.theme-dark .tfc-tautan-action-btn {
   background: var(--dk-bg-input) !important;
   color: var(--dk-text-muted) !important;
}
.theme-dark .tfc-attachment-action-download:hover,
.theme-dark .tfc-attachment-action-delete:hover,
.theme-dark .tfc-tautan-action-btn:hover {
   background: var(--dk-bg-surface-alt) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tfc-checklist-del {
   color: var(--dk-color-danger) !important;
   background: transparent !important;
}
.theme-dark .tfc-checklist-del:hover {
   color: var(--dk-text-white) !important;
   background: var(--dk-color-danger) !important;
}
.theme-dark .tfc-checklist-edit {
   color: var(--dk-text-secondary) !important;
   background: transparent !important;
}
.theme-dark .tfc-checklist-edit:hover {
   color: var(--dk-text-primary) !important;
   background: var(--dk-bg-surface-alt) !important;
}

/* Item action icon-btn (deadline/member/attachment) — keep identity color, dark-safe hover bg. */
.theme-dark .tasking-form-card .tfc-item-action-btn.act-deadline:hover,
.theme-dark .tasking-form-card .tfc-item-action-wrapper.is-active .tfc-item-action-btn.act-deadline {
   background: rgba(59, 130, 246, 0.18) !important;
   color: #60a5fa !important;
}
.theme-dark .tasking-form-card .tfc-item-action-btn.act-member:hover,
.theme-dark .tasking-form-card .tfc-item-action-wrapper.is-active .tfc-item-action-btn.act-member {
   background: rgba(16, 185, 129, 0.18) !important;
   color: #34d399 !important;
}
.theme-dark .tasking-form-card .tfc-item-action-btn.act-attachment:hover,
.theme-dark .tasking-form-card .tfc-item-action-wrapper.is-active .tfc-item-action-btn.act-attachment {
   background: rgba(139, 92, 246, 0.18) !important;
   color: #a78bfa !important;
}
.theme-dark .tasking-form-card .tfc-item-action-btn.act-deadline    { color: #60a5fa !important; }
.theme-dark .tasking-form-card .tfc-item-action-btn.act-member      { color: #34d399 !important; }
.theme-dark .tasking-form-card .tfc-item-action-btn.act-attachment  { color: #a78bfa !important; }

.theme-dark .tfc-upload-dropzone-box {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .tfc-upload-dropzone-box:hover {
   background-color: var(--dk-bg-dark) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .tfc-upload-dropzone-box .tfc-upload-title    { color: var(--dk-text-primary) !important; }
.theme-dark .tfc-upload-dropzone-box .tfc-upload-subtitle { color: var(--dk-text-muted) !important; }
.theme-dark .tfc-upload-dropzone-box .tfc-upload-btn-pill {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .tfc-upload-dropzone-box .tfc-upload-btn-pill:hover {
   background-color: var(--dk-bg-dark) !important;
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
}

.theme-dark .tasking-projek .tasking-empty-hero,
.theme-dark .tasking-projek .tasking-feature-card {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tasking-projek .tasking-empty-hero-title,
.theme-dark .tasking-projek .tasking-feature-title { color: var(--dk-text-primary) !important; }
.theme-dark .tasking-projek .tasking-empty-hero-desc,
.theme-dark .tasking-projek .tasking-feature-desc { color: var(--dk-text-secondary) !important; }
.theme-dark .tasking-projek .tasking-empty-hero-icon,
.theme-dark .tasking-projek .tasking-feature-icon {
   background: var(--dk-bg-input) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tasking-projek .tasking-feature-card:hover {
   border-color: var(--dk-color-accent) !important;
   background: var(--dk-bg-surface-alt) !important;
}

/* Toggle-done bulat di form card — light default putih/border terang */
.theme-dark .tasking-form-card .tfc-check {
   background: var(--dk-bg-input) !important;
   border-color: var(--dk-border-strong) !important;
}
.theme-dark .tasking-form-card .tfc-check:hover { border-color: var(--dk-color-accent) !important; }
.theme-dark .tasking-form-card .tfc-check.is-done {
   background: var(--dk-color-accent) !important;
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-bg-darkest) !important;
}

/* Panel arsip (dropdown task diarsipkan) — dipakai index projek & index task */
.theme-dark .tasking-archived-panel,
.theme-dark .tasking-projek.tasking-archived-panel {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-archived-panel .tasking-archived-panel-title {
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
}
.theme-dark .tasking-archived-panel .tasking-archived-empty { color: var(--dk-text-muted) !important; }

/* Body-panel wrapper (bp-panel) — bg #fff default nembus samar di pinggir */
.theme-dark.template-v2 .bp-panel {
   background: var(--dk-bg-surface) !important;
}

/* ============================================================
   20. FEATURE MODULES (dashboard v2, t_exam, satusehat, login)
   ============================================================ */

/* V2 Dashboard */
.theme-dark .welcome-card {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .welcome-logo { background-color: var(--dk-bg-surface) !important; }
.theme-dark .welcome-shortcuts-title { color: var(--dk-text-primary) !important; }
.theme-dark .welcome-shortcuts-sub,
.theme-dark .welcome-shortcut-parent { color: var(--dk-text-muted) !important; }
.theme-dark .welcome-shortcut {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .welcome-shortcut:hover {
   background-color: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .welcome-shortcut-icon {
   background-color: var(--dk-bg-teal-dim) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .welcome-shortcut-label { color: var(--dk-text-primary) !important; }
.theme-dark .welcome-shortcut-arrow { color: var(--dk-text-muted) !important; }
.theme-dark .welcome-shortcut:hover .welcome-shortcut-arrow { color: var(--dk-color-accent) !important; }

.theme-dark .v2-subtabs { background-color: var(--dk-bg-darkest) !important; }
.theme-dark .v2-subtab {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-secondary) !important;
}
.theme-dark .v2-subtab:hover,
.theme-dark .v2-subtab-active {
   background-color: var(--dk-color-primary) !important;
   border-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}

.theme-dark .v2-card {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .v2-card-title { color: var(--dk-text-primary) !important; }
.theme-dark .v2-legend-item { color: var(--dk-text-secondary) !important; }
.theme-dark .v2-compare-label { color: var(--dk-color-accent) !important; }
.theme-dark .v2-divider,
.theme-dark .wrapper-header { border-color: var(--dk-border-subtle) !important; }
.theme-dark .box-dashboard { color: var(--dk-text-muted) !important; }
.theme-dark .box-dashboard.tab-active,
.theme-dark .tab-active {
   color: var(--dk-color-accent) !important;
   border-bottom-color: var(--dk-color-accent) !important;
}
.theme-dark .dashboard-empty-chart p { color: var(--dk-text-muted) !important; }
.theme-dark .dashboard-empty-chart i { color: var(--dk-text-disabled) !important; }
.theme-dark .v2-fo-tbl { color: var(--dk-text-primary) !important; }
.theme-dark .v2-fo-tbl tbody td { border-bottom-color: var(--dk-border-faint) !important; }
.theme-dark .v2-fo-pct-val { color: var(--dk-text-primary) !important; }
.theme-dark .v2-delta-flat {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-muted) !important;
}

/* t_exam listing */
.theme-dark .annual_exam {
   --primary:        var(--dk-color-accent);
   --primary-light:  rgba(95, 184, 181, 0.15);
   --text-main:      var(--dk-text-primary);
   --text-muted:     var(--dk-text-muted);
   --bg-light:       var(--dk-bg-dark);
   --shadow-soft:    0 8px 30px rgba(0, 0, 0, 0.4);
   --shadow-hover:   0 15px 45px rgba(0, 0, 0, 0.5);
   background: var(--dk-bg-dark) !important;
}
.theme-dark .annual_exam .card-exam {
   background: var(--dk-bg-surface) !important;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
.theme-dark .annual_exam .header-card {
   background: linear-gradient(135deg, rgba(74, 158, 156, 0.05) 0%, rgba(74, 158, 156, 0.12) 100%) !important;
   border-bottom-color: var(--dk-border-subtle) !important;
}
.theme-dark .annual_exam .header-card h2 { color: var(--dk-color-accent) !important; }
.theme-dark .annual_exam .label-roles {
   background: rgba(74, 158, 156, 0.15) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .annual_exam .label-roles:hover {
   background: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .annual_exam .waktu { background: var(--dk-bg-dark) !important; }
.theme-dark .annual_exam .waktu h3 { color: var(--dk-text-muted) !important; }
.theme-dark .annual_exam .waktu-item i { color: var(--dk-color-accent) !important; }
.theme-dark .annual_exam .waktu p { color: var(--dk-text-primary) !important; }
.theme-dark .annual_exam .button-ujian-container {
   background: var(--dk-bg-surface) !important;
   border-top-color: var(--dk-border-subtle) !important;
}
.theme-dark .annual_exam .button-outline {
   background: transparent !important;
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .annual_exam .button-outline:hover { background: rgba(74, 158, 156, 0.15) !important; }
.theme-dark .annual_exam .card-exam.finished::before { background: var(--dk-text-muted) !important; }

.theme-dark .modal-body .waktu[style*="#f8f9fa"],
.theme-dark .modal-body [style*="background-color: #f8f9fa"] {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .modal-body .waktu h6,
.theme-dark .modal-body .waktu p  { color: var(--dk-text-primary) !important; }
.theme-dark .modal-body .waktu .small { color: var(--dk-text-secondary) !important; }

/* Exam sheet */
.theme-dark .exam_sheet .card {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
}
.theme-dark .exam_sheet .card-body { background-color: var(--dk-bg-surface) !important; }
.theme-dark .exam_sheet .text-header { color: var(--dk-color-accent) !important; }
.theme-dark .exam_sheet .text-pengerjaan { color: var(--dk-text-secondary) !important; }
.theme-dark .exam_sheet .text-pengerjaan span { color: var(--dk-color-accent) !important; }
.theme-dark .exam_sheet .custom-hr { border-color: var(--dk-border-base) !important; }
.theme-dark .exam_sheet .question {
   border-color: var(--dk-color-primary) !important;
   background-color: var(--dk-bg-surface-alt) !important;
}
.theme-dark .exam_sheet .question-text,
.theme-dark .exam_sheet .question-text * { color: var(--dk-text-primary) !important; }
.theme-dark .exam_sheet .question.right-question {
   background-color: rgba(37, 114, 96, 0.18) !important;
   border-color: #4a9e9c !important;
}
.theme-dark .exam_sheet .question.wrong-question {
   background-color: rgba(228, 33, 33, 0.12) !important;
   border-color: #e42121 !important;
}
.theme-dark .exam_sheet label {
   border-color: var(--dk-border-base) !important;
   color: var(--dk-text-primary) !important;
   background-color: var(--dk-bg-surface) !important;
}
.theme-dark .exam_sheet label:hover { background-color: var(--dk-bg-dark) !important; }
.theme-dark .exam_sheet label:has(input[type="radio"]:checked) {
   border-color: var(--dk-color-accent) !important;
   background-color: rgba(74, 158, 156, 0.1) !important;
}
.theme-dark .exam_sheet label.right-answer,
.theme-dark .exam_sheet label.right-answer-blurred {
   background-color: rgba(37, 114, 96, 0.2) !important;
   border-color: #4a9e9c !important;
}
.theme-dark .exam_sheet label.wrong-answer {
   background-color: rgba(228, 33, 33, 0.15) !important;
   border-color: #e42121 !important;
}
.theme-dark .exam_sheet input[type="radio"]:after {
   background-color: var(--dk-bg-input) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark .exam_sheet .question.right-question input[type="radio"]:after { background-color: rgba(37, 114, 96, 0.3) !important; }
.theme-dark .exam_sheet .question.wrong-question input[type="radio"]:after { background-color: rgba(228, 33, 33, 0.2) !important; }
.theme-dark .exam_sheet .soal,
.theme-dark .exam_sheet .jawaban { color: var(--dk-text-secondary) !important; }

/* SatuSehat */
.theme-dark .satusehat-stat-card {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   box-shadow: 0 1px 4px var(--dk-shadow-sm) !important;
   border: 1px solid var(--dk-border-base) !important;
}
.theme-dark .satusehat-stat-card .stat-label { color: var(--dk-text-muted) !important; }
.theme-dark .tab-satusehat .tab-content,
.theme-dark .tab-satusehat .nav-tabs {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .tab-satusehat .nav-link { color: var(--dk-text-secondary) !important; }
.theme-dark .tab-satusehat .nav-pills .nav-link.active {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .satusehat-table tr.row-selected td,
.theme-dark .table tr.row-selected td { background-color: rgba(74, 158, 156, 0.15) !important; }

.theme-dark .ss-job-banner {
   background-color: rgba(52, 152, 219, 0.15) !important;
   color: var(--dk-text-primary) !important;
   border-left-color: #3498db !important;
}
.theme-dark .ss-job-banner.error {
   background-color: rgba(231, 76, 60, 0.15) !important;
   border-left-color: #e74c3c !important;
}
.theme-dark .ss-job-banner.done {
   background-color: rgba(39, 174, 96, 0.15) !important;
   border-left-color: #27ae60 !important;
}

.theme-dark .modal-satusehat-config [style*="border:1px solid #E8EAF0"],
.theme-dark .modal-satusehat-config [style*="border: 1px solid #E8EAF0"] {
   background-color: var(--dk-bg-dark) !important;
   border-color: var(--dk-border-base) !important;
}
.theme-dark .modal-satusehat-config [style*="color:#3E3F44"],
.theme-dark .modal-satusehat-config [style*="color: #3E3F44"] { color: var(--dk-text-primary) !important; }
.theme-dark code[style*="background:#F0FAF9"],
.theme-dark code[style*="background: #F0FAF9"] {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-color-accent) !important;
}
.theme-dark .tab-satusehat table thead,
.theme-dark .tab-satusehat table thead th,
.theme-dark .tab-satusehat table thead.bg-hayyu-grey-new,
.theme-dark .tab-satusehat table thead.bg-hayyu-grey-new th {
   background-color: var(--dk-bg-thead) !important;
   color: var(--dk-thead-text) !important;
}
.theme-dark table small[style*="color:#555"],
.theme-dark table small[style*="color: #555"],
.theme-dark .table small[style*="color:#555"],
.theme-dark .table small[style*="color: #555"] { color: var(--dk-text-secondary) !important; }
.theme-dark table small[style*="color:#9597A3"],
.theme-dark table small[style*="color: #9597A3"],
.theme-dark .table small[style*="color:#9597A3"],
.theme-dark .table small[style*="color: #9597A3"] { color: var(--dk-text-muted) !important; }

/* Login */
.theme-dark .login .login-form {
   background-color: var(--dk-bg-darkest) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .login .login-form .login-form-content .card {
   background-color: var(--dk-bg-surface) !important;
   border: 1px solid var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .login .login-form .login-form-content .title h3 { color: var(--dk-text-primary) !important; }
.theme-dark .login .login-form .login-form-content .title p,
.theme-dark .login .login-form .login-form-content .form-group label { color: var(--dk-text-secondary) !important; }
.theme-dark .login .login-form .login-form-content .form-group input {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border: 1px solid var(--dk-border-base) !important;
}
.theme-dark .login .login-form .login-form-content .form-group input:focus {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-primary) !important;
   border-color: var(--dk-focus-border) !important;
   box-shadow: 0 0 0 3px var(--dk-focus-shadow) !important;
}
.theme-dark .login .login-form .login-form-content .login-button {
   background-color: var(--dk-color-primary) !important;
   border-color: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .login .login-form .login-form-content .login-button:hover {
   background-color: var(--dk-color-primary-darker) !important;
   border-color: var(--dk-color-primary-darker) !important;
}
.theme-dark .login .footer { color: var(--dk-text-muted) !important; }
.theme-dark .login .login-vector { display: none !important; }

/* Vector & brand assets — never invert filter */
.login-vector,
.login-image,
.persona,
.logo,
.img-brand,
img[src*="vector"] {
   filter: none !important;
   opacity: 1 !important;
   mix-blend-mode: normal !important;
}

/* Panel headings hayyu variants */
.theme-dark .panel-heading.bg-hayyu-hijau-new,
.theme-dark .panel-heading.bg-hayyu-grey-new,
.theme-dark .bg-hayyu-hijau-new {
   background-color: var(--dk-bg-thead) !important;
   color: var(--dk-text-white) !important;
}
.theme-dark .panel-heading.bg-hayyu-hijau-new .panel-title,
.theme-dark .panel-heading.bg-hayyu-grey-new .panel-title,
.theme-dark .bg-hayyu-hijau-new .panel-title { color: var(--dk-text-white) !important; }

/* ============================================================
   21. UTILITIES / HARDCODED INLINE OVERRIDES
   ============================================================ */
.theme-dark .bg-white {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
}
.theme-dark .bg-light {
   background-color: var(--dk-bg-surface-alt) !important;
   color: var(--dk-text-primary) !important;
}

.theme-dark [style*="background-color: silver"],
.theme-dark [style*="background-color:silver"] {
   background-color: var(--dk-bg-input) !important;
   color: var(--dk-text-secondary) !important;
   border: 1px dashed var(--dk-border-base) !important;
}
.theme-dark [style*="background-color: silver"]:hover,
.theme-dark [style*="background-color:silver"]:hover {
   background-color: var(--dk-bg-dark) !important;
   color: var(--dk-color-accent) !important;
   border-color: var(--dk-color-accent) !important;
}
.theme-dark [style*="background-color: silver"] .fa,
.theme-dark [style*="background-color:silver"] .fa { color: var(--dk-text-muted) !important; }
.theme-dark [style*="background-color: silver"]:hover .fa,
.theme-dark [style*="background-color:silver"]:hover .fa { color: var(--dk-color-accent) !important; }

.theme-dark .button-radio i.fa-check[style*="color: #006462"],
.theme-dark .button-radio i.fa-check[style*="color:#006462"] { color: var(--dk-color-accent) !important; }

/* Page loading state (lottie) */
body.theme-dark .page-loading-title { color: var(--dk-text-primary); }
body.theme-dark .page-loading-sub { color: var(--dk-text-muted); }

/* Kode booking di header modal detail antrian Hayyu Home — base #101010 (css/hayyuHome/index.css). */
.theme-dark .hh-modal-kode {
    color: #ffffff !important;
}

/* Link detail pasien di tabel — base #006664 (css/custom-v2.css) kontras rendah di dark. */
.theme-dark .pasien-detail-link {
    color: var(--dk-color-accent) !important;
}
.theme-dark .pasien-detail-link:hover,
.theme-dark .pasien-detail-link:focus {
    color: #9fdedc !important;
}

/* ============================================================
   HAYYU HOME — Antrian + Detail page dark override.
   Source card hardcode #fff di css/hayyuHome/_*.css (bundle
   js/dist/hayyuhome.bundle.css). Semua card/surface/text/border
   di-remap ke token --dk-*. Scope: body.theme-dark.
   ============================================================ */

/* -------- Card utama (surface) -------- */
body.theme-dark .hh-panel-card,
body.theme-dark .hh-side-card,
body.theme-dark .hhd-card,
body.theme-dark .hh-page-header {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 1px 3px var(--dk-shadow-sm) !important;
}
/* Mobile: hh-panel-card unwrap jadi transparent (jangan override balik jadi surface) */
@media (max-width: 767.98px) {
   body.theme-dark .hh-panel-card { background: transparent !important; border: none !important; box-shadow: none !important; }
   body.theme-dark .hh-filter-row {
      background: var(--dk-bg-surface) !important;
      border-color: var(--dk-border-subtle) !important;
      box-shadow: 0 1px 3px var(--dk-shadow-sm) !important;
   }
}

/* -------- Inner surface (booking/panel/feedback/session) -------- */
body.theme-dark .hh-detail-booking,
body.theme-dark .hh-detail-panel,
body.theme-dark .hh-detail-fotos,
body.theme-dark .hh-detail-feedback,
body.theme-dark .hh-assign-info,
body.theme-dark .hh-detail-session,
body.theme-dark .hh-audit-item,
body.theme-dark .hh-empty-note,
body.theme-dark .hh-detail-item {
   background: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-subtle) !important;
}
body.theme-dark .hh-detail-session.is-collapsed .hh-detail-session-head,
body.theme-dark .hh-detail-session-head:hover { background: var(--dk-bg-item-multi) !important; }
body.theme-dark .hh-audit-item { border-left-color: var(--dk-border-normal) !important; }

/* -------- Queue card + hover -------- */
body.theme-dark .hh-queue-card {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
}
body.theme-dark .hh-queue-card:hover {
   background: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-solid) !important;
   box-shadow: 0 4px 14px var(--dk-shadow-md) !important;
}

/* -------- Segmented / icon buttons (bg putih) -------- */
body.theme-dark .hh-view-toggle-btn,
body.theme-dark .hh-icon-action,
body.theme-dark .hh-back-btn {
   background: var(--dk-bg-input) !important;
   color: var(--dk-text-secondary) !important;
   border-color: var(--dk-border-base) !important;
}
body.theme-dark .hh-view-toggle-btn.is-active {
   background: var(--dk-color-primary) !important;
   color: var(--dk-text-white) !important;
   border-color: var(--dk-color-primary) !important;
}
body.theme-dark .hh-status-list-item { background: var(--dk-bg-surface-alt) !important; color: var(--dk-text-secondary) !important; }
body.theme-dark .hh-status-list-item:hover { background: var(--dk-bg-hover-teal) !important; border-color: var(--dk-border-base) !important; }
body.theme-dark .hh-status-list-item.is-active { background: var(--dk-bg-teal-dim) !important; border-color: var(--dk-color-primary) !important; color: var(--dk-color-accent) !important; }
body.theme-dark .hh-status-list-count { background: var(--dk-bg-input) !important; color: var(--dk-text-secondary) !important; }

/* -------- Filter popover container (bg putih dari .popover bootstrap) -------- */
body.theme-dark .popover.hh-filter-popover {
   background-color: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   box-shadow: 0 8px 24px var(--dk-shadow-md) !important;
}
body.theme-dark .popover.hh-filter-popover .popover-body,
body.theme-dark .popover.hh-filter-popover .uib-popover-content {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
}
body.theme-dark .hh-filter-popover-title {
   color: var(--dk-text-primary) !important;
   border-bottom-color: var(--dk-border-base) !important;
}
body.theme-dark .hh-filter-popover-group > label { color: var(--dk-text-muted) !important; }
body.theme-dark .hh-filter-popover-actions { border-top-color: var(--dk-border-base) !important; }

/* -------- Inline table -------- */
body.theme-dark .hh-inline-table {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
}
body.theme-dark .hh-inline-table thead { background: var(--dk-bg-thead) !important; }
body.theme-dark .hh-inline-table thead th { color: var(--dk-thead-text) !important; }
body.theme-dark .hh-inline-table tbody td { border-top-color: var(--dk-border-subtle) !important; }
body.theme-dark .hh-inline-table tbody tr.is-unpaid td { background: var(--dk-bg-teal-dim) !important; }
body.theme-dark .hh-inline-table tfoot td { background: var(--dk-bg-surface-alt) !important; color: var(--dk-color-accent) !important; border-top-color: var(--dk-border-subtle) !important; }
body.theme-dark .hh-inline-table input[disabled],
body.theme-dark .hh-inline-table select[disabled] { background: var(--dk-bg-input) !important; color: var(--dk-text-muted) !important; }

/* -------- Feedback channel cards (modal) -------- */
body.theme-dark .hayyu-home-fb-card {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-subtle) !important;
   color: var(--dk-text-primary) !important;
}
body.theme-dark .hayyu-home-fb-card:hover:not(:disabled) { background: var(--dk-bg-surface-alt) !important; }

/* -------- Teal-tinted inner blocks (alamat/loc/refetch/other/feedback filled) -------- */
body.theme-dark .hh-side-loc-block,
body.theme-dark .hh-alamat-block,
body.theme-dark .hh-feedback-filled,
body.theme-dark .hh-other-panel,
body.theme-dark .hh-refetch-bar,
body.theme-dark .hh-session-jadwal {
   background: var(--dk-bg-teal-dim) !important;
   border-color: var(--dk-border-normal) !important;
}
body.theme-dark .hh-other-panel-head { background: var(--dk-bg-teal-preview) !important; }

/* -------- Timeline dot / detail circle (base #fff jadi surface) -------- */
body.theme-dark .hh-timeline-dot,
body.theme-dark .hh-timeline-dot.is-next,
body.theme-dark .hh-detail-timeline-dot,
body.theme-dark .hh-detail-page .hh-timeline-dot {
   background: var(--dk-bg-surface) !important;
   border-color: var(--dk-border-strong) !important;
}
body.theme-dark .hh-timeline::before,
body.theme-dark .hh-detail-page .hh-timeline::before,
body.theme-dark .hh-detail-timeline::before,
body.theme-dark .hh-progress-bar { background: var(--dk-border-subtle) !important; }
/* is-done / is-active tetap warna brand — jangan override */
body.theme-dark .hh-timeline-dot.is-done { background: var(--dk-status-green) !important; border-color: var(--dk-status-green) !important; }
body.theme-dark .hh-detail-page .hh-timeline-step.is-done .hh-timeline-dot,
body.theme-dark .hh-detail-timeline-step.is-done .hh-detail-timeline-dot { background: var(--dk-color-primary) !important; border-color: var(--dk-color-primary) !important; }

/* -------- Text heading + secondary -------- */
body.theme-dark .hh-customer strong,
body.theme-dark .hh-side-value,
body.theme-dark .hh-page-title,
body.theme-dark .hhd-card-title,
body.theme-dark .hh-item-nama,
body.theme-dark .hh-inline-item-nama,
body.theme-dark .hh-booking-value,
body.theme-dark .hh-alamat-penerima,
body.theme-dark .hh-detail-page .hh-timeline-label { color: var(--dk-text-primary) !important; }
body.theme-dark .hh-side-title,
body.theme-dark .hh-side-label,
body.theme-dark .hh-info-text,
body.theme-dark .hhd-card-head,
body.theme-dark .hhd-card-body { color: var(--dk-text-secondary) !important; }
body.theme-dark .hh-refresh-hint,
body.theme-dark .hh-tanggal,
body.theme-dark .hh-booking-label,
body.theme-dark .hh-detail-subheader,
body.theme-dark .hh-audit-time,
body.theme-dark .hh-item-meta { color: var(--dk-text-muted) !important; }
body.theme-dark .hh-address,
body.theme-dark .hh-address-text,
body.theme-dark .hh-time-line,
body.theme-dark .hh-terapis { color: var(--dk-text-secondary) !important; }

/* -------- Fix round 3 -------- */

/* Chip pill solid (base pastel di _alur-8c.css) */
body.theme-dark .hh-chip-pill { border-color: transparent !important; color: var(--dk-text-white) !important; }
body.theme-dark .hh-chip-pill.chip-success { background: var(--dk-status-green) !important; }
body.theme-dark .hh-chip-pill.chip-info    { background: var(--dk-status-teal) !important; }
body.theme-dark .hh-chip-pill.chip-warn    { background: var(--dk-status-gold) !important; }
body.theme-dark .hh-chip-pill.chip-danger  { background: var(--dk-status-red) !important; }
body.theme-dark .hh-chip-pill.chip-neutral { background: var(--dk-status-neutral) !important; }

/* Badge pastel gold/red di inline addon → solid */
body.theme-dark .hh-inline-item-ppn,
body.theme-dark .hh-inline-badge-voucher { background: var(--dk-status-gold) !important; color: var(--dk-text-white) !important; }
body.theme-dark .hh-inline-badge-diskon  { background: var(--dk-status-red) !important; color: var(--dk-text-white) !important; }

/* Border-top putih di summary 8c */
body.theme-dark .hh-line-total,
body.theme-dark .hh-side-8c-charge-group { border-top-color: var(--dk-border-subtle) !important; }

/* Text muted di card (kode/waktu/label empty) */
body.theme-dark .hhd-head-kode,
body.theme-dark .hh-feedback-waktu,
body.theme-dark .hh-foto-empty-label,
body.theme-dark .hh-foto-empty-sub,
body.theme-dark .hh-detail-page .hh-timeline-pending { color: var(--dk-text-muted) !important; }

/* Text teal brand → accent (kontras lebih baik di dark) */
body.theme-dark .hhd-customer-telp,
body.theme-dark .hh-side-actions-title,
body.theme-dark .hh-detail-page .hh-timeline-waktu { color: var(--dk-color-accent) !important; }

/* -------- Border dividers -------- */
body.theme-dark .hh-side-title,
body.theme-dark .hh-side-divider,
body.theme-dark .hh-panel-body,
body.theme-dark .hh-card-actions,
body.theme-dark .hhd-divider,
body.theme-dark .hhd-sec-head,
body.theme-dark .hhd-item { border-color: var(--dk-border-subtle) !important; }
body.theme-dark .hh-side-actions { border-top-color: var(--dk-border-subtle) !important; }
body.theme-dark .hh-page-header { border-bottom-color: var(--dk-border-subtle) !important; }

/* -------- Code chips inside cards -------- */
body.theme-dark .hh-side-value code,
body.theme-dark .hh-audit-line1 code,
body.theme-dark .hh-side-8c-charge-head-row code { background: var(--dk-bg-input) !important; color: var(--dk-text-secondary) !important; border-color: var(--dk-border-base) !important; }

/* -------- Fix round 2 -------- */

/* 8c label + row text terlalu gelap */
body.theme-dark .hh-side-8c-label,
body.theme-dark .hh-side-8c-row,
body.theme-dark .hh-side-8c-catatan { color: var(--dk-text-secondary) !important; }

/* Item row (detail V3) bg putih */
body.theme-dark .hh-item-row {
   background: var(--dk-bg-surface-alt) !important;
   border-color: var(--dk-border-subtle) !important;
}

/* Foto empty — gradient putih jadi surface */
body.theme-dark .hh-foto-empty,
body.theme-dark .hh-foto-empty-all,
body.theme-dark .hh-item-thumb.hh-item-thumb-empty,
body.theme-dark .hh-detail-foto-empty {
   background: var(--dk-bg-item-multi) !important;
   border-color: var(--dk-border-normal) !important;
   color: var(--dk-text-muted) !important;
}

/* Feedback komentar — 2 def: bg #fff (antrian modal) + text #1f2937 (detail V3) */
body.theme-dark .hh-feedback-komentar {
   background: var(--dk-bg-surface-alt) !important;
   color: var(--dk-text-secondary) !important;
   border-left-color: var(--dk-color-primary) !important;
}

/* Skeleton shimmer global (.skeleton di custom-v2.css) — gradient #e8e8e8/#f5f5f5
   putih terang di dark. Samakan dgn .hh-skeleton-card di bawah. Kena semua
   fitur V2 yg pakai .skeleton: tasking, event, hayyu_home, l_financial_report,
   l_regulation, t_release, t_jadwal_dokter. */
body.theme-dark .skeleton {
   background: linear-gradient(90deg, var(--dk-bg-surface) 25%, var(--dk-bg-surface-alt) 50%, var(--dk-bg-surface) 75%) !important;
   background-size: 200% 100% !important;
}

/* Skeleton shimmer — gradient putih jadi dark surface */
body.theme-dark .hh-skeleton-card {
   background: linear-gradient(90deg, var(--dk-bg-surface) 25%, var(--dk-bg-surface-alt) 50%, var(--dk-bg-surface) 75%) !important;
   background-size: 200% 100% !important;
}

/* -------- Pill / badge → SOLID di dark (skip pastel bg + border) --------
   3 varian selector: .hh-status-pill (detail), .hh-tab-status (tab), dan
   base .hh-status-* (antrian card badge, tanpa modifier). Semua solid. */
body.theme-dark .hh-status-pill,
body.theme-dark .hh-tab-status,
body.theme-dark .hh-status-badge {
   border-color: transparent !important;
   color: var(--dk-text-white) !important;
}
/* Family: neutral / gold / teal / orange / amber / cyan / lime / green / red / purple */
body.theme-dark .hh-status-draft            { background: var(--dk-status-neutral) !important; }
body.theme-dark .hh-status-pending,
body.theme-dark .hh-status-pending_payment  { background: var(--dk-status-gold) !important; }
body.theme-dark .hh-status-confirmed        { background: var(--dk-status-teal) !important; }
body.theme-dark .hh-status-on_the_way       { background: var(--dk-status-orange) !important; }
body.theme-dark .hh-status-arrived          { background: var(--dk-status-amber) !important; }
body.theme-dark .hh-status-in_progress      { background: var(--dk-status-cyan) !important; }
body.theme-dark .hh-status-waiting_feedback { background: var(--dk-status-lime) !important; }
body.theme-dark .hh-status-completed        { background: var(--dk-status-green) !important; }
body.theme-dark .hh-status-cancelled        { background: var(--dk-status-red) !important; }
body.theme-dark .hh-status-rescheduled      { background: var(--dk-status-purple) !important; }

/* ============================================================
   intro.js Feature Guide (Panduan) — tooltip default putih tembus
   di dark. Override surface gelap + text terang. Highlight ring
   (helperLayer box-shadow teal) sudah kontras, tak diubah.
   ============================================================ */
body.theme-dark .introjs-tooltip {
   background-color: var(--dk-bg-surface) !important;
   color: var(--dk-text-primary) !important;
   border: 1px solid var(--dk-border-normal) !important;
   box-shadow: 0 8px 24px var(--dk-shadow-md) !important;
}

body.theme-dark .introjs-tooltip .introjs-tooltip-title,
body.theme-dark .introjs-tooltip .introjs-tooltiptext {
   color: var(--dk-text-primary) !important;
}

body.theme-dark .introjs-tooltip .introjs-tooltip-content {
   color: var(--dk-text-secondary) !important;
}

/* bold <strong> di konten tetap terang penuh */
body.theme-dark .introjs-tooltip strong {
   color: var(--dk-text-primary) !important;
}

/* step counter "2 of 5" */
body.theme-dark .introjs-tooltip .introjs-helperNumberLayer {
   color: var(--dk-text-muted) !important;
}

/* tombol close (×) */
body.theme-dark .introjs-tooltip .introjs-skipbutton {
   color: var(--dk-text-muted) !important;
}
body.theme-dark .introjs-tooltip .introjs-skipbutton:hover {
   color: var(--dk-text-primary) !important;
}

/* arrow tooltip → ikut surface gelap (default putih) */
body.theme-dark .introjs-arrow.top { border-bottom-color: var(--dk-bg-surface) !important; }
body.theme-dark .introjs-arrow.bottom { border-top-color: var(--dk-bg-surface) !important; }
body.theme-dark .introjs-arrow.left { border-right-color: var(--dk-bg-surface) !important; }
body.theme-dark .introjs-arrow.right { border-left-color: var(--dk-bg-surface) !important; }

/* bullets nav */
body.theme-dark .introjs-bullets ul li a {
   background: var(--dk-border-normal) !important;
}
body.theme-dark .introjs-bullets ul li a.active {
   background: var(--dk-color-accent) !important;
}

/* prev button outline → accent terang biar kebaca di surface gelap */
body.theme-dark .introjs-tooltip .introjs-tooltipbuttons .introjs-button.introjs-prevbutton,
body.theme-dark .introjs-tooltip .introjs-tooltipbuttons .introjs-button.introjs-prevbutton:hover,
body.theme-dark .introjs-tooltip .introjs-tooltipbuttons .introjs-button.introjs-prevbutton:focus {
   border-color: var(--dk-color-accent) !important;
   color: var(--dk-color-accent) !important;
}