/* BetterDesk Console - Accessibility Preferences */

:root {
    --bd-a11y-font-scale: 1;
    --bd-a11y-line-height: var(--line-height);
    --bd-a11y-letter-spacing: 0em;
    --bd-a11y-word-spacing: 0em;
    --bd-a11y-visual-filter: none;
}

/* Keep root font-size stable so sidebar/navbar offsets (px + --sidebar-current-width) stay aligned */
html {
    font-size: 16px;
}

/* Pin shell layout dimensions when any preference is active */
html[data-a11y-active="true"] {
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 64px;
    --navbar-height: 60px;
}

/* Scale typography inside content regions only — not the app chrome */
html[data-a11y-font-scaled="true"] .main-content,
html[data-a11y-font-scaled="true"] .sidebar-flyout,
html[data-a11y-font-scaled="true"] .bd-a11y-modal,
html[data-a11y-font-scaled="true"] .navbar-breadcrumb {
    --font-size-xs: calc(0.75rem * var(--bd-a11y-font-scale, 1));
    --font-size-sm: calc(0.875rem * var(--bd-a11y-font-scale, 1));
    --font-size-md: calc(1rem * var(--bd-a11y-font-scale, 1));
    --font-size-lg: calc(1.125rem * var(--bd-a11y-font-scale, 1));
    --font-size-xl: calc(1.25rem * var(--bd-a11y-font-scale, 1));
    --font-size-2xl: calc(1.5rem * var(--bd-a11y-font-scale, 1));
    --font-size-3xl: calc(2rem * var(--bd-a11y-font-scale, 1));
}

html[data-a11y-font-scaled="true"] .sidebar-rail-btn .material-icons {
    font-size: calc(22px * var(--bd-a11y-font-scale, 1));
}

/* UX 3.5 keeps its chrome geometry stable, but navigation needs to remain
   readable when the operator chooses a larger type scale. */
html[data-a11y-font-scaled="true"] .ux35-sidebar-item,
html[data-a11y-font-scaled="true"] .ux35-sidebar-user-name {
    font-size: calc(13px * var(--bd-a11y-font-scale, 1));
}

html[data-a11y-font-scaled="true"] .ux35-sidebar-heading,
html[data-a11y-font-scaled="true"] .ux35-sidebar-user-role {
    font-size: calc(11px * var(--bd-a11y-font-scale, 1));
}

html[data-a11y-active="true"] .main-content,
html[data-a11y-active="true"] .sidebar-flyout,
html[data-a11y-active="true"] .bd-a11y-modal {
    line-height: var(--bd-a11y-line-height, var(--line-height));
}

html[data-a11y-active="true"] .main-content :not(.material-icons):not(.material-icons-outlined):not(.material-symbols-outlined),
html[data-a11y-active="true"] .sidebar-flyout :not(.material-icons):not(.material-icons-outlined):not(.material-symbols-outlined),
html[data-a11y-active="true"] .bd-a11y-modal :not(.material-icons):not(.material-icons-outlined):not(.material-symbols-outlined),
html[data-a11y-active="true"] .navbar-breadcrumb :not(.material-icons):not(.material-icons-outlined):not(.material-symbols-outlined) {
    letter-spacing: var(--bd-a11y-letter-spacing, 0);
    word-spacing: var(--bd-a11y-word-spacing, 0);
}

html[data-a11y-readable-font="true"] body,
html[data-a11y-readable-font="true"] button,
html[data-a11y-readable-font="true"] input,
html[data-a11y-readable-font="true"] select,
html[data-a11y-readable-font="true"] textarea {
    font-family: Verdana, Tahoma, Arial, sans-serif !important;
}

html[data-a11y-dyslexia="true"] body,
html[data-a11y-dyslexia="true"] button,
html[data-a11y-dyslexia="true"] input,
html[data-a11y-dyslexia="true"] select,
html[data-a11y-dyslexia="true"] textarea {
    font-family: Trebuchet MS, Verdana, Arial, sans-serif !important;
}

html[data-a11y-dyslexia="true"] .main-content :not(.material-icons):not(.material-icons-outlined):not(.material-symbols-outlined),
html[data-a11y-dyslexia="true"] .sidebar-flyout :not(.material-icons):not(.material-icons-outlined):not(.material-symbols-outlined),
html[data-a11y-dyslexia="true"] .bd-a11y-modal :not(.material-icons):not(.material-icons-outlined):not(.material-symbols-outlined),
html[data-a11y-dyslexia="true"] .navbar-breadcrumb :not(.material-icons):not(.material-icons-outlined):not(.material-symbols-outlined) {
    letter-spacing: max(var(--bd-a11y-letter-spacing, 0), 0.035em);
    word-spacing: max(var(--bd-a11y-word-spacing, 0), 0.08em);
}

