/* Pata Feliz brand touches inside the ORYKSA dashboard: clinic green + coral. */
.biz-mark { font-size: 14px; }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-b { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
.crit-t { color: var(--crit); font-weight: 600; }
.closed-blk { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: start center; padding-top: 12px; font-size: 12px; font-weight: 600; color: var(--faint); background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 8px, transparent 8px, transparent 16px); pointer-events: none; }
.pill-arrived { background: var(--info-bg); color: var(--info); } .pill-done { background: var(--neutral-bg); color: var(--muted); } .pill-unpaid { background: var(--warn-bg); color: var(--warn); }
.appt.st-arrived { box-shadow: 0 0 0 2px var(--c); }

/* pets */
.pet-av { object-fit: cover; border-radius: 50%; flex: none; }
.pet-ini { display: inline-grid; place-items: center; border-radius: 50%; background: #E3F4EE; flex: none; }
.pet-ini.sp-cat { background: #FFEDE6; } .pet-ini.sp-exotic { background: #EDE9FE; }
.pet-stack { display: inline-flex; vertical-align: middle; } .pet-stack > * + * { margin-left: -8px; } .pet-stack .av { box-shadow: 0 0 0 2px var(--panel); }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-content: start; min-width: 0; }
.pcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; align-items: start; }
.pcard .hit, .wcard .hit { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.pcard.sel, .wcard.sel { border-color: #15946B; box-shadow: 0 0 0 3px rgba(21,148,107,.18); }
.pc-b { display: grid; gap: 2px; min-width: 0; } .pc-b b { font-size: 15px; } .pc-b small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-own { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 4px; min-width: 0; }
.pc-tags { display: flex; flex-wrap: wrap; margin-top: 4px; }
.tg.pf-senior { background: var(--info-bg); color: var(--info); } .tg.pf-allergy, .tg.pf-aggressive { background: var(--crit-bg); color: var(--crit); } .tg.pf-anxious { background: #FDF2D8; color: #92590B; }
.tg.vx-overdue { background: var(--crit-bg); color: var(--crit); } .tg.vx-due { background: var(--warn-bg); color: var(--warn); } .tg.vx-ok { background: var(--ok-bg); color: var(--ok); } .tg.vx-sent { background: var(--info-bg); color: var(--info); }
.tg.ot-plan { background: #E3F4EE; color: #0E7A57; } .tg.ot-vip { background: #FDF2D8; color: #92590B; } .tg.ot-new { background: var(--info-bg); color: var(--info); } .tg.ot-debt { background: var(--crit-bg); color: var(--crit); }
.ward-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--info-bg); color: var(--info); font-size: 13px; font-weight: 600; }

/* side panels */
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kv > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); min-width: 0; } .kv span { font-size: 11.5px; color: var(--muted); } .kv b { font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.row-link { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.row-link:hover { background: var(--hover); } .row-link small { display: block; color: var(--muted); } .row-link > span { min-width: 0; }
.veh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .veh-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; } .veh-list small { display: block; color: var(--muted); }
.hist li { min-width: 0; } .hist li .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 8px; border-left: 2px solid var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.timeline li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #15946B; box-shadow: 0 0 0 3px var(--panel); }
.timeline li:first-child::before { background: #FF8A65; }
.tnum { font-variant-numeric: tabular-nums; }
.check-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 10px; }
.check-line input { min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; font-size: 13px; }
.check-line input.bad { border-color: #DC2626; }

/* ward */
.ward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-content: start; min-width: 0; }
.wcard { position: relative; display: grid; gap: 10px; padding: 14px; border-top: 3px solid var(--line); }
.wcard.ws-b-in-surgery { border-top-color: #EF4444; } .wcard.ws-b-recovering { border-top-color: #F59E0B; } .wcard.ws-b-observation { border-top-color: #0EA5E9; } .wcard.ws-b-ready { border-top-color: #15946B; }
.wc-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; } .wc-h small { display: block; color: var(--muted); font-size: 12px; }
.wc-r { margin: 0; font-size: 13px; }
.wc-m { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); } .wc-m span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.wc-f, .wc-f * { position: relative; z-index: 1; }
.pill.ws-in-surgery { background: var(--crit-bg); color: var(--crit); } .pill.ws-recovering { background: var(--warn-bg); color: var(--warn); } .pill.ws-observation { background: var(--info-bg); color: var(--info); } .pill.ws-ready { background: var(--ok-bg); color: var(--ok); }

:root[data-theme="dark"] .pet-ini { background: rgba(21,148,107,.22); } :root[data-theme="dark"] .pet-ini.sp-cat { background: rgba(255,138,101,.2); } :root[data-theme="dark"] .pet-ini.sp-exotic { background: rgba(139,92,246,.22); }
:root[data-theme="dark"] .tg.ot-plan { background: rgba(21,148,107,.22); color: #6EE7B7; } :root[data-theme="dark"] .tg.ot-vip, :root[data-theme="dark"] .tg.pf-anxious { background: #3A2E12; color: #FCD34D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pet-ini { background: rgba(21,148,107,.22); } :root:not([data-theme="light"]) .pet-ini.sp-cat { background: rgba(255,138,101,.2); } :root:not([data-theme="light"]) .pet-ini.sp-exotic { background: rgba(139,92,246,.22); }
  :root:not([data-theme="light"]) .tg.ot-plan { background: rgba(21,148,107,.22); color: #6EE7B7; } :root:not([data-theme="light"]) .tg.ot-vip, :root:not([data-theme="light"]) .tg.pf-anxious { background: #3A2E12; color: #FCD34D; }
}
@media (max-width: 760px) { .kpis.three { grid-template-columns: minmax(0, 1fr); } .pet-grid, .ward-grid { grid-template-columns: minmax(0, 1fr); } }
.side-panel { grid-template-columns: minmax(0, 1fr); } .side-panel > * { min-width: 0; }
.side-panel .sp-f { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard > .hit, .wcard > .hit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; z-index: 0; grid-area: auto; }
.pcard > .hit:focus, .wcard > .hit:focus { outline: none; } .pcard > .hit:focus-visible, .wcard > .hit:focus-visible { outline: 2px solid #15946B; outline-offset: -2px; }
.hist .tg { justify-self: start; }
/* clickable records */
.tbl tr[data-act] { cursor: pointer; } .tbl tr[data-act]:focus-visible, .rec-link:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.rec-link { cursor: pointer; border-radius: 10px; transition: background .12s; } .rec-link:hover { background: var(--hover); }