/* dialer.css — Power Dialer light theme (matches CRM dashboard) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

:root {
    --bg: #f8f9fb;
    --card: #ffffff;
    --border: #e5e7eb;
    --border-light: #f0f1f3;
    --accent: #2563eb;
    --accent-light: rgba(37,99,235,0.10);
    --accent-hover: rgba(37,99,235,0.14);
    --success: #16a34a;
    --success-light: rgba(22,163,74,0.10);
    --warning: #d97706;
    --warning-light: rgba(217,119,6,0.10);
    --danger: #dc2626;
    --danger-light: rgba(220,38,38,0.10);
    --purple: #7c3aed;
    --purple-light: rgba(124,58,237,0.10);
    --text: #111827;
    --text2: #6b7280;
    --text3: #9ca3af;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Login ──────────────────────────────────────────────────────────────── */

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: var(--card); padding: 40px; border-radius: var(--radius); text-align: center; width: 320px; box-shadow: var(--shadow-md); }
.login-box h1 { font-size: 24px; margin-bottom: 4px; color: var(--text); }
.login-box .subtitle { color: var(--text2); margin-bottom: 24px; font-size: 13px; }
.login-box input { width: 100%; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; margin-bottom: 12px; }
.login-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.login-box button { width: 100%; padding: 10px; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.login-box button:hover { background: #1d4ed8; }

/* ── Nav ────────────────────────────────────────────────────────────────── */

.topnav { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.nav-left { display: flex; align-items: center; gap: 24px; }
.nav-brand { color: var(--text); font-weight: 700; font-size: 16px; text-decoration: none; padding: 14px 0; }
.nav-tabs { display: flex; gap: 0; }
.nav-tab { color: var(--text2); text-decoration: none; font-size: 13px; font-weight: 500; padding: 14px 16px; border-bottom: 2px solid transparent; transition: all 0.15s; }
.nav-tab:hover { color: var(--text); background: var(--accent-light); }
.nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.nav-link { color: var(--text2); text-decoration: none; font-size: 13px; }
.nav-link:hover { color: var(--text); }

/* ── Content ────────────────────────────────────────────────────────────── */

.content { padding: 24px; max-width: 1200px; margin: 0 auto; }

/* ── Flash Messages ─────────────────────────────────────────────────────── */

.flash-error { background: var(--danger-light); color: var(--danger); padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; border: 1px solid rgba(220,38,38,0.2); }

/* ── Page Header ────────────────────────────────────────────────────────── */

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--text); }
.page-header .subtitle { color: var(--text2); font-size: 13px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn { display: inline-block; padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; color: white; transition: all 0.15s; }
.btn-blue { background: var(--accent); }
.btn-blue:hover { background: #1d4ed8; }
.btn-green { background: var(--success); }
.btn-green:hover { background: #15803d; }
.btn-red { background: var(--danger); }
.btn-red:hover { background: #b91c1c; }
.btn-purple { background: var(--purple); }
.btn-purple:hover { background: #6d28d9; }
.btn-gray { background: var(--bg); color: var(--text2); border: 1px solid var(--border); }
.btn-gray:hover { background: var(--border-light); }
.btn-lg { padding: 10px 28px; font-size: 14px; }

/* ── Campaign Cards ─────────────────────────────────────────────────────── */

.campaign-card { background: var(--card); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; border-left: 4px solid var(--border); box-shadow: var(--shadow); }
.campaign-card.active { border-left-color: var(--success); }
.campaign-card.ready { border-left-color: var(--warning); }
.campaign-card.completed { border-left-color: var(--text3); opacity: 0.7; }
.campaign-card.paused { border-left-color: var(--accent); }

.campaign-header { display: flex; justify-content: space-between; align-items: center; }
.campaign-name { font-size: 15px; font-weight: 600; color: var(--text); }
.campaign-actions { display: flex; gap: 8px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; margin-left: 8px; }
.badge-active { background: var(--success-light); color: var(--success); }
.badge-ready { background: var(--warning-light); color: var(--warning); }
.badge-completed { background: var(--bg); color: var(--text3); border: 1px solid var(--border); }
.badge-paused { background: var(--accent-light); color: var(--accent); }

.campaign-stats { display: flex; gap: 20px; margin-top: 8px; color: var(--text2); font-size: 12px; }
.campaign-stats strong { color: var(--text); }
.campaign-meta { color: var(--text3); font-size: 11px; margin-top: 4px; }

.progress-bar { margin-top: 12px; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--success); }

/* ── CSV Upload ─────────────────────────────────────────────────────────── */

.upload-layout { display: flex; gap: 24px; }
.upload-left { width: 300px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; color: var(--text2); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 500; }
.form-input { width: 100%; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-family: inherit; }
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

.drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.2s; background: var(--card); }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); background: var(--accent-light); }
.drop-zone .icon { font-size: 28px; margin-bottom: 8px; }
.drop-zone .hint { color: var(--text2); font-size: 13px; }
.drop-zone .count { color: var(--text3); font-size: 11px; margin-top: 4px; }

.mapping-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.mapping-table td { padding: 6px 8px; }
.mapping-table .csv-col { color: var(--text); }
.mapping-table .arrow { color: var(--text3); text-align: center; }
.mapping-table .mapped { background: var(--accent-light); color: var(--accent); padding: 2px 8px; border-radius: 4px; display: inline-block; font-weight: 500; }
.mapping-table .mapped-extra { background: var(--warning-light); color: var(--warning); padding: 2px 8px; border-radius: 4px; display: inline-block; }
.mapping-table .check { text-align: center; }
.mapping-table .check-ok { color: var(--success); }
.mapping-table .check-warn { color: var(--warning); }

/* ── Dialer ─────────────────────────────────────────────────────────────── */

.dialer-topbar { background: var(--card); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); margin: -24px -24px 0; box-shadow: var(--shadow); }
.dialer-topbar .campaign-info { display: flex; align-items: center; gap: 12px; }
.dialer-topbar .campaign-title { color: var(--text); font-weight: 700; font-size: 15px; }
.dialer-topbar .live-stats { display: flex; gap: 16px; color: var(--text2); font-size: 12px; }
.dialer-topbar .controls { display: flex; gap: 10px; }

.dialer-body { display: flex; min-height: calc(100vh - 130px); margin: 0 -24px; background: var(--card); }

.dialer-left { width: 380px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }

.call-status { padding: 24px; text-align: center; }
.call-status .label { color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.call-status .caller-name { font-size: 22px; font-weight: 700; margin: 8px 0; color: var(--text); }
.call-status .caller-phone { color: var(--text2); font-size: 14px; }
.call-status .status-indicator { margin: 16px 0; }
.call-status .status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; }
.status-dot.ringing { background: var(--success); animation: pulse 1.5s infinite; }
.status-dot.connected { background: var(--success); }
.status-dot.on-hold { background: var(--warning); }
.status-dot.idle { background: var(--text3); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.call-controls { padding: 0 24px 20px; display: flex; gap: 10px; justify-content: center; }
.call-btn { text-align: center; cursor: pointer; }
.call-btn .icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--card); border: 1px solid var(--border); transition: all 0.2s; box-shadow: var(--shadow); }
.call-btn .icon:hover { background: var(--bg); }
.call-btn.end .icon { background: var(--danger); border-color: var(--danger); color: white; }
.call-btn.transfer .icon { background: var(--purple); border-color: var(--purple); color: white; }
.call-btn.active .icon { background: var(--accent); border-color: var(--accent); color: white; }
.call-btn .text { color: var(--text2); font-size: 10px; margin-top: 4px; }

