/* ─────────────────────────────────────────────────────────────────────────────
 * PHASE 102 — Beta polish layer
 *
 * Targeted fixes from the cross-feature audit (desktop + mobile @ 375x812):
 *   1. Horizontal overflow on tab strips and tables on small viewports
 *   2. Sub-36px tap targets for delete / re-order / quick-action micro buttons
 *   3. Color-swatch grid in Locations spilling past the right edge
 *   4. Misc safety / media / callsheet tables that don't fit a 375px column
 *
 * Conventions:
 *   • Mobile-targeted rules live under @media (max-width: 760px) so they don't
 *     change the desktop layout.
 *   • Tap-target rules apply at all viewports — a 36px minimum is a baseline
 *     accessibility win on desktop too.
 *   • Order in index.html: load AFTER phase101 so we can override.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── CRITICAL: enforce .hidden across apps whose renderers set inline display
 * ─────────────────────────────────────────────────────────────────────────
 * The Ops Desks (PCC, Safety, Media, Continuity) render with inline
 * `style.display = 'flex'`, which beats the .hidden class's `display: none`.
 * Result: once visited, those panels stayed mounted under whichever view the
 * user navigated to next — visible if you scrolled. Audit caught this on
 * mobile where stacked apps pushed layout to ~3000px.
 *
 * Force `.hidden` to win for these specific apps. Limited scope so we don't
 * change other parts of the app that rely on toggling .hidden + inline style.
 * ────────────────────────────────────────────────────────────────────── */
[id$="-app"].hidden {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Some specialty apps load their own CSS that pins display:flex with
 * id-level specificity (e.g. wardrobe-department-v2 uses
 * #wardrobe-app.wdb-app). When .hidden is added by the view manager, that
 * id rule still wins and the pane keeps occupying flex space — pushing
 * the active pane sideways by ~16-32px. Explicit overrides below match
 * id specificity so .hidden actually hides them. */
body #wardrobe-app.hidden,
body #documentary-app.hidden,
body #adtreatment-app.hidden,
body #festival-app.hidden,
body #musicvideo-app.hidden,
body #podcast-app.hidden,
body #cine-app.hidden,
body #pcc-app.hidden,
body #safety-app.hidden,
body #media-app.hidden,
body #continuity-app.hidden,
body #spatial-app.hidden,
body #seriesroom-app.hidden,
body #char-builder-app.hidden,
body #stripboard-app.hidden,
body #callsheet-app.hidden,
body #shotlist-app.hidden,
body #schedule-app.hidden,
body #budget-app.hidden,
body #locations-app.hidden,
body #contacts-app.hidden,
body #auditions-app.hidden,
body #wardrobe-app.hidden,
body #props-app.hidden,
body #artdept-app.hidden,
body #reports-app.hidden,
body #heatmap-app.hidden,
body #dood-app.hidden,
body #storyboard-app.hidden,
body #corkboard-app.hidden {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ── Belt-and-suspenders: keyed off body[data-active-view], hide every
 * app pane inside .view-container that isn't the active one. This catches
 * the case where the .hidden class isn't (re-)applied by the setView
 * wrapper chain (e.g., async stabilizeView reactivating an old pane).
 * The body attribute is set synchronously by setView and is the most
 * reliable single source of truth for "which app pane should be visible".
 * ─────────────────────────────────────────────────────────────────── */
body[data-active-view$="-app"] .view-container > [id$="-app"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* Same rule for app panes that sit directly on body (pcc, safety, media, continuity) */
body[data-active-view$="-app"] > [id$="-app"]:not([id="spatial-app"]):not([id="documentary-app"]):not([id="adtreatment-app"]):not([id="festival-app"]):not([id="musicvideo-app"]):not([id="podcast-app"]) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Re-show only the active pane */
/* Flex-layout panes (sidebar + editor, canvas, etc.) */
body[data-active-view="writer-app"]      .view-container > #writer-app,
body[data-active-view="corkboard-app"]   .view-container > #corkboard-app,
body[data-active-view="seriesroom-app"]  .view-container > #seriesroom-app,
body[data-active-view="spatial-app"]     .view-container > #spatial-app {
  display: flex !important;
  height: auto !important;
  overflow-y: auto !important;
}
/* Block-layout panes */
body[data-active-view="char-builder-app"].view-container > #char-builder-app,
body[data-active-view="char-builder-app"] .view-container > #char-builder-app,
body[data-active-view="stripboard-app"]  .view-container > #stripboard-app,
body[data-active-view="reports-app"]     .view-container > #reports-app,
body[data-active-view="heatmap-app"]     .view-container > #heatmap-app,
body[data-active-view="callsheet-app"]   .view-container > #callsheet-app,
body[data-active-view="shotlist-app"]    .view-container > #shotlist-app,
body[data-active-view="contacts-app"]    .view-container > #contacts-app,
body[data-active-view="auditions-app"]   .view-container > #auditions-app,
body[data-active-view="locations-app"]   .view-container > #locations-app,
body[data-active-view="schedule-app"]    .view-container > #schedule-app,
body[data-active-view="dood-app"]        .view-container > #dood-app,
body[data-active-view="budget-app"]      .view-container > #budget-app,
body[data-active-view="storyboard-app"]  .view-container > #storyboard-app,
body[data-active-view="wardrobe-app"]    .view-container > #wardrobe-app,
body[data-active-view="props-app"]       .view-container > #props-app,
body[data-active-view="artdept-app"]     .view-container > #artdept-app,
body[data-active-view="cine-app"]        .view-container > #cine-app,
body[data-active-view="pcc-app"]         .view-container > #pcc-app,
body[data-active-view="safety-app"]      .view-container > #safety-app,
body[data-active-view="media-app"]       .view-container > #media-app,
body[data-active-view="continuity-app"]  .view-container > #continuity-app,
body[data-active-view="documentary-app"] .view-container > #documentary-app,
body[data-active-view="adtreatment-app"] .view-container > #adtreatment-app,
body[data-active-view="festival-app"]    .view-container > #festival-app,
body[data-active-view="musicvideo-app"]  .view-container > #musicvideo-app,
body[data-active-view="podcast-app"]     .view-container > #podcast-app {
  display: block !important;
  height: auto !important;
  overflow-y: auto !important;
}
/* Re-show body-level panes (pcc, safety, media, continuity sit outside .view-container) */
body[data-active-view="pcc-app"]         > #pcc-app,
body[data-active-view="safety-app"]      > #safety-app,
body[data-active-view="media-app"]       > #media-app,
body[data-active-view="continuity-app"]  > #continuity-app {
  display: block !important;
  height: auto !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  padding: revert !important;
  margin: revert !important;
}

