/* ─── Custom properties ──────────────────────────────────────────────────── */
.tribe-common.tribe-events {
    --tec-color-accent-primary: #af3e26;
    --tec-color-background-primary-multiday: #f8eae6;
    --tec-color-background-primary-multiday-hover: #f1d7d0;
}
.tribe-events .tribe-events-c-search__button {
    background: #af3e26 !important;
    border-color: #af3e26 !important;
}
.tribe-events-view--month:not(.tribe-events-widget) {
    --klb-border:   #e8e8ef;
    --klb-muted:    #8a8f9c;
    --klb-text:     #1a1d23;
    --klb-surface:  #ffffff;
    --klb-soft:     #f5f5f8;
    --klb-accent:   #af3e26;
    --klb-radius:   20px;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-l-container {
    max-width: 1200px;
    padding-top: 32px;
}

/* ─── Search bar ─────────────────────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-c-events-bar {
    background: var(--klb-surface);
    border: 1px solid var(--klb-border);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(17, 24, 39, 0.06);
    overflow: visible;
}

.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-c-search__button {
    background: var(--klb-accent) !important;
    border-color: var(--klb-accent) !important;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ─── Top bar (navigation) ───────────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-c-top-bar {
    align-items: center;
    margin-bottom: 20px;
}

.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-c-top-bar__datepicker-button {
    color: var(--klb-text);
    font-size: 20px;
    font-weight: 700;
}

.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-c-top-bar__today-button {
    border: 1px solid var(--klb-border);
    border-radius: 999px;
    color: var(--klb-muted);
    font-size: 12px;
}

/* ─── Filter bar ─────────────────────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-filter-bar,
.tribe-events-view--month:not(.tribe-events-widget) .tribe-filter-bar-c-filter {
    border-color: var(--klb-border);
}

.tribe-events-view--month:not(.tribe-events-widget) .tribe-filter-bar .tribe-filter-bar-c-filter__toggle {
    color: var(--klb-text);
    font-weight: 600;
}

/* ─── Calendar table
     overflow: visible (not hidden) so the box-shadow does NOT bleed
     into the table content (known browser rendering quirk with tables).
     The rounded-corner effect is handled on the corner cells below.
   ─────────────────────────────────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month {
    background: var(--klb-surface);
    border: 1px solid var(--klb-border);
    border-collapse: separate;
    border-radius: var(--klb-radius);
    border-spacing: 0;
    box-shadow: 0 8px 40px rgba(17, 24, 39, 0.09);
    overflow: visible;
    width: 100%;
}

/* ─── Weekday header row
     TEC's views-skeleton.css gives the <thead> <tr> display:grid
     (repeat(7,1fr)) and the individual <th> a fixed width of
     var(--tec-grid-width-1-of-7) ≈ 32 px.  The 1fr grid column is
     ~140 px, but the <th> background only covers 32 px – the remaining
     ~110 px of each column shows white through the transparent <tr>,
     producing the "shadow only half over it" artefact.
     Fix: keep display:grid on the row (avoids table-layout side-effects)
     and stretch each <th> to 100 % of its grid column so the background
     fills the full column.
   ─────────────────────────────────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__header-column {
    background: var(--klb-soft);
    border-bottom: 1px solid var(--klb-border);
    color: var(--klb-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 14px 16px;
    text-align: center;
    text-transform: uppercase;
    /* stretch to fill the 1fr grid column so the background covers it all */
    width: 100% !important;
}

/* rounded top corners on the corner cells */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__header-column:first-child {
    border-radius: var(--klb-radius) 0 0 0;
}
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__header-column:last-child {
    border-radius: 0 var(--klb-radius) 0 0;
}

/* ─── Day cells ──────────────────────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__day {
    background: var(--klb-surface);
    border-color: var(--klb-border);
    transition: background 120ms ease;
    vertical-align: top;
}

.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__day:hover {
    background: #f9f9fc;
}

.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__day--past,
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__day--other-month {
    background: #fafafa;
}

.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__day--current {
    background: #fbefeb;
}

/* rounded bottom corners on last row */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__week:last-child
    .tribe-events-calendar-month__day:first-child {
    border-radius: 0 0 0 var(--klb-radius);
}
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__week:last-child
    .tribe-events-calendar-month__day:last-child {
    border-radius: 0 0 var(--klb-radius) 0;
}

