/* ═══════════════════════════════════════════════
   JOIN US POPUP — 2026 Design
   ═══════════════════════════════════════════════ */

#joinusPopup .joinus-popup-content {
    box-sizing: border-box;
    max-width: 460px;
    padding: 26px 22px 28px;
}

/* ── Header ── */

.joinus-hdr {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.joinus-hdr-text {
    flex: 1;
    min-width: 0;
}

.joinus-badge {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--button-bg), rgba(var(--btn-rgb), 0.62)); /* ios-fb */
    background: linear-gradient(135deg,
        var(--button-bg),
        color-mix(in srgb, var(--button-bg) 62%, #0a1a09));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(91, 190, 88, 0.4);
}

.joinus-badge i {
    color: #fff;
    font-size: 20px;
}

.joinus-hdr-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
    line-height: 1.35;
}

/* ── Features list ── */

.joinus-features {
    display: flex;
    flex-direction: column;
    background: var(--day-back);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}

.joinus-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    transition: background .15s;
}

.joinus-feature-item:last-child {
    border-bottom: none;
}

.joinus-feature-item i {
    color: var(--button-bg);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── CTA button ── */

.joinus-cta-link {
    display: block;
    text-decoration: none;
}

.joinus-cta-btn {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--button-bg), rgba(var(--btn-rgb), 0.68)); /* ios-fb */
    background: linear-gradient(135deg,
        var(--button-bg),
        color-mix(in srgb, var(--button-bg) 68%, #0a1a09));
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(91, 190, 88, 0.38);
    transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s;
    font-family: var(--font-family);
}

.joinus-cta-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 26px rgba(91, 190, 88, 0.55);
}

.joinus-cta-btn:active {
    transform: scale(0.97);
}

/* ── Full-height calendar page layout ────────────────────────── */
/* Scoped only to pages that contain .calendar-container.
   IMPORTANT: body is NOT made flex — doing so puts menuToggle and
   other menu.php children into the flex flow, creating an invisible
   element that blocks pointer events and hover on the calendar.    */

html:has(.calendar-container) {
    overflow: hidden;
    height: 100svh; /* svh = small viewport = always accounts for mobile browser UI */
    height: 100vh;  /* fallback for browsers without svh support */
}

body:has(.calendar-container) {
    height: 100svh;
    height: 100vh; /* fallback */
    overflow: hidden;
}

body:has(.calendar-container) .dashboard-menu {
    margin-bottom: 0;
}

/* Calendar height uses --real-vh set precisely by JS (window.innerHeight).
   Falls back to 100svh (small viewport) which always fits mobile browser UI.
   Subtracts menu height + safe area bottom (home indicator / notch). */
body:has(.calendar-container) .calendar-container {
    height: calc(var(--real-vh, 100svh) - var(--menu-height) - max(24px, env(safe-area-inset-bottom) + 14px));
    height: calc(var(--real-vh, 100vh) - var(--menu-height) - 24px); /* fallback */
}

/* ── Calendar container ── */
.calendar-container {
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    background-color: var(--calendar-background);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Isolate stacking context so internal z-indices don't clash with
       position:fixed overlays (.popupDiv z-index:7) */
    isolation: isolate;
}

.floatingMonthView {
    display: none;
    z-index: 5;
    position: fixed;
    width: 52px;
    height: 52px;
    background: var(--calendar-background);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    bottom: 80px;
    right: auto;
    left: 16px;
    flex-direction: column;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}

html.rtl .floatingMonthView {
    right: 16px;
    left: auto;
}

.floatingMonthView:hover {
    cursor: pointer;
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}

.floatingMonthView * {
    color: var(--blue);
}

.floatingMonthView span {
    font-size: xx-small;
}

/* ── Nav button group ── */
.button-group {
    display: flex;
    justify-content: space-around;
    width: 800px;
    max-width: 100%;
    margin: auto;
}

.button-group button:not(.backForTodayBtn) {
    color: var(--btn-color);
    width: 100%;
    border-radius: 0 !important;
}

button {
    padding: 10px 20px;
    border: .25px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--button-bg);
    color: var(--btn-color);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.15s ease, background-color 0.2s ease;
    will-change: transform;
}

button.active {
    background-color: var(--button-bg-active);
}

.backForTodayBtn {
    box-sizing: border-box;
    background: var(--body-bg);
    color: var(--button-bg);
    z-index: 1;
    height: 40px;
    width: 40px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(var(--btn-rgb), 0.38) !important; /* ios-fb */
    border: 2px solid color-mix(in srgb, var(--button-bg) 38%, transparent) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12), 0 0 0 3px rgba(var(--btn-rgb), 0.1); /* ios-fb */
    box-shadow: 0 4px 14px rgba(0,0,0,0.12), 0 0 0 3px color-mix(in srgb, var(--button-bg) 10%, transparent);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}

.backForTodayBtn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
}

.backForTodayBtn_d {
    font-size: 16px;
    bottom: 2px;
    position: relative;
    font-weight: 700;
    line-height: 1;
}

.backForTodayBtn_m {
    font-size: 10px;
    top: 0;
    position: relative;
}

.popEventJewDate {
    display: block;
    font-weight: normal;
}

.eventDateTimeInputDiv {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--input-bg);
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--btn-shadow);
    margin: 10px 0;
    overflow: hidden;
}

.eventDateTimeInputDiv input {
    width: 300px;
    box-shadow: none;
    cursor: pointer;
    margin: 0;
    padding: 12px;
    max-width: 50%;
    background: transparent;
    border: none;
}

.eventDateTimeInputDiv input.timeInput {
    text-align: right !important;
}

html.rtl .eventDateTimeInputDiv input.timeInput {
    text-align: left !important;
}

.popupDiv .publicEventCheckDiv {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
}

html.rtl .popupDiv .publicEventCheckDiv {
    right: auto;
    left: 15px;
}

#calendarDisplay h2:hover {
    opacity: .7;
    cursor: pointer;
}

