/* editor.css — Management Calls page-level styles (post MDXEditor migration).
 *
 * The editor itself ships its own CSS via the bundle at
 * /static/management-calls/mdx-bundle/index.css. This file only carries
 * page-level chrome consumed by both the SPA (list_app.js) and the
 * standalone deep-link editor (editor.js).
 *
 * All TOAST UI / ProseMirror / fr-pm-overlay / find/replace styles were
 * removed when the editor migrated to MDXEditor — those concerns now
 * live inside the MDXEditor bundle.
 */

/* ── CSS custom properties ─────────────────────────────────── */
:root {
  --mc-bg: #f5f7f9;
  --mc-surface: #ffffff;
  --mc-border: #e4e4e7;
  --mc-border-light: #f0f0f2;
  --mc-text: #1a1a2e;
  --mc-text-secondary: #71717a;
  --mc-text-tertiary: #a1a1aa;
  --mc-accent: #4a90d9;
  --mc-accent-hover: #357abd;
  --mc-accent-subtle: rgba(74, 144, 217, 0.08);
  --mc-danger: #ef4444;
  --mc-danger-subtle: rgba(239, 68, 68, 0.08);
  --mc-success: #22c55e;
  --mc-success-subtle: rgba(34, 197, 94, 0.08);
  --mc-highlight-bg: #fff3a8;
  --mc-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --mc-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --mc-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --mc-radius: 6px;
  --mc-font: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --mc-topbar-h: 52px;
}

/* ── Standalone editor body (consumed by management_calls_editor.py) ─ */
body.mc-editor-page {
  font-family: var(--mc-font);
  font-size: 13px;
  background: var(--mc-bg);
  color: var(--mc-text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.mc-layout {
  display: flex;
  height: calc(100vh - var(--mc-topbar-h));
  overflow: hidden;
}

.mc-sidebar-left {
  width: 280px;
  flex-shrink: 0;
  background: var(--mc-surface);
  border-right: 1px solid var(--mc-border);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mc-editor-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mc-editor-header {
  padding: 8px 16px 4px;
  background: var(--mc-surface);
  border-bottom: 1px solid var(--mc-border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mc-editor-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-text-secondary);
}

.mc-word-count {
  font-size: 11px;
  color: var(--mc-text-tertiary);
}

/* MDXEditor mount point — fills remaining height. The bundle's own CSS
   handles internal layout; we only size the host container. */
#transcript-editor {
  flex: 1;
  overflow: hidden;
  min-height: 300px;
}

.mc-sidebar-right {
  width: 320px;
  flex-shrink: 0;
  background: var(--mc-surface);
  border-left: 1px solid var(--mc-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mc-save-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--mc-surface);
  border-bottom: 1px solid var(--mc-border-light);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mc-sidebar-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* ── Toast notifications ────────────────────────────────────── */
#mc-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.mc-toast {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--mc-font);
  font-weight: 500;
  box-shadow: var(--mc-shadow-lg);
  pointer-events: auto;
  animation: mc-toastIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  max-width: 320px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.mc-toast.toast-out {
  animation: mc-toastOut 0.22s ease forwards;
}
.mc-toast.success,
.mc-toast.is-success {
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
}
.mc-toast.error,
.mc-toast.is-error {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
}
.mc-toast.info,
.mc-toast.is-info {
  background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
}
.mc-toast.warning,
.mc-toast.is-warning {
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
}

.mc-toast-body { display: flex; flex-direction: column; gap: 4px; }
.mc-toast-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-toast-btn {
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-family: var(--mc-font);
  cursor: pointer;
  font-weight: 500;
}
.mc-toast-btn:hover { opacity: 0.75; }

@keyframes mc-toastIn {
  from { opacity: 0; transform: translateX(12px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}
@keyframes mc-toastOut {
  from { opacity: 1; transform: translateX(0)   scale(1); }
  to   { opacity: 0; transform: translateX(8px) scale(0.96); }
}

/* ── Dirty indicator on Save button ────────────────────────── */
.mc-btn-save.dirty {
  background: #2563eb !important;
}
.mc-btn-save.dirty:hover {
  background: #1d4ed8 !important;
}

/* ── Hard-delete link ───────────────────────────────────────── */
.mc-hard-delete-link {
  font-size: 10px;
  color: var(--mc-text-tertiary);
  text-decoration: none;
  cursor: pointer;
}
.mc-hard-delete-link:hover { color: var(--mc-danger); text-decoration: underline; }

/* ── Conflict diff modal ────────────────────────────────────── */
#mc-conflict-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
#mc-conflict-modal.open {
  display: flex;
}
.mc-conflict-box {
  background: var(--mc-surface);
  border-radius: 10px;
  box-shadow: var(--mc-shadow-lg);
  padding: 20px 24px;
  max-width: 640px;
  width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-conflict-box h3 { font-size: 14px; font-weight: 600; }
.mc-conflict-pre {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8f9fa;
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  padding: 10px 12px;
  max-height: 40vh;
  overflow-y: auto;
  flex: 1;
}
.mc-conflict-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Responsive stacking (< 1024 px) ───────────────────────── */
@media (max-width: 1023px) {
  .mc-layout {
    flex-direction: column;
    height: auto;
    overflow: auto;
  }
  .mc-sidebar-left,
  .mc-sidebar-right {
    width: 100%;
    flex-shrink: 1;
  }
  .mc-editor-pane {
    height: 60vh;
  }
  #transcript-editor {
    height: 60vh;
  }
  .mc-save-bar {
    position: static;
  }
  body.mc-editor-page {
    overflow: auto;
  }
}