/* Working-calendar administration (M-435a3) — the list, the create/edit form, the deltas editor, the year
   preview and the assignment overview.

   Everything is token-driven, so light↔dark is a token switch and a host theme reaches it too. Mobile-first:
   the base rules are the 390px layout and the media queries ADD the desktop affordances, never the other way
   round. The two wide things on the page — the year preview and the assignment overview — scroll inside
   `.platform-table-wrap` (table.css), never the page, which is the card's own rule.

   Presentation only: no behaviour, no strings. The shared primitives (card, table, badge, form control,
   checkbox, radio) come from their own sheets; this file styles the arrangement. */

/* ── The list ─────────────────────────────────────────────────────────────────────────────────── */

.platform-calendars__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--platform-space-sm, 0.5rem);
    margin-bottom: var(--platform-space-md, 1rem);
}

/* The name cell stacks: the link, its stable key, and the description if it has one. The key is what a
   derived calendar and a NonWorkingDay origin point at, so it stays visible rather than hidden in the form.

   The stack is made of BLOCK children, and the cell stays a plain table cell (M-523). It used to be
   `display: flex` — which took the cell out of the table's own layout: `vertical-align` stops applying to a
   flex cell, so the name sat at a different height from the `<td>`s beside it and the row read as broken.
   The measure is capped on the CONTENT, not on the cell: `max-width` does not apply to a table cell at all
   (CSS 2.1 §17.5.2 — a cell's width is a hint the auto table algorithm may overrule), so a cap there would
   have quietly done nothing. Capping the three block children instead does work, and works the way a table
   should: the column's max-content contribution stops growing at the cap, the other columns get the width
   back, and a long name or description wraps at a comfortable measure instead of stretching the row.

   All three break a long word rather than spilling out of the cell — a key is one unbroken token by
   construction (`cz-praha-nepretrzity-provoz`) and a name or description is whatever an admin typed.
   `break-word`, deliberately NOT `anywhere`: `anywhere` also counts toward the cell's MIN-content width, so
   the auto table algorithm reads the column as "one character wide", hands the width to its neighbours and
   turns the name into a vertical ladder at phone width (measured: a 42px column, 208px tall). `break-word`
   breaks the same words at render time while the column still sizes to its longest word. */
.platform-calendars__link,
.platform-calendars__key,
.platform-calendars__description {
    display: block;
    max-width: 24rem;
    overflow-wrap: break-word;
}