.queue-section { border-top: 1px solid var(--border); padding: 16px 20px; flex: 1; overflow-y: auto; }
.queue-section .label { color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 500; }
.queue-item { background: var(--bg); padding: 8px 12px; border-radius: 8px; display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; }
.queue-item .name { color: var(--text); }
.queue-item .phone { color: var(--text3); }

/* ── Screen Pop ─────────────────────────────────────────────────────────── */

.screen-pop { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; }
.screen-pop .label { color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-weight: 500; }

.pop-card { background: var(--bg); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; max-width: 480px; width: 100%; border: 1px solid var(--border-light); }
.pop-card .card-title { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.pop-card .card-title.blue { color: var(--accent); }
.pop-card .card-title.purple { color: var(--purple); }

.prop-table { font-size: 13px; line-height: 1.8; border-collapse: collapse; }
.prop-table td.prop-label { color: var(--text2); padding: 2px 24px 2px 0; white-space: nowrap; vertical-align: top; }
.prop-table td.prop-value { color: var(--text); padding: 2px 0; }

/* ── Disposition ────────────────────────────────────────────────────────── */

.paused-banner { background: var(--warning-light); padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--warning); font-weight: 600; font-size: 13px; border: 1px solid rgba(217,119,6,0.2); }

.disposition-wrap { display: flex; min-height: 460px; }
.disposition-left { width: 380px; border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; }
.disposition-right { flex: 1; padding: 20px; display: flex; flex-direction: column; }

