:root {
    --app-bg: #eef3fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f7faff;
    --app-surface-muted: #edf4ff;
    --app-border: #d7e0ee;
    --app-text: #0f172a;
    --app-text-soft: #334155;
    --app-text-muted: #64748b;
    --app-accent: #2563eb;
    --app-accent-strong: #1d4ed8;
    --app-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    --app-sidebar-bg: #1f2937;
    --app-sidebar-strong: #111827;
    --app-row-hover: rgba(37, 99, 235, 0.05);
    --app-row-selected: rgba(37, 99, 235, 0.1);
    --app-row-selected-strong: rgba(37, 99, 235, 0.18);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background: var(--app-bg);
    color: var(--app-text);
}

body.dark-mode {
    --app-bg: #0b1220;
    --app-surface: #111827;
    --app-surface-soft: #172132;
    --app-surface-muted: #0f172a;
    --app-border: #243244;
    --app-text: #e2e8f0;
    --app-text-soft: #cbd5e1;
    --app-text-muted: #94a3b8;
    --app-accent: #60a5fa;
    --app-accent-strong: #3b82f6;
    --app-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
    --app-sidebar-bg: #0f172a;
    --app-sidebar-strong: #020617;
    --app-row-hover: rgba(96, 165, 250, 0.08);
    --app-row-selected: rgba(59, 130, 246, 0.16);
    --app-row-selected-strong: rgba(96, 165, 250, 0.26);

    --surface-bg: #0b1220;
    --surface-card: #111827;
    --surface-dark: #020617;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-light: rgba(148, 163, 184, 0.18);
    --blue-glow: rgba(96, 165, 250, 0.22);

    --surface: #111827;
    --surface-alt: #172132;
    --surf-alt: #172132;
    --bg: #0b1220;
    --bg-main: #0b1220;
    --border: #243244;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --white: #111827;
    --text-dark: #e2e8f0;
    --text-mid: #cbd5e1;
    --text-light: #94a3b8;
    --navy: #0b1220;
    --navy-light: #172132;
    --dark-nav: #0f172a;
    --blue-light: #1e293b;
    --blue-lighter: #0f172a;
    --blue-border: #334155;
    --green: #86efac;
    --green-bg: rgba(34, 197, 94, 0.12);
    --green-border: rgba(34, 197, 94, 0.22);
    --yellow: #fcd34d;
    --yellow-bg: rgba(245, 158, 11, 0.14);
    --yellow-border: rgba(245, 158, 11, 0.24);
    --red: #fca5a5;
    --red-bg: rgba(239, 68, 68, 0.12);
    --red-border: rgba(239, 68, 68, 0.2);
    --warning-bg: rgba(245, 158, 11, 0.14);
    --warning-border: rgba(245, 158, 11, 0.28);
    --warning-text: #fbbf24;
    --pin-bg: rgba(245, 158, 11, 0.14);
    --info-bg: rgba(96, 165, 250, 0.12);
    --info-b: rgba(96, 165, 250, 0.24);
    --d-bg: rgba(239, 68, 68, 0.12);
    --d-b: rgba(239, 68, 68, 0.2);
    --w-bg: rgba(245, 158, 11, 0.14);
    --w-b: rgba(245, 158, 11, 0.24);
    --s-bg: rgba(34, 197, 94, 0.12);
    --s-b: rgba(34, 197, 94, 0.22);
    --grad: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #60a5fa 100%);
    --grad-hero: linear-gradient(135deg, #0f172a 0%, #1d4ed8 52%, #3b82f6 100%);
    --grad-warn: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
    --shadow-lg: 0 22px 46px rgba(2, 6, 23, 0.52);

    --fa-blue: #60a5fa;
    --fa-blue-dark: #2563eb;
    --fa-bg: #0b1220;
    --fa-card: #111827;
    --fa-border: #243244;
    --fa-text: #e2e8f0;
    --fa-muted: #94a3b8;

    --tg-bg: #0b1220;
    --tg-card: #111827;
    --tg-border: #243244;
    --tg-text: #e2e8f0;
    --tg-muted: #94a3b8;
    --tg-primary: #60a5fa;
    --tg-primary-soft: #3b82f6;
    --tg-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);

    --tpl-blue-100: #1e293b;
    --tpl-blue-50: #0f172a;
    --tpl-text-900: #e2e8f0;
    --tpl-text-700: #cbd5e1;
    --tpl-text-500: #94a3b8;
    --tpl-border: #243244;
    --tpl-bg: #172132;

    --ypk-blue: #60a5fa;
    --ypk-blue-dark: #2563eb;
    --ypk-blue-soft: #1e293b;
    --ypk-text: #e2e8f0;
    --ypk-muted: #94a3b8;
    --ypk-border: #243244;
    --ypk-bg: #020617;
    --ypk-card: #111827;
    --ypk-shadow: 0 24px 56px rgba(2, 6, 23, 0.55);
}

body,
body .content-wrapper,
body .main-header.navbar,
body .main-sidebar,
body .card,
body .modal-content,
body .dropdown-menu,
body .form-control,
body .custom-select,
body .input-group-text,
body .table,
body .page-link {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.56);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: var(--app-accent-strong);
    backdrop-filter: blur(2px);
}

body.dark-mode #loading-overlay {
    background: rgba(2, 6, 23, 0.68);
    color: #bfdbfe;
}

.content-wrapper {
    background: var(--app-bg) !important;
    color: var(--app-text);
    min-height: 100vh;
}

.content-header h1,
.content-header .breadcrumb,
.content-header .breadcrumb-item,
.content-header .breadcrumb-item a,
.content-header .breadcrumb-item + .breadcrumb-item::before {
    color: var(--app-text) !important;
}

.main-header.navbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    backdrop-filter: blur(12px);
}

.main-header .nav-link {
    color: var(--app-text-soft) !important;
}

.main-header .nav-link:hover,
.main-header .nav-link:focus {
    color: var(--app-text) !important;
}

.user-chip-nav {
    font-weight: 600;
}

