/* ============================================================
   calendar.css
   Calendar tab styles, consolidated from CSS-in-JS modules.

   Loaded once via a stylesheet link in app.html instead of being
   re-injected on every render through DOM-emitted style tags.
   The selector surface is unchanged from the prior JS-string
   versions; classes here are calendar-prefixed and don't collide
   with other tabs (Tailwind utilities are independent).

   Sections:
     1. Layout shell + mobile breakpoints   (was CalendarResponsiveStyles)
     2. Mobile month + stacked views        (was CalendarMobileStyles)
     3. Week header chrome                  (was WeekHeaderStyles)
   ============================================================ */

/* ============================================================
   1. Layout shell + mobile breakpoints
   ============================================================ */

.calendar-layout {
    display: flex;

    /* Stack the full-width top bar above the calendar body (view + sidebar)
       so the bar spans the entire content panel rather than just the view. */
    flex-direction: column;

    /* Fill the content panel exactly. The old viewport math
       (calc(100vh - 100px)) assumed a fixed 100px of top chrome,
       but the real panel is 100dvh minus the (now variable, 34-42px)
       topbar - so the layout fell ~60px short and left a strip of
       the panel uncovered at the bottom. With the no-accounts lock
       on (inset: 0 within this box) that strip showed through below
       the lock: a white stripe on email, and the real week grid -
       out of phase with the lock's faux grid - on calendar.
       height: 100% fills the parent regardless of topbar size, so
       the lock reaches the bottom edge. */
    height: 100%;

    /* The whole calendar tab shares the Dashboard/Email grey canvas. Surfaces
       inside (top bar, view grids, sidebar) read this token so they all match
       in both themes; the layout itself is transparent so the content panel's
       grey shows through. Light: #F8F9FA. Dark: the panel colour. */
    --cal-surface: #f8f9fa;

    background: transparent;

    /* No gap between the top bar and the body - the bar carries its own
       bottom border. The view/sidebar gutter lives on .calendar-body. */
    gap: 0;

    /* Flush with the content panel - the sidebar carries
       its own bottom-left curve so the layout no longer
       needs outer padding. */
    padding: 0;
    position: relative;
}

[data-theme='dark'] .calendar-layout {
    --cal-surface: var(--bg-primary);
}

/* The row beneath the full-width top bar: the active day/week/month view on
   the left and the sidebar (mini-month, calendars) on the right. */
.calendar-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: 12px;
    overflow: hidden;
}

.calendar-mobile-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(212 175 55 / 85%), rgb(79 70 229 / 90%));
    backdrop-filter: blur(24px);
    color: white;
    border: 1px solid rgb(255 255 255 / 20%);
    cursor: pointer;
    box-shadow:
        0 2px 8px rgb(212 175 55 / 25%),
        0 6px 20px rgb(212 175 55 / 20%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-mobile-sidebar-toggle:active {
    transform: scale(0.93);
}

.calendar-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.calendar-mobile-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile stacked view - hidden on desktop */
.calendar-mobile-stacked {
    display: none;
}

@media (width <= 768px) {
    .calendar-layout {
        padding: 0;
        gap: 0;
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 100px);
    }

    /* Hide desktop elements on mobile */
    .calendar-mobile-sidebar-toggle,
    .calendar-mobile-overlay,
    .calendar-week-header,
    .calendar-body,
    .calendar-sidebar,
    .calendar-main {
        display: none !important;
    }

    /* Show mobile stacked view */
    .calendar-mobile-stacked {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 12px;
        gap: 16px;
        overflow-y: auto;
    }

    .calendar-mobile-section {
        background: rgb(255 255 255 / 72%);
        backdrop-filter: blur(24px);
        border-radius: 16px;
        border: 1px solid rgb(255 255 255 / 45%);
        box-shadow: 0 2px 16px rgb(0 0 0 / 6%);
        overflow: hidden;
    }

    [data-theme='dark'] .calendar-mobile-section {
        background: rgb(30 30 30 / 65%);
        border-color: rgb(255 255 255 / 8%);
        box-shadow: 0 2px 16px rgb(0 0 0 / 25%);
    }

    .calendar-mobile-week-section {
        display: flex;
        flex-direction: column;
    }

    .calendar-mobile-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        border-bottom: 1px solid rgb(0 0 0 / 4%);
        letter-spacing: -0.01em;
    }

    [data-theme='dark'] .calendar-mobile-section-header {
        border-bottom-color: rgb(255 255 255 / 4%);
    }

    .calendar-mobile-today-btn {
        padding: 5px 11px;
        background: rgb(255 255 255 / 72%);
        backdrop-filter: blur(12px);
        border: 1px solid rgb(255 255 255 / 45%);
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
    }

    [data-theme='dark'] .calendar-mobile-today-btn {
        background: rgb(30 30 30 / 65%);
        border-color: rgb(255 255 255 / 8%);
    }

    .calendar-mobile-today-btn:active {
        transform: scale(0.96);
    }

    /* Compact month view for mobile stacked */
    .calendar-mobile-section .calendar-month-view {
        padding: 12px;
    }

    /* Compact week view for mobile stacked */
    .calendar-mobile-week-section .calendar-week-view {
        max-height: 300px;
        overflow-y: auto;
    }
}

