/* ==========================================================
   Tập tin: WebCafebookApi/wwwroot/css/DatBanView.css
   Phiên bản: Đã làm sạch & tối ưu Responsive
========================================================== */

/* --- HEADER --- */
.booking-header-section {
    text-align: center;
    margin-bottom: 2rem;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, var(--cf-cream) 0%, #EFEBE5 100%);
    border-radius: 16px;
    border: 1px solid rgba(111, 78, 55, 0.1);
    position: relative;
    overflow: hidden;
}

    .booking-header-section::after {
        content: "event_seat";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        font-size: 10rem;
        color: rgba(111, 78, 55, 0.04);
        bottom: -30px;
        right: -10px;
        transform: rotate(-10deg);
    }

/* --- THẺ BÀN & TRẠNG THÁI --- */
.table-select-btn {
    border-color: var(--cf-brown) !important;
    color: var(--cf-dark-brown) !important;
    background-color: var(--cf-white);
    opacity: 1;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-width: 2px !important;
    border-radius: 16px !important;
}

    .table-select-btn:hover {
        background-color: var(--cf-cream) !important;
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(78, 52, 46, 0.12) !important;
    }

.table-item.unavailable {
    display: none; /* Ẩn hoàn toàn bàn không khả dụng */
}

/* --- THANH LỌC KHU VỰC (GIAO DIỆN PC) --- */
#areaFilterList .list-group-item {
    transition: all 0.3s ease;
    border-radius: 8px !important;
    margin-bottom: 5px;
    border: 1px solid transparent;
    color: var(--cf-text);
}

    #areaFilterList .list-group-item:not(.active):hover {
        background-color: var(--cf-cream);
    }

#areaFilterList .list-group-item-action.active {
    background-color: var(--cf-brown);
    border-color: var(--cf-brown);
    color: var(--cf-white);
    font-weight: bold;
}

/* =========================================
   RESPONSIVE CHO TABLET VÀ MOBILE (< 992px)
========================================= */
@media (max-width: 991.98px) {
    .booking-header-section {
        padding: 2rem 1rem;
    }

        .booking-header-section::after {
            font-size: 6rem;
            bottom: -15px;
            right: -5px;
        }

    /* BIẾN THANH LỌC DỌC THÀNH THANH VUỐT NGANG TRÊN ĐIỆN THOẠI */
    .filter-area-wrapper {
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 1rem;
    }

        .filter-area-wrapper .card-body {
            padding: 0 !important; /* Xóa padding để thanh cuộn có thể tràn ra sát mép màn hình */
        }

        .filter-area-wrapper .card-title {
            display: none;
        }

    #areaFilterList {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        gap: 10px;
    }

        /* FIX TRIỆT ĐỂ: Tạo một khối tàng hình ở cuối để đẩy các nút không bị chạm vách */
        #areaFilterList::after {
            content: "";
            flex: 0 0 10px; /* Chiếm 10px khoảng trống ở cuối cùng */
            display: block;
        }

        #areaFilterList::-webkit-scrollbar {
            display: none;
        }

        #areaFilterList .list-group-item {
            white-space: nowrap;
            border: 1px solid var(--cf-light-gray);
            border-radius: 50px !important;
            margin-bottom: 0;
            padding: 0.6rem 1.25rem;
            /* FIX LỖI LẸM NÚT: Ép các nút giữ nguyên hình dáng, cấm trình duyệt tự bóp méo */
            flex: 0 0 auto !important;
            width: auto;
            max-width: none;
            display: inline-flex;
            align-items: center;
        }
}

/* =========================================
   RESPONSIVE RIÊNG CHO MOBILE (< 768px)
========================================= */
@media (max-width: 767.98px) {
    /* Thu gọn ô nhập liệu Form tìm kiếm */
    .form-control-lg,
    .input-group-text,
    .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }

    .btn-primary.w-100.py-3 {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
    }

    /* Thu gọn Card Bàn */
    .table-item .table-select-btn {
        padding: 1rem !important;
    }

    .table-item h4 {
        font-size: 1.3rem;
    }
}