/* ============================================================
   RESPONSIVE — Round 6 (mobile-first responsive layer)
   Target: 375px+ (iPhone SE) up to desktop.
   Breakpoints (consistent with existing portal.css):
     - phone:  ≤ 600px (small phones)
     - tablet: 601-880px (large phones + small tablets)
     - desktop: ≥ 881px (existing portal collapse threshold)

   Loaded sau portal.css để override (specificity bằng nhau, source order wins).
   ============================================================ */

/* ============================================================
   PHASE 1 — Foundation utilities
   ============================================================ */

/* Touch targets — Apple HIG / Android guidelines: 44px minimum */
@media (max-width: 880px) {
    .btn,
    .btn-sm,
    .action-btn,
    .icon-btn,
    .modal-close,
    .nav-burger,
    .sidebar-toggle,
    button.pagination-btn {
        min-height: 44px;
        min-width: 44px;
    }
    /* btn-sm padding tuned for 44px touch */
    .btn-sm {
        padding: 10px 14px;
        font-size: var(--fs-sm);
    }
    /* Action buttons in tables — keep visual size but enlarge tap area via padding */
    .action-btn {
        padding: 12px;
    }
}

/* ============================================================
   PHASE 2 — Modal: full-width on mobile with safe margins
   ============================================================ */
@media (max-width: 880px) {
    .modal-backdrop .modal {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        max-height: calc(100vh - 24px);
        margin: 12px;
    }
    .modal-body { padding: var(--space-s); }
    .modal-footer {
        flex-wrap: wrap;
        gap: var(--space-2xs);
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
    /* Form rows on mobile — stack 2-col grids vertically */
    .modal-body .form-row,
    .modal-body [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   PHASE 3 — Form inputs mobile-friendly
   ============================================================ */
@media (max-width: 880px) {
    .input,
    .select,
    .textarea {
        width: 100%;
        font-size: 16px !important;  /* prevent iOS zoom on focus */
        min-height: 44px;
        box-sizing: border-box;
    }
    .textarea { min-height: 88px; }
    .field { margin-bottom: var(--space-s); }
}

/* ============================================================
   PHASE 4 — Topbar mobile (header H1 + actions stack)
   ============================================================ */
@media (max-width: 880px) {
    .portal-topbar {
        flex-wrap: wrap;
        gap: var(--space-2xs);
    }
    .portal-topbar h1 {
        font-size: var(--fs-md);
        flex: 1 1 100%;
    }
    .portal-topbar .breadcrumb {
        font-size: var(--fs-xs);
    }
    .portal-topbar .topbar-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }
}

/* ============================================================
   PHASE 5 — Toolbar (search + filters) responsive
   ============================================================ */
@media (max-width: 880px) {
    .data-toolbar,
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2xs);
        padding: var(--space-2xs);
    }
    .data-toolbar-search,
    .data-toolbar-filters,
    .data-toolbar-right,
    .data-toolbar-pagination {
        width: 100%;
        flex-wrap: wrap;
    }
    .data-toolbar-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xs);
    }
    .data-toolbar-filters .select,
    .data-toolbar-filters .btn,
    .filter-bar .select,
    .filter-bar .input-wrap {
        width: 100%;
    }
    .filter-spacer { display: none; }
}
@media (max-width: 480px) {
    .data-toolbar-filters {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PHASE 6 — Bulk action bar: horizontal scroll trên mobile
   (10 nút không thể stack hết, dùng scroll ngang để nhanh thao tác)
   ============================================================ */
@media (max-width: 880px) {
    .bulk-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2xs);
    }
    .bulk-bar > div:first-child {
        text-align: center;
        font-size: var(--fs-xs);
    }
    .bulk-bar .bulk-actions {
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-2xs);
    }
    .bulk-bar .bulk-actions .btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }
}

/* ============================================================
   PHASE 7 — Horizontal scroll cho table trên mobile
   Giữ nguyên layout table + nền card, bọc wrapper overflow-x:auto.
   User vuốt ngang để xem hết cột. Không thêm shadow gradient (gây rối UI).
   ============================================================ */
