/*
 * V2 Home Page Styles
 * Supplements Tailwind utility classes with custom animations and
 * component-specific styles that aren't practical as utilities.
 */

/* ── Smooth anchor scroll ──────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── SVG icon color inheritance ─────────────────────────────────── */
.icon-brand-blue {
  --fill-0: #2335f4;
}

.icon-dark-blue {
  --fill-0: #0a1247;
}

/* ══════════════════════════════════════════════════════════════════
   V2 AG-Grid overrides
   Scoped under .v2-beschluesse so old pages are never affected.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hide the <h3> heading that list.html renders ────────────────
     (the v2 template provides its own <h2>)                       */
.v2-beschluesse>div>h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 42px;
  color: #0a1247;
  margin: 0 0 16px;
}

/* ── Grid wrapper ────────────────────────────────────────────────── */
.v2-beschluesse .ag-theme-quartz {
  --ag-font-size: 14px;
  --ag-foreground-color: #0a1247;
  --ag-background-color: #ffffff;
  --ag-odd-row-background-color: #ffffff;
  --ag-header-height: 44px;
  --ag-header-foreground-color: #0a1247;
  --ag-header-background-color: #eaedff;
  --ag-row-border-style: solid;
  --ag-row-border-width: 1px;
  --ag-row-border-color: #ebeeff;
  --ag-wrapper-border-radius: 4px;
  --ag-grid-size: 4px;
  --ag-icon-font-code-menu: 'grip';
  --ag-icon-font-code-columns: 'grip';
  --ag-active-color: #2335f4;
  --ag-selected-row-background-color: rgba(234, 237, 255, 0.5);
  --ag-row-hover-color: rgba(234, 237, 255, 0.4);
  --ag-menu-background-color: #eaedff;
  --ag-side-button-selected-background-color: #eaedff;
  --ag-header-column-resize-handle-color: #c4c9f5;
}

.v2-beschluesse .ag-root-wrapper {
  border: none;
  border-radius: 4px;
}

/* ── Header cells ────────────────────────────────────────────────── */
.v2-beschluesse .ag-header {
  border-bottom: none;
}

.v2-beschluesse .ag-header-cell {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
}