@media (width <= 480px) {
    .calendar-mobile-stacked {
        padding: 8px;
        gap: 12px;
    }
}

/* ============================================================
   2a. Mobile month view
   ============================================================ */

.mobile-month-section {
    display: none;
}

@media (width <= 768px) {
    .mobile-month-section {
        display: block;
        border-top: 1px solid var(--border-light);
        background: var(--bg-primary);
    }

    .mobile-month-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        background: rgb(255 255 255 / 60%);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgb(0 0 0 / 4%);
    }

    [data-theme='dark'] .mobile-month-header {
        background: rgb(255 255 255 / 4%);
        border-bottom-color: rgb(255 255 255 / 4%);
    }

    .mobile-month-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mobile-month-nav {
        display: flex;
        gap: 8px;
    }

    .mobile-month-nav-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgb(255 255 255 / 72%);
        backdrop-filter: blur(12px);
        border: 1px solid rgb(255 255 255 / 45%);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
    }

    [data-theme='dark'] .mobile-month-nav-btn {
        background: rgb(30 30 30 / 65%);
        border-color: rgb(255 255 255 / 8%);
    }

    .mobile-month-nav-btn:hover {
        background: rgb(212 175 55 / 6%);
        color: var(--brand-primary);
    }

    .mobile-month-nav-btn:active {
        transform: scale(0.93);
    }

    /* Mobile month grid - fluid columns so the grid always fits
       the viewport. The previous fixed-width columns
       (50px x 7 + gaps) overflowed narrow phones, sending the
       last column(s) off-screen because the parent only scrolls
       vertically. */
    .mobile-month-section .calendar-month-view {
        padding: 8px !important;
        overflow: hidden !important;
    }

    .mobile-month-section .calendar-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        grid-auto-rows: 60px !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-month-section .calendar-day-cell {
        width: auto !important;
        min-width: 0 !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 4px !important;
        overflow: hidden !important;
    }

    .mobile-month-section .calendar-day-header {
        width: auto !important;
        min-width: 0 !important;
        font-size: 10px !important;
        text-align: center !important;
    }

    /* Compact day headers grid */
    .mobile-month-section .calendar-month-view > div > div:first-child {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-month-section .calendar-day-number {
        font-size: 12px !important;
    }

    .mobile-month-section .calendar-event-badge {
        padding: 1px 2px !important;
    }

    .mobile-month-section .calendar-event-time,
    .mobile-month-section .calendar-event-title {
        font-size: 8px !important;
    }

    .mobile-month-section .calendar-event-more {
        font-size: 8px !important;
    }
}

@media (width <= 480px) {
    /* Narrow phones: keep fluid columns but reduce row height so
       cells stay readable. Column widths still flex to viewport. */
    .mobile-month-section .calendar-month-grid {
        grid-auto-rows: 52px !important;
        gap: 3px !important;
    }

    .mobile-month-section .calendar-day-cell {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 3px !important;
    }
}

/* ============================================================
   2b. Mobile stacked view
   ============================================================ */

