/* ============================================================
   众泰云 SaaS 平台 — UI-4 可访问性增强系统
   ------------------------------------------------------------
   依赖：
     - public/assets/css/design-system.css (UI-1 设计令牌)
     - public/assets/css/animations.css   (UI-3 动效系统，可选)

   本文件为「增强层」，不重复 design-system.css 中已有的基础
   焦点环（*:focus-visible）与 prefers-reduced-motion 基础规则，
   而是在其之上提供：
     1. 跳过导航链接
     2. 屏幕阅读器专用类
     3. 焦点陷阱与键盘导航增强
     4. 颜色对比度增强（WCAG AA 4.5:1）
     5. 表单可访问性
     6. 表格可访问性
     7. 动画与数据偏好控制
     8. 高对比度模式 / Windows 强制颜色
     9. 键盘导航指示
    10. ARIA 状态样式
    11. 移动端可访问性（44x44 触摸目标）

   颜色变量统一引用 design-system.css 中的语义令牌，
   未定义时回退到原始值，确保可独立加载。
   ============================================================ */

/* ============================================================
   1. 跳过导航链接（Skip Links）
   ------------------------------------------------------------
   键盘用户按 Tab 首次聚焦时显示，跳过重复的页头/导航，
   直达主内容或主导航。
   ============================================================ */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    /* 视觉隐藏初始态：移出可视区 */
    transform: translateY(-150%);
    padding: 10px 18px;
    background: var(--color-interactive-primary, #0E7C7B);
    color: var(--color-text-on-primary, #ffffff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md, 8px) 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform var(--duration-normal) ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--color-border-focus, #12a3a2);
    outline-offset: 2px;
}
/* 第二个跳过链接轻微右移，避免与第一个重叠 */
.skip-link--nav {
    left: auto;
    right: 0;
    border-radius: 0 0 0 var(--radius-md, 8px);
}

/* ============================================================
   2. 屏幕阅读器专用类
   ------------------------------------------------------------
   .sr-only          : 视觉隐藏，但屏幕阅读器可朗读
   .sr-only-focusable: 隐藏但聚焦时显现（如跳到主内容的链接）
   采用 clip-path 方案，兼容现代浏览器；同时保留 rect 兜底。
   ============================================================ */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    /* 防止被布局引擎折叠导致朗读丢失 */
    -webkit-user-select: none;
    user-select: none;
}

