/**
 * Public "Schedule Calendar" section (home page).
 *
 * The grid itself is the customer schedule component, so it comes fully
 * styled by views/customer/schedule-booking.css. What is NOT covered is the
 * handful of Tailwind utility classes schedule-booking.js writes into the
 * date navigation and error states (`flex`, `p-2`, `text-gray-500`, …).
 * home-modern.php ships no Tailwind at all, so those arrive naked there.
 *
 * Every utility below is scoped inside #public-schedule so re-declaring them
 * cannot leak onto home.php, which DOES load Tailwind, or onto anything else
 * on the page.
 */

/* ── Section chrome ─────────────────────────────────────────── */
.public-schedule {
    padding: 3rem 0;
}

.public-schedule__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.public-schedule__head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.public-schedule__title {
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: var(--ink, #16201b);
}

.public-schedule__lede {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted, #6c7d73);
}

/* The hand-off promise. Sits under the grid because it only matters once a
   visitor has decided to tap something. */
.public-schedule__note {
    margin: 1rem auto 0;
    max-width: 46rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted, #6c7d73);
}

.public-schedule__note b {
    color: var(--ink-2, #3c4a42);
    font-weight: 600;
}

/* Free slots are the only clickable cells, so say so with the cursor. */
#public-schedule .schedule-cell--open {
    cursor: pointer;
}

/* ── Tailwind shim (scoped) ─────────────────────────────────── */
#public-schedule .flex { display: flex; }
#public-schedule .inline-flex { display: inline-flex; }
#public-schedule .items-center { align-items: center; }
#public-schedule .justify-between { justify-content: space-between; }
#public-schedule .text-center { text-align: center; }
#public-schedule .gap-3 { gap: 0.75rem; }
#public-schedule .mb-4 { margin-bottom: 1rem; }
#public-schedule .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
#public-schedule .p-2 { padding: 0.5rem; }
#public-schedule .w-5 { width: 1.25rem; }
#public-schedule .h-5 { height: 1.25rem; }
#public-schedule .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
#public-schedule .rounded-lg { border-radius: 0.5rem; }
#public-schedule .border { border-width: 1px; border-style: solid; }
#public-schedule .border-gray-200 { border-color: #e5e7eb; }
#public-schedule .text-gray-500 { color: #6b7280; }
#public-schedule .text-gray-600 { color: #4b5563; }
#public-schedule .transition-colors { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
#public-schedule .hover\:bg-gray-50:hover { background-color: #f9fafb; }
#public-schedule .disabled\:opacity-40:disabled { opacity: 0.4; }
#public-schedule .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* The nav buttons are bare <button>s once Tailwind's preflight is absent —
   without this they inherit the UA's grey chrome background. */
#public-schedule #schedule-date-nav button {
    background: var(--surface, #fff);
    color: inherit;
    line-height: 0;
}

/* ── Brand fit ──────────────────────────────────────────────── */
/*
 * schedule-booking.css hard-codes indigo for the active court-type chip and
 * the selected-slot pill — correct inside the admin and customer portals,
 * wrong on a tenant's own marketing page, where every other control is the
 * venue's colour. Re-point them at the brand token, falling back to indigo so
 * a layout that publishes no token is unchanged.
 */
/* A slot the visitor has chosen is the one piece of state on this page that
 * is THEIRS, and it was arriving in the portal's indigo — the same colour the
 * legend gives Open Play — on a page where every other control is the venue's.
 * The four selected-state tokens exist for exactly this, so re-point them
 * rather than overriding the rules that read them. colour-mix keeps the tint
 * light enough for the rate to stay legible whatever hue the venue picked.
 */
#public-schedule {
    /* Solid, not a tint. A pale wash of a desaturated brand colour is
     * indistinguishable from the disabled state, and this grid already spends
     * pale green on "available" and pale blue on "booked" — a third pale
     * anything is a colour the visitor has to decode. Filled brand with white
     * text is the only cell on the grid that reads as MINE. */
    --sched-selected-bg: var(--brand, #4f46e5);
    --sched-selected-border: var(--brand-deep, var(--brand, #4338ca));
    --sched-selected-text: #fff;
    --sched-selected-shadow: rgba(var(--brand-rgb, 79, 70, 229), 0.35);
}

#public-schedule .schedule-cell--selected:hover {
    background-color: var(--brand-deep, var(--brand, #4338ca));
}

#public-schedule .court-type-tab--active,
#public-schedule .court-type-tab--active:hover {
    background-color: var(--court-green, var(--brand, #4f46e5));
    border-color: var(--court-green, var(--brand, #4f46e5));
    box-shadow: 0 2px 8px rgba(var(--court-green-rgb, 79, 70, 229), 0.25);
}

/* The grid is the page's centrepiece here, not a panel inside a form. */
#public-schedule .schedule-grid {
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 16px;
    overflow: auto;
    background: var(--surface, #fff);
}

#public-schedule .schedule-legend {
    justify-content: center;
    margin-top: 1rem;
}

/* The legend's "Selected" swatch must wear the SAME fill the chosen cell
 * wears on this page. The portal key draws a hollow indigo box because its
 * selected cell is a pale indigo tint; here the cell is solid brand, so a
 * hollow indigo swatch describes a state this grid never draws. */
#public-schedule .schedule-legend-pill[data-status="selected"] {
    background: rgba(var(--brand-rgb, 79, 70, 229), 0.08);
    color: var(--sched-selected-border);
    border-color: rgba(var(--brand-rgb, 79, 70, 229), 0.3);
}
#public-schedule .schedule-legend-pill[data-status="selected"] .schedule-legend-dot {
    background: var(--sched-selected-bg);
    border-color: var(--sched-selected-border);
}

/* ── Selection bar ───────────────────────────────────────────────────────
 *
 * Sticky to the bottom of the viewport while the section is on screen: the
 * grid is taller than a phone, so a visitor who picks a 7 PM slot after
 * scrolling would otherwise have to scroll back up to find Continue, or not
 * find it at all. Sticky keeps the count and the way out in view for as long
 * as there is a selection to act on.
 */
#public-schedule .ps-cart {
    position: sticky;
    /* Layouts that keep their own fixed bar at the foot of the page set this
       to clear it. Default is the plain inset. */
    bottom: var(--ps-cart-bottom, 1rem);
    /* Above the grid's sticky time column (z-index 15 in schedule-booking.css),
       which otherwise scrolls over the bar and paints the hour labels across
       "3 slots selected". Below the page header (60) and any modal. */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--line, #e5e7eb);
    background: var(--surface, #fff);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

#public-schedule .ps-cart[hidden] {
    display: none;
}

#public-schedule .ps-cart__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

#public-schedule .ps-cart__count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #111827);
}

#public-schedule .ps-cart__detail {
    font-size: 0.85rem;
    color: var(--muted, #6b7280);
}

#public-schedule .ps-cart__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.35rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--court-green, var(--brand, #4f46e5));
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

#public-schedule .ps-cart__cta:hover {
    filter: brightness(1.06);
}

#public-schedule .ps-cart__cta:active {
    transform: translateY(1px);
}

#public-schedule .ps-cart__cta:focus-visible {
    outline: 2px solid var(--court-green, var(--brand, #4f46e5));
    outline-offset: 3px;
}

@media (max-width: 480px) {
    #public-schedule .ps-cart {
        gap: 0.65rem;
    }
    /* One tap target across the full width beats a narrow pill wrapped onto
       its own line with the text stranded above it. */
    #public-schedule .ps-cart__cta {
        flex: 1 0 100%;
        justify-content: center;
    }
}

