:root {
  --webiq-blue: #067aa5;
  --webiq-blue-dark: #07536f;
  --webiq-cyan: #13a6b4;
  --webiq-navy: #153140;
  --webiq-soft: #f2f9fb;
  --webiq-border: #d8e7ec;
  --webiq-muted: #647783;
  --vex-purple: #6f42c1;
  --vex-purple-soft: #f4effc;
  --bs-body-font-family: Roboto, Arial, Helvetica, sans-serif;
}

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  background: #f6f9fa;
  color: #18313c;
  font-size: .95rem;
}

.navbar {
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--webiq-border);
  backdrop-filter: blur(8px);
}

.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--webiq-blue) !important; }

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--webiq-cyan), var(--webiq-blue-dark));
  border-radius: .55rem 1rem .55rem 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(6,122,165,.18);
}

.brand-title { color: var(--webiq-navy); }
.brand-sub { font-size: .72rem; color: var(--webiq-muted); line-height: 1; }

.hero {
  background:
    linear-gradient(90deg, rgba(245,251,252,.99) 0%, rgba(245,251,252,.96) 42%, rgba(245,251,252,.22) 68%, rgba(245,251,252,.05) 100%),
    url('../img/hero.png') right center / 48% auto no-repeat;
    linear-gradient(135deg, #f3fbfc, #e5f4f7);
  min-height: 275px;
  border-bottom: 1px solid var(--webiq-border);
}

.hero-eyebrow {
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--webiq-blue);
}

.card {
  border-color: var(--webiq-border);
  box-shadow: 0 1px 2px rgba(20, 60, 72, .04);
}

.section-card .card-header {
  background: #fff;
  border-bottom-color: var(--webiq-border);
  font-weight: 700;
}

.kpi-card { min-height: 112px; }
.kpi-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: .8rem;
  background: #e8f6f8;
  color: var(--webiq-blue);
  font-size: 1.45rem;
  flex: 0 0 auto;
}
.kpi-icon.vex { background: var(--vex-purple-soft); color: var(--vex-purple); }

.text-webiq { color: var(--webiq-blue) !important; }
.bg-webiq { background: var(--webiq-blue) !important; color: #fff; }

.btn-webiq {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--webiq-blue);
  --bs-btn-border-color: var(--webiq-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--webiq-blue-dark);
  --bs-btn-hover-border-color: var(--webiq-blue-dark);
  --bs-btn-active-bg: var(--webiq-blue-dark);
  --bs-btn-active-border-color: var(--webiq-blue-dark);
}

.btn-outline-webiq {
  --bs-btn-color: var(--webiq-blue);
  --bs-btn-border-color: var(--webiq-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--webiq-blue);
  --bs-btn-hover-border-color: var(--webiq-blue);
  --bs-btn-active-bg: var(--webiq-blue-dark);
  --bs-btn-active-border-color: var(--webiq-blue-dark);
}

.badge-soft-primary {
  background: #e8f6f8;
  color: var(--webiq-blue-dark);
  border: 1px solid #c4e6ea;
}

