/* Design-Ueberarbeitung (ab 05.09.2026): gemeinsames helles, klassisch-modernes
   SaaS-Theme fuer die internen Anwendungsseiten. Bewusst als eigene Datei getrennt
   von style.css (dunkles Landing-Page-Theme) - Absprache mit dem Kunden war ein
   kompletter Bruch mit dem bisherigen dunklen Look, nicht dessen Erweiterung, und
   der Umbau erfolgt Seite fuer Seite ("erst eine Seite direkt umsetzen, dann
   gemeinsam verfeinern"). dashboard.html ist die erste umgebaute Seite; admin.html/
   incidents.html/index.html folgen mit dem gleichen theme.css als Basis - bis dahin
   bleiben sie bewusst unveraendert im alten Theme.
   Namenskonvention: alle Klassen mit sv- Praefix, um Kollisionen mit noch
   verbleibenden alten Klassen (aus style.css/dashboard.css) auszuschliessen. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme:light;
  --sv-bg:#f6f7fb;
  --sv-surface:#ffffff;
  --sv-surface-sunken:#f0f1f6;
  --sv-border:#e4e6ee;
  --sv-border-strong:#d3d6e2;
  --sv-text:#161821;
  --sv-text-muted:#6b7086;
  --sv-text-faint:#9296a8;
  --sv-primary:#4f46e5;
  --sv-primary-hover:#4338ca;
  --sv-primary-soft:#eef0fd;
  --sv-success:#0f9d58;
  --sv-success-soft:#e8f7ee;
  --sv-warning:#b45309;
  --sv-warning-soft:#fef3e2;
  --sv-danger:#dc2626;
  --sv-danger-soft:#fdecec;
  --sv-radius:10px;
  --sv-radius-lg:14px;
  --sv-shadow:0 1px 2px rgba(20,22,35,.04),0 4px 14px rgba(20,22,35,.06);
  --sv-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}

body.sv-app{margin:0;background:var(--sv-bg);color:var(--sv-text);font-family:var(--sv-font);-webkit-font-smoothing:antialiased}
.sv-app a{color:inherit}

/* --- Topnav --- */
.sv-topnav{display:flex;align-items:center;gap:28px;padding:0 28px;height:64px;background:var(--sv-surface);border-bottom:1px solid var(--sv-border);position:sticky;top:0;z-index:10}
.sv-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;color:var(--sv-text)}
.sv-brand-mark{width:28px;height:28px;border-radius:8px;flex:none;background:linear-gradient(135deg,#4f46e5,#7c73f0);display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:800}
.sv-nav-links{display:flex;align-items:center;gap:4px;flex:1}
.sv-nav-links a{padding:8px 14px;border-radius:8px;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--sv-text-muted)}
.sv-nav-links a:hover{background:var(--sv-surface-sunken);color:var(--sv-text)}
.sv-nav-links a.active{background:var(--sv-primary-soft);color:var(--sv-primary)}
.sv-topnav-right{display:flex;align-items:center;gap:14px}
.sv-tenant-select{border:1px solid var(--sv-border);border-radius:8px;padding:7px 10px;font-family:var(--sv-font);font-size:.85rem;color:var(--sv-text);background:var(--sv-surface)}
.sv-logout-btn{border:1px solid var(--sv-border);background:var(--sv-surface);color:var(--sv-text-muted);padding:7px 14px;border-radius:8px;font-family:var(--sv-font);font-size:.85rem;font-weight:600;cursor:pointer}
.sv-logout-btn:hover{border-color:var(--sv-border-strong);color:var(--sv-text)}

/* --- Layout --- */
.sv-main{max-width:1180px;margin:0 auto;padding:28px 28px 60px}
.sv-page-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.sv-page-subtitle{color:var(--sv-text-muted);font-size:.92rem;margin:0 0 24px}

/* --- Cards --- */
.sv-card{background:var(--sv-surface);border:1px solid var(--sv-border);border-radius:var(--sv-radius-lg);box-shadow:var(--sv-shadow);padding:22px;margin-top:20px}
.sv-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sv-card-title{font-size:.95rem;font-weight:700;margin:0}

/* --- KPI-Kacheln --- */
.sv-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.sv-kpi{background:var(--sv-surface);border:1px solid var(--sv-border);border-radius:var(--sv-radius-lg);box-shadow:var(--sv-shadow);padding:18px 20px}
.sv-kpi-label{font-size:.78rem;color:var(--sv-text-muted);font-weight:600;margin:0 0 10px;text-transform:uppercase;letter-spacing:.03em}
.sv-kpi-value{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1;color:var(--sv-text)}
.sv-kpi-value.sv-ok{color:var(--sv-success)}
.sv-kpi-value.sv-warn{color:var(--sv-warning)}
.sv-kpi-value.sv-danger{color:var(--sv-danger)}
.sv-kpi-hint{font-size:.8rem;color:var(--sv-text-faint);margin-top:6px}

/* --- Tabelle --- */
.sv-table{width:100%;border-collapse:collapse;font-size:.9rem}
.sv-table th{text-align:left;color:var(--sv-text-muted);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:0 12px 10px;border-bottom:1px solid var(--sv-border)}
.sv-table td{padding:12px;border-bottom:1px solid var(--sv-border)}
.sv-table tr:last-child td{border-bottom:0}
.sv-table tr.clickable{cursor:pointer}
.sv-table tr.clickable:hover td{background:var(--sv-surface-sunken)}
.sv-table td.stale{color:var(--sv-warning);font-weight:600}

/* --- Buttons --- */
.sv-btn-ghost{background:transparent;border:1px solid var(--sv-border);color:var(--sv-text-muted);padding:6px 14px;border-radius:8px;font-family:var(--sv-font);font-size:.82rem;font-weight:600;cursor:pointer}
.sv-btn-ghost:hover{border-color:var(--sv-border-strong);color:var(--sv-text)}

.sv-range-group{display:flex;gap:6px}
.sv-range-btn{background:var(--sv-surface);border:1px solid var(--sv-border);color:var(--sv-text-muted);padding:5px 12px;border-radius:7px;font-family:var(--sv-font);font-size:.78rem;font-weight:600;cursor:pointer}
.sv-range-btn:hover{border-color:var(--sv-border-strong);color:var(--sv-text)}
.sv-range-btn.active{background:var(--sv-primary);border-color:var(--sv-primary);color:#fff}

.sv-error-banner{background:var(--sv-danger-soft);border:1px solid #f3b9b9;color:var(--sv-danger);padding:12px 16px;border-radius:var(--sv-radius);margin:20px 28px 0;font-size:.88rem}

/* --- Verlaufs-Diagramm --- */
.sv-chart-stats{display:flex;gap:28px;margin-bottom:16px;flex-wrap:wrap}
.sv-chart-stat-label{font-size:.75rem;color:var(--sv-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin:0 0 4px}
.sv-chart-stat-value{font-size:1.15rem;font-weight:700;margin:0}
.sv-chart-empty{color:var(--sv-text-faint);font-size:.88rem;padding:30px 0;text-align:center;margin:0}
.sv-chart svg{width:100%;height:auto;display:block}
.sv-chart-axis-label{font-size:10px;fill:#9296a8;font-family:'Inter',sans-serif}
.sv-chart-gridline{stroke:#e4e6ee}
.sv-chart-line{fill:none;stroke:#4f46e5;stroke-width:2}
.sv-chart-dot{fill:#ffffff;stroke:#4f46e5;stroke-width:2}

@media(max-width:860px){
  .sv-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .sv-nav-links{display:none}
}

/* --- Tabs (Design-Ueberarbeitung: ersetzt die fruehere Dashboard/Incidents/
   Administration-Kopfzeilennavigation ueber drei Seiten) --- */
.sv-tabs{display:flex;align-items:center;gap:4px;flex:1}
.sv-tabs[hidden]{display:none}
.sv-tab{background:transparent;border:none;padding:8px 16px;border-radius:8px;font-family:var(--sv-font);font-size:.9rem;font-weight:600;color:var(--sv-text-muted);cursor:pointer}
.sv-tab:hover{background:var(--sv-surface-sunken);color:var(--sv-text)}
.sv-tab.active{background:var(--sv-primary-soft);color:var(--sv-primary)}
/* SV-018: zweite Navigationsebene fuer die 5 Admin-Unterbereiche (Geraete-
   Verwaltung/Raeume & Standorte/Regeln/Benutzerverwaltung/Konfiguration) -
   eigene, etwas gedeckte Leiste unterhalb der Hauptnav, damit Dashboard/Admin
   (sv-areas) klar als uebergeordnete Ebene erkennbar bleibt. */
.sv-subtabs{padding:10px 28px;background:var(--sv-surface-sunken);border-bottom:1px solid var(--sv-border)}
.sv-subtabs .sv-tab{font-size:.85rem;padding:6px 14px}

.sv-logo-preview{margin-bottom:12px}
.sv-logo-preview-img{max-height:64px;max-width:220px;border-radius:6px;background:var(--sv-surface-sunken);padding:6px}

/* --- Formulare (frueher admin.css/incidents.css, dunkles Theme) --- */
.sv-form{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center}
.sv-form input[type="text"],.sv-form input[type="password"],.sv-form input[type="number"],.sv-form select{
  background:var(--sv-surface);border:1px solid var(--sv-border);border-radius:8px;color:var(--sv-text);
  padding:8px 10px;font-family:var(--sv-font);font-size:.85rem;
}
.sv-form input[type="number"]{width:9em}
.sv-form label{color:var(--sv-text-muted);font-size:.85rem;margin-right:14px;cursor:pointer}
.sv-form input[type="radio"]{margin-right:4px}
.sv-form button[type="submit"]{
  background:var(--sv-primary);border:1px solid var(--sv-primary);color:#fff;
  padding:8px 16px;border-radius:8px;font-family:var(--sv-font);font-size:.85rem;font-weight:600;cursor:pointer;
}
.sv-form button[type="submit"]:hover{background:var(--sv-primary-hover);border-color:var(--sv-primary-hover)}
.sv-table td:last-child{white-space:nowrap}

/* --- Design-Iteration: Baum-Navigation ersetzt die fruehere Breadcrumb-Leiste
   im Struktur-Bereich (Raeume & Standorte) - Kundenfeedback: das rein
   sequenzielle "Oeffnen"-Klicken ohne Blick auf Geschwister-/Elternknoten war
   unuebersichtlich. Baum links (staendig sichtbar, aufklappbar bis zur
   Sensor-Ebene), Kinder-Tabelle weiterhin rechts (siehe rooms.js). --- */
.sv-infra-layout{display:flex;gap:24px;align-items:flex-start}
.sv-infra-tree-nav{width:280px;flex-shrink:0;max-height:70vh;overflow-y:auto;border-right:1px solid var(--sv-border);padding-right:14px}
.sv-infra-main{flex:1;min-width:0;overflow-x:auto}
@media (max-width: 860px){
  .sv-infra-layout{flex-direction:column}
  .sv-infra-tree-nav{width:100%;max-height:240px;border-right:none;border-bottom:1px solid var(--sv-border);padding-right:0;padding-bottom:14px}
}

.sv-tree,.sv-tree-children{list-style:none;margin:0;padding-left:16px}
.sv-tree{padding-left:0}
.sv-tree-node{margin:1px 0}
.sv-tree-row{display:flex;align-items:center;gap:2px;border-radius:6px}
.sv-tree-row.active{background:var(--sv-primary-soft)}
.sv-tree-row.active>.sv-tree-label{color:var(--sv-primary);font-weight:600}
.sv-tree-caret{background:transparent;border:none;cursor:pointer;width:18px;flex-shrink:0;padding:0;color:var(--sv-text-muted);font-size:.7rem;line-height:1}
.sv-tree-caret-spacer{width:18px;flex-shrink:0;display:inline-block}
.sv-tree-label{flex:1;min-width:0;text-align:left;background:transparent;border:none;padding:5px 4px;cursor:pointer;font-family:var(--sv-font);font-size:.85rem;color:var(--sv-text);border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-tree-label:hover{background:var(--sv-surface-sunken)}
.sv-tree-add{background:transparent;border:none;cursor:pointer;color:var(--sv-text-muted);font-weight:700;width:20px;flex-shrink:0;font-size:.9rem;line-height:1}
.sv-tree-add:hover{color:var(--sv-primary)}
.sv-tree-inline-create{padding:3px 0 3px 18px}
.sv-tree-inline-form{display:flex;flex-wrap:wrap;gap:4px}
.sv-tree-inline-form input,.sv-tree-inline-form select{font-size:.8rem;padding:3px 6px;border-radius:5px;border:1px solid var(--sv-border);font-family:var(--sv-font)}
.sv-tree-inline-form button{font-size:.75rem;padding:3px 8px}

/* SV-019: Adress-Autovervollstaendigung (rooms.js attachAddressAutocomplete) */
.sv-geocode-suggestions{list-style:none;margin:2px 0 0;padding:2px;border:1px solid var(--sv-border-strong);
  border-radius:6px;background:var(--sv-surface);box-shadow:var(--sv-shadow);max-height:160px;
  overflow-y:auto;font-family:var(--sv-font);flex-basis:100%}
.sv-geocode-suggestions[hidden]{display:none}
.sv-geocode-suggestions li{padding:5px 8px;font-size:.8rem;cursor:pointer;border-radius:4px;color:var(--sv-text)}
.sv-geocode-suggestions li:hover{background:var(--sv-primary-soft);color:var(--sv-primary)}

/* --- SV-017: Verbindungskonfiguration je Geraet (aufgeklappte Tabellenzeile) --- */
.sv-connection-row td{background:var(--sv-surface-sunken);border-top:1px dashed var(--sv-border)}
.sv-connection-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.sv-connection-status{color:var(--sv-text-muted);font-size:.8rem}

#incident-detail-actions:empty{display:none}

/* --- Design-Iteration: "Grafana-Stil"-Dashboard - Kachel-Raster (siehe
   dashboard_tiles.js). Kacheln bewusst dunkel/neutral gehalten (nicht
   themeabhaengig hell/dunkel wie der Rest der App) - das ist der Grafana-
   typische Look, den der Kunde mit "Grafana Stil" gemeint hat. --- */
.sv-tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:14px}
.sv-tile{background:#181b1f;border:1px solid #2c3235;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.sv-tile-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #2c3235}
.sv-tile-title{color:#d8d9da;font-family:var(--sv-font);font-size:.85rem;font-weight:600;margin:0}
.sv-tile-subtitle{color:#8e9297;font-family:var(--sv-font);font-size:.72rem;margin:2px 0 0}
.sv-tile-remove{background:transparent;border:none;color:#8e9297;font-size:1.1rem;line-height:1;cursor:pointer;padding:0 2px}
.sv-tile-remove:hover{color:#d8d9da}
.sv-tile-body{padding:8px 12px 10px;flex:1}
.sv-tile-body svg{width:100%;height:auto;display:block}
.sv-tile-body .sv-chart-line{fill:none;stroke:#73bf69;stroke-width:1.5}
.sv-tile-body .sv-chart-dot{fill:#73bf69}
.sv-tile-body .sv-chart-gridline{stroke:#2c3235}
.sv-tile-body .sv-chart-axis-label{fill:#8e9297;font-size:8px;font-family:var(--sv-font)}
.sv-tile-body .sv-chart-empty{color:#8e9297;font-size:.78rem;text-align:center;padding:24px 0;margin:0}
.sv-tile-current-state{color:#d8d9da;font-family:var(--sv-font);font-size:.78rem;text-align:center;margin:4px 0 0}

/* SV-019: kombinierte Wetter-Kachel (dashboard_tiles.js buildWeatherTileCard) -
   nutzt dieselbe feste dunkle Grafana-Palette wie die uebrigen Kacheln oben. */
.sv-weather-tile-current{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.sv-weather-tile-temp{color:#d8d9da;font-family:var(--sv-font);font-size:2rem;font-weight:600;line-height:1;margin:0;white-space:nowrap}
.sv-weather-tile-metrics{display:flex;flex-direction:column;gap:3px;font-family:var(--sv-font);font-size:.75rem;color:#8e9297}
.sv-weather-tile-metrics p{margin:0}
.sv-weather-tile-metrics span{color:#d8d9da;font-weight:600}
.sv-weather-tile-chart{margin-top:2px}

.sv-hint{color:var(--sv-text-muted);font-size:.85rem;font-family:var(--sv-font);margin:10px 0}