/* DGM Voorraad & Forecast - huisstijl De Groene Makers */
:root{
  --vijg:#4f4e32; --mos:#5a5018; --klaver:#999665; --honing:#9c753a;
  --zonneschijn:#cbbc84; --oesterzwam:#d2c2a6; --zand:#ebe6d7; --narcis:#ca9110;
  --lucht:#9ba8a5;
  --wit:#fbfaf5; --lijn:#ddd6c4; --rood:#a4443a; --groen:#5a7d4f;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--zand); color:var(--vijg);
  font-family:Georgia,'Warbler Text',serif; font-size:16px; line-height:1.5;
}
a{color:var(--honing); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; letter-spacing:.02em; color:var(--vijg); margin:.2em 0 .5em}
h1{font-size:2rem; font-style:italic}
h2{font-size:1.4rem}
.small{font-size:.85rem; color:var(--mos)}
.muted{color:var(--lucht)}

header.top{
  background:var(--vijg); color:var(--zand); padding:.7rem 1.5rem;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
header.top .brand{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:1.35rem; color:var(--zand); display:flex; align-items:center; gap:.5rem}
header.top .brand .clover{color:var(--zonneschijn)}
header.top nav{display:flex; gap:1.1rem; flex-wrap:wrap}
header.top nav a{color:var(--oesterzwam); text-transform:uppercase; font-family:'Jost',sans-serif;
  font-size:.78rem; letter-spacing:.12em}
header.top nav a.active,header.top nav a:hover{color:var(--zand); text-decoration:none}
header.top .spacer{margin-left:auto}
header.top .logout{color:var(--zonneschijn); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase}

main{max-width:1120px; margin:1.6rem auto; padding:0 1.2rem}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin:1rem 0}
.card{background:var(--wit); border:1px solid var(--lijn); border-radius:10px; padding:1.1rem 1.2rem}
.card .kpi{font-size:2.1rem; font-family:'Cormorant Garamond',Georgia,serif; color:var(--mos); line-height:1}
.card .kpi.warn{color:var(--narcis)}
.card .label{font-family:'Jost',sans-serif; text-transform:uppercase; font-size:.72rem; letter-spacing:.12em; color:var(--honing)}

.panel{background:var(--wit); border:1px solid var(--lijn); border-radius:10px; padding:1.2rem 1.3rem; margin:1.2rem 0}

