/* ============================================================
   Precipice Selfservice: alles, was ueber das Designsystem der
   Website (css/precipice.css) hinausgeht.

   Zwei Aufgaben:
   1. Bruecke zu Bootstrap. Die Seiten unter Components/Account
      kommen aus der Projektvorlage und benutzen Bootstrap-Klassen.
      precipice.css setzt einen harten Reset, deshalb werden hier
      die Stellen wieder geradegerueckt und die Bootstrap-Variablen
      auf die Markenfarben gezogen.
   2. Bausteine, die es auf der Website nicht gibt: Statuspillen,
      Zeitstrahl, Kennzahlen, Ticketverlauf, Uploadflaeche.
   ============================================================ */

/* ---------- 1. Bruecke zu Bootstrap ---------- */

:root {
  /* Im dunklen Stand der Website ist --border auskommentiert, die Regel
     dort greift also ins Leere. Hier nachgezogen, sonst haben Kacheln und
     Tabellen im Dunkelmodus keinen Rand. Der helle Stand bringt sein
     eigenes --border mit und gewinnt ueber die hoehere Spezifitaet. */
  --border: rgba(255, 255, 255, .07);

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  /* Bootstrap dimmt Beschriftungen ueber diese Zahlenfassung der Textfarbe. Ohne
     sie bleibt der helle Standardwert stehen, und ausgefuellte Felder bekommen
     ein fast unsichtbares Label auf dunklem Grund. */
  --bs-body-color-rgb: 233, 238, 243;
  --bs-secondary-color-rgb: 139, 149, 163;
  --bs-body-font-family: var(--font-body);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 31, 227, 218;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-bright);
  --bs-border-color: var(--border-strong);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
}

body { background: var(--bg); color: var(--text); }

html[data-theme="light"] {
  --bs-body-color-rgb: 8, 32, 30;
  --bs-secondary-color-rgb: 70, 85, 90;
}

/* Der Reset in precipice.css nimmt Listen und Ueberschriften ihre Abstaende.
   Fuer den Fliesstext geben wir sie zurueck, ohne die Kacheln anzufassen. */
.inhalt ul:not(.blank), .inhalt ol { padding-left: 22px; margin-bottom: 16px; }
.inhalt li { margin-bottom: 8px; color: var(--text-2); }
.inhalt p { margin-bottom: 14px; }
.inhalt h2 { margin: 40px 0 14px; }
.inhalt h3 { margin: 26px 0 10px; }
ul.blank { list-style: none; padding-left: 0; }

/* Bootstrap lässt das Label ins Feld schweben und rechnet dafür mit seinen
   eigenen Innenabständen. Die sind hier überschrieben, also schwebt nichts mehr
   richtig. Statt die Rechnerei nachzubauen, dreht die Reihenfolge um: Label über
   dem Feld, wie überall sonst im Portal. Der Platzhalter bleibt im Feld. */
.form-floating { display: flex; flex-direction: column-reverse; margin-bottom: 14px; }
.form-floating > label {
  position: static; transform: none; height: auto; width: auto; padding: 0 0 7px;
  font-size: .82rem; letter-spacing: .04em; color: var(--text-2); border: 0;
  pointer-events: auto; opacity: 1; overflow: visible;
}
/* Hinter dem schwebenden Label liegt bei Bootstrap ein gefuelltes ::after, das
   die Feldkante verdeckt. Sobald das Label darueber steht, liegt dieser Balken
   sichtbar auf der Seite: beim Tippen erscheinen schwarze Streifen. Weg damit. */
