/*
 * Theme dùng chung cho toàn bộ giao diện.
 *
 * Các trang cũ khai màu trực tiếp trong Tailwind config. 'js/theme.js' thay các
 * màu semantic đó bằng biến CSS dưới đây trước khi Tailwind dựng stylesheet, nhờ
 * vậy mọi lớp bg-surface, text-on-surface, border-outline-variant... đổi đồng bộ
 * mà không cần duy trì hai bộ markup.
 */

:root,
html[data-theme="light"] {
    color-scheme: light;

    --color-background: 245 248 252;
    --color-on-background: 10 37 64;
    --color-surface: 255 255 255;
    --color-surface-dim: 232 238 245;
    --color-surface-bright: 255 255 255;
    --color-surface-container-lowest: 255 255 255;
    --color-surface-container-low: 248 250 253;
    --color-surface-container: 239 244 249;
    --color-surface-container-high: 229 236 244;
    --color-surface-container-highest: 218 228 238;
    --color-surface-variant: 218 228 238;
    --color-on-surface: 10 37 64;
    --color-on-surface-variant: 70 91 113;
    --color-surface-tint: 25 118 210;

    /* Material Blue 700 — màu thương hiệu #1976D2 của giao diện sáng. */
    --color-primary: 25 118 210;
    --color-on-primary: 255 255 255;
    --color-primary-container: 227 242 253;
    --color-on-primary-container: 13 71 161;
    --color-primary-fixed: 227 242 253;
    --color-primary-fixed-dim: 144 202 249;
    --color-on-primary-fixed: 13 71 161;
    --color-on-primary-fixed-variant: 21 101 192;

    --color-secondary: 25 118 210;
    --color-on-secondary: 255 255 255;
    --color-secondary-container: 227 242 253;
    --color-on-secondary-container: 13 71 161;
    --color-secondary-fixed: 227 242 253;
    --color-secondary-fixed-dim: 144 202 249;
    --color-on-secondary-fixed: 13 71 161;
    --color-on-secondary-fixed-variant: 21 101 192;

    --color-tertiary: 21 101 192;
    --color-on-tertiary: 255 255 255;
    --color-tertiary-container: 227 242 253;
    --color-on-tertiary-container: 13 71 161;
    --color-tertiary-fixed: 227 242 253;
    --color-tertiary-fixed-dim: 144 202 249;
    --color-on-tertiary-fixed: 13 71 161;
    --color-on-tertiary-fixed-variant: 21 101 192;

    --color-outline: 111 132 153;
    --color-outline-variant: 198 211 224;
    --color-error: 180 35 24;
    --color-on-error: 255 255 255;
    --color-error-container: 254 228 226;
    --color-on-error-container: 104 17 12;

    --color-inverse-surface: 10 37 64;
    --color-inverse-on-surface: 245 248 252;
    --color-inverse-primary: 144 202 249;

    --color-glow-cyan: 25 118 210;
    --color-grid-line: 25 118 210;
    --color-accent-line: 25 118 210;
    --color-surface-glass: 255 255 255;
    --color-input-bg: 255 255 255;
    --alpha-surface-glass: 0.86;
    --alpha-input-bg: 0.96;

    --theme-shadow: 0 18px 48px rgba(25, 118, 210, 0.14);
    --theme-shadow-soft: 0 10px 30px rgba(25, 118, 210, 0.1);
}

