/* Working-hours day grid (.calendar-uavail__*)
   Shared between personal mode (_user_availability.html) and org-page
   settings (_availability.html). */

.calendar-uavail__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg) var(--spacing-xl);
}

.calendar-uavail__column {
    min-width: 0;
    /* The row's compact treatment keys off THIS box, not the viewport. The
       grid sits in a third of the settings band (the three cards are even),
       so at a 1440px desktop it has ~424px — narrower than
       the phone case the sizing was first written for, and a viewport query
       cannot see that. Naming the container lets the query below target this
       element specifically rather than whatever nearest ancestor happens to
       be sized. */
    container: uavail-column / inline-size;
}

.calendar-uavail__row {
    display: grid;
    /* Fixed 92px label track (box + 3-letter day) so every row's time
       cell starts at the same x — horizontally aligned across all 7 rows
       and never overflows the narrow col-lg-4 panel. */
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--spacing-smd);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid #f1f3f5;
    transition: opacity 0.15s ease;
}

.calendar-uavail__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.calendar-uavail__row--off .calendar-uavail__time-cell {
    opacity: 0.35;
    pointer-events: none;
}

.calendar-uavail__label-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

/* The day box. `.global-checkbox` (components/checkbox.css) brings the whole
   recipe — ink fill, masked tick, focus ring — so all this sets is the size
   knob the component exposes: 18px, up from its 16px default, because these sit
   alone in a rail rather than in a dense table row. */
.calendar-uavail__check {
    --global-checkbox-size: 18px;
}

