/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 20/21 — Bug Fixes
   1. Stripboard banners — drag/delete events
   2. Location Scout mobile — compact filter bar
   3. Production / Schedule mobile — config bar fit to page
   4. Writer mobile — reduced bottom padding, no-zoom on tap, mode indicator
   5. Props & Wardrobe — first-letter caps (JS)
   6. Location linked scenes dedup (JS, from phase19)
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. STRIPBOARD BANNERS ───────────────────────────────────────────────── */
.strip-banner {
  cursor: grab;
  position: relative;
  z-index: 1;
}
.strip-banner:active { cursor: grabbing; }
.strip-banner.banner-drag-over {
  outline: 2px dashed var(--brand, #3b82f6);
  outline-offset: 2px;
  opacity: .7;
}
.strip-banner-del {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  min-width: 22px;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.strip-banners-wrap { position: relative; z-index: 1; }

/* ── 2. LOCATION SCOUT — compact filter bar on mobile ───────────────────── */
@media (max-width: 760px) {
  #loc-search {
    font-size: .82rem !important;
    padding: 6px 10px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
  #loc-filter-status,
  #loc-filter-scene {
    font-size: .78rem !important;
    padding: 5px 6px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 1 1 90px !important;
    max-width: 50% !important;
  }
}

/* ── 3. SHOOTING SCHEDULE — config inputs match btn ghost height on mobile ─ */
@media (max-width: 760px) {
  #schedule-config-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    align-items: start !important;
  }
  #schedule-config-bar .sched-config-field:first-child {
    grid-column: 1 / -1 !important;
  }
  /* Compact fixed-height inputs — flex: none stops flex-grow from bloating the cell */
  #schedule-config-bar .sched-config-field input,
  #schedule-config-bar .sched-config-field select {
    flex: 0 0 auto !important;
    height: 36px !important;
    min-height: 0 !important;
    max-height: 36px !important;
    padding: 0 8px !important;
    font-size: .8rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid #d1d5db !important;
    background: white !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
  }
  body.dark #schedule-config-bar .sched-config-field input,
  body.dark #schedule-config-bar .sched-config-field select {
    background: #252d42 !important;
    border-color: #2d3447 !important;
    color: var(--ink) !important;
  }
  .sched-field-label {
    font-size: .65rem !important;
    margin-bottom: 3px !important;
    display: block;
  }
  /* Prevent iOS from zooming into date/time inputs (must be ≥16px) */
  #sched-start-date,
  #sched-end-date,
  #sched-general-call {
    font-size: 16px !important;
    height: 36px !important;
    line-height: 36px !important;
  }
  #sched-days-per-week {
    font-size: 15px !important;
    height: 36px !important;
  }
}

/* ── 4a. WRITER MOBILE — reduce bottom padding in editor-frame ──────────── */
/* The 210px clearance is too tall; reduce it so content isn't hidden */
@media (max-width: 760px) {
  html[data-ui-tier="phone"] body.cbs-writer-phone .editor-frame {
    padding-bottom: calc(max(var(--cbs-writer-scroll-clearance, 130px), 130px)) !important;
    scroll-padding-bottom: calc(max(var(--cbs-writer-scroll-clearance, 130px), 130px)) !important;
  }
}

/* ── 4b. WRITER MOBILE — prevent zoom on page-content tap (iOS 16px rule) ─ */
@media (max-width: 760px) {
  .page-content,
  .page-content .line {
    font-size: 16px !important;
  }
  /* Keep screenplay font family & weight but fix the zoom-triggering size */
  .page-content .line {
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    line-height: 1.5 !important;
  }
}

/* ── 4c. WRITER MOBILE — mode indicator: compact, dropdown-first approach ─ */
/* On mobile, hide the wide text label and rely solely on the select dropdown.
   This prevents the mode indicator from obscuring the writing area.          */