/* ── Data rows ───────────────────────────────────────────────────── */
.v2-beschluesse .ag-row {
  background: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.v2-beschluesse .ag-row-odd {
  background: #ffffff;
}

/* ── Cell content ────────────────────────────────────────────────── */
.v2-beschluesse .ag-cell {
  color: #0a1247;
}

.v2-beschluesse .ag-cell a {
  color: #2335f4;
  text-decoration: none;
}

.v2-beschluesse .ag-cell a:hover {
  text-decoration: underline;
}

/* PDF link icon
   ────────────────────────────────────────────────────────────────
   Mirrors the v1 ``.ag-cell a[href $='.pdf']`` rule from
   ``css/amnog/ag-grid-theme.css``. v2 deliberately doesn't load the
   v1 grid theme, so that rule never applied and the small red PDF
   badge that appears next to "Decision file no." (LSG/BSG) and
   "Arbitration file no." / "Court ruling" (Arbitration) was
   missing. We re-add it scoped to ``.v2-beschluesse`` so it only
   affects the new-design grids and matches v1 visually (same
   asset, same 30px left-pad). */
.v2-beschluesse .ag-cell a[href$='.pdf'],
.v2-beschluesse .ag-cell a[href$='.PDF'] {
  /* ``display: inline-block`` mirrors v1's ``.ag-cell a`` rule (which
     v2 doesn't inherit because we don't load v1's ag-grid-theme.css).
     Without it the anchor stays inline, the background paints per
     line-box, and on multi-line cells (e.g. ``3 P 4-24<br/>Analysis
     (PDF)``) the icon ends up squashed into the line-height instead
     of sitting next to the text block.

     ``background-size`` is pinned to the icon's natural 24x24 because
     the AG-Grid Quartz theme defines a global ``background-size``
     somewhere in its bundle that otherwise stretches the gif to fit
     the cell. */
  display: inline-block;
  background: url("../../images/fileicons/pdf.gif") no-repeat 0 center;
  background-size: 24px 24px;
  padding-left: 30px;
  min-height: 24px;
}

/* ── Date highlight override ─────────────────────────────────────
     Old design wraps current-month dates in .highlight with special
     styling; in v2 we just show them normally.                     */
.v2-beschluesse .highlight {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* ── Status bar ──────────────────────────────────────────────────── */
.v2-beschluesse .ag-status-bar {
  background: #ffffff;
  border-top: 1px solid #ebeeff;
  padding-left: 0;
}

.v2-beschluesse .ag-status-name-value,
.v2-beschluesse .ag-status-name-value-value {
  color: #0a1247;
  font-family: "Inter", sans-serif;
}

/* ── Header menu / filter popups ─────────────────────────────────── */
.v2-beschluesse .ag-select-list,
.v2-beschluesse .ag-picker-field-wrapper {
  background: #eaedff;
}

.v2-beschluesse .ag-tab-selected,
.v2-beschluesse .ag-compact-menu-option-active,
.v2-beschluesse .ag-menu-option-active {
  background: #d5daff;
}

.v2-beschluesse .ag-filter-apply-panel-button {
  border-color: #2335f4 !important;
  background-color: #eaedff !important;
  color: #0a1247;
}

.v2-beschluesse .ag-filter-apply-panel-button:hover {
  background-color: #2335f4 !important;
  color: #ffffff;
}

/* ── Sidebar (column tool panel) ─────────────────────────────────── */
.v2-beschluesse .ag-side-button {
  color: #0a1247;
}

.v2-beschluesse .ag-toggle-button-input-wrapper {
  border-color: #c4c9f5;
  background: #c4c9f5;
}

/* ── Drag ghost ──────────────────────────────────────────────────
     AG-Grid appends this element directly to <body>, outside the
     .v2-beschluesse container, so we scope via .v2-page on <body>. */
.v2-page>.ag-dnd-ghost {
  background: #eaedff !important;
  color: #0a1247;
}

/* ── Benefit pill chips ──────────────────────────────────────────── */
.v2-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 4px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}

.v2-chip-text {
  display: inline;
}

/* ── Orphan-status sub-pill inside the benefit chip ──────────────
     Inherits the chip's text colour so it harmonises with each
     benefit hue, and uses a subtle dark wash for the background so
     it stays legible regardless of the surrounding chip colour.   */
.v2-chip-orphan {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
}

/* ── Icon colours ────────────────────────────────────────────────── */
.v2-beschluesse .ag-icon-tree-closed,
.v2-beschluesse .ag-icon-tree-open {
  color: #2335f4;
}

/* ──────────────────────────────────────────────────────────────────
   AG-grid quick-filter (search) and Excel-export controls
   Figma:
     Search field  – node 168:647 (Input / Default with leftIcon)
     Export button – node 161:1279 (Button / Primary / SM / Default)
   The HTML comes from ``include/v2/aggrid/aggrid.html`` and is
   only rendered for authenticated users; v1 stylesheet
   (``ag-grid-theme.css``) is intentionally NOT loaded on v2 pages,
   so these rules fully define the look.
   ────────────────────────────────────────────────────────────── */

/* Layout: search left, export-button right, both above the grid. */
.v2-beschluesse .quickfilter {
  float: none;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 700px;
  margin: 0 12px 12px 0;
}

.v2-beschluesse .configButtons {
  float: right;
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px 12px;
}

/* Hide the "Filters" label visually but keep it for screen readers
   (Figma uses a placeholder-only input; no inline label).         */
.v2-beschluesse .quickfilter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* External-filter dropdowns (Year / Quarter) used on the AM-RL
   Appendix XIIa "Combination discounts" page. They live inside the
   same ``.quickfilter`` row as the search input but render as
   ``<select>`` elements with their own ``.selectButton`` /
   ``.selectButton-label`` classes (see
   ``include/v2/aggrid/aggrid.html`` and the v1 partial it mirrors).
   We grow the row to fit the additional dropdowns and style the
   controls to match the v2 search field's visual language so the
   filter row reads as a coherent set.

   The defaults above set the .quickfilter to ``width: 100%; max-width:
   404px;`` so a lone search field renders at a sensible width. With
   the dropdowns present we lift the cap and switch the row to
   ``width: auto`` so it sizes to its contents and leaves room beside
   it for the floated ``.configButtons`` (Excel export). The search
   ``input`` inside this row also drops its default ``width: 100%``
   in favour of a fixed-but-shrinkable basis so the dropdowns aren't
   squeezed off-screen.

   ``:has(.selectButton)`` is supported in all current evergreen
   browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */
.v2-beschluesse .quickfilter:has(.selectButton) {
  width: auto;
  max-width: none;
  flex-wrap: nowrap;
  gap: 8px;
}

.v2-beschluesse .quickfilter:has(.selectButton) input {
  width: 280px;
  flex: 1 1 220px;
  min-width: 180px;
}

/* The label sits inline next to its dropdown - undo the ``sr-only``
   pattern applied above to the .quickfilter-label sibling. */
.v2-beschluesse .selectButton-label {
  position: static;
  width: auto;
  height: auto;
  padding: 0 4px 0 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #2b2b2b;
}

/* Native <select> styled to match the v2 search field (44px tall,
   1px ds-grey border, 4px radius, brand-blue focus ring). The chevron
   is an inline SVG so we don't need to ship another asset. */
.v2-beschluesse .selectButton {
  height: 44px;
  padding: 0 32px 0 12px;
  margin: 0;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23848484' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #2b2b2b;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
}

.v2-beschluesse .selectButton:focus {
  outline: none;
  border-color: #2335f4;
  box-shadow: 0 0 0 2px rgba(35, 53, 244, 0.15);
}

/* Search field — Figma 168:647 */
.v2-beschluesse .quickfilter input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 44px;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  background-color: #ffffff;
  background-image: url("../../images/v2/icons/magnifying-glass.svg");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 18px 18px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #2b2b2b;
  box-sizing: border-box;
}

