/* ==============================================================
   my-schedule.css - styling for /my-schedule

   Page layout:
     .ms-page                 - the route shell (jbf-page is in site.css)
     .ms-page__actions        - owner-only "Open Working Schedule" CTA row
     .ms-page__calendar       - elevated card hosting the RadzenScheduler
     .ms-page__calendar-overlay - loading scrim on top of the calendar
     .ms-empty-inline         - friendly empty-state for sellers w/o regs

   Left rail (rendered by ScheduleLeftNav):
     .ms-leftnav              - wraps the View toggle + Events list
     .ms-leftnav__events      - vertical list of event checkboxes
     .ms-leftnav__event       - single row (checkbox + name + dates)

   Calendar (RadzenScheduler in MyScheduleCalendar):
     .ms-cal                  - host wrapper around the scheduler
     .ms-evt                  - base appointment chip
     .ms-evt-public-segment   - neutral, audience-scoped public schedule
     .ms-evt-dropoff          - drop-off appointment (registrant)
     .ms-evt-pickup           - pickup appointment (registrant)
     .ms-evt-shopping-ticket  - registrant's shopping ticket (highlighted)
     .ms-evt-team-shift       - assigned team shift
     .ms-evt-highlighted      - magenta border treatment for shopping ticket

   Detail dialog: .ms-detail / .ms-detail__* (opened on appointment select)
   ============================================================== */

/* ── Page shell ─────────────────────────────────────────────── */

/* Top padding mirrors My Tags' .top-bar margin-top + inset so the page
   header sits at a consistent distance below the AppHeader across the app
   (My Tags / My Events / My Schedule all share the same vertical rhythm). */
.jbf-page.ms-page {
    background: #fff;
}

.ms-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 24px 32px;
    min-height: 100%;
}

/* Owner-only action row (no header card) - right-aligns the "Open Working
   Schedule" CTA above the calendar so the button is still discoverable now
   that the page header has been removed. */
.ms-page__actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.ms-mobile-controls {
    display: none;
}

body[data-tier="xs"] .ms-mobile-controls,
body[data-tier="sm"] .ms-mobile-controls,
body[data-tier="md"] .ms-mobile-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}

.ms-mobile-controls__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ms-mobile-controls__label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #666;
}