.platform-calendars__key,
.platform-calendars__description {
    font-size: var(--platform-font-size-xs, 0.75rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--platform-color-text-muted, #57606a);
}

/* The same monospace stack the managed-lookup code column uses — there is no mono token, and inventing one
   here would be a token nobody else reads. */
.platform-calendars__key {
    font-family: ui-monospace, "SFMono-Regular", monospace;
}

.platform-calendars__col--number {
    text-align: right;
    white-space: nowrap;
}

/* The state pills sit INLINE in their cell, not in a flex row (M-523 — the name cell's defect exactly: a
   flex table cell drops out of the table's own alignment). Inline-blocks separated by a space already wrap
   by themselves; the looser line-height is what gives a wrapped second pill its air. */
.platform-calendars__state {
    line-height: 1.8;
}

/* The "derive, don't copy" guidance: the one rule that keeps the whole model working, so it reads as a note
   rather than as body copy. */
.platform-calendars__guidance {
    margin-top: var(--platform-space-md, 1rem);
    padding: var(--platform-space-sm, 0.5rem) var(--platform-space-md, 1rem);
    border-left: 3px solid var(--platform-color-accent, #16a085);
    background: var(--platform-color-surface-muted, #ecf0f1);
    border-radius: var(--platform-radius-sm, 0.25rem);
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text-muted, #57606a);
}

/* ── The editor's left column ─────────────────────────────────────────────────────────────────── */

/* The column stacks the calendar form and the "this calendar" actions card. The shared card rhythm
   (admin.css) deliberately reaches only cards that are DIRECT children of the page section, and these sit
   inside a layout column — so without this the two cards' borders touch and read as one broken box. Scoped
   to this page's left column, the container that owns the stack. */
.platform-calendar-form .platform-col-left > * + .platform-card {
    margin-top: var(--platform-space-lg, 1.5rem);
}

/* ── The editor's second band: day rules + history ────────────────────────────────────────────── */

/* The day rules and the change history sit BELOW the two-column editor, at full page width, and this is
   what makes that deliberate (M-523). They used to be two loose cards flush against the bottom of the
   taller column, which read as sections dumped on top of the editor rather than as the next thing down
   the page. The rule + the air above it is the section boundary; the band itself is also a
   `.platform-stack`, so the gap BETWEEN its cards comes from the shared card rhythm (admin.css) instead
   of a second definition of it here. */
.platform-calendar-form__sections {
    margin-top: var(--platform-space-lg, 1.5rem);
    padding-top: var(--platform-space-lg, 1.5rem);
    border-top: 1px solid var(--platform-color-border, #d0d7de);
}

/* ── The form: base + weekend choosers ────────────────────────────────────────────────────────── */

/* A panel belongs to the radio above it, so it is indented to read as subordinate rather than as the next
   question. The inactive state is dimmed but NOT hidden: an admin has to be able to see what the option they
   did not choose would have offered, which is half of making the exclusivity obvious. */
.platform-calendar-form__panel {
    margin: 0 0 var(--platform-space-sm, 0.5rem) 1.6rem;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs, 0.25rem);
}

.platform-calendar-form__panel--inactive {
    opacity: 0.45;
}

/* The weekday checkbox row wraps rather than overflowing — at 390px it becomes two or three lines of
   comfortable tap targets instead of one line that scrolls sideways. */
.platform-calendar-form__days {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--platform-space-sm, 0.5rem) var(--platform-space-md, 1rem);
}

.platform-calendar-form__day {
    min-height: 2rem;
}

/* ── The whole-calendar actions card ──────────────────────────────────────────────────────────── */

.platform-calendar-actions__facts {
    margin: 0 0 var(--platform-space-sm, 0.5rem);
    padding-left: 1.1rem;
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text-muted, #57606a);
}

.platform-calendar-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--platform-space-sm, 0.5rem);
    align-items: center;
}

.platform-calendar-actions__note {
    margin: 0;
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text-muted, #57606a);
}

/* ── The deltas editor ────────────────────────────────────────────────────────────────────────── */

.platform-calendar-deltas__list {
    list-style: none;
    margin: var(--platform-space-md, 1rem) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-md, 1rem);
}

/* Each rule is its own bordered block, because a rule is a sentence's worth of fields and a table row would
   force five columns onto a 390px screen. */
.platform-calendar-deltas__row,
.platform-calendar-deltas__add {
    padding: var(--platform-space-sm, 0.5rem);
    border: 1px solid var(--platform-color-border, #d0d7de);
    border-radius: var(--platform-radius-sm, 0.25rem);
    background: var(--platform-color-surface, #ffffff);
}

.platform-calendar-deltas__add {
    margin-top: var(--platform-space-sm, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-sm, 0.5rem);
    align-items: flex-start;
}

/* MOBILE FIRST: one field per line at 390px. The desktop rule below turns this into a wrapping row — so the
   narrow layout is the default and cannot be forgotten. */
.platform-calendar-deltas__fields {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-sm, 0.5rem);
}

.platform-calendar-deltas__group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--platform-space-sm, 0.5rem);
    align-items: flex-end;
}

/* Hidden by the `calendar-delta` controller for the rule types that do not apply. A class, never an inline
   style (§4) — and the controller also disables the inputs, so a hidden group submits nothing. */
.platform-calendar-deltas__group--hidden {
    display: none;
}

.platform-calendar-deltas__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--platform-space-sm, 0.5rem);
    margin-top: var(--platform-space-sm, 0.5rem);
    padding-top: var(--platform-space-xs, 0.25rem);
    border-top: 1px dashed var(--platform-color-border, #d0d7de);
}

/* The rule in words. `offset = 39` means nothing to the person verifying the calendar; this line is what
   they actually read, so it gets weight rather than being a footnote. */
