/**
 * Tailwind Compatibility Layer
 * Maps legacy CSS class names (used by client-side JS) to Tailwind design system values.
 * This allows existing DOM-generating scripts to work without modification while
 * visually aligning with the Aber Group Design System.
 *
 * Remove individual sections as the corresponding JS files are migrated to use
 * Tailwind classes directly.
 */

/* ===== CSS VARIABLE BRIDGE ===== */
/* Legacy variables that per-page CSS files still reference */
:root {
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-light: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --border-light: #e2e8f0;
  --border-medium: #e2e8f0;
  --border-dark: #cbd5e1;
  --border-color: #e2e8f0;
  --primary-blue: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  --brand-teal: #2563eb;
  --brand-teal-light: #3b82f6;
  --brand-teal-dark: #1d4ed8;
  --brand-blue: #3b82f6;
  --brand-blue-dark: #1d4ed8;
  --brand-green: #059669;
  --brand-orange: #d97706;
  --success: #059669;
  --success-light: #d1fae5;
  --success-border: #a7f3d0;
  --warning: #d97706;
  --warning-light: #fef3c7;
  --warning-border: #fde68a;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --danger-border: #fecaca;
  --info: #2563eb;
  --info-light: #eff6ff;
  --info-border: #bfdbfe;
  --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;
  --black: #000000;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 2px rgba(37, 99, 235, 0.2);
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --transition-base: 0.15s ease;
  --font-base: 0.875rem;
  --font-sm: 0.8125rem;
  --font-xs: 0.75rem;
  --font-lg: 1rem;
  --font-xl: 1.125rem;
  --font-2xl: 1.25rem;
  --font-3xl: 1.5rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-2xl: 1.5rem;
}

/* ===== LAYOUT OVERRIDES ===== */
/* Override old grid layout since we now use flex shell */
#container {
  display: flex !important;
  height: 100vh !important;
  overflow: hidden !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  grid-template-areas: unset !important;
}

#header { display: none !important; }
#panel.left { display: none !important; }
#footer { display: none !important; }

/* Mobile slide-out menu — hidden by default */
#menu {
  position: absolute;
  right: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s, visibility 0.2s;
}

#menu.show, #menu[style*="visible"] {
  visibility: visible;
  opacity: 1;
}

#menuitems {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#menuitems h3 {
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-top: 1px solid #e2e8f0;
}

#menuitems .menuhead {
  border-top: none;
}

#menuitems h3:hover {
  background-color: #f1f5f9;
  border-radius: 0.375rem;
}

#menuitems .menubutton {
  text-align: right;
  cursor: pointer;
  user-select: none;
}

#mainbody {
  width: 100% !important;
  min-width: unset !important;
  grid-area: unset !important;
  justify-self: unset !important;
  display: block !important;
  padding-top: 0 !important;
}

/* ===== BUTTONS ===== */
/* Only style buttons that are NOT inside table headers */
:not(th):not(thead) > button:not(.theme-toggle):not(.ds-btn-primary):not(.ds-btn-outline):not(.ds-btn-ghost):not(.ds-btn-destructive):not(.sort-btn):not([class*="tw-"]),
input[type="button"] {
  background: #2563eb !important;
  color: white !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  margin: 0.25rem !important;
}

:not(th):not(thead) > button:not(.theme-toggle):not([class*="ds-"]):not(.sort-btn):hover:not(:disabled),
input[type="button"]:hover:not(:disabled) {
  background: #1d4ed8 !important;
  transform: none !important;
  box-shadow: none !important;
}

:not(th):not(thead) > button:not(.theme-toggle):not([class*="ds-"]):not(.sort-btn):disabled,
input[type="button"]:disabled {
  background: #93c5fd !important;
  cursor: not-allowed !important;
}

/* Table header sort buttons — must appear as plain text, not blue pills */
table th button,
table thead th button,
table.sortable th button,
table.sortable thead th button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #334155 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
  display: inline !important;
  padding: 4px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: inherit !important;
  transform: none !important;
}

table th button:hover,
table thead th button:hover,
table.sortable th button:hover,
table.sortable thead th button:hover {
  color: #0f172a !important;
  background: transparent !important;
  background-color: transparent !important;
}

#reset_button {
  background: #64748b !important;
}
#reset_button:hover { background: #475569 !important; }

/* ===== TABLES ===== */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  border-radius: 0.75rem;
  overflow: hidden;
}

th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: #475569;
  font-size: 0.875rem;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
}

tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s;
}

tr:hover {
  background-color: #f8fafc;
}

td, th {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  font-size: 0.875rem;
}

/* ===== FLIGHT/LINE ITEM TABLE (plan_components.js) ===== */
#flights .flight_header,
#flights-container .flight_header {
  background-color: #1e293b !important;
  color: white !important;
  font-weight: 500 !important;
}

.flight_row {
  background: #ffffff !important;
  transition: background-color 0.15s !important;
}
.flight_row:hover {
  background: #f8fafc !important;
}

.flight_row.flight_row_active {
  box-shadow: inset 3px 0 0 #2563eb !important;
  background-color: #eff6ff !important;
}

