/* Wiet Kwekerij — Pagina's: dealers, winkel (magazijn, voertuigen, team), apotheek-orders.
   Volgorde van laden staat in index.html; die bepaalt mee welke regel wint. */

.dealer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:16px;}
.dealer-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
/* Ticket "box van dealers": een dealerkaart wisselt tussen twee standen — kiezen (twee
   dropdowns + knop) en onderweg (tekst + balk + tekst). De tweede is lager, waardoor de hele
   rij verspringt zodra je iemand op pad stuurt. Dit blok houdt beide standen even hoog. */
.dealer-body{width:100%;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:8px;}
.dealer-card.unlocked{border-color:var(--gold);}
.dealer-icon{font-size:2.2rem;}
.dealer-name{font-weight:700;font-size:.95rem;}
.dealer-desc{font-size:.72rem;color:var(--text-dim);}
.dealer-mult{font-size:.8rem;color:var(--gold);font-weight:700;}
.dealer-card .shop-btn{margin-top:4px;}
/* Turfkop (ticket "dealers stoppen"): per turf één product en stoppen/starten voor de Planner,
   op één regel boven de kaarten. Dropdown en knop mogen daar niet de volle breedte pakken zoals
   in een winkelkaart; op een telefoon loopt de uitlegregel eronder door. */
.turf-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;}
.turf-kop-label{font-size:.72rem;color:var(--text-dim);flex:none;}
.turf-kop .shop-select{flex:1 1 120px;max-width:240px;width:auto;min-width:0;margin-bottom:0;}
.turf-kop .shop-btn{flex:none;width:auto;padding:6px 12px;}
.turf-kop .dealer-desc{flex:1 1 100%;}
/* Stadsdepot (ticket "depot & vervoer"): voorraad, wat binnenkomt en wat weggaat, bovenaan de
   stad-tab. De tussenkopjes scheiden de drie delen zonder er drie kaarten van te maken. */
.depot-blok{margin-bottom:12px;}
.depot-kop{font-size:.78rem;font-weight:700;margin:10px 0 4px;}

/* Winkel: één regel per product in het magazijn — voorraad links, knop rechts. De knop
   mag hier niet over de volle breedte, anders wordt de kaart een kolom losse knoppen. */