html.dark,
html[data-theme="dark"] {
    color-scheme: dark;

    --color-background: 8 19 42;
    --color-on-background: 217 226 255;
    --color-surface: 8 19 42;
    --color-surface-dim: 8 19 42;
    --color-surface-bright: 47 57 82;
    --color-surface-container-lowest: 3 13 37;
    --color-surface-container-low: 16 27 51;
    --color-surface-container: 21 31 55;
    --color-surface-container-high: 31 41 66;
    --color-surface-container-highest: 42 52 77;
    --color-surface-variant: 42 52 77;
    --color-on-surface: 217 226 255;
    --color-on-surface-variant: 197 198 205;
    --color-surface-tint: 185 199 228;

    --color-primary: 185 199 228;
    --color-on-primary: 35 49 72;
    --color-primary-container: 10 25 47;
    --color-on-primary-container: 116 130 157;
    --color-primary-fixed: 214 227 255;
    --color-primary-fixed-dim: 185 199 228;
    --color-on-primary-fixed: 13 28 50;
    --color-on-primary-fixed-variant: 57 71 95;

    --color-secondary: 65 228 192;
    --color-on-secondary: 0 56 45;
    --color-secondary-container: 0 199 165;
    --color-on-secondary-container: 0 77 63;
    --color-secondary-fixed: 95 251 214;
    --color-secondary-fixed-dim: 56 222 187;
    --color-on-secondary-fixed: 0 32 25;
    --color-on-secondary-fixed-variant: 0 81 66;

    --color-tertiary: 188 198 230;
    --color-on-tertiary: 38 48 73;
    --color-tertiary-container: 13 24 48;
    --color-on-tertiary-container: 119 129 159;
    --color-tertiary-fixed: 217 226 255;
    --color-tertiary-fixed-dim: 188 198 230;
    --color-on-tertiary-fixed: 16 27 51;
    --color-on-tertiary-fixed-variant: 60 70 97;

    --color-outline: 143 144 151;
    --color-outline-variant: 68 71 77;
    --color-error: 255 180 171;
    --color-on-error: 105 0 5;
    --color-error-container: 147 0 10;
    --color-on-error-container: 255 218 214;

    --color-inverse-surface: 217 226 255;
    --color-inverse-on-surface: 38 48 73;
    --color-inverse-primary: 81 95 120;

    --color-glow-cyan: 65 228 192;
    --color-grid-line: 65 228 192;
    --color-accent-line: 65 228 192;
    --color-surface-glass: 15 25 45;
    --color-input-bg: 8 19 42;
    --alpha-surface-glass: 0.72;
    --alpha-input-bg: 0.82;

    --theme-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
    --theme-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);
}

html {
    background: rgb(var(--color-background));
}

body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-on-background));
    transition: background-color 180ms ease, color 180ms ease;
}

::selection {
    background: rgb(var(--color-secondary) / 0.24);
    color: rgb(var(--color-on-surface));
}

/* Nút chuyển theme nổi, dùng chung cho cả desktop, mobile và các màn auth. */
.theme-switch {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 7px 13px 7px 8px;
    border: 1px solid rgb(var(--color-outline-variant) / 0.9);
    border-radius: 999px;
    background: rgb(var(--color-surface-glass) / var(--alpha-surface-glass));
    color: rgb(var(--color-on-surface));
    box-shadow: var(--theme-shadow-soft);
    font: 600 13px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.theme-switch:hover {
    border-color: rgb(var(--color-secondary) / 0.75);
    box-shadow: 0 12px 34px rgb(var(--color-secondary) / 0.18);
    transform: translateY(-2px);
}

.theme-switch:focus-visible {
    outline: 3px solid rgb(var(--color-secondary) / 0.28);
    outline-offset: 3px;
}

.theme-switch__icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: rgb(var(--color-primary-container));
    color: rgb(var(--color-primary));
    font-size: 18px;
    line-height: 1;
}

.theme-switch__moon {
    display: none;
}

html[data-theme="dark"] .theme-switch__sun {
    display: none;
}

html[data-theme="dark"] .theme-switch__moon {
    display: inline;
}

/* Những lớp custom/hard-code từ bản tối cần màu tương ứng ở bản sáng. */
html[data-theme="light"] .glass-panel,
html[data-theme="light"] .glass-card {
    background: rgb(255 255 255 / 0.82) !important;
    border-color: rgb(var(--color-outline-variant) / 0.78) !important;
    box-shadow: var(--theme-shadow-soft);
}

