/* ========================================================
   CITRINE V2 • JUDUL HALAMAN DI HEADER
   Judul + breadcrumb duduk di sebelah logo; sub-header hanya berisi kartu metrik Overview.
   ======================================================== */
.brand-cluster { justify-self: start; display: flex; align-items: center; min-width: 0; max-width: 100%; }
.brand-cluster .brand-logo-area { flex: 0 0 auto; cursor: pointer; }
.brand-divider { flex: 0 0 1px; width: 1px; height: 26px; margin: 0 16px; background: #2e2e32; }
.top-header .dashboard-title-box { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.top-header .dashboard-title-box h1#topPageTitle {
  margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-header .dashboard-title-box .breadcrumb { gap: 5px; line-height: 1.2; white-space: nowrap; }
.top-header .dashboard-title-box .breadcrumb, .top-header .dashboard-title-box .breadcrumb span { font-size: 11px !important; }

/* sub-header kini hanya kartu metrik: tetap di tengah */
.sub-header .top-stats-row { grid-column: 2; }
.sub-header .dashboard-title-box { grid-column: 1; }

@media (max-width: 1100px) { .top-header .dashboard-title-box .breadcrumb { display: none; } }
@media (max-width: 760px) { .brand-divider, .top-header .dashboard-title-box { display: none; } }

/* 4 kartu metrik Overview: sedikit lebih ramping agar judul di kiri tetap muat */
.sub-header .top-stats-row .stat-item { width: 248px; }
.stat-val .stat-sub { font-size: 12px; color: var(--text-sec, #a1a1aa); font-weight: 400; }
#kpiRegionsCard:hover { border-color: rgba(224, 176, 74, 0.45); }

/* halaman tanpa sub-header: beri jarak antara header dan konten */
.no-subheader .top-header { margin-bottom: 14px; }

/* Tinggi view dulu dihitung 100vh - 128px (mengandaikan baris kartu metrik ada). Tanpa sub-header,
   biarkan view mengisi sisa .workspace-layout agar konten sampai ke bawah layar. */
.no-subheader :is(.pipeline-view-container, .analytics-view-container, .raw-view-container,
  .export-view-container, .trends-view-container, .settings-view-container, .war-view-container) {
  height: auto !important; align-self: stretch; min-height: 0;
}