@media (max-width: 760px) {
  html[data-ui-tier="phone"] body.cbs-writer-phone #mode-indicator {
    /* Make it much more compact — just the select + icon */
    padding: 5px 8px !important;
    gap: 4px !important;
    max-width: 160px !important;
    border-radius: 12px !important;
    bottom: calc(var(--sab, 0px) + 76px) !important;
    right: 8px !important;
    min-height: 0 !important;
  }
  /* Hide the verbose text label — the dropdown says it all */
  html[data-ui-tier="phone"] body.cbs-writer-phone #mode-text {
    display: none !important;
  }
  /* Hide the icon too when keyboard is open to save max space */
  html[data-ui-tier="phone"] body.cbs-writer-keyboard-open #mode-icon {
    display: none !important;
  }
  /* Make the select visible and styled as the primary control */
  html[data-ui-tier="phone"] body.cbs-writer-phone #block-type-select {
    display: inline-block !important;
    max-width: 130px !important;
    font-size: .72rem !important;
    padding: 3px 4px !important;
    pointer-events: auto !important;
    /* Override the expanded-only rule */
    display: inline-block !important;
  }
  /* Override the .expanded gating for block-type-select on phone */
  html[data-ui-tier="phone"] body.cbs-writer-phone #mode-indicator:not(.expanded) #block-type-select {
    display: inline-block !important;
  }
  /* When keyboard is open, shrink the mode indicator further */
  html[data-ui-tier="phone"] body.cbs-writer-keyboard-open #mode-indicator {
    padding: 4px 6px !important;
    max-width: 130px !important;
  }
  html[data-ui-tier="phone"] body.cbs-writer-keyboard-open #block-type-select {
    max-width: 110px !important;
    font-size: .7rem !important;
  }
  /* Push mode indicator up slightly when format bar is visible */
  html[data-ui-tier="phone"] body.cbs-writer-keyboard-open #mode-indicator {
    bottom: calc(var(--sab, 0px) + 130px) !important;
  }
}

/* ── 5. WRITER — lock window scroll so cmd/ctrl+z never jumps page ────────── */
body[data-active-view="writer-app"] {
  overflow: hidden;
}

/* ── DESKTOP WRITER: reduce bottom padding so pages fill to viewport edge ── */
/* The statusbar is fixed (bottom:18px, ~30px tall) so only ~55px clearance   */
/* is needed. The old 80px left a big empty gap at the end of the script.     */
/* On mobile (≤760px) the dock is ~66px so we keep more clearance there.      */
@media (min-width: 761px) {
  .editor-frame {
    padding-bottom: 56px !important;
    scroll-padding-bottom: 72px !important; /* keep cursor-visibility clearance */
  }
}


/* ── MOBILE WRITER — remove forced min-height on pages + trim editor padding ── */
/* The 500px min-height forces a big empty cork gap below short pages on mobile.  */
/* Editor-frame padding-bottom only needs to clear the status bar + bottom nav.   */
@media (max-width: 760px) {
  .script-page-sheet {
    min-height: 0 !important;
  }
  .editor-frame {
    padding-bottom: calc(var(--sab, 0px) + 140px) !important;
  }
}

/* ── SCHED CONFIG BAR: override phase17's last-child full-width rule ─────────
   phase17 forces .sched-config-field:last-child { grid-column: 1/-1 !important }
   with specificity (1,4,0). We match that specificity here (later in cascade)
   to restore Days/Week + General Call as side-by-side on row 2.
   Result: Row 1 = Production Start (full width), Row 2 = Days/Week | Call Time
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body[data-ui-tier="phone"] #schedule-app[data-phase13-mobile="true"] #schedule-config-bar {
    align-items: start !important;
  }
  body[data-ui-tier="phone"] #schedule-app[data-phase13-mobile="true"] .sched-config-field:last-child {
    grid-column: auto !important;
  }
}

/* ── MOBILE: Schedule + DOOD card header — compact horizontal action row ─────
   Prevent the 4-button action row from wrapping into multiple tall rows.
   Stack title above buttons, then scroll buttons horizontally if needed.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body[data-ui-tier="phone"] #schedule-app .card > div:first-child,
  body[data-ui-tier="phone"] #dood-app .card > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  /* Match phase13's specificity (1,5,2) to win the display:grid !important override */
  body[data-ui-tier="phone"] #schedule-app[data-phase13-mode="agenda"] .card > div:first-child > div:last-child,
  body[data-ui-tier="phone"] #dood-app .card > div:first-child > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
    gap: 6px !important;
  }
  /* Also override the last .btn spanning 2 cols in grid mode */
  body[data-ui-tier="phone"] #schedule-app[data-phase13-mode="agenda"] .card > div:first-child > div:last-child .btn:last-child {
    grid-column: auto !important;
    flex: 0 0 auto !important;
  }
  body[data-ui-tier="phone"] #schedule-app .card > div:first-child .btn,
  body[data-ui-tier="phone"] #dood-app .card > div:first-child .btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: .78rem !important;
    min-height: 34px !important;
  }
  /* DOOD tag-type select: compact + no-shrink */
  body[data-ui-tier="phone"] #dood-tag-type {
    flex-shrink: 0 !important;
    min-height: 34px !important;
    font-size: .78rem !important;
    padding: 4px 8px !important;
    max-width: 110px !important;
  }
}

