/* cx33 - Seitengeruest: Raster, Seitenleiste, Kopfzeile, Karten. */

/* --- Seitengeruest ------------------------------------------------------- */

.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

/* Die Seitenleiste klebt oben und ist nur einen Bildschirm hoch. Damit ihre
   Spalte auf langen Seiten nicht darunter aufreisst, faerbt das Raster selbst
   den Streifen ein. */
@media (min-width: 901px) {
  .shell { background: linear-gradient(to right, var(--bg-soft) 0 260px, var(--bg) 260px); }
}

.sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.main { padding: 26px 30px 60px; max-width: 1120px; width: 100%; min-width: 0; }

.brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 16px; }
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  box-shadow: 0 4px 14px rgba(109, 140, 255, .35);
}

.brand-name { font-weight: 650; letter-spacing: -.01em; font-size: 16px; color: var(--text); }
.brand-sub { font-size: 11.5px; color: var(--faint); margin-top: -2px; }

.side-section { padding: 6px 12px; }

.side-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--faint);
  padding: 12px 8px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px;
  transition: background .12s, color .12s;
}

.nav-item:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav-item.on { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.nav-item .dot { margin: 0; width: 7px; height: 7px; background: var(--faint); }
.nav-item.on .dot { background: var(--accent); }

/* Zaehler an "System", wenn Updates oder ein Neustart offen sind. */
.nav-alert {
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(251, 191, 36, .16);
  border: 1px solid rgba(251, 191, 36, .45);
  color: var(--warn);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.sidebar-foot {
  margin-top: auto;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.sidebar-foot form { margin: 0; }
.foot-build { display: block; font-size: 10.5px; opacity: .75; font-family: var(--mono); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-section { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px; }
  .side-label { width: 100%; padding: 8px 8px 2px; }
  .sidebar-foot { padding: 12px 16px; }
  .main { padding: 18px 16px 48px; }
}

/* --- Seitenkopf ---------------------------------------------------------- */

.head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}

.head h2 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }

.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row > * { min-width: 0; }
.grow { flex: 1; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.scroll { overflow-x: auto; }
.wrap { overflow-wrap: anywhere; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* --- Karten -------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
}

.card h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 16px;
}

.card.danger { border-color: rgba(248, 113, 113, .4); }
.card.highlight { border-color: rgba(52, 211, 153, .45); }

/* Ueberschrift einer Karte mit einer Schaltflaeche daneben. */
.head-klein { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.head-klein h3 { margin-bottom: 0; }

/* Ziel beim Ziehen: der Rahmen sagt, wohin es faellt. Ohne Rueckmeldung
   laesst man los und hofft. */
#files.zielt {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

/* --- Zeilen und Leisten: alles auf einer Linie ---------------------------- */
/* Steht hier und nicht in base.css: es ist eine Frage der Anordnung, nicht
   des Aussehens - und base.css lief ueber die Zeilengrenze. Die Datei wird
   nach base.css geladen, die Regeln gewinnen also weiterhin. */

/* Kein Abstand oben und unten, wo etwas *neben* etwas steht.
 *
 * Zwei Abstaende stammen aus dem Formularsatz und sind in einer Zeile fehl am
 * Platz: die 6px ueber einem Feld (der Abstand unter seiner Beschriftung) und
 * die 14px unter einem <label>. Gemessen statt geschaetzt, im echten Browser:
 *
 *   Feld        Mitte 173   (6px Rand oben -> 3px tiefer als der Knopf)
 *   "Anlegen"   Mitte 170
 *   "Dateien"   Mitte 163   (14px Rand unten -> der Kasten 47 statt 33 hoch)
 *
 * Zehn Pixel Versatz in einer Zeile, in der alles gleich hoch ist. Die
 * Aufzaehlung von frueher erfasste nur die *direkten* Kinder von .bar - nicht
 * die in einem "form.inline" oder einer Gruppe darin.
 *
 * Deshalb hier nicht mehr aufzaehlen, sondern die Regel: alles Bedienbare in
 * einer Reihe oder Leiste, egal wie tief. Ausgenommen bleibt, was in einem
 * <label> mit Beschriftung steht - dort sind die 6px genau richtig.
 *
 * Eine Tabellenzeile ist derselbe Fall und stand zuerst nicht dabei: die
 * Commit-Auswahl der Erweiterungen begann sechs Pixel tiefer als "Ausrollen"
 * daneben. Dieselbe Ursache, dieselbe Regel - eine Zeile ist eine Zeile,
 * gleich ob sie .row heisst oder <tr>. */
.row :is(input, select, button, .btn, label.btn),
.bar :is(input, select, button, .btn, label.btn),
table.list :is(input, select, button, .btn, label.btn) { margin-top: 0; margin-bottom: 0; }
.row > label:not(.btn):not(.check) > input,
.row > label:not(.btn):not(.check) > select,
.bar > label:not(.btn):not(.check) > input,
.bar > label:not(.btn):not(.check) > select { margin-top: 6px; }
.row > label, .bar > label:not(.btn):not(.check) { margin-bottom: 0; }

/* In einer Leiste stehen Eingabefelder neben kleinen Knoepfen.
   Ein Feld ist von Haus aus hoeher als ein "button.small" - 14px Schrift und
   9px Polsterung gegen 12.5px und 6px. Nebeneinander sieht das aus, als
   haetten sie nichts miteinander zu tun: die Unterkanten stehen versetzt, und
   der Knopf schwebt in der Mitte des Feldes. Also dieselben Masse. */
.bar input, .bar select {
  padding: 6px 11px;
  font-size: 12.5px;
}
/* Ein Kaestchen ist kein Feld - es hat seine eigene Groesse. */
.bar input[type="checkbox"], .bar input[type="radio"] { padding: 0; }


/* Und was zusammengehoert, steht enger beieinander als das Uebrige.
   Zwei Formulare mit je einem Feld und einem Knopf "Anlegen" sind sonst vier
   gleich weit auseinanderstehende Elemente, und man muss raten, welcher Knopf
   zu welchem Feld gehoert. Der Abstand ist hier die Beschriftung. */
.bar form.inline { display: flex; align-items: center; gap: 6px; }