.month, .week, .day, .day-view {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

/* All view types fill the available track height without self-scrolling */
.month, .week, .day-view {
    overflow: hidden;
    height: 100%;
}

.month .monthDisplay-week {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.calendar-grid {
    width: 100%;
}

/* Month calendar-grid stretches to fill .month */
.month > .calendar-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Week rows (not the header) each take an equal share of height */
.month .monthDisplay-week:not(:first-of-type) {
    flex: 1;
    min-height: 0;
}

/* Collapse empty trailing week rows (month ends on last day of a week) */
.month .monthDisplay-week:not(:first-of-type):not(:has(.day)) {
    flex: 0;
    display: none;
}

/* Header row never grows */
.month .monthDisplay-week:first-of-type {
    flex-shrink: 0;
}

.week .day-header {
    min-height: 90px;
    height: auto;
    box-sizing: border-box;
    padding: 8px 4px 6px;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    cursor: pointer;
}

/* ── Day header (sticky week row) ── */
.day-header {
    position: relative;
    font-size: small;
    background: var(--calendar-background);
    color: var(--text-color);
    text-align: center;
    padding: 9px 0;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-bottom: 1.5px solid var(--border-color);
}

.monthDisplay-week:first-of-type .day-header {
    text-align: center;
}

.day-header.today {
    background: rgba(var(--btn-rgb), 0.14); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 14%, var(--calendar-background));
    color: var(--button-bg);
    font-weight: 700;
}

/* ── Day cells ── */
.day {
    display: flex !important;
    position: relative;
    background-color: var(--day-back);
    border: .25px solid var(--border-color);
    text-align: center;
    padding: 0px;
    min-height: 60px;
    max-height: 120px;
    align-items: right;
    overflow-y: visible;
    max-width: 100%;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.month .day {
    height: 100%;
    min-height: unset;
    max-height: unset;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 8px;
}

.monthDisplay-week > div:not(:last-of-type) {
    border-bottom: none;
    border-right: none;
}

html.rtl .monthDisplay-week > div:not(:last-of-type) {
    border-left: none;
    border-right: .25px solid var(--border-color);
}

.monthDisplay-week:not(:first-of-type):not(:nth-of-type(2)) > div:last-of-type {
    border-top: none;
}

.day-number {
    font-size: medium;
}

.hebDateTxt {
    font-size: x-small;
}

.dayZmanimIcon, .dayViewIcon {
    position: absolute;
    right: 6px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}

.monthDayZmanimToggle {
    position: absolute;
    bottom: 100%;
    width: 100%;
    left: 0;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: max-height 0.15s ease-out;
    z-index: 5;
    max-height: 0;
    overflow: hidden;
    background-color: var(--warn);
}

.omerDay .monthDayZmanimToggle {
    display: flex;
    flex-direction: row;
}

.monthDayZmanimToggle a {
    padding: 4px 10px;
    display: block;
    cursor: pointer;
    font-size: x-small;
    color: var(--warn);
    border: .5px solid var(--warn);
    background: var(--day-back);
    font-weight: bold;
    box-sizing: border-box;
}

.monthDayZmanimToggle a.omerToggleIcon {
    display: none;
}

.omerDay .monthDayZmanimToggle a {
    max-width: 50%;
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omerDay .monthDayZmanimToggle span {
    display: none;
}

.omerDay .monthDayZmanimToggle a.omerToggleIcon {
    display: flex;
    color: orangered;
    border-color: orangered;
}

.dayZmanimIcon {
    color: var(--warn);
}

html.rtl .dayZmanimIcon, html.rtl .dayViewIcon {
    left: 6px;
    right: auto;
}

/* legacy refs — overridden by #zmanimPopup block below */
.zmanimDateTxts { display: none; }
.zmanimLocationName { font-weight: 500; }
.zmanimDayEvents p { display: none; }
.zmanTitleType { color: var(--button-bg); }

.dayViewIcon:hover, .dayZmanimIcon:hover {
    cursor: pointer;
    opacity: .7;
    transform: scale(1.15);
}

.day-number, .hebDateTxt {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    box-sizing: border-box;
}

.flatpickr-calendar {
    left: 0 !important;
    right: 0 !important;
    margin: auto;
}

.calViewTitle .hebDateTxt, .week .hebDateTxt {
    text-align: center;
    font-size: x-small;
    margin: 0;
    font-weight: normal;
}

.week .hebDateTxt {
    text-align: right !important;
}

.calViewTitle .hebDateTxt {
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
}

.calViewTitle .dayOfWeek {
    position: absolute;
    font-size: x-small;
    top: -8px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: normal;
}

/* ── Holiday chips ─────────────────────────────────────────── */

.holidays_box {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.week-grid .holidays_box, .day .holidays_box {
    width: 100%;
    order: 999;
    margin-top: auto;
    overflow: hidden;
    cursor: pointer;
    padding: 2px;
    box-sizing: border-box;
}

.week-grid .day-header:not(:first-of-type):hover {
    background: rgba(var(--btn-rgb), 0.05); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 5%, var(--calendar-background));
    cursor: pointer;
}

/* ── Week header — day name, date circle, heb date ── */

/* Day name row (e.g. "יום א") */
.week-grid .day-header > span:first-child {
    font-size: 10px;
    font-weight: 700;
    color: rgba(var(--btn-rgb), 0.55); /* ios-fb */
    color: color-mix(in srgb, var(--button-bg) 55%, var(--text-color));
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1;
}

/* Container holding .hebDateTxt + .geoDate */
.week-grid .day-header > div:not(.holidays_box) {
    display: flex;
    flex-direction: column-reverse; /* geoDate (big number) shows first */
    align-items: center;
    gap: 2px;
}

/* Gregorian date number — rendered as circle */
.week-grid .day-header .geoDate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1;
}

/* Today — green filled circle */
.week-grid .day-header.today .geoDate {
    background: var(--button-bg);
    color: #fff;
}

/* Hebrew date */
.week-grid .day-header .hebDateTxt {
    display: block;
    font-size: 9px;
    color: var(--button-bg);
    font-weight: 600;
    text-align: center;
    opacity: 0.85;
    line-height: 1;
}

/* Holiday chips inside week column header */
.week-grid .day-header .holidays_box {
    margin-top: 3px;
    padding: 0;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

/* Time column placeholder in week header (the empty first cell) */
.week-grid .day-header:first-child {
    background: var(--calendar-background);
    border-bottom: 1.5px solid var(--border-color);
    border-inline-end: 1px solid var(--border-color);
    min-height: 90px;
}

/* ── Week/Day view event pill improvements ── */
.week-grid .eventDiv,
.day-grid .eventDiv {
    font-size: 12px;
    padding: 4px 7px;
    border-radius: 8px;
    margin: 2px 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.day-view .holidays_box {
    position: relative;
    left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0;
}

.holiday-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0px 1px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    background: rgba(99, 102, 241, 0.13); /* ios-fb */
    background: color-mix(in srgb, #6366f1 13%, var(--calendar-background));
    color: #6366f1;
    line-height: 1.5;
}

.holiday-text[data-ymd] {
    cursor: pointer;
}
.holiday-text[data-ymd]:hover {
    filter: brightness(0.88);
}

.week-grid .holiday-text, .day-view .holiday-text {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 12px;
}

/* Omer floats to the very top of the .day cell */
.holiday-text.omer {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 5px 5px;
    width: 100%;
    max-width: none;
    background: rgba(255, 69, 0, 0.13);
    color: #c94500;
    font-size: 8px;
    font-weight: 700;
    justify-content: center;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 69, 0, 0.15);
}

.week-grid .holiday-text.omer,
.day-view .holiday-text.omer {
    position: relative;
    left: auto;
    right: auto;
    border-radius: 12px;
    border-bottom: none;
    font-size: 11px;
    padding: 3px 9px;
    width: auto;
    max-width: none;
    background: rgba(255, 69, 0, 0.1);
    color: #c94500;
}

.day.empty {
    background-color: var(--day-empty-back);
    cursor: default;
}

.day.empty:hover {
    background-color: var(--day-empty-back) !important;
}

.day.omerDay {
    background-color: rgba(236, 65, 0, 0.1);
    /*padding-top: 10px;*/
}

/* ── Day hover ── */
.day:hover {
    background-color: var(--hover-bg);
}

.hours-grid {
    display: flex;
    flex-direction: column;
}

.week-grid {
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Fill the parent .week height (100dvh - menu) instead of a fixed 85vh */
    height: 100%;
    max-height: 100%;
    align-items: start;
}

.week-grid, .day-grid {
    position: relative;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

.currentTimeLine {
    display: inline-block;
    position: absolute;
    z-index: 2;
    height: 2px;
    width: 100%;
    background: var(--button-bg);
    left: 0;
    inset: 0;
    opacity: 0.85;
    pointer-events: none;
}

.currentTimeLine::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--button-bg);
}

html.rtl .currentTimeLine::before {
    left: auto;
    right: 0;
}

.currentTimeLine .currentTimeLiveUpdate {
    position: absolute;
    top: -11px;
    left: 10px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--button-bg);
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
}

html.rtl .currentTimeLine .currentTimeLiveUpdate {
    left: auto;
    right: 10px;
}

.monthDisplay-week:first-of-type {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    z-index: 3;
    background: rgba(var(--btn-rgb), 0.06); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 6%, var(--calendar-background));
    border-bottom: 2px solid rgba(var(--btn-rgb), 0.22); /* ios-fb */
    border-bottom: 2px solid color-mix(in srgb, var(--button-bg) 22%, var(--border-color));
}

/* All views: first-row header cells — transparent so the row bg shows through */
.monthDisplay-week:first-of-type .day-header {
    height: auto !important;
    border-bottom: none;
}