/* ── App panes: fill viewport height, hide body background bleed ──────
 * Every active app pane should stretch to at least 100% of the
 * view-container so the tan body background never peeks through. */
body[data-active-view$="-app"] .view-container > [id$="-app"]:not(.hidden),
body[data-active-view="pcc-app"] > #pcc-app,
body[data-active-view="safety-app"] > #safety-app,
body[data-active-view="media-app"] > #media-app,
body[data-active-view="continuity-app"] > #continuity-app {
  min-height: 100% !important;
  box-sizing: border-box;
}

/* ── Body background override on desktop ─────────────────────────────
 * wardrobe-local-png-rebuild.css paints body tan. On desktop we match
 * the neutral grey used by most app pane backgrounds. */
body[data-active-view$="-app"]:not(.is-home) {
  background: #f3f4f6 !important;
}

/* ── Writer desktop polish ────────────────────────────────────────────── */

/* 1. Center the script page in the editor frame */
body[data-active-view="writer-app"] #editor-frame {
  align-items: center !important;
}
body[data-active-view="writer-app"] #pages-container {
  margin-left: auto;
  margin-right: auto;
}

/* 2. Lighter, cleaner editor background — warm grey instead of muddy tan */
body[data-active-view="writer-app"] #editor-frame {
  background: #e8e4de !important;
  background-image:
    radial-gradient(rgba(0,0,0,.03) 15%, transparent 16%),
    radial-gradient(rgba(0,0,0,.03) 15%, transparent 16%) !important;
  background-size: 4px 4px, 4px 4px !important;
  background-position: 0 0, 2px 2px !important;
}

