/* ══════════════════════════════════════════════════════════════════════
   mobile.css — phone & foldable layer for iPon Tracker
   ----------------------------------------------------------------------
   CONTRACT: this file must NEVER change the desktop site. Every rule lives
   inside a max-width media query, so at ≥992px (the desktop breakpoint, the
   same point the navbar stops collapsing) nothing here applies and the page
   renders byte-for-byte as before.

   It is linked LAST in base.html <head>, after each page's own <style>, so
   these overrides win on equal specificity. Fixed inline widths/sizes are
   overridden with !important where needed.

   Tiers
     ≤ 991.98px  — everything below desktop: phones, small tablets, and the
                   foldable INNER (unfolded ~700–840px, near-square) screen.
     ≤ 575.98px  — portrait phones (and foldable cover screens).
     ≤ 400px     — narrow foldable COVER screen, tightest layout.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   TIER 1 — ≤ 991.98px : tablet / foldable-unfolded / phone shared base
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* ── Page gutters ──────────────────────────────────────────────────
     The app content wrapper is `container-fluid px-4` (1.5rem each side),
     which wastes ~48px on a phone. Tighten it (Bootstrap's px-4 is
     !important, so we must be too). */
  .app-main .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── Centred page title ────────────────────────────────────────────── */
  .page-head { margin-bottom: 1.1rem; }

  /* ── Top navbar hidden on mobile ───────────────────────────────────
     The bottom tab bar (below) is the ONLY navigation on phones/foldables,
     so the desktop top navbar is removed here. A little top breathing room
     replaces the bar that used to sit above the content. */
  .app-nav { display: none !important; }
  .app-main { padding-top: .6rem; }

  /* ── Mobile bottom tab bar ─────────────────────────────────────────
     Fixed primary-nav strip, glass-matched to the top nav, with a
     safe-area inset for the iPhone/Android home indicator. The element
     carries d-lg-none, so it (and this styling's effect) never reach the
     desktop layout. */
  .mobile-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
  [data-bs-theme="dark"] .mobile-tabbar {
    background: rgba(20,20,32,.88);
    border-top: 1px solid rgba(205,214,244,.10);
    box-shadow: 0 -6px 24px rgba(0,0,0,.30);
  }
  [data-bs-theme="light"] .mobile-tabbar {
    background: rgba(239,241,245,.94);
    border-top: 1px solid rgba(172,176,190,.4);
    box-shadow: 0 -2px 16px rgba(76,79,105,.10);
  }
  .mobile-tabbar .mtab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: .7rem;
    text-decoration: none;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ctp-subtext0, #6c6f85);
    transition: color .15s, background .15s, transform .1s;
  }
  .mobile-tabbar .mtab i { font-size: 1.2rem; line-height: 1; }
  .mobile-tabbar .mtab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-bs-theme="dark"] .mobile-tabbar .mtab { color: rgba(205,214,244,.72); }
  .mobile-tabbar .mtab.active { color: #1e66f5; background: rgba(30,102,245,.10); }
  [data-bs-theme="dark"] .mobile-tabbar .mtab.active { color: #89b4fa; background: rgba(137,180,250,.14); }
  .mobile-tabbar .mtab:active { transform: scale(.94); }

  /* "More" tab — a button that opens an upward dropdown of everything not in
     the bar (currency, language, theme, account, Telegram, admin). */
  .mobile-tabbar .mtab-more-wrap { flex: 1 1 0; min-width: 0; position: relative; display: flex; }
  .mobile-tabbar .mtab-more-wrap > .mtab-more { width: 100%; }
  .mobile-tabbar button.mtab { background: transparent; border: 0; font-family: inherit; cursor: pointer; }
  .mobile-more-menu {
    min-width: 13rem;
    max-height: 72vh;
    overflow-y: auto;
    border-radius: .9rem;
    box-shadow: 0 -10px 34px rgba(0,0,0,.28);
  }
  .mobile-more-menu .dropdown-item { padding-top: .5rem; padding-bottom: .5rem; }

  /* Reserve space so the fixed bar never covers page content or the footer. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* ── Filter panel (deals + products) ───────────────────────────────
     A tall sticky filter eats the screen on a phone, so unstick it and
     tighten its padding. The cloned floating table header (a fixed element)
     is meaningless once the filter no longer sticks — hide it. */
  .filter-glass {
    position: static !important;
    padding: .85rem .9rem !important;
  }
  .gt-float { display: none !important; }

  /* The result-count + view controls row: let it breathe and centre. */
  .filter-glass .ms-auto { margin-left: 0 !important; }

  /* ── Wishlist wide table ────────────────────────────────────────────
     10 columns won't fit a phone. Drop the lower-value columns (Category,
     Last scraped) so the rest fits, keeping Price/Saving/Discount, and skip
     the desktop sticky-header clone on mobile (alignment isn't worth it on a
     short list). */
  .glass-table th:nth-child(3), .glass-table td:nth-child(3),    /* Category     */
  .glass-table th:nth-child(9), .glass-table td:nth-child(9) {   /* Last scraped */
    display: none;
  }
  #sticky-col-header-wishlist { display: none !important; }

  /* ── Dashboard data tables (admin) ─────────────────────────────────
     Recent-changes / biggest-drops / new-products tables aren't wrapped in
     .table-responsive and their card clips overflow, so let a too-wide table
     scroll inside its own card instead of being cut off, and keep price
     figures on one line. (:has targets only the table card bodies, leaving
     the form/status card bodies untouched.) */
  .dash-card .card-body:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dash-card td[data-price] { white-space: nowrap; }

  /* ── Footer ─────────────────────────────────────────────────────── */
  .app-footer { margin-top: 2.75rem; padding: 2rem 1rem 1.75rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   TIER 2 — ≤ 575.98px : portrait phones & foldable cover screens
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {

  /* ── Page gutters: tighter still ───────────────────────────────────── */
  .app-main .container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  /* ── Card grids → always two columns on a phone ────────────────────
     The desktop grid is auto-fill minmax(--card-min,1fr); with a 200px+
     min it collapses to ONE giant column on a phone. Force a tidy 2-up
     and pin the card text size so a card-size slider value carried over
     from desktop can't blow the type up inside the narrow cards. */
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .55rem !important;
  }
  .card-grid .prod-card,
  .card-grid .deal-card { font-size: .95rem !important; }

  /* ── Category tiles → two columns filling the width ────────────────
     Desktop uses fixed 190px flex tiles centred with side gutters; on a
     phone that leaves wasted margins, so fill the width 2-up. */
  .cat-tile-grid { gap: .55rem !important; }
  .cat-tile-grid .cat-tile { width: calc(50% - .275rem) !important; }

  /* The card-size slider isn't useful at this width — reclaim the space. */
  .card-size-wrap { display: none !important; }

  /* ── Deals hero carousel ───────────────────────────────────────────
     Narrower fixed cards so more than one peeks in; neutralise any saved
     zoom so the carousel can't render oversized on a phone. */
  .deal-carousel .deal-card,
  .carousel-end-card {
    flex: 0 0 160px !important;
    width: 160px !important;
    zoom: 1 !important;
  }
  /* The card's zoom is pinned to 1 above, but --card-zoom still carries the saved
     desktop value — so the heart's zoom-cancelling rule would shrink it here.
     The card isn't zoomed, so there is nothing left to cancel. */
  .deal-carousel .deal-card-fav { zoom: 1 !important; }
  .carousel-end-card { min-height: 210px; }
  /* Swipe is the natural gesture here — drop the desktop hover arrows. */
  .carousel-arrow { display: none !important; }

  /* ── Glass column "table" (list view) ──────────────────────────────
     Tighten the row padding and thumbnail so the remaining columns fit. */
  .gtable-head, .gtable-row { padding-left: .6rem !important; padding-right: .6rem !important; gap: .5rem !important; }
  .gt-thumb { width: 40px; height: 40px; }
  .gt-thumb img { width: 36px; height: 36px; }

  /* ── Wishlist: also drop the Notifications column; tighten cells ───── */
  .glass-table th:nth-child(7), .glass-table td:nth-child(7) { display: none; }
  .glass-table thead th, .glass-table tbody td { padding: .55rem .5rem; }

  /* ── Filter controls → clean single-column stack ───────────────────
     On desktop the filter is a horizontal row of col-sm-* / col-sm-auto
     fields. Below the `sm` breakpoint those become ragged content-width
     items that wrap unpredictably. Stack every filter column full-width so
     the panel reads as a tidy vertical form. (The non-stacked multi-column
     layout is kept for the 576–991px foldable/tablet tier above.) */
  .filter-glass .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* ── Quick-filter chips: let them breathe vertically ───────────────── */
  .filter-chip { padding: .3rem .65rem; }

  /* ── Landing tweaks (it is already responsive; only minor polish) ──── */
  .lp-cta-row .lp-btn { flex: 1 1 auto; justify-content: center; }

  /* ── Scraper config: category pills 2-up (were 3-up, too cramped) ──── */
  form[hx-post="/api/scraper-config"] .row > .col-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* ── Scraper log terminal: drop the wide logger column so the message
     gets the room, and tighten the type. ─────────────────────────────── */
  .log-terminal { font-size: .66rem; }
  .log-terminal .log-logger { display: none; }
  .log-terminal .log-lvl { width: 3.4rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   TIER 3 — ≤ 400px : narrow foldable COVER screen (tightest)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {

  .app-main .container-fluid {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
  }

  /* Two columns still, just less air between them. */
  .card-grid { gap: .45rem !important; }

  /* Shrink the product-detail gallery so it never crowds a ~340px screen.
     The gallery is a flex column inside a grid area (min-height, not height,
     and flex:1 1 0 thumbs), so cap the height and let the width follow the
     column — the old fixed 150px width fought the layout and lost. */
  .prod-gallery-main { min-height: 0; height: 170px; }
  .prod-gallery-thumb { height: 54px; }

  /* Landing hero: rein in the fluid type's lower bound on a tiny screen. */
  .lp-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .lp-wrap { padding-inline: 1rem; }
}
