/* =========================================================================
   27 Moments portaal: stijlen voor de module Tafelplan
   Eigen bestand per module zodat parallelle wijzigingen elkaar niet raken.

   Links de personen die nog geen plaats hebben, rechts de zaal op schaal
   als svg: de tafels in meter, de stoelen als bolletjes eromheen met de
   voornaam ernaast. De maten in pixels zet de module op de svg zelf (de
   schaal hangt af van de zaal en het scherm); hier staan alleen kleuren,
   lijnen en letters. Een svg kent geen z-index en geen hover op een
   groep, dus de nadruk tijdens het slepen loopt via klassen die de module
   zet (ts-doel, ts-stoel--gekozen).
   ========================================================================= */

/* ------------------------------- de kop -------------------------------- */

.ts-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ts-zaal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13.5px;
  color: #7c776f;
}
.ts-zaal strong { font-weight: 400; color: var(--m27-tekst); }
.ts-zaal__noot {
  font-size: 11px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
}

/* Het potlood: dezelfde vorm als in de gastenlijst, zodat "instellen zit
   achter een potlood" er in het hele portaal hetzelfde uitziet. */
.ts-potlood {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1.5px solid #e4dfd7;
  border-radius: 10px;
  background: #fff;
  color: var(--m27-paars);
  cursor: pointer;
  padding: 0;
}
.ts-potlood svg { width: 16px; height: 16px; }
.ts-potlood:hover { border-color: var(--m27-lila); }
.ts-potlood:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.ts-kopknoppen { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------- de plan-indeling --------------------------- */

.ts-plan {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--m27-space-m);
  align-items: start;
}

/* ------------------------ het paneel met namen ------------------------- */

.ts-paneel h3 { margin-bottom: 2px; }
.ts-paneelsub { margin-bottom: 10px; }
.ts-paneelleeg { margin: 6px 0 0; }
.ts-paneel .m27-btn { margin-top: 4px; }

/* Wie een naam vanaf een stoel terug naar de lijst sleept, ziet het hele
   paneel oplichten: dat is het doel. */
.ts-paneel.ts-doel { outline: 3px dashed var(--m27-paars); outline-offset: -3px; }

