/* ============================================================
   ICS FieldOps — Cyber Assessment module (premium styling)
   Uses the app's theme tokens (--primary, --bg-*, --border-*,
   --text-*) with sensible fallbacks.
   ============================================================ */

:root { --cyb-accent: var(--primary, #2563eb); --cyb-rgb: var(--primary-rgb, 37,99,235);
       --cyb-warn:#f59e0b; --cyb-warn-bg:rgba(245,158,11,.10);
       --cyb-good:#22c55e; --cyb-mid:#f59e0b; --cyb-bad:#ef4444; }

/* ---- Helper / guidance banner ---- */
.cyb-help { display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  background:linear-gradient(135deg, rgba(var(--cyb-rgb),.09), rgba(var(--cyb-rgb),.02));
  border:1px solid rgba(var(--cyb-rgb),.18); font-size:.84rem; line-height:1.45; }
.cyb-help .cyb-help-ico { flex-shrink:0; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(var(--cyb-rgb),.14); color:var(--cyb-accent); }
.cyb-help strong { display:block; margin-bottom:1px; }
.cyb-help p { margin:0; color:var(--text-muted, #64748b); }

/* ---- Section headers ---- */
.cyb-sec { display:flex; justify-content:space-between; align-items:center; margin:20px 0 10px; gap:12px; }
.cyb-sec h3 { margin:0; font-size:1.08rem; font-weight:700; }
.cyb-sec .cyb-sec-sub { font-size:.8rem; color:var(--text-muted,#64748b); margin-top:2px; }

/* ---- Premium tabs ---- */
.cyb-tabs { display:inline-flex; gap:4px; background:var(--bg-secondary,#f1f5f9); border:1px solid var(--border-primary,#e2e8f0);
  border-radius:13px; padding:4px; flex-wrap:wrap; }
.cyb-tab { padding:8px 16px; border-radius:10px; cursor:pointer; font-weight:600; font-size:.88rem;
  color:var(--text-muted,#64748b); display:flex; align-items:center; gap:8px; transition:all .15s; border:0; background:transparent; }
.cyb-tab:hover { color:var(--text-primary,#0f172a); background:rgba(var(--cyb-rgb),.06); }
.cyb-tab.active { background:var(--cyb-accent); color:#fff; box-shadow:0 4px 12px rgba(var(--cyb-rgb),.32); }
.cyb-tab-badge { background:var(--cyb-warn); color:#fff; font-size:.68rem; font-weight:800; padding:1px 7px; border-radius:999px; }

/* ---- Workspace layout ---- */
.cyb-workspace { display:grid; grid-template-columns:268px 1fr; gap:20px; align-items:start; }
@media (max-width:1080px){ .cyb-workspace{ grid-template-columns:1fr; } }

/* ---- System sidebar ---- */
.cyb-side { background:var(--bg-secondary,#f8fafc); border:1px solid var(--border-primary,#e2e8f0); border-radius:16px;
  padding:10px; position:sticky; top:12px; }
.cyb-side-title { font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted,#64748b); padding:6px 8px 8px; }
.cyb-sys { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; cursor:pointer;
  transition:all .15s; margin-bottom:3px; border:1px solid transparent; }
.cyb-sys:hover { background:rgba(var(--cyb-rgb),.07); }
.cyb-sys.active { background:linear-gradient(135deg, var(--cyb-accent), rgba(var(--cyb-rgb),.78)); color:#fff;
  box-shadow:0 6px 16px rgba(var(--cyb-rgb),.30); }
.cyb-sys-ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;
  background:rgba(var(--cyb-rgb),.12); color:var(--cyb-accent); }
.cyb-sys.active .cyb-sys-ico { background:rgba(255,255,255,.22); color:#fff; }
.cyb-sys-name { flex:1; font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cyb-mini-badge { background:var(--cyb-warn); color:#fff; font-size:.7rem; font-weight:800; min-width:20px; text-align:center;
  padding:1px 6px; border-radius:999px; }
.cyb-sys.active .cyb-mini-badge { background:#fff; color:var(--cyb-warn); }
.cyb-add-sys { display:flex; gap:6px; margin-top:8px; padding-top:10px; border-top:1px dashed var(--border-primary,#e2e8f0); }
.cyb-add-sys input { height:36px; }

/* ---- Premium cards ---- */
.cyb-card { background:var(--bg-card, #fff); border:1px solid var(--border-primary,#e2e8f0); border-radius:16px;
  overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.cyb-card + .cyb-card { margin-top:14px; }
.cyb-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--border-primary,#e2e8f0); }
.cyb-card-head h4 { margin:0; font-size:.98rem; font-weight:700; display:flex; align-items:center; gap:9px; }
.cyb-card-body { padding:18px; }
.cyb-card.is-unverified { border-color:var(--cyb-warn); box-shadow:0 8px 22px rgba(245,158,11,.14); }
.cyb-card.is-unverified .cyb-card-head { background:linear-gradient(90deg, var(--cyb-warn-bg), transparent); }

/* ---- Status pills ---- */
.cyb-pill { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:800; padding:3px 11px; border-radius:999px; }
.cyb-pill.warn { background:var(--cyb-warn-bg); color:#b45309; border:1px solid rgba(245,158,11,.3); }
.cyb-pill.ok   { background:rgba(34,197,94,.14); color:#15803d; border:1px solid rgba(34,197,94,.3); }
.cyb-pill.muted{ background:var(--bg-secondary,#f1f5f9); color:var(--text-muted,#64748b); }

/* ---- Cabinet block ---- */
.cyb-cab-grid { display:grid; grid-template-columns:248px 1fr; gap:20px; }
@media (max-width:760px){ .cyb-cab-grid{ grid-template-columns:1fr; } }
.cyb-photo-label { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted,#64748b); margin-bottom:7px; }
.cyb-photo { border-radius:13px; overflow:hidden; border:1px solid var(--border-primary,#e2e8f0);
  background:#0b1220; }
.cyb-photo img { width:100%; display:block; }

/* ---- Asset rows ---- */
.cyb-asset { border:1px solid var(--border-primary,#e2e8f0); border-radius:13px; margin-bottom:9px; transition:border-color .15s, box-shadow .15s; }
.cyb-asset:hover { border-color:rgba(var(--cyb-rgb),.45); box-shadow:0 4px 12px rgba(var(--cyb-rgb),.08); }
.cyb-asset.open { border-color:rgba(var(--cyb-rgb),.5); }
.cyb-asset-head { display:flex; justify-content:space-between; align-items:center; padding:13px 15px; cursor:pointer; gap:12px; }
.cyb-asset-id { display:flex; align-items:center; gap:11px; min-width:0; }
.cyb-asset-ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background:rgba(var(--cyb-rgb),.1); color:var(--cyb-accent); }
.cyb-asset-name { font-weight:700; font-size:.92rem; }
.cyb-asset-meta { font-size:.78rem; color:var(--text-muted,#64748b); }
.cyb-asset-body { padding:16px; border-top:1px solid var(--border-primary,#e2e8f0); background:rgba(15,23,42,.015); }

/* ---- Compact score chips ---- */
.cyb-chips { display:flex; gap:5px; flex-shrink:0; }
.cyb-chip { width:32px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:.78rem; font-weight:800; color:#fff; }
.cyb-chip.s-none { background:#e2e8f0; color:#94a3b8; }
.cyb-chip.s-low  { background:var(--cyb-good); }
.cyb-chip.s-mid  { background:var(--cyb-mid); }
.cyb-chip.s-high { background:var(--cyb-bad); }
.cyb-chip.unv { opacity:.45; box-shadow:inset 0 0 0 2px var(--cyb-warn); }

/* ---- Detailed score panel ---- */
.cyb-score-grid { display:flex; flex-direction:column; gap:10px; }
.cyb-score { border:1px solid var(--border-primary,#e2e8f0); border-radius:13px; padding:13px 14px; }
.cyb-score.unv { border-color:var(--cyb-warn); background:var(--cyb-warn-bg); }
.cyb-score-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.cyb-score-cat { font-weight:700; font-size:.9rem; }
.cyb-score-hint { font-size:.74rem; color:var(--text-muted,#64748b); margin-top:1px; }
.cyb-seg { display:inline-flex; border:1px solid var(--border-primary,#e2e8f0); border-radius:10px; overflow:hidden; margin-top:10px; }
.cyb-seg button { width:40px; height:36px; border:0; border-right:1px solid var(--border-primary,#e2e8f0);
  background:var(--bg-secondary,#f8fafc); cursor:pointer; font-weight:800; font-size:.9rem; transition:all .12s; color:var(--text-primary,#0f172a); }
.cyb-seg button:last-child { border-right:0; }
.cyb-seg button:hover { background:rgba(var(--cyb-rgb),.12); }
.cyb-seg button.sel { color:#fff; }
.cyb-seg button.sel.lvl-low  { background:var(--cyb-good); }
.cyb-seg button.sel.lvl-mid  { background:var(--cyb-mid); }
.cyb-seg button.sel.lvl-high { background:var(--cyb-bad); }
.cyb-seg button.proposed { outline:2px dashed var(--cyb-warn); outline-offset:-3px; }
.cyb-just { margin-top:9px; font-size:.8rem; color:var(--text-muted,#475569); background:rgba(15,23,42,.04);
  border-radius:9px; padding:8px 11px; line-height:1.45; }

/* ---- Score legend ---- */
.cyb-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:.74rem; color:var(--text-muted,#64748b); align-items:center; }
.cyb-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }

/* ---- AI progress loader ---- */
.cyb-progress { border:1px solid rgba(var(--cyb-rgb),.3); border-radius:15px; padding:18px;
  background:linear-gradient(135deg, rgba(var(--cyb-rgb),.07), transparent); }
.cyb-progress-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; gap:12px; }
.cyb-progress-pct { font-size:1.7rem; font-weight:800; color:var(--cyb-accent); line-height:1; }
.cyb-progress-stage { font-size:.86rem; color:var(--text-muted,#475569); display:flex; align-items:center; gap:8px; }
.cyb-progress-stage .dot { width:8px; height:8px; border-radius:50%; background:var(--cyb-accent); animation:cyb-pulse 1.1s infinite; }
@keyframes cyb-pulse { 0%,100%{ opacity:.3; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }
.cyb-bar { height:11px; border-radius:999px; background:rgba(var(--cyb-rgb),.14); overflow:hidden; }
.cyb-bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, var(--cyb-accent), #22d3ee);
  transition:width .45s ease; box-shadow:0 0 14px rgba(var(--cyb-rgb),.5); }
.cyb-steps { display:flex; gap:6px; margin-top:12px; }
.cyb-steps .stp { flex:1; height:5px; border-radius:3px; background:var(--border-primary,#e2e8f0); transition:background .3s; }
.cyb-steps .stp.on { background:var(--cyb-accent); }

/* ---- AI capture + bounding boxes ---- */
.cyb-capture-frame { position:relative; display:inline-block; max-width:100%; margin-top:12px; border-radius:12px; overflow:hidden; }
.cyb-capture-frame img { max-width:100%; display:block; }
.cyb-anno { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cyb-bbox { position:absolute; border:2px solid var(--cyb-warn); border-radius:5px; box-sizing:border-box; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.35); }
.cyb-bbox span { position:absolute; top:-13px; left:-2px; background:var(--cyb-warn); color:#fff; font-size:10px;
  font-weight:800; padding:0 5px; border-radius:4px; }
.cyb-dropzone { border:2px dashed var(--border-primary,#cbd5e1); border-radius:13px; padding:18px; text-align:center;
  transition:border-color .15s, background .15s; }
.cyb-dropzone:hover { border-color:var(--cyb-accent); background:rgba(var(--cyb-rgb),.04); }

/* captured-photo gallery (includes photos taken on the mobile app) */
.cyb-gallery { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.cyb-thumb { position:relative; width:74px; height:74px; padding:0; border-radius:9px; overflow:hidden; cursor:pointer;
  border:1px solid var(--border-primary,#cbd5e1); background:var(--bg-secondary,#f1f5f9); flex:0 0 auto; }
.cyb-thumb:hover { border-color:var(--cyb-accent); }
.cyb-thumb.sel { border-color:var(--cyb-accent); box-shadow:0 0 0 2px rgba(var(--cyb-rgb),.45); }
.cyb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cyb-thumb-ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  color:var(--text-muted); font-size:1.1rem; }
.cyb-thumb-ai { position:absolute; top:3px; right:3px; background:var(--cyb-accent); color:#03201f;
  font-size:9px; font-weight:800; padding:1px 4px; border-radius:4px; line-height:1.2; }

/* recognized devices table */
.cyb-dev-table { width:100%; border-collapse:collapse; font-size:.84rem; margin-top:10px; }
.cyb-dev-table th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted,#64748b); padding:6px 8px; border-bottom:1px solid var(--border-primary,#e2e8f0); }
.cyb-dev-table td { padding:7px 8px; border-bottom:1px solid var(--border-primary,#eef2f7); vertical-align:middle; }
.cyb-dev-num { width:22px; height:22px; border-radius:6px; background:var(--cyb-warn); color:#fff; font-weight:800;
  font-size:.72rem; display:inline-grid; place-items:center; }

/* ---- Tree view ---- */
.cyb-tree { font-size:.92rem; }
.cyb-tree details { margin-left:16px; border-left:1px dashed var(--border-primary,#e2e8f0); padding-left:8px; }
.cyb-tree > details { border-left:0; margin-left:0; padding-left:0; }
.cyb-tree summary { cursor:pointer; padding:6px 8px; border-radius:9px; list-style:none; display:flex; align-items:center; gap:8px; }
.cyb-tree summary::-webkit-details-marker { display:none; }
.cyb-tree summary:hover { background:rgba(var(--cyb-rgb),.06); }
.cyb-tree-ico { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex-shrink:0; font-size:.85rem; }
.cyb-tree-narr { margin:2px 0 6px 34px; font-size:.82rem; color:var(--text-muted,#64748b);
  border-left:2px solid rgba(var(--cyb-rgb),.3); padding:4px 0 4px 10px; }
.cyb-tree-asset { margin-left:34px; padding:4px 0; display:flex; align-items:center; gap:9px; }

/* ---- empty states ---- */
.cyb-empty { text-align:center; padding:42px 20px; border:1px dashed var(--border-primary,#e2e8f0); border-radius:16px;
  background:var(--bg-secondary,#f8fafc); }
.cyb-empty .cyb-empty-ico { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin:0 auto 12px;
  background:rgba(var(--cyb-rgb),.1); color:var(--cyb-accent); }
.cyb-empty h3 { margin:0 0 5px; }
.cyb-empty p { margin:0 auto 14px; color:var(--text-muted,#64748b); max-width:420px; }

/* ---- list cards (project list) ---- */
.cyb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.cyb-proj-card { cursor:pointer; transition:transform .12s, box-shadow .15s, border-color .15s; }
.cyb-proj-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,23,42,.10); border-color:rgba(var(--cyb-rgb),.4); }
.cyb-kv { display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:.85rem; }
.cyb-kv dt { color:var(--text-muted,#64748b); }
.cyb-kv dd { margin:0; font-weight:600; }

/* ── Findings (corrective-action / work-order) ───────────────────────── */
.cyb-find-form { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; padding:6px 0 16px; border-bottom:1px dashed var(--border-primary,#e2e8f0); margin-bottom:14px; }
.cyb-find-risk { display:inline-flex; align-items:center; height:38px; padding:0 12px; border-radius:9px; font-weight:800; font-size:.85rem; }
.cyb-find-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cyb-find-chip { border:1px solid var(--border-primary,#e2e8f0); background:var(--bg-secondary,#f1f5f9); color:var(--text-muted,#64748b);
    border-radius:999px; padding:4px 12px; font-size:.78rem; font-weight:600; cursor:pointer; }
.cyb-find-chip.sel { background:rgba(var(--cyb-rgb),.14); color:var(--cyb,#0ea5b7); border-color:rgba(var(--cyb-rgb),.4); }
.cyb-find-empty { color:var(--text-muted,#64748b); font-size:.85rem; padding:12px 2px; }
.cyb-find-list { display:flex; flex-direction:column; gap:10px; }
.cyb-find-row { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--border-primary,#e2e8f0); border-radius:12px; background:var(--bg-card,#fff); }
.cyb-find-riskbadge { font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:8px; white-space:nowrap; }
.cyb-find-main { flex:1; min-width:0; }
.cyb-find-title { font-weight:700; font-size:.92rem; }
.cyb-find-desc { font-size:.82rem; color:var(--text-muted,#64748b); margin-top:2px; }
.cyb-find-rec { font-size:.8rem; color:var(--text-secondary,#475569); margin-top:3px; }
.cyb-find-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:.74rem; color:var(--text-muted,#64748b); margin-top:5px; }
.cyb-find-status { width:auto; min-width:120px; }
@media (max-width:720px){ .cyb-find-form { grid-template-columns:1fr 1fr; } .cyb-find-row { flex-wrap:wrap; } }

/* ── Image geotag / capture metadata ─────────────────────────────────── */
.cyb-geo { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px; font-size:.78rem; color:var(--text-muted,#64748b); }
.cyb-geo a { color:var(--cyb,#0ea5b7); font-weight:600; text-decoration:none; }
.cyb-geo a:hover { text-decoration:underline; }

/* ── Inline icon buttons (card actions) ──────────────────────────────── */
.cyb-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
    border:1px solid var(--border-primary,#e2e8f0); background:var(--bg-card,#fff); color:var(--text-muted,#64748b);
    border-radius:7px; cursor:pointer; padding:0; transition:background .12s, color .12s, border-color .12s; }
.cyb-iconbtn:hover { background:var(--bg-secondary,#f1f5f9); color:var(--text-primary,#0f172a); }
.cyb-iconbtn-danger:hover { background:rgba(220,55,44,.10); color:#c9372c; border-color:rgba(220,55,44,.35); }

/* Image lightbox prev/next arrows */
.cyb-lightbox-nav { flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1px solid var(--border-primary,#e2e8f0);
    background:var(--bg-card,#fff); color:var(--text-primary,#0f172a); font-size:26px; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s, opacity .12s; }
.cyb-lightbox-nav:hover:not(:disabled) { background:var(--bg-secondary,#f1f5f9); border-color:var(--cyb-accent,#24c1b4); }
.cyb-lightbox-nav:disabled { opacity:.3; cursor:default; }
.cyb-lightbox-panel .cyb-capture-frame { margin-top:0; }