/* Wiet Kwekerij — Layout: bovenbalk, kolommen, paginatabs, schalen naar schermbreedte.
   Volgorde van laden staat in index.html; die bepaalt mee welke regel wint. */

.app{max-width:1420px;margin:0 auto;padding:10px 14px 40px;}

.topbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 4px;border-bottom:1px solid var(--border);margin-bottom:10px;
}
.topbar h1{font-family:var(--font-head);font-weight:700;font-size:.9rem;margin:0;}
.stat-chips{display:flex;gap:14px;flex-wrap:wrap;}
.stat-chip .label{color:var(--text-dim);display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.4px;}
.stat-chip .value{font-family:var(--font-mono);font-weight:600;font-size:.78rem;}
.c-green{color:var(--green);}
.c-gold{color:var(--gold);}
.c-red{color:var(--red);}
.event-banner{
  background:linear-gradient(90deg, rgba(224,184,74,.15), rgba(224,184,74,.04));
  border:1px solid var(--gold);border-radius:8px;padding:10px 14px;margin-bottom:18px;
  font-size:.8rem;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}

.layout{display:grid;grid-template-columns:220px 1fr 315px;gap:12px;align-items:start;}
@media (max-width:1250px){.layout{grid-template-columns:220px 1fr;}.ref-panel{grid-column:1 / -1;}}
@media (max-width:860px){.layout{grid-template-columns:1fr;}.ref-panel{grid-column:auto;}}

/* Voortgang-pagina heeft geen Winkel-kolom, alleen hoofdpaneel + voorraad rechts. */
.layout.layout-2col{grid-template-columns:1fr 315px;}
@media (max-width:860px){.layout.layout-2col{grid-template-columns:1fr;}}
/* Uitleg-pagina: alleen tekst en tabellen, dus één kolom die niet eindeloos breed wordt. */
.layout.layout-1col{grid-template-columns:1fr;max-width:1100px;margin:0 auto;}

/* Scale-to-fit-wrapper (vooralsnog alleen om de Kwekerij-pagina, zie js/scherm/ui.js setupScaleToFit).
   .scale-inner krijgt zijn transform:scale via JS; zonder JS (of onder de ondergrens) gedraagt
   dit zich gewoon als een normaal, scrollend blok. */
.scale-outer{position:relative;}
.scale-inner{transform-origin:top left;}

.page-nav{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap;}
.page-tab{background:var(--panel-bg);border:1px solid var(--border);color:var(--text-dim);border-radius:6px;padding:5px 12px;cursor:pointer;font-weight:600;font-size:.76rem;font-family:var(--font-body);}
.page-tab:hover{color:var(--text);}
.page-tab.active{background:var(--gold);color:#14110a;border-color:var(--gold);}