/* The one typeface across VetsGo: Poppins, served from this portal's own
   fonts/ folder so it renders the same everywhere, with nothing fetched from
   a third party. No other face is used — figures, codes and OTPs are Poppins
   too, with tabular digits so columns still line up. sans-serif is only what
   a browser draws in the moment before the file arrives. */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/Poppins-Bold.ttf') format('truetype'); }
/* VetsGo Clinic portal — the consultation, written at a desk.
   Same palette as the other consoles; a two-column shape because the case
   list and the note are looked at together, not one after the other. */
:root {
  /* brand */
  --green700:#0E5C46; --green600:#0F6B4F; --green500:#14916B; --green400:#34B488;
  --green100:#D6EDE3; --green50:#EFF7F3;
  --gold:#F7BF62; --gold500:#F2A93B; --gold700:#8A5B06; --gold50:#FDF3E0;
  --coral:#F2643F; --coral100:#FDEDE8; --coral700:#B4361B; --blue:#2E6FB0; --blue50:#EAF2FB;

  /* surfaces and ink — the admin console's, so the three read as one suite */
  --paper:#F3F6F4;     /* the page */
  --white:#FFFFFF;     /* cards */
  --stone100:#F6F8F6;  /* inset: inputs, tracks, quiet blocks */
  --stone150:#EDF1EE;  /* hairline inside a card */
  --stone200:#E2E8E4;  /* hairline between things */
  --stone400:#8B9A93; --stone600:#63756D; --stone900:#12201B;

  --track:#EAEFEB;   /* what a bar or a step counter runs in */

  /* one shadow, used sparingly: cards lift off the page, nothing shouts */
  --lift:0 1px 2px rgba(18,32,27,.05), 0 10px 26px -18px rgba(18,32,27,.35);

  --ui:'Poppins',sans-serif;
  --display:var(--ui);
  --mono:var(--ui);
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--paper); color:var(--stone900); font-family:var(--ui); }
.hidden { display:none !important; }
.eyebrow { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone600); font-weight:700; }

/* buttons */
.btn { font-family:var(--ui); font-weight:600; font-size:14px; border:none; border-radius:999px;
  cursor:pointer; padding:11px 20px; display:inline-flex; align-items:center; gap:8px; justify-content:center; transition:.15s; }
