/* ===========================================================================
 * BuyShip.jp - mobile.css  (small-screen behaviour)
 * ---------------------------------------------------------------------------
 * Loaded after default.css. Turns the sidebar into a slide-in drawer and shows
 * a fixed bottom navigation with large touch targets on phones/tablets.
 * =========================================================================== */

@media (max-width: 880px) {
  :root { --sidebar-w: 270px; }

  /* Sidebar becomes an off-canvas drawer toggled by .menu-toggle */
  .app-body { position: relative; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 40;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
    /* The fixed bottom nav overlaps the drawer's lower edge; pad the scroll area so the
       last items (Logout, Language) can scroll up clear of it instead of hiding behind it. */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: none; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 35;
    background: rgba(17, 24, 39, .4);
  }
  body.sidebar-open .sidebar-backdrop { display: block; }

  .content { padding: 16px; padding-bottom: 88px; } /* room for bottom nav */
  .content > .page-header { margin-bottom: 14px; }
  .content > .page-header h1 { font-size: 1.3rem; }

  /* Forms/comparison go full width; dashboard stats stay 2-up (tidy, less scroll).
     minmax(0, …) not plain 1fr: a bare 1fr track has an implicit min of its content
     width, so ONE wide child (e.g. a table) stretches the whole column past the screen
     and the page zooms out. minmax(0,…) lets the track shrink to the viewport and makes
     wide children scroll within their own card instead. */
  .grid { gap: 12px; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 14px; }
  .stat .value { font-size: 22px; }

  /* Topbar: keep ONE tidy row. Only hamburger + logo + wallet stay; member ID,
     language, account & logout move into the slide-in drawer. */
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar .topbar-actions { gap: 6px; min-width: 0; }
  .tb-hide-mobile { display: none !important; }
  .sidebar-mobile-only { display: block; }

  /* Give the logo a fixed slot that never shrinks, so it can't be clipped by the
     brand's overflow when the actions are wide. The wallet chip is the only action
     left on mobile and it holds its size; nothing competes with the logo now. */
  .menu-toggle { flex: 0 0 auto; }
  .topbar .brand { flex: 0 0 auto; min-width: 0; }
  .topbar .brand .brand-logo { height: 28px; max-width: 150px; }
  .topbar .brand .logo-mark { flex: 0 0 auto; }
  .wallet-chip { flex: 0 0 auto; }
  .wallet-chip .wallet-amt { padding: 5px 8px 5px 10px; }

  /* Bottom navigation */
  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 4px env(safe-area-inset-bottom, 6px);
    justify-content: space-around;
  }
  .mobile-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; color: var(--muted); font-size: 11px; font-weight: 600; min-height: 52px;
    /* Top-align so every icon sits on the same line even when a label wraps to
       two rows (e.g. "Points ledger") — otherwise that item's icon rides higher. */
    justify-content: flex-start;
  }
  .mobile-nav a.active { color: var(--primary-color); }
  .mobile-nav a svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .mobile-nav a span { text-align: center; line-height: 1.15; }

  .menu-toggle { display: inline-flex; }

  /* Larger touch targets */
  .btn { min-height: 46px; }
  .table th, .table td { padding: 12px 10px; }

  /* Declared-items / customs editors: stack each row's cells on small screens so
     the wide multi-column table never forces page-level horizontal scrolling
     (which would otherwise slide the fixed topbar sideways). Each cell shows its
     column name from data-label. */
  .decl-table, .decl-table tbody { display: block; }
  /* The desktop editor sets an inline min-width (e.g. 820px) so its columns line up;
     once stacked into full-width cards that min-width would force needless sideways
     scrolling, so drop it on mobile. */
  .decl-table { min-width: 0 !important; }
  .decl-table thead { display: none; }
  .decl-table tr { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
  .decl-table td { display: block; width: auto !important; padding: 4px 0; border: none; }
  .decl-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
  .decl-table td[data-label=""]::before, .decl-table td:not([data-label])::before { content: none; }
}

@media (min-width: 881px) {
  .menu-toggle { display: none; }
  .sidebar-backdrop { display: none; }
}