/* Navigation Row: Arrows + Date + View Toggle */
.calendar-mobile-nav-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.calendar-mobile-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-mobile-nav-btn {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-mobile-nav-btn:active {
    background: rgb(212 175 55 / 6%);
    color: var(--brand-primary);
    transform: scale(0.93);
}

.calendar-mobile-view-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 60px;
    text-align: center;
}

.calendar-mobile-view-toggle {
    display: flex;
    background: rgb(0 0 0 / 4%);
    border: 1px solid rgb(0 0 0 / 4%);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
    margin-left: auto;
}

[data-theme='dark'] .calendar-mobile-view-toggle {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 4%);
}

.calendar-mobile-view-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.calendar-mobile-view-btn:active {
    transform: scale(0.96);
}

.calendar-mobile-view-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow:
        0 1px 3px rgb(0 0 0 / 8%),
        0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-mobile-view-btn.active {
    background: rgb(255 255 255 / 12%);
}

.calendar-mobile-view-btn:not(.active):hover {
    color: var(--text-primary);
}

/* Toolbar Row: Search + Action Icons */
.calendar-mobile-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgb(0 0 0 / 4%);
    margin-bottom: 8px;
}

[data-theme='dark'] .calendar-mobile-toolbar {
    border-bottom-color: rgb(255 255 255 / 4%);
}

.calendar-mobile-search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 10px;
    padding: 8px 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='dark'] .calendar-mobile-search-wrapper {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-mobile-search-wrapper:focus-within {
    border-color: rgb(212 175 55 / 30%);
    box-shadow: 0 0 0 3px rgb(212 175 55 / 10%);
}

.calendar-mobile-search-wrapper svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.calendar-mobile-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    font-family: inherit;
    min-width: 0;
}

.calendar-mobile-search-input::placeholder {
    color: var(--text-tertiary);
}