.line_item_header {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  font-weight: 500 !important;
}

.line_item_row:nth-child(odd) {
  background: #ffffff !important;
}
.line_item_row:nth-child(even) {
  background: #f8fafc !important;
}

.line_item_row td,
.line_item_header,
.flight_header {
  border-right: 1px solid #e2e8f0 !important;
}

/* ===== FLIGHT BUTTONS ===== */
.flight_button_column {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
}

.flight_button_column button {
  width: auto !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.75rem !important;
  border-radius: 0.375rem !important;
  background-color: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

.flight_button_column button:hover {
  background-color: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

/* ===== SEARCH BOX ===== */
#search-box {
  background: #ffffff !important;
  padding: 1.25rem !important;
  border-radius: 0.75rem !important;
  box-shadow: none !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 1.5rem !important;
}

#search-box h2 {
  color: #0f172a !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

#search-bar-item {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  color: #0f172a !important;
  transition: border-color 0.15s !important;
}

#search-bar-item:focus {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: 0 0 0 2px #2563eb !important;
}

/* ===== MAINBODY ITEMS (card wrapper) ===== */
.mainbodyitems, section.mainbodyitems {
  background: #ffffff !important;
  padding: 1.25rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

/* ===== FORMS ===== */
.form-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background-color: #f8fafc;
}

.form-section h3 {
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 500;
  color: #334155;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #0f172a;
  transition: border-color 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #2563eb;
}

