/* * a11y-contrast.css — WCAG AA contrast fixes for the admin UI (light theme only). * * Loaded last in so it wins over both Bootstrap and Tabler. Scoped to * .main-content so the dark sidebar (light text on #111) is never affected. * Contrast ratios are stated against white (#fff), the worst case; cards on the * cream body (#F2F1ED) are easier still. */ /* 2 & 3. Muted / secondary text + stat-card labels + card subtitles. #5b636d ≈ 5.2:1 on white (was #6b7280 ≈ 4.4:1). Still clearly "muted" against the #1a1a1a body text, but now passes AA for small text. */ .main-content .text-muted, .main-content .text-secondary, .main-content small.text-muted, .main-content .card-subtitle, .main-content .card-title-desc, .main-content .stat-bar .stat-label, .main-content .datagrid-title, .main-content .page-pretitle, .main-content .form-text, .main-content .form-hint { color: #5b636d !important; } /* 1. Table column headers → dark + semibold. #3f454d ≈ 9:1. */ .main-content .table thead th, .main-content table thead th, .main-content .card-table thead th { color: #3f454d !important; font-weight: 600 !important; } /* 4. Inputs: entered / selected value text is near-black; placeholders stay lighter (distinct) but readable. Placeholder #626973 ≈ 4.6:1. */ .main-content .form-control, .main-content .form-select { color: #1f2937 !important; } .main-content .form-control::placeholder, .main-content textarea::placeholder { color: #626973 !important; opacity: 1; /* Firefox dims placeholders by default */ } /* 5. Card / input / table borders → ≥3:1. #8c939b ≈ 3.1:1 (was ~#e5e7eb ≈ 1.2:1). */ .main-content { --bs-border-color: #8c939b; --bs-border-color-translucent: #8c939b; --tblr-border-color: #8c939b; --tblr-border-color-translucent: #8c939b; --border: #8c939b; } .main-content .card, .main-content .form-control, .main-content .form-select, .main-content .input-group-text, .main-content .dropdown-menu, .main-content .list-group-item, .main-content .table > :not(caption) > * > * { border-color: #8c939b !important; } /* 6. Orange accent used as TEXT → darker so it passes AA even at normal size. #9c5200 ≈ 5.8:1 (brand #b86300 is 4.35:1 — fine for large text but tight for small). Buttons keep the brand orange (they set their own bg/fg). */ .main-content .text-primary, .main-content a.text-primary { color: #9c5200 !important; } /* Clickable stat/KPI tiles — anchor tiles (dashboard) and data-href tiles (list/detail pages). One hover treatment for both. */ .main-content a.stat-tile, .main-content .stat-tile[data-href] { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .main-content a.stat-tile:hover, .main-content .stat-tile[data-href]:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); text-decoration: none; }