/* ============================================================
   APP RENT — Dark / Light Mode System
   Drop-in addition to style.css
   ============================================================ */

/* ── Global smooth transition ───────────────────────────── */
*,
*::before,
*::after {
  transition:
    background-color 0.3s ease,
    border-color     0.3s ease,
    color            0.3s ease,
    box-shadow       0.3s ease,
    fill             0.3s ease;
}

/* Exclude transitions on elements that shouldn't animate */
.spin, .fade-in, canvas, img, svg {
  transition: none !important;
}

/* ── DARK MODE (default) — maps existing vars to semantic tokens ── */
:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-body:        #0a0e1a;
  --bg-sidebar:     #0f1627;
  --bg-topbar:      #0f1627;
  --bg-card:        #152035;
  --bg-card-header: #152035;
  --bg-input:       #1a2a45;
  --bg-table-head:  #1a2a45;
  --bg-table-hover: rgba(255,255,255,0.04);
  --bg-modal:       #152035;
  --bg-filter:      #152035;
  --bg-nav-hover:   rgba(255,255,255,0.05);
  --bg-nav-active:  rgba(201,150,58,0.1);
  --bg-page-badge:  rgba(255,255,255,0.05);

  /* Text */
  --text-primary:   #f0f2f7;
  --text-secondary: #9099b5;
  --text-muted:     #5a6280;
  --text-heading:   #ffffff;
  --text-label:     #9099b5;
  --text-nav:       #8a8a8a;
  --text-nav-active: #d4a84b;
  --text-topbar:    #ffffff;
  --text-user-name: #ffffff;
  --text-card-title: #ffffff;
  --text-section:   #ffffff;
  --text-stat:      #ffffff;

  /* Borders */
  --border-sidebar: rgba(201,150,58,0.15);
  --border-topbar:  rgba(201,150,58,0.12);
  --border-card:    rgba(255,255,255,0.07);
  --border-input:   rgba(255,255,255,0.1);
  --border-table:   rgba(255,255,255,0.05);
  --border-modal:   rgba(255,255,255,0.08);
  --border-divider: rgba(255,255,255,0.06);
  --border-nav-section: rgba(255,255,255,0.06);
  --border-active:  var(--gold-500);

  /* Shadows */
  --shadow-card:    0 4px 24px rgba(0,0,0,0.35);
  --shadow-card-sm: 0 2px 10px rgba(0,0,0,0.25);
  --shadow-modal:   0 25px 60px rgba(0,0,0,0.6);

  /* Toggle button */
  --toggle-bg:      rgba(255,255,255,0.08);
  --toggle-border:  rgba(255,255,255,0.15);
  --toggle-icon:    #f0f2f7;
  --toggle-hover-bg: rgba(201,150,58,0.15);
  --toggle-hover-border: rgba(201,150,58,0.4);

  /* Scrollbar */
  --scrollbar-thumb: #243556;

  /* Page badge (agence info) */
  --badge-bg:       rgba(255,255,255,0.05);
  --badge-border:   rgba(255,255,255,0.1);
  --badge-text:     #9099b5;

  /* Input placeholder */
  --placeholder:    #5a6280;

  /* Select option bg */
  --select-option-bg: #152035;

  /* Modal backdrop */
  --backdrop:       rgba(0,0,0,0.6);

  /* Pagination */
  --page-link-bg:   #1a2a45;
  --page-link-border: rgba(255,255,255,0.1);
  --page-link-color: #9099b5;
  --page-link-hover-bg: #243556;

  /* Car thumb placeholder */
  --car-placeholder-bg: #243556;

  /* Filter invert for icons */
  --btn-close-filter: invert(1) opacity(.6);

  /* Overlay for sidebar on mobile */
  --sidebar-overlay: rgba(0,0,0,0.55);

  /* User card */
  --user-role-color: #9099b5;

  /* Nav section title */
  --nav-section-color: #5a6280;

  /* Stat label */
  --stat-label-color: #9099b5;
}

