:root {
    --primary: #FFA500;
    --accent: #66ff00;
    --secondary: #66ff00;
    --success: #059669;
    --warning: #D97706;
    --danger: #DC2626;
    --primary-lt: #fff4e0;
    --primary-dk: #ad7000;
    --primary-light: #ffd78c;
    --primary-lighter: #fff8eb;
    --primary-dark: #d18700;
    --primary-base: #FFA500;
    --primary-rgb: 255,165,0;
    --secondary-base: #66ff00;
    --secondary-light: #baff8c;
    --secondary-dark: #4dbf00;
    --secondary-lighter: #edffe0;
    --info-base: #66ff00;
    --success-lt: #e6f5f0;
    --success-light: #e6f5f0;
    --warning-lt: #fbf1e6;
    --warning-light: #fbf1e6;
    --danger-lt: #fce9e9;
    --danger-light: #fce9e9;
    --theme-mode: system;
}

/* Smooth transitions for all theme-affected elements */
body, body *, 
.form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="color"], select, textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== LIGHT MODE (default) ===== */
html[data-theme="light"],
html.light {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --border: #e4e7ec;
    --border-2: #cbd0d8;
    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;
}

html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea,
html.light .form-input,
html.light .form-select,
html.light .form-textarea {
    background-color: #f7f8fa;
    border-color: #e4e7ec;
    color: #0f172a;
}

html[data-theme="light"] .form-input:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .form-textarea:focus,
html.light .form-input:focus,
html.light .form-select:focus,
html.light .form-textarea:focus {
    background-color: #ffffff;
    border-color: #FFA500;
}

html[data-theme="light"] input[type="color"],
html.light input[type="color"] {
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    cursor: pointer;
}

/* ===== DARK MODE ===== */
html[data-theme="dark"],
html.dark {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-2: #0f1729;
    --border: #334155;
    --border-2: #475569;
    --text-1: #f1f5f9;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;
    --bg-secondary: #1e293b;
}

/* Dark mode - all whitespace becomes dark */
html[data-theme="dark"] body,
html.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}

html[data-theme="dark"] div,
html.dark div {
    color: #f1f5f9;
}

/* Cards and containers */
html[data-theme="dark"] .card,
html[data-theme="dark"] .container,
html[data-theme="dark"] [role="main"],
html.dark .card,
html.dark .container,
html.dark [role="main"] {
    background-color: #1e293b;
    color: #f1f5f9;
}

/* Index page wrapper */
html[data-theme="dark"] .admin-index-wrapper,
html.dark .admin-index-wrapper {
    background: transparent;
}

