/* Aftelbalk — strook onder de header met aftellers naar aankomende events.
   Werkt in default- én newstyle-theme; dark mode via de framework CSS-vars. */

.aftelbalk {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.aftelbalk__inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px clamp(12px, 2vw, 20px);
    /* Meer tellers dan breedte? Horizontaal scrollen, niet wrappen — de balk
       moet één regel hoog blijven, anders springt de content eronder. */
    overflow-x: auto;
    scrollbar-width: thin;
}

.aftelbalk__inner::-webkit-scrollbar { height: 4px; }
.aftelbalk__inner::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.aftel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

.aftel-chip:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.aftel-chip__ico {
    color: var(--accent);
    font-size: 0.85rem;
}

.aftel-chip__naam {
    font-weight: 500;
}

.aftel-chip__waarde {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Laatste 48 uur / laatste uur / bezig: oplopende urgentie. */
.aftel-chip.is-soon     { border-color: var(--color-warning); }
.aftel-chip.is-soon     .aftel-chip__ico,
.aftel-chip.is-soon     .aftel-chip__waarde { color: var(--color-warning); }

.aftel-chip.is-imminent { border-color: var(--color-danger); }
.aftel-chip.is-imminent .aftel-chip__ico,
.aftel-chip.is-imminent .aftel-chip__waarde { color: var(--color-danger); }

.aftel-chip.is-live     { border-color: var(--color-danger); }
.aftel-chip.is-live     .aftel-chip__waarde { color: var(--color-danger); }
.aftel-chip.is-live     .aftel-chip__ico {
    color: var(--color-danger);
    animation: aftel-pulse 2s ease-in-out infinite;
}

@keyframes aftel-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .aftel-chip.is-live .aftel-chip__ico { animation: none; }
}

/* Smal scherm: naam weglaten, alleen icoon + teller. Dat blijft leesbaar en er
   passen er meer naast elkaar; de tooltip/klik geeft de details. */
@media (max-width: 640px) {
    .aftel-chip__naam { display: none; }
    .aftel-chip { padding: 4px 9px; gap: 5px; }
    .aftelbalk__inner { gap: 5px; padding: 4px 10px; }
}