/*
 * pcu-planning-board-device — the Fortbildungsplanung workbench.
 *
 * HUMAN-OWNED. Same two rules as `PcuBotUi.css`, for the same reasons:
 *
 * 1. ONLY `--uui-*`. No literal colour, radius, shadow or spacing value, and no `--rd-*` — the
 *    board follows whichever UUI theme its page carries, including `.uui-legacy`, which is how
 *    it is meant to look inside today's platform.
 * 2. LAYOUT ONLY. Anything that draws a control belongs in a component: the badges and
 *    audience chips are `uui-badge`, the meter is `uui-progress-bar`, the duplicate warning is
 *    `uui-alert`, and the other × buttons are `uui-button-close`. What is left here is stacking,
 *    the card grid and the chip row.
 *
 * Audience chips use the imported `uui-badge` `Icon=X close` variant. Its close button fires
 * `uui-dismiss`; the board still owns the audience list and decides whether the chip disappears.
 *
 * Folder: logged-in users. The board is a customer-facing component and nothing anonymous shows
 * it, so it does not belong in `00_public/`.
 *
 * Source: Figma PGMGtwvwHW4OpGoP0CQjV6, frames 7262:3709 (A2 · Prüfen) and 7205:3908.
 */

pcu-planning-board-device {
    display: block;
    inline-size: 100%;
}

.pcu-planning-board-device__root {
    display: grid;
    /* Let the card and forecast text wrap inside a narrow workbench. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uui-spacing-4);
    align-content: start;
}

/* ------------------------------------------------------------------- Head */

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

/* ---------------------------------------------------------------- Banner */

/*
 * The forecast banner is `breakpoint="desktop"`, which puts heading and supporting text in
 * one row — and the generated rule keeps both `nowrap`, so in a pane a few pixels narrower
 * than the sentence the supporting text overflowed the board by 8px and produced a horizontal
 * scrollbar (measured 2026-09-30 in the workbench). Let both text parts wrap; `!important`
 * is the documented exception against the four-attribute generated rule.
 */
.pcu-planning-board-device__root > uui-alert .uui-alert__supporting,
.pcu-planning-board-device__root > uui-alert .uui-alert__title {
    white-space: normal !important;
    min-inline-size: 0;
}

/* ------------------------------------------------------------------ Cards */

.pcu-planning-board-device__cards {
    display: grid;
    gap: var(--uui-spacing-3);
    /*
     * Pack the rows. A grid distributes surplus height across its rows by default, which never
     * showed while the board hugged its content — but as a solo device in the workbench the list
     * is given the leftover height, and two collapsed cards then drifted apart across the pane
     * (measured 2026-09-30).
     */
    align-content: start;
}

/* The two split-out components are elements now, so each needs a display of its own. */
.pcu-planning-entry-card,
.pcu-course-row {
    display: block;
}

.pcu-planning-entry-card__root {
    --uui-surface-padding: var(--uui-spacing-4);

    display: grid;
    gap: var(--uui-spacing-3);
}

.pcu-planning-entry-card__root [data-uui-component="expandable-panel"] .uui-expandable-panel__header {
    align-items: center;
    gap: calc(var(--uui-spacing-2) + var(--uui-spacing-0-5));
}

.pcu-planning-entry-card__root [data-uui-component="expandable-panel"] .uui-expandable-panel__titles {
    gap: var(--uui-spacing-0-5);
}

.pcu-planning-entry-card__root .uui-muted {
    font-size: var(--uui-text-xs-font-size);
    line-height: var(--uui-text-xs-line-height);
}

.pcu-planning-entry-card__root [data-uui-component="expandable-panel"] .uui-expandable-panel__meta {
    font-size: var(--uui-text-xs-font-size);
    font-family: var(--uui-font-family), system-ui, sans-serif;
    font-weight: var(--uui-font-weight-regular);
    line-height: var(--uui-text-xs-line-height);
    color: var(--uui-text-quaternary);
}

/*
 * Figma (KI Fortbildungsplanung, `intro`): the chevron leads the row — chevron, headline, menu.
 * The panel keeps it last in the DOM because it only repeats the toggle for the pointer
 * (`tabindex="-1"`, `aria-hidden`), so moving it visually changes neither reading nor tab order.
 * Scoped to the card: the library's default, chevron last, stays for every other consumer.
 */
.pcu-planning-entry-card__root [data-uui-component="expandable-panel"] .uui-expandable-panel__chevron {
    order: -1;
}

/*
 * The header, the toggle and the chevron are `uui-expandable-panel`'s now — the card supplies
 * heading, meta, badges and body and owns none of that markup any more. What is left here is the
 * card's own composition.
 */
.pcu-planning-entry-card__body {
    display: grid;
    gap: var(--uui-spacing-4);
}

.pcu-planning-entry-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uui-spacing-4);
    color: var(--uui-text-tertiary);
}

