/* =====================================================================
   OCCUPO — MOTOR — plattegrond.css   (Premium blok 2: live plattegrond)
   Weergave-laag over dezelfde reserveringen als de lijst. Teal & Graphite
   tokens uit beheer.css.
   ===================================================================== */
.pg-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.pg-ztabs{display:flex;gap:6px;flex-wrap:wrap;}
.pg-ztab{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:7px 15px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.pg-ztab.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.pg-bezet{margin-left:auto;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 13px;box-shadow:var(--schaduw);font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;}
.pg-bezet b{font-weight:600;}
.pg-meter{width:90px;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;flex:none;}
.pg-meter i{display:block;height:100%;background:var(--accent);border-radius:999px;}

.pg-top-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pg-top-r .pg-bezet{margin-left:0;}
.pg-topknop{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:10px;padding:8px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.pg-topknop:hover{border-color:var(--accent);color:var(--accent);}
.pg-topknop b{color:var(--ink);}
.pg-scherm.pg-max{position:fixed;inset:0;z-index:60;background:var(--bg);padding:14px clamp(14px,3vw,24px);overflow:auto;}

.pg-werk{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;}
.pg-werk.rail-in{grid-template-columns:1fr;}
@media(max-width:840px){.pg-werk{grid-template-columns:1fr;}}
.pg-rail-in{margin-left:auto;border:none;background:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0 2px;}
.pg-rail-in:hover{color:var(--st-noshow);}

.pg-kaart{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--schaduw);}
.pg-zaal{position:relative;background:var(--surface-3);border:1px solid var(--border);border-radius:13px;
  background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:26px 26px;
  width:100%;aspect-ratio:16/10;min-height:340px;overflow:hidden;}

.pg-decor{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  text-align:center;padding:4px;pointer-events:none;}
.pg-decor.bar{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 6px,var(--surface) 6px,var(--surface) 12px);border:1px solid var(--border-strong);border-radius:10px;font-weight:600;}
.pg-decor.kassa{background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:9px;}
.pg-decor.deur{border:1px dashed var(--accent);border-radius:9px;color:var(--accent);font-weight:600;background:var(--surface);}

.pg-tafel{position:absolute;transform:translate(-50%,-50%);border:2px solid var(--border-strong);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;box-shadow:var(--schaduw);
  cursor:pointer;padding:4px;text-align:center;user-select:none;overflow:hidden;touch-action:none;transition:transform .12s,box-shadow .2s,border-color .15s;}
.pg-tafel:hover{transform:translate(-50%,-50%) scale(1.05);z-index:6;}
.pg-tafel.rond{border-radius:50%;width:82px;height:82px;}
.pg-tafel.vier{border-radius:12px;width:92px;height:66px;}
.pg-tafel.groot{border-radius:14px;width:112px;height:74px;}
.pg-num{font-weight:700;font-size:13px;line-height:1.15;}
.pg-naam{font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;}
.pg-meta{font-family:var(--mono);font-size:9px;color:var(--muted);line-height:1.2;}
.pg-cap{font-family:var(--mono);font-size:8.5px;color:var(--faint);}

.pg-tafel.vrij{border-style:dashed;}
.pg-tafel.vrij .pg-num{color:var(--muted);}
.pg-tafel.gereserveerd{background:rgba(201,119,42,.13);border-color:var(--st-aangevraagd);}
.pg-tafel.gereserveerd .pg-num{color:var(--st-aangevraagd);}
.pg-tafel.gereserveerd .pg-meta{color:var(--st-aangevraagd);}
.pg-tafel.bezet{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.pg-tafel.bezet .pg-meta{color:var(--accent-ink);opacity:.85;}
.pg-tafel.klaar{background:var(--surface-2);border-color:var(--border-strong);color:var(--muted);}
.pg-tafel.klaar .pg-meta{color:var(--faint);}
.pg-stip{position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--st-bevestigd);border:2px solid var(--surface);}
.pg-tafel.bezet .pg-stip{border-color:var(--accent);}

.pg-tafel.kiesbaar{border-style:dashed;border-color:var(--accent);animation:pgPols 1.4s ease-in-out infinite;}
.pg-tafel.gedimd{opacity:.4;}
.pg-tafel.aanrader::after{content:"\2605 aanrader";position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.04em;color:var(--accent-ink);background:var(--accent);padding:2px 7px;border-radius:999px;white-space:nowrap;box-shadow:var(--schaduw);z-index:8;}
@keyframes pgPols{0%,100%{box-shadow:0 0 0 0 rgba(23,120,106,.28);}50%{box-shadow:0 0 0 7px rgba(23,120,106,0);}}
@media (prefers-reduced-motion:reduce){.pg-tafel.kiesbaar{animation:none;}}

