/* BMS Player Web theme - Đợt 13: ĐÚNG theo file Stitch thật xuất ra (bảng màu
   "Obsidian Baize" - dùng cho các màn hình "tinh gọn": nhân viên/khách chơi).
   Toàn bộ tên class giữ nguyên như bản cũ để không phải sửa file .razor - chỉ đổi giá
   trị màu/biến/font trong file CSS này. Responsive. */

:root {
    /* Đợt 15: màu lấy ĐÚNG theo ảnh chụp/HTML Stitch "tinh gọn" (tailwind config của
       qu_n_l_b_n_ch_i_tinh_g_n_mobile), không theo phần mô tả chữ trong DESIGN.md - hai
       nguồn này lệch nhau, khách hàng đã chọn theo ảnh chụp. */

    /* Nền: surface / surface-container-low / -container / -container-high / -bright */
    --bg-page: #0D1320;
    --bg-surface: #151B29;         /* card, module */
    --bg-surface-mid: #1A202D;     /* dải tạm tính trong card, ô nhập */
    --bg-surface-raised: #242A38;  /* nút phụ, chip đang chọn, hover */
    --bg-surface-bright: #333947;  /* badge "Bàn trống" */
    --bg-footer: #080E1B;          /* surface-container-lowest (cũng là nền bottom-nav) */

    /* Viền */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);

    /* Chữ: on-surface / on-surface-variant / outline */
    --text-primary: #DDE2F5;
    --text-secondary: #BBCABF;
    --text-muted: #86948A;
    --text-on-accent: #003824;     /* on-primary: chữ trên nút emerald */

    /* Thương hiệu / điểm nhấn (Primary = Emerald, Secondary = Champagne Gold) */
    --emerald: #4EDEA3;
    --emerald-strong: #6FFBBE;     /* hover sáng hơn, không đổ bóng */
    --emerald-soft: rgba(78, 222, 163, 0.10);
    --gold: #FFB95F;
    --gold-soft: rgba(238, 152, 0, 0.20);
    --text-on-gold: #472A00;       /* on-secondary */
    --cream: #DDE2F5;              /* giữ tên biến cũ, = chữ sáng thường */

    /* Lỗi / nguy hiểm - token RIÊNG, không dùng chung với trạng thái bàn. */
    --error: #FFB4AB;
    --error-soft: rgba(255, 180, 171, 0.14);
    --on-error: #690005;

    /* Trạng thái bàn: "đang chơi" = emerald, "trống" = trung tính, "đặt trước" = gold. */
    --available: #86948A;
    --occupied: #4EDEA3;
    --occupied-soft: rgba(78, 222, 163, 0.10);
    --reserved: #FFB95F;
    --reserved-soft: rgba(238, 152, 0, 0.20);
    --maintenance: #FFB3AF;
    --maintenance-soft: rgba(255, 179, 175, 0.14);

    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    /* Bí danh giữ tương thích - CHỈ dùng cho gradient SVG trong Tables.razor
       (stop-color="var(--felt)"...). */
    --felt: var(--emerald);
    --felt-light: var(--emerald-strong);
    --felt-dark: #042F23;
    --ink: var(--text-primary);
}

* {
    box-sizing: border-box;
}

/* Đợt 13: icon font "Material Symbols Outlined" - ĐÚNG như Stitch dùng (thay cho SVG
   tự vẽ trước đây). font-variation-settings điều khiển độ dày/độ lấp đầy của icon. */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -4px;
    flex-shrink: 0;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    font-family: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
}

/* Đợt 15: số liệu thời gian thực (đồng hồ bàn, tiền) dùng chữ số đều độ rộng (tnum) để
   không bị "nhảy" bố cục khi đếm - theo DESIGN.md. */
.live-pill, .table-timer, .price-tag, .stat-strip-value, .elo-badge-value,
.data-table td, .bracket-player {
    font-variant-numeric: tabular-nums;
}

.icon-accent {
    color: var(--emerald);
}


/* Đợt 13: Stitch dùng 1 font duy nhất (Inter) cho mọi cấp tiêu đề/nội dung ở các màn
   hình tinh gọn - KHÔNG dùng serif như suy đoán ban đầu (đó là bảng màu khác, dùng cho
   AdminStaffWeb). h1/h2 chỉ khác về cỡ chữ/độ đậm (letter-spacing âm nhẹ kiểu Stitch). */
h1 {
    color: var(--text-primary);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

h2 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* FocusOnNavigate (App.razor) đặt focus vào h1 sau mỗi lần chuyển trang - ẩn khung viền
   trắng mặc định của trình duyệt. */
h1:focus {
    outline: none;
}

/* Tiêu đề nhóm nhỏ trong modal (Gọi món, Giảm giá...) - trước đây chưa có style. */
h3 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .6rem;
}

.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: var(--text-primary);
    font-size: 1.1rem;
}

#blazor-error-ui {
    background: var(--bg-surface);
    border-top: 2px solid var(--error);
    color: var(--text-primary);
    display: none;
    padding: .75rem 1rem;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 1000;
}

/* ===== Đợt 16: khung trang theo bố cục Stitch "tinh gọn" =====
   Desktop (>= 1024px): sidebar cố định 288px (w-72) bên trái + header mỏng + nội dung
   chiếm HẾT phần còn lại (trước đây nội dung bị co thành cột ~300px ở giữa vì
   margin:auto trong flex-column, để lại 2 khoảng trống lớn hai bên).
   Mobile/tablet (< 1024px): ẩn sidebar, header 1 hàng + thanh điều hướng dưới. */
