/* ===========================================================================
   GSV VOICE — was nur dieses Panel braucht   (voice-20260910)

   Alles Grundsätzliche (Leiste, Deck, Knöpfe, Marken, Blätter) kommt aus
   gsv-ui.css — dieselbe Datei wie bei games.g-sv.eu. Hier steht nur, was es
   dort nicht gibt: die Server-Kacheln eines Sprach-Servers, die Zahlenzeilen
   des Überblicks und der Hinweis-Kasten.

   NUR TOKENS: --sp-*, --radius*, --text*, --accent*, --ok, --err, --tr.
   Kein eigenes #hex, keine freie Pixelzahl.
   =========================================================================== */

/* --- Anmeldung ----------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}
.auth-card {
  width: 100%;
  max-width: calc(var(--sp-7) * 8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: var(--hair) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.auth-mark {
  width: var(--sp-7); height: var(--sp-7);
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--brand); color: var(--brand-ink);
}
.auth-card h1 { margin: 0; font-size: var(--fs-xl, 24px); letter-spacing: -.02em; }
.auth-card .sub { margin: 0; color: var(--text-dim); font-size: var(--fs-md); }
.auth-fehler {
  padding: var(--sp-3);
  border: var(--hair) solid var(--err);
  border-radius: var(--radius);
  background: var(--err-bg);
  color: var(--err);
  font-size: var(--fs-md);
}
.fld { display: flex; flex-direction: column; gap: var(--sp-1); }
.fld > span { font-size: var(--fs-kicker); text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--text-faint); font-weight: 700; }
.txt {
  padding: var(--sp-3);
  border: var(--hair) solid var(--border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
}
.txt:focus-visible { outline: none; border-color: var(--focus); }
.btn.block { width: 100%; justify-content: center; }

/* --- Die Leiste ---------------------------------------------------------- */
.rail { position: relative; }
.rail-fuell { flex: 1 1 auto; min-height: 0; }
.rail-brand {
  width: 100%;
  border: var(--hair) solid transparent;
  background: transparent; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
  border-radius: var(--radius);
  transition: background var(--tr);
}
.rail-brand:hover { background: var(--bg-deep); }
.rail-brand:focus-visible { outline: none; border-color: var(--focus); }
.rail-foot { width: 100%; font: inherit; color: inherit; text-align: left; }
.tb-titel { font-weight: 700; font-size: var(--fs-md); color: var(--text-dim); }

/* --- Das Konto-Menü (wie im Games-Panel, damit es sich gleich anfühlt) ---- */
.konto-menue {
  position: absolute;
  left: var(--sp-2); right: var(--sp-2);
  bottom: calc(var(--sp-7) + var(--sp-3));
  z-index: 40;
  display: flex; flex-direction: column;
  padding: var(--sp-1); gap: var(--sp-1);
  border: var(--hair) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 var(--sp-2) var(--sp-5) var(--scrim);
}
.km-i {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
  font: inherit; font-weight: 600; font-size: var(--fs-md);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.km-i:hover { background: var(--bg-deep); color: var(--text); }
.km-i:focus-visible { outline: none; border-color: var(--focus); }
.km-i .ni { width: var(--sp-5); height: var(--sp-5); display: grid; place-items: center; flex: 0 0 auto; }
.km-i .ni svg { width: var(--sp-4); height: var(--sp-4); }
.km-i.gefahr { color: var(--err); }
.km-i.gefahr:hover { background: var(--err-bg); }
.km-strich { height: var(--hair); background: var(--border); margin: var(--sp-1) var(--sp-2); }

/* --- Die Server-Kacheln -------------------------------------------------- */
.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--sp-7) * 6), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.vcard {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--hair) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.vcard:hover { border-color: var(--line-strong); background: var(--bg-deep); }
.vcard:focus-visible { outline: none; border-color: var(--focus); }
.vcard.laedt { pointer-events: none; opacity: .55; min-height: calc(var(--sp-7) * 3); }
.vc-kopf { display: flex; align-items: center; gap: var(--sp-3); }
.vc-ic {
  width: var(--sp-6); height: var(--sp-6);
  display: grid; place-items: center; flex: 0 0 auto;
  border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
}
.vc-ic svg { width: var(--sp-4); height: var(--sp-4); }
.vc-name { font-weight: 700; font-size: var(--fs-lg, 15px); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-leib { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.vc-z { display: flex; flex-direction: column; gap: var(--sp-1); }
.vc-z > span { font-size: var(--fs-kicker); text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--text-faint); font-weight: 700; }
.vc-z > b { font-variant-numeric: tabular-nums; }

/* --- Der Server-Kopf im Deck --------------------------------------------- */
.srv-kopf { display: flex; align-items: center; gap: var(--sp-2); }
.srv-kopf .ssname { font-weight: 700; font-size: var(--fs-lg, 15px); }

/* --- Überblick ------------------------------------------------------------ */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--sp-7) * 6), 1fr));
  gap: var(--sp-4);
}
.card {
  padding: var(--sp-4);
  border: var(--hair) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.card.fehler { border-color: var(--err); }
.card-h {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
}
.card-h svg { width: var(--sp-4); height: var(--sp-4); }
.zeilen { display: flex; flex-direction: column; gap: var(--sp-2); }
.z { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.z > span { font-size: var(--fs-sm); color: var(--text-dim); }
.z > b { font-variant-numeric: tabular-nums; }

/* Die Adresse: ein Feld, das man anklickt und hat. */
.adr {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  border: var(--hair) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-deep);
  cursor: pointer;
  transition: border-color var(--tr);
}
.adr:hover { border-color: var(--accent); }
.adr code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono, monospace); }
.adr-k { color: var(--text-faint); display: grid; place-items: center; }
.adr-k svg { width: var(--sp-4); height: var(--sp-4); }

