/* ════════════════════════════════════════════════════════
   NSCA ERP — Mobile LITE CSS (_shared/mobile-lite.css)
   Phần dùng chung cho MỌI app (shell chính + sub-app):
   - Card-table (≤640px, đi kèm _shared/mobile.js)
   - Modal inline-style → bottom-sheet (≤768px)
   - Input ≥16px chống iOS auto-zoom (≤768px)
   Desktop >768px: KHÔNG thay đổi gì.
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Input: font ≥16px để iOS không tự zoom ── */
  input, select, textarea { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important; height: 20px !important;
  }

  /* ── Modal inline-style (position:fixed;inset:0) → bottom sheet ── */
  div[style*="position:fixed"][style*="inset:0"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  div[style*="position:fixed"][style*="inset:0"] > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    animation: m-sheet-up .22s cubic-bezier(.4,0,.2,1);
  }
  @keyframes m-sheet-up {
    from { transform: translateY(40px); opacity: .6; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* ── Helper: hàng nút cuộn ngang ── */
  .m-scroll-x {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px;
  }
  .m-scroll-x::-webkit-scrollbar { display: none; }
  .m-scroll-x > * { flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* ════════════════════════════════════════════════════════
   CARD-TABLE  (≤640px) — mobile.js gắn data-label
   Mỗi <tr> → 1 thẻ dọc:  [nhãn cột]   [giá trị]
   Opt-out: <table class="no-card">
   ════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  table.m-card-tbl { min-width: 0 !important; width: 100% !important; border-collapse: separate; }
  .m-card-tbl thead { display: none !important; }
  .m-card-tbl, .m-card-tbl tbody { display: block !important; width: 100% !important; }
  .m-card-tbl tbody tr {
    display: block !important;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d0d8e0);
    border-radius: 10px;
    margin: 8px !important;
    padding: 4px 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }
  .m-card-tbl td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px;
    width: 100% !important;
    border: none !important;
    border-bottom: 1px dashed var(--border, #e2e8f0) !important;
    padding: 7px 12px !important;
    text-align: right !important;
    min-width: 0;
    white-space: normal !important;
    font-size: 12.5px;
  }
  .m-card-tbl td:last-child { border-bottom: none !important; }
  .m-card-tbl td::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text-4, #708090);
    text-align: left;
    flex: 0 0 auto;
    max-width: 46%;
  }
  .m-card-tbl td.m-td-full {
    display: block !important;
    text-align: center !important;
  }
  .m-card-tbl td.m-td-full::before { content: none; }
  .m-card-tbl tr:hover td { background: transparent !important; }
  .m-card-tbl td .btn, .m-card-tbl td button {
    min-height: 34px !important;
    padding: 5px 12px !important;
  }
}