/* Scoped styles for Tổng quan (Inline Summary) */
:root {
  --brand-primary: #1e552a;
  --brand-accent: #4FAD5A;
  --neutral-100: #f9fafb;
  --neutral-300: #e5e7eb;
  --neutral-500: #6b7280;
  --neutral-700: #374151;
  --neutral-900: #111827;
  --bg-soft: #f8fafc;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.06);
}

/* Container */
#viewSummary #summaryInline {
  width: 100%;
  max-width: 1400px;
}

/* Stats grid */
#viewSummary #summaryInline .stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}

@media (max-width: 1200px) {
  #viewSummary #summaryInline .stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  #viewSummary #summaryInline .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  #viewSummary #summaryInline .stats { grid-template-columns: 1fr; }
}

#viewSummary #summaryInline .stat-card {
  background: #fff;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

#viewSummary #summaryInline .stat-title {
  font-size: 14px;
  color: var(--neutral-700);
  font-weight: 600;
  letter-spacing: .01em;
}

#viewSummary #summaryInline .stat-value {
  font-size: 26px;
  font-weight: 800;
  margin-top: 6px;
  color: var(--neutral-900);
}

/* Number/percentage formatting inside stat value */
#viewSummary #summaryInline .stat-value .num { font-size: 30px; }
#viewSummary #summaryInline .stat-value .pct { font-size: 14px; color: var(--neutral-500); font-weight: 700; margin-left: 6px; }

/* Themed stat cards */
#viewSummary #summaryInline .stat-card.stat-total { border-color: #93c5fd; background: linear-gradient(180deg, #eff6ff 0%, #ffffff 70%); }
#viewSummary #summaryInline .stat-card.stat-total .stat-title { color: #1d4ed8; }
#viewSummary #summaryInline .stat-card.stat-total .stat-value { color: #1e40af; }

#viewSummary #summaryInline .stat-card.stat-processing { border-color: #fdba74; background: linear-gradient(180deg, #fff7ed 0%, #ffffff 70%); }
#viewSummary #summaryInline .stat-card.stat-processing .stat-title { color: #b45309; }
#viewSummary #summaryInline .stat-card.stat-processing .stat-value { color: #92400e; }

#viewSummary #summaryInline .stat-card.stat-success { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 70%); }
#viewSummary #summaryInline .stat-card.stat-success .stat-title { color: #15803d; }
#viewSummary #summaryInline .stat-card.stat-success .stat-value { color: #166534; }

#viewSummary #summaryInline .stat-card.stat-not-renewed { border-color: #fecaca; background: linear-gradient(180deg, #fff1f2 0%, #ffffff 70%); }
#viewSummary #summaryInline .stat-card.stat-not-renewed .stat-title { color: #9f1239; }
#viewSummary #summaryInline .stat-card.stat-not-renewed .stat-value { color: #991b1b; }

#viewSummary #summaryInline .stat-card.stat-overdue { border-color: #facc15; background: linear-gradient(180deg, #fef9c3 0%, #ffffff 70%); }
#viewSummary #summaryInline .stat-card.stat-overdue .stat-title { color: #ca8a04; }
#viewSummary #summaryInline .stat-card.stat-overdue .stat-value { color: #a16207; }

#viewSummary #summaryInline .stat-card.stat-expired { border-color: #cbd5e1; background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 70%); }
#viewSummary #summaryInline .stat-card.stat-expired .stat-title { color: #475569; }
#viewSummary #summaryInline .stat-card.stat-expired .stat-value { color: #334155; }

/* Quick search */
#viewSummary #summaryInline .quick-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; align-items: center; }
#viewSummary #summaryInline .qs-input-wrap { position: relative; width: 100%; }
#viewSummary #summaryInline .qs-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--neutral-500); pointer-events: none; }
#viewSummary #summaryInline .qs-input-wrap input { width: 100%; height: 44px; padding: 10px 14px 10px 38px; border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); font-size: 16px; box-sizing: border-box; background: #fff; }
#viewSummary #summaryInline .quick-search .btn { height: 44px; align-self: stretch; white-space: nowrap; }

/* Section (actual markup uses .section) */
#viewSummary #summaryInline .section { background: #fff; border: 1px solid var(--neutral-300); border-left: 4px solid var(--brand-primary); border-radius: var(--radius-md); padding: 16px; margin: 16px 0; box-shadow: var(--shadow-sm); }
#viewSummary #summaryInline .section h2 { font-size: 18px; font-weight: 800; margin: 0 0 8px 0; color: var(--neutral-900); }

