/**
 * mobile-fullscreen.css
 * Giải pháp fill màn hình cho iOS Safari / Android Chrome
 *
 * Vấn đề: Trên iOS Safari, khi thanh địa chỉ thu gọn → khoảng trắng xuất hiện,
 * phần dưới bị che bởi thanh home bar.
 *
 * Giải pháp: Dùng position: fixed + height: 100dvh trên body,
 * kết hợp viewport-fit=cover và env(safe-area-inset-*).
 *
 * Trang dashboard (React): dùng #app fixed (đã có trong react-migration.css).
 * Trang khác: dùng body fixed.
 */

/* ============================================================
   1. CƠ BẢN — Reset cho tất cả trang
   ============================================================ */

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    /* 100dvh = dynamic viewport height, tự động tính đến thanh địa chỉ iOS */
    height: 100%;
    min-height: 100dvh;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   2. iOS SAFARI FALLBACK
   ============================================================ */

/* iOS Safari < 15.4 không hỗ trợ 100dvh đầy đủ */
@supports (-webkit-touch-callout: none) {
    body {
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
}

/* ============================================================
   3. TRANG KHÔNG DÙNG FLEX BODY — login, admin, statistics
   ============================================================ */
/* Áp dụng position: fixed trên mobile, vì các trang này không dùng flex body */

@media (pointer: coarse) {
    body {
        position: fixed;
        width: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/* ============================================================
   4. iOS SAFE AREA — Không gian cho notch & home bar
   ============================================================ */

/* Class tiện ích để thêm padding cho phần tử cần tránh bị che */
.safe-area-top    { padding-top:    env(safe-area-inset-top); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-area-left   { padding-left:   env(safe-area-inset-left); }
.safe-area-right  { padding-right:  env(safe-area-inset-right); }

/* Container fill toàn màn hình (cho trang con hoặc modal) */
.fullscreen-container {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}

@supports (-webkit-touch-callout: none) {
    .fullscreen-container {
        height: -webkit-fill-available;
    }
}

/* ============================================================
   5. NGĂN PULL-TO-REFESH — iOS overscroll
   ============================================================ */

#app,
.fullscreen-container,
.chat-area,
.sidebar {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   6. ANDROID / iOS SAFE AREA BOTTOM
   ============================================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        /* Android 7.1+ navigation bar, iPhone home indicator */
        padding-bottom: env(safe-area-inset-bottom);
    }

    .message-input,
    .mobile-bottom-bar,
    .mobile-nav {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   7. TOUCH TARGET — Kích thước tối thiểu cho nút bấm
   ============================================================ */

/* WCAG 2.5.5: Touch target tối thiểu 44x44px */
@media (pointer: coarse) {
    button,
    .btn,
    .btn-primary,
    input[type="submit"],
    a.btn {
        min-height: 44px;
        min-width: 44px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    textarea {
        min-height: 48px;
        font-size: 16px !important;
        /* 16px ngăn iOS Safari auto-zoom vào input */
    }
}

/* ============================================================
   8. SCROLL CONTAINER — Scroll trong container cụ thể
   ============================================================ */

.scroll-container {
    height: 100%;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@supports (-webkit-touch-callout: none) {
    .scroll-container {
        height: -webkit-fill-available;
    }
}

.scroll-container::-webkit-scrollbar { display: none; }
.scroll-container { scrollbar-width: none; -ms-overflow-style: none; }