:root {
  --bg: #f4f1ec;
  --card: #ffffff;
  --ink: #2b2622;
  --muted: #8a8178;
  --accent: #b08a5a;
  --accent-dark: #8f6d3f;
  --hours: #3f7d5f;
  --hours-bg: #e5f1ea;
  --cal-fill: #5aa87c;       /* Kalender-Füllung (Anteil gearbeitet) */
  --cal-fill-empty: #e8f1eb; /* Rest der Achtel */
  --confirm: #3f9e6b;
  --confirm-dark: #34855a;
  --remove: #b5432e;
  --holiday: #c58a2e;
  --holiday-bg: #fbf1dd;
  --weekend-bg: #efeae2;
  --line: #e7e1d8;
  --error: #b5432e;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(60,45,25,.08);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }

/* ---------- Login ---------- */
.view.center { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px;
}
.login { width: 100%; max-width: 360px; }
.login h1 { margin: 0; font-size: 1.5rem; }
.login .sub { margin: 2px 0 20px; color: var(--muted); }
label { display: block; margin: 14px 0; font-size: .9rem; color: var(--muted); }
input, select, button {
  font: inherit; width: 100%; margin-top: 6px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
button {
  background: var(--accent); color: #fff; border: none; font-weight: 600;
  cursor: pointer; margin-top: 10px; transition: background .15s;
}
button:hover { background: var(--accent-dark); }
button.ghost { background: transparent; color: var(--accent-dark); border: 1px solid var(--line); width: auto; margin: 0; padding: 8px 14px; }
button.ghost:hover { background: #f0ebe3; }
.error { color: var(--error); font-size: .88rem; margin: 10px 0 0; }
.note { color: var(--muted); font-size: .82rem; margin-top: 12px; }

/* ---------- Admin-Topbar (nur Admin-Ansicht) ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--card); border-bottom: 1px solid var(--line);
}

/* ---------- User-Ansicht: alles auf einer Seite (volle Displayhöhe) ---------- */
#view-user { display: flex; flex-direction: column; height: 100dvh; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; }
#view-user .wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(14px + var(--safe-l));
}
#view-admin .wrap { padding: 18px 16px 60px; max-width: 900px; }

.topline { display: flex; align-items: center; gap: 10px; flex: none; margin-bottom: 8px; }
.month-total { font-size: .95rem; flex: 1; }
.month-total strong { color: var(--accent-dark); }
.logout-btn { flex: none; color: var(--remove); border-color: #e7cfc8; }
.logout-btn:hover { background: #fbeeea; color: var(--remove); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; min-width: 40px; min-height: 40px; line-height: 0; }

/* Umschalter Kalender/Liste — nur mobil sichtbar */
.view-switch { display: none; gap: 4px; background: #eae3d8; padding: 3px; border-radius: 10px; flex: none; }
.view-switch button {
  width: auto; margin: 0; padding: 8px 14px; border-radius: 8px; background: transparent;
  color: var(--accent-dark); font-weight: 600; font-size: .9rem; min-height: 40px;
}
.view-switch button.active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ---------- Zwei Spalten: Kalender 3/4, Liste 1/4 ---------- */
.panes { flex: 1; min-height: 0; display: flex; gap: 14px; align-items: stretch; }
.cal-pane { flex: 3 1 0; min-width: 0; min-height: 0; display: flex; }
#calendar {
  flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow);
}
.list-pane {
  flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 10px 8px;
}
.list-title { flex: none; margin: 0 0 6px; font-size: 1rem; text-transform: capitalize; }
.ml-head {
  flex: none; display: grid; grid-template-columns: 1fr 64px; gap: 8px;
  padding: 0 6px 6px; font-size: .64rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.ml-head span:last-child { text-align: center; }

/* Monatsliste: scrollt intern, Seite bleibt fix */
.month-list {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 4px; padding-top: 6px;
}
.ml-row {
  flex: none; min-height: 42px; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px;
  background: #faf7f2; border: 1px solid transparent; transition: background .3s;
}
.ml-row.weekend { background: var(--weekend-bg); }
.ml-row.holiday { background: var(--holiday-bg); }
.ml-row.has-hours { border-color: var(--hours); }
.ml-row.saved { background: #dff0e6; }
.ml-row.today { background: #fbf3e6; border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.ml-row.today .ml-wd { color: var(--accent-dark); }
.ml-today { display: inline-block; font-size: .6rem; font-weight: 700; color: #fff; background: var(--accent); padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.ml-date {
  width: auto; margin: 0; padding: 2px 2px; background: none; border: none;
  text-align: left; font-weight: 600; font-size: .82rem; line-height: 1.15; color: var(--ink); cursor: pointer;
  overflow: hidden; min-width: 0;
}
.ml-date:hover { background: none; color: var(--accent-dark); }
.ml-wd { color: var(--accent-dark); }
.ml-hol { display: block; color: var(--holiday); font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-times { display: block; color: var(--muted); font-size: .68rem; font-weight: 500; }

/* Aktionen rechts: Gesamt-Feld + Bestätigen + Entfernen */
.ml-actions { display: flex; align-items: center; gap: 4px; }
.ml-actions input { width: 52px; text-align: center; font-weight: 700; padding: 6px 2px; margin: 0; font-size: .9rem; }
.ml-confirm, .ml-remove {
  width: auto; margin: 0; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; line-height: 0; border: none;
}
.ml-confirm { background: var(--confirm); color: #fff; }
.ml-confirm:hover { background: var(--confirm-dark); }
.ml-remove { background: transparent; color: var(--remove); border: 1px solid #e7cfc8; }
.ml-remove:hover { background: #fbeeea; }
.ml-row:not(.has-hours) .ml-remove { display: none; } /* Entfernen nur wenn Stunden drin */

/* ---------- Admin ---------- */
.card h2 { margin-top: 0; }
.inline { display: inline-flex; flex-direction: column; }
.inline input { width: auto; }
.summary { margin: 16px 0; display: grid; gap: 8px; }
.summary .row { display: flex; justify-content: space-between; padding: 10px 12px; background: #faf7f2; border-radius: 10px; }
.summary .row b { color: var(--accent-dark); }

/* ---------- Editor-Dialog ---------- */
dialog {
  border: none; border-radius: var(--radius); padding: 24px; width: 94%; max-width: 440px;
  max-height: 92dvh; overflow: auto; box-shadow: var(--shadow); color: var(--ink);
}
dialog::backdrop { background: rgba(43,38,34,.45); }
dialog h3 { margin: 0 0 4px; text-transform: capitalize; font-size: 1.15rem; }
.holiday-note { margin: 0 0 8px; color: var(--holiday); font-weight: 600; font-size: .9rem; }
.editor-hint { margin: 6px 0 16px; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.time-grid label { margin: 0; min-width: 0; }
.time-grid input { min-width: 0; } /* verhindert Überlauf des Rasters durch time-Felder */
.total-label { margin-top: 18px; }
#f-total { font-size: 1.15rem; font-weight: 700; }
#f-total[readonly] { background: #f4efe7; color: var(--accent-dark); cursor: not-allowed; }
.computed-hint { display: inline-block; margin-top: 6px; font-size: .78rem; color: var(--hours); font-weight: 600; }
.editor-actions { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.editor-actions .spacer { flex: 1; }
.editor-actions button { margin: 0; padding: 10px 16px; width: auto; }
button.ghost.danger { color: var(--error); border-color: #e7cfc8; }
button.ghost.danger:hover { background: #fbeeea; }

/* ---------- FullCalendar ---------- */
.fc { --fc-border-color: var(--line); --fc-today-bg-color: #fbf6ee; font-size: .9rem; height: 100%; }
.fc .fc-toolbar-title { font-size: 1.15rem; color: var(--ink); }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 10px; }
.fc .fc-button { background: var(--accent); border: none; text-transform: capitalize; box-shadow: none; padding: 6px 12px; display: inline-flex; align-items: center; justify-content: center; }
.fc .fc-button:hover, .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--accent-dark); }
.fc .fc-button:focus { box-shadow: 0 0 0 2px rgba(176,138,90,.4); }
.fc .fc-button .fc-icon { font-size: 1.4em; line-height: 1; vertical-align: middle; }
.fc .fc-button-group { gap: 2px; }
.fc .fc-daygrid-day.fc-day-sat, .fc .fc-daygrid-day.fc-day-sun { background: var(--weekend-bg); }
.fc .fc-daygrid-day-number { color: var(--ink); }
.fc-day-today .fc-daygrid-day-number { font-weight: 700; color: var(--accent-dark); }
.fc .ev-hours { background: var(--cal-fill-empty); border: 1px solid var(--hours); color: #000; border-radius: 8px; font-weight: 700; text-align: center; padding: 1px 0; }
.fc .ev-hours .fc-event-main { background: transparent; color: #000; }
.fc .ev-hours .fc-event-title { text-align: center; width: 100%; color: #000; }
.fc .ev-holiday { background: var(--holiday-bg); border: 1px solid #ead6a8; color: var(--holiday); border-radius: 8px; font-size: .78rem; font-weight: 600; }

/* ============ MOBILE (≤ 820px): eine Ansicht zur Zeit, Liste ist Standard ============ */
@media (max-width: 820px) {
  .view-switch { display: flex; }
  .topline { flex-wrap: wrap; }
  .month-total { order: 3; flex-basis: 100%; }
  /* Logout auf Höhe des Umschalters (Button 40 + 2×3 Padding = 46) */
  .logout-btn { height: 46px; min-height: 46px; min-width: 46px; }

  .panes { gap: 0; }
  .panes.mode-cal .list-pane { display: none; }
  .panes.mode-list .cal-pane { display: none; }
  .cal-pane, .list-pane { flex: 1 1 auto; }

  .ml-row { min-height: 52px; }
  .ml-date { font-size: .9rem; }
  .ml-actions input { width: 58px; height: 40px; font-size: 16px; }
  .ml-confirm, .ml-remove { width: 40px; height: 40px; }

  /* iOS: kein Auto-Zoom (Schrift ≥16px) */
  input, select { font-size: 16px; }

  /* Tages-Dialog mobil */
  dialog { padding: 18px; width: 92%; }
  .time-grid { gap: 12px 12px; }
  dialog input { padding: 12px 10px; }
  .editor-actions { flex-wrap: wrap; margin-top: 18px; }
  .editor-actions .spacer { display: none; }
  .editor-actions button { flex: 1 1 0; min-height: 46px; }
  #editor-delete { order: 3; flex-basis: 100%; } /* Löschen volle Breite unten */

  .fc { font-size: .82rem; }
  .fc .fc-toolbar-title { font-size: 1rem; }
}

@media (max-width: 420px) {
  .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; gap: 6px; }
}