/* * ============================================================ * LUMINA·DX PORTAL — MASTER STYLESHEET * Design System v1.1 · Sans-only typography * * Brand: Lumina·Dx — Clinical Operations Platform * Prefix: .ldx- (classes), --ldx- (custom properties) * * TYPOGRAPHY: * Primary: Inter (headings + body + UI) * Mono: IBM Plex Mono (MRNs, codes, encounter numbers) * No serif. Hierarchy via weight contrast: * 800 — page titles, KPI values, patient names * 700 — card titles, section headings * 600 — labels, badges, emphasis * 500 — buttons, nav links * 400 — body text * * Architecture: * - Single source of truth for all portal styles * - Scoped under .ldx-portal-layout (never bleeds to public site) * - All PHP modules reference .ldx- classes only * * Load via WPCodeBox CSS snippet on portal routes only. * ============================================================ */ /* ============================================================ 0. GOOGLE FONTS ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&family=IBM+Plex+Mono:wght@400;500;700&display=swap"); /* ============================================================ 1. HTML & BODY RESET Since the portal runs on its own subdomain (or bypasses the theme via the router), we own the full page. This sets 1rem = 10px which the entire design token system depends on. ============================================================ */ html { font-size: 62.5% !important; /* 1rem = 10px */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body.ldx-portal-body { margin: 0 !important; padding: 0 !important; min-height: 100vh; min-height: 100dvh; background: #F4F4F5; /* zinc-100 — matches --ldx-ink-100 */ overflow: hidden; } /* Kill any theme wrappers/spacing that might leak through */ body.ldx-portal-body #page, body.ldx-portal-body #content, body.ldx-portal-body .site, body.ldx-portal-body .site-content, body.ldx-portal-body .entry-content, body.ldx-portal-body main.site-main { max-width: none !important; padding: 0 !important; margin: 0 !important; } /* ============================================================ 2. DESIGN TOKENS — Lumina·Dx v2 (zinc-anchored, dual-brand) v1 → v2 migration (Phase A · 2026-05-02): • Ink: cool slate → true-neutral zinc (no hue cast) • Brand: electric blue → DEEP TEAL — Lumina·Dx is teal everywhere it can be. Clinic override via ldx_brand_color flips it on tenant surfaces (e.g. a tenant configures #2563EB). • NEW: --ldx-platform-accent (also teal) for surfaces that must NEVER be tenant-overridden — auth wordmark dot, "Powered by" footer. Same value as --ldx-brand by default; semantically distinct so a tenant remap doesn't poison platform identity. • Sidebar: gradient → flat zinc-950 • Shadows: blue-tinted → neutral charcoal • Radius: chunky (22/16) → sharper (12/8) Backup of pre-migration tokens: core/global-styles.backup-2026-05-02.css ============================================================ */ :root { /* ── Ink (true-neutral zinc) ──────────────────────────────────── */ --ldx-ink-950: #09090B; --ldx-ink-900: #18181B; --ldx-ink-800: #27272A; --ldx-ink-700: #3F3F46; --ldx-ink-600: #52525B; --ldx-ink-500: #71717A; --ldx-ink-400: #A1A1AA; --ldx-ink-300: #D4D4D8; --ldx-ink-200: #E4E4E7; --ldx-ink-100: #F4F4F5; --ldx-ink-50: #FAFAFA; /* ── Surfaces ─────────────────────────────────────────────────── */ --ldx-bg: #FAFAFA; --ldx-surface: #FFFFFF; --ldx-surface-card: #FFFFFF; /* was #fefbfb — was a typo, fixed */ --ldx-surface-inset: #F4F4F5; --ldx-surface-subtle: #FAFAFA; --ldx-surface-raised: #FFFFFF; /* ── Brand — Lumina·Dx Deep Teal (default for un-themed tenants) ── * Teal IS the Lumina·Dx brand. Default everywhere it can be — auth, * marketing, un-themed tenants. Tenants override via ldx_brand_color * setting (e.g. a tenant might pick #2563EB) — that override flips to * THEIR color on tenant-portal surfaces. * * The dual-token architecture is preserved: --ldx-platform-accent * (also teal) below is what surfaces use when they must NEVER be * tenant-overridden (auth wordmark dot, "Powered by" footer). Same * value, different semantics — protects platform identity even on * a tenant whose brand has been remapped to e.g. red. * ─────────────────────────────────────────────────────────────── */ --ldx-brand: #0D9488; --ldx-brand-hover: #0F766E; --ldx-brand-active: #115E59; --ldx-brand-light: #F0FDFA; --ldx-brand-border: #99F6E4; --ldx-brand-accent: #14B8A6; --ldx-brand-muted: #5EEAD4; --ldx-brand-50: #F0FDFA; --ldx-brand-950: #042F2E; /* ── Platform accent — Lumina·Dx teal — NEVER tenant-overridden ─── * Use only on platform-brand surfaces: * • auth/login screens * • marketing site (luminadx.cloud) * • "Powered by Lumina·Dx" affordances and footers * • owner/admin platform pages (settings → billing → subscriptions) * • documentation * Inside tenant-portal surfaces, prefer --ldx-brand so the clinic's * theme drives the look — this token defers there. * ─────────────────────────────────────────────────────────────── */ --ldx-platform-accent: #0D9488; --ldx-platform-accent-hover: #0F766E; --ldx-platform-accent-active: #115E59; --ldx-platform-accent-light: #F0FDFA; --ldx-platform-accent-border: #99F6E4; --ldx-platform-accent-50: #F0FDFA; --ldx-platform-accent-950: #042F2E; /* ── Sidebar — flat zinc-950 (gradient retired) ───────────────── */ --ldx-sidebar-bg: #18181B; --ldx-sidebar-border: rgba(255, 255, 255, 0.06); --ldx-sidebar-width: 260px; /* ── Gold — warnings, allergy flags ── */ --ldx-gold: #92400E; --ldx-gold-mid: #D97706; --ldx-gold-light: #FFFBEB; --ldx-gold-border: #FDE68A; /* ── Semantic states ── */ --ldx-success: #15803D; --ldx-success-mid: #10B981; /* was #22C55E — slightly less vivid */ --ldx-success-light: #F0FDF4; --ldx-success-border: #BBF7D0; --ldx-danger: #DC2626; --ldx-danger-mid: #EF4444; --ldx-danger-light: #FEF2F2; --ldx-danger-border: #FECACA; --ldx-warning: #D97706; --ldx-warning-dark: #92400E; --ldx-warning-light: #FFFBEB; /* --ldx-info is sky-500 — informational banners stay in a neutral * platform-blue regardless of tenant theme, so they read as system * messages rather than brand-tinted. Distinct from --ldx-brand (teal) * so info-level callouts don't collide with brand CTAs. */ --ldx-info: #0EA5E9; --ldx-info-light: #E0F2FE; --ldx-neutral: #52525B; --ldx-neutral-light: #F4F4F5; --ldx-neutral-border: #E4E4E7; /* ── Typography ── */ --ldx-font-sans: "Inter", system-ui, -apple-system, sans-serif; --ldx-font-body: var(--ldx-font-sans); --ldx-font-mono: "IBM Plex Mono", "Courier New", monospace; /* ── Type scale — Portal-grade (flat, no clamp) ── 1rem = 10px (requires html { font-size: 62.5% }) v3.0 → v3.1: xs 10px → 10px sm 12.8 → 12px base 16–18 → 14px md 20–23 → 16px lg 25–28 → 18px xl 31–35 → 20px 2xl 39–44 → 24px 3xl 49–55 → 28px 4xl 61–69 → 36px */ --ldx-text-xs: 1.0rem; /* 10px */ --ldx-text-sm: 1.2rem; /* 12px */ --ldx-text-base: 1.4rem; /* 14px */ --ldx-text-md: 1.6rem; /* 16px */ --ldx-text-lg: 1.8rem; /* 18px */ --ldx-text-xl: 2.0rem; /* 20px */ --ldx-text-2xl: 2.4rem; /* 24px */ --ldx-text-3xl: 2.8rem; /* 28px */ --ldx-text-4xl: 3.6rem; /* 36px */ /* ── Spacing — tightened upper end ── v3.0 → v3.1: space-1 5→4, space-6 36→32, space-8 54→48, space-10 80→64, space-12 120→96 */ --ldx-space-1: 0.4rem; /* 4px */ --ldx-space-2: 0.8rem; /* 8px */ --ldx-space-3: 1.2rem; /* 12px */ --ldx-space-4: 1.6rem; /* 16px */ --ldx-space-5: 2.4rem; /* 24px */ --ldx-space-6: 3.2rem; /* 32px */ --ldx-space-8: 4.8rem; /* 48px */ --ldx-space-10: 6.4rem; /* 64px */ --ldx-space-12: 9.6rem; /* 96px */ /* ── Border radius — sharpened (was 22/16/10/6 → 12/8/6/4) ── */ --ldx-radius-sm: 4px; --ldx-radius-md: 6px; --ldx-radius-lg: 8px; --ldx-radius-xl: 12px; /* ── Shadows — neutral charcoal (was cool blue-tinted) ── */ --ldx-shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04); --ldx-shadow-sm: 0 2px 4px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04); --ldx-shadow-md: 0 4px 12px rgba(9, 9, 11, 0.06), 0 2px 4px rgba(9, 9, 11, 0.04); --ldx-shadow-lg: 0 12px 32px rgba(9, 9, 11, 0.10), 0 4px 12px rgba(9, 9, 11, 0.06); --ldx-shadow-xl: 0 24px 64px rgba(9, 9, 11, 0.14), 0 8px 16px rgba(9, 9, 11, 0.06); --ldx-glow: 0 0 0 3px rgba(13, 148, 136, 0.18); /* tenant brand glow (teal default) */ --ldx-glow-platform: 0 0 0 3px rgba(13, 148, 136, 0.20); /* platform-accent glow */ --ldx-glow-danger: 0 0 0 3px rgba(220, 38, 38, 0.12); /* ── Transitions ── */ --ldx-transition: 0.15s ease; --ldx-transition-slow: 0.25s ease; /* ── Z-index ── */ --ldx-z-sidebar: 50; --ldx-z-overlay: 40; --ldx-z-dropdown: 60; --ldx-z-toast: 70; } /* ============================================================ 3. RESET & BASE (scoped) ============================================================ */ .ldx-portal-layout *, .ldx-portal-layout *::before, .ldx-portal-layout *::after { box-sizing: border-box; margin: 0; padding: 0; } .ldx-portal-layout { font-size: 1.4rem; /* 14px base text at 62.5% html */ font-family: var(--ldx-font-sans); line-height: 1.6; color: var(--ldx-ink-700); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .ldx-portal-layout a { color: inherit; text-decoration: none; } .ldx-portal-layout button { font-family: var(--ldx-font-sans); cursor: pointer; } .ldx-portal-layout img { max-width: 100%; display: block; } .ldx-portal-layout ul, .ldx-portal-layout ol { list-style: none; } /* ============================================================ 4. LAYOUT SHELL ============================================================ */ .ldx-portal-layout { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--ldx-bg); position: relative; } .ldx-portal-main { flex: 1; min-width: 0; overflow-y: auto; /* height removed — flex:1 fills remaining space in content-column */ padding: 28px var(--ldx-space-6) var(--ldx-space-8); background: transparent; scrollbar-width: thin; scrollbar-color: var(--ldx-ink-300) transparent; } .ldx-content-column { display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; } .ldx-portal-main::-webkit-scrollbar { width: 5px; } .ldx-portal-main::-webkit-scrollbar-track { background: transparent; } .ldx-portal-main::-webkit-scrollbar-thumb { background: var(--ldx-ink-200); border-radius: 99px; } /* ============================================================ 4. SIDEBAR ============================================================ */ .ldx-portal-sidebar { width: var(--ldx-sidebar-width); background: var(--ldx-sidebar-bg); color: white; display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: var(--ldx-z-sidebar); border-right: 1px solid var(--ldx-sidebar-border); overflow: hidden; transition: transform var(--ldx-transition-slow), width var(--ldx-transition-slow); } .ldx-sidebar-brand { padding: 18px 18px 16px; display: flex; align-items: center; justify-content: center; gap: 11px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } .ldx-sidebar-brand-name { max-width: 200px; width: 100%; /* belt-and-suspenders: clip anything that somehow doesn't wrap so it can't bleed past the sidebar edge. v1.6.6 fix for the long-clinic-name-overflows-sidebar bug. */ overflow: hidden; } .ldx-sidebar-brand-name img { max-height: 32px; width: auto; display: block; } /* Inline brand lockup: charcoal mark + wordmark in one row. When the wordmark wraps (long clinic name), the row aligns the mark to the top of the multi-line text rather than the visual centre, so the mark stays anchored next to the first line. */ .ldx-brand-row { display: inline-flex; align-items: flex-start; gap: 11px; width: 100%; min-width: 0; } .ldx-brand-wordmark { font-family: var(--ldx-font-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.018em; color: #FAFAFA; line-height: 1.2; /* was 1 — multi-line clinic names need a little breathing room */ /* white-space:nowrap removed — let long clinic names wrap to a second line inside the 200px column instead of overflowing the sidebar entirely. overflow-wrap:anywhere is the last-resort break for pathological inputs like one giant unspaced string. */ overflow-wrap: anywhere; min-width: 0; } /* Collapsed-state mark, hidden by default; the collapse JS toggles display. */ .ldx-sidebar-brand-icon { display: none; align-items: center; justify-content: center; } .ldx-sidebar-nav { flex: 1; padding: 8px 0 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; } .ldx-sidebar-nav::-webkit-scrollbar { width: 3px; } .ldx-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); } /* Section label — slightly tighter, more refined, with a subtle hairline above so the section break reads even when section names are short. */ .nav-section-label { padding: 0 18px; margin: 18px 0 6px; font-family: var(--ldx-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.32); user-select: none; } .nav-section-label:first-child { margin-top: 8px; } a.nav-link, a.active-link { display: flex; align-items: center; gap: 11px; padding: 11px 18px; font-family: var(--ldx-font-sans); font-size: var(--ldx-text-base); font-weight: 400; text-decoration: none !important; cursor: pointer; position: relative; transition: color var(--ldx-transition), background var(--ldx-transition); border: none; outline: none; white-space: nowrap; } /* ── Base link ── */ a.nav-link { color: rgba(255, 255, 255, 0.65); } a.nav-link:hover { color: white; background: rgba(255, 255, 255, 0.04); } a.nav-link:hover .nav-icon { opacity: 0.9; } /* ── Active link — translucent brand gradient that fades into the dark sidebar ── Uses --ldx-brand via color-mix so the gradient follows tenant override automatically (was hardcoded electric blue rgba). On the default Lumina·Dx install this resolves to teal; tenants with ldx_brand_color set get their own color. */ a.active-link { font-weight: 500; color: white; background: linear-gradient( 90deg, color-mix(in srgb, var(--ldx-brand) 18%, transparent) 0%, color-mix(in srgb, var(--ldx-brand) 0%, transparent) 100% ); } /* Full-height left indicator with subtle neon glow — also tenant-aware */ a.active-link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ldx-brand-accent); box-shadow: 2px 0 8px color-mix(in srgb, var(--ldx-brand) 50%, transparent); } /* ── Icons ── */ .nav-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; opacity: 0.50; transition: all var(--ldx-transition); } a.active-link .nav-icon { opacity: 1; color: var(--ldx-brand-accent); } a.nav-link:hover .nav-icon { opacity: 0.85; } .nav-badge { margin-left: auto; font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--ldx-danger); color: white; line-height: 1.5; flex-shrink: 0; } .nav-badge--success { background: var(--ldx-success); } .nav-badge--warning { background: var(--ldx-gold-mid); } .ldx-sidebar-footer { padding: 16px 18px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 11px; background: rgba(0,0,0,0.18); flex-shrink: 0; } .ldx-sidebar-avatar { width: 36px; height: 36px; border-radius: 9px; background: #27272A; color: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; font-family: var(--ldx-font-sans); font-size: var(--ldx-text-sm); font-weight: 700; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); letter-spacing: 0.02em; } .ldx-sidebar-user-info { flex: 1; overflow: hidden; } .ldx-sidebar-user-name { font-size: var(--ldx-text-sm); font-weight: 500; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .ldx-sidebar-user-role { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); color: rgba(255,255,255,0.28); letter-spacing: 0.04em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ldx-sidebar-sign-out { font-size: 14px; color: rgba(255,255,255,0.25); text-decoration: none !important; transition: color var(--ldx-transition); flex-shrink: 0; padding: 4px; } .ldx-sidebar-sign-out:hover { color: rgba(255,255,255,0.65); } .ldx-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: var(--ldx-z-overlay); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .ldx-mobile-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: calc(var(--ldx-z-sidebar) + 1); width: 38px; height: 38px; background: var(--ldx-sidebar-bg); color: white; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--ldx-radius-md); align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: background var(--ldx-transition); box-shadow: var(--ldx-shadow-md); } .ldx-mobile-toggle:hover { background: var(--ldx-ink-800); } /* ============================================================ 5. PAGE HEADER ============================================================ */ .ldx-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ldx-space-4); margin-bottom: var(--ldx-space-6); flex-wrap: wrap; } .ldx-page-eyebrow { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ldx-ink-400); margin-bottom: 4px; } .ldx-page-title { font-family: var(--ldx-font-sans); font-size: var(--ldx-text-2xl); font-weight: 800; color: var(--ldx-ink-950); letter-spacing: -0.02em; line-height: 1.2; margin: 0; /* override browser/theme default

margins */ } .ldx-page-title em { color: var(--ldx-brand); font-style: italic; } /* Defense-in-depth: any raw heading inside the portal inherits our sans- serif font stack even if a future module forgets to add .ldx-page-title. Themes like TwentyTwentyFour set serif fonts on h1-h6 by default; this rule wins via specificity equal to the theme's heading selector. */ h1, h2, h3, h4, h5, h6 { font-family: var(--ldx-font-sans); } .ldx-page-meta { font-size: var(--ldx-text-sm); color: var(--ldx-ink-400); margin-top: 4px; } .ldx-page-actions { display: flex; align-items: center; gap: var(--ldx-space-3); flex-wrap: wrap; flex-shrink: 0; } /* ============================================================ 6. CARDS & PANELS ============================================================ */ .ldx-card { background: var(--ldx-surface-card); border: 1px solid var(--ldx-ink-200); border-radius: var(--ldx-radius-lg); box-shadow: var(--ldx-shadow-sm); overflow: hidden; } .ldx-card-header { padding: 18px 24px; border-bottom: 1px solid var(--ldx-ink-200); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ldx-space-4); background: var(--ldx-surface-card); } .ldx-card-title { font-family: var(--ldx-font-sans); font-size: var(--ldx-text-lg); font-weight: 700; color: var(--ldx-ink-950); letter-spacing: -0.01em; line-height: 1.3; } .ldx-card-subtitle { font-size: var(--ldx-text-xs); color: var(--ldx-ink-400); margin-top: 3px; } .ldx-card-body { padding: 24px; } .ldx-card-footer { padding: 16px 24px; border-top: 1px solid var(--ldx-ink-100); background: var(--ldx-ink-50); display: flex; align-items: center; justify-content: flex-end; gap: var(--ldx-space-3); } .ldx-section-title { font-family: var(--ldx-font-sans); font-size: var(--ldx-text-md); font-weight: 400; font-style: italic; color: var(--ldx-ink-700); margin-bottom: var(--ldx-space-4); } /* ============================================================ 7. KPI / STAT CARDS ============================================================ */ .ldx-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; margin-bottom: var(--ldx-space-6); } .ldx-kpi { background: var(--ldx-surface-card); border: 1px solid var(--ldx-ink-200); border-radius: var(--ldx-radius-lg); padding: 22px 24px; box-shadow: var(--ldx-shadow-sm); } .ldx-kpi-label { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ldx-ink-400); margin-bottom: var(--ldx-space-2); } .ldx-kpi-value { font-family: var(--ldx-font-sans); font-size: var(--ldx-text-4xl); font-weight: 800; color: var(--ldx-ink-950); letter-spacing: -0.03em; line-height: 1; } .ldx-kpi-sub { font-size: var(--ldx-text-xs); color: var(--ldx-ink-400); margin-top: var(--ldx-space-2); } .ldx-kpi-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ldx-text-xs); font-weight: 600; margin-top: var(--ldx-space-2); padding: 3px 9px; border-radius: 999px; } .ldx-kpi-indicator--up { background: var(--ldx-success-light); color: var(--ldx-success); } .ldx-kpi-indicator--warn { background: var(--ldx-gold-light); color: var(--ldx-gold); } .ldx-kpi-indicator--down { background: var(--ldx-danger-light); color: var(--ldx-danger); } /* ============================================================ 8. DATA TABLES ============================================================ */ .ldx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, white 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0, linear-gradient(to right, rgba(15,23,42,0.06), rgba(15,23,42,0)), linear-gradient(to left, rgba(15,23,42,0.06), rgba(15,23,42,0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; } .ldx-table { width: 100%; border-collapse: collapse; min-width: 480px; } .ldx-table thead th { text-align: left; padding: 12px 18px; font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ldx-ink-400); background: var(--ldx-surface-card); border-top: 0.5px solid var(--ldx-ink-200); border-bottom: 0.5px solid var(--ldx-ink-200); white-space: nowrap; } .ldx-table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--ldx-ink-100); font-size: var(--ldx-text-base); color: var(--ldx-ink-700); vertical-align: middle; } .ldx-table tbody tr:last-child td { border-bottom: none; } .ldx-table tbody tr { transition: background var(--ldx-transition); } .ldx-table tbody tr:hover td { background: var(--ldx-ink-50); } .ldx-table tbody tr.is-flagged td { background: var(--ldx-danger-light); } .ldx-table tbody tr.is-flagged:hover td { background: #FEE2E2; } .ldx-table tbody tr.is-warning td { background: var(--ldx-gold-light); } .ldx-table tbody tr.is-success td { background: var(--ldx-success-light); } .ldx-table-name { font-weight: 600; color: var(--ldx-ink-950); font-size: var(--ldx-text-base); line-height: 1.3; } .ldx-table-sub { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); color: var(--ldx-brand); margin-top: 2px; } .ldx-table-muted { font-size: var(--ldx-text-sm); color: var(--ldx-ink-500); } .ldx-table-mono { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); color: var(--ldx-ink-500); } /* ============================================================ 9. BUTTONS ============================================================ */ .ldx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 20px; border-radius: var(--ldx-radius-md); font-family: var(--ldx-font-sans); font-size: var(--ldx-text-base); font-weight: 500; letter-spacing: -0.01em; cursor: pointer; border: 1px solid transparent; text-decoration: none !important; transition: background var(--ldx-transition), border-color var(--ldx-transition), box-shadow var(--ldx-transition), transform var(--ldx-transition); line-height: 1; white-space: nowrap; user-select: none; } .ldx-btn:focus-visible { outline: 2px solid var(--ldx-brand); outline-offset: 2px; } .ldx-btn:disabled, .ldx-btn.is-disabled { opacity: 0.45; pointer-events: none; } .ldx-btn--primary { background: var(--ldx-brand); color: white !important; border-color: var(--ldx-brand); box-shadow: 0 1px 3px color-mix(in srgb, var(--ldx-brand) 25%, transparent); } .ldx-btn--primary:hover { background: var(--ldx-brand-hover); border-color: var(--ldx-brand-hover); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--ldx-brand) 30%, transparent); } .ldx-btn--primary:active { transform: translateY(0); } .ldx-btn--secondary { background: white; color: var(--ldx-ink-700) !important; border-color: var(--ldx-ink-200); box-shadow: var(--ldx-shadow-xs); } .ldx-btn--secondary:hover { border-color: var(--ldx-ink-300); background: var(--ldx-ink-50); transform: translateY(-1px); box-shadow: var(--ldx-shadow-sm); } .ldx-btn--secondary:active { transform: translateY(0); } .ldx-btn--ghost { background: transparent; color: var(--ldx-ink-500) !important; border-color: transparent; } .ldx-btn--ghost:hover { background: var(--ldx-ink-100); color: var(--ldx-ink-800) !important; } .ldx-btn--danger { background: var(--ldx-danger-light); color: var(--ldx-danger) !important; border-color: var(--ldx-danger-border); } .ldx-btn--danger:hover { background: #FEE2E2; border-color: #FCA5A5; } .ldx-btn--warning { background: var(--ldx-gold-light); color: var(--ldx-gold) !important; border-color: var(--ldx-gold-border); } .ldx-btn--warning:hover { background: #FEF3C7; } /* Sizes — recalibrated v3.2 */ .ldx-btn--xs { padding: 6px 10px; font-size: var(--ldx-text-xs); border-radius: var(--ldx-radius-sm); gap: 5px; } .ldx-btn--sm { padding: 8px 16px; font-size: var(--ldx-text-sm); } .ldx-btn--lg { padding: 12px 24px; font-size: var(--ldx-text-md); } .ldx-btn--xl { padding: 14px 28px; font-size: var(--ldx-text-md); } .ldx-btn--full { width: 100%; } .ldx-btn--icon { padding: 8px; gap: 0; aspect-ratio: 1; } /* ============================================================ 10. BADGES ============================================================ */ .ldx-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-family: var(--ldx-font-sans); font-size: var(--ldx-text-sm); font-weight: 600; border: 1px solid transparent; line-height: 1.5; white-space: nowrap; } .ldx-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .ldx-badge--success { background: var(--ldx-success-light); color: var(--ldx-success); border-color: var(--ldx-success-border); } .ldx-badge--success .ldx-badge-dot { background: var(--ldx-success); } .ldx-badge--warning { background: var(--ldx-gold-light); color: var(--ldx-gold); border-color: var(--ldx-gold-border); } .ldx-badge--warning .ldx-badge-dot { background: var(--ldx-gold-mid); } .ldx-badge--danger { background: var(--ldx-danger-light); color: var(--ldx-danger); border-color: var(--ldx-danger-border); } .ldx-badge--danger .ldx-badge-dot { background: var(--ldx-danger); } .ldx-badge--brand { background: var(--ldx-brand-light); color: var(--ldx-brand); border-color: var(--ldx-brand-border); } .ldx-badge--brand .ldx-badge-dot { background: var(--ldx-brand); } .ldx-badge--neutral { background: var(--ldx-neutral-light); color: var(--ldx-neutral); border-color: var(--ldx-neutral-border); } /* ============================================================ 11. FLAG CHIPS ============================================================ */ .ldx-flag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--ldx-radius-sm); font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); font-weight: 600; letter-spacing: 0.04em; border: 1px solid transparent; white-space: nowrap; } .ldx-flag--danger { background: var(--ldx-danger-light); color: var(--ldx-danger); border-color: var(--ldx-danger-border); } .ldx-flag--warning { background: var(--ldx-gold-light); color: var(--ldx-gold); border-color: var(--ldx-gold-border); } .ldx-flag--purple { background: #FDF4FF; color: #86198F; border-color: #E9D5FF; } .ldx-flag--brand { background: var(--ldx-brand-light); color: var(--ldx-brand); border-color: var(--ldx-brand-border); } .ldx-flag-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ldx-space-3); } /* ============================================================ 12. ALERTS ============================================================ */ .ldx-alert { display: flex; align-items: flex-start; gap: var(--ldx-space-4); padding: 16px 20px; border-radius: var(--ldx-radius-md); border: 1px solid transparent; margin-bottom: var(--ldx-space-4); } .ldx-alert-icon { font-size: var(--ldx-text-md); flex-shrink: 0; margin-top: 1px; } .ldx-alert-title { font-size: var(--ldx-text-base); font-weight: 600; margin-bottom: 3px; line-height: 1.3; } .ldx-alert-msg { font-size: var(--ldx-text-sm); opacity: 0.82; line-height: 1.5; } .ldx-alert--danger { background: var(--ldx-danger-light); color: var(--ldx-danger); border-color: var(--ldx-danger-border); } .ldx-alert--warning { background: var(--ldx-gold-light); color: var(--ldx-gold); border-color: var(--ldx-gold-border); } .ldx-alert--success { background: var(--ldx-success-light); color: var(--ldx-success); border-color: var(--ldx-success-border); } .ldx-alert--brand { background: var(--ldx-brand-light); color: var(--ldx-brand); border-color: var(--ldx-brand-border); } .ldx-alert--info { background: var(--ldx-brand-light); color: var(--ldx-brand); border-color: var(--ldx-brand-border); } /* ── Flash messages (auto-dismiss after 5s) ── Used by ldx_render_flash() in Shared Utilities. Wired into Master Shell's
element. */ .ldx-flash { animation: ldx-flash-in 0.3s ease-out, ldx-flash-out 0.4s ease-in 4.6s forwards; } @keyframes ldx-flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes ldx-flash-out { from { opacity: 1; } to { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; } } .ldx-alert--critical { padding: 16px 20px; border-radius: var(--ldx-radius-lg); } .ldx-alert-critical-icon { width: 38px; height: 38px; background: var(--ldx-danger); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: var(--ldx-text-md); flex-shrink: 0; animation: ldx-pulse 2s infinite; } @keyframes ldx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(153,27,27,0.45); } 50% { box-shadow: 0 0 0 8px rgba(153,27,27,0); } } /* ============================================================ 13. FORMS ============================================================ */ .ldx-form-group { margin-bottom: var(--ldx-space-5); } .ldx-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--ldx-space-5); } .ldx-label { display: block; font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ldx-ink-500); margin-bottom: 6px; } .ldx-label .ldx-required { color: var(--ldx-danger); margin-left: 2px; } .ldx-input, .ldx-select, .ldx-textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--ldx-ink-200); border-radius: var(--ldx-radius-md); font-family: var(--ldx-font-sans); font-size: var(--ldx-text-base); color: var(--ldx-ink-950); background: white; transition: border-color var(--ldx-transition), box-shadow var(--ldx-transition); outline: none; -webkit-appearance: none; appearance: none; line-height: 1.5; } .ldx-textarea { resize: vertical; min-height: 88px; } .ldx-input:focus, .ldx-select:focus, .ldx-textarea:focus { border-color: var(--ldx-brand); box-shadow: var(--ldx-glow); } .ldx-input::placeholder, .ldx-textarea::placeholder { color: var(--ldx-ink-300); } .ldx-input--error, .ldx-select--error, .ldx-textarea--error { border-color: var(--ldx-danger) !important; box-shadow: var(--ldx-glow-danger) !important; } .ldx-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; cursor: pointer; } .ldx-form-help { font-size: var(--ldx-text-xs); color: var(--ldx-ink-400); margin-top: 5px; line-height: 1.5; } .ldx-form-error { font-size: var(--ldx-text-xs); color: var(--ldx-danger); margin-top: 5px; display: flex; align-items: center; gap: 4px; line-height: 1.5; } .ldx-check-group { display: flex; flex-wrap: wrap; gap: var(--ldx-space-4); } .ldx-check-label { display: flex; align-items: center; gap: 8px; font-size: var(--ldx-text-base); color: var(--ldx-ink-700); cursor: pointer; user-select: none; } .ldx-check-label input[type="checkbox"], .ldx-check-label input[type="radio"] { width: 16px; height: 16px; border: 1.5px solid var(--ldx-ink-300); border-radius: 4px; appearance: none; -webkit-appearance: none; background: white; cursor: pointer; transition: all var(--ldx-transition); flex-shrink: 0; position: relative; } .ldx-check-label input[type="radio"] { border-radius: 50%; } .ldx-check-label input[type="checkbox"]:checked, .ldx-check-label input[type="radio"]:checked { background: var(--ldx-brand); border-color: var(--ldx-brand); } .ldx-check-label input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg); } .ldx-check-label input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; background: white; border-radius: 50%; } .ldx-fieldset { border: 1px solid var(--ldx-ink-200); border-radius: var(--ldx-radius-lg); padding: var(--ldx-space-5); margin-bottom: var(--ldx-space-6); } .ldx-fieldset-legend { font-family: var(--ldx-font-sans); font-size: var(--ldx-text-md); font-weight: 700; color: var(--ldx-ink-950); letter-spacing: -0.01em; padding: 0 var(--ldx-space-3); margin-left: calc(-1 * var(--ldx-space-3)); } /* ============================================================ 14. PROFILE / PATIENT HERO CARD ============================================================ */ .ldx-profile-card { background: var(--ldx-surface-card); border: 1px solid var(--ldx-ink-200); border-radius: var(--ldx-radius-xl); padding: 22px 24px; display: flex; align-items: flex-start; gap: 20px; box-shadow: var(--ldx-shadow-md); position: relative; overflow: hidden; margin-bottom: var(--ldx-space-6); flex-wrap: wrap; } .ldx-profile-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ldx-brand) 0%, var(--ldx-brand-accent) 100%); } .ldx-profile-avatar { width: 56px; height: 56px; border-radius: 14px; background: var(--ldx-brand-light); color: var(--ldx-brand); display: flex; align-items: center; justify-content: center; font-family: var(--ldx-font-sans); font-size: var(--ldx-text-xl); font-weight: 700; flex-shrink: 0; border: 1px solid var(--ldx-brand-border); letter-spacing: 0.02em; } .ldx-profile-info { flex: 1; min-width: 0; } .ldx-profile-mrn { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); color: var(--ldx-brand); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .ldx-profile-name { font-family: var(--ldx-font-sans); font-size: var(--ldx-text-3xl); font-weight: 800; color: var(--ldx-ink-950); letter-spacing: -0.02em; line-height: 1.2; } .ldx-profile-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--ldx-space-3); } .ldx-profile-meta-item { display: flex; align-items: center; gap: 6px; font-size: var(--ldx-text-sm); color: var(--ldx-ink-500); } .ldx-profile-meta-item i { font-size: 11px; color: var(--ldx-ink-300); flex-shrink: 0; } .ldx-profile-actions { display: flex; align-items: center; gap: var(--ldx-space-3); flex-wrap: wrap; flex-shrink: 0; } /* ============================================================ 15. VITALS DISPLAY ============================================================ */ .ldx-vitals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 10px; } .ldx-vital { background: var(--ldx-surface-card); border: 1px solid var(--ldx-ink-200); border-radius: var(--ldx-radius-md); padding: 14px; text-align: center; box-shadow: var(--ldx-shadow-sm); } .ldx-vital-label { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ldx-ink-400); margin-bottom: var(--ldx-space-2); } .ldx-vital-value { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xl); font-weight: 500; color: var(--ldx-ink-950); line-height: 1; } .ldx-vital-unit { font-size: var(--ldx-text-xs); color: var(--ldx-ink-400); margin-top: 4px; } .ldx-vital-value--high { color: var(--ldx-danger); } .ldx-vital-value--low { color: var(--ldx-brand); } .ldx-vital-value--critical { color: var(--ldx-danger); font-weight: 700; } .ldx-vital-value--normal { color: var(--ldx-success); } /* ============================================================ 16. LAB RESULTS TABLE ============================================================ */ .ldx-analyte-name { font-size: var(--ldx-text-base); font-weight: 600; color: var(--ldx-ink-800); line-height: 1.3; } .ldx-analyte-value { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-md); font-weight: 500; color: var(--ldx-ink-950); } .ldx-analyte-value--low { color: var(--ldx-brand); font-weight: 700; } .ldx-analyte-value--high { color: var(--ldx-danger); font-weight: 700; } /* Critical analyte: color + bold = sufficient signal without size increase */ .ldx-analyte-value--crit { color: var(--ldx-danger); font-weight: 700; } .ldx-analyte-range, .ldx-analyte-unit { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); color: var(--ldx-ink-400); } /* ============================================================ 17. SOAP / CLINICAL NOTES ============================================================ */ .ldx-soap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--ldx-space-5); margin-bottom: var(--ldx-space-6); } .ldx-soap-field { display: flex; flex-direction: column; gap: 6px; } .ldx-soap-label { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ldx-ink-400); font-weight: 500; } .ldx-soap-value { font-size: var(--ldx-text-base); color: var(--ldx-ink-700); line-height: 1.6; } .ldx-soap-section { border-left: 3px solid var(--ldx-brand); padding-left: var(--ldx-space-4); margin-bottom: var(--ldx-space-5); } .ldx-soap-section-title { font-family: var(--ldx-font-sans); font-size: var(--ldx-text-md); font-weight: 700; color: var(--ldx-ink-950); letter-spacing: -0.01em; margin-bottom: var(--ldx-space-3); } /* ============================================================ 18. TABS ============================================================ */ .ldx-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ldx-ink-200); margin-bottom: var(--ldx-space-6); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ldx-tabs::-webkit-scrollbar { display: none; } .ldx-tab { display: flex; align-items: center; gap: 7px; padding: 10px 16px; font-family: var(--ldx-font-sans); font-size: var(--ldx-text-base); font-weight: 500; color: var(--ldx-ink-500); cursor: pointer; border: none; border-bottom: 2px solid transparent; background: transparent; transition: color var(--ldx-transition), border-color var(--ldx-transition); white-space: nowrap; text-decoration: none !important; margin-bottom: -1px; } .ldx-tab:hover { color: var(--ldx-ink-800); } .ldx-tab.is-active { color: var(--ldx-brand); border-bottom-color: var(--ldx-brand); font-weight: 600; } .ldx-tab-count { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); background: var(--ldx-ink-100); color: var(--ldx-ink-500); padding: 1px 7px; border-radius: 999px; font-weight: 600; } .ldx-tab.is-active .ldx-tab-count { background: var(--ldx-brand-light); color: var(--ldx-brand); } .ldx-tab-panel { display: none; } .ldx-tab-panel.is-active { display: block; } /* ============================================================ 19. EMPTY STATES ============================================================ */ .ldx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px var(--ldx-space-6); color: var(--ldx-ink-400); } .ldx-empty-icon { font-size: 32px; color: var(--ldx-ink-300); margin-bottom: var(--ldx-space-4); } .ldx-empty-title { font-family: var(--ldx-font-sans); font-size: var(--ldx-text-lg); font-weight: 700; color: var(--ldx-ink-700); margin-bottom: var(--ldx-space-2); } .ldx-empty-msg { font-size: var(--ldx-text-sm); color: var(--ldx-ink-400); max-width: 360px; line-height: 1.6; margin-bottom: var(--ldx-space-5); } /* ============================================================ 20. LOADING / SKELETON ============================================================ */ .ldx-skeleton { background: linear-gradient(90deg, var(--ldx-ink-100) 25%, var(--ldx-ink-50) 50%, var(--ldx-ink-100) 75%); background-size: 200% 100%; animation: ldx-shimmer 1.5s infinite; border-radius: var(--ldx-radius-sm); } @keyframes ldx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ldx-skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; } .ldx-skeleton-text:last-child { width: 60%; } .ldx-skeleton-card { height: 100px; border-radius: var(--ldx-radius-lg); } /* ============================================================ 21. SEARCH BAR ============================================================ */ .ldx-search-wrap { position: relative; flex: 1; max-width: 420px; } .ldx-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ldx-ink-400); font-size: 13px; pointer-events: none; } .ldx-search-input { width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--ldx-ink-200); border-radius: var(--ldx-radius-lg); font-family: var(--ldx-font-sans); font-size: var(--ldx-text-base); color: var(--ldx-ink-950); background: white; outline: none; transition: border-color var(--ldx-transition), box-shadow var(--ldx-transition); appearance: none; -webkit-appearance: none; } .ldx-search-input:focus { border-color: var(--ldx-brand); box-shadow: var(--ldx-glow); } .ldx-search-input::placeholder { color: var(--ldx-ink-300); } /* ============================================================ 22. PAGINATION ============================================================ */ .ldx-pagination { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--ldx-ink-100); flex-wrap: wrap; gap: var(--ldx-space-4); } .ldx-pagination-info { font-size: var(--ldx-text-sm); color: var(--ldx-ink-400); } .ldx-pagination-controls { display: flex; align-items: center; gap: var(--ldx-space-2); } .ldx-page-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--ldx-radius-sm); font-family: var(--ldx-font-sans); font-size: var(--ldx-text-sm); font-weight: 500; cursor: pointer; border: 1px solid var(--ldx-ink-200); background: white; color: var(--ldx-ink-700); transition: all var(--ldx-transition); } .ldx-page-btn:hover { border-color: var(--ldx-ink-300); background: var(--ldx-ink-50); } .ldx-page-btn.is-active { background: var(--ldx-brand); border-color: var(--ldx-brand); color: white; } .ldx-page-btn:disabled { opacity: 0.35; pointer-events: none; } /* ============================================================ 23. DIVIDER & SPACING HELPERS ============================================================ */ .ldx-divider { height: 1px; background: var(--ldx-ink-200); margin: var(--ldx-space-6) 0; border: none; } .ldx-divider--subtle { background: var(--ldx-ink-100); } .ldx-spacer-2 { height: var(--ldx-space-2); } .ldx-spacer-4 { height: var(--ldx-space-4); } .ldx-spacer-6 { height: var(--ldx-space-6); } .ldx-spacer-8 { height: var(--ldx-space-8); } .ldx-spacer-12 { height: var(--ldx-space-12); } .ldx-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--ldx-space-5); } .ldx-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--ldx-space-5); } /* ============================================================ 24. TYPOGRAPHY UTILITIES ============================================================ */ .ldx-text-mono { font-family: var(--ldx-font-mono); } .ldx-text-xs { font-size: var(--ldx-text-xs); } .ldx-text-sm { font-size: var(--ldx-text-sm); } .ldx-text-base { font-size: var(--ldx-text-base); } .ldx-text-md { font-size: var(--ldx-text-md); } .ldx-text-lg { font-size: var(--ldx-text-lg); } .ldx-text-xl { font-size: var(--ldx-text-xl); } .ldx-text-2xl { font-size: var(--ldx-text-2xl); } .ldx-text-3xl { font-size: var(--ldx-text-3xl); } .ldx-text-ink-950 { color: var(--ldx-ink-950); } .ldx-text-ink-700 { color: var(--ldx-ink-700); } .ldx-text-ink-500 { color: var(--ldx-ink-500); } .ldx-text-ink-400 { color: var(--ldx-ink-400); } .ldx-text-brand { color: var(--ldx-brand); } .ldx-text-success { color: var(--ldx-success); } .ldx-text-danger { color: var(--ldx-danger); } .ldx-text-gold { color: var(--ldx-gold); } .ldx-text-muted { color: var(--ldx-ink-400); } .ldx-font-600 { font-weight: 600; } .ldx-font-700 { font-weight: 700; } .ldx-font-800 { font-weight: 800; } .ldx-italic { font-style: italic; } .ldx-uppercase { text-transform: uppercase; letter-spacing: 0.08em; } .ldx-mono-label { font-family: var(--ldx-font-mono); font-size: var(--ldx-text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ldx-ink-400); } /* ── Numeric alignment — use instead of mono for numbers/money ── */ .ldx-tabular-nums { font-variant-numeric: tabular-nums; } .ldx-money { font-family: var(--ldx-font-sans); font-variant-numeric: tabular-nums; font-weight: 600; } /* ============================================================ 26a. MISSING CLASS DEFINITIONS Classes referenced in modules but not previously in SCSS. ============================================================ */ /* ── Duplicate detection warning body ── */ .ldx-reg-dup-body { flex: 1; min-width: 0; } .ldx-reg-dup-matches { display: flex; flex-direction: column; gap: 6px; } /* ── Registration allergy empty state ── */ .ldx-reg-allergy-empty { font-size: var(--ldx-text-sm); color: var(--ldx-ink-400); font-style: italic; padding: 8px 0; } /* ── Check-in queue needs-order card variant ── */ .ldx-card--needs-order { border-color: var(--ldx-gold-border); background: var(--ldx-gold-light); } /* ── Lab tests toggle (inline in queue rows) ── */ .ldx-lab-tests-toggle { background: none; border: none; font-size: 11px; color: var(--ldx-brand); font-weight: 600; cursor: pointer; padding: 2px 4px; font-family: var(--ldx-font-sans); } .ldx-lab-tests-toggle:hover { text-decoration: underline; } /* ── Service chips (billing, consultation room) ── */ .ldx-svc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--ldx-radius-sm); font-size: var(--ldx-text-xs); font-weight: 600; background: var(--ldx-brand-light); color: var(--ldx-brand); border: 1px solid var(--ldx-brand-border); white-space: nowrap; } .ldx-svc-chip--danger { background: var(--ldx-danger-light); color: var(--ldx-danger); border-color: var(--ldx-danger-border); } .ldx-svc-chip--success { background: var(--ldx-success-light); color: var(--ldx-success); border-color: var(--ldx-success-border); } /* ── Quick-invoice service select ── */ .ldx-qi-svc-sel { width: 100%; padding: 8px 12px; border: 1px solid var(--ldx-ink-200); border-radius: var(--ldx-radius-md); font-family: var(--ldx-font-sans); font-size: var(--ldx-text-sm); color: var(--ldx-ink-950); background: white; outline: none; appearance: auto; -webkit-appearance: auto; } .ldx-qi-svc-sel:focus { border-color: var(--ldx-brand); box-shadow: var(--ldx-glow); } /* ============================================================ 26b. SHARED MODULE PATTERNS Styles used by 3+ modules, extracted from inline