/*
 * iKH EDU shared UI layer — docs/ux/ikh-edu-design-system.md
 *
 * Loaded by templates/base.html after the inline base styles and before each
 * page's {% block media %}. Bootstrap 5.3 + the brand tokens defined in
 * base.html (:root / [data-bs-theme="dark"]) stay the foundation; this file adds
 * the missing shared tokens and the cross-page components/behaviours.
 *
 * Production serves /static directly (no collectstatic): keep
 * resources/ikh/ikh-ui.css and static/ikh/ikh-ui.css byte-identical.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    --ikh-primary: var(--brand-blue, #0054a6);
    --ikh-primary-hover: var(--brand-blue-hover, #004488);
    --ikh-primary-soft: var(--brand-blue-soft, rgba(0, 84, 166, .08));
    --ikh-accent: var(--brand-red, #ed1c24);
    --ikh-success: var(--brand-success, #10b981);
    --ikh-warning: var(--color-warning, #f59e0b);
    --ikh-danger: #dc2626;
    --ikh-surface: var(--color-surface, #ffffff);
    --ikh-surface-muted: #f8fafc;
    --ikh-border: var(--color-border, #e2e8f0);
    --ikh-text: #0f172a;
    --ikh-text-muted: #475569; /* 7.5:1 on white — AA for small text */

    --ikh-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --ikh-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ikh-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ikh-space-1: 4px;
    --ikh-space-2: 8px;
    --ikh-space-3: 12px;
    --ikh-space-4: 16px;
    --ikh-space-5: 24px;
    --ikh-space-6: 32px;

    --ikh-radius-sm: 6px;
    --ikh-radius-md: 12px;
    --ikh-radius-lg: 16px;
    --ikh-radius-pill: 999px;

    --ikh-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, .06));
    --ikh-shadow-md: var(--shadow-md, 0 4px 16px rgba(15, 23, 42, .08));

    --ikh-focus-ring: 0 0 0 3px rgba(0, 84, 166, .45);
    --ikh-touch: 44px;
    --ikh-ease: cubic-bezier(.4, 0, .2, 1);
}

[data-bs-theme="dark"] {
    --ikh-primary: #38bdf8;
    --ikh-primary-hover: #7dd3fc;
    --ikh-primary-soft: rgba(56, 189, 248, .14);
    --ikh-danger: #f87171;
    --ikh-surface: #1e293b;
    --ikh-surface-muted: #0f172a;
    --ikh-border: #334155;
    --ikh-text: #f1f5f9;
    --ikh-text-muted: #cbd5e1;
    --ikh-focus-ring: 0 0 0 3px rgba(125, 211, 252, .55);
}

/* ── 1b. Bootstrap palette → brand, AA contrast (light theme) ───────────── */
/* Bootstrap's default #0d6efd (4.3-4.5:1 on light surfaces) and its warning /
   success / secondary text colours fail WCAG AA in many templates that use the
   stock utilities. Map them once to accessible brand shades (axe-verified). */
