/* ============================================================================
   kiosk.css — donker, en verder zo dicht mogelijk bij het dashboard
   ----------------------------------------------------------------------------
   Dezelfde variabelen en dezelfde maten als dashboard.css, maar alleen de
   donkere kant: de kiosk staat op een zakelijk apparaat waar de eigenaar de
   themakeuze niet in de hand heeft, en één vast beeld is dan rustiger dan een
   scherm dat per apparaat anders is.
   ========================================================================== */

:root{
  color-scheme:dark;
  --vlak:#0d0d0d; --kaart:#1a1a19; --i1:#fff; --i2:#c3c2b7; --i3:#898781;
  --lijn:#2c2c2a; --ring:rgba(255,255,255,.10);
  --blauw:#3987e5; --groen:#0ca30c; --geel:#fab219; --rood:#d03b3b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--vlak);color:var(--i1);
  font:13.5px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
[hidden]{display:none !important}
.mini{font-size:11px;color:var(--i3);margin:0}
.leeg{color:var(--i3)}
.fout{color:var(--rood);font-size:12px;margin:8px 0 0}
.goed{color:var(--groen);font-size:12px;margin:8px 0 0}
.rek{flex:1}

button{font:inherit;color:var(--i1);background:var(--vlak);border:1px solid var(--ring);
  border-radius:8px;padding:6px 11px;cursor:pointer}
button:hover{border-color:var(--blauw)}
button:disabled{opacity:.45;cursor:default}
button.primair{background:var(--blauw);border-color:var(--blauw);color:#fff}
button.gevaar{border-color:var(--rood);color:var(--rood)}
input,select{font:inherit;color:var(--i1);background:var(--vlak);
  border:1px solid var(--ring);border-radius:8px;padding:6px 9px}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--blauw);
  outline-offset:1px}

/* ---- inloggen ----------------------------------------------------------- */
.slot{min-height:100vh;display:grid;place-items:center;padding:20px}
.slotkaart{width:min(360px,100%);background:var(--kaart);border:1px solid var(--ring);
  border-radius:12px;padding:22px}
.slotkaart h1{font-size:17px;margin:0;letter-spacing:-.01em}
.slotkaart p.mini{margin:2px 0 18px}
.slotkaart label{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--i3);margin-bottom:5px}
.slotkaart input{width:100%}
.slotkaart input + label{margin-top:12px}
.slotkaart button{width:100%;margin-top:12px}
.slotkaart .eis{margin-top:7px}

/* ---- raamwerk ----------------------------------------------------------- */
.app{display:flex;flex-direction:column;min-height:100vh}
.kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;background:var(--kaart);border-bottom:1px solid var(--ring)}
.kop .merk{font-weight:600;font-size:15px;letter-spacing:-.01em}
.gebouwd{font-size:11px;color:var(--i3);font-variant-numeric:tabular-nums}
/* De ouderdom staat er in TEKST bij ("12 min oud") en niet alleen in deze kleur.
   Zelfde regel als bij de dropshipbolletjes: dit wordt op een telefoon in de zon
   gelezen, en kleur alleen is daar geen mededeling. */
.gebouwd .oud{color:var(--geel)}
/* Alleen te zien als een bouwronde is overgeslagen of mislukt. Geel en niet
   rood: er is niets stuk, er staat alleen iets ouds op het scherm. */
.bouwstand{font-size:11px;color:var(--geel);border:1px solid var(--geel);
  border-radius:999px;padding:1px 9px}
/* De knop die zegt dat er nieuwere gegevens klaarstaan. Een knop en geen
   mededeling: het scherm wordt niet uit zichzelf vervangen terwijl iemand leest,
   dus hij bepaalt zelf wanneer. */
.verser{font-size:11px;color:var(--blauw);border-color:var(--blauw);padding:2px 9px}
/* De wachtrijmelding is geel en niet groen: er staat iets open, het is nog niet
   aangekomen. Groen zou beloven dat het klaar is. */
.wachtrij{font-size:11px;color:var(--geel);border:1px solid var(--geel);
  border-radius:999px;padding:1px 9px}
.wieikben{font-size:11px;color:var(--i3)}

