/* VM Ops operational pages (Dashboard / Findings / Import / Settings). Scoped under .vmops
   (set on #app for these views, and on the drawer) so it can't collide with the CVE-intelligence
   views' CSS. Reuses the shell's design tokens; only adds the few it lacks (--ok/--info/--st-*). */
:root { --ok:#2f6b3f; --info:#28415d; }
:root[data-theme="dark"] { --ok:#5cba74; --info:#8fb3dd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok:#5cba74; --info:#8fb3dd; } }
/* Per-status bar colors. Six distinct hues (red / amber / blue / green / violet / grey) rather
   than blue + two near-identical greys, so the status breakdown stays legible for color-blind
   viewers — only one neutral grey, and violet replaces the second grey. */
:root { --st-new:#c0392b; --st-triaged:#b9770b; --st-rem:#2f6fe0; --st-res:#1f9d57; --st-risk:#7d4fd1; --st-fp:#8a8f98; }
:root[data-theme="dark"] { --st-new:#e24b4a; --st-triaged:#ef9f27; --st-rem:#5aa9e6; --st-res:#5cba74; --st-risk:#b487f0; --st-fp:#7a818b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-new:#e24b4a; --st-triaged:#ef9f27; --st-rem:#5aa9e6; --st-res:#5cba74; --st-risk:#b487f0; --st-fp:#7a818b; } }

.vmops .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:22px 0; }
.vmops .kpi { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:15px 17px; }
.vmops .kpi .label { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.vmops .kpi .num { font-family:var(--serif); font-size:30px; line-height:1.1; margin:6px 0 2px; }
.vmops .kpi .sub { font-size:12.5px; color:var(--soft); }
.vmops .kpi.crit .num { color:var(--crit); } .vmops .kpi.ok .num { color:var(--ok); }

/* "Start here" workflow strip (Ops dashboard) — horizontal stage bar, each stage links into its view */
.vmops .wfstrip { border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--accent) 4%, var(--surface)); padding:12px 14px; margin:20px 0; }
.vmops .wfstrip-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vmops .wfstrip-title { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--faint); }
.vmops .wfstrip-actions { display:flex; align-items:center; gap:10px; }
.vmops .wfstrip-x { font-size:12px; color:var(--soft); background:none; border:none; cursor:pointer; padding:2px 4px; }
.vmops .wfstrip-x:hover { color:var(--accent); }
.vmops .wfstrip-actions #wfTour { color:var(--accent); }
.vmops .wfstrip.collapsed { padding:9px 14px; }
.vmops .wfstrip-row { display:flex; align-items:stretch; gap:4px; margin-top:11px; overflow-x:auto; }
.vmops .wfstage { flex:1 1 0; min-width:104px; display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 12px; transition:border-color .12s, transform .12s; }
.vmops .wfstage:hover { border-color:var(--accent); transform:translateY(-1px); }
.vmops .wfstage-top { display:flex; align-items:center; gap:7px; }
.vmops .wfstage-n { flex:none; width:18px; height:18px; border-radius:50%; background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.vmops .wfstage-l { font-size:12.5px; font-weight:600; color:var(--ink); }
.vmops .wfstage-num { font-family:var(--serif); font-size:23px; line-height:1.1; margin-top:3px; }
.vmops .wfstage-num.ok { color:var(--ok); } .vmops .wfstage-num.warn { color:var(--high); }
.vmops .wfstage-sub { font-size:11.5px; color:var(--soft); }
.vmops .wfarrow { flex:none; align-self:center; color:var(--faint); font-size:18px; padding:0 1px; }
.vmops a.backlink { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--soft); text-decoration:none; margin:0 0 14px; }
.vmops a.backlink:hover { color:var(--accent); }
.vmops a.barrow { cursor:pointer; }
.vmops a.barrow:hover .barlabel { color:var(--accent); }
.vmops a.barrow:hover .barfill { filter:brightness(1.12); }
@media (max-width:640px){ .vmops .wfstage { min-width:92px; } .vmops .wfarrow { display:none; } }

.vmops .toolbar { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:16px 0 12px; }
.vmops .toolbar input[type=text], .vmops .toolbar select { font-family:var(--sans); font-size:13.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 11px; outline:none; }
.vmops .toolbar input[type=text] { min-width:230px; flex:1; }
.vmops .toolbar input:focus, .vmops .toolbar select:focus { border-color:var(--accent); }
/* visible focus ring for keyboard users (these fields set outline:none) */
.vmops input:focus-visible, .vmops select:focus-visible, .vmops textarea:focus-visible, .drawer textarea:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.vmops .spacer { flex:1; }

/* bulk-action bar (shown when findings are selected) */
.vmops .bulkbar { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:0 0 12px; padding:10px 12px; border:1px solid var(--accent); border-radius:10px; background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.vmops .bulkbar[hidden] { display:none; }
.vmops .bulkbar .bulkcount { font-size:13px; color:var(--ink); white-space:nowrap; }
.vmops .bulkbar .bulkcount b { font-variant-numeric:tabular-nums; }
.vmops .bulkbar input[type=text] { flex:1; min-width:220px; font-family:var(--sans); font-size:13.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 11px; outline:none; }
.vmops .bulkbar input[type=text]:focus { border-color:var(--accent); }
/* checkbox column */
.vmops table.grid th.selcol, .vmops table.grid td.selcol { width:1%; cursor:default; padding-right:4px; }
.vmops table.grid .selcol input { cursor:pointer; margin:0; vertical-align:middle; }

.vmops .btn { font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 13px; cursor:pointer; transition:border-color .15s ease; }
.vmops .btn:hover { border-color:var(--accent); }
.vmops .btn.primary { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.vmops .btn.primary:hover { background:var(--accent); border-color:var(--accent); }
.vmops .btn.sm { font-size:12px; padding:5px 9px; }

.vmops .gridwrap { overflow-x:auto; }
.vmops table.grid { width:100%; border-collapse:collapse; font-size:13.5px; }
/* resizable columns: fixed layout so per-column widths are honored; cells clip with ellipsis */
.vmops table.grid.resizable { table-layout:fixed; }
.vmops table.grid.resizable th, .vmops table.grid.resizable td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vmops table.grid.resizable td.cid { white-space:normal; }   /* let CVE id + chips wrap */
.vmops table.grid.resizable td.dcell { max-width:none; }
.vmops table.grid th { position:relative; }
.vmops .col-resize { position:absolute; top:0; right:0; width:9px; height:100%; cursor:col-resize; user-select:none; }
.vmops .col-resize:hover { background:color-mix(in srgb, var(--accent) 45%, transparent); }
.vmops table.grid th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); padding:8px 10px; border-bottom:1px solid var(--line); cursor:pointer; white-space:nowrap; user-select:none; }
.vmops table.grid td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.vmops table.grid .grid-filterrow th { padding:3px 6px; cursor:default; border-bottom:1px solid var(--line); }
.vmops table.grid .grid-filterrow input { width:100%; box-sizing:border-box; font-family:inherit; font-size:11px; font-weight:400; letter-spacing:normal; text-transform:none; padding:3px 6px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink); }
.vmops table.grid .grid-filterrow input:focus { outline:none; border-color:var(--accent); }
.vmops table.grid .grid-filterrow input::placeholder { color:var(--faint); }
.vmops table.grid tr:hover td { background:color-mix(in srgb, var(--accent) 5%, transparent); }
.vmops table.grid .cid a { font-family:var(--mono); font-size:12.5px; text-decoration:none; }
.vmops table.grid .host { font-family:var(--mono); font-size:12px; color:var(--soft); }
.vmops table.grid .dcell { max-width:300px; color:var(--soft); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vmops .muted { color:var(--faint); }
.vmops .sortarrow { color:var(--accent); }

.vmops .badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:100px; white-space:nowrap; border:1px solid transparent; }
.vmops .badge.crit { color:var(--badge-ink); background:var(--crit); } .vmops .badge.high { color:var(--badge-ink); background:var(--high); }
.vmops .badge.med { color:var(--badge-ink); background:var(--med); } .vmops .badge.low { color:var(--badge-ink); background:var(--low); }
/* exploitation chips (KEV / ransomware / PoC) + priority badge */
.vmops .ichip { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.3px; padding:1px 6px; border-radius:100px; margin-left:5px; vertical-align:middle; }
.vmops .ichip.kev, .vmops .ichip.rw { color:var(--badge-ink); background:var(--crit); }
.vmops .ichip.poc { color:var(--badge-ink); background:var(--high); }
.vmops .ichip.new { color:var(--badge-ink); background:var(--accent); }
.vmops table.grid tr.grouprow { cursor:pointer; background:color-mix(in srgb,var(--accent) 6%,transparent); }
.vmops table.grid tr.grouprow:hover { background:color-mix(in srgb,var(--accent) 11%,transparent); }
.vmops table.grid tr.grouprow td { border-bottom:1px solid var(--line); }
.vmops table.grid tr.grouprow b { font-size:13.5px; }
.vmops .gcaret { display:inline-block; width:14px; color:var(--soft); font-size:11px; }
.vmops table.grid tr.childrow td.cid { padding-left:22px; }
.vmops .pri { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:100px; }
.vmops .pri.p1 { color:var(--badge-ink); background:var(--crit); }
.vmops .pri.p2 { color:var(--badge-ink); background:var(--high); }
.vmops .pri.p3 { color:var(--faint); border:1px solid var(--line); }
.vmops .epss { font-variant-numeric:tabular-nums; font-size:12.5px; }
.vmops .epss.hi { color:var(--crit); font-weight:600; }
.vmops .epss.mid { color:var(--high); }
.vmops .vpr { font-variant-numeric:tabular-nums; font-size:12.5px; }
.vmops .vpr.crit { color:var(--crit); font-weight:700; }
.vmops .vpr.hi { color:var(--high); font-weight:600; }
.vmops .vpr.mid { color:var(--med); }
.vmops .pill-sla { font-size:11.5px; font-weight:600; }
.vmops .pill-sla.overdue { color:var(--crit); } .vmops .pill-sla.soon { color:var(--high); } .vmops .pill-sla.ok { color:var(--ok); } .vmops .pill-sla.done { color:var(--faint); }

