/* 📞 Cuộc gọi — Màn 8B: light theme like the rest of SmartSales, readable table, labelled actions.
   The page's inline <style> is all variables, so the dark palette is swapped here. */
:root {
  --bg-primary: #f4f6fa; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-solid: #ffffff; --bg-input: #ffffff; --bg-hover: #f3f4f6;
  --border: #e5e7eb; --border-light: #f1f2f5;
  --text-primary: #1f2937; --text-secondary: #4b5563; --text-muted: #6b7280;
  --accent: #1d4ed8; --accent-hover: #1e40af; --accent-glow: #eff6ff;
  --success: #047857; --warning: #b45309; --error: #b91c1c; --inbound: #047857; --outbound: #1d4ed8; --missed: #b91c1c;
}
body { background: var(--bg-primary); color: var(--text-primary); }
.main-content { max-width: 80rem; margin: 0 auto; padding: 1.2rem 1.4rem 2rem; }
.section { border-radius: .9rem; }
.section-title { font-size: 1.1rem; font-weight: 700; }
.filters-bar select, .filters-bar input { font-size: .9rem; padding: .45rem .7rem; min-height: 2.3rem; border: 1px solid #d1d5db; border-radius: .55rem; background: #fff; color: var(--text-primary); }
.data-table th { font-size: .8rem; text-transform: none; letter-spacing: 0; background: #f9fafb; }
.data-table td { font-size: .9rem; vertical-align: top; }
.data-table td small { display: block; color: var(--text-muted); font-size: .8rem; margin-top: .1rem; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover td { background: #f9fafb; }
.vc-dir { font-weight: 600; white-space: nowrap; }
tr.vc-missed .vc-dir { color: var(--missed); }
.vc-muted { color: #9ca3af; font-weight: 400; }
.vc-score { display: inline-block; min-width: 2.4rem; text-align: center; padding: .1rem .5rem; border-radius: 1rem; font-weight: 700; font-size: .85rem; }
.vc-score.good { background: #ecfdf5; color: #047857; }
.vc-score.mid { background: #fffbeb; color: #b45309; }
.vc-score.low { background: #fef2f2; color: #b91c1c; }
.vc-actions { white-space: nowrap; }
.vc-btn { padding: .3rem .6rem; border: 1px solid #d1d5db; border-radius: .45rem; background: #fff; color: #1f2937; font: 500 .82rem Inter, system-ui, sans-serif; cursor: pointer; margin-right: .25rem; }
.vc-btn:hover { border-color: #93c5fd; background: #eff6ff; }
.vc-btn-call { background: #ecfdf5; border-color: #6ee7b7; color: #047857; font-weight: 600; }
.stat-card { border-radius: .8rem; }
.stat-label { text-transform: none !important; letter-spacing: 0 !important; font-size: .85rem !important; }
.modal { color: var(--text-primary); }

/* 8B: call detail docks on the right (was a centered modal); the table stays visible and clickable */
#callDetailModal { background: transparent; backdrop-filter: none; justify-content: flex-end; align-items: stretch;
  top: calc(var(--ss-bar, 0px) + var(--ss-sub, 0px)); pointer-events: none; }
#callDetailModal.show { pointer-events: none; }
#callDetailModal .modal-card { pointer-events: auto; width: min(34rem, 40vw); max-width: none; max-height: none; height: 100%;
  border-radius: 0; border: 0; border-left: 1px solid #e5e7eb; box-shadow: -8px 0 24px rgba(15, 30, 58, .08); transform: translateX(100%); }
#callDetailModal.show .modal-card { transform: translateX(0); }
body.vc-detail-open .main-content { max-width: none; width: auto; margin: 0 min(34rem, 40vw) 0 0; } /* table uses all the room left of the detail */
#callsTableContainer tr.vc-active td { background: #eff6ff; }
@media (max-width: 900px) { #callDetailModal .modal-card { width: 100vw; } body.vc-detail-open #panelCalls { margin-right: 0; } }
.detail-item label, .detail-section-title, .data-table th, .stat-card .stat-label { text-transform: none; letter-spacing: 0; } /* sentence case (spec) */
.data-table th { white-space: nowrap; }