/* =============================================================================
   Rozana Sales Co-Pilot · Mobile responsive layer  (F6)
   -----------------------------------------------------------------------------
   Loaded by rm_dashboard / manager_dashboard / head_dashboard via
   <link href="/portal/templates/components.css">  (the /portal/templates/{name}
   static route serves .css).  This file ONLY carries responsive overrides — the
   desktop look lives in /static/design.css + /static/components.css.

   Breakpoints
     · <820px        phone / small tablet  → single-column, off-canvas sidebar
     · 820–1199px    tablet / split-screen → tighter kanban + drawer
     · >=1200px      desktop               → NO overrides (untouched)

   Selectors are aligned to the real class names in the three dashboards:
     kanban column : .kanban-col      (spec alias .kanban-column / .kanban-row
                                        also covered, harmless if absent)
     project header: .project-header (+ __crumb / __subtitle / __share)
     pacing pills  : .pacing-pills / .pacing-pill
     insight band  : .insight-band
     task drawer   : .task-drawer (rendered by components.js) + .task-drawer-mount
     sidebar       : .sidebar (from _shell.html, inside .app-shell)
   ========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
   <820px — phones & narrow tablets
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 819.98px) {

  /* No horizontal page scroll, ever. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ── Project header collapses: hide subtitle + breadcrumb, keep the name ── */
  .project-header__crumb,
  .project-header__subtitle,
  .project-header__share,
  .page-header__subtitle,
  .breadcrumb {
    display: none !important;
  }
  .project-header,
  .project-header__top {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .project-header__name {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  /* ── Kanban vertical-stacks ──────────────────────────────────────────────
     Real class is .kanban-col; spec aliases .kanban-column / .kanban-row are
     included for safety. The board itself becomes a single vertical flow. */
  .kanban,
  .kanban-row {
    display: block;
    overflow-x: visible;
    width: 100%;
  }
  .kanban-col,
  .kanban-column {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 var(--space-4) 0;
  }

  /* ── Pacing pills: horizontal scroll with snap ──────────────────────────── */
  .pacing-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    scrollbar-width: none;          /* Firefox */
  }
  .pacing-pills::-webkit-scrollbar { display: none; }   /* WebKit */
  .pacing-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* ── Task drawer: full width sheet ──────────────────────────────────────── */
  .task-drawer,
  .task-drawer-mount {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0;
  }

  /* ── Insight band stacks ────────────────────────────────────────────────── */
  .insight-band,
  .insight-band__row {
    display: block;
    grid-template-columns: 1fr !important;
  }
  .insight-card {
    width: 100%;
    margin-bottom: var(--space-3);
  }

  /* ── Sidebar slides in as an off-canvas drawer ──────────────────────────────
     Primary mechanism per spec: .sidebar is fixed off-screen and .sidebar.open
     pulls it back to left:0.  We ALSO honour the existing _shell.html toggle
     (.app-shell[data-sidebar="open"]) so the topbar hamburger keeps working. */
  .app-shell {
    grid-template-columns: 1fr !important;
  }
  .sidebar {
    position: fixed;
    top: var(--topbar-height, 56px);
    left: -260px;
    width: 260px;
    height: calc(100vh - var(--topbar-height, 56px));
    z-index: 60;
    transition: left var(--dur-drawer, .2s) var(--ease-standard, ease);
    box-shadow: var(--shadow-3, 0 8px 24px rgba(0,0,0,.18));
  }
  .sidebar.open,
  .app-shell[data-sidebar="open"] .sidebar,
  .app-shell[data-sidebar="expanded"] .sidebar.open {
    left: 0;
  }

  /* Give the main column the full width once the sidebar is off-canvas. */
  .main { padding: var(--space-4); }
  .main__inner { max-width: 100%; }

  /* ── Tap targets: minimum 44px height for anything clickable ────────────── */
  .nav-item,
  .btn,
  button,
  .pacing-pill,
  .kanban-col__add,
  .insight-act,
  .project-header__star,
  .topbar__icon-btn,
  [role="button"] {
    min-height: 44px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   820–1199px — tablets & split-screen
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 820px) and (max-width: 1199.98px) {
  .kanban-col,
  .kanban-column {
    min-width: 200px;
  }
  .task-drawer,
  .task-drawer-mount {
    width: 420px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   >=1200px — desktop : intentionally NO overrides (layout untouched)
   ─────────────────────────────────────────────────────────────────────────── */