/*
 * pcu-planning-analysis — step 2 of the planning wizard.
 *
 * HUMAN-OWNED. Same two rules as `PcuPlanningBoardDevice.css`:
 *
 * 1. ONLY `--uui-*` for anything the theme owns — colour, radius, shadow, spacing. No
 *    `--rd-*`, no literal theme value. The step follows whichever UUI theme its page
 *    carries, including `.uui-legacy`.
 * 2. LAYOUT ONLY. Every control is a component: the meters are `uui-progress-bar`, the
 *    overlap note is `uui-alert`, the operation counts are `uui-badge`.
 *
 * ## The one documented exception: the series palette
 *
 * `--pcu-analysis-series-*` below are literal hex values and deliberately NOT themed.
 * They are a *measured* categorical palette, validated against this component's actual
 * surface (`--uui-bg-primary`, #ffffff in the default theme):
 *
 *     node scripts/validate_palette.js "#2a78d6,#eb6834,#1baf7a,#eda100,#e87ba4,#008300,#4a3aa7" \
 *          --mode light --surface "#ffffff"
 *
 * All gates pass; aqua, yellow and magenta fall below 3:1 against the surface, which
 * obligates relief — shipped as a permanently visible legend, direct value labels on
 * every bar, and a table view for the stacked chart. Theming these would break the
 * guarantee: the whole point is that adjacent slots stay ≥ 8 ΔE apart under colour-vision
 * deficiency, and a theme that shifts them re-opens a question that was closed by
 * measurement. Colour follows the topic, never its rank.
 *
 * Folder: logged-in users. Customer-facing, nothing anonymous shows it.
 */

pcu-planning-analysis {
    display: block;
    inline-size: 100%;

    /* Slots 1–7: canon topics, in canon order. Slot 8: Sonstiges, deliberately neutral. */
    --pcu-analysis-series-1: #2a78d6;
    --pcu-analysis-series-2: #eb6834;
    --pcu-analysis-series-3: #1baf7a;
    --pcu-analysis-series-4: #eda100;
    --pcu-analysis-series-5: #e87ba4;
    --pcu-analysis-series-6: #008300;
    --pcu-analysis-series-7: #4a3aa7;
    --pcu-analysis-series-8: var(--uui-color-neutral-400);

    /* Status washes for the canon matrix. Icon + label always carry the meaning. */
    --pcu-analysis-good-bg: #e4f6e4;
    --pcu-analysis-good-ink: #056105;
    --pcu-analysis-bad-bg: #fbe3e3;
    --pcu-analysis-bad-ink: #a52020;
    --pcu-analysis-warn-bg: #fdf3e2;
    --pcu-analysis-warn-ink: #8a5a00;

    /* The name column and its gap: every overlay and the axis inset by exactly this,
       so "50%" means the same x in all of them. */
    --pcu-analysis-name-col: 148px;
    --pcu-analysis-name-gap: var(--uui-spacing-4);
}

.pcu-planning-analysis__root {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uui-spacing-6);
    align-content: start;
}

.pcu-planning-analysis__sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Every grid below declares `minmax(0, 1fr)` rather than relying on the default track.
 * An `auto` track is sized by its child's max-content width, so a wide table inside an
 * `overflow-x: auto` box never scrolls — it stretches the card past its stage instead.
 * Same family as the `.uui-modal__body` trap in the handbook.
 */

/* --------------------------------------------------------------------- Prose */

.pcu-planning-analysis__prose {
    display: grid;
    gap: var(--uui-spacing-1);
    padding: var(--uui-spacing-4) var(--uui-spacing-5);
    border: 1px solid var(--uui-border-secondary);
    border-inline-start: 3px solid var(--uui-color-brand-500);
    border-radius: var(--uui-radius-xl);
    background: var(--uui-bg-primary);
}