:root:not([data-bs-theme="dark"]) {
    --bs-primary: #0054a6;
    --bs-primary-rgb: 0, 84, 166;
    --bs-link-color: #0054a6;
    --bs-link-color-rgb: 0, 84, 166;
    --bs-link-hover-color: #004488;
    --bs-link-hover-color-rgb: 0, 68, 136;
    --bs-secondary-color: rgba(33, 37, 41, .8);
}
:root:not([data-bs-theme="dark"]) {
    --bs-success: #047857;
    --bs-success-rgb: 4, 120, 87;
}
:root:not([data-bs-theme="dark"]) .text-secondary { color: #5c636a !important; }
:root:not([data-bs-theme="dark"]) .badge.bg-success { background-color: #047857 !important; }
:root:not([data-bs-theme="dark"]) .premium-label { color: #64748b !important; }
:root:not([data-bs-theme="dark"]) .btn-outline-secondary {
    --bs-btn-color: #475569;
    --bs-btn-border-color: #94a3b8;
    --bs-btn-hover-bg: #475569;
    --bs-btn-hover-border-color: #475569;
}
:root:not([data-bs-theme="dark"]) .text-danger { color: #b91c1c !important; }
:root:not([data-bs-theme="dark"]) .text-warning { color: #b45309 !important; }
:root:not([data-bs-theme="dark"]) .text-success { color: #047857 !important; }
:root:not([data-bs-theme="dark"]) .btn-outline-primary {
    --bs-btn-color: #0054a6;
    --bs-btn-border-color: #0054a6;
    --bs-btn-hover-bg: #0054a6;
    --bs-btn-hover-border-color: #0054a6;
    --bs-btn-active-bg: #004488;
    --bs-btn-active-border-color: #004488;
    --bs-btn-disabled-color: #0054a6;
    --bs-btn-disabled-border-color: #0054a6;
}
:root:not([data-bs-theme="dark"]) .btn-outline-warning {
    --bs-btn-color: #92400e;
    --bs-btn-border-color: #d97706;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b45309;
    --bs-btn-hover-border-color: #b45309;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #92400e;
    --bs-btn-active-border-color: #92400e;
}
:root:not([data-bs-theme="dark"]) .btn-success {
    background-color: #047857 !important; /* 5.5:1 with white text */
    border-color: #047857 !important;
    color: #fff !important;
}
:root:not([data-bs-theme="dark"]) .btn-success:hover { background-color: #065f46 !important; border-color: #065f46 !important; }

/* ── 1c. Dark theme → AA contrast ────────────────────────────────────────── */
/* The dark tokens turn brand blue/green into light tints (#38bdf8, #34d399) that white text
   cannot sit on, and Bootstrap's mid greys fall under 4.5:1 on the dark surfaces
   (#0f172a / #1e293b). Measured with axe-core; every pair below is >= 4.5:1. */
:root[data-bs-theme="dark"] .btn-primary:not(:hover) { background-color: #0369a1 !important; border-color: #0369a1 !important; color: #fff !important; }
:root[data-bs-theme="dark"] .btn-primary:hover { background-color: #075985 !important; border-color: #075985 !important; color: #fff !important; }
:root[data-bs-theme="dark"] .btn-success:not(:hover) { background-color: #047857 !important; border-color: #047857 !important; color: #fff !important; }
:root[data-bs-theme="dark"] .btn-success:hover { background-color: #065f46 !important; border-color: #065f46 !important; color: #fff !important; }
:root[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #cbd5e1; --bs-btn-border-color: #64748b; color: #cbd5e1; }
:root[data-bs-theme="dark"] .text-secondary { color: #a8b3c1 !important; }
:root[data-bs-theme="dark"] .text-danger { color: #f87171 !important; }
:root[data-bs-theme="dark"] .text-success { color: #4ade80 !important; }
:root[data-bs-theme="dark"] .text-brand-blue,
:root[data-bs-theme="dark"] .badge.text-primary { color: #93c5fd !important; }
:root[data-bs-theme="dark"] .premium-label { color: #94a3b8 !important; }
:root[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #f87171; --bs-btn-border-color: #f87171; color: #f87171; }
:root[data-bs-theme="dark"] .badge.bg-success { background-color: #047857 !important; color: #fff !important; }
:root[data-bs-theme="dark"] body a.btn-go-now,
:root[data-bs-theme="dark"] body .recommendation-card a.btn-go-now { color: #fff !important; }

/* ── 2. Base accessibility ─────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--ikh-primary);
    outline-offset: 2px;
}
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
    box-shadow: var(--ikh-focus-ring) !important;
}
.ikh-skip-link {
    position: absolute;
    left: var(--ikh-space-4);
    top: -100px;
    z-index: 2000;
    padding: var(--ikh-space-2) var(--ikh-space-4);
    border-radius: var(--ikh-radius-sm);
    background: var(--ikh-primary);
    color: #fff !important;
    font-weight: 700;
}
.ikh-skip-link:focus { top: var(--ikh-space-2); }

img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }

@media (prefers-reduced-motion: reduce) {
    .ikh-chevron, .ikh-card, .ikh-quick-action { transition: none !important; }
}

/* ── 3. Header: dropdown affordance ────────────────────────────────────── */
/* Buttons styled as nav links (dropdown triggers). */
.navbar button.nav-link {
    border: 0;
    cursor: pointer;
    font: inherit;
}
.ikh-dd-toggle::after { display: none !important; content: none !important; }
.ikh-chevron {
    font-size: .62em;
    margin-left: .4rem;
    opacity: .75;
    transition: transform .2s var(--ikh-ease);
}
[aria-expanded="true"] > .ikh-chevron { transform: rotate(180deg); opacity: 1; }
.navbar .dropdown-menu { min-width: 232px; }
.navbar .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    white-space: normal;
}
.ikh-dd-note { display: block; max-width: 260px; white-space: normal; line-height: 1.4; }
.ikh-icon-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* ── 4. Header: mobile / tablet (< 992px, navbar collapsed) ────────────── */
@media (max-width: 991.98px) {
    .navbar .navbar-brand img { height: 44px; }
    .navbar-toggler { min-width: var(--ikh-touch); min-height: var(--ikh-touch); }
    #mainNavbar.show,
    #mainNavbar.collapsing {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #mainNavbar .ikh-primary-nav { padding: var(--ikh-space-2) 0; gap: 2px; }
    #mainNavbar .ikh-primary-nav .nav-link {
        width: 100%;
        justify-content: flex-start !important;
        min-height: var(--ikh-touch);
        border-radius: var(--ikh-radius-md) !important;
    }
    #mainNavbar .ikh-primary-nav .ikh-chevron { margin-left: auto; }
    #mainNavbar .ikh-primary-nav .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        box-shadow: none !important;
        margin: 0 0 var(--ikh-space-2);
        padding: var(--ikh-space-1) 0 var(--ikh-space-1) var(--ikh-space-4) !important;
        background: transparent;
        border-left: 2px solid var(--ikh-border) !important;
        border-radius: 0 !important;
    }
    #mainNavbar .dropdown-item { min-height: var(--ikh-touch); }
    #mainNavbar .ikh-header-tools {
        flex-wrap: wrap;
        gap: var(--ikh-space-3) !important;
        padding: var(--ikh-space-3) 0 var(--ikh-space-2);
        border-top: 1px solid var(--ikh-border);
    }
    #mainNavbar .ikh-header-tools .dropdown-menu { position: absolute; }
    #mainNavbar .ikh-auth-actions { flex: 1 1 100%; }
    #mainNavbar .ikh-auth-actions .btn { flex: 1 1 0; }
}
/* Desktop header density: labels collapse to icons before anything wraps. */
#navbar-chat-trigger, .ikh-dd-toggle { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1535.98px) {
    .ikh-chat-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #navbar-chat-trigger { width: 42px; padding: 0 !important; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    #nav-language .ikh-lang-label { display: none; }
    .navbar .ikh-primary-nav .nav-link { padding: 8px 10px !important; }
}
/* Collapsed-desktop band (992–1199): the full teacher/admin header must fit on one
   line — labels never wrap; the account name and brand shrink instead. */
@media (min-width: 992px) {
    .navbar .ikh-primary-nav .nav-link { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar .navbar-brand img { height: 48px; }
    .navbar .ikh-primary-nav .nav-link { padding: 8px 7px !important; font-size: 14px !important; }
    .navbar .ikh-header-tools { gap: .5rem !important; }
    .user-dropdown .d-md-block { display: none !important; }
}
@media (max-width: 399.98px) {
    .ikh-chat-label { display: none; }
}
/* The assistant entry reads "AI" even where its label collapses to an icon. */
.ikh-ai-mark { font-weight: 800; font-size: .82rem; letter-spacing: .02em; line-height: 1; }

/* White text on the brand red (#ed1c24) is 4.38:1, below WCAG AA (4.5:1): filled red buttons
   use a slightly deeper brand red (5.3:1). Hover keeps --brand-red-hover (5.9:1). */
.btn.btn-danger:not(:hover) { background-color: #d4161e !important; border-color: #d4161e !important; }

/* ── 5. Page structure ─────────────────────────────────────────────────── */
.ikh-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ikh-space-3);
    margin-bottom: var(--ikh-space-5);
}
.ikh-page-title {
    font-family: var(--ikh-font-heading);
    font-weight: 800;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    line-height: 1.2;
    margin: 0;
    color: var(--ikh-text);
}
.ikh-page-subtitle { color: var(--ikh-text-muted); margin: var(--ikh-space-1) 0 0; font-size: .95rem; }
.ikh-section-title {
    display: flex;
    align-items: center;
    gap: var(--ikh-space-2);
    font-family: var(--ikh-font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0 0 var(--ikh-space-3);
    color: var(--ikh-text);
}

/* ── 6. Card ───────────────────────────────────────────────────────────── */
.ikh-card {
    background: var(--ikh-surface);
    border: 1px solid var(--ikh-border);
    border-radius: var(--ikh-radius-lg);
    box-shadow: var(--ikh-shadow-sm);
    padding: var(--ikh-space-5);
    min-width: 0;
}
.ikh-card-link { display: block; color: inherit !important; text-decoration: none !important; transition: border-color .15s var(--ikh-ease), box-shadow .15s var(--ikh-ease); }
.ikh-card-link:hover { border-color: var(--ikh-primary); box-shadow: var(--ikh-shadow-md); }
.ikh-card-title { font-weight: 700; font-size: .98rem; margin: 0 0 var(--ikh-space-1); color: var(--ikh-text); }
.ikh-card-meta { font-size: .82rem; color: var(--ikh-text-muted); }

.ikh-grid {
    display: grid;
    gap: var(--ikh-space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/* ── 7. Quick actions ──────────────────────────────────────────────────── */
.ikh-quick-actions {
    display: grid;
    gap: var(--ikh-space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.ikh-quick-action {
    display: flex;
    align-items: center;
    gap: var(--ikh-space-3);
    min-height: 64px;
    padding: var(--ikh-space-3) var(--ikh-space-4);
    background: var(--ikh-surface);
    border: 1px solid var(--ikh-border);
    border-radius: var(--ikh-radius-md);
    color: var(--ikh-text) !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: border-color .15s var(--ikh-ease), transform .15s var(--ikh-ease);
}
.ikh-quick-action:hover { border-color: var(--ikh-primary); transform: translateY(-1px); }
.ikh-quick-action-icon {
    flex: 0 0 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ikh-radius-md);
    background: var(--ikh-primary-soft);
    color: var(--ikh-primary);
}
.ikh-quick-action-text { min-width: 0; line-height: 1.3; font-size: .95rem; }
.ikh-quick-action-text small { display: block; font-weight: 500; color: var(--ikh-text-muted); font-size: .78rem; }

/* ── 8. States: empty / error / permission / loading ───────────────────── */
.ikh-state {
    text-align: center;
    padding: var(--ikh-space-6) var(--ikh-space-4);
    border: 1px dashed var(--ikh-border);
    border-radius: var(--ikh-radius-lg);
    background: var(--ikh-surface);
}
.ikh-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: var(--ikh-space-3);
    font-size: 1.4rem;
    background: var(--ikh-primary-soft);
    color: var(--ikh-primary);
}
.ikh-state-error .ikh-state-icon { background: rgba(220, 38, 38, .1); color: var(--ikh-danger); }
.ikh-state-denied .ikh-state-icon { background: rgba(245, 158, 11, .14); color: #b45309; }
.ikh-state-title { font-weight: 800; font-size: 1.1rem; margin: 0 0 var(--ikh-space-2); color: var(--ikh-text); }
.ikh-state-text { color: var(--ikh-text-muted); max-width: 460px; margin: 0 auto var(--ikh-space-4); }
.ikh-state-actions { display: flex; flex-wrap: wrap; gap: var(--ikh-space-2); justify-content: center; }

/* ── 9. Access-state badges (course) ───────────────────────────────────── */
.ikh-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--ikh-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ikh-badge-free { background: #dcfce7; color: #166534; }
.ikh-badge-trial { background: #e0f2fe; color: #075985; }
.ikh-badge-purchase { background: #fef3c7; color: #92400e; }
.ikh-badge-owned { background: #dbeafe; color: #1e40af; }
.ikh-badge-pending { background: #fef9c3; color: #854d0e; }
.ikh-badge-inactive { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.ikh-badge-archived { background: #f5f5f4; color: #57534e; border-color: #e7e5e4; }
[data-bs-theme="dark"] .ikh-badge-free { background: rgba(34, 197, 94, .16); color: #86efac; }
[data-bs-theme="dark"] .ikh-badge-trial { background: rgba(14, 165, 233, .16); color: #7dd3fc; }
[data-bs-theme="dark"] .ikh-badge-purchase { background: rgba(245, 158, 11, .16); color: #fcd34d; }
[data-bs-theme="dark"] .ikh-badge-owned { background: rgba(59, 130, 246, .18); color: #93c5fd; }
[data-bs-theme="dark"] .ikh-badge-pending { background: rgba(234, 179, 8, .16); color: #fde047; }
[data-bs-theme="dark"] .ikh-badge-inactive,
[data-bs-theme="dark"] .ikh-badge-archived { background: rgba(148, 163, 184, .14); color: #cbd5e1; border-color: #334155; }

/* ── 10. Lists ─────────────────────────────────────────────────────────── */
.ikh-list { list-style: none; margin: 0; padding: 0; }
.ikh-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ikh-space-3);
    padding: var(--ikh-space-3) 0;
    border-bottom: 1px solid var(--ikh-border);
    min-width: 0;
}
.ikh-list-item:last-child { border-bottom: 0; }
.ikh-list-item > :first-child { min-width: 0; }

/* ── 11. Tables: never overflow the page ───────────────────────────────── */
.ikh-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
    /* Opt-in stacked layout: <table class="ikh-table-stack"> with data-label on <td>. */
    .ikh-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ikh-table-stack, .ikh-table-stack tbody, .ikh-table-stack tr, .ikh-table-stack td { display: block; width: 100%; }
    .ikh-table-stack tr { border: 1px solid var(--ikh-border); border-radius: var(--ikh-radius-md); margin-bottom: var(--ikh-space-3); padding: var(--ikh-space-2) var(--ikh-space-3); }
    .ikh-table-stack td { display: flex; justify-content: space-between; gap: var(--ikh-space-3); border: 0 !important; padding: 6px 0 !important; text-align: right; }
    .ikh-table-stack td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--ikh-text-muted); text-align: left; }
}

/* ── 12. Modals: never taller than the viewport ────────────────────────── */
.modal-dialog:not(.modal-fullscreen) .modal-content { max-height: calc(100vh - 3.5rem); }
.modal-dialog:not(.modal-fullscreen) .modal-body { overflow-y: auto; }
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) { margin: .5rem; }
    .modal-dialog:not(.modal-fullscreen) .modal-content { max-height: calc(100vh - 1rem); }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer > .btn { flex: 1 1 auto; }
}
.modal-header .btn-close { min-width: 32px; min-height: 32px; }

/* ── 13. Forms ─────────────────────────────────────────────────────────── */
.ikh-required::after { content: " *"; color: var(--ikh-danger); font-weight: 700; }
.form-label { font-weight: 600; }
.invalid-feedback, .errorlist { color: var(--ikh-danger); }
@media (max-width: 575.98px) {
    /* iOS zooms inputs under 16px on focus. */
    input.form-control, select.form-select, textarea.form-control { font-size: 16px; }
}

/* ── 14. Global overflow guards for long content ───────────────────────── */
/* base.html forces breadcrumb items to nowrap; long course/lesson names then
   push the page sideways on phones. Let the trail wrap instead. */
.breadcrumb { flex-wrap: wrap; row-gap: 2px; }
.breadcrumb .breadcrumb-item { white-space: normal !important; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin: 0 8px !important; }
}
main pre { max-width: 100%; overflow-x: auto; }
footer .ikh-footer-logo { height: 40px; width: auto; max-width: 45%; }
main .table-responsive { -webkit-overflow-scrolling: touch; }

/* ── 15. Touch targets (phones / tablets) ────────────────────────────────── */
/* Interactive controls reach 44px on touch widths (WCAG 2.5.8 AA asks 24px; 44px is the
   touch guideline). Inline links inside running text keep the text flow. */
@media (max-width: 991.98px) {
    .btn, .dropdown-item, .page-link, .nav-link.filter-tab, .st-tab-btn { min-height: 44px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; }
    .btn-close-drawer { min-width: 44px; min-height: 44px; }
    .ikh-skip-link { min-height: 44px; display: inline-flex; align-items: center; }
    a.ws-tab-link:not(.small .ws-tab-link), a.contest-sidebar-link, a.pillar-link, a.ikh-touch-link,
    .ws-header nav[aria-label="breadcrumb"] a {
        display: inline-flex; align-items: center; min-height: 44px;
    }
}

/* ── 16. Floating code-playground button ─────────────────────────────────── */
/* Never above overlays (Bootstrap modal backdrop is 1050), hidden while a modal is open,
   smaller on phones, and the footer reserves room so it never hides the last controls. */
body .playground-fab { z-index: 1025; }
body.modal-open .playground-fab { display: none; }
@media (max-width: 767.98px) {
    body .playground-fab { width: 48px; height: 48px; right: 16px; bottom: 16px; }
    main + footer { padding-bottom: calc(3rem + 64px) !important; }
}