/* client-profitability-scorecard — extracted from inline <style> */
/* ---- Client card colors ---- */
.evvy-cps-card { position: relative; border: 1.5px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px); padding: 1.25rem 1.25rem 1rem; margin-bottom: 0.75rem; background: var(--bs-body-bg, #fff); border-left: 4px solid #5B8DEF; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.evvy-cps-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.evvy-cps-card[data-color="1"] { border-left-color: #5B8DEF; }
.evvy-cps-card[data-color="2"] { border-left-color: #2EC4B6; }
.evvy-cps-card[data-color="3"] { border-left-color: #F5A623; }
.evvy-cps-card[data-color="4"] { border-left-color: #E74C8B; }
.evvy-cps-card[data-color="5"] { border-left-color: #8B5CF6; }
.evvy-cps-card[data-color="6"] { border-left-color: #EF4444; }
.evvy-cps-card[data-color="7"] { border-left-color: #10B981; }
.evvy-cps-card[data-color="8"] { border-left-color: #F97316; }

/* ---- Card header ---- */
.evvy-cps-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; }
.evvy-cps-card-number { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.evvy-cps-card[data-color="1"] .evvy-cps-card-number { background: #5B8DEF; }
.evvy-cps-card[data-color="2"] .evvy-cps-card-number { background: #2EC4B6; }
.evvy-cps-card[data-color="3"] .evvy-cps-card-number { background: #F5A623; }
.evvy-cps-card[data-color="4"] .evvy-cps-card-number { background: #E74C8B; }
.evvy-cps-card[data-color="5"] .evvy-cps-card-number { background: #8B5CF6; }
.evvy-cps-card[data-color="6"] .evvy-cps-card-number { background: #EF4444; }
.evvy-cps-card[data-color="7"] .evvy-cps-card-number { background: #10B981; }
.evvy-cps-card[data-color="8"] .evvy-cps-card-number { background: #F97316; }
.evvy-cps-card-header input[type="text"] { flex: 1; font-size: 0.9375rem; font-weight: 600; border: none; border-bottom: 1.5px solid var(--evvy-border-color, #DEE2E6); background: transparent; padding: 0.25rem 0; color: var(--evvy-text-primary, #333); outline: none; transition: border-color 0.15s ease; }
.evvy-cps-card-header input[type="text"]:focus { border-bottom-color: var(--cluster-dark, #4A1528); }

/* ---- Card grid ---- */
.evvy-cps-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.evvy-cps-field label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--evvy-text-secondary, #666); margin-bottom: 0.25rem; }
.evvy-cps-field .input-group { font-size: 0.875rem; }
.evvy-cps-field .input-group-text { font-size: 0.8125rem; padding: 0.375rem 0.625rem; }
.evvy-cps-field .form-control { font-size: 0.875rem; }
.evvy-cps-field select.form-select { font-size: 0.8125rem; padding: 0.375rem 2rem 0.375rem 0.625rem; }
.evvy-cps-field-full { grid-column: 1 / -1; }

/* ---- Remove button ---- */
.evvy-cps-remove { position: absolute; top: 0.625rem; right: 0.625rem; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--evvy-border-color, #DEE2E6); background: transparent; color: var(--evvy-text-secondary, #666); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.875rem; transition: all 0.15s ease; }
.evvy-cps-remove:hover { background: #dc3545; border-color: #dc3545; color: #fff; }

/* ---- Add client button ---- */
.evvy-cps-add-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem; border: 2px dashed var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px); background: transparent; color: var(--evvy-text-secondary, #666); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; width: 100%; margin-bottom: 0.75rem; }
.evvy-cps-add-btn:hover { border-color: var(--cluster-dark, #4A1528); color: var(--cluster-dark, #4A1528); background: var(--cluster-surface, #F7EDEF); }

/* ---- Target rate input ---- */
.evvy-cps-target-section { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; padding: 0.875rem 1rem; background: var(--cluster-surface, #F7EDEF); border-radius: var(--evvy-radius-lg, 12px); border: 1.5px solid var(--evvy-border-color, #DEE2E6); }
.evvy-cps-target-section label { font-size: 0.8125rem; font-weight: 600; color: var(--evvy-text-primary, #333); white-space: nowrap; margin: 0; }
.evvy-cps-target-section .input-group { max-width: 160px; }

/* ---- Results dashboard ---- */
.evvy-cps-dashboard { margin-top: 0.5rem; }
.evvy-cps-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.evvy-cps-summary-card { background: var(--bs-body-bg, #fff); border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px); padding: 0.875rem 1rem; text-align: center; }
.evvy-cps-summary-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--evvy-text-secondary, #666); margin-bottom: 0.25rem; }
.evvy-cps-summary-value { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--evvy-text-primary, #333); }

/* ---- Ranking table ---- */
.evvy-cps-table-wrap { overflow-x: auto; border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px); }
.evvy-cps-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.evvy-cps-table thead th { background: var(--cluster-surface, #F7EDEF); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--evvy-text-secondary, #666); padding: 0.625rem 0.75rem; text-align: left; white-space: nowrap; border-bottom: 1.5px solid var(--evvy-border-color, #DEE2E6); }
.evvy-cps-table tbody td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--evvy-border-color, #DEE2E6); vertical-align: middle; font-variant-numeric: tabular-nums; }
.evvy-cps-table tbody tr:last-child td { border-bottom: none; }
.evvy-cps-table .evvy-cps-client-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; }
.evvy-cps-table .evvy-cps-name-cell { font-weight: 600; white-space: nowrap; }
.evvy-cps-table td.evvy-cps-num { text-align: right; font-weight: 600; }

/* ---- Recommendation badges ---- */
.evvy-cps-badge { display: inline-block; padding: 0.2rem 0.625rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.evvy-cps-badge-keep { background: #d4edda; color: #155724; }
.evvy-cps-badge-optimize { background: #fff3cd; color: #856404; }
.evvy-cps-badge-fire { background: #f8d7da; color: #721c24; }

/* ---- Score bar ---- */
.evvy-cps-score-bar { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; }
.evvy-cps-score-track { flex: 1; height: 6px; border-radius: 3px; background: var(--evvy-border-color, #DEE2E6); overflow: hidden; }
.evvy-cps-score-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.evvy-cps-score-num { font-weight: 700; font-size: 0.8125rem; min-width: 24px; text-align: right; }

/* ---- Premium: Scatter plot ---- */
.evvy-cps-scatter-wrap { border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px); padding: 1.25rem; margin-top: 1rem; background: var(--bs-body-bg, #fff); }
.evvy-cps-scatter-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--evvy-text-primary, #333); }
.evvy-cps-scatter-svg { width: 100%; height: auto; }
.evvy-cps-scatter-svg text { font-family: inherit; }

/* ---- Premium: Rate optimizer ---- */
.evvy-cps-rate-opt { border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px); padding: 1.25rem; margin-top: 1rem; background: var(--bs-body-bg, #fff); }
.evvy-cps-rate-opt-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--evvy-text-primary, #333); }
.evvy-cps-rate-card { padding: 0.75rem 1rem; border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius, 8px); margin-bottom: 0.625rem; }
.evvy-cps-rate-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.375rem; }
.evvy-cps-rate-card-name { font-weight: 600; font-size: 0.875rem; }
.evvy-cps-rate-card-delta { font-weight: 700; font-size: 0.875rem; }
.evvy-cps-rate-card-delta.positive { color: #dc3545; }
.evvy-cps-rate-card-delta.at-target { color: #28a745; }
.evvy-cps-rate-card-detail { font-size: 0.75rem; color: var(--evvy-text-secondary, #666); margin-bottom: 0.25rem; }
.evvy-cps-rate-card-talking { font-size: 0.75rem; color: var(--evvy-text-secondary, #666); font-style: italic; padding-left: 0.75rem; border-left: 2px solid var(--evvy-border-color, #DEE2E6); margin-top: 0.375rem; }

/* ---- Premium: Portfolio health ---- */
.evvy-cps-health { border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px); padding: 1.25rem; margin-top: 1rem; background: var(--bs-body-bg, #fff); }
.evvy-cps-health-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--evvy-text-primary, #333); }
.evvy-cps-health-grade { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.evvy-cps-health-grade-letter { font-size: 3rem; font-weight: 800; color: var(--cluster-dark, #4A1528); line-height: 1; }
.evvy-cps-health-grade-label { font-size: 0.875rem; font-weight: 600; color: var(--evvy-text-secondary, #666); }
.evvy-cps-health-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
.evvy-cps-health-metric { padding: 0.75rem; border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius, 8px); }
.evvy-cps-health-metric-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--evvy-text-secondary, #666); margin-bottom: 0.25rem; }
.evvy-cps-health-metric-value { font-size: 1rem; font-weight: 700; color: var(--evvy-text-primary, #333); }
.evvy-cps-health-recs { list-style: none; padding: 0; margin: 0; }
.evvy-cps-health-recs li { padding: 0.375rem 0; font-size: 0.8125rem; color: var(--evvy-text-secondary, #666); border-bottom: 1px solid var(--evvy-border-color, #DEE2E6); }
.evvy-cps-health-recs li:last-child { border-bottom: none; }
.evvy-cps-health-recs li i { margin-right: 0.375rem; }

/* ---- Dark mode ---- */
[data-bs-theme="dark"] .evvy-cps-card { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-cps-card-header input[type="text"] { color: var(--evvy-text-primary, #E0E0E0); }
[data-bs-theme="dark"] .evvy-cps-target-section { background: color-mix(in srgb, var(--cluster-dark, #4A1528) 15%, var(--bs-body-bg)); }
[data-bs-theme="dark"] .evvy-cps-summary-card { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-cps-table thead th { background: color-mix(in srgb, var(--cluster-dark, #4A1528) 15%, var(--bs-body-bg)); }
[data-bs-theme="dark"] .evvy-cps-badge-keep { background: #1a3d2a; color: #7ce0a0; }
[data-bs-theme="dark"] .evvy-cps-badge-optimize { background: #3d3520; color: #f0d97a; }
[data-bs-theme="dark"] .evvy-cps-badge-fire { background: #3d1a1e; color: #f09a9a; }
[data-bs-theme="dark"] .evvy-cps-scatter-wrap,
[data-bs-theme="dark"] .evvy-cps-rate-opt,
[data-bs-theme="dark"] .evvy-cps-health { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .evvy-cps-add-btn:hover { background: color-mix(in srgb, var(--cluster-dark, #4A1528) 15%, var(--bs-body-bg)); }

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  .evvy-cps-card-grid { grid-template-columns: 1fr; }
  .evvy-cps-summary { grid-template-columns: 1fr 1fr; }
  .evvy-cps-health-metrics { grid-template-columns: 1fr; }
  .evvy-cps-target-section { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .evvy-cps-target-section .input-group { max-width: 100%; }
}
@media (max-width: 575.98px) {
  .evvy-cps-summary { grid-template-columns: 1fr; }
  .evvy-cps-card { padding: 1rem; }
}