/* =============================================
   iOS Calendar Clone — Design System
   ============================================= */

:root {
    /* Accent Colors — Dark Gold Theme */
    --apple-blue: #007AFF;
    --apple-red: #D4A843;
    --apple-orange: #FF9500;
    --apple-green: #34C759;
    --apple-purple: #AF52DE;

    /* Text Colors */
    --label: #FFFFFF;
    --secondary-label: rgba(235, 235, 245, 0.6);
    --tertiary-label: rgba(235, 235, 245, 0.3);
    --quaternary-label: rgba(235, 235, 245, 0.18);

    /* Backgrounds */
    --system-background: #000000;
    --secondary-background: #1C1C1E;
    --tertiary-background: #2C2C2E;
    --grouped-background: #1C1C1E;

    /* Separators */
    --separator: rgba(84, 84, 88, 0.6);
    --opaque-separator: #38383A;

    /* Glass / Blur */
    --glass-bg: rgba(30, 30, 30, 0.78);
    --glass-bg-thick: rgba(30, 30, 30, 0.94);

    /* Safe Areas */
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);

    /* Spring Easing */
    --spring: cubic-bezier(0.25, 1.25, 0.5, 1);
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography Sizes (iOS type scale) */
    --font-large-title: 34px;
    --font-title1: 28px;
    --font-title2: 22px;
    --font-title3: 20px;
    --font-headline: 17px;
    --font-body: 17px;
    --font-callout: 16px;
    --font-subhead: 15px;
    --font-footnote: 13px;
    --font-caption1: 12px;
    --font-caption2: 11px;
}

/* =============================================
   Base Reset & Typography
   ============================================= */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--label);
    background: var(--system-background);
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* =============================================
   Header — Frosted Glass
   ============================================= */

#header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 0.5px solid var(--separator);
    padding-top: var(--sat);
}

.header-content {
    padding-top: 8px;
    padding-bottom: 4px;
    /* --sal/--sar were declared but never consumed anywhere in the stylesheet —
       with viewport-fit=cover, landscape on a notched iPhone reserved nothing
       for the ~47px hardware inset, so "Today" and the month title clipped
       under the notch/Dynamic Island on the app's most common arrival path
       (a shared link opened in Safari). max() keeps the normal 16px in
       portrait, where the inset is 0. */
    padding-left: max(16px, var(--sal));
    padding-right: max(16px, var(--sar));
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
}

.header-btn {
    background: none;
    border: none;
    color: var(--brand-ink);
    font-size: var(--font-headline);
    font-weight: 400;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
}

.header-btn:active {
    opacity: 0.5;
}

#admin-add-btn {
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.header-spacer {
    flex: 1;
}

.header-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 8px;
}

#month-title {
    font-size: var(--font-title1);
    font-weight: 700;
    letter-spacing: 0.36px;
    flex: 1;
}

.nav-chevron {
    background: none;
    border: none;
    color: var(--brand-ink);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.nav-chevron:active {
    background: var(--quaternary-label);
}

.nav-chevron svg {
    width: 10px;
    height: 17px;
}

/* =============================================
   Weekday Bar
   ============================================= */

#weekday-bar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 0.5px solid var(--separator);
    position: sticky;
    top: 0;
    z-index: 99;
    padding: 0 2px;
}

#weekday-bar span {
    text-align: center;
    font-size: var(--font-caption2);
    font-weight: 600;
    color: var(--secondary-label);
    padding: 6px 0;
    text-transform: uppercase;
}

/* Sunday & Saturday in lighter color */
#weekday-bar span:first-child,
#weekday-bar span:last-child {
    color: var(--tertiary-label);
}

/* =============================================
   Month Grid
   ============================================= */

#month-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(54px, 1fr);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: max(2px, var(--sal));
    padding-right: max(2px, var(--sar));
    background: var(--system-background);
    align-content: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-bottom: 0.5px solid var(--separator);
}

