/* Dashboard responsive layout rules. Load after map and panel styles. */

@media (max-width: 1500px) {
  /* KHÔNG đổi số cột / bề rộng cột ở màn nhỏ — giữ NGUYÊN công thức cột của bản chuẩn (80%),
     chỉ để root-font thu nhỏ đồng đều. Tránh "đổi bố cục" khi 100% / đổi cửa sổ. */
  .overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--space-2);
  }

  .overview-tile {
    min-height: 1.8rem;
  }

  .overview-tile__label {
    font-size: var(--text-2xs);
  }

  .overview-tile__value {
    font-size: var(--text-md);
  }
}

/* LAYOUT DESKTOP DUY NHẤT — áp cho MỌI màn desktop (mọi tỉ lệ, mọi chiều cao). Mọi cỡ ở đây
   dùng rem nên scale đều theo root-font (root ∝ chiều cao viewport) → fullscreen/đổi cửa sổ chỉ
   PHÓNG TO/THU NHỎ cùng 1 layout, không lật chế độ.
   ĐÃ BỎ chặn `min-aspect-ratio` (trước là 16/10 rồi 7/5): chặn tỉ lệ khiến màn laptop 3:2/MacBook
   (~1.54) khi fullscreen (mất chrome → cao hết màn → tỉ lệ tụt) RỚT khỏi breakpoint → rơi về style
   mặc định → vỡ. Giờ mọi desktop ≥1181px đều dùng layout này; BP2/BP3 (sau, có max-height) chỉ
   tinh chỉnh thêm cho màn THẤP. Không còn fall-through "2 view". */
@media (min-width: 1181px) {
  .dashboard-grid {
    grid-template-rows: 12.5rem minmax(0, 1fr) 12.75rem;
    min-height: 0;
  }

  .left-rail {
    /* Panel ngân sách phủ toàn cột trái theo base grid. */
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .right-rail {
    /* 2 khối: Doanh nghiệp & hộ cá thể (lớn) + Không gian VH HCM. */
    grid-template-rows: minmax(0, 1.35fr) minmax(0, 1.1fr);
    gap: var(--space-3);
  }

  .left-rail .panel,
  .right-rail .panel {
    overflow: hidden;
  }

  .overview-grid {
    gap: 0.375rem;
    padding: var(--space-2);
    height: calc(100% - 2.25rem);
    min-height: 0;
  }

  .overview-tile {
    min-height: 0;
  }

  .split-summary {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }

  .energy-panel .split-summary,
  .alert-panel .split-summary {
    gap: var(--space-2);
    padding: 0.375rem var(--space-2);
  }

  .energy-panel .donut,
  .alert-panel .donut {
    width: 4.85rem;
    height: 4.85rem;
  }

  /* Panel năng lượng co lại (nhường khối Doanh nghiệp) → donut nhỏ hơn cho vừa */
  .energy-panel .donut {
    width: 4.25rem;
    height: 4.25rem;
  }

  .energy-panel .donut::before,
  .alert-panel .donut::before {
    inset: 0.5rem;
  }

  .energy-panel .metric-list,
  .alert-panel .metric-list {
    gap: 0.35rem;
  }

  .energy-panel .metric-row,
  .alert-panel .metric-row {
    gap: var(--space-2);
    line-height: 1.08;
  }

  .donut {
    width: 5.625rem;
    height: 5.625rem;
  }

  .donut::before {
    inset: 0.625rem;
  }

  .metric-list {
    gap: var(--space-2);
  }

  .data-table {
    font-size: var(--text-2xs);
  }

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

  .facility-panel .panel__title {
    min-height: 2rem;
  }

  .facility-panel .data-table {
    width: calc(100% - var(--space-4));
    margin-top: 0.25rem;
  }

  .facility-panel tbody tr:nth-child(n+6) {
    display: none;
  }

  .facility-panel .data-table th,
  .facility-panel .data-table td {
    padding: 0.125rem 0.375rem;
    line-height: 1.04;
  }

}

@media (min-width: 1181px) and (max-height: 800px) {
  .budget-analysis {
    grid-template-rows: minmax(0, 0.82fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.86fr);
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .budget-analysis__hero,
  .budget-analysis__section,
  .budget-analysis__risk {
    padding: var(--space-2);
  }

  .budget-analysis__hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(5.2rem, 0.72fr);
    gap: var(--space-2);
  }

  .budget-analysis__hero-main {
    gap: var(--space-1);
  }

  .budget-analysis__value {
    font-size: var(--text-kpi-hero);
  }

  .budget-analysis__value small,
  .budget-analysis__minor b,
  .budget-analysis__risk-gap b {
    font-size: var(--text-lg);
  }

  .budget-analysis__accum b {
    font-size: var(--text-xl);
  }

  .budget-analysis__section,
  .budget-analysis__mix,
  .budget-analysis__moves,
  .budget-analysis__risk,
  .budget-analysis__ratio {
    gap: var(--space-1);
  }

  .budget-analysis__section-head {
    gap: var(--space-2);
  }

  .budget-analysis__mix-top,
  .budget-analysis__move-top,
  .budget-analysis__ratio-head,
  .budget-analysis__minor-label {
    font-size: var(--text-2xs);
  }

  .budget-analysis__track {
    height: 0.36rem;
  }

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

  .budget-analysis__minor {
    padding: var(--space-1) var(--space-2);
  }

  .budget-analysis__risk-gap {
    padding: var(--space-1) 0;
  }

  .budget-analysis__ratio .budget-analysis__track {
    display: none;
  }
}



@media (max-width: 1180px) {
  body {
    overflow: auto;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 34rem auto auto;
    height: auto;
    min-height: 0;
  }

  .top-trends,
  .bottom-row {
    grid-template-columns: 1fr;
  }

  /* Bỏ span hàng/cột khi xếp 1 cột (base set right-rail 2/4, bottom-row 1/3 + row 3). */
  .left-rail,
  .right-rail {
    grid-row: auto;
  }

  .bottom-row {
    grid-column: auto;
    grid-row: auto;
  }

  .left-rail,
  .right-rail,
  .bottom-row {
    grid-template-rows: auto;
  }

  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* Dashboard page layout when the reusable IOC header is mounted. */
.ioc-header + .dashboard-grid,
.dashboard-grid {
  height: calc(100svh - 6.75rem);
}



@media (max-width: 1180px) {
  .ioc-header + .dashboard-grid,
  .dashboard-grid {
    height: auto;
  }
}