/* ============================================================
   Khadamat OS — mobile.css
   Site-wide mobile-usability layer, loaded AFTER theme.css in
   every module. Screen-only and defensive: it never changes
   desktop rendering or print documents.

   Fixes the three things that break modules on phones:
   1) Wide tables overflowing the viewport (forces the Android
      WebView to zoom the whole page out) → tables scroll
      horizontally inside their own box instead.
   2) Sub-44px touch targets on buttons/inputs.
   3) Media/embeds wider than the screen.
   ============================================================ */

@media screen and (max-width: 768px) {

  /* --- 1. Contain horizontal overflow ---------------------- */
  html, body {
    overflow-x: clip;
    overflow-x: hidden; /* fallback where clip unsupported */
    max-width: 100vw;
  }

  /* Any data table scrolls within itself instead of widening
     the page. Momentum scrolling for a native feel. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* (Row groups stay at their default display so the browser wraps
     them in one anonymous table box — column alignment is preserved.) */

  /* Media never wider than the screen */
  img, video, canvas, iframe, embed, object { max-width: 100%; }
  img, video { height: auto; }

  /* --- 2. Touch targets (44px Apple HIG / 48dp Material) ---- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* also prevents focus auto-zoom */
  }
  textarea { min-height: 66px; }

  button, .btn, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 42px;
  }
  /* Compact chips/tags/icon buttons keep their design but get a
     comfortable minimum */
  [class*="chip"], [class*="tag"], [class*="pill"] { min-height: 34px; }

  /* Slightly roomier rows in dense data tables */
  td, th { padding-top: 8px; padding-bottom: 8px; }

  /* --- 3. Forms & dialogs ----------------------------------- */
  /* Any dialog/modal caps to the viewport with breathing room */
  [class*="modal"], [class*="dialog"], [class*="sheet"], dialog {
    max-width: calc(100vw - 21px) !important;
  }

  /* Multi-column form grids collapse to one column (golden-ratio
     gutter). Covers the common .g2/.g3/.g4/.grid2/.fgrid patterns. */
  .g2, .g3, .g4, .grid2, .grid3, .fgrid, .form-grid {
    grid-template-columns: 1fr !important;
    gap: 13px;
  }

  /* --- 4. Typography guard ---------------------------------- */
  /* Stop the WebView/browser from inflating text unevenly */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}

/* Very small phones: tighten page gutters (Fibonacci 13px) */
@media screen and (max-width: 420px) {
  .wrap, .container, .page-wrap, main { padding-left: 13px; padding-right: 13px; }
}

/* Never interfere with printed documents (quotations, ledgers…) */
@media print {
  table { display: table; overflow: visible; }
}

/* In-app chrome cleanup (html.khd-app is set by the Android app on every
   page it loads). The app has its own back navigation and follows the
   system theme, so the floating theme toggle and Home/Logout links are
   redundant noise there. Keep in sync with the app's assets/khd_mobile.css. */
html.khd-app #khd-theme-btn { display: none !important; }
html.khd-app #homeLink { display: none !important; }
html.khd-app a[href="/"][id*="home" i], html.khd-app [id*="logout" i],
html.khd-app [onclick*="logout" i] { display: none !important; }

html.khd-app header .btn, html.khd-app .topbar .btn, html.khd-app nav .btn,
html.khd-app header button, html.khd-app .topbar button {
  min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: 13px;
}
html.khd-app h1 { font-size: 21px; }
html.khd-app h2 { font-size: 17px; }