/* ═══════════════════════════════════════════════════════════
   Admin panel. Quieter than the shop: this is where work happens,
   not where anything is sold. Dense tables, colour only where it means
   something. Uses the same tokens as style.css — nothing of its own.
   ═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────── sign in ── */
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-box {
  width: min(340px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 9px; text-align: center;
}
.login-box img { margin: 0 auto 2px; }
.login-box h1 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.login-box label { text-align: left; }

/* ────────────────────────────────────────────── frame ── */
/* Eine Spalte statt Seitenleiste — die Navigation liegt jetzt waagerecht
   oben, und die Kennzahlen stehen ueber allen Ansichten.

   `width: 100%` ist hier nicht ueberfluessig, sondern der Kern: style.css
   macht `body` zu einem Spalten-Flex (damit im Shop die Fusszeile unten
   klebt), und das Admin-Panel laedt dieselbe Datei mit. In einem Flex-Container
   hebt `margin: 0 auto` die Dehnung auf — das Element schrumpft dann auf
   seinen INHALT. Dadurch sprang die Panelbreite je nach Ansicht zwischen
   1240px und 860px, und die Reiter wanderten bei jedem Wechsel seitlich weg.  */
/* Platz fuer die Bildlaufleiste immer freihalten.

   Ohne das erscheint sie nur bei langen Ansichten (Products, Settings) und
   verschiebt den zentrierten Inhalt um ihre halbe Breite — beim Wechsel
   zwischen den Reitern rutschte alles sichtbar um 7px zur Seite.            */
html.admin-html { scrollbar-gutter: stable; }
body.admin { overflow-y: scroll; }

#app {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 22px 60px; min-height: 100vh; box-sizing: border-box;
}

.side {
  border-right: 1px solid var(--border); background: var(--bg-soft);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 0; height: 100vh;
}
.side .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; padding: 0 4px; }
.side .brand img { width: 30px; height: 30px; }
.side nav { display: flex; flex-direction: column; gap: 1px; }
.nav {
  background: none; color: var(--muted); text-align: left; padding: 8px 11px;
  border-radius: 8px; font-size: 13.5px; font-weight: 550;
  display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
}
.nav:hover { background: var(--surface); color: var(--text); }
.nav.active { background: var(--surface-2); color: var(--text); }
.badge {
  margin-left: auto; background: var(--danger); color: #1a0808; font-size: 10.5px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; min-width: 17px; text-align: center;
}
.badge:empty { display: none; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

.main { padding: 26px 28px 60px; max-width: 1180px; }
.main h2 { margin: 0 0 18px; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-head h2 { margin-bottom: 3px; }
.page-head .sub { margin: 0 0 18px; color: var(--faint); font-size: 13px; }

/* ────────────────────────────────────────────── KPI ── */
/* Feste Vierer-Reihe: auto-fit hat bei dieser Breite 3+1 gelegt, und eine
   einzelne Kachel in der zweiten Zeile sieht aus wie ein Fehler. */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.kpi .l { color: var(--faint); font-size: 12px; font-weight: 550; }
.kpi .v { font-size: 24px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; }
.kpi .s { color: var(--faint); font-size: 12px; margin-top: 4px; }
.kpi.warn .v { color: var(--warning); }
.kpi.bad .v { color: var(--danger); }
.kpi.good .v { color: var(--success); }

/* ────────────────────────────────────────────── status ── */
.cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 13px; align-items: start; }
.jump { cursor: pointer; }
.jump:hover { color: var(--accent); }

.statuslist { display: flex; flex-direction: column; gap: 2px; }
.st {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 2px; font-size: 13px; border-bottom: 1px solid var(--border);
}
.st:last-child { border-bottom: 0; }
.st b { font-weight: 550; }
.st .dim { margin-left: auto; text-align: right; }
/*
 * Ein Punkt statt eines Wortes: die Zeile daneben sagt ohnehin, was los ist.
 * Zwei Statusworte pro Zeile lesen sich wie ein Formular.
 */
.st .pt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.st.ok .pt { background: var(--success); box-shadow: 0 0 0 3px rgb(61 220 151 / .13); }
.st.bad .pt { background: var(--danger); box-shadow: 0 0 0 3px rgb(255 107 107 / .13); }

.leer { padding: 26px 16px !important; color: var(--faint); font-size: 13px; text-align: center; }

/* ────────────────────────────────────────────── panel ── */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border); }
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.panel-body { padding: 14px 15px; }
.dim { color: var(--faint); font-size: 12px; margin-left: auto; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }

/* ────────────────────────────────────────────── table ── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; color: var(--faint); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.tbl td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr[data-nr] { cursor: pointer; }
.tbl tr[data-nr]:hover td { background: var(--surface-2); }

/* Support: was auf eine Antwort wartet, traegt links eine Kante. Die Zeile
   steht in derselben Tabelle wie alles andere — ohne die Kante sieht man beim
   Ueberfliegen nicht, welche Faeden offen sind (22.09.2026). */
.tbl tr.sup-offen td:first-child { box-shadow: inset 2px 0 0 var(--danger, #e5484d); }
.sup-text {
  max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbl code { background: var(--bg-soft); padding: 2px 6px; border-radius: 5px; font-size: 12px; }

/* ────────────────────────────────────────────── products ── */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 13px; }
.prod {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px; display: flex; flex-direction: column; gap: 9px;
}
.prod .head { display: flex; align-items: center; gap: 9px; }
.prod .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.prod .head b { font-size: 14px; font-weight: 600; }
.prod .head .p { margin-left: auto; font-weight: 650; }
.prod .thumb-sm {
  height: 84px; border-radius: 9px; background: var(--bg-soft); display: grid; place-items: center;
  border: 1px solid var(--border); overflow: hidden;
}
.prod .thumb-sm img { height: 76px; max-width: 86%; object-fit: contain; }
.prod .meta { color: var(--faint); font-size: 12px; }
.prod .actions { display: flex; gap: 7px; margin-top: auto; }
.prod .actions button { padding: 6px 11px; font-size: 12.5px; }

/* ────────────────────────────────────────────── editor ── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
/* Zwei Karten nebeneinander — Bestenliste und Buchungen im Punkte-Panel. */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 11px; }
.upload {
  border: 1.5px dashed var(--border-strong); border-radius: 11px; padding: 14px; text-align: center;
  color: var(--faint); font-size: 12.5px; cursor: pointer;
}
.upload:hover, .upload.over { border-color: var(--accent); color: var(--text); }
.upload img { height: 100px; display: block; margin: 0 auto 8px; }

/*
 * Die Felder im Produkteditor sind in Bloecke gruppiert (Bestand, Lieferung,
 * Aussehen). Ohne die Bloecke steht ein Dutzend gleich aussehender Eingaben
 * untereinander, und man muss jedes Label lesen, um zu wissen, wo man ist.
 */
.field-group {
  border: 1px solid var(--border); border-radius: 11px; padding: 13px 13px 14px;
  background: var(--bg-soft);
}
.field-group-title {
  font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
/* Der Farbwaehler bekommt sonst die Hoehe eines Textfelds nicht. */
input[type="color"] { height: 38px; padding: 3px; cursor: pointer; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 14px; font-size: 13px; }
.kv .k { color: var(--faint); }

@media (max-width: 820px) {
  .cols { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .side nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { margin-left: auto; flex-direction: row; }
  .grid2, .grid3, .two { grid-template-columns: 1fr; }
}

/* Der Nachrichtenfaden benutzt die Darstellung aus style.css; hier nur die
   Hoehe, weil im Fenster weniger Platz ist. */
.thread { max-height: 220px; }

/* ─────────────────────────────────────────────── Bestelldialog ──
   Vorher lief der ganze Dialog in einem Rutsch, und die Knopfleiste war ein
   flex-Container, der nie geschlossen wurde — der Nachrichtenblock landete
   darin, und "Save note" stand als schmale Spalte daneben. Jetzt: klare
   Bloecke mit gleichem Rhythmus.                                            */
.ord-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-strong);
}
.ord-betrag { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.ord-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }

.ord-block { margin-top: 16px; }
.ord-block-title {
  font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.ord-block-title .dim { text-transform: none; letter-spacing: 0; font-weight: 500; }

.ord-zeile { display: flex; gap: 12px; align-items: baseline; padding: 3px 0; font-size: 13.5px; }
.ord-zeile .k { min-width: 74px; color: var(--muted); }
.ord-spieler { font-size: 14px; }

/* Posten: Menge links, Preis rechts, Name dazwischen — die Spalten sollen
   untereinander stehen, sonst tanzt jede Zeile.                             */
.ord-posten {
  display: grid; grid-template-columns: 40px 1fr auto auto;
  gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}
.ord-posten:last-child { border-bottom: 0; }
.ord-menge { color: var(--muted); text-align: right; }
.ord-preis { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Beleg: was der Server geantwortet hat. Gruen oder rot am Rand, damit man
   ohne Lesen sieht, ob es geklappt hat.                                     */
.beleg {
  border: 1px solid var(--border-strong); border-left-width: 3px;
  border-radius: 9px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface-2);
}
.beleg.ok { border-left-color: var(--success); }
.beleg.bad { border-left-color: var(--danger); }
.beleg-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.beleg-kopf code { font-size: 12.5px; }
.beleg-zeit { margin-left: auto; }
.beleg-ergebnis { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.beleg-leer { margin-top: 6px; font-size: 12.5px; font-style: italic; }
.beleg-chat { margin-top: 7px; }
.beleg-chat summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.beleg-chat summary:hover { color: var(--text); }
.beleg-chat pre {
  margin: 7px 0 0; padding: 9px 11px; border-radius: 7px;
  background: var(--bg); border: 1px solid var(--border-strong);
  font-size: 11.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow-y: auto; color: var(--muted);
}

.ord-verlauf { display: flex; flex-direction: column; gap: 2px; }
.ord-verlauf-zeile {
  display: grid; grid-template-columns: 132px 1fr; gap: 10px;
  font-size: 12.5px; padding: 3px 0;
}

.ord-aktionen {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-strong);
}

/* Im Panel schreibt der Betreiber — deshalb stehen SEINE Nachrichten rechts
   und die des Kaeufers links. Im Shop ist es genau andersherum; ohne diese
   Umkehr sieht der Faden hier verdreht aus.                                 */
.admin-thread { max-height: 260px; padding: 2px; }
.admin-thread .msg.buyer { align-self: flex-start; border-bottom-left-radius: 4px; border-bottom-right-radius: 12px; }
.admin-thread .msg.staff { align-self: flex-end; border-bottom-right-radius: 4px; border-bottom-left-radius: 12px; }

.ord-antwort { display: flex; gap: 8px; margin-top: 10px; }
.ord-antwort input { flex: 1; }
.ord-antwort button { flex: 0 0 auto; }

/* ──────────────────────────────────────────────── Chat-Fenster ──
   Der Faden hing vorher im Bestelldialog, vier Zeilen hoch, im Scrollbereich
   eines Scrollbereichs. Hier ist er ein eigenes Fenster mit fester Hoehe:
   Kopf oben, Verlauf dazwischen, Eingabe unten festgeklebt.                 */
.chat-modal {
  width: min(680px, 100%); height: min(78vh, 760px);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.chat-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-strong); flex: 0 0 auto;
}
.chat-wer { display: flex; align-items: center; gap: 11px; min-width: 0; }
.chat-kopf h3 { margin: 0; font-size: 16px; }
.chat-unter { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.chat-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 650; font-size: 15px;
  background: var(--accent-glow); color: var(--accent); border: 1px solid rgb(245 158 11 / .3);
}
.chat-avatar.klein { width: 28px; height: 28px; font-size: 12px; }

/* Der Verlauf ist der einzige Teil, der scrollt — deshalb flex:1 und
   min-height:0, sonst waechst er ueber das Fenster hinaus.                  */
.chat-verlauf {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  background: var(--bg);
}
.chat-tag { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.chat-tag::before, .chat-tag::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.chat-tag span { font-size: 11px; color: var(--faint); letter-spacing: .04em; }

.chat-zeile { display: flex; gap: 9px; align-items: flex-end; max-width: 78%; }
.chat-zeile.kunde { align-self: flex-start; }
/* Eigene Antworten rechts, Avatar dahinter — aus Sicht des Panels. */
.chat-zeile.uns { align-self: flex-end; flex-direction: row-reverse; }

.chat-blase {
  padding: 9px 13px; border-radius: 14px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border);
}
.chat-zeile.kunde .chat-blase { border-bottom-left-radius: 4px; }
.chat-zeile.uns .chat-blase {
  border-bottom-right-radius: 4px;
  background: rgb(245 158 11 / .12); border-color: rgb(245 158 11 / .3);
}
.chat-name { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.chat-zeile.uns .chat-name { color: var(--accent); }
.chat-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.chat-zeit { font-size: 10.5px; color: var(--faint); margin-top: 4px; text-align: right; }

.chat-leer { margin: auto; text-align: center; max-width: 340px; }
.chat-leer-zeichen { font-size: 34px; opacity: .35; margin-bottom: 8px; }
.chat-leer p { margin: 0 0 6px; font-size: 14px; }
.chat-leer p.dim { font-size: 12.5px; line-height: 1.55; }

.chat-fuss {
  flex: 0 0 auto; display: flex; gap: 9px; align-items: center;
  padding: 13px 18px 9px; border-top: 1px solid var(--border-strong);
}
.chat-fuss input { flex: 1; }
.chat-fuss button {
  flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center; font-size: 15px;
}
.chat-hinweis {
  flex: 0 0 auto; padding: 0 18px 13px;
  font-size: 11.5px; color: var(--faint);
}
.chat-hinweis.err { color: var(--danger); }

/* Der Knopf, der das Fenster oeffnet. */
.chat-oeffnen { display: inline-flex; align-items: center; gap: 8px; }

/* ───────────────────────────────────────── Kopf und Reiter ──
   Die Seitenleiste ist weg. Sie kostete 214px Breite fuer sieben Eintraege,
   und die Kennzahlen waren in der Uebersicht eingesperrt — wer in den
   Bestellungen stand, musste erst zurueckwechseln, um zu sehen, ob etwas
   offen ist. Jetzt: Kopf, Kennzahlen, Reiter, Inhalt.                       */
.ap-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap; padding: 24px 0 18px;
}
.ap-kopf-links { display: flex; align-items: center; gap: 13px; }
.ap-kopf h1 { margin: 0; font-size: 23px; font-weight: 680; letter-spacing: -.02em; }
.ap-unter { margin: 2px 0 0; font-size: 13px; color: var(--faint); }
.ap-logo { width: 38px; height: 38px; border-radius: 9px; }
.ap-zurueck {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 9px;
  color: var(--muted); text-decoration: none; font-size: 15px;
}
.ap-zurueck:hover { border-color: var(--border-strong); color: var(--text); }

.ap-kopf-rechts { display: flex; align-items: center; gap: 10px; }
.ap-zeitraum { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); }
.ap-zeitraum select { min-width: 132px; }

