/*
  detection-rule-viewer.css — syntax-highlighted rule viewer for the
  "Detection rules" tab on the vulnerability detail page.

  Ported from rulezet-core's code-viewer.css: same light/dark token
  palettes (GitHub's light and dark highlight.js themes, see HLJS_THEME
  below), so a YARA/Suricata/Sigma/... rule is colored identically in both
  UIs. Structural chrome (surfaces, borders, radius) uses this project's
  own --bs-*/--vl-* variables instead of rulezet-core's
  --bg-surface/--text-main/--brand set, so it still looks native here.
*/

/*---ROOT---*/

.rv-root {
    font-family: var(--vl-font-mono);
    font-size: .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: var(--bs-card-bg);
    box-shadow: var(--vl-shadow-sm);
    margin-bottom: 1rem;
}

/*---HEADER---*/

.rv-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    flex-wrap: wrap;
    min-height: 38px;
}

.rv-header-left  { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 160px; overflow: hidden; }
.rv-header-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

.rv-title {
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--vl-font-sans);
    color: var(--bs-emphasis-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-title a { color: inherit; text-decoration: none; }
.rv-title a:hover { text-decoration: underline; }

/* Rule format (YARA, SIGMA, SURICATA, ...) — deliberately not the
   highlight.js language it maps to (e.g. Sigma is highlighted as YAML but
   the badge must still read SIGMA, so a user can filter/scan by the format
   they actually know). */
.rv-format-badge {
    font-size: .65rem;
    font-family: var(--vl-font-mono);
    font-weight: 700;
    padding: 2px 7px;
    background: #000;
    color: #fff;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .02em;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .rv-format-badge {
    background: #f0f3f5;
    color: #000;
}

.rv-line-count {
    font-size: .68rem;
    font-family: var(--vl-font-mono);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.rv-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-card-bg);
    color: var(--bs-secondary-color);
    font-size: .68rem;
    cursor: pointer;
}

.rv-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.rv-btn.is-copied { color: #198754; border-color: #198754; }

/*---META---*/

.rv-meta {
    padding: 6px 10px;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
}

.rv-meta p { margin: 0 0 4px; font-family: var(--vl-font-sans); }
.rv-meta p:last-child { margin-bottom: 0; }

/*---BODY---*/

.rv-body {
    /* Single scroll container for both the gutter and the code, so line
       numbers can never drift out of sync with (or dangle past) the code
       they label. The gutter and the pre are NOT individually scrollable
       (no overflow/max-height of their own) — see rv-gutter/rv-pre below. */
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 420px;
    background: var(--bs-card-bg);
    /* Always-visible, clearly-drawn scrollbars in both directions — a
       thin/overlay scrollbar that only appears on hover is easy to miss on
       a code block that's actually cut off. */
    scrollbar-width: auto;
    scrollbar-color: var(--bs-secondary-color) var(--bs-tertiary-bg);
}

.rv-body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.rv-body::-webkit-scrollbar-track {
    background: var(--bs-tertiary-bg);
}

.rv-body::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-color);
    border-radius: 6px;
    border: 2px solid var(--bs-tertiary-bg);
}

.rv-body::-webkit-scrollbar-corner {
    background: var(--bs-tertiary-bg);
}

.rv-gutter {
    flex-shrink: 0;
    user-select: none;
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color-translucent);
    padding: 12px 0;
}

.rv-lnum {
    display: block;
    padding: 0 10px 0 8px;
    font-size: .72rem;
    font-family: var(--vl-font-mono);
    line-height: 21px;
    color: var(--bs-secondary-color);
    text-align: right;
    min-width: 36px;
}

.rv-pre {
    flex: 1;
    /* Flex items default to min-width:auto, which refuses to shrink below
       the content's intrinsic width — a long one-line rule would otherwise
       blow the card (and the page) out horizontally instead of scrolling
       within rv-body. */
    min-width: 0;
    margin: 0;
    padding: 12px 16px;
    font-family: var(--vl-font-mono);
    font-size: .78rem;
    line-height: 21px;
    color: var(--bs-body-color);
    background: var(--bs-card-bg);
    white-space: pre;
}

/*---HLJS_THEME---*/
/* Token colors, hardcoded and !important: this is a leaf-level override
   inside a fixed .rv-pre box that must never silently no-op, whether from
   a cascade conflict or a custom-property resolution issue. Light values
   are GitHub's light hljs theme; dark values are GitHub's dark hljs theme,
   the same pairs rulezet-core's code-viewer.css carries. */
