/* ── BioVerity AI — shared shell ─────────────────────────────────────────── */
:root {
  --blue-900:#0f2f5c; --blue-700:#17458c; --blue-600:#1e5bb8; --blue-500:#2b74d8;
  --blue-050:#eaf2fd;
  --green-700:#1f7a3a; --green-600:#2b9a4c; --green-500:#3ab35c; --green-050:#e9f7ee;
  --amber-600:#b26a00; --amber-050:#fff4e0;
  --red-600:#c0392b;  --red-050:#fdeceb;

  --ink:#12233c; --ink-2:#42556e; --ink-3:#7688a0;
  --line:#dde5ef; --line-2:#eef3f9;
  --bg:#f4f7fb; --card:#fff;

  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,42,77,.06), 0 8px 24px -12px rgba(16,42,77,.18);
  --shadow-lg:0 20px 50px -20px rgba(16,42,77,.35);
  --sans:'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono:'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box}
/* Class-level display (.pill, .notice, .modal-bg) would otherwise beat the
   user-agent [hidden] rule, leaving "hidden" elements on screen. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue-600)}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em}
img{max-width:100%}

/* ── auth screens ─────────────────────────────────────────────────────────── */
.auth-wrap{
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;
}
@media (max-width:900px){ .auth-wrap{grid-template-columns:1fr} .auth-brand{display:none} }

.auth-brand{
  position:relative; overflow:hidden; color:#fff; padding:48px 56px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(150deg,var(--blue-900) 0%, var(--blue-700) 45%, var(--green-700) 130%);
}
.auth-brand::after{
  content:''; position:absolute; inset:auto -140px -220px auto; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(58,179,92,.45), transparent 62%);
}
.auth-brand.is-admin{
  background:linear-gradient(150deg,#08182f 0%, var(--blue-900) 50%, var(--blue-700) 130%);
}
.auth-brand > *{position:relative; z-index:1}
.auth-brand .mark{width:92px; margin-bottom:22px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.auth-brand h1{font-size:34px; font-weight:700; margin-bottom:10px}
.auth-brand p.lede{color:rgba(255,255,255,.82); font-size:16px; max-width:42ch; margin:0 0 28px}
.brand-points{list-style:none; margin:0; padding:0; display:grid; gap:14px; max-width:44ch}
.brand-points li{display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.9); font-size:14.5px}
.brand-points .dot{
  flex:0 0 24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); font-size:13px;
}
.auth-brand footer{display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.62); font-size:12.5px}
.auth-brand footer img{width:34px; opacity:.95; filter:brightness(0) invert(1)}

.auth-panel{display:grid; place-items:center; padding:40px 24px}
.auth-card{width:100%; max-width:400px}
.auth-card .mobile-mark{display:none}
@media (max-width:900px){ .auth-card .mobile-mark{display:block; width:78px; margin:0 auto 18px} }
.auth-card h2{font-size:25px; margin-bottom:6px}
.auth-card .sub{color:var(--ink-3); margin:0 0 26px; font-size:14.5px}

