/* Styles for components not covered by the design CSS */

/* Revenue panel: design CSS targets #revenuePanel but our HTML uses #finDashboard */
#finDashboard .mgmt-main { background: var(--bg); }

/* Variable aliases: old management/financials CSS uses these names */
:root {
  --text-muted: var(--text-3);
  --text-faint: var(--text-3);
  --divider: var(--border);
  --surface-offset: var(--surface-2);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-full: 50%;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --indigo: #2D6A4F;
  --indigo-light: rgba(45,106,79,0.06);
  --indigo-soft: rgba(45,106,79,0.1);
  --emerald-soft: rgba(74,122,94,0.1);
  --emerald-light: rgba(74,122,94,0.06);
  --opacity-muted: 0.5;
  --text-sm: 11px;
  --text-xs: 9px;
  --text-base: 13px;
  --text-md: 15px;
  --text-lg: 20px;
  --text-xl: 28px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 24px;
  --space-8: 36px;
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 400ms;
  --opacity-hover: 0.88;
  --opacity-disabled: 0.5;
}

/* Artist avatar image (JS injects <img> into .artist-avatar-lg) */
.artist-avatar-lg img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.artist-avatar-lg span {
  font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: #fff;
}
/* Hide legacy elements the design doesn't use */
#panel-artist .artist-header-bio { display: none; }
#panel-artist .artist-header-summary { display: none; }


/* Today rail empty state */
.today-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 12px 0;
}

/* Tab panel visibility (design CSS uses its own panel system, we use tab-panel) */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Nav tabs (hidden in variant C, sidebar handles navigation) */
.nav-tabs { display: none; }

/* Hide horizontal sub-tab bars — sidebar sub-nav replaces them */
#panel-artist > .artist-subtabs { display: none; }
#panel-mgmt > .artist-subtabs { display: none; }
#panel-studio > .artist-subtabs { display: none; }

/* Layout fix: our sidebar is outside .shell (sibling), not inside it.
   Design CSS expects sidebar inside .shell (flex-direction: row), but our HTML has:
     body > aside.sidebar + div.shell
   We make body the flex row container and override .shell to be a column. */
body[data-variant="c"] {
  display: flex;
  flex-direction: row;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
}
body[data-variant="c"] > .skip-link { position: absolute; }
body[data-variant="c"] > .sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-med);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: 28px 0;
  height: 100dvh;
  overflow-y: auto;
}
body[data-variant="c"] > .shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  min-width: 0;
  height: 100dvh !important;
  overflow: hidden;
}
body[data-variant="c"] > .shell > .main {
  flex: 1;
  padding: 0 40px 60px;
  overflow-y: auto;
  min-width: 0;
}

/* Feed item styles - design.css handles most via [data-variant="c"] .feed-item */