.pcu-planning-analysis__prose-kicker {
    margin: 0;
    color: var(--uui-text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pcu-planning-analysis__prose p {
    margin: 0;
    color: var(--uui-text-secondary);
}

/*
 * A question inside the sentence. It is a <button> because nothing is navigated to, and a
 * tinted chip rather than an underlined run of text: the label is not part of the sentence
 * it follows, and underlined-only it reads as a run-on — "…zwölf Monate beträgt.
 * Verbesserungsvorschläge Der Ambulante Dienst…". The chip gives it a boundary without
 * costing the accessible name a decorative glyph.
 *
 * `font: inherit` keeps it on the paragraph's metrics; a button that sets its own makes the
 * line it sits in taller than its neighbours. Chrome inline-blockifies every button whatever
 * `display` says, so the label never breaks across two lines — correct here, where labels
 * are one to three words.
 */
.pcu-planning-analysis__ai-link {
    display: inline-block;
    margin: 0;
    padding: 0 var(--uui-spacing-2);
    border: 0;
    border-radius: var(--uui-radius-sm);
    background: var(--uui-bg-brand-primary);
    font: inherit;
    line-height: inherit;
    vertical-align: baseline;
    color: var(--uui-text-brand-secondary);
    cursor: pointer;
}

.pcu-planning-analysis__ai-link:hover {
    background: var(--uui-color-brand-100);
    color: var(--uui-color-brand-800);
}

.pcu-planning-analysis__ai-link:focus-visible {
    outline: 2px solid var(--uui-color-brand-500);
    outline-offset: 2px;
    border-radius: var(--uui-radius-xs);
}

.pcu-planning-analysis__skeleton {
    display: grid;
    gap: var(--uui-spacing-2);
}

.pcu-planning-analysis__skeleton span {
    block-size: 11px;
    border-radius: var(--uui-radius-full);
    background: var(--uui-bg-secondary);
}

/* --------------------------------------------------------------------- Tiles */

/*
 * `min(180px, 100%)` rather than a bare 180px: inside the bot workbench the board can be
 * dragged narrower than one tile, and a fixed track minimum would then push the whole row
 * past its container instead of collapsing to one column.
 */
.pcu-planning-analysis__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--uui-spacing-3);
}

.pcu-planning-analysis__tile {
    --uui-surface-padding: var(--uui-spacing-4);
    display: grid;
    gap: var(--uui-spacing-2);
    align-content: start;
    /* A grid item may not shrink below min-content unless told to; "7 neu · 4
       wiederverwendet" is wider than a phone-width track and would overflow it. */
    min-inline-size: 0;
}

.pcu-planning-analysis__tile > * {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.pcu-planning-analysis__tile strong em {
    font-style: normal;
    font-size: var(--uui-text-sm-font-size);
    font-weight: var(--uui-font-weight-regular);
    color: var(--uui-text-tertiary);
}

/*
 * The warning tone is a state, not a series, so it stays a status colour and always
 * ships beside the icon+label flag rather than carrying the meaning alone.
 *
 * `uui-progress-bar` publishes `tone="default|success"` and no custom property for the
 * fill, so this reaches for the generated part class instead. That is composition from a
 * human-owned stylesheet, not a patch of generated output.
 *
 * The specificity is stacked on purpose: the generated fill rules are keyed by three
 * attributes (`[data-uui-component][progress][label]`), so a two-attribute override
 * silently loses and the bar stays brand pink. Matching five reflected attributes wins
 * deterministically, without `!important`, and leaves the generated rule applying
 * everywhere else.
 */
[data-uui-component="progress-bar"][data-tone="warning"][progress][label][tone]
    .uui-progress-bar__fill-bar {
    background: var(--uui-color-amber-500);
}

/*
 * `label="false"` carries Figma's frozen width — `inline-size: 320px`, literally — while
 * the labelled variants are `100%`. In a tile narrower than 320px the bar therefore
 * overflows its own card instead of shrinking. `data-tone` scopes this to the bars this
 * component owns; the same specificity stacking as above is needed to win.
 */
[data-uui-component="progress-bar"][data-tone][progress][label][tone]
    .uui-progress-bar__root {
    inline-size: 100%;
}

/*
 * `uui-alert`'s text column is a flex item, and a flex item's `min-inline-size` defaults
 * to `auto` — so a long supporting sentence refuses to wrap and pushes the alert wider
 * than its container instead. Exactly the `.uui-modal__body` trap from the handbook, one
 * component over. The alert itself is already constrained by its `minmax(0, 1fr)` track;
 * this releases the child so it can actually use that width.
 */
.pcu-planning-analysis__chart uui-alert .uui-alert__content,
.pcu-planning-analysis__chart uui-alert .uui-alert__supporting,
.pcu-planning-analysis__root > uui-alert .uui-alert__content,
.pcu-planning-analysis__root > uui-alert .uui-alert__supporting {
    min-inline-size: 0;
}

.pcu-planning-analysis__flag {
    display: inline-flex;
    align-items: center;
    gap: var(--uui-spacing-1);
    font-weight: var(--uui-font-weight-semibold);
    white-space: nowrap;
}

.pcu-planning-analysis__flag[data-tone="warning"] {
    color: var(--pcu-analysis-warn-ink);
}

.pcu-planning-analysis__flag[data-tone="good"] {
    color: var(--pcu-analysis-good-ink);
}

/* ------------------------------------------------------------------ Sections */

.pcu-planning-analysis__section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uui-spacing-3);
    align-content: start;
}

