/* ============================================
   Availability Calendar + Slots (shared)
   Used by: booking page, availability modal preview tab
   ============================================ */

.calendar-avail-preview-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Bucket switcher — sits above the preview split when the org has
   multiple bookable EventTypes. Lets admins inspect what each public
   booking page actually shows the customer. */
.calendar-avail-bucket-switcher {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-smd) var(--spacing-xl);
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
    border-bottom: 1px solid #e6eaef;
}

.calendar-avail-bucket-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #5b6b7d;
    margin: 0;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.calendar-avail-bucket-label i {
    font-size: var(--font-size-lg);
    color: #8a99a8;
}

.calendar-avail-bucket-select.form-select.form-select-sm {
    flex: 1;
    max-width: 360px;
    border-color: #d8dde3;
    background-color: var(--color-card-bg);
    font-size: var(--font-size-md);
    color: #2a3441;
    box-shadow: 0 1px 2px rgba(20, 30, 40, 0.04);
}

.calendar-avail-bucket-select.form-select.form-select-sm:focus {
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 0 0.15rem var(--color-focus-ring-alpha);
}

.calendar-avail-panel {
    padding: var(--spacing-xl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
}

.calendar-avail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}
.calendar-avail-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.calendar-avail-arrows {
    display: flex;
    gap: var(--spacing-xsm);
}
.calendar-avail-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-button);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    color: #888;
    font-size: var(--font-size-md);
    line-height: 1;
    padding: 0;
}
.calendar-avail-btn i {
    display: flex;
    line-height: 1;
}
.calendar-avail-btn:hover { background: var(--color-action); color: var(--color-neutral-ink-fg); border-color: var(--color-action); }
.calendar-avail-btn:disabled { opacity: 0.35; cursor: default; }
.calendar-avail-btn:disabled:hover { background: transparent; color: #888; border-color: #e0e0e0; }

.calendar-avail-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-xs);
    text-align: center;
}
.calendar-avail-dow {
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--spacing-sm) 0 var(--spacing-smd);
    transition: color 0.15s, background 0.15s;
}
.calendar-avail-dow:hover {
    color: var(--color-action);
    background: color-mix(in srgb, var(--color-action) 8%, transparent);
    border-radius: 4px;
}
.calendar-avail-dow.is-active {
    color: var(--color-action);
    font-weight: var(--font-weight-medium);
}
/* A day is a real button: the grid is walked with Tab and picked with
   Enter or Space; a day with nothing open is disabled, not just styled. */
.calendar-avail-cell {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-text);
    position: relative;
    font-weight: var(--font-weight-body);
}
.calendar-avail-cell:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}
.calendar-avail-cell:disabled {
    cursor: default;
}
.calendar-avail-cell:hover:not(.is-empty):not(.is-unavailable):not(.is-selected):not(.is-past) {
    background: var(--color-page-bg);
}
.calendar-avail-cell.is-empty {
    cursor: default;
    visibility: hidden;
}
.calendar-avail-cell.is-unavailable {
    color: var(--color-text-muted);
    cursor: default;
}
.calendar-avail-cell.is-unavailable:hover { background: none; }
.calendar-avail-cell.is-past {
    color: var(--color-text-muted);
    cursor: default;
}
.calendar-avail-cell.is-past:hover { background: none; }
.calendar-avail-cell.is-today {
    font-weight: var(--font-weight-medium);
    color: var(--color-action);
}
.calendar-avail-cell.is-today::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-action);
}
.calendar-avail-cell.is-available {
    font-weight: 500;
    color: var(--color-action);
    background: color-mix(in srgb, var(--color-action) 10%, transparent);
}
.calendar-avail-cell.is-available:hover:not(.is-selected) {
    background: color-mix(in srgb, var(--color-action) 18%, transparent);
}
.calendar-avail-cell.is-selected {
    background: var(--color-action);
    color: var(--color-neutral-ink-fg);
    font-weight: 500;
}
.calendar-avail-cell.is-today.is-selected::after {
    background: var(--color-neutral-ink-fg);
}
.calendar-avail-cell.is-selected:hover {
    background: var(--color-action);
}

/* Slots panel — height:0 prevents it from growing the grid row;
   min-height:100% stretches it to match the calendar column */
.calendar-avail-slots-panel {
    border-left: 1px solid #e5e7eb;
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 0;
    min-height: 100%;
    background: var(--color-card-bg);
}

.calendar-avail-slots-scroll-container {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.calendar-avail-slots-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    padding: var(--spacing-xs) 0 var(--spacing-md);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}
.calendar-avail-slots-list:hover,
.calendar-avail-slots-list:focus-within {
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.calendar-avail-slots-list::-webkit-scrollbar { width: 6px; }
.calendar-avail-slots-list::-webkit-scrollbar-track { background: transparent; }
.calendar-avail-slots-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.calendar-avail-slots-list:hover::-webkit-scrollbar-thumb,
.calendar-avail-slots-list:focus-within::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
}