.lijf{display:grid;grid-template-columns:270px 1fr;flex:1;min-height:0}
.rail{background:var(--kaart);border-right:1px solid var(--ring);
  display:flex;flex-direction:column;min-height:0}
/* De kop blijft staan. Hij hoort dat al te doen doordat .rail een flexkolom is
   en alleen .winkellijst schuift, maar op een kort scherm (en op de telefoon,
   waar de rail 40vh hoog is) kon de kop toch uit beeld lopen. Sticky is hier de
   goedkope zekerheid: zoeken, doorloopmodus en filter zijn de knoppen waarmee je
   de lijst bestuurt, en die moet je niet hoeven terugzoeken. */
.railkop{padding:11px 12px 8px;border-bottom:1px solid var(--lijn);
  position:sticky;top:0;z-index:2;background:var(--kaart)}
.railkop input[type=search]{width:100%}
.vinkregel{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--i2);margin-top:8px}
.railkop .mini{margin-top:6px}

/* De knop naar de doorloopmodus. Aan is blauw en niet alleen een randje: dit is
   een modus waarin knoppen iets anders doen, en dat moet je kunnen zien. */
.dlknop{width:100%;margin-top:8px}
.dlknop.aan{background:var(--blauw);border-color:var(--blauw);color:#fff}

/* Het filter staat ingeklapt; wat het wegneemt staat eronder en blijft staan. */
.filterblok{margin-top:10px;border-top:1px solid var(--lijn);padding-top:8px}
.filterblok summary{font-size:12px;color:var(--i2);cursor:pointer;
  display:flex;align-items:center;gap:7px}
.filterblok .mini{margin-top:8px}
.filterrij{display:flex;gap:6px;margin-top:6px}
.filterrij input{flex:1;min-width:0}
.filterrij button{padding:5px 8px;font-size:12px}
.markten{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.marktpil{font-size:11px;padding:3px 9px;border-radius:999px}
.marktpil.aan{background:var(--blauw);border-color:var(--blauw);color:#fff}
/* De filterregel is geel zodra er iets wegvalt: er staat dan minder op het
   scherm dan er is, en dat hoort op te vallen. */
#filtertelling{margin-top:4px}
#filtertelling.aan{color:var(--geel)}

.winkellijst{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
.winkellijst li{margin:0}
.wknop{display:flex;width:100%;gap:9px;align-items:baseline;text-align:left;
  border:0;background:none;border-radius:8px;padding:7px 9px}
.wknop:hover{background:var(--vlak)}
.wknop.aan{background:var(--blauw);color:#fff}
.wknop.aan .wmeta{color:rgba(255,255,255,.8)}
.wnaam{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.wmeta{font-size:11px;color:var(--i3);white-space:nowrap;font-variant-numeric:tabular-nums}
.wvink{width:14px;flex:none;color:var(--groen)}
.wknop.aan .wvink{color:#fff}
/* De dropshipbolletjes in de rail: klein, en alleen als er een oordeel is.
   letter-spacing omdat drie bolletjes anders één vlek worden. */
.wds{flex:none;font-size:8px;letter-spacing:.5px;line-height:1}

/* ---- het scherm --------------------------------------------------------- */
.scherm{padding:16px 18px 40px;overflow:auto;min-height:0}
.schermkop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.schermkop h2{font-size:16px;margin:0}
.schermkop .mini{margin-left:auto}
.winkelmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.winkelmeta i{color:var(--lijn);font-style:normal}

/* ---- de dropshipkans -----------------------------------------------------
   Klein merkteken, geen blok: het staat naast de bezoekcijfers en niet erboven.
   De bolletjes dragen dezelfde boodschap als de kleur, zodat kleur nooit het
   enige signaal is. Geen oordeel is een streepje met een stippellijn eromheen —
   dezelfde vorm die dit scherm overal voor "niet gemeten" gebruikt. */
.ds{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  border:1px solid var(--ring);border-radius:999px;padding:1px 9px;
  white-space:nowrap;color:var(--i2)}
.ds0{border-style:dashed;color:var(--i3)}
.ds1{border-color:var(--groen);color:var(--groen)}
.ds2{border-color:var(--geel);color:var(--geel)}
.ds3{border-color:var(--rood);color:var(--rood)}

/* De uitklap met de redenen. Het driehoekje van de browser gaat eruit en er
   komt een eigen teken achter de tekst, anders staat het buiten de pil. */
.dsvak{display:inline-block}
/* Open neemt hij een eigen regel: de redenen zijn zinnen en die passen niet in
   de breedte van een pil tussen de bezoekcijfers. */
.dsvak[open]{flex-basis:100%}
.dsvak summary{cursor:pointer;list-style:none}
.dsvak summary::-webkit-details-marker{display:none}
.dsvak summary::after{content:'\25BE';font-size:9px;opacity:.75}
.dsvak[open] summary::after{content:'\25B4'}
.dsredenen{margin:7px 0 0;padding-left:17px;font-size:11.5px;color:var(--i2);
  line-height:1.5;max-width:60ch}
.dsredenen li{margin:2px 0}

.dlbalk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin:12px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--lijn)}
.dlaf{color:var(--groen);font-size:12px}

/* ---- de doorloopbalk -----------------------------------------------------
   Een eigen vak en geen rij knoppen tussen de rest: in deze modus is dit het
   stuur van het scherm, en je moet zonder zoeken kunnen zien waar je bent.
   Groen zodra de winkel gehad is — dat is de enige kleur die hier iets zegt. */
.doorloop{background:var(--kaart);border:1px solid var(--blauw);border-radius:10px;
  padding:10px 12px;margin:12px 0 18px}
.doorloop.gedaan{border-color:var(--groen)}
.dlwaar{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dlwaar b{font-size:14px}
.dlknoppen{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:9px}
.dlklaar{color:var(--groen);font-size:12px;margin:9px 0 0}

.rooster{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.art{background:var(--kaart);border:1px solid var(--ring);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column}
/* De foto is een knop geworden; deze regels halen weg wat een knop van
   zichzelf meebrengt (rand, opvulling, eigen achtergrond). */
.artfoto{border:0;padding:0;width:100%;cursor:pointer;
  position:relative;aspect-ratio:1;background:var(--vlak);
  display:grid;place-items:center}
.artfoto img{width:100%;height:100%;object-fit:contain;display:block}
/* Een kapotte foto wordt een plaatshouder en NOOIT een andere foto: een plaatje
   van een ander product naast deze titel is een leugen die je niet ziet. */
.artfoto .geenfoto{font-size:11px;color:var(--i3)}
.artlijf{padding:9px 10px;display:flex;flex-direction:column;gap:5px;flex:1}
/* De plek in de lijst. Een verkooprang is blauw, een collectievolgorde blijft
   grijs: dat is geen bestsellerlijst maar de volgorde die de winkelier zelf
   koos, en die twee er hetzelfde uit laten zien is het verschil wegpoetsen.
   Geen meting is een streepje en dus geen rand. */
.artplek{display:flex;align-items:center;gap:6px;font-size:11px}
.plek{border:1px solid var(--ring);border-radius:999px;padding:1px 8px;
  color:var(--i2);font-variant-numeric:tabular-nums;white-space:nowrap}
.plek.verkoop{border-color:var(--blauw);color:var(--blauw)}
.plek.leeg{border-style:dashed;color:var(--i3)}
.beweeg{font-size:10px;font-variant-numeric:tabular-nums}
.beweeg.op{color:var(--groen)}
.beweeg.af{color:var(--rood)}
.arttitel{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.artprijs{font-weight:600;font-variant-numeric:tabular-nums}
/* De ISO-code staat achter het bedrag en mag rustiger zijn dan het bedrag zelf;
   ontbreekt hij, dan staat er niets - geen gegokt muntteken. */
.artprijs .munt{font-weight:400;font-size:11px;color:var(--i3)}
.artvoet{display:flex;gap:6px;align-items:center;margin-top:auto}
.artvoet a{color:var(--i3);font-size:11px;text-decoration:none}
.artvoet a:hover{color:var(--blauw);text-decoration:underline}
.ster{border:1px solid var(--ring);border-radius:8px;background:var(--vlak);
  padding:4px 9px;font-size:13px;line-height:1;color:var(--i3)}
.ster.aan{color:var(--geel);border-color:var(--geel)}

/* ---- beheer ------------------------------------------------------------- */
.beheerlijf{padding:16px 18px 60px;max-width:900px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:22px}
.beheerblok h2,.linkvak h2{font-size:14px;margin:0 0 6px}
.beheerform{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.beheerform input{flex:1;min-width:180px}

/* De eenmalige link. Geel omdat er iets openstaat wat je nu moet afhandelen:
   hij is hierna niet meer op te vragen. */
.linkvak{background:var(--kaart);border:1px solid var(--geel);border-radius:10px;padding:14px 15px}
.waarschuwing{color:var(--geel);font-size:12px;margin:0 0 10px;line-height:1.45}
.linkveld{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px}
.linkknoppen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}

.gebruikers{display:flex;flex-direction:column;gap:9px}
.gebruiker{background:var(--kaart);border:1px solid var(--ring);border-radius:10px;
  padding:10px 12px}
.grij{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gnaam{font-weight:600}
.gknoppen{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.gknoppen button{font-size:12px;padding:4px 9px}

.merkje{font-size:10.5px;border:1px solid var(--ring);border-radius:999px;
  padding:1px 8px;color:var(--i3);white-space:nowrap}
.merkje.rol{color:var(--i2)}
.merkje.aan{color:var(--groen);border-color:var(--groen)}
.merkje.uit{color:var(--i3);border-style:dashed}
/* "Wacht op wachtwoord" is geel en niet groen: het account bestaat wel maar er
   kan nog niemand mee inloggen. */
.merkje.wacht{color:var(--geel);border-color:var(--geel)}

/* ---- meldingsvak -------------------------------------------------------- */
.melding{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  background:var(--kaart);border:1px solid var(--ring);border-radius:9px;
  padding:8px 14px;font-size:12.5px;box-shadow:0 6px 20px rgba(0,0,0,.45);
  max-width:min(560px,92vw);margin:0}
.melding.rood{border-color:var(--rood);color:var(--rood)}

/* ---- smal scherm ---------------------------------------------------------
   Dit wordt vooral onderweg gelezen, op een telefoon. Twee dingen tellen daar:
   de rail mag het scherm niet opeten, en alles wat aangeraakt wordt moet groot
   genoeg zijn om met een duim te raken. */
@media (max-width:760px){
  .lijf{grid-template-columns:1fr}
  .rail{border-right:0;border-bottom:1px solid var(--ring);max-height:40vh}
  .kop{gap:7px;padding:8px 11px}
  .kop .merk{width:100%}
  .scherm{padding:13px 12px 40px}
  .beheerlijf{padding:13px 12px 60px;gap:18px}
  .rooster{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px}
  .dlbalk{gap:7px}
  /* Vingermaat, geen muismaat. */
  button{padding:8px 12px}
  .ster{padding:7px 12px}
  .gknoppen button{padding:7px 11px}
  .filterrij button{padding:7px 10px}
  .marktpil{padding:6px 12px;font-size:12px}
  .melding{bottom:10px;max-width:94vw}
}

/* Een knop die als tekst leest. Gebruikt in de regels onder het filter: daar
   hoort geen echte knop te staan die de aandacht wegtrekt van de lijst zelf. */
.kaal{background:none;border:0;padding:0;font:inherit;color:var(--blauw);
  cursor:pointer;text-decoration:underline}
.kaal:hover{color:var(--i1)}

/* ---- het favorietenscherm ------------------------------------------------
   Alle aangesterde artikelen bij elkaar, met filters en gedeelde groepen. Het
   leunt met opzet op wat er al staat: het lijf is een .beheerlijf, de kaarten
   zijn .art in een .rooster, en de markt- en dropshipknoppen zijn .marktpil.
   Alleen wat hier echt anders is staat hieronder. */
#favlijf{max-width:1180px}
#favgebouwd{font-variant-numeric:tabular-nums}

/* De groepen. Elke groep is één regel: de knop die filtert, en er losjes achter
   de twee bewerkingen. Die twee zijn .kaal en dus tekst en geen knop — ze horen
   de aandacht niet weg te trekken van waar het om gaat, namelijk kiezen. */
.groeplijst{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;margin:8px 0 2px}
.groeprij{display:inline-flex;align-items:center;gap:6px}
.groeprij .kaal{font-size:11px}
.groeprij.hernoem input{width:min(220px,52vw)}
.groeppil{font-size:11.5px;padding:3px 10px;border-radius:999px;white-space:nowrap}
.groeppil.aan{background:var(--blauw);border-color:var(--blauw);color:#fff}
/* Het aantal in de groep. Rustiger dan de naam: het is een telling en geen
   oordeel, maar het moet er wel staan — weghalen raakt precies die artikelen. */
.groeppil i{font-style:normal;font-size:10px;opacity:.7;font-variant-numeric:tabular-nums}

/* Dezelfde afspraak als bij het filter op de rail: staat er iets aan, dan is de
   regel geel. Er valt dan iets weg, en dat hoort te zien te zijn. */
#favfiltertelling{margin-top:10px}
#favfiltertelling.aan{color:var(--geel)}

/* De kaart. De winkelnaam staat er hier wél bij: op het kioskscherm staat die in
   de kop boven het rooster, en hier komt elke kaart van een andere winkel. */
.favkaart .favwinkel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.favmeta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.favmeta .ds{font-size:10px;padding:1px 6px}
/* Een ster waarvan het artikel uit de oogst is. Geel en niet rood: er is niets
   stuk, er valt alleen niets meer aan te meten. */
.uitoogst{border:1px dashed var(--geel);color:var(--geel);border-radius:999px;
  padding:1px 7px;font-size:10px}
.favgroepsregel{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.favgroepsregel select{font-size:11px;padding:2px 6px;max-width:100%}
.favgroepsregel .groeppil{font-size:10.5px;padding:2px 8px}

@media (max-width:760px){
  #favlijf{padding:13px 12px 60px}
  /* Vingermaat, net als elders op dit scherm. */
  .groeppil{padding:6px 12px;font-size:12px}
  .favgroepsregel .groeppil{padding:5px 10px;font-size:11px}
  .favgroepsregel select{padding:6px 8px;font-size:12px}
}

/* Het sterretje op de foto. Het staat er ALTIJD, ook uit: een knop die pas
   verschijnt als hij aan staat vertelt je niet dat je hem kunt indrukken.
   De schaduw eronder is er omdat de foto van de winkel komt en dus elke kleur
   kan hebben -- een witte ster op een witte productfoto is geen ster. */
.fotoster{position:absolute;right:6px;top:6px;font-size:17px;line-height:1;
  color:#fff;text-shadow:0 0 3px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.7);
  pointer-events:none}
.artfoto.aan .fotoster{color:var(--geel)}
.artfoto:hover .fotoster{transform:scale(1.15)}
.artfoto:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}

/* De knop naar de winkel. Hij leest nu als een knop en niet als een voetnoot:
   het is sinds de foto de ster overnam de enige handeling die hier nog staat. */
.naarproduct{display:inline-block;border:1px solid var(--ring);border-radius:8px;
  padding:4px 10px;font-size:11px;color:var(--i2)!important;text-decoration:none!important}
.naarproduct:hover{border-color:var(--blauw);color:var(--blauw)!important}

/* De knop naar de eigen Shopify-winkel. Bewust rustig en niet groen of
   uitnodigend: hij maakt iets aan in een echte winkel, en dat is geen knop
   waar je per ongeluk overheen wilt vegen. Uitgezet betekent dat de server
   geen koppeling heeft; de reden staat in de titel. */
.shopknop{border:1px solid var(--ring);border-radius:8px;background:var(--vlak);
  color:var(--i2);font-size:11px;padding:4px 10px;cursor:pointer;
  text-decoration:none;display:inline-block;white-space:nowrap}
.shopknop:hover:not(:disabled){border-color:var(--blauw);color:var(--blauw)}
.shopknop:disabled{opacity:.45;cursor:not-allowed}
/* Al gedaan: dit is geen knop meer maar een link naar het product. Groen, want
   dit is de enige plek op dit scherm waar iets AF is. */
.shopknop.gedaan{color:var(--groen,#3fb950);border-color:var(--groen,#3fb950);
  cursor:pointer}