/* FinanceHub - sdílená komponentová knihovna (viz docs, Sprint "Frontend Platform").
   Jeden konsolidovaný soubor - bez bundleru by rozdělení na víc souborů znamenalo
   víc HTTP requestů bez benefitu. */

/* ---------- Page Header ---------- */

.page-header {
    margin-bottom: 1.5rem;
}

.page-header__breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.page-header__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header__title {
    margin-bottom: 0.25rem;
}

.page-header__description {
    color: var(--fh-text-muted);
    margin-bottom: 0;
}

.page-header__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Metric Card ---------- */

.metric-card {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.metric-card .card {
    height: 100%;
}

.metric-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.metric-card__icon {
    font-size: 1.15rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fh-primary-soft);
    color: var(--fh-primary-dark);
}

.metric-card__label {
    font-size: 0.8rem;
    color: var(--fh-text-muted);
    font-weight: 500;
}

/* Nad .stretched-link (z-index: 1 z Bootstrapu) - jinak by karta s $href pohltila klik na ikonu
   dřív, než by stihl doputovat k tlačítku (viz metric_card.php $infoModalId docblock). */
.metric-card__info {
    position: relative;
    z-index: 2;
    color: var(--fh-text-muted);
    line-height: 1;
    vertical-align: -1px;
}

.metric-card__info:hover {
    color: var(--fh-primary-dark);
}

.metric-card__value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--fh-text);
    margin: 0.35rem 0;
}

