/* Light & Dark Theme Variables for Anas Bin Malik School Platform */

:root {
  --gold: #F5A623;
  --gold-dark: #D4891A;
  --gold-light: #FFF3DC;
  --teal: #4BBFCA;
  --teal-dark: #35A3AE;
  --teal-light: #E8F8FA;
  --white: #FFFFFF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --dark: #0b1220;
  --dark-surface: #16202f;
  --card-bg: #FFFFFF;
  --card-text: #1E293B;
  --card-text-soft: #64748B;
  --card-border: #E2E8F0;
  --body-bg: #FFFFFF;
  --body-text: #1F2937;
  --nav-bg: rgba(255, 255, 255, 0.96);
  --section-alt-bg: #F9FAFB;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --radius: 16px;
  --radius-sm: 8px;
}

/* Dark Theme overrides when html has .dark-theme */
html.dark-theme {
  --body-bg: #070b14;
  --body-text: #E5E7EB;
  --card-bg: #111a28;
  --card-text: #F1F5F9;
  --card-text-soft: #94A3B8;
  --card-border: rgba(245, 166, 35, 0.2);
  --nav-bg: rgba(11, 18, 32, 0.96);
  --section-alt-bg: #0c1424;
  --gray-50: #0f172a;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-600: #94A3B8;
  --gray-800: #F1F5F9;
  --gold-light: rgba(245, 166, 35, 0.15);
  --teal-light: rgba(75, 191, 202, 0.15);
  --white: #111a28;
}

body {
  background-color: var(--body-bg) !important;
  color: var(--body-text) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark-theme .navbar {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--card-border) !important;
}

html.dark-theme .navbar-links a {
  color: #CBD5E1 !important;
}
html.dark-theme .navbar-links a:hover {
  color: var(--gold) !important;
}

html.dark-theme .section-alt {
  background-color: var(--section-alt-bg) !important;
}

html.dark-theme .section-title {
  color: #F8FAFC !important;
}

html.dark-theme .section-desc {
  color: #94A3B8 !important;
}

