/* ========================================
   LIGHT THEME (default)
   ======================================== */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-card: #ffffff;
  --bg-navbar: #2c3e50;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --border-color: #dee2e6;
  --table-stripe: #f8f9fa;
  --table-hover: #e9ecef;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-text: #212529;
  --modal-bg: #ffffff;
  --shadow: rgba(0,0,0,0.1);
  --link-color: #0d6efd;
  --btn-outline-color: #6c757d;
  --alert-info-bg: #cff4fc;
  --alert-info-text: #055160;
  --list-group-bg: #ffffff;
  --list-group-hover: #f8f9fa;
  --list-group-active-bg: #0d6efd;
  --list-group-active-text: #fff;
  --nav-tab-active-bg: #ffffff;
  --nav-tab-active-border: #0d6efd;
}

/* ========================================
   DARK THEME
   ======================================== */
[data-theme="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-card: #1f2937;
  --bg-navbar: #0f172a;
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border-color: #374151;
  --table-stripe: #1a2332;
  --table-hover: #2a3544;
  --input-bg: #374151;
  --input-border: #4b5563;
  --input-text: #f3f4f6;
  --modal-bg: #1f2937;
  --shadow: rgba(0,0,0,0.4);
  --link-color: #60a5fa;
  --btn-outline-color: #9ca3af;
  --alert-info-bg: #1e3a5f;
  --alert-info-text: #93c5fd;
  --list-group-bg: #1f2937;
  --list-group-hover: #2a3544;
  --list-group-active-bg: #2563eb;
  --list-group-active-text: #fff;
  --nav-tab-active-bg: #1f2937;
  --nav-tab-active-border: #60a5fa;
}

/* ========================================
   BASE
   ======================================== */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--link-color); }
a:hover { color: var(--link-color); filter: brightness(1.2); }

.bg-navbar { background-color: var(--bg-navbar) !important; }
.bg-card { background-color: var(--bg-card); }
.main-content { padding-bottom: 2rem; }
.text-secondary { color: var(--text-secondary) !important; }

/* ========================================
   CARDS
   ======================================== */
.card {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
  box-shadow: 0 2px 8px var(--shadow);
}
.card-header {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ========================================
   TABLES — full dark theme override
   ======================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: var(--table-stripe);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--table-hover);
  --bs-table-hover-color: var(--text-primary);
  color: var(--text-primary);
}
.table thead th {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.table td {
  border-color: var(--border-color);
  vertical-align: middle;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--table-stripe);
  background-color: var(--table-stripe);
  color: var(--text-primary);
}
.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: transparent;
  color: var(--text-primary);
}
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-type: var(--table-hover);
  background-color: var(--table-hover);
  color: var(--text-primary);
}
/* Bordered variant */
.table-bordered { border-color: var(--border-color); }
.table-bordered td,
.table-bordered th { border-color: var(--border-color); }

/* ========================================
   FORMS & INPUTS
   ======================================== */
.form-control, .form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: #4a90d9;
  box-shadow: 0 0 0 0.2rem rgba(74,144,217,0.25);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled, .form-control[readonly],
.form-select:disabled {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
}
.form-label { color: var(--text-primary); }
.form-check-label { color: var(--text-primary); }
.input-group-text {
  background-color: var(--bg-secondary);
  border-color: var(--input-border);
  color: var(--text-secondary);
}

/* ========================================
   MODALS
   ======================================== */
