/* Latif Sons Dairy Farm – colours, fonts and radii follow latifsonsdairyfarm.com
   (forest green #15301F/#1C3A2A/#2A4F38, gold #C2953C/#D3AC5C, cream #F8F4E9/#F1EAD8, Fraunces + Archivo). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/archivo-latin.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/fraunces-latin.woff2") format("woff2")}
/* Farm CRM – mobile-first, fonts self-hosted (fast on weak connections, works offline). */
:root{--ink:#211f1a;--muted:#6f6a5a;--line:#e7dfc8;--bg:#f8f4e9;--card:#fff;--green:#1c3a2a;--green-d:#15301f;--mint:#e6eee3;
--amber:#a97a20;--amber-bg:#f7edd2;--red:#c0392b;--red-bg:#fce9e5;--blue:#487bbd;--blue-bg:#e9f1fc;--purple:#7755ab;--purple-bg:#f1eafb;
--radius:14px;--gold:#c2953c;--gold-400:#d3ac5c;--gold-200:#ead6a4;--cream-100:#f1ead8;--sand:#e2d8be;--green-900:#15301f;--shadow:0 8px 26px rgba(21,48,31,.09);--sidebar:236px;--bottom:64px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 "Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--green);text-decoration:none}
h1,h2,h3{font-family:"Fraunces",Georgia,"Times New Roman",serif;letter-spacing:-.3px;margin:0}
h1{font-size:26px;line-height:1.15}h2{font-size:19px}h3{font-size:16px}
.muted{color:var(--muted)}.small{font-size:12.5px}.right{text-align:right}.nowrap{white-space:nowrap}.mt{margin-top:16px}.mb{margin-bottom:16px}

/* ---------- shell ---------- */
.shell{min-height:100vh}
.sidebar{display:none}
.main{padding:16px 14px calc(var(--bottom) + 28px);max-width:1180px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:9px;font:700 22px "Fraunces",Georgia,serif;letter-spacing:-.5px;color:var(--ink)}
.brand i{width:30px;height:30px;border-radius:9px;background:var(--green);color:#fff;font-style:normal;display:grid;place-items:center;font-size:17px}
.topsearch{flex:1;max-width:340px;position:relative}
.topsearch input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}
.userchip{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.avatar{width:34px;height:34px;border-radius:50%;background:#f8dabc;color:#8a5025;display:grid;place-items:center;font-weight:700;font-size:12px}
.linkbtn{background:none;border:0;color:var(--green);font:inherit;font-weight:600;cursor:pointer;padding:0}

.bottombar{position:fixed;left:0;right:0;bottom:0;height:var(--bottom);background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.bottombar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#7a7566;font-size:11px;font-weight:600}
.bottombar a b{font-size:20px;line-height:1;font-weight:400}
.bottombar a.on{color:var(--green)}
.bottombar a.plus b{width:46px;height:46px;margin-top:-22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:26px;box-shadow:0 6px 16px rgba(28,58,42,.35)}
.bottombar a.plus{color:var(--green)}

@media(min-width:900px){
  .shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}
  .sidebar{align-self:start;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);padding:22px 12px;position:sticky;top:0;height:100vh;overflow:auto}
  .sidebar .brand{padding:0 10px 18px}
  .navlabel{font-size:10px;letter-spacing:1px;font-weight:700;color:#a29d8b;padding:14px 12px 6px}
  .sidebar a.nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:#5d5a4c;font-weight:600;margin:1px 0}
  .sidebar a.nav:hover{background:#f1ead8}.sidebar a.nav.on{background:var(--mint);color:var(--green)}
  .sidebar a.nav.soon{color:#a3afaa;font-weight:500}
  .sidebar .count{margin-left:auto;background:var(--amber-bg);color:var(--amber);border-radius:20px;padding:1px 8px;font-size:11px}
  .sidebar .who{margin-top:auto;border-top:1px solid var(--line);padding:14px 8px 0}
  .main{padding:26px 34px 50px;width:100%}
  .bottombar{display:none}
  .topbar .brand,.topbar .userchip{display:none}
  .topsearch{max-width:380px}
}

/* ---------- components ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card+.card{margin-top:14px}
.card h2{margin-bottom:10px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.head p{margin:4px 0 0;color:var(--muted)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g21{grid-template-columns:1.5fr 1fr}}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.stat b{font:700 24px "Fraunces",Georgia,serif;letter-spacing:-.5px}.stat small{display:block;color:var(--muted);font-size:11.5px}
.stat.warn b{color:var(--amber)}.stat.bad b{color:var(--red)}.stat.good b{color:var(--green)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;background:var(--green);color:#fff;font:600 15px inherit;padding:12px 18px;cursor:pointer;min-height:46px}
.btn:hover{background:var(--green-d)}.btn.sm{min-height:36px;padding:7px 12px;font-size:13.5px;border-radius:9px}
.btn.ghost{background:#eee8d6;color:#3d4a3a}.btn.ghost:hover{background:#e5dcc3}
.btn.danger{background:var(--red)}.btn.block{width:100%}.btn.amber{background:var(--amber)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.field{margin:0 0 12px}.field label{display:block;font-size:12.5px;font-weight:700;color:#5b5a48;margin-bottom:5px}
input,select,textarea{font:inherit;color:var(--ink)}
.field input,.field select,.field textarea,.inp{width:100%;padding:11px 12px;border:1px solid #d9d0b6;border-radius:10px;background:#fff;min-height:46px}
textarea{min-height:84px}
input:focus,select:focus,textarea:focus{outline:2px solid #b7c8a4;border-color:#8aa878}
.inp.num,.num{font-variant-numeric:tabular-nums}
.row{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:repeat(3,1fr)}.row.c4{grid-template-columns:repeat(4,1fr)}}
.help{font-size:12px;color:var(--muted);margin-top:4px}

.flash{border-radius:11px;padding:11px 14px;margin-bottom:12px;font-weight:600}
.flash.ok{background:var(--mint);color:var(--green)}.flash.error{background:var(--red-bg);color:#a54636}.flash.info{background:var(--blue-bg);color:#37659f}

table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#8d8877;padding:8px 8px;white-space:nowrap}
td{padding:11px 8px;border-top:1px solid var(--line);vertical-align:middle}
tr.click{cursor:pointer}tr.click:hover td{background:#fdfbf4}
.tablewrap{overflow-x:auto;margin:0 -6px}
.hide-sm{display:none}@media(min-width:760px){.hide-sm{display:table-cell}}

.badge{display:inline-block;border-radius:20px;padding:3px 10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.st-purchased{background:#eceff1;color:#5b6b73}.st-arrived{background:var(--blue-bg);color:var(--blue)}
.st-active{background:#e2ebe0;color:#2a4f38}.st-ready_for_sale{background:var(--amber-bg);color:var(--amber)}
.st-selected{background:#ffe8bf;color:#a5680d}.st-loaded{background:var(--purple-bg);color:var(--purple)}
.st-sold{background:#d3e0d0;color:#15301f}.st-dead{background:#2a2a2a;color:#fff}.st-removed{background:#e3e3e3;color:#666}
.st-treatment{background:var(--red-bg);color:var(--red)}.st-quarantine{background:#e5edf9;color:#3b64a4}.st-withdrawal{background:#fff0d6;color:#9a6106}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}

.thumb{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,#b98259,#e9c09c);object-fit:cover;display:grid;place-items:center;font-size:22px;flex:none}
img.thumb{background:#ddd}
.animal{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:700}
.animal small{display:block;color:var(--muted);font-weight:500;font-size:12px}

.attn{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--ink)}
.attn:first-of-type{border-top:0}
.attn .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none}
.ic.amber{background:var(--amber-bg);color:var(--amber)}.ic.red{background:var(--red-bg);color:var(--red)}.ic.blue{background:var(--blue-bg);color:var(--blue)}.ic.green{background:var(--mint);color:var(--green)}
.attn b{display:block}.attn span{color:var(--muted);font-size:12.5px}.attn .go{margin-left:auto;color:#b3ac97;font-size:22px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 10px;min-height:118px;color:var(--ink);font-weight:700;text-align:center;box-shadow:var(--shadow);cursor:pointer;font:inherit}
.tile b{font-size:30px;font-weight:400}.tile:hover{border-color:#b4d8c5}
.tile.off{opacity:.45;pointer-events:none}
.quick{display:flex;gap:8px;flex-wrap:wrap}
.quick a{display:inline-flex;gap:7px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 14px;color:var(--ink);font-weight:600}

.pen{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.pen:first-of-type{border-top:0}
.penchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.pchip{display:inline-flex;align-items:center;gap:6px;background:#f4efe0;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-weight:600;cursor:pointer;user-select:none}
.pchip input{width:18px;height:18px;min-height:0}
.pchip:has(input:checked){background:var(--mint);border-color:#b7c8a4}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
.timeline .d{width:64px;flex:none;color:var(--muted);font-size:12.5px}
.timeline .t{flex:1}.timeline small{color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
.bar{height:8px;background:#ece5d2;border-radius:9px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:#3f7a55}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:640px){.gallery{grid-template-columns:repeat(5,1fr)}}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#ddd}
.chart{width:100%;height:auto}

details.act{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:8px}
details.act>summary{list-style:none;cursor:pointer;padding:13px 14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
details.act>summary::-webkit-details-marker{display:none}
details.act[open]>summary{border-bottom:1px solid var(--line)}
details.act .body{padding:14px}
.symptoms{display:flex;gap:8px;flex-wrap:wrap}

.picker{position:relative}
.results{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-top:4px;max-height:60vh;overflow:auto}
.results a{display:flex;align-items:center;gap:11px;padding:10px 12px;color:var(--ink);border-top:1px solid var(--line)}
.results a:first-child{border-top:0}.results a:hover{background:#faf7ee}.results small{color:var(--muted)}

.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{width:min(400px,100%);padding:26px}
.empty{text-align:center;color:var(--muted);padding:26px 10px}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:#efe9d9;border-radius:6px;padding:1px 6px}

.animrow{display:grid;grid-template-columns:1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.wrow{display:grid;grid-template-columns:1fr 84px 96px;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.wrow.flag{background:#fff8ea;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px}
.wrow .w-in{min-height:48px;font-size:18px;text-align:right;font-weight:700}
.delta{font-weight:700;font-size:13px}.delta.pos{color:var(--green)}.delta.neg{color:var(--red)}
.warnline{grid-column:1/-1;color:#9a6106;font-size:12.5px;font-weight:600}
.sticky-save{position:sticky;bottom:calc(var(--bottom) + 8px);background:linear-gradient(transparent,var(--bg) 30%);padding:14px 0 4px;z-index:5}
@media(min-width:900px){.sticky-save{bottom:0}}
.costrow{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px}
.arow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fffdf8}
@media(min-width:760px){.arow{grid-template-columns:1.1fr .9fr 1.2fr .8fr .9fr 1fr auto;align-items:end}}
.arow .field{margin:0}.arow .field label{font-size:11px}
.totals{display:flex;gap:18px;flex-wrap:wrap;background:var(--mint);border-radius:12px;padding:12px 16px;font-weight:700;color:#19563d}
.totals span small{display:block;font-weight:500;color:#4c7e68}

/* ---------- brand ---------- */
.brand{gap:10px;font-size:18px;line-height:1.1}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--line);flex:none}
.brand span{display:flex;flex-direction:column}.brand span b{font:700 17px "Fraunces",Georgia,serif;letter-spacing:.2px;color:var(--green-900)}
.brand span small{font:600 10px "Archivo",sans-serif;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase;margin-top:2px}
.sidebar a.nav.on{box-shadow:inset 3px 0 0 var(--gold);border-radius:4px 9px 9px 4px}
.sidebar .count{background:var(--gold-200)!important;color:#6f5433!important}
.btn.amber,.btn.gold{background:var(--gold);color:#15301f}.btn.amber:hover,.btn.gold:hover{background:var(--gold-400)}
.head h1{color:var(--green-900)}
.totals{background:var(--cream-100);color:var(--green-900)}.totals span small{color:#6f5433}
.login .card{border-top:4px solid var(--gold);text-align:center}
.login .card form{text-align:left}
.login .logo{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 6px;display:block;border:1px solid var(--line);background:#fff}
.login h1{font-size:23px;margin-top:6px}.login .tag{color:var(--gold);font-weight:700;letter-spacing:1.6px;font-size:11px;text-transform:uppercase;margin:4px 0 16px}
@media(min-width:900px){.sidebar .brand{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:6px}}
/* ---------- narrow phones (360px) ---------- */
/* clip (not hidden): "hidden" turns body into a scroll container and breaks the sticky sidebar */
body{overflow-x:clip}
.hero{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.hero .hero-main{flex:1 1 200px;min-width:0}
.hero .hero-weight{text-align:right}
@media(max-width:520px){.hero .hero-weight{width:100%;text-align:left;border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:space-between;align-items:baseline}}
.topsearch{min-width:0}
.tablewrap table{min-width:0}
/* ---------- Cash Book ---------- */
.cat-gold{background:#f4e6c1;color:#7a5a12}.cat-green{background:#dfeadb;color:#2a4f38}.cat-red{background:#f8dcd6;color:#a3402f}
.cat-blue{background:#dde8f6;color:#33598f}.cat-purple{background:#e8def5;color:#5e4390}.cat-grey{background:#ebe7da;color:#5f5b4d}
.stack{display:flex;height:16px;border-radius:9px;overflow:hidden;background:#eee8d6;margin:6px 0 14px;gap:2px}
.stack i{display:block;height:100%}
.stack i.cat-gold,.dot.cat-gold{background:#c2953c}.stack i.cat-green,.dot.cat-green{background:#3f7a55}.stack i.cat-red,.dot.cat-red{background:#c0574a}
.stack i.cat-blue,.dot.cat-blue{background:#5b86c0}.stack i.cat-purple,.dot.cat-purple{background:#8567bd}.stack i.cat-grey,.dot.cat-grey{background:#a29d8b}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.legend>div{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--line)}
.legend>div:first-child{border-top:0}.legend span:nth-child(2){flex:1}.legend b{font-variant-numeric:tabular-nums}.legend em{font-style:normal;color:var(--muted);width:38px;text-align:right;font-size:12.5px}
.stats2{display:grid;gap:12px;align-content:start}
.stat.big b{font-size:32px;color:var(--green-900)}
.qa .qrow{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.qa .q-desc{grid-column:1/-1}.qa .q-go{grid-column:1/-1}
.qa .field{margin:0}.qa .amt{font-weight:700;font-size:17px}
@media(min-width:900px){.qa .qrow{grid-template-columns:150px 190px 1fr 140px 130px 90px;align-items:end}.qa .q-desc,.qa .q-go{grid-column:auto}}
details.inline{margin-top:10px}details.inline>summary{cursor:pointer;color:var(--green);font-weight:600;font-size:13px;list-style:none}
details.inline input{margin-top:8px}
.filters{display:grid;gap:10px}
.chipbar{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;color:var(--ink);font-weight:600;font-size:13.5px}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}.chip.on .dot{outline:2px solid rgba(255,255,255,.7)}
.searchrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.searchrow .inp{flex:1 1 200px;min-height:40px;padding:8px 12px}
.sortlink{margin-left:auto;font-weight:600;font-size:13px}
.card.cbcard{padding:0;overflow:hidden}   /* stronger than the phone .card padding, so the list runs edge to edge */
table.cb{width:100%;border-collapse:collapse}
.cb thead th{background:#faf6ea;position:sticky;top:0;padding:11px 14px;border-bottom:1px solid var(--line)}
.cb td{padding:11px 14px;vertical-align:top}
.cb tr.day td{background:#f4efdf;padding:8px 14px;border-top:1px solid var(--line)}
.dayhead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;color:var(--green-900)}
.dayhead span{color:var(--muted);font-size:13px}.dayhead span b{color:var(--green-900)}
.cb tr.entry td{border-top:1px solid #f0ead8}
.cb tr.entry:hover td{background:#fdfbf4}
.cb .c-amt{text-align:right;font-size:15.5px;white-space:nowrap}.cb .c-bal{text-align:right;white-space:nowrap}
.cb .c-cat{width:1%;white-space:nowrap}
.pill{display:inline-block;background:var(--cream-100);border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:600;color:#6f5433;margin-left:4px}
.editrow td{background:#fbf8ee!important;border-top:1px dashed var(--sand)}
.removeform{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.removeform .inp{max-width:260px;min-height:38px;padding:6px 10px}
@media(max-width:759px){
  /* the rows become cards, so the table itself must be a full-width block too (else it shrinks and leaves a gap) */
  table.cb,.cb tbody,.cb tfoot{display:block;width:100%}
  .cb tfoot tr.cbtotal{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:#faf6ea;border-top:2px solid var(--sand)}
  .cb tfoot tr.cbtotal td{display:block;border:0}
  .cb tfoot tr.cbtotal td:empty{display:none}
  .cb thead{display:none}
  .cb tr.entry{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 14px;border-top:1px solid #f0ead8}
  .cb tr.entry td{display:block;padding:0;border:0}
  .cb tr.entry .c-cat{grid-column:1;grid-row:1;width:auto}
  .cb tr.entry .c-amt{grid-column:2;grid-row:1;align-self:center}
  .cb tr.entry .c-desc{grid-column:1/-1;grid-row:2;padding-top:4px}
  .cb tr.entry .c-act{grid-column:1/-1;grid-row:3;text-align:right}
  .cb tr.day td,.cb tr.editrow td{display:block}
  .cb tr.day,.cb tr.editrow{display:block}
}
@media print{
  .sidebar,.bottombar,.topbar,.noprint,.flash{display:none!important}
  .shell{display:block}.main{padding:0;max-width:none}body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd}.cb thead th{position:static}
}
/* ---------- checklist ---------- */
[hidden]{display:none!important}
.btn.lg{min-height:58px;font-size:18px;border-radius:14px}
.badge.ck-not{background:#ece8dc;color:#6f6a5a}.badge.ck-prog{background:var(--amber-bg);color:var(--amber)}.badge.ck-done{background:var(--mint);color:var(--green)}
.ckcard{display:block;color:inherit}.ckcard-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}.ckcard-top b{font-size:17px}
.ckprog-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.ckprog-count{font:700 19px 'Fraunces',Georgia,serif;color:var(--green-900)}
.ckbar{height:14px;margin:10px 0}.ckbar i{transition:width .25s}
.ckdone{background:var(--mint);border-radius:12px;padding:12px 14px;margin-top:6px;display:flex;flex-direction:column;gap:2px;color:var(--green-900)}.ckdone b{font-size:19px}
.ckitem{background:#fff;border:1.5px solid var(--line);border-radius:16px;margin-bottom:10px;padding:4px 14px 8px;transition:background .15s,border-color .15s}
.ckitem.done{background:#f3f8f1;border-color:#b9d3bf}.ckitem.saving{opacity:.6}
.ckrow{display:flex;gap:14px;align-items:flex-start;padding:12px 0 6px;cursor:pointer;margin:0}
.ckbox{-webkit-appearance:none;appearance:none;flex:0 0 40px;width:40px;height:40px;margin:2px 0 0;border:3px solid #8eae98;border-radius:11px;background:#fff;display:grid;place-content:center;cursor:pointer;padding:0}
.ckbox:checked{background:var(--green);border-color:var(--green)}
.ckbox:checked::after{content:"✓";color:#fff;font:700 28px/1 'Archivo',Arial,sans-serif}
.ckbox:disabled{opacity:.5;cursor:not-allowed}
.ckbox:focus-visible{outline:3px solid var(--gold-400);outline-offset:2px}
.cktext{display:flex;flex-direction:column;gap:3px;min-width:0}.cktext b{font-size:19px;line-height:1.3;font-weight:600}
.ckitem.done .cktext b{color:var(--green-900)}
.ckn{color:var(--muted);font-weight:600}
.ckmeta{font-size:14px;color:var(--green);line-height:1.4}
.cknoteline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 0 4px 54px;font-size:14px}
.cknoteform{display:flex;gap:8px;padding:4px 0 6px 54px}.cknoteform .inp{flex:1;min-width:0}
.ckerr{background:var(--red-bg);color:var(--red);border-radius:10px;padding:9px 12px;margin:2px 0 6px;font-weight:600;font-size:14px}
.ckhist td,.ckhist th{padding:9px 8px}
.cksetup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.cksetup:last-child{border-bottom:0}
.cksetup-main{display:grid;grid-template-columns:30px minmax(0,1fr) 132px 84px;gap:10px;align-items:center;margin:0}
.cksetup-main .ckn{text-align:right;font-size:16px}
.cksetup-main .inp,.cksetup-main .btn{min-height:46px;height:46px}
.cksetup-main select.inp{padding-right:30px}
.cksetup-tools{display:flex;gap:8px;align-items:center}.cksetup-tools form{margin:0}
.cksetup-tools .btn{min-height:46px;height:46px;padding:0 14px;white-space:nowrap}
.cksetup-tools .rm{color:var(--red);font-weight:700;padding:0 6px;min-height:46px}
.cksetup-add{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:12px;align-items:end}
@media (max-width:900px){.cksetup{grid-template-columns:1fr}.cksetup-tools{padding-left:40px}}
@media (max-width:560px){
  .cksetup-main{grid-template-columns:28px minmax(0,1fr) 96px}
  .cksetup-main input.inp{grid-column:2 / 4}
  .cksetup-main select.inp{grid-column:2}
  .cksetup-main .btn{grid-column:3}
  .cksetup-tools{padding-left:38px;flex-wrap:wrap}
  .cksetup-add{grid-template-columns:1fr}
}
@media (max-width:640px){.cknoteline,.cknoteform{padding-left:0}.ckprog-count{font-size:17px}.cktext b{font-size:18px}}

/* ---------- users, profile, permissions ---------- */
.whomenu{position:relative}
.whomenu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%}
.whomenu>summary::-webkit-details-marker{display:none}
.whomenu .caret{margin-left:auto;color:var(--muted);transition:transform .15s}
.whomenu[open] .caret{transform:rotate(180deg)}
.whopop{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;z-index:30}
.whopop a,.whopop button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:9px;color:var(--ink);font-weight:600;font-size:14px;background:none;border:0;cursor:pointer}
.whopop a:hover,.whopop button:hover{background:var(--mint)}
.whopop form{margin:0}
.uchip{display:flex;align-items:center;gap:10px;color:inherit}
.uchip span{display:flex;flex-direction:column;min-width:0}.uchip small{color:var(--muted);font-size:12.5px}
.utable td{vertical-align:middle}
.uprofile{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.uprofile .ustatus{margin-left:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.uform{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start}
.uphoto{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.uphoto .avatar{width:96px;height:96px;font-size:34px}
.ufields{min-width:0}
.deflist{display:flex;flex-direction:column}
.deflist>div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.deflist>div:last-child{border-bottom:0}.deflist span{color:var(--muted)}.deflist b{text-align:right}
.chip.off{opacity:.45;text-decoration:line-through}
.pwrap{position:relative}
.pwrap .inp{padding-right:46px}
.peye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;font-size:17px;cursor:pointer;padding:8px;line-height:1;opacity:.6}
.peye:hover{opacity:1}
.permhead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.permhead form{margin:0}
.permgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.permcard{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
.permcard.on{border-color:#b9d3bf;background:#f7faf6}
.permtop{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0}
.permtop span{display:flex;flex-direction:column;gap:1px}.permtop b{font-size:16px}.permtop small{font-size:12.5px}
.ckbox.sm{flex:0 0 28px;width:28px;height:28px;border-width:2px;border-radius:8px}
.ckbox.sm:checked::after{font-size:19px}
.permlevels{display:flex;flex-direction:column;gap:6px;margin:10px 0 0 40px;padding-top:9px;border-top:1px solid var(--line)}
.permlevel{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;cursor:pointer;margin:0}
.permlevel input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:var(--green)}
.permcard:not(.on) .permlevels{opacity:.45}
@media (max-width:640px){
  .uform{grid-template-columns:1fr}
  .uphoto{flex-direction:row;justify-content:flex-start;text-align:left;align-items:center;flex-wrap:wrap}
  .uprofile .ustatus{margin-left:0;align-items:flex-start;flex-direction:row}
  .permgrid{grid-template-columns:1fr}
  .deflist>div{flex-direction:column;gap:2px}.deflist b{text-align:left}
}

/* ==========================================================================
   Sign-in: a clean forest-green panel for the form, the farm photographs on the other side.
   No picture ever sits behind the form. On a phone the photographs become a slim strip on top.
   ========================================================================== */
:root{--panelw:clamp(440px,38vw,580px);--stripH:clamp(112px,19vh,170px)}
.authbody{min-height:100vh;min-height:100svh;background:#08160e;color:#fff}

/* --- the panel with the form --- */
.login{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:grid;place-items:center;
  padding:calc(var(--stripH) + 28px) 24px 74px;text-align:left;
  background:
    radial-gradient(110% 60% at 0% 0%,rgba(194,149,60,.20) 0,rgba(194,149,60,0) 55%),
    radial-gradient(90% 55% at 100% 100%,rgba(63,122,85,.34) 0,rgba(63,122,85,0) 62%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 1px,rgba(255,255,255,0) 1px 15px),
    linear-gradient(172deg,#143622 0,#0d2317 52%,#08160e 100%)}
.login .card{width:min(392px,100%);padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;text-align:left;animation:authrise .6s cubic-bezier(.2,.7,.3,1) both}
.login .card::before{display:none}
@keyframes authrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.login .card form{text-align:left}
.login .logo{display:block;width:84px;height:84px;margin:0 0 22px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(255,255,255,.88);box-shadow:0 14px 30px -12px rgba(0,0,0,.7),0 0 0 7px rgba(255,255,255,.07)}
.login .tag{margin:0 0 10px;color:var(--gold-400);font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  display:flex;align-items:center;gap:12px}
.login .tag::before{content:"";width:30px;height:2px;border-radius:2px;background:var(--gold-400)}
.login h1{margin:0 0 8px;font:600 clamp(30px,3vw,40px)/1.08 'Fraunces',Georgia,serif;letter-spacing:-.6px;color:#fff}
.login .sub{margin:0 0 28px;color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.5}
.login .field{margin-bottom:16px}
.login .field label{display:block;margin-bottom:7px;color:rgba(255,255,255,.88);font-size:12.5px;font-weight:700;letter-spacing:.3px}
.login .field input{min-height:52px;border-radius:14px;color:#fff;font-size:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20);
  transition:border-color .15s,box-shadow .15s,background .15s}
.login .field input::placeholder{color:rgba(255,255,255,.45)}
.login .field input:hover{border-color:rgba(255,255,255,.34)}
.login .field input:focus{outline:0;background:rgba(255,255,255,.11);border-color:var(--gold-400);box-shadow:0 0 0 4px rgba(211,172,92,.20)}
.login .field input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 60px #163a26 inset;caret-color:#fff}
.login .peye{color:#fff}
.login .btn.block{min-height:54px;margin-top:10px;font-size:16px;font-weight:700;letter-spacing:.3px;border-radius:14px;
  color:#1c2a10;background:linear-gradient(180deg,#e2c078 0,#c2953c 100%);
  box-shadow:0 16px 30px -14px rgba(194,149,60,.8),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .15s,filter .15s}
.login .btn.block:hover{filter:brightness(1.07);transform:translateY(-1px)}
.login .btn.block:active{transform:none}
.login a{color:var(--gold-400);font-weight:700}
.login a:hover{color:#f1d795}
.login .muted,.login .small{color:rgba(255,255,255,.66)}
.login .help{color:rgba(255,255,255,.58)}
.login .linkrow{margin-top:20px;font-size:14.5px}
.login .flash{text-align:left;border-radius:14px;margin:0 0 18px;color:#fff;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.10)}
.login .flash.error{background:rgba(192,57,43,.38);border-color:rgba(255,160,150,.45)}
.login .flash.ok{background:rgba(63,122,85,.48);border-color:rgba(170,230,190,.42)}
.authfoot{position:fixed;left:0;right:0;bottom:0;z-index:3;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  text-align:center;color:rgba(255,255,255,.55);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;pointer-events:none}
.authfoot::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--gold-400);margin:0 auto 9px;box-shadow:0 0 0 4px rgba(211,172,92,.16)}

/* --- the photographs: one wide picture and three below it, edge to edge --- */
.authbg{position:absolute;z-index:3;left:0;right:0;top:0;height:var(--stripH);overflow:hidden;background:#050d08}
.authmosaic{position:absolute;inset:0;display:grid;gap:3px;background:#050d08;
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));grid-template-rows:repeat(var(--rows,2),minmax(0,1fr))}
.authmosaic.bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.authtile{position:relative;margin:0;overflow:hidden;background:#0d2216}
.authtile.wide{grid-column:span var(--span,1)}
.authtile img{position:absolute;inset:-5%;width:110%;height:110%;max-width:none;object-fit:cover;display:block;
  opacity:0;transition:opacity 1.4s ease;filter:saturate(1.06) contrast(1.06) brightness(.95);
  animation:authkb 40s ease-in-out infinite alternate}
.authtile img.in{opacity:1}
.authtile:nth-child(1) img{transform-origin:70% 60%}
.authtile:nth-child(2) img{transform-origin:30% 55%;animation-duration:46s;animation-direction:alternate-reverse}
.authtile:nth-child(3) img{transform-origin:65% 45%;animation-duration:43s;animation-direction:alternate-reverse}
.authtile:nth-child(4) img{transform-origin:35% 50%;animation-duration:49s}
@keyframes authkb{from{transform:scale(1) translate3d(-1%,-.7%,0)}to{transform:scale(1.09) translate3d(1.2%,.9%,0)}}
.authtile::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -80px 80px -64px rgba(2,9,5,.5)}
/* the photographs melt into the panel: a soft dark edge on the panel side, and a fine gold line where they meet */
.authtint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,22,14,0) 45%,rgba(8,22,14,.92) 100%)}

/* --- computers: panel on the left, photographs fill the right side of the screen --- */
@media (min-width:1000px){
  .login{position:fixed;left:0;top:0;bottom:0;width:var(--panelw);min-height:0;overflow-y:auto;padding:36px 44px 74px;
    box-shadow:22px 0 60px -18px rgba(0,0,0,.65)}
  .login::after{content:"";position:fixed;left:calc(var(--panelw) - 1px);top:0;bottom:0;width:2px;z-index:4;pointer-events:none;
    background:linear-gradient(180deg,rgba(211,172,92,0) 0,rgba(211,172,92,.85) 50%,rgba(211,172,92,0) 100%)}
  .authbg{position:fixed;inset:0 0 0 var(--panelw);height:auto;z-index:1}
  .authmosaic.bento{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1.5fr) minmax(0,1fr)}
  .authmosaic.bento .authtile:nth-child(1){grid-column:1 / 4;grid-row:1}
  .authmosaic.bento .authtile:nth-child(2){grid-column:1;grid-row:2}
  .authmosaic.bento .authtile:nth-child(3){grid-column:2;grid-row:2}
  .authmosaic.bento .authtile:nth-child(4){grid-column:3;grid-row:2}
  .authmosaic.duo{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .authmosaic.trio{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.35fr) minmax(0,1fr)}
  .authmosaic.trio .authtile:nth-child(1){grid-column:1 / 3;grid-row:1}
  .authmosaic.trio .authtile:nth-child(2){grid-column:1;grid-row:2}
  .authmosaic.trio .authtile:nth-child(3){grid-column:2;grid-row:2}
  .authtint{background:linear-gradient(90deg,rgba(8,22,14,.55) 0,rgba(8,22,14,0) 26%),linear-gradient(0deg,rgba(2,8,5,.40) 0,rgba(2,8,5,0) 32%)}
  .authfoot{right:auto;width:var(--panelw);z-index:5}
}
/* phones and tablets: the photographs are a slim strip on top, then the panel */
@media (max-width:999px){
  /* the strip on top: every picture side by side in one row, whatever their number */
  .authtile{height:100%}
  .authmosaic,.authmosaic.bento,.authmosaic.trio,.authmosaic.duo{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
  .authmosaic .authtile:nth-child(n){grid-column:auto;grid-row:auto}
}
@media (max-width:560px){
  .login{padding:calc(var(--stripH) + 24px) 22px 70px}
  .login .logo{width:72px;height:72px;margin-bottom:18px}
  .login .sub{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .authtile img{animation:none;transition:none}
  .login .card{animation:none}
}

/* ==========================================================================
   Home: the farm at a glance
   ========================================================================== */
.sec{font:600 15px/1 'Archivo',system-ui,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:22px 0 11px}
.sec:first-child{margin-top:0}

/* --- welcome (dashboard only – the animal profile has its own .hero) --- */
.dashhero{position:relative;overflow:hidden;border-radius:22px;margin-bottom:22px;color:#fff;isolation:isolate;
  box-shadow:0 22px 50px -28px rgba(21,48,31,.55)}
.hero-bg{position:absolute;inset:0;z-index:-1;background-color:#0d2317;background-image:url("img/login/farm-1.jpg");background-size:cover;background-position:center 40%;
  transform:scale(1.06);animation:heroDrift 44s ease-in-out infinite alternate}
.dashhero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(9,28,18,.95) 0,rgba(12,36,23,.90) 46%,rgba(14,42,27,.80) 74%,rgba(16,48,30,.74) 100%),
    linear-gradient(to top,rgba(9,28,18,.55) 0,rgba(9,28,18,0) 42%),
    radial-gradient(70% 120% at 100% 0%,rgba(194,149,60,.26) 0,rgba(194,149,60,0) 60%)}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(-1%,-.6%,0)}to{transform:scale(1.12) translate3d(1%,.8%,0)}}
.hero-in{padding:26px 28px}
.hero-who{display:flex;align-items:center;gap:16px}
.hero-who .avatar{border:3px solid rgba(255,255,255,.65);box-shadow:0 10px 24px -10px rgba(0,0,0,.6);background:rgba(255,255,255,.18);color:#fff;font-weight:700}
.dashhero h1{margin:0;font-size:clamp(24px,2.5vw,32px);line-height:1.12;color:#fff;letter-spacing:-.4px}
.hero-role{margin:5px 0 0;color:var(--gold-400);font-weight:700;font-size:13px;letter-spacing:.6px;text-transform:uppercase}
.hero-sum{margin:16px 0 0;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.92);max-width:62ch}
.hero-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.18)}
.hero-date{color:rgba(255,255,255,.72);font-size:13.5px}
.hero-alert{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:#fff;background:rgba(192,57,43,.34);border:1px solid rgba(255,150,140,.5)}
.hero-alert i{width:8px;height:8px;border-radius:50%;background:#ff7d6e;box-shadow:0 0 0 0 rgba(255,125,110,.7);animation:pulse 2.2s infinite}
.hero-alert.calm{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.9)}
.hero-alert.calm i{background:#9fdcae;animation:none;box-shadow:none}
.hero-alert.amber{background:rgba(194,149,60,.30);border-color:rgba(232,196,120,.6);color:#fff}
.hero-alert.amber i{background:#f0c56a;animation:none;box-shadow:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,125,110,.65)}70%{box-shadow:0 0 0 9px rgba(255,125,110,0)}100%{box-shadow:0 0 0 0 rgba(255,125,110,0)}}

/* --- quick actions --- */
.tiles2{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
@media (min-width:900px){.tiles2{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile2{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tile2:hover{transform:translateY(-2px);border-color:#cdd9c8;box-shadow:0 14px 26px -16px rgba(21,48,31,.45)}
.tile2-ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(160deg,var(--mint) 0,#dbe7d6 100%);color:var(--green-900)}
.tile2-t{display:flex;flex-direction:column;min-width:0}
.tile2-t b{font-size:15px;line-height:1.2}
.tile2-t small{color:var(--muted);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- the four numbers --- */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:900px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 17px 15px}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.kpi.good::before{background:#3f7a55}.kpi.warn::before{background:var(--gold)}.kpi.bad::before{background:var(--red)}
.kpi-ic{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--cream-100)}
.kpi.good .kpi-ic{background:var(--mint);color:var(--green)}
.kpi.warn .kpi-ic{background:#f7edd2;color:var(--amber)}
.kpi.bad .kpi-ic{background:var(--red-bg);color:var(--red)}
.kpi-n{display:block;font:700 40px/1 'Fraunces',Georgia,serif;letter-spacing:-1.5px;color:var(--green-900)}
.kpi.warn .kpi-n{color:var(--amber)}.kpi.bad .kpi-n{color:var(--red)}
.kpi-l{display:block;margin-top:7px;font-weight:700;font-size:14.5px}
.kpi small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* --- the two columns --- */
.dash{display:grid;gap:16px}
@media (min-width:1080px){.dash{grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);align-items:start}}
.dash-main,.dash-side{display:grid;gap:16px;align-content:start}
.dash .card{border-radius:18px;margin:0}

/* --- needs attention --- */
.attncard .attn{border-radius:13px;padding:12px 13px;margin-top:8px;border:1px solid var(--line);border-left:4px solid var(--line);
  transition:transform .15s ease,box-shadow .15s ease}
.attncard .attn:first-of-type{margin-top:2px}
.attncard .attn:hover{transform:translateX(2px);box-shadow:0 10px 20px -16px rgba(21,48,31,.5)}
.attn.t-red{border-left-color:var(--red);background:linear-gradient(90deg,rgba(252,233,229,.75),#fff 55%)}
.attn.t-amber{border-left-color:var(--amber);background:linear-gradient(90deg,rgba(247,237,210,.7),#fff 55%)}
.attn.t-blue{border-left-color:var(--blue);background:linear-gradient(90deg,rgba(233,241,252,.7),#fff 55%)}
.attn .lvl{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:2px}
.attn.t-red .lvl{color:var(--red)}.attn.t-amber .lvl{color:var(--amber)}.attn.t-blue .lvl{color:var(--blue)}
.allgood{display:flex;gap:13px;align-items:center;padding:16px 4px}
.allgood span{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:21px;background:var(--mint);color:var(--green)}
.allgood b{display:block}.allgood small{color:var(--muted)}

/* --- activity --- */
.feed{list-style:none;margin:0;padding:0}
.feed-day{margin:14px 0 6px;font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.feed-day:first-child{margin-top:4px}
.feed-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.feed-row+.feed-day{margin-top:16px}
.feed-ic{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:var(--cream-100);color:var(--green-900)}
.feed-row div{flex:1;min-width:0}
.feed-row b{display:inline-block}
.feed-row span{display:block;color:var(--muted);font-size:13px}
.feed-row time{color:var(--muted);font-size:12px;white-space:nowrap;padding-top:2px}

/* --- weight --- */
.wbig{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 12px}
.wbig>div{background:var(--cream-100);border-radius:14px;padding:12px 13px}
.wbig span{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}
.wbig b{font:700 24px/1 'Fraunces',Georgia,serif;letter-spacing:-.6px;color:var(--green-900)}
.wgain{background:var(--mint) !important}.wgain b{color:var(--green)}
.mini{margin:12px 0 4px}
.mini-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.mini-top b{color:var(--ink)}
.mini-link{display:inline-block;margin-top:4px;font-size:13px;font-weight:700}
.pen.total{border-top-width:2px;border-top-color:var(--sand)}

/* --- pens --- */
.penbar{display:block;padding:10px 0;border-top:1px solid var(--line);color:inherit}
.penbar:first-of-type{border-top:0}
.penbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.penbar-top em{font-style:normal;color:var(--muted);font-size:12px}
.penbar-top b{font-weight:700}
.penbar .bar{margin:0;height:9px;background:#ece5d2}
.penbar .bar i{background:#3f7a55;transition:width .5s ease}
.penbar.amber .bar i{background:var(--gold)}
.penbar.red .bar i{background:var(--red)}
.penbar.gold .bar i{background:var(--gold-400)}
.penbar:hover .penbar-top b{color:var(--green)}

@media (max-width:760px){
  .hero-in{padding:20px 18px}
  .hero-who{gap:12px}
  .hero-who .avatar{width:56px !important;height:56px !important;font-size:21px !important}
  .hero-sum{font-size:15px;margin-top:13px}
  .hero-alert{margin-left:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:13px 13px 12px;border-radius:15px}
  .kpi-n{font-size:31px}
  .kpi-ic{width:31px;height:31px;font-size:15px;right:10px;top:10px}
  .kpi-l{font-size:13px}
  .wbig{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg{animation:none}
  .hero-alert i{animation:none}
  .tile2:hover,.attncard .attn:hover{transform:none}
}

/* ---------- sidebar sub-menus (arranged under Settings → Menu Settings) ---------- */
.sidebar .navgrp{margin:1px 0}
.sidebar .navgrp>summary{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:#5d5a4c;font-weight:600;cursor:pointer;list-style:none}
.sidebar .navgrp>summary::-webkit-details-marker{display:none}
.sidebar .navgrp>summary::marker{content:""}
.sidebar .navgrp>summary:hover{background:#f1ead8}
.sidebar .navgrp[open]>summary{color:var(--green)}
.sidebar .navgrp>summary .caret{margin-left:auto;font-style:normal;color:#a29d8b;transition:transform .15s}
.sidebar .navgrp>summary .count+.caret{margin-left:6px}
.sidebar .navgrp[open]>summary .caret{transform:rotate(180deg)}
.sidebar a.nav.sub{margin-left:15px;padding-left:12px;border-left:1px solid var(--line);border-radius:0 9px 9px 0;font-weight:500;font-size:14px}
.sidebar a.nav.sub.on{border-left-color:var(--gold)}

/* ---------- Settings → Menu Settings ---------- */
.note{background:var(--blue-bg);border:1px solid #cfe0f5;border-radius:12px;padding:12px 14px;font-size:13.5px;color:#31506f;line-height:1.5}
.note b{display:block;margin-bottom:3px}
.mgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:1040px){.mgrid{grid-template-columns:minmax(0,1fr) 262px;align-items:start}}
.mhead{display:none}
.mrow{display:grid;gap:10px;padding:10px 4px;border-top:1px solid var(--line)}
.mrow:first-of-type{border-top:0}
.mrow.grp{background:#faf6ea;border-radius:10px;border-top-color:transparent}
.mrow.sub{box-shadow:inset 3px 0 0 var(--sand);padding-left:16px}
.mrow.empty-sub{padding-top:0;padding-bottom:10px;border-top:0}
.mrow-name{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.mrow-ic{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:8px;background:var(--mint);color:var(--green)}
.mrow-name .inp{flex:1 1 160px;min-height:40px;padding:8px 10px}
.mrow-name small{flex-basis:100%;padding-left:37px}
.mrow-where .inp,.mrow-ord .inp{min-height:40px;padding:8px 10px}
.mrow-ord .inp{text-align:center}
.mshow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#5b5a48}
.tagp{display:inline-block;background:var(--cream-100);border-radius:20px;padding:5px 11px;font-size:12px;font-weight:700;color:#6f5433}
.tagp.lock{background:var(--mint);color:var(--green)}
@media(max-width:759px){
  .mrow-where::before,.mrow-ord::before{display:block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;color:#a29d8b;margin-bottom:4px}
  .mrow-where::before{content:"Where it sits"}
  .mrow-ord::before{content:"Order"}
  .mrow-ord{max-width:120px}
}
@media(min-width:760px){
  .mhead{display:grid;grid-template-columns:minmax(0,1fr) 190px 78px 126px;gap:10px;padding:0 4px 8px;font-size:11px;letter-spacing:.6px;font-weight:700;color:#a29d8b;text-transform:uppercase}
  .mrow{grid-template-columns:minmax(0,1fr) 190px 78px 126px;align-items:center}
  .mrow.empty-sub{grid-template-columns:1fr}
}
.mprev-box{border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.mprev-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-weight:600;font-size:13.5px;color:#5d5a4c}
.mprev-item>span{width:18px;text-align:center;flex:0 0 18px}
.mprev-item.grp{background:#faf6ea}
.mprev-item.grp i{margin-left:auto;font-style:normal;color:#a29d8b}
.mprev-item.sub{margin-left:12px;padding-left:10px;border-left:1px solid var(--line);font-weight:500;font-size:13px}
.mprev-item .count{margin-left:auto;background:var(--amber-bg);color:var(--amber);border-radius:20px;padding:1px 8px;font-size:11px}
.mprev-item .count+i{margin-left:6px}
.tile{position:relative}
.tile i.count{position:absolute;top:10px;right:12px;background:var(--amber-bg);color:var(--amber);border-radius:20px;padding:1px 8px;font-size:11px;font-style:normal;font-weight:700}
.sidebar .navgrp>summary.on{background:var(--mint);color:var(--green);box-shadow:inset 3px 0 0 var(--gold);border-radius:4px 9px 9px 4px}

/* ---------- final polish: tables, gutters and spacing ---------- */
/* A wide table scrolls sideways inside its card. Make that obvious instead of silently clipping. */
.tablewrap{position:relative;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tablewrap th:first-child,.tablewrap td:first-child{padding-left:10px}
.tablewrap th:last-child,.tablewrap td:last-child{padding-right:10px}
/* the action column of a list may wrap onto a second line on a phone rather than push the table wider */
@media(max-width:520px){
  .utable td.right.nowrap,.tablewrap td.right.nowrap{white-space:normal;line-height:1.9}
  th,td{padding-left:6px;padding-right:6px}
  .tablewrap th:first-child,.tablewrap td:first-child{padding-left:8px}
  .tablewrap th:last-child,.tablewrap td:last-child{padding-right:8px}
}
/* a comfortable gutter on phones – nothing sits right against the screen edge */
@media(max-width:899px){
  .main{padding-left:16px;padding-right:16px}
  .head{margin-bottom:14px}
  .head h1{font-size:23px}
  .card{padding:15px 14px}
}
/* headings keep the same air above them everywhere */
h2.sec{margin:22px 0 10px}
.card>h2:first-child{margin-top:0}
.tablewrap.can-scroll{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}

/* A card with no padding of its own (.cbcard) still needs its table to line up with the
   headings above it, instead of running into the card's edge. */
.cbcard .tablewrap{margin:0}
.cbcard .tablewrap th:first-child,.cbcard .tablewrap td:first-child{padding-left:16px}
.cbcard .tablewrap th:last-child,.cbcard .tablewrap td:last-child{padding-right:16px}
.cbcard .pen{padding-left:0;padding-right:0}

/* ---------- dashboard tidy-up ---------- */
/* On a wide screen the sidebar already carries the logo and your name, so the top strip is only a
   search. Left on its own in the middle of the page it read as an unfinished form field. */
@media(min-width:900px){
  .topbar{justify-content:flex-end;margin-bottom:18px}
  .topsearch{flex:0 1 300px}
  .topsearch input{padding-left:36px;min-height:42px;background-color:#fdfcf7;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8877' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:11px 50%;background-size:16px}
  .topsearch input:focus{background-color:#fff}
}
/* The hero sat in a lot of its own air; the banner and the rest of the page now share one rhythm. */
.dashhero{margin-bottom:18px}
.hero-in{padding:24px 26px 22px}
.hero-sum{margin-top:13px}
.hero-foot{margin-top:15px;padding-top:13px}
/* Section labels were so faint they floated free of the cards they belong to. */
.sec{font:700 11.5px/1 'Archivo',system-ui,sans-serif;letter-spacing:1.3px;text-transform:uppercase;
  color:#8d8877;margin:20px 0 10px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
h2.sec{margin:20px 0 10px}
/* The four numbers wasted a corner of every card next to the icon. */
.kpi{padding:15px 16px 14px}
.kpi-ic{width:32px;height:32px;border-radius:10px;font-size:15px;right:13px;top:13px}
.kpi-n{font-size:36px;letter-spacing:-1.2px}
.kpi-l{margin-top:6px;font-size:14px}

/* ---------- dashboard: a calmer, fresher grid ---------- */
/* One radius scale instead of four competing ones. */
.dashhero{border-radius:20px}
.tile2,.kpi,.dash .card{border-radius:16px}

/* The four numbers: icon and label share the top line, the number owns the rest.
   Before, the icon floated in a corner and the right half of every card was empty. */
.kpi{padding:14px 16px 15px}
.kpi-top{display:flex;align-items:center;gap:9px;min-width:0}
.kpi-ic{position:static;width:28px;height:28px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1}
.kpi-ic i{font-style:normal;line-height:1;display:block}
.kpi-l{display:block;margin:0;font-weight:700;font-size:13.5px;color:#5b5a48;letter-spacing:.1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-n{display:block;margin-top:9px;font-size:38px;letter-spacing:-1.4px}
.kpi small{margin-top:3px}

/* Recent activity reads as a timeline: one thread down the page, a dot on it per event,
   and the icon really centred in its dot (emoji have their own metrics, so centre it explicitly). */
.feed{position:relative}
.feed-row{align-items:center;gap:13px;position:relative}
/* ".feed-row span" is more specific than ".feed-ic", so the icon needs the row in its
   selector too – otherwise the span rule wins and the glyph never centres. */
.feed-row .feed-ic{width:34px;height:34px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;margin:0;background:var(--cream-100);color:var(--green-900);
  box-shadow:0 1px 0 rgba(21,48,31,.04)}
.feed-row .feed-ic svg{width:17px;height:17px;display:block}
.feed-row .feed-ic.ev-weigh{background:var(--mint);color:var(--green)}
.feed-row .feed-ic.ev-health{background:var(--red-bg);color:var(--red)}
.feed-row .feed-ic.ev-move{background:var(--blue-bg);color:var(--blue)}
.feed-row .feed-ic.ev-arrive{background:var(--purple-bg);color:var(--purple)}
.feed-row .feed-ic.ev-money{background:#f4e6c1;color:#7a5a12}
.feed-row .feed-ic.ev-tag{background:var(--gold-200);color:#6f5433}
.feed-row .feed-ic.ev-ok{background:#e2ebe0;color:#2a4f38}
.feed-row .feed-ic.ev-bad{background:#2a2a2a;color:#fff}
.feed-row .feed-ic.ev-edit{background:var(--cream-100);color:#6f6a5a}
.feed-row time{padding-top:0;align-self:center}
.feed-row b{font-size:14.5px}
.feed-row div span{font-size:13px;margin-top:1px}

/* Quick actions sit a little tighter so the row reads as one band, not eight islands. */
.tile2{padding:13px 14px;gap:12px}
.tile2-ic{width:40px;height:40px;border-radius:12px;font-size:18px;line-height:1}

/* Weight & growth: the two figure boxes match the radius of everything else. */
.wbig>div{border-radius:13px}
/* drawn icons sit exactly in the middle of their badge, at every size */
.tile2-ic svg{width:19px;height:19px;display:block}
.kpi-ic svg{width:15px;height:15px;display:block;stroke-width:2}
.allgood span svg{width:20px;height:20px;display:block}

/* ---------- Team Management ---------- */
/* "Mark paid" opens a small confirmation near the button, so the payment date and method are
   always chosen on purpose rather than assumed.
   The button lives inside a table that scrolls sideways (.tablewrap{overflow-x:auto}). A popup
   positioned "absolute" is clipped by that scroller and drags a scrollbar in with it, so instead
   it is "fixed" (escapes any ancestor's overflow) and placed with a few lines of JS
   (assets/app.js, "pay/unpay/adjust confirmations") that reads the button's real position. */
.paypop{display:inline-block;text-align:left}
.paypop>summary{list-style:none;cursor:pointer;display:inline-flex}
.paypop>summary::-webkit-details-marker{display:none}
.paypop>summary::marker{content:""}
.paybox{position:fixed;z-index:60;width:270px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);
  overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(21,48,31,.55);padding:14px}
.paybox h3{margin:0 0 8px}
.paybox .field{margin-bottom:9px}
.paybox .inp{min-height:40px;padding:8px 10px}
.paypop+.paypop{margin-left:8px}
/* dims the page behind the popup on a phone, where the confirmation is worth full attention */
@media(max-width:520px){
  .paypop[open]::before{content:"";position:fixed;inset:0;background:rgba(21,48,31,.32);z-index:55}
}
tfoot td{border-top:2px solid var(--sand);padding-top:10px;padding-bottom:10px}
.hide-lg{display:block}
@media(min-width:760px){.hide-lg{display:none}}
.uchip small{display:block}
/* "Add a month that was missed" – filling in salary history by hand, inside the padding-less card */
.addmonth{padding:14px 16px 16px;border-top:1px solid var(--line);background:#fdfbf4}
.addmonth h3{margin:0 0 2px}
.addmonth .row{margin-top:10px}
.addmonth .field{margin-bottom:0}
.paidtick{display:flex;align-items:flex-start;gap:10px;margin:12px 0 2px;cursor:pointer}
.paidtick span{display:block;line-height:1.35}
.paidtick small{display:block;font-size:12px}

/* ---------- photo gallery: remove, and open big ---------- */
.shot{position:relative}
.shot img{display:block;cursor:zoom-in}
.shot form{position:absolute;top:5px;right:5px;margin:0;line-height:0}
.shot-x{width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(21,48,31,.62);color:#fff;font:400 17px/1 'Archivo',Arial,sans-serif;
  display:grid;place-items:center;opacity:0;transition:opacity .15s,background .15s}
.shot:hover .shot-x,.shot-x:focus-visible{opacity:1}
.shot-x:hover{background:var(--red)}
@media(hover:none){.shot-x{opacity:1}}   /* on a phone there is no hover, so always show it */

/* the big view: the photo fills the screen, anything clicked outside it closes */
.lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:28px 16px;
  background:rgba(12,24,17,.88);cursor:zoom-out}
.lightbox img{max-width:100%;max-height:calc(100vh - 96px);border-radius:12px;
  box-shadow:0 30px 70px -30px #000;background:#0c1811}
.lightbox figcaption{color:rgba(255,255,255,.82);font-size:13px;text-align:center;margin-top:10px;text-transform:capitalize}
.lightbox .lb-x{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font:400 24px/1 'Archivo',Arial,sans-serif;cursor:pointer;
  display:grid;place-items:center}
.lightbox .lb-x:hover{background:rgba(255,255,255,.3)}

/* ---------- Farm Expenses: the money band, the add form, the filter row ---------- */
/* The two summary blocks used to sit side by side as plain cards and read as clutter. They are
   now one dark band, the same language as the dashboard welcome, so the total is the first
   thing the eye lands on and the breakdown sits under it instead of beside it. */
.cbhero{position:relative;overflow:hidden;border-radius:20px;color:#fff;isolation:isolate;
  background:linear-gradient(115deg,#0f2a1b 0,#1c3a2a 46%,#24503a 100%);
  box-shadow:0 22px 50px -30px rgba(21,48,31,.6)}
.cbhero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(75% 130% at 100% 0%,rgba(194,149,60,.26) 0,rgba(194,149,60,0) 62%)}
.cbhero-in{padding:22px 24px}
.cbhero-figs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 34px}
.cbfig span{display:block;color:rgba(255,255,255,.72);font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:700}
.cbfig b{display:block;font:700 34px/1.05 'Fraunces',Georgia,serif;letter-spacing:-1px;margin-top:5px}
.cbfig small{display:block;color:rgba(255,255,255,.66);font-size:12.5px;margin-top:4px}
.cbfig.sm b{font-size:23px}
.cbhero-split{margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.16)}
.cbhero .stack{background:rgba(255,255,255,.14);margin:0 0 10px;height:12px}
.cblegend{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:rgba(255,255,255,.88)}
.cblegend span{display:inline-flex;align-items:center;gap:7px}
.cblegend .dot{width:9px;height:9px;border-radius:50%;flex:none}
.cblegend b{font-variant-numeric:tabular-nums}
.cblegend em{font-style:normal;color:rgba(255,255,255,.6);font-size:12px}

/* the add form: one honest grid that keeps its shape from a phone up to a wide screen */
.cbadd .cbadd-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.cbadd .cb-desc{grid-column:1/-1}
.cbadd .field{margin:0}
.cbadd .amt{font-weight:700;font-size:17px}
@media(min-width:900px){
  .cbadd .cbadd-grid{grid-template-columns:150px 190px minmax(0,1fr) 140px 130px;align-items:end}
  .cbadd .cb-desc{grid-column:auto}
}
/* Add comes last: after "charge to animals", the invoice and the note */
.cbadd-go{display:flex;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cbadd-go .btn{min-width:200px}
@media(max-width:759px){.cbadd-go .btn{width:100%}}
.cbnewcat{margin-top:10px!important;max-width:460px}
.cbadd-extra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px}
.cbadd-extra details.inline{margin-top:0}
.cbfile{display:inline-flex;align-items:center;gap:9px;cursor:pointer;flex-wrap:wrap}
.cbfile-btn{display:inline-flex;align-items:center;gap:6px;border:1px dashed #cfc5a8;border-radius:10px;
  padding:7px 13px;font-size:13px;font-weight:600;color:var(--green);background:#fdfbf4}
.cbfile:hover .cbfile-btn{border-color:var(--green);background:var(--mint)}
.cbfile-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editrow .cbfile{margin-top:4px}

/* filters: dropdowns, because a chip per month stops working after a year */
.cbfilter{display:grid;gap:10px;grid-template-columns:1fr 1fr;align-items:end}
.cbfilter .field{margin:0}
.cbfilter .cbf-search{grid-column:1/-1}
.cbfilter .cbf-go{grid-column:1/-1;display:flex;gap:8px}
.cbfilter .sortlink{grid-column:1/-1}
@media(min-width:900px){
  .cbfilter{grid-template-columns:190px 190px minmax(0,1fr) auto auto}
  .cbfilter .cbf-search,.cbfilter .cbf-go,.cbfilter .sortlink{grid-column:auto}
  .cbfilter .sortlink{margin-left:0;padding-bottom:12px}
}
@media(max-width:760px){.cbhero-in{padding:18px 16px}.cbfig b{font-size:29px}}
/* the ledger's closing total, so the figure is there at whichever end you are reading */
.cb tfoot .cbtotal td{background:#faf6ea;border-top:2px solid var(--sand);padding-top:13px;padding-bottom:13px}
.cb tfoot .cbtotal b{font-size:15px}
.cb tfoot .cbtotal .c-amt b{font:700 19px 'Fraunces',Georgia,serif;letter-spacing:-.4px;color:var(--green-900)}
.cb tfoot .cbtotal .muted{margin-left:8px}

/* ---------- Checklist: day-wise plans (daily screen, timeline, template builder) ---------- */
.cksec{font:700 20px 'Fraunces',Georgia,serif;color:var(--green-900);margin:22px 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cksec.overdue{color:var(--red)}
.ckchips,.ckmini{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 0}
.ckmini{margin-top:4px}
.ckchip{display:inline-flex;align-items:baseline;gap:5px;border-radius:999px;padding:4px 12px;font-size:13.5px;font-weight:600;background:#f1ede1;color:#5d574a}
.ckchip b{font-size:16px}
.ckchip.today{background:var(--blue-bg);color:var(--blue)}.ckchip.overdue{background:var(--red-bg);color:var(--red)}
.ckchip.upcoming{background:var(--amber-bg);color:var(--amber)}.ckchip.done{background:var(--mint);color:var(--green)}
.ckchip.zero{background:#f1ede1;color:var(--muted)}
.ckday{background:#fff;border:1.5px solid var(--line);border-left:6px solid #cfc7b0;border-radius:16px;padding:12px 14px;margin-bottom:12px}
.ckday.today{border-left-color:var(--blue)}.ckday.overdue{border-left-color:var(--red)}.ckday.upcoming{border-left-color:var(--gold-400)}
.ckday.done,.ckday.alldone{border-left-color:var(--green)}
.ckday.builder{border-left-color:var(--green)}
.ckday-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:8px}
details.ckday>summary{list-style:none;cursor:pointer;margin:0}
details.ckday>summary::-webkit-details-marker{display:none}
details.ckday[open]>summary{margin-bottom:8px}
.ckdayno{display:inline-block;background:var(--green-900);color:#fff;border-radius:10px;padding:4px 11px;font:700 17px 'Fraunces',Georgia,serif;white-space:nowrap}
.ckdayno.sm{font-size:14px;padding:3px 9px}
.ckdate{font-weight:600;color:var(--ink)}
.ckstate{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.ckstate.today{background:var(--blue-bg);color:var(--blue)}.ckstate.overdue{background:var(--red-bg);color:var(--red)}
.ckstate.upcoming{background:var(--amber-bg);color:var(--amber)}.ckstate.done{background:var(--mint);color:var(--green)}
.ckcount{font-weight:700;color:var(--muted);font-size:14px}
.ckplan{margin-left:auto;font-size:14px;color:var(--green)}
.ckday .ckitem{margin-bottom:8px}.ckday .ckitem:last-child{margin-bottom:0}
.ckdesc{font-size:14px;color:var(--muted);line-height:1.35}
.cklink{font-weight:700;color:var(--green)}
.cktl{position:relative}
.cktl-dot{font-size:18px;line-height:1}
.ckday.tl.upcoming:not([open]),.ckday.tl.done:not([open]){background:#fcfaf4}
.ckupcoming{padding:4px 14px}
.ckup{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:inherit}
.ckup:last-child{border-bottom:0}
.ckup-main{flex:1;min-width:0;display:flex;flex-direction:column}.ckup-main b{font-weight:600}
.ckinfo{background:var(--blue-bg);color:#27466f;border-radius:12px;padding:10px 14px;font-size:14px}
.ckdaystrip,.ckquickdays{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ckquickdays{margin:-4px 0 10px}
.ckdaypill{display:inline-flex;gap:5px;align-items:center;border:1px solid var(--line);background:#faf7ee;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600;color:var(--green-900);cursor:default}
button.ckdaypill{cursor:pointer;font-family:inherit}button.ckdaypill:hover{border-color:var(--green)}
.ckadd-grid{display:grid;grid-template-columns:110px minmax(0,1fr) 140px;gap:12px;align-items:end}
.ckadd-day .inp{font:700 20px 'Fraunces',Georgia,serif;text-align:center}
.ckmore>summary{list-style:none;display:inline-block;margin:0 0 8px}.ckmore>summary::-webkit-details-marker{display:none}
.ckaddto{margin-left:auto}
.cktask{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.cktask .ckn{text-align:right}
.cktask-main b{font-weight:600;margin-right:6px}
.cktask-tools{display:flex;gap:6px;align-items:center}.cktask-tools form{margin:0}
.cktask-tools .btn{min-height:38px;padding:0 11px}
.cktask-edit{grid-column:1/-1;background:#fbf8ee;border-radius:12px;padding:12px}
.cktpl .ckcard-top a{color:var(--green-900)}
@media (max-width:640px){
  .ckadd-grid{grid-template-columns:90px minmax(0,1fr)}.ckadd-grid .field:last-child{grid-column:1/-1}
  .cktask{grid-template-columns:22px minmax(0,1fr)}.cktask-tools{grid-column:2;flex-wrap:wrap}
  .ckplan{margin-left:0;flex-basis:100%}
  .ckday{padding:10px 10px;border-radius:14px}
  .ckup{flex-wrap:wrap}.ckup .ckstate{margin-left:auto}
}

/* ---------- Feeding: today's 10 PM cut-off reminder (only while a pen is still not fed) ---------- */
.feedcut{display:flex;align-items:center;gap:14px;background:var(--amber-bg);border:1.5px solid #e9c77e;border-left:6px solid var(--amber);border-radius:14px;padding:14px 16px;margin-bottom:14px;color:#6b4a0c}
.feedcut-ic{font-size:26px;line-height:1;flex:none}
.feedcut-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.feedcut-main>b{font-size:16px;color:#5a3d06}
.feedcut-main>span{font-size:14px}
.feedcut-pens{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.feedcut-pens a{background:#fff;border:1px solid #e9c77e;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600;color:#6b4a0c}
.feedcut .btn{flex:none}
@media (max-width:640px){.feedcut{flex-wrap:wrap;padding:12px}.feedcut .btn{width:100%;justify-content:center}}

/* ---------- Equipment & Assets ---------- */
.eqcode{display:inline-block;font:700 15px 'Archivo',Arial,sans-serif;letter-spacing:1.5px;background:var(--green-900);color:#fff;border-radius:8px;padding:4px 10px}
.eqk{display:inline-block;width:18px;text-align:center;color:var(--muted)}
.eqpay{display:grid;gap:8px}
.eqopt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;margin:0}
.eqopt:has(input:checked){border-color:var(--green);background:#f3f8f1}
.eqopt input{margin-top:3px}
.eqopt span{display:flex;flex-direction:column;gap:2px}.eqopt small{color:var(--muted);font-size:13px}
.eqphoto{position:relative}
.eqphoto .badge{position:absolute;top:6px;left:6px}
.eqphoto-tools{display:flex;gap:10px;justify-content:center;margin-top:4px}.eqphoto-tools form{margin:0}
.eqpay .eqopt{display:flex;font-size:14.5px;font-weight:400;color:var(--ink);margin:0}
.eqpay .eqopt b{font-weight:700}
.eqpay .eqopt input{width:20px;height:20px;min-height:0;padding:0;margin:2px 0 0;flex:none;accent-color:var(--green)}
.eqtl .d{width:76px}

/* ---------- Farm Expenses: charge to animals ---------- */
.cbcharge{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:12px}
.cbcharge label{font-size:13px;font-weight:700;color:#5b5a48;margin:0}
.cbcharge .inp{width:auto;min-width:240px;max-width:100%;min-height:42px;padding:8px 12px}
.cbcharge .help{margin:0}

/* ---------- Animal profile: one row of action buttons, forms open under it ---------- */
.qact{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.qbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;
  font:600 14px 'Archivo',Arial,sans-serif;color:var(--green-900);cursor:pointer;min-height:40px;white-space:nowrap}
.qbtn:hover{border-color:var(--green)}
.qbtn.on{background:var(--green-900);border-color:var(--green-900);color:#fff}
.qpanels{margin-top:10px}
details.qpanel:not([open]){display:none}
details.qpanel[open]{border-color:var(--green);box-shadow:0 8px 22px -14px rgba(21,48,31,.45)}
details.qpanel>summary::after{content:"✕";color:var(--muted);font-weight:400;margin-left:12px}
@media (max-width:640px){.qact{gap:6px}.qbtn{padding:7px 12px;font-size:13.5px}}

/* ---------- layout safety: wide content (a report table, a long line) scrolls inside its own box and
   never stretches a grid column or the whole page sideways ---------- */
.main{min-width:0}
.grid>*{min-width:0}
/* shown from laptop width only (tablets keep the essential columns, no sideways scrolling) */
.hide-md{display:none}@media(min-width:1100px){.hide-md{display:table-cell}}