/* ==========================================================================
 *  Stylesheet des Dashboards.
 *
 *  HIER STEHT ABSICHTLICH KEIN NAME UND KEINE DOMAIN. Diese Datei wird
 *  ausgeliefert, BEVOR das Zugangspasswort eingegeben ist - die
 *  Schrankenseite braucht sie ja. Ein Kommentar mit dem Namen des
 *  Auftraggebers waere damit oeffentlich lesbar, obwohl die Seite selbst
 *  nichts preisgibt. Wer hier etwas ergaenzt, laesst Namen weg.
 *
 *  Farben und Schriftlogik stammen aus dem Verwaltungsbereich der
 *  Hauptanwendung, damit dieses Werkzeug aussieht wie die uebrigen
 *  Anwendungen des Hauses. Navy als Hausfarbe, Sand als Akzent, dazu
 *  drei Zustandsfarben.
 *
 *  Kein Framework, keine Build-Kette, eine Datei. Wer hier etwas
 *  aendern will, oeffnet sie und aendert es.
 *
 *  Schriften sind bewusst NICHT eingebunden: sie laegen auf einem
 *  fremden Server, und dieses Dashboard laeuft im internen Netz, wo eine
 *  Verbindung nach draussen nicht selbstverstaendlich ist. Die
 *  Systemschriften sind unauffaellig genug.
 * ========================================================================== */

:root {
  --navy: #0d364a;
  --navy-hell: #17506b;
  --sand: #a3827a;
  --sand-dunkel: #8a6960;
  --text: #26303a;
  --grau: #6e7880;
  --linie: #e6e0da;
  --flaeche: #f7f5f3;
  --weiss: #fff;
  --rot: #b3402f;
  --rot-hell: #fbece9;
  --gruen: #2f7d5c;
  --gruen-hell: #eaf4ef;
  --gelb: #9a6b12;
  --gelb-hell: #fdf3e3;
  --radius: 6px;
  --schatten: 0 1px 2px rgba(13, 54, 74, .06), 0 4px 12px rgba(13, 54, 74, .05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-hell); }
a:hover { color: var(--navy); }
code { font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
       background: var(--linie); padding: 1px 5px; border-radius: 3px; }

/* ---------- Kopf ---------- */

.kopf {
  display: flex; align-items: center; gap: 24px;
  padding: 0 22px; height: 56px;
  background: var(--navy); color: var(--weiss);
  position: sticky; top: 0; z-index: 10;
}
.marke { font-weight: 600; font-size: 16px; color: var(--weiss);
         text-decoration: none; white-space: nowrap; }