/* ── Time axis, public dressing ──────────────────────────────────────────
 *
 * The axis itself — start-only, right-aligned, tabular, hour-weighted — is in
 * schedule-booking.css and shared by every surface. What differs here is the
 * gutter: the portals give it a slate fill and a 2px slate rule, which is
 * right for a frozen column in a data table and wrong on a venue's own page,
 * where it was the heaviest thing on screen and the courts are what the
 * visitor came for. Here it recedes into the page and takes the tenant's own
 * ink, so the axis supports the grid instead of framing it.
 */
#public-schedule .schedule-grid .time-col {
    background-color: var(--surface, #fff);
    border-right: 1px solid var(--line, #e5e7eb);
    box-shadow: none;
}

#public-schedule .time-col--axis .time-col-num {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted, #6b7280);
}

#public-schedule .time-col--axis .time-col-ap {
    color: var(--faint, #9aa5a0);
    opacity: 1;
}

#public-schedule .time-col--hour .time-col-num {
    /* 600 and the secondary ink, not the shared 700 and full black: on a
       60-minute grid every row is an hour, and a column of seventeen
       full-weight labels stops supporting the prices and starts competing
       with them. */
    font-weight: 600;
    color: var(--ink-2, #374151);
}

#public-schedule .time-col--hour .time-col-ap {
    color: var(--muted, #6b7280);
}

/* The header cell above the axis labels a column that no longer needs one —
   the times say what they are, and "TIME" in caps was the loudest thing in the
   corner. The portals keep theirs: an operator reading a dense data table
   expects its frozen column to be named. font-size rather than
   display/visibility on purpose — the text node stays in the accessibility
   tree, so the column keeps its name for a screen reader while the corner goes
   quiet for everyone else. The cell itself has to survive; it is the corner
   the sticky row and column meet in. */
#public-schedule .schedule-grid thead th:first-child {
    font-size: 0;
}