/* ==========================================================================
   XASI PREMIUM: STATISTIEKPAGINA
   Komt NA de eigen <style> van visitor-stats.php. Alleen typografie, vorm en
   diepte; kleuren blijven per thema uit style.css en de pagina zelf komen.
   Lettertypes (@font-face) komen uit premium.css.
   ========================================================================== */

/* Eén lettertype voor tekst en cijfers; de matrix-regen houdt zijn eigen letter */
body.stats-page *:not([class*="matrix-rain"]):not(svg):not(svg *) {
    font-family: var(--xp-font) !important;
}

body.stats-page .stats-title {
    font-family: var(--xp-display) !important;
    font-weight: 700;
    letter-spacing: -0.025em;
}

body.stats-page .stats-kicker,
body.stats-page .stat-label,
body.stats-page .panel-title,
body.stats-page .month-pulse-title,
body.stats-page .month-pulse-days,
body.stats-page .month-pulse-card span,
body.stats-page .year-total-card span,
body.stats-page .chart-legend,
body.stats-page .history-table th {
    font-weight: 600;
    letter-spacing: 0.16em;
}

body.stats-page .stat-label {
    font-size: 0.68rem;
}

body.stats-page .panel-title {
    font-size: 0.82rem;
}

/* Cijfers: strak en even breed */
body.stats-page .stat-value,
body.stats-page .month-pulse-card strong,
body.stats-page .year-total-card strong,
body.stats-page .history-table td,
body.stats-page .y-axis,
body.stats-page .x-axis,
body.stats-page .range-title {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "cv11";
}

body.stats-page .stat-value {
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.stats-page .range-title {
    font-weight: 600;
    letter-spacing: 0.04em;
}

body.stats-page .month-pulse-card strong,
body.stats-page .year-total-card strong {
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.stats-page .month-pulse-card em {
    font-style: normal;
    opacity: 0.85;
}

/* Vorm: zachte panelen met diepte */
body.stats-page .stat-tile,
body.stats-page .chart-panel,
body.stats-page .history-panel,
body.stats-page .year-insights-panel,
body.stats-page .month-pulse-panel {
    border-radius: 18px;
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
    backdrop-filter: blur(10px) saturate(1.25);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
        0 22px 50px -24px rgba(0, 0, 0, 0.55);
}

body.stats-page .month-pulse-card,
body.stats-page .year-total-card {
    border-radius: 12px;
}

body.stats-page .range-action {
    border-radius: 999px;
    padding-left: 14px;
    padding-right: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

body.stats-page .bar {
    border-radius: 6px 6px 2px 2px;
}

/* Grafiek: elke dag een zacht spoor, zodat de maand altijd zichtbaar compleet is */
body.stats-page .bar-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--text-color) 2%, transparent),
        color-mix(in srgb, var(--text-color) 6%, transparent));
    pointer-events: none;
}

body.stats-page .bar-wrap .bar {
    position: relative;
    z-index: 1;
    transition: filter 0.25s ease, transform 0.25s ease;
    transform-origin: bottom;
}

body.stats-page .bar-wrap:hover .bar {
    filter: brightness(1.15);
}

/* Nog niet aangebroken of zonder meting: alleen een leeg slot */
body.stats-page .bar-wrap.is-future .bar,
body.stats-page .bar-wrap.is-nodata .bar {
    visibility: hidden;
}

body.stats-page .bar-wrap.is-future::before {
    background: none;
    border: 1px dashed color-mix(in srgb, var(--text-color) 12%, transparent);
    border-bottom: 0;
}

/* Vandaag: eigen accent, ook als het nog vroeg is */
body.stats-page .bar-wrap.is-today::before {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent-color) 4%, transparent),
        color-mix(in srgb, var(--accent-color) 16%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 38%, transparent);
}

body.stats-page .bar-wrap.is-today .bar.views {
    box-shadow:
        0 0 22px rgba(57, 255, 20, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 0 0 10px rgba(255, 255, 255, 0.25);
}

body.stats-page .x-tick.is-future {
    opacity: 0.35;
}

body.stats-page .x-tick.is-today {
    color: var(--accent-color);
    font-weight: 700;
}

body.stats-page .bar-wrap:hover::after {
    z-index: 5;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 600;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
}

body.stats-page .chart-legend i {
    border-radius: 50%;
}

body.stats-page .history-table td {
    font-weight: 500;
}