.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.tabs a {
  color: rgba(255, 255, 255, .78); text-decoration: none;
  padding: 7px 13px; border-radius: var(--radius); white-space: nowrap;
}
.tabs a:hover { background: rgba(255, 255, 255, .10); color: var(--weiss); }
.tabs a.aktiv { background: var(--navy-hell); color: var(--weiss); }
.wer { font-size: 13px; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.wer a { color: rgba(255, 255, 255, .9); }

/* ---------- Inhalt ---------- */

.inhalt { max-width: 1240px; margin: 0 auto; padding: 26px 22px 60px; }
h1 { font-size: 23px; font-weight: 600; margin-bottom: 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 30px 0 10px; color: var(--navy); }
h3 { font-size: 14px; font-weight: 600; }

.kopfzeile { display: flex; align-items: baseline; gap: 14px;
             flex-wrap: wrap; margin-bottom: 14px; }
.hinweis { color: var(--grau); font-size: 14px; margin-bottom: 18px; max-width: 68ch; }
.zusatz { color: var(--grau); font-size: 12.5px; }
.klein { font-size: 12.5px; }
.leer { color: var(--grau); font-style: italic; }
.schlecht { color: var(--rot); font-weight: 600; }

/* ---------- Listen ---------- */

.liste { list-style: none; }
.liste li {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.liste li > a:first-child { font-weight: 600; font-size: 15px;
                            text-decoration: none; }
.inline-liste { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; }
.inline-liste li { color: var(--grau); }
.inline-liste strong { color: var(--text); font-size: 17px; }

/* ---------- Kacheln ---------- */

.kacheln {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.kachel {
  background: var(--weiss); border: 1px solid var(--linie);
  border-left: 3px solid var(--grau);
  border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schatten);
}
.kachel h3 { color: var(--grau); font-size: 12.5px; font-weight: 600;
             text-transform: uppercase; letter-spacing: .04em; }
.kachel .wert { font-size: 30px; font-weight: 600; line-height: 1.15;
                margin: 7px 0 2px; font-variant-numeric: tabular-nums; }
.kachel--ok      { border-left-color: var(--gruen); }
.kachel--warn    { border-left-color: var(--gelb); }
.kachel--bad     { border-left-color: var(--rot); }
.kachel--bad .wert { color: var(--rot); }
.kachel--neutral { border-left-color: var(--navy); }
.spark { margin-top: 8px; opacity: .8; }
.stand { margin-top: 16px; }

/* Ein Nachladen, das gescheitert ist. Die Zahlen bleiben stehen - sie
   sind nuetzlicher als eine Fehlermeldung -, aber man sieht, dass sie
   nicht mehr frisch sind. */
.veraltet { opacity: .55; transition: opacity .3s; }
.veraltet::before {
  content: "Die Anzeige konnte nicht aktualisiert werden – die Zahlen sind älter.";
  display: block; background: var(--gelb-hell); color: var(--gelb);
  padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px;
  font-size: 13px;
}

/* ---------- Vollbild fuer das Tablet an der Wand ---------- */

body.vollbild { background: var(--navy); }
body.vollbild .inhalt { max-width: none; padding: 22px; }
body.vollbild .kacheln { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
body.vollbild .kachel { padding: 22px 24px; }
body.vollbild .kachel .wert { font-size: 42px; }
body.vollbild .kachel h3 { font-size: 14px; }
body.vollbild .stand { color: rgba(255, 255, 255, .6); }

/* ---------- Tabellen ---------- */

.tabellenrahmen {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 9px 13px; text-align: left; vertical-align: top;
         border-bottom: 1px solid var(--linie); }
th { background: var(--flaeche); font-weight: 600; font-size: 12.5px;
     color: var(--navy); position: sticky; top: 0; white-space: nowrap; }
th a { color: inherit; text-decoration: none; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfaf9; }
td { font-variant-numeric: tabular-nums; }

/* ---------- Anklickbare Zeilen ----------
 *
 * Der Link fuellt die Zelle AUS. Die Innenabstaende wandern dafuer vom
 * <td> in das <a> - stuenden sie am <td>, waere der Rand der Zelle
 * totes Gebiet, und man traefe die Zeile beim Tippen auf dem Tablet
 * knapp daneben. Genau das soll hier nicht passieren.
 */
tr.klickbar td { padding: 0; }
tr.klickbar td > a {
  display: block; padding: 9px 13px;
  color: inherit; text-decoration: none;
}
tr.klickbar:hover { background: var(--flaeche); }
tr.klickbar td > a:focus-visible {
  outline: 2px solid var(--navy-hell); outline-offset: -2px;
}
/* Der Zeiger sagt vor dem Klick, dass hier etwas passiert. */
tr.klickbar { cursor: pointer; }

.filter {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 14px;
}
.blaettern { display: flex; gap: 16px; align-items: center;
             justify-content: center; margin-top: 16px; color: var(--grau); }

/* ---------- Formulare ---------- */

label { display: flex; flex-direction: column; gap: 4px;
        font-size: 12.5px; color: var(--grau); }
label.schalter { flex-direction: row; align-items: center; gap: 7px;
                 font-size: 14px; color: var(--text); }
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input:not([type]) {
  font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--weiss); color: var(--text);
}
input:focus { outline: 2px solid var(--navy-hell); outline-offset: 1px;
              border-color: var(--navy-hell); }
button {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 8px 16px; border: 0; border-radius: var(--radius);
  background: var(--navy); color: var(--weiss);
}
button:hover { background: var(--navy-hell); }
button.zweitrangig { background: var(--weiss); color: var(--navy);
                     border: 1px solid var(--linie); }
button.zweitrangig:hover { background: var(--flaeche); }
form.inline { display: flex; gap: 6px; align-items: center; }

/* ---------- Regeln ---------- */

.regel {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
}
.regelform { display: flex; gap: 14px; align-items: flex-end;
             flex-wrap: wrap; margin-top: 10px; }

/* ---------- Pillen und Meldungen ---------- */

.pille {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px;
  background: var(--linie); color: var(--grau);
}
.pille--gruen    { background: var(--gruen-hell); color: var(--gruen); }
.pille--rot,
.pille--critical { background: var(--rot-hell);   color: var(--rot); }
.pille--error    { background: var(--rot-hell);   color: var(--rot); }
.pille--warning  { background: var(--gelb-hell);  color: var(--gelb); }
.pille--info     { background: #eaf0f4;           color: var(--navy-hell); }

.meldung { padding: 11px 15px; border-radius: var(--radius);
           margin: 10px 0; font-size: 14px; }
.meldung--rot   { background: var(--rot-hell);   color: var(--rot); }
.meldung--gruen { background: var(--gruen-hell); color: var(--gruen); }
.meldung--gelb  { background: var(--gelb-hell);  color: var(--gelb); }

tr.schwere-critical td:first-child { border-left: 3px solid var(--rot); }

/* ---------- Diagramme ---------- */

.diagramm {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
details { margin-top: 14px; }
summary { cursor: pointer; color: var(--navy-hell); font-size: 14px;
          margin-bottom: 10px; }

/* ---------- Anmeldung ---------- */

body.anmeldung { display: grid; place-items: center; min-height: 100vh;
                 background: var(--navy); }
.anmeldekarte {
  background: var(--weiss); border-radius: 10px; padding: 34px 32px;
  width: min(400px, 92vw); box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.anmeldekarte h1 { font-size: 19px; margin-bottom: 18px; color: var(--navy); }
.anmeldekarte form { display: flex; flex-direction: column; gap: 14px; }
.anmeldekarte button { margin-top: 6px; padding: 10px; }

/* ---------- Tablet ---------- */

@media (max-width: 820px) {
  .kopf { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .inhalt { padding: 18px 14px 50px; }
  .filter, .regelform { flex-direction: column; align-items: stretch; }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Auf einem Tablet an der Wand ist der Mauszeiger ein Finger. */
@media (pointer: coarse) {
  button, .tabs a { min-height: 42px; }
  th, td { padding: 12px 14px; }
  /* Der groessere Abstand gehoert auch hier in den Link und nicht in
     die Zelle - sonst schrumpft die Trefferflaeche genau dort, wo mit
     dem Finger gezielt wird. */
  tr.klickbar td { padding: 0; }
  tr.klickbar td > a { padding: 12px 14px; }
}

/* ==========================================================================
 *  Projekte - Arbeitsliste und Detailseite
 * ========================================================================== */

/* Der Filterblock traegt achtzehn Felder. Als flex-Zeile wie die
 * schmalen Filter der Tabellen waere er eine einzige lange Schlange;
 * ein Raster bricht ihn sauber um und haelt die Felder gleich breit. */
.filter--breit {
  display: grid; gap: 10px 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: end;
}
.filter--breit button { grid-column: 1; }

.spalten {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px 16px;
}
.karte h2 {
  margin: 0 0 10px; font-size: 14px; color: var(--navy);
  border-bottom: 1px solid var(--linie); padding-bottom: 7px;
}

/* Beschriftung links, Wert rechts - ohne Tabelle, damit es auf dem
 * Tablet untereinander umbrechen kann. */
.felder { display: grid; grid-template-columns: 140px 1fr; gap: 5px 12px;
          margin: 0; font-size: 13.5px; }
.felder dt { color: var(--grau); font-size: 12.5px; }
.felder dd { margin: 0; }
@media (max-width: 560px) {
  .felder { grid-template-columns: 1fr; gap: 1px 0; }
  .felder dd { margin-bottom: 7px; }
}

table.schmal { font-size: 12.5px; }
table.schmal th, table.schmal td { padding: 5px 8px; }

.verlauf { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.verlauf li { padding: 7px 0; border-bottom: 1px solid var(--linie); }
.verlauf li:last-child { border-bottom: 0; }

textarea {
  font: inherit; font-size: 14px; padding: 7px 10px; width: 100%;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--weiss); color: var(--text); resize: vertical;
}
select {
  font: inherit; font-size: 14px; padding: 7px 8px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--weiss); color: var(--text);
}

/* Die Prioritaet ist die Spalte, ueber die jemand die Liste ueberfliegt.
 * Deshalb Farbe und nicht nur ein Buchstabe. */
.pille--prioA { background: var(--gruen); color: #fff; }
.pille--prioB { background: var(--sand);  color: #fff; }
.pille--prioC { background: var(--flaeche); color: var(--grau); }
.pille--sand  { background: var(--sand);  color: #fff; }
.pille--gruen { background: var(--gruen); color: #fff; }
.meldung--sand {
  background: #fdf6f2; border: 1px solid var(--sand); color: var(--text);
}