/* ════════════════════════════════════════════════════════════════
   Sales OS — Revamp (Codename mono + cobalt accent)
   Áp dụng cho 11 tab của workspace Sales — TRỪ Dashboard (#tab-dashboard
   đã có theme riêng: dashboard-revamp.css + dashboard-v2.css).

   Triết lý: khớp Dashboard cobalt-mono + áp skill magnolia-ux-ui
   (Monday light-first) ở mức cấu trúc: layered surface, card + shadow,
   radius mềm, status palette đúng nghĩa, font hỗ trợ tiếng Việt.

   ANTI-STOMP:
   - Mọi rule scoped trong #tab-* cụ thể → KHÔNG bleed sang Dashboard
     hay workspace khác (Commercial Plan / Warehouse / RTM / …).
   - Re-theme chủ yếu qua OVERRIDE CSS VARIABLE (--accent, --cs, --ca…)
     mà các class chung vốn đã tiêu thụ → không cần fight specificity,
     không sửa markup, không đụng JS.
   - KHÔNG override inline-style mà JS toggle (vd nút view WS table/calendar)
     để không phá trạng thái active.
   Font: Be Vietnam Pro (đủ glyph tiếng Việt — skill luật 6b).
   ════════════════════════════════════════════════════════════════ */

/* ── 0c. Dashboard: chart "Hoạt động theo ngày" (dv2-daily) full-width như chart dưới ──
   Trước: height:300px cố định + preserveAspectRatio meet → SVG fit & căn giữa → hẹp.
   Sửa: height:auto + aspect-ratio theo viewBox 1000×280 → tràn full-width, hết whitespace. */
#dv2-daily { height: auto !important; aspect-ratio: 1000 / 280; }

