/*
 * Module Thực đơn (thuc-don) — phần CSS riêng của module; các thành phần chung dùng hệ thống mn-* của giao diện (mn.css).
 * Gồm: ô chọn cơ sở / nhóm tuổi, bảng món ăn (ngày × bữa; mỗi ngày thành một thẻ trên điện thoại), block tuần này, bản in A4.
 */

/* ----- Ô chọn cơ sở, nhóm tuổi (các nút là thành phần .mn-btn của giao diện) ----- */
.thuc-don-pick {
    display: grid;
    /* minmax(0, …): hàng nút không được nới rộng cột (và cả trang) theo bề rộng nội dung của nó */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mn-space-3);
    margin: 0 0 var(--mn-space-6);
}

.thuc-don-pick__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mn-space-2) var(--mn-space-4);
}

.thuc-don-pick__label {
    flex: none;
    min-width: 5.5rem;
    margin: 0;
    color: var(--mn-ink-700);
    font-size: var(--mn-text-sm);
    font-weight: 800;
}

.thuc-don-pick__list {
    flex: 1 1 16rem;
}

/* Nút chuyển tuần: nhãn đầy đủ "Tuần dd/mm – dd/mm/yyyy"; trên điện thoại hiện nhãn ngắn để hai nút nằm trên một hàng */
.thuc-don-nav__short {
    display: none;
}

@media (max-width: 575.98px) {
    /* nhãn đầy đủ vẫn là tên của liên kết với trình đọc màn hình */
    .thuc-don-nav__long {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .thuc-don-nav__short {
        display: inline;
    }

    /*
     * Điện thoại: mỗi nhóm nút chọn là MỘT hàng cuộn ngang (thay vì 3–4 hàng), để bảng món ăn nằm gần đầu trang.
     * Lựa chọn đang dùng được js/thuc-don.js đưa vào tầm nhìn; không có JavaScript vẫn cuộn và bấm được.
     */
    .thuc-don-pick {
        gap: var(--mn-space-2);
        margin-bottom: var(--mn-space-5);
    }

    .thuc-don-pick__row {
        display: block;
        min-width: 0;
    }

    .thuc-don-pick__label {
        margin-bottom: 2px;
    }

    .thuc-don-pick__list {
        flex-wrap: nowrap;
        gap: var(--mn-space-2);
        /* chừa chỗ cho viền focus của nút đầu và nút cuối */
        padding: 4px 4px 8px;
        margin: 0 -4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .thuc-don-pick__list > li {
        flex: none;
    }
}

/* ----- Nút in, chia sẻ của trang tuần, đặt sau các thực đơn (trang chi tiết dùng .mn-article__tools của giao diện) ----- */
.thuc-don-tools {
    margin: 0;
}

/* thực đơn cuối cùng đứng ngay trên hàng nút in, chia sẻ */
.thuc-don-item:last-of-type {
    margin-bottom: var(--mn-space-4);
}

/* ----- Một thực đơn trên trang tuần ----- */
.thuc-don-item__badges {
    margin: 0 0 var(--mn-space-4);
}

.thuc-don-item__more {
    margin: 0;
}

.thuc-don-menu > * + * {
    margin-top: var(--mn-space-5);
}

.thuc-don-menu > *:last-child {
    margin-bottom: 0;
}

.thuc-don-menu__subtitle {
    margin: 0 0 var(--mn-space-3);
    color: var(--mn-blue-800);
    font-size: 1.125rem;
}

.thuc-don-detail .thuc-don-menu {
    margin-bottom: var(--mn-space-6);
}

/* ----- Bảng món ăn: dòng = thứ trong tuần, cột = bữa ----- */

/*
 * Chú thích bảng (tiêu đề – cơ sở – nhóm tuổi) lặp lại tiêu đề và các nhãn nằm ngay phía trên bảng: chỉ dành cho
 * trình đọc màn hình (bảng vẫn có tên khi được duyệt riêng), không hiện trên màn hình lẫn bản in.
 */
.thuc-don-grid caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.thuc-don-grid tbody th {
    width: 8.5rem;
    background: var(--mn-bg-soft);
    color: var(--mn-blue-800);
}

.thuc-don-grid__day {
    display: block;
    font-weight: 800;
}

.thuc-don-grid__date {
    color: var(--mn-ink-600);
    font-size: var(--mn-text-sm);
    font-weight: 400;
}

/* Hôm nay: vạch vàng bên trái + nhãn chữ "Hôm nay" (không chỉ dùng màu) */
.thuc-don-grid__today > th {
    box-shadow: inset 5px 0 0 var(--mn-yellow-400);
}

.thuc-don-grid__empty {
    color: var(--mn-ink-500);
}

.thuc-don-dishes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.thuc-don-dishes > li + li {
    margin-top: 4px;
}

@media (max-width: 639.98px) {
    /* Bảng xếp chồng: mỗi ngày là một thẻ, tên ngày là đầu thẻ */
    .thuc-don-grid tbody th {
        width: 100%;
        background: var(--mn-blue-50);
        font-size: 1.0625rem;
    }

    .thuc-don-grid__day {
        display: inline;
    }

    /* Đầu thẻ đã là tên ngày: không in thêm nhãn cột "Thứ, ngày" phía trên */
    .thuc-don-grid tbody th[data-label]::before {
        content: none;
    }
}

/* ----- Ảnh chụp thực đơn ----- */
.thuc-don-images__item {
    margin-left: 0;
    margin-right: 0;
}

.thuc-don-images__item a {
    display: block;
}

/* ----- Trạng thái chưa có thực đơn ----- */
.thuc-don-empty__link {
    margin: var(--mn-space-4) 0 0;
    text-align: center;
}

/* ----- Dòng nguồn của tư liệu cũ: liên kết "xem bản gốc" có vùng chạm cao 44px mà không đổi chiều cao dòng ----- */
.thuc-don-source a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
}

/* ----- Điều hướng cuối trang chi tiết ----- */
.thuc-don-back {
    margin-top: var(--mn-space-5);
}

/* ----- Block "Thực đơn tuần này" ----- */
.thuc-don-block__week {
    margin: 0 0 var(--mn-space-3);
    color: var(--mn-ink-700);
    font-weight: 700;
}

.thuc-don-block__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.thuc-don-block__item {
    padding: var(--mn-space-3) 0;
    border-top: 1px solid var(--mn-line);
}

.thuc-don-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
}