.app-shell {
    min-height: 100vh;
}

.app-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.app-body .app-content {
    flex: 1;
}

/* --- Sidebar (desktop) --- */
.side-nav {
    display: none;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--text-primary);
}

.side-brand-text,
.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.side-brand-name {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.side-brand-sub {
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.side-links {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem 1rem;
    border-radius: var(--radius);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .875rem;
    line-height: 22px;
    transition: background-color .15s ease, color .15s ease;
}

.side-link:hover {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

.side-link.active {
    background: var(--bg-surface-raised);
    color: var(--emerald);
}

.side-link .nav-badge {
    margin-left: auto;
}

.side-section {
    margin: 1rem 0 .25rem;
    padding: 0 1rem;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Khối "Hệ thống" ở đáy sidebar (Stitch) - ở đây hiện tài khoản đang đăng nhập. */
.side-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.side-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.side-card-label {
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.side-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emerald);
}

.side-card-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: .875rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-card-name:hover {
    color: var(--emerald);
}

.side-card-sub {
    font-size: .75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.side-card .btn {
    margin-top: .35rem;
}

.side-card-logout {
    justify-content: center;
}

/* --- Header --- */
.topbar {
    background: rgba(13, 19, 32, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    height: 64px;
    padding: 0 1.25rem;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 1300;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    text-decoration: none;
    color: var(--text-primary);
}

.brand-mark {
    flex-shrink: 0;
}

.brand-sub {
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 14px;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    margin-left: auto;
}

.topbar-actions .btn {
    margin-top: 0;
    text-decoration: none;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text-primary);
    text-decoration: none;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-strong);
    color: var(--emerald);
    font-weight: 600;
    font-size: .9rem;
}

.user-chip.active .user-avatar,
.user-chip:hover .user-avatar {
    border-color: var(--emerald);
}

.user-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-chip-name {
    font-size: .875rem;
    font-weight: 500;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-chip-role {
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

/* --- Nội dung --- */
.app-content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

/* Form/khung nhập liệu không nên kéo giãn hết bề ngang desktop. */
.form-card {
    max-width: 560px;
}

@media (min-width: 1024px) {
    .side-nav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2.5rem;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 288px;
        padding: 1.5rem;
        background: var(--bg-footer);
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
        border-right: 1px solid var(--border-subtle);
        overflow-y: auto;
        z-index: 1350;
    }

    .side-nav-top {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .app-body {
        padding-left: 288px;
    }

    /* Logo đã có trên sidebar - header desktop chỉ còn khối tài khoản bên phải. */
    .topbar .brand {
        display: none;
    }

    .topbar {
        padding: 0 2.5rem;
    }

    .app-content {
        padding: 2.5rem;
    }

    h1 {
        font-size: 2.25rem;
        line-height: 44px;
        letter-spacing: -0.025em;
        margin-bottom: 1.5rem;
    }
}

/* Trên desktop đã có khối tài khoản + nút đăng xuất ở đáy sidebar. */
@media (min-width: 1024px) {
    .topbar-logout {
        display: none;
    }
}

.section {
    margin-bottom: 2rem;
}

.name-field {
    max-width: 320px;
    margin-bottom: 1.25rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.form-field label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Hàng checkbox đơn (vd. "Ghi nhớ đăng nhập") - luôn căn trái, ô tick sát chữ, không
   kéo giãn/căn giữa như .form-field dạng cột. */
.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .45rem;
    width: fit-content;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    margin: .1rem 0 .3rem;
}

.checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: none;
    accent-color: var(--emerald);
}

.input {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: .55rem .7rem;
    font-size: .95rem;
    width: 100%;
    background: var(--bg-surface-mid);
    color: var(--text-primary);
    font-family: inherit;
}

.input::placeholder {
    color: var(--text-muted);
}

/* Chrome/Edge tự ý tô nền trắng/vàng nhạt cho ô đã được trình duyệt tự điền (autofill) -
   ví dụ ô Email/Mật khẩu ở trang đăng nhập khi trình duyệt đã nhớ sẵn - bất kể CSS nền
   tối ở trên, vì đây là style nội bộ của trình duyệt (:-webkit-autofill), phải ghi đè
   bằng box-shadow inset + !important mới thắng được. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-surface-mid) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* DESIGN.md: focus chỉ đổi viền sang emerald 1px, KHÔNG có quầng sáng (halo) bên ngoài. */
.input:focus {
    outline: none;
    border-color: var(--emerald);
}

.table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Đợt 15: card kiểu Stitch tinh gọn - phân lớp phẳng (nền Tier 1 + viền hairline), bo
   12px, KHÔNG còn viền màu trạng thái 4px phía trên và KHÔNG nhấc thẻ khi hover. Trạng
   thái bàn đã thể hiện bằng pill/badge ở góc phải tiêu đề. */
.table-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.card-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: calc(var(--radius) - 4px);
    margin-bottom: .5rem;
    background: var(--bg-surface-raised);
}

/* Ô ảnh trống: "inset pocket" tối theo DESIGN.md, thay cho mảng gradient emerald trang
   trí (DESIGN.md cấm dùng emerald làm mảng màu trang trí). */
.card-thumb-placeholder {
    width: 100%;
    height: 120px;
    border-radius: calc(var(--radius) - 4px);
    margin-bottom: .5rem;
    background: var(--bg-footer);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-thumb-placeholder svg {
    width: 40%;
    height: 40%;
    opacity: .35;
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.table-name {
    font-weight: 700;
}

/* Đợt 15: badge mặc định là TRUNG TÍNH. Gold chỉ dành cho VIP/hạng hội viên/tiền chờ thu
   (.badge-gold), emerald cho trạng thái tích cực (.badge-success) - theo DESIGN.md. */
.badge {
    background: var(--bg-surface-raised);
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-gold {
    background: var(--gold-soft);
    color: var(--gold);
}

.badge-success {
    background: var(--emerald-soft);
    color: var(--emerald);
}

/* Giá tiền nổi bật trên card (thay cho giá đặt trong badge vàng) - như card cơ Stitch. */
.price-tag {
    color: var(--emerald);
    font-weight: 600;
    font-size: 1.05rem;
    white-space: nowrap;
}

.table-meta {
    font-size: .85rem;
    color: var(--text-secondary);
}

/* Đợt 13: badge trạng thái bàn - ĐÚNG quy ước Stitch (xem ghi chú ở khai báo
   --available/--occupied phần :root): "đang chơi" nổi bật màu nhấn, "trống" trung tính. */
.badge-status-available {
    background: var(--bg-surface-bright);
    color: var(--text-secondary);
}

.badge-status-occupied {
    background: var(--occupied-soft);
    color: var(--occupied);
}

.badge-status-reserved {
    background: var(--reserved-soft);
    color: var(--reserved);
}

.badge-status-maintenance {
    background: var(--maintenance-soft);
    color: var(--maintenance);
}

.btn {
    border: none;
    border-radius: var(--radius);
    padding: .55rem 1rem;
    font-size: .9rem;
    cursor: pointer;
    margin-top: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.btn-primary {
    background: var(--emerald);
    color: var(--text-on-accent);
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--emerald-strong);
}

/* Đợt 15: nút bị vô hiệu dùng nền trung tính mờ (trước đây nền hồng --maintenance trông
   như nút cảnh báo). Áp dụng cho mọi loại nút. */
.btn:disabled,
.btn:disabled:hover {
    background: var(--bg-surface-raised);
    color: var(--text-muted);
    border-color: transparent;
    cursor: not-allowed;
    filter: none;
    opacity: .7;
}

.btn-sm {
    padding: .4rem .75rem;
    font-size: .85rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.data-table th, .data-table td {
    text-align: left;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: .88rem;
}

.data-table th {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

.hint-text {
    color: var(--text-secondary);
    font-size: .85rem;
}

.error-text {
    color: var(--error);
    font-size: .85rem;
    font-weight: 600;
}

.page-empty {
    color: var(--text-muted);
}

/* ===== Auth pages (login/register) - consistent look with AdminStaffWeb login,
   adapted to the Player Web top-bar layout instead of a sidebar. ===== */

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.login-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--emerald-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.login-icon svg {
    width: 34px;
    height: 34px;
    color: var(--emerald);
}

.login-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: .4rem;
}

.login-subtitle {
    font-size: .9rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-form-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

/* Hàng tab chọn loại đăng nhập (Người chơi / Nhân viên) - trước đây viết inline style. */
.tab-row {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.tab-row .btn {
    flex: 1;
    justify-content: center;
    margin-top: 0;
}

.input-icon-wrap {
    position: relative;
}

.input-icon-wrap .input {
    padding-left: 2.6rem;
    height: 46px;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    display: flex;
}

.btn-block {
    width: 100%;
    justify-content: center;
    height: 48px;
    font-size: 1rem;
}

.auth-switch {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .9rem;
    color: var(--text-secondary);
}

.auth-switch a {
    color: var(--emerald);
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* ===== Đợt 16: thanh điều hướng dưới + điều chỉnh mobile/tablet (< 1024px) ===== */
.bottom-nav {
    display: none;
}

@media (max-width: 1023.98px) {
    .app-shell {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Nền kính mờ như Stitch (surface-container-lowest 90% + blur), chừa vùng an toàn
       của thanh home trên iPhone/Android cử chỉ. */
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1400;
        background: rgba(8, 14, 27, 0.9);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: 0 -1px 12px rgba(0, 0, 0, .25);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .bottom-nav-link {
        position: relative;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        min-height: 64px;
        padding: .45rem .2rem;
        font-size: .72rem;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        color: var(--text-secondary);
    }

    .bottom-nav-link.active {
        color: var(--emerald);
    }

    .bottom-nav-badge {
        position: absolute;
        top: .3rem;
        right: 18%;
    }

    /* Nâng nút chat nổi + khung chat lên trên thanh bottom-nav để không bị che. */
    .chat-fab {
        bottom: calc(64px + 1rem + env(safe-area-inset-bottom, 0px));
    }

    .chat-panel {
        bottom: calc(64px + 4.25rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 700px) {
    /* Header mobile: chỉ giữ avatar (bấm vào = Hồ sơ) + nút đăng xuất, ẩn tên/vai trò. */
    .user-chip-text,
    .topbar .staff-badge {
        display: none;
    }

    h1 {
        font-size: 1.75rem;
        line-height: 36px;
        letter-spacing: -0.02em;
    }

    /* Bảng nhiều cột: cuộn ngang TRONG bảng thay vì làm cả trang bị cuộn ngang. */
    .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .table-grid {
        grid-template-columns: 1fr;
    }
}

.input-icon-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--emerald);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
}

.input-icon-toggle:hover {
    color: var(--text-primary);
}

.staff-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--text-on-gold);
    font-size: .7rem;
    font-weight: 700;
}

/* Số lượng thông báo chưa xử lý (tin nhắn mới / yêu cầu nạp tiền chờ duyệt) cạnh
   các mục điều hướng dành cho nhân viên. */
.nav-badge {
    display: inline-block;
    margin-left: .35rem;
    min-width: 1.1rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--error);
    color: var(--on-error);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

/* Đợt 12: hàng thông tin gọn (loại bàn/sức chứa/giá) theo mẫu Stitch - thay cho 3 dòng
   .table-meta riêng lẻ trước đây. */
.table-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .7rem;
    font-size: .82rem;
    color: var(--text-secondary);
    margin-bottom: .4rem;
}

.table-timer {
    margin-top: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface-mid);
    border-radius: var(--radius);
    padding: .5rem .9rem;
    font-weight: 600;
    color: var(--emerald);
}

/* Đợt 13: card bàn kiểu Stitch (bản tinh gọn) - thanh filter dạng pill, pill "đang
   chơi" có chấm nhấp nháy, lưới nút hành động 2 cột. */
.filter-chip-row {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: .15rem;
}

.filter-chip {
    flex-shrink: 0;
    font-family: inherit;
    border: none;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
}

.filter-chip-active {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

.table-grid-cards {
    gap: 1rem;
}

.table-card-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--occupied-soft);
    color: var(--occupied);
    border-radius: 999px;
    padding: .3rem .65rem;
    font-size: .78rem;
    font-weight: 600;
    flex-shrink: 0;
}

.live-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--occupied);
    animation: bms-pulse 1.6s ease-in-out infinite;
}

@keyframes bms-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.table-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .6rem;
}

.table-actions-grid .btn {
    margin-top: 0;
    justify-content: center;
}

.table-actions-grid-1 {
    grid-template-columns: 1fr;
}

.btn-full {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.input-sm {
    width: auto;
    flex: 1;
    min-width: 100px;
}

/* Đợt 15: nút nguy hiểm (Xóa, Từ chối, Mất cơ) dùng token lỗi riêng - trước đây dùng
   --occupied (giờ là emerald) nên hiện màu XANH, trùng màu với nút "Duyệt". */
.btn-danger {
    background: var(--error);
    color: var(--on-error);
    font-weight: 600;
}

.btn-danger:hover {
    filter: brightness(1.08);
}

/* Nút gold (secondary): "Nhận bàn ngay" (bàn đặt trước), "Hư hỏng", "Nhận khách đến trễ". */
.btn-warning,
.btn-gold {
    background: var(--gold);
    color: var(--text-on-gold);
    font-weight: 600;
}

.btn-warning:hover,
.btn-gold:hover {
    filter: brightness(1.08);
}

.row-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

/* .card / .form-card - khung card chung (dùng ở Wallet.razor: card số dư + card nạp
   tiền) - trước Đợt 11 class này được dùng trong markup nhưng chưa từng định nghĩa CSS
   tương ứng, nhân tiện bổ sung cho đồng bộ với .table-card/.stat-tile. */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* ===== Đợt 2: hero banner, thẻ bàn nâng cấp, thống kê nhanh, modal, tab, chat widget ===== */

/* Đợt 15: dải thống kê nhanh 1 hàng (Quick Stats Strip của Stitch) - thay cho hero
   banner gradient emerald + 3 ô thống kê trước đây. */
.stat-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.stat-strip-group {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex-wrap: wrap;
}

.stat-strip-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-secondary);
}

.stat-strip-item strong {
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 600;
}

.stat-strip-sep {
    color: var(--text-muted);
}

.stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-surface-bright);
    flex-shrink: 0;
}

