/* Project-wide dark-mode fixes — loaded on every page (after style.css & swal-custom.css).
   Root cause: some components hardcode light colors (bg-white, text-dark) that don't follow the
   [data-theme=dark] CSS-variable flip, so inputs/text turn invisible in dark mode.
   Keep every rule here dark-scoped so light mode is never touched. */

/* White money inputs (Rent/Deposit paid, card fee/total, refs) on edit/create/confirm/return pages,
   and the "Deposit currency" <select> (create/edit/confirm) which uses .form-select not .form-control:
   .bg-white stays literally white in dark mode → theme's light text becomes invisible (the closed
   select shows a blank white box until opened, since the native dropdown popup isn't page-styled).
   Match the theme's own dark inputs. */
html[data-theme="dark"] .form-control.bg-white,
html[data-theme="dark"] .form-select.bg-white {
  background-color: var(--input-bg) !important;
  color: var(--text-primary-light) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

/* The small "Loaded from payment history…" / "Same as rent…" note boxes also use bg-white. */
html[data-theme="dark"] p.bg-white {
  background-color: var(--input-bg) !important;
}

/* Group "View booking": each per-vehicle card is a `.rental-vehicle-block` with bg-white. It stays
   white in dark mode while all the text inside is theme-driven (turns light) → white-on-white /
   invisible. Give the card a dark surface so the block's contents become readable. */
html[data-theme="dark"] .rental-vehicle-block {
  background-color: #273142 !important;
}

/* The group banner (Group ID / Returned · Pending) uses a hardcoded light-blue gradient, so its
   theme-driven text must stay dark to remain readable on that light band. */
html[data-theme="dark"] .rental-view-group-banner,
html[data-theme="dark"] .rental-view-group-banner * {
  color: #1e293b !important;
}

/* Toolbar buttons on Rates / Expenses / Income / Invoices / Rentals-list use bare
   `.btn.btn-sm.border.border-neutral-400` with no text-* color class. Bootstrap's base .btn
   sets color to the hardcoded --bs-body-color, invisible on the dark surface, and its
   --bs-btn-hover-color is undefined so :hover falls back to the inherited (readable) text
   color — text only appears on mouseover. Force both states to the theme's text color. */
html[data-theme="dark"] .btn.btn-sm.border.border-neutral-400 {
  color: var(--text-primary-light) !important;
}