/* =====================================================================
   HỆ THỐNG GIAO DIỆN "BẢNG ĐEN & PHẤN"  (Sổ Theo Dõi Nề Nếp)
   - Màu chủ đạo: xanh bảng (chalkboard teal), điểm nhấn vàng nghệ
   - Tối ưu cho cả máy tính (bảng dữ liệu dày) và điện thoại (chạm nhanh)
   ===================================================================== */

:root {
    /* Màu thương hiệu */
    --board:        #0E4B45;
    --board-700:    #0A3A35;
    --board-600:    #12574F;
    --board-500:    #177064;
    --board-100:    #CFE4DF;
    --board-050:    #E9F3F0;

    /* Chữ & nền */
    --ink:          #14211F;
    --ink-2:        #47605C;
    --ink-3:        #7B918D;
    --paper:        #EFF4F2;
    --surface:      #FFFFFF;
    --surface-2:    #F7FAF9;
    --line:         #DCE7E4;
    --line-2:       #C6D6D2;

    /* Ngữ nghĩa */
    --moss:         #1E8A5B;   /* tích cực */
    --moss-700:     #16704A;
    --moss-050:     #E6F4EC;
    --inkred:       #C33B33;   /* tiêu cực */
    --inkred-700:   #A22E27;
    --inkred-050:   #FBEBE9;
    --marigold:     #C98416;   /* cảnh báo / khóa */
    --marigold-050: #FBF1E0;
    --steel:        #3D6B88;   /* chia sẻ */
    --steel-700:    #305671;
    --plum:         #6B4E8F;

    /* Bo góc & đổ bóng */
    --r-xs: 7px;  --r-sm: 10px;  --r-md: 13px;  --r-lg: 17px;  --r-xl: 22px;
    --sh-1: 0 1px 2px rgba(14,48,44,.05), 0 2px 8px rgba(14,48,44,.05);
    --sh-2: 0 2px 6px rgba(14,48,44,.07), 0 12px 28px rgba(14,48,44,.10);
    --sh-3: 0 18px 50px rgba(10,40,36,.28);

    --ff: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ------------------------- Nền tảng ------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--ff);
    min-height: 100vh;
    background-color: var(--paper) !important;
    background-image:
        radial-gradient(900px 420px at 8% -12%, #E7F0ED 0%, rgba(231,240,237,0) 60%),
        radial-gradient(760px 380px at 102% 0%, #F1F2EA 0%, rgba(241,242,234,0) 58%);
    background-attachment: fixed;
    color: var(--ink);
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--board-100); color: var(--board-700); }

/* Thanh cuộn mảnh, hợp tông */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* Vùng chạm bàn phím: luôn thấy được tiêu điểm */
:focus-visible { outline: 2px solid var(--board-500); outline-offset: 2px; border-radius: 6px; }

