/* THE TIMELINE (M-723a) — one row per subject over a shared axis of days, so an overlap is read by looking
 * DOWN a column. The year calendar's sibling: it answers "when, and who with", where the year answers "how
 * much, all year".
 *
 * Presentation only. The markup is <x-platform::timeline> (one server render, no behaviour at all — there is no
 * Stimulus controller here, and nothing to toggle), and every colour is a design token. The five bar tones and
 * the load row's shades are calendar-tones.css's, shared with the year calendar so a "dovolená" bar and a
 * "dovolená" day are one colour declared once.
 *
 * ## The whole trick, in one paragraph
 * Every row is a fixed NAME cell plus a `__track` grid, and each track's columns are created IMPLICITLY by the
 * items placed in them (`grid-auto-columns`). The ruler places one item per day, a lane places one day cell per
 * day, and the load row one cell per day — so every track ends up with the same number of identically-sized
 * columns in the same width, and they line up without a shared template and without Blade counting anything.
 * `minmax(cell, 1fr)` is what makes them fill a desktop and hold their minimum on a phone, where the viewport
 * takes the overflow.
 *
 * ## Placement is by attribute, never by an inline style
 * `data-column` / `data-span` / `data-track` and the generated block at the foot of this file — §4 forbids
 * inline styles, and an attribute survives with scripting off. The rules are therefore finite:
 * TimelineViewBuilder::MAX_COLUMNS and ::MAX_TRACKS say how many, and TimelineComponentTest fails if the two
 * part company. */

.platform-timeline {
    /* The narrowest a day column may be. Below this the axis stops shrinking and the viewport scrolls — a
       column that shrank with the glass would make "a month at a glance" mean something different per device,
       which is the year calendar's own rule for its months shape. Sized for a two-digit day number. */
    --platform-timeline-cell: 1.5rem;
    /* The name column. Wide enough for a first name and most surnames at this font size; a longer one
       ellipsizes rather than pushing the axis sideways. */
    --platform-timeline-name: 9.5rem;
    --platform-timeline-gap: 1px;
}