/* ── Wire detail slide-in panel ── */
#wireDetailOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; visibility: hidden; }
#wireDetailOverlay.open { pointer-events: auto; visibility: visible; }
.wire-detail-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 300ms ease; cursor: pointer; }
#wireDetailOverlay.open .wire-detail-scrim { opacity: 1; }
.wire-detail-panel { position: absolute; top: 0; right: 0; width: 520px; max-width: 100%; height: 100%; background: var(--surface); box-shadow: -8px 0 32px rgba(0,0,0,0.12); transform: translateX(100%); transition: transform 350ms cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow-y: auto; }
#wireDetailOverlay.open .wire-detail-panel { transform: translateX(0); }
.wire-detail-topbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.wire-detail-back { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 180ms ease; }
.wire-detail-back:hover { color: var(--text); background: var(--surface-2); }
.wire-detail-back svg { width: 14px; height: 14px; }
.wire-detail-breadcrumb { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--text-3); text-transform: uppercase; }
.wire-detail-content { padding: 24px; flex: 1; }
.wire-detail-tag { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; display: inline-block; }
.wire-detail-signal { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; padding: 2px 8px; border-radius: 4px; background: rgba(155,68,68,0.08); color: var(--coral); }
.wire-detail-title { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; margin: 0 0 8px; }
.wire-detail-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.3px; margin-bottom: 20px; }
.wire-detail-summary { font-family: var(--font-body); font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 20px; }
.wire-detail-wim-wrap { background: rgba(45,106,79,0.04); border-radius: 8px; border-left: 3px solid var(--green); padding: 12px 16px; margin-bottom: 20px; }
.wire-detail-wim-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--green); margin-bottom: 6px; }
.wire-detail-wim { font-family: var(--font-body); font-size: 13px; color: var(--text); line-height: 1.55; margin: 0; }
.wire-detail-expanded-wrap { margin-bottom: 20px; }
.wire-detail-section-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.wire-detail-expanded { font-family: var(--font-body); font-size: 13px; color: var(--text); line-height: 1.65; }
.wire-detail-expanded p { margin: 0 0 12px; }
.wire-detail-expanded p:last-child { margin-bottom: 0; }
.wire-detail-divider { height: 1px; background: var(--border); margin: 20px 0; }
.wire-detail-sources { display: flex; flex-direction: column; gap: 8px; }
.wire-detail-source { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: all 180ms ease; background: var(--surface); }
.wire-detail-source:hover { border-color: var(--border-med); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.wire-detail-source-domain { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.wire-detail-source-url { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.wire-detail-source svg { width: 12px; height: 12px; color: var(--text-3); flex-shrink: 0; transition: color 180ms ease; }
.wire-detail-source:hover svg { color: var(--green); }
@media(max-width:600px) { .wire-detail-panel { width: 100%; } }

/* ── Calendar event detail slide-in panel (Ryan 2026-06-08) ──
   Was a centre-screen modal whose inner .card had no surface styling on
   the design branch (dropped CSS), so the text sat on a translucent
   scrim and was unreadable. Now it slides in from the right like the
   Industry Wire article panel. The scoped token aliases below are
   declared ON the panel (inside the data-variant="c" scope) so they
   resolve correctly — declaring them at :root leaves them empty because
   the source tokens (--text/--text-3/--border) are per-variant. */
.cal-detail-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; pointer-events: none; visibility: hidden; }
.cal-detail-overlay.open { pointer-events: auto; visibility: visible; }
.cal-detail-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 300ms ease; cursor: pointer; }
.cal-detail-overlay.open .cal-detail-scrim { opacity: 1; }
.cal-detail-panel {
  position: absolute; top: 0; right: 0; width: 460px; max-width: 100%; height: 100%;
  background: var(--surface); box-shadow: -8px 0 32px rgba(0,0,0,0.12);
  transform: translateX(100%); transition: transform 350ms cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow-y: auto;
  /* scoped aliases so legacy inline var() references resolve */
  --text-body: var(--text); --text-muted: var(--text-3); --text-faint: var(--text-3);
  --divider: var(--border); --emerald: #4a7a5e; --indigo: #2D6A4F; --radius-sm: 8px;
  color: var(--text);
}
.cal-detail-overlay.open .cal-detail-panel { transform: translateX(0); }
.cal-detail-topbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cal-detail-back { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 180ms ease; }
.cal-detail-back:hover { color: var(--text); background: var(--surface-2); }
.cal-detail-back svg { width: 14px; height: 14px; }
.cal-detail-breadcrumb { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--text-3); text-transform: uppercase; }
.cal-detail-content { padding: 24px; flex: 1; }
.cal-detail-content img { max-width: 220px; width: 100%; border-radius: 8px; }
.cal-detail-type { font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); }
.cal-detail-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--emerald); }
.cal-detail-title { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; margin: 0 0 18px; }
.cal-detail-rows { display: flex; flex-direction: column; gap: 12px; }
.cal-detail-date { font-family: var(--font-mono); font-size: 13px; color: var(--text); letter-spacing: 0.3px; }
.cal-detail-artist { font-family: var(--font-body); font-size: 13px; color: var(--text); }
.cal-detail-section-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.cal-detail-desc { font-family: var(--font-body); font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; }
.cal-detail-actions { display: flex; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
@media(max-width:600px) { .cal-detail-panel { width: 100%; } }

/* Wire footer note */
.wire-footer-note {
  text-align: center;
  padding: 32px 0;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.3px;
}

/* Wire source link separator */
.wire-meta-sep {
  color: var(--text-3);
  font-size: 9px;
  margin: 0 2px;
}

/* ── Revenue Panel: bridge fin-* JS output to rev-* design ── */

/* Platform bars rendered by JS */
#mgmtFinancials .fin-team-bar-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
#mgmtFinancials .fin-team-bar-row:last-child { border-bottom: none; }
#mgmtFinancials .fin-team-bar-title { font-size: 13px; font-weight: 600; color: var(--text); min-width: 110px; flex: 0 0 110px; }
#mgmtFinancials .fin-team-bar-wrap { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
#mgmtFinancials .fin-team-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #2D6A4F, #4ade80); }
#mgmtFinancials .fin-team-bar-amt { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); min-width: 70px; text-align: right; }

/* Country rows */
#mgmtFinancials .fin-country-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
#mgmtFinancials .fin-country-name { font-size: 12px; font-weight: 600; color: var(--text); }
#mgmtFinancials .fin-country-value { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text); margin-left: auto; }

/* Chart toggle */
#mgmtFinancials .fin-chart-toggle {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px;
}
#mgmtFinancials .fin-chart-toggle-btn {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 5px 12px; background: none; color: var(--text-3); border: none; border-radius: 6px; cursor: pointer;
}
#mgmtFinancials .fin-chart-toggle-btn.active { background: var(--green); color: #fff; }
#mgmtFinancials .fin-yoy-btn {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-3); cursor: pointer;
}
#mgmtFinancials .fin-yoy-btn.active { background: var(--green); color: #fff; border-color: var(--green); }