/* 3. Sidebar scrolls independently so scenes + elements don't clip */
body[data-active-view="writer-app"] #writer-app > .sidebar {
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* 4. Status bar + mode indicator alignment */
body[data-active-view="writer-app"] .editor-statusbar {
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body[data-active-view="writer-app"] #mode-indicator {
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 5. Scene list item hover/active polish */
body[data-active-view="writer-app"] .scene-item {
  border-left: 3px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body[data-active-view="writer-app"] .scene-item:hover {
  background: #eef2ff !important;
  border-left-color: rgba(212, 160, 23, .35) !important;
}
body[data-active-view="writer-app"] .scene-item.active {
  background: #fef9eb !important;
  border-left-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* ── Tap target minimums (always on) ──────────────────────────────────── */
.contact-delete-btn,
.char-del-btn,
.wdp2-char-del,
.strip-delete-day-btn,
.sched-cast-act-btn {
  min-width: 36px !important;
  min-height: 36px !important;
  padding-inline: 8px !important;
}

/* Generic "✕ / ＋ / ×" icon buttons that weren't class-targeted above */
.contact-delete-btn,
.char-del-btn,
.wdp2-char-del,
.strip-delete-day-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile-only: bump 30-34px ghost buttons / call-sheet action chips up to 36 */
@media (max-width: 760px) {
  .btn.ghost,
  .btn.ghost.mini,
  .cs-bundle-btn,
  .cs-share-btn,
  .cs-track-btn,
  .cs-map-link {
    min-height: 36px !important;
    padding-block: 8px !important;
    box-sizing: border-box;
  }

  /* phase20-fixes.css forces a 34px floor on the Schedule and DOOD toolbars
   * with a (1,4,2)-specificity selector. Match the same anchor + add .ghost
   * to win on specificity. Same goes for the dood-tag-type select. */
  body[data-ui-tier="phone"] #schedule-app .card > div:first-child .btn.ghost,
  body[data-ui-tier="phone"] #schedule-app .card > div:first-child .btn,
  body[data-ui-tier="phone"] #dood-app    .card > div:first-child .btn.ghost,
  body[data-ui-tier="phone"] #dood-app    .card > div:first-child .btn,
  body[data-ui-tier="phone"] select#dood-tag-type {
    min-height: 36px !important;
  }

  /* Properties view: Phase14 mini buttons sit on a top bar that also gets
   * floored at 30/34px elsewhere. Floor them at 36 unconditionally. */
  body[data-ui-tier="phone"] #props-app .btn.ghost,
  body[data-ui-tier="phone"] #props-app .btn.ghost.mini,
  body[data-ui-tier="phone"] #props-app .phase14-control {
    min-height: 36px !important;
  }

  /* Shotlist scene-select (a <select> below 36 on mobile) */
  body[data-ui-tier="phone"] #shotlist-app select {
    min-height: 36px !important;
  }

  /* DOOD "set one in Schedule" inline link tap target */
  body[data-ui-tier="phone"] #dood-app a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* Call sheet action chips: phase86 hard-pins height: 34px with ID-level
   * specificity. Match the ID and lift back to a 36px tap target. */
  html body #callsheet-app .cs-bundle-btn,
  html body #callsheet-app .cs-share-btn,
  html body #callsheet-app .cs-track-btn,
  html body #callsheet-app .cs-map-link,
  html body #callsheet-app #day-bundle-btn {
    min-height: 36px !important;
    height: auto !important;
    padding-block: 8px !important;
  }
}

