/* Dashboard side, bottom, overview, system, and table panel internals. */

.bottom-row {
  display: grid;
  /* Cột trái đã dành cho Phân tích thu ngân sách; bottom-row chỉ còn module Chi bộ - Đảng viên ở giữa. */
  grid-column: 2 / 3;
  grid-row: 3;
  grid-template-columns: minmax(34rem, 1fr);
  gap: var(--space-4);
  min-height: 0;
}

.bottom-row .panel {
  min-height: 0;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
}

.overview-tile {
  display: grid;
  place-items: center;
  min-height: 3.625rem;
  border: 1px solid var(--alpha-blue-52144235-22);
  background: var(--alpha-navy-073373-68);
}

.overview-tile__label {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  line-height: 1;
}

.overview-tile__value {
  color: var(--color-dashboard-blue-text);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 0 10px var(--alpha-blue-73160255-50);
}

.overview-tile__unit {
  margin-left: var(--space-1);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.split-summary {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  height: calc(100% - 2.25rem);
  padding: var(--space-3) var(--space-4);
}

.facility-panel .data-table {
  margin-top: 0.375rem;
  font-size: var(--text-2xs);
}

.facility-panel .data-table th,
.facility-panel .data-table td {
  padding: 0.1875rem var(--space-2);
  line-height: 1.08;
}

.budget-analysis-panel {
  overflow: hidden;
}

.panel__title--budget-analysis {
  gap: var(--space-2);
}

.panel__title--budget-analysis > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-analysis {
  display: grid;
  grid-template-rows: minmax(0, 2.15fr) minmax(0, 1fr);
  gap: var(--space-3);
  height: calc(100% - 2.25rem);
  min-height: 0;
  padding: var(--space-3);
}

.budget-analysis__hero,
.budget-analysis__section,
.budget-analysis__revenue,
.budget-analysis__expense {
  min-height: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--alpha-blue-24160255-34);
  background:
    linear-gradient(135deg, var(--alpha-blue-42165255-16), transparent 58%),
    var(--alpha-navy-073373-68);
  box-shadow: inset 0 0 1.1rem var(--alpha-cyan-19187255-08);
}

.budget-analysis__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(6.5rem, 0.72fr);
  gap: var(--space-3);
  align-items: stretch;
  padding: var(--space-3);
}

.budget-analysis__hero-main {
  display: grid;
  align-content: center;
  gap: var(--space-2);
  min-width: 0;
}

.budget-analysis__eyebrow,
.budget-analysis__minor-label,
.budget-analysis__section-label {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.budget-analysis__value {
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
  min-width: 0;
  color: var(--color-white);
  font-size: var(--text-hero-value);
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 0 1rem var(--alpha-cyan-22200255-42);
  white-space: nowrap;
}

.budget-analysis__value small {
  color: var(--color-cyan);
  font-size: var(--text-lg);
  font-weight: 900;
}

.budget-analysis__delta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: var(--space-1);
  color: var(--color-mint);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;
}

.budget-analysis__delta svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
}

.budget-analysis__delta small {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 800;
}

.budget-analysis__accum {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-1);
  min-width: 0;
  border-left: 1px solid var(--alpha-blue-24160255-34);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-cyan) 16%, transparent), transparent 64%),
    var(--alpha-deep-011442-38);
}

