/* =========================================================================
   mobile.css — dedicated mobile experience layer. Loaded AFTER styles.css so
   its rules win by source order; scoped entirely to <=820px so the desktop
   layout is provably untouched (the desktop cascade never sees these rules).

   What it does, Monday-style:
     1. Turns the desktop left sidebar into an off-canvas nav drawer (hamburger
        + scrim), replacing the old horizontal-strip behavior in styles.css.
     2. Freezes the Item column (and its select checkbox) on the Workspace
        table during horizontal scroll, with a right-edge shadow cue.
     3. Tunes controls for touch: >=16px inputs (kills iOS focus-zoom), bigger
        tap targets, momentum scrolling, safe-area padding.
   ========================================================================= */

/* Hamburger + scrim are part of the DOM on every screen but only revealed on
   mobile. Hidden by default keeps the desktop topbar pristine. */
.nav-toggle { display: none; }
.nav-scrim { display: none; }

@media (max-width: 820px) {
  /* ---------------------------------------------------------------------
     Shell: collapse the two-column grid; the sidebar leaves the flow and
     becomes a fixed off-canvas panel.
     --------------------------------------------------------------------- */
  .app-layout { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;                 /* top:0 right:auto bottom:0 left:0 */
    z-index: 60;
    width: 264px;
    max-width: 82vw;
    height: 100dvh;                    /* dvh respects iOS browser chrome */
    flex-direction: column;            /* undo the 820px row override */
    align-items: stretch;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
    background: var(--surface-2);
    box-shadow: var(--shadow-overlay);
    transform: translateX(-100%);      /* parked off the left edge */
    transition: transform 260ms var(--ease);
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .sidebar-brand { padding: 4px 8px 2px; }
  .sidebar-nav { flex-direction: column; flex: 0 1 auto; }   /* undo row override */
  .sidebar .nav-item { min-height: 44px; }                   /* comfortable tap target */

  /* Dimmed backdrop behind the open drawer. */
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms var(--ease), visibility 260ms var(--ease);
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }                        /* lock page scroll under drawer */

  /* ---------------------------------------------------------------------
     Mobile top bar: hamburger | title (truncates) | search + actions.
     --------------------------------------------------------------------- */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:active { background: var(--accent-soft); }

  .topbar {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 14px;
  }
  .topbar-titles { flex: 1 1 auto; min-width: 0; }
  .topbar-title {
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Collapse the wide search trigger to an icon-only square button. */
  .topbar-search {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    max-width: none;
    padding: 0;
    justify-content: center;
  }
  .topbar-search span { display: none; }
  .workspace-badge { display: none; }                        /* room saver; still in Settings/profile */

  .content { padding: 14px 14px calc(28px + env(safe-area-inset-bottom)); }

  /* ---------------------------------------------------------------------
     Workspace table: freeze the Item column (Monday-style) on horizontal
     scroll. The select (40px) sticks at left:0, the Item column sticks
     right after it at left:40px. Sticky cells need an opaque background
     (else scrolled content shows through) and a right-edge shadow cue.
     --------------------------------------------------------------------- */
  /* Full-bleed table on mobile. The horizontal padding would otherwise leave a
     gutter where scrolled columns peek out to the left of the frozen Item
     column; zeroing it pins the freeze flush to the card edge. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 0;
    padding-right: 0;
  }

  /* .tbl sets overflow:hidden for its rounded corners, which makes the TABLE
     the nearest scroll-container for the sticky cells and silently kills the
     freeze. Drop it on the workspace table so the frozen cells pin to
     .table-wrap (the real scroll container) instead. */
  .sheet-table { overflow: visible; border-radius: 0; }

  .sheet-table thead th:nth-child(1),
  .sheet-table .select-cell {
    position: sticky;
    left: 0;
    z-index: 3;
  }
  .sheet-table thead th:nth-child(2),
  .sheet-table .item-cell {
    position: sticky;
    left: 40px;                         /* parks just right of the 40px select col */
    z-index: 3;
  }
  /* Header cells sit above body cells while scrolling vertically too. */
  .sheet-table thead th:nth-child(1),
  .sheet-table thead th:nth-child(2) { z-index: 4; background: var(--surface-2); }
  .sheet-table .select-cell,
  .sheet-table .item-cell { background: var(--surface); }
  /* Shadow on the Item column's right edge = the "there's more →" cue. */
  .sheet-table thead th:nth-child(2),
  .sheet-table .item-cell { box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.22); }
  /* Keep the frozen cells coherent with their row's hover/selected state. */
  .sheet-row:hover .select-cell,
  .sheet-row:hover .item-cell { background: var(--surface-hover); }
  .sheet-row.is-selected .select-cell,
  .sheet-row.is-selected .item-cell { background: var(--accent-soft); }

  /* ---------------------------------------------------------------------
     Touch ergonomics.
     --------------------------------------------------------------------- */
  /* iOS zooms the viewport when focusing any input < 16px. Force >=16px on
     mobile to stop the jump. */
  .input,
  input,
  select,
  textarea,
  .search-input { font-size: 16px; }

  .select-cell input { width: 18px; height: 18px; }          /* bigger checkbox */
  .sheet-row > td { height: 52px; }                          /* roomier rows to tap */

  /* The right-side panels are already full width on phones; square them off
     and pad for the notch. */
  .drawer-panel {
    width: 100%;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Phone-specific finements (narrowest band). */
@media (max-width: 600px) {
  .board-toolbar { flex-wrap: wrap; }
  .topbar-title { font-size: 18px; }
}