/* ============================================================
   Parkplatzverwaltung — visuelle Sprache: "Lageplan / Bauplan"
   Systemschriften (keine externen Web-Font-Aufrufe, DSGVO).
   ============================================================ */

:root {
  --bg: #f5f2ec;
  --paper: #fbf9f5;
  --ink: #22271f;
  --ink-soft: #5b6154;
  --line: #d8d2c4;

  --brick: #8c2f1b;
  --brick-dark: #6c2413;
  --pool: #f0b3a6;
  --pool-dark: #d98d7d;
  --special: #f0c860;
  --utility: #a9c6da;
  --green: #cfe1c4;
  --gap: #e3e0d8;

  --free: #3f7a5c;
  --free-bg: #e3efe6;
  --booked: #8a8578;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(34,39,31,0.06), 0 4px 14px rgba(34,39,31,0.06);

  --font-display: 'Segoe UI Semibold', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  min-height: 100vh;
}

button { font-family: var(--font-body); cursor: pointer; }
a { color: var(--brick); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); }

/* ---------- Layout ---------- */
#app { min-height: 100vh; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 8px;
}

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .mark {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brick);
  border: 1px solid var(--brick);
  padding: 2px 6px;
  border-radius: 4px;
}
.brand h1 { font-size: 19px; }
.brand .sub { color: var(--ink-soft); font-size: 12.5px; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.user-chip .role-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 7px;
  border-radius: 4px;
}
.btn-link { background: none; border: none; color: var(--brick); font-size: 13.5px; text-decoration: underline; }

.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  vertical-align: middle;
}
.avatar-lg { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }

.nav-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
}
.nav-btn:hover { border-color: var(--brick); color: var(--brick); }
.nav-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 20px 60px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  min-width: 0;
}
.shell > * { min-width: 0; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .shell { padding: 14px 12px 40px; gap: 14px; }
  .topbar { padding: 10px 14px; justify-content: center; }
  .brand .sub { display: none; }
  .brand h1 { font-size: 16px; }
  .user-chip { width: 100%; justify-content: center; gap: 6px; }
  .nav-btn { font-size: 12px; padding: 8px 10px; }
  .user-chip .role-badge { display: none; }
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 20px;
}
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.panel h2 .num { font-family: var(--font-mono); font-size: 11px; color: var(--brick); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  width: 100%; max-width: 360px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 26px 24px;
}
.login-card .mark { font-family: var(--font-mono); font-size: 12px; color: var(--brick); }
.login-card h1 { font-size: 21px; margin: 6px 0 2px; }
.login-card .sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 20px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 16px; /* verhindert Auto-Zoom beim Fokussieren auf iOS */
  font-family: var(--font-body);
  background: #fff;
  min-height: 44px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--brick); outline-offset: 1px; }

.btn-primary {
  width: 100%;
  background: var(--brick);
  color: #fff;
  border: none;
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
  min-height: 46px;
}
.btn-primary:hover { background: var(--brick-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.error-msg {
  background: #fbe6e2;
  color: var(--brick-dark);
  border: 1px solid #e6b9ac;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* ---------- Lageplan / Map ---------- */
.map-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.map-toolbar .field { margin: 0; }
.map-toolbar input[type=date] {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 16px;
  min-height: 44px;
  background: #fff;
}

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 16px; }
.legend .swatch { display: inline-flex; align-items: center; gap: 5px; }
.legend .dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }

.plan {
  background: repeating-linear-gradient(0deg, rgba(34,39,31,0.035) 0 1px, transparent 1px 24px),
              repeating-linear-gradient(90deg, rgba(34,39,31,0.035) 0 1px, transparent 1px 24px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.plan-zone { margin-bottom: 22px; }
.plan-zone:last-child { margin-bottom: 0; }
.plan-zone .zone-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.zone-top { display: grid; grid-auto-flow: column; grid-auto-columns: 64px; grid-auto-rows: 104px; gap: 5px; overflow-x: auto; padding-bottom: 4px; }
.zone-cols { display: flex; gap: 46px; flex-wrap: wrap; }
.zone-left, .zone-mid { display: grid; grid-auto-rows: 54px; gap: 5px; width: 104px; }

.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.12);
  text-align: center;
  line-height: 1.15;
  min-height: 48px;
}
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { filter: brightness(0.96); transform: translateY(-1px); }
.tile.clickable:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }

