/* Plánik stolov — samostatne, aby sa dal ukázať aj v administrácii bez štýlov webu. */

.planik {
    --pl-papier: #ffffff;
    --pl-podklad: #f2f1ee;
    --pl-atrament: #121212;
    --pl-sede: #5d5d58;
    --pl-ciara: #dedcd6;
    --pl-cervena: #9a141b;
    --pl-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
    --pl-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}
.planik svg { width: 100%; max-width: 46rem; height: auto; display: block; }
.planik__obrys { fill: none; stroke: var(--pl-atrament); stroke-width: 8; stroke-linejoin: round; }
.planik__podlaha { fill: var(--pl-podklad); stroke: var(--pl-podklad); stroke-width: 2; }
.planik__stena { fill: var(--pl-atrament); }
.planik__dvere { fill: var(--pl-podklad); }
.planik__wc { fill: var(--pl-papier); stroke: var(--pl-atrament); stroke-width: 3; }
.planik__schody { fill: var(--pl-papier); stroke: var(--pl-atrament); stroke-width: 3; }
.planik__stupen { stroke: var(--pl-sede); stroke-width: 2; }
.planik__nabytok { fill: #e4e1d9; stroke: var(--pl-sede); stroke-width: 2; }
.planik__bar { fill: var(--pl-atrament); }
.planik__text { font: 700 15px var(--pl-text); fill: var(--pl-sede); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.06em; text-transform: uppercase; }
.planik__text--svetly { fill: #f4f3ef; font-size: 22px; font-family: var(--pl-display); }
.planik__doska { fill: var(--pl-papier); stroke: var(--pl-atrament); stroke-width: 3; }
.planik__stolicka { fill: var(--pl-papier); stroke: var(--pl-sede); stroke-width: 2; }
.planik__cislo { font: 800 26px var(--pl-display); fill: var(--pl-atrament); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.planik__stol.je-volny .planik__doska { stroke: var(--pl-cervena); stroke-width: 4; }
.planik__stol.je-rezervovany .planik__doska, .planik__stol.je-malo_miest .planik__doska { fill: var(--pl-ciara); stroke: var(--pl-sede); stroke-dasharray: 6 4; }
.planik__stol.je-rezervovany .planik__cislo, .planik__stol.je-malo_miest .planik__cislo { fill: var(--pl-sede); }
.planik__stol.je-klikatelny { cursor: pointer; }
.planik__stol.je-klikatelny:hover .planik__doska { fill: #f7e3e4; }
.planik__stol.je-vybrany .planik__doska { fill: var(--pl-cervena); }
.planik__stol.je-vybrany .planik__cislo { fill: var(--pl-papier); }
.planik__legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; font-size: 0.8125rem; color: var(--pl-sede); }
.legenda::before { content: ""; display: inline-block; width: 0.9rem; height: 0.9rem; margin-right: 0.4rem; vertical-align: -0.15rem; border-radius: 0.2rem; border: 2px solid var(--pl-cervena); background: var(--pl-papier); }
.legenda--rezervovany::before, .legenda--malo::before { border: 2px dashed var(--pl-sede); background: var(--pl-ciara); }
.planik__rada { color: var(--pl-atrament); font-weight: 600; }