.modal-content {
  background-color: var(--modal-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.modal-header {
  border-color: var(--border-color);
  color: var(--text-primary);
}
.modal-footer { border-color: var(--border-color); }
.modal-title { color: var(--text-primary); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ========================================
   DROPDOWNS
   ======================================== */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] .dropdown-item { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}
[data-theme="dark"] .dropdown-divider { border-color: var(--border-color); }

/* ========================================
   BUTTONS — dark theme adjustments
   ======================================== */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-color);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
[data-theme="dark"] .btn-outline-primary {
  color: #60a5fa;
  border-color: #60a5fa;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background-color: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
[data-theme="dark"] .btn-outline-danger {
  color: #f87171;
  border-color: #f87171;
}
[data-theme="dark"] .btn-outline-danger:hover {
  background-color: #dc2626;
  color: #fff;
}
[data-theme="dark"] .btn-outline-warning {
  color: #fbbf24;
  border-color: #fbbf24;
}
[data-theme="dark"] .btn-outline-warning:hover {
  background-color: #d97706;
  color: #fff;
}
[data-theme="dark"] .btn-outline-success {
  color: #34d399;
  border-color: #34d399;
}
[data-theme="dark"] .btn-outline-success:hover {
  background-color: #059669;
  color: #fff;
}
[data-theme="dark"] .btn-secondary {
  background-color: #4b5563;
  border-color: #4b5563;
  color: #f3f4f6;
}

/* Popover dark theme */
[data-theme="dark"] .popover {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .popover-body {
  color: var(--text-primary);
}
[data-theme="dark"] .popover-body a {
  color: var(--link-color);
}
[data-theme="dark"] .bs-popover-start > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
  border-left-color: var(--bg-card);
}
[data-theme="dark"] .bs-popover-end > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
  border-right-color: var(--bg-card);
}
[data-theme="dark"] .bs-popover-top > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
  border-top-color: var(--bg-card);
}
[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
  border-bottom-color: var(--bg-card);
}

/* Status filter dropdown */
#statusCheckboxes .form-check-label {
  font-size: 0.85rem;
  cursor: pointer;
}
[data-theme="dark"] #statusCheckboxes {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] #statusCheckboxes .form-check-label {
  color: var(--text-primary);
}

/* ========================================
   ALERTS
   ======================================== */
[data-theme="dark"] .alert-info {
  background-color: var(--alert-info-bg);
  border-color: #1e3a5f;
  color: var(--alert-info-text);
}
[data-theme="dark"] .alert-danger {
  background-color: #3b1219;
  border-color: #5c1d2a;
  color: #fca5a5;
}
[data-theme="dark"] .alert-success {
  background-color: #0f291e;
  border-color: #14532d;
  color: #86efac;
}
[data-theme="dark"] .alert-warning {
  background-color: #2d1f04;
  border-color: #451a03;
  color: #fde68a;
}
[data-theme="dark"] .alert-secondary {
  background-color: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

/* ========================================
   PRE / CODE — dark theme
   ======================================== */
[data-theme="dark"] pre {
  background-color: #0f172a !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
[data-theme="dark"] code {
  color: #e879f9;
}
[data-theme="dark"] pre code {
  color: #a5f3fc;
}

/* ========================================
   LIST GROUPS
   ======================================== */
.list-group-item {
  background-color: var(--list-group-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--list-group-hover);
  color: var(--text-primary);
}
.list-group-item.active {
  background-color: var(--list-group-active-bg);
  border-color: var(--list-group-active-bg);
  color: var(--list-group-active-text);
}

/* ========================================
   TABS / NAV
   ======================================== */
[data-theme="dark"] .nav-tabs {
  border-color: var(--border-color);
}
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary);
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--nav-tab-active-bg);
  border-color: var(--border-color) var(--border-color) var(--nav-tab-active-bg);
  color: var(--text-primary);
}

/* ========================================
   BADGES — force readability
   ======================================== */