.vmops select.status { font-family:var(--sans); font-size:12px; font-weight:600; border-radius:100px; padding:3px 8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; }
.vmops select.status[data-s="new"] { color:var(--st-new); border-color:color-mix(in srgb,var(--st-new) 45%,var(--line)); }
.vmops select.status[data-s="triaged"] { color:var(--st-triaged); }
.vmops select.status[data-s="in_remediation"] { color:var(--st-rem); }
.vmops select.status[data-s="resolved"] { color:var(--st-res); }
.vmops select.status[data-s="risk_accepted"] { color:var(--st-risk); }
.vmops select.status[data-s="false_positive"] { color:var(--st-fp); }
.vmops .statuskey { margin:0 0 14px; }
.vmops .statuskey > summary { cursor:pointer; font-size:12.5px; color:var(--soft); width:max-content; padding:2px 0; }
.vmops .statuskey > summary:hover { text-decoration:underline; }
.vmops .statuskey-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:10px 20px; margin:10px 0 8px; }
.vmops .statuskey-item { display:flex; gap:8px; align-items:flex-start; }
.vmops .st-dot { width:10px; height:10px; border-radius:50%; flex:none; margin-top:4px; }
.vmops .st-oc { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); border:1px solid var(--line); border-radius:20px; padding:0 6px; margin-left:4px; }
.vmops .statuskey-d { font-size:12px; margin-top:2px; }
.vmops .statuskey-note { font-size:12px; margin-top:4px; }
.vmops .tkt { font-size:12px; font-variant-numeric:tabular-nums; }
.vmops a.tkt { color:var(--accent); text-decoration:none; }
.vmops a.tkt:hover { text-decoration:underline; }