/* ─── Desktop day cell content ───────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__day-cell--desktop {
    min-height: 120px;
    padding: 14px 16px 16px;
}

/* ─── Day heading (date + badge, our template renders these) ─────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-heading {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 !important;
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-heading
    .tribe-events-calendar-month__day-date-daynum,
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-heading
    .tribe-events-calendar-month__day-date-link {
    color: var(--klb-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.tribe-events-view--month:not(.tribe-events-widget)
    .tribe-events-calendar-month__day--other-month
    .klb-month-day-heading
    .tribe-events-calendar-month__day-date-daynum,
.tribe-events-view--month:not(.tribe-events-widget)
    .tribe-events-calendar-month__day--other-month
    .klb-month-day-heading
    .tribe-events-calendar-month__day-date-link {
    color: #c0c5ce;
}

/* ─── Event-count badge
     Compact circle on narrow viewports (number only).
     On wider desktops (≥1024px) the "EVENTS" label appears below the number
     as a stacked badge, giving full context without truncation.
   ─────────────────────────────────────────────────────────────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    height: 36px;
    justify-content: center;
    line-height: 1;
    min-width: 36px;
    padding: 0 8px;
    text-decoration: none;
    transition: background 140ms ease, opacity 140ms ease;
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events,
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events:visited,
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events:focus,
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events:active {
    background: var(--klb-accent);
    border-color: var(--klb-accent);
    color: #fff !important;
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events:hover {
    background: #2b3342;
    border-color: #2b3342;
    color: #fff !important;
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events[data-event-count="6"],
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events[data-event-count="6"]:visited,
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events[data-event-count="6"]:focus,
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events[data-event-count="6"]:active {
    background: #af3e26;
    border-color: #af3e26;
    color: #fff !important;
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--has-events[data-event-count="6"]:hover {
    background: #8f2f1f;
    border-color: #8f2f1f;
    color: #fff !important;
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count--empty {
    background: #f0f1f3;
    border-color: #f0f1f3;
    color: var(--klb-muted);
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count__number {
    color: inherit !important;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Label hidden on narrow viewports – visible on real desktops */
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count__label {
    color: inherit !important;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
}

@media screen and (min-width: 1024px) {
    .tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count {
        border-radius: 10px;
        gap: 2px;
        height: auto;
        min-width: 54px;
        padding: 8px 10px;
    }

    .tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-count__label {
        display: block;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.08em;
        opacity: 0.82;
        text-transform: uppercase;
    }
}

/* ─── Mobile: hide the default dot icon, show our count badge ────────────── */
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__mobile-events-icon {
    display: none;
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-mobile-count {
    align-items: center;
    background: var(--klb-accent);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    height: 18px;
    justify-content: center;
    line-height: 1;
    margin-top: 4px;
    min-width: 18px;
    padding: 0 5px;
}

.tribe-events-view--month:not(.tribe-events-widget) .klb-month-mobile-count[data-event-count="6"] {
    background: #af3e26;
}

/* ─── Legacy v1 calendar (fallback) ─────────────────────────────────────── */
.events-gridview #tribe-events-content .tribe-events-calendar .tribe_events,
.events-gridview #tribe-events-content .tribe-events-calendar .tribe-events-month-event-title,
.events-gridview #tribe-events-content .tribe-events-calendar .tribe-events-month-event-title:after,
.events-gridview #tribe-events-content .tribe-events-calendar .tribe-events-viewmore,
.events-gridview #tribe-events-content .tribe-events-calendar .tribe-events-tooltip {
    display: none !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
    .tribe-events-view--month:not(.tribe-events-widget) .tribe-events-l-container {
        padding-top: 20px;
    }

    .tribe-events-view--month:not(.tribe-events-widget) .tribe-events-c-events-bar {
        border-radius: 12px;
    }

    .tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month {
        border-radius: 14px;
        --klb-radius: 14px;
    }

    .tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__day-cell--mobile {
        min-height: 50px;
        padding: 6px 4px;
    }

    .tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__header-column {
        font-size: 10px;
        padding: 10px 6px;
    }
}

/* Dropdowns extend beyond the search bar; keep them in front of the calendar. */
.tribe-events .tribe-events-c-events-bar { overflow:visible; }
.tribe-events .tribe-events-c-view-selector { position:relative; z-index:20; }
.tribe-events .tribe-events-c-view-selector__content { z-index:30; }
.tribe-events-view--month:not(.tribe-events-widget) .tribe-events-calendar-month__day-date { text-align:center; }
.tribe-events-view--month:not(.tribe-events-widget) .klb-month-day-heading { width:100%; align-items:center; }
/* The compact widget has its own dimensions, independent of the full month view. */
.widget_tribe-widget-events-month { margin-inline:0; width:100%; }
.tribe-events-widget .tribe-events-l-container { padding:0 !important; width:100%; min-height:0 !important; }
.tribe-events-widget .tribe-events-calendar-month__day { height:auto !important; min-height:58px !important; padding:0 !important; overflow:visible !important; }
.tribe-events-widget .tribe-events-calendar-month__header-column { padding:6px 0; text-align:center; width:100%; }
.tribe-events-widget .tribe-events-calendar-month__day-cell--mobile { min-height:58px; height:auto; padding:5px 0; overflow:visible; }
.tribe-events-widget .tribe-events-calendar-month__day-date { margin:0; padding:0; text-align:center; line-height:22px; }
.tribe-events-widget .tribe-events-calendar-month__day-date-daynum { font-size:13px; line-height:22px; }
.tribe-events-widget .tribe-events-calendar-month__mobile-events-icon { display:none; }
.tribe-events-widget .klb-month-mobile-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; min-height:18px; padding:0 3px; margin:3px 0 0; border-radius:10px; background:#af3e26; color:#fff; font-size:10px; line-height:18px; }
.tribe-events-widget .tribe-events-calendar-month__day-cell--mobile button { height:auto; min-height:54px; overflow:visible; }