.btn-primary { background:var(--green600); color:#fff; }
.btn-primary:hover { background:var(--green500); }
.btn-ghost { background:transparent; color:var(--green700); box-shadow:inset 0 0 0 1.4px var(--stone200); }
.btn-ghost:hover { background:var(--stone100); }
.btn-block { width:100%; }
.btn-sm { padding:8px 13px; font-size:13px; }
.btn:disabled { opacity:.55; cursor:default; }

/* login */
.login { position:fixed; inset:0; display:grid; place-items:center;
  background:radial-gradient(900px 500px at 50% -10%, #E4F1EA, var(--paper)); z-index:50; }
.login-card { width:400px; max-width:92vw; background:var(--white); border:1px solid var(--stone200);
  border-radius:22px; padding:32px; box-shadow:0 24px 60px -30px rgba(18,32,27,.45); }
.login-card h1 { font-family:var(--display); font-size:26px; margin:14px 0 4px; }
.login-card .sub { color:var(--stone600); font-size:14px; margin:0 0 22px; }
.login-card label { display:block; margin:0 0 7px; }
.login-card input { width:100%; background:var(--stone100); border:1px solid var(--stone200);
  color:var(--stone900); border-radius:12px; padding:13px 15px; font-size:16px;
  margin-bottom:16px; font-family:var(--ui); }
.login-card input:focus { outline:none; border-color:var(--green500); box-shadow:0 0 0 3px rgba(20,145,107,.14); }
#loginCode { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:6px; text-align:center; font-size:20px; }
.mk { width:44px; height:44px; border-radius:13px; background:linear-gradient(160deg,#14916B,#0E5C46);
  display:grid; place-items:center; font-size:22px; flex:none; }
.login-mk { width:64px; height:64px; border-radius:18px; font-size:32px; }
.err { color:var(--coral700); font-size:13px; margin-top:10px; }

/* shell */
.app { display:grid; grid-template-columns:300px 1fr; min-height:100vh; }
.side { background:#fff; border-right:1px solid var(--stone200); display:flex; flex-direction:column;
  padding:18px 14px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:11px; margin-bottom:18px; padding:0 6px; }
.brand b { font-family:var(--display); font-size:17px; display:block; line-height:1.1; }
.brand span { font-size:11.5px; color:var(--stone600); letter-spacing:.1em; text-transform:uppercase; }
.caselist { flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.side .sp { height:8px; }
.whoami { font-size:12px; color:var(--stone600); padding:8px; word-break:break-all; }
.nav { text-align:left; background:transparent; border:none; color:var(--stone600); font-family:var(--ui);
  font-weight:700; font-size:14px; padding:11px 13px; border-radius:11px; cursor:pointer; }
.nav:hover { background:var(--stone100); }
.nav.quiet { font-weight:600; font-size:13px; }

/* case cards */
.case { text-align:left; background:var(--stone100); border:1px solid transparent; border-radius:13px;
  padding:11px 12px; cursor:pointer; font-family:var(--ui); transition:.15s; }
.case:hover { border-color:var(--green400); }
.case.on { background:#fff; border-color:var(--green600); box-shadow:0 0 0 1px var(--green600); }
.case .who { font-weight:700; font-size:14px; }
.case .what { color:var(--stone600); font-size:12.5px; margin-top:2px; }
.case .when { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--stone400); margin-top:4px; }

/* content */
.content { padding:26px 30px 60px; max-width:1100px; }
.empty-state { display:grid; place-items:center; height:70vh; text-align:center; color:var(--stone600); }
.empty-state .big { font-size:48px; margin-bottom:10px; }
.empty-state h2 { font-family:var(--display); margin:0 0 6px; color:var(--stone900); }
.empty-state p { max-width:38ch; margin:0; font-size:14px; }

.card { background:var(--white); border:1px solid var(--stone200); border-radius:16px;
  padding:18px; margin-bottom:16px; box-shadow:var(--lift); }
.card h3 { font-family:var(--display); font-size:17px; margin:0 0 3px; }
.card .blurb { color:var(--stone600); font-size:12.5px; margin:0 0 14px; }

/* the patient header */
.patient { display:flex; gap:16px; align-items:flex-start; }
.patient .ava { width:58px; height:58px; border-radius:15px; display:grid; place-items:center;
  font-size:30px; background:var(--stone150); flex:none; }
.patient h2 { font-family:var(--display); font-size:22px; margin:0 0 2px; }
.patient .meta { color:var(--stone600); font-size:13px; }
.alert { margin-top:13px; background:var(--coral100); color:var(--coral700); border-radius:11px;
  padding:9px 13px; font-size:12.5px; font-weight:600; }
.vitals { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.vital { background:var(--stone100); border-radius:12px; padding:8px 13px; min-width:84px; }
.vital .l { font-size:10.5px; color:var(--stone600); text-transform:uppercase; letter-spacing:.06em; }
.vital .v { font-family:var(--display); font-weight:700; font-size:17px; }

/* SOAP */
.soap-row { display:grid; grid-template-columns:38px 1fr; gap:12px; margin-bottom:16px; }
.soap-key { width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:16px; color:#fff; background:var(--green600); }
.soap-key.o { background:var(--blue); }
.soap-key.a { background:var(--gold500); color:#3a2a00; }
.soap-key.p { background:var(--green400); color:#06231a; }
.soap-body h4 { margin:0 0 2px; font-size:14px; }
.soap-body .hint { color:var(--stone600); font-size:12px; margin:0 0 8px; }

label.field { display:block; margin-bottom:10px; }
label.field > span { display:block; font-size:12px; color:var(--stone600); margin-bottom:4px; }
input.t, textarea.t, select.t {
  width:100%; background:#fff; border:1px solid var(--stone200); color:var(--stone900);
  border-radius:11px; padding:10px 12px; font-family:var(--ui); font-size:14px; }
input.t:focus, textarea.t:focus, select.t:focus { outline:none; border-color:var(--green500);
  box-shadow:0 0 0 3px rgba(20,145,107,.14); }
textarea.t { min-height:78px; resize:vertical; line-height:1.5; }
.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.grid2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.row { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }

/* per-system exam */
.sys { border-top:1px solid var(--stone150); padding:9px 0; }
.sys:first-of-type { border-top:none; }
.sys .name { font-size:13.5px; font-weight:600; }
.chipbtn { background:var(--stone100); border:none; border-radius:99px; padding:5px 12px;
  font-family:var(--ui); font-size:12.5px; font-weight:700; color:var(--stone600); cursor:pointer; }
.chipbtn:hover { background:var(--stone150); }
.chipbtn.on { background:var(--green600); color:#fff; }

/* the chart */
.ev { display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--stone150); }
.ev:first-child { border-top:none; }
.ev .dot { width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  font-size:15px; background:var(--stone100); flex:none; }
.ev .t { font-weight:700; font-size:13.5px; }
.ev .d { color:var(--stone600); font-size:12.5px; }
.ev .m { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--stone400); }

.stp { font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:99px; }
.stp.green { background:var(--green50); color:var(--green700); }
.stp.gold { background:var(--gold50); color:var(--gold700); }
.saving { font-size:12.5px; color:var(--stone600); }
.empty { color:var(--stone600); font-size:13.5px; padding:8px 0; }

/* the scribe */
.scribe { border-color:var(--green400); box-shadow:0 0 0 1px rgba(52,180,136,.18); }
.transcript { min-height:110px; font-size:14.5px; line-height:1.6; }
.fineprint { color:var(--stone400); font-size:11.5px; line-height:1.5; margin:12px 0 0; }
.listening { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  color:var(--coral700); background:var(--coral100); border-radius:99px; padding:5px 12px; flex:none; }
.listening i { width:8px; height:8px; border-radius:99px; background:var(--coral); animation:pulse 1.1s infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }

/* the proposed draft, read before it is accepted */
.draft { margin-top:14px; background:var(--stone100); border-radius:13px; padding:14px; }
.dr { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--stone200); cursor:pointer; }
.dr:first-child { border-top:none; }
.dr input { margin-top:3px; width:16px; height:16px; accent-color:var(--green600); flex:none; }
.dr b { font-size:13px; }
.dr .val { display:block; font-size:13.5px; color:var(--stone600); line-height:1.5; margin-top:2px; }
.dr .over { font-style:normal; font-size:10.5px; font-weight:700; color:var(--coral700);
  background:var(--coral100); border-radius:99px; padding:2px 8px; margin-left:7px; }
.gaps { margin-top:12px; border-top:1px solid var(--stone200); padding-top:10px; font-size:12.5px; color:var(--stone600); }
.gaps b { display:block; color:var(--stone900); font-size:12px; margin-bottom:4px; }
.gaps ul { margin:0; padding-left:18px; line-height:1.6; }

/* a field the scribe filled, until the vet touches it */
.drafted { background:#f2fbf7; border-color:var(--green400); }

/* ---- the practice shell ---- */
.clinicid { display:flex; align-items:center; gap:11px; margin-bottom:16px; padding:6px; }
.clinicid b { font-family:var(--display); font-size:16px; display:block; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clinicid span { font-size:11px; color:var(--stone600); letter-spacing:.09em; text-transform:uppercase; }
.nav { display:flex; flex-direction:column; gap:1px; overflow:auto; }
.nav-grp { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--stone400); font-weight:700; padding:14px 13px 5px; }
.nav-item { display:flex; align-items:center; gap:10px; text-align:left; background:transparent;
  border:none; color:var(--stone600); font-family:var(--ui); font-weight:700; font-size:13.5px;
  padding:9px 13px; border-radius:10px; cursor:pointer; width:100%; }
.nav-item:hover { background:var(--stone100); }
.nav-item.on { background:var(--green50); color:var(--green700); box-shadow:inset 0 0 0 1px var(--green100); }
.nav-item .ic { width:17px; text-align:center; font-size:14px; }
.nav-item .soon { margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--stone400); font-weight:700; }
.nav-item.on .soon { color:var(--green500); }
.nav-item.quiet { font-weight:600; font-size:13px; }
.content { max-width:1240px; }
.vhead { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:16px; }
.vhead h2 { font-family:var(--display); font-size:23px; margin:0 0 3px; }
.vhead .lead { color:var(--stone600); font-size:13px; max-width:64ch; line-height:1.5; }

/* ---- lists and filters ---- */
.grid-2col { display:grid; grid-template-columns:360px 1fr; gap:16px; align-items:start; }
.card.pad0 { padding:0; overflow:hidden; }
.filters { padding:13px 14px; border-bottom:1px solid var(--stone150); display:flex;
  flex-direction:column; gap:9px; }
.filters.flat { border-bottom:none; border-top:1px solid var(--stone150); padding:13px 0 4px; }
.filter-row { display:flex; gap:8px; flex-wrap:wrap; }
.search { display:flex; align-items:center; gap:8px; background:var(--stone100);
  border:1px solid var(--stone200); border-radius:11px; padding:0 12px; }
.search input { flex:1; background:transparent; border:none; outline:none; padding:10px 0;
  font-family:var(--ui); font-size:14px; color:var(--stone900); min-width:0; }
select.t.small, input.t.small { padding:7px 10px; font-size:12.5px; border-radius:9px; flex:1; min-width:120px; }
.linkbtn { background:none; border:none; color:var(--green700); font-family:var(--ui);
  font-weight:700; font-size:12.5px; cursor:pointer; padding:0; text-align:left; }
.linkbtn:hover { text-decoration:underline; }

.plist { max-height:70vh; overflow:auto; }
.prow { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none;
  border:none; border-bottom:1px solid var(--stone150); padding:11px 14px; cursor:pointer;
  font-family:var(--ui); }
.prow:hover { background:var(--stone100); }
.prow.on { background:var(--green50); box-shadow:inset 3px 0 0 var(--green600); }
.prow b { display:block; font-size:14px; }
.prow .sub { display:block; font-size:12px; color:var(--stone600); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.miniava { width:34px; height:34px; border-radius:10px; background:var(--stone150);
  display:grid; place-items:center; font-size:17px; flex:none; }
.lastseen { text-align:right; flex:none; }
.lastseen .m { display:block; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10px; color:var(--stone400); }
.ev.clickable { cursor:pointer; }
.ev.clickable:hover { background:var(--stone100); }

/* ---- the consultation: note beside the scribe ---- */
.consult-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:16px; align-items:start; }
.consult-grid.solo { grid-template-columns:1fr; max-width:820px; }
@media (max-width:1180px) { .consult-grid { grid-template-columns:1fr; } .grid-2col { grid-template-columns:1fr; } }

/* the scribe, as its own dark instrument beside the note */
.card.scribe { background:linear-gradient(170deg,#0c2a22,#08332a); border-color:#0c2a22;
  position:sticky; top:20px; }
.scribe h3 { color:#fff; display:flex; align-items:center; gap:8px; }
.scribe .spark { color:var(--gold); }
.scribe .blurb { color:#8fb3a4; }
.scribe label.field > span { color:#8fb3a4; }
.scribe .transcript { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
  color:#eaf4f0; min-height:180px; }
.scribe .transcript::placeholder { color:#5d8574; }
.scribe .transcript:focus { border-color:var(--green400); }
.scribe .saving { color:#8fb3a4; margin-top:9px; }
.scribe .fineprint { color:#5d8574; border-top:1px solid rgba(255,255,255,.1); padding-top:11px; }
.scribe .empty { color:#8fb3a4; }
.btn-mic { background:rgba(255,255,255,.1); color:#fff; padding:9px 15px; font-size:13px; flex:1; }
.btn-mic:hover { background:rgba(255,255,255,.18); }
.scribe .btn-ghost { color:#8fb3a4; box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.16); padding:9px 15px; font-size:13px; }
.scribe .btn-ghost:hover { background:rgba(255,255,255,.07); }
.btn-gold { background:var(--gold500); color:#3a2a00; margin-top:9px; }
.btn-gold:hover { background:var(--gold); }

/* the draft, read on the dark panel */
.scribe .draft { background:rgba(255,255,255,.06); }
.scribe .draft .eyebrow { color:#8fb3a4; }
.scribe .dr { border-color:rgba(255,255,255,.1); }
.scribe .dr b { color:#eaf4f0; }
.scribe .dr .val { color:#a9c8bc; }
.scribe .gaps { color:#8fb3a4; border-color:rgba(255,255,255,.1); }
.scribe .gaps b { color:#eaf4f0; }

/* ---- headline figures ---- */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
@media (max-width:900px) { .kpis { grid-template-columns:repeat(2,1fr); } }
.kpi { background:var(--white); border:1px solid var(--stone200); border-radius:15px;
  padding:15px 16px; box-shadow:var(--lift); }
.kpi .ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-size:18px; margin-bottom:10px; }
.kpi .v { font-family:var(--display); font-weight:700; font-size:23px; line-height:1.1; }
.kpi .l { font-size:12.5px; color:var(--stone600); margin-top:2px; }
.kpi .d { font-size:11.5px; color:var(--stone400); margin-top:4px; }

.grid-2col.wide { grid-template-columns:1.5fr 1fr; }
@media (max-width:1180px) { .grid-2col.wide { grid-template-columns:1fr; } }
.cardhd { display:flex; justify-content:space-between; align-items:center;
  padding:15px 18px; border-bottom:1px solid var(--stone150); }
.cardhd h3 { font-family:var(--display); font-size:16px; margin:0; }
.card .pad, .empty.pad { padding:16px 18px; }
.soft { color:var(--stone600); font-weight:400; }
.col-r { display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.bigfig { font-family:var(--display); font-weight:700; font-size:21px; color:var(--green700); }

/* ---- today's list ---- */
.appt { display:flex; align-items:center; gap:12px; padding:11px 18px;
  border-bottom:1px solid var(--stone150); cursor:pointer; }
.appt:last-child { border-bottom:none; }
.appt:hover { background:var(--stone100); }
.appt.done { opacity:.62; }
.appt-t { width:58px; flex:none; text-align:right; }
.appt-t .hr { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; font-size:12.5px; }
.appt-t .dur { font-size:10px; color:var(--stone400); }
.appt-line { width:3px; align-self:stretch; border-radius:9px; background:var(--green400); }
.appt-line[data-cat="livestock"] { background:var(--gold500); }
.appt-line[data-cat="poultry"] { background:var(--blue); }
.appt-line[data-cat="aquaculture"] { background:#7A3FB0; }
.appt-pa { width:36px; height:36px; border-radius:10px; background:var(--stone100);
  display:grid; place-items:center; font-size:18px; flex:none; }
.appt .t { font-weight:700; font-size:13.5px; }
.appt .d { color:var(--stone600); font-size:12.5px; margin-top:1px; }
.appt .m { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--stone400); margin-top:3px; }

/* ---- the diary ---- */
.week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
@media (max-width:1000px) { .week { grid-template-columns:repeat(2,1fr); } }
.wcol { background:var(--white); border:1px solid var(--stone200); border-radius:14px;
  overflow:hidden; box-shadow:var(--lift); }
.wcol.today { border-color:var(--green600); box-shadow:0 0 0 1px var(--green600); }
.wdh { padding:9px 11px; border-bottom:1px solid var(--stone150); background:var(--stone100); }
.wdh b { display:block; font-size:12.5px; }
.wdh span { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--stone600); }
.wcol.today .wdh { background:var(--green50); color:var(--green700); }
.wbody { padding:7px; display:flex; flex-direction:column; gap:6px; min-height:70px; }
.wempty { color:var(--stone400); font-size:12px; text-align:center; padding:12px 0; }
.wev { border:1px solid var(--stone200); border-left:3px solid var(--green500);
  border-radius:9px; padding:6px 8px; cursor:pointer; transition:.12s; }
.wev:hover { box-shadow:0 3px 10px rgba(0,0,0,.08); border-color:var(--green400); }
.wev[data-cat="livestock"] { border-left-color:var(--gold500); }
.wev[data-cat="poultry"] { border-left-color:var(--blue); }
.wev[data-cat="aquaculture"] { border-left-color:#7A3FB0; }
.ce-t { font-weight:700; font-size:11.5px; }
.ce-s { font-size:10.5px; color:var(--stone600); margin-top:1px; }
.ce-v { font-size:10px; color:var(--stone400); margin-top:2px; }

/* ---- tables ---- */
.tbl { width:100%; border-collapse:collapse; font-family:var(--ui); }
.tbl th { text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--stone400); font-weight:700; padding:11px 14px; border-bottom:1px solid var(--stone150); }
.tbl td { padding:11px 14px; border-bottom:1px solid var(--stone150); font-size:13.5px; vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tr.clickable { cursor:pointer; }
.tbl tr.clickable:hover td { background:var(--stone100); }
.tbl .r, .tbl th.r { text-align:right; }
.tbl .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px; }
.tbl .sub { display:block; font-size:11px; color:var(--stone400); font-weight:400; margin-top:1px; }
.tbl td b { font-weight:700; }
.tbl .miniava { display:inline-grid; vertical-align:middle; margin-right:8px; width:28px; height:28px; font-size:14px; }
.tbl input.tiny { padding:5px 8px; font-size:12.5px; border-radius:8px; width:110px; }
.tbl tr.saved td { background:#f2fbf7; transition:background .3s; }
.tbl tr.failed td { background:var(--coral100); }
.rowerr { font-size:11px; color:var(--coral700); margin-top:4px; }
.warnpill { font-size:10px; font-weight:700; color:var(--coral700); background:var(--coral100);
  border-radius:99px; padding:2px 8px; margin-left:7px; }
.stp.coral { background:var(--coral100); color:var(--coral700); }
.stp.grey { background:var(--stone150); color:var(--stone600); }

/* ---- charts ---- */
.bars { display:flex; align-items:flex-end; gap:6px; height:170px; margin-top:14px; }
.bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  height:100%; justify-content:flex-end; }
.bar .fill { width:100%; background:var(--green100); border-radius:6px 6px 0 0; min-height:2px; }
.bar .fill.now { background:var(--green600); }
.bar span { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:9px; color:var(--stone400); }
.mixrow { margin-bottom:13px; font-size:12.5px; }
.bar2 { height:8px; border-radius:99px; background:var(--stone150); overflow:hidden; margin-top:5px; }
.bar2 i { display:block; height:100%; border-radius:99px; background:var(--green500); }

/* ---- the laboratory desk ---- */
.stp.blue { background:var(--blue50); color:var(--blue); }
.ev.on { background:var(--green50); box-shadow:inset 3px 0 0 var(--green600); }
.kv { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:14px 0; }
.kv > div { font-size:13.5px; }
.kv span:first-child { display:block; font-size:11px; color:var(--stone400); text-transform:uppercase;
  letter-spacing:.07em; margin-bottom:2px; }
.notes { background:var(--stone100); border-radius:11px; padding:11px 13px; font-size:13.5px;
  line-height:1.5; margin:10px 0; }
.notes > span { display:block; font-size:11px; color:var(--stone600); text-transform:uppercase;
  letter-spacing:.07em; margin-bottom:4px; }
.sendto { border-top:1px solid var(--stone150); margin-top:14px; padding-top:12px; }
.sendto .eyebrow { margin-bottom:8px; }
.labopt { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--stone150); }
.labopt:first-child { border-top:none; }
.labopt.current { background:#f2fbf7; margin:0 -10px; padding:10px; border-radius:10px; }
.labopt b { font-size:14px; }
.labopt .m, .ev .m { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--stone400); }
.loadbar { height:5px; border-radius:99px; background:var(--stone150); overflow:hidden; margin-top:6px; max-width:220px; }
.loadbar i { display:block; height:100%; background:var(--gold500); border-radius:99px; }

button, input, select, textarea { font-family:inherit; }

/* ---- a visit's bill ---- */
.billtab { width:100%; border-collapse:collapse; margin-top:12px; }
.billtab th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--stone600); padding:6px 8px; border-bottom:1px solid var(--stone150); }
.billtab td { padding:9px 8px; border-bottom:1px solid var(--stone150); font-size:13.5px; vertical-align:top; }
.billtab .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.billsum { margin-top:12px; margin-left:auto; max-width:360px; font-variant-numeric:tabular-nums; }
.billsum > div { display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:13.5px; }
.billsum > div > span:first-child { color:var(--stone600); }
.billsum .due { border-top:1px solid var(--stone150); margin-top:4px; padding-top:8px; font-weight:700; font-size:15px; }
.billsum .due > span:first-child { color:inherit; }

/* ---- herd record ---- */
.herdscore { display:flex; align-items:center; gap:10px; border:1px solid var(--stone150); border-radius:14px; padding:6px 14px 6px 8px; }
.herdgrid { display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; }
@media (max-width:1100px) { .herdgrid { grid-template-columns:1fr; } }
.mvrow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--stone150); font-size:13.5px; font-variant-numeric:tabular-nums; }
.mvrow.last { border:none; }
.mvrow span { color:var(--stone600); }
i.lg { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }

/* ---- diary and messages ---- */
.seg { display:flex; background:var(--stone100); border-radius:10px; padding:3px; gap:2px; }
.seg button { border:none; background:none; padding:6px 11px; border-radius:8px; font-weight:600; font-size:12.5px; color:var(--stone600); cursor:pointer; font-family:var(--ui); }
.seg button.on { background:#fff; color:var(--stone900); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.monthgrid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.mdh { font-size:11px; font-weight:700; color:var(--stone600); text-transform:uppercase; letter-spacing:.06em; padding:4px 6px; }
.mcell { background:#fff; border:1px solid var(--stone150); border-radius:10px; min-height:92px; padding:6px 7px; cursor:pointer; }
.mcell:hover { border-color:var(--green600); }
.mcell.other { opacity:.5; }
.mcell.today { border-color:var(--green600); box-shadow:inset 0 0 0 1px var(--green600); }
.mnum { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:13px; margin-bottom:4px; }
.mev { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--stone700); }
.msggrid { display:grid; grid-template-columns:minmax(300px,1fr) 1.4fr; gap:16px; align-items:start; }
@media (max-width:1180px) { .msggrid { grid-template-columns:1fr; } }
.ev.sel { background:var(--stone100); }
.convo .cvlist { max-height:52vh; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:6px 2px; }
.bubble { align-self:flex-start; max-width:78%; background:var(--stone100); border-radius:14px 14px 14px 4px; padding:9px 12px; font-size:13.5px; }
.bubble .bb { white-space:pre-wrap; }
.bubble.mine { align-self:flex-end; background:#D9F1E7; border-radius:14px 14px 4px 14px; }
.bubble .bh { font-size:11px; color:var(--stone600); margin-bottom:3px; }
.cvreply { display:flex; gap:8px; align-items:flex-end; margin-top:10px; }
.cvreply textarea { flex:1; min-height:60px; }

/* ---- dialogs and visit actions ---- */
.modal-back { position:fixed; inset:0; background:rgba(18,32,27,.38); display:flex; align-items:flex-start;
  justify-content:center; padding:5vh 16px; z-index:50; overflow:auto; }
.modal { background:var(--white); border:1px solid var(--stone200); border-radius:18px;
  width:min(560px, 100%); box-shadow:0 30px 70px -30px rgba(18,32,27,.55); }
.modal.wide { width:min(880px, 100%); }
.modal-hd { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 6px; }
.modal-hd h3 { margin:0; }
.modal-bd { padding:6px 20px 20px; }
.card.flat { box-shadow:none; border:1px solid var(--stone150); }
.visit-actions { margin-top:12px; }
.visit-actions .row { gap:8px; flex-wrap:wrap; }
.btn.danger, .linkbtn.danger { color:var(--coral700); }
.wev.struck { opacity:.55; text-decoration:line-through; }

/* ---- stock and settings ---- */
.tbl td.neg { color:var(--coral700); } .tbl td.pos { color:var(--green700); }
.tbl td.warn, .warn { color:var(--gold700); font-weight:600; }
tr.struck { opacity:.55; }
.hours-row { display:grid; grid-template-columns:110px 90px 110px 24px 110px; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--stone150); }
.grid2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }

/* ---- money ---- */
.grid4 { display:grid; grid-template-columns:1.2fr 1.4fr .5fr .7fr; gap:10px; }
.adjlist { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.adj { display:flex; gap:8px; align-items:center; font-size:13px; }
.adj .linkbtn { margin-left:auto; }

/* ---- the record ---- */
.pr-actions .row { gap:8px; flex-wrap:wrap; }
.pr-tabs { margin:10px 0; flex-wrap:wrap; }
.grid5 { display:grid; grid-template-columns:1.4fr .8fr .6fr .6fr .6fr; gap:6px; margin-bottom:6px; }
.tbl tr.flagged td { background:var(--coral100); }
.vitalgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.linechart { width:100%; height:auto; }
.linechart .axis { stroke:var(--stone200); } .linechart .ln { fill:none; stroke:var(--green600); stroke-width:2.2; }
.linechart .pt { fill:var(--green600); } .linechart .lbl { font-size:10px; fill:var(--stone500); }
.filegrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.filetile .thumb { height:120px; display:flex; align-items:center; justify-content:center; background:var(--stone100); border-radius:10px; margin-bottom:8px; font-size:34px; overflow:hidden; }
.filetile .thumb img { width:100%; height:100%; object-fit:cover; }
.sigpad { width:100%; max-width:560px; height:160px; border:1.5px dashed var(--stone300); border-radius:10px; background:#fff; touch-action:none; }
.sigimg { max-height:80px; margin-top:8px; }
.bigfig .sub { display:block; font-size:11px; font-weight:500; }

/* ---- diary grid, top bar, tasks ---- */
.mainwrap { display:flex; flex-direction:column; min-width:0; }
#topbar { position:sticky; top:0; z-index:20; background:rgba(243,246,244,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--stone150); }
.tb { display:flex; gap:12px; align-items:center; padding:10px 30px; max-width:1240px; }
.tb-search { flex:1; position:relative; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--stone200); border-radius:12px; padding:0 12px; }
.tb-search input { border:none; outline:none; flex:1; padding:9px 0; font-family:var(--ui); font-size:13.5px; background:transparent; }
.tb-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--stone200); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12); max-height:60vh; overflow:auto; padding:6px; }
.tb-results button, .tb-drop button { display:block; width:100%; text-align:left; background:none; border:none; padding:8px 10px; border-radius:8px; font-family:var(--ui); font-size:13px; cursor:pointer; }
.tb-results button:hover, .tb-drop button:hover { background:var(--stone100); }
.tb-sec { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--stone500); padding:8px 10px 2px; }
.tb-menu { position:relative; }
.tb-drop { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--stone200); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12); min-width:200px; padding:6px; z-index:30; }
.tb-drop.wide { width:340px; max-height:60vh; overflow:auto; }
.tb-note { padding:8px 10px; border-bottom:1px solid var(--stone150); font-size:12.5px; }
.tb-note.unread { background:var(--green50); }
.tb-dot { display:inline-block; width:7px; height:7px; background:var(--coral600); border-radius:50%; margin-left:3px; vertical-align:top; }
.daygrid .dg-head { display:grid; grid-template-columns:56px repeat(var(--cols), 1fr); border-bottom:1px solid var(--stone150); font-weight:700; font-size:12.5px; }
.daygrid .dg-head > div { padding:10px; }
.daygrid .dg-body { display:grid; grid-template-columns:56px repeat(var(--cols), 1fr); position:relative; overflow:hidden; }
.dg-hours > div { font-size:10.5px; color:var(--stone500); padding:2px 6px; border-top:1px solid var(--stone150); box-sizing:border-box; }
.dg-col { position:relative; border-left:1px solid var(--stone150); background:repeating-linear-gradient(to bottom, transparent 0 63px, var(--stone150) 63px 64px); }
.dg-ev { position:absolute; left:4px; right:4px; overflow:hidden; margin:0; }
.dg-now { position:absolute; left:56px; right:0; height:2px; background:var(--coral600); z-index:2; }
.wev.done { opacity:.6; }
.slots { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 10px; }
.ev.task { cursor:pointer; } .ev.task input { margin-right:8px; }
.ev.struck { opacity:.5; text-decoration:line-through; }
.alert ul { margin:6px 0; padding-left:18px; }
.small { font-size:12px; }
.bars.dense .bar { min-width:0; }
.fill.stack { position:relative; background:var(--green500); }
.fill.stack i { position:absolute; left:0; right:0; top:0; background:var(--green800, #0a4635); }

/* ---- ward, sheet, consultation extras ---- */
.modal.xwide { width:min(1180px, 100%); }
.wardgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.card.ward.late { border:1.5px solid var(--coral600); }
.late-list { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.sheetrow { display:grid; grid-template-columns:240px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--stone150); align-items:center; }
.sheetlabel .sub { display:block; }
.sheetcells { display:flex; flex-wrap:wrap; gap:5px; }
.dose { border:1px solid var(--stone200); background:#fff; border-radius:8px; padding:4px 7px; font-size:11.5px; font-family:var(--ui); cursor:pointer; display:flex; gap:4px; align-items:center; }
.dose.given { background:var(--green50); border-color:var(--green400); cursor:default; }
.dose.skipped { background:var(--stone150); color:var(--stone500); cursor:default; }
.dose.overdue { background:var(--coral100); border-color:var(--coral600); color:var(--coral700); font-weight:700; }
.dose i { font-style:normal; }
.signbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding-top:10px; border-top:1px solid var(--stone150); }
.suggest { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
.auditsum { max-width:420px; word-break:break-word; }

.prodgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.bars.short { height:80px; }

.setup { border-left:4px solid #14916B; }
.setupbar { height:6px; background:var(--track); border-radius:3px; margin:10px 0; overflow:hidden; }
.setupbar > div { height:100%; background:#14916B; }
.setuplist { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px; }
.setupstep { display:flex; gap:10px; align-items:flex-start; text-align:left; background:none; border:1px solid var(--stone200); border-radius:10px; padding:8px 10px; cursor:pointer; font:inherit; color:inherit; }
.setupstep:hover { border-color:#14916B; }
.setupstep .tick { flex:none; width:20px; height:20px; border-radius:50%; border:2px solid #C9CFC6; display:grid; place-items:center; font-size:12px; color:#fff; }
.setupstep.done { opacity:.6; }
.setupstep.done .tick { background:#14916B; border-color:#14916B; }
.setupstep .sub { display:block; font-size:11.5px; color:#6B7280; }

/* A field that failed validation: red edge, and the reason under it. */
input.invalid, select.invalid, textarea.invalid, .t.invalid, .field input.invalid, .field select.invalid { border-color:var(--coral600, #DE4F30) !important; box-shadow:0 0 0 3px rgba(222,79,48,.14); }
.field-error { color:var(--coral700, #B83A23); font-size:12px; margin-top:5px; line-height:1.4; }

/* ---- tablets and phones ------------------------------------------------
   Below 900px the side menu is a drawer behind a menu button (responsive.js),
   the page takes the full width, and anything wider than the screen — a table,
   a row of fields — scrolls sideways inside itself instead of the page. */
.mbar, .scrim { display:none; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .mbar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:40; padding:10px 14px;
    background:#fff; border-bottom:1px solid var(--stone200); }
  .mbar-btn { width:42px; height:42px; border-radius:11px; border:1px solid var(--stone200); background:#fff; color:var(--stone900);
    display:grid; place-items:center; cursor:pointer; }
  .mbar-title { font-family:var(--display); font-weight:700; font-size:16px; }
  .side { position:fixed; left:0; top:0; bottom:0; height:100%; width:min(300px, 86vw); z-index:60; overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.25); }
  html.nav-open .side { transform:none; }
  html.nav-open .scrim { display:block; position:fixed; inset:0; z-index:55; background:rgba(18,32,27,.38); }
  html.nav-open body { overflow:hidden; }
  #topbar { top:63px; }
  .content { padding:16px 14px 48px; max-width:none; min-width:0; }
  .content table, .tbl { display:block; overflow-x:auto; }
  .vhead { flex-wrap:wrap; }
  .modal-back { padding:10px; }
  .tb-drop.wide { width:min(340px, 90vw); }
  /* A strip of section tabs scrolls within itself; rows of buttons and
     fields wrap onto the next line. */
  .seg { max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .seg > * { flex:0 0 auto; }
  .content .row { flex-wrap:wrap; }
  .content .row > * { min-width:0; }
  .vhead > *, .row > .seg { min-width:0; max-width:100%; }
  /* The search box gives way to the buttons beside it. */
  .tb { padding:8px 14px; gap:8px; }
  .tb-search, .tb-search input { min-width:0; }
  /* Opening hours: the day and its switch, then the times, on a line each. */
  .hours-row { grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); row-gap:6px; }
  .hours-row > :nth-child(2) { grid-column:2 / 4; justify-self:end; }
  .hours-row input.t.tiny { width:100%; }
}
@media (max-width:520px) { .kpis { grid-template-columns:1fr; } .week { grid-template-columns:1fr; } }