/* =============================================================================
   KB_MOBILE_SAFE_V1 · Mobile-safe global foundation
   =============================================================================
   Mục đích:
   - Chuẩn hóa breakpoint để code mới không tự bịa giá trị
   - Cung cấp utility classes cho grid responsive (opt-in, không phá code cũ)
   - Safety net chống tràn ngang trên mobile (catastrophic overflow protection)
   
   Triết lý:
   - Đây là LAYER MỚI ĐÈ LÊN, không refactor 66 files cũ ngay
   - Code cũ vẫn hoạt động bình thường (CSS không xung đột)
   - Component MỚI dùng utility class .ms-grid thay vì viết @media riêng
   - Refactor incremental: từng file 1, theo thứ tự ưu tiên
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design tokens — breakpoint variables
   ----------------------------------------------------------------------------- */
:root {
    /* Breakpoints — extracted từ codebase (top 5 phổ biến nhất) */
    --ms-bp-xs:      480px;   /* Phone nhỏ (14 lần) */
    --ms-bp-sm:      640px;   /* Phone lớn (31 lần) */
    --ms-bp-mobile:  767px;   /* Mobile/tablet boundary (41 lần) */
    --ms-bp-desktop: 1024px;  /* Desktop (35 lần) */

    /* Grid sizing — extracted từ pattern thực tế */
    --ms-grid-min-tight:     120px;  /* Component nhỏ (icon + 1 dòng text) */
    --ms-grid-min-default:   180px;  /* Component thường */
    --ms-grid-min-wide:      220px;  /* Card lớn */
    --ms-grid-gap:           8px;
    --ms-grid-gap-tight:     6px;
}

/* -----------------------------------------------------------------------------
   2. Safety net — chống tràn ngang catastrophic
   ----------------------------------------------------------------------------- */
/* Áp dụng cho mọi trang. Tránh user phải scroll ngang khi 1 element lỗi width.
   KHÔNG dùng cho element có sticky position (đã verify: codebase không có sticky). */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* -----------------------------------------------------------------------------
   3. Utility classes — opt-in, dùng cho component MỚI
   ----------------------------------------------------------------------------- */

/* .ms-grid — Grid auto-fit, default sizing.
   Dùng khi container có nhiều item cùng size (card, button group, etc).
   Tự wrap thành nhiều cột tùy viewport, không cần @media. */
.ms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ms-grid-min-default), 1fr));
    gap: var(--ms-grid-gap);
}

/* .ms-grid-tight — Grid auto-fit cho component nhỏ.
   Dùng cho: contact buttons, small badges, icon grid, etc.
   Min 120px → mobile có thể fit 2-3 cột. */
.ms-grid-tight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ms-grid-min-tight), 1fr));
    gap: var(--ms-grid-gap-tight);
}

/* .ms-grid-wide — Grid auto-fit cho card lớn.
   Dùng cho: post cards, profile cards. */
.ms-grid-wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ms-grid-min-wide), 1fr));
    gap: var(--ms-grid-gap);
}

/* .ms-no-x-overflow — Container an toàn không tràn ngang.
   Dùng khi nội dung có thể vượt width (long URL, code block, etc). */