.pcu-planning-entry-card__detail {
    display: inline-flex;
    align-items: center;
    gap: var(--uui-spacing-1);
}

.pcu-planning-entry-card__detail .uui-icon {
    --uui-icon-size: var(--uui-spacing-4);
    color: var(--uui-fg-quaternary);
}

.pcu-planning-entry-card__detail strong {
    font-weight: var(--uui-font-weight-semibold);
}

.pcu-planning-entry-card__date-picker > .uui-date-picker__root > uui-button {
    display: inline-flex;
}

.pcu-planning-entry-card__menu {
    position: relative;
}

/* ------------------------------------------------------------------ Chips */

.pcu-planning-entry-card__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uui-spacing-2);
}

.pcu-planning-entry-card__chips > uui-button {
    display: inline-flex;
}

/* ------------------------------------------------------------------ Meter */

.pcu-planning-entry-card__meter {
    display: grid;
    gap: var(--uui-spacing-1);
}

/*
 * The bar spans the card, as the design shows it.
 *
 * Measured: the host is as wide as the card (520px) but `__root` carries Figma's artboard width
 * of 320px, so the bar stopped short and the empty track looked like a rendering fault rather
 * than a measurement. Fifth frozen width released consumer-side; `!important` for the same
 * reason as the dialog fields — the generated rule is four compound selectors deep.
 */
.pcu-planning-entry-card__meter uui-progress-bar > .uui-progress-bar__root {
    inline-size: 100% !important;
}

/*
 * Over the target is information, not an error: a plan may deliberately overshoot, and Figma's
 * own example does (`01:28 Std / 1:00 Std geplant`). The hours keep the primary text colour
 * rather than a warning tint, and the bar itself keeps the component's own fill.
 */
.pcu-planning-entry-card__meter[data-over="true"] p strong {
    color: var(--uui-text-primary);
}

/* ---------------------------------------------------------------- Courses */

.pcu-planning-entry-card__courses-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--uui-spacing-2);
}

/* Manual course selection is a quiet alternative to asking the agent. */
.pcu-planning-entry-card__courses-head .uui-button__control {
    min-block-size: var(--uui-spacing-8);
}

.pcu-planning-entry-card__courses-head [data-uui-component="button"][size="xs"][hierarchy="link-gray"][state][icon-only] .uui-button__label {
    font-size: var(--uui-text-xs-font-size);
    line-height: var(--uui-text-xs-line-height);
    font-weight: var(--uui-font-weight-regular);
}

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

/*
 * The bottom card of the course list. Its own tint and dashed slot say "empty place", so it is
 * never mistaken for a course; the link on the right is the way to pick one by hand.
 *
 * Figma (7402:4237) draws #fff8f9 and #fef9fa, which are legacy values with no token; they are
 * the brand tint thinned towards white. The slot is the size of a course row's still (80×45), not
 * Figma's 108×54, and the padding is the row's, so the card lines up with the rows above it.
 */
.pcu-planning-entry-card__suggest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uui-spacing-2);
    padding: var(--uui-spacing-4);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-error-primary);
}

.pcu-planning-entry-card__suggest-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--uui-spacing-2);
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.pcu-planning-entry-card__suggest-main:disabled {
    cursor: progress;
}