.calendar-mobile-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-mobile-toolbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-mobile-toolbar-btn {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-mobile-toolbar-btn:active {
    background: rgb(212 175 55 / 6%);
    color: var(--brand-primary);
    transform: scale(0.93);
}

.calendar-mobile-today-link {
    padding: 6px 14px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-mobile-today-link {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-mobile-today-link:active {
    background: rgb(212 175 55 / 6%);
    color: var(--brand-primary);
    transform: scale(0.96);
}

.calendar-mobile-month-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-mobile-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-mobile-view-container {
    min-height: 300px;
}

.calendar-mobile-view-container .calendar-week-view,
.calendar-mobile-view-container .calendar-month-view,
.calendar-mobile-view-container .calendar-day-view {
    max-height: 400px;
    overflow-y: auto;
}

/* Hide redundant day view date header on mobile - date already shown in nav row */
.calendar-mobile-view-container .calendar-day-view > div > div:first-child {
    display: none;
}

/* ============================================================
   3. Week header chrome
   ============================================================ */

.calendar-week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid rgb(0 0 0 / 4%);

    /* Match the Email tab's (compact) list-header height so the gear +
       platform-icon row sits at the exact same vertical position across
       tabs. The email list header renders compact at 44px on desktop;
       this header was previously 52px, which pushed the provider icons
       ~4px lower than the email tab on the no-accounts lock screen. */
    height: 44px;
    min-height: 44px;
    max-height: 44px;

    /* Transparent so the shared grey canvas shows through (the bar sits above
       the body, nothing scrolls under it). backdrop-filter is retained only
       for the stacking context the dropdowns rely on - see below. */
    background: transparent;
    backdrop-filter: blur(16px);

    /* `backdrop-filter` already promotes this element to a stacking
       context; without an explicit z-index it sits at the equivalent
       of z-index 0, which trapped the timezone / settings dropdowns
       beneath the week grid's events (z-index 5-20) and the current-
       time indicator (z-index 20). Pinning the header above any of
       its siblings in the calendar-main column lets the dropdown's
       own z-index: 1000 actually take effect. */
    position: relative;
    z-index: 50;
}

[data-theme='dark'] .calendar-week-header {
    border-bottom-color: rgb(255 255 255 / 4%);
    background: transparent;
}

.calendar-week-header-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-week-header-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.calendar-week-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-week-nav-btn {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-week-nav-btn:hover {
    background: rgb(212 175 55 / 6%);
    border-color: rgb(212 175 55 / 20%);
    color: var(--brand-primary);
}

.calendar-week-nav-btn:active {
    transform: scale(0.92);
}

.calendar-week-today-btn {
    height: 24px;
    padding: 0 9px;
    border-radius: 7px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid var(--brand-primary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-week-today-btn {
    background: rgb(30 30 30 / 65%);
    border-color: var(--brand-primary);
}

.calendar-week-today-btn:hover {
    background: var(--brand-light, rgb(20 51 210 / 8%));
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.calendar-week-today-btn:active {
    transform: scale(0.93);
}

/* Leading "+" new-event button - primary action, sized to match the Email
   tab's icon-only compose button (.email-compose-icon-btn: 34px square, 9px
   radius) so the two tabs' primary actions read at the same scale. */
.calendar-week-add-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: var(--brand-gradient, var(--brand-primary));
    box-shadow: 0 1px 3px rgb(20 51 210 / 22%);
    transition:
        filter 0.15s ease,
        transform 0.06s ease;
    margin-right: 2px;
}

.calendar-week-add-btn:hover {
    filter: brightness(1.06);
}

.calendar-week-add-btn:active {
    transform: scale(0.93);
}

/* Day / Week / Month pill toggle - mirrors the Email tab's
   .email-detail-tabs pill, calendar-namespaced and scaled to the 44px bar. */
.calendar-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-hover, rgb(0 0 0 / 4%));
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 4px;
    flex-shrink: 0;
}

[data-theme='dark'] .calendar-view-toggle {
    background: rgb(255 255 255 / 6%);
}

.calendar-view-toggle-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.calendar-view-toggle-btn:hover:not(.active) {
    color: var(--text-primary);
}

.calendar-view-toggle-btn.active {
    background: var(--bg-primary, #fff);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

/* Dark mode: the toggle track is a faint light wash, so a dark active pill
   barely registered. Use a lighter, elevated chip with brighter text and a
   hairline so the active view clearly stands out. */
[data-theme='dark'] .calendar-view-toggle-btn.active {
    background: rgb(255 255 255 / 16%);
    color: #fff;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 35%),
        inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.calendar-week-header-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
}

.calendar-week-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-timezone-wrapper {
    position: relative;
}

.calendar-timezone-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 7px;
    font-size: 11px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-timezone-btn {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-timezone-btn:hover {
    background: rgb(212 175 55 / 6%);
    border-color: rgb(212 175 55 / 20%);
    color: var(--brand-primary);
}

.calendar-timezone-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;

    /* Opaque surface: the dropdown floats over the week grid, so a
       translucent fill let the events show through and made the list
       hard to read. Solid background keeps it legible. */
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgb(0 0 0 / 12%),
        0 0 0 0.5px rgb(0 0 0 / 4%);
    z-index: 1000;
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
}

[data-theme='dark'] .calendar-timezone-dropdown {
    background: var(--bg-primary);
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}

/* Booking-links dropdown — opened from the calendar icon in the week
   header, immediately left of the settings gear. Mirrors the timezone
   and settings dropdowns: anchored to its wrapper, opaque surface so it
   reads clearly over the week grid. The booking panel inside drops its
   own card chrome (it now lives in the dropdown's surface). */
.calendar-booking-wrapper {
    position: relative;
}

.calendar-booking-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgb(0 0 0 / 12%),
        0 0 0 0.5px rgb(0 0 0 / 4%);
    z-index: 1000;
    min-width: 320px;
    max-height: 480px;
    overflow-y: auto;
}

[data-theme='dark'] .calendar-booking-dropdown {
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}

.calendar-booking-dropdown .booking-panel {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.calendar-booking-dropdown::-webkit-scrollbar {
    width: 6px;
}

.calendar-booking-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.calendar-booking-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.calendar-booking-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.calendar-timezone-dropdown::-webkit-scrollbar {
    width: 6px;
}

.calendar-timezone-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.calendar-timezone-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.calendar-timezone-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.timezone-region-header {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-hover);
    position: sticky;
    top: 0;
}

.timezone-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 8px);
    padding: 7px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    border-radius: 8px;
    margin: 1px 4px;
}

.timezone-item:hover {
    background: rgb(0 0 0 / 4%);
}

[data-theme='dark'] .timezone-item:hover {
    background: rgb(255 255 255 / 6%);
}

.timezone-item.active {
    background: rgb(212 175 55 / 8%);
}

.timezone-item-label {
    font-size: 12px;
    color: var(--text-primary);
}

.timezone-item.active .timezone-item-label {
    color: var(--brand-primary);
    font-weight: 600;
}

.timezone-item-offset {
    font-size: 11px;
    color: var(--text-tertiary);
}

.calendar-create-btn {
    padding: 7px 14px;
    background: var(--brand-gradient);
    backdrop-filter: var(--glass-blur);
    color: white;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-family: inherit;
    box-shadow:
        0 1px 3px rgb(0 0 0 / 12%),
        0 6px 20px rgb(0 0 0 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
    position: relative;
    overflow: hidden;
}

.calendar-create-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgb(255 255 255 / 18%), transparent);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
}

.calendar-create-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 2px 6px rgb(0 0 0 / 15%),
        0 8px 24px rgb(0 0 0 / 12%),
        inset 0 1px 0 rgb(255 255 255 / 25%);
}

