/* Lưới lịch tuần — bảng desktop ≥900px, thẻ mobile <900px (cùng HTML, khác CSS). */

.lm-schedule-page h1 {
    display: inline-block;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    /* Gạch chân vàng — điểm nhấn ấm cho giao diện đang toàn xanh (feedback UAT). */
    padding-bottom: 4px;
    border-bottom: 3px solid var(--lm-gold);
}

.lm-schedule-week-label {
    color: var(--lm-green);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* ─── Điều hướng tuần ────────────────────────────────────────────────────── */

.lm-week-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.lm-week-nav input[type="date"] {
    width: auto;
    height: 36px;
}

/* ─── Bộ lọc ──────────────────────────────────────────────────────────────── */

.lm-schedule-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.lm-schedule-filters__form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lm-schedule-filters__form select {
    width: auto;
    min-width: 180px;
}

.lm-schedule-filters__checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
    font-weight: 400;
    color: var(--lm-ink);
    margin: 0;
}

.lm-schedule-filters__checkbox input {
    width: auto;
}

.lm-schedule-actions {
    display: flex;
    gap: 0.5rem;
}

.lm-schedule-add {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* ─── Bảng lịch ───────────────────────────────────────────────────────────── */

.lm-schedule-table-wrap {
    background: var(--lm-white);
    border-radius: var(--lm-radius);
    overflow: hidden;
    border: 1px solid var(--lm-border);
}

.lm-schedule-table td {
    font-size: 14px;
}

.lm-cell-weekday {
    font-weight: 700;
    white-space: nowrap;
}

/* Zebra theo NGÀY (không phải theo dòng) — dùng !important để thắng chắc chắn
   .lm-table tbody tr:nth-child(even) (components.css:154, zebra theo dòng chung cho mọi
   bảng), vì 1 ngày nhiều buổi (rowspan) phải cùng 1 màu mới thấy rõ ranh giới giữa các ngày
   (feedback UAT: "hiển thị giữa các ngày có sự rõ nét hơn"). Dùng xám trung tính, KHÔNG dùng
   --lm-green-light — màu đó đã dành riêng cho "hôm nay" (.lm-cell--today bên dưới), tránh
   2 ý nghĩa khác nhau dùng chung 1 màu gây hiểu nhầm. */
.lm-schedule-table tbody tr.lm-day-group--even {
    background: var(--lm-white) !important;
}

.lm-schedule-table tbody tr.lm-day-group--odd {
    background: var(--lm-muted-bg) !important;
}

.lm-cell--today {
    background: var(--lm-green-light) !important;
    /* border-left vàng — nếu không có, "hôm nay" dễ lẫn với các ô xung quanh, cộng thêm
       điểm nhấn ấm cho giao diện đang toàn xanh (feedback UAT). Ô <td> này luôn vẽ đè lên
       nền <tr> (zebra theo ngày ở trên) vì là phần tử con — không xung đột. */
    border-left: 3px solid var(--lm-gold) !important;
}

.lm-event-row--mine {
    border-left: 3px solid var(--lm-gold);
}

.lm-event-row--pending {
    opacity: 0.7;
}

.lm-event-edit-link {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lm-green);
    text-decoration: none;
}

.lm-event-edit-link:hover {
    text-decoration: underline;
}

/* Chỉ hiện ở mobile — xem chú thích trong week.php tại chỗ render dòng này */
.lm-mobile-day-header {
    display: none;
}

/* ─── Mobile: chuyển bảng thành thẻ theo ngày ───────────────────────────── */

@media (max-width: 900px) {
    .lm-schedule-table thead {
        display: none;
    }

    .lm-schedule-table,
    .lm-schedule-table tbody,
    .lm-schedule-table tr,
    .lm-schedule-table td {
        display: block;
        width: 100%;
    }

    .lm-schedule-table tr {
        border-bottom: 1px solid var(--lm-border);
        padding: 0.75rem 1rem;
    }

    .lm-schedule-table tr:nth-child(even) {
        background: var(--lm-white);
    }

    /* THIẾU tiền tố ".lm-schedule-table" (khác mọi rule khác trong block này) là root cause thật
       của bug "tiêu đề bảng và nội dung không khớp" khi in (/ck:debug 2026-08-06): 2 class này
       dùng CHUNG cho cả bảng web (.lm-schedule-table) VÀ bảng in (.lm-print-table, event-row.php
       dùng chung). Không có tiền tố → rule "display:inline-block" (đổi Thứ/Ngày từ ô bảng thật
       thành khối inline xếp CHỒNG dọc, không còn là table-cell) rò rỉ sang CẢ bảng in bất cứ khi
       nào khung nhìn ≤900px (đúng ngưỡng bị lỗi khi in thật — xác nhận bằng getBoundingClientRect:
       cột Ngày đè lên cột Thứ, mọi cột sau bị lệch trái so với tiêu đề). */
    .lm-schedule-table .lm-cell-weekday,
    .lm-schedule-table .lm-cell-date {
        display: inline-block;
        width: auto;
        padding: 0 0.5rem 0.5rem 0;
        color: var(--lm-green);
    }

    .lm-schedule-table td:not(.lm-cell-weekday):not(.lm-cell-date) {
        padding: 0.15rem 0;
        border: 0;
    }

    .lm-schedule-table td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--lm-muted);
    }

    .lm-schedule-table td[data-label="Nội dung công việc"]::before {
        display: block;
    }

    .lm-mobile-day-header {
        display: block;
        background: var(--lm-green);
        padding: 0.5rem 1rem !important;
        border-bottom: 0 !important;
    }

    .lm-mobile-day-header td {
        display: block !important;
        color: var(--lm-white) !important;
        font-weight: 700;
        padding: 0 !important;
    }
}