/* ── LIGHT MODE ─────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg-body:        #f1f5f9;
  --bg-sidebar:     #ffffff;
  --bg-topbar:      #ffffff;
  --bg-card:        #ffffff;
  --bg-card-header: #fafbfc;
  --bg-input:       #f8fafc;
  --bg-table-head:  #f1f5f9;
  --bg-table-hover: rgba(0,0,0,0.025);
  --bg-modal:       #ffffff;
  --bg-filter:      #ffffff;
  --bg-nav-hover:   rgba(0,0,0,0.04);
  --bg-nav-active:  rgba(201,150,58,0.1);
  --bg-page-badge:  rgba(0,0,0,0.04);

  /* Text */
  --text-primary:   #1e293b;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-heading:   #0f172a;
  --text-label:     #64748b;
  --text-nav:       #64748b;
  --text-nav-active: #c9963a;
  --text-topbar:    #0f172a;
  --text-user-name: #0f172a;
  --text-card-title: #0f172a;
  --text-section:   #0f172a;
  --text-stat:      #0f172a;

  /* Borders */
  --border-sidebar: rgba(0,0,0,0.08);
  --border-topbar:  rgba(0,0,0,0.08);
  --border-card:    rgba(0,0,0,0.07);
  --border-input:   rgba(0,0,0,0.12);
  --border-table:   rgba(0,0,0,0.06);
  --border-modal:   rgba(0,0,0,0.1);
  --border-divider: rgba(0,0,0,0.07);
  --border-nav-section: rgba(0,0,0,0.07);
  --border-active:  var(--gold-500);

  /* Shadows */
  --shadow-card:    0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-card-sm: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-modal:   0 20px 60px rgba(0,0,0,0.15);

  /* Toggle button */
  --toggle-bg:      rgba(0,0,0,0.06);
  --toggle-border:  rgba(0,0,0,0.12);
  --toggle-icon:    #475569;
  --toggle-hover-bg: rgba(201,150,58,0.12);
  --toggle-hover-border: rgba(201,150,58,0.4);

  /* Scrollbar */
  --scrollbar-thumb: #cbd5e1;

  /* Page badge */
  --badge-bg:       rgba(0,0,0,0.04);
  --badge-border:   rgba(0,0,0,0.1);
  --badge-text:     #475569;

  /* Input placeholder */
  --placeholder:    #94a3b8;

  /* Select option bg */
  --select-option-bg: #ffffff;

  /* Modal backdrop */
  --backdrop:       rgba(15,23,42,0.5);

  /* Pagination */
  --page-link-bg:   #ffffff;
  --page-link-border: rgba(0,0,0,0.1);
  --page-link-color: #475569;
  --page-link-hover-bg: #f1f5f9;

  /* Car thumb placeholder */
  --car-placeholder-bg: #e2e8f0;

  /* Filter invert for icons */
  --btn-close-filter: none;

  /* Overlay */
  --sidebar-overlay: rgba(15,23,42,0.4);

  /* User card */
  --user-role-color: #64748b;

  /* Nav section title */
  --nav-section-color: #94a3b8;

  /* Stat label */
  --stat-label-color: #64748b;
}

/* ═══════════════════════════════════════════════════════════
   APPLY SEMANTIC TOKENS TO COMPONENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Body ───────────────────────────────────────────────── */
body {
  background: var(--bg-body) !important;
  color:       var(--text-primary) !important;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
  background:   var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-sidebar) !important;
}

.sidebar-brand {
  border-bottom: 1px solid var(--border-divider) !important;
}

.sidebar-footer {
  border-top: 1px solid var(--border-divider) !important;
}

.nav-section-title {
  color: var(--nav-section-color) !important;
}

.nav-item .nav-link {
  color: var(--text-nav) !important;
}

.nav-item .nav-link:hover {
  background: var(--bg-nav-hover) !important;
  color: var(--text-primary) !important;
}

.nav-item .nav-link.active {
  background:   var(--bg-nav-active) !important;
  color:        var(--text-nav-active) !important;
  border-right: 3px solid var(--border-active) !important;
}

.nav-item .nav-link svg {
  color: var(--text-nav) !important;
}

.nav-item .nav-link.active svg,
.nav-item .nav-link:hover svg {
  color: inherit !important;
}

/* Sidebar scrollbar */
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
}

/* User card */
.user-name { color: var(--text-user-name) !important; }
.user-role { color: var(--user-role-color) !important; }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  background:    var(--bg-topbar) !important;
  border-bottom: 1px solid var(--border-topbar) !important;
}

.topbar-title {
  color: var(--text-topbar) !important;
}

.topbar-btn {
  border-color: var(--border-input) !important;
  color:        var(--text-secondary) !important;
}

.topbar-btn:hover {
  border-color: var(--gold-400) !important;
  color:        var(--gold-400) !important;
}

