/* ============================================================================
   MOBILE-LITE — loaded LAST so it wins. Two jobs:
   1) Tell users the full/primary experience is the web app on a laptop.
   2) A small, SAFE layer of mobile hygiene for the core screens (invoice, AI,
      photo/OCR, error-check). Every rule lives inside a mobile media query, so
      the desktop layout is never touched. Intentionally conservative — no
      aggressive grid/width overrides that could break the JS-generated forms.
   Breakpoint 900px matches the app's existing mobile switch (layout.css).
   ============================================================================ */

/* Laptop banner — hidden on desktop, shown only on mobile (above the tab strip). */
.mobile-only-banner { display: none; }

@media (max-width: 900px) {
  .mobile-only-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #0F766E, #0D9488);
    color: #fff;
    padding: 9px 12px;
    font-size: 11.5px;
    line-height: 1.42;
    position: sticky;
    top: 0;
    z-index: 31;
  }
  .mobile-only-banner .mob-ban-icon { font-size: 18px; flex: 0 0 auto; }
  .mobile-only-banner b { font-weight: 800; }

  /* Never let a phone scroll sideways. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* font-size 16px stops iOS from auto-zooming when a field is focused —
     the single highest-impact, lowest-risk mobile form fix. Width/layout of
     the fields is left exactly as the app renders it. */
  input, select, textarea { font-size: 16px; }

  /* Give modals more of the small screen (default is 40px/16px padding). */
  .tax-cal-overlay { padding: 14px 8px; }

  /* The native mobile pages (M3-M9: invoice list, wizard, contacts, expenses,
     report) are fixed overlays at z-index 1250-1265, while these modals sit at
     z-index 200 — so a modal opened FROM one of those pages rendered BEHIND it
     and the tap looked like it did nothing (caught on M5's "full card" button
     before anyone hit it). Lift any open modal above the mobile pages; the page
     stays behind, so closing the modal returns the user to the list. */
  body.bpro-mob-on .tax-cal-overlay.open { z-index: 1300; }

  /* Keep the modal close (✕) pinned and easy to tap on mobile, so a user can never
     get trapped in a modal — this fixes the photo/OCR window "can't exit" report. */
  .tax-cal-modal .tax-cal-head { position: sticky; top: 0; z-index: 3; }
  .tax-cal-close { min-width: 42px; min-height: 42px; font-size: 20px; }
}

/* On very narrow phones, stack the photo/OCR review fields (they render as a
   fixed 2-column grid). Scoped to that one modal only, so nothing else moves. */
@media (max-width: 560px) {
  #documentReaderModal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* A quieter, single-line note under the login/register card telling first-time
   visitors that the full experience lives on a computer. */
.auth-webapp-note {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.45;
  color: #0F766E;
  text-align: center;
}
.auth-webapp-note b { font-weight: 700; }

/* ============================================================================
   MOBILE SHELL FIXES (phones, logged-in — body.bpro-mob-on) — 2026-07-19
   The custom mobile shell (mobile-home.js) paints a FIXED top header (z-210),
   a pinned tab strip (z-205) and a bottom nav (z-210). The app's own modals and
   slide-in panels were authored with much lower z-index (90–200), so on a phone
   they open UNDERNEATH that chrome: the panel's top — and its ✕ close button —
   is hidden behind the header/strip. That is the single root cause behind BOTH
   reported bugs: the OCR window "freezing" (its close button sat under the
   header, so it felt trapped) and "the top of every block I open is cut off".
   Fix: while the shell is on, lift every overlay ABOVE the whole chrome
   (max chrome layer is the „მეტი" sheet at z-260) so its top is always reachable.
   Scoped to body.bpro-mob-on — the desktop/tablet layout is never touched.
   ============================================================================ */
body.bpro-mob-on .tax-cal-overlay,
body.bpro-mob-on .modal-overlay,
body.bpro-mob-on .ai-float-panel,
body.bpro-mob-on .worklist-panel,
body.bpro-mob-on .ai-check-panel {
  z-index: 400 !important;
}

/* The OCR reader is content-heavy (file picker + preview + review fields), so on
   a phone give it the whole screen and hug the top edge — the default 40px top
   padding used to push its head/✕ under the shell header. Scoped to the OCR modal
   only, so small confirm dialogs keep their compact centred look. */
@media (max-width: 900px) {
  body.bpro-mob-on #documentReaderModal { padding: 0 !important; align-items: stretch; }
  body.bpro-mob-on #documentReaderModal .tax-cal-modal { max-height: 100vh; border-radius: 0; }
}

/* Issue #1 — remove the „🤖 AI" tab from the TOP tab strip on phones. The AI
   assistant stays fully available from the bottom nav (robot) and the AI panel;
   this only declutters the top strip as requested. The tab itself still exists
   in the DOM (reachable from the „მეტი" sheet), so nothing is lost. */
@media (max-width: 900px) {
  .tabs-wrapper .tab-btn[data-tab="aicenter"] { display: none !important; }
}

/* The laptop banner is redundant once the custom shell is on (the shell already
   owns the top of the screen); behind the fixed header it was only dead space. */
body.bpro-mob-on .mobile-only-banner { display: none !important; }