/* ============================================================
   Dourak — PWA Responsive (MOBILE + TABLET ONLY)
   IMPORTANT: All rules are inside @media (max-width: 1194px)
   so Desktop (>1194px / ≥1280) remains 100% unchanged.
   Tablet coverage: 481-1024 + 1025-1194 for large iPads.
   Mobile-first variables.css + app.css stay untouched.
   ============================================================ */

/* ------------------------------------------------------------
   0 — Global safety for Mobile+Tablet (≤1024px)
   Prevent horizontal scroll, ensure box model, safe viewport
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  html, body {
    overflow-x: clip;
    max-width: 100vw;
  }
  .pwa-body, .pwa-main, .c-screen, .c-hero,
  .c-shopcard, .c-bookingcard, .c-placecard,
  .c-service, .c-ticket, .c-livecard, .c-turn-card {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  img, canvas, video {
    max-width: 100%;
  }
}

/* ------------------------------------------------------------
   1 — Small phones: 320px — 374px
   Critical fixes for very narrow viewports
   ------------------------------------------------------------ */
@media (max-width: 374px) {
  .pwa-appbar-inner {
    padding-inline: var(--space-3);
    min-height: 56px;
    gap: var(--space-1);
  }
  .pwa-brand-name { font-size: 1.1rem; }
  .pwa-brand-tagline { font-size: 0.72rem; }
  .pwa-brand-mark { width: 26px; height: 26px; font-size: 0.9rem; }
  .pwa-icon-btn { width: 44px; height: 44px; font-size: 1.1rem; }

  .pwa-main {
    padding: var(--space-3);
    padding-bottom: calc(var(--space-6) + 96px + var(--safe-bottom));
  }
  .c-hero {
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0;
    padding: var(--space-3) var(--space-3) var(--space-4);
    border-radius: 0 0 20px 20px;
  }
  .c-hero-title { font-size: 1.25rem; }
  .c-hero-sub { font-size: 0.82rem; }
  .c-search-bar { height: 48px; font-size: 0.92rem; padding: 0 var(--space-3); }

  .c-shopcard, .c-bookingcard, .c-placecard, .c-empty, .c-favcard, .c-turn-card {
    padding: var(--space-3);
    border-radius: 18px;
  }
  .c-shopcard-mark { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 16px; }
  .c-shopcard-name { font-size: 1rem; }
  .c-bookingcard-main {
    flex-direction: column;
    align-items: stretch;
  }
  .c-bookingcard-number {
    min-width: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    padding: var(--space-2) var(--space-3);
  }
  .c-bookingcard-number-value { font-size: 1.5rem; }
  .c-eta-chip { min-width: 0; flex: 1 1 100%; }
  .c-service { padding: var(--space-3); gap: var(--space-3); }
  .c-service-icon { width: 40px; height: 40px; font-size: 1.15rem; }
  .c-service-name { font-size: 0.92rem; }
  .c-service-meta { flex-wrap: wrap; }

  /* Bottom tabbar compact for 320 */
  .c-tabbar {
    padding: 0 calc(var(--safe-left) + 4px) calc(var(--safe-bottom) + 4px) calc(var(--safe-right) + 4px);
    gap: 2px;
  }
  .c-tab { height: 56px; font-size: 0.68rem; border-radius: 14px; }
  .c-tab .bi { font-size: 1.15rem; }
  .c-tab-scan .bi {
    width: 48px; height: 48px; margin-top: -24px; font-size: 1.2rem; border-width: 3px;
  }
  .c-sheet-body { padding: var(--space-3) var(--space-3) calc(var(--space-4) + var(--safe-bottom)); }
  .btn-lg { height: 56px; font-size: 0.98rem; }
}

/* ------------------------------------------------------------
   2 — Standard & large phones: 375px — 480px
   Balance font, spacing, card width
   ------------------------------------------------------------ */
@media (min-width: 375px) and (max-width: 480px) {
  .pwa-main {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-6) + 96px + var(--safe-bottom));
  }
  .c-hero-title { font-size: 1.4rem; }
  .c-bookingcard-number { min-width: 96px; }
  .c-tab { font-size: 0.72rem; }
  .c-tab-scan .bi { width: 52px; height: 52px; }
}

