/* Scheduling → Meetings tab.
 *
 * A sibling of meeting-wizard.css, loaded straight after it: the wizard drawer
 * is its own screen and did not want any of this, and the tab is a page shape
 * (a toolbar, a two-column body, a day-grouped list) rather than a form.
 *
 * Tokens only. The tenant's own brand paints the today marks and the count
 * chips, so a white-labeled org gets its colour here without a line changing.
 */

/* Seated in the tab strip's actions slot, the same as the Availability tab's.
   No margin of its own: the strip's card supplies the box and the gap below. */
.scheduling-meetings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

/* The seam between "which tab" and "whose meetings". Sized off the control
   height rather than a flat pixel count, because a coarse pointer grows every
   control on this row and a fixed rule would come out half their height. */
.scheduling-meetings-toolbar__divider {
    flex: 0 0 auto;
    width: 1px;
    height: calc(var(--control-h-base) - 14px);
    margin: 0 var(--spacing-xs) 0 0;
    background: var(--color-border);
}

.scheduling-meetings-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-left: auto;
    min-width: 0;
}

/* ── Contrast on the strip ──
   The segmented half of this used to live here, as a hand-copy of the
   Availability tab's block; both copies now sit in components/segmented.css
   under `.global-tab-card__actions`, the actions cluster of a tab strip, which
   is the surface the contrast argument was always about. The tab half below
   stays here: `.global-tab` mounts on strips this argument has not been made
   for, so it is scoped to this toolbar the way it always was. */
.global-tab-card--row:has(.scheduling-meetings-toolbar) .global-tab:not(.is-active) {
    color: var(--color-grey-700);
}

.global-tab-card--row:has(.scheduling-meetings-toolbar) .global-tab:not(.is-active):hover {
    color: var(--color-text);
}

/* An org with no meetings add-on draws no tabs, so this cluster is the whole
   card. The strip carries no padding of its own — a tab's own inset is what
   holds it off the edges — so borrow that inset and sit where a tab would. */
.global-tab-card--row:not(:has(.global-tabs)) .scheduling-meetings-toolbar {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Above the phone stack the cluster stops being a box: the strip centres its
   children against each other, and a wrapped cluster is a tall box that drags
   the tab labels down beside it. `display: contents` hands the divider, the
   switch and the right cluster to the strip as items of ONE line. */
@media (min-width: 576px) {
    .global-tab-card--row:has(.global-tabs) > .scheduling-meetings-toolbar {
        display: contents;
    }

    .global-tab-card--row:has(.global-tabs):has(.scheduling-meetings-toolbar) {
        flex-wrap: wrap;
        row-gap: var(--spacing-sm);
        justify-content: flex-start;
        padding-right: var(--spacing-md);
    }

    /* Both sides of the seam are the strip's own gap now, so the hairline's
       right margin would land on top of a gap that is already wide enough. */
    .global-tab-card--row:has(.global-tabs) .scheduling-meetings-toolbar__divider {
        margin-right: 0;
    }
}

@media (max-width: 575px) {
    .global-tab-card--row:has(.scheduling-meetings-toolbar) {
        flex-wrap: wrap;
    }

    .global-tab-card--row .scheduling-meetings-toolbar {
        flex: 1 1 100%;
        padding-left: var(--spacing-md);
        padding-bottom: var(--spacing-smd);
    }

    /* A hairline says something only while the tabs and the switch share a
       line. Down here the switch leads a row with nothing to its left. */
    .global-tab-card--row .scheduling-meetings-toolbar__divider {
        display: none;
    }

    .scheduling-meetings-toolbar__right {
        flex: 1 1 100%;
        justify-content: flex-end;
    }
}

.scheduling-meetings-card {
    padding: var(--spacing-md);
}

/* The grid's own gutter only reaches between columns; the rail stacks its own
   cards and .card carries no margin. */
.scheduling-meetings-rail > * + * {
    margin-top: var(--spacing-md);
}

/* Quiet: the tab strip above is this page's header, so a loud card title would
   be a second one. The count beside it is the shared tab chip. */
.scheduling-meetings-card__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.scheduling-booked {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A day heading and the hairline that runs off the end of it. The rule is an
   ::after so it takes whatever width the words leave, at any zoom. */
.scheduling-booked-day {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0 var(--spacing-xs);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-grey-500);
}

.scheduling-booked-day::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-grey-200);
}

