/* ================================================================
VITALITEK ACCESSIBILITY LAYER
FR-007 Design System — Enhanced by Agent 3 (Dr. Kenji Yamamoto)
This file contains all accessibility-critical styles:
- Focus management
- Skip navigation
- Screen reader utilities
- Reduced motion
- High contrast mode
- Touch targets
- Non-color state indicators
- Error state enhancements
- Keyboard navigation patterns
- Sidebar accessibility
- Data table accessibility
- Form validation accessibility
- Loading and progress accessibility
Import AFTER design-tokens.css and vitalitek-components.css.
================================================================ */
/* ============================================
SKIP NAVIGATION
============================================ */
.vtk-skip-link {
position: absolute;
top: -100%;
left: 1rem;
z-index: var(--z-skip-link, 10000);
padding: 1rem 1.5rem;
background: var(--color-surface-primary);
color: var(--color-text-primary);
border: 3px solid var(--color-focus-ring);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--font-weight-semibold);
text-decoration: none;
box-shadow: var(--shadow-lg);
transition: top 0.15s ease-out;
}
.vtk-skip-link:focus {
top: 1rem;
}
/*
* Multiple skip links for complex layouts (admin dashboard).
* Allows users to jump to: main content, sidebar nav, or search.
*/
.vtk-skip-links {
position: absolute;
top: -100%;
left: 0;
z-index: var(--z-skip-link, 10000);
display: flex;
gap: 0.5rem;
padding: 0.5rem;
}
.vtk-skip-links:focus-within {
top: 0;
}
/* ============================================
FOCUS MANAGEMENT
============================================ */
/*
* Base focus-visible for all interactive elements.
* Uses outline (not box-shadow) for Windows High Contrast compatibility.
*/
:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
/*
* Remove default focus ring for mouse/touch users.
* :focus-visible only triggers for keyboard navigation.
*/
:focus:not(:focus-visible) {
outline: none;
}
/*
* Form inputs get tighter focus treatment.
*/
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 0;
box-shadow: 0 0 0 1px var(--color-focus-ring-inner);
}
/*
* Buttons and links get standard ring.
*/
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="treeitem"]:focus-visible,
[role="gridcell"]:focus-visible,
[role="row"]:focus-visible,
[role="switch"]:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 2px;
}
/*
* Focus-within for composite widgets (autocomplete, combobox).
*/
.vtk-composite-widget:focus-within {
box-shadow: 0 0 0 2px var(--color-focus-ring-subtle);
border-radius: var(--radius-md);
}
/*
* Enhanced focus indicator for sidebar navigation items.
* Sidebar links need inset focus to avoid overflow clipping.
*/
.vt-sidebar__link:focus-visible,
.vt-sidebar__item:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: -3px;
border-radius: var(--radius-md);
}
/*
* Roving tabindex support for composite widgets.
* Only the active element within the group receives focus.
*/
[role="tablist"] [role="tab"]:not([tabindex="0"]):not([aria-selected="true"]) {
/* Tabs not in active focus use tabindex="-1" set by JS */
}
/*
* Focus indicator for table rows navigated via keyboard.
*/
.vt-table tbody tr:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: -3px;
}
/*
* Focus for pagination navigation.
*/
[role="navigation"][aria-label*="pagination"] a:focus-visible,
[role="navigation"][aria-label*="pagination"] button:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 2px;
z-index: 1;
position: relative;
}
/* ============================================
VISUALLY HIDDEN (Screen Reader Only)
============================================ */
/*
* Hidden visually but accessible to screen readers and search engines.
* Use for: labels with visual equivalents, status announcements,
* additional context for icon-only buttons.
*/
.vtk-visually-hidden,
.vtk-sr-only,
.vt-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*
* Becomes visible when focused (for skip links and similar).
*/
.vtk-visually-hidden--focusable:focus,
.vtk-visually-hidden--focusable:active {
position: static;
width: auto;
height: auto;
padding: inherit;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
/* ============================================
LIVE REGION CONTAINERS
============================================ */
/*
* Toast notification container (polite announcements).
*/
.vtk-toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: var(--z-toast, 500);
display: flex;
flex-direction: column;
gap: var(--space-xs);
max-width: 24rem;
}
/*
* Alert region (assertive announcements for errors).
* Can be visually hidden if the error is shown inline.
*/
.vtk-sr-only-container {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*
* Status region for page-level updates (e.g., "Showing 10 of 42").
* Uses role="status" and aria-live="polite".
*/
.vt-status-region {
/* Can be visible or visually hidden depending on context */
}
.vt-status-region[aria-live] {
/* Ensure the region exists in the DOM before content changes */
}
/* ============================================
NON-COLOR STATE INDICATORS
============================================
Critical for WCAG 1.4.1 (Use of Color):
Color must NOT be the sole indicator of state.
Every semantic color MUST have a secondary indicator:
icon, text, pattern, shape, or border.
============================================ */
/*
* Error inputs: red border + left accent bar + icon space.
* The border-left acts as a non-color secondary indicator.
*/
.vt-input--error,
.vt-textarea--error,
.vt-select--error {
border-color: var(--color-error);
border-left-width: 4px;
}
/*
* Success inputs: green border + left accent bar.
*/
.vt-input--success,
.vt-textarea--success,
.vt-select--success {
border-color: var(--color-success);
border-left-width: 4px;
}
/*
* Error field messages: icon prefix ensures non-color indication.
* Always include an error icon SVG alongside the text.
*/
.vt-field__error::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 4px;
flex-shrink: 0;
/* Triangle exclamation mark via CSS shape */
background: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8 1L1 14h14L8 1zm0 3.5l4.5 8h-9L8 4.5zM7.25 7v3h1.5V7h-1.5zM7.25 11v1.5h1.5V11h-1.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8 1L1 14h14L8 1zm0 3.5l4.5 8h-9L8 4.5zM7.25 7v3h1.5V7h-1.5zM7.25 11v1.5h1.5V11h-1.5z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/*
* Success field messages: checkmark icon prefix.
*/
.vt-field__success::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 4px;
flex-shrink: 0;
background: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/*
* Badge dots: ensure badges have text AND color.
* The dot is supplementary, never the sole indicator.
*/
.vt-badge__dot {
width: 6px;
height: 6px;
border-radius: var(--radius-full, 9999px);
flex-shrink: 0;
}
.vt-badge--success .vt-badge__dot { background: currentColor; }
.vt-badge--warning .vt-badge__dot { background: currentColor; }
.vt-badge--error .vt-badge__dot { background: currentColor; }
.vt-badge--info .vt-badge__dot { background: currentColor; }
/*
* Table row status: use left border as non-color indicator.
*/
.vt-table tr[data-status="error"],
.vt-table tr[data-status="overdue"] {
border-left: 4px solid var(--color-error);
}
.vt-table tr[data-status="success"],
.vt-table tr[data-status="paid"] {
border-left: 4px solid var(--color-success);
}
.vt-table tr[data-status="warning"],
.vt-table tr[data-status="pending"] {
border-left: 4px solid var(--color-warning);
}
/*
* Sorted column header: underline + color, not color alone.
*/
.vt-table__sortable--asc,
.vt-table__sortable--desc {
text-decoration: underline;
text-decoration-color: var(--color-primary);
text-underline-offset: 3px;
}
/*
* Required field indicator: asterisk with accessible label.
* The asterisk alone is insufficient -- always use aria-required="true"
* on the input element as well.
*/
.vt-field__label--required::after {
content: ' *';
color: var(--color-error);
/* Screen reader hint is handled by aria-required on the input */
}
/*
* Disabled state: use opacity + pattern, not color alone.
*/
.vt-btn:disabled,
.vt-btn--disabled,
.vt-input:disabled,
.vt-select:disabled,
.vt-textarea:disabled {
opacity: 0.45;
cursor: not-allowed;
/* Striped background pattern as secondary indicator */
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
rgba(0, 0, 0, 0.03) 4px,
rgba(0, 0, 0, 0.03) 8px
);
}
/* ============================================
FORM VALIDATION ACCESSIBILITY
============================================ */
/*
* Error summary panel: appears at top of form when
* server-side validation returns errors.
* Structure:
*
*
There are 3 errors in this form
*
*
* with visually muted style but screen reader accessible.
*/
.vt-sidebar__heading {
font-size: var(--text-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-tertiary, #6B7280);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
margin-top: var(--space-md, 1rem);
}
/*
* Collapsed sidebar: icon-only mode needs aria-label on links.
* Tooltip appears on hover/focus.
*/
.vt-sidebar--collapsed .vt-sidebar__link {
position: relative;
}
.vt-sidebar--collapsed .vt-sidebar__link-text {
/* visually hidden but still in the accessible name */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.vt-sidebar--collapsed .vt-sidebar__link:hover::after,
.vt-sidebar--collapsed .vt-sidebar__link:focus-visible::after {
content: attr(aria-label);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
padding: 4px 8px;
background: var(--color-text-primary, #1A1A2E);
color: var(--color-text-on-dark, #F0F0F5);
font-size: var(--text-xs, 0.75rem);
font-weight: var(--font-weight-medium, 500);
border-radius: var(--radius-sm, 4px);
white-space: nowrap;
z-index: var(--z-tooltip, 550);
pointer-events: none;
box-shadow: var(--shadow-md);
}
/* ============================================
KEYBOARD NAVIGATION PATTERNS
============================================ */
/*
* Arrow key navigation indicator for composite widgets.
* Shows a subtle instruction when the widget gains focus.
*/
[role="tablist"]::after,
[role="menu"]::after,
[role="listbox"]::after {
/* Instruction is provided via aria-describedby in HTML */
}
/*
* Active descendant highlighting for listbox/combobox patterns.
*/
[role="option"][aria-selected="true"] {
background: var(--color-primary-light, #F5E0EB);
font-weight: var(--font-weight-medium, 500);
}
[role="option"]:hover,
[role="option"].vt-option--focused {
background: var(--color-surface-tertiary, #F0F0F5);
}
/*
* Combobox autocomplete dropdown keyboard navigation.
*/
[role="listbox"] [role="option"] {
padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
cursor: pointer;
}
[role="listbox"] [role="option"]:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: -2px;
}
/* ============================================
DATA TABLE ACCESSIBILITY
============================================ */
/*
* Table caption: provides an accessible name for the table.
* Can be visually styled or hidden.
*/
.vt-table caption {
text-align: left;
padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
font-size: var(--text-sm, 0.8125rem);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-secondary, #4A4A68);
}
.vt-table caption.vt-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
/*
* Selectable table rows: checkbox column styling.
* Ensures the checkbox is part of the accessible row label.
*/
.vt-table .vt-table__checkbox-cell {
width: 44px;
text-align: center;
padding: var(--space-xs, 0.5rem);
}
.vt-table .vt-table__checkbox-cell input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--color-primary, #C8457E);
}
/*
* Row selection highlight: background + left border.
*/
.vt-table tbody tr[aria-selected="true"] {
background: var(--color-primary-light, #F5E0EB);
border-left: 3px solid var(--color-primary, #C8457E);
}
/*
* Sortable column: keyboard instruction hint.
*/
.vt-table__sortable {
cursor: pointer;
}
.vt-table__sortable:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: -3px;
}
/*
* Table action column: ensure action buttons have
* sufficient touch targets and don't crowd each other.
*/
.vt-table__actions {
display: flex;
gap: var(--space-xs, 0.5rem);
align-items: center;
}
.vt-table__actions .vt-btn--icon {
min-width: 32px;
min-height: 32px;
}
@media (max-width: 48rem) {
.vt-table__actions .vt-btn--icon {
min-width: 44px;
min-height: 44px;
}
}
/* ============================================
REDUCED MOTION
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Ensure toasts appear instantly without slide */
.vt-toast {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.vt-toast--exiting {
animation: none !important;
display: none;
}
/* Modal appears instantly */
.vt-modal-backdrop--open .vt-modal {
transform: none !important;
}
/* Card hover: disable lift animation */
.vt-card:hover {
transform: none !important;
}
/* Button press: disable scale animation */
.vt-btn:active {
transform: none !important;
}
/* Accordion: instant open/close */
.vt-accordion__content {
transition: none !important;
}
/* Spinner: keep spinning for loading state, just faster */
@keyframes vt-spin-reduced {
to { transform: rotate(360deg); }
}
.vt-btn--loading::after {
animation: vt-spin-reduced 1.5s linear infinite !important;
animation-duration: 1.5s !important;
}
/* Progress bar animations */
.vt-toast__progress {
animation: none !important;
width: 0 !important;
}
/* Tab indicator: instant position */
.vt-tabs__indicator {
transition: none !important;
}
/* Nav glassmorphism: instant transition */
.vt-nav {
transition: none !important;
}
/* Hero gradient text: ensure it is still visible */
.vt-hero__title--gradient {
/* Gradient text is decoration, not motion, so no change needed */
}
}
/* ============================================
HIGH CONTRAST MODE (Windows)
============================================ */
@media (forced-colors: active) {
/*
* Ensure structural indicators remain visible
* when system colors override custom colors.
*/
.vtk-status-badge,
.vt-badge {
border: 2px solid ButtonText;
}
.vtk-btn,
.vt-btn {
border: 2px solid ButtonText;
}
.vtk-btn--primary,
.vt-btn--primary {
background: Highlight;
color: HighlightText;
border-color: Highlight;
}
.vt-btn--destructive,
.vt-btn--danger {
border-color: ButtonText;
/* forced-colors overrides background, so border is the indicator */
}
.vtk-card,
.vt-card {
border: 1px solid ButtonText;
}
:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
}
/* Ensure SVG icons are visible */
svg {
forced-color-adjust: auto;
}
/* Links must remain distinguishable */
a {
color: LinkText;
text-decoration: underline;
}
/* Form inputs need visible borders */
input,
select,
textarea {
border: 1px solid ButtonText;
}
/* Error inputs need thicker border */
.vt-input--error,
.vt-textarea--error,
.vt-select--error {
border-width: 3px;
}
/* Table borders */
th,
td {
border: 1px solid ButtonText;
}
/* Toggle switch: ensure track is visible */
.vt-toggle__track {
border: 2px solid ButtonText;
}
.vt-toggle__input:checked + .vt-toggle__track {
background: Highlight;
border-color: Highlight;
}
/* Sidebar active item */
.vt-sidebar__link[aria-current="page"],
.vt-sidebar__link--active {
border-left: 4px solid Highlight;
background: transparent;
color: HighlightText;
}
/* Disabled striped pattern: replace with solid border */
.vt-btn:disabled,
.vt-input:disabled,
.vt-select:disabled,
.vt-textarea:disabled {
background-image: none;
border-style: dashed;
opacity: 1;
color: GrayText;
}
/* Modal backdrop */
.vt-modal-backdrop--open {
background: rgba(0, 0, 0, 0.5);
}
.vt-modal {
border: 2px solid ButtonText;
}
/* Alert borders */
.vt-alert {
border-width: 2px;
border-style: solid;
border-color: ButtonText;
}
/* Error summary */
.vt-error-summary {
border: 3px solid ButtonText;
}
/* Pagination active */
.vt-pagination__btn--active {
background: Highlight;
color: HighlightText;
border-color: Highlight;
}
/* Tabs active indicator */
.vt-tabs__tab[aria-selected="true"] {
border-bottom: 3px solid Highlight;
}
/* Accordion expanded state */
.vt-accordion__trigger[aria-expanded="true"] {
border-left: 4px solid Highlight;
}
/* Selected table row */
.vt-table tbody tr[aria-selected="true"] {
outline: 2px solid Highlight;
outline-offset: -2px;
}
}
/* ============================================
TOUCH TARGETS
============================================ */
/*
* Desktop: comfortable mouse target sizes.
*/
.vtk-btn,
.vtk-icon-btn,
.vt-btn {
min-height: 2.5rem; /* 40px */
}
/*
* Tablet: WCAG AA minimum (44px).
*/
@media (max-width: 64rem) {
.vtk-btn,
.vtk-icon-btn,
.vtk-nav-link,
.vtk-filter-control,
.vt-btn,
.vt-nav__link,
.vt-pagination__btn {
min-height: 2.75rem; /* 44px */
}
input,
select,
textarea {
min-height: 2.75rem;
}
/* Ensure sidebar links have adequate touch targets */
.vt-sidebar__link {
min-height: 2.75rem;
display: flex;
align-items: center;
}
}
/*
* Mobile: WCAG AAA target (48px).
*/
@media (max-width: 48rem) {
.vtk-btn,
.vtk-icon-btn,
.vt-btn {
min-height: 3rem; /* 48px */
}
/* Ensure spacing between adjacent touch targets */
.vtk-action-group > * + *,
.vt-btn-group > * + * {
margin-left: var(--space-xs);
}
/* Mobile nav links need full-width touch targets */
.vt-nav__mobile-link {
min-height: 3rem;
display: flex;
align-items: center;
}
/* Checkbox and radio: increase touch area */
.vt-checkbox,
.vt-radio {
min-height: 2.75rem;
display: inline-flex;
align-items: center;
}
.vt-checkbox__input,
.vt-radio__input {
width: 22px;
height: 22px;
}
/* Table action buttons on mobile */
.vt-table__actions .vt-btn--icon {
min-width: 44px;
min-height: 44px;
}
}
/*
* Minimum touch target spacing: 8px gap between interactive
* elements to prevent accidental activation (WCAG 2.5.8).
*/
.vt-action-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.vt-action-bar > * {
/* Ensure each child has minimum target area */
}
/* ============================================
LOADING AND PROGRESS ACCESSIBILITY
============================================ */
/*
* Skeleton loading states: indicate loading without color alone.
* Use aria-busy="true" on the container.
*/
[aria-busy="true"] {
cursor: progress;
}
.vt-skeleton {
background: linear-gradient(
90deg,
var(--color-surface-tertiary, #F0F0F5) 25%,
var(--color-surface-secondary, #F8F9FC) 50%,
var(--color-surface-tertiary, #F0F0F5) 75%
);
background-size: 200% 100%;
animation: vt-skeleton-pulse 1.5s ease-in-out infinite;
border-radius: var(--radius-sm, 4px);
color: transparent !important;
user-select: none;
pointer-events: none;
}
@keyframes vt-skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.vt-skeleton {
animation: none !important;
/* Static loading state instead */
background: var(--color-surface-tertiary, #F0F0F5);
}
}
.vt-skeleton--text {
height: 1em;
width: 80%;
margin-bottom: 0.5em;
}
.vt-skeleton--heading {
height: 1.5em;
width: 60%;
margin-bottom: 0.75em;
}
.vt-skeleton--avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.vt-skeleton--button {
height: 40px;
width: 120px;
border-radius: var(--radius-md, 8px);
}
/*
* Progress indicator: accessible linear progress bar.
* Use role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax.
*/
.vt-progress {
width: 100%;
height: 8px;
background: var(--color-surface-tertiary, #F0F0F5);
border-radius: var(--radius-full, 9999px);
overflow: hidden;
}
.vt-progress__bar {
height: 100%;
background: var(--color-primary, #C8457E);
border-radius: var(--radius-full, 9999px);
transition: width 0.3s ease-out;
}
.vt-progress--success .vt-progress__bar {
background: var(--color-success, #177B4B);
}
.vt-progress--warning .vt-progress__bar {
background: var(--color-warning, #92610A);
}
.vt-progress--error .vt-progress__bar {
background: var(--color-error, #C42B2B);
}
/* ============================================
DARK MODE IMAGE TREATMENT
============================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) img:not(.vtk-logo):not([data-no-dark-adjust]) {
filter: brightness(0.9);
}
:root:not([data-theme="light"]) .vtk-avatar {
box-shadow: 0 0 0 2px var(--color-border);
}
}
[data-theme="dark"] img:not(.vtk-logo):not([data-no-dark-adjust]) {
filter: brightness(0.9);
}
[data-theme="dark"] .vtk-avatar {
box-shadow: 0 0 0 2px var(--color-border);
}
/* ============================================
ICONS USE currentColor
(Automatically adapt to text color in dark mode)
============================================ */
.vtk-icon {
fill: currentColor;
stroke: currentColor;
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
.vtk-icon--sm {
width: 1rem;
height: 1rem;
}
.vtk-icon--lg {
width: 1.5rem;
height: 1.5rem;
}
/* ============================================
SUPERBILL BUILDER ACCESSIBILITY
============================================
The Superbill Builder is the most critical workflow.
These styles ensure it meets healthcare-grade accessibility.
============================================ */
/*
* Code search autocomplete: keyboard-navigable listbox.
*/
.vt-code-search[role="combobox"] {
position: relative;
}
.vt-code-search__results[role="listbox"] {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var(--z-dropdown, 100);
max-height: 300px;
overflow-y: auto;
background: var(--color-surface-primary, #FFFFFF);
border: 1px solid var(--color-border, #D1D5DB);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-lg);
}
.vt-code-search__results [role="option"] {
padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.vt-code-search__results [role="option"][aria-selected="true"] {
background: var(--color-primary-light, #F5E0EB);
}
.vt-code-search__results [role="option"]:hover {
background: var(--color-surface-tertiary, #F0F0F5);
}
/*
* Line item list: keyboard reorderable.
* Uses aria-roledescription="reorderable list" on container.
*/
.vt-line-items[aria-roledescription] {
/* Container for superbill line items */
}
.vt-line-item {
display: flex;
align-items: center;
gap: var(--space-xs, 0.5rem);
padding: var(--space-xs, 0.5rem);
border: 1px solid var(--color-border-subtle, #E5E7EB);
border-radius: var(--radius-md, 8px);
margin-bottom: var(--space-xs, 0.5rem);
background: var(--color-surface-primary, #FFFFFF);
}
.vt-line-item:focus-within {
box-shadow: 0 0 0 2px var(--color-focus-ring-subtle, rgba(26, 107, 255, 0.25));
border-color: var(--color-focus-ring, #1A6BFF);
}
/*
* Drag handle: has aria-label and keyboard instructions.
*/
.vt-line-item__drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
cursor: grab;
color: var(--color-text-tertiary, #6B7280);
flex-shrink: 0;
}
.vt-line-item__drag-handle:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 0;
border-radius: 2px;
}
/*
* Running total: live region that updates as items change.
*/
.vt-superbill-total {
font-size: var(--text-xl, 1.25rem);
font-weight: var(--font-weight-bold, 700);
padding: var(--space-md, 1rem);
border-top: 2px solid var(--color-border, #D1D5DB);
text-align: right;
}
/*
* ICD/CPT code display: monospace for readability.
*/
.vt-medical-code {
font-family: var(--font-family-mono);
font-size: var(--text-sm, 0.8125rem);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-secondary, #4A4A68);
letter-spacing: 0.02em;
white-space: nowrap;
}
/* ============================================
PRINT ACCESSIBILITY
============================================ */
@media print {
/* Ensure all non-color indicators print correctly */
.vt-field--error {
border-left: 3px solid #000 !important;
}
.vt-error-summary {
border: 2px solid #000 !important;
border-left-width: 6px !important;
}
/* Status badges print with text, which is the primary indicator */
.vt-badge {
border: 1px solid #000 !important;
}
/* Table row status borders */
.vt-table tr[data-status] {
border-left: 4px solid #000 !important;
}
/* Skeleton loading: show placeholder text */
.vt-skeleton {
background: #f0f0f0 !important;
animation: none !important;
}
/* Hide loading spinners */
.vt-btn--loading::after {
display: none !important;
}
}