.vmops .drop { display:block; border:1.5px dashed var(--line); border-radius:14px; padding:34px 20px; text-align:center; cursor:pointer; background:var(--surface); transition:border-color .15s ease; }
.vmops .drop:hover, .vmops .drop.over { border-color:var(--accent); }
.vmops .drop .dm { font-family:var(--serif); font-size:19px; } .vmops .drop .ds { font-size:13px; color:var(--soft); margin-top:5px; }

.vmops .privacy { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--ok); border-left:4px solid var(--ok); background:color-mix(in srgb, var(--ok) 9%, var(--surface)); border-radius:12px; padding:14px 16px; margin:18px 0; font-size:13.5px; color:var(--soft); }
.vmops .privacy b { color:var(--ink); } .vmops .privacy svg { flex:0 0 auto; width:20px; height:20px; color:var(--ok); margin-top:2px; }
.vmops .privacy.slim { padding:8px 13px; font-size:12.5px; margin:14px 0 4px; align-items:center; }
.vmops .privacy.slim svg { width:16px; height:16px; margin-top:0; }

.vmops .card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:14px 0; }
.vmops .field { margin:12px 0; } .vmops .field label { display:block; font-size:12px; font-weight:600; color:var(--soft); margin-bottom:5px; }
.vmops .field input[type=text], .vmops .field input[type=number] { width:100%; max-width:480px; font-family:var(--mono); font-size:13.5px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:9px 12px; outline:none; }
.vmops .field input:focus { border-color:var(--accent); }
.vmops .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; max-width:620px; }
.vmops .empty { text-align:center; color:var(--faint); padding:50px 20px; font-size:14px; }

