/**
 * 可访问性增强
 * 基于 WCAG 2.1 AA 标准
 */

/* ============================================
   1. 焦点可见性增强
   ============================================ */

/* 确保所有可交互元素在键盘导航时有明显的焦点指示 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 移除默认焦点样式，使用自定义样式 */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* 焦点环动画 */
:focus-visible {
  animation: focusRing var(--duration-fast) var(--ease-standard);
}

@keyframes focusRing {
  from {
    outline-offset: 0;
  }
  to {
    outline-offset: 2px;
  }
}

/* ============================================
   2. 跳过导航链接
   ============================================ */

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: var(--z-tooltip);
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-to-content:focus {
  top: 0;
  outline: 2px solid var(--text-inverse);
  outline-offset: -4px;
}

/* ============================================
   3. 屏幕阅读器专用文本
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ============================================
   4. 高对比度模式支持
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #000000;
    --bg-primary: #ffffff;
    --border-primary: #000000;
  }
  
  /* 增强边框可见性 */
  .gmail-email-row,
  .gmail-nav-item,
  .btn,
  .input {
    border: 2px solid var(--border-primary);
  }
  
  /* 增强焦点指示 */
  :focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
  }
}

/* ============================================
   5. 颜色对比度增强
   ============================================ */

/* 确保文本与背景有足够的对比度 (WCAG AA: 4.5:1) */

/* 主要文本 */
.text-primary {
  color: var(--color-gray-900);
}

/* 次要文本 - 确保至少 4.5:1 对比度 */
.text-secondary {
  color: var(--color-gray-700);
}

/* 链接 - 确保可见性 */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duration-fast);
}

a:hover,
a:focus {
  text-decoration-color: currentColor;
}

/* 按钮 - 确保足够的对比度 */
.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  /* 对比度: 4.6:1 */
}

.btn-secondary {
  background: #ffffff;
  color: #5f6368;
  border: 1px solid #c0c4c9;
  /* 正常的灰色描边 */
}

.btn-secondary:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #a8adb3;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
}

.btn-secondary:active:not(:disabled) {
  background: #f1f3f4;
  border-color: #a8adb3;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3);
}

.btn-secondary:focus:not(:disabled) {
  border-color: #1a73e8;
  outline: none;
}

.btn-secondary:disabled {
  background: #f8f9fa;
  color: #9aa0a6;
  border-color: #e8eaed;
  cursor: not-allowed;
}

/* ============================================
   6. 键盘导航增强
   ============================================ */

/* 确保所有交互元素都可以通过键盘访问 */

/* 自定义复选框 - 键盘可访问 */
.gmail-checkbox {
  cursor: pointer;
}

.gmail-checkbox:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 图标按钮 - 键盘可访问 */
.gmail-icon-btn[tabindex="0"]:focus-visible,
.gmail-toolbar-btn[tabindex="0"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 邮件行 - 键盘导航 */
.gmail-email-row[tabindex="0"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  z-index: 1;
}

/* 侧边栏导航 - 键盘导航 */
.gmail-nav-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ============================================
   7. 动画减弱 (尊重用户偏好)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* 保留必要的过渡效果，但缩短时长 */
  .gmail-detail-panel,
  .gmail-sidebar,
  .modal {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   8. 触摸目标尺寸
   ============================================ */

/* 确保所有可点击元素至少 44x44px (WCAG 2.5.5) */

.gmail-icon-btn,
.gmail-toolbar-btn,
.gmail-menu-btn {
  min-width: 44px;
  min-height: 44px;
}

.gmail-checkbox {
  min-width: 24px;
  min-height: 24px;
}

/* 移动端增大触摸目标 */
@media (max-width: 768px) {
  .gmail-icon-btn,
  .gmail-toolbar-btn,
  .gmail-menu-btn {
    min-width: 48px;
    min-height: 48px;
  }
  
  .gmail-email-row {
    min-height: 56px;
  }
}

/* ============================================
   9. 表单可访问性
   ============================================ */

/* 确保表单标签与输入框关联 */
label {
  cursor: pointer;
  user-select: none;
}

/* 必填字段指示 */
.required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
}

/* 错误消息可见性 */
.error-message {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.error-message::before {
  content: '⚠';
  font-size: var(--font-size-md);
}

/* 帮助文本 */
.help-text {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

/* ============================================
   10. 图标可访问性
   ============================================ */

/* 确保图标有文本替代 */
.icon-only {
  position: relative;
}

.icon-only::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-2));
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  background: var(--color-gray-900);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast);
}