.v2-beschluesse .quickfilter input::placeholder {
  color: #848484;
}

.v2-beschluesse .quickfilter input:focus {
  outline: none;
  border-color: #2335f4;
  box-shadow: 0 0 0 2px rgba(35, 53, 244, 0.15);
}

/* Hide the real ``<input type="button">`` (the ``<label for="export">``
   becomes the visible button - clicking the label fires a click
   event on the labelled control, so the AG-grid export handler
   wired to ``#export`` still runs). */
.v2-beschluesse .configButton {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Export button — Figma 161:1259 (Primary / M / Default). */
.v2-beschluesse .configButton-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  background-color: #2335f4;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.v2-beschluesse .configButton-label:hover {
  background-color: #1f2dc7;
}

.v2-beschluesse .configButton-label:focus-visible,
.v2-beschluesse .configButton:focus-visible+.configButton-label {
  outline: none;
  box-shadow: 0 0 0 3px rgba(35, 53, 244, 0.3);
}

/* V2 Interactive Analysis (pivottable.js) overrides have moved to
   ``css/v2/pivot.css`` - it must load *after* ``css/amnog/pivot.css``
   to win same-specificity rules, and ``home.css`` is loaded by
   ``base_v2.html`` before the per-page ``extra_css`` block. The v2
   pivot templates pull in ``css/v2/pivot.css`` themselves. */

/* ══════════════════════════════════════════════════════════════════
   V2 rich-text body content
   Applied to the wrappers that render Wagtail ``RichTextField`` HTML
   on authenticated v2 pages (``page.heading``, ``page.body``, ...).
   Centralises the prose styling so individual page templates don't
   each maintain their own copy of the same arbitrary-variant list -
   the previous per-template approach styled only ``h2`` and ``a``,
   leaving paragraphs, lists, headings (``h3``), and inline emphasis
   to render with browser defaults (i.e. unstyled).

   Defaults are tuned for the editorial content that the bootstrap
   script seeds (TYPO3-imported HTML), which mixes paragraphs,
   bulleted/numbered lists, ``h2``/``h3`` sub-headings, ``<strong>``
   /``<em>`` emphasis, links, and TYPO3 wrapper divs (``.ce-textpic``,
   ``.ce-bodytext``, ``.ce-gallery``).
   ══════════════════════════════════════════════════════════════════ */
