@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  /* Basis */
  --bg: #14181c;
  --panel: #1c2228;
  --panel-2: #222a31;
  --border: #2c363f;
  --text: #eaedef;
  --text-muted: #8b96a0;

  /* Wasser-Akzent (statt generischem Feuerwehr-Rot ueberall) */
  --accent: #4a9de0;
  --accent-strong: #6bb3f0;

  /* Ampel: einzige semantische Farbcodierung, ueberall konsistent genutzt */
  --ok: #3fb37f;
  --mangelhaft: #e0a63e;
  --defekt: #e0503e;
  --unbekannt: #5b6670;

  --radius: 10px;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html{ height:100%; background: var(--bg); }
body{
  min-height: 100%;
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1,h2,h3{ font-family: var(--font-display); margin: 0 0 4px; letter-spacing: -0.01em; }
button, input, select, textarea{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.view{ width:100%; }
.view-login{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding: 20px; }
.view-app{ height:100vh; height:100dvh; }

/* ---------- Login ---------- */
.login-card{
  width: 100%; max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.login-mark{ color: var(--accent); margin-bottom: 12px; }
.login-sub{ color: var(--text-muted); margin: 0 0 24px; font-size: 14px; }
.field{ display:block; margin-bottom: 14px; }
.field span{ display:block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.field input, select, textarea{
  width:100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 14px;
}
.error-text{ color: var(--defekt); font-size: 13px; margin: 4px 0 14px; }

.btn{
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: filter .12s ease;
}
.btn:hover{ filter: brightness(1.15); }
.btn-primary{ background: var(--accent); border-color: var(--accent); color: #0c1216; }
.btn-ghost{ background: transparent; }
.btn-block{ width: 100%; margin-top: 6px; }
.btn-danger{ background: transparent; border-color: var(--defekt); color: var(--defekt); }
.btn-ai{ background: linear-gradient(135deg, var(--accent), #7a6ce0); border: none; color: #0c1216; }

/* ---------- App-Shell ---------- */
.view-app{ display:flex; flex-direction:column; }
.topbar{
  height: 56px; flex: none; display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.topbar-brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; color: var(--accent-strong); }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.whoami{ color: var(--text-muted); font-size: 13px; margin-right: 4px; }
.badge-count{ background: var(--defekt); color:#fff; border-radius: 10px; padding: 1px 7px; font-size: 11px; margin-left: 6px; }

.layout{ flex:1; display:flex; min-height:0; position:relative; }

/* ---------- Sidebar ---------- */
.sidebar{
  width: 320px; flex: none; border-right: 1px solid var(--border);
  background: var(--panel); display:flex; flex-direction:column; min-height:0;
}
.sidebar-head{ padding: 14px; display:flex; flex-direction:column; gap:8px; border-bottom: 1px solid var(--border); }
.sidebar-head input, .sidebar-head select{ width:100%; }
.hydrant-list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; }
.hydrant-row{
  display:flex; gap:10px; align-items:center; padding: 12px 14px;
  border-bottom: 1px solid var(--border); cursor:pointer;
}
.hydrant-row:hover{ background: var(--panel-2); }
.hydrant-row.active{ background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.status-dot{ width:10px; height:10px; border-radius:50%; flex:none; background: var(--unbekannt); }
.status-dot.faellig{ box-shadow: 0 0 0 2px var(--defekt); }
.hydrant-row-main{ min-width:0; }
.hr-nummer{ display:block; font-family: var(--font-mono); font-size: 14px; }
.hr-meta{ display:block; font-size: 12px; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Read-only Stammdaten-Uebersicht (fuer alle Nutzer sichtbar) ---------- */
.stammdaten-readonly{
  margin-top: 14px; padding: 12px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.sr-row{ display:flex; justify-content:space-between; gap:10px; padding: 3px 0; }
.sr-row span{ color: var(--text-muted); }
.sr-row strong{ font-weight:600; text-align:right; }

/* ---------- Detail-Tabs (Wartung / Verwaltung) ---------- */
.tabs{ display:flex; gap:4px; margin: 16px 0 4px; border-bottom: 1px solid var(--border); }
.tab-btn{
  background:none; border:none; color: var(--text-muted); font-family: var(--font-display);
  font-weight:600; font-size: 13px; padding: 8px 4px; cursor:pointer; border-bottom: 2px solid transparent;
}
.tab-btn.active{ color: var(--accent-strong); border-bottom-color: var(--accent-strong); }
.tab-btn:hover{ color: var(--text); }

/* ---------- Karte ---------- */
.map-wrap{ flex:1; position:relative; min-width:0; }
#map{ position:absolute; inset:0; background: #0e1114; }
.map-hint{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background: var(--panel); border:1px solid var(--accent); padding:8px 14px;
  border-radius: 999px; font-size: 13px; z-index: 1000;
}
.leaflet-popup-content-wrapper{ background: var(--panel); color: var(--text); border-radius: 8px; }
.leaflet-popup-tip{ background: var(--panel); }

/* Marker-Badges (Signatur-Element: Ampel-Status + Faellig-Ring direkt auf der Karte) */
.hydrant-marker-outer{
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #0c1216; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  background: transparent;
}
.hydrant-marker-outer.faellig{
  width: 28px; height: 28px; border: 3px solid var(--defekt);
  box-shadow: 0 0 0 2px rgba(224,80,62,.35), 0 1px 4px rgba(0,0,0,.5);
}
.hydrant-marker-inner{ width: 14px; height: 14px; border-radius: 50%; background: var(--unbekannt); }
.hydrant-marker-outer.faellig .hydrant-marker-inner{ width: 18px; height: 18px; }

/* ---------- Detail-/Formular-Panel ---------- */
.panel{
  width: 380px; flex: none; background: var(--panel); border-left: 1px solid var(--border);
  overflow-y:auto; padding: 18px; position:relative;
}
.panel-close{
  position:absolute; top:12px; right:12px; background:none; border:none; color: var(--text-muted);
  font-size: 22px; cursor:pointer; line-height:1;
}
.panel h2{ font-size: 18px; margin-bottom: 2px; }
.panel .sub{ color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }

.status-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding: 4px 10px; border-radius: 999px; background: var(--panel-2); text-transform:capitalize;
}
.status-pill .dot{ width:8px; height:8px; border-radius:50%; background: var(--unbekannt); }

.section{ margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.section h3{ font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px; }

.kv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.kv-grid .field{ margin-bottom: 0; }
.mono{ font-family: var(--font-mono); }

.wartung-item{ padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.wartung-item:last-child{ border-bottom:none; }
.wartung-item .wi-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
.wartung-item .wi-date{ font-family: var(--font-mono); color: var(--text-muted); }
.wartung-item .wi-bemerkung{ color: var(--text-muted); margin-top:2px; }

.admin-row{
  display:flex; gap:6px; align-items:center; padding: 8px 0;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.admin-row:last-child{ border-bottom:none; }
.admin-row input, .admin-row select{
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 6px 8px; font-size: 13px; flex: 1; min-width: 90px;
}
.admin-row .btn{ padding: 6px 10px; font-size: 12px; flex: none; }
.admin-row-user{ align-items: flex-start; }
.au-name{ flex: 1 1 100%; min-width: 100%; margin-bottom: 4px; }
.au-name .hr-meta{ display:block; }

.admin-row input[type="color"]{ flex: 0 0 40px; min-width: 40px; padding: 2px; height: 32px; cursor:pointer; }
.z-aktiv-label{ display:flex; align-items:center; gap:4px; font-size:12px; color: var(--text-muted); flex: 0 0 auto; }
.z-aktiv-label input{ width:auto; }

.plan-box{
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; font-size: 13px; margin-bottom: 10px;
}
.plan-box .pb-termin{ font-family: var(--font-mono); font-size: 15px; }
.plan-box .pb-quelle{ color: var(--text-muted); font-size: 12px; }

.feld-checkboxen{ display:grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top:4px; }
.checkbox-row{ display:flex; align-items:center; gap:6px; font-size: 13px; color: var(--text); }
.checkbox-row input{ width:auto; }

.form-row{ display:flex; gap:8px; }
.form-row .field{ flex:1; }
.empty-hint{ color: var(--text-muted); font-size: 13px; padding: 10px 0; }

/* ---------- Responsive: schmale Bildschirme (Handy) ---------- */
@media (max-width: 860px){
  .sidebar{ position:absolute; inset:0; z-index: 500; width:100%; }
  .layout.show-map .sidebar{ display:none; }
  .panel{ position:absolute; inset:0; width:100%; z-index: 600; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}