/* ============================================================================
   mobile.css — Sitewide mobile polish for Joliez Agency
   Loaded automatically on every HTML page by _bootstrap.php.
   Purely additive: scoped to @media (max-width: …) so desktop is never touched.
   ============================================================================ */

/* ── Universal safeguards (apply at all sizes) ─────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
img, video, svg, canvas, iframe { max-width: 100%; height: auto; }
iframe { border: 0; }
img { display: block; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
/* prevent iOS auto-zoom on form focus by ensuring 16px+ */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=url], input[type=number], input[type=search], input[type=date],
input[type=datetime-local], input[type=time], textarea, select {
  font-size: max(16px, 1rem);
}

/* Make any data table that overflows scroll cleanly */
.jz-table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Hide forced horizontal scrollbars caused by stray inline widths */
html, body { max-width: 100%; }

/* ── Phone-first overrides (≤ 640px) ───────────────────────────────────── */
@media (max-width: 640px) {
  body {
    /* never let a page introduce horizontal scroll on a phone */
    overflow-x: hidden;
  }

  /* Tap targets: every link/button at least 44×44 (Apple HIG / WCAG) */
  a.btn, button, .btn, [role="button"], .as-btn, .pay-btn,
  .ad-quick-row, .nav-link, .sidebar a {
    min-height: 44px;
    line-height: 1.25;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* …unless they're inline within prose */
  p a, li a, td a, span a {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Stack any 2-3-4 column grids into one column */
  .row, .columns, .grid, .as-grid, .as-quick-grid,
  .ad-quick-grid, .bc-actions, .form-row, .form-grid {
    display: block !important;
  }
  .row > *, .columns > *, .grid > *, .as-grid > *, .as-quick-grid > *,
  .ad-quick-grid > *, .form-row > *, .form-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* respect explicit grid layouts where author already mobile-friendly */
  .grid-keep, .as-grid-keep { display: grid !important; }

  /* Forms stretch full width */
  input, select, textarea, .form-control {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Buttons: full-width by default in vertical stacks */
  form .btn, form button[type=submit], .actions .btn {
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }

  /* Tables: wrap in scroll container when they don't fit */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* When a table has card-style stacking (data-mobile-stack), let it stack */
  table[data-mobile-stack="1"] { display: table; white-space: normal; }

  /* Modals: full-screen feel */
  .modal, .as-modal, [class*="modal-"] {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .modal-dialog, .as-modal-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
  }

  /* Cards / panels: edge padding tightened */
  .card, .as-card, .panel, .invoice-doc, .container, .wrap, .bc-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-radius: 8px;
  }

  /* Hero / heading sizes don't blow off-screen */
  h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; line-height: 1.2; }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; line-height: 1.25; }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.3rem) !important; }

  /* Long words / URLs wrap */
  code, pre, .code { word-break: break-word; overflow-wrap: anywhere; }
  pre { overflow-x: auto; }

  /* Sticky/floating elements: keep within safe area */
  .sticky, [class*="sticky"], .floating, [class*="floating"] {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Topbars/sidebars — hide super wide chrome */
  .desktop-only, .hide-on-mobile { display: none !important; }
  .mobile-only, .show-on-mobile { display: block !important; }

  /* Auth pages: nicer centering */
  .login-wrap, .auth-wrap, .pii-wrap { padding: 16px !important; }

  /* Admin shell tweaks (_admin_shell.php) */
  .as-shell .as-sidebar { display: none !important; }
  .as-shell .as-layout { display: block !important; }
  .as-shell .as-main { padding: 14px !important; }
  .as-shell .as-topbar { padding: 10px 14px !important; }
  .as-shell .as-topbar .as-search { display: none !important; }

  /* Notification toast: don't cover whole screen */
  .notif-toast, .as-toast { max-width: calc(100vw - 24px) !important; left: 12px !important; right: 12px !important; }

  /* Site-wide dropzone overlay text smaller */
  .site-dropzone-overlay h2 { font-size: 1.2rem; }

  /* Invoice view tweaks (the page we worked on) */
  .invoice-doc { box-shadow: none !important; }
  .invoice-doc .invoice-header { flex-direction: column; gap: 12px; }
  .pdf-action span { display: none; }  /* icon-only on phones */

  /* AI / message-center: full-width composer */
  .message-composer, .ai-composer { width: 100% !important; }
}

/* ── Tablet/landscape phone (641–900px) ────────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  .as-shell .as-sidebar { width: 220px !important; }
  .as-shell .as-main { padding: 18px !important; }
}

/* ── Print: hide mobile-only/sticky chrome ─────────────────────────────── */
@media print {
  .no-print, .inv-mobile-paybar, .site-dropzone-overlay,
  .notif-toast, .as-toast, [class*="sticky"] { display: none !important; }
}

/* ── Dark-mode awareness for inputs (system pref) ──────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Don't force dark on the whole site (it has its own theme system),
     but make sure system-styled native controls are readable. */
  input::placeholder, textarea::placeholder { color: rgba(0,0,0,.55); }
}