.winkel-rij{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.winkel-rij-label{flex:1 1 150px;font-size:.72rem;color:var(--text-dim);}
.winkel-rij .shop-btn{width:auto;flex:none;padding:6px 10px;font-size:.72rem;}
/* Magazijnvak: één product, met de regel en zijn eigen vulbalk als één blok. Zonder deze
   ruimte ertussen lopen vier vakken met vier balken in elkaar over tot één streepjespatroon
   waarin je niet meer ziet welke balk bij welk product hoort. */
.magazijn-vak{margin-bottom:10px;}
.magazijn-vak:last-of-type{margin-bottom:4px;}
.magazijn-vak .winkel-rij{margin-bottom:2px;}
/* Voertuigkaart. Een bus die onderweg is kun je niets meer vragen; de groene rand is dezelfde
   taal als bij "zelf verkopen" op de Dealers-pagina — bezig, laat maar lopen. */
.shop-card.voertuig .amount-num{flex:none;width:90px;margin-bottom:0;}
.shop-card.voertuig.onderweg{border-color:var(--green);}
.shop-card.voertuig.automaat{border-color:var(--gold);}
/* Rit van een voertuig (ticket "ritten zetten"): Van en Naar op één regel, op een telefoon onder
   elkaar; per product een vinkje of het mee mag. */
.rit-paar{flex:1 1 220px;display:flex;align-items:center;gap:8px;min-width:0;}
.rit-kop .winkel-rij-label{flex:none;width:3em;}
.rit-kop .shop-select{flex:1 1 auto;width:auto;min-width:0;margin-bottom:0;}
.rit-goed{display:flex;align-items:center;gap:6px;cursor:pointer;}
.rit-goed input{flex:none;margin:0;}
/* Teamregels: dezelfde regel-opzet, maar met een streep ertussen. Een winkel met twaalf
   medewerkers werd anders een muur tekst waarin je je eigen Meester niet meer terugvindt. */
.winkel-rij.persoon + .winkel-rij.persoon{border-top:1px dashed var(--card-border);padding-top:8px;}
/* Rangbadge achter de rol. Junior blijft grijs, Ervaren goud, Meester groen — dezelfde
   kleurtaal als de rest van het spel (goud = gekocht/vooruitgang, groen = klaar). */
.tier-badge{
  display:inline-block;border:1px solid var(--card-border);border-radius:4px;
  padding:1px 5px;font-size:.62rem;font-weight:700;letter-spacing:.3px;
  color:var(--text-dim);vertical-align:middle;
}
.tier-badge.tier-2{color:var(--gold);border-color:var(--gold);}
.tier-badge.tier-3{color:var(--green);border-color:var(--green);}
/* Ontslaan staat naast Opleiden en zag er precies hetzelfde uit; deze is onomkeerbaar. */
.shop-btn.danger{border-color:var(--red);color:#ffd9d5;}
.shop-btn.danger:hover:not(:disabled){background:#2a0f0c;}
/* Een staking is geen detail: de kaart mag opvallen tussen de andere kaarten. */
.shop-card.alarm{border-color:var(--red);background:linear-gradient(180deg, rgba(239,74,61,.10), var(--card-bg));}

/* Apotheek-orders. Bouwen op .dealer-card (zelfde grid, zelfde vorm) en voegen daar alleen
   de staat aan toe die een order wél heeft en een dealer niet: krap gepland, in bereiding,
   of over de deadline. De randkleur is de hele boodschap — je moet in één blik over het
   bord kunnen kijken zonder de getallen te lezen. */
.order-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
.order-card.krap{border-color:var(--gold);}
.order-card.bezig{border-color:var(--green);}
.order-card.telaat{border-color:var(--red);background:linear-gradient(180deg, rgba(239,74,61,.10), var(--card-bg));}
.order-card .shop-btn{margin-top:4px;}
.order-card.telaat .plot-progress-bar{background:var(--red);}
/* De tweede, dunnere balk op een bereidingskaart is de tijd, niet de voortgang: hij loopt
   leeg in plaats van vol en verkleurt onderweg. Twee balken van dezelfde kleur en dikte
   zouden niet uit elkaar te houden zijn. */
.plot-progress.deadline{height:4px;margin-top:-4px;}
.plot-progress.deadline .plot-progress-bar{background:var(--green);}
.plot-progress.deadline.let-op .plot-progress-bar{background:var(--gold);}
.plot-progress.deadline.urgent .plot-progress-bar{background:var(--red);}

/* Uitleg-pagina (ticket "uitleg"): per onderdeel een blok met leestekst en daaronder inklapbare
   tabellen. De tabellen zitten ín een .shop-section en erven dus zijn summary-opmaak; de pijl
   mag alleen draaien als de tabel zelf open is, niet al als het blok eromheen open staat. */
.uitleg-blok{padding:2px 2px 10px;}
.uitleg-tekst{font-size:.78rem;line-height:1.55;color:var(--text);margin:0 0 8px;}
.uitleg-tabel{margin:8px 0;border:1px dashed var(--card-border);border-radius:6px;padding:0 8px;}
.shop-section .uitleg-tabel summary{font-size:.7rem;}
.shop-section .uitleg-tabel summary .chev{transform:none;}
.shop-section .uitleg-tabel[open] summary .chev{transform:rotate(90deg);}
/* Brede tabellen scrollen binnen hun eigen kader, zodat de pagina op een telefoon niet
   zijwaarts gaat schuiven. Lange omschrijvingen mogen afbreken. */
.uitleg-scroll{overflow-x:auto;padding-bottom:6px;}
.uitleg-tabel .ref-table{font-size:.7rem;}
.uitleg-tabel .ref-table td{white-space:normal;}
.uitleg-tabel .shop-desc{margin-bottom:8px;}
.uitleg-rij-volgende td{color:var(--gold);}
.uitleg-volgende{color:var(--gold);font-weight:700;}