/* Infraspectr Portal – Farben und Grundbausteine wie in Central (central/src/wwwroot/stil.css), dazu die Teile des Portals. */
:root {
  --grund: #f2f5f9;
  --karte: #ffffff;
  --rand: #e1e6ed;
  --rand-leicht: #eef1f5;
  --text: #1b2a3a;
  --leise: #5b6676;
  --marke: #12324f;          /* Grundfarbe */
  --akzent: #12324f;
  --blau: #2f6fde;
  --petrol: #1aa39a;
  --amber: #f2a33a;
  --korall: #e5574c;
  --violett: #8e5bd8;
  --nacht: #0e1a2b;          /* Seitenleiste */
  --nacht-hell: #1e3a5c;
  --rot: #d93a2f;
  --orange: #e8890c;
  --gelb: #c9a227;
  --gruen: #1aa39a;
  --grau: #9aa6b6;
  --radius: 10px;
  /* Bedeutungsfarben: hell hier, dunkel unten. Nie eine feste Farbe in die Regeln schreiben. */
  color-scheme: light;
  --titel: #12324f;          /* Ueberschriften, Zahlen, Namen */
  --knopf: #12324f;          /* Hauptknopf, aktiver Chip */
  --feld: #ffffff;           /* Eingabefelder */
  --flaeche: #f7f9fc;        /* Tabellenkopf, Kacheln, Netzgruppen */
  --hover: #f3f7fc;
  --gewaehlt: #e6eefb;
  --code: #eef1f5;
  --linie: #d5dbe4;          /* Achsen und Kanten in Grafiken */
  --linie-leise: #eef1f5;
  --leitung: #b8c2cf;        /* Leitungen im Netzplan */
  --schatten: rgba(16, 32, 56, .05);
  --e-gruen-h: #e3f6f1; --e-gruen-f: #11785f; --e-orange-h: #fff1dc; --e-orange-f: #a35c00;
  --e-rot-h: #fde6e3;   --e-rot-f: #b42318;   --e-blau-h: #e6efff;   --e-blau-f: #1f55b8;
  --e-grau-h: #eef1f5;  --e-grau-f: #5b6676;  --e-violett-h: #f0e8fd; --e-violett-f: #6b3fb5;
  --e-gelb-f: #806500; --e-gelb-h: #fbf3d3;
  --halo-rot: #fbe1de; --halo-orange: #fcecd2;
  --rand-rot: #f4c1bc; --rand-orange: #f6d6a8; --rand-gelb: #eadf9c; --rand-gruen: #b7e3df;
}

/* Dunkelmodus: folgt dem System, solange niemand ausdruecklich "hell" gewaehlt hat (thema.js);
   "dunkel" gilt auch bei hellem System. Die Werte stehen deshalb zweimal - CSS kennt kein "oder". */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --grund: #0b1220; --karte: #141d2c; --rand: #27344a; --rand-leicht: #1d2839;
    --text: #dbe3ed; --leise: #93a1b4; --titel: #e8eff8; --knopf: #2f6fde;
    --nacht: #070c16; --nacht-hell: #1e3a5c; --rot: #f0665c; --violett: #a983ee; --orange: #f09a2a;
    --feld: #0f1724; --flaeche: #18233a; --hover: #1b2740; --gewaehlt: #1f3557; --code: #1d2839;
    --linie: #34435c; --linie-leise: #1f2a3b; --leitung: #4b5d78; --schatten: rgba(0, 0, 0, .35);
    --e-gruen-h: #0f3a33; --e-gruen-f: #5fd3c3; --e-orange-h: #3c2a0e; --e-orange-f: #f3b457;
    --e-rot-h: #43191a;   --e-rot-f: #f58f86;   --e-blau-h: #182b50;   --e-blau-f: #8fb5ff;
    --e-grau-h: #222e40;  --e-grau-f: #a9b5c5;  --e-violett-h: #2b2147; --e-violett-f: #c6a8f6; --e-gelb-f: #e3c55c; --e-gelb-h: #3a3212;
    --halo-rot: #4a1c1c; --halo-orange: #42300f;
    --rand-rot: #6b2a27; --rand-orange: #6a4a17; --rand-gelb: #5c5320; --rand-gruen: #1d5a52;
  }
}
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --grund: #0b1220; --karte: #141d2c; --rand: #27344a; --rand-leicht: #1d2839;
  --text: #dbe3ed; --leise: #93a1b4; --titel: #e8eff8; --knopf: #2f6fde;
  --nacht: #070c16; --nacht-hell: #1e3a5c; --rot: #f0665c; --violett: #a983ee; --orange: #f09a2a;
  --feld: #0f1724; --flaeche: #18233a; --hover: #1b2740; --gewaehlt: #1f3557; --code: #1d2839;
  --linie: #34435c; --linie-leise: #1f2a3b; --leitung: #4b5d78; --schatten: rgba(0, 0, 0, .35);
  --e-gruen-h: #0f3a33; --e-gruen-f: #5fd3c3; --e-orange-h: #3c2a0e; --e-orange-f: #f3b457;
  --e-rot-h: #43191a;   --e-rot-f: #f58f86;   --e-blau-h: #182b50;   --e-blau-f: #8fb5ff;
  --e-grau-h: #222e40;  --e-grau-f: #a9b5c5;  --e-violett-h: #2b2147; --e-violett-f: #c6a8f6; --e-gelb-f: #e3c55c; --e-gelb-h: #3a3212;
  --halo-rot: #4a1c1c; --halo-orange: #42300f;
  --rand-rot: #6b2a27; --rand-orange: #6a4a17; --rand-gelb: #5c5320; --rand-gruen: #1d5a52;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--grund);
}

.verborgen { display: none !important; }
.wachsen { flex: 1; }
.rechts { text-align: right; }
.leise { color: var(--leise); }
.fehler { color: var(--e-rot-f); }
/* Netze-Dialog: Vorschlag, Stand und Fehler nur, wenn sie etwas sagen - sonst keine Luecken. */
#dlgNetze p:empty, #dlgNetze div:empty { display: none; }

button {
  font: inherit; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--knopf);
  background: var(--knopf); color: #fff; cursor: pointer;
}
button:hover { filter: brightness(1.12); }
button:disabled { opacity: .6; cursor: default; }
.leiseknopf { background: var(--karte); color: var(--titel); border-color: var(--rand); }
.leiseknopf:hover { background: var(--hover); filter: none; }
.gefahrknopf { background: var(--e-rot-f); border-color: var(--e-rot-f); }
.liste .knopfreihe { margin-top: 0; justify-content: flex-start; flex-wrap: nowrap; }
.liste .knopfreihe button { padding: 4px 10px; }

input, select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 8px;
  background: var(--feld); color: var(--text); width: 100%;
}
input:focus, select:focus { outline: 2px solid #9cc0f5; outline-offset: 0; border-color: var(--blau); }

/* --- Anmeldung ------------------------------------------------------------------------ */
.anmeldung { display: flex; min-height: 100vh; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--nacht) 0%, #173253 100%); }
.anmeldung .karte {
  background: var(--karte); border-radius: 14px;
  padding: 30px; width: 360px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.anmeldung h1 { margin: 0; font-size: 20px; color: var(--titel); }
.anmeldung input + input { margin-top: 8px; }

/* --- Rahmen: Seitenleiste und Inhalt -------------------------------------------------- */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.seitenleiste {
  background: var(--nacht); color: #c9d4e3; padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.seitenleiste .logo { display: flex; align-items: center; gap: 9px; padding: 0 8px 20px; color: #fff; }
.wortmarke { font-size: 19px; letter-spacing: -.3px; }
.wortmarke .leicht { font-weight: 300; }
.wortmarke .kraeftig { font-weight: 650; }
.navgruppe { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: #8798ae; padding: 16px 10px 5px; }
.navpunkt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; color: #c9d4e3; padding: 9px 10px; border-radius: 8px; font-size: 14px;
}
.navpunkt:hover { background: #172a42; filter: none; }
.navpunkt.aktiv { background: var(--nacht-hell); color: #fff; }
.navpunkt .farbe { width: 9px; height: 9px; border-radius: 3px; background: var(--f); flex: none; }
.navpunkt.klein { font-size: 12.5px; padding: 6px 10px; }
.navzahl { margin-left: auto; font-size: 11px; background: color-mix(in srgb, var(--korall) 72%, #000); color: #fff; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.navfuss { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #1d2f47; }
.navfuss select { background: #132338; color: #c9d4e3; border-color: #24395a; padding: 6px 8px; font-size: 12.5px; }
.wer { font-size: 12px; color: #8a9bb2; padding: 0 10px; }

.inhalt { min-width: 0; padding: 0 24px 40px; width: 100%; max-width: 1880px; margin: 0 auto; }
.inhalt p { max-width: 120ch; }
.seitenkopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0; position: sticky; top: 0; z-index: 5; background: var(--grund); }
.seitenkopf h1 { font-size: 21px; margin: 0; font-weight: 600; color: var(--titel); }

/* --- Uebersicht ------------------------------------------------------------------------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kennzahl { background: var(--karte); border-radius: var(--radius); padding: 14px 16px; border-left: 5px solid var(--f, var(--grau)); box-shadow: 0 1px 2px var(--schatten); }
.kennzahl .wert { font-size: 28px; font-weight: 650; color: var(--titel); line-height: 1.1; }
.kennzahl .text { font-size: 12.5px; color: var(--leise); margin-top: 3px; }
.tafel { background: var(--karte); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 1px 2px var(--schatten); margin-bottom: 14px; }
.tafel h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--titel); }
.reihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.reihe > input[type=file] { width: auto; flex: 1 1 260px; }

.filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 0 0 14px; }
.filter input[type=search] { min-width: 230px; width: auto; flex: 1 1 260px; max-width: 520px; }
label.kasten { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
label.kasten input { width: auto; margin: 0; }

.liste { width: 100%; margin: 0 0 30px; border-collapse: separate; border-spacing: 0; background: var(--karte);
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px var(--schatten); }
.liste th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--leise); font-weight: 600;
  padding: 11px 12px; border-bottom: 1px solid var(--rand); background: var(--flaeche); }
.liste td { padding: 11px 12px; border-bottom: 1px solid var(--rand-leicht); vertical-align: top; }
.liste tbody tr:hover td { background: var(--hover); }
.liste tr:last-child td { border-bottom: none; }
.liste tr.stumm { opacity: .55; }
.liste tr.klickbar { cursor: pointer; }
.liste td select { width: auto; min-width: 160px; padding: 5px 8px; }

.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.punkt.rot { background: var(--rot); box-shadow: 0 0 0 3px var(--halo-rot); }
.punkt.orange { background: var(--orange); box-shadow: 0 0 0 3px var(--halo-orange); }
.punkt.gruen { background: var(--gruen); }
.punkt.grau { background: var(--grau); }
.obname { font-weight: 600; }
.obdetail { color: var(--leise); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.marke { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--e-grau-h); color: var(--leise); }
.marke.warn { background: var(--e-rot-h); color: var(--e-rot-f); }

.hinweis { font-size: 12.5px; padding: 3px 8px; border-radius: 6px; margin: 0 0 4px; border-left: 3px solid var(--f); background: var(--h); color: var(--text); }
.hinweis-rot { --f: var(--rot); --h: var(--e-rot-h); }
.hinweis-orange { --f: var(--orange); --h: var(--e-orange-h); }
.hinweis-blau { --f: var(--blau); --h: var(--e-blau-h); }
.hinweis-grau { --f: var(--grau); --h: var(--e-grau-h); }

/* --- Anmeldung: QR-Code immer schwarz auf weiss, sonst scannt keine App -------------------- */
.qr { display: flex; justify-content: center; }
.qr svg { width: 220px; height: 220px; background: #fff; border-radius: 6px; }
#geheimnis { font-size: 13px; letter-spacing: .5px; word-break: break-all; }
#code { font-size: 22px; letter-spacing: 4px; text-align: center; }

/* --- Dialoge ------------------------------------------------------------------------------ */
dialog { background: var(--karte); color: var(--text); border: none; border-radius: 14px; padding: 0; max-width: 520px; width: 92%; box-shadow: 0 24px 60px rgba(10, 20, 40, .3); }
dialog::backdrop { background: rgba(14, 26, 43, .5); }
dialog form, dialog > div { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
dialog h2 { margin: 0; font-size: 18px; color: var(--titel); }
dialog h3 { margin: 8px 0 0; font-size: 14px; color: var(--titel); }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--leise); }
/* Nur nebeneinander in einer Reihe wachsen - in der Spalte des Dialogs waere die Basis sonst die Hoehe. */
.reihe > label { flex: 1 1 200px; }
dialog.breit { max-width: 860px; }
dialog ul { margin: 0; padding-left: 20px; font-size: 13px; }
dialog .liste.kompakt { width: 100%; margin: 0; box-shadow: none; border: 1px solid var(--rand); }
dialog .liste.kompakt td, dialog .liste.kompakt th { padding: 7px 9px; }
textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 8px; background: var(--feld); color: var(--text); resize: vertical; width: 100%; }
.knopfreihe { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.knopfreihe.links { justify-content: flex-start; }
.personen { display: flex; flex-direction: column; gap: 6px; }
.person { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr 1fr auto; gap: 6px; }
.person button { padding: 6px 10px; }
.schluessel { background: #10161d; color: #e6edf3; padding: 12px; border-radius: 8px; font-family: Consolas, monospace; font-size: 13px; word-break: break-all; margin: 0; }
.schluessel.gross { font-size: 20px; letter-spacing: 2px; text-align: center; }
code { background: var(--code); padding: 2px 5px; border-radius: 4px; font-size: 12px; }
.zeilenaktionen { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.zeilenaktionen button { padding: 4px 9px; font-size: 12px; }

/* Was eine Rolle nicht darf, sieht sie auch nicht. Geprueft wird trotzdem auf dem Server. */
body.rolle-leser .nur-techniker, body.rolle-leser .nur-admin, body.rolle-techniker .nur-admin { display: none !important; }

/* --- Schmale Bildschirme ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: static; height: auto; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 10px; }
  .seitenleiste .logo { padding: 0 8px; }
  .navgruppe, .wachsen { display: none; }
  .navpunkt { width: auto; }
  .navfuss { flex-direction: row; flex-wrap: wrap; border-top: 0; padding-top: 0; width: 100%; }
  .inhalt { padding: 0 12px 30px; overflow-x: auto; }
  .person { grid-template-columns: 1fr 1fr; }
  .navfuss select { width: auto; flex: 1 1 140px; }
  .anmeldung .karte { width: calc(100vw - 32px); }
}

/* --- Tickets und Einstellungen (Phase 2) -------------------------------------------------------- */
.filter select { width: auto; min-width: 150px; }
.marke.orange { background: var(--e-orange-h); color: var(--e-orange-f); }
.marke.blau { background: var(--e-blau-h); color: var(--e-blau-f); }
.marke.gruen { background: var(--e-gruen-h); color: var(--e-gruen-f); }
.marke.violett { background: var(--e-violett-h); color: var(--e-violett-f); }
.spalte { display: flex; flex-direction: column; gap: 10px; }
#ticketGrund:empty, #ticketKontakt:empty, #centralSupport:empty, #mailArt:empty { display: none; }
.tafel label:not(.kasten) { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--leise); }
.tafel h3 + p, .tafel p + .spalte { margin-top: 0; }
.tafel .reihe + h3 { margin-top: 10px; }
input.schmal { width: auto; flex: 0 1 320px; }
h2.abschnitt { font-size: 16px; margin: 22px 0 4px; color: var(--titel); font-weight: 600; }
.verlauf { display: flex; flex-direction: column; gap: 10px; }
.eintrag { border-left: 3px solid var(--f, var(--grau)); background: var(--flaeche); border-radius: 8px; padding: 10px 12px; }
.eintrag-kunde { --f: var(--petrol); }
.eintrag-hersteller { --f: var(--blau); }
.eintrag-system { --f: var(--grau); }
.eintragkopf { font-size: 12px; color: var(--leise); margin-bottom: 6px; }
.eintragkopf b { color: var(--titel); }
.eintragtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.eintrag details { margin-top: 8px; font-size: 12.5px; }
.eintrag details pre { max-height: 320px; overflow: auto; background: var(--code); padding: 8px; border-radius: 6px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.anhangliste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.anhangliste:empty { display: none; }
.anhangchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: 3px 4px 3px 9px; }
.anhangchip button { padding: 1px 7px; font-size: 12px; }
a.anhang { font-size: 12.5px; background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: 3px 9px; color: var(--blau); text-decoration: none; }
a.anhang:hover { background: var(--hover); }
.geloescht { font-size: 12.5px; color: var(--leise); text-decoration: line-through; }

/* Breite Tabellen rollen fuer sich, statt die Seite seitlich zu verschieben. */
.rollbar { overflow-x: auto; margin-bottom: 30px; }
.rollbar > .liste { margin-bottom: 0; }

/* Fernwartung: die Ansicht (anzeige.html) - Leiste oben, darunter das Bild des Servers, eingepasst. */
body.anzeige { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.anzeigeleiste { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--karte); border-bottom: 1px solid var(--rand); font-size: 13px; }
.anzeigeleiste .luecke { flex: 1; }
.anzeigeleiste button { padding: 4px 10px; }
.anzeigeleiste select { width: auto; padding: 4px 8px; font-size: 13px; }
.buehne { flex: 1; min-height: 0; overflow: hidden; background: #0b0f14; display: flex; align-items: center; justify-content: center; }
.anzeigemeldung, .anzeigezugang { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); z-index: 5;
  background: var(--karte); color: var(--text); border: 1px solid var(--rand); border-radius: 12px; padding: 16px 18px; box-shadow: 0 24px 60px rgba(10, 20, 40, .35); }
.anzeigezugang h2 { margin: 0 0 6px; font-size: 16px; }
.anzeigezugang label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px; }
/* Dateien der Sitzung (Schritt B): rechts ueber dem Bild, nur so hoch wie das Fenster. */
.anzeigedateien { position: fixed; top: 48px; right: 12px; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 64px); overflow: auto; z-index: 4;
  background: var(--karte); color: var(--text); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; box-shadow: 0 24px 60px rgba(10, 20, 40, .35); font-size: 13px; }
.anzeigedateien h2 { margin: 0 0 6px; font-size: 16px; }
.anzeigedateien h3 { margin: 12px 0 4px; font-size: 13px; }
.anzeigedateien table { width: 100%; border-collapse: collapse; }
.anzeigedateien td { padding: 3px 4px; border-top: 1px solid var(--rand); vertical-align: top; overflow-wrap: anywhere; }
.anzeigedateien td.zahl { text-align: right; white-space: nowrap; }
.anzeigedateien button { padding: 3px 8px; }
.anzeigedateien p:empty { display: none; }