.tile-pool { background: var(--pool); }
.tile-special { background: var(--special); }
.tile-utility { background: var(--utility); color: #26425a; font-size: 15px; align-items: center; }
.tile-green { background: var(--green); }
.tile-gap { background: transparent; border: 1px dashed var(--line); }

.tile-assigned {
  background: var(--brick);
  color: #f6ece7;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  padding-bottom: 14px;
}

.tile-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.85);
  margin-top: 1px;
}

.tile-vacant-label {
  color: #a9f0c4;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* Buchbare (abwesende) Eigentuemer-Plaetze: komplett gruen, gut sichtbar */
.tile-assigned.is-free { background: var(--free); color: #f2fbf5; }
.tile-assigned.is-free .tile-tag { color: #eafff1; }
/* Fremd gebuchte Plaetze (von jemand anderem als dem Inhaber gebucht): schwarz */
.tile-assigned.is-booked { background: #1a1a1a; color: #f2f2f2; opacity: 1; }
.tile-fremd { filter: saturate(0.55) brightness(1.02); }

/* ---------- Gebaeudeumriss ---------- */
.zone-building { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.building-shape { position: relative; flex: 1; min-height: 560px; }
.building-shape svg { width: 100%; height: 100%; overflow: visible; }
.building-shape .outline { fill: #fbf9f5; stroke: var(--ink); stroke-width: 1.1; }
.building-label {
  position: absolute;
  top: 50%;
  left: 34%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.35;
  padding: 0 6px;
  pointer-events: none;
}
.building-green-strip { height: 22px; background: var(--green); border-radius: 4px; margin-bottom: 6px; }
@media (max-width: 900px) { .zone-building { display: none; } }

/* ---------- Listen / Karten ---------- */
.spot-summary { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.spot-summary .badge { font-family: var(--font-mono); font-size: 11px; padding: 6px 8px; border-radius: 5px; color: #fff; background: var(--brick); min-width: 44px; text-align: center; }
.spot-summary .meta { flex: 1; font-size: 13px; }
.spot-summary .meta .title { font-weight: 600; }
.spot-summary .meta .sub { color: var(--ink-soft); font-size: 12px; }

.status-pill { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.03em; }
.status-frei { background: var(--free-bg); color: var(--free); }
.status-belegt { background: #f1ece4; color: var(--ink-soft); }
.status-gebucht { background: #e9e4f6; color: #5b4b9e; }

.list-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.list-item:last-child { border-bottom: none; }
.list-item .dates { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

.btn-small { background: transparent; border: 1px solid var(--line); padding: 8px 12px; border-radius: 6px; font-size: 13px; min-height: 38px; }
.btn-small:hover { border-color: var(--brick); color: var(--brick); }
.btn-small.danger:hover { border-color: var(--brick); color: var(--brick); background: #fbe6e2; }

.mini-select { padding: 8px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; font-family: var(--font-body); background: #fff; max-width: 150px; min-height: 40px; }

.user-edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.user-edit-row:last-child { border-bottom: none; }
.user-edit-row input, .user-edit-row select {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 16px;
  font-family: var(--font-body);
  min-height: 42px;
  flex: 1 1 130px;
}
.user-edit-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

@media (max-width: 640px) {
  .user-edit-row {
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
  }
  .user-edit-row:last-child { margin-bottom: 0; }
  .user-edit-row input, .user-edit-row select { flex: 1 1 auto; width: 100%; }
  .user-edit-actions { flex-direction: column; margin-left: 0; width: 100%; gap: 8px; margin-top: 4px; }
  .user-edit-actions .btn-small { width: 100%; }
}

.btn-outline { background: transparent; border: 1.5px solid var(--brick); color: var(--brick); padding: 11px 14px; border-radius: 7px; font-size: 14px; font-weight: 600; min-height: 44px; }
.btn-outline:hover { background: var(--brick); color: #fff; }

.empty-note { font-size: 12.5px; color: var(--ink-soft); padding: 10px 0; }
#bk-taken-days { margin-bottom: 4px; }
.tag-taken {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  background: #f1ece4;
  color: var(--ink-soft);
  padding: 2px 7px;
  border-radius: 10px;
  margin: 2px 3px 2px 0;
}

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(34,39,31,0.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 400px; padding: 22px 22px 20px; max-height: 90vh; overflow-y: auto; }
.modal h3 { font-size: 16px; margin-bottom: 4px; }
.modal .sub { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions button { flex: 1; }
.btn-secondary { background: #fff; border: 1px solid var(--line); padding: 12px 14px; border-radius: 7px; font-size: 14.5px; min-height: 44px; }

/* Benachrichtigungs-Popup */
.notice-banner { background: #fff8e6; border: 1px solid #e8d38a; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; }

/* ---------- Auswertung ---------- */
.report-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th, .report-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.report-table th { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.report-table tbody tr:hover { background: #fff; }

.report-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 22px; }
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.summary-card .title { font-size: 12.5px; font-weight: 600; }
.summary-card .count { font-family: var(--font-mono); font-size: 20px; color: var(--brick); }
.summary-card .sub { font-size: 11px; color: var(--ink-soft); }

/* ---------- Wochenplan ---------- */
.schedule-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.range-label { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
.schedule-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.schedule-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 380px; }
.schedule-table th, .schedule-table td { text-align: center; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.schedule-table th { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; color: var(--ink-soft); position: sticky; top: 0; background: var(--paper); }
.schedule-table td.spot-col, .schedule-table th.spot-col {
  text-align: left; font-weight: 600; white-space: nowrap;
  position: sticky; left: 0; background: var(--paper); z-index: 1;
  box-shadow: 1px 0 0 var(--line);
}

.sched-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 36px; padding: 4px 6px; border-radius: 5px; font-size: 11px; }
.sched-cell.sched-frei { background: var(--free-bg); color: var(--free); cursor: pointer; font-weight: 700; }
.sched-cell.sched-belegt { background: #f1ece4; color: var(--ink-soft); }
.sched-cell.sched-gebucht { background: #e9e4f6; color: #5b4b9e; }
.sched-cell:hover.sched-frei { outline: 2px solid var(--free); }

/* Zeile des aktuell eingeloggten (primaeren) Nutzers hervorheben */
.schedule-table tr.my-row td.spot-col { background: var(--pool); font-weight: 700; }
.schedule-table tr.my-row td { background: rgba(240, 179, 166, 0.35); }

@media (max-width: 640px) {
  .schedule-table { font-size: 12px; min-width: 340px; }
  .schedule-table th, .schedule-table td { padding: 6px 4px; }
  .sched-cell { min-width: 48px; min-height: 40px; font-size: 10.5px; }
}

/* ---------- Profil ---------- */
.profile-grid { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.profile-photo-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }

@media (max-width: 480px) {
  .zone-top { grid-auto-columns: 54px; grid-auto-rows: 90px; }
  .zone-cols { gap: 20px; }
  .zone-left, .zone-mid { width: 90px; grid-auto-rows: 48px; }
}

/* ---------- Mobile-Feinschliff (App läuft primär auf dem Handy) ---------- */
@media (max-width: 640px) {
  .panel { padding: 16px 14px 18px; }
  .panel h2 { font-size: 16px; }
  .legend { font-size: 12.5px; gap: 10px 16px; }
  .tile { font-size: 11.5px; }
  .list-item { font-size: 14px; padding: 12px 0; }
  .list-item .dates { font-size: 12.5px; }
  .spot-summary { padding: 14px; gap: 10px; }
  .spot-summary .meta { font-size: 14px; }
  .spot-summary .meta .sub { font-size: 12.5px; }
  .empty-note { font-size: 13.5px; }
  .status-pill { font-size: 11px; padding: 4px 9px; }
  .modal { padding: 20px 18px 18px; }
  .modal h3 { font-size: 17px; }
  .modal .sub { font-size: 13px; }
}