.rv-pre .hljs-keyword,
.rv-pre .hljs-selector-tag,
.rv-pre .hljs-meta-keyword { color: #c6402e !important; font-weight: 600; }

.rv-pre .hljs-string,
.rv-pre .hljs-selector-attr,
.rv-pre .hljs-selector-pseudo,
.rv-pre .hljs-addition         { color: #0a3069 !important; }

.rv-pre .hljs-number,
.rv-pre .hljs-literal          { color: #0550ae !important; }

.rv-pre .hljs-comment,
.rv-pre .hljs-quote            { color: #6e7781 !important; font-style: italic; }

.rv-pre .hljs-function,
.rv-pre .hljs-title            { color: #8250df !important; }

.rv-pre .hljs-type,
.rv-pre .hljs-built_in,
.rv-pre .hljs-builtin-name     { color: #0550ae !important; }

.rv-pre .hljs-attr,
.rv-pre .hljs-attribute,
.rv-pre .hljs-variable         { color: #0550ae !important; }

.rv-pre .hljs-tag               { color: #116329 !important; }

.rv-pre .hljs-operator,
.rv-pre .hljs-punctuation      { color: #57606a !important; }

.rv-pre .hljs-params           { color: #24292f !important; }

.rv-pre .hljs-section          { color: #8250df !important; font-weight: 700; }

.rv-pre .hljs-meta             { color: #6e7781 !important; }

.rv-pre .hljs-regexp           { color: #0a3069 !important; }

.rv-pre .hljs-name             { color: #116329 !important; }

[data-bs-theme="dark"] .rv-pre .hljs-keyword,
[data-bs-theme="dark"] .rv-pre .hljs-selector-tag,
[data-bs-theme="dark"] .rv-pre .hljs-meta-keyword { color: #ff7b72 !important; }

[data-bs-theme="dark"] .rv-pre .hljs-string,
[data-bs-theme="dark"] .rv-pre .hljs-selector-attr,
[data-bs-theme="dark"] .rv-pre .hljs-selector-pseudo,
[data-bs-theme="dark"] .rv-pre .hljs-addition,
[data-bs-theme="dark"] .rv-pre .hljs-regexp        { color: #a5d6ff !important; }

[data-bs-theme="dark"] .rv-pre .hljs-number,
[data-bs-theme="dark"] .rv-pre .hljs-literal,
[data-bs-theme="dark"] .rv-pre .hljs-type,
[data-bs-theme="dark"] .rv-pre .hljs-built_in,
[data-bs-theme="dark"] .rv-pre .hljs-builtin-name,
[data-bs-theme="dark"] .rv-pre .hljs-attr,
[data-bs-theme="dark"] .rv-pre .hljs-attribute,
[data-bs-theme="dark"] .rv-pre .hljs-variable      { color: #79c0ff !important; }

[data-bs-theme="dark"] .rv-pre .hljs-comment,
[data-bs-theme="dark"] .rv-pre .hljs-quote,
[data-bs-theme="dark"] .rv-pre .hljs-meta          { color: #8b949e !important; }

[data-bs-theme="dark"] .rv-pre .hljs-function,
[data-bs-theme="dark"] .rv-pre .hljs-title,
[data-bs-theme="dark"] .rv-pre .hljs-section       { color: #d2a8ff !important; }

[data-bs-theme="dark"] .rv-pre .hljs-tag,
[data-bs-theme="dark"] .rv-pre .hljs-name          { color: #7ee787 !important; }

[data-bs-theme="dark"] .rv-pre .hljs-operator,
[data-bs-theme="dark"] .rv-pre .hljs-punctuation   { color: #8b949e !important; }

[data-bs-theme="dark"] .rv-pre .hljs-params        { color: #ffa657 !important; }

/*---TOOLBAR---*/
/* Search + format filter above the rule list (a vulnerability can be
   linked to 100+ rules, so browsing the raw list isn't practical). */

.rv-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.rv-toolbar-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}

.rv-toolbar-select {
    width: auto;
    min-width: 160px;
}

.rv-toolbar-select-sm {
    width: auto;
    min-width: 100px;
}

.rv-source-note {
    margin-left: auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.rv-source-note:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.rv-source-logo {
    display: inline-block;
    border-radius: 3px;
}

/*---SEARCH_MATCH---*/

.rv-match {
    background: #ff8c00;
    color: #1a1a1a;
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 700;
}

[data-bs-theme="dark"] .rv-match {
    background: #ffa733;
    color: #1a1a1a;
}