/* Bliss Stable Care — mobile-first, big tap targets, minimal reading.
   The staff app commits to one warm light look on purpose (no dark mode):
   outdoor use in sunlight, and one consistent look for training. */
:root{
  --bg:#faf6ee; --card:#fff; --ink:#2b2118; --ink-soft:#8a7a63;
  --line:#e8dfcd; --brand:#7a4a21; --brand-ink:#fff;
  --good:#2e7d32; --good-bg:#e6f4e7; --good-line:#bcdcbe;
  --warn:#c77800; --warn-bg:#fff7e8; --warn-line:#ecd9ad;
  --bad:#c62828;  --bad-bg:#fde7e7;
  --shadow:0 1px 3px rgba(60,40,10,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{ margin:0; background:var(--bg); color:var(--ink); min-height:100dvh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; }
a{color:inherit; text-decoration:none}
img{max-width:100%}

/* header */
.apphead{ background:var(--brand); color:var(--brand-ink); padding:14px 16px 12px;
  padding-top:max(14px, env(safe-area-inset-top)); position:sticky; top:0; z-index:3;}
.apphead .row{display:flex; align-items:center; gap:12px; max-width:640px; margin:0 auto;}
.apphead .titles{flex:1; min-width:0}
.apphead h1{font-size:20px; margin:0; font-weight:800; letter-spacing:.01em;}
.apphead .sub{font-size:13px; opacity:.85; margin-top:2px;}
.backbtn{ background:rgba(255,255,255,.18); color:#fff; font-size:24px; line-height:36px;
  border-radius:10px; width:40px; height:40px; text-align:center; flex:0 0 auto; font-weight:700;}
.headform{flex:0 0 auto}
.headbtn{ background:rgba(255,255,255,.18); border:none; color:#fff; font-size:18px;
  border-radius:10px; width:40px; height:40px; cursor:pointer;}

/* layout */
.body{ flex:1; width:100%; max-width:640px; margin:0 auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  padding-bottom:max(16px, env(safe-area-inset-bottom));}
.center-col{justify-content:center; gap:16px}
.center-col form{display:flex; flex-direction:column; gap:14px}
.alert{ background:var(--bad-bg); color:var(--bad); border-radius:12px; padding:14px 16px;
  font-weight:700; font-size:16px; text-align:center;}
.hint{text-align:center; color:var(--ink-soft); font-size:15px; margin:0}
.legend{color:var(--ink-soft); font-size:12.5px; line-height:1.6; margin:0}

/* big buttons */
.bigbtn{ display:flex; align-items:center; gap:14px; width:100%; border:1.5px solid var(--line);
  border-radius:16px; padding:14px 16px; font:inherit; font-size:18px; font-weight:700;
  text-align:left; min-height:68px; background:var(--card); color:var(--ink);
  box-shadow:var(--shadow); cursor:pointer;}
.bigbtn .em{font-size:30px; flex:0 0 auto}
.bigbtn .lbl{flex:1; min-width:0}
.bigbtn .lbl small{display:block; font-weight:500; font-size:13px; color:var(--ink-soft); margin-top:2px;}
.bigbtn .chev{color:var(--ink-soft); font-size:24px}
.bigbtn.done{background:var(--good-bg); border-color:var(--good-line);}
.bigbtn.done .chip{color:var(--good)}
.bigbtn.todo{background:var(--warn-bg); border-color:var(--warn-line);}
.bigbtn.todo .chip{color:var(--warn)}
.bigbtn.todo.missed .chip{color:var(--bad)}
.bigbtn.locked{opacity:.5}
.bigbtn.locked .chip{color:var(--ink-soft); font-weight:600}
.bigbtn .chip{margin-left:auto; font-weight:800; font-size:14px; text-align:right; flex:0 0 auto;}
.bigbtn .chip small{font-weight:600; font-size:11.5px}
.bigbtn.primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand); justify-content:center;}
.quickrow{display:flex; gap:8px; flex-wrap:wrap}
.quickbtn{ flex:1 1 130px; text-align:center; background:var(--card); border:1.5px solid var(--line);
  border-radius:12px; padding:12px 8px; font-weight:800; font-size:15px; box-shadow:var(--shadow);}