/* ── 0e. Nút Đối soát DS (#4) + badge "chưa gắn doanh số" (#6) ── */
#tab-dashboard .dv2-audit-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  padding: 6px 12px; border-radius: 9px; border: 1px solid #C7D6FF;
  background: #fff; color: #1D4ED8; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: all .18s ease;
}
#tab-dashboard .dv2-audit-btn:hover { background: #2563EB; color: #fff; border-color: #2563EB; }
#tab-dashboard .dv2-audit-btn .ic { width: 15px; height: 15px; }
.no-warn { display: inline-block; font-size: 11px; font-weight: 700; color: #E2445C; background: #FCE8EB; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }

/* ── 0d. Dashboard: tiles 6 ô (thêm AOV + Net/lít) + tile click + modal outlet mở mới ── */
#tab-dashboard .dv2-tiles { grid-template-rows: none; grid-auto-rows: 1fr; }
#tab-dashboard .dv2-tile-click { cursor: pointer; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease; }
#tab-dashboard .dv2-tile-click:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,99,235,.18); }
/* Modal outlet mở mới */
.no-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; animation: noFade .18s ease; }
@keyframes noFade { from { opacity: 0 } to { opacity: 1 } }
.no-card { width: min(720px, 96vw); max-height: 86vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(15,23,42,.3); overflow: hidden; font-family: 'Be Vietnam Pro','Figtree',system-ui,sans-serif; animation: noPop .26s cubic-bezier(.34,1.56,.64,1); }
@keyframes noPop { from { transform: scale(.96); opacity: .6 } to { transform: scale(1); opacity: 1 } }
.no-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #2563EB; color: #fff; }
.no-head h3 { margin: 0; font-size: 15px; font-weight: 800; flex: 1; display: flex; align-items: center; gap: 8px; }
.no-head h3 .ic { width: 18px; height: 18px; }
.no-x { background: rgba(255,255,255,.18); color: #fff; border: none; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.no-x:hover { background: rgba(255,255,255,.32); }
.no-body { overflow: auto; padding: 8px 16px 18px; }
.no-team { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 6px; font-size: 13.5px; font-weight: 800; color: #18181B; border-bottom: 2px solid #ECECEE; padding-bottom: 5px; }
.no-team em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 12px; color: #2563EB; }
.no-mem { display: flex; align-items: center; gap: 7px; margin: 10px 0 3px; font-size: 12.5px; font-weight: 700; color: #1D4ED8; }
.no-mem .ic { width: 15px; height: 15px; color: #6B6B72; }
.no-mem em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 11.5px; color: #6B6B72; }
.no-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.no-tbl td { padding: 6px 8px; border-bottom: 1px solid #F1F2F5; }
.no-tbl .no-i { color: #A1A1AA; width: 26px; }
.no-tbl .no-nm { font-weight: 600; color: #18181B; }
.no-tbl .no-dt { color: #6B6B72; white-space: nowrap; width: 92px; }
.no-tbl .no-rv { text-align: right; font-weight: 700; color: #18181B; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 0a. Ẩn tab Summary + Daily khỏi nav (Summary bỏ, Daily gộp vào Dashboard) ── */
#workspace-sales .tab-btn[data-tab="funnel"] { display: none !important; }
#workspace-sales .tab-btn[data-tab="daily"] { display: none !important; }
/* icon SVG cho rail dọc (app-tabrail) — chỉ áp khi là icon .ic (tab Sales) */
.ws-tabrail .wtr-ic .ic { width: 20px; height: 20px; vertical-align: middle; }

/* ── 1. Palette override (scoped 11 tab, chừa #tab-dashboard) ── */
#tab-funnel,
#tab-target,
#tab-team-mien-nam,
#tab-team-bac-trung,
#tab-daily,
#tab-gap,
#tab-plan-ca,
#tab-working-schedule,
#tab-kpi,
#tab-ban-lam-viec,
#tab-ct-de-xuat,
#dash-daily-embed {
  /* cobalt-mono base (khớp dashboard-revamp.css) */
  --so-ink:    #18181B;
  --so-cobalt: #2563EB;
  --so-cobalt-h:#1D4ED8;
  --so-amber:  #F59E0B;
  --so-teal:   #3FC9BA;
  --so-card:   #FFFFFF;
  --so-line:   #ECECEE;
  --so-muted:  #6B6B72;
  --so-soft:   #A1A1AA;
  --so-bg:     #F1F1F3;
  --so-sh:     0 2px 18px rgba(20,20,25,.05);
  --so-radius: 16px;

  /* ── Bảng màu "Orion" — gradient phễu + cobalt/crimson (chuẩn toàn Sales OS) ── */
  --so-indigo: #6366F1;   /* raw / điểm vào   */
  --so-blue:   #3B82F6;   /* sql / C.S        */
  --so-cyan:   #22D3EE;   /* sampling / grow  */
  --so-green:  #00C875;   /* won / maintain   */
  --so-crimson:#E2445C;   /* fail / nguy hiểm */

  /* status palette (dùng cho stage/pill) — khớp STAGE_HUE phễu */
  --so-done:   #00C875; --so-done-bg:   #E5F9F0;
  --so-working:#F59E0B; --so-working-bg:#FFF4E5;
  --so-stuck:  #E2445C; --so-stuck-bg:  #FCE8EB;
  --so-info:   #3B82F6; --so-info-bg:   #E9F2FF;
  --so-purple: #A25DDC; --so-purple-bg: #F3EAFB;
  --so-dark:   #333333; --so-dark-bg:   #EDEDEF;

  /* ── map vào biến hệ thống mà các class chung đã dùng ── */
  --accent:      var(--so-cobalt);
  --accent-2:    var(--so-cobalt-h);
  --accent-soft: #E5EDFF;
  --primary:     var(--so-cobalt);
  --cs:          var(--so-blue);     /* C.S / current → blue   */
  --ca:          var(--so-amber);    /* C.A / new     → amber  */
  --total:       var(--so-cobalt);   /* tổng          → cobalt */
  --actual:      var(--so-cobalt);
  --success:     var(--so-done);
  --warn:        var(--so-working);
  --danger:      var(--so-stuck);
  --text:        var(--so-ink);
  --text-muted:  var(--so-muted);
  --text-soft:   var(--so-soft);
  --border:      var(--so-line);
  --border-soft: #F4F4F5;
  --bg:          var(--so-bg);
  --bg-card:     var(--so-card);
  --bg-hover:    #F4F4F5;
  --shadow-sm:   var(--so-sh);
  --shadow-md:   0 4px 20px rgba(20,20,25,.08);

  /* alias các biến theme cũ (tab-funnel/tab-daily) → cobalt */
  --sum-black:   var(--so-ink);
  --sum-red:     var(--so-cobalt);
  --dash-slate:  var(--so-ink);
  --dash-indigo: var(--so-cobalt);
  --dash-gold:   var(--so-amber);

  background: var(--so-bg);
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Áp font cho toàn bộ con — nhưng KHÔNG ép lên icon-font (tabler) */
#tab-funnel *, #tab-target *, #tab-team-mien-nam *, #tab-team-bac-trung *,
#tab-daily *, #tab-gap *, #tab-plan-ca *, #tab-working-schedule *,
#tab-kpi *, #tab-ban-lam-viec *, #tab-ct-de-xuat *, #dash-daily-embed * {
  font-family: inherit;
}
#tab-funnel [class^="ti-"], #tab-funnel [class*=" ti-"],
#tab-target [class^="ti-"], #tab-target [class*=" ti-"],
#tab-team-mien-nam [class^="ti-"], #tab-team-mien-nam [class*=" ti-"],
#tab-team-bac-trung [class^="ti-"], #tab-team-bac-trung [class*=" ti-"],
#tab-daily [class^="ti-"], #tab-daily [class*=" ti-"],
#tab-gap [class^="ti-"], #tab-gap [class*=" ti-"],
#tab-plan-ca [class^="ti-"], #tab-plan-ca [class*=" ti-"],
#tab-working-schedule [class^="ti-"], #tab-working-schedule [class*=" ti-"],
#tab-kpi [class^="ti-"], #tab-kpi [class*=" ti-"],
#tab-ban-lam-viec [class^="ti-"], #tab-ban-lam-viec [class*=" ti-"],
#tab-ct-de-xuat [class^="ti-"], #tab-ct-de-xuat [class*=" ti-"] {
  font-family: 'tabler-icons' !important;
}

/* ── 2. Header / tiêu đề (skill: ink, weight cao, thanh accent) ── */
#tab-target .summary-header h2,
#tab-team-mien-nam .summary-header h2,
#tab-team-bac-trung .summary-header h2,
#tab-gap .summary-header h2,
#tab-plan-ca .summary-header h2,
#tab-working-schedule .summary-header h2 {
  color: var(--so-ink);
  font-weight: 800;
  letter-spacing: -.02em;
}
#tab-target .summary-header h2::before,
#tab-team-mien-nam .summary-header h2::before,
#tab-team-bac-trung .summary-header h2::before,
#tab-gap .summary-header h2::before,
#tab-plan-ca .summary-header h2::before,
#tab-working-schedule .summary-header h2::before {
  background: var(--so-cobalt);
  border-radius: 2px;
}
#tab-target .summary-sub,
#tab-team-mien-nam .summary-sub,
#tab-team-bac-trung .summary-sub,
#tab-gap .summary-sub,
#tab-plan-ca .summary-sub,
#tab-working-schedule .summary-sub { color: var(--so-muted); }

/* Section title — thanh dọc cobalt 3px (đồng bộ funnel đã có) */
#tab-target .section-title,
#tab-team-mien-nam .section-title,
#tab-team-bac-trung .section-title,
#tab-gap .section-title,
#tab-plan-ca .plan-section-title {
  color: var(--so-ink);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ── 3. Card surfaces: bo 16px + shadow mềm, bỏ viền nặng ── */
#tab-funnel .funnel-table-wrap,
#tab-target .funnel-table-wrap,
#tab-team-mien-nam .funnel-table-wrap,
#tab-team-bac-trung .funnel-table-wrap {
  border: 1px solid var(--so-line);
  border-radius: var(--so-radius);
  box-shadow: var(--so-sh);
}
#tab-funnel .chart-card,
#tab-team-mien-nam .chart-card,
#tab-team-bac-trung .chart-card {
  border: 1px solid var(--so-line);
  border-radius: var(--so-radius);
  box-shadow: var(--so-sh);
}

/* Bảng funnel: header sạch, số tabular, hover sáng cả dòng (skill .board) */
#tab-funnel .funnel-table th,
#tab-target .funnel-table th,
#tab-team-mien-nam .funnel-table th,
#tab-team-bac-trung .funnel-table th {
  background: #F7F7F9;
  color: var(--so-ink);
  border-bottom: 1px solid var(--so-line);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .04em;
}
#tab-funnel .funnel-table td,
#tab-target .funnel-table td,
#tab-team-mien-nam .funnel-table td,
#tab-team-bac-trung .funnel-table td { font-variant-numeric: tabular-nums; }
#tab-funnel .funnel-table tbody tr:hover td,
#tab-target .funnel-table tbody tr:hover td,
#tab-team-mien-nam .funnel-table tbody tr:hover td,
#tab-team-bac-trung .funnel-table tbody tr:hover td { background: #F4F6FF; }

/* ── 4. KPI card: card trắng, dải accent mép trái 4px, số ink lớn ── */
#tab-target .kpi-card,
#tab-team-mien-nam .kpi-card,
#tab-team-bac-trung .kpi-card,
#tab-plan-ca .kpi-card,
#tab-kpi .kpi-card,
#tab-ban-lam-viec .kpi-card {
  border: none;
  border-left: 4px solid var(--accent);
  border-radius: var(--so-radius);
  box-shadow: var(--so-sh);
}
/* dải màu KPI theo nghĩa (đồng bộ palette Orion) */
#tab-target .kpi-card.kpi-cs, #tab-team-mien-nam .kpi-card.kpi-cs, #tab-team-bac-trung .kpi-card.kpi-cs,
#tab-plan-ca .kpi-card.kpi-cs, #tab-kpi .kpi-card.kpi-cs, #tab-ban-lam-viec .kpi-card.kpi-cs { border-left-color: var(--so-blue); }
#tab-target .kpi-card.kpi-ca, #tab-team-mien-nam .kpi-card.kpi-ca, #tab-team-bac-trung .kpi-card.kpi-ca,
#tab-plan-ca .kpi-card.kpi-ca, #tab-kpi .kpi-card.kpi-ca, #tab-ban-lam-viec .kpi-card.kpi-ca { border-left-color: var(--so-amber); }
#tab-target .kpi-card.kpi-total, #tab-team-mien-nam .kpi-card.kpi-total, #tab-team-bac-trung .kpi-card.kpi-total,
#tab-plan-ca .kpi-card.kpi-total, #tab-kpi .kpi-card.kpi-total, #tab-ban-lam-viec .kpi-card.kpi-total { border-left-color: var(--so-cobalt); }
#tab-target .kpi-card .kpi-value,
#tab-team-mien-nam .kpi-card .kpi-value,
#tab-team-bac-trung .kpi-card .kpi-value,
#tab-plan-ca .kpi-card .kpi-value,
#tab-kpi .kpi-card .kpi-value,
#tab-ban-lam-viec .kpi-card .kpi-value {
  color: var(--so-ink);   /* số luôn ink; màu nghĩa nằm ở dải mép trái */
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ── 5. Sub-nav (Plan per-sales / Target tháng / WS per-sales): pill cobalt ── */
#tab-target .target-sub-tab.active,
#tab-plan-ca .plan-sub-tab.active,
#tab-working-schedule .plan-sub-tab.active {
  color: var(--so-cobalt);
  background: #E5EDFF;
  border-color: #E5EDFF;
  border-bottom-color: var(--so-cobalt);
}