.metric-card__change {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.metric-card__change--up {
    color: var(--fh-success);
    background: var(--fh-success-soft);
}

.metric-card__change--down {
    color: var(--fh-danger);
    background: var(--fh-danger-soft);
}

.metric-card__change--neutral {
    color: var(--fh-text-muted);
    background: var(--fh-bg);
}

.metric-card.is-loading .metric-card__value,
.metric-card.is-loading .metric-card__label {
    color: transparent;
    background: linear-gradient(90deg, var(--fh-border) 25%, var(--fh-bg) 50%, var(--fh-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: 4px;
}

/* ---------- Chart Card ---------- */

.chart-card__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.chart-card__periods .btn {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-font-size: 0.8rem;
}

.chart-card__filter {
    margin-bottom: 1rem;
    transition: opacity var(--fh-transition);
}

/* Zjemnění obsahu widgetu během AJAX obnovy (viz widget-refresh.js) - žádný skeleton, jen jemné
   ztlumení, aby bylo znát, že se něco děje, bez rušivého blikání. */
[data-component="widget-refresh"].is-loading {
    opacity: 0.6;
    transition: opacity var(--fh-transition);
}

.chart-card__canvas-wrapper {
    position: relative;
    height: 260px;
}

/* Malý "gauge" doughnut vedle textových hodnot (viz FireProgressWidget::buildProgressChart()) -
   NEpoužívá plnou components.chart_card (ta by přidala vlastní vnořenou kartu s titulkem) - jen
   holý <canvas> s ohraničenou výškou, kterou Chart.js (maintainAspectRatio:false) potřebuje. */
.fire-progress-gauge {
    position: relative;
    height: 130px;
}

/* Půlkruhový gauge KPI karty "Investice do FIRE" (viz DashboardService::
   buildFireMonthlyInvestmentGaugeChart() - rotation:-90 + circumference:180 nakreslí jen horní
   půlkruh). Nižší výška než .fire-progress-gauge výš - Chart.js poloměr doughnutu počítá jako
   min(šířka, výška)/2 BEZ OHLEDU na circumference (pořád jako by šlo o celý kruh), užší KPI
   sloupec (col-md-2) tak i tak drží poloměr omezený výškou, takže nižší kontejner jen zmenší
   prázdné místo POD rovnou hranou půlkruhu, ne samotný oblouk. */
.fire-monthly-gauge {
    position: relative;
    height: 90px;
}

/* Investovaná částka (viz dashboard.php) musí sedět HNED POD procentem (fhCenterText, vykreslené
   uprostřed .fire-monthly-gauge výš), ne pod celým grafem - spodní půlkruh je ale u půlkruhového
   gauge PRÁZDNÝ (žádný oblouk se tam nekreslí, viz komentář u .fire-monthly-gauge), takže by mezi
   procentem a částkou jinak zůstala prázdná mezera. Záporný horní okraj vizuálně "vytáhne" částku
   do týhle prázdné plochy - hodnota ověřená přímo v prohlížeči (uživatel), ne teoretickým odhadem
   z výšky kontejneru/poloměru Chart.js gaugu.  */
.fire-monthly-gauge__value {
    margin-top: -30px;
}

/* Popisek "Zbývá X Kč do Y Kč" pod částkou výš - malý kladný odstup, aby částka (vytažená nahoru
   záporným marginem) a popisek od sebe opticky nesplývaly. Hodnota stejně ověřená v prohlížeči. */
.fire-monthly-gauge__caption {
    margin-top: 10px;
}

/* Náhrada grafu, když pro vybrané období/filtr nejsou žádná data (viz components/chart_card.php
   $emptyMessage) - stejná výška jako .chart-card__canvas-wrapper, ať se karta neposkládá jinak,
   než když data jsou. */
.chart-card__empty {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Widget filter (sdíleno mezi widgety s data-widget-filter, viz widget-refresh.js) ---------- */

.widget-filter {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.widget-filter select,
.widget-filter input {
    width: auto;
}

/* ---------- Chart legend (name/value/percent řádky s prokliky - doughnut/pie grafy s legendou) ---------- */

.chart-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}

.chart-legend__item--link {
    color: inherit;
    text-decoration: none;
    border-radius: var(--fh-radius-sm);
    margin: 0 -0.4rem;
    padding: 0.25rem 0.4rem;
    transition: background-color var(--fh-transition);
}

.chart-legend__item--link:hover,
.chart-legend__item--link:focus-visible {
    background: var(--fh-secondary-soft);
}

.chart-legend__swatch {
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

.chart-legend__name {
    flex: 1 1 auto;
    color: var(--fh-text);
}

.chart-legend__value {
    flex: 0 0 auto;
    color: var(--fh-text-muted);
}

.chart-legend__percent {
    flex: 0 0 auto;
    min-width: 3.5rem;
    text-align: right;
    font-weight: 600;
    color: var(--fh-text);
}

/* Legenda seskupená do sloupců (jeden sloupec na kategorii, položky pod sebou) - viz
   BudgetGroupYearComparisonWidget, kde sloupcový a čárový rok stejné rozpočtové skupiny patří pod
   sebe do stejného sloupce, ne do jedné průběžné řady jako běžná .chart-legend__item. */
.chart-legend-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.chart-legend-columns__column {
    flex: 1 1 8rem;
    min-width: 8rem;
}

.chart-legend-columns__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--fh-text-muted);
    margin-bottom: 0.25rem;
}

/* ---------- Chart tooltip (percentTooltip, viz chart-card.js) ---------- */

.chart-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1080;
    pointer-events: none;
    background: #0f172a;
    color: #fff;
    border-radius: var(--fh-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.1s ease;
    /* --chart-tooltip-shift-x - doplňkový vodorovný posun u bodů blízko okraje obrazovky (viz
       positionExternalTooltip() v chart-card.js), výchozí 0px beze změny pro běžné body. */
    transform: translate(calc(-50% + var(--chart-tooltip-shift-x, 0px)), calc(-100% - 10px));
    /* width:max-content (NE jen max-width) - bez explicitní šířky by absolutně umístěný prvek se
       "shrink-to-fit" šířkou počítal dostupný prostor od "left" k PRAVÉMU OKRAJI VIEWPORTU (appka
       ho vkládá přímo do <body>, containing block je proto celé okno, ne karta widgetu) - u bodů
       blízko pravého okraje (poslední měsíce v grafu, viz BudgetGroupYearComparisonWidget) tak
       zbývalo jen pár px, tooltip se vynuceně zalomil na mnoho řádků a byl nečitelný. transform
       (centrování/posun) na tenhle výpočet nemá vliv - platí až PO layoutu. max-width pořád omezuje
       shora, aby se dlouhý obsah nakonec zalomil rozumně, ne roztáhl přes celou obrazovku. */
    width: max-content;
    max-width: 300px;
}

.chart-tooltip__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.chart-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.chart-tooltip__swatch {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.chart-tooltip__label {
    flex: 1 1 auto;
    /* min-width:0 - bez toho flex položka nikdy nesmrskne pod šířku svého (nezalomeného)
       obsahu, i když sourozenec .chart-tooltip__values žádá vlastní místo - dlouhý popisek
       (např. "Nezbytné výdaje (Needs) 2026") tak přetékal přes max-width tooltipu ven, mimo
       tmavé pozadí, a byl na světlé stránce nečitelný ("neviditelný"). */
    min-width: 0;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.chart-tooltip__values {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.75rem;
    text-align: right;
}

.chart-tooltip__amount,
.chart-tooltip__percent {
    white-space: nowrap;
}

.chart-tooltip__percent {
    opacity: 0.75;
}

.chart-tooltip__row--total {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* ---------- Filter Bar ---------- */

.filter-bar {
    margin-bottom: 1rem;
}

.filter-bar__field label {
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

/* Pole, podle kterého se zrovna filtruje (hodnota se liší od výchozí prázdné) - jemné podbarvení,
   ať je na první pohled vidět, čím je výpis omezený (viz components/filter_bar.php $isActive). */
.filter-bar__field--active {
    background: var(--fh-success-soft);
    border-radius: var(--fh-radius-sm);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* "Nezařazeno" v inline editaci kategorie (přehled transakcí) - jemné šedé podbarvení, ať je vidět
   na první pohled, že transakce nemá kategorii přiřazenou (viz transactions/index.php a
   transaction-category-edit.js, který třídu po uložení dál přepíná). */
.category-select--unassigned {
    background-color: var(--fh-border);
}

.filter-bar__toggle {
    display: none;
}

@media (max-width: 767.98px) {
    .filter-bar__fields {
        display: none;
    }

    .filter-bar__fields.is-open {
        display: flex;
    }

    .filter-bar__toggle {
        display: inline-block;
    }
}

/* ---------- Search Bar ---------- */

.search-bar {
    position: relative;
}

.search-bar__clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--fh-text-muted);
    display: none;
}

.search-bar__input:not(:placeholder-shown) + .search-bar__clear {
    display: block;
}

/* ---------- Action Bar ---------- */

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.action-bar__group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.action-bar__bulk {
    display: none;
    align-items: center;
    gap: var(--fh-space-2);
    background: var(--fh-warning-soft);
    border: 1px solid var(--fh-warning);
    border-radius: var(--fh-radius-md);
    padding: 0.4rem var(--fh-space-3);
}

.action-bar__bulk.is-visible {
    display: flex;
}

/* ---------- Data Table ---------- */

.data-table-wrapper {
    position: relative;
}

.data-table th[data-sortable] {
    cursor: pointer;
    white-space: nowrap;
}

.data-table tbody tr[data-row-href] {
    cursor: pointer;
}

/* Bootstrap 5.3 maluje na KAŽDOU buňku vlastní neprůhledné pozadí (background-color: var(--bs-table-bg),
   viz .table > :not(caption) > * > * v bootstrap.min.css) - obyčejné pozadí na <tr> by tak bylo vždy
   překryté a neviditelné. Řádkový hover musí jít stejnou cestou jako vestavěné .table-hover: nastavit
   --bs-table-bg-state na buňkách, které Bootstrap čte přes box-shadow (ten se maluje NAD pozadím
   buňky, proto funguje). Zvýrazněné jen řádky s prokliknutím (data-row-href), ne každý řádek tabulky. */
.data-table tbody tr[data-row-href]:hover > * {
    --bs-table-bg-state: var(--fh-primary-soft);
}

.data-table th[data-sortable] .data-table__sort-icon {
    opacity: 0.35;
    font-size: 0.75em;
}

.data-table th[data-sort-active] .data-table__sort-icon {
    opacity: 1;
}

.data-table__select-col {
    width: 2rem;
}

.data-table__footer-row {
    border-top: 2px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

.data-table__empty {
    text-align: center;
    color: var(--fh-text-muted);
    padding: 2.5rem 1rem;
}

.data-table__empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.data-table.is-loading tbody {
    position: relative;
}

.data-table.is-loading tbody::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        var(--fh-border) 0,
        var(--fh-border) 40%,
        var(--fh-bg) 50%,
        var(--fh-border) 60%,
        var(--fh-border) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    opacity: 0.6;
}

.data-table-pagination {
    margin-top: 1rem;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responzivní "card view" pro tabulky pod 768px - řízeno data-label atributy
   vyplněnými serverem (viz components/data_table.php), žádný JS navíc netřeba. */
@media (max-width: 767.98px) {
    .data-table.is-responsive thead {
        display: none;
    }

    .data-table.is-responsive,
    .data-table.is-responsive tbody,
    .data-table.is-responsive tr,
    .data-table.is-responsive td {
        display: block;
        width: 100%;
    }

    .data-table.is-responsive tr {
        border: 1px solid var(--fh-border);
        border-radius: var(--fh-radius-md);
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .data-table.is-responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        border: none;
        padding: 0.35rem 0;
    }

    .data-table.is-responsive td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--fh-text-muted);
        font-size: 0.8rem;
        margin-right: auto;
    }
}

/* ---------- Activity Timeline ---------- */

.activity-timeline__empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--fh-text-muted);
}

.activity-timeline__empty-icon {
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.activity-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity-timeline__item {
    display: flex;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 1.25rem;
}

.activity-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 2.25rem;
    bottom: 0;
    width: 2px;
    background: var(--fh-border);
}

.activity-timeline__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fh-primary-soft);
    color: var(--fh-primary-dark);
    font-size: 1rem;
    z-index: 1;
}

.activity-timeline__content {
    flex: 1 1 auto;
    padding-top: 0.35rem;
}

.activity-timeline__description {
    color: var(--fh-text);
    font-size: 0.9rem;
}

.activity-timeline__link {
    margin-left: 0.35rem;
    font-size: 0.8rem;
}

.activity-timeline__meta {
    color: var(--fh-text-muted);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

/* ---------- Stepper ---------- */

.stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.stepper__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fh-text-muted);
    font-size: 0.85rem;
}