.ts-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.ts-zoek,
.ts-filter {
  width: 100%;
  min-width: 0;
  padding: 9px 16px;
  border: 1.5px solid #dad5cd;
  border-radius: var(--m27-radius-pill);
  font: inherit;
  font-weight: 300;
  font-size: 14px;
  background: #fff;
  color: var(--m27-tekst);
}
.ts-filter { padding-right: 32px; }
.ts-zoek:focus-visible,
.ts-filter:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.ts-hint { font-size: 12.5px; color: #8a857e; margin: 0 0 10px; }
.ts-geenzoek { margin: 10px 0 0; font-size: 12.5px; color: #8a857e; }

.ts-lijst {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding: 2px;
}

.ts-kaartje {
  /* pan-y: de lijst blijft op een telefoon gewoon verticaal scrollen; een
     zijwaartse beweging start het slepen. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 300;
  background: #fff;
  border: 1.5px solid #e4dfd7;
  border-radius: 12px;
  padding: 9px 12px;
  min-height: 44px;
  cursor: grab;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ts-kaartje:hover { border-color: var(--m27-lila); }
.ts-kaartje:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.ts-kaartje--gekozen {
  border-color: var(--m27-paars);
  background: rgba(194, 177, 215, 0.16);
}
.ts-kaartje--koppel { border-color: var(--m27-lila); background: rgba(194, 177, 215, 0.1); }

.ts-kaartje__naam { display: block; font-size: 14.5px; color: var(--m27-tekst); }
.ts-kaartje__meta {
  display: block;
  font-size: 12px;
  color: #8a857e;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Een gezelschap dat nog samen op de lijst staat: de kop is zelf een
   kaartje (samen verslepen), de leden staan ingesprongen eronder. */
.ts-groep {
  border: 1.5px solid #ece8e0;
  border-radius: 14px;
  padding: 4px;
  background: #faf8f4;
}
.ts-groep__leden { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px 10px; }
.ts-kaartje--groep { background: #fff; }

/* De spookkopie die tijdens het slepen onder de vinger hangt. Geen pointer
   events: elementFromPoint moet de stoel eronder zien, niet het spook. */
.ts-spook {
  position: fixed;
  z-index: 220;
  max-width: 220px;
  transform: translate(-50%, -140%);
  pointer-events: none;
  padding: 7px 14px;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-donkergroen);
  color: var(--m27-wit);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 12px 30px rgba(47, 33, 64, 0.3);
}

/* ------------------------------- het plan ------------------------------- */

.ts-vlaksub { margin-bottom: 10px; }

/* Wie er wacht op een stoel, bij het plan zelf. Op telefoon plakt deze balk
   bovenaan (zie het 900px-blok onderaan): daar staat het paneel boven het
   plan, dus is de hint daarin al uit beeld tegen dat je tikt. */
.ts-kiesbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--m27-lichtgroen);
  color: var(--m27-donkergroen);
  font-size: 13px;
}
.ts-kiesbalk__knoppen { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* De hoes scrolt zijwaarts wanneer de zaal breder is dan het scherm; in de
   hoogte groeit de pagina gewoon mee. */
.ts-vlakhoes {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--m27-radius-kaart);
  scrollbar-width: thin;
}

.ts-vlakuitleg { margin: 10px 0 0; font-size: 12.5px; }
.ts-vlakleeg { padding: 36px 20px; }
.ts-vlakleeg h3 { margin-bottom: 4px; }
.ts-vlakleeg p { margin: 0 0 16px; }

/* --- de svg --- */

/* touch-action none op het hele plan: anders kaapt de browser het slepen
   van een tafel om te scrollen, en op iOS is dat het einde van het gebaar.
   Scrollen met de vinger gaat via de achtergrond (de module schuift de
   hoes en de pagina zelf). */
.ts-svg {
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
}
.ts-svg--vv { width: 100%; height: auto; max-width: 200px; margin: 0 auto; touch-action: auto; }

.ts-zaalvlak { fill: #faf8f4; stroke: #dad5cd; stroke-width: 1.5; }
.ts-raster { fill: none; stroke: #ebe7df; stroke-width: 1; }

.ts-tafel { cursor: grab; }
.ts-tafel:focus { outline: none; }
.ts-tafel__vlak {
  fill: var(--m27-lichtgroen);
  stroke: rgba(90, 104, 80, 0.45);
  stroke-width: 1.5;
  transition: stroke 0.15s ease;
}
.ts-tafel:focus-visible > .ts-tafel__vlak { stroke: var(--m27-lila); stroke-width: 3; }
.ts-tafel__naam { font-size: 12px; fill: var(--m27-donkergroen); }
.ts-tafel__telling { font-size: 10.5px; fill: var(--m27-donkergroen); opacity: 0.8; }

/* Vol is zichtbaar, te vol is dringend. Geen van beide blokkeert iets. */
.ts-tafel--vol > .ts-tafel__vlak { stroke: var(--m27-paars); }
.ts-tafel--over > .ts-tafel__vlak { fill: #f3ded9; stroke: var(--m27-rood); }
.ts-tafel--over .ts-tafel__naam,
.ts-tafel--over .ts-tafel__telling { fill: var(--m27-rood); }

.ts-tafel--sleept { cursor: grabbing; }
/* Het doelwit tijdens het slepen van een naam: de hele tafel. */
.ts-tafel.ts-doel > .ts-tafel__vlak { stroke: var(--m27-paars); stroke-width: 3; stroke-dasharray: 5 3; }

.ts-stoel { cursor: pointer; }
.ts-stoel:focus { outline: none; }
.ts-stoel circle {
  fill: #fff;
  stroke: #c9c4bb;
  stroke-width: 1.5;
  transition: stroke 0.15s ease, fill 0.15s ease;
}
.ts-stoel--bezet { cursor: grab; }
.ts-stoel--bezet circle { fill: var(--m27-lichtgroen); stroke: var(--m27-donkergroen); }
.ts-stoel--koppel circle { fill: var(--m27-lila); stroke: var(--m27-paars); }
/* Een stoel voorbij het aantal: die bestaat alleen omdat er iemand op zit. */
.ts-stoel--over circle { stroke: var(--m27-rood); stroke-dasharray: 3 2; }
.ts-stoel--over.ts-stoel--bezet circle { fill: #f3ded9; }
.ts-stoel--gekozen circle { stroke: var(--m27-paars); stroke-width: 3; }
.ts-stoel:focus-visible circle { stroke: var(--m27-lila); stroke-width: 3; }
.ts-stoel.ts-doel circle { stroke: var(--m27-paars); stroke-width: 3; fill: rgba(194, 177, 215, 0.45); }
.ts-stoel__naam { font-size: 10.5px; fill: var(--m27-tekst); }
.ts-stoel__nummer { font-size: 8px; fill: var(--m27-tekst); }

/* Is er een naam gekozen, dan is elke vrije stoel een knop. */
.ts-vlakhoes--kiesbaar .ts-stoel--vrij:hover circle { stroke: var(--m27-paars); stroke-dasharray: 3 2; }
.ts-vlakhoes--kiesbaar .ts-tafel { cursor: pointer; }

/* ------------------------------- de modal ------------------------------- */

/* --- de vorm kiezen --- */

.ts-vormveld { margin-bottom: 12px; }
.ts-vormkeuze { display: flex; gap: 8px; flex-wrap: wrap; }

.ts-vormknop {
  flex: 1 1 90px;
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 76px;
  padding: 10px 8px;
  background: #fff;
  border: 1.5px solid #dad5cd;
  border-radius: 12px;
  color: var(--m27-tekst);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ts-vormknop:hover { border-color: var(--m27-lila); }
.ts-vormknop:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.ts-vormknop.actief {
  border-color: var(--m27-paars);
  background: rgba(194, 177, 215, 0.16);
}

.ts-vormglyph {
  display: block;
  border: 1.5px solid var(--m27-donkergroen);
  background: var(--m27-lichtgroen);
}
.ts-vormglyph--rond { width: 26px; height: 26px; border-radius: 50%; }
.ts-vormglyph--vierkant { width: 24px; height: 24px; border-radius: 5px; }
.ts-vormglyph--lang { width: 38px; height: 16px; border-radius: 4px; }

/* --- de maat en de voorvertoning --- */

/* De velden links, de voorvertoning rechts: zo beginnen de labels op
   dezelfde lijn als Naam en Vorm. */
.ts-maat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.ts-maatveld[hidden] { display: none; }
.ts-maatveld label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ts-maatgetal { font-size: 12px; letter-spacing: 0; text-transform: none; color: #8a857e; }
.ts-maatveld input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--m27-paars); }

.ts-vv__vlak {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #faf8f4 radial-gradient(#e8e4dc 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  border: 1.5px dashed #dad5cd;
  border-radius: 12px;
  overflow: hidden;
  padding: 6px;
}
.ts-vv__regel { margin: 6px 0 0; font-size: 12.5px; color: var(--m27-paars); text-align: center; }

.ts-zaalvelden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- wie zit hier --- */

.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.ts-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 12px 5px 6px;
  border: 1.5px solid var(--m27-lichtgroen);
  border-radius: var(--m27-radius-pill);
  background: var(--m27-lichtgroen);
  color: var(--m27-donkergroen);
  cursor: pointer;
}
.ts-chip em {
  font-style: normal;
  font-size: 11px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
}
.ts-chip span { font-size: 14px; line-height: 1; opacity: 0.7; }
.ts-chip:hover { border-color: var(--m27-donkergroen); }
.ts-chip:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.ts-chip[disabled] { opacity: 0.5; cursor: default; }

.ts-modalfout { color: #a4432f; font-size: 13.5px; }
.ts-modalweg { margin-right: auto; }

/* De bevestiging voor het verwijderen, in het venster zelf (zie
   toonTafelModal). Zelfde roodbruin als een te volle tafel, zodat het scherm
   een taal spreekt over wat gevaarlijk is. */
.ts-wegvraag {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--m27-rood);
  border-radius: 12px;
  background: #f3ded9;
}
.ts-wegvraag__tekst { margin: 0 0 10px; font-size: 13.5px; color: var(--m27-tekst); }

/* ------------------------------ telefoon -------------------------------- */

@media (max-width: 900px) {
  /* minmax(0, 1fr) en niet 1fr: een kolom van 1fr mag niet smaller dan
     haar inhoud, en de plattegrond is breder dan een telefoon. Dan schoof
     de hele kolom, paneel incluis, buiten het scherm. */
  .ts-plan { grid-template-columns: minmax(0, 1fr); }
  .ts-lijst { max-height: 300px; }

  /* Een kolom, dus het paneel staat boven het plan. De balk met de gekozen
     naam plakt daarom bovenaan het plan: anders scrol je bij de tweede tik
     langs de naam van wie je net koos. Ze stopt onder de topbalk (die zelf
     sticky op 0 staat), anders zou ze eronder verdwijnen. */
  .ts-kiesbalk {
    position: sticky;
    top: calc(var(--m27-topbalk-h) + env(safe-area-inset-top, 0px));
    z-index: 5;
  }
}

@media (max-width: 768px) {
  .ts-kopknoppen { flex: 1 1 100%; }
  .ts-kopknoppen .m27-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .ts-potlood { width: 44px; height: 44px; }
  .ts-kiesbalk .m27-btn { min-height: 44px; }
  .ts-chip { min-height: 44px; }
}

@media (max-width: 620px) {
  /* De voorvertoning boven de velden in plaats van ernaast: naast elkaar
     blijft er voor allebei te weinig breedte over. */
  .ts-maat { grid-template-columns: 1fr; }
  .ts-vv { max-width: 200px; margin: 0 auto; }
  .ts-vormknop { min-height: 68px; }
}

/* ------------------------------ afdrukken ------------------------------- */

/* De afdrukwortel hangt rechtstreeks onder body (zie drukAf in de module):
   het portaal staat in scrollende panelen en zou op papier afgeknipt
   worden op de zichtbare hoogte. De klasse ts-printbaar staat er alleen
   tijdens het afdrukken vanuit het tafelplan, zodat een afdruk van een
   ander scherm zich hier niets van aantrekt. */

#ts-print { display: none; }

@media print {
  body.ts-printbaar { background: #fff; }
  body.ts-printbaar > :not(#ts-print) { display: none !important; }
  body.ts-printbaar #ts-print { display: block; }

  .ts-print {
    color: #1c1a17;
    font-size: 12pt;
    line-height: 1.5;
    padding: 0;
  }
  .ts-print h1 {
    font-family: var(--m27-font-titel);
    font-weight: 400;
    font-size: 22pt;
    color: #1c1a17;
    margin: 0 0 2pt;
  }
  .ts-print__sub { margin: 0 0 14pt; color: #55524d; }

  .ts-print__blok {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 14pt;
  }
  .ts-print__blok h2 {
    font-family: var(--m27-font-titel);
    font-weight: 400;
    font-size: 14pt;
    color: #1c1a17;
    margin: 0 0 4pt;
    border-bottom: 1pt solid #c9c4bb;
    padding-bottom: 2pt;
  }
  .ts-print__blok h2 small {
    font-family: inherit;
    font-size: 10pt;
    color: #55524d;
  }
  .ts-print__blok p { margin: 2pt 0 0; color: #55524d; }

  /* Het plan op papier, op de breedte van het blad. Alleen randen en
     tekst: een printer laat achtergrondkleuren standaard weg, dus een
     tafel die enkel uit een vulkleur bestaat zou op het blad verdwijnen. */
  .ts-print__planblok { margin-bottom: 20pt; }
  .ts-print__plan { margin-top: 6pt; }
  .ts-print__plan svg { width: 100%; height: auto; }
  .ts-print .ts-zaalvlak { fill: #fff; stroke: #55524d; stroke-width: 1; }
  .ts-print .ts-raster { stroke: #e4e0d8; }
  .ts-print .ts-tafel__vlak { fill: #fff; stroke: #55524d; }
  .ts-print .ts-tafel__naam,
  .ts-print .ts-tafel__telling { fill: #1c1a17; }
  .ts-print .ts-stoel circle { fill: #fff; stroke: #77726b; }
  .ts-print .ts-stoel--bezet circle { fill: #e4e0d8; stroke: #1c1a17; }
  .ts-print .ts-stoel--koppel circle { fill: #d9d0e4; }
  .ts-print .ts-stoel__nummer { fill: #1c1a17; }

  .ts-print table { width: 100%; border-collapse: collapse; }
  .ts-print th, .ts-print td {
    text-align: left;
    font-size: 10.5pt;
    padding: 3pt 6pt 3pt 0;
    border-bottom: 0.5pt solid #dcd7cf;
    vertical-align: top;
  }
  .ts-print th {
    font-size: 8.5pt;
    letter-spacing: 0.6pt;
    text-transform: uppercase;
    color: #77726b;
  }

  .ts-print__voet { margin-top: 16pt; font-size: 9.5pt; color: #77726b; }
}