/* ═══════════════════════════════════════════════════════════════════════════
 * PHASE 123 — UX Improvements Bundle
 *
 * Items addressed:
 *  #2  – Spatial tab moved near production tabs (HTML edit companion)
 *  #3  – Warm light-brown cork background for app body
 *  #4  – Writer mode indicator — warmer, more legible styling
 *  #6  – Character builder notebook margin — mobile text stays inside margin
 *  #7  – Stripboard Cine overlay bar — compact, neat, mobile-friendly
 *  #8  – Safety Gatekeeper tab coloring applied to all non-specialty tabs
 *  #9  – Continuity Desk mobile redesign — stacked single-column layout
 * #10  – Wardrobe mobile — fix scroll lockout, friendlier stacked layout
 * #11  – Propmaster Studio — tighter prop rack, panel floats higher
 * #12  – LightForge Shot Layer mobile — scrollable tab bar, scrollable table
 * #14  – Production Command Center header — compact hero
 * #15  – Spatial Studio panels — reduce scroll in small panels
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ─── #3  WARM CORK BODY BACKGROUND ──────────────────────────────────────── */
/* Apply a soft warm tan to the app shell so the corkboard metaphor extends
   behind every view, not just the hub. */
body.cbs-phase60 {
  background-color: #caa46c !important;
}

/* The view-container sits directly behind app panels.
   Give it a subtler warm tone so panels with transparent BG look good. */
.view-container {
  background-color: #c09058 !important;
}

/* Dark mode: keep neutral dark, don't force cork color */
body.dark.cbs-phase60 {
  background-color: #0f1320 !important;
}
body.dark .view-container {
  background-color: #0f1320 !important;
}


/* ─── #4  WRITER MODE INDICATOR — WARM AMBER STYLE ───────────────────────── */
/* The indicator was an almost invisible dark pill. Replace with a warm
   amber/cork palette that fits the Corkboard brand. */
#mode-indicator {
  background: rgba(166, 105, 38, 0.95) !important;
  border: 1px solid rgba(255, 200, 100, 0.35) !important;
  box-shadow: 0 8px 24px rgba(80, 46, 8, 0.32) !important;
  font-size: .78rem !important;
  padding: 8px 14px !important;
}

#mode-text {
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #fff8e6 !important;
}

#mode-icon {
  font-size: 1rem !important;
}

#mode-indicator select {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff8e6 !important;
  border-radius: 6px !important;
  font-size: .74rem !important;
}

body.dark #mode-indicator {
  background: rgba(30, 36, 51, 0.96) !important;
  border-color: rgba(100, 120, 180, 0.30) !important;
}


/* ─── #6  CHARACTER BUILDER — NOTEBOOK MARGIN (MOBILE) ───────────────────── */
/* Desktop: char-card has red margin line at 48px, padding-left 60px. On mobile
   (phase103 sets padding-left: 14px) text lands in the margin zone.
   Solution: shift the notebook margin line to 24px and keep 32px padding-left. */
@media (max-width: 760px) {
  #char-builder-app .char-card {
    background:
      /* Narrower red margin line at 22–24px */
      linear-gradient(
        to right,
        transparent 22px,
        rgba(239, 68, 68, .50) 22px,
        rgba(239, 68, 68, .50) 24px,
        transparent 24px
      ),
      repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 27px,
        rgba(147, 197, 253, .40) 27px,
        rgba(147, 197, 253, .40) 28px
      ),
      linear-gradient(to bottom, #fffef5 0%, #fefce8 40%, #fffef5 100%) !important;
  }

  /* Three-hole punch: shift to match new margin */
  #char-builder-app .char-card::before {
    left: 6px !important;
  }

  /* Header padding — ensure name sits right of the narrower margin */
  #char-builder-app .char-card-header {
    padding: 16px 14px 14px 32px !important;
  }

  /* Section tabs — align with new margin */
  #char-builder-app .char-section-tabs {
    padding: 0 12px 0 32px !important;
  }

  /* Section body — content starts right of margin line */
  #char-builder-app .char-section-body {
    padding: 14px 14px 18px 32px !important;
  }
}


/* ─── #7  CINE OVERLAY BAR — COMPACT & NEAT ──────────────────────────────── */
/* The bar used inline styles so we need !important to override them.
   Goal: tight pill row that reads cleanly, doesn't dominate the viewport. */
#cine-sb-overlay-bar {
  padding: 5px 12px !important;
  background: rgba(13, 148, 136, 0.08) !important;
  border-bottom: 1px solid rgba(13, 148, 136, 0.20) !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Tighter buttons */
#cine-sb-overlay-bar .cine-overlay-btn {
  font-size: .68rem !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
}

/* Legend: scrolls horizontally rather than wrapping, keeps bar height stable */
#cine-overlay-legend.cine-overlay-legend {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  padding-left: 4px !important;
  border-left: 1px solid rgba(13, 148, 136, .22) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  max-width: 280px !important;
}
#cine-overlay-legend.cine-overlay-legend::-webkit-scrollbar { display: none; }

/* On mobile, collapse the legend to a single line of pills */
@media (max-width: 760px) {
  #cine-sb-overlay-bar {
    gap: 4px !important;
    padding: 4px 10px !important;
  }
  #cine-overlay-legend.cine-overlay-legend {
    max-width: 160px !important;
  }
}


/* ─── #8  SAFETY GATEKEEPER COLORING — NON-SPECIALTY TABS ───────────────── */
/* The active nav tab currently uses --brand (#2563eb) blue.
   Apply the warm amber Safety Gatekeeper palette to all non-specialty groups. */
.tab-group:not([data-group="Specialty Studios"]) .tab.active {
  color: #8d5a21 !important;         /* warm amber brown */
  background: #fff8ee !important;    /* already default, reinforced */
}

.tab-group:not([data-group="Specialty Studios"]) .tab.active::before {
  background: #fff8ee !important;
}

/* Group header accent: amber when a tab in this group is active */
.tab-group:not([data-group="Specialty Studios"]):has(.tab.active)::after {
  background: rgba(251, 168, 33, .18) !important;
}

/* Dark mode: keep it readable */
body.dark .tab-group:not([data-group="Specialty Studios"]) .tab.active {
  color: #f5c068 !important;
}


/* ─── #9  CONTINUITY DESK — MOBILE REDESIGN ──────────────────────────────── */
/* Script supervisor on mobile works one scene at a time. Replace the
   fixed 280px sidebar + main pane with a full-width stacked card layout. */
@media (max-width: 760px) {
  .cont75-shell {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  /* Rail (scene list): compact horizontal scroll bar instead of tall column */
  .cont75-rail {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-wrap: nowrap !important;
  }
  .cont75-rail::-webkit-scrollbar { display: none; }

  /* Each scene card in the rail becomes a compact chip */
  .cont75-scene-list {
    flex-direction: row !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .cont75-scene-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Side cards in rail: compact */
  .cont75-rail .cont75-card {
    flex-shrink: 0 !important;
    min-width: 200px !important;
    max-width: 240px !important;
  }

  /* Main pane: full width, scrollable */
  .cont75-main {
    overflow: visible !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Top bar: tighter on mobile */
  .cont75-topbar {
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  /* Brand section: smaller */
  .cont75-brand {
    min-width: 0 !important;
    flex: 1 !important;
  }

  .cont75-title {
    font-size: .95rem !important;
  }

  .cont75-sub {
    display: none !important;   /* hide subtitle on mobile — space is precious */
  }

  /* Metrics pills: wrap compactly */
  .cont75-metrics {
    margin-left: 0 !important;
    gap: 6px !important;
  }

  .cont75-chip {
    padding: 5px 9px !important;
    font-size: .68rem !important;
  }

  /* Nav buttons: ensure scrollable */
  .cont75-nav {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
}


/* ─── #10 WARDROBE — MOBILE SCROLL FIX & STACKED LAYOUT ─────────────────── */
@media (max-width: 760px) {
  /* The wdp2-shell has overflow:hidden which blocks touch scrolling.
     On mobile stack sidebar on top, stage below, both scrollable. */
  #wardrobe-app.wdb-app {
    overflow: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  .wdp2-shell {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Sidebar: shrink to a horizontal character picker row */
  .wdp2-sidebar {
    overflow: visible !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e0d8 !important;
  }

  .wdp2-char-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    scrollbar-width: none !important;
  }
  .wdp2-char-list::-webkit-scrollbar { display: none; }

  /* Character cards in the list: compact horizontal cards */
  .wdp2-char-card {
    flex-shrink: 0 !important;
    min-width: 120px !important;
    max-width: 140px !important;
    grid-template-columns: 40px 1fr !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  /* Smaller thumbnail */
  .wdp2-char-thumb {
    width: 40px !important;
    height: 60px !important;
  }

  /* Stage: fill remaining space, auto height */
  .wdp2-stage,
  .wdp2-main {
    overflow: visible !important;
    min-height: 400px !important;
    height: auto !important;
  }
}


/* ─── #11 PROPMASTER STUDIO — TIGHTER RACK, PANEL HIGHER ────────────────── */
/* Reduce the large top padding/hero area and bring the detail panel up */
@media (max-width: 760px) {
  /* Stage hero: collapse horizontal to tight header row */
  .prk-stage-hero {
    padding: 12px 14px !important;
    gap: 10px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Polaroid: smaller on mobile */
  .prk-polaroid {
    width: 60px !important;
    transform: rotate(0deg) !important;
  }
  .prk-polaroid-img {
    width: 50px !important;
    height: 50px !important;
  }
  .prk-polaroid-caption {
    font-size: .52rem !important;
    padding: 2px !important;
  }

  /* Stage body: tighter top padding */
  .prk-stage-body {
    padding: 12px 14px 30px !important;
  }

  /* Prop rack list: tighter items */
  .prk-shdr {
    padding: 6px 10px 2px !important;
  }

  .prk-rack-hdr {
    padding: 6px 10px 4px !important;
  }
}

/* Desktop: reduce the extra whitespace above the stage hero too */
.prk-stage-hero {
  padding: 16px 22px 14px !important;
}


/* ─── #12 LIGHTFORGE SHOT LAYER — MOBILE FIX ─────────────────────────────── */
/* The four sub-tab buttons overflow at 375px. Make them scroll horizontally. */
#cine-subtabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
}
#cine-subtabs::-webkit-scrollbar { display: none; }

/* Ensure the plot buttons (sub-tab bar) don't wrap, scroll instead */
@media (max-width: 760px) {
  #cine-subtabs {
    gap: 1px !important;
  }

  .cine-stab {
    padding: 6px 10px !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* The shot table already has min-width:700px inline; the parent div has overflow:auto.
     On mobile, also ensure #cine-panel-shots doesn't clip content */
  #cine-panel-shots {
    overflow: hidden !important;
  }
  #cine-panel-shots > div[style*="overflow:auto"],
  #cine-panel-shots > div[style*="overflow: auto"] {
    overflow-x: auto !important;
  }
}


/* ─── #14 PCC HEADER — COMPACT HERO ─────────────────────────────────────── */
/* The Production Command Center hero has a large, decorative heading.
   Tighten padding and reduce title size so more content is above the fold. */
.pcc-hero {
  padding: 12px 18px 10px !important;
  margin-bottom: 10px !important;
}

.pcc-hero-title {
  font-size: clamp(1.2rem, 2.4vw, 1.9rem) !important;
  margin-bottom: 6px !important;
}

.pcc-meta-bar {
  gap: 5px 8px !important;
  font-size: .82rem !important;
}

.pcc-meta-pill {
  padding: 4px 8px !important;
  font-size: .76rem !important;
}

@media (max-width: 760px) {
  .pcc-hero {
    padding: 10px 14px 8px !important;
  }
  .pcc-hero-title {
    font-size: 1.15rem !important;
  }
  .pcc-meta-bar {
    gap: 4px 6px !important;
    font-size: .74rem !important;
  }
}


/* ─── #15 SPATIAL STUDIO — REDUCE PANEL SCROLL ───────────────────────────── */
/* The spatial side drawers and toolbar panels have large paddings and min-heights
   that force excessive scroll on smaller viewports. Tighten them up. */

/* Spatial toolbar: tighter */
#scc-toolbar {
  gap: 4px !important;
  padding: 5px 8px !important;
  border-radius: 10px !important;
}

.scc-tool-btn {
  padding: 5px 9px !important;
  font-size: .72rem !important;
}

/* Day slider: less vertical margin */
#scc-day-slider,
.scc-temporal-bar,
#scc-temporal-bar {
  padding: 5px 14px !important;
}

/* Spatial side drawers / cup panels */
.scc-cup,
.scc-cup-panel,
[class*="scc-drawer"] {
  overflow-y: auto !important;
  max-height: calc(100vh - 160px) !important;
}

/* Token detail panel: compact sections */
.scc-token-detail,
.scc-panel-section,
.scc-detail-section {
  padding: 10px 12px !important;
}

/* Spatial AR panel */
#spatial-app .scc-ar-panel {
  padding: 10px !important;
}

/* On mobile: let the canvas take full height, push controls above */
@media (max-width: 760px) {
  #spatial-app .scc-ar-panel {
    padding: 8px !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
  .scc-cup {
    max-height: 45vh !important;
  }
}


/* ─── GLOBAL MOBILE SAFE-AREA BOTTOM PADDING ─────────────────────────────── */
/* Ensure all production module apps have breathing room above the mobile dock */
@media (max-width: 760px) {
  #pcc-app,
  #safety-app,
  #media-app,
  #continuity-app,
  #props-app,
  #wardrobe-app,
  #cine-app {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
}