body.dark-mode .main-header.navbar {
    background: rgba(15, 23, 42, 0.92);
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

.main-sidebar {
    background: linear-gradient(180deg, var(--app-sidebar-bg) 0%, var(--app-sidebar-strong) 100%) !important;
}

.main-sidebar .brand-link {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.main-sidebar .brand-text,
.main-sidebar .brand-link,
.main-sidebar .nav-sidebar .nav-link p,
.main-sidebar .nav-sidebar .nav-icon {
    color: rgba(255, 255, 255, 0.86);
}

.main-sidebar .nav-sidebar .nav-link:hover,
.main-sidebar .nav-sidebar .nav-link:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.main-sidebar .nav-sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(37, 99, 235, 0.92));
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

body.dark-mode .main-sidebar .nav-sidebar .nav-link.active {
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.34);
}

.theme-switcher-menu {
    min-width: 15rem;
    padding: 0.5rem;
    border-radius: 14px;
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
    background: var(--app-surface);
}

.theme-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    color: var(--app-text-soft);
}

.theme-option:hover,
.theme-option:focus {
    background: var(--app-surface-soft);
    color: var(--app-text);
}

.theme-option.active {
    background: rgba(37, 99, 235, 0.1);
    color: var(--app-text);
    font-weight: 700;
}

.theme-option-main {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.theme-option-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-soft);
    color: var(--app-accent);
}

.theme-option-check {
    opacity: 0;
    color: var(--app-accent);
}

.theme-option.active .theme-option-check {
    opacity: 1;
}

body.dark-mode .theme-option.active {
    background: rgba(96, 165, 250, 0.14);
}

body.dark-mode .card,
body.dark-mode .small-box,
body.dark-mode .info-box,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .table-card,
body.dark-mode .form-card,
body.dark-mode .info-card,
body.dark-mode .import-card,
body.dark-mode .page-wrapper,
body.dark-mode .main-content,
body.dark-mode .document-shell,
body.dark-mode :is(
    .wa-card,
    .wa-device-card,
    .wa-provider-card,
    .wa-message-card,
    .wa-recipient-card,
    .eb-card,
    .eb-stat-card,
    .eb-tips,
    .tpl-panel,
    .tplf-card,
    .emp-panel,
    .emp-manual-card,
    .ypk-panel,
    .ad-card,
    .adl-card,
    .rp-card,
    .an-card,
    .fr-card,
    .fd-card,
    .coa-card,
    .tg-panel,
    .tg-metric,
    .blast-menu-card
) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

body.dark-mode .dropdown-item,
body.dark-mode .dropdown-item-text,
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer {
    color: var(--app-text);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background: var(--app-surface-soft);
    color: var(--app-text);
}

body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode textarea,
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.dark-mode .input-group-text,
body.dark-mode .custom-file-label,
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--app-text-muted) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus,
body.dark-mode textarea:focus,
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
body.dark-mode .select2-container--default.select2-container--focus .select2-selection--single,
body.dark-mode .select2-container--default.select2-container--focus .select2-selection--multiple {
    background: var(--app-surface) !important;
    border-color: rgba(96, 165, 250, 0.42) !important;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.14) !important;
}

body.dark-mode .table,
body.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode .table thead th,
body.dark-mode .table tbody + tbody,
body.dark-mode .table-bordered,
body.dark-mode .table-bordered td,
body.dark-mode .table-bordered th {
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

body.dark-mode .table thead th {
    background: var(--app-surface-soft) !important;
}

body.dark-mode .table-hover tbody tr:hover,
body.dark-mode .table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.08) !important;
}