.stat-dot-live {
    background: var(--emerald);
}

.stat-dot-reserved {
    background: var(--gold);
}

.stat-strip-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.stat-strip-label {
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.stat-strip-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--emerald);
}

.table-card {
    cursor: default;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.modal-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-card h2 {
    margin-top: 0;
}

.form-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.btn-ghost {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.btn-ghost:hover {
    background: var(--border-strong);
}

.preview-image {
    max-width: 100%;
    max-height: 140px;
    border-radius: var(--radius);
    margin-top: .5rem;
    display: block;
}

.tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.tab-btn {
    border: none;
    background: none;
    padding: .6rem 1rem;
    font-size: .95rem;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
}

.tab-btn-active {
    border-bottom-color: var(--emerald);
    color: var(--text-primary);
    font-weight: 700;
}

/* Đợt 15: khối số liệu lớn (Số dư Ví / ELO) - nền tối phẳng + nhãn in hoa giãn chữ như
   card "Ví ký quỹ & số dư" của Stitch, thay cho mảng gradient emerald trước đây. */
.elo-badge {
    background: var(--bg-surface-mid);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.elo-badge-label {
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.elo-badge-value {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.elo-badge-name {
    font-size: .85rem;
    color: var(--text-secondary);
}

.profile-card {
    max-width: 460px;
}

.phone-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* ===== Chat widget ===== */

.chat-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--emerald);
    color: var(--text-on-accent);
    border: none;
    box-shadow: var(--shadow);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1500;
}

.chat-fab:hover {
    filter: brightness(1.12);
}

.chat-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 5.5rem;
    width: 320px;
    max-width: calc(100vw - 2.5rem);
    height: 420px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    z-index: 1500;
    overflow: hidden;
}

.chat-panel-header {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    padding: .7rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    border-bottom: 1px solid var(--border-subtle);
}

.chat-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.chat-bubble {
    max-width: 80%;
    padding: .5rem .7rem;
    border-radius: 10px;
    font-size: .85rem;
}

.chat-bubble-mine {
    align-self: flex-end;
    background: var(--emerald);
    color: var(--text-on-accent);
}

.chat-bubble-theirs {
    align-self: flex-start;
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

.chat-bubble-meta {
    font-size: .7rem;
    opacity: .75;
    margin-bottom: .15rem;
}

.chat-bubble-image {
    max-width: 100%;
    border-radius: 8px;
    margin-top: .3rem;
    display: block;
}

.chat-input-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem;
    border-top: 1px solid var(--border-subtle);
}

.chat-attach-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}

.chat-attach-btn:hover {
    background: var(--border-strong);
}

.chat-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.inbox-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1rem;
    min-height: 400px;
}