/* Month view: day-name cells (Sun/Mon/Tue style) */
.month .monthDisplay-week:first-of-type .day-header {
    background: transparent;
    color: rgba(var(--btn-rgb), 0.6); /* ios-fb */
    color: color-mix(in srgb, var(--button-bg) 60%, var(--text-color));
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.07em;
    font-weight: 700;
    padding: 8px 2px;
}

.monthDisplay-week:first-of-type .day-header.today {
    background: rgba(var(--btn-rgb), 0.18); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 18%, var(--calendar-background));
    color: var(--button-bg);
}

.monthDisplay-week .hour:first-of-type {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    z-index: 1;
    min-width: 28px;
}

.week-grid .monthDisplay-week {
    display: grid;
    grid-template-columns: 52px repeat(7, 1fr);
    width: 100%;
    max-width: 100%;
}

@media only screen and (max-width: 640px) {
    /* Month view chips — smaller on mobile */
    .month-more-events {
        font-size: 7px;
        padding: 1px 3px;
    }
    .holiday-text.more-holidays {
        font-size: 7px;
        padding: 1px 3px;
    }

    .week-grid .monthDisplay-week {
        grid-template-columns: 40px repeat(7, 1fr);
    }
    .hour {
        min-width: 40px;
        width: 40px;
    }
    .monthDisplay-week .hour:first-of-type {
        min-width: 40px;
    }
    .week .day-header {
        min-height: 76px;
        padding: 6px 2px 4px;
    }
    .week-grid .day-header > span:first-child {
        font-size: 9px;
    }
    .week-grid .day-header .geoDate {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
    .week-grid .day-header .hebDateTxt {
        font-size: 9px;
    }
    .week-grid .day-header .holiday-text {
                font-size: 9px;
        padding: 1px 2px;
    }

    .month .holiday-text {
        font-size: 9px;
        padding: 1px 2px;
    }

    .month .eventDiv {
        padding: 0;
    }
}

.hour {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    border-inline-end: 1px solid var(--border-color);
    text-align: center;
    padding: 0;
    background-color: var(--calendar-background);
    font-size: 10px;
    min-width: 52px;
    width: 52px;
    box-sizing: border-box;
}

.hour span {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background: var(--calendar-background);
    padding: 0 3px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.4;
    white-space: nowrap;
    pointer-events: none;
    left: auto;
}

#calendarDisplay {
    overflow: hidden;
    touch-action: pan-y;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Track that slides */
#monthsTrack {
    display: flex;
    flex-direction: row;
    width: 300vw;
    transition: transform 0.3s ease;
    transform: translateX(100vw);
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.draggingTrack > div {
    touch-action: none !important;
    pointer-events: none !important;
}

.month, .week, .day-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100vw;
    min-width: 100vw;
    flex-shrink: 0;
}

#calendarSwipe {
    display: flex;
    width: 300%;
    transform: translateX(-33.333%);
    transition: transform 0.3s ease;
    touch-action: pan-y;
}

.panel {
    flex: 0 0 33.333%;
    width: 100%;
    min-height: 300px;
}

.current {
    background: white;
}

/* ── Calendar view title ── */
.calViewTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
    position: relative;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 4px 54px;
    box-sizing: border-box;
}

.hebMonthTitle {
    position: relative;
    display: block;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    color: var(--button-bg);
    opacity: 1;
}

/* ── Navigation arrows ── */
.nav-button {
    z-index: 1;
    background-color: transparent;
    color: var(--button-bg);
    border: 2px solid rgba(var(--btn-rgb), 0.35); /* ios-fb */
    border: 2px solid color-mix(in srgb, var(--button-bg) 35%, transparent);
    height: 40px;
    width: 40px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.15s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(var(--btn-rgb), 0.18); /* ios-fb */
    box-shadow: 0 2px 10px color-mix(in srgb, var(--button-bg) 18%, transparent);
    will-change: transform;
}

.nav-button:hover {
    background-color: var(--button-bg);
    color: #fff;
    border-color: var(--button-bg);
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(var(--btn-rgb), 0.4) !important; /* ios-fb */
    box-shadow: 0 6px 20px color-mix(in srgb, var(--button-bg) 40%, transparent) !important;
    opacity: 1;
}

.nav-button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 19px;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* ── Today + selected ── */
.day.today {
    background-color: var(--today-bg);
    border: .5px solid var(--today-border);
    /* box-shadow: inset 0 0 0 1px var(--button-bg); */
}

.day.selectedDate {
    box-shadow: inset 0 0 0 1px var(--button-bg), 0 4px 16px rgba(0, 0, 0, 0.12);
}

.week-grid .monthDisplay-week:first-of-type .today {
    background: rgba(var(--btn-rgb), 0.12); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 12%, var(--calendar-background));
}

.day-grid {
    width: 100%;
}

.day-view .dayViewToday {
    color: var(--button-bg);
    text-decoration: underline;
}

.day-grid .monthDisplay-week {
    display: grid;
    grid-template-columns: 52px 1fr;
    width: 100%;
    max-width: 100%;
}

.week-grid .day:hover, .day-grid .monthDisplay-week .eventCol:hover {
    background-color: var(--day-hover-bg);
    cursor: pointer;
}

/* Today column cells in week view — subtle green tint */
.week-grid .day.today {
    background-color: rgba(var(--btn-rgb), 0.05); /* ios-fb */
    background-color: color-mix(in srgb, var(--button-bg) 5%, var(--calendar-background));
}

.week-grid .day.today:hover {
    background-color: rgba(var(--btn-rgb), 0.1); /* ios-fb */
    background-color: color-mix(in srgb, var(--button-bg) 10%, var(--calendar-background));
}

.day-grid .eventCol {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--calendar-background);
    transition: background-color 0.12s;
}

.day-grid .hour, .day-grid .eventCol {
    min-height: 60px;
    max-height: 120px;
    box-sizing: border-box;
}

.day-grid .day-header {
    font-weight: normal;
    background: var(--calendar-background);
    color: var(--text-color);
    text-align: start;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* "שעה" column header in day view */
.day-grid .monthDisplay-week:first-of-type .day-header:first-child {
    font-size: 9px;
    opacity: 0.4;
    font-weight: 500;
    justify-content: center;
}

.day-grid .day-header i {
    font-size: 18px;
    color: var(--button-bg);
    opacity: 0.85;
}

.day-grid .day-header i:hover {
    opacity: 0.6;
    cursor: pointer;
}

/* Holiday chips inside day view header */
.day-grid .day-header .holidays_box {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0;
}

/* ── Events ── */
.monthIconMark {
    color: #1489f1;
    position: absolute;
    top: 5px;
    left: 5px;
}

.eventsDiv {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    height: fit-content;
    z-index: 1;
    overflow: auto;
    overflow-x: hidden;
}

.eventDiv.sharedEventDiv:before, .eventDiv.sharedEventDiv:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
}

.eventDiv.sharedEventDiv:before {
    z-index: -2;
    background-color: var(--event-owner-color);
}

.eventDiv.sharedEventDiv:after {
    z-index: -1;
    background-color: rgba(255, 255, 255, .7);
}

.eventSharedName {
    display: block;
    text-align: center;
    font-size: xx-small;
    font-weight: bold !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.eventsDiv .inlineEvents {
    display: flex;
    gap: 2px;
}

.eventsDiv .inlineEvents > .eventDiv {
    flex: 1;
}

.eventDiv {
    position: relative;
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 5px;
    border-radius: 6px;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 1px 0px;
    border: none;
    transform: scale(1);
    flex-direction: column;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

.month .eventDiv {
    display: inline-block;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    word-break: break-word;
    overflow: hidden;
    padding: 1px 4px;
}

/* Holidays in month cells: cap to 3 chip rows (2 regular + "+N more"), clip the rest */
.month .day .holidays_box {
    max-height: 54px;
    overflow: hidden;
}

/* "+N more" events chip — navigates to day view */
.month-more-events {
    display: block;
    width: 100%;
    font-size: 9px;
    font-weight: 700;
    color: var(--button-bg);
    background: rgba(var(--btn-rgb), 0.12); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 12%, var(--calendar-background));
    border-radius: 4px;
    padding: 1px 5px;
    margin-top: 1px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transition: background 0.15s;
}
.month-more-events:hover {
    background: rgba(var(--btn-rgb), 0.24); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 24%, var(--calendar-background));
}

