/* Watchtower — mobile drawer nav + responsive tightening.
   Load AFTER shell.css (and after the other tab CSS files) so it wins the
   max-width:900px cascade shell.css already declares for .app-shell/.top-nav.
   Direction picked from the mockup canvas: m1 nav drawer, m2 Today (2-col
   tiles), m4 wide tables stay tables and scroll inside their own wrap. */

@media (max-width: 900px) {
  /* ── Kill page-level horizontal scroll ──────────────────────────────────
     The off-canvas drawer sits at translateX(-100%) (its box lives at x=-280),
     which lets the whole page scroll left; wide inline grids let it scroll
     right. `clip` (not `hidden`) stops both WITHOUT creating a scroll container,
     so the sticky header/app-bar and in-table sticky first columns keep
     working. Dense tables still scroll horizontally inside their own wrap. */
  html, body { overflow-x: clip; }
  #wt-app-root, .app-shell, main { max-width: 100%; overflow-x: clip; }

  /* .app-shell is `align-items: flex-start` (shell.css) so the desktop sidebar
     does not stretch to the tallest column. On mobile the shell flips to
     flex-direction: column, which makes align-items control WIDTH instead -
     so every child shrank to its content. The app bar ended up as wide as
     "hamburger + Watchtower" and page content scrolled past on its right.
     Stretch the children back to full width here. */
  .app-shell { align-items: stretch; }

  /* Sidebar becomes an off-canvas drawer instead of a wrapped horizontal row */
  .top-nav {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    height: 100vh !important;
    width: 280px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    border-right: 1px solid var(--cream-a08);
    border-bottom: none !important;
    box-shadow: 10px 0 34px var(--black-a40);
    overflow-y: auto;
  }
  .top-nav.open { transform: translateX(0); }
  .side-group-label, .side-footer { display: block !important; }
  .side-brand { width: auto; padding: 4px 10px 18px !important; }

  /* Dark overlay behind the open drawer, closes it on tap */
  .nav-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(8,7,6,0.55);
    z-index: 290;
  }
  .nav-overlay.visible { display: block; }

  /* Sticky mobile app bar: hamburger + brand, replaces the desktop sidebar as
     the nav entry point. Sits above <main>. */
  .mobile-appbar {
    display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 150;
    width: 100%;
    background: rgba(15,14,12,0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cream-a07);
    padding: 12px 16px;
  }
  .hamburger-btn {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; padding: 6px; margin: -6px;
    cursor: pointer;
  }
  .hamburger-btn span { width: 20px; height: 2px; background: var(--text); border-radius: var(--radius-2); display: block; }
  .mobile-appbar .mab-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text); }

  main { padding: 16px 14px 40px; max-width: 100%; }
  .page-title { font-size: 19px; }
  .card { padding: 16px; margin-bottom: 16px; }
  .card-header h2 { font-size: 14px; }

  /* Today's KPI grid: force the 2-column "glanceable" layout (m2) even though
     it's an inline auto-fit grid in today.js */
  #today-body > div[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .metric-tile { padding: 12px 13px; }
  .metric-tile .value { font-size: 18px; }

  /* ── Wide tables: stay real tables, scroll inside their own wrap (m4).
     Just tighten padding/type for the phone. Covers the three wrap classes
     (shell .table-wrap, competitors, dm-engine). First column already sticky
     where declared in the per-tab CSS. */
  .table-wrap table,
  .comp-table-wrap table,
  .dm-table-wrap table { font-size: 12px; }
  .table-wrap th, .table-wrap td,
  .comp-table-wrap th, .comp-table-wrap td,
  .dm-table-wrap th, .dm-table-wrap td { padding: 8px 10px; }
  .table-wrap, .comp-table-wrap, .dm-table-wrap { -webkit-overflow-scrolling: touch; }

  /* Sub-tab pills scroll horizontally instead of overflowing the page */
  .sub-tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Reels: risk decks to a clean 2-col (inspiration was 1-col / minmax 360,
     summary+swipes could balloon to 4 on wider phones). */
  .reel-grid, .reel-sumgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .prod-loc-2col, .prod-2col, .pull-cols { grid-template-columns: 1fr !important; }
  .today-grid { grid-template-columns: 1fr !important; }

  /* ── Instagram: overview charts stay 2-up (nicer than one tall column);
     scheduled posts pack up to 3 thumbnails per row. */
  .ig-chart-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .sched-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important; gap: 10px !important; }

  /* ── CRM / Emails: stack to a single column and hide the week calendar
     (it forces a 7-col grid and crowds the phone). Emails get the full width.
     A "📅 Calendar" toggle button (.mob-cal-toggle, shown only here on mobile)
     re-exposes it inline above the list. */
  #top-emails div[style*="1fr 2fr"] { grid-template-columns: 1fr !important; padding: 16px 14px !important; gap: 16px !important; }
  #email-calendar-scroll { display: none !important; }
  .mob-cal-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--cream-a06); color: var(--text-secondary);
    border: 1px solid var(--cream-a12); border-radius: var(--radius-20);
    padding: 6px 14px; font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer; white-space: nowrap;
  }
  #crm-grid.cal-open #email-calendar-scroll {
    display: block !important; position: static !important;
    max-height: none !important; margin-bottom: 4px;
  }
}

/* Calendar toggle is a mobile-only affordance; never show it on desktop. */
@media (min-width: 901px) {
  .nav-overlay, .mobile-appbar, .mob-cal-toggle { display: none !important; }
}