/* Telefoon-app voor de verzorgers: grote knoppen, één taak per scherm. */
body{background:var(--groen);color:#fff}
#app{min-height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto}
.kop{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 16px 12px;color:#fff}
.kop h1{font-size:19px;flex:1;font-weight:600}
.kop .terug{background:none;border:0;color:#fff;font-size:26px;line-height:1;padding:4px 8px 4px 0}
.kop .klein{font-size:12.5px;opacity:.8}
.blad{flex:1;background:var(--papier);color:var(--inkt);border-radius:18px 18px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.blad h2{font-size:16px;color:var(--inkt-zacht);font-weight:600;margin:18px 0 8px}
.blad h2:first-child{margin-top:0}


.zoek{font-size:18px;padding:14px;margin-bottom:12px}
.lijst{display:flex;flex-direction:column;gap:6px}
.rij{display:flex;align-items:center;gap:12px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:12px 14px;text-align:left;width:100%}
.rij:active{background:var(--groen-flauw)}
.rij .naam{font-weight:600;font-size:16px}
.rij .sub{font-size:13px;color:var(--inkt-zacht)}
.rij .rechts{margin-left:auto;text-align:right;flex-shrink:0}
.rij .pijl{color:var(--inkt-flets);font-size:20px}

.tegels{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tegel{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:18px 12px;font-weight:600;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.tegel .ic{width:40px;height:40px;border-radius:12px;background:var(--groen-flauw);color:var(--groen);display:flex;align-items:center;justify-content:center;font-size:20px}
.tegel:active{background:var(--groen-flauw)}
.tegel .sub{font-size:11.5px;font-weight:500;color:var(--inkt-flets);text-align:center;line-height:1.3}

.form label.lab{margin-top:14px;font-size:14px}
.form .rij-2{display:flex;gap:10px}
.form .rij-2 > *{flex:1}
.opslaan{width:100%;padding:16px;font-size:18px;margin-top:22px}
.dierkaart{background:var(--groen-flauw);border-radius:var(--radius);padding:12px 14px;margin-bottom:6px}
.dierkaart .naam{font-weight:700;font-size:18px;color:var(--groen)}
.dierkaart .sub{color:var(--inkt-zacht);font-size:13px}

.vandaag .rij{cursor:default}
.vandaag .rij .wat{font-weight:600}
.vandaag .rij .klein{font-size:12.5px;color:var(--inkt-zacht)}
.weg{background:none;border:0;color:var(--fout);font-weight:600;padding:6px 4px}
.offline{background:var(--let-bg);color:var(--let);border-radius:var(--radius-s);padding:8px 12px;font-size:13.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.offline .stip{width:9px;height:9px;border-radius:50%;background:var(--let)}
.menu{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;justify-content:center}
.menu .knop{font-size:13.5px}

a.knop{text-decoration:none;color:inherit;display:inline-flex;align-items:center}

/* Beginscherm: twee grote knoppen */
.hoofdtegels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.hoofdtegel{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:18px 14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:150px;box-shadow:var(--schaduw)}
.hoofdtegel:active{background:var(--groen-flauw)}
.hoofdtegel .ic{width:44px;height:44px;border-radius:12px;background:var(--groen);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.hoofdtegel b{font-size:19px;font-family:var(--display);color:var(--groen)}
.hoofdtegel span:last-child{font-size:13px;color:var(--inkt-zacht);line-height:1.35}

/* Menu's: het keukenscherm van de voerkeuken, op de telefoon */
.wissel{display:flex;background:var(--kaart);border:1px solid var(--lijn);border-radius:999px;padding:3px;margin-bottom:12px}
.wissel button{flex:1;border:0;background:none;border-radius:999px;padding:9px;font-weight:600;color:var(--inkt-zacht)}
.wissel button.aan{background:var(--groen);color:#fff}
.menustaat{font-size:13px;color:var(--inkt-zacht);margin-bottom:8px}
.keuken .offline{margin-bottom:8px}
.voortgang{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--inkt-zacht);margin-bottom:14px}
.voortgang .balk{height:6px;border-radius:3px;background:var(--lijn);overflow:hidden}
.voortgang .vulling{height:100%;border-radius:3px;background:var(--ok);transition:width .3s}
.keuken .rondje{margin:0;width:32px;height:32px;font-size:18px;color:#fff}
.dierlijst{display:flex;flex-direction:column;gap:6px}
.dierlijst .afd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--inkt-flets);margin:12px 2px 2px}
.dierlijst .afd:first-child{margin-top:0}
.soort{display:flex;align-items:center;gap:12px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:12px 14px;text-align:left;width:100%;font-size:16px;color:var(--inkt)}
.soort:active{background:var(--groen-flauw)}
.soort[aria-current]{border-color:var(--groen)}
.soort .naam{flex:1;font-weight:600;min-width:0}
.soort .n{font-size:13px;color:var(--inkt-zacht);flex-shrink:0}
.soort.klaar .rondje{background:var(--ok);border-color:var(--ok)}
.soort.klaar .naam{color:var(--inkt-zacht)}
.soort.let .rondje{background:var(--let);border-color:var(--let)}
.soort.geen{opacity:.6}
.soort.geen .rondje{border-style:dashed}
.detail{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.detail.van-rechts{animation:van-rechts .2s ease-out}
.detail.van-links{animation:van-links .2s ease-out}
@keyframes van-rechts{from{transform:translateX(48px);opacity:0}}
@keyframes van-links{from{transform:translateX(-48px);opacity:0}}
@media (prefers-reduced-motion:reduce){.detail.van-rechts,.detail.van-links{animation:none}}
.detail .terug{background:none;border:0;color:var(--groen);font-weight:600;font-size:15px;padding:2px 0 10px}
.dkop h1{font-family:var(--display);font-size:30px;line-height:1.1;color:var(--groen);margin:0}
.dkop .aantal{font-size:14px;color:var(--inkt-zacht);margin:4px 0 12px}
.waarschuwing{background:var(--let-bg);color:var(--let);border-radius:var(--radius-s);padding:10px 12px;font-size:14px;font-weight:600;margin-bottom:10px}
.letop{background:var(--goud-flauw);border-left:4px solid var(--goud);border-radius:var(--radius-s);padding:10px 12px;font-size:15px;margin-bottom:10px}
.bakken{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.bakken span{background:var(--vlak);border-radius:999px;padding:4px 10px;font-size:13px}
.geenvoer{color:var(--inkt-zacht);padding:14px 0}
.detail h2.ronde{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--inkt-flets);font-weight:700;margin:14px 0 6px}
.voertabel{width:100%;border-collapse:separate;border-spacing:0;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden}
.voertabel td{padding:12px 10px;border-top:1px solid var(--lijn);vertical-align:middle}
.voertabel tr:first-child td{border-top:0}
.voertabel.vinkbaar tbody tr{cursor:pointer}
.voertabel.vinkbaar tbody tr:active{background:var(--lijn)}
.voertabel td.vink{width:42px;padding-right:0}
.voertabel .rondje{width:42px;height:42px;font-size:24px}
.voertabel td.voer{min-width:0}
.voertabel td.voer b{display:block;font-size:19px;line-height:1.2}
.voertabel td.voer em{font-style:normal;font-weight:400;color:var(--groen)}
.voertabel td.voer .per,.voertabel td.voer .opm{display:block;font-size:13px;color:var(--inkt-zacht);margin-top:2px}
.voertabel td.tot{text-align:right;font-weight:700;font-size:22px;white-space:nowrap}
.voertabel td.tot .tekst{font-size:14px;font-weight:500;color:var(--inkt-zacht);white-space:normal}
.voertabel td.tot .open{font-size:14px;font-weight:500;color:var(--let);font-style:italic;white-space:normal}
.voertabel tr.gedaan td.voer,.voertabel tr.gedaan td.voer em,.voertabel tr.gedaan td.tot{color:var(--inkt-flets)}
.voertabel tr.gedaan .rondje{background:var(--ok);border-color:var(--ok)}
.recept{margin-top:10px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:0 12px}
.recept summary{font-weight:600;padding:10px 0;cursor:pointer;color:var(--groen)}
.recept p{margin:0 0 12px;font-size:14.5px;white-space:pre-line}
.dvoet{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.dvoet .knop{width:100%;padding:14px;font-size:16px}
.klaarknop{min-height:68px;font-size:24px;font-family:var(--display)}
.isklaar{text-align:center;color:var(--ok);font-weight:700;font-size:18px}
.bladeren{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-top:18px}
.blader{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;min-height:60px;text-align:left;min-width:0}
.blader:last-child{align-items:flex-end;text-align:right}
.blader small{font-size:11.5px;color:var(--inkt-flets);text-transform:uppercase;letter-spacing:.04em}
.blader b{font-size:14.5px;color:var(--groen);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.blader:disabled{opacity:.4}
.plek{font-size:13px;color:var(--inkt-zacht)}

/* Melden: dieren kiezen, ook meer tegelijk */
.rij.kies{padding:0;gap:0}
.rij.kies.aan{border-color:var(--groen);background:var(--groen-flauw)}
.rij.kies .ga{flex:1;display:flex;align-items:center;gap:12px;background:none;border:0;padding:12px 14px 12px 4px;text-align:left;min-width:0}
.rondje{flex-shrink:0;width:30px;height:30px;margin-left:12px;border-radius:50%;border:2px solid var(--lijn-sterk);background:var(--kaart);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0}
.rij.kies.aan .rondje{background:var(--groen);border-color:var(--groen)}
.kiesbalk{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;margin-top:12px;padding:10px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw-hoog)}
.kiesbalk .hoofd{flex:1;padding:12px;font-size:16px}
.linkknop{background:none;border:0;color:var(--groen);font-weight:600;padding:2px 0 8px;text-decoration:underline}
.nietinlijst{display:flex;flex-direction:column;gap:8px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.nietinlijst label.lab{margin:0}
.blad > .uitleg{margin:0 0 10px}
.tegel.breed{width:100%;flex-direction:row;justify-content:center;margin-top:10px}
.meer{margin-top:14px}
.meer summary{font-weight:600;color:var(--inkt-zacht);padding:8px 2px;cursor:pointer}
.meer .tegels{margin-top:6px}
/* Melden: soortenlijst en knop voor de hele soort */
.rij.soortrij{cursor:pointer}
.rij .tekst{min-width:0}
.rij .tekst .naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rij .badge{margin-left:auto;flex-shrink:0}
.groepknop{width:100%;padding:14px;font-size:16px;margin-bottom:12px}

/* Klussen: derde tegel over de volle breedte, urentegels in drie kolommen, totaal van de dag */
.hoofdtegel.breed{grid-column:1 / -1;flex-direction:row;align-items:center;gap:14px;min-height:0;padding:14px}
.hoofdtegel.breed .ic{flex:none}
.hoofdtegel.breed .tekst{display:flex;flex-direction:column;gap:4px;min-width:0}
.tegels.drie{grid-template-columns:1fr 1fr 1fr}
.tegels.drie .tegel{padding:18px 6px;font-size:17px}
.klustotaal{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px;color:var(--inkt-zacht)}
.klustotaal b{font-family:var(--display);font-size:22px;color:var(--groen)}
.rij.kies .ga{font-weight:600}
.nietinlijst .knop.hoofd{align-self:flex-end}

/* Uitgedeelde klussen ("Te doen") op het klussenscherm */
.tedoen{margin-bottom:12px}
.tedoen h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--inkt-zacht);margin:0 0 2px}
.tedoen .rij{border-color:var(--groen)}
.tedoen .knop.hoofd{padding:8px 14px;font-size:14px}