/* ========================================================================== Alternative Health Grand Forks — practice workspace design system -------------------------------------------------------------------------- The same house as the clinic website: ivory paper, a deep navy spine and champagne gold for the moments that matter. Playfair Display carries headings, the wordmark and big numbers; Inter does the work everywhere else. Hairline borders, quiet shadows, modest radii. Gold is decoration and the primary call to action only — it never carries small text. navy #1B2A41 · deep navy #152233 · ivory #F7F4EF · gold #C9A86C gold hover #E0C58F · gold ink #7A5F30 · hairline #E6E0D6 Every colour is a token. Components never hardcode a hex. ========================================================================== */ /* ------------------------------------------------------------------ tokens */ :root { color-scheme: light; /* the house palette — fixed in every theme */ --navy: #1B2A41; --navy-deep: #152233; --navy-2: #2C4160; --ivory: #F7F4EF; --gold: #C9A86C; --gold-hover: #E0C58F; --gold-ink: #7A5F30; /* gold as text: 5.5:1 on ivory. Raw gold is 2:1 — decoration only */ --gold-soft: #F3ECDD; --on-gold: #1B2A41; /* surfaces — warm paper, never flat grey */ --canvas: #F7F4EF; --canvas-2: #EFEAE2; --surface: #FFFFFF; --surface-2: #FBF9F5; --surface-3: #F3EEE6; --surface-inset: #F9F6F1; /* the rail — navy, like the website header */ --rail: #1B2A41; --rail-2: #152233; --rail-ink: #D5DBE4; --rail-muted: #8F9BAD; --rail-hover: rgba(247,244,239,.06); --rail-line: rgba(247,244,239,.09); /* ink */ --ink: #1B2A41; --ink-2: #33415A; --ink-3: #4D596A; --ink-4: #5F6B78; --ink-invert: #FFFFFF; /* lines — hairlines */ --line: #E6E0D6; --line-strong: #D5CDBF; --line-soft: #EFEAE2; /* accent — navy for anything interactive, gold for ornament */ --accent: #1B2A41; --accent-hover: #2C4160; --accent-2: #C9A86C; --accent-soft: #F3ECDD; --accent-softer: #FAF6EE; --accent-ink: #7A5F30; --on-accent: #F7F4EF; /* The names are historical. --grad is gold ornament (bars, rails, meters); --grad-cta is solid navy that always carries ivory text; --grad-value tints large numerals; --grad-soft is a faint warm wash. */ --grad: linear-gradient(135deg, #B8955A 0%, #C9A86C 50%, #E0C58F 100%); --grad-cta: linear-gradient(180deg, #22344F 0%, #1B2A41 100%); --grad-value: linear-gradient(180deg, #1B2A41 0%, #2C4160 100%); --grad-soft: linear-gradient(135deg, rgba(201,168,108,.10), rgba(27,42,65,.03)); --glow: 0 1px 2px rgba(27,42,65,.10), 0 6px 16px -10px rgba(27,42,65,.40); --rail-ink-strong: #F7F4EF; --rail-mark-glow: none; --rail-active-bg: rgba(201,168,108,.13); --rail-active-shadow: none; --rail-active-icon: #C9A86C; --rail-count-ink: #F7F4EF; --rail-accent: #C9A86C; /* wordmark tagline, group labels */ --hero-grad: linear-gradient(115deg, #152233 0%, #1B2A41 58%, #22344F 100%); --hero-glow-1: rgba(201,168,108,.20); --hero-glow-2: rgba(247,244,239,.05); --hero-ink: #F7F4EF; --hero-ink-2: rgba(247,244,239,.80); --hero-ink-3: rgba(247,244,239,.68); /* semantic — earthy, so status never shouts over the brand */ --urgent: #B3261E; --urgent-soft: #FBEAE7; --caution: #8A5A12; --caution-soft: #F8EEDB; --stable: #2E6B4F; --stable-soft: #E3EFE8; --info: #2B4E7A; --info-soft: #E6ECF4; --muted-tone: #5F6B78; --muted-soft: #EFEBE4; --purple: #6B4A7E; --purple-soft: #F0E9F2; /* elevation — navy-tinted and quiet */ --shadow-1: 0 1px 2px rgba(27,42,65,.06); --shadow-2: 0 1px 2px rgba(27,42,65,.05), 0 8px 22px -14px rgba(27,42,65,.24); --shadow-3: 0 24px 50px -22px rgba(27,42,65,.38), 0 4px 12px rgba(27,42,65,.08); --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(201,168,108,.9); /* geometry — modest, like the website */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 56px; --sidebar-w: 288px; --topbar-h: 64px; --row-h: 56px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --display: "Playfair Display", Georgia, "Times New Roman", serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --dur: 180ms; --ease: cubic-bezier(.2,.8,.2,1); } /* ------------------------------------------------------------------- dark Evening at the clinic: deep navy surfaces, ivory ink, gold accents. Gold is light enough here to carry text, so the accent moves from navy to gold. */ html[data-theme="dark"] { color-scheme: dark; --gold-ink: #D9BE8A; --gold-soft: rgba(201,168,108,.16); --canvas: #0E1622; --canvas-2: #111B29; --surface: #152233; --surface-2: #192840; --surface-3: #203049; --surface-inset: #101A28; --rail: #0B121C; --rail-2: #070C14; --rail-ink: #C9D1DC; --rail-muted: #7F8C9E; --rail-hover: rgba(247,244,239,.05); --rail-line: rgba(247,244,239,.07); --ink: #F3EFE7; --ink-2: #CDD4DE; --ink-3: #A6B0BE; --ink-4: #8B97A7; --ink-invert: #0E1622; --line: #253550; --line-strong: #33476A; --line-soft: #1D2C43; --accent: #D4B57C; --accent-hover: #E6CD9C; --accent-2: #C9A86C; --accent-soft: rgba(201,168,108,.15); --accent-softer: rgba(201,168,108,.07); --accent-ink: #E3CA98; --on-accent: #152233; --grad: linear-gradient(135deg, #B8955A 0%, #C9A86C 50%, #E0C58F 100%); --grad-cta: linear-gradient(180deg, #34507A 0%, #2C4160 100%); --grad-value: linear-gradient(180deg, #F3EFE7 0%, #E0C58F 100%); --grad-soft: linear-gradient(135deg, rgba(201,168,108,.08), rgba(247,244,239,.02)); --glow: 0 6px 18px -10px rgba(0,0,0,.7); --hero-grad: linear-gradient(115deg, #0B121C 0%, #152233 60%, #1D2D45 100%); --urgent: #F09A90; --urgent-soft: rgba(240,154,144,.14); --caution: #E6C07A; --caution-soft: rgba(230,192,122,.14); --stable: #8CC7A6; --stable-soft: rgba(140,199,166,.14); --info: #9DB8DC; --info-soft: rgba(157,184,220,.14); --muted-tone: #A6B0BE; --muted-soft: rgba(166,176,190,.12); --purple: #C7A8D6; --purple-soft: rgba(199,168,214,.14); --shadow-1: 0 1px 2px rgba(0,0,0,.45); --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7); --shadow-3: 0 24px 56px -20px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.45); --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(224,197,143,.9); } /* ------------------------------------------------------------------ paper (stored as "green" for older preferences.) Crisp white paper with the practice's own accent colour. --brand is set inline by base.html, per practice and per user when someone overrides it on their profile. --brand-deep is that same colour darkened server-side until white on it clears 4.5:1. Anything carrying text uses --brand-deep, so no accent anyone picks — however pale — can break contrast. --brand is only for decoration: bars, meter fills and tints, never under text. Gold stays the ornament. */ html[data-theme="green"] { color-scheme: light; /* fallbacks only — base.html sets both inline on */ --brand: #1B2A41; --brand-deep: #1B2A41; --canvas: #F4F3F0; --canvas-2: #EAE8E3; --surface: #FFFFFF; --surface-2: #FAFAF8; --surface-3: #F1F0EC; --surface-inset: #F7F6F3; --rail: #FFFFFF; --rail-2: #F4F3F0; --rail-ink: #33415A; --rail-muted: #5F6B78; --rail-hover: rgba(27,42,65,.05); --rail-line: #E6E3DD; --ink: #1B2A41; --ink-2: #33415A; --ink-3: #4D596A; --ink-4: #5F6B78; --ink-invert: #FFFFFF; --line: #E6E3DD; --line-strong: #D1CDC5; --line-soft: #EFEDE9; --accent: var(--brand-deep); --accent-hover: color-mix(in srgb, var(--brand-deep) 84%, #000); --accent-2: #C9A86C; --accent-soft: color-mix(in srgb, var(--brand) 9%, #FFF); --accent-softer: color-mix(in srgb, var(--brand) 4%, #FFF); --accent-ink: color-mix(in srgb, var(--brand-deep) 88%, #000); --on-accent: #FFFFFF; --grad-cta: linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 88%, #FFF), var(--brand-deep)); --grad-value: linear-gradient(180deg, var(--brand-deep), color-mix(in srgb, var(--brand-deep) 80%, #000)); --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent); --ring: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--brand) 55%, transparent); /* a light rail: the brand mark and the active item carry the colour */ --rail-ink-strong: #1B2A41; --rail-active-bg: color-mix(in srgb, var(--brand) 8%, #FFF); --rail-active-shadow: none; --rail-accent: #7A5F30; --rail-active-icon: var(--brand-deep); --rail-count-ink: #1B2A41; /* the hero stays deep whatever colour someone picks, so its labels clear 4.5:1 */ --hero-grad: linear-gradient(115deg, color-mix(in srgb, var(--brand-deep) 70%, #000) 0%, var(--brand-deep) 100%); } html[data-density="compact"] { --row-h: 44px; --sp-4: 12px; --sp-5: 16px; --sp-6: 18px; --topbar-h: 56px; } /* ------------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } /* The signed-in workspace scrolls inside its panes, never outside the viewport. */ html.app-shell, .app-shell body { width: 100%; max-width: 100%; overflow: hidden; } .app-shell .app { width: 100%; max-width: 100%; min-width: 0; } .app-shell .page { min-width: 0; } .app-shell .table-wrap { min-width: 0; max-width: 100%; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5 { margin: 0; font-family: var(--font); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); } /* Playfair for the big moments (page titles, section heads); Inter below 16px, where a serif gets fussy. */ h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.005em; font-variant-numeric: lining-nums; } h1 { font-size: 30px; line-height: 1.15; } h2 { font-size: 19px; } h3 { font-size: 14.5px; } h4 { font-size: 13px; } p { margin: 0 0 var(--sp-3); } a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--accent-hover); } img, svg { vertical-align: middle; max-width: 100%; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } ::selection { background: var(--accent-soft); color: var(--accent-ink); } .num, td.num, .tabular { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; font-size: .94em; letter-spacing: -.02em; } code, kbd { font-family: var(--mono); font-size: .9em; } kbd { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 2px 6px; color: var(--ink-3); font-size: 10.5px; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; } /* ------------------------------------------------------------------ layout */ /* The shell itself never scrolls — .page is the content scroll container, so the rail stays pinned no matter how long a list gets. Every flex/grid child in the chain needs min-height:0, otherwise the default `min-height:auto` refuses to shrink, the pane overflows its parent, and the whole page scrolls instead (which is what dragged the sidebar out of view). */ .app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; } /* ---- the rail ---- The clinic's navy spine: the heart-and-pulse lockup, gold section labels with a hairline running out from them, and a thin gold bar on the page you're on. Collapses to an icon rail (the toggle beside the brand, or Ctrl/⌘ + \); the choice is remembered per browser and painted before first render by base.html. On a phone it is the slide-out menu instead. */ .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; height: 100%; min-height: 0; z-index: 40; overflow: hidden; position: relative; border-right: 1px solid var(--rail-line); --bm-cut: var(--rail); } .sidebar__brand { display: flex; align-items: center; gap: 4px; height: var(--topbar-h); padding: 0 10px 0 18px; flex: 0 0 auto; position: relative; z-index: 1; } .sidebar__brand::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--rail-accent), transparent); opacity: .55; } .sidebar__home { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--r-sm); } .sidebar__home:hover { color: inherit; } .sidebar__home:focus-visible { box-shadow: 0 0 0 2px var(--rail-accent); } .sidebar__mark { width: 38px; height: 34px; flex: 0 0 38px; display: grid; place-items: center; } .sidebar__mark .brand-mark { width: 38px; height: 34px; } .sidebar__brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1; } .sidebar__name { font-family: var(--display); font-weight: 500; color: var(--rail-ink-strong); font-size: 16.5px; letter-spacing: .005em; white-space: nowrap; line-height: 1.05; } .sidebar__sub { margin-top: 6px; font-size: 9px; font-weight: 650; letter-spacing: .24em; text-transform: uppercase; color: var(--rail-accent); white-space: nowrap; line-height: 1; } /* ---- the brand mark: a gold heart crossed by a pulse line ---- */ .brand-mark { display: block; overflow: visible; } .brand-mark .bm-heart { fill: var(--gold); transform-origin: 24px 22px; transition: transform .5s var(--ease); } .brand-mark .bm-pulse, .brand-mark .bm-pulse-out { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 0; } .brand-mark .bm-pulse { stroke: var(--bm-cut, var(--navy)); } .brand-mark .bm-pulse-out { stroke: var(--gold); } a:hover .brand-mark .bm-heart { transform: scale(1.06); } a:hover .brand-mark .bm-pulse, a:hover .brand-mark .bm-pulse-out { animation: bm-beat 1.1s var(--ease); } @keyframes bm-beat { 0% { stroke-dashoffset: 90; } 100% { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .brand-mark .bm-heart { transition: none; } a:hover .brand-mark .bm-pulse, a:hover .brand-mark .bm-pulse-out { animation: none; } } /* ---- the list ---- */ .sidebar__scroll { flex: 1 1 auto; overflow-y: auto; padding: 18px 12px 16px; position: relative; z-index: 1; scrollbar-width: thin; } .sidebar__scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rail-ink) 18%, transparent); background-clip: content-box; } .nav-group { margin-bottom: 22px; } .nav-group__label { display: flex; align-items: center; gap: 10px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .22em; color: var(--rail-accent); padding: 0 12px 9px; font-weight: 650; white-space: nowrap; } .nav-group__label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rail-line); } .nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-xs); color: var(--rail-ink); font-size: 13.5px; font-weight: 500; margin-bottom: 1px; position: relative; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--rail-muted); transition: color var(--dur) var(--ease); } .nav-item:hover { background: var(--rail-hover); color: var(--rail-ink-strong); } .nav-item:hover svg { color: var(--rail-accent); } .nav-item:focus-visible { box-shadow: inset 0 0 0 2px var(--rail-accent); } .nav-item.is-active { background: var(--rail-active-bg); color: var(--rail-ink-strong); font-weight: 600; box-shadow: var(--rail-active-shadow); } .nav-item.is-active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 70%; border-radius: 0 2px 2px 0; background: var(--rail-active-icon); } .nav-item.is-active svg { color: var(--rail-active-icon); } .nav-item__count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600; background: color-mix(in srgb, var(--rail-ink) 14%, transparent); color: var(--rail-count-ink); border-radius: var(--r-pill); padding: 2px 8px; min-width: 22px; text-align: center; } .nav-item__count.is-alert { background: var(--gold); color: var(--navy); font-weight: 700; } /* "Soon": a feature that ships later (the Phone line). Quiet, not an alert. */ .nav-item__count--soon { background: transparent; border: 1px solid currentColor; opacity: .7; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } /* ---- the account ---- */ .sidebar__footer { flex: 0 0 auto; border-top: 1px solid var(--rail-line); padding: 12px; position: relative; z-index: 1; } .sidebar__user { width: 100%; margin: 0; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; padding: 8px 10px; } .sidebar__user .avatar { box-shadow: 0 0 0 2px var(--rail), 0 0 0 3px var(--gold); } .sidebar__user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .sidebar__user-name { color: var(--rail-ink-strong); font-size: 13px; font-weight: 600; } .sidebar__user-role { font-size: 11px; color: var(--rail-muted); } .sidebar__user-chevron { margin-left: auto; display: flex; } .sidebar__user-chevron svg { width: 15px; height: 15px; } .sidebar__menu { bottom: calc(100% + 6px); top: auto; left: 0; right: 0; } .sidebar__menu-who { display: flex; align-items: center; gap: 12px; padding: 10px 11px 8px; } .sidebar__menu-who b { display: block; font: 500 17px/1.2 var(--display); color: var(--ink); } .sidebar__menu-who small { font-size: 12px; color: var(--ink-4); } /* ---- collapse toggle ---- */ .sidebar__toggle { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--rail-muted); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); } .sidebar__toggle:hover { background: var(--rail-hover); color: var(--rail-ink-strong); } .sidebar__toggle:focus-visible { box-shadow: 0 0 0 2px var(--rail-accent); border-radius: var(--r-sm); } .sidebar__toggle svg { width: 18px; height: 18px; } .sidebar__toggle > span { display: grid; place-items: center; } .sidebar__toggle-open { display: none !important; } /* A tooltip for the icon-only rail. It lives on (the rail clips its overflow), placed by app.js beside whichever item is hovered or focused. */ .rail-tip { position: fixed; z-index: 80; pointer-events: none; padding: 7px 11px; border-radius: var(--r-xs); transform: translate(-4px, -50%); background: var(--navy-deep); color: var(--ivory); border: 1px solid rgba(201,168,108,.4); font-size: 12.5px; font-weight: 600; white-space: nowrap; letter-spacing: -.005em; box-shadow: 0 10px 24px -10px rgba(21,34,51,.6); opacity: 0; transition: opacity 120ms var(--ease), transform 120ms var(--ease); } .rail-tip.is-on { opacity: 1; transform: translate(0, -50%); } .rail-tip::before { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: inherit; border-left: inherit; border-bottom: inherit; transform: rotate(45deg); } @media (min-width: 761px) { .sidebar { transition: width 220ms var(--ease), flex-basis 220ms var(--ease); } html[data-sidebar="collapsed"] { --sidebar-w: 78px; } html[data-sidebar="collapsed"] .sidebar__brand { padding: 0; justify-content: center; } html[data-sidebar="collapsed"] .sidebar__brand::after { left: 16px; right: 16px; } html[data-sidebar="collapsed"] .sidebar__home { flex: 0 0 auto; } html[data-sidebar="collapsed"] .sidebar__brand-text { display: none; } /* Collapsed, the toggle sits on the brand mark and shows on hover or focus. */ html[data-sidebar="collapsed"] .sidebar__toggle { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--rail-2); color: var(--rail-ink-strong); box-shadow: inset 0 0 0 1px var(--rail-accent); opacity: 0; } html[data-sidebar="collapsed"] .sidebar__brand:hover .sidebar__toggle, html[data-sidebar="collapsed"] .sidebar__toggle:focus-visible { opacity: 1; } html[data-sidebar="collapsed"] .sidebar__toggle-open { display: grid !important; } html[data-sidebar="collapsed"] .sidebar__toggle-close { display: none !important; } html[data-sidebar="collapsed"] .sidebar__scroll { padding: 14px 12px; scrollbar-width: none; } html[data-sidebar="collapsed"] .sidebar__scroll::-webkit-scrollbar { display: none; } html[data-sidebar="collapsed"] .nav-group { margin-bottom: 8px; } html[data-sidebar="collapsed"] .nav-group__label { height: 1px; padding: 0; margin: 8px 12px 12px; overflow: hidden; font-size: 0; background: var(--rail-line); } html[data-sidebar="collapsed"] .nav-group__label::after { display: none; } html[data-sidebar="collapsed"] .nav-item { justify-content: center; gap: 0; padding: 11px 0; border-radius: 50%; width: 44px; height: 44px; margin: 0 auto 4px; } html[data-sidebar="collapsed"] .nav-item.is-active::before { left: -11px; height: 50%; } html[data-sidebar="collapsed"] .nav-item svg { width: 19px; height: 19px; flex-basis: 19px; } html[data-sidebar="collapsed"] .nav-item__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } html[data-sidebar="collapsed"] .nav-item__count { position: absolute; top: 1px; right: -2px; margin: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: 9.5px; line-height: 17px; border-radius: 999px; box-shadow: 0 0 0 2px var(--rail); } html[data-sidebar="collapsed"] .sidebar__footer { padding: 12px 10px; } html[data-sidebar="collapsed"] .sidebar__user { justify-content: center; padding: 8px 0; width: 100%; height: auto; border-radius: var(--r-sm); } html[data-sidebar="collapsed"] .sidebar__user-text, html[data-sidebar="collapsed"] .sidebar__user-chevron { display: none; } html[data-sidebar="collapsed"] .sidebar__menu, html[data-sidebar="collapsed"] .sidebar__menu.menu--up { position: fixed; left: calc(var(--sidebar-w) + 8px); right: auto; bottom: 12px; top: auto; width: 268px; } } @media (min-width: 761px) and (hover: none) { /* Touch screens can't hover to find the toggle: show it instead of the mark. */ html[data-sidebar="collapsed"] .sidebar__toggle { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sidebar, .rail-tip { transition: none; } } .main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* ---- topbar ---- */ .topbar { height: var(--topbar-h); flex: 0 0 var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 30; } .topbar__search { flex: 1 1 auto; min-width: 0; max-width: 520px; position: relative; } .topbar .topbar__search input { width: 100%; height: 38px; min-height: 38px; padding: 0 52px 0 38px; background: var(--canvas); border: 1px solid transparent; border-radius: var(--r-sm); color: var(--ink); font-size: 13.5px; font-family: inherit; box-shadow: none; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .topbar .topbar__search input:hover { border-color: var(--line-strong); } .topbar .topbar__search input:focus { background: var(--surface); border-color: var(--ink-4); box-shadow: var(--ring); } .topbar__search input::placeholder { color: var(--ink-4); } .topbar__search svg { position: absolute; left: 13px; top: 10.5px; width: 17px; height: 17px; color: var(--ink-4); } .topbar__search kbd { position: absolute; right: 10px; top: 9px; background: var(--surface); } .topbar__spacer { flex: 1 1 auto; } /* ---- the dialer button (opens the floating dial pad; phones use the Phone tab) ---- */ .topbar__dialer { position: relative; flex: 0 0 auto; height: 38px; min-width: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); box-shadow: none; cursor: pointer; font: inherit; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .topbar__dialer:hover { border-color: var(--line-strong); color: var(--ink); } .topbar__dialer:focus-visible { outline: none; box-shadow: var(--ring); } .topbar__dialer[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; } .topbar__dialer-icon { display: grid; place-items: center; } .topbar__dialer-icon svg { width: 17px; height: 17px; } .topbar__dialer-dot { position: absolute; left: 25px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); box-shadow: 0 0 0 2px var(--surface); } .topbar__dialer[data-state="ready"] .topbar__dialer-dot { background: var(--stable); } .topbar__dialer[data-state="connecting"] .topbar__dialer-dot, .topbar__dialer[data-state="offline"] .topbar__dialer-dot { background: var(--caution); } .topbar__dialer[data-state="unavailable"] .topbar__dialer-dot { background: var(--urgent); } .topbar__dialer[data-state="simulated"] .topbar__dialer-dot { background: var(--info); } .topbar__dialer-timer { display: none; font-family: var(--mono); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .topbar__dialer[data-state="busy"] { background: #2E6B4F; color: #fff; border-color: transparent; box-shadow: none; } .topbar__dialer[data-state="busy"] .topbar__dialer-timer:not(:empty) { display: inline; } .topbar__dialer[data-state="busy"] .topbar__dialer-dot { background: rgba(255,255,255,.8); box-shadow: none; } .topbar__dialer[data-state="ringing"] { color: var(--stable); border-color: color-mix(in srgb, var(--stable) 50%, transparent); animation: dialer-ring-pulse 1.3s ease-out infinite; } @keyframes dialer-ring-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stable) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } } .topbar__count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1; color: var(--navy); background: var(--gold); box-shadow: 0 0 0 2px var(--canvas); } .topbar__bell { position: relative; } .topbar__bell-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--urgent); box-shadow: 0 0 0 2px var(--canvas); } @media (max-width: 760px) { .topbar__dialer { display: none; } } /* ---- connection lights: Twilio, Stripe and AI on or off (core/service_status.py) ---- Wide screens say it in words ("Twilio On"); narrower ones show each service's icon with a coloured dot; phones fold the three into a stack of lights. The button opens a menu that explains each one. */ .topbar__services { flex-shrink: 0; } .svc { height: 38px; display: inline-flex; align-items: center; padding: 0 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: none; color: var(--ink-3); cursor: pointer; font: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .svc:hover { border-color: var(--line-strong); } .svc:focus-visible { outline: none; box-shadow: var(--ring); } .svc[aria-expanded="true"] { border-color: var(--accent); } .svc--attention { border-color: color-mix(in srgb, var(--urgent) 45%, var(--line)); } /* data-svc="on|off|test|problem" colours anything that shows a connection's state */ [data-svc] { --svc-dot: var(--ink-4); --svc-ink: var(--ink-3); --svc-soft: var(--muted-soft); } [data-svc="on"] { --svc-dot: var(--stable); --svc-ink: var(--stable); --svc-soft: var(--stable-soft); } [data-svc="test"] { --svc-dot: var(--caution); --svc-ink: var(--caution); --svc-soft: var(--caution-soft); } [data-svc="problem"] { --svc-dot: var(--urgent); --svc-ink: var(--urgent); --svc-soft: var(--urgent-soft); } .svc__item { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 7px 0 9px; font-size: 12.5px; white-space: nowrap; } .svc__item + .svc__item { border-left: 1px solid var(--line-soft); } .svc__icon { position: relative; display: none; place-items: center; color: var(--ink-3); } .svc__icon svg { width: 16px; height: 16px; } .svc__dot { position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--svc-dot); box-shadow: 0 0 0 2px var(--surface); } .svc__name { font-weight: 600; color: var(--ink-2); } .svc__state { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--svc-ink); background: var(--svc-soft); } .svc__lights { display: none; flex-direction: column; gap: 3px; padding: 0 9px; } .svc__light { width: 7px; height: 7px; border-radius: 50%; background: var(--svc-dot); } .svc__item[data-svc="problem"] .svc__dot, .svc__light[data-svc="problem"] { animation: svc-pulse 1.8s ease-out infinite; } @keyframes svc-pulse { 0% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px color-mix(in srgb, var(--urgent) 55%, transparent); } 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 8px transparent; } } @media (prefers-reduced-motion: reduce) { .svc__item[data-svc="problem"] .svc__dot, .svc__light[data-svc="problem"] { animation: none; } } .svc-menu { width: 348px; max-width: calc(100vw - 24px); padding: 6px 6px 8px; } .svc-menu__row { display: flex; gap: 11px; padding: 10px 11px; border-radius: var(--r-sm); } .svc-menu__row + .svc-menu__row { border-top: 1px solid var(--line-soft); border-top-left-radius: 0; border-top-right-radius: 0; } .svc-menu__icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--svc-ink); background: var(--svc-soft); } .svc-menu__body { min-width: 0; flex: 1 1 auto; } .svc-menu__head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .svc-menu__head strong { font-size: 13.5px; font-weight: 650; color: var(--ink); } .svc-menu__service { font-size: 12px; color: var(--ink-4); } .svc-pill { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--svc-ink); background: var(--svc-soft); } .svc-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--svc-dot); } .svc-menu__detail { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); } .svc-menu__fix { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--accent); } .svc-menu__fix:hover { text-decoration: underline; text-underline-offset: 2px; } .svc-menu__note { margin: 0; padding: 6px 11px 2px; font-size: 12px; line-height: 1.45; color: var(--ink-4); } /* Room is short: first the words go (icons with dots), then on phones the lights stack. */ @media (max-width: 1280px) { .topbar__action-label { display: none; } .topbar .topbar__action { width: 36px; height: 36px; padding: 0; } } @media (max-width: 960px) { .svc__item { padding: 0 9px; } .svc__icon { display: grid; } .svc__name, .svc__state { display: none; } } @media (max-width: 760px) { .svc { width: 34px; height: 34px; padding: 0; justify-content: center; } .svc__item { display: none; } .svc__lights { display: flex; padding: 0; } /* the button sits near the left on a phone: open the menu across the screen */ .menu.svc-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 4px); width: auto; max-width: none; } } @media (max-width: 430px) { /* room for the search box: New text is on the Inbox tab */ .topbar .topbar__action--text { display: none; } } @media (prefers-reduced-motion: reduce) { .topbar__dialer[data-state="ringing"] { animation: none; } } .topbar > .btn, .topbar > .has-menu { flex-shrink: 0; } .topbar .topbar__nav-toggle { display: none; } .topbar__theme-light { display: flex; } .topbar__theme-dark, .topbar__theme-green { display: none; } html[data-theme="dark"] .topbar__theme-light { display: none; } html[data-theme="dark"] .topbar__theme-dark { display: flex; } html[data-theme="green"] .topbar__theme-light { display: none; } html[data-theme="green"] .topbar__theme-green { display: flex; } /* The page scrolls; its content keeps a readable measure, centred like the website's .wrap. */ .page { padding: 32px max(28px, calc((100% - 1440px) / 2)) 40px; width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } .page--flush { padding: 0; max-width: none; display: flex; flex-direction: column; min-height: 0; } .page-head { display: flex; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); } .page-head__text { min-width: 0; flex: 1 1 260px; } .page-head__text::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 14px; background: var(--gold); } .page-head h1 { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; font-size: 34px; } .page-head__sub { color: var(--ink-3); font-size: 13.5px; margin-top: 6px; } .page-eyebrow { margin: 0 0 8px; font-size: 10.5px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink); } .page-head__text:has(> .page-eyebrow)::before { margin-bottom: 12px; } .page-head__actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .pipeline-page-head { margin-bottom: var(--sp-4); } .pipeline-page-head h1::before { content: none; } .breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-4); margin-bottom: 8px; } .breadcrumbs a { color: var(--ink-3); font-weight: 500; } .breadcrumbs a:hover { color: var(--accent); } /* ---- hero band (dashboard) ---- */ .hero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-8) var(--sp-6); background: var(--hero-grad); color: var(--hero-ink); margin-bottom: var(--sp-5); box-shadow: var(--shadow-2); border-bottom: 3px solid var(--gold); } .hero::before { content: ""; position: absolute; inset: -60% -20% auto 55%; height: 240%; background: radial-gradient(closest-side, var(--hero-glow-1), transparent 70%); } .hero::after { content: ""; position: absolute; inset: auto auto -70% -10%; width: 420px; height: 420px; background: radial-gradient(closest-side, var(--hero-glow-2), transparent 70%); } .hero > * { position: relative; z-index: 1; } .hero h1, .hero .hero__title { color: var(--hero-ink); font-family: var(--display); font-weight: 500; font-size: 32px; letter-spacing: 0; } .hero__sub { color: var(--hero-ink-2); font-size: 13.5px; margin-top: 6px; } .hero__stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-5); } .hero__stat { min-width: 92px; } .hero__stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--gold); font-weight: 650; } .hero__stat-value { font-family: var(--display); font-size: 32px; font-weight: 500; letter-spacing: 0; color: var(--hero-ink); margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; } /* ------------------------------------------------------------------- grids */ .grid { display: grid; gap: var(--sp-4); } .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .grid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); } .grid--sidebar { grid-template-columns: minmax(0,1fr) 352px; align-items: start; } .grid--aside { grid-template-columns: 312px minmax(0,1fr); align-items: start; } .stack { display: flex; flex-direction: column; gap: var(--sp-4); } .stack--sm { gap: var(--sp-2); } .row { display: flex; align-items: center; gap: var(--sp-3); } .row--wrap { flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .spacer { flex: 1 1 auto; } /* ------------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; position: relative; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card:hover { box-shadow: var(--shadow-1); } .patient-header-card { overflow: visible; z-index: 2; } .card--flat { box-shadow: none; } .card--flat:hover { box-shadow: none; } .card--inset { background: var(--surface-2); } .card__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-soft); } .card__head h2, .card__head h3 { font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: 0; } .card__head .btn { margin-left: auto; } .card__body { padding: var(--sp-5); } .card__body--tight { padding: var(--sp-3) var(--sp-4); } .card__foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-soft); background: var(--surface-2); font-size: 12.5px; color: var(--ink-3); } .card__title-icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); flex: 0 0 32px; border-radius: 50%; } .card__title-icon svg { width: 16px; height: 16px; } /* --------------------------------------------------------------- stat tile */ .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); position: relative; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .stat::before { content: none; } .stat::after { content: none; } .stat > * { position: relative; z-index: 1; } .stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--accent-ink); font-weight: 650; } .stat__value { font-family: var(--display); font-size: 40px; font-weight: 500; letter-spacing: 0; margin-top: 10px; font-variant-numeric: tabular-nums lining-nums; line-height: 1; color: var(--ink); } .stat__meta { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-3); } .encounter-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); } .stat--compact { padding: var(--sp-4); } .stat--compact .stat__value { font-size: 28px; } .stat--compact .stat__meta svg { width: 14px; height: 14px; } .stat--attention::before { background: var(--caution); } .stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; } .stat__delta svg { width: 13px; height: 13px; } .stat__delta.up { color: var(--stable); } .stat__delta.down { color: var(--urgent); } .stat__icon { position: absolute; right: var(--sp-5); top: var(--sp-5); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); color: var(--gold-ink); z-index: 2; } .stat__icon svg { width: 17px; height: 17px; } .stat__spark { margin-top: var(--sp-3); height: 34px; } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .btn:active { transform: scale(.98); } .btn svg { width: 15px; height: 15px; } .btn--primary { background: var(--gold); color: var(--navy); box-shadow: none; } .btn--primary:hover { background: var(--gold-hover); color: var(--navy); box-shadow: none; } /* Paper takes the practice's own colour for its main buttons */ html[data-theme="green"] .btn--primary { background: var(--accent); color: var(--on-accent); } html[data-theme="green"] .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); } .btn--ghost { background: transparent; color: var(--ink-2); box-shadow: none; } .btn--ghost:hover { background: var(--surface-3); box-shadow: none; transform: none; } .btn--soft { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; } .btn--soft:hover { background: color-mix(in srgb, var(--gold) 28%, var(--surface)); color: var(--accent-ink); box-shadow: none; } .btn--danger { background: var(--urgent); color: #fff; box-shadow: none; } .btn--danger:hover { background: color-mix(in srgb, var(--urgent) 86%, #000); color: #fff; box-shadow: none; } .btn--danger-soft { background: var(--urgent-soft); border-color: transparent; color: var(--urgent); box-shadow: none; } .btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: var(--r-xs); } .btn--sm svg { width: 13px; height: 13px; } .btn--lg { height: 48px; padding: 0 24px; font-size: 14.5px; border-radius: var(--r-sm); } .btn--icon { width: 38px; padding: 0; } .btn--icon.btn--sm { width: 32px; } .btn--block { width: 100%; } .btn:disabled, .btn.is-disabled { opacity: .45; pointer-events: none; box-shadow: none; } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; box-shadow: none; } .btn-group .btn:hover { transform: none; } .btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; } .btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .google-calendar-card { border-color: color-mix(in srgb, var(--accent-2) 22%, var(--line)); } .google-calendar-card__body { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .google-calendar-card__identity { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .google-calendar-card__icon { position: relative; width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); } .google-calendar-card__icon svg { width: 18px; height: 18px; } .google-calendar-card__brand { position: absolute; right: -5px; bottom: -4px; width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: conic-gradient(#4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75%); color: #fff; font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1; } .google-calendar-card__copy { min-width: 0; } .google-calendar-card__copy strong { display: block; color: var(--ink-2); font-size: 13.5px; } .google-calendar-card__copy .text-mute { margin-top: 2px; } .google-calendar-card__actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; } .segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; gap: 2px; } .segmented a, .segmented button { padding: 6px 13px; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 600; color: var(--ink-3); border: 0; background: transparent; cursor: pointer; font-family: inherit; transition: all var(--dur) var(--ease); } .segmented a:hover, .segmented button:hover { color: var(--ink); } .segmented .is-active { background: var(--accent); color: var(--on-accent); box-shadow: none; } .segmented .is-active:hover { color: var(--on-accent); } /* ------------------------------------------------------------------- pills */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-xs); font-size: 11px; font-weight: 650; line-height: 1.7; letter-spacing: .02em; background: var(--muted-soft); color: var(--muted-tone); white-space: nowrap; } .pill svg { width: 12px; height: 12px; } .pill--urgent { background: var(--urgent-soft); color: var(--urgent); } .pill--caution { background: var(--caution-soft); color: var(--caution); } .pill--stable { background: var(--stable-soft); color: var(--stable); } .pill--info { background: var(--info-soft); color: var(--info); } .pill--accent { background: var(--accent-soft); color: var(--accent-ink); } .pill--purple { background: var(--purple-soft); color: var(--purple); } .pill--muted { background: var(--muted-soft); color: var(--muted-tone); } .pill--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-3); } .pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); } .tag-chip__dot { width: 7px; height: 7px; border-radius: 50%; } /* ----------------------------------------------------------------- avatars */ .avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 14px; font-weight: 500; background: var(--navy); color: var(--gold-hover); overflow: hidden; letter-spacing: .02em; box-shadow: none; } html[data-theme="dark"] .avatar { background: var(--navy-2); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar--sm { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; } .avatar--lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 21px; } .avatar--xl { width: 76px; height: 76px; flex-basis: 76px; font-size: 28px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--gold); } .avatar--neutral { background: var(--surface-3); color: var(--ink-3); box-shadow: none; border: 1px solid var(--line); } .avatar--stable { background: var(--stable); color: #fff; } .text-stable { color: var(--stable) !important; } .identity { display: flex; align-items: center; gap: 11px; min-width: 0; } .identity__name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .identity__meta { font-size: 12px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------------------ tables */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } table.data thead th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-4); font-weight: 650; padding: 13px var(--sp-5) 11px; background: var(--surface); border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 2; white-space: nowrap; } table.data tbody td { padding: 0 var(--sp-5); height: var(--row-h); border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: middle; position: relative; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background var(--dur) var(--ease); } table.data tbody tr:hover { background: var(--accent-softer); } table.data tbody tr:hover td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 0; background: var(--gold); } table.data tbody tr.is-clickable { cursor: pointer; } table.data td.right, table.data th.right { text-align: right; } table.data td.shrink, table.data th.shrink { width: 1%; white-space: nowrap; } /* Dates, times, amounts and numbers stay on one line (they wrapped into three or four lines in narrow columns: the audit log, the call log). */ table.data td.num { white-space: nowrap; } table.data .cell-strong { color: var(--ink); font-weight: 600; } table.data .cell-mute { color: var(--ink-4); font-size: 12.5px; } .encounter-date-head { width: 132px; } .encounter-date { width: 132px; white-space: nowrap; } .encounter-date__day { display: block; color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 600; } .encounter-date__time { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--ink-4); font-size: 11px; } .encounter-date__time svg { width: 12px; height: 12px; } .dashboard-calls { width: 100%; } .dashboard-call-sections { display: flex; flex-direction: column; gap: var(--sp-3); } .dashboard-call-section { padding: 12px 13px 4px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); } .dashboard-call-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .dashboard-call-section__contact { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink); } .dashboard-call-section__contact svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; } .billing-timeline { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); } .billing-timeline__item { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; } .billing-timeline__item strong, .billing-timeline__item small { display: block; } .billing-timeline__item strong { color: var(--ink); font-size: 13px; } .billing-timeline__item small { margin-top: 2px; color: var(--ink-4); font-size: 11px; } .billing-timeline__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; } .billing-timeline__icon svg { width: 16px; height: 16px; } .billing-timeline__icon--issued { background: var(--accent-soft); color: var(--accent); } .billing-timeline__icon--due { background: var(--caution-soft); color: var(--caution); } .billing-timeline__icon--overdue { background: var(--urgent-soft); color: var(--urgent); } .billing-timeline__line { height: 1px; flex: 0 1 56px; background: var(--line-strong); } .billing-date { width: 112px; white-space: nowrap; } .billing-date__label, .billing-date__value, .billing-date__state { display: block; } .billing-date__label { margin-bottom: 3px; color: var(--ink-4); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .billing-date__value { color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; } .billing-date__state { margin-top: 4px; color: var(--urgent); font-size: 10px; font-weight: 700; } .billing-date--overdue .billing-date__value { color: var(--urgent); font-weight: 700; } .billing-date--due .billing-date__value { color: var(--ink); } .dashboard-call-section__contact strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .dashboard-call-section__date { color: var(--ink-4); font-family: var(--mono); font-size: 10px; white-space: nowrap; } .dashboard-call-section__link { display: inline-block; margin-top: 7px; font-size: 11px; } .dashboard-call-section .call-activity-list { padding: 0 var(--sp-2) var(--sp-2); } .list-plain { list-style: none; margin: 0; padding: 0; } .list-row { display: flex; align-items: center; gap: var(--sp-3); padding: 12px var(--sp-5); border-bottom: 1px solid var(--line-soft); transition: background var(--dur) var(--ease); } .list-row:last-child { border-bottom: 0; } .list-row:hover { background: var(--accent-softer); } .list-row__main { min-width: 0; flex: 1 1 auto; } .list-row__title { font-weight: 600; color: var(--ink); font-size: 13.5px; } .list-row__meta { font-size: 12px; color: var(--ink-4); margin-top: 2px; } .list-row__tags { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; } .kv { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 9px var(--sp-3); font-size: 13.5px; } .kv dt { color: var(--ink-4); font-size: 12.5px; font-weight: 500; } .kv dd { margin: 0; color: var(--ink); } /* ------------------------------------------------------------------- forms */ .field { margin-bottom: var(--sp-4); } .field__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; } .field__label .req { color: var(--urgent); margin-left: 3px; } .field__help { font-size: 11.5px; color: var(--ink-4); margin-top: 5px; } .field__error { font-size: 11.5px; color: var(--urgent); margin-top: 5px; font-weight: 600; } .input, input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=url], input[type=search], select, textarea { width: 100%; min-height: 42px; padding: 10px 13px; background-color: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.45; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .password-field { position: relative; } .password-field input { padding-right: 48px; } .password-field__toggle { position: absolute; inset: 0 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; } .password-field__toggle:hover { color: var(--ink); } .password-field__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } textarea { min-height: 96px; resize: vertical; } .input:hover, input:hover, select:hover, textarea:hover { border-color: var(--ink-4); } .input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 4px color-mix(in srgb, var(--gold) 28%, transparent); background-color: var(--surface); } input::placeholder, textarea::placeholder { color: var(--ink-4); } input[type=checkbox], input[type=radio] { width: 17px; height: 17px; min-height: 0; accent-color: var(--accent); cursor: pointer; } select, select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6B78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 16px 16px; padding-right: 34px; } select[multiple], select.input[multiple] { background-image: none; padding-right: 13px; } /* select2 hides the original