/* public/report.css — style của tab Báo cáo, bắt buộc scope dưới class
   .report-tab (không làm bẩn style chung). Dark theme. */
.report-tab {
  background: #04090f;
  color: #fff;
  font: inherit;
  padding: 16px;
  border-radius: 12px;
}
.report-tab * { box-sizing: border-box; }
.report-tab h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.report-tab .rp-hidden { display: none !important; }

/* Banner cảnh báo dữ liệu cũ */
.report-tab .rp-banner {
  background: #3a2a00;
  border: 1px solid #ffd23e;
  color: #ffe9a8;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  line-height: 1.5;
  font-size: 14px;
}
.report-tab .rp-banner strong { color: #ffd23e; }

/* Toolbar + bộ lọc */
.report-tab .rp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
}
.report-tab .rp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.report-tab .rp-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #9fb4c6;
}
.report-tab .rp-filters select {
  background: #0a141f;
  color: #fff;
  border: 1px solid #1e3040;
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  min-width: 130px;
}
.report-tab .rp-filters select:focus { outline: 2px solid #25e2a0; outline-offset: 1px; }
.report-tab .rp-refresh {
  background: #25e2a0;
  color: #04090f;
  border: none;
  border-radius: 12px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.report-tab .rp-refresh:hover { background: #4ff0b6; }
.report-tab .rp-refresh:disabled { opacity: 0.55; cursor: default; }

.report-tab .rp-status {
  font-size: 12px;
  color: #9fb4c6;
  margin-bottom: 12px;
  line-height: 1.5;
}
.report-tab .rp-err { color: #ff6b61; font-weight: 700; }
.report-tab .rp-note {
  font-size: 12px;
  color: #9fb4c6;
  line-height: 1.5;
  margin-top: 8px;
}

/* KPI strip */
.report-tab .rp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.report-tab .rp-kpi {
  background: #0a141f;
  border: 1px solid #1e3040;
  border-radius: 12px;
  padding: 14px;
}
.report-tab .rp-kpi-label { font-size: 13px; color: #9fb4c6; margin-bottom: 6px; }
.report-tab .rp-kpi-value { font-size: 24px; font-weight: 800; line-height: 1.2; }
.report-tab .rp-kpi-sub { font-size: 12px; color: #9fb4c6; margin-top: 4px; }
.report-tab .rp-kpi-quote .rp-kpi-value { color: #ff3b30; }
.report-tab .rp-kpi-order .rp-kpi-value { color: #25e2a0; }
.report-tab .rp-kpi-rate .rp-kpi-value { color: #00e5ff; }
.report-tab .rp-kpi-plan .rp-kpi-value { color: #ffd23e; }

/* Section */
.report-tab .rp-section {
  background: #0a141f;
  border: 1px solid #1e3040;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.report-tab .rp-chart-note { font-size: 13px; color: #c8d8e4; margin-bottom: 10px; line-height: 1.5; }
.report-tab .rp-chart-note b { color: #fff; }
.report-tab .rp-chart { width: 100%; height: auto; display: block; }

/* Donut KPI */
.report-tab .rp-donuts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.report-tab .rp-donut-card {
  background: #04090f;
  border: 1px solid #1e3040;
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}
.report-tab .rp-donut-svg { width: 140px; height: 140px; max-width: 100%; }
.report-tab .rp-donut-center {
  fill: #fff;
  font-size: 19px;
  font-weight: 800;
  text-anchor: middle;
}
.report-tab .rp-donut-center-sub {
  fill: #9fb4c6;
  font-size: 11px;
  text-anchor: middle;
}
.report-tab .rp-donut-meta { font-size: 12px; color: #c8d8e4; line-height: 1.6; margin-top: 4px; }

/* SVG chart */
.report-tab .rp-grid { stroke: #1e3040; stroke-width: 1; }
.report-tab .rp-axis { fill: #9fb4c6; font-size: 11px; }
.report-tab .rp-legend { fill: #c8d8e4; font-size: 12px; }
.report-tab .rp-line-plan {
  fill: none;
  stroke: #ffd23e;
  stroke-width: 2.5;
  stroke-dasharray: 7 4;
}
.report-tab .rp-line-actual { fill: none; stroke: #00e5ff; stroke-width: 2.5; }
.report-tab .rp-cutoff { stroke: #ff9f2e; stroke-width: 1; stroke-dasharray: 3 3; }

/* Bảng */
.report-tab .rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.report-tab .rp-table th,
.report-tab .rp-table td {
  border: 1px solid #1e3040;
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
}
.report-tab .rp-table th:first-child,
.report-tab .rp-table td:first-child { text-align: left; }
.report-tab .rp-table thead th {
  background: #122334;
  color: #fff;
  font-weight: 700;
}
.report-tab .rp-table tbody tr:nth-child(even) { background: #0d1a28; }

/* Tag chênh cùng kỳ */
.report-tab .rp-tag {
  display: inline-block;
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  margin: 1px 2px;
}
.report-tab .rp-up { background: rgba(37, 226, 160, 0.16); color: #25e2a0; }
.report-tab .rp-down { background: rgba(255, 59, 48, 0.16); color: #ff6b61; }
.report-tab .rp-flat { background: rgba(159, 180, 198, 0.16); color: #9fb4c6; }
.report-tab .rp-na { background: rgba(159, 180, 198, 0.12); color: #9fb4c6; }

/* Donut tỷ trọng + tag elbow */
.report-tab .rp-mix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.report-tab .rp-mix-card {
  background: #04090f;
  border: 1px solid #1e3040;
  border-radius: 12px;
  padding: 10px;
}
.report-tab .rp-mix-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
}
.report-tab .rp-elbow { fill: none; stroke: #5b7a90; stroke-width: 1.2; }
.report-tab .rp-tagbox { fill: #0a141f; stroke: #1e3040; }
.report-tab .rp-tagtext { fill: #fff; font-size: 11px; font-weight: 700; }
.report-tab .rp-tagtext2 { fill: #9fb4c6; font-size: 11px; }

/* Stacked 100% */
.report-tab .rp-stack-year {
  display: grid;
  grid-template-columns: 52px 1fr 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.report-tab .rp-stack-year-label { font-weight: 800; font-size: 14px; }
.report-tab .rp-stack-head { font-size: 12px; color: #9fb4c6; margin-bottom: 4px; }
.report-tab .rp-stack-bar {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: #122334;
  border: 1px solid #1e3040;
}
.report-tab .rp-stack-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.report-tab .rp-stack-seg span {
  font-size: 11px;
  font-weight: 700;
  color: #04090f;
  white-space: nowrap;
}
.report-tab .rp-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #c8d8e4;
  margin: 6px 0 14px;
}
.report-tab .rp-legend-row i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}

@media (max-width: 900px) {
  .report-tab .rp-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .report-tab .rp-donuts { grid-template-columns: repeat(3, 1fr); }
  .report-tab .rp-mix-grid { grid-template-columns: 1fr; }
  .report-tab .rp-stack-year { grid-template-columns: 44px 1fr; }
}