table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--lijn)}
th{font-family:'Jost',sans-serif; text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; color:var(--honing)}
tr:hover td{background:#f4f0e4}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

.badge{display:inline-block; padding:.12rem .5rem; border-radius:999px; font-size:.72rem;
  font-family:'Jost',sans-serif; letter-spacing:.04em}
.badge.hoog{background:#f0d6cf; color:var(--rood)}
.badge.middel{background:var(--zonneschijn); color:var(--vijg)}
.badge.laag{background:var(--oesterzwam); color:var(--vijg)}
.badge.geen{background:#e7e2d3; color:var(--lucht)}
.badge.conf-hoog{background:#d7e3cf; color:var(--groen)}
.badge.conf-middel{background:var(--zonneschijn); color:var(--vijg)}
.badge.conf-laag{background:#eee9db; color:var(--lucht)}

.btn{display:inline-block; background:var(--honing); color:var(--wit); border:none;
  padding:.55rem 1.1rem; border-radius:8px; font-family:'Jost',sans-serif; letter-spacing:.06em;
  text-transform:uppercase; font-size:.78rem; cursor:pointer}
.btn:hover{background:var(--mos); text-decoration:none; color:var(--wit)}
.btn.ghost{background:transparent; color:var(--vijg); border:1px solid var(--honing)}
.btn.ghost:hover{background:var(--oesterzwam); color:var(--vijg)}

input,select{font-family:inherit; font-size:.95rem; padding:.45rem .6rem; border:1px solid var(--lijn);
  border-radius:7px; background:var(--wit); color:var(--vijg)}
form.filters{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem}

.flash{padding:.7rem 1rem; border-radius:8px; margin:.6rem 0; font-size:.92rem}
.flash.error{background:#f0d6cf; color:var(--rood)}
.flash.success{background:#d7e3cf; color:var(--groen)}

/* eenvoudige SVG-staafgrafiek */
.chart{width:100%; height:220px}
.chart .bar{fill:var(--klaver)}
.chart .bar:hover{fill:var(--honing)}
.chart .axis{stroke:var(--lijn); stroke-width:1}
.chart text{fill:var(--mos); font-size:10px; font-family:'Jost',sans-serif}

.login-wrap{max-width:360px; margin:9vh auto; text-align:center}
.login-wrap .panel{padding:2rem}
.login-wrap input{width:100%; margin:.5rem 0 1rem}

.legend p{max-width:70ch; margin:.55rem 0; line-height:1.6}
.legend strong{color:var(--mos)}

/* leveranciers die nog aandacht nodig hebben */
tr.row-attn td{background:#fbf1dd}
tr.row-attn:hover td{background:#f7ead0}
.badge.attn{background:var(--narcis); color:#fff}
.navdot{background:var(--narcis); color:#fff; border-radius:999px; padding:.02rem .42rem;
  font-size:.7rem; margin-left:.15rem}

.pill{font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--honing)}
.notice{background:#f4efe0; border:1px dashed var(--klaver); border-radius:8px; padding:.8rem 1rem; font-size:.9rem}
footer{max-width:1120px; margin:2rem auto; padding:1rem 1.2rem; color:var(--lucht); font-size:.8rem; border-top:1px solid var(--lijn)}
.row-split{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:flex-start}
.row-split>*{flex:1 1 320px}
dl.meta{display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; font-size:.92rem}
dl.meta dt{color:var(--honing); font-family:'Jost',sans-serif; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; align-self:center}

/* --- mobielvriendelijk (toegevoegd) ------------------------------------- */
@media (max-width: 640px){
  body{font-size:15px}
  main{margin:1rem auto; padding:0 .8rem}
  header.top{padding:.55rem .8rem; gap:.5rem .9rem}
  header.top .brand{font-size:1.1rem}
  header.top nav{gap:.45rem .8rem}
  header.top nav a{font-size:.72rem; letter-spacing:.07em}
  header.top .spacer{display:none}
  header.top .logout{margin-left:auto}
  h1{font-size:1.55rem}
  h2{font-size:1.25rem}
  .panel{padding:.9rem .85rem}
  .cards{grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:.7rem}
  .card{padding:.85rem .95rem}
  .card .kpi{font-size:1.7rem}

  /* Brede tabellen: alleen de tabel scrollt horizontaal (niet de hele pagina),
     en de productnaam links blijft in beeld terwijl je de cijfers bekijkt. */
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:.85rem}
  th,td{padding:.45rem .5rem; white-space:nowrap}
  thead th:first-child, tbody td:first-child{
    position:sticky; left:0; z-index:1; background:var(--wit);
    box-shadow:1px 0 0 var(--lijn);
    white-space:normal; min-width:8.5rem; max-width:44vw;
  }
  tr:hover td:first-child{background:#f4f0e4}
  tr.row-attn td:first-child{background:#fbf1dd}

  /* Filters en knoppen prettig onder elkaar op smal scherm */
  form.filters{gap:.5rem}
  form.filters select, form.filters input{flex:1 1 46%; min-width:0}
  form.filters .btn{flex:1 1 100%; width:100%}
}

/* --- massabalans (toegevoegd) ------------------------------------------ */
.mbstat{display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.72rem;
  font-family:'Jost',sans-serif; letter-spacing:.04em; vertical-align:middle; margin-left:.4rem}
.mbstat.groen{background:#d7e3cf; color:var(--groen)}
.mbstat.geel{background:var(--zonneschijn); color:var(--vijg)}
.mbstat.rood{background:#f0d6cf; color:var(--rood)}
.mbtext.groen{color:var(--groen)} .mbtext.geel{color:var(--narcis)} .mbtext.rood{color:var(--rood)}
svg.spark{overflow:visible}
.spark-line{fill:none; stroke:var(--klaver); stroke-width:1.6}
.spark-line.groen{stroke:var(--groen)} .spark-line.geel{stroke:var(--narcis)} .spark-line.rood{stroke:var(--rood)}
.spark-zero{stroke:var(--lijn); stroke-width:1; stroke-dasharray:2 2}
button.linklike{background:none; border:none; color:var(--honing); cursor:pointer;
  font-family:inherit; font-size:.85rem; padding:0; text-decoration:underline}

/* Massabalans-link los rechts in de menubalk */
header.top a.mb-nav{margin-left:auto; color:var(--zonneschijn); text-transform:uppercase;
  font-family:'Jost',sans-serif; font-size:.78rem; letter-spacing:.12em;
  padding-left:1.1rem; border-left:1px solid rgba(235,230,215,.25)}
header.top a.mb-nav.active,header.top a.mb-nav:hover{color:var(--zand); text-decoration:none}