/* Holiday chips in month cells are clickable — open Zmanim */
.month .day .holidays_box .holiday-text {
    cursor: pointer;
}
.month .day .holidays_box .holiday-text:hover {
    filter: brightness(1.08);
}

/* "+N more" holidays chip — opens Zmanim popup */
.holiday-text.more-holidays {
    cursor: pointer;
    background: rgba(99, 102, 241, 0.16); /* ios-fb */
    background: color-mix(in srgb, #6366f1 16%, var(--calendar-background));
    border: 1px dashed rgba(99, 102, 241, 0.45);
    opacity: 0.95;
}
.holiday-text.more-holidays:hover {
    background: rgba(99, 102, 241, 0.28); /* ios-fb */
    background: color-mix(in srgb, #6366f1 28%, var(--calendar-background));
    opacity: 1;
}

.recurrencyEventDiv {
    opacity: .6;
}

.customRecurDiv {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 250px;
    flex-direction: row;
    flex-wrap: wrap;
}

.weeklyRecurDaysEnabled {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    padding: 10px 4px 4px;
}

.weeklyRecurDay {
    height: 38px;
    width: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    margin: 0;
    /* Active (on) state */
    background: var(--button-bg);
    color: #fff;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(91, 190, 88, 0.35);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.15s ease,
                box-shadow 0.15s ease,
                color 0.15s ease;
}

.weeklyRecurDay:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 14px rgba(91, 190, 88, 0.45);
}

.weeklyRecurDay.inactiveCircle {
    background: var(--input-bg);
    color: var(--text-color);
    opacity: 0.45;
    border: 2px solid var(--border-color);
    box-shadow: none;
}

.weeklyRecurDay.inactiveCircle:hover {
    opacity: 0.75;
    box-shadow: none;
}

.customRecurDiv > span {
    padding: 0 10px;
}

input#e_recur_q {
    text-align: center;
    padding: 10px;
    width: 65px;
    box-sizing: border-box;
}

.eventDiv:hover {
    cursor: pointer;
    transform: scale(1.0);
    box-shadow: 0 1px 5px rgba(0,0,0,0.13);
    z-index: 10;
}

.eventDivDraggable {
    z-index: 99999 !important;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.drag-over {
    background-color: var(--dragover-block-bg) !important;
}

.calTypeSwitch {
    margin-top: 10px;
    display: none;
    margin-bottom: 0;
    font-size: small;
}

.calTypeSwitch .switch input + .slider {
    background-color: var(--pending-color);
}

.calTypeSwitch .switch input:checked + .slider {
    background-color: var(--warn);
}

.calTypeSwitch .switch {
    width: 44px;
    height: 22px;
}

.calTypeSwitch .slider:before {
    height: 16px;
    width: 16px;
    left: 3px;
}

/* ── Bottom info bar ── */

.dayInfoToggleBar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;

    display: flex;
    justify-content: space-around;
    align-items: center;

    /* padding: 0 10px; */
    z-index: 5;

    background: linear-gradient(135deg, var(--button-bg) 0%, rgba(var(--btn-rgb), 0.85) 100%); /* ios-fb */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    box-shadow:
        0 -4px 24px rgba(0, 0, 0, 0.22),
        0 -1px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.14);

    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}

@supports (background: color-mix(in srgb, black, white)) {
    .dayInfoToggleBar {
        background: linear-gradient(135deg,
        var(--button-bg) 0%,
        color-mix(in srgb, var(--button-bg) 62%, #0a1a09) 100%);
    }
    
    
}

/* Top shine line — mirrors menu bar's ::before */
.dayInfoToggleBar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.32);
    pointer-events: none;
    z-index: 1;
}

.dayInfoToggleBar.closedBar {
    transform: translateY(100%);
}

/* ── Floating toggle button ── */

.dayInfoToggleBtn {
    z-index: 1;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 30%);
    width: 50px;
    height: 50px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--calendar-background); /* ios-fb */
    background: color-mix(in srgb, var(--calendar-background) 80%, transparent);
    color: var(--text-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 4px 16px var(--btn-shadow);
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s;
    will-change: transform;
    opacity: .8;
}

.dayInfoToggleBtn:hover {
    cursor: pointer;
    transform: translate(-50%, 30%) scale(1.12);
    box-shadow: 0 8px 24px var(--btn-shadow-hover);
}

/* ── Tabs ── */

.dayInfoToggleTab {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;

    color: rgba(255, 255, 255, 0.72);
    transition: color .2s ease, transform .15s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.dayInfoToggleTab i {
    font-size: 18px;
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:not(#zmanimView) > .fa-clock {
    color: #ffd166;
}

.dayInfoToggleTab:hover {
    cursor: pointer;
    color: #fff;
}

.dayInfoToggleTab:hover i {
    transform: scale(1.15);
}

.dayInfoToggleTab#omerTab {
    display: none;
}

/* ── Active tab ── */

.dayInfoToggleTab.active {
    color: #fff;
}

.dayInfoToggleTab.active::after {
    content: "";
    position: absolute;
    bottom: 8px;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
    opacity: 1;
}

/* ── Mobile ── */

@media (max-width: 480px) {
    .dayInfoToggleBar {
        height: 58px;
    }

    .dayInfoToggleTab {
        font-size: 12px;
        gap: 3px;
    }

    .dayInfoToggleTab i {
        font-size: 17px;
    }

    .dayInfoToggleBtn {
        width: 45px;
        height: 45px;
    }
}


/* ═══════════════════════════════════════════════
   OMER POPUP — 2026 Design
   ═══════════════════════════════════════════════ */

#omerPopup {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#omerPopup .popupContent {
    box-sizing: border-box;
    max-width: 580px;
    padding: 26px 22px 30px;
}

/* ── Header ───────────────────────────────────── */

.omer-hdr {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 54px;
    margin-bottom: 20px;
    margin-top: 15px;
}

.omer-fire-badge {
    top: -14px;
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff6b35, #e83f3f);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.45);
    animation: omerPulse 2.5s ease-in-out infinite;
}

.omer-fire-badge i {
    color: #fff;
    font-size: 20px;
}

@keyframes omerPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(255, 107, 53, 0.45); transform: scale(1); }
    50%       { box-shadow: 0 8px 26px rgba(255, 107, 53, 0.7);  transform: scale(1.06); }
}

.omer-hdr-text {
    flex: 1;
    min-width: 0;
}

.omer-hdr-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
    margin-top: 15px;
}

.omer-hdr-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.omer-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--input-bg);
    color: var(--text-color);
    opacity: 0.8;
    border: 1px solid var(--border-color);
    gap: 3px;
}

/* ── Hero: ring + bracha ──────────────────────── */

.omer-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: var(--day-back);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    margin-bottom: 14px;
}

.omer-ring-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}

.omer-ring-svg {
    width: 100%;
    height: 100%;
}

.omer-ring-track {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 10;
}

.omer-ring-arc {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.omer-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.omer-ring-num {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text-color);
}

.omer-ring-sub {
    font-size: 0.62rem;
    color: var(--text-color);
    opacity: 0.5;
    margin-top: 2px;
}

.omer-bracha-col {
    flex: 1;
    min-width: 0;
}

#omer-day {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--button-bg);
    line-height: 1.65;
    margin: 0;
}

.omer-day-prayer-text {
    font-weight: 700;
    color: #16a34a;
    font-size: 1.05rem;
}

/* ── Count toggle pill ────────────────────────── */