body.dark-mode :is(
    .table-card table,
    .table-scroll table,
    .table-responsive table,
    .emp-table,
    .rp-table,
    .an-table,
    .tg-table,
    .tpl-table,
    .ypk-table,
    .coa-table
) {
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .table-card table,
    .table-scroll table,
    .table-responsive table,
    .emp-table,
    .rp-table,
    .an-table,
    .tg-table,
    .tpl-table,
    .ypk-table,
    .coa-table
) thead th {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

body.dark-mode :is(
    .table-card table,
    .table-scroll table,
    .table-responsive table,
    .emp-table,
    .rp-table,
    .an-table,
    .tg-table,
    .tpl-table,
    .ypk-table,
    .coa-table
) tbody td {
    background: transparent !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

body.dark-mode :is(
    .table-card table tbody tr:hover,
    .table-scroll table tbody tr:hover,
    .table-responsive table tbody tr:hover,
    .emp-table tbody tr:hover,
    .table.table-hover tbody tr:hover,
    .rp-table tbody tr:hover,
    .an-table tbody tr:hover,
    .tg-table tbody tr:hover,
    .tpl-table tbody tr:hover,
    .ypk-table tbody tr:hover,
    .coa-table tbody tr:hover
) {
    background: var(--app-row-hover) !important;
}

body.dark-mode :is(
    .table-card table tbody tr:hover,
    .table-scroll table tbody tr:hover,
    .table-responsive table tbody tr:hover,
    .emp-table tbody tr:hover,
    .table.table-hover tbody tr:hover,
    .rp-table tbody tr:hover,
    .an-table tbody tr:hover,
    .tg-table tbody tr:hover,
    .tpl-table tbody tr:hover,
    .ypk-table tbody tr:hover,
    .coa-table tbody tr:hover
) td {
    background: var(--app-row-hover) !important;
}

body.dark-mode :is(
    .table-card table tbody tr,
    .table-scroll table tbody tr,
    .table-responsive table tbody tr,
    .emp-table tbody tr,
    .table tbody tr,
    .rp-table tbody tr,
    .an-table tbody tr,
    .tg-table tbody tr,
    .tpl-table tbody tr,
    .ypk-table tbody tr,
    .coa-table tbody tr
):is(.is-selected, .table-active, .selected, .selected-row, .row-selected, .coa-row-selected) {
    background: var(--app-row-selected) !important;
}

body.dark-mode :is(
    .table-card table tbody tr,
    .table-scroll table tbody tr,
    .table-responsive table tbody tr,
    .emp-table tbody tr,
    .table tbody tr,
    .rp-table tbody tr,
    .an-table tbody tr,
    .tg-table tbody tr,
    .tpl-table tbody tr,
    .ypk-table tbody tr,
    .coa-table tbody tr
):is(.is-selected, .table-active, .selected, .selected-row, .row-selected, .coa-row-selected) td {
    background: var(--app-row-selected) !important;
    border-color: rgba(96, 165, 250, 0.16) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .table-card table tbody tr,
    .table-scroll table tbody tr,
    .table-responsive table tbody tr,
    .emp-table tbody tr,
    .table tbody tr,
    .rp-table tbody tr,
    .an-table tbody tr,
    .tg-table tbody tr,
    .tpl-table tbody tr,
    .ypk-table tbody tr,
    .coa-table tbody tr
):is(.is-selected, .table-active, .selected, .selected-row, .row-selected, .coa-row-selected):hover,
body.dark-mode :is(
    .table-card table tbody tr,
    .table-scroll table tbody tr,
    .table-responsive table tbody tr,
    .emp-table tbody tr,
    .table tbody tr,
    .rp-table tbody tr,
    .an-table tbody tr,
    .tg-table tbody tr,
    .tpl-table tbody tr,
    .ypk-table tbody tr,
    .coa-table tbody tr
):is(.is-selected, .table-active, .selected, .selected-row, .row-selected, .coa-row-selected):hover td {
    background: var(--app-row-selected) !important;
}

body.dark-mode .page-link {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode .page-link:hover,
body.dark-mode .page-link:focus {
    background: var(--app-surface-soft) !important;
    color: var(--app-text) !important;
}

body.dark-mode .page-item.active .page-link {
    background: var(--app-accent-strong) !important;
    border-color: var(--app-accent-strong) !important;
    color: #ffffff !important;
}

body.dark-mode .nav-pills .nav-link:not(.active),
body.dark-mode .nav-tabs .nav-link:not(.active) {
    color: var(--app-text-soft);
}

body.dark-mode .nav-tabs,
body.dark-mode .nav-tabs .nav-link,
body.dark-mode hr {
    border-color: var(--app-border) !important;
}

body.dark-mode .alert:not(.swal2-popup),
body.dark-mode .callout {
    background: var(--app-surface-soft);
    border-color: var(--app-border);
    color: var(--app-text);
}

body.dark-mode .swal2-popup {
    background: var(--app-surface);
    color: var(--app-text);
}

body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .fd-card-footer,
    .fr-card-footer,
    .rp-card-footer,
    .rp-card-footer-pagination,
    .an-card-footer,
    .coa-card-head,
    .tg-panel-head,
    .fd-table thead th,
    .fr-table thead th,
    .coa-table th,
    .coa-log-table th,
    .rp-table th,
    .an-table th,
    .inv-table th,
    .sfr-table th,
    .ivd-items-table th,
    .ivf-items-table th,
    .plr-table th
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

body.dark-mode :is(
    .fd-input,
    .fd-select,
    .fr-input,
    .fr-select,
    .fr-table .td-input,
    .fr-table .td-select,
    .coa-input,
    .coa-select,
    .rp-input,
    .rp-select,
    .rp-textarea,
    .an-input,
    .an-select,
    .an-textarea,
    .tg-input,
    .tg-select,
    .dc-search,
    .dc-ta,
    .dc-act-btn,
    .dc-act-sel,
    .dc-file,
    .dc-vn
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .fd-input,
    .fd-select,
    .fr-input,
    .fr-select,
    .fr-table .td-input,
    .fr-table .td-select,
    .coa-input,
    .coa-select,
    .rp-input,
    .rp-select,
    .rp-textarea,
    .an-input,
    .an-select,
    .an-textarea,
    .tg-input,
    .tg-select,
    .dc-search,
    .dc-ta
):focus {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .fd-btn-outline,
    .fr-btn-outline,
    .fr-btn-add,
    .coa-btn-muted,
    .rp-btn-secondary,
    .an-btn-secondary,
    .rp-btn-edit,
    .an-btn-edit,
    .coa-side-num,
    .fd .ico-blue,
    .fd .ico-gray,
    .user-chip .avatar,
    .fr-prefix
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

body.dark-mode :is(
    .fd-btn-outline .fas,
    .fr-btn-outline .fas,
    .fr-btn-add .fas,
    .rp-btn-secondary .fas,
    .an-btn-secondary .fas,
    .rp-btn-edit .fas,
    .an-btn-edit .fas
) {
    color: var(--app-accent) !important;
}

body.dark-mode :is(
    .fd-brand h1,
    .fd-brand p,
    .coa-title,
    .coa-subtitle,
    .coa-side-label,
    .coa-detail-value,
    .coa-log-mini,
    .coa-log-meta,
    .coa-table td,
    .coa-log-table td,
    .rp-hint,
    .an-file-hint,
    .an-check-row .ch-label,
    .an-check-row .ch-sub,
    .tg-panel-note,
    .blast-menu-subtitle,
    .blast-btn small
) {
    color: var(--app-text-muted) !important;
}

body.dark-mode .blast-menu-card {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
}

body.dark-mode .blast-btn {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode .blast-btn strong {
    color: var(--app-text);
}

body.dark-mode .dc-card,
body.dark-mode .dc-main,
body.dark-mode .dc-bub,
body.dark-mode .dc-pin-item,
body.dark-mode .dc-form,
body.dark-mode .dc-photo-link,
body.dark-mode .dc-vn,
body.dark-mode .dc-file,
body.dark-mode .dc-act-btn,
body.dark-mode .dc-act-sel,
body.dark-mode .dc-reply-preview {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode .dc-list {
    background: var(--app-surface-muted) !important;
}

body.dark-mode .dc-pin-box {
    background: rgba(245, 158, 11, 0.12) !important;
    border-bottom-color: rgba(245, 158, 11, 0.18) !important;
}

body.dark-mode .dc-pin-title,
body.dark-mode .dc-pin-doc {
    color: #fbbf24 !important;
}

body.dark-mode .dc-meta strong,
body.dark-mode .dc-pin-text {
    color: var(--app-text) !important;
}

body.dark-mode .dc-pin-meta,
body.dark-mode .dc-time,
body.dark-mode .dc-empty,
body.dark-mode .dc-photo-meta,
body.dark-mode .dc-reply-text,
body.dark-mode .dc-vn span {
    color: var(--app-text-muted) !important;
}

body.dark-mode .dc-act {
    background: rgba(96, 165, 250, 0.08) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
}

body.dark-mode .dc-msg.hl .dc-bub,
body.dark-mode .dc-msg.hl .dc-vn {
    background: rgba(245, 158, 11, 0.16) !important;
}

body.dark-mode .tg-shell {
    background:
        radial-gradient(circle at 92% -8%, rgba(59, 130, 246, 0.12) 0%, transparent 33%),
        radial-gradient(circle at -5% 25%, rgba(37, 99, 235, 0.1) 0%, transparent 40%),
        var(--app-bg) !important;
    color: var(--app-text);
}

body.dark-mode .tg-panel-head {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.1), rgba(59, 130, 246, 0.04)) !important;
}

body.dark-mode .tg-panel-title,
body.dark-mode .tg-action-label,
body.dark-mode .tg-metric .value {
    color: var(--app-text) !important;
}

body.dark-mode .tg-action-card {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
}

body.dark-mode .tg-alert.success {
    border-color: rgba(34, 197, 94, 0.24) !important;
    background: rgba(34, 197, 94, 0.12) !important;
    color: #86efac !important;
}

body.dark-mode .tg-alert.error {
    border-color: rgba(239, 68, 68, 0.24) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
}

body.dark-mode .tg-alert.warn {
    border-color: rgba(245, 158, 11, 0.24) !important;
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fcd34d !important;
}

body.dark-mode :is(
    .wa-qr-img,
    .wa-qr-box,
    .template-preview-box,
    .message-override-item,
    .recipient-item,
    .recipient-db-item,
    .attachment-item,
    .attachment-wrap,
    .selected-templates,
    .chip-list,
    .chip-input-section,
    .device-item,
    .campaign-search-item
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode .message-override-item.mode-template,
body.dark-mode .message-override-item.mode-manual,
body.dark-mode .message-override-item.mode-global {
    background: var(--app-surface-soft) !important;
}

body.dark-mode .message-override-badge.mode-template,
body.dark-mode .message-override-badge.mode-manual,
body.dark-mode .message-override-badge.mode-global {
    color: var(--app-text) !important;
}

body.dark-mode.login-page:not(.ypk-login) {
    background: var(--app-bg);
}

body.dark-mode.ypk-login {
    background:
        radial-gradient(circle at 10% 10%, rgba(29, 78, 216, 0.24), transparent 50%),
        radial-gradient(circle at 90% 15%, rgba(59, 130, 246, 0.16), transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.52), transparent 55%),
        var(--ypk-bg) !important;
    color: var(--ypk-text);
}

body.dark-mode .ypk-login-card {
    background: var(--ypk-card);
    border-color: var(--ypk-border);
    box-shadow: var(--ypk-shadow);
}

body.dark-mode .ypk-login-form h2,
body.dark-mode .ypk-login-form label,
body.dark-mode .ypk-login-footer strong {
    color: var(--ypk-text);
}

body.dark-mode .ypk-login-form p,
body.dark-mode .ypk-login-footer,
body.dark-mode .ypk-login-form .icheck-primary > label {
    color: var(--ypk-muted);
}

body.dark-mode .ypk-login-form .form-control {
    background: var(--app-surface-soft) !important;
    border-color: var(--ypk-border) !important;
    color: var(--ypk-text) !important;
}

body.dark-mode .ypk-login-form .form-control:focus {
    background: var(--ypk-card) !important;
    color: var(--ypk-text) !important;
}

body.dark-mode :is(
    .tpl-btn,
    .tplf-btn,
    .tpl-icon-btn,
    .wa-header-btn,
    .wa-btn,
    .campaign-btn,
    .rp-btn,
    .rp-btn-outline,
    .btn-select-db,
    .device-item,
    .eb-send-btn
):focus,
body.dark-mode :is(
    .tpl-btn,
    .tplf-btn,
    .tpl-icon-btn,
    .wa-header-btn,
    .wa-btn,
    .campaign-btn,
    .rp-btn,
    .rp-btn-outline,
    .btn-select-db,
    .device-item,
    .eb-send-btn
):active {
    box-shadow: 0 0 0 0.18rem rgba(96, 165, 250, 0.16) !important;
}

body.dark-mode :is(.tpl-page, .tplf-page, .wa-page, .wa-manage-page, .eb-wrap, .rp, .page-wrapper) {
    color: var(--app-text);
}

body.dark-mode .ypk-page {
    color: var(--ypk-text) !important;
}

body.dark-mode :is(.page-wrapper, .main-layout) {
    background: transparent !important;
}

body.dark-mode :is(.stat-card, .table-card, .toolbar-area) {
    border-color: var(--app-border) !important;
}

body.dark-mode :is(.ypk-stat, .ypk-toolbar, .ypk-table-wrap) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

body.dark-mode :is(.stat-card, .table-card) {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

body.dark-mode .toolbar-area {
    background: var(--app-surface-soft) !important;
}

body.dark-mode :is(.page-header-text h1, .stat-number) {
    color: var(--app-text) !important;
}

body.dark-mode :is(.page-header-text p, .stat-label, .search-box-wrap svg) {
    color: var(--app-text-muted) !important;
}

body.dark-mode :is(.ypk-label, .ypk-stat-label, .ypk-error-detail, .ypk-empty) {
    color: var(--app-text-muted) !important;
}

body.dark-mode .ypk-name {
    color: var(--app-text) !important;
}

body.dark-mode .ypk-head-sub {
    color: rgba(226, 232, 240, 0.82) !important;
}

body.dark-mode :is(.search-box, .filter-select) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(.ypk-input, .ypk-select) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(.search-box, .filter-select):focus {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(.ypk-input, .ypk-select):focus {
    background: var(--app-surface) !important;
    border-color: rgba(45, 212, 191, 0.32) !important;
    box-shadow: 0 0 0 0.18rem rgba(45, 212, 191, 0.14) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .student-name,
    .summary-value,
    .modal-title,
    .empty-title,
    .step-text strong
) {
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .cell-text,
    .cell-mono,
    .cell-note,
    .summary-label,
    .step-text,
    .empty-subtitle
) {
    color: var(--app-text-muted) !important;
}

body.dark-mode :is(
    .pagination-wrap,
    .modal-header,
    .modal-footer,
    .empty-icon
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
}

body.dark-mode :is(
    .btn-filter,
    .btn-reset,
    .btn-import,
    .btn-delete-selected,
    .btn-modal-cancel
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .btn-filter:hover,
    .btn-reset:hover,
    .btn-import:hover,
    .btn-delete-selected:hover,
    .btn-modal-cancel:hover
) {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
    color: #dbeafe !important;
}

body.dark-mode .btn-delete-all {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}

body.dark-mode .btn-delete-all:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
    color: #fecaca !important;
}

body.dark-mode .btn-edit {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
    color: #93c5fd !important;
}

body.dark-mode .btn-edit:hover {
    background: rgba(96, 165, 250, 0.22) !important;
    border-color: rgba(96, 165, 250, 0.32) !important;
    color: #dbeafe !important;
}

body.dark-mode .btn-delete {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}

body.dark-mode .btn-delete:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
    color: #fecaca !important;
}

body.dark-mode .class-badge {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}

body.dark-mode .badge-valid {
    background: rgba(6, 182, 212, 0.12) !important;
    border-color: rgba(34, 211, 238, 0.22) !important;
    color: #67e8f9 !important;
}

body.dark-mode .ypk-badge.valid {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #bbf7d0 !important;
}

body.dark-mode .ypk-badge.invalid {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #fecaca !important;
}

body.dark-mode .ypk-badge.dataset {
    background: rgba(96, 165, 250, 0.14) !important;
    color: #bfdbfe !important;
}

body.dark-mode .ypk-filter button.ypk-btn {
    background: linear-gradient(135deg, #0d9488, #0f766e) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

body.dark-mode .ypk-filter a.ypk-btn {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode .ypk-import-wrap > a.ypk-btn,
body.dark-mode .ypk-table td > a.ypk-btn {
    background: rgba(20, 184, 166, 0.14) !important;
    border-color: rgba(45, 212, 191, 0.22) !important;
    color: #99f6e4 !important;
}

body.dark-mode .ypk-file-btn {
    background: var(--app-surface) !important;
    border-color: rgba(45, 212, 191, 0.22) !important;
    color: #99f6e4 !important;
}

body.dark-mode .ypk-btn.outline-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}

body.dark-mode .ypk-btn.outline-danger:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fecaca !important;
}

body.dark-mode .ypk-btn.danger,
body.dark-mode .ypk-table td form .ypk-btn {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(248, 113, 113, 0.24) !important;
    color: #fecaca !important;
}

body.dark-mode .ypk-btn.danger:hover,
body.dark-mode .ypk-table td form .ypk-btn:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(248, 113, 113, 0.32) !important;
    color: #ffffff !important;
}

body.dark-mode .emp-page {
    color: var(--app-text) !important;
}

body.dark-mode :is(.emp-stat, .emp-toolbar, .emp-table-wrap) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

body.dark-mode :is(.emp-label, .emp-stat-label, .emp-error-detail, .emp-empty) {
    color: var(--app-text-muted) !important;
}

body.dark-mode .emp-name {
    color: var(--app-text) !important;
}

body.dark-mode .emp-head-sub {
    color: rgba(226, 232, 240, 0.82) !important;
}

body.dark-mode :is(.emp-input, .emp-select) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(.emp-input, .emp-select):focus {
    background: var(--app-surface) !important;
    border-color: rgba(96, 165, 250, 0.32) !important;
    box-shadow: 0 0 0 0.18rem rgba(96, 165, 250, 0.14) !important;
    color: var(--app-text) !important;
}

body.dark-mode .emp-badge.valid {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #bbf7d0 !important;
}

body.dark-mode .emp-badge.invalid {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #fecaca !important;
}

body.dark-mode .emp-filter button.emp-btn {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

body.dark-mode .emp-filter a.emp-btn {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode .emp-import-wrap > a.emp-btn,
body.dark-mode .emp-table td > a.emp-btn {
    background: rgba(96, 165, 250, 0.14) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
    color: #bfdbfe !important;
}

body.dark-mode .emp-file-btn {
    background: var(--app-surface) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
    color: #bfdbfe !important;
}

body.dark-mode .emp-btn.outline-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}

body.dark-mode .emp-btn.outline-danger:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fecaca !important;
}

body.dark-mode .emp-btn.danger,
body.dark-mode .emp-table td form .emp-btn {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(248, 113, 113, 0.24) !important;
    color: #fecaca !important;
}

body.dark-mode .emp-btn.danger:hover,
body.dark-mode .emp-table td form .emp-btn:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(248, 113, 113, 0.32) !important;
    color: #ffffff !important;
}

body.dark-mode :is(
    .inv-filter-card,
    .inv-table-card,
    .ivf-main-card,
    .ivd-main-card,
    .sfr-filter-card,
    .sfr-table-card,
    .ivd-note-form-card
) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow);
}

body.dark-mode :is(
    .inv-filter-header,
    .sfr-filter-header,
    .inv-table-header,
    .sfr-table-header,
    .inv-table-footer,
    .sfr-table-footer,
    .ivf-card-footer,
    .ivd-tabs-wrap
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
}

body.dark-mode :is(
    .inv-item-card,
    .inv-item-amount,
    .inv-empty-state,
    .ivf-meta-banner,
    .ivf-items-wrap,
    .ivd-summary-strip,
    .ivd-sum-item,
    .ivd-meta-col,
    .ivd-items-wrap,
    .ivd-note-item,
    .sfr-summary-card,
    .sfr-alert-empty
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .inv-header-title,
    .inv-table-title,
    .inv-item-title,
    .cell-journal,
    .creator-name,
    .ivf-header-title,
    .ivf-meta-no,
    .ivd-header-title,
    .ivd-sum-value,
    .ivd-meta-val,
    .ivd-note-name,
    .sfr-header-title,
    .sfr-table-title,
    .sc-value,
    .comp-label
) {
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .inv-header-sub,
    .inv-label,
    .inv-item-sub,
    .inv-item-sub .mono,
    .cell-no,
    .cell-date,
    .cell-ref,
    .ivf-header-sub,
    .ivf-meta-sub,
    .ivf-label,
    .ivf-section-label,
    .ivd-header-sub,
    .ivd-sum-label,
    .ivd-sum-sub,
    .ivd-meta-key,
    .ivd-note-role,
    .ivd-note-time,
    .ivd-note-body,
    .cell-muted,
    .empty-row td,
    .sfr-header-sub,
    .sfr-label,
    .badge-version,
    .amount-cell,
    .sfr-empty-text,
    .sfr-alert-empty,
    .inv-empty-text
) {
    color: var(--app-text-muted) !important;
}

body.dark-mode :is(
    .inv-control,
    .ivf-control,
    .ivf-cell-input,
    .ivd-note-textarea,
    .sfr-control
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .inv-control,
    .ivf-control,
    .ivf-cell-input,
    .ivd-note-textarea,
    .sfr-control
):focus {
    background: var(--app-surface) !important;
    border-color: rgba(96, 165, 250, 0.36) !important;
    box-shadow: 0 0 0 0.18rem rgba(96, 165, 250, 0.14) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .inv-control:disabled,
    .ivf-control:disabled,
    .ivf-cell-input:disabled,
    .sfr-control:disabled
) {
    background: rgba(148, 163, 184, 0.08) !important;
    color: var(--app-text-muted) !important;
}

body.dark-mode :is(.inv-table td, .ivf-items-table td, .ivd-items-table td, .sfr-table td) {
    color: var(--app-text-soft) !important;
    border-color: var(--app-border) !important;
}

body.dark-mode :is(.inv-item-card:hover, .ivd-note-item:hover, .sfr-summary-card:hover) {
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.28) !important;
}