/* Topbar info badges (AgenceName, Plan) */
.topbar-info-badge {
  background:  var(--badge-bg) !important;
  border-color: var(--badge-border) !important;
  color:        var(--badge-text) !important;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background:  var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow:   var(--shadow-card-sm) !important;
}

.card-header {
  background:    var(--bg-card-header) !important;
  border-bottom: 1px solid var(--border-card) !important;
}

.card-title {
  color: var(--text-card-title) !important;
}

/* ── Stat Cards ─────────────────────────────────────────── */
.stat-card {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow:   var(--shadow-card-sm) !important;
}

.stat-card:hover {
  box-shadow: var(--shadow-card) !important;
}

.stat-value {
  color: var(--text-stat) !important;
}

.stat-label {
  color: var(--stat-label-color) !important;
}

/* ── KPI Cards (dashboard) ──────────────────────────────── */
.kpi {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow:   var(--shadow-card-sm) !important;
}

.kpi-lbl {
  color: var(--stat-label-color) !important;
}

/* ── Tables ─────────────────────────────────────────────── */
.table-dark-custom {
  color: var(--text-primary) !important;
}

.table-dark-custom thead th {
  background:    var(--bg-table-head) !important;
  color:         var(--text-label) !important;
  border-bottom: 1px solid var(--border-table) !important;
}

.table-dark-custom tbody tr {
  border-bottom: 1px solid var(--border-table) !important;
}

.table-dark-custom tbody tr:hover {
  background: var(--bg-table-hover) !important;
}

.table-dark-custom td {
  color: var(--text-primary) !important;
  border-color: var(--border-table) !important;
}

/* Bootstrap default table overrides */
[data-theme="light"] .table {
  color: var(--text-primary) !important;
  --bs-table-striped-bg: rgba(0,0,0,0.02);
  --bs-table-hover-bg:   rgba(0,0,0,0.025);
  --bs-table-border-color: var(--border-table);
}

/* ── Forms ──────────────────────────────────────────────── */
.form-label {
  color: var(--text-label) !important;
}

.form-control,
.form-select {
  background:  var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color:        var(--text-primary) !important;
}

.form-control:focus,
.form-select:focus {
  background:  var(--bg-input) !important;
  border-color: var(--gold-500) !important;
  color:        var(--text-primary) !important;
  box-shadow:   0 0 0 3px var(--gold-glow) !important;
}

.form-control::placeholder {
  color: var(--placeholder) !important;
}

.form-select option {
  background: var(--select-option-bg) !important;
  color:      var(--text-primary) !important;
}

.form-text {
  color: var(--text-muted) !important;
}

