/* PEKANS — calm, light, green-accented farm-utility theme.
   Retheme by editing :root. Mobile and desktop are both first-class (BRIEF §8):
   breakpoints at 390 / 768 / 1280 / 1920 are explicit, not incidental. */

:root{
  --bg:#f4f3ef; --card:#ffffff; --ink:#1c1c1a; --muted:#5f5e5a; --line:#dcdad2;
  --p-bg:#e1f5ee; --p-ink:#0f6e56;    /* primary green — also theme_color */
  --v-bg:#e6f1fb; --v-ink:#185fa5;    /* info blue */
  --vd-bg:#eeedfe; --vd-ink:#534ab7;  /* purple */
  --ov-bg:#faeeda; --ov-ink:#854f0b;  /* warn amber — also the offline pill */
  --a-bg:#fcebeb;  --a-ink:#a32d2d;   /* danger red */
  /* planting-year palette — fixed by BRIEF §4.1, do not restyle */
  --j2003:#8B5CF6; --j2004:#2563EB; --j2008:#128A2A; --j2018:#F07E13;
  --radius:14px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.pill:active,.key:active,.btn-wide:active,.primary:active,.tile:active,.btn-sm:active{filter:brightness(.93);}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.4;}

/* ───────────────────────── bar ───────────────────────── */
#bar{position:sticky;top:0;z-index:12;display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);
  padding-top:calc(10px + env(safe-area-inset-top));}
#title{font-weight:700;letter-spacing:.5px;flex:1;}
#bar-right{display:flex;align-items:center;gap:10px;}
#net{font-size:12px;padding:3px 9px;border-radius:8px;white-space:nowrap;}
#net.off{background:var(--ov-bg);color:var(--ov-ink);}
#net.on{background:var(--p-bg);color:var(--p-ink);}
.light{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.15);}
.light.green{background:#1aa64b;} .light.yellow{background:#e6b800;} .light.red{background:#d8392b;}
.iconbtn{min-width:44px;min-height:44px;font-size:26px;line-height:1;border:none;background:none;color:var(--ink);}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:40;background:#1c1c1a;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;max-width:90vw;}

/* ───────────────────────── layout ───────────────────────── */
.screen{max-width:560px;margin:0 auto;padding:16px;padding-bottom:calc(28px + env(safe-area-inset-bottom));}
.screen.wide{max-width:1180px;}
.hidden{display:none !important;}
.h1{font-size:26px;margin:12px 0 2px;text-align:center;}
.h2{font-size:20px;margin:4px 0 12px;}
.h3{font-size:16px;margin:16px 0 6px;}
.muted{color:var(--muted);font-size:13px;}
.center{text-align:center;} .block{display:block;width:100%;}
.err{color:var(--a-ink);min-height:20px;}
.vsn{font-size:11px;opacity:.6;margin-top:18px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:10px 0;}
.card.soft{background:var(--p-bg);border-color:transparent;}
.warnbox{background:var(--ov-bg);color:var(--ov-ink);border-radius:12px;padding:10px 12px;font-size:14px;}
.banner{background:var(--v-bg);color:var(--v-ink);border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:12px;}
.fld{display:block;margin:14px 0;} .fld>span{display:block;font-size:14px;margin-bottom:6px;color:var(--muted);}

input[type=date],input[type=text],input[type=search],input[type=number],select,textarea{
  width:100%;min-height:48px;font-size:17px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);font-family:inherit;}
textarea{min-height:76px;resize:vertical;}
.primary{width:100%;min-height:52px;font-size:17px;font-weight:600;border:none;border-radius:var(--radius);
  background:var(--p-ink);color:#fff;margin-top:8px;}
.primary:disabled{opacity:.4;}
.link{background:none;border:none;color:var(--v-ink);font-size:15px;padding:10px 4px;min-height:44px;}
.btn-wide{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;
  font-size:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);}
.btn-sm{min-height:44px;padding:8px 14px;font-size:14px;border:1px solid var(--line);
  border-radius:11px;background:var(--card);color:var(--ink);}
.btn-sm[disabled]{opacity:.4;}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;}
.toolbar input[type=search]{flex:1;min-width:180px;}
.chk{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;}
.chk input{width:22px;height:22px;}
*:focus-visible{outline:3px solid var(--v-ink);outline-offset:2px;}

/* ───────────────────────── keypad ───────────────────────── */
#keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:14px auto 0;}
.key{min-height:64px;font-size:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);}
#pin-dots{font-size:30px;letter-spacing:10px;min-height:40px;}