body.dark-mode .inv-item-title:hover {
    color: #bfdbfe !important;
}

body.dark-mode .inv-item-menu-btn {
    color: var(--app-text-muted) !important;
}

body.dark-mode .inv-item-menu-btn:hover {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #bfdbfe !important;
}

body.dark-mode :is(.btn-inv-new, .btn-apply, .btn-post, .btn-ivd-post, .btn-ivd-note, .btn-sfr-action) {
    color: #ffffff !important;
}

body.dark-mode :is(.btn-reset, .btn-ivf-back, .btn-draft, .btn-ivd-back) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
}

body.dark-mode :is(.btn-add-row, .btn-act-excel, .btn-ivd-excel) {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.22) !important;
    color: #86efac !important;
}

body.dark-mode :is(.btn-preview, .btn-act-detail) {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
    color: #93c5fd !important;
}

body.dark-mode :is(.btn-ivf-reset, .btn-ivd-reset, .btn-act-edit, .btn-ivd-edit) {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.24) !important;
    color: #fcd34d !important;
}

body.dark-mode :is(.btn-act-delete, .btn-act-pdf, .btn-ivd-delete, .btn-ivd-pdf) {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}

body.dark-mode .sfr-actions .btn-edit {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.24) !important;
    color: #fcd34d !important;
}