.sr-only-focusable {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 14px !important;
    margin: 8px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    background: var(--color-interactive-primary, #0E7C7B);
    color: var(--color-text-on-primary, #ffffff);
    border-radius: var(--radius-sm, 6px);
    outline: 2px solid var(--color-border-focus, #12a3a2);
    outline-offset: 2px;
}

/* ============================================================
   3. 焦点管理增强
   ------------------------------------------------------------
   design-system.css 已提供 *:focus-visible 基础样式，
   本节增加焦点陷阱、焦点偏移、键盘导航高亮。
   ============================================================ */
/* 增强焦点环可见性：使用更醒目的偏移与圆角 */
*:focus-visible {
    outline: 2px solid var(--color-border-focus, #12a3a2);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 6px);
    /* 确保 Safari 也能渲染 */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

/* 焦点陷阱：用于模态框/抽屉，约束 Tab 在容器内循环 */
.focus-trap {
    /* 容器本身不限制内容，仅作为标识；JS 接管焦点循环 */
    isolation: isolate;
}
.focus-trap__sentinel {
    /* 不可见哨兵元素，由 JS 在容器首尾插入 */
    width: 1px;
    height: 1px;
    opacity: 0;
    position: absolute;
}

/* 键盘导航时给 body 添加 .keyboard-nav 以全局高亮 */
.keyboard-nav *:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
}
.keyboard-nav a:focus-visible,
.keyboard-nav button:focus-visible,
.keyboard-nav input:focus-visible,
.keyboard-nav select:focus-visible,
.keyboard-nav textarea:focus-visible,
.keyboard-nav [tabindex]:focus-visible {
    outline-color: var(--color-interactive-primary, #0E7C7B);
    box-shadow: 0 0 0 4px var(--color-interactive-subtle, rgba(99, 102, 241, 0.18));
}

/* ============================================================
   4. 颜色对比度增强（WCAG AA 4.5:1）
   ------------------------------------------------------------
   暗色模式下提升次级文字、占位符、禁用态对比度；
   链接在亮暗主题下均保证 ≥ 4.5:1。
   ============================================================ */
/* 暗色模式次级文字提亮 */
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .muted,
[data-theme="dark"] .text-muted {
    color: var(--stone-300, #d6d3d1) !important;
}

/* 占位符对比度（默认太浅） */
::placeholder {
    color: var(--stone-500, #78716c);
    opacity: 1;
}
[data-theme="dark"] ::placeholder {
    color: var(--stone-400, #a8a29e);
}

/* 链接对比度增强 */
a {
    color: var(--color-interactive-primary, #0E7C7B);
}
a:hover {
    color: var(--color-interactive-primary-hover, #4338ca);
}
[data-theme="dark"] a {
    color: var(--indigo-300, #a5b4fc);
}
[data-theme="dark"] a:hover {
    color: var(--indigo-200, #c7d2fe);
}

/* 禁用状态仍保持可辨识对比度（≥ 3:1 大文字） */
[disabled],
[aria-disabled="true"],
.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    color: var(--stone-500, #78716c);
}
[data-theme="dark"] [disabled],
[data-theme="dark"] [aria-disabled="true"],
[data-theme="dark"] .disabled {
    color: var(--stone-400, #a8a29e);
    opacity: 0.65;
}

/* ============================================================
   5. 表单可访问性
   ============================================================ */
/* 视觉隐藏的 label（保留语义关联） */
.label-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 必填字段视觉提示 */
[required] + .form-required,
.required-mark::after {
    content: " *";
    color: var(--color-feedback-error, #dc2626);
    font-weight: 700;
    margin-left: 2px;
}
/* 用 aria-required 时也显示标记 */
[aria-required="true"]::after {
    content: " *";
    color: var(--color-feedback-error, #dc2626);
}

/* 错误状态输入框 */
[aria-invalid="true"],
.input-error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--color-feedback-error, #dc2626) !important;
    box-shadow: 0 0 0 3px var(--color-feedback-error-subtle, rgba(220, 38, 38, 0.18));
}
[aria-invalid="true"]:focus-visible {
    outline-color: var(--color-feedback-error, #dc2626);
}

/* 错误提示文本（与 aria-describedby 关联） */
.form-error,
.field-error {
    display: block;
    margin-top: 4px;
    color: var(--color-feedback-error, #dc2626);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}

/* 帮助文本 */
.form-help,
.field-help {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary, #57534e);
    font-size: 13px;
    line-height: 1.45;
}
[data-theme="dark"] .form-help,
[data-theme="dark"] .field-help {
    color: var(--stone-300, #d6d3d1);
}

/* fieldset/legend 语义增强 */
fieldset {
    border: 1px solid var(--color-border-default, #e7e5e4);
    border-radius: var(--radius-md, 8px);
    padding: 16px;
    margin: 0 0 16px;
}
legend {
    padding: 0 8px;
    font-weight: 600;
    color: var(--color-text-primary, #1c1917);
}

/* ============================================================
   6. 表格可访问性
   ============================================================ */
table caption {
    caption-side: top;
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--color-text-primary, #1c1917);
    font-size: 15px;
}
[data-theme="dark"] table caption {
    color: var(--stone-100, #f5f5f4);
}

/* thead 语义增强：表头更醒目 */
thead th {
    font-weight: 700;
    color: var(--color-text-primary, #1c1917);
    background: var(--color-bg-subtle, #f5f5f4);
    border-bottom: 2px solid var(--color-border-strong, #d6d3d1);
    text-align: left;
    padding: 10px 12px;
}
tbody th {
    font-weight: 600;
    text-align: left;
}

/* 响应式表格：小屏横向滚动提示 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.table-scroll::after {
    /* 视觉提示：可横向滚动 */
    content: "← 左右滑动查看完整表格 →";
    display: none;
    font-size: 12px;
    color: var(--color-text-secondary, #57534e);
    padding: 4px 8px;
    text-align: center;
}
@media (max-width: 640px) {
    .table-scroll::after {
        display: block;
    }
}

/* 斑马纹增强行可读性（不依赖颜色单独传达信息） */
tbody tr:nth-child(even) {
    background: var(--color-bg-subtle, #fafaf9);
}

/* ============================================================
   7. 动画与数据偏好控制
   ============================================================ */
/* 完全禁用动画（在 design-system 基础规则上叠加） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* 隐藏纯装饰性动画元素 */
    .a11y-hide-on-reduced-motion {
        display: none !important;
    }
}

/* 减少数据用量：隐藏非必要图片、降低背景图加载 */
@media (prefers-reduced-data: reduce) {
    img[data-a11y-optional],
    video[data-a11y-optional],
    .a11y-optional-media {
        display: none !important;
    }
    /* 用占位背景色替代装饰性背景图 */
    [data-a11y-bg="decorative"] {
        background-image: none !important;
        background-color: var(--color-bg-subtle, #f5f5f4) !important;
    }
}

/* ============================================================
   8. 高对比度模式 / Windows 强制颜色
   ============================================================ */
@media (prefers-contrast: high) {
    :root {
        --color-border-default: var(--stone-700, #44403c);
        --color-border-strong: var(--stone-900, #1c1917);
        --color-text-secondary: var(--stone-800, #292524);
    }
    [data-theme="dark"] {
        --color-border-default: var(--stone-300, #d6d3d1);
        --color-border-strong: var(--stone-100, #f5f5f4);
        --color-text-secondary: var(--stone-200, #e7e5e4);
    }
    /* 高对比度下统一强化边框 */
    button,
    input,
    select,
    textarea,
    .btn,
    .card,
    [role="button"] {
        border: 2px solid currentColor;
    }
    /* 焦点环更醒目 */
    *:focus-visible {
        outline: 3px solid var(--color-border-focus, #12a3a2);
        outline-offset: 3px;
    }
}

/* Windows 高对比度模式（Edge/IE/Win10+） */
@media (forced-colors: active) and (prefers-color-scheme: dark),
       (forced-colors: active) {
    /* 用系统语义色，避免颜色丢失 */
    button,
    a,
    input,
    select,
    textarea,
    [role="button"],
    .btn {
        forced-color-adjust: none;
        border: 1px solid ButtonText;
    }
    /* 焦点用系统 LinkText 色确保可见 */
    *:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
    /* 图标/装饰元素跟随系统颜色 */
    .icon,
    svg[aria-hidden="true"] {
        forced-color-adjust: auto;
    }
    /* 禁用元素使用 GrayText */
    [disabled],
    [aria-disabled="true"] {
        color: GrayText;
        border-color: GrayText;
    }
}

/* ============================================================
   9. 键盘导航指示
   ============================================================ */
/* Tab 顺序可视化：开发模式下给所有可聚焦元素加细微标记 */
.a11y-debug [tabindex]:not([tabindex="-1"]),
.a11y-debug a[href],
.a11y-debug button,
.a11y-debug input,
.a11y-debug select,
.a11y-debug textarea {
    position: relative;
}
.a11y-debug [tabindex]:not([tabindex="-1"])::before,
.a11y-debug a[href]::before {
    content: attr(data-tabindex);
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-feedback-warning, #d97706);
    color: #ffffff;
    font-size: 10px;
    line-height: 16px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 9999;
}

/* kbd 键盘按键样式 */
kbd,
.kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 7px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-primary, #1c1917);
    background: var(--color-bg-subtle, #f5f5f4);
    border: 1px solid var(--color-border-strong, #d6d3d1);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm, 6px);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
[data-theme="dark"] kbd,
[data-theme="dark"] .kbd {
    color: var(--stone-100, #f5f5f4);
    background: var(--stone-800, #292524);
    border-color: var(--stone-600, #57534e);
}
kbd + kbd {
    margin-left: 4px;
}

/* 快捷键帮助面板 */
.shortcut-help {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 24px;
}
.shortcut-help[aria-hidden="false"] {
    display: flex;
}
.shortcut-help__panel {
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--color-bg-surface, #ffffff);
    color: var(--color-text-primary, #1c1917);
    border-radius: var(--radius-lg, 12px);
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.shortcut-help__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.shortcut-help__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-default, #e7e5e4);
}
.shortcut-help__list li:last-child {
    border-bottom: none;
}

/* ============================================================
   10. ARIA 状态样式
   ============================================================ */
/* 折叠/展开图标切换 */
[aria-expanded="false"] .aria-icon-expand {
    display: inline-block;
}
[aria-expanded="false"] .aria-icon-collapse {
    display: none;
}
[aria-expanded="true"] .aria-icon-expand {
    display: none;
}
[aria-expanded="true"] .aria-icon-collapse {
    display: inline-block;
}

/* aria-busy 加载状态 */
[aria-busy="true"] {
    position: relative;
    cursor: progress;
}
[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--color-border-strong, #d6d3d1);
    border-top-color: var(--color-interactive-primary, #0E7C7B);
    border-radius: 50%;
    animation: a11y-spin var(--duration-700) linear infinite;
}
@keyframes a11y-spin {
    to { transform: rotate(360deg); }
}

/* aria-invalid 错误状态（已在表单节定义，此处补充图标） */
[aria-invalid="true"] ~ .aria-error-icon {
    color: var(--color-feedback-error, #dc2626);
}

/* aria-disabled 禁用状态（已在对比度节定义，此处补充交互） */
[aria-disabled="true"] {
    pointer-events: none;
}

/* aria-hidden 元素确保不可聚焦 */
[aria-hidden="true"] {
    /* 视觉上可能仍可见（如装饰元素），但屏幕阅读器跳过 */
    pointer-events: none;
}
/* 注意：aria-hidden=true 元素内的可聚焦节点应由 JS 设置
   tabindex="-1" 以避免键盘聚焦到隐藏内容。CSS 无法修改
   tabindex 属性，此处仅做语义提醒，实际处理见 accessibility.js
   的 enforceAriaHiddenFocus() 函数。 */

/* aria-current 当前页/项高亮 */
[aria-current="page"],
[aria-current="true"] {
    font-weight: 700;
    color: var(--color-interactive-primary, #0E7C7B);
    background: var(--color-interactive-subtle, rgba(99, 102, 241, 0.12));
}
[aria-current="step"]::before {
    content: "● ";
    color: var(--color-interactive-primary, #0E7C7B);
}

/* ============================================================
   11. 移动端可访问性
   ------------------------------------------------------------
   WCAG 2.5.5 / 2.5.8：可交互元素触摸目标 ≥ 44x44px
   ============================================================ */
@media (max-width: 768px) {
    /* 强制可交互元素满足最小触摸目标 */
    button,
    [role="button"],
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: 44px;
        min-width: 44px;
    }
    /* 复选框/单选的命中区域扩大 */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }
    label {
        /* label 与控件关联，扩大可点击区域 */
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* 链接行高加大，避免误触相邻链接 */
    p a,
    li a {
        line-height: 1.6;
    }

    /* 文字大小响应式：根字号缩小但保持下限 */
    html {
        font-size: 15px;
    }
    /* 防止 iOS 横屏自动放大：输入框字号 ≥ 16px */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* 手势替代方案：禁用自定义右键拦截，保留系统上下文菜单 */
.no-context-menu {
    /* 仅在显式声明时禁用，默认不禁用 */
    -webkit-touch-callout: none;
}
/* 长按提示：移动端长按链接不要触发系统菜单的元素 */
.a11y-allow-context {
    -webkit-touch-callout: default;
}

/* 横屏模式下的可读性调整 */
@media (max-width: 768px) and (orientation: landscape) {
    /* 横屏高度受限，缩小表单内边距但保持触摸目标 */
    .a11y-compact-landscape input,
    .a11y-compact-landscape textarea {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* 打印样式：可访问性的副产品，确保打印时隐藏交互元素 */
@media print {
    .skip-link,
    .shortcut-help,
    [aria-hidden="true"] {
        display: none !important;
    }
    *:focus-visible {
        outline: none;
    }
}

/* ============================================================
   END — accessibility.css
   ============================================================ */