.ai-summary { background: var(--bg); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; flex: 1; border: 1px solid var(--border-light); }
.ai-summary .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ai-summary .tag { color: var(--text3); font-size: 11px; background: var(--border-light); padding: 2px 8px; border-radius: 4px; }
.ai-summary .body { color: var(--text); font-size: 12px; line-height: 1.7; border-left: 2px solid var(--purple); padding-left: 12px; }
.ai-summary .links { margin-top: 10px; font-size: 11px; }
.ai-summary .links a { color: var(--accent); text-decoration: underline; cursor: pointer; }
.ai-summary .links .sep { color: var(--text3); margin: 0 6px; }

.recording-player { background: var(--bg); border-radius: var(--radius); padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-light); }
.play-btn { width: 32px; height: 32px; background: var(--border-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.play-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; }
.play-time { color: var(--text3); font-size: 11px; }

.disp-buttons { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; margin-bottom: 20px; }
.disp-btn { padding: 8px 16px; border-radius: 8px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); color: var(--text); background: var(--card); transition: all 0.15s; font-family: inherit; }
.disp-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.disp-btn.selected { border: 2px solid var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 600; }
.disp-btn.dnc { border-color: var(--danger); color: var(--danger); }
.disp-btn.dnc:hover { background: var(--danger-light); }
.disp-btn.dnc.selected { background: var(--danger-light); border-color: var(--danger); color: var(--danger); font-weight: 600; }

.notes-field { width: 100%; max-width: 480px; min-height: 80px; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; margin-bottom: 20px; }
.notes-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

.disposition-actions { display: flex; gap: 10px; max-width: 480px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.disposition-actions .spacer { flex: 1; }

/* Google Places Autocomplete dropdown */
.pac-container { z-index: 10000 !important; }

/* ── Manual Dialer ──────────────────────────────────────────────────────── */

.manual-dialer-layout {
    display: flex; gap: 24px; max-width: 820px; margin: 0 auto; padding-top: 24px;
    align-items: stretch;
}

.dialpad-column { width: 340px; flex-shrink: 0; display: flex; }
.dialpad-column .dialpad-card { flex: 1; }
.recent-column { flex: 1; min-width: 0; display: flex; }
.recent-column .recent-card { flex: 1; display: flex; flex-direction: column; }
.recent-column .recent-calls-entries { flex: 1; overflow-y: auto; }

.manual-call-view { max-width: 520px; margin: 24px auto 0; }

.section-label {
    color: var(--text2); font-size: 11px; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 10px; font-weight: 500;
}

/* Dialpad Card */
.dialpad-card {
    background: var(--card); border-radius: var(--radius); padding: 28px 24px 20px;
    box-shadow: var(--shadow-md);
}

.dialpad-display {
    position: relative; text-align: center; margin-bottom: 24px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border-light);
}

.area-hint {
    color: var(--accent); font-size: 11px; font-weight: 500; letter-spacing: 0.5px;
    min-height: 18px; margin-bottom: 4px;
}

.dialpad-number {
    width: 100%; text-align: center; border: none; background: transparent;
    font-size: 28px; font-weight: 600; color: var(--text); letter-spacing: 1px;
    font-family: inherit; outline: none; cursor: default;
}
.dialpad-number::placeholder { color: var(--text3); font-weight: 400; }

.backspace-btn {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    color: var(--text3); font-size: 22px; cursor: pointer; padding: 8px;
    border-radius: 8px; transition: all 0.15s; user-select: none;
}
.backspace-btn:hover { color: var(--text); background: var(--bg); }

/* Dialpad Grid */
.dialpad-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 24px; padding: 0 8px;
}

.dialpad-key {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 62px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-light);
    cursor: pointer; transition: all 0.12s; user-select: none;
}
.dialpad-key:hover { background: var(--accent-light); border-color: var(--accent); }
.dialpad-key:active { transform: scale(0.95); background: var(--accent-light); }

