/* ============================================================
   Drive4you — premium blauw-wit thema
   Custom styles (plain CSS — Tailwind CDN compileert geen @apply)
   ============================================================ */
:root {
  /* Brand palet — blauw-wit, gebaseerd op Drive4you-logo */
  --brand-50:  #EAF2FF;  /* soft blue background */
  --brand-100: #DCEBFF;
  --brand-200: #BFD8FF;
  --brand-300: #8FB8FF;
  --brand-400: #5C92FF;
  --brand-500: #2E75FF;
  --brand-600: #005BFF;  /* primary blue */
  --brand-700: #0048CC;
  --brand-800: #003494;
  --brand-900: #061A3D;  /* deep navy */

  --navy:      #061A3D;
  --text-dark: #071B35;
  --muted:     #6B7280;

  --surface:   #FFFFFF;
  --surface-2: #F7FAFF;   /* iets lichter dan brand-50 voor zachte secties */

  /* Premium schaduwen — zachte, blauwgetinte umbra ipv harde zwart */
  --shadow-xs: 0 1px 2px rgba(6, 26, 61, 0.06);
  --shadow-sm: 0 2px 8px rgba(6, 26, 61, 0.06);
  --shadow-md: 0 8px 24px rgba(6, 26, 61, 0.08);
  --shadow-lg: 0 16px 40px rgba(6, 26, 61, 0.12);

  /* Backwards compat — oude variabelen blijven werken (mappen naar nieuw blauw) */
  --emerald: var(--brand-600);
  --emerald-dark: var(--brand-700);
  --slate-bg: var(--surface-2);
}

html, body { background: var(--surface); color: var(--text-dark); }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body { overflow-x: clip; max-width: 100vw; }
body { width: 100%; }

/* ── Knoppen ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.4rem;
  min-width: 9rem;
  background: var(--brand-600); color: #fff;
  font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.01em;
  border-radius: 0.75rem; border: 0; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 91, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary:hover {
  background: var(--brand-700);
  box-shadow: 0 8px 18px rgba(0, 91, 255, 0.32);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled,
.btn-primary[disabled] {
  background: var(--brand-300); cursor: not-allowed;
  box-shadow: none; transform: none;
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.4rem;
  min-width: 9rem;
  background: #fff; color: var(--navy);
  border: 1px solid var(--brand-200);
  border-radius: 0.75rem; font-weight: 600; font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-secondary:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

/* Knop-rij: laat primary + secondary even breed én even hoog worden, ongeacht tekstlengte. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}
.btn-row > .btn-primary,
.btn-row > .btn-secondary {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

/* ── Kaarten ────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid #EEF2F7;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ── Mobiel ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  img, video, iframe { max-width: 100%; height: auto; }
  p, h1, h2, h3, h4, h5, h6, li, td, div, span, a { overflow-wrap: break-word; word-break: normal; }
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl { max-width: 100%; }
  .card { padding: 1.125rem; border-radius: 0.875rem; }
}

/* ── Inputs ─────────────────────────────────────────────────── */
.input {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  border: 1px solid #D6DEE9;
  border-radius: 0.625rem;
  outline: none; background: #fff; font-size: 0.9375rem;
  font-family: inherit; color: var(--text-dark);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input[type="date"], .input[type="time"], .input[type="datetime-local"], .input[type="month"], .input[type="week"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-height: 2.625rem; line-height: 1.25;
}
.input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(0, 91, 255, 0.15);
}
.input::placeholder { color: #9AA3B2; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath d='M10 13l-4-4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.625rem center; padding-right: 2.25rem;
}

/* Datumvelden (flatpickr): kalender-icoon links — nu in brand-blauw */
input.flatpickr-input,
input.flatpickr-alt-input,
input.input[readonly][placeholder*="datum" i],
input.input[readonly][placeholder*="date" i] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23005BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.75rem center;
  padding-left: 2.5rem;
  text-align: left;
  cursor: pointer;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.flatpickr-wrapper { display: block; width: 100%; max-width: 100%; }