body.dark-mode .sfr-actions .btn-delete {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    color: #fecaca !important;
}

body.dark-mode :is(
    .btn-add-row:hover,
    .btn-preview:hover,
    .btn-act-detail:hover,
    .btn-act-excel:hover,
    .btn-ivd-excel:hover,
    .btn-ivf-reset:hover,
    .btn-ivd-reset:hover,
    .btn-act-edit:hover,
    .btn-ivd-edit:hover,
    .btn-act-delete:hover,
    .btn-act-pdf:hover,
    .btn-ivd-delete:hover,
    .btn-ivd-pdf:hover
) {
    color: #ffffff !important;
}

body.dark-mode .ivf-section-label::after {
    background: var(--app-border) !important;
}

body.dark-mode .ivd-tab-link {
    color: var(--app-text-muted) !important;
}

body.dark-mode .ivd-tab-link:hover {
    background: rgba(96, 165, 250, 0.08) !important;
    color: #bfdbfe !important;
}

body.dark-mode .ivd-tab-link.active {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #dbeafe !important;
    border-bottom-color: #60a5fa !important;
}

body.dark-mode .ivd-tab-link .tab-badge {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #93c5fd !important;
}

body.dark-mode .ivd-tab-link.active .tab-badge {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

body.dark-mode :is(.badge-posted, .badge-posted-lg, .badge-posted-ivd, .badge-income, .badge-income-ivd) {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #bbf7d0 !important;
}

body.dark-mode :is(.badge-draft, .badge-draft-lg, .badge-draft-ivd, .badge-type.daily) {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fcd34d !important;
}

body.dark-mode :is(.badge-cancelled, .badge-cancelled-lg, .badge-cancelled-ivd, .badge-expense, .badge-expense-ivd) {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #fecaca !important;
}

body.dark-mode .badge-type.monthly {
    background: rgba(96, 165, 250, 0.14) !important;
    color: #bfdbfe !important;
}

body.dark-mode .badge-type.yearly {
    background: rgba(167, 139, 250, 0.16) !important;
    color: #ddd6fe !important;
}

body.dark-mode .badge-type.all {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #bbf7d0 !important;
}

body.dark-mode .badge-version {
    background: rgba(148, 163, 184, 0.14) !important;
    color: var(--app-text-soft) !important;
}

body.dark-mode .badge-version i {
    color: #93c5fd !important;
}

body.dark-mode .sfr-alert-empty {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.22) !important;
    color: #fcd34d !important;
}

