/* Self-hosted fonts shared by the CVE portal and the CVE dashboard. All the
   fonts are licensed under the SIL Open Font License 1.1 (see the OFL-*.txt
   files) and are the latin subset of the @fontsource packages. The URLs are
   relative to the page or stylesheet, where the files are copied to `fonts/`. */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/poppins-latin-300-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto-mono-latin-500-normal.woff2') format('woff2');
}

/* CVE Scans portal — shared styles for the index and per-release pages. The K3s portal
   overrides some of them in style-k3s.css.
   Design system inspired by the Trivy scan report layout. Supports light/dark themes
   via the data-theme attribute on <html>. */

:root {
  --header-height:     55px;
  --accent:           #3D98D3;
  --accent-strong:    #2b7ab5;
  --body-bg:          #FFFFFF;
  --body-text:        #141419;
  --muted:            #6C6C76;
  --border:           #DCDEE7;
  --box-bg:           #F4F5FA;
  --header-bg:        #FFFFFF;
  --header-border:    #DCDEE7;
  --link:             #1F67DB;
  --code-bg:          #F4F5FA;
  --table-header-bg:  #F4F5FA;
  --table-hover-bg:   #EEEFF4;

  /* Severity badges */
  --sev-critical-bg:     #B13333;
  --sev-critical-text:   #FFFFFF;
  --sev-critical-border: #7C0015;
  --sev-high-bg:         #E45C1E;
  --sev-high-text:       #FFFFFF;
  --sev-high-border:     #B03A0A;
  --sev-medium-bg:       #FFE47A;
  --sev-medium-text:     #473900;
  --sev-medium-border:   #E5A200;
  --sev-low-bg:          #DFE6F2;
  --sev-low-text:        #1F67DB;
  --sev-low-border:      #2673A6;
  --sev-none-bg:         #EDEFF3;
  --sev-none-text:       #6C6C76;
  --sev-none-border:     #DCDEE7;

  /* Status badges */
  --status-affected-bg:     #FBE4DC;
  --status-affected-text:   #9A2B0A;
  --status-affected-border: #E9A88F;
  --status-clear-bg:        #E7F4EC;
  --status-clear-text:      #1A7A41;
  --status-clear-border:    #A6D9BB;
}

:root[data-theme="dark"] {
  --accent:           #5B9BFF;
  --accent-strong:    #7FB2FF;
  --body-bg:          #16171C;
  --body-text:        #E6E6EC;
  --muted:            #9B9BA6;
  --border:           #2D2F39;
  --box-bg:           #1E1F26;
  --header-bg:        #1A1B21;
  --header-border:    #2D2F39;
  --link:             #5B9BFF;
  --code-bg:          #22232B;
  --table-header-bg:  #22232B;
  --table-hover-bg:   #24262F;

  --sev-medium-bg:       #F2C94C;
  --sev-medium-text:     #3A2E00;
  --sev-low-bg:          #1E2A40;
  --sev-low-text:        #8FB6FF;
  --sev-low-border:      #2673A6;
  --sev-none-bg:         #2A2C35;
  --sev-none-text:       #9B9BA6;
  --sev-none-border:     #3A3C46;

  --status-affected-bg:     #3A1E14;
  --status-affected-text:   #F0A88C;
  --status-affected-border: #6B3320;
  --status-clear-bg:        #15291E;
  --status-clear-text:      #5FCF8C;
  --status-clear-border:    #1F4D34;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--body-bg);
  color: var(--body-text);
  font-family: 'Lato', arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* ---- Header ---- */
.page-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  padding: 0 32px;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.page-header .brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--body-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-header .brand svg, .page-header .brand img { width: 28px; height: 60px; flex-shrink: 0; }
.page-header .brand svg.brand-logo, .page-header .brand img.brand-logo { width: auto; height: 60px; }
.page-header .subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-left: 4px;
}
:root[data-theme="dark"] .page-header { box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* ---- Theme toggle ---- */
.theme-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  background: var(--box-bg);
  color: var(--body-text);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.theme-toggle:hover { border-color: var(--link); }
.theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline; }

/* ---- Layout ---- */
.page-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}
body.index .page-content { max-width: 980px; }

/* ---- Release pages: wider table layout ---- */
body:not(.index) #cves_table {
  width: 90vw;
  max-width: none;
  margin-left: calc((100% - 90vw) / 2);
  margin-right: calc((100% - 90vw) / 2);
}

/* ---- Headings ---- */
h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--body-text);
  margin-top: 0;
}
h1 {
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
h2 { font-size: 17px; margin-top: 32px; margin-bottom: 10px; }
h3 { font-size: 15px; margin-top: 24px; margin-bottom: 8px; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---- "How to use this page" callout ---- */
.callout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--box-bg);
  padding: 18px 22px 14px;
  margin: 4px 0 26px;
}
.callout h2, .callout h3 { margin-top: 0; }
.callout ul { margin: 8px 0 4px; padding-left: 20px; }
.callout li { margin-bottom: 7px; color: var(--body-text); }
.callout li:last-child { margin-bottom: 0; }

