/*
 * layout.css — KHUNG DÙNG CHUNG của Web quản trị OHKSAA: topnav + sidebar + vùng nội dung.
 * Việc 5/21. CSS thuần, KHÔNG framework.
 *
 * ══════════════════════════════════════════════════════════════════════════════
 * VÌ SAO TÁCH KHỎI app.css
 *
 * app.css giữ những thứ dùng ở MỌI trang kể cả trang KHÔNG có khung (đăng nhập,
 * đổi mật khẩu): biến màu, body, form, nút, thẻ, bảng.
 * File này giữ riêng phần KHUNG — chỉ trang nghiệp vụ mới nạp.
 *
 * Nhờ vậy màn đăng nhập không kéo theo CSS của một thanh điều hướng nó không có.
 * Và khi sửa khung thì biết chắc không đụng tới màn đăng nhập.
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * 🔴 File này PHỤ THUỘC biến màu khai ở app.css (`:root`). Nạp app.css TRƯỚC.
 */

:root {
    /* Xanh lá của thanh trên — theo wireframe NVU. Khai riêng, KHÔNG dùng lại
       --mau-ok: hai thứ tình cờ cùng màu nhưng khác vai trò. Đổi màu nhận diện
       mà kéo theo màu chữ "thành công" trong toàn hệ thống là sai. */
    --mau-nav:        #157347;
    --mau-nav-dam:    #0f5334;
    --mau-nav-chu:    #ffffff;

    /* 🔴 Chiều cao thanh trên khai thành BIẾN vì được dùng ở BA nơi:
       chiều cao chính nó · `top` của sidebar dính · `min-height` của khung.
       Gõ cứng 44px ba chỗ thì sửa một chỗ là ba chỗ lệch nhau, và biểu hiện là
       một khe hở mỏng hoặc một mảng bị che — rất khó truy ngược. */
    --cao-nav:        44px;

    --rong-cot-ben:      216px;
    --rong-cot-ben-gon:  52px;
}

/* ── Thanh trên (topnav) ─────────────────────────────────────────────────── */

.thanh-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--cao-nav);
    background: var(--mau-nav);
    color: var(--mau-nav-chu);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;

    /*
     * Cuộn NGANG khi màn hình hẹp, thay vì xuống dòng.
     * Xuống dòng làm thanh cao gấp đôi, đẩy toàn bộ nội dung xuống và phá luôn
     * phép tính `top` của sidebar dính (vốn dựa trên --cao-nav là một hằng số).
     * Cuộn ngang giữ chiều cao cố định — đúng thứ phần còn lại đang giả định.
     */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}

.thanh-nav::-webkit-scrollbar { height: 4px; }
.thanh-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); border-radius: 2px; }

.nav-trai,
.nav-phai {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;          /* không co lại — thà cuộn còn hơn bóp méo */
}

.nav-logo {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
    color: var(--mau-nav-chu);
    text-decoration: none;
}

.nav-nguoi-dung {
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}

/* Link và nút trên thanh trông GIỐNG HỆT nhau: người dùng không cần biết cái nào
   là <a> cái nào là <button>, họ chỉ thấy hai lối ra cạnh nhau. */
.nav-lien-ket {
    font: inherit;
    font-size: .82rem;
    color: var(--mau-nav-chu);
    text-decoration: none;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 4px;
    padding: .2rem .6rem;
    cursor: pointer;
    line-height: 1.5;
    white-space: nowrap;
}

.nav-lien-ket:hover { background: rgba(255, 255, 255, .26); }

/* ── Khung: sidebar + nội dung ───────────────────────────────────────────── */

.khung {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--cao-nav));
}

.cot-ben {
    flex: 0 0 var(--rong-cot-ben);
    width: var(--rong-cot-ben);
    background: var(--mau-nen-the);
    border-right: 1px solid var(--mau-vien);

    /* Dính ngay dưới thanh trên, tự cuộn nếu menu dài hơn màn hình. */
    position: sticky;
    top: var(--cao-nav);
    max-height: calc(100vh - var(--cao-nav));
    overflow-y: auto;

    padding: .5rem 0;
    transition: flex-basis .12s ease, width .12s ease;
}