/* ── 6. stage-badge: soft pill theo status palette (skill luật 2) ──
   Scoped 11 tab → KHÔNG đổi nghĩa màu ở workspace khác.
   raw_lead/new=dark · sql=info · sampling=working · proposal=info · won=done */
#tab-funnel .stage-badge.stage-0, #tab-target .stage-badge.stage-0,
#tab-team-mien-nam .stage-badge.stage-0, #tab-team-bac-trung .stage-badge.stage-0,
#tab-plan-ca .stage-badge.stage-0, #tab-working-schedule .stage-badge.stage-0,
#tab-kpi .stage-badge.stage-0, #tab-ban-lam-viec .stage-badge.stage-0 {
  background: #EEF0FB; color: #4338CA;
}
#tab-funnel .stage-badge.stage-1, #tab-target .stage-badge.stage-1,
#tab-team-mien-nam .stage-badge.stage-1, #tab-team-bac-trung .stage-badge.stage-1,
#tab-plan-ca .stage-badge.stage-1, #tab-working-schedule .stage-badge.stage-1,
#tab-kpi .stage-badge.stage-1, #tab-ban-lam-viec .stage-badge.stage-1 {
  background: var(--so-info-bg); color: #1D4ED8;
}
#tab-funnel .stage-badge.stage-2, #tab-target .stage-badge.stage-2,
#tab-team-mien-nam .stage-badge.stage-2, #tab-team-bac-trung .stage-badge.stage-2,
#tab-plan-ca .stage-badge.stage-2, #tab-working-schedule .stage-badge.stage-2,
#tab-kpi .stage-badge.stage-2, #tab-ban-lam-viec .stage-badge.stage-2 {
  background: #E0FAFF; color: #0E7490;
}
#tab-funnel .stage-badge.stage-3, #tab-target .stage-badge.stage-3,
#tab-team-mien-nam .stage-badge.stage-3, #tab-team-bac-trung .stage-badge.stage-3,
#tab-plan-ca .stage-badge.stage-3, #tab-working-schedule .stage-badge.stage-3,
#tab-kpi .stage-badge.stage-3, #tab-ban-lam-viec .stage-badge.stage-3 {
  background: #FFF4E5; color: #B45309;
}
#tab-funnel .stage-badge.stage-4, #tab-target .stage-badge.stage-4,
#tab-team-mien-nam .stage-badge.stage-4, #tab-team-bac-trung .stage-badge.stage-4,
#tab-plan-ca .stage-badge.stage-4, #tab-working-schedule .stage-badge.stage-4,
#tab-kpi .stage-badge.stage-4, #tab-ban-lam-viec .stage-badge.stage-4 {
  background: var(--so-done-bg); color: #047857;
}

