/* ==========================================================================
   DE LINKER- EN DE RECHTERKOLOM IN- EN UITKLAPPEN — de vorm

   22-10-2026, test01. De uitleg in gewone taal staat in kolommen.js; hier staat
   alleen hoe het eruitziet. Samen zijn dit de twee bestanden van deze wijziging.

   De indeling van het scherm zelf blijft van nevaro.css: op een breed scherm zijn
   er drie kolommen (gesprekken | gesprek | team en taken) en die maten staan daar
   op één plek, in het blok "HET BLOK RECHTS" (272px 1fr 320px). Dit bestand
   verandert daar NIETS aan zolang geen van beide kolommen dicht is: het grijpt
   alleen in bij de twee standen "dicht", en zet dan de maat van die ene kolom op
   nul. De andere twee houden hun eigen maat, anders zou het gesprek over de hele
   breedte springen en het blok onder het gesprek vallen.

   De marge: bij de uitvoering "professioneel" (de huisstijl die test01 draagt)
   heeft elke kolom 6 pixels marge aan de zijkant (zie nevaro.css). Die marge
   moet mee naar nul, anders blijft er een lege strook van 12 pixels staan.
   ========================================================================== */

/* De knop voor de kolom rechts en het plusje voor een nieuw gesprek bestaan pas
   als ze nodig zijn: op een smal scherm is er geen rechterkolom (daar is het blok
   een venster met zijn eigen knop) en is de gesprekkenlijst een lade. */
#kolom-rechts,
#kolom-nieuw { display: none; }

/* De twee inklapknoppen zien er hetzelfde uit: dezelfde drie streepjes, dezelfde
   maat, dezelfde kleur, dezelfde rand bij toetsenbordgebruik. De linkerknop is de
   knop die er al was (#menu); de rechter is er één van dezelfde soort. */
.kolomknop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.kolomknop span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

@media (min-width: 901px) {
  /* Op een breed scherm is de streepjeskop van de app zelf verborgen (die hoort bij
     de lade van een telefoon). Hier is hij nodig: hij klapt de gesprekkenkolom in en
     uit. De maat en de vorm zijn precies die van de app (.iconbtn). */
  #menu { display: flex; }

  #kolom-rechts { display: flex; }

  /* Het plusje voor een nieuw gesprek: alleen als de gesprekkenkolom dicht staat,
     want dan is de knop "Nieuw gesprek" in die kolom niet te bereiken. */
  .app--links-dicht #kolom-nieuw { display: grid; }

  /* De maat van de kolommen, alleen in de standen "dicht". De getallen 272 en 320
     zijn dezelfde als in nevaro.css (HET BLOK RECHTS); ze staan hier omdat een
     ingeklapte kolom de maat van de anderen met rust moet laten. */
  .app { transition: grid-template-columns .18s ease; }

  .app.app--links-dicht {
    grid-template-columns: 0 minmax(0, 1fr) var(--kolom-rechts-open, 320px);
  }

  .app.app--rechts-dicht {
    grid-template-columns: var(--kolom-links-open, 272px) minmax(0, 1fr) 0;
  }

  .app.app--links-dicht.app--rechts-dicht {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }

  /* Ingeklapt is de kolom ECHT weg: geen breedte, geen marge, geen rand, geen
     opvulling — en met visibility: hidden dus ook niet met de Tab-toets te bereiken
     en niet voor een schermlezer.
     WAAROM `html body` ervoor: bij de uitvoering "professioneel" zet nevaro.css
     `html[data-skin="professioneel"] .side` (marge, opvulling, rand, schaduw). Die
     regel is net zo zwaar als `.app--links-dicht .side` en stond er eerder, dus
     zonder deze extra stap zouden de marge en de opvulling blijven staan en bleef er
     een lege strook van 28 pixels over (gemeten 22-10-2026: 16 pixels opvulling). */
  html body .app--links-dicht .side {
    width: 0;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    visibility: hidden;
  }

  html body .app--rechts-dicht .blok {
    width: 0;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    visibility: hidden;
  }

  /* Wie de muis niet kan gebruiken (toetsenbord, schermlezer) hoort de knop te zien
     als hij erdoorheen tabt; de rand is dezelfde als bij de andere knoppen in de
     balk. Niets extra's: geen eigen kleur, geen eigen "ingedrukt"-stand. */
  #kolom-rechts:focus-visible,
  #menu:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
}