/* ==========================================================================
   REWE Group Analytics Radar — Corporate Identity Stylesheet

   The site uses Calibri as its interim typeface. Calibri is a proprietary
   system font, so it is named in the stack and used wherever the OS provides
   it (Windows / MS Office). For every other visitor, Carlito — a free,
   SIL OFL licensed, metric-compatible clone of Calibri — is self-hosted below
   as the first fallback, keeping the rendering near-identical; the system
   sans-serif chain is the last-ditch fallback if the webfont fails to load.
   ========================================================================== */

/* --- Self-hosted Carlito webfont (SIL OFL licensed, Calibri metric clone) - */
@font-face {
  font-family: "Carlito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/carlito-400.woff2") format("woff2");
}
@font-face {
  font-family: "Carlito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/carlito-700.woff2") format("woff2");
}

:root {
  /* --- Fonts: Calibri with a self-hosted Carlito fallback --- */
  --font-main: Calibri, "Carlito", Arial, Helvetica, sans-serif; /* main font */
  --font-sub: Calibri, "Carlito", Arial, Helvetica, sans-serif;  /* sub font */
  --font-family: var(--font-main); /* default body font */

  /* --- Brand palette: main colors --- */
  --color-grey: #706f6f;
  --color-red: #cd1719;
  --color-yellow: #ffdd00;
  --color-maroon: #8c0e28;

  /* --- Brand palette: sub colors --- */
  --color-taupe: #9a8c81;
  --color-teal: #00a07a;

  /* --- Semantic roles --- */
  --color-primary: var(--color-red);    /* links, nav, primary accents */
  --color-secondary: var(--color-grey); /* secondary text, footer */

  /* --- Recommendation level colors (mirrors EMPFEHLUNG_COLOR_MAP in Python) --- */
  --color-adopt: #219258;
  --color-trial: #1960fb;
  --color-assess: #c38e09;
  --color-hold: #bb2222;
  --color-unknown: #505b73;

  /* --- Surfaces / text --- */
  --color-page: #f5f5f6;   /* page background behind cards */
  --color-surface: #ffffff; /* cards, header, nav */
  --color-text: #1a1a1a;
  --color-muted: #6b6b6b;
  --color-border: #e3e1e0;
  --color-nav-bg: #ffffff;

  /* --- Design tokens --- */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --content-max: 1600px;
}

/* --------------------------------------------------------------------------
   Base layout
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-page);
  line-height: 1.5;
  /* Prevent the full-bleed radar/table layout from triggering a horizontal
     scrollbar (its negative margins are based on 100vw, which includes the
     vertical scrollbar's width). */
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-family: var(--font-sub);
  color: var(--color-primary);
}

