/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: #1d2733;
  background: #f4f6f8;
  display: flex;
  flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- Navigation ---------- */
.topnav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: #1f3a5f;
  color: #fff;
  flex-wrap: wrap;
}
.topnav .brand { font-weight: 600; margin-right: 8px; }
.topnav a { color: #cfe0f5; text-decoration: none; padding: 4px 6px; border-radius: 4px; }
.topnav a:hover { color: #fff; }
.topnav a.active { background: rgba(255, 255, 255, 0.18); color: #fff; }
.topnav .username { color: #9fb8d8; font-size: 13px; }
.spacer { flex: 1; }

/* ---------- Buttons & Formulare ---------- */
.btn {
  padding: 8px 14px;
  border: 1px solid #c3ccd6;
  border-radius: 6px;
  background: #fff;
  color: #1d2733;
  font-size: 14px;
  cursor: pointer;
  min-height: 38px; /* Touch-Ziel */
}
.btn:hover { background: #eef2f6; }
.btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn.primary:hover { background: #1d4fd8; }
.btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.danger:hover { background: #b91c1c; }
.btn.small { padding: 4px 10px; min-height: 30px; font-size: 13px; }

label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 500; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
input[type="text"], input[type="password"], input[type="number"],
input[type="datetime-local"], select, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 1px solid #c3ccd6;
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
textarea { resize: vertical; }
.error {
  background: #fde8e8;
  color: #b02a2a;
  border: 1px solid #f5bcbc;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
}

/* ---------- Login ---------- */
.login-box {
  max-width: 360px;
  margin: 10vh auto 0;
  background: #fff;
  padding: 28px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(20, 40, 70, 0.12);
}
.login-box h1 { margin: 0 0 18px; font-size: 20px; text-align: center; }
.login-box .btn { width: 100%; margin-top: 6px; }
.login-box .error { margin-bottom: 14px; }

/* ---------- Kalender ---------- */
.calendar-main { padding: 10px; gap: 10px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Unsichtbares Datumsfeld – dient nur als Anker für den nativen Picker (📅) */
.jump-date {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: none;
  padding: 0;
  pointer-events: none;
}
.fab-plus { font-weight: 700; }
.fab-label { margin-left: 4px; }

/* ---------- Farbpalette (Swatches) ---------- */
.color-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
}
.swatch.selected {
  border-color: #1d2733;
  box-shadow: inset 0 0 0 3px #fff;
}
.month-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.month-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 30px;
}
.month-btn:hover { background: #e2e8f0; color: #1d2733; }
.month-btn.active { background: #2563eb; color: #fff; }
.month-btn.active:hover { background: #1d4fd8; }
#timeline {
  flex: 1;
  min-height: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(20, 40, 70, 0.08);
}

/* vis-timeline Anpassungen */
.vis-timeline { border: none; font-size: 13px; }
.vis-item {
  background: #3b82f6;
  border-color: #2563eb;
  color: #fff;
  border-radius: 5px;
  font-size: 13px;
}
.vis-item.vis-selected {
  box-shadow: 0 0 0 2px #f59e0b;
}
.cat-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}
.vis-item .vis-item-content { padding: 3px 6px; }
.vis-labelset .vis-label { display: flex; align-items: center; }
/* Feste Label-Höhe: vis-timeline leitet daraus die Zeilenhöhe ab –
   so sind alle Zeilen gleich hoch, auch leere, und die internen
   Höhenberechnungen (Spalten-Hintergründe etc.) stimmen überein */
.vis-labelset .vis-label.group-vehicle .vis-inner {
  box-sizing: border-box;
  height: 46px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.veh-name {
  font-weight: 600;
  font-size: 13px;
  max-width: 15ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.veh-sub {
  font-size: 11px;
  color: #475569;
  max-width: 19ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Buchungsbalken vertikal mittig in der Zeile (Balkenhöhe ist auf allen
   Bildschirmgrößen 29px – kein transform verwenden, vis positioniert
   damit horizontal!). */
.vis-itemset .vis-item.vis-range {
  top: calc(50% - 14.5px) !important;
}
.vis-item.holiday {
  background: repeating-linear-gradient(
    45deg,
    rgba(100, 116, 139, 0.3) 0 5px,
    transparent 5px 11px
  );
}
.vis-item.bg-today { background: rgba(37, 99, 235, 0.08); }
.vis-current-time { background-color: #dc2626; width: 2px; }
.vis-time-axis .vis-text { color: #475569; }
.vis-time-axis .vis-text.vis-minor {
  text-align: center;
  line-height: 1.25;
  padding: 3px 4px 4px;
  font-size: 13px;
  font-weight: 700;
  color: #1d2733;
}
/* vis-timeline misst die Achsenhöhe an diesem Muster-Element –
   auf zwei Zeilen (Wochentag + Tageszahl) vergrößern */
.vis-time-axis .vis-text.vis-minor.vis-measure { height: 40px; }
.vis-time-axis .vis-text.vis-minor b {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Tagesbeschriftung Sa/So im Kopf leicht tönen (eigenständig, unabhängig
   von der Kalenderfläche – siehe .vis-item.weekend-col dort). */
.vis-text.vis-minor.vis-saturday, .vis-text.vis-minor.vis-sunday {
  background: rgba(148, 163, 184, 0.1);
}
/* Wochenend-Spalten in der Kalenderfläche: eigene Hintergrund-Items
   (siehe calendar.js), nicht über vis-timelines Gitterlinien – die
   vergibt dieselbe Sa/So-Klasse auch an die Monats-Trennlinie, wenn ein
   Monat an einem Wochenende beginnt. */
.vis-item.weekend-col { background: rgba(148, 163, 184, 0.1); }

/* ---------- Modal ---------- */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 50, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 12px;
}
.modal {
  background: #fff;
  border-radius: 10px;
  padding: 20px 22px;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(10, 25, 45, 0.3);
}
.modal h2 { margin: 0 0 14px; font-size: 18px; }
.modal .error { margin-bottom: 12px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.row2 { display: flex; gap: 10px; }
.row2 label { flex: 1; }

/* ---------- Fahrzeugseite ---------- */
.page { padding: 16px; max-width: 900px; margin: 0 auto; width: 100%; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-head h1 { font-size: 20px; margin: 8px 0; }
.table-wrap { overflow-x: auto; background: #fff; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(20, 40, 70, 0.08); margin-top: 12px; }
.vehicles-table { width: 100%; border-collapse: collapse; }
.vehicles-table th, .vehicles-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e5eaf0;
  white-space: nowrap;
}
.vehicles-table th { background: #f8fafc; font-size: 13px; color: #475569; }
.vehicles-table tr.inactive td { color: #94a3b8; }
.vehicles-table .actions { display: flex; gap: 6px; }

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
  body { font-size: 14px; }
  .topnav { gap: 8px; padding: 8px 10px; }
  .topnav .brand { font-size: 14px; }
  .topnav .username { display: none; }
  .calendar-main { padding: 6px; gap: 6px; }
  .toolbar .btn { padding: 8px 11px; }
  .row2 { flex-direction: column; gap: 0; }
  .vis-item { font-size: 13px; }
  /* höhere Balken = bessere Touch-Ziele */
  .vis-item .vis-item-content { padding: 7px 8px; }
  /* größere Anfasser zum Ziehen an den Rändern */
  .vis-item .vis-drag-left, .vis-item .vis-drag-right { width: 18px; }

  /* Monatsleiste ausblenden – Navigation über Wischen, "Heute" und 📅 */
  .month-nav { display: none; }

  /* "+ Neue Buchung" als runder Schwebe-Button unten rechts */
  #btn-new {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(15, 30, 50, 0.35);
  }
  #btn-new .fab-label { display: none; }

  /* Buchungsformular als Bottom-Sheet */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none;
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  }

  /* schlankere Fahrzeug-Labels */
  .vis-labelset .vis-label.group-vehicle .vis-inner { height: 50px; padding: 2px 4px; }
  .veh-name { font-size: 12px; max-width: 13ch; }
  .veh-sub { font-size: 10px; max-width: 17ch; }
}