:root {
    --theme-bg: #f8f9fc;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f8f9fc;
    --theme-border: #e3e6f0;
    --theme-text: #5a5c69;
    --theme-text-strong: #3a3b45;
    --theme-muted: #858796;
    --theme-input-bg: #ffffff;
    --theme-input-border: #d1d3e2;
    --theme-hover: #f8f9fc;
    --theme-primary: #36454f;
    --theme-primary-hover: #6c757d;
    --theme-primary-soft: rgba(54, 69, 79, 0.14);
    --theme-primary-shadow: rgba(54, 69, 79, 0.25);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-bg: #111827;
    --theme-surface: #182235;
    --theme-surface-soft: #202b40;
    --theme-border: #324056;
    --theme-text: #d6deeb;
    --theme-text-strong: #f3f7fb;
    --theme-muted: #9aa8bd;
    --theme-input-bg: #111827;
    --theme-input-border: #3d4b63;
    --theme-hover: #243047;
    --theme-primary: #8fb4ff;
    --theme-primary-hover: #b7ccff;
    --theme-primary-soft: rgba(143, 180, 255, 0.18);
    --theme-primary-shadow: rgba(143, 180, 255, 0.28);
}

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

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-list,
html[data-theme="dark"] .sticky-footer {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text);
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .jumbotron,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .collapse-inner,
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--theme-surface-soft) !important;
    color: var(--theme-text);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--theme-surface-soft) !important;
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .card-header .text-primary,
html[data-theme="dark"] .card-header .text-info,
html[data-theme="dark"] .card-header .text-success,
html[data-theme="dark"] .card-header .text-warning,
html[data-theme="dark"] .card-header .text-danger,
html[data-theme="dark"] .card-header h1,
html[data-theme="dark"] .card-header h2,
html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .card-header h4,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-header h6 {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .card-header .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary),
html[data-theme="dark"] .card-header .btn-link {
    color: #dbe7ff !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-file-label,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_scrollHead,
html[data-theme="dark"] .dataTables_wrapper .dataTables_scrollBody {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .font-weight-bold {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length label,
html[data-theme="dark"] .dataTables_filter label {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .topbar.navbar-light .navbar-nav .nav-item .nav-link,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .collapse-item {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
html[data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover,
html[data-theme="dark"] .page-link:hover {
    background-color: var(--theme-hover) !important;
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .custom-file-label,
html[data-theme="dark"] .input-group-text {
    background-color: var(--theme-input-bg) !important;
    color: var(--theme-text-strong) !important;
    border-color: var(--theme-input-border) !important;
}

html[data-theme="dark"] .custom-file-label::after {
    background-color: var(--theme-surface-soft) !important;
    color: var(--theme-text-strong) !important;
    border-color: var(--theme-input-border) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] .custom-file-input:focus ~ .custom-file-label {
    background-color: var(--theme-input-bg) !important;
    color: var(--theme-text-strong) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--theme-primary-shadow);
}

html[data-theme="dark"] .form-control::placeholder {
    color: #78869b;
}

html[data-theme="dark"] .table {
    color: var(--theme-text);
    background-color: var(--theme-surface);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .thead-light th,
html[data-theme="dark"] table.dataTable thead th {
    background-color: var(--theme-surface-soft) !important;
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] table.dataTable.table-striped > tbody > tr.odd > * {
    background-color: rgba(255, 255, 255, 0.035) !important;
    color: var(--theme-text);
}

html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover {
    background-color: var(--theme-hover) !important;
    color: var(--theme-text-strong);
}

html[data-theme="dark"] .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #0b1220 !important;
}

html[data-theme="dark"] .table td .btn,
html[data-theme="dark"] table.dataTable td .btn {
    color: #ffffff !important;
}

html[data-theme="dark"] .table td .btn-link,
html[data-theme="dark"] table.dataTable td .btn-link {
    background-color: var(--theme-primary-soft);
    border: 1px solid rgba(126, 153, 255, 0.32);
    border-radius: 0.35rem;
    color: #9db5ff !important;
    margin: 0 0.1rem;
    min-width: 2rem;
    text-decoration: none;
}

html[data-theme="dark"] .table td .btn-link i,
html[data-theme="dark"] table.dataTable td .btn-link i {
    color: inherit !important;
}

html[data-theme="dark"] .table td .btn-link:hover,
html[data-theme="dark"] .table td .btn-link:focus,
html[data-theme="dark"] table.dataTable td .btn-link:hover,
html[data-theme="dark"] table.dataTable td .btn-link:focus {
    background-color: var(--theme-primary-shadow);
    border-color: rgba(157, 181, 255, 0.75);
    color: #ffffff !important;
    text-decoration: none;
}

html[data-theme="dark"] .table td .btn-blink,
html[data-theme="dark"] table.dataTable td .btn-blink {
    background-color: rgba(231, 74, 59, 0.16);
    border: 1px solid rgba(255, 133, 121, 0.45);
    color: #ff9b91 !important;
}

html[data-theme="dark"] .table td .btn-blink:hover,
html[data-theme="dark"] table.dataTable td .btn-blink:hover {
    background-color: rgba(231, 74, 59, 0.3);
    color: #ffffff !important;
}

html[data-theme="dark"] .card-header .btn-outline-secondary {
    border-color: var(--theme-input-border);
    color: var(--theme-text-strong);
}

html[data-theme="dark"] .card-header .btn-outline-secondary:hover,
html[data-theme="dark"] .card-header .btn-outline-secondary:focus {
    background-color: var(--theme-hover);
    border-color: #7e99ff;
    color: #ffffff;
}

html[data-theme="dark"] .payment-cal-days-header,
html[data-theme="dark"] .dash-cal-days-header,
html[data-theme="dark"] .payment-cal-days-header-kasir {
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .payment-cal-body,
html[data-theme="dark"] .dash-cal-body,
html[data-theme="dark"] .payment-cal-body-kasir {
    background-color: var(--theme-border) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .payment-cal-cell,
html[data-theme="dark"] .dash-cal-cell,
html[data-theme="dark"] .payment-cal-cell-kasir {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .payment-cal-cell.empty,
html[data-theme="dark"] .dash-cal-cell.empty,
html[data-theme="dark"] .payment-cal-cell-kasir.empty {
    background-color: #121c2d !important;
}

html[data-theme="dark"] .payment-cal-cell.today,
html[data-theme="dark"] .dash-cal-cell.today,
html[data-theme="dark"] .payment-cal-cell-kasir.today {
    background-color: #1d3156 !important;
}

html[data-theme="dark"] .payment-cal-cell .day-num,
html[data-theme="dark"] .dash-cal-cell .day-num,
html[data-theme="dark"] .payment-cal-cell-kasir .day-num {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .more-badge,
html[data-theme="dark"] .more-badge-kasir {
    color: #9db5ff !important;
}

html[data-theme="dark"] #paymentDetailModal .payment-detail-item,
html[data-theme="dark"] #paymentDetailModalKasir .payment-detail-item,
html[data-theme="dark"] #techDetailModal .tech-detail-item {
    background-color: var(--theme-surface-soft) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .payment-detail-label {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .modal-backdrop {
    background-color: #030712;
}

html[data-theme="dark"] .close,
html[data-theme="dark"] button.close {
    color: var(--theme-text-strong);
    text-shadow: none;
    opacity: 0.85;
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .alert-success {
    background-color: #123525;
    border-color: #1f6f4a;
    color: #b8f3d0;
}

html[data-theme="dark"] .alert-warning {
    background-color: #3d2f10;
    border-color: #9c7413;
    color: #ffe3a3;
}

html[data-theme="dark"] .alert-danger {
    background-color: #42191f;
    border-color: #92303d;
    color: #ffc2c9;
}

html[data-theme="dark"] .bg-gradient-primary {
    background-color: #1d2a3d !important;
    background-image: linear-gradient(180deg, #263a56 10%, #111827 100%) !important;
}

html[data-theme="dark"] .sidebar .nav-item .nav-link .text-danger,
html[data-theme="dark"] .sidebar .collapse-inner .collapse-item .text-danger,
html[data-theme="dark"] .sidebar .collapsing .collapse-item .text-danger {
    color: #ffb4a8 !important;
    text-shadow: 0 0 0.4rem rgba(255, 98, 83, 0.45);
}

html[data-theme="dark"] .sidebar .nav-item .nav-link:hover .text-danger,
html[data-theme="dark"] .sidebar .nav-item .nav-link:focus .text-danger,
html[data-theme="dark"] .sidebar .collapse-inner .collapse-item:hover .text-danger,
html[data-theme="dark"] .sidebar .collapse-inner .collapse-item:focus .text-danger {
    color: #ffd0c9 !important;
}

html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .card-header .text-primary,
html[data-theme="dark"] .card-header .font-weight-bold.text-primary,
html[data-theme="dark"] .modal-title.text-primary {
    color: var(--theme-primary) !important;
}

html[data-theme="dark"] a.text-primary:hover,
html[data-theme="dark"] a.text-primary:focus {
    color: var(--theme-primary-hover) !important;
}

html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] .badge-primary,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .icon-circle.bg-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #0b1220 !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary.focus,
html[data-theme="dark"] a.bg-primary:hover,
html[data-theme="dark"] a.bg-primary:focus,
html[data-theme="dark"] button.bg-primary:hover,
html[data-theme="dark"] button.bg-primary:focus {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
    color: #0b1220 !important;
}

html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary.focus,
html[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled).active:focus,
html[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):active:focus,
html[data-theme="dark"] .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--theme-primary-shadow) !important;
}

html[data-theme="dark"] .btn-primary.disabled,
html[data-theme="dark"] .btn-primary:disabled {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #0b1220 !important;
}

html[data-theme="dark"] .btn-outline-primary {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus,
html[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #0b1220 !important;
}

html[data-theme="dark"] .border-primary {
    border-color: var(--theme-primary) !important;
}

html[data-theme="dark"] .border-left-primary {
    border-left-color: var(--theme-primary) !important;
}

html[data-theme="dark"] .border-bottom-primary {
    border-bottom-color: var(--theme-primary) !important;
}

html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .list-group-item-primary,
html[data-theme="dark"] .alert-primary {
    background-color: var(--theme-primary-soft) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-hover) !important;
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--theme-primary) !important;
    color: #0b1220 !important;
}

html[data-theme="dark"] .table-primary,
html[data-theme="dark"] .table-primary > th,
html[data-theme="dark"] .table-primary > td {
    background-color: var(--theme-primary-soft) !important;
    color: var(--theme-text-strong) !important;
}

.theme-toggle {
    border: 0;
    cursor: pointer;
}

.theme-toggle:focus {
    box-shadow: none;
}

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