/* Rapporten (afspeelrapporten) */
.rep-periods { align-items: center; margin-bottom: 10px; }
.rep-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); margin-left: 4px; }
.rep-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.rep-filters select { max-width: 240px; }
.rep-custom input[type=date], .rep-filters .rep-q { border: 1px solid var(--field-line); border-radius: 8px; padding: 8px 10px; background: var(--field); color: var(--text); min-height: 38px; }
.rep-filters .rep-q { flex: 1; min-width: 200px; max-width: 320px; }
.rep-body.is-loading { opacity: .6; }

.rep-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.rep-kpis .kpi strong { font-size: 26px; margin-top: 2px; }

.rep-card { margin-bottom: 16px; padding: 14px 16px 12px; }
.rep-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rep-card-head h3 { font-size: 15px; flex: 1; }
.rep-card-head .chips { margin: 0; }
.rep-card-head .chip { padding: 3px 10px; font-size: 13px; }

/* Staafjes: één reeks, dunne staven met een ronde bovenkant; raster en as blijven op de achtergrond. */
.rep-chart { display: flex; gap: 8px; }
.rep-scale { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; height: 170px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 44px; }
.rep-scale span { line-height: 1; transform: translateY(-50%); }
.rep-scale span:last-child { transform: translateY(50%); }
.rep-plotwrap { flex: 1; min-width: 0; }
.rep-plot { position: relative; display: flex; align-items: stretch; height: 170px; border-top: 1px dashed var(--line); border-bottom: 1px solid var(--field-line); background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.rep-col { flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; outline: 0; border-radius: 4px 4px 0 0; }
.rep-col i { display: block; width: 100%; max-width: 30px; background: var(--blue-d); border-radius: 4px 4px 0 0; min-height: 0; }
.rep-col.pick { cursor: pointer; }
.rep-col:hover, .rep-col:focus-visible { background: var(--hover); }
.rep-col:hover i, .rep-col:focus-visible i { filter: brightness(1.15); }
.rep-col:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-d); }
.rep-tip { position: absolute; top: 6px; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; gap: 1px; width: 168px; padding: 8px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--field-line); box-shadow: 0 6px 18px rgba(5, 0, 45, .16); font-size: 12.5px; color: var(--muted); pointer-events: none; }
.rep-tip strong { color: var(--text); font-size: 13px; }
.rep-axis { display: flex; margin-top: 5px; font-size: 11.5px; color: var(--muted); height: 16px; }
.rep-axis span { flex: 1; min-width: 0; display: flex; white-space: nowrap; overflow: visible; padding: 0 1px; }
.rep-axis span:last-child { justify-content: flex-end; }
.rep-chart.small .rep-scale, .rep-chart.small .rep-plot { height: 110px; }

.rep-tabs { margin-bottom: 10px; }
.rep-table .tr { flex-wrap: nowrap; }
.rep-head { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--head); border-radius: var(--r) var(--r) 0 0; padding-top: 8px; padding-bottom: 8px; }
.rep-stat { width: 104px; min-width: 0; flex: none; text-align: right; }
.rep-stat strong { font-weight: 600; white-space: nowrap; }
.rep-head .rep-stat { font-weight: 700; }
.rep-table .grow small { display: flex; align-items: center; gap: 10px; }
.rep-share { flex: 1; max-width: 220px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rep-share i { display: block; height: 100%; background: var(--blue-d); border-radius: 2px; }
.rep-foot { margin-top: 14px; }
.rep-h { font-size: 14px; margin: 16px 0 8px; }
.rep-item .rep-kpis .kpi strong { font-size: 22px; }
.rep-actions { margin-top: 16px; }

@media (max-width: 820px) {
  .rep-kpis { grid-template-columns: 1fr; }
  .rep-item .rep-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rep-item .rep-kpis .kpi { padding: 8px 10px; } .rep-item .rep-kpis .kpi strong { font-size: 17px; }
  .rep-filters select, .rep-filters .rep-q { max-width: none; width: 100%; flex: none; }
  .rep-custom { width: 100%; margin: 4px 0 0; } .rep-custom input { flex: 1; min-width: 0; }
  .rep-stat { width: 98px; font-size: 13.5px; } .rep-table .rep-stat:nth-child(2) { width: 56px; }
  .rep-head { letter-spacing: 0; font-size: 11.5px; }
  .rep-table .tr { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .rep-share { display: none; }
  .rep-scale { min-width: 38px; font-size: 10.5px; }
  .rep-table .rep-stat:last-child:nth-child(4) { display: none; } /* op een telefoon: naam, keer en schermtijd */
}

@media print {
  .rep-print .rep-facts { margin: 6px 0 4px; }
  .rep-print .rep-facts td { padding: 3px 14px 3px 0; text-align: left; vertical-align: top; }
  .rep-print .rep-facts td:first-child { color: #444; }
  .rep-print .rep-sum td { font-weight: 700; border-top: 1.5pt solid #000; border-bottom: 0; }
  .rep-print h2 { break-after: avoid; } .rep-print tr { break-inside: avoid; }
}