.omer-action-row {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.omer-count-toggle {
    display: block;
    cursor: pointer;
    width: 100%;
    max-width: 300px;
}

.omer-count-toggle input[type="checkbox"] {
    display: none;
}

.omer-toggle-pill {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 28px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--input-bg);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.omer-toggle-pill:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.omer-on-txt {
    display: none;
}

.omer-count-toggle input:checked + .omer-toggle-pill {
    background: linear-gradient(135deg, #15803d, #22c55e);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(21, 128, 61, 0.4);
}

.omer-count-toggle input:checked + .omer-toggle-pill .omer-off-txt { display: none; }
.omer-count-toggle input:checked + .omer-toggle-pill .omer-on-txt  { display: block; }

/* ── Guest lock state ─────────────────────────── */

#countedTodayCheck.omer-guest .omer-count-toggle {
    pointer-events: none;
    cursor: default;
}

#countedTodayCheck.omer-guest .omer-toggle-pill {
    opacity: 0.45;
    cursor: default;
    filter: grayscale(0.4);
}

#countedTodayCheck.omer-guest .omer-toggle-pill .omer-off-txt,
#countedTodayCheck.omer-guest .omer-toggle-pill .omer-on-txt {
    display: none;
}

#countedTodayCheck.omer-guest .omer-toggle-pill::after {
    content: '🔒 התחבר לשמור ספירה';
    font-size: 0.95rem;
    font-weight: 600;
}

/* ── Navigation lock (logged-in, non-today day selected) ── */

#countedTodayCheck.omer-not-today .omer-count-toggle {
    pointer-events: none;
    cursor: default;
}

#countedTodayCheck.omer-not-today .omer-toggle-pill {
    opacity: 0.6;
    cursor: default;
    background: var(--calendar-background); /* ios-fb */
    background: color-mix(in srgb, var(--border-color) 40%, var(--calendar-background));
    border-color: var(--border-color);
    box-shadow: none;
    color: var(--text-color);
}

#countedTodayCheck.omer-not-today .omer-toggle-pill .omer-off-txt,
#countedTodayCheck.omer-not-today .omer-toggle-pill .omer-on-txt {
    display: none;
}

#countedTodayCheck.omer-not-today.omer-future .omer-toggle-pill::after {
    content: '📅 ממתין להגיע לתאריך זה';
    font-size: 0.88rem;
    font-weight: 600;
}

#countedTodayCheck.omer-not-today.omer-past .omer-toggle-pill::after {
    content: '📅 יום זה כבר עבר';
    font-size: 0.88rem;
    font-weight: 600;
}

/* ── Prayer section ───────────────────────────── */

.omer-prayer-wrap {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
}

.omer-prayer-always {
    padding: 14px 18px;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-color);
    user-select: text;
    -webkit-user-select: text;
}

.omer-prayer-always p {
    margin: 0 0 8px 0;
}

.omer-prayer-always p:last-child {
    margin-bottom: 0;
}

.omer-prayer-extra {
    display: none;
    padding: 12px 18px 14px;
    font-size: 0.86rem;
    line-height: 1.9;
    color: var(--text-color);
    opacity: 0.85;
    white-space: break-spaces;
    user-select: text;
    -webkit-user-select: text;
    border-top: 1px solid var(--border-color);
}

.omer-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-color);
    color: var(--button-bg);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.omer-expand-btn:hover {
    background: var(--hover-bg);
}

/* ── 49-day grid ──────────────────────────────── */

.omerBoxes {
    display: grid;
    grid-template-columns: 26px repeat(7, 1fr);
    gap: 4px;
    margin-top: 0;
}

.omer-week-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-color);
    opacity: 0.45;
    background: var(--input-bg);
    border-radius: 6px;
}

/* Base box */
.omerBox {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.78rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.18s ease, opacity 0.18s ease, outline 0.18s ease;
    opacity: 0.82;
}

.omerBox:hover {
    opacity: 1;
    transform: scale(1.1);
    z-index: 1;
}

.omerBox.omer-selected {
    outline: 3px solid #fff;
    outline-offset: -3px;
    opacity: 1;
    transform: scale(1.12);
    z-index: 2;
}

/* Counted ✓ */
.omerBox.counted {
    background: linear-gradient(135deg, #15803d, #22c55e);
    box-shadow: 0 3px 10px rgba(21, 128, 61, 0.4);
}

/* Pending ⏳ */
.omerBox.pending-count {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.35);
}

/* Missed ✕ */
.omerBox.not-counted {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    box-shadow: 0 3px 10px rgba(185, 28, 28, 0.35);
}

/* Desktop */
@media (min-width: 768px) {
    .omerBoxes {
        grid-template-columns: 34px repeat(7, 1fr);
        gap: 7px;
    }

    .omerBox {
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .omer-week-tag {
        font-size: 0.68rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    #omerPopup .popupContent {
        max-width: 100%;
        padding: 18px 14px 22px;
    }

    .omer-hero {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 16px;
    }

    .omer-bracha-col {
        width: 100%;
    }

    .omer-hdr-title {
        font-size: 1.15rem;
    }

    .omer-ring-wrap {
        width: 90px;
        height: 90px;
    }

    .omer-toggle-pill {
        font-size: 0.98rem;
        padding: 13px 22px;
    }

    .omerBoxes {
        grid-template-columns: 20px repeat(7, 1fr);
        gap: 3px;
    }

    .omer-week-tag {
        font-size: 0.52rem;
        border-radius: 4px;
    }

    .omerBox {
        font-size: 0.7rem;
        border-radius: 7px;
    }
}

/* fire icon base color (used in calendar day icons) */
.fa-fire {
    color: #f97316;
}

/* Omer — END */

/* ═══════════════════════════════════════════════
   ZMANIM POPUP — 2026 Design
   ═══════════════════════════════════════════════ */

#zmanimPopup {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#zmanimPopup .zmanim-popup-content {
    box-sizing: border-box;
    max-width: 520px;
    padding: 26px 22px 30px;
}

/* ── Header ── */

.zmanim-hdr {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 54px;
    margin-bottom: 20px;
}

.zmanim-hdr-text {
    flex: 1;
    min-width: 0;
}

.zmanim-clock-badge {
    top: -12px;
    position: absolute;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffd166, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}

.zmanim-clock-badge i {
    color: #fff;
    font-size: 20px;
}

.zmanim-hdr-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
    margin-top: 15px;
}

.zmanim-hdr-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

/* ── Holiday / special-day chips ── */

.zmanimDayEvents {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.zmanim-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(var(--btn-rgb), 0.12); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 12%, var(--calendar-background));
    color: var(--button-bg);
    border: 1.5px solid rgba(var(--btn-rgb), 0.28); /* ios-fb */
    border: 1.5px solid color-mix(in srgb, var(--button-bg) 28%, transparent);
}

.zmanim-event-chip i {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* ── Zmanim grid ── */

.zmanimDiv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.zmanDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 11px 10px;
    background: var(--day-back);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.zmanDiv:hover {
    background: rgba(var(--btn-rgb), 0.06); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 6%, var(--day-back));
    border-color: rgba(var(--btn-rgb), 0.35); /* ios-fb */
    border-color: color-mix(in srgb, var(--button-bg) 35%, transparent);
}

.zmanDiv .zmanTitleType {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.65;
    line-height: 1.2;
}

.zmanDiv .zman-time {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--button-bg);
    line-height: 1;
    letter-spacing: 0.5px;
}

/* ── Mobile ── */

@media (max-width: 480px) {
    .zmanimDiv {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .zmanDiv {
        padding: 9px 8px;
    }
    .zmanDiv .zman-time {
        font-size: 1rem;
    }
}

/* Zmanim — END */

/* ════════════════════════════════════════════════════════════
   Agenda View
   ════════════════════════════════════════════════════════════ */

#agendaView {
    flex: 1;
    flex-direction: column;
    min-height: 0;
    /* overflow-y: auto allows internal scrolling while min-height: 0 keeps it
       within the flex container's allocated height. Do NOT add
       -webkit-overflow-scrolling:touch — it creates an iOS stacking context
       that breaks position:fixed overlays (popupDiv). */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: 60px;
}