.thuc-don-block__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--mn-link);
    font-weight: 700;
}

.thuc-don-block__link:hover,
.thuc-don-block__link:focus {
    color: var(--mn-link-hover);
}

.thuc-don-block__todaylabel {
    margin: 4px 0 2px;
    color: var(--mn-ink-600);
    font-size: var(--mn-text-sm);
    font-weight: 700;
}

.thuc-don-block__today {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 12px;
    margin: 0;
    font-size: var(--mn-text-sm);
}

.thuc-don-block__today > dt {
    font-weight: 700;
}

.thuc-don-block__today > dd {
    margin: 0;
}

.thuc-don-block__more {
    margin: var(--mn-space-3) 0 0;
}

/* ----- Block "Thực đơn mới công bố": tiêu đề phần tư liệu trước sắp xếp ----- */
.thuc-don-block__legacy {
    margin: var(--mn-space-5) 0 var(--mn-space-2);
}

/* ----- Bản in: bảng món ăn gọn trong một trang A4 (khổ ngang do trang chi tiết / trang tuần khai báo qua @page) ----- */
@media print {
    .thuc-don .mn-pagehead {
        margin-bottom: 6pt;
        padding-bottom: 4pt;
    }

    .thuc-don .mn-pagehead__lead,
    .thuc-don .mn-article__meta {
        margin-top: 2pt;
        font-size: 10pt;
    }

    .thuc-don .mn-pagehead__title,
    .thuc-don .mn-article__title {
        font-size: 16pt;
    }

    .thuc-don .mn-section,
    .thuc-don-detail .thuc-don-menu {
        margin-bottom: 8pt;
    }

    .thuc-don-item__badges {
        margin-bottom: 4pt;
    }

    .thuc-don-menu > * + * {
        margin-top: 6pt;
    }

    .thuc-don-grid-wrap {
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .thuc-don-grid {
        font-size: 9.5pt;
    }

    /* Trang tuần: phần đầu trang (tuần, lời dẫn chọn cơ sở) lặp lại tiêu đề của từng thực đơn nên không in */
    .thuc-don-week > .mn-pagehead {
        display: none;
    }

    .thuc-don-item .mn-section__head {
        margin-bottom: 4pt;
    }

    .thuc-don-item .mn-section__title {
        padding-left: 0;
        font-size: 16pt;
    }

    .thuc-don-item .mn-section__title::before {
        display: none;
    }

    .thuc-don-item .mn-section__title a {
        text-decoration: none;
    }

    /* Trang tuần in hai thực đơn: mỗi thực đơn bắt đầu một trang giấy */
    .thuc-don-item + .thuc-don-item {
        break-before: page;
        page-break-before: always;
    }

    .thuc-don-grid th,
    .thuc-don-grid td {
        padding: 3pt 5pt;
        border: 0.75pt solid #000;
        line-height: 1.3;
    }

    .thuc-don-grid thead th,
    .thuc-don-grid tbody th {
        background: #fff !important;
        color: #000;
        box-shadow: none;
    }

    /* khung bảng liền nét ở bản in: giao diện bỏ viền dưới của dòng cuối và tô viền xanh dưới dòng tiêu đề */
    .thuc-don-grid thead th,
    .thuc-don-grid tbody tr:last-child > th,
    .thuc-don-grid tbody tr:last-child > td {
        border-bottom: 0.75pt solid #000;
    }

    .thuc-don-grid tbody th {
        width: 22mm;
    }

    .thuc-don-grid .mn-badge {
        display: none;
    }

    .thuc-don-dishes > li + li {
        margin-top: 0;
    }

    .thuc-don-note {
        padding: 4pt 8pt;
        font-size: 9.5pt;
    }

    .thuc-don-note::before {
        display: none;
    }

    .thuc-don-images__item img {
        max-height: 150mm;
        width: auto;
    }
}