/* ── INT/EXT + DAY/NIGHT SCENE CHIPS (Schedule + Print) ─────────────────── */
.sched-chip-ie,
.sched-chip-dn {
  font-weight: 800;
  letter-spacing: .05em;
  font-size: .62rem;
  padding: 1px 6px;
}
/* INT — warm amber */
.sched-chip-ie.ie-int { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.38); color: #92400e; }
/* EXT — cool green */
.sched-chip-ie.ie-ext { background: rgba(34,197,94,.09);  border-color: rgba(34,197,94,.32);  color: #14532d; }
/* DAY — golden yellow */
.sched-chip-dn.dn-day  { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.42); color: #78350f; }
/* NIGHT/DUSK — indigo */
.sched-chip-dn.dn-night{ background: rgba(99,102,241,.09); border-color: rgba(99,102,241,.28); color: #3730a3; }

body.dark .sched-chip-ie.ie-int  { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.32); color: #fcd34d; }
body.dark .sched-chip-ie.ie-ext  { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.26);  color: #4ade80; }
body.dark .sched-chip-dn.dn-day  { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.32); color: #fde047; }
body.dark .sched-chip-dn.dn-night{ background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.32); color: #818cf8; }

/* ── DOOD cast number badge ──────────────────────────────────────────────── */
.dood-cast-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .02em;
  background: rgba(var(--brand-rgb), .10);
  color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), .22);
  flex-shrink: 0;
  white-space: nowrap;
}
body.dark .dood-cast-num {
  background: rgba(77,142,248,.14);
  border-color: rgba(77,142,248,.28);
  color: #60a5fa;
}

/* ── Breakdown report section arrow ─────────────────────────────────────── */
/* Arrow rotates to ▶ when collapsed (JS sets textContent; transition on parent) */
.rsh-arrow {
  display: inline-block;
  transition: transform .18s ease;
  font-size: .72rem;
  color: var(--muted);
}
.report-scene-header.collapsed .rsh-arrow {
  transform: rotate(-90deg);
}

