:root{
  --teal:#0a6b6b; --teal-dk:#084f4f; --ink:#13262b; --muted:#5d7378;
  --line:#dce5e6; --bg:#f4f7f7; --card:#ffffff; --amber:#b5670a;
  --red:#b3261e; --green:#1e7d4f;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--teal)}

/* ---------- Login ---------- */
.login-page{display:flex;min-height:100vh;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0a6b6b 0%,#084f4f 55%,#06403f 100%)}
.login-card{background:var(--card);width:360px;max-width:92vw;padding:38px 34px 28px;
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);text-align:center}
.crest{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:var(--teal);
  color:#fff;font-size:34px;font-weight:700;line-height:58px}
.login-card h1{font-size:20px;margin:0 0 2px}
.login-card .sub{margin:0 0 22px;color:var(--muted);font-size:13px;letter-spacing:.3px;text-transform:uppercase}
.login-card label{display:block;text-align:left;font-size:12px;font-weight:600;color:var(--muted);
  margin:14px 0 5px;text-transform:uppercase;letter-spacing:.4px}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.login-card input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,107,107,.15)}
.login-card button{width:100%;margin-top:22px;padding:12px;border:0;border-radius:8px;background:var(--teal);
  color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.login-card button:hover{background:var(--teal-dk)}
.login-card .foot{margin-top:20px;font-size:11.5px;color:var(--muted)}
.alert{background:#fdecea;color:var(--red);border:1px solid #f5c6c2;padding:9px 12px;
  border-radius:8px;font-size:13px;margin-bottom:6px}

/* ---------- Chrome ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;background:var(--teal);
  color:#fff;padding:13px 26px}
.brand{font-weight:600;letter-spacing:.2px}
.crest-sm{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;
  background:#fff;color:var(--teal);border-radius:50%;font-weight:700;margin-right:8px}
.brand .div{opacity:.55;margin:0 6px}
.user{font-size:13px}.user a{color:#d6efef}
.wrap{max-width:1080px;margin:28px auto;padding:0 22px}
.pagefoot{text-align:center;color:var(--muted);font-size:12px;padding:26px}

/* ---------- Stats ---------- */
.stats{display:flex;gap:16px;margin-bottom:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:16px 22px;min-width:150px}
.stat .num{display:block;font-size:30px;font-weight:700;color:var(--teal)}
.stat.new .num{color:var(--amber)}
.stat .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

h2{font-size:19px;margin:26px 0 14px}
h3{font-size:15px;margin:26px 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* ---------- Table ---------- */
.grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:11px;overflow:hidden;font-size:14px}
.grid th{background:#eef3f3;text-align:left;padding:11px 14px;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line)}
.grid td{padding:12px 14px;border-bottom:1px solid var(--line)}
.grid tr:last-child td{border-bottom:0}
.grid tbody tr{cursor:pointer}
.grid tbody tr:hover{background:#f0f7f6}
.grid tr.is-new{background:#fff8ef}
.grid tr.is-new:hover{background:#fdf0db}
.name{font-weight:600}

.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;text-transform:capitalize}
.badge-new{background:#fff0d6;color:var(--amber)}
.badge-reviewed{background:#e3f3ea;color:var(--green)}
.sev{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11.5px;font-weight:700;text-transform:uppercase}
.sev-high{background:#fdecea;color:var(--red)}
.sev-medium{background:#fff0d6;color:var(--amber)}
.sev-low{background:#e9eef0;color:var(--muted)}

/* ---------- Empty state ---------- */
.empty{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:60px 24px;text-align:center}
.empty-icon{font-size:46px;color:#bcd0d0;line-height:1}
.empty h3{color:var(--ink);text-transform:none;letter-spacing:0;font-size:18px;margin:16px 0 6px}
.empty p{color:var(--muted);margin:4px 0}
.empty .muted{font-size:13px;color:#9bb0b0}

/* ---------- Detail ---------- */
.back{display:inline-block;margin-bottom:6px;font-size:13px}
.cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:11px;overflow:hidden}
.field{background:var(--card);padding:13px 16px;display:flex;flex-direction:column;gap:3px}
.field.wide{grid-column:1 / -1}
.field .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.field .v{font-size:15px}
.payload{background:#0f2a2a;color:#c8e6e6;padding:18px;border-radius:11px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55}
@media(max-width:640px){.cardgrid{grid-template-columns:1fr}.stats{flex-wrap:wrap}}

/* ---------- Faded greyscale background watermark (Star of Life) ---------- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:url("/static/star-of-life.png") left 3vw center no-repeat;
  background-size:min(62vmin,680px);
  filter:grayscale(100%);
  opacity:.06;
  pointer-events:none;   /* never intercept clicks */
}
/* keep all real content above the watermark */
.topbar,.wrap,.pagefoot,.login-page,.login-card{position:relative;z-index:1}

/* ---------- Right-side faded greyscale emblem (Antigua & Barbuda coat of arms) ---------- */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:url("/static/ab-emblem.png") right 3vw center no-repeat;
  background-size:min(62vmin,680px);
  filter:grayscale(100%);
  opacity:.06;
  pointer-events:none;
}

/* ---------- Dashboard passport thumbnail + arrival column ---------- */
.pp-thumb{width:48px;height:32px;object-fit:cover;border-radius:4px;border:1px solid var(--line);display:block}
.pp-none{color:#bcd0d0}
.grid th.ar,.grid td.ar{text-align:right;white-space:nowrap}

/* ---------- Case detail: passport + group/QR panel ---------- */
.casehead{display:flex;gap:18px;align-items:stretch;margin:6px 0 16px;flex-wrap:wrap}
.passport-wrap{flex:0 1 auto;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.passport-wrap .k{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.passport{display:block;width:240px;max-width:100%;height:160px;object-fit:contain;border-radius:8px;border:1px solid var(--line);background:#fff}
.grouppanel{flex:0 0 230px;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:18px 16px}
.grouppanel .gp-label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.grouppanel .gp-id{font-size:18px;font-weight:700;color:var(--teal);margin:4px 0 12px;letter-spacing:.5px}
.grouppanel .qr{width:160px;height:160px;image-rendering:pixelated}
.grouppanel .gp-sub{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.3}
.specimen{background:#fff8ef;border:1px solid #f3e2c4;color:#8a5a12;font-size:12.5px;
  padding:8px 12px;border-radius:8px;margin:0 0 14px;font-weight:600}
.qna td:first-child{width:55%;color:var(--ink)}
.qna td:last-child{font-weight:600}
@media(max-width:640px){.grouppanel{flex-basis:100%}}