.platform-calendar-deltas__summary {
    margin: 0;
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text, #2c3e50);
}

.platform-calendar-deltas__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platform-space-sm, 0.5rem);
    margin-top: var(--platform-space-md, 1rem);
}

/* The dirty cue, revealed by the `unsaved-changes` guard adding `is-dirty` to the form — the same pattern as
   the managed-lookup editor, so the two behave identically. */
.platform-calendar-deltas__unsaved {
    display: none;
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-warning, #d97706);
}

.is-dirty .platform-calendar-deltas__unsaved {
    display: inline;
}

.platform-calendar-deltas__delete-form {
    display: none;
}

/* ── The year preview ─────────────────────────────────────────────────────────────────────────── */

/* Three structurally unlike controls on one line: a label+select stack, the checkbox component, a bare
   button. `align-items: flex-end` alone was not enough (M-523) — it lines up the bottom EDGES of three
   boxes of different intrinsic height, and the checkbox was only 21.6px tall (a 1.15rem tick box on one
   line of text) against the button's 30.4px, so its tick sat ~4px below the middle of everything beside it.
   What lines them up is bottom alignment PLUS a shared floor: the checkbox and the button are both
   `--platform-input-height` (30.4px), the token that says what a full-size control measures, and each
   centres its own content. The native select is NOT that height —
   it measures 34.8px, ~4.4px taller than the token, which is a platform-wide select/button discrepancy
   this card does not fix; bottom-aligning is precisely what makes that irrelevant here, because the three
   controls share a baseline edge and the select simply stands 4.4px taller.

   The column gap is `--space-sm`, the same as every other control cluster in this sheet
   (`.platform-calendar-deltas__group`, `.platform-calendar-actions__buttons`): this is a control strip, not
   a form, and `--space-md` was the outlier. It also leaves the row real slack at the narrowest xl column
   (measured below), which is why nothing has to shrink at the common desktop widths. */
.platform-calendar-preview__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--platform-space-sm, 0.5rem);
    margin-bottom: var(--platform-space-sm, 0.5rem);
}

/* Scoped to this row: a checkbox anywhere else is an ordinary inline control and must keep its own height. */
.platform-calendar-preview__controls > .platform-checkbox {
    min-height: var(--platform-input-height, 1.9rem);
}

/* MOBILE FIRST: at phone width the row genuinely has to wrap, and it does — the Show button takes its own
   line under the year and the toggle, which is the deliberate narrow layout. The desktop rule at the end of
   this sheet is what guarantees the single line above 48em. */

.platform-calendar-preview__year {
    max-width: 9rem;
}

.platform-calendar-preview__weekend {
    margin: 0 0 var(--platform-space-sm, 0.5rem);
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text-muted, #57606a);
}

/* A whole year of weekends is ~114 rows, so the preview gets its own scroll box: the page never grows a
   second scrollbar and the controls above stay reachable. */
.platform-calendar-preview__wrap {
    max-height: 28rem;
    overflow: auto;
}

/* A date is one value and must not be broken across lines; that is the ONLY thing here that needs nowrap.
   It used to carry the weekday as well, and the two of them under one nowrap fought for the column's width
   (M-523) — the weekday is now a column of its own, secondary in tone because the date is what is scanned. */
.platform-calendar-preview__date {
    white-space: nowrap;
}