/* Filter bar */
#mgmtFinancials .fin-filter-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#mgmtFinancials .fin-filter-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); margin-right: 4px;
}
#mgmtFinancials .fin-filter-btn {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text-2); cursor: pointer;
}
#mgmtFinancials .fin-filter-btn:hover { border-color: var(--border-med); color: var(--text); }
#mgmtFinancials .fin-filter-btn.has-selection { background: var(--green); color: #fff; border-color: var(--green); }
#mgmtFinancials .fin-pdf-btn {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 10px 18px; border: 1px solid rgba(45,106,79,0.25); border-radius: 8px;
  background: var(--green-dim); color: var(--green); cursor: pointer;
}
#mgmtFinancials .fin-pdf-btn:hover { background: var(--green); color: #fff; }

/* Show all btn */
#mgmtFinancials .fin-show-all-btn {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 8px 20px; border-radius: 8px; background: var(--green-dim); color: var(--green);
  border: 1px solid rgba(45,106,79,0.15); cursor: pointer;
}

/* Insight text */
#mgmtFinancials .fin-insight {
  font-size: 12px; color: var(--text-2); margin-top: 12px; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; line-height: 1.55;
}

/* Financials panel background */
#mgmtFinancials .mgmt-main,
#mgmtFinancials #finDashboard { background: var(--bg); }

/* Platform bars (API path uses fin-platform-* classes) */
#mgmtFinancials .fin-platform-bar {
  display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
#mgmtFinancials .fin-platform-bar:last-child { border-bottom: none; }
#mgmtFinancials .fin-platform-name { font-size: 13px; font-weight: 600; color: var(--text); min-width: 110px; flex: 0 0 110px; }
#mgmtFinancials .fin-platform-track { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
#mgmtFinancials .fin-platform-fill { height: 100%; border-radius: 2px; transition: width 600ms ease; }
#mgmtFinancials .fin-platform-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); min-width: 70px; text-align: right; }

/* ── Revenue panel: hide mgmt sub-tabs when financials is active ── */
#panel-mgmt:has(#mgmtFinancials[style*="display: block"]) .artist-subtabs,
#panel-mgmt:has(#mgmtFinancials:not([style*="display: none"]):not([style="display:none"])) .artist-subtabs {
  display: none;
}
/* Fallback: JS adds this class when revenue is shown */
#panel-mgmt.rev-mode .artist-subtabs { display: none; }
#panel-mgmt.rev-mode #mgmtFinancials { padding-top: 0; }

/* Pay per stream rows */
#finPayPerStream .rev-platform-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
#finPayPerStream .rev-platform-row:last-child { border-bottom: none; }
#finPayPerStream .rev-pps-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
#finPayPerStream .rev-pps-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#finPayPerStream .rev-pps-name { font-size: 11px; font-weight: 500; color: var(--text); flex: 1; }
#finPayPerStream .rev-pps-rate { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text); }

/* ── Artist Overview: keep legacy Chartmetric block as a hidden data container ──
   loadChartmetricData() un-hides #sectionChartmetric and its similar-artists /
   albums lists render uncapped (each card ~1200px → ~28000px panel). The redesigned
   overview shows this data in its own aside (#atSimilar etc.), so the legacy block
   must stay visually hidden. Data still loads/caches; the new aside reads from it. */
#sectionChartmetric { display: none !important; }

/* ── Daily Streams chart: no client-side streams time-series exists yet
   (CM provides followers/views snapshots, not a daily-streams series), and no
   render fn is wired. Show a clean empty state instead of a ~315px blank void.
   Remove this rule once a streaming-time-series endpoint + renderer land. */
.ov-chart-main .ov-chart-svg:empty { display: none; }
.ov-chart-main .ov-chart-svg:empty + .ov-chart-axis { display: none; }
.ov-chart-card:has(.ov-chart-svg:empty) .ov-chart-empty { display: flex; }
.ov-chart-empty {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

/* ── Artist Overview spacing (Denton 2026-06-02): the .artist-subpanel padding-top:28px
   lands ABOVE the nested .artist-header here (in live the header sits inside #artistOverview,
   unlike the mock where it's a shared header outside the subpanel). Result: ~56px above the
   header and 0px between the header border and PLATFORM STATS. Match the mock — keep 28px
   above the header (its own padding) and move the 28px breathing room below the header. */
#artistOverview { padding-top: 0; }
#artistOverviewGrid { margin-top: 28px; }