/*
 * pcu-planning-run-dialog — the confirmation and progress screen behind "Board planen".
 *
 * HUMAN-OWNED, and the same two rules as `PcuPlanningBoardDevice.css`:
 *
 * 1. ONLY `--uui-*`. No literal colour, radius, shadow or spacing value, and no `--rd-*`.
 * 2. LAYOUT ONLY. The surface, header and scrim come from `uui-modal-overlay` / `uui-modal`,
 *    the notices from `uui-alert`, the bar from `uui-progress-bar`, the buttons from
 *    `uui-button`. What is left here is the figure row, the progress block and the step record
 *    of a stopped run.
 *
 * The one thing drawn here is the step-state pill of that record. There is no published
 * component for "this write is pending / done / failed", and inventing a `uui-*` for a marker
 * that exists in exactly one dialog would be the wrong direction — if Figma ever publishes a
 * status indicator, this block is what disappears. Its colour is state-carried, not decoration:
 * the record is the only account of which writes already happened when a run stops half way.
 *
 * Folder: logged-in users — nothing anonymous plans Fortbildungen.
 */

pcu-planning-run-dialog {
    display: contents;
}

/*
 * This component is its own modal host, so the stacking is its job (the library leaves
 * z-index to the host in both shells, see `UuiModalHost.css`). The overlay's root and stage are
 * `position: fixed` with `z-index: auto`, and the dialog renders inside `pcu-bot-ui`, whose
 * stacking context also holds the analysis charts (`z-index: 1/2`), the stepper and the shell
 * footer. With `auto` the scrim painted *under* those — bars, axis labels and the "Jetzt
 * einplanen" button showed through the dialog (2026-10-01). Any positive value above the
 * charts' 2 lifts both layers over everything else in the window.
 */
pcu-planning-run-dialog .uui-modal-overlay__root,
pcu-planning-run-dialog .uui-modal-overlay__stage {
    z-index: 10;
}

/*
 * No width of its own: since `uui-modal-body.css` the body is the definite 544px surface with
 * Figma's 24px inline inset, so the content fills it. The earlier `inline-size: min(34rem, 90vw)`
 * — 544px *plus* the body's inset — was 24px wider than the body and gave the dialog a
 * horizontal scrollbar. The body still needs `min-inline-size: 0`: it is a flex item, and its
 * default `auto` would let one long sentence widen it past the surface again.
 */
pcu-planning-run-dialog .uui-modal__body {
    min-inline-size: 0;
}

.pcu-planning-run-dialog__content {
    box-sizing: border-box;
    min-inline-size: 0;
    /* Figma's body sits directly under the header's own spacer; only the bottom inset is left. */
    padding-block: 0 var(--uui-spacing-6);
    display: grid;
    /* `minmax(0, 1fr)`, not the implicit `auto`: an auto track never shrinks below its items'
       min-content, and `uui-alert` in its desktop row layout reports ~1280px of it. The children
       would then push out of the 544px surface and the dialog would scroll sideways. Every grid
       in this file needs it for the same reason. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uui-spacing-5);
    align-content: start;
}

.pcu-planning-run-dialog__body,
.pcu-planning-run-dialog__summary,
.pcu-planning-run-dialog__progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uui-spacing-4);
    align-content: start;
}

.pcu-planning-run-dialog__summary p,
.pcu-planning-run-dialog__current {
    margin: 0;
}

/* ---------------------------------------------------------------- Figures */

.pcu-planning-run-dialog__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--uui-spacing-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pcu-planning-run-dialog__figures li {
    display: grid;
    gap: var(--uui-spacing-1);
    align-content: start;
    min-inline-size: 0;
}

.pcu-planning-run-dialog__figure {
    color: var(--uui-text-primary);
}

/* The courses whose group chips are written as names; one line each, under the warning alert. */
.pcu-planning-run-dialog__notes {
    margin: 0;
    padding-inline-start: var(--uui-spacing-5);
    display: grid;
    gap: var(--uui-spacing-1);
    color: var(--uui-text-secondary);
}

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

.pcu-planning-run-dialog__progress-line {
    display: flex;
    justify-content: space-between;
    gap: var(--uui-spacing-3);
}

/* The sentence changes with every step; a fixed two-line box keeps the dialog from jumping. */
.pcu-planning-run-dialog__current {
    min-block-size: calc(2 * var(--uui-text-sm-line-height));
}

/* ----------------------------------------------------------------- Record */

.pcu-planning-run-dialog__steps {
    display: grid;
    gap: var(--uui-spacing-2);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    /* The list is the thing that can grow without bound: 20 courses × several operations. The
       dialog surface must not grow with it, so the list scrolls and the notice and the actions
       stay visible — they are the two parts the customer must be able to reach. */
    max-block-size: min(46vh, 32rem);
    overflow-y: auto;
}

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

.pcu-planning-run-dialog__step-state {
    inline-size: 6.5rem;
    padding: var(--uui-spacing-0-5) var(--uui-spacing-2);
    border-radius: var(--uui-radius-full);
    font-size: var(--uui-text-xs-font-size);
    line-height: var(--uui-text-xs-line-height);
    text-align: center;
    background: var(--uui-bg-secondary);
    color: var(--uui-text-secondary);
}

.pcu-planning-run-dialog__step[data-state="running"] .pcu-planning-run-dialog__step-state {
    background: var(--uui-color-brand-100);
    color: var(--uui-color-brand-700);
}

.pcu-planning-run-dialog__step[data-state="done"] .pcu-planning-run-dialog__step-state {
    background: var(--uui-color-green-100);
    color: var(--uui-color-green-700);
}

.pcu-planning-run-dialog__step[data-state="failed"] .pcu-planning-run-dialog__step-state {
    background: var(--uui-color-red-100);
    color: var(--uui-color-red-700);
}

/* ---------------------------------------------------------------- Actions */

.pcu-planning-run-dialog__actions {
    display: flex;
    gap: var(--uui-spacing-3);
    justify-content: flex-end;
    /*
     * `uui-modal-actions` puts 32px above its divider, the 1px divider, and 24px below it: 57px
     * from the body to the buttons. The grid's own 20px row gap is already part of that.
     */
    margin-block-start: calc(var(--uui-spacing-4xl) + 1px + var(--uui-spacing-3xl) - var(--uui-spacing-5));
}