.inbox-thread-list {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-y: auto;
    max-height: 70vh;
}

.inbox-thread-item {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}

.inbox-thread-item:hover {
    background: var(--bg-surface-raised);
}

.inbox-thread-item-active {
    background: var(--bg-surface-raised);
    border-left: 3px solid var(--emerald);
}

.inbox-messages {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.inbox-chat-messages {
    flex: 1;
    max-height: 60vh;
}

@media (max-width: 700px) {
    .inbox-layout {
        grid-template-columns: 1fr;
    }

}

/* Đợt 8: Footer chung cho toàn site. */
.site-footer {
    background: var(--bg-footer);
    color: var(--text-secondary);
    margin-top: 2rem;
    padding: 2rem 1.5rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.footer-text {
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.footer-heading {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 .6rem;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .85rem;
}

.footer-list a {
    color: var(--emerald);
    text-decoration: none;
}

.footer-list a:hover {
    text-decoration: underline;
}

.footer-label {
    color: var(--text-secondary);
    margin-right: .3rem;
}

.footer-placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.footer-bottom {
    max-width: 1100px;
    margin: 1.5rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: .78rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 700px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Đợt 8: Cửa hàng cơ/phụ kiện (tab "Mua"). */
.shop-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Đợt 15: đồng bộ với .filter-chip (cùng trang Cơ đang dùng cả 2 loại chip) - chip
   được chọn chỉ sáng nền, KHÔNG tô emerald đặc. */
.shop-chip {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: none;
    border-radius: 999px;
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.shop-chip:hover {
    color: var(--text-primary);
}

.shop-chip-active {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

.shop-brand-select-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.shop-brand-select-row .input {
    width: auto;
    min-width: 160px;
}

.shop-tags {
    display: flex;
    gap: .35rem;
    margin: .35rem 0;
    flex-wrap: wrap;
}

.shop-tag {
    background: var(--bg-surface-raised);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 600;
}

.shop-tag-brand {
    background: var(--emerald-soft);
    color: var(--emerald);
}

/* ===== Đợt 9: bảng đấu loại trực tiếp (chỉ xem) ===== */

.bracket-wrap {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: .5rem 0 1rem;
}

.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    min-width: 220px;
}

.bracket-round-title {
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: .25rem;
}

.bracket-match {
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: .5rem .6rem;
}

.bracket-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .2rem 0;
    font-size: .9rem;
}

.bracket-winner {
    font-weight: 700;
    color: var(--emerald);
}

/* Đợt 10: QR chuyển khoản ngân hàng + Momo trong modal thanh toán */
.qr-pay-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: .75rem;
}

.qr-pay-col {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: .75rem;
}

.qr-pay-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .5rem;
}

.qr-pay-image {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 6px;
    /* Luôn giữ nền TRẮNG cho ảnh QR (không đổi theo theme) - mã QR cần vùng nền trắng
       xung quanh (quiet zone) để máy quét đọc chính xác, đổi sang nền tối sẽ làm hỏng
       khả năng quét. */
    background: #fff;
    padding: .25rem;
}

.qr-pay-confirm {
    background: var(--gold-soft);
    border: 1px solid rgba(255, 185, 95, .35);
    border-radius: var(--radius);
    padding: .6rem .75rem;
    margin-bottom: .75rem;
}

.qr-pay-confirm .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .95rem;
}

.qr-pay-confirm .checkbox-row input[type="checkbox"] {
    margin-top: .2rem;
    width: 1.1rem;
    height: 1.1rem;
}

/* In hóa đơn (nút "In hóa đơn" trong Tables.razor) - khi in, CHỈ hiện khung hóa đơn,
   luôn nền trắng/chữ đen bất kể theme tối đang dùng trên màn hình, tiết kiệm mực và dễ
   đọc trên giấy. (Trước Đợt 11, class .invoice-print-area được gắn vào markup nhưng
   chưa có CSS tương ứng nên khi in sẽ in nguyên cả trang nền tối.) */
@media print {
    body * {
        visibility: hidden;
    }

    .invoice-print-area, .invoice-print-area * {
        visibility: visible;
    }

    .invoice-print-area {
        position: fixed;
        inset: 0;
        margin: 0;
        max-width: 100%;
        max-height: none;
        background: #fff;
        color: #111;
        box-shadow: none;
        border: none;
    }

    .invoice-print-area .table-meta {
        color: #333;
    }

    .invoice-print-area .form-actions {
        display: none;
    }
}

/* ===== Đợt 16: card bàn theo ĐÚNG mẫu Stitch "tinh gọn" (qu_n_l_b_n_ch_i_tinh_g_n_mobile):
   article.bg-surface-container-low.rounded-xl.p-space-md.gap-3.5 ===== */
.table-grid-cards .table-card {
    padding: 1rem;
    gap: .875rem;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.tcard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.tcard-title-wrap {
    min-width: 0;
}

.tcard-title-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .125rem;
}

.tcard-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcard-sub {
    margin: 0;
    font-size: .75rem;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

.tcard-sub-strong {
    color: var(--text-primary);
}

.dot-sep {
    margin: 0 .3rem;
}

.tag-vip {
    padding: .125rem .5rem;
    border-radius: .25rem;
    background: rgba(255, 185, 95, .15);
    color: var(--gold);
    font-size: .69rem;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Pill trạng thái bên phải tiêu đề: "Bàn trống" (surface-bright), "Đã đặt" (gold). */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    padding: .25rem .625rem;
    border-radius: 999px;
    font-size: .69rem;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    background: var(--bg-surface-bright);
    color: var(--text-secondary);
    white-space: nowrap;
}

.status-pill-reserved {
    background: rgba(238, 152, 0, .2);
    color: var(--gold);
    letter-spacing: 0;
}

.status-pill-maintenance {
    background: var(--maintenance-soft);
    color: var(--maintenance);
}

/* Pill "đang chơi" có đồng hồ (Stitch: bg-primary/10, chấm 8px tĩnh). */
.table-grid-cards .live-pill {
    background: var(--emerald-soft);
    padding: .25rem .625rem;
    font-size: .69rem;
    line-height: 14px;
    gap: .375rem;
}

.table-grid-cards .live-pill-dot {
    animation: none;
}

/* Dải "Giờ · Tạm tính" (bg-surface-container rounded-lg px-4 py-2). */
.table-timer {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--bg-surface-mid);
    border-radius: var(--radius);
    padding: .5rem 1rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

.table-timer-right {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
}

.table-timer-label {
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.table-timer-value {
    font-size: 1rem;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--emerald);
}

/* Nút trong card: cao 40px, bo 8px, nút phụ nền surface-container-high. */
.table-grid-cards .table-actions-grid {
    gap: .625rem;
    margin-top: 0;
}

.table-grid-cards .btn {
    margin-top: 0;
    min-height: 40px;
    justify-content: center;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .02em;
}

.table-grid-cards .btn-primary,
.table-grid-cards .btn-gold {
    font-weight: 600;
}

.table-grid-cards .btn-ghost {
    background: var(--bg-surface-raised);
    border: none;
    color: var(--text-primary);
}

.table-grid-cards .btn-ghost:hover {
    background: var(--bg-surface-bright);
}

.table-grid-cards .table-actions-grid-1 .btn {
    min-height: 44px;
}

.table-grid-cards .table-meta {
    margin: 0;
}

/* Desktop: lưới card 2-3 cột như Stitch desktop (không còn 1 cột hẹp). */
@media (min-width: 1024px) {
    .table-grid-cards {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
}

/* ===== Đợt 16: card cơ theo ĐÚNG mẫu Stitch "Chợ thuê cơ tinh gọn"
   (div.bg-surface-container.rounded-xl.p-space-md > ảnh h-36 inset + nhãn nổi) ===== */
.cue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.cue-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface-mid);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: background-color .15s ease;
    cursor: pointer;
}

.cue-card:hover {
    background: rgba(36, 42, 56, .8);
}

.cue-media {
    position: relative;
    width: 100%;
    height: 144px;
    background: var(--bg-footer);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.cue-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cue-media-tag {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .125rem .5rem;
    border-radius: 6px;
    background: rgba(8, 14, 27, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
    font-size: .69rem;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cue-media-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
}

.cue-media-tag-dot.is-gold {
    background: var(--gold);
}

.cue-media-tag-dot.is-off {
    background: var(--text-muted);
}

.cue-media-spec {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .125rem .5rem;
    border-radius: 6px;
    background: rgba(8, 14, 27, .8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-secondary);
    font-size: .69rem;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .06em;
}

.cue-body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: .5rem;
}

.cue-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.cue-eyebrow {
    font-size: .69rem;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.cue-eyebrow-right {
    font-size: .69rem;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
}

.cue-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cue-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
    padding-top: .25rem;
}

.cue-price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    min-width: 0;
}

.cue-price-value {
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #10B981;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cue-price-value.is-sale {
    color: var(--text-primary);
}

.cue-price-unit {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

/* Nút trong card cơ: h-9, bo 8px. "Thuê ngay" = primary-container (#10B981 / chữ
   #00422B), "Đặt mua" = surface-bright. */
.cue-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 36px;
    padding: 0 1rem;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    white-space: nowrap;
}

.cue-btn-rent {
    background: #10B981;
    color: #00422B;
}

.cue-btn-rent:hover {
    opacity: .95;
}

.cue-btn-buy {
    background: var(--bg-surface-bright);
    color: var(--text-primary);
}

.cue-btn-buy:hover {
    background: #2F3543;
}

.cue-btn:disabled {
    background: var(--bg-surface-raised);
    color: var(--text-muted);
    cursor: not-allowed;
}

.cue-wallet-btn {
    margin-top: .5rem;
    width: 100%;
    justify-content: center;
}

/* Link dạng nút không gạch chân. */
a.btn,
a.btn:hover {
    text-decoration: none;
}

.section-gap {
    margin-top: 2rem;
}

/* ===== Đợt 16: ô tìm kiếm header + pill "Club online" (Stitch desktop tinh gọn) ===== */
.topbar-search {
    display: none;
    position: relative;
    width: 24rem;
    max-width: 40vw;
    margin: 0;
}

.topbar-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.topbar-search-input {
    width: 100%;
    padding: .25rem 1rem .25rem 2.6rem;
    height: 36px;
    border: none;
    border-radius: var(--radius);
    background: var(--bg-footer);
    color: var(--text-primary);
    font-family: inherit;
    font-size: .875rem;
    outline: none;
}

.topbar-search-input::placeholder {
    color: var(--text-muted);
}

.club-pill {
    display: none;
    align-items: center;
    gap: .25rem;
    padding: .25rem 1rem;
    border-radius: 999px;
    background: var(--bg-surface-raised);
    color: var(--emerald);
    font-size: .69rem;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.club-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emerald);
}

