/**
 * learning.css — Theme-aware shared styles cho tất cả module học tập
 * Đồng bộ font, màu sắc, border-radius theo cài đặt Admin > Appearance
 * v1.0 — 2026-04
 */

/* ═══ 1. BRIDGE: Map HSK theme vars → learning vars ═══ */
:root {
    --learn-primary:    var(--hsk-primary,   var(--color-warning));
    --learn-secondary:  var(--hsk-secondary, var(--color-accent));
    --learn-accent:     var(--hsk-accent,    var(--color-warning));
    --learn-radius:     var(--hsk-border-radius, 8px);

    /* Derived tones — computed từ primary */
    --learn-primary-h:     color-mix(in srgb, var(--learn-primary) 82%, black);
    --learn-primary-soft:  color-mix(in srgb, var(--learn-primary) 10%, white);
    --learn-primary-mid:   color-mix(in srgb, var(--learn-primary) 18%, white);
    --learn-primary-glow:  color-mix(in srgb, var(--learn-primary) 35%, transparent);
}

/* ═══ 2. FONT — Override mọi hardcode font sang theme font ═══ */
*,
html,
body,
button,
input,
select,
textarea {
    font-family: var(--hsk-font-body,
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif) !important;
}

/* ── Restore Font Awesome font (overridden by * rule above) ──
   Higher specificity + !important beats * !important            */
.fas,.far,.fab,.fal,.fa-solid,.fa-regular,.fa-brands,.fa-light,
i[class*="fa-"],span[class*="fa-"]{
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands","FontAwesome" !important;
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands" !important;}

/* Giữ font chữ Hán đặc thù */
.font-kaiti,
.hz-hanzi-text,
[data-hanzi],
.kaiti-font {
    font-family: 'Noto Serif SC', 'KaiTi', 'KaiTi_GB2312', 'STKaiti', 'PingFang SC', serif !important;
}

/* ═══ 3. BODY ═══ */
body {
    font-size:   var(--hsk-font-size-base, 15px) !important;
    line-height: var(--hsk-line-height, 1.65) !important;
    -webkit-font-smoothing: antialiased;
}

/* ═══ 4. HEADINGS ═══ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hsk-font-heading,
        var(--hsk-font-body, -apple-system, sans-serif)) !important;
}

/* ═══ 5. LEARNING MODULE HEADER (top bar) ═══ */
.learn-header {
    background: var(--color-surface);
    border-bottom: 1px solid rgba(0,0,0,.07);
    border-top: 3px solid var(--learn-primary);
    border-radius: var(--learn-radius) var(--learn-radius) 0 0;
}

/* ═══ 6. PRIMARY BUTTONS ═══ */
.learn-btn-primary,
.ls-btn-primary,
.fc-btn-primary,
.vp-btn-primary {
    background: var(--learn-primary) !important;
    border-color: var(--learn-primary) !important;
    color: var(--color-on-dark) !important;
    border-radius: var(--learn-radius) !important;
    font-family: var(--hsk-font-heading, var(--hsk-font-body)) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
.learn-btn-primary:hover,
.ls-btn-primary:hover,
.fc-btn-primary:hover,
.vp-btn-primary:hover {
    background: var(--learn-primary-h) !important;
    border-color: var(--learn-primary-h) !important;
    transform: translateY(-1px);
}

/* ═══ 7. PROGRESS BAR ═══ */
.learn-progress-fill,
#sb-progress-bar,
#fc-progress-fill,
#ls-progress-bar {
    background: var(--learn-primary) !important;
}

/* ═══ 8. TOP BORDER ACCENT — dòng kẻ màu bên trên card ═══ */
.learn-card-accent,
#f-header-card,
#m-header-card,
#ls-header-card {
    border-top: 3px solid var(--learn-primary) !important;
}

/* ═══ 9. BOTTOM NAV + BACK BUTTON ═══ */
.learn-back-btn,
#ls-back-btn,
#fc-back-btn,
#sp-back-btn {
    color: var(--learn-primary) !important;
    border-color: var(--learn-primary) !important;
}
.learn-back-btn:hover {
    background: var(--learn-primary-soft) !important;
}

/* ═══ 10. PINYIN / ACCENT COLORS ═══ */
.learn-pinyin,
.fc-pinyin,
.ls-pinyin {
    color: var(--learn-primary) !important;
    border-color: var(--learn-primary-mid) !important;
    background: var(--learn-primary-soft) !important;
}

/* ═══ 11. SCORE / RESULT ═══ */
.learn-score-great { color: #16a34a !important; }
.learn-score-good  { color: var(--color-accent-hover) !important; }
.learn-score-ok    { color: #d97706 !important; }
.learn-score-low   { color: var(--color-warning) !important; }

/* ═══ 12. KEYBOARD SHORTCUTS (giữ monospace) ═══ */
kbd,
[data-shortcut] {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
}

/* ═══ 13. PRINT — Đảm bảo chữ Hán hiện đúng font khi xuất PDF ═══
   Rule * { !important } ở trên sẽ ghi đè font inline của PDF boxes.
   Override lại bằng #hz-print-area (higher specificity) trong @media print. */
@media print {
    #hz-print-area *,
    #hz-print-area span {
        font-family: 'Noto Serif SC', 'Kaiti SC', 'STKaiti', 'KaiTi', '楷体',
                     'KaiTi_GB2312', 'Noto Sans SC', 'PingFang SC',
                     'Microsoft YaHei', serif !important;
    }
}