/* ============================================================
   Tischplan – Ansatz C  (wiederverwendbares Design, gescoped .tp-root)
   Quelle: Claude-Design „Tischplan – Ansatz C.html"
   Verwendet auf: Reservierung (Auswahl) + Admin/Verwaltung (Anzeige)
   ============================================================ */
/* An das Design-System angeglichen (war die Palette der ALTEN Website:
   roetliches #3A1418 statt Schwarz, warme Cremetoene, roetliche Schatten
   und eine fremde Schrift). Alle Werte zeigen jetzt auf die md-Tokens.
   Wichtig: --tp-violet ist der AUSWAHL-Zustand. Er zeigte auf
   --vw-color-primary, also auf das helle Marken-Beige — ein gewaehlter
   Tisch war dadurch kaum vom freien zu unterscheiden. Jetzt dunkel. */
.tp-root{
  --tp-card:var(--md-background,#FFFFFF); --tp-ink:var(--md-text,#111111);
  --tp-ink2:var(--md-text-muted,rgba(17,17,17,.62)); --tp-muted:var(--md-text-muted,rgba(17,17,17,.62));
  --tp-field:var(--md-surface,#F7F7F7); --tp-border:var(--md-outline,#E6E6E6); --tp-border2:#CFCFCF;
  /* Auswahl: dunkel, damit der gewaehlte Tisch klar heraussticht */
  --tp-violet:var(--md-text,#111111); --tp-violet-strong:#000000;
  --tp-violet-soft:var(--md-primary-light,#F5F2EA); --tp-violet-border:var(--md-text,#111111);
  --tp-tableline:var(--md-outline,#E6E6E6);
  --tp-green:#2E7D32; --tp-occ:#EDEDED; --tp-occ-border:#DADADA;
  --tp-warm:var(--md-primary-light,#F5F2EA); --tp-warm-border:var(--md-primary,#D3C6A3);
  --tp-gold:var(--md-primary,#D3C6A3);
  /* Das Design ist flach — keine Schatten. */
  --tp-shadow:none; --tp-shadow-sm:none;
  background:var(--tp-card); border:1px solid var(--tp-border);
  border-radius:var(--md-radius-card,.5rem);
  overflow:hidden; color:var(--tp-ink);
}
/* Schrift der Seite statt 'Archivo' aus der alten Vorlage. */
.tp-root, .tp-root *{ font-family:var(--vw-font-body); box-sizing:border-box; }

.tp-root .tp-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--tp-border); }
.tp-root .tp-legend{ display:flex; gap:13px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--tp-ink2); }
.tp-root .tp-legend span{ display:flex; align-items:center; gap:6px; }
.tp-root .tp-dot{ width:12px; height:12px; border-radius:5px; display:inline-block; border:1.5px solid var(--tp-border2); }
.tp-root .tp-dot.free{ background:#fff; }
.tp-root .tp-dot.occ{ background:var(--tp-occ); border-color:var(--tp-occ-border); }
.tp-root .tp-dot.sel{ background:var(--tp-violet); border-color:var(--tp-violet); }
.tp-root .tp-dot.mov{ background:#fff; border-style:dashed; border-color:var(--tp-muted); }

.tp-root .tp-seg{ display:inline-flex; background:var(--tp-field); border:1px solid var(--tp-border); border-radius:11px; padding:4px; gap:2px; }
.tp-root .tp-seg button{ border:none; background:transparent; cursor:pointer; font:600 13px 'Archivo',sans-serif; color:var(--tp-ink2); padding:6px 13px; border-radius:8px; transition:.15s; }
.tp-root .tp-seg button:hover{ color:var(--tp-ink); }
.tp-root .tp-seg button[aria-pressed="true"]{ background:#fff; color:var(--tp-violet-strong); box-shadow:var(--tp-shadow-sm); }

.tp-root .tp-body{ display:grid; grid-template-columns:minmax(0,1fr) 280px; }
.tp-root .tp-planside{ padding:14px 16px 16px; min-width:0; }
.tp-root .tp-sidebar{ border-left:1px solid var(--tp-border); background:var(--md-surface,#F7F7F7); padding:18px; display:flex; flex-direction:column; }

.tp-root .tp-rooms{ display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1.25fr); gap:14px; }
.tp-root .tp-rooms > *{ min-width:0; }
/* Titel und "x Tische · y frei" untereinander - in BEIDEN Raeumen gleich.
   Nebeneinander passte es nur im breiten Saal; im schmalen Gewoelbekeller
   brach die Zahl um, der Kopf wurde hoeher und der Plan begann tiefer. */
.tp-root .tp-room-head{ display:flex; flex-direction:column; align-items:flex-start;
  gap:1px; margin-bottom:8px; }
/* h2 statt h3: auf der Reservierung folgt der Plan direkt auf die h1 */
.tp-root .tp-room-head h2{ font-size:15px; font-weight:700; margin:0; color:var(--tp-violet);
  text-transform:none; letter-spacing:0; min-width:0; }
.tp-root .tp-meta{ font-size:12px; color:var(--tp-muted); }

.tp-root .tp-floorplan{ position:relative; width:100%; height:430px;
  background:radial-gradient(circle at 1px 1px,#E6E6E6 1.4px,transparent 0) 0 0/24px 24px,var(--md-background,#FFFFFF);
  border:1px solid var(--tp-border); border-radius:14px; overflow:hidden; }
.tp-root .tp-feat{ position:absolute; font:600 9.5px 'Archivo',sans-serif; letter-spacing:.07em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#aeb2c0; }
.tp-root .tp-feat.kamin{ top:0; left:30%; width:84px; height:22px; background:var(--tp-warm);
  border:1px solid var(--tp-warm-border); border-top:none; border-radius:0 0 11px 11px; color:var(--tp-ink2); }
.tp-root .tp-feat.kamin span{ font-size:9px; }
.tp-root .tp-feat.window{ left:0; right:0; top:0; height:5px; background:var(--md-primary,#D3C6A3); }

.tp-root .tp-table{ position:absolute; transform:translate(-50%,-50%); background:#fff; border:1.5px solid var(--tp-tableline);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  color:var(--tp-violet); font-weight:700; transition:transform .1s,box-shadow .12s,background .12s,border-color .12s; box-shadow:var(--tp-shadow-sm); }
.tp-root .tp-table .tnum{ font-size:13px; }
.tp-root .tp-table .tseat{ font-size:9px; font-weight:600; color:var(--tp-muted); margin-top:1px; }
.tp-root .tp-table.movable{ border-style:dashed; }
.tp-root .tp-table.round{ border-radius:50%; }
.tp-root .tp-table.oval{ border-radius:34%/18%; }
.tp-root .tp-table.square{ border-radius:10px; }
.tp-root .tp-table.rect{ border-radius:9px; }
.tp-root .tp-table.bar{ border-radius:9px; background:#f2e2de; }
.tp-root .tp-table.bar .tnum{ font-size:12px; letter-spacing:.04em; }
.tp-root .tp-table.bar.vert .tnum{ writing-mode:vertical-rl; letter-spacing:.05em; }
.tp-root .tp-table.bar.vert .tseat{ writing-mode:vertical-rl; margin-top:0; margin-left:1px; }
.tp-root .tp-table:not(.occupied):not(.readonly):hover{ border-color:var(--tp-violet); background:var(--tp-violet-soft); transform:translate(-50%,-50%) scale(1.05); z-index:6; }
.tp-root .tp-table.occupied{ cursor:not-allowed; background:var(--tp-occ); border-color:var(--tp-occ-border); color:#b09a98; box-shadow:none; }
.tp-root .tp-table.occupied .tseat{ color:#bda9a6; }
.tp-root .tp-table.readonly{ cursor:default; }
.tp-root .tp-table.selected{ background:var(--tp-violet)!important; border-color:var(--tp-violet); color:#fff; box-shadow:0 6px 16px rgba(90,22,38,.34); z-index:7; }
.tp-root .tp-table.selected .tseat,.tp-root .tp-table.selected .tnum{ color:#fff; }
.tp-root .tp-chairs{ position:absolute; inset:0; pointer-events:none; }
.tp-root .tp-chairs i{ position:absolute; width:7px; height:7px; background:#fff; border:1.5px solid var(--tp-tableline); border-radius:2px; }
.tp-root .tp-table.occupied .tp-chairs i{ background:var(--tp-occ); border-color:var(--tp-occ-border); }
.tp-root .tp-table.selected .tp-chairs i{ background:#fff; border-color:#fff; }

.tp-root .tp-seclabel{ font:700 11px 'Archivo',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tp-ink2); margin:0 0 8px; } /* Beige auf Hell war 1,6:1 - zu blass (WCAG 1.4.3) */
.tp-root .tp-detailcard{ background:#fff; border:1px solid var(--tp-border); border-radius:14px; padding:15px; box-shadow:var(--tp-shadow-sm); }
.tp-root .tp-detailcard.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:22px 15px; color:var(--tp-muted); }
.tp-root .tp-detailcard.empty .ic{ width:36px; height:36px; border-radius:11px; border:1.5px dashed var(--tp-border2); display:flex; align-items:center; justify-content:center; color:var(--md-text-muted,rgba(17,17,17,.62)); font-size:20px; }
.tp-root .tp-detailcard.empty p{ margin:0; font-size:13px; line-height:1.5; }
.tp-root .tp-dc-top{ display:flex; align-items:center; gap:12px; }
.tp-root .tp-dc-badge{ min-width:54px; height:54px; padding:0 8px; border-radius:14px; background:var(--tp-violet-soft);
  border:1px solid var(--tp-violet-border); display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--tp-violet-strong); flex:none; }
.tp-root .tp-dc-badge .n{ font-size:22px; font-weight:700; line-height:1; }
.tp-root .tp-dc-badge .t{ font-size:8px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }
.tp-root .tp-dc-info .room{ font-size:15px; font-weight:700; }
.tp-root .tp-dc-info .seats{ font-size:13px; color:var(--tp-ink2); margin-top:2px; }
.tp-root .tp-dc-meta{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--tp-border); }
.tp-root .tp-tag{ font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:7px; background:var(--tp-field); color:var(--tp-ink2); border:1px solid var(--tp-border); }
.tp-root .tp-tag.free{ color:var(--tp-green); background:#eef3e6; border-color:#d4e0c4; }
.tp-root .tp-tag.occ{ color:#9a5a52; background:var(--tp-occ); border-color:var(--tp-occ-border); }

.tp-root .tp-listwrap{ margin-top:16px; flex:1; min-height:0; overflow:auto; max-height:300px; }
.tp-root .tp-ghead{ font:600 11px 'Archivo',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--tp-muted); padding:12px 4px 5px; }
.tp-root .tp-ghead:first-child{ padding-top:0; }
.tp-root .tp-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; font-size:14px; transition:.12s; border:1px solid transparent; }
.tp-root .tp-row:not(.occupied):not(.readonly):hover{ background:#fff; border-color:var(--tp-border); box-shadow:var(--tp-shadow-sm); }
.tp-root .tp-row.readonly{ cursor:default; }
.tp-root .tp-row:focus-visible{ outline:2px solid var(--md-text,#222); outline-offset:1px; }
.tp-root .tp-row .rnum{ font-weight:700; min-width:24px; color:var(--tp-ink); }
.tp-root .tp-row .rseat{ flex:1; color:var(--tp-ink2); font-size:13px; }
.tp-root .tp-row .rstat{ font-size:11px; font-weight:600; display:flex; align-items:center; gap:5px; color:var(--tp-green); }
.tp-root .tp-row .rstat::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--tp-green); }
.tp-root .tp-row.occupied{ cursor:not-allowed; }
.tp-root .tp-row.occupied .rnum,.tp-root .tp-row.occupied .rseat,.tp-root .tp-row.occupied .rstat{ color:var(--tp-muted); }
.tp-root .tp-row.occupied .rstat::before{ background:var(--md-outline,#E6E6E6); }
.tp-root .tp-row.selected{ background:var(--tp-violet-soft); border-color:var(--tp-violet-border); }
.tp-root .tp-row.selected .rnum{ color:var(--tp-violet-strong); }

/* Gast-Modus: passt nicht zur Personenzahl (zu gross / zu klein und fest).
   Blass statt ausgeblendet, damit der Raum als Ganzes erkennbar bleibt. */
.tp-root .tp-table.nofit{ opacity:.3; cursor:not-allowed; box-shadow:none; }
.tp-root .tp-table.nofit:hover{ transform:translate(-50%,-50%)!important; background:#fff!important; border-color:var(--tp-tableline)!important; }
.tp-root .tp-row.nofit{ cursor:not-allowed; }
.tp-root .tp-row.nofit:hover{ background:transparent!important; box-shadow:none!important; border-color:transparent!important; }
.tp-root .tp-row.nofit .rnum,.tp-root .tp-row.nofit .rseat,.tp-root .tp-row.nofit .rstat{ color:var(--tp-muted); }
.tp-root .tp-row.nofit .rstat::before{ background:var(--md-outline,#E6E6E6); }
.tp-root .tp-dc-hinweis{ margin:12px 0 0; padding:9px 11px; border-radius:9px; font-size:13px; line-height:1.45;
  background:#FFF4D6; color:#6B4E00; }
.tp-root .tp-dc-hinweis.ok{ background:#eef3e6; color:var(--tp-green); }

@media (max-width:1080px){
  .tp-root .tp-body{ grid-template-columns:1fr; }
  .tp-root .tp-sidebar{ border-left:none; border-top:1px solid var(--tp-border); background:#fff; }
}
@media (max-width:720px){
  .tp-root .tp-rooms{ grid-template-columns:1fr; }
  .tp-root .tp-floorplan{ height:400px; }
}