/* ============================================================
   mobile.css — Task Manager v2 Mobile UI  (v2.6.1)
   Loaded after dashboard.css. Overrides desktop styles for
   viewports ≤ 768 px.

   CRITICAL: Never use display:flex !important on .board —
   it overrides dashboard.js board.style.display='none' and
   causes the board to show on top of the list view.
   ============================================================ */

/* ── Hamburger button (hidden on desktop) ─────────────────── */
#hamburgerBtn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--text-primary);
  line-height: 0;
}
#hamburgerBtn:hover { background: var(--bg-secondary); }

/* ── Mobile view-tab bar (Board / List) — hidden on desktop ─ */
#mobileViewTabs { display: none; }

/* ── Manage Sections button — hidden on desktop ────────────── */
#mobileSectionsBtn { display: none; }

/* ── Slide-out drawer ─────────────────────────────────────── */
#mobileDrawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
#mobileDrawerBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
#mobileDrawerPanel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 16px 32px;
  gap: 4px;
  transform: translateX(-100%);
  transition: transform 0.24s ease;
}
#mobileDrawer.open { display: block; }
#mobileDrawer.open #mobileDrawerPanel { transform: translateX(0); }

#mobileDrawerPanel .drawer-workspace-btn {
  background: none;
  border: none;
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  width: 100%;
  transition: background 0.15s;
}
#mobileDrawerPanel .drawer-workspace-btn:hover { background: var(--bg-secondary); }
#mobileDrawerPanel .drawer-workspace-btn.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--bg-secondary);
}
#mobileDrawerPanel .drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}
#mobileDrawerPanel .drawer-action-btn {
  background: none;
  border: none;
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  font-family: inherit;
  width: 100%;
}
#mobileDrawerPanel .drawer-action-btn:hover { background: var(--bg-secondary); }

/* ── Board dots (always in DOM but hidden on desktop) ──────── */
.board-scroll-dots { display: none; }
.board-scroll-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}
.board-scroll-dot.active {
  background: var(--accent);
  transform: scale(1.35);
}

/* ============================================================
   MOBILE OVERRIDES — ≤ 768 px
   ============================================================ */
@media (max-width: 768px) {

  /* ── Prevent page-level horizontal overflow & zoom-out ──── */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    /* Allow vertical panning everywhere; board overrides this for horizontal */
    touch-action: pan-y;
  }
  *, *::before, *::after { box-sizing: border-box; }

  /* ── Header ─────────────────────────────────────────────── */
  header {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
    min-height: 0;
  }
  .header-left {
    flex: 1;
    min-width: 0;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  header svg { flex-shrink: 0; }
  header h1  { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #filePath  { display: none; }

  /* Hide desktop tab/view toggles — replaced by mobile UI */
  #mainTabToggle, #taskViewToggle { display: none !important; }

  /* Show hamburger */
  #hamburgerBtn { display: flex; align-items: center; }

  /* Move Logout and Upgrade entirely into the drawer */
  #openFolderBtn, #upgradeBtn, #saveBtn { display: none !important; }
  .buttons { display: none !important; }

  /* Hide desktop workspace bar */
  .company-bar { display: none !important; }

  /* ── Board / List tab bar ────────────────────────────────── */
  #mobileViewTabs {
    display: flex;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
  }
  #mobileViewTabs button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
  }
  #mobileViewTabs button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
  }

  /* ── Sections button ─────────────────────────────────────── */
  #mobileSectionsBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 28px);
    margin: 10px 14px 0;
    padding: 9px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
  }
  #mobileSectionsBtn:hover { background: var(--bg-secondary); }

  /* ── Board: horizontal scroll-snap columns ──────────────── */
  /* NO display:flex !important here — JS controls visibility with
     board.style.display and inline styles beat CSS without !important */
  .board {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Allow horizontal pan on the board only — overrides body touch-action */
    touch-action: pan-x;
    gap: 12px;
    padding: 10px 14px 20px;
    /* header≈52px + tab-bar≈41px + sections-btn≈49px + some breathing room */
    height: calc(100dvh - 155px);
    align-items: flex-start;
    scrollbar-width: none;
  }
  .board::-webkit-scrollbar { display: none; }

  .column {
    flex: 0 0 calc(92vw - 28px);
    max-width: 360px;
    scroll-snap-align: start;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    /* Columns scroll vertically — override board's pan-x */
    touch-action: pan-y;
  }

  /* Sticky "+" quick-add button in each column header on mobile */
  .column-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
  }
  .column-quick-add-btn {
    display: flex !important; /* always show on mobile */
  }

  /* ── Board dots ──────────────────────────────────────────── */
  .board-scroll-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 6px 0 4px;
    flex-shrink: 0;
  }

  /* ── List view ───────────────────────────────────────────── */
  #listView {
    display: block;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    /* Same height as board so it fills screen properly */
    height: calc(100dvh - 155px);
    padding: 10px 14px 24px;
    box-sizing: border-box;
    touch-action: pan-y;
  }
  .list-section { width: 100%; max-width: 100%; overflow: hidden; }
  .list-section-header { padding: 8px 0; }
  .list-item { padding: 8px 4px; max-width: 100%; }

  /* Quick-add at top of list must be visible */
  .quick-add {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }
  .quick-add-input { min-width: 0; flex: 1 1 120px; }

  /* ── Settings panel ──────────────────────────────────────── */
  #settingsPanel { overflow-x: hidden; }
  #settingsPanelContent {
    margin: 16px 0 !important;
    padding: 0 14px !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }
  /* Every card inside settings must not overflow */
  #settingsPanelContent > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }
  /* Timezone select: full width on mobile */
  #timezoneSelect {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Timezone row: stack label + select vertically on mobile */
  #timezoneSelect ~ label,
  #settingsPanelContent [style*="align-items: center"] label[for="timezoneSelect"],
  #settingsPanelContent div:has(#timezoneSelect) {
    flex-wrap: wrap !important;
  }

  /* Workspace add row: stack input + button vertically */
  #newCompanyName {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* The flex row that holds #newCompanyName and #addCompanyBtn */
  #settingsPanelContent [style*="display: flex"][style*="gap: 10px"] {
    flex-wrap: wrap !important;
  }
  #addCompanyBtn {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Modals: full-width ──────────────────────────────────── */
  .modal-content, .modal-box {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Due date picker: center horizontally ────────────────── */
  .due-date-picker {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    max-width: calc(100vw - 32px) !important;
  }
}