.quickbtn.alerty{background:var(--bad-bg); color:var(--bad); border-color:#f2c1c1}

/* horse grid */
.hgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(min-width:480px){ .hgrid{grid-template-columns:repeat(3,1fr)} }
.hcard{ display:flex; flex-direction:column; align-items:center; gap:6px;
  border:1.5px solid var(--line); background:var(--card); border-radius:16px;
  padding:16px 10px 14px; text-align:center; box-shadow:var(--shadow);}
.hcard .nm{font-size:18px; font-weight:800;}
.hava{ width:72px; height:72px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:40px; overflow:hidden; background:#efe4d0; flex:0 0 auto;}
.hava img{width:100%; height:100%; object-fit:cover}
.hava.sm{width:48px; height:48px; font-size:28px}
.badge{font-size:14px; font-weight:800; border-radius:20px; padding:4px 12px;}
.badge.g{background:var(--good-bg); color:var(--good)}
.badge.a{background:#fff3dd; color:var(--warn)}
.badge.r{background:var(--bad-bg); color:var(--bad)}

/* bottom tab bar */
.tabbar{ position:sticky; bottom:0; display:flex; border-top:1.5px solid var(--line);
  background:var(--card); padding-bottom:env(safe-area-inset-bottom); z-index:3;}
.tabbar a{ flex:1; text-align:center; padding:8px 4px 10px; color:var(--ink-soft);
  font-weight:800; font-size:12px;}
.tabbar a .em{display:block; font-size:26px; margin-bottom:2px;}
.tabbar a.on{color:var(--brand)}

/* login */
.tile{ display:flex; align-items:center; gap:16px; background:var(--card);
  border:1.5px solid var(--line); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow);}
.tileface{ width:64px; height:64px; border-radius:50%; background:#efe4d0; display:flex;
  align-items:center; justify-content:center; font-size:38px; overflow:hidden; flex:0 0 auto;}
.tileface img{width:100%; height:100%; object-fit:cover}
.tiletext{flex:1}
.tile .nm{font-size:20px; font-weight:800; display:block}
.tile small{color:var(--ink-soft); font-weight:600; font-size:13px}
.tile .chev{font-size:28px; color:var(--ink-soft)}
.pinwrap{align-items:center; text-align:center;}
.pinface{ width:92px; height:92px; border-radius:50%; background:#efe4d0; display:flex;
  align-items:center; justify-content:center; font-size:54px; overflow:hidden;}
.pinface img{width:100%; height:100%; object-fit:cover}
.pinhint{color:var(--ink-soft); font-size:16px; font-weight:600}
.dots{display:flex; gap:18px; justify-content:center; margin:14px 0 20px;}
.dot{width:20px; height:20px; border-radius:50%; border:3px solid var(--brand);}
.dot.f{background:var(--brand)}
.pad{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:min(270px,80vw); margin:0 auto;}
.k{ font:inherit; font-size:28px; font-weight:800; padding:16px 0; border-radius:16px;
  border:1.5px solid var(--line); background:var(--card); cursor:pointer; color:var(--ink);
  box-shadow:var(--shadow);}
.k:active{background:#efe4d0}
.pwform{display:flex; flex-direction:column; gap:14px; width:min(320px,88vw);}
.pwform label{text-align:left; font-weight:700; font-size:15px; display:flex; flex-direction:column; gap:6px;}
.pwform input{ font:inherit; font-size:18px; padding:14px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink);}
.center{justify-content:center}

/* camera + done */
.camerabtn{ display:block; background:var(--brand); color:var(--brand-ink); border:none;
  border-radius:22px; width:100%; padding:34px 20px; font:inherit; font-size:23px;
  font-weight:800; cursor:pointer; text-align:center; box-shadow:0 4px 14px rgba(60,40,10,.3);}
.camerabtn .em{display:block; font-size:60px; margin-bottom:8px;}
.skipbtn{ background:none; border:none; color:var(--ink-soft); font:inherit; font-size:15px;
  font-weight:700; text-decoration:underline; cursor:pointer; padding:10px;}
.donewrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:30px; background:var(--good-bg); min-height:100dvh;}
.donewrap .tick{font-size:100px; line-height:1;}
.donewrap h2{font-size:38px; margin:10px 0 0; color:var(--good);}
.donewrap p{font-size:18px; color:#4c6b4e; margin:0; font-weight:700;}
.donelink{margin-top:22px; font-weight:800; color:var(--good); font-size:17px; text-decoration:underline;}

/* severity */
.sev{ display:block; border-radius:18px; width:100%; padding:22px; font-size:21px;
  font-weight:800; color:#fff; text-align:center; box-shadow:var(--shadow);}
.sev.y{background:#c77800} .sev.o{background:#d84315} .sev.r{background:#b71c1c; font-size:23px}

/* stock */
.feedcard{background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;}
.feedcard .t{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800;}
.feedcard .t .em{font-size:28px}
.lvl{display:flex; gap:8px;}
.lvl button{ flex:1; border:1.5px solid var(--line); background:var(--card); border-radius:12px;
  padding:12px 4px; font:inherit; font-weight:800; font-size:14px; cursor:pointer; color:var(--ink-soft);}
.lvl button.on.t{background:var(--good-bg); color:var(--good); border-color:var(--good)}
.lvl button.on.k{background:#fff3dd; color:var(--warn); border-color:var(--warn)}
.lvl button.on.x{background:var(--bad-bg); color:var(--bad); border-color:var(--bad)}
.buybtn{ display:block; text-align:center; border:1.5px dashed #b89b74; background:#fbf4e6;
  color:var(--brand); border-radius:12px; padding:12px; font-weight:800;}
.amount{ width:100%; font:inherit; font-size:32px; font-weight:800; text-align:center;
  padding:14px; border-radius:14px; border:2px solid var(--line); background:var(--card); color:var(--ink);}
.qtytext{ width:100%; font:inherit; font-size:17px; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink); text-align:center;}
.amount:focus,.qtytext:focus,.pwform input:focus{outline:2px solid var(--brand)}

/* exercise */
.exrow{ display:flex; align-items:center; gap:12px; background:var(--card);
  border:1.5px solid var(--line); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow);}
.exrow .nm{font-size:18px; font-weight:800; flex:1}
.exbtn{ font:inherit; border:none; border-radius:12px; padding:12px 14px; font-weight:800;
  cursor:pointer; font-size:15px; min-width:124px;}
.exbtn.on{background:var(--good-bg); color:var(--good)}
.exbtn.off{background:#f0e8d8; color:var(--ink-soft)}

/* manager/owner */
.chiprow{display:flex; gap:8px; flex-wrap:wrap;}
.chip2{border-radius:20px; padding:8px 14px; font-size:14px; font-weight:800; display:inline-block;}
.chip2.r{background:var(--bad-bg); color:var(--bad)}
.chip2.a{background:#fff3dd; color:var(--warn)}
.chip2.g{background:var(--good-bg); color:var(--good)}
.chip2.n{background:var(--card); color:var(--ink-soft); border:1.5px solid var(--line)}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px;}
.tbl{width:100%; border-collapse:collapse; font-size:13px; background:var(--card);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow); min-width:520px;}
.tbl th,.tbl td{padding:8px 6px; text-align:center; border-bottom:1px solid #f0e8d8; vertical-align:top;}
.tbl th{background:#efe4d0; font-size:11.5px; color:var(--ink-soft); position:sticky; top:0;}
.tbl td:first-child,.tbl th:first-child{text-align:left; padding-left:12px; font-weight:800; font-size:14px;}
.cell .thumb img{width:44px; height:44px; object-fit:cover; border-radius:8px; display:block; margin:0 auto;}
.cellmeta{display:block; font-size:10.5px; color:var(--ink-soft); font-weight:700; margin-top:2px;}
.cellmeta.late{color:var(--warn)}
.flag{display:block; font-size:9.5px; color:var(--warn); font-weight:800;}
.miss{color:var(--bad); font-size:18px} .due{font-size:16px} .up{color:var(--ink-soft)}
.vbtn{ font:inherit; font-size:10.5px; font-weight:800; border:1px solid var(--good-line);
  background:var(--good-bg); color:var(--good); border-radius:8px; padding:3px 6px;
  cursor:pointer; margin-top:3px;}
.vok{display:block; color:var(--good); font-weight:800; font-size:12px; margin-top:2px;}
.lightgrid{display:grid; gap:6px; align-items:center; background:var(--card);
  border-radius:14px; padding:14px; box-shadow:var(--shadow); min-width:420px;}
.lightgrid .hn{font-weight:800; font-size:14px; text-decoration:underline; text-decoration-color:var(--line);}
.lgh{font-size:16px; text-align:center;}
.lightdot{width:22px; height:22px; border-radius:50%; margin:0 auto; display:block;}
.ld-g{background:#43a047} .ld-a{background:#ffb300} .ld-r{background:#e53935} .ld-x{background:#ddd2bd}
.tl{ background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:10px 12px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow);}
.tl .ph{ width:62px; height:62px; border-radius:10px; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; font-size:30px; background:#efe4d0; overflow:hidden;}
.tl .ph img{width:62px; height:62px; object-fit:cover; display:block;}
.tl .tx{font-size:14.5px; line-height:1.45; min-width:0}
.tl .tx b{font-size:15.5px}
.tl .tx small{color:var(--ink-soft); display:block;}
.issue{ background:var(--card); border-left:6px solid var(--warn); border-radius:12px;
  padding:14px; box-shadow:var(--shadow);}
.issue.sev-zyada{border-left-color:#d84315}
.issue.sev-emergency{border-left-color:#b71c1c}
.issue.closed{opacity:.55}
.ihead{display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:16px;}
.istatus{font-size:12px; font-weight:800; border-radius:16px; padding:3px 10px; white-space:nowrap;}
.s-open{background:var(--bad-bg); color:var(--bad)}
.s-seen{background:#fff3dd; color:var(--warn)}
.s-resolved{background:var(--good-bg); color:var(--good)}
.imeta{color:var(--ink-soft); font-size:13px; margin-top:4px;}
.iphoto{border-radius:12px; margin-top:10px; max-height:220px; object-fit:cover; width:100%;}
.iactions{display:flex; gap:8px; margin-top:12px;}
.iactions form{flex:1; display:flex}
.ibtn{ flex:1; font:inherit; font-weight:800; border:none; border-radius:10px; padding:12px;
  cursor:pointer; font-size:15px;}
.ibtn.seen{background:#fff3dd; color:var(--warn)}
.ibtn.ok{background:var(--good-bg); color:var(--good)}
.emptycard{ background:var(--card); border-radius:16px; padding:34px 20px; text-align:center;
  box-shadow:var(--shadow);}
.emptycard .tick{font-size:56px}
.emptycard h2{margin:8px 0 4px; font-size:20px}
.emptycard p{color:var(--ink-soft); margin:0; font-weight:600}
.daynav{display:flex; align-items:center; gap:8px;}
.daybtn{ background:var(--card); border:1.5px solid var(--line); border-radius:10px;
  padding:9px 12px; font-weight:800; font-size:13.5px;}
.daybtn.dis{opacity:.5}
.daycur{flex:1; text-align:center; font-weight:800; font-size:16px;}
.monthgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px;}
.monthcard{ background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px;}
.monthcard .mo{color:var(--ink-soft); font-weight:700; font-size:12.5px;}
.monthcard b{font-size:20px; font-variant-numeric:tabular-nums;}
.monthcard small{color:var(--ink-soft); font-weight:600;}

/* settings */
.okmsg{ background:var(--good-bg); color:var(--good); border-radius:12px; padding:12px 16px;
  font-weight:800; font-size:15px; text-align:center;}
.setcard{ background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;}
.setcard.inactive{opacity:.55}
.setcard.addcard{border-style:dashed; background:#fbf4e6;}
.setcard b{font-size:16px}
.setrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.setname{font-size:17px; font-weight:800; flex:1; min-width:0;}
.setname small{display:block; color:var(--ink-soft); font-weight:600; font-size:12.5px;}
.inp{ flex:1; min-width:0; font:inherit; font-size:16px; font-weight:600; padding:11px 12px;
  border-radius:10px; border:1.5px solid var(--line); background:var(--card); color:var(--ink);}
.inp:focus{outline:2px solid var(--brand)}
.emojiin{flex:0 0 64px; text-align:center; font-size:20px; padding:8px 4px;}
.timein{flex:0 0 auto; width:118px;}
.timelbl{display:flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; color:var(--ink-soft);}
select.inp{appearance:auto}
.savebtn{ font:inherit; font-weight:800; font-size:14.5px; border:none; border-radius:10px;
  padding:11px 14px; cursor:pointer; background:var(--brand); color:var(--brand-ink);}
.togglebtn{ font:inherit; font-weight:800; font-size:14.5px; border:1.5px solid var(--line);
  border-radius:10px; padding:10px 12px; cursor:pointer; background:var(--card); color:var(--ink-soft);}
.filebtn{ display:inline-block; font-weight:800; font-size:14.5px; border:1.5px dashed #b89b74;
  border-radius:10px; padding:10px 12px; cursor:pointer; background:#fbf4e6; color:var(--brand);}

/* spinner overlay */
.spin[hidden]{display:none}
.spin{ position:fixed; inset:0; background:rgba(43,33,24,.85); color:#fff; display:flex;
  flex-direction:column; gap:16px; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; z-index:50;}
.loader{ width:48px; height:48px; border:6px solid rgba(255,255,255,.25);
  border-top-color:#fff; border-radius:50%; animation:sp 1s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .loader{animation:none} }
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--brand); outline-offset:2px;}