/* Keukenprogramma - vormgeving. Grote knoppen, veel contrast, geschikt voor een tablet in de keuken. */

:root{
  --papier:#f5f2ec;
  --wit:#ffffff;
  --inkt:#1d2328;
  --inkt-zacht:#5b6670;
  --lijn:#ddd7cc;
  --groen:#2f6f4f;
  --groen-licht:#e6f0ea;
  --amber:#a66a00;
  --amber-licht:#fbf0dc;
  --rood:#9e2b25;
  --rood-licht:#fbe8e6;
  --blauw:#2b5d87;
  --blauw-licht:#e5eef5;
  --radius:14px;
  --schaduw:0 1px 2px rgba(29,35,40,.06), 0 4px 14px rgba(29,35,40,.06);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.5;
  color:var(--inkt);
  background:var(--papier);
}
a{color:var(--blauw)}

/* ---------- Bovenbalk ---------- */
.balk{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--inkt);color:#f3efe8;padding:10px 18px;
}
.balk-links{display:flex;align-items:center;gap:10px;min-width:0}
.logo{font-size:24px}
.bedrijf{font-weight:700;font-size:19px;letter-spacing:.2px}
.balk-rechts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px}
.balk-rechts .datum{color:#bcb6ab}
.balk-rechts .wie{background:rgba(255,255,255,.12);padding:3px 10px;border-radius:999px}
.zaakkiezer{display:flex;align-items:center;gap:7px}
.zaakkiezer label{color:#bcb6ab;font-size:14px}
.zaakkiezer select{
  background:#2c343a;color:#fff;border:1px solid #454f57;border-radius:8px;
  padding:6px 10px;font-size:15px;font-family:inherit;
}
.zaaklabel{
  display:inline-block;padding:3px 12px;border-radius:999px;font-weight:600;
  background:var(--kleur,#5b6670);color:#fff;
}

/* ---------- Menu ---------- */
.menu{
  display:flex;gap:6px;overflow-x:auto;background:#2c343a;padding:0 10px;
  border-bottom:3px solid var(--groen);
}
.menu-item{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:13px 16px;color:#cfc9c0;text-decoration:none;font-weight:600;font-size:16px;
  border-bottom:3px solid transparent;margin-bottom:-3px;
}
.menu-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu-item.aan{color:#fff;border-bottom-color:#7fc4a0;background:rgba(255,255,255,.08)}
.menu-icoon{font-size:19px}

/* ---------- Inhoud ---------- */
.inhoud{max-width:1180px;margin:0 auto;padding:22px 18px 70px}
body.los .inhoud{max-width:460px;padding-top:9vh}
h1{font-size:27px;margin:0 0 4px}
h2{font-size:21px;margin:30px 0 12px}
h3{font-size:17px;margin:20px 0 8px}
.onderschrift{color:var(--inkt-zacht);margin:0 0 20px}

.kaart{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:18px;margin-bottom:18px;box-shadow:var(--schaduw);
}
.kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kaart-kop h2,.kaart-kop h3{margin:0}
.kaart-stil{background:#faf8f4}

/* ---------- Knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:10px;border:1px solid transparent;
  background:var(--groen);color:#fff;font-size:16px;font-weight:600;font-family:inherit;
  text-decoration:none;cursor:pointer;
}
.knop:hover{filter:brightness(1.07)}
.knop:active{transform:translateY(1px)}
.knop-stil{background:transparent;border-color:rgba(255,255,255,.35);color:#f3efe8}
.knop-grijs{background:#fff;border-color:var(--lijn);color:var(--inkt)}
.knop-grijs:hover{background:#f1ece4}
.knop-blauw{background:var(--blauw)}
.knop-rood{background:var(--rood)}
.knop-amber{background:var(--amber)}
.knop-klein{padding:7px 13px;font-size:14px}
.knop-groot{padding:16px 26px;font-size:18px;width:100%}
.knoppen{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Formulieren ---------- */
label{display:block;font-weight:600;font-size:15px;margin-bottom:5px}
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=email],
input[type=password],select,textarea{
  width:100%;padding:11px 13px;font-size:16px;font-family:inherit;color:var(--inkt);
  background:var(--wit);border:1px solid #c9c2b6;border-radius:10px;
}
input:focus,select:focus,textarea:focus{outline:3px solid #bcd9c9;border-color:var(--groen)}
textarea{min-height:70px;resize:vertical}
.veld{margin-bottom:14px}
.rij{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.rij>.veld{flex:1 1 180px;margin-bottom:0}
.hint{font-size:14px;color:var(--inkt-zacht);font-weight:400}

/* ---------- Meldingen ---------- */
.melding{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-weight:600;border:1px solid}
.melding-goed{background:var(--groen-licht);border-color:#b7d6c5;color:#1d4a35}
.melding-fout{background:var(--rood-licht);border-color:#e7bdb9;color:#7a221d}
.melding-let{background:var(--amber-licht);border-color:#e6cfa3;color:#7a4e00}

/* ---------- Tegels op het overzicht ---------- */
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.tegel{
  display:block;background:var(--wit);border:1px solid var(--lijn);border-left:6px solid var(--groen);
  border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--inkt);
  box-shadow:var(--schaduw);
}
.tegel:hover{background:#fbfaf7}
.tegel-titel{font-size:15px;color:var(--inkt-zacht);font-weight:600}
.tegel-cijfer{font-size:34px;font-weight:700;line-height:1.15;margin:4px 0 2px}
.tegel-onder{font-size:14px;color:var(--inkt-zacht)}
.tegel.let{border-left-color:var(--amber)}
.tegel.alarm{border-left-color:var(--rood)}
.tegel.klaar{border-left-color:var(--groen)}
.tegel.rustig{border-left-color:#c9c2b6}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:11px 10px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:middle}
th{font-size:14px;text-transform:uppercase;letter-spacing:.4px;color:var(--inkt-zacht);background:#faf8f4}
tr:last-child td{border-bottom:none}
td.rechts,th.rechts{text-align:right}
td.midden,th.midden{text-align:center}
.tabelbak{overflow-x:auto}
.getal{font-variant-numeric:tabular-nums}

/* ---------- Labels ---------- */
.label{display:inline-block;padding:3px 10px;border-radius:999px;font-size:14px;font-weight:600}
.label-groen{background:var(--groen-licht);color:#1d4a35}
.label-amber{background:var(--amber-licht);color:#7a4e00}
.label-rood{background:var(--rood-licht);color:#7a221d}
.label-blauw{background:var(--blauw-licht);color:#1e4867}
.label-grijs{background:#eceae4;color:var(--inkt-zacht)}
.zaakbol{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:middle}

/* ---------- Belkaart (bestellen) ---------- */
.belkaart{border:2px solid var(--inkt);border-radius:var(--radius);background:var(--wit);margin-bottom:22px;overflow:hidden}
.belkaart-kop{background:var(--inkt);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.belkaart-kop .naam{font-size:21px;font-weight:700}
.belnummer{font-size:26px;font-weight:700;letter-spacing:.5px;color:#fff;text-decoration:none}
.belnummer:hover{text-decoration:underline}
.klantnr{font-size:15px;color:#cfc9c0}
.belkaart-lijf{padding:6px 18px 18px}
.belregel{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.belregel:last-child{border-bottom:none}
.belregel input[type=checkbox]{width:26px;height:26px;flex:none;accent-color:var(--groen)}
.belregel .aantal{font-size:21px;font-weight:700;min-width:92px;font-variant-numeric:tabular-nums}
.belregel .naam{font-size:19px;flex:1}
.belregel.af{opacity:.45;text-decoration:line-through}
.verdeling{font-size:14px;color:var(--inkt-zacht);margin-top:2px}

/* ---------- Temperaturen ---------- */
.meting{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--lijn);flex-wrap:wrap}
.meting:last-child{border-bottom:none}
.meting .naam{flex:1 1 180px;font-weight:600}
.meting .norm{font-size:14px;color:var(--inkt-zacht);flex:none;min-width:120px}
.meting input[type=number]{width:110px;font-size:19px;font-weight:700;text-align:center}
.meting.buiten{background:var(--rood-licht);border-radius:10px;padding:12px 10px}
.actieveld{flex:1 1 100%;margin-top:8px}

/* ---------- Afvinklijst ---------- */
.vinklijst{list-style:none;margin:0;padding:0}
.vinkregel{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--lijn)}
.vinkregel:last-child{border-bottom:none}
.vinkregel input[type=checkbox]{width:25px;height:25px;flex:none;accent-color:var(--groen)}
.vinkregel .wie{font-size:14px;color:var(--inkt-zacht);margin-left:auto;text-align:right}
.vinkregel.gedaan .taaknaam{color:var(--inkt-zacht);text-decoration:line-through}

/* ---------- Diverse ---------- */
.leeg{padding:34px 18px;text-align:center;color:var(--inkt-zacht);background:#faf8f4;border:1px dashed var(--lijn);border-radius:var(--radius)}
.balkje{height:9px;border-radius:5px;background:#e7e3da;overflow:hidden;min-width:90px}
.balkje span{display:block;height:100%;background:var(--groen)}
.subtiel{color:var(--inkt-zacht);font-size:14px}
.scheiding{height:1px;background:var(--lijn);margin:22px 0}
.groepkop{display:flex;align-items:center;gap:10px;margin:22px 0 8px;font-weight:700;font-size:18px}

/* ---------- Scanscherm op de telefoon ---------- */
.scanblad{max-width:620px;margin:0 auto}
.scankop{background:var(--wit);border:1px solid var(--lijn);border-left:6px solid var(--groen);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;box-shadow:var(--schaduw)}
.scankop h1{font-size:26px;margin:0 0 2px}

.blok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  margin-bottom:14px;box-shadow:var(--schaduw);overflow:hidden}
.blok>summary{list-style:none;cursor:pointer;padding:17px 18px;font-size:18px;font-weight:700;
  display:flex;align-items:center;gap:12px}
.blok>summary::-webkit-details-marker{display:none}
.blok>summary::after{content:'▾';margin-left:auto;color:var(--inkt-zacht);font-size:16px}
.blok[open]>summary{border-bottom:1px solid var(--lijn);background:#faf8f4}
.blok[open]>summary::after{content:'▴'}
.blok-icoon{font-size:22px}
.blok-lijf{padding:18px}
.groot-invoer{font-size:26px !important;font-weight:700;text-align:center;padding:14px !important}
.knoprij{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.knoprij .knop{min-width:66px;font-size:17px;padding:13px 16px}
.vulknop.gekozen{background:var(--groen);color:#fff;border-color:var(--groen)}

.charge{border:1px solid var(--lijn);border-left:5px solid var(--groen);border-radius:10px;
  padding:12px 14px;margin-bottom:10px;background:#fbfaf7}
.charge.vandaag,.charge.binnenkort{border-left-color:var(--amber);background:var(--amber-licht)}
.charge.verlopen{border-left-color:var(--rood);background:var(--rood-licht)}
.charge-kop{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}

.ingredienten,.stappen{margin:6px 0 0;padding-left:22px}
.ingredienten li,.stappen li{margin-bottom:5px}

/* ---------- Werklijst ---------- */
.vinkknop{width:42px;height:42px;flex:none;border-radius:10px;border:2px solid #c9c2b6;
  background:var(--wit);font-size:20px;line-height:1;cursor:pointer;color:var(--groen);font-weight:700}
.vinkknop:hover{border-color:var(--groen)}
.vinkknop.aan{background:var(--groen);border-color:var(--groen);color:#fff}
tr.rij-alarm td{background:var(--rood-licht)}
tr.rij-let td{background:var(--amber-licht)}

/* ---------- Bonnen en facturen ---------- */
.bonnen{display:flex;gap:14px;flex-wrap:wrap}
.bon{flex:0 1 230px;border:1px solid var(--lijn);border-radius:10px;padding:10px;background:#faf8f4}
.bon img{width:100%;height:170px;object-fit:cover;border-radius:7px;display:block;margin-bottom:8px;background:#fff}
.bon-pdf{display:flex;align-items:center;justify-content:center;height:170px;border-radius:7px;
  background:#fff;border:1px dashed var(--lijn);margin-bottom:8px;font-weight:600;text-decoration:none}
input[type=file]{width:100%;padding:10px;font-size:15px;font-family:inherit;
  background:var(--wit);border:1px solid #c9c2b6;border-radius:10px}

/* ---------- Printen ---------- */
.printblad{max-width:760px;margin:0 auto;padding:26px;font-size:15px;background:#fff;color:#000}
.printblad h1{font-size:23px;margin-bottom:2px}
.printblad table{font-size:14px}
.printblad th,.printblad td{border:1px solid #999;padding:6px 7px}
.printknop{margin:16px auto;max-width:760px;padding:0 26px}
.hokje{display:inline-block;width:15px;height:15px;border:1.5px solid #000;vertical-align:-2px}
@media print{
  .balk,.menu,.printknop,.niet-printen{display:none !important}
  body{background:#fff}
  .inhoud{padding:0;max-width:none}
  .kaart{box-shadow:none;border-color:#999;break-inside:avoid}
  .printblad{padding:0}
  a{color:#000;text-decoration:none}
}
@media (max-width:640px){
  .menu-tekst{display:none}
  .menu-item{padding:13px 15px}
  .menu-icoon{font-size:22px}
  .inhoud{padding:16px 12px 60px}
  h1{font-size:23px}
}

/* ---------- Roostertabel ---------- */
.roostertabel th,.roostertabel td{padding:6px 4px}
.roostercel{min-width:92px;width:92px}
.roostercel select{padding:5px 4px;font-size:13px}
.tijdrij{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.tijdrij input[type=time]{padding:4px 1px;font-size:11.5px;width:100%;text-align:center}
.tijdrij input[type=time]::-webkit-calendar-picker-indicator{display:none}
.tijdrij input[type=time]::-webkit-inner-spin-button{display:none}

/* ---------- Voettekst met versienummer ---------- */
.voet{
  max-width:1180px;margin:0 auto;padding:18px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;color:var(--inkt-zacht);font-size:13px;border-top:1px solid var(--lijn);
}
.voet-versie{font-variant-numeric:tabular-nums}
body.los .voet{max-width:460px}
@media print{ .voet{display:none} }