/* =============================================================================
   mobile.css — Responsive overrides for the entire dashboard
   -----------------------------------------------------------------------------
   Loaded LAST (after style.css + theme.css + page-specific CSS) so its media
   queries beat page-specific rules without us needing !important everywhere.

   IMPORTANT — there is ALREADY an off-canvas sidebar implementation in
   style.css (≤880 px) and a JS toggle in app_shell.html. This file does NOT
   re-implement that. It only:
     1. Hardens the universal touch experience (anti-zoom inputs, momentum
        scrolling, no-horizontal-scroll body).
     2. Adds page-specific responsive rules for every dashboard page so
        grids stack, drawers go fullscreen, modals slide up from the
        bottom, tabs scroll horizontally, etc.

   Breakpoints
     ≤ 1024 px  tablets, small laptops in split view
     ≤ 880  px  matches the existing sidebar off-canvas trigger
     ≤ 768  px  large phones / small tablets — aggressive single-col
     ≤ 480  px  phones — tightest padding + smallest fonts
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1) Universal hardening
   ---------------------------------------------------------------------------*/

html, body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

@supports (-webkit-touch-callout: none) {
  /* iOS Safari only — bump every text input to 16 px MIN so Safari stops
     auto-zooming on focus. Anything < 16 px triggers it. */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: max(16px, 1em);
  }
}

/* =============================================================================
   2) ≤ 1024 px — TABLET / SMALL LAPTOP
   =============================================================================*/

@media (max-width: 1024px) {

  /* Generic stat / card grids → auto-fit at smaller minimum so they
     start packing instead of breaking the layout. */
  .grid,
  .cards-grid,
  .stat-grid,
  .stats-grid,
  .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

/* =============================================================================
   3) ≤ 880 px — matches existing sidebar off-canvas breakpoint in style.css
   =============================================================================
   The existing rules at this width make the sidebar a sliding drawer.  We
   extend that here with page-level layout collapses so content also
   reflows for the new full-width canvas.
   ---------------------------------------------------------------------------*/

@media (max-width: 880px) {
  /* Main content takes the full viewport now that the sidebar is overlayed.
     The existing CSS already adds padding-top:56px to .main-column for the
     hamburger; we just relax max-width and side padding. */
  .main-inner {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* =============================================================================
   4) ≤ 768 px — PHONE / SMALL TABLET
   =============================================================================*/

@media (max-width: 768px) {
  .main-inner {
    padding: 12px 10px 18px !important;
  }

  /* Universal grid → 1 column for anything multi-col */
  .grid,
  .cards-grid,
  .stat-grid,
  .stats-grid,
  .summary-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Tables: scroll horizontally inside their parent instead of breaking
     the viewport. Most pages already wrap tables in a card; allow that
     wrapper to scroll. */
  table { font-size: 12.5px; }
  .table-wrap, .scroll-x, .table-scroll, .x-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals → fullscreen sheet from the bottom instead of centered card */
  .modal,
  .agc-modal-shell,
  .acard-modal,
  .av3-modal-shell,
  .av3-context-menu,
  .modal-shell,
  .ax-modal-shell {
    max-width: 100vw !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    border-radius: 14px 14px 0 0 !important;
    margin: 0 !important;
    align-self: flex-end !important;
  }
  .agc-modal,
  .modal-overlay,
  .av3-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Buttons: tap-target floor */
  .btn, button.btn, .agc-btn, .av3-btn, .snd-btn, .ovx-btn, .anx-btn, .acard-btn {
    min-height: 40px;
  }
  .agc-btn--sm, .av3-btn--sm { min-height: 34px; }

  input[type="text"], input[type="search"], textarea, select {
    max-width: 100%;
  }
}

/* =============================================================================
   5) ≤ 480 px — PHONE
   =============================================================================*/

@media (max-width: 480px) {
  .main-inner { padding: 12px 8px 14px !important; }
  body { font-size: 14px; }
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.2rem !important; }
}

/* =============================================================================
   6) PAGE-SPECIFIC OVERRIDES
   =============================================================================*/

/* ─── Agents Cockpit (/dashboard/agents/cockpit) ──────────────────────── */

@media (max-width: 1024px) {
  /* Top toolbar: stack into 1 col grid (it IS display:grid in source). */
  #agc-root .agc-top {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #agc-root .agc-top-r { flex-wrap: wrap; justify-content: flex-start; }
  #agc-root .agc-top-c { width: 100%; }
  #agc-root #agc-search { width: 100%; }

  /* Workspace 3-column grid → 1 column. The rail moves UNDER the main pane. */
  #agc-root .agc-work {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
  }
  #agc-root .agc-rail {
    max-height: 280px;
    order: 2;
  }
  #agc-root .agc-main { order: 1; }

  /* Hero KPI band: stack the primary + secondary stats */
  #agc-root .agc-hero {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #agc-root .agc-hero-sec {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Card grid auto-fit at smaller minimum */
  #agc-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }

  /* Drawer becomes fullscreen sheet on tablet & below */
  #agc-drawer .agc-drawer-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: 0;
  }
}

