:root {
  --bg: #0f1712;
  --panel: #16211a;
  --panel-border: #263429;
  --text: #e6f0e8;
  --muted: #8aa08f;
  --accent: #4caf6d;
  --warn: #e0a83e;
  --bad: #e05a4e;
  --ok: #4caf6d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 0 16px 40px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Op een telefoon passen titel, paginanavigatie en de knoppen rechts niet
     naast elkaar; zonder wrap schuiven ze over elkaar heen in plaats van
     eronder. */
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 20px 4px 12px;
}
header h1 { margin: 0; font-size: 22px; }
header #klok { color: var(--muted); font-size: 13px; }

main { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }

.kas-kaart {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 16px 18px;
  flex: 1 1 320px;
  min-width: 300px;
}
.kas-kaart h3 { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; }
.kaart-knoppen { display: flex; gap: 6px; }
.kaart-voet {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--panel-border);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.kaart-voet .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.instellingen-knop {
  background: transparent; border: 1px solid var(--panel-border); color: var(--muted);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 15px;
}
.instellingen-knop:hover { border-color: var(--accent); color: var(--text); }

.instellingen-paneel { background: #101b14; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.instellingen-form { display: flex; flex-direction: column; gap: 8px; }
.instelling-veld { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.instelling-veld input[type=number] {
  width: 90px; background: var(--panel); color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 3px 6px;
}
.instellingen-acties { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.instellingen-acties button {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent);
  color: #06210f; font-weight: 600; cursor: pointer; font-size: 13px;
}
.instellingen-status { font-size: 12px; color: var(--ok); }

.instellingen-groep { display: flex; flex-direction: column; gap: 8px; }
.instellingen-groep + .instellingen-groep { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.instellingen-groep h4 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
}
/* De toelichting hoort ónder het label, niet ernaast: het invoerveld blijft
   dan rechts uitgelijnd en de uitleg mag over meerdere regels lopen. */
.instelling-veld { align-items: flex-start; }
.instelling-veld > span { display: flex; flex-direction: column; gap: 2px; }
.instelling-veld .hint { font-style: normal; font-size: 11.5px; color: var(--muted); opacity: .8; line-height: 1.35; max-width: 46ch; }

.kalibratie { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; padding: 10px; }
.kalibratie-meting { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.kalibratie-meting strong { font-variant-numeric: tabular-nums; }
.kalibratie-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.kalibratie-knoppen button {
  flex: 1 1 160px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--panel-border); background: #101b14; color: var(--text);
}
.kalibratie-knoppen button:hover:not(:disabled) { border-color: var(--accent); }
.kalibratie-knoppen button:disabled { opacity: .5; cursor: default; }
.kalibratie-uitleg { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; }
/* De vastleg-knoppen zitten achter deze knop: één extra klik voorkomt dat je
   een ijkpunt overschrijft terwijl je eigenlijk alleen kwam kijken. */
.kalibratie-start {
  width: 100%; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--panel-border); background: #101b14; color: var(--text);
}
.kalibratie-start:hover { border-color: var(--accent); }
.kalibratie-sluiten {
  margin-top: 8px; padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: 11.5px;
  border: 1px solid transparent; background: transparent; color: var(--muted);
}
.kalibratie-sluiten:hover { border-color: var(--panel-border); color: var(--text); }
.kalibratie [data-k="actief"] { margin-top: 2px; }
.kalibratie-status { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.kalibratie-status:empty { display: none; }
.kalibratie-status.ok { color: var(--ok); }
.kalibratie-status.waarschuwing { color: var(--warn); }
.kalibratie-status.fout { color: var(--bad); }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 14px; }
.metric { background: #101b14; border-radius: 8px; padding: 8px 10px; }
.metric .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.metric .value { font-size: 20px; font-weight: 600; margin-top: 2px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { background: rgba(76,175,109,.18); color: var(--ok); }
.badge.warn { background: rgba(224,168,62,.18); color: var(--warn); }
.badge.bad { background: rgba(224,90,78,.18); color: var(--bad); }

.mode-toggle { display: flex; gap: 6px; margin-bottom: 14px; }
.mode-toggle button {
  flex: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--panel-border);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 13px;
}
.mode-toggle button.actief { background: var(--accent); color: #06210f; border-color: var(--accent); font-weight: 600; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; }
.controls button {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--panel-border);
  background: #101b14; color: var(--text); cursor: pointer; font-size: 13px;
}
.controls button:hover { border-color: var(--accent); }
.controls button:disabled { opacity: .4; cursor: not-allowed; }

/* Knop met het aantal seconden ernaast. Ze horen visueel bij elkaar: het veld
   zegt hoe lang díe knop draait, en dat mag niet lezen als een los formulier
   ergens op de kaart. Het veld blijft bruikbaar als de knop uit staat — een
   getal invullen is nog geen bediening. */
.bedien-groep { display: inline-flex; align-items: center; gap: 4px; }
.bedien-groep .duur {
  width: 52px; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--panel-border);
  background: #101b14; color: var(--text); font-size: 13px; text-align: right;
}
.bedien-groep .eenheid { color: var(--muted); font-size: 12px; }

/* Een knopdruk die nog op het apparaat wacht. Bewust in de waarschuwingskleur
   en niet in de accentkleur: er is nog níets gebeurd, en dat is precies het
   misverstand dat deze regel moet voorkomen. */
.opdracht-wacht {
  margin-top: 8px; padding: 6px 10px; border-radius: 8px;
  background: #1d1a10; border: 1px solid var(--warn);
  color: var(--warn); font-size: 12.5px;
}

.slider-row { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; }
.slider-row label { font-size: 12px; color: var(--muted); width: 90px; }
.slider-row input[type=range] { flex: 1; }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.panel h2 { margin: 0 0 10px; font-size: 16px; }
.panel select {
  background: #101b14; color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 4px 8px;
}

.muted { color: var(--muted); font-size: 13px; }

.events-lijst { max-height: 260px; overflow-y: auto; font-size: 13px; }
.event-regel {
  display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--panel-border);
}
.event-regel .tijd { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.event-regel .type { text-transform: uppercase; font-size: 10px; padding: 1px 6px; border-radius: 4px; height: fit-content; }
.event-regel .type.auto { background: rgba(76,175,109,.15); color: var(--ok); }
.event-regel .type.handmatig { background: rgba(90,150,224,.18); color: #5a96e0; }
.event-regel .type.warning { background: rgba(224,168,62,.18); color: var(--warn); }
.event-regel .type.modus { background: rgba(140,140,140,.18); color: var(--muted); }
.event-regel .type.info { background: rgba(140,140,140,.18); color: var(--muted); }

footer { text-align: center; padding-top: 10px; }

/* ---------------------------------------------------------------------- */
/* Loginpagina                                                            */
/* ---------------------------------------------------------------------- */
body.login-pagina { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-doos {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 28px 26px; width: 100%; max-width: 360px;
}
.login-doos h1 { margin: 0 0 20px; font-size: 20px; }
.login-veld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.login-veld span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.login-veld input {
  background: #101b14; color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 9px 10px; font-size: 15px;
}
.login-veld input:focus { outline: none; border-color: var(--accent); }
.login-doos > button {
  width: 100%; margin-top: 4px; padding: 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #06210f;
  font-weight: 600; font-size: 14px;
}
.login-doos > button:disabled { opacity: .6; cursor: default; }
.login-fout { color: var(--bad); font-size: 13px; margin: 12px 0 0; line-height: 1.4; }
.login-fout:empty { display: none; }
.login-uitleg { font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.login-commando {
  background: #101b14; border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; overflow-x: auto; margin: 0 0 12px;
}

/* ---------------------------------------------------------------------- */
/* Kop: klok, kas toevoegen, account                                      */
/* ---------------------------------------------------------------------- */
.kop-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.kop-knop {
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--panel-border); background: #101b14; color: var(--text);
}
.kop-knop:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* Meldingen: het belletje in de kop en het paneel eronder                */
/* ---------------------------------------------------------------------- */
/* Opvallen zonder in de weg te zitten: het belletje staat gewoon tussen de
   andere kopknoppen en krijgt er alleen een gekleurd bolletje bij zodra er iets
   openstaat. Geen dialoog die over het dashboard valt — een melding is nooit zo
   dringend dat hij het zicht op de kas mag blokkeren. */
.meldingen-knop { position: relative; }
.meldingen-knop.heeft-meldingen { border-color: var(--warn); }
.meldingen-teller {
  position: absolute; top: -6px; right: -6px; min-width: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--warn); color: #241800;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}

.melding {
  padding: 8px 0; border-bottom: 1px solid var(--panel-border); font-size: 13px;
}
.melding:last-child { border-bottom: none; }
/* Afgevinkt blijft staan tot je hem weggooit, maar mag niet meer om aandacht
   vragen — vandaar gedempt in plaats van weg. */
.melding.gelezen { opacity: .55; }
.melding-kop { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.melding-soort {
  text-transform: uppercase; font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: rgba(224,168,62,.18); color: var(--warn);
}
.melding.gelezen .melding-soort { background: rgba(140,140,140,.18); color: var(--muted); }
.melding-kas { font-weight: 600; }
.melding-kop .tijd { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.melding-tekst { margin: 4px 0 6px; line-height: 1.45; }
.melding-acties { display: flex; gap: 8px; }
.melding-acties button { border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }

/* ---------------------------------------------------------------------- */
/* Knopvarianten                                                          */
/* ---------------------------------------------------------------------- */
.knop-stil {
  background: transparent !important; color: var(--muted) !important;
  border: 1px solid var(--panel-border) !important; font-weight: 400 !important;
}
.knop-stil:hover { color: var(--text) !important; }
.knop-gevaar {
  background: var(--bad) !important; border-color: var(--bad) !important; color: #260a07 !important;
}
.knop-gevaar-stil {
  background: transparent; border: 1px solid var(--panel-border); color: var(--bad);
  border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 11.5px; white-space: nowrap;
}
.knop-gevaar-stil:hover { border-color: var(--bad); }

/* Foutmeldingen bij een opslaan-actie zijn rood, geslaagd blijft groen. */
.instellingen-status.fout { color: var(--bad); }

/* De verwijderblokken vallen bewust op: dit is het enige onomkeerbare in de UI. */
.instellingen-groep.gevaar { border-top-color: rgba(224,90,78,.35); }
.instellingen-groep.gevaar h4 { color: var(--bad); }

/* Plantpaneel per kas: laatste vijf handelingen, oudste onderaan zichtbaar
   maar ingekort zodat een druk logboek de kaart niet uitrekt. */
.handelingen-log { max-height: 200px; overflow-y: auto; font-size: 12.5px; margin-top: 6px; }
.handelingen-log .event-regel:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------- */
/* Apparaten en gebruikers                                                */
/* ---------------------------------------------------------------------- */
.apparaat-regel {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--panel-border);
}
.apparaat-regel:last-of-type { border-bottom: none; }

.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 4px 8px 4px 0;
}
.tabel td { padding: 5px 8px 5px 0; border-top: 1px solid var(--panel-border); }
.nieuw-gebruiker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.nieuw-gebruiker input {
  background: #101b14; color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 5px 8px; font-size: 13px; flex: 1 1 160px;
}
.nieuw-gebruiker button {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent);
  color: #06210f; font-weight: 600; cursor: pointer; font-size: 13px;
}
.vinkje { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------------- */
/* Koppeldialoog                                                          */
/* ---------------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(6,12,8,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.overlay[hidden] { display: none; }
.dialoog {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 20px 22px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
}
.dialoog h3 { margin: 0 0 8px; font-size: 17px; }
.dialoog > .muted { margin: 0 0 16px; line-height: 1.5; }
.dialoog .instelling-veld { margin-bottom: 10px; }
.dialoog .instelling-veld input[type=text],
.dialoog .instelling-veld select {
  background: #101b14; color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 5px 8px; font-size: 13px; min-width: 170px;
}
.dialoog .instelling-veld input:disabled { opacity: .45; }
/* De koppelcode is het enige veld dat overgetypt wordt: groot, met ruimte
   tussen de tekens, zodat je ziet of je je vergist hebt. */
.koppel-code-veld {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px !important; letter-spacing: .18em; text-transform: uppercase;
  text-align: center; width: 190px;
}
.koppel-apparaat {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: #101b14; border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; font-size: 12.5px;
}
.dialoog-acties { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.dialoog-acties button {
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
  border: 1px solid var(--accent); background: var(--accent); color: #06210f;
}
.dialoog-acties button:disabled { opacity: .45; cursor: default; }
.dialoog-status { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.4; }
.dialoog-status:empty { display: none; }
.dialoog-status.fout { color: var(--bad); }


/* Een meting buiten de geijkte schaal: het percentage staat dan geklemd op 0 of
   100 en zegt niets meer. Waarschuwingskleur, geen foutkleur — er is niets
   kapot, de schaal is alleen op. */
.buiten-schaal { color: var(--warn); font-size: 11.5px; }

/* ---- Navigatie tussen dashboard en metingenlog ------------------------ */
.paginanav { display: flex; gap: 4px; margin-right: auto; margin-left: 18px; }
.paginanav a {
  color: var(--muted); text-decoration: none; font-size: 13px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid transparent;
}
.paginanav a:hover { color: var(--text); border-color: var(--panel-border); }
.paginanav a.actief { color: var(--text); background: var(--panel); border-color: var(--panel-border); }

/* ---- Filterbalk op de metingenpagina ---------------------------------- */
/* Auto-fit in plaats van vaste kolommen: op een telefoon staan de velden
   onder elkaar, op een breed scherm naast elkaar, zonder mediaquery. */
.filterbalk {
  display: grid; gap: 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}
.filterveld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
/* Een eigen display-waarde wint het van wat het hidden-attribuut doet. Zonder deze
   regel staan de van/tot-velden er ook als je geen handmatig bereik gekozen hebt. */
.filterveld[hidden] { display: none; }
/* Zelfde probleem, maar dan voor een hele balk: #plant-handmatig heeft zowel
   class="filterbalk" (display: grid) als het hidden-attribuut, en de klasse
   wint het van het attribuut. Zonder deze regel blijven de handmatige
   meetvelden op de plantpagina zichtbaar zodra er een kas gekozen is. */
.filterbalk[hidden] { display: none; }
.filterveld > span { letter-spacing: .03em; }
.filterbalk input, .filterbalk select, .filterbalk textarea {
  background: #101b14; color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 5px 7px; font-size: 13px; width: 100%;
  font-family: inherit;
}
.filterbalk textarea { resize: vertical; }
.filterbalk input:focus, .filterbalk select:focus, .filterbalk textarea:focus {
  outline: 1px solid var(--accent); border-color: var(--accent);
}
.filterveld-bereik .bereik { display: flex; gap: 6px; }
.filterveld-vink { flex-direction: row; align-items: center; gap: 8px; }
.filterveld-vink input { width: auto; }
.filteracties { display: flex; gap: 8px; align-items: center; grid-column: 1 / -1; }
.filteracties button, .knoplink {
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent);
  color: #06210f; font-weight: 600; cursor: pointer; font-size: 13px;
  text-decoration: none; display: inline-block;
}
.filteracties .secundair {
  background: #101b14; color: var(--text); border-color: var(--panel-border); font-weight: 400;
}
.filteracties .secundair:hover { border-color: var(--accent); }

/* ---- De metingentabel -------------------------------------------------- */
/* Horizontaal scrollen in plaats van kolommen laten samenvouwen: getallen die
   over twee regels breken zijn niet meer met elkaar te vergelijken. */
.tabel-wikkel { overflow-x: auto; }
.metingen-tabel {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.metingen-tabel th {
  text-align: left; padding: 7px 10px; position: sticky; top: 0; z-index: 1;
  background: var(--panel); border-bottom: 1px solid var(--panel-border);
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.metingen-tabel th[data-sorteer] { cursor: pointer; user-select: none; }
.metingen-tabel th[data-sorteer]:hover { color: var(--text); }
.metingen-tabel th[data-sorteer]::after { content: " " attr(data-pijl); color: var(--accent); }
.metingen-tabel th.sorteer-actief { color: var(--text); }
.metingen-tabel td { padding: 5px 10px; border-bottom: 1px solid rgba(38,52,41,.5); }
.metingen-tabel tbody tr:hover { background: rgba(76,175,109,.06); }
.metingen-tabel .num { text-align: right; }
.metingen-tabel .tijd .datum { color: var(--muted); font-size: 11.5px; }
.metingen-tabel .eenheid { color: var(--muted); font-size: 10.5px; margin-left: 2px; }
.metingen-tabel .leeg { color: var(--muted); opacity: .5; }
.metingen-tabel .aan { color: var(--accent); }
/* Dalend = natter, de richting van een settlecurve; die mag rustig blijven.
   Stijgend betekent uitdrogen (of een sensor die losschiet) en valt dus op. */
.delta-omlaag { color: var(--muted); }
.delta-omhoog { color: var(--warn); }

.paginering { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.paginering button {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--panel-border);
  background: #101b14; color: var(--text); cursor: pointer; font-size: 13px;
}
.paginering button:hover:not(:disabled) { border-color: var(--accent); }
.paginering button:disabled { opacity: .35; cursor: default; }
.muted.fout { color: var(--bad); }

/* ---- Plantpagina ------------------------------------------------------- */
.plant-kaart {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid rgba(38,52,41,.5);
}
.plant-kaart img {
  width: 160px; height: 160px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--panel-border); flex-shrink: 0;
}
.plant-kaart > div { min-width: 0; }
.plant-kaart p { margin: 4px 0; }
.plant-kaart ul { margin: 4px 0; padding-left: 18px; }
.plant-cijfer { font-size: 15px; font-weight: 600; }
.plant-cijfer.goed { color: var(--accent); }
.plant-cijfer.matig { color: var(--warn); }
.plant-cijfer.slecht { color: var(--bad); }
.plant-kaart-acties { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* Stil en klein: het bijstellen van meetwaarden is het uitzonderingspad, en
   mag de knop ernaast die je meestal wilt niet wegdrukken. */
.plant-kaart-acties button[data-actie="bijstellen"] {
  background: transparent; border: 1px solid var(--panel-border); color: var(--muted);
  border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 11.5px; white-space: nowrap;
}
.plant-kaart-acties button[data-actie="bijstellen"]:hover {
  color: var(--text); border-color: var(--accent);
}
.plant-bijstellen { margin-top: 8px; }
/* De opmerking over de hele breedte: dat is vrije tekst van een paar zinnen en
   die hoort niet in een kolom van 190px naast een temperatuurveld te staan.
   1 / -1 en niet een vast aantal kolommen, want het grid is auto-fit en weet
   zelf hoeveel er passen. */
.plant-bijstel-context { grid-column: 1 / -1; }
/* Zolang het bijstelpaneel open is, staat de gewone knop "Opnieuw beoordelen"
   uit beeld: twee knoppen die er hetzelfde uitzien en iets anders versturen is
   precies hoe ingevulde meetwaarden ongemerkt weggegooid werden. Expliciet, want
   in een flex-container is niet vanzelfsprekend dat [hidden] blijft staan. */
.plant-kaart-acties button[hidden] { display: none; }

/* Instellingsvoorstellen uit de beoordeling. Een eigen kadertje binnen de
   kaart: dit is het enige stuk van de kaart met knoppen die de regeling raken,
   en dat hoort zich af te tekenen tegen de leestekst eromheen. */
.plant-voorstellen {
  margin: 6px 0; padding: 8px 10px; border: 1px solid var(--panel-border);
  border-radius: 8px; background: #101b14;
}
.plant-voorstellen ul { list-style: none; padding-left: 0; }
.plant-voorstel {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 4px 0; font-size: 12.5px; flex-wrap: wrap;
}
.plant-voorstel-acties { display: flex; gap: 6px; flex-shrink: 0; }
.plant-voorstel-acties button {
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--panel-border);
  background: transparent; color: var(--text); cursor: pointer; font-size: 11.5px;
}
.plant-voorstel-acties button:hover:not(:disabled) { border-color: var(--accent); }
.plant-voorstel-status { font-size: 11.5px; }

/* De prompt die het model kreeg, ingeklapt: het is een paar honderd regels, en
   wie alleen het oordeel wil zien moet daar niet langs hoeven scrollen. */
.plant-prompt { margin: 6px 0; }
.plant-prompt summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.plant-prompt summary:hover { color: var(--text); }
/* Scrollen binnen het blok in plaats van de kaart laten uitrekken: opengeklapt
   zou één kaart anders het hele scherm vullen en staat de rest van de lijst
   buiten beeld. white-space: pre-wrap houdt de regelafbrekingen van de prompt
   — die dragen betekenis — zonder dat er ook horizontaal geschoven moet worden. */
.plant-prompt pre {
  margin: 6px 0 0; max-height: 320px; overflow: auto;
  background: #101b14; border: 1px solid var(--panel-border); border-radius: 6px;
  padding: 8px 10px; font-size: 11.5px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.plant-geen-prompt { font-size: 12px; }
/* Op een telefoon staat de foto boven de tekst; naast elkaar wordt allebei
   te smal om nog iets te kunnen zien. */
@media (max-width: 560px) {
  .plant-kaart { flex-direction: column; }
  .plant-kaart img { width: 100%; height: auto; }
}

/* ---- Plantcatalogus (/planten) ------------------------------------------ */
.plant-soort-blok {
  background: #101b14; border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 14px;
}
.plant-soort-blok:last-child { margin-bottom: 0; }
.plant-soort-blok h3 { margin: 0; font-size: 15px; }
.plant-soort-blok > p { margin: 4px 0; font-size: 12.5px; }
#nieuwe-soort-form { margin-top: 14px; }
#nieuwe-soort-form .filterbalk { margin: 10px 0; }
.plant-fases-tabel { margin-top: 8px; }
/* Smal in plaats van de volle breedte van .filterbalk input: dit zijn korte
   getallen naast elkaar in een tabel, geen tekstvelden. */
.plant-fases-tabel input {
  width: 64px; background: var(--panel); color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 3px 5px; font-size: 12.5px; font-family: inherit;
}
.plant-fases-tabel input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

/* De lijst met apparaten die op koppeling wachten. Een ESP32 toont zijn code op
   het schermpje, maar een cameranode heeft geen scherm — dan kies je hem hier. */
.koppel-wachtend { margin-bottom: 12px; }
.koppel-wachtend p { margin: 0 0 6px; font-size: 12px; }
.koppel-wachtend-knop {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--panel-border); background: #101b14; color: var(--text);
  font-size: 13px; font-family: inherit;
}
.koppel-wachtend-knop:hover { border-color: var(--accent); }
.koppel-wachtend-knop .muted { font-size: 11.5px; }

/* Het actuele camerabeeld op de kaskaart. Geen historie: dit is één bestand dat
   overschreven wordt, je kijkt even hoe de plant erbij staat.

   Standaard dichtgeklapt en niet op de volle breedte: de kaart gaat over de
   regeling, en het beeld is iets dat je erbij pakt. Op volle breedte duwde het
   de metingen van twee kassen naast elkaar van het scherm. */
.camerabeeld { margin-top: 12px; }
.camera-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.camera-klap {
  padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--panel-border); background: #101b14; color: var(--muted);
}
.camera-klap:hover { border-color: var(--accent); color: var(--text); }
.camerabeeld img {
  /* Meegroeien met het scherm, maar nooit meer dan ongeveer een derde ervan:
     de kaart gaat over de regeling en het beeld hoort daar niet overheen te
     lopen. De ondergrens van 240px is er voor de telefoon — daar is 30vw zo
     smal dat je er niets meer op ziet, en de kaart zelf begrenst de breedte
     daar toch al. */
  width: 100%; max-width: max(240px, 30vw); border-radius: 8px; display: block;
  background: #101b14; margin-top: 8px;
}
.camera-voet {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: 12px; max-width: max(240px, 30vw);
}
.camera-voet button {
  padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--panel-border); background: #101b14; color: var(--text);
}
.camera-voet button:hover:not(:disabled) { border-color: var(--accent); }
.camera-voet button:disabled { opacity: .5; cursor: default; }

/* De tijdlapse-pagina. Het beeld krijgt een vaste maximale hoogte in plaats van
   mee te schalen met de breedte: bij het doorbladeren springt de pagina anders
   op en neer zodra er een beeld met een andere verhouding tussen zit, en dan
   verschuift de schuifbalk onder je muis weg. */
.tijdlapse-kijker img {
  width: 100%; max-height: 62vh; object-fit: contain;
  border-radius: 8px; display: block; background: #101b14;
}
.tijdlapse-kijker input[type="range"] { width: 100%; margin-top: 10px; }
.tijdlapse-voet {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px;
}
.tijdlapse-voet button {
  padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--panel-border); background: #101b14; color: var(--text);
}
.tijdlapse-voet button:hover { border-color: var(--accent); }
/* Het weggooien staat rechts en apart van de bladerknoppen: dit is het enige
   onomkeerbare in deze balk en hoort niet naast "volgende" te liggen, waar je
   snel achter elkaar op klikt. */
.tijdlapse-voet #tl-weg { margin-left: auto; }
.tijdlapse-voet #tl-weg:hover:not(:disabled) { border-color: var(--bad); }
.tijdlapse-voet #tl-weg:disabled { opacity: .4; cursor: default; }
#tl-weg-status { margin-top: 6px; font-size: 12.5px; }
#tl-film { width: 100%; margin-top: 10px; border-radius: 8px; background: #101b14; }

.tijdlapse-link {
  font-size: 12.5px; color: var(--accent); text-decoration: none; white-space: nowrap;
}
.tijdlapse-link:hover { text-decoration: underline; }

/* Opruimen per categorie. De aantallen en de omvang staan erbij omdat die de
   keuze sturen: 12.000 logregels is een paar megabyte, 12.000 tijdlapsebeelden
   is 25 GB. */
.opruim-lijst { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.opruim-regel {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px; cursor: pointer;
}
.opruim-regel input:disabled + span { opacity: .5; }

/* De regel onder de meldingenlijst: waar komen die meldingen aan. */
.push-regel {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--panel-border);
}
.push-regel .muted { font-size: .85rem; }
.push-regel button[disabled] { opacity: .5; cursor: default; }

/* Logboek: events en handelingen op één tijdlijn. */
.logboek-regel { display: flex; align-items: baseline; gap: .6rem; }
.logboek-tekst { flex: 1; }
/* Een handmatige regel krijgt een streepje aan de zijkant: zo zie je in één
   oogopslag wat een mens deed en wat de kas deed, zonder de kolom te lezen. */
.logboek-regel.is-handmatig { border-left: 2px solid var(--warn); padding-left: .5rem; }
.logboek-weg { opacity: .45; padding: 0 .35rem; line-height: 1; }
.logboek-weg:hover { opacity: 1; color: var(--bad); }
.filterveld-breed { flex: 1 1 18rem; }
.paginering { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; }

/* Plekken: de potten in een kas, in het instellingenpaneel. */
.plek-uitleg { font-size: .85rem; margin: 0 0 .6rem; }
.plek-regel {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem 0; border-bottom: 1px solid var(--panel-border);
}
.plek-regel:last-of-type { border-bottom: none; }
.plek-regel .plek-naam { flex: 1 1 8rem; min-width: 6rem; }
.plek-kanaalveld { display: flex; align-items: center; gap: .35rem; font-size: .85rem;
                   color: var(--muted); }
.plek-kanaalveld input { width: 3.6rem; }
/* De reden staat in de title: wie twijfelt, wijst hem aan. */
.grond-geenpct { cursor: help; text-decoration: underline dotted; }
.plek-meting { flex: 1 1 9rem; font-size: .85rem; }
.plek-weg { opacity: .45; padding: 0 .35rem; line-height: 1; }
.plek-weg:hover { opacity: 1; color: var(--bad); }
/* De kalibratie klapt onder zijn eigen plek uit en beslaat de hele regel. */
.plek-regel .kalibratie { flex: 1 1 100%; margin-top: .5rem; }
.plek-nieuw { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
              margin-top: .7rem; }
.plek-nieuw input[type="text"] { flex: 1 1 8rem; }

/* IJkpunten met de hand invullen, naast de twee kalibratieknoppen. */
.kalibratie-handmatig { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .5rem 0; }
.kalibratie-handmatig label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.kalibratie-handmatig input { width: 5.5rem; }