.icon-only:hover::after,
.icon-only:focus::after {
  opacity: 1;
}

/* ============================================
   11. 模态框可访问性
   ============================================ */

/* 模态框打开时，禁用背景滚动 */
body.modal-open {
  overflow: hidden;
}

/* 模态框焦点陷阱 */
.modal[role="dialog"],
.gmail-detail-panel[role="dialog"],
.gmail-shortcuts-panel[role="dialog"] {
  isolation: isolate;
}

/* 模态框关闭按钮 */
.modal-close,
.gmail-detail-back,
.gmail-shortcuts-close {
  position: relative;
}

.modal-close:focus-visible,
.gmail-detail-back:focus-visible,
.gmail-shortcuts-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   12. 实时区域 (Live Regions)
   ============================================ */

/* 用于屏幕阅读器的实时通知 */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Toast 通知 - 可访问 */
.toast[role="alert"],
.toast[role="status"] {
  /* 屏幕阅读器会自动读取 */
}

/* ============================================
   13. 表格可访问性
   ============================================ */

/* 邮件列表作为表格结构 */
.gmail-email-list[role="table"] {
  /* 使用 ARIA 角色增强语义 */
}

.gmail-email-row[role="row"] {
  /* 每行作为表格行 */
}

.gmail-email-row > *[role="cell"] {
  /* 每个单元格 */
}

/* ============================================
   14. 导航地标
   ============================================ */

/* 使用 ARIA 地标增强导航 */
.gmail-header[role="banner"] {
  /* 页面头部 */
}

.gmail-sidebar[role="navigation"] {
  /* 主导航 */
}

.gmail-content[role="main"] {
  /* 主内容区 */
}

.gmail-search[role="search"] {
  /* 搜索区域 */
}

/* ============================================
   15. 状态指示
   ============================================ */

/* 加载状态 */
.loading[aria-busy="true"] {
  position: relative;
}

.loading[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 禁用状态 */
[aria-disabled="true"],
:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 选中状态 */
[aria-selected="true"] {
  background: var(--bg-selected);
  font-weight: var(--font-weight-bold);
}

/* 展开/折叠状态 */
[aria-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

/* ============================================
   16. 工具提示可访问性
   ============================================ */

/* 确保工具提示可以通过键盘访问 */
.tooltip-trigger:focus-visible + .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   17. 颜色不是唯一指示
   ============================================ */

/* 错误状态 - 不仅依赖颜色 */
.input-error {
  border-color: var(--color-error);
  border-width: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ea4335' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  padding-right: var(--space-10);
}

/* 成功状态 - 不仅依赖颜色 */
.input-success {
  border-color: var(--color-success);
  border-width: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2334a853' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  padding-right: var(--space-10);
}

/* 必读邮件 - 不仅依赖粗体 */
.gmail-email-row.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============================================
   18. 文本间距和可读性
   ============================================ */

/* 确保文本有足够的行高和间距 (WCAG 1.4.12) */
p,
.gmail-detail-body {
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* 段落间距 */
p + p {
  margin-top: var(--space-4);
}

/* 标题间距 */
h1, h2, h3, h4, h5, h6 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

/* ============================================
   19. 打印可访问性
   ============================================ */

@media print {
  /* 确保打印时保留重要信息 */
  .sr-only {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  
  /* 显示链接 URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--text-secondary);
  }
  
  /* 隐藏装饰性元素 */
  .decorative {
    display: none;
  }
}

/* ============================================
   20. 语言和方向支持
   ============================================ */

/* RTL (从右到左) 语言支持 */
[dir="rtl"] .gmail-sidebar {
  border-right: none;
  border-left: 1px solid var(--border-secondary);
}

[dir="rtl"] .gmail-detail-panel {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

[dir="rtl"] .gmail-detail-panel.open {
  transform: translateX(0);
}

/* 确保文本方向正确 */
[lang="ar"],
[lang="he"],
[lang="fa"] {
  direction: rtl;
  text-align: right;
}