/* Op een klein scherm: wat er op een tablet en een telefoon anders staat dan op een laptop.

   Op één plek, zodat je ziet wat er verandert zonder elk bestand door te lopen. De grenzen
   staan er letterlijk, want een media query kan geen var(--…) lezen:
   - tot 1000 px (een tablet, of een smal venster): een lijst (ui/tabel.js) wordt een raster
     van kaartjes, met de titel van de kolom voor elke waarde, en sorteren gaat met een
     keuzelijst. Zeven kolommen passen niet naast elkaar, en een tabel die opzij schuift,
     ziet niemand: de laatste kolommen vielen gewoon weg. Detailpagina's staan dan al in één
     kolom (layout.css).
   - tot 700 px (een telefoon): de zijbalk is een menu achter de knop linksboven, dat over
     het werkvlak schuift; filters en knoppen staan onder elkaar, over de volle breedte. */

/* ── Tablet en telefoon: een lijst als kaartjes ─────────────────────────── */

@media (width <= 1000px) {
  .tabel-sorteer {
    display: flex;
  }

  .tabel-kaarten {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .tabel-kaarten .tabel {
    display: block;
  }

  .tabel-kaarten thead {
    display: none;
  }

  /* Op een tablet twee of drie kaartjes naast elkaar, op een telefoon één. */
  .tabel-kaarten tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--ruimte-2);
  }

  /* Een kaartje is een raster van één kolom: de kop bovenaan, de rest eronder. Met het icoon
     van de soort (een stuklijst) twee kolommen: het icoon naast de kop. */
  .tabel-kaarten tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-width: 0;
    padding: var(--ruimte-3) var(--ruimte-4);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-groot);
    background: var(--kleur-vlak);
  }

  .tabel-kaarten tbody tr:has(> td.soort-cel) {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--ruimte-3);
  }

  /* Een waarde krimpt mee met het kaartje en breekt af, ook een label ("onder
     veiligheidsvoorraad"), in plaats van het kaartje breder te maken dan zijn plek. */
  .tabel-kaarten .tabel td {
    grid-column: 1 / -1;
    padding: var(--ruimte-1) 0;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Een waarde met de titel van zijn kolom ervoor. */
  .tabel-kaarten .tabel td[data-kolom]:not([data-kolom=""]) {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--ruimte-3);
    justify-items: start;
  }

  .tabel-kaarten td[data-kolom]:not([data-kolom=""])::before {
    color: var(--kleur-tekst-gedempt);
    font-size: var(--tekst-klein);
    font-weight: 600;
    content: attr(data-kolom);
  }

  /* Wat er verder in de cel staat (een tweede regel, een label), onder de waarde en niet
     onder het label. */
  .tabel-kaarten td[data-kolom]:not([data-kolom=""]) > * {
    grid-column: 2;
  }

  /* De kop van het kaartje (het nummer, de naam) staat bovenaan, ook als hij in de tabel
     niet de eerste kolom is (het regelnummer op een order). */
  .tabel-kaarten .tabel td.kaartkop {
    grid-row: 1;
    margin-bottom: var(--ruimte-1);
    font-size: var(--tekst-groot);
  }

  .tabel-kaarten .tabel td.soort-cel {
    grid-row: 1;
    grid-column: 1;
    width: auto;
  }

  .tabel-kaarten tbody tr:has(> td.soort-cel) td.kaartkop {
    grid-column: 2;
  }

  /* Knoppen onderaan het kaartje, over de volle breedte; het kruisje van een stuklijst
     rechtsboven, en de kop maakt er plaats voor. */
  .tabel-kaarten .tabel td.acties {
    position: static;
    padding-top: var(--ruimte-2);
    text-align: left;
    background: none;
    box-shadow: none;
  }

  .tabel-kaarten .tabel td.acties:has(.knop-weg) {
    position: absolute;
    top: var(--ruimte-2);
    right: var(--ruimte-2);
    padding: 0;
  }

  .tabel-kaarten .tabel td.acties .knop-weg {
    width: 36px;
  }

  .tabel-kaarten tbody tr:has(.knop-weg) td.kaartkop {
    padding-right: var(--ruimte-8);
  }

  .tabel-kaarten td:empty {
    display: none;
  }

  .tabel-kaarten .label {
    white-space: normal;
  }

  /* In een tabel houdt een naam een minimale breedte (lijsten.css); in een kaartje niet. */
  .tabel-kaarten .naam {
    min-width: 0;
  }

  /* Een lang label ("Voorkeursleverancier") breekt af, en loopt niet over de waarde heen. */
  .kv dt,
  .tabel-kaarten td::before {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* ── Telefoon ───────────────────────────────────────────────────────────── */

@media (width <= 700px) {
  .schil {
    grid-template-columns: 1fr;
  }

  .zijbalk {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: var(--breedte-menu);
    padding: var(--ruimte-3);
    box-shadow: var(--schaduw-groot);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out, visibility 0.2s;
  }

  .schil.menu-open .zijbalk {
    visibility: visible;
    transform: none;
  }

  .merk {
    justify-content: flex-start;
    padding-left: var(--ruimte-2);
  }

  .bakje {
    flex-direction: row;
    gap: var(--ruimte-3);
    justify-content: flex-start;
    min-height: 48px;
    padding: 0 var(--ruimte-3);
    font-size: var(--tekst-normaal);
    text-align: left;
  }

  .menu-achtergrond {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    border: 0;
    background: var(--kleur-sluier);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .schil.menu-open .menu-achtergrond {
    opacity: 1;
    pointer-events: auto;
  }

  .bovenbalk .menuknop {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--klikdoel);
    padding: 0;
  }

  .bovenbalk {
    gap: var(--ruimte-2);
    padding: 0 var(--ruimte-3);
  }

  .bovenbalk-wie {
    display: none;
  }

  /* ── Het werkvlak ─────────────────────────────────────────────────────── */

  .pagina {
    padding: var(--ruimte-4);
  }

  .paginakop,
  .detailkop-rij {
    flex-wrap: wrap;
  }

  .kaart {
    padding: var(--ruimte-4);
  }

  .kv-rij {
    grid-template-columns: 9rem 1fr;
  }

  .meldingen {
    left: var(--ruimte-4);
    max-width: none;
  }

  .inlogvak {
    padding: var(--ruimte-6) var(--ruimte-5);
  }

  /* De soort boven een lijst: één regel die opzij schuift, in plaats van drie regels knoppen. */
  .soortbalk {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .soortbalk .soortknop {
    flex-shrink: 0;
  }

  /* In de kiezer van een stuklijst alleen de + op de knop: dan houdt de naam de ruimte, en
     breekt hij niet midden in een woord. De tekst blijft er voor een schermlezer. */
  .kiezer-knoptekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .kiezer-rij .knop {
    min-width: var(--klikdoel);
    min-height: var(--klikdoel);
  }

  /* De knoppen van de opslaanbalk naast elkaar over de volle breedte, en een lange tekst
     ("Sub-assemblage opslaan") breekt af in plaats van van het scherm te vallen. */
  .opslaanbalk-knoppen {
    width: 100%;
  }

  .opslaanbalk-knoppen .knop {
    flex: 1;
    white-space: normal;
  }

  /* ── Filterbalk en paginering ─────────────────────────────────────────── */

  .filter-zoek,
  .filter-keuze {
    flex: 1 1 100%;
    max-width: none;
  }

  .filter-keuze select {
    width: 100%;
  }

  /* Van de paginanummers alleen de huidige: "Vorige 3 Volgende" past, twaalf nummers niet. */
  .paginering-knoppen > .paginering-nummer:not([aria-current]),
  .paginering-gat {
    display: none;
  }
}

@media (width <= 700px) and (prefers-reduced-motion: reduce) {
  .zijbalk,
  .menu-achtergrond {
    transition: none;
  }
}