.agenda-holidays {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}

/* Month boundary label */
.agenda-month-mark {
    padding: 12px 16px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-color);
    opacity: 0.38;
}

/* ── Day row ─────────────────────────────────────── */
.agenda-day {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    min-height: 52px;
    cursor: pointer;
    background: transparent;
    box-shadow: inset 0 0 0 0px transparent;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.agenda-day.selectedDate {
    background: var(--today-bg);
    box-shadow: inset 0 0 0 1px var(--button-bg);
}

/* Date column */
.agenda-day-header {
    width: 60px;
    flex-shrink: 0;
    padding: 10px 8px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

html.rtl .agenda-day-header {
    padding: 10px 14px 10px 8px;
}

.agenda-date-num {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color);
    border-radius: 50%;
    flex-shrink: 0;
}

.agenda-today .agenda-date-num {
    background: var(--button-bg);
    color: #fff;
    font-size: 16px;
}

.agenda-day-name {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.45;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.agenda-heb-date {
    font-size: 9px;
    color: var(--button-bg);
    font-weight: 600;
    text-align: center;
}

/* Content column */
.agenda-day-body {
    flex: 1;
    min-width: 0;
    padding: 10px 14px 12px 10px;
    border-right: 2px solid transparent;
    transition: border-color 0.2s;
}

html.rtl .agenda-day-body {
    padding: 10px 10px 12px 14px;
    border-right: none;
    border-left: 2px solid transparent;
}

.agenda-today .agenda-day-body {
    border-right-color: var(--button-bg);
}

html.rtl .agenda-today .agenda-day-body {
    border-left-color: var(--button-bg);
    border-right-color: transparent;
}

.agenda-today .agenda-day-header {
    background: rgba(var(--btn-rgb), 0.04); /* ios-fb */
    background: color-mix(in srgb, var(--button-bg) 4%, var(--calendar-background));
}

/* ── Holidays ─────────────────────────────────────── */
.agenda-holidays {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}

.agenda-holiday-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.agenda-holiday-chip:hover {
    filter: brightness(0.88);
}

.agenda-holiday-chip.parasha {
    background: rgba(99, 102, 241, 0.11); /* ios-fb */
    background: color-mix(in srgb, #6366f1 11%, var(--calendar-background));
    color: #6366f1;
}

.agenda-holiday-chip.omer {
    background: rgba(255, 69, 0, 0.1);
    color: #c94500;
}

.agenda-holiday-chip.candle-time {
    background: rgba(255, 180, 0, 0.12);
    color: #b07800;
}

/* Candle / havdalah chips — all views */
.holiday-text.candle-compact,
.holiday-text.candle-full {
    background: rgba(255, 180, 0, 0.14);
    color: #b07800;
    gap: 4px;
    cursor: default;
    white-space: nowrap;
}

/* ── User events ──────────────────────────────────── */
.agenda-event {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    background: rgba(var(--btn-rgb), 0.07); /* ios-fb */
    background: color-mix(in srgb, var(--ev-color, var(--button-bg)) 7%, var(--calendar-background));
    border-right: 3px solid var(--ev-color, var(--button-bg));
    transition: background 0.15s, transform 0.1s;
}
/* Agenda Google events: keep tinted style, just use the event's own color via --ev-color */
.agenda-event.googleEvent {
    background-color: unset;
    background-image: unset;
    background: color-mix(in srgb, var(--ev-color, #4285F4) 7%, var(--calendar-background));
    border-color: var(--ev-color, #4285F4);
    color: var(--text-color) !important;
    font-weight: 400 !important;
    text-shadow: none;
    box-shadow: none !important;
}
.agenda-event.googleEvent:hover {
    background: color-mix(in srgb, var(--ev-color, #4285F4) 14%, var(--calendar-background));
}

html.rtl .agenda-event {
    border-right: none;
    border-left: 3px solid var(--ev-color, var(--button-bg));
}

.agenda-event:hover {
    background: rgba(var(--btn-rgb), 0.14); /* ios-fb */
    background: color-mix(in srgb, var(--ev-color, var(--button-bg)) 14%, var(--calendar-background));
    transform: translateX(2px);
}

html.rtl .agenda-event:hover {
    transform: translateX(-2px);
}

.agenda-event-time {
    font-size: 10.5px;
    color: var(--ev-color, var(--button-bg));
    font-weight: 600;
    white-space: nowrap;
    min-width: 70px;
    flex-shrink: 0;
}

.agenda-event-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.agenda-event-shared {
    font-size: 10px;
    color: var(--ev-color, var(--button-bg));
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Empty day ────────────────────────────────────── */
.agenda-no-events {
    padding: 2px 0;
    color: var(--text-color);
    opacity: 0.18;
    font-size: 11px;
}

/* ── Sentinel / loader ────────────────────────────── */
.agenda-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    gap: 8px;
    color: var(--text-color);
    opacity: 0.3;
    font-size: 12px;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
    .agenda-day-header {
        width: 52px;
        padding: 10px 6px 10px 10px;
    }

    html.rtl .agenda-day-header {
        padding: 10px 10px 10px 6px;
    }

    .agenda-date-num {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .agenda-today .agenda-date-num {
        font-size: 14px;
    }

    .agenda-event-time {
        min-width: 60px;
    }
}

/* Agenda — END */


/* ═══════════════════════════════════════════════
   EVENT POPUP — Redesign 2026
   ═══════════════════════════════════════════════ */

/* Narrow card on desktop */
#modifyEventPopup .popupContent.ep-content {
    max-width: 500px;
}

/* Bottom-sheet on mobile */
@media (max-width: 640px) {
    #modifyEventPopup {
        align-items: flex-end;
        padding: 0;
    }
    #modifyEventPopup .popupContent.ep-content {
        border-radius: 22px 22px 0 0;
        max-height: 92vh;
        width: 100%;
        max-width: 100%;
        animation: epSlideUp .32s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #zmanimPopup .zmanim-popup-content {
        max-width: 100%;
    }

    #joinusPopup .joinus-popup-content {
        max-width: 100%;
    }
}

@keyframes epSlideUp {
    from { transform: translateY(60%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ── EP field: icon + input wrapper ── */

.ep-field {
    position: relative;
    margin: 10px 0;
}

/* Icon sits inside the field, positioned at the "start" edge (right in RTL) */
.ep-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
    font-size: 14px;
    transition: opacity 0.2s, color 0.2s;
}

html:not(.rtl) .ep-icon {
    right: auto;
    left: 14px;
}

/* Input inside ep-field: make room for icon on the start side */
.ep-field .input {
    padding: 13px 44px 13px 14px; /* RTL: right (start) = icon */
    height: 50px;
    margin: 0;
    box-sizing: border-box;
    font-size: 15px;
}

html:not(.rtl) .ep-field .input {
    padding: 13px 14px 13px 44px; /* LTR: left (start) = icon */
}

/* Focus: highlight the icon */
.ep-field .input:focus ~ .ep-icon {
    opacity: 0.85;
    color: var(--button-bg);
}

/* ── Floating label inside ep-field ── */

.ep-field.ep-floating label {
    position: absolute;
    right: 44px;  /* RTL: after icon space */
    /* left: 14px; */
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: var(--text-color);
    opacity: 0.5;
    pointer-events: none;
    background: transparent;
    padding: 0;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: top 0.18s ease, font-size 0.18s ease, right 0.18s ease,
                left 0.18s ease, opacity 0.18s ease, color 0.18s ease,
                transform 0.18s ease;
}

html:not(.rtl) .ep-field.ep-floating label {
    right: auto;
    left: 44px;
}

/* Raised state: input focused or has value */
.ep-field.ep-floating input:focus + label,
.ep-field.ep-floating input:not(:placeholder-shown) + label,
.ep-field.ep-floating textarea:focus + label,
.ep-field.ep-floating textarea:not(:placeholder-shown) + label {
    top: 0;
    right: 10px;
    left: auto;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 1;
    color: var(--button-bg);
    background: var(--calendar-background);
    padding: 0 4px;
}

html:not(.rtl) .ep-field.ep-floating input:focus + label,
html:not(.rtl) .ep-field.ep-floating input:not(:placeholder-shown) + label,
html:not(.rtl) .ep-field.ep-floating textarea:focus + label,
html:not(.rtl) .ep-field.ep-floating textarea:not(:placeholder-shown) + label {
    right: auto;
    left: 10px;
}

/* Highlight icon when floating input is focused */
.ep-field.ep-floating input:focus ~ .ep-icon,
.ep-field.ep-floating textarea:focus ~ .ep-icon {
    opacity: 0.85;
    color: var(--button-bg);
}

/* Textarea variant */
.ep-field.ep-textarea-field .input {
    height: auto;
    min-height: 88px;
    padding-top: 22px;
    resize: vertical;
}

.ep-field.ep-textarea-field .ep-icon {
    top: 18px;
    transform: none;
}

/* Textarea: label resting at same height as text start, not vertically centered */
.ep-field.ep-textarea-field.ep-floating label {
    top: 18px;
    transform: none;
}

/* ── Date + Time side-by-side row ── */

.ep-dt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0;
}

.ep-dt-row .ep-field {
    margin: 0;
}

/* ── Custom select row (icon + select + chevron) ── */

.ep-select-row {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 0;
}

/* Icon anchored to start edge of the row */
.ep-select-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.4;
    pointer-events: none;
    z-index: 2;
    font-size: 14px;
    transition: opacity 0.2s, color 0.2s;
}

html:not(.rtl) .ep-select-icon {
    right: auto;
    left: 14px;
}

.ep-select-row:focus-within .ep-select-icon {
    opacity: 0.85;
    color: var(--button-bg);
}

/* Select wrapper: makes room for icon and chevron */
.ep-select-wrap {
    position: relative;
    width: 100%;
}

.ep-select-wrap select.input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    margin: 0;
    height: 50px;
    font-size: 15px;
    /* RTL: icon on right (44px), chevron on left (32px) */
    padding: 13px 44px 13px 32px;
}

html:not(.rtl) .ep-select-wrap select.input {
    /* LTR: icon on left (44px), chevron on right (32px) */
    padding: 13px 32px 13px 44px;
}

/* Inline select (no extra row icon) */
.ep-select-wrap.ep-inline-select {
    display: inline-block;
    width: auto;
}

.ep-select-wrap.ep-inline-select select.input {
    height: auto;
    padding: 10px 12px 10px 28px; /* RTL: chevron on left */
    font-size: 14px;
    min-width: 90px;
}

html:not(.rtl) .ep-select-wrap.ep-inline-select select.input {
    padding: 10px 28px 10px 12px; /* LTR: chevron on right */
}

/* Dropdown chevron */
.ep-chevron {
    position: absolute;
    left: 11px;   /* RTL: end edge */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.45;
    transition: color 0.2s, opacity 0.2s, transform 0.2s;
}

html:not(.rtl) .ep-chevron {
    left: auto;
    right: 11px;  /* LTR: end edge */
}

.ep-select-wrap:focus-within .ep-chevron {
    color: var(--button-bg);
    opacity: 0.9;
    transform: translateY(-50%) rotate(180deg);
}

/* ── Pre-notify row layout ── */

.preNotifyInputDiv {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.preNotifyInputDiv #eventPreNotifyQuantity,
.preNotifyInputDiv #gce-notify-qty {
    width: 70px;
    height: 44px;
    text-align: center;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */
}

/* ── Custom recur row layout ── */

.customRecurDiv {
    gap: 8px;
    align-items: center;
}

.customRecurDiv input#e_recur_q {
    width: 60px;
    height: 44px;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */
}

/* ── Mobile calendar responsive ── */

@media (max-width: 480px) {
    .ep-dt-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ep-dt-row .ep-field {
        margin: 6px 0;
    }

    .month .day {
        height: 100%;
        min-height: unset;
        max-height: unset;
    }
}

/* Event Popup Redesign — END */

/* (Clockpicker element styles consolidated at the top of this file) */

/* ═══════════════════════════════════════════════════════════════════════
   TIMED CALENDAR VIEWS — Week & Day
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Week view scroll container ────────────────────────────────────────── */
.week-grid {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 115px);
}

/* ── Sticky compound header (day names + all-day row) ───────────────────── */
.week-header-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--calendar-background);
    border-bottom: 1px solid var(--border-color);
}