.input-group-text {
  background:   var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color:        var(--text-secondary) !important;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-outline-light {
  border-color: var(--border-input) !important;
  color:        var(--text-secondary) !important;
}

.btn-outline-light:hover {
  background:   var(--bg-nav-hover) !important;
  color:        var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

[data-theme="light"] .btn-close {
  filter: var(--btn-close-filter) !important;
}

/* ── Modals ─────────────────────────────────────────────── */
.modal-content {
  background:   var(--bg-modal) !important;
  border-color: var(--border-modal) !important;
  box-shadow:   var(--shadow-modal) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border-modal) !important;
}

.modal-title {
  color: var(--text-heading) !important;
}

.modal-footer {
  border-top: 1px solid var(--border-modal) !important;
}

/* Modal backdrop */
[data-theme="light"] .modal-backdrop {
  background: var(--backdrop) !important;
}

/* ── Section Headers ────────────────────────────────────── */
.section-title {
  color: var(--text-section) !important;
}

.section-subtitle {
  color: var(--text-secondary) !important;
}

/* ── Filter Bar ─────────────────────────────────────────── */
.filter-bar {
  background:   var(--bg-filter) !important;
  border-color: var(--border-card) !important;
}

/* ── Pagination ─────────────────────────────────────────── */
.page-link {
  background:   var(--page-link-bg) !important;
  border-color: var(--page-link-border) !important;
  color:        var(--page-link-color) !important;
}

.page-link:hover {
  background: var(--page-link-hover-bg) !important;
  color:      var(--gold-400) !important;
  border-color: var(--gold-500) !important;
}

/* ── Car Thumb Placeholder ──────────────────────────────── */
.car-thumb-placeholder {
  background: var(--car-placeholder-bg) !important;
  color:      var(--text-muted) !important;
}

.car-thumb {
  border-color: var(--border-card) !important;
}

/* ── Divider / Gold Rule ────────────────────────────────── */
.divider {
  border-color: var(--border-divider) !important;
}

/* ── Alerts ─────────────────────────────────────────────── */
[data-theme="light"] .alert-success { background: rgba(34,197,94,0.08); }
[data-theme="light"] .alert-danger  { background: rgba(239,68,68,0.08); }
[data-theme="light"] .alert-warning { background: rgba(245,158,11,0.08); }
[data-theme="light"] .alert-info    { background: rgba(59,130,246,0.08); }

/* ── Dropdowns (Bootstrap) ──────────────────────────────── */
.dropdown-menu {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow:   var(--shadow-card) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background: var(--bg-nav-hover) !important;
  color:      var(--text-primary) !important;
}

.dropdown-divider {
  border-color: var(--border-divider) !important;
}

/* ── Sidebar overlay (mobile) ───────────────────────────── */
[data-theme="light"] .sidebar-overlay.show {
  background: var(--sidebar-overlay) !important;
}

/* ── Sidebar toggle icon ────────────────────────────────── */
.sidebar-toggle {
  color: var(--text-secondary) !important;
}

/* ── Login page ─────────────────────────────────────────── */
.login-page {
  background: var(--bg-body) !important;
}

.login-card {
  background:   var(--bg-card) !important;
  border-color: rgba(201,150,58,0.2) !important;
  box-shadow:   var(--shadow-modal) !important;
}

/* ── Text utilities ─────────────────────────────────────── */
.text-muted {
  color: var(--text-muted) !important;
}

/* ── a links ─────────────────────────────────────────────── */
[data-theme="light"] a {
  color: var(--gold-500);
}

/* ── Subscription warning banner ───────────────────────── */
/* (keep as-is — it has its own inline styles) */

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON COMPONENT
   ═══════════════════════════════════════════════════════════ */

.theme-toggle-btn {
  position:   relative;
  display:    inline-flex;
  align-items: center;
  justify-content: center;
  width:      38px;
  height:     38px;
  border:     1px solid var(--toggle-border);
  border-radius: 10px;
  background: var(--toggle-bg);
  cursor:     pointer;
  flex-shrink: 0;
  overflow:   hidden;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.theme-toggle-btn:hover {
  background:   var(--toggle-hover-bg) !important;
  border-color: var(--toggle-hover-border) !important;
  transform:    translateY(-1px);
}

.theme-toggle-btn:active {
  transform: scale(0.93);
}

/* Icon container — we swap via JS */
.theme-toggle-icon {
  font-size:   17px;
  line-height: 1;
  transition:  opacity 0.2s ease, transform 0.3s ease !important;
  color:       var(--toggle-icon);
}

/* Spin animation when toggling */
.theme-toggle-btn.spinning .theme-toggle-icon {
  animation: iconSpin 0.35s ease forwards;
}

@keyframes iconSpin {
  0%   { opacity: 1; transform: rotate(0deg)   scale(1);   }
  50%  { opacity: 0; transform: rotate(90deg)  scale(0.6); }
  51%  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  100% { opacity: 1; transform: rotate(0deg)   scale(1);   }
}

/* ── Light mode logo adjustment ───────────────────────────── */
[data-theme="light"] .sidebar-brand img {
  filter: none !important;
}

/* ── Light mode: Recent items separator ───────────────────── */
[data-theme="light"] .recent-item {
  border-bottom-color: var(--border-card) !important;
}

/* ── Light mode: topbar-info-badge override for inline styles ─ */
[data-theme="light"] [style*="rgba(255,255,255,0.05)"] {
  background: var(--badge-bg) !important;
}
[data-theme="light"] [style*="rgba(255,255,255,0.1)"] {
  border-color: var(--badge-border) !important;
}
[data-theme="light"] [style*="color:var(--white)"] {
  color: var(--text-primary) !important;
}
[data-theme="light"] [style*="color:var(--gray-300)"] {
  color: var(--text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD-SPECIFIC OVERRIDES
   Classes defined inline in dashboard.php <style> block
   ═══════════════════════════════════════════════════════════ */

/* KPI cards */
.kpi {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) !important;
}
.kpi:hover {
  border-color: var(--border-input) !important;
}
.kpi-val  { color: var(--text-heading) !important; }
.kpi-lbl  { color: var(--text-secondary) !important; }
.kpi-sub  { color: var(--text-muted) !important; }

/* Progress bar background */
.gbar {
  background: var(--border-table) !important;
}

/* Section separator */
.grid-sep { color: var(--text-secondary) !important; }
.grid-sep::after { background: var(--border-table) !important; }

/* Chart & fleet panel cards */
.chart-card,
.fleet-panel {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) !important;
}
.panel-hd {
  border-bottom-color: var(--border-card) !important;
}
.panel-title { color: var(--text-heading) !important; }
.panel-sub   { color: var(--text-secondary) !important; }

/* Finance info rows */
.fi-lbl { color: var(--text-secondary) !important; }
.fi-val { color: var(--text-heading) !important; }
.fi-pct { color: var(--text-muted) !important; }
.fdiv   { background: var(--border-card) !important; }

/* Quick links */
.ql {
  background:   var(--bg-table-hover) !important;
  border-color: var(--border-card) !important;
  color:        var(--text-secondary) !important;
}
.ql:hover {
  background:   var(--bg-nav-hover) !important;
  color:        var(--text-primary) !important;
}

/* Recent reservations card */
.recent-card {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) !important;
}
.res-title    { color: var(--text-heading) !important; }
.res-subtitle { color: var(--text-secondary) !important; }

/* Reservation filter buttons */
.res-filters {
  border-bottom-color: var(--border-card) !important;
}
.res-filter-btn {
  border-color: var(--border-input) !important;
  color:        var(--text-secondary) !important;
}
.res-filter-btn:hover,
.res-filter-btn.active {
  background:   rgba(201,150,58,0.1) !important;
  border-color: var(--gold-500) !important;
  color:        var(--gold-400) !important;
}

/* Search inside reservations mini-table */
.res-search input {
  background:   var(--bg-table-hover) !important;
  border-color: var(--border-input) !important;
  color:        var(--text-primary) !important;
}
.res-search input::placeholder {
  color: var(--placeholder) !important;
}
.res-search-ico { color: var(--text-muted) !important; }

/* Reservations mini-table */
.res-table th  { color: var(--text-muted) !important; }
.res-table td  {
  color:        var(--text-primary) !important;
  border-top-color: var(--border-table) !important;
}
.res-table tbody tr:hover {
  background: var(--bg-table-hover) !important;
}
.res-client  { color: var(--text-heading) !important; }
.res-vehicle { color: var(--text-secondary) !important; }
.res-empty   { color: var(--text-muted) !important; }

/* Eye / action buttons */
.res-eye {
  background:   var(--bg-table-hover) !important;
  border-color: var(--border-card) !important;
  color:        var(--text-secondary) !important;
}
.res-eye:hover {
  background: rgba(201,150,58,0.1) !important;
  color: var(--gold-400) !important;
}

/* KPI badge muted (the gray pill badge on cards) */
.kpi-badge.muted {
  background:   var(--bg-table-hover) !important;
  border-color: var(--border-input) !important;
  color:        var(--text-secondary) !important;
}

/* ── Light mode: KPI hover border ────────────────────────── */
[data-theme="light"] .kpi:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.14) !important;
}

