/* Feature: schedule-calendar-body.css
 * Google Calendar–like light canvas for FullCalendar under `.availability-calendar`.
 * Visual only — no behavior changes. Loads after theme-overrides to win cascade.
 */

/* Parent shells: only the scroll/grid canvas goes light — keep toolbar (New, search) on dark shell. */
.home-panel.home-schedule-panel-root .availability-grid-scroll,
.availability-shell .availability-grid-scroll,
.availability-editor--embedded .availability-grid-scroll,
.availability-editor--embedded .availability-calendar {
    background: #ffffff !important;
    color: #3c4043;
    box-shadow: none;
}

/* Restore schedule New button on dark hub toolbar (12% brand tint needs dark parent + light label). */
.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--text-primary, #fff);
}

.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn__label {
    color: inherit;
}

.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn__icon {
    background: var(--brand-primary);
    color: #fff;
}

.availability-calendar {
    --ll-fc-page-bg: #ffffff;
    --ll-fc-cell-bg: #ffffff;
    --ll-fc-border: #dadce0;
    --ll-fc-axis-text: #70757a;
    --ll-fc-header-text: #3c4043;
    --ll-fc-today-bg: color-mix(in srgb, #1a73e8 6%, #ffffff);
    --ll-fc-today-mark: #1a73e8;
    --ll-fc-today-mark-text: #ffffff;
    --ll-fc-now: #ea4335;
    --ll-fc-highlight: color-mix(in srgb, #1a73e8 14%, #ffffff);
    --ll-fc-event-text: #202124;
    --ll-fc-lesson-bg: color-mix(in srgb, var(--ll-calendar-google-lesson-green, #51b749) 22%, #ffffff);
    --ll-fc-lesson-accent: var(--ll-calendar-google-lesson-green, #51b749);
    --ll-fc-practice-bg: color-mix(in srgb, #1a73e8 16%, #ffffff);
    --ll-fc-practice-accent: #1a73e8;
    --ll-fc-thought-bg: color-mix(in srgb, #f9ab00 18%, #ffffff);
    --ll-fc-thought-accent: #e37400;
    background: var(--ll-fc-page-bg) !important;
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc {
    --fc-border-color: var(--ll-fc-border);
    --fc-page-bg-color: var(--ll-fc-page-bg);
    --fc-neutral-bg-color: var(--ll-fc-cell-bg);
    --fc-neutral-text-color: var(--ll-fc-axis-text);
    --fc-list-event-hover-bg-color: color-mix(in srgb, #1a73e8 8%, #ffffff);
    --fc-today-bg-color: var(--ll-fc-today-bg);
    --fc-now-indicator-color: var(--ll-fc-now);
    --fc-non-business-color: color-mix(in srgb, #70757a 6%, #ffffff);
    --fc-highlight-color: var(--ll-fc-highlight);
    --fc-event-bg-color: var(--ll-fc-lesson-bg);
    --fc-event-border-color: var(--ll-fc-lesson-accent);
    --fc-event-text-color: var(--ll-fc-event-text);
    /* Prev/next use FullCalendar button tokens — keep brand green */
    --fc-button-bg-color: var(--primary, #3fa85a);
    --fc-button-border-color: var(--primary, #3fa85a);
    --fc-button-text-color: #ffffff;
    --fc-button-hover-bg-color: var(--primary-strong, #2d7a38);
    --fc-button-hover-border-color: var(--primary-strong, #2d7a38);
    --fc-button-hover-text-color: #ffffff;
    --fc-button-active-bg-color: var(--primary-strong, #2d7a38);
    --fc-button-active-border-color: var(--primary-strong, #2d7a38);
    --fc-button-active-text-color: #ffffff;
    color: var(--ll-fc-header-text);
    background: var(--ll-fc-page-bg) !important;
}

/* Beat theme-overrides bare `.fc` / cell rules — force light on every grid surface */
.availability-calendar .fc,
.availability-calendar .fc-view-harness,
.availability-calendar .fc-view,
.availability-calendar .fc-scrollgrid,
.availability-calendar .fc-scrollgrid-section,
.availability-calendar .fc-scrollgrid-sync-table,
.availability-calendar .fc-daygrid-body,
.availability-calendar .fc-timegrid-body,
.availability-calendar .fc-timegrid-slots,
.availability-calendar .fc-timegrid-cols,
.availability-calendar .fc-list,
.availability-calendar .fc-list-table,
.availability-calendar .fc-popover {
    background: var(--ll-fc-page-bg) !important;
    color: var(--ll-fc-header-text);
    border-color: var(--ll-fc-border);
}

.availability-calendar .fc-theme-standard td,
.availability-calendar .fc-theme-standard th,
.availability-calendar .fc-daygrid-day,
.availability-calendar .fc-daygrid-day-frame,
.availability-calendar .fc-daygrid-day-bg,
.availability-calendar .fc-daygrid-day-events,
.availability-calendar .fc-col-header,
.availability-calendar .fc-col-header-cell,
.availability-calendar .fc-timegrid-axis,
.availability-calendar .fc-timegrid-slot,
.availability-calendar .fc-timegrid-col,
.availability-calendar .fc-scrollgrid-section > td,
.availability-calendar .fc-scrollgrid-section > th {
    background: var(--ll-fc-cell-bg) !important;
    border-color: var(--ll-fc-border) !important;
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc-scrollgrid {
    border: 0;
}

/* Toolbar date range + day headers: dark ink on light canvas (not theme --text-primary) */
.availability-calendar .fc-toolbar-title {
    color: #202124 !important;
    font-weight: 600;
}

.availability-calendar .fc-col-header-cell-cushion {
    color: #3c4043 !important;
    font-weight: 500;
}

.availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    color: var(--ll-fc-today-mark-text) !important;
}

/* Typography: muted axis + headers (override shared-misc weight 700) */
.availability-calendar .fc-col-header-cell-cushion,
.availability-calendar .fc-timegrid-axis-cushion,
.availability-calendar .fc-timegrid-slot-label-cushion,
.availability-calendar .fc .fc-daygrid-day-number {
    color: var(--ll-fc-axis-text);
    font-weight: 500;
}

.availability-calendar .fc-col-header-cell-cushion {
    color: var(--ll-fc-header-text);
    font-weight: 500;
    padding: 6px 2px;
}

.availability-calendar .fc-timegrid-slot-label-cushion {
    font-size: var(--ll-type-meta-size, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.availability-calendar .fc-timegrid-axis-cushion {
    font-size: var(--ll-type-meta-size, 0.75rem);
    font-weight: 400;
}

/* Today column + blue day mark (after forced white cells) */
.availability-calendar .fc .fc-day-today,
.availability-calendar .fc-daygrid-day.fc-day-today,
.availability-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
    background: var(--ll-fc-today-bg) !important;
}

.availability-calendar .fc-col-header-cell.fc-day-today {
    background: var(--ll-fc-page-bg) !important;
}

.availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65em;
    min-height: 1.65em;
    margin: 2px auto;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--ll-fc-today-mark);
    color: var(--ll-fc-today-mark-text);
    font-weight: 500;
}

.availability-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65em;
    height: 1.65em;
    margin: 2px;
    padding: 0;
    border-radius: 999px;
    background: var(--ll-fc-today-mark);
    color: var(--ll-fc-today-mark-text);
    font-weight: 500;
}

/* Now indicator — thin GCal red */
.availability-calendar .fc-timegrid-now-indicator-line {
    border-color: var(--ll-fc-now);
    border-width: 2px 0 0;
}

.availability-calendar .fc-timegrid-now-indicator-arrow {
    border-color: var(--ll-fc-now);
    border-top-color: var(--ll-fc-now);
    border-bottom-color: var(--ll-fc-now);
}

.availability-calendar .fc-highlight {
    background: var(--ll-fc-highlight) !important;
}

/* ----- TimeGrid week/day: GCal pastel blocks (title then time) ----- */
.availability-calendar .fc-timegrid-event.availability-lesson-event,
.availability-calendar .fc-timegrid-event.fc-event.availability-lesson-event {
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--ll-fc-event-text) !important;
    overflow: hidden;
}

.availability-calendar .fc-timegrid-event .fc-event-main,
.availability-calendar .fc-timegrid-event .fc-event-main-frame {
    color: inherit !important;
    padding: 2px 4px 3px 6px;
    height: 100%;
    box-sizing: border-box;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson {
    background: var(--ll-fc-lesson-bg) !important;
    background-color: var(--ll-fc-lesson-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: inset 3px 0 0 var(--ll-fc-lesson-accent) !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--practice {
    background: var(--ll-fc-practice-bg) !important;
    background-color: var(--ll-fc-practice-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: inset 3px 0 0 var(--ll-fc-practice-accent) !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--thought {
    background: var(--ll-fc-thought-bg) !important;
    background-color: var(--ll-fc-thought-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: inset 3px 0 0 var(--ll-fc-thought-accent) !important;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-inner {
    display: flex;
    flex-direction: column;
    gap: 0.08em;
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    line-height: 1.15;
    font-size: var(--ll-type-meta-size, 0.75rem);
    color: var(--ll-fc-event-text);
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-title-line {
    font-weight: 600;
    font-size: var(--ll-type-meta-size, 0.75rem);
    color: var(--ll-fc-event-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-time,
.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-person {
    font-weight: 400;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    color: color-mix(in srgb, var(--ll-fc-event-text) 78%, transparent) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator {
    filter: none;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--synced {
    color: color-mix(in srgb, var(--ll-fc-lesson-accent) 75%, #0f172a);
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--pending {
    color: #b45309;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--error,
.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--stale {
    color: #b91c1c;
}

/* Week/day: sync glyph at lower-right of the full lesson block (not the title row) */
.availability-calendar .fc-timegrid-event.availability-lesson-event {
    position: relative;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-inner--has-sync {
    position: relative;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-right: 1.15em;
    padding-bottom: 1.1em;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-sync-indicator {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    bottom: 2px !important;
    right: 3px !important;
    z-index: 3;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event:hover,
.availability-calendar .fc-timegrid-event.availability-lesson-event:focus-visible {
    filter: brightness(0.97);
}

/* ----- Month dayGrid: GCal list row (dot + time + title), not filled pills ----- */
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event.availability-lesson-event,
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-block-event.availability-lesson-event,
.availability-calendar .fc-dayGridMonth-view .fc-h-event.availability-lesson-event {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ll-fc-event-text) !important;
    margin: 0 2px 1px !important;
    padding: 0 !important;
    display: block;
    width: calc(100% - 4px);
}

.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main,
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main-frame {
    background: transparent !important;
    color: var(--ll-fc-event-text) !important;
    padding: 0 2px !important;
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-inner--month {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-width: 0;
    width: 100%;
    padding: 1px 2px;
    line-height: 1.25;
    color: var(--ll-fc-event-text);
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ll-fc-lesson-accent);
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event--practice .calendar-lesson-fc-event-dot {
    background: var(--ll-fc-practice-accent);
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event--thought .calendar-lesson-fc-event-dot {
    background: var(--ll-fc-thought-accent);
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-day-main {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    font-weight: 500;
    color: var(--ll-fc-event-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event:hover,
.availability-calendar .fc-dayGridMonth-view .availability-lesson-event:focus-visible {
    background: color-mix(in srgb, #1a73e8 6%, #ffffff) !important;
    filter: none;
    border-radius: 3px !important;
}

.availability-calendar .fc-more-link {
    color: #70757a !important;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    font-weight: 500;
}

/* Prev / next: brand green (match Month pill / primary actions) */
.availability-calendar .fc .fc-button-primary.fc-prev-button,
.availability-calendar .fc .fc-button-primary.fc-next-button,
.availability-calendar .fc .fc-prev-button,
.availability-calendar .fc .fc-next-button,
.availability-calendar .fc-toolbar .fc-button.fc-prev-button,
.availability-calendar .fc-toolbar .fc-button.fc-next-button {
    background-color: var(--primary, #3fa85a) !important;
    background-image: none !important;
    border: 1px solid var(--primary, #3fa85a) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.availability-calendar .fc .fc-button-primary.fc-prev-button:hover,
.availability-calendar .fc .fc-button-primary.fc-next-button:hover,
.availability-calendar .fc .fc-prev-button:hover,
.availability-calendar .fc .fc-next-button:hover,
.availability-calendar .fc .fc-button-primary.fc-prev-button:focus-visible,
.availability-calendar .fc .fc-button-primary.fc-next-button:focus-visible,
.availability-calendar .fc .fc-prev-button:focus-visible,
.availability-calendar .fc .fc-next-button:focus-visible,
.availability-calendar .fc .fc-button-primary.fc-prev-button:active,
.availability-calendar .fc .fc-button-primary.fc-next-button:active {
    background-color: var(--primary-strong, #2d7a38) !important;
    background-image: none !important;
    border-color: var(--primary-strong, #2d7a38) !important;
    color: #ffffff !important;
}

.availability-calendar .fc .fc-prev-button .fc-icon,
.availability-calendar .fc .fc-next-button .fc-icon {
    color: #ffffff !important;
}

.availability-calendar .fc .fc-prev-button:disabled,
.availability-calendar .fc .fc-next-button:disabled {
    opacity: 0.45;
}

/* List view stays readable on light canvas if used */
.availability-calendar .fc-list {
    border: 1px solid var(--ll-fc-border);
    background: var(--ll-fc-page-bg);
}

.availability-calendar .fc-list-day-cushion {
    background: color-mix(in srgb, #1a73e8 6%, #ffffff);
    color: var(--ll-fc-header-text);
    border-bottom: 1px solid var(--ll-fc-border);
}

.availability-calendar .fc-list-event td {
    border-color: var(--ll-fc-border);
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc-list-event-time {
    color: var(--ll-fc-axis-text);
}

.availability-calendar .fc-list-event-title > a {
    color: var(--ll-fc-header-text);
}

/* Mobile density: keep compact sizes but muted weights */
@media (max-width: 640px) {
    .availability-calendar .fc-timegrid-slot-label-cushion {
        font-weight: 400;
        color: var(--ll-fc-axis-text);
    }

    .availability-calendar .fc-col-header-cell-cushion {
        font-weight: 500;
        color: var(--ll-fc-header-text);
    }

    .availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
        color: var(--ll-fc-today-mark-text);
        min-width: 1.45em;
        min-height: 1.45em;
    }
}