.v2-rich-content {
  color: #2b2b2b;
  /* ds-dark-grey-9 */
  font-size: 16px;
  line-height: 26px;
}

.v2-rich-content h2 {
  font-weight: 600;
  font-size: 24px;
  /* text-h4 */
  line-height: 32px;
  color: #0a1247;
  /* dark-blue-9 */
  margin: 8px 0 16px;
}

.v2-rich-content h3 {
  font-weight: 600;
  font-size: 20px;
  /* text-h5 */
  line-height: 28px;
  color: #0a1247;
  margin: 24px 0 12px;
}

.v2-rich-content h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #0a1247;
  margin: 16px 0 8px;
}

.v2-rich-content p {
  margin: 0 0 16px;
  line-height: 26px;
}

.v2-rich-content a {
  color: #2335f4;
  /* brand-blue-5 */
  text-decoration: underline;
}

.v2-rich-content a:hover {
  text-decoration: none;
}

.v2-rich-content ul,
.v2-rich-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.v2-rich-content ul {
  list-style: disc;
}

.v2-rich-content ol {
  list-style: decimal;
}

.v2-rich-content li {
  margin: 0 0 8px;
}

.v2-rich-content li>ul,
.v2-rich-content li>ol {
  margin-top: 8px;
}

.v2-rich-content strong,
.v2-rich-content b {
  font-weight: 600;
  color: #0a1247;
}

.v2-rich-content em,
.v2-rich-content i {
  font-style: italic;
}

.v2-rich-content sub {
  font-size: 12px;
}

/* TYPO3 wrapper classes carried over from the imported HTML - they
   shouldn't force any extra layout in v2; reset them so the inner
   prose relies on the rules above. The ``ce-bodytext`` block is the
   actual content container; everything else is just structural
   nesting from the TYPO3 ``textmedia`` content element. */
.v2-rich-content .ce-textpic,
.v2-rich-content .ce-bodytext,
.v2-rich-content .ce-gallery,
.v2-rich-content .ce-outer,
.v2-rich-content .ce-inner,
.v2-rich-content .frame,
.v2-rich-content .frame-default,
.v2-rich-content .frame-type-textmedia {
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   V2 rich-text tables (resolution detail page)
   The Wagtail RichTextField content for ``wirkmechanismus``,
   ``ergebnisse`` and ``lessons_learnt`` may contain tables (CKEditor
   wraps them in ``<figure class="table">``). Tailwind's preflight
   strips default table styling, so without explicit rules the tables
   render as plain text with no borders or padding.

   These rules are applied via ``.v2-richtext-table`` on the wrapping
   ``<div>`` in ``core/v2/resolution_detail_page.html``. The colours
   mirror the design tokens in ``tailwind.config.js`` so a v2 user
   inspecting the rendered table sees the same visual language as
   the surrounding card chrome (``ds-grey-1`` separators, ``dark-blue-9``
   emphasis, ``brand-blue-1`` header band).
   ══════════════════════════════════════════════════════════════════ */
.v2-richtext-table figure.table {
  margin: 16px 0;
  max-width: 100%;
  overflow-x: auto;
}

.v2-richtext-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  /* text-body-sm */
  line-height: 21px;
  border-top: 1px solid #e7e7e7;
  /* ds-grey-1 */
}

.v2-richtext-table table td,
.v2-richtext-table table th {
  padding: 8px 12px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #e7e7e7;
  /* ds-grey-1 */
}

.v2-richtext-table table th {
  background-color: #ebeeff;
  /* brand-blue-1 */
  color: #0a1247;
  /* dark-blue-9 */
  font-weight: 600;
}

