/* =============================================================================
   Training Calendar Styles — v2
   Replace the previous training calendar CSS block in style.css
   ============================================================================= */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.ptst-calendar-wrap {
    position: relative;
    font-family: inherit;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
.ptst-calendar-loading {
    text-align: center;
    padding: 2rem;
    color: #9AA4B5;
    font-size: 0.9rem;
}

/* =============================================================================
   FILTER BAR
   Using !important to override Elementor/theme block-display inheritance
   ============================================================================= */

.ptst-calendar-filters {
    margin-bottom: 1.25rem;
}

/* Desktop: single row, all controls inline */
.ptst-calendar-filters__row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.ptst-calendar-filters__search {
    flex: 1 1 0 !important;
    min-width: 140px;
}

.ptst-calendar-filters__select {
    flex: 0 1 160px !important;
    min-width: 120px;
}

.ptst-calendar-filters__toggle {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Shared input/select styles */
.ptst-calendar-filter-input {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border-radius: 5px;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
    height: 36px;
    line-height: 1;
}

/* Clear filters button */
.ptst-calendar-clear-filters {
    flex-shrink: 0;
    padding: 0 0.75rem;
    height: 36px;
    border-radius: 5px;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    line-height: 1;
}

/* View toggle buttons */
.ptst-view-toggle {
    padding: 0 0.75rem;
    height: 36px;
    border-radius: 5px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1;
}

/* Mobile toggle — hidden on desktop */
.ptst-calendar-filters__mobile-toggle {
    display: none;
    width: 100%;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 5px;
    font-size: 0.875rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

/* =============================================================================
   LIGHT THEME (default — white/light background pages)
   ============================================================================= */

.ptst-calendar-wrap[data-theme="light"],
.ptst-calendar-wrap:not([data-theme]) {
    --ptst-cal-bg:          #ffffff;
    --ptst-cal-text:        #012F63;
    --ptst-cal-border:      #E0E6EB;
    --ptst-cal-input-bg:    #F9FAFB;
    --ptst-cal-input-text:  #012F63;
    --ptst-cal-btn-bg:      #012F63;
    --ptst-cal-btn-text:    #ffffff;
    --ptst-cal-btn-hover:   #08528F;
    --ptst-cal-toggle-bg:   #F9FAFB;
    --ptst-cal-toggle-text: #9AA4B5;
    --ptst-cal-day-today:   rgba(252, 176, 53, 0.12);
    --ptst-cal-header-bg:   #E0E6EB;
    --ptst-cal-header-text: #012F63;
}

/* =============================================================================
   DARK THEME — for dark navy background sections
   ============================================================================= */

.ptst-calendar-wrap[data-theme="dark"] {
    --ptst-cal-bg:          transparent;
    --ptst-cal-text:        #ffffff;
    --ptst-cal-border:      rgba(255,255,255,0.15);
    --ptst-cal-input-bg:    rgba(255,255,255,0.1);
    --ptst-cal-input-text:  #ffffff;
    --ptst-cal-btn-bg:      #FCB035;
    --ptst-cal-btn-text:    #012F63;
    --ptst-cal-btn-hover:   #D8922B;
    --ptst-cal-toggle-bg:   rgba(255,255,255,0.08);
    --ptst-cal-toggle-text: rgba(255,255,255,0.6);
    --ptst-cal-day-today:   rgba(252, 176, 53, 0.15);
    --ptst-cal-header-bg:   rgba(255,255,255,0.08);
    --ptst-cal-header-text: rgba(255,255,255,0.9);
}

/* Apply theme variables to inputs */
.ptst-calendar-filter-input {
    background: var(--ptst-cal-input-bg);
    color: var(--ptst-cal-input-text);
    border: 1px solid var(--ptst-cal-border);
}

.ptst-calendar-filter-input:focus {
    border-color: var(--ptst-cal-btn-bg);
    background: var(--ptst-cal-input-bg);
}

/* Dark theme — select option text needs to be dark for browser compatibility */
.ptst-calendar-wrap[data-theme="dark"] select.ptst-calendar-filter-input option {
    background: #012F63;
    color: #ffffff;
}

/* Apply to buttons */
.ptst-view-toggle {
    background: var(--ptst-cal-toggle-bg);
    border: 1px solid var(--ptst-cal-border);
    color: var(--ptst-cal-toggle-text);
}

.ptst-view-toggle:hover {
    background: var(--ptst-cal-btn-bg);
    border-color: var(--ptst-cal-btn-bg);
    color: var(--ptst-cal-btn-text);
}

.ptst-view-toggle--active {
    background: var(--ptst-cal-btn-bg) !important;
    border-color: var(--ptst-cal-btn-bg) !important;
    color: var(--ptst-cal-btn-text) !important;
}

.ptst-calendar-clear-filters {
    background: transparent;
    border: 1px solid var(--ptst-cal-border);
    color: var(--ptst-cal-text);
}

.ptst-calendar-clear-filters:hover {
    background: var(--ptst-cal-btn-bg);
    border-color: var(--ptst-cal-btn-bg);
    color: var(--ptst-cal-btn-text);
}

.ptst-calendar-filters__mobile-toggle {
    background: var(--ptst-cal-btn-bg);
    color: var(--ptst-cal-btn-text);
}

/* =============================================================================
   FULLCALENDAR OVERRIDES
   ============================================================================= */

.ptst-calendar-container .fc {
    font-family: inherit;
    font-size: 0.875rem;
}

.ptst-calendar-container .fc-toolbar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ptst-cal-text, #012F63);
}

/* Nav buttons */
.ptst-calendar-container .fc-button-primary {
    background-color: var(--ptst-cal-btn-bg, #012F63) !important;
    border-color: var(--ptst-cal-btn-bg, #012F63) !important;
    color: var(--ptst-cal-btn-text, #ffffff) !important;
    font-size: 0.8rem !important;
    padding: 0.3rem 0.65rem !important;
    box-shadow: none !important;
}

.ptst-calendar-container .fc-button-primary:hover {
    background-color: var(--ptst-cal-btn-hover, #08528F) !important;
    border-color: var(--ptst-cal-btn-hover, #08528F) !important;
}

.ptst-calendar-container .fc-button-primary:not(:disabled):active,
.ptst-calendar-container .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--ptst-cal-btn-hover, #08528F) !important;
    border-color: var(--ptst-cal-btn-hover, #08528F) !important;
}

/* Day grid */
.ptst-calendar-container .fc-day-today {
    background: var(--ptst-cal-day-today, rgba(252,176,53,0.1)) !important;
}

.ptst-calendar-container .fc-daygrid-day-number,
.ptst-calendar-container .fc-col-header-cell-cushion {
    color: var(--ptst-cal-text, #012F63);
    text-decoration: none;
    font-size: 0.8rem;
}

/* List view day header */
.ptst-calendar-container .fc-list-day-cushion {
    background-color: var(--ptst-cal-header-bg, #E0E6EB) !important;
    color: var(--ptst-cal-header-text, #012F63) !important;
    font-size: 0.8rem;
    font-weight: 700;
}

.ptst-calendar-container .fc-list-empty {
    background: var(--ptst-cal-input-bg, #F9FAFB);
    color: var(--ptst-cal-text, #012F63);
}

/* Grid cell borders on dark theme */
.ptst-calendar-wrap[data-theme="dark"] .ptst-calendar-container .fc-theme-standard td,
.ptst-calendar-wrap[data-theme="dark"] .ptst-calendar-container .fc-theme-standard th,
.ptst-calendar-wrap[data-theme="dark"] .ptst-calendar-container .fc-theme-standard .fc-scrollgrid {
    border-color: var(--ptst-cal-border) !important;
}

.ptst-calendar-wrap[data-theme="dark"] .ptst-calendar-container .fc-daygrid-day-number,
.ptst-calendar-wrap[data-theme="dark"] .ptst-calendar-container .fc-col-header-cell-cushion {
    color: rgba(255,255,255,0.9);
}

.ptst-calendar-wrap[data-theme="dark"] .ptst-calendar-container .fc-day-other .fc-daygrid-day-number {
    color: rgba(255,255,255,0.3);
}

/* =============================================================================
   EVENT PILLS (grid view)
   ============================================================================= */

.ptst-cal-event {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    font-size: 0.72rem;
    line-height: 1.3;
    overflow: hidden;
    cursor: pointer;
    border-radius: 3px;
}

.ptst-cal-event__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-weight: 600;
}

.ptst-cal-event__full {
    color: rgba(255,255,255,0.5);
    font-size: 0.55rem;
    flex-shrink: 0;
}

.ptst-cal-event__low {
    color: #FCB035;
    font-size: 0.55rem;
    flex-shrink: 0;
}

/* =============================================================================
   LIST VIEW EVENTS
   ============================================================================= */

.ptst-cal-list-event {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
    width: 100%;
    gap: 1rem;
    cursor: pointer;
}

.ptst-cal-list-event__main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.ptst-cal-list-event__abbrev {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.ptst-cal-list-event__title {
    font-size: 0.78rem;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptst-cal-list-event__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    font-size: 0.72rem;
    opacity: 0.9;
}

.ptst-cal-list__seats--full,
.ptst-cal-list__seats--low {
    padding: 1px 7px;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 600;
}

.ptst-cal-list__seats--full {
    background: rgba(0,0,0,0.2);
}

.ptst-cal-list__seats--low {
    background: rgba(252,176,53,0.3);
    color: #FCB035;
}

/* =============================================================================
   POPUP
   ============================================================================= */

.ptst-calendar-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
}

.ptst-calendar-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}

.ptst-calendar-popup__inner {
    background: #ffffff;
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(1,47,99,0.25);
    overflow: hidden;
    pointer-events: all;
    position: relative;
}

.ptst-calendar-popup__close {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    color: rgba(255,255,255,0.75);
    z-index: 1;
    padding: 0;
}

.ptst-calendar-popup__close:hover {
    color: #fff;
}

.ptst-popup__header {
    padding: 1.1rem 2.5rem 1.1rem 1.1rem;
}

.ptst-popup__abbrev {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

.ptst-popup__title {
    font-size: 0.82rem;
    opacity: 0.88;
    line-height: 1.4;
}

.ptst-popup__body {
    padding: 0.9rem 1.1rem;
}

.ptst-popup__dates,
.ptst-popup__venue,
.ptst-popup__delivery,
.ptst-popup__accred {
    font-size: 0.85rem;
    color: #012F63;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ptst-popup__seats {
    display: inline-block;
    margin: 0.2rem 0 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}

.ptst-popup__seats--full  { background: #E0E6EB; color: #9AA4B5; }
.ptst-popup__seats--low   { background: rgba(216,146,43,0.15); color: #D8922B; }
.ptst-popup__seats--ok    { background: rgba(8,82,143,0.1); color: #08528F; }

.ptst-popup__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #E0E6EB;
}

.ptst-popup__btn {
    flex: 1;
    padding: 0.5rem 0.4rem;
    border-radius: 5px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
    display: block;
}

.ptst-popup__btn:hover { opacity: 0.85; text-decoration: none; }

.ptst-popup__btn--book   { background: #012F63; color: #fff; }
.ptst-popup__btn--course { background: #E0E6EB; color: #012F63; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {

    .ptst-calendar-filters__mobile-toggle {
        display: block;
    }

    /* On mobile, collapse the filter row and stack vertically */
    .ptst-calendar-filters__row {
        display: none !important;
    }

    .ptst-calendar-filters__row--open {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .ptst-calendar-filters__search,
    .ptst-calendar-filters__select {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    .ptst-calendar-filters__toggle {
        width: 100%;
    }

    .ptst-view-toggle {
        flex: 1;
        text-align: center;
    }

    .ptst-calendar-clear-filters {
        width: 100%;
        text-align: center;
    }

    .ptst-calendar-container .fc-toolbar {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .ptst-calendar-container .fc-toolbar-title {
        font-size: 0.9rem;
    }

    .ptst-cal-list-event__title {
        display: none;
    }
}

/* Medium screens — wrap filters to 2 rows but keep flex */
@media (max-width: 1100px) and (min-width: 901px) {
    .ptst-calendar-filters__row {
        flex-wrap: wrap !important;
    }
    .ptst-calendar-filters__search {
        flex: 1 1 200px !important;
    }
    .ptst-calendar-filters__select {
        flex: 1 1 150px !important;
    }
}
/* =============================================================================
   Training Calendar — Fix Patch
   Append these rules after the main training calendar CSS block in style.css
   ============================================================================= */

/* ── Fix 1: Month title centred over calendar ────────────────────────────── 
   FullCalendar's toolbar uses space-between with an empty right chunk,
   so the title appears off-centre. Override with a relative/absolute approach.
*/
.ptst-calendar-container .fc-toolbar.fc-header-toolbar {
    position: relative !important;
}

.ptst-calendar-container .fc-toolbar-chunk:nth-child(2) {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    pointer-events: none;
}

/* ── Fix 2: Remove scrollbar — let calendar grow to full height ──────────── */
.ptst-calendar-container .fc-view-harness {
    height: auto !important;
    min-height: 0 !important;
}

/* ── Fix 3: List view — fix text/background colours on dark theme ────────── */

/* List view day header rows */
.ptst-calendar-wrap[data-theme="dark"] .fc-list-day th {
    background: rgba(255,255,255,0.08) !important;
}

.ptst-calendar-wrap[data-theme="dark"] .fc-list-day-cushion {
    background: transparent !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: 700;
}

/* List event rows — alternating subtle rows */
.ptst-calendar-wrap[data-theme="dark"] .fc-list-event td {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.ptst-calendar-wrap[data-theme="dark"] .fc-list-event:hover td {
    background: rgba(255,255,255,0.08) !important;
}

/* The "all-day" text in list view */
.ptst-calendar-wrap[data-theme="dark"] .fc-list-event-time {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.75rem;
}

/* The coloured dot in list view */
.ptst-calendar-wrap[data-theme="dark"] .fc-list-event-dot {
    border-color: inherit !important;
}

/* List view title text — our custom event HTML */
.ptst-calendar-wrap[data-theme="dark"] .fc-list-event-title {
    color: #ffffff !important;
}

/* Fix list event graphic text colours for dark bg */
.ptst-cal-list-event__abbrev,
.ptst-cal-list-event__title {
    color: inherit !important; /* inherit from the coloured event row */
}

/* ── Fix 4: Popup View & Book button — white text ────────────────────────── */
.ptst-popup__btn--book,
.ptst-popup__btn--book:visited,
.ptst-popup__btn--book:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.ptst-popup__btn--course,
.ptst-popup__btn--course:visited {
    color: #012F63 !important;
    text-decoration: none !important;
}
/* =============================================================================
   Training Calendar — Patch 2
   Append after the previous fix patch in style.css
   ============================================================================= */

/* ── Fix: Day column headers — force correct text colour on dark theme ───── */

/* The issue: FC sets color on .fc-col-header-cell-cushion via its own stylesheet
   which wins over our variable-based rule. Use explicit colour values. */
.ptst-calendar-wrap[data-theme="dark"] .fc-col-header-cell-cushion {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ptst-calendar-wrap[data-theme="dark"] .fc-col-header-cell {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Light theme — keep dark text */
.ptst-calendar-wrap[data-theme="light"] .fc-col-header-cell-cushion,
.ptst-calendar-wrap:not([data-theme]) .fc-col-header-cell-cushion {
    color: #012F63 !important;
}

/* ── Fix: Remove scrollbar — stronger overrides ──────────────────────────── */

/* The liquid-absolute scroller needs to not be absolutely positioned
   when height is auto — this is what causes the fixed-height scroll box */
.ptst-calendar-container .fc-scroller-liquid-absolute {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
}

/* The outer scroller that wraps the body rows */
.ptst-calendar-container .fc-daygrid-body {
    width: 100% !important;
}

/* Ensure the scrollgrid body section isn't height-constrained */
.ptst-calendar-container .fc-scrollgrid-section-body > td {
    height: auto !important;
}

.ptst-calendar-container .fc-scrollgrid-section-liquid > td {
    height: auto !important;
}

/* ── Fix: Calendar auto-grows with more events ───────────────────────────── */
/* Each row grows to fit its events naturally when scroller is not fixed */
.ptst-calendar-container .fc-daygrid-day-frame {
    min-height: 80px; /* Comfortable minimum row height */
}
/* Fix FullCalendar sticky header using --fc-page-bg-color variable */
.ptst-calendar-wrap[data-theme="dark"] {
    --ptst-cal-section-bg: var(--ptst-dark-section-bg);
    --fc-page-bg-color: transparent;
}

.ptst-calendar-wrap[data-theme="dark"] .fc-scrollgrid-section-sticky > * {
    background: var(--ptst-cal-section-bg) !important;
}

/* Remove theme table margin that creates gap between header and body */
.ptst-calendar-container table {
    margin-bottom: 0 !important;
}

/* Match cell borders to dark theme */
.ptst-calendar-wrap[data-theme="dark"] .fc-theme-standard td,
.ptst-calendar-wrap[data-theme="dark"] .fc-theme-standard th,
.ptst-calendar-wrap[data-theme="dark"] .fc-theme-standard .fc-scrollgrid {
    border-color: rgba(255, 255, 255, 0.8) !important;
}

/* =============================================================================
   Past Event Styles — append to training-calendar.css
   ============================================================================= */
 
/* Grid view — past events appear muted */
.ptst-cal-event--past {
    opacity: 0.55;
    font-style: italic;
}
 
/* List view — past events muted */
.ptst-cal-list-event--past {
    opacity: 0.6;
}
 
.ptst-cal-list-event--past .ptst-cal-list-event__abbrev {
    font-style: italic;
}
 
/* "Delivered" badge in list view */
.ptst-cal-list__seats--past {
    padding: 1px 7px;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.72rem;
    background: rgba(255,255,255,0.15);
    opacity: 0.7;
}
 
/* Popup — "Delivered" badge */
.ptst-popup__seats--past {
    background: rgba(154, 164, 181, 0.2);
    color: #9AA4B5;
    display: inline-block;
    margin: 0.2rem 0 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}
 

/* In Progress event styling */
.ptst-cal-event--inprogress { opacity: 0.8; }
.ptst-cal-list-event--inprogress { opacity: 0.85; }
.ptst-cal-list__seats--inprogress {
    padding: 1px 7px; border-radius: 3px; white-space: nowrap;
    font-weight: 600; font-size: 0.72rem;
    background: rgba(8,82,143,0.3); color: #ffffff;
}
.ptst-popup__seats--inprogress {
    background: rgba(8,82,143,0.15); color: #08528F;
    display: inline-block; margin: 0.2rem 0 0.6rem;
    padding: 0.2rem 0.6rem; border-radius: 4px;
    font-size: 0.78rem; font-weight: 600;
}
/* Fix: full-width course profile button (past/in-progress) */
a.ptst-popup__btn--full-width,
a.ptst-popup__btn--full-width:visited {
    flex: 1 1 100%;
    background: #012F63 !important;
    background-color: #012F63 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
a.ptst-popup__btn--full-width:hover {
    opacity: 0.85;
    color: #ffffff !important;
}

/* Close Pop up button */

.ptst-calendar-popup__close:hover {
    color: #fff;
    background: #850E02;
    border-radius: 3px;
}

.ptst-calendar-popup__close {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    color: rgba(255,255,255,0.75);
    z-index: 1;
    padding: 0.15rem 0.35rem;  /* ← add padding for consistent hit area */
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}

.ptst-calendar-popup__close:hover {
    color: #ffffff;
    background: #850E02;
}