.pcu-planning-entry-card__suggest-slot {
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 80px;
    block-size: 45px;
    border: 1px dashed var(--uui-color-brand-400);
    border-radius: var(--uui-radius-xs);
    background: color-mix(in srgb, var(--uui-color-brand-50) 25%, var(--uui-bg-primary));
    color: var(--uui-color-brand-400);
}

.pcu-planning-entry-card__suggest-text {
    display: grid;
    gap: var(--uui-spacing-1);
}

.pcu-planning-entry-card__suggest[data-busy="true"] {
    opacity: 0.7;
}

.pcu-course-row__root {
    display: grid;
    /* Still, text, remove — the still is `uui-thumbnail`, which brings its own width. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--uui-spacing-2);
    padding: var(--uui-spacing-2);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-secondary);
}

/*
 * The forecast line spans all three columns so it sits under the row rather than beside the ×,
 * and it is present in every state — "checked, all fine" has to be distinguishable from
 * "not checked yet", which a hint that only appears on trouble cannot do.
 */
.pcu-course-row__forecast {
    grid-column: 1 / -1;
    margin: 0;
    cursor: help;
}

.pcu-course-row__forecast[data-action="create"] {
    color: var(--uui-text-brand-secondary, var(--uui-color-brand-700));
}

.pcu-course-row__forecast[data-action="reuse"],
.pcu-course-row__forecast[data-action="noop"] {
    color: var(--uui-color-green-700);
}

.pcu-course-row__forecast[data-action="mixed"] {
    color: var(--uui-color-yellow-700);
}

.pcu-course-row__forecast[data-action="incomplete"] {
    color: var(--uui-color-error-700);
}

/*
 * The detail bubble carries one finding per line, so its newlines have to survive.
 * `!important` is the documented exception: Figma's rule is
 * `[data-uui-component][supporting-text][arrow] .uui-tooltip__supporting { white-space: normal }`
 * — four selectors, which no consumer selector can outweigh without pinning the variant.
 */
.pcu-course-row__tip .uui-tooltip__supporting {
    white-space: pre-line !important;
}

.pcu-course-row__text {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

/* Hidden only where hover exists; touch screens keep the × visible. Focus reveals it too. */
@media (hover: hover) {
    .pcu-course-row__root uui-button-close {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .pcu-course-row__root:hover uui-button-close,
    .pcu-course-row__root:focus-within uui-button-close {
        opacity: 1;
    }
}

/* Only a course that cannot simply be planned gets a frame; reuse is good news, not a warning. */
.pcu-course-row__root[data-action="mixed"],
.pcu-course-row__root[data-action="incomplete"] {
    box-shadow: inset 0 0 0 1px var(--uui-color-yellow-300);
}

/* -------------------------------------------------------- Add entry, foot */

.pcu-planning-board-device__add-entry {
    --uui-surface-padding: var(--uui-spacing-4);

    display: grid;
    gap: var(--uui-spacing-1);
    border-style: dashed;
    border-color: var(--uui-border-secondary);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    display:none;
}

.pcu-planning-board-device__foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--uui-spacing-4);
    flex-wrap: wrap;
}

/*
 * Step 2 puts the irreversibility notice *between* the two actions rather than under the
 * primary one: it has to be read on the way to the button, not after it.
 */
.pcu-planning-board-device__foot[data-step="analysis"] {
    justify-content: space-between;
}

.pcu-planning-board-device__foot-note {
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: end;
}

/* ----------------------------------------------------------------- Dialog */

/*
 * The three popups still run through `showCompactPopup`, so this styles their *contents* only.
 * The modal chrome is the platform's until a UUI Modal shell is imported — `Background overlay`
 * and the Modal set are both still missing from the bridge.
 */
.pcu-planning-board-device__dialog {
    display: grid;
    gap: var(--uui-spacing-4);
    min-inline-size: 0;
}

.pcu-planning-board-device__dialog-field {
    display: grid;
    gap: var(--uui-spacing-1-5);
}

/* The same label as `uui-input-field` draws for its own fields, so the knob's label matches. */
.pcu-planning-board-device__dialog-field > label {
    font-size: var(--uui-text-sm-font-size);
    line-height: var(--uui-text-sm-line-height);
    font-weight: var(--uui-font-weight-medium);
    color: var(--uui-text-secondary);
        font-family: var(--uui-font-family), sans-serif;
}

/*
 * 240 and not 200: at the UUI modal's width two 200px columns fit the boxes but not the labels —
 * "Stundenziel (Orientierung)" needs 210 and pushed the dialog 8px into a scrollbar. At 240 the
 * row simply becomes one column in a narrow dialog and stays two wherever there is room.
 */
.pcu-planning-board-device__dialog-row {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); */
    gap: var(--uui-spacing-4);
}