body.dark-mode :is(.sc-icon-count, .sc-icon-ending) {
    background: rgba(96, 165, 250, 0.14) !important;
    color: #93c5fd !important;
}

body.dark-mode .sc-icon-opening {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fcd34d !important;
}

body.dark-mode .sc-icon-surplus {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #86efac !important;
}

body.dark-mode :is(
    .tpl-panel,
    .tplf-card,
    .tpl-table-wrap,
    .tplf-footer,
    .wa-card,
    .wa-device-list,
    .wa-provider-card,
    .rp-card,
    .eb-card
) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(.tpl-filter, .wa-active-device, .recipient-list, .recipient-db-section, .wa-excel-info) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .tpl-input,
    .tplf-input,
    .tplf-select,
    .tplf-textarea,
    .campaign-control-input,
    .wa-phone-input,
    .recipient-db-search-input,
    .recipient-db-class-filter,
    .device-input,
    .eb-input,
    .eb-select,
    .eb-textarea
) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .tpl-input,
    .tplf-input,
    .tplf-select,
    .tplf-textarea,
    .campaign-control-input,
    .wa-phone-input,
    .recipient-db-search-input,
    .recipient-db-class-filter,
    .device-input,
    .eb-input,
    .eb-select,
    .eb-textarea
):focus {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(
    .tpl-label,
    .tpl-empty,
    .tpl-content,
    .tplf-label,
    .tplf-hint,
    .tplf-check,
    .campaign-panel-note,
    .campaign-search-empty,
    .campaign-search-meta,
    .wa-device-sub,
    .wa-provider-note,
    .wa-device-hint,
    .wa-qr-placeholder,
    .recipient-status,
    .recipient-db-phone,
    .eb-header-sub,
    .eb-campaign-info p,
    .eb-label,
    .eb-stat-label,
    .cell-desc,
    .cell-meta,
    .sched-sub,
    .ann-id,
    .deact-text
) {
    color: var(--app-text-muted) !important;
}

body.dark-mode :is(
    .tpl-name,
    .wa-provider-title,
    .wa-device-meta-row .meta-value,
    .wa-qr-title,
    .s-title,
    .stat-value,
    .device-list-title,
    .device-item-title,
    .recipient-db-title,
    .recipient-db-name,
    .recipient-number,
    .campaign-panel-label,
    .eb-campaign-info h5,
    .eb-stat-value,
    .eb-section-title,
    .cell-title,
    .sched-main,
    .ann-title
) {
    color: var(--app-text) !important;
}

body.dark-mode .tpl-table th {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

body.dark-mode .tpl-table td {
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

body.dark-mode .tpl-table tr:hover td,
body.dark-mode .rp-table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.08) !important;
}

body.dark-mode .rp-table tbody tr:hover {
    background: transparent !important;
}

body.dark-mode .rp-table tbody td {
    color: var(--app-text-soft) !important;
}

body.dark-mode .b-nonaktif {
    background: rgba(148, 163, 184, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #cbd5e1 !important;
}

body.dark-mode .b-belum {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
    color: #93c5fd !important;
}

body.dark-mode .rp-btn-outline {
    background: transparent !important;
    border-color: rgba(96, 165, 250, 0.28) !important;
    color: #93c5fd !important;
}

body.dark-mode .rp-btn-outline:hover,
body.dark-mode .rp-btn-outline:focus {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #bfdbfe !important;
}

body.dark-mode :is(.tpl-filter > .tpl-btn:not(.primary):not(.ghost), .tplf-btn.light) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode :is(.tplf-back, .wa-header-btn) {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.dark-mode :is(.tplf-back, .wa-header-btn):hover,
body.dark-mode :is(.tplf-back, .wa-header-btn):focus {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

body.dark-mode .tpl-icon-btn {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode .tpl-icon-btn.edit {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
    color: #93c5fd !important;
}

body.dark-mode .tpl-icon-btn.delete {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

body.dark-mode :is(.tpl-icon-btn:hover, .tpl-icon-btn:focus) {
    transform: translateY(-1px);
}

body.dark-mode .wa-header-btn i {
    color: #ffffff !important;
}

body.dark-mode .campaign-clear-btn {
    background: rgba(148, 163, 184, 0.16) !important;
    color: var(--app-text-muted) !important;
}

body.dark-mode :is(.campaign-search-item, .recipient-db-item, .recipient-item, .device-item, .wa-active-device) {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
}

body.dark-mode :is(.campaign-search-item:hover, .recipient-db-item:hover, .recipient-item:hover, .device-item:hover) {
    background: rgba(96, 165, 250, 0.08) !important;
    border-color: rgba(96, 165, 250, 0.24) !important;
}

body.dark-mode .device-item.active {
    border-color: rgba(96, 165, 250, 0.34) !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28) !important;
}

body.dark-mode .wa-qr-img {
    background: #0f172a !important;
}

.app-table-compact {
    margin-bottom: 0;
}

.app-table-compact th,
.app-table-compact td {
    vertical-align: middle !important;
}

.app-table-compact thead th {
    background: var(--app-surface-soft);
    color: var(--app-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--app-border);
    white-space: nowrap;
}

.app-table-compact tbody td {
    border-color: var(--app-border);
}

.app-table-compact tbody tr:hover td {
    background: var(--app-row-hover);
}

.app-table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.app-icon-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text-soft);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.app-icon-btn:hover,
.app-icon-btn:focus {
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
    color: var(--app-text);
}

.app-icon-btn.is-info {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.18);
    color: #1d4ed8;
}

.app-icon-btn.is-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.app-icon-btn.is-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

.app-icon-btn.is-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: #047857;
}

body.dark-mode .app-icon-btn {
    background: var(--app-surface-soft);
    border-color: var(--app-border);
    color: var(--app-text);
    box-shadow: none;
}

body.dark-mode .app-icon-btn.is-info {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
}

body.dark-mode .app-icon-btn.is-warning {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.22);
    color: #fcd34d;
}

body.dark-mode .app-icon-btn.is-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

body.dark-mode .app-icon-btn.is-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.asset-shell {
    font-family: 'Plus Jakarta Sans', 'Source Sans Pro', sans-serif;
}

.asset-shell .callout,
.asset-shell .card,
.asset-shell .modal-content {
    border-radius: 1rem;
    border-color: var(--app-border);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.asset-shell .callout {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 255, 0.96));
    border-left-color: #93c5fd;
}