.pcu-planning-analysis__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--uui-spacing-3);
    flex-wrap: wrap;
}

.pcu-planning-analysis__section-head h3 {
    margin: 0;
}

.pcu-planning-analysis__section p {
    margin: 0;
}

.pcu-planning-analysis__chart {
    --uui-surface-padding: var(--uui-spacing-4);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uui-spacing-4);
}

/* -------------------------------------------------------------------- Legend */

.pcu-planning-analysis__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uui-spacing-1) var(--uui-spacing-4);
}

.pcu-planning-analysis__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--uui-spacing-2);
    color: var(--uui-text-secondary);
}

.pcu-planning-analysis__swatch {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--uui-radius-xs);
    flex: 0 0 auto;
}

.pcu-planning-analysis__key {
    inline-size: 20px;
    block-size: 20px;
    border-radius: var(--uui-radius-md);
    display: inline-grid;
    place-items: center;
    font-weight: var(--uui-font-weight-bold);
    flex: 0 0 auto;
}

/* ------------------------------------------------------------ Stacked bars */

.pcu-planning-analysis__plot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uui-spacing-2);
}

.pcu-planning-analysis__plot-area {
    position: relative;
    padding-block-start: var(--uui-spacing-6);
}

.pcu-planning-analysis__overlay {
    position: absolute;
    inset-block: var(--uui-spacing-6) 0;
    inset-inline: var(--pcu-analysis-name-col) 0;
    margin-inline-start: var(--pcu-analysis-name-gap);
    pointer-events: none;
    z-index: 0;
}

/* Hairline, solid, one step off the surface — never dashed. */
.pcu-planning-analysis__gridline {
    position: absolute;
    inset-block: 0;
    inline-size: 1px;
    background: var(--uui-color-neutral-200);
}

.pcu-planning-analysis__target {
    position: absolute;
    inset-block: calc(-1 * var(--uui-spacing-4)) 0;
    inline-size: 1px;
    background: var(--uui-text-secondary);
    z-index: 2;
}

.pcu-planning-analysis__target > span {
    position: absolute;
    inset-block-start: calc(-1 * var(--uui-spacing-2));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding-inline: var(--uui-spacing-2);
    background: var(--uui-bg-primary);
    font-size: var(--uui-text-xs-font-size);
    font-weight: var(--uui-font-weight-semibold);
    color: var(--uui-text-secondary);
    white-space: nowrap;
}

.pcu-planning-analysis__rows {
    position: relative;
    display: grid;
    gap: var(--uui-spacing-4);
    z-index: 1;
}

.pcu-planning-analysis__row {
    display: grid;
    grid-template-columns: var(--pcu-analysis-name-col) 1fr;
    align-items: center;
    gap: var(--pcu-analysis-name-gap);
}

.pcu-planning-analysis__row-name {
    color: var(--uui-text-secondary);
}