/* ── 6b. Filter phạm vi phễu team (Tổng team / từng salesman) ── */
#workspace-sales .fnl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
#workspace-sales .fnl-fbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; padding: 7px 14px;
  border-radius: 99px; border: 1px solid var(--so-line);
  background: #fff; color: var(--so-muted); cursor: pointer;
  transition: all .18s cubic-bezier(.22, 1, .36, 1);
}
#workspace-sales .fnl-fbtn .ic { width: 16px; height: 16px; }
#workspace-sales .fnl-fbtn:hover { border-color: var(--so-cobalt); color: var(--so-cobalt); }
#workspace-sales .fnl-fbtn.active { background: var(--so-cobalt); border-color: var(--so-cobalt); color: #fff; }

/* ── 7. Team grid cells: card bo 16 + shadow (cell ca/cs) ── */
#tab-team-mien-nam .team-funnel-grid .grid-cell,
#tab-team-bac-trung .team-funnel-grid .grid-cell {
  border-radius: var(--so-radius);
}

/* ── 8. GAP / CT đề xuất / Bàn làm việc: nền layered cho khối card con ── */
#tab-gap #gap-tab-content,
#tab-ct-de-xuat #ctdx-body,
#tab-ban-lam-viec #blv-container { color: var(--so-ink); }

