@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); html, body { font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--iats-bg-body); color: var(--iats-text-primary); } a, .btn-link { color: var(--iats-text-link); } .btn-primary { --bs-btn-color: var(--iats-btn-primary-text); --bs-btn-bg: var(--iats-btn-primary-bg); --bs-btn-border-color: var(--iats-btn-primary-border); --bs-btn-hover-color: var(--iats-btn-primary-text); --bs-btn-hover-bg: var(--iats-btn-primary-hover-bg); --bs-btn-hover-border-color: var(--iats-btn-primary-hover-border); --bs-btn-active-color: var(--iats-btn-primary-text); --bs-btn-active-bg: var(--iats-btn-primary-hover-bg); --bs-btn-active-border-color: var(--iats-btn-primary-hover-border); --bs-btn-focus-shadow-rgb: none; --bs-btn-disabled-color: var(--iats-btn-primary-text); --bs-btn-disabled-bg: var(--iats-btn-primary-bg); --bs-btn-disabled-border-color: var(--iats-btn-primary-border); } .btn-primary:focus, .btn-primary:active:focus { box-shadow: 0 0 0 0.1rem var(--iats-bg-body), 0 0 0 0.25rem var(--iats-btn-primary-hover-border); } .btn-secondary { --bs-btn-color: var(--iats-btn-secondary-text); --bs-btn-bg: var(--iats-btn-secondary-bg); --bs-btn-border-color: var(--iats-btn-secondary-border); --bs-btn-hover-color: var(--iats-brand-primary); --bs-btn-hover-bg: var(--iats-btn-secondary-hover-bg); --bs-btn-hover-border-color: var(--iats-brand-primary); --bs-btn-active-color: var(--iats-brand-primary); --bs-btn-active-bg: var(--iats-btn-secondary-hover-bg); --bs-btn-active-border-color: var(--iats-brand-primary); } /* Form controls: remap Bootstrap's --bs-body-color/--bs-body-bg/--bs-border-color to --iats-input-* tokens at the .form-control/.form-select selector itself, mirroring the .btn-primary pattern above. Bootstrap's structural styling stays intact; only the variables it reads for theming are rebound. State pseudos that read hardcoded values (focus border, placeholder, disabled) get direct overrides. */ .form-control, .form-select { --bs-body-color: var(--iats-input-text); --bs-body-bg: var(--iats-input-bg); --bs-border-color: var(--iats-input-border); } .form-control::placeholder { color: var(--iats-input-placeholder); } .form-control:focus, .form-select:focus { border-color: var(--iats-input-focus-border); } .form-control:disabled, .form-select:disabled { --bs-secondary-bg: var(--iats-bg-surface-sunken); color: var(--iats-text-tertiary); } .form-select option { background-color: var(--iats-input-bg); color: var(--iats-input-text); } /* Chrome/Edge autofill applies non-overrideable -webkit-text-fill-color and a yellow/white box-shadow inset on autofilled fields, ignoring our color and background-color rules. Counter both so autofilled values blend into the themed input surface. */ .form-control:-webkit-autofill, .form-control:-webkit-autofill:hover, .form-control:-webkit-autofill:focus, .form-control:-webkit-autofill:active { -webkit-text-fill-color: var(--iats-input-text); -webkit-box-shadow: 0 0 0 1000px var(--iats-input-bg) inset; caret-color: var(--iats-input-text); transition: background-color 5000s ease-in-out 0s; } /* Dark-mode tweaks to Bootstrap utilities. Both rules chain an ancestor attribute on with a descendant Bootstrap class — scoped CSS can't express that (since sits outside every component's scope), so they live globally and benefit every consumer of these primitives. */ /* Bootstrap's .btn-close X is a baked-in dark SVG; flip it to light in dark mode using Bootstrap's own --bs-btn-close-white-filter (invert + grayscale + brightness). */ [data-theme-mode="dark"] .btn-close { filter: var(--bs-btn-close-white-filter); } /* Bootstrap's form-select chevron is a baked-in dark SVG via --bs-form-select-bg-img; swap the whole data URI for a light-stroke variant in dark mode. */ [data-theme-mode="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--iats-input-focus-ring); } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--iats-input-valid); } .invalid { outline: 1px solid var(--iats-input-invalid); } .validation-message { color: var(--iats-input-invalid); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: var(--iats-border-input); } /* Confidentiality Agreement Modal - Window sizing */ smart-window { width: 90vw !important; height: 90vh !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; border-radius: 12px !important; overflow: hidden; } smart-window .smart-header { display: none !important; } smart-button, smart-button button { background: var(--iats-accent-primary) !important; color: var(--iats-text-inverse) !important; border: 1px solid var(--iats-accent-primary) !important; border-radius: 6px !important; padding: 0.35rem 1.25rem !important; font-size: 0.8rem !important; cursor: pointer; transition: all 0.2s; } smart-button:hover, smart-button:hover button { background: var(--iats-accent-primary-hover) !important; border-color: var(--iats-accent-primary-hover) !important; } smart-button.btn-agreement-cancel { border: 1px solid var(--iats-border-default) !important; background: var(--iats-bg-surface) !important; color: var(--iats-text-secondary) !important; padding: 0.5rem 2rem !important; border-radius: 6px !important; font-size: 0.95rem !important; cursor: pointer; transition: all 0.2s; } smart-button.btn-agreement-cancel:hover { background: var(--iats-bg-surface-raised) !important; border-color: var(--iats-border-input) !important; } smart-button.btn-agreement-accept { background: var(--iats-accent-primary) !important; color: var(--iats-text-inverse) !important; border: 1px solid var(--iats-accent-primary) !important; padding: 0.5rem 2rem !important; border-radius: 6px !important; font-size: 0.95rem !important; cursor: pointer; transition: all 0.2s; } smart-button.btn-agreement-accept:hover { background: var(--iats-accent-primary-hover) !important; border-color: var(--iats-accent-primary-hover) !important; } @media (max-width: 768px) { smart-window { width: 95vw !important; height: 95vh !important; } smart-button.btn-agreement-cancel, smart-button.btn-agreement-accept { width: 100% !important; text-align: center !important; } } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* =========================================================================== IgniteATS reusable component classes Token-driven primitives promoted from feature components so they can be shared. Every color resolves through --iats-* tokens, so these track the active brand theme and light/dark mode. Loaded after Bootstrap, so the property overrides below (e.g. .iats-icon-btn padding) win by source order. =========================================================================== */ /* Chip / badge — outlined element on a surface. Add --accent or --danger for text color, --square for a rounded-rectangle instead of a pill. */ .iats-chip { background: var(--iats-bg-surface); border: 1px solid var(--iats-border-default); color: var(--iats-text-primary); border-radius: var(--iats-radius-pill); padding: 0.2rem 0.8rem; } .iats-chip--square { border-radius: var(--iats-radius-md); } .iats-chip--accent { color: var(--iats-content-color); } .iats-chip--danger { color: var(--iats-status-error-text); } .iats-chip--warning { color: var(--iats-status-warning-text); } /* Panel — raised surface card (background, border, radius, shadow only; callers own their padding). */ .iats-panel { background: var(--iats-bg-surface); border: 1px solid var(--iats-border-light); border-radius: var(--iats-radius-lg); box-shadow: var(--iats-shadow-sm); } /* Panel section — a labelled group inside an .iats-panel: header padding, an accent header label, and a leading 1.25rem icon. Per-section icon color is the consumer's choice (set via a token-driven modifier class on the icon element). */ .iats-panel-section { padding: 0.75rem 1rem 0.25rem; } .iats-panel-section__label { color: var(--iats-content-color); } .iats-panel-section__icon { font-size: 1.25rem; line-height: 1; } /* List row — rounded surface for items in a vertical list. */ .iats-list-row { background: var(--iats-bg-surface-raised); border-radius: var(--iats-radius-md); } /* Square icon button — compose with Bootstrap .btn (.btn .btn-primary .iats-icon-btn). */ .iats-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; } /* Compact icon button — the 24px row chevron from the IATS-163 widget designs. Bootstrap's default .btn radius (6px) already matches. */ .iats-icon-btn--sm { width: 24px; height: 24px; font-size: 0.8rem; line-height: 1; } /* Name cell — patient name in a raised chip with an optional sub line (payer) centered beneath it, per the IATS-163 widget row designs. */ .iats-name-cell { display: inline-flex; flex-direction: column; align-items: center; } .iats-name-chip { background: var(--iats-bg-surface); border-radius: var(--iats-radius-md); box-shadow: var(--iats-shadow-sm); padding: 0.15rem 1rem; text-align: center; } /* Chip variant for surfaces that are already raised (e.g. zebra rows). */ .iats-name-chip--raised { background: var(--iats-bg-surface-raised); } .iats-name-cell__sub { color: var(--iats-text-tertiary); } /* Stacked field — bold brand-colored label over a muted value ("Facility:" / "Test Facility"). Alignment is the caller's choice (add text-center when the design centers the pair). */ .iats-stacked-field { display: flex; flex-direction: column; } .iats-stacked-field__label { color: var(--iats-field-label-text); } .iats-stacked-field__value { color: var(--iats-text-tertiary); } /* Status flag — leading icon + short colored status text at the end of a widget row ("0 Visits Remaining", "AP due in 2 Visits"). */ .iats-status-flag { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: var(--iats-font-weight-medium); white-space: nowrap; } .iats-status-flag--error { color: var(--iats-status-flag-error); } .iats-status-flag--warning { color: var(--iats-status-flag-warning); } .iats-status-flag--info { color: var(--iats-status-flag-info); } /* Quiet link — undecorated until hover/focus. Base color comes from the global `a` rule; this only manages the underline + hover color. */ .iats-link-hover { text-decoration: none; } .iats-link-hover:hover, .iats-link-hover:focus { color: var(--iats-text-link-hover); text-decoration: underline; } /* Info bar — inline info/filter banner with a muted leading icon. */ .iats-info-bar { background: var(--iats-bg-surface-raised); color: var(--iats-text-primary); border-radius: var(--iats-radius-md); min-height: 48px; } .iats-info-bar .bi { color: var(--iats-text-secondary); font-size: 1.15rem; }