/* ===== ALERTS & STATUS MESSAGES ===== */
.alert, .alert-success, .alert-warning, .alert-danger, .alert-info {
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.alert-success {
  background-color: #d1fae5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}
.alert-warning {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}
.alert-danger {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}
.alert-info {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe !important;
}

/* ===== BADGES ===== */
.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}
.badge-primary {
  background-color: #2563eb;
  color: white;
}
.badge-success {
  background-color: #d1fae5;
  color: #047857;
}
.badge-warning {
  background-color: #fef3c7;
  color: #92400e;
}
.badge-danger {
  background-color: #fef2f2;
  color: #b91c1c;
}

/* ===== CARDS ===== */
.card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.25rem;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.card-body {
  padding: 1.25rem;
}

/* ===== MODALS ===== */
.modal-backdrop, .modal-backdrop.show {
  background-color: rgba(15, 23, 42, 0.5) !important;
}
.modal-content {
  border-radius: 0.75rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
.modal-header {
  background: #1e293b !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  padding: 1rem 1.5rem !important;
}
.modal-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}
.modal-body {
  padding: 1.5rem !important;
}
.modal-footer {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* ===== COLLAPSIBLE SECTIONS ===== */
.collapsible-toggle, .collapsible-header {
  color: #334155 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.collapsible-toggle:hover, .collapsible-header:hover {
  color: #2563eb !important;
}

/* ===== LOADING STATES ===== */
.loader {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(4px) !important;
}
.loader-spinner {
  border-color: #e2e8f0 !important;
  border-top-color: #2563eb !important;
  border-right-color: #2563eb !important;
}
.loader-message, .loader-text {
  color: #64748b !important;
  font-size: 0.875rem !important;
}

/* ===== LINKS ===== */
a:link, a:visited {
  color: #334155;
  text-decoration: none;
}
a:hover {
  color: #2563eb;
}

/* Button-styled links must keep their intended text color */
a.ds-btn-primary:link, a.ds-btn-primary:visited, a.ds-btn-primary:hover,
a.ds-btn-primary {
  color: #ffffff !important;
}
a.ds-btn-outline:link, a.ds-btn-outline:visited,
a.ds-btn-outline {
  color: #334155 !important;
}
a.ds-btn-destructive:link, a.ds-btn-destructive:visited, a.ds-btn-destructive:hover,
a.ds-btn-destructive {
  color: #ffffff !important;
}

/* Sidebar links must stay light-colored */
aside a:link, aside a:visited,
aside a,
.ds-nav-link:link, .ds-nav-link:visited,
.ds-nav-link {
  color: #cbd5e1 !important;
  text-decoration: none !important;
}
aside a:hover,
.ds-nav-link:hover {
  color: #ffffff !important;
}
aside .text-white {
  color: #ffffff !important;
}
aside .text-blue-400 {
  color: #60a5fa !important;
}

/* ===== TYPOGRAPHY (override old styles) ===== */
html {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #334155 !important;
  background-color: #f8fafc !important;
}

h1 { font-size: 1.5rem !important; font-weight: 700 !important; color: #0f172a !important; margin-bottom: 0.5rem !important; }
h2 { font-size: 1.25rem !important; font-weight: 600 !important; color: #0f172a !important; }
h3 { font-size: 1rem !important; font-weight: 600 !important; color: #0f172a !important; }
h4 { font-size: 0.875rem !important; font-weight: 500 !important; color: #334155 !important; }

p { font-size: 0.875rem !important; color: #334155 !important; line-height: 1.6 !important; }

/* ===== OVERLAY / ALERT BOX ===== */
#overlay {
  background-color: rgba(15, 23, 42, 0.5) !important;
}
#alertBox {
  border-radius: 0.75rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid #e2e8f0 !important;
}

/* ===== WORKBACK SCHEDULE CARDS (workback-list.js) ===== */
.schedule-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.75rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.schedule-card:hover {
  border-color: #2563eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.schedule-card-title {
  font-weight: 600 !important;
  color: #0f172a !important;
}
.schedule-card-meta {
  color: #64748b !important;
  font-size: 0.8125rem !important;
}
.schedule-card-type {
  border-radius: 9999px !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
}

/* ===== USER MANAGEMENT (users.js) ===== */
.status-active { background: #d1fae5 !important; color: #047857 !important; }
.status-inactive { background: #fef2f2 !important; color: #b91c1c !important; }
.status-pending { background: #fef3c7 !important; color: #92400e !important; }

/* ===== DASHBOARD STATS ===== */
.dashboard-stats, .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 1rem !important;
}
.stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  padding: 1.25rem !important;
}
.stat-card h3, .stat-label {
  font-size: 0.8125rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}
.stat-card p, .stat-value {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* ===== TABS (user management, dashboard) ===== */
.dashboard-tabs, .details-tabs {
  display: flex !important;
  gap: 0.5rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-bottom: 1.5rem !important;
}
.tab-button {
  padding: 0.5rem 1rem !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  color: #64748b !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.15s !important;
}
.tab-button.active {
  color: #2563eb !important;
  border-bottom-color: #2563eb !important;
}
.tab-button:hover:not(.active) {
  color: #334155 !important;
}

/* ===== SECTION LINKS (sidebar - hidden in new layout) ===== */
.sectionlink, .partnerlink {
  display: none !important;
}

/* ===== CONTACT TABLE (client_component.js) ===== */
#contact_table th {
  background-color: #1e293b !important;
  color: white !important;
}
#contact_table a {
  color: #2563eb !important;
}
.delete-contact { color: #dc2626 !important; }

/* ===== CHAT WIDGET ===== */
.chat-widget {
  border-radius: 0.75rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* ===== NOTIFICATION TOASTS (client_view.pug) ===== */
.notification {
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}
.notification.success {
  background: #059669 !important;
  border-left: 4px solid #047857 !important;
}
.notification.error {
  background: #dc2626 !important;
  border-left: 4px solid #b91c1c !important;
}
.notification.info {
  background: #2563eb !important;
  border-left: 4px solid #1d4ed8 !important;
}
.notification.warning {
  background: #d97706 !important;
  border-left: 4px solid #b45309 !important;
}

/* ===== EMPTY STATES ===== */
.empty-state {
  text-align: center !important;
  padding: 5rem 1.5rem !important;
  color: #94a3b8 !important;
}
.empty-state h2 {
  font-size: 1.125rem !important;
  color: #64748b !important;
}

/* ===== PROGRESS BARS ===== */
.progress-container, .progress-bar-container, .pace-progress-bar {
  background: #f1f5f9 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}
.progress-bar, .pace-progress-fill {
  border-radius: 9999px !important;
}

/* ===== INLINE EDIT (user-management-enhanced.js) ===== */
.editable-cell:hover {
  background-color: #eff6ff !important;
  border: 1px dashed #2563eb !important;
}
.editable-cell.editing {
  border: 2px solid #2563eb !important;
}
.editable-cell.save-success {
  background-color: #d1fae5 !important;
}
.inline-edit-input,
.inline-edit-select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  color: #334155 !important;
}
.inline-edit-input:focus,
.inline-edit-select:focus {
  box-shadow: 0 0 0 2px #2563eb !important;
  border-color: transparent !important;
}

/* ===== DARK MODE INTEGRATION ===== */
/* Bridges the existing [data-theme="dark"] system with Tailwind-styled elements */

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

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .mainbodyitems,
[data-theme="dark"] section.mainbodyitems {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] #search-box {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .text-slate-900,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .text-slate-700,
[data-theme="dark"] p,
[data-theme="dark"] td {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400 {
  color: #94a3b8 !important;
}

[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] tr {
  border-color: #334155 !important;
}

[data-theme="dark"] th {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] tr:hover {
  background-color: #1e293b !important;
}

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

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] #search-bar-item {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] button:not(.theme-toggle):not([class*="ds-"]) {
  background: #3b82f6 !important;
}

[data-theme="dark"] button:not(.theme-toggle):not([class*="ds-"]):hover:not(:disabled) {
  background: #2563eb !important;
}

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

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

[data-theme="dark"] .flight_row:hover {
  background-color: #334155 !important;
}

[data-theme="dark"] .line_item_header {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .line_item_row:nth-child(odd) {
  background-color: #0f172a !important;
}
[data-theme="dark"] .line_item_row:nth-child(even) {
  background-color: #1e293b !important;
}

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

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

[data-theme="dark"] a:link, [data-theme="dark"] a:visited {
  color: #93c5fd !important;
}

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

/* Dark mode for the new Tailwind layout shell */
[data-theme="dark"] main.bg-slate-50,
[data-theme="dark"] .app-main {
  background-color: #0f172a !important;
}

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

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