/*
  Lovix CRM — mobile responsive shim.
  Purely additive: every rule is wrapped in a max-width media query, so it
  has zero effect on desktop. Loaded after lovix-stable-system.css so it
  can win the cascade with !important where needed to beat inline styles
  set by the compiled app bundle.

  Root causes fixed here (found by inspecting the live app at 375px width):
  1. --lovix-content-gutter was a fixed clamp(80px,5.5vw,112px) side padding
     used everywhere as page gutter -> ate ~40% of a phone screen width.
  2. Many dashboard cards use inline `grid-template-columns` with fixed px
     tracks (e.g. "minmax(0,1.65fr) minmax(360px,0.95fr)") meant for desktop
     -> on narrow screens the fr column collapses to 0 and CJK text wraps
     one character per line, while the fixed column overflows off-screen.
  3. The left icon rail (<aside>) expands from 64px to 248px on :hover via
     an inline width style. Touch taps can trigger a stuck "hover" state,
     turning the rail into a near-full-width overlay that hides the page.
*/

@media (max-width: 860px) {
  :root {
    --lovix-content-gutter: 16px !important;
  }

  /* Login screen: .auth-card is a 2-row grid — .auth-visual (logo +
     marketing tagline, ~360px) stacked above .auth-form-wrap (the actual
     email/password/submit form, ~630px). Combined they're taller than a
     phone viewport, so the submit button sits below the fold and only
     scrolls into view after the on-screen keyboard shoves everything up
     (which reads as "broken" — you have to mis-tap first to find it).
     Drop the marketing tagline (.auth-copy) but keep the small brand
     mark (.auth-brand) so the login screen still reads as Lovix, and the
     whole card comfortably fits in one screen. */
  .auth-copy {
    display: none !important;
  }
  .auth-shell {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* Tighten the form's own vertical rhythm too — on short phones
     (e.g. iPhone SE, 667px tall) dropping .auth-copy alone still isn't
     quite enough headroom for the submit button to clear the fold. */
  .auth-form-wrap {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }
  .auth-form-wrap form {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }
  .auth-form-wrap form > h1 {
    margin-top: 8px !important;
  }
  .auth-form-wrap form > .field {
    margin-top: 10px !important;
  }
  /* "Lovix secure workspace" helper line under the password field is
     decorative, not functional — drop it on mobile to reclaim space. */
  .auth-form-wrap form > .helper {
    display: none !important;
  }
  .auth-form-wrap form > button {
    margin-top: 12px !important;
  }
  .auth-form-wrap form > .footnote {
    margin-top: 0 !important;
  }

  /* Never let a fixed-width desktop block force horizontal overflow. */
  main, main * {
    max-width: 100% !important;
  }

  /* Tailwind min-w-[Npx] utilities (search bars, filter rows, etc.) also
     force overflow on narrow screens — neutralize them here. */
  main [class*="min-w-"] {
    min-width: 0 !important;
  }

  /* Collapse any desktop multi-column grid (inline-styled or class-based)
     to a single column so cards stack instead of overflowing/squishing. */
  main [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  main .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Header: tighter padding, and hide the English CTA subtitle so the
     "New Outreach" button stops wrapping across itself. */
  header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header button span.opacity-70 {
    display: none !important;
  }
  header button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
  }

  /* Replace the desktop left icon rail with a bottom tab bar (built by
     lovix-mobile-bottom-nav-runtime.js). The rail is a hover-to-expand
     desktop pattern: even pinned at 64px it permanently eats ~17% of a
     phone's width for a nav that's used occasionally, and its expandable
     groups ("公司总库", "重点名单") are hover-driven — a touch tap can get
     them stuck open with invisible labels, leaving a tall dead click zone.
     Hide it outright on mobile; `main` is already `flex-1` in the same
     flex row, so it reclaims the freed width automatically. */
  aside.sticky {
    display: none !important;
  }

  /* Slide-in drawers ("New Outreach", record detail panels, etc.) are
     desktop-width fixed asides. On mobile, make them fill (almost) the
     full screen instead of a fixed px width so their contents can lay
     out normally instead of wrapping character-by-character. */
  aside.fixed {
    width: 100vw !important;
    max-width: 100vw !important;
    /* Sit above the app's sticky header (z-[80]) so a full-width mobile
       drawer isn't overlapped by the header bar behind it. */
    z-index: 200 !important;
  }

  /* Reserve room at the bottom of the page so the fixed bottom tab bar
     never covers the last bit of content. */
  main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The dashboard hero has a floating "continue scrolling" hint button
     (.lovix-scroll-trigger, position:absolute near the bottom of the
     hero block). It was positioned assuming nothing else sits at the
     bottom of the screen; now the fixed bottom tab bar lives there too,
     so the two visually collide (looks like a stray white circle sitting
     on top of a tab). The bottom bar itself is a permanent, obvious way
     to navigate on mobile, so the hint is redundant here — hide it. */
  .lovix-scroll-trigger {
    display: none !important;
  }

  /* Dashboard hero stat pair (Countries / Total Leads) is an inline
     2-column grid ("104px 1fr") with the 2nd stat carrying a hardcoded
     left border + 78px left padding — that's a vertical divider meant
     to sit between two SIDE-BY-SIDE columns. Once our earlier `main .grid`
     rule stacks it into a single column, that leftover divider styling
     just shoves the second stat block 78px to the right of the first
     one instead of aligning flush, which reads as broken/misaligned. */
  .world-map-hero [style*="border-left"] {
    padding-left: 0 !important;
    border-left: none !important;
  }

  /* Page-header pattern (seen on 公司总库/Account Hub and reused
     elsewhere): the title row reserves 220px of right padding for a
     small absolutely-positioned "Live" status pill anchored to the
     header's bottom-right corner. On desktop that's fine; on a 375px
     phone that 220px reservation leaves almost no room for the title,
     squeezing it into a couple of characters. Free that space and drop
     the now-crowded pill (it's secondary status info, not needed to use
     the page). */
  main [class*="pr-[220px]"] {
    padding-right: 16px !important;
  }
  main [class*="pr-[220px]"] + [class*="absolute"][class*="max-w-[220px]"] {
    display: none !important;
  }

  /* Upstream bug (not ours): lovix-stable-system.css has two conflicting
     `@media(max-width:1280px)` rules for `.lvtt-board` (Today Tasks page
     timeline layout) — an early one correctly collapses it to a single
     column, but a later "v234 final polish" patch re-adds a fixed 300px
     second column and wins the cascade by being declared later. That
     brings back the exact "column collapses to 0, CJK text wraps one
     character per line" failure on phones. Re-assert the single column
     here, after both of theirs, so it wins. */
  .lvtt-page .lvtt-board {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Same upstream patch also force-sets the timeline column to a literal
     300px width directly on the element, independent of the grid track —
     that alone is enough to keep it pinned wide even once the grid is a
     single column, so it needs neutralizing too. */
  .lvtt-page .lvtt-timeline {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- Bottom tab bar + "More" sheet (built by the JS runtime) ---- */
  .lvx-mobile-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    align-items: stretch;
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid #E5E5E3;
    box-shadow: 0 -8px 24px rgba(18,18,18,0.06);
  }
  .lvx-mobile-bottombar a,
  .lvx-mobile-bottombar button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: none;
    font-size: 10px;
    color: #8A8A86;
    font-family: inherit;
    padding: 0;
  }
  .lvx-mobile-bottombar a svg,
  .lvx-mobile-bottombar button svg {
    width: 20px;
    height: 20px;
  }
  .lvx-mobile-bottombar a.lvx-active {
    color: #1A1A18;
  }
  .lvx-mobile-bottombar a.lvx-active svg {
    stroke-width: 2.25;
  }

  .lvx-mobile-more-sheet {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: #fff;
    display: none;
    flex-direction: column;
  }
  .lvx-mobile-more-sheet.lvx-open {
    display: flex;
  }
  .lvx-mobile-more-sheet__header {
    height: 56px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid #E5E5E3;
    font-size: 15px;
    font-weight: 600;
  }
  .lvx-mobile-more-sheet__header button {
    border: none;
    background: none;
    font-size: 20px;
    line-height: 1;
    padding: 8px;
  }
  .lvx-mobile-more-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0 24px;
  }
  .lvx-mobile-more-sheet__group-label {
    padding: 14px 16px 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #9A9A96;
    text-transform: uppercase;
  }
  .lvx-mobile-more-sheet a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 15px;
    color: #1A1A18;
    text-decoration: none;
  }
  .lvx-mobile-more-sheet a svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #6B6B67;
  }
  .lvx-mobile-more-sheet a.lvx-sub {
    padding-left: 40px;
    font-size: 14px;
    color: #4A4A46;
  }
}