/* ── forms ────────────────────────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.input, select.input, textarea.input{
  width:100%; padding:11px 13px; font:inherit; font-size:14.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .15s, box-shadow .15s;
}
.input:focus{outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-050)}
textarea.input{resize:vertical; min-height:80px}
.input-row{display:flex; gap:10px}
.input-row > *{flex:1}
.hint{font-size:12.5px; color:var(--ink-3); margin-top:6px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius-sm); background:var(--blue-600); color:#fff;
  transition:filter .15s, background .15s, transform .06s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:not-allowed; filter:none}
.btn.block{width:100%}
.btn.green{background:var(--green-600)}
.btn.red{background:var(--red-600)}
.btn.ghost{background:#fff; border-color:var(--line); color:var(--ink-2)}
.btn.ghost:hover{background:var(--line-2); filter:none}
.btn.sm{padding:7px 12px; font-size:13px}
.btn.lg{padding:15px 22px; font-size:16px}

/* ── app shell ────────────────────────────────────────────────────────────── */
.topbar{
  background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
}
.topbar-in{
  max-width:1240px; margin:0 auto; padding:0 22px; height:62px;
  display:flex; align-items:center; gap:18px;
}
.topbar .logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.topbar .logo img{width:34px}
.topbar .logo b{font-size:16px; letter-spacing:-.02em}
.topbar .logo b span{color:var(--green-600)}
.topbar .logo small{display:block; font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}
.topbar nav{display:flex; gap:2px; margin-left:14px; flex:1; overflow-x:auto; scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{
  padding:8px 13px; border-radius:8px; text-decoration:none; color:var(--ink-2);
  font-size:14px; font-weight:500; white-space:nowrap;
}
.topbar nav a:hover{background:var(--line-2)}
.topbar nav a.on{background:var(--blue-050); color:var(--blue-700); font-weight:600}
.topbar .who{display:flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto}
.topbar nav{min-width:0}
.avatar{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-700); color:#fff; font-size:13px; font-weight:700; flex:0 0 34px;
}
.avatar.green{background:var(--green-600)}
.who-name{font-size:13.5px; font-weight:600; line-height:1.15; white-space:nowrap}
.who-role{font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.who-meta{flex:0 0 auto}
/* The admin bar also carries a tenant switcher, so the name block is the first
   thing to go when space runs short. */
@media (max-width:1180px){ .topbar.admin .who-meta{display:none} }
@media (max-width:720px){ .who-meta{display:none} }

.page{max-width:1240px; margin:0 auto; padding:26px 22px 64px}
.page-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.page-head h2{font-size:22px}
.page-head .sub{color:var(--ink-3); font-size:14px; margin-top:2px}
.page-head .spacer{flex:1}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-head{padding:16px 20px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:12px}
.card-head h3{font-size:15.5px}
.card-head .spacer{flex:1}
.card-body{padding:20px}
.grid{display:grid; gap:18px}
@media (min-width:900px){ .g-2{grid-template-columns:1fr 1fr} .g-3{grid-template-columns:repeat(3,1fr)} }

/* ── stats ────────────────────────────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px}
.stat .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:600}
.stat .v{font-size:27px; font-weight:700; letter-spacing:-.02em; margin-top:3px}
.stat .m{font-size:12.5px; color:var(--ink-3)}
.stat.blue .v{color:var(--blue-600)} .stat.green .v{color:var(--green-600)}
.stat.amber .v{color:var(--amber-600)} .stat.red .v{color:var(--red-600)}

/* ── tables ───────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:14px; min-width:620px}
table.tbl th{
  text-align:left; padding:11px 14px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); font-weight:700; border-bottom:1px solid var(--line); background:#fbfdff; white-space:nowrap;
}
table.tbl td{padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle}
table.tbl tbody tr:hover{background:#fafcff}
table.tbl tbody tr:last-child td{border-bottom:none}
.cell-name{font-weight:600}
.cell-sub{font-size:12.5px; color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* ── pills ────────────────────────────────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.pill.green{background:var(--green-050); color:var(--green-700)}
.pill.blue{background:var(--blue-050); color:var(--blue-700)}
.pill.amber{background:var(--amber-050); color:var(--amber-600)}
.pill.red{background:var(--red-050); color:var(--red-600)}
.pill.grey{background:var(--line-2); color:var(--ink-2)}
.pill .led{width:7px; height:7px; border-radius:50%; background:currentColor}
.pill .led.live{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── notices ──────────────────────────────────────────────────────────────── */
.notice{
  padding:11px 14px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:16px;
  border:1px solid; display:flex; gap:9px; align-items:flex-start;
}
.notice.err{background:var(--red-050); border-color:#f3c6c1; color:#8e2b20}
.notice.ok{background:var(--green-050); border-color:#bfe6cd; color:var(--green-700)}
.notice.warn{background:var(--amber-050); border-color:#f0d9ab; color:var(--amber-600)}
.notice.info{background:var(--blue-050); border-color:#c6dbf8; color:var(--blue-700)}
.notice[hidden]{display:none}

.empty{padding:44px 20px; text-align:center; color:var(--ink-3)}
.empty .big{font-size:32px; margin-bottom:8px; opacity:.55}

/* ── modal ────────────────────────────────────────────────────────────────── */
.modal-bg{
  position:fixed; inset:0; background:rgba(15,32,60,.5); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px; z-index:100;
}
.modal-bg[hidden]{display:none}
.modal{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
}
.modal header{padding:18px 22px; border-bottom:1px solid var(--line-2); display:flex; align-items:center}
.modal header h3{font-size:17px; flex:1}
.modal .body{padding:22px}
.modal footer{padding:16px 22px; border-top:1px solid var(--line-2); display:flex; gap:10px; justify-content:flex-end}
.x{background:none; border:none; font-size:22px; line-height:1; color:var(--ink-3); cursor:pointer; padding:0 4px}

/* ── toast ────────────────────────────────────────────────────────────────── */
#toasts{position:fixed; right:18px; bottom:18px; z-index:200; display:grid; gap:10px; max-width:340px}
.toast{
  background:#12233c; color:#fff; padding:12px 15px; border-radius:var(--radius-sm);
  font-size:13.5px; box-shadow:var(--shadow-lg); animation:slide .25s ease;
}
.toast.ok{background:var(--green-700)} .toast.err{background:var(--red-600)}
@keyframes slide{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.footer-brand{
  display:flex; align-items:center; justify-content:center; gap:9px;
  color:var(--ink-3); font-size:12px; padding:26px 0 8px;
}
.footer-brand img{width:26px; opacity:.6}
.spin{
  width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:rot .7s linear infinite; display:inline-block;
}
@keyframes rot{to{transform:rotate(360deg)}}
.mono{font-family:var(--mono); font-size:13px}