/* Responsive breakpoints:
 * Desktop  (1280px+): full sidebar, all columns visible
 * Tablet   (768-1279px): icon-only sidebar (52px), view tabs overflow
 * Phone    (375-767px, portrait OR landscape): sidebar hidden, bottom navigation,
 *          simplified columns. The `(max-height: 430px)` half of the query below catches
 *          phones held in LANDSCAPE, whose WIDTH (e.g. iPhone 13 landscape = 844px) falls
 *          inside the tablet range above -- without it, a phone in landscape got the
 *          desktop/tablet docked-drawer task panel (78% width, dim backdrop) instead of
 *          the dedicated full-screen phone view, and the sliver of dimmed list behind the
 *          drawer read as "it's just a popup, not a real page". 430px comfortably covers
 *          every current phone's landscape height (iPhone13/SE ~375-390px) while staying
 *          well under any tablet's landscape height (iPad Air landscape = 820px).
 */

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) and (min-width: 768px) {
  .sidebar {
    width: var(--sidebar-collapsed-width);
  }

  .sidebar-logo, .sidebar-workspace-name, .sidebar-section,
  .sidebar-item span, .sidebar-footer .avatar-info {
    display: none;
  }

  .sidebar-item {
    padding: 8px;
    justify-content: center;
  }

  .sidebar-item .space-dot { width: 12px; height: 12px; }

  .sidebar-footer {
    justify-content: center;
    padding: 8px;
  }

  .view-tabs { display: none; }
  .view-tabs-overflow { display: flex !important; }

  .list-header-row,
  .task-row {
    grid-template-columns: 24px 110px 1fr 90px;
  }

  /* Hide due date and priority columns on tablet */
  .col-due, .col-priority { display: none; }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px), (max-height: 430px) {
  .sidebar { display: none; }

  .main-content { padding-bottom: 56px; }

  /* Bottom navigation bar */
  .bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    z-index: 50;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
  }

  .bottom-nav-item.active { color: var(--accent); }

  .task-panel { width: 100%; border-left: none; box-shadow: none; overflow-y: auto; overflow-x: hidden; }

  /* Column headers are redundant on phone once .col-status/.col-due/.col-priority below are
     hidden — the only label left would be "Task name", and status is already conveyed by the
     group header (Open/In Progress/...) above each cluster of rows. Drop the whole row rather
     than let it re-wrap around a near-empty grid. */
  .list-header-row { display: none; }

  .task-row {
    grid-template-columns: 24px 1fr 32px;
  }

  /* Redundant with the group header (status), or low-priority for a glance list on a phone
     (due date, priority) — still reachable by tapping into the task detail panel. Scoped to the
     fixed-column view only — .task-row/.list-header-row set grid-template-columns via this
     stylesheet, so removing a grid ITEM here is safe: the rule above already accounts for the
     resulting track count. Do NOT extend this display:none to .tlv-row/.tlv-header-row (below):
     those set grid-template-columns INLINE per row, so display:none-ing one grid item without
     also removing its track from that inline template just shifts every later column left by
     one slot into the wrong-sized track — see the --tlv-status-w handling below instead. */
  .list-header-row .col-status, .task-row .col-status,
  .col-due, .col-priority { display: none; }

  /* ListPage's List View (dynamic per-List columns — see TaskListView.razor/NestedTaskRow.razor)
     sets grid-template-columns INLINE per row, so none of the display:none tricks above apply to
     it — every fix for it is a var() override on the custom properties that template is built
     from (below). Originally every dynamic column was a literal 110px, which on a 375-414px phone
     made the fixed tracks alone exceed the viewport; because .task-name has overflow:hidden, its
     grid-item auto-minimum collapses to 0 rather than its content size, so the name column
     silently shrank to ~0px while the neighboring cell (e.g. the priority dot) still occupied its
     full 110px track — visually and hit-test-wise landing ON TOP of the invisible task name.
     Confirmed via document.elementFromPoint at the task-name's own center: resolved to the
     priority-dot's wrapper div, so a real tap there mis-hit every time, not just a Playwright
     artifact. Hiding the dynamic columns outright (like .col-due/.col-priority above) isn't an
     option: ColumnDragReorderTests deliberately drags .tlv-col-header cells at the phone viewport
     and documents that "the live-reorder half of this feature works on phone fine". Fixed instead
     by giving the name track a real minimum (minmax(var(--tlv-name-w,100px),1fr), which also keeps
     the header grid and each row grid in step) and narrowing the other tracks below so they fit.
     overflow-x stays as a safety net for a List configured with many columns, where the row
     legitimately can't fit and horizontal scroll beats compressing columns into an overlap. */
  #task-list { overflow-x: auto; }

  /* Status is redundant here too (see .list-header-row/.task-row above — same reasoning, the
     group header already conveys it), but .tlv-row/.tlv-header-row can't just display:none the
     cell (that would shift every later column into the wrong track, see above). Instead
     TaskListView.razor's GridTemplateColumns emits the status track as var(--tlv-status-w,110px)
     specifically so it can be collapsed here: zeroing the custom property shrinks that one track
     to 0 and hands the freed space to the task-name track, while every other track keeps its
     position. overflow:hidden switches the cell's automatic minimum size from its content's
     max-content width down to 0 (same trick .task-name already relies on above) so the 0px track
     actually collapses instead of being forced back open by the status badge's intrinsic size. */
  .tlv-row, .tlv-header-row {
    --tlv-status-w: 0px;

    /* 110px per dynamic column is mostly empty width on a phone — a priority dot is 8px, an
       avatar 22px, a "MMM d" due date ~38px — while the task name (the one column you actually
       read on a phone) sat pinned at its 100px minimum and the row still overflowed a 390px
       viewport by ~200px. Sizing each column to what it renders frees ~180px, all of which goes
       to the name's 1fr track, and the default 3-column list then fits with no horizontal scroll.
       Headers/values wider than these tracks are clipped to them (app.css), not spilled over. */
    --tlv-col-icon-w: 30px;    /* priority dot */
    --tlv-col-avatar-w: 48px;  /* assignee avatar stack */
    --tlv-col-date-w: 58px;    /* due/start/created/updated — "MMM d" */
    --tlv-col-w: 64px;         /* everything else: counts, estimates, custom fields */

    /* Trailing "+ Add column" track: header-only, so it's dead width in every data row. Managing
       columns needs room this view doesn't have on phone, so drop the track (and its button)
       entirely rather than just narrowing it -- the header no longer needs to share its row with
       an action button at all. */
    --tlv-add-w: 0px;
  }
  .tlv-add-col-btn { display: none; }
  .tlv-row .col-status, .tlv-header-row .col-status { overflow: hidden; min-width: 0; }

  /* Desktop drag-resize only — phone tracks are already clamped via the --tlv-* vars above. */
  .tlv-col-resize { display: none !important; }

  .topbar { padding: 0 52px 0 52px; }
  .topbar .breadcrumb { font-size: 11px; }

  .view-tabs { display: none; }
  /* TASK-254: .view-tabs-overflow existed as a CSS hook (already wired for tablet, above) but had
     no phone-breakpoint override and no matching markup at all -- base views (List/Board/Calendar/
     Gantt/Table/Workload) were unreachable on phone with no fallback. Fixed by adding the actual
     <select> in ListPage.razor and this override. */
  .view-tabs-overflow { display: flex !important; }
  /* Hide secondary toolbar buttons on mobile — keep only the primary "New Task" button */
  .topbar-actions .btn-ghost { display: none; }
  /* Icon-only New Task button on mobile */
  .new-task-label { display: none; }

  .kanban-column { width: 85vw; }
  .board-content { padding: 8px; }

  /* TASK-290: BoardItemHubPage (Dashboards/Forms/Whiteboards/Mind Maps) and DocsPage share a
     wide 6-9 column table. On a 390px iPhone the row's bounding-box center and the trailing
     "..." settings button sat past the overflow-x:auto edge (or under main.tmain), so real
     clicks failed. Hide secondary columns and the 240px hub sidenav; keep Name + Sharing +
     menu. !important beats the sidenav's inline display:flex and the wrap's inline padding.
     overflow-x:visible so the wrap is not a nested scroller that steals scroll-into-view
     from .main-content (inline overflow-x:auto otherwise computes overflow-y to auto too).
     Templates become a horizontal strip -- Whiteboards has 6 stacked cards that otherwise
     push the table below the fold.
     TASK-326: .hub-phone-filters (All/My/Shared/Private/Favorites chips) replaces the hidden
     sidenav so those views stay reachable without bringing back the 240px column. */
  .hub-sidenav { display: none !important; }
  .hub-phone-filters {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    padding: 4px 12px 10px;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .hub-phone-filters .filter-chip { flex: 0 0 auto; }
  .hub-phone-filters .filter-chip.active {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
  }
  .hub-col-phone-hide { display: none; }
  .hub-table-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: visible !important;
  }
  .hub-table { table-layout: fixed; }
  .hub-templates {
    display: flex !important;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
  }
  .hub-templates .dash-tpl-card { flex: 0 0 220px; }
}

