/* =============================================================================
   statistieken.php — cijfers over het platform
   -----------------------------------------------------------------------------
   Voorvoegsel: .st-
   De oude pagina toonde balken met vaste breedtes en een confetti-vlak met een
   verzonnen slagingspercentage. Hier is elke balk een verhouding van echte
   tellingen; de breedte komt uit een CSS-variabele die PHP per rij zet, zodat
   er geen style-attribuut in de HTML nodig is.
   ============================================================================= */

/* ── Kerncijfers ──────────────────────────────────────────────────────────── */
.st-kern { padding: clamp(2rem, 4.5vw, 3rem) 0; }
.st-kern-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}
.st-kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.st-kaart-icoon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--blue-light);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .4rem;
}
.st-kaart-getal {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    font-weight: 600;
    line-height: 1;
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.st-kaart-label { font-weight: 600; font-size: .95rem; color: var(--text); }
.st-kaart-uitleg { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

.st-kaart-accent .st-kaart-icoon { background: var(--primary-light); color: var(--primary); }
.st-kaart-waarschuwing .st-kaart-icoon { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-dark); }
.st-kaart-waarschuwing .st-kaart-getal { color: var(--accent-dark); }

/* ── Secties met verdelingen ──────────────────────────────────────────────── */
.st-vlakken { padding: 0 0 clamp(2rem, 4.5vw, 3rem); }
.st-grid-twee {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
}
.st-paneel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem 1.5rem 1.5rem;
}
.st-paneel h2 { font-size: 1.1rem; margin: 0 0 .25rem; }
.st-paneel-sub { font-size: .85rem; color: var(--text-muted); margin: 0 0 1.1rem; }

/* Balkenlijst. --deel is de verhouding (0-100), door PHP als CSS-variabele
   op de <li> gezet; de HTML houdt zo geen style-attribuut over. */
.st-balken { list-style: none; margin: 0; padding: 0; }
.st-balken li + li { margin-top: .85rem; }
.st-balk-kop {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .3rem;
    font-size: .9rem;
}
.st-balk-naam { font-weight: 600; color: var(--text); }
.st-balk-getal {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.st-balk-deel { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.st-balk-spoor {
    height: .6rem;
    border-radius: var(--radius-pill);
    background: var(--surface-warm);
    border: 1px solid var(--border);
    overflow: hidden;
}
.st-balk-vulling {
    display: block;
    height: 100%;
    width: calc(var(--deel, 0) * 1%);
    min-width: 2px;
    border-radius: var(--radius-pill);
    background: var(--primary);
}
.st-balken li.st-open   .st-balk-vulling { background: var(--accent); }
.st-balken li.st-terug  .st-balk-vulling { background: var(--primary); }
.st-balken li.st-anders .st-balk-vulling { background: var(--text-muted); }
.st-balken li.st-blauw  .st-balk-vulling { background: var(--blue); }

/* Maandstaafjes: verticaal, want de tijdlijn leest van links naar rechts. */
.st-maanden {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    min-height: 9rem;
}
.st-maanden li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}
.st-maand-getal { font-size: .82rem; font-weight: 700; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.st-maand-staaf {
    width: 100%;
    /* Was 3rem. Bij zes maanden zag dat er goed uit, maar het platform draait pas sinds
       juli en dan staan er drie staven van 48 pixels in een paneel van bijna 600, met
       vooral lucht ertussen. Breder laten meegroeien lost dat op: bij meer maanden knijpt
       flex: 1 ze vanzelf weer terug. */
    max-width: 5rem;
    height: calc(1.25rem + var(--deel, 0) * .055rem);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--blue);
}
.st-maand-naam {
    font-size: .72rem;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.st-leeg {
    color: var(--text-muted);
    font-size: .9rem;
    background: var(--surface-warm);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin: 0;
}

/* ── Verantwoording ───────────────────────────────────────────────────────── */
.st-uitleg {
    background: var(--blue-light);
    border-block: 1px solid var(--blue-border);
    padding: clamp(2rem, 4.5vw, 2.75rem) 0;
}
.st-uitleg h2 { font-size: 1.2rem; margin: 0 0 .6rem; color: var(--blue-darker); }
.st-uitleg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 1.25rem;
}
.st-uitleg-grid h3 { font-size: .98rem; margin: 0 0 .3rem; font-family: var(--font-body); font-weight: 700; }
.st-uitleg-grid p  { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text); }
.st-peildatum { font-size: .85rem; color: var(--text-muted); margin: 1.25rem 0 0; }

/* ── Slot ─────────────────────────────────────────────────────────────────── */
.st-slot { padding: clamp(2rem, 4.5vw, 3rem) 0; }
.st-slot-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
}
.st-slot-inner div { flex: 1 1 22rem; }
.st-slot-inner h2 { font-size: 1.25rem; margin: 0 0 .4rem; }
.st-slot-inner p  { margin: 0; color: var(--text-muted); font-size: .95rem; max-width: 58ch; }
.st-slot-knoppen { display: flex; flex-wrap: wrap; gap: .65rem; flex: 0 0 auto; }

@media (max-width: 575px) {
    .st-maanden { gap: .25rem; }
    .st-maand-naam { font-size: .62rem; }
    .st-slot-knoppen .btn { width: 100%; }
}

/* De lopende maand is nog niet af. Hij krijgt daarom een opengewerkte staaf en een
   kleine toevoeging bij de maandnaam, zodat een halve maand niet als een volle wordt
   gelezen en een dalende reeks niet ten onrechte op een terugval lijkt. */
.st-maanden li.st-maand-loopt .st-maand-staaf {
    background: repeating-linear-gradient(
        135deg,
        var(--blue-light, #cfe0f5) 0 6px,
        transparent 6px 12px
    );
    border: 1px dashed var(--border, #c9d4e0);
}
.st-maanden li.st-maand-loopt .st-maand-getal { color: var(--muted, #5b6770); }
.st-maanden li.st-maand-loopt .st-maand-naam em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--muted, #5b6770);
}

/* Diersoort op de kaartjes van teruggevonden dieren. Klein en rustig: het is context
   bij de naam, geen kop. */
.st-kaart-soort {
    display: inline-block;
    align-self: flex-start;
    margin: .1rem 0 .3rem;
    padding: .1rem .45rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--band-groen, #eaf4ee);
    color: var(--primary-dark, #2b6349);
    font-size: .72rem;
    font-weight: 600;
}