input.input { min-width: 0; max-width: 100%; box-sizing: border-box; }

.grid > *, .flex > * { min-width: 0; }

.label {
  display: block; font-size: 0.875rem; font-weight: 500;
  color: var(--text-dark); margin-bottom: 0.375rem;
}

/* ── Nav switchers (NL / MAD) ───────────────────────────────── */
.nav-switch {
  appearance: none;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  border-radius: 0.625rem;
  font-weight: 600; font-size: 0.8125rem;
  color: var(--navy);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%23005BFF'%3E%3Cpath d='M10 13l-4-4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center;
}
.nav-switch:hover { background: var(--brand-100); border-color: var(--brand-200); }
@media (max-width: 640px) {
  .nav-switch { padding: 0.2rem 1.1rem 0.2rem 0.35rem; font-size: 0.7rem; background-position: right 0.2rem center; min-width: 0; }
}

/* ── Flatpickr: blauwe minimal-kalender ─────────────────────── */
.flatpickr-calendar {
  background: #fff;
  border: 1px solid #EEF2F7;
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 4px 6px 8px;
}
.flatpickr-calendar.arrowTop::before { border-bottom-color: #EEF2F7; }
.flatpickr-calendar.arrowTop::after  { border-bottom-color: #fff; }
.flatpickr-months { background: #fff; border-radius: 1rem 1rem 0 0; }
.flatpickr-months .flatpickr-month { background: #fff; color: var(--navy); height: 42px; }
.flatpickr-current-month { font-size: 0.9375rem; font-weight: 700; color: var(--navy); padding-top: 6px; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #fff; font-weight: 700; color: var(--navy); border-radius: 4px; padding: 2px 4px;
}
.flatpickr-current-month .numInputWrapper { width: 62px; }
.numInputWrapper span { border: none; }
.numInputWrapper span.arrowUp::after  { border-bottom-color: var(--navy); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--navy); }
.flatpickr-prev-month, .flatpickr-next-month { color: var(--muted) !important; fill: var(--muted) !important; padding: 8px 10px; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: var(--brand-600) !important; fill: var(--brand-600) !important; }
.flatpickr-weekdays { background: #fff; }
span.flatpickr-weekday { background: #fff; color: var(--muted); font-weight: 600; font-size: 0.75rem; }
.flatpickr-days { border: none; }
.dayContainer { border: none; }
.flatpickr-day {
  height: 38px; line-height: 38px; border: none; border-radius: 50%;
  color: var(--text-dark); font-size: 0.875rem; font-weight: 400;
  transition: background 0.12s, color 0.12s;
}
.flatpickr-day:hover { background: var(--brand-50); color: var(--brand-700); }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 700;
}
.flatpickr-day.today { border: 2px solid var(--brand-600); font-weight: 700; }
.flatpickr-day.today:hover { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #CBD5E1; }
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { color: var(--muted); background: var(--surface-2); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #E2E8F0; background: none; text-decoration: none; cursor: not-allowed; }
.flatpickr-day.inRange { background: var(--brand-50); border-color: transparent; color: var(--brand-700); }
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
}
.flatpickr-time { border-top: 1px solid #EEF2F7; margin-top: 4px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 0.125rem 0.5rem;
  border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}

/* ── Sidebar (dashboard) ────────────────────────────────────── */
.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  color: var(--text-dark); text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.sidebar-link:hover { background: var(--brand-50); color: var(--brand-700); }
.sidebar-link.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}

/* ── Hero met premium navy → blauw → soft-blue gradient ────── */
.hero-bg {
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 40%, var(--brand-600) 65%, var(--brand-200) 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg::before {
  /* subtiele radiale glow voor extra diepte */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255,255,255,0.10), transparent 50%);
  pointer-events: none;
}
.hero-bg > * { position: relative; }

/* ── Auto-kaart hover ───────────────────────────────────────── */
.car-card { text-decoration: none; color: inherit; display: block; }
.car-card img { transition: transform 0.4s ease; }
.car-card:hover img { transform: scale(1.05); }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  border: 2px solid #E5EAF3;
  border-top-color: var(--brand-600);
  border-radius: 50%;
  width: 1rem; height: 1rem;
  animation: spin 0.8s linear infinite;
  display: inline-block; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

a { color: inherit; }

/* Leaflet maps: stacking context */
.leaflet-container { z-index: 0; isolation: isolate; }

/* ── Booking-kalender: gekleurde geselecteerde huurperiode ─── */
.flatpickr-day.in-rental-range {
  background: var(--brand-100) !important;
  color: var(--brand-800) !important;
  border-radius: 0 !important;
  border-color: var(--brand-100) !important;
}
.flatpickr-day.in-rental-range.rental-start {
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
}
.flatpickr-day.in-rental-range.rental-end {
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
}
.flatpickr-day.in-rental-range.rental-start,
.flatpickr-day.in-rental-range.rental-end,
.flatpickr-day.selected {
  background: var(--brand-600) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ============================================================
   TAILWIND OVERRIDES
   Alle bestaande emerald-/groen-klassen automatisch hermappen
   naar het nieuwe blauwe palet — geen HTML-wijzigingen nodig.
   Status-badges (red/yellow voor afgewezen/wachtend) blijven
   intact omdat ze semantisch betekenis hebben.
   ============================================================ */

/* — Achtergronden — */
.bg-emerald-50  { background-color: var(--brand-50)  !important; }
.bg-emerald-100 { background-color: var(--brand-100) !important; }
.bg-emerald-200 { background-color: var(--brand-200) !important; }
.bg-emerald-500 { background-color: var(--brand-500) !important; }
.bg-emerald-600 { background-color: var(--brand-600) !important; }
.bg-emerald-700 { background-color: var(--brand-700) !important; }
.bg-emerald-800 { background-color: var(--brand-800) !important; }
.bg-emerald-900 { background-color: var(--brand-900) !important; }

.bg-green-50    { background-color: var(--brand-50)  !important; }
.bg-green-100   { background-color: var(--brand-100) !important; }
.bg-green-500   { background-color: var(--brand-500) !important; }
.bg-green-600   { background-color: var(--brand-600) !important; }
.bg-green-700   { background-color: var(--brand-700) !important; }

.bg-teal-50     { background-color: var(--brand-50)  !important; }
.bg-teal-100    { background-color: var(--brand-100) !important; }
.bg-teal-500    { background-color: var(--brand-500) !important; }
.bg-teal-600    { background-color: var(--brand-600) !important; }
.bg-teal-700    { background-color: var(--brand-700) !important; }

/* — Tekst — */
.text-emerald-50  { color: var(--brand-50)  !important; }
.text-emerald-100 { color: var(--brand-100) !important; }
.text-emerald-200 { color: var(--brand-200) !important; }
.text-emerald-500 { color: var(--brand-500) !important; }
.text-emerald-600 { color: var(--brand-600) !important; }
.text-emerald-700 { color: var(--brand-700) !important; }
.text-emerald-800 { color: var(--brand-800) !important; }
.text-emerald-900 { color: var(--brand-900) !important; }

.text-green-500   { color: var(--brand-500) !important; }
.text-green-600   { color: var(--brand-600) !important; }
.text-green-700   { color: var(--brand-700) !important; }

.text-teal-500    { color: var(--brand-500) !important; }
.text-teal-600    { color: var(--brand-600) !important; }
.text-teal-700    { color: var(--brand-700) !important; }

/* — Borders — */
.border-emerald-100 { border-color: var(--brand-100) !important; }
.border-emerald-200 { border-color: var(--brand-200) !important; }
.border-emerald-500 { border-color: var(--brand-500) !important; }
.border-emerald-600 { border-color: var(--brand-600) !important; }

.border-green-200   { border-color: var(--brand-200) !important; }
.border-green-500   { border-color: var(--brand-500) !important; }
.border-green-600   { border-color: var(--brand-600) !important; }

/* — Ringen / focus — */
.ring-emerald-500 { --tw-ring-color: var(--brand-500) !important; }
.ring-emerald-600 { --tw-ring-color: var(--brand-600) !important; }
.ring-green-500   { --tw-ring-color: var(--brand-500) !important; }

/* — Hover-varianten — */
.hover\:bg-emerald-50:hover  { background-color: var(--brand-50)  !important; }
.hover\:bg-emerald-100:hover { background-color: var(--brand-100) !important; }
.hover\:bg-emerald-600:hover { background-color: var(--brand-600) !important; }
.hover\:bg-emerald-700:hover { background-color: var(--brand-700) !important; }
.hover\:text-emerald-600:hover { color: var(--brand-600) !important; }
.hover\:text-emerald-700:hover { color: var(--brand-700) !important; }
.hover\:bg-green-700:hover   { background-color: var(--brand-700) !important; }
.hover\:text-green-600:hover { color: var(--brand-600) !important; }

/* — Focus-varianten — */
.focus\:border-emerald-500:focus { border-color: var(--brand-500) !important; }
.focus\:ring-emerald-500:focus   { --tw-ring-color: var(--brand-500) !important; }

/* — From/To gradients (Tailwind gradient-stops) — */
.from-emerald-50  { --tw-gradient-from: var(--brand-50)  !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,91,255,0)) !important; }
.from-emerald-500 { --tw-gradient-from: var(--brand-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,91,255,0)) !important; }
.from-emerald-600 { --tw-gradient-from: var(--brand-600) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,91,255,0)) !important; }
.to-emerald-500   { --tw-gradient-to: var(--brand-500) !important; }
.to-emerald-600   { --tw-gradient-to: var(--brand-600) !important; }
.to-emerald-700   { --tw-gradient-to: var(--brand-700) !important; }
.via-emerald-500  { --tw-gradient-stops: var(--tw-gradient-from), var(--brand-500), var(--tw-gradient-to, rgba(0,91,255,0)) !important; }