@media (max-width: 768px) {
  #agc-root .agc-top { padding: 8px 10px !important; }
  #agc-root .agc-top-l h1 { font-size: 17px; }

  /* View tabs (Cards / Matrix / Geo / Replay / Constellation) horizontal-scroll */
  #agc-root .agc-views {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  #agc-root .agc-views::-webkit-scrollbar { display: none; }
  #agc-root .agc-view-btn { flex-shrink: 0; }

  /* Card grid: 1 column */
  #agc-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #agc-root .agc-hero-sec {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #agc-root .agc-hero-pri-v { font-size: 32px !important; }
  #agc-root .agc-hero-stat-v { font-size: 18px !important; }

  /* Drawer body cards stack content */
  .agd-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .agd-card--split { grid-template-columns: 1fr !important; }

  /* Bulk dock — let it scroll horizontally */
  #agc-dock {
    flex-wrap: wrap;
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  #agc-dock-bulk {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  #agc-dock-bulk > * { flex-shrink: 0; }
}

@media (max-width: 480px) {
  /* Underline tabs in the drawer get tighter padding */
  .agc-drawer-tabs button { font-size: 12px; padding: 0 4px; }
  .agc-drawer-tabs button.is-on::after { left: 6px; right: 6px; }

  /* On phones, drop the breadcrumb to save vertical space */
  #agc-root .agc-bread { display: none; }
}

/* ─── Accounts Cosmos (/dashboard/accounts) ───────────────────────────── */

@media (max-width: 1024px) {
  #avc-root .avc-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  #avc-rail {
    width: 100% !important;
    max-height: 320px;
    border-left: 0;
    border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
  }
  #avc-stage {
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  /* Map view: smaller, with viewport-bound height */
  #avc-leaflet, .avc-leaflet { height: 56dvh !important; min-height: 320px; }
  #avc-layout-chips { flex-wrap: wrap; gap: 4px !important; }
  #avc-personas-card .avc-personas-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
  #avc-rail { max-height: none; padding: 10px !important; }
}

@media (max-width: 480px) {
  /* On phones, hide the stats overlay so the map breathes */
  #avc-stage-overlay { display: none !important; }
}

/* ─── Outreach (/dashboard/outreach) ──────────────────────────────────── */

@media (max-width: 1024px) {
  /* Two-column composer becomes one column. Rail goes ABOVE detail so
     the user picks an account/campaign first, then sees the composer. */
  .snd-ws {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .snd-ws-rail {
    position: static !important;
    max-height: 320px !important;
  }
}

@media (max-width: 768px) {
  /* Tab strips horizontal-scroll on phone */
  .snd-tabs, .nd-tabs, .nd-q-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .snd-tabs::-webkit-scrollbar,
  .nd-tabs::-webkit-scrollbar { display: none; }
  .snd-tabs > *, .nd-tabs > * { flex-shrink: 0; }

  /* Density / row-control widgets stay inside the screen */
  .snd-q-density, .nd-q-density {
    width: auto !important;
    max-width: 100%;
  }

  /* Compose footer sticks to bottom for thumb reach */
  .snd-compose-foot, .nd-compose-foot {
    position: sticky;
    bottom: 0;
    background: var(--snd-bg, #0b1220);
    padding: 8px 10px;
    z-index: 5;
  }
}

/* ─── Chats (WhatsApp / Telegram pages) ───────────────────────────────── */

@media (max-width: 880px) {
  /* Triple-pane (rail + list + conversation) → single column.
     Without a dedicated mobile router both render stacked; the user
     scrolls between the list and the conversation. Functional, not
     premium, but doesn't break. */
  .chats-wa-outer,
  .chats-shell,
  .chats-shell.wa-native-ui,
  .tg-page,
  .wa-three-pane {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
  }

  /* Far-left session rail (avatar column) is redundant when we already
     have the hamburger menu — hide it on mobile. */
  .chats-session-rail { display: none !important; }
}

@media (max-width: 768px) {
  body.page-chats .main-inner {
    padding: 56px 6px 12px !important;
  }
  .wa-conv, .tg-conv { min-height: 60dvh; }
}

/* ─── Overview / dashboards ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ov4-grid, .ov-grid, .overview-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ov4-feed, .ov4-stats, .ov4-tags { width: 100% !important; }
}

/* ─── Settings ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .sx-shell, .setx-shell {
    grid-template-columns: 1fr !important;
  }
  .sx-rail, .setx-rail {
    width: 100% !important;
    border-right: 0;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    position: static !important;
    max-height: none !important;
  }
}

/* ─── Database / Logs / Alerts (admin pages) ──────────────────────────── */

@media (max-width: 1024px) {
  .dbx-shell, .lgx-shell, .anx-shell {
    grid-template-columns: 1fr !important;
  }
  .dbx-rail, .lgx-rail, .anx-rail {
    width: 100% !important;
    max-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  }
}

@media (max-width: 768px) {
  /* Code blocks and pre tags should scroll, not break the layout */
  pre, code, .dbx-cell, .lgx-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .dbx-table, .lgx-table { font-size: 12px; }
}

/* ─── Training ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .training-app {
    grid-template-columns: 1fr !important;
  }
  .training-rail, .tr-rail {
    width: 100% !important;
    max-height: 320px;
  }
}

/* ─── Login / unauth pages ────────────────────────────────────────────── */

@media (max-width: 480px) {
  .auth-shell, .login-shell {
    padding: 24px 16px !important;
  }
  .auth-card, .login-card {
    width: 100% !important;
    max-width: none !important;
    padding: 22px 18px !important;
  }
}

/* =============================================================================
   7) Notification rack (login alerts etc.) — keep tappable on phone
   =============================================================================*/

@media (max-width: 768px) {
  .ant-rack, .agc-toasts, .toast-rack {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    max-width: none !important;
    width: auto !important;
  }
  .ant-msg, .agc-toast, .toast {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =============================================================================
   8) Defensive: never let a page produce horizontal scroll on a phone.
   =============================================================================*/

@media (max-width: 1024px) {
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }
}