.calendar-create-btn:active {
    transform: translateY(0) scale(0.98);
}

[data-theme='dark'] .calendar-create-btn {
    box-shadow:
        0 1px 3px rgb(212 175 55 / 30%),
        0 6px 20px rgb(212 175 55 / 25%),
        inset 0 1px 0 rgb(255 255 255 / 15%);
}

[data-theme='dark'] .calendar-create-btn:hover {
    box-shadow:
        0 2px 6px rgb(212 175 55 / 35%),
        0 8px 24px rgb(212 175 55 / 30%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
}

/* Mirror the Email tab's .icon-btn chrome so the gear/refresh
   buttons sitting next to the platform icons look identical across
   tabs - transparent ground, 30x30 hit area, 18x18 glyph. */
.calendar-settings-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-settings-btn:hover {
    background: rgb(0 0 0 / 5%);
    color: var(--text-primary);
}

[data-theme='dark'] .calendar-settings-btn:hover {
    background: rgb(255 255 255 / 8%);
}

.calendar-settings-btn:active {
    background: rgb(0 0 0 / 8%);
    transform: scale(0.94);
}

[data-theme='dark'] .calendar-settings-btn:active {
    background: rgb(255 255 255 / 10%);
}

/* ============================================================
   Quick-create popover (Phase 3b)
   ============================================================ */

.kabiri-quick-create-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;

    /* Transparent - the popover is a quick affordance, not a modal sheet,
       so the underlying calendar should still be visible to give the user
       context for where they're creating. The backdrop only exists to
       capture stray clicks that should dismiss the popover. */
    background: transparent;
}

.kabiri-quick-create-popover {
    position: fixed;
    z-index: 1201;
    width: 280px;
    max-width: calc(100vw - 24px);

    /* Clamp to the visible viewport so the popover never bleeds off
       the bottom of the screen when the cursor is low. The internal
       layout scrolls (see overflow-y below); the actions row stays
       reachable via the sticky rule lower down. */
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Save / Cancel row pinned to the bottom of the scroll container so
   the user never has to scroll just to commit the new event. The
   surrounding popover provides the padded gutters; we paint our own
   matching background so content scrolling underneath doesn't show
   through the row. */
.kabiri-quick-create-popover .kabiri-quick-create-actions {
    position: sticky;
    bottom: -12px; /* cancel the popover's bottom padding */
    margin: 0 -12px -12px; /* extend across the popover's side gutters */
    padding: 10px 12px 12px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
}

.kabiri-quick-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kabiri-quick-create-when {
    font-size: 12px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kabiri-quick-create-close {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 6px;
}

.kabiri-quick-create-close:active {
    background: rgb(0 0 0 / 6%);
}

/* Entry-type chips (Event / Task / Out of office / Focus). Mirror the
   Today button's blue-accent active state for a consistent calendar look.
   All four chips share one row: nowrap keeps them on a single line and the
   equal-width basis lets the only long label ("Out of office") wrap inside
   its own chip rather than spilling onto a second row. */
.kabiri-quick-create-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}

.kabiri-quick-create-cat {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 5px 6px;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.25;
    transition: all 0.15s ease;
}

.kabiri-quick-create-cat:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.kabiri-quick-create-cat.active {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: var(--brand-light, rgb(20 51 210 / 8%));
}

.kabiri-quick-create-title {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}

.kabiri-quick-create-title:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgb(212 175 55 / 12%);
}

