:root {
    --app-bg: #f4f6f9;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-surface-muted: #eef2f7;
    --app-text: #172033;
    --app-text-muted: #64748b;
    --app-border: #e2e8f0;
    --app-primary: #2563eb;
    --app-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
    --app-input-bg: #ffffff;
    --app-input-text: #172033;
    --app-input-border: #cbd5e1;
}

:root[data-app-theme="dark"] {
    --app-bg: #0b1220;
    --app-surface: #111827;
    --app-surface-soft: #162033;
    --app-surface-muted: #1f2937;
    --app-text: #e5edf8;
    --app-text-muted: #a7b4c8;
    --app-border: #2d3b52;
    --app-primary: #60a5fa;
    --app-info-text: #bae6fd;
    --app-success-text: #bbf7d0;
    --app-warning-text: #fde68a;
    --app-danger-text: #fecaca;
    --app-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
    --app-input-bg: #0f172a;
    --app-input-text: #e5edf8;
    --app-input-border: #334155;
}

html[data-app-theme="dark"] body {
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
}

.app-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.app-theme-toggle:hover,
.app-theme-toggle:focus {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.35);
    color: #1d4ed8;
    transform: translateY(-1px);
}

.app-theme-toggle .bi {
    font-size: 15px;
}

html[data-app-theme="dark"] .app-theme-toggle {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.30);
    color: #e5edf8;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

html[data-app-theme="dark"] .app-theme-toggle:hover,
html[data-app-theme="dark"] .app-theme-toggle:focus {
    background: #111827;
    border-color: rgba(96, 165, 250, 0.55);
    color: #bfdbfe;
}

.sidebar-theme-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: none;
}

/* Slider-style light/dark switch */
.app-theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    line-height: 1;
    transition: none;
}

/* Sejajarkan switch dengan ikon menu lain (link punya padding kiri 12px) */
.sidebar-theme-switch {
    margin-left: 12px;
}

.app-theme-switch:hover,
.app-theme-switch:focus {
    background: transparent;
    outline: none;
}

.app-theme-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 26px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
    transition: background-color .25s ease;
}

.app-theme-switch-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    z-index: 1;
    transition: opacity .25s ease;
}

.app-theme-switch-icon-sun {
    left: 6px;
    color: #fbbf24;
    opacity: 1;
}

.app-theme-switch-icon-moon {
    right: 6px;
    color: #e5edf8;
    opacity: 0.45;
}

.app-theme-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
    transition: transform .25s ease;
    z-index: 2;
}

html[data-app-theme="dark"] .app-theme-switch-track {
    background: #2563eb;
}

html[data-app-theme="dark"] .app-theme-switch-thumb {
    transform: translateX(24px);
}

html[data-app-theme="dark"] .app-theme-switch-icon-sun {
    opacity: 0.45;
}

html[data-app-theme="dark"] .app-theme-switch-icon-moon {
    opacity: 1;
}

.app-theme-switch:hover .app-theme-switch-track {
    background: rgba(148, 163, 184, 0.6);
}

html[data-app-theme="dark"] .app-theme-switch:hover .app-theme-switch-track {
    background: #1d4ed8;
}

.landing-action-stack .app-theme-toggle,
.login-page-actions .app-theme-toggle {
    min-height: 44px;
}

html[data-app-theme="dark"] .content,
html[data-app-theme="dark"] .container,
html[data-app-theme="dark"] .container-fluid {
    color: var(--app-text);
}

html[data-app-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #07111f, #111827) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
}

html[data-app-theme="dark"] .sidebar-section-label,
html[data-app-theme="dark"] .sidebar-brand-subtitle {
    color: #93a4ba !important;
}

html[data-app-theme="dark"] .sidebar-link {
    color: #cbd5e1 !important;
}

html[data-app-theme="dark"] .sidebar-link:hover,
html[data-app-theme="dark"] .sidebar-link.active {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #ffffff !important;
}

html[data-app-theme="dark"] .sidebar-toggle {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
}

html[data-app-theme="dark"] .sidebar-toggle-bars span {
    background: #e5edf8 !important;
}

