/* ==========================================================================
   Plánek stolů (VRPlan) – Coworking V Radnici, verze 2 (paleta bez žluté)
   Vše je pod .vr-plan; barvy z tokenů BRIEF §5 v2 s výchozími hodnotami.
   Volný stůl = modrá (židle světle modrá), vybraný = ink, obsazený = šedá linka. Fokus = --vr-focus.
   Přebarvení sekce: --vr-plan-floor, --vr-plan-ink, --vr-plan-wall, --vr-plan-max-h.
   ========================================================================== */

.vr-plan {
  --vrp-blue: var(--vr-blue, #004FA3);
  --vrp-blue-dark: var(--vr-blue-dark, #003C80);
  --vrp-night: var(--vr-ink, #182A40);
  --vrp-slate: #8A94A3;
  --vrp-muted: var(--vr-muted, #596575);
  --vrp-sky: var(--vr-sky, #B7D6F6);
  --vrp-desk-line: #8A94A3;      /* obrys obsazeného stolu: 3,1 : 1 na bílé (WCAG 1.4.11) */
  --vrp-floor: var(--vr-plan-floor, #FFFFFF);
  --vrp-ink: var(--vr-plan-ink, var(--vrp-night));
  --vrp-wall: var(--vr-plan-wall, var(--vrp-night));
  --vrp-line: #C5CFDA;
  --vrp-fill: #EEF1F5;
  --vrp-glass: #C7E1FF;
  --vrp-moss: #6C8443;
  --vrp-font: var(--vr-font, "Manrope", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif);

  position: relative;
  color: var(--vrp-ink);
  font-family: var(--vrp-font);
  -webkit-tap-highlight-color: transparent;
}

.vr-plan *,
.vr-plan *::before,
.vr-plan *::after { box-sizing: border-box; }

.vr-plan__stage { position: relative; }

.vr-plan__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  max-height: var(--vr-plan-max-h, 88svh);
  margin: 0 auto;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- místnost ---------- */
.vr-plan__floor { fill: var(--vrp-floor); }

.vr-plan__walls {
  fill: none;
  stroke: var(--vrp-wall);
  stroke-width: 6;
  stroke-linejoin: miter;
}

.vr-plan__zone-shape { fill: var(--vrp-fill); }
.vr-plan__zone--meeting .vr-plan__zone-shape { fill: #EEF3FA; }
.vr-plan__zone--lounge .vr-plan__zone-shape { fill: #DDE3EA; stroke: var(--vrp-line); stroke-width: 2; }
.vr-plan__zone--kitchen .vr-plan__zone-shape,
.vr-plan__zone--print .vr-plan__zone-shape { fill: #FFFFFF; stroke: var(--vrp-line); stroke-width: 2; }

.vr-plan__decor { fill: #FFFFFF; stroke: var(--vrp-line); stroke-width: 2; }
.vr-plan__zone--meeting .vr-plan__decor { fill: #FFFFFF; }
.vr-plan__zone--print .vr-plan__decor { fill: #DDE3EA; stroke: #A7B1BD; }
.vr-plan__decor--tv { fill: var(--vrp-night); stroke: none; }
.vr-plan__decor--water { fill: #D8E7F6; stroke: #8FB0DA; }
.vr-plan__decor--device { fill: #DDE3EA; stroke: #A7B1BD; }

.vr-plan__moss-a { fill: var(--vrp-moss); }
.vr-plan__moss-b { fill: #86A057; }
.vr-plan__moss-c { fill: #566D33; }

.vr-plan__glass { stroke: #9DB9DE; stroke-width: 6; stroke-linecap: butt; }
.vr-plan__glass-core { stroke: #FFFFFF; stroke-width: 1.5; }

.vr-plan__win-cut { stroke: var(--vrp-floor); stroke-width: 14; }
.vr-plan__win-glass { stroke: var(--vrp-glass); stroke-width: 10; }
.vr-plan__win-line { stroke: var(--vrp-blue); stroke-width: 2; }

.vr-plan__column { fill: var(--vrp-wall); }

.vr-plan__door-gap { fill: var(--vrp-floor); }
.vr-plan__door-leaf { fill: none; stroke: var(--vrp-wall); stroke-width: 3; stroke-linecap: square; }
.vr-plan__door-swing { fill: none; stroke: var(--vrp-slate); stroke-width: 2; stroke-dasharray: 6 6; }

.vr-plan__approach { fill: none; stroke: var(--vrp-blue); stroke-width: 3; stroke-dasharray: 10 8; }
.vr-plan__arrowhead { fill: var(--vrp-blue); }

.vr-plan__zone-label,
.vr-plan__edge-label {
  font-family: var(--vrp-font);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.vr-plan__zone-label { fill: var(--vrp-muted); font-size: var(--vrp-fs-zone, 24px); font-weight: 600; letter-spacing: var(--vrp-ls-zone, .12em); }
.vr-plan__edge-label { fill: var(--vrp-blue); font-size: var(--vrp-fs-edge, 26px); font-weight: 700; }

/* ---------- stoly ---------- */
.vr-desk { outline: none; }
.vr-desk,
.vr-desk__body { transform-box: fill-box; transform-origin: 50% 50%; }

.vr-desk__hit { fill: transparent; }
.vr-desk__top { fill: var(--vrp-fill); stroke: var(--vrp-desk-line); stroke-width: 2; }
.vr-desk__chair { fill: #D5DBE3; }
.vr-desk__num {
  fill: var(--vrp-muted);
  font-family: var(--vrp-font);
  font-weight: 700;
  font-size: var(--vrp-fs-num, 34px);
  pointer-events: none;
}
.vr-desk__focus {
  fill: none;
  stroke: var(--vr-focus, #B65A00);   /* stejný fokus jako na celém webu */
  stroke-width: 5;
  opacity: 0;
}

.vr-desk.is-free { cursor: pointer; }
.vr-desk.is-free .vr-desk__top { fill: var(--vrp-blue); stroke: var(--vrp-blue-dark); stroke-width: 3; }
.vr-desk.is-free .vr-desk__chair { fill: var(--vrp-sky); }   /* ink jen pro vybraný stůl */
.vr-desk.is-free .vr-desk__num { fill: #FFFFFF; }
.vr-desk__halo {
  fill: rgba(0, 79, 163, 0.1);
  stroke: var(--vrp-blue);
  stroke-width: 3;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.vr-desk__tag-bg { fill: var(--vrp-blue); }
.vr-desk__tag-text {
  fill: #FFFFFF;
  font-family: var(--vrp-font);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: var(--vrp-fs-tag, 20px);
}

.vr-desk__check { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.vr-desk__check-bg { fill: #FFFFFF; stroke: var(--vrp-night); stroke-width: 3; }
.vr-desk__check-mark { fill: none; stroke: var(--vrp-night); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.vr-desk.is-free .vr-desk__body { transition: transform .25s cubic-bezier(.2, .8, .3, 1); }
.vr-desk.is-free .vr-desk__top { transition: fill .2s ease, stroke .2s ease; }
.vr-desk.is-free:hover .vr-desk__body { transform: translateY(-4px); }
.vr-desk.is-free:hover .vr-desk__top { fill: var(--vrp-blue-dark); }

.vr-desk:focus .vr-desk__focus { opacity: 1; }
.vr-desk:focus:not(:focus-visible) .vr-desk__focus { opacity: 0; }

.vr-desk.is-selected .vr-desk__top,
.vr-desk.is-selected:hover .vr-desk__top { fill: var(--vrp-night); stroke: var(--vrp-night); }
.vr-desk.is-selected .vr-desk__num { fill: #FFFFFF; }
.vr-desk.is-selected .vr-desk__chair { fill: var(--vrp-night); }
.vr-desk.is-selected .vr-desk__halo { stroke: var(--vrp-night); fill: rgba(24, 42, 64, 0.08); }
.vr-desk__tag { pointer-events: none; }
.vr-desk__tag.is-selected .vr-desk__tag-bg { fill: var(--vrp-night); }
.vr-desk__tag.is-selected .vr-desk__tag-text { fill: #FFFFFF; }
.vr-desk.is-selected .vr-desk__check { opacity: 1; }

/* ---------- tooltip ---------- */
.vr-plan__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  max-width: 15rem;
  padding: 0.5rem 0.75rem 0.55rem;
  border-radius: 0;
  background: var(--vrp-night);
  color: #FFFFFF;
  font: 500 0.875rem/1.35 var(--vrp-font);
  box-shadow: 0 8px 24px -8px rgba(24, 42, 64, 0.45);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
/* na zobrazený tooltip lze najet myší (WCAG 1.4.13 – hoverable), skrývá se s krátkou prodlevou */
.vr-plan__tip.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .15s ease; }
.vr-plan__tip::after {
  content: "";
  position: absolute;
  left: var(--vrp-tip-x, 50%);
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--vrp-night);
}
.vr-plan__tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--vrp-night); }
.vr-plan__tip-title { display: block; font-weight: 700; }
.vr-plan__tip-text { display: block; opacity: 0.88; }
.vr-plan__tip.is-free .vr-plan__tip-text { color: var(--vrp-sky); opacity: 1; }
.vr-plan__tip-text:empty { display: none; }

/* ---------- legenda ---------- */
.vr-plan__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.vr-plan__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vr-plan__key { display: inline-flex; align-items: center; gap: 0.5rem; }
.vr-plan__swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 0;
  background: var(--vrp-fill);
  border: 2px solid var(--vrp-line);
}
.vr-plan__swatch { border-color: var(--vrp-desk-line); }
.vr-plan__key--free .vr-plan__swatch { background: var(--vrp-blue); border-color: var(--vrp-blue-dark); }
.vr-plan__key--selected .vr-plan__swatch { background: var(--vrp-night); border-color: var(--vrp-night); }
.vr-plan__count {
  min-width: 1.5em;
  padding: 0 0.4em;
  border-radius: 2px;
  background: rgba(24, 42, 64, 0.08);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.vr-plan__note,
.vr-plan__full { margin: 0; color: var(--vrp-muted); font-size: 0.8125rem; }
.vr-plan__full { flex-basis: 100%; color: var(--vrp-ink); font-size: 0.9375rem; font-weight: 600; }

.vr-plan__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- nástup (jen když JS přidá .is-armed) ---------- */
.vr-plan.is-armed:not(.is-inview) .vr-plan__floor,
.vr-plan.is-armed:not(.is-inview) .vr-plan__zone,
.vr-plan.is-armed:not(.is-inview) .vr-plan__fixtures,
.vr-plan.is-armed:not(.is-inview) .vr-plan__labels,
.vr-plan.is-armed:not(.is-inview) .vr-plan__tags,
.vr-plan.is-armed:not(.is-inview) .vr-desk { opacity: 0; }
.vr-plan.is-armed:not(.is-drawn) .vr-plan__walls { stroke-dasharray: 1; stroke-dashoffset: 1; }

.vr-plan.is-armed.is-inview:not(.is-drawn) .vr-plan__walls { animation: vrp-draw 1.2s cubic-bezier(.55, .05, .25, 1) both; }
.vr-plan.is-armed.is-inview .vr-plan__floor { animation: vrp-fade .6s .1s both; }
.vr-plan.is-armed.is-inview .vr-plan__zone { animation: vrp-fade .6s .3s both; }
.vr-plan.is-armed.is-inview .vr-plan__fixtures { animation: vrp-fade .5s .4s both; }
.vr-plan.is-armed.is-inview .vr-plan__labels { animation: vrp-fade .6s .5s both; }
/* --i: volné stoly mají nejnižší pořadí (plan.js), takže naskočí hned jako první */
.vr-plan.is-armed.is-inview .vr-desk {
  animation: vrp-pop .55s cubic-bezier(.2, .8, .25, 1.2) both;
  animation-delay: calc(.2s + var(--i, 0) * 40ms);
}
.vr-plan.is-armed.is-inview .vr-plan__tags { animation: vrp-fade .4s .45s both; }
.vr-plan.is-inview .vr-desk.is-free .vr-desk__halo { animation: vrp-pulse 2.4s ease-out .9s infinite; }
.vr-plan.is-paused .vr-desk__halo { animation-play-state: paused; }
.vr-desk__body.is-bump { animation: vrp-bump .45s cubic-bezier(.3, 1.4, .5, 1) both; }

@keyframes vrp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vrp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vrp-pop {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes vrp-pulse {
  0% { opacity: .75; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.22); }
  100% { opacity: 0; transform: scale(1.22); }
}
@keyframes vrp-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---------- omezený pohyb ---------- */
@media (prefers-reduced-motion: reduce) {
  .vr-plan *,
  .vr-plan *::before,
  .vr-plan *::after { animation: none !important; transition: none !important; }
  .vr-plan .vr-plan__floor,
  .vr-plan .vr-plan__zone,
  .vr-plan .vr-plan__fixtures,
  .vr-plan .vr-plan__labels,
  .vr-plan .vr-plan__tags,
  .vr-plan .vr-desk { opacity: 1 !important; }
  .vr-plan .vr-plan__walls { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .vr-plan .vr-desk.is-free:hover .vr-desk__body { transform: none; }
}
html.vr-reduce-motion .vr-plan *,
html.vr-reduce-motion .vr-plan *::before,
html.vr-reduce-motion .vr-plan *::after { animation: none !important; transition: none !important; }
html.vr-reduce-motion .vr-plan .vr-plan__floor,
html.vr-reduce-motion .vr-plan .vr-plan__zone,
html.vr-reduce-motion .vr-plan .vr-plan__fixtures,
html.vr-reduce-motion .vr-plan .vr-plan__labels,
html.vr-reduce-motion .vr-plan .vr-plan__tags,
html.vr-reduce-motion .vr-plan .vr-desk { opacity: 1 !important; }
html.vr-reduce-motion .vr-plan .vr-plan__walls { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
html.vr-reduce-motion .vr-plan .vr-desk.is-free:hover .vr-desk__body { transform: none; }

@media print {
  .vr-plan .vr-plan__floor,
  .vr-plan .vr-plan__zone,
  .vr-plan .vr-plan__fixtures,
  .vr-plan .vr-plan__labels,
  .vr-plan .vr-plan__tags,
  .vr-plan .vr-desk { opacity: 1 !important; animation: none !important; }
  .vr-plan .vr-plan__walls { stroke-dasharray: none !important; animation: none !important; }
  .vr-plan__tip { display: none; }
}