/*
 * app.css — STYLE DÙNG CHUNG của Web quản trị OHKSAA.
 * Việc 3/20. CSS thuần, KHÔNG framework.
 *
 * 🔴 MỌI trang dùng file này. KHÔNG viết style inline trong HTML:
 * inline thì mỗi màn một kiểu, và đổi nhận diện phải sửa 20 file.
 *
 * Biến màu khai ở :root để đổi một chỗ là đổi cả hệ thống.
 */

:root {
    --mau-chinh:      #175cd3;
    --mau-chinh-dam:  #1349a8;
    --mau-loi:        #b42318;
    --mau-loi-nen:    #fef3f2;
    --mau-ok:         #16794c;
    --mau-ok-nen:     #ecfdf3;
    --mau-chu:        #1a1a1a;
    --mau-chu-nhat:   #667085;
    --mau-vien:       #d0d5dd;
    --mau-nen:        #f5f6f8;
    --mau-nen-the:    #ffffff;
    --bo-goc:         6px;
    --bong:           0 1px 3px rgba(16, 24, 40, .1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mau-chu);
    background: var(--mau-nen);
}

/* ── Màn đăng nhập ───────────────────────────────────────────────────────── */

.man-dang-nhap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.the-dang-nhap {
    width: 100%;
    max-width: 24rem;
    background: var(--mau-nen-the);
    border: 1px solid var(--mau-vien);
    border-radius: 10px;
    box-shadow: var(--bong);
    padding: 2rem 1.75rem;
}

.thuong-hieu {
    text-align: center;
    margin-bottom: 1.75rem;
}

.thuong-hieu h1 {
    font-size: 1.65rem;
    margin: 0 0 .2rem;
    letter-spacing: -.01em;
}