/* Reiter: waagerecht, mit Unterstrich statt Kasten. Der Unterstrich zeigt
   die Auswahl, ohne dass jeder Reiter wie ein Knopf aussieht.               */
.ap-reiter {
  display: flex; gap: 2px; overflow-x: auto; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.ap-reiter .nav {
  flex: 0 0 auto; border-radius: 0; padding: 11px 14px;
  border-bottom: 2px solid transparent; background: none;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.ap-reiter .nav:hover { background: var(--surface); color: var(--text); }
.ap-reiter .nav.active {
  background: none; color: var(--text); border-bottom-color: var(--accent);
}
.ap-reiter .nav .ico { font-size: 13px; opacity: .75; }
.ap-reiter .nav.active .ico { color: var(--accent); opacity: 1; }
.ap-reiter .badge { margin-left: 2px; }

/* Kennzahlen stehen jetzt ueber allem und brauchen etwas Luft darunter. */
.kpis { margin-bottom: 20px; }
.main { padding: 0; max-width: none; }

@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .ap-kopf { padding-top: 18px; }
}


/* ───────────────────────────────────────────── Konto-Mitschrift ── */
/*
 * Die Chatzeilen, die der Liefer-Bot vom Server bekommt.
 *
 * <p>Feste Hoehe statt mitwachsend: Der Kasten soll beim Nachladen nicht
 * springen, und ein Konto, das eine Stunde laeuft, wuerde die Seite sonst
 * meterlang machen.
 */
.botlog {
  height: 340px;
  overflow-y: auto;
  background: var(--bg, #0d1117);
  border: 1px solid var(--border, #2a3038);
  border-radius: 8px;
  padding: 9px 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}
.botlog .z { display: flex; gap: 9px; }
.botlog .z + .z { margin-top: 1px; }
/* Die Uhrzeit tritt zurueck — gelesen wird der Text daneben. */
.botlog .t { color: var(--muted, #7d8b98); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.botlog .x { white-space: pre-wrap; word-break: break-word; }
.botlog .leer { color: var(--muted, #7d8b98); font-style: italic; }


/* ═══════════════════════════════════════════════════════════
   Rework 25.09.2026 (Betreiber: "smoother gui, Buttons sehen
   abgeschnitten aus"). Alles unten legt sich UEBER die Regeln oben —
   nur Tokens aus style.css, damit die Themes (Overworld/Nether/End)
   automatisch mitziehen. Gefunden und behoben:
   - Reiterleiste: weisser System-Scrollbalken, letzter Reiter halb weg
   - Kopf-Knoepfe ("Recount ender chest") brachen zweizeilig um
   - Speichern-Knopf im Dialog lief unter den Scrollbalken
   - Tabellen in .panel (overflow:hidden) wurden rechts abgeschnitten
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────── Bewegung: ein Takt fuer alles ── */
body.admin {
  --ap-ease: cubic-bezier(.2, .7, .2, 1);
  --ap-schnell: .14s;
  --ap-mittel: .22s;
}

/* ───────────────────────────────── Scrollbalken: dunkel und schmal ──
   Die weissen System-Balken waren das Erste, was "kaputt" aussah. */
body.admin, body.admin * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
body.admin ::-webkit-scrollbar { width: 10px; height: 10px; }
body.admin ::-webkit-scrollbar-track { background: transparent; }
body.admin ::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
body.admin ::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }
body.admin ::-webkit-scrollbar-corner { background: transparent; }

/* ───────────────────────────────── Knoepfe ── */
body.admin button, body.admin .btn {
  white-space: nowrap; min-height: 36px; line-height: 1.15;
  transition: background var(--ap-schnell) ease, border-color var(--ap-schnell) ease,
    color var(--ap-schnell) ease, box-shadow var(--ap-schnell) ease,
    transform var(--ap-schnell) var(--ap-ease), opacity var(--ap-schnell) ease;
}
body.admin button:not(:disabled):active, body.admin .btn:active { transform: translateY(1px) scale(.985); }
body.admin button.sm, body.admin .prod .actions button { min-height: 30px; }
body.admin button:focus-visible, body.admin .btn:focus-visible, body.admin .nav:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-glow), 0 0 0 1px var(--accent);
}
/* Primaerknoepfe bekommen einen Hauch Tiefe — flach wirkten sie wie Flaechen. */
body.admin button:not(.ghost):not(.nav):not(.ip-trigger):not(.discord):not(:disabled) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(0 0 0 / .35);
}
body.admin button:not(.ghost):not(.nav):not(.ip-trigger):not(:disabled):hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 4px 14px -4px var(--accent-glow);
}

/* Kopf einer Ansicht: Knoepfe wandern unter die Ueberschrift, statt sich zu
   quetschen. */
body.admin .page-head { flex-wrap: wrap; row-gap: 10px; }
body.admin .page-head > div:first-child { flex: 1 1 320px; min-width: 0; }
body.admin .page-head > div:last-child:not(:first-child) { flex-wrap: wrap; justify-content: flex-end; }
body.admin .toolbar > * { flex-shrink: 0; }
body.admin .ap-zeitraum span { white-space: nowrap; }
body.admin .ap-kopf-rechts { flex-wrap: wrap; }

/* ───────────────────────────────── Reiterleiste ──
   Klebt oben, scrollt waagerecht ohne sichtbaren Balken, blendet an den
   Kanten aus, wenn dort noch Reiter stehen (Klassen setzt admin.js). Der
   Unterstrich gleitet ein statt zu springen. */
body.admin .ap-reiter {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -22px 22px; padding: 0 22px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain;
}
body.admin .ap-reiter::-webkit-scrollbar { display: none; }
body.admin .ap-reiter.fade-r { mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
body.admin .ap-reiter.fade-l { mask-image: linear-gradient(90deg, transparent, #000 56px); }
body.admin .ap-reiter.fade-l.fade-r {
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
body.admin .ap-reiter .nav {
  position: relative; min-height: 0; border-bottom: 0; margin-bottom: -1px;
  padding: 12px 13px 13px; border-radius: 9px 9px 0 0;
  transition: color var(--ap-schnell) ease, background var(--ap-schnell) ease;
}
body.admin .ap-reiter .nav::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--accent);
  transform: scaleX(0); opacity: 0;
  transition: transform var(--ap-mittel) var(--ap-ease), opacity var(--ap-schnell) ease;
}
body.admin .ap-reiter .nav:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
body.admin .ap-reiter .nav.active::after { transform: scaleX(1); opacity: 1; }

/* ───────────────────────────────── Ansichten wechseln weich ── */
@keyframes apEin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.admin .view:not([hidden]) { animation: apEin var(--ap-mittel) var(--ap-ease); }

/* ───────────────────────────────── Karten, Kacheln, Tabellen ── */
body.admin .kpi, body.admin .prod, body.admin .panel {
  transition: border-color var(--ap-mittel) ease, transform var(--ap-mittel) var(--ap-ease),
    box-shadow var(--ap-mittel) ease;
}
body.admin .kpi:hover, body.admin .prod:hover { border-color: var(--border-strong); }
body.admin .prod:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .8); }
body.admin .kpi .v { font-variant-numeric: tabular-nums; }

/* Breite Tabellen scrollen im Kasten, statt rechts abgeschnitten zu werden. */
body.admin .panel { overflow-x: auto; overflow-y: hidden; }
body.admin .tbl td, body.admin .tbl th { transition: background var(--ap-schnell) ease; }
body.admin .tbl code, body.admin .tbl .tag, body.admin .tbl td:has(> button) { white-space: nowrap; }
body.admin .tbl td > button { min-height: 30px; padding: 6px 12px; font-size: 12.5px; }

/* Kaesten ohne panel-head/-body (Donut Money): Inhalt klebte am Rand. Jetzt
   Innenabstand; Tabellen darin laufen weiter randlos bis an die Kante. */
body.admin .panel:has(> h3) { padding: 15px 16px 16px; }
body.admin .panel:has(> h3) > h3 { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
body.admin .panel:has(> h3) > .tbl { margin: 10px -16px -16px; width: calc(100% + 32px); }

/* Referrals hatte "view-head" ohne eigene Regel — sieht jetzt aus wie jeder
   andere Seitenkopf. */
body.admin .view-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; row-gap: 10px; margin-bottom: 18px;
}
body.admin .view-head > div:first-child { flex: 1 1 320px; min-width: 0; }
body.admin .view-head h2 { margin-bottom: 3px; }
body.admin .view-head .hint { margin: 0; font-size: 13px; }

/* ───────────────────────────────── Eingaben ── */
body.admin input, body.admin select, body.admin textarea {
  transition: border-color var(--ap-schnell) ease, box-shadow var(--ap-schnell) ease, background var(--ap-schnell) ease;
}
body.admin input:hover:not(:focus), body.admin select:hover:not(:focus), body.admin textarea:hover:not(:focus) {
  border-color: var(--border-strong);
}

/* ───────────────────────────────── Dialoge ──
   Weich auf statt hart da; der Speichern-Knopf bleibt unten kleben, liegt
   aber INNEN — vorher lief er unter den Scrollbalken und war rechts weg. */
@keyframes apSchleier { from { opacity: 0; } to { opacity: 1; } }
@keyframes apFenster { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
body.admin .overlay.open { animation: apSchleier var(--ap-mittel) ease; }
body.admin .overlay.open .modal { animation: apFenster .26s var(--ap-ease); }
body.admin .modal .content { scrollbar-gutter: stable; }
body.admin .modal .content > button.wide:last-child {
  position: sticky; bottom: 0; z-index: 5;
  margin: 6px 0 0; padding: 12px 18px; border-radius: 11px;
  /* Schatten in Hintergrundfarbe: der erste deckt den Rand unter und neben
     dem Knopf ab (was dort weiterscrollt, ist weg), der zweite laesst den
     Inhalt nach oben weich ausblenden. Schatten liegen immer UNTER dem Knopf. */
  box-shadow: 0 16px 0 16px var(--surface), 0 -14px 18px 0 var(--surface),
    inset 0 1px 0 rgb(255 255 255 / .18);
}
body.admin .modal .content > button.wide:last-child:hover {
  box-shadow: 0 16px 0 16px var(--surface), 0 -14px 18px 0 var(--surface),
    inset 0 1px 0 rgb(255 255 255 / .22);
}
body.admin .modal header button { min-height: 0; box-shadow: none; }
body.admin .modal header button:hover { color: var(--text); background: var(--surface-2); }

/* ───────────────────────────────── Item-Auswahl (Produkteditor) ── */
body.admin .grid2 > .ip-feld { grid-column: 1 / -1; }
.ip { position: relative; }

.ip-trigger {
  width: 100%; min-height: 44px; padding: 7px 12px 7px 8px; gap: 11px;
  justify-content: flex-start; text-align: left;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; font-weight: 550;
}
.ip-trigger:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.ip-trigger.offen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ip-trigger.leer .ip-name { color: var(--faint); font-weight: 500; }
.ip-trigger.falsch { border-color: color-mix(in srgb, var(--danger) 70%, var(--border)); }
.ip-trigger.falsch .ip-key { color: var(--danger); }
.ip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.ip-key {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--faint); background: none; padding: 0;
}
.ip-pfeil { width: 15px; height: 15px; flex: 0 0 auto; color: var(--faint); transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.ip-trigger.offen .ip-pfeil { transform: rotate(180deg); color: var(--accent); }
@keyframes ipGewaehlt { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 60% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: none; } }
.ip-trigger.gewaehlt { animation: ipGewaehlt .5s ease; }

/* Icons: 16×16-Pixelgrafik, scharf hochskaliert. */
.ip-ico {
  width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 7px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ip-ico img { width: 22px; height: 22px; image-rendering: pixelated; }
.ip-ph { font-size: 12px; font-weight: 700; color: var(--faint); }

.ip-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
  border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden;
  box-shadow: 0 22px 44px -16px rgb(0 0 0 / .85), 0 0 0 1px rgb(0 0 0 / .25);
  opacity: 0; transform: translateY(-4px) scale(.99); transform-origin: top center;
  transition: opacity .14s ease, transform .22s cubic-bezier(.2, .7, .2, 1);
}
.ip-pop.an { opacity: 1; transform: none; }

.ip-suche {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.ip-suche svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--faint); }
body.admin .ip-suche input {
  flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; box-shadow: none;
  font-size: 14.5px;
}
.ip-suche kbd, .ip-fuss kbd {
  font: 600 10.5px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--faint);
  padding: 3px 5px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface-2);
}