@media (max-width: 880px) {
    /* Wrap card hiện rõ */
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md);
    }
    /* Force toàn bộ table area dùng bg solid — không cho canvas-fx xuyên qua.
       Quan trọng: table phải có bg riêng vì min-width: max-content có thể rộng
       hơn wrap, lúc đó bg wrap không cover hết. */
    .data-table {
        min-width: max-content;
        font-size: var(--fs-sm);
        background: var(--surface) !important;
    }
    .data-table tbody,
    .data-table tbody tr {
        background: var(--surface) !important;
    }
    .data-table tbody td {
        background: var(--surface) !important;
    }
    .data-table tbody tr:hover td {
        background: rgba(172, 205, 255, 0.04) !important;
    }
    /* Scrollbar 10px rõ ràng trên trackpad/chuột */
    .data-table-wrap::-webkit-scrollbar { height: 10px; }
    .data-table-wrap::-webkit-scrollbar-track {
        background: var(--surface-2);
        border-radius: 5px;
    }
    .data-table-wrap::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 5px;
    }
    .data-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); }

    /* Tighter padding để vừa nhiều cột hơn */
    .data-table th,
    .data-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }
    /* Cell mô tả/note dài: truncate ellipsis */
    .data-table td[data-label="Mô tả"],
    .data-table td[data-label="Ghi chú"],
    .data-table td[data-label="Nội dung"],
    .data-table td[data-label="User-Agent"] {
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ----- Sticky cột định danh giữ context khi scroll ngang -----
       Logic:
         - Cell ĐẦU TIÊN (col-check hoặc col định danh): sticky tại left=0
         - Nếu cell đầu là col-check: cell THỨ HAI (định danh) sticky tại left=46px
       Box-shadow phân chia sticky vs scroll content.                          */
    .data-table tr > th:first-child,
    .data-table tr > td:first-child {
        position: sticky;
        left: 0;
        background: var(--surface);
        z-index: 2;
    }
    /* Khi cell đầu là col-check → cell kế tiếp cũng sticky (lùi sang phải) */
    .data-table tr > .col-check + th,
    .data-table tr > .col-check + td {
        position: sticky;
        left: 46px;
        background: var(--surface);
        z-index: 2;
        box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.5);
    }
    /* Tables KHÔNG có col-check → cột định danh ở vị trí 1, cần shadow */
    .data-table tr > th:first-child:not(.col-check),
    .data-table tr > td:first-child:not(.col-check) {
        box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.5);
    }
    /* Header bg cần opaque (mặc định trong suốt sẽ thấy row khác xuyên qua khi scroll) */
    .data-table thead th { background: var(--surface-2); }
}

/* ============================================================
   PHASE 8 — Pagination buttons mobile-friendly
   ============================================================ */
@media (max-width: 880px) {
    .pagination,
    .pagination-nav-compact {
        flex-wrap: wrap;
        justify-content: center;
    }
    .pagination-nav-compact button,
    .pagination button {
        min-width: 38px;
        min-height: 38px;
    }
    .table-footer {
        flex-direction: column;
        gap: var(--space-2xs);
        align-items: stretch;
        text-align: center;
    }
}

/* ============================================================
   PHASE 9 — Sidebar drawer (mobile)
   Existing portal.css already handles burger + .open class.
   Just polish a few things.
   ============================================================ */
@media (max-width: 880px) {
    .portal-sidebar {
        max-width: 280px;
        box-shadow: var(--shadow-lg);
    }
    /* Click-outside backdrop khi sidebar mở */
    .portal-sidebar.open ~ .portal-main::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }
}

/* ============================================================
   PHASE 10 — Detail / card grids
   ============================================================ */
@media (max-width: 880px) {
    .ld-grid,
    .ld-info-grid,
    .dashboard-split,
    .quick-actions,
    .stat-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-s);
    }
    .card { padding: var(--space-s); }
}

/* ============================================================
   PHASE 11 — Footer / KV list
   ============================================================ */
@media (max-width: 600px) {
    .kv-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    .kv-row .field-label {
        min-width: 0 !important;
    }
}

/* ============================================================
   PHASE 12 — Auth pages (login / register / forgot / reset)
   ============================================================ */
@media (max-width: 880px) {
    .auth-page,
    .auth-shell {
        padding: var(--space-s);
        min-height: 100vh;
    }
    .auth-card {
        width: 100%;
        max-width: 100%;
        padding: var(--space-m) var(--space-s);
        box-sizing: border-box;
    }
    .auth-card .field { margin-bottom: var(--space-s); }
    .auth-card .btn { width: 100%; }
    .auth-nav {
        padding: var(--space-2xs) var(--space-s) !important;
    }
}

/* ============================================================
   PHASE 13 — Landing page (index.html, about.html, download.html)
   ============================================================ */
@media (max-width: 880px) {
    .hero-title,
    h1.hero-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.15;
    }
    .hero-sub,
    .hero-subtitle {
        font-size: var(--fs-md);
    }
    .hero-cta,
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2xs);
    }
    .hero-cta .btn,
    .hero-actions .btn {
        width: 100%;
    }
    .features-grid,
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }
    section.section,
    main > section {
        padding-left: var(--space-s);
        padding-right: var(--space-s);
    }
}

/* ============================================================
   PHASE 14 — Misc safety: prevent body overflow on mobile
   ============================================================ */
@media (max-width: 880px) {
    body {
        overflow-x: hidden;
    }
    /* Code blocks ngăn overflow */
    code, pre {
        word-break: break-all;
    }
    /* Toast container — top center for thumb reachability */
    .toast-container {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        max-width: 100% !important;
    }
}