/**
 * WCAG 2.2 AA 無障礙增強樣式
 * Accessibility Enhancements for WCAG 2.2 AA Compliance
 * 
 * 符合標準：
 * - WCAG 2.2 Level AA
 * - 香港政府無障礙網頁指引
 * 
 * 主要改善：
 * 1. 顏色對比度 (1.4.3 Contrast Minimum - 4.5:1 for normal text, 3:1 for large text)
 * 2. 文字大小 (1.4.4 Resize Text - up to 200%)
 * 3. 非文字對比度 (1.4.11 Non-text Contrast - 3:1)
 * 4. 焦點可見性 (2.4.7 Focus Visible)
 * 5. 目標大小 (2.5.8 Target Size Minimum - 24x24px)
 * 6. 文字間距 (1.4.12 Text Spacing)
 * 7. 內容重排 (1.4.10 Reflow - 320px width)
 * 8. 動畫控制 (2.3.3 Animation from Interactions)
 */

/* ==================== 1. 顏色對比度增強 ==================== */

/* 改善 text-muted 對比度 - 從 #6c757d 改為 #595959 (對比度 7:1) */
.text-muted {
    color: #595959 !important;
}

/* 改善 small 文字的可讀性 */
.small, small {
    font-size: 0.875rem; /* 確保至少 14px */
    color: #4a4a4a; /* 提高對比度 */
}

/* 改善 alert 內的小字 */
.alert .small,
.alert small {
    color: inherit;
    opacity: 0.9;
}

/* 改善 badge 對比度 */
.badge.bg-warning {
    color: #000 !important; /* 確保黃色背景上文字清晰 */
}

.badge.bg-secondary {
    background-color: #4a4a4a !important; /* 加深灰色 */
}

/* 改善 card-header 內文字對比度 */
.card-header {
    color: #212529;
}

/* 改善連結對比度 */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    text-decoration-thickness: 2px;
}

/* 改善 placeholder 對比度 */
::placeholder {
    color: #595959 !important;
    opacity: 1;
}

/* 改善表單標籤對比度 */
.form-label,
label {
    color: #212529;
    font-weight: 500;
}

/* 改善 footer 連結對比度 */
.footer a,
footer a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.footer a:hover,
footer a:hover {
    color: #fff !important;
}

/* ==================== 2. 最小文字大小 ==================== */

/* 確保所有文字至少 12px (0.75rem) */
.horse-info,
.stat-label-small,
.date-compact,
.pool-badge {
    font-size: 0.75rem !important; /* 12px 最小值 */
}

/* 改善表格內小字 */
@media (max-width: 768px) {
    .table td,
    .table th {
        font-size: 0.8rem !important; /* 手機版至少 12.8px */
    }
}

/* 確保圖表標籤可讀 */
canvas {
    font-size: 12px !important;
}

/* ==================== 3. 焦點指示器增強 ==================== */

/* 所有可互動元素的焦點樣式 - 符合 WCAG 2.4.7 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important;
}

/* Tab 按鈕焦點 */
.nav-link:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* 卡片內連結焦點 */
.card a:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 1px !important;
    border-radius: 2px;
}

/* 下拉選單項目焦點 */
.dropdown-item:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: -2px !important;
    background-color: #e9ecef !important;
}

/* 表格行焦點 (可點擊的表格) */
tr[onclick]:focus-visible,
tr.clickable-row:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: -2px !important;
}

/* ==================== 4. 目標大小增強 (至少 24x24px, 建議 44x44px) ==================== */

/* 確保所有可點擊元素足夠大 */
.btn,
.nav-link,
.dropdown-item {
    min-height: 44px; /* iOS 建議的最小觸控目標 */
    min-width: 44px;
    padding: 0.5rem 1rem;
}

/* 小按鈕也要有足夠的點擊區域 */
.btn-sm {
    min-height: 36px;
    padding: 0.375rem 0.75rem;
}

/* Badge 作為按鈕時 */
.badge[role="button"],
.badge.clickable,
.horse-stat-item {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
}

/* 分頁按鈕 */
.pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 圖示按鈕 */
.btn-icon,
[aria-label]:not(section):not(nav):not(main) {
    min-width: 44px;
    min-height: 44px;
}

/* ==================== 5. 非顏色資訊傳達 ==================== */

/* 步速預測 - 添加圖示輔助 */
.alert-danger h6.alert-heading::before {
    content: "🔥 ";
}

.alert-info h6.alert-heading::before {
    content: "🐢 ";
}

.alert-secondary h6.alert-heading::before {
    content: "⚖️ ";
}

/* 正面/負面百分比 - 添加符號 */
.percentage-positive::before {
    content: "▲ ";
}

.percentage-negative::before {
    content: "▼ ";
}

/* 確保錯誤訊息不只依賴顏色 */
.is-invalid,
.was-validated :invalid {
    border-width: 2px !important;
}

.invalid-feedback::before {
    content: "⚠ ";
}