/* ───────────────────────── home tiles ───────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:12px 0;}
.tile{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;min-height:88px;
  padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);}
.tile b{font-size:16px;} .tile span{font-size:12.5px;color:var(--muted);line-height:1.3;}
.tile.accent{background:var(--p-bg);border-color:transparent;}

/* ───────────────────────── map ───────────────────────── */
.mapwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px;overflow:hidden;}
/* The orchard is 2.4 km wide x 4.7 km tall, so at full width the SVG is twice the
   height of any screen. Bounding BOTH axes lets the intrinsic viewBox ratio scale it
   down to fit, so the whole farm is visible without scrolling. */
.mapwrap svg{display:block;margin:0 auto;max-width:100%;max-height:74vh;width:auto;height:auto;}
@media (max-width:767px){ .mapwrap svg{max-height:62vh;} }
.blokpad{cursor:pointer;}
.blokpad:hover{fill-opacity:.55;}
.blokpad.dim{fill-opacity:.10;stroke-opacity:.35;}
.bloklabel{font-size:11px;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none;}
.bloklabel.sub{font-size:9px;font-weight:400;}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin:10px 0;font-size:13px;}
.legend .li{display:flex;align-items:center;gap:6px;}
.swatch{width:15px;height:15px;border-radius:4px;border:2px solid;}
.swatch.dash{border-style:dashed;background:transparent !important;}

/* ───────────────────────── cultivar stripes ───────────────────────── */
.stripe{display:inline-block;width:34px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.22);
  overflow:hidden;flex:none;vertical-align:middle;}
.stripe i{display:block;height:50%;} .stripe.solid i{height:100%;}
.kvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.kvrow{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;min-height:56px;}
.kvrow b{flex:1;font-weight:600;font-size:15px;}
.kvrow .eie{font-size:11px;background:var(--p-bg);color:var(--p-ink);padding:2px 7px;border-radius:7px;}
.ibtn{min-width:34px;min-height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--v-ink);font-size:15px;font-weight:700;}
.pop{position:fixed;z-index:30;max-width:320px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;box-shadow:0 8px 28px rgba(0,0,0,.18);font-size:14px;}
.pop dl{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;}
.pop dt{color:var(--muted);font-size:12.5px;} .pop dd{margin:0;font-size:13.5px;}

/* ───────────────────────── row lists ───────────────────────── */
.segmented{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.segmented button{min-height:44px;padding:8px 14px;font-size:14px;border:1px solid var(--line);
  border-radius:11px;background:var(--card);color:var(--ink);}
.segmented button[aria-selected=true]{background:var(--p-ink);color:#fff;border-color:var(--p-ink);}
.segmented.sm button{min-height:38px;padding:6px 11px;font-size:13px;}
.rowlist{max-height:64vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);}
.rrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);min-height:44px;}
.rrow:last-child{border-bottom:none;}
.rrow .rn{font-variant-numeric:tabular-nums;font-weight:600;min-width:42px;color:var(--muted);font-size:13px;}
.rrow .rk{flex:1;font-size:14.5px;}
.rrow .rl{font-size:12px;color:var(--v-ink);background:var(--v-bg);padding:2px 7px;border-radius:7px;}
.rrow .rp{font-size:12px;color:var(--vd-ink);background:var(--vd-bg);padding:2px 7px;border-radius:7px;}
.rrow.geenkv .rk{color:var(--muted);font-style:italic;}

/* ───────────────────────── tables ───────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);}
.tbl th,.tbl td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;}
.tbl th{background:var(--p-bg);color:var(--p-ink);font-weight:600;}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;}
.scrollx{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);}
.vlag{background:var(--ov-bg);color:var(--ov-ink);font-size:11px;padding:2px 7px;border-radius:7px;white-space:nowrap;}
.konflik{background:var(--a-bg);color:var(--a-ink);font-size:11px;padding:2px 7px;border-radius:7px;}

/* ───────────────────────── capture grid ───────────────────────── */
.stickytop{position:sticky;top:52px;z-index:8;background:var(--bg);padding:6px 0 4px;}
.progress{font-size:13.5px;color:var(--muted);}
.progress b{color:var(--p-ink);}
.gridwrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);}
table.grid{border-collapse:separate;border-spacing:0;font-size:13px;}
table.grid th,table.grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;}
table.grid thead th{position:sticky;top:0;z-index:3;background:var(--p-bg);color:var(--p-ink);
  padding:7px 6px;font-size:12.5px;white-space:nowrap;}
table.grid tbody th{position:sticky;left:0;z-index:2;background:var(--card);text-align:left;
  padding:6px 9px;font-weight:600;white-space:nowrap;border-right:2px solid var(--line);}