.kabiri-quick-create-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kabiri-quick-create-more {
    background: transparent;
    border: none;
    color: var(--brand-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 0;
}

.kabiri-quick-create-save {
    padding: 8px 16px;
    background: var(--brand-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.kabiri-quick-create-save:active {
    transform: scale(0.97);
}

/* Time row - start / end pickers sit side-by-side under the title.
   The dash takes whatever font colour the popover does so it tracks
   light / dark themes without an extra rule. */
.kabiri-quick-create-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.kabiri-quick-create-time {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;

    /* Native time pickers ignore most font/styling but the chrome
       around them benefits from the same border-radius treatment. */
}

.kabiri-quick-create-time:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgb(212 175 55 / 12%);
}

.kabiri-quick-create-time-dash {
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Guests row - chip strip + add input share a single line that wraps
   when the chip count gets long. Each chip is initials-only; the full
   name + email surfaces via the chip's `title` attribute on hover, so
   the row stays compact even with several attendees. */
.kabiri-quick-create-guests-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.kabiri-quick-create-guests {
    display: contents;
}

.kabiri-quick-create-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 13px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;

    /* Subtle press feedback so the click-to-remove gesture reads. */
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

.kabiri-quick-create-chip:hover {
    box-shadow: 0 0 0 2px rgb(0 0 0 / 8%);
}

.kabiri-quick-create-chip:active {
    transform: scale(0.94);
}

.kabiri-quick-create-guest-input {
    flex: 1;
    min-width: 100px;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;
}

.kabiri-quick-create-guest-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgb(212 175 55 / 12%);
}

/* Selection highlight on the week / day grid. Sits inside the grid
   container at z-index 4 - above the empty hour cells (no explicit
   z-index) but below rendered events (z-index 5+) so a busy slot
   doesn't get obscured by the band. pointer-events:none keeps the
   underlying click handlers reachable - the highlight is purely
   visual. */
.kabiri-quick-create-highlight {
    position: absolute;
    z-index: 4;
    background: rgb(66 133 244 / 18%);
    border: 1.5px solid rgb(66 133 244 / 85%);
    border-radius: 6px;
    pointer-events: none;

    /* Smooth height/top updates while the user drags the time pickers
       so the band glides between values instead of jumping. */
    transition:
        top 0.12s ease,
        height 0.12s ease,
        left 0.12s ease,
        width 0.12s ease;
}

[data-theme='dark'] .kabiri-quick-create-highlight {
    background: rgb(138 180 248 / 22%);
    border-color: rgb(138 180 248 / 90%);
}

/* On narrow viewports, present as a bottom sheet rather than a floating
   bubble - fingers don't reach popovers stranded mid-grid. Extended from
   <=480 to <=640 so landscape phones and small phablets also drop the
   bubble. The inset + safe-area calc keeps the sheet visible above the
   home-bar on iOS. */
@media (width <= 640px) {
    .kabiri-quick-create-popover {
        position: fixed !important;
        inset: auto 12px max(12px, env(safe-area-inset-bottom, 0px) + 12px) !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 16px;

        /* Lift onto the GPU so the slide-in feels native; the
           translateY default is 0 because the sheet is already
           positioned at the bottom of the screen. */
        animation: kabiriQuickCreateSheetIn 220ms cubic-bezier(0.32, 0.72, 0.32, 1);
    }

    @keyframes kabiriQuickCreateSheetIn {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .kabiri-quick-create-backdrop {
        /* Dim the calendar a bit so the sheet reads as the active
           surface - the desktop popover stays transparent because
           the bubble has the user's full attention already. */
        background: rgb(0 0 0 / 35%);
    }
}

/* ============================================================
   Mobile drawer (Phase 3a)
   ============================================================ */

/* Backdrop sits below the drawer, above all calendar surfaces. Hidden by
   default; .open fades it in. Tap-to-dismiss is on the element itself. */
.kabiri-mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    display: none;
}

.kabiri-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 90vw);
    max-width: 100vw;
    z-index: 1101;
    background: var(--bg-primary);
    box-shadow: -8px 0 32px rgb(0 0 0 / 18%);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    outline: none;
}