.ms-mobile-controls__chips,
.ms-mobile-controls__events {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ms-mobile-chip,
.ms-mobile-event-chip {
    border: 1px solid rgba(125, 91, 129, 0.18);
    background: #fff;
    border-radius: 10px;
    color: #333;
}

.ms-mobile-chip {
    padding: 10px 14px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}

.ms-mobile-chip.is-selected,
.ms-mobile-event-chip.is-selected {
    background: rgba(125, 91, 129, 0.12);
    border-color: var(--jbf-purple, #7d5b81);
    color: var(--jbf-purple, #7d5b81);
}

.ms-mobile-event-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
}

.ms-mobile-event-chip__name {
    font-size: 0.92rem;
    font-weight: 600;
}

.ms-mobile-event-chip__dates {
    font-size: 0.78rem;
    color: #777;
}

/* PR-10: lightweight inline notice that surfaces above the (always-rendered)
   calendar when the seller has zero registered events. Replaces the previous
   full-card .me-empty empty-state which used to render INSTEAD of the
   calendar. Keeps the calendar always visible (per spec) while still giving
   sellers actionable copy + a Find Events CTA on tier widths where the rail
   footer isn't visible. */
.ms-empty-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(125, 91, 129, 0.06);
    border: 1px solid rgba(125, 91, 129, 0.18);
    border-radius: 8px;
    color: #35474e;
    font-size: 0.92rem;
    line-height: 1.35;
}

.ms-empty-inline__icon {
    color: var(--jbf-plum, #7d5b81);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ms-empty-inline__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ms-empty-inline__text strong {
    display: block;
    color: #021922;
    font-weight: 700;
    margin-bottom: 2px;
}

.ms-empty-inline__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--jbf-plum, #7d5b81);
    color: #fff !important;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.ms-empty-inline__cta:hover,
.ms-empty-inline__cta:focus-visible {
    background: #6a4d6e;
    text-decoration: none;
}

/* Stack the inline notice on narrow tiers so the CTA doesn't get squeezed. */
@media (max-width: 599px) {
    .ms-empty-inline {
        flex-direction: column;
        align-items: flex-start;
    }
    .ms-empty-inline__cta { align-self: stretch; justify-content: center; }
}

/* PR-6: the calendar is the single elevated card on /my-schedule (the
   filter row above and the page shell behind it are both plain white).
   Drop-shadow strength matches .dashboard-landing-body .rz-card so the
   visual lift reads consistently across module pages.

   Position relative so the loading overlay can sit absolutely-positioned
   inside the same card, on top of the scheduler. */
.ms-page__calendar {
    position: relative;
    background: var(--cum-card, #fff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(45, 27, 61, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.ms-page__calendar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(1px);
    z-index: 5;
    pointer-events: auto;
}

/* ── Left nav ──────────────────────────────────────────────── */

.ms-leftnav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ms-leftnav__empty {
    padding: 8px 16px 16px;
    color: #777;
    font-style: italic;
    font-size: 0.85rem;
}

.ms-leftnav__events {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 16px;
}

.ms-leftnav__event {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ms-leftnav__event:hover {
    background: rgba(125, 91, 129, 0.06);
}

/* Three-row event card:
     Row 1: location  - small, uppercase, JBF plum tint
     Row 2: name      - primary label, slightly bolder
     Row 3: dates     - de-emphasized
   gap:2px keeps the rows visually grouped while the ms-leftnav__event
   container's gap:8px separates one event from the next. */
.ms-leftnav__event-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.ms-leftnav__event-location {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--jbf-plum, #7d5b81);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-leftnav__event-name {
    font-weight: 600;
    color: #222;
    font-size: 0.92rem;
    line-height: 1.25;
    word-break: break-word;
}

.ms-leftnav__event-dates {
    font-size: 0.78rem;
    color: #777;
    line-height: 1.2;
}

/* PageContent zone is anchored at the bottom of the rail with a soft
   separator line above it so admin copy reads as a distinct band rather
   than melting into the events list. Hidden when the zone has no content
   (PageContentZone returns nothing in that case, but a leading border
   would still draw an awkward orphan line - the :empty guard removes it). */
.ms-leftnav__pagecontent {
    margin-top: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ms-leftnav__pagecontent:empty {
    display: none;
}

/* Hide nav text labels when the rail is collapsed (mirrors EventsLeftNav). */
.jbf-leftnav--collapsed .ms-leftnav__events,
.jbf-leftnav--collapsed .ms-leftnav__empty,
.jbf-leftnav--collapsed .ms-leftnav__pagecontent {
    display: none;
}

/* ── Calendar (RadzenScheduler) ────────────────────────────── */

/*
   The scheduler is hosted inside .ms-cal (a thin wrapper) inside
   .ms-page__calendar (the elevated card). The wrapper itself has no chrome
   - the elevated look comes from the card; the wrapper just gives us a
   selector to scope Radzen overrides without leaking onto other RadzenScheduler
   instances elsewhere in the app.

   The view tabs RadzenScheduler renders in .rz-scheduler-nav-views are now
   the SINGLE source of view truth - the rail no longer carries a duplicate
   SelectBar. We let Radzen's stock styling render the tabs in the toolbar's
   right slot.
*/
.ms-cal {
    width: 100%;
}

.ms-cal .rz-scheduler {
    border: none;
    box-shadow: none;
    background: transparent;
    width: 100%;
}

/* Tighten the toolbar to match the page's typographic rhythm. The
   flex-shrink: 0 is a defensive guard - the scheduler is a flex column with
   overflow:hidden and the toolbar must NEVER be allowed to shrink to 0 (or
   the user reports "the calendar header disappeared"). The default flex of
   0 1 auto would shrink under tight space; pinning the basis prevents it. */
.ms-cal .rz-scheduler-nav {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.ms-cal .rz-scheduler-nav-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #021922;
}

/* Today-cell + selected-day accents pulled into the JBF palette so the
   scheduler doesn't read like a stock Radzen demo dropped into the page. */
.ms-cal .rz-state-focused,
.ms-cal .rz-state-active {
    color: var(--jbf-purple, #7d5b81);
}

/* Equal-height week rows that fill the scheduler's content area regardless
   of how many appointments each row has.

   Two problems are solved here in tandem:

   (1) HEIGHT CONTRACT - Radzen's stock theme already declares
       .rz-scheduler { display:flex; flex-direction:column; height:400px;
       overflow:hidden } and we set our own pixel height inline (640px by
       default) on the scheduler. The toolbar (.rz-scheduler-nav) is the
       first flex child and sizes to its own content (~50px). The active
       view (.rz-month-view) is the second flex child and Radzen does NOT
       set a flex:1 on it - default flex of 0 1 auto means it sizes to
       content. If we instead force `height: 100%` on .rz-month-view, that
       resolves to 100% of the scheduler (640px), which - stacked under
       the 50px toolbar - pushes its bottom 50px past the scheduler's
       overflow:hidden clip. THAT is what was hiding the 4th row of the
       4-week view (and the bottom strip of the 1-/2-week views). The fix
       is to make .rz-month-view a proper flex item that fills only the
       REMAINING space below the toolbar via flex: 1 1 auto + min-height: 0.

   (2) EQUAL ROW HEIGHTS - .rz-week sizes itself off content (the appt band
       stack inside .rz-events + the slot titles inside .rz-slots), so on
       an empty calendar the rows collapse to their natural minimum and
       leave a tall empty gap below. Turning .rz-view-content into a flex
       column and giving each .rz-week flex: 1 1 0 distributes the
       available height evenly: 1 week → 100%, 2 weeks → 50/50, 4 weeks →
       25/25/25/25. The min-height floor keeps rows usable on short
       containers.

   Note: appointments inside .rz-week are absolute-positioned (top is
   (band+1)*1.5rem), so growing the row height does not shift their
   placement - it just gives trailing whitespace a place to live. */
.ms-cal .rz-month-view {
    /* Fill only the space the toolbar has left us with - NEVER use
       height:100% here; see comment above. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Sun-Mon-Tue weekday header inside the month view. Same flex-shrink: 0
   guard as the scheduler toolbar - if a tall calendar gets squeezed on a
   short viewport, this row must never collapse to 0. */
.ms-cal .rz-month-view .rz-view-header {
    flex-shrink: 0;
}

.ms-cal .rz-month-view .rz-view-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Radzen's MonthView calls contentView.FocusAsync() after every
       appointment click (see Rendering/MonthView.razor::OnAppointmentClick).
       The browser then auto-scrolls the focused element into view; on a
       viewport shorter than the calendar that scrolls the toolbar +
       weekday header above the visible area - which the user sees as
       "the calendar header disappeared on click". scroll-margin-top
       reserves space above this element so the toolbar (~50px) and
       weekday header (~30px) stay on-screen during the focus scroll. */
    scroll-margin-top: 96px;
}

.ms-cal .rz-month-view .rz-week {
    flex: 1 1 0;
    min-height: 96px;
}

/* ── Event chips (per-category) ────────────────────────────── */
/* AppointmentRender in MyScheduleCalendar.razor.cs sets these classes on
   each appointment chip. We layer them on top of Radzen's .rz-event so the
   underlying scheduler structure stays intact (positioning, focus ring,
   hover lift, etc.). */

.ms-evt {
    border-radius: 6px;
    border: 1px solid transparent;
    padding: 2px 6px;
    line-height: 1.2;
    font-size: 0.78rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-evt-public-segment {
    background: #6b7c93;
    border-color: #5b6a80;
}

.ms-evt-dropoff {
    background: #2e8540;
    border-color: #246b32;
}

.ms-evt-pickup {
    background: #1f6fb2;
    border-color: #18568a;
}

.ms-evt-team-shift {
    background: #6b4c9a;
    border-color: #573d7e;
}

/* Shopping ticket - JBF magenta accent so it pops on the grid. */
.ms-evt-shopping-ticket {
    background: #fff;
    color: #b8157a;
    border: 2px solid var(--jbf-magenta, #b8157a);
    font-weight: 600;
}

.ms-evt-highlighted {
    box-shadow: 0 0 0 2px rgba(184, 21, 122, 0.18);
}

/* ── Appointment-detail dialog ─────────────────────────────── */

.ms-detail-host {
    padding: 4px 0 8px;
}

.ms-detail__event {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #777;
    margin-bottom: 4px;
}

.ms-detail__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

.ms-detail__subtitle {
    color: #555;
    margin-bottom: 12px;
}

.ms-detail__when {
    margin-top: 8px;
    color: #333;
}

.ms-detail__zone {
    margin-top: 6px;
    color: #888;
}

/* ── Responsive tweaks ─────────────────────────────────────── */
/* xs/sm tiers (≤ --bp-md = 768). 767.98 mirrors --bp-md; @media can't deref vars. */
@media (max-width: 767.98px) {
    .ms-page {
        padding: 16px;
    }

    .ms-page__actions {
        width: 100%;
        justify-content: stretch;
    }

    .ms-page__actions .rz-button {
        width: 100%;
    }

    /* Mobile: tighten the scheduler toolbar so prev/next/today buttons stay
       on a single row at narrow widths. */
    .ms-cal .rz-scheduler-nav {
        padding: 8px 10px;
        gap: 6px;
    }

    .ms-cal .rz-scheduler-nav-title {
        font-size: 0.95rem;
    }
}