.week-dayname-row,
.week-allday-row {
    display: grid;
    grid-template-columns: 52px repeat(7, 1fr);
}

.week-time-gutter {
    border-inline-end: 1px solid var(--border-color);
    background: var(--calendar-background);
}

.week-allday-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-color);
    opacity: 0.6;
    padding: 4px 2px;
    border-top: 1px solid var(--border-color);
}

/* Day header cell in week view */
.week-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px 4px;
    cursor: pointer;
    border-inline-start: 1px solid var(--border-color);
    position: relative;
    min-width: 0;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

.week-day-header.today {
    background: rgba(91, 190, 88, 0.06);
}

.week-dayname {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.55;
    text-transform: uppercase;
}

.week-date-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}

.week-day-header.today .week-date-num {
    color: var(--button-bg);
}

.week-day-header .hebDateTxt {
    font-size: 9px;
    opacity: 0.5;
}

.week-day-plus {
    position: absolute;
    top: 4px;
    inset-inline-end: 6px;
    font-size: 14px;
    opacity: 0;
    color: var(--button-bg);
    transition: opacity 0.15s;
    z-index: 2;
}

.week-day-header:hover .week-day-plus {
    opacity: 1;
}

/* All-day cells in week view */
.week-allday-cell {
    min-height: 26px;
    border-inline-start: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    padding: 2px 1px;
    position: relative;
    overflow: hidden;
}

.week-allday-cell.drag-over,
.day-allday-cell.drag-over {
    background: rgba(91, 190, 88, 0.12);
    outline: 2px dashed var(--button-bg);
    outline-offset: -2px;
}

/* ── Timed area (below header) ─────────────────────────────────────────── */
.week-timed-area {
    display: grid;
    grid-template-columns: 52px 1fr;
    position: relative;
}

/* Sticky left time gutter */
.week-time-col {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--calendar-background);
    border-inline-end: 1px solid var(--border-color);
}

.week-hour-label {
    height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    font-size: 10px;
    opacity: 0.5;
    box-sizing: border-box;
    border-top: 1px solid var(--border-color);
}

/* 7-column day wrapper */
.week-days-wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
}

/* Individual day column */
.week-day-col {
    position: relative;
    height: 1440px; /* 24 × 60px */
    border-inline-start: 1px solid var(--border-color);
    box-sizing: border-box;
    overflow: hidden;
}

.week-day-col.today {
    background: rgba(91, 190, 88, 0.03);
}

/* Hour drop zones — invisible, used for drag-drop and click-to-create */
.weekDayHourBox {
    position: absolute;
    width: 100%;
    height: 60px;
    cursor: pointer;
    z-index: 1;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .weekDayHourBox {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.weekDayHourBox .eventsDiv {
    pointer-events: none;
    height: 100%;
}

.weekDayHourBox.drag-over {
    background: rgba(91, 190, 88, 0.12);
}

/* ── Day view scroll container ─────────────────────────────────────────── */
.day-grid {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 115px);
}

/* Sticky header */
.day-header-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--calendar-background);
    border-bottom: 1px solid var(--border-color);
}

.day-header-row,
.day-allday-row {
    display: grid;
    grid-template-columns: 52px 1fr;
}

.day-header-gutter {
    border-inline-end: 1px solid var(--border-color);
    background: var(--calendar-background);
}

.day-allday-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-color);
    opacity: 0.6;
    padding: 4px 2px;
    border-top: 1px solid var(--border-color);
}

