/*
 * Management Calls — master-detail SPA layout (Wave 5.3, 2026-05-06).
 * Sits on top of editor.css (which styles the TOAST UI mount + find/replace
 * bar). Tailwind is loaded but kept off the critical layout primitives so the
 * grid here is deterministic.
 */

:root {
  --mc-fg:        #1f2937;
  --mc-fg-muted:  #6b7280;
  --mc-fg-faint:  #9ca3af;
  --mc-bg:        #f9fafb;
  --mc-card:      #ffffff;
  --mc-border:    #e5e7eb;
  --mc-border-soft: #f1f5f9;
  --mc-blue:      #2563eb;
  --mc-blue-soft: #dbeafe;
  --mc-blue-bg:   #eff6ff;
  --mc-amber-bg:  #fffbeb;
  --mc-amber-border: #fde68a;
  --mc-cyan-bg:   #ecfeff;
  --mc-cyan-border: #a5f3fc;
  --mc-green:     #16a34a;
  --mc-red:       #dc2626;
  --mc-shadow:    0 1px 2px rgba(15, 23, 42, 0.04);
  --mc-radius:    6px;
  --mc-h-nav:     40px;
  --mc-h-page:    44px;
}

body { font-family: 'Open Sans', system-ui, -apple-system, sans-serif; }

/* ── Slim top page header (replaces the old horizontal filter bar) ── */
.mc-page-header {
  background: var(--mc-card);
  border-bottom: 1px solid var(--mc-border);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mc-page-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.mc-result-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--mc-fg-muted);
  margin-left: 8px;
}

/* ── Filters stacked vertically inside the left pane ─────────────── */
.mc-filters {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--mc-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.mc-filter-field { display: flex; flex-direction: column; gap: 2px; }
.mc-filter-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--mc-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-filter-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--mc-border-soft);
}
.mc-clear-link { margin-left: auto; }

.mc-input {
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--mc-card);
  color: var(--mc-fg);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  width: 100%;
}
.mc-input:focus {
  border-color: var(--mc-blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.mc-input-narrow { width: 110px; flex: 0 0 110px; }

.mc-input-row { display: flex; gap: 6px; align-items: stretch; }

.mc-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mc-fg);
  height: 32px;
}

/* ── Multi-select Companies ─────────────────────────────────────────── */
.mc-companies-field { position: relative; }
.mc-multi-select {
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  padding: 6px 8px;
  font-size: 13px;
  background: var(--mc-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  user-select: none;
}
.mc-multi-select:hover { border-color: var(--mc-blue); }
.mc-multi-select-placeholder { color: var(--mc-fg-muted); }
.mc-multi-select.has-selection .mc-multi-select-placeholder { color: var(--mc-fg); font-weight: 500; }
.mc-multi-select-caret { color: var(--mc-fg-faint); font-size: 11px; }

.mc-multi-select-popover {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--mc-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: 380px;
}
.mc-multi-select-popover[hidden] { display: none; }
.mc-multi-select-search {
  border: 0;
  border-bottom: 1px solid var(--mc-border);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.mc-multi-select-toolbar {
  display: flex;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--mc-border-soft);
  font-size: 12px;
}
.mc-link-btn {
  background: none;
  border: 0;
  color: var(--mc-blue);
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.mc-link-btn:hover { text-decoration: underline; }
.mc-multi-select-list {
  overflow-y: auto;
  max-height: 280px;
  padding: 4px 0;
}
.mc-multi-select-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.mc-multi-select-row:hover { background: var(--mc-blue-bg); }
.mc-multi-select-row[aria-selected="true"] { background: var(--mc-blue-bg); }
.mc-multi-select-row input[type="checkbox"] { accent-color: var(--mc-blue); }
.mc-multi-select-row-name { flex: 1; }
.mc-multi-select-row-ticker { color: var(--mc-fg-faint); font-family: monospace; font-size: 11px; }

.mc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
/* Suppress the empty chip row so it doesn't push the COMPANIES label out of
   alignment with the other filter labels (Search, Event Type, Institution). */
.mc-chip-row:empty {
  display: none;
}
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mc-blue-bg);
  color: var(--mc-blue);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.mc-chip-x {
  cursor: pointer;
  color: var(--mc-blue);
  font-weight: 700;
  line-height: 1;
}
.mc-chip-x:hover { color: var(--mc-red); }

/* ── Body grid ─────────────────────────────────────────────────────────
   Filters + list both live in the left pane now; right pane is detail+
   editor. Wider left to fit the stacked filter inputs comfortably. */
.mc-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  /* grid-template-rows: minmax(0, 1fr) is critical — without an explicit
     row template, the implicit row sizes to its content (auto). When the
     editor body is taller than the calc'd container height, the row
     overflows past the grid box, the inner flex chain loses its bounded
     height, and the contenteditable wrapper's overflow:auto never
     engages. minmax(0, 1fr) clamps the row to the grid container's
     height while letting flex children shrink. */
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - var(--mc-h-nav) - var(--mc-h-page));
  min-height: 480px;
  overflow: hidden;
}

