/* ============================================================================
   SCHLAUCHLEITUNGSPLANER · Gestaltung
   ----------------------------------------------------------------------------
   Leitidee „Einsatzkonsole bei Nacht": Asphaltdunkle Flächen, Feuerwehrrot
   (RAL 3000) und Leuchtgelb der Fahrzeug-Warnmarkierung als Akzentpaar,
   DIN-nahe Schrift (Saira Condensed) für Überschriften, Monospace für Werte.
   Erkennungszeichen: der rot-gelbe Warnstreifen (Kopfzeile, Fortschritt,
   aktiver Modus).

   ZUM SELBST-ANPASSEN reichen meist die Variablen direkt hier unten.
   ========================================================================== */
:root{
  /* Flächen */
  --bg:#0e1116;          /* Seitenhintergrund */
  --panel:#151a22;       /* Bedienfeld */
  --panel2:#10141a;      /* vertiefte Flächen (Eingaben, Karten, Listen) */
  --line:#2a3340;        /* kräftige Trennlinien / Ränder */
  --line2:#1d242d;       /* feine Trennlinien */

  /* Text */
  --text:#ecf0f6;
  --mut:#9aa8bc;         /* gedämpft */
  --faint:#66748a;       /* Fußnoten */

  /* Akzente */
  --rot:#e8442e;         /* Feuerwehrrot – Pumpen, Hauptaktionen */
  --rot2:#ff6a52;        /* helleres Rot für Hover/Werte */
  --gelb:#ffd23f;        /* Warnmarkierung – Hinweise, Gebiet */
  --gruen:#4ec47e;       /* Saugstelle, DGM1, ok */
  --blau:#6fb3e8;        /* DMR 5G */
  --lila:#c9a8ff;        /* Offline-Gebiet (lokales DEM) */
  --cyan:#39d7e6;        /* Live/Online/Sync – „futuristischer" Signalton */

  /* Schrift */
  --cond:"Saira Condensed", "Arial Narrow", sans-serif;   /* Überschriften, Modi */
  --sans:"Saira", system-ui, -apple-system, sans-serif;    /* Fließtext, Labels */
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; /* Zahlen */

  /* Maße */
  --panelw:404px;        /* Breite Bedienfeld */
  --radius:9px;

  /* Erkennungszeichen: Warnstreifen (rot/gelb, 45°) */
  --warnstreifen:repeating-linear-gradient(135deg,
      var(--rot) 0 12px, var(--gelb) 12px 24px);
}

/* ---------- Grundgerüst ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--gelb);outline-offset:2px;border-radius:4px}

/* ---------- Kopfzeile ---------- */
header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 18px 12px;background:var(--panel);position:relative;z-index:1100}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--warnstreifen);opacity:.92}
.brand{display:flex;flex-direction:column;gap:1px;min-width:max-content}
.brand .eyebrow{font:600 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gelb)}
.brand .title{font:700 23px/1.05 var(--cond);letter-spacing:.05em;text-transform:uppercase}
.grow{flex:1}
.hint{font-size:12px;color:var(--mut);max-width:340px}

/* Modusleiste */
.modebar{display:flex;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--panel2)}
.modebar button{position:relative;padding:8px 16px 10px;
  font:600 13px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);border-right:1px solid var(--line2)}
.modebar button:last-child{border-right:none}
.modebar button:hover{color:var(--text)}
.modebar button.active{color:var(--text);background:#1b212b}
.modebar button.active::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:3px;background:var(--warnstreifen)}

/* ---------- Hauptbereich ---------- */
#main{display:flex;flex:1;min-height:0;position:relative}
#panel{width:var(--panelw);min-width:var(--panelw);overflow-y:auto;
  background:var(--panel);border-right:1px solid var(--line);
  transition:margin .22s ease}
#panel.collapsed{margin-left:calc(-1 * var(--panelw))}
#mapwrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:#0b0e12}

/* ---------- Bedienfeld-Abschnitte ---------- */
.block{padding:16px 16px 18px;border-bottom:1px solid var(--line2)}
.block h2{display:flex;align-items:center;gap:9px;margin:0 0 13px;
  font:600 15px/1 var(--cond);letter-spacing:.09em;text-transform:uppercase}
.block h2 .n{font:600 10px/1 var(--mono);color:var(--rot2);
  border:1px solid var(--line);border-radius:5px;padding:4px 6px;background:var(--panel2)}
.subhead{margin:15px 0 9px;font:600 11px/1 var(--cond);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);
  border-top:1px solid var(--line2);padding-top:12px}