/* Extra safety for all phones ≤480px: ensure no overflow */
@media (max-width: 480px) {
  .c-shopcard-stats, .c-ticket-progress {
    gap: var(--space-1);
  }
  .c-stat b { font-size: 0.95rem; }
  .c-stat span { font-size: 0.68rem; }
  .c-quick { gap: var(--space-2); }
  .c-quick-item { padding: var(--space-3); }
  .c-placecard-foot {
    flex-wrap: wrap;
  }
  .c-summary-row {
    flex-wrap: wrap;
  }
  .c-summary-row b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .c-ticket-actions {
    grid-template-columns: 1fr;
  }
  .c-ticket-actions .btn {
    width: 100%;
  }
  .c-search-filters {
    flex-wrap: wrap;
  }
  .c-filter-select { flex: 1 1 100%; }
}

/* ------------------------------------------------------------
   3 — Landscape phones (height ≤ 500px and width ≤ 926px)
   Reduce vertical chrome so content fits
   ------------------------------------------------------------ */
@media (max-width: 926px) and (max-height: 500px) and (orientation: landscape) {
  .pwa-appbar-inner { min-height: 52px; padding-block: var(--space-2); }
  .c-hero { padding: var(--space-3) var(--space-4) var(--space-3); }
  .c-hero-title { font-size: 1.2rem; }
  .c-hero-sub { margin-bottom: var(--space-1); }
  .pwa-main { padding-bottom: calc(var(--space-4) + 84px + var(--safe-bottom)); }
  .c-tabbar { padding-bottom: calc(var(--safe-bottom) + 4px); }
  .c-tab { height: 52px; }
  .c-tab-scan .bi { width: 44px; height: 44px; margin-top: -18px; }
}

/* ------------------------------------------------------------
   4 — TABLET: 481px — 1024px (Portrait + Landscape)
   Use available space: expand container, grid cards,
   keep desktop >1024 untouched
   ------------------------------------------------------------ */
@media (min-width: 481px) and (max-width: 1024px) {
  /* Expand main containers from 440px to fluid tablet widths */
  .pwa-appbar-inner,
  .pwa-switcher,
  .pwa-main,
  .snackbar {
    max-width: 720px;
  }
  .sheet {
    max-width: 720px;
  }
  /* Bottom tabbar matches main width but centered floating */
  .c-tabbar {
    max-width: 720px;
    padding-inline: calc(var(--safe-left) + var(--space-3)) calc(var(--safe-right) + var(--space-3));
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .pwa-appbar-inner,
  .pwa-switcher,
  .pwa-main,
  .snackbar {
    max-width: 840px;
  }
  .sheet {
    max-width: 720px; /* sheet stays narrower for readability */
  }
  .c-tabbar {
    max-width: 840px;
  }

  /* Grid utilization: services, placecards, quick actions */
  .c-quick {
    grid-template-columns: repeat(3, 1fr);
  }
  .c-home-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Services: 2-column grid on tablet */
  .c-stack .c-service,
  .c-screen .c-stack {
    /* keep stack but allow 2-col for specific sections */
  }
  /* Placecards / favsection: 2 columns */
  .c-favsection .c-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  /* Booking cards: side-by-side chips remain */
  .c-bookingcard-main {
    gap: var(--space-5);
  }
  /* Shopcard stats stay 3-col but more breathing room */
  .c-shopcard-stats {
    gap: var(--space-3);
  }
  .c-hero-title { font-size: 1.65rem; }
  .c-hero { padding: var(--space-5) var(--space-5) var(--space-5); }

  /* Business dashboard tablet grid */
  .c-biz-stats {
    grid-template-columns: repeat(4, 1fr);
  }
  .c-biz-queue-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .c-biz-actions {
    max-width: 520px;
    margin-inline: auto;
  }
}

/* Tablet portrait specific: iPad Mini 768x1024, iPad 810x1080 etc */
@media (min-width: 481px) and (max-width: 834px) and (orientation: portrait) {
  .c-hero { border-radius: 0 0 22px 22px; }
  .c-bookingcard { padding: var(--space-4); }
}

/* Tablet landscape: use even more columns where sensible */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .pwa-appbar-inner,
  .pwa-switcher,
  .pwa-main {
    max-width: 960px;
  }
  .c-tabbar { max-width: 960px; }
  .c-favsection .c-stack {
    grid-template-columns: repeat(3, 1fr);
  }
  .c-biz-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------
   5 — Prevent flex/grid overflow on all tablet widths
   Ensure cards never exceed container
   ------------------------------------------------------------ */
@media (min-width: 481px) and (max-width: 1024px) {
  .c-shopcard, .c-bookingcard, .c-placecard, .c-favcard,
  .c-service, .c-ticket, .c-livecard, .c-empty,
  .c-favhome, .c-notice, .c-sched-card, .c-turn-card {
    max-width: 100%;
  }
  .c-placecard-name, .c-placecard-sub, .c-shopcard-name,
  .c-bookingcard-shop, .c-service-name, .c-review-text {
    min-width: 0;
  }
  /* QR scan button stays centered, no overflow */
  .c-tab-scan .bi {
    margin-top: -28px;
  }
}

/* ------------------------------------------------------------
   6 — Foldables (Galaxy Z Fold 5 outer ~260-320, inner ~768)
   Ensure narrow outer still works — keep labels visible but compact
   ------------------------------------------------------------ */
@media (max-width: 320px) {
  .pwa-appbar-inner { padding-inline: var(--space-2); }
  .c-hero { margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); }
  .pwa-main { padding-inline: var(--space-2); }
  .c-tab span {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58px;
    display: block;
  }
  .c-tab { gap: 1px; }
  .c-tab-scan span { font-size: 0.65rem; }
}

