/* MwPersonShiftList
   Prefix: mw-psl-*
   One person's shifts as compact rows — position · area · day+time on the left, the checked-in and
   checked-out glyphs pinned right. Sized for a phone first: the info block wraps instead of forcing
   the row wide, and the check glyphs never shrink away. */

.mw-psl {
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: 420px;
    padding: 4px;
}

.mw-psl-empty {
    padding: 10px 8px;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--mud-palette-text-disabled);
}

.mw-psl-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 5px 8px;
    border-radius: var(--mud-default-borderradius);
}

.mw-psl-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.mw-psl-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    flex-shrink: 0;
}

/* Position · area · time — equal peers that wrap rather than widen the row on a narrow screen. */
.mw-psl-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 7px;
}

.mw-psl-item-part {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.mw-psl-item-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mw-psl-item-sep {
    font-size: 0.6rem;
    color: var(--mud-palette-text-disabled);
}

.mw-psl-item-checks {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

.mw-psl-item-check {
    font-size: 1rem;
}

/* Inline variant (mw-psl-inline) — the same list rendered straight into a data-grid row instead of a
   popover: one line per shift, time first, position truncated, area dropped. Two constraints shape it:
   the grid's table is table-layout:auto, so the block needs a PIXEL width (a nowrap child with width:100%
   would feed its intrinsic width into the column and blow it out), and the row height is fixed by the
   grid's size step, so anything past the four visible lines scrolls inside the cell instead of clipping.
   Keep --mw-psl-inline-width in step with the Width of the column that hosts it. */

.mw-psl-inline {
    width: var(--mw-psl-inline-width, 268px);
    min-width: 0;
    max-width: var(--mw-psl-inline-width, 268px);
    max-height: calc(var(--mw-dg-row-height, 76px) - 4px);
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.mw-psl-inline .mw-psl-item {
    gap: 5px;
    min-height: 0;
    padding: 0 2px;
    border-radius: 0;
}

/* One line, never two: the parts shrink and ellipsize rather than wrap the row taller. */
.mw-psl-inline .mw-psl-item-info {
    flex-wrap: nowrap;
    gap: 0 5px;
    overflow: hidden;
}

.mw-psl-inline .mw-psl-item-part {
    min-width: 0;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-psl-inline .mw-psl-item-sep {
    font-size: 0.65rem;
}

/* The time is the anchor of the line — it keeps its full width while the position name gives way. */
.mw-psl-inline .mw-psl-item-time {
    flex: none;
}

.mw-psl-inline .mw-psl-item-checks {
    gap: 0;
}

.mw-psl-inline .mw-psl-item-check {
    font-size: 0.95rem;
}

.mw-psl-inline .mw-psl-empty {
    padding: 0 2px;
    font-size: 0.78rem;
    line-height: 18px;
}