.pg-legenda{display:flex;flex-wrap:wrap;gap:13px;margin-top:12px;padding:0 4px;}
.pg-legenda span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);}
.pg-legenda i{width:14px;height:14px;border-radius:5px;border:2px solid var(--border-strong);flex:none;}
.pg-legenda i.gr{background:rgba(201,119,42,.16);border-color:var(--st-aangevraagd);}
.pg-legenda i.bz{background:var(--accent);border-color:var(--accent);}
.pg-legenda i.kl{background:var(--surface-2);border-color:var(--border-strong);}
.pg-legenda i.dot{border-radius:50%;background:var(--st-bevestigd);border-color:var(--st-bevestigd);width:11px;height:11px;}

.pg-rail{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--schaduw);padding:14px;}
.pg-rail-kop{display:flex;align-items:center;justify-content:space-between;font-family:var(--serif);font-size:16px;font-weight:500;margin-bottom:12px;}
.pg-rail-tel{font-family:var(--mono);font-size:11px;background:var(--surface-2);color:var(--muted);border-radius:999px;padding:2px 9px;}
.pg-rail-item{display:block;width:100%;text-align:left;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:9px;cursor:grab;background:var(--surface);font:inherit;touch-action:none;transition:border-color .15s,box-shadow .2s;}
.pg-rail-item:active{cursor:grabbing;}
.pg-rail-item:hover{border-color:var(--accent);box-shadow:var(--schaduw);}
.pg-rail-tijd{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600;display:block;}
.pg-rail-naam{font-size:15px;font-weight:600;display:block;margin:1px 0 2px;color:var(--ink);}
.pg-rail-meta{font-size:12.5px;color:var(--muted);display:block;}
.pg-rail-tip{font-size:11.5px;color:var(--faint);margin:8px 2px 0;line-height:1.4;}
.pg-rail-leeg{color:var(--faint);font-size:13px;text-align:center;padding:22px 8px;}
.pg-rail-hint{font-size:13px;color:var(--ink);line-height:1.5;background:var(--accent-soft);border:1px solid var(--accent);border-radius:11px;padding:11px 12px;}
.pg-annuleer{width:100%;margin-top:10px;}

.pg-det-badges{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.pg-det-rij{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;}
.pg-det-rij:last-of-type{border-bottom:none;}
.pg-det-rij span{color:var(--muted);} .pg-det-rij b{font-weight:600;text-align:right;}
.pg-det-opm{margin-top:10px;padding:10px 12px;background:var(--surface-2);border-radius:10px;font-size:13.5px;font-style:italic;color:var(--muted);}
.pg-det-acties{flex-wrap:wrap;gap:8px;}

/* Gastprofiel (Premium) in het detailvenster */
.gast-laden{margin-top:14px;font-size:12.5px;color:var(--faint);}
.gast-blok{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.gast-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.gast-titel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.gast-bezoek{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:3px 10px;}
.gast-nieuw{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border-strong);border-radius:999px;padding:3px 10px;}
.gast-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.gast-chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);border-radius:999px;padding:3px 6px 3px 11px;cursor:pointer;}
.gast-chip b{font-weight:400;font-size:15px;line-height:1;opacity:.7;}
.gast-chip:hover{filter:brightness(.97);}
.gast-geen{font-size:12.5px;color:var(--faint);}
.gast-quicks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.gast-quick{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface);border:1px dashed var(--border-strong);border-radius:999px;padding:4px 11px;cursor:pointer;}
.gast-quick:hover{border-color:var(--accent);color:var(--accent);}
.gast-lab{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px;}
.gast-input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);}
.gast-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.gast-opslaan{width:100%;margin-top:12px;}
.gast-kop-r{display:flex;align-items:center;gap:8px;}
.gast-status{font-size:11px;font-weight:600;color:var(--st-bevestigd);}
.gast-status.fout{color:var(--st-noshow);}
.gast-risico{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent-ink);background:var(--st-noshow);border-radius:999px;padding:3px 9px;white-space:nowrap;}

/* CSV-export modal */
.exp-keuze{display:flex;flex-direction:column;gap:8px;}
.exp-keuze .knop{width:100%;justify-content:center;}

