/*
 * Mobile responsive overrides for landing + customer dashboard.
 *
 * The app uses inline-style grids almost everywhere. Inline styles always
 * win over external CSS, so to override a `gridTemplateColumns: '1fr 1.2fr'`
 * we have to use `!important`. The classes here mark elements that should
 * collapse to a single column or smaller layout on narrow screens.
 *
 * Breakpoints:
 *   ≤ 760px  →  tablet portrait + phone (single column, smaller spacing)
 *   ≤ 480px  →  phone (extra-compact)
 *
 * Admin views deliberately not targeted — admin assumes a desktop browser
 * for tables, modals, etc.
 */

/* === Universal mobile: stack any grid that opts in via .stack-on-mobile === */
@media (max-width: 760px) {
  .stack-on-mobile {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .stack-on-mobile-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Reduce side padding everywhere; 32px / 48px wastes screen on phones. */
  .responsive-page {
    padding: 16px !important;
  }

  /* Hero / large headings shrink so they don't wrap into 5 lines. */
  .responsive-hero h1, .responsive-hero h2 {
    font-size: clamp(28px, 9vw, 44px) !important;
    line-height: 1.1 !important;
  }
  .responsive-hero p {
    font-size: 15px !important;
  }

  /* Sidebar — turn the customer dashboard sidebar into a horizontal tab
     strip across the top. The container is a 2-col grid (sidebar + main);
     collapse to 1 col so they stack vertically. */
  .responsive-app-shell {
    grid-template-columns: 1fr !important;
  }
  .responsive-sidebar {
    /* Stop being a column. Become a horizontal scrollable tab bar pinned
       to the top so navigation is always one thumb-tap away. */
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 8px 12px !important;
    gap: 4px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--bg-1) !important;
    align-items: center !important;
    /* Hide the WebKit scrollbar — looks ugly in this context. */
    scrollbar-width: none;
  }
  .responsive-sidebar::-webkit-scrollbar { display: none; }
  .responsive-sidebar > * {
    flex-shrink: 0 !important;
  }
  /* Hide the sidebar's logo header (we have one in the topbar already)
     and the bottom-glued plan card / sign out. The plan card with its
     progress bar doesn't fit horizontally; the sign-out button moves
     to the user-avatar area in TopBar instead. */
  .responsive-sidebar > div:first-child,
  .responsive-sidebar > div:last-child {
    display: none !important;
  }
  /* The middle div (the actual nav buttons) needs to flow horizontally too. */
  .responsive-sidebar > div:nth-child(2) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .responsive-sidebar button {
    /* Tighter padding; full label still readable but takes less width. */
    padding: 7px 11px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Top bar — slim down padding, allow the user info to compress. */
  .responsive-topbar {
    padding: 0 16px !important;
    height: 52px !important;
  }
  /* Hide the username/plan text on small screens — avatar + buttons are enough. */
  .responsive-topbar .topbar-userinfo {
    display: none !important;
  }

  /* Modal — fill the screen on mobile rather than centering with a fixed width. */
  .responsive-modal {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: 92vh !important;
    padding: 16px !important;
  }

  /* Tables in the customer dashboard horizontally scroll inside their
     container instead of forcing the page to scroll. The .responsive-scroll
     wrapper is what should be applied to the parent of any wide table.  */
  .responsive-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stats card rows on landing — vertical dividers between columns become
     horizontal dividers between stacked rows. The original border-right
     inline style still applies but is now invisible (no right neighbor in
     a single-column flow). */
  .stats-card-row .stats-card {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .stats-card-row .stats-card:last-child {
    border-bottom: none;
  }

  /* Auth screens — collapse the 2-col split into a single column,
     hide the marketing side-panel, and tighten form padding. */
  .auth-shell {
    grid-template-columns: 1fr !important;
  }
  .auth-form-col {
    padding: 20px !important;
  }
  .auth-side-panel {
    display: none !important;
  }

  /* Cards inside .responsive-page that use big internal padding (32px+)
     get tightened so content isn't squeezed into a tiny center column on
     phones. Targets only direct .card descendants since smaller nested
     cards usually already have appropriate padding. */
  .responsive-page > .card,
  .responsive-page > div > .card {
    padding: 20px !important;
  }

  /* Landing nav — hide the middle anchor links and tighten the bar so the
     logo + sign-in/signup buttons fit on a phone without overflowing. */
  .landing-nav {
    padding: 12px 16px !important;
  }
  .landing-nav-links {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .stack-on-mobile-2 {
    grid-template-columns: 1fr !important;
  }

  /* Buttons + inputs full-width by default to avoid awkward half-row layouts. */
  .responsive-form .btn,
  .responsive-form input,
  .responsive-form select {
    width: 100% !important;
  }

  /* Even tighter padding on actual phones. */
  .responsive-page {
    padding: 12px !important;
  }

  /* Avatar shrinks slightly. */
  .responsive-topbar .topbar-avatar {
    width: 28px !important;
    height: 28px !important;
  }
}