html[data-a11y-contrast="high-dark"] {
    --bg-primary: #000000;
    --bg-secondary: #050505;
    --bg-tertiary: #111111;
    --bg-elevated: #1c1c1c;
    --bg-overlay: rgba(0, 0, 0, 0.86);
    --text-primary: #ffffff;
    --text-secondary: #f2f2f2;
    --text-tertiary: #d0d0d0;
    --text-link: #80d4ff;
    --border-primary: #ffffff;
    --border-secondary: #bdbdbd;
    --border-hover: #ffffff;
    --accent-blue: #80d4ff;
    --accent-blue-hover: #bdefff;
    --accent-green: #7cff95;
    --accent-yellow: #ffe66d;
    --accent-red: #ff8585;
    --bg-hover: rgba(255, 255, 255, 0.18);
    --bg-active: rgba(255, 255, 255, 0.24);

    --sidebar-rail-bg: #000000;
    --sidebar-flyout-bg: #050505;
    --sidebar-btn-color: #ffffff;
    --sidebar-btn-hover-bg: rgba(255, 255, 255, 0.22);
    --sidebar-btn-hover-color: #ffffff;
    --sidebar-section-title: #ffffff;
    --sidebar-neutral-accent: #ffffff;
    --sidebar-neutral-muted: rgba(255, 255, 255, 0.24);
    --sidebar-focus-ring: #ffffff;
    --sidebar-cat-main-accent: #80d4ff;
    --sidebar-cat-main-muted: rgba(128, 212, 255, 0.30);
    --sidebar-cat-management-accent: #7ff7ec;
    --sidebar-cat-management-muted: rgba(127, 247, 236, 0.28);
    --sidebar-cat-tools-accent: #ffe66d;
    --sidebar-cat-tools-muted: rgba(255, 230, 109, 0.30);
    --sidebar-cat-system-accent: #d9b8ff;
    --sidebar-cat-system-muted: rgba(217, 184, 255, 0.28);
    --sidebar-cat-server-mgmt-accent: #ffb89a;
    --sidebar-cat-server-mgmt-muted: rgba(255, 184, 154, 0.28);
    --ux35-topbar-bg: #000000;
    --ux35-topbar-fg: #ffffff;
    --ux35-topbar-fg-muted: #f2f2f2;
    --ux35-topbar-border: #ffffff;
}

html[data-a11y-contrast="high-light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f2f4f7;
    --bg-elevated: #e5e7eb;
    --bg-overlay: rgba(0, 0, 0, 0.52);
    --text-primary: #000000;
    --text-secondary: #1f2937;
    --text-tertiary: #374151;
    --text-link: #003f9e;
    --border-primary: #000000;
    --border-secondary: #4b5563;
    --border-hover: #000000;
    --accent-blue: #003f9e;
    --accent-blue-hover: #002a6b;
    --accent-green: #006b2e;
    --accent-yellow: #8a5a00;
    --accent-red: #a40000;
    --bg-hover: rgba(0, 0, 0, 0.08);
    --bg-active: rgba(0, 0, 0, 0.12);

    --sidebar-rail-bg: #ffffff;
    --sidebar-flyout-bg: #f6f8fa;
    --sidebar-btn-color: #1f2937;
    --sidebar-btn-hover-bg: rgba(0, 0, 0, 0.10);
    --sidebar-btn-hover-color: #000000;
    --sidebar-section-title: #000000;
    --sidebar-neutral-accent: #000000;
    --sidebar-neutral-muted: rgba(0, 0, 0, 0.10);
    --sidebar-focus-ring: #003f9e;
    --sidebar-cat-main-accent: #003f9e;
    --sidebar-cat-main-muted: rgba(0, 63, 158, 0.14);
    --sidebar-cat-management-accent: #0a6e66;
    --sidebar-cat-management-muted: rgba(10, 110, 102, 0.14);
    --sidebar-cat-tools-accent: #8a5a00;
    --sidebar-cat-tools-muted: rgba(138, 90, 0, 0.14);
    --sidebar-cat-system-accent: #5a1f9e;
    --sidebar-cat-system-muted: rgba(90, 31, 158, 0.14);
    --sidebar-cat-server-mgmt-accent: #9a3b1a;
    --sidebar-cat-server-mgmt-muted: rgba(154, 59, 26, 0.14);
    --ux35-topbar-bg: #ffffff;
    --ux35-topbar-fg: #000000;
    --ux35-topbar-fg-muted: #1f2937;
    --ux35-topbar-border: #000000;
}

