/* Outreach module — layout only. Visual primitives (cards, buttons, tables, forms,
   badges) reuse the site design system in app.css so the module matches the rest of
   the platform and follows light/dark theme automatically via the --migratrix-* tokens. */

.outreach-page {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}
/* Header + pipeline keep their natural height; the table/split fills the rest. */
.outreach-page > .config-card,
.outreach-page > .outreach-back { flex: 0 0 auto; }
.outreach-page > .outreach-table-wrap,
.outreach-page > .outreach-split { flex: 1 1 auto; min-height: 0; }

/* Header — same shape as the admin dashboards (config-card + icon + title + controls). */
.outreach-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.outreach-header .header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--migratrix-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(243, 124, 25, 0.12);
    color: var(--migratrix-primary);
    flex-shrink: 0;
}
/* The icon doubles as the "back to all campaigns" button. */
.outreach-header .header-icon-link { text-decoration: none; cursor: pointer; transition: background 0.15s ease; }
.outreach-header .header-icon-link:hover { background: rgba(243, 124, 25, 0.22); }
.outreach-header .header-icon .material-icons { font-size: 26px; }
.outreach-header .header-text { flex: 1; min-width: 0; }
.outreach-header .header-text h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--migratrix-text-primary);
}
.outreach-header .header-text p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--migratrix-text-secondary);
}
.outreach-header .header-controls { display: flex; gap: 0.5rem; }

/* Back link */
.outreach-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--migratrix-text-secondary);
    text-decoration: none;
}
.outreach-back:hover { color: var(--migratrix-primary); }

/* Create form grid */
.outreach-field { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.outreach-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--migratrix-text-secondary);
}
.outreach-field small { color: var(--migratrix-text-muted); font-size: 0.75rem; }
.outreach-field textarea { min-height: 5rem; resize: vertical; font-family: inherit; }
.outreach-field-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.outreach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.outreach-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.outreach-icp-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--migratrix-text-secondary);
    margin: 1rem 0 0.5rem;
}

/* Multi-check dropdown */
.mc-dropdown { position: relative; }
.mc-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.mc-summary { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--migratrix-text-primary); }
.mc-summary.is-placeholder { color: var(--migratrix-text-muted); }
.mc-count {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--migratrix-primary);
    background: rgba(243, 124, 25, 0.12);
    border-radius: 100px;
    padding: 0 0.4rem;
    min-width: 1.1rem;
    text-align: center;
}
.mc-caret { font-size: 18px; color: var(--migratrix-text-secondary); flex-shrink: 0; }
.mc-backdrop { position: fixed; inset: 0; z-index: 40; }
.mc-panel {
    position: absolute;
    z-index: 41;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow: auto;
    background: var(--migratrix-bg-bright);
    border: 1px solid var(--migratrix-border);
    border-radius: var(--migratrix-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.35rem;
}
.mc-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--migratrix-radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--migratrix-text-primary);
}
.mc-option:hover { background: var(--migratrix-bg-hover); }
.mc-option input { accent-color: var(--migratrix-primary); width: 15px; height: 15px; }

/* Pipeline action row */
.outreach-pipeline { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.outreach-pipeline .outreach-send-right { margin-left: auto; }
.outreach-note { font-size: 0.8rem; color: var(--migratrix-text-secondary); }
.outreach-note.muted { color: var(--migratrix-text-muted); }

/* Split: prospect list (scrolls) + editor. Fills the page height so the table reaches the
   bottom of the screen and the rows scroll inside their own frame (sticky header stays). */
.outreach-split {
    display: flex;
    gap: 1.25rem;
    min-height: 0;
    align-items: stretch;
}
.outreach-split .outreach-list { flex: 1 1 60%; min-height: 0; }
.outreach-editor {
    flex: 0 0 480px;
    align-self: stretch;   /* match the table height */
    min-height: 0;
    overflow: auto;
}
.outreach-editor h3 { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--migratrix-text-primary); }
.outreach-editor-meta { font-size: 0.8rem; color: var(--migratrix-text-secondary); margin-bottom: 1rem; }
.outreach-editor-actions { display: flex; gap: 0.5rem; margin: 0.5rem 0; justify-content: space-between; align-items: center; }
.outreach-actions-left { display: flex; gap: 0.5rem; }

