/* ════════════════════════════════════════════════════════════════════════
   opportunity.css — Design system cho module Cơ hội
   Phong cách: Salesforce Lightning / HubSpot / Odoo
   • Nhiều khoảng trắng, ít màu, bo góc & shadow đồng nhất.
   • Mọi class tiền tố .opp- để cô lập, không ảnh hưởng module khác.
   • Chỉ dùng biến màu từ app.css (--primary, --gray-*, --success…).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --opp-radius: 12px;
  --opp-radius-sm: 8px;
  --opp-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --opp-shadow-hover: 0 6px 16px rgba(16, 24, 40, .10);
  --opp-border: 1px solid var(--gray-200);
  /* Bảng màu rút gọn — chỉ 3 trạng thái sức khỏe + neutral */
  --opp-healthy: var(--success);
  --opp-warning: var(--warning);
  --opp-risk: var(--danger);
}

/* ── KPI cards (Salesforce-style, viền trung tính) ─────────────────────── */
.opp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.opp-kpi {
  background: #fff;
  border: var(--opp-border);
  border-radius: var(--opp-radius);
  padding: 14px 16px;
  box-shadow: var(--opp-shadow);
  transition: box-shadow .15s, transform .15s;
}
.opp-kpi.is-clickable { cursor: pointer; }
.opp-kpi.is-clickable:hover { box-shadow: var(--opp-shadow-hover); transform: translateY(-1px); }
.opp-kpi__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.opp-kpi__value { font-size: 22px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.opp-kpi__sub { font-size: 11px; color: var(--gray-400); margin-top: 4px; }
/* Biến thể nhấn nhẹ cho KPI cảnh báo — chỉ đổi màu chữ giá trị, không nền */
.opp-kpi--alert .opp-kpi__value { color: var(--opp-risk); }
.opp-kpi--warn .opp-kpi__value { color: var(--opp-warning); }
.opp-kpi--good .opp-kpi__value { color: var(--opp-healthy); }

/* ── Health badge ──────────────────────────────────────────────────────── */
.opp-health {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.opp-health--healthy { background: color-mix(in srgb, var(--opp-healthy) 12%, #fff); color: var(--opp-healthy); }
.opp-health--warning { background: color-mix(in srgb, var(--opp-warning) 14%, #fff); color: #92400e; }
.opp-health--risk    { background: color-mix(in srgb, var(--opp-risk) 12%, #fff);    color: var(--opp-risk); }
.opp-health__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── Probability bar ───────────────────────────────────────────────────── */
.opp-prob { display: flex; align-items: center; gap: 6px; }
.opp-prob__track { flex: 1; height: 6px; background: var(--gray-100); border-radius: 99px; overflow: hidden; min-width: 36px; }
.opp-prob__fill { height: 100%; border-radius: 99px; background: var(--primary); transition: width .2s; }
.opp-prob__pct { font-size: 11px; font-weight: 700; color: var(--gray-500); min-width: 30px; text-align: right; }

/* ── Workspace layout cho Opportunity Detail (70 / 30) ─────────────────── */
.opp-workspace { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: 16px; }
.opp-workspace__main { min-width: 0; }
.opp-workspace__side { min-width: 0; }
@media (max-width: 820px) { .opp-workspace { grid-template-columns: 1fr; } }

/* Khối tóm tắt ở cột phải */
.opp-summary-block { background: #fff; border: var(--opp-border); border-radius: var(--opp-radius-sm); padding: 12px 14px; margin-bottom: 12px; }
.opp-summary-block__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-400); margin-bottom: 8px; }
.opp-summary-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }
.opp-summary-row__k { color: var(--gray-500); }
.opp-summary-row__v { font-weight: 600; color: var(--gray-800); text-align: right; }

/* ── Activity timeline ─────────────────────────────────────────────────── */
.opp-timeline { position: relative; padding-left: 26px; }
.opp-timeline::before { content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: var(--gray-100); }
.opp-tl-item { position: relative; padding: 0 0 16px 0; }
.opp-tl-item__dot {
  position: absolute; left: -26px; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.opp-tl-item__body { background: #fff; border: var(--opp-border); border-radius: var(--opp-radius-sm); padding: 9px 12px; }
.opp-tl-item__head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gray-800); }
.opp-tl-item__meta { font-size: 11px; color: var(--gray-400); margin-top: 3px; }
.opp-tl-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* ── Quick action bar ──────────────────────────────────────────────────── */
.opp-qab { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ── Pipeline stage header (đếm / tổng / weighted / conversion) ────────── */
.opp-stage-stats { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; font-size: 10px; color: var(--gray-500); }
.opp-stage-stats b { color: var(--gray-700); }