.asset-shell .card-header,
.asset-shell .card-footer {
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.98), rgba(243, 247, 255, 0.95));
    border-color: var(--app-border);
}

.asset-shell .card-title,
.asset-shell h3,
.asset-shell h5,
.asset-shell label {
    font-family: 'Plus Jakarta Sans', 'Source Sans Pro', sans-serif;
}

.asset-shell .form-control,
.asset-shell .custom-file-label,
.asset-shell .btn {
    border-radius: 0.8rem;
}

.asset-shell .btn-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: #2563eb;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.asset-shell .btn-primary:hover,
.asset-shell .btn-primary:focus {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    border-color: #1d4ed8;
}

.asset-shell .table-responsive {
    border-radius: 0.9rem;
}

.asset-page {
    display: grid;
    gap: 1rem;
    font-family: 'Plus Jakarta Sans', 'Source Sans Pro', sans-serif;
}

.asset-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.asset-page-title-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.asset-page-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.asset-page-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
}

.asset-page-subtitle {
    margin: 0.2rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

.asset-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.asset-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.4rem;
    padding: 0.62rem 0.9rem;
    border-radius: 0.8rem;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text-soft);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.asset-action-btn:hover,
.asset-action-btn:focus {
    color: var(--app-text);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.asset-action-btn.is-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.asset-action-btn.is-primary:hover,
.asset-action-btn.is-primary:focus {
    color: #ffffff;
}

.asset-panel {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    overflow: hidden;
}

.asset-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-soft);
}