/* Compose toolbar: language toggle + Claude prompt + regenerate. */
.outreach-compose-bar { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.5rem; }
.outreach-lang-toggle {
    display: inline-flex;
    border: 1px solid var(--migratrix-border);
    border-radius: var(--migratrix-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}
.outreach-lang-toggle button {
    border: none;
    background: transparent;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--migratrix-text-secondary);
}
.outreach-lang-toggle button.active { background: var(--migratrix-primary); color: #fff; }

/* Chat popover — fills the popover height: messages scroll, input pinned at the bottom. */
.chat-wrap { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; min-height: 0; }
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem;
}
.chat-empty { color: var(--migratrix-text-muted); font-size: 0.85rem; padding: 1.5rem 1rem; text-align: center; }
.chat-msg { display: flex; flex-direction: column; max-width: 88%; }
.chat-user { align-self: flex-end; align-items: flex-end; }
.chat-assistant { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.45;
}
.chat-user .chat-bubble { background: var(--migratrix-primary); color: #fff; }
.chat-assistant .chat-bubble {
    background: var(--migratrix-bg-bright);
    color: var(--migratrix-text-primary);
    border: 1px solid var(--migratrix-border);
}
.chat-typing { opacity: 0.55; }
.chat-actions { display: flex; gap: 0.35rem; margin-top: 0.25rem; }
.chat-inputbar { display: flex; gap: 0.5rem; align-items: flex-end; flex-shrink: 0; }
.chat-input { flex: 1; resize: none; height: 3rem; min-height: 3rem; font-family: inherit; }

/* Body textarea: rows="17" by default; shrink to ~12 rows below the 1727px breakpoint. */
.outreach-editor .outreach-body { line-height: 1.5; }

/* Tables — mirror the /audit table look (sticky header, 1.5px frame, pill badges). */
.outreach-table-wrap {
    overflow: auto;
    border-radius: var(--migratrix-radius-sm);
    border: 1.5px solid var(--migratrix-border);
}
.outreach-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.outreach-table thead { background: var(--migratrix-bg-secondary); }
.outreach-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--migratrix-bg-bright);
    box-shadow: inset 0 -1.5px 0 var(--migratrix-border);
}
.outreach-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--migratrix-text-secondary);
    white-space: nowrap;
}
.outreach-table tbody tr {
    border-bottom: 1px solid var(--migratrix-border);
    transition: background 0.15s ease;
}
.outreach-table tbody tr:last-child { border-bottom: none; }
.outreach-table tbody tr:hover { background: rgba(243, 124, 25, 0.04); }
.outreach-cell {
    padding: 0.7rem 1rem;
    color: var(--migratrix-text-primary);
    vertical-align: middle;
}

/* Row actions (delete) */
.outreach-actions { text-align: right; white-space: nowrap; }
.outreach-actions .migratrix-btn { margin-left: 0.4rem; }
.outreach-icon-btn { padding: 0.35rem 0.5rem; }
.outreach-icon-btn .material-icons { font-size: 18px; }

/* Narrow the Company column; Title (auto) absorbs the freed space. */
.outreach-list .outreach-table th:nth-child(3),
.outreach-list .outreach-table td:nth-child(3) { width: 200px; }

/* Clickable rows (campaign list + prospect list) */
.outreach-table tbody tr.outreach-row-link { cursor: pointer; }
.outreach-list .outreach-table tbody tr { cursor: pointer; }
.outreach-list .outreach-table tbody tr.is-active { background: var(--migratrix-bg-active); }
.outreach-list .outreach-table tbody tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--migratrix-primary); }

/* Pill badges — same shape as .audit-badge. */
.outreach-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--migratrix-bg-bright);
    color: var(--migratrix-text-secondary);
    border: 1px solid var(--migratrix-border);
    white-space: nowrap;
}
.outreach-badge.good {
    background: rgba(46, 204, 113, 0.12);
    color: var(--migratrix-success);
    border-color: rgba(46, 204, 113, 0.25);
}
.outreach-badge.warning {
    background: rgba(243, 156, 18, 0.12);
    color: var(--migratrix-warning, #b9770e);
    border-color: rgba(243, 156, 18, 0.28);
}
.outreach-badge.danger {
    background: rgba(231, 76, 60, 0.12);
    color: var(--migratrix-danger);
    border-color: rgba(231, 76, 60, 0.25);
}

.outreach-empty {
    padding: 2.5rem;
    text-align: center;
    color: var(--migratrix-text-muted);
    font-size: 0.9rem;
}
.outreach-error { color: var(--migratrix-danger); font-size: 0.8rem; margin: 0.5rem 0; }
.outreach-muted { color: var(--migratrix-text-muted); }

@media (max-width: 1727px) {
    .outreach-field {
        margin-bottom: 1.2rem;
    }
    .outreach-editor .outreach-body { height: calc(12 * 1.5em + 1.2rem); }
}

@media (max-width: 900px) {
    .outreach-page { height: auto; }
    .outreach-split { flex-direction: column; }
    .outreach-split .outreach-list { flex: 1 1 auto; }
    .outreach-editor { flex-basis: auto; max-height: none; overflow: visible; }
    .outreach-grid, .outreach-grid-2 { grid-template-columns: 1fr; }
}