/* Aeon background image with blur */
.day-bg {
    position: absolute !important;
    inset: 0;
    background-size: cover;
    background-position: center center;
    filter: blur(1.2px);
    opacity: 0.55;
    z-index: 0;
}

/* All day-cell children sit above the background */
.day-cell > :not(.day-bg) {
    position: relative;
    z-index: 1;
}

.day-cell:active {
    background: var(--quaternary-label);
    transform: scale(0.95);
}

.day-cell {
    transition: background 0.15s ease, transform 0.15s var(--spring);
}

.day-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-callout);
    font-weight: 400;
    border-radius: 50%;
    line-height: 1;
    position: relative;
    color: #FFFFFF;
}

/* Other month days (padding) */
.day-cell.other-month .day-number {
    color: rgba(255, 255, 255, 0.35);
}

/* Weekend days */
.day-cell.weekend .day-number {
    color: #FFFFFF;
}

.day-cell.other-month.weekend .day-number {
    color: rgba(255, 255, 255, 0.35);
}

/* Today */
.day-cell.is-today .day-number {
    background: var(--apple-red);
    color: #FFFFFF;
    font-weight: 600;
}

/* Selected day */
.day-cell.is-selected .day-number {
    background: var(--tertiary-label);
    color: #FFFFFF;
    font-weight: 600;
}

.day-cell.is-today.is-selected .day-number {
    background: var(--apple-red);
    color: #FFFFFF;
}

/* Event Dots */
.event-dots {
    display: flex;
    gap: 3px;
    margin-top: 3px;
    justify-content: center;
    height: 6px;
}

.event-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/* Today's cell time progress indicator */
.today-time-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        #B8860B 0%,
        #FFD700 45%,
        #FFF8B0 70%,
        rgba(255, 215, 0, 0) 100%
    );
    border-radius: 1px;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

/* =============================================
   Day View
   ============================================= */

#day-view-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    transform: scale(1.04);
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}

#day-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary-background);
    z-index: 200;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
}

#day-view.visible {
    opacity: 1;
    pointer-events: auto;
}

#day-view.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Zoom transition overlay — expands from tapped cell */
.zoom-overlay {
    position: fixed;
    z-index: 199;
    background: var(--system-background);
    border-radius: 50%;
    pointer-events: none;
}

#day-header {
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 0.5px solid var(--separator);
    padding-bottom: 10px;
    padding-top: calc(var(--sat) + 10px);
    padding-left: max(16px, var(--sal));
    padding-right: max(16px, var(--sar));
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#back-to-month {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-headline);
}

#back-to-month svg {
    width: 10px;
    height: 17px;
}

#day-title {
    font-size: var(--font-title1);
    font-weight: 700;
}

/* All-day / event list at top of day view */
#day-events-list {
    padding: 0;
    border-bottom: 0.5px solid var(--separator);
    background: transparent;
    position: relative;
    z-index: 2;
}

.day-event-item {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0;
    border-bottom: 0.5px solid var(--separator);
    cursor: pointer;
    transition: background 0.15s ease;
    background: var(--secondary-background);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.day-event-item:last-child {
    border-bottom: none;
}

.day-event-item:active {
    background: var(--quaternary-label);
}

.event-color-bar {
    width: 4px;
    height: 40px;
    border-radius: 2px;
    flex-shrink: 0;
}

.event-info {
    flex: 1;
    min-width: 0;
}

/* ICS Bell Download Button */
.ics-bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(184, 134, 11, 0.1) 100%);
    color: #DAA520;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s var(--spring), background 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ics-bell-btn:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.28) 0%, rgba(184, 134, 11, 0.18) 100%);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
    transform: scale(1.1);
}

.ics-bell-btn:active {
    transform: scale(0.92);
}

.ics-bell-btn.ics-bell-ring {
    animation: bellRing 0.7s ease-out;
}

.ics-bell-btn.ics-bell-ring svg {
    color: #FFD700;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
}