/* ── Voitures / Cars page specific ───────────────────────── */
.car-grid-card {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) !important;
}
.car-grid-card:hover {
  border-color: var(--gold-500) !important;
}
.car-info-label { color: var(--text-muted) !important; }
.car-info-value { color: var(--text-primary) !important; }
.car-name       { color: var(--text-heading) !important; }
.car-plate      { color: var(--text-secondary) !important; }

/* ── Clients page specific ───────────────────────────────── */
.client-name   { color: var(--text-heading) !important; }
.client-detail { color: var(--text-secondary) !important; }

/* ── Welcome block (inline style on dashboard) ───────────── */
[data-theme="light"] [style*="font-size:22px"][style*="font-weight:700"] {
  color: var(--text-heading) !important;
}
[data-theme="light"] [style*="font-size:13px"][style*="color:var(--text-secondary)"] {
  color: var(--text-secondary) !important;
}

/* ── Background wavy decoration (Voitures/Clients pages) ─── */
/* The animated SVG background should be invisible in light mode */
[data-theme="light"] .page-decor,
[data-theme="light"] .bg-decoration,
[data-theme="light"] .wave-bg {
  opacity: 0.04 !important;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — PAGE BACKGROUND DECORATION FIX
   The animated wavy lines visible in Voitures/Clients pages
   ═══════════════════════════════════════════════════════════ */

/* The SVG/canvas decorative background on module pages */
[data-theme="light"] canvas:not([id]),
[data-theme="light"] .page-bg-anim {
  opacity: 0.05 !important;
}

/* ── Inline style overrides for module pages ─────────────── */
/* Cards with hardcoded dark backgrounds in module list pages */
[data-theme="light"] [style*="background: var(--bg-card)"],
[data-theme="light"] [style*="background:var(--bg-card)"] {
  background: #ffffff !important;
}

/* Hardcoded color on inline spans/divs in tables */
[data-theme="light"] td,
[data-theme="light"] th {
  color: var(--text-primary) !important;
  border-color: var(--border-table) !important;
}

/* ── Module page section headers ─────────────────────────── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5 {
  color: var(--text-heading) !important;
}

/* ── Select & input in filter bars ──────────────────────── */
[data-theme="light"] select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] textarea {
  background:   var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color:        var(--text-primary) !important;
}