.pcu-planning-analysis__row-name small {
    display: block;
    font-size: var(--uui-text-xs-font-size);
}

/*
 * Scoped through the parent on purpose: `.…__row-name small` is (0,1,1) and would
 * otherwise out-specify a bare class and keep this visible on desktop, where the same
 * fact already sits in the right-hand column.
 */
.pcu-planning-analysis__row-name small.pcu-planning-analysis__shortfall {
    display: none;
    color: var(--pcu-analysis-warn-ink);
    font-weight: var(--uui-font-weight-semibold);
}

/*
 * The track IS the scale. The value label is taken out of its flow on purpose — inside
 * it, 100% of the track would mean "scale plus whatever the label needed" and every
 * gridline would be off.
 */
.pcu-planning-analysis__track {
    position: relative;
    block-size: 22px;
}

.pcu-planning-analysis__bar {
    display: flex;
    block-size: 100%;
}

.pcu-planning-analysis__seg {
    block-size: 100%;
}

/* A 2px gap in the surface colour separates touching fills — never a border. */
.pcu-planning-analysis__seg + .pcu-planning-analysis__seg {
    margin-inline-start: 2px;
}

/* 4px rounded data-end, square at the baseline. */
.pcu-planning-analysis__seg:last-child {
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

.pcu-planning-analysis__total {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    color: var(--uui-text-primary);
}

.pcu-planning-analysis__row-flag {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: var(--uui-text-sm-font-size);
}

.pcu-planning-analysis__axis {
    position: relative;
    block-size: 14px;
    margin-inline-start: calc(var(--pcu-analysis-name-col) + var(--pcu-analysis-name-gap));
}

.pcu-planning-analysis__tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: var(--uui-text-xs-font-size);
    color: var(--uui-text-quaternary);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- Tables */

.pcu-planning-analysis__scroll {
    overflow-x: auto;
    min-inline-size: 0;
}

/*
 * The houses table is always shown, so it needs a ceiling: about ten rows (8 + 20 + 8 + 1px
 * each) plus caption and header, then it scrolls. Ten houses is rare; most boards have one to
 * four, and those never reach the cap. The header stays put while the rows scroll.
 */
.pcu-planning-analysis__scroll--capped {
    max-block-size: 28rem;
    overflow-y: auto;
}

.pcu-planning-analysis__scroll--capped thead th {
    position: sticky;
    inset-block-start: 0;
    background: var(--uui-bg-primary);
}

.pcu-planning-analysis__table,
.pcu-planning-analysis__matrix {
    inline-size: 100%;
    font-size: var(--uui-text-sm-font-size);
}

.pcu-planning-analysis__table {
    border-collapse: collapse;
}

.pcu-planning-analysis__table caption {
    text-align: start;
    padding-block-end: var(--uui-spacing-2);
}

.pcu-planning-analysis__table th,
.pcu-planning-analysis__table td {
    text-align: start;
    padding: var(--uui-spacing-2) var(--uui-spacing-3);
    border-block-end: 1px solid var(--uui-border-secondary);
    vertical-align: top;
}

.pcu-planning-analysis__table thead th {
    font-weight: var(--uui-font-weight-semibold);
    color: var(--uui-text-secondary);
    font-size: var(--uui-text-xs-font-size);
    white-space: nowrap;
}

.pcu-planning-analysis__table tbody th {
    font-weight: var(--uui-font-weight-medium);
    color: var(--uui-text-primary);
}

.pcu-planning-analysis__table tbody th small {
    display: block;
    font-weight: var(--uui-font-weight-regular);
    font-size: var(--uui-text-xs-font-size);
}

.pcu-planning-analysis__table [data-num] {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pcu-planning-analysis__table tbody tr:last-child td,
.pcu-planning-analysis__table tbody tr:last-child th {
    border-block-end: 0;
}

.pcu-planning-analysis__table tfoot td {
    border-block-start: 1px solid var(--uui-color-neutral-300);
    border-block-end: 0;
}

.pcu-planning-analysis__table uui-progress-bar {
    inline-size: 96px;
    display: block;
}

.pcu-planning-analysis__ops {
    display: flex;
    gap: var(--uui-spacing-1);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------- Write plan */

.pcu-planning-analysis__write-counts {
    display: flex;
    gap: var(--uui-spacing-2);
    flex-wrap: wrap;
}

/*
 * A blocked row carries its state on the row, not only in the sentence: the section sorts
 * conflicts to the top, and a reader who scrolled past the alert still has to be able to
 * tell which rows it was about. The bar sits on the inline start so it survives the
 * horizontal scroll the wide table needs.
 *
 * Same wash system as the canon matrix above, and the same rule applies — the ⚠ and the
 * sentence carry the meaning, the wash only reinforces it. There is no `--uui-*-warning-*`
 * token in this library; the component's own status inks are the honest source.
 */
.pcu-planning-analysis__write-row[data-blocked] > * {
    background: var(--pcu-analysis-warn-bg);
}

.pcu-planning-analysis__write-row[data-blocked] > :first-child {
    box-shadow: inset 3px 0 0 0 var(--pcu-analysis-warn-ink);
}

.pcu-planning-analysis__write-note {
    display: block;
    margin-block-start: var(--uui-spacing-1);
    font-size: var(--uui-text-xs-size, 0.75rem);
    line-height: var(--uui-text-xs-line-height, 1.125rem);
    color: var(--uui-text-tertiary);
}

.pcu-planning-analysis__write-note[data-tone="warning"] {
    color: var(--pcu-analysis-warn-ink);
    font-weight: var(--uui-font-weight-medium);
}

/* ------------------------------------------------------------ Canon matrix */

.pcu-planning-analysis__matrix {
    border-collapse: separate;
    border-spacing: 2px;
}

.pcu-planning-analysis__matrix th {
    font-weight: var(--uui-font-weight-semibold);
    color: var(--uui-text-secondary);
    font-size: var(--uui-text-xs-font-size);
    padding: var(--uui-spacing-1) var(--uui-spacing-2);
    text-align: center;
}

.pcu-planning-analysis__matrix th[scope="row"] {
    text-align: start;
    font-weight: var(--uui-font-weight-medium);
    font-size: var(--uui-text-sm-font-size);
    color: var(--uui-text-primary);
    white-space: nowrap;
}

.pcu-planning-analysis__matrix th[scope="row"] small {
    margin-inline-start: var(--uui-spacing-2);
    font-weight: var(--uui-font-weight-regular);
    font-size: var(--uui-text-xs-font-size);
}

.pcu-planning-analysis__matrix td {
    text-align: center;
    padding: var(--uui-spacing-2);
    border-radius: var(--uui-radius-md);
    font-weight: var(--uui-font-weight-bold);
}

.pcu-planning-analysis__matrix td[data-state="planned"],
.pcu-planning-analysis__key[data-state="planned"] {
    background: var(--pcu-analysis-good-bg);
    color: var(--pcu-analysis-good-ink);
}

.pcu-planning-analysis__matrix td[data-state="current"],
.pcu-planning-analysis__key[data-state="current"] {
    background: var(--uui-color-neutral-100);
    color: var(--uui-text-quaternary);
}

.pcu-planning-analysis__matrix td[data-state="missing"],
.pcu-planning-analysis__key[data-state="missing"] {
    background: var(--pcu-analysis-bad-bg);
    color: var(--pcu-analysis-bad-ink);
}

/* --------------------------------------------------------------------- Narrow */

/*
 * The board is the right pane of a window whose splitter drags down to 360px. Below
 * that the shortfall column has nowhere to sit without landing on the value label, so
 * the same fact moves under the house name instead.
 */
@media (max-width: 860px) {
    pcu-planning-analysis {
        --pcu-analysis-name-col: 104px;
        --pcu-analysis-name-gap: var(--uui-spacing-3);
    }

    .pcu-planning-analysis__row-flag {
        display: none;
    }

    .pcu-planning-analysis__row-name small.pcu-planning-analysis__shortfall {
        display: block;
    }

    .pcu-planning-analysis__matrix,
    .pcu-planning-analysis__table {
        min-inline-size: 520px;
    }
}