@keyframes bellRing {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(18deg); }
    25%  { transform: rotate(-16deg); }
    40%  { transform: rotate(12deg); }
    55%  { transform: rotate(-8deg); }
    70%  { transform: rotate(4deg); }
    85%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

.event-title {
    font-size: var(--font-body);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-time {
    font-size: var(--font-footnote);
    color: var(--secondary-label);
    margin-top: 2px;
}

.event-location {
    font-size: var(--font-footnote);
    color: var(--secondary-label);
}

/* Timeline */
#day-timeline {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Without this, the last ~hour of the day is unreachable behind the home
       indicator on a notched phone — and in the installed PWA, behind the tab
       bar too (that additional clearance is added in premium.css, since the
       tab bar only exists in standalone mode). SPX's events run late evening,
       so this is exactly the band real events land in. */
    padding-bottom: var(--sab);
}

/* iOS-style scrollbar — thin, rounded, translucent */
#day-timeline::-webkit-scrollbar {
    width: 6px;
}

#day-timeline::-webkit-scrollbar-track {
    background: transparent;
}

#day-timeline::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    min-height: 40px;
    transition: background 0.3s ease;
}

#day-timeline::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

#day-timeline::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.45);
}

/* Firefox scrollbar */
#day-timeline {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Also style list content scrollbar */
#list-content::-webkit-scrollbar {
    width: 6px;
}

#list-content::-webkit-scrollbar-track {
    background: transparent;
}

#list-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    min-height: 40px;
}

#list-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

#list-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.timeline-grid {
    position: relative;
    height: 1440px; /* 24 * 60px */
}

.hour-row {
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    border-bottom: 0.5px solid var(--separator);
    display: flex;
    align-items: flex-start;
}

.hour-label {
    width: 58px;
    font-size: var(--font-caption1);
    color: var(--secondary-label);
    text-align: right;
    padding-right: 12px;
    transform: translateY(-7px);
    flex-shrink: 0;
}

.hour-line {
    flex: 1;
    height: 0;
    border-top: 0.5px solid var(--separator);
}

/* Current time indicator — premium golden */
.current-time-line {
    position: absolute;
    left: 50px;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #FFD700 0%, #DAA520 60%, rgba(218, 165, 32, 0.15) 100%);
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5), 0 0 3px rgba(255, 215, 0, 0.8);
}

.current-time-line::before {
    content: '';
    position: absolute;
    left: -6px;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8B0 0%, #FFD700 40%, #B8860B 100%);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 0 0 3px rgba(255, 215, 0, 0.9);
}

/* Timeline event blocks */
.timeline-event {
    position: absolute;
    left: 62px;
    right: 8px;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: var(--font-caption1);
    font-weight: 500;
    color: #FFFFFF;
    overflow: hidden;
    min-height: 22px;
    cursor: pointer;
}
/* White text over the raw event colour measures as low as 2.2:1 (orange,
   green) — no swatch in the 6-colour palette clears the 4.5:1 AA floor on its
   own. A 36% black overlay behind the text lifts the WORST swatch to 4.5:1+
   without flattening the chip into a uniform dark box — the colour still
   reads clearly, just slightly deepened. ::before keeps it out of layout and
   off click handling (position:absolute + pointer-events:none). */
.timeline-event::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.36);
    pointer-events: none;
}
.timeline-event-title,
.timeline-event-time {
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.timeline-event-title {
    font-weight: 600;
    font-size: var(--font-caption1);
}

.timeline-event-time {
    font-size: 10px;
    opacity: 0.85;
    margin-top: 1px;
}

/* No events message */
.no-events {
    text-align: center;
    padding: 24px;
    color: var(--secondary-label);
    font-size: var(--font-subhead);
}

/* =============================================
   List View
   ============================================= */

#list-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--grouped-background);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out);
}

#list-view.visible {
    transform: translateX(0);
}

#list-view.hidden {
    transform: translateX(100%);
}