.footnote{font-size:11.5px;color:var(--faint);line-height:1.55;margin:9px 0 0}
.footnote b{color:var(--mut);font-weight:600}

/* Eingabezeilen */
.field{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:9px}
.field label{color:var(--mut);font-size:13px}
.field > div{display:flex;align-items:center;gap:7px}
.unit{font:500 11px/1 var(--mono);color:var(--faint)}
input[type=number],input[type=text],select{
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  color:var(--text);padding:7px 9px;font:500 13px var(--mono)}
input[type=number]{width:86px;text-align:right}
input::placeholder{color:#4d5a6e}
input:focus,select:focus{border-color:var(--rot);outline:none}
input[type=checkbox]{accent-color:var(--rot);width:15px;height:15px;vertical-align:-2px}
select{font-family:var(--sans);max-width:230px}
.stack{display:flex;flex-direction:column;gap:4px}
.stack .lbl{font:500 10.5px/1 var(--mono);letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:7px;background:#1a202a;
  padding:8px 13px;font:600 12.5px/1 var(--cond);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text)}
.btn:hover{border-color:#3a4656;background:#202836}
.btn.small{padding:6px 11px;font-size:11.5px}
.btn.ghost{background:transparent;color:var(--mut)}
.btn.ghost:hover{color:var(--text)}
.btn.primary{background:var(--rot);border-color:var(--rot);color:#fff}
.btn.primary:hover{background:var(--rot2);border-color:var(--rot2)}
.btn:disabled{opacity:.45;cursor:default}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.hidefile{display:none}

/* ---------- Schlauchtypen ---------- */
.hose{display:flex;align-items:flex-start;gap:10px;padding:10px 10px;
  border:1px solid var(--line2);border-radius:var(--radius);
  background:var(--panel2);margin-bottom:7px}
.hose.is-default{border-color:var(--rot)}
.swatch{width:13px;height:13px;border-radius:4px;margin-top:3px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.15) inset}
.hbody{flex:1;min-width:0}
.hname{font:600 14px/1.2 var(--cond);letter-spacing:.03em}
.dbl{font:600 9.5px/1 var(--mono);color:var(--gelb);border:1px solid #574a1d;
  border-radius:4px;padding:2px 5px;margin-left:5px;vertical-align:2px}
.hsub{font-size:11.5px;color:var(--mut);margin-top:2px}
.hsub b{font-family:var(--mono);color:var(--text)}
.hlen{font-size:11.5px;color:var(--mut);margin-top:5px}
.hlen input{width:62px;padding:4px 7px}
.htot{font:500 11px var(--mono);color:var(--faint);margin-top:5px}
.star{font-size:17px;color:#3a4454;cursor:pointer;line-height:1;padding:2px}
.star:hover{color:var(--gelb)}
.hose.is-default .star{color:var(--rot2)}
.assignsel{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}

/* ---------- Ergebnis ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}
.stat{background:var(--panel2);border:1px solid var(--line2);
  border-radius:var(--radius);padding:10px 12px}
.stat .v{font:600 21px/1.15 var(--mono)}
.stat .k{font:500 9.5px/1.3 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);margin-top:4px}
.stat.accent .v{color:var(--rot2)}
.stat.wide{grid-column:1/-1}
#messages .msg{border-radius:7px;padding:8px 11px;font-size:12px;margin-bottom:7px;
  border:1px solid}
.msg.err{background:#2a1412;border-color:#5c241c;color:#ffb4a8}
.msg.warn{background:#2a230f;border-color:#5c4c1c;color:#ffe49a}
.msg.info{background:#10202c;border-color:#1f3c52;color:#a8d4ff}

/* Pumpenliste */
.pumps{display:flex;flex-direction:column;gap:8px}
.pump{background:var(--panel2);border:1px solid var(--line2);
  border-radius:var(--radius);padding:10px 11px}
.pump .top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pump .tag{font:700 13px/1 var(--mono);color:var(--rot2)}
.badge{font:600 9.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  border-radius:4px;padding:3px 6px;border:1px solid}
.badge.start{color:var(--gruen);border-color:#1f4630;background:#10211a}
.badge.man{color:var(--gelb);border-color:#574a1d;background:#231d0d}
.badge.auto{color:var(--mut);border-color:var(--line);background:#161c25}
.pump .right{margin-left:auto;font:500 10.5px var(--mono);color:var(--faint)}
.pump .rm{color:#7e4a44;cursor:pointer;font-size:14px;padding:0 2px}
.pump .rm:hover{color:var(--rot2)}
.pump .ov{display:flex;gap:10px;margin-bottom:8px}
.pump .ov input{width:100%}
.pump .ov .stack{flex:1}
.pump .read{display:flex;gap:13px;flex-wrap:wrap}
.ri{font-size:11px;color:var(--faint)}
.ri b{font:600 12px var(--mono);color:var(--text)}
.ri.low b{color:var(--rot2)}

/* ---------- Offline-Gebiete ---------- */
#arealist{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.area{background:var(--panel2);border:1px solid var(--line2);
  border-radius:var(--radius);padding:10px 11px}
.area .aname{display:flex;align-items:center;gap:8px;font:600 14px/1.2 var(--cond);
  letter-spacing:.03em}
.area .aname .rm{margin-left:auto;color:#7e4a44;cursor:pointer}
.area .aname .rm:hover{color:var(--rot2)}
.area .ameta{font:500 10.5px var(--mono);color:var(--faint);margin-top:3px}
.area .astat{display:flex;justify-content:space-between;gap:8px;
  font:500 10.5px var(--mono);color:var(--mut);margin-top:8px}
.abar{height:6px;border-radius:3px;background:#0a0d12;border:1px solid var(--line2);
  overflow:hidden;margin-top:4px}
.abarfill{height:100%;width:0;background:var(--warnstreifen);transition:width .25s}
.area .arow{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.area .aerr{font-size:11px;color:#ffb4a8;margin-top:6px}

/* ---------- Karte: Marker & Beschriftungen ---------- */
.vtx{width:13px;height:13px;border-radius:50%;background:#fff;
  border:3px solid var(--rot);box-shadow:0 1px 4px rgba(0,0,0,.6)}
.vtx.first{border-color:var(--gruen)}
.pumpicon{background:none;border:none}
.pumpwrap{position:relative}
.pmk{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:700 12px var(--mono);color:#fff;
  background:var(--rot);box-shadow:0 1px 5px rgba(0,0,0,.65)}
.pmk.auto{background:#1a212b;border:2px dashed var(--rot2);color:var(--rot2)}
.pmk.manual{border:2px solid #fff3}
.pmk.start{background:var(--gruen);color:#06140c}
.plabel{position:absolute;left:30px;top:1px;display:flex;align-items:center;gap:5px;
  background:rgba(13,16,21,.92);border:1px solid var(--line);
  border-radius:6px;padding:3px 7px;font:600 11px var(--mono);white-space:nowrap;
  box-shadow:0 1px 5px rgba(0,0,0,.5)}
.pl-in{color:var(--gelb)}
.pl-out{color:var(--rot2)}
.plabel .pl-u{color:var(--faint);font-weight:400}
.plabel .pl-src{font-weight:700;font-size:9px;padding:1px 4px;border-radius:4px;
  letter-spacing:.02em}
.plabel .pl-src.dgm1{background:#173a25;color:#7ee0a3}
.plabel .pl-src.dmr5g{background:#16304a;color:#7fc8ff}
.plabel .pl-src.om{background:#3a2f12;color:#e8c879}
.plabel .pl-src.lokal{background:#241a38;color:var(--lila)}

/* Gebiets-Rechtecke auf der Karte */
.arealabel{background:rgba(13,16,21,.9);border:1px solid #574a1d;border-radius:5px;
  color:var(--gelb);font:600 10px var(--mono);padding:2px 6px;white-space:nowrap}

/* Hilfetext & Toast auf der Karte */
.maphelp{position:absolute;left:12px;bottom:12px;z-index:900;max-width:430px;
  background:rgba(13,16,21,.92);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;font-size:12px;color:var(--mut)}
.maphelp b{color:var(--text)}
.toast{position:absolute;top:14px;left:50%;transform:translate(-50%,-8px);
  z-index:950;background:#161c26;border:1px solid var(--line);border-left:4px solid var(--rot);
  border-radius:8px;padding:9px 14px;font-size:12.5px;opacity:0;
  pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Diagnose-Ausgabe */
.diag{margin-top:8px;background:#0a0d12;border:1px solid var(--line2);border-radius:8px;
  padding:9px 11px;font:400 11px/1.6 var(--mono);color:var(--mut);
  white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}

/* ---------- Leaflet dunkel abstimmen ---------- */
.leaflet-container{background:#0b0e12;font-family:var(--sans)}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--text)!important;
  border-color:var(--line)!important}
.leaflet-control-attribution{background:rgba(13,16,21,.8)!important;
  color:var(--faint)!important;font-size:10px!important}
.leaflet-control-attribution a{color:var(--mut)!important}
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:9px;font-size:12.5px}
.leaflet-popup-tip{background:var(--panel);border:1px solid var(--line)}
.leaflet-popup-content b{font-family:var(--cond);font-size:14px;letter-spacing:.04em}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  :root{--panelw:min(88vw,404px)}
  header{gap:10px;padding:9px 12px 11px}
  .brand .title{font-size:19px}
  .hint{display:none}
  #panel{position:absolute;z-index:1000;top:0;bottom:0;left:0;
    box-shadow:6px 0 24px rgba(0,0,0,.5)}
  #panel.collapsed{margin-left:0;transform:translateX(-104%)}
  #panel{transition:transform .22s ease}
  .modebar button{padding:8px 11px 10px;font-size:12px}
}

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

/* ============================================================================
   PROJEKTE · CLOUD · TEILEN · ANMELDUNG  (Erweiterung)
   ========================================================================== */

/* Konto-Zeile */
.acct{display:flex;align-items:center;gap:9px;font:500 11px/1 var(--mono);
  color:var(--mut);background:var(--panel2);border:1px solid var(--line2);
  border-radius:7px;padding:8px 10px}
.acct #acct-name{flex:1}
.acct.on #acct-name{color:var(--cyan)}
.acct.on #acct-name::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--cyan);margin-right:7px;vertical-align:0;
  box-shadow:0 0 7px var(--cyan)}

/* Sync-Status */
#sync-status{font:500 10.5px var(--mono);color:var(--faint);margin-top:10px}
#sync-status.live{color:var(--cyan)}

/* Projektliste */
#projlist{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.proj{display:flex;align-items:center;gap:9px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:var(--radius);padding:9px 11px}
.proj.current{border-color:var(--rot)}
.proj .pn{flex:1;min-width:0}
.proj .pn b{font:600 13px/1.2 var(--cond);letter-spacing:.03em;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj .pn span{font:500 10px var(--mono);color:var(--faint)}
.proj .pflag{font:600 8.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  padding:3px 5px;border-radius:4px;border:1px solid}
.proj .pflag.dirty{color:var(--gelb);border-color:#574a1d}
.proj .pflag.shared{color:var(--cyan);border-color:#1c4a52}
.proj .pact{color:var(--mut);cursor:pointer;font-size:13px;padding:2px 4px}
.proj .pact:hover{color:var(--text)}
.proj .pact.del:hover{color:var(--rot2)}

/* Modale (Teilen) */
.modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;
  justify-content:center;background:rgba(6,8,11,.74);backdrop-filter:blur(3px);padding:20px}
.modal[hidden]{display:none}
.sheet{position:relative;width:min(380px,94vw);background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(57,215,230,.08)}
.sheet h3{margin:0 0 4px;font:600 18px/1.1 var(--cond);letter-spacing:.05em;
  text-transform:uppercase}
.sheet .x{position:absolute;top:12px;right:13px;color:var(--mut);font-size:16px}
.sheet .x:hover{color:var(--text)}
.modal-sub{font-size:12px;color:var(--mut);margin:0 0 16px}
.qr{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:10px;
  margin-bottom:14px;min-height:160px;align-items:center}
.qr img,.qr canvas{display:block}
.linkrow{display:flex;gap:7px}
.linkrow input{flex:1;font:500 11px var(--mono);text-align:left}

/* Anmeldung */
.login{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;
  justify-content:center;padding:22px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(232,68,46,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 120%, rgba(57,215,230,.07), transparent 60%),
    var(--bg)}
.login[hidden]{display:none}
.loginbox{width:min(360px,92vw);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:9px;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.login-brand{margin-bottom:14px;position:relative;padding-bottom:14px}
.login-brand::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;
  background:var(--warnstreifen)}
.login-brand .eyebrow{display:block;font:600 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gelb);margin-bottom:4px}
.login-brand .title{display:block;font:700 25px/1.05 var(--cond);letter-spacing:.05em;
  text-transform:uppercase}
.login-l{font:500 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-top:6px}
.login input{width:100%;text-align:left}
.login .btn.primary{margin-top:14px;justify-content:center;padding:11px}
.login-err{font-size:12px;color:#ffb4a8;margin:4px 0 0}
.login-off{font-size:11.5px;color:var(--gelb);margin:4px 0 0;line-height:1.5}

@media (max-width:900px){
  .acct{font-size:12px}
}