a {
  color: var(--color-primary);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.5rem;
  background: var(--color-surface);
  border-top: 4px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.site-header .logos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-header img {
  height: 44px;
  width: auto;
}

.site-title {
  font-family: var(--font-sub);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-nav a {
  text-decoration: none;
  color: var(--color-secondary);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-nav a:hover {
  color: var(--color-primary);
  background: rgba(205, 23, 25, 0.08);
}

/* --------------------------------------------------------------------------
   Main + cards
   -------------------------------------------------------------------------- */
.site-main {
  padding: 1.75rem 1.5rem;
  max-width: var(--content-max);
  margin: 0 auto;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.site-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-secondary);
  font-size: 0.85rem;
  text-align: center;
}

.footer-nav {
  margin-bottom: 0.4rem;
}

.footer-nav a {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Shared row layouts (index page)
   The page is built out of two flex rows that share the same horizontal
   geometry: a fixed-width left card (matching the radar's 800px plot plus
   the card's 2 * 1.5rem padding) and a flexible right card that fills the
   remaining space. Both rows break out of `.site-main`'s centered max-width
   so the left card sits 1.5rem from the viewport's left edge, and both wrap
   into a single stacked column when the viewport is too narrow.
   -------------------------------------------------------------------------- */
.radar-table-layout,
.intro-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: stretch;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.intro-row {
  /* Sits below the radar row; add the standard inter-card spacing. */
  margin-top: 1.75rem;
}

.radar-section,
.intro-main-section {
  /* Left card: fixed width = radar plot 800px + 2 * 1.5rem card padding. */
  flex: 0 0 auto;
}

.intro-main-section {
  width: calc(800px + 3rem);
  max-width: 100%;
}

.radar-section {
  overflow-x: auto;
}

.table-section,
.intro-scope-section {
  /* Right card: grows to fill the remaining horizontal space; wraps below
     the left card on narrow viewports. Flex-basis is the minimum width we
     want before wrapping. */
  flex: 1 1 32rem;
  min-width: 0;
}

.table-section {
  /* Lay out as a column so .table-scroll can absorb the remaining vertical
     space when this card stretches to match the radar card's height. */
  display: flex;
  flex-direction: column;
}

.radar-section h2,
.table-section h2,
.intro-main-section h2,
.intro-scope-section h2 {
  margin-top: 0;
}

/* --- Recommendation level key (ties radar legend to the table badges) --- */
.level-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.level-key .level-key-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-right: 0.25rem;
}

/* --------------------------------------------------------------------------
   Recommendation badges (used in the table and the level key)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-adopt {
  background: var(--color-adopt);
}

.badge-trial {
  background: var(--color-trial);
}

.badge-assess {
  background: var(--color-assess);
}

.badge-hold {
  background: var(--color-hold);
}

.badge-unknown {
  background: var(--color-unknown);
}

/* --------------------------------------------------------------------------
   Category pills (table) — subtle per-category background colours
   -------------------------------------------------------------------------- */
.category-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  border: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Technology table
   -------------------------------------------------------------------------- */
.table-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  align-items: flex-end;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.table-controls label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
  gap: 0.25rem;
}

.table-controls select,
.table-controls input {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  min-width: 200px;
  background: var(--color-surface);
}

table.tech-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
}

/* Keep the wide table inside its card; scroll horizontally if it cannot fit.
   When stacked below the radar, a capped height keeps the bottom horizontal
   scrollbar easy to reach. When the table card sits beside the radar, the
   card stretches to match the radar's height (see below) and this scroll
   area absorbs the remaining vertical space inside the card. */
.table-scroll {
  overflow: auto;
  max-height: 70vh;
}

@media (min-width: 1400px) {
  .table-scroll {
    /* Side-by-side mode: fill the stretched card height without forcing the
       card to grow taller than the radar. `flex-basis: 0` + `min-height: 0`
       stops the table's intrinsic content height from leaking into the
       parent card / row sizing. */
    max-height: none;
    flex: 1 1 0;
    min-height: 0;
  }
}

/* Let the description column wrap (and break long words) so the table fits the
   column beside the radar; cap its width so the box stays a sensible size. */
table.tech-table td:nth-child(4) {
  min-width: 18rem;
  max-width: 32rem;
  overflow-wrap: anywhere;
}

table.tech-table th,
table.tech-table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

table.tech-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-grey);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

table.tech-table tbody tr:nth-child(even) {
  background: var(--color-page);
}

table.tech-table tbody tr:hover {
  background: rgba(205, 23, 25, 0.05);
}

/* Linked-row state: applied when the matching radar blip is hovered. */
table.tech-table tbody tr.is-linked {
  background: rgba(205, 23, 25, 0.12);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

table.tech-table tr.is-hidden {
  display: none;
}

table.tech-table a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

table.tech-table a:hover {
  text-decoration: underline;
}

.table-empty {
  padding: 1rem;
  color: var(--color-secondary);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Confluence about content — scoped reset to neutralise inline Confluence styles
   -------------------------------------------------------------------------- */
.confluence-content {
  max-width: 72ch;
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: 1.7;
}

.confluence-content *:not(.badge) {
  /* Neutralise Confluence-injected colors/backgrounds while keeping structure.
     Badges are excluded so recommendation labels keep their radar colours. */
  background: transparent !important;
  max-width: 100%;
}

.confluence-content h1,
.confluence-content h2,
.confluence-content h3 {
  color: var(--color-primary);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.confluence-content p {
  margin: 0.6rem 0;
}

.confluence-content a {
  color: var(--color-primary);
}

.confluence-content img {
  height: auto;
}

.confluence-content table {
  border-collapse: collapse;
}

.confluence-content table td,
.confluence-content table th {
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
}