/* ============================================================ moak-apps-ios.css A polished iOS-style CSS design system for mobile PWAs. Extracted and generalized from the DinnerPicker PWA. Usage: Requires Bootstrap Icons for icon support: Apply a theme: Themes: blue | green | pink | purple | orange | red | teal | gray | indigo | mint | cyan | yellow | brown | rose Modes: light | dark (omit for system default) ============================================================ */ /* ─── Design Tokens ──────────────────────────────────────── */ :root { /* Surfaces */ --ios-bg: #F2F2F7; --ios-surface-1: #FFFFFF; --ios-surface-2: #FFFFFF; --ios-surface-3: #E5E5EA; /* Borders */ --ios-border: rgba(60,60,67,0.18); --ios-border-light: rgba(60,60,67,0.10); /* Accent — Blue (default) */ --ios-accent: #007AFF; --ios-accent-mid: #0A84FF; --ios-accent-light: #64D2FF; --ios-accent-dim: rgba(0,122,255,0.15); --ios-accent-glow: rgba(0,122,255,0.25); /* Secondary accent */ --ios-teal: #30B0C7; --ios-teal-dim: rgba(48,176,199,0.15); --ios-teal-border: rgba(48,176,199,0.30); /* Destructive */ --ios-rose: #FF3B30; --ios-rose-dim: rgba(255,59,48,0.12); /* Warning */ --ios-amber: #FF9500; /* Text */ --ios-text-1: #000000; --ios-text-2: #3C3C43; --ios-text-3: #8E8E93; /* Radii */ --ios-r-sm: 10px; --ios-r-md: 14px; --ios-r-lg: 20px; --ios-r-pill: 999px; /* Safe areas */ --ios-safe-top: env(safe-area-inset-top, 0px); --ios-safe-bottom: env(safe-area-inset-bottom, 0px); /* Font stack */ --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ─── Color Themes ───────────────────────────────────────── */ [data-theme="blue"] { --ios-accent: #007AFF; --ios-accent-mid: #0A84FF; --ios-accent-light: #64D2FF; --ios-accent-dim: rgba(0,122,255,0.15); --ios-accent-glow: rgba(0,122,255,0.25); --ios-teal: #30B0C7; --ios-teal-dim: rgba(48,176,199,0.15); --ios-teal-border: rgba(48,176,199,0.30); --ios-border: rgba(0,122,255,0.15); --ios-border-light: rgba(0,122,255,0.08); } [data-theme="blue"][data-mode="dark"] { --ios-accent: #0A84FF; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="green"] { --ios-accent: #34C759; --ios-accent-mid: #30D158; --ios-accent-light: #63E6E2; --ios-accent-dim: rgba(52,199,89,0.15); --ios-accent-glow: rgba(52,199,89,0.25); --ios-border: rgba(52,199,89,0.15); --ios-border-light: rgba(52,199,89,0.08); } [data-theme="green"][data-mode="dark"] { --ios-accent: #30D158; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="pink"] { --ios-accent: #FF6482; --ios-accent-mid: #FF859C; --ios-accent-light: #FFA6B5; --ios-accent-dim: rgba(255,100,130,0.12); --ios-accent-glow: rgba(255,100,130,0.20); --ios-teal: #AF52DE; --ios-teal-dim: rgba(175,82,222,0.12); --ios-teal-border: rgba(175,82,222,0.28); --ios-border: rgba(255,100,130,0.15); --ios-border-light: rgba(255,100,130,0.08); } [data-theme="pink"][data-mode="dark"] { --ios-accent: #FF6482; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="purple"] { --ios-accent: #AF52DE; --ios-accent-mid: #BF5AF2; --ios-accent-light: #DA8FFF; --ios-accent-dim: rgba(175,82,222,0.12); --ios-accent-glow: rgba(175,82,222,0.20); --ios-teal: #5856D6; --ios-teal-dim: rgba(88,86,214,0.12); --ios-teal-border: rgba(88,86,214,0.28); --ios-border: rgba(175,82,222,0.15); --ios-border-light: rgba(175,82,222,0.08); } [data-theme="purple"][data-mode="dark"] { --ios-accent: #BF5AF2; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="orange"] { --ios-accent: #FF9500; --ios-accent-mid: #FF9F0A; --ios-accent-light: #FFB340; --ios-accent-dim: rgba(255,149,0,0.12); --ios-accent-glow: rgba(255,149,0,0.20); --ios-teal: #FF2D55; --ios-border: rgba(255,149,0,0.15); --ios-border-light: rgba(255,149,0,0.08); } [data-theme="orange"][data-mode="dark"] { --ios-accent: #FF9F0A; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="red"] { --ios-accent: #FF3B30; --ios-accent-mid: #FF453A; --ios-accent-light: #FF6961; --ios-accent-dim: rgba(255,59,48,0.12); --ios-accent-glow: rgba(255,59,48,0.20); --ios-teal: #AF52DE; --ios-border: rgba(255,59,48,0.15); --ios-border-light: rgba(255,59,48,0.08); } [data-theme="red"][data-mode="dark"] { --ios-accent: #FF453A; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="teal"] { --ios-accent: #30B0C7; --ios-accent-mid: #40C8E0; --ios-accent-light: #64D2FF; --ios-accent-dim: rgba(48,176,199,0.12); --ios-accent-glow: rgba(48,176,199,0.20); --ios-teal: #34C759; --ios-border: rgba(48,176,199,0.15); --ios-border-light: rgba(48,176,199,0.08); } [data-theme="teal"][data-mode="dark"] { --ios-accent: #40C8E0; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="gray"] { --ios-accent: #6C6C70; --ios-accent-mid: #8E8E93; --ios-accent-light: #AEAEB2; --ios-accent-dim: rgba(108,108,112,0.15); --ios-accent-glow: rgba(108,108,112,0.20); --ios-border: rgba(108,108,112,0.15); --ios-border-light: rgba(108,108,112,0.08); } [data-theme="gray"][data-mode="dark"] { --ios-accent: #98989D; --ios-border: rgba(142,142,147,0.36); --ios-border-light: rgba(142,142,147,0.65); } [data-theme="indigo"] { --ios-accent: #5856D6; --ios-accent-mid: #7D7AFF; --ios-accent-light: #9C9BEA; --ios-accent-dim: rgba(88,86,214,0.15); --ios-accent-glow: rgba(88,86,214,0.25); --ios-border: rgba(88,86,214,0.15); --ios-border-light: rgba(88,86,214,0.08); } [data-theme="indigo"][data-mode="dark"] { --ios-accent: #7D7AFF; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="mint"] { --ios-accent: #00C7BE; --ios-accent-mid: #00D2C8; --ios-accent-light: #5BE4DC; --ios-accent-dim: rgba(0,199,190,0.15); --ios-accent-glow: rgba(0,199,190,0.25); --ios-teal: #34C759; --ios-border: rgba(0,199,190,0.15); --ios-border-light: rgba(0,199,190,0.08); } [data-theme="mint"][data-mode="dark"] { --ios-accent: #66D4CF; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="cyan"] { --ios-accent: #32ADE6; --ios-accent-mid: #40BAF5; --ios-accent-light: #70D0FF; --ios-accent-dim: rgba(50,173,230,0.15); --ios-accent-glow: rgba(50,173,230,0.25); --ios-teal: #5856D6; --ios-border: rgba(50,173,230,0.15); --ios-border-light: rgba(50,173,230,0.08); } [data-theme="cyan"][data-mode="dark"] { --ios-accent: #40BAF5; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="yellow"] { --ios-accent: #C9920A; --ios-accent-mid: #E6A800; --ios-accent-light: #FFCC00; --ios-accent-dim: rgba(201,146,10,0.15); --ios-accent-glow: rgba(201,146,10,0.25); --ios-teal: #FF9500; --ios-border: rgba(201,146,10,0.15); --ios-border-light: rgba(201,146,10,0.08); } [data-theme="yellow"][data-mode="dark"] { --ios-accent: #FFD60A; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="brown"] { --ios-accent: #A2845E; --ios-accent-mid: #B2916D; --ios-accent-light: #C9A882; --ios-accent-dim: rgba(162,132,94,0.15); --ios-accent-glow: rgba(162,132,94,0.25); --ios-teal: #FF9500; --ios-border: rgba(162,132,94,0.15); --ios-border-light: rgba(162,132,94,0.08); } [data-theme="brown"][data-mode="dark"] { --ios-accent: #C4A882; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } [data-theme="rose"] { --ios-accent: #FF2D55; --ios-accent-mid: #FF375F; --ios-accent-light: #FF6B8A; --ios-accent-dim: rgba(255,45,85,0.12); --ios-accent-glow: rgba(255,45,85,0.20); --ios-teal: #AF52DE; --ios-border: rgba(255,45,85,0.15); --ios-border-light: rgba(255,45,85,0.08); } [data-theme="rose"][data-mode="dark"] { --ios-accent: #FF375F; --ios-border: rgba(84,84,88,0.36); --ios-border-light: rgba(84,84,88,0.65); } /* ─── Light / Dark Mode Overrides ───────────────────────── */ [data-mode="dark"] { --ios-bg: #000000; --ios-surface-1: #1C1C1E; --ios-surface-2: #2C2C2E; --ios-surface-3: #3A3A3C; --ios-text-1: #FFFFFF; --ios-text-2: #EBEBF5; --ios-text-3: #EBEBF599; } [data-mode="light"] { --ios-bg: #F2F2F7; --ios-surface-1: #FFFFFF; --ios-surface-2: #FFFFFF; --ios-surface-3: #E5E5EA; --ios-text-1: #000000; --ios-text-2: #3C3C43; --ios-text-3: #8E8E93; } /* ─── Dark gradient bg (optional, add data-mode="dark" to body) */ [data-mode="dark"] .ios-app { background-image: radial-gradient(ellipse 70% 50% at 15% 0%, var(--ios-accent-dim) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 85% 100%, rgba(212,129,26,0.04) 0%, transparent 55%); } /* ─── Base Reset & Body ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .ios-app { font-family: var(--ios-font); background: var(--ios-bg); color: var(--ios-text-1); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; } /* Re-enable selection for interactive fields */ .ios-app input, .ios-app textarea, .ios-app [contenteditable] { user-select: text; -webkit-user-select: text; } /* ─── App Shell ──────────────────────────────────────────── */ .ios-app { display: flex; flex-direction: column; height: 100svh; max-width: 480px; margin: 0 auto; position: relative; overflow: hidden; } /* Tablet / desktop: show side border shadow */ @media (min-width: 520px) { .ios-app { border-left: 1px solid var(--ios-border); border-right: 1px solid var(--ios-border); box-shadow: 0 0 80px rgba(0,0,0,.12); } } /* ─── Tab Views ──────────────────────────────────────────── */ .ios-tab-view { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding-top: max(var(--ios-safe-top), 12px); } .ios-tab-view.active { display: flex; } /* ─── Screen Header ──────────────────────────────────────── */ .ios-screen-header { padding: 4px 20px 14px; flex-shrink: 0; } .ios-header-row { display: flex; align-items: center; justify-content: space-between; position: relative; } .ios-header-title-center { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; } .ios-header-row h2 { font-size: 30px; font-weight: 800; color: var(--ios-text-1); letter-spacing: -0.8px; } .ios-header-sub { font-size: 13px; color: var(--ios-text-2); margin-top: 2px; text-align: center; } .ios-header-badge { background: var(--ios-accent-dim); color: var(--ios-accent); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--ios-r-pill); border: 1px solid var(--ios-accent-glow); margin-bottom: 4px; white-space: nowrap; } /* ─── Header Add Button ──────────────────────────────────── */ .ios-btn-header-add { width: 36px; height: 36px; border-radius: 50%; background: var(--ios-accent-dim); color: var(--ios-accent); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .15s; } .ios-btn-header-add i { font-size: 20px; pointer-events: none; } .ios-btn-header-add:active { background: var(--ios-accent-glow); } /* ─── Search Bar ─────────────────────────────────────────── */ .ios-search-bar { margin: 0 16px 12px; background: var(--ios-surface-2); border: 1px solid var(--ios-border); border-radius: var(--ios-r-lg); height: 44px; display: flex; align-items: center; padding: 0 14px; gap: 8px; flex-shrink: 0; } .ios-search-bar .ios-search-icon { font-size: 15px; opacity: 0.4; } .ios-search-bar input { background: none; border: none; outline: none; color: var(--ios-text-2); font-size: 15px; font-family: var(--ios-font); flex: 1; } .ios-search-bar input::placeholder { color: var(--ios-text-3); } /* ─── Chip / Filter Strip ────────────────────────────────── */ .ios-chip-strip { display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ios-chip-strip::-webkit-scrollbar { display: none; } .ios-chip { white-space: nowrap; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--ios-r-pill); border: 1px solid var(--ios-border-light); color: var(--ios-text-2); background: var(--ios-surface-2); cursor: pointer; flex-shrink: 0; transition: all .15s; } .ios-chip.active { background: var(--ios-accent-dim); color: var(--ios-accent); border-color: var(--ios-accent-glow); } /* ─── Scroll Area ────────────────────────────────────────── */ .ios-scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 16px 24px; display: flex; flex-direction: column; gap: 8px; } .ios-scroll-area::-webkit-scrollbar { display: none; } /* ─── Card (swipeable row) ───────────────────────────────── */ .ios-card { background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-lg); position: relative; overflow: hidden; flex-shrink: 0; transition: border-color .2s, background .2s; } .ios-card.checked { background: var(--ios-accent-dim); border-color: var(--ios-accent-glow); } /* Card inner (slides on swipe) */ .ios-card-inner { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--ios-surface-1); transition: transform .25s cubic-bezier(.25,.46,.45,.94); position: relative; z-index: 2; user-select: none; -webkit-user-select: none; } .ios-card.checked .ios-card-inner { background: var(--ios-accent-dim); } .ios-card.swiped .ios-card-inner { transform: translateX(-140px); } /* Swipe action buttons revealed behind card */ .ios-swipe-actions { position: absolute; right: 0; top: 0; bottom: 0; width: 140px; display: flex; z-index: 1; opacity: 0; pointer-events: none; } .ios-card.swiping .ios-swipe-actions, .ios-card.swiped .ios-swipe-actions { opacity: 1; pointer-events: auto; } .ios-swipe-btn { flex: 1; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; color: #fff; transition: filter .15s; } .ios-swipe-btn:active { filter: brightness(0.88); } .ios-swipe-btn.edit { background: var(--ios-accent); } .ios-swipe-btn.delete { background: var(--ios-rose); } .ios-swipe-btn i { font-size: 18px; } /* ─── Compact Card (smaller gap/padding) ─────────────────── */ .ios-card-sm .ios-card-inner { padding: 12px 14px; gap: 10px; } .ios-card-sm.swiped .ios-card-inner { transform: translateX(-140px); } .ios-card-sm .ios-swipe-btn i { font-size: 16px; } /* ─── Checkmark circle ───────────────────────────────────── */ .ios-check-circle { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ios-surface-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; cursor: pointer; } .ios-check-circle-sm { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ios-surface-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; cursor: pointer; } .ios-check-circle i, .ios-check-circle-sm i { font-size: 11px; color: #fff; display: none; } .ios-card.checked .ios-check-circle, .ios-card.checked .ios-check-circle-sm { background: var(--ios-accent); border-color: var(--ios-accent); } .ios-card.checked .ios-check-circle i, .ios-card.checked .ios-check-circle-sm i { display: block; } /* ─── Card Text ──────────────────────────────────────────── */ .ios-card-info { flex: 1; min-width: 0; cursor: pointer; } .ios-card-title { font-size: 15px; font-weight: 700; color: var(--ios-text-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ios-card.checked .ios-card-title { color: var(--ios-text-2); } .ios-card-meta { display: flex; gap: 8px; margin-top: 3px; } .ios-card-tag { font-size: 11px; font-weight: 600; color: var(--ios-text-3); } /* ─── Row Item (settings-style) ──────────────────────────── */ .ios-settings-group { background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-md); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin-bottom: 6px; flex-shrink: 0; } .ios-settings-group-label { font-size: 11px; font-weight: 700; color: var(--ios-text-3); text-transform: uppercase; letter-spacing: 1.5px; padding: 16px 4px 6px; flex-shrink: 0; } .ios-settings-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ios-border); cursor: pointer; transition: background .15s; } .ios-settings-row:last-child { border-bottom: none; } .ios-settings-row:active { background: var(--ios-surface-2); } .ios-s-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: var(--ios-accent-dim); color: var(--ios-accent); } .ios-s-text { flex: 1; display: flex; flex-direction: column; justify-content: center; } .ios-s-title { font-size: 15px; font-weight: 600; color: var(--ios-text-1); } .ios-s-sub { font-size: 12px; color: var(--ios-text-2); margin-top: 1px; } .ios-s-arrow { font-size: 12px; color: var(--ios-text-3); } .ios-s-value { font-size: 12px; color: var(--ios-text-3); font-weight: 500; } /* ─── Toggle Switch ──────────────────────────────────────── */ .ios-toggle-wrap { position: relative; display: inline-block; width: 48px; height: 28px; } .ios-toggle-wrap input { opacity: 0; width: 0; height: 0; } .ios-toggle-slider { position: absolute; inset: 0; background: var(--ios-surface-3); border-radius: 14px; transition: background .2s; cursor: pointer; } .ios-toggle-slider::after { content: ""; position: absolute; width: 22px; height: 22px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: left .2s; box-shadow: 0 2px 4px rgba(0,0,0,.3); } .ios-toggle-wrap input:checked + .ios-toggle-slider { background: var(--ios-accent); } .ios-toggle-wrap input:checked + .ios-toggle-slider::after { left: 23px; } /* ─── Profile Row ────────────────────────────────────────── */ .ios-profile-row { display: flex; align-items: center; gap: 12px; padding: 16px 0 20px; flex-shrink: 0; cursor: pointer; } .ios-profile-row:active { opacity: .7; } .ios-profile-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ios-profile-avatar-placeholder { background: var(--ios-accent); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; } .ios-profile-info { display: flex; flex-direction: column; justify-content: center; } .ios-profile-name { font-size: 17px; font-weight: 700; color: var(--ios-text-1); } .ios-profile-email { font-size: 12px; color: var(--ios-text-2); margin-top: 2px; } .ios-profile-hint { font-size: 11px; color: var(--ios-accent); font-weight: 600; margin-top: 3px; } /* ─── Member Avatar ──────────────────────────────────────── */ .ios-member-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ios-member-avatar-placeholder { background: #7C6EF5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; } /* ─── Bottom Nav ─────────────────────────────────────────── */ .ios-bottom-nav { height: calc(60px + var(--ios-safe-bottom)); padding: 6px 4px var(--ios-safe-bottom); background: color-mix(in srgb, var(--ios-bg) 84%, transparent); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-top: 1px solid var(--ios-border); display: flex; align-items: flex-start; flex-shrink: 0; } .ios-nav-items { display: flex; align-items: center; justify-content: space-evenly; width: 100%; } .ios-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 3px 2px; border-radius: 12px; transition: background .2s; } .ios-nav-item.active { background: var(--ios-accent-dim); } .ios-nav-icon { font-size: 18px; color: var(--ios-text-3); } .ios-nav-item.active .ios-nav-icon { color: var(--ios-accent); } .ios-nav-label { font-size: 9px; font-weight: 600; color: var(--ios-text-3); } .ios-nav-item.active .ios-nav-label { color: var(--ios-accent); } /* ─── Modal Sheet (bottom) ───────────────────────────────── */ .ios-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .3s; } .ios-sheet-overlay.visible { opacity: 1; pointer-events: auto; } .ios-modal-sheet { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; transform: translateY(100%); width: 100%; max-width: 600px; border-radius: 24px 24px 0 0; background: color-mix(in srgb, var(--ios-surface-1) 92%, transparent); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); display: flex; flex-direction: column; overflow: hidden; z-index: 50; max-height: 92dvh; min-height: 50dvh; transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1); } .ios-modal-sheet.open { transform: translateY(0); box-shadow: 0 -4px 24px rgba(0,0,0,0.12); } .ios-sheet-handle { width: 36px; height: 5px; background: rgba(120,120,128,0.4); border-radius: 3px; margin: 8px auto; flex-shrink: 0; } .ios-sheet-header { padding: 0 16px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 0.5px solid var(--ios-border); flex-shrink: 0; position: relative; } .ios-sheet-title { font-size: 17px; font-weight: 600; color: var(--ios-text-1); text-align: center; position: absolute; left: 0; right: 0; pointer-events: none; } .ios-sheet-left-action { z-index: 1; min-width: 60px; text-align: left; } .ios-sheet-right-action { z-index: 1; min-width: 60px; text-align: right; } .ios-sheet-action { font-size: 17px; font-weight: 400; color: var(--ios-accent); cursor: pointer; padding: 8px 0; background: none; border: none; } .ios-sheet-action.bold { font-weight: 600; } .ios-sheet-body { flex: 1; min-height: 0; padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .ios-sheet-body::-webkit-scrollbar { display: none; } .ios-sheet-footer { flex-shrink: 0; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 0.5px solid var(--ios-border); background: color-mix(in srgb, var(--ios-surface-1) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ─── iOS Action Sheet (Confirm / Destructive) ───────────── */ .ios-action-sheet-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; padding: 8px 8px calc(var(--ios-safe-bottom) + 8px); background: rgba(0,0,0,.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; } .ios-action-sheet-overlay.visible { opacity: 1; pointer-events: auto; } .ios-action-sheet { width: 100%; display: flex; flex-direction: column; gap: 8px; transform: translateY(100%); transition: transform .3s cubic-bezier(.25,0.1,0.25,1); } .ios-action-sheet-overlay.visible .ios-action-sheet { transform: translateY(0); } .ios-action-sheet-group, .ios-action-sheet-cancel { background: color-mix(in srgb, var(--ios-surface-1) 85%, transparent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 13px; overflow: hidden; } .ios-action-sheet-msg { padding: 16px 16px 14px; text-align: center; font-size: 13px; color: var(--ios-text-2); font-weight: 400; line-height: 1.4; border-bottom: 0.5px solid var(--ios-border); } .ios-action-sheet-btn, .ios-action-sheet-cancel-btn { width: 100%; padding: 18px; background: transparent; border: none; font-size: 20px; cursor: pointer; display: block; text-align: center; transition: background .15s; color: var(--ios-accent); } .ios-action-sheet-btn.confirm { color: var(--ios-accent); font-weight: 600; } .ios-action-sheet-btn.destructive { color: var(--ios-rose); font-weight: 400; } .ios-action-sheet-cancel-btn { font-weight: 600; color: var(--ios-accent); } .ios-action-sheet-btn:active, .ios-action-sheet-cancel-btn:active { background: rgba(0,0,0,0.08); } [data-mode="dark"] .ios-action-sheet-btn:active, [data-mode="dark"] .ios-action-sheet-cancel-btn:active { background: rgba(255,255,255,0.12); } /* ─── Desktop-style Confirm Modal ────────────────────────── */ .ios-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 900; backdrop-filter: blur(3px); } .ios-modal-box { background: var(--ios-surface-2); border: 1px solid var(--ios-border); border-radius: 12px; padding: 24px; width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,.3); } .ios-modal-box h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; } .ios-modal-box p { font-size: 13px; color: var(--ios-text-2); margin-bottom: 20px; line-height: 1.6; } .ios-modal-actions { display: flex; gap: 8px; justify-content: flex-end; } /* ─── Form Fields ────────────────────────────────────────── */ .ios-field-group { display: flex; flex-direction: column; gap: 6px; } .ios-field-label { font-size: 12px; font-weight: 700; color: var(--ios-text-2); text-transform: uppercase; letter-spacing: 1px; } .ios-field-input { background: var(--ios-surface-2); border: 1.5px solid var(--ios-border-light); border-radius: var(--ios-r-sm); padding: 11px 12px; color: var(--ios-text-1); font-size: 16px; font-family: var(--ios-font); font-weight: 500; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; } .ios-field-input:focus { border-color: var(--ios-accent); box-shadow: 0 0 0 3px var(--ios-accent-dim); } .ios-field-input::placeholder { color: var(--ios-text-3); font-weight: 400; } .ios-field-select { background: var(--ios-surface-2); border: 1.5px solid var(--ios-border-light); border-radius: var(--ios-r-sm); padding: 11px 12px; color: var(--ios-text-1); font-size: 16px; font-family: var(--ios-font); font-weight: 500; outline: none; width: 100%; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23ADA89F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .ios-field-select:focus { border-color: var(--ios-accent); box-shadow: 0 0 0 3px var(--ios-accent-dim); } .ios-field-select option { background: var(--ios-surface-1); color: var(--ios-text-1); } .ios-field-textarea { width: 100%; font-size: 15px; line-height: 1.6; color: var(--ios-text-1); background: var(--ios-surface-1); border: 1.5px solid var(--ios-accent); border-radius: var(--ios-r-md); padding: 14px 16px; resize: none; overflow: hidden; font-family: var(--ios-font); outline: none; min-height: 120px; } /* ─── Servings Stepper ───────────────────────────────────── */ .ios-stepper { display: flex; align-items: center; background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-sm); overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .ios-stepper-btn { width: 48px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ios-text-2); cursor: pointer; flex-shrink: 0; transition: background .15s; } .ios-stepper-btn:first-child { border-right: 1px solid var(--ios-border); } .ios-stepper-btn:last-child { border-left: 1px solid var(--ios-border); color: var(--ios-accent); } .ios-stepper-btn:active { background: var(--ios-surface-2); } .ios-stepper-value { flex: 1; text-align: center; font-size: 18px; font-weight: 700; color: var(--ios-text-1); } /* ─── Segmented Control ──────────────────────────────────── */ .ios-seg-row { background: var(--ios-surface-2); border: 1px solid var(--ios-border); border-radius: var(--ios-r-md); display: flex; padding: 4px; gap: 4px; } .ios-seg-opt { flex: 1; text-align: center; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--ios-text-2); border-radius: 10px; cursor: pointer; transition: all .15s; } .ios-seg-opt.active { background: var(--ios-accent); color: #fff; box-shadow: 0 2px 8px var(--ios-accent-glow); } /* ─── Category / Tag Chips ───────────────────────────────── */ .ios-cat-chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; } .ios-cat-chip { padding: 6px 12px; border-radius: var(--ios-r-pill); border: 1px solid var(--ios-border-light); font-size: 13px; font-weight: 600; color: var(--ios-text-2); background: var(--ios-surface-2); cursor: pointer; user-select: none; transition: all .15s; } .ios-cat-chip.active { background: var(--ios-accent-dim); color: var(--ios-accent); border-color: var(--ios-accent-glow); } /* ─── Small Badge / Pill ─────────────────────────────────── */ .ios-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--ios-r-pill); font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--ios-accent-dim); color: var(--ios-accent); border: 1px solid var(--ios-accent-glow); } .ios-badge-teal { background: var(--ios-teal-dim); color: var(--ios-teal); border-color: var(--ios-teal-border); } .ios-badge-rose { background: var(--ios-rose-dim); color: var(--ios-rose); } .ios-badge-muted { background: var(--ios-surface-3); color: var(--ios-text-3); border-color: transparent; } /* ─── Amount Pill ────────────────────────────────────────── */ .ios-amount-pill { font-size: 12px; font-weight: 600; color: var(--ios-text-2); background: var(--ios-surface-2); padding: 3px 8px; border-radius: var(--ios-r-pill); flex-shrink: 0; } /* ─── Icon Button (circular) ─────────────────────────────── */ .ios-icon-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--ios-accent-dim); border: none; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; color: var(--ios-accent); flex-shrink: 0; transition: background .15s; } .ios-icon-btn-lg { width: 36px; height: 36px; font-size: 16px; } .ios-icon-btn:active { background: var(--ios-accent-glow); } .ios-icon-btn-danger { background: var(--ios-rose-dim); color: var(--ios-rose); } .ios-icon-btn-danger:active { background: rgba(255,59,48,.20); } /* ─── Buttons ────────────────────────────────────────────── */ .ios-btn-primary { width: 100%; height: 48px; background: linear-gradient(135deg, var(--ios-accent-mid), var(--ios-accent)); border: none; border-radius: var(--ios-r-sm); color: #fff; font-size: 15px; font-weight: 700; font-family: var(--ios-font); cursor: pointer; box-shadow: 0 6px 16px var(--ios-accent-glow); transition: transform .1s; } .ios-btn-primary:active { transform: scale(.98); } .ios-btn-danger { background: linear-gradient(135deg, #E05260, var(--ios-rose)) !important; box-shadow: 0 4px 16px var(--ios-rose-dim) !important; } .ios-btn { padding: 7px 15px; border-radius: 6px; border: 1px solid var(--ios-border); background: var(--ios-surface-3); color: var(--ios-text-1); font-size: 13px; cursor: pointer; transition: all .12s; } .ios-btn:hover { opacity: .85; } .ios-btn.danger { background: var(--ios-rose-dim); border-color: rgba(255,59,48,.3); color: var(--ios-rose); } .ios-btn.danger:hover { background: rgba(255,59,48,.22); } .ios-btn-text { font-size: 13px; font-weight: 600; color: var(--ios-text-3); cursor: pointer; padding: 5px 12px; border-radius: var(--ios-r-pill); background: var(--ios-surface-2); border: 1px solid var(--ios-border-light); transition: color .15s; } .ios-btn-text:hover { color: var(--ios-text-2); } /* ─── Add Row Button ─────────────────────────────────────── */ .ios-btn-add-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; } .ios-btn-add-row-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--ios-accent-dim); border: 1px solid var(--ios-accent-glow); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ios-accent); } .ios-btn-add-row-label { font-size: 14px; font-weight: 600; color: var(--ios-accent); } /* ─── List Box (ingredient-style) ───────────────────────── */ .ios-list-box { background: var(--ios-surface-2); border: 1.5px solid var(--ios-border-light); border-radius: var(--ios-r-sm); overflow: hidden; } .ios-list-row { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--ios-border); gap: 10px; } .ios-list-row:last-child { border-bottom: none; } .ios-list-row-info { flex: 1; min-width: 0; } .ios-list-row-title { font-size: 14px; font-weight: 600; color: var(--ios-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ios-list-row-sub { font-size: 12px; color: var(--ios-text-2); margin-top: 2px; } .ios-list-row-remove { font-size: 16px; color: var(--ios-text-3); cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ios-surface-3); } .ios-list-empty { padding: 14px; font-size: 13px; color: var(--ios-text-3); text-align: center; } /* ─── Autocomplete ───────────────────────────────────────── */ .ios-ac-wrap { position: relative; } .ios-ac-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--ios-surface-1); border: 1px solid var(--ios-border-light); border-radius: var(--ios-r-md); overflow: hidden; z-index: 60; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.12); margin-top: 4px; max-height: 220px; overflow-y: auto; } .ios-ac-results.visible { display: block; } .ios-ac-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .1s; } .ios-ac-item:hover { background: var(--ios-surface-2); } .ios-ac-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ios-ac-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ios-text-1); } .ios-ac-sub { font-size: 11px; color: var(--ios-text-3); } /* ─── Progress Bar ───────────────────────────────────────── */ .ios-progress-wrap { margin: 0 16px 14px; flex-shrink: 0; } .ios-progress-label { display: flex; justify-content: space-between; margin-bottom: 6px; } .ios-progress-label span { font-size: 12px; color: var(--ios-text-2); font-weight: 600; } .ios-progress-label .count { color: var(--ios-accent) !important; } .ios-progress-track { height: 6px; background: var(--ios-surface-2); border-radius: var(--ios-r-pill); overflow: hidden; } .ios-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ios-teal), #40C984); border-radius: var(--ios-r-pill); transition: width .4s; } /* ─── Department / Section Header ────────────────────────── */ .ios-dept-section { background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-md); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin-bottom: 10px; flex-shrink: 0; position: relative; } .ios-dept-header { display: flex; align-items: center; gap: 8px; padding: 7px 14px; } .ios-dept-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; } .ios-dept-count { font-size: 11px; font-weight: 600; color: var(--ios-text-3); margin-left: auto; } /* ─── Shop Row (checklist inside dept section) ───────────── */ .ios-shop-row { display: flex; align-items: center; padding: 10px 13px 10px 14px; gap: 11px; border-top: 1px solid var(--ios-border); cursor: pointer; transition: background .15s; } .ios-shop-row:hover { background: var(--ios-surface-2); } .ios-shop-row.checked { background: transparent; } .ios-shop-name-wrap { flex: 1; min-width: 0; } .ios-shop-name { font-size: 14px; font-weight: 500; color: var(--ios-text-1); } .ios-shop-row.checked .ios-shop-name { color: var(--ios-text-3); } .ios-shop-amount { font-size: 12px; color: var(--ios-text-3); } .ios-shop-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ios-surface-3); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; transition: all .2s; } .ios-shop-row.checked .ios-shop-check { background: var(--ios-teal); border-color: var(--ios-teal); color: #fff; } .ios-shop-check i { font-size: 11px; color: #fff; display: none; } .ios-shop-row.checked .ios-shop-check i { display: block; } /* Source meal pills under shop item */ .ios-meal-pills { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; } .ios-meal-pill { font-size: 10px; font-weight: 600; color: var(--ios-accent); background: var(--ios-accent-dim); border: 1px solid var(--ios-accent-glow); border-radius: var(--ios-r-pill); padding: 1px 6px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } /* ─── Dropdown Menu (card context) ──────────────────────── */ .ios-menu-btn { background: none; border: none; cursor: pointer; padding: 6px 4px; color: var(--ios-text-3); border-radius: var(--ios-r-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; transition: background .15s, color .15s; outline: none; } .ios-menu-btn:hover, .ios-menu-btn:active { background: var(--ios-surface-2); color: var(--ios-text-1); } .ios-menu-dropdown { position: absolute; right: 10px; top: calc(100% + 2px); z-index: 10; background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-md); box-shadow: 0 4px 20px rgba(0,0,0,.18); display: none; flex-direction: column; min-width: 130px; overflow: hidden; } .ios-card.menu-open .ios-menu-dropdown { display: flex; } .ios-menu-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ios-text-1); text-align: left; transition: background .1s; width: 100%; } .ios-menu-item:hover, .ios-menu-item:active { background: var(--ios-surface-2); } .ios-menu-item.delete { color: var(--ios-rose); } /* ─── Planner Day Chips ──────────────────────────────────── */ @keyframes ios-planner-chip-pop { 0% { transform: scale(0.7); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } } .ios-planner-days { display: flex; gap: 6px; padding: 4px 12px 14px; flex-shrink: 0; } .ios-planner-day-chip { flex: 1; padding: 7px 4px 5px; border-radius: var(--ios-r-pill); font-size: 12px; font-weight: 600; background: transparent; border: 1px solid transparent; color: var(--ios-text-1); cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; } .ios-planner-day-chip.today { color: var(--ios-accent); } .ios-planner-day-chip.active { background: var(--ios-accent); color: #fff; border-color: var(--ios-accent); box-shadow: 0 2px 8px var(--ios-accent-glow); animation: ios-planner-chip-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .ios-planner-day-chip .ios-day-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; flex-shrink: 0; transition: background .15s; } .ios-planner-day-chip.has-item .ios-day-dot { background: var(--ios-accent); } .ios-planner-day-chip.active.has-item .ios-day-dot { background: #000; } /* ─── Planner Slot ───────────────────────────────────────── */ .ios-planner-slot { background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-md); overflow: hidden; } .ios-planner-slot-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ios-border-light); } .ios-planner-slot-icon { font-size: 15px; } .ios-planner-slot-name { font-size: 13px; font-weight: 600; color: var(--ios-text-1); flex: 1; } .ios-planner-slot-count { font-size: 11px; font-weight: 700; color: var(--ios-text-3); background: var(--ios-surface-3); border-radius: var(--ios-r-pill); padding: 2px 8px; } .ios-planner-slot-body { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 50px; } /* ─── Planner Chips ──────────────────────────────────────── */ .ios-planner-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ios-r-pill); padding: 6px 8px; font-size: 13px; font-weight: 600; cursor: default; } .ios-planner-chip-x { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 9px; cursor: pointer; flex-shrink: 0; opacity: .85; transition: opacity .15s; } .ios-planner-chip-x:active { opacity: .5; } .ios-planner-add-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: var(--ios-r-pill); background: transparent; border: 1.5px dashed var(--ios-border); font-size: 13px; font-weight: 600; color: var(--ios-text-3); cursor: pointer; transition: all .15s; } .ios-planner-add-btn:active { background: var(--ios-surface-3); border-style: solid; } /* ─── Theme Swatches ─────────────────────────────────────── */ .ios-swatch-scroll { display: flex; gap: 14px; padding: 4px 16px 14px; overflow-x: auto; flex-shrink: 0; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ios-swatch-scroll::-webkit-scrollbar { display: none; } .ios-theme-swatch { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; cursor: pointer; position: relative; background: var(--swatch-color); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; transition: transform .15s cubic-bezier(0.175, 0.885, 0.32, 1.275); scroll-snap-align: start; } .ios-theme-swatch:active { transform: scale(0.92); } .ios-theme-swatch.active { border: 2px solid var(--ios-surface-1); box-shadow: 0 0 0 2px var(--swatch-color); transform: scale(1.05); } .ios-theme-swatch.active::after { content: "✓"; color: #fff; font-weight: 800; font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } .ios-theme-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 0; padding: 16px 8px 24px; } .ios-theme-color-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px; cursor: pointer; border-radius: var(--ios-r-md); transition: background .12s; -webkit-tap-highlight-color: transparent; } .ios-theme-color-cell:active { background: var(--ios-surface-3); } .ios-theme-color-cell .ios-theme-swatch { width: 48px; height: 48px; font-size: 18px; scroll-snap-align: unset; } .ios-theme-color-name { font-size: 11px; font-weight: 500; color: var(--ios-text-3); } /* ─── Theme Selector Tabs ────────────────────────────────── */ .ios-theme-tab { font-size: 13px; font-weight: 500; color: var(--ios-text-2); background: var(--ios-surface-3); padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all .15s; } .ios-theme-tab.active { background: var(--ios-surface-1); color: var(--ios-text-1); box-shadow: 0 2px 5px rgba(0,0,0,0.08); font-weight: 600; } /* ─── Collapse / Drawer Panel ────────────────────────────── */ .ios-drawer-panel { flex-shrink: 0; background: var(--ios-surface-1); border-top: 1px solid var(--ios-border); border-radius: var(--ios-r-lg) var(--ios-r-lg) 0 0; overflow: hidden; display: flex; flex-direction: column; height: 52px; transition: height .35s cubic-bezier(.4,0,.2,1); box-shadow: 0 -6px 24px rgba(0,0,0,.07); } .ios-drawer-panel.empty { display: none; } .ios-drawer-panel.expanded { height: 75dvh; } .ios-drawer-handle { display: flex; align-items: center; gap: 9px; padding: 0 16px; height: 52px; flex-shrink: 0; cursor: pointer; user-select: none; position: relative; } .ios-handle-nub { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 32px; height: 4px; background: var(--ios-surface-3); border-radius: 2px; pointer-events: none; } .ios-drawer-icon { font-size: 15px; color: var(--ios-accent); flex-shrink: 0; } .ios-drawer-title { font-size: 13px; font-weight: 700; color: var(--ios-text-2); flex: 1; } .ios-drawer-badge { background: var(--ios-accent-dim); color: var(--ios-accent); border: 1px solid var(--ios-accent-glow); border-radius: var(--ios-r-pill); padding: 2px 8px; font-size: 11px; font-weight: 700; flex-shrink: 0; } .ios-drawer-list { flex: 1; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 6px; } .ios-drawer-list::-webkit-scrollbar { display: none; } /* ─── Sync / Pull-to-Refresh ─────────────────────────────── */ .ios-pull-refresh { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%) translateY(-52px); width: 36px; height: 36px; border-radius: 50%; background: var(--ios-surface-1); border: 1px solid var(--ios-border); box-shadow: 0 2px 10px rgba(0,0,0,0.10); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ios-text-2); z-index: 998; pointer-events: none; will-change: transform; } .ios-pull-refresh.spinning { color: var(--ios-accent); } .ios-pull-refresh.spinning i { animation: ios-pr-spin 0.7s linear infinite; } @keyframes ios-pr-spin { to { transform: rotate(360deg); } } .ios-sync-status { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%) translateY(-56px); display: flex; align-items: center; gap: 5px; background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-pill); padding: 5px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.1px; z-index: 999; box-shadow: 0 2px 10px rgba(0,0,0,0.10); transition: transform 0.3s cubic-bezier(.4,0,.2,1); pointer-events: none; } .ios-sync-status.visible { transform: translateX(-50%) translateY(0); } .ios-sync-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .ios-sync-status.offline { color: var(--ios-rose); } .ios-sync-status.offline .ios-sync-dot { background: var(--ios-rose); } .ios-sync-status.synced { color: var(--ios-accent); } .ios-sync-status.synced .ios-sync-dot { background: var(--ios-accent); } /* ─── Toast ──────────────────────────────────────────────── */ .ios-toast-container { position: fixed; bottom: calc(72px + var(--ios-safe-bottom) + 8px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 100; pointer-events: none; } .ios-toast { background: var(--ios-surface-1); color: var(--ios-text-1); font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: var(--ios-r-pill); border: 1px solid var(--ios-border-light); box-shadow: 0 4px 20px rgba(0,0,0,0.12); opacity: 0; transform: translateY(20px); transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; } .ios-toast.visible { opacity: 1; transform: translateY(0); } .ios-toast.err { background: var(--ios-rose-dim); border-color: rgba(255,59,48,.3); color: var(--ios-rose); } /* ─── Empty State ────────────────────────────────────────── */ .ios-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; text-align: center; } .ios-empty-icon { font-size: 42px; opacity: .25; } .ios-empty-text { color: var(--ios-text-3); font-size: 14px; font-weight: 500; line-height: 1.6; white-space: pre-line; } /* ─── Recipe Row ─────────────────────────────────────────── */ .ios-recipe-row { background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-md); padding: 14px 14px 14px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background .15s; } .ios-recipe-row:active { background: var(--ios-surface-3); } .ios-recipe-row-body { flex: 1; min-width: 0; } .ios-recipe-row-name { font-size: 16px; font-weight: 600; color: var(--ios-text-1); } .ios-recipe-row-preview { font-size: 13px; color: var(--ios-text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ios-recipe-row-empty { font-size: 13px; color: var(--ios-text-3); margin-top: 4px; font-style: italic; } .ios-recipe-chevron { font-size: 14px; color: var(--ios-text-3); flex-shrink: 0; } .ios-section-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ios-text-3); margin: 20px 0 8px; } .ios-section-label:first-child { margin-top: 0; } /* ─── Notes / Rich Text Block ────────────────────────────── */ .ios-notes-block { font-size: 15px; line-height: 1.6; color: var(--ios-text-1); white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; background: var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: var(--ios-r-md); padding: 14px 16px; } .ios-notes-empty { font-size: 15px; color: var(--ios-text-3); font-style: italic; } /* ─── Loading Spinner ────────────────────────────────────── */ .ios-spinner { width: 30px; height: 30px; border: 2px solid var(--ios-border); border-top-color: var(--ios-accent); border-radius: 50%; animation: ios-spin .65s linear infinite; } @keyframes ios-spin { to { transform: rotate(360deg); } } .ios-loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 14px; } /* ─── Color Dot ──────────────────────────────────────────── */ .ios-color-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ─── Invite Code Display ────────────────────────────────── */ .ios-invite-code { font-size: 32px; font-weight: 800; letter-spacing: 6px; color: var(--ios-teal); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ─── Utility ────────────────────────────────────────────── */ .ios-hidden { display: none !important; } .ios-text-accent { color: var(--ios-accent); } .ios-text-rose { color: var(--ios-rose); } .ios-text-teal { color: var(--ios-teal); } .ios-text-muted { color: var(--ios-text-3); } .ios-divider { height: 0.5px; background: var(--ios-border); margin: 0; }