/* Wiet Kwekerij — Componenten: panelen, perceelkaarten, winkelkaarten en knoppen, uitleg-ballonnen,
   tabellen, voorraadlijst, vensters (modals), meldingen (toasts).
   Volgorde van laden staat in index.html; die bepaalt mee welke regel wint. */

.panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:9px;padding:9px;}
.panel h2{font-family:var(--font-head);font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px dashed var(--card-border);}

.plot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media (max-width:640px){.plot-grid{grid-template-columns:repeat(2,1fr);}}
.kas-group{margin-bottom:14px;padding-bottom:10px;border-bottom:1px dashed var(--border);}
.kas-group:last-child{border-bottom:none;}
.plot-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;padding:8px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:0;justify-content:flex-start;gap:4px;min-width:0;}
/* Vaste vakken (ticket "kassen en percelen"): elk vak heeft in elke toestand dezelfde hoogte en
   tekst loopt nooit door naar een extra regel, dus elke kaart is even hoog en de pagina verspringt
   niet als een kweker oogst, plant of water geeft. Vier knopplekken: meer heeft geen toestand. */
.plot-card > *{max-width:100%;}
.plot-card .plot-name,.plot-card .plot-kweker{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.plot-card .plot-kweker{height:1.9em;line-height:1.9em;}
.plot-card .plot-icon{height:1.9rem;line-height:1.9rem;}
.plot-card .plot-name{height:1.4rem;line-height:1.4rem;}
.plot-status{width:100%;font-size:.68rem;color:var(--text-dim);line-height:1.3em;height:2.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.plot-acties{--knop-h:1.8rem;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:calc(4*var(--knop-h) + 3*4px);}
.plot-acties > *{flex:none;height:var(--knop-h);box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.plot-acties > .shop-select{width:100%;margin:0;}
.plot-actie-regel{line-height:var(--knop-h);}
.verborgen-vak{visibility:hidden;}
.kas-vinkje{display:flex;align-items:center;gap:6px;cursor:pointer;}
.kas-selectie .rij-8{margin-top:6px;align-items:center;}
.plot-card.empty{border-style:dashed;}
.plot-card.ready{border-color:var(--green);box-shadow:0 0 14px rgba(55,216,115,.2);}
.plot-card.auto{border-color:#6c8cff;}
.plot-card.ready.auto{border-color:#6c8cff;box-shadow:0 0 14px rgba(108,140,255,.25);}
.plot-card.thirsty{border-color:#4fa8ff;box-shadow:0 0 14px rgba(79,168,255,.3);}
.water-btn{background:#0a3a5c;border:1px solid #4fa8ff;color:#dff0ff;border-radius:6px;padding:8px 10px;font-weight:700;font-size:.76rem;cursor:pointer;width:100%;transition:background .15s ease;}
.water-btn:hover{background:#0d4a75;}
.plot-icon{font-size:1.4rem;}
.plot-name{font-family:var(--font-head);font-weight:700;font-size:.78rem;}
.plot-sub{font-size:.66rem;color:var(--text-dim);}
.plot-progress{width:100%;background:#000;border:1px solid var(--card-border);border-radius:6px;height:5px;overflow:hidden;margin:3px 0;}
.plot-progress-bar{height:100%;background:var(--gold);transition:width .3s linear;}
.plot-timer{font-family:var(--font-mono);font-size:.68rem;color:var(--gold);}
.seed-row{display:flex;flex-direction:column;gap:6px;width:100%;}
.seed-btn{background:#000;border:1px solid #fff;color:#fff;border-radius:6px;padding:6px 4px;font-size:.68rem;cursor:pointer;transition:background .15s ease;}
.seed-btn:hover:not(:disabled){background:#232323;}
.seed-btn:disabled{opacity:.35;cursor:not-allowed;}
.harvest-btn{background:var(--green);border:1px solid var(--green);color:#062611;font-weight:700;border-radius:6px;padding:8px 10px;font-size:.76rem;cursor:pointer;width:100%;}
.harvest-btn:hover{filter:brightness(1.1);}

.shop-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:7px;padding:8px;margin-bottom:8px;}
.shop-section{margin-bottom:8px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:7px;padding:0 7px;}
.shop-section summary{
  cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:.72rem;color:var(--text);
  padding:6px 0;margin-bottom:0;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.shop-section summary::-webkit-details-marker{display:none;}
.shop-section summary .chev{color:var(--text-dim);transition:transform .15s ease;flex:none;font-size:.68rem;}
.shop-section[open] summary .chev{transform:rotate(90deg);}
.shop-section summary:hover{color:var(--gold);}
.shop-section[open]{padding-bottom:7px;}
.shop-section .shop-card{background:#0e0f11;}
.shop-section:last-of-type{margin-bottom:8px;}
.shop-title{font-weight:600;font-size:.76rem;margin-bottom:3px;}
.shop-desc{font-size:.68rem;color:var(--text-dim);margin-bottom:6px;}
/* Uitleg achter een vraagteken (winkel, sectie Percelen & Kwekers).
   De beschrijvingen stonden voluit onder elke titel en maakten de winkelkolom een muur tekst.
   Ze hangen nu aan het "?" achter de titel: open bij hover en bij toetsenbordfocus, en met een
   klik vast te zetten (.open) zodat je hem kunt lezen zonder je muis stil te houden - zie
   helpHTML/bindHelp in js/scherm/ui.js.
   De ballon hangt aan .shop-title (die staat daarom op position:relative) en niet aan het "?"
   zelf: zo loopt hij over de volle breedte van de kaart in plaats van uit de smalle kolom te
   steken. z-index omdat hij over de koopknop eronder heen valt. */
.shop-title{position:relative;}
.help{
  display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  margin-left:5px;border-radius:50%;border:1px solid var(--card-border);
  color:var(--text-dim);font-size:.62rem;font-weight:700;line-height:1;
  cursor:pointer;vertical-align:middle;user-select:none;flex:none;
}
.help:hover,.help:focus-visible,.help.open{color:var(--gold);border-color:var(--gold);}
.help-tip{
  display:none;position:absolute;z-index:5;left:0;right:0;top:100%;margin-top:6px;
  background:#0d0d0d;border:1px solid var(--gold);border-radius:6px;padding:8px 10px;
  font-size:.72rem;font-weight:400;line-height:1.45;color:var(--text);text-align:left;
  white-space:normal;box-shadow:0 6px 18px rgba(0,0,0,.65);cursor:auto;
}
/* :focus-visible en niet :focus - anders houdt de focus die een muisklik achterlaat de
   ballon open, en sluit een tweede klik hem zichtbaar niet. Toetsenbordgebruik werkt wel. */
.help:hover .help-tip,.help:focus-visible .help-tip,.help.open .help-tip{display:block;}
/* Zonder beschrijving staat de titel strak op de knop; dit houdt dezelfde lucht als voorheen. */
.shop-title + .shop-btn{margin-top:8px;}

.shop-btn{background:#000;border:1px solid #34353a;color:var(--text);border-radius:6px;padding:6px 8px;font-weight:600;font-size:.72rem;cursor:pointer;width:100%;}
.shop-btn:hover:not(:disabled){background:#232323;}
.shop-btn:disabled{opacity:.35;cursor:not-allowed;}
.shop-select{background:#000;border:1px solid #34353a;color:var(--text);border-radius:6px;padding:6px 7px;font-weight:600;font-size:.72rem;width:100%;margin-bottom:5px;font-family:inherit;}
.shop-select:disabled{opacity:.35;}
/* table-layout:auto (i.p.v. fixed) laat elke kolom meegroeien met zijn langste inhoud — een
   vaste procentuele breedte gaf bij een lange naam (bv. "Northern Lights") overlap met de
   kolom ernaast omdat de browser 'm niet meer mocht laten wrappen (white-space:nowrap). */
.ref-table{width:100%;table-layout:auto;border-collapse:collapse;font-size:.66rem;}
.ref-table th,.ref-table td{text-align:left;padding:3px 5px;border-bottom:1px dashed var(--card-border);color:var(--text-dim);white-space:nowrap;font-family:var(--font-mono);}
.ref-table th{color:var(--text);font-family:var(--font-body);}

/* Voorraad-lijst (Verwerking/Dealers/Kwekerij/Voortgang): geen kolommen die tekst afknellen —
   elk product krijgt zijn eigen volledige-breedte naam-regel plus een kleinere waarde-regel eronder. */
.stash-list{display:flex;flex-direction:column;}
.stash-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;padding:4px 2px;border-bottom:1px dashed var(--card-border);font-size:.72rem;}
.stash-row:last-child{border-bottom:none;}
.stash-name{color:var(--text);flex:1 1 100%;}
.stash-val{color:var(--text-dim);font-family:var(--font-mono);}

.verwerker-product-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.verwerker-product-btn{flex:1 1 auto;}
.verwerker-product-btn.active{background:var(--gold);border-color:var(--gold);color:#1a1200;}
.amount-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.amount-slider{flex:1 1 auto;accent-color:var(--gold);}
.amount-num{width:80px;flex:none;margin-bottom:0;}

.admin-trigger-btn{background:none;border:1px solid var(--card-border);color:var(--text-dim);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:.9rem;flex:none;}
.admin-trigger-btn:hover{color:var(--gold);border-color:var(--gold);}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:500;padding:16px;}
.modal-window{background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;max-width:640px;width:100%;max-height:85vh;display:flex;flex-direction:column;}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);flex:none;}
.modal-header h3{margin:0;font-size:.95rem;}
.modal-close-btn{background:none;border:none;color:var(--text-dim);font-size:1.1rem;cursor:pointer;line-height:1;}
.modal-close-btn:hover{color:var(--red);}
.modal-body{padding:16px;overflow-y:auto;}
.admin-section{margin-bottom:18px;}
.admin-section h4{font-size:.75rem;color:var(--gold);text-transform:uppercase;letter-spacing:.4px;margin:0 0 8px;border-bottom:1px dashed var(--card-border);padding-bottom:6px;}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;font-size:.76rem;}
.admin-row input{width:90px;background:#000;border:1px solid var(--card-border);color:var(--text);border-radius:5px;padding:5px 7px;font-family:inherit;font-size:.76rem;}
.admin-table{width:100%;border-collapse:collapse;font-size:.72rem;}
.admin-table th,.admin-table td{padding:4px 3px;text-align:left;}
.admin-table input{width:58px;background:#000;border:1px solid var(--card-border);color:var(--text);border-radius:4px;padding:3px 4px;font-family:inherit;font-size:.72rem;}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.admin-actions button{flex:1;min-width:130px;}
#adminExportText{width:100%;background:#000;color:var(--green);border:1px solid var(--card-border);border-radius:6px;padding:8px;font-family:inherit;font-size:.7rem;margin-top:10px;resize:vertical;}

#toastContainer{position:fixed;top:14px;right:14px;left:14px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:300;pointer-events:none;}
.toast{background:#111;border:1px solid var(--green);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;max-width:320px;box-shadow:0 10px 20px rgba(0,0,0,.5);transform:translateX(120%);opacity:0;transition:transform .35s ease, opacity .35s ease;font-size:.78rem;}
.toast.show{transform:translateX(0);opacity:1;}
.toast-title{font-weight:700;color:var(--green);}
.toast-sub{color:var(--text-dim);}