.scheduling-booked-day--today {
    color: var(--color-action);
}

.scheduling-booked-meeting {
    padding: var(--spacing-smd) var(--spacing-xs);
    border-bottom: 1px solid var(--color-border-hairline);
}

/* The row's one line. The panels are the row's other children and are plain
   blocks under it, so they never share this line and never take width off the
   meeting to do it. */
.scheduling-booked-meeting__line {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-smd);
}

.scheduling-booked-meeting:last-child {
    border-bottom: 0;
}

/* Times line up against each other, so the column is fixed-width, right-aligned
   and tabular — 9:00 and 11:30 have to share an edge or the list reads ragged. */
.scheduling-booked-meeting__time {
    flex: 0 0 74px;
    text-align: right;
}

.scheduling-booked-meeting__at {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.scheduling-booked-meeting__len {
    display: block;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-booked-meeting__bar {
    flex: 0 0 3px;
    align-self: stretch;
    margin-top: var(--spacing-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-grey-200);
}

.scheduling-booked-meeting--today .scheduling-booked-meeting__bar {
    background: var(--color-action);
    opacity: 0.55;
}

.scheduling-booked-meeting__main {
    flex: 1 1 auto;
    min-width: 0;
}

.scheduling-booked-meeting__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.scheduling-booked-meeting__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-smd);
    margin-top: var(--spacing-xs);
}

.scheduling-booked-meeting__who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    min-width: 0;
}

/* The place reads as a pill, so an unknown place shows no pill rather than an
   empty one. Rows made before the wizard stamped this have nothing to say. */
.scheduling-booked-meeting__where {
    padding: 0.05rem var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-booked-meeting__host {
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-booked-meeting__status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-booked-meeting__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-success);
}

.scheduling-booked-meeting__status--warn {
    color: var(--color-warning-hover);
}

.scheduling-booked-meeting__status--warn .scheduling-booked-meeting__dot {
    background: var(--color-warning);
}

/* The booker is a person on the meeting, not a member of the roster, so they
   get a line rather than a chip — a step darker than the guest line beneath,
   because this is the one name on the row the host may not already know. */
.scheduling-booked-meeting__booker {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text);
}

.scheduling-booked-meeting__guests {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-booked-meeting__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--spacing-xs);
    margin-left: auto;
}

/* One line each, always. A control that breaks its own words is read as two. */
.scheduling-booked-meeting__open,
.scheduling-booked-meeting__action {
    white-space: nowrap;
}

/* Quiet by default so four controls a row do not shout over the meetings they
   belong to. Only Open in Calendar keeps a box, and it keeps the platform's
   own small outline button. */
.scheduling-booked-meeting__action {
    border: 0;
    background: none;
    /* Sized off the control scale, which grows to the 44px tap floor on a
       coarse pointer (tokens.css). Padding alone left Cancel the smallest
       thing on the row, on the one pointer least able to hit it. */
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-grey-700);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.scheduling-booked-meeting__action:hover,
.scheduling-booked-meeting__action:focus-visible {
    background: var(--color-grey-100);
    color: var(--color-text);
}

/* A control with nothing to act on reads as off rather than as one more
   button, and it does not light up under the pointer either — a hover state on
   a dead control is the whole reason the old no-calendar row felt clickable. */
.scheduling-booked-meeting__action:disabled {
    opacity: 0.45;
    cursor: default;
}

.scheduling-booked-meeting__action:disabled:hover {
    background: none;
    color: var(--color-grey-700);
}

