h5 svg {height:28px;}
nav { display: flex; align-items: center; }
nav .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Chart containers */
.dc-chart { width: 100%; }

#chart-year { height: 250px; }
#chart-regulation { height: 220px; }
#chart-decisionType { height: 320px; }
#chart-sector { height: 340px; }
#chart-simplified { height: 220px; }
#chart-duration { height: 240px; }
#chart-duration .area { fill: var(--primary); fill-opacity: 0.15; }
#chart-duration .line { stroke: var(--primary); stroke-width: 2px; fill: none; }

/* Row chart labels */
.dc-chart g.row text {
  fill: var(--on-surface);
  font-size: 12px;
}

/* Bar chart styling */
.dc-chart rect.bar {
  fill: var(--primary);
}
.dc-chart rect.bar:hover {
  fill: var(--secondary);
}

/* Pie chart */
.dc-chart g.pie-slice { stroke: var(--surface); stroke-width: 1px; }
#chart-regulation .pie-slice text,
#chart-regulation .pie-label text,
#chart-regulation text.pie-label,
#chart-regulation text { fill: #444 !important; }

/* Company chips */
.chip {
  display: inline-block;
  padding: 0 6px;
  margin: 1px;
  background: var(--surface-container);
  color: var(--on-surface);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
  border: 1px solid var(--outline);
  block-size: 1.2rem;
}
.chip:hover { background: var(--primary); color: var(--on-primary); }

/* Data table */
#table-cases {
  font-size: 13px;
  width: 100%;
}
#table-cases thead th,
#table-cases tbody td {
  padding: 4px 8px;
}
#table-cases thead th {
  background: var(--surface);
  position: sticky;
  top: 0;
  cursor: pointer;
}
#table-cases tbody tr:hover {
  background: var(--active);
}
.dc-table-group { display: none; }
tr.dc-table-head { display: none; }

/* Number displays */
.dc-number-display {
  font-weight: 700;
}

/* Grid article padding for charts */
article h6 {
  margin: 0 0 4px 0;
  opacity: 0.8;
}

/* KPI cards */
#kpi-total, #kpi-duration, #kpi-phase1, #kpi-translations {
  font-size: 2rem;
  font-weight: 700;
}

/* Filter reset button spacing */
nav .button { margin-left: 12px; }

/* Small helper */
.small-text { font-size: 12px; opacity: 0.6; }

/* Undo BeerCSS conflicts on dc.js internal classes */
.dc-chart .overlay,
.dc-chart .overlay.active {
  position: static; opacity: 1; visibility: visible; z-index: auto;
  background: none; display: block;
}
.dc-chart .grid-line { display: block; position: static; }
.dc-chart .row { display: flex; position: static; }
.dc-chart .axis { display: block; position: static; }

/* SVG text readability in dark mode */
.dc-chart text { fill: var(--on-surface); }
.dc-chart .axis line, .dc-chart .axis path { stroke: var(--outline); }
.dc-chart .grid-line line { stroke: var(--outline); stroke-opacity: 0.3; }
.dc-chart .grid-line path { stroke: none; }

/* Brush */
.dc-chart .brush rect.extent { fill: var(--primary); fill-opacity: 0.15; stroke: var(--primary); }

/* Row chart axis */
.dc-chart .row .axis text { fill: var(--on-surface); font-size: 12px; }

/* Data table header sort icons */
.dc-table-head {
  color: var(--on-surface);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive: row charts full width on small screens */
@media (max-width: 600px) {
  #chart-decisionType, #chart-sector { height: 260px; }
  #chart-year { height: 180px; }
}