/* ------------- Ánh xạ lại bảng màu Tailwind sang tông mới ------------- */
.gradient-bg,
.bg-blue-600 { background-color: var(--board) !important; }
.hover\:bg-blue-700:hover { background-color: var(--board-700) !important; }
.bg-blue-50  { background-color: var(--board-050) !important; }
.bg-blue-100 { background-color: var(--board-100) !important; }
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--board) !important; }
.hover\:text-blue-600:hover, .hover\:text-blue-800:hover { color: var(--board-700) !important; }
.border-blue-600 { border-color: var(--board) !important; }
.text-blue-100 { color: #C7DED9 !important; }
.text-blue-200 { color: #AECFC9 !important; }

.bg-green-600 { background-color: var(--moss) !important; }
.hover\:bg-green-700:hover { background-color: var(--moss-700) !important; }
.bg-green-100 { background-color: var(--moss-050) !important; }
.text-green-600, .text-green-700 { color: var(--moss-700) !important; }
.bg-emerald-600 { background-color: var(--moss-700) !important; }
.hover\:bg-emerald-700:hover { background-color: #115C3C !important; }

.bg-red-600, .bg-red-500 { background-color: var(--inkred) !important; }
.hover\:bg-red-700:hover { background-color: var(--inkred-700) !important; }
.bg-red-100 { background-color: #F7DEDB !important; }
.bg-red-50  { background-color: var(--inkred-050) !important; }
.border-red-200 { border-color: #F0CBC7 !important; }
.border-red-600 { border-color: var(--inkred) !important; }
.text-red-600, .text-red-700 { color: var(--inkred-700) !important; }
.hover\:text-red-600:hover, .hover\:text-red-800:hover { color: var(--inkred-700) !important; }
.hover\:bg-red-500\/80:hover, .active\:bg-red-500\/80:active { background-color: rgba(195,59,51,.85) !important; }

.bg-indigo-600 { background-color: var(--steel) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--steel-700) !important; }

.bg-purple-100 { background-color: #EDE6F5 !important; }
.text-purple-700 { color: var(--plum) !important; }

.text-amber-600, .text-yellow-600 { color: var(--marigold) !important; }
.hover\:text-yellow-800:hover { color: #96620F !important; }

.bg-gray-50  { background-color: var(--surface-2) !important; }
.bg-gray-100 { background-color: #EEF3F1 !important; }
.bg-gray-200 { background-color: #E4EBE9 !important; }
.hover\:bg-gray-50:hover  { background-color: var(--surface-2) !important; }
.hover\:bg-gray-100:hover { background-color: #E9F0EE !important; }
.hover\:bg-gray-300:hover { background-color: #D6E0DD !important; }
.bg-gray-500 { background-color: #6B807C !important; }
.hover\:bg-gray-600:hover { background-color: #596D69 !important; }
.bg-gray-800 { background-color: #17302C !important; }
.text-gray-400 { color: var(--ink-3) !important; }
.text-gray-500 { color: var(--ink-2) !important; }
.text-gray-600, .text-gray-700 { color: var(--ink-2) !important; }
.text-gray-800 { color: var(--ink) !important; }
.border-gray-200 { border-color: var(--line) !important; }
.border-gray-300 { border-color: var(--line-2) !important; }

.positive { color: var(--moss-700) !important; font-weight: 600; }
.negative { color: var(--inkred-700) !important; font-weight: 600; }

/* Bo góc & bóng đổ thống nhất toàn ứng dụng */
.rounded      { border-radius: var(--r-xs) !important; }
.rounded-md   { border-radius: var(--r-sm) !important; }
.rounded-lg   { border-radius: var(--r-md) !important; }
.rounded-xl   { border-radius: var(--r-lg) !important; }
.rounded-2xl  { border-radius: var(--r-xl) !important; }
.rounded-b-xl { border-bottom-left-radius: var(--r-lg) !important; border-bottom-right-radius: var(--r-lg) !important; }
.shadow, .shadow-sm, .shadow-md { box-shadow: var(--sh-1) !important; }
.shadow-lg, .shadow-xl { box-shadow: var(--sh-2) !important; }
.shadow-2xl { box-shadow: var(--sh-3) !important; }
.hover\:shadow-lg:hover { box-shadow: var(--sh-2) !important; }

.perm-hidden { display: none !important; }

/* ------------------------- Bề mặt "bảng" ------------------------- */
/* Chữ ký thị giác của ứng dụng: mặt bảng xanh có vân phấn mờ */
.board-surface {
    position: relative;
    background: linear-gradient(160deg, var(--board-600) 0%, var(--board) 46%, var(--board-700) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.board-surface::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,.055) 0 1px, transparent 1px 7px),
        radial-gradient(120% 140% at 88% -30%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.gradient-bg {
    background: linear-gradient(160deg, var(--board-600) 0%, var(--board) 46%, var(--board-700) 100%) !important;
}

/* ------------------------- Khung ứng dụng ------------------------- */
.app-shell { max-width: 1220px; margin: 0 auto; padding: 14px clamp(10px, 2.2vw, 26px) 56px; }

.app-header {
    border-radius: var(--r-lg);
    padding: 16px clamp(14px, 2vw, 22px);
    margin-bottom: 12px;
    box-shadow: var(--sh-2);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand__mark {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 20px;
}
.brand__mark svg { width: 22px; height: 22px; }
.brand__title { font-size: clamp(1.02rem, 2.4vw, 1.4rem); font-weight: 700; line-height: 1.2; letter-spacing: -.2px; }
.brand__sub { font-size: .78rem; color: #B9D5D0; margin-top: 3px; line-height: 1.25; }
.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn {
    width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    transition: background-color .16s ease, transform .12s ease;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: rgba(255,255,255,.24); }
.icon-btn:active { transform: scale(.94); }
.icon-btn--danger:hover { background: rgba(195,59,51,.9); border-color: rgba(195,59,51,.9); }
.user-chip {
    display: none; text-align: right; padding: 4px 12px 4px 4px;
    border-right: 1px solid rgba(255,255,255,.18); margin-right: 4px;
}
.user-chip__name { font-size: .82rem; font-weight: 600; line-height: 1.2; }
.user-chip__role { font-size: .7rem; color: #AECFC9; line-height: 1.3; margin-top: 1px; }
@media (min-width: 640px) { .user-chip { display: block; } }

/* Thanh tab dính (dùng chung cho máy tính & điện thoại) */
.tabbar-wrap {
    position: sticky; top: 0; z-index: 60;
    padding: 8px 0 10px;
    margin: 0 -4px 14px;
    background: linear-gradient(var(--paper) 62%, rgba(239,244,242,0));
}
.tabbar {
    display: flex; gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 5px;
    box-shadow: var(--sh-1);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar { -ms-overflow-style: none; scrollbar-width: none; }
.tab-btn {
    scroll-snap-align: center;
    flex: 1 0 auto;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 11px;
    font-size: .86rem; font-weight: 600; color: var(--ink-2);
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tab-btn:hover { background: var(--surface-2); color: var(--board); }
.tab-btn.tab-active,
.tab-active {
    background: var(--board) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(14,75,69,.26);
}
.tab-btn .tab-ico { margin-right: 6px; }
@media (max-width: 480px) {
    .tab-btn { font-size: .8rem; padding: 8px 11px; }
}

/* ------------------------- Thẻ / khối nội dung ------------------------- */
#main-app .bg-white.rounded-lg,
#student-app .bg-white.rounded-xl,
#main-app .bg-white.rounded-xl {
    border: 1px solid var(--line);
}
.student-card {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.student-card:hover { border-color: var(--board-100) !important; transform: translateY(-2px); }
.student-group-container > h3 { letter-spacing: -.2px; }

/* Tiêu đề mục: có gạch nhấn vàng nghệ */
#main-app h3.text-xl, #main-app h3.text-lg, #main-app h4.text-lg {
    letter-spacing: -.2px;
}
#main-app h3.text-xl::before, #main-app h3.text-lg::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 4px; height: 1.05em; margin-right: 9px; border-radius: 99px;
    background: linear-gradient(var(--marigold), #E0A63F);
}

/* ------------------------- Biểu mẫu ------------------------- */
input[type="text"], input[type="number"], input[type="password"], input[type="search"], select, textarea {
    background-color: var(--surface);
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-sm) !important;
    color: var(--ink);
    font-family: inherit;
    font-size: .9rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input[type="text"], input[type="password"], input[type="search"], textarea { padding: .58rem .72rem; }
input::placeholder, textarea::placeholder { color: #9BAEAA; }
input[type="text"]:hover, input[type="number"]:hover, select:hover, textarea:hover { border-color: var(--ink-3) !important; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--board-500) !important;
    box-shadow: 0 0 0 3px rgba(23,112,100,.15) !important;
}
input:disabled, select:disabled { background: #F1F5F4; color: var(--ink-3); cursor: not-allowed; }

select {
    -webkit-appearance: none; appearance: none;
    padding: .55rem 2.1rem .55rem .72rem !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347605C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .62rem center;
    background-size: 15px 15px;
}
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--board);
    width: 1.05rem; height: 1.05rem;
    cursor: pointer;
    flex: 0 0 auto;
}
label { color: var(--ink-2); }
label.font-semibold, label.block.text-sm.font-medium, label.text-sm.font-medium { color: var(--ink); }

/* Nhóm checkbox (tuần / tổ / nhóm tiêu chí) — biến thành “ô phiếu” dễ chạm */
#main-app .border.rounded-md, #main-app .border.rounded-md.p-2,
#main-app .space-y-1.p-2.border.rounded-md {
    background: var(--surface-2);
    border-color: var(--line) !important;
}
#main-app label.inline-flex.items-center,
#main-app .grid > div.flex.items-center,
#main-app .flex.items-center > label {
    border-radius: 8px;
}
#main-app label.inline-flex.items-center {
    padding: 4px 9px 4px 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color .14s ease, background-color .14s ease;
}
#main-app label.inline-flex.items-center:hover { border-color: var(--board-100); background: var(--board-050); }
#main-app label.inline-flex.items-center:has(input:checked) {
    background: var(--board-050); border-color: var(--board-100); color: var(--board-700); font-weight: 600;
}
#main-app .grid > div.flex.items-center:has(input:checked) > label { color: var(--board-700); font-weight: 600; }

/* ------------------------- Nút bấm ------------------------- */
#main-app button, #student-app button, #login-screen button,
#studentModal button, #criterionModal button, #userModal button, #customModal button {
    font-family: inherit;
    font-weight: 600;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease, opacity .16s ease;
}
#main-app button:active, #student-app button:active, #login-screen button:active { transform: translateY(1px); }
#main-app button[class*="bg-"]:not([class*="bg-white"]):not([class*="bg-gray-2"]):hover { box-shadow: var(--sh-1); }
#login-btn { min-height: 46px; font-size: .96rem; letter-spacing: .2px; }

/* Nút phụ dạng "chip" (Xuất HTML / Chọn tất cả / Bỏ chọn) */
#main-app button.bg-gray-200 {
    color: var(--ink-2) !important;
    border: 1px solid var(--line);
}
#main-app button.bg-gray-200:hover { color: var(--board-700) !important; border-color: var(--board-100); }

/* Tab con (Theo học sinh / Theo tiêu chí / CSV, Thống kê chi tiết…) */
.update-tab-btn, .stats-sub-btn { min-height: 40px; border-radius: 10px !important; }
.update-tab-btn:not(.bg-blue-600):hover, .stats-sub-btn:not(.bg-blue-600):hover { background: var(--surface-2); }

/* Dải tuần trong tab Cảnh báo & Xử lí */
.handling-week-btn {
    border-radius: 9px 9px 0 0;
    min-height: 40px;
    scroll-snap-align: center;
}
.tab-handling-active {
    border-color: var(--board) !important;
    color: var(--board) !important;
    background-color: var(--board-050) !important;
}

/* ------------------------- Bảng dữ liệu ------------------------- */
#main-app table { width: 100%; border-collapse: separate !important; border-spacing: 0; font-variant-numeric: tabular-nums; }
#main-app thead th {
    background: var(--board) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .76rem;
    letter-spacing: .015em;
    text-align: center;
    padding: 10px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--board-700) !important;
    position: sticky; top: 0; z-index: 12;
    white-space: nowrap;
}
#main-app thead th:first-child { text-align: left; }
#main-app thead th.sticky, #main-app thead th[class*="sm:sticky"] { z-index: 30; }
#main-app tbody td, #main-app tbody th {
    padding: 8px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: .855rem;
    color: var(--ink);
    background: var(--surface);
}
#main-app tbody tr:nth-child(even) td { background: var(--surface-2); }
#main-app tbody tr:hover td { background: var(--board-050); }
#main-app tfoot th, #main-app tfoot td {
    background: #E3EDEA !important;
    color: var(--board-700) !important;
    font-weight: 700;
    padding: 10px 9px !important;
    border: 0 !important;
    border-top: 2px solid var(--board-100) !important;
    position: sticky; bottom: 0; z-index: 11;
}
#main-app .total-cell { color: var(--board-700); font-weight: 700 !important; }

/* Ô nhập số trong bảng: to, dễ chạm, canh giữa */
#main-app table input[type="number"] {
    width: 3.4rem; height: 2.3rem;
    text-align: center;
    font-weight: 600; font-size: .95rem;
    padding: 0 !important;
    border-radius: 9px !important;
    background: var(--surface);
}
#main-app table input[type="number"]:focus { background: #fff; }
#updateByStudentContainer input[type=number],
#updateByCriterionContainer input[type=number] { width: 3.5rem; height: 2.4rem; font-size: .95rem; }
/* Ẩn mũi tên tăng giảm */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Khung cuộn bảng có viền mềm */
#statsTableContainer, #generalStatsTableContainer, #handlingReportContainer,
#studentUpdateTableContainer > .overflow-x-auto, #criterionUpdateTableContainer > .overflow-x-auto,
#usersListContainer > .overflow-x-auto {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: auto;
    background: var(--surface);
}

/* Màu mức xử lí */
.handling-0 { color: var(--ink-2); }
.handling-1 { color: var(--marigold); font-weight: 600; }
.handling-2 { color: var(--inkred); font-weight: 600; }
.handling-3 { color: var(--inkred-700); font-weight: 700; }

/* ------------------------- Màn hình đăng nhập ------------------------- */
.login-panel {
    width: 100%; max-width: 400px;
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-3);
    padding: clamp(22px, 5vw, 34px);
}
.login-mark {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 17px;
    display: flex; align-items: center; justify-content: center;
    background: var(--board-050);
    border: 1px solid var(--board-100);
    color: var(--board);
}
.login-mark svg { width: 28px; height: 28px; }
.login-title { font-size: 1.32rem; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.login-sub { font-size: .85rem; color: var(--ink-2); margin-top: 5px; }
.field-label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.login-foot { margin-top: 18px; text-align: center; font-size: .72rem; color: var(--ink-3); }

/* ------------------------- Overlay tải dữ liệu ------------------------- */
#loading-overlay { background: rgba(239,244,242,.82) !important; }
.spinner { border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; width: 20px; height: 20px; animation: spin .8s linear infinite; }
.spinner-blue { border: 3px solid var(--board-100); border-top-color: var(--board); border-radius: 50%; width: 38px; height: 38px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------- Hộp thoại ------------------------- */
.modal-backdrop { background-color: rgba(10,35,32,.55) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#studentModal > .bg-white, #criterionModal > .bg-white, #userModal > .bg-white, #customModal > .bg-white {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-3) !important;
    border: 1px solid var(--line);
    animation: modalIn .18s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
#studentModal h3, #criterionModal h3, #userModal h3, #customModal h3 { color: var(--ink); letter-spacing: -.2px; }
#studentModal .border-b, #criterionModal .border-b, #userModal .border-b, #customModal .border-b { border-color: var(--line) !important; }

/* ------------------------- Thông báo nhanh (toast) ------------------------- */
#toast-notification {
    pointer-events: none;
    border-radius: 13px !important;
    font-weight: 600; font-size: .88rem;
    box-shadow: var(--sh-2) !important;
    max-width: min(88vw, 420px);
}
@media (max-width: 640px) {
    #toast-notification { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); text-align: center; max-width: none; }
}

/* =====================================================================
   GIAO DIỆN HỌC SINH / BAN CÁN SỰ (ưu tiên điện thoại)
   ===================================================================== */
#student-app { max-width: 760px; margin: 0 auto; padding: 12px clamp(10px, 3vw, 18px) 0; }
.sv-header {
    border-radius: var(--r-lg);
    padding: 13px 14px;
    margin-bottom: 12px;
    box-shadow: var(--sh-2);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sv-header__eyebrow { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #A9CBC5; line-height: 1.3; }
.sv-header__name { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.sv-header__meta { font-size: .74rem; color: #B9D5D0; line-height: 1.3; margin-top: 1px; }

.sv-card { transition: transform .09s ease, box-shadow .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; }
.sv-card:active { transform: scale(.97); }
#student-app .sv-stu { border: 1px solid var(--line) !important; min-height: 54px; }
.sv-stu.sv-selected {
    outline: none !important;
    border-color: var(--board) !important;
    background: var(--board-050) !important;
    box-shadow: 0 0 0 2px rgba(14,75,69,.18);
}
.sv-pos { background: var(--moss-050) !important; color: var(--moss-700) !important; border: 1px solid #CBE6D8; }
.sv-pos:active { background: #D5EDE0 !important; }
.sv-neg { background: var(--inkred-050) !important; color: var(--inkred-700) !important; border: 1px solid #F1D2CE; }
.sv-neg:active { background: #F7DCD9 !important; }
#student-app .sv-card.sv-pos, #student-app .sv-card.sv-neg { min-height: 50px; }

/* Ô tìm tiêu chí trong tab "Ghi nhanh" */
.sv-critsearch { position: relative; flex: 1 1 100%; min-width: 0; }
@media (min-width: 560px) { .sv-critsearch { flex: 0 0 auto; width: 234px; } }
.sv-critsearch input {
    width: 100%; height: 40px;
    padding: 0 2.3rem 0 2.15rem !important;
    font-size: .875rem;
    border-radius: 999px !important;
    background: var(--surface-2);
}
.sv-critsearch input:focus { background: #fff; }
.sv-critsearch__ico {
    position: absolute; left: .74rem; top: 50%; transform: translateY(-50%);
    font-size: .8rem; opacity: .5; pointer-events: none;
}
#sv-crit-clear {
    position: absolute; right: .32rem; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    align-items: center; justify-content: center;
    background: var(--line); color: var(--ink-2);
    font-size: .68rem; line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}
#sv-crit-clear:hover { background: var(--line-2); color: var(--ink); }

/* Nhóm tiêu chí trong tab "Ghi nhanh" */
.sv-critgroup { margin-bottom: 15px; }
.sv-critgroup:last-child { margin-bottom: 0; }
.sv-critgroup__head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sv-critgroup__name {
    font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--board); white-space: nowrap;
}
.sv-critgroup__rule { flex: 1 1 auto; height: 1px; background: var(--line); min-width: 10px; }
.sv-critgroup__count {
    font-size: .68rem; font-weight: 700; color: var(--ink-3);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 999px; padding: 1px 8px; flex: 0 0 auto;
}

/* Tô sáng phần khớp từ khóa tìm kiếm */
mark.sv-hl {
    background: #FFE071;
    color: inherit;
    font-weight: 700;
    border-radius: 4px;
    padding: 0 2px;
    box-shadow: 0 0 0 1px rgba(190,140,10,.35);
}

#sv-bottomnav {
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -2px 14px rgba(14,48,44,.07) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sv-navbtn { color: var(--ink-3); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 56px; transition: color .16s ease; }
.sv-navbtn * { pointer-events: none; }
.sv-navbtn.sv-navactive { color: var(--board); }
.sv-navbtn.sv-navactive svg { transform: translateY(-1px); }
@keyframes svpop { 0% { transform: scale(.6); opacity: 0 } 60% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
.sv-pop { animation: svpop .25s ease; }

/* ------------------------- Tinh chỉnh cho điện thoại ------------------------- */
@media (max-width: 640px) {
    .app-header { padding: 13px 14px; border-radius: var(--r-md); }
    .brand__mark { width: 38px; height: 38px; border-radius: 11px; }
    #main-app thead th { font-size: .72rem; padding: 9px 7px !important; }
    #main-app tbody td { font-size: .82rem; padding: 7px 7px !important; }
    #main-app .p-4 { padding: .85rem !important; }
    #main-app .p-6 { padding: 1.1rem !important; }
    /* Hàng nút xuất báo cáo: cuộn ngang thay vì xuống dòng lộn xộn */
    #main-app .flex.gap-2.flex-wrap > button { flex: 1 1 auto; min-height: 38px; }
}

/* Dải tab tuần cuộn mượt trên điện thoại */
#contentCanhBao nav.-mb-px { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
#contentCanhBao nav.-mb-px::-webkit-scrollbar { height: 4px; }

/* --------------------- Tinh chỉnh cuối --------------------- */
/* Màn hình đăng nhập cuộn được trên máy nhỏ */
#login-screen { overflow-y: auto; }

/* Chừa chỗ cho thanh điều hướng dưới cùng (kể cả vùng an toàn iPhone) */
#student-app > .h-16 { height: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

/* Ô nhập nằm trong bảng: gọn hơn ô nhập ngoài biểu mẫu */
#main-app tbody td select,
#main-app tbody td input[type="text"] {
    padding: .42rem .6rem !important;
    font-size: .85rem;
}
#main-app tbody td select { padding-right: 1.9rem !important; background-position: right .5rem center; }

/* Bảng danh sách tài khoản: tiêu đề canh trái cho dễ đọc */
#usersListContainer thead th { text-align: left; }

/* Hàng nút thao tác: khoảng cách đều, dễ chạm */
#main-app .flex.gap-2 > button, #main-app .flex.gap-2 > label { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }

/* Tôn trọng thiết lập giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Hiệu ứng trượt nhẹ cho thông báo nhanh */
#toast-notification { transition: opacity .28s ease, transform .28s ease !important; transform: translateY(10px); }
#toast-notification:not(.opacity-0) { transform: translateY(0); }
.login-panel { color: var(--ink); }

/* In ấn */
@media print {
    .tabbar-wrap, .app-header, #sv-bottomnav, .icon-btn { display: none !important; }
    body { background: #fff !important; }
    #main-app .bg-white.rounded-lg { border: 1px solid #ccc; box-shadow: none !important; }
}