/*
 * Frozen Figma artboard widths, released consumer-side.
 *
 * Measured in the dialog: `uui-input-field` draws a 320px root and `uui-toggle` a 344px one,
 * because that is how wide the frame was in Figma. `UuiModalDialog` deliberately ignores the
 * `cssClass` that used to widen this dialog — that is how 177 legacy call sites resize theirs, and
 * the UUI shell exists to stop that — so the modal is one width and the content has to fit it.
 * At 419px the toggle alone overflowed its column by 143px and the dialog grew a horizontal
 * scrollbar. Same class of fix as the nav items, the tab strip and the sidebar in the showcase:
 * the component keeps its measured size everywhere else, the consumer releases it here.
 *
 * `!important` because the generated rule carries four compound selectors
 * (`[data-uui-component][size][label]…`) and a consumer selector cannot reach that weight without
 * pinning a variant. It is the same remedy the catalogue uses for the sidebar and the playground
 * fields, and it is deliberately scoped to this dialog.
 */
.pcu-planning-board-device__dialog uui-input-field > .uui-input-field__root,
.pcu-planning-board-device__dialog uui-input-field .uui-input-field__input,
.pcu-planning-board-device__dialog uui-toggle > .uui-toggle__root {
    inline-size: 100% !important;
}

/* ------------------------------------------------- Dialog shells (legacy) */

/*
 * The two platform pickers keep the legacy dialog, and the wide one needs the width it asks for.
 *
 * `showCompactPopup` puts its `cssClass` on `.modal_dialog`; this board has always passed
 * `--wide` for the course selector and, until 2026-09-25, nothing ever styled it — so the
 * selector (1,320px at its natural size) spilled out of an 848px dialog on both sides. Same
 * mechanism as `.rd-compact-popup-addon-trial` in ArbeitschutzBetaInfo.css, which is the house
 * precedent for a compact popup that needs more room.
 *
 * `min()` rather than a flat width: on a laptop the viewport is the smaller constraint, and a
 * dialog wider than the screen is the bug this is fixing, not a different one.
 */
.pcu-planning-board-device__dialog-modal--wide.rd-compact-popup-modal {
    inline-size: min(1380px, 94vw);
    max-inline-size: none;
}

/* The selector fills the widened dialog instead of keeping its own intrinsic width. */
.pcu-planning-board-device__dialog-modal--wide pc-course-selectorv2 {
    inline-size: 100%;
}

/*
 * The loading course row.
 *
 * Skeletons rather than a spinner, per the house rule for client-rendered components: the row
 * keeps the height and shape it will have, so the list does not jump when the batch lands. The
 * pulse is the only animation, and `prefers-reduced-motion` turns it off — a resting grey block
 * still reads as "not yet here".
 */
.pcu-course-row__root[data-loading="true"] {
    grid-template-columns: auto minmax(0, 1fr);
}

.pcu-course-row__thumb-skeleton {
    inline-size: 80px;
    aspect-ratio: 16 / 9;
    border-radius: var(--uui-radius-md);
    background: var(--uui-color-neutral-100);
    animation: pcu-course-row-pulse 1.4s ease-in-out infinite;
}

.pcu-course-row__line-skeleton {
    display: block;
    inline-size: min(280px, 70%);
    block-size: 0.9em;
    border-radius: var(--uui-radius-xs);
    background: var(--uui-color-neutral-100);
    animation: pcu-course-row-pulse 1.4s ease-in-out infinite;
}

@keyframes pcu-course-row-pulse {
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .pcu-course-row__thumb-skeleton,
    .pcu-course-row__line-skeleton {
        animation: none;
    }
}