/* ═══════════════════════════════════════════════════════════
   Grafischer Tischplan (Components/TableLayoutView)
   docs/tischplan_grafisch_konzept_todo.md, GT11/GT12
   Farben kommen über Variablen vom umgebenden Element; ohne sie
   gelten die MudBlazor-Farben (Office). Die Kasse setzt eigene
   Werte für hell und dunkel in ihrer app.css.
     --tlv-floor         Zeichenfläche
     --tlv-table-bg      Grund eines Tisches (unter der Bereichsfarbe)
     --tlv-table-border  Rand eines Tisches
     --tlv-text          Tischname und Texte ohne eigene Farbe
     --tlv-shape         Formen ohne eigene Farbe
     --tlv-selected      gewählter Tisch
     --tlv-occupied      Symbol „belegt“
     --tlv-ready         „abholbereit“ (Rückkanal Küche)
     --tlv-reserved      Reservierung am Tisch (tischinfo_konzept, TI5/TI6)
     --tlv-reserved-on   Schrift auf der gefüllten Reservierungs-Plakette (bald/fällig)
     --tlv-bg-filter     Filter auf dem Grundriss (dunkel: abdunkeln)
   ═══════════════════════════════════════════════════════════ */

.tlv {
    --tlv-floor-eff: var(--tlv-floor, var(--mud-palette-surface, #ffffff));
    --tlv-table-bg-eff: var(--tlv-table-bg, var(--mud-palette-background, #f5f5f5));
    --tlv-table-border-eff: var(--tlv-table-border, var(--mud-palette-lines-inputs, rgba(0, 0, 0, 0.28)));
    --tlv-text-eff: var(--tlv-text, var(--mud-palette-text-primary, #1a1a1a));
    --tlv-shape-eff: var(--tlv-shape, #8a8f98);
    --tlv-selected-eff: var(--tlv-selected, var(--mud-palette-primary, #1e3a8a));
    --tlv-occupied-eff: var(--tlv-occupied, var(--mud-palette-secondary, #c49032));
    --tlv-ready-eff: var(--tlv-ready, #1a9a5b);
    --tlv-reserved-eff: var(--tlv-reserved, #6a3fb5);
    --tlv-reserved-on-eff: var(--tlv-reserved-on, #ffffff);

    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    font-family: inherit;
}

.tlv-floor {
    fill: var(--tlv-floor-eff);
}

.tlv-bg {
    filter: var(--tlv-bg-filter, none);
    pointer-events: none;
}

.tlv-grid-line {
    fill: none;
    stroke: var(--tlv-table-border-eff);
    stroke-width: 0.6;
    opacity: 0.45;
}

/* ── Tische ── */
.tlv-table {
    cursor: pointer;
}

.tlv-table-base {
    fill: var(--tlv-table-bg-eff);
    stroke: var(--tlv-table-border-eff);
    stroke-width: 2;
}

/* Bereichsfarbe wie im Raster (TableVisuals: rund 18 %) */
.tlv-table-tint {
    fill: transparent;
    fill-opacity: 0.22;
    pointer-events: none;
}

.tlv:not(.tlv-editable) .tlv-table:active .tlv-table-base {
    fill-opacity: 0.7;
}

/* Reservierung bald / fällig (TI6) – Abholbereit und Auswahl liegen darüber */
.tlv-table.res-soon .tlv-table-base {
    stroke: var(--tlv-reserved-eff);
    stroke-width: 5;
}

.tlv-table.res-due .tlv-table-base {
    stroke: var(--tlv-reserved-eff);
    stroke-width: 7;
    stroke-dasharray: 14 6;
}

.tlv-table.ready .tlv-table-base {
    stroke: var(--tlv-ready-eff);
    stroke-width: 6;
}

/* Der gewählte Tisch bleibt erkennbar, auch wenn dort etwas am Pass steht. */
.tlv-table.selected .tlv-table-base {
    stroke: var(--tlv-selected-eff);
    stroke-width: 6;
}

.tlv-table-name {
    fill: var(--tlv-text-eff);
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.tlv-table-seats {
    fill: var(--tlv-text-eff);
    opacity: 0.75;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Reservierung als Plakette: Rahmen in der Reservierungsfarbe, fällig/bald gefüllt */
.tlv-res-pill {
    fill: var(--tlv-floor-eff);
    stroke: var(--tlv-reserved-eff);
    stroke-width: 1.5;
}

.tlv-table-res {
    fill: var(--tlv-reserved-eff);
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.tlv-table-label.res-soon .tlv-res-pill,
.tlv-table-label.res-due .tlv-res-pill {
    fill: var(--tlv-reserved-eff);
}

.tlv-table-label.res-soon .tlv-table-res,
.tlv-table-label.res-due .tlv-table-res {
    fill: var(--tlv-reserved-on-eff);
}

.tlv-icon {
    overflow: visible;
}

.tlv-icon-occupied {
    fill: var(--tlv-occupied-eff);
}

.tlv-icon-ready {
    fill: var(--tlv-ready-eff);
}

/* ── Formen ── */
.tlv-shape {
    fill: var(--tlv-shape-eff);
    stroke: var(--tlv-shape-eff);
    fill-opacity: 0.35; /* Vorgabe; eine eingestellte Deckkraft (TI3) setzt die Komponente inline */
    stroke-width: 3;
    pointer-events: none;
}

.tlv-line {
    stroke: var(--tlv-shape-eff);
    stroke-linecap: round;
    pointer-events: none;
}

.tlv-text-box {
    fill: transparent;
    pointer-events: none;
}

.tlv-text {
    fill: var(--tlv-text-eff);
    text-anchor: middle;
    dominant-baseline: central;
    font-weight: 600;
    pointer-events: none;
}

/* ── Editor: Formen sind greifbar, Tische ohne Druck-Effekt ── */
.tlv-editable .tlv-shape,
.tlv-editable .tlv-line,
.tlv-editable .tlv-text-box {
    pointer-events: all;
    cursor: move;
}

.tlv-editable .tlv-line {
    pointer-events: stroke;
}

.tlv-editable .tlv-table {
    cursor: move;
}