.status-banner {
  background: linear-gradient(90deg, #eaf9f0, #f3fbf7);
  border: 1px solid #c7ead5;
}

.vex-highlight {
  border-color: #d8c9ef;
  background: linear-gradient(120deg, #fff, #fbf9fe);
}

.feature-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: .9rem;
  background: var(--vex-purple-soft);
  color: var(--vex-purple);
  font-size: 1.5rem;
}

.vex-label { color: var(--vex-purple) !important; }
.vex-facts { background: var(--vex-purple-soft); border: 1px solid #dfd1f4; }
.badge-vex { background: var(--vex-purple); color: #fff; }
.btn-vex { color: #fff; background: var(--vex-purple); border-color: var(--vex-purple); }
.btn-vex:hover { color: #fff; background: #59359b; border-color: #59359b; }
.alert-vex { background: var(--vex-purple-soft); border: 1px solid #ddcef2; color: #442a70; }
.vex-download { border-color: #d8c9ef; }
.vex-dot { background: var(--vex-purple) !important; }

.version-card { border-width: 1px; }
.version-card-preview { border-color: #e5b84b; background: linear-gradient(180deg, #fffdf7, #fff); }
.version-card .card-body { display: flex; flex-direction: column; }
.version-card .btn { margin-top: auto; align-self: flex-start; }
.version-status {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-radius: .65rem;
  padding: .65rem .75rem;
  font-size: .86rem;
  font-weight: 600;
}
.version-status.status-ok { background: #eaf9f0; color: #176b3a; border: 1px solid #c7ead5; }
.version-status.status-info { background: #e9f7fa; color: #075d70; border: 1px solid #c6e8ed; }
.version-status.status-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }
.version-status.status-preview { background: #fff4d6; color: #775600; border: 1px solid #f0d27a; }
.version-status .lucide { flex: 0 0 auto; }

.info-tile {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--webiq-border);
  border-radius: .75rem;
  background: #fbfdfe;
  height: 100%;
}
.info-tile > .lucide { color: var(--webiq-blue); flex: 0 0 auto; margin-top: .1rem; }

.sidebar-list .list-group-item {
  border-left: 0;
  border-right: 0;
  padding: .82rem .25rem;
  color: var(--webiq-blue-dark);
  background: transparent;
}
.sidebar-list .list-group-item:first-child { border-top: 0; }
.sidebar-list .list-group-item:last-child { border-bottom: 0; }

.download-card {
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.download-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(20,60,72,.08);
}

.timeline { position: relative; padding-left: 1.3rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: #dce7eb;
}
.timeline-item { position: relative; padding-bottom: .9rem; }
.timeline-dot {
  position: absolute;
  left: -1.14rem;
  top: .3rem;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--webiq-blue);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #cbdadd;
}

.footer { background: var(--webiq-navy); color: #cbd9de; }
.footer a { color: #edf5f7; text-decoration: none; }
.table > :not(caption) > * > * { padding-top: .72rem; padding-bottom: .72rem; }
.btn, .form-control, .form-select { border-radius: .6rem; }

.lucide { width: 1em; height: 1em; stroke-width: 2; vertical-align: -0.125em; }
.kpi-icon .lucide { width: 1.35em; height: 1.35em; }

@media (max-width: 991.98px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(245,251,252,.99), rgba(245,251,252,.94)),
      url('../img/hero.jpg') center / cover no-repeat;
    min-height: 310px;
  }
}

/* Twig/PHP application additions */
.version-hero {
  background: linear-gradient(135deg, #f8fcfd 0%, #ffffff 70%);
}

.api-highlight {
  border-color: #bcdfe7;
  background: linear-gradient(120deg, #fff, #f4fbfc);
}

.api-icon {
  background: #e8f6f8;
  color: var(--webiq-blue);
}

.input-group .btn .lucide {
  width: 1rem;
  height: 1rem;
}

.alert .lucide {
  flex: 0 0 auto;
}

code, pre, .font-monospace {
  font-family: "Roboto Mono", Consolas, "Courier New", monospace;
}


/* Rendered release documentation from changelog.md, releasenotes.md and knownissues.md */
.markdown-content {
  color: #263d47;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.markdown-content > :first-child { margin-top: 0; }
.markdown-content > :last-child { margin-bottom: 0; }

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  color: var(--webiq-navy);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.35rem;
  margin-bottom: .65rem;
}

.markdown-content h1 { font-size: 1.55rem; }
.markdown-content h2 { font-size: 1.3rem; padding-bottom: .35rem; border-bottom: 1px solid var(--webiq-border); }
.markdown-content h3 { font-size: 1.12rem; }

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre,
.markdown-content table {
  margin-bottom: 1rem;
}

.markdown-content ul,
.markdown-content ol {
  padding-left: 1.5rem;
}

.markdown-content li + li { margin-top: .3rem; }

.markdown-content a {
  color: var(--webiq-blue);
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}

.markdown-content blockquote {
  border-left: .25rem solid var(--webiq-cyan);
  background: #f4fbfc;
  color: #405d68;
  padding: .75rem 1rem;
  border-radius: 0 .5rem .5rem 0;
}

.markdown-content code {
  background: #eef4f6;
  color: #173b49;
  border-radius: .3rem;
  padding: .12rem .3rem;
}

.markdown-content pre {
  background: #132a35;
  color: #edf7fa;
  border-radius: .65rem;
  padding: 1rem;
  overflow-x: auto;
}

.markdown-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid var(--webiq-border);
  padding: .55rem .7rem;
  vertical-align: top;
}

.markdown-content th {
  background: #f3f8fa;
  color: var(--webiq-navy);
}

.markdown-content hr {
  border: 0;
  border-top: 1px solid var(--webiq-border);
  margin: 1.5rem 0;
}

/* Vulnerability severity badges. Ordering is handled server-side in VersionRepository. */
.severity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.4rem;
  min-height: 1.75rem;
  line-height: 1;
  letter-spacing: .02em;
  font-weight: 700;
  border: 1px solid transparent;
  vertical-align: middle;
}
.severity-critical { background: #7f1d1d; color: #fff; border-color: #641717; }
.severity-high { background: #dc3545; color: #fff; border-color: #b02a37; }
.severity-medium { background: #ffc107; color: #3d2f00; border-color: #d39e00; }
.severity-low { background: #0dcaf0; color: #073642; border-color: #0aa2c0; }
.severity-info { background: #0d6efd; color: #fff; border-color: #0a58ca; }
.severity-none { background: #6c757d; color: #fff; border-color: #565e64; }
.severity-unknown { background: #f1f3f5; color: #495057; border-color: #ced4da; }


/* External-link marker next to CVE/GHSA identifiers. */
.external-link-icon {
  width: .85rem;
  height: .85rem;
  vertical-align: -0.08em;
}

.version-security-summary { min-height: 1.65rem; }
.version-security-summary svg { width: 1rem; height: 1rem; }
.version-security-summary .severity-badge { font-size: .68rem; padding: .28rem .45rem; }


/* Security detail page refinements. */
.vulnerability-component-summary-table {
  padding: .5rem 1rem 1rem;
}

.vulnerability-section-title {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 700;
}

.vulnerability-section-header > svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
}

.security-exploitation-banner {
  border-width: 1px;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .04);
}

.security-exploitation-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: .1rem;
}

.security-exploitation-banner-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

@media (max-width: 575.98px) {
  .vulnerability-component-summary-table {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .vulnerability-section-title {
    font-size: 1.08rem;
  }
}


/* Compact vulnerability distribution on version overview cards */
.version-severity-counts .severity-badge {
  font-size: .66rem;
  min-height: 1rem;
  padding: 0.2rem 0 0.1rem 0;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.version-exploitation-state {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .35rem;
  border-radius: .55rem;
  padding: .38rem .55rem;
  font-weight: 600;
  line-height: 1.25;
}

.version-exploitation-state svg {
  width: .95rem;
  height: .95rem;
  flex: 0 0 auto;
}

.version-exploitation-state-ok {
  color: #146c43;
  background: #eaf8f0;
  border: 1px solid #badbcc;
}

.version-exploitation-state-danger {
  color: #842029;
  background: #f8d7da;
  border: 1px solid #f5c2c7;
}

/* Security Advisory pages */
.advisory-card {
  transition: transform .15s ease, box-shadow .15s ease;
}

.advisory-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(20, 60, 120, .08);
}

.advisory-markdown > :first-child {
  margin-top: 0;
}


/* Vulnerability reporting form */
.report-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#proofOfConcept {
  min-height: 9rem;
}

/* Full version archive */
.all-versions-table {
  min-width: 1180px;
}
.all-versions-table th {
  white-space: nowrap;
}
.all-versions-security-cell {
  min-width: 290px;
  width: 32%;
}
.all-versions-summary-cell {
  min-width: 240px;
  max-width: 420px;
}
.all-versions-table .version-exploitation-state {
  margin-top: 0;
}

#webiqLogo {
  height:70px;
}