/* ================================================================
   ATS-HOTEL — MOBILE LAYER (mobile.css)
   Load SAU mọi page CSS (base.html + các trang standalone:
   login / setup / activate / no-shift / guest_order / guest_welcome).

   Trách nhiệm:
   A. Hygiene toàn cục (tap highlight, img không tràn, text-size-adjust)
   B. Chống zoom khi nhập liệu (iOS/Android zoom khi font < 16px)
   C. Safe-area (notch / home indicator) — cần viewport-fit=cover
   D. Topbar + drawer menu dùng được trên 360–430px
   E. Modal → bottom-sheet / full-screen trên mobile
   F. Touch target ≥ 40px
   G. Tabs / bảng / lưới cuộn & stack đúng
   H. Tối ưu render mobile (bỏ backdrop-filter nặng)
   I. dvh (đúng chiều cao khi URL bar di động thay đổi)
   J. prefers-reduced-motion
   ================================================================ */

/* ---------- A. Hygiene toàn cục ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a,
button,
[role="button"],
label,
summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

img {
    max-width: 100%;
    height: auto;
}

/* Cuộn bên trong overlay/modal không kéo trang nền (rubber-band) */
.modal-card,
.modal-content,
.modal-body,
.chat-modal-body,
.chat-modal-dialog,
.sidebar-menu,
.table-container,
.folio-modal-card,
.wk-card {
    overscroll-behavior: contain;
}

/* ---------- B. Chống zoom khi nhập liệu ----------
   iOS/Android tự zoom trang khi focus vào ô có font-size < 16px.
   Rule này áp cho MỌI trang (kể cả trang không nạp base.css).
   Các ô tiền lớn loại trừ khỏi rule để giữ cỡ hiển thị của nó. */
@media (max-width: 768px) {
    input:not(.co-cash-input):not(.discount-input):not(.cash-input),
    textarea:not(.co-cash-input):not(.discount-input):not(.cash-input) {
        font-size: 16px !important;
        touch-action: manipulation;
    }

    select {
        font-size: 16px !important;
        touch-action: manipulation;
    }
}

/* ---------- C. Safe area (notch / home indicator) ---------- */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
}

.topbar {
    height: calc(56px + var(--sat));
    padding-top: var(--sat);
}

.sidebar {
    top: calc(56px + var(--sat));
    height: calc(100vh - 56px - var(--sat));
    height: calc(100dvh - 56px - var(--sat));
}

.content {
    padding-top: calc(76px + var(--sat));
}

body.pos-only .content {
    padding-top: calc(66px + var(--sat));
}

.rs-stack,
.ats-toast-container {
    padding-top: var(--sat);
}

@media (max-width: 768px) {
    .content {
        padding-top: calc(68px + var(--sat));
    }
}