.budget-analysis__accum span {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.budget-analysis__accum b {
  color: var(--color-white);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1;
}

.budget-analysis__section {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.budget-analysis__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.budget-analysis__section-title {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.budget-analysis__section-value {
  flex: none;
  color: var(--color-cyan);
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* Header danh sách thu: tổng = trắng (số liệu), delta = xanh lá (trạng thái) — không cyan */
.budget-analysis__section-value--rev { color: var(--color-white); }
.budget-analysis__section-value--rev b {
  color: var(--color-white);
  font-weight: 900;
}
.budget-analysis__section-value--rev i {
  color: var(--color-green);
  font-style: normal;
  font-weight: 900;
}

.budget-analysis__mix,
.budget-analysis__moves {
  display: grid;
  gap: var(--space-1);
  min-height: 0;
}

.budget-analysis__mix-row,
.budget-analysis__move {
  --tone: var(--color-cyan);
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.budget-analysis__mix-row--success,
.budget-analysis__move--success {
  --tone: var(--color-mint);
}

.budget-analysis__mix-row--info,
.budget-analysis__move--info {
  --tone: var(--color-cyan);
}

.budget-analysis__mix-row--warning,
.budget-analysis__move--warning {
  --tone: var(--color-orange);
}

.budget-analysis__mix-row--danger,
.budget-analysis__move--danger {
  --tone: var(--color-danger);
}

.budget-analysis__mix-top,
.budget-analysis__move-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1;
}

.budget-analysis__mix-label,
.budget-analysis__move-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-analysis__mix-value,
.budget-analysis__move-value {
  flex: none;
  color: var(--tone);
  font-weight: 900;
  white-space: nowrap;
}

.budget-analysis__track {
  --tone: var(--color-cyan);
  position: relative;
  height: 0.4rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--alpha-deep-00724-80);
  box-shadow: inset 0 0 0 1px var(--alpha-blue-52144235-22);
}

.budget-analysis__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--w, 0) * 1%);
  min-width: 0.45rem;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 46%, var(--color-white)));
  box-shadow: 0 0 0.55rem color-mix(in srgb, var(--tone) 36%, transparent);
}

.budget-analysis__move .budget-analysis__track {
  height: 0.32rem;
}

.budget-analysis__move--down .budget-analysis__move-value {
  color: var(--color-danger);
}

.budget-analysis__move--down .budget-analysis__track i {
  background: linear-gradient(90deg, var(--color-danger), color-mix(in srgb, var(--color-danger) 54%, var(--color-white)));
}

/* ----- Danh sách đầy đủ khoản thu: gộp cơ cấu (% + bar) và biến động (tăng/giảm) ----- */
.budget-analysis__revenue {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
}

/* Bảng thu: hàng tiêu đề + mọi dòng dùng CHUNG lưới cột → số canh thẳng cột, dễ đọc */
.budget-analysis__rev-head,
.budget-analysis__rev-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 4.4rem 5.2rem;
  align-items: center;
  column-gap: var(--space-2);
}

.budget-analysis__rev-head {
  padding: 0.34rem var(--space-2);
  margin-bottom: 0.2rem;
  border: 1px solid var(--alpha-cyan-19187255-42);
  border-bottom-color: var(--alpha-cyan-22200255-70);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, var(--alpha-blue-21176139-64), var(--alpha-violet-2607255-52)),
    linear-gradient(180deg, var(--alpha-navy-064497-92), var(--alpha-deep-00724-95)),
    var(--alpha-deep-00724-95);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 18%, transparent),
    inset 0 -1px 0 var(--alpha-cyan-22200255-24),
    0 0 0.7rem var(--alpha-blue-00119255-12);
}

.budget-analysis__rev-head span {
  color: var(--color-text-panel-bright);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 var(--alpha-black-46), 0 0 0.45rem var(--alpha-cyan-19187255-34);
  text-transform: uppercase;
}

.budget-analysis__rev-head span:nth-child(2),
.budget-analysis__rev-head span:nth-child(3) {
  text-align: center;
}

.budget-analysis__rev-head span:nth-child(4) {
  text-align: right;
}

.budget-analysis__rev-list {
  display: grid;
  align-content: space-between;
  min-height: 0;
}

.budget-analysis__rev-row {
  padding: 0.16rem var(--space-2);
  border-top: 1px solid var(--alpha-blue-42165255-16);
  background: linear-gradient(90deg, var(--alpha-violet-4517235-48), var(--alpha-black-67) 68%);
}

.budget-analysis__rev-row:first-child {
  border-top: 0;
}

