/* WVEP.Web/wwwroot/css/wvep-dieu-hanh.css */

/*
    Kiểu dáng riêng của mục Điều hành: dãy chip đếm ở đầu hàng đợi công việc, bảng dòng
    dịch vụ, khối thuộc tính dựng động theo bản mô tả loại dịch vụ, và bảng đối chiếu dự
    chi với thực chi.

    Nạp sau bốn tệp nền và sau hai tệp mục, cùng lý do đã ghi ở tờ chiết tính: những luật
    ở đây đè lên luật chung nên chỉ có thứ tự nạp mới phân được.

    Không tải gì từ ngoài mạng, đúng luật của cả hệ thống.
*/

/* ----- Dãy chip đếm của hàng đợi công việc ----- */

.wv-chip-hang {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wv-k2);
    margin-bottom: var(--wv-k4);
}

.wv-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wv-k2);
    padding: var(--wv-k2) var(--wv-k4);
    border: 1px solid var(--wv-vien);
    border-radius: 999px;
    background: var(--wv-nen);
    color: var(--wv-chu-mo);
    font-size: var(--wv-cd-14);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.wv-chip:hover {
    border-color: var(--wv-nhan);
    color: var(--wv-chinh-dam);
    text-decoration: none;
}

.wv-chip-dang-o {
    border-color: var(--wv-nhan);
    background: var(--wv-chinh-dam);
    color: #fff;
}

.wv-chip-dang-o:hover {
    color: #fff;
}

/* Con số đếm nằm trong chip, luôn đọc được trên cả nền sáng lẫn nền đậm */
.wv-chip-so {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 .375rem;
    border-radius: 999px;
    background: var(--wv-xam-100);
    color: var(--wv-xam-700);
    font-size: var(--wv-cd-12, .75rem);
    font-variant-numeric: tabular-nums;
}