/* ── 9. Target input focus ring → cobalt (đồng bộ accent) ── */
#tab-target .target-input:focus,
#tab-plan-ca .target-input:focus {
  border-color: var(--so-cobalt);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ── 10b. Nhịp ngày — card per-salesman (Daily) ── */
#workspace-sales .dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin: 6px 0 22px; }
#workspace-sales .dp-card { background: #fff; border: 1px solid var(--so-line); border-radius: 16px; box-shadow: var(--so-sh); padding: 14px 16px; }
#workspace-sales .dp-card.dp-idle { opacity: .5; }
#workspace-sales .dp-head { display: flex; align-items: center; gap: 10px; }
#workspace-sales .dp-av { width: 34px; height: 34px; border-radius: 99px; background: #E5EDFF; color: #1D4ED8; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#workspace-sales .dp-name { display: flex; flex-direction: column; line-height: 1.2; font-weight: 700; font-size: 13.5px; color: var(--so-ink); }
#workspace-sales .dp-name span { font-size: 11px; color: var(--so-soft); font-weight: 600; }
#workspace-sales .dp-rev { margin-left: auto; text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
#workspace-sales .dp-rev b { font-size: 15px; font-weight: 800; color: var(--so-ink); font-variant-numeric: tabular-nums; }
#workspace-sales .dp-rev span { font-size: 10.5px; color: var(--so-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
#workspace-sales .dp-prog { margin-top: 11px; }
#workspace-sales .dp-prog-top { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
#workspace-sales .dp-prog-lbl { font-weight: 700; color: var(--so-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
#workspace-sales .dp-prog-val { margin-left: auto; color: var(--so-muted); font-variant-numeric: tabular-nums; }
#workspace-sales .dp-prog-val b { color: var(--so-ink); font-weight: 800; }
#workspace-sales .dp-prog-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
#workspace-sales .dp-track { height: 7px; background: #EEF0F4; border-radius: 99px; overflow: hidden; margin-top: 6px; }
#workspace-sales .dp-track span { display: block; height: 100%; border-radius: 99px; transition: width .4s cubic-bezier(.22,1,.36,1); }
#workspace-sales .dp-pace { font-size: 11px; font-weight: 600; margin-top: 4px; }
#workspace-sales .dp-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
#workspace-sales .dp-row-lbl { font-size: 10.5px; font-weight: 800; color: var(--so-muted); width: 26px; flex-shrink: 0; letter-spacing: .04em; }
#workspace-sales .dp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#workspace-sales .dp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 32%, #fff); }
#workspace-sales .dp-chip b { font-variant-numeric: tabular-nums; font-weight: 800; }
#workspace-sales .dp-chip-zero { opacity: .4; }
#workspace-sales .dp-cs { font-size: 12.5px; font-weight: 700; color: var(--so-ink); }
#workspace-sales .dp-meta { display: flex; gap: 16px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--so-line); font-size: 12px; color: var(--so-muted); font-weight: 600; }
#workspace-sales .dp-meta span { display: inline-flex; align-items: center; gap: 5px; }
#workspace-sales .dp-meta .ic { width: 15px; height: 15px; color: var(--so-muted); }
#workspace-sales .dp-empty { font-size: 12.5px; color: var(--so-soft); padding: 6px 0 2px; }

/* ── 10. Daily report card: bo 16 cho đồng bộ (giữ theme #tab-daily cũ) ── */
#workspace-sales .report-content,
#workspace-sales .report-toolbar { border-radius: var(--so-radius); }

/* ── 0b. Icon line SVG (.ic) — thay emoji, scoped Sales ── */
#workspace-sales .ic {
  width: 18px; height: 18px;
  flex-shrink: 0;
  vertical-align: -3px;
  display: inline-block;
}
#workspace-sales .ic-lg { width: 22px; height: 22px; vertical-align: -4px; }
#workspace-sales .ic-sm { width: 15px; height: 15px; vertical-align: -2px; }
#workspace-sales .summary-header h2 .ic { width: 21px; height: 21px; vertical-align: -3px; margin-right: 4px; }