.badge { font-weight: 500; }
.badge-orange { background-color: #fd7e14; color: #fff; }
.badge-purple { background-color: #6f42c1; color: #fff; }
[data-theme="dark"] .badge.bg-secondary { background-color: #4b5563 !important; color: #f3f4f6; }
[data-theme="dark"] .badge.bg-success { background-color: #059669 !important; color: #fff; }
[data-theme="dark"] .badge.bg-danger { background-color: #dc2626 !important; color: #fff; }
[data-theme="dark"] .badge.bg-warning { background-color: #d97706 !important; color: #fff; }
[data-theme="dark"] .badge.bg-primary { background-color: #2563eb !important; color: #fff; }
[data-theme="dark"] .badge.bg-info { background-color: #0891b2 !important; color: #fff; }

/* ========================================
   PAGINATION
   ======================================== */
.pagination .page-link {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.pagination .page-link:hover {
  background-color: var(--table-hover);
  color: var(--text-primary);
}
.pagination .page-item.active .page-link {
  background-color: #4a90d9;
  border-color: #4a90d9;
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-muted);
}

/* ========================================
   FLATPICKR — dark theme
   ======================================== */
[data-theme="dark"] .flatpickr-calendar {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
[data-theme="dark"] .flatpickr-day {
  color: var(--text-primary);
}
[data-theme="dark"] .flatpickr-day:hover {
  background: var(--table-hover);
  border-color: var(--border-color);
}
[data-theme="dark"] .flatpickr-day.selected {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
[data-theme="dark"] .flatpickr-day.today {
  border-color: #60a5fa;
}
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year {
  background: transparent;
  color: var(--text-primary);
}
[data-theme="dark"] .flatpickr-weekday {
  color: var(--text-secondary);
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
  color: var(--text-primary);
  fill: var(--text-primary);
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
  fill: var(--text-primary);
}
[data-theme="dark"] span.flatpickr-weekday {
  color: var(--text-secondary);
  background: transparent;
}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled {
  color: var(--text-muted);
}
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
  color: var(--text-muted);
}

/* ========================================
   STAT CARDS
   ======================================== */
.stat-card {
  border-radius: 10px;
  padding: 1.25rem;
  transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card-link { cursor: pointer; }
.stat-card-link:hover { box-shadow: 0 4px 16px var(--shadow); }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; }
.stat-card .stat-label { font-size: 0.85rem; }

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-msg {
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  animation: slideIn 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.toast-success { background-color: #059669; }
.toast-error { background-color: #dc2626; }
.toast-warning { background-color: #d97706; color: #fff; }
.toast-info { background-color: #0891b2; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ========================================
   LOGIN PAGE
   ======================================== */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
}
.login-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 8px 32px var(--shadow);
}

/* ========================================
   SPINNER
   ======================================== */
.spinner-btn {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   RESPONSIVE
   ======================================== */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ========================================
   UPDATE INDICATOR
   ======================================== */
.update-indicator {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1050;
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: none;
}
.update-indicator.active { display: inline-block; }

/* ========================================
   EDITABLE CELL
   ======================================== */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--link-color) !important; }
.sort-icon { font-size: 0.7rem; margin-left: 3px; }

.editable-cell { cursor: pointer; border-bottom: 1px dashed var(--text-secondary); }
.editable-cell:hover { color: #60a5fa; }

/* ========================================
   SCROLLBAR (dark theme)
   ======================================== */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ========================================
   MISC DARK OVERRIDES
   ======================================== */
[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: var(--text-primary);
}
[data-theme="dark"] .fw-semibold,
[data-theme="dark"] .fw-bold {
  color: var(--text-primary);
}
[data-theme="dark"] small { color: var(--text-secondary); }
[data-theme="dark"] .text-success { color: #34d399 !important; }
[data-theme="dark"] .text-danger { color: #f87171 !important; }
[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .text-primary { color: #60a5fa !important; }
[data-theme="dark"] .text-info { color: #22d3ee !important; }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .text-light { color: var(--text-primary) !important; }
[data-theme="dark"] .border-success { border-color: #059669 !important; }
[data-theme="dark"] .border-danger { border-color: #dc2626 !important; }
[data-theme="dark"] .stat-refused-card { border-color: #f87171 !important; }
.stat-refused-card { border-color: #dc3545 !important; }
[data-theme="dark"] .border-warning { border-color: #d97706 !important; }
[data-theme="dark"] .border-primary { border-color: #2563eb !important; }
[data-theme="dark"] .border-info { border-color: #0891b2 !important; }