@media (min-width: 1024px) {
    .topbar-search {
        display: block;
    }

    .club-pill {
        display: inline-flex;
    }

    .topbar-actions {
        gap: 1.5rem;
    }
}

/* Stitch mobile: tên màn hình nằm trên header ("CUEMASTER / Bàn Chơi"), thân trang không
   lặp lại tiêu đề lớn. */
@media (max-width: 1023.98px) {
    .app-content h1:not(.login-title) {
        display: none;
    }

    .app-content {
        padding-top: 1rem;
    }
}

/* ===== Trang tìm kiếm ===== */
.page-head {
    margin-bottom: 1rem;
}

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .69rem;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--emerald);
    margin-bottom: .25rem;
}

.page-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emerald);
}

.page-search {
    position: relative;
    margin: 0 0 1rem;
}

.page-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.page-search-input {
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.75rem;
    border: none;
    border-radius: var(--radius);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: .875rem;
    outline: none;
}

.page-search-input:focus {
    background: var(--bg-surface-mid);
}

.page-search-input::placeholder {
    color: var(--text-muted);
}

.search-section {
    margin-bottom: 1.5rem;
}

.search-row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .875rem 1rem;
    margin-bottom: .5rem;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    text-decoration: none;
}

.search-row:hover {
    background: var(--bg-surface-mid);
}

