/* bustabusta — Verwaltung. Dieselben Token wie das Spiel, aber Werkzeug statt
   Bühne: dichte Tabellen, tabellarische Ziffern, wenig Farbe — Farbe heisst
   hier etwas (gesperrt, Verwalter, Bust, Gewinn). */

:root {
  --c-ground:  15  21  28; --c-panel: 22 30 40; --c-sunken: 11 16 22; --c-line: 40 52 66;
  --c-ink:    221 228 236; --c-muted: 125 139 156; --c-accent: 245 166 35; --c-accent2: 86 200 216;
  --c-bust:   226  87  76; --c-win: 122 203 118;
  --f-ui: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: rgb(var(--c-ground)); color: rgb(var(--c-ink)); font-family: var(--f-ui); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2 { font-family: var(--f-cond); font-weight: 700; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 17px; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.muted { color: rgb(var(--c-muted)); }
.small { font-size: 12px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 1px; }
[hidden] { display: none !important; }

.chip { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 3px; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-panel)); color: rgb(var(--c-ink)); cursor: pointer; text-decoration: none; }
.chip:hover { border-color: rgb(var(--c-accent) / .6); color: rgb(var(--c-accent)); }
.btn { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 8px 13px; border-radius: 3px; border: 1px solid rgb(var(--c-accent)); background: rgb(var(--c-accent)); color: rgb(var(--c-ground)); cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn-ghost { background: transparent; color: rgb(var(--c-ink)); border-color: rgb(var(--c-line)); }
.btn-danger { background: transparent; color: rgb(var(--c-bust)); border-color: rgb(var(--c-bust) / .7); }
.btn-danger:hover { background: rgb(var(--c-bust) / .12); filter: none; }
input, select { background: rgb(var(--c-sunken)); border: 1px solid rgb(var(--c-line)); border-radius: 3px; padding: 7px 9px; color: rgb(var(--c-ink)); font-family: var(--f-mono); font-size: 13px; min-width: 0; }
input:focus, select:focus { border-color: rgb(var(--c-accent)); outline: none; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: rgb(var(--c-muted)); }

/* ── Kopf ── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid rgb(var(--c-line)); }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mark { font-family: var(--f-cond); font-weight: 700; font-size: 20px; text-decoration: none; }
.brand-sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--c-accent)); }
.top-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.who { font-family: var(--f-mono); font-size: 12px; color: rgb(var(--c-muted)); }
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; color: rgb(var(--c-muted)); font-variant-numeric: tabular-nums; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c-win)); }
.live[data-state="paused"] i { background: rgb(var(--c-accent)); }
.live[data-state="off"] i { background: rgb(var(--c-bust)); }

/* ── Anmeldung ── */
.gate { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 20px; }
.gate-card { width: min(100%, 360px); display: flex; flex-direction: column; gap: 12px; padding: 24px; background: rgb(var(--c-panel)); border: 1px solid rgb(var(--c-line)); border-radius: 4px; }
.gate-card h1 { font-size: 24px; }
.gate-error { font-size: 13px; color: rgb(var(--c-bust)); }

/* ── App ── */
.app { max-width: 1320px; margin: 0 auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid rgb(var(--c-line)); overflow-x: auto; }
.tabs a { font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding: 9px 14px; color: rgb(var(--c-muted)); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a[aria-current="page"] { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }
.panel { display: flex; flex-direction: column; gap: 16px; }
.card { background: rgb(var(--c-panel)); border: 1px solid rgb(var(--c-line)); border-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .two, .split { grid-template-columns: minmax(0, 1fr); } }

/* Kacheln: die Zahlen sind hier der Punkt. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.tile { background: rgb(var(--c-panel)); border: 1px solid rgb(var(--c-line)); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-muted)); }
.tile-value { font-family: var(--f-mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-sub { font-family: var(--f-mono); font-size: 11px; color: rgb(var(--c-muted)); font-variant-numeric: tabular-nums; }
.tile.good .tile-value { color: rgb(var(--c-win)); }
.tile.warn .tile-value { color: rgb(var(--c-accent)); }
.tile.bad .tile-value { color: rgb(var(--c-bust)); }

/* Verteilung */
.dist { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 5px 10px; align-items: center; font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.dist .lbl { color: rgb(var(--c-muted)); white-space: nowrap; }
.dist .bar { position: relative; height: 14px; background: rgb(var(--c-sunken)); border-radius: 2px; overflow: hidden; }
.dist .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgb(var(--c-accent2) / .75); }
.dist .bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: rgb(var(--c-ink)); }
.dist .val { text-align: right; white-space: nowrap; }
.dist .val span { color: rgb(var(--c-muted)); }

/* Tabellen */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-muted)); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid rgb(var(--c-line)); white-space: nowrap; }
.table td { padding: 6px 8px; border-bottom: 1px solid rgb(var(--c-line) / .6); vertical-align: top; white-space: nowrap; }
.table td.num, .table th.num { text-align: right; font-family: var(--f-mono); }
.table td.wrap { white-space: normal; }
.table-click tbody tr { cursor: pointer; }
.table-click tbody tr:hover { background: rgb(var(--c-accent) / .06); }
.table tr[aria-selected="true"] { background: rgb(var(--c-accent) / .1); }
.table .empty { color: rgb(var(--c-muted)); text-align: center; padding: 18px; }
.tag { display: inline-block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-muted)); margin-left: 6px; vertical-align: middle; }
.tag-ban { color: rgb(var(--c-bust)); border-color: rgb(var(--c-bust) / .6); }
.tag-admin { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / .6); }
.pos { color: rgb(var(--c-win)); } .neg { color: rgb(var(--c-bust)); }
.mult { font-family: var(--f-mono); }
.mult.low { color: rgb(var(--c-bust)); } .mult.hot { color: rgb(var(--c-accent)); }