/* List pane (left) — filters at top + list below */
.mc-list-pane {
  background: var(--mc-card);
  border-right: 1px solid var(--mc-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mc-list-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--mc-border-soft);
  gap: 6px;
  flex-shrink: 0;
}
.mc-list-pagination { display: flex; gap: 4px; }
.mc-btn-icon {
  background: var(--mc-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  padding: 2px 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: var(--mc-fg);
  transition: background 0.12s;
}
.mc-btn-icon:hover { background: var(--mc-blue-bg); border-color: var(--mc-blue); color: var(--mc-blue); }
.mc-btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }

.mc-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.mc-list-empty {
  text-align: center;
  padding: 40px 20px;
  font-size: 13px;
  color: var(--mc-fg-faint);
}

.mc-list-row {
  padding: 8px 10px;
  border-bottom: 1px solid var(--mc-border-soft);
  cursor: pointer;
  transition: background 0.1s;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
}
.mc-list-row:hover { background: var(--mc-blue-bg); }
.mc-list-row.is-selected {
  background: var(--mc-blue-bg);
  border-left: 3px solid var(--mc-blue);
  padding-left: 7px;
}
.mc-list-row-company {
  font-weight: 600;
  font-size: 13px;
  color: var(--mc-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-list-row-date {
  font-size: 11px;
  color: var(--mc-fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-list-row-meta {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--mc-fg-muted);
  flex-wrap: wrap;
}
.mc-list-row-event {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 10px;
  background: var(--mc-blue-bg);
  color: var(--mc-blue);
}
.mc-list-row-event[data-type="investor_day"] { background: #f3e8ff; color: #7e22ce; }
.mc-list-row-event[data-type="conference"] { background: #ccfbf1; color: #0f766e; }
.mc-list-row-event[data-type="fireside_chat"] { background: #fef3c7; color: #92400e; }
.mc-list-row-event[data-type="other"] { background: #f3f4f6; color: #374151; }
.mc-list-row-inst {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ── Detail pane (right) ────────────────────────────────────────────── */
.mc-detail-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--mc-bg);
}
.mc-detail-empty {
  margin: auto;
  text-align: center;
  color: var(--mc-fg-faint);
}
.mc-detail-empty-title { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.mc-detail-empty-sub { font-size: 13px; }

.mc-detail-content {
  /* Pane is a flex column. The takeaways/topics card has its own bounded
     height + internal scroll; the editor mount has its own internal
     scroll inside the bundle's contenteditable. So this container must
     NOT scroll itself — otherwise scrolling the body pushes the toolbar
     out of view and the editor's mouse-wheel scroll never engages. */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 20px 16px;
  overflow: hidden;
}
.mc-detail-content[hidden] { display: none; }

.mc-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mc-border);
  margin-bottom: 8px;
}
.mc-detail-title-block { flex: 1; min-width: 0; }
.mc-detail-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mc-fg);
  margin: 0 0 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-detail-subtitle {
  font-size: 12px;
  color: var(--mc-fg-muted);
  margin: 0;
}
.mc-detail-actions { display: flex; gap: 8px; align-items: center; }
.mc-save-indicator {
  font-size: 11px;
  color: var(--mc-fg-faint);
  font-style: italic;
}
.mc-save-indicator.is-saving { color: var(--mc-fg-muted); }
.mc-save-indicator.is-dirty { color: var(--mc-red); }
.mc-save-indicator.is-saved { color: var(--mc-green); }

.mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--mc-radius);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--mc-border);
  background: var(--mc-card);
  color: var(--mc-fg);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.mc-btn:hover { border-color: var(--mc-blue); }
.mc-btn-primary { background: var(--mc-blue); border-color: var(--mc-blue); color: white; }
.mc-btn-primary:hover { background: #1d4ed8; }
.mc-btn-secondary { background: var(--mc-card); color: var(--mc-fg); }
.mc-btn-danger {
  background: var(--mc-card);
  color: var(--mc-red);
  border-color: #fecaca;
}
.mc-btn-danger:hover {
  background: #fef2f2;
  border-color: var(--mc-red);
  color: #991b1b;
}

/* Two-column summary block: takeaways/topics LEFT, metadata RIGHT.
   Metadata column intentionally narrow (180px) so takeaways/topics get
   the bulk of horizontal real estate. Long values (e.g. company names)
   truncate with ellipsis via .mc-meta-value's overflow rules. */
.mc-detail-summary {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mc-border-soft);
}
.mc-detail-summary-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.mc-detail-summary-right { min-width: 0; }

/* Metadata stack — single column on the right */
.mc-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  font-size: 12px;
  background: var(--mc-card);
  border: 1px solid var(--mc-border-soft);
  border-radius: var(--mc-radius);
}
.mc-meta-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mc-meta-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--mc-fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-meta-value {
  color: var(--mc-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-meta-value-mono { font-family: monospace; font-size: 11px; }

/* Combined Takeaways/Topics card with tabs */
.mc-summary-card {
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  background: var(--mc-card);
  overflow: hidden;
}
.mc-summary-tabs {
  display: flex;
  border-bottom: 1px solid var(--mc-border-soft);
  background: var(--mc-bg);
}
.mc-tab {
  background: none;
  border: 0;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mc-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.mc-tab:hover { color: var(--mc-fg); }
.mc-tab.is-active {
  color: var(--mc-blue);
  border-bottom-color: var(--mc-blue);
  background: var(--mc-card);
}
.mc-summary-pane[hidden] { display: none; }
.mc-detail-takeaways-body, .mc-detail-topics-body {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mc-fg);
}
/* Both takeaways/topics panes share a fixed height so swapping tabs
   doesn't cause the editor below to jump up or down. Internal scroll
   handles overflow. Bumped 180→225 (+25%) for a roomier reading pane. */
.mc-detail-takeaways-body,
.mc-detail-topics-body {
  height: 225px;
  overflow-y: auto;
}
/* Markdown-rendered output (from marked.js) — keep close to surrounding prose */
.mc-detail-takeaways-body p,
.mc-detail-topics-body p {
  margin: 0 0 8px 0;
}
.mc-detail-takeaways-body p:last-child,
.mc-detail-topics-body p:last-child {
  margin-bottom: 0;
}
.mc-detail-takeaways-body ul,
.mc-detail-topics-body ul {
  margin: 0 0 8px 0;
  padding-left: 22px;
  list-style: disc outside !important;
}
.mc-detail-takeaways-body ol,
.mc-detail-topics-body ol {
  margin: 0 0 8px 0;
  padding-left: 22px;
  list-style: decimal outside !important;
}
.mc-detail-takeaways-body li,
.mc-detail-topics-body li {
  margin-bottom: 4px;
}
.mc-detail-takeaways-body li:last-child,
.mc-detail-topics-body li:last-child {
  margin-bottom: 0;
}
.mc-detail-takeaways-body strong,
.mc-detail-topics-body strong {
  font-weight: 600;
}
.mc-detail-takeaways-body em,
.mc-detail-topics-body em {
  font-style: italic;
}
.mc-detail-takeaways-body code,
.mc-detail-topics-body code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 4px;
  border-radius: 3px;
}
.mc-detail-takeaways-body h1, .mc-detail-takeaways-body h2, .mc-detail-takeaways-body h3,
.mc-detail-topics-body h1, .mc-detail-topics-body h2, .mc-detail-topics-body h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0 4px;
  color: var(--mc-fg);
}
.mc-detail-takeaways-body a,
.mc-detail-topics-body a {
  color: var(--mc-blue);
  text-decoration: underline;
}
/* (Old amber/cyan tints removed — combined card uses neutral page hue.) */

/* Editor mount */
.mc-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 4px;
}
.mc-editor-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.mc-word-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--mc-fg-faint);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
}
/* Editor mount sizing is consolidated below — see `.mc-editor-mount`
   under "MDXEditor mount sizing". The earlier 480px min-height fought
   the flex layout and forced the bundle's contenteditable to overflow
   into the parent pane. */

