/* Base palette, layout and data vocabulary lifted from qa/portal_template.html so
   the portal looks the same after the move off the generated static page. */
:root {
  --bg:#0f1418; --panel:#161d23; --panel-2:#1c252d; --line:#26323c;
  --ink:#e6edf3; --ink-dim:#8fa3b3; --ink-faint:#63788a;
  --pass:#3fb950; --fail:#f85149; --blocked:#d29922; --notrun:#4b5b68; --na:#6e7f8d;
  --accent:#3b9dff; --crit:#f85149; --major:#ff8c42; --minor:#d29922; --cosmetic:#58a6ff;
  --radius:10px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f4f6f8; --panel:#ffffff; --panel-2:#f0f3f6; --line:#dde3ea;
    --ink:#16222c; --ink-dim:#5a6b7a; --ink-faint:#8496a5;
    --pass:#1a7f37; --fail:#cf222e; --blocked:#9a6700; --notrun:#98a5b0; --na:#8c9aa5;
    --accent:#0969da;
  }
}
:root[data-theme="light"] {
  --bg:#f4f6f8; --panel:#ffffff; --panel-2:#f0f3f6; --line:#dde3ea;
  --ink:#16222c; --ink-dim:#5a6b7a; --ink-faint:#8496a5;
  --pass:#1a7f37; --fail:#cf222e; --blocked:#9a6700; --notrun:#98a5b0; --na:#8c9aa5;
  --accent:#0969da;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }
header { padding:20px 24px 0; display:flex; align-items:flex-start; gap:16px; }
header .who { margin-left:auto; text-align:right; font-size:12px; color:var(--ink-dim); }
h1 { margin:0 0 2px; font-size:20px; letter-spacing:-.01em; }
.sub { color:var(--ink-dim); font-size:13px; }
nav { display:flex; gap:2px; padding:16px 24px 0; border-bottom:1px solid var(--line);
  flex-wrap:wrap; position:sticky; top:0; background:var(--bg); z-index:5; }
nav button { background:none; border:0; border-bottom:2px solid transparent; color:var(--ink-dim);
  padding:9px 14px; font:inherit; font-weight:500; cursor:pointer; border-radius:6px 6px 0 0; }
nav button:hover { color:var(--ink); background:var(--panel-2); }
nav button.on { color:var(--ink); border-bottom-color:var(--accent); }
main { padding:20px 24px 60px; max-width:1500px; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.card .n { font-size:26px; font-weight:650; letter-spacing:-.02em; }
.card .l { color:var(--ink-dim); font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.card.pass .n{color:var(--pass)} .card.fail .n{color:var(--fail)}
.card.blocked .n{color:var(--blocked)} .card.notrun .n{color:var(--notrun)}

.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:18px; }
.panel h2 { margin:0 0 14px; font-size:14px; font-weight:600; letter-spacing:.01em; }
.panel h2 span { color:var(--ink-faint); font-weight:400; margin-left:6px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:18px; }

.bar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--panel-2); }
.bar i { display:block; height:100%; }
.rowline { display:grid; grid-template-columns:190px 1fr 120px; gap:12px; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--line); }
.rowline:last-child { border-bottom:0; }
.rowline .nm { color:var(--ink-dim); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowline .ct { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-faint); font-size:12px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; color:var(--ink-dim); font-size:12px; margin-top:12px; }
.legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:middle; }

.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
select, input[type=search], input[type=text], input[type=password], input[type=url], input[type=date], textarea {
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:7px 9px; font:inherit; }
input[type=search] { min-width:240px; }
textarea { width:100%; resize:vertical; min-height:72px; }
.count { color:var(--ink-faint); font-size:12px; margin-left:auto; }

table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); padding:8px 10px; border-bottom:1px solid var(--line); position:sticky; top:47px;
  background:var(--bg); }
td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
tr.case { cursor:pointer; }
tr.case:hover td { background:var(--panel-2); }
.id { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; white-space:nowrap; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600;
  white-space:nowrap; }
.s-Pass{background:color-mix(in srgb,var(--pass) 18%,transparent);color:var(--pass)}
.s-Fail{background:color-mix(in srgb,var(--fail) 18%,transparent);color:var(--fail)}
.s-Blocked{background:color-mix(in srgb,var(--blocked) 18%,transparent);color:var(--blocked)}
.s-NotRun{background:color-mix(in srgb,var(--notrun) 22%,transparent);color:var(--ink-dim)}
.s-NA{background:color-mix(in srgb,var(--na) 20%,transparent);color:var(--ink-dim)}
.tag { font-size:11px; color:var(--ink-dim); background:var(--panel-2); border:1px solid var(--line);
  padding:1px 7px; border-radius:5px; white-space:nowrap; }