html[data-a11y-contrast="yellow-black"] {
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --bg-tertiary: #161200;
    --bg-elevated: #241f00;
    --bg-overlay: rgba(0, 0, 0, 0.9);
    --text-primary: #fff36d;
    --text-secondary: #ffe66d;
    --text-tertiary: #e5cf50;
    --text-link: #00e5ff;
    --border-primary: #fff36d;
    --border-secondary: #d9c957;
    --border-hover: #ffffff;
    --accent-blue: #00e5ff;
    --accent-blue-hover: #8ef5ff;
    --accent-green: #8dff8d;
    --accent-yellow: #fff36d;
    --accent-red: #ff8a80;
    --bg-hover: rgba(255, 243, 109, 0.16);
    --bg-active: rgba(255, 243, 109, 0.24);

    --sidebar-rail-bg: #000000;
    --sidebar-flyout-bg: #161200;
    --sidebar-btn-color: #fff36d;
    --sidebar-btn-hover-bg: rgba(255, 243, 109, 0.22);
    --sidebar-btn-hover-color: #ffffff;
    --sidebar-section-title: #fff36d;
    --sidebar-neutral-accent: #fff36d;
    --sidebar-neutral-muted: rgba(255, 243, 109, 0.24);
    --sidebar-focus-ring: #00e5ff;
    --sidebar-cat-main-accent: #00e5ff;
    --sidebar-cat-main-muted: rgba(0, 229, 255, 0.28);
    --sidebar-cat-management-accent: #8ef5ff;
    --sidebar-cat-management-muted: rgba(142, 245, 255, 0.24);
    --sidebar-cat-tools-accent: #fff36d;
    --sidebar-cat-tools-muted: rgba(255, 243, 109, 0.28);
    --sidebar-cat-system-accent: #d9b8ff;
    --sidebar-cat-system-muted: rgba(217, 184, 255, 0.24);
    --sidebar-cat-server-mgmt-accent: #ffb89a;
    --sidebar-cat-server-mgmt-muted: rgba(255, 184, 154, 0.24);
    --ux35-topbar-bg: #000000;
    --ux35-topbar-fg: #fff36d;
    --ux35-topbar-fg-muted: #ffe66d;
    --ux35-topbar-border: #fff36d;
}

/* Apply color filters on body — NOT on .main-wrapper (breaks position:fixed navbar offset) */
html[data-a11y-filtered="true"] body {
    filter: var(--bd-a11y-visual-filter, none);
}

html[data-a11y-filtered="true"] body > .bd-a11y-filter-defs,
html[data-a11y-filtered="true"] .bd-a11y-reading-guide,
html[data-a11y-filtered="true"] .bd-a11y-reading-mask-top,
html[data-a11y-filtered="true"] .bd-a11y-reading-mask-bottom {
    filter: none;
}

body.bd-a11y-modal-open {
    overflow: hidden !important;
}

html[data-a11y-underline-links="true"] a {
    text-decoration: underline !important;
    text-decoration-thickness: 0.12em !important;
    text-underline-offset: 0.18em !important;
}

html[data-a11y-highlight-links="true"] .main-content a,
html[data-a11y-highlight-links="true"] .main-content button:not(.modal-close):not(.navbar-btn),
html[data-a11y-highlight-links="true"] .sidebar-flyout a,
html[data-a11y-highlight-links="true"] .sidebar-flyout button,
html[data-a11y-highlight-links="true"] .ux35-sidebar a,
html[data-a11y-highlight-links="true"] .ux35-sidebar button,
html[data-a11y-highlight-links="true"] .ux35-topbar button,
html[data-a11y-highlight-links="true"] .bd-a11y-modal a,
html[data-a11y-highlight-links="true"] .bd-a11y-modal button:not(.bd-a11y-close) {
    outline: 2px solid var(--accent-blue) !important;
    outline-offset: 2px !important;
}

html[data-a11y-highlight-headings="true"] h1,
html[data-a11y-highlight-headings="true"] h2,
html[data-a11y-highlight-headings="true"] h3,
html[data-a11y-highlight-headings="true"] h4,
html[data-a11y-highlight-headings="true"] h5,
html[data-a11y-highlight-headings="true"] h6,
html[data-a11y-highlight-headings="true"] .page-title {
    background: var(--accent-blue-muted) !important;
    border-left: 4px solid var(--accent-blue) !important;
    padding-left: var(--space-sm) !important;
}

html[data-a11y-strong-focus="true"] :focus-visible,
html[data-a11y-strong-focus="true"] button:focus,
html[data-a11y-strong-focus="true"] input:focus,
html[data-a11y-strong-focus="true"] select:focus,
html[data-a11y-strong-focus="true"] textarea:focus,
html[data-a11y-strong-focus="true"] [tabindex]:focus {
    outline: 4px solid var(--accent-yellow) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 7px rgba(210, 153, 34, 0.25) !important;
}

html[data-a11y-hide-media="true"] img,
html[data-a11y-hide-media="true"] picture,
html[data-a11y-hide-media="true"] video,
html[data-a11y-hide-media="true"] canvas,
html[data-a11y-hide-media="true"] svg:not(.bd-a11y-filter-defs) {
    opacity: 0.08 !important;
    filter: grayscale(1) !important;
}