html.dark-theme .vision-card,
html.dark-theme .about-card,
html.dark-theme .value-card,
html.dark-theme .testimonial-card,
html.dark-theme .contact-card-box,
html.dark-theme .branch-card,
html.dark-theme .news-card,
html.dark-theme .event-card,
html.dark-theme .card,
html.dark-theme .section,
html.dark-theme .login-card,
html.dark-theme .section-card,
html.dark-theme .stat-card,
html.dark-theme .modal-card,
html.dark-theme .article-card {
  background-color: var(--card-bg) !important;
  color: var(--card-text) !important;
  border-color: var(--card-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

html.dark-theme .vision-card h3,
html.dark-theme .about-card h4,
html.dark-theme .value-card h4,
html.dark-theme .testimonial-card .t-name,
html.dark-theme .contact-card-box .cc-label,
html.dark-theme .branch-name,
html.dark-theme .news-card h3,
html.dark-theme .event-card h3,
html.dark-theme .section h3,
html.dark-theme .login-card h2,
html.dark-theme .section-header h2 {
  color: #FFFFFF !important;
}

html.dark-theme .vision-card p,
html.dark-theme .about-card p,
html.dark-theme .value-card p,
html.dark-theme .testimonial-card .t-content,
html.dark-theme .news-card p,
html.dark-theme .event-card p,
html.dark-theme .section .section-sub,
html.dark-theme .login-card p.sub {
  color: var(--card-text-soft) !important;
}

html.dark-theme .field input,
html.dark-theme .field select,
html.dark-theme .field textarea,
html.dark-theme .search-input,
html.dark-theme .filter-select {
  background-color: #0d1522 !important;
  color: #F1F5F9 !important;
  border-color: #27364b !important;
}

html.dark-theme table.data-table th {
  background-color: #0d1522 !important;
  color: #CBD5E1 !important;
  border-color: #27364b !important;
}

html.dark-theme table.data-table td {
  border-color: #27364b !important;
  color: #E2E8F0 !important;
}

html.dark-theme .drawer-panel {
  background-color: #0b1220 !important;
  color: #F1F5F9 !important;
}
html.dark-theme .drawer-nav a {
  color: #E2E8F0 !important;
}
html.dark-theme .drawer-contacts {
  background-color: #111a28 !important;
}

/* Dark Theme overrides for Portals (Teacher, Parents, Supervisor, Driver) */
html.dark-theme .class-tab,
html.dark-theme .bus-tab,
html.dark-theme .child-tab,
html.dark-theme .trip-toggle-btn,
html.dark-theme .status-btn,
html.dark-theme .reinf-type-chip,
html.dark-theme .btn-secondary,
html.dark-theme .btn-unified-profile,
html.dark-theme .contact-card,
html.dark-theme .trip-status-banner,
html.dark-theme .reinf-types-box,
html.dark-theme .reinf-give-form,
html.dark-theme .notif-panel,
html.dark-theme .bell-btn,
html.dark-theme .student-card {
  background-color: #16202f !important;
  color: #E2E8F0 !important;
  border-color: rgba(245, 166, 35, 0.25) !important;
}

html.dark-theme .class-tab:hover,
html.dark-theme .bus-tab:hover,
html.dark-theme .child-tab:hover,
html.dark-theme .trip-toggle-btn:hover {
  background-color: #1e2d42 !important;
  color: #FFFFFF !important;
}

html.dark-theme .class-tab.active,
html.dark-theme .bus-tab.active,
html.dark-theme .child-tab.active,
html.dark-theme .trip-toggle-btn.selected {
  background-color: #F5A623 !important;
  border-color: #F5A623 !important;
  color: #0b1220 !important;
  font-weight: 700 !important;
}

html.dark-theme .panel-nav-btn {
  color: #94A3B8 !important;
}
html.dark-theme .panel-nav-btn:hover {
  background-color: rgba(245, 166, 35, 0.12) !important;
  color: #F1F5F9 !important;
}
html.dark-theme .panel-nav-btn.active {
  background-color: #F5A623 !important;
  color: #0b1220 !important;
}

html.dark-theme .status-btn[data-status="present"].selected {
  background-color: rgba(52, 211, 153, 0.18) !important;
  border-color: #34D399 !important;
  color: #34D399 !important;
}
html.dark-theme .status-btn[data-status="absent"].selected {
  background-color: rgba(248, 113, 113, 0.18) !important;
  border-color: #F87171 !important;
  color: #F87171 !important;
}
html.dark-theme .status-btn[data-status="late"].selected {
  background-color: rgba(245, 166, 35, 0.22) !important;
  border-color: #F5A623 !important;
  color: #F5A623 !important;
}
html.dark-theme .status-btn[data-status="boarded"].selected {
  background-color: rgba(245, 166, 35, 0.22) !important;
  border-color: #F5A623 !important;
  color: #F5A623 !important;
}
html.dark-theme .status-btn[data-status="dropped"].selected {
  background-color: rgba(52, 211, 153, 0.18) !important;
  border-color: #34D399 !important;
  color: #34D399 !important;
}

/* Light Theme defaults for tab buttons */
.class-tab, .bus-tab, .child-tab {
  transition: all 0.2s ease;
}
.class-tab:not(.active), .bus-tab:not(.active), .child-tab:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #E2E8F0;
}
.class-tab:not(.active):hover, .bus-tab:not(.active):hover, .child-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}
.class-tab.active, .bus-tab.active, .child-tab.active {
  background: #F5A623 !important;
  border-color: #F5A623 !important;
  color: #0b1220 !important;
  font-weight: 700 !important;
}

/* Switcher Buttons Styling */
.theme-toggle-btn, .lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 166, 35, 0.35);
  background: rgba(245, 166, 35, 0.08);
  border-radius: 50px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  transition: all 0.25s ease;
  color: inherit;
}

.theme-toggle-btn {
  width: 38px;
  height: 38px;
  font-size: 17px;
}

.lang-toggle-btn {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--gold-dark);
}

html.dark-theme .lang-toggle-btn {
  color: var(--gold);
}

.theme-toggle-btn:hover, .lang-toggle-btn:hover {
  background: var(--gold);
  color: #FFFFFF !important;
  border-color: var(--gold);
  transform: translateY(-1px);
}