.v2-richtext-table table td p {
  margin-bottom: 0;
}

.v2-richtext-table table td strong {
  color: #0a1247;
  /* dark-blue-9 */
}

/* ══════════════════════════════════════════════════════════════════
   V2 sidebar icon color inheritance
   The Figma export pipeline produces two SVG flavours for the same
   icon set: most paths use ``fill="currentColor"`` (which inherits
   the surrounding text colour), but some use
   ``fill="var(--fill-0, #2335F4)"`` and rely on the consumer setting
   the variable - falling back to a hard-coded brand-blue when nobody
   does. The sidebar wants every icon to follow its row's text colour
   (``text-ds-blue-1`` inactive, ``text-dark-blue-0`` active), so we
   map ``--fill-0`` to ``currentColor`` once on the sidebar shell.
   This keeps both icon flavours visually consistent even if a future
   Figma export drops a new ``var(--fill-0, ...)`` icon into the menu.
   ══════════════════════════════════════════════════════════════════ */
aside.bg-dark-blue-9 { --fill-0: currentColor; }

/* ══════════════════════════════════════════════════════════════════
   V2 sidebar scroll container
   The auth sidebar's <nav> is ``overflow-y-auto`` so long menus can
   scroll, but the OS default scrollbar (~12-17px on Linux/Windows)
   eats into the inline width and forces labels like "Special
   constellations" to wrap onto two lines.

   We solve it with three small rules:

   1. ``scrollbar-gutter: stable`` reserves the gutter even when the
      content fits, so nothing reflows when sections open/close.
   2. ``scrollbar-width: thin`` (Firefox) and the WebKit pseudo-elements
      shrink the bar to 6px and recolor it to blend with the
      ``dark-blue-9`` sidebar background. Hover bumps the thumb to a
      lighter blue for affordance.
   3. The nav's right padding is reduced to ``pr-2`` (8px) in the
      template so the scrollbar gutter sits directly beside it. With
      the 16px-wider aside there's still ample breathing room between
      the menu rows and the scroll thumb.

   Combined with a 16px wider ``<aside>`` (272px instead of 256px) the
   scroll-state and rest-state both leave enough room for the longest
   label in the v2 menu set.
   ══════════════════════════════════════════════════════════════════ */
.v2-sidebar-nav {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(170, 178, 235, 0.35) transparent;
}

.v2-sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.v2-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.v2-sidebar-nav::-webkit-scrollbar-thumb {
  background-color: rgba(170, 178, 235, 0.35);
  border-radius: 3px;
}

.v2-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background-color: rgba(170, 178, 235, 0.6);
}

/* ══════════════════════════════════════════════════════════════════
   V2 sidebar section collapsibles
   Section headers in the auth sidebar that own a sub-menu are
   rendered as ``<details class="v2-nav-section"><summary>...</summary>...
   </details>`` so a click on the header expands/collapses the section
   without navigating. We need three small style rules to make the
   native disclosure widget look like the rest of the sidebar:

   1. Hide the default triangle marker in every browser engine
      (Firefox uses ``list-style``; WebKit uses a pseudo-element).
   2. Remove the marker box reservation (``::marker``) so the summary
      flexbox layout starts at x=0 like the plain anchor entries.
   3. Rotate the chevron 180° when the section is open, with a quick
      transition for affordance.
   ══════════════════════════════════════════════════════════════════ */
.v2-nav-section>summary {
  list-style: none;
}

.v2-nav-section>summary::-webkit-details-marker {
  display: none;
}

.v2-nav-section>summary::marker {
  display: none;
}

.v2-nav-section .v2-nav-caret {
  transition: transform 0.15s ease;
}