html[data-a11y-large-cursor="true"],
html[data-a11y-large-cursor="true"] * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M5 3 L29 20 L18 22 L13 33 L5 3 Z' fill='%23ffffff' stroke='%23000000' stroke-width='3'/%3E%3C/svg%3E") 5 3, auto !important;
}

html[data-a11y-large-cursor="true"] a,
html[data-a11y-large-cursor="true"] button,
html[data-a11y-large-cursor="true"] [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 4 L32 22 L20 24 L15 36 L6 4 Z' fill='%23fff36d' stroke='%23000000' stroke-width='3'/%3E%3C/svg%3E") 6 4, pointer !important;
}

html[data-a11y-reduce-motion="true"] *,
html[data-a11y-reduce-motion="true"] *::before,
html[data-a11y-reduce-motion="true"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
}

html[data-a11y-pause-animations="true"] *,
html[data-a11y-pause-animations="true"] *::before,
html[data-a11y-pause-animations="true"] *::after {
    animation-play-state: paused !important;
}

.accessibility-btn.active {
    color: var(--accent-blue);
    background: var(--accent-blue-muted);
}

.bd-a11y-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vh, 24px);
    z-index: var(--z-modal);
    overflow: hidden;
    overscroll-behavior: contain;
}

.bd-a11y-modal {
    width: min(1040px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bd-a11y-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-primary);
}

.bd-a11y-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.bd-a11y-title h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.bd-a11y-title p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 2px 0 0;
}

.bd-a11y-close {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: var(--space-sm);
}

.bd-a11y-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.bd-a11y-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.bd-a11y-controls {
    padding: var(--space-lg);
    overflow-y: auto;
    border-right: 1px solid var(--border-primary);
}

.bd-a11y-preview-wrap {
    padding: var(--space-lg);
    background: var(--bg-primary);
    overflow-y: auto;
}

.bd-a11y-section {
    margin-bottom: var(--space-lg);
}

.bd-a11y-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.bd-a11y-profiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.bd-a11y-profile,
.bd-a11y-toggle {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.bd-a11y-profile:hover,
.bd-a11y-toggle:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
}

.bd-a11y-profile[aria-pressed="true"] {
    background: var(--accent-blue-muted);
    border-color: var(--accent-blue);
    box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.bd-a11y-profile > .material-icons,
.bd-a11y-toggle > .material-icons {
    color: var(--accent-blue);
    flex: 0 0 auto;
}

.bd-a11y-profile strong,
.bd-a11y-toggle strong {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.bd-a11y-profile small,
.bd-a11y-toggle small {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    margin-top: 2px;
}

.bd-a11y-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.bd-a11y-field {
    display: grid;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.bd-a11y-field label {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.bd-a11y-field output {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.bd-a11y-field input[type="range"] {
    width: 100%;
    accent-color: var(--accent-blue);
}

.bd-a11y-field select {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: var(--space-sm);
}

.bd-a11y-toggle[aria-pressed="true"] {
    background: var(--accent-blue-muted);
    border-color: var(--accent-blue);
}

.bd-a11y-preview {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.bd-a11y-preview h3 {
    margin-bottom: var(--space-sm);
}

.bd-a11y-preview p {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.bd-a11y-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-primary);
}

.bd-a11y-preview-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--accent-green);
    border-radius: var(--radius-full);
    color: var(--accent-green);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
}

.bd-a11y-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-primary);
}

.bd-a11y-footer-actions {
    display: flex;
    gap: var(--space-sm);
}

.bd-a11y-reading-guide {
    position: fixed;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-yellow);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 18px rgba(210, 153, 34, 0.65);
    pointer-events: none;
    z-index: var(--z-tooltip);
    display: none;
}

.bd-a11y-reading-mask-top,
.bd-a11y-reading-mask-bottom {
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.58);
    pointer-events: none;
    z-index: calc(var(--z-tooltip) - 1);
    display: none;
}

html[data-a11y-reading-guide="true"] .bd-a11y-reading-guide,
html[data-a11y-reading-mask="true"] .bd-a11y-reading-mask-top,
html[data-a11y-reading-mask="true"] .bd-a11y-reading-mask-bottom {
    display: block;
}

.bd-a11y-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

@media (max-width: 820px) {
    .bd-a11y-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    .bd-a11y-body {
        grid-template-columns: 1fr;
    }

    .bd-a11y-controls {
        border-right: none;
        border-bottom: 1px solid var(--border-primary);
    }

    .bd-a11y-grid,
    .bd-a11y-profiles {
        grid-template-columns: 1fr;
    }

    .bd-a11y-footer {
        flex-direction: column;
    }
}