.ms-no-x-overflow {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* .ms-text-truncate — Text 1 dòng, overflow ellipsis.
   Tránh long username/email phá layout. */
.ms-text-truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   4. Mobile spacing helpers (opt-in)
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* .ms-mobile-stack — Force flex item stack on mobile */
    .ms-mobile-stack {
        flex-direction: column !important;
    }

    /* .ms-mobile-full — Full width on mobile */
    .ms-mobile-full {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =============================================================================
   GHI CHÚ CHO DEV TƯƠNG LAI
   =============================================================================
   ✅ DÙNG: <div class="ms-grid">...</div> cho responsive grid mới
   ✅ DÙNG: var(--ms-bp-mobile) trong @media của component mới
   
   ❌ TRÁNH: viết grid-template-columns: repeat(N, 1fr) cứng (vỡ khi thêm item)
   ❌ TRÁNH: @media (max-width: 555px) — dùng var(--ms-bp-sm) hoặc bp-mobile
   
   Refactor file cũ: replace @media + grid cứng bằng class .ms-grid → giảm
   số lần phải fix layout khi thêm component mới.
   ============================================================================= */

/* =============================================================================
   7. INLINE_GRID_RESPONSIVE — ép inline grid về 1 cột trên mobile
   =============================================================================
   Cover các form dùng:
     <div style="display:grid;grid-template-columns:1fr 200px">
     <div style="display:grid;grid-template-columns:1fr 1fr 200px">
   Bất kỳ inline grid nào → 1 cột trên mobile.
   ============================================================================= */
@media (max-width: 767px) {
    [style*="display:grid"][style*="grid-template-columns"],
    [style*="display: grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================================
   8. INLINE_GRID_TABLET — phone lớn (481-767px) cho phép 2 cột
   =============================================================================
   Cho phép grid 2-3 cột trở thành 2 cột ở phone lớn (đỡ chật hơn 1 cột).
   Áp dụng cho grid 2 cột (1fr 1fr, repeat(2,1fr)).
   ============================================================================= */
@media (min-width: 481px) and (max-width: 767px) {
    [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
    [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
    [style*="repeat(2,1fr)"],
    [style*="repeat(2, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================================================
   9. INLINE_FLEX_WRAP — ép inline flex wrap trên mobile
   =============================================================================
   Cover các container dùng:
     <div style="display:flex;align-items:center;gap:8px">
       <span>...</span>
       <input style="flex:1">
       <button>...</button>
     </div>
   Khi tổng minimum content > viewport → tràn. Solution: cho phép wrap.
   ============================================================================= */
@media (max-width: 767px) {
    /* Inline flex container — cho phép wrap khi không đủ chỗ */
    [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]),
    [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) {
        flex-wrap: wrap !important;
    }
    
    /* Input/textarea trong inline flex — min-width:0 để shrink được */
    [style*="display:flex"] > input,
    [style*="display:flex"] > textarea,
    [style*="display:flex"] > select,
    [style*="display: flex"] > input,
    [style*="display: flex"] > textarea,
    [style*="display: flex"] > select {
        min-width: 0;
    }
    
    /* Input flex:1 trong inline flex → giảm xuống min flex-basis hợp lý */
    [style*="display:flex"] > input[style*="flex:1"],
    [style*="display:flex"] > input[style*="flex: 1"],
    [style*="display: flex"] > input[style*="flex:1"],
    [style*="display: flex"] > input[style*="flex: 1"] {
        flex: 1 1 140px !important;
    }
}

/* =============================================================================
   10. UNIVERSAL_MAX_WIDTH — root fix cho overflow ngang trên mobile
   =============================================================================
   Mọi element không vượt parent width → cover MỌI case inline max-width:[N]px
   vượt viewport (vd <select style="max-width:500px"> trong card 350px).
   
   Trade-off: element cố ý có width LỚN (modal 800px) sẽ shrink. Đây là
   behavior mong muốn 99% case trên mobile. Nếu có element ngoại lệ thật
   sự cần overflow (vd code block với scroll ngang), nó nên có .ms-no-x-overflow
   class wrapper riêng.
   ============================================================================= */
@media (max-width: 767px) {
    body * {
        max-width: 100% !important;
    }
    
    /* Exception: image, video, table giữ nguyên — đã có overflow handling riêng */
    body img,
    body video,
    body iframe,
    body table {
        max-width: 100% !important;
        height: auto;
    }
}

/* =============================================================================
   11. GRID_ITEM_MIN_WIDTH — direct children của grid có min-width:0
   =============================================================================
   CSS Grid quirk: grid items default min-width:auto = min-content. Khi nội
   dung có element không wrap được (email dài, badge), grid item rộng hơn
   track → tràn viewport.
   
   Solution: ép min-width:0 cho mọi direct child của grid container trên mobile.
   ============================================================================= */
@media (max-width: 767px) {
    [style*="display:grid"] > *,
    [style*="display: grid"] > *,
    .a-form-grid > *,
    .user-2col > *,
    .kbep-grid > * {
        min-width: 0;
    }
}

/* =============================================================================
   12. TABLE_SCROLL_MOBILE — table tự scroll ngang trên mobile
   =============================================================================
   Pattern: <table style="width:100%"> trong nhiều view admin (system-health,
   mail/index, boost-queue/index). Trên mobile <767px, cell có content dài
   (timestamp, status, version string) làm bảng tràn dù mục 10 đã max-width 100%.
   
   Solution: biến table thành block, có overflow-x:auto → bảng cuộn ngang riêng,
   không tràn body. white-space:nowrap giữ format đẹp khi scroll.
   ============================================================================= */
@media (max-width: 767px) {
    body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* =============================================================================
   KB_MOBILE_SAFE_V1_GRID_CLASS_FIX_V2 — Grid/flex items thiếu min-width:0
   =============================================================================
   Mở rộng rule "GRID_ITEM_MIN_WIDTH" (rule 11) để cover grid/flex set qua
   CSS class (không chỉ inline style). Fix root cause cho các case như
   .kbrs-grid (admin redemption show) bị tràn ngang trên mobile.
   ============================================================================= */
@media (max-width: 767px) {
    [class*="-grid"] > *,
    [class$="-grid"] > *,
    .kbrs-grid > *,
    .ms-grid > *,
    .ms-grid-tight > *,
    .ms-grid-wide > * {
        min-width: 0;
    }

    [class*="-flex"] > *,
    [class$="-flex"] > * {
        min-width: 0;
    }
}