/* unified data-import grid (one card per source) */
.vmops .import-grouprow { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:22px 0 2px; padding-bottom:4px; border-bottom:1px solid var(--line); }
.vmops .import-grouprow .import-grouphdr { margin:0; padding:0; border:0; }
.vmops .import-open { flex:0 0 auto; white-space:nowrap; }
.vmops .import-grouphdr { font-family:var(--serif); font-weight:500; font-size:17px; margin:22px 0 2px; padding-bottom:4px; border-bottom:1px solid var(--line); }
.vmops .importgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin:14px 0; }
.vmops .import-src { margin:0; display:flex; flex-direction:column; }
.vmops .import-src .src-title { font-weight:600; font-size:14.5px; }
.vmops .import-src .src-sub { font-size:12.5px; margin-top:3px; }
.vmops .import-src .src-status { font-size:12.5px; margin:12px 0; flex:1; }
.vmops .import-src .ok-txt { color:var(--ok); font-weight:600; }
.vmops .import-src.soon { opacity:.6; }

/* drawer + toast are body-level overlays; the CVE-intelligence views have no such classes, so these are collision-free */
.drawer-bg { position:fixed; inset:0; background:rgba(0,0,0,.34); z-index:80; display:none; }
.drawer-bg.open { display:block; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(520px,94vw); background:var(--paper); border-left:1px solid var(--line); z-index:90; transform:translateX(100%); transition:transform .2s ease; overflow-y:auto; padding:24px; }
.drawer.open { transform:translateX(0); }
.drawer-resize { position:fixed; top:0; bottom:0; width:10px; margin-left:-5px; z-index:95; cursor:ew-resize; display:none; touch-action:none; }
.drawer-resize.open { display:block; }
.drawer-resize::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:3px; height:36px; border-radius:3px; background:var(--line); opacity:.7; transition:background .12s, opacity .12s; }
.drawer-resize:hover::after, .drawer-resize.dragging::after { background:var(--accent); opacity:1; }
.drawer h3 { font-family:var(--serif); font-weight:500; font-size:22px; }
.drawer .overline { font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--faint); }
.drawer .row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.drawer .row .k { color:var(--soft); } .drawer .actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.drawer .remed { margin:16px 0 4px; padding-top:14px; border-top:1px solid var(--line); }
.drawer .remed-h { display:flex; align-items:center; gap:8px; }
.drawer .remed-h .k { font-size:12px; font-weight:600; color:var(--soft); }
.drawer .remed-copy { margin-left:auto; }
.drawer .remed-note { font-size:11px; color:var(--soft); margin-top:7px; }
/* shared by the drawer and the CVE-detail page */
.remed-badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:5px; background:var(--accent); color:#fff; vertical-align:middle; }
.remed-badge.gen { background:#8a8f98; }
.remed-title { font-size:13px; font-weight:600; margin:9px 0 6px; color:var(--ink); }
.remed-code { background:#0f1420; color:#e6edf3; border-radius:8px; padding:12px 13px; margin:0; overflow:auto; max-height:340px; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; -webkit-overflow-scrolling:touch; }
#cveRemedCopy { font:inherit; font-size:12px; color:var(--soft); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:5px 13px; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
#cveRemedCopy:hover { border-color:var(--accent); color:var(--ink); }
.vmops .remed-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.vmops .remed-row .remed-acts { margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
/* Remediation campaigns */
.vmops .pbar { display:inline-block; width:78px; height:7px; border-radius:4px; background:var(--line); vertical-align:middle; overflow:hidden; }
.vmops .pbar-fill { display:block; height:100%; background:var(--accent); }
.vmops .pbar-num { font-size:11px; color:var(--soft); }
.vmops .camprow { cursor:pointer; }
.vmops .stbadge { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:100px; background:var(--surface); border:1px solid var(--line); color:var(--soft); white-space:nowrap; }
.vmops .stbadge.st-active { color:#1d6fd6; border-color:#bcd6f5; }
.vmops .stbadge.st-completed { color:#1a7f47; border-color:#b7e0c6; }
.vmops .stbadge.st-paused { color:#b6791f; border-color:#eddaa8; }
.vmops .stbadge.st-cancelled { color:#9aa0a8; }
.vmops .camp-meta > div { padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.vmops .camp-meta > div:last-child { border-bottom:0; }
.vmops .camp-meta .k { display:inline-block; width:92px; color:var(--soft); }
.vmops #gridHost tbody tr.rowfocus td { background:var(--surface); box-shadow:inset 0 0 0 9999px transparent; }
.vmops #gridHost tbody tr.rowfocus td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
.vmops .colmenu { position:relative; display:inline-block; }
.vmops .colmenu > summary { list-style:none; cursor:pointer; }
.vmops .colmenu > summary::-webkit-details-marker { display:none; }
.vmops .colmenu-pop { position:absolute; top:calc(100% + 4px); left:0; z-index:60; background:var(--paper); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:8px; min-width:150px; max-height:300px; overflow:auto; }
.vmops .colmenu-pop label { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; font-size:13px; cursor:pointer; white-space:nowrap; }
.vmops .colmenu-pop label:hover { background:var(--surface); }
.vmops a.kpilink { text-decoration:none; display:block; }
.vmops a.kpilink .kpi { transition:border-color .12s ease, box-shadow .12s ease; }
.vmops a.kpilink:hover .kpi { border-color:var(--accent); box-shadow:0 2px 10px rgba(0,0,0,.08); }
.drawer textarea { width:100%; min-height:90px; font-family:var(--sans); font-size:13.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px; outline:none; resize:vertical; margin-top:6px; }
.drawer .x { float:right; background:none; border:0; font-size:22px; color:var(--faint); cursor:pointer; line-height:1; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--paper); font-size:13.5px; padding:10px 18px; border-radius:100px; z-index:120; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.toast .toast-undo { color:var(--paper); text-decoration:underline; margin-left:10px; font-weight:600; cursor:pointer; pointer-events:auto; }
.toast.show { opacity:1; }