.thuong-hieu p {
    margin: 0;
    color: var(--mau-chu-nhat);
    font-size: .9rem;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.nhom-truong { margin-bottom: 1rem; }

.nhom-truong label {
    display: block;
    margin-bottom: .35rem;
    font-size: .88rem;
    font-weight: 600;
}

.nhom-truong input {
    width: 100%;
    padding: .6rem .7rem;
    font: inherit;
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
    background: #fff;
}

.nhom-truong input:focus {
    outline: none;
    border-color: var(--mau-chinh);
    box-shadow: 0 0 0 3px rgba(23, 92, 211, .12);
}

.nhom-truong input:disabled { background: #f2f4f7; color: var(--mau-chu-nhat); }

.nut-chinh {
    width: 100%;
    padding: .65rem 1rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--mau-chinh);
    border: none;
    border-radius: var(--bo-goc);
    cursor: pointer;
}

.nut-chinh:hover:not(:disabled) { background: var(--mau-chinh-dam); }

.nut-chinh:disabled { background: #98a2b3; cursor: not-allowed; }

.nut-phu {
    padding: .45rem .9rem;
    font: inherit;
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
    background: #fff;
    cursor: pointer;
}

/*
 * 🔴 CHẮN `:not(:disabled)` — KHÔNG phải chuyện làm đẹp.
 * Thiếu nó thì nút đã vô hiệu VẪN sáng lên khi rê chuột, tức là nó nói "bấm được đi" đúng lúc
 * nó không bấm được. Cùng kiểu với `.nut-chinh:hover:not(:disabled)` ngay trên.
 */
.nut-phu:hover:not(:disabled) { background: #f2f4f7; }

/*
 * TRẠNG THÁI VÔ HIỆU của nút phụ — dùng chung, KHÔNG phải kiểu riêng của nút Xuất Excel.
 *
 * Trước 2026-09-09 `.nut-phu` không có quy tắc `:disabled` nào, nên `nut.disabled = true`
 * (đã dùng sẵn trong `ManDung.xuatExcel` lúc đang tải file) chặn được cú bấm mà KHÔNG để lại
 * dấu hiệu nào nhìn thấy được. Cùng bộ màu với `.phan-trang button:disabled` và
 * `.nut-chinh:disabled` — nhất quán, không chế kiểu mới.
 */
.nut-phu:disabled {
    color: #98a2b3;
    background: #f9fafb;
    border-color: #eaecf0;
    cursor: not-allowed;
}

/*
 * Ô báo lỗi NGAY TRÊN FORM — không phải toast.
 * Lỗi đăng nhập phải nằm cạnh chỗ người dùng vừa gõ; toast góc màn hình tự tắt sau
 * vài giây, và người đang nhìn bàn phím sẽ không kịp thấy.
 * `hidden` mặc định; JS bật lên khi có lỗi.
 */
.loi-form {
    background: var(--mau-loi-nen);
    border-left: 3px solid var(--mau-loi);
    color: var(--mau-loi);
    padding: .6rem .75rem;
    border-radius: 4px;
    font-size: .88rem;
    margin-bottom: 1rem;
}

.loi-form[hidden] { display: none; }

/*
 * Ô NGÀY DÙNG CHUNG (2026-10-13, Ui.taoONgay) — luôn dd/mm/yyyy. Biểu tượng lịch ở mép phải (bấm mở bộ
 * chọn ngày). KHÔNG khai `display` — nên `hidden` vẫn ẩn được, không dính bẫy [hidden] (§6 CLAUDE.md).
 * Lớp phụ mang tiền tố của chính thành phần (`o-ngay-sai`), không đặt tên trơ.
 */
.o-ngay {
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: text;
}
.o-ngay-sai {
    border-color: #d92d20 !important;
    outline-color: #d92d20;
}

/* ── Trang nội dung ──────────────────────────────────────────────────────── */

/*
 * ⚠️ `.thanh-tren` ĐÃ BỊ THAY THẾ bởi `.thanh-nav` trong layout.css (việc 5/21).
 * Thanh trên thật của web quản trị nay do `layout.js` dựng, nền xanh lá, dính trên
 * cùng. Khối dưới đây KHÔNG còn trang nào dùng — giữ lại vì `pages/_debug.html` và
 * các trang tiện ích tương lai có thể cần một thanh đơn giản KHÔNG kèm sidebar.
 * 🔴 Trang nghiệp vụ thì dùng layout.js, ĐỪNG chép `.thanh-tren` vào.
 */
.thanh-tren {
    background: var(--mau-nen-the);
    border-bottom: 1px solid var(--mau-vien);
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.thanh-tren .ten-he-thong { font-weight: 700; font-size: 1.05rem; }

.thanh-tren .nguoi-dung { color: var(--mau-chu-nhat); font-size: .9rem; }

.noi-dung { max-width: 60rem; margin: 1.5rem auto; padding: 0 1.5rem; }

.the {
    background: var(--mau-nen-the);
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.the h2 { font-size: 1.02rem; margin: 0 0 .6rem; }

.ok  { color: var(--mau-ok);  font-weight: 600; }
.loi { color: var(--mau-loi); font-weight: 600; }
.nhat { color: var(--mau-chu-nhat); }

code {
    background: #f2f4f7;
    padding: .1rem .35rem;
    border-radius: 3px;
    font-size: .88em;
}

pre {
    background: #f2f4f7;
    padding: .7rem;
    border-radius: 4px;
    overflow-x: auto;
    font-size: .84rem;
    margin: .5rem 0 0;
}

table.bang { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.bang td { padding: .3rem .5rem; border-bottom: 1px solid #eaecf0; }
table.bang td:first-child { color: var(--mau-chu-nhat); width: 42%; }

/*
 * Cảnh báo buộc đổi mật khẩu — hiện sau khi đăng nhập bằng mật khẩu TẠM.
 * Backend bật `mustChangePassword` khi tạo tài khoản và sau mỗi lần admin reset.
 */
.canh-bao {
    background: #fffaeb;
    border-left: 3px solid #dc6803;
    color: #93370d;
    padding: .7rem .9rem;
    border-radius: 4px;
    font-size: .9rem;
    margin-bottom: 1.25rem;
}

/* Tiêu đề trang chẩn đoán (/pages/_debug.html) — không dùng ở màn nghiệp vụ. */
.noi-dung > h1 { font-size: 1.5rem; margin: .5rem 0 .25rem; }
.noi-dung > p.nhat { margin-top: 0; }

/* Lối ra phụ ở màn đổi mật khẩu (nút Đăng xuất) — căn giữa dưới form. */
.canh-giua { text-align: center; margin: 1rem 0 0; }

/* Dòng nhắc dưới ô nhập (vd "Tối thiểu 8 ký tự"). */
.nhom-truong small { display: block; margin-top: .3rem; font-size: .82rem; }

/* Thẻ <a> đóng vai nút trên thanh trên — cho giống nút thật. */
a.nut-phu { display: inline-block; text-decoration: none; color: inherit; }