.kabiri-mobile-drawer.open {
    transform: translateX(0);
}

.kabiri-mobile-drawer-backdrop.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* The drawer is a mobile-only surface. Hide on desktop so a stray .open
   from cross-tab navigation never leaks across breakpoints. */
@media (width > 768px) {
    .kabiri-mobile-drawer,
    .kabiri-mobile-drawer-backdrop {
        display: none !important;
    }
}

.kabiri-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.kabiri-mobile-drawer-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.kabiri-mobile-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.kabiri-mobile-drawer-close:active {
    background: rgb(0 0 0 / 6%);
}

.kabiri-mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 24px;
    -webkit-overflow-scrolling: touch;
}

.kabiri-mobile-drawer-section {
    margin-bottom: 20px;
}

.kabiri-mobile-drawer-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.kabiri-mobile-drawer-segmented {
    display: flex;
    gap: 6px;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 4px;
}

.kabiri-mobile-drawer-segmented-btn {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.18s;
    font-family: inherit;
}

.kabiri-mobile-drawer-segmented-btn.active {
    background: var(--brand-gradient);
    color: white;
}

.kabiri-mobile-drawer-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.kabiri-mobile-drawer-option-label {
    font-size: 14px;
    color: var(--text-primary);
}

.kabiri-mobile-drawer-tz-list {
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    -webkit-overflow-scrolling: touch;
}

.kabiri-mobile-drawer-tz-region {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-hover);
}

.kabiri-mobile-drawer-tz-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text-primary);
    font-size: 13px;
    border-bottom: 1px solid var(--border-light);
}

.kabiri-mobile-drawer-tz-item:last-child {
    border-bottom: none;
}

.kabiri-mobile-drawer-tz-item.active {
    background: rgb(212 175 55 / 8%);
    color: var(--brand-primary);
    font-weight: 600;
}

.kabiri-mobile-drawer-tz-offset {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-left: 12px;
}

/* Touch feedback for cells / event chips that suppress the OS tap-highlight.
   Several views set `-webkit-tap-highlight-color: transparent` (calendar
   month / day / week event chips, reauth banner buttons) to avoid the dark
   blue flash on iOS / Android. Without a replacement the user gets zero
   feedback when tapping. These :active rules add a subtle press state on
   pointer-coarse devices only - desktop hover styles continue to handle
   the mouse case. */
@media (pointer: coarse) {
    .calendar-day-cell:active {
        background: rgb(0 0 0 / 4%);
    }

    [data-theme='dark'] .calendar-day-cell:active {
        background: rgb(255 255 255 / 6%);
    }

    .calendar-week-cell:active {
        background: rgb(212 175 55 / 6%);
    }

    .calendar-week-event-positioned:active,
    .calendar-day-cell-event:active,
    .calendar-event-badge:active {
        opacity: 0.78;
        transform: scale(0.985);
    }
}

/* Hide the chat-bridge "pending event" banner whenever a calendar modal is
   visible. Without this the banner sits behind the modal backdrop and
   re-appears each time the modal closes - the banner is only meant to
   surface when the user is *between* flows, not while they're already
   editing. Uses :has() (Chrome 105+, FF 121+, Safari 15.4+); the codebase
   already relies on similarly-modern CSS in the calendar styles. */