#list-header {
    background: var(--glass-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 0.5px solid var(--separator);
    padding-bottom: 10px;
    padding-top: calc(var(--sat) + 10px);
    padding-left: max(16px, var(--sal));
    padding-right: max(16px, var(--sar));
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

#back-to-calendar {
    flex-shrink: 0;
}

#list-title {
    font-size: var(--font-title1);
    font-weight: 700;
    flex: 1;
}

#list-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--sab) + 16px);
}

.list-section {
    margin-top: 12px;
}

.list-section-header {
    font-size: 10px;
    font-weight: 600;
    padding: 0 16px 4px;
    color: var(--label);
}

.list-section-subheader {
    font-size: 8px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 16px 2px;
    color: var(--secondary-label);
}

.list-section-title {
    font-size: var(--font-caption1);
    font-weight: 700;
    padding: 4px 20px 6px;
    color: var(--secondary-label);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.list-date-label {
    font-size: var(--font-footnote);
    font-weight: 600;
    padding: 10px 16px 6px;
    color: var(--secondary-label);
    letter-spacing: 0.2px;
}

.list-event-time {
    font-size: 9px;
    color: var(--secondary-label);
}

.list-event-location {
    font-size: 8px;
    /* tertiary-label (0.30 alpha) measures ~2.45:1 as real informational text
       (an event's location) — under AA. secondary-label (0.60) clears ~6:1.
       The 0.30 tier should stay reserved for non-text decoration. */
    color: var(--secondary-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.list-event-group {
    background: var(--secondary-background);
    border-radius: 14px;
    margin: 0 16px 6px;
    overflow: hidden;
}

.list-event-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 14px;
    border-bottom: 0.5px solid var(--separator);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s var(--spring);
}

.list-event-item:last-child {
    border-bottom: none;
}

.list-event-item:active {
    background: rgba(255, 255, 255, 0.04);
    transform: scale(0.985);
}

/* Color accent bar */
.list-event-accent {
    width: 4px;
    height: 38px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Event body — title + meta stacked */
.list-event-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.list-event-title {
    font-size: var(--font-subhead);
    font-weight: 600;
    color: var(--label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.1px;
}

.list-event-meta {
    font-size: var(--font-caption1);
    color: var(--secondary-label);
    letter-spacing: 0.2px;
}

.list-event-item .ics-bell-btn {
    align-self: center;
    flex-shrink: 0;
}

.list-event-subtitle {
    font-size: 8px;
    color: var(--secondary-label);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-event-chevron {
    color: var(--tertiary-label);
    flex-shrink: 0;
    font-size: 9px;
}

.list-empty {
    text-align: center;
    padding: 40px 32px;
    color: var(--secondary-label);
    font-size: 10px;
}

/* =============================================
   Event Detail Sheet
   ============================================= */

.detail-field-group {
    background: var(--system-background);
    border-radius: 12px;
    margin: 0 16px 12px;
    overflow: hidden;
}

.detail-field {
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--separator);
}

.detail-field:last-child {
    border-bottom: none;
}

.detail-field-label {
    font-size: var(--font-caption1);
    color: var(--secondary-label);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.detail-field-value {
    font-size: var(--font-body);
    color: var(--label);
    word-wrap: break-word;
}

.detail-field-value a {
    color: var(--apple-blue);
    text-decoration: none;
}

.detail-field-value a:active {
    opacity: 0.6;
}

.detail-description {
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-title {
    font-size: var(--font-title2);
    font-weight: 700;
    padding: 4px 16px 12px;
}

.detail-color-indicator {
    width: 100%;
    height: 6px;
    border-radius: 3px 3px 0 0;
    margin-bottom: 4px;
}

.detail-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.detail-color-label {
    font-size: var(--font-footnote);
    color: var(--secondary-label);
}

.add-to-calendar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 32px);
    margin: 16px auto 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #D4A843 0%, #C49A38 100%);
    color: #000;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: var(--font-headline);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s var(--spring), opacity 0.15s ease;
}

.add-to-calendar-btn:active {
    transform: scale(0.96);
    opacity: 0.85;
}

.add-to-calendar-btn svg {
    flex-shrink: 0;
}

#list-view-btn {
    padding: 4px 6px;
}

#list-view-btn svg {
    display: block;
}

/* =============================================
   Footer — Frosted Glass
   ============================================= */

#footer {
    background: var(--glass-bg-thick);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 0.5px solid var(--separator);
    padding-bottom: var(--sab);
}

.footer-content {
    display: flex;
    justify-content: center;
    padding: 8px 16px 4px;
}

.footer-label {
    font-size: var(--font-caption2);
    color: var(--secondary-label);
    font-weight: 500;
}

.footer-label.active {
    color: var(--brand-ink);
}

/* =============================================
   Admin Elements
   ============================================= */

.admin-only {
    display: none !important;
}

.admin-active .admin-only {
    display: flex !important;
}

/* Admin badge in event items */
.admin-delete-btn {
    background: none;
    border: none;
    color: var(--brand-ink);
    font-size: var(--font-body);
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
}

.admin-delete-btn:active {
    background: var(--quaternary-label);
}

/* =============================================
   Event Modal (Slide-up Sheet)
   ============================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 300;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

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

.modal-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--grouped-background);
    border-radius: 12px 12px 0 0;
    z-index: 301;
    transform: translateY(100%);
    transition: transform 0.4s var(--spring);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sab);
}

.modal-sheet.visible {
    transform: translateY(0);
}

.modal-handle {
    width: 36px;
    height: 5px;
    background: var(--opaque-separator);
    border-radius: 3px;
    margin: 8px auto;
}

.modal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 12px;
}

.modal-nav-btn {
    background: none;
    border: none;
    color: var(--brand-ink);
    font-size: var(--font-headline);
    cursor: pointer;
    font-family: inherit;
    padding: 4px;
}

.modal-nav-btn.save {
    font-weight: 600;
}

.modal-nav-title {
    font-size: var(--font-headline);
    font-weight: 600;
}

/* Form fields styled like iOS Settings */
.form-group {
    background: var(--tertiary-background);
    border-radius: 10px;
    margin: 0 16px 12px;
    overflow: hidden;
}

.form-field {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--separator);
}

