/**
 * Accessibility Panel Styles
 */

/* Panel Overlay */
.accessibility-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-accessibility) - 1);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.accessibility-overlay.active {
    display: block;
    opacity: 1;
}

/* Panel */
.accessibility-panel {
    position: fixed;
    top: 0;
    right: -380px;
    width: 360px;
    height: 100%;
    background: var(--color-bg);
    z-index: var(--z-accessibility);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transition: right var(--transition-slow);
    overflow-y: auto;
}

.accessibility-panel.active {
    right: 0;
}

.accessibility-panel-inner {
    padding: var(--space-xl);
}

/* Panel Header */
.accessibility-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-secondary);
}

.accessibility-panel-header h2 {
    font-family: var(--font-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: 0;
}

.accessibility-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.accessibility-close:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

/* Panel Body */
.accessibility-section {
    margin-bottom: var(--space-xl);
}

.accessibility-section h3 {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.accessibility-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.acc-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
    background: var(--color-bg-light);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.acc-btn:hover {
    border-color: var(--color-primary-light);
    background: var(--color-bg-alt);
}

.acc-btn.active {
    border-color: var(--color-secondary);
    background: rgba(var(--color-secondary-rgb), 0.08);
}

.acc-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.acc-color-preview {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.acc-btn span:last-child {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    font-weight: var(--font-weight-medium);
}

/* Reset button */
.acc-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.acc-reset-btn:hover {
    background: var(--color-error);
    color: var(--color-text-white);
    border-color: var(--color-error);
}

/* Accessibility Mode Body Classes */

/* Font Size Modes */
body.acc-font-small {
    font-size: 14px;
}

body.acc-font-normal {
    font-size: 16px;
}

body.acc-font-large {
    font-size: 20px;
}

body.acc-font-xlarge {
    font-size: 24px;
}

body.acc-font-large h1,
body.acc-font-xlarge h1 {
    font-size: 2.5em;
}

body.acc-font-large h2,
body.acc-font-xlarge h2 {
    font-size: 2em;
}

/* Color Scheme Modes */
body.acc-scheme-dark {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

body.acc-scheme-dark * {
    background-color: inherit;
    color: inherit;
    border-color: #444 !important;
}

body.acc-scheme-dark .site-header,
body.acc-scheme-dark .site-footer,
body.acc-scheme-dark .card,
body.acc-scheme-dark .branch-card,
body.acc-scheme-dark .document-item {
    background-color: #2a2a2a !important;
}

body.acc-scheme-dark a {
    color: #6db3f2 !important;
}

body.acc-scheme-dark img {
    filter: brightness(0.85);
}

body.acc-scheme-sepia {
    background-color: #f4ecd8 !important;
    color: #5b4636 !important;
}

body.acc-scheme-sepia * {
    background-color: inherit;
    color: inherit;
}

body.acc-scheme-sepia .site-header,
body.acc-scheme-sepia .site-footer {
    background-color: #eee3c9 !important;
}

body.acc-scheme-sepia a {
    color: #7b4f2c !important;
}

body.acc-scheme-high-contrast {
    background-color: #000 !important;
    color: #ff0 !important;
}

body.acc-scheme-high-contrast * {
    background-color: inherit;
    color: inherit;
    border-color: #ff0 !important;
}

body.acc-scheme-high-contrast a {
    color: #0ff !important;
    text-decoration: underline !important;
}

body.acc-scheme-high-contrast .btn,
body.acc-scheme-high-contrast button {
    border: 2px solid #ff0 !important;
}

body.acc-scheme-high-contrast img {
    filter: contrast(1.5);
}

/* Font Family Modes */
body.acc-font-serif,
body.acc-font-serif * {
    font-family: Georgia, 'Times New Roman', Times, serif !important;
}

body.acc-font-mono,
body.acc-font-mono * {
    font-family: 'Courier New', Courier, monospace !important;
}