:root {
  --wezen-blue: #003366;
  --wezen-blue-2: #075985;
  --wezen-orange: #f28c28;
  --ink: #263238;
  --muted: #64748b;
  --line: #dbe3ea;
  --panel: #ffffff;
  --soft: #f5f8fb;
}

* { box-sizing: border-box; }

.logo-title { display: flex; align-items: center; gap: 10px; }
.logo-title img { height: 50px; width: auto; }

.dashboard-shell { max-width: 1440px; margin: 0 auto; padding: 28px 40px 56px; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.dashboard-heading h2 { margin: 2px 0 4px; color: var(--wezen-blue); font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.2; }
.eyebrow { margin: 0; color: var(--wezen-orange); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.dashboard-intro { margin: 0; color: var(--muted); }
.primary-action { border: 0; border-radius: 7px; padding: 11px 18px; background: var(--wezen-blue); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; }
.primary-action:hover { background: var(--wezen-blue-2); }
.primary-action:disabled { opacity: .5; cursor: not-allowed; }

.dashboard-controls { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 9px; }
.dashboard-controls label { color: var(--wezen-blue); font-weight: 700; }
.dashboard-controls select { min-width: 260px; padding: 9px 36px 9px 11px; border: 1px solid #b8c7d3; border-radius: 6px; background: #fff; color: var(--ink); }
#loadStatus { margin-left: auto; color: var(--muted); font-size: .88rem; }

.dataset-tabs { display: flex; gap: 9px; overflow-x: auto; padding: 22px 0 14px; scrollbar-width: thin; }
.dataset-tab { flex: 0 0 auto; border: 1px solid #b9cadd; border-radius: 999px; padding: 9px 16px; background: #fff; color: var(--wezen-blue); font-weight: 700; cursor: pointer; }
.dataset-tab:hover, .dataset-tab.active { background: var(--wezen-blue); color: #fff; border-color: var(--wezen-blue); }

.topic-panel { display: none; }
.topic-panel.active { display: block; animation: panelIn .22s ease-out; }
@keyframes panelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.topic-heading { margin: 8px 0 16px; color: var(--wezen-blue); }
.indicator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.indicator-card { min-width: 0; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 3px 12px rgba(0, 51, 102, .08); break-inside: avoid; }
.indicator-card h3 { margin: 0 0 4px; color: var(--wezen-blue); font-size: 1.03rem; line-height: 1.35; }
.indicator-subtitle { min-height: 2.7em; margin: 0 0 12px; color: var(--muted); font-size: .84rem; }
.chart-wrap { position: relative; height: 310px; }
.table-wrap { overflow: auto; max-height: 360px; margin-top: 14px; border-top: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.data-table th, .data-table td { padding: 7px 8px; border-bottom: 1px solid #e8edf2; text-align: right; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { position: sticky; left: 0; text-align: left; background: #fff; }
.data-table th { position: sticky; top: 0; z-index: 1; background: #eef4f8; color: var(--wezen-blue); }
.source-note { margin: 12px 0 0; padding-top: 9px; border-top: 1px solid var(--line); color: #6b7280; font-size: .72rem; font-style: italic; }
.empty-state { padding: 36px; border: 1px dashed #b9cadd; border-radius: 9px; text-align: center; color: var(--muted); background: #fafcfe; }

.pdf-report { display: none; }
.pdf-report.exporting { display: block; position: fixed; left: -100000px; top: 0; width: 794px; background: #fff; }
.pdf-cover { width: 794px; min-height: 1122px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px; color: var(--wezen-blue); text-align: center; page-break-after: always; }
.pdf-cover img { width: 110px; margin-bottom: 30px; }
.pdf-cover h1 { font-size: 34px; margin: 0 0 12px; }
.pdf-cover h2 { color: var(--wezen-orange); font-size: 24px; }
.pdf-page { width: 794px; min-height: 1122px; padding: 34px; page-break-after: always; }
.pdf-page:last-child { page-break-after: auto; }
.pdf-page .indicator-grid { grid-template-columns: 1fr; }
.pdf-page .indicator-card { box-shadow: none; margin-bottom: 18px; }
.pdf-page .table-wrap { max-height: none; overflow: visible; }

@media (max-width: 900px) {
  .dashboard-shell { padding: 22px 20px 42px; }
  .dashboard-heading { align-items: stretch; flex-direction: column; }
  .primary-action { align-self: flex-start; }
  .indicator-grid { grid-template-columns: 1fr; }
  .dashboard-controls { align-items: flex-start; flex-wrap: wrap; }
  #loadStatus { width: 100%; margin-left: 0; }
}

@media (max-width: 640px) {
  header { padding: 14px 18px; flex-wrap: wrap; }
  header nav { width: 100%; overflow-x: auto; padding-top: 10px; }
  .logo-title img { height: 42px; }
  .dashboard-shell { padding: 18px 14px 36px; }
  .dashboard-controls select { width: 100%; min-width: 0; }
  .chart-wrap { height: 270px; }
}