.form-field:last-child {
    border-bottom: none;
}

.form-field label {
    font-size: var(--font-body);
    min-width: 80px;
    flex-shrink: 0;
}

.form-field input,
.form-field select {
    flex: 1;
    border: none;
    background: none;
    font-size: var(--font-body);
    font-family: inherit;
    color: var(--label);
    text-align: right;
    outline: none;
}

.form-field textarea {
    flex: 1;
    border: none;
    background: none;
    font-size: var(--font-body);
    font-family: inherit;
    color: var(--label);
    text-align: right;
    outline: none;
    resize: none;
    line-height: 1.4;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--tertiary-label);
}

.form-field input[type="datetime-local"] {
    color: var(--apple-blue);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
    cursor: pointer;
}

/* The real checkbox lies invisibly OVER the drawn switch, so a tap/click on
   the switch lands on the checkbox itself. (It used to be 0x0 inside a plain
   <div>, so tapping the switch did nothing — only the "All Day" text worked.)
   The wrapper is also a <label>, so either path toggles it. */
.toggle-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.toggle-switch input:focus-visible + .toggle-slider {
    outline: 3px solid var(--apple-blue);
    outline-offset: 2px;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #E9E9EA;
    border-radius: 31px;
    transition: background 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--apple-green);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Color picker dots */
.color-picker {
    display: flex;
    gap: 12px;
    padding: 4px 0;
}

.color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
}

.color-option.selected::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
}

/* =============================================
   Modal Handle Area (drag-to-dismiss)
   ============================================= */

.modal-handle-area {
    padding: 8px 0 0;
    cursor: grab;
    touch-action: none;
}