/* --- Der ehrliche Hinweis statt einer leeren Liste ------------------------ */
.hinweis {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: var(--hair) solid var(--border);
  border-left: var(--bar-accent) solid var(--warn-ink);
  border-radius: var(--radius);
  background: var(--bg-deep);
  font-size: var(--fs-md);
}
.hinweis b { display: block; margin-top: var(--sp-3); margin-bottom: var(--sp-1); }
.hinweis b:first-child { margin-top: 0; }
.hinweis p { margin: 0; color: var(--text-dim); line-height: var(--line-body, 1.6); }
.hinweis code { font-family: var(--font-mono, monospace); font-size: var(--fs-sm); }

/* --- Listen -------------------------------------------------------------- */
.vliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.vliste li {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--bg-deep);
  font-size: var(--fs-md);
}

/* --- Leerer Zustand ------------------------------------------------------ */
.card.leer { text-align: center; padding: var(--sp-7) var(--sp-5); }
.leer-ic { display: grid; place-items: center; color: var(--text-faint); margin-bottom: var(--sp-3); }
.leer-ic svg { width: var(--sp-7); height: var(--sp-7); }
.leer-t { font-weight: 700; font-size: var(--fs-lg, 16px); margin-bottom: var(--sp-2); }

/* --- Blatt (Bestätigung) ------------------------------------------------- */
.modal-ov {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: var(--sp-5);
  background: var(--scrim);
}
.modal-card {
  width: 100%; max-width: calc(var(--sp-7) * 9);
  border: var(--hair) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}
.modal-card.danger { border-color: var(--err); }
.modal-h { padding: var(--sp-4); font-weight: 700; border-bottom: var(--hair) solid var(--border); }
.modal-b { padding: var(--sp-4); color: var(--text-dim); font-size: var(--fs-md); line-height: var(--line-body, 1.6); }
.modal-f { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4); border-top: var(--hair) solid var(--border); }

/* --- Meldung ------------------------------------------------------------- */
.toastbox {
  position: fixed; left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 95;
  padding: var(--sp-3) var(--sp-5);
  border: var(--hair) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: var(--fs-md);
  box-shadow: 0 var(--sp-2) var(--sp-5) var(--scrim);
}
.toastbox.ok { border-color: var(--ok); }
.toastbox.err { border-color: var(--err); }

/* --- Das Deck ------------------------------------------------------------ */
.deck-topbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.dt-spacer { flex: 1 1 auto; }
.deck-layout { display: flex; gap: var(--sp-4); align-items: flex-start; }
.deck-side { flex: 0 0 auto; width: calc(var(--sp-7) * 4); }
.deck-nav { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); border: var(--hair) solid var(--border); border-radius: var(--radius-lg); background: var(--paper); }
.deck-nav-grp { font-size: var(--fs-kicker); text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--text-faint); font-weight: 700; padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.deck-nav-i {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
  background: transparent; color: var(--text-dim);
  font: inherit; font-weight: 600; font-size: var(--fs-md);
  text-align: left; cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.deck-nav-i:hover { background: var(--bg-deep); color: var(--text); }
.deck-nav-i:focus-visible { outline: none; border-color: var(--focus); }
.deck-nav-i.on { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.deck-nav-i .dni { display: grid; place-items: center; flex: 0 0 auto; }
.deck-nav-i .dni svg { width: var(--sp-4); height: var(--sp-4); }
.deck-body { flex: 1 1 auto; min-width: 0; }

@media (max-width: 900px) {
  .deck-layout { flex-direction: column; }
  .deck-side { width: 100%; }
  .deck-nav { flex-direction: row; flex-wrap: wrap; }
  .deck-nav-grp { display: none; }
}