/* ---------- D. Topbar + drawer trên mobile ---------- */
@media (max-width: 768px) {
    .topbar {
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .topbar-brand {
        min-width: 0;
    }

    /* Staff nav: cuộn ngang thay vì tràn khỏi topbar */
    .staff-nav {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .staff-nav::-webkit-scrollbar {
        display: none;
    }

    .staff-nav-link {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Pill tin nhắn khách: co lại + ellipsis thay vì đẩy vỡ topbar */
    .topbar-guest-msg {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }

    .topbar-guest-msg .topbar-msg-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-right {
        flex-shrink: 0;
    }

    /* Lớp phủ tối khi mở drawer menu (đóng bằng click ngoài — base.js) */
    body.sidebar-open::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: calc(56px + var(--sat));
        bottom: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 990;
        animation: mobileOverlayIn 0.2s ease;
    }
}

@media (max-width: 480px) {
    /* Rất nhỏ: bỏ bớt chi tiết phụ của topbar để không tràn */
    .topbar-brand .brand-text {
        display: none;
    }

    .topbar-quick-reception {
        display: none;
    }
}

@keyframes mobileOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- E0. dvh cho modal (trước section E để section E ghi đè khi ≤640) ---------- */
@supports (height: 100dvh) {
    .app .modal-card,
    .app .modal-content,
    .chat-modal-dialog {
        max-height: 90dvh;
    }
}

/* ---------- E. Modal → bottom-sheet / full-screen trên mobile ---------- */
@media (max-width: 640px) {
    .app .modal,
    .app .modal-overlay,
    .shift-close-modal-overlay {
        padding: 0;
        align-items: flex-end;
        justify-content: center;
        background: rgba(15, 23, 42, 0.55);
    }

    .app .modal-card,
    .app .modal-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: 92dvh;
        border-radius: 18px 18px 0 0;
        padding-bottom: calc(26px + var(--sab));
        animation: mobileSheetUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .app .modal-header {
        border-radius: 18px 18px 0 0;
    }

    /* Modal chốt ca & đăng xuất (base.html) */
    .shift-close-modal-card {
        width: 100%;
        max-width: 100%;
        max-height: calc(92dvh - var(--sat));
        border-radius: 18px 18px 0 0;
        overflow-y: auto;
        padding-bottom: calc(16px + var(--sab));
        animation: mobileSheetUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Chat khách — full-screen trên điện thoại */
    .chat-modal-overlay {
        padding: 0;
    }

    .chat-modal-dialog {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        padding-bottom: var(--sab);
    }

    /* Popup Room-Service (notification trỏ từ trên xuống — giữ thiết kế gốc) */
    .room-service-popup {
        top: calc(66px + var(--sat));
    }

    /* Modal trả phòng Folio */
    #hotelFolioModal {
        padding: 0;
        align-items: flex-end;
        justify-content: center;
    }

    .folio-modal-card {
        width: 100%;
        max-width: 100%;
        max-height: calc(92dvh - var(--sat));
        border-radius: 18px 18px 0 0;
        padding-bottom: calc(12px + var(--sab));
        animation: mobileSheetUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes mobileSheetUp {
    from {
        opacity: 0.6;
        transform: translateY(6%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- F. Touch target ≥ 40px trên mobile ---------- */
@media (max-width: 768px) {

    /* Nút chữ */
    .btn,
    .btn-sm,
    .btn-xs,
    .app .btn,
    .app .btn-sm,
    .folio-btn,
    .book-btn,
    .view-btn,
    .area-tab,
    .btn-serve,
    .btn-serve-all,
    .quick-btn,
    .btn-nb,
    .stay-filter-chip,
    .btn-stay-detail,
    .promo-ctrl-btn,
    .mockup-mode-btn,
    .promo-subtab-btn,
    .btn-detail,
    .cat-btn,
    .btn-req-pill,
    .btn-copy,
    .btn-icon-copy,
    .wk-scan-btn,
    .btn-tl-nav,
    .folio-pay-btn,
    .btn-hk,
    .lang-toggle button,
    .btn-subtle,
    .page-btn,
    .topbar-msg-btn-reply,
    .warn-sm {
        min-height: 40px;
    }

    /* Nút icon vuông */
    .modal-close,
    .row-menu-toggle,
    .search-clear-btn,
    .btn-qty,
    .qty-btn,
    .topbar-msg-btn-dismiss,
    .rs-popup-close,
    .rs-toast-close,
    .wifi-modal-close,
    .chat-modal-close-btn,
    .shift-close-modal-close,
    #sidebar-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Toggle switch: nới vùng chạm, giữ nguyên kiểu dáng */
    .toggle-switch {
        width: 44px;
        height: 26px;
    }

    .toggle-slider::before {
        height: 20px;
        width: 20px;
    }

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(18px);
    }
}

/* ---------- G. Tabs / bảng / lưới ---------- */
@media (max-width: 768px) {
    .app .tabs {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .app .tabs::-webkit-scrollbar {
        display: none;
    }

    .app .tabs .tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Bảng: luôn cuộn ngang được */
    .table-container,
    .app .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- H. Render mobile: bỏ hiệu ứng backdrop-filter tốn kém ---------- */
@media (max-width: 768px) {
    .app .modal,
    .app .modal-overlay,
    .chat-modal-overlay,
    .ats-toast,
    .shift-close-modal-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .content {
        transition: none;
    }
}

/* ---------- J. Trang cực nhỏ (≤ 400px): gọn thêm ---------- */
@media (max-width: 400px) {
    .content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .app .card {
        padding: 14px;
        border-radius: 12px;
        margin-bottom: 14px;
    }

    .app .modal-card {
        padding: 18px;
    }

    .app .modal-header {
        padding: 14px 16px;
    }

    /* Stat cards: 1 cột cho dễ đọc */
    .app .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 401px) and (max-width: 768px) {
    /* Stat cards: 2 cột cho gọn (ghi specificity của rule .app .stats-grid trong base.css) */
    .app .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- K. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Lock scroll thân trang khi modal đang mở (reception.js gọi) ===== */
body.modal-open {
    overflow: hidden;
}
.app .modal-actions {
    flex-wrap: wrap;
}