.modal-handle-area:active {
    cursor: grabbing;
}

.modal-delete-wrap {
    padding: 0 16px 16px;
}

.modal-delete-btn {
    color: var(--brand-ink);
    font-size: var(--font-body);
    width: 100%;
    text-align: center;
    padding: 12px;
    background: var(--tertiary-background);
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.modal-delete-btn:active {
    background: var(--quaternary-label);
}

/* =============================================
   Form Validation
   ============================================= */

.form-field.field-error {
    animation: shakeField 0.4s ease;
}

.form-field.field-error input {
    color: var(--brand-ink);
}

@keyframes shakeField {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* =============================================
   iOS Action Sheet (Delete Confirmation)
   ============================================= */

.action-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 400;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.action-sheet-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.action-sheet {
    position: fixed;
    bottom: 0;
    left: 8px;
    right: 8px;
    z-index: 401;
    transform: translateY(100%);
    transition: transform 0.35s var(--spring);
    padding-bottom: calc(var(--sab) + 8px);
}

.action-sheet.visible {
    transform: translateY(0);
}

.action-sheet-group {
    background: var(--glass-bg-thick);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 8px;
}

.action-sheet-title {
    padding: 14px 16px;
    text-align: center;
    font-size: var(--font-footnote);
    color: var(--secondary-label);
    border-bottom: 0.5px solid var(--separator);
}

.action-sheet-title:has(+ .action-sheet-subtitle) {
    border-bottom: none;
    padding-bottom: 2px;
}

.action-sheet-subtitle {
    padding: 0 16px 12px;
    text-align: center;
    font-size: var(--font-caption1, 12px);
    color: var(--tertiary-label);
    border-bottom: 0.5px solid var(--separator);
}

.action-sheet-btn {
    display: block;
    width: 100%;
    padding: 18px 16px;
    border: none;
    background: none;
    font-size: var(--font-title3);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s ease;
}

.action-sheet-btn:active {
    background: var(--quaternary-label);
}

.action-sheet-btn.destructive {
    color: var(--brand-ink);
    font-weight: 400;
}

.action-sheet-btn.cancel-action {
    color: var(--apple-blue);
    font-weight: 600;
}

/* Non-destructive actions (e.g. the "apply edit to…" scope sheet). */
.action-sheet-btn.constructive {
    color: var(--apple-blue);
    font-weight: 400;
}

.action-sheet-btn.constructive.primary {
    font-weight: 600;
}

/* =============================================
   Swipe-to-Delete
   ============================================= */

.day-event-item {
    position: relative;
    overflow: hidden;
}

.swipe-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    position: relative;
    z-index: 1;
    will-change: transform;
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
}

.swipe-delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: var(--apple-red);
    color: white;
    border: none;
    font-size: var(--font-subhead);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    z-index: 0;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================
   Utility Classes
   ============================================= */

.hidden:not(#day-view):not(#list-view) {
    display: none !important;
}

/* =============================================
   Continuous Corners (Squircles)
   WebKit renders smoother corners natively;
   generous border-radius approximates squircle shape
   ============================================= */

/* Modal sheet */
.modal-sheet {
    border-radius: 14px 14px 0 0;
}

/* Form groups */
.form-group {
    border-radius: 12px;
}

/* Timeline event blocks */
.timeline-event {
    border-radius: 8px;
}

/* Action sheet groups */
.action-sheet-group {
    border-radius: 14px;
}

/* Color picker dots */
.color-option {
    border-radius: 50%;
    transition: transform 0.2s var(--spring), box-shadow 0.2s ease;
}

.color-option:active {
    transform: scale(0.85);
}

.color-option.selected {
    box-shadow: 0 0 0 2px var(--system-background), 0 0 0 4px currentColor;
}

/* =============================================
   Press-State Scale Transforms (Tactile Feel)
   ============================================= */

/* Buttons */
.header-btn:active,
.nav-chevron:active,
#today-btn:active {
    transform: scale(0.92);
}

