/* ---------------------------------------------------------------------
   Projektuebersicht: Filter, Karten, Gruppen, Reiter

   ALLES OHNE JAVASCRIPT. Reiter sind Radioknoepfe mit :checked-Regeln,
   Klappen sind <details>. Das ueberlebt einen Skriptblocker, wirkt vor
   dem Laden des Skripts und laesst sich mit der Tastatur bedienen, ohne
   dass jemand daran gedacht haben muss.
   --------------------------------------------------------------------- */
/* ------------------------------------------------------------------ Kopf */

.uebersicht-kopf {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.uebersicht-kopf h1 {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin: 0;
}

/* Die Zahl steht NEBEN der Ueberschrift, nicht am anderen Ende der
   Zeile. Vorher lagen auf einem breiten Bildschirm tausend Pixel
   dazwischen, und man las zwei Dinge statt einem. */
.uebersicht-zahl {
  padding: .1rem .55rem;
  font-size: .85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
}

/* --------------------------------------------------------------- Filter */

.filterleiste {
  display: flex;
  flex-direction: column;
  padding: .8rem .9rem;
  margin-bottom: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.filterleiste-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.filterleiste-kategorien {
  gap: .6rem;
  padding-top: .7rem;
  margin-top: .7rem;
  border-top: 1px solid var(--border-soft);
}

.filter-titel {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Die Lupe steht IM Feld. Vorher schwebte sie darueber - ein Symbol
   ohne Bezug, das aussah, als waere etwas verrutscht. */
.filter-suche {
  position: relative;
  display: flex;
  flex: 1 1 15rem;
  align-items: center;
  min-width: 12rem;
}

.filter-suche-symbol {
  position: absolute;
  left: .6rem;
  display: flex;
  color: var(--muted);
  pointer-events: none;
}

.filter-suche input {
  width: 100%;
  padding: .45rem .7rem .45rem 2rem;
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.filter-felder { display: flex; flex-wrap: wrap; gap: .4rem; }

.filter-feld select,
.ansicht-speichern input[type="text"] {
  padding: .45rem 1.6rem .45rem .6rem;
  font: inherit;
  font-size: .9rem;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.filter-suche input:focus-visible,
.filter-feld select:focus-visible,
.ansicht-speichern input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 0;
}

.filter-schalter {
  display: flex;
  gap: .4rem;
  align-items: center;
  padding: 0 .3rem;
  color: var(--text-soft);
  font-size: .88rem;
  cursor: pointer;
}

.filter-zuruecksetzen {
  margin-left: auto;
  font-size: .84rem;
  color: var(--muted);
}

.filter-zuruecksetzen:hover { color: var(--accent); }
/* ---------------------------------------------------------------- Karten */

.karten {
  display: grid;
  /* 19rem statt 17: Bei 17 brach jeder zweite Projektname mitten im Wort
     ab ("tkey-model-serv..."), und ein abgeschnittener Name ist genau
     die Angabe, wegen der man hinsieht. */
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .9rem;
}

.karte {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .9rem;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.karte:hover {
  text-decoration: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.karte-kopf { display: flex; gap: .6rem; align-items: center; }
.karte-titel { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.karte-titel strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.karte-text {
  flex: 1;
  margin: 0;
  font-size: .87rem;
  color: var(--text-soft);
  /* Drei Zeilen und Schluss: Karten unterschiedlicher Hoehe machen ein
     Raster unruhig, und die vierte Zeile liest ohnehin niemand. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.karte-fuss {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: auto;
}

/* Die Zeit steht rechts - AUCH wenn keine Kategorie daneben steht.
   Mit `justify-content: space-between` allein rutschte sie bei Projekten
   ohne Kategorie nach links, und im Raster stand sie dann mal hier, mal
   dort. */
.karte-zeit { margin-left: auto; }

/* ---------------------------------------------------------------- Liste
   Die zweite Darstellung neben den Karten - und die Liste, die auch die
   Suche benutzt. Sie stand frueher in `dashboard.css`; beim Umbau der
   Uebersicht wurde jene Datei nicht mehr geladen, und die Liste stand
   voellig ungestaltet auf der Seite. Jetzt liegt sie dort, wo sie
   gebraucht wird, und `dashboard.css` gibt es nicht mehr. */

.repo-list {
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.repo-item {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.repo-item:last-child { border-bottom: 0; }
.repo-item:hover { background: var(--surface-2); }

.repo-main {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  align-items: baseline;
  flex: 1;
  min-width: 0;
}

.repo-name {
  font-size: .95rem;
  font-weight: 600;
  color: inherit;
}

.repo-name:hover { color: var(--accent); }

/* Die Beschreibung nimmt die ganze Breite unter dem Namen und bricht
   nach einer Zeile ab: In einer Liste zaehlt, dass die Zeilen gleich
   hoch bleiben - sonst wird das Auge beim Ueberfliegen ausgebremst. */
.repo-description {
  flex: 1 0 100%;
  margin: 0;
  overflow: hidden;
  font-size: .85rem;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-meta {
  flex: 0 0 auto;
  font-size: .82rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------- Gruppen */

.gruppe { margin-bottom: 1.4rem; }

.gruppe-kopf,
.gruppe-klappe > summary {
  display: flex;
  gap: .45rem;
  align-items: center;
  margin: 0 0 .6rem;
  font-size: 1rem;
}

/* `display: flex` auf einem `<summary>` nimmt dem Browser das Dreieck
   weg. Ohne Ersatz sieht eine aufklappbare Gruppe aus wie eine
   Ueberschrift, und niemand kommt auf die Idee, darauf zu klicken. */
.gruppe-klappe > summary {
  padding: .3rem 0;
  cursor: pointer;
  list-style: none;
}

.gruppe-klappe > summary::-webkit-details-marker { display: none; }

.gruppe-klappe > summary::before {
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  content: "";
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .15s;
}

.gruppe-klappe[open] > summary::before { transform: rotate(45deg); }

.gruppe-klappe > summary:hover::before { border-color: var(--text); }

.gruppe-punkt {
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  background: var(--ton, var(--muted));
  border-radius: 50%;
}

/* ---------------------------------------------------------------- Reiter */

.reiter-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.reiter-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  /* Der aktive Reiter deckt diese Linie mit seiner eigenen Unterkante ab
     - so entsteht die Verbindung zur Flaeche darunter, an der man einen
     Reiter ueberhaupt als Reiter erkennt. */
  border-bottom: 1px solid var(--border);
}

.reiter-knopf {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  padding: .5rem .85rem;
  margin-bottom: -1px;
  font-size: .92rem;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.reiter-knopf:hover { color: var(--text); background: var(--surface-2); }

.reiter-name { white-space: nowrap; }

/* Die Zahl gehoert zum Reiter, steht aber zurueck: Sie beantwortet eine
   Frage, die man nur manchmal stellt. */
.reiter-zahl {
  padding: 0 .4rem;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
}

/* Der Tastaturfokus liegt auf dem unsichtbaren Radioknopf - sichtbar
   gemacht wird er an der zugehoerigen Beschriftung. Ohne das koennte
   man mit der Tastatur bedienen, ohne zu sehen, wo man ist. */
.reiter-schalter:focus-visible + .reiter-knopf {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.reiter-buehne { padding-top: 1.1rem; }
.reiter-inhalt { display: none; }

/* Der n-te Schalter zeigt die n-te Flaeche.
   Eine Schleife gibt es in CSS nicht, also steht jede Zuordnung einzeln
   da. Sechzehn reichen weit; darueber wechselt die Seite von selbst auf
   die aufklappbare Ansicht (siehe Dashboard::MAX_REITER), damit kein
   Reiter ohne Regel und damit ohne Inhalt entsteht. */
.reiter-schalter:nth-of-type(1):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(1),
.reiter-schalter:nth-of-type(2):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(2),
.reiter-schalter:nth-of-type(3):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(3),
.reiter-schalter:nth-of-type(4):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(4),
.reiter-schalter:nth-of-type(5):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(5),
.reiter-schalter:nth-of-type(6):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(6),
.reiter-schalter:nth-of-type(7):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(7),
.reiter-schalter:nth-of-type(8):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(8),
.reiter-schalter:nth-of-type(9):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(9),
.reiter-schalter:nth-of-type(10):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(10),
.reiter-schalter:nth-of-type(11):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(11),
.reiter-schalter:nth-of-type(12):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(12),
.reiter-schalter:nth-of-type(13):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(13),
.reiter-schalter:nth-of-type(14):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(14),
.reiter-schalter:nth-of-type(15):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(15),
.reiter-schalter:nth-of-type(16):checked ~ .reiter-buehne > .reiter-inhalt:nth-of-type(16) {
  display: block;
}

.reiter-schalter:nth-of-type(1):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(1),
.reiter-schalter:nth-of-type(2):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(2),
.reiter-schalter:nth-of-type(3):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(3),
.reiter-schalter:nth-of-type(4):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(4),
.reiter-schalter:nth-of-type(5):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(5),
.reiter-schalter:nth-of-type(6):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(6),
.reiter-schalter:nth-of-type(7):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(7),
.reiter-schalter:nth-of-type(8):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(8),
.reiter-schalter:nth-of-type(9):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(9),
.reiter-schalter:nth-of-type(10):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(10),
.reiter-schalter:nth-of-type(11):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(11),
.reiter-schalter:nth-of-type(12):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(12),
.reiter-schalter:nth-of-type(13):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(13),
.reiter-schalter:nth-of-type(14):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(14),
.reiter-schalter:nth-of-type(15):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(15),
.reiter-schalter:nth-of-type(16):checked ~ .reiter-leiste > .reiter-knopf:nth-of-type(16) {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
}

/* ------------------------------------------------ Gespeicherte Ansichten
   Ein Menue im Kopf, keine lose Zeile ueber der Liste. Vorher stand da
   ein nacktes Dreieck mit dem Wort "Ansichten" - das sah aus wie etwas,
   das jemand einzubauen vergessen hatte. */

.ansichten { position: relative; }

.ansichten > summary {
  list-style: none;
  user-select: none;
}

.ansichten > summary::-webkit-details-marker { display: none; }

.ansichten-zahl {
  padding: 0 .35rem;
  margin-left: .1rem;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
}

.ansichten-tafel {
  position: absolute;
  right: 0;
  z-index: 30;
  width: min(24rem, calc(100vw - 2rem));
  padding: .8rem .9rem;
  margin-top: .4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.ansicht-liste { margin: 0 0 .7rem; padding: 0; list-style: none; }

.ansicht {
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.ansicht:last-child { border-bottom: 0; }
.ansicht > a { flex: 1; min-width: 0; font-weight: 500; }

.ansicht-speichern {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding-top: .7rem;
  border-top: 1px solid var(--border-soft);
}

.ansicht-speichern input[type="text"] { flex: 1 1 100%; }

.link-knopf {
  padding: 0;
  font: inherit;
  font-size: .84rem;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
}

.link-knopf:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Live-Staende und der Hinweis darauf

   WARUM ZWEI ANSICHTEN: Ein Merge Request ist laufende Arbeit und darf
   tagelang offen stehen. Eine Freigabe ist eine Entscheidung. In einer
   gemeinsamen Liste steht die Entscheidung zwischen einem Dutzend
   laufender Arbeiten und geht dort unter.

   Der Hinweis unten ist die Gegenprobe zu dieser Trennung: Sie loest
   die Verwirrung nur, wenn eine wartende Freigabe nicht dadurch
   unsichtbar wird, dass sie woanders steht.
   ------------------------------------------------------------------------- */

.freigabe-hinweis {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
}

.live-liste td {
  vertical-align: top;
}

.live-hinweis {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  max-width: 34rem;
}

/* Die farbige Kante links traegt die Aussage der Zeile, bevor man eine
   einzige Zahl gelesen hat: bereit, blockiert oder nichts zu tun. */
.live-liste tr.live-bereit    > td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.live-liste tr.live-blockiert > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.live-liste tr.live-aktuell   > td:first-child { box-shadow: inset 3px 0 0 var(--border); }