/* ── Bootstrap table override (module pages use .table) ──── */
[data-theme="light"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-table) !important;
}

[data-theme="light"] .table-hover > tbody > tr:hover > * {
  background-color: var(--bg-table-hover) !important;
}

/* ── Small inline color overrides in module pages ────────── */
/* text-muted Bootstrap class */
[data-theme="light"] .text-muted {
  color: var(--text-muted) !important;
}

/* Secondary text color */
[data-theme="light"] small,
[data-theme="light"] .small {
  color: var(--text-secondary) !important;
}

/* ── Action button group in tables ──────────────────────── */
[data-theme="light"] .btn-outline-light {
  border-color: var(--border-input) !important;
  color:        var(--text-secondary) !important;
}
[data-theme="light"] .btn-outline-light:hover {
  background:   var(--bg-nav-hover) !important;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
[data-theme="light"] .breadcrumb-item,
[data-theme="light"] .breadcrumb-item a {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .breadcrumb-item.active {
  color: var(--text-primary) !important;
}

/* ── List group ──────────────────────────────────────────── */
[data-theme="light"] .list-group-item {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) !important;
  color:        var(--text-primary) !important;
}

/* ── Nav tabs (used in some module detail pages) ─────────── */
[data-theme="light"] .nav-tabs {
  border-color: var(--border-card) !important;
}
[data-theme="light"] .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .nav-tabs .nav-link.active {
  background:   var(--bg-card) !important;
  border-color: var(--border-card) var(--border-card) var(--bg-card) !important;
  color:        var(--text-heading) !important;
}

/* ── Badge muted override for light ─────────────────────── */
[data-theme="light"] .bg-secondary {
  background: rgba(0,0,0,0.06) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(0,0,0,0.1) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — SEMANTIC ALIASES FOR DARK-ONLY PALETTE VARS
   Fixes inline styles using --navy-*, --gray-*, --white
   ═══════════════════════════════════════════════════════════ */

/* These dark-palette vars are used heavily in inline styles.
   In light mode we remap them to readable light equivalents. */

[data-theme="light"] {
  /* Navy scale → light neutrals */
  --navy-900:  #f8fafc;
  --navy-800:  #f1f5f9;
  --navy-700:  #ffffff;
  --navy-600:  #f1f5f9;
  --navy-500:  #e2e8f0;
  --navy-400:  #cbd5e1;

  /* Gray scale → slate equivalents */
  --gray-100:  #0f172a;
  --gray-200:  #334155;
  --gray-300:  #475569;
  --gray-400:  #64748b;
  --gray-500:  #94a3b8;
  --gray-600:  #94a3b8;

  /* White → dark text */
  --white:     #0f172a;

  /* Fix rgba(255,255,255,...) inline borders that appear in light */
  --inline-border-subtle: rgba(0,0,0,0.1);
}

/* ── Plate number badge fix (view.php) ───────────────────── */
[data-theme="light"] [style*="background:var(--navy-600)"][style*="rgba(255,255,255,0.1)"],
[data-theme="light"] span[style*="navy-600"] {
  background: #e2e8f0 !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #1e293b !important;
}

/* ── Payment form box (view.php, add.php) ────────────────── */
[data-theme="light"] form[style*="navy-600"],
[data-theme="light"] [style*="background:var(--navy-600)"],
[data-theme="light"] [style*="background: var(--navy-600)"] {
  background: #f8fafc !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* ── Calc box (add.php) ──────────────────────────────────── */
[data-theme="light"] #calcBox {
  background: #f8fafc !important;
  border-color: rgba(201,150,58,0.25) !important;
}

/* ── Documents card ──────────────────────────────────────── */
[data-theme="light"] .doc-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── Notes box (view.php) ────────────────────────────────── */
[data-theme="light"] [style*="navy-600"][style*="border-radius:8px"] {
  background: #f1f5f9 !important;
}

/* ── Recap sidebar table rows ────────────────────────────── */
[data-theme="light"] [style*="rgba(255,255,255,0.06)"] {
  border-color: rgba(0,0,0,0.07) !important;
}
[data-theme="light"] [style*="rgba(255,255,255,0.04)"] {
  border-color: rgba(0,0,0,0.05) !important;
}

/* ── Calendar specific fixes ─────────────────────────────── */
[data-theme="light"] {
  --tl-border:  rgba(0,0,0,0.08);
  --tl-border2: rgba(0,0,0,0.05);
}

[data-theme="light"] .tl-day-header,
[data-theme="light"] .tl-header-cell {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .tl-day-cell {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.06) !important;
}

[data-theme="light"] .tl-day-cell:hover {
  background: #f8fafc !important;
}

[data-theme="light"] .tl-day-number {
  color: #475569 !important;
}

[data-theme="light"] .tl-day-number.today {
  color: #0f172a !important;
}

[data-theme="light"] .tl-container,
[data-theme="light"] .calendar-grid,
[data-theme="light"] .tl-wrapper {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.07) !important;
}

/* Calendar popup */
[data-theme="light"] .tl-popup,
[data-theme="light"] .cal-popup {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}

[data-theme="light"] [style*="background: #161b22"],
[data-theme="light"] [style*="background:#161b22"] {
  background: #ffffff !important;
}

[data-theme="light"] [style*="rgba(0,0,0,0.6)"][style*="box-shadow"] {
  box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06) !important;
}

