/* ==========================================================================
   VNPT CLEAN WHITE ENTERPRISE - MOBILE REFLOW & CARD ENGINE (mobile_reflow.css)
   Tự động kích hoạt trên thiết bị di động dọc (max-width: 767px / html.vnpt-mobile)
   Giữ nguyên 100% giao diện trên Desktop (>= 768px)
   ========================================================================== */

@media (max-width: 767px) {
  html.vnpt-mobile,
  html.vnpt-mobile body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* 1. Tối ưu khoảng đệm khung trang để mở rộng diện tích hiển thị trên màn hình dọc */
  html.vnpt-mobile .page-shell,
  html.vnpt-mobile main,
  html.vnpt-mobile .main-content,
  html.vnpt-mobile .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 2. Tự động Reflow các Grid cứng trên Desktop sang dọc hoặc cặp 2 KPI Cards */
  html.vnpt-mobile [data-vnpt-mgrid="stack-1"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html.vnpt-mobile [data-vnpt-mgrid="stack-1"] > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.vnpt-mobile [data-vnpt-mgrid="kpi-2"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.vnpt-mobile [data-vnpt-mgrid="kpi-2"] > * {
    min-width: 0 !important;
    grid-column: auto !important;
  }

  /* Nếu số lượng thẻ KPI lẻ (3, 5, 7), thẻ cuối tự giãn ngang cân đối */
  html.vnpt-mobile [data-vnpt-mgrid="kpi-2"] > *:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  /* Flex ngang nhiều panel trên Desktop -> xếp chồng dọc trên Mobile */
  html.vnpt-mobile [data-vnpt-mflex="stack"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html.vnpt-mobile [data-vnpt-mflex="stack"] > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 3. Thanh Tab chuyển đổi: cuộn ngang mượt mà thay vì tràn khung */
  html.vnpt-mobile [data-vnpt-mtabs="scroll"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html.vnpt-mobile [data-vnpt-mtabs="scroll"]::-webkit-scrollbar {
    display: none;
  }

  html.vnpt-mobile [data-vnpt-mtabs="scroll"] > button,
  html.vnpt-mobile [data-vnpt-mtabs="scroll"] > a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* 4. Thanh Filter thu gọn thông minh trên Mobile */
  html.vnpt-mobile .filter-bar,
  html.vnpt-mobile [data-vnpt-mfilter="wrap"] {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  html.vnpt-mobile .filter-bar .filter-group {
    flex: 1 1 calc(50% - 6px);
    min-width: 130px;
  }

  html.vnpt-mobile .filter-bar .filter-select,
  html.vnpt-mobile .filter-bar input[type="date"],
  html.vnpt-mobile .filter-bar input[type="month"],
  html.vnpt-mobile .filter-bar input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 5. Thanh công cụ chuyển đổi [Dạng Thẻ | Bảng ngang] + Chú thích Series Biểu đồ */
  .vnpt-m-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
  }

  .vnpt-m-toolbar-hint {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vnpt-m-mode-switch {
    display: inline-flex;
    align-items: center;
    background: #e2e8f0;
    padding: 2px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .vnpt-m-mode-btn {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s ease;
  }

  .vnpt-m-mode-btn.active {
    background: #ffffff;
    color: #0065ba;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
  }

  /* Badge thông báo biểu đồ đang tinh gọn series chính */
  .vnpt-m-chart-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 9px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #0369a1;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    font-family: 'Inter', sans-serif;
  }

  .vnpt-m-chart-toggle-all {
    border: 1px solid #93c5fd;
    background: #ffffff;
    color: #0065ba;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ==========================================================================
     6. BẢNG NHIỀU CỘT -> MỖI DÒNG THÀNH 1 CARD (table.vnpt-card-active)
     ========================================================================== */
  html.vnpt-mobile [data-vnpt-table-wrap="card"] {
    overflow-x: visible !important;
    max-height: none !important;
  }

  html.vnpt-mobile table.vnpt-card-active {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: none !important;
    border-collapse: separate !important;
    background: transparent !important;
    box-shadow: none !important;
    table-layout: auto !important;
  }

  html.vnpt-mobile table.vnpt-card-active > colgroup,
  html.vnpt-mobile table.vnpt-card-active > thead {
    display: none !important;
  }

  html.vnpt-mobile table.vnpt-card-active > tbody,
  html.vnpt-mobile table.vnpt-card-active > tfoot {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
  }

  html.vnpt-mobile table.vnpt-card-active > tfoot {
    margin-top: 10px !important;
  }

  /* Card tiêu chuẩn cho từng dòng dữ liệu (ép height: auto để không bị dính inline height: 34px/38px) */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 11px 12px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* Card Tổng cộng / Tóm tắt */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card[data-m-rowtype="summary"] {
    background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%) !important;
    border: 1.5px solid #93c5fd !important;
    box-shadow: 0 3px 10px rgba(0, 101, 186, 0.08) !important;
  }

  /* Dòng nhóm tiêu đề hoặc thông báo Trống / Loading */
  html.vnpt-mobile table.vnpt-card-active tr[data-m-rowtype="fullwidth"],
  html.vnpt-mobile table.vnpt-card-active tr[data-m-rowtype="group"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
  }

  html.vnpt-mobile table.vnpt-card-active tr[data-m-rowtype="fullwidth"] > td,
  html.vnpt-mobile table.vnpt-card-active tr[data-m-rowtype="fullwidth"] > th,
  html.vnpt-mobile table.vnpt-card-active tr[data-m-rowtype="group"] > td,
  html.vnpt-mobile table.vnpt-card-active tr[data-m-rowtype="group"] > th {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    padding: 2px 0 !important;
    position: static !important;
    white-space: normal !important;
    background: transparent !important;
    font-weight: 700 !important;
  }

  /* Reset toàn bộ thuộc tính td/th của Desktop bên trong Card */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > td,
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > th {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Ẩn cột STT riêng lẻ khi đã gộp vào tiêu đề Card hoặc ô trống không cần thiết */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="hidden-stt"],
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="empty-hide"],
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > td.kpi-tooltip[data-m-role="empty-hide"] {
    display: none !important;
  }

  /* A. Đầu Card (Title Row): Đơn vị / Chương trình / Nhân viên / Chỉ tiêu
     Dùng display: block + position: relative để các thẻ <div> ghi chú con bên trong xuống dòng tự nhiên, không bị tách ngang */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="title"] {
    grid-column: 1 / -1 !important;
    order: -20 !important;
    display: block !important;
    position: relative !important;
    padding: 0 0 8px 0 !important;
    margin-bottom: 2px !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: left !important;
    line-height: 1.4 !important;
  }

  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="title"][data-m-stt] {
    padding-right: 48px !important;
  }

  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="title"][data-m-stt]::after {
    content: "#" attr(data-m-stt);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eff6ff;
    color: #0065ba;
    border: 1px solid #bfdbfe;
    font-variant-numeric: tabular-nums;
  }

  /* Phụ đề nhóm (khi bảng có cột Nhóm/Đơn vị cha/Mã KPI) */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="subtitle"] {
    grid-column: 1 / -1 !important;
    order: -18 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 3px 8px !important;
    border-radius: 7px !important;
    background: #f1f5f9 !important;
    border: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-align: left !important;
  }

  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="subtitle"]::before {
    content: attr(data-m-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    flex-shrink: 0;
  }

  /* B. Chỉ số chính (Primary Metrics): Hiển thị nổi bật dạng ô KPI 2 cột */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="primary"],
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > td.kpi-tooltip[data-m-role="primary"] {
    order: -10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 3px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 7px 9px !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
  }

  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="primary"]::before {
    content: attr(data-m-label);
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.25;
    letter-spacing: 0.01em;
    width: 100%;
  }

  /* Nếu chỉ có 1 hoặc 3 ô primary, ô lẻ cuối cùng tự giãn 2 cột cho đẹp */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card[data-m-odd-primary="1"] > [data-m-role="primary"][data-m-last-primary="1"] {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card[data-m-odd-primary="1"] > [data-m-role="primary"][data-m-last-primary="1"]::before {
    width: auto !important;
  }

  /* C. Các cột phụ (Secondary Key-Value Rows) */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"],
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > td.kpi-tooltip[data-m-role="secondary"] {
    grid-column: 1 / -1 !important;
    order: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 5px 2px !important;
    border: none !important;
    border-bottom: 1px dashed #f1f5f9 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }

  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"]::before {
    content: attr(data-m-label);
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    text-align: left;
    flex: 0 1 52%;
    line-height: 1.3;
  }

  /* Cột phụ có công thức dài / nhiều dòng hoặc có ô nhập liệu <input>: xếp chồng full-width rõ ràng */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"][data-m-multiline="1"],
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"][data-m-has-input="1"] {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    text-align: left !important;
  }

  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"][data-m-multiline="1"]::before,
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"][data-m-has-input="1"]::before {
    flex: none !important;
    width: 100% !important;
    font-weight: 700 !important;
  }

  /* Thu gọn các cột phụ khi bảng rộng (> 7 cột), bấm mở rộng mới hiện (riêng ô có input luôn hiện để nhập liệu ngay) */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card.vnpt-m-collapsible:not(.vnpt-m-expanded) > [data-m-role="secondary"]:not([data-m-has-input="1"]),
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card.vnpt-m-collapsible:not(.vnpt-m-expanded) > td.kpi-tooltip[data-m-role="secondary"]:not([data-m-has-input="1"]) {
    display: none !important;
  }

  /* Nút Mở rộng / Thu gọn ngay trong Card */
  .vnpt-m-card-expander {
    grid-column: 1 / -1 !important;
    order: 12 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 5px 8px !important;
    margin-top: 2px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0065ba !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  /* D. Cột Thao tác / Nút bấm cuối Card */
  html.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="action"] {
    grid-column: 1 / -1 !important;
    order: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  /* 7. Tối ưu Modal / Popup không bị tràn màn hình dọc */
  html.vnpt-mobile [role="dialog"],
  html.vnpt-mobile .modal-content,
  html.vnpt-mobile .modal-box {
    max-width: calc(100vw - 16px) !important;
  }

  /* ==========================================================================
     8. TƯƠNG THÍCH DARK MODE (html.dark hoặc trang có biến nền tối)
     ========================================================================== */
  html.dark.vnpt-mobile .vnpt-m-table-toolbar,
  html.vnpt-mobile[data-vnpt-dark="1"] .vnpt-m-table-toolbar {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
  }

  html.dark.vnpt-mobile .vnpt-m-toolbar-hint,
  html.vnpt-mobile[data-vnpt-dark="1"] .vnpt-m-toolbar-hint {
    color: #94a3b8;
  }

  html.dark.vnpt-mobile .vnpt-m-mode-switch,
  html.vnpt-mobile[data-vnpt-dark="1"] .vnpt-m-mode-switch {
    background: #1e293b;
  }

  html.dark.vnpt-mobile .vnpt-m-mode-btn,
  html.vnpt-mobile[data-vnpt-dark="1"] .vnpt-m-mode-btn {
    color: #94a3b8;
  }

  html.dark.vnpt-mobile .vnpt-m-mode-btn.active,
  html.vnpt-mobile[data-vnpt-dark="1"] .vnpt-m-mode-btn.active {
    background: #0284c7;
    color: #ffffff;
  }

  html.dark.vnpt-mobile .vnpt-m-chart-hint,
  html.vnpt-mobile[data-vnpt-dark="1"] .vnpt-m-chart-hint {
    background: rgba(2, 132, 199, 0.16);
    border-color: rgba(56, 189, 248, 0.28);
    color: #7dd3fc;
  }

  html.dark.vnpt-mobile .vnpt-m-chart-toggle-all,
  html.vnpt-mobile[data-vnpt-dark="1"] .vnpt-m-chart-toggle-all {
    background: #0f172a;
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
  }

  html.dark.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card,
  html.vnpt-mobile[data-vnpt-dark="1"] table.vnpt-card-active tr.vnpt-m-card {
    background: #131c31 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  }

  html.dark.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card[data-m-rowtype="summary"],
  html.vnpt-mobile[data-vnpt-dark="1"] table.vnpt-card-active tr.vnpt-m-card[data-m-rowtype="summary"] {
    background: linear-gradient(180deg, rgba(2, 132, 199, 0.22) 0%, #131c31 100%) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
  }

  html.dark.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="title"],
  html.vnpt-mobile[data-vnpt-dark="1"] table.vnpt-card-active tr.vnpt-m-card > [data-m-role="title"] {
    color: #f8fafc !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  }

  html.dark.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="primary"],
  html.vnpt-mobile[data-vnpt-dark="1"] table.vnpt-card-active tr.vnpt-m-card > [data-m-role="primary"] {
    background: rgba(30, 41, 59, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
  }

  html.dark.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="primary"]::before,
  html.vnpt-mobile[data-vnpt-dark="1"] table.vnpt-card-active tr.vnpt-m-card > [data-m-role="primary"]::before {
    color: #94a3b8 !important;
  }

  html.dark.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"],
  html.vnpt-mobile[data-vnpt-dark="1"] table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"] {
    color: #e2e8f0 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  }

  html.dark.vnpt-mobile table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"]::before,
  html.vnpt-mobile[data-vnpt-dark="1"] table.vnpt-card-active tr.vnpt-m-card > [data-m-role="secondary"]::before {
    color: #94a3b8 !important;
  }

  html.dark.vnpt-mobile .vnpt-m-card-expander,
  html.vnpt-mobile[data-vnpt-dark="1"] .vnpt-m-card-expander {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #38bdf8 !important;
  }
}

/* Luôn ẩn nút mở rộng Card khi đang ở chế độ Bảng ngang */
table:not(.vnpt-card-active) .vnpt-m-card-expander {
  display: none !important;
}

/* Luôn ẩn thanh công cụ Mobile khi xem trên Desktop (>= 768px) */
@media (min-width: 768px) {
  .vnpt-m-table-toolbar,
  .vnpt-m-chart-hint,
  .vnpt-m-card-expander {
    display: none !important;
  }
}