.v2-nav-section[open]>summary .v2-nav-caret {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════
   V2 Zusatznutzen summary table (rendered by include/pie_chart.html)
   Scoped under .v2-pie-charts so v1 pages are unaffected. The v1
   styling lives in ``css/amnog/amnog.css`` which v2 does not load,
   so the same per-cell ZN classes (``ZN4-erheblich-3-Beleg`` etc.)
   need to be re-styled here. The label-cell colours follow the Figma
   design scale (one hue per benefit level, evidence grades collapsed).
   ══════════════════════════════════════════════════════════════════ */
.v2-pie-charts table.contenttable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #0a1247;
  /* dark-blue-9 */
  border: 1px solid #e1e7ee;
  /* ds-grey-1 */
  border-radius: 8px;
  overflow: hidden;
}

.v2-pie-charts table.contenttable thead th {
  background: #0a1247;
  /* dark-blue-9 (v2 design system - matches sidebar / headings) */
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #e1e7ee;
}

.v2-pie-charts table.contenttable thead th+th {
  text-align: center;
}

.v2-pie-charts table.contenttable tbody td {
  padding: 8px 14px;
  border-top: 1px solid #e1e7ee;
  vertical-align: middle;
}

.v2-pie-charts table.contenttable tbody tr:first-child td {
  border-top: 0;
}

/* Numeric cells (every column after the label) are centered, matching
   the v1 ``.text-center`` class the partial puts on them. */
.v2-pie-charts table.contenttable tbody td.text-center {
  text-align: center;
  background: #ffffff;
}

/* Subtle striping on the numeric cells only - the colored label cell
   keeps its own background. */
.v2-pie-charts table.contenttable tbody tr:nth-child(even) td.text-center {
  background: #f7f9fc;
}

/* ── Label-cell colour chips (v2 grey-to-green scale) ───────────────
   Mirrors the donut palette in ``include/v2/pie_chart.html``
   (``amnogPlotlyColors``): positive benefit levels stay on the green
   ramp, neutral / no-benefit / less-benefit fall through a grey ramp
   instead of the old red→dark-red. */
.v2-pie-charts table.contenttable td.ZN4-erheblich-3-Beleg,
.v2-pie-charts table.contenttable td.ZN4-erheblich-2-Hinweis,
.v2-pie-charts table.contenttable td.ZN4-erheblich-1-Anhalt {
  background-color: #43922b;
  color: #ffffff;
}

.v2-pie-charts table.contenttable td.ZN3-betraechtlich-3-Beleg,
.v2-pie-charts table.contenttable td.ZN3-betraechtlich-2-Hinweis,
.v2-pie-charts table.contenttable td.ZN3-betraechtlich-1-Anhalt {
  background-color: #91d053;
  color: #304c15;
}

.v2-pie-charts table.contenttable td.ZN2-gering-3-Beleg,
.v2-pie-charts table.contenttable td.ZN2-gering-2-Hinweis,
.v2-pie-charts table.contenttable td.ZN2-gering-1-Anhalt {
  background-color: #ceeb8a;
  color: #4f6812;
}

.v2-pie-charts table.contenttable td.ZN1-nicht-quantifizierbar-3-Beleg,
.v2-pie-charts table.contenttable td.ZN1-nicht-quantifizierbar-2-Hinweis,
.v2-pie-charts table.contenttable td.ZN1-nicht-quantifizierbar-1-Anhalt {
  background-color: #C8C5BB;
  color: #3a3a3a;
}

.v2-pie-charts table.contenttable td.ZN0-kein-3-Beleg,
.v2-pie-charts table.contenttable td.ZN0-kein-2-Hinweis,
.v2-pie-charts table.contenttable td.ZN0-kein-1-Anhalt,
.v2-pie-charts table.contenttable td.ZN0-kein {
  background-color: #767674;
  color: #ffffff;
}

.v2-pie-charts table.contenttable td.ZN-1geringerer-3-Beleg,
.v2-pie-charts table.contenttable td.ZN-1geringerer-2-Hinweis,
.v2-pie-charts table.contenttable td.ZN-1geringerer-1-Anhalt {
  background-color: #444441;
  color: #ffffff;
}

/* "ZN-belegt" (benefit considered proven) has no v1 colour either -
   we leave the row default white so the table doesn't look broken
   for that row. */