/*
  Thema: licht is de standaard (:root). Donker wordt geactiveerd via
  html[data-theme="dark"] (expliciete keuze van de gebruiker, opgeslagen in
  localStorage door js/theme.js) OF automatisch via prefers-color-scheme
  wanneer de gebruiker geen expliciete keuze heeft gemaakt ("Systeem").
*/
:root {
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-hover: #f0f2f5;
  --color-border: #e2e5ea;
  --color-text: #1b2430;
  --color-text-muted: #667085;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-danger: #dc2626;
  --color-danger-bg: #fee2e2;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-overlay: rgba(16, 24, 40, 0.55);
  --color-today-bg: rgba(37, 99, 235, 0.08);
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);

  color-scheme: light;
}

html[data-theme="dark"] {
  --color-bg: #10151f;
  --color-surface: #1a212e;
  --color-surface-hover: #232b3a;
  --color-border: #2d3648;
  --color-text: #e7ebf3;
  --color-text-muted: #99a3b8;
  --color-primary: #4f8fff;
  --color-primary-dark: #6ea1ff;
  --color-danger: #f87171;
  --color-danger-bg: #3a1d1f;
  --color-success-bg: #143423;
  --color-success-text: #6ee7a0;
  --color-warning-bg: #3a2c0d;
  --color-warning-text: #fbbf24;
  --color-overlay: rgba(0, 0, 0, 0.65);
  --color-today-bg: rgba(79, 143, 255, 0.14);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  /* Alleen automatisch donker als de gebruiker niet zelf al licht/donker koos. */
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg: #10151f;
    --color-surface: #1a212e;
    --color-surface-hover: #232b3a;
    --color-border: #2d3648;
    --color-text: #e7ebf3;
    --color-text-muted: #99a3b8;
    --color-primary: #4f8fff;
    --color-primary-dark: #6ea1ff;
    --color-danger: #f87171;
    --color-danger-bg: #3a1d1f;
    --color-success-bg: #143423;
    --color-success-text: #6ee7a0;
    --color-warning-bg: #3a2c0d;
    --color-warning-text: #fbbf24;
    --color-overlay: rgba(0, 0, 0, 0.65);
    --color-today-bg: rgba(79, 143, 255, 0.14);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Vangnet: voorkomt dat de hele pagina horizontaal kan scrollen als een
     onderdeel toch iets te breed uitvalt op een smal scherm. Onderdelen die
     bewust horizontaal moeten kunnen scrollen (tabbladen, tijdlijn, tabel op
     mobiel) hebben hun eigen overflow-x: auto en blijven gewoon werken. */
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a { color: var(--color-primary); }

button {
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--color-surface-hover); }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-bg);
  color: var(--color-danger);
}
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Layout */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 16px;
}
.app-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}
.app-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.app-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Op smalle telefoons (bijv. iPhone 16 Pro, ~393px breed) past de titel plus
   thema-schakelaar plus naam plus uitlog-knop niet naast elkaar op 1 rij -
   dat zorgde voor een afgeknipte/overlappende header. Daarom: titel en
   gebruikersblok elk op hun eigen rij, en de naam wordt afgekapt met "...". */
@media (max-width: 480px) {
  .app-header-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .app-title {
    flex: 1 1 100%;
    font-size: 16px;
  }
  .app-user {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .user-name-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 34vw;
  }
}

.tabs {
  display: flex;
  gap: 4px;
  max-width: 1200px;
  margin: 10px auto 0;
  padding: 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-btn {
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  min-height: 44px;
}
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Instellingen/Gebruikers zijn alleen voor beheerders - standaard verborgen,
   app.js toont ze pas (via een aparte class) nadat bekend is dat de
   ingelogde medewerker beheerder is. Zo geen flits van tabbladen die een
   gewone gebruiker toch niet mag gebruiken. De server wijst de bijbehorende
   endpoints sowieso af voor niet-beheerders (zie RequireAdminAttribute). */
.admin-only {
  display: none;
}
.admin-only.is-visible {
  display: inline-block;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 100px;
}

.view { display: none; }
.view.active { display: block; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.toolbar select, .toolbar input {
  min-height: 40px;
}

.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  border-radius: 50px;
  padding: 14px 22px;
  box-shadow: var(--shadow);
  font-size: 15px;
}

/* Cards / table */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

table.bookings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.bookings-table th, table.bookings-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
table.bookings-table th { color: var(--color-text-muted); font-weight: 600; font-size: 13px; }

.booking-list-item {
  display: none;
}

/* Op mobiel: lijst als kaarten i.p.v. tabel */
@media (max-width: 720px) {
  table.bookings-table thead { display: none; }
  table.bookings-table, table.bookings-table tbody, table.bookings-table tr, table.bookings-table td {
    display: block;
    width: 100%;
  }
  table.bookings-table tr {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
  }
  table.bookings-table td {
    border: none;
    padding: 4px 0;
  }
  table.bookings-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
}

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.status-optie { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-bevestigd { background: var(--color-success-bg); color: var(--color-success-text); }

.item-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: 0;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--color-surface);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 20px;
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: 20px; }
  .modal { border-radius: var(--radius); }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 6px;
  color: var(--color-text-muted);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text-muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  /* 16px i.p.v. 15px: Safari op iOS zoomt automatisch in op een invoerveld
     met een kleiner lettertype zodra je erin tikt, wat op mobiel erg
     storend is. Vanaf 16px doet iOS dat niet meer. */
  font-size: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 44px;
}
.field textarea { min-height: 70px; resize: vertical; }