.search-row-main {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
}

.search-row-sub {
    color: var(--text-secondary);
    font-size: .75rem;
    letter-spacing: .04em;
}

.search-row-tag {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: .25rem .625rem;
    border-radius: 999px;
    background: var(--bg-surface-bright);
    color: var(--text-secondary);
    font-size: .69rem;
    font-weight: 600;
}

/* ===== Trang Cơ: tab bo 8px + banner (Stitch "Chợ thuê cơ tinh gọn") ===== */
.cue-tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding: .25rem 0;
    margin-bottom: 1rem;
}

.cue-tab {
    flex-shrink: 0;
    padding: .375rem 1rem;
    border: none;
    border-radius: var(--radius);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: .75rem;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
    cursor: pointer;
}

.cue-tab:hover {
    color: var(--text-primary);
}

.cue-tab-active {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.promo-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--bg-surface-mid);
}

.promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--gold);
    font-size: .69rem;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.promo-text {
    margin: .25rem 0 0;
    font-size: .875rem;
    line-height: 22px;
    color: var(--text-primary);
}

.promo-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--bg-surface-raised);
    color: var(--emerald);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ===== Đợt 16: nút nổi "+ Mở bàn" (Stitch: rounded-full h-12 bg-primary, trên bottom-nav) ===== */