/* ── 11a. Phễu bán hàng ribbon SVG (cobalt) ── */
#tab-funnel .fnl-card {
  background: #fff;
  border: 1px solid var(--so-line);
  border-radius: var(--so-radius);
  box-shadow: var(--so-sh);
  padding: 18px 20px 22px;
  margin-bottom: 18px;
}
#tab-funnel .fnl-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
#tab-funnel .fnl-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--so-ink);
}
#tab-funnel .fnl-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--so-muted);
  font-variant-numeric: tabular-nums;
}
/* phễu thanh ngang giảm dần (theo ref) — giữ cobalt */
#workspace-sales .fnl2 { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; max-width: 820px; }
#workspace-sales .fnl2-row {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 14px;
}
#workspace-sales .fnl2-label { text-align: right; font-size: 13px; font-weight: 600; color: var(--so-muted); }
#workspace-sales .fnl2-track { position: relative; display: flex; align-items: center; }
#workspace-sales .fnl2-bar {
  position: relative;
  height: 42px;
  min-width: 66px;
  border-radius: 10px;
  display: flex; align-items: stretch;
  box-shadow: 0 1px 2px rgba(37,99,235,.12);
  transform-origin: left center;
  animation: fnl2grow .55s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i) * .07s);
  transition: filter .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
/* segment: thân = màu stage · thiếu = xám · vượt = xanh */
#workspace-sales .fnl2-base { height: 100%; background: var(--bar, linear-gradient(90deg, #C7D2FE, #A5B4FC)); border-radius: 10px 0 0 10px; }
#workspace-sales .fnl2-bar > .fnl2-base:last-child { border-radius: 10px; }
#workspace-sales .fnl2-ext { height: 100%; border-radius: 0 10px 10px 0; }
#workspace-sales .fnl2-gap { background: repeating-linear-gradient(45deg, #E2E6EE, #E2E6EE 6px, #EDEFF4 6px, #EDEFF4 12px); }
#workspace-sales .fnl2-over { background: linear-gradient(90deg, #16A34A, #34D399); }
#workspace-sales .fnl2-row:hover .fnl2-bar {
  filter: brightness(.97) saturate(1.12);
  box-shadow: 0 10px 24px rgba(22, 32, 51, .20);
  transform: scale(1.012);
}
/* vạch ngăn các bậc "ngoài phễu" (Nuturing/Fail · Delete) */
#workspace-sales .fnl2-sep { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--so-line); }
#workspace-sales .fnl2-pct {
  position: absolute; left: 9px; bottom: -11px; z-index: 3;
  background: #fff; color: #1D4ED8;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 99px;
  box-shadow: 0 2px 7px rgba(22,32,51,.14);
}
#workspace-sales .fnl2-row:hover .fnl2-pct { box-shadow: 0 2px 9px rgba(22,32,51,.18); }
#workspace-sales .fnl2-val { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; }
#workspace-sales .fnl2-val b { font-size: 14px; font-weight: 800; color: var(--so-ink); font-variant-numeric: tabular-nums; }
#workspace-sales .fnl2-gap { font-size: 10.5px; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; margin-top: 1px; }
#workspace-sales .fnl2-gap.ok { color: #16A34A; }
#workspace-sales .fnl2-gap.behind { color: #E2445C; }
@keyframes fnl2grow { from { transform: scaleX(.16); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* tooltip card (iOS-style spring-in) */
#workspace-sales .fnl2-tip {
  position: absolute; left: 44%; top: 50%;
  transform: translateY(-46%) scale(.95); transform-origin: left center;
  min-width: 214px; background: #fff; border: 1px solid var(--so-line);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(22,32,51,.18);
  padding: 12px 14px; z-index: 20;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1), visibility .2s;
}
#workspace-sales .fnl2-row:hover .fnl2-tip { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
#workspace-sales .fnl2-tip-row { display: flex; gap: 10px; align-items: center; }
#workspace-sales .fnl2-tip-row + .fnl2-tip-row { margin-top: 4px; }
#workspace-sales .fnl2-tip-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #EEF2FF; color: #2563EB; flex-shrink: 0; }
#workspace-sales .fnl2-tip-row > div { display: flex; flex-direction: column; line-height: 1.25; }
#workspace-sales .fnl2-tip-row b { font-size: 13px; color: var(--so-ink); font-weight: 700; }
#workspace-sales .fnl2-tip-row span { font-size: 11.5px; color: var(--so-muted); }
#workspace-sales .fnl2-tip-sep { display: flex; align-items: center; gap: 6px; margin: 8px 0; color: var(--so-muted); font-size: 11.5px; font-weight: 600; }
#workspace-sales .fnl2-tip-sep .ic { width: 14px; height: 14px; color: #A1A1AA; }
#workspace-sales .fnl2-empty { text-align: center; color: var(--so-soft); font-size: 13px; padding: 28px; }
#workspace-sales .fnl-mount { width: 100%; margin-top: 2px; }
#workspace-sales .fnl-mount .fnl2 { max-width: 100%; }
#workspace-sales .fnl-mount .fnl2-row { grid-template-columns: 96px 1fr auto; gap: 10px; }
#workspace-sales .fnl-mount .fnl2-label { font-size: 12px; }