table.grid tbody th small{display:block;font-weight:400;color:var(--muted);font-size:11px;}
table.grid thead th:first-child{left:0;z-index:4;}
tr.sysgap td,tr.sysgap th{background:var(--bg);font-size:11.5px;color:var(--muted);padding:4px 9px;
  position:sticky;left:0;text-transform:uppercase;letter-spacing:.6px;}
.cel{width:100%;min-width:52px;min-height:44px;border:none;background:transparent;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:2px;color:var(--ink);}
.cel:focus-visible{outline:3px solid var(--v-ink);outline-offset:-3px;}
/* state is never colour-alone (BRIEF §5.1): every state carries a glyph too */
.cel.masjien{background:var(--p-bg);color:var(--p-ink);}
.cel.hand{background:var(--v-bg);color:var(--v-ink);}
.cel.geen{background:var(--bg);color:var(--muted);}
.cel.onseker{background:var(--ov-bg);color:var(--ov-ink);}
.cel.leeg{background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(0,0,0,.045) 5px,rgba(0,0,0,.045) 10px);}
.cel.argief{box-shadow:inset 0 0 0 2px rgba(15,110,86,.35);}
.cel .sek{font-size:9px;opacity:.75;}
.cel .kvsplit{font-size:9px;font-weight:700;}
td.selcel{position:relative;}
td.selcel.cur{box-shadow:inset 0 0 0 3px var(--v-ink);}

/* one-block mobile list */
.bloklys{display:flex;flex-direction:column;gap:8px;}
.seisrow{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;width:100%;text-align:left;color:var(--ink);}
.seisrow .jr{font-weight:700;min-width:52px;font-variant-numeric:tabular-nums;}
.seisrow .wat{flex:1;font-size:14px;}
.seisrow .sekb{font-size:11px;padding:2px 7px;border-radius:7px;background:var(--bg);color:var(--muted);}