.key-digit { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1; }
.key-letters { font-size: 9px; color: var(--text3); letter-spacing: 2px; margin-top: 2px; }

/* Call Button */
.dialpad-actions { display: flex; justify-content: center; }

.call-btn-round {
    width: 64px; height: 64px; border-radius: 50%; background: var(--success);
    border: none; color: white; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: all 0.15s; box-shadow: 0 4px 12px rgba(22,163,74,0.3);
}
.call-btn-round:hover { background: #15803d; transform: scale(1.05); box-shadow: 0 6px 20px rgba(22,163,74,0.4); }
.call-btn-round:active { transform: scale(0.97); }
.call-btn-round:disabled { background: var(--text3); box-shadow: none; cursor: not-allowed; transform: none; }

/* Recent Calls Card (right side) */
.recent-card {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-md);
    overflow: hidden;
}
.recent-card-header {
    padding: 14px 20px; font-size: 13px; font-weight: 600; color: var(--text);
    border-bottom: 1px solid var(--border-light); text-transform: uppercase;
    letter-spacing: 0.5px;
}
.recent-calls-entries { max-height: 520px; overflow-y: auto; }
.recent-empty { padding: 40px 20px; text-align: center; color: var(--text3); font-size: 13px; }
.recent-loading { padding: 40px 20px; text-align: center; color: var(--text3); font-size: 13px; }

.recent-entry {
    display: flex; align-items: center; gap: 12px; padding: 12px 20px;
    border-bottom: 1px solid var(--border-light); cursor: pointer;
    transition: background 0.12s;
}
.recent-entry:last-child { border-bottom: none; }
.recent-entry:hover { background: var(--accent-light); }

.recent-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--accent-light);
    color: var(--accent); font-size: 12px; font-weight: 600; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.recent-info { flex: 1; min-width: 0; }
.recent-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-number { font-size: 12px; color: var(--text2); }

.recent-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.recent-time { font-size: 10px; color: var(--text3); }
.recent-campaign { font-size: 10px; color: var(--text3); }

.recent-disp {
    font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 4px;
    white-space: nowrap;
}
.recent-disp.disp-interested { background: var(--success-light); color: var(--success); }
.recent-disp.disp-not-interested { background: var(--danger-light); color: var(--danger); }
.recent-disp.disp-callback { background: var(--accent-light); color: var(--accent); }
.recent-disp.disp-no-answer { background: var(--bg); color: var(--text3); }
.recent-disp.disp-voicemail { background: var(--warning-light); color: var(--warning); }
.recent-disp.disp-dnc { background: var(--danger-light); color: var(--danger); }

/* Contact Card Panel */
.contact-card-panel {
    background: var(--card); border-radius: var(--radius); padding: 16px;
    box-shadow: var(--shadow); margin-bottom: 16px;
}
.contact-card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.contact-card-header span:first-child { color: var(--accent); font-weight: 700; font-size: 14px; }
.contact-card-hint { color: var(--text3); font-size: 10px; }
.contact-card-grid { display: grid; grid-template-columns: 60px 1fr; gap: 6px 12px; font-size: 13px; }
.contact-card-label { color: var(--text2); font-size: 12px; display: flex; align-items: center; }
.contact-card-input { padding: 6px 10px !important; font-size: 13px !important; }

/* Call Status Panel */
.call-status-panel { text-align: center; margin-bottom: 16px; padding: 20px 0; }
.call-status-text { color: var(--text2); font-size: 14px; }
.call-timer { color: var(--text3); font-size: 32px; font-weight: 600; margin-top: 8px; }

/* Disposition Panel */
.disposition-panel {
    background: var(--card); border-radius: 0 0 var(--radius) var(--radius); padding: 20px;
}
.disp-stats { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; }
.disp-stat { text-align: center; }
.disp-stat-label { color: var(--text2); font-size: 10px; text-transform: uppercase; }
.disp-stat-value { color: var(--text3); font-size: 14px; font-weight: 600; }
.disp-stat-value.green { color: var(--success); }

/* Responsive: stack on narrow screens */
@media (max-width: 700px) {
    .manual-dialer-layout { flex-direction: column; }
    .dialpad-column { width: 100%; }
}

/* ── Call Logs ──────────────────────────────────────────────────────────── */