/* ── 11b. Plan KPI card: gọn hơn + thanh tiến độ Actual/Target ── */
#tab-plan-ca .plan-kpi-card {
  min-height: 0;
  padding: 13px 16px;
  border-radius: 14px;
}
#tab-plan-ca .plan-kpi-cards-compact .plan-kpi-card { padding: 12px 14px; }
#tab-plan-ca .plan-kpi-value { font-size: 22px; margin-top: 5px; }
#tab-plan-ca .plan-kpi-track {
  height: 6px;
  background: #EEF0F4;
  border-radius: 99px;
  margin-top: 9px;
  overflow: hidden;
}
#tab-plan-ca .plan-kpi-track span {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width .3s ease;
}
#tab-plan-ca .plan-kpi-foot {
  font-size: 11px;
  color: var(--so-muted);
  font-weight: 600;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* ── 11c. Plan: dropdown filter chọn sales (thay dải tab dài) ── */
#workspace-sales .plan-sub-nav { display: block; border: none; padding: 0; margin: 6px 0 16px; }
#workspace-sales .plan-picker { position: relative; display: inline-block; }
#workspace-sales .plan-picker-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-width: 290px;
  padding: 9px 14px; border: 1px solid var(--so-line); border-radius: 10px;
  background: #fff; box-shadow: var(--so-sh); cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--so-ink);
}
#workspace-sales .plan-picker-trigger:hover { border-color: var(--so-cobalt); }
#workspace-sales .plan-picker-trigger .ic { width: 18px; height: 18px; color: var(--so-cobalt); flex-shrink: 0; }
#workspace-sales .plan-picker-cur { flex: 1; text-align: left; white-space: nowrap; }
#workspace-sales .plan-picker-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 330px; max-height: 400px; overflow: auto;
  background: #fff; border: 1px solid var(--so-line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(22,32,51,.16); padding: 8px;
}
#workspace-sales .plan-picker-search {
  width: 100%; padding: 8px 10px; border: 1px solid var(--so-line);
  border-radius: 8px; font-size: 13px; margin-bottom: 6px; box-sizing: border-box;
}
#workspace-sales .plan-picker-search:focus { outline: none; border-color: var(--so-cobalt); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
#workspace-sales .plan-picker-group { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--so-soft); padding: 8px 8px 4px; }
#workspace-sales .plan-picker-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--so-ink); text-align: left; }
#workspace-sales .plan-picker-item .ic { width: 16px; height: 16px; color: var(--so-muted); flex-shrink: 0; }
#workspace-sales .plan-picker-item i { font-style: normal; color: var(--so-soft); font-size: 12px; }
#workspace-sales .plan-picker-item:hover { background: #F4F6FF; }
#workspace-sales .plan-picker-item.active { background: #E5EDFF; color: var(--so-cobalt); font-weight: 700; }
#workspace-sales .plan-picker-item.active .ic { color: var(--so-cobalt); }

/* ── 11d. Bảng TARGET — dễ đọc hơn (font lớn, header Orion, sticky, số rõ) ── */
#tab-target .funnel-table { font-size: 13px; }
#tab-target .funnel-table th,
#tab-target .funnel-table td { padding: 8px 12px; }
#tab-target .funnel-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #F4F6FF !important; color: var(--so-ink);
}
#tab-target .funnel-table tr.row-team-header td {
  background: #E5EDFF !important; color: #1D4ED8;
  border-top: 2px solid var(--so-cobalt); border-bottom: 1px solid #C7D6FF;
  font-size: 14px; font-weight: 800; padding: 11px 14px;
}
#tab-target .funnel-table .team-total-cell {
  background: #E5EDFF !important; color: #1D4ED8 !important;
  border-right: 2px solid var(--so-cobalt) !important;
}
#tab-target .funnel-table tr.row-owner-subtotal td { font-size: 12.5px; }
#tab-target .funnel-table td.num { font-size: 13px; }
#tab-target .target-input { font-size: 12.5px; padding: 6px 9px; min-width: 56px; }

