/* ═══════════════════════════════════════════════════════════
   RASHA AUTOMOTIVE — mobile polish (additive, loaded AFTER the
   inline <style> in admin.php).

   The system already has: viewport meta, drawer sidebar, bottom nav,
   bottom-sheet modals, 44px buttons/inputs and scrolling tables.
   This file only fixes what is still too small / too loose on phones and
   uses the system's REAL class names. It changes no markup or PHP logic.
   ═══════════════════════════════════════════════════════════ */

/* ── Base: never scroll sideways, stable text size ────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, iframe, canvas { max-width: 100%; }

/* ── Touch feedback (all sizes) ───────────────────────────── */
.btn, .bottom-nav-item, .sidebar-link, .range-tab, .modal-close, .topbar-logout {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.btn:active, .bottom-nav-item:active, .range-tab:active { transform: scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .6; }

@media (max-width: 768px) {
  /* ── Fonts: lift the 10–11px text up to a readable size ──── */
  .tbl, .inv-tbl { font-size: 12px !important; }
  .badge { font-size: 11px !important; padding: 3px 8px !important; }
  .btn-xs { font-size: 12px !important; min-height: 36px; min-width: 36px; justify-content: center; }
  .btn-sm { min-height: 40px; }
  .bottom-nav-item { font-size: 11px !important; }
  .card-header h3 { font-size: 14px !important; }
  label, .form-label { font-size: 13px; }

  /* ── Forms: 16px stops Android/iOS zoom-on-focus ─────────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: 16px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }

  /* ── Tables keep scrolling inside their wrapper only ─────── */
  .table-wrap, .tbl-wrap-mobile, .inv-list-wrap, .prof-list-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
    overscroll-behavior-x: contain;
  }

  /* ── Modals: scrolling stays inside the sheet ────────────── */
  .modal-overlay { overscroll-behavior: contain; }
  .modal-body { overscroll-behavior: contain; }
  .modal-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .modal-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* ── Long text must wrap, not push the page wider ────────── */
  .card, .card-body, .page-wrap { min-width: 0; }
  /* break-word (NOT anywhere): `anywhere` shrinks table columns to 1 letter */
  .card-body, .stat-card, .sc-val { overflow-wrap: break-word; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ── Print: hide app chrome (extends the existing rules) ──── */
@media print {
  .bottom-nav, .sidebar, .sidebar-overlay, .topbar, .mobile-subbar, .no-print { display: none !important; }
  .page-wrap { margin: 0 !important; padding: 0 !important; }
}

/* ═══ v2: tables → cards on phones, scroll hint, visible scrollbar ═══ */
@media screen and (max-width: 768px) {
  /* Never break words in the middle (was word-break:break-all → "INV-202 6-08-00 16") */
  .tbl { word-break: normal !important; overflow-wrap: normal; }

  /* Plain tables become one card per row; labels come from the <th> via mobile.js */
  .tbl.as-cards, .tbl.as-cards tbody { display: block !important; width: 100% !important; min-width: 0 !important; }
  .tbl.as-cards thead { display: none !important; }
  .tbl.as-cards tr {
    display: block; background: #fff; border: 1px solid #e8e2e5; border-radius: 12px;
    margin: 0 0 10px; padding: 8px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .tbl.as-cards td {
    display: flex !important; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding: 6px 0 !important; border: 0 !important; border-bottom: 1px dashed #eee !important;
    white-space: normal !important; word-break: normal !important; text-align: right; font-size: 13px !important;
    min-width: 0;
  }
  .tbl.as-cards td:last-child { border-bottom: 0 !important; }
  .tbl.as-cards td::before {
    content: attr(data-label); flex: 0 0 38%; max-width: 45%; text-align: left;
    font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px;
  }
  .tbl.as-cards td[data-label=""]::before { display: none; }
  .tbl.as-cards td[data-label=""] { justify-content: flex-end; flex-wrap: wrap; }
  .tbl.as-cards td:empty { display: none !important; }
  .tbl.as-cards .col-hide-mob { display: none !important; }
  .tbl.as-cards tr:hover { background: #fff; }
  .table-wrap:has(> .tbl.as-cards) { overflow-x: visible !important; border: 0; background: transparent; box-shadow: none; }

  /* Tables that must stay tables: visible scrollbar + hint */
  .table-wrap::-webkit-scrollbar { height: 8px; }
  .table-wrap::-webkit-scrollbar-thumb { background: #b98a9c; border-radius: 4px; }
  .table-wrap { scrollbar-width: thin; scrollbar-color: #b98a9c transparent; }
  .table-wrap.has-scroll::after {
    content: "⇄ Telezesha kulia/kushoto kuona safu zote"; display: block; position: sticky; left: 0;
    width: calc(100vw - 40px); text-align: center; font-size: 11px; color: #6b6469; padding: 6px 0;
  }
  .table-wrap:has(> .tbl.as-cards)::after { display: none !important; }
}

/* ═══ v3: invoice preview table (.inv-items-tbl) — Particulars was squeezed to 1 letter per line ═══ */
@media screen and (max-width: 768px) {
  .inv-items-tbl:not(#invItemsTbl):not(#editItemsTbl) { width: 100%; table-layout: auto; word-break: normal; }
  .inv-items-tbl:not(#invItemsTbl):not(#editItemsTbl) th { width: auto !important; padding: 6px 5px; font-size: 11px; }
  .inv-items-tbl:not(#invItemsTbl):not(#editItemsTbl) td { padding: 4px 5px; font-size: 12px; word-break: normal; }
  .inv-items-tbl:not(#invItemsTbl):not(#editItemsTbl) th:nth-child(2),
  .inv-items-tbl:not(#invItemsTbl):not(#editItemsTbl) td:nth-child(2) { min-width: 120px; overflow-wrap: break-word; }
  /* "Cts." column is always 00 — hide it on phones to give Particulars room */
  .inv-items-tbl:not(#invItemsTbl):not(#editItemsTbl) th:nth-child(5),
  .inv-items-tbl:not(#invItemsTbl):not(#editItemsTbl) td:nth-child(5) { display: none; }
}