/* ===== OO Heatmap =====
   Tabelle aus Zeilen und Spalten; jede Zelle bekommt ihre Farben über --oo-heatmap-cell-bg und --oo-heatmap-cell-fg (inline).
   Größen über --oo-heatmap-cell-width, --oo-heatmap-cell-height, --oo-heatmap-row-header-width, --oo-heatmap-gap und --oo-heatmap-cell-radius.
   Size (oo-size-xxxs … oo-size-xl am Root) nutzt die Schriftgrößen-Tokens des Themes.
   ====================== */

.oo-heatmap {
    --_hm-zellbreite: var(--oo-heatmap-cell-width, 3.5rem);
    --_hm-zellhoehe: var(--oo-heatmap-cell-height, 1.75rem);
    --_hm-schrift: var(--oo-heatmap-font-size, var(--oo-font-size-md));
    display: block;
    max-width: 100%;
    font-size: var(--_hm-schrift);
    color: var(--oo-color-text);
}

.oo-heatmap.oo-size-xxxs { --_hm-schrift: var(--oo-heatmap-font-size, var(--oo-font-size-xxxs)); }
.oo-heatmap.oo-size-xxs  { --_hm-schrift: var(--oo-heatmap-font-size, var(--oo-font-size-xxs)); }
.oo-heatmap.oo-size-xs   { --_hm-schrift: var(--oo-heatmap-font-size, var(--oo-font-size-xs)); }
.oo-heatmap.oo-size-sm   { --_hm-schrift: var(--oo-heatmap-font-size, var(--oo-font-size-sm)); }
.oo-heatmap.oo-size-md   { --_hm-schrift: var(--oo-heatmap-font-size, var(--oo-font-size-md)); }
.oo-heatmap.oo-size-lg   { --_hm-schrift: var(--oo-heatmap-font-size, var(--oo-font-size-lg)); }
.oo-heatmap.oo-size-xl   { --_hm-schrift: var(--oo-heatmap-font-size, var(--oo-font-size-xl)); }

.oo-heatmap__scroll {
    overflow-x: auto;
}

.oo-heatmap__table {
    border-collapse: separate;
    border-spacing: var(--oo-heatmap-gap, calc(var(--oo-space-1) / 2));
    table-layout: fixed;
    width: 0;
}

.oo-heatmap__row-column {
    width: var(--oo-heatmap-row-header-width, 10rem);
}

.oo-heatmap__data-column {
    width: var(--_hm-zellbreite);
}

.oo-heatmap__corner,
.oo-heatmap__row-head {
    position: sticky;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    width: var(--oo-heatmap-row-header-width, 10rem);
    min-width: var(--oo-heatmap-row-header-width, 10rem);
    padding: 0 var(--oo-space-2);
    background-color: var(--oo-color-surface);
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oo-heatmap__corner {
    color: var(--oo-color-text-subtle);
    font-weight: 600;
}

.oo-heatmap__column-head {
    box-sizing: border-box;
    width: var(--_hm-zellbreite);
    min-width: var(--_hm-zellbreite);
    padding: 0 var(--oo-space-1) var(--oo-space-1);
    color: var(--oo-color-text-subtle);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oo-heatmap__subtext {
    display: block;
    color: var(--oo-color-text-subtle);
    font-size: 0.85em;
    font-weight: 400;
}

.oo-heatmap__cell {
    position: relative;
    box-sizing: border-box;
    width: var(--_hm-zellbreite);
    min-width: var(--_hm-zellbreite);
    height: var(--_hm-zellhoehe);
    padding: 0 var(--oo-space-1);
    border-radius: var(--oo-heatmap-cell-radius, var(--oo-radius-sm));
    background-color: var(--oo-heatmap-cell-bg, transparent);
    color: var(--oo-heatmap-cell-fg, inherit);
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

@supports (color: contrast-color(red)) {
    .oo-heatmap__cell--filled {
        color: var(--oo-heatmap-cell-fg, contrast-color(var(--oo-heatmap-cell-bg)));
    }
}

.oo-heatmap__cell--empty {
    color: var(--oo-color-text-disabled);
}

.oo-heatmap__cell--clickable {
    padding: 0;
}

.oo-heatmap__action {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--_hm-zellhoehe);
    padding: 0 var(--oo-space-1);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.oo-heatmap__cell--clickable:hover {
    filter: brightness(0.92);
}

.oo-heatmap__action:focus-visible {
    outline: calc(var(--oo-border-width) * 2) solid var(--oo-primary);
    outline-offset: calc(var(--oo-border-width) * -2);
}

/* Schraffierter Streifen am unteren Zellrand (HeatmapCell.Alert); Zellwert und Button liegen darüber. */
.oo-heatmap__alert {
    --_hm-streifen: var(--oo-heatmap-alert-color, var(--oo-danger));
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: var(--oo-heatmap-alert-height, 30%);
    background-image: repeating-linear-gradient(45deg, var(--_hm-streifen) 0, var(--_hm-streifen) 0.25rem, color-mix(in oklch, var(--_hm-streifen) 55%, var(--oo-color-surface)) 0.25rem, color-mix(in oklch, var(--_hm-streifen) 55%, var(--oo-color-surface)) 0.5rem);
    pointer-events: none;
}

.oo-heatmap__value {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.oo-heatmap__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.oo-heatmap__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oo-space-3);
    margin-top: var(--oo-space-2);
    color: var(--oo-color-text-subtle);
    font-size: 0.9em;
}

.oo-heatmap__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-1);
}

.oo-heatmap__legend-swatch {
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    border-radius: var(--oo-heatmap-cell-radius, var(--oo-radius-sm));
}

.oo-heatmap__legend-swatch--alert {
    --_hm-streifen: var(--oo-heatmap-alert-color, var(--oo-danger));
    position: relative;
    overflow: hidden;
    background-color: var(--oo-surface-2);
}

.oo-heatmap__legend-swatch--alert::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 40%;
    background-image: repeating-linear-gradient(45deg, var(--_hm-streifen) 0, var(--_hm-streifen) 0.15rem, color-mix(in oklch, var(--_hm-streifen) 55%, var(--oo-color-surface)) 0.15rem, color-mix(in oklch, var(--_hm-streifen) 55%, var(--oo-color-surface)) 0.3rem);
}

.oo-heatmap__legend-gradient {
    display: inline-block;
    width: 8rem;
    height: 0.625em;
    border-radius: var(--oo-radius-full);
}