.header-btn,
.nav-chevron,
#today-btn {
    transition: transform 0.15s var(--spring), opacity 0.15s ease;
}

/* Event items */
.day-event-item:active .swipe-content,
.day-event-item:active {
    transform: scale(0.98);
}

.swipe-content {
    transition: transform 0.2s var(--spring);
}

/* Timeline events */
.timeline-event {
    transition: transform 0.15s var(--spring);
}

.timeline-event:active {
    transform: scale(0.97);
}

/* Footer */
.footer-label {
    transition: transform 0.15s var(--spring);
}

.footer-label:active {
    transform: scale(0.9);
}

/* =============================================
   Visual Refinements
   ============================================= */

/* Subtle shadow on today indicator */
.day-cell.is-today .day-number {
    box-shadow: 0 2px 8px rgba(212, 168, 67, 0.45);
}

/* Event dots on today keep their original colors */

/* Better timeline event shadows */
.timeline-event {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* (current-time-line glow merged into main rule above) */

/* Day view header — refined typography */
#day-title {
    letter-spacing: 0.35px;
}

/* Smooth opacity for month title crossfade */
#month-title {
}

/* Swipe-back indicator for day view (left edge) */
#day-view::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 10;
    background: linear-gradient(90deg, rgba(0,0,0,0.02), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#day-view.visible::before {
    opacity: 1;
}

/* =============================================
   Animations
   ============================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Month grid slide transitions */
#month-grid {
    position: relative;
}

/* Month grid transitions handled entirely via Web Animations API in app.js */

/* Day view content entrance */
#day-view.visible #day-header {
    animation: slideDown 0.35s var(--spring) forwards;
}

#day-view.visible #day-events-list {
    animation: fadeSlideUp 0.4s var(--spring) 0.05s both;
}

#day-view.visible #day-timeline {
    animation: fadeSlideUp 0.45s var(--spring) 0.1s both;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Day event items stagger */
.day-event-item {
    animation: fadeSlideUp 0.3s var(--spring) both;
}

.day-event-item:nth-child(1) { animation-delay: 0.05s; }
.day-event-item:nth-child(2) { animation-delay: 0.1s; }
.day-event-item:nth-child(3) { animation-delay: 0.15s; }
.day-event-item:nth-child(4) { animation-delay: 0.2s; }
.day-event-item:nth-child(5) { animation-delay: 0.25s; }

/* Timeline event block entrance */
.timeline-event {
    animation: eventPop 0.4s var(--spring) both;
}

.timeline-event:nth-child(1) { animation-delay: 0.15s; }
.timeline-event:nth-child(2) { animation-delay: 0.2s; }
.timeline-event:nth-child(3) { animation-delay: 0.25s; }

@keyframes eventPop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Rubber-band overscroll indicator */
#day-timeline {
    overscroll-behavior: none;
}

.rubber-band-content {
    transition: transform 0.4s var(--spring);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================
   Loader Screen
   ============================================= */

#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
}

#loader-logo-wrap {
    width: 96px;
    height: 96px;
    animation: loader-spin 3.5s linear infinite;
    filter: drop-shadow(0 0 18px rgba(212, 168, 67, 0.45));
}

#loader-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes loader-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#loader-bar-track {
    width: 210px;
    height: 5px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#loader-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        #7B5800 0%,
        #C8960C 18%,
        #FFD700 42%,
        #FFF8B0 54%,
        #DAA520 72%,
        #A67700 100%
    );
    border-radius: 10px;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 14px rgba(255, 215, 0, 0.65),
        0 0 5px  rgba(255, 215, 0, 0.95);
}

#loader-bar-shimmer {
    position: absolute;
    inset: 0;
    width: 60%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.68) 50%,
        transparent 100%
    );
    animation: gold-shimmer 1.9s ease-in-out infinite;
}

@keyframes gold-shimmer {
    0%   { transform: translateX(-200%); }
    100% { transform: translateX(400%); }
}