.calendar-avail-slots-arrow {
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
    color: #999;
    font-size: var(--font-size-base);
    user-select: none;
}
.calendar-avail-slots-arrow:hover { opacity: 1; }
.calendar-avail-slots-arrow-up {
    top: 0;
    background: linear-gradient(to bottom, var(--color-card-bg) 60%, transparent);
}
.calendar-avail-slots-arrow-down {
    bottom: 0;
    background: linear-gradient(to top, var(--color-card-bg) 60%, transparent);
}

.calendar-avail-slot-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xsm);
    width: 80%;
    padding: var(--spacing-sm) var(--spacing-smd);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: var(--color-card-bg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-button);
    color: #333;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.calendar-avail-slot-btn:hover {
    border-color: var(--color-action);
    box-shadow: 0 0 0 1px var(--color-action);
    color: #333;
}
.calendar-avail-slot-btn.is-selected-slot {
    border-color: var(--color-action);
    background: var(--color-action);
    color: #fff;
    box-shadow: 0 0 0 2px var(--color-action);
}
.calendar-avail-slot-btn.is-selected-slot .calendar-avail-slot-dot {
    background: var(--color-card-bg);
}
.calendar-avail-slot-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
}
.calendar-avail-slot-label {
    font-variant-numeric: tabular-nums;
}

.calendar-avail-empty {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    color: #999;
    font-size: var(--font-size-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.calendar-avail-empty i {
    font-size: 1.5rem;
    color: #ddd;
    margin-bottom: var(--spacing-sm);
    display: block;
}
/* Not a spinner fork — it already wraps the same .global-spinner. It keeps its
   own box for `flex: 1`: the slots column is a flex column and the wait has to
   take the leftover height so the ring lands mid-panel, not pinned to the top.
   It also lives on public booking pages, which hand-link their CSS and do not
   pull components/loading.css. */
.calendar-avail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    flex: 1;
}
.calendar-avail-error {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}
/* Not an error fork — the calendar below it works, it just belongs to the whole
   team instead of the named lead. Quiet on purpose. */
.calendar-avail-note {
    text-align: center;
    padding: var(--spacing-smd) var(--spacing-md) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ── Troubleshooter mode ──────────────────────────────────────────────
   The switch above the split, the closed stretches mixed into the slot
   list, and the card one of them opens. The mode is off until someone
   turns it on, so none of this is on screen by default. Nothing here
   changes the slots panel's height, so its inner scroll still works. */

.calendar-avail-ts-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-smd) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-hairline);
}
.calendar-avail-ts-switch {
    gap: var(--spacing-xsm);
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-cool);
    cursor: pointer;
}
.calendar-avail-ts-private {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* A closed stretch is a plain grey row, never a red one, and it never
   looks like a time you could pick. */
.calendar-avail-slot-btn--closed {
    background: var(--color-surface-subtle);
    border-style: dashed;
    color: var(--color-text-secondary);
}
.calendar-avail-slot-btn--closed:hover {
    border-color: var(--color-border);
    box-shadow: none;
    color: var(--color-text-secondary);
}
.calendar-avail-slot-btn--closed .calendar-avail-slot-dot {
    background: var(--color-text-muted);
}
.calendar-avail-ts-chip {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    background: var(--color-surface-hover);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xs) var(--spacing-xsm);
    white-space: nowrap;
}

.calendar-avail-ts-card {
    margin: var(--spacing-smd) var(--spacing-xl);
    padding: var(--spacing-smd) var(--spacing-md);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
}
.calendar-avail-ts-card-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.calendar-avail-ts-card-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.calendar-avail-ts-card-close {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-2xs);
}
.calendar-avail-ts-card-cal {
    margin-top: var(--spacing-smd);
}

.calendar-avail-ts-cals {
    padding: var(--spacing-smd) var(--spacing-xl) var(--spacing-md);
    border-top: 1px solid var(--color-border-hairline);
}
.calendar-avail-ts-cal {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-xsm);
    font-size: var(--font-size-sm);
}
.calendar-avail-ts-cal-name {
    color: var(--color-text);
}
.calendar-avail-ts-cal-meta {
    margin-left: auto;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .calendar-avail-preview-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .calendar-avail-panel { padding: var(--spacing-lg) var(--spacing-mdlg) var(--spacing-md); }
    .calendar-avail-slots-panel {
        border-left: none;
        border-top: 1px solid #e5e7eb;
        padding: var(--spacing-mdlg);
        height: auto;
        min-height: auto;
        max-height: 50vh;
    }
}