/* Footer */
.mc-detail-footer {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mc-fg-faint);
  padding: 8px 0 0;
}

/* Toast notifications */
.mc-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 200;
  pointer-events: none;
}
.mc-toast {
  background: var(--mc-fg);
  color: white;
  padding: 8px 14px;
  border-radius: var(--mc-radius);
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
  max-width: 360px;
}
.mc-toast.is-error  { background: var(--mc-red); }
.mc-toast.is-success { background: var(--mc-green); }

/* MDXEditor mount sizing — the bundle's own stylesheet handles its
   internal layout (toolbar / contenteditable surface). We constrain the
   host container so the SPA's two-column layout doesn't collapse and
   give it a subtle card frame. The bundle's contenteditable owns its
   own scroll; the mount is overflow:hidden so it doesn't leak. */
.mc-editor-mount {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mc-border-soft);
  border-radius: var(--mc-radius);
  background: var(--mc-card);
  overflow: hidden;
}

/* ── Summary-collapse toggle ─────────────────────────────────────────── */
/* When the detail pane has .summary-collapsed, hide the metadata/takeaways
   block (and the expert-calls-only call-details row). The editor has
   flex:1 so it expands to fill the vacated space automatically. */
.mc-detail-content.summary-collapsed .mc-detail-summary,
.mc-detail-content.summary-collapsed .ec-call-details {
  display: none;
}

.mc-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mc-fg-muted);
  background: transparent;
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.mc-collapse-btn:hover {
  background: var(--mc-bg);
  color: var(--mc-fg);
}
.mc-detail-content.summary-collapsed .mc-collapse-btn {
  background: var(--mc-blue-soft);
  color: var(--mc-blue);
  border-color: var(--mc-blue-soft);
}