.fab-open {
    position: fixed;
    right: 1.25rem;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 1450;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 48px;
    padding: 0 1.5rem;
    border-radius: 999px;
    background: var(--emerald);
    color: var(--text-on-accent);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .35), 0 8px 10px -6px rgba(0, 0, 0, .3);
}

.fab-open:hover {
    background: var(--emerald-strong);
}

@media (min-width: 1024px) {
    .fab-open {
        bottom: 2rem;
        right: 2.5rem;
    }
}

/* Khoảng cách giữa các ô trong form (Hồ sơ, Đặt bàn, Nạp tiền...). */
.form-field {
    margin-bottom: .9rem;
}

/* ===== Đợt 16: trang Ví theo Stitch "Tài khoản & Ví tinh gọn" ===== */
.acc-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.acc-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-raised);
    border: 2px solid var(--emerald);
    color: var(--emerald);
    font-size: 1.5rem;
    font-weight: 600;
}

.acc-head-text {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.acc-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.acc-name {
    font-size: 1.25rem;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.tag-tier {
    padding: .125rem .5rem;
    border-radius: var(--radius);
    background: var(--gold);
    color: var(--text-on-gold);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.acc-sub {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--emerald);
}

.wallet-card {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--bg-surface-mid);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
    margin-bottom: 1.25rem;
    max-width: 560px;
}

.wallet-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}

.wallet-label {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--text-secondary);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wallet-label .material-symbols-outlined {
    color: var(--emerald);
}

.wallet-chip {
    padding: .25rem .5rem;
    border-radius: 6px;
    background: var(--emerald-soft);
    color: var(--emerald);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.wallet-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.wallet-col-label {
    display: block;
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--text-secondary);
    margin-bottom: .25rem;
}