/* ───────────────────────── plan / field ───────────────────────── */
.planrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;margin-bottom:8px;}
.planrow .nm{flex:1;min-width:130px;font-weight:600;}
.planrow .nm small{display:block;font-weight:400;color:var(--muted);font-size:12px;}
.planrow select,.planrow input{min-height:44px;font-size:14px;width:auto;min-width:92px;}
.ordbtns{display:flex;gap:4px;}
.ordbtns button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:17px;}
.veldlys{display:flex;flex-direction:column;gap:12px;}
.veldkaart{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;}
.veldkaart h3{margin:0 0 2px;font-size:20px;}
.veldkaart .sub{color:var(--muted);font-size:14px;margin-bottom:10px;}
.statbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;}
.statbtns button{min-height:52px;font-size:15px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);}
.statbtns button[aria-pressed=true]{background:var(--p-ink);color:#fff;border-color:var(--p-ink);}

/* ───────────────────────── vragte ───────────────────────── */
.vlag.ok{background:var(--v-bg);color:var(--v-ink);}
.vragtabel{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px;}
.vragtabel th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;padding:2px 6px 4px 0;}
.vragtabel td{padding:4px 6px 4px 0;border-top:1px solid var(--line);vertical-align:top;}
.vragtabel td:last-child,.vragtabel th:last-child{text-align:right;padding-right:0;}
.vragrye{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
/* One tap target per field, 44 px minimum — this is filled in the orchard, one-handed. */
.vragry{display:grid;grid-template-columns:auto 76px 84px 1fr auto;gap:6px;align-items:center;}
.vragry select,.vragry input{min-height:44px;font-size:15px;width:100%;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:0 8px;}
.rymeta{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rywis{min-width:40px;min-height:40px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--muted);font-size:18px;line-height:1;}
@media (max-width:520px){
  /* The planting/cultivar note drops to its own line rather than being truncated away —
     it is the thing that makes a row number unambiguous, so it must stay readable.
     Both it and the × are placed EXPLICITLY: on auto-placement the × follows the note
     and lands on a third line of its own, far from the row it deletes. */
  .vragry{grid-template-columns:auto 1fr 1fr auto;}
  .rymeta{grid-column:1 / -1;grid-row:2;white-space:normal;}
  .rywis{grid-column:4;grid-row:1;}
}

/* ───────────────────────── modal ───────────────────────── */
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:rgba(0,0,0,.45);}
.modal:not(.hidden){display:flex;align-items:flex-end;justify-content:center;}
.modal-card{width:100%;max-width:560px;background:var(--card);border-radius:18px 18px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;}
.opsies{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin:6px 0 2px;}
.opsies button{min-height:48px;font-size:15px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);}
.opsies button[aria-pressed=true]{background:var(--p-ink);color:#fff;border-color:var(--p-ink);}
.opsies.sek button[aria-pressed=true]{background:var(--v-ink);border-color:var(--v-ink);}
.vereis{color:var(--a-ink);font-weight:600;}

/* ───────────────────────── responsive (BRIEF §8) ───────────────────────── */
/* 390 px — one column, grid replaced by the per-block list */
@media (max-width:767px){
  .screen.wide{max-width:100%;}
  .desktoponly{display:none !important;}
  .tiles{grid-template-columns:repeat(2,1fr);}
  .rowlist{max-height:58vh;}
}
/* landscape phone: the grid is exactly what people turn the phone to see */
@media (max-width:767px) and (orientation:landscape){
  .stickytop{position:static;}
  .rowlist,.gridwrap{max-height:80vh;}
}
@media (min-width:768px){
  .mobileonly{display:none !important;}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
}
@media (min-width:1280px){
  .screen.wide{padding:20px 24px;}
  table.grid{font-size:13.5px;}
  .cel{min-width:62px;}
}
@media (min-width:1920px){
  .screen.wide{max-width:1500px;}
  .cel{min-width:72px;min-height:48px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* Print — a crew needs the plan on paper (BRIEF §6). */
@media print{
  #bar,#toast,.toolbar,.tiles,.segmented,#back,.modal,.pop,.link{display:none !important;}
  body{background:#fff;}
  .screen{max-width:100%;padding:0;}
  .screen:not(.printme){display:none !important;}
  .planrow,.veldkaart,.card{break-inside:avoid;border:1px solid #999;}
  .planrow select,.planrow input{border:none;-webkit-appearance:none;appearance:none;}
}

/* ───────────────────────── boomkaart ───────────────────────── */
.bk-wrap{position:relative;background:#20241f;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;height:70vh;touch-action:none;}                 /* touch-action:none -> own pan/pinch */
@media (max-width:767px){ .bk-wrap{height:62vh;} }
.bk-wrap svg{display:block;width:100%;height:100%;}
.bk-wrap #bk-laai{position:absolute;top:46%;left:0;right:0;color:#ddd;}
.bk-toolbar{margin:6px 0;}
.bkdot{stroke-width:1.6;fill-opacity:.12;cursor:pointer;}
.bkdot.st-ok{stroke:#28c940;fill:#28c940;}
.bkdot.st-swak{stroke:#f0a015;fill:#f0a015;}
.bkdot.st-vermis{stroke:#ff4636;fill:#ff4636;}
.bkdot.st-dood{stroke:#000;fill:#d8392b;fill-opacity:.85;}
.bkdot.st-lewendig{stroke:#a9f27a;fill:#28c940;fill-opacity:.55;}
.bkdot.st-herplant{stroke:#26d7e0;fill:#26d7e0;}
.bkring{fill:none;stroke:#ff3df2;stroke-width:1.6;pointer-events:none;}
.bknag{fill:none;stroke:#fff;stroke-width:1.2;pointer-events:none;}       /* nagegaan-in-veld ring */
.bkfokus{fill:none;stroke:#ffe600;stroke-width:3;pointer-events:none;}
.bkgps{fill:#2a7fff;stroke:#fff;stroke-width:2;}
.bkgps-akk{fill:#2a7fff;fill-opacity:.14;stroke:#2a7fff;stroke-opacity:.4;stroke-width:1;}
.bm-id{font-size:20px;font-weight:700;margin:2px 0 0;}
.bm-sub{color:var(--muted);font-size:13px;margin:2px 0 10px;}
.bm-statusse{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0;}
.bm-statusse button{min-height:52px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);font-size:15px;font-weight:600;}
.bm-statusse button[aria-pressed=true]{background:var(--p-ink);color:#fff;border-color:var(--p-ink);}
.bm-afstand{background:var(--v-bg);color:var(--v-ink);border-radius:10px;padding:8px 10px;
  font-size:14px;margin:8px 0;}

/* ───────────────────────── plantpatroon-kolletjies ───────────────────────── */
.rydots{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 14px;}
.rydot{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(0,0,0,.25);
  padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.rydot span{font-size:9.5px;font-weight:700;color:#1c1c1a;background:rgba(255,255,255,.72);
  border-radius:7px;padding:0 3px;line-height:1.3;pointer-events:none;}
.rydot.reg{border:2.5px solid var(--p-ink);}
#huis-kaart svg{max-height:52vh;}