.ip-liste { max-height: 292px; overflow-y: auto; padding: 5px; overscroll-behavior: contain; }
.ip-gruppe {
  padding: 9px 9px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.ip-zeile {
  display: flex; align-items: center; gap: 11px; padding: 6px 9px; border-radius: 8px;
  cursor: pointer; transition: background .08s ease;
}
.ip-zeile.aktiv {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ip-zeile.sel .ip-label { color: var(--accent-hover); }
.ip-label { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-zeile code {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  color: var(--faint); background: none; padding: 0;
}
.ip-zeile mark { background: none; color: var(--accent-hover); font-weight: 700; }
.ip-zeile code mark { color: var(--accent); }
.ip-haken { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }
.ip-leer { padding: 26px 12px; text-align: center; color: var(--faint); font-size: 13px; }
.ip-leer b { color: var(--text); font-weight: 600; }

/* Platzhalter, solange die Suche laeuft (erst nach 120 ms, siehe admin.js). */
@keyframes ipSchimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ip-skel { cursor: default; }
.ip-skel .ip-ico, .ip-skel .ip-label, .ip-skel code {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: ipSchimmer 1.1s linear infinite; box-shadow: none;
}
.ip-skel .ip-label { height: 12px; border-radius: 4px; max-width: 46%; }
.ip-skel code { width: 72px; height: 10px; border-radius: 4px; }

.ip-fuss {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--faint);
}
.ip-tasten { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

@media (max-width: 560px) {
  .ip-zeile code, .ip-tasten { display: none; }
}

/* ───────────────────────────────── Wer keine Bewegung will ── */
@media (prefers-reduced-motion: reduce) {
  body.admin *, body.admin *::before, body.admin *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}