/* — Slate-900 (footer/CTA) — vervang door deep navy voor merkconsistentie — */
.bg-slate-900 { background-color: var(--brand-900) !important; }

/* — Lila/teal/cyan/lime/pink/fuchsia/purple/indigo/violet — vermijd in een blauw-wit thema — */
.bg-purple-50, .bg-fuchsia-50, .bg-pink-50, .bg-violet-50, .bg-indigo-50,
.bg-purple-100, .bg-fuchsia-100, .bg-pink-100, .bg-violet-100, .bg-indigo-100 {
  background-color: var(--brand-50) !important;
}
.bg-purple-500, .bg-fuchsia-500, .bg-pink-500, .bg-violet-500, .bg-indigo-500,
.bg-purple-600, .bg-fuchsia-600, .bg-pink-600, .bg-violet-600, .bg-indigo-600 {
  background-color: var(--brand-600) !important;
}
.text-purple-600, .text-fuchsia-600, .text-pink-600, .text-violet-600, .text-indigo-600,
.text-purple-700, .text-fuchsia-700, .text-pink-700, .text-violet-700, .text-indigo-700 {
  color: var(--brand-600) !important;
}

.bg-cyan-50, .bg-cyan-100   { background-color: var(--brand-50)  !important; }
.bg-cyan-500, .bg-cyan-600  { background-color: var(--brand-500) !important; }
.text-cyan-600              { color: var(--brand-600) !important; }

/* ============================================================
   BEHOUDEN — semantische status-kleuren
   Rood/groen/geel blijven intact zodat:
   - rood = afgewezen / fout / ongelezen-notificatie
   - geel = wachtend / waarschuwing / ster-rating (amber)
   - groen-tinten via emerald → blauw, behalve waar de
     `text-green-XXX`/`bg-green-XXX` semantiek van succes geldt
     (overschreven naar blauw = oké, want ons primaire merk
     IS nu de "succes/positief"-kleur).
   ============================================================ */