/* ---------------------------------------------------------------------------
   QREP dashboard mobile overlay — additive only.

   Contract (see AGENTS.md scope control):
   * Every rule lives inside a @media (max-width: …) block, so rendering at
     desktop widths is byte-identical with or without this file.
   * No markup, URL, copy, or behaviour changes — spacing, scrolling and
     tap-target sizing only.
   * Loaded after the inline <style> in dashboard/base.html, so these rules
     win at mobile widths without touching the existing cascade.

   What it fixes:
   1. Wide tables (claims / customers / daily scans) overflow 360px
      viewports. Without a wrapper div available, the card becomes the
      scroll container only when needed.
   2. The sticky topbar crowds at 360px (2rem side padding + user chip +
      sign-out + breadcrumb).
   3. Cards keep desktop padding (1.75rem) and sub-44px touch targets.
   4. iOS Safari auto-zoom on inputs with font-size < 16px.
   5. Safe-area-insets for devices with notches and gesture bars.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Smooth touch scrolling & safe area insets on mobile drawer */
  .dashboard-sidebar {
    padding-top: max(1.15rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(1.15rem, env(safe-area-inset-bottom)) !important;
    padding-left: max(0.85rem, env(safe-area-inset-left)) !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Balanced touch targets for drawer toggles */
  .mobile-menu-btn {
    width: 42px;
    height: 42px;
  }

  .mobile-close-btn {
    width: 44px;
    height: 44px;
  }

  /* Prevent backdrop rubber-band pass-through on iOS */
  .sidebar-backdrop.active {
    touch-action: none;
  }
}

@media (max-width: 768px) {
  /* Never let the page itself scroll sideways; clip (not hidden) keeps
     `position: sticky` working for the topbar. Safe-area insets honored. */
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Modal Dialog containment platform-wide */
  dialog:modal {
    overscroll-behavior: contain;
  }

  dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  /* Main column: tighter gutters on phones, avoiding gesture bar overlap */
  .dashboard-main-area {
    padding: 1rem 0.75rem max(3rem, env(safe-area-inset-bottom));
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  .app-shell, .app-content-wrapper {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Enforce responsive mobile padding on cards unless explicitly zero-padded */
  .card:not([style*="padding: 0"]):not([style*="padding:0"]) {
    padding: 1.1rem 0.9rem !important;
  }

  .card {
    /* Tables keep their desktop layout and scroll inside the card only
       when they are wider than the viewport. No markup change needed. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Main dashboard index table -> responsive mobile cards */
  .card.card-dashboard-index {
    overflow-x: visible !important;
  }

  .dashboard-index-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
  }

  .dashboard-index-table thead {
    display: none !important;
  }

  .dashboard-index-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }

  .dashboard-index-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 1rem 0.95rem !important;
    gap: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: var(--shadow-xs) !important;
  }

  .dashboard-index-table tbody td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    white-space: normal !important;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dashboard-empty-cell {
    display: none !important;
  }

  .mobile-table-label {
    display: inline-block !important;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-right: 0.35rem;
  }

  .dashboard-td-biz {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }

  .dashboard-td-status {
    margin-bottom: 0.1rem !important;
  }

  .dashboard-td-status .badge {
    display: inline-flex !important;
  }

  .dashboard-td-campaign, .dashboard-td-slug {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    font-size: 0.88rem !important;
  }

  .dashboard-td-actions {
    margin-top: 0.35rem !important;
    padding-top: 0.65rem !important;
    border-top: 1px solid var(--border-subtle) !important;
  }

  .dashboard-td-actions > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .dashboard-td-actions .btn {
    flex: 1 1 calc(50% - 0.35rem) !important;
    min-height: 42px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .dashboard-td-actions .btn:first-child {
    flex: 1 1 100% !important;
  }

  /* Search & pagination wrapping */
  .search-form {
    flex-wrap: wrap !important;
  }

  .search-form .input {
    min-width: 140px;
    flex: 1 1 180px;
  }

  .pagination-nav {
    flex-wrap: wrap !important;
  }

  .card table:not(.dashboard-index-table) {
    /* Smooth finger scrolling for the scroll container above. */
    -webkit-overflow-scrolling: touch;
  }

  .card:not(.card-dashboard-index) th,
  .card:not(.card-dashboard-index) td {
    /* Keep columns readable instead of crushing multi-column tables; the
       card scrolls naturally without pinned/sticky columns. */
    white-space: nowrap;
    position: static !important;
  }

  /* Sticky topbar: reclaim horizontal space, support safe flex wrap */
  .app-topbar {
    min-height: 60px;
    height: 60px;
    padding: 0;
  }

  .topbar-inner {
    min-height: 60px;
    height: 60px;
    padding: 0 max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  .topbar-left {
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .breadcrumb-current, .breadcrumb-biz {
    max-width: 140px;
  }

  .topbar-right {
    gap: 0.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .user-chip {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
  }

  /* 44px minimum touch targets (iOS HIG) + 16px inputs platform-wide
     so iOS Mobile Safari does not zoom on focus. */
  .btn {
    min-height: 44px;
    font-size: 0.88rem;
  }

  input, select, textarea, .input {
    min-height: 44px;
    font-size: 16px !important;
  }

  /* Small icon-only or badge actions still respect minimum hit box */
  button[type="submit"], button[type="button"], a.btn {
    touch-action: manipulation;
  }

  /* Stat grids collapse early to single column so values never squeeze */
  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
  }

  .stat-card {
    padding: 1rem 1.1rem;
  }

  .stat-val {
    font-size: 1.6rem;
  }

  /* Workspace tabs already scroll; add snap so one tab settles in view */
  .ws-tabs {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .ws-tab {
    scroll-snap-align: start;
    min-height: 48px;
    padding: 0.65rem 0.85rem 0.55rem;
  }

  /* Search + redeem forms stack full-width instead of sharing a row */
  .ws-panel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .ws-previews {
    width: 100%;
    text-align: left;
  }

  .ws-previews-links {
    justify-content: flex-start;
  }

  .preview-btn {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
  }

  /* Counter tool terminal boxes stack cleanly on mobile without horizontal clipping */
  .card div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  .card div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  .card div[style*="grid-template-columns: repeat(auto-fit, minmax(170px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* Responsive media never overflows the card */
  .card img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  /* Compact avatar button on small screens */
  .user-chip-name, .user-chip-arrow {
    display: none;
  }

  .user-chip-btn {
    width: 42px;
    height: 42px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
  }

  .user-dropdown-menu {
    min-width: 175px;
  }
}

@media (max-width: 380px) {
  /* Very small phones: maintain proportional gutters */
  .dashboard-main-area {
    padding: 0.85rem max(0.6rem, env(safe-area-inset-left)) max(3rem, env(safe-area-inset-bottom)) max(0.6rem, env(safe-area-inset-right));
  }

  .topbar-inner {
    padding: 0 max(0.6rem, env(safe-area-inset-right)) 0 max(0.6rem, env(safe-area-inset-left));
  }

  .card:not([style*="padding: 0"]):not([style*="padding:0"]) {
    padding: 0.95rem 0.75rem !important;
  }

  .breadcrumb-current, .breadcrumb-biz {
    max-width: 96px;
  }

  .mobile-menu-btn {
    width: 38px;
    height: 38px;
  }

  .user-chip-btn {
    width: 38px;
    height: 38px;
  }

  .stat-val {
    font-size: 1.45rem;
  }

  .ws-tab {
    min-width: 76px;
    padding: 0.6rem 0.65rem 0.5rem;
    font-size: 0.68rem;
  }
}