/* QuantumPlateReader — aligned to the Microbiology app (flat / utility look).
   Self-contained & offline: only system sans-serif, no CDN, no web fonts.
   Tokens mirror the micro app: action blue #0091FF, brand #2C91FF, steel table header #3774A3,
   title gray #535353, borders #dbdbdb / #b9bccdcc, input bg #ecf4ff, radius 4px, no shadows. */

:root{
    --brand:#2C91FF; --action:#0091FF; --action-hover:#3DACFF; --steel:#3774A3; --navy:#183b95;
    --title:#535353; --ink:#212529; --muted:#6b7280;
    --border:#dbdbdb; --border-panel:#b9bccdcc; --border-soft:#dddddd;
    --panel:#ffffff; --panel-alt:#f4f5f9; --input-bg:#ecf4ff; --input-border:#959595; --row-alt:#f5f5f5;
    --sus:#1e7e34; --res:#c82333; --int:#b8860b;
    --sus-bg:#e6f4ea; --res-bg:#fbe7e9; --int-bg:#fff6e0; --unk-bg:#eef0f2;
    --radius:4px;
    --font-text:"Segoe UI",Tahoma,Arial,sans-serif;
    --font-mono:Consolas,"Cascadia Mono",monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--font-text); color:var(--ink); background:#ffffff; min-height:100vh; line-height:1.45; }

/* ===== Shared shell: fixed header + footer (identical to the Microbiology app) ===== */
.app-header{ position:fixed; top:0; left:0; right:0; height:80px; z-index:100; background:#fff;
    border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand .logo{ height:60px; width:auto; display:block; }
.brand h1{ margin:0; font-size:21px; font-weight:400; color:var(--title); line-height:1.1; }
.brand .sub{ margin:2px 0 0; font-size:13px; color:var(--muted); }

.user-menu{ position:relative; }
.user-menu > summary{ list-style:none; width:3rem; height:3rem; border-radius:100%; border:1px solid var(--muted);
    color:var(--muted); background:transparent; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:600; cursor:pointer; user-select:none; }
.user-menu > summary::-webkit-details-marker{ display:none; }
.user-menu > summary:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(0,123,255,.25); }
.user-pop{ position:absolute; right:0; top:calc(100% + 8px); min-width:170px; background:#fff;
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 16px rgba(0,0,0,.2); padding:4px 0; }
.user-pop .who{ padding:8px 14px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--border-soft); }
.btn-logout{ width:100%; text-align:left; background:transparent; border:none; color:var(--brand);
    padding:11px 14px; font-family:var(--font-text); font-size:14px; font-weight:600; cursor:pointer; }
.btn-logout:hover{ background:#f1f1f1; }

.app-footer{ border-top:1px solid var(--border); padding:8px 22px 16px; margin-top:26px; }
.app-footer p{ margin:0; font-size:13px; color:var(--muted); }

.body-content{ max-width:1760px; margin:0 auto; padding:22px; }
body{ padding-top:80px; }   /* clear the fixed header */

.grid{ display:grid; grid-template-columns:minmax(0,1fr) 900px; gap:20px; align-items:start; }

/* ===== Left: plate ===== */
.plate-card{ background:var(--panel); border:1px solid var(--border-panel); border-radius:var(--radius); padding:12px; }
.plate-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 10px; }
.plate-head .ttl{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--ink); }
.plate-head .ttl .swatch{ width:9px; height:9px; border-radius:2px; background:var(--action); }
/* Camera button — loads a saved OCR result (demo shortcut, replaces the "Live View" text) */
.cam-btn{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
    border-radius:var(--radius); border:1px solid var(--action); background:#eaf4ff; color:var(--action);
    cursor:pointer; padding:0; transition:background .12s, color .12s; }