.form-floating > label::after { display: none !important; }
.form-floating > .form-control, .form-floating > .form-select { height: auto; padding: 12px 15px; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label { transform: none; opacity: 1; color: var(--text-2); }
/* Bootstrap blendet den Platzhalter aus, weil das Label seinen Platz einnimmt.
   Das Label steht jetzt darüber, also darf der Platzhalter wieder sichtbar sein. */
.form-floating > .form-control::placeholder { color: var(--text-3); }
/* Chrome faerbt automatisch ausgefuellte Felder hellblau. Im dunklen Stand ist
   das ein greller Block, deshalb die Farbe ueber einen Schatten zurueckholen. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text);
}

.btn { font-family: var(--font-display); border-radius: 10px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); font-weight: 600; }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--ink-on-accent); }
.btn-outline-secondary, .btn-secondary, .btn-outline-primary {
  background: transparent; border-color: var(--border-strong); color: var(--text);
}
.btn-outline-secondary:hover, .btn-secondary:hover, .btn-outline-primary:hover {
  background: var(--surface-2); border-color: var(--accent); color: var(--accent);
}
.btn-danger, .btn-outline-danger { border-color: rgba(255,107,107,.5); color: #ff8f8f; background: transparent; }
.btn-danger:hover, .btn-outline-danger:hover { background: rgba(255,107,107,.12); color: #ffb3b3; border-color: #ff8f8f; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn:disabled, .btn.disabled { opacity: .45; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.card-body { padding: 24px; }
.card-title, .card-header { color: var(--text); }
.card-header { background: var(--surface-2); border-bottom-color: var(--border); }

.alert { border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); padding: 15px 18px; }
.alert-danger { border-left: 3px solid #ff6b6b; }
.alert-success { border-left: 3px solid var(--accent); }
.alert-warning, .alert-info { border-left: 3px solid #febc2e; }
.alert-info { border-left-color: var(--accent); }

.table { color: var(--text-2); --bs-table-bg: transparent; --bs-table-color: var(--text-2); }
.table > :not(caption) > * > * { border-bottom-color: var(--border); background: transparent; }
.table thead th { color: var(--text-3); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; }

.list-group-item { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.nav-pills .nav-link { color: var(--text-2); border-radius: 9px; }
.nav-pills .nav-link.active { background: var(--grad-soft); color: var(--accent); }
.text-danger, .validation-message { color: #ff8f8f !important; font-size: .85rem; }
.text-body-secondary, .text-muted { color: var(--text-2) !important; }
.text-success { color: var(--accent) !important; }
a { color: inherit; }
.inhalt a:not(.btn):not(.card):not(.pill) { color: var(--accent); }
.inhalt a:not(.btn):hover { color: var(--accent-bright); }

/* ---------- 2. Rahmen der Anwendung ---------- */

.seite { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; position: relative; z-index: 2; }

.site-header .nav-right .konto {
  display: inline-flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--text-2);
  border: 1px solid var(--border-strong); border-radius: 100px; padding: 7px 14px 7px 8px;
}
.site-header .nav-right .konto:hover { border-color: var(--accent); color: var(--text); }
.konto .avatar {
  width: 25px; height: 25px; border-radius: 50%; background: var(--grad-soft); color: var(--accent);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: .72rem; flex-shrink: 0;
  border: 1px solid var(--border-strong);
}
.abmelden { background: none; border: 0; color: var(--text-3); font-size: .84rem; cursor: pointer; padding: 0; font-family: var(--font-body); }
.abmelden:hover { color: var(--accent); }

.seitenkopf { padding: 46px 0 26px; }
.seitenkopf h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 14px 0 12px; max-width: 22ch; }
.seitenkopf p.lead { font-size: 1.05rem; color: var(--text-2); max-width: 62ch; }
.seitenkopf .kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.inhalt { padding-bottom: 80px; }