/* ------------------------------------------------------------
   7 — Ensure inputs/search never overflow viewport
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .form-input, .form-select, .c-search-bar, .c-search-form .form-input {
    max-width: 100%;
  }
  .c-search-bar-text {
    font-size: 0.9rem;
  }
  .dialog {
    max-width: calc(100vw - var(--space-5) * 2);
  }
}

/* ------------------------------------------------------------
   8 — LARGE TABLET: 1025px — 1194px (iPad Pro landscape, etc)
   Covers CSS viewports where max-width:1024 does NOT apply
   e.g. 1180×820 and 1194×834. Extends tablet layout without
   touching Desktop ≥1280. Minimal duplication of tablet rules.
   ------------------------------------------------------------ */
@media (min-width: 1025px) and (max-width: 1194px) {
  /* Global safety for large tablets */
  html, body {
    overflow-x: clip;
    max-width: 100vw;
  }
  .pwa-body, .pwa-main, .c-screen, .c-hero,
  .c-shopcard, .c-bookingcard, .c-placecard,
  .c-service, .c-ticket, .c-livecard, .c-turn-card {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  img, canvas, video { max-width: 100%; }
  .form-input, .form-select, .c-search-bar, .c-search-form .form-input {
    max-width: 100%;
  }
  .dialog { max-width: calc(100vw - var(--space-5) * 2); }

  /* Expand containers — same hierarchy as tablet, not full-bleed */
  .pwa-appbar-inner,
  .pwa-switcher,
  .pwa-main,
  .snackbar {
    max-width: 980px;
  }
  .sheet {
    max-width: 720px; /* sheet stays narrower for readability */
  }
  .c-tabbar {
    max-width: 980px;
    padding-inline: calc(var(--safe-left) + var(--space-3)) calc(var(--safe-right) + var(--space-3));
  }

  /* Grid utilization — 3 cols for favsection, consistent with landscape tablet */
  .c-favsection .c-stack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
  .c-quick { grid-template-columns: repeat(3, 1fr); }
  .c-home-actions { grid-template-columns: repeat(2, 1fr); }
  .c-biz-stats { grid-template-columns: repeat(4, 1fr); }
  .c-biz-queue-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .c-biz-actions { max-width: 520px; margin-inline: auto; }
  .c-shopcard, .c-bookingcard, .c-placecard, .c-favcard,
  .c-service, .c-ticket, .c-livecard, .c-empty,
  .c-favhome, .c-notice, .c-sched-card, .c-turn-card {
    max-width: 100%;
  }
  .c-hero { padding: var(--space-5) var(--space-5) var(--space-5); }
  .c-hero-title { font-size: 1.65rem; }
  .c-bookingcard-main { gap: var(--space-5); }
}