/* ── Horizontal overflow → make tab strips scroll on mobile ───────────── */
@media (max-width: 760px) {
  /* Wardrobe department v2 tabs */
  .wdp2-tabs,
  /* Character lab section tabs */
  .char-section-tabs,
  /* Art Dept sub-tabs */
  .artdept-stabs,
  /* Continuity nav */
  .cont75-nav,
  /* LightForge / Cine sub-tabs */
  .cine-stabs,
  /* PCC quick-jump bar */
  .pcc-quick-bar,
  .pcc-tab-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    margin-inline: -4px;
    padding-inline: 4px;
    scroll-snap-type: x proximity;
  }
  .wdp2-tabs > *,
  .char-section-tabs > *,
  .artdept-stabs > *,
  .cont75-nav > *,
  .cine-stabs > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  /* Force minimum 36px for tab/segment buttons that were 24-29px */
  .char-stab,
  .artdept-stab,
  .cont75-navbtn,
  .cine-stab {
    min-height: 36px !important;
    padding-block: 8px !important;
  }

  /* Tables that overflow the viewport — wrap them for horizontal scroll */
  /* phase100 production-polish tables (Safety, Media Ops, etc.) */
  .p100-table,
  /* Call sheet desk and bundle tables */
  #callsheet-app table,
  #safety-app table,
  #media-app table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  /* Ops desk side-cards that exceed viewport — let them stack and scroll */
  #safety-app .p100-card,
  #media-app .p100-card,
  #safety-app .p100-shell,
  #media-app .p100-shell {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Their grid containers should collapse to single column */
  #safety-app .p100-grid,
  #media-app .p100-grid {
    grid-template-columns: 1fr !important;
  }

  /* Spatial map SVG should never punch through 375px */
  #spatial-app .p100-spatial-map,
  #spatial-app .p100-spatial-map svg {
    max-width: 100% !important;
    height: auto;
  }

  /* Locations color swatch grid — wrap without spilling */
  #locations-app .loc-color-grid,
  #locations-app .loc-color-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #locations-app .loc-color-swatch {
    flex: 0 0 auto;
  }

  /* Schedule mini ＋ / ↑ / ↓ buttons that were 19-27px wide */
  .sched-cast-act-btn {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Props Phase14 mini bar buttons — ensure full 36px target on mobile */
  #props-app .btn.ghost.mini.phase14-control,
  #props-app .btn.ghost.mini {
    min-height: 36px !important;
  }

  /* Call sheet action row — bump 31px buttons to 36px */
  .cs-bundle-btn,
  .cs-share-btn,
  .cs-track-btn,
  .cs-map-link {
    min-height: 36px !important;
    padding-block: 8px !important;
  }

  /* Character lab — original 240px sidebar + main flex squeezes detail to
   * 47px on a 375px viewport. Stack vertically AND turn the sidebar into a
   * horizontal chip rail so the detail form is immediately visible. The
   * outer wrap originally had ~28/32/60 padding which ate ~64px of width on
   * a phone; tighten to 12px / 12px / 28px. */
  #char-builder-app {
    padding-bottom: 24px !important;
  }
  #char-builder-app .char-builder-wrap {
    padding: 12px 12px 28px !important;
  }
  #char-builder-app .char-builder-layout {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  #char-builder-app .char-builder-sidebar,
  #char-builder-app .char-builder-main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  /* Sidebar → horizontal chip rail */
  #char-builder-app .char-builder-sidebar {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 6px 2px 10px !important;
    max-height: none !important;
  }
  #char-builder-app .char-builder-sidebar > * {
    flex: 0 0 auto;
  }
  /* Compact each character row to a chip */
  #char-builder-app .char-builder-sidebar [class*="char-list"],
  #char-builder-app .char-builder-sidebar [class*="char-pill"],
  #char-builder-app .char-builder-sidebar [class*="char-row"],
  #char-builder-app .char-builder-sidebar > div {
    min-width: 140px !important;
    max-width: 220px !important;
    padding: 8px 10px !important;
    border-radius: 12px;
  }
  #char-builder-app .char-card,
  #char-builder-app .char-card-header,
  #char-builder-app .char-card-avatar,
  #char-builder-app .char-section-body,
  #char-builder-app .char-field,
  #char-builder-app .char-field input,
  #char-builder-app .char-field textarea,
  #char-builder-app .char-field select {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #char-builder-app {
    overflow-x: hidden;
  }
  #char-builder-app .char-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Locations color swatch picker — wrap any swatch row onto multiple lines */
  #locations-app [class*="loc-color"] {
    flex-wrap: wrap;
    max-width: 100%;
  }
  #locations-app .loc-color-swatch + .loc-color-custom,
  #locations-app .loc-color-custom {
    flex: 0 0 auto;
  }
  /* When the inline color picker input would push past the right edge,
     wrap below the swatches */
  #locations-app input[type="color"] {
    max-width: 100%;
  }

  /* Defensive: any direct child of a visible app pane shouldn't exceed 100% */
  [id$="-app"]:not(.hidden) {
    overflow-x: hidden;
  }

  /* Don't let the doc101 bridge sit right on top of system gesture bar */
  .doc101-core-bridge {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

/* ── Tablet & medium screens — smooth out 760-1100 transitions ────────── */
@media (min-width: 761px) and (max-width: 1100px) {
  .char-section-tabs,
  .artdept-stabs,
  .cont75-nav,
  .cine-stabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* ── Always: hide desktop's native scrollbar arrows in tab strips ──── */
.wdp2-tabs::-webkit-scrollbar,
.char-section-tabs::-webkit-scrollbar,
.artdept-stabs::-webkit-scrollbar,
.cont75-nav::-webkit-scrollbar,
.cine-stabs::-webkit-scrollbar {
  height: 4px;
}
.wdp2-tabs::-webkit-scrollbar-thumb,
.char-section-tabs::-webkit-scrollbar-thumb,
.artdept-stabs::-webkit-scrollbar-thumb,
.cont75-nav::-webkit-scrollbar-thumb,
.cine-stabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}