/* Hidden by default — shown only at specific breakpoints */
.bottom-nav { display: none; }
.view-tabs-overflow { display: none; }
.panel-mobile-back { display: none; }
.hub-phone-filters { display: none; }

/* ── Mobile hamburger (hidden on desktop) ───────────────────────────────── */
.mobile-nav-toggle { display: none; }

/* ── 3-pane shell mobile layout ─────────────────────────────────────────── */
@media (max-width: 767px), (max-height: 430px) {
  /* Top search bar collides with the hamburger on narrow screens; full search is still reachable from the nav. */
  .topsearch { display: none; }

  /* The workspace switcher lives ONLY in the top bar (it was moved out of the submenu drawer), so
     it must stay visible on mobile — otherwise there's no way to change companies on a phone.
     Pad the bar left to clear the fixed hamburger, and drop the secondary quick-action icons
     (all reachable from the profile menu / bottom nav) so the switcher + avatar fit.
     Selector must be `.tshell .tshell-topbar` (not bare `.tshell-topbar`) to match app.css's
     `.tshell .tshell-topbar { padding: 0 16px }` specificity — otherwise that non-media-query
     rule always wins regardless of load order and this padding-left never applies. */
  .tshell .tshell-topbar { padding-left: 54px; }
  .tshell-toolbar-icons { display: none; }

  /* Hamburger button */
  .mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: fixed;
    top: 8px;
    left: 10px;
    z-index: 600;
    width: 36px;
    height: 36px;
    background: var(--surface-1, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  }
  .mobile-nav-toggle span {
    display: block;
    height: 2px;
    width: 18px;
    background: var(--text-primary, #1e293b);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }

  /* Rail + submenu: off-screen by default, slide in when nav-open. padding-top clears the fixed
     hamburger's footprint (top:8px, 36px tall, z-index:600 — above the rail's z-index:510): without
     it the rail's first item lands directly under the toggle button and is unclickable (the toggle
     wins the stacking order and intercepts the click). */
  .rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    padding-top: 56px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 510;
  }
  .submenu {
    position: fixed;
    top: 0; bottom: 0;
    left: 0;
    transform: translateX(calc(-100% - var(--rail-width, 54px)));
    transition: transform .25s ease;
    z-index: 509;
  }
  .tshell.nav-open .rail {
    transform: translateX(0);
  }
  .tshell.nav-open .submenu {
    transform: translateX(var(--rail-width, 54px));
  }

  /* Backdrop behind the nav drawer */
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 508;
  }

  /* Desktop << / >> are irrelevant on phone — hamburger owns open/close. Also force the
     submenu back to full width even if the user collapsed it on desktop (localStorage),
     otherwise the slide-in drawer would open empty. */
  .rail-expand-btn,
  .rail-expand-divider,
  .sidebar-toggle-btn { display: none !important; }
  .submenu.submenu-collapsed {
    width: var(--submenu-width);
    border-right: 1px solid var(--sidebar-border, #e2e8f0);
  }

  /* Main content takes full width since nav is overlaid */
  .tmain { width: 100%; }

  /* Task detail panel: always the dedicated full-page view on phone, not just full-width --
     no dim backdrop, and the hamburger is hidden so nothing else competes for the little space
     there is. Unlike the desktop .fullscreen rule in app.css, `top` is forced to 0 here rather
     than left at --topbar-height: leaving that strip uncovered exposed the underlying page's
     own toolbar/filter row above the "<- Back" button, which is exactly what made this read as
     a popup floating over a still-visible, still-scrollable list instead of its own full-screen
     page. The panel supplies its own back affordance (.panel-mobile-back below), so covering the
     global topbar entirely on phone is correct, not a regression.
     The desktop/tablet full-screen toggle button (task-panel-fullscreen-toggle,
     TaskDetailPanel.razor) is redundant here since this is already forced, so it's hidden too. */
  .task-panel-overlay { top: 0; left: 0; background: var(--surface-1); }
  .task-panel-fullscreen-toggle { display: none; }
  /* The global top bar sits at z-index:500, above the overlay's z-index:100, ON PURPOSE for the
     docked desktop/tablet drawer (see app.css) -- but now that the phone overlay covers `top:0`
     too, that same z-index ordering makes the (still-rendered, still-clickable) top bar physically
     overlap the panel's own header/back button and swallow taps meant for the panel. Hiding it
     here, scoped to only while a task/fields panel is open, is what makes this an actual
     standalone full-screen page instead of a page-within-a-page fighting over the same strip. */
  body:has(.task-panel-overlay) .tshell-topbar,
  body:has(.fields-panel-overlay) .tshell-topbar { display: none; }

  /* Fields panel (the "+ Add" column picker, FieldsPanel.razor) hard-codes its overlay's left
     inset to rail-width + submenu-width (app.css) -- on phone the sidebar is gone but those CSS
     vars still hold their desktop values, so the overlay's visible sliver sat pinned to the far
     right edge, clipping the 380px panel down to almost nothing. Same full-screen-page treatment
     as .task-panel-overlay above; the existing .task-panel-close (X) button is enough to dismiss
     it here, so no extra back-button markup is needed like the task detail panel required. */
  .fields-panel-overlay { top: 0; left: 0; background: var(--surface-1); }
  .fields-panel { width: 100%; }
  body:has(.task-panel-overlay) .mobile-nav-toggle { display: none; }
  /* Show the in-panel back button on mobile, pinned to the top of the now-scrolling .task-panel
     (see below) so it stays reachable no matter how far down the props bar / content is scrolled. */
  .panel-mobile-back {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-1);
  }

  /* Props bar: single column on mobile so label + value don't overflow narrow screens. Single-column
     stacking makes this section much taller (one row per field instead of 3-up), which is exactly why
     it can no longer be pinned above a separately-scrolling .task-panel-main like on desktop -- that
     left the props bar eating most of the phone screen while only the content below it could scroll.
     Instead .task-panel itself becomes the one scroll container (width rule above) so the props bar
     scrolls away with everything else; .task-panel-main's own overflow (set for the desktop/tablet
     two-pane layout, and independently by the @container breakpoint in app.css for the stacked
     Activity/Comments case) is cleared here so there's only one scrolling ancestor, not two nested
     ones fighting over touch-scroll input. */
  .task-props-bar { grid-template-columns: 1fr !important; }
  .task-props-bar .prop-row:nth-child(3n),
  .task-props-bar .prop-row:nth-child(2n) { border-right: none; }
  .task-panel-main { overflow: visible; flex: none; }

  /* Map view (TASK-257): the fixed 220px sidebar next to the map leaves no usable map width on a
     375px phone -- stack sidebar under map instead, both scrollable in place of a side-by-side split. */
  .map-layout { flex-direction: column; overflow-y: auto; }
  .map-canvas { min-height: 260px; flex: none; }
  .map-sidebar { width: 100%; max-height: 180px; border-left: none; border-top: 1px solid var(--border); }
}