/* ═══════════════════════════════════════════════════════════
   ProjectRunner — Mobile Translation Layer
   Loaded after style.css. All rules are either scoped to
   @media (max-width: 768px) or are zero-impact on desktop.
   Desktop code is never modified. This file is the only
   mobile-specific CSS.
   ═══════════════════════════════════════════════════════════ */

/* ── Desktop: hide mobile-only elements ────────────────── */
.mob-hamburger   { display: none; }
.mob-nav-backdrop { display: none; }

/* ── Timeline: bar canvas icon fix (global, all viewport sizes) ──
   ICON_MILESTONE, ICON_SPRINT, ICON_STAGE all use class "tl-nav-icon".
   The tl-labels-collapsed CSS hides ALL .tl-nav-icon in the container,
   including those inside the bar canvas bars. We un-hide them in the
   bars layer so bars always show their icons regardless of sidebar state. */
.tl-container.tl-labels-collapsed .tl-bars-layer .tl-nav-icon {
  display: inline !important;
}

/* ════════════════════════════════════════════════════════ */
/*  TABLET / FOLD BREAKPOINT  ≤ 1024px                     */
/*  Targets: Z Fold 6 cover landscape (~830px),            */
/*           Z Fold 6 main screen portrait (~968px),       */
/*           general tablets and small laptops             */
/*  Rules here are intentionally mild — just enough to     */
/*  reduce desktop density for narrower canvases.          */
/* ════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Page layout — reduce padding overhead ──────────── */
  .page-header       { padding: 12px 16px; }
  .page-header h2    { font-size: 18px; }
  .page-content      { padding: 16px; }

  /* ── Dashboard — tighten oversized stat cards ───────── */
  .stat-value        { font-size: 24px; }
  .stat-card         { padding: 14px; }
  .dashboard-grid    { gap: 16px; }
  .dash-section      { padding: 16px; }
  .dash-section-body { padding: 0 16px 16px; }

  /* ── Timeline — key fix: shrink label column so the      */
  /*   bar canvas gets usable space.                       */
  /*   !important is required: these elements have JS-set  */
  /*   inline style="width:330px;min-width:330px;".        */
  /*   Only max-width is set — the JS now also writes 200px */
  /*   via TL.labelWidth clamping, so they agree.          */
  .tl-labels-col,
  .tl-labels-header {
    max-width: 200px !important;
  }
  /* Proportionally reduce row indentation */
  .tl-row-sprint  { padding-left: 20px !important; }
  .tl-row-task    { padding-left: 28px !important; }
  .tl-row-subtask { padding-left: 36px !important; }
  .tl-container   { font-size: 12px; }

  /* ── Search bar — keep compact at tablet widths ─────── */
  .search-input       { width: 120px !important; }
  .search-input:focus { width: 180px !important; }

  /* ── Task List — reduce column minimums to prevent forced
     horizontal scroll at 830–968px. Without this the grid
     enforces a ~956px minimum row width, causing every
     narrower viewport to scroll horizontally.              */

  /* Re-declare CSS variables so the grid tracks shrink */
  .board-list-groups {
    --board-grid-left:   1fr !important;
    --board-grid-center: auto !important;
    --board-grid-right:  auto !important;
    --board-grid-gap:    10px !important;
  }

  /* Tighter 3-column center grid: owner + status + priority */
  .board-row-center,
  .board-col-header-center {
    grid-template-columns: 80px 72px 72px !important;
    min-width: 0 !important;
  }

  /* Single-column right: due date only */
  .board-row-right,
  .board-col-header-right {
    grid-template-columns: 72px !important;
    min-width: 0 !important;
  }

  /* Match meta cell widths to the reduced grid */
  .board-meta-owner    { width: 80px !important; flex: 0 0 80px !important; }
  .board-meta-status   { width: 72px !important; flex: 0 0 72px !important; }
  .board-meta-priority { width: 72px !important; flex: 0 0 72px !important; }
  .board-meta-due      { width: 72px !important; }

  /* Drop category + start date (low value at compact widths) */
  .board-meta-category,
  .board-col-header-center .bcol-category { display: none !important; }
  .board-meta-start,
  .board-col-header-right .bcol-start     { display: none !important; }

}
/* end @media (max-width: 1024px) */