/* ---------- 3. Statuspillen ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 100px; border: 1px solid var(--border-strong); color: var(--text-2);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill-teal  { color: var(--accent); border-color: rgba(31,227,218,.35); background: var(--grad-soft); }
.pill-gruen { color: #4ade80; border-color: rgba(74,222,128,.32); background: rgba(74,222,128,.09); }
.pill-gelb  { color: #febc2e; border-color: rgba(254,188,46,.32); background: rgba(254,188,46,.09); }
.pill-rot   { color: #ff8f8f; border-color: rgba(255,107,107,.32); background: rgba(255,107,107,.09); }
.pill-grau  { color: var(--text-3); }
.pill.puls::before { animation: pulse 2.2s infinite; }

/* ---------- 4. Statusband des Auftrags ---------- */

.statusband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 8px 0 4px; }
.statusband .schritt { position: relative; padding: 0 14px 0 0; }
.statusband .marke {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border-strong);
  background: var(--bg); position: relative; z-index: 2;
}
.statusband .linie { position: absolute; top: 6px; left: 7px; right: 0; height: 2px; background: var(--border-strong); z-index: 1; }
.statusband .schritt:last-child .linie { display: none; }
.statusband .schritt.erreicht .marke { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 14px var(--glow); }
.statusband .schritt.erreicht .linie { background: var(--accent); }
.statusband .schritt.jetzt .marke { animation: pulse 2.2s infinite; }
.statusband .titel { font-family: var(--font-display); font-weight: 600; font-size: .92rem; margin-top: 14px; color: var(--text-3); }
.statusband .schritt.erreicht .titel { color: var(--text); }
.statusband .wann { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); margin-top: 4px; }
@media (max-width: 720px) { .statusband { grid-template-columns: 1fr; gap: 18px; } .statusband .linie { display: none; } .statusband .titel { margin-top: 6px; } }

/* ---------- 5. Zeitstrahl ---------- */

.zeitstrahl { list-style: none; padding: 0; margin: 0; position: relative; }
.zeitstrahl::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--border-strong); }
.zeitstrahl li { position: relative; padding: 0 0 22px 30px; }
.zeitstrahl li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border-strong);
}
.zeitstrahl li.frisch::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.zeitstrahl li.intern::before { border-style: dashed; }
.zeitstrahl .wann { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }
.zeitstrahl .titel { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--text); margin: 2px 0 3px; }
.zeitstrahl .text { font-size: .9rem; color: var(--text-2); }
.zeitstrahl .wer { font-size: .78rem; color: var(--text-3); margin-top: 3px; font-family: var(--font-mono); }

/* ---------- 6. Kennzahlen der Verwaltung ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.kpi .wert { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.kpi .name { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: 9px; }
.kpi .zusatz { font-size: .82rem; color: var(--text-2); margin-top: 8px; }
.kpi.warnung { border-color: rgba(254,188,46,.4); }
.kpi.warnung .wert { color: #febc2e; }
.kpi.gut .wert { color: var(--accent); }

/* ---------- 7. Ticketverlauf ---------- */

.thread { display: flex; flex-direction: column; gap: 16px; }
.nachricht { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; background: var(--surface); }
.nachricht.vom-team { background: var(--grad-soft); border-color: rgba(31,227,218,.22); }
.nachricht.intern { background: rgba(254,188,46,.06); border-color: rgba(254,188,46,.28); border-style: dashed; }
.nachricht .kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.nachricht .wer { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--text); }
.nachricht .wann { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); margin-left: auto; }
.nachricht .text { white-space: pre-wrap; font-size: .95rem; line-height: 1.65; color: var(--text-2); }
.nachricht .marke { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--border-strong); color: var(--text-3); }

/* ---------- 8. Uploadflaeche ---------- */

.dropzone {
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2);
  padding: 30px; text-align: center; position: relative; transition: border-color .25s, background .25s;
}
.dropzone:hover { border-color: var(--accent); background: var(--surface); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dropzone .gross { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--text); }
.dropzone .klein { font-size: .86rem; color: var(--text-3); margin-top: 6px; }
.fortschritt { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 14px; }
.fortschritt i { display: block; height: 100%; background: var(--grad); border-radius: 4px; transition: width .3s var(--ease); }