.budget-analysis__rev-name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-panel-bright);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 1px 0 var(--alpha-black-46);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tỷ trọng — số trắng, trội (cơ cấu) */
.budget-analysis__rev-pct {
  justify-self: center;
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
}

/* Số thu QII — tint xanh sáng, phụ */
.budget-analysis__rev-amt {
  justify-self: center;
  color: var(--color-bright-blue);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* Tăng/giảm so QI — mũi tên + số + "tỷ", xanh lá/đỏ */
.budget-analysis__rev-delta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.budget-analysis__rev-delta svg {
  width: 0.92em;
  height: 0.92em;
  flex: none;
}

.budget-analysis__rev-delta--up { color: var(--color-green); }
.budget-analysis__rev-delta--down { color: var(--color-danger); }
.budget-analysis__rev-delta--down svg { transform: scaleY(-1); }
.budget-analysis__rev-delta--flat { color: var(--color-bright-blue); }

/* ===== Cơ cấu chi của phường (thay khối risk cũ) ===== */
.budget-analysis__expense {
  --tx: var(--color-cyan);
  --dt: var(--color-mint);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
}

/* Thanh cơ cấu chi QII: thường xuyên (lớn) + đầu tư phát triển (nhỏ) */
.budget-analysis__exp-bar {
  display: flex;
  gap: 0.25rem;
  flex: none;
  height: 1rem;
}

.budget-analysis__exp-seg {
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: var(--text-2xs);
  font-weight: 900;
}

.budget-analysis__exp-seg--tx { background: var(--tx); }
.budget-analysis__exp-seg--dt {
  min-width: 0.45rem;
  background: var(--dt);
}

.budget-analysis__exp-rows {
  display: grid;
  align-content: center;
  gap: 0;
  min-height: 0;
}

.budget-analysis__exp-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "dot name amt"
    "pct pct delta";
  align-items: center;
  column-gap: var(--space-2);
  row-gap: 0.34rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--color-border-soft);
}

.budget-analysis__exp-row:first-child { border-top: 0; }

/* Mỗi danh mục 1 màu định danh: thường xuyên = cyan, đầu tư phát triển = mint */
.budget-analysis__exp-row--tx { --row: var(--tx); }
.budget-analysis__exp-row--dt { --row: var(--dt); }

.budget-analysis__exp-dot {
  grid-area: dot;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--row);
}

.budget-analysis__exp-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  color: var(--row);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Số tiền QII (hiện tại) — TRẮNG, to, trội nhất */
.budget-analysis__exp-amt {
  grid-area: amt;
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.budget-analysis__exp-amt b {
  color: var(--color-white);
  font-size: var(--text-xl);
  font-weight: 900;
}

/* % cơ cấu — theo MÀU danh mục = insight chính (chiếm bao nhiêu tổng chi) */
.budget-analysis__exp-pct {
  grid-area: pct;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--row);
  font-size: var(--text-2xs);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.budget-analysis__exp-pct b {
  color: var(--row);
  font-size: var(--text-lg);
  font-weight: 900;
}

/* Chip TĂNG/GIẢM so QI — xanh lá (tăng) / đỏ (giảm) = insight xu hướng */
.budget-analysis__exp-delta {
  grid-area: delta;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.budget-analysis__exp-delta svg {
  width: 0.95em;
  height: 0.95em;
  flex: none;
}

.budget-analysis__exp-delta i {
  color: var(--color-bright-blue);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 800;
}

.budget-analysis__exp-delta--up { color: var(--color-green); }
.budget-analysis__exp-delta--down { color: var(--color-danger); }
.budget-analysis__exp-delta--down svg { transform: scaleY(-1); }
.budget-analysis__exp-delta--flat { color: var(--color-bright-blue); }
.budget-analysis__exp-delta--flat svg { display: none; }

.event-table td:nth-child(2),
.event-table th:nth-child(2) {
  text-align: left;
}

.event-table td:nth-child(3),
.event-table th:nth-child(3) {
  text-align: left;
}