/* ════════════════════════════════════════════════════════ */
/*  MOBILE BREAKPOINT  ≤ 768px                                       */
/* ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Use small-viewport height so browser chrome doesn't clip */
  @supports (height: 100svh) {
    body         { height: 100svh; }
    .app-layout  { height: 100svh; }
  }

  /* ─────────────────────────────────────────────────────
     1. SIDEBAR — slide-in overlay
     The sidebar leaves the flex flow and becomes a fixed
     overlay. Works with or without .sidebar-collapsed.
  ───────────────────────────────────────────────────── */
  .sidebar {
    position: fixed !important;
    top: 0; bottom: 0;
    left: -270px !important;
    width: 260px !important;
    min-width: 0 !important;
    z-index: 15000 !important;
    transition: left 0.25s ease !important;
    overflow-y: auto;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55);
  }
  .mob-nav-open .sidebar { left: 0 !important; }

  /* Reset every content-hiding rule that .sidebar-collapsed adds.
     On mobile the sidebar is always a full-width overlay, so the
     collapsed state is irrelevant — we just show the full menu. */
  .sidebar-collapsed .sidebar {
    width: 260px !important;
    min-width: 0 !important;
    overflow-y: auto !important;
  }
  .sidebar-collapsed .sidebar-header {
    justify-content: space-between !important;
    padding: 20px 16px 12px !important;
  }
  .sidebar-collapsed .sidebar .logo-text  { display: block !important; }
  .sidebar-collapsed .sidebar-toggle-btn  { transform: none !important; }
  .sidebar-collapsed .sidebar-label       { display: block !important; }
  .sidebar-collapsed .sidebar-section     { padding: 12px 8px !important; }
  .sidebar-collapsed .sidebar-bottom      { padding: 12px 8px !important; }
  .sidebar-collapsed .nav-item {
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    gap: 10px !important;
  }
  .sidebar-collapsed .nav-item .nav-icon   { margin: 0 !important; }
  .sidebar-collapsed .nav-item-subtle {
    justify-content: flex-start !important;
    font-size: 13px !important;
  }
  .sidebar-collapsed .user-info { display: flex !important; }

  /* ─────────────────────────────────────────────────────
     2. NOTEPAD SIDEBAR — completely hidden on mobile.
     The notepad is a power-user desktop feature; the screen
     real estate isn't there for it on phones/tablets.
  ───────────────────────────────────────────────────── */
  .notepad-sidebar,
  .notepad-side-toggle {
    display: none !important;
  }

  /* The :has() rules in style.css add right padding when the notepad
     is visible. Even with display:none the element is still in the DOM
     so :has() still matches — override the extra padding here. */
  .app-layout:has(.notepad-sidebar:not(.notepad-collapsed)) .page-header,
  .app-layout:has(.notepad-sidebar:not(.notepad-collapsed)) .page-content {
    padding-right: 14px !important;
  }

  /* ─────────────────────────────────────────────────────
     3. MAIN CONTENT — takes full viewport width
     Sidebar is now out of the flex flow (position:fixed)
     and notepad is gone, so main-content fills everything.
  ───────────────────────────────────────────────────── */
  .main-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  /* ─────────────────────────────────────────────────────
     4. BACKDROP — visible when nav is open
  ───────────────────────────────────────────────────── */
  .mob-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 14999;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-nav-open .mob-nav-backdrop { display: block; }

  /* ─────────────────────────────────────────────────────
     5. HAMBURGER BUTTON
  ───────────────────────────────────────────────────── */
  .mob-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    min-width: 36px;
    min-height: 36px;
  }
  .mob-hamburger:active {
    color: var(--text-primary);
    background: var(--bg-tertiary);
  }

  /* ─────────────────────────────────────────────────────
     6. PAGE HEADER — compact on mobile
  ───────────────────────────────────────────────────── */
  .page-header {
    padding: 10px 14px;
    gap: 8px;
  }
  .page-header h2 { font-size: 17px; }

  /* Shrink the search box so it fits in the header row */
  .search-input {
    width: 110px !important;
    font-size: 14px;
  }
  .search-input:focus { width: 180px !important; }

  /* ─────────────────────────────────────────────────────
     7. PAGE CONTENT — touch scroll + clearance for FABs
  ───────────────────────────────────────────────────── */
  .page-content {
    padding: 14px;
    /* Bottom clearance so content is never hidden behind the
       fixed FABs (52px button + 24px bottom + 12px gap = 88px) */
    padding-bottom: 88px;
    /* Momentum scrolling on older iOS */
    -webkit-overflow-scrolling: touch;
    /* Tell the browser this container scrolls vertically.
       Prevents the browser from waiting for JS before starting
       scroll, which caused the "scroll doesn't work" issue. */
    touch-action: pan-y;
  }

  /* When the timer dock is visible it adds ~60px at the bottom.
     Increase page-content clearance to match. */
  body:has(.task-timer-dock:not(.hidden)) .page-content {
    padding-bottom: 152px;
  }

  /* ─────────────────────────────────────────────────────
     8. FABs — reposition since notepad is gone.
     Desktop positions are calculated relative to the notepad
     width (350px + toggle + handle). On mobile we reset them
     to simple right-anchored values.
  ───────────────────────────────────────────────────── */
  .idea-fab       { right: 88px !important; }
  .idea-fab.open  { right: 88px !important; }

  .quick-idea-panel {
    right: 16px !important;
    width: calc(100vw - 32px) !important;
    max-width: 320px;
  }

  .ai-fab { right: 24px !important; }

  .ai-chat-panel {
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    bottom: 90px !important;
  }
  .ai-chat-panel.ai-chat-expanded {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: 85svh !important;
    bottom: 90px !important;
  }
  /* When timer dock is visible, push the chat panel above it */
  body:has(.task-timer-dock:not(.hidden)) .ai-chat-panel,
  body:has(.task-timer-dock:not(.hidden)) .ai-chat-panel.ai-chat-expanded {
    bottom: 152px !important;
  }
  /* Expand button is pointless at full-width, hide it */
  #aiExpandBtn { display: none !important; }

  /* ─────────────────────────────────────────────────────
     9. TASK TIMER DOCK — compact horizontal layout on mobile.
     The 900px breakpoint in style.css switches the dock to a
     tall column layout (~148px). Override it back to a compact
     horizontal row (~58px) so it doesn't eat the viewport.
  ───────────────────────────────────────────────────── */
  .task-timer-dock {
    left: 14px !important;
    right: 14px !important;
    width: calc(100vw - 28px) !important;
    bottom: 14px !important;
    border-radius: 12px;
    /* Restore horizontal layout — override the 900px column rule */
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  /* Hide the low-value "Started X ago" line to save vertical space */
  .task-timer-dock-started { display: none !important; }
  /* Slightly smaller type on the time counter */
  .task-timer-dock-time   { font-size: 20px !important; }
  .task-timer-dock-title  { font-size: 13px !important; }
  .task-timer-dock-side   { flex-wrap: nowrap !important; gap: 8px !important; }
  /* Override the body:has() rule that offsets for the notepad */
  body:has(.notepad-sidebar:not(.notepad-collapsed)) .task-timer-dock {
    right: 14px !important;
  }

  /* ─────────────────────────────────────────────────────
     10. iOS AUTO-ZOOM FIX
     iOS Safari zooms in when an input's font-size is < 16px.
     Setting a floor of 16px prevents this without disabling
     user scaling. Using max() so larger custom fonts are kept.
  ───────────────────────────────────────────────────── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="number"],
  input[type="url"],
  textarea,
  select {
    font-size: max(16px, 1em);
  }

  /* ─────────────────────────────────────────────────────
     11. TOUCH TARGET SIZING
     Apple HIG recommends 44×44pt minimum touch targets.
  ───────────────────────────────────────────────────── */
  .nav-item  { min-height: 44px; }
  .btn       { min-height: 36px; }
  .btn-sm    { padding: 6px 10px !important; min-height: 32px; }
  .btn-icon  { min-width: 36px; min-height: 36px; }

  /* ─────────────────────────────────────────────────────
     12. KANBAN BOARD — touch improvements
  ───────────────────────────────────────────────────── */
  .board-container { -webkit-overflow-scrolling: touch; }

  /* ─────────────────────────────────────────────────────
     13. MODALS — bottom-sheet pattern on mobile.
     Instead of a centred floating box, the modal slides up
     from the bottom like a native sheet. More natural on touch.
  ───────────────────────────────────────────────────── */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    border-radius: 16px 16px 0 0 !important;
    max-height: 88svh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative;
  }
  .task-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92svh !important;
  }

  /* Drag handle pill above the modal header */
  .modal-header {
    position: relative;
  }
  .modal-header::before {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }

  /* ─────────────────────────────────────────────────────
     14. DASHBOARD GRID — single column on mobile.
     .stats-grid already uses auto-fill/minmax so it's fine.
     .dashboard-grid has a fixed 2-column layout.
  ───────────────────────────────────────────────────── */
  .dashboard-grid { grid-template-columns: 1fr !important; }

  /* ─────────────────────────────────────────────────────
     15. STAGES — project summary ring + info side-by-side
     collapses to vertical on narrow screens.
  ───────────────────────────────────────────────────── */
  .stages-project-summary { flex-direction: column !important; }

  /* ─────────────────────────────────────────────────────
     16. TEAM — single-column profile grid
  ───────────────────────────────────────────────────── */
  .profile-grid { grid-template-columns: 1fr !important; }

  /* ─────────────────────────────────────────────────────
     17. TIMELINE — narrow label column + align header
  ───────────────────────────────────────────────────── */
  /* Only max-width is set here — the JS TL.labelWidth = 90 now
     writes the matching inline style, so width/min-width agree
     without needing !important. max-width caps any resize attempt. */
  .tl-labels-col,
  .tl-labels-header {
    max-width: 90px !important;
  }
  /* Reduce deep-row indentation so text is readable at 90px.
     Without this, subtask rows have ~15px of visible text. */
  .tl-row-sprint  { padding-left: 12px !important; }
  .tl-row-task    { padding-left: 16px !important; }
  .tl-row-subtask { padding-left: 20px !important; }
  .tl-container { font-size: 11px; }

  /* ─────────────────────────────────────────────────────
     18. PRODUCER LAYOUT — already has a 768px breakpoint in
     style.css but the board-side panel calc was notepad-relative.
     Ensure the main panel takes full width cleanly.
  ───────────────────────────────────────────────────── */
  .producer-main { min-width: 0; }

  /* ─────────────────────────────────────────────────────
     19. NOTIFICATION DROPDOWN — clamp width so it doesn't
     overflow a 375px screen. right:0 already anchors it to
     the bell; the 360px fixed width is the problem.
  ───────────────────────────────────────────────────── */
  .notif-dropdown {
    width: min(360px, calc(100vw - 20px));
  }

  /* ─────────────────────────────────────────────────────
     20. KANBAN BOARD HEIGHT — replace 100vh with 100svh so
     the board doesn't get clipped behind the browser chrome
     on iOS. Smaller offset because the header is more compact.
  ───────────────────────────────────────────────────── */
  @supports (height: 100svh) {
    .board-container { height: calc(100svh - 130px); }
  }

  /* ─────────────────────────────────────────────────────
     21. PAGE HEADER OVERFLOW — at very narrow widths the
     right-hand action buttons wrap to a second row cleanly.
  ───────────────────────────────────────────────────── */
  .page-header-right {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ─────────────────────────────────────────────────────
     22. TIMELINE ZOOM CONTROL — the zoom range + Today + Save
     buttons are injected into pageActions. Shrink the range
     so it fits in the compact mobile header.
  ───────────────────────────────────────────────────── */
  #tlZoom { width: 56px !important; }

  /* ─────────────────────────────────────────────────────
     23. TASK LIST — card layout on mobile.
     The 3-section grid (min ~956px wide) is replaced by a
     stacked flex column per task so it fits any phone width.
     The expand/subtask body and all click handlers are
     unchanged — this is CSS-only.
  ───────────────────────────────────────────────────── */

  /* Column header row is meaningless in card mode */
  .board-col-headers { display: none !important; }

  /* Kill the CSS-variable-driven 3-column grid */
  .board-list-groups {
    --board-grid-left:   1fr !important;
    --board-grid-center: 0px !important;
    --board-grid-right:  0px !important;
    --board-grid-gap:    0px !important;
  }

  /* Each task: flex column instead of a wide 3-section grid */
  .board-list-group .accordion-task-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
  }

  /* Row 1: checkbox + expand icon + title — already flex, nothing to change */
  .board-row-left { width: 100% !important; }

  /* Row 2: status + priority + assignee pills in a wrapping row */
  .board-row-center {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 0 0 0 64px !important; /* indent under title, past checkbox+expand */
    grid-template-columns: none !important;
  }

  /* Row 3: dates aligned left under the pills */
  .board-row-right {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 0 2px 64px !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
  }

  /* All meta cells: natural/auto width in card mode */
  .board-meta-owner,
  .board-meta-status,
  .board-meta-priority,
  .board-meta-category,
  .board-meta-start,
  .board-meta-due {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* Drop low-value columns — category and start date */
  .board-meta-category { display: none !important; }
  .board-meta-start    { display: none !important; }

  /* Subtask rows: same card treatment */
  .accordion-subtask-row {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    gap: 4px !important;
    padding: 8px 12px 8px 28px !important; /* indent to show subtask nesting */
  }

  /* ─────────────────────────────────────────────────────
     24. MODALS — reduce content density on small screens.
     The bottom-sheet position is handled in section 13.
     This section tightens internal spacing so forms and
     content don't feel cramped or over-padded.
  ───────────────────────────────────────────────────── */
  .modal-header  { padding: 12px 16px !important; }
  .modal-body    { padding: 14px 16px !important; }
  .form-group    { margin-bottom: 12px !important; }

  /* Generic modal (confirm dialogs) doesn't need near-full-height */
  #genericModal .modal { max-height: 65svh !important; }

  /* Patch notes: scrolling long content, full height makes sense */
  .modal.patch-notes-modal {
    height: 92svh !important;
    max-height: 92svh !important;
  }

}
/* end @media (max-width: 768px) */