/* ═══════════════════════════════════════════════════════════════════════════ TapFlow Health — Design System (Theme + Component Layer) ─────────────────────────────────────────────────────────────────────────── Layered on top of tapflow-master.css. Adds: • Dark mode (body[data-theme="dark"]) • Modern component classes prefixed .tfh-* (additive, no overrides) • Healthcare-friendly motion + focus + tap targets Brand tokens (kept identical to existing system): --navy #14263F · --blue #1F4E8C · --blue-2 #3B6FB6 · --blue-soft #EEF4FB --bg #F6F8FA · --soft-grey #AEB8C2 · --success #2F9E44 · --danger #C53030 ═══════════════════════════════════════════════════════════════════════════ */ /* ── Dark mode ────────────────────────────────────────────────────────────── Toggle by setting . Tokens are remapped, then the existing CSS picks up the new values automatically (because the rest of the app reads var(--bg), var(--surface), etc.). */ body[data-theme="dark"] { --bg: #0F1A2C; --surface: #14263F; --surface-2: #1B3557; --light: #1B3557; --border: #243D5E; --border-light: #1B3557; --text: #F0F4F8; --text-secondary: #C8D4E3; --muted: #94A8C2; --subtle: #6B8AAF; --blue-soft: rgba(31,78,140,.18); --success-soft: rgba(47,158,68,.18); --danger-soft: rgba(197,48,48,.20); --warning-soft: rgba(212,172,13,.18); --shadow-xs: 0 1px 2px rgba(0,0,0,.30); --shadow-sm: 0 1px 3px rgba(0,0,0,.30),0 2px 8px rgba(0,0,0,.20); --shadow-md: 0 4px 16px rgba(0,0,0,.30),0 1px 4px rgba(0,0,0,.20); --shadow-lg: 0 18px 45px rgba(0,0,0,.45); --shadow-card: 0 18px 45px rgba(0,0,0,.35); --shadow-modal: 0 24px 72px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.30); color-scheme: dark; } body[data-theme="dark"] { background: var(--bg); color: var(--text); } /* ── Motion timings (consistent feel across the app) ──────────────────────── */ :root { --tfh-motion-fast: 120ms; --tfh-motion-base: 180ms; --tfh-motion-slow: 280ms; --tfh-ease: cubic-bezier(.22,.61,.36,1); --tfh-ease-out: cubic-bezier(.16,1,.3,1); /* Compatibility aliases — many older modules use var(--primary) with a hardcoded fallback to #1F4E8C. Define --primary so they pick up the canonical brand blue and re-tint correctly in dark mode. */ --primary: var(--blue); --primary-soft: var(--blue-soft); /* ───────────────────────────────────────────────────────────────────────── CANONICAL DESIGN TOKENS (Phase 2 — minimalist healthcare-tech) These are the NEW token names used by the .tfh-* primitive system. They alias to the existing brand tokens where possible so the legacy classes (.btn, .fi, .ph, .ct, etc.) keep working unchanged. New code should reference these names; old code can migrate at its own pace. Naming conventions: --c-* color --fs-* font-size --fw-* font-weight --s-* spacing (4px scale) --r-* border-radius --bd-* border shorthand --shadow- existing canonical shadow tokens (no rename) --motion- duration Conflict resolution: --font-ui is defined ONCE (in tapflow-master.css) — Montserrat-first. --radius-card and --radius-input are defined ONCE — current values (22px / 14px) preserved so legacy components don't visually shift. Shadow tokens are defined in tapflow-master.css for light mode and overridden here for dark mode (correct cascade — no conflict). ───────────────────────────────────────────────────────────────────── */ /* Color — legacy aliases stay; new names point at the same hexes so primitives can be written tokens-only. */ --c-bg: var(--bg); --c-surface: var(--surface); --c-surface-2: var(--surface-2); --c-text: var(--text); --c-text-2: var(--text-secondary); --c-muted: var(--muted); --c-subtle: var(--subtle); --c-border: var(--border); --c-border-2: var(--border-light); --c-accent: var(--blue); --c-accent-2: var(--blue-mid); --c-accent-soft: var(--blue-soft); --c-success: var(--success); --c-success-soft: var(--success-soft); --c-warning: var(--warning); --c-warning-soft: var(--warning-soft); --c-danger: var(--danger); --c-danger-soft: var(--danger-soft); /* Type — single family, eight-stop scale. Drops the imprecise 10.5/11.5/12.5/13.5 outliers from the legacy code. */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; /* Spacing — strict 4px scale. Maps to the existing --space-* aliases so no legacy callers break. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* Radius — five canonical stops. The legacy 22px (--radius-card) and 14px (--radius-input) stay as separate vars for backwards compat; new code uses --r-md / --r-lg / --r-xl. */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* Borders */ --bd-1: 1px solid var(--c-border); --bd-2: 1px solid var(--c-border-2); /* Motion — two durations, one easing. Legacy --tfh-motion-* stays. */ --motion-fast: var(--tfh-motion-fast); --motion-base: var(--tfh-motion-base); --ease: var(--tfh-ease); /* Control heights — already standardized via --control-h / --control-h-sm in tapflow-master.css; alias for primitive consistency. */ --h-sm: var(--control-h-sm); --h-md: var(--control-h-sm); --h-lg: var(--control-h); } /* Dark-mode overrides for the new color aliases. The legacy --bg / --surface / --text already remap inside body[data-theme="dark"] above, so the --c-* aliases that point at them inherit automatically. The accent-soft tone needs an explicit dark override for readable hover states. */ body[data-theme="dark"] { --c-accent-soft: rgba(96, 165, 250, .15); /* Fill the dark-mode gap for shadows that legacy code references but tfh-theme didn't override (--shadow-card-hover, --shadow-focus). */ --shadow-card-hover: 0 22px 52px rgba(0, 0, 0, .55); --shadow-focus: 0 0 0 3px rgba(96, 165, 250, .35); } @media (prefers-reduced-motion: reduce) { :root { --tfh-motion-fast: 0ms; --tfh-motion-base: 0ms; --tfh-motion-slow: 0ms; } } /* ── Focus rings — uniform, accessible, healthcare-clear ──────────────────── */ .tfh-card:focus-visible, .tfh-btn:focus-visible, .tfh-input:focus-visible, .tfh-tab:focus-visible, .tfh-icon-btn:focus-visible, .tfh-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,78,140,.30); } body[data-theme="dark"] .tfh-card:focus-visible, body[data-theme="dark"] .tfh-btn:focus-visible, body[data-theme="dark"] .tfh-input:focus-visible, body[data-theme="dark"] .tfh-tab:focus-visible, body[data-theme="dark"] .tfh-icon-btn:focus-visible, body[data-theme="dark"] .tfh-pill:focus-visible { box-shadow: 0 0 0 3px rgba(96,165,250,.45); } /* ── Page header (replaces the bubble headers we removed) ─────────────────── */ .tfh-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 4px 0 0; flex-wrap: wrap; } .tfh-page-title { font-family: var(--font-ui); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; } .tfh-page-sub { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 720px; line-height: 1.55; } .tfh-page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── Card (the workhorse) ─────────────────────────────────────────────────── */ .tfh-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); padding: 18px; transition: box-shadow var(--tfh-motion-base) var(--tfh-ease), border-color var(--tfh-motion-base) var(--tfh-ease), transform var(--tfh-motion-base) var(--tfh-ease); } .tfh-card-elevated { box-shadow: var(--shadow-sm); } .tfh-card.is-clickable { cursor: pointer; } .tfh-card.is-clickable:hover { border-color: rgba(31,78,140,.35); box-shadow: var(--shadow-md); transform: translateY(-1px); } .tfh-card-tight { padding: 12px; } .tfh-card-spacious{ padding: 24px; } /* ── Buttons (primary, secondary, ghost, danger) ──────────────────────────── */ .tfh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; border-radius: 12px; border: 1px solid transparent; cursor: pointer; user-select: none; white-space: nowrap; transition: background-color var(--tfh-motion-fast) var(--tfh-ease), border-color var(--tfh-motion-fast) var(--tfh-ease), color var(--tfh-motion-fast) var(--tfh-ease), box-shadow var(--tfh-motion-fast) var(--tfh-ease), transform var(--tfh-motion-fast) var(--tfh-ease); } @media (pointer: coarse) { .tfh-btn { height: 48px; padding: 0 20px; font-size: 14px; } } .tfh-btn:active { transform: translateY(1px); } /* primary */ .tfh-btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); } .tfh-btn-primary:hover { background: var(--blue-mid); border-color: var(--blue-mid); } /* secondary (default outlined) */ .tfh-btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .tfh-btn-secondary:hover { background: var(--surface-2); border-color: rgba(31,78,140,.35); } /* ghost (no border, transparent until hover) */ .tfh-btn-ghost { background: transparent; color: var(--text-secondary); } .tfh-btn-ghost:hover { background: var(--surface-2); color: var(--text); } /* danger */ .tfh-btn-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(197,48,48,.30); } .tfh-btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } /* sizes */ .tfh-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 10px; } .tfh-btn-lg { height: 48px; padding: 0 22px; font-size: 14px; border-radius: 14px; } /* icon-only button */ .tfh-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: var(--transition); } .tfh-icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } @media (pointer: coarse) { .tfh-icon-btn { width: 48px; height: 48px; } } /* ── Inputs / selects / textareas ─────────────────────────────────────────── */ .tfh-input, .tfh-select, .tfh-textarea { width: 100%; height: 40px; padding: 0 12px; font-family: var(--font-ui); font-size: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; transition: border-color var(--tfh-motion-fast) var(--tfh-ease), box-shadow var(--tfh-motion-fast) var(--tfh-ease), background-color var(--tfh-motion-fast) var(--tfh-ease); appearance: none; -webkit-appearance: none; } .tfh-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; } .tfh-input:hover, .tfh-select:hover, .tfh-textarea:hover { border-color: rgba(31,78,140,.35); } .tfh-input:focus, .tfh-select:focus, .tfh-textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,78,140,.15); } @media (pointer: coarse) { .tfh-input, .tfh-select { height: 48px; font-size: 15px; } } .tfh-field { display: flex; flex-direction: column; gap: 6px; } .tfh-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .tfh-help { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ── Pills / status chips ─────────────────────────────────────────────────── */ .tfh-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; } .tfh-pill-blue { background: var(--blue-soft); color: var(--blue); border-color: rgba(31,78,140,.20); } .tfh-pill-success { background: var(--success-soft); color: var(--success); border-color: rgba(47,158,68,.20); } .tfh-pill-warning { background: var(--warning-soft); color: var(--amber); border-color: rgba(217,119,6,.30); } .tfh-pill-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(197,48,48,.25); } .tfh-pill-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ── Tabs (segmented + horizontal) ────────────────────────────────────────── */ .tfh-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); } .tfh-tab { padding: 8px 14px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; border: none; background: transparent; border-radius: 10px; transition: var(--transition); white-space: nowrap; } .tfh-tab:hover:not(.is-active) { color: var(--text-secondary); } .tfh-tab.is-active { background: var(--surface); color: var(--blue); box-shadow: var(--shadow-xs); } @media (pointer: coarse) { .tfh-tab { padding: 12px 16px; font-size: 13px; } } .tfh-tabs-underline { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .tfh-tabs-underline .tfh-tab { border-radius: 0; border-bottom: 2px solid transparent; background: transparent; padding: 10px 14px; } .tfh-tabs-underline .tfh-tab.is-active { background: transparent; border-bottom-color: var(--blue); box-shadow: none; } /* ── Slide-over (right side panel) ────────────────────────────────────────── */ .tfh-slideover-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.32); backdrop-filter: blur(2px); z-index: 910; opacity: 0; pointer-events: none; transition: opacity var(--tfh-motion-base) var(--tfh-ease); } .tfh-slideover-backdrop.is-open { opacity: 1; pointer-events: auto; } .tfh-slideover { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 96vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -16px 0 40px rgba(15,23,42,.18); z-index: 920; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--tfh-motion-slow) var(--tfh-ease-out); } .tfh-slideover.is-open { transform: translateX(0); } body[data-theme="dark"] .tfh-slideover-backdrop { background: rgba(0,0,0,.55); } body[data-theme="dark"] .tfh-slideover { box-shadow: -16px 0 40px rgba(0,0,0,.55); } /* ── Top action bar (global header) ───────────────────────────────────────── */ .tfh-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(8px); } .tfh-topbar-search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: 13px; cursor: text; transition: var(--transition); } .tfh-topbar-search:hover { border-color: rgba(31,78,140,.35); } .tfh-topbar-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,78,140,.15); } .tfh-topbar-search input { flex: 1; height: 100%; border: none; background: transparent; font-family: var(--font-ui); font-size: 13px; color: var(--text); } .tfh-topbar-search input:focus { outline: none; } .tfh-topbar-search kbd { font-family: var(--font-ui); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); } .tfh-topbar-spacer { flex: 1; } .tfh-topbar-divider { width: 1px; height: 24px; background: var(--border); } /* ── Skeleton loaders ─────────────────────────────────────────────────────── */ .tfh-skeleton { display: block; background: linear-gradient(90deg, var(--surface-2) 0%, var(--border-light) 50%, var(--surface-2) 100%); background-size: 200% 100%; border-radius: 8px; animation: tfh-skel-shine 1.4s linear infinite; } @keyframes tfh-skel-shine { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } .tfh-skeleton-text { height: 12px; } .tfh-skeleton-title { height: 18px; width: 40%; } .tfh-skeleton-row { height: 48px; } /* ── Toasts (modern) ──────────────────────────────────────────────────────── */ .tfh-toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 1100; pointer-events: none; } .tfh-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 12px; box-shadow: var(--shadow-md); font-size: 13px; color: var(--text); min-width: 240px; max-width: 360px; animation: tfh-toast-in var(--tfh-motion-slow) var(--tfh-ease-out); } .tfh-toast-success { border-left-color: var(--success); } .tfh-toast-error { border-left-color: var(--danger); } .tfh-toast-warning { border-left-color: var(--amber); } @keyframes tfh-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Section headers (within pages) ───────────────────────────────────────── */ .tfh-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 10px; } .tfh-section-title { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: -0.005em; } .tfh-section-sub { font-size: 12px; color: var(--muted); } /* ── Empty / loading states ───────────────────────────────────────────────── */ .tfh-empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 13px; background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; } .tfh-empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; } /* ── Soft dividers ────────────────────────────────────────────────────────── */ .tfh-divider { height: 1px; background: var(--border); margin: 14px 0; } /* ── Theme toggle button (sun/moon) ───────────────────────────────────────── */ .tfh-theme-toggle { position: relative; width: 40px; height: 40px; border-radius: 12px; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; } .tfh-theme-toggle:hover { color: var(--text); border-color: rgba(31,78,140,.35); background: var(--surface-2); } .tfh-theme-toggle .tfh-theme-icon-sun { display: inline; } .tfh-theme-toggle .tfh-theme-icon-moon { display: none; } body[data-theme="dark"] .tfh-theme-toggle .tfh-theme-icon-sun { display: none; } body[data-theme="dark"] .tfh-theme-toggle .tfh-theme-icon-moon { display: inline; } /* ── Dark-mode tweaks for legacy components ───────────────────────────────── */ body[data-theme="dark"] { /* Sidebar (existing .sb-* classes) — soft override */ } body[data-theme="dark"] .card, body[data-theme="dark"] .ph, body[data-theme="dark"] .panel, body[data-theme="dark"] .modal-card { background: var(--surface); color: var(--text); border-color: var(--border); } body[data-theme="dark"] .fi, body[data-theme="dark"] input.fi, body[data-theme="dark"] select.fi, body[data-theme="dark"] textarea.fi { background: var(--surface-2); color: var(--text); border-color: var(--border); } body[data-theme="dark"] .btn { background: var(--surface-2); color: var(--text); border-color: var(--border); } body[data-theme="dark"] .btn-p { background: var(--blue); color: #fff; border-color: var(--blue); } body[data-theme="dark"] hr { border-color: var(--border); } /* ── Scrollbar polish ─────────────────────────────────────────────────────── */ .tfh-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .tfh-scroll::-webkit-scrollbar-track { background: transparent; } .tfh-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .tfh-scroll::-webkit-scrollbar-thumb:hover { background: var(--soft-grey); } /* ── Touch target floor for the new tfh-* surface ─────────────────────────── */ @media (pointer: coarse) { .tfh-icon-btn, .tfh-btn, .tfh-tab { min-height: 48px; } } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL CHROME RETROFIT — modernizes the legacy .card / .ph / .btn / .fi classes used across all 7 modules. Pure additive CSS; no JS changes. These rules apply in BOTH light and dark mode (token-driven). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Cards: flatten the heavy frosted look, soften shadows ────────────────── */ body .card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-xs); backdrop-filter: none; transition: border-color var(--tfh-motion-base) var(--tfh-ease), box-shadow var(--tfh-motion-base) var(--tfh-ease); } body .card:hover { box-shadow: var(--shadow-sm); border-color: rgba(31,78,140,.20); } /* ── Section titles inside cards (.ct) ────────────────────────────────────── */ body .ct { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; } /* ── Page headers (.ph) — calmer typography ───────────────────────────────── */ body .ph { background: transparent; border: none; box-shadow: none; padding: 4px 0 14px; } body .ph-title { letter-spacing: -0.01em; color: var(--text); font-weight: 800; } body .ph-sub { color: var(--muted); line-height: 1.55; } /* ── Buttons: drop the lifted shadow on default, keep depth on primary ────── */ body .btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; transition: background-color var(--tfh-motion-fast) var(--tfh-ease), border-color var(--tfh-motion-fast) var(--tfh-ease), color var(--tfh-motion-fast) var(--tfh-ease), box-shadow var(--tfh-motion-fast) var(--tfh-ease), transform var(--tfh-motion-fast) var(--tfh-ease); } body .btn:hover { background: var(--surface-2); border-color: rgba(31,78,140,.35); transform: none; box-shadow: var(--shadow-xs); } body .btn:active { transform: translateY(1px); box-shadow: none; } body .btn-p { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 6px 18px rgba(31,78,140,.20); } body .btn-p:hover { background: var(--blue-mid); border-color: var(--blue-mid); box-shadow: 0 8px 22px rgba(31,78,140,.28); } body .btn-sm { border-radius: 10px; } /* ── Inputs (.fi, select, input, textarea) ───────────────────────────────── Calmer borders + clearer focus state. Dark mode picks up surface tokens. */ body .fi, body select.fi, body input.fi, body textarea.fi, body input[type="text"].fi, body input[type="email"].fi, body input[type="password"].fi, body input[type="number"].fi, body input[type="search"].fi { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; transition: border-color var(--tfh-motion-fast) var(--tfh-ease), box-shadow var(--tfh-motion-fast) var(--tfh-ease), background-color var(--tfh-motion-fast) var(--tfh-ease); } body .fi:hover, body select.fi:hover { border-color: rgba(31,78,140,.35); } body .fi:focus, body select.fi:focus, body input.fi:focus, body textarea.fi:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,78,140,.15); } /* ── Field labels (.fw label) ─────────────────────────────────────────────── */ body .fw label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; } /* ── Detail rows (.dr) ────────────────────────────────────────────────────── */ body .dr { border-bottom-color: var(--border-light); color: var(--text); } /* ── Pills / badges across the app ────────────────────────────────────────── */ body .sb-badge { border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; } /* ── Sidebar polish (light + dark) ────────────────────────────────────────── */ body[data-theme="dark"] #sidebar, body[data-theme="dark"] .sb-rail, body[data-theme="dark"] .sidebar { background: #0F1A2C; border-color: rgba(255,255,255,.06); } body[data-theme="dark"] .sb-item { color: rgba(255,255,255,.62); } body[data-theme="dark"] .sb-item:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.92); } body[data-theme="dark"] .sb-item.active { background: rgba(96,165,250,.18); color: #DBEAFE; box-shadow: inset 0 0 0 1px rgba(96,165,250,.22); } /* ── Modals / sheets in dark mode ─────────────────────────────────────────── */ body[data-theme="dark"] .edit-modal, body[data-theme="dark"] .modal-card, body[data-theme="dark"] .admin-center-modal, body[data-theme="dark"] .admin-center-detail-card, body[data-theme="dark"] .modal, body[data-theme="dark"] .panel { background: var(--surface); color: var(--text); border-color: var(--border); } body[data-theme="dark"] .edit-modal-backdrop, body[data-theme="dark"] .modal-backdrop, body[data-theme="dark"] .admin-center-modal-backdrop { background: rgba(0,0,0,.55); } /* ── Tabs / sub-tabs across modules ───────────────────────────────────────── */ body[data-theme="dark"] .ops-subtab, body[data-theme="dark"] .page-section-tab, body[data-theme="dark"] .ud-subtab { color: var(--muted); border-color: var(--border); } body[data-theme="dark"] .ops-subtab.active, body[data-theme="dark"] .page-section-tab.active, body[data-theme="dark"] .ud-subtab.active { color: var(--blue); border-color: var(--blue); background: var(--surface); } /* ── Tables ──────────────────────────────────────────────────────────────── */ body[data-theme="dark"] table, body[data-theme="dark"] .data-table { color: var(--text); } body[data-theme="dark"] thead th { background: var(--surface-2); color: var(--muted); border-color: var(--border); } body[data-theme="dark"] tbody td { border-color: var(--border-light); } body[data-theme="dark"] tr:hover td { background: rgba(255,255,255,.02); } /* ── Dark-mode link & scroll polish ───────────────────────────────────────── */ body[data-theme="dark"] a { color: #93C5FD; } body[data-theme="dark"] a:hover { color: #BFDBFE; } body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); } body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); } /* ── Toast container z-index conflict guard ───────────────────────────────── */ body[data-theme="dark"] #toast-container .toast { background: var(--surface); color: var(--text); border-color: var(--border); } /* ── Light-mode dark-on-dark fixups for known modules ────────────────────── */ body[data-theme="dark"] .checklists-studio-tabs { background: var(--surface-2); border-color: var(--border); } body[data-theme="dark"] .checklists-studio-tab { color: var(--muted); } body[data-theme="dark"] .checklists-studio-tab.is-active { background: var(--surface); color: var(--blue); } /* Climate / temperature gauges hardcoded backgrounds */ body[data-theme="dark"] .temp-gauge-card, body[data-theme="dark"] .climate-card, body[data-theme="dark"] .climate-grid > * { background: var(--surface); border-color: var(--border); color: var(--text); } /* Workflow alerts cards */ body[data-theme="dark"] .wa-card, body[data-theme="dark"] .wf-card, body[data-theme="dark"] .alert-card { background: var(--surface); border-color: var(--border); color: var(--text); } /* Credentialing panels */ body[data-theme="dark"] .cred-card, body[data-theme="dark"] .cred-row, body[data-theme="dark"] .credentials-section { background: var(--surface); border-color: var(--border); color: var(--text); } /* Admin Center surfaces */ body[data-theme="dark"] .admin-center-card, body[data-theme="dark"] .admin-center-row, body[data-theme="dark"] .admin-center-detail-card, body[data-theme="dark"] .admin-center-modal, body[data-theme="dark"] .admin-center-tab { background: var(--surface); color: var(--text); border-color: var(--border); } body[data-theme="dark"] .admin-center-tab.is-active { background: var(--surface-2); color: var(--blue); } /* Restock orders */ body[data-theme="dark"] .restock-card, body[data-theme="dark"] .restock-row { background: var(--surface); color: var(--text); border-color: var(--border); } /* ═══════════════════════════════════════════════════════════════════════════ MVP NAV SCOPE — only surface the 4 modules we're actively shipping right now: Master Dashboard, Checklists Studio, Asset Hub, Unit Dashboard. Everything else (Inventory, Climate, Credentialing, Admin Center, Audits, Restock, Pricing, Builder, etc.) is hidden until we wire it up next. To re-enable a module: delete its line below (or its block). ═══════════════════════════════════════════════════════════════════════════ */ /* Master tier — surfaced: Master Dashboard, Workflow & Alerts, Studio, Asset Hub, Inventory, Climate Monitoring, Unit Dashboard, Admin. */ #ni-credentials-master, #ni-my-credentials-master, #ni-audits-master, #ni-export, #ni-skill-sheets-master, #ni-restock-master, /* Hospital tier — same scope. Keep ni-temp-hosp hidden because it's the legacy duplicate of ni-climate-hosp (both go to the same panel). */ #ni-unit-hosp, #ni-temp-hosp, #ni-logs-history, #ni-alerts-hosp, #ni-credentials-hosp, #ni-my-credentials-hosp, #ni-taskmgr-hosp, #ni-restock-hosp, #ni-builder-hosp, #ni-skill-sheets-hosp, /* Clinical tier — surface Workflow, Climate, Studio, Asset Hub, Inventory, Unit Dashboard. Hide credentials / alerts / unit-map / taskmgr for now. */ #ni-unit-clin, #ni-credentials-clin, #ni-alerts-clin, #ni-taskmgr-clin { display: none !important; } /* Note: clinical users see Studio via the ni-cl-run entry (which carries the due-count badge). ni-studio-clin would be a duplicate and stays hidden. */ #ni-studio-clin { display: none !important; } /* Hide section headers that no longer have any items below them */ #nav-master .sb-sec, #nav-hospital .sb-sec { display: none !important; } /* But keep the top "Master — TapFlow" / "Hospital portal" header as a brand anchor */ #nav-master > .sb-sec:first-of-type, #nav-hospital > .sb-sec:first-of-type { display: block !important; } /* All Quick-Create items now point at surfaced modules — keep them visible. */ /* ═══════════════════════════════════════════════════════════════════════════ RADIUS / GEOMETRY NORMALIZATION — safety net The bulk-tokenize sweep collapsed inline border-radius literals to a canonical 7-value scale (8 / 10 / 12 / 14 / 16 / 18 / 999). This block adds CSS overrides for legacy element types that still slip through with old radii, so the visual rhythm is consistent regardless of which module rendered the element. ═══════════════════════════════════════════════════════════════════════════ */ /* Cards / panels / modals: 16-18px (calm, not pillowy). */ body .card, body .ph, body .panel, body .modal-card, body .admin-center-card, body .admin-center-detail-card, body .audit-dashboard-card, body .restock-card, body .climate-card, body .credentials-section, body .cred-card, body .ud-preview-panel, body .diag-card { border-radius: 16px; } /* Modals + slide-overs: 18px */ body .edit-modal, body .admin-center-modal, body .modal, body #ah-drawer, body .tfh-slideover { border-radius: 18px 0 0 18px; } body .edit-modal, body .admin-center-modal, body .modal { border-radius: 18px; } /* Buttons + inputs: 12px (canonical control radius). */ body .btn, body .btn-success, body .btn-danger, body .btn-purple, body select.fi, body input.fi, body textarea.fi, body .fi { border-radius: 12px; } /* Pill buttons keep their full-round. */ body .btn-sm, body .chip, body .sb-badge, body .pchip, body .tfh-pill, body .live-pill { border-radius: 999px; } /* Sidebar items + nav chips: 10px (small chrome) */ body .sb-item, body .ops-subtab, body .page-section-tab, body .ud-subtab, body .checklists-studio-tab { border-radius: 10px; } /* Diag panel + banners */ body .diag-panel { border-radius: 16px; } body .banner { border-radius: 0; } /* Search results dropdown */ body .topbar-search-results { border-radius: 14px; } body .topbar-search { border-radius: 12px; } /* Studio cards / forms */ body .checklists-studio-card, body .checklists-studio-meta-card { border-radius: 16px; } /* Override stragglers — any element with a too-small inline radius that still leaks 4px / 5px / 6px gets normalized via attribute selector. */ body [style*="border-radius:4px"]:not(svg):not(circle):not(rect), body [style*="border-radius:5px"]:not(svg):not(circle):not(rect), body [style*="border-radius:6px"]:not(svg):not(circle):not(rect), body [style*="border-radius:3px"]:not(svg):not(circle):not(rect), body [style*="border-radius: 3px"]:not(svg):not(circle):not(rect), body [style*="border-radius: 4px"]:not(svg):not(circle):not(rect), body [style*="border-radius: 5px"]:not(svg):not(circle):not(rect), body [style*="border-radius: 6px"]:not(svg):not(circle):not(rect) { border-radius: 8px !important; } /* Padding/spacing rhythm — common offenders */ body .card { padding: 18px 20px; } body .ph { padding: 6px 0 16px; } /* Shadow rhythm — collapse the legacy heavy shadows on cards */ body .card { box-shadow: var(--shadow-xs); } body .card:hover { box-shadow: var(--shadow-sm); } body .modal-card, body .admin-center-modal, body .edit-modal { box-shadow: var(--shadow-modal); } /* ── Theme toggle: place nicely inside the app header strip when present ─── */ #tfh-theme-toggle-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; } #tfh-theme-toggle #tfh-theme-toggle-btn { position: static !important; background: transparent !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ TOPBAR — modernize the existing .topbar / .topbar-search / .topbar-r ═══════════════════════════════════════════════════════════════════════════ */ body .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 20px; gap: 12px; } body[data-theme="dark"] .topbar { background: rgba(20,38,63,.85); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); } body .topbar-title { color: var(--text); font-weight: 800; letter-spacing: -0.01em; } body .topbar-search { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; height: 40px; color: var(--muted); transition: border-color var(--tfh-motion-fast) var(--tfh-ease), box-shadow var(--tfh-motion-fast) var(--tfh-ease), background-color var(--tfh-motion-fast) var(--tfh-ease); } body .topbar-search:hover { border-color: rgba(31,78,140,.35); } body .topbar-search:focus-within { border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(31,78,140,.15); } body .topbar-search input { color: var(--text); } body .topbar-search input::placeholder { color: var(--muted); font-weight: 500; } body .topbar-search-results { background: var(--surface); border-color: var(--border); border-radius: 14px; box-shadow: var(--shadow-md); } body[data-theme="dark"] .topbar-search-results { box-shadow: var(--shadow-lg); } body .topbar-search-result { color: var(--text); } body .topbar-search-result:hover, body .topbar-search-result.is-active { background: var(--surface-2); } body .topbar-search-kind { background: var(--surface-2); color: var(--muted); } body .topbar-r .pchip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--muted); } body .topbar-r .clabel { color: var(--muted); font-size: 11px; font-weight: 600; } body .topbar-r .cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(47,158,68,.15); } body[data-theme="dark"] .topbar-r .cdot { box-shadow: 0 0 0 4px rgba(47,158,68,.22); } body .msg-bell { background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } body .msg-bell:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } body .msg-bell-badge { background: var(--danger); color: #fff; font-size: 9px; font-weight: 800; border-radius: 999px; padding: 2px 5px; min-width: 16px; min-height: 16px; position: absolute; top: -2px; right: -2px; border: 2px solid var(--surface); } body .topbar-user-btn { width: 36px; height: 36px; background: linear-gradient(135deg, var(--blue), var(--blue-2)); border: none; box-shadow: var(--shadow-xs); } body .topbar-user-btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); } body .topbar-user-menu { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); } /* Diagnostics panel polish */ body .diag-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin: 12px 16px 0; } body[data-theme="dark"] .diag-panel { box-shadow: var(--shadow-sm); } body .diag-card { background: var(--surface-2); border-color: var(--border); border-radius: 12px; } body .diag-kv strong { color: var(--text); } /* Banners (security / offline / sync / backend) */ body .banner { border-radius: 0; font-size: 12px; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ MAIN CONTENT BACKGROUND — track the theme ═══════════════════════════════════════════════════════════════════════════ */ body[data-theme="dark"] .main { background: var(--bg); } body[data-theme="dark"] .content { background: transparent; color: var(--text); } body[data-theme="dark"] #s-app { background: var(--bg); color: var(--text); } body[data-theme="dark"] body, body[data-theme="dark"] html { background: var(--bg); } /* Mobile header in dark mode */ body[data-theme="dark"] #mob-header { background: var(--surface); border-color: var(--border); color: var(--text); } body[data-theme="dark"] .mh-ctx { color: var(--muted); } body[data-theme="dark"] #mob-tabbar { background: var(--surface); border-color: var(--border); } body[data-theme="dark"] .mt-item { color: var(--muted); } body[data-theme="dark"] .mt-item.active { color: var(--blue); } /* Mobile drawer dark mode */ body[data-theme="dark"] #mob-drawer { background: var(--surface); color: var(--text); } body[data-theme="dark"] #mob-drawer-backdrop { background: rgba(0,0,0,.55); } body[data-theme="dark"] .mob-drawer-header { border-color: var(--border); } body[data-theme="dark"] .mob-drawer-title { color: var(--text); } /* Login screen + workspace picker dark mode */ body[data-theme="dark"] #s-login, body[data-theme="dark"] #s-rehydrate, body[data-theme="dark"] #s-workspace-picker { background: var(--bg); color: var(--text); } body[data-theme="dark"] #s-login .login-card, body[data-theme="dark"] #s-workspace-picker .login-card { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-md); } /* Tablet/mobile: hide the floating fallback if we mounted into the topbar slot */ @media (max-width: 720px) { #tfh-theme-toggle:empty + #tfh-theme-toggle-btn, body:not(:has(#tfh-theme-toggle :not(:empty))) #tfh-theme-toggle-btn { /* keep floating button on small viewports where the topbar may be hidden */ } } /* ═══════════════════════════════════════════════════════════════════════════ LOGIN / REHYDRATE / WORKSPACE PICKER — dark mode ═══════════════════════════════════════════════════════════════════════════ */ body[data-theme="dark"] #s-login { background: linear-gradient(180deg, var(--bg) 0%, #0B1424 100%); color: var(--text); } body[data-theme="dark"] #s-login .login-card, body[data-theme="dark"] #s-workspace-picker .login-card { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-md); } body[data-theme="dark"] #s-login .ti, body[data-theme="dark"] #s-login input.ti { background: var(--surface-2); color: var(--text); border-color: var(--border); } body[data-theme="dark"] #s-login .ti:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,78,140,.20); } body[data-theme="dark"] #s-rehydrate { background: var(--bg); color: var(--text); } body[data-theme="dark"] #s-rehydrate span { color: var(--muted); } body[data-theme="dark"] .brand-row img#brand-login-logo { background: var(--surface-2); border-color: var(--border); } /* ═══════════════════════════════════════════════════════════════════════════ COLORED NOTICE CARDS — readable in dark mode These accent backgrounds (warning yellow, soft pink, warm orange) are intentional in light mode but unreadable on dark. Token-aware overrides: ═══════════════════════════════════════════════════════════════════════════ */ body[data-theme="dark"] .security-note, body[data-theme="dark"] [style*="background:#FFFBEB"], body[data-theme="dark"] [style*="background: #FFFBEB"] { background: rgba(212,172,13,.12) !important; color: #FCD34D !important; border-color: rgba(212,172,13,.30) !important; } body[data-theme="dark"] [style*="background:#FFF7ED"], body[data-theme="dark"] [style*="background: #FFF7ED"] { background: rgba(217,119,6,.12) !important; color: #FBBF24 !important; border-color: rgba(217,119,6,.30) !important; } body[data-theme="dark"] [style*="background:#FFF5F5"], body[data-theme="dark"] [style*="background: #FFF5F5"] { background: rgba(197,48,48,.12) !important; color: #F87171 !important; border-color: rgba(197,48,48,.30) !important; } /* ═══════════════════════════════════════════════════════════════════════════ AUDIT DASHBOARD + RESTOCK ORDERS surfaces — dark mode polish ═══════════════════════════════════════════════════════════════════════════ */ body[data-theme="dark"] .audit-dashboard, body[data-theme="dark"] .audit-dashboard-card, body[data-theme="dark"] .audit-dashboard-header, body[data-theme="dark"] .audit-dashboard-row, body[data-theme="dark"] .audit-dashboard-table, body[data-theme="dark"] .audit-dashboard-json { background: var(--surface); color: var(--text); border-color: var(--border); } body[data-theme="dark"] .audit-dashboard-json { background: var(--surface-2); } body[data-theme="dark"] .audit-dashboard tbody tr:hover td { background: rgba(255,255,255,.02); } /* ═══════════════════════════════════════════════════════════════════════════ QUICK CREATE BUTTON — added next to the bell in the topbar Opens a small menu of fast actions (New asset, New checklist, etc.). ═══════════════════════════════════════════════════════════════════════════ */ .tfh-quick-create-btn { width: 36px; height: 36px; border-radius: 10px; background: var(--blue); color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; line-height: 1; transition: background-color var(--tfh-motion-fast) var(--tfh-ease), transform var(--tfh-motion-fast) var(--tfh-ease), box-shadow var(--tfh-motion-fast) var(--tfh-ease); box-shadow: var(--shadow-xs); } .tfh-quick-create-btn:hover { background: var(--blue-mid); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .tfh-quick-create-btn:active { transform: translateY(0); } .tfh-quick-create-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); padding: 6px; min-width: 220px; z-index: 800; display: none; } .tfh-quick-create-menu.is-open { display: block; } .tfh-quick-create-menu .tfh-qc-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; border: none; background: transparent; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; transition: background-color var(--tfh-motion-fast) var(--tfh-ease); } .tfh-quick-create-menu .tfh-qc-item:hover { background: var(--surface-2); } .tfh-quick-create-menu .tfh-qc-item .tfh-qc-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--blue-soft); color: var(--blue); } .tfh-qc-wrap { position: relative; } @media (pointer: coarse) { .tfh-quick-create-btn { width: 44px; height: 44px; } }