.asset-panel-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: var(--app-text);
    font-size: 0.95rem;
    font-weight: 800;
}

.asset-panel-title i {
    width: 2rem;
    height: 2rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: var(--app-accent-strong);
}

.asset-panel-note {
    color: var(--app-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.asset-panel-body {
    padding: 1.15rem;
}

.asset-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface-soft);
}

.asset-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.asset-field {
    grid-column: span 6;
}

.asset-field.is-full {
    grid-column: 1 / -1;
}

.asset-field label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.42rem;
    color: var(--app-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

.asset-required {
    color: #dc2626;
}

.asset-shell .asset-control {
    min-height: 2.65rem;
    border-radius: 0.8rem;
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 0.9rem;
}

.asset-shell .asset-control:focus {
    border-color: rgba(37, 99, 235, 0.36);
    box-shadow: 0 0 0 0.18rem rgba(37, 99, 235, 0.12);
}

.asset-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.asset-mini-stat {
    min-height: 5.2rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0.9rem;
    background: var(--app-surface);
}

.asset-mini-label {
    display: block;
    color: var(--app-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.asset-mini-value {
    display: block;
    margin-top: 0.35rem;
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    word-break: break-word;
}

.asset-detail-placeholder {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px dashed rgba(37, 99, 235, 0.28);
    border-radius: 0.9rem;
    background: rgba(37, 99, 235, 0.06);
    color: var(--app-text-soft);
}

.asset-detail-placeholder i {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: var(--app-accent-strong);
    flex: 0 0 auto;
}

.asset-detail-placeholder strong {
    display: block;
    color: var(--app-text);
    font-size: 0.92rem;
}

.asset-detail-placeholder span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.asset-component-grid {
    display: grid;
    gap: 0.9rem;
}

.asset-component-card {
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0.9rem;
    background: var(--app-surface-soft);
}

.asset-component-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
    color: var(--app-text);
    font-size: 0.94rem;
    font-weight: 800;
}

.asset-component-title i {
    color: var(--app-accent-strong);
}

.asset-readonly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.asset-readonly-field {
    min-height: 4.7rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: var(--app-surface-soft);
}

.asset-readonly-label {
    display: block;
    color: var(--app-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.asset-readonly-value {
    display: block;
    margin-top: 0.32rem;
    color: var(--app-text);
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.4;
    word-break: break-word;
}

.asset-empty-state {
    padding: 2.2rem 1rem;
    text-align: center;
}

.asset-empty-state i {
    display: inline-flex;
    width: 3.25rem;
    height: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--app-surface-soft);
    color: var(--app-accent-strong);
    font-size: 1.2rem;
}

.asset-empty-state h4 {
    margin: 1rem 0 0.45rem;
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 800;
}

.asset-empty-state p {
    max-width: 440px;
    margin: 0 auto;
    color: var(--app-text-muted);
    font-size: 0.85rem;
    line-height: 1.7;
}

.asset-public-body {
    min-height: 100vh;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: 'Plus Jakarta Sans', 'Source Sans Pro', sans-serif;
}

.asset-public-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.2rem;
}

.asset-public-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.asset-public-main {
    padding: 1.2rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.asset-public-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.asset-public-brand img {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.asset-public-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.35rem;
    font-weight: 800;
}

.asset-public-subtitle {
    margin: 0.25rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

.asset-public-action {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface-soft);
    box-shadow: var(--app-shadow);
}

.asset-public-action-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #ffffff;
}

.asset-public-action-title {
    margin: 0.8rem 0 0.3rem;
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 800;
}

.asset-public-action-text {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.asset-history-detail {
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0.9rem;
    background: var(--app-surface-soft);
}

.asset-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.asset-evidence-grid img {
    width: 100%;
    border-radius: 0.8rem;
    border: 1px solid var(--app-border);
}

body.dark-mode .asset-page-icon {
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.34);
}

body.dark-mode .asset-action-btn,
body.dark-mode .asset-panel,
body.dark-mode .asset-mini-stat,
body.dark-mode .asset-component-card,
body.dark-mode .asset-public-main,
body.dark-mode .asset-public-action {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

body.dark-mode .asset-panel-head,
body.dark-mode .asset-panel-footer,
body.dark-mode .asset-component-card,
body.dark-mode .asset-readonly-field,
body.dark-mode .asset-history-detail,
body.dark-mode .asset-public-action {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
}

body.dark-mode .asset-shell .asset-control {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.dark-mode .asset-detail-placeholder {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.24);
}

@media (max-width: 991.98px) {
    .asset-public-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .asset-field {
        grid-column: 1 / -1;
    }

    .asset-page-head,
    .asset-panel-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .asset-page-actions,
    .asset-action-btn {
        width: 100%;
    }
}

body.dark-mode .asset-shell .callout,
body.dark-mode .asset-shell .card,
body.dark-mode .asset-shell .modal-content {
    background: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: 0 22px 40px rgba(2, 6, 23, 0.34);
}

body.dark-mode .asset-shell .card-header,
body.dark-mode .asset-shell .card-footer {
    background: rgba(23, 33, 50, 0.92);
}

.main-sidebar .sidebar-app-meta {
    margin: 0.95rem 0.75rem 0.25rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.main-sidebar .sidebar-app-meta-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.main-sidebar .sidebar-app-meta-logo {
    display: block;
    width: auto;
    max-width: 68px;
    max-height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.22));
}

.main-sidebar .sidebar-app-meta-logo.is-ypik {
    max-width: 56px;
}

.main-sidebar .sidebar-app-meta-logo.is-pradita {
    max-width: 86px;
}

.main-sidebar .sidebar-app-meta-version {
    display: block;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.dark-mode .main-sidebar .sidebar-app-meta {
    border-top-color: rgba(148, 163, 184, 0.2);
}

@media (max-width: 991.98px) {
    .main-sidebar .sidebar-app-meta {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .main-sidebar .sidebar-app-meta-logo {
        max-height: 32px;
    }
}