/* * calendar-apple-mobile.css — hyCalendar Apple iPhone Redesign * Loaded at end of so this beats all previous CSS in the cascade. * Philosophy: PURE VISUAL REDESIGN — zero JS changes, 100% functionality intact. * Design inspiration: Apple Calendar · iOS 26 · VisionOS glass · SF Pro * * Breakpoints covered: * ≤ 440 px iPhone 16 Pro Max / 15 Pro Max * ≤ 430 px iPhone 16 Plus / 15 Plus / 14 Plus * ≤ 402 px iPhone 16 Pro * ≤ 393 px iPhone 16 / 15 / 14 * ≤ 390 px iPhone 13 / 12 * ≤ 375 px iPhone SE * * Requires: tokens.css · ios-glass.css · calendar-enterprise.css * loaded BEFORE this file (they lose the cascade battle to us). */ /* ══════════════════════════════════════════════════════════════════════════ §0 Apple Design Tokens — mobile-only custom props ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { :root { /* Background scale (Apple Dark) */ --cal-bg: #0B0B0F; --cal-surface: #15161B; --cal-surface-2: #1D1E23; --cal-border: rgba(255,255,255,.08); --cal-border-lite: rgba(255,255,255,.05); /* Text */ --cal-text: #FFFFFF; --cal-text-2: #A7AAB3; --cal-text-3: rgba(255,255,255,.35); /* Apple Blue accent */ --cal-blue: #007AFF; --cal-blue-dim: rgba(0,122,255,.15); --cal-blue-glow: rgba(0,122,255,.30); --cal-blue-dark: #0062CC; /* Apple Red (time indicator, destructive) */ --cal-red: #FF3B30; /* Frosted glass layers */ --cal-glass: rgba(21,22,27,.82); --cal-glass-heavy: rgba(18,18,24,.97); --cal-glass-tab: rgba(15,15,20,.88); /* Spacing scale (Apple 8-point grid) */ --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 100px; } } /* ══════════════════════════════════════════════════════════════════════════ §1 Page Background + Root Layout ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { html, body { background: #0B0B0F !important; } .main { padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important; padding-left: 16px !important; padding-right: 16px !important; padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; max-width: 100% !important; } .cal-layout { flex-direction: column !important; gap: 0 !important; } .cal-main { min-width: 0 !important; } .cal-sidebar { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ §2 Page Header — Apple Calendar minimal style ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .hdr { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 10px !important; margin-bottom: 14px !important; padding: 0 2px !important; } /* HIDE all .hdr-right children except .month-nav (covers every button variant) */ .hdr-right > *:not(.month-nav) { display: none !important; visibility: hidden !important; width: 0 !important; overflow: hidden !important; } /* Belt + suspenders — explicit selectors for btn-sched-call / btn-new-meeting in case they ever move outside .hdr-right */ .sidebar-toggle, #show-done-btn, .btn-sched-call, .btn-new-meeting { display: none !important; visibility: hidden !important; } /* Page title: emoji + "Calendar" — large SF Pro bold */ .page-title { font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', system-ui !important; font-size: 22px !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: -0.4px !important; } /* Hide subtitle below the title */ .hdr > div:first-child > div:not(.page-title) { display: none !important; } /* Right cluster: month-nav + Today only */ .hdr-right { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; flex-shrink: 1 !important; min-width: 0 !important; } /* HIDE: "+ New Event" primary button in header — FAB is the entry point */ .hdr-right > .btn.primary:last-child { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ §3 Month Navigation — ← Month Year → + Today ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .month-nav { display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 1 !important; min-width: 0 !important; } /* ← and → arrow buttons: 32 px circle */ .month-nav > button:not(.btn) { width: 32px !important; height: 32px !important; min-height: 32px !important; border-radius: 50% !important; background: rgba(255,255,255,.09) !important; border: none !important; color: #FFFFFF !important; font-size: 16px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background .14s, transform .1s !important; line-height: 1 !important; } .month-nav > button:not(.btn):active { background: rgba(255,255,255,.18) !important; transform: scale(.91) !important; } /* "Month Year" label — bold, large */ #month-label { font-family: -apple-system, 'SF Pro Display', system-ui !important; font-size: 16px !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: -.25px !important; white-space: nowrap !important; flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* "Today" pill button — Apple blue outline */ .month-nav .btn.ghost { padding: 0 15px !important; height: 34px !important; min-height: 34px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 17px !important; background: rgba(0,122,255,.12) !important; border: 1.5px solid rgba(0,122,255,.38) !important; color: #007AFF !important; white-space: nowrap !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; letter-spacing: -.1px !important; transition: background .14s, transform .1s !important; } .month-nav .btn.ghost:active { background: rgba(0,122,255,.24) !important; transform: scale(.95) !important; } } /* ══════════════════════════════════════════════════════════════════════════ §4 View Switcher — Apple iOS Segmented Control ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .view-switcher { margin-bottom: 10px !important; padding: 0 2px !important; } /* Outer container: pill background */ #view-segment.ios-segment { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; background: rgba(118,118,128,.18) !important; border-radius: 10px !important; padding: 2px !important; border: none !important; height: 36px !important; gap: 0 !important; } /* Inactive segment */ #view-segment .ios-segment-item { border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; font-family: -apple-system, system-ui !important; color: rgba(255,255,255,.5) !important; border: none !important; background: none !important; padding: 0 2px !important; min-height: 32px !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; transition: color .15s, background .15s !important; letter-spacing: -.1px !important; } /* Active segment: frosted white pill */ #view-segment .ios-segment-item.active { background: rgba(255,255,255,.16) !important; color: #FFFFFF !important; box-shadow: 0 1px 5px rgba(0,0,0,.28) !important; font-weight: 600 !important; } #view-segment .ios-segment-item:active { transform: scale(.95) !important; } } /* ══════════════════════════════════════════════════════════════════════════ §5 Search Bar — iOS rounded pill ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .search-row { margin-bottom: 10px !important; } /* Pill container */ .ios-search-bar { position: relative !important; background: rgba(118,118,128,.16) !important; border-radius: 12px !important; border: none !important; display: flex !important; align-items: center !important; height: 38px !important; padding: 0 12px 0 34px !important; box-shadow: none !important; } /* Restore ios-system.css search icon — circle lens + handle — with Apple muted-white */ .ios-search-bar::before { content: '' !important; display: block !important; position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 14px !important; height: 14px !important; border: 2px solid rgba(255,255,255,.38) !important; border-radius: 50% !important; pointer-events: none !important; background: none !important; } /* Handle of the magnifying glass */ .ios-search-bar::after { content: '' !important; display: block !important; position: absolute !important; left: 24px !important; top: 50% !important; transform: translateY(-50%) rotate(45deg) !important; width: 5px !important; height: 2px !important; background: rgba(255,255,255,.38) !important; margin-top: 5px !important; pointer-events: none !important; border-radius: 1px !important; } /* Search input itself */ .ios-search-bar input[type="search"], #event-search { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-size: 15px !important; font-family: -apple-system, system-ui !important; flex: 1 !important; outline: none !important; height: 100% !important; width: 100% !important; box-shadow: none !important; } #event-search::placeholder { color: rgba(255,255,255,.35) !important; } /* Search results dropdown */ .search-results { margin-top: 6px !important; background: rgba(21,22,27,.96) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--r-lg) !important; overflow: hidden !important; } .search-result-item { padding: 11px 16px !important; border-bottom: .5px solid rgba(255,255,255,.06) !important; } .search-result-title { font-size: 14px !important; font-weight: 500 !important; color: #FFFFFF !important; } .search-result-date { font-size: 12px !important; color: #A7AAB3 !important; } } /* ══════════════════════════════════════════════════════════════════════════ §6 Scope / Category Filter Pills — compact Apple chips ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .scope-pills { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; padding: 0 2px 4px !important; margin-bottom: 12px !important; /* No wrapping ever */ } .scope-pills::-webkit-scrollbar { display: none !important; } /* Inactive chip */ .scope-pill { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; flex-shrink: 0 !important; height: 34px !important; min-height: 34px !important; padding: 0 14px !important; border-radius: 17px !important; font-size: 13px !important; font-weight: 500 !important; font-family: -apple-system, system-ui !important; background: rgba(118,118,128,.16) !important; border: none !important; color: rgba(255,255,255,.65) !important; cursor: pointer !important; transition: background .14s, color .14s, transform .1s !important; letter-spacing: -.1px !important; } .scope-pill:active { transform: scale(.94) !important; } /* Active chip: Apple Blue */ .scope-pill.active { background: rgba(0,122,255,.18) !important; border: 1.5px solid rgba(0,122,255,.40) !important; color: #007AFF !important; font-weight: 600 !important; padding: 0 12.5px !important; /* adjust for border width */ } } /* ══════════════════════════════════════════════════════════════════════════ §7 Month Grid — Apple Calendar proportions ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Day-of-week header row */ .cal-hdr { gap: 1px !important; margin-bottom: 2px !important; padding: 0 !important; } .cal-hdr div { font-family: -apple-system, system-ui !important; font-size: 12px !important; font-weight: 400 !important; color: rgba(255,255,255,.42) !important; padding: 5px 0 6px !important; text-transform: none !important; letter-spacing: 0 !important; text-align: center !important; } /* Grid container */ .cal-grid { gap: 0 !important; } /* Individual day cell — borderless Apple style */ .cal-day { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-bottom: .5px solid rgba(255,255,255,.06) !important; border-right: .5px solid rgba(255,255,255,.06) !important; border-radius: 0 !important; min-height: 76px !important; padding: 7px 5px 4px !important; box-shadow: none !important; transition: background .12s !important; } /* Left column: add left border */ .cal-grid > .cal-day:nth-child(7n + 1) { border-left: .5px solid rgba(255,255,255,.06) !important; } /* First row of cells: add top border */ .cal-grid > .cal-day:nth-child(-n + 7) { border-top: .5px solid rgba(255,255,255,.06) !important; } .cal-day:hover { background: rgba(255,255,255,.04) !important; box-shadow: none !important; border-color: rgba(255,255,255,.06) !important; } .cal-day:active { background: rgba(255,255,255,.09) !important; } /* Today: no fill, just the day-number circle carries the accent */ .cal-day.today { background: transparent !important; border-color: rgba(255,255,255,.06) !important; box-shadow: none !important; } /* Other-month cells: more faded */ .cal-day.other { opacity: .18 !important; } /* Day number */ .day-num { font-family: -apple-system, 'SF Pro Display', system-ui !important; font-size: 17px !important; font-weight: 300 !important; color: #FFFFFF !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; margin-bottom: 3px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Today: Apple blue filled circle */ .cal-day.today .day-num { background: #007AFF !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 17px !important; box-shadow: 0 2px 8px rgba(0,122,255,.45) !important; } /* Event chips in month cells */ .evt-chip { font-size: 10px !important; line-height: 1.25 !important; padding: 2px 5px !important; border-radius: 5px !important; border-left: 2.5px solid !important; margin-bottom: 2px !important; font-weight: 500 !important; letter-spacing: 0 !important; } } /* ══════════════════════════════════════════════════════════════════════════ §8 Week View — cleaner grid, Apple proportions ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .week-view-wrapper { border-radius: var(--r-lg) !important; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: 0 4px 24px rgba(0,0,0,.3) !important; max-height: calc(100dvh - 280px) !important; overflow-y: auto !important; overflow-x: auto !important; } .week-view { background: rgba(15,15,20,.85) !important; backdrop-filter: saturate(160%) blur(20px) !important; -webkit-backdrop-filter: saturate(160%) blur(20px) !important; min-width: 540px !important; } .week-header-cell { font-size: 11px !important; font-weight: 400 !important; color: rgba(255,255,255,.48) !important; background: rgba(21,22,27,.9) !important; border-bottom: .5px solid rgba(255,255,255,.08) !important; letter-spacing: 0 !important; text-transform: none !important; padding: 9px 4px 7px !important; } .week-header-cell.today { color: #007AFF !important; } .week-header-cell .day-number { font-size: 22px !important; font-weight: 300 !important; margin-top: 2px !important; color: inherit !important; } .week-header-cell.today .day-number { background: #007AFF !important; color: #FFFFFF !important; font-weight: 600 !important; width: 30px !important; height: 30px !important; font-size: 14px !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,122,255,.45) !important; } .week-header-corner { background: rgba(21,22,27,.9) !important; border-bottom: .5px solid rgba(255,255,255,.08) !important; border-right: .5px solid rgba(255,255,255,.06) !important; } .week-time-label { font-size: 9px !important; color: rgba(255,255,255,.28) !important; font-weight: 400 !important; background: rgba(15,15,20,.7) !important; border-right: .5px solid rgba(255,255,255,.06) !important; border-bottom: .5px solid rgba(255,255,255,.04) !important; height: 52px !important; } .week-cell { border-right: .5px solid rgba(255,255,255,.04) !important; border-bottom: .5px solid rgba(255,255,255,.04) !important; height: 52px !important; } .week-cell:hover { background: rgba(255,255,255,.04) !important; } .week-cell.outside-hours { background: rgba(0,0,0,.10) !important; } /* Week events: rounded rectangles */ .week-cell .week-event { border-radius: 6px !important; border-left: 3px solid !important; padding: 2px 5px !important; font-size: 10px !important; font-weight: 500 !important; } /* Current-time indicator: thin red line + dot (iOS style) */ .week-now-line { background: #FF3B30 !important; height: 1.5px !important; } .week-now-line::before { width: 8px !important; height: 8px !important; top: -3.25px !important; background: #FF3B30 !important; left: -1px !important; } } /* ══════════════════════════════════════════════════════════════════════════ §9 Day View — Apple hourly timeline ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .day-view { background: rgba(15,15,20,.85) !important; backdrop-filter: saturate(160%) blur(20px) !important; -webkit-backdrop-filter: saturate(160%) blur(20px) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; overflow: hidden !important; } .day-view-header { font-family: -apple-system, 'SF Pro Display', system-ui !important; font-size: 16px !important; font-weight: 600 !important; color: #FFFFFF !important; letter-spacing: -.25px !important; background: rgba(21,22,27,.9) !important; padding: 14px 16px !important; border-bottom: .5px solid rgba(255,255,255,.08) !important; } .day-hour-row { grid-template-columns: 52px 1fr !important; min-height: 58px !important; border-bottom: .5px solid rgba(255,255,255,.04) !important; } .day-hour-label { font-size: 10px !important; font-weight: 400 !important; color: rgba(255,255,255,.28) !important; background: rgba(15,15,20,.6) !important; border-right: .5px solid rgba(255,255,255,.06) !important; padding: 6px 8px 0 !important; } .day-hour-content.outside-hours { background: rgba(0,0,0,.08) !important; } .day-hour-content:hover { background: rgba(255,255,255,.04) !important; } .day-event { border-radius: 8px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 500 !important; border-left: 3px solid !important; margin-bottom: 3px !important; } .day-event .day-event-time { font-size: 11px !important; opacity: .65 !important; font-weight: 400 !important; margin-top: 2px !important; } } /* ══════════════════════════════════════════════════════════════════════════ §10 Agenda View — clean Apple list layout ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .agenda-view { gap: 0 !important; } /* Date group header — big number, day label */ .agenda-date-header { gap: 14px !important; padding: 18px 4px 10px !important; border-bottom: .5px solid rgba(255,255,255,.09) !important; margin-bottom: 6px !important; } .adf-num { font-family: -apple-system, 'SF Pro Display', system-ui !important; font-size: 30px !important; font-weight: 300 !important; color: rgba(255,255,255,.82) !important; min-width: 38px !important; line-height: 1 !important; } .adf-day { font-family: -apple-system, system-ui !important; font-size: 12px !important; font-weight: 600 !important; color: rgba(255,255,255,.48) !important; text-transform: uppercase !important; letter-spacing: .04em !important; } .adf-badge { font-family: -apple-system, system-ui !important; font-size: 11px !important; background: rgba(0,122,255,.18) !important; color: #007AFF !important; padding: 3px 10px !important; border-radius: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; } /* Today: blue circle on date number */ .agenda-date-header.today .adf-num { background: #007AFF !important; color: #FFFFFF !important; font-weight: 600 !important; font-size: 18px !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; min-width: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 10px rgba(0,122,255,.40) !important; } .agenda-date-header.today .adf-day { color: #007AFF !important; } /* Event row */ .agenda-event { background: rgba(21,22,27,.72) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px !important; padding: 12px 14px !important; margin-bottom: 6px !important; gap: 12px !important; transition: background .14s, transform .1s !important; } .agenda-event:hover { background: rgba(25,26,33,.88) !important; transform: none !important; border-color: rgba(255,255,255,.10) !important; } .agenda-event:active { transform: scale(.98) !important; background: rgba(255,255,255,.07) !important; } .agenda-event-color { width: 3px !important; height: 32px !important; border-radius: 2px !important; } .agenda-event-title { font-family: -apple-system, system-ui !important; font-size: 15px !important; font-weight: 500 !important; color: #FFFFFF !important; letter-spacing: -.15px !important; } .agenda-event-meta { font-size: 12px !important; color: rgba(167,170,179,.9) !important; margin-top: 2px !important; } } /* ══════════════════════════════════════════════════════════════════════════ §11 Event List — month view bottom list ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .evt-list { margin-top: 16px !important; } .evt-row { background: rgba(21,22,27,.72) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 12px !important; padding: 11px 14px !important; margin-bottom: 5px !important; gap: 10px !important; transition: background .14s, transform .1s !important; } .evt-row:hover { background: rgba(25,26,33,.88) !important; transform: none !important; border-color: rgba(255,255,255,.10) !important; } .evt-row:active { transform: scale(.98) !important; } .evt-time { font-family: -apple-system, system-ui !important; font-size: 11px !important; font-weight: 400 !important; color: rgba(167,170,179,.88) !important; min-width: 82px !important; flex-shrink: 0 !important; } .evt-title { font-family: -apple-system, system-ui !important; font-size: 14px !important; font-weight: 500 !important; color: #FFFFFF !important; letter-spacing: -.1px !important; } .evt-badge { font-size: 10px !important; padding: 3px 8px !important; border-radius: 8px !important; font-weight: 600 !important; max-width: 88px !important; text-transform: capitalize !important; } } /* ══════════════════════════════════════════════════════════════════════════ §12 Bottom Tab Bar — Apple UITabBar style ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { #cal-bottom-tabs { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; background: rgba(15,15,20,.90) !important; backdrop-filter: saturate(200%) blur(22px) !important; -webkit-backdrop-filter: saturate(200%) blur(22px) !important; border-top: .5px solid rgba(255,255,255,.12) !important; padding-top: 4px !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; } .cal-tab { font-family: -apple-system, system-ui !important; font-size: 10px !important; font-weight: 500 !important; color: rgba(255,255,255,.32) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 8px 0 6px !important; border: none !important; background: none !important; cursor: pointer !important; min-height: 44px !important; transition: color .2s cubic-bezier(.34,1.56,.64,1) !important; } .cal-tab iconify-icon { font-size: 23px !important; transition: transform .22s cubic-bezier(.34,1.56,.64,1) !important; } /* Active tab: Hypatia accent (respects theme) */ .cal-tab.active { color: var(--hy-active-text, var(--accent, #007AFF)) !important; } .cal-tab.active iconify-icon { transform: scale(1.1) !important; } .cal-tab:active iconify-icon { transform: scale(.88) !important; } /* FAB repositioned above the taller tab bar */ #cal-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; right: 20px !important; } } /* ══════════════════════════════════════════════════════════════════════════ §13 FAB — Apple frosted glass (replaces Android purple gradient) Note: targets inline style="" on the element, so !important required. ══════════════════════════════════════════════════════════════════════════ */ #cal-fab { background: rgba(22,22,29,.88) !important; backdrop-filter: saturate(200%) blur(22px) !important; -webkit-backdrop-filter: saturate(200%) blur(22px) !important; border: 1.5px solid rgba(255,255,255,.20) !important; box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.09) !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; color: #FFFFFF !important; font-size: 26px !important; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background .15s !important; display: flex !important; align-items: center !important; justify-content: center !important; } #cal-fab:hover { background: rgba(28,28,36,.92) !important; border-color: rgba(255,255,255,.28) !important; } #cal-fab:active { transform: scale(.90) !important; box-shadow: 0 4px 16px rgba(0,0,0,.25) !important; } #cal-fab iconify-icon { font-size: 24px !important; line-height: 1 !important; } /* ══════════════════════════════════════════════════════════════════════════ §14 Event Drawer — Apple sheet sliding from bottom ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .event-drawer-overlay { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; background: rgba(0,0,0,.45) !important; } .event-drawer { background: rgba(18,18,24,.97) !important; backdrop-filter: saturate(200%) blur(30px) !important; -webkit-backdrop-filter: saturate(200%) blur(30px) !important; border-left: none !important; border-top: .5px solid rgba(255,255,255,.12) !important; border-radius: 24px 24px 0 0 !important; box-shadow: 0 -8px 40px rgba(0,0,0,.42) !important; max-height: 88dvh !important; } /* Drag handle pill */ .event-drawer::before { content: '' !important; display: block !important; width: 36px !important; height: 4px !important; background: rgba(255,255,255,.22) !important; border-radius: 2px !important; margin: 10px auto -2px !important; } .event-drawer-header { padding: 16px 20px 14px !important; border-bottom: .5px solid rgba(255,255,255,.08) !important; } .event-drawer-header h3 { font-family: -apple-system, 'SF Pro Display', system-ui !important; font-size: 17px !important; font-weight: 600 !important; color: #FFFFFF !important; letter-spacing: -.2px !important; } .event-drawer-close { width: 30px !important; height: 30px !important; min-height: 30px !important; background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.75) !important; font-size: 14px !important; border-radius: 50% !important; padding: 0 !important; } .event-drawer-close:hover { background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; } .event-drawer-body { padding: 16px 20px !important; } .event-drawer-body .drawer-field { margin-bottom: 18px !important; } .event-drawer-body .drawer-label { font-family: -apple-system, system-ui !important; font-size: 11px !important; font-weight: 600 !important; color: rgba(167,170,179,.70) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 4px !important; } .event-drawer-body .drawer-value { font-family: -apple-system, system-ui !important; font-size: 15px !important; color: #FFFFFF !important; line-height: 1.55 !important; } .event-drawer-actions { padding: 12px 16px !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; border-top: .5px solid rgba(255,255,255,.08) !important; gap: 8px !important; flex-wrap: wrap !important; } } /* ══════════════════════════════════════════════════════════════════════════ §15 Create / Edit Modal — Apple bottom sheet on mobile ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .modal-bg.open { align-items: flex-end !important; padding: 0 !important; } .modal-enterprise { background: rgba(18,18,24,.97) !important; backdrop-filter: saturate(200%) blur(30px) !important; -webkit-backdrop-filter: saturate(200%) blur(30px) !important; border: none !important; border-top: .5px solid rgba(255,255,255,.12) !important; border-radius: 24px 24px 0 0 !important; box-shadow: 0 -8px 40px rgba(0,0,0,.44) !important; max-height: 94dvh !important; width: 100% !important; max-width: 100% !important; } .modal-enterprise-header { position: sticky !important; top: 0 !important; z-index: 2 !important; background: rgba(18,18,24,.98) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; padding: 14px 20px 12px !important; border-bottom: .5px solid rgba(255,255,255,.08) !important; } .modal-enterprise-header h3 { font-family: -apple-system, 'SF Pro Display', system-ui !important; font-size: 17px !important; font-weight: 600 !important; color: #FFFFFF !important; letter-spacing: -.2px !important; } .modal-enterprise-body { padding: 14px 18px !important; } .modal-enterprise-footer { position: sticky !important; bottom: 0 !important; background: rgba(18,18,24,.98) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; padding: 12px 18px !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; border-top: .5px solid rgba(255,255,255,.08) !important; display: flex !important; gap: 10px !important; justify-content: flex-end !important; } } /* ══════════════════════════════════════════════════════════════════════════ §16 Buttons — Universal iOS fix (no overflow, no clipping, min 44px) ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Base — all .btn */ .btn { font-family: -apple-system, system-ui !important; font-size: 14px !important; font-weight: 600 !important; min-height: 44px !important; height: auto !important; padding: 0 18px !important; border-radius: 12px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; cursor: pointer !important; letter-spacing: -.1px !important; transition: transform .1s, opacity .15s, background .15s !important; } .btn:active { transform: scale(.95) !important; opacity: .88 !important; } /* Primary: filled Apple Blue */ .btn.primary { background: #007AFF !important; border: none !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0,122,255,.30) !important; padding: 0 22px !important; border-radius: 14px !important; min-height: 44px !important; } .btn.primary:active { background: #0062CC !important; box-shadow: 0 2px 6px rgba(0,122,255,.20) !important; } /* Ghost: subtle outline */ .btn.ghost { background: transparent !important; border: 1.5px solid rgba(255,255,255,.18) !important; color: rgba(255,255,255,.72) !important; padding: 0 16px !important; min-height: 44px !important; border-radius: 12px !important; } /* Danger: red outline */ .btn.danger { background: rgba(255,59,48,.12) !important; border: 1.5px solid rgba(255,59,48,.38) !important; color: #FF3B30 !important; min-height: 44px !important; } /* Standard glass btn (no extra modifier) */ .btn:not(.primary):not(.ghost):not(.danger) { background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.14) !important; color: rgba(255,255,255,.88) !important; min-height: 44px !important; } /* Drawer action buttons — equal-share layout */ .event-drawer-actions .btn { flex: 1 !important; min-width: 0 !important; font-size: 13px !important; padding: 0 10px !important; border-radius: 12px !important; min-height: 44px !important; } } /* ══════════════════════════════════════════════════════════════════════════ §17 iOS Form Rows — native feel inside modals ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .ios-form-group { background: rgba(21,22,27,.75) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px !important; overflow: hidden !important; margin-bottom: 14px !important; } .ios-form-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 13px 16px !important; border-bottom: .5px solid rgba(255,255,255,.07) !important; min-height: 48px !important; gap: 10px !important; } .ios-form-row:last-child { border-bottom: none !important; } /* Left label */ .ios-form-row > label:first-child { font-family: -apple-system, system-ui !important; font-size: 15px !important; font-weight: 400 !important; color: #FFFFFF !important; flex-shrink: 0 !important; letter-spacing: -.1px !important; } /* Right-side input/select */ .ios-form-row input:not([type="checkbox"]):not([type="color"]), .ios-form-row select { background: none !important; border: none !important; color: #A7AAB3 !important; font-size: 15px !important; font-family: -apple-system, system-ui !important; text-align: right !important; padding: 0 !important; outline: none !important; flex: 1 !important; min-width: 0 !important; min-height: 0 !important; box-shadow: none !important; } .ios-form-row select { appearance: none !important; -webkit-appearance: none !important; text-align-last: right !important; cursor: pointer !important; } /* Prevent iOS zoom on inputs — keep at 16px minimum */ input[type="text"], input[type="email"], input[type="search"], input[type="datetime-local"], input[type="date"], select, textarea { font-size: 16px !important; } } /* ══════════════════════════════════════════════════════════════════════════ §18 iPhone-specific breakpoint overrides ══════════════════════════════════════════════════════════════════════════ */ /* iPhone 16 Pro Max / 15 Pro Max / Plus models (≤440px) */ @media (max-width: 440px) { .main { padding-left: 14px !important; padding-right: 14px !important; } } /* Most standard + Plus iPhones (≤430px) */ @media (max-width: 430px) { #month-label { font-size: 15px !important; } .cal-day { min-height: 72px !important; } .day-num { font-size: 16px !important; width: 28px !important; height: 28px !important; } .evt-chip { font-size: 9px !important; padding: 2px 4px !important; } /* Compact scope pills */ .scope-pill { height: 32px !important; min-height: 32px !important; font-size: 12px !important; padding: 0 12px !important; } } /* iPhone 16 Pro (≤402px) */ @media (max-width: 402px) { .main { padding-left: 13px !important; padding-right: 13px !important; } } /* iPhone 16 / 15 / 14 (≤393px) */ @media (max-width: 393px) { .page-title { font-size: 20px !important; } #month-label { font-size: 14px !important; } .ios-segment-item { font-size: 12px !important; } } /* iPhone 13 / 12 (≤390px) */ @media (max-width: 390px) { .cal-day { min-height: 68px !important; padding: 6px 4px 3px !important; } } /* iPhone SE / 3rd gen (≤375px) */ @media (max-width: 375px) { .main { padding-left: 12px !important; padding-right: 12px !important; } .page-title { font-size: 18px !important; } #month-label { font-size: 13px !important; } .cal-day { min-height: 62px !important; padding: 5px 3px 3px !important; } .day-num { font-size: 14px !important; width: 25px !important; height: 25px !important; } .evt-chip { font-size: 8px !important; padding: 1px 3px !important; } .scope-pill { font-size: 11px !important; height: 30px !important; min-height: 30px !important; padding: 0 10px !important; } .month-nav .btn.ghost { padding: 0 10px !important; font-size: 12px !important; height: 30px !important; min-height: 30px !important; } .ios-segment-item { font-size: 11px !important; } #view-segment.ios-segment { height: 34px !important; } .btn { min-height: 44px !important; font-size: 13px !important; } } /* ══════════════════════════════════════════════════════════════════════════ §18b Landscape phone header fix (960px catches all iPhone landscape widths) iPhone 16 Pro Max landscape = 932 CSS px — wider than 768px portrait query ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) and (orientation: landscape) and (max-height: 550px) { /* Same nuclear hide as portrait: only .month-nav survives in .hdr-right */ .hdr-right > *:not(.month-nav) { display: none !important; visibility: hidden !important; width: 0 !important; overflow: hidden !important; } .sidebar-toggle, #show-done-btn, .btn-sched-call, .btn-new-meeting { display: none !important; visibility: hidden !important; } } /* ══════════════════════════════════════════════════════════════════════════ §19 Landscape — iPhone horizontal (layout adjustments) ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 926px) and (orientation: landscape) and (max-height: 500px) { .main { padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important; padding-left: calc(env(safe-area-inset-left, 0px) + 14px) !important; padding-right: calc(env(safe-area-inset-right, 0px) + 14px) !important; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; } .cal-day { min-height: 52px !important; } .week-view-wrapper { max-height: calc(100dvh - 160px) !important; } /* Bottom tab bar still present in landscape */ #cal-bottom-tabs { height: calc(44px + env(safe-area-inset-bottom, 0px)) !important; } .cal-tab { padding: 4px 0 !important; font-size: 9px !important; gap: 1px !important; } .cal-tab iconify-icon { font-size: 18px !important; } } /* ══════════════════════════════════════════════════════════════════════════ §20 Animations — spring physics + smooth fades ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Sheet slide-up (modal + drawer) */ @keyframes cal-sheet-up { from { transform: translateY(100%); opacity: .85; } to { transform: translateY(0); opacity: 1; } } /* Month cells fade-scale in staggered */ @keyframes cal-cell-fade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } .cal-grid > .cal-day { animation: cal-cell-fade .20s ease-out both !important; } .cal-grid > .cal-day:nth-child(n + 8) { animation-delay: .025s !important; } .cal-grid > .cal-day:nth-child(n + 15) { animation-delay: .050s !important; } .cal-grid > .cal-day:nth-child(n + 22) { animation-delay: .075s !important; } .cal-grid > .cal-day:nth-child(n + 29) { animation-delay: .100s !important; } .cal-grid > .cal-day:nth-child(n + 36) { animation-delay: .120s !important; } /* Agenda events slide in */ @keyframes agenda-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .agenda-event { animation: agenda-in .20s ease-out both !important; } /* View fade in */ @keyframes view-in { from { opacity: 0; } to { opacity: 1; } } #month-view, #week-view, #day-view, #agenda-view { animation: view-in .18s ease-out !important; } /* Create modal spring */ .modal-enterprise { animation: cal-sheet-up .30s cubic-bezier(.2,.9,.3,1) !important; } /* Event drawer spring transition */ .event-drawer.open { transition: transform .34s cubic-bezier(.34,1.2,.64,1) !important; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .cal-grid > .cal-day, .agenda-event, .modal-enterprise, #month-view, #week-view, #day-view, #agenda-view { animation: none !important; transition: none !important; } } } /* ══════════════════════════════════════════════════════════════════════════ §21 Mini calendar sidebar (hidden on mobile; keep tidy for tablet) ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 769px) and (max-width: 1100px) { .mini-cal, .sync-panel, .avail-panel, .cat-panel { border-radius: 14px !important; padding: 12px !important; } }