.calendar-uavail__day {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: #1f2937;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}

/* The time track: fills full width so the two pickers can split it evenly. */
.calendar-uavail__time-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

/* One start or end picker: the three hour / minute / AM-PM comboboxes of
   shared/components/_time_select.html (the control the wedding-day timeline
   form already uses). `flex: 1 1 0` splits the track
   evenly between start and end so the six boxes land on the same six x
   positions in all seven rows, instead of each row sizing to its own text. */
.calendar-uavail__time-block {
    flex: 1 1 0;
    min-width: 0;
}

/* A time is ONE field, not three. Seven rows of six bordered pills put
   forty-two boxes on a card whose entire content is fourteen times: the
   border, the ground and the corner belong to the TIME, and the hour /
   minute / AM-PM comboboxes inside it are bare. Fourteen boxes instead of
   forty-two — and every border and inner padding the merge deletes goes
   back to the value, freeing up room so the numbers are no longer cut off.

   Deliberately NOT `overflow: hidden`: each part's own .global-cs-menu drops out of
   this box and would be clipped by it.

   Scoped to THIS grid rather than done in the component: _time_select.html is
   shared with the opportunity form and the segment drawer, which both want the
   three separate fields the component ships with.

   The selector is the component's own layout class, .global-time-select
   (main.css), not a Bootstrap utility: a `!important` utility like `.gap-2`
   or `.flex-fill` cannot be overridden by `gap: 0` or `flex: 1 1 0` below —
   an override needs something to override, not a utility that cannot lose. */
.calendar-uavail__time-block > .global-time-select {
    height: 34px;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border);
    /* The component's own corner is cut for a 44px box; at 34px it reads as a
       pill. --radius-md is the generic medium rung (ADR-125 forbids the raw
       value). */
    border-radius: var(--radius-md);
    background: var(--color-grey-50);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover and focus move up to the field for the same reason the border did: the
   three parts are one control now, and a ring around a third of it reads as a
   seam. Same two states and the same tokens as .global-form-control-modern in
   main.css, so the field answers a pointer exactly like every other input. */
.calendar-uavail__time-block > .global-time-select:hover {
    border-color: var(--color-text-muted);
}

.calendar-uavail__time-block > .global-time-select:focus-within {
    border-color: var(--color-focus-ring);
    box-shadow: var(--shadow-focus-ring);
    background: var(--color-card-bg);
}

/* Hairlines, not boxes. The eye still has to see where the hour ends and the
   minute begins; 1px between the parts says it without handing each one its own
   frame back. */
.calendar-uavail__time-block > .global-time-select > .global-cs + .global-cs {
    border-left: 1px solid var(--color-border-subtle);
}

/* Equal thirds, so the six values land on six fixed x positions down all seven
   rows. The component's own row ships `1 1 auto`, which sizes each part to its
   own text and staggers the column row by row. */
.calendar-uavail__time-block > .global-time-select > .global-cs {
    flex: 1 1 0;
    min-width: 0;
}

/* The parts, stripped: the field around them now carries every pixel of chrome
   they each used to carry. Centring is the .global-cs-date-row recipe from main.css
   and is why the padding has to be symmetric — centring inside the base
   control's asymmetric box (1rem/2rem, cut for a chevron that is gone here)
   drifts the value left of true centre. */
.calendar-uavail__time-block .global-cs-input {
    height: 100%;
    padding: 0 var(--spacing-xs);
    border: 0;
    background: transparent;
    text-align: center;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.calendar-uavail__time-block .global-cs-input:focus {
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* A disabled part paints its own grey (main.css .global-cs-input:disabled), which
   inside a shared field is a grey block over one third of a time. The row
   already says "off" — .calendar-uavail__row--off dims the whole cell — so the parts
   say nothing. */
.calendar-uavail__time-block .global-cs-input:disabled {
    background: transparent;
}

/* No chevron. Six of them across a row was the single loudest thing on the
   card, and the compact case had already dropped them for space; the field's
   own border, ground and hover are the affordance, the same one every other
   control on the page uses. */
.calendar-uavail__time-block .global-cs-control .global-cs-toggle__chev {
    display: none;
}

/* A row whose end is not after its start. Nothing was sent — the panel holds
   the autosave until it is fixed (skillbridge.invalidWorkingHourDays) — so the
   row has to show which one is wrong; the card header says it in words. The
   end picker is the one marked: its own list has already dropped every time
   that is not after the start, so the field and the list say the same thing.
   The mark is on the field, not on a part of it, for the same reason the
   border is. */
.calendar-uavail__row--invalid .calendar-uavail__time-block:last-child > .global-time-select {
    border-color: var(--color-error);
    background: var(--status-danger-bg);
}

.calendar-uavail__row--invalid .calendar-uavail__time-block:last-child > .global-time-select:focus-within {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px var(--status-danger-bg);
}

.calendar-uavail__sep {
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1;
    flex-shrink: 0;
}

/* Under 470px of card the six comboboxes no longer fit beside the day label,
   so everything that is not the value gives way. This is the width the trio
   column has on any desktop under ~1590px as well as every phone, so it is the
   normal case now, not the edge one. */
@container uavail-column (max-width: 470px) {
    .calendar-uavail__row {
        column-gap: var(--spacing-sm);
        grid-template-columns: 62px minmax(0, 1fr);
    }
    /* 62px holds the 18px box, its gap and a 3-letter day ("Wed") at the
       smaller step. The label track is the only width in the row that is not
       a control, so it is the one that gives. */
    .calendar-uavail__day {
        font-size: var(--font-size-sm);
    }
    /* The gap BETWEEN the two fields closes up, and the padding inside the
       parts falls to what the widest label ("AM") needs. Nothing else is left
       to give: the field merge already took the chrome that used to be the
       first thing cut here. */
    .calendar-uavail__time-cell {
        gap: var(--spacing-xs);
    }
    .calendar-uavail__time-block .global-cs-input {
        padding: 0 var(--spacing-2xs);
    }
}

/* Under 310px there is no sharing left to do: six boxes beside even a 3-letter
   day leaves each about 25px, which is less than the "AM" it has to show, and
   the values clip to nothing. The cell takes the row to itself and the day
   label sits above it. Two lines a day makes the card taller — the other two
   cards stretch to match, which is the whole point of the band being one
   height — and that is the trade for the times staying readable. This is the
   trio's third column between roughly 992px and 1180px of viewport; a phone
   never reaches it, because the band is one column by then and each card has
   the full width. */
@container uavail-column (max-width: 310px) {
    .calendar-uavail__row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--spacing-xsm);
    }
    .calendar-uavail__time-cell {
        padding-left: var(--spacing-xsm);
    }
}