/* Calendar empty slot */
[data-theme="light"] [style*="rgba(255,255,255,0.015)"],
[data-theme="light"] [style*="rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="rgba(255,255,255,0.05)"] {
  background: rgba(0,0,0,0.02) !important;
}

/* ── Finance page dark sections ──────────────────────────── */
[data-theme="light"] .fin-dark-section,
[data-theme="light"] [style*="background:var(--navy"] {
  background: #f8fafc !important;
  color: var(--text-primary) !important;
}

/* Finance header bar */
[data-theme="light"] .finance-header,
[data-theme="light"] .fin-header {
  background: #1e293b !important;
}

/* ── btn-gold text fix in light mode ─────────────────────── */
[data-theme="light"] .btn-gold,
[data-theme="light"] .btn-gold:hover,
[data-theme="light"] .btn-gold:focus,
[data-theme="light"] .btn-gold:active {
  color: #ffffff !important;
}


/* ── Misc color overrides using #e8e8e8 / #555 ──────────── */
[data-theme="light"] [style*="color: #e8e8e8"],
[data-theme="light"] [style*="color:#e8e8e8"] {
  color: #1e293b !important;
}
[data-theme="light"] [style*="color: #555"],
[data-theme="light"] [style*="color:#555"] {
  color: #475569 !important;
}

/* ── Finance KPI header box (the dark bar at top of finance) ── */
[data-theme="light"] .finance-kpi-bar {
  background: linear-gradient(135deg,#1e293b,#0f172a) !important;
}


/* ═══════════════════════════════════════════════════════════
   LOGO — DUAL VERSION (DARK / LIGHT)
   ═══════════════════════════════════════════════════════════ */

/* Dark mode: show dark logo, hide light logo */
[data-theme="dark"] .sidebar-logo-dark,
:root .sidebar-logo-dark {
  display: block !important;
}
[data-theme="dark"] .sidebar-logo-light,
:root .sidebar-logo-light {
  display: none !important;
}

/* Light mode: hide dark logo, show light logo */
[data-theme="light"] .sidebar-logo-dark {
  display: none !important;
}
[data-theme="light"] .sidebar-logo-light {
  display: block !important;
  /* Colorize to match the gold/dark brand colors for light bg */
  filter: brightness(0.15) sepia(1) hue-rotate(5deg) saturate(3) !important;
}