/* ---------- 9. Kleinteile ---------- */

.gitter-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gitter-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.zweispalt { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .gitter-2, .gitter-3, .zweispalt { grid-template-columns: 1fr; } }

.kasten { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; }
.kasten + .kasten { margin-top: 22px; }
.kasten h2 { font-size: 1.18rem; margin: 0 0 6px; }
.kasten h3 { font-size: 1rem; margin: 0 0 6px; }
.kasten .unter { font-size: .88rem; color: var(--text-3); margin-bottom: 18px; }
.kasten.hell { background: var(--surface-2); }

.paare { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: .93rem; align-items: baseline; }
.paare dt { color: var(--text-3); font-size: .82rem; }
.paare dd { color: var(--text); margin: 0; }
@media (max-width: 560px) { .paare { grid-template-columns: 1fr; gap: 2px 0; } .paare dd { margin-bottom: 12px; } }

.leer { text-align: center; padding: 56px 24px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text-3); }
.leer .gross { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-2); margin-bottom: 8px; }

.werkzeugleiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.werkzeugleiste .suche { flex: 1; min-width: 200px; }
.filterknopf {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  border-radius: 100px; padding: 7px 15px; font-size: .84rem; cursor: pointer; font-family: var(--font-body);
}
.filterknopf:hover { border-color: var(--accent); color: var(--text); }
.filterknopf.an { background: var(--grad-soft); border-color: var(--accent); color: var(--accent); }

.mono-block {
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 14px 16px; font-family: var(--font-mono); font-size: .82rem; line-height: 1.7;
  color: var(--accent-bright); overflow-x: auto; word-break: break-all; white-space: pre-wrap;
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
}
.mono-block code { flex: 1; }
.kopierknopf {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 1px solid var(--border-strong); color: var(--text-2);
  padding: 5px 11px; border-radius: 100px; cursor: pointer; flex-shrink: 0;
}
.kopierknopf:hover { color: var(--accent); border-color: var(--accent); }

.token-anzeige {
  font-family: var(--font-mono); font-size: 1.12rem; letter-spacing: .1em; color: var(--accent);
  background: var(--bg-2); border: 1px solid rgba(31,227,218,.3); border-radius: 12px;
  padding: 16px 20px; word-break: break-all;
}

.dtable td .pill { vertical-align: middle; }
.dtable tbody tr.klickbar { cursor: pointer; }
.dtable tbody tr.klickbar:hover td { background: var(--surface-2); }
.dtable .rechts, .dtable th.rechts { text-align: right; }

.hinweis { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 12px; padding: 16px 20px; font-size: .92rem; color: var(--text-2); margin: 20px 0; }
.hinweis strong { color: var(--text); }
.hinweis.warnen { border-left-color: #febc2e; }
.hinweis.fehler { border-left-color: #ff6b6b; }

/* Anmeldung und Registrierung */
.auth-mitte { max-width: 460px; margin: 60px auto 90px; }
.auth-mitte .kasten { padding: 34px; }
.auth-mitte h1 { font-size: 1.7rem; margin-bottom: 8px; }
.auth-mitte .unter { color: var(--text-2); font-size: .95rem; margin-bottom: 26px; }
.auth-mitte .form-floating { margin-bottom: 14px; }
.auth-mitte .btn { width: 100%; justify-content: center; }
.auth-fuss { margin-top: 22px; font-size: .9rem; color: var(--text-2); text-align: center; }
.auth-mitte a { color: var(--accent); }
.auth-mitte a:hover { color: var(--accent-bright); }

#blazor-error-ui {
  background: #2a1315; color: #ffb3b3; border-top: 1px solid #ff6b6b;
  bottom: 0; box-shadow: 0 -1px 20px rgba(0,0,0,.4); display: none;
  left: 0; padding: 14px 18px; position: fixed; width: 100%; z-index: 1000; font-size: .9rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 14px; top: 12px; }