.dl { display:grid; grid-template-columns:130px 1fr; gap:6px 14px; font-size:13px; }
.dl dt { color:var(--ink-faint); font-size:12px; }
.dl dd { margin:0; white-space:pre-wrap; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 10px;
  max-height:220px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.shots { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.shots img { max-width:280px; border:1px solid var(--line); border-radius:8px; cursor:zoom-in; }

.defect { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:14px 16px; margin-bottom:12px; border-left:3px solid var(--line); cursor:pointer; }
.defect:hover { background:var(--panel-2); }
.defect.Critical{border-left-color:var(--crit)} .defect.Major{border-left-color:var(--major)}
.defect.Minor{border-left-color:var(--minor)} .defect.Cosmetic{border-left-color:var(--cosmetic)}
.defect h3 { margin:0 0 4px; font-size:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sev { padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.sev.Critical{background:color-mix(in srgb,var(--crit) 20%,transparent);color:var(--crit)}
.sev.Major{background:color-mix(in srgb,var(--major) 20%,transparent);color:var(--major)}
.sev.Minor{background:color-mix(in srgb,var(--minor) 20%,transparent);color:var(--minor)}
.sev.Cosmetic{background:color-mix(in srgb,var(--cosmetic) 20%,transparent);color:var(--cosmetic)}

.cov { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  padding:5px 0; border-bottom:1px solid var(--line); font-size:13px; }
.cov:last-child{border-bottom:0}
.cov .r { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.yes{color:var(--pass)} .no{color:var(--fail)}
.muted { color:var(--ink-dim); }
.faint { color:var(--ink-faint); }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center;
  justify-content:center; z-index:50; padding:24px; }
.lightbox.on { display:flex; }
.lightbox img { max-width:100%; max-height:100%; border-radius:8px; }
.empty { color:var(--ink-faint); padding:24px; text-align:center; }

/* ---------------------------------------------------- application chrome */

.btn { background:var(--panel-2); color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:7px 13px; font:inherit; font-weight:500; cursor:pointer; }
.btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover:not(:disabled) { filter:brightness(1.1); color:#fff; }
.btn.danger { color:var(--fail); border-color:color-mix(in srgb,var(--fail) 40%,var(--line)); }
.btn.danger:hover:not(:disabled) { background:color-mix(in srgb,var(--fail) 12%,transparent); color:var(--fail); }
.btn.sm { padding:4px 9px; font-size:12px; }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.field { margin-bottom:12px; }
.field label { display:block; font-size:12px; color:var(--ink-dim); margin-bottom:4px; }
.field input, .field select, .field textarea { width:100%; }
.field .hint { font-size:11px; color:var(--ink-faint); margin-top:3px; }
.field.inline { display:flex; align-items:center; gap:8px; }
.field.inline input[type=checkbox] { width:auto; margin:0; }
.field.inline label { margin:0; }
.grid-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 14px; }

/* Modal */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-start;
  justify-content:center; z-index:60; padding:40px 20px; overflow:auto; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  width:100%; max-width:620px; box-shadow:0 18px 50px rgba(0,0,0,.4); }
.modal.wide { max-width:900px; }
.modal-h { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.modal-h h3 { margin:0; font-size:15px; }
.modal-h .x { margin-left:auto; background:none; border:0; color:var(--ink-dim); font-size:20px;
  cursor:pointer; line-height:1; padding:0 4px; }
.modal-b { padding:16px 18px; }
.modal-f { padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }

/* Right-side detail drawer */
.drawer-bg { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(760px,94vw); background:var(--panel);
  border-left:1px solid var(--line); z-index:56; display:flex; flex-direction:column;
  box-shadow:-12px 0 40px rgba(0,0,0,.35); }
.drawer-h { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center;
  flex-wrap:wrap; }
.drawer-h h3 { margin:0; font-size:15px; }
.drawer-h .x { margin-left:auto; background:none; border:0; color:var(--ink-dim); font-size:22px;
  cursor:pointer; line-height:1; }
.drawer-b { padding:16px 18px; overflow:auto; flex:1; }
.drawer-b h4 { margin:18px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); }
.drawer-b h4:first-child { margin-top:0; }

/* Toasts */
#toasts { position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:8px; padding:10px 14px; max-width:380px; box-shadow:0 8px 24px rgba(0,0,0,.3);
  font-size:13px; animation:slidein .18s ease-out; }
.toast.error { border-left-color:var(--fail); }
.toast.ok { border-left-color:var(--pass); }
@keyframes slidein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.pager { display:flex; gap:8px; align-items:center; justify-content:center; padding:14px 0;
  color:var(--ink-dim); font-size:13px; }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--line);
  border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading { padding:30px; text-align:center; color:var(--ink-faint); }

/* Bulk-action bar */
.bulkbar { position:sticky; bottom:0; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 14px; display:flex; gap:10px; align-items:center;
  flex-wrap:wrap; margin-top:12px; box-shadow:0 -6px 20px rgba(0,0,0,.2); }
td.chk, th.chk { width:34px; padding-right:0; }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-box { width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; }
.login-box h1 { font-size:18px; margin-bottom:4px; }
.login-box .sub { margin-bottom:20px; }
.login-err { background:color-mix(in srgb,var(--fail) 14%,transparent); border:1px solid
  color-mix(in srgb,var(--fail) 40%,transparent); color:var(--fail); border-radius:7px;
  padding:9px 12px; font-size:13px; margin-bottom:14px; }

.banner { background:color-mix(in srgb,var(--blocked) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--blocked) 35%,transparent); color:var(--blocked);
  border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:13px; }
.banner.info { background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent); color:var(--accent); }
.banner.bad { background:color-mix(in srgb,var(--fail) 12%,transparent);
  border-color:color-mix(in srgb,var(--fail) 35%,transparent); color:var(--fail); }