/* ---- Collapsible callout (release pages only) ---- */
.callout-collapsible {
  position: relative;
}
.callout-collapsible h3 {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.callout-collapsible h3::before {
  content: "▼";
  font-size: 10px;
  transition: transform 0.2s ease;
  display: inline-block;
}
.callout-collapsible.collapsed h3::before {
  transform: rotate(-90deg);
}
.callout-collapsible .callout-content {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.callout-collapsible.collapsed .callout-content {
  max-height: 0;
}

/* ---- Search bar ---- */
.search-box { margin: 4px 0 14px; }
.search-box b { font-family: 'Poppins', sans-serif; font-size: 13px; }
input[type="text"] {
  min-width: 320px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--body-bg);
  color: var(--body-text);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  outline: none;
}
input[type="text"]:focus { border-color: var(--link); }
#search_count { color: var(--muted); font-size: 13px; margin: 6px 0 0; }

/* ---- Tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-size: 13px;
  background: var(--body-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: clip; /* unlike hidden, it keeps the sticky headers working */
}
th {
  padding: 10px 14px;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--border);
}
td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  word-break: break-word;
}
tbody tr:last-child td, tr:last-child td { border-bottom: none; }
tr:hover { background: var(--table-hover-bg); }
#cves_table th { cursor: pointer; position: sticky; top: var(--header-height); z-index: 10; }
#cves_table th:hover { color: var(--link); }
/* Stacked up and down arrows: the sorted one gets the accent color. */
#cves_table th::after {
  content: "\25B2\A\25BC";
  white-space: pre;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  font-size: 8px;
  line-height: 9px;
  --up: var(--muted);
  --down: var(--muted);
  background: linear-gradient(var(--up) 50%, var(--down) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .5;
}
#cves_table th[aria-sort] { color: var(--link); }
#cves_table th[aria-sort]::after { opacity: 1; }
#cves_table th[aria-sort="ascending"]::after { --up: var(--link); }
#cves_table th[aria-sort="descending"]::after { --down: var(--link); }
.cve-stats table { width: auto; min-width: 460px; margin-left: auto; margin-right: auto; }
.cve-stats td { vertical-align: middle; }
.trend { width: 140px; height: 28px; }
.trend-up { color: var(--sev-high-bg); font-weight: 600; }
.trend-down { color: var(--status-clear-text); font-weight: 600; }
.trend-flat { color: var(--muted); }
.not_affected { color: var(--muted); }
.not_affected a { color: var(--muted); }

/* ---- Column width adjustments ---- */
#cves_table th:nth-child(1),
#cves_table td:nth-child(1) { width: 20%; min-width: 180px; }
#cves_table th:nth-child(9),
#cves_table td:nth-child(9) { width: 12%; max-width: 200px; }


/* ---- Severity badges ---- */
.sev {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sev-CRITICAL { background: var(--sev-critical-bg); color: var(--sev-critical-text); border-color: var(--sev-critical-border); }
.sev-HIGH     { background: var(--sev-high-bg);     color: var(--sev-high-text);     border-color: var(--sev-high-border);     }
.sev-MEDIUM   { background: var(--sev-medium-bg);   color: var(--sev-medium-text);   border-color: var(--sev-medium-border);   }
.sev-LOW      { background: var(--sev-low-bg);      color: var(--sev-low-text);      border-color: var(--sev-low-border);      }
.sev-NONE, .sev-UNKNOWN { background: var(--sev-none-bg); color: var(--sev-none-text); border-color: var(--sev-none-border); }

/* ---- Status badges ---- */
.status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-affected { background: var(--status-affected-bg); color: var(--status-affected-text); border-color: var(--status-affected-border); }
.status-clear    { background: var(--status-clear-bg);    color: var(--status-clear-text);    border-color: var(--status-clear-border);    }

/* ---- Re-scored severity tooltip ---- */
.cve_sev { position: relative; display: inline-flex; cursor: help; }
.cve_sev:hover .cve_sev_note { visibility: visible; opacity: 1; }
.cve_sev .cve_sev_note {
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease;
  width: 280px;
  background: var(--body-text);
  color: var(--body-bg);
  text-align: center;
  font-weight: 400;
  letter-spacing: normal;
  border-radius: 6px;
  padding: 8px 10px;
  position: absolute;
  z-index: 20;
  bottom: 150%;
  left: 50%;
  margin-left: -140px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  white-space: normal;
  word-wrap: break-word;
}
.cve_sev .cve_sev_note::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--body-text) transparent transparent transparent;
}

/* ---- Inline code ---- */
code {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---- Footer ---- */
footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
footer a { color: var(--link); }

/* ---- Hide VEXed (not affected) toggle ---- */
.vexed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--body-text);
  margin: 2px 0 6px;
}
.vexed-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.vexed-switch {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border);
  transition: background .15s ease;
}
.vexed-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.vexed-toggle input:checked ~ .vexed-switch { background: var(--link); }
.vexed-toggle input:checked ~ .vexed-switch::after { transform: translateX(18px); }
.vexed-toggle input:focus-visible ~ .vexed-switch { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---- image index card ---- */
#image-index { margin: 4px 0 18px; }
.image-index-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--box-bg);
  overflow: hidden;
}
.image-index-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--body-text);
}
.image-index-card > summary::-webkit-details-marker { display: none; }
.image-index-card > summary .toggle-label::before {
  content: "\25be";
  display: inline-block;
  margin-right: 8px;
  transition: transform .15s ease;
}
.image-index-card:not([open]) > summary .toggle-label::before { transform: rotate(-90deg); }
.image-index-count {
  background: var(--link);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 9px;
}
.image-index-list {
  border-top: 1px solid var(--border);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 6px;
}
.image-index-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--body-bg);
  text-decoration: none;
  color: var(--body-text);
}
.image-index-item:hover { border-color: var(--link); text-decoration: none; }
.image-index-item code {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  word-break: break-all;
  color: var(--body-text);
}
.image-index-badges { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.image-index-badges .sev, .image-index-badges .status { font-size: 10px; padding: 1px 6px; }

/* Give anchored rows a little breathing room below the sticky header on jump. */
#cves_table tr[id] { scroll-margin-top: calc(var(--header-height) + 15px); }