/* Dark mode — override token values. Any component using var() tokens gets dark mode automatically. */
body.dark-mode {
  /* Apply the baseline so all text/background defaults to the dark palette
     globally, not just elements with their own selector override below. */
  background-color: var(--color-bg);
  color: var(--color-text);

  --color-bg:                  #393939;
  --color-bg-surface:          #4f4f4f;
  --color-bg-section:          #424242;
  --color-bg-input:            #4f4f4f;
  --color-bg-input-focus:      #353535;
  --color-bg-hover:            #353535;
  --color-bg-active:           #3d3d3d;
  --color-bg-muted:            #4f4f4f;
  --color-bg-subtle:           #4a4a4a;
  --color-bg-scrollbar:        #2d2d2d;
  --color-bg-btn-light-hover:  #4d4d4d;
  --color-text:                #e0e0e0;
  --color-text-strong:         #e0e0e0;
  --color-text-muted:          #999999;
  --color-text-inverse:        #e0e0e0;
  --color-nav-link:            #c0c0c0;
  --color-border:              #404040;
  --color-border-subtle:       #404040;
  --color-border-focus:        #555555;
  --color-border-focus-2:      #666666;
  --color-link:                #64b5f6;
  --color-link-blue:           #64b5f6;
  --color-link-dark:           #64b5f6;
  --color-alert-info-bg:       #1a3a52;
  --color-alert-success-bg:    #1a4d2e;
  --color-alert-warning-bg:    #5c4d2e;
  --color-alert-danger-bg:     #5c1a1a;
  --color-success-bg:          #1a4d2e;
  --color-danger-bg:           #5c1a1a;
  --color-warning-bg:          #5c4d2e;
  --color-warning-text:        #ffe08a;
}

/* AdminLTE selector overrides — needed because AdminLTE uses !important or applies styles
   that cannot be driven by our custom properties alone */
body.dark-mode .main-header.navbar {
  background-color: var(--color-bg-surface) !important;
  border-bottom: 1px solid var(--color-border);
}

body.dark-mode .main-header.navbar .nav-link { color: var(--color-text) !important; }

body.dark-mode .main-sidebar { background-color: var(--color-bg-section) !important; }

body.dark-mode .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--color-bg-active) !important;
}

body.dark-mode .content-wrapper {
  background-color: var(--color-bg);
  color: var(--color-text);
}

body.dark-mode .card {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

body.dark-mode .card-header {
  background-color: var(--color-bg-section);
  border-bottom-color: var(--color-border);
}

body.dark-mode .card-footer {
  background-color: var(--color-bg-section);
  border-top-color: var(--color-border);
}

body.dark-mode .table { color: var(--color-text); }

body.dark-mode .table thead th {
  border-color: var(--color-border);
  background-color: var(--color-bg-section);
}

body.dark-mode .table td,
body.dark-mode .table th { border-color: var(--color-border); }

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .form-control {
  background-color: var(--color-bg-input);
  border-color: var(--color-border);
  color: var(--color-text);
}

body.dark-mode .form-control:focus {
  background-color: var(--color-bg-input-focus);
  border-color: var(--color-border-focus);
  color: var(--color-text);
}

body.dark-mode .btn-light {
  background-color: var(--color-bg-section);
  border-color: var(--color-border-focus);
  color: var(--color-text);
}

body.dark-mode .btn-light:hover {
  background-color: var(--color-bg-btn-light-hover);
  border-color: var(--color-border-focus-2);
}

body.dark-mode .modal-content {
  background-color: var(--color-bg-surface);
  color: var(--color-text);
}

body.dark-mode .modal-header { border-bottom-color: var(--color-border); }
body.dark-mode .modal-footer { border-top-color: var(--color-border); }

body.dark-mode .dropdown-menu {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
}

body.dark-mode .dropdown-item { color: var(--color-text); }
body.dark-mode .dropdown-item:hover { background-color: var(--color-bg-hover); }

body.dark-mode .nav-pills .nav-link.active { background-color: var(--color-bg-active); }

body.dark-mode .breadcrumb { background-color: var(--color-bg-surface); }

body.dark-mode .page-link {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

body.dark-mode .page-link:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-focus);
}

body.dark-mode .page-item.active .page-link {
  background-color: var(--color-link-blue);
  border-color: var(--color-link-blue);
}

body.dark-mode .alert {
  color: var(--color-text);
  border-color: var(--color-border);
}

body.dark-mode .alert-info    { background-color: var(--color-alert-info-bg); }
body.dark-mode .alert-success { background-color: var(--color-alert-success-bg); }
body.dark-mode .alert-warning { background-color: var(--color-alert-warning-bg); }
body.dark-mode .alert-danger  { background-color: var(--color-alert-danger-bg); }

body.dark-mode .bg-light { background-color: var(--color-bg-surface) !important; }
body.dark-mode .text-muted { color: var(--color-text-muted) !important; }
body.dark-mode .border { border-color: var(--color-border) !important; }

body.dark-mode .main-footer {
  background-color: var(--color-bg-surface);
  border-top-color: var(--color-border);
}

body.dark-mode .nav-sidebar .nav-link { color: var(--color-nav-link); }

body.dark-mode .nav-sidebar .nav-link:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text-inverse);
}

body.dark-mode .brand-link { border-bottom-color: var(--color-border) !important; }

body.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_processing,
body.dark-mode .dataTables_wrapper .dataTables_paginate { color: var(--color-text); }

body.dark-mode #darkModeIcon::before { content: "\f185"; }

/* ── Third-party widget dark mode ──────────────────────────────────────────
   Token-driven defaults so any feature that drops in a Tabulator grid, Select2
   control, or summernote editor gets dark mode for free. Pages may override
   with more specific selectors for bespoke skins (e.g. the queue grid). */

/* Tabulator */
body.dark-mode .tabulator {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}
body.dark-mode .tabulator .tabulator-header,
body.dark-mode .tabulator .tabulator-header .tabulator-col {
  background-color: var(--color-bg-section);
  border-color: var(--color-border);
  color: var(--color-text);
}
body.dark-mode .tabulator .tabulator-row {
  background-color: var(--color-bg-surface);
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}
body.dark-mode .tabulator .tabulator-row.tabulator-row-even {
  background-color: var(--color-bg-section);
}
body.dark-mode .tabulator .tabulator-row:hover {
  background-color: var(--color-bg-hover);
}
body.dark-mode .tabulator .tabulator-cell {
  border-right-color: var(--color-border);
}
body.dark-mode .tabulator .tabulator-footer {
  background-color: var(--color-bg-section);
  color: var(--color-text);
  border-top-color: var(--color-border);
}

/* Select2 */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: var(--color-bg-input);
  border-color: var(--color-border);
  color: var(--color-text);
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text);
}
body.dark-mode .select2-dropdown {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
}
body.dark-mode .select2-results__option { color: var(--color-text); }
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-bg-hover);
  color: var(--color-text);
}
body.dark-mode .select2-search__field {
  background-color: var(--color-bg-input);
  color: var(--color-text);
}

/* summernote */
body.dark-mode .note-editor.note-frame,
body.dark-mode .note-editor.note-airframe { border-color: var(--color-border); }
body.dark-mode .note-editor .note-toolbar,
body.dark-mode .note-editor .note-statusbar {
  background-color: var(--color-bg-section);
  border-color: var(--color-border);
}
body.dark-mode .note-editable {
  background-color: var(--color-bg-input);
  color: var(--color-text);
}
body.dark-mode .note-btn {
  background-color: var(--color-bg-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

body { transition: background-color 0.3s ease, color 0.3s ease; }