.platform-calendar-preview__weekday {
    color: var(--platform-color-text-muted, #57606a);
}

/* A day this calendar itself decided — what an admin is looking for after adding a rule. */
.platform-calendar-preview__row--own {
    background: var(--platform-color-surface-muted, #ecf0f1);
}

/* ── The assignment overview ──────────────────────────────────────────────────────────────────── */

.platform-calendar-assignments__email {
    display: block;
    font-size: var(--platform-font-size-xs, 0.75rem);
    font-weight: 400;
    color: var(--platform-color-text-muted, #57606a);
}

/* The flags cell had the same defect as the list's name cell (M-523): a `display: flex` table cell stops
   being laid out as a cell — it kept its own content height inside a taller row and sat at the top of it
   instead of vertically centred with the two cells beside it. It is a table cell again, and the stack is
   made by the explanation below each pill being a BLOCK, which puts every pill on a line of its own. */
.platform-calendar-assignments__explain {
    display: block;
    font-size: var(--platform-font-size-xs, 0.75rem);
    line-height: 1.4;
    color: var(--platform-color-text-muted, #57606a);
}

/* A second flag under the first needs the air the flex `gap` used to give it. */
.platform-calendar-assignments__explain + .platform-badge {
    margin-top: 0.2rem;
}

.platform-calendar-assignments__row--flagged {
    background: var(--platform-color-surface-muted, #ecf0f1);
}

/* ── Desktop affordances ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 48em) {
    /* A rule's fields sit on one wrapping line once there is room; below this they stay stacked. */
    .platform-calendar-deltas__fields {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .platform-calendar-deltas__field--effect,
    .platform-calendar-deltas__field--type {
        flex: 1 1 12rem;
    }

    .platform-calendar-deltas__field--label {
        flex: 2 1 14rem;
    }

    /* Scoped to the rule row, never a bare `--narrow`: a shared flex-item's basis has to belong to the row
       it sits in, or it leaks into every other flex container that reuses the class. */
    .platform-calendar-deltas__group .platform-calendar-deltas__field--narrow {
        flex: 0 0 6rem;
    }

    .platform-calendar-deltas__active {
        flex: 0 0 auto;
        align-self: center;
    }

    /* The preview controls are ONE line from here up, and they are one line by CONSTRUCTION, not by
       arithmetic (M-523, QA).
       `flex-wrap: wrap` breaks a line BEFORE it shrinks anything: an item goes to the next line whenever the
       three intrinsic widths plus the gaps exceed the row by any amount at all. That is exactly what
       happened — at 1280x800 the row measured 319.75px and the controls wanted 319.91px, so the Show button
       dropped to its own line over a sixth of a pixel, in an ~85px band of viewport widths that happens to
       contain the commonest desktop size there is. Widening the row (a smaller gap, a narrower select) would
       only move that band somewhere else and it would come back the next time the column split is touched.
       So the wrap is turned OFF here and the row SHRINKS instead — and exactly ONE control is allowed to do
       the giving (the three rules below). However narrow the column gets — a wider split, a longer
       translation — the worst that happens is the toggle's label on two lines, and the three controls stay
       on one line at every width above this breakpoint.
       48em, not `xl`: below it the two-column region has already stacked, so the card is full width and the
       row has acres of room; the only tight case is the xl split, which this covers. Below 48em the base
       rule above keeps the deliberate wrapping phone layout. */
    .platform-calendar-preview__controls {
        flex-wrap: nowrap;
    }

    /* The select does not shrink AT ALL, because it has no legible shrink range to give: Chromium's
       intrinsic width for it is 67.19px and that is all content — 8px of padding, ~34px of "2026", 25.2px
       of arrow — so the very first pixel taken off it clips the year. That makes `flex-shrink: 0` the
       honest rule and a `min-width` floor a fiction: there is no number between "intrinsic" and "clipped"
       to pick, and an earlier draft picked 4rem, which sat 3px INSIDE the digits (caught in review).
       A guard whose invariant is "the select never goes below its floor" cannot see that; the property that
       matters is "the year is fully rendered", and the only rule that guarantees it is not shrinking. */
    .platform-calendar-preview__controls > .platform-calendar-preview__year {
        flex: 0 0 auto;
    }

    /* So the toggle is the one that gives, and it gives GRACEFULLY: with `min-width: 0` (a flex item
       defaults to `auto`, which would floor it at its content and push the row wide again) it takes the
       whole deficit by wrapping its LABEL onto a second line. Taller row, still one line of controls, every
       one of them fully legible. */
    .platform-calendar-preview__controls > .platform-checkbox {
        min-width: 0;
    }

    /* The button never shrinks either: it is 79px of label that has to stay readable, and it is the control
       the no-JS path depends on. */
    .platform-calendar-preview__controls > .platform-btn {
        flex: 0 0 auto;
    }
}