/* 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 Dispatch Console — dark theme, palette from sample/.../styles/vetgo.css */
:root {
  --green600:#0F6B4F; --green500:#14916B; --green400:#34B488; --green700:#0E5C46;
  --gold:#F7BF62; --gold500:#F2A93B; --coral:#F2643F; --blue:#3A86CC;
  --bg:#07140f; --surf:#0d2019; --surf2:#10271f; --line:#1b3a2e;
  --txt:#e7f3ee; --mut:#7fa093;
  --ui:'Poppins',sans-serif;
  --display:var(--ui);
  --mono:var(--ui);
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--bg); color:var(--txt); font-family:var(--ui); overflow:hidden; }
.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(--mut); font-weight:700; }
.acc { color:var(--green400); } .coral { color:var(--coral); } .mut { color:var(--mut); }

/* buttons */
.btn { font-family:var(--ui); font-weight:700; font-size:14px; border:none; border-radius:999px;
  cursor:pointer; padding:12px 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-gold { background:var(--gold500); color:#08332A; }
.btn-coral { background:var(--coral); color:#fff; }
.btn-ghost { background:transparent; color:var(--txt); box-shadow:inset 0 0 0 1.4px var(--line); }
.btn-ghost:hover { background:var(--surf2); }
.btn-block { width:100%; }
.btn-sm { padding:8px 12px; font-size:13px; }
.btn:disabled { opacity:.55; cursor:default; }

/* login */
.login { position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(1200px 600px at 50% -10%, #0c2a20, var(--bg)); z-index:50; }
.login-card { width:380px; max-width:92vw; background:var(--surf); border:1px solid var(--line); border-radius:22px; padding:32px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.login-card h1 { font-family:var(--display); font-size:26px; margin:14px 0 4px; }
.login-card .sub { color:var(--mut); font-size:14px; margin:0 0 22px; }
.login-card label { display:block; margin:0 0 7px; }
.login-card input { width:100%; background:var(--surf2); border:1px solid var(--line); color:var(--txt);
  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(--green400); }
#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; }
.login-mk { width:64px; height:64px; border-radius:18px; font-size:32px; }
.err { color:#ffb4a2; font-size:13px; margin-top:10px; }

/* app grid */
.app { display:grid; grid-template-columns:74px 1fr 412px; height:100vh; }
.rail { background:var(--surf); border-right:1px solid var(--line); display:flex; flex-direction:column;
  align-items:center; padding:18px 0; gap:6px; }
.rail .mk { margin-bottom:18px; }
.rail-btn { width:46px; height:46px; border-radius:13px; border:none; background:transparent; color:var(--mut);
  cursor:pointer; display:grid; place-items:center; font-size:18px; transition:.15s; }
.rail-btn:hover { background:var(--surf2); color:var(--txt); }
.rail-btn.on { background:var(--green400); color:#06231a; }
.rail .sp { flex:1; }

/* map */
.mapwrap { position:relative; overflow:hidden; }
.map { position:absolute; inset:0; background:#0a1c15; }
.topbar { position:absolute; top:0; left:0; right:0; z-index:500; display:flex; align-items:center; gap:14px;
  padding:14px 18px; pointer-events:none; background:linear-gradient(180deg, rgba(7,20,15,.92), rgba(7,20,15,0)); }
.region { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:17px; }
.region .badge { font-size:11px; font-weight:700; color:var(--green400); background:rgba(52,180,136,.15);
  padding:3px 9px; border-radius:99px; font-family:var(--ui); }
.kpis { margin-left:auto; display:flex; gap:10px; pointer-events:auto; }
.kpi { background:rgba(13,32,25,.85); border:1px solid var(--line); border-radius:13px; padding:8px 14px; backdrop-filter:blur(8px); }
.kpi .v { font-family:var(--display); font-weight:700; font-size:19px; line-height:1; }
.kpi .l { font-size:10.5px; color:var(--mut); margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }
.legend { position:absolute; bottom:16px; left:18px; z-index:500; display:flex; gap:15px; flex-wrap:wrap;
  background:rgba(13,32,25,.85); border:1px solid var(--line); border-radius:12px; padding:9px 15px; backdrop-filter:blur(8px); font-size:12px; }
.legend span { display:flex; align-items:center; gap:6px; color:var(--mut); }
.ld { width:10px; height:10px; border-radius:50%; }
.ld.acc { background:var(--green400); } .ld.mut { background:var(--mut); }
.ld.blue { background:var(--blue); } .ld.coral { background:var(--coral); }

/* map */
.maplibregl-map { background:#f2efe9; }  /* OSM's land colour, so empty tiles do not flash */
.maplibregl-popup-content { background:var(--surf); color:var(--txt); border-radius:12px; padding:9px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); font-size:12.5px; line-height:1.45; }
.maplibregl-popup-tip { border-top-color:var(--surf) !important; border-bottom-color:var(--surf) !important; }
.maplibregl-ctrl-attrib { font-size:10.5px; }
.vmarker { border-radius:50%; border:2px solid rgba(255,255,255,.9); box-shadow:0 4px 12px rgba(0,0,0,.5);
  width:18px; height:18px; }
.vmarker.job { border-radius:4px; }

/* panel */
.panel { background:var(--surf); border-left:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
.ptab { display:flex; padding:14px 16px 0; gap:4px; border-bottom:1px solid var(--line); }
.ptab button { flex:1; padding:11px 6px; border:none; background:transparent; color:var(--mut); font-weight:700;
  font-size:13.5px; cursor:pointer; border-bottom:2.5px solid transparent; font-family:var(--ui); }
.ptab button.on { color:var(--txt); border-bottom-color:var(--green400); }
.ptab .ct { background:var(--green400); color:#06231a; font-size:10.5px; padding:1px 7px; border-radius:99px; margin-left:5px; font-weight:700; }
.ptab .ct.gold { background:var(--gold); color:#3a2a00; }
.tabpane { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.filters { display:flex; gap:8px; padding:14px 14px 0; }
.filters select { flex:1; background:var(--surf2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:9px 10px; font-family:var(--ui); font-size:13px; }
.plist { flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }

/* job + vet cards */
.job { background:var(--surf2); border:1px solid var(--line); border-radius:14px; padding:13px; cursor:pointer; transition:.15s; }
.job:hover { border-color:var(--green400); }
.job.sel { border-color:var(--green400); box-shadow:0 0 0 1px var(--green400); }
.job.sos { border-left:3px solid var(--coral); }
.job .row { display:flex; align-items:center; gap:8px; }
.job .prob { font-weight:700; font-size:14.5px; margin:9px 0 5px; }
.job .meta { color:var(--mut); font-size:12.5px; display:flex; gap:10px; flex-wrap:wrap; }
.code { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--mut); }

.pill { font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:99px; display:inline-flex; align-items:center; gap:5px; }
.pill.requested { background:rgba(127,160,147,.18); color:#bcd; }
.pill.assigned, .pill.accepted, .pill.completed { background:rgba(52,180,136,.16); color:var(--green400); }
.pill.en_route { background:rgba(58,134,204,.18); color:#9cc6ee; }
.pill.arrived, .pill.in_service { background:rgba(247,191,98,.16); color:var(--gold); }
.pill.cancelled, .pill.no_show { background:rgba(242,100,63,.16); color:#ffb4a2; }
.pill.sos { background:rgba(242,100,63,.18); color:#ffb4a2; }

.empty { color:var(--mut); text-align:center; padding:40px 16px; font-size:14px; }

/* drawer */
.drawer { position:fixed; inset:0; z-index:60; background:rgba(4,12,9,.55); display:flex; justify-content:flex-end; }
.drawer-card { width:460px; max-width:94vw; height:100%; background:var(--surf); border-left:1px solid var(--line);
  overflow:auto; padding:22px; box-shadow:-20px 0 60px rgba(0,0,0,.5); }
.drawer h2 { font-family:var(--display); font-size:22px; margin:6px 0 2px; }
.drawer .close { float:right; background:transparent; border:none; color:var(--mut); font-size:22px; cursor:pointer; }
.drawer .section { margin-top:20px; }
.drawer select { width:100%; background:var(--surf2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:11px; font-family:var(--ui); font-size:14px; margin-bottom:10px; }
.tl { display:flex; gap:11px; }
.tl .dot { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; flex:none; background:var(--surf2); }
.tl .line { width:2px; background:var(--line); margin:2px auto; flex:1; }
.tl .body { padding-bottom:16px; }
.tl .st { font-weight:700; font-size:13.5px; }
.tl .nt { color:var(--mut); font-size:12px; }
.tl .ts { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11px; color:var(--mut); }
.kv { display:flex; gap:8px; font-size:13.5px; margin:5px 0; }
.kv .k { color:var(--mut); min-width:86px; }

button, input, select, textarea { font-family:inherit; }
/* MapLibre sets its own face on popups and attribution. Not here. */
.maplibregl-map { font-family:var(--ui); }

.ld.gold { background:var(--gold); } .ld.sq { border-radius:3px; }
.kpi .v.gold { color:var(--gold); }
.job.farm { border-left:3px solid var(--gold); }
.job .wait { font-variant-numeric:tabular-nums; }
.job .wait.long { color:#ffb4a2; font-weight:700; }

/* triage */
.tri-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.tri-stat { background:var(--surf2); border:1px solid var(--line); border-radius:11px; padding:9px 11px; }
.tri-stat .l { font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; }
.tri-stat .v { font-weight:700; font-size:18px; margin-top:2px; font-variant-numeric:tabular-nums; }
.tri-alert { background:rgba(242,100,63,.13); border:1px solid rgba(242,100,63,.4); color:#ffc9b8; border-radius:12px;
  padding:10px 12px; font-size:12.5px; line-height:1.45; margin-top:14px; }
.tri-alert b { color:#fff; }
.reqs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.req { background:var(--surf2); border:1px solid var(--line); border-radius:99px; padding:5px 10px; font-size:12px; }
.tri-vet { display:flex; align-items:center; gap:10px; background:var(--surf2); border:1px solid var(--line);
  border-radius:12px; padding:10px 11px; }
.tri-vet.best { border-color:var(--green400); box-shadow:inset 3px 0 0 var(--green400); }
.tri-vet.dim { opacity:.72; }
.tri-vet .nm { font-weight:700; font-size:13.5px; }
.tri-vet .sp { font-size:11.5px; color:var(--mut); margin-top:1px; }
.tri-vet .fit { color:var(--green400); } .tri-vet .nofit { color:var(--gold); }
.best-tag { font-size:10px; font-weight:700; color:#06231a; background:var(--green400); padding:1px 6px; border-radius:99px; margin-left:5px; }
.tri-acts { display:flex; gap:8px; margin-top:12px; }
.tri-acts .btn { flex:1; }
a.btn { text-decoration:none; }

/* care chat */
.carelog { max-height:50vh; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.cbub { align-self:flex-start; max-width:85%; background:var(--surf2); border:1px solid var(--line); border-radius:13px 13px 13px 4px; padding:8px 11px; }
.cbub.team { align-self:flex-end; background:rgba(52,180,136,.14); border-color:rgba(52,180,136,.35); border-radius:13px 13px 4px 13px; }
.cbub .ch { font-size:11px; color:var(--mut); margin-bottom:3px; }
.cbub .cb { font-size:13.5px; white-space:pre-wrap; }
.carebox { width:100%; min-height:80px; background:var(--surf2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:10px; font-family:var(--ui); font-size:14px; margin:8px 0 10px; }

/* A field that failed validation: red edge, and the reason under it. */
input.invalid, select.invalid, textarea.invalid, .fld input.invalid, .fld select.invalid { border-color:#f2643f !important; box-shadow:0 0 0 3px rgba(242,100,63,.18); }
.field-error { color:#ffb4a2; font-size:12px; margin-top:5px; line-height:1.4; }

/* ---- tablets and phones ------------------------------------------------
   The desk is built for a wide screen: the map and the queue side by side.
   On a laptop the queue narrows; on a tablet or phone the page scrolls — the
   rail becomes a bar across the top, the map sits under it, and the queue
   follows below the map at full width. */
/* The queue's filters wrap onto a second line rather than being cut off
   when the panel is narrow. */
.filters { flex-wrap:wrap; }
.filters > * { min-width:0; }
.filters select { flex:1 1 120px; }
@media (max-width:1180px) { .app { grid-template-columns:74px 1fr 360px; } .kpi { padding:7px 11px; } }
@media (max-width:900px) {
  body { overflow:auto; }
  /* minmax(0,1fr): the column is the screen's width, whatever a card in the
     queue would like; the card wraps inside it. */
  .app { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 52vh auto; height:auto; min-height:100vh; }
  .app > * { min-width:0; }
  .panel * { overflow-wrap:anywhere; }
  .rail { flex-direction:row; padding:8px 12px; gap:8px; border-right:none; border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:600; }
  .rail .mk { margin:0 6px 0 0; }
  .rail .sp { flex:1; }
  .mapwrap { min-height:320px; }
  .topbar { flex-wrap:wrap; gap:8px; padding:10px 12px; }
  .kpis { margin-left:0; width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }
  .kpi { flex:0 0 auto; }
  .legend { display:none; }
  .panel { border-left:none; border-top:1px solid var(--line); overflow:visible; min-height:60vh; }
  .drawer-card { width:100vw; max-width:100vw; }
}