.logs-filter { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.logs-filter select {
    padding: 8px 14px; background: var(--card); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); font-size: 13px; appearance: auto; cursor: pointer;
    font-family: inherit;
}
.logs-filter select:focus { outline: none; border-color: var(--accent); }

.logs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.logs-table th {
    text-align: left; padding: 12px 12px; color: var(--text2); font-weight: 500;
    border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.logs-table td { padding: 12px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.logs-table tr:hover { background: var(--accent-light); }

.log-row-clickable { cursor: pointer; }
.log-row-clickable:hover { background: var(--accent-light); }

.log-badge {
    display: inline-block; padding: 2px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.5px; margin-left: 4px;
}
.log-badge.recording { background: var(--success-light); color: var(--success); }
.log-badge.summary { background: var(--purple-light); color: var(--purple); }

/* ── Call Detail Page ──────────────────────────────────────────────────── */

.back-link {
    color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 500;
}
.back-link:hover { text-decoration: underline; }

.detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px;
}
@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }

.detail-card {
    background: var(--card); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow);
}

.card-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.8px; margin-bottom: 12px;
}
.card-title.blue { color: var(--accent); }
.card-title.green { color: var(--success); }
.card-title.purple { color: var(--purple); }

.prop-table { width: 100%; border-collapse: collapse; }
.prop-table td { padding: 6px 0; font-size: 13px; }
.prop-table .prop-label { color: var(--text2); width: 100px; }
.prop-table .prop-value { color: var(--text); }

.disp-pill {
    display: inline-block; padding: 3px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 500;
}
.disp-pill.interested { background: var(--success-light); color: var(--success); }
.disp-pill.not-interested { background: var(--danger-light); color: var(--danger); }
.disp-pill.callback { background: var(--accent-light); color: var(--accent); }
.disp-pill.no-answer { background: var(--bg); color: var(--text3); border: 1px solid var(--border); }
.disp-pill.voicemail { background: var(--warning-light); color: var(--warning); }
.disp-pill.bad-number { background: var(--danger-light); color: var(--danger); }
.disp-pill.dnc { background: var(--danger); color: white; }
.disp-pill.none { background: var(--bg); color: var(--text3); border: 1px solid var(--border); }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.pagination a {
    padding: 6px 14px; background: var(--card); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text2); text-decoration: none; font-size: 13px;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination a.active { background: var(--accent); border-color: var(--accent); color: white; }

/* ── Settings Page ─────────────────────────────────────────────────────── */

.settings-card {
    background: var(--card); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow); margin-bottom: 16px;
}
.settings-card-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.8px; margin-bottom: 16px;
}
.settings-card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.settings-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr; } }

.drop-message-section { display: flex; flex-direction: column; gap: 12px; }
.drop-current { display: flex; align-items: center; gap: 12px; }
.drop-filename { color: var(--text2); font-size: 12px; }

.upload-status { font-size: 13px; margin-top: 4px; }
.upload-status.success { color: var(--success); }
.upload-status.error { color: var(--danger); }

.save-status { font-size: 13px; margin-left: 12px; }
.save-status.success { color: var(--success); }
.save-status.error { color: var(--danger); }

.error-filter { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.error-filter select {
    padding: 6px 12px; background: var(--card); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); font-size: 12px; font-family: inherit;
}

.error-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.error-table th {
    text-align: left; padding: 8px 10px; color: var(--text2); font-weight: 500;
    border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.error-table td { padding: 10px; border-bottom: 1px solid var(--border-light); vertical-align: top; }

.source-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
}
.source-twilio { background: var(--accent-light); color: var(--accent); }
.source-transcription { background: var(--purple-light); color: var(--purple); }
.source-recording { background: var(--warning-light); color: var(--warning); }
.source-general { background: var(--bg); color: var(--text3); border: 1px solid var(--border); }

.error-badge {
    display: inline-block; background: var(--danger); color: white;
    font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
    margin-left: 6px; min-width: 18px; text-align: center;
}

/* ── Analytics ─────────────────────────────────────────────────────────── */

.kpi-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.kpi-card {
    background: var(--card); border-radius: var(--radius); padding: 16px 20px;
    box-shadow: var(--shadow); flex: 1; min-width: 140px; text-align: center;
}
.kpi-value { font-size: 28px; font-weight: 800; color: var(--text); }
.kpi-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.kpi-green .kpi-value { color: var(--success); }
.kpi-blue .kpi-value { color: var(--accent); }
.kpi-purple .kpi-value { color: var(--purple); }
.kpi-red .kpi-value { color: var(--danger); }