html[data-app-theme="dark"] .navbar,
html[data-app-theme="dark"] .dashboard-navbar {
    background: linear-gradient(135deg, #0f172a, #1e3a8a) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
}

html[data-app-theme="dark"] .card,
html[data-app-theme="dark"] .summary-card,
html[data-app-theme="dark"] .data-card,
html[data-app-theme="dark"] .dashboard-data-card,
html[data-app-theme="dark"] .login-card,
html[data-app-theme="dark"] .stat-card,
html[data-app-theme="dark"] .restore-card,
html[data-app-theme="dark"] .profile-card,
html[data-app-theme="dark"] .rekap-card,
html[data-app-theme="dark"] .audit-card,
html[data-app-theme="dark"] .notification-target-card,
html[data-app-theme="dark"] .notification-overview-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow) !important;
}

html[data-app-theme="dark"] .data-card-header,
html[data-app-theme="dark"] .data-card-body,
html[data-app-theme="dark"] .table-toolbar,
html[data-app-theme="dark"] .table-scroll,
html[data-app-theme="dark"] .modal-content,
html[data-app-theme="dark"] .modal-header,
html[data-app-theme="dark"] .modal-body,
html[data-app-theme="dark"] .modal-footer,
html[data-app-theme="dark"] .dropdown-menu,
html[data-app-theme="dark"] .list-group-item {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .table-toolbar,
html[data-app-theme="dark"] .input-group-text,
html[data-app-theme="dark"] .alert-light,
html[data-app-theme="dark"] .bg-light,
html[data-app-theme="dark"] .bg-white,
html[data-app-theme="dark"] .bg-white\/70,
html[data-app-theme="dark"] .bg-slate-50,
html[data-app-theme="dark"] .bg-slate-100,
html[data-app-theme="dark"] .bg-gray-50,
html[data-app-theme="dark"] .bg-gray-100,
html[data-app-theme="dark"] .bg-zinc-50,
html[data-app-theme="dark"] .bg-zinc-100,
html[data-app-theme="dark"] .bg-neutral-50,
html[data-app-theme="dark"] .bg-neutral-100,
html[data-app-theme="dark"] .bg-stone-50,
html[data-app-theme="dark"] .bg-stone-100 {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .hover\:bg-white:hover,
html[data-app-theme="dark"] .hover\:bg-slate-50:hover,
html[data-app-theme="dark"] .hover\:bg-gray-50:hover {
    background: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .bg-sky-50,
html[data-app-theme="dark"] .bg-sky-100,
html[data-app-theme="dark"] .bg-blue-50,
html[data-app-theme="dark"] .bg-blue-100 {
    background: rgba(14, 165, 233, 0.14) !important;
    border-color: rgba(125, 211, 252, 0.28) !important;
    color: var(--app-info-text) !important;
}

html[data-app-theme="dark"] .bg-emerald-50,
html[data-app-theme="dark"] .bg-emerald-100,
html[data-app-theme="dark"] .bg-green-50,
html[data-app-theme="dark"] .bg-green-100 {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(110, 231, 183, 0.28) !important;
    color: var(--app-success-text) !important;
}

html[data-app-theme="dark"] .bg-amber-50,
html[data-app-theme="dark"] .bg-amber-100,
html[data-app-theme="dark"] .bg-yellow-50,
html[data-app-theme="dark"] .bg-yellow-100 {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(252, 211, 77, 0.30) !important;
    color: var(--app-warning-text) !important;
}

html[data-app-theme="dark"] .bg-rose-50,
html[data-app-theme="dark"] .bg-rose-100,
html[data-app-theme="dark"] .bg-red-50,
html[data-app-theme="dark"] .bg-red-100 {
    background: rgba(244, 63, 94, 0.14) !important;
    border-color: rgba(253, 164, 175, 0.28) !important;
    color: var(--app-danger-text) !important;
}

html[data-app-theme="dark"] .section-title,
html[data-app-theme="dark"] .summary-total,
html[data-app-theme="dark"] .stats-layout-title,
html[data-app-theme="dark"] .dashboard-deadline-title,
html[data-app-theme="dark"] .public-column-title,
html[data-app-theme="dark"] .login-card h4,
html[data-app-theme="dark"] h1,
html[data-app-theme="dark"] h2,
html[data-app-theme="dark"] h3,
html[data-app-theme="dark"] h4,
html[data-app-theme="dark"] h5,
html[data-app-theme="dark"] h6 {
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .text-muted,
html[data-app-theme="dark"] .text-secondary,
html[data-app-theme="dark"] .section-subtitle,
html[data-app-theme="dark"] .summary-label,
html[data-app-theme="dark"] .stats-layout-note,
html[data-app-theme="dark"] .dashboard-deadline-description,
html[data-app-theme="dark"] small,
html[data-app-theme="dark"] .form-text,
html[data-app-theme="dark"] .text-slate-300,
html[data-app-theme="dark"] .text-slate-400,
html[data-app-theme="dark"] .text-slate-500,
html[data-app-theme="dark"] .text-slate-600,
html[data-app-theme="dark"] .text-gray-300,
html[data-app-theme="dark"] .text-gray-400,
html[data-app-theme="dark"] .text-gray-500,
html[data-app-theme="dark"] .text-gray-600,
html[data-app-theme="dark"] .text-zinc-500,
html[data-app-theme="dark"] .text-zinc-600,
html[data-app-theme="dark"] .text-neutral-500,
html[data-app-theme="dark"] .text-neutral-600,
html[data-app-theme="dark"] .text-stone-500,
html[data-app-theme="dark"] .text-stone-600 {
    color: var(--app-text-muted) !important;
}

html[data-app-theme="dark"] .text-dark,
html[data-app-theme="dark"] .text-slate-700,
html[data-app-theme="dark"] .text-slate-800,
html[data-app-theme="dark"] .text-slate-900,
html[data-app-theme="dark"] .text-gray-700,
html[data-app-theme="dark"] .text-gray-800,
html[data-app-theme="dark"] .text-gray-900,
html[data-app-theme="dark"] .text-zinc-700,
html[data-app-theme="dark"] .text-zinc-800,
html[data-app-theme="dark"] .text-zinc-900,
html[data-app-theme="dark"] .text-neutral-700,
html[data-app-theme="dark"] .text-neutral-800,
html[data-app-theme="dark"] .text-neutral-900,
html[data-app-theme="dark"] .text-stone-700,
html[data-app-theme="dark"] .text-stone-800,
html[data-app-theme="dark"] .text-stone-900 {
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .text-primary,
html[data-app-theme="dark"] .text-blue-600,
html[data-app-theme="dark"] .text-blue-700,
html[data-app-theme="dark"] .text-blue-800,
html[data-app-theme="dark"] .text-blue-900,
html[data-app-theme="dark"] .text-sky-600,
html[data-app-theme="dark"] .text-sky-700,
html[data-app-theme="dark"] .text-sky-800,
html[data-app-theme="dark"] .text-sky-900 {
    color: var(--app-info-text) !important;
}

html[data-app-theme="dark"] .text-success,
html[data-app-theme="dark"] .text-green-600,
html[data-app-theme="dark"] .text-green-700,
html[data-app-theme="dark"] .text-green-800,
html[data-app-theme="dark"] .text-green-900,
html[data-app-theme="dark"] .text-emerald-600,
html[data-app-theme="dark"] .text-emerald-700,
html[data-app-theme="dark"] .text-emerald-800,
html[data-app-theme="dark"] .text-emerald-900 {
    color: var(--app-success-text) !important;
}

html[data-app-theme="dark"] .text-warning,
html[data-app-theme="dark"] .text-amber-600,
html[data-app-theme="dark"] .text-amber-700,
html[data-app-theme="dark"] .text-amber-800,
html[data-app-theme="dark"] .text-amber-900,
html[data-app-theme="dark"] .text-yellow-600,
html[data-app-theme="dark"] .text-yellow-700,
html[data-app-theme="dark"] .text-yellow-800,
html[data-app-theme="dark"] .text-yellow-900 {
    color: var(--app-warning-text) !important;
}

html[data-app-theme="dark"] .text-danger,
html[data-app-theme="dark"] .text-red-600,
html[data-app-theme="dark"] .text-red-700,
html[data-app-theme="dark"] .text-red-800,
html[data-app-theme="dark"] .text-red-900,
html[data-app-theme="dark"] .text-rose-600,
html[data-app-theme="dark"] .text-rose-700,
html[data-app-theme="dark"] .text-rose-800,
html[data-app-theme="dark"] .text-rose-900 {
    color: var(--app-danger-text) !important;
}

html[data-app-theme="dark"] .border,
html[data-app-theme="dark"] .border-slate-100,
html[data-app-theme="dark"] .border-slate-200,
html[data-app-theme="dark"] .border-gray-100,
html[data-app-theme="dark"] .border-gray-200,
html[data-app-theme="dark"] .border-zinc-100,
html[data-app-theme="dark"] .border-zinc-200,
html[data-app-theme="dark"] .border-neutral-100,
html[data-app-theme="dark"] .border-neutral-200,
html[data-app-theme="dark"] .border-stone-100,
html[data-app-theme="dark"] .border-stone-200 {
    border-color: var(--app-border) !important;
}

html[data-app-theme="dark"] .border-sky-200,
html[data-app-theme="dark"] .border-blue-200 {
    border-color: rgba(125, 211, 252, 0.34) !important;
}

html[data-app-theme="dark"] .border-emerald-200,
html[data-app-theme="dark"] .border-green-200 {
    border-color: rgba(110, 231, 183, 0.34) !important;
}

html[data-app-theme="dark"] .border-amber-200,
html[data-app-theme="dark"] .border-yellow-200 {
    border-color: rgba(252, 211, 77, 0.34) !important;
}

html[data-app-theme="dark"] .border-rose-200,
html[data-app-theme="dark"] .border-red-200 {
    border-color: rgba(253, 164, 175, 0.34) !important;
}

html[data-app-theme="dark"] .form-control,
html[data-app-theme="dark"] .form-select,
html[data-app-theme="dark"] textarea,
html[data-app-theme="dark"] input[type="text"],
html[data-app-theme="dark"] input[type="email"],
html[data-app-theme="dark"] input[type="password"],
html[data-app-theme="dark"] input[type="number"],
html[data-app-theme="dark"] input[type="date"] {
    background-color: var(--app-input-bg) !important;
    border-color: var(--app-input-border) !important;
    color: var(--app-input-text) !important;
}

html[data-app-theme="dark"] .form-control::placeholder,
html[data-app-theme="dark"] textarea::placeholder,
html[data-app-theme="dark"] input::placeholder {
    color: #7c8ba1 !important;
}

html[data-app-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: rgba(148, 163, 184, 0.08);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: rgba(96, 165, 250, 0.12);
    --bs-table-hover-color: var(--app-text);
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .table-scroll thead th,
html[data-app-theme="dark"] .table thead th {
    background: #162033 !important;
    color: #dce8f7 !important;
    border-color: var(--app-border) !important;
}

/* ===== Daftar User table (dark) ===== */
html[data-app-theme="dark"] .user-table-scroll {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

html[data-app-theme="dark"] .user-table thead th {
    background: linear-gradient(180deg, #182338, #131c2e) !important;
    color: #aebed4 !important;
    box-shadow: inset 0 -1px 0 var(--app-border) !important;
}

html[data-app-theme="dark"] .user-table tbody td {
    background: transparent !important;
    border-bottom-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .user-table tbody tr:nth-child(even) td {
    background: rgba(148, 163, 184, 0.05) !important;
}

html[data-app-theme="dark"] .user-table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.12) !important;
}

html[data-app-theme="dark"] .identity-username,
html[data-app-theme="dark"] .status-last-seen,
html[data-app-theme="dark"] .contact-line {
    color: var(--app-text-muted) !important;
}

html[data-app-theme="dark"] .jabatan-tag {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
}

html[data-app-theme="dark"] .contact-line i {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #93c5fd !important;
}

html[data-app-theme="dark"] .contact-line .bi-whatsapp {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #6ee7a8 !important;
}

html[data-app-theme="dark"] .contact-line.is-empty,
html[data-app-theme="dark"] .contact-line.is-empty i {
    color: #6b7a90 !important;
    background: rgba(148, 163, 184, 0.1) !important;
}

html[data-app-theme="dark"] .role-pill-super_admin {
    background: rgba(168, 85, 247, 0.18) !important;
    color: #d8b4fe !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

html[data-app-theme="dark"] .role-pill-admin {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html[data-app-theme="dark"] .role-pill-user {
    background: rgba(45, 212, 191, 0.16) !important;
    color: #99f6e4 !important;
    border-color: rgba(45, 212, 191, 0.28) !important;
}

html[data-app-theme="dark"] .btn-soft-primary {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html[data-app-theme="dark"] .btn-soft-warning {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html[data-app-theme="dark"] .btn-soft-danger {
    background: rgba(248, 113, 113, 0.16) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html[data-app-theme="dark"] .btn-soft-success {
    background: rgba(52, 211, 153, 0.16) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

html[data-app-theme="dark"] .btn-soft-secondary {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
}

html[data-app-theme="dark"] code {
    color: #f0abfc !important;
    background: rgba(168, 85, 247, 0.12);
    border-radius: 6px;
    padding: 0.08rem 0.28rem;
}

html[data-app-theme="dark"] .dropdown-item {
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .dropdown-item:hover,
html[data-app-theme="dark"] .dropdown-item:focus {
    background: rgba(96, 165, 250, 0.14) !important;
    color: #ffffff !important;
}

html[data-app-theme="dark"] .page-link {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: #bfdbfe !important;
}

html[data-app-theme="dark"] .page-link:hover,
html[data-app-theme="dark"] .page-link:focus {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #ffffff !important;
}

html[data-app-theme="dark"] .page-item.active .page-link {
    background: #2563eb !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

html[data-app-theme="dark"] .page-item.disabled .page-link,
html[data-app-theme="dark"] .disabled,
html[data-app-theme="dark"] :disabled {
    color: #718096 !important;
}

html[data-app-theme="dark"] .btn-outline-secondary {
    color: #cbd5e1 !important;
    border-color: #64748b !important;
}

html[data-app-theme="dark"] .btn-outline-primary {
    color: #bfdbfe !important;
    border-color: #3b82f6 !important;
}

html[data-app-theme="dark"] .btn-outline-dark {
    color: #e5edf8 !important;
    border-color: #64748b !important;
}

html[data-app-theme="dark"] .btn-outline-dark:hover,
html[data-app-theme="dark"] .btn-outline-dark:focus {
    background: #e5edf8 !important;
    border-color: #e5edf8 !important;
    color: #0f172a !important;
}

html[data-app-theme="dark"] .btn-warning.text-dark,
html[data-app-theme="dark"] .bg-warning.text-dark,
html[data-app-theme="dark"] .badge.bg-warning.text-dark,
html[data-app-theme="dark"] .alert-warning .text-dark {
    color: #0f172a !important;
}

html[data-app-theme="dark"] .btn-light,
html[data-app-theme="dark"] .btn-outline-light {
    background: #1f2937 !important;
    border-color: #334155 !important;
    color: #e5edf8 !important;
}

html[data-app-theme="dark"] .nomor-cell,
html[data-app-theme="dark"] .stats-layout-title,
html[data-app-theme="dark"] .digest-check-title,
html[data-app-theme="dark"] .delete-confirm-title,
html[data-app-theme="dark"] .delete-feedback-title,
html[data-app-theme="dark"] .delete-feedback-metric-value,
html[data-app-theme="dark"] .template-summary-name,
html[data-app-theme="dark"] .notification-overview-status,
html[data-app-theme="dark"] .notification-preview-name,
html[data-app-theme="dark"] .notification-template-editor-title,
html[data-app-theme="dark"] .profile-title,
html[data-app-theme="dark"] .profile-section-kicker,
html[data-app-theme="dark"] .photo-title,
html[data-app-theme="dark"] .restore-card-title,
html[data-app-theme="dark"] .restore-dialog-title,
html[data-app-theme="dark"] .restore-feedback-metric-value,
html[data-app-theme="dark"] .loading-overlay-text,
html[data-app-theme="dark"] .login-section-title,
html[data-app-theme="dark"] .public-flow-title,
html[data-app-theme="dark"] .public-flow-note-title,
html[data-app-theme="dark"] .public-chart-title,
html[data-app-theme="dark"] .public-transportir-detail-name,
html[data-app-theme="dark"] .reset-panel-title,
html[data-app-theme="dark"] .form-card-title,
html[data-app-theme="dark"] .form-section-title,
html[data-app-theme="dark"] .form-swal-title,
html[data-app-theme="dark"] .submit-loading-title,
html[data-app-theme="dark"] .rekap-filter-title,
html[data-app-theme="dark"] .rekap-stat-dark,
html[data-app-theme="dark"] .user-card-title,
html[data-app-theme="dark"] .panel-card .form-label,
html[data-app-theme="dark"] .panel-title,
html[data-app-theme="dark"] .identity-name {
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .transportir-cell,
html[data-app-theme="dark"] .stats-layout-note,
html[data-app-theme="dark"] .digest-check-meta,
html[data-app-theme="dark"] .delete-feedback-metric-label,
html[data-app-theme="dark"] .notification-target-status.is-empty,
html[data-app-theme="dark"] .notification-preview-meta,
html[data-app-theme="dark"] .restore-filter-panel .form-label,
html[data-app-theme="dark"] .restore-dialog-text,
html[data-app-theme="dark"] .restore-feedback-metric-label,
html[data-app-theme="dark"] .public-flow-copy,
html[data-app-theme="dark"] .public-flow-note-copy,
html[data-app-theme="dark"] .public-detail-row-label,
html[data-app-theme="dark"] .public-empty-state,
html[data-app-theme="dark"] .form-label,
html[data-app-theme="dark"] .submit-loading-subtitle,
html[data-app-theme="dark"] .nomor-surat-list,
html[data-app-theme="dark"] .rekap-empty,
html[data-app-theme="dark"] .status-presence.is-offline {
    color: var(--app-text-muted) !important;
}

html[data-app-theme="dark"] .photo-action-button,
html[data-app-theme="dark"] .profile-form-control,
html[data-app-theme="dark"] .is-readonly,
html[data-app-theme="dark"] .password-toggle-button,
html[data-app-theme="dark"] .profile-submit-button,
html[data-app-theme="dark"] .master-action-link,
html[data-app-theme="dark"] .notification-preview-card,
html[data-app-theme="dark"] .rekap-btn-reset {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .page-header,
html[data-app-theme="dark"] .login-page-shell,
html[data-app-theme="dark"] .public-dashboard,
html[data-app-theme="dark"] .landing-shell {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 28%),
        radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.14), transparent 24%),
        var(--app-bg) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .login-page-hero,
html[data-app-theme="dark"] .landing-topbar,
html[data-app-theme="dark"] .public-section-heading,
html[data-app-theme="dark"] .public-column-intro,
html[data-app-theme="dark"] .public-summary-card,
html[data-app-theme="dark"] .public-chart-card,
html[data-app-theme="dark"] .public-notification-stack,
html[data-app-theme="dark"] .deadline-ticker-shell,
html[data-app-theme="dark"] .public-table-panel {
    background: rgba(17, 24, 39, 0.86) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .login-page-title,
html[data-app-theme="dark"] .login-page-description,
html[data-app-theme="dark"] .login-page-feature,
html[data-app-theme="dark"] .login-page-badge,
html[data-app-theme="dark"] .login-page-back,
html[data-app-theme="dark"] .public-column-copy,
html[data-app-theme="dark"] .public-summary-label,
html[data-app-theme="dark"] .public-summary-note,
html[data-app-theme="dark"] .deadline-ticker-subtitle {
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] .public-summary-value,
html[data-app-theme="dark"] .public-chart-title,
html[data-app-theme="dark"] .deadline-ticker-title {
    color: #f8fafc !important;
}

html[data-app-theme="dark"] .name-pill,
html[data-app-theme="dark"] .badge-soft,
html[data-app-theme="dark"] .public-summary-badge,
html[data-app-theme="dark"] .deadline-ticker-badge {
    background: rgba(96, 165, 250, 0.14) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.28) !important;
}

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

html[data-app-theme="dark"] .swal2-title,
html[data-app-theme="dark"] .swal2-html-container {
    color: var(--app-text) !important;
}