/* Mobile/tablet corrections for the desktop-first Claude Design export.
 * The page is client-rendered; build-app.py stamps data-m tokens on the
 * elements this file targets (inline styles win otherwise, hence !important).
 *
 * Breakpoints: ≤1279 tight desktop · ≤1023 iPad portrait · ≤699 phone. */

/* ---------- all widths: touch-drag targets (see touch-drag.js) ---------- */
/* A long press on these starts a drag, so suppress the OS text-selection
 * callout that the same gesture would otherwise raise. */
[data-m~="appt"], [data-m~="sday"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- all widths: the swipeable story cards ---------- *
 * These carry a horizontal swipe between cards (app-behavior.js), so the
 * browser's own gestures have to stay out of the way. pan-y keeps vertical
 * scrolling — which these cards need, they're taller than the screen — while
 * reserving sideways drags for the swipe, and stops a diagonal drag turning
 * into a horizontal page pan. Suppressing selection keeps a press from
 * raising the text callout instead. */
/* An expanded card sits between previews of its neighbours. All three are
 * statically positioned, so they paint in document order and the *next*
 * preview lands on top of the card — the card slid over its left neighbour but
 * under its right one. Lifting the card onto its own stacking level puts it
 * above both. */
[data-m~="mvdet"],
[data-m~="wldet"] {
  position: relative;
  z-index: 2;
}

/* The inline cards slide their contents while the tile itself stays planted,
 * so the tile has to clip — otherwise the copy escapes its rounded frame and
 * runs across the page. The expanded views move as a whole and scroll
 * vertically, so they must not be clipped. */
[data-m~="moves"],
[data-m~="wlcard"] {
  overflow: hidden;
}

[data-m~="moves"],
[data-m~="wlcard"],
[data-m~="wldet"],
[data-m~="mvdet"] {
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- all widths: the schedule's hour rules ---------- *
 * The export paints the grid with a 1px repeating-linear-gradient over a 72px
 * period. Time runs top to bottom, so those are the hour rules — 9 AM at 0,
 * 6 PM at 648 — and the labels in the gutter sit against them. A 1px stop only
 * survives when a CSS pixel is a whole device pixel: at a fractional ratio
 * (browser zoom, a scaled display) the browser spreads each rule across two
 * device rows at part of its alpha, and --line1 is faint enough (.09) that
 * half of it reads as nothing. Which hours vanish depends on where each rule
 * falls in the repeat, so the board showed a few hours and dropped the rest.
 *
 * One 2px rule per 72px tile instead: the tile is rasterised once and
 * repeated, so no hour can round away, and 2px always covers a whole device
 * pixel at every ratio. The rules paint under everything the columns hold —
 * background, so appointments, the drag ghost and the now line all keep their
 * stacking.
 *
 * The rules belong to the chair columns and stop there. The 56px time rail to
 * their left carries the 9 AM–6 PM labels and nothing else: a tick there reads
 * as the rule running out into the margin between two times, so the rail is
 * held clear of them. */
[data-m~="sday"] {
  background-image: linear-gradient(180deg, var(--line1, rgba(23, 18, 15, 0.09)) 0 2px, transparent 2px) !important;
  background-size: 100% 72px !important;
  background-repeat: repeat-y !important;
  background-position: 0 0 !important;
}

[data-m~="sgut"],
[data-m~="sgutb"] {
  background-image: none !important;
}

/* ---------- ≥700px: the sidebar is fixed chrome ---------- *
 * Nothing in it scrolls, but a drag over it still rubber-bands the page on
 * iPadOS, which reads as the nav sliding around. Refusing the gesture outright
 * keeps it planted; taps are unaffected. Below this width the sidebar becomes
 * the top bar and its nav scrolls sideways, so this must not apply there. */
@media (min-width: 700px) {
  [data-m~="side"] {
    touch-action: none;
    overscroll-behavior: none;
  }
}

/* ---------- ≤1279px: staff-header chips crowd out the names ---------- */
@media (max-width: 1279px) {
  [data-m~="scol"] span[style*="margin-left"] { display: none !important; }
}

/* ---------- ≤1023px: iPad portrait ---------- */
@media (max-width: 1023px) {
  /* staff header cells: make room for full names on ~105px columns */
  [data-m~="scol"] { padding: 12px 8px !important; gap: 6px !important; }
  [data-m~="scol"] > span[style*="background-image"] {
    width: 22px !important;
    height: 22px !important;
  }
  /* the two big insights cards stack; small stat cards go 2-up */
  [data-m~="sp5"], [data-m~="sp7"] { grid-column: 1 / -1 !important; }
  [data-m~="sp3"], [data-m~="sp4"] { grid-column: span 6 !important; }
  /* clients/inbox master-detail: side-by-side starves the detail pane */
  [data-m~="duo"] { grid-template-columns: 1fr !important; }
  [data-m~="listpane"] { position: static !important; max-height: 420px !important; }
  [data-m~="tiles"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- ≤699px: phone ---------- */
@media (max-width: 699px) {
  [data-m~="shell"] {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  [data-m~="mainc"] { height: auto !important; overflow-y: visible !important; }

  /* sidebar becomes a sticky top bar with a horizontally scrollable nav */
  [data-m~="side"] {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(23, 18, 15, 0.08) !important;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg, #F3F3F1);
  }
  [data-m~="side"] nav {
    display: flex !important;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    gap: 2px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-m~="side"] nav::-webkit-scrollbar { display: none; }
  [data-m~="side"] nav > * {
    flex: none;
    white-space: nowrap;
    width: auto !important;   /* items carry inline width:100% */
    padding: 9px 12px !important;
  }
  [data-m~="sfoot"] { display: none !important; }

  main section { padding: 20px 16px 48px !important; }

  /* every multi-column card goes full width */
  [data-m~="g12"] { gap: 14px !important; }
  [data-m~="sp3"], [data-m~="sp4"], [data-m~="sp5"], [data-m~="sp7"] {
    grid-column: 1 / -1 !important;
  }
  [data-m~="afit"] { grid-template-columns: 1fr !important; }
  [data-m~="pair"] { grid-template-columns: 1fr !important; }

  /* Settings. An implicit `auto` track refuses to shrink below its contents,
   * so the column is pinned to minmax(0,…) to let it fit the screen. The
   * label-plus-control rows then stack, because the segmented pill groups
   * ("1h 2h 4h 12h 24h") don't fit beside their label at this width. */
  [data-m~="stack"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m~="setrow"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
  }
  [data-m~="seg"] { flex-wrap: wrap !important; }

  [data-m~="listpane"] { max-height: 330px !important; }

  /* schedule becomes a horizontally scrollable board */
  [data-m~="schedcard"] { overflow-x: auto !important; }
  [data-m~="schedcard"] > div { min-width: 640px; }

  /* client appointment history: drop the barber column, tighten the rest */
  [data-m~="hist"] {
    grid-template-columns: 44px minmax(0, 1fr) 46px 74px !important;
    gap: 8px !important;
  }
  [data-m~="hist"] > *:nth-child(3) { display: none !important; }

  /* analytics table rows tighten */
  [data-m~="asked"] {
    grid-template-columns: minmax(0, 1.6fr) 58px 54px 64px !important;
    gap: 8px !important;
  }
  [data-m~="chairs"] {
    grid-template-columns: 30px minmax(90px, 1fr) 70px 56px !important;
    gap: 8px !important;
  }
  [data-m~="chairs"] > *:nth-child(4) { display: none !important; }
}