/* ============================================================================ DHCS DASHBOARD DESIGN SYSTEM · dhcs-dashboard.css One source of truth for the shared look of every CalMHSA/DHCS dashboard (5150, Clinical Practice, EHR, and future ones). HOW IT WORKS - All sizes/spacing/type live in tokens (the --dhcs-* CSS variables below). Change a token in ONE place → every block on every page updates. - Per-dashboard differences are COLOR ONLY. A page sets its theme with a single attribute: (see THEMES). Nothing else changes. - Blocks are semantic components (.dhcs-kpi, .dhcs-card, .dhcs-section-label…) so the markup is identical across pages; only the data differs. ============================================================================ */ :root { /* ---- Neutral palette (shared, not themed) ------------------------------- */ --dhcs-ink: #1f2d3d; /* primary text + the big KPI numbers */ --dhcs-sub: #64748b; /* secondary / supporting text */ --dhcs-line: #e3e8ee; /* borders + dividers */ --dhcs-page-bg: #eef1f5; /* page background */ --dhcs-card-bg: #ffffff; /* ---- Brand / theme (OVERRIDDEN PER DASHBOARD — see THEMES) --------------- */ --dhcs-brand: #2f6db0; /* primary accent: links, active states */ --dhcs-brand-ink: #16365c; /* dark brand: headings on light surfaces */ --dhcs-header-from: #15335a; /* page header gradient start */ --dhcs-header-to: #1a3f67; /* page header gradient end */ /* ---- KPI icon accent pairs (bg tint + foreground) ----------------------- */ /* Pick a block's icon color with an accent class (.accent-green, …). Position and size stay fixed; only the color pair changes. */ --dhcs-accent-blue-bg:#e8f0fb; --dhcs-accent-blue-fg:#2f6db0; --dhcs-accent-green-bg:#e6f6ee; --dhcs-accent-green-fg:#1f9d57; --dhcs-accent-purple-bg:#f1eafb; --dhcs-accent-purple-fg:#8b5cc4; --dhcs-accent-orange-bg:#fdf0e3; --dhcs-accent-orange-fg:#e07b1a; --dhcs-accent-teal-bg:#e2f2f2; --dhcs-accent-teal-fg:#2c8f8f; /* ---- Type scale (CHANGE ONCE → EVERYWHERE) ------------------------------ */ --dhcs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --dhcs-kpi-value-size: 26px; /* the big number — used by EVERY stat block */ --dhcs-kpi-value-weight: 700; --dhcs-kpi-value-text-size: 14px; /* for stat blocks whose value is a NAME, not a number */ --dhcs-kpi-label-size: 9.5px; /* block title (Registered Users, …) */ --dhcs-kpi-label-weight: 700; --dhcs-kpi-label-color: #5b6b7d; /* block title color — neutral gray (Clinical Practice original) */ --dhcs-kpi-label-minh: 24px; /* reserve height so numbers align when a title wraps to 2 lines */ --dhcs-kpi-sub-size: 11px; /* supporting line under the number */ --dhcs-kpi-delta-size: 10px; /* the +x% trend line (kept small so % + label sit on one line) */ /* ---- Block / layout tokens --------------------------------------------- */ --dhcs-maxw: 1500px; --dhcs-gap: 16px; --dhcs-sidebar-w: 210px; /* filter sidebar width — SAME on every dashboard */ --dhcs-card-radius: 10px; --dhcs-card-border: 1px solid var(--dhcs-line); --dhcs-card-shadow: 0 1px 2px rgba(16,49,90,.04); --dhcs-card-pad: 14px; --dhcs-kpi-icon-size: 38px; /* icon square */ --dhcs-kpi-icon-radius: 9px; --dhcs-kpi-icon-glyph: 20px; /* the svg inside the square */ /* ---- Status colors ------------------------------------------------------ */ --dhcs-up: #1f9d57; --dhcs-down: #d9534f; } /* ============================ THEMES ======================================== Each dashboard sets ONE attribute; only color tokens change. To add a new dashboard, add a theme block here — no component or markup changes needed. */ [data-theme="clinical-practice"], [data-theme="5150"] { --dhcs-brand:#2f6db0; --dhcs-brand-ink:#16365c; --dhcs-header-from:#15335a; --dhcs-header-to:#1a3f67; } [data-theme="ehr"] { /* EHR uses the same components; only these color tokens differ. TODO: drop in the client's chosen EHR brand color (single-token swap). Left as the shared default for now — do not assume teal. */ /* --dhcs-brand: ; --dhcs-brand-ink: ; --dhcs-header-from: ; --dhcs-header-to: ; */ } /* ============================ BASE ========================================= */ .dhcs-page { background:var(--dhcs-page-bg); color:var(--dhcs-ink); font-family:var(--dhcs-font); margin:0; } .dhcs-main { max-width:var(--dhcs-maxw); margin:0 auto; padding:16px 24px; } /* ============================ HEADER ======================================= */ .dhcs-header { background:linear-gradient(100deg, var(--dhcs-header-from) 0%, var(--dhcs-header-to) 100%); color:#fff; } .dhcs-header__inner { max-width:var(--dhcs-maxw); margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .dhcs-header__title { font-size:22px; font-weight:700; line-height:1.15; margin:0; } .dhcs-header__subtitle { font-size:12px; color:rgba(255,255,255,.75); margin:3px 0 0; max-width:720px; } /* ============================ CARD / BLOCK ================================= */ .dhcs-card { background:var(--dhcs-card-bg); border:var(--dhcs-card-border); border-radius:var(--dhcs-card-radius); box-shadow:var(--dhcs-card-shadow); } .dhcs-card--pad { padding:var(--dhcs-card-pad); } /* ============================ SECTION / PANEL LABELS ======================= */ .dhcs-section-label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#5b6b7d; } .dhcs-panel-title { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#5b6b7d; } /* ============================ KPI BLOCK ==================================== Markup:
…
Registered Users
1,240
Enrolled to date
Icon color = the accent class. Icon SIZE + POSITION and number SIZE are fixed by tokens, so they're identical in every block on every page. */ /* Standard layout: number/label on the LEFT, icon on the RIGHT (Clinical Practice style). */ .dhcs-kpi { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:var(--dhcs-card-pad); } .dhcs-kpi__icon { order:2; width:var(--dhcs-kpi-icon-size); height:var(--dhcs-kpi-icon-size); border-radius:var(--dhcs-kpi-icon-radius); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--kpi-bg, var(--dhcs-accent-blue-bg)); color:var(--kpi-fg, var(--dhcs-accent-blue-fg)); } .dhcs-kpi__icon svg { width:var(--dhcs-kpi-icon-glyph); height:var(--dhcs-kpi-icon-glyph); } .dhcs-kpi__body { order:1; min-width:0; } .dhcs-kpi__label { font-size:var(--dhcs-kpi-label-size); font-weight:var(--dhcs-kpi-label-weight); letter-spacing:.03em; text-transform:uppercase; color:var(--dhcs-kpi-label-color); min-height:var(--dhcs-kpi-label-minh); line-height:1.25; } .dhcs-kpi__value { font-size:var(--dhcs-kpi-value-size); font-weight:var(--dhcs-kpi-value-weight); color:var(--dhcs-ink); line-height:1; margin-top:3px; } .dhcs-kpi__value--text { font-size:var(--dhcs-kpi-value-text-size); line-height:1.25; } /* value is a name, not a number */ .dhcs-kpi__sub { font-size:var(--dhcs-kpi-sub-size); color:var(--dhcs-sub); line-height:1.3; margin-top:4px; } .dhcs-kpi__delta { display:flex; align-items:center; gap:4px; font-size:var(--dhcs-kpi-delta-size); font-weight:600; margin-top:4px; color:var(--dhcs-up); white-space:nowrap; } .dhcs-kpi__delta.is-down { color:var(--dhcs-down); } .dhcs-kpi__delta .lbl { color:var(--dhcs-sub); font-weight:500; } .dhcs-kpi__delta svg { width:12px; height:12px; } /* Icon-on-the-left variant (one class swap; everything else identical). */ .dhcs-kpi--icon-left { justify-content:flex-start; } .dhcs-kpi--icon-left .dhcs-kpi__icon { order:0; } /* Accent modifiers — the ONLY thing that changes an icon's color. */ .accent-blue { --kpi-bg:var(--dhcs-accent-blue-bg); --kpi-fg:var(--dhcs-accent-blue-fg); } .accent-green { --kpi-bg:var(--dhcs-accent-green-bg); --kpi-fg:var(--dhcs-accent-green-fg); } .accent-purple { --kpi-bg:var(--dhcs-accent-purple-bg); --kpi-fg:var(--dhcs-accent-purple-fg); } .accent-orange { --kpi-bg:var(--dhcs-accent-orange-bg); --kpi-fg:var(--dhcs-accent-orange-fg); } .accent-teal { --kpi-bg:var(--dhcs-accent-teal-bg); --kpi-fg:var(--dhcs-accent-teal-fg); } /* ============================ KPI GRID ===================================== */ .dhcs-kpi-row { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:var(--dhcs-gap); } @media (max-width:1100px){ .dhcs-kpi-row{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width:640px){ .dhcs-kpi-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } } /* ============================ TABLE ======================================== */ .dhcs-table { width:100%; border-collapse:collapse; font-size:12.5px; } .dhcs-table th { text-align:left; font-weight:600; color:#5b6b7d; padding:8px 12px; border-bottom:1px solid var(--dhcs-line); } .dhcs-table td { padding:7px 12px; border-bottom:1px solid #f0f3f7; } .dhcs-table tr:last-child td { border-bottom:none; } /* ============================ FONT (all dashboards) ======================== */ @font-face { font-family:'Selawik'; src:url('/fonts/selawk.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Selawik'; src:url('/fonts/selawksb.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Selawik'; src:url('/fonts/selawkb.woff2') format('woff2'); font-weight:700; font-display:swap; } * { font-family:'Segoe UI','Selawik','Helvetica Neue',Arial,sans-serif; } /* ============================ TOOLTIP (ⓘ hover) =========================== */ .dhcs-tip { position:relative; display:inline-flex; align-items:center; cursor:help; color:#9fb0c3; margin-left:4px; vertical-align:middle; } .dhcs-tip svg { width:12px; height:12px; } .dhcs-tip:hover { color:var(--dhcs-brand); } .dhcs-tip:hover::after { content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); width:244px; background:#fff; color:#33414f; border:1px solid var(--dhcs-line); font-size:11px; font-weight:400; line-height:1.45; letter-spacing:normal; text-transform:none; text-align:left; padding:8px 10px; border-radius:9px; z-index:60; white-space:normal; box-shadow:0 8px 22px rgba(16,49,90,.16); pointer-events:none; } .dhcs-tip:hover::before { content:''; position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:#fff; z-index:61; } .dhcs-tip.r:hover::after { left:auto; right:-4px; transform:none; } .dhcs-tip.r:hover::before { left:auto; right:2px; transform:none; } /* =============== EXPANDABLE TABLE: "View all" button + scroll cap ========== */ .dhcs-viewall { width:100%; height:32px; border-radius:8px; border:1px solid var(--dhcs-line); background:#fff; color:var(--dhcs-brand); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; } .dhcs-viewall:hover { background:#f5f8fc; } .dhcs-viewall svg { width:14px; height:14px; transition:transform .2s; } .dhcs-scrollcap { max-height:392px; overflow-y:auto; } /* Shared table type size (was drifting 11/12.5/13px across dashboards) */ table.tbl { font-size:12.5px; } table.tbl th { font-size:12px; } /* ========================================================================= REACT APP LAYOUT (additive — used only by the /client Vite dashboards). Live HTML dashboards don't reference these classes, so this is safe to share in the one source-of-truth stylesheet. ========================================================================= */ .dhcs-header__titles { min-width:0; } .dhcs-header__title { font-size:19px; font-weight:700; margin:0; letter-spacing:.01em; } .dhcs-header__sub { font-size:12.5px; opacity:.82; margin:3px 0 0; } .dhcs-authbadge { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; background:rgba(255,255,255,.12); padding:6px 12px; border-radius:20px; } .dhcs-authbadge .dot { width:7px; height:7px; border-radius:50%; background:#9fb9d8; } .dhcs-authbadge.is-authed .dot { background:#5fd48a; } .dhcs-loading { display:flex; align-items:center; justify-content:center; gap:12px; min-height:70vh; color:var(--dhcs-sub); font-size:14px; font-weight:500; } .dhcs-spinner { width:22px; height:22px; border-radius:50%; border:3px solid var(--dhcs-line); border-top-color:var(--dhcs-brand); animation:dhcs-spin .7s linear infinite; } @keyframes dhcs-spin { to { transform:rotate(360deg); } } .dhcs-filterbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:var(--dhcs-gap); } /* responsive 12-col panel grid; panels set gridColumn:span N inline */ .dhcs-grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--dhcs-gap); margin-top:var(--dhcs-gap); align-items:start; } @media (max-width:1000px){ .dhcs-grid{ grid-template-columns:repeat(6, minmax(0,1fr));} .dhcs-grid > .dhcs-panel{ grid-column:1/-1 !important; } } @media (max-width:640px){ .dhcs-grid{ grid-template-columns:repeat(2, minmax(0,1fr));} } .dhcs-panel { display:flex; flex-direction:column; } /* PLAIN variant (sidebar cards: Filters, Downloads, Need Help) — padded card, inline label */ .dhcs-panel--plain { padding:14px; } .dhcs-panel--plain > .dhcs-panel-head { margin-bottom:12px; } /* BAR variant (data panels) — bordered header bar + body, matches prod */ .dhcs-panel--bar { padding:0; overflow:hidden; } .dhcs-panel--bar > .dhcs-panel-head { padding:11px 16px; border-bottom:1px solid var(--dhcs-line); } .dhcs-panel--bar > .dhcs-panel-body { padding:16px; } .dhcs-panel--bar > .dhcs-panel-body.is-flush { padding:0; } /* tables sit flush; their td padding gives the inset */ .dhcs-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .dhcs-panel-head__main { min-width:0; } .dhcs-panel-titlerow { display:flex; align-items:center; gap:6px; } .dhcs-panel-subtitle { font-size:11px; color:var(--dhcs-sub); margin:3px 0 0; } .dhcs-panel-action { display:flex; align-items:center; gap:8px; flex-shrink:0; } .dhcs-panel-body { min-width:0; } .dhcs-panel-foot { padding:10px 16px 14px; } /* view-all button row under a flush table */ .dhcs-export { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--dhcs-brand); background:none; border:none; cursor:pointer; padding:2px 4px; border-radius:6px; } .dhcs-export:hover { background:#f5f8fc; } .dhcs-btn { height:32px; padding:0 14px; border-radius:8px; border:1px solid var(--dhcs-line); background:#fff; color:var(--dhcs-brand); font-size:12px; font-weight:600; cursor:pointer; } .dhcs-btn:hover { background:#f5f8fc; } .dhcs-btn--primary { background:var(--dhcs-brand); border-color:var(--dhcs-brand); color:#fff; } .dhcs-btn--primary:hover { background:var(--dhcs-brand); filter:brightness(1.08); } .dhcs-btn--primary:disabled { opacity:.5; cursor:not-allowed; filter:none; } .dhcs-btn--file { display:inline-flex; align-items:center; gap:8px; height:auto; min-height:32px; } /* ---- Modal (5150 live-session upload) ---- */ .dhcs-modal-overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:16px; } .dhcs-modal { background:var(--dhcs-card-bg); border:1px solid var(--dhcs-line); border-radius:12px; box-shadow:0 10px 40px rgba(16,49,90,.25); width:100%; max-width:880px; max-height:90vh; display:flex; flex-direction:column; } .dhcs-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid var(--dhcs-line); } .dhcs-modal__title { font-size:15px; font-weight:700; color:var(--dhcs-ink); margin:0; } .dhcs-modal__sub { font-size:11px; color:var(--dhcs-sub); margin:2px 0 0; } .dhcs-modal__x { border:none; background:none; color:var(--dhcs-sub); font-size:16px; cursor:pointer; padding:4px; line-height:1; } .dhcs-modal__x:hover { color:var(--dhcs-ink); } .dhcs-modal__pick { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px; border-bottom:1px solid var(--dhcs-line); } .dhcs-modal__hint { font-size:11px; color:var(--dhcs-sub); } .dhcs-modal__hint code { background:#eef3f9; padding:1px 4px; border-radius:4px; } .dhcs-modal__status { font-size:11px; color:var(--dhcs-sub); margin-left:auto; } .dhcs-modal__body { flex:1; overflow:auto; padding:16px; } .dhcs-modal__meta { display:flex; gap:24px; flex-wrap:wrap; border:1px solid var(--dhcs-line); background:#f7f9fc; border-radius:8px; padding:12px; margin-bottom:12px; } .dhcs-modal__meta .k, .dhcs-modal__stats .k { display:block; font-size:10.5px; color:var(--dhcs-sub); } .dhcs-modal__meta .v { display:block; font-size:13px; font-weight:600; color:var(--dhcs-ink); } .dhcs-modal__stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:12px; } @media (min-width:640px){ .dhcs-modal__stats { grid-template-columns:repeat(4,1fr); } } .dhcs-modal__stats > div { border:1px solid var(--dhcs-line); border-radius:8px; padding:12px; } .dhcs-modal__stats .v { display:block; font-size:17px; font-weight:700; color:var(--dhcs-ink); } .dhcs-modal__stats .v.ok { color:#1f9d57; } .dhcs-modal__foot { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:16px; border-top:1px solid var(--dhcs-line); } /* proportion bar in table rows */ .dhcs-bar { display:inline-block; height:7px; border-radius:4px; background:#eef2f7; overflow:hidden; vertical-align:middle; } .dhcs-bar__fill { display:block; height:100%; border-radius:4px; } /* pinned footer row (Total) */ .dhcs-table__foot td { font-weight:700; border-top:2px solid var(--dhcs-line); border-bottom:none !important; background:#fafcfe; } /* sticky header when a table is scroll-capped after expand */ .dhcs-scrollcap thead th { position:sticky; top:0; background:#fff; z-index:2; } /* spotlight / highlight mini-cards */ .dhcs-mini { display:flex; align-items:center; gap:12px; padding:12px 14px; } .dhcs-mini__icon { width:36px; height:36px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--kpi-bg,var(--dhcs-accent-blue-bg)); color:var(--kpi-fg,var(--dhcs-accent-blue-fg)); } .dhcs-mini__icon svg { width:18px; height:18px; } .dhcs-mini__label { font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--dhcs-kpi-label-color); } .dhcs-mini__value { font-size:15px; font-weight:700; color:var(--dhcs-ink); margin-top:2px; line-height:1.2; } .dhcs-mini__sub { font-size:11px; color:var(--dhcs-sub); margin-top:1px; } /* multiselect filter */ .dhcs-ms { position:relative; font-size:12.5px; } .dhcs-ms__btn { height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--dhcs-line); background:#fff; color:var(--dhcs-ink); font-size:12.5px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-width:180px; justify-content:space-between; } .dhcs-ms__menu { position:absolute; z-index:40; top:calc(100% + 4px); left:0; width:260px; max-height:320px; overflow-y:auto; background:#fff; border:1px solid var(--dhcs-line); border-radius:10px; box-shadow:0 10px 28px rgba(16,49,90,.16); padding:6px; } .dhcs-ms__opt { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; } .dhcs-ms__opt:hover { background:#f5f8fc; } /* ---- filter sidebar / date / fields ---- */ .dhcs-field { margin-bottom:12px; } .dhcs-field__label { display:block; font-size:12px; font-weight:600; color:#5b6b7d; margin-bottom:4px; } .dhcs-date { width:100%; height:34px; border:1px solid #d8dee6; border-radius:7px; background:#fff; font-size:13px; padding:0 9px; color:var(--dhcs-ink); } .dhcs-ms__search { width:100%; height:30px; border:1px solid var(--dhcs-line); border-radius:6px; font-size:12.5px; padding:0 8px; margin-bottom:4px; } .dhcs-ms__opttext { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dhcs-ms__hint { font-size:11px; color:var(--dhcs-sub); padding:6px 8px; } .dhcs-ms__foot { display:flex; justify-content:flex-end; border-top:1px solid var(--dhcs-line); margin-top:4px; padding-top:4px; } .dhcs-ms__foot button { font-size:11px; color:var(--dhcs-sub); background:none; border:none; cursor:pointer; } .dhcs-ms__foot button:hover { color:var(--dhcs-brand); } .dhcs-ms__btntext { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---- EHR body layout: [filters | main] ---- */ .ehr-body { display:grid; gap:var(--dhcs-gap); grid-template-columns:1fr; } @media (min-width:1024px){ .ehr-body { grid-template-columns:var(--dhcs-sidebar-w) minmax(0,1fr); } } .ehr-filters { display:flex; flex-direction:column; gap:var(--dhcs-gap); } .ehr-main { display:flex; flex-direction:column; gap:var(--dhcs-gap); min-width:0; } /* generic responsive multi-col rows */ .dhcs-grid-2 { display:grid; gap:var(--dhcs-gap); grid-template-columns:1fr; } @media (min-width:1200px){ .dhcs-grid-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } .dhcs-grid-4 { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); } @media (min-width:768px){ .dhcs-grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); } } .dhcs-grid-5 { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); } @media (min-width:768px){ .dhcs-grid-5 { grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (min-width:1200px){ .dhcs-grid-5 { grid-template-columns:repeat(5, minmax(0,1fr)); } } .dhcs-section-head { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--dhcs-ink); text-transform:uppercase; margin-top:4px; } .dhcs-tablewrap { overflow-x:auto; } /* mini spotlight card */ .dhcs-mini-card { padding:12px 13px; } .dhcs-mini-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; } .dhcs-mini-card .dhcs-mini__icon { width:28px; height:28px; border-radius:8px; } .dhcs-mini-card .dhcs-mini__icon svg { width:15px; height:15px; } .dhcs-mini-card .dhcs-mini__value { font-size:14px; font-weight:700; color:var(--dhcs-ink); line-height:1.2; margin-top:6px; } .dhcs-mini-card .dhcs-mini__sub { font-size:11px; color:var(--dhcs-sub); margin-top:2px; } /* cross-filter rows */ .xf-row { cursor:pointer; } .xf-row:hover td { background:#f5f8fc; } .xf-row.xf-on td { background:#e8f0fb; } /* ---- Clinical Practice: 3-col body + course rows ---- */ .cp-body { display:grid; gap:var(--dhcs-gap); grid-template-columns:1fr; } @media (min-width:1024px){ .cp-body { grid-template-columns:var(--dhcs-sidebar-w) minmax(0,5fr) minmax(0,4fr); } } .cp-mid { display:flex; flex-direction:column; gap:var(--dhcs-gap); min-width:0; } .cp-right { min-width:0; } .cp-right .dhcs-panel { height:100%; } .cp-highlights { margin-top:8px; grid-template-columns:repeat(2, minmax(0,1fr)); } @media (min-width:900px){ .cp-highlights { grid-template-columns:repeat(4, minmax(0,1fr)); } } .cp-detail { margin-top:var(--dhcs-gap); } .dhcs-panel-note { font-size:11px; color:var(--dhcs-sub); margin:-4px 0 10px; } .dhcs-note-band { font-size:11px; line-height:1.5; color:#8a6d3b; background:#fff7ec; border:1px solid #f4e3c5; border-radius:6px; padding:8px 12px; margin-top:10px; } .cp-courses-head { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--dhcs-sub); margin-bottom:10px; } /* shared vertical list (course rows, etc.) — 8px between rows, matches prod */ .dhcs-list { display:flex; flex-direction:column; gap:8px; } .cp-course-row { display:flex; align-items:center; gap:8px; padding:2px 0; line-height:1.5; } .cp-course-row__num { font-size:11px; color:var(--dhcs-sub); font-weight:600; width:16px; flex-shrink:0; } .cp-course-row__label { font-size:13px; color:var(--dhcs-ink); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cp-course-row__rate { font-size:13px; font-weight:600; color:var(--dhcs-ink); width:36px; text-align:right; flex-shrink:0; } /* ---- 5150: role bars, cohort sub-tables, county grouped header ---- */ .fifty-county thead tr.grp th { font-size:9.5px; letter-spacing:.03em; color:#8a98a8; text-transform:uppercase; padding-bottom:2px; border-bottom:none; } .fifty-sub { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--dhcs-brand); margin-bottom:2px; } .fifty-inline-stats { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--dhcs-line); } .fifty-inline-stats .dhcs-mini__value { font-size:13px; font-weight:700; color:var(--dhcs-ink); line-height:1.25; margin-top:2px; } .fifty-inline-stats .dhcs-mini__sub { font-size:11px; color:var(--dhcs-sub); margin-top:1px; } .fifty-role { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .fifty-role__head { display:flex; align-items:baseline; gap:8px; font-size:12.5px; } .fifty-role__lic { display:flex; align-items:center; gap:8px; padding-left:14px; } .fifty-role__licname { font-size:11.5px; color:var(--dhcs-sub); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---- Full DHCS header (React app) ---- */ .dhcs-header__inner { color:#fff; } .dhcs-header__left { display:flex; align-items:center; gap:16px; min-width:0; } .dhcs-logo { background:#fff; border-radius:6px; padding:7px 12px; display:flex; align-items:center; box-shadow:0 1px 2px rgba(0,0,0,.08); flex-shrink:0; } .dhcs-logo img { height:34px; width:auto; display:block; } .dhcs-header__titlerow { display:flex; align-items:center; gap:8px; } .dhcs-header__title { font-size:21px; font-weight:700; margin:0; line-height:1.15; } .dhcs-header__sub { font-size:12px; color:rgba(255,255,255,.75); margin:2px 0 0; max-width:720px; } .dhcs-badge-secure { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:5px; padding:1px 7px; } .dhcs-header__right { display:flex; align-items:center; gap:16px; flex-shrink:0; } .dhcs-header__meta { text-align:right; font-size:12px; line-height:1.35; color:rgba(255,255,255,.85); } .dhcs-header__updated, .dhcs-header__refresh { display:flex; align-items:center; justify-content:flex-end; gap:6px; } .dhcs-header__refresh { color:rgba(255,255,255,.6); margin-top:2px; } .dhcs-header .ic { display:inline-flex; } .dhcs-header .ic svg { width:14px; height:14px; opacity:.8; } .dhcs-header__refresh .ic svg { width:13px; height:13px; } .dhcs-header__user { display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.85); font-weight:500; } .dhcs-header__admin { font-size:12px; color:rgba(255,255,255,.85); font-weight:500; padding:6px 10px; border:1px solid rgba(255,255,255,.25); border-radius:6px; text-decoration:none; } .dhcs-header__admin:hover { background:rgba(255,255,255,.1); color:#fff; } .dhcs-header__btn { display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--dhcs-brand-ink); font-size:12.5px; font-weight:600; padding:8px 14px; border:none; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.08); cursor:pointer; text-decoration:none; } .dhcs-header__btn:hover { background:rgba(255,255,255,.9); } .dhcs-header__btn .ic svg { width:14px; height:14px; opacity:1; } @media (max-width:760px){ .dhcs-header__meta { display:none; } .dhcs-header__sub { display:none; } } /* ---- date field containment (was overflowing the sidebar) ---- */ .dhcs-date { box-sizing:border-box; min-width:0; max-width:100%; } /* ---- About / Privacy row (CP) ---- */ .dhcs-about-row { display:grid; gap:var(--dhcs-gap); grid-template-columns:1fr; margin-bottom:var(--dhcs-gap); } @media (min-width:900px){ .dhcs-about-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } .dhcs-about { display:flex; gap:12px; } .dhcs-about__ic { color:var(--dhcs-brand); flex-shrink:0; display:inline-flex; } .dhcs-about__ic svg { width:20px; height:20px; } .dhcs-about h2 { font-size:14px; font-weight:700; color:var(--dhcs-brand-ink); margin:0 0 6px; } .dhcs-about p { font-size:12.5px; color:var(--dhcs-sub); line-height:1.6; margin:0; } /* County-scope banner (5150): shown when a user's SECURE view is limited to one county. */ .dhcs-scope-banner { display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:var(--dhcs-gap); background:var(--dhcs-accent-orange-bg); border:1px solid color-mix(in srgb, var(--dhcs-accent-orange-fg) 35%, transparent); border-left:3px solid var(--dhcs-accent-orange-fg); border-radius:var(--dhcs-card-radius); font-size:12.5px; line-height:1.5; color:var(--dhcs-ink); } .dhcs-scope-banner strong { color:var(--dhcs-accent-orange-fg); font-weight:700; } .dhcs-scope-banner__ic { color:var(--dhcs-accent-orange-fg); flex-shrink:0; display:inline-flex; } .dhcs-scope-banner__ic svg { width:18px; height:18px; } /* ---- 5150 body: [filters | center(2col) | rail] + bottom orgs-grid ---- */ .fifty-body { display:grid; gap:var(--dhcs-gap); grid-template-columns:1fr; align-items:start; } @media (min-width:1280px){ .fifty-body { grid-template-columns:var(--dhcs-sidebar-w) minmax(0,1fr) 264px; } } .fifty-center { display:grid; gap:var(--dhcs-gap); grid-template-columns:1fr; align-items:start; } @media (min-width:1024px){ .fifty-center { grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr); } } .fifty-col { display:flex; flex-direction:column; gap:var(--dhcs-gap); min-width:0; } .fifty-rail { display:flex; flex-direction:column; gap:var(--dhcs-gap); } .fifty-orgs { display:grid; gap:var(--dhcs-gap); grid-template-columns:1fr; margin-top:var(--dhcs-gap); align-items:start; } @media (min-width:1024px){ .fifty-orgs { grid-template-columns:minmax(0,1fr) 280px; } } /* stacked stat cards inside a panel/rail (reuse .dhcs-kpi look, tighter) */ .dhcs-stack { display:flex; flex-direction:column; gap:12px; } .dhcs-grid-2tight { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; } /* data notes + need help */ .dhcs-datanotes { background:#fbfaf5; } .dhcs-datanotes ul { margin:6px 0 0; padding-left:16px; } .dhcs-datanotes li { font-size:11px; color:#5b6b7d; line-height:1.5; margin-bottom:5px; } .dhcs-datanotes .ce { font-size:11px; color:#5b6b7d; line-height:1.5; margin-top:10px; } .dhcs-needhelp p { font-size:11.5px; color:var(--dhcs-sub); line-height:1.6; margin:0; } .dhcs-needhelp a { color:var(--dhcs-brand); font-weight:500; text-decoration:none; } .dhcs-needhelp a:hover { text-decoration:underline; } /* ---- React app: full-bleed viewport (no outer body margin, full height) ---- */ html, body { margin:0; padding:0; } body { min-height:100vh; background:var(--dhcs-page-bg); } #root { min-height:100vh; } .dhcs-page { min-height:100vh; } .dhcs-loading { min-height:100vh; } /* loading fills the screen — no white gap */ /* ---- Footer (shared, inside .dhcs-main so it follows the main layout) ---- */ .dhcs-footer { margin-top:24px; padding-top:16px; border-top:1px solid var(--dhcs-line); font-size:11.5px; color:var(--dhcs-sub); } .dhcs-footer p { font-style:italic; margin:0; line-height:1.5; } /* ---- Download report rows (icon + label + description) — shared ---- */ .dhcs-report { display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:0; } .dhcs-report + .dhcs-report { margin-top:12px; } .dhcs-report__ic { width:28px; height:28px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .dhcs-report__ic svg { width:14px; height:14px; } .dhcs-report__ic--blue { background:#eef3f9; color:var(--dhcs-brand); } .dhcs-report__ic--red { background:#fdecec; color:#d9534f; } .dhcs-report__ic--green { background:#e6f6ee; color:#1f9d57; } .dhcs-report__text { display:flex; flex-direction:column; min-width:0; } .dhcs-report__label { font-size:12.5px; color:var(--dhcs-ink); font-weight:500; line-height:1.3; } .dhcs-report:hover .dhcs-report__label { color:var(--dhcs-brand); } .dhcs-report__sub { font-size:10.5px; color:var(--dhcs-sub); line-height:1.4; margin-top:2px; } /* ---- Secure toggle (header) — lock/highlighted = secure, unlock/muted = public/login ---- */ .dhcs-secure-toggle { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); border-radius:6px; padding:2px 8px; cursor:pointer; text-decoration:none; line-height:1.5; font-family:inherit; } .dhcs-secure-toggle .ic { display:inline-flex; } .dhcs-secure-toggle .ic svg { width:12px; height:12px; } .dhcs-secure-toggle.is-on { background:#1f9d57; border-color:#1f9d57; color:#fff; box-shadow:0 0 0 2px rgba(31,157,87,.35); } /* secure: highlighted + lock */ .dhcs-secure-toggle:not(.is-on):not(.is-disabled):hover { background:rgba(255,255,255,.2); } .dhcs-secure-toggle.is-disabled { opacity:.45; cursor:default; } /* ---- Filters: fields flow into 3→2→1 columns based on the panel's own width ---- */ .dhcs-filters-panel > .dhcs-panel-body { container-type: inline-size; } .dhcs-filters-grid { display:grid; gap:12px 16px; grid-template-columns:1fr; align-items:start; } @container (min-width:460px) { .dhcs-filters-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } } @container (min-width:740px) { .dhcs-filters-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } } .dhcs-filters-grid .dhcs-field { margin-bottom:0; } /* grid gap handles spacing */ .dhcs-filters-grid .dhcs-ms, .dhcs-filters-grid .dhcs-ms__btn { width:100%; } /* fields fill their cell */ .dhcs-filters-grid + .dhcs-btn { margin-top:14px; }