html[data-theme="light"] .input-dark {
    border-color: rgb(var(--color-outline-variant)) !important;
    background: rgb(var(--color-input-bg) / var(--alpha-input-bg)) !important;
    color: rgb(var(--color-on-surface)) !important;
}

html[data-theme="light"] .input-dark::placeholder {
    color: rgb(var(--color-on-surface-variant) / 0.68) !important;
}

html[data-theme="light"] .input-dark:focus {
    border-color: rgb(var(--color-secondary)) !important;
    box-shadow: 0 0 0 3px rgb(var(--color-secondary) / 0.12) !important;
}

html[data-theme="light"] .animated-grid,
html[data-theme="light"] .bg-cyber-grid {
    background-image:
        linear-gradient(to right, rgb(var(--color-grid-line) / 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--color-grid-line) / 0.055) 1px, transparent 1px) !important;
}

html[data-theme="light"] .mix-blend-screen {
    mix-blend-mode: multiply !important;
}

html[data-theme="light"] .glow-accent,
html[data-theme="light"] .glow-active,
html[data-theme="light"] .glow-effect {
    box-shadow: 0 10px 30px rgb(var(--color-secondary) / 0.16) !important;
}

html[data-theme="light"] .text-glow {
    text-shadow: 0 3px 18px rgb(var(--color-secondary) / 0.2) !important;
}

html[data-theme="light"] .bg-slate-900\/70 {
    background-color: rgb(255 255 255 / 0.88) !important;
}

html[data-theme="light"] .bg-slate-950\/70 {
    background-color: rgb(247 250 253 / 0.96) !important;
}

html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-white {
    color: rgb(var(--color-on-surface)) !important;
}

html[data-theme="light"] .text-slate-300 {
    color: rgb(55 78 101) !important;
}

html[data-theme="light"] .text-slate-400 {
    color: rgb(var(--color-on-surface-variant)) !important;
}
/* Chữ độc lập dùng Blue 800 để đạt AA trên nền sáng. */
html[data-theme="light"] .text-primary,
html[data-theme="light"] .text-secondary {
    color: rgb(21 101 192) !important;
}

/* CTA nền xanh luôn dùng chữ trắng. Bao phủ button, link giả button và nội dung
 * được render động bằng JavaScript mà không tác động tới giao diện tối. */
html[data-theme="light"] button[class~="bg-primary"],
html[data-theme="light"] button[class~="bg-secondary"],
html[data-theme="light"] a[class~="bg-primary"],
html[data-theme="light"] a[class~="bg-secondary"],
html[data-theme="light"] button[class~="from-primary"][class~="to-secondary"],
html[data-theme="light"] a[class~="from-primary"][class~="to-secondary"] {
    color: rgb(255 255 255) !important;
}

html[data-theme="light"] button[class~="hover:bg-secondary"]:hover,
html[data-theme="light"] a[class~="hover:bg-secondary"]:hover {
    color: rgb(255 255 255) !important;
}

html[data-theme="light"] button[class~="hover:bg-secondary-fixed"]:hover,
html[data-theme="light"] button[class~="hover:bg-secondary-fixed-dim"]:hover,
html[data-theme="light"] a[class~="hover:bg-secondary-fixed"]:hover,
html[data-theme="light"] a[class~="hover:bg-secondary-fixed-dim"]:hover {
    background-color: rgb(21 101 192) !important;
    color: rgb(255 255 255) !important;
}

html[data-theme="light"] .hover\:text-white:hover {
    color: rgb(var(--color-primary)) !important;
}

html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/20 {
    border-color: rgb(var(--color-outline-variant) / 0.8) !important;
}

html[data-theme="light"] .bg-white\/10 {
    background-color: rgb(var(--color-primary) / 0.08) !important;
}

