admin / Synapse-NetscanXi

/* Dark theme (default) - professional blue (v12) */
:root, :root[data-theme="dark"] {
  --bg:#0a1422; --panel:#132238; --panel-2:#0e1a2b; --border:#22364f;
  --text:#e8eef6; --muted:#8aa0bd; --accent:#2f81f7; --accent-h:#4d97ff;
  --danger:#f85149; --warn:#d29922; --info:#58a6ff; --crit:#ff5c8a;
  --ok:#3fb950; --ok-h:#4ad15c;   /* semantic success (pass / clean) */
  --deep:#091322;      /* inputs, code blocks, progress track */
  --hover:#15263c;     /* row hover */
  --track:#243750;     /* empty bar / risk-bar background */
}
/* Light theme - professional blue (v12) */
:root[data-theme="light"] {
  --bg:#f3f6fb; --panel:#ffffff; --panel-2:#eaf1fa; --border:#cdd9e8;
  --text:#102234; --muted:#54657a; --accent:#1565c0; --accent-h:#0d47a1;
  --danger:#d12d24; --warn:#9a6700; --info:#0a66c2; --crit:#c11574;
  --ok:#1f9d3a; --ok-h:#178030;
  --deep:#eef3fa; --hover:#e6eef9; --track:#cdd9e8;
}
html, body { transition:background .2s ease, color .2s ease; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); padding:20px; }
a { color:var(--info); }
h1 { font-size:22px; margin:0 0 2px; }
.sub { color:var(--muted); font-size:13px; margin-bottom:16px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; }
.topbar .right { font-size:12px; color:var(--muted); text-align:right; }
.theme-toggle { background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; margin-bottom:6px; }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }
/* v8: text banner replacing the logo image */
.app-banner { display:flex; flex-direction:column; gap:2px; padding:14px 18px; margin-bottom:14px;
  background:linear-gradient(90deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-left:5px solid var(--accent); border-radius:12px; }
.app-banner-title { display:flex; align-items:center; gap:12px; }
.app-banner .app-name { font-size:30px; font-weight:800; letter-spacing:.5px;
  color:var(--text); line-height:1; }
.app-banner .app-name::first-letter { color:var(--accent); }
.app-banner .sub { margin:0; }
.version-badge { display:inline-block; padding:3px 12px;
  font-size:13px; font-weight:700; letter-spacing:.5px; color:#fff;
  background:var(--accent); border-radius:999px; vertical-align:middle; }
.brand .sched-note { font-size:12px; color:var(--muted); margin-top:4px; }
.tenant-tag { display:inline-block; margin-left:8px; padding:1px 9px; font-size:11px;
  font-weight:600; border-radius:999px; background:#58a6ff22; color:var(--info);
  border:1px solid #58a6ff55; }
/* v8: toolbar of action buttons (Schedule / Security / User Admin / Activity / Logout) */
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.toolbar button { font-size:13px; padding:8px 12px; }
.toolbar button.danger { color:#fff; }
.toolbar button.danger:hover { background:var(--danger); filter:brightness(1.1); }
/* v8: current-IP indicator + per-host export actions */
.scan-current-ip { color:var(--accent); font-weight:600; }
.host-actions { float:right; display:inline-flex; align-items:center; gap:10px; }
.host-export { font-size:11px; color:var(--muted); }
button.ghost.mini { padding:3px 8px; font-size:11px; }
.tenant-input { background:var(--deep); border:1px solid var(--border); color:var(--text);
  border-radius:6px; font-size:12px; }
/* v8-r2: editable username field in the User Admin rows */
.uname-input { flex:1; min-width:120px; background:var(--deep); border:1px solid var(--border);
  color:var(--text); border-radius:6px; font-size:13px; font-weight:600;
  font-family:ui-monospace,monospace; padding:5px 8px; }
.uname-input:focus { border-color:var(--accent); outline:none; }
#activityTable td { font-size:12px; }
#activityTable tr.act-fail td { background:#f8514912; }
#activityTable tr.act-auth td { background:#58a6ff10; }

.controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:14px; }
input[type=text], select { background:var(--deep); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:8px; font-size:14px; }
input#target { flex:1 1 220px; min-width:180px; font-family:ui-monospace,Menlo,monospace; }
.passive-dur { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.passive-dur input[type=number]{ width:56px; background:var(--deep); border:1px solid var(--border);
  color:var(--text); padding:8px 8px; border-radius:8px; font-size:14px; }
button { background:var(--accent); color:#fff; border:none; padding:10px 16px; border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer; }
button:hover:not(:disabled){ background:var(--accent-h); }
button:disabled{ opacity:.5; cursor:not-allowed; }
button.ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
button.ghost:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
button.danger { background:var(--danger); color:#2a0707; }

.status { font-size:13px; color:var(--muted); margin-bottom:8px; min-height:18px; }
.status.err{ color:var(--danger); } .status.run{ color:var(--accent); }
.progress-wrap{ margin-bottom:16px; display:none; } .progress-wrap.show{ display:block; }
.progress-track{ width:100%; height:18px; background:var(--deep); border:1px solid var(--border);
  border-radius:9px; overflow:hidden; position:relative; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--info));
  transition:width .4s ease; }
.progress-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; text-shadow:0 1px 2px #000a; }
.progress-phase{ font-size:12px; color:var(--muted); margin-top:4px; }
.progress-meta{ display:flex; gap:18px; font-size:12px; color:var(--muted); margin-bottom:6px; }
.progress-meta span{ font-variant-numeric:tabular-nums; }

/* Scan options (v3) */
.scan-options{ display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:10px 14px; margin-bottom:14px; font-size:13px; }
.scan-options .so-label{ color:var(--muted); font-weight:600; }
.scan-options label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.scan-options input{ accent-color:var(--accent); width:15px; height:15px; }

/* Cards / dashboard */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px; }
.card .n { font-size:26px; font-weight:700; } .card .l { color:var(--muted); font-size:12px; }
.card.alert .n{ color:var(--danger); } .card.kev .n{ color:var(--crit); } .card.warn .n{ color:var(--warn); }
.card.docker .n{ color:#2496ed; }

.grid2 { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:900px){ .grid2{ grid-template-columns:1fr; } }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px; }
.panel h2 { font-size:15px; margin:0 0 10px; display:flex; justify-content:space-between; align-items:center; }
.panel h2 .count { color:var(--muted); font-size:12px; font-weight:400; }

/* Top vulns list */
.vrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.vrow:last-child{ border-bottom:none; }
.vrow .score { width:46px; text-align:center; font-weight:700; border-radius:6px; padding:3px 0; font-size:12px; }
.score.high{ background:#f8514922; color:var(--danger); } .score.med{ background:#d2992222; color:var(--warn); }
.score.low{ background:#3fb95022; color:var(--ok); } .score.na{ background:var(--track); color:var(--muted); }
.vrow{ flex-wrap:wrap; }
.vrow .vid{ font-family:ui-monospace,monospace; font-weight:600; }
a.vid{ color:var(--info); text-decoration:none; } a.vid:hover{ text-decoration:underline; }
.vrow .meta{ color:var(--muted); font-size:11px; }
.vrow .vdesc{ width:100%; color:var(--text); font-size:11.5px; line-height:1.4; margin-top:3px; }
.vrow .vmit{ width:100%; margin-top:4px; padding:4px 8px; font-size:11px; line-height:1.4;
  background:#58a6ff12; border:1px solid #58a6ff33; border-radius:6px; }
.vrow .vmit .mit-label{ color:var(--accent); font-weight:600; }
.tag{ display:inline-block; border-radius:10px; padding:0 7px; font-size:10px; font-weight:700; margin-left:4px; }
.tag.kev{ background:#ff5c8a22; color:var(--crit); border:1px solid #ff5c8a55; }
.tag.exp{ background:#d2992222; color:var(--warn); border:1px solid #d2992255; }

/* Changes list */
/* Recent Changes + Top Vulns lists: cap height so they scroll instead of
   elongating the whole page. */
#changes { max-height:150px; overflow-y:auto; padding-right:4px; }
#topVulns { max-height:280px; overflow-y:auto; padding-right:4px; }
#changes::-webkit-scrollbar, #topVulns::-webkit-scrollbar { width:8px; }
#changes::-webkit-scrollbar-thumb, #topVulns::-webkit-scrollbar-thumb {
  background:var(--border); border-radius:4px; }
.chg { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
.chg:last-child{ border-bottom:none; }
.chg .dot{ flex:0 0 auto; }
.chg.critical .dot{ color:var(--crit); } .chg.warn .dot{ color:var(--warn); } .chg.info .dot{ color:var(--info); }
.chg .ip{ font-family:ui-monospace,monospace; color:var(--muted); }

/* Table */
.tablewrap { background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.tabletop { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; gap:10px; flex-wrap:wrap; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { background:var(--panel-2); cursor:pointer; user-select:none; white-space:nowrap; position:sticky; top:0; }
th:hover{ color:var(--accent); }
tr.host-row{ cursor:pointer; } tr.host-row:hover td{ background:var(--hover); }
code{ font-family:ui-monospace,Menlo,monospace; }
.muted{ color:var(--muted); }
.chip{ display:inline-block; background:#1f6feb22; border:1px solid #1f6feb55; color:#79c0ff;
  border-radius:5px; padding:1px 7px; margin:2px 3px 2px 0; font-size:12px; font-family:ui-monospace,monospace; }
.chip.soft{ background:#58a6ff22; border-color:#58a6ff55; color:#79c0ff; }
.badge{ display:inline-block; border-radius:10px; padding:1px 9px; font-size:12px; font-weight:600; }
.badge.ok{ background:#3fb95022; color:var(--ok); border:1px solid #3fb95055; }
.badge.docker{ background:#2496ed22; color:#2496ed; border:1px solid #2496ed66; }
.docker-item{ border-left:3px solid #2496ed; }
.docker-warn{ color:var(--danger); margin-top:4px; font-weight:600; }
.docker-ind{ margin:4px 0 0 18px; padding:0; color:var(--muted); font-size:12px; }
.docker-ind li{ margin:2px 0; }
/* v10r1: deep docker detail */
.docker-substat{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.muted-badge{ background:var(--border); color:var(--muted); border:1px solid var(--border); }
.badge.muted-badge{ background:var(--border); color:var(--muted); }
.docker-cont{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.docker-cont .sub,.docker-img .img-cves{ width:100%; }
.gdot{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex:0 0 auto; display:inline-block; }
.gdot.on{ background:var(--accent); }
.st{ font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.3px; }
.st.pass{ background:#1f9d3a22; color:#3fb950; } .st.warn{ background:#9a670022; color:#d29922; }
.st.fail{ background:#d12d2422; color:var(--danger); }
.sev-strip{ display:flex; gap:6px; margin:6px 0 4px; flex-wrap:wrap; }
.sev-pill{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:12px; }
.sev-pill.critical{ background:#d12d2422; color:#f85149; } .sev-pill.high{ background:#bb510022; color:#fb8500; }
.sev-pill.medium{ background:#9a670022; color:#d29922; } .sev-pill.low{ background:#1f6feb22; color:#58a6ff; }
.sev-pill.zero{ opacity:.45; }
.img-cves{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.cve-chip{ font-size:11px; font-family:ui-monospace,monospace; padding:1px 7px; border-radius:5px;
  border:1px solid var(--border); }
.cve-chip.high{ border-color:#f8514966; color:#f85149; } .cve-chip.med{ border-color:#d2992266; color:#d29922; }
.cve-chip.low{ border-color:#58a6ff66; color:#58a6ff; } .cve-chip.na{ color:var(--muted); }
.cis-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.cis-ref{ margin-left:auto; font-size:10px; color:var(--muted); }
.docker-img{ border-left:3px solid #2496ed44; }
.badge.vuln{ background:#f8514922; color:var(--danger); border:1px solid #f8514955; }
.risk-bar{ display:inline-block; width:54px; height:8px; background:var(--track); border-radius:4px; overflow:hidden; vertical-align:middle; }
.risk-bar > i{ display:block; height:100%; }
.risk-num{ font-weight:600; margin-left:6px; }
.caret{ display:inline-block; width:12px; color:var(--muted); transition:transform .15s; }
tr.expanded .caret{ transform:rotate(90deg); color:var(--accent); }
tr.detail-row > td{ background:var(--panel-2); padding:0; }
.detail{ padding:16px 20px; border-left:3px solid var(--accent); }
.detail h3{ margin:0 0 10px; font-size:14px; } .detail h4{ margin:14px 0 6px; font-size:13px; color:var(--info); }
.kv{ display:grid; grid-template-columns:150px 1fr; gap:4px 12px; font-size:13px; }
.kv .k{ color:var(--muted); }
.item{ background:var(--deep); border:1px solid var(--border); border-radius:6px; padding:8px 10px; margin:6px 0; font-size:12px; }
.item.vuln{ border-left:3px solid var(--danger); }
.cve-line{ margin-top:4px; font-family:ui-monospace,monospace; font-size:12px; }
.cve-line a{ color:var(--info); text-decoration:none; } .cve-line a:hover{ text-decoration:underline; }
.mitigation{ margin-top:6px; padding:6px 8px; background:#58a6ff12; border:1px solid #58a6ff33;
  border-radius:6px; font-size:12px; color:var(--text); line-height:1.45; }
.mitigation .mit-label{ color:var(--accent); font-weight:600; }
.item .vid{ font-weight:600; font-family:ui-monospace,monospace; }
.item .sname{ font-weight:600; color:#79c0ff; font-family:ui-monospace,monospace; }
.cvss{ float:right; font-weight:600; } .cvss.high{ color:var(--danger);} .cvss.med{ color:var(--warn);} .cvss.low{ color:var(--accent);}
.cpe{ color:var(--muted); font-family:ui-monospace,monospace; font-size:11px; }
pre.script{ background:var(--deep); border:1px solid var(--border); border-radius:6px; padding:8px 10px; margin:6px 0;
  font-size:11px; overflow-x:auto; white-space:pre-wrap; color:var(--muted); max-height:220px; }
.spinner{ display:inline-block; width:13px; height:13px; margin-right:6px; border:2px solid var(--muted);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.tabs{ display:flex; gap:4px; margin-bottom:14px; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.tab{ padding:9px 16px; border-radius:8px 8px 0 0; cursor:pointer; font-size:13px; font-weight:600;
      border:1px solid transparent; border-bottom:none; color:var(--muted); margin-bottom:-1px;
      transition:background .15s ease, color .15s ease; }
.tab:hover{ color:var(--text); background:var(--panel-2); }
.tab.active{ background:var(--panel); color:var(--accent); border-color:var(--border); border-bottom:2px solid var(--accent); }
.tab .tab-badge{ display:inline-block; margin-left:7px; min-width:18px; padding:0 6px; font-size:11px;
      line-height:18px; text-align:center; border-radius:9px; background:var(--accent); color:#fff; font-weight:700; }
.tab.tab-soon{ color:var(--muted); font-style:italic; opacity:.85; }
.tab.tab-soon::after{ content:"soon"; margin-left:7px; font-size:10px; font-style:normal; font-weight:700;
      letter-spacing:.5px; padding:1px 6px; border-radius:9px; background:var(--track); color:var(--muted); }
/* Reserved growth area for upcoming feature views */
.feature-reserve{ border:1px dashed var(--border); border-radius:10px; padding:26px 18px; text-align:center;
      color:var(--muted); background:var(--panel-2); }
.feature-reserve h3{ margin:0 0 6px; color:var(--text); font-size:15px; }
.feature-reserve .roadmap{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.feature-reserve .roadmap span{ padding:5px 12px; border:1px solid var(--border); border-radius:999px;
      font-size:12px; background:var(--panel); color:var(--muted); }
.report-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }

/* v12: asset-group chips + per-asset assignment */
.chip.grp{ background:#a371f722; border-color:#a371f755; color:#c9aaff; }
.grp-edit{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:12px; padding:0 3px; }
.grp-edit:hover{ color:var(--accent); }
.grp-cell{ white-space:normal; }
.ag-list{ display:flex; flex-direction:column; gap:6px; max-height:50vh; overflow:auto; }
.ag-item{ display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 8px;
  border:1px solid var(--border); border-radius:6px; background:var(--panel-2); cursor:pointer; }
.ag-item:hover{ border-color:var(--accent); }

/* v12: remediation tracking */
.rem-form{ flex-wrap:wrap; }
#remediationTable .rem-status, #remediationTable .rem-prio{ font-size:12px; padding:4px 6px;
  background:var(--deep); border:1px solid var(--border); border-radius:6px; color:var(--text); }
.rem-status.st-open{ color:var(--info); } .rem-status.st-in_progress{ color:var(--warn); }
.rem-status.st-blocked{ color:var(--danger); } .rem-status.st-resolved{ color:var(--ok); }
.rem-prio.pr-low{ color:var(--muted); } .rem-prio.pr-medium{ color:var(--info); }
.rem-prio.pr-high{ color:var(--warn); } .rem-prio.pr-critical{ color:var(--danger); }
.badge.rem-open{ background:#58a6ff22; color:var(--info); } .badge.rem-in_progress{ background:#d2992222; color:var(--warn); }
.badge.rem-blocked{ background:#f8514922; color:var(--danger); } .badge.rem-resolved{ background:#3fb95022; color:var(--ok); }
.pr-low{ color:var(--muted); } .pr-medium{ color:var(--info); } .pr-high{ color:var(--warn); } .pr-critical{ color:var(--danger); }
.history-row{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; cursor:pointer; }
.history-row:hover{ background:var(--hover); }

/* ---- v4: auth / users ---- */
.whoami { color:var(--text); }
.role-tag { display:inline-block; border-radius:10px; padding:0 7px; font-size:10px; font-weight:700;
  text-transform:uppercase; margin-left:2px; }
.role-admin { background:#f8514922; color:var(--danger); border:1px solid #f8514955; }
.role-operator { background:#d2992222; color:var(--warn); border:1px solid #d2992255; }
.role-viewer { background:#58a6ff22; color:var(--info); border:1px solid #58a6ff55; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex;
  align-items:center; justify-content:center; z-index:50; }
.modal-box { background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:20px 22px; width:min(560px,92vw); max-height:86vh; overflow-y:auto; }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.users-list { margin-bottom:14px; }
.user-row { display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--border); font-size:13px; flex-wrap:wrap; }
.user-row .u-name { flex:1; font-weight:600; font-family:ui-monospace,monospace; }
.user-row select { padding:4px 8px; }
.user-row .danger-x { color:var(--danger); border-color:#f8514955; padding:2px 9px; }
.adduser { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.adduser input, .adduser select { padding:8px 10px; }
.adduser button { background:var(--accent); color:#fff; border:none; padding:8px 14px;
  border-radius:8px; font-weight:600; cursor:pointer; }

/* ---- v6: compliance, software, schedules ---- */
.compliance-summary { margin-bottom:14px; }
.comp-row { display:flex; align-items:center; gap:10px; margin:6px 0; }
.comp-name { width:90px; font-size:13px; font-weight:600; }
.comp-track { flex:1; height:10px; background:var(--deep); border:1px solid var(--border);
  border-radius:6px; overflow:hidden; }
.comp-fill { display:block; height:100%; background:var(--accent); }
.comp-fill.warn { background:var(--warn); }
.comp-stat { width:120px; text-align:right; font-size:12px; color:var(--muted); }
td.comp-pass { color:var(--accent); font-weight:600; }
td.comp-fail { color:var(--danger); font-weight:600; }
.comp-host-row { cursor:pointer; }
.comp-host-row:hover { background:var(--deep); }
.comp-detail .cd-section { margin:8px 0; }
.comp-detail ul { margin:4px 0 4px 18px; padding:0; }
.comp-detail li { font-size:12px; margin:3px 0; }
.badge.ok { background:var(--accent); color:#fff; padding:1px 8px; border-radius:999px; font-size:11px; }
.badge.warn { background:var(--warn); color:#fff; padding:1px 8px; border-radius:999px; font-size:11px; }
.sev-critical { color:#fff; background:var(--crit); padding:0 6px; border-radius:4px; font-size:11px; }
.sev-high { color:#fff; background:var(--danger); padding:0 6px; border-radius:4px; font-size:11px; }
.sev-warn { color:#fff; background:var(--warn); padding:0 6px; border-radius:4px; font-size:11px; }
.sev-info { color:#fff; background:var(--info); padding:0 6px; border-radius:4px; font-size:11px; }
#softwareTable code, #complianceTable code { font-size:12px; }

/* ---- v6: MFA enrollment ---- */
.backup-codes { background:var(--deep); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px;
  letter-spacing:1px; line-height:1.7; white-space:pre; color:var(--text); }
#mfaQr { display:inline-block; }

/* ===== v9 additions: passive badge, asset IDs, type edit, day/time schedule ===== */
.badge.passive{background:#6f42c1;color:#fff;font-size:10px;padding:1px 6px;border-radius:8px;margin-left:4px;}
code.asset-id{font-size:11px;letter-spacing:.5px;background:var(--chip-bg,#1f2733);padding:1px 5px;border-radius:5px;}
.type-edit{background:none;border:none;cursor:pointer;opacity:.45;font-size:12px;padding:0 2px;color:var(--muted);}
.type-edit:hover{opacity:1;color:var(--accent);}
.type-text{display:inline-block;}
#passiveBtn{border-color:#6f42c1;color:#a974ff;}

.sched-when{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:8px;border:1px solid var(--border,#26303c);border-radius:8px;}
.sched-when .so-label{font-weight:600;margin-right:6px;}
.sched-days label,.sched-opts label{margin-right:10px;font-size:12px;white-space:nowrap;}
.sched-days,.sched-time,.sched-interval,.sched-opts{display:flex;align-items:center;flex-wrap:wrap;gap:4px;}

/* =========================================================================
   v9.1 styles: charts, trends, global search, multi-select, lifecycle,
   integrations, retention, dashboard customisation
   ========================================================================= */

/* --- Global search bar (top nav) --- */
.global-search{position:relative;margin-right:8px;}
.global-search input{width:230px;padding:6px 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:13px;}
.global-search input:focus{outline:none;border-color:var(--accent);}
.gs-results{position:absolute;top:110%;right:0;width:380px;max-height:60vh;overflow:auto;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.4);z-index:60;padding:4px;}
.gs-item{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:7px;cursor:pointer;}
.gs-item:hover{background:var(--bg);}
.gs-type{width:18px;text-align:center;}
.gs-label{font-weight:600;font-size:13px;}
.gs-detail{font-size:11px;margin-left:auto;}
.gs-empty{padding:10px;}

/* --- Dashboard customise / components --- */
.dash-toolbar{display:flex;align-items:center;gap:8px;margin:6px 0 4px;flex-wrap:wrap;}
.dash-hidden{font-size:11px;color:var(--muted);}
button.mini{padding:3px 9px;font-size:12px;}
.dash-comp{position:relative;margin-bottom:14px;border-radius:12px;}
.dash-comp .comp-handle{display:none;align-items:center;justify-content:space-between;
  padding:5px 10px;background:var(--bg);border:1px dashed var(--border);
  border-radius:8px;margin-bottom:6px;}
.comp-title{font-size:12px;font-weight:600;color:var(--muted);}
.comp-ctl button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px;}
.comp-ctl button:hover{color:var(--text);}
#dashGrid.editing .dash-comp{outline:1px dashed var(--border);padding:6px;cursor:grab;}
#dashGrid.editing .dash-comp .comp-handle{display:flex;}
.dash-comp.pinned{outline:2px solid var(--accent);}
.dash-comp.dragging{opacity:.5;}

/* --- Charts --- */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:760px){.charts-row{grid-template-columns:1fr;}}
.chart-panel h2{font-size:15px;margin:0 0 10px;}
.chart-flex{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.pie{width:160px;height:160px;}
.pie-slice{cursor:pointer;transition:opacity .12s;}
.pie-slice:hover{opacity:.82;}
.legend{display:flex;flex-direction:column;gap:5px;}
.leg-item{font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.leg-item:hover{color:var(--accent);}
.swatch{width:11px;height:11px;border-radius:3px;display:inline-block;}
.sev-bars{display:flex;flex-direction:column;gap:9px;}
.sev-row{display:flex;align-items:center;gap:8px;cursor:pointer;}
.sev-label{width:64px;font-size:12px;}
.sev-track{flex:1;height:14px;background:var(--bg);border-radius:7px;overflow:hidden;}
.sev-fill{display:block;height:100%;border-radius:7px;transition:width .3s;}
.sev-val{width:30px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;}

/* --- Trend chart --- */
.trend-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.trend-range{display:flex;gap:4px;}
.trend-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.trend-svg{width:100%;height:auto;margin-top:8px;}
.trend-legend{display:flex;gap:16px;font-size:12px;margin-top:6px;flex-wrap:wrap;}

/* ---- v9.2: customisable chart tiles (type / resize / reorder) ---- */
.charts-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:2px 0 10px;flex-wrap:wrap;}
.chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;align-items:start;}
.chart-tile{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;
  min-width:240px;min-height:240px;max-width:100%;resize:both;overflow:hidden;}
.chart-tile.dragging{opacity:.45;}
.chart-tile.drop-target{outline:2px dashed var(--accent);outline-offset:2px;}
.ct-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.ct-title{font-size:15px;font-weight:600;}
.ct-tools{display:flex;align-items:center;gap:8px;}
.ct-type{background:var(--deep);color:var(--text);border:1px solid var(--border);
  border-radius:6px;font-size:12px;padding:3px 6px;cursor:pointer;}
.ct-drag{cursor:grab;color:var(--muted);font-size:16px;line-height:1;user-select:none;padding:0 2px;}
.ct-drag:active{cursor:grabbing;}
.ct-body{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;}
.ct-empty{font-size:13px;text-align:center;padding:10px;color:var(--muted);}
.ct-svg{max-width:100%;max-height:100%;width:100%;height:100%;}
.ct-piewrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  width:100%;height:100%;}
.ct-piewrap .pie{width:auto;height:auto;max-height:100%;max-width:60%;flex:0 0 auto;}
.ct-linewrap{display:flex;flex-direction:column;width:100%;height:100%;}
.ct-linewrap .ct-svg{flex:1;min-height:0;}
/* horizontal bars */
.hbars{display:flex;flex-direction:column;gap:9px;width:100%;}
.hbar-row{display:flex;align-items:center;gap:8px;}
.hbar-row[onclick]{cursor:pointer;}
.hbar-row[onclick]:hover .hbar-label{color:var(--accent);}
.hbar-label{width:88px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hbar-track{flex:1;height:14px;background:var(--track);border-radius:7px;overflow:hidden;}
.hbar-fill{display:block;height:100%;border-radius:7px;transition:width .3s;}
.hbar-val{width:34px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;}
/* vertical bars */
.vbars{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;
  width:100%;height:100%;min-height:150px;padding-top:6px;}
.vbar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:4px;flex:1;height:100%;}
.vbar-col[onclick]{cursor:pointer;}
.vbar-col[onclick]:hover .vbar-label{color:var(--accent);}
.vbar-bar{width:60%;max-width:46px;min-height:2px;border-radius:5px 5px 0 0;transition:height .3s;}
.vbar-val{font-size:11px;font-variant-numeric:tabular-nums;}
.vbar-label{font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.tl.risk{color:#f85149;} .tl.comp{color:#58a6ff;}

/* --- Multi-select --- */
.selcol{text-align:center;}
tr.host-row.selected{background:rgba(88,166,255,.10);}
.bulk-actions{display:flex;align-items:center;gap:8px;padding:6px 0;flex-wrap:wrap;}

/* --- Lifecycle badges / actions --- */
.lc-badge{font-size:10px;padding:1px 7px;border-radius:10px;font-weight:600;}
.lc-badge.lc-open{background:#30363d;color:#c9d1d9;}
.lc-badge.lc-remediated{background:#196c2e;color:#fff;}
.lc-badge.lc-accepted_risk{background:#9e6a03;color:#fff;}
.lc-badge.lc-false_positive{background:#6e40c9;color:#fff;}
.item.vuln.lc-remediated,.item.vuln.lc-false_positive{opacity:.6;}
.vrow.lc-remediated,.vrow.lc-false_positive{opacity:.6;}
.vuln-actions{margin-top:6px;display:flex;gap:6px;}
.lc-states{display:flex;gap:8px;flex-wrap:wrap;}
.lc-btn{padding:8px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);cursor:pointer;font-size:13px;}
.lc-btn:hover{border-color:var(--accent);}
.lc-btn.remediated{border-color:#196c2e;}
.lc-btn.accepted_risk{border-color:#9e6a03;}
.lc-btn.false_positive{border-color:#6e40c9;}

/* --- Match-confidence + patch tags --- */
.tag.confirmed{background:#196c2e;color:#fff;}
.tag.heuristic{background:#5a3e00;color:#ffd9a0;}
.badge.patchlvl{background:#1f6feb;color:#fff;}

/* --- Integrations / retention forms --- */
.integ-form{flex-wrap:wrap;gap:6px;}
.retention-grid{display:flex;flex-direction:column;gap:12px;}
.retention-grid label{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}