/* Cancel is the one that cannot be undone, so it reds only under the pointer —
   a row of standing red would read as four warnings a meeting. */
.scheduling-booked-meeting__action--danger:hover,
.scheduling-booked-meeting__action--danger:focus-visible {
    background: var(--status-danger-bg);
    color: var(--color-error);
}

/* ── The actions come out on hover ──
   Not on a coarse pointer, where there is no hover to come out on: the phone
   block at the bottom hands them back. focus-within is what keeps them
   reachable from the keyboard — opacity leaves them tabbable, and without this
   they would take focus while invisible. */
@media (hover: hover) {
    .scheduling-booked-meeting__actions {
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .scheduling-booked-meeting:hover .scheduling-booked-meeting__actions,
    .scheduling-booked-meeting:focus-within .scheduling-booked-meeting__actions {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scheduling-booked-meeting__actions {
        transition: none;
    }
}

/* Move and Add guests open under the row they belong to, full width, so the
   picker's month grid has room and the row above it stays readable. */
.scheduling-booked-meeting__panel {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-smd);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.scheduling-booked-meeting__panel-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-smd);
}

/* The way back to this morning. Centred and quiet: it is a second thought
   about a card that answers "what's on today". */
.scheduling-booked-past {
    padding-top: var(--spacing-smd);
    text-align: center;
}

.scheduling-booked-past__btn {
    border: 0;
    background: none;
    /* Same tap floor as the row's own buttons. */
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    cursor: pointer;
}

.scheduling-booked-past__btn:hover,
.scheduling-booked-past__btn:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
}

.scheduling-waiting {
    list-style: none;
    margin: 0;
    padding: 0;
}

.scheduling-waiting__row {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-hairline);
}

.scheduling-waiting__row:last-child {
    border-bottom: 0;
}

.scheduling-waiting__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.scheduling-waiting__meta {
    margin: var(--spacing-2xs) 0 var(--spacing-xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-waiting__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.scheduling-my-link__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.scheduling-my-link__meta {
    margin-top: var(--spacing-2xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

/* The URL is the thing a worker came to this card to copy, so it gets a box of
   its own and wraps rather than truncating — a half-shown link is a wrong one. */
.scheduling-my-link__url {
    display: block;
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-page-bg);
    font-size: var(--font-size-2xs);
    color: var(--color-text);
    word-break: break-all;
}

.scheduling-my-link__calendar {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

/* Sits on the calendar line above, so it has to stop being a paragraph link on a
   row of meta text: undressed it measures 14px with 4px 8px of padding and a 1px
   border inside an 11px row, and Bootstrap's .btn-link underlines it
   permanently, which at this size thickens the whole line. Hence no underline
   until hover. */
.scheduling-my-link__change-host {
    padding: 0;
    border: 0;
    font-size: var(--font-size-2xs);
    text-decoration: none;
    vertical-align: baseline;
}

.scheduling-my-link__change-host:hover {
    text-decoration: underline;
}

.scheduling-my-link__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

@media (max-width: 575px) {
    /* The one width the line is allowed to break at. */
    .scheduling-booked-meeting__line {
        flex-wrap: wrap;
    }

    /* Left-aligned down here: with the row this narrow a right-aligned column
       leaves a gutter between the time and the meeting it belongs to. */
    .scheduling-booked-meeting__time {
        flex-basis: 60px;
        text-align: left;
    }

    /* Basis 0 so the meeting stays beside its time. On its own width it does
       not fit at 390px, drops to the next line, and leaves the time standing
       alone above it next to a bar with nothing to mark. */
    .scheduling-booked-meeting__main {
        flex-basis: 0;
    }

    /* Always visible — there is no hover on a phone to bring them out with —
       and on a line of their own, because four controls do not fit beside a
       meeting's name at 390px. */
    .scheduling-booked-meeting__actions {
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-top: var(--spacing-xs);
        opacity: 1;
    }
}