/* ── 11e. Bảng KPI — Orion hoá (navy/gold → cobalt/amber) + số to ── */
#tab-kpi .kpi-card2-title { background: var(--so-cobalt); }
#tab-kpi .kpi-combined-table { font-size: 13px; }
#tab-kpi .kpi-combined-table th { background: var(--so-cobalt); border-color: #1D4ED8; padding: 9px 11px; }
#tab-kpi .kpi-combined-table td { padding: 8px 11px; }
#tab-kpi .kpi-combined-table .kpi-block-row td { background: #FFF4E5; color: #92400E; font-size: 13.5px; }
#tab-kpi .kpi-combined-table .kpi-block-row .kpi-block-pct { background: var(--so-cobalt); color: #fff; font-size: 14px; }
#tab-kpi .kpi-combined-table .kpi-kname { color: #1D4ED8; }
#tab-kpi .kpi-combined-table .kpi-anum,
#tab-kpi .kpi-combined-table .kpi-cnum { font-size: 13px; }
#tab-kpi .kpi-combined-table .kpi-pcell { background: #EEF4FF; }
#tab-kpi .kpi-total-cell, #tab-kpi .kpi-total-cell-x {
  background: #E5EDFF; color: #1D4ED8; font-size: 19px; font-weight: 800;
}
#tab-kpi .kpi-table { font-size: 13px; }
#tab-kpi .kpi-table th, #tab-kpi .kpi-table td { padding: 8px 11px; }
#tab-kpi .kpi-table thead th { background: #F4F6FF; color: var(--so-ink); }

/* ── 12. Toolbar chung (trên mọi tab Sales): nút "Clear filter" đỏ → cobalt ──
   #refresh-btn ngoài #tab-* nhưng là chrome dùng chung cả Sales (kể cả Dashboard
   đã cobalt) → đồng bộ cobalt cho cả workspace. .btn-primary dùng !important nên
   override cũng phải !important. KHÔNG bleed ngoài #workspace-sales. */
#workspace-sales #refresh-btn {
  background: #2563EB !important;
  border-color: #2563EB !important;
}
#workspace-sales #refresh-btn:hover {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
}

/* ── 13. Plan: pane "tháng tiếp theo" viền/tiêu đề đỏ → cobalt; "hiện tại" → ink ── */
#tab-plan-ca .plan-kpi-pane-next { border-top-color: #2563EB; }
#tab-plan-ca .plan-kpi-pane-next .plan-kpi-pane-title { color: #2563EB; }
#tab-plan-ca .plan-kpi-pane-current { border-top-color: #18181B; }

/* ════════════════════════════════════════════════════════════════
   15. iOS-style motion — spring easing, entrance, press, hover lift.
   Easing: ease-out-quint (.22,1,.36,1) cho chuyển cảnh; spring/overshoot
   (.34,1.56,.64,1) cho micro. Tôn trọng prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Entrance: mở tab fade + trượt lên (chừa #tab-dashboard) */
  #workspace-sales .tab-content.active:not(#tab-dashboard) {
    animation: ios-tab-in .42s cubic-bezier(.22, 1, .36, 1);
  }
  @keyframes ios-tab-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* Press: nút lún nhẹ (haptic-like) */
  #workspace-sales .btn-primary,
  #workspace-sales .btn-secondary,
  #workspace-sales .btn-ghost,
  #workspace-sales .btn-export {
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .18s ease, box-shadow .18s ease;
  }
  #workspace-sales .btn-primary:active,
  #workspace-sales .btn-secondary:active,
  #workspace-sales .btn-ghost:active,
  #workspace-sales .btn-export:active { transform: scale(.95); }

  /* Hover lift: KPI / plan card nâng nhẹ kèu spring */
  #tab-plan-ca .plan-kpi-card,
  #tab-target .kpi-card, #tab-team-mien-nam .kpi-card,
  #tab-team-bac-trung .kpi-card, #tab-kpi .kpi-card {
    transition: transform .24s cubic-bezier(.34, 1.56, .64, 1), box-shadow .24s ease;
  }
  #tab-plan-ca .plan-kpi-card:hover,
  #tab-target .kpi-card:hover, #tab-team-mien-nam .kpi-card:hover,
  #tab-team-bac-trung .kpi-card:hover, #tab-kpi .kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(22, 32, 51, .10);
  }

  /* Sub-nav / pill: chuyển mượt */
  #workspace-sales .plan-sub-tab,
  #workspace-sales .target-sub-tab,
  #workspace-sales .tab-btn { transition: all .2s cubic-bezier(.22, 1, .36, 1); }
}

/* ── 14. Funnel/Team: dòng C.S tint đỏ hardcode cũ → cobalt tint (C.A giữ amber) ── */
#tab-funnel .funnel-table tr.row-cs td,
#tab-team-mien-nam .funnel-table tr.row-cs td,
#tab-team-bac-trung .funnel-table tr.row-cs td {
  background: rgba(37, 99, 235, .045);
}