.wallet-amount {
    font-size: 1.75rem;
    line-height: 34px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wallet-amount-gold {
    color: var(--gold);
}

.wallet-cur {
    font-size: .875rem;
    margin-left: .125rem;
    color: inherit;
    opacity: .85;
}

.wallet-col-sub {
    display: block;
    margin-top: .25rem;
    font-size: .69rem;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.wallet-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: 1.25rem;
}

.wallet-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 60px;
    border-radius: var(--radius-lg);
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
}

.wallet-action:hover {
    background: var(--bg-surface-bright);
}

.wallet-action-primary,
.wallet-action-primary:hover {
    background: var(--emerald);
    color: var(--text-on-accent);
}

.tier-card {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    margin-bottom: 1.5rem;
    max-width: 560px;
}

.tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

.tier-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 500;
}

.tier-need {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--gold);
}

.tier-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-surface-bright);
    overflow: hidden;
}

.tier-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--emerald);
}

/* Màn hẹp: chỉ giữ "Đăng nhập" để tên màn hình trên header không bị cắt (Đăng ký vẫn có ở trang Đăng nhập). */
@media (max-width: 420px) {
    .topbar-register {
        display: none;
    }
}

/* ===== Đợt 16: trang Ví 2 cột trên desktop (trái: hồ sơ + ví + hạng, phải: nạp tiền) ===== */
.wallet-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.wallet-layout .wallet-card,
.wallet-layout .tier-card,
.wallet-layout .wallet-topup {
    max-width: none;
}

.wallet-topup {
    margin-bottom: 0;
    background: var(--bg-surface-mid);
    border: none;
}

@media (min-width: 1024px) {
    .wallet-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .wallet-col-side {
        position: sticky;
        top: 88px;
    }
}

/* Đợt 16: ô ngày/giờ + danh sách chọn theo giao diện tối (icon lịch hiện rõ, không phải rê chuột mới thấy). */
:root {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    filter: invert(80%) sepia(30%) saturate(500%) hue-rotate(100deg);
}

select.input option {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

/* ===== Đợt 16: thông báo kết quả thao tác (đặt bàn, thuê cơ, duyệt nạp...) hiện nổi ở đầu
   màn hình rồi tự mờ đi - trước đây nằm tận cuối trang nên người dùng không thấy. ===== */
.toast-msg {
    position: fixed;
    left: 50%;
    top: 76px;
    transform: translateX(-50%);
    z-index: 2100;
    max-width: min(92vw, 520px);
    margin: 0;
    padding: .75rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--bg-surface-raised);
    border: 1px solid rgba(78, 222, 163, .35);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .7);
    color: var(--text-primary);
    font-size: .9rem;
    text-align: center;
    pointer-events: none;
    animation: bms-toast 6s ease forwards;
}

@keyframes bms-toast {
    0% { opacity: 0; transform: translate(-50%, -8px); }
    6% { opacity: 1; transform: translate(-50%, 0); }
    85% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@media (min-width: 1024px) {
    .toast-msg {
        left: calc(50% + 144px);
    }
}

/* Nút Gửi trong khung chat thẳng hàng với ô nhập. */
.chat-input-row .btn {
    margin-top: 0;
}

/* ===== Đợt 16: form Thanh toán / Gọi món dạng hóa đơn gọn ===== */
.modal-card:has(.bill-summary) {
    max-width: 520px;
}

.modal-card .form-actions .btn,
.modal-card .section .btn {
    margin-top: 0;
}

.modal-card .section {
    margin: 1rem 0 0;
}

.bill-summary {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1rem;
    border-radius: var(--radius);
    background: var(--bg-surface-mid);
}

.bill-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .875rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.bill-row span:last-child {
    color: var(--text-primary);
    font-weight: 500;
}

.bill-total {
    margin-top: .35rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 1rem;
}

.bill-total span:last-child {
    color: var(--emerald);
    font-size: 1.25rem;
    font-weight: 600;
}

.discount-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
}

.discount-row .input,
.discount-row .input-sm {
    width: 100% !important;
    min-width: 0;
}

.discount-row .btn {
    white-space: nowrap;
}

.pay-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.pay-methods .btn {
    justify-content: center;
    min-height: 40px;
}

@media (max-width: 420px) {
    .discount-row {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .discount-row .btn {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

/* ===== Đợt 16: thực đơn Gọi món - tìm món + chip danh mục + danh sách gọn ===== */
.modal-card:has(.order-list) {
    max-width: 560px;
}

.order-search {
    margin-bottom: .6rem;
}

.order-cats {
    display: flex;
    gap: .375rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    margin-bottom: .6rem;
}

.order-cat {
    flex-shrink: 0;
    padding: .3rem .75rem;
    border: none;
    border-radius: 999px;
    background: var(--bg-surface-mid);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
}

.order-cat.is-active {
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

.order-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: .25rem;
}

.order-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px auto;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: var(--radius);
    background: var(--bg-surface-mid);
}

.order-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.order-item-name {
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-item-price {
    font-size: .72rem;
    color: var(--text-secondary);
}

.order-qty {
    padding: .35rem .4rem;
    text-align: center;
}

.order-item .btn {
    margin-top: 0;
}

/* Đợt 16: nút chat nổi + khung chat luôn nằm TRÊN thanh điều hướng dưới (quy tắc gốc .chat-fab
   khai báo sau khối mobile nên trước đây ghi đè, làm nút chat che mục "Ví"). */
@media (max-width: 1023.98px) {
    .chat-fab {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    .chat-panel {
        bottom: calc(148px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 230px);
    }
}