/* Gästeliste — Orga. Bildsprache von tnsn.ch: schwarz, Archivo + Mono,
   keine Rundungen, Haarlinien statt Flächen. Akzent ist die Umkehrung
   (weiss auf schwarz), damit die Palette monochrom bleibt. */

:root{
  /* Sagt dem Browser, seine eigenen Bedienelemente dunkel zu zeichnen:
     Kalender-Popup, Auswahllisten, Bildlaufleisten, Autofill. */
  color-scheme:dark;

  --bg:#000;
  --fg:#fff;
  --dim:rgba(255,255,255,.68);
  --faint:rgba(255,255,255,.44);
  --line:rgba(255,255,255,.24);
  --line-soft:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.035);
  --err:#ff6b6b;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:transparent; border:0;
  border-radius:0; cursor:pointer; text-align:left; }

body{
  font-family:var(--sans);
  background:var(--bg); color:var(--fg);
  min-height:100vh; padding:clamp(24px,5vh,56px) clamp(16px,4vw,28px);
  -webkit-font-smoothing:antialiased;
}

.page{ max-width:900px; margin:0 auto; }

.page-header{ display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:36px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.page-header h1{ font-size:clamp(1.4rem,3.4vw,2rem); font-weight:400;
  font-variation-settings:"wght" 700,"wdth" 88; letter-spacing:.02em; }

.back-link{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  color:var(--dim); text-decoration:none; transition:color .4s var(--ease); }
.back-link:hover{ color:var(--fg); }

/* ── Flächen ─────────────────────────────────────────────────────────────── */

.card{ background:var(--panel); border:1px solid var(--line-soft);
  padding:20px; margin-bottom:18px; }
.card h2{ font-size:.95rem; font-weight:400; font-variation-settings:"wght" 620;
  margin-bottom:16px; }

.section-title{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:lowercase; color:var(--dim); margin-bottom:14px; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */

.btn{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:lowercase; padding:.7em 1.1em; border:1px solid transparent;
  background:transparent; color:var(--fg); cursor:pointer; border-radius:0;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn-primary{ background:var(--fg); color:var(--bg); }          /* Umkehrung = Akzent */
.btn-primary:hover{ background:rgba(255,255,255,.82); }
.btn-ghost{ color:var(--dim); }
.btn-ghost:hover{ color:var(--fg); }
.btn-outline{ border-color:var(--line); color:var(--dim); }
.btn-outline:hover{ border-color:var(--fg); color:var(--fg); }
.btn-sm{ padding:.5em .8em; font-size:.63rem; }
.btn:disabled{ opacity:.35; cursor:default; }
.btn-cancel{ color:var(--dim); }
.btn-cancel:hover{ color:var(--fg); }

/* ── Formulare ───────────────────────────────────────────────────────────── */

input, select, textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; color:var(--fg); font-family:var(--sans); font-size:.98rem;
  padding:.5em 0; width:100%;
  transition:border-color .4s var(--ease); }
input:focus, select:focus, textarea:focus{ outline:none; border-bottom-color:var(--fg); }
input::placeholder, textarea::placeholder{ color:var(--faint); }
select{ appearance:none; padding-right:1.2em; min-width:9em; }

/* Mit color-scheme:dark zeichnet der Browser den Kalenderknopf bereits hell –
   hier nur noch Deckkraft und Abstand. */
input[type="datetime-local"], input[type="date"], input[type="time"]{
  font-family:var(--mono); font-size:.92rem; letter-spacing:.02em; cursor:pointer; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.6; cursor:pointer; padding-left:.4em;
  transition:opacity .3s var(--ease); }
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }
select option{ background:#0a0a0a; color:var(--fg); }

label{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:lowercase; color:var(--dim); margin-bottom:.55em; }

.inline-form{ display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.field{ min-width:0; }
.field.grow{ flex:1 1 160px; }
.field input.w-party{ width:4.5em; }

.hint{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em;
  color:var(--faint); line-height:1.75; }
.error{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--err); }
.empty{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--faint); padding:18px 0; }

/* ── Editionen und Events ────────────────────────────────────────────────── */

.edition-group{ margin-bottom:26px; }
.edition-group:last-child{ margin-bottom:0; }
.edition-head{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  color:var(--faint); margin-bottom:10px; }

.event-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.event-card{ width:100%; border:1px solid var(--line-soft); padding:14px; cursor:pointer;
  transition:border-color .35s var(--ease), background .35s var(--ease); }
.event-card:hover{ border-color:var(--line); background:var(--panel); }
.event-card.active{ border-color:var(--fg); background:var(--panel); }
.event-card.cancelled .event-name{ text-decoration:line-through; color:var(--faint); }
.event-card-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.event-name{ font-size:.95rem; font-variation-settings:"wght" 600; }
.event-date{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em;
  color:var(--dim); margin-top:6px; }
.event-venue{ font-family:var(--mono); font-size:.64rem; letter-spacing:.04em;
  color:var(--faint); margin-top:3px; }
.event-count{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em;
  color:var(--dim); margin-top:8px; }
.event-count strong{ color:var(--fg); font-weight:400; }

.status-badge{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:lowercase; padding:.3em .6em; border:1px solid var(--line);
  color:var(--dim); white-space:nowrap; }
/* Status ohne Signalfarben: über Gewicht und Kontrast unterschieden */
.status-badge.status-confirmed{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.status-badge.status-option{ color:var(--fg); border-color:var(--fg); }
.status-badge.status-idea{ color:var(--dim); border-color:var(--line); }
.status-badge.status-cancelled{ color:var(--faint); border-color:var(--line-soft);
  text-decoration:line-through; }

.panel-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:16px; }
.panel-head h2{ font-size:.95rem; font-weight:400; font-variation-settings:"wght" 620; }

.new-event summary{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  color:var(--dim); cursor:pointer; list-style:none;
  transition:color .35s var(--ease); }
.new-event summary::-webkit-details-marker{ display:none; }
.new-event summary:hover{ color:var(--fg); }
.new-event[open] summary{ color:var(--fg); margin-bottom:16px; }

.list-picker{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.list-chip{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
  padding:.5em .8em; border:1px solid var(--line-soft); color:var(--dim);
  cursor:pointer; transition:border-color .35s var(--ease), color .35s var(--ease); }
.list-chip:hover{ border-color:var(--line); color:var(--fg); }
.list-chip.active{ border-color:var(--fg); color:var(--fg); }
.list-chip .cnt{ color:var(--faint); margin-left:.5em; }
.list-chip.active .cnt{ color:var(--dim); }

.event-times{ display:flex; gap:16px; flex-wrap:wrap; }
.event-times .field{ flex:1 1 150px; }
.event-times input{ font-family:var(--mono); font-size:.75rem; }

/* ── Zahlen ──────────────────────────────────────────────────────────────── */

.stats{ display:flex; gap:32px; flex-wrap:wrap; margin-bottom:28px; }
.stat .num{ font-size:1.9rem; font-variation-settings:"wght" 300,"wdth" 92;
  line-height:1; color:var(--dim); }
.stat .num.accent{ color:var(--fg); font-variation-settings:"wght" 700,"wdth" 88; }
.stat .lbl{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  color:var(--faint); margin-top:8px; }

/* ── Kategorien ──────────────────────────────────────────────────────────── */

.cat-list{ display:flex; gap:8px; flex-wrap:wrap; }
/* Farbe kommt aus der Datenbank (guest_categories.color) und bleibt erhalten */
.badge{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em;
  text-transform:lowercase; padding:.35em .7em; white-space:nowrap; }
.cat-manage{ display:flex; align-items:center; gap:.5em; }
.cat-manage .x{ color:var(--faint); cursor:pointer; font-size:.9em;
  transition:color .3s var(--ease); }
.cat-manage .x:hover{ color:var(--err); }

/* ── Türlink und Promoter ────────────────────────────────────────────────── */

.token-box{ border:1px solid var(--line-soft); padding:14px; background:var(--panel); }
.token-url{ font-family:var(--mono); font-size:.7rem; letter-spacing:0;
  color:var(--dim); word-break:break-all; line-height:1.8; }

.promoter-links{ display:flex; flex-direction:column; gap:0; }
.promoter-row{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.promoter-info{ min-width:0; }
.promoter-label{ font-size:.85rem; }
.promoter-quota{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em;
  color:var(--dim); margin-top:4px; }
.promoter-quota.full{ color:var(--err); }

/* ── Gästetabelle ────────────────────────────────────────────────────────── */

.guest-table{ width:100%; border-collapse:collapse; }
.guest-table th{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:lowercase; color:var(--faint); text-align:left;
  padding:0 10px 10px 0; font-weight:400; border-bottom:1px solid var(--line); }
.guest-table td{ padding:12px 10px 12px 0; border-bottom:1px solid var(--line-soft);
  font-size:.95rem; vertical-align:middle; }
.guest-table tr:last-child td{ border-bottom:0; }
.guest-table tbody tr:hover{ background:var(--panel); }
.guest-name{ font-variation-settings:"wght" 560; }
.party-tag{ font-family:var(--mono); font-size:.64rem; letter-spacing:.04em;
  color:var(--dim); margin-left:.5em; }
.checked-pill{ font-family:var(--mono); font-size:.63rem; letter-spacing:.06em;
  padding:.35em .7em; border:1px solid var(--line); color:var(--dim);
  white-space:nowrap; }
.checked-pill.done{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

.toolbar{ display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:16px; }
.toolbar .search{ flex:1 1 200px; max-width:320px; }

/* ── Dialoge ─────────────────────────────────────────────────────────────── */

.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.8);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); z-index:50; }
.modal-overlay.visible{ opacity:1; pointer-events:auto; }
.modal{ background:#0a0a0a; border:1px solid var(--line); padding:24px;
  width:min(420px,100%); }
.modal h3{ font-size:1rem; font-weight:400; font-variation-settings:"wght" 620;
  margin-bottom:18px; }
.modal .field{ margin-bottom:16px; }
.modal-footer{ display:flex; gap:8px; justify-content:flex-end; margin-top:22px; }

.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,12px);
  background:#0a0a0a; border:1px solid var(--line); color:var(--fg);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  padding:.9em 1.3em; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease); z-index:60; }
.toast.visible{ opacity:1; transform:translate(-50%,0); }

@media (max-width:620px){
  body{ padding:20px 14px; }
  .guest-table thead{ display:none; }
  .guest-table td{ display:block; padding:4px 0; border-bottom:0; }
  .guest-table tr{ display:block; padding:12px 0; border-bottom:1px solid var(--line-soft); }
  .row-actions{ justify-content:flex-start; margin-top:8px; }
}