.stepper__item:not(:last-child)::after {
    content: '';
    width: 1.5rem;
    height: 2px;
    background: var(--fh-border);
    margin-left: 0.5rem;
}

.stepper__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--fh-bg);
    border: 1px solid var(--fh-border);
    font-size: 0.8rem;
    font-weight: 600;
}

.stepper__item--active .stepper__marker {
    background: var(--fh-primary);
    border-color: var(--fh-primary);
    color: #fff;
}

.stepper__item--active .stepper__label {
    color: var(--fh-text);
    font-weight: 600;
}

.stepper__item--done .stepper__marker {
    background: var(--fh-success-soft);
    border-color: var(--fh-success);
    color: var(--fh-success);
}

/* ---------- Progress Bar ---------- */

.fh-progress__label {
    display: flex;
    justify-content: space-between;
    color: var(--fh-text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

/* ---------- Empty State (components.feedback.empty_state) ---------- */

.empty-state {
    text-align: center;
    color: var(--fh-text-muted);
    padding: 2.5rem var(--fh-space-4);
}

.empty-state__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-state__message {
    margin-bottom: 0.75rem;
}

.empty-state__action:empty {
    display: none;
}

/* ---------- Color Palette (components.color_palette) ---------- */

.color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.color-palette__swatch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-sm);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.color-palette__swatch:hover {
    border-color: var(--fh-primary);
}

.color-palette__swatch.is-selected {
    border-color: var(--fh-primary);
    box-shadow: 0 0 0 0.15rem var(--fh-primary-soft);
}

.color-palette__preview {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-palette-swatch);
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.color-palette__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.color-palette__name {
    font-size: 0.8rem;
    color: var(--fh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-palette__hex {
    font-size: 0.75rem;
    color: var(--fh-text-muted);
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ---------- Heatmapa výdajů (ExpenseHeatmapWidget) - kalendářní mřížka, styl GitHub "contribution
   graph". Čisté HTML/CSS (CSS grid), ne Chart.js - Chart.js nemá vestavěný typ grafu pro tenhle
   layout a appka kvůli jedné vizualizaci nechce přidávat další CDN knihovnu. ---------- */

.heatmap__scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.heatmap__grid {
    display: grid;
    gap: 3px;
}

.heatmap__corner {
    grid-column: 1;
}

.heatmap__month-label {
    font-size: 0.7rem;
    color: var(--fh-text-muted);
    white-space: nowrap;
}

.heatmap__day-label {
    font-size: 0.7rem;
    color: var(--fh-text-muted);
    display: flex;
    align-items: center;
    padding-right: 0.4rem;
}

/* Buňka roste/zmenšuje se se šířkou widgetu (width:100% ze sloupce `1fr`, aspect-ratio drží
   čtverec) - appka VŠECHNY sloupce dělí rovným dílem (`1fr`), takže jsou vždy stejně velké MEZI
   SEBOU navzájem, jen se všechny společně zvětší/zmenší podle šířky widgetu. Horní strop
   (`.heatmap__grid`'s inline `max-width`, viz view partial) appka drží, ať buňky na velmi širokém
   widgetu nenarostou tak, že by mřížka získala nekontrolovanou výšku (aspect-ratio šířku i výšku
   váže dohromady). */
.heatmap__cell {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    background: var(--fh-border);
}

/* Buňka SE ZAZNAMENANÝM dnem je `<a>` (proklik na přehled transakcí přefiltrovaný na tenhle den,
   viz ExpenseHeatmapWidget::transactionUrl()) - appka jí musí přebít výchozí barvu/podtržení
   odkazu, ať vypadá stejně jako dřívější `<div>`, jen s hover zvýrazněním jako nápovědou, že je
   klikací. */
.heatmap__cell[href] {
    color: inherit;
    text-decoration: none;
    outline-offset: 1px;
}

.heatmap__cell[href]:hover,
.heatmap__cell[href]:focus-visible {
    outline: 2px solid var(--fh-text-muted);
}

.heatmap__cell--empty {
    background: transparent;
}

.heatmap__cell--level-0 {
    background: var(--fh-border);
}

.heatmap__cell--level-1 {
    background: #fecaca;
}

.heatmap__cell--level-2 {
    background: #f87171;
}

.heatmap__cell--level-3 {
    background: #ef4444;
}

.heatmap__cell--level-4 {
    background: #b91c1c;
}

.heatmap__legend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.heatmap__legend .heatmap__cell {
    width: 0.75rem;
    height: 0.75rem;
    flex: 0 0 auto;
}