/* Subsection titles: spacing and stronger contrast */
#viewSummary #summaryInline .subsection-title { padding-left: 12px; font-weight: 700; color: var(--neutral-900); }

/* Tables */
#viewSummary #summaryInline .table-wrapper { background: #fff; border: 1px solid var(--neutral-300); border-radius: var(--radius-md); overflow-x: hidden; box-shadow: var(--shadow-md); width: 100%; max-width: 100%; }
#viewSummary #summaryInline table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#viewSummary #summaryInline thead th { background: #f3f4f6; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--neutral-700); font-weight: 700; padding: 12px; border-bottom: 1px solid var(--neutral-300); text-align: left; }
#viewSummary #summaryInline tbody td { font-size: 16px; color: var(--neutral-900); padding: 12px; border-bottom: 1px solid #f3f4f6; }
#viewSummary #summaryInline thead th, #viewSummary #summaryInline tbody td { word-break: break-word; overflow-wrap: anywhere; white-space: normal; }
#viewSummary #summaryInline tbody tr:hover { background: var(--neutral-100); cursor: pointer; }
#viewSummary #summaryInline tbody tr:active { background: #f3f4f6; }

/* Active row highlight when opening modal */
#viewSummary #summaryInline tbody tr.row-active {
  background: #fffbe6;
  border-bottom-color: #fde68a;
  box-shadow: inset 0 0 0 2px #facc15;
}

/* Badge colors */
#viewSummary #summaryInline .badge-default { background:#f3f4f6; color:#374151; }
#viewSummary #summaryInline .badge-info { background:#e0f2fe; color:#0c4a6e; }
#viewSummary #summaryInline .badge-processing { background:#fffbeb; color:#b45309; }
#viewSummary #summaryInline .badge-waiting { background:#eff6ff; color:#1e40af; }
#viewSummary #summaryInline .badge-payment { background:#fefce8; color:#854d0e; }
#viewSummary #summaryInline .badge-success { background:#f0fdf4; color:#15803d; }
#viewSummary #summaryInline .badge-paused { background:#f1f5f9; color:#475569; }
#viewSummary #summaryInline .badge-danger { background:#fef2f2; color:#991b1b; }

/* Percentage pills */
#viewSummary #summaryInline .pill { display:inline-block; padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; }
#viewSummary #summaryInline .pill.heat-low { background:#eaf6ef; color:#006c32; }
#viewSummary #summaryInline .pill.heat-mid { background:#fff7ed; color:#92400e; }
#viewSummary #summaryInline .pill.heat-high { background:#eff6ff; color:#1e40af; }

/* Status code color mapping (per legend) */
#viewSummary #summaryInline .status-code { font-weight: 700; }
#viewSummary #summaryInline .status-code-CBTB { color: #0c4a6e; } /* Chuẩn bị thông báo */
#viewSummary #summaryInline .status-code-DGTB { color: #1e40af; } /* Đã gửi thông báo */
#viewSummary #summaryInline .status-code-CTTKH { color: #1e40af; } /* Chờ thông tin KH */
#viewSummary #summaryInline .status-code-DGHS { color: #b45309; } /* Đánh giá hồ sơ */
#viewSummary #summaryInline .status-code-CP { color: #92400e; }   /* Chào phí */
#viewSummary #summaryInline .status-code-KHD { color: #b45309; }  /* Ký hợp đồng */
#viewSummary #summaryInline .status-code-CD { color: #b45309; }   /* Cấp đơn */
#viewSummary #summaryInline .status-code-CTT { color: #854d0e; }  /* Chờ thanh toán */
#viewSummary #summaryInline .status-code-TD { color: #475569; }   /* Tạm dừng */
#viewSummary #summaryInline .status-code-HT { color: #15803d; }   /* Hoàn thành */
#viewSummary #summaryInline .status-code-KTT { color: #991b1b; }  /* Không tái tục */

/* Subtle pulse for updated stat values */
#viewSummary #summaryInline .stat-value.pulse { color: var(--brand-primary); opacity: 0.85; transition: color 300ms ease, opacity 300ms ease; }

@media (prefers-reduced-motion: reduce) {
  #viewSummary #summaryInline .stat-value.pulse { transition: none; }
}