/* ═══════════════════════════════════════════════════════════
   mobile.css — iOS / mobile support for all NVT pages
   Include AFTER page-specific CSS in every HTML file
═══════════════════════════════════════════════════════════ */

/* ─── Prevent input zoom on iOS (font-size must be ≥16px) ─── */
input, select, textarea {
  font-size: 16px !important;
}
/* Restore smaller display size visually while keeping 16px for iOS */
.form-input, .form-label, .search-bar, .rm-field input,
.customer-picker-input, .sum-disc-input {
  font-size: 16px !important;
}

/* ─── Tap highlight ─── */
a, button, [role="button"], label { -webkit-tap-highlight-color: transparent; }

/* ─── Smooth momentum scrolling on iOS ─── */
.table-wrapper, .doc-sidebar-nav, .overlay-body,
.modal-body, .drawer-body, .cd-list, .reserve-list {
  -webkit-overflow-scrolling: touch;
}

/* ─── Safe area insets (iPhone notch / home indicator) ─── */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ─── Text scale 1.5x on iOS — home card page only ─── */
@media (max-width: 768px) {
  body.home-pg {
    zoom: 1.5;
  }
  /* Counter-zoom: keep top bar and images at original size on home page */
  body.home-pg .topbar {
    zoom: 0.667;
  }
  body.home-pg img {
    zoom: 0.667;
  }
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR PAGES (sales-layout pages) — mobile breakpoint
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Body: allow vertical scroll on mobile */
  body { overflow: auto; height: auto; }

  /* Hide sidebar off-screen by default */
  .doc-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 800;
    width: 260px;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  .doc-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.18);
  }

  /* Backdrop overlay when sidebar is open */
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 799;
  }
  .sidebar-backdrop.open { display: block; }

  /* Main area takes full width */
  .main {
    width: 100%;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Page header: show hamburger, tighten padding */
  .page-header {
    padding: 10px 14px 10px;
    padding-top: calc(10px + env(safe-area-inset-top));
    gap: 8px;
    align-items: center;
  }
  .page-header-left { flex: 1; min-width: 0; }
  .breadcrumb { display: none; }
  .page-title { font-size: 17px; }

  /* Hamburger button — injected by mobile-nav.js */
  .btn-hamburger {
    width: 36px; height: 36px; border-radius: 8px;
    border: 1px solid #e4e4e7; background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; color: #52525b;
    -webkit-tap-highlight-color: transparent;
  }
  .btn-hamburger:active { background: #f4f4f5; }

  /* btn-create: smaller on mobile */
  .btn-create { padding: 8px 14px; font-size: 13px; }

  /* Toolbar: wrap, tighten */
  .toolbar {
    padding: 8px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .toolbar-left { gap: 6px; flex-wrap: wrap; }
  .btn-filter { padding: 6px 12px; font-size: 12px; }
  .search-bar-wrap { width: 100%; }
  .search-bar { width: 100% !important; font-size: 16px !important; }

  /* Table: horizontal scroll (desktop fallback; overridden by card layout below) */
  .table-wrapper { overflow-x: auto; }
  .table-wrapper th, .table-wrapper td { padding: 10px 12px !important; }

  /* Reserve banner on mobile */
  #reserve-banner:not(:empty) { padding: 8px 14px; }

  /* Overlay (document creation) full-screen on mobile */
  .overlay {
    position: fixed;
    inset: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* overlay-topbar detailed styles in SALES PAGES section below */
  .ov-content { flex-direction: column !important; }
  .ov-form { width: 100% !important; padding: 16px !important; }
  .ov-sidebar { width: 100% !important; }

  /* Overlay form rows: wrap on mobile so fields don't get too narrow */
  .ov-form .form-row { flex-wrap: wrap; }
  .ov-form .form-group.w-third { flex: 1 1 calc(50% - 6px); min-width: 120px; }
  .ov-form .form-group.w-half  { flex: 1 1 100%; }

  /* Form blocks inside overlay */
  .form-block { padding: 14px !important; }

  /* Items table: stacked card layout on mobile */
  .ov-form .form-block:has(.items-table) { overflow-x: unset !important; }
  .ov-form .items-table { min-width: unset !important; }
  .ov-form .items-table thead { display: none; }
  .ov-form .items-table tbody { display: block; }
  .ov-form .items-table .item-main-row { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 10px 0 4px; border-top: 1px solid #f0f0f0; border-bottom: none !important; }
  .ov-form .items-table .item-main-row td { border-bottom: none !important; padding: 0 !important; }
  .ov-form .items-table .item-note-row { display: block; padding: 0 0 10px; border-bottom: 1px solid #f0f0f0; }
  .ov-form .items-table .item-note-row td { display: block; padding: 0 !important; border-bottom: none !important; }
  .ov-form .items-table .td-desc  { order: 1; width: 100%; }
  .ov-form .items-table .td-qty   { order: 2; flex: 0 0 68px; }
  .ov-form .items-table .td-unit  { order: 3; flex: 0 0 76px; }
  .ov-form .items-table .td-price { order: 4; flex: 1; }
  .ov-form .items-table .td-disc  { order: 5; flex: 0 0 68px; }
  .ov-form .items-table .td-amt   { order: 6; flex: 1; }
  .ov-form .items-table .td-del   { order: 7; flex: 0 0 40px; display: flex; align-items: center; }
  .ov-form .items-table .td-qty::before   { content: 'จำนวน';     display: block; font-size: 10px; font-weight: 500; color: #a1a1aa; margin-bottom: 3px; }
  .ov-form .items-table .td-unit::before  { content: 'หน่วย';      display: block; font-size: 10px; font-weight: 500; color: #a1a1aa; margin-bottom: 3px; }
  .ov-form .items-table .td-price::before { content: 'ราคา/หน่วย'; display: block; font-size: 10px; font-weight: 500; color: #a1a1aa; margin-bottom: 3px; }
  .ov-form .items-table .td-disc::before  { content: 'ส่วนลด%';    display: block; font-size: 10px; font-weight: 500; color: #a1a1aa; margin-bottom: 3px; }
  .ov-form .items-table .td-amt::before   { content: 'จำนวนเงิน';  display: block; font-size: 10px; font-weight: 500; color: #a1a1aa; margin-bottom: 3px; }

  /* Modals */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Reserve modal */
  .rm-backdrop { padding: 0; align-items: flex-end; }
  .rm-box {
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════
   HOME PAGE (index.html) — mobile tweaks
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* index body */
  body { padding: 0 0 0px; }

  body > .topbar:not(.users-topbar) {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 8px;
    position: static;
  }
  body > .topbar:not(.users-topbar) .topbar-user {
    width: auto;
    max-width: min(220px, 70vw);
    text-align: right;
  }
  body > .topbar:not(.users-topbar) .btn-logout {
    width: auto;
  }

  .header { margin-bottom: 36px; }
  .header h1 { font-size: 22px; }

  .sections { gap: 32px; }

  .grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .card { padding: 18px 14px; }
  .card-title { font-size: 13px; }
  .card-desc { font-size: 11px; }
  .card-count { font-size: 10px; }
  .card-arrow { font-size: 14px; bottom: 16px; right: 14px; }

}

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE — mobile tweaks
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .login-card {
    padding: 32px 20px;
    border-radius: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none;
    box-shadow: none;
  }
  body:has(.login-card) {
    padding: 0;
    background: #fff;
  }
}

/* ═══════════════════════════════════════════════════════════
   USERS PAGE — mobile tweaks
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .users-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: calc(12px + env(safe-area-inset-top)) 10px 0;
    margin-bottom: 18px;
  }
  .users-topbar .back-link {
    white-space: nowrap;
  }
  .users-topbar .page-title {
    min-width: 0;
    text-align: center;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .users-topbar .btn-add {
    min-height: 42px;
    padding: 0 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  #users-list.card {
    border-radius: 12px;
    overflow: visible;
    background: transparent;
    border: 0;
  }
  .user-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
  }
  .user-row:last-child { border-bottom: 1px solid #e4e4e7; }
  .user-avatar {
    width: 48px;
    height: 48px;
    margin-top: 0;
    font-size: 20px;
  }
  .user-main {
    display: contents;
  }
  .user-info {
    min-width: 0;
  }
  .user-display {
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .user-username {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .perm-pills {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
  }
  .perm-pill {
    font-size: 11px;
    line-height: 1.2;
    padding: 5px 8px;
    border-radius: 7px;
    letter-spacing: 0;
    text-transform: none;
  }
  .user-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 0;
  }
  .user-actions .btn-sm,
  .user-actions .totp-status-on,
  .user-actions .totp-status-off {
    justify-content: center;
    min-height: 40px;
    width: 100%;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
  }
  .user-actions .totp-status-on,
  .user-actions .totp-status-off {
    display: inline-flex;
  }
  .user-actions .btn-sm.danger {
    border: 1px solid #fecaca;
  }

  /* Users modal bottom sheet */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 94dvh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Permission grid single column */
  .perm-grid { grid-template-columns: 1fr !important; }
  .perm-item:nth-child(odd):not(:last-child) { border-right: none; }
}

/* ═══════════════════════════════════════════════════════════
   RESERVE PAGE — mobile tweaks
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .reserve-list { padding: 12px; }
  .reserve-card-header { flex-wrap: wrap; gap: 8px; }
  .reserve-card-title { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   SANGFAH PAGE — mobile tweaks
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Eliminate sidebar margin */
  .main { margin-left: 0 !important; }
  .list-home-back { display: inline-flex; }

  /* Active page: fill + scroll within fixed main container */
  .page.active {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Editor page scrolls with bottom-bar clearance */
  .editor-body.page.active { overflow-y: auto; }

  /* Editor bottom bar: full-width, safe-area aware */
  .editor-bar {
    left: 0 !important;
    right: 0 !important;
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: 8px;
  }
  .bar-actions { flex-wrap: wrap; gap: 8px; }

  /* Camp rows: stacked mobile cards instead of horizontal scroll */
  .camp-table-scroll {
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
  }
  .camp-tbl-head {
    display: none;
  }
  .camp-tbl-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    grid-template-areas:
      "camp camp del"
      "count price price"
      "total total total";
    min-width: 0;
    gap: 10px 8px;
    margin: 10px 12px;
    padding: 12px;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
    background: #fff;
  }
  .camp-tbl-row:last-child {
    border-bottom: 1px solid #e4e4e7;
  }
  .camp-tbl-row .camp-row-num {
    display: none;
  }
  .camp-tbl-row .camp-field {
    min-width: 0;
  }
  .camp-tbl-row .camp-field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #a1a1aa;
    line-height: 1.2;
  }
  .camp-tbl-row .camp-input {
    min-height: 44px;
    font-size: 16px;
    border-color: #e4e4e7;
    border-radius: 8px;
    background: #fff;
  }
  .camp-tbl-row .camp-field-camp {
    grid-area: camp;
  }
  .camp-tbl-row .camp-field-count {
    grid-area: count;
  }
  .camp-tbl-row .camp-field-price {
    grid-area: price;
  }
  .camp-tbl-row .camp-field-total {
    grid-area: total;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
  }
  .camp-tbl-row .camp-field-total .camp-field-label {
    margin: 0;
    font-size: 12px;
    color: #71717a;
  }
  .camp-tbl-row .camp-row-total {
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    overflow-wrap: anywhere;
    padding-top: 0;
    font-size: 15px;
  }
  .camp-tbl-row .camp-del-btn {
    grid-area: del;
    align-self: end;
    justify-self: end;
    width: 36px;
    height: 44px;
    font-size: 22px;
  }
  .site-add-row {
    padding: 10px 12px 14px;
  }
  .btn-add-camp {
    width: 100%;
    min-height: 44px;
    border-radius: 8px;
  }

  /* PDF modal: full-screen on mobile */
  .modal-overlay {
    align-items: stretch !important;
  }
  .modal-overlay .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 600px) {
  /* Tighter page padding */
  .main .page, .main .editor-body { padding: 16px 14px 110px !important; }

  /* Page headers in sangfah */
  .page-header { margin-bottom: 14px; }
  .page-title { font-size: 18px !important; }

  /* Doc cards: stack action buttons */
  .doc-card { flex-wrap: wrap; gap: 10px; }
  .doc-card-actions { width: 100%; justify-content: flex-end; }

  /* Settings: single col */
  .settings-grid { grid-template-columns: 1fr !important; }

  /* Site add area: full width buttons */
  .btn-add-site { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   SALARY PAGE — mobile tweaks (uses same .main/.page/.doc-card
   structure as sangfah — handled by SANGFAH section above)
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Salary form rows: single column */
  .form-row { grid-template-columns: 1fr !important; }
  .form-group.full { grid-column: 1 !important; }

  /* Sort bar: stack */
  .sort-bar { flex-wrap: wrap; width: 100%; }
  .sort-select { flex: 1; min-width: 120px; }

  /* Month group label spacing */
  .month-group { margin-bottom: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   EWHT PAGE — mobile tweaks
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* topbar: wrap buttons to second row so hamburger + title stay on top */
  .page-header.topbar { flex-wrap: wrap; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .topbar-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .year-select { flex: 1; min-width: 80px; }
  .topbar-right .btn { flex: 1; min-width: 100px; justify-content: center; font-size: 12px; padding: 8px 10px; }

  /* summary bar: wrap + tighten */
  .summary-bar { flex-wrap: wrap; gap: 10px 24px; padding: 10px 16px; }
  .summary-stat strong { font-size: 18px; }

  /* content: tighten padding */
  .content { padding: 16px 14px 40px !important; }
}

@media (max-width: 480px) {
  .month-card { padding: 14px 12px 12px; }
  .month-name { font-size: 13px; }
  .month-year-sub { font-size: 10px; }
  /* file names: tighter truncation */
  .file-item .file-name { max-width: 110px; }
  /* download links: full width */
  .btn-dl { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   GENERAL — bigger touch targets
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .btn-more { width: 40px; height: 40px; font-size: 18px; }
  .nav-item { padding: 11px 10px; font-size: 14px; }
  .ctx-menu { font-size: 14px; }
  .ctx-item { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════
   SALES PAGES — touch targets, card layout, usability
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Toolbar: horizontal scroll strip ─── */
  .toolbar { flex-wrap: wrap; padding: 0 14px 8px; }
  .toolbar-left {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 8px 0 2px;
    /* hide scrollbar visually */
    scrollbar-width: none;
  }
  .toolbar-left::-webkit-scrollbar { display: none; }
  .btn-filter {
    min-height: 36px;
    padding: 0 14px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px;
  }
  .search-bar-wrap { width: 100%; padding-bottom: 4px; }

  /* ─── Page header buttons ─── */
  .btn-create { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .btn-export-excel { min-height: 36px; padding: 0 12px; }

  /* ─── List table → card layout (scoped to .table-wrapper only) ─── */
  .table-wrapper table { min-width: unset !important; background: transparent !important; }
  .table-wrapper thead { display: none; }
  .table-wrapper tbody { display: block; padding: 8px 12px 16px; }
  .table-wrapper tbody tr {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .table-wrapper tbody tr:hover { background: #fff; }
  .table-wrapper tbody td { padding: 0 !important; white-space: normal; border-bottom: none; }
  /* Full-span rows (empty states, "loading…") carry no data-col, so give them
     the whole card width instead of leaving them a zero-width flex item. */
  .table-wrapper tbody td[colspan] { width: 100%; flex: 0 0 100%; }

  /* Fallback for any table whose cells carry no data-col at all. The rules
     below position cells by data-col; a cell that matches none of them keeps
     the `padding: 0` above and every column piles onto one unreadable line
     (this is what broke the products and contacts lists). Stack them full
     width instead, so an untagged or newly added table is merely plain on
     mobile rather than broken. Tagged cells are unaffected. */
  .table-wrapper tbody td:not([data-col]) {
    width: 100%;
    flex: 0 0 100%;
    padding: 3px 14px !important;
    font-size: 13px;
  }
  .table-wrapper tbody td:not([data-col]):first-child { padding-top: 12px !important; }
  .table-wrapper tbody td:not([data-col]):last-child  { padding-bottom: 12px !important; }
  /* A lone checkbox or icon-button cell adds nothing stacked on its own row */
  .table-wrapper tbody td:not([data-col]).center:has(> input[type="checkbox"]) { display: none; }

  /* Hide checkbox + due-date */
  .table-wrapper td[data-col="cb"]  { display: none; }
  .table-wrapper td[data-col="due"] { display: none; }

  /* Doc number — top left */
  .table-wrapper td[data-col="no"] {
    order: 1;
    flex: 1;
    min-width: 0;
    padding: 12px 14px 4px !important;
    font-size: 14px;
    font-weight: 600;
  }
  /* Actions button — top right */
  .table-wrapper td[data-col="actions"] {
    order: 2;
    width: 44px;
    padding: 6px 4px 0 !important;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  /* Customer name — second row full width */
  .table-wrapper td[data-col="contact"] {
    order: 3;
    width: 100%;
    padding: 2px 14px 10px !important;
    border-bottom: 1px solid #f4f4f5;
    font-size: 13px;
    color: #52525b;
  }
  /* Date — third row left */
  .table-wrapper td[data-col="date"] {
    order: 4;
    flex: 1;
    padding: 8px 14px 12px !important;
    font-size: 12px;
    color: #a1a1aa;
  }
  /* Total — third row right */
  .table-wrapper td[data-col="total"] {
    order: 5;
    width: auto;
    padding: 8px 14px 12px !important;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #18181b;
  }
  .table-wrapper td[data-col="total"].amount-zero { color: #a1a1aa; font-weight: 400; }
  /* Status badge row */
  .table-wrapper td[data-col="status"] {
    order: 6;
    width: 100%;
    padding: 0 14px 10px !important;
  }
  /* Ghost row action buttons — stack full width */
  .ghost-reserve-row td[data-col="actions"] {
    width: 100%;
    order: 7;
    padding: 0 14px 12px !important;
    justify-content: flex-start;
    gap: 8px;
  }
  .ghost-reserve-row td[data-col="actions"] button {
    flex: 1;
    min-height: 36px;
    font-size: 13px !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  /* ─── Products / services list (products.html, pool-products.html) ───
     These columns exist only on the product tables, so they never collide
     with the sales-document rules above. Without them every product cell
     fell through to the generic `padding: 0` and collapsed into one line.
     Layout: name + ··· / code + type / category · unit + price. */
  .products-table td[data-col="name"] {
    order: 1;
    flex: 1;
    min-width: 0;
    padding: 12px 4px 6px 14px !important;
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .products-table td[data-col="code"] {
    order: 3;
    flex: 0 0 auto;
    padding: 0 0 8px 14px !important;
    font-size: 12px !important;
  }
  .products-table td[data-col="type"] {
    order: 4;
    flex: 1;
    padding: 0 14px 8px !important;
  }
  .products-table td[data-col="category"],
  .products-table td[data-col="unit"] {
    flex: 0 0 auto;
    padding: 8px 0 12px 14px !important;
    border-top: 1px solid #f4f4f5;
    font-size: 12px !important;
    color: #71717a !important;
  }
  .products-table td[data-col="category"] { order: 5; }
  .products-table td[data-col="unit"] { order: 6; }
  .products-table td[data-col="unit"]::before {
    content: '·';
    margin-right: 6px;
    color: #d4d4d8;
  }
  .products-table td[data-col="price"] {
    order: 7;
    flex: 1;
    padding: 8px 14px 12px !important;
    border-top: 1px solid #f4f4f5;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    color: #18181b;
  }

  /* ─── Contacts list (contacts.html, pool-contacts.html) ───
     Same story as the products table: these cells carry no sales-document
     data-col, so without these rules they inherit `padding: 0` and pile up
     on one line. Layout: name + ··· / code + type / tax id / phone + credit. */
  .contacts-table td[data-col="name"] {
    order: 1;
    flex: 1;
    min-width: 0;
    padding: 12px 4px 6px 14px !important;
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .contacts-table td[data-col="code"] {
    order: 3;
    flex: 0 0 auto;
    padding: 0 0 8px 14px !important;
    font-size: 12px !important;
  }
  .contacts-table td[data-col="ctype"] {
    order: 4;
    flex: 1;
    padding: 0 14px 8px !important;
  }
  .contacts-table td[data-col="cats"] {
    order: 5;
    width: 100%;
    padding: 0 14px 8px !important;
  }
  .contacts-table td[data-col="taxid"] {
    order: 6;
    width: 100%;
    padding: 8px 14px 4px !important;
    border-top: 1px solid #f4f4f5;
    font-size: 12px !important;
    color: #71717a !important;
  }
  .contacts-table td[data-col="taxid"]::before {
    content: 'เลขผู้เสียภาษี ';
    color: #a1a1aa;
  }
  .contacts-table td[data-col="phone"] {
    order: 7;
    flex: 1;
    min-width: 0;
    padding: 0 4px 12px 14px !important;
    font-size: 12px !important;
    overflow-wrap: anywhere;
  }
  .contacts-table td[data-col="credit"] {
    order: 8;
    flex: 0 0 auto;
    padding: 0 14px 12px !important;
    text-align: right !important;
    font-size: 12px !important;
    color: #71717a !important;
  }

  /* ─── Overlay topbar: taller buttons ─── */
  .overlay-topbar { height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .overlay-title { min-width: 0; flex: 1; }
  .ov-title-stack { min-width: 0; }
  .ov-type-sub { font-size: 10px; }
  .overlay-docno { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .overlay-actions { gap: 6px; }
  .btn-cancel-ov { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .btn-save-ov   { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .btn-save-caret { min-height: 40px; padding: 0 10px; }

  /* ─── Form inputs: taller for easier tapping ─── */
  .form-input { min-height: 44px; padding: 10px 12px !important; }
  textarea.form-input { min-height: 80px; }
  .customer-picker-input { min-height: 44px; padding: 10px 40px 10px 12px !important; }

  /* ─── Items table: taller tap targets ─── */
  .ov-form .items-table input,
  .ov-form .items-table select {
    min-height: 40px !important;
    font-size: 16px !important;
    padding: 6px 4px !important;
  }
  .btn-del-row {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .btn-add-row { min-height: 48px; font-size: 14px; }

  /* ─── Contact modal body: stack columns ─── */
  .modal-body { flex-direction: column; padding: 16px; gap: 16px; }
  .modal-right { width: 100%; }
  .modal-header { padding: 14px 16px; }
  .modal-footer { padding: 12px 16px; }

  /* ─── OV action buttons (แชร์/พิมพ์/เพิ่มเติม): bigger ─── */
  .ov-action-btn { min-height: 52px; padding: 8px 20px; font-size: 13px; }

  /* ─── Confirm dialog: taller buttons ─── */
  .confirm-cancel, .confirm-ok { min-height: 44px; padding: 0 20px; font-size: 14px; }

  /* ─── Toast: above home indicator ─── */
  #toast-container {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: 12px;
    left: 12px;
  }
  .toast { max-width: 100%; font-size: 14px; }

  /* ─── Print preview: wrap options ─── */
  .pp-options { flex-wrap: wrap; gap: 12px 20px; }
  .pp-dl-btn  { min-height: 44px; font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════
   APPROVAL PAGE — card layout extras
   (the shared .table-wrapper card rules above place no/contact/
   date/total; these add the type badge + approve/reject row)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Doc type badge — top right, beside the doc number */
  .approval-table td[data-col="type"] {
    order: 2;
    flex: 0 0 auto;
    padding: 12px 14px 4px !important;
  }
  /* Date + total sit just above the action row, so trim their bottom gap */
  .approval-table td[data-col="date"],
  .approval-table td[data-col="total"] {
    padding: 8px 14px 4px !important;
  }
  /* Approve / reject — full-width row of two equal buttons */
  .approval-table td[data-col="actions"] {
    order: 6;
    width: 100%;
    padding: 4px 14px 12px !important;
    display: block;
  }
  .approval-table td[data-col="actions"] .approval-btns { gap: 8px; }
  .approval-table td[data-col="actions"] .approval-btns button {
    flex: 1;
    min-height: 40px;
    font-size: 13px !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }
  /* Empty state: plain block, not a card */
  .table-wrapper tbody tr.approval-empty-row {
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .approval-table td[data-col="empty"] { display: block; }
  .approval-table .empty-state { padding: 48px 16px; }
}

@media (max-width: 768px) {
  /* Dropped pictures get the full width of the narrow description field */
  .ov-form .note-input img.desc-img { max-width: 100%; }
}