/* Anti-no-show: risico-markers */
.risico-vlag{color:var(--st-noshow);font-size:13px;margin-left:6px;vertical-align:middle;}
.pg-risico{position:absolute;top:4px;left:6px;font-size:11px;line-height:1;color:var(--st-noshow);}
.pg-tafel.bezet .pg-risico{color:#fff;}

/* Anti-no-show: hint bij het filter "Niet bevestigd" */
.onbev-hint{background:var(--surface);border:1px solid var(--st-aangevraagd);border-left:3px solid var(--st-aangevraagd);border-radius:10px;padding:11px 14px;font-size:13.5px;color:var(--muted);margin-bottom:14px;line-height:1.5;}
.onbev-hint b{color:var(--ink);}
.gast-tip{font-size:11.5px;color:var(--faint);margin:12px 0 0;line-height:1.4;}

/* Zoekbalk (verstopt) */
.zoek{display:inline-flex;align-items:center;gap:6px;}
.zoek-knop{padding:8px 10px;display:inline-flex;align-items:center;}
.zoek-input{width:170px;padding:8px 11px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);}
.zoek-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
@media(max-width:560px){.zoek-input{width:120px;}}

/* Toast (nieuwe reservering) */
.db-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);background:var(--ink);color:var(--bg);
  padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--schaduw);opacity:0;transition:.3s;z-index:70;pointer-events:none;max-width:90vw;display:flex;align-items:center;gap:9px;}
.db-toast.in{transform:translateX(-50%) translateY(0);opacity:1;}
.db-toast .pip{width:8px;height:8px;border-radius:50%;background:var(--st-bevestigd);flex:none;}

/* Inzichten (Premium) */
.inz-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;}
@media(max-width:820px){.inz-grid{grid-template-columns:1fr;}}
.inz-kaart{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;box-shadow:var(--schaduw);}
.inz-kaart h3{font-family:var(--serif);font-weight:500;font-size:16px;margin-bottom:16px;}
.inz-feit-kaart{margin-top:16px;}
.inz-chart{display:flex;align-items:flex-end;gap:8px;height:170px;overflow-x:auto;padding-top:8px;}
.inz-bar{flex:1;min-width:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.inz-bar-vul{width:100%;max-width:34px;background:var(--accent);border-radius:6px 6px 0 0;min-height:2px;}
.inz-bar-vul.acc2{background:var(--st-tafel);}
.inz-bar-lab{font-family:var(--mono);font-size:10px;color:var(--muted);}
.inz-bar-val{font-family:var(--mono);font-size:10px;color:var(--faint);}
.inz-feit{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0;}
.inz-feit b{color:var(--ink);}

/* Upsell (Basis ziet dit i.p.v. de plattegrond) */
.upsell{max-width:520px;margin:26px auto;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:clamp(28px,5vw,44px);box-shadow:var(--schaduw);}
.upsell-badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:4px 13px;}
.upsell h2{font-size:clamp(22px,3.5vw,28px);margin:16px 0 10px;}
.upsell p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 auto;max-width:42ch;}
.upsell-prijs{margin:20px 0 6px;font-size:15px;color:var(--ink);} .upsell-prijs b{font-family:var(--serif);font-size:26px;}
.upsell .knop{margin-top:14px;}
.upsell-klein{font-size:12.5px;color:var(--faint);margin-top:16px;}
/* Premium-tab (Basis): apart rechts met label */
.tab-premium{margin-left:auto;}
.tab-premlabel{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:middle;}
/* Upsell met voorbeeld-plattegrond */
.upsell-wrap{max-width:600px;margin:22px auto;}
.upsell-wrap .upsell{margin:0;max-width:none;border-radius:0 0 16px 16px;}
.upsell-preview{position:relative;height:260px;background:var(--surface-3);border:1px solid var(--border);border-bottom:none;border-radius:16px 16px 0 0;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:24px 24px;overflow:hidden;}
.upsell-preview-label{position:absolute;top:10px;left:12px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 10px;}
.upsell-preview .pg-tafel{cursor:default;box-shadow:none;}
.upsell-preview .pg-tafel:hover{transform:translate(-50%,-50%);}
.upsell-preview .pg-tafel.rond{width:58px;height:58px;}
.upsell-preview .pg-tafel.vier{width:66px;height:48px;}
.upsell-preview .pg-tafel.groot{width:78px;height:52px;}
.upsell-preview .pg-num{font-size:11px;}
.upsell-preview .pg-naam{font-size:9px;}
.upsell-preview .pg-meta{font-size:7.5px;}

/* Slepen */
.pg-ghost{position:fixed;transform:translate(-50%,-130%);z-index:70;pointer-events:none;background:var(--accent);color:var(--accent-ink);
  border-radius:10px;padding:6px 12px;font-family:var(--sans);font-size:12.5px;font-weight:600;box-shadow:var(--schaduw);white-space:nowrap;}
.pg-tafel.droptarget{outline:3px solid var(--accent);outline-offset:3px;border-color:var(--accent);}
.pg-rail.droptarget{outline:2px dashed var(--accent);outline-offset:3px;}