/*
 * Touch and small-screen corrections for Piper Alaska.
 *
 * The app is a minified bundle with no source, so nothing here edits it —
 * these are overrides layered on top, loaded after the bundle's own styles.
 * Keep this file small and keep every rule justified: an override with no
 * reason next to it is impossible to safely remove later.
 */

/* ------------------------------------------------------------------ *
 * The calendar grid overflowed its container on phones
 * ------------------------------------------------------------------ *
 * The bundle asks for `repeat(7, 1fr)`, which reads as "seven equal
 * columns" but is really `repeat(7, minmax(auto, 1fr))`. The `auto`
 * floor means a track will not shrink below its content's min-content
 * width — and each day cell carries a row of platform dots plus a "+N"
 * badge, which together bottom out around 52px.
 *
 * On a 390px iPhone the container offers 332px, while seven 52px tracks
 * plus six 4px gaps demand 388px. The grid overflowed by ~56px and the
 * Sunday column was clipped away by `overflow-x: hidden` further up, so
 * it failed silently rather than scrolling.
 *
 * minmax(0, …) removes the floor and lets the tracks share what is
 * actually available. Applied at every width because the bug is not
 * phone-specific, it is just only visible once space runs out.
 */
.cc-cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

/* Grid and flex children default to min-width:auto, which is the same
   floor one level down. Without these the cells reintroduce it. */
.cc-cell,
.cc-cell-dots {
  min-width: 0 !important;
}

/* The dots are decoration; the date must never be pushed out by them. */
.cc-cell-dots {
  overflow: hidden !important;
}

/* ------------------------------------------------------------------ *
 * The Dashboard scrolled the whole page sideways
 * ------------------------------------------------------------------ *
 * Same root cause one tab over. The dashboard column is a flex
 * container, so its children inherit `min-width: auto` and refuse to
 * shrink below the intrinsic width of the widest thing inside — here a
 * 520px campaigns table. That floor propagated all the way out and made
 * <main> 578px wide on a 390px screen, so the entire page slid
 * horizontally instead of the table scrolling on its own.
 *
 * The app already ships `.cc-tablewrap { overflow-x: auto }` for exactly
 * this. It simply never got the chance to work, because nothing above it
 * was allowed to be narrower than its contents. Releasing the floor
 * hands the scroll back to the wrapper where it belongs.
 *
 * `!important` throughout this file is not laziness. The bundle injects
 * its stylesheet at runtime, after this <link> has been parsed, so on
 * equal specificity the bundle would win the cascade. Overrides here have
 * to outrank it explicitly.
 */
.cc-dash-col,
.cc-panel {
  min-width: 0 !important;
}

/* ------------------------------------------------------------------ *
 * Touch targets
 * ------------------------------------------------------------------ *
 * Several controls sit at 28–34px tall, below the 44px Apple asks for.
 * Scoped to coarse pointers so mouse-driven layouts keep their density.
 */
@media (pointer: coarse) {
  .cc-modebtn,
  .cc-cal-nav,
  .cc-cal-today,
  .cc-btn,
  .cc-help-btn {
    min-height: 44px !important;
  }

  /* Padding rather than height on inputs: a min-height on a date input
     leaves the text pinned to the top on iOS instead of centring. */
  input,
  select {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* iOS zooms the page when a focused input has a font-size under 16px,
     and does not zoom back out on blur. That one-way zoom is the single
     most common way a mobile web form comes to feel broken. */
  input,
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }

  /* Kill the grey flash on tap; the app has its own active states. */
  button,
  a,
  .cc-cell {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ------------------------------------------------------------------ *
 * Scrolling
 * ------------------------------------------------------------------ */

/* The app scrolls inside <main>, not the document. Contain the scroll
   chain so a flick at the end of the list does not rubber-band the page
   behind it. */
.cc-main {
  overscroll-behavior-y: contain;
}

/* Belt and braces: nothing should ever scroll the document sideways. */
html,
body {
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ *
 * Recruit pipeline: statuses and column count
 * ------------------------------------------------------------------ *
 * The pipeline moved from New Lead / Warm / Joined / Passed to
 * New / Left Message / Appointment / Onboarded / Passed, and gained
 * City and State columns.
 *
 * The status pill's class is derived at runtime — the bundle builds
 * `cc-pipe-${status.replace(/\s+/g,"").toLowerCase()}` — so three of
 * the five classes below simply did not exist before and had to be
 * defined somewhere. Here rather than in the bundle: they are pure
 * presentation, and CLAUDE.md's standing rule is to solve outside the
 * minified file wherever possible. The bundle's own cc-pipe-newlead,
 * cc-pipe-warm, and cc-pipe-joined rules are now dead but harmless,
 * and are left alone rather than surgically removed.
 *
 * Colours follow the funnel: neutral at intake, amber while chasing,
 * terracotta once something is booked, solid sage for the win, struck
 * through when it's over.
 */
.cc-select.cc-pipe-new {
  color: var(--muted) !important;
}

.cc-select.cc-pipe-leftmessage {
  color: #8a6d1e !important;
  background: #f7f0dc !important;
  border-color: #e7d9ae !important;
}

.cc-select.cc-pipe-appointment {
  color: #9a4f35 !important;
  background: #f6e7e0 !important;
  border-color: #e8cdc1 !important;
}

.cc-select.cc-pipe-onboarded {
  color: #fff !important;
  background: var(--sage-deep) !important;
  border-color: var(--sage-deep) !important;
}

/* Eight columns do not fit in the 520px floor the bundle sets for every
   cc-table — at that width each column is ~65px and the phone/email
   values are unreadable. Raising the floor lets `.cc-tablewrap`'s
   existing `overflow-x: auto` scroll it instead of crushing it.

   Scoped with :has() to the one table that contains status pills, so the
   DM outreach and dashboard tables keep their current width. Browsers
   without :has() (none that run this PWA) just keep the 520px floor and
   still scroll — the fallback is cramped, not broken. */
.cc-tablewrap:has(.cc-select[class*='cc-pipe-']) .cc-table {
  min-width: 760px !important;
}

/* "Left Message" and "Appointment" are wider than the 14% the Status column
   asks for, and a <select> clips rather than wrapping — they rendered as
   "Left Me" and "Appoin", which is unreadable on the one screen where she
   needs to see status at a glance.

   Giving the control a floor is enough: the table is auto-layout, so the
   column grows to fit and the wrapper scrolls the extra. Doing it here
   rather than widening the column in the bundle keeps the fix next to its
   reason, and it stays correct if a longer status is ever added. */
.cc-table .cc-select[class*='cc-pipe-'] {
  min-width: 136px !important;
}