/* ─────────────────────────────────────────────────────────────────────────── mobile-native.css — native-shell mobile polish for the Leads Dashboard. Card p93g5FJt (mobile pass). EVERY rule is scoped under `html.native`, a class added (pre-paint, in index.html ) only inside the Capacitor app. In a browser the class is absent, so the entire desktop/web UI is byte-for-byte unchanged — zero production risk. Patterns per /tailwind-capacitor + /webapp-to-capacitor (safe areas, 44px targets, bottom tab bar, native scroll). Direction-agnostic so Hebrew RTL is preserved. ─────────────────────────────────────────────────────────────────────────── */ /* ── Global native feel ──────────────────────────────────────────────────── */ html.native, html.native body { height: 100%; -webkit-text-size-adjust: 100%; overscroll-behavior: none; /* Card CWhLGFFt: kill the WHITE margins reported top & bottom in the native app. The web root/body background is `var(--bg)` → `var(--canvas)` with NO literal fallback (index.html); when the DS token fails to resolve in the native webview — the exact failure mode card Tsr8jyv1 fixed for OTHER tokens (black components) — the background degrades to the html default, WHITE, which shows in the status-bar / home-indicator safe-area bands and during overscroll. `html.native` itself set NO background at all, so the root element painted white behind the sticky topbar / fixed tab bar. Pin BOTH the native root and body to the DS canvas with a light literal fallback (#F4EFE6 = --canvas / capacitor.config.ts backgroundColor), the mirror of Tsr8jyv1's "a failed token must degrade to the light DS, never an off-theme colour". Native-scoped → zero web risk. */ background-color: var(--canvas, #F4EFE6); } html.native body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* keep selection/zoom where it matters */ html.native input, html.native textarea, html.native select, html.native [contenteditable] { -webkit-user-select: text; user-select: text; } /* ── App shell becomes a full-height flex column ─────────────────────────── */ html.native .app-shell.active { display: flex !important; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* ── Top bar: compact, safe-area aware, single clean row ─────────────────── */ html.native header.topbar { padding: 8px 14px; padding-top: calc(env(safe-area-inset-top) + 8px); padding-left: calc(env(safe-area-inset-left) + 14px); padding-right: calc(env(safe-area-inset-right) + 14px); display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 50; /* NOTE: do NOT use backdrop-filter/filter/transform/will-change here — any of those would make the topbar the containing block for its position:fixed descendants (the bottom tab bar + the FAB live inside this header in the DOM), pinning them to the header instead of the viewport. Solid bg only. Card Tsr8jyv1: light DS literals as var() fallbacks — if a token ever fails to resolve in the native webview, the surface stays light, never black. */ background: var(--card, #FBF8F1); border-bottom: 1px solid var(--border, #E2DAC8); } html.native header.topbar .brand { font-size: 16px; font-weight: 800; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Condense the action cluster; drop desktop-only chrome on the small screen */ html.native header.topbar .topbar-actions { flex: 0 0 auto; gap: 8px !important; } html.native header.topbar #userEmail, html.native header.topbar #userRoleBadge { display: none !important; } /* The big "+ ליד חדש" pill leaves the bar — it becomes a FAB (below). */ html.native header.topbar .add-lead-btn { display: none !important; } /* Remaining action buttons: real 44px tap targets */ html.native header.topbar .topbar-actions button, html.native header.topbar .topbar-actions select { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; } /* ── Navigation → fixed bottom tab bar (HIG / Material) ──────────────────── */ html.native header.topbar nav.main-nav { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; order: initial; display: flex; gap: 0; /* Card Tsr8jyv1: solid light background FIRST — on WebViews without color-mix() (Android WebView <111 / iOS <16.2) the color-mix declaration is dropped entirely, the bar went transparent, and the black shell behind the webview showed through as a solid black tab bar. Progressive enhancement: supported engines take the translucent blur mix below. */ background: var(--card, #FBF8F1); background: color-mix(in srgb, var(--card, #FBF8F1) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--border, #E2DAC8); padding-bottom: env(safe-area-inset-bottom); z-index: 60; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html.native header.topbar nav.main-nav::-webkit-scrollbar { display: none; } html.native header.topbar nav.main-nav button { flex: 1 0 auto; min-width: 64px; min-height: 54px; padding: 7px 6px; border: none; background: transparent; color: var(--muted, #6B7E85); font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; white-space: nowrap; border-top: 2px solid transparent; border-radius: 0; cursor: pointer; } html.native header.topbar nav.main-nav button[aria-current="page"] { color: var(--primary, #0E7C96); border-top-color: var(--primary, #0E7C96); /* Tsr8jyv1: sea-soft fallback first — engines without color-mix keep a light tint. */ background: var(--sea-soft, #DCEDF0); background: color-mix(in srgb, var(--primary, #0E7C96) 10%, transparent); } html.native header.topbar nav.main-nav button:active { background: var(--sea-soft, #DCEDF0); background: color-mix(in srgb, var(--primary, #0E7C96) 16%, transparent); } /* ── Main scroll region clears the bottom tab bar ────────────────────────── */ html.native main { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; max-width: none !important; margin: 0 !important; padding: 14px !important; padding-left: calc(env(safe-area-inset-left) + 14px) !important; padding-right: calc(env(safe-area-inset-right) + 14px) !important; padding-bottom: calc(env(safe-area-inset-bottom) + 78px) !important; } /* ── Floating "+ ליד חדש" action button (FAB) ────────────────────────────── */ html.native #addLeadBtn { display: inline-flex !important; position: fixed; left: calc(env(safe-area-inset-left) + 18px); /* RTL action corner */ bottom: calc(env(safe-area-inset-bottom) + 70px); width: 58px; height: 58px; padding: 0; border-radius: 50%; background: var(--primary, #0E7C96); color: #fff; border: none; align-items: center; justify-content: center; font-size: 0; /* hide the text label */ /* Tsr8jyv1: rgba fallback first — engines without color-mix keep a sane shadow. */ box-shadow: 0 8px 24px var(--brand-ring, rgba(14, 124, 150, 0.30)), 0 2px 6px rgba(0,0,0,.35); box-shadow: 0 8px 24px color-mix(in srgb, var(--primary, #0E7C96) 55%, transparent), 0 2px 6px rgba(0,0,0,.35); z-index: 70; cursor: pointer; } html.native #addLeadBtn::before { content: "+"; font-size: 30px; font-weight: 400; line-height: 1; } html.native #addLeadBtn:active { transform: scale(.94); } /* ── Stat cards: roomier, rounded, 2-up ──────────────────────────────────── */ html.native .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-bottom: 18px !important; } html.native .stat-card { border-radius: 16px; padding: 16px 18px; } html.native .stat-card .value { font-size: 30px; } /* ── Search + heat filter: full width, no iOS zoom, scrollable chips ─────── */ html.native .lead-controls { gap: 10px; } html.native .lead-search-input { width: 100%; min-height: 46px; font-size: 16px; /* >=16px stops iOS focus-zoom */ border-radius: 14px; } html.native .lead-filter-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; scrollbar-width: none; padding-bottom: 2px; } html.native .lead-filter-chips::-webkit-scrollbar { display: none; } html.native .lead-filter-chip { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 14px; } /* ── Lead list rows: comfortable tap targets ─────────────────────────────── */ html.native .leads-list { gap: 12px; } html.native .leads-list > * { border-radius: 16px; } /* ── Generic: every interactive control reaches the 44px target ──────────── */ html.native button, html.native [role="button"], html.native a.btn { touch-action: manipulation; } /* ═══════════════════════════════════════════════════════════════════════════ PASS 2 — overlays become native bottom sheets (card p93g5FJt). ═══════════════════════════════════════════════════════════════════════════ */ /* ── New-lead (.nudge-overlay) → slide-up bottom sheet ───────────────────── */ html.native .nudge-overlay { align-items: flex-end; justify-content: stretch; padding: 0; } html.native .nudge-card { max-width: 100% !important; width: 100%; margin: 0; border-radius: 22px 22px 0 0; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom) + 18px); animation: sheet-up .26s cubic-bezier(.22,.61,.36,1); } html.native .nudge-card::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--border, #E2DAC8); margin: 2px auto 14px; } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ── Lead drawer (.drawer) → full-height bottom sheet (slide UP, not sideways) */ html.native .drawer { top: auto; right: 0; left: 0; width: 100% !important; height: 94dvh; max-height: 94dvh; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.45); transform: translateY(100%); } html.native .drawer.open { transform: translateY(0); } html.native .drawer::before { content: ""; flex: 0 0 auto; width: 40px; height: 5px; border-radius: 3px; background: var(--border, #E2DAC8); margin: 8px auto 2px; } html.native .drawer-head { border-radius: 0; padding-top: 8px; } html.native .drawer-body { padding-bottom: calc(env(safe-area-inset-bottom) + 28px) !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Drawer tabs: horizontal scroll, 44px targets */ html.native .drawer-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html.native .drawer-tabs::-webkit-scrollbar { display: none; } html.native .drawer-tab { flex: 0 0 auto; min-height: 44px; } /* ── Form fields in sheets: 16px (no iOS focus-zoom) + 44px targets ──────── */ html.native .nudge-card input, html.native .nudge-card select, html.native .nudge-card textarea, html.native .drawer-edit-form input, html.native .drawer-edit-form select, html.native .drawer-edit-form textarea { font-size: 16px !important; min-height: 44px; } /* ── Top bar: shrink the long invite label to an icon to free space ──────── */ html.native #inviteBtn { font-size: 0 !important; padding: 0 !important; width: 40px; min-width: 40px; } html.native #inviteBtn::before { content: "➕"; font-size: 17px; } /* ═══════════════════════════════════════════════════════════════════════════ PASS 3 — sheet inputs · top-bar tidy · swipe-to-delete (card p93g5FJt) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Theme the sheet form fields to the LIGHT Sand·Sea·Claude DS ─────────── Card Tsr8jyv1: these previously read `var(--ds-bg-primary, #0a0a14)` etc. The --ds-* tokens live ONLY in packages/design-system/tokens.css, which the app never loads — so in the native webview every field fell back to the hardcoded DARK values (#0a0a14 canvas, #e4e4e7 text) and rendered as black components on the otherwise-light UI. Repoint to the runtime vars index.html actually defines (--card/--text/--border/--muted), which map onto the light design-system tokens. Keeps the whole app single-theme light. */ html.native .nudge-card input, html.native .nudge-card select, html.native .nudge-card textarea, html.native .drawer-edit-form input, html.native .drawer-edit-form select, html.native .drawer-edit-form textarea, html.native .share-form input, html.native .share-form select, html.native .share-form textarea, html.native .ai-input-row textarea { /* Tsr8jyv1 defensive layer: LIGHT literals as fallbacks — a token that fails to resolve in the native webview must degrade to the light DS, not black. */ background: var(--card, #FBF8F1) !important; color: var(--text, #16303A) !important; border: 1px solid var(--border, #E2DAC8) !important; border-radius: 12px !important; -webkit-appearance: none; appearance: none; } html.native .nudge-card input::placeholder, html.native .nudge-card textarea::placeholder, html.native .drawer-edit-form input::placeholder, html.native .drawer-edit-form textarea::placeholder { color: var(--muted, #6B7E85) !important; } html.native .nudge-card input:focus, html.native .nudge-card select:focus, html.native .nudge-card textarea:focus, html.native .drawer-edit-form input:focus, html.native .drawer-edit-form select:focus, html.native .drawer-edit-form textarea:focus { border-color: var(--primary, #0E7C96) !important; /* Tsr8jyv1: rgba fallback first — engines without color-mix keep a focus ring. */ box-shadow: 0 0 0 3px var(--brand-ring, rgba(14, 124, 150, 0.30)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0E7C96) 22%, transparent) !important; outline: none; } /* selects need an explicit chevron once -webkit-appearance is removed */ html.native .nudge-card select, html.native .drawer-edit-form select { background-image: linear-gradient(45deg, transparent 50%, var(--muted, #6B7E85) 50%), linear-gradient(135deg, var(--muted, #6B7E85) 50%, transparent 50%) !important; background-position: calc(0% + 14px) center, calc(0% + 19px) center !important; /* RTL: chevron on the left */ background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; padding-left: 32px !important; } /* ── Top bar tidy: consistent 40px icon-buttons, compact workspace select ── */ html.native header.topbar .topbar-actions { gap: 6px !important; } html.native header.topbar #workspaceSwitcher { max-width: 116px; min-height: 40px !important; font-size: 13px !important; padding: 4px 8px !important; } html.native header.topbar #langToggle { min-width: 40px; height: 40px; } html.native header.topbar #signOutBtn { font-size: 0 !important; /* swap the "יציאה" label for an icon */ width: 40px; min-width: 40px; height: 40px; padding: 0 !important; border-radius: 10px !important; } html.native header.topbar #signOutBtn::before { content: "⎋"; font-size: 18px; } /* ── Swipe-to-delete on lead cards (native only; markup added in buildLeadCard) */ html.native .lead-card.swipeable { position: relative; overflow: hidden; padding: 0 !important; /* padding moves to .lc-content */ } html.native .lead-card.swipeable .lc-content { position: relative; z-index: 2; background: var(--card, #FBF8F1); padding: 14px 16px; transition: transform .22s cubic-bezier(.22,.61,.36,1); will-change: transform; } html.native .lead-card.swipeable.swiping .lc-content { transition: none; } html.native .lead-card.swipeable .lc-del { position: absolute; top: 0; bottom: 0; left: 0; /* RTL trailing edge */ width: 80px; z-index: 1; border: none; background: var(--hot, #ef4444); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════════ PASS 3.1 — new-lead sheet: full-height sticky layout + kill h-overflow (p93g5FJt) Fixes Michal's "form ui is awful" + "should match screen view / not scroll". ═══════════════════════════════════════════════════════════════════════════ */ /* Sheet = fixed-height flex column: handle + title pinned, fields scroll, actions pinned. */ html.native #newLeadOverlay .nudge-card { height: 94dvh; max-height: 94dvh; display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; /* the sheet never scrolls; the field area does */ } html.native #newLeadOverlay .nudge-card::before { margin: 10px auto 8px; } /* grab handle */ html.native #newLeadOverlay .nudge-card > h3 { flex: 0 0 auto; margin: 0; padding: 0 18px 12px; border-bottom: 1px solid var(--border, #E2DAC8); } html.native #newLeadOverlay .nudge-card > form.drawer-edit-form { flex: 1 1 auto; min-height: 0; /* lets the flex child actually scroll */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 18px 8px; } /* Action buttons → sticky footer above the safe area */ html.native #newLeadOverlay .nudge-actions { position: sticky; bottom: 0; margin: 8px -18px 0; padding: 12px 18px calc(env(safe-area-inset-bottom) + 12px); background: var(--card, #FBF8F1); border-top: 1px solid var(--border, #E2DAC8); display: flex; gap: 10px; } html.native #newLeadOverlay .nudge-actions button { flex: 1 1 auto; min-height: 48px; } /* ── Kill horizontal overflow: every control fits the sheet width ─────────── */ html.native .nudge-card, html.native .nudge-card *, html.native .drawer-edit-form, html.native .drawer-edit-form * { box-sizing: border-box; } html.native .drawer-edit-form input, html.native .drawer-edit-form select, html.native .drawer-edit-form textarea { width: 100%; max-width: 100%; } /* the שלב / חום two-up row: columns must be allowed to shrink (min-width:0) */ html.native .drawer-edit-form .row { flex-wrap: nowrap; gap: 10px; } html.native .drawer-edit-form .row > div { min-width: 0; flex: 1 1 0 !important; } /* date + file "input-with-clear" rows fit too */ html.native .drawer-edit-form .input-with-clear { width: 100%; min-width: 0; } html.native .drawer-edit-form .input-with-clear input { min-width: 0; } /* ═══════════════════════════════════════════════════════════════════════════ PASS 4 — device hardening: keyboard lift · a11y focus · offline banner (p93g5FJt) `--keyboard-height` is published by native-ux.js (keyboardWillShow/Hide). It defaults to 0px so every calc() below resolves on the web AND before the first keyboard event. capacitor.config.ts already sets Keyboard.resize:'native'; the extra bottom-padding keeps the FOCUSED composer/footer fully above the keyboard (iOS still lets a position:sticky/fixed bar slide under it on resize:'native'). ═══════════════════════════════════════════════════════════════════════════ */ :root { --keyboard-height: 0px; } /* AI chat composer: keep the input row above the keyboard. The form is the last child of the scrolling .drawer-body, so padding-bottom reserves the keyboard's space and the focused textarea stays in view. */ html.native .ai-input-row { position: sticky; bottom: 0; background: var(--card, #FBF8F1); padding-bottom: calc(env(safe-area-inset-bottom) + var(--keyboard-height)); transition: padding-bottom .18s ease-out; } /* The drawer body itself gains keyboard clearance so the sticky composer never overlaps the last messages while typing. */ html.native .drawer.open .drawer-body { scroll-padding-bottom: var(--keyboard-height); } /* New-lead bottom sheet: lift the sticky action footer above the keyboard so "צור ליד" stays tappable while a field is focused. */ html.native #newLeadOverlay .nudge-actions { padding-bottom: calc(env(safe-area-inset-bottom) + 12px + var(--keyboard-height)); transition: padding-bottom .18s ease-out; } /* ── A11y: never strip a focus ring without a replacement (WCAG 2.4.7). The web textarea focus rule sets `outline:none`; restore a visible, high- contrast focus indicator for keyboard users on every native interactive control. :focus-visible keeps it keyboard-only (no ring on touch tap). */ html.native :focus-visible { outline: 2px solid var(--primary, #2C7A8C); outline-offset: 2px; border-radius: 6px; } html.native .ai-input-row textarea:focus-visible, html.native .ai-input-row button:focus-visible, html.native .ai-attach-btn:focus-visible { outline: 2px solid var(--primary, #2C7A8C); outline-offset: 2px; } /* ── A11y: enforce the 44×44 minimum tap target on the AI composer controls. The web rules give the textarea min-height:44px but the send/attach buttons can render shorter; pin both to 44px square so VoiceOver/TalkBack users (and anyone) get a reliable target. */ html.native .ai-input-row button, html.native .ai-input-row .ai-attach-btn { min-height: 44px; min-width: 44px; align-self: stretch; } /* ── A11y: respect prefers-reduced-motion across the native polish. */ @media (prefers-reduced-motion: reduce) { html.native .nudge-card, html.native .drawer, html.native .lead-card.swipeable .lc-content, html.native .ai-input-row, html.native #newLeadOverlay .nudge-actions { animation: none !important; transition: none !important; } } /* ── Offline banner (native-ux.js renderOfflineBanner). Fixed, top-of-screen, safe-area aware, high-contrast warm-alert. role=status + aria-live=polite on the element announces connectivity changes to screen readers. ≥4.5:1 contrast: #ffffff on #b4232a (~6.0:1). Shown on the web too if the browser goes offline. */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: #b4232a; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 600; text-align: center; padding: 10px 14px; padding-top: calc(env(safe-area-inset-top) + 10px); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .offline-banner[hidden] { display: none; } .offline-banner::before { content: "⚠ "; }