/* ============================================ DENTAL CLINIC MANAGEMENT - GLOBAL STYLES RTL Arabic interface with 3 theme options ============================================ */ /* ============================================================ Modirify Design Tokens (Phase 3 U-1) ============================================================ Foundation tokens — type scale, z-index scale, focus rings, glass surfaces, hover-lift. Loaded BEFORE the main styles.css via an @import at the top of styles.css so every theme block and component class can reference these values without worrying about cascade order. What IS in this file: §1 Type scale — 6 steps, Hybrid Linear+Stripe (V-1/2, ADR-048) §2 Z-index scale — 8 semantic layers (replaces 1..3000 chaos) §3 Focus tokens — unified accent ring (2 strengths) §4 Glass tokens — single source of truth, auto-dark (A1) §5 Hover-lift — only 3 allowed values (-1 / -2 / -3) §6 Density — placeholder for U-10 (decision C2) §7 Shimmer + tint — V-1/5 (ADR-048) accent-tinted skeleton + Stripe hero-card soft gradient base What is NOT here (lives in styles.css, intentionally untouched): • --space-1..12, --duration-*, --ease-* (already tokenized) • --bg-*, --text-primary/-secondary/-tertiary, --border-*, --accent-* (theme palette) • --success/-soft, --warning/-soft, ... (status palette) • --radius-*, --shadow-* (per-theme already) See DECISIONS.md ADR-017 for the U-1 design rationale and ADR-048 for the V-1/2 Hybrid 6-size pivot. ============================================================ */ :root { /* ────────────────────────────────────────────────────────── §1 Type scale (V-1/2, ADR-048) — Hybrid 6 sizes Linear-clarity's 5 sizes (11/13/15/22/36) + Stripe-density's --text-base (14px) for data-dense surfaces (Billing / Finance / Analytics tables). Replaces the U-1 10-token scale. Use guide: --text-xs (11px) chips, badges, metadata --text-sm (13px) body — default --text-base (14px) data-dense ONLY (tables in Billing/Finance/Analytics) --text-md (15px) card titles, primary text, buttons, inputs --text-title (22px) page titles, KPI value (compact) --text-display (36px) hero numbers (dashboard greeting, metric tile value) Sizing W0 rename (2026-07-08): the top two scale steps were named --text-lg / --text-xl, which COLLIDE by name with the .text-lg (16px) / .text-xl (20px) utility classes in styles.css — same name, different value, a documented footgun. Renamed the TOKENS to --text-title / --text-display (semantic, no numeric suffix) so a token can never be confused with a utility class again. Values unchanged (22 / 36). Dropped vs U-1: --text-2xs (10px) absorbed into --text-xs; intermediate --text-lg (16) / --text-xl (18) / --text-2xl (22) / --text-3xl (28) / --text-4xl (36) compressed into the 6-step ladder. The single styles.css consumer of the old --text-xl (.empty-state.v2.is-lg title, was 18px) is remapped to the new --text-title (22px) — semantic match for a title. Line-heights stay on the existing 4-step --leading-* scale (tight/snug/normal/relaxed = 1.2/1.35/1.5/1.7) — paired by screen-author at touch point, not auto-paired here. ────────────────────────────────────────────────────────── */ /* ADR-291 W2: two steps the scale was MISSING and the app leaned on anyway. 12px is the single most-used size in the product (112 declarations) and had no token at all; 10px carries counters and table micro-labels (38). A scale that omits the value its own app reaches for most is a scale nobody can follow — so the scale was corrected rather than 150 places being dragged onto a step that never fit them. Both are pure renames: not one pixel moved. Deliberately NOT added: 12.5 / 11.5 / 10.5 / 13.5. Those are eyeballed, not chosen, and they snap onto whole steps in a separate measured pass. */ --text-micro: 10px; --text-xs: 11px; --text-meta: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-title: 22px; --text-display: 36px; /* Line-heights paired with the type scale */ --leading-tight: 1.2; /* hero titles, large numbers */ --leading-snug: 1.35; /* card titles, section heads */ --leading-normal: 1.5; /* body text */ --leading-relaxed: 1.7; /* long-form descriptions, modal sub */ /* ────────────────────────────────────────────────────────── §2 Z-index scale — 8 semantic layers Order top-to-bottom: tooltips > toasts > drawers > modals > dropdowns > topbar > sticky > base. The boot splash uses --z-max so app overlays never sit on top of it. ────────────────────────────────────────────────────────── */ --z-base: 1; --z-sticky: 10; --z-topbar: 50; --z-dropdown: 100; /* notifications, theme picker, date filter */ --z-modal-backdrop: 200; --z-modal: 210; --z-drawer: 300; --z-toast: 500; --z-tooltip: 700; --z-max: 999; /* boot splash — never go past */ /* ────────────────────────────────────────────────────────── §3 Focus tokens — unified accent ring Use --ring-shadow for buttons / interactive cards (3px, 35%). Use --ring-shadow-soft for inputs / inline targets (3px, 22%). Replaces five inline copies of "0 0 0 3px color-mix(... accent 22%, transparent)". ────────────────────────────────────────────────────────── */ --ring-width: 3px; --ring-color: color-mix(in srgb, var(--accent) 35%, transparent); --ring-color-soft: color-mix(in srgb, var(--accent) 22%, transparent); --ring-shadow: 0 0 0 var(--ring-width) var(--ring-color); --ring-shadow-soft: 0 0 0 var(--ring-width) var(--ring-color-soft); /* ────────────────────────────────────────────────────────── §4 Glass tokens (A1) — single source of truth Light-themed surfaces use --glass-bg / --glass-border / --glass-shadow. Dark themes (luxe, midnight) override these in their own theme block via auto-switch below. Replaces the four-way duplication of ".modal", ".gm-box", ".accounting-modal", ".mk2-drawer". ────────────────────────────────────────────────────────── */ --glass-bg: rgba(255, 255, 255, 0.88); --glass-blur: 24px; --glass-blur-sm: 10px; --glass-border: rgba(255, 255, 255, 0.6); --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08); /* Dark-theme variants — applied below for luxe + midnight */ --glass-bg-dark: rgba(13, 18, 38, 0.87); --glass-border-dark: rgba(255, 255, 255, 0.08); --glass-shadow-dark: 0 24px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.35); /* ────────────────────────────────────────────────────────── §5 Hover-lift — only 3 allowed values --lift-1: subtle (chips, list rows, table rows). --lift-2: standard (cards, KPI tiles, nav items). --lift-3: prominent (metric tiles, feature cards). Magic translateY values outside these three are a smell. ────────────────────────────────────────────────────────── */ --lift-1: -1px; --lift-2: -2px; --lift-3: -3px; /* §6 Density (C2) — REMOVED 2026-07-28. `--density-scale` sat at 1 with no consumer for the whole life of the codebase, waiting on a "U-10" that never shipped, while the toggle it was reserved for stamped `data-density` on for zero CSS rules to read. A placeholder that outlives its plan is just a claim the app makes about itself and does not keep. */ /* ────────────────────────────────────────────────────────── §7 Shimmer + tint (V-1/5, ADR-048) — Hybrid Stripe layer --shimmer-base — base color of the skeleton gradient (matches loading-surface background). --shimmer-highlight — accent-tinted highlight that sweeps across. 7% accent mixed with bg-hover — subtle teal pulse on Clean, theme-aware on every other theme (so dark themes stay dark-and-accent-flavored, not light-flashy). --shimmer-duration — animation duration. 1.6s = slightly slower than the legacy 1.4s for a more "premium" rhythm (Vercel/Stripe pattern). --tint-hero-strength — opacity of the soft gradient overlay on hero cards (Stripe's 4% sweep from corner). Tokenized so V-1/3 dark themes can override (dark surfaces need a stronger tint to be visible). ────────────────────────────────────────────────────────── */ --shimmer-base: var(--bg-subtle); --shimmer-highlight: color-mix(in srgb, var(--accent) 7%, var(--bg-hover)); --shimmer-duration: 1.6s; --tint-hero-strength: 4%; /* ────────────────────────────────────────────────────────── §8 Logo sizes (V-Logo, ADR-070) — unified scale Source of truth lives in app/src/ui/logo.jsx (LOGO_SIZES); these tokens mirror the values for any CSS-only consumer (transitions, breakpoint overrides) without re-importing. ────────────────────────────────────────────────────────── */ --logo-xs: 80px; /* sidebar mini / compact strips */ --logo-sm: 140px; /* brand strip on verify / celebration cards */ --logo-md: 200px; /* onboarding welcome step */ --logo-lg: 220px; /* sidebar standard */ --logo-xl: 280px; /* login portal hero */ --logo-transition: width 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease; /* ────────────────────────────────────────────────────────── §9 Pre-auth palette (ADR-086) — single source of truth for the eight pre-auth surfaces (boot splash, landing nav, login portal, register, forgot, check-email, verify celebration, onboarding wizard). Each surface uses these tokens instead of hardcoded teal hexes so future theme variants (luxe, midnight etc.) can re-skin pre-auth without a find-and-replace pass. The values mirror the landing's --lp-accent + --lp-accent-dark + --lp-success (kept as local aliases on .lp-shell) and ADR-084 unified the rest of pre-auth onto this triplet. Any new pre-auth element MUST use these tokens; the smoke check `pre-auth-banned-hex` enforces it. ────────────────────────────────────────────────────────── */ --auth-primary: #0ea5b7; /* primary brand teal */ --auth-primary-dark: #0a8a99; /* dark teal — links, badges, text */ --auth-success: #22c55e; /* completion / "ready" states */ --auth-primary-soft: rgba(14, 165, 183, 0.10); /* card tints */ --auth-primary-tint: rgba(14, 165, 183, 0.16); /* hovers, borders */ --auth-success-soft: rgba(34, 197, 94, 0.10); /* done states */ /* ────────────────────────────────────────────────────────── §10 Responsive Foundation (Phase 1.5 — 2026-05-26) ────────────────────────────────────────────────────────── */ /* Canonical breakpoints. These values are also referenced in @media queries throughout the codebase as raw px (CSS variables can't appear inside @media). Source of truth lives here so future audits have ONE place to read them. Phone landscape and up ≥ 480px (30em) Tablet portrait and up ≥ 768px (48em) Laptop and up ≥ 1024px (64em) Desktop and up ≥ 1280px (80em) Mobile-first convention: write CSS for phones first, then layer up with @media (min-width: ...). Avoid the inverted @media (max-width: ...) pattern outside transitional patches. ────────────────────────────────────────────────────────── */ --bp-phone: 30em; /* 480px — phone landscape + up */ --bp-tablet: 48em; /* 768px — tablet portrait + up */ --bp-laptop: 64em; /* 1024px — laptop + up */ --bp-desktop: 80em; /* 1280px — desktop + up */ /* Fluid spacing — clamp(min, fluid-via-vw, max). The middle term scales with the viewport width so spacing grows smoothly between breakpoints instead of jumping. Used by the Layout Primitives (.l-stack / .l-cluster / etc). Numbers in comments are rem→px @ 16px root font. ────────────────────────────────────────────────────────── */ --space-fluid-3xs: clamp(0.125rem, 0.25vw + 0.0625rem, 0.25rem); /* 2 → 4 */ --space-fluid-2xs: clamp(0.25rem, 0.5vw + 0.125rem, 0.5rem); /* 4 → 8 */ --space-fluid-xs: clamp(0.5rem, 1vw + 0.25rem, 0.75rem); /* 8 → 12 */ --space-fluid-sm: clamp(0.75rem, 1.5vw + 0.375rem, 1rem); /* 12 → 16 */ --space-fluid-md: clamp(1rem, 2vw + 0.5rem, 1.5rem); /* 16 → 24 */ --space-fluid-lg: clamp(1.5rem, 3vw + 0.75rem, 2rem); /* 24 → 32 */ --space-fluid-xl: clamp(2rem, 4vw + 1rem, 3rem); /* 32 → 48 */ --space-fluid-2xl: clamp(2.5rem, 5vw + 1.25rem, 4rem); /* 40 → 64 */ /* Fluid typography — for hero titles and large headlines that should breathe on desktop but stay legible on phones. Body text continues to use the fixed scale (§1) because consistent sizes help dense surfaces (tables) stay scannable. Use these ONLY for headlines that look awkward when they don't scale (e.g., the hero name "أحمد محمد" at 36px is too big on a 320px phone). ────────────────────────────────────────────────────────── */ --fs-fluid-title: clamp(1.125rem, 1vw + 0.875rem, 1.375rem); /* 18 → 22 */ --fs-fluid-h2: clamp(1.25rem, 2vw + 0.75rem, 1.75rem); /* 20 → 28 */ --fs-fluid-hero: clamp(1.5rem, 3vw + 0.75rem, 2.25rem); /* 24 → 36 */ /* Container size tokens — used by Layout Primitives to decide when to "switch" from horizontal to vertical layouts. These are intentionally LARGER than viewport breakpoints because they're container-aware, not viewport-aware. ────────────────────────────────────────────────────────── */ --container-narrow: 30rem; /* 480px — switcher / sidebar threshold */ --container-prose: 60ch; /* readable line length */ --container-wide: 80rem; /* 1280px — max page width */ /* ────────────────────────────────────────────────────────── §11 Premium modal shell tokens (V-Polish, 2026-05-27) Opt-in `` reads these for the "Ctrl+K-like" feel: larger radius, deeper float shadow, more breathing padding, and a smooth input-focus glow scoped to inside the premium card. Adding `.rm-card--premium` to a modal pulls all of these in at once without changing any other modal. The base modal tokens stay untouched so legacy modals look the same. ────────────────────────────────────────────────────────── */ --radius-modal-premium: 24px; /* base modal-box is ~14-16px */ --shadow-modal-premium: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.10); --pad-modal-premium: 28px; /* base padding is 16-20px */ --pad-modal-premium-sm: 20px; /* phone-tight padding */ --input-focus-glow-premium: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); /* ────────────────────────────────────────────────────────── §12 Sizing System (PROJECT_SIZING.md Wave 0, 2026-07-08) Dimension tokens as ONE source of truth. The shared primitives ADOPT them during the presentation waves (UNIFICATION 8-10) - so these are DEFINED now (mostly additive, no render change) EXCEPT the two fixes below. FIXES --radius-md + --shadow-md, which were used-but-undefined and silently rendered as no-radius / no-shadow. ────────────────────────────────────────────────────────── */ /* Control / hit-target heights. Owner keeps comfortable controls (his Claude-Design mockup used 44-46px) so these stay generous vs Shopify's 32. */ --control-h-sm: 32px; --control-h: 40px; --control-h-lg: 44px; --field-h: 40px; --table-row-h: 44px; --table-head-h: 38px; --touch-target: 44px; /* Icon glyph + avatar scales (fold ~620 hardcoded icon sizes + 5 avatar sizes) */ --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 24px; --avatar-xs: 24px; --avatar-sm: 32px; --avatar-md: 40px; --avatar-lg: 48px; --avatar-xl: 64px; /* Radius: define the MISSING --radius-md (structural, kept global). The full global-radius consolidation + tighten (8/12/16) is a later Wave 0 step. */ --radius-md: 8px; --radius-xs: 4px; --radius-pill: 9999px; --radius-full: 50%; /* Elevation: define the MISSING --shadow-md (alias the theme-tinted --shadow so dark themes stay correct) + a blur scale. */ --shadow-md: var(--shadow); --blur-sm: 10px; --blur-md: 16px; --blur-lg: 24px; /* Layout widths (named the current dimensions so they centralize; the tighten to 232/52 is an adoption-time decision). Modal ladder resolves the 760-vs-800 conflict. Defined now, adopted by the shell/modal primitives later. */ --sidebar-width: 260px; --topbar-height: 64px; --content-max: 1200px; --modal-sm: 400px; --modal-md: 560px; --modal-lg: 720px; --modal-xl: 1040px; --drawer-width: 360px; /* Letter-spacing scale (folds ~28 ad-hoc px/em values). */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; } /* Dark themes — deeper shadow so the premium card still reads as floating against the dark surface. ADR-205: keyed on data-theme-mode so EVERY dark theme (luxe/midnight/obsidian/indigo) inherits it, not just the two original ones. */ [data-theme-mode="dark"] { --shadow-modal-premium: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35); } /* Auto-switch glass tokens for ALL dark themes (A1 fallback). ADR-205: was luxe/midnight only -> obsidian + indigo modals + the sticky .breadcrumbs strip rendered with the LIGHT glass (white). Keyed on data-theme-mode now; per-theme --glass-bg-dark (set in styles.css theme blocks) tints the glass to match each surface (navy / graphite / indigo). */ [data-theme-mode="dark"] { --glass-bg: var(--glass-bg-dark); --glass-border: var(--glass-border-dark); --glass-shadow: var(--glass-shadow-dark); } /* Sizing W0: the UI font (Cairo) now loads once via the index.html at the trimmed 400-700 weights. Dropped the duplicate render-blocking @import + the heavy 800/900 Cairo weights (those were the bulk, not the font itself). */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; /* 100dvh (not 100%) so html/body match #root's 100dvh exactly on mobile (dynamic viewport) -- no clipping of the fixed shell. overflow:hidden: the page/body NEVER scrolls; scrolling lives in #root / .main-content. */ height: 100dvh; overflow: hidden; font-family: var(--font-sans, 'IBM Plex Sans Arabic', system-ui, sans-serif); direction: rtl; text-align: start; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Sizing W0: no faux-bold. Weights >700 (the ~344 hardcoded 800/900 sites) now resolve to the REAL IBM Plex 700 glyph instead of a synthesized heavier one. */ font-synthesis: none; } /* Sizing W0: base body text = 14px (B2B density, down from the 16px browser default). Scoped to body (NOT html) so rem-based tokens/containers keep their 16px root and don't rescale. */ body { font-size: var(--text-base); } button, input, select, textarea { font-family: inherit; direction: rtl; } /* ============================================ THEME 1: Clean Medical (Default) Soft white + medical teal/cyan ============================================ */ /* Unify W1 (2026-07-07): the --brand family was never defined anywhere, so every var(--brand, #0891b2) in the AI-insight / AI-watchers CSS fell back to a FIXED teal hex that ignored the active theme. Alias it GLOBALLY (on :root, OUTSIDE any [data-theme] block) to the themed --accent tokens. Custom props resolve at use-time on the html element, so --brand tracks whichever theme's --accent is active. MUST stay global: scoping it to one theme block breaks --brand under every other theme (it resolves to an invalid/black value). */ :root { /* Sizing W0: ONE font source of truth. Owner kept Cairo (familiar) but capped at weight 700 - the "bulky" feel was the 800/900 weights + 16px base, not the font. Swap this single token to go language-aware later (i18n). */ --font-sans: 'Cairo', system-ui, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; --brand: var(--accent); --brand-soft: var(--accent-soft); --brand-soft-border: color-mix(in srgb, var(--accent) 18%, transparent); } /* i18n (PROJECT_SIZING W0): --font-sans is language-swappable from ONE place. Arabic = Cairo (covers Arabic + Latin). Any non-Arabic language falls to a native Latin system stack - fast, no extra webfont, covers every script. The app already stamps on language switch (App.jsx + i18n.js). */ html:not([lang="ar"]) { --font-sans: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Mobile (PROJECT_SIZING W0): inputs >= 16px on phones so iOS Safari never zoom-jumps on focus (ANY sub-16px input triggers it). Desktop keeps its size. */ @media (max-width: 768px) { .input, .select, .textarea, input, select, textarea { font-size: 16px; } } [data-theme="clean"] { --bg: #f4f7fa; --bg-elevated: #ffffff; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #f0f5f9; --bg-subtle: #eef3f8; --text-primary: #0f1f2e; --text-secondary: #4a5b6d; --text-tertiary: #8a98a8; --text-muted: #b5bfc9; --border: #e4ebf2; --border-strong: #d0dae4; --accent: #0891b2; /* medical teal */ --accent-hover: #0e7490; --accent-soft: #ecfeff; --accent-text: #155e75; --success: #059669; --success-soft: #d1fae5; --warning: #d97706; --warning-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --info: #2563eb; --info-soft: #dbeafe; --purple: #7c3aed; --purple-soft: #ede9fe; --shadow-sm: 0 1px 2px rgba(15, 31, 46, 0.04); --shadow: 0 2px 8px rgba(15, 31, 46, 0.06), 0 1px 2px rgba(15, 31, 46, 0.04); --shadow-lg: 0 12px 32px rgba(15, 31, 46, 0.10), 0 2px 8px rgba(15, 31, 46, 0.06); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 2: Luxe Dark Deep navy + gold/violet accents ============================================ */ [data-theme="luxe"] { --bg: #0b1020; --bg-elevated: #131a2e; --bg-sidebar: #0f1525; --bg-card: #151c33; --bg-hover: #1c2541; --bg-subtle: #1a2139; --text-primary: #f1f5fb; --text-secondary: #a8b3c7; --text-tertiary: #6a7690; --text-muted: #4a5570; --border: #232c47; --border-strong: #303a58; --accent: #d4af6f; /* warm gold */ --accent-hover: #e6c18a; --accent-soft: #2a2419; --accent-text: #e6c18a; --success: #34d399; --success-soft: #0f2a22; --warning: #fbbf24; --warning-soft: #2a2212; --danger: #f87171; --danger-soft: #2a1515; --info: #818cf8; --info-soft: #1a1a33; --purple: #a78bfa; --purple-soft: #231a33; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 3: Warm Pastel Cream + soft pink/mint ============================================ */ [data-theme="warm"] { --bg: #fbf6f1; --bg-elevated: #ffffff; --bg-sidebar: #fff8f1; --bg-card: #ffffff; --bg-hover: #fbf1e8; --bg-subtle: #f7ede3; --text-primary: #2b1810; --text-secondary: #5c4a3e; --text-tertiary: #8a7a6e; --text-muted: #b8ab9f; --border: #ecdfd1; --border-strong: #d9c8b5; --accent: #c2675b; /* terracotta */ --accent-hover: #a7544a; --accent-soft: #fbeae6; --accent-text: #8e3e34; --success: #5b8a72; --success-soft: #e3efe8; --warning: #c9944a; --warning-soft: #faf0d9; --danger: #b14848; --danger-soft: #f5dede; --info: #5b7aa3; --info-soft: #e0e9f3; --purple: #9579a5; --purple-soft: #ece4f1; --shadow-sm: 0 1px 2px rgba(43, 24, 16, 0.05); --shadow: 0 3px 10px rgba(43, 24, 16, 0.07), 0 1px 2px rgba(43, 24, 16, 0.04); --shadow-lg: 0 16px 40px rgba(43, 24, 16, 0.10), 0 3px 8px rgba(43, 24, 16, 0.06); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 4: Sage — زيتوني هادئ ============================================ */ [data-theme="sage"] { --bg: #f2f5f0; --bg-elevated: #ffffff; --bg-sidebar: #f8faf6; --bg-card: #ffffff; --bg-hover: #eaf0e6; --bg-subtle: #e8ede4; --text-primary: #1a2e1a; --text-secondary: #3d5c3a; --text-tertiary: #7a9475; --text-muted: #b2c5ae; --border: #d4e0ce; --border-strong:#bdd1b6; --accent: #4a7c59; --accent-hover: #3a6347; --accent-soft: #e8f5ec; --accent-text: #2d5c3c; --success: #2e7d52; --success-soft: #d1f0e0; --warning: #c9944a; --warning-soft: #faf0d9; --danger: #c0392b; --danger-soft: #fde8e6; --info: #3b7dd8; --info-soft: #ddeeff; --purple: #7c5cbf; --purple-soft: #ede8f8; --shadow-sm: 0 1px 2px rgba(26,46,26,.04); --shadow: 0 2px 8px rgba(26,46,26,.06), 0 1px 2px rgba(26,46,26,.04); --shadow-lg: 0 12px 32px rgba(26,46,26,.10), 0 2px 8px rgba(26,46,26,.06); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 5: Ocean — أزرق عميق حديث ============================================ */ [data-theme="ocean"] { --bg: #e8f4fd; --bg-elevated: #ffffff; --bg-sidebar: #f0f8ff; --bg-card: #ffffff; --bg-hover: #d4ecfb; --bg-subtle: #e0f0fa; --text-primary: #0a2540; --text-secondary: #1a4971; --text-tertiary: #5a87b8; --text-muted: #99bedd; --border: #c2ddf5; --border-strong: #a8cff0; --accent: #0070cc; --accent-hover: #005aad; --accent-soft: #ddeeff; --accent-text: #004a99; --success: #0a8a5f; --success-soft: #d0f5e8; --warning: #d4890a; --warning-soft: #fff2d0; --danger: #d63031; --danger-soft: #fde8e8; --info: #6c5ce7; --info-soft: #ebe8fd; --purple: #a855f7; --purple-soft: #f3e8ff; --shadow-sm: 0 1px 2px rgba(10,37,64,.05); --shadow: 0 2px 8px rgba(10,37,64,.07), 0 1px 2px rgba(10,37,64,.04); --shadow-lg: 0 12px 32px rgba(10,37,64,.12), 0 2px 8px rgba(10,37,64,.06); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 6: Blush — وردي ناعم (مناسب للأطفال) ============================================ */ [data-theme="blush"] { --bg: #fdf4f6; --bg-elevated: #ffffff; --bg-sidebar: #fff8fa; --bg-card: #ffffff; --bg-hover: #fce8ed; --bg-subtle: #faeef2; --text-primary: #2d1420; --text-secondary: #6b3a4e; --text-tertiary: #b07a90; --text-muted: #d4afc0; --border: #f0d0dc; --border-strong: #e8b8ca; --accent: #d4547a; --accent-hover: #bc3d63; --accent-soft: #fde8ef; --accent-text: #9c2a4f; --success: #5a9e6f; --success-soft: #e0f5e8; --warning: #d4890a; --warning-soft: #fff2d0; --danger: #c0392b; --danger-soft: #fde8e6; --info: #5b7dd8; --info-soft: #dde8ff; --purple: #9b59b6; --purple-soft: #f0e6f8; --shadow-sm: 0 1px 2px rgba(45,20,32,.04); --shadow: 0 2px 8px rgba(45,20,32,.06), 0 1px 2px rgba(45,20,32,.04); --shadow-lg: 0 12px 32px rgba(45,20,32,.10), 0 2px 8px rgba(45,20,32,.06); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 7: Midnight — أسود فاخر + أحمر ============================================ */ [data-theme="midnight"] { --bg: #080c10; --bg-elevated: #0f1520; --bg-sidebar: #0b1018; --bg-card: #121a28; --bg-hover: #1a2438; --bg-subtle: #151e2e; --text-primary: #f0f4fc; --text-secondary: #9aabc4; --text-tertiary: #546880; --text-muted: #334455; --border: #1e2c40; --border-strong: #273850; --accent: #e84545; --accent-hover: #cc2e2e; --accent-soft: #2a1010; --accent-text: #ff7070; --success: #22d196; --success-soft: #0a2a20; --warning: #f5b731; --warning-soft: #2a2008; --danger: #ff4757; --danger-soft: #2a0f12; --info: #6c9bff; --info-soft: #101830; --purple: #bd93f9; --purple-soft: #1e1030; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); --shadow-lg: 0 20px 50px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } [data-theme="midnight"] .btn.primary { color: #ffffff; } [data-theme="midnight"] .sidebar-logo-mark { color: #fff; } [data-theme="midnight"] .nav-item.active { background: var(--bg-hover); color: var(--accent-text); } /* ADR-205: per-theme accent finishes for the 2 new dark themes. Obsidian's champagne accent is LIGHT -> dark text on primary buttons (like luxe gold); indigo's periwinkle is light-ish -> dark text too. Midnight's red is dark -> white text, which the [data-theme-mode="dark"] generic block does NOT touch (button text colour is accent-luminance-specific, kept per theme). */ [data-theme="obsidian"] .btn.primary { color: #14110a; } [data-theme="obsidian"] .sidebar-logo-mark { color: var(--accent); } [data-theme="obsidian"] .nav-item.active { background: var(--bg-hover); color: var(--accent-text); } [data-theme="indigo"] .btn.primary { color: #0c0f25; } [data-theme="indigo"] .sidebar-logo-mark { color: var(--accent); } [data-theme="indigo"] .nav-item.active { background: var(--bg-hover); color: var(--accent-text); } /* Petrol's mint accent is LIGHT -> dark text on primary buttons, same family as obsidian/indigo above. */ [data-theme="petrol"] .btn.primary { color: #04222a; } [data-theme="petrol"] .sidebar-logo-mark { color: var(--accent); } [data-theme="petrol"] .nav-item.active { background: var(--bg-hover); color: var(--accent-text); } /* ============================================ THEME 8: Desert — رملي دافئ شرقي ============================================ */ [data-theme="desert"] { --bg: #f5efe6; --bg-elevated: #fdf8f2; --bg-sidebar: #f8f2ea; --bg-card: #fdf8f2; --bg-hover: #ede4d4; --bg-subtle: #ede4d6; --text-primary: #2c1a08; --text-secondary: #6b4c28; --text-tertiary: #a07c58; --text-muted: #c9ab8a; --border: #e0cdb0; --border-strong: #ccb898; --accent: #c47c2a; --accent-hover: #a86520; --accent-soft: #f8eddc; --accent-text: #8a5010; --success: #5a8a42; --success-soft: #e2f0d8; --warning: #d45f0a; --warning-soft: #fde8d0; --danger: #c0392b; --danger-soft: #fde0de; --info: #4a7abf; --info-soft: #dce8f5; --purple: #8e5fad; --purple-soft: #ede0f8; --shadow-sm: 0 1px 2px rgba(44,26,8,.05); --shadow: 0 2px 8px rgba(44,26,8,.07), 0 1px 2px rgba(44,26,8,.04); --shadow-lg: 0 12px 32px rgba(44,26,8,.10), 0 2px 8px rgba(44,26,8,.06); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 9: Violet — بنفسجي راقي مميز ============================================ */ [data-theme="violet"] { --bg: #f5f0ff; --bg-elevated: #ffffff; --bg-sidebar: #f9f5ff; --bg-card: #ffffff; --bg-hover: #ede4ff; --bg-subtle: #ece5ff; --text-primary: #1e0a40; --text-secondary: #4a2d80; --text-tertiary: #8b6abf; --text-muted: #bba8e0; --border: #ddd0f8; --border-strong: #ccb8f5; --accent: #7c3aed; --accent-hover: #6425d0; --accent-soft: #ede9fe; --accent-text: #5b21b6; --success: #059669; --success-soft: #d1fae5; --warning: #d97706; --warning-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --info: #2563eb; --info-soft: #dbeafe; --purple: #9333ea; --purple-soft: #f3e8ff; --shadow-sm: 0 1px 2px rgba(30,10,64,.04); --shadow: 0 2px 8px rgba(30,10,64,.07), 0 1px 2px rgba(30,10,64,.04); --shadow-lg: 0 12px 32px rgba(30,10,64,.12), 0 2px 8px rgba(30,10,64,.06); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 10: Pearl (premium LIGHT, ADR-205) Warm pearl-white + refined emerald-teal. A calmer, warmer alternative to "clean" (which is cool blue-grey). ============================================ */ [data-theme="pearl"] { --bg: #f6f4ef; --bg-elevated: #fffdf9; --bg-sidebar: #fffdf9; --bg-card: #fffdf9; --bg-hover: #f0ece3; --bg-subtle: #efeae0; --text-primary: #1c2128; --text-secondary: #55606e; --text-tertiary: #8a94a2; --text-muted: #b7bfc9; --border: #e7e1d6; --border-strong: #d8cfc0; --accent: #0f8a7e; /* refined emerald-teal */ --accent-hover: #0c7064; --accent-soft: #e3f3f0; --accent-text: #0a5d54; --success: #0f8a5f; --success-soft: #ddf2e7; --warning: #b9821f; --warning-soft: #faf0d9; --danger: #c4453a; --danger-soft: #f9e3e0; --info: #2563eb; --info-soft: #e1ebfc; --purple: #7c3aed; --purple-soft: #efe9fe; --shadow-sm: 0 1px 2px rgba(28,33,40,.05); --shadow: 0 3px 10px rgba(28,33,40,.07), 0 1px 2px rgba(28,33,40,.04); --shadow-lg: 0 16px 40px rgba(28,33,40,.10), 0 3px 8px rgba(28,33,40,.06); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 11: Obsidian (premium DARK, ADR-205) True-neutral graphite (no blue cast) + champagne/ platinum accent. Understated luxury, distinct from "luxe" (navy blue + gold). ============================================ */ [data-theme="obsidian"] { --bg: #0a0a0c; --bg-elevated: #141417; --bg-sidebar: #0e0e11; --bg-card: #16161a; --bg-hover: #1f1f24; --bg-subtle: #1a1a1f; --text-primary: #f4f4f6; --text-secondary: #a9adb5; --text-tertiary: #6a6e78; --text-muted: #45484f; --border: #26262c; --border-strong: #33333a; /* ADR-205: neutral graphite glass (no navy cast) for modals + the sticky breadcrumb strip — overrides the default navy --glass-bg-dark. */ --glass-bg-dark: rgba(22, 22, 26, 0.9); --glass-border-dark: rgba(255, 255, 255, 0.07); --accent: #c8a96a; /* champagne / platinum */ --accent-hover: #ddc089; --accent-soft: #221d12; --accent-text: #ddc089; --success: #34d399; --success-soft: #0f2a22; --warning: #fbbf24; --warning-soft: #2a2212; --danger: #f87171; --danger-soft: #2a1515; --info: #8ab4ff; --info-soft: #131a28; --purple: #c4a7fb; --purple-soft: #1f1830; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); --shadow-lg: 0 20px 50px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 12: Indigo (premium DARK, ADR-205) Deep indigo-navy + electric periwinkle. Modern SaaS premium look. ============================================ */ [data-theme="indigo"] { --bg: #0c0f25; --bg-elevated: #141936; --bg-sidebar: #0f1330; --bg-card: #171d40; --bg-hover: #1f2750; --bg-subtle: #1a2046; --text-primary: #eef0fb; --text-secondary: #a6acd0; --text-tertiary: #6770a0; --text-muted: #454d78; --border: #242c52; --border-strong: #313a63; /* ADR-205: indigo-tinted glass for modals + the sticky breadcrumb strip. */ --glass-bg-dark: rgba(20, 25, 54, 0.9); --glass-border-dark: rgba(255, 255, 255, 0.08); --accent: #8b8cf9; /* electric periwinkle */ --accent-hover: #a3a4fb; --accent-soft: #1a1c3e; --accent-text: #aeaffb; --success: #34d399; --success-soft: #0d2a26; --warning: #f5b731; --warning-soft: #2a2210; --danger: #fb7185; --danger-soft: #2c1320; --info: #7aa2ff; --info-soft: #141d3a; --purple: #bda4fb; --purple-soft: #1f1b3e; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); --shadow-lg: 0 20px 50px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ============================================ THEME 13: Petrol (premium DARK, 2026-07-29) Deep petrol teal + mint accent. Matches the waiting-display `clinic-teal` theme, so the clinic screen and the app read as one family. Fills the "dark green/teal" gap in the set (pearl was the only teal and it is LIGHT). ============================================ */ [data-theme="petrol"] { --bg: #071f26; --bg-elevated: #0e2f38; --bg-sidebar: #092630; --bg-card: #10353f; --bg-hover: #17434e; --bg-subtle: #123a45; --text-primary: #eaf7f4; --text-secondary: #9dbfbe; --text-tertiary: #648487; --text-muted: #445f63; --border: #1c4650; --border-strong: #275964; /* Petrol-tinted glass for modals + the sticky breadcrumb strip. */ --glass-bg-dark: rgba(14, 47, 56, 0.9); --glass-border-dark: rgba(255, 255, 255, 0.08); --accent: #3ddcb8; /* mint */ --accent-hover: #63e8c9; --accent-soft: #0d3138; --accent-text: #6fe9cd; --success: #34d399; --success-soft: #0c2c26; --warning: #f5b731; --warning-soft: #2a2513; --danger: #fb7185; --danger-soft: #2c1a22; --info: #67c7ec; --info-soft: #0d2a33; --purple: #b6a8fb; --purple-soft: #1e1e3a; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); --shadow-lg: 0 20px 50px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4); --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* Theme picker dropdown */ /* Theme dropdown (Chrome round 2 / F4b, 2026-07-08 mockup): the SAME anchored card as the language .chrome-menu — a clean vertical list of swatch + name + a check on the active theme. Anchored under the palette trigger (it lives in the relative .topbar-theme), so it follows the button after topbar changes. */ .theme-picker-drop { position: absolute; top: calc(100% + 8px); /* Open INTO the viewport (see .chrome-menu note) - the palette trigger is on the inline-start side of the topbar, so pin the menu's END edge. */ inset-inline-end: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 300; min-width: 212px; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow-y: auto; } .theme-picker-drop .tpd-title { font-size: var(--text-xs); font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; padding: 4px 11px 6px; } .theme-picker-drop .tpd-grid { display: flex; flex-direction: column; gap: 2px; } /* ADR-205: section label (فاتح / غامق) separating the 6 featured themes */ .theme-picker-drop .tpd-section { font-size: var(--text-micro); font-weight: 700; color: var(--text-tertiary); letter-spacing: .04em; margin: 8px 11px 2px; } .theme-picker-drop .tpd-section:first-of-type { margin-top: 2px; } /* Rows reuse .chrome-menu-item (row + padding + hover + radius); these add the swatch + the active-theme accent. */ .theme-picker-drop .tpd-item-main { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; } .theme-picker-drop .tpd-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .08); flex-shrink: 0; } .theme-picker-drop .tpd-label { font-weight: 600; } .theme-picker-drop .tpd-item.active { color: var(--accent); } /* U-8: hint pointing dev-only themes to the Tweaks panel */ .theme-picker-drop .tpd-hint { margin-top: 8px; padding: 10px 11px 4px; border-top: 1px solid var(--border); font-size: var(--text-micro); color: var(--text-tertiary); text-align: center; line-height: 1.5; } /* Chrome round 3 (owner 2026-08-13): the popover took in LANGUAGE, so the topbar could give up its globe. The divider is the only new furniture — the language rows reuse .tpd-item so the two halves of one preferences surface cannot drift apart in look. */ .theme-picker-drop .tpd-divider { height: 1px; margin: 10px 11px 2px; background: var(--border); } /* The popover is taller now (2 theme groups + a language list). On a short phone in landscape that could run off the screen, so it scrolls itself rather than being clipped by the viewport. */ .theme-picker-drop { max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; } /* ============================================ Layout ============================================ */ #root, .app-root { width: 100%; height: 100dvh; min-height: 100dvh; background: var(--bg); color: var(--text-primary); display: flex; /* Single scroll model: #root is the element-scroller for PRE-AUTH surfaces (login / onboarding / landing render directly in #root). For the AUTHED app, .app-shell fills #root exactly (100dvh) so #root has no overflow and `.main-content` owns the scroll -- no double scrollbar. Either way scrolling lives in an ELEMENT (touch-reliable on mobile), never the page/body. */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .main-shell { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .page-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; } /* ============================================ Scrollbars ============================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================ Reusable bits ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 16px; border-radius: var(--radius); border: 1px solid transparent; background: var(--bg-subtle); color: var(--text-primary); font-weight: 600; font-size: var(--text-base); cursor: pointer; transition: all var(--duration-fast) var(--ease-smooth); white-space: nowrap; font-family: inherit; } .btn:hover { background: var(--bg-hover); } .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } [data-theme="luxe"] .btn.primary { color: #0b1020; } .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.ghost { background: transparent; color: var(--text-secondary); } .btn.ghost:hover { background: var(--bg-hover); color: var(--text-primary); } .btn.outline { background: transparent; border-color: var(--border-strong); color: var(--text-primary); } .btn.outline:hover { background: var(--bg-hover); } .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.danger:hover { background: color-mix(in oklab, var(--danger) 85%, #000); } .btn.sm { padding: 6px 12px; font-size: var(--text-sm); } .btn.icon { padding: var(--space-2); } /* Semantic outline variants (Wave 7 - buttons center / U-btn). The combined selectors are 0,3,0 so they beat the standalone .btn.danger / .btn.outline (both 0,2,0) regardless of source order. (The receipt-block .btn.danger redefinition + its #b91c1c hover died in Hover Wave 3a; the 0,5,0 hovers here remain correct.) This is the ONE place a red/amber OUTLINE button is defined; screens use these classes, never inline red styles (smoke W7-A ratchet enforces it). Class-selectors are order-agnostic, so `btn outline danger` (QuickActionsSheet) matches the same rule. */ .btn.danger.outline { background: transparent; border-color: var(--danger); color: var(--danger); } .btn.danger.outline:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .btn.warning.outline { background: transparent; border-color: var(--warning); color: var(--warning); } .btn.warning.outline:hover:not(:disabled) { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); } .chip { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 4px 10px; font-size: var(--text-meta); font-weight: 600; border-radius: var(--radius-pill); background: var(--bg-subtle); color: var(--text-secondary); white-space: nowrap; } .chip.success { background: var(--success-soft); color: var(--success); } .chip.warning { background: var(--warning-soft); color: var(--warning); } .chip.danger { background: var(--danger-soft); color: var(--danger); } .chip.info { background: var(--info-soft); color: var(--info); } .chip.accent { background: var(--accent-soft); color: var(--accent-text); } .chip.purple { background: var(--purple-soft); color: var(--purple); } /* Anatomy W0-1: tone maps emit muted/outline (INVENTORY_TONE.all, WA/MK fallbacks) but no rule existed - both silently rendered as the base chip. */ .chip.muted { background: var(--bg-subtle); color: var(--text-tertiary); } .chip.outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .input, .select, .textarea { width: 100%; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-primary); font-size: var(--text-base); transition: all var(--duration-fast) var(--ease-smooth); outline: none; font-family: inherit; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } .label { display: block; font-size: var(--text-meta); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .divider { height: 1px; background: var(--border); margin: 16px 0; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ============================================ Sidebar ============================================ */ .sidebar { width: 260px; background: var(--bg-sidebar); border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; transition: width .28s cubic-bezier(.22, 1, .36, 1); } .sidebar-logo { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; } .sidebar-brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; min-width: 0; } /* V-Logo (ADR-070): width set inline by the ModirifyLogo component (size=lg → 220px). Wrapper only owns positioning + the slight nudge that visually centers the wordmark inside the sidebar gutter. */ /* Brand mark stands alone (no tile) — the owner's M logo is a complete, colored mark; a box only shrank + muddied it. */ .sidebar-brand-mark { flex-shrink: 0; } /* Wordmark: harmonized with the site type scale — 19px / weight 700 (a LOADED Cairo weight; 800 rendered faux-bold) + tight tracking. */ .sidebar-logo-title { font-weight: 700; font-size: 19px; letter-spacing: -0.3px; color: var(--text-primary); line-height: 1.15; } .sidebar-logo-sub { font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); } /* ============================================ Sidebar collapse (2026-07-08) - desktop icon rail. Toggled by .sidebar--collapsed (state in AppContext.sidebarCollapsed, persisted as senan-sidebar-collapsed). NEVER applied to the mobile "more" sheet copy (gated on !excludeIds in sidebar.jsx). ============================================ */ /* R2 W1c normalize (owner): the Codex one-off treatment (hard-coded white gradients + inset white shadows = broken in dark themes, bespoke hover scale + ::before blob, custom focus outline) is retired onto the CENTRAL vocabulary: the sidebar's unified hover (state-hover-surface + emphasis accent border, same as nav items/demo/logout) + the canonical --ring-shadow focus ring. The explicit panel icons (its good idea) stay. */ .sidebar-collapse-btn { margin-inline-start: auto; flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: var(--text-tertiary); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .sidebar-collapse-icon { transition: transform .25s cubic-bezier(.16, 1, .3, 1); } .sidebar-collapse-btn:hover { background: var(--state-hover-surface); color: var(--accent-text); border-color: var(--state-emphasis-border); } .sidebar-collapse-btn:hover .sidebar-collapse-icon { transform: translateX(1px); } .sidebar-collapse-btn.is-collapsed:hover .sidebar-collapse-icon { transform: translateX(-1px); } .sidebar-collapse-btn:active { transform: scale(.97); } .sidebar-collapse-btn:focus-visible { outline: none; box-shadow: var(--ring-shadow); } /* nav label + brand text animate their width to 0 so the rail slides shut smoothly */ .nav-item-label { overflow: hidden; white-space: nowrap; max-width: 170px; transition: opacity .18s ease, max-width .28s cubic-bezier(.22, 1, .36, 1); } .sidebar.sidebar--collapsed { width: 76px; } .sidebar--collapsed .sidebar-logo { flex-direction: column; gap: var(--space-2); padding: 14px 8px; } .sidebar--collapsed .sidebar-brand-text { display: none; } .sidebar--collapsed .sidebar-collapse-btn { margin-inline-start: 0; } .sidebar--collapsed .nav-item-label { opacity: 0; max-width: 0 !important; } .sidebar--collapsed .nav-item { justify-content: center; gap: 0; padding-inline: 0; } .sidebar--collapsed .nav-item:hover { transform: none; } .sidebar--collapsed .sidebar-legal { display: none; } .sidebar--collapsed .sidebar-footer { justify-content: center; flex-direction: column; gap: 6px; padding-inline: 8px; } .sidebar--collapsed .clinic-switcher--sidebar { flex: 0 0 auto; width: 44px; } .sidebar--collapsed .clinic-switcher-trigger--sidebar { width: 44px; height: 44px; min-height: 44px; padding: 3px; justify-content: center; } .sidebar--collapsed .clinic-switcher-trigger-copy, .sidebar--collapsed .clinic-switcher-trigger-caret { display: none; } /* Demo-mode toggle (2026-07-08) - sits above the sidebar user card. UI stub. */ .sidebar-demo { display: flex; align-items: center; gap: 11px; width: calc(100% - 24px); margin: 0 12px 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); cursor: pointer; text-align: start; transition: background .15s ease, border-color .15s ease; } @media (hover: hover) { .sidebar-demo:hover { background: var(--bg-hover); border-color: var(--accent); } .sidebar-demo:disabled, .sidebar-demo.is-busy { cursor: progress; opacity: .72; } } /* ── Training Wave 4.1: persistent identity + optional guided path ───── The bar identifies the isolated tenant and suggests one next station. It never blocks navigation or creates a second dashboard. */ .training-experience-banner { position: sticky; top: var(--topbar-height, 64px); z-index: 34; display: grid; grid-template-columns: auto minmax(320px, 1fr) auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 22px; border-bottom: 1px solid color-mix(in srgb, var(--warning) 26%, var(--border)); background: linear-gradient(100deg, color-mix(in srgb, var(--warning) 10%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 7%, var(--surface)) 100%); box-shadow: 0 8px 24px rgba(15, 23, 42, .05); backdrop-filter: blur(16px); overflow: hidden; max-height: 240px; transition: transform var(--state-duration) var(--state-ease), opacity var(--state-duration) var(--state-ease), max-height var(--state-duration) var(--state-ease), min-height var(--state-duration) var(--state-ease), padding-block var(--state-duration) var(--state-ease), border-color var(--state-duration) var(--state-ease); } .main.chrome-hidden .training-experience-banner { min-height: 0; max-height: 0; padding-block: 0; border-bottom-color: transparent; opacity: 0; pointer-events: none; transform: translateY(-100%); } .training-experience-copy, .training-experience-actions { display: flex; align-items: center; gap: 9px; min-width: 0; } .training-experience-badge { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 10px; border-radius: var(--radius-pill); color: color-mix(in srgb, var(--warning) 78%, var(--text-primary)); background: color-mix(in srgb, var(--warning) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent); font-size: 11px; font-weight: 800; } .training-experience-note { overflow: hidden; color: var(--text-secondary); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; } .training-experience-actions .btn { min-height: 31px; white-space: nowrap; } .training-guide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; max-width: 760px; padding: 5px 7px 5px 10px; border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); } .training-guide-progress { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: 10.5px; font-weight: 800; white-space: nowrap; } .training-guide-pulse, .training-guide-nav-beacon { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent); animation: training-guide-pulse 2.1s ease-out infinite; } .training-guide-copy { display: grid; min-width: 0; gap: 1px; } .training-guide-copy strong { overflow: hidden; color: var(--text-primary); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; } .training-guide-copy small { overflow: hidden; color: var(--text-tertiary); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; } .training-guide-next { justify-content: center; min-height: 30px; white-space: nowrap; } .training-guide-last { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-size: 10.5px; font-weight: 700; white-space: nowrap; } .nav-item.training-guide-target .icon-box { position: relative; } .training-guide-nav-beacon { position: absolute; inset-inline-end: -4px; top: -3px; display: inline-block; } @keyframes training-guide-pulse { 65%, 100% { box-shadow: 0 0 0 9px transparent; } } @media (prefers-reduced-motion: reduce) { .training-guide-pulse, .training-guide-nav-beacon { animation: none; } .training-experience-banner { transition: none; } } .training-setup-modal .rm-body { padding-block-start: 18px; } .training-setup-options { display: grid; gap: 9px; text-align: start; } .training-setup-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 16px; color: var(--text-primary); background: var(--surface-raised, var(--surface)); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .training-setup-option:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 10%, transparent); } .training-setup-option:disabled { cursor: progress; opacity: .65; } .training-setup-option-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .training-setup-option-copy { display: grid; flex: 1 1 auto; gap: 3px; } .training-setup-option-copy strong { font-size: 13.5px; } .training-setup-option-copy small { color: var(--text-tertiary); font-size: 11.5px; line-height: 1.5; } @media (max-width: 1180px) { .training-experience-banner { grid-template-columns: minmax(0, 1fr) auto; } .training-guide { grid-column: 1 / -1; grid-row: 2; max-width: none; } } @media (max-width: 768px) { .training-experience-banner { position: relative; top: auto; grid-template-columns: 1fr; padding: 9px 12px; } .training-experience-note { white-space: normal; } .training-guide { grid-column: auto; grid-row: auto; } .training-experience-actions { overflow-x: auto; padding-bottom: 1px; } .training-experience-actions .btn { flex: 0 0 auto; } } @media (max-width: 520px) { .training-guide { grid-template-columns: auto minmax(0, 1fr); } .training-guide-next, .training-guide-last { grid-column: 1 / -1; width: 100%; } } .sidebar-demo-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); } .sidebar-demo-text { flex: 1; min-width: 0; line-height: 1.25; text-align: start; } .sidebar-demo-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; } .sidebar-demo-sub { font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; } .sidebar-demo-switch { flex-shrink: 0; width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--border); position: relative; transition: background .2s ease; } .sidebar-demo.is-on .sidebar-demo-switch { background: var(--accent); } .sidebar-demo-knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: inset-inline-start .2s cubic-bezier(.22, 1, .36, 1); } .sidebar-demo.is-on .sidebar-demo-knob { inset-inline-start: 18px; } /* collapsed rail: icon only */ .sidebar--collapsed .sidebar-demo { justify-content: center; width: 52px; margin-inline: auto; padding: var(--space-2); } .sidebar--collapsed .sidebar-demo-text, .sidebar--collapsed .sidebar-demo-switch { display: none; } /* Official quick channels — one central SocialLinks primitive fed by the SaaS support registry. A compact glass dock gives WhatsApp + social links a clear home without turning the operational rail into another help page. */ .social-links--sidebar { width: calc(100% - 24px); min-height: 40px; margin: 0 12px 7px; padding: 5px 6px; border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border)); border-radius: 15px; background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%), linear-gradient(145deg, color-mix(in srgb, #fff 54%, var(--bg-card)), color-mix(in srgb, var(--accent) 3%, var(--bg-elevated))); box-shadow: 0 8px 22px rgba(15, 23, 42, .055), inset 0 1px 0 color-mix(in srgb, #fff 76%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; gap: 3px; } .social-link { --social-brand: var(--accent); width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; border: 0; color: color-mix(in srgb, var(--social-brand) 72%, var(--text-secondary)); background: color-mix(in srgb, var(--social-brand) 9%, rgba(255, 255, 255, .72)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--social-brand) 13%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 78%, transparent); text-decoration: none; isolation: isolate; position: relative; overflow: hidden; animation: socialLinkIn .28s var(--ease-out, ease) both; animation-delay: calc(var(--social-index, 0) * 35ms); transition: transform 160ms var(--ease-out, ease), color 160ms var(--ease-out, ease), border-color 160ms var(--ease-out, ease), background 160ms var(--ease-out, ease), box-shadow 160ms var(--ease-out, ease); } .social-link::before { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: var(--radius-md); background: radial-gradient(circle at 28% 8%, color-mix(in srgb, #fff 50%, transparent), transparent 55%); opacity: .72; } .social-links__divider { width: 1px; height: 18px; flex: 0 0 1px; margin-inline: 2px; border-radius: var(--radius-pill); background: linear-gradient(transparent, color-mix(in srgb, var(--text-muted) 32%, transparent), transparent); } @media (hover: hover) { .social-link:hover { transform: translateY(var(--lift-2)); color: #fff; background: var(--social-brand); box-shadow: 0 7px 16px color-mix(in srgb, var(--social-brand) 27%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent); } } .social-link:active { transform: translateY(0) scale(.96); } .social-link:focus-visible { outline: none; box-shadow: var(--ring-shadow), 0 7px 16px color-mix(in srgb, var(--social-brand) 22%, transparent); } .sidebar--collapsed .social-links--sidebar { display: none; } /* Short desktop viewports: preserve the whole persistent rail (including the account/logout footer) instead of clipping its newest low-priority section. Density changes are vertical only; widths, hit targets, and hierarchy stay. */ @media (min-width: 769px) and (max-height: 760px) { .sidebar-logo { padding-block: 5px 4px; } .sidebar .nav-items { gap: 0; } .sidebar .nav-item { padding-block: 7px; } .sidebar .sidebar-nav-divider { margin-block: 1px; } .sidebar-demo { margin-bottom: 4px; padding-block: 4px; } .sidebar-demo-sub { display: none; } .social-links--sidebar { min-height: 34px; margin-bottom: 4px; padding-block: 2px; } .sidebar .sidebar-footer { padding-block: 3px; margin-bottom: 2px; } .sidebar-footer .avatar { width: 36px; height: 36px; } } /* Extreme short-height fallback. This trims two pixels from each nav row but keeps the normal visual rhythm; it is deliberately below common laptop viewport heights so the regular rail never looks stacked. */ @media (min-width: 769px) and (max-height: 660px) { .sidebar .nav-item { padding-block: 5px; } .sidebar-logo { padding-block: 3px 2px; } } @keyframes socialLinkIn { from { opacity: 0; transform: translateY(5px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .sidebar, .sidebar-collapse-btn, .nav-item-label, .sidebar-demo-switch, .sidebar-demo-knob, .social-link { transition: none; animation: none; } } /* Central 2×2 decision board ------------------------------------------------ One visual layer only: self-explanatory quadrants → expandable evidence. Domain screens provide vocabulary and RankList rows; spacing, motion and responsive behavior live here. */ .decision-matrix { min-width: 0; } .decision-matrix__quadrant { --matrix-tone: var(--accent); --matrix-soft: var(--accent-soft); } .decision-matrix__quadrant.is-success { --matrix-tone: var(--success); --matrix-soft: var(--success-soft); } .decision-matrix__quadrant.is-warning { --matrix-tone: var(--warning); --matrix-soft: var(--warning-soft); } .decision-matrix__quadrant.is-danger { --matrix-tone: var(--danger); --matrix-soft: var(--danger-soft); } .decision-matrix__quadrant.is-info { --matrix-tone: var(--info); --matrix-soft: var(--info-soft); } .decision-matrix__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2-5); } .decision-matrix__quadrant { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow-xs); animation: decision-matrix-in .42s cubic-bezier(.22,.8,.28,1) both; animation-delay: calc(90ms + var(--matrix-i) * 55ms); } .decision-matrix__quadrant::before { content: ''; display: block; height: 3px; background: var(--matrix-tone); } .decision-matrix__quadrant-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2-5); padding: 12px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--matrix-soft) 62%, transparent), transparent); } .decision-matrix__quadrant-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text-primary); font-size: var(--text-sm); } .decision-matrix__quadrant-head h3 span { color: var(--matrix-tone); } .decision-matrix__count { flex: none; padding: 3px 7px; border-radius: var(--radius-pill); background: var(--matrix-soft); color: var(--matrix-tone); font-size: 9px; font-weight: 900; } .decision-matrix__empty { padding: 22px 14px; color: var(--text-tertiary); text-align: center; font-size: var(--text-xs); } .decision-matrix__empty.is-page { padding: 34px 14px; } .decision-matrix__detail { padding: 10px 12px; } .decision-matrix__detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .decision-matrix__detail-metrics > div { min-width: 0; padding: var(--space-2); border-radius: var(--radius-md); background: var(--card-bg); text-align: center; } .decision-matrix__detail-metrics span, .decision-matrix__detail-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .decision-matrix__detail-metrics span { color: var(--text-tertiary); font-size: 9px; } .decision-matrix__detail-metrics strong { margin-top: 3px; color: var(--text-primary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; } @keyframes decision-matrix-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (hover: hover) { .decision-matrix__quadrant { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .decision-matrix__quadrant:hover { border-color: color-mix(in srgb, var(--matrix-tone) 28%, var(--border)); box-shadow: var(--shadow-sm); transform: translateY(var(--lift-1)); } } @media (max-width: 760px) { .decision-matrix__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 540px) { .decision-matrix__detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .decision-matrix__quadrant { animation: none !important; } } /* V-Logo (ADR-070) — Unified ModirifyLogo base styles. Component lives in app/src/ui/logo.jsx and sets width inline via the LOGO_SIZES scale (xs=80, sm=140, md=200, lg=220, xl=280). These base styles give every instance the same display/object behavior + a smooth width transition so the brand "breathes" between contexts (login → onboarding → sidebar). */ .modirify-logo { display: block; height: auto; max-width: 100%; object-fit: contain; object-position: center; transition: var(--logo-transition); } @media (prefers-reduced-motion: reduce) { .modirify-logo { transition: none; } } .nav-items { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; } /* Anatomy W-SIDEBAR (owner 2026-07-17): ONE adaptive rail recipe, driven by the same nav model that applies permissions and plan visibility. - FILL mode (.sidebar-navigation--fill, >= FILL_MODE_MIN_ITEMS visible screens): the full-permission look — groups distribute through the WHOLE column height (per-group flex-grow via --nav-count + space-evenly). - Base (limited-permission rails): the navigation stacks compact at the top, and the ONE intentional breathing zone lives between it and the pinned .sidebar-bottom cluster — no more 3 screens stretched across the whole column. Both modes scroll internally on short windows, so the account card never disappears. The mode flips automatically as permissions / plan / admin visibility change the visible count. */ .sidebar-navigation { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding-block: 4px; overflow-y: auto; scrollbar-width: thin; } .sidebar-navigation-group { flex: 0 0 auto; display: flex; flex-direction: column; } .sidebar-navigation-group > .nav-items { flex: 0 0 auto; justify-content: flex-start; } .sidebar-navigation--fill .sidebar-navigation-group { flex: var(--nav-count, 1) 1 0; min-height: 0; /* Density governor (replaces the old tall-tablet media exception at the ROOT): fill mode may stretch up to ~64px per screen and no further. On a landscape desktop that is full-height distribution; on very tall columns (portrait tablets, 4K) the rail stops at a comfortable rhythm and the leftover settles above the pinned bottom cluster - device-agnostic. */ max-height: calc(var(--nav-count, 1) * 64px); } .sidebar-navigation--fill .sidebar-navigation-group > .nav-items { flex: 1 1 auto; min-height: 0; justify-content: space-evenly; } /* Anatomy W-SIDEBAR: the whole under-nav cluster (theme / demo / social / account card) pins to the bottom edge as one unit. In fill mode the nav consumes the free space so the pin is a no-op — same DOM, both modes. */ .sidebar-bottom { margin-block-start: auto; flex-shrink: 0; display: flex; flex-direction: column; } .sidebar-nav-divider { height: 1px; flex: 0 0 1px; margin: 6px 14px; background: var(--border); opacity: .6; } .sidebar-navigation--fill .sidebar-nav-divider { margin: 2px 14px; } .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius); color: var(--text-secondary); font-weight: 500; font-size: var(--text-base); cursor: pointer; border: 1px solid transparent; background: transparent; text-align: start; width: 100%; transition: all var(--duration-fast) var(--ease-smooth); font-family: inherit; } /* Unified sidebar row hover (2026-07-08): same accent-border highlight as the .sidebar-demo toggle - one consistent mouseover treatment across the rail. border-box (global) means the 1px border adds no layout shift at rest. */ @media (hover: hover) { .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); } } /* (footer logout hover lives in the premium layer - the single ".sidebar-footer .icon-btn:hover" rule there; kept out of here to avoid a duplicate that the later premium rule would override anyway.) */ .nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; } [data-theme="luxe"] .nav-item.active { background: var(--bg-hover); color: var(--accent); } .nav-item .icon-box { width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; } /* ADR-145 F3: legal links cluster sitting between the mini-stats card and the avatar row. Small (11px), muted, single line on desktop; wraps on narrow rails without breaking the layout. The dots are visual separators marked aria-hidden so screen readers skip them. */ .sidebar-legal { padding: 6px 14px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--text-xs); color: var(--text-tertiary); border-top: 1px solid var(--border); opacity: 0.85; } .sidebar-legal a { color: var(--text-tertiary); text-decoration: none; padding: 2px 4px; border-radius: var(--radius-xs); transition: color 160ms ease, background 160ms ease; } .sidebar-legal a:hover, .sidebar-legal a:focus-visible { color: var(--accent); background: var(--bg-subtle); outline: none; } .sidebar-legal span[aria-hidden] { opacity: 0.4; user-select: none; } .sidebar-footer { position: relative; padding: 9px 12px 11px; margin-bottom: 0; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } /* Premium clinic/account switcher. It replaces the tiny topbar dropdown with one clear identity surface in the rail, while logout remains a separate confirmed action. The list opens upward so it never competes with content. */ .clinic-switcher { position: relative; flex: 1 1 auto; min-width: 0; } .clinic-switcher-scrim { position: fixed; inset: 0; z-index: 298; border: 0; background: transparent; cursor: default; } .clinic-switcher-trigger { width: 100%; min-width: 0; min-height: 48px; padding: 5px 7px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--text-primary); font: inherit; text-align: start; cursor: pointer; transition: background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } .clinic-switcher-trigger:hover:not(:disabled), .clinic-switcher.is-open .clinic-switcher-trigger { background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated)); border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); } .clinic-switcher-trigger:focus-visible { outline: none; box-shadow: var(--ring-shadow); } .clinic-switcher-trigger:active:not(:disabled) { transform: scale(.985); } .clinic-switcher-trigger:disabled { cursor: default; } .clinic-switcher-avatar { width: 40px; height: 40px; border-radius: 13px; font-size: 13px; } .clinic-switcher-trigger-copy, .clinic-switcher-option-copy, .clinic-switcher-panel-heading { min-width: 0; display: flex; flex-direction: column; } .clinic-switcher-trigger-copy { flex: 1 1 auto; gap: 2px; } .clinic-switcher-trigger-name, .clinic-switcher-trigger-meta, .clinic-switcher-option-name, .clinic-switcher-option-kind { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clinic-switcher-trigger-name { font-size: 13px; font-weight: 750; line-height: 1.25; } .clinic-switcher-trigger-meta { font-size: 10.5px; color: var(--text-tertiary); direction: ltr; text-align: start; } .clinic-switcher-trigger-caret { flex: 0 0 auto; color: var(--text-tertiary); transition: transform .2s var(--ease-smooth), color .15s ease; } .clinic-switcher.is-open .clinic-switcher-trigger-caret { color: var(--accent); transform: rotate(180deg); } .clinic-switcher-panel { position: absolute; inset-inline-start: 0; bottom: calc(100% + 9px); z-index: 310; width: min(236px, calc(100vw - 28px)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); border-radius: 18px; background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%), color-mix(in srgb, var(--bg-card) 94%, transparent); box-shadow: 0 22px 54px rgba(15, 23, 42, .18), 0 4px 14px rgba(15, 23, 42, .08), inset 0 1px 0 color-mix(in srgb, #fff 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); transform-origin: bottom center; animation: clinicSwitcherIn .18s var(--ease-spring) both; } .clinic-switcher-panel-head { display: flex; align-items: center; gap: 10px; padding: 13px 13px 11px; border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); } .clinic-switcher-panel-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); } .clinic-switcher-panel-heading { gap: 2px; } .clinic-switcher-panel-heading strong { font-size: 13px; color: var(--text-primary); } .clinic-switcher-panel-heading small { font-size: 10.5px; color: var(--text-tertiary); line-height: 1.4; } .clinic-switcher-options { max-height: min(308px, calc(100vh - 210px)); overflow-y: auto; padding: 7px; } .clinic-switcher-option { width: 100%; min-width: 0; min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--text-primary); font: inherit; text-align: start; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .clinic-switcher-option:hover:not(:disabled) { background: var(--bg-hover); border-color: color-mix(in srgb, var(--accent) 18%, transparent); } .clinic-switcher-option.is-current { background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated)); border-color: color-mix(in srgb, var(--accent) 20%, var(--border)); } .clinic-switcher-option:focus-visible { outline: none; box-shadow: var(--ring-shadow); } .clinic-switcher-option:disabled { cursor: progress; } .clinic-switcher-option-avatar { border-radius: 11px; } .clinic-switcher-option-copy { flex: 1 1 auto; gap: 2px; } .clinic-switcher-option-name { font-size: 12.5px; font-weight: 700; } .clinic-switcher-option-kind { font-size: 10.5px; color: var(--text-tertiary); } .clinic-switcher-option-state { width: 20px; flex: 0 0 20px; display: grid; place-items: center; color: var(--accent); } .clinic-switcher-spinner { animation: spin .8s linear infinite; } .sidebar-logout-btn { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; color: var(--text-tertiary); } @keyframes clinicSwitcherIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Legal links relocated from the sidebar to Settings (2026-07-08) - a centered muted footer under the settings shell, reachable on every viewport. */ /* Global app footer (2026-07-08, owner): slim legal + contact bar rendered by Router.jsx as the last child of .main-content, so it sits at the natural end of EVERY authed screen (not Settings-only). A quiet top border separates it from screen content; links tint to accent on hover (interaction-states recipe: hover-link). Copy wraps to its own centered line under the links. */ .app-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; margin-top: 32px; padding: 18px 16px 24px; border-top: 1px solid var(--border); font-size: var(--text-meta); color: var(--text-tertiary); } .app-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; } .app-footer-links a { color: var(--text-tertiary); text-decoration: none; transition: color 140ms var(--ease-out, ease); } .app-footer-links a:hover { color: var(--accent); text-decoration: underline; } .app-footer-contact { font-weight: 600; color: var(--text-secondary) !important; } .app-footer-copy { flex-basis: 100%; text-align: center; color: var(--text-muted); margin-top: 2px; } .avatar { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--info)); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; font-size: var(--text-base); } .avatar.sm { width: 30px; height: 30px; font-size: var(--text-meta); border-radius: var(--radius-md); } .avatar.xs { width: 24px; height: 24px; font-size: var(--text-micro); border-radius: var(--radius-sm); } .avatar.lg { width: 54px; height: 54px; font-size: 18px; border-radius: 14px; } /* ============================================ Topbar ============================================ */ .topbar { height: 64px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: var(--space-4); flex-shrink: 0; /* Chrome layering lives in the PREMIUM .topbar block (~L5940) - the single owner of position/z-index/backdrop-filter. Do not re-declare them here: a second declaration is how the dropdown-under-tabs bug regressed (owner 2026-07-10). */ /* Hide-on-scroll (Wave C): animate the slide + space reclaim. */ transition: transform 0.22s ease, margin-top 0.22s ease; } /* Chrome Wave C (2026-07-08, owner): premium screen title = an accent-tinted square holding the shared screen glyph (SCREEN_ICONS) + the title text. */ .topbar-title-row { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; } /* W-ICON: the topbar compass wears the SAME glass as the header identity chip, one size down — the flat --accent-soft square is retired. */ .topbar-title-icon { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, var(--bg-elevated)), color-mix(in srgb, var(--accent) 6%, var(--bg-elevated))); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent); } .topbar-title-main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: 700; font-size: 18px; color: var(--text-primary); } .topbar-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .topbar-title-spinner { width: 14px; height: 14px; flex-shrink: 0; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } /* The language pill RETIRED (Chrome round 3, owner 2026-08-13): language moved inside the appearance popover, so the bar has one preferences control instead of two. The shared .chrome-menu card below stays - it is the general topbar-dropdown look, not the language one. */ /* Shared anchored dropdown card + rows (mockup look) — the ONE source for a topbar menu (language now; any future topbar dropdown reuses it). Built on the Wave E interaction-states tokens so the hover matches everywhere. */ .chrome-menu { position: absolute; top: calc(100% + 8px); /* Anchor the menu's END edge to the trigger so it opens INTO the viewport. The topbar action cluster sits at the inline-start side, so a menu pinned at inset-inline-start would spill off-screen (F4b clip bug). */ inset-inline-end: 0; z-index: 300; min-width: 168px; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow-y: auto; padding: var(--space-2); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); } .chrome-menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2-5); width: 100%; padding: 9px 11px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); text-align: start; transition: background var(--state-duration) var(--state-ease); } .chrome-menu-item:hover { background: var(--state-hover-surface); } .chrome-menu-item.active { color: var(--accent); } .chrome-menu-check { color: var(--accent); flex-shrink: 0; } /* Hide-on-scroll (owner: "sticky with scroll, then disappears"): the direction-aware scroll signal (lib/screen-tab-scroll.js) toggles .chrome-hidden on .main while scrolling DOWN; the topbar slides up and reclaims its 64px so the content gets the room. Scroll UP (or near the top / on navigation) shows it again. */ .main.chrome-hidden .topbar { transform: translateY(-100%); margin-top: -64px; } @media (prefers-reduced-motion: reduce) { .topbar { transition: none; } } .topbar .search { flex: 1; max-width: 440px; position: relative; } /* Mobile/tablet search affordance: a magnifier button that expands the search. Hidden on desktop (the inline box is always visible there); the <=768px media block flips it to inline-flex. */ .topbar-search-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-subtle); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; } .topbar-search-toggle:hover { background: var(--bg-hover); color: var(--accent); } /* ADR-287: the topbar center is a LAUNCHER, not an input. It renders as a search box so nothing changes visually, but clicking it (or Cmd+K / Ctrl+K anywhere) hands the query to the command palette. The old input rules, the mobile expand-in-place overlay, and its close (X) are gone with it - the phone opens the same palette full-screen instead. */ .topbar .search-launcher { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 9px 14px; background: var(--bg-subtle); border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-size: var(--text-sm); color: var(--text-muted); text-align: start; cursor: pointer; transition: background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth); } .topbar .search-launcher:hover { background: var(--bg-elevated); border-color: var(--border); } .topbar .search-launcher:focus-visible { outline: none; background: var(--bg-elevated); border-color: var(--border-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .search-launcher-icon { display: inline-flex; align-items: center; color: var(--text-tertiary); flex-shrink: 0; } .search-launcher-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-launcher-kbd { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: var(--text-xs); font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); } .topbar .search-launcher:hover .search-launcher-kbd, .topbar .search-launcher:focus-visible .search-launcher-kbd { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; } /* ══════════════════════════════════════════════════════════════════════════ Chrome round 3 (owner 2026-08-13) — the topbar is rented, not owned. ══════════════════════════════════════════════════════════════════════════ Measured on the owner's 412px phone: five chrome controls held ~69% of the bar and the screen's own name held ~17%, ellipsized to "الاستـ…" on every screen. `.topbar-actions` is `flex-shrink: 0`, so the title is served last out of whatever the icons leave — the same disease as the screen header's uncapped action column, and with touch targets there is no shrinking to do. Fewer controls is the only real fix, so the test each one had to pass was: does its value CHANGE, and is it needed on EVERY screen? A preference set once in the clinic's lifetime fails it, and so does a destination. • the language globe -> folded into the appearance popover (set-once) • the announcements bell -> Modir's «التحديثات» Owner ruling 2026-08-13, after seeing it: the CLINIC ROOM STAYS in the bar. Both were proposed for the move; only the feed actually belonged there. The room is a live conversation the clinic is having right now, and its unread is something you act on within minutes — one tap, on the bar, is the right cost for that. Platform updates are read once a month; one tap deeper is free. The bar settles at four, not three. The bell below stays MOUNTED — its panel and login splash are portals, and it publishes the unread count Modir reads. Only the button is hidden; deleting the component would take the feed offline instead of moving it. */ .topbar .ann-icon-btn { display: none; } .coin-wallet-pill { min-width: 66px; height: 38px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, #d59b19 48%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #fff7d6 88%, var(--bg-elevated)), var(--bg-elevated)); color: #805900; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 14px rgba(182, 125, 0, .12); transition: transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth); } .coin-wallet-pill:hover { box-shadow: 0 7px 20px rgba(182, 125, 0, .2); } .coin-wallet-pill:focus-visible { outline: 3px solid color-mix(in srgb, #d59b19 28%, transparent); outline-offset: 2px; } .coin-wallet-mark { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; color: #6c4700; background: linear-gradient(145deg, #fff4a8 0%, #f3c94e 48%, #c98b12 100%); border: 1px solid rgba(121, 76, 0, .28); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 6px rgba(144, 93, 0, .2); font-family: Georgia, serif; font-size: 13px; font-weight: 900; } .coin-wallet-mark--hero { width: 52px; height: 52px; font-size: 26px; box-shadow: inset 0 2px 0 rgba(255,255,255,.72), 0 8px 22px rgba(144,93,0,.2); } .coin-wallet-panel { display: grid; gap: 14px; } .coin-wallet-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #fff9df, color-mix(in srgb, #f3c94e 12%, var(--bg-elevated))); border: 1px solid color-mix(in srgb, #d59b19 34%, var(--border)); } .coin-wallet-hero-label { color: var(--text-secondary); font-size: 12px; font-weight: 800; } .coin-wallet-hero-value { color: var(--text-primary); font-size: 32px; line-height: 1.15; font-weight: 950; } .coin-wallet-hero-symbol { color: #805900; font-size: 12px; font-weight: 900; } .coin-wallet-hold-note,.coin-wallet-expiry-note { padding: 10px 12px; border-radius: 12px; background: var(--bg-subtle); color: var(--text-secondary); font-size: 12px; } .coin-wallet-hold-note { display: flex; align-items: center; gap: 7px; } .coin-wallet-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .coin-wallet-movements { display: grid; gap: 8px; } .coin-wallet-movement { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-elevated); } .coin-wallet-movement-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; } .coin-wallet-movement-icon.is-credit { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); } .coin-wallet-movement-icon.is-debit { color: #a56d00; background: rgba(213,155,25,.12); } .coin-wallet-movement-main { min-width: 0; display: grid; gap: 2px; } .coin-wallet-movement-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .coin-wallet-movement-main span { color: var(--text-tertiary); font-size: 11px; } .coin-wallet-credit { color: var(--success); } .coin-wallet-debit { color: #a56d00; } .coin-wallet-empty { padding: 24px; text-align: center; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-tertiary); } .icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: transparent; color: var(--text-secondary); border: 1px solid transparent; cursor: pointer; position: relative; transition: all var(--duration-fast) var(--ease-smooth); } /* Hover Wave 2a: the .icon-btn:hover that lived here (bg-subtle) was dead by cascade - the Wave-E token rule later in the file overrode its background and repeated its color. ONE source now (the token rule). */ .icon-btn .pulse-dot { position: absolute; top: 8px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg-elevated); } /* ── R2 W1d (owner reference shot 2026-07-10): premium topbar icon cluster ── The tool icons read as bare PREMIUM GLYPHS (no boxes): circular ghost hit areas + the central hover surface. ONE exception by design: the REFRESH is a real contained button (border + elevated surface + soft shadow) so the cluster has a single anchored control, like the reference. The language pill drops its border/box and joins the ghost family. Scoped to .topbar so .icon-btn elsewhere (drawers, tables) is untouched. */ .topbar .icon-btn { width: 36px; height: 36px; border-radius: var(--radius-pill); background: transparent; border-color: transparent; color: var(--text-secondary); } /* ONE hover across the whole cluster (owner): the SIDEBAR's central recipe — hover surface + accent emphasis border — instead of per-control hovers. transform: none kills the premium layer's scale(1.06) here so the feel is IDENTICAL to the sidebar (which never zooms). */ .topbar .icon-btn:hover, .topbar .icon-btn.topbar-refresh:hover { background: var(--state-hover-surface); border-color: var(--state-emphasis-border); color: var(--text-primary); transform: none; } /* The ONE contained control: refresh. Hovering pre-spins the arrows a notch — a quiet "this will act" affordance; the real spin plays while refreshing. */ .topbar .icon-btn.topbar-refresh { border: 1px solid var(--border); background: var(--bg-elevated); border-radius: var(--radius); box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 6%, transparent); } .topbar .icon-btn.topbar-refresh svg { transition: transform .35s cubic-bezier(.16, 1, .3, 1); } .topbar .icon-btn.topbar-refresh:hover svg { transform: rotate(80deg); } .topbar .icon-btn:focus-visible { outline: none; box-shadow: var(--ring-shadow); } @media (prefers-reduced-motion: reduce) { .topbar .icon-btn.topbar-refresh svg { transition: none; } .topbar .icon-btn.topbar-refresh:hover svg { transform: none; } } /* ============================================ Page header ============================================ */ .page-header { padding: 24px 32px 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .page-title { font-size: 24px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; } .page-subtitle { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 4px; } /* ══════════════════════════════════════════════════════════════════ W-HDR (owner 2026-07-17) — --screen-inset: THE screen's horizontal inset. ONE number, three device steps, read by BOTH the content and the header above it. ══════════════════════════════════════════════════════════════════ Root cause it fixes: `.page-content` stepped 32 -> 24 -> 16 while `.screen-header` hardcoded 32 with no media query, so on every screen whose header lives OUTSIDE .page-content (the .finance-shell family: finance / services / inventory) the title drifted from the cards below it — measured 8px at tablet, 16px at mobile. Half the screens aligned, half didn't; that IS the "titles sit in different places". Now both read this var, so they cannot drift again by construction. Steps match the breakpoints .page-content already used (1200 / 768), 768 being the app's de-facto device line (~35 uses + the mobile shell + the bottom nav + .kpi-grid) and --bp-tablet in tokens.css. ══════════════════════════════════════════════════════════════════ */ :root { --screen-inset: 32px; } @media (max-width: 1200px) { :root { --screen-inset: 24px; } } @media (max-width: 768px) { :root { --screen-inset: 16px; } } .page-content { padding: 16px var(--screen-inset) 32px; } /* ══════════════════════════════════════════════════════════════════ THE LAW: --screen-inset is applied EXACTLY ONCE per screen. ══════════════════════════════════════════════════════════════════ Anything already inset by an ancestor content column does NOT inset itself again - otherwise the two silently ADD and that screen sits deeper than every other one. Measured before this rule (778px, inset 24): whatsapp nested .page-content inside .page-content -> 48px, i.e. double, while its 13 siblings sat at 24. finance/services stacked the .finance-scroll shell's bespoke 14px the same way -> 38px. Every "why is this screen further in?" report traces back to a second application of the inset, so the fix lives here, once, for all of them. (`.page-content > .screen-header` is the same law for the header.) ══════════════════════════════════════════════════════════════════ */ .page-content .page-content { padding-inline: 0; } /* "The topbar is the header" (2026-07-06+, owner-approved placement): the ScreenActionBar row under the topbar hosts each screen's ONE primary action (RTL-left end) + an optional muted context string (RTL-right). Rendered by Router.jsx from AppContext.screenAction (set via useScreenAction). Slim - replaces the ~210px dash-hero. Horizontal padding matches .page-content so the action aligns with the content below it. Renders nothing when the screen declares no action. */ .screen-action-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 32px 12px; border-bottom: 1px solid var(--border); } .screen-action-bar .sab-context { font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Owner note (2026-07-06): the action reads best on the RTL-left but pulled INWARD from the extreme edge, not stranded in the far corner. This inset scales with the viewport (bigger gap on wide desktops, small on phones). */ .screen-action-bar .btn { flex-shrink: 0; margin-inline-end: clamp(16px, 8vw, 120px); } @media (max-width: 768px) { .screen-action-bar { padding: 12px 16px 10px; } .screen-action-bar .btn { margin-inline-end: 24px; } } /* ============================================ Grid helpers ============================================ */ .grid { display: grid; gap: var(--space-4); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .flex { display: flex; } .flex.gap-8 { gap: var(--space-2); } .flex.gap-12 { gap: var(--space-3); } .flex.ai-c { align-items: center; } .flex.jc-sb { justify-content: space-between; } .flex.wrap { flex-wrap: wrap; } /* ============================================ Animations ============================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* accountingBackdropIn keyframe consolidated into backdropIn (V-Interaction/3, ADR-064) — identical opacity-only fade */ @keyframes accountingModalIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.975) translateY(12px); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); } } .fade-in { animation: fadeIn 0.25s ease-out; } .scale-in { animation: scaleIn var(--duration-base) var(--ease-out); } .accounting-backdrop { animation: backdropIn var(--duration-base) var(--ease-out); } .accounting-modal { animation: accountingModalIn var(--modal-in) var(--modal-in-ease) var(--modal-lead) backwards; will-change: transform, opacity; } /* ============================================ Modal — Glass Morphism Style ============================================ */ @keyframes modalIn { from { opacity: 0; transform: translateY(26px) scale(0.965); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } } .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(var(--glass-blur-sm)); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); display: grid; place-items: center; z-index: 100; animation: backdropIn var(--duration-base) var(--ease-out); } [data-theme="luxe"] .modal-backdrop, [data-theme="midnight"] .modal-backdrop, [data-theme-mode="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.55); } /* Glass card — used by .modal AND .modal-box. Glass values come from tokens.css (--glass-bg / --glass-blur / --glass-border / --glass-shadow); dark themes auto-switch via [data-theme] overrides in tokens.css, so no per-theme block is needed here (ADR-017). */ .modal, .modal-box { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--glass-shadow); max-width: 600px; width: calc(100vw - 40px); max-height: calc(100dvh - 80px); display: flex; flex-direction: column; overflow: hidden; animation: modalIn var(--modal-in) var(--modal-in-ease) var(--modal-lead) backwards; } .modal.lg, .modal-lg { max-width: 760px; } .modal.xl, .modal-xl { max-width: 1100px; } .modal-header { padding: 20px 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } [data-theme="luxe"] .modal-header, [data-theme="midnight"] .modal-header, [data-theme-mode="dark"] .modal-header { border-bottom-color: rgba(255,255,255,0.07); } .modal-title { font-size: 18px; font-weight: 800; color: var(--text-primary); } .modal-body { padding: var(--space-6); overflow-y: auto; flex: 1; } .modal-footer { padding: 16px 24px; border-top: 1px solid rgba(0, 0, 0, 0.07); display: flex; gap: var(--space-2); justify-content: flex-start; } [data-theme="luxe"] .modal-footer, [data-theme="midnight"] .modal-footer, [data-theme-mode="dark"] .modal-footer { border-top-color: rgba(255,255,255,0.07); } /* Accounting modals — override .card with glass tokens (ADR-017) */ .accounting-modal { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; border-radius: var(--radius-xl) !important; } /* ============================================ Glass Modal Utility — for inline-style modals Add className="gm-bd" to backdrop, "gm-box" to modal box ============================================ */ .gm-bd { background: rgba(0, 0, 0, 0.22) !important; backdrop-filter: blur(var(--glass-blur-sm)) !important; -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important; } [data-theme="luxe"] .gm-bd, [data-theme="midnight"] .gm-bd, [data-theme-mode="dark"] .gm-bd { background: rgba(0, 0, 0, 0.55) !important; } .gm-box { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; border-radius: var(--radius-xl) !important; animation: modalIn var(--modal-in) var(--modal-in-ease) var(--modal-lead) backwards !important; } /* ============================================ Tables ============================================ */ /* Anatomy W2 (2026-07-12): the ONE .data-table shell. Was 4 scattered blocks (here + ~3078 + ~5131 + ~5740) that partly cancelled each other (uppercase set then unset, tr transition ×3, border-collapse collapse then separate, header restyled twice). Merged into this single premium block so every table shares one look. Premium refinements: 600-weight muted header (no uppercase), sticky, hairline separators, consistent row rhythm. Row-accent stripes / selection / clickable hover-stripe / striped+compact+no-sticky modifiers stay in their own labelled blocks. */ .data-table { width: 100%; border-collapse: separate; /* separate + spacing:0 keeps the sticky-header border intact */ border-spacing: 0; font-size: var(--text-base); } .data-table thead th { text-align: start; padding: 8px 16px; position: sticky; top: 0; z-index: 1; font-size: var(--text-meta); font-weight: 600; color: var(--text-tertiary); letter-spacing: 0; text-transform: none; background: var(--bg-elevated); border-bottom: 1px solid var(--border); white-space: nowrap; transition: background var(--duration-fast) var(--ease-smooth); } .data-table tbody td { padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; line-height: 1.5; transition: background-color var(--duration-fast) var(--ease-smooth); } /* Hover Wave 2a/3b: ONE row-hover rule (-> --state-row-hover), guarded by @media (hover: hover) so touch devices (tap-emulated sticky :hover) never paint it and leave it stuck. */ .data-table tbody tr { position: relative; transition: background-color var(--duration-fast) var(--ease-smooth); } @media (hover: hover) { .data-table tbody tr:hover { background: var(--state-row-hover); } } .data-table tbody tr:last-child td { border-bottom: none; } .data-table .icon-btn { width: 34px; height: 34px; border-radius: 9px; } /* ============================================ Tweaks panel ============================================ */ .tweaks-panel { position: fixed; bottom: 20px; inset-inline-start: 20px; width: 280px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4); z-index: 1000; animation: scaleIn var(--duration-base) var(--ease-out); } .tweaks-panel h4 { font-size: var(--text-sm); font-weight: 800; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } .tweak-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2-5); padding: 8px 0; } .tweak-row .label-txt { font-size: var(--text-meta); color: var(--text-secondary); font-weight: 500; } /* U-8: dev-only theme grid inside Tweaks panel (6 swatches) */ .tweak-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1-5); } .tweak-theme-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: 6px 4px; background: transparent; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); } .tweak-theme-item:hover { background: var(--bg-hover); transform: translateY(var(--lift-1)); } .tweak-theme-item.active { border-color: var(--accent); background: var(--bg-hover); } .tweak-theme-item:focus-visible { outline: none; box-shadow: var(--ring-shadow); } .tweak-theme-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.08); flex-shrink: 0; } .tweak-theme-label { font-size: 9px; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1.2; } /* ============================================ Utility ============================================ */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-lg { font-size: 16px; } .text-xl { font-size: 20px; } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } /* Anatomy W0-1: p-12 was used by inventory/variance cards but never defined - those cards rendered with NO padding from the class. */ .p-12 { padding: var(--space-3); } .p-16 { padding: var(--space-4); } .p-20 { padding: var(--space-5); } .p-24 { padding: var(--space-6); } .progress { height: 6px; background: var(--bg-subtle); border-radius: var(--radius-pill); overflow: hidden; } .progress-bar { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--duration-slow) var(--ease-smooth); } .kbd { display: inline-block; padding: 2px 6px; font-size: var(--text-xs); font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-xs); } /* Login screen specific */ .empty-state { padding: 48px 24px; text-align: center; color: var(--text-tertiary); } .empty-state-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-subtle); display: grid; place-items: center; margin: 0 auto 16px; color: var(--text-muted); } /* Calendar */ .calendar-day { background: var(--bg-elevated); min-height: 90px; padding: var(--space-2); cursor: pointer; transition: background var(--duration-fast) var(--ease-smooth); display: flex; flex-direction: column; gap: var(--space-1); } .calendar-day:hover { background: var(--bg-hover); } /* Appointment timeline */ .timeline { position: relative; padding-inline-end: 24px; } .timeline::before { content: ""; position: absolute; inset-inline-end: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--border); } .timeline-item { position: relative; padding: 0 28px 20px 0; } .timeline-item::before { content: ""; position: absolute; inset-inline-end: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg-elevated); } /* .kpi / .card.kpi family removed (KpiCard P5, 2026-07-10): last consumer was SkeletonKpi, retired for SkeletonMetricTile. Use MetricTile. */ /* Toast */ .toast { position: fixed; bottom: 24px; inset-inline-end: 24px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px 18px; z-index: 2000; display: flex; align-items: center; gap: var(--space-3); animation: scaleIn var(--duration-base) var(--ease-out); font-weight: 600; color: var(--text-primary); font-size: var(--text-base); max-width: 360px; } .toast.success { border-color: var(--success); } .toast-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--success-soft); color: var(--success); flex-shrink: 0; } /* Tabs */ .tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; } /* F5 (2026-07-09): billing status filter tabs render the shared Tabs primitive but keep the screen's inline padding + no bottom gap (the hand-rolled strip they replaced sat flush). */ .tabs.billing-status-tabs { margin-bottom: 0; padding-inline: 16px; } /* Sticky screen tabs are pinned at the WRAPPER level, uniformly, so every tabbed screen behaves the same (owner 2026-07-06 "حل معماري واحد"): - patient-file -> .pf-tab-strip (pre-existing sticky) - finance/services/inventory -> .finance-tabs-wrap (sticky) - reception -> its inline tab wrapper (sticky) position:sticky pins relative to WHATEVER scroller is active (.main-content on desktop, document.body on mobile, or an inner box) and never touches the model-agnostic pull-to-refresh. No per-.tabs sticky needed. */ .tab { padding: 10px 16px; font-size: var(--text-base); font-weight: 600; color: var(--text-tertiary); cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; transition: all var(--duration-fast) var(--ease-smooth); white-space: nowrap; font-family: inherit; margin-bottom: -1px; } .tab:hover { color: var(--text-primary); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .app-shell { flex: 1; width: 100%; height: 100%; display: flex; } .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; /* min-height:0 lets .main-content shrink below its content and scroll inside this bounded flex column (the nested-flex overflow gotcha). */ min-height: 0; } .main-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; /* Momentum scroll on older iOS; harmless elsewhere. This is the single scroll surface for the authed app on every breakpoint + platform. */ -webkit-overflow-scrolling: touch; /* Navigation Wave 2: disables the browser's own reload-on-pull on this scroller. The pull-to-refresh gesture (lib/pull-to-refresh.js) is fully PASSIVE and never fights scroll, so it relies on this CSS. */ overscroll-behavior-y: contain; } /* ══════════════════════════════════════════════════════════════════════ Mobile Shell Wave 1 (step A) — bottom tab bar + --bottom-nav-height token ══════════════════════════════════════════════════════════════════════ The bar (`app/shell/mobile-bottom-nav.jsx`) is a flex sibling INSIDE `.main` AFTER `.main-content`, so the scroller shrinks to leave room for it (no fixed-overlay + content padding hack). Desktop: display:none and the token is 0 -> floating elements (chat dock / AI ball / PTR) sit at their normal offset. <=768px: the token becomes the bar height (incl. iOS safe area) so those SAME floating elements clear the bar through ONE variable. VITE_MODIRIFY_MOBILE_SHELL=0 makes the component render null. */ :root { --bottom-nav-height: 0px; } .mobile-bottom-nav { display: none; } @media (max-width: 768px) { :root { --bottom-nav-height: calc(58px + env(safe-area-inset-bottom, 0px)); } .mobile-bottom-nav { display: flex; align-items: stretch; flex-shrink: 0; height: var(--bottom-nav-height); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg-elevated); border-top: 1px solid var(--border); box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06); z-index: 50; transition: transform 220ms var(--ease-smooth), margin-bottom 220ms var(--ease-smooth); } /* Hide-on-scroll (owner 2026-07-18): the bottom bar rides the SAME `.chrome-hidden` signal the topbar and the screen tab bar already use — set by lib/screen-tab-scroll.js from the scroll DIRECTION. No new JS and no second scroll listener, so the three chrome layers can never disagree about whether the user is scrolling down. Mirrors the topbar recipe: slide out, then give the reclaimed height back to the content with a negative margin (the bar is a flex child of `.main`, not a fixed overlay). */ .main.chrome-hidden .mobile-bottom-nav { transform: translateY(100%); margin-bottom: calc(var(--bottom-nav-height) * -1); } .mbn-tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px 5px; background: none; border: none; cursor: pointer; color: var(--text-tertiary); font-family: inherit; transition: color var(--duration-fast, 0.15s) var(--ease-smooth, ease); -webkit-tap-highlight-color: transparent; } .mbn-tab svg { transition: transform var(--duration-base, 0.2s) var(--ease-smooth, ease); } .mbn-label { font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .mbn-tab.active { color: var(--accent); } .mbn-tab.active svg { transform: scale(1.08); } /* premium active indicator: a short accent bar hugging the top edge */ .mbn-tab.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); } .mbn-tab:active { transform: scale(0.93); } /* ──────────────────────────────────────────────────────────────────── ADR-288 — MobileActionFab: the screen's ONE primary action, docked. ──────────────────────────────────────────────────────────────────── The slot is a REAL flex child of the bar, not an overlay. That is the whole no-overlap guarantee: the tabs are `flex: 1 1 0`, so they divide only the width the slot leaves behind and can never end up underneath the button. (The first attempt floated a labelled pill over a bar whose tabs still spanned the full width — it sat on top of "الفواتير" and "المالية". Owner, 2026-07-25: "شكله وحش ومغطى على اسامي السايدربار".) The pill is a CHILD of the slot, so it stays centred in its own reserved space even when a restricted account renders fewer tabs. --mfab-lift: how far it rises while naming itself. `.mbn-label` starts 34px below the bar's top edge, so 26px clears it with room to spare — the expanded pill never touches a label either. */ .mfab-slot { position: relative; flex: 0 0 70px; min-width: 0; --mfab-lift: 26px; } .mfab { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 0; height: 46px; width: auto; min-width: 46px; /* Collapsed = a circle. `max-width` (not `width`) is what animates, so the box can grow to its INTRINSIC width and stop there instead of snapping. */ max-width: 46px; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-family: inherit; font-size: var(--text-sm); font-weight: 750; white-space: nowrap; overflow: hidden; cursor: pointer; z-index: 5; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 6px -1px color-mix(in srgb, var(--accent) 40%, transparent); transition: max-width var(--duration-slow, 0.36s) var(--ease-smooth, ease), padding var(--duration-slow, 0.36s) var(--ease-smooth, ease), gap var(--duration-slow, 0.36s) var(--ease-smooth, ease), transform var(--duration-slow, 0.36s) var(--ease-smooth, ease), background var(--duration-base, 0.2s) var(--ease-smooth, ease), box-shadow var(--duration-base, 0.2s) var(--ease-smooth, ease); } .mfab-glyph { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mfab-label { max-width: 0; opacity: 0; overflow: hidden; transition: max-width var(--duration-slow, 0.36s) var(--ease-smooth, ease), opacity var(--duration-base, 0.2s) var(--ease-smooth, ease); } /* The announce moment: rise clear of the labels, widen to the measured intrinsic width (--mfab-open, set per label by the component), hold, then settle back to a circle. It fires only when the action itself CHANGES. */ .mfab.is-announcing { max-width: var(--mfab-open, 200px); padding: 0 16px; gap: 7px; transform: translateX(-50%) translateY(calc(var(--mfab-lift) * -1)); box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.28), 0 6px 18px -4px color-mix(in srgb, var(--accent) 55%, transparent); } .mfab.is-announcing .mfab-label { max-width: 220px; opacity: 1; } /* The measuring state: the pill's OPEN shape with no width cap, so the component can ask the browser for its true intrinsic width instead of restating padding/gap/icon-size as a constant in JS (which drifted by 2px and clipped the last Arabic letter). Applied and removed inside one layout effect, so it is never painted. */ .mfab.is-measuring { max-width: none; padding: 0 16px; gap: 7px; transition: none; } .mfab.is-measuring .mfab-label { max-width: none; opacity: 1; transition: none; } /* No primary action on this screen/tab -> muted, opens the command palette. It must never DISAPPEAR: a control that vanishes under the thumb changes the bar's contents mid-reach and reads as a bug. */ .mfab.is-quiet { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); box-shadow: 0 3px 12px -2px rgba(0, 0, 0, 0.14); } .mfab:disabled { opacity: 0.55; cursor: default; } .mfab:active:not(:disabled) { transform: translateX(-50%) scale(0.93); } .mfab.is-announcing:active:not(:disabled) { transform: translateX(-50%) translateY(calc(var(--mfab-lift) * -1)) scale(0.93); } .mfab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .mfab-glyph { animation: mfabGlyphIn var(--duration-slow, 0.36s) var(--ease-smooth, ease); } @keyframes mfabGlyphIn { 0% { transform: rotate(-60deg) scale(0.35); opacity: 0; } 60% { transform: rotate(5deg) scale(1.08); opacity: 1; } 100% { transform: rotate(0) scale(1); opacity: 1; } } /* #7: hide the content scrollbars on touch. MODEL-AGNOSTIC: the authed scroller is `.main-content` for simple screens, but tabbed screens (reception / finance / analytics) keep their tab strip fixed and scroll an INNER overflow:auto box — so hide BOTH `.main-content` AND every descendant's scrollbar (mirrors the model-agnostic scroll-to-top). Mobile browsers auto-hide them anyway; this keeps the premium feel on the Android WebView + emulated mobile. */ .main-content, .main-content * { scrollbar-width: none; } .main-content::-webkit-scrollbar, .main-content *::-webkit-scrollbar { display: none; } } @media (prefers-reduced-motion: reduce) { .mobile-bottom-nav { transition: none; } .mbn-tab, .mbn-tab svg { transition: none; } .mbn-tab:active { transform: none; } /* ADR-288: the pill still NAMES itself (that is information, not decoration) — it just stops travelling to do it. No lift, no glyph spin, no easing. */ .mfab, .mfab-label { transition: none; } .mfab-glyph { animation: none; } .mfab.is-announcing { transform: translateX(-50%); } .mfab.is-announcing:active:not(:disabled) { transform: translateX(-50%); } .mfab:active:not(:disabled) { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════════════════════ Mobile Shell Wave 1 step B — theme-in-sidebar (#6) + drawer safe-area (#5) + route slide (#4) ══════════════════════════════════════════════════════════════════════ */ /* #6 RETIRED (Chrome round 3, owner 2026-08-13). The mobile-only collapsible swatch block in the nav sheet is gone, with its reveal keyframes. It only ever existed because the topbar appearance button was hidden on phones; the owner asked for that button back, so this was a second, heavier door onto one preference. Appearance + language are ONE topbar popover now, on every breakpoint (see .theme-picker-drop and the .topbar-theme rules). */ /* #5: the clinic-room native safe-area fix MOVED (owner 2026-07-18). The bespoke `.crd-drawer` is gone — the Clinic Room now shares the central ChatModal with WhatsApp and Modir, so the status-bar / home-indicator handling lives ONCE on `body.is-native .rm-card.chat-modal` (search "Native (Capacitor) safe areas") and covers all three chats instead of one. */ /* #4: subtle slide-in on screen change (MOBILE only). A cheap transform + fade (~200ms) so navigation feels continuous, not a hard cut. Desktop keeps the instant settle (ADR-143). key=currentScreen (Router.jsx) restarts it per nav. Respects reduced-motion. */ @media (max-width: 768px) { .route-slide { animation: routeSlideIn 200ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) both; } } @keyframes routeSlideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .route-slide { animation: none; } } /* Mobile Shell #3 swipe transition: NO CSS keyframe. The pane follows the finger 1:1 and settles home entirely via a JS transform transition owned by the detector (lib/tab-swipe.js settlePane) so the new content rides one continuous slide from the finger's release offset -- a keyframe here would fight it. */ /* Premium tab polish (Mobile Shell #3 follow-up, 2026-07-05). The shared underline tab model stays (every tabbed screen uses `.tab`), but the active + hover states get a modern treatment: rounded top corners, a soft hover fill, a whisper-light accent tint on the active tab, and a rounded INSET accent bar instead of a flat full-width line. `.tabs .tab` is already position:relative, so the bar is an ::after that grows in. NOTE: the active FILL avoids `--accent-soft` on purpose — the count badge uses that token, so a same-token fill would swallow it. NO edge gradients / chevrons (ADR-140 W6 retired). */ .tab { border-radius: 10px 10px 0 0; } @media (hover: hover) { .tabs .tab:hover:not(.active) { background: var(--bg-hover); /* Hover Wave 2a: the color half of this hover lived in a second identical selector in the premium section - merged here. */ color: var(--text-secondary); } } .tab.active { border-bottom-color: transparent; /* the flat line is replaced by the inset bar */ background: color-mix(in srgb, var(--accent) 8%, transparent); } .tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; /* flush with the tab bottom -- no protrusion (.tabs overflow-y computes to auto) */ height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); animation: tabBarIn var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)); } @keyframes tabBarIn { from { transform: scaleX(0.4); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tab.active::after { animation: none; } } /* Pull-to-refresh indicator (Navigation Wave 2) ---------------------------- One fixed pill owned by lib/pull-to-refresh.js (passive gesture). Hidden by default; the controller drives transform + opacity as the finger pulls the scroller down at the top, then spins on release. Touch devices only. */ .ptr-indicator { position: fixed; top: 0; left: 50%; z-index: 1500; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-elevated); box-shadow: var(--shadow-lg); opacity: 0; transform: translate(-50%, -44px); pointer-events: none; will-change: transform, opacity; } .ptr-indicator.ptr-return { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease; } .ptr-indicator.is-armed { box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); } .ptr-spinner { width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; } .ptr-indicator.is-spinning .ptr-spinner { animation: spin 0.7s linear infinite; } /* Mobile gets pull-to-refresh (a passive global gesture), so the redundant topbar refresh button is hidden at the topbar's own mobile breakpoint -- the same 47.99em line the sidebar/hamburger split uses. Width-based, NOT `pointer: coarse`: the media-feature query did not match reliably in Chrome DevTools device emulation (nor some webviews), so the button never hid. Desktop (>47.99em) keeps the manual refresh button. The back arrow was removed from the topbar markup entirely -- see topbar.jsx. */ @media (max-width: 47.99em) { .topbar-refresh { display: none; } /* Wave C: drop the title icon square on phones so the screen name keeps room next to the action cluster (the lang toggle stays - it has no mobile alternative). */ .topbar-title-icon { display: none; } } @media (max-width: 1200px) { .sidebar { width: 224px; } .page-header { padding: 20px 24px 8px; } .page-content { /* W-HDR: horizontal via --screen-inset (24px here) so the header above tracks it; the vertical steps stay per-breakpoint. */ padding: 14px var(--screen-inset) 24px; } .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .topbar { padding: 0 16px; gap: var(--space-3); } .topbar .search { max-width: 320px; } .page-title { font-size: var(--text-title); } .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .modal { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); } .modal-header, .modal-body, .modal-footer { padding-inline: 18px; } .data-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } } @media (max-width: 768px) { /* MOBILE SCROLL MODEL (2026-07-04 architectural fix): the whole app uses ONE scroll model on EVERY breakpoint + platform -- the shell is a fixed 100dvh flex column and `.main-content` owns the scroll (the base `#root` + `.main-content` rules already define this). The old override that lived here (`html,body{overflow:auto}` + shell `height:auto` -> the PAGE/body became the scroller) was the ROOT CAUSE of dead single-finger scroll on mobile browsers AND the native app, and has been REMOVED. There is no longer an override fighting the base model. */ /* U-7/2 — the desktop sidebar is hidden on mobile; navigation moves into the MobileNav bottom-sheet (opened by the topbar hamburger). */ .app-shell > .sidebar { display: none; } .topbar { height: auto; padding: 12px 16px; align-items: center; flex-wrap: wrap; gap: var(--space-2-5); } /* Hamburger first, title block takes remaining width on the same row */ .topbar > .topbar-hamburger { order: 0; flex-shrink: 0; } .topbar > .topbar-title-block { order: 1; flex: 1; min-width: 0; } .topbar .search { order: 3; width: 100%; max-width: none; } .topbar-actions { order: 4; width: 100%; margin-inline-start: 0; justify-content: flex-start; flex-wrap: wrap; } .page-header { padding: 16px 16px 8px; align-items: flex-start; } .page-title { font-size: 20px; } .page-subtitle { font-size: var(--text-meta); } .page-content { /* W-HDR: horizontal via --screen-inset (16px here). */ padding: 12px var(--screen-inset) 20px; } .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; } .modal-header, .modal-body, .modal-footer { padding: var(--space-4); } .toast { inset-inline: 12px; bottom: 12px; max-width: none; } .tweaks-panel { width: calc(100vw - 24px); inset-inline-start: 12px; bottom: 72px; } } @keyframes spin { to { transform: rotate(360deg); } } /* idea #2 — one-time pulse ring on the topbar "watch this screen" help button. A ::after ring (var(--accent), dark-mode safe) scales + fades out. The button sets position:relative inline; the ring is pointer-events:none so it never blocks the click. Only present while .topbar-help-pulse is on (until the user opens the help once). */ .topbar-help-pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; animation: topbarHelpPulse 1.8s ease-out infinite; } @keyframes topbarHelpPulse { 0% { opacity: .55; transform: scale(.85); } 70% { opacity: 0; transform: scale(1.55); } 100% { opacity: 0; transform: scale(1.55); } } /* idea #2 step 2 — مركز الشرح (learning library) cards in the support screen. Responsive auto-fit grid; each card is a YouTube thumbnail with a play overlay + a title below. All-plans (no gating). */ .help-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); } .help-lib-card { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); cursor: pointer; overflow: hidden; text-align: start; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .help-lib-card:hover { border-color: var(--accent); transform: translateY(var(--lift-2)); box-shadow: var(--shadow-md); } .help-lib-card__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-subtle); overflow: hidden; } .help-lib-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .help-lib-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .28); transition: background .15s ease; } .help-lib-card:hover .help-lib-card__play { background: rgba(0, 0, 0, .12); } .help-lib-card__title { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); line-height: 1.4; padding: 0 10px 12px; } /* Clinic Room (ADR-197) Wave 4 — the "nudge/buzz" icon shake. Applied to the topbar chat icon for ~0.6s when an incoming nudge arrives. */ @keyframes cr-nudge-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-4px) rotate(-6deg); } 30% { transform: translateX(4px) rotate(6deg); } 45% { transform: translateX(-3px) rotate(-4deg); } 60% { transform: translateX(3px) rotate(4deg); } 75% { transform: translateX(-2px); } } .cr-nudge-shake { animation: cr-nudge-shake 0.6s ease-in-out; } /* ============================================================ Kanban Board — العيادة اليوم ============================================================ */ .kanban-board { display: grid; /* 6 stages since 2026-07-18 (cancelled got its own column). */ grid-template-columns: repeat(6, 1fr); gap: var(--space-2-5); overflow-x: auto; padding-bottom: 8px; align-items: start; } .kanban-col { min-width: 150px; max-width: 220px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .kanban-col-hdr { padding: 8px 10px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: var(--text-meta); background: var(--bg-elevated); } .kanban-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 9px; background: var(--bg-elevated); transition: box-shadow var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth); cursor: default; font-size: var(--text-meta); } /* Hover Wave 2b: the kanban-card hover that lived here was one of THREE stacked .kanban-card:hover rules (this + premium + redesign) where the cascade already let the last one win per-property. ONE rule now lives in the kanban redesign section with the exact effective values. */ .kanban-empty { text-align: center; color: var(--text-tertiary); padding: 16px 6px; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: var(--text-xs); } .wa-template-preview { background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 12px 12px 12px 4px; padding: 14px 16px; font-size: var(--text-sm); line-height: 1.8; color: #065f46; white-space: pre-line; } .wa-template-preview::before { content: 'نص الرسالة'; display: block; font-size: var(--text-micro); font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .wa-stat { border: 1px solid var(--border); background: var(--bg-subtle); border-radius: var(--radius); padding: 12px 14px; } .wa-stat-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 6px; } .wa-stat-value { font-size: var(--text-title); font-weight: 800; color: var(--text-primary); } .wa-template-editor { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-3); } @media (max-width: 900px) { .wa-template-editor { grid-template-columns: 1fr; } } /* ============================================================ Lab Orders ============================================================ */ /* Wave 2a (V-Patients/4) — patient rows with outstanding debt get a subtle red leading edge. The .patients-table mobile-card sibling inherits the same accent via .dt-card.patient-row-debt rule below. */ .data-table tbody tr.patient-row-debt > td:first-child { box-shadow: inset 3px 0 0 0 var(--danger); } [dir="rtl"] .data-table tbody tr.patient-row-debt > td:first-child { box-shadow: inset -3px 0 0 0 var(--danger); } .dt-card.patient-row-debt { border-inline-start: 3px solid var(--danger); } /* Shared settlement rows — invoices, expenses, purchases, and lab orders use the same paid/partial/unpaid leading edge on desktop and mobile. */ .data-table tbody tr.settlement-row--paid > td:first-child { box-shadow: inset 3px 0 0 0 var(--success); } .data-table tbody tr.settlement-row--partial > td:first-child { box-shadow: inset 3px 0 0 0 var(--accent); } .data-table tbody tr.settlement-row--unpaid > td:first-child { box-shadow: inset 3px 0 0 0 var(--danger); } [dir="rtl"] .data-table tbody tr.settlement-row--paid > td:first-child { box-shadow: inset -3px 0 0 0 var(--success); } [dir="rtl"] .data-table tbody tr.settlement-row--partial > td:first-child { box-shadow: inset -3px 0 0 0 var(--accent); } [dir="rtl"] .data-table tbody tr.settlement-row--unpaid > td:first-child { box-shadow: inset -3px 0 0 0 var(--danger); } .dt-card.settlement-row--paid { border-inline-start: 3px solid var(--success); } .dt-card.settlement-row--partial { border-inline-start: 3px solid var(--accent); } .dt-card.settlement-row--unpaid { border-inline-start: 3px solid var(--danger); } /* Wave 2d (V-Inventory/5) — inventory rows get a leading edge keyed to stock status: out=danger / low=warning. Available rows stay neutral (no border). Applied to both desktop table row first-cell AND mobile card border-inline-start. */ .data-table tbody tr.inv-row--out > td:first-child { box-shadow: inset 3px 0 0 0 var(--danger); } .data-table tbody tr.inv-row--low > td:first-child { box-shadow: inset 3px 0 0 0 var(--warning); } [dir="rtl"] .data-table tbody tr.inv-row--out > td:first-child { box-shadow: inset -3px 0 0 0 var(--danger); } [dir="rtl"] .data-table tbody tr.inv-row--low > td:first-child { box-shadow: inset -3px 0 0 0 var(--warning); } .dt-card.inv-row--out { border-inline-start: 3px solid var(--danger); } .dt-card.inv-row--low { border-inline-start: 3px solid var(--warning); } /* ============================================================ Bulk row selection (ADR-208) — checkbox column + selected-row highlight, shared by every selectable DataTable. Mobile card gets the checkbox inside the card head. ============================================================ */ .data-table .dt-select-col { width: 40px; text-align: center; padding-inline: 8px; } .data-table .dt-select-col input[type="checkbox"], .dt-card-select input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); margin: 0; } .data-table tbody tr.dt-row--selected > td { background: color-mix(in srgb, var(--accent) 9%, transparent); } .dt-card-select { display: inline-flex; align-items: center; cursor: pointer; padding-inline-end: 4px; } .dt-card.dt-card--selected { border-color: var(--accent); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); } /* Hover-reveal selection checkboxes (owner 2026-07-12): on desktop tables the checkbox column stays for layout stability, but each box is invisible at rest and fades in on row hover, on keyboard focus, when its row IS selected, or once ANY row is selected (dt-has-selection - keeps multi-select easy). Opt-in via the `dt-select-reveal` class (patients + billing). Mobile card selection is gated separately by selectableMobile, so this desktop-only reveal never hides a box the phone needs. */ .data-table.dt-select-reveal .dt-select-col input[type="checkbox"] { opacity: 0; transition: opacity .15s ease; } .data-table.dt-select-reveal tr:hover > .dt-select-col input[type="checkbox"], .data-table.dt-select-reveal .dt-select-col input[type="checkbox"]:focus-visible, .data-table.dt-select-reveal tbody tr.dt-row--selected > .dt-select-col input[type="checkbox"], .data-table.dt-select-reveal.dt-has-selection .dt-select-col input[type="checkbox"] { opacity: 1; } /* ============================================================ UI Consistency Pass Shared visual polish only. Keep behavior and data contracts intact. ============================================================ */ :where(.btn, .icon-btn, .nav-item, .tab, .input, .select, .textarea) { -webkit-tap-highlight-color: transparent; } .btn { min-height: 42px; line-height: 1.25; } .btn.sm { min-height: 34px; } .btn.icon { min-width: 40px; min-height: 40px; } .btn svg, .icon-btn svg, .nav-item svg { flex-shrink: 0; } .btn:disabled, .icon-btn:disabled, .nav-item:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } /* U-10/2: legacy outline-based focus rule removed. Canonical --ring-shadow rule now lives at line ~4573 (Unified focus rings) and explicitly includes .icon-btn + .nav-item. */ .input, .select, .textarea { min-height: var(--field-h); /* Sizing W9: adopt token (was 42px -> 40) so every form field derives from one place */ line-height: 1.45; } .textarea { min-height: 92px; resize: vertical; } .input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-subtle); color: var(--text-tertiary); cursor: not-allowed; opacity: 1; } .card { transition: border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth), background-color var(--duration-fast) var(--ease-smooth); } .card:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 80%, transparent); } .page-title { line-height: 1.25; letter-spacing: 0; } .page-subtitle { line-height: 1.6; } .page-header > *, .topbar > * { min-width: 0; } .page-header .flex { flex-wrap: wrap; } .nav-item { line-height: 1.35; } .nav-item > span:not(.icon-box) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* (.data-table base + thead + icon-btn consolidated into the ONE Tables shell above — 2026-07-12. This block used to UNSET the uppercase the base set, a classic cascade duplication.) */ .tabs { gap: var(--space-1-5); scrollbar-width: thin; } .tab { min-height: 42px; line-height: 1.35; white-space: nowrap; } .empty-state { min-height: 180px; display: grid; place-items: center; align-content: center; gap: var(--space-2); line-height: 1.6; } .empty-state-icon { box-shadow: inset 0 0 0 1px var(--border); } .toast, .modal-title { line-height: 1.4; } .modal-body { overscroll-behavior: contain; } .modal-footer { flex-wrap: wrap; } .chip { line-height: 1.35; } .calendar-day { min-width: 0; } @media (max-width: 768px) { .btn { min-height: 40px; padding: 9px 13px; } .data-table thead th, .data-table tbody td { padding: var(--space-3); } .calendar-day { min-height: 78px; } .modal-footer .btn { flex: 1 1 120px; } } @media (max-width: 520px) { .page-header .flex, .topbar-actions { gap: var(--space-1-5); } .chip { max-width: 100%; white-space: normal; } .calendar-day { min-height: 70px; padding: var(--space-1-5); } } /* ============================================================ MARKETING SCREEN — legacy .mk-* rules (tokens only, all themes) R2 W3 purge (2026-07-10) deleted the dead families (hero, steps, sections, assets, empty maps...); what survives is consumed by the live JSX: connect banner, calendar, image states, upgrade modal. New marketing styling belongs in marketing-redesign.css (.mkx-*). ============================================================ */ /* .mk-kpi / .mk-kpis KPI strip removed (KpiCard unification Phase 1, 2026-07-09): dead family, 0 JSX consumers. Use MetricTile. */ /* -- Connection banner --------------------------------------- */ .mk-connect { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-subtle); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .mk-connect.is-on { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 30%, var(--border)); } .mk-connect.is-off { border-color: color-mix(in oklab, var(--warning) 30%, var(--border)); } .mk-connect-title { font-weight: 900; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); } .mk-connect-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px color-mix(in oklab, var(--warning) 18%, transparent); } .mk-connect.is-on .mk-connect-status-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 18%, transparent); } .mk-connect-pages { display: flex; gap: var(--space-1-5); flex-wrap: wrap; margin-top: 8px; width: 100%; } .mk-connect-page { font-size: var(--text-meta); padding: 5px 10px; border-radius: var(--radius-pill); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); } /* -- Calendar ------------------------------------------------- */ .mk-image-empty { min-height: 220px; padding: 18px; border: 1px dashed color-mix(in oklab, var(--accent) 45%, var(--border)); border-radius: var(--radius); background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%), var(--bg-subtle); display: flex; flex-direction: column; gap: var(--space-2-5); } .mk-image-empty-title { display: flex; align-items: center; gap: var(--space-2); color: var(--accent-text); font-weight: 900; } .mk-image-empty-prompt { color: var(--text-secondary); line-height: 1.7; font-size: var(--text-sm); } /* -- Reason / hint blocks ------------------------------------ */ .mk-reason { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-soft); color: var(--text-secondary); line-height: 1.7; font-size: var(--text-sm); border-inline-start: 3px solid var(--accent); } .mk-error-banner { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-weight: 800; font-size: var(--text-sm); line-height: 1.7; border-inline-start: 3px solid var(--danger); } .mk-spin { animation: spin 1s linear infinite; } /* -- Brand identity ------------------------------------------ */ /* .mk-brand-grid deleted W2-C3 (marketing-brand-drawer.jsx was removed). */ /* MKT-W3h: the ONE logo control in the composer. The preview is a real checkerboard so a NON-transparent upload is obvious before it ships on a month of images. */ .mkx-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mkx-logo-preview { width: 72px; height: 48px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; padding: 4px; background-color: var(--bg-card); background-image: linear-gradient(45deg, var(--bg-subtle) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-subtle) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-subtle) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-subtle) 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0; } .mkx-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .mk-color-pick { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-2); } .mk-color-pick input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); cursor: pointer; } /* ============================================================ Marketing — legacy .mk2-* rules (Concept V2, tokens only, RTL-first) R2 W3 purge (2026-07-10) deleted the dead zones (hero, action center, board, timeline, readiness, credit, setup...); what survives is consumed by the live JSX: confirm-generate modal + post drawer detail/meta + workspace card. ============================================================ */ /* .mk2-shell retired (R3 Phase 3, 2026-07-10): its last consumer was the marketing full-screen takeover loader - the screen root is .page-content.reveal-stagger like every other screen. */ /* ADR-075 §3: Pre-generation confirm modal — cost transparency before the AI call commits credits. Three actions (All / Text only / Cancel) stack vertically on mobile, row on desktop. */ .mk2-confirm-body{display:flex;flex-direction:column;gap:14px;padding:var(--space-1);} .mk2-confirm-headline{ font-size:var(--text-md);font-weight:800;color:var(--text-primary);line-height:1.5; } .mk2-confirm-costs{ display:flex;flex-direction:column;gap:var(--space-1-5); padding:12px 14px;border-radius:var(--radius-sm); background:var(--bg-subtle);border:1px solid var(--border-subtle, var(--border)); } .mk2-confirm-cost-row{ display:flex;align-items:center;gap:var(--space-2); font-size:var(--text-sm);color:var(--text-secondary); } .mk2-confirm-cost-row strong{ font-weight:900;color:var(--text-primary);font-variant-numeric:tabular-nums; } .mk2-confirm-cost-row.mk2-confirm-cost-sub{font-size:var(--text-meta);color:var(--text-tertiary);} .mk2-confirm-cost-row.mk2-confirm-cost-balance{ margin-top:4px;padding-top:8px;border-top:1px dashed var(--border-subtle, var(--border)); font-size:var(--text-sm);color:var(--text-primary);font-weight:600; } .mk2-confirm-coin{color:#d97706;} .mk2-confirm-warn{ display:flex;align-items:flex-start;gap:var(--space-2); padding:10px 12px;border-radius:var(--radius-sm); background:var(--warning-soft);border-right:3px solid var(--warning); font-size:var(--text-meta);color:var(--text-primary);line-height:1.6; } .mk2-confirm-warn.is-danger{ background:var(--danger-soft);border-right-color:var(--danger);color:var(--danger); } .mk2-confirm-warn strong{font-weight:900;} /* R4-J: .mk2-confirm-actions / .mk2-confirm-btn-* / .mk2-confirm-hint are gone with the hand-rolled action row they dressed. The confirm modal's buttons are the central rm-footer's now (destructive at the start, secondary + primary at the end) so they wear the app's own .btn styles — a modal restating what every other modal already says is how five action rows drift apart. */ /* .finance-shell / .finance-scroll / .finance-content / .finance-tabs-wrap REMOVED (W-REVEAL, owner 2026-07-17 - one central entrance for every screen, the same staggered reveal billing runs). This bespoke shell was a pre-ScreenTabBar leftover that only finance + services ever used, and billing / inventory / analytics prove a TABBED screen needs none of it: `.screen-tabbar` owns `position: sticky` itself (see its own comment - "replaces every per-screen position:sticky patch") and the route scroller is `.main-content`. Keeping it cost twice: 1. it padded HORIZONTALLY (14px) on top of --screen-inset, so its two screens sat 14px deeper than the other 13 (W-HDR round 2); 2. it split the header into its own .reveal-stagger, and the cascade (.reveal-stagger > *:nth-child) counts DIRECT children per container - so the header's and the content's cascades each restarted at 0.04 and landed together instead of one after another. Both screens now render the app's ONE shape: [ScreenTabBar] + `.page-content reveal-stagger` holding the header AND the sections as siblings. See finance-screen.jsx / services-screen.jsx. */ /* V-Finance/5 (ADR-057): rich per-tab empty state — icon + title + hint (mirrors REC_KANBAN_EMPTY + MK_BOARD_EMPTY visual pattern). */ .fin-empty{ display:flex;flex-direction:column;align-items:center;gap:var(--space-1-5); text-align:center;padding:48px 16px;color:var(--text-tertiary); font-size:var(--text-meta);font-weight:700; } .fin-empty-icon{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:14px; background:var(--bg-subtle);color:var(--text-tertiary);margin-bottom:4px; } .fin-empty-title{font-size:var(--text-md);font-weight:900;color:var(--text-primary)} .fin-empty-hint{font-size:var(--text-meta);font-weight:600;color:var(--text-tertiary);max-width:44ch;line-height:1.65} .fin-empty.is-success .fin-empty-icon{background:var(--success-soft);color:var(--success)} .fin-empty.is-accent .fin-empty-icon{background:var(--accent-soft);color:var(--accent-text)} .fin-empty.is-warning .fin-empty-icon{background:var(--warning-soft);color:var(--warning)} .fin-empty.is-danger .fin-empty-icon{background:var(--danger-soft);color:var(--danger)} .fin-empty.is-muted .fin-empty-icon{background:var(--bg-subtle);color:var(--text-tertiary)} /* .mk2-kpi strip removed (KpiCard unification Phase 1, 2026-07-09): dead family, 0 JSX consumers. Use MetricTile. */ /* ---------- workspace calendar card (the mk2-tl timeline zone it belonged to died in the R2 W3 purge) ---------- */ .mk2-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius-lg);padding:var(--space-4); } /* LOADING / EMPTY retired (R3 Phase 3, 2026-07-10): .mk2-loading's last consumer was the MarketingWorkspace text loader (the feed GHOST is the loading skeleton now); the .mk2-empty family had no consumers since the ghost empty state replaced it. */ /* ---------- ZONE 4 : DETAIL CONTENT (drawer shell retired) ---------- ADR-139 Wave 9 (2026-05-28): the bespoke .mk2-drawer-* shell rules are retired. All 3 marketing drawers (brand / settings / post) now render through ResponsiveModal so they inherit the premium shell + drag handle bottom-sheet + Ctrl+K animation curve. The remaining .mk2-detail-* / .mk-image-empty / .mk-reason rules below are used INSIDE the post-drawer body and stay. */ .mk2-detail-meta{ display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--space-2);margin-bottom:14px; } .mk2-meta-cell{ background:var(--bg-subtle);border-radius:var(--radius-sm);padding:8px 10px; } .mk2-meta-l{font-size:var(--text-micro);color:var(--text-tertiary);font-weight:700;margin-bottom:3px} .mk2-meta-v{font-size:var(--text-meta);color:var(--text-primary);font-weight:800} .mk2-detail-image{ border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;background:var(--bg-subtle); } .mk2-detail-image img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover} .mk2-detail-text{ min-height:200px;padding:14px; border:1px solid var(--border);border-radius:var(--radius); background:var(--bg-subtle);white-space:pre-wrap;line-height:1.85; color:var(--text-primary);font-size:var(--text-sm); } /* ---------- RESPONSIVE ---------- */ @media (max-width:1180px){ } @media (max-width:780px){ /* ADR-139 W9: .mk2-drawer rule retired — drawers migrated to ResponsiveModal. */ } /* ============================================================ End Marketing Screen ? Concept V2 stylesheet ============================================================ */ /* ════════════════════════════════════════════════════════════════════ V-PatientFile (ADR-055) — sticky header + full canvas + premium anim Replaces the pre-V layout (pf3-rail + pf3-canvas-with-command-and- clinical + pf3-drawer 3-col) where identity / next-appt / balance / tabs were duplicated 2-3× across 4 regions and the actual tab body got only ~25% of the grid. ════════════════════════════════════════════════════════════════════ */ /* Central clinical-alert strip shared by Patient File and workflow cards. */ .pf-hero-alerts{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent); } .pf-hero-alerts__label{ color: var(--text-tertiary); font-size: var(--text-meta); font-weight: 900; letter-spacing: 0; margin-inline-end: 4px; } .pf-alert{ display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: var(--text-meta); font-weight: 800; white-space: nowrap; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 14%, var(--bg-elevated)); transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-smooth); } .pf-alert:hover{ transform: translateY(var(--lift-1)) scale(1.03); box-shadow: var(--shadow-sm); } .pf-alert--danger{ color: var(--danger); animation: pfAlertPulse 2.4s ease-in-out infinite; } .pf-alert--warning{ color: color-mix(in srgb, var(--warning) 80%, #000); } .pf-alert--info{ color: var(--accent); } .pf-alert--safe{ color: var(--success); } /* Compact form of the same central clinical-alert strip for workflow cards. */ .medical-alerts-strip.is-compact{ margin: 0; padding: 7px 9px; gap: 5px; border: 1px solid color-mix(in srgb, var(--success) 18%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success) 5%, var(--bg-elevated)); } .medical-alerts-strip.is-compact.has-critical{ border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); background: color-mix(in srgb, var(--danger) 6%, var(--bg-elevated)); } .medical-alerts-strip.is-compact .pf-hero-alerts__label{ margin: 0; font-size: var(--text-micro); } .medical-alerts-strip.is-compact .pf-alert{ padding: 3px 7px; gap: var(--space-1); font-size: var(--text-micro); } .medical-alerts-strip.is-compact .pf-alert--danger{ animation: none; } @keyframes pfAlertPulse{ 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 32%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 0%, transparent); } } /* Sticky tab strip — hosts the primitive */ /* ═══════════════════════════════════════════════════════════════════════ Unified screen tab bar — ONE architecture for EVERY tabbed screen. Rendered by the shared ScreenTabBar component (app/src/ui/screen-tab-bar.jsx) as the first child under the topbar on reception / finance / services / inventory / analytics / patient-file / patients / … • position:sticky; top:0 pins it under the topbar on the single `.main-content` scroller (the app's one scroll model) — identical on every screen, so there is no per-screen sticky patch anymore. • background:var(--bg) = the page bg, so AT REST the bar is invisible (resting look unchanged) yet fully OPAQUE, so scrolled content can never bleed through it. • lib/screen-tab-scroll.js toggles `.is-scrolled` on `.main-content` while scrolled; the bar then lifts a hairline + soft shadow (the premium "stuck" state). No per-screen JS, no translucency. Replaces the old .stab-wrap elevation walker + every per-screen position:sticky patch. */ .screen-tabbar{ position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 8px 16px; margin-bottom: 12px; background: var(--bg); border-bottom: 1px solid transparent; transition: box-shadow 180ms ease, border-color 180ms ease, transform 0.22s ease, opacity 0.22s ease; } .screen-tabbar > .tabs{ flex: 1; min-width: 0; margin-bottom: 0; overflow-x: auto; scrollbar-width: none; } /* W-GAP (owner 2026-07-17): the screen header used to float 36px under the tab bar — 8 (tabbar bottom padding) + 12 (tabbar margin) + 16 (the wrapper's top padding). That void was invisible while the header greeted ("صباح الخير …"), but W-HERO made the header announce the ACTIVE TAB, so the same word ended up printed twice with a gap between — it read as broken, not as breathing room. Tighten the chrome to ~16px so the bar + header land as ONE block. Three wrapper shapes exist, hence three selectors (each screen's own scroller): .page-content → billing · patients · inventory · analytics .finance-scroll → finance (its own flex scroller) + div > .page-content → reception (wraps its tab content in a scroll div) Settings is untouched on purpose: its tab strip is mobile-only and lives inside .settings-tabs-mobile, so it never matches — and on desktop its header legitimately keeps the full top padding under the topbar. */ .screen-tabbar{ margin-bottom: 4px; } .screen-tabbar + .page-content, .screen-tabbar + .finance-scroll, .screen-tabbar + div > .page-content{ padding-top: 4px; } /* W-AURORA: TRIED AND REJECTED — do not rebuild it (owner, 2026-07-17). Three variants were shipped to localhost and judged live: v1 light inside each ScreenHeader → also broke tab-swipe on reception + finance (a negative inset enlarged their scrollers' overflow, so lib/tab-swipe.js yielded the finger — see the note there); v2 ONE page-canvas layer, top band → "حلو" but the light died at an invisible line and left the rest of the page dead white; v2.1 the same layer lit edge to edge → heavy and murky: the tint sat under every white card and the page lost its crispness. Verdict: the app's surface stays FLAT. The premium reading comes from the identity chip (W-ICON), the tightened chrome above, and the content itself — not from ambient tint. The tab bar keeps its opaque background for the reason it always had one: nothing may bleed through it while content scrolls under. */ .screen-tabbar > .tabs::-webkit-scrollbar{ display: none; } .screen-tabbar__aside{ flex-shrink: 0; display: flex; align-items: center; } .main-content.is-scrolled .screen-tabbar{ border-bottom-color: var(--border); box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.5); } /* F3 (2026-07-09, owner): the tab bar hides on scroll-DOWN together with the topbar (same .chrome-hidden signal from lib/screen-tab-scroll.js) and slides back on scroll-up / near the top, so both chrome layers clear for content. */ .main.chrome-hidden .screen-tabbar{ transform: translateY(-100%); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce){ .screen-tabbar{ transition: box-shadow 180ms ease, border-color 180ms ease; } } /* Mobile: stack the tabs over the aside (e.g. Finance's date pill) so all tabs stay reachable, matching the old finance-tabs-wrap behaviour. */ /* W-HDR (owner 2026-07-17): was 720px - the third breakpoint in the same vertical band (header 640 / tabs 720 / topbar+KPI+bottom-nav 768), so the three chrome layers a phone stacks flipped at three different widths. Joined to the app's ONE device line (768 = --bp-tablet). */ @media (max-width: 768px){ .screen-tabbar{ flex-direction: column; align-items: stretch; gap: var(--space-2); padding: 8px 12px; } .screen-tabbar > .tabs{ width: 100%; } .screen-tabbar__aside{ width: 100%; } .screen-tabbar__aside > *{ width: 100%; } } /* Responsive */ @media (max-width: 980px){ .pf-hero-alerts{ gap: var(--space-1-5); } } /* Honour prefers-reduced-motion — kill the candy, keep the layout */ @media (prefers-reduced-motion: reduce){ .pf-alert--danger{ animation: none; } .pf-alert{ transition: none; } } /* ── Pre-V-PatientFile (pf3-*) layout — REMOVED. Replaced by .pf-* above. The full pre-V audit + removal rationale is in DECISIONS.md ADR-055. ── */ /* (pf3-* layout block deleted in V-PatientFile / ADR-055 — see .pf-* CSS above) */ /* ════════════════════════════════════════════════════════════════════ ✨ PREMIUM UX/UI POLISH — Phase 1 (additive, safe to revert) ════════════════════════════════════════════════════════════════════ */ /* ── Design tokens: spacing + motion ─────────────────────────────── */ :root { /* ADR-291 W2: the grid is 4px, with TWO documented half-steps. 6px and 10px are used 169 times between them — a dense clinical UI genuinely needs a rung between 4 and 8 and between 8 and 12 for icon gaps and chip padding. Naming them makes that legitimate and, more importantly, closes the door on the 1 / 2 / 3 / 5 / 7 / 9px one-offs beside them, which have no rationale. HALF-STEPS ARE FOR TIGHT SPACING ONLY (under 12px). Anything larger stays on the whole grid. */ --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ── ADR-290: ONE entrance for every modal-family surface ──────────── Owner 2026-07-25: "أي ريسبونسف مودال يفتح بالراحة بطريقة بريميم — بحس إنه بيفتح بسرعة". Measured first: the app had SIX different opens (150 / 220 / 240 / 280 / 320 / 320ms across four curves), which is why some modals read snappier than others. The complaint was not really about DURATION. `--ease-out` (0.16, 1, 0.3, 1) is a violent ease-out: it covers 83% of the distance in the first QUARTER of the time, so a 280ms modal is perceptually a ~92ms one. Pair that with 18px of travel and the eye has nothing to follow. So: a curve that spends its time moving, more distance to move through, and the scrim dimming FIRST so the card lands on an already- settled backdrop — the part that reads expensive. Perceived open goes 92ms -> 213ms while the nominal number only moves 280 -> 340. Every modal points here, so they can never drift apart again. */ --modal-in: 340ms; --modal-in-ease: cubic-bezier(0.34, 1.16, 0.64, 1); --modal-lead: 60ms; } /* ── Smooth, premium scrollbars (everywhere) ─────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; transition: background var(--duration-fast) var(--ease-smooth); } *::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; } /* ── Card hover lift (premium feel on interactive cards) ─────────── */ .card { transition: box-shadow var(--duration-base) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth), background-color var(--duration-fast) var(--ease-smooth); } @media (hover: hover) { .card.interactive:hover, .card[role="button"]:hover { transform: translateY(var(--lift-2)); box-shadow: var(--shadow-lg); cursor: pointer; } } .card.interactive:active, .card[role="button"]:active { transform: translateY(0); transition-duration: 60ms; } /* ── Button micro-interactions ───────────────────────────────────── */ .btn { transition: background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth); } @media (hover: hover) { .btn:hover:not(:disabled) { transform: translateY(var(--lift-1)); } } .btn:active:not(:disabled) { transform: translateY(0); transition-duration: 60ms; } @media (hover: hover) { .btn.primary:hover:not(:disabled) { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); } } /* ── U-10/3: Loading state for async buttons ────────────────────── Trigger: add aria-busy="true" alongside disabled: at the call site (mirrors data-table.jsx's aria-busy idiom). Visual: currentColor spinner via ::before, caller's icon child hidden, full color preserved (overrides the .55 dim from the generic .btn:disabled rule so the loading button stays clearly the same primary/danger/etc). Animates: reuses the existing @keyframes spin from L1653 — no new keyframes block. */ .btn[aria-busy="true"] { cursor: progress; } .btn[aria-busy="true"]:disabled { opacity: 1; cursor: progress; } .btn[aria-busy="true"] > svg { display: none; } .btn[aria-busy="true"]::before { content: ''; display: inline-block; flex-shrink: 0; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } .btn.sm[aria-busy="true"]::before { width: 12px; height: 12px; border-width: 1.5px; } @media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::before { animation: none; } } /* ── Unified focus rings (accessibility + premium) ───────────────── U-10/2: uses the canonical --ring-shadow / --ring-shadow-soft tokens from U-1 (tokens.css) instead of inline color-mix. Adds .icon-btn + .nav-item to the selector list — they were previously covered by a legacy `outline: 2px solid` rule that's now removed to eliminate the double-ring inconsistency on those primitives. */ button:focus-visible, a:focus-visible, .tab:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible, [role="button"]:focus-visible { outline: none; box-shadow: var(--ring-shadow); border-radius: var(--radius); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring-shadow-soft); } /* ── Interaction States System (Chrome Wave E, 2026-07-08, owner) ────────── ONE central vocabulary for hover/focus so surfaces stop hand-rolling their own values (the accent-border hover was sidebar-only; now it is a reusable recipe). Six recipes by ROLE — centralize what must be consistent, specialize what must be meaningful (the golden rule) — all driven by the tokens below so a theme change flows everywhere and the FEEL is tuned in ONE place: 1. .hover-surface — subtle bg lift (menus, plain rows, icon buttons) 2. .hover-emphasis — bg + accent border (nav / important actions; the treatment the sidebar shipped, now reusable anywhere) 3. .hover-row — very subtle full-row tint (dense tables) 4. .hover-lift — shadow + slight rise (cards / tiles) 5. button hovers — owned by the .btn variant system (already central) 6. focus-ring — the --ring-shadow :focus-visible block above (a11y) Adopt incrementally: add the recipe class (or point a rule at --state-*), never a new bespoke hover value. */ :root { --state-duration: var(--duration-fast, 120ms); --state-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); --state-hover-surface: var(--bg-hover); --state-emphasis-border: var(--accent); --state-row-hover: var(--bg-hover); --state-lift-y: var(--lift-1, -2px); --state-lift-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.18); } .hover-surface { transition: background var(--state-duration) var(--state-ease); } .hover-emphasis { border: 1px solid transparent; transition: background var(--state-duration) var(--state-ease), border-color var(--state-duration) var(--state-ease); } .hover-row { transition: background var(--state-duration) var(--state-ease); } .hover-lift { transition: transform var(--state-duration) var(--state-ease), box-shadow var(--state-duration) var(--state-ease); } /* Hover Wave 3b: the four recipe hovers live under ONE hover-capability guard (bases above stay unguarded - they only declare transitions). */ @media (hover: hover) { .hover-surface:hover { background: var(--state-hover-surface); } .hover-emphasis:hover { background: var(--state-hover-surface); border-color: var(--state-emphasis-border); } .hover-row:hover { background: var(--state-row-hover); } .hover-lift:hover { transform: translateY(var(--state-lift-y)); box-shadow: var(--state-lift-shadow); } } @media (prefers-reduced-motion: reduce) { .hover-lift:hover { transform: none; } } /* ── Tab active indicator: smooth slide ──────────────────────────── */ .tabs .tab { position: relative; transition: color var(--duration-fast) var(--ease-smooth); } /* Hover Wave 2a: the tab hover color that lived here merged into the ONE .tabs .tab:hover:not(.active) rule in the tabs base section. */ /* ── Premium animations library ──────────────────────────────────── */ @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInStart { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .slide-up { animation: slideUp var(--duration-slow) var(--ease-out); } .slide-down { animation: slideDown var(--duration-base) var(--ease-out); } .slide-in { animation: slideInStart var(--duration-base) var(--ease-out); } .pulse-soft { animation: pulseSoft 2s ease-in-out infinite; } /* ── KPI numeric polish (tabular figures align nicely) ───────────── */ [data-numeric] { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; } /* ── Grid + flex tighter alignment helpers (additive) ───────────── */ .stack { display: flex; flex-direction: column; } .stack.gap-4 { gap: var(--space-4); } .row { display: flex; align-items: center; } .row.gap-4 { gap: var(--space-4); } /* ── RTL/LTR direction support via logical properties ───────────── */ html[dir="ltr"], [dir="ltr"] { text-align: left; } [dir="ltr"] body, [dir="ltr"] button, [dir="ltr"] input, [dir="ltr"] select, [dir="ltr"] textarea { direction: ltr; text-align: left; } /* ── Selection color (matches accent) ────────────────────────────── */ ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text-primary); } /* ── Image rendering polish ──────────────────────────────────────── */ img { -webkit-user-drag: none; user-select: none; } /* (.data-table tbody tr transition consolidated into the ONE Tables shell above — 2026-07-12.) */ /* ── Inputs feel premium ─────────────────────────────────────────── */ .input, .select, .textarea { transition: border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth), background var(--duration-fast) var(--ease-smooth); } .input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) { border-color: var(--border-strong); } /* ── Soft entrance for screen content ────────────────────────────── */ main [data-screen], main > section { animation: slideUp var(--duration-slow) var(--ease-out); } /* ── Respect users who prefer reduced motion ─────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Mobile spacing tweaks ───────────────────────────────────────── */ @media (max-width: 720px) { .card { border-radius: var(--radius); } .btn { padding: 9px 14px; } } /* ════════════════════════════════════════════════════════════════════ ✨ PREMIUM UX/UI POLISH — Phase 2 (Sidebar + Topbar) ════════════════════════════════════════════════════════════════════ */ /* ── Sidebar: subtle depth gradient ──────────────────────────────── */ .sidebar { position: relative; background-image: linear-gradient(180deg, var(--bg-sidebar) 0%, color-mix(in srgb, var(--bg-sidebar) 92%, var(--bg-subtle)) 100%); } /* ── Nav items: active indicator stripe + slide on hover ─────────── */ .nav-item { position: relative; overflow: visible; transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth); } /* Active accent stripe — animated in via scaleY */ .nav-item::before { content: ''; position: absolute; inset-inline-start: -10px; top: 8px; bottom: 8px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; transform: scaleY(0); transform-origin: center; transition: transform var(--duration-base) var(--ease-spring); pointer-events: none; } .nav-item.active::before { transform: scaleY(1); } /* Subtle slide on hover (RTL-aware) */ @media (hover: hover) { .nav-item:hover:not(.active) { transform: translateX(-2px); } [dir="ltr"] .nav-item:hover:not(.active) { transform: translateX(2px); } } /* Icon-box gets accent tint + soft scale when active */ .nav-item .icon-box { border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), transform var(--duration-base) var(--ease-spring); } /* W-ICON: the ACTIVE rail row wears the identity glass (scaled to 20px, no drop shadow at this size). Rest rows stay bare glyphs on purpose — chipping all 12 would out-shout the content and erase the meaning of "active". */ .nav-item.active .icon-box { border-radius: 7px; color: var(--accent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 26%, var(--bg-elevated)), color-mix(in srgb, var(--accent) 8%, var(--bg-elevated))); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent); transform: scale(1.06); } .nav-item:hover:not(.active) .icon-box { color: var(--text-primary); } /* ── Avatar: premium polish ──────────────────────────────────────── */ .avatar { position: relative; overflow: hidden; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform var(--duration-base) var(--ease-spring); } .avatar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%); pointer-events: none; } .clinic-switcher-trigger:hover .clinic-switcher-avatar { transform: scale(1.05); } /* ── Sidebar footer logout button: unified accent hover (2026-07-08, owner "مركزية وتناسق") - same accent-border highlight as the nav items + the demo toggle. SINGLE source for the logout hover; the old danger-red hover was retired so the rail's mouseover is consistent. */ .sidebar-footer .icon-btn { transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth); } @media (hover: hover) { .sidebar-footer .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); } } /* ── Logo: gentle scale on hover ─────────────────────────────────── */ /* ── Topbar: glassy premium look ─────────────────────────────────── */ /* THIS block is the single owner of the topbar's position + layering (it also carries the backdrop-filter that creates the stacking context). z-index 90 (owner bug 2026-07-10, round 2): at 50 it TIED the sticky .screen-tabbar (z:50) and the tabs, painting later in the DOM, covered every topbar dropdown (theme/lang/announcements/switcher). 90 = above the content chrome (tabs 50, pf-tab-strip 80), below modals (1000+). The earlier duplicate z-index on the base .topbar block was REMOVED - two competing declarations were exactly how this regressed. */ .topbar { backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); position: sticky; top: 0; z-index: 90; } /* ── Topbar icon buttons polished ────────────────────────────────── */ .icon-btn { transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } @media (hover: hover) { .icon-btn:hover { /* Wave E: pulls from the interaction-states token (== --bg-hover today) so the topbar/icon hover feel is tuned centrally, not per-rule. */ background: var(--state-hover-surface); color: var(--text-primary); transform: scale(1.06); } } .icon-btn:active { transform: scale(0.96); } /* ── Page title polish ───────────────────────────────────────────── */ .page-title { letter-spacing: -0.015em; } /* ── Sidebar nav: stagger entry animation (subtle) ──────────────── */ .sidebar .nav-item { animation: slideInStart var(--duration-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms); } .sidebar .nav-items:nth-of-type(1) .nav-item:nth-child(1) { --i: 1; } .sidebar .nav-items:nth-of-type(1) .nav-item:nth-child(2) { --i: 2; } .sidebar .nav-items:nth-of-type(1) .nav-item:nth-child(3) { --i: 3; } .sidebar .nav-items:nth-of-type(2) .nav-item:nth-child(1) { --i: 4; } .sidebar .nav-items:nth-of-type(2) .nav-item:nth-child(2) { --i: 5; } .sidebar .nav-items:nth-of-type(3) .nav-item:nth-child(1) { --i: 6; } .sidebar .nav-items:nth-of-type(3) .nav-item:nth-child(2) { --i: 7; } .sidebar .nav-items:nth-of-type(4) .nav-item:nth-child(1) { --i: 8; } /* ════════════════════════════════════════════════════════════════════ ✨ PREMIUM UX/UI POLISH — Phase 3 (Dashboard + Reception) ════════════════════════════════════════════════════════════════════ */ /* ── Dashboard KPI stagger RETIRED (W-REVEAL 2026-07-17) ────────────── The .reveal-stagger section cascade (reveal-utils.js) is the ONE entrance. This dashboard-era .grid.cols-4 ramp ran in PARALLEL with it - a second nth-child stagger on the KPI row. KPI numbers now enter via MetricTile CountUp and the row floats in with its .reveal-stagger section. */ /* ── Page header polish ──────────────────────────────────────────── */ .page-header { animation: slideDown var(--duration-slow) var(--ease-out); } /* ── Per-card auto-entry RETIRED (W-REVEAL 2026-07-17) ──────────────── A card floats in WITH its section under .reveal-stagger; there is no independent per-card entrance (that was the second half of the double cascade the owner saw). The reveal is the single entrance. */ /* ── Section headers: better typographic hierarchy ───────────────── */ .card > div:first-child[style*="text-transform"] { letter-spacing: 0.05em; } /* ── Kanban board: premium polish ────────────────────────────────── */ .kanban-board { scroll-snap-type: x proximity; gap: var(--space-3); } .kanban-col { position: relative; transition: border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth); scroll-snap-align: start; /* entrance RETIRED (W-REVEAL 2026-07-17): the reception board floats in with its .reveal-stagger section - the columns no longer self-stagger in a parallel ramp. One entrance per screen. */ } .kanban-col:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } /* Top accent stripe via header bg-elevated tint */ .kanban-col-hdr { position: relative; letter-spacing: 0.02em; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--bg-elevated) 92%, var(--bg-subtle)) 100%); } .kanban-col-hdr::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: currentColor; opacity: 0.4; } /* Kanban cards premium hover */ .kanban-card { transition: box-shadow var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth); will-change: transform; } /* Hover Wave 2b: hover consolidated into the ONE rule in the kanban redesign section (its border tint moved there). The base transition above stays - it animates all three hover properties. */ /* Empty state subtle pulse */ .kanban-empty { animation: pulseSoft 3s ease-in-out infinite; } /* ── Chip enhancements (status badges) ──────────────────────────── */ .chip { transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } @media (hover: hover) { .chip:hover { transform: scale(1.04); } } .chip:active { transform: scale(0.98); transition-duration: 60ms; } /* ── Avatar small variant: premium gradient feel ──────────────── */ .avatar.sm { position: relative; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .avatar.sm::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 55%); pointer-events: none; border-radius: inherit; } /* ── Mini bar chart bars: subtle entry ───────────────────────────── */ .card .grid + div > div > div[style*="height:"], [data-chart-bar] { transition: opacity var(--duration-base) var(--ease-out); } /* ── Progress bar premium ────────────────────────────────────────── */ .progress { background: var(--bg-subtle); border-radius: var(--radius-pill); overflow: hidden; height: 6px; position: relative; } .progress::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); animation: shimmer 2.5s ease-in-out infinite; pointer-events: none; } .progress-bar { height: 100%; border-radius: var(--radius-pill); transition: width var(--duration-slow) var(--ease-out); } /* ── Walk-In modal patient list polish ───────────────────────────── */ .modal-backdrop .gm-box .input:focus + div, .gm-box [style*="overflowY"] > div { transition: background var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } /* ── Selectable option-card pattern (used in modals) ─────────────── */ button.card[style*="border"] { transition: border-color var(--duration-fast) var(--ease-smooth), background var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth); } button.card[style*="border"]:hover { transform: translateY(var(--lift-1)); } /* ── Reception kanban: mobile responsive ────────────────────────── RETIRED 2026-07-05 (Nav-Kanban consolidation). The old ≤900px 5-column horizontal-scroll layout was fully overridden by the adaptive `.kanban-board.kanban-full-width` tiers (chips / 2-col / 3-col) below and only added cascade fragility. Single source of truth for the kanban responsive model now lives in the "V-Phase2 Wave 2 — Adaptive kanban" block. */ /* ── Wave 5e fix: EditInvoiceModal 2-panel body (2:1 desktop, stack phone) ── The original inline `2fr 1fr` grid kept the items table panel ~2x wider than the summary panel on desktop so the 5-col table (service select + qty + price + total + delete) had room to breathe. The first Wave 5e attempt swapped it for .l-grid--fixed-2 (always 50/50) which left the items table cramped on desktop. This class restores the 2:1 ratio on tablet+ and stacks to 1-col on phones via the 720px breakpoint, matching the rest of the modal-body responsive pattern. */ /* V-Phase2 Wave 4b (ADR-134): `.edit-invoice-2col` retired. EditInvoiceModal now uses the unified vertical card-stack pattern (no 2fr+1fr split), so this class has no JSX consumers and the desktop 2:1 ratio is no longer needed. The new layout matches AddSessionModal + LabOrderModal + EditPurchaseInvoiceModal: header row → items cards → summary card → notes textarea. */ /* ── Wave 5c: Appointments WeekView 7-col stack on phones (<=480px) ── The original repeat(7, 1fr) lets 7 day columns share the viewport, which works on tablet+ but on a 360px phone gives each day cell ~51px - not enough room for the appointment pills (fontSize 10, patient name + time) to be readable. Stacking to 1 col makes each day a full sheet-width card; appointment lists inside stay readable. The 7-col fallback stays for the 481-768px tablet range. Override carries the inline `grid-template-columns` set in appointments.jsx (the WeekView grid is inline-styled), so the rule needs the same specificity (class + style attr selector). The element also carries `display: grid` inline, so we only need to change `grid-template-columns`. */ /* ── Wave 5c: Marketing calendar mk-cal-grid stack on phones (<=480px) ── Same pattern as the appointments week grid above. The marketing calendar is a 7-col x 4-row month view of scheduled posts; on <=720px we already shrink the font, but the 7 columns at 360px give each post card too little width. Stack the 28 cells vertically so each scheduled-post pill gets full width. */ @media (max-width: 480px) { } /* ── Wave 5b: Reception kanban vertical stack (<=480px) ── RETIRED 2026-07-05 (Nav-Kanban consolidation). The single-column vertical stack was superseded by the adaptive chip view (one stage at a time) which now covers every phone up to 600px. See the "V-Phase2 Wave 2 — Adaptive kanban" block for the live model. */ /* ════════════════════════════════════════════════════════════════════ V-Reception (Phase 5 Wave 2) — chip-tone count + per-stage empty + terminal-state softening. Touches: • .kanban-count → tighter chip sizing for the column tally • .kanban-empty-rich → 3-line per-stage empty state body • .kanban-col-hdr → +2px vertical padding (better hit area) • .kanban-col[data-stage="done"|"cancelled"] → terminal opacity The legacy `.reception-insight-strip` wrapper for the surfaced "نصيحة Modirify" Dashboard InsightCard was retired on 2026-06-02 (owner direction: advice strip read as noise on the busiest screen). `.reception-hero-clock` (ReceptionHero's live clock pill) was retired 2026-07-06 with ReceptionHero itself (Unify W6/W7 topbar-is-header). ──────────────────────────────────────────────────────────────────── */ /* Tighten the chip when it lives in the kanban column header — the default chip padding feels chunky at this scale. tabular-nums keeps the digit width stable as cards.length crosses single → double. */ .kanban-col-hdr .chip.kanban-count { padding: 1px 8px; font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.5; } /* Slightly taller header — old 8px 10px felt cramped vs the new chip. */ .kanban-col-hdr { padding: 10px 12px; } /* Terminal stages: done + cancelled are "settled" states, soften their header to imply finished work without losing readability. */ .kanban-col[data-stage="done"] .kanban-col-hdr, .kanban-col[data-stage="no_show"] .kanban-col-hdr, .kanban-col[data-stage="cancelled"] .kanban-col-hdr { opacity: 0.92; } /* Rich per-stage empty state — replaces the legacy "icon + لا يوجد مرضى" with a 3-line layout (icon → title → hint). The .kanban-empty wrapper still owns padding + dashed border + pulseSoft animation; .kanban-empty-rich just structures the inner content. */ .kanban-empty-rich { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .kanban-empty-rich .kanban-empty-icon { font-size: var(--text-title); opacity: 0.55; line-height: 1; } .kanban-empty-rich .kanban-empty-title { font-size: var(--text-meta); font-weight: 700; color: var(--text-secondary); } .kanban-empty-rich .kanban-empty-hint { font-size: var(--text-micro); color: var(--text-tertiary); text-align: center; max-width: 170px; line-height: 1.5; } /* When the column is a drop target, the parent .kanban-empty swaps to the "↓ اسحب هنا ↓" literal — kill the rich-empty animation noise so the drop affordance reads as a single beat. */ .kanban-empty.drop-active .kanban-empty-rich { display: none; } /* ════════════════════════════════════════════════════════════════════ V-Appointments (Phase 5 Wave 2) — premium polish on Day/Week/Month + Reception-Dashboard merge surface (4 dashboard cards inline). ──────────────────────────────────────────────────────────────────── */ /* Today's calendar cell — kanban-style ring + accent-tinted bg so the "you are here" beacon is visible even on busy months. The existing .calendar-day.today rules in the original block carry the base styling; this override strengthens the visual beat. */ .calendar-day.today { background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated)); box-shadow: inset 0 0 0 2px var(--accent); } /* Reception quick-row — 4-card grid hosting the surfaced Dashboard cards (Doctors / LowStock / RecentPatients / Outstanding). Grid collapses to 2 cols on tablet, 1 col on mobile. */ .reception-quick-row { /* layout is inline-styled; CSS hook for future surface adjustments. */ } @media (max-width: 768px) { .reception-quick-row { grid-template-columns: 1fr !important; } } /* Appointments controls row — view toggle + filter dropdown + export. Just a hook for future adjustments; the row is laid out via inline flex styles. */ .appt-controls { /* hook */ } /* ── Dashboard: doctor status row & list-item hovers (CSS-driven) ─ */ .card [style*="cursor:"][style*="pointer"]:not(.btn):not(.icon-btn) { border-radius: var(--radius-sm); } /* ── Empty state visual ──────────────────────────────────────────── */ .empty-state { animation: slideUp var(--duration-slow) var(--ease-out); } /* ════════════════════════════════════════════════════════════════════ ✨ PREMIUM UX/UI POLISH — Phase 4 (Patients + Patient File) ════════════════════════════════════════════════════════════════════ */ /* (.data-table premium-polish base — sticky header, hover, transitions — consolidated into the ONE Tables shell near the top of this file (2026-07-12). It used to re-set the header to 700/secondary/0.01em, overriding the base; now there is a single header rule. Only the clickable hover-stripe below stays here — it is functional + specific.) */ /* ── Clickable table rows: hover indicator stripe (opt-in) ───────── */ .data-table.clickable tbody tr, .data-table tbody tr[onclick], .data-table tbody tr[role="button"] { cursor: pointer; } /* ADR-055 amendment #3: hover stripe is hosted on td:first-child, not on the tr itself. A ::before pseudo-element on with position: absolute (and tr position: relative) gets counted as an anonymous cell by Chrome's table column-width algorithm in direction: rtl, which shifts every tbody td by one column relative to the thead — breaking column alignment in the Invoices + Sessions tables. Hosting the pseudo on the first td keeps the stripe visible at the row's start edge without polluting column counting. Same visual; correct layout. */ .data-table.clickable tbody tr > td:first-child, .data-table tbody tr[onclick] > td:first-child, .data-table tbody tr[role="button"] > td:first-child { position: relative; } .data-table.clickable tbody tr > td:first-child::before, .data-table tbody tr[onclick] > td:first-child::before, .data-table tbody tr[role="button"] > td:first-child::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform var(--duration-base) var(--ease-spring); pointer-events: none; } .data-table.clickable tbody tr:hover > td:first-child::before, .data-table tbody tr[onclick]:hover > td:first-child::before, .data-table tbody tr[role="button"]:hover > td:first-child::before { transform: scaleY(0.7); } /* (pf3-* polish premium block deleted in V-PatientFile / ADR-055) */ /* ── Patients stat-tile auto-entry RETIRED (W-REVEAL 2026-07-17) ────── Same story as the other card auto-entrances: these tiles float in with their .reveal-stagger section, not on a parallel slideUp timeline. */ /* ── Search input premium polish (used in patients filter) ───────── */ .search-input, input[type="search"] { transition: background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth); } input[type="search"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* ── Filter chips/pills (used on patients & lists) ───────────────── */ .filter-chip, .pill { transition: background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth); cursor: pointer; } @media (hover: hover) { .filter-chip:hover, .pill:hover { transform: translateY(var(--lift-1)); border-color: var(--border-strong); } } .filter-chip.active, .pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); } /* ── Patient avatars in lists (consistent visual) ────────────────── */ .avatar { position: relative; transition: transform var(--duration-base) var(--ease-spring); } @media (hover: hover) { tr:hover .avatar, [role="row"]:hover .avatar { transform: scale(1.05); } } /* (pf3-subscreen stagger + pf3-med-alert animation deleted in V-PatientFile / ADR-055) */ /* ── Modal polish for patient quick-add etc. ─────────────────────── */ .modal-backdrop { backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } /* ── Loading spinner premium ─────────────────────────────────────── */ [style*="animation: spin"] { filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 30%, transparent)); } /* ── Table cell numeric alignment ────────────────────────────────── */ .data-table td[data-numeric], .data-table td.numeric { font-variant-numeric: tabular-nums; text-align: end; } /* ── Mobile patient file polish (safe overrides) ─────────────────── */ @media (max-width: 720px) { .data-table { font-size: var(--text-meta); } } /* ════════════════════════════════════════════════════════════════════ ✨ PHASE 4.5 — UNIFIED CARD DESIGN SYSTEM ════════════════════════════════════════════════════════════════════ 5 variants. Use them everywhere. Replace inline JS hover handlers. .card — base container, no hover .card.kpi — stat card with hover lift + accent border .card.interactive — clickable card, stronger hover lift + cursor .card.section — content container, gentle hover on border only .card.feature — hero/highlight card with accent stripe ──────────────────────────────────────────────────────────────────── */ /* ── .card.section: content container, subtle ───────────────────── */ .card.section { cursor: default; } .card.section:hover { border-color: var(--border-strong); /* no transform, no shadow change — keeps lists/tables stable */ } /* ── .card.interactive: clickable, stronger hover ────────────────── */ .card.interactive { cursor: pointer; position: relative; } /* Hover Wave 2a: motion (lift + shadow + cursor) lives in the grouped .card.interactive/.card[role="button"] rule in the micro-interactions section; this block keeps ONLY its unique border accent so the same values are never declared twice. */ @media (hover: hover) { .card.interactive:hover { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); } } /* ── .card.feature: hero with accent stripe ──────────────────────── */ .card.feature { position: relative; border-inline-start: 4px solid var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, var(--bg-card)) 0%, var(--bg-card) 60%); transition: box-shadow var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth); } .card.feature:hover { transform: translateY(var(--lift-2)); box-shadow: var(--shadow); } /* Feature variants by tone */ .card.feature.success { border-inline-start-color: var(--success); } .card.feature.success { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 4%, var(--bg-card)) 0%, var(--bg-card) 60%); } .card.feature.danger { border-inline-start-color: var(--danger); } .card.feature.danger { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 4%, var(--bg-card)) 0%, var(--bg-card) 60%); } .card.feature.warning { border-inline-start-color: var(--warning); } .card.feature.warning { background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 4%, var(--bg-card)) 0%, var(--bg-card) 60%); } .card.feature.info { border-inline-start-color: var(--info); } .card.feature.info { background: linear-gradient(135deg, color-mix(in srgb, var(--info) 4%, var(--bg-card)) 0%, var(--bg-card) 60%); } .card.feature.purple { border-inline-start-color: var(--purple); } .card.feature.purple { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 4%, var(--bg-card)) 0%, var(--bg-card) 60%); } /* ── Universal grid auto-stagger RETIRED (W-REVEAL 2026-07-17) ──────── This was the loudest duplicate of the reveal: a second *:nth-child ramp firing on EVERY .grid of .cards in parallel with the .reveal-stagger section cascade (15 of 18 revealed screens ran both at once - the owner's "everything loads together"). The reveal is the single entrance now; a nested grid enters with its section, not on its own timeline. */ /* ── Make sure hover lift never clips children visually ─────────── */ .card.interactive, .card.feature { will-change: transform; } /* ════════════════════════════════════════════════════════════════════ PHASE 5 -- Billing + Finance premium polish ════════════════════════════════════════════════════════════════════ */ /* -- Invoice/transaction rows: cursor + hover ---------------------- */ /* -- Status chips: subtle pulse for unpaid/overdue ----------------- */ .chip.danger, .chip.warning { position: relative; } .chip.danger::after, .chip.warning::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: currentColor; opacity: 0; z-index: -1; animation: chipGlow 2s ease-in-out infinite; } @keyframes chipGlow { 0%, 100% { opacity: 0; } 50% { opacity: 0.08; } } /* -- Tab bar buttons (finance/billing): unified active feel -------- */ button[style*="borderBottom"][style*="var(--accent)"] { position: relative; transition: color var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth); } /* -- Lab orders / clickable KPI buttons: outline polish ------------ */ .card.interactive[style*="outline"] { transition: outline var(--duration-fast) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth); } /* ════════════════════════════════════════════════════════════════════ V-1/4 (ADR-048) — Numeric typography utilities (Hybrid Stripe layer) ════════════════════════════════════════════════════════════════════ Canonical hook for "numbers are the product" surfaces (Billing / Finance / Analytics / KPI values). Two utility classes: .num-tabular — apply to ANY element displaying digits in a column or grid where column-alignment matters (table cells, KPI deltas, count badges). .num-currency — like .num-tabular plus right-alignment via text-align: end (RTL-aware: end = visual right in RTL too because the cell box itself is RTL- anchored). Use on currency display elements (invoice totals, expense amounts, balances). Both classes set font-variant-numeric: tabular-nums for modern browsers AND font-feature-settings: 'tnum' 1 as the older-browser fallback. Effective on Latin numerals (0-9) — Arabic-Indic digits (٠-٩) already have uniform width natively. Existing scattered inline declarations (lines 4691, 5391, 5565, 5596, 5804, 6427, 7214) stay as legacy patterns until Wave 2 V-Billing / V-Finance / V-Analytics tracks migrate them to these utility classes. The .data-table td.numeric pattern is the most important pre-existing hook (line 5389-5393); .num-tabular on the wrapper is the new alternative when a cell isn't inside a .data-table primitive. If Cairo's Latin numerals look insufficient in production tabular columns (subjective owner check during V-Billing), a V-1/4 follow-up can add `--font-num-stack: Inter, ...` as a token + apply it on .num-tabular. Not shipped now to avoid the extra Google Fonts network request without proof-of-need. ════════════════════════════════════════════════════════════════════ */ .num-tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .num-currency { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; text-align: end; } /* ════════════════════════════════════════════════════════════════════ V-1/5 (ADR-048) — Hero card soft gradient (Hybrid Stripe layer) ════════════════════════════════════════════════════════════════════ Stripe's signature: a barely-there diagonal accent tint on hero surfaces (Finance Overview's `+12,400 ج.م` card, Analytics waterfall hero, Dashboard greeting card). Goes from accent-tinted in the corner to transparent at midpoint — adds depth without ornamentation. Strength controlled by --tint-hero-strength token (default 4%). V-1/3 dark themes may override the token if 4% is invisible on dark surfaces. Compose with existing .card classes — .tint-hero only sets the background-image, so .card.section + .tint-hero stacks bg + tint. ════════════════════════════════════════════════════════════════════ */ .tint-hero { background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) var(--tint-hero-strength), transparent) 0%, transparent 50%); } /* -- Money/numeric values: tabular-nums everywhere ----------------- */ [style*="fontWeight: 900"][style*="fontSize: 2"], [style*="fontWeight:900"][style*="fontSize:2"] { font-variant-numeric: tabular-nums; letter-spacing: -0.015em; } /* -- Invoice summary boxes (billing right rail) -------------------- */ .card.section[style*="height:'fit-content'"], .card[style*="height:'fit-content'"] { position: sticky; top: 14px; } /* -- Aging buckets / progress visualization ------------------------ */ [data-aging-bar] { transition: width var(--duration-slow) var(--ease-out); } /* -- Filter date preset pills (Finance Overview) ------------------- */ button[style*="DATE_PRESETS"], .date-preset { transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } /* -- Payment status badges (paid/partial/unpaid/overdue) ----------- */ .chip.success, .chip.danger, .chip.warning, .chip.info { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* -- Empty states inside cards (billing/finance lists) ------------- */ .card .empty-state, .card [style*="padding: 40"][style*="textAlign"][style*="center"] { padding: var(--space-8) !important; color: var(--text-tertiary); } /* -- Mobile billing/finance: tighter spacing ----------------------- */ @media (max-width: 720px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════════════════════════════ PHASE 6 -- Settings + Admin + WhatsApp premium polish ════════════════════════════════════════════════════════════════════ */ /* -- Settings sub-tabs (general/staff/etc) ------------------------- */ [class*="settings-tab"], .settings-nav button { transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } /* -- Doctor profile cards: gentle interactive feel ----------------- */ .card[style*="textAlign: 'center'"]:has(.avatar.lg), .card[style*='textAlign: "center"']:has(.avatar.lg) { transition: transform var(--duration-base) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth); } .card[style*="textAlign: 'center'"]:has(.avatar.lg):hover, .card[style*='textAlign: "center"']:has(.avatar.lg):hover { transform: translateY(var(--lift-2)); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); } /* -- Avatar large (used in settings doctor cards) ------------------ */ .avatar.lg { width: 64px; height: 64px; font-size: var(--text-title); border-radius: 18px; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform var(--duration-base) var(--ease-spring); } .avatar.lg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 55%); pointer-events: none; border-radius: inherit; } .card:hover .avatar.lg { transform: scale(1.05); } /* The settings team list retired its data-table on 2026-07-28: doctors AND staff are PersonCards at every width (see set-person-grid), so the old table-to-card phone flip has nothing left to convert. */ /* -- Admin clinics list rows ---------------------------------------- */ [data-clinic-row], .clinic-row { transition: background var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } [data-clinic-row]:hover, .clinic-row:hover { background: var(--bg-hover); } /* -- WhatsApp message preview bubble polish ------------------------ */ [data-whatsapp-preview] { background: linear-gradient(135deg, #dcf8c6 0%, #d4f3b8 100%); border-radius: var(--radius); padding: 12px 16px; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } /* -- WhatsApp template variable chips ------------------------------ */ [data-tmpl-var], .template-var { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, #25D366 12%, transparent); color: #128C7E; font-weight: 700; font-size: var(--text-xs); font-family: monospace; margin: 0 2px; cursor: pointer; transition: background var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } [data-tmpl-var]:hover, .template-var:hover { background: color-mix(in srgb, #25D366 22%, transparent); transform: scale(1.05); } /* -- Settings form fields: focus polish ---------------------------- */ /* -- Toggle/switch components polish ------------------------------- */ input[type="checkbox"] + label { transition: background var(--duration-fast) var(--ease-smooth); } /* -- Admin permission grid items ----------------------------------- */ [data-permission-grid] > label { display: flex; align-items: center; gap: var(--space-1-5); padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration-fast) var(--ease-smooth); } [data-permission-grid] > label:hover { background: var(--bg-hover); } /* Mobile .card.kpi stacking rule removed (KpiCard P5): family retired. */ /* ════════════════════════════════════════════════════════════════════ PHASE 7 -- Appointments + Marketing + Inventory + Patient-file ════════════════════════════════════════════════════════════════════ */ /* -- Appointments: calendar day cells polish ----------------------- */ [data-day-cell], /* -- Appointment row in calendar pill ------------------------------ */ /* -- Marketing post cards -------------------------------------------- */ [class*="mk-post"], [class*="mk-card"] { transition: transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth); } [class*="mk-post"]:hover, [class*="mk-card"]:hover { transform: translateY(var(--lift-2)); box-shadow: var(--shadow); } /* -- Marketing status chips ---------------------------------------- */ /* -- Inventory: progress bar with shimmer animation ---------------- */ [data-inventory-progress] .progress-bar, .inventory-bar { position: relative; transition: width var(--duration-slow) var(--ease-out); } /* -- Inventory: low/critical stock rows ---------------------------- */ [data-stock-row][data-status="critical"] { background: color-mix(in srgb, var(--danger) 6%, var(--bg-card)); animation: pulseSoft 3s ease-in-out infinite; } [data-stock-row][data-status="low"] { background: color-mix(in srgb, var(--warning) 6%, var(--bg-card)); } /* Hover Wave 3c: the .inventory-status / [data-stock-status] badge family (base + scale-on-hover) was DEAD - zero JSX consumers anywhere (the inventory screen renders StatusChip instead). Deleted. */ /* -- New appointment modal: time slot picker ----------------------- */ [data-time-slot] { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; font-weight: 600; font-size: var(--text-sm); transition: background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } [data-time-slot]:hover { border-color: var(--accent); transform: translateY(var(--lift-1)); } [data-time-slot].selected, [data-time-slot][aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); } /* .card.kpi active-filter rule removed (KpiCard P5): MetricTile owns .is-active. */ /* -- Mobile: marketing calendar full-width ------------------------- */ @media (max-width: 720px) { } /* ════════════════════════════════════════════════════════════════════ PHASE 8A -- Premium Skeleton Loaders ════════════════════════════════════════════════════════════════════ Replace blank/"..." loading states with shimmering placeholders. Usage:
-> single line text placeholder
-> bold title placeholder
-> KPI value placeholder
-> avatar/icon placeholder
-> button/bar placeholder
-> table row placeholder ──────────────────────────────────────────────────────────────────── */ .skeleton-text, .skeleton-title, .skeleton-number, .skeleton-circle, .skeleton-bar, .skeleton-row { /* V-1/5 (ADR-048) — accent-tinted shimmer via §7 tokens */ background: linear-gradient( 90deg, var(--shimmer-base) 0%, var(--shimmer-highlight) 50%, var(--shimmer-base) 100% ); background-size: 200% 100%; animation: shimmer var(--shimmer-duration) ease-in-out infinite; border-radius: var(--radius-sm); color: transparent !important; user-select: none; pointer-events: none; display: inline-block; } /* Variants */ .skeleton-text { height: 12px; width: 70%; border-radius: var(--radius-xs); } .skeleton-title { height: 18px; width: 50%; border-radius: 5px; } .skeleton-number { height: 28px; width: 110px; border-radius: var(--radius-sm); } .skeleton-circle { height: 40px; width: 40px; border-radius: 50%; } .skeleton-bar { height: 32px; width: 100%; border-radius: var(--radius-sm); } .skeleton-row { height: 48px; width: 100%; border-radius: var(--radius-sm); display: block; margin-bottom: 8px; } /* Group: skeleton stack for a fake "list" */ .skeleton-stack { display: flex; flex-direction: column; gap: var(--space-2-5); } /* When inside a card, skeletons inherit the card's padding */ .card .skeleton-text, .card .skeleton-title, .card .skeleton-number { display: block; margin-bottom: 8px; } /* V-9/2: Kanban-shape skeleton (Reception Suspense fallback). 3 columns side-by-side, each with a title shimmer + N card shimmers. Reads from --shimmer-base / --shimmer-highlight via inherited .skeleton-* classes. */ .skeleton-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); width: 100%; } .skeleton-kanban-col { display: flex; flex-direction: column; gap: var(--space-2-5); padding: var(--space-3); background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--border); } .skeleton-kanban-card { height: 72px; width: 100%; border-radius: var(--radius-sm); display: block; background-color: var(--shimmer-base); background-image: linear-gradient(90deg, transparent, var(--shimmer-highlight), transparent); background-size: 200% 100%; /* BUG FIX (W-REVEAL 2026-07-17): was `skeleton-shimmer` - a keyframe that does not exist, so the kanban skeleton showed a static gray that never swept. The whole .skeleton-* family animates via the ONE `shimmer`. */ animation: shimmer var(--shimmer-duration) infinite linear; } @media (max-width: 768px) { .skeleton-kanban { grid-template-columns: 1fr; } } /* V-9/2: Form-shape skeleton (NewAppointment / NewInvoice fallback). Two- column responsive grid of label+input pairs. */ .skeleton-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); width: 100%; } .skeleton-form-field { display: flex; flex-direction: column; } @media (max-width: 768px) { .skeleton-form { grid-template-columns: 1fr; } } /* Subtle skeleton in dark mode (Luxe theme) */ [data-theme-mode="dark"] .skeleton-text, [data-theme-mode="dark"] .skeleton-title, [data-theme-mode="dark"] .skeleton-number, [data-theme-mode="dark"] .skeleton-circle, [data-theme-mode="dark"] .skeleton-bar, [data-theme-mode="dark"] .skeleton-row { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.04) 100% ); background-size: 200% 100%; } /* Reduced motion: stop shimmer */ @media (prefers-reduced-motion: reduce) { .skeleton-text, .skeleton-title, .skeleton-number, .skeleton-circle, .skeleton-bar, .skeleton-row { animation: none; background: var(--bg-subtle); } } /* ════════════════════════════════════════════════════════════════════ PHASE 8B -- Custom Confirm Dialog (replaces native confirm()) ════════════════════════════════════════════════════════════════════ */ .confirm-dialog { /* Centering via the parent .modal-backdrop grid (display: grid + place- items: center). The earlier manual fixed-positioning pattern was clobbered by the modalIn keyframe ending in `transform: translateY(0) scale(1)` (animation-fill-mode: both), which overrode the centering transform and offset the dialog by half its size. Matches the .modal/.modal-box pattern at L980. ADR-064 amendment. */ width: min(420px, calc(100vw - 32px)); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px 22px 20px; text-align: center; position: relative; /* z-index honoured without escaping the grid layout */ z-index: 1001; animation: modalIn var(--modal-in) var(--modal-in-ease) var(--modal-lead) backwards; will-change: transform, opacity; } .confirm-dialog__icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-size: 28px; font-weight: 900; font-family: var(--font-sans, 'IBM Plex Sans Arabic', sans-serif); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); animation: scaleIn var(--duration-base) var(--ease-spring) both; animation-delay: 80ms; } .confirm-dialog__title { font-size: 18px; font-weight: 900; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.01em; } .confirm-dialog__message { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; } .confirm-dialog__actions { display: flex; gap: var(--space-2-5); justify-content: stretch; } .confirm-dialog__actions .btn { flex: 1; min-height: 40px; font-weight: 700; transition: background var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth), filter var(--duration-fast) var(--ease-smooth); } .confirm-dialog__actions .btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(var(--lift-1)); } .confirm-dialog__actions .btn:active:not(:disabled) { transform: translateY(0); } /* Backdrop blur enhancement for confirm */ .modal-backdrop:has(.confirm-dialog) { backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); background: rgba(0, 0, 0, 0.4); } /* Mobile */ @media (max-width: 480px) { .confirm-dialog { width: calc(100vw - 24px); padding: 20px 18px 16px; } .confirm-dialog__title { font-size: 16px; } .confirm-dialog__message { font-size: 12.5px; } } /* ════════════════════════════════════════════════════════════════════ PHASE 8C -- Premium Toast Notification (top-center, clean look) U-10/1: ToastHost stacks up to MAX_VISIBLE toasts in a flex column; the .toast-stack wrapper owns positioning + centering, .toast items are flow-laid inside. ════════════════════════════════════════════════════════════════════ */ /* The stack wrapper handles fixed positioning + RTL-agnostic centering. Explicit left/right (not inset-inline-*) per the Phase 8C hot-fix reasoning: in RTL the logical pair resolves opposite to what centering needs and breaks the centered alignment. */ .toast-stack { position: fixed; top: 20px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: var(--space-2-5); align-items: center; pointer-events: none; max-width: 100vw; } /* Reset legacy Phase 1 .toast positioning (line ~1432 block, dead but still cascades — was previously suppressed by Phase 8C !important rules; without those it leaks fixed/bottom/inset-inline-end into the stack). Toasts inside the stack are flow-laid. */ .toast-stack > .toast { position: static; inset: auto; pointer-events: auto; max-width: 100%; } .toast { min-width: 280px; max-width: 480px; padding: 12px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); display: flex; align-items: center; gap: var(--space-2-5); font-weight: 600; color: var(--text-primary); animation: toastSlideIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(-16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } /* V-9/4: Type variants — subtle tint (color-mix) + colored left-border + colored icon chip. Stronger visual differentiation than icon-only; left-border survives at-a-glance scanning even when message is long. border-inline-start picks the right edge in RTL automatically. */ .toast.success { background: color-mix(in srgb, var(--success) 5%, var(--bg-elevated)); border-inline-start: 3px solid var(--success); } .toast.danger { background: color-mix(in srgb, var(--danger) 6%, var(--bg-elevated)); border-inline-start: 3px solid var(--danger); } .toast.warning { background: color-mix(in srgb, var(--warning) 6%, var(--bg-elevated)); border-inline-start: 3px solid var(--warning); } .toast.info { background: color-mix(in srgb, var(--info) 5%, var(--bg-elevated)); border-inline-start: 3px solid var(--info); } .toast.success .toast-icon { background: var(--success-soft); color: var(--success); } .toast.danger .toast-icon { background: var(--danger-soft); color: var(--danger); } .toast.warning .toast-icon { background: var(--warning-soft); color: var(--warning); } .toast.info .toast-icon { background: var(--info-soft); color: var(--info); } /* Icon sized down, cleaner */ .toast-icon { width: 28px; height: 28px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; } .toast-msg { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.5; color: var(--text-primary); padding-inline: 2px; } .toast-close { width: 24px; height: 24px; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth); } .toast-close:hover { background: var(--bg-hover); color: var(--text-primary); } /* Toast action button — Undo / retry / view (U-3, foundation for U-10) */ .toast-action { font: inherit; font-size: var(--text-meta); font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } .toast-action:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .toast-action:active { transform: scale(0.96); } .toast-action:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px var(--ring-color, color-mix(in srgb, var(--accent) 35%, transparent))); } /* Mobile: full width minus margins (applied to the stack wrapper now; individual toasts inherit width via the flex column). */ @media (max-width: 480px) { .toast-stack { top: 12px; width: calc(100vw - 24px); } .toast-stack > .toast { width: 100%; min-width: 0; max-width: none; } } /* ════════════════════════════════════════════════════════════════════ WHATSAPP INBOX -- WhatsApp-style chat UI ════════════════════════════════════════════════════════════════════ */ .wa-inbox-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-4); align-items: start; height: calc(100vh - 280px); min-height: 540px; } /* -- Conversations list (left) -------------------------------------- */ .wa-inbox-list { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .wa-inbox-list-header { padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg-elevated); } .wa-inbox-list-body { flex: 1; overflow-y: auto; min-height: 0; } .wa-inbox-list-footer { padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0; } .wa-inbox-unread-badge { background: #25D366; color: #fff; font-size: var(--text-micro); font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); box-shadow: 0 2px 6px color-mix(in srgb, #25D366 35%, transparent); } /* -- Thread row -------------------------------------------------------- */ /* -- Chat thread (right) ---------------------------------------------- */ .wa-inbox-thread { display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* WhatsApp chat background pattern */ /* ==================================================================== */ /* WhatsApp-EXACT chat (PROJECT_WHATSAPP.md §12 - owner 2026-07-18). */ /* ONE system, shared by the conversation modal AND the patient-file */ /* WhatsApp tab (both render window.WhatsAppThreadView). */ /* */ /* Reproduces the real WhatsApp conversation: the beige/dark textured */ /* ground, grouped bubbles with a tail on the FIRST of each run, */ /* centered date separators, time + delivery ticks, and the input bar. */ /* */ /* Bilingual for free: outgoing sits at the writing-direction END */ /* (flex-end = LEFT in Arabic RTL, RIGHT in English LTR) exactly as */ /* WhatsApp mirrors itself, so only the TAIL geometry needs [dir] rules. */ /* */ /* The palette lives on BOTH `.wa-chat-modal` (so the header + composer, */ /* which are SIBLINGS of the scroll body, inherit it) and */ /* `.wa-thread-body` (so the patient-file tab, which has no modal */ /* wrapper, still gets it). Keyed on data-theme-mode so every dark theme */ /* gets WhatsApp's dark palette, not just one. */ /* ==================================================================== */ .wa-chat-modal, .wa-thread-body { --wa-ground: #efeae2; --wa-sent: #d9fdd3; --wa-recv: #ffffff; --wa-txt: #111b21; --wa-meta: rgba(11,20,26,0.45); --wa-bar: #f0f2f5; --wa-bar-icon: #54656f; --wa-input-bg: #ffffff; } [data-theme-mode="dark"] .wa-chat-modal, [data-theme-mode="dark"] .wa-thread-body { --wa-ground: #0b141a; --wa-sent: #005c4b; --wa-recv: #202c33; --wa-txt: #e9edef; --wa-meta: rgba(233,237,239,0.55); --wa-bar: #202c33; --wa-bar-icon: #8696a0; --wa-input-bg: #2a3942; } .wa-thread-body { flex: 1; overflow-y: auto; padding: 14px 6%; display: flex; flex-direction: column; gap: 0; background-color: var(--wa-ground); /* Two offset dot layers = a soft textured ground in WhatsApp's spirit. Deliberately OUR texture, not Meta's doodle artwork (that asset is theirs); the ground COLOR + bubbles are what read as WhatsApp. */ background-image: radial-gradient(circle, rgba(0,0,0,0.030) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(0,0,0,0.020) 0 1px, transparent 1.6px); background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px; min-height: 0; scrollbar-gutter: stable; overscroll-behavior: contain; } [data-theme-mode="dark"] .wa-thread-body { background-image: radial-gradient(circle, rgba(255,255,255,0.038) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255,255,255,0.026) 0 1px, transparent 1.6px); } /* -- Date separator ---------------------------------------------------- */ /* Centered pill at every local-day boundary (اليوم / أمس / date), which is */ /* what lets the per-bubble meta stay time-only like the real app. */ .wa-date-sep { display: flex; justify-content: center; margin: 12px 0 10px; } .wa-date-sep span { background: var(--wa-recv); color: var(--wa-meta); font-size: var(--text-meta); font-weight: 600; padding: 5px 12px; border-radius: var(--radius-md); box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); } /* -- Message rows + grouping ------------------------------------------- */ /* `flex-end` for outgoing is what mirrors the whole chat between Arabic */ /* and English with zero extra rules: end = LEFT in RTL, RIGHT in LTR. */ .wa-msg-wrap { display: flex; width: 100%; margin-top: 2px; } .wa-msg-wrap.run-start { margin-top: 10px; } .wa-msg-wrap:first-child { margin-top: 0; } .wa-msg-wrap.sent { justify-content: flex-end; } .wa-msg-wrap.received { justify-content: flex-start; } .wa-msg-bubble { max-width: 75%; padding: 6px 9px 6px; font-size: 14.2px; line-height: 1.45; color: var(--wa-txt); background: var(--wa-recv); box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); position: relative; word-break: break-word; border-radius: var(--radius-md); animation: waBubbleIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both; } .wa-msg-bubble.sent { background: var(--wa-sent); } .wa-msg-bubble.received { background: var(--wa-recv); } /* -- Tail (first bubble of a run only) --------------------------------- */ /* WhatsApp squares the bubble's OUTER top corner and flares a small */ /* triangle out of it. Which side is "outer" flips with the language: */ /* RTL: sent sits LEFT -> tail on the left · received RIGHT -> right */ /* LTR: sent sits RIGHT -> tail on the right · received LEFT -> left */ /* Continuation bubbles in a run stay fully rounded and tuck underneath. */ [dir="rtl"] .wa-msg-bubble.sent.tail, [dir="ltr"] .wa-msg-bubble.received.tail { border-top-left-radius: 0; } [dir="rtl"] .wa-msg-bubble.received.tail, [dir="ltr"] .wa-msg-bubble.sent.tail { border-top-right-radius: 0; } .wa-msg-bubble.tail::after { content: ""; position: absolute; top: 0; width: 9px; height: 13px; } .wa-msg-bubble.sent.tail::after { background: var(--wa-sent); } .wa-msg-bubble.received.tail::after { background: var(--wa-recv); } /* left-side tail: flares up-and-out from the squared top-left corner */ [dir="rtl"] .wa-msg-bubble.sent.tail::after, [dir="ltr"] .wa-msg-bubble.received.tail::after { left: -8px; clip-path: polygon(100% 0, 100% 62%, 0 0); } /* right-side tail: the mirror image */ [dir="rtl"] .wa-msg-bubble.received.tail::after, [dir="ltr"] .wa-msg-bubble.sent.tail::after { right: -8px; clip-path: polygon(0 0, 0 62%, 100% 0); } @keyframes waBubbleIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } .wa-msg-text { white-space: pre-wrap; word-break: break-word; } /* Media sits flush inside the bubble the way WhatsApp frames it. */ .wa-msg-media { display: block; max-width: 100%; max-height: 260px; border-radius: var(--radius-sm); } .wa-msg-doc { color: var(--wa-txt); font-weight: 600; text-decoration: underline; } .wa-msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 1px; font-size: var(--text-xs); color: var(--wa-meta); direction: ltr; } .wa-msg-ticks { font-size: var(--text-base); color: var(--wa-meta); letter-spacing: -3px; } .wa-msg-ticks.read { color: #53bdeb; } .wa-msg-ticks.sending { letter-spacing: 0; font-size: var(--text-meta); } /* -- Failed send ------------------------------------------------------- A message Meta refused - or one that died before it ever left the browser - used to render an ordinary check, byte-identical to a delivered one, so a dead message wore the costume of a successful one until a full page reload. It now owns a colour, states its reason, and offers the way out. */ .wa-msg-bubble.failed { background: var(--danger-soft); box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13), inset 0 0 0 1px var(--danger); } .wa-msg-bubble.failed.tail::after { background: var(--danger-soft); } .wa-msg-ticks.failed { color: var(--danger); letter-spacing: 0; } .wa-msg-error { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-top: 4px; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); font-size: var(--text-xs); line-height: 1.55; color: var(--danger); } .wa-msg-error__why { flex: 1 1 auto; min-width: 0; } .wa-msg-error__retry { flex: 0 0 auto; border: 1px solid var(--danger); background: transparent; color: var(--danger); border-radius: var(--radius-sm); padding: 2px 8px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: background 140ms var(--ease-out, ease), color 140ms var(--ease-out, ease); } .wa-msg-error__retry:hover:not(:disabled) { background: var(--danger); color: #fff; } .wa-msg-error__retry:disabled { opacity: 0.55; cursor: not-allowed; } /* -- Empty thread ------------------------------------------------------ M11 (Audit 08-01): renamed from .wa-empty — that name is ALSO the generic rich-empty shell (ADR-060 §2, defined later in this file), so the later block silently won the cascade and the chat thread rendered with a dashed border + the wrong palette. The thread owns its own vocabulary now. */ .wa-thread-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: 28px 16px; } .wa-thread-empty-badge { width: 62px; height: 62px; border-radius: 50%; background: var(--wa-recv); color: var(--wa-meta); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .wa-thread-empty-title { font-size: var(--text-base); font-weight: 700; color: var(--wa-txt); } .wa-thread-empty-hint { font-size: var(--text-meta); color: var(--wa-meta); max-width: 250px; line-height: 1.5; } /* -- Composer (WhatsApp input bar) ------------------------------------- */ /* Pill input that grows with the text + a circular send button. The */ /* decorative attach / emoji / mic buttons WhatsApp shows are deliberately */ /* ABSENT - we can't perform any of them, and a dead control misleads. */ .wa-composer { display: flex; align-items: flex-end; gap: var(--space-2); padding: 8px 12px; background: var(--wa-bar, var(--bg-elevated)); flex-shrink: 0; } .wa-composer-input { flex: 1; min-width: 0; resize: none; border: none; outline: none; background: var(--wa-input-bg, var(--bg-card)); color: var(--wa-txt, var(--text-primary)); border-radius: var(--radius-xl); padding: 10px 16px; font-family: inherit; font-size: var(--text-base); line-height: 1.45; max-height: 120px; overflow-y: auto; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.08); } .wa-composer-input::placeholder { color: var(--wa-meta, var(--text-tertiary)); } .wa-send-btn { flex-shrink: 0; width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 50%; background: #00a884; color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } .wa-send-btn:hover:not(:disabled) { background: #017561; } .wa-send-btn:active:not(:disabled) { transform: scale(0.94); } .wa-send-btn:disabled { background: var(--wa-bar-icon, var(--text-tertiary)); opacity: 0.45; cursor: not-allowed; } /* -- Chat header (conversation modal) ---------------------------------- */ /* Identity on the leading side, real actions on the trailing side. We */ /* substitute WhatsApp's call/video icons with the two things we ACTUALLY */ /* support (open the patient file, delete the conversation). */ .wa-chat-head { display: flex; align-items: center; gap: var(--space-2-5); padding: 9px 12px; background: var(--wa-bar); color: var(--wa-txt); flex-shrink: 0; min-height: 59px; } .wa-chat-head__av { width: 40px; height: 40px; border-radius: 50%; background: #6a7175; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-md); font-weight: 700; flex-shrink: 0; } .wa-chat-head__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .wa-chat-head__name { font-size: var(--text-md); font-weight: 700; color: var(--wa-txt); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-chat-head__sub { font-size: var(--text-meta); color: var(--wa-bar-icon); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-chat-head__actions { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; } .wa-chat-head__back, .wa-chat-head__close, .wa-chat-head__act { width: 38px; height: 38px; border-radius: 50%; padding: 0; border: none; background: transparent; color: var(--wa-bar-icon); cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-md); transition: background var(--duration-fast) var(--ease-smooth); } .wa-chat-head__back:hover, .wa-chat-head__close:hover, .wa-chat-head__act:hover:not(:disabled) { background: color-mix(in srgb, var(--wa-bar-icon) 18%, transparent); } .wa-chat-head__act:disabled { opacity: 0.38; cursor: not-allowed; } /* The back glyph points toward the reading start: right in Arabic (RTL), left in English (LTR) - one icon, mirrored. */ [dir="ltr"] .wa-chat-head__back svg { transform: scaleX(-1); } /* Desktop keeps a trailing close; the phone gets WhatsApp's leading back arrow instead (a full-screen chat is "backed out of", not "dismissed"). */ .wa-chat-head__back { display: none; } .wa-chat-head__close { display: inline-flex; } @media (max-width: 47.99em) { .wa-chat-head__back { display: inline-flex; } .wa-chat-head__close { display: none; } } /* ==================================================================== */ /* CENTRAL chat shell (window.ChatModal) - owner 2026-07-18. */ /* ONE geometry for EVERY conversation: WhatsApp, Modir, Clinic Room. */ /* Width comes from the standard size token (md = 560px) via .rm-card--md */ /* - it is NOT overridden here, so a chat is exactly as wide as the rest */ /* of the app's modals. */ /* */ /* Mobile is a ~94dvh SHEET, not full-screen: the sliver of backdrop + */ /* the drag handle are what tell you it can be pulled down to leave. The */ /* pull-down itself is GRAB-ONLY (handle/header) - see chat-modal.jsx for */ /* why an at-top rule cannot work on a bottom-pinned chat. */ /* */ /* Rules are (0,2,0) so they beat the base .rm-* regardless of order. */ /* ==================================================================== */ .rm-card.chat-modal { height: 94dvh; max-height: 94dvh; } /* Header + messages + composer are the three flex rows; only the middle one scrolls, so the bars stay pinned exactly like a real chat app. */ .chat-modal .rm-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* The non-scrolling grab zone the dismiss gesture binds to. */ .chat-modal__head { flex-shrink: 0; } /* Close path for lib/swipe-to-dismiss.js - it clicks this so the sheet's OWN React teardown runs. Zero-size + out of flow: never visible. */ .chat-modal__close { position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } @media (min-width: 48em) { .rm-card.chat-modal { height: min(80vh, 680px); max-height: calc(100dvh - 4rem); } } /* Native (Capacitor) safe areas. The sheet is bottom-anchored, so its composer lands ON the home indicator, and on a tall notch the header can reach the status bar. Solved ONCE here for all three chats — this replaces the per-drawer `.crd-drawer` fix the Clinic Room used to carry alone, which is exactly the duplication this refactor exists to remove. */ body.is-native .rm-card.chat-modal { height: calc(94dvh - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); max-height: calc(94dvh - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-bottom: env(safe-area-inset-bottom, 0px); } /* -- WhatsApp SKIN ----------------------------------------------------- */ /* Geometry now comes from .chat-modal above; this block is only the */ /* WhatsApp look (its ground colour replaces the glass surface). Keeping */ /* the skin separate is what lets WhatsApp stay unmistakably WhatsApp */ /* while sharing every dimension with Modir + Clinic Room. */ .rm-card.wa-chat-modal { background: var(--wa-ground); backdrop-filter: none; -webkit-backdrop-filter: none; } .wa-thread-reply-hint { padding: 4px 14px 10px; font-size: var(--text-micro); color: var(--text-tertiary); background: var(--bg-elevated); flex-shrink: 0; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } /* ==================================================================== */ /* WhatsApp redesign 2026-07-18 — ONE screen + modals. */ /* The conversations table lives on the central DataTable; these styles */ /* only cover the bits with no central class: the unread row accent, */ /* the settings-modal rows, and the compose preview bubble. */ /* ==================================================================== */ /* Unread conversation row — a subtle start-border accent (mirrors the */ /* billing settlement-row tone convention, no new color system). */ .wa-conv-row--unread td:first-child, .wa-conv-row--unread .dt-card { box-shadow: inset 3px 0 0 var(--accent); } .wa-conv-row--unread .dt-card-title { font-weight: 800; } /* Settings modal — connection row */ .wa-settings-conn { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); } .wa-settings-conn.is-connected { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 8%, var(--bg-subtle)); } /* Template-readiness badge under the connected number (ADR-257): a central StatusChip + a short explanatory hint. Reassures the user their templates are under Meta review, then flips to "ready" once approved. */ .wa-tpl-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: 8px; } .wa-tpl-status__hint { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.45; } /* Settings modal — automation rule rows (label + Toggle) */ .wa-settings-rules { display: flex; flex-direction: column; gap: var(--space-2); } .wa-settings-rule { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .wa-settings-rule:hover { border-color: var(--accent); } .wa-settings-rule:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Compose modal — the message preview bubble sits in a chat-tinted tray */ .wa-compose-preview { padding: var(--space-3); border-radius: var(--radius); background: repeating-linear-gradient(45deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 14px), #e5ddd5; max-height: 200px; overflow-y: auto; } [data-theme-mode="dark"] .wa-compose-preview { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 14px), #0a1117; } /* -- Mobile inbox layout --------------------------------------------- */ @media (max-width: 900px) { .wa-inbox-grid { grid-template-columns: 1fr; height: auto; } .wa-inbox-list { max-height: 320px; } .wa-inbox-thread { height: 60vh; } } /* ════════════════════════════════════════════════════════════════════ WhatsApp Confirmation Link Realtime Highlights When a patient confirms/cancels/reschedules via a Modirify link, the matching appointment card in Reception/Appointments briefly highlights to alert the staff. ════════════════════════════════════════════════════════════════════ */ .wa-just-changed { animation: waChangedPulse 1.6s ease-out 3, waChangedFade 8s ease-out forwards; position: relative; } .wa-just-changed--confirm { --wa-action-color: #25D366; --wa-action-soft: rgba(37, 211, 102, 0.16); } .wa-just-changed--cancel { --wa-action-color: #ef4444; --wa-action-soft: rgba(239, 68, 68, 0.16); } .wa-just-changed--reschedule { --wa-action-color: #f59e0b; --wa-action-soft: rgba(245, 158, 11, 0.16); } @keyframes waChangedPulse { 0% { box-shadow: 0 0 0 0 var(--wa-action-soft, rgba(37,211,102,.20)); } 50% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes waChangedFade { 0% { background-color: var(--wa-action-soft, rgba(37,211,102,.12)); } 60% { background-color: var(--wa-action-soft, rgba(37,211,102,.06)); } 100% { background-color: inherit; } } /* Kanban card variant: leans on existing card styles */ .kanban-card.wa-just-changed { border-color: var(--wa-action-color, #25D366) !important; border-width: 2px; } /* Table row variant for appointments list */ tr.wa-just-changed > td { background-color: var(--wa-action-soft, rgba(37,211,102,.10)) !important; } /* Confirmation badge displayed inside the affected card */ /* ── ONE kanban-card badge family (رقم ٦, owner 2026-07-18: «سيستم موحد») ── Replaces two private families (.wa-confirm-badge in-flow + the absolutely positioned .kanban-waiting-badge). One placement (in-flow at the card top, badges stack), one chrome, tone = meaning: --success the patient CONFIRMED (channel on the tooltip) --waiting parked for anesthesia / x-ray (card also gets .waiting-extra wash) --flash transient via-Modirify event (8s window, slide-in) */ .kanban-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 8px; border-radius: var(--radius-pill); font-size: var(--text-micro); font-weight: 800; margin-bottom: 8px; letter-spacing: 0.01em; animation: slideDown 360ms cubic-bezier(.16,1,.3,1) both; } .kanban-badge--success { background: color-mix(in srgb, var(--success) 18%, var(--bg-elevated)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); } .kanban-badge--waiting { background: #ea580c; color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, #ea580c 35%, transparent); } .kanban-badge--flash { background: var(--wa-action-color, #25D366); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--wa-action-color, #25D366) 35%, transparent); } /* Small tag for table rows (less intrusive) */ @media (prefers-reduced-motion: reduce) { .wa-just-changed { animation: none; } } /* ═══════════════════════════════════════════════════════════════ SPRINT 1 — DASHBOARD 2.0 + FOUNDATION COMPONENTS ═══════════════════════════════════════════════════════════════ */ /* Dashboard Hero (.dash-hero*) — RETIRED R3 Phase 3 (2026-07-11). All 14 screens moved to the central ScreenHeader; the ONE bespoke exception (the clinical patient header) owns .pf-hero* now. See app/src/ui/screen-header.jsx + the .pf-hero block above. */ /* Primary metric tile — 3 large cards under the hero */ .metric-tile { position: relative; padding: 22px 24px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base), border-color var(--duration-base); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); } .metric-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--tile-tint, transparent) 0%, transparent 60%); opacity: 0.6; pointer-events: none; } /* Hover Wave 3c (owner: "inventory tiles hover too hard"): the INTERACTIVE tile hover was the app's strongest (lift-3 -6px + 40% border) while read-only tiles hover gently - clickable-filter screens (inventory, patients) looked like a different system. Softened to the standard card language (lift-2 + 25% border, glow eased); still a touch stronger than .is-readonly below so clickable tiles keep reading as clickable. */ @media (hover: hover) { .metric-tile:hover { transform: translateY(var(--lift-2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--tile-color, var(--accent)) 10%, transparent); border-color: color-mix(in srgb, var(--tile-color, var(--accent)) 25%, var(--border)); } } .metric-tile-head { display: flex; align-items: center; gap: var(--space-2-5); } .metric-tile-icon { width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; background: color-mix(in srgb, var(--tile-color, var(--accent)) 12%, var(--bg-elevated)); color: var(--tile-color, var(--accent)); font-size: 18px; flex-shrink: 0; } .metric-tile-label { font-size: var(--text-meta); font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.04em; text-transform: uppercase; } .metric-tile-value { /* V-Mobile/KpiTypo (MOBILE_ARCHITECTURE §8.2) — fluid clamp scales the KPI number with viewport instead of an abrupt step at the mobile breakpoint. Mobile 22px → tablet ~28px → desktop 36px. The owner reported the previous fixed 28px on mobile felt too big for single-digit / 4-digit currency values. */ font-size: clamp(1.375rem, 2vw + 1rem, 2.25rem); /* 22px → 36px */ font-weight: 900; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .metric-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .metric-tile-trend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-meta); font-weight: 800; padding: 3px 10px; border-radius: var(--radius-pill); } .metric-tile-trend.up { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); } .metric-tile-trend.down { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); } .metric-tile-trend.flat { background: color-mix(in srgb, var(--text-tertiary) 10%, transparent); color: var(--text-tertiary); } .metric-tile-hint { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 600; } /* ──────────────────────────────────────────────────────────────── KpiCard unification (Phase 0, 2026-07-09) — opt-in capabilities on the ONE canonical .metric-tile so every legacy stat family (.kpi / .card.kpi / .sa-kpi / .wa-stat / .bourse-stat / .ann-anl-kpi / .import-tile) + the ~64 bespoke inline "number in a box" divs can migrate onto it WITHOUT a look-alike. All additive — an un-migrated tile is untouched. Driven by app/src/ui/metric-tile.jsx props. ──────────────────────────────────────────────────────────────── */ /* Unit / suffix after the headline figure (٪ · ج.م · جلسة). Sits on the value baseline, de-emphasised so the number stays the hero. Absorbs the hand-rolled "value + unit" concatenation (ai-card suffix, wa quota). */ .metric-tile-value .metric-tile-suffix { font-size: 0.6em; font-weight: 700; color: var(--text-tertiary); margin-inline-start: 4px; letter-spacing: 0; } /* Value tone — colour the NUMBER itself (not just the icon/trend). Absorbs .pf2-stat-card (always-danger) + .bourse-stat--danger/success where the figure's colour carries the meaning. */ .metric-tile-value.mt-good { color: var(--success); } .metric-tile-value.mt-bad { color: var(--danger); } .metric-tile-value.mt-neutral { color: var(--text-tertiary); } /* Semantic trend tone — decouple colour from arrow direction so "المصروفات ↓" or "المديونية ↓" reads GREEN (down = good). The arrow still comes from trend.dir; the colour from trend.tone. */ .metric-tile-trend.mt-t-good { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); } .metric-tile-trend.mt-t-bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); } .metric-tile-trend.mt-t-neutral { background: color-mix(in srgb, var(--text-tertiary) 10%, transparent); color: var(--text-tertiary); } /* Leading accent stripe — absorbs the .mk-kpi / .sa-kpi "colour bar" idiom without a separate family, using the tile's own --tile-color. */ .metric-tile.mt-bar { border-inline-start: 3px solid var(--tile-color, var(--accent)); } /* Matching skeleton (SkeletonMetricTile) — a .metric-tile-shaped placeholder so a tile does NOT reflow on load. Suppress the tint overlay + pointer. */ .metric-tile.is-skeleton { pointer-events: none; } .metric-tile.is-skeleton::before { display: none; } /* Section header */ .section-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; gap: var(--space-2-5); } .section-head h2 { font-size: var(--text-base); font-weight: 800; color: var(--text-primary); letter-spacing: 0.02em; margin: 0; display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .section-head .section-sub { font-size: var(--text-meta); color: var(--text-tertiary); font-weight: 500; } .section-head .section-actions { display: flex; gap: var(--space-1-5); align-items: center; flex-shrink: 0; } /* The lead can shrink so a long TRANSLATED title wraps inside the card instead of shoving the action button off the inline-end edge. */ .section-head__lead { min-width: 0; } /* ── SectionCard — the bordered block a screen body is built from ────────── `.card` is a bare class typed by hand at ~303 sites, and the heading row on top of it was re-typed inline 18 more times in four spacing dialects. The component (window.SectionCard) composes THIS heading anatomy — which already existed with one consumer — so no rival vocabulary enters the app. The only new rules are the in-card margin reset and the mobile stack. */ .section-card > .section-head { margin: 0 0 12px; } /* p-0 = the LIST-CARD recipe (analytics W2, 2026-07-19): padded head + a hairline under it, body rows edge-to-edge. One central shape for every "card with a table/list inside" instead of each screen re-typing the 14px/20px header strip. */ .section-card.p-0 > .section-head { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--border); } /* The bare head (window.SectionHead) sits ABOVE a list of cards, so it keeps breathing room from the block before it but not the class's original 28px — these shelves stack inside one tab, not across a dashboard. */ .section-head--bare { margin: 0 0 12px; } /* ── SECTION RHYTHM (owner-caught 2026-07-19: «ليه بلوك الملاحظات لازق كده؟») The gap between page sections was every card's own `mb-16` — which works right up until a section ISN'T a card. The dental chart is a bare `.dc-shell` grid, so it contributed no bottom margin at all and the block under it sat flush against it. Spacing that lives on the CHILD can always be forgotten by the next child that isn't one. So the rule lives on the CONTAINER — but scoped to the sections that DON'T already declare their own, so no existing screen's spacing shifts by a pixel. Cards keep `mb-16`; anything else now gets the same gap for free. */ .page-content.reveal-stagger > *:not(.card):not(.screen-header):not([class*="mb-"]) { margin-bottom: 16px; } /* ── .section-item — a ROW inside a SectionCard ──────────────────────────── Owner 2026-07-19: «الوثائق والأشعة والوصفات العناوين برة — حطهم جوه الكارت المركزي». Once a shelf's heading moves INSIDE the card, its entries can no longer be cards themselves (a card inside a card reads as a mistake). They become rows on a quieter surface: same radius family, no shadow, a border that only separates. One class for all three shelves — a prescription, an x-ray and a document are the same THING here (a stored record with a title, a meta line and a kebab), so they get one vocabulary, not three. */ .section-item-stack { display: flex; flex-direction: column; gap: var(--space-2-5); } .section-item { background: var(--bg-subtle); border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); border-radius: 10px; padding: 12px 14px; } .section-item > .section-head { margin: 0; } .section-item > .section-head h2 { font-size: var(--text-sm); } /* A row's kebab is an icon button, not a mini-CTA — it must not inherit the section action's tinted pill or every row would shout. */ .section-item > .section-head .section-actions > .btn.icon-btn, .section-item > .section-head .section-actions > .row-action-menu > .btn { background: transparent; border-color: transparent; color: var(--text-tertiary); } .section-item-body { margin-top: 10px; } /* ── The mini-CTA (owner 2026-07-19: «عاوز توضيح للزراير أكتر جوه الكروت بحيث كأنه mini cta والمستخدم ياخد باله») ───────────────────────────────── A section's action was a `btn ghost sm` — text the same weight as the card's own body, no edge, invisible until you hunt for it. It is the ONE thing you can DO with this card, so it now reads as a small, tinted, bordered button: the screen's primary language at a quarter of its volume. One rule, every card on every screen, so a section action never has to be styled per site. */ .section-head .section-actions > .btn { font-size: var(--text-meta); font-weight: 700; padding-inline: 11px; min-height: 32px; border-radius: var(--radius-md); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); transition: background-color .16s ease, border-color .16s ease, color .16s ease; } .section-head .section-actions > .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); } .section-head .section-actions > .btn:disabled { opacity: .55; } /* A RECORDING mini-CTA - same shape, danger hue, filled - for the dictation mic while the microphone is open (owner 2026-07-28: «خليها متلونة ومعمولة بنفس الديزاين بتاع البوتون اللي في الكارت عشان تبان للطبيب»). It is filled rather than tinted because "your microphone is live" is the one state in this slot that must be impossible to miss from arm's length, and it matches the red the quiet mic uses in a composer row so the cue means one thing everywhere. */ .section-head .section-actions > .btn.is-recording { color: #fff; background: var(--danger, #d64545); border-color: var(--danger, #d64545); } [data-theme="luxe"] .section-head .section-actions > .btn.is-recording { color: #0b1020; } .section-head .section-actions > .btn.is-recording svg { animation: voice-pulse 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .section-head .section-actions > .btn.is-recording svg { animation: none; } } /* A DESTRUCTIVE mini-CTA borrows the same shape in the danger hue. */ .section-head .section-actions > .btn.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 26%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); } /* An UNSAVED-WORK mini-CTA — same shape, FILLED, because it is the one section action the user must not walk away from (W-BUTTONS ج٣, 2026-07-28: the dental chart's save). The tinted default is right for "you may do this"; a pending save is "you have changes that are not stored yet", so it earns the solid accent while staying the same object in the same slot. Any section with unsaved state uses this rather than smuggling a `btn primary` into the head — the tint rule outranks `.btn.primary` on specificity anyway, so a bare `primary` would silently flatten and the urgency would be lost. */ .section-head .section-actions > .btn.is-pending { background: var(--accent); border-color: var(--accent); color: #fff; } /* Same theme carve-out `.btn.primary` already declares — the luxe accent is light, so white-on-accent is unreadable there. Reusing its tokens instead of hand-mixing a hover keeps one accent story. */ [data-theme="luxe"] .section-head .section-actions > .btn.is-pending { color: #0b1020; } .section-head .section-actions > .btn.is-pending:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } @media (prefers-reduced-motion: reduce) { .section-head .section-actions > .btn { transition: none; } } @media (max-width: 768px) { /* Owner-caught 2026-07-19: stacking the action UNDER the title read as a broken row («ليه هي مكسورة مش في الجنب؟»). The head stays a ROW at every width — a mini-CTA is small enough to sit beside its title on a phone, and the title wraps into the space it leaves instead of pushing it off. */ .section-card > .section-head, .section-head--bare { gap: var(--space-2); } .section-head .section-actions > .btn { min-height: 34px; padding-inline: 10px; } } /* Polished empty state with action button */ .empty-state.v2 { display: flex; flex-direction: column; align-items: center; padding: 36px 20px; text-align: center; gap: var(--space-3); } .empty-state.v2 .empty-state-icon { width: 64px; height: 64px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)); color: var(--accent); display: grid; place-items: center; font-size: 28px; margin-bottom: 4px; } .empty-state.v2 .empty-state-title { font-size: var(--text-md); font-weight: 800; color: var(--text-primary); } .empty-state.v2 .empty-state-text { font-size: var(--text-sm); color: var(--text-tertiary); max-width: 320px; line-height: 1.5; } .empty-state.v2 .empty-state-action { margin-top: 6px; } /* R3 Phase 3 (2026-07-11): the .dash-rise staggered entrance + the .dash-hero shell it animated are RETIRED (Rule 9). The ONE entrance system is now .reveal-stagger (reveal-utils.js); the sole remaining bespoke hero (the clinical patient header) owns its own .pf-hero shell + pfHeroIn entrance. */ /* Mobile responsiveness */ @media (max-width: 768px) { .metric-tile { padding: 18px 18px; } /* V-Mobile/KpiTypo (§8.2): mobile-specific override removed — the fluid clamp on .metric-tile-value handles mobile scaling now (22px at <= 480px viewport). The compact variant uses the same fluid scaling so both stay visually aligned across screens. */ } /* ═══════════════════════════════════════════════════════════════ SPRINT 1.2 — RECEPTION 2.0 (Drag-drop kanban polish) ═══════════════════════════════════════════════════════════════ */ /* Drag affordance: cursor + subtle indicator on hover */ .kanban-card[draggable="true"] { cursor: grab; user-select: none; } .kanban-card[draggable="true"]:active { cursor: grabbing; } /* While the card is being dragged */ .kanban-card.dragging { opacity: 0.4; transform: scale(0.97); cursor: grabbing; box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent); transition: opacity var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast); } /* The column where a card can be dropped (hovered over) */ .kanban-col.drop-target { background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated)); outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; transition: background var(--duration-fast), outline-color var(--duration-fast); } .kanban-col.drop-target .kanban-col-hdr { background: color-mix(in srgb, var(--accent) 14%, var(--bg-subtle)) !important; } /* Forbidden drop target (same column or invalid transition) */ .kanban-col.drop-forbidden { background: color-mix(in srgb, var(--danger) 5%, var(--bg-elevated)); outline: 2px dashed color-mix(in srgb, var(--danger) 45%, transparent); outline-offset: -2px; } /* Drag-handle dot shown in top-right corner of card on hover */ .kanban-card .drag-hint { position: absolute; top: 6px; inset-inline-end: 8px; font-size: var(--text-meta); color: var(--text-tertiary); opacity: 0; transition: opacity var(--duration-fast); pointer-events: none; } .kanban-card:hover .drag-hint { opacity: 0.55; } /* Smooth kanban col animation when cards rearrange */ .kanban-col .kanban-cards-stack { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2-5); min-height: 90px; transition: background var(--duration-fast); } /* Drop-into-column hint shown when column is empty + targeted */ .kanban-empty.drop-active { border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--accent); font-weight: 700; } /* Reception KPI row uses the metric-tile system but a compact variant. V-Mobile/KpiTypo (§8.2) — compact also uses fluid clamp so the single-digit values (e.g., "1 مرضى جدد") don't dominate the card on mobile. Mobile 18px → tablet ~22px → desktop 28px. */ .metric-tile.compact { padding: 14px 16px; } .metric-tile.compact .metric-tile-value { font-size: clamp(1.125rem, 1.5vw + 0.75rem, 1.75rem); /* 18px → 28px */ } .metric-tile.compact .metric-tile-icon { width: 30px; height: 30px; font-size: var(--text-md); } .metric-tile.compact .metric-tile-label { font-size: var(--text-xs); } /* Dense tier (KpiCard, 2026-07-09) — the SMALL size for MODALS + tight/secondary summaries (invoice-detail / payable-detail money-triads). Same card family, just a denser box + a one-line value so the currency never wraps in a narrow modal column (owner flagged the compact size felt too heavy inside a modal). */ .metric-tile.dense { padding: 10px 12px; gap: var(--space-1-5); } .metric-tile.dense .metric-tile-head { gap: 7px; } .metric-tile.dense .metric-tile-value { font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.15rem); /* ~15px -> 18px, single line */ white-space: nowrap; } .metric-tile.dense .metric-tile-icon { width: 26px; height: 26px; font-size: var(--text-sm); border-radius: 9px; } .metric-tile.dense .metric-tile-label { font-size: 10.5px; } .metric-tile.dense .metric-tile-suffix { font-size: 0.62em; } /* ── The ONE KPI grid (owner picked the Reception model, 2026-07-09) ─────────── The card LOOK was unified, but the GRID around it was not: KPI rows used a jungle of l-grid--fixed-3 / l-grid--fixed-4 / grid-cols-4 / inline grids, each with a different column count + a different mobile rule. That is why a 3-tile row (patients/finance) stretched each card to a THIRD of a wide screen (owner: "why are the cards big?") and why mobile was 1-up on some screens, 2-up on others. `.kpi-grid` is the single arrangement, modelled on Reception: auto-fit COMPACT tiles (fixed max width, so few tiles never stretch oversized) that wrap naturally; on mobile exactly 2-up, with a lonely last tile spanning the row so an odd count stays balanced (2 + 2 + 1-wide). Reception keeps its own origin class; every other KPI row adopts this. */ .kpi-grid { display: grid; gap: var(--space-3); /* Fill the row (no side gap) like Reception's l-grid--sm. Few-tile rows still stretch wider than Reception's 8-tile row (3 compact tiles cannot fill a wide row — it is arithmetic); the wide-card look is fixed by the horizontal card layout below, not by the grid. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: stretch; } @media (max-width: 768px) { .kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .kpi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Spring landing animation — applied to a card for 350ms after it's dropped into a new column. The cubic-bezier y-value > 1 produces the overshoot bounce (scale peaks ~1.04 around 60% of the duration before settling at 1). Reception toggles `.is-just-landed` via justLandedId state in onDropCol. */ @keyframes kanban-card-land { from { transform: scale(0.94); } to { transform: scale(1); } } .kanban-card.is-just-landed { animation: kanban-card-land 350ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { .kanban-card.dragging { transform: none; } .kanban-card.is-just-landed { animation: none; } .kanban-col.drop-target { transition: none; } } /* ════════════════════════════════════════════════════════════════════ U-2 PRIMITIVE SUPPLEMENT — Tabs ════════════════════════════════════════════════════════════════════ Adds the count badge, size, and full-width variants consumed by the Tabs JSX primitive in app/src/ui/tabs.jsx. The base .tab / .tabs styles from earlier in this file remain canonical and are not touched. New tokens (--text-sm, --text-2xs) come from tokens.css (ADR-017). */ .tabs-full { width: 100%; } .tabs-full .tab { flex: 1 1 0; justify-content: center; } .tabs-sm .tab, .tab.sm { min-height: 36px; padding: 7px 12px; font-size: var(--text-sm); } .tab .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-inline-start: 6px; border-radius: var(--radius-pill); background: var(--bg-subtle); /* Chrome Wave D (2026-07-08, owner): the count number matches the tab TITLE color. `inherit` tracks .tab's color in BOTH states — muted when inactive (--text-tertiary), accent when active — so the number is never a different hue from the label beside it. */ color: inherit; font-size: var(--text-xs); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .tab.active .tab-count { /* Keep the soft accent pill; the number color inherits the active tab's accent title color (no explicit override — that is the point of Wave D). */ background: var(--accent-soft); } /* W6 (online booking): pulse the count pill when a tab has pending items (e.g. reception "طلبات الحجز"). The accent fill + halo make the waiting number the at-a-glance alert (the app has no notification bell). */ .tab .tab-count.tab-count-pulse { background: var(--accent); color: #fff; animation: tabCountPulse 1.8s ease-in-out infinite; } @keyframes tabCountPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 183, 0.0); } 50% { box-shadow: 0 0 0 4px var(--accent-soft, rgba(14, 165, 183, 0.30)); } } @media (prefers-reduced-motion: reduce) { .tab .tab-count.tab-count-pulse { animation: none; } } /* CountBadge (Round 3 Phase 0a): the ONE count pill (app/src/ui/count-badge.jsx) that retires the scattered per-strip badge styles. Same look as .tab-count; default color inherits the surrounding text (an active tab's badge matches its accent title, Wave D). Tones stand alone when needed; pulse reuses the tab-count attention animation. */ .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--bg-subtle); color: inherit; font-size: var(--text-xs); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } /* ── ConnectionChip (window.ConnectionChip) ────────────────────────────── The ONE "is this integration live?" indicator, rendered in a ScreenHeader subtitle. Promoted here from `screens/marketing/marketing-redesign.css` (`.mkx-conn`) when WhatsApp needed the same treatment: that file is a LAZY route chunk, so the class only existed once Marketing had been visited. Eager + central = both screens always look identical. */ .conn-chip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 700; } .conn-chip.is-on { color: var(--success); } .conn-chip.is-off { color: var(--danger); } .conn-chip.is-loading { color: var(--text-tertiary); } .conn-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .conn-chip.is-on .conn-chip__dot { animation: connChipPing 1.9s ease-out infinite; } .conn-chip__detail { font-weight: 600; color: var(--text-tertiary); } @keyframes connChipPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .conn-chip.is-on .conn-chip__dot { animation: none; } } .count-badge--accent { background: var(--accent-soft); color: var(--accent); } .count-badge--danger { background: var(--danger-soft); color: var(--danger); } /* Solid fill — for a count that must be UNMISSABLE rather than ambient, i.e. an unread badge. The soft tones read as decoration next to a bold name (the owner's "مش باينة"); WhatsApp's unread pill is solid-on-white for exactly this reason. Added to the primitive instead of hand-styling a call site. */ .count-badge--solid { background: var(--accent); color: #fff; } .count-badge--pulse { background: var(--accent); color: #fff; animation: tabCountPulse 1.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .count-badge--pulse { animation: none; } } /* SegmentedControl (Round 3 Phase 0b): moved off the component's inline styles into themeable CSS - a bordered group of 2-5 mutually-exclusive options; the active option fills with the accent (or an opt-in per-option --seg-active). Same look as before, now overridable by theme/context (was un-themeable). */ .seg-control { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } .seg-control__item { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); padding: 9px 10px; border: none; cursor: pointer; font-family: inherit; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; background: transparent; color: var(--text-secondary); transition: background 0.15s, color 0.15s; } .seg-control__item + .seg-control__item { border-inline-start: 1px solid var(--border); } .seg-control__item.is-active { background: var(--seg-active, var(--accent)); color: #fff; } .seg-control__item:disabled { cursor: default; opacity: 0.55; } .seg-control.is-disabled .seg-control__item { cursor: default; } .seg-control--sm .seg-control__item { padding: 6px 8px; font-size: var(--text-meta); } /* Touch minimum on phones. 9px padding + 13px text lands the default segment at 42px — two pixels under the 44px target, on a control whose whole job is being tapped. Measured on the الإشعارات mode picker; fixed HERE rather than there, because all 14 consumers have the same thumb. The `--sm` variant is deliberately dense (tight toolbars) and keeps its own size. */ @media (max-width: 768px) { .seg-control:not(.seg-control--sm) .seg-control__item { min-height: 44px; } } .seg-control__badge { margin-inline-start: 4px; font-size: var(--text-xs); font-weight: 800; opacity: 0.85; } /* DateControl (Round 3 Phase 0c): one date control, 3 modes. 'range' delegates to the shared DateRangeFilter; 'month'/'day' are the compact variants that replace the one-off month inputs + the appointments day-nav. */ .date-control { display: inline-flex; align-items: center; gap: var(--space-2); } .date-control--month .date-control__label { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 42px; min-width: 132px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: border-color var(--state-duration, .15s) var(--state-ease, ease), background var(--state-duration, .15s) var(--state-ease, ease); } .date-control--month .date-control__label:hover { border-color: var(--accent); background: var(--state-hover-surface, var(--bg-subtle)); } .date-control__month-text { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* The native month input is an INVISIBLE, click-through overlay over the pill: the user reads the derived "MonthName YYYY" label, and a click anywhere on the pill opens the native month picker (the direct far-jump). The arrows step. */ .date-control__month-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; outline: none; cursor: pointer; } .date-control--day { gap: var(--space-1); } .date-control__today { height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-elevated); color: var(--text-secondary); font-family: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; transition: background var(--state-duration) var(--state-ease), border-color var(--state-duration) var(--state-ease); } .date-control__today:hover { background: var(--state-hover-surface); border-color: var(--accent); } .date-control__day-label { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); min-width: 116px; text-align: center; } /* Reveal (Round 3 Phase 0d): staggered section entrance. Wrap a screen's top sections in .reveal-stagger; each direct child floats in with an increasing delay (one after another). Pairs with useCountUp for KPI numbers (app/src/lib/reveal-utils.js). Reduced-motion shows everything instantly. */ /* Timing matches the v2 mockup exactly: floatIn .6s cubic-bezier(.16,1,.3,1) with a blur-lift, and a 0.10s gap between staggered sections (mockup delays .04/.14/.24/.34) so the sequential reveal is actually felt, not a blur. */ @keyframes floatIn { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } } .reveal { animation: floatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .reveal-stagger > * { animation: floatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .reveal-stagger > *:nth-child(1) { animation-delay: 0.04s; } .reveal-stagger > *:nth-child(2) { animation-delay: 0.14s; } .reveal-stagger > *:nth-child(3) { animation-delay: 0.24s; } .reveal-stagger > *:nth-child(4) { animation-delay: 0.34s; } .reveal-stagger > *:nth-child(5) { animation-delay: 0.44s; } .reveal-stagger > *:nth-child(6) { animation-delay: 0.54s; } .reveal-stagger > *:nth-child(n+7) { animation-delay: 0.60s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { animation: none; } } /* ScreenHeader (Round 3 Phase 1): the ONE slim per-screen header — greeting + context on the RTL-right, the date filter + primary action on the RTL-left. Sits under the ScreenTabBar. Replaces the .dash-hero band (which duplicated the topbar title). See app/src/ui/screen-header.jsx. */ /* ══════════════════════════════════════════════════════════════════ W-HDR (owner 2026-07-17) — the header layout is DECLARED, not emergent. ══════════════════════════════════════════════════════════════════ Was: display:flex + flex-wrap:wrap + justify-content:space-between. That made the CTA's position a function of TITLE LENGTH, not of the viewport: when the lead grew past the free space the actions wrapped, and `space-between` on a 1-item line resolves to flex-START — so the button landed on the RTL-RIGHT, under the title, instead of the left. Measured live at 660px: «الجرد» -> button left, same row; «تذكيرات واتساب التلقائية للمرضى» -> button right, second row. Same viewport, only the string differed. That IS the reported "some buttons on the side, some below". Now: an explicit 2-column grid above the device line, an explicit 1-column stack below it. `minmax(0, 1fr)` lets a long title ellipsize or wrap INSIDE its own column instead of shoving the CTA around, and the CTA can never migrate across the header on its own. min-height keeps every screen's header the same height whether or not it carries a CTA (settings/updates have none) - the owner's "الهيدر يحجز مكانه دايمًا": 46px is the action height (see :8505). ══════════════════════════════════════════════════════════════════ */ .screen-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; min-height: 46px; margin-bottom: 18px; } /* Align the header with the screen's content on EVERY screen (owner 2026-07-09: the finance greeting sat flush-right vs its cards). The header self-pads horizontally by the .page-content inset (32px) so a header in a bespoke scroll container (e.g. finance's .finance-scroll, which pads only 14px while its cards sit inside a nested .page-content) lines up with the content below - EXCEPT when the header is already a direct child of .page-content (reception/billing), which supplies that inset itself. One central rule, correct anywhere. */ /* W-HDR: the SAME inset the content below uses (see --screen-inset). A header that is already a direct child of .page-content inherits that inset from its parent, so it zeroes its own. */ .screen-header { padding-inline: var(--screen-inset); } .page-content > .screen-header { padding-inline: 0; } .screen-header__lead { min-width: 0; } /* W-HERO (owner 2026-07-17): per-tab identity — tinted icon chip before the tab name. Same accent-tint recipe as .inv-item-row / the modal title icon so identity surfaces share one accent language. */ .screen-header__lead--identity { display: flex; align-items: center; gap: var(--space-3); } .screen-header__lead-text { min-width: 0; } /* ============================================================ W-ICON (owner 2026-07-17) — the ONE identity-chip treatment. ============================================================ Owner picked the "glass" variant from an 8-way premium mockup: a soft accent gradient + a top inner-light + a tinted drop shadow, so the chip reads as a raised piece of glass instead of a flat tint. ONE recipe, three sizes, driven by --chip-size + --chip-radius: .id-chip 44px -> the screen header (identity announcement) .id-chip--sm 28px -> the topbar title (the persistent compass) .id-chip--nav 20px -> the sidebar's ACTIVE row only The sidebar deliberately does NOT chip every row: 12 stacked glass squares would out-shout the content AND destroy the meaning of "active". Rest rows stay bare glyphs (see .nav-item .icon-box). Everything derives from --accent, so all 12 themes + dark mode work with no per-theme overrides. inset light + shadow are accent-tinted, never black, so the chip never dirties a dark surface. ============================================================ */ .id-chip, .screen-header__icon { --chip-size: 44px; --chip-radius: 13px; width: var(--chip-size); height: var(--chip-size); border-radius: var(--chip-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, var(--bg-elevated)), color-mix(in srgb, var(--accent) 6%, var(--bg-elevated))); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent); } .id-chip--sm { --chip-size: 28px; --chip-radius: 9px; } .id-chip--nav { --chip-size: 20px; --chip-radius: 7px; box-shadow: none; } @media (prefers-reduced-transparency: reduce) { .id-chip, .screen-header__icon { box-shadow: none; } } .screen-header__title { font-size: var(--text-title); font-weight: 700; line-height: 1.25; letter-spacing: -0.4px; color: var(--text-primary); overflow-wrap: anywhere; } /* The name sits inline in the greeting - same weight + colour as the greeting (matches the v2 mockup "صباح الخير د/ محمد 👋"; NOT accent-tinted). */ .screen-header__name { color: inherit; } /* The subtitle row holds TWO kinds of information with opposite overflow needs: prose (`__sub`, may be ellipsized) and live state (`__status`, may not). Desktop keeps them on one wrapping line — identical to the old hand-written "prose · chip · chip" subtitle, with the separator restored below — and the ≤768px block stacks them. See app/src/ui/screen-header.jsx. */ .screen-header__subrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 2px; min-width: 0; } .screen-header__sub { font-size: 13.5px; line-height: 1.4; color: var(--text-tertiary); } .screen-header__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; } /* Screens used to write the ' · ' themselves inside the subtitle Fragment. Now that the chips are their own slot, the separator is the header's job — so a screen can never ship a dangling '·' when its chip renders null. */ .screen-header__sub + .screen-header__status::before { content: '·'; color: var(--text-tertiary); font-size: 13.5px; line-height: 1; } /* (Removed 2026-07-09: the data-screen "info line" variant. The owner reversed the info-line decision - EVERY screen now shows the central greeting header (greeting + name + date), so the sub-line is always the date caption under a greeting, never a lone info line.) */ .screen-header__actions { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; } .screen-header__date { display: flex; align-items: center; } /* Anatomy W1-F6-b7: the date filter now lives in the header date-slot. The trigger's default in-card bottom margin (below) is nulled here so it aligns with the primary action instead of sinking below the baseline. */ .date-range-trigger { margin-bottom: 12px; } .screen-header__date .date-range-trigger { margin-bottom: 0; } /* Anatomy W1-F6-b8 (owner root fix): while the popover is OPEN, lift the WHOLE reveal-stagger section that hosts it above later sections. floatIn's frozen `filter: blur(0)` end-frame makes each revealed section its own z-index:auto stacking context, so the taller calendar popover was painted BEHIND the next section (the KPI cards). The old per-trigger z-index only re-ranked inside the section; this lifts the section itself. Central - every screen with a header date-slot OR a standalone filter block (analytics) is covered. */ .reveal-stagger > *:has(.date-range-trigger.is-open), .screen-header:has(.date-range-trigger.is-open) { position: relative; z-index: 70; } /* Anatomy W1-F6-b8: the ONE premium date-filter trigger (owner v2 pill). A boxed calendar glyph + a small "الفترة الزمنية" caption over the bold active value + a chevron. Theme-safe tokens only; identical on every screen. */ .date-range-btn { display: flex; align-items: center; gap: var(--space-2-5); min-height: 46px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-sm); transition: border-color var(--state-duration, .15s) var(--state-ease, ease), box-shadow var(--state-duration, .15s) var(--state-ease, ease); } .date-range-btn:hover { border-color: var(--accent); } .date-range-btn.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .date-range-btn__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); flex-shrink: 0; } .date-range-btn__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; } .date-range-btn__label { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); } .date-range-btn__value { font-size: 13.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .date-range-btn__chev { color: var(--text-tertiary); margin-inline-start: auto; flex-shrink: 0; transition: transform .15s ease; } .date-range-btn.is-open .date-range-btn__chev { transform: rotate(180deg); } /* Anatomy W2: the ONE list-screen toolbar (app/src/ui/screen-toolbar.jsx). A card-less tray: row 1 (search flexes + تصفية + view) · row 2 status chips with counts (D2) · row 3 the removable active-filter chips bar. Selection mode swaps the whole tray for an accent action bar in place (no layout jump). All theme tokens. */ .screen-toolbar { display: flex; flex-direction: column; gap: var(--space-2-5); margin-bottom: 16px; } .screen-toolbar .stb-row { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; } .screen-toolbar .stb-search { flex: 1; min-width: 220px; } .stb-filter { position: relative; gap: var(--space-1-5); } .stb-filter__count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 4px; border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: var(--text-micro); font-weight: 800; } /* D2 status chips-with-counts. Each chip = label + its count; the active one fills accent. Tone modifiers tint the COUNT bubble by meaning. */ .stb-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; } .stb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--radius-pill); cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; transition: border-color var(--state-duration, .15s) var(--state-ease, ease), background var(--state-duration, .15s) var(--state-ease, ease); } .stb-chip:hover { border-color: var(--border-strong); } .stb-chip.is-active { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); font-weight: 700; } .stb-chip__count { display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 6px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; background: var(--bg-subtle); color: var(--text-tertiary); } .stb-chip.is-active .stb-chip__count { background: var(--accent-text); color: var(--bg-card); } .stb-chip--success .stb-chip__count { background: var(--success-soft); color: var(--success); } .stb-chip--warning .stb-chip__count { background: var(--warning-soft); color: var(--warning); } .stb-chip--danger .stb-chip__count { background: var(--danger-soft); color: var(--danger); } .stb-chip--info .stb-chip__count { background: var(--info-soft); color: var(--info); } /* Premium removable active-filter chips bar (Linear/Airtable pattern). */ .stb-active { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .stb-active__label { font-size: var(--text-meta); color: var(--text-tertiary); } .stb-active__chip { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 5px 6px 5px 11px; border-radius: var(--radius-pill); background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-primary); font-size: var(--text-meta); } .stb-active__x { display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 0; } .stb-active__x:hover { color: var(--danger); } .stb-active__clear { background: none; border: none; cursor: pointer; color: var(--accent-text); font-size: var(--text-meta); font-weight: 600; font-family: inherit; } /* Selection morph — the tray becomes an accent bulk-action bar in place. */ .screen-toolbar--selecting { flex-direction: row; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent); } .stb-sel-count { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13.5px; font-weight: 700; color: var(--accent-text); } .screen-toolbar--selecting .stb-spacer { flex: 1; } /* The screen's ONE primary action = the v2 "hero action" button (owner 2026-07-09: match the mockup button exactly EXCEPT the color - keep the theme --accent so it flips with the theme). Taller, more rounded, an always-on accent-tinted lift. Scoped to the header so it upgrades EVERY screen's primary action (they all route through ScreenHeader) without bloating the dense/inline/ modal .btn instances. */ .screen-header__actions .btn { height: 46px; padding: 0 22px; gap: 9px; border-radius: 13px; font-size: 14.5px; font-weight: 700; white-space: nowrap; } .screen-header__actions .btn.primary { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 50%, transparent); } .screen-header__actions .btn.primary:hover:not(:disabled) { box-shadow: 0 13px 26px -12px color-mix(in srgb, var(--accent) 58%, transparent); } /* ══════════════════════════════════════════════════════════════════ W-HDR (owner 2026-07-17) — the header joins the app's ONE device line. ══════════════════════════════════════════════════════════════════ Was `max-width: 640px` — an orphan value matching no token and no neighbour. The band that stacks on a phone flipped at THREE different widths: header 640 · tab bar 720 · topbar + .kpi-grid + bottom nav 768. Between 641-768 the shell was in mobile mode (KPI already 2-up, bottom nav on) while the header still ran its desktop row - a 128px dead zone where the CTA's place was decided by the title string (see the layout note above). 768px = --bp-tablet in tokens.css AND the app's de-facto device line, so the whole band now flips in ONE step. Sizes step with it: the 22px title + 44px chip + 46px action were authored for a 1440px canvas and never shrank - on a 375px phone the chrome ate 23% of the viewport. The action lands on 44px = the exact WCAG touch target .icon-btn already uses at this breakpoint (:10029), which also squares the header's gear-vs-CTA 2px mismatch. ══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ADR-288 follow-up (owner 2026-07-25: "التاريخ ميخدش صف زيادة"). ──────────────────────────────────────────────────────────────── The one-column stack below was correct while the actions cell held a full-width primary BUTTON. Now that the button is docked in the bottom bar, the cell holds only the date pill — and stacking it cost a whole 46px row (measured: the header was 98px on a 375 phone, 42 of it the title row and 46 a row containing one pill). The button vacated exactly the space the date needs, so the header goes back to its DESKTOP two-column shape on phones: title on the start edge, date pill shrink-to-fit on the end edge, one row. 98px -> 42px. */ /* ── W-HDR-CAP (owner screenshot 2026-08-13, marketing) ────────────────── The action column was `auto`, i.e. sized to its own content with no ceiling. Marketing puts a month picker (then capped at 50vw = 206px) AND a settings gear in the date slot, so on a 412px phone the column claimed ~260px and left ~50px for the icon + title + description: the title ellipsized to "الـتـ…" and the description wrapped one character per line. `minmax(0, 52%)` makes the CONTROLS shrink first and guarantees the screen's identity just under half the row. This is the central law for every screen — appointments passes a doctor wheel is a browser overlay, so it renders above everything regardless. */ @media (max-width: 768px) { .date-range-trigger { flex-direction: column !important; align-items: stretch !important; } .date-range-trigger > .date-range-popover { position: static !important; inset: auto !important; width: 100% !important; max-width: none !important; margin-top: 8px !important; max-height: none !important; overflow: visible !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important; } /* The popover renders in normal flow, so its width is its TRIGGER's width - and in the header the trigger is one flex item sharing the row with the primary action, i.e. about half a phone screen. A month calendar cannot live in ~190px. While the popover is open, the date slot claims the whole header row (the actions row already wraps), so the calendar gets the full width and the trigger returns to sharing the row on close. position:fixed is deliberately NOT used here - see BUG-A above: a transformed route ancestor re-anchors fixed to itself. */ .screen-header__date:has(.date-range-trigger.is-open) { flex: 1 0 100%; } } /* Anatomy W1-F6-b5: range-calendar day cells. Classes (not inline colors) so THEMES override the on-accent text exactly like .btn.primary — obsidian + indigo ship a LIGHT accent where hardcoded white was unreadable (the same family as the stuck-white popover the owner caught). */ .drf-day { min-height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .drf-day:hover { background: var(--bg-subtle); } .drf-day--in, .drf-day--in:hover { background: var(--accent-soft); color: var(--accent-text); } .drf-day--edge, .drf-day--edge:hover { background: var(--accent); color: #fff; } .drf-day--today:not(.drf-day--edge) { border-color: var(--accent); } [data-theme="obsidian"] .drf-day--edge { color: #14110a; } [data-theme="indigo"] .drf-day--edge { color: #0c0f25; } [data-theme="petrol"] .drf-day--edge { color: #04222a; } /* ADR-141: on desktop LTR the dashboard date filters sit at the right edge of the header, so the popover's inline `left:0` anchor overflows; right-anchor it in LTR so it opens inward. Desktop only now (<=768px = inline flow above). */ @media (min-width: 769px) { [dir="ltr"] .date-range-trigger > .date-range-popover { left: auto !important; right: 0 !important; } } /* ============================================================ V-Phase2 Wave 3b — Patient File mobile polish (ADR-132) ============================================================ Owner audit reported on the patient-file screen: - 9 inner tabs with no visible scroll affordance - The PatientHeader's 7 actions (4 icons + 3 text buttons + 1 primary CTA) stack one-per-row on phones, eating ~150px of chrome - الفواتير + الجلسات render their DataTables as raw tables, so 7-8 columns get squeezed to ~50px each on a 375px viewport and the actions column is clipped Wave 3b fixes: A. PatientHeader actions compressed for phones B. .pf-tab-strip edge gradient hint that scroll is possible C. mobileCard enabled on Invoices + Sessions (JSX-side) */ @media (max-width: 480px) { /* A — PatientHeader actions: pack icons into a tight row, drop the "السجل الطبى" + "اشرح للمريض" labels to icon-only so the primary "حجز موعد جديد" CTA gets its own full-width row at the end. flex-wrap stays on so the icons stay readable when the row gets narrow. Text-hiding strategy: font-size: 0 on the button collapses the bare text-node children (the labels are written as direct text nodes after the SVG, not wrapped in spans). The lucide SVG icons set width + height via attributes (the size prop), so font-size: 0 doesn't shrink the glyph — it stays at 16px. title + aria-label on each button keep the long form available for screen readers and hover tooltips. */ /* width: auto overrides the existing `.dash-hero-actions .btn { width: 100%; }` at the same media query (line ~10597). Without this the icon-only-on-mobile buttons would still stretch to the full row width. */ /* The primary CTA "حجز موعد جديد" takes the whole row so it reads as the dominant action. */ /* B — Patient File tab strip edge gradient hint. The 9 tabs overflow to horizontal scroll on phones; without a visual fade at the trailing edge users don't realize they can swipe. The gradient + an inline 12px scroll-padding-inline reveal hidden tabs slightly so the affordance is obvious. */ } @media (max-width: 768px) { /* 1 — Overview activity + quick actions stack vertically */ /* 2 — Manual send: three sections stack as a wizard. Slightly larger gap so the visual rhythm of step-by-step is clear. */ /* 3 — Inbox master-detail. When a thread is selected the list collapses + the chat goes full-width. When nothing is selected the chat panel doesn't render (the JSX already skips it when !selectedThread), so the list takes the whole screen by default — no extra rule needed. */ .wa-inbox-grid--has-selected .wa-inbox-list { display: none; } .wa-inbox-grid--has-selected .wa-inbox-thread { height: calc(100dvh - 220px); min-height: 420px; } } /* ============================================================ V-Phase2 Wave 3b-extras — Dental chart + X-ray lightbox mobile ============================================================ Owner audit on the Patient File flagged two remaining mobile issues that didn't fit in Wave 3b: 1. Dental chart at 375px: - The outer 1fr+320px split forced the chart pane into ~23px of content width while the side detail panel ate 320px. - Tooth row at repeat(16, 1fr) gave ~21px per tooth — well below the 44px touch-target floor; doctors mis-tapped adjacent teeth constantly. Fix: at <=768px, collapse the shell to a single column so the chart gets the full width; switch the tooth row to a flex layout with min-content per tooth (36px) + horizontal scroll. The doctor swipes the row to reach distant teeth rather than hunting tiny targets. 2. MediaLightbox at 375px: - The central ResponsiveModal composition keeps viewer chrome inside a viewport-height mobile sheet and preserves native pinch zoom. */ /* X-ray thumbnail hover: a dark scrim + a preview (eye) icon revealed on hover. Hover Wave 1 - was a hand-rolled JS background swap that set the scrim but NEVER revealed the eye (its opacity stayed 0 - a latent bug since the gallery shipped). Pure CSS parent-hover reveal shows both. */ .xray-thumb__scrim { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0); transition: background 0.2s; } .xray-thumb:hover .xray-thumb__scrim { background: rgba(0, 0, 0, 0.3); } .xray-thumb__eye { opacity: 0; transition: opacity 0.2s; } .xray-thumb:hover .xray-thumb__eye { opacity: 1; } /* Central MediaLightbox — ResponsiveModal owns the sheet/backdrop lifecycle. */ .rm-card.media-lightbox { height: min(88dvh, 760px); } .rm-card.media-lightbox .rm-body { padding: 0; overflow: hidden; } .media-lightbox__layout { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #0b1020; } .media-lightbox__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: repeating-linear-gradient(45deg, #0b1020, #0b1020 14px, #111a2e 14px, #111a2e 28px); } .media-lightbox__image { display: block; max-inline-size: 100%; max-block-size: 100%; inline-size: 100%; block-size: 100%; object-fit: contain; transform-origin: center; transition: transform 180ms ease; touch-action: pinch-zoom; } .media-lightbox__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); color: rgba(255, 255, 255, 0.72); text-align: center; } .media-lightbox__navigation { position: absolute; inset: 0; pointer-events: none; } .media-lightbox__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inline-size: 48px; block-size: 48px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-pill); background: rgba(3, 7, 18, 0.72); color: #fff; display: grid; place-items: center; cursor: pointer; pointer-events: auto; } .media-lightbox__nav--previous { inset-inline-start: 12px; } .media-lightbox__nav--next { inset-inline-end: 12px; } .media-lightbox__nav:disabled { opacity: 0.3; cursor: default; } .media-lightbox__meta { flex: 0 0 auto; padding: 8px 16px 0; color: rgba(255, 255, 255, 0.7); font-size: var(--text-meta); text-align: center; } .media-lightbox__toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2-5); padding: 12px 16px 16px; } .media-lightbox__zoom, .media-lightbox__actions { display: flex; align-items: center; gap: var(--space-1-5); } .media-lightbox__control, .media-lightbox__zoom-reset { min-inline-size: 44px; min-block-size: 44px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #fff; display: grid; place-items: center; cursor: pointer; } .media-lightbox__zoom-reset { min-inline-size: 68px; font-weight: 800; } .media-lightbox__control:disabled { opacity: 0.35; cursor: default; } .media-lightbox__actions .btn { min-block-size: 44px; } @media (max-width: 768px) { /* 1a — Stack the chart + detail panel vertically so the chart gets the full content width. The detail panel (selected tooth info + state assignment) drops below. */ .dc-shell { grid-template-columns: 1fr !important; gap: 12px !important; } /* 1b — Tooth row: min-content flex with horizontal scroll. Each tooth gets 36px min-width which keeps the SVG legible and the touch target safe; gap shrinks slightly to fit a few more teeth on-screen per scroll position. !important needed because the inline grid-template-columns sets the equal-fraction layout at the same specificity level. */ .dc-tooth-row { display: flex !important; grid-template-columns: none !important; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; gap: 4px !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .dc-tooth-row > * { flex: 0 0 36px; min-width: 36px; scroll-snap-align: center; } /* Surround the tooth rows in their parent .dc-chart-surface so the upper-jaw + lower-jaw labels still center over the scrollable strips and a subtle scroll affordance hints that the row continues beyond the viewport. */ .dc-chart-surface { position: relative; } /* 2 — The central viewer becomes a viewport-height bottom sheet. */ .rm-card.media-lightbox { height: 94dvh; max-height: 94dvh; } .media-lightbox__stage { min-height: calc(100dvh - 260px); } .media-lightbox__toolbar, .media-lightbox__actions { inline-size: 100%; } .media-lightbox__actions .btn { flex: 1 1 auto; } } /* ADR-170 Fix #5 (2026-06-05): tighter floor for phone-class viewports. The Wave 3b-extras 36px tooth size at <=768px keeps 16 teeth visible on a 7-inch tablet, but at <=600px (phones + 6-inch tablets) doctors were still mis-tapping. Per WCAG 2.1 the touch-target floor is 44px; this block raises every tooth to that floor at small viewports and widens the gap slightly so adjacent teeth never share an edge. The horizontal scroll the parent block already enables continues to let the doctor reach distant teeth. */ @media (max-width: 600px) { .dc-tooth-row > * { flex: 0 0 44px; min-width: 44px; min-height: 44px; } .dc-tooth-row { gap: 6px !important; } } /* ───────────────────────────────────────────────────────────────────── V-Phase2 Wave 4 (ADR-133) — TopBar + Billing mobile polish ───────────────────────────────────────────────────────────────────── Wave 4 closes three live overflow bugs the owner reported on 2026-05-27: 1. TopBar title clipped behind the search icon. Cause: `.cmdk-launch` was the first child of `.topbar-actions` (visually right-most in RTL, directly adjacent to the title block). The icon plus the chevron-shaped focus ring left the title (`ملف المريض`, `الفواتير والمدفوعات`, etc.) with no room to render its tail letters, so it always wrapped or clipped to a 2-letter stub. Fix: push `.cmdk-launch` to `order: 99` so it visually swaps to the LEFT end of `.topbar-actions` (where the avatar used to sit). Hide the avatar + its preceding divider on mobile — the user/clinic identity is already surfaced in the mobile nav sheet that the hamburger opens, so the topbar real estate is reclaimed entirely for navigation + key actions. 2. DentalChart still overflowed at ≤768px after Wave 3b-extras. Cause: the previous `grid-template-columns: 1fr !important` didn't actually stop the track from expanding — `1fr` in CSS Grid resolves to `max(min-content, available-space)`, and the tooth row's intrinsic min-content (16 teeth × 36px + gaps = ~636px) bled UP through the chart card and forced the 1fr track to expand to 700px+, overflowing the 375px viewport. Fix: use `minmax(0, 1fr)` which clamps the track's minimum to 0, AND add `min-width: 0` + `overflow: hidden` to the two child cards so their internal layouts stop dictating the outer track size. Equivalent change applied to the New / Edit Invoice modal 2fr+1fr grids for the same reason — their 5-column items tables were similarly bleeding intrinsic width into the outer grid. 3. Billing KPI tiles felt oversized on phones. Cause: V-Mobile/KpiTypo's clamp (22→36px) does scale by viewport, but at 375px it still resolves to 22-24px which reads larger than the surrounding density. Padding + icon sizes were also still at desktop scale. Fix: tighten value to 20px, label to 10px, icon to 28px, padding to 12px on phones. Matches the tile chrome density already used on the inventory hub. */ @media (max-width: 768px) { /* (W4-A TopBar avatar/divider hide removed 2026-07-09 - the topbar avatar + divider were deleted entirely in F2, so the mobile hide rule is moot.) */ /* W4-B — DentalChart: stop the 1fr column from expanding to fit the inner tooth row's min-content. minmax(0, ...) plus the child min-width: 0 are needed together — neither alone is enough because the inline grid-template-columns ships with `1fr 320px` (specificity tie that requires !important on the replacement). */ .dc-shell { grid-template-columns: minmax(0, 1fr) !important; } .dc-chart-card, .dc-detail-card { min-width: 0; overflow: hidden; } /* W4-C — Billing KPI density: tighter padding + smaller value font so the four tiles read as compact metrics rather than hero panels. !important on the value font because the fluid clamp upstream (V-Mobile/KpiTypo) ships at the same specificity (a single class selector) and would otherwise win the cascade through source-order. */ .metric-tile { padding: 12px 12px; gap: var(--space-1-5); } .metric-tile-value { font-size: 20px !important; } .metric-tile-icon { width: 28px; height: 28px; font-size: var(--text-base); } .metric-tile-label { font-size: var(--text-micro); } .metric-tile-hint { font-size: var(--text-micro); } } /* V-Phase2 Wave 4b (ADR-134) — Wave 4 D rules removed. The invoice modals no longer use a 2fr+1fr layout or 5-column items table — they now follow the unified vertical card-stack pattern shared by AddSessionModal + LabOrderModal + EditPurchaseInvoiceModal, so the @media (max-width: 720px) rules for `.new-invoice-2col`, `.new-invoice-items-table`, `.edit-invoice-items-table`, and `.ni-page-header--in-modal` are no longer needed and have been deleted. The items now wrap naturally via flex-wrap with min-widths per field. */ @keyframes mobileNavBackdropFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mobileNavSheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes mobileNavSheetSlideDown { from { transform: translateY(0); } to { transform: translateY(28px); opacity: 0; } } @media (max-width: 768px) { /* Reveal the hamburger and the bottom-sheet on phone-sized viewports. The sheet/backdrop only ever mount when window.openMobileNav() flips state in mobile-nav.jsx (returns null otherwise) — the display:flex here just unlocks the layout when they DO mount. */ .topbar-hamburger { display: inline-flex; } /* Mobile Shell Wave 1: when the bottom bar is present its "المزيد" icon owns the sheet, so the now-redundant topbar hamburger is hidden. Gated on `.has-bottom-nav` (set by mobile-bottom-nav.jsx) so the kill-switch flag fully reverts — shell off => class absent => hamburger returns here. */ .has-bottom-nav .topbar-hamburger { display: none; } .mobile-nav-backdrop { display: flex; } } /* Respect prefers-reduced-motion — skip the slide-up + fade-in for users with vestibular conditions or motion sensitivity. The sheet still appears (essential), just without the entrance animation. */ @media (prefers-reduced-motion: reduce) { .mobile-nav-backdrop, .mobile-nav-sheet { animation: none; } } /* ===================================================================== V-Inventory (ADR-058) — eighth Wave 2 polish track ===================================================================== */ /* Inventory onboarding composes the central EmptyState primitive. */ .inventory-table-empty{ padding: var(--space-6); } .inventory-empty-actions{ display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; } /* ─── @media print — clean Analytics print output ──────────────────── ADR-140 W3.3 (2026-05-28): "طباعة" button calls window.print(). Before this block the printed page included sidebar + topbar + tabs + buttons + boot splash, wasting paper and producing unreadable charts. This hides chrome, flattens the colour palette, and lets cards / tables fit the page width. */ @media print { /* hide chrome */ .sidebar, aside.sidebar, .topbar, .boot-splash, .modal-backdrop, [role="dialog"], .toast, .toast-stack, nav, [role="tablist"] { display: none !important; } /* expand main to full page */ body, html, #root, main { background: #fff !important; color: #111 !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } main { padding: 8px 12px !important; margin-inline-start: 0 !important; } /* flatten card backgrounds for print */ .card, .metric-tile { background: #fff !important; box-shadow: none !important; border: 1px solid #d4d4d8 !important; page-break-inside: avoid; break-inside: avoid; } /* hide action buttons (طباعة + نسخ + الاستيراد + similar) */ button { display: none !important; } /* keep hero subtitle (date range + summary) — primary value */ .breadcrumb { display: none !important; } /* tables keep readable */ table, .data-table { page-break-inside: auto; } tr { page-break-inside: avoid; break-inside: avoid; } /* keep currency Black */ * { color-adjust: exact; -webkit-print-color-adjust: exact; } /* SVG charts: keep colours but cap size */ svg { max-width: 100% !important; } } /* ─── .var-* family — Variance tab responsive primitives ───────────── ADR-140 W4a (2026-05-28): the variance tab on phones had three independent layout failures: 1. Header card 3-col grid wrapped subtitle to 6+ short lines 2. Wizard 4-step flex row crammed 40px circles + 12px labels into ~80px cells with vertical dividers — looked like icon-soup 3. Form rows (actual/physical/close) had 2/3-col grids that crushed the help text and shrunk the save button below thumb-tap width This block defines per-section primitives so the JSX uses semantic classNames + the responsive behaviour lives in CSS. Breakpoint: ≤720px (small tablet + phones). */ /* .var-header-grid removed (Anatomy W-JRD 2026-07-16): the bespoke variance header card is retired - the month picker rides the ONE ScreenHeader date-slot and the readiness gauge became an actionable hint card in the analytics inventory tab. */ /* .var-wizard family removed (Anatomy W-JRD 2026-07-16, owner review): the step wizard is retired - the stocktake flow is one ledger table. */ /* .var-form-row family + .var-qty-input removed (Anatomy W-JRD v3, 2026-07-17): the inline-entry spreadsheet + the اعتماد strip are retired - entry lives in StocktakeEntryModal (ResponsiveModal recipe) and the ONE CTA rides the ScreenHeader, so no variance-specific layout CSS remains. */ /* .var-close-card + .var-scroll-wrap removed (Anatomy W-JRD 2026-07-16): superseded again by v3 - the اعتماد strip died too; the ONE CTA rides the ScreenHeader and entry lives in StocktakeEntryModal. Every table is a DataTable (mobile cards - no raw horizontally-scrolled table left). */ /* .bom-split family removed (Anatomy W-SVC 2026-07-17): the مكونات الخدمة master-detail tab was retired — its jobs live in بطاقة الخدمة (detail contract) + services/bom-modal.jsx (reception contract), both on central primitives with no bespoke CSS. */ /* ─── .metric-tile.is-active — clicked filter highlight (V-Inventory/3) Hover Wave 3d (owner, 2026-07-11): the hard 1.5px outline read as a foreign system next to the tiles' soft language ("التحديد مختلف"). ONE selected look now: a soft tile-color WASH + a clearer border + the soft glow - consistent with the tile hover discipline, and the same on every clickable-filter screen (inventory + patients wire the same class). */ .metric-tile.is-active { background: color-mix(in srgb, var(--tile-color, var(--accent)) 8%, var(--bg-card)); border-color: color-mix(in srgb, var(--tile-color, var(--accent)) 45%, var(--border)); box-shadow: 0 6px 16px color-mix(in srgb, var(--tile-color, var(--accent)) 12%, transparent); } /* ─── .wa-empty — V-WhatsApp/4 (ADR-059) rich empty-state shell ───── WhatsApp's legacy empty shell mirrors the established empty-state recipe so consumers in overview-tab + inbox-tab + manual-tab render with identical dimensions regardless of host card padding. */ .wa-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 20px; border: 2px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); gap: var(--space-1-5); } .wa-empty-icon { width: 56px; height: 56px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; font-size: 28px; background: color-mix(in srgb, var(--text-tertiary) 10%, transparent); margin-bottom: 6px; } .wa-empty-title { font-weight: 800; font-size: var(--text-md); color: var(--text-primary); } .wa-empty-hint { font-size: var(--text-meta); color: var(--text-secondary); max-width: 480px; line-height: 1.7; } .wa-empty.is-accent .wa-empty-icon { background: var(--accent-soft); } .wa-empty.is-success .wa-empty-icon { background: var(--success-soft); } .wa-empty.is-warning .wa-empty-icon { background: var(--warning-soft); } .wa-empty.is-danger .wa-empty-icon { background: var(--danger-soft); } .wa-empty.is-info .wa-empty-icon { background: var(--info-soft); } .wa-empty.is-muted .wa-empty-icon { background: color-mix(in srgb, var(--text-tertiary) 10%, transparent); } /* ─── .wa-schedule-bar — V-WhatsApp/3 (ADR-059) info strip ────────── Pure informational schedule summary in automation-tab. The compact "⚙ الإعدادات والمواعيد" CTA that used to anchor this bar moved into the hero's tab-aware actions row, so the bar is now a single-line summary without an embedded button. */ /* ─── Settings shell + sidebar nav polish — V-Settings/4 (ADR-060) ── Replaces the inline `gridTemplateColumns: '220px 1fr'` from the Settings() return. The nav card stays vertical (the 7-tab depth doesn't fit a horizontal Tabs primitive comfortably); active item gets a 3px accent borderInlineStart stripe + soft accent bg so the current tab is scannable without color noise. */ .settings-shell { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-5); align-items: start; } .settings-nav { padding: var(--space-2-5); position: sticky; top: 20px; } .settings-nav-item { position: relative; border-inline-start: 3px solid transparent; transition: background var(--duration-fast) var(--ease-smooth), border-inline-start-color var(--duration-fast) var(--ease-smooth); } .settings-nav-item.active { background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated)); border-inline-start-color: var(--accent); font-weight: 800; } .settings-nav-item.active .icon-box { color: var(--accent); } /* Wave 6: mobile-only horizontal Tabs strip for Settings. Default hidden on desktop+ where the vertical sidebar reads better; flipped on <=768px where the sidebar wastes ~350px of vertical space before the content. Sticky at top so the active-tab indicator stays visible while scrolling through the form. */ /* Settings mobile tab strip. The unified ScreenTabBar inside owns sticky + opaque bg + elevate-on-scroll + swipe (one architecture); this wrapper only toggles desktop↔mobile visibility. It sits ABOVE the hero (a direct child of the screen root) so the strip keeps the ScreenTabBar's own side padding. */ .settings-tabs-mobile { display: none; } @media (max-width: 768px) { .settings-shell { grid-template-columns: 1fr; } /* ADR-292: the rail is no longer hidden on phones - it IS the phone UI. Settings became a menu you drill into, so the SAME rows the desktop rail renders take the full width and gain a subtitle + chevron. One array, one row component, one order: the two surfaces cannot drift. */ .settings-nav { display: block; position: static; padding: var(--space-1-5); } .settings-nav-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'icon label chev' 'icon sub chev'; align-items: center; column-gap: var(--space-3); width: 100%; min-height: 56px; /* comfortably past the 44px touch target */ padding: var(--space-2-5) var(--space-2); text-align: start; } .settings-nav-item .icon-box { grid-area: icon; } .settings-nav-label { grid-area: label; font-weight: 700; font-size: var(--text-sm); } .settings-nav-sub { grid-area: sub; font-size: var(--text-meta); color: var(--text-tertiary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-nav-chev { grid-area: chev; color: var(--text-tertiary); flex-shrink: 0; } /* Rows read as a list, not as ten separate cards. */ .settings-nav-item + .settings-nav-item { border-top: 1px solid var(--border); } /* The strip is retired on phones (ADR-292) - the menu replaced it. The rule stays so a stale build or a re-added markup node can never paint both. */ .settings-tabs-mobile { display: none; } } /* ─── Settings nav groups (owner 2026-07-28) ──────────────────────────────── Nine flat rows is a wall on a phone; three named shelves is a menu. The group label is a quiet eyebrow, not a second heading — it orients without competing with the row labels. */ .settings-nav-group + .settings-nav-group { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border); } .settings-nav-group-label { padding: var(--space-1) var(--space-2-5) var(--space-1-5); font-size: var(--text-meta); font-weight: 800; letter-spacing: 0.02em; color: var(--text-tertiary); } @media (max-width: 768px) { /* The rows already carry a hairline between them; a group boundary needs to read as a BIGGER gap, not a double line. */ .settings-nav-group + .settings-nav-group { margin-top: var(--space-4); border-top: 0; padding-top: 0; } .settings-nav-group-label { padding-inline: var(--space-2); } } /* ═══════════════════════════════════════════════════════════════════════════ Settings form vocabulary — the ONE field anatomy (owner 2026-07-28). Consumed by app/src/ui/settings-form.jsx. Before this, five hand-rolled card-and-label dialects lived inside one screen; sections now compose the app-wide SectionCard and every field is the same object. ══════════════════════════════════════════════════════════════════════════ */ .settings-body { min-width: 0; } .set-form { min-width: 0; } /* minmax(0, 1fr), never a bare 1fr: a bare 1fr is min-width:auto and a