body:has(#create-event-modal),
body:has(#event-detail-modal),
body:has(.event-modal-backdrop),
body:has(.edm-backdrop) {
    .kabiri-pending-event-banner {
        display: none !important;
    }
}

/* Refresh button shares .calendar-settings-btn chrome but adds a spinning
   icon affordance during the in-flight network round-trip. */
.calendar-refresh-btn.spinning svg {
    animation: calendar-refresh-spin 0.8s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes calendar-refresh-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.calendar-settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;

    /* Opaque surface so the settings float legibly over the week grid
       (matches the timezone and booking-links dropdowns). */
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgb(0 0 0 / 12%),
        0 0 0 0.5px rgb(0 0 0 / 4%);
    z-index: 1000;
    min-width: 280px;
    padding: 12px;
}

[data-theme='dark'] .calendar-settings-dropdown {
    background: var(--bg-primary);
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}

.calendar-settings-section {
    margin-bottom: 16px;
}

.calendar-settings-section:last-child {
    margin-bottom: 0;
}

.calendar-settings-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.calendar-settings-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.calendar-settings-option-label {
    font-size: 13px;
    color: var(--text-primary);
}

.calendar-settings-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgb(0 0 0 / 9%);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

[data-theme='dark'] .calendar-settings-toggle {
    background: rgb(255 255 255 / 10%);
}

.calendar-settings-toggle.active {
    background: #34c759;
}

.calendar-settings-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 1px 3px rgb(0 0 0 / 15%),
        0 1px 1px rgb(0 0 0 / 6%);
}

.calendar-settings-toggle.active::after {
    transform: translateX(20px);
}

.calendar-settings-time-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.calendar-settings-time-label {
    font-size: 13px;
    color: var(--text-primary);
    min-width: 60px;
}

.calendar-settings-time-select {
    flex: 1;
    padding: 6px 10px;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='dark'] .calendar-settings-time-select {
    background: rgb(30 30 30 / 65%);
    border-color: rgb(255 255 255 / 8%);
}

.calendar-settings-time-select:focus {
    outline: none;
    border-color: rgb(212 175 55 / 50%);
    box-shadow: 0 0 0 3px rgb(212 175 55 / 10%);
}

.calendar-settings-wrapper {
    position: relative;
}

/* Event Type Filter Toggle - Apple Segmented Control */
.calendar-event-type-filter {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgb(0 0 0 / 4%);
    border: 1px solid rgb(0 0 0 / 4%);
    border-radius: 9px;
    padding: 2px;
}

[data-theme='dark'] .calendar-event-type-filter {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 4%);
}

.calendar-event-type-btn {
    padding: 5px 11px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-event-type-btn:hover {
    color: var(--text-primary);
}

.calendar-event-type-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow:
        0 1px 3px rgb(0 0 0 / 8%),
        0 1px 2px rgb(0 0 0 / 4%);
}

[data-theme='dark'] .calendar-event-type-btn.active {
    background: rgb(255 255 255 / 12%);
}

.calendar-event-type-btn.work-active {
    background: rgb(212 175 55 / 12%);
    color: #1433d2;
    font-weight: 600;
    box-shadow: 0 1px 3px rgb(212 175 55 / 10%);
}

.calendar-event-type-btn.personal-active {
    background: rgb(16 185 129 / 12%);
    color: #10b981;
    font-weight: 600;
    box-shadow: 0 1px 3px rgb(16 185 129 / 10%);
}

.event-type-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.event-type-indicator.work {
    background: #1433d2;
}

.event-type-indicator.personal {
    background: #10b981;
}

@media (width <= 768px) {
    .calendar-week-header {
        padding: 6px 8px;
        flex-wrap: wrap;
        gap: 6px;

        /* Mobile lets the action row wrap onto a second line, so
           relax the desktop's fixed 52px header height. */
        height: auto;
        min-height: 52px;
        max-height: none;
    }

    .calendar-week-header-title {
        font-size: 13px;
    }

    .calendar-week-header-subtitle {
        font-size: 10px;
    }

    .calendar-timezone-btn span:last-of-type {
        display: none;
    }

    .calendar-timezone-dropdown {
        min-width: 280px;
        right: -50px;
    }
}

@media (width <= 480px) {
    .calendar-week-header-title {
        font-size: 12px;
    }

    .calendar-timezone-dropdown {
        min-width: 260px;
        right: -80px;
    }
}