/* RISIQ cyber theme: colour, type and surface layer for an attack-surface monitoring look.
   Loaded last. Changes no layout geometry, risk values or wording; remove the <link> to undo. */

/* ---------- Tokens ---------- */
html:not(.dark-style) {
  --rq-canvas: #edf1f7;
  --rq-surface: #ffffff;
  --rq-surface-2: #f2f5fa;
  --rq-border: #d3dce9;
  --rq-text: #0f1b2d;
  --rq-muted: #4a5d78;
  --rq-action: #0e7490;
  --rq-action-hover: #155e75;
  --rq-action-text: #ffffff;
  --rq-action-soft: #e0f3f8;
  --rq-focus: #0891b2;
  --rq-grid: rgba(14, 116, 144, 0.055);
  --rq-glow: rgba(8, 145, 178, 0.16);
  --rq-sev-critical: #c81e3a;
  --rq-sev-high: #c2410c;
  --rq-sev-medium: #a16207;
  --rq-sev-low: #15803d;
}
html.dark-style {
  --rq-canvas: #060b14;
  --rq-surface: #0c1524;
  --rq-surface-2: #111d30;
  --rq-border: #1e2e47;
  --rq-text: #e6edf7;
  --rq-muted: #98a9c2;
  --rq-action: #22d3ee;
  --rq-action-hover: #67e8f9;
  --rq-action-text: #03151b;
  --rq-action-soft: #0a2a37;
  --rq-focus: #22d3ee;
  --rq-control-border: #34496a;
  --rq-grid: rgba(34, 211, 238, 0.04);
  --rq-glow: rgba(34, 211, 238, 0.22);
  --rq-sev-critical: #ff5c7a;
  --rq-sev-high: #ff8a4c;
  --rq-sev-medium: #fbbf24;
  --rq-sev-low: #34d399;
  --am-inset: #08111e;
  --bs-body-bg: var(--rq-canvas);
}
:root { --rq-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --rq-sidebar: #050b16; }

/* Operator and findings pages read --op-* colours; define them app-wide so their pills also work outside .operator-page. */
html:not(.dark-style) body .rq-shell, html:not(.dark-style) body .rq-shell .operator-page {
  --op-surface: var(--rq-surface); --op-surface-2: var(--rq-surface-2); --op-border: var(--rq-border); --op-text: #334155; --op-muted: #5b6b80; --op-faint: #9aa7b5;
  --op-zero-bg: #f1f4f8; --op-zero-fg: #56667a; --op-alert-bg: #fff7e6; --op-alert-border: #f5d28a; --op-alert-fg: #8a5a00;
  --op-critical-bg: #fde2e6; --op-critical-fg: #9f1239; --op-high-bg: #ffe8d6; --op-high-fg: #9a3d09;
  --op-medium-bg: #fff3cd; --op-medium-fg: #7a5a00; --op-low-bg: #dcf5e7; --op-low-fg: #166534; --op-none-bg: #eef1f5; --op-none-fg: #5b6b7d;
  --op-better: #15803d; --op-worse: #c0352b;
  --op-lvl-critical: var(--rq-sev-critical); --op-lvl-high: var(--rq-sev-high); --op-lvl-medium: var(--rq-sev-medium); --op-lvl-low: var(--rq-sev-low);
}
html.dark-style body .rq-shell, html.dark-style body .rq-shell .operator-page {
  --op-surface: var(--rq-surface); --op-surface-2: var(--rq-surface-2); --op-border: var(--rq-border); --op-text: #d3ddeb; --op-muted: var(--rq-muted); --op-faint: #5f7698;
  --op-zero-bg: #111d30; --op-zero-fg: #8ea2c0; --op-alert-bg: rgba(251, 191, 36, .1); --op-alert-border: rgba(251, 191, 36, .4); --op-alert-fg: #fcd56b;
  --op-critical-bg: rgba(255, 92, 122, .13); --op-critical-fg: #ff9db0; --op-high-bg: rgba(255, 138, 76, .13); --op-high-fg: #ffb38a;
  --op-medium-bg: rgba(251, 191, 36, .12); --op-medium-fg: #fcd56b; --op-low-bg: rgba(52, 211, 153, .12); --op-low-fg: #7ee8bd; --op-none-bg: #111d30; --op-none-fg: var(--rq-muted);
  --op-better: #34d399; --op-worse: #ff7a8f;
  --op-lvl-critical: var(--rq-sev-critical); --op-lvl-high: var(--rq-sev-high); --op-lvl-medium: var(--rq-sev-medium); --op-lvl-low: var(--rq-sev-low);
}
html body .rq-shell .op-pill { font-family: var(--rq-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
html.dark-style body .rq-shell .op-pill:is(.op-critical, .op-high, .op-medium, .op-low) { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }

/* ---------- Canvas: faint scan grid ---------- */
html body .rq-shell :is(.layout-page, .content-wrapper) {
  background-color: var(--rq-canvas) !important;
  background-image:
    linear-gradient(var(--rq-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rq-grid) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
}
html.dark-style body .rq-shell .content-wrapper {
  background-image:
    radial-gradient(1200px 420px at 70% -120px, rgba(34, 211, 238, 0.07), transparent 70%),
    linear-gradient(var(--rq-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rq-grid) 1px, transparent 1px) !important;
  background-size: auto, 36px 36px, 36px 36px !important;
}
html.dark-style body { background: var(--rq-canvas); }
::selection { background: var(--rq-action); color: var(--rq-action-text); }

/* ---------- Sidebar: always a dark console ---------- */
html body .rq-shell :is(.layout-menu.menu-vertical, .menu-vertical.bg-menu-theme) {
  background: var(--rq-sidebar) !important;
  border-inline-end: 1px solid rgba(34, 211, 238, 0.14) !important;
}
html body .rq-shell .menu-vertical .menu-inner .menu-item .menu-link { border-radius: 8px; transition: background-color 140ms, color 140ms; }
html body .rq-shell .menu-vertical .menu-inner .menu-item:hover > .menu-link { background: rgba(34, 211, 238, 0.06) !important; }
html body .rq-shell .menu-vertical .menu-inner .menu-item.active > .menu-link {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.02)) !important;
  box-shadow: inset 3px 0 0 #22d3ee, -1px 0 14px -4px rgba(34, 211, 238, 0.6) !important;
}
html body .rq-shell .menu-vertical .menu-inner .menu-item.active > .menu-link :is(div, i),
html body .rq-shell .menu-vertical .menu-inner .menu-item.active > .menu-link { color: #67e8f9 !important; }
html body .rq-shell .menu-vertical .menu-header-text { font-family: var(--rq-mono); color: #4f6a8c; letter-spacing: .14em; font-size: .64rem; }
html body .rq-shell .menu-vertical .menu-sub { background: rgba(0, 0, 0, 0.25) !important; }

/* ---------- Top bar ---------- */
html.dark-style body .rq-shell #layout-navbar.layout-navbar {
  background: rgba(9, 16, 29, 0.96) !important;
  border: 1px solid var(--rq-border);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.03), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
html:not(.dark-style) body .rq-shell #layout-navbar.layout-navbar { border: 1px solid var(--rq-border); box-shadow: 0 4px 16px rgba(15, 27, 45, 0.05) !important; }

/* ---------- Cards and panels ---------- */
html.dark-style body .rq-shell :is(.card, .admin-widget, .metric-card, .modern-card, .rq-overview-card, .rq-drawer, .vendor-client) {
  background: linear-gradient(180deg, #0f1a2c 0%, var(--rq-surface) 120px) !important;
  border: 1px solid var(--rq-border) !important;
  box-shadow: inset 0 1px 0 rgba(148, 197, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.28) !important;
}
html:not(.dark-style) body .rq-shell :is(.card, .admin-widget, .metric-card, .modern-card, .rq-overview-card) {
  border: 1px solid var(--rq-border) !important;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 6px 18px rgba(15, 27, 45, 0.04) !important;
}
html.dark-style body .rq-shell :is(.rq-overview-context, .rq-next-action, .rq-coverage-grid div, #assessmentInfo) { background: var(--rq-surface-2) !important; }
html.dark-style body .rq-shell :is(.modal-content, .dropdown-menu, .offcanvas) { background: #0d1729 !important; border: 1px solid var(--rq-border) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important; }

/* Latest-assessment hero: a scanner "target" panel. */
html body .rq-shell .rq-home-hero { position: relative; border: 1px solid var(--rq-border) !important; border-left: 3px solid var(--rq-action) !important; }
html.dark-style body .rq-shell .rq-home-hero { background: linear-gradient(100deg, rgba(34, 211, 238, 0.09), var(--rq-surface-2) 45%) !important; }
html:not(.dark-style) body .rq-shell .rq-home-hero { background: linear-gradient(100deg, rgba(8, 145, 178, 0.07), var(--rq-surface) 45%) !important; }
html body .rq-shell .rq-home-hero h2 { font-family: var(--rq-mono); font-weight: 600; letter-spacing: -.02em; }

/* ---------- Data typography ---------- */
html body .rq-shell :is(code, kbd, samp, .font-monospace, .rq-home-domain-name, .rq-eyebrow, .rq-portal-heading .rq-eyebrow) { font-family: var(--rq-mono); }
html body .rq-shell :is(.rq-eyebrow, .rq-portal-heading .rq-eyebrow) { color: var(--rq-action) !important; letter-spacing: .14em; font-weight: 600; }
html body .rq-shell :is(.rq-eyebrow, .rq-portal-heading .rq-eyebrow)::before { content: "// "; opacity: .55; }
html body .rq-shell :is(.rq-home-sev strong, .rq-stat-link strong, .vendor-metric strong, .op-kpi strong, .stat-number) { font-family: var(--rq-mono); font-weight: 600; letter-spacing: -.03em; }
html body .rq-shell .table thead th { font-family: var(--rq-mono); font-size: .68rem !important; letter-spacing: .1em; font-weight: 600; }
html.dark-style body .rq-shell .table thead th { background: #0a1322 !important; color: #7f95b5 !important; }
html.dark-style body .rq-shell .table { --bs-table-hover-bg: rgba(34, 211, 238, 0.05); }
html.dark-style body .rq-shell code { color: #67e8f9; background: rgba(34, 211, 238, 0.08); padding: .1em .35em; border-radius: 4px; }

/* ---------- Severity: tinted, glowing signal cards ---------- */
html body .rq-shell .rq-home-sev-critical { --rq-sev: var(--rq-sev-critical); }
html body .rq-shell .rq-home-sev-high { --rq-sev: var(--rq-sev-high); }
html body .rq-shell .rq-home-sev-medium { --rq-sev: var(--rq-sev-medium); }
html body .rq-shell .rq-home-sev-low { --rq-sev: var(--rq-sev-low); }
html body .rq-shell .rq-home-sev {
  background: linear-gradient(135deg, color-mix(in srgb, var(--rq-sev) 13%, transparent), transparent 65%), var(--rq-surface) !important;
  border: 1px solid color-mix(in srgb, var(--rq-sev) 30%, var(--rq-border)) !important;
  border-left: 3px solid var(--rq-sev) !important;
}
html body .rq-shell .rq-home-sev span { color: var(--rq-sev); font-family: var(--rq-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
html.dark-style body .rq-shell .rq-home-sev strong { text-shadow: 0 0 18px color-mix(in srgb, var(--rq-sev) 55%, transparent); }
html body .rq-shell a.rq-home-sev:hover { box-shadow: 0 0 0 1px var(--rq-sev), 0 8px 26px color-mix(in srgb, var(--rq-sev) 22%, transparent) !important; }
html body .rq-shell .rq-home-sev.is-empty { --rq-sev: var(--rq-muted); }
html body .rq-shell .rq-home-sev.is-empty strong { text-shadow: none; }

/* Exposure-by-scanner panel and its rows. */
html.dark-style body .rq-shell .rq-posture { --rq-posture-accent: var(--rq-sev-critical); background: linear-gradient(180deg, #0f1a2c 0%, var(--rq-surface) 120px) !important; border: 1px solid var(--rq-border) !important; box-shadow: inset 0 1px 0 rgba(148, 197, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.28); }
html.dark-style body .rq-shell .rq-posture-row { border-color: var(--rq-border); background: rgba(17, 29, 48, 0.6); }
html.dark-style body .rq-shell :is(.rq-posture-row:hover, .rq-posture-row:focus-visible) { border-color: var(--rq-action); background: rgba(34, 211, 238, 0.06); }
html body .rq-shell .rq-posture-level { font-family: var(--rq-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
html body .rq-shell .rq-posture-level.is-critical { --rq-chip: var(--rq-sev-critical); }
html body .rq-shell .rq-posture-level.is-high { --rq-chip: var(--rq-sev-high); }
html body .rq-shell .rq-posture-level.is-medium { --rq-chip: var(--rq-sev-medium); }
html body .rq-shell .rq-posture-level.is-low { --rq-chip: var(--rq-sev-low); }
html.dark-style body .rq-shell .rq-posture-level:is(.is-critical, .is-high, .is-medium, .is-low) { background: color-mix(in srgb, var(--rq-chip) 13%, transparent); color: var(--rq-chip); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rq-chip) 40%, transparent); }
html.dark-style body .rq-shell .rq-home-credits { background: var(--rq-surface-2) !important; border-color: var(--rq-border) !important; }
html.dark-style body .rq-shell .rq-home-credits a { color: var(--rq-action) !important; }
html.dark-style body .rq-shell :is(.btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active) { background: var(--rq-action-soft) !important; color: var(--rq-action) !important; border-color: var(--rq-action) !important; }
html.dark-style body .rq-shell .btn-success { background: #34d399 !important; border-color: #34d399 !important; color: #03140d !important; }

html body .rq-shell :is(.rq-stat-link, .rq-metric) { transition: border-color 140ms, box-shadow 140ms; }
html body .rq-shell :is(.rq-stat-link, .rq-metric):hover { border-color: var(--rq-action) !important; box-shadow: 0 0 0 1px var(--rq-action), 0 8px 26px var(--rq-glow) !important; }
html body .rq-shell .rq-stat-link.rq-stat-risk { border-left: 3px solid var(--rq-sev-critical) !important; }
html body .rq-shell .rq-stat-link.rq-stat-risk i { color: var(--rq-sev-critical) !important; }

/* Severity chips: outlined signal pills. */
html.dark-style body .rq-shell .bg-label-danger { background: rgba(255, 92, 122, 0.12) !important; color: #ff9db0 !important; box-shadow: inset 0 0 0 1px rgba(255, 92, 122, 0.35); }
html.dark-style body .rq-shell .bg-label-warning { background: rgba(251, 191, 36, 0.11) !important; color: #fcd56b !important; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.32); }
html.dark-style body .rq-shell .bg-label-success { background: rgba(52, 211, 153, 0.11) !important; color: #7ee8bd !important; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3); }
html.dark-style body .rq-shell .bg-label-info { background: rgba(96, 165, 250, 0.12) !important; color: #a5cbff !important; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3); }
html.dark-style body .rq-shell .bg-label-primary { box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.3); }
html:not(.dark-style) body .rq-shell :is(.bg-label-danger, .bg-label-warning, .bg-label-success, .bg-label-info) { box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Controls ---------- */
html body .rq-shell .content-wrapper .btn-primary { transition: box-shadow 140ms, background-color 140ms; }
html body .rq-shell .content-wrapper .btn-primary:hover { box-shadow: 0 0 0 1px var(--rq-action), 0 6px 22px var(--rq-glow) !important; }
html.dark-style body .rq-shell :is(.form-control, .form-select, .input-group-text) { background-color: #08111f !important; border-color: var(--rq-control-border) !important; }
html.dark-style body .rq-shell :is(.form-control, .form-select):focus { border-color: var(--rq-action) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18) !important; }

/* ---------- Sign-in pages ---------- */
html.dark-style body .authentication-wrapper {
  background-color: var(--rq-canvas);
  background-image:
    radial-gradient(900px 500px at 50% -10%, rgba(34, 211, 238, 0.1), transparent 70%),
    linear-gradient(var(--rq-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rq-grid) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}
html.dark-style body .authentication-wrapper .card { border: 1px solid var(--rq-border) !important; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.06), 0 24px 60px rgba(0, 0, 0, 0.5) !important; }

/* ---------- Scrollbars ---------- */
html.dark-style { scrollbar-color: #24364f var(--rq-canvas); }
html.dark-style ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-style ::-webkit-scrollbar-track { background: var(--rq-canvas); }
html.dark-style ::-webkit-scrollbar-thumb { background: #24364f; border-radius: 8px; border: 2px solid var(--rq-canvas); }

@media (prefers-reduced-motion: reduce) {
  html body .rq-shell :is(.rq-stat-link, .rq-metric, .btn-primary, .menu-link) { transition: none !important; }
}

/* Sign-in pages have no portal shell; their main button (btn-success or btn-primary inside .rq-auth) takes the accent. */
html.dark-style body :is(.rq-auth, .authentication-wrapper) :is(.btn-success, .btn-primary) { background: #22d3ee !important; border-color: #22d3ee !important; color: #03151b !important; }
html.dark-style body :is(.rq-auth, .authentication-wrapper) :is(.btn-success, .btn-primary):hover { background: #67e8f9 !important; border-color: #67e8f9 !important; box-shadow: 0 6px 22px rgba(34, 211, 238, 0.25) !important; }
html:not(.dark-style) body :is(.rq-auth, .authentication-wrapper) :is(.btn-success, .btn-primary) { background: #0e7490 !important; border-color: #0e7490 !important; color: #ffffff !important; }
html:not(.dark-style) body :is(.rq-auth, .authentication-wrapper) :is(.btn-success, .btn-primary):hover { background: #155e75 !important; border-color: #155e75 !important; box-shadow: 0 6px 22px rgba(8, 145, 178, 0.22) !important; }

/* Trend chart mode toggle: the chosen mode stays a filled accent button. */
html body .rq-shell .rq-trend .rq-trend-mode .btn-check:checked + .btn { background: var(--rq-action) !important; border-color: var(--rq-action) !important; color: var(--rq-action-text) !important; }

/* Readability fixes for older template colours (text was below 4.5:1 or invisible). */
html body .rq-shell .badge.bg-rmn { background: var(--op-low-bg); color: var(--op-low-fg); }
html.dark-style body .rq-shell .badge.bg-danger-subtle.text-danger { background: rgba(255, 92, 122, 0.14) !important; color: #ff9db0 !important; }
html body .rq-shell .nav-link.active:not(.menu-link) { color: var(--rq-action); }
html:not(.dark-style) body .rq-shell .btn-outline-warning:not(:hover):not(.active) { color: #92400e !important; border-color: #d97706 !important; }
html:not(.dark-style) body .rq-shell .btn-outline-info:not(:hover):not(.active) { color: #0e7490 !important; border-color: #0891b2 !important; }
html:not(.dark-style) body .rq-shell .btn-outline-success:not(:hover):not(.active) { color: #15803d !important; border-color: #16a34a !important; }
html:not(.dark-style) body .rq-shell .btn-outline-danger:not(:hover):not(.active) { color: #b91c1c !important; border-color: #dc2626 !important; }
html:not(.dark-style) body .rq-shell .badge.bg-danger { background-color: #c81e3a !important; }
html:not(.dark-style) body .rq-shell .badge.bg-info { background-color: #0e7490 !important; }
html:not(.dark-style) body .rq-shell :is(.dataTables_info, .col-label, .select2-selection__placeholder) { color: var(--rq-muted) !important; }
html:not(.dark-style) body .rq-shell .alert-success { color: #166534 !important; }
html:not(.dark-style) body .rq-shell .new-val { color: #15803d !important; }
html:not(.dark-style) body .rq-shell .prev-val { color: #b91c1c !important; }