.analytics-card {
    background: var(--card); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow); margin-bottom: 16px;
}

.analytics-row { display: flex; gap: 16px; margin-bottom: 16px; }
.analytics-half { flex: 1; min-width: 0; }
@media (max-width: 800px) { .analytics-row { flex-direction: column; } }

/* Disposition Bar */
.disp-bar-container {
    display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin-bottom: 12px;
}
.disp-bar-segment {
    min-width: 2px; transition: width 0.3s;
}
.disp-legend {
    display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text2);
}
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.legend-count { color: var(--text3); font-size: 11px; }

/* Disposition Detail Table (per-campaign) */
.disp-detail-table { margin-top: 12px; }
.disp-detail-row {
    display: flex; justify-content: space-between; padding: 6px 0;
    border-bottom: 1px solid var(--border-light); font-size: 13px;
}

/* Daily Volume Chart */
.daily-chart {
    display: flex; align-items: flex-end; gap: 2px; height: 120px;
    padding: 0 4px; margin-bottom: 8px;
}
.daily-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.daily-bar-stack {
    width: 100%; max-width: 24px; background: #94a3b8; border-radius: 2px 2px 0 0;
    position: relative; min-height: 2px; display: flex; flex-direction: column; justify-content: flex-end;
}
.daily-bar-connected {
    background: var(--success); border-radius: 2px 2px 0 0; width: 100%;
}
.daily-bar-label {
    font-size: 9px; color: var(--text3); margin-top: 4px; white-space: nowrap;
}
.chart-legend-inline {
    display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text2); margin-top: 4px;
}

/* Rate Pills */
.rate-pill {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    font-size: 12px; font-weight: 600;
}
.rate-good { background: var(--success-light); color: var(--success); }
.rate-ok { background: var(--warning-light); color: var(--warning); }
.rate-low { background: var(--danger-light); color: var(--danger); }

/* Duration Buckets */
.bucket-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bucket-label { width: 50px; font-size: 12px; color: var(--text2); text-align: right; }
.bucket-bar-wrap { flex: 1; height: 20px; background: var(--border-light); border-radius: 4px; overflow: hidden; }
.bucket-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s; }
.bucket-count { font-size: 12px; color: var(--text); min-width: 70px; }

/* Hourly Heatmap */
.hourly-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.hour-cell {
    width: 52px; height: 48px; border-radius: 6px; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.hour-cell:hover { transform: scale(1.08); }
.hour-label { font-size: 10px; color: rgba(255,255,255,0.9); font-weight: 600; }
.hour-rate { font-size: 12px; color: white; font-weight: 700; }

/* Script panel */
.sp-header { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem;
  background:#f8fafc; border-bottom:1px solid #e2e8f0; font-weight:600; }
.sp-avatar { font-size:0.7rem; padding:0.1rem 0.5rem; background:#fef3c7; color:#92400e;
  border-radius:999px; font-weight:600; }
.sp-section { padding:0.6rem 0.75rem; border-bottom:1px solid #f1f5f9; }
.sp-label { font-size:0.7rem; font-weight:700; color:#64748b; text-transform:uppercase;
  letter-spacing:0.04em; margin-bottom:0.25rem; cursor:pointer; }
.sp-body { font-size:0.9rem; color:#1e293b; line-height:1.5; white-space:pre-wrap; }
.sp-missing { background:#fee2e2; color:#991b1b; padding:0 0.25rem; border-radius:3px;
  font-weight:600; }
.sp-q-row { margin-bottom:0.6rem; }
.sp-q-label { font-size:0.72rem; font-weight:700; color:#0891b2; }
.sp-q-question { font-size:0.82rem; color:#475569; font-style:italic; margin:0.1rem 0; }
.sp-q-input { width:100%; padding:0.4rem; border:1px solid #cbd5e1; border-radius:0.3rem;
  font-family:inherit; font-size:0.85rem; resize:vertical; }
.sp-mptc-status { font-size:0.75rem; color:#64748b; padding:0.25rem 0.75rem; min-height:1em; }
.sp-empty, .sp-error, .sp-loading { padding:1rem; color:#64748b; text-align:center; }
.sp-error { color:#991b1b; }