.day-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    flex-wrap: wrap;
    border-inline-start: 1px solid var(--border-color);
}

.day-header-main .fa-plus-circle {
    font-size: 16px;
    color: var(--button-bg);
    cursor: pointer;
    opacity: 0.8;
}

.day-header-main .fa-plus-circle:hover {
    opacity: 1;
}

.day-allday-cell {
    min-height: 26px;
    border-inline-start: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    padding: 2px 4px;
    position: relative;
    overflow: hidden;
}

/* Day timed area */
.day-timed-area {
    display: grid;
    grid-template-columns: 52px 1fr;
    position: relative;
}

.day-time-col {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--calendar-background);
    border-inline-end: 1px solid var(--border-color);
}

.day-hour-label {
    height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    font-size: 10px;
    opacity: 0.5;
    box-sizing: border-box;
    border-top: 1px solid var(--border-color);
}

.day-event-col {
    position: relative;
    height: 1440px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Day view hour drop zones */
.dayHourBox {
    position: absolute;
    width: 100%;
    height: 60px;
    cursor: pointer;
    z-index: 1;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .dayHourBox {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.dayHourBox .eventsDiv {
    pointer-events: none;
    height: 100%;
}

.dayHourBox.drag-over {
    background: rgba(91, 190, 88, 0.12);
}

/* ── Timed events (position:absolute within day/week column) ────────────── */
.timed-event {
    position: absolute;
    border-radius: 4px;
    padding: 2px 5px;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    box-sizing: border-box;
    border-inline-start: 3px solid rgba(0, 0, 0, 0.2);
    font-size: 11px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    transition: filter 0.15s;
    color: #fff;
}

.timed-event:hover {
    filter: brightness(0.88);
    z-index: 3;
}

/* Long event rendered as background overlay behind shorter overlapping events */
.timed-event.timed-overlay {
    z-index: 1;
    opacity: 0.6;
    border-inline-start-width: 3px;
}
.timed-event.timed-overlay:hover {
    z-index: 1;
    opacity: 0.85;
}

.timed-event .ev-time {
    font-size: 10px;
    opacity: 0.9;
    font-weight: 600;
    white-space: nowrap;
}

.timed-event .ev-title {
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ── Current time line in new timed layout ─────────────────────────────── */
.week-day-col > .currentTimeLine,
.day-event-col > .currentTimeLine {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    pointer-events: none;
}

/* ── Month view multi-day event span bars ───────────────────────────────── */
.eventDiv.span-start {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    margin-inline-end: 0 !important;
}

.eventDiv.span-mid {
    border-radius: 0;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

.eventDiv.span-end {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: 0 !important;
}

/* ── Popup all-day toggle row ───────────────────────────────────────────── */
.ep-allday-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin: 4px 0 8px;
}

.ep-allday-label {
    flex: 1;
    font-size: 14px;
}

/* ── Calendar picker (UCal / Google switch) ──────────────────────────── */
.ep-cal-picker {
    display: flex;
    gap: 6px;
    margin: 6px 0 10px;
    background: var(--input-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
}

.ep-cal-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--text-color);
    transition: background 0.2s, color 0.2s;
}

.ep-cal-btn.active {
    background: var(--button-bg);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.ep-cal-icon-g {
    font-size: 13px;
}

.ep-cal-icon-u {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

/* ── Mobile responsive overrides ───────────────────────────────────────── */
@media (max-width: 640px) {
    .week-grid,
    .day-grid {
        height: calc(100vh - 105px);
    }

    .week-dayname-row,
    .week-allday-row {
        grid-template-columns: 40px repeat(7, 1fr);
    }

    .week-timed-area {
        grid-template-columns: 40px 1fr;
    }

    .week-hour-label {
        font-size: 8px;
    }

    .week-date-num {
        font-size: 15px;
    }

    .week-day-header {
        padding: 4px 2px;
    }

    .day-header-row,
    .day-allday-row,
    .day-timed-area {
        grid-template-columns: 40px 1fr;
    }

    .day-hour-label {
        font-size: 8px;
    }

    .timed-event {
        font-size: 9px;
        padding: 1px 2px;
    }

    .timed-event .ev-time {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   GOOGLE CALENDAR EVENTS
   ═══════════════════════════════════════════════════════════════════════ */

.googleEvent {
    /* Color comes from --gc-color set inline per-event; falls back to Google blue */
    background-color: var(--gc-color, #4285F4);
    background-image: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    position: relative;
    border-inline-start: none !important;
    box-shadow:
        0 0 0 1.5px rgba(255,255,255,0.2),
        0 3px 8px rgba(0,0,0,0.25) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* "G" badge — top-end corner */
.googleEvent::after {
    content: 'G';
    position: absolute;
    top: 2px;
    inset-inline-end: 4px;
    font-size: 9px;
    font-weight: 900;
    color: rgba(255,255,255,0.65);
    line-height: 1;
    pointer-events: none;
}

/* Keep child text white in timed events */
.timed-event.googleEvent .ev-time,
.timed-event.googleEvent .ev-title { color: #fff !important; }

/* ─── Google Event Popup ──────────────────────────────────────────────── */
#googleEventPopup .popupContent { position: relative; }

.gce-badge {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a73e8, #4285F4);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(26,115,232,0.4);
    z-index: 1;
    pointer-events: none;
}
.gce-header {
    margin-bottom: 18px;
    text-align: center;
}
.gce-header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 2.1;
}
#gce-time-row { display: flex; }

/* ═══════════════════════════════════════════════════════════════════════
   TIMED CALENDAR VIEWS — END
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Google Calendar color swatches ─────────────────────────────────────── */
.gcp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gcp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}
.gcp-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.gcp-swatch:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.gcp-swatch.selected {
    border-color: var(--text-color, #333);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--text-color, #333);
    transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODERN EVENT STYLES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── All-day events (month / week header) ─────────────────────────────── */
.eventDiv {
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    border-inline-start: 3px solid rgba(0,0,0,0.18);
    padding: 2px 5px;
}
.month .eventDiv {
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 5px 2px 4px;
}
.eventDiv:hover {
    transform: scale(1.02);
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}

/* ── Timed events (day / week columns) ───────────────────────────────── */
.timed-event {
    border-radius: 8px;
    border-inline-start: 4px solid rgba(0,0,0,0.22);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
    padding: 3px 6px;
    font-size: 11.5px;
    backdrop-filter: none;
}
.timed-event:hover {
    filter: brightness(0.9);
    box-shadow: 0 4px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px);
    transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
}
.timed-event .ev-time {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.85;
    letter-spacing: 0.02em;
}
.timed-event .ev-title {
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.35;
}

/* ── Google events: no left border (already styled differently) ─────── */
.timed-event.googleEvent,
.eventDiv.googleEvent {
    border-inline-start: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ── ColorPick popup — 5-column grid ────────────────────────────────── */
.colorPickWrapper {
    position: fixed !important;
    z-index: 99999 !important;
}
#colorPick {
    /* Layout: 5-column swatch grid */
    display: grid !important;
    grid-template-columns: repeat(5, 32px) !important;
    gap: 6px !important;
    /* Sizing */
    width: auto !important;
    padding: 12px !important;
    /* Appearance */
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10) !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 99999 !important;
}
/* Label spans all 5 columns */
#colorPick span {
    grid-column: 1 / -1 !important;
    font-size: 9px !important;
    margin: 0 0 4px !important;
    color: #aaa !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
/* Swatch buttons */
#colorPick .colorPickButton {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    margin: 0 !important;
    border: 2px solid transparent !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    cursor: pointer !important;
}
#colorPick .colorPickButton:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.20) !important;
}
/* Dark mode */
html.dark #colorPick,
body.dark #colorPick {
    background: rgba(55,55,55,0.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3) !important;
}
html.dark #colorPick span,
body.dark #colorPick span {
    color: #666 !important;
}