.cam-btn:hover{ background:var(--action); color:#fff; }
.cam-btn svg{ width:15px; height:15px; }
.plate-head .meta{ font-family:var(--font-mono); font-size:12px; color:var(--action);
    background:#eaf4ff; border:1px solid #cfe6ff; padding:4px 10px; border-radius:var(--radius); }
.plate-frame{ position:relative; border-radius:var(--radius); overflow:hidden; background:#0c1830; aspect-ratio:675/668; border:1px solid var(--border-panel); }
.plate-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.plate-frame svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* empty placeholder (before a photo is processed) */
.plate-frame.empty{ display:flex; align-items:center; justify-content:center; background:#12233f; }
.plate-frame.empty img, .plate-frame.empty svg{ display:none; }
.plate-frame .placeholder{ display:none; }
.plate-frame.empty .placeholder{ display:block; text-align:center; color:#8fbdec; padding:40px; }
.plate-frame.empty .placeholder .mark{ font-size:44px; opacity:.7; }
.plate-frame.empty .placeholder .txt{ margin-top:12px; font-size:16px; color:#b9d6f2; }
.plate-frame.empty .placeholder .hint{ margin-top:8px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:#5b83ab; }

/* zones (created by JS): matched = action blue, unmatched = micro orange */
svg circle.zone{ fill:rgba(0,145,255,.10); stroke:var(--action); stroke-width:2.6; cursor:pointer; pointer-events:auto; transition:fill .15s; }
svg circle.zone:hover{ fill:rgba(0,145,255,.22); }
svg circle.zone.unmatched{ fill:rgba(252,124,39,.12); stroke:#FC7C27; }
svg circle.zone.unmatched:hover{ fill:rgba(252,124,39,.24); }
svg circle.handle{ fill:var(--action); stroke:#08213f; stroke-width:1; cursor:ew-resize; pointer-events:auto; }
svg circle.handle.unmatched-handle{ fill:#FC7C27; }
svg text.lbl{ font:700 15px var(--font-mono); letter-spacing:.5px; fill:#bfe4ff; stroke:#08213f; stroke-width:3.6px; paint-order:stroke; }
svg text.lbl.unmatched{ fill:#ffd9bf; stroke:#3a1a08; }
.zone-group{ transform-box:fill-box; transform-origin:center; }

/* Disc code picker (click a zone to reassign its antibiotic) */
.disc-picker{ position:absolute; transform:translate(-50%,-50%); z-index:6; max-width:220px;
    font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--ink);
    padding:5px 8px; border-radius:var(--radius); border:1px solid var(--action); background:#fff;
    box-shadow:0 8px 16px rgba(0,0,0,.2); cursor:pointer; outline:none; }
.disc-picker:focus{ border-width:2px; }

.plate-legend{ display:flex; gap:16px; flex-wrap:wrap; padding:12px 4px 2px; font-size:12px; color:var(--muted); }
.plate-legend .lg{ display:flex; align-items:center; gap:6px; }
.lg .k{ width:11px; height:11px; border-radius:50%; }
.lg .k.m{ background:var(--action); }
.lg .k.n{ background:#FC7C27; }
.plate-legend .count{ margin-left:auto; font-family:var(--font-mono); }

/* ===== Right: info cards ===== */
.col-right{ display:flex; flex-direction:column; gap:13px; }
.card{ background:var(--panel); border:1px solid var(--border-panel); border-radius:var(--radius); padding:.75rem 1rem; }
.card.tinted{ background:var(--panel); }
.card-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--steel); margin:0 0 9px; }

/* Scan row: input + Lookup button (flat, micro .alpha-control + .btn-blue) */
.scan-row{ display:flex; align-items:stretch; gap:10px; }
.scan-input{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:var(--input-bg);
    border:1px solid var(--input-border); border-radius:var(--radius); padding:6px 10px; }
.scan-input:focus-within{ border:2px solid var(--action); padding:5px 9px; }
.scan-icon{ width:28px; height:28px; flex:none; border-radius:var(--radius); background:#fff; border:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:center; color:var(--action); }
.scan-icon svg{ width:16px; height:16px; }
#plate{ flex:1; min-width:0; border:none; outline:none; background:transparent;
    font-family:var(--font-mono); font-size:18px; font-weight:700; letter-spacing:1px; color:var(--ink); padding:2px 0; }
#plate::placeholder{ color:#9db8d4; font-weight:400; letter-spacing:.5px; }
.lookup-btn{ flex:none; display:inline-flex; align-items:center; gap:7px; padding:0 18px; height:auto;
    background:var(--action); color:#fff; border:1px solid var(--action); border-radius:5px;
    font-family:var(--font-text); font-size:14px; font-weight:600; cursor:pointer; transition:background .12s, color .12s; }
.lookup-btn svg{ width:17px; height:17px; }
.lookup-btn:hover{ background:#fff; color:var(--action); }
.scan-hint{ margin:8px 2px 0; font-size:11.5px; color:var(--muted); min-height:15px; }

/* Meta line — values only, joined with "|" */
.meta-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; line-height:1.7; }
.meta-line .val{ font-size:13px; color:var(--ink); }
.meta-line .val.mono{ font-family:var(--font-mono); font-size:12.5px; color:#343a40; }
.meta-line .val.dim{ color:#adb5bd; }
.meta-line .val.strong{ font-weight:700; color:var(--brand); }
.meta-line .sep{ color:#ced4da; font-weight:400; }

/* ===== Antibiotic table (steel header, striped rows — micro data-table look) ===== */
.abx-table{ width:100%; border-collapse:separate; border-spacing:0; }
.abx-table thead th{ background:#fff; color:var(--ink); font-size:11px; font-weight:700; text-align:left; padding:6px 8px; white-space:nowrap; border-bottom:2px solid var(--border-soft); }
.abx-table thead th.wrap{ white-space:normal; line-height:1.25; }
.abx-table th.num, .abx-table td.num, .abx-table td.center{ text-align:center; }
.abx-table td{ padding:6px 8px; border-bottom:1px solid var(--border-soft); font-size:13px; }
.abx-table tbody tr:nth-child(even) td{ background:var(--row-alt); }
.abx-table tbody tr:hover td{ background:#eaf4ff; }
.abx-table .code-cell{ font-family:var(--font-mono); font-weight:700; font-size:12.5px; color:#343a40; }
.abx-table .abx-name{ font-weight:600; }
.abx-table .num{ font-family:var(--font-mono); color:#495057; font-size:13px; }
.abx-table .meas{ font-family:var(--font-mono); font-weight:700; }
.meas-input{ width:54px; text-align:center; font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--ink);
    border:1px solid var(--input-border); border-radius:var(--radius); padding:3px 4px; background:var(--input-bg); }
.meas-input::placeholder{ color:#a9b3bd; font-weight:400; }
.meas-input:focus{ outline:none; border:2px solid var(--action); padding:2px 3px; }

/* Conclusion — full word, flat badge */
.pill{ display:inline-block; padding:3px 10px; border-radius:3px; font-size:11.5px; font-weight:700; font-family:var(--font-text); white-space:nowrap; }
.pill.S{ background:var(--sus-bg); color:var(--sus); }
.pill.R{ background:var(--res-bg); color:var(--res); }
.pill.I{ background:var(--int-bg); color:var(--int); }
.pill.U{ background:var(--unk-bg); color:#868e96; }
.rep{ display:flex; justify-content:center; }
.rep .dot{ width:9px; height:9px; border-radius:50%; }
.rep .dot.yes{ background:var(--action); }
.rep .dot.no{ background:#ced4da; }
.rep .dot.na{ background:transparent; box-shadow:inset 0 0 0 1px #ced4da; }

/* Panel block: one sensitivity table (per isolate/panel), each with its own Save/Cancel */
.panel-block{ padding:10px 0 4px; border-top:1px solid var(--border-soft); margin-top:10px; }
.panel-block:first-child{ border-top:none; margin-top:0; padding-top:0; }
.panel-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:2px 2px 8px; }
.panel-title .pt-name{ font-size:13px; font-weight:700; color:var(--navy); }
.panel-title .pt-count{ font-size:11px; color:var(--muted); font-family:var(--font-mono); white-space:nowrap; }

.panel-actions{ display:flex; align-items:center; gap:10px; padding:10px 2px 2px; margin-top:2px; }
.panel-actions .grow{ flex:1; }
.btn-cancel{ background:#fff; color:var(--muted); border:1px solid var(--border-soft); border-radius:5px; padding:7px 15px; font-family:var(--font-text); font-weight:600; font-size:13px; cursor:pointer; }
.btn-cancel:hover{ background:#f1f3f5; }
.btn-save{ display:inline-flex; align-items:center; gap:7px; background:var(--action); color:#fff; border:1px solid var(--action);
    border-radius:5px; padding:7px 18px; font-family:var(--font-text); font-weight:600; font-size:13px; cursor:pointer; transition:background .12s, color .12s; }
.btn-save:hover{ background:#fff; color:var(--action); }
.btn-save:disabled{ opacity:.6; cursor:default; }

/* Reportable Yes/No segmented toggle (micro btn-group-toggle: active = solid blue, other = blue outline) */
.rep-toggle{ display:inline-flex; }
.rep-toggle .rep-btn{ font-family:var(--font-text); font-size:12px; font-weight:600; padding:4px 12px; cursor:pointer;
    background:#fff; color:var(--action); border:1px solid var(--action); }
.rep-toggle .rep-btn:first-child{ border-radius:5px 0 0 5px; }
.rep-toggle .rep-btn:last-child{ border-radius:0 5px 5px 0; border-left:none; }
.rep-toggle .rep-btn.on{ background:var(--action); color:#fff; }
.rep-toggle .rep-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(0,145,255,.25); }

/* Requisition number — highlighted, links into the Microbiology app */
.meta-line .req-link, .meta-line .req-strong{ font-weight:700; color:var(--brand); }
.req-link{ text-decoration:none; cursor:pointer; }
.req-link:hover{ text-decoration:underline; }
/* Media badge as a Microbiology link (keeps the badge's own colour) */
.plate-head .meta .tag-link{ color:inherit; text-decoration:none; cursor:pointer; }
.plate-head .meta:hover .tag-link{ text-decoration:underline; }

/* Toast notifications (top-right) — flat */
.toast-wrap{ position:fixed; top:92px; right:18px; z-index:1000; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{ min-width:220px; max-width:340px; padding:11px 15px; border-radius:var(--radius); font-size:13px; font-weight:600; color:#fff;
    background:#343a40; box-shadow:0 8px 16px rgba(0,0,0,.2); opacity:0; transform:translateX(24px);
    transition:opacity .25s ease, transform .25s ease; }
.toast.show{ opacity:1; transform:none; }
.toast.success{ background:var(--sus); }
.toast.error{ background:var(--res); }
.toast.info{ background:var(--action); }

/* ===== Login page ===== */
.login-wrap{ display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 80px - 120px); padding:40px 20px; }
.login-card{ width:100%; max-width:400px; background:var(--panel); border:1px solid var(--border-panel); border-radius:var(--radius); padding:26px 24px 22px; }
.login-card h2{ margin:0 0 4px; font-size:22px; font-weight:600; color:var(--ink); }
.login-hint{ margin:0 0 18px; font-size:12.5px; color:var(--muted); }
.login-error{ background:var(--res-bg); color:var(--res); border:1px solid rgba(200,35,51,.25); border-radius:var(--radius); padding:9px 12px; font-size:12.5px; font-weight:600; margin-bottom:14px; }
.login-field{ display:block; margin-bottom:14px; }
.login-label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px; }
.login-field input{ width:100%; background:var(--input-bg); border:1px solid var(--input-border); border-radius:var(--radius);
    padding:11px 13px; font-family:var(--font-text); font-size:15px; color:var(--ink); }
.login-field input:focus{ outline:none; border:2px solid var(--action); padding:10px 12px; }
.login-btn{ width:100%; margin-top:6px; background:var(--action); color:#fff; border:1px solid var(--action);
    border-radius:5px; padding:12px; font-family:var(--font-text); font-size:15px; font-weight:600; cursor:pointer; transition:background .12s, color .12s; }
.login-btn:hover{ background:#fff; color:var(--action); }
.login-foot{ text-align:center; margin:16px 0 0; font-size:11px; color:var(--muted); }

/* ===== Responsive ===== */
@media (max-width:940px){
    .grid{ grid-template-columns:1fr; }
    .body-content{ padding:16px 14px; }
    #plate{ font-size:16px; }
    .brand .sub{ display:none; }
}