/* Dark Mode Variables - html selector untuk specificity lebih tinggi dari :root */
html[data-theme="dark"] {
    --fun-primary: #3b82f6 !important;
    --fun-primary-hover: #60a5fa !important;
    --fun-secondary: #94a3b8 !important;
    --fun-success: #22c55e !important;
    --fun-info: #06b6d4 !important;
    --fun-warning: #fbbf24 !important;
    --fun-danger: #ef4444 !important;
    --fun-dark: #f8fafc !important;
    --fun-light: #1e293b !important;
    --fun-border: #334155 !important;
    --fun-text: #e2e8f0 !important;
    --fun-muted: #94a3b8 !important;
    --fun-surface: #1e293b !important;
    --fun-soft: #0f172a !important;
    --tblr-primary: #3b82f6 !important;
    --bs-body-bg: #0f172a !important;
    --bs-body-color: #e2e8f0 !important;
    --bs-border-color: #334155 !important;
}

/* Dark Mode Base */
html[data-theme="dark"],
[data-theme="dark"] body {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .admin-shell {
    background: #0f172a !important;
}

/* Override semua elemen yang pakai var(--fun-text) */
[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] label,
[data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] li,
[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.sidebar-nav-link) {
    color: #e2e8f0;
}

[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.sidebar-nav-link):hover {
    color: #60a5fa;
}

/* Dark Mode Admin Layout */
[data-theme="dark"] .admin-shell .page-header {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .admin-shell .page-topbar {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

[data-theme="dark"] .admin-shell .page-footer {
    background: #1e293b !important;
    border-top-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .admin-shell .page-footer * {
    color: #94a3b8 !important;
}

[data-theme="dark"] .admin-shell .page-body {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .admin-shell .sidebar-nav-divider {
    background: #334155 !important;
}

[data-theme="dark"] .admin-shell .sidebar-nav-link:hover {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .admin-shell .sidebar-nav-link.active {
    background: #1e3a5f !important;
    color: #60a5fa !important;
    box-shadow: inset 3px 0 0 #3b82f6 !important;
}

/* Dark Mode Sidebar */
[data-theme="dark"] .admin-shell .sidebar {
    background: #1e293b;
    border-right-color: #334155;
}

[data-theme="dark"] .sidebar-brand {
    border-bottom-color: #334155 !important;
}

[data-theme="dark"] .sidebar-nav-link {
    color: #94a3b8;
}

[data-theme="dark"] .sidebar-section-title {
    color: #64748b;
}

/* Dark Mode Topbar */
[data-theme="dark"] .admin-topbar {
    background: #1e293b;
    border-bottom-color: #334155;
}

[data-theme="dark"] .topbar-icon-btn,
[data-theme="dark"] .topbar-role-btn,
[data-theme="dark"] .topbar-avatar-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .topbar-icon-btn:hover,
[data-theme="dark"] .topbar-icon-btn:focus,
[data-theme="dark"] .topbar-role-btn:hover,
[data-theme="dark"] .topbar-role-btn:focus,
[data-theme="dark"] .topbar-avatar-btn:hover,
[data-theme="dark"] .topbar-avatar-btn:focus {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .topbar-user-name {
    color: #e2e8f0;
}

[data-theme="dark"] .topbar-user-role {
    color: #94a3b8;
}

/* Dark Mode Dropdown */
[data-theme="dark"] .dropdown-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .admin-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .dropdown-item {
    color: #94a3b8;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
    background: #3b82f6;
    color: #fff;
}

[data-theme="dark"] .dropdown-header {
    color: #64748b;
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: #334155;
}

[data-theme="dark"] .profile-dropdown-header {
    background: #0f172a;
    border-bottom-color: #334155;
    color: #e2e8f0;
}

/* Dark Mode Card */
[data-theme="dark"] .card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .card-header {
    background: #1e293b;
    border-bottom-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .card-body {
    color: #e2e8f0;
}

/* Dark Mode Table */
[data-theme="dark"] .table {
    color: #e2e8f0;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    border-bottom-color: #334155;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
}

/* Dark Mode DataTable */
[data-theme="dark"] .dataTable thead th,
[data-theme="dark"] table.dataTable thead th {
    background: #0f172a !important;
    border-bottom-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .dataTable tbody td,
[data-theme="dark"] table.dataTable tbody td {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .dataTable tbody tr:nth-child(even) td,
[data-theme="dark"] table.dataTable tbody tr:nth-child(even) td {
    background: #0f172a !important;
}

[data-theme="dark"] .dataTable tbody tr:hover td,
[data-theme="dark"] table.dataTable tbody tr:hover td {
    background: #334155 !important;
}

[data-theme="dark"] .dataTable tbody tr:last-child td,
[data-theme="dark"] table.dataTable tbody tr:last-child td {
    border-bottom-color: #334155 !important;
}

[data-theme="dark"] .dataTable tbody tr:nth-child(even) td {
    background: #0f172a;
}

[data-theme="dark"] .dataTable tbody tr:hover td {
    background: #334155;
}

[data-theme="dark"] .dataTables_wrapper {
    color: #e2e8f0;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
    color: #94a3b8;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: #94a3b8;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    background: rgba(30, 41, 59, 0.94);
    border-color: #334155;
    color: #3b82f6;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_empty {
    color: #64748b;
}

[data-theme="dark"] .dataTables_wrapper .form-select,
[data-theme="dark"] .dataTables_wrapper .form-control,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .dataTables_wrapper .form-select:focus,
[data-theme="dark"] .dataTables_wrapper .form-control:focus,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select:focus,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

[data-theme="dark"] .dataTables_wrapper .page-link {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .dataTables_wrapper .page-item.active .page-link,
[data-theme="dark"] .dataTables_wrapper .paginate_button.current .page-link {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[data-theme="dark"] .dataTables_wrapper .page-item:not(.disabled) .page-link:hover {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .dataTables_wrapper .page-item.disabled .page-link {
    background: #0f172a;
    color: #475569;
}

/* Dark Mode Form */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

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

[data-theme="dark"] .form-label {
    color: #94a3b8;
}

[data-theme="dark"] .form-check-input {
    background-color: #0f172a;
    border-color: #475569;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* Dark Mode Button */
[data-theme="dark"] .btn-outline-primary {
    border-color: #3b82f6;
    color: #3b82f6;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #475569;
    color: #94a3b8;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:focus {
    background: #475569;
    border-color: #475569;
    color: #fff;
}

[data-theme="dark"] .btn-light {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .btn-light:hover {
    background: #475569;
    border-color: #64748b;
}

/* Dark Mode Badge */
[data-theme="dark"] .badge.bg-light {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Dark Mode Modal */
[data-theme="dark"] .modal-content {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #334155;
}

[data-theme="dark"] .modal-footer {
    border-top-color: #334155;
}

[data-theme="dark"] .modal-title {
    color: #e2e8f0;
}

/* Dark Mode Breadcrumb */
[data-theme="dark"] .breadcrumb {
    background: transparent;
}

[data-theme="dark"] .breadcrumb-item a {
    color: #3b82f6;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: #94a3b8;
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #475569;
}

/* Dark Mode Alert */
[data-theme="dark"] .alert {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

/* Dark Mode Pagination */
[data-theme="dark"] .pagination .page-link {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[data-theme="dark"] .pagination .page-item:not(.disabled) .page-link:hover {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

/* Theme Dropdown Styles */
.theme-dropdown {
    min-width: 200px !important;
}

.theme-check {
    display: none;
}

[data-theme="light"] .theme-check[data-theme="light"],
[data-theme="dark"] .theme-check[data-theme="dark"],
[data-theme="system"] .theme-check[data-theme="system"] {
    display: inline-flex;
}

/* System theme detection */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --fun-primary: #3b82f6;
        --fun-primary-hover: #60a5fa;
        --fun-secondary: #94a3b8;
        --fun-success: #22c55e;
        --fun-info: #06b6d4;
        --fun-warning: #fbbf24;
        --fun-danger: #ef4444;
        --fun-dark: #f8fafc;
        --fun-light: #1e293b;
        --fun-border: #334155;
        --fun-text: #e2e8f0;
        --fun-muted: #94a3b8;
        --fun-surface: #1e293b;
        --fun-soft: #0f172a;
    }
}

/* Theme transition */
*,
*::before,
*::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Dark Mode - Override semua elemen yang masih putih */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background-color: #1e293b !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: #334155 !important;
}

[data-theme="dark"] .text-dark {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .text-body {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .text-body-secondary {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-body-tertiary {
    color: #64748b !important;
}

[data-theme="dark"] .bg-body {
    background-color: #0f172a !important;
}

[data-theme="dark"] .bg-body-secondary {
    background-color: #1e293b !important;
}

[data-theme="dark"] .bg-body-tertiary {
    background-color: #0f172a !important;
}

/* Dark Mode - Breadcrumb */
[data-theme="dark"] .breadcrumb {
    background-color: transparent !important;
}

[data-theme="dark"] .breadcrumb-item a {
    color: #60a5fa !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: #94a3b8 !important;
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #475569 !important;
}

/* Dark Mode - Badge */
[data-theme="dark"] .badge.bg-light {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .badge.bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Dark Mode - Alert */
[data-theme="dark"] .alert {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .alert-light {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Dark Mode - Modal */
[data-theme="dark"] .modal-content {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .modal-footer {
    border-top-color: #334155 !important;
}

[data-theme="dark"] .modal-title {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark Mode - Pagination */
[data-theme="dark"] .pagination .page-link {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

[data-theme="dark"] .pagination .page-item:not(.disabled) .page-link:hover {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* Dark Mode - Select2 */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-theme="dark"] .select2-container--default .select2-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option,
[data-theme="dark"] .select2-container--default .select2-results__option {
    color: #94a3b8 !important;
}

/* Dark Mode - SweetAlert2 */
[data-theme="dark"] .swal2-popup {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .swal2-title {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .swal2-html-container {
    color: #94a3b8 !important;
}

/* Dark Mode - Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}