/* THE responsive decision (§12): the axis scrolls inside ITSELF and the page never scrolls sideways. */
.platform-timeline__viewport {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

/* `max-content` so the rows are as wide as the axis needs and the whole table scrolls as one; `min-width: 100%`
   so a month that FITS still fills the card rather than huddling on the left. */
.platform-timeline__table {
    width: max-content;
    min-width: 100%;
}

.platform-timeline__row {
    display: grid;
    grid-template-columns: var(--platform-timeline-name) auto;
    align-items: stretch;
    gap: 0 var(--platform-space-sm);
}

/* The sticky first column: the whole point of scrolling an axis is that you can still see WHOSE row it is.
   It paints the card's own surface, or the day cells would slide visibly under it. */
.platform-timeline__name {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0.15rem 0;
    background: var(--platform-color-surface);
    color: var(--platform-color-text);
    font-size: var(--platform-font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A column of names is not a wall of links: they keep the row's text colour and announce themselves on hover,
   the same rule the absences list applies to its own row links. */
a.platform-timeline__name {
    text-decoration: none;
}

a.platform-timeline__name:hover,
a.platform-timeline__name:focus-visible {
    text-decoration: underline;
}

/* One row's day area. The implicit columns are the days; `grid-auto-rows: auto` gives a lane its bands. */
.platform-timeline__track {
    display: grid;
    grid-auto-columns: minmax(var(--platform-timeline-cell), 1fr);
    grid-auto-flow: column;
    gap: var(--platform-timeline-gap);
    align-items: stretch;
}

/* ── The head: the month band and the ruler ──────────────────────────────────────────────────────── */

.platform-timeline__month {
    padding-bottom: 0.15rem;
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-xs);
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
}

.platform-timeline__tick {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--platform-color-border);
    color: var(--platform-color-text-muted);
    font-size: 0.6rem;
    line-height: 1.2;
}

.platform-timeline__tick[data-weekend] {
    color: var(--platform-color-text-muted);
    background: var(--platform-color-surface-muted);
}

/* Today, on the ruler and (below) down every lane: the one column a reader looks for first. */
.platform-timeline__tick[data-today] {
    border-bottom-color: var(--platform-color-accent-strong);
    color: var(--platform-color-text);
    font-weight: 700;
}

.platform-timeline__tick-day {
    font-size: 0.7rem;
}

/* ── The load row ────────────────────────────────────────────────────────────────────────────────── */

/* How many are away in each column, shaded on calendar-tones.css's ramp. The tone is the accent by default —
   the row counts one kind of thing, so it needs no vocabulary of its own. */
.platform-timeline__load {
    --platform-calendar-tone: var(--platform-color-accent);

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.05rem;
    border-radius: 2px;
    color: var(--platform-color-text);
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
}

/* The strongest shades carry text on top of a saturated fill, so the ink flips with them — the same pair the
   badges use. */
.platform-timeline__load[data-intensity="4"],
.platform-timeline__load[data-intensity="5"] {
    color: var(--platform-color-on-accent);
}

/* ── A lane ──────────────────────────────────────────────────────────────────────────────────────── */

.platform-timeline__lane {
    border-top: 1px solid var(--platform-color-border);
}

.platform-timeline__lane:hover .platform-timeline__name {
    background: var(--platform-color-surface-muted);
}

/* The day layer. It spans every band of its lane (`grid-row: 1 / -1`), so the weekend shading runs BEHIND the
   bars rather than being covered by them — which is what makes "off over the weekend too" and "off Friday and
   Monday" different pictures. */
.platform-timeline__day {
    grid-row: 1 / -1;
    min-height: 1.4rem;
    border-radius: 2px;
    background: var(--platform-color-surface);
}

.platform-timeline__day[data-state="weekend"] {
    background: var(--platform-color-surface-muted);
}

.platform-timeline__day[data-state="non-working"] {
    background: var(--platform-color-accent-surface);
}

/* Today's column, marked down the whole lane rather than only on the ruler: what lets a reader drop from
   "today" to "who is out today" without counting columns.

   TWO HAIRLINES, not a ring. A full inset ring on every lane draws an empty BOX in each row — one artifact per
   person, which reads as a cell that failed to render rather than as the column everybody's eye should start
   from. Left and right edges alone join up into one vertical guide down the table, which is the thing being
   drawn. */
.platform-timeline__day[data-today] {
    box-shadow:
        inset 1px 0 0 0 var(--platform-color-accent-strong),
        inset -1px 0 0 0 var(--platform-color-accent-strong);
}

/* ── The bars ────────────────────────────────────────────────────────────────────────────────────── */

/* A bar sits INSIDE its columns' gaps and above the day layer. `position: relative` with the label absolutely
   placed is load-bearing rather than decorative: a grid item's text contributes to the max-content size of the
   tracks it spans, so a label left in flow would widen exactly the columns a long absence name happens to
   cover — the axis would stop being evenly spaced because somebody's holiday is called something long. Out of
   flow, the bar contributes nothing and the ruler decides the width. */
.platform-timeline__bar {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 1.1rem;
    margin: 0.15rem 0;
    border-radius: 3px;
    background: var(--platform-calendar-tone, var(--platform-color-accent));
    color: var(--platform-color-on-accent);
    text-decoration: none;
}

.platform-timeline__bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 0.25rem;
    font-size: 0.6rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.platform-timeline__bar:hover,
a.platform-timeline__bar:focus-visible {
    box-shadow: 0 0 0 2px var(--platform-color-accent-strong);
}

/* A bar cut at the window's edge loses that end's rounding, so a holiday that started last month does not read
   as starting on the 1st. Colour is not the channel here — the bar's accessible name states its real period,
   whatever the window shows. */
.platform-timeline__bar[data-continues="before"],
.platform-timeline__bar[data-continues="both"] {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: calc(-1 * var(--platform-timeline-gap));
}

.platform-timeline__bar[data-continues="after"],
.platform-timeline__bar[data-continues="both"] {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    margin-inline-end: calc(-1 * var(--platform-timeline-gap));
}

/* ── The empty state ─────────────────────────────────────────────────────────────────────────────── */

.platform-timeline__table > .platform-empty {
    margin: var(--platform-space-md) 0 0;
}

/* ══ Placement ═══════════════════════════════════════════════════════════════════════════════════════
 * The boring block the whole layout rests on, and the reasons are the year calendar's (see its own note): a
 * cell placed by its OWN attribute is right even when the cell before it is missing or reordered, it needs no
 * inline style, and it holds with scripting off. Generated, one rule per line — if the model's ceiling ever
 * changes, TimelineComponentTest goes red rather than a 32nd day quietly piling up in column 1.
 *
 * Three sets: where a thing STARTS (data-column), how wide it is (data-span, which must come after the start
 * rules — it overrides only the end of the shorthand those set), and which band a bar sits in (data-track). */

.platform-timeline__track > [data-column="1"] { grid-column: 1; }
.platform-timeline__track > [data-column="2"] { grid-column: 2; }
.platform-timeline__track > [data-column="3"] { grid-column: 3; }
.platform-timeline__track > [data-column="4"] { grid-column: 4; }
.platform-timeline__track > [data-column="5"] { grid-column: 5; }
.platform-timeline__track > [data-column="6"] { grid-column: 6; }
.platform-timeline__track > [data-column="7"] { grid-column: 7; }
.platform-timeline__track > [data-column="8"] { grid-column: 8; }
.platform-timeline__track > [data-column="9"] { grid-column: 9; }
.platform-timeline__track > [data-column="10"] { grid-column: 10; }
.platform-timeline__track > [data-column="11"] { grid-column: 11; }
.platform-timeline__track > [data-column="12"] { grid-column: 12; }
.platform-timeline__track > [data-column="13"] { grid-column: 13; }
.platform-timeline__track > [data-column="14"] { grid-column: 14; }
.platform-timeline__track > [data-column="15"] { grid-column: 15; }
.platform-timeline__track > [data-column="16"] { grid-column: 16; }
.platform-timeline__track > [data-column="17"] { grid-column: 17; }
.platform-timeline__track > [data-column="18"] { grid-column: 18; }
.platform-timeline__track > [data-column="19"] { grid-column: 19; }
.platform-timeline__track > [data-column="20"] { grid-column: 20; }
.platform-timeline__track > [data-column="21"] { grid-column: 21; }
.platform-timeline__track > [data-column="22"] { grid-column: 22; }
.platform-timeline__track > [data-column="23"] { grid-column: 23; }
.platform-timeline__track > [data-column="24"] { grid-column: 24; }
.platform-timeline__track > [data-column="25"] { grid-column: 25; }
.platform-timeline__track > [data-column="26"] { grid-column: 26; }
.platform-timeline__track > [data-column="27"] { grid-column: 27; }
.platform-timeline__track > [data-column="28"] { grid-column: 28; }
.platform-timeline__track > [data-column="29"] { grid-column: 29; }
.platform-timeline__track > [data-column="30"] { grid-column: 30; }
.platform-timeline__track > [data-column="31"] { grid-column: 31; }

.platform-timeline__track > [data-span="1"] { grid-column-end: span 1; }
.platform-timeline__track > [data-span="2"] { grid-column-end: span 2; }
.platform-timeline__track > [data-span="3"] { grid-column-end: span 3; }
.platform-timeline__track > [data-span="4"] { grid-column-end: span 4; }
.platform-timeline__track > [data-span="5"] { grid-column-end: span 5; }
.platform-timeline__track > [data-span="6"] { grid-column-end: span 6; }
.platform-timeline__track > [data-span="7"] { grid-column-end: span 7; }
.platform-timeline__track > [data-span="8"] { grid-column-end: span 8; }
.platform-timeline__track > [data-span="9"] { grid-column-end: span 9; }
.platform-timeline__track > [data-span="10"] { grid-column-end: span 10; }
.platform-timeline__track > [data-span="11"] { grid-column-end: span 11; }
.platform-timeline__track > [data-span="12"] { grid-column-end: span 12; }
.platform-timeline__track > [data-span="13"] { grid-column-end: span 13; }
.platform-timeline__track > [data-span="14"] { grid-column-end: span 14; }
.platform-timeline__track > [data-span="15"] { grid-column-end: span 15; }
.platform-timeline__track > [data-span="16"] { grid-column-end: span 16; }
.platform-timeline__track > [data-span="17"] { grid-column-end: span 17; }
.platform-timeline__track > [data-span="18"] { grid-column-end: span 18; }
.platform-timeline__track > [data-span="19"] { grid-column-end: span 19; }
.platform-timeline__track > [data-span="20"] { grid-column-end: span 20; }
.platform-timeline__track > [data-span="21"] { grid-column-end: span 21; }
.platform-timeline__track > [data-span="22"] { grid-column-end: span 22; }
.platform-timeline__track > [data-span="23"] { grid-column-end: span 23; }
.platform-timeline__track > [data-span="24"] { grid-column-end: span 24; }
.platform-timeline__track > [data-span="25"] { grid-column-end: span 25; }
.platform-timeline__track > [data-span="26"] { grid-column-end: span 26; }
.platform-timeline__track > [data-span="27"] { grid-column-end: span 27; }
.platform-timeline__track > [data-span="28"] { grid-column-end: span 28; }
.platform-timeline__track > [data-span="29"] { grid-column-end: span 29; }
.platform-timeline__track > [data-span="30"] { grid-column-end: span 30; }
.platform-timeline__track > [data-span="31"] { grid-column-end: span 31; }

.platform-timeline__track > [data-track="1"] { grid-row: 1; }
.platform-timeline__track > [data-track="2"] { grid-row: 2; }
.platform-timeline__track > [data-track="3"] { grid-row: 3; }
.platform-timeline__track > [data-track="4"] { grid-row: 4; }
.platform-timeline__track > [data-track="5"] { grid-row: 5; }
.platform-timeline__track > [data-track="6"] { grid-row: 6; }