.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
}
.alert-error { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.modal-actions .btn { flex: 1; min-width: 120px; }

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 40px 16px;
}

/* Login pagina */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
}
.login-card h1 {
  font-size: 20px;
  margin: 0 0 4px;
}
.login-card p.subtitle {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

/* FullCalendar aanpassingen voor mobiel */
.fc { font-size: 17px; font-weight:600}
.fc .fc-toolbar-title { font-size: 20px; }
.fc .fc-button { padding: 6px 10px; font-size: 15px; }
@media (max-width: 520px) {
  .fc .fc-toolbar { flex-direction: column; gap: 8px; }
}

.settings-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.settings-item-row:last-child { border-bottom: none; }
.settings-item-row .grow { flex: 1; min-width: 140px; }
.settings-item-row select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  min-height: 40px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  padding: 0;
}

.user-name-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Tijdlijn */
.timeline-scroll-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.timeline-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  min-width: 700px;
}
@media (min-width: 640px) {
  .timeline-grid { grid-template-columns: 150px 1fr; min-width: 820px; }
}
.timeline-header-label {
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  left: 0;
  background: var(--color-surface);
}
.timeline-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(64px, 1fr);
}
.timeline-day-cell {
  text-align: center;
  font-size: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.timeline-day-cell.today {
  color: var(--color-primary);
  font-weight: 700;
  background: var(--color-today-bg);
}
.timeline-row-label {
  padding: 10px 8px;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 6px;
  position: sticky;
  left: 0;
  background: var(--color-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-row-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(64px, 1fr);
  border-bottom: 1px solid var(--color-border);
  min-height: 48px;
}
.timeline-day-bg {
  grid-row: 1;
  border-left: 1px solid var(--color-border);
}
.timeline-day-bg.today {
  background: var(--color-today-bg);
}
.timeline-bar {
  grid-row: 1;
  align-self: center;
  margin: 0 3px;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  min-width: 0;
  box-shadow: var(--shadow);
}
.timeline-bar:hover {
  filter: brightness(0.92);
}
.timeline-empty-hint {
  padding: 40px 16px;
  text-align: center;
  color: var(--color-text-muted);
}

/* Thema-schakelaar (Licht / Systeem / Donker) */
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.theme-toggle-btn:last-child { border-right: none; }
.theme-toggle-btn:hover { background: var(--color-surface-hover); }
.theme-toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
}
.theme-toggle-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* FullCalendar: eigen kleuren i.p.v. de (lichte) standaardkleuren, zodat de
   kalender ook in donker thema goed leesbaar blijft. Deze overrides gelden in
   beide thema's, zodat de kalenderknoppen ook in het lichte thema aansluiten
   bij de rest van de applicatie. */
.fc {
  --fc-page-bg-color: var(--color-surface);
  --fc-neutral-bg-color: var(--color-border);
  --fc-neutral-text-color: var(--color-text-muted);
  --fc-border-color: var(--color-border);
  --fc-button-text-color: #fff;
  --fc-button-bg-color: var(--color-primary);
  --fc-button-border-color: var(--color-primary);
  --fc-button-hover-bg-color: var(--color-primary-dark);
  --fc-button-hover-border-color: var(--color-primary-dark);
  --fc-button-active-bg-color: var(--color-primary-dark);
  --fc-button-active-border-color: var(--color-primary-dark);
  --fc-today-bg-color: var(--color-today-bg);
  --fc-highlight-color: var(--color-today-bg);
  --fc-list-event-hover-bg-color: var(--color-surface-hover);
  --fc-more-link-bg-color: var(--color-border);
  --fc-more-link-text-color: var(--color-text);
  color: var(--color-text);
}