.cot-ben.gon {
    flex-basis: var(--rong-cot-ben-gon);
    width: var(--rong-cot-ben-gon);
}

.cb-thu-gon {
    display: block;
    width: calc(100% - 1rem);
    margin: 0 .5rem .5rem;
    padding: .35rem;
    font: inherit;
    font-size: .82rem;
    color: var(--mau-chu-nhat);
    background: #fff;
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
    cursor: pointer;
    text-align: center;
}

.cb-thu-gon:hover { background: #f2f4f7; }

.cb-menu { display: flex; flex-direction: column; }

/*
 * Mục menu: dùng CHUNG một bộ style cho <a> (bấm được) và <span> (mờ).
 * Khác nhau ở màu + con trỏ, giống nhau ở kích thước — nên khi một màn hoàn thành
 * và <span> đổi thành <a>, menu KHÔNG nhảy chỗ.
 */
.cb-muc {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem;
    font-size: .9rem;
    color: var(--mau-chu);
    text-decoration: none;
    border-left: 3px solid transparent;
    /* Nhãn dài XUỐNG DÒNG, không cắt, không "…" (2026-10-14) — trước đó `nowrap` + `overflow: hidden`
       cắt cụt "Khách theo kho và mã CK" ở mép phải. Tên màn giữ nguyên, không rút gọn. */
    white-space: normal;
}

.cb-muc .cb-nhan {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

a.cb-muc:hover { background: #f2f4f7; }

/* Mục đang mở — viền trái đậm + chữ đậm. */
.cb-muc.dang-mo {
    background: #eef4ff;
    border-left-color: var(--mau-chinh);
    color: var(--mau-chinh-dam);
    font-weight: 600;
}

/*
 * TRANG CHƯA LÀM. Dựng bằng <span>, KHÔNG phải <a> bị vô hiệu hoá:
 * <a href> mờ đi bằng CSS vẫn bấm được, vẫn tab tới được, vẫn "mở trong tab mới"
 * được — và ra 404. Không có href thì không có gì để bấm.
 */
.cb-muc.chua-lam {
    color: #98a2b3;
    cursor: not-allowed;
}

.cb-muc .cb-icon {
    flex: 0 0 1.1rem;
    text-align: center;
    font-size: .95rem;
    opacity: .85;
}

/* Thu gọn: giấu CHỮ, giữ icon. Icon vẫn đủ để đoán mục nào, và `title` trên thẻ
   cho tên đầy đủ khi rê chuột. */
.cot-ben.gon .cb-muc { justify-content: center; padding: .5rem .2rem; }
.cot-ben.gon .cb-nhan { display: none; }

/* Số đếm yêu cầu huỷ lệnh của khách đang chờ — mục "Chờ huỷ" (2026-10-21, layout.js `datDemChoHuy`). */
.cb-dem {
    flex: 0 0 auto;
    min-width: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
}
/* 🔴 BẪY CSS §6: ẩn bằng `hidden` ⇒ chặn sẵn, phòng khi ai đó khai `display` cho `.cb-dem` về sau. */
.cb-dem[hidden] { display: none; }

.cb-nhom {
    padding: .5rem .9rem .25rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mau-chu-nhat);
}

.cot-ben.gon .cb-nhom { display: none; }

/* ── Vùng nội dung ───────────────────────────────────────────────────────── */

.vung-noi-dung {
    flex: 1 1 auto;
    min-width: 0;              /* cho phép con bên trong tự cuộn ngang (bảng rộng) */
    padding: 1.25rem 1.5rem;
}

/* Màn hình hẹp: sidebar hết dính và co về bề ngang tối thiểu, nhường chỗ cho nội dung. */
@media (max-width: 720px) {
    .cot-ben {
        flex-basis: var(--rong-cot-ben-gon);
        width: var(--rong-cot-ben-gon);
    }
    .cot-ben .cb-nhan,
    .cot-ben .cb-nhom { display: none; }
    .cot-ben .cb-muc { justify-content: center; padding: .5rem .2rem; }
    .cb-thu-gon { display: none; }      /* đã gọn sẵn, nút không còn nghĩa */
    .vung-noi-dung { padding: 1rem .9rem; }
}