/* Accessibility preferences (Settings > Accessibility, Components/Pages/Admin/Accessibility.razor).
   Stored in localStorage as "chipin.a11y" and applied as data-a11y-* attributes on <html>: by the inline bootstrap in
   App.razor before first paint, and by js/admin-accessibility.js whenever a switch changes. Grid borders live in
   admin-grid.css (the --ag-rule token); the other three preferences are here. */

/* Larger text: scales every rem-based size (Bootstrap, the admin skin, grid cells) by ~12%. */
html[data-a11y-large-text="on"] { font-size: 112.5%; }

/* Reduce motion: stops decorative animation and transitions (the OS "reduce motion" setting is honoured automatically). */
html[data-a11y-reduce-motion="on"] *,
html[data-a11y-reduce-motion="on"] *::before,
html[data-a11y-reduce-motion="on"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }

/* High contrast: darker secondary text, stronger borders, always-visible focus rings, underlined links. */
html[data-a11y-high-contrast="on"] { --ag-muted: #3b4160; --ag-line: #b9bfd3; --ag-line-strong: #9aa2bd; --ag-head: #eef0f8; --ag-hover: #e6e8f7; --ag-focus: #2f1fa8; }
html[data-a11y-high-contrast="on"][data-bs-theme="dark"] { --ag-muted: #d3d8ee; --ag-line: rgba(255, 255, 255, .28); --ag-line-strong: rgba(255, 255, 255, .42); --ag-head: #1b2236; --ag-hover: rgba(124, 106, 242, .22); --ag-focus: #d6cfff; }
html[data-a11y-high-contrast="on"] .admin-shell .text-muted,
html[data-a11y-high-contrast="on"] .admin-shell .admin-nav-section,
html[data-a11y-high-contrast="on"] .admin-shell .admin-user-label { color: var(--ag-muted) !important; }
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-headercelldiv { color: var(--ag-text); }
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-numericitem,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-first,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-prev,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-next,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-last { border-color: var(--ag-line-strong); }
html[data-a11y-high-contrast="on"] .admin-shell a:not(.btn):not(.nav-link):not(.navbar-brand):not(.e-link):not(.admin-nav-link) { text-decoration: underline; }
html[data-a11y-high-contrast="on"] .admin-shell :focus-visible { outline: 3px solid var(--ag-focus) !important; outline-offset: 2px; }
html[data-a11y-high-contrast="on"] .admin-shell .admin-nav-link { color: #14172b !important; }
html[data-a11y-high-contrast="on"][data-bs-theme="dark"] .admin-shell .admin-nav-link { color: #fff !important; }

/* ---------- The settings page itself ---------- */
.a11y-list { display: grid; }
.a11y-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem; margin: 0; border-top: 1px solid var(--ag-line); cursor: pointer; }
.a11y-row:first-child { border-top: 0; }
.a11y-row:hover { background: var(--ag-hover); }
.a11y-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: var(--ag-accent-soft); color: var(--ag-accent); font-size: 1.35rem; }
.a11y-copy { display: grid; gap: .2rem; min-width: 0; }
.a11y-title { color: var(--ag-text); font-size: 1rem; font-weight: 700; }
.a11y-desc { color: var(--ag-muted); font-size: .88rem; line-height: 1.5; }
.a11y-state { display: inline-block; margin-left: .5rem; padding: .12rem .5rem; border-radius: 999px; background: var(--ag-head); color: var(--ag-muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: .1rem; }
.a11y-row .form-check-input { width: 2.9rem; height: 1.55rem; margin: 0; cursor: pointer; }
.a11y-row .form-check-input:checked { background-color: var(--ag-accent); border-color: var(--ag-accent); }
.a11y-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; padding: .9rem 1.1rem; border-radius: .9rem; background: var(--ag-accent-soft); color: var(--ag-text); font-size: .88rem; }
.a11y-note i { flex: none; font-size: 1.2rem; color: var(--ag-accent); }
/* Live sample: a three-row grid that uses the same tokens as the real grids, so the Grid borders switch shows its effect here. */
.a11y-preview { margin-top: 1.25rem; border: 1px solid var(--ag-rule); border-radius: var(--ag-radius); background: var(--ag-surface); box-shadow: var(--ag-frame-shadow); overflow: hidden; font-variant-numeric: tabular-nums; }
.a11y-preview table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.a11y-preview th { padding: .55rem .9rem; border-bottom: 1px solid var(--ag-rule); background: var(--ag-head); color: var(--ag-muted); font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-align: left; }
.a11y-preview td { padding: .6rem .9rem; border-bottom: 1px solid var(--ag-rule); color: var(--ag-text); }
.a11y-preview tr:last-child td { border-bottom-color: transparent; }
.a11y-preview th.is-num, .a11y-preview td.is-num { text-align: right; font-weight: 600; }
.a11y-preview .is-pos { color: #16a34a; font-weight: 700; }
[data-bs-theme="dark"] .a11y-preview .is-pos { color: #4ade80; }
.a11y-preview-label { margin: 1.25rem 0 -.75rem; color: var(--ag-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 575.98px) {
    .a11y-row { grid-template-columns: minmax(0, 1fr) auto; }
    .a11y-icon { display: none; }
}