/* Plattegrond (2 sep 2026, docs/superpowers/specs/2026-09-02-plattegrond-
   design.md). Eén stylesheet voor beide gebruikers van het raster:
   - Pages/Reserveringen/Components/ZonePlattegrondEditor.razor (slepen,
     selectie, bewerken) en
   - Pages/Reserveringen/ReserveringenOverzicht.razor (weergave "Plattegrond",
     alleen-lezen met statuskleuren).
   Een eigen bestand i.p.v. twee inline <style>-blokken: de tafelblokken
   moeten er in de editor en in het overzicht exact hetzelfde uitzien, en een
   tweede kopie van deze regels zou precies daar uiteenlopen.

   Alle kleuren via de bestaande thematokens (--app-*), dus donkere modus
   volgt vanzelf; de statustinten zijn dezelfde -soft/-rand-combinatie als
   .cmp-status--* in app.css (zelfde statuskleuren als de lijst). */

.pg-wrap {
    max-width: 100%;
    overflow: auto;
    padding-bottom: .25rem;
}

/* Het raster zelf: vaste celmaat (CSS-variabele gezet door de component,
   --pg-cel), rasterlijnen als achtergrond zodat er geen N×M lege cellen in
   de DOM hoeven. touch-action: none laat een vinger een tafel slepen i.p.v.
   de pagina scrollen; user-select: none voorkomt tekstselectie tijdens het
   slepen (er is geen JS die preventDefault doet). */
.pg-canvas {
    position: relative;
    box-sizing: content-box;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-bg);
    background-image:
        linear-gradient(to right, var(--app-border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--app-border) 1px, transparent 1px);
    background-size: var(--pg-cel) var(--pg-cel);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.pg-tafel {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    padding: .125rem;
    border: 2px solid var(--app-primary);
    border-radius: .375rem;
    background-color: var(--app-surface);
    color: var(--app-text-primary);
    font-size: .6875rem;
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
    cursor: grab;
    outline: none;
}

.pg-tafel--rond {
    border-radius: 50%;
}

.pg-tafel__naam {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-tafel__meta {
    color: var(--app-text-secondary);
    font-size: .625rem;
}

/* --- Editor-staten --- */

.pg-tafel--sleept {
    cursor: grabbing;
    opacity: .85;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    z-index: 2;
}

.pg-tafel--geselecteerd,
.pg-tafel:focus-visible {
    box-shadow: 0 0 0 3px var(--app-primary-soft, rgba(37, 99, 235, .25));
    z-index: 1;
}

.pg-tafel--fout {
    border-color: var(--app-danger);
    background-color: var(--app-danger-soft);
}

/* --- Overzicht-staten (zelfde kleuren als .cmp-status--*) --- */

.pg-tafel--vrij {
    border-color: var(--app-border);
    cursor: default;
}

.pg-tafel--gereserveerd {
    border-color: var(--app-success);
    background-color: var(--app-success-soft);
    cursor: pointer;
}

.pg-tafel--aangekomen {
    border-color: var(--app-info);
    background-color: var(--app-info-soft);
    cursor: pointer;
}

.pg-tafel--geblokkeerd {
    border-color: var(--app-danger);
    background-color: var(--app-danger-soft);
    cursor: default;
}

.pg-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .875rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.pg-legenda__vak {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    border-radius: .25rem;
    border: 2px solid var(--app-border);
    vertical-align: -.125rem;
    margin-right: .25rem;
    background-color: var(--app-surface);
}

/* --- Werkbalk + bakje "Nog niet geplaatst" --- */

.pg-werkbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.pg-bakje {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .625rem;
    border: 1px dashed var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-bg);
}

.pg-bakje__tafel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    border: 1px solid var(--app-border);
    border-radius: .375rem;
    background-color: var(--app-surface);
    font-size: .75rem;
    color: var(--app-text-primary);
}

.pg-fouten {
    margin: 0;
    padding: .625rem .75rem .625rem 1.5rem;
    border: 1px solid var(--app-danger);
    border-radius: .5rem;
    background-color: var(--app-danger-soft);
    font-size: .8125rem;
    color: var(--app-text-primary);
}

.pg-dirty {
    font-size: .6875rem;
    font-weight: 600;
    padding: .125rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--app-warning);
    background-color: var(--app-warning-soft);
    color: var(--app-text-primary);
}