/* Filter and search panels */
html[data-theme="dark"] .filters-panel,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .table-wrapper,
html[data-theme="dark"] .content-card,
html.dark .filters-panel,
html.dark .search-panel,
html.dark .table-wrapper,
html.dark .content-card {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

/* Table styling */
html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html.dark table,
html.dark thead,
html.dark tbody,
html.dark tr,
html.dark th,
html.dark td {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

html[data-theme="dark"] tbody tr:hover,
html.dark tbody tr:hover {
    background-color: #0f1729;
}

/* DataTables wrapper */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_paginate,
html.dark .dataTables_wrapper,
html.dark .dataTables_length,
html.dark .dataTables_filter,
html.dark .dataTables_info,
html.dark .dataTables_paginate {
    color: #cbd5e1;
}

/* Modal and overlay styling */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html.dark .modal,
html.dark .modal-content,
html.dark .modal-header,
html.dark .modal-body,
html.dark .modal-footer {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

/* Alert boxes */
html[data-theme="dark"] .alert,
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert-danger,
html.dark .alert,
html.dark .alert-info,
html.dark .alert-warning,
html.dark .alert-success,
html.dark .alert-danger {
    background-color: #0f1729;
    border-color: #334155;
    color: #cbd5e1;
}

/* Search and filter inputs */
html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_length select,
html[data-theme="dark"] .search-input,
html.dark .dataTables_filter input,
html.dark .dataTables_length select,
html.dark .search-input {
    background-color: #0f1729;
    border-color: #334155;
    color: #f1f5f9;
}

html[data-theme="dark"] .dataTables_filter input::placeholder,
html[data-theme="dark"] .search-input::placeholder,
html.dark .dataTables_filter input::placeholder,
html.dark .search-input::placeholder {
    color: #64748b;
}

/* Action buttons in tables */
html[data-theme="dark"] .btn-icon,
html[data-theme="dark"] .action-btn,
html.dark .btn-icon,
html.dark .action-btn {
    color: #cbd5e1;
    border-color: #334155;
}

html[data-theme="dark"] .btn-icon:hover,
html[data-theme="dark"] .action-btn:hover,
html.dark .btn-icon:hover,
html.dark .action-btn:hover {
    background-color: #0f1729;
    border-color: #475569;
}

/* Pagination */
html[data-theme="dark"] .pagination .page-link,
html.dark .pagination .page-link {
    background-color: #0f1729;
    border-color: #334155;
    color: #cbd5e1;
}

html[data-theme="dark"] .pagination .page-link:hover,
html.dark .pagination .page-link:hover {
    background-color: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

html[data-theme="dark"] .pagination .page-item.active .page-link,
html.dark .pagination .page-item.active .page-link {
    background-color: #FFA500;
    border-color: #FFA500;
    color: #000;
}

/* Status badges */
html[data-theme="dark"] .badge,
html.dark .badge {
    background-color: #0f1729;
    color: #cbd5e1;
    border-color: #334155;
}

html[data-theme="dark"] .badge-success,
html.dark .badge-success {
    background-color: rgba(5,150,105, 0.2);
    color: #059669;
}

html[data-theme="dark"] .badge-danger,
html.dark .badge-danger {
    background-color: rgba(220,38,38, 0.2);
    color: #DC2626;
}

html[data-theme="dark"] .badge-warning,
html.dark .badge-warning {
    background-color: rgba(217,119,6, 0.2);
    color: #D97706;
}

/* Dropdown menus */
html[data-theme="dark"] .dropdown-menu,
html.dark .dropdown-menu {
    background-color: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .dropdown-item,
html.dark .dropdown-item {
    color: #cbd5e1;
}

html[data-theme="dark"] .dropdown-item:hover,
html.dark .dropdown-item:hover {
    background-color: #0f1729;
    color: #f1f5f9;
}

/* Tooltips */
html[data-theme="dark"] .tooltip-inner,
html.dark .tooltip-inner {
    background-color: #0f1729;
    color: #f1f5f9;
}

/* Breadcrumbs */
html[data-theme="dark"] .breadcrumb,
html.dark .breadcrumb {
    background-color: transparent;
}

html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a,
html.dark .breadcrumb-item,
html.dark .breadcrumb-item a {
    color: #cbd5e1;
}

html[data-theme="dark"] .breadcrumb-item a:hover,
html.dark .breadcrumb-item a:hover {
    color: #FFA500;
}

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

html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea,
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea {
    background-color: #0f1729;
    border-color: #334155;
    color: #f1f5f9;
}

html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea::placeholder,
html.dark .form-input::placeholder,
html.dark .form-select,
html.dark .form-textarea::placeholder {
    color: #94a3b8;
}

html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-textarea:focus,
html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus {
    background-color: #1e293b;
    border-color: #FFA500;
    box-shadow: 0 0 0 3px rgba(255,165,0, 0.15);
}

html[data-theme="dark"] input[type="color"],
html.dark input[type="color"] {
    border: 1px solid #334155;
    border-radius: 8px;
    cursor: pointer;
    background-color: #1e293b;
}

/* Form labels and helper text in dark mode */
html[data-theme="dark"] .form-label,
html.dark .form-label {
    color: #cbd5e1;
}

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

/* Tabs styling for dark mode */
html[data-theme="dark"] .settings-tab,
html.dark .settings-tab {
    color: #cbd5e1;
}

html[data-theme="dark"] .settings-tab:hover,
html.dark .settings-tab:hover {
    color: #FFA500;
}

html[data-theme="dark"] .settings-tab.active,
html.dark .settings-tab.active {
    color: #FFA500;
    border-bottom-color: #FFA500;
}

html[data-theme="dark"] .settings-tabs,
html.dark .settings-tabs {
    border-bottom-color: #334155;
}

/* Form section styling for dark mode */
html[data-theme="dark"] .form-section-title,
html.dark .form-section-title {
    color: #f1f5f9;
    border-bottom-color: #334155;
}

html[data-theme="dark"] .admin-form-wrapper,
html.dark .admin-form-wrapper {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .admin-form-header,
html.dark .admin-form-header {
    border-bottom-color: #334155;
}

/* Checkbox and radio styling */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
    background-color: #0f1729;
    border-color: #334155;
    accent-color: #FFA500;
    cursor: pointer;
}

/* Solid primary CTA — white label so it wins over global dark-mode `a { … !important }` and reads on warm primaries */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] .btn.btn-primary,
html.dark .btn-primary,
html.dark a.btn-primary,
html.dark .btn.btn-primary {
    background-color: #FFA500;
    color: #ffffff !important;
    border-color: #FFA500;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] a.btn-primary:hover,
html[data-theme="dark"] .btn.btn-primary:hover,
html.dark .btn-primary:hover,
html.dark a.btn-primary:hover,
html.dark .btn.btn-primary:hover {
    color: #ffffff !important;
    filter: brightness(0.92);
}

html[data-theme="dark"] .btn-secondary,
html.dark .btn-secondary {
    background-color: #334155;
    color: #f1f5f9;
    border-color: #475569;
}

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

/* System preference (default) */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"],
    html:not([data-theme]) {
        --bg: #0f172a;
        --surface: #1e293b;
        --surface-2: #0f1729;
        --border: #334155;
        --border-2: #475569;
        --text-1: #f1f5f9;
        --text-2: #cbd5e1;
        --text-3: #94a3b8;
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"],
    html:not([data-theme]) {
        --bg: #f7f8fa;
        --surface: #ffffff;
        --surface-2: #f0f2f5;
        --border: #e4e7ec;
        --border-2: #cbd0d8;
        --text-1: #0f172a;
        --text-2: #475569;
        --text-3: #94a3b8;
    }
}