/* ── Improve INT/EXT chip contrast to meet WCAG AA ──────────────────────── */
/* Was #92400e on rgba(245,158,11,.10) ≈ 2.2:1 — bumped to darker value */
.sched-chip-ie.ie-int { color: #78350f; }
.sched-chip-dn.dn-day  { color: #713f12; }

/* ═══════════════════════════════════════════════════════════════════════════
   WARDROBE ENHANCEMENTS — Uniform sizing, spacing, proportions
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. RAIL TILES — Larger, uniform, more breathing room ─────────────── */
.wde-rail {
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
  gap: 18px 12px !important;
  padding: 10px 8px !important;
}
.wde-rail-tile {
  min-height: 140px !important;
  padding: 0 4px 8px !important;
  border-radius: 12px !important;
  border-width: 2px !important;
  transition: all .16s ease !important;
}
/* Uniform tile image height — stretch small items to fill */
.wde-rail-tile-img {
  width: 100% !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 8px 8px 0 0 !important;
}
.wde-rail-tile-icon {
  height: 100px !important;
  min-height: 100px !important;
}
.wde-rail-tile-icon img {
  width: 100% !important;
  height: 100% !important;
}
/* Larger tile label */
.wde-rail-tile-name {
  font-size: .66rem !important;
  margin-top: 7px !important;
  padding: 0 4px !important;
  font-weight: 800 !important;
}
/* Bigger deselect X for clarity */
.wde-rail-tile.selected::after {
  font-size: .7rem !important;
  top: 5px !important;
  right: 7px !important;
  background: rgba(255,255,255,.85) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
}
.wde-rail-tile.selected:hover::after {
  opacity: 1 !important;
  background: rgba(239,68,68,.12) !important;
  color: #dc2626 !important;
}
/* Stronger selected state */
.wde-rail-tile.selected {
  border-width: 2.5px !important;
  box-shadow: 0 0 0 3px rgba(59,110,168,.18), 0 4px 12px rgba(59,110,168,.10) !important;
  transform: translateY(-1px) !important;
}

/* ── 2. CROQUIS / FIGURE STAGE — Larger paper doll ────────────────────── */
.wde-croquis-inner {
  max-width: 200px !important;
  aspect-ratio: 1/2.5 !important;
}
/* Make the base body layer properly centered and sized */
.wde-base-body-layer {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}
.wde-base-body-layer img,
.wde-base-body-layer svg {
  height: 92% !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.22 !important;
}
/* Clothing overlays fill entire croquis inner */
.wde-clothing-overlays {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}
.wde-clothing-layer {
  position: absolute !important;
  inset: 0 !important;
}
.wde-clothing-layer img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ── 3. CROQUIS STAGE — Subtle design grid + shadow ───────────────────── */
.wde-croquis-stage {
  padding: 16px 12px !important;
  background:
    linear-gradient(rgba(200,185,160,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,185,160,.06) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(59,110,168,.03) 0%, transparent 70%) !important;
  background-size: 20px 20px, 20px 20px, 100% 100% !important;
  border-radius: 12px !important;
  min-height: 320px !important;
}

/* ── 4. CATEGORY CHIPS — Better spacing and sizing ────────────────────── */
.wde-cat-chip {
  padding: 6px 14px !important;
  font-size: .72rem !important;
  border-radius: 99px !important;
  letter-spacing: .01em !important;
}

/* ── 5. WARDROBE BOARD CHARACTER CARDS — Polish ────────────────────────── */
.wdb-char-card {
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.wdb-char-card:hover {
  transform: rotate(0deg) translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* ── 6. MOBILE WARDROBE — Responsive tweaks ───────────────────────────── */
@media (max-width: 760px) {
  .wde-rail {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 14px 8px !important;
  }
  .wde-rail-tile {
    min-height: 120px !important;
  }
  .wde-rail-tile-img {
    height: 80px !important;
  }
  .wde-rail-tile-icon {
    height: 80px !important;
    min-height: 80px !important;
  }
  .wde-croquis-inner {
    max-width: 160px !important;
  }
  .wde-croquis-stage {
    min-height: 260px !important;
    padding: 12px 8px !important;
  }
}

/* ── 7. WARDROBE ASSET DRAWER — Visual polish ─────────────────────────── */
#wardrobe-asset-drawer {
  border-radius: 16px 0 0 16px !important;
  box-shadow: -6px 0 32px rgba(0,0,0,.15) !important;
}
#wardrobe-asset-drawer .drawer-header {
  border-radius: 16px 0 0 0 !important;
  padding: 14px 18px !important;
  font-size: .92rem !important;
}
#wardrobe-asset-drawer .drawer-body {
  padding: 14px 16px !important;
}

/* ── 8. DARK MODE — Wardrobe enhancements ─────────────────────────────── */
body.dark .wde-rail-tile {
  border-color: rgba(255,255,255,.08) !important;
}
body.dark .wde-rail-tile:hover {
  border-color: var(--wdb-accent) !important;
  background: rgba(255,255,255,.04) !important;
}
body.dark .wde-rail-tile.selected {
  border-color: var(--wdb-brand) !important;
  background: rgba(59,110,168,.12) !important;
}
body.dark .wde-rail-tile.selected::after {
  background: rgba(30,30,40,.85) !important;
  color: #f87171 !important;
}
body.dark .wde-croquis-stage {
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(59,110,168,.06) 0%, transparent 70%) !important;
  background-size: 20px 20px, 20px 20px, 100% 100% !important;
}
body.dark #wardrobe-asset-drawer {
  box-shadow: -6px 0 32px rgba(0,0,0,.4) !important;
}