html[data-theme="light"] [class~="bg-[#0a152a]"] {
    background-color: rgb(var(--color-surface-container)) !important;
}

html[data-theme="light"] [class~="text-[#002019]"] {
    color: rgb(var(--color-on-secondary)) !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgb(var(--color-surface-container-low));
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-outline-variant));
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-secondary));
}

@media (max-width: 767px) {
    .theme-switch {
        right: 14px;
        bottom: 76px;
        padding-right: 10px;
    }

    .theme-switch__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .theme-switch {
        transition: none;
    }
}


/*
 * `element.hidden = true` phải thực sự ẩn được phần tử.
 *
 * Quy tắc `[hidden] { display: none }` của trình duyệt là style mặc định, thua
 * mọi class. Tailwind thì gắn `display` vào chính class bố cục: thẻ CTA "Bắt
 * đầu Đánh giá Mới" mang `class="... flex ..."`, nên `.flex { display: flex }`
 * đè `[hidden]` và nút vẫn hiện nguyên. Hậu quả đo được ngày 18/08: tài khoản
 * giáo viên/quản trị bị `user-badge.js` ẩn hết mục sinh viên nhưng vẫn thấy nút
 * mời nộp CV — lối vào một luồng không dành cho họ.
 *
 * Đặt ở đây, không sửa lẻ từng thẻ: mọi chỗ dùng `hidden` (nay và sau này) đều
 * cần đúng một nghĩa "biến mất", kể cả khi thẻ đó có class bố cục.
 */
[hidden] {
    display: none !important;
}

/*
 * Chú thích bật lên (`goiY` trong js/assessment-result.js).
 *
 * Toàn bộ định vị + ẩn/hiện nằm ở đây, không ở class Tailwind. Hai lý do đo được
 * ngày 19/08: biến thể `group-focus-within:` không được sinh ra cho markup do JS
 * chèn sau khi trang đã tải; và `.absolute` của Tailwind cùng specificity với
 * quy tắc dưới đây nhưng `<style>` của nó nạp sau theme.css nên luôn thắng —
 * bản mobile `position: fixed` bị nuốt mà không có dấu hiệu gì.
 *
 * Hiện khi rê chuột **và** khi focus vào nút: người dùng bàn phím và người dùng
 * cảm ứng (chạm = focus) phải đọc được cùng nội dung với người dùng chuột.
 */
[data-goi-y-neo] {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

[data-goi-y] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin-top: 0.5rem;
    width: 18rem;
    max-width: 80vw;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s;
}

/* Bảng nằm sát mép phải của thẻ: neo trái sẽ đẩy bong bóng ra ngoài màn. */
[data-goi-y][data-canh-phai] {
    left: auto;
    right: 0;
}

[data-goi-y-neo]:hover > [data-goi-y],
[data-goi-y-neo]:focus-within > [data-goi-y],
[data-goi-y-neo][data-goi-y-mo] > [data-goi-y] {
    opacity: 1;
    visibility: visible;
}

/*
 * Màn dưới 1024px: neo vào khung nhìn thay vì vào nút.
 *
 * Bong bóng rộng 18rem treo dưới một nút rộng 16px thì ở khổ điện thoại luôn thò
 * ra ngoài — đo được: mép phải ở 597px trong khung nhìn 496px, còn bản canh phải
 * thì thò sang trái tới -85px, và ở 900px bản neo trái vẫn thò 11px. CSS không
 * biết trước mép nào còn chỗ, nên dưới 1024px bỏ hẳn việc neo theo nút: chú
 * thích nằm sát đáy màn, chừa chỗ cho thanh điều hướng dưới.
 */
@media (max-width: 1023px) {
    [data-goi-y],
    [data-goi-y][data-canh-phai] {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 5rem;
        width: auto;
        max-width: none;
        margin-top: 0;
        z-index: 60;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-goi-y] {
        transition: none;
    }
}