/*
 * hadef mobile: responsive rules for /app, auth, and Mode B host-side pages.
 * Activates below 900px. Turns the sidebar into a slide-over drawer, stacks
 * grids, and resizes fonts + padding so every page is usable on a phone.
 */

/* Desktop: hide the mobile bar entirely */
.h-mobile-bar { display: none; }

/* Table scroll wrapper: full-bleed horizontal scroll on narrow screens */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {

  /* Main body layout: sidebar + content stacks to content only with drawer */
  body {
    display: block !important;
    overflow-x: hidden;
  }

  .sidebar,
  .app-sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px !important;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9970;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  }
  .sidebar.is-mobile-open,
  .app-sidebar.is-mobile-open {
    transform: translateX(0);
  }
  .sidebar.is-collapsed {
    /* Collapsed mode disabled on mobile - drawer pattern is the replacement */
    width: 280px !important;
  }

  .sidebar .h-collapse-btn {
    display: none;
  }

  /* Content area always takes the full viewport on mobile */
  main,
  .main,
  .content,
  .layout-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  /* Mobile top bar: hamburger + page title */
  .h-mobile-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #1C1917;
    color: #FAFAF9;
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
  .h-mobile-burger {
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9px;
    color: #FAFAF9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .h-mobile-burger svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .h-mobile-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Scrim for drawer */
  .h-mobile-scrim {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.5);
    z-index: 9960;
    display: none;
  }
  .h-mobile-scrim.is-open {
    display: block;
    animation: fadeIn 180ms ease-out;
  }

  /* Grids: collapse to one column */
  .tile-grid,
  .grid,
  [data-tile-grid],
  .split,
  .two-col,
  .three-col,
  .stage,
  .h-plan-chooser,
  .h-channels-section > div:first-of-type + div,
  #channelsGrid,
  .kanban-board,
  .pipeline-board {
    grid-template-columns: 1fr !important;
  }

  /* Kanban horizontal on mobile: scroll sideways */
  .kanban-board,
  .pipeline-board {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }
  .kanban-column,
  .pipeline-column,
  [data-kanban-column] {
    min-width: 85vw;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Tiles: full-width, reduce min-height */
  .tile {
    min-height: auto !important;
    padding: 14px !important;
  }

  /* Typography: scale down display headers */
  h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  h2 {
    font-size: 18px !important;
  }
  .hero-h1, .page-h1 {
    font-size: 28px !important;
    line-height: 1.18 !important;
  }

  /* Toolbar on page detail views */
  .toolbar {
    padding: 10px 14px !important;
  }
  .tb-title {
    font-size: 13px !important;
  }

  /* Modals: cap width on small screens */
  .h-welcome-card,
  .h-sched-card,
  .h-evd-card,
  .h-account-pop,
  .cl-card {
    max-width: calc(100vw - 28px) !important;
    width: calc(100vw - 28px) !important;
    margin: 0 14px;
  }
  .h-account-pop {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
  }

  /* Pitch staging canvas stacks */
  .pitch-stage, .stage-grid {
    grid-template-columns: 1fr !important;
  }
  .sidebar-right, .sidebar-r {
    position: static !important;
    max-width: 100% !important;
    margin-top: 18px;
  }

  /* Forms: large touch targets + prevent iOS auto-zoom (requires >= 16px) */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  button {
    font-size: 15px !important;
    min-height: 44px;
  }
  .btn-primary, .btn-ghost, .btn {
    min-height: 44px;
    padding: 12px 16px !important;
  }
  /* Icon-only buttons need explicit size floor */
  .btn-icon, .btn-icon-only, .icon-btn, [aria-label][class*="btn"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Attach + send buttons on Brain stay usable */
  .feed-input { flex-wrap: wrap !important; }
  .feed-input input { order: -1; width: 100% !important; flex: 1 1 100% !important; margin-bottom: 8px; padding: 10px 0 !important; }

  /* Tab rows: scrollable horizontally instead of wrapping */
  .tabs, .filters {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar,
  .filters::-webkit-scrollbar { display: none; }
  .tab, .fchip { flex-shrink: 0 !important; }

  /* 8px minimum gap between adjacent tap targets in action groups */
  .action-row, .btn-group, .page-actions {
    gap: 8px !important;
  }

  /* Hide the bottom-right Customize dashboard button on mobile until optimized */
  #hHomeConfigBtn { display: none !important; }

  /* Empty states shrink their icon + sub */
  .h-empty { padding: 20px 14px !important; }
  .h-empty-icon { width: 40px !important; height: 40px !important; }

  /* Sidebar nav: keep scrollable */
  .sidebar-nav {
    overflow-y: auto !important;
    max-height: calc(100vh - 200px);
  }
}

/* Dedicated small-phone tweaks below 400px */
@media (max-width: 400px) {
  h1 { font-size: 22px !important; }
  .tile-title { font-size: 14px !important; }
  .page-sub { font-size: 13px !important; }
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }