/* ─────────────────────────────────────────────────────────────────────────────
 * PHASE 120 — Documentary Studio Polish
 *
 * Complements phase101-documentary-dossier.css with:
 *   • Richer subject dossier cards (depth, hover states)
 *   • Better typography for interview / B-roll tables
 *   • Hero KPI bar improvements
 *   • Mobile scroll fixes
 *   • Action button legibility (warm-gold → readable blue)
 *   • Tab navigation clarity
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. CSS VARIABLES — override doc101 amber with a more polished palette ── */
#documentary-app.doc101-app {
  --doc101-accent-blue: #2563EB;
  --doc101-accent-teal: #0D9488;
  --doc101-surface-glass: rgba(255, 249, 237, 0.72);
  --doc101-btn-text: #ffffff;
  --doc101-btn-hover: #1D4ED8;
  --doc101-card-radius: 18px;
  --doc101-shadow-card: 0 6px 24px rgba(43, 28, 14, 0.12);
}

/* ── 2. HERO / KPI BAR ───────────────────────────────────────────────────── */
.doc101-hero {
  box-shadow: var(--doc101-shadow-card) !important;
}

/* Stat/KPI chips in the hero */
.doc101-kpi,
.doc101-stat,
[class*="doc101"][class*="kpi"],
[class*="doc101"][class*="stat"] {
  border-radius: 12px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.doc101-kpi:hover,
.doc101-stat:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(43, 28, 14, 0.12) !important;
}

/* ── 3. NAVIGATION TABS ─────────────────────────────────────────────────── */
/* Ensure the doc101 stat-nav buttons are legible on the warm background */
.doc101-stat-nav,
[class*="doc101"][class*="-nav"],
[class*="doc101"][class*="-tab"] {
  transition: background 0.14s, box-shadow 0.14s, transform 0.14s !important;
}
.doc101-stat-nav[data-doc101-page],
[class*="doc101"][class*="-nav"][data-doc101-page] {
  cursor: pointer;
}
.doc101-stat-nav.active,
[class*="doc101"][class*="-nav"].active {
  box-shadow: 0 2px 12px rgba(43, 28, 14, 0.14) !important;
  transform: translateY(-1px) !important;
}