/* 必填欄位標記 */
.required::after,
[required] + label::after {
    content: " *";
    color: #dc3545;
}

/* ==================== 6. 改善 Insight 區塊可讀性 ==================== */

/* 洞察報告區塊 */
#insight .alert {
    border-width: 2px;
    border-left-width: 5px;
}

#insight .alert-success {
    border-color: #198754;
    background-color: #d1e7dd;
    color: #0a3622;
}

#insight .alert-danger {
    border-color: #dc3545;
    background-color: #f8d7da;
    color: #58151c;
}

#insight .alert-warning {
    border-color: #ffc107;
    background-color: #fff3cd;
    color: #664d03;
}

#insight .alert-info {
    border-color: #0dcaf0;
    background-color: #cff4fc;
    color: #055160;
}

/* 確保 alert 內的連結可見 */
#insight .alert a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#insight .alert a:hover {
    text-decoration-thickness: 2px;
}

/* ==================== 7. 表格無障礙增強 ==================== */

/* 表格標題行 */
.table thead th {
    background-color: #003366 !important;
    color: #fff !important;
}

/* 斑馬紋對比度 */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}

/* 懸停狀態 */
.table-hover tbody tr:hover {
    background-color: #e9ecef !important;
}

/* 表格標題 scope 樣式 */
.table th[scope="row"] {
    font-weight: 600;
    background-color: #f8f9fa;
}

/* 可排序表格標題 */
.table th[aria-sort] {
    cursor: pointer;
    position: relative;
    padding-right: 1.5rem;
}

.table th[aria-sort]::after {
    content: "⇅";
    position: absolute;
    right: 0.5rem;
    opacity: 0.5;
}

.table th[aria-sort="ascending"]::after {
    content: "↑";
    opacity: 1;
}

.table th[aria-sort="descending"]::after {
    content: "↓";
    opacity: 1;
}

/* ==================== 8. 動畫減少 (prefers-reduced-motion) ==================== */

@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;
    }
    
    .fade-in-up,
    .slide-in-right,
    .super-hot-animation,
    .horse-hover-highlight {
        animation: none !important;
    }
    
    /* 停止跑馬燈動畫 */
    .ticker-content {
        animation: none !important;
    }
    
    /* 停止脈衝動畫 */
    .pulse,
    [class*="pulse"] {
        animation: none !important;
    }
}

/* ==================== 9. 高對比度模式支援 ==================== */

@media (prefers-contrast: more) {
    .text-muted {
        color: #000 !important;
    }
    
    .badge {
        border: 2px solid currentColor;
    }
    
    .card {
        border: 2px solid #000;
    }
    
    .alert {
        border-width: 3px;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
    
    .form-control,
    .form-select {
        border: 2px solid #000;
    }
    
    a {
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
    }
}

/* ==================== 10. 螢幕閱讀器專用 ==================== */

/* 視覺隱藏但螢幕閱讀器可讀 */
.sr-only,
.visually-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;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 焦點時顯示 (用於 skip link) */
.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Skip link 樣式 */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #003366;
    color: #fff;
    padding: 1rem 1.5rem;
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

/* ==================== 11. 文字間距支援 (WCAG 1.4.12) ==================== */

/* 確保文字間距調整不會破壞版面 */
body {
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
}

p, li, dd, dt, td, th {
    line-height: 1.5;
}

/* ==================== 12. 內容重排支援 (WCAG 1.4.10) ==================== */

/* 確保在 320px 寬度下內容可重排 */
@media (max-width: 320px) {
    .container,
    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    h1, .h1 { font-size: 1.25rem; }
    h2, .h2 { font-size: 1.1rem; }
    h3, .h3 { font-size: 1rem; }
}

/* ==================== 13. 圖片無障礙 ==================== */

/* 確保圖片有替代文字時的樣式 */
img[alt=""] {
    /* 裝飾性圖片 - 無需特殊樣式 */
    border: none;
}

img:not([alt]) {
    /* 缺少 alt 的圖片 - 開發時可加紅框提醒 */
    /* outline: 3px solid red; */
    border: none;
}

/* ==================== 14. 表單無障礙 ==================== */

/* 錯誤狀態 */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    border-width: 2px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* 成功狀態 */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #198754;
    border-width: 2px;
}

/* 禁用狀態 */
.form-control:disabled,
.form-select:disabled {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* ==================== 15. WCAG 2.2 AA 標章樣式 ==================== */

.wcag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #003366, #005B9A);
    color: #fff;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wcag-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.3);
    color: #fff;
    text-decoration: none;
}

.wcag-badge i {
    font-size: 0.9rem;
}

/* ==================== 16. 載入狀態無障礙 ==================== */

/* 載入中的 aria-busy 樣式 */
[aria-busy="true"] {
    cursor: wait;
}

/* 載入動畫 - 確保對螢幕閱讀器友好 */
.spinner-border,
.spinner-grow {
    display: inline-block;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .spinner-border,
    .spinner-grow {
        animation: none;
        border-width: 0.25em;
    }
}