.wv-chip-dang-o .wv-chip-so {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ----- Bốn mốc của phiếu điều hành ----- */

.wv-trang-thai.wv-moc-eh-1 {
    background: var(--wv-tin-nen);
    color: var(--wv-tin-chu);
}

.wv-trang-thai.wv-moc-eh-2 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-trang-thai.wv-moc-eh-3 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-moc-eh-4 {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

/* ----- Bốn mốc đặt của một dòng dịch vụ ----- */

.wv-trang-thai.wv-dat-1 {
    background: var(--wv-xam-100);
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-dat-2 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

.wv-trang-thai.wv-dat-3 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-dat-4 {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

/* ----- Khối thuộc tính riêng, dựng động theo bản mô tả loại dịch vụ ----- */

.wv-khoi-thuoc-tinh {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--wv-k4);
}

.wv-khoi-thuoc-tinh .wv-o-rong {
    grid-column: 1 / -1;
}

/* Bảng bày lại khối thuộc tính ở màn chi tiết, hai cột nhãn và giá trị */
.wv-bang-thuoc-tinh {
    width: 100%;
    border-collapse: collapse;
}

.wv-bang-thuoc-tinh th {
    width: 40%;
    padding: var(--wv-k2) var(--wv-k3) var(--wv-k2) 0;
    color: var(--wv-chu-mo);
    font-weight: 500;
    text-align: left;
    vertical-align: top;
}

.wv-bang-thuoc-tinh td {
    padding: var(--wv-k2) 0;
    vertical-align: top;
}

/* ----- Bảng đối chiếu dự chi với thực chi ----- */

/*
   Lớp ô tiền .wv-so đã chuyển sang khai chung ở wvep-thanh-phan.css, wvep-cogian.css và
   wvep.css, đúng chỗ bốn lớp ô tiền kia đang đứng.

   Luật cũ ở đây có phạm vi .wv-doi-chieu, nên nó chỉ cứu được những bảng nằm trong một khung
   mang lớp ấy. Ba bảng của màn dòng tiền một đoàn không mang nó nên chúng thua luật căn
   trái của .wv-bang td, và đó là ba ô tiền căn trái duy nhất của cả hệ thống đo được ngày
   26 tháng 8 năm 2026.
*/

/* Chi vượt dự trù bôi đỏ, chi dưới dự trù bôi xanh. Đây là cột người đọc tìm đầu tiên. */
.wv-lech-vuot {
    color: var(--wv-xau-chu);
    font-weight: 600;
}

.wv-lech-du {
    color: var(--wv-tot-chu);
    font-weight: 600;
}

.wv-dong-ngoai-du-tru {
    background: var(--wv-nhac-nen);
}

/* Hàng tổng của bảng đối chiếu, luôn đậm hơn hàng thường */
.wv-doi-chieu tfoot td {
    border-top: 2px solid var(--wv-vien);
    font-weight: 700;
}

/* ----- Ba thanh so sánh của bảng dòng tiền một đoàn ----- */

/*
   Ba con số kế hoạch chi, đã cam kết và tiền đã ra đứng cạnh nhau ở khối trên đã đủ để
   đọc, nhưng đọc ba con số mười chữ số rồi tự so trong đầu là việc người ta không làm.
   Ba thanh này chỉ nói TỈ LỆ, và chúng cố ý không mang con số riêng: một hình vẽ mang số
   riêng là thêm một chỗ nữa để lệch với bảng.

   Dựng bằng CSS thuần, không một thẻ svg nào, nên không có chuyện thiếu viewBox.
*/

.wv-thanh-dong-tien {
    display: grid;
    gap: var(--wv-k2);
    margin-top: var(--wv-k4);
}

.wv-thanh-dong {
    display: grid;
    grid-template-columns: 10rem 1fr;
    align-items: center;
    gap: var(--wv-k3);
}

.wv-thanh-nhan {
    color: var(--wv-chu-mo);
    font-size: .875rem;
}

.wv-thanh-ray {
    display: block;
    height: .75rem;
    border-radius: 999px;
    background: var(--wv-xam-100);
    overflow: hidden;
}

.wv-thanh-day {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.wv-thanh-ke-hoach {
    background: var(--wv-tin-chu);
}

.wv-thanh-cam-ket {
    background: var(--wv-nhac-chu);
}

.wv-thanh-tien-ra {
    background: var(--wv-tot-chu);
}

/* Màn hẹp không còn chỗ cho một cột nhãn cố định, nhãn lùi lên trên thanh. */
@media (max-width: 700px) {
    .wv-thanh-dong {
        grid-template-columns: 1fr;
        gap: var(--wv-k1);
    }
}

/* =======================================================================
   NHÓM B LƯỢT 4: đặt dịch vụ nhà cung cấp (OP-05) và giá vốn theo ngày (OP-04)

   Hai tiền tố riêng, .wv-dh-dat-* và .wv-dh-gv-*, để rà lại là biết ngay lớp
   của ai. Không lớp nào ở đây khai lại một bộ chọn đã có ở tệp nền khác, đúng
   quy tắc 11 và 30: khai một lớp ở hai tệp thì cái nào nạp sau thắng, mà kết
   quả còn phụ thuộc cả việc trình duyệt có giữ lại tệp cũ hay không.
   ======================================================================= */

/* ----- Năm mốc của một tờ đặt dịch vụ ----- */

/*
   Khác hẳn dãy .wv-dat-* ngay bên trên, và cố ý KHÔNG dùng chung. Dãy kia là bốn
   mốc của MỘT DÒNG dịch vụ, dãy này là năm mốc của MỘT TỜ gửi ra ngoài, trong đó
   có mốc Từ chối mà dòng dịch vụ không có. Dùng chung một dãy lớp cho hai nhóm
   giá trị khác số lượng là mời người sau đọc màu số 4 thành hai nghĩa.
*/
.wv-trang-thai.wv-dh-dat-moc-1 {
    background: var(--wv-xam-100);
    color: var(--wv-chu-mo);
}

.wv-trang-thai.wv-dh-dat-moc-2 {
    background: var(--wv-tin-nen);
    color: var(--wv-tin-chu);
}

.wv-trang-thai.wv-dh-dat-moc-3 {
    background: var(--wv-tot-nen);
    color: var(--wv-tot-chu);
}

.wv-trang-thai.wv-dh-dat-moc-4 {
    background: var(--wv-xau-nen);
    color: var(--wv-xau-chu);
}

.wv-trang-thai.wv-dh-dat-moc-5 {
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
}

/* Câu nói rõ vì sao một dòng dịch vụ không chọn vào tờ đang lập được */
.wv-dh-dat-ban {
    margin-top: var(--wv-k1);
    color: var(--wv-nhac-chu);
    font-size: .8125rem;
}

/* Đường công khai gửi nhà cung cấp, để nguyên một dòng cho dễ bôi đen chép đi */
.wv-dh-dat-chia {
    margin: 0;
    padding: var(--wv-k2) var(--wv-k3);
    border: 1px dashed var(--wv-vien);
    border-radius: var(--wv-k2);
    background: var(--wv-xam-100);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;

    /* Chìa dài sáu chục ký tự không có dấu cách nào, không cho ngắt là nó đẩy cả
       thẻ ra ngoài mép phải ở khổ 390 */
    overflow-wrap: anywhere;
}

/* Sổ trả lời của một tờ, dựng thành danh sách dọc chứ không thành bảng: mỗi dòng
   dài ngắn khác nhau và không có cột nào để so với nhau */
.wv-dh-dat-so {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wv-dh-dat-so-dong {
    padding: var(--wv-k3) 0;
    border-bottom: 1px solid var(--wv-vien-nhat);
}

.wv-dh-dat-so-dong:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ----- Bảng giá vốn theo ngày ----- */

/* Dấu chưa tra được giá hợp đồng. Đây là dấu hiệu quan trọng nhất của cả màn nên
   nó luôn nằm ở cột đầu, tức cột không bao giờ phải kéo ngang mới thấy */
.wv-dh-gv-thieu {
    display: inline-block;
    margin-top: var(--wv-k1);
    padding: 0 var(--wv-k2);
    border-radius: var(--wv-k2);
    background: var(--wv-nhac-nen);
    color: var(--wv-nhac-chu);
    font-size: .8125rem;
}

/* Ngày nằm ngoài khoảng khởi hành tới kết thúc của đoàn */
.wv-dh-gv-ngoai-tour {
    color: var(--wv-nhac-chu);
}

/* Câu nói rõ tiền của dòng nhiều ngày đã được chia đều theo ngày */
.wv-dh-gv-chia {
    margin-top: var(--wv-k1);
    color: var(--wv-chu-mo);
    font-size: .8125rem;
}

/* Ngày không có dịch vụ nào. Vẫn bày ra chứ không bỏ đi, vì một ngày trống giữa
   hành trình là điều người điều hành cần nhìn thấy */
.wv-dh-gv-rong {
    color: var(--wv-chu-mo);
}


/* =====================================================================
   KHỐI CỦA NHÓM A, lượt bốn: danh sách đoàn (.wv-dh-doan-*) và lịch trình
   theo ngày kèm gộp dịch vụ (.wv-dh-lt-*).

   Mọi lớp ở đây đều mang tiền tố riêng và chỉ khai đúng MỘT lần trong cả hệ
   thống, đúng quy tắc 11 và 30. Không lớp nào trong khối này trùng tên với
   lớp của ba tệp nền.
   ===================================================================== */

/* Đẩy nút Xuất tệp về sát mép phải của dòng đầu thẻ, kể cả khi dòng ấy không
   có câu phụ nào đứng trước để tự đẩy. */
.wv-dh-doan-day {
    flex: 1 1 auto;
}

/* Danh sách các đoàn góp vào một cụm gộp, nằm gọn trong một ô của bảng. */
.wv-dh-lt-doan {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--wv-k2);
}

.wv-dh-lt-doan > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wv-k2);
    padding-bottom: var(--wv-k2);
    border-bottom: 1px dashed var(--wv-vien);
}

.wv-dh-lt-doan > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Biểu mẫu một nút nằm ngay trong dòng chữ, không tự chiếm một hàng riêng. */
.wv-dh-lt-hang {
    display: inline;
}

/* Khối chương trình tour MẪU, chỉ đọc. Nền nhạt hơn phần khai riêng của đoàn
   để mắt phân biệt ngay đâu là bản dùng chung, đâu là bản của chính đoàn này. */
.wv-dh-lt-mau {
    margin-bottom: var(--wv-k4);
    padding: var(--wv-k3) var(--wv-k4);
    border-left: 3px solid var(--wv-vien);
    background: var(--wv-tam-mo);
    border-radius: 0 var(--wv-bo-2) var(--wv-bo-2) 0;
}

/* Dòng dịch vụ kéo dài từ ngày trước, ví dụ đêm thứ hai của một dịch vụ ba đêm.
   Bày nhạt hơn để không ai tưởng mình đang đặt thêm một dịch vụ nữa. */
.wv-dh-lt-keo-dai > td {
    opacity: .72;
}

/* ----- Khung riêng của trang xác nhận công khai ----- */

/*
   Trang này KHÔNG mượn khuôn của các cửa. Đo được trước khi tách ra: người chưa
   đăng nhập rơi vào nhánh khung trống của khuôn đầy đủ, mà nhánh ấy là một hộp
   hẹp 25rem đặt giữa nền xanh đậm, dựng riêng cho ô đăng nhập. Ảnh chụp khổ 390
   cho thấy tiêu đề và đoạn dẫn nằm ngoài tấm trắng nên chữ sẫm đè nền xanh đậm,
   đọc không ra, còn cả tờ yêu cầu bị bóp vào một cột hẹp.
*/
.wv-dh-dat-ngoai {
    background: var(--wv-nen);
    min-height: 100vh;
}

.wv-dh-dat-khung {
    max-width: 62rem;
    margin: 0 auto;
    padding: var(--wv-k6) var(--wv-k4) var(--wv-k10);
}

.wv-dh-dat-dinh {
    display: flex;
    align-items: center;
    gap: var(--wv-k4);
    margin-bottom: var(--wv-k5);
}

.wv-dh-dat-dinh img {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
}

/* Màn hẹp thì logo lùi lên trên, vì một cột chữ rộng chưa tới ba trăm điểm ảnh
   cạnh cái logo là mỗi dòng chỉ còn vài chữ. */
@media (max-width: 560px) {
    .wv-dh-dat-dinh {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wv-k2);
    }
}

.wv-dh-dat-chan {
    margin: var(--wv-k6) 0 0;
    text-align: center;
    color: var(--wv-chu-mo);
    font-size: .8125rem;
}

/* ---------- Khối gợi ý số xe của màn nhập dịch vụ, mã chức năng DM-19 ---------- */

/*
   Mỗi hạng xe một dòng riêng, mỗi dòng một nút Áp riêng. Gộp cả lời đề nghị vào một nút
   thì đoàn 28 khách cần một xe 29 chỗ CỘNG một xe 16 chỗ sẽ không áp được, vì một dòng
   dịch vụ chỉ mang đúng một hạng xe: người điều hành phải lập hai dòng, nên họ cần bấm
   áp hai lần vào hai chỗ khác nhau.
*/
.dh-goi-y-xe {
    display: flex;
    flex-direction: column;
    gap: var(--wv-k2);
}

.dh-goi-y-xe-dong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wv-k2) var(--wv-k4);
    padding: var(--wv-k2) var(--wv-k3);
    border: 1px solid var(--wv-vien);
    border-radius: var(--wv-bo-2);
    background: var(--wv-chinh-nen);
}

/* Nút đẩy sang mép phải ở khổ rộng, còn ở khổ hẹp thì flex-wrap cho nó xuống dòng thay vì
   bóp hai mẩu chữ bên trái. Đẩy bằng margin chứ không bằng một cột lưới cố định, vì tên
   hạng xe dài ngắn khác nhau. */
.dh-nut-ap-xe {
    margin-left: auto;
}

@media (max-width: 560px) {
    .dh-nut-ap-xe {
        margin-left: 0;
    }
}