/* ── 4. PRIMARY ACTION BUTTONS ──────────────────────────────────────────── */
/* Replace dark-brown-on-amber with crisp blue-on-white */
.doc101-app [class*="doc101"][class*="-btn"]:not(.doc101-back-btn):not([class*="ghost"]):not([class*="secondary"]) {
  background: linear-gradient(160deg, #2563EB, #1D4ED8) !important;
  color: #ffffff !important;
  border: none !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  transition: filter 0.14s !important;
}
.doc101-app [class*="doc101"][class*="-btn"]:not(.doc101-back-btn):not([class*="ghost"]):not([class*="secondary"]):hover {
  filter: brightness(1.08) !important;
}

/* Action buttons that use "dark" variant (sync-to-shot-list, etc.) */
.doc101-app [class*="doc101"][class*="-btn"].dark {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Ghost / back buttons: keep warm border but readable ink */
.doc101-app .doc101-back-btn,
.doc101-app [class*="doc101"][class*="ghost"],
.doc101-app [class*="doc101"][class*="secondary"] {
  background: rgba(255, 249, 237, 0.72) !important;
  color: var(--doc101-ink) !important;
  border: 1px solid var(--doc101-line) !important;
  text-shadow: none !important;
  backdrop-filter: blur(4px) !important;
}
.doc101-app .doc101-back-btn:hover,
.doc101-app [class*="doc101"][class*="ghost"]:hover {
  background: rgba(255, 249, 237, 0.92) !important;
}

/* ── 5. RECORD / CARD ROWS ──────────────────────────────────────────────── */
.doc101-record,
[class*="doc101"][class*="-record"],
[class*="doc101"][class*="-row"],
[class*="doc101"][class*="-card"] {
  border-radius: var(--doc101-card-radius) !important;
  transition: box-shadow 0.15s ease !important;
}
.doc101-record:hover,
[class*="doc101"][class*="-record"]:hover {
  box-shadow: 0 4px 20px rgba(43, 28, 14, 0.1) !important;
}

/* Subject list items */
.doc101-subject-btn,
[class*="doc101"][class*="subject"][class*="btn"] {
  border-radius: 12px !important;
  transition: background 0.14s, box-shadow 0.14s !important;
  font-weight: 600 !important;
}
.doc101-subject-btn.active,
[class*="doc101"][class*="subject"][class*="btn"].active {
  box-shadow: 0 2px 8px rgba(43, 28, 14, 0.12) !important;
}

/* ── 6. HEADERS / LABELS ────────────────────────────────────────────────── */
.doc101-record-head,
[class*="doc101"][class*="record-head"] {
  font-weight: 700 !important;
  color: var(--doc101-ink) !important;
}

/* Section labels */
.doc101-section-label,
.doc101-lede,
[class*="doc101"][class*="-lede"],
[class*="doc101"][class*="-label"] {
  color: var(--doc101-muted) !important;
}

/* ── 7. INLINE CHECKBOXES ───────────────────────────────────────────────── */
.doc101-check input[type="checkbox"],
[class*="doc101"] input[type="checkbox"] {
  accent-color: var(--doc101-accent-blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── 8. EMPTY STATE ─────────────────────────────────────────────────────── */
.doc101-empty,
[class*="doc101"][class*="-empty"] {
  border-radius: 20px !important;
  padding: 40px 24px !important;
}
.doc101-empty strong,
[class*="doc101"][class*="-empty"] strong {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--doc101-ink) !important;
}
.doc101-empty p,
[class*="doc101"][class*="-empty"] p {
  color: var(--doc101-muted) !important;
  max-width: 320px;
  margin: 8px auto 0 !important;
}

/* ── 9. BRIDGE / HANDOFF BUTTONS ────────────────────────────────────────── */
.doc101-bridge-btns [class*="doc101"][class*="-btn"],
.doc101-bridge-btns button {
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* ── 10. MOBILE RESPONSIVENESS ──────────────────────────────────────────── */
@media (max-width: 760px) {
  #documentary-app.doc101-app {
    padding: 16px 12px 100px !important;
  }

  .doc101-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* KPI chips become a horizontal scroll strip on small screens */
  .doc101-kpi-row,
  [class*="doc101"][class*="kpi-row"],
  [class*="doc101"][class*="stat-row"] {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }
  .doc101-kpi-row::-webkit-scrollbar,
  [class*="doc101"][class*="kpi-row"]::-webkit-scrollbar {
    display: none;
  }

  /* Subject list: horizontal on mobile */
  .doc101-subject-list,
  [class*="doc101"][class*="subject-list"] {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Full-width buttons on mobile */
  .doc101-app [class*="doc101"][class*="-btn"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── 11. TYPE-HINT CARDS ────────────────────────────────────────────────── */
.doc101-type-hints,
[class*="doc101"][class*="type-hint"] {
  border-radius: 16px !important;
  border: 1px solid var(--doc101-line) !important;
}

/* ── 12. FILM TYPE BADGES ───────────────────────────────────────────────── */
[class*="doc101"][class*="badge"],
[class*="doc101"][class*="chip"] {
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: .72rem !important;
  padding: 3px 10px !important;
}

/* ── 13. DARK MODE ──────────────────────────────────────────────────────── */
body.dark #documentary-app.doc101-app {
  --doc101-ink: #f3e8d4;
  --doc101-muted: #b89f80;
  --doc101-paper: #1a130b;
  --doc101-paper-2: #231910;
  --doc101-line: rgba(255, 220, 180, 0.12);
  background:
    radial-gradient(circle at 12% 0%, rgba(158, 52, 44, 0.14), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(200, 148, 69, 0.12), transparent 30%),
    linear-gradient(135deg, #1a130b 0%, #231910 50%, #1c1408 100%) !important;
}
body.dark .doc101-app [class*="doc101"][class*="-btn"]:not(.doc101-back-btn):not([class*="ghost"]) {
  background: linear-gradient(160deg, #1d4ed8, #1e40af) !important;
}