/**
 * Theme variables for light and dark mode support.
 * These CSS custom properties are used throughout the application to enable automatic theme switching
 * based on the user's system preference (prefers-color-scheme).
 */

:root {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fc;
    --bg-tertiary: #f7f7f7;
    --bg-error: lightyellow;

    /* Text colors */
    --text-primary: #212529;
    --text-secondary: #858796;
    --text-muted: #6c757d;

    /* Border colors */
    --border-primary: #d6d5d5;
    --border-secondary: #dddfeb;

    /* Accent/Brand colors */
    --accent-primary: #495fc1;
    --accent-hover: #3a4fa8;

    /* Sidebar colors */
    --sidebar-bg-start: rgb(5, 39, 103);
    --sidebar-bg-end: #3a0647;

    /* Interactive element colors */
    --link-color: #4e73df;
    --link-hover-color: #224abe;

    /* Shadow colors */
    --shadow-color: rgba(0, 0, 0, 0.2);

    /* Component specific */
    --treeview-active-bg: #495fc1;
    --treeview-active-border: #495fc1;

    /* Card and content backgrounds */
    --card-bg: #ffffff;
    --card-border: #dfe0e1;
    --table-row-bg: #ffffff;
    --table-row-alt-bg: #f8f9fa;
    --table-header-bg: #495057;
    --input-bg: #ffffff;
    --input-border: #ced4da;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Background colors */
        --bg-primary: #1a1a2e;
        --bg-secondary: #16213e;
        --bg-tertiary: #0f0f1a;
        --bg-error: #3d3d00;

        /* Text colors */
        --text-primary: #e4e6eb;
        --text-secondary: #b0b3b8;
        --text-muted: #8a8d91;

        /* Border colors */
        --border-primary: #3a3b45;
        --border-secondary: #404040;

        /* Accent/Brand colors */
        --accent-primary: #6b7fd4;
        --accent-hover: #8a9be0;

        /* Sidebar colors */
        --sidebar-bg-start: #0a1628;
        --sidebar-bg-end: #1a0a20;

        /* Interactive element colors */
        --link-color: #6b8cff;
        --link-hover-color: #8fa8ff;

        /* Shadow colors */
        --shadow-color: rgba(0, 0, 0, 0.5);

        /* Component specific */
        --treeview-active-bg: #6b7fd4;
        --treeview-active-border: #6b7fd4;

        /* Card and content backgrounds */
        --card-bg: #1e2a3a;
        --card-border: #3a4556;
        --table-row-bg: #1e2a3a;
        --table-row-alt-bg: #263545;
        --table-header-bg: #1a2332;
        --input-bg: #1e2a3a;
        --input-border: #3a4556;

        /* Override Bootstrap 5 CSS variables for dark mode */
        --bs-body-bg: #121620;
        --bs-body-color: #e4e6eb;
        --bs-body-bg-rgb: 18, 22, 32;
        --bs-body-color-rgb: 228, 230, 235;

        /* Card and component overrides */
        --bs-card-bg: #1e2a3a;
        --bs-card-border-color: #3a4556;

        /* Form control overrides */
        --bs-border-color: #3a4556;
    }

    /* Global dark mode styles */
    body {
        background-color: #121620 !important;
        color: #e4e6eb !important;
    }

    /* Page content area */
    #main,
    .page-content {
        background-color: #121620;
    }

    /* Cards */
    .card {
        background-color: #1e2a3a !important;
        border-color: #3a4556 !important;
        color: #e4e6eb !important;
    }

    .card-header {
        background-color: #1a2332 !important;
        border-color: #3a4556 !important;
    }

    .card-body {
        background-color: #1e2a3a !important;
    }

    /* Tables */
    .table,
    .dataTable-table {
        color: #e4e6eb !important;
    }

    .table> :not(caption)>*>*,
    .dataTable-table> :not(caption)>*>* {
        background-color: #1e2a3a !important;
        color: #e4e6eb !important;
        border-color: #3a4556 !important;
    }

    .table>thead>tr>th,
    .dataTable-table>thead>tr>th {
        background-color: #1a2332 !important;
        color: #b0b3b8 !important;
    }

    .table-striped>tbody>tr:nth-of-type(odd)>* {
        background-color: #263545 !important;
    }

    /* Form controls */
    .form-control,
    .form-select,
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        background-color: #1e2a3a !important;
        border-color: #3a4556 !important;
        color: #e4e6eb !important;
    }

    .form-control:focus,
    .form-select:focus,
    input:focus,
    textarea:focus {
        background-color: #263545 !important;
        border-color: #6b7fd4 !important;
        color: #e4e6eb !important;
    }

    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: #8a8d91 !important;
    }

    /* Headings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        color: #e4e6eb !important;
    }

    /* Labels */
    label,
    .form-label {
        color: #b0b3b8 !important;
    }

    /* Modals and dialogs */
    .modal-content {
        background-color: #1e2a3a !important;
        border-color: #3a4556 !important;
        color: #e4e6eb !important;
    }

    .modal-header,
    .modal-footer {
        border-color: #3a4556 !important;
    }

    /* Dropdowns */
    .dropdown-menu {
        background-color: #1e2a3a !important;
        border-color: #3a4556 !important;
    }

    .dropdown-item {
        color: #e4e6eb !important;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #263545 !important;
        color: #ffffff !important;
    }

    /* List groups */
    .list-group-item {
        background-color: #1e2a3a !important;
        border-color: #3a4556 !important;
        color: #e4e6eb !important;
    }

    /* Alerts - keep their semantic colors but darken backgrounds */
    .alert-success {
        background-color: #0d3320 !important;
        border-color: #0f5132 !important;
        color: #75b798 !important;
    }

    .alert-danger {
        background-color: #2c0b0e !important;
        border-color: #842029 !important;
        color: #ea868f !important;
    }

    .alert-warning {
        background-color: #332701 !important;
        border-color: #664d03 !important;
        color: #ffda6a !important;
    }

    .alert-info {
        background-color: #032830 !important;
        border-color: #055160 !important;
        color: #6edff6 !important;
    }

    /* Light Alert Variants - need darker backgrounds with visible text */
    .alert-light-primary {
        background-color: #1a2744 !important;
        color: #8faeff !important;
    }

    .alert-light-secondary {
        background-color: #2a2d31 !important;
        color: #b0b3b8 !important;
    }

    .alert-light-success {
        background-color: #0d3320 !important;
        color: #75b798 !important;
    }

    .alert-light-danger {
        background-color: #2c0b0e !important;
        color: #ea868f !important;
    }

    .alert-light-warning {
        background-color: #332701 !important;
        color: #ffda6a !important;
    }

    .alert-light-warning a,
    .alert-light-warning a:hover {
        color: #ffc107 !important;
    }

    .alert-light-info {
        background-color: #032830 !important;
        color: #6edff6 !important;
    }

    /* Color utility classes for dark mode */
    .color-warning,
    .text-warning {
        color: #ffda6a !important;
    }

    .color-danger,
    .text-danger {
        color: #ea868f !important;
    }

    .color-success,
    .text-success {
        color: #75b798 !important;
    }

    .color-info,
    .text-info {
        color: #6edff6 !important;
    }

    .color-primary,
    .text-primary {
        color: #8faeff !important;
    }

    /* ========================================
       Table Contextual Classes (table-danger, table-warning, etc.)
       ======================================== */

    /* Table danger rows */
    .table-danger,
    .table> :not(caption)>*>.table-danger {
        background-color: #2c0b0e !important;
        color: #ea868f !important;
        --bs-table-bg: #2c0b0e;
        --bs-table-color: #ea868f;
    }

    /* Ensure striped tables keep the dark danger background */
    .table-striped>tbody>tr.table-danger:nth-of-type(odd),
    .table-hover>tbody>tr.table-danger:hover {
        background-color: #2c0b0e !important;
        color: #ea868f !important;
    }

    .table-danger td,
    .table-danger th {
        background-color: #2c0b0e !important;
        color: #ea868f !important;
    }

    /* Table warning rows */
    .table-warning,
    tr.table-warning,
    .table> :not(caption)>*>.table-warning,
    .table>tbody>tr.table-warning,
    .table>tbody>tr.table-warning>td,
    .table>tbody>tr.table-warning>th {
        background-color: #332701 !important;
        color: #ffda6a !important;
        --bs-table-bg: #332701 !important;
        --bs-table-color: #ffda6a !important;
        --bs-table-striped-bg: #332701 !important;
        --bs-table-striped-color: #ffda6a !important;
        --bs-table-hover-bg: #3d2e01 !important;
        --bs-table-hover-color: #ffda6a !important;
    }

    .table-warning td,
    .table-warning th,
    tr.table-warning td,
    tr.table-warning th {
        background-color: #332701 !important;
        color: #ffda6a !important;
        background: #332701 !important;
    }

    /* Table success rows */
    .table-success,
    .table> :not(caption)>*>.table-success {
        background-color: #0d3320 !important;
        color: #75b798 !important;
        --bs-table-bg: #0d3320;
        --bs-table-color: #75b798;
    }

    /* Ensure striped tables keep the dark success background */
    .table-striped>tbody>tr.table-success:nth-of-type(odd),
    .table-hover>tbody>tr.table-success:hover {
        background-color: #0d3320 !important;
        color: #75b798 !important;
    }

    .table-success td,
    .table-success th {
        background-color: #0d3320 !important;
        color: #75b798 !important;
    }

    /* Table info rows */
    .table-info,
    .table> :not(caption)>*>.table-info {
        background-color: #032830 !important;
        color: #6edff6 !important;
        --bs-table-bg: #032830;
        --bs-table-color: #6edff6;
    }

    .table-info td,
    .table-info th {
        background-color: #032830 !important;
        color: #6edff6 !important;
    }

    /* Table primary rows */
    .table-primary,
    .table> :not(caption)>*>.table-primary {
        background-color: #1a2744 !important;
        color: #8faeff !important;
        --bs-table-bg: #1a2744;
        --bs-table-color: #8faeff;
    }

    .table-primary td,
    .table-primary th {
        background-color: #1a2744 !important;
        color: #8faeff !important;
    }

    /* Table secondary rows */
    .table-secondary,
    .table> :not(caption)>*>.table-secondary {
        background-color: #2a2d31 !important;
        color: #b0b3b8 !important;
        --bs-table-bg: #2a2d31;
        --bs-table-color: #b0b3b8;
    }

    .table-secondary td,
    .table-secondary th {
        background-color: #2a2d31 !important;
        color: #b0b3b8 !important;
    }

    /* Toasts */
    .toast {
        background-color: #1e2a3a !important;
        border-color: #3a4556 !important;
        color: #e4e6eb !important;
    }

    /* Nav/Tabs */
    .nav-tabs .nav-link {
        color: #b0b3b8 !important;
    }

    .nav-tabs .nav-link.active {
        background-color: #1e2a3a !important;
        border-color: #3a4556 !important;
        color: #e4e6eb !important;
    }

    /* Borders */
    hr {
        border-color: #3a4556 !important;
    }

    /* Text utilities */
    .text-muted {
        color: #8a8d91 !important;
    }

    .text-dark {
        color: #e4e6eb !important;
    }

    /* Background utilities - override light backgrounds in dark mode */
    .bg-light {
        background-color: #1e2a3a !important;
    }

    .bg-white {
        background-color: #1e2a3a !important;
    }

    /* Syncfusion component overrides for dark mode */
    /* Grid */
    .e-grid,
    .e-grid .e-gridheader,
    .e-grid .e-gridcontent,
    .e-grid .e-table {
        background-color: #1e2a3a !important;
    }

    .e-grid .e-headercell,
    .e-grid .e-headercelldiv {
        background-color: #1a2332 !important;
        color: #b0b3b8 !important;
    }

    .e-grid .e-rowcell {
        background-color: #1e2a3a !important;
        color: #e4e6eb !important;
        border-color: #3a4556 !important;
    }

    .e-grid .e-row:hover .e-rowcell,
    .e-grid .e-altrow .e-rowcell {
        background-color: #263545 !important;
    }

    .e-grid .e-row.e-altrow {
        background-color: #263545 !important;
    }

    /* Input controls */
    .e-input-group,
    .e-input-group.e-control-wrapper,
    .e-float-input,
    .e-float-input.e-control-wrapper {
        background-color: #1e2a3a !important;
    }

    .e-input,
    .e-input-group input.e-input,
    .e-input-group.e-control-wrapper input.e-input,
    .e-float-input input,
    .e-float-input.e-control-wrapper input {
        background-color: #1e2a3a !important;
        color: #e4e6eb !important;
        border-color: #3a4556 !important;
    }

    .e-input-group:not(.e-disabled) .e-input-group-icon,
    .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon {
        color: #b0b3b8 !important;
    }

    /* NumericTextBox and other inputs */
    .e-numerictextbox,
    .e-textbox,
    .e-dropdownbase {
        background-color: #1e2a3a !important;
        color: #e4e6eb !important;
    }

    /* Dialogs */
    .e-dialog,
    .e-dialog .e-dlg-header-content,
    .e-dialog .e-dlg-content,
    .e-dialog .e-footer-content {
        background-color: #1e2a3a !important;
        color: #e4e6eb !important;
    }

    .e-dialog .e-dlg-header {
        color: #e4e6eb !important;
    }

    /* Toast */
    .e-toast-container .e-toast {
        background-color: #1e2a3a !important;
        color: #e4e6eb !important;
        border-color: #3a4556 !important;
    }

    /* Dropdown/ComboBox popup */
    .e-dropdownbase .e-list-parent,
    .e-popup.e-popup-open,
    .e-ddl.e-popup,
    .e-autocomplete.e-popup {
        background-color: #1e2a3a !important;
    }

    .e-dropdownbase .e-list-item,
    .e-list-item {
        background-color: #1e2a3a !important;
        color: #e4e6eb !important;
    }

    .e-dropdownbase .e-list-item:hover,
    .e-list-item:hover,
    .e-dropdownbase .e-list-item.e-hover,
    .e-list-item.e-hover {
        background-color: #263545 !important;
    }

    .e-dropdownbase .e-list-item.e-active,
    .e-list-item.e-active {
        background-color: #6b7fd4 !important;
        color: #ffffff !important;
    }

    /* Buttons - keep primary/success/danger colors but adjust for dark */
    .e-btn.e-flat {
        color: #b0b3b8 !important;
    }

    .e-btn.e-flat:hover {
        background-color: #263545 !important;
    }

    /* Progress bar */
    .e-progressbar {
        background-color: #263545 !important;
    }

    /* Toolbar */
    .e-toolbar {
        background-color: #1a2332 !important;
        border-color: #3a4556 !important;
    }

    .e-toolbar .e-toolbar-item .e-tbar-btn {
        background-color: transparent !important;
        color: #e4e6eb !important;
    }

    /* TreeView (for navigation) */
    .e-treeview {
        background-color: transparent !important;
    }

    .e-treeview .e-list-item {
        background-color: transparent !important;
    }

    .e-treeview .e-text-content {
        color: #e4e6eb !important;
    }

    /* Chip/Tag */
    .e-chip-list .e-chip {
        background-color: #263545 !important;
        color: #e4e6eb !important;
    }

    /* Float label colors */
    .e-float-input label.e-float-text,
    .e-float-input.e-control-wrapper label.e-float-text {
        color: #8a8d91 !important;
    }

    .e-float-input.e-input-focus label.e-float-text,
    .e-float-input.e-control-wrapper.e-input-focus label.e-float-text {
        color: #6b7fd4 !important;
    }

    /* ========================================
       Sidebar Dark Mode Overrides
       ======================================== */

    /* Sidebar wrapper background */
    .sidebar-wrapper {
        background-color: #1a1d21 !important;
    }

    /* Sidebar menu titles */
    .sidebar-wrapper .menu .sidebar-title,
    .sidebar-title {
        color: #8a8d91 !important;
    }

    /* Sidebar links */
    .sidebar-wrapper .menu .sidebar-link,
    .sidebar-link {
        color: #e4e6eb !important;
    }

    /* Sidebar link icons */
    .sidebar-link i,
    .sidebar-link svg {
        color: #8a8d91 !important;
    }

    /* Sidebar link hover */
    .sidebar-link:hover {
        background-color: #263545 !important;
    }

    .sidebar-link:hover i,
    .sidebar-link:hover svg {
        color: #b0b3b8 !important;
    }

    /* Active sidebar item */
    .sidebar-item.active>.sidebar-link {
        background-color: #435ebe !important;
        color: #ffffff !important;
    }

    .sidebar-item.active>.sidebar-link i,
    .sidebar-item.active>.sidebar-link svg {
        color: #ffffff !important;
    }

    /* Sidebar submenu */
    .submenu {
        background-color: #1a1d21 !important;
    }

    .submenu .sidebar-link {
        color: #b0b3b8 !important;
    }

    .submenu .sidebar-link:hover {
        color: #e4e6eb !important;
    }

    /* Sidebar divider */
    .sidebar-wrapper hr {
        border-color: #3a3f47 !important;
    }

    /* Sidebar brand/logo area */
    .sidebar-header {
        background-color: #1a1d21 !important;
    }

    .sidebar-header .logo {
        color: #e4e6eb !important;
    }

    /* Sidebar toggle button */
    .sidebar-toggler {
        background-color: #263545 !important;
        color: #e4e6eb !important;
    }

    .sidebar-toggler:hover {
        background-color: #3a3f47 !important;
    }

    /* Sidebar backdrop for mobile */
    .sidebar-backdrop {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }
}