/* Detailkarten */
.facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 13px; }
.facts dt { color: rgb(var(--c-muted)); white-space: nowrap; }
.facts dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.actions { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid rgb(var(--c-line)); }
.actions form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.actions form.three { grid-template-columns: 110px minmax(0, 1fr) auto; }
.actions .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search { display: flex; gap: 6px; }
.out { margin: 0; padding: 10px; background: rgb(var(--c-sunken)); border-radius: 3px; font-family: var(--f-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
h3 { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-muted)); margin: 6px 0 0; font-weight: 500; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgb(var(--c-ink)); color: rgb(var(--c-ground)); font-family: var(--f-mono); font-size: 12px; padding: 8px 14px; border-radius: 3px; box-shadow: 0 6px 24px rgb(0 0 0 / .4); z-index: 10; max-width: calc(100vw - 32px); }
.toast.err { background: rgb(var(--c-bust)); color: #fff; }
.beacon { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: rgb(var(--c-sunken)); border-radius: 3px; }
.beacon h3 { margin: 0 0 2px; }
.radio { flex-direction: row; align-items: baseline; gap: 8px; font-size: 13px; color: rgb(var(--c-ink)); cursor: pointer; }
.radio input { accent-color: rgb(var(--c-accent)); }
.beacon p { margin: 0; }
.preview-live td { background: rgb(var(--c-accent) / .12); color: rgb(var(--c-accent)); font-weight: 600; }
.preview-next td { color: rgb(var(--c-ink)); }
.preview-future td { color: rgb(var(--c-muted)); }
.langs { display: flex; gap: 4px; }
.flag { background: none; border: 1px solid transparent; border-radius: 3px; padding: 3px 4px; line-height: 0; cursor: pointer; opacity: .55; transition: opacity .12s, border-color .12s; }
.flag:hover { opacity: 1; }
.flag[aria-pressed="true"] { opacity: 1; border-color: rgb(var(--c-accent)); }
.flag svg { display: block; border-radius: 2px; }