/* ============================================================
   DASHBOARD REDESIGN 2026
   Kaart-gebaseerde zijbalk, trendsgraafiek, verbeterde vakkaarten,
   gesofisticeerde datavisualisatie en betere hiërarchie.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   WEBSITE VERSIE — VOLLEDIGE BREEDTE
   ───────────────────────────────────────────────────────────── */

/* Alleen voor de website (index.html), niet voor de extensie */
body.website-page {
    padding: 0 !important;
}

body.website-page .container {
    max-width: 100% !important;
    grid-template-columns: 300px minmax(0, 1fr);
}

@media (max-width: 1200px) {
    body.website-page .container {
        grid-template-columns: 270px minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    body.website-page .container {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────
   HERO HEADER — RESPONSIEF & VOLLEDIGE BREEDTE
   ───────────────────────────────────────────────────────────── */

/* Premium layout and aesthetics */
.hero-header {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-column: 1 / -1;
    width: 100%;
    border-radius: 0 0 16px 16px !important;
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
    border-top: none !important;
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 70%, transparent), color-mix(in srgb, var(--surface-2) 85%, transparent)) !important;
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Promo banner: volledige breedte bovenaan */
#smpp-promo-banner {
    width: 100%;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* Hoofdrij: identity | stats | actions */
.hero-header-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Linkerblok: avatar + naam ── */
.hero-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.hero-identity .profile-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--blue) 40%, var(--border));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
    object-fit: cover;
    flex-shrink: 0;
}

.hero-identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-identity-text h1 {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    color: var(--t1);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.hero-identity-sub {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t3);
}

/* ── Middenblok: statistieken ── */
.hero-stats-group {
    display: flex;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-stat-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    min-width: 110px;
    flex: 1;
    max-width: 180px;
    transition: border-color .15s;
}

.hero-stat-chip:hover {
    border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
}

.hero-stat-chip-icon {
    font-size: .85rem;
    color: var(--t3);
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.hero-stat-chip div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.hero-stat-chip-label {
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--t3);
    line-height: 1;
}

.hero-stat-chip strong {
    font-size: .8rem;
    font-weight: 700;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ── Rechterblok: knoppen ── */
.hero-actions-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Middenblok: snelle acties ── */
.hero-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.hero-quick-actions-label {
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t3);
    opacity: .7;
    line-height: 1;
    align-self: flex-start;
    padding-left: 2px;
}

.hero-quick-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hero-btn-action {
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    color: var(--t2);
    font-size: .72rem;
    font-weight: 700;
    padding: 8px 12px;
    height: 34px;
    position: relative;
}

.hero-btn-action:hover {
    color: var(--t1);
    border-color: color-mix(in srgb, var(--blue) 50%, transparent);
    background: color-mix(in srgb, var(--blue) 10%, var(--surface-2));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 14%, transparent);
}

.hero-btn-action i {
    font-size: .72rem;
    color: var(--t3);
    transition: color .15s;
}

.hero-btn-action:hover i {
    color: var(--blue);
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border-2) 85%, transparent);
    background: color-mix(in srgb, var(--surface-2) 80%, transparent);
    color: var(--t1);
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s, transform .1s, color .15s, box-shadow .15s;
    text-decoration: none;
    height: 38px;
    box-sizing: border-box;
}

.hero-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--blue) 45%, transparent);
    background: color-mix(in srgb, var(--surface-3) 90%, transparent);
}

.hero-btn-primary {
    background: color-mix(in srgb, var(--blue) 18%, var(--surface-2));
    border-color: color-mix(in srgb, var(--blue) 45%, transparent);
    color: var(--blue);
    font-weight: 800;
}

.hero-btn-primary:hover {
    background: color-mix(in srgb, var(--blue) 28%, var(--surface-2));
    border-color: color-mix(in srgb, var(--blue) 70%, transparent);
}

.hero-btn-donate {
    background: color-mix(in srgb, #f43f5e 14%, var(--surface-2));
    border-color: color-mix(in srgb, #f43f5e 40%, transparent);
    color: #f43f5e;
    font-weight: 800;
}

.hero-btn-donate:hover {
    background: color-mix(in srgb, #f43f5e 24%, var(--surface-2));
    border-color: color-mix(in srgb, #f43f5e 65%, transparent);
}

.hero-btn-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 10px;
    font-size: .72rem;
    min-width: 52px;
    cursor: pointer;
}

/* Sync-rotatie animatie */
.hero-btn.syncing i {
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── View tab navigatie ── */
.view-tab-bar {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.view-tab-bar::-webkit-scrollbar {
    display: none;
}

.view-tab {
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIEF — TABLET (< 1024px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-stats-group {
        display: none;
    }

    .hero-identity-text h1 {
        max-width: 140px;
    }

    .hero-stat-chip {
        min-width: 90px;
    }

    .hero-quick-actions-label {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIEF — MOBIEL (< 720px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .hero-header-main {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }

    .hero-identity {
        flex: 1;
        min-width: 0;
    }

    .hero-identity-text h1 {
        max-width: 120px;
        font-size: .88rem;
    }

    .hero-identity .profile-avatar {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .hero-actions-group {
        flex: 1;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 5px;
    }

    .hero-quick-actions {
        order: 3;
        flex-basis: 100%;
        align-items: flex-start;
    }

    .hero-btn-action span {
        display: none;
    }

    .hero-btn span {
        display: none;
    }

    .hero-btn-primary span,
    .hero-btn-donate span {
        display: inline;
    }

    .hero-btn {
        padding: 8px 11px;
        height: 36px;
        font-size: .72rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIEF — KLEIN MOBIEL (< 480px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-header-main {
        padding: 10px 12px;
    }

    .hero-identity-sub {
        display: none;
    }

    .hero-quick-actions {
        display: none;
    }

    .hero-btn-primary span,
    .hero-btn-donate span {
        display: none;
    }

    .view-tab span {
        display: none;
    }

    .view-tab {
        padding: 12px 14px;
    }
}

/* ─── SIDEBAR KAARTEN ─── */

.stat-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}

.sidebar-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
    border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
    border-radius: 20px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}

.sidebar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    border-color: color-mix(in srgb, var(--blue) 45%, transparent);
}

.sidebar-card-label {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--t3);
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    margin-bottom: 2px;
}

.sidebar-card-label i {
    color: var(--blue);
    font-size: .74rem;
}

/* Card 1: Metrics — grote gemiddelde waarde */
.sidebar-card-metrics .stat-unit.active {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
}

.sidebar-card-metrics #total-percent {
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -3px;
    margin: 2px 0 4px;
}

/* Totaal punten compacter in metrics card */
.sidebar-card-metrics .stat-unit.stat-unit-spaced {
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
    margin-top: 2px;
}

.sidebar-card-metrics .total-points-value {
    font-size: 1rem;
}

/* AI insight in metrics card: transparante achtergrond */
.sidebar-card-metrics .ai-insight-box {
    background: color-mix(in srgb, var(--blue) 6%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin: 0 !important;
}

/* Distributie balk in metrics card */
.sidebar-card-metrics .distribution-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Gekleurde distributiebalkjes */
.dist-bar.dist-fail {
    background: #ef4444;
}

.dist-bar.dist-ok {
    background: #f59e0b;
}

.dist-bar.dist-good {
    background: #60a5fa;
}

.dist-bar.dist-pro {
    background: #34d399;
}

/* Card 2: Insights - verwijder dubbele labels */
.sidebar-card-insights .insight-group {
    gap: 6px;
    display: flex;
    flex-direction: column;
}

.sidebar-card-insights .insight-group>.stat-label {
    display: none;
    /* Vervangen door sidebar-card-label */
}

/* Card 3: Periode & navigatie */
.sidebar-card-controls .stat-unit {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.sidebar-card-controls .stat-unit+.stat-unit {
    border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    padding-top: 10px;
    margin-top: 2px;
}

/* Card 4: Gidsen — iets gedempter, interne widgets transparant */
.sidebar-card-guides {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.sidebar-card-guides .creator-widget {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.sidebar-card-guides .creator-widget+.creator-widget {
    border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
    padding-top: 10px !important;
    margin-top: 2px !important;
}

.sidebar-card-guides .log-panel {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    padding-top: 10px;
    margin-top: 2px;
}

/* ─── INKLAPBARE GIDS SECTIES ─── */

.sidebar-guide-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    width: 100%;
    background: none;
    border: none;
    color: var(--t2);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    padding: 0;
    text-align: left;
    gap: 8px;
    transition: color .15s ease;
}

.sidebar-guide-toggle:hover {
    color: var(--t1);
}

.sidebar-guide-toggle i.toggle-icon {
    transition: transform .2s ease;
    color: var(--t3);
    font-size: .68rem;
    flex-shrink: 0;
}

.sidebar-guide-toggle.is-collapsed i.toggle-icon {
    transform: rotate(-90deg);
}

.sidebar-guide-body {
    overflow: hidden;
    transition: max-height .28s ease, opacity .22s ease;
    max-height: 320px;
    opacity: 1;
}

.sidebar-guide-body.is-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ─── TREND GRAFIEK KAART ─── */

.trend-chart-card {
    background: color-mix(in srgb, var(--surface-2) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 0;
}

.trend-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.trend-chart-title {
    font-size: .92rem;
    font-weight: 800;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: -.2px;
}

.trend-chart-title i {
    color: var(--blue);
    font-size: 1rem;
}

.trend-chart-subtitle {
    font-size: .68rem;
    color: var(--t3);
    font-weight: 600;
}

.trend-chart-container {
    position: relative;
    height: 220px;
    width: 100%;
}

.trend-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    gap: 10px;
    color: var(--t3);
}

.trend-chart-empty i {
    font-size: 2rem;
    color: color-mix(in srgb, var(--blue) 35%, var(--t3));
}

.trend-chart-empty p {
    font-size: .78rem;
    font-weight: 600;
    margin: 0;
}

/* ─── VAKKAARTEN — VERBETERD ─── */

/* Score badge kleuren per niveau */
.subject-card.score-fail .score-badge {
    color: #ef4444;
}

.subject-card.score-ok .score-badge {
    color: #f59e0b;
}

.subject-card.score-good .score-badge {
    color: #60a5fa;
}

.subject-card.score-pro .score-badge {
    color: #34d399;
}

/* Remove overlapping ::after badges, handled via JS inline badges instead. */

/* Verwijder badge op actieve/geopende kaart */
.subject-card.active::after {
    display: none;
}

/* Extra hover animatie */
.subject-card {
    position: relative;
    transition: background .15s ease, box-shadow .18s ease,
        border-color .15s ease, transform .12s ease;
}

.subject-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.subject-card.active {
    transform: none;
}

/* ─── SIDEBAR SYNC WIDGET ─── */

.sidebar-sync-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-sync-step {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 10px;
}

.sidebar-sync-step-label {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--t3);
}

.sidebar-sync-step strong {
    font-size: .78rem;
    font-weight: 700;
    color: var(--t2);
}

.sidebar-sync-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.sidebar-sync-actions .period-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
}

/* ─── BOARD HEADER — CLEANER ─── */

.board-header {
    padding: 0 0 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.board-header h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--t1);
    margin: 0 0 3px;
    letter-spacing: -.3px;
}

#sync-status {
    font-size: .68rem;
    color: var(--t3);
    font-weight: 600;
}

/* ─── VIEW TABS — ICOONAFSTAND ─── */

.view-tab i {
    font-size: .8rem;
}

/* ─── GOAL CALCULATOR — BLAUWE ACCENTRAND ─── */

.goal-bar {
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border)) !important;
}

.goal-bar-title i {
    color: var(--blue);
    font-size: 1.1rem;
}

/* ─── EXAMENGEWICHTEN CONFIG — PROMINENT ─── */

#period-weights-config-section {
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border)) !important;
    background: color-mix(in srgb, var(--surface-2) 92%, transparent) !important;
}

#period-weights-config-section h3 {
    color: var(--t1);
    font-size: 1rem;
    font-weight: 800;
}

.period-weights-head {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

/* ─── NUMMERVELDEN — STIJLVOLLER ─── */

.period-weight-row input[type="number"],
.goal-bar input[type="number"] {
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--t1);
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 700;
}

.period-weight-row input[type="number"]:focus,
.goal-bar input[type="number"]:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent);
}

/* ─── STAT ANIMATIE ─── */

@keyframes stat-pop-in {
    0% {
        transform: scale(0.82);
        opacity: 0;
    }

    65% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.stat-value.text-blue {
    animation: stat-pop-in .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

/* ─── SCORE VERDELING SCHAAL ─── */

.distribution-scale span {
    font-size: .57rem;
    font-weight: 700;
    color: var(--t3);
}

/* ─── SYNC OVERVIEW KAARTEN ─── */

.sync-overview-card {
    border-radius: 12px;
    padding: 14px 16px;
}

/* ─── CREATOR WIDGET HOOFDINHOUD — MINDER PROMINENT ─── */

.creator-widget-main {
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent) !important;
}

/* ─── RESPONSIVE ─── */

@media (max-width: 980px) {
    .sidebar-card {
        padding: 14px;
        border-radius: 14px;
    }

    .trend-chart-card {
        padding: 16px;
        border-radius: 14px;
    }

    .sidebar-card-metrics #total-percent {
        font-size: 2.4rem;
    }
}

@media (max-width: 720px) {
    .sidebar-card {
        border-radius: 12px;
    }

    .trend-chart-container {
        height: 170px;
    }
}
/* ─── TOTAAL PUNTEN — KLEINERE WEERGAVE ─── */

.total-points-value {
    font-size: .82rem !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
}

/* ─── RAPPORT SETUP POPUP — NIEUWE STIJL ─── */

.rs-tab-nav {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    flex-shrink: 0;
}

.rs-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    color: var(--t3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .12s, border-color .12s;
    margin-bottom: -1px;
    white-space: nowrap;
}

.rs-tab-btn:hover { color: var(--t2); }
.rs-tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }

.rs-weights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 640px) {
    .rs-weights-grid { grid-template-columns: 1fr; }
}

.rs-weight-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--surface-3) 80%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: default;
}

.rs-weight-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--t2);
}

.rs-weight-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.rs-badge-dw1 { background: color-mix(in srgb, #60a5fa 20%, var(--surface)); color: #60a5fa; border: 1px solid color-mix(in srgb, #60a5fa 30%, transparent); }
.rs-badge-dw2 { background: color-mix(in srgb, #34d399 20%, var(--surface)); color: #34d399; border: 1px solid color-mix(in srgb, #34d399 30%, transparent); }
.rs-badge-dw3 { background: color-mix(in srgb, #a78bfa 20%, var(--surface)); color: #a78bfa; border: 1px solid color-mix(in srgb, #a78bfa 30%, transparent); }
.rs-badge-ex1 { background: color-mix(in srgb, #f97316 20%, var(--surface)); color: #f97316; border: 1px solid color-mix(in srgb, #f97316 30%, transparent); }
.rs-badge-ex2 { background: color-mix(in srgb, #f43f5e 20%, var(--surface)); color: #f43f5e; border: 1px solid color-mix(in srgb, #f43f5e 30%, transparent); }

.rs-weight-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rs-weight-input-wrap input {
    width: 68px;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    color: var(--t1);
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    text-align: right;
    transition: border-color .15s;
}

.rs-weight-input-wrap input:focus {
    outline: none;
    border-color: var(--blue);
}

.rs-weight-input-wrap span {
    font-size: .8rem;
    font-weight: 700;
    color: var(--t3);
}

.rs-weight-sum-ok { background: color-mix(in srgb, #22c55e 18%, var(--surface-2)) !important; border-color: color-mix(in srgb, #22c55e 40%, transparent) !important; color: #22c55e !important; }
.rs-weight-sum-warn { background: color-mix(in srgb, #f97316 18%, var(--surface-2)) !important; border-color: color-mix(in srgb, #f97316 40%, transparent) !important; color: #f97316 !important; }
.rs-weight-sum-err { background: color-mix(in srgb, #f43f5e 18%, var(--surface-2)) !important; border-color: color-mix(in srgb, #f43f5e 40%, transparent) !important; color: #f43f5e !important; }

.rs-preset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.rs-preset-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--t3);
    margin-right: 2px;
}

.rs-preset-btn {
    font-size: .7rem !important;
    padding: 5px 12px !important;
    height: auto !important;
}

.rs-grades-period-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.rs-period-tab {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--t2);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}

.rs-period-tab:hover {
    border-color: color-mix(in srgb, var(--blue) 40%, transparent);
    color: var(--t1);
}

.rs-period-tab.active {
    background: color-mix(in srgb, var(--blue) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--blue) 50%, transparent);
    color: var(--blue);
}

/* Examencijfers per vak invoeren */
.rs-grade-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--surface-3) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 6px;
}

.rs-grade-subject {
    flex: 1;
    font-size: .8rem;
    font-weight: 700;
    color: var(--t1);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-grade-sep {
    font-size: .8rem;
    color: var(--t3);
    font-weight: 600;
    flex-shrink: 0;
}

.rs-grade-input {
    width: 58px;
    padding: 6px 9px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    color: var(--t1);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
    flex-shrink: 0;
    transition: border-color .15s;
}

.rs-grade-input:focus {
    outline: none;
    border-color: var(--blue);
}

/* DW3 period badge in eval tiles */
.eval-period-dw3 { background: color-mix(in srgb, #a78bfa 22%, var(--surface)); color: #a78bfa; }

/* ============================================================
   WHAT-IF + CLASS/TEST COMPARISON POLISH
   ============================================================ */

.modal-whatif-row {
    margin-bottom: 10px;
}

.whatif-card {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.whatif-card-header {
    font-size: .69rem;
    font-weight: 800;
    color: var(--t1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.whatif-inputs-row {
    display: grid;
    grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr) auto;
    gap: 7px;
    align-items: center;
}

.whatif-pct-live {
    min-width: 56px;
    text-align: center;
    font-size: .69rem;
    font-weight: 800;
    color: var(--blue);
    border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
    background: color-mix(in srgb, var(--blue) 15%, var(--surface));
    border-radius: 8px;
    padding: 7px 6px;
}

.whatif-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.whatif-btns-row .period-btn {
    height: auto;
    padding: 6px 10px;
    font-size: .68rem;
}

.modal-whatif-total {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 84%, transparent);
    border-radius: 10px;
    padding: 8px 10px;
}

.whatif-impact-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t3);
}

.whatif-impact-value {
    font-size: .82rem;
    font-weight: 800;
    color: var(--t1);
}

.whatif-impact-diff {
    font-size: .72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 8px;
}

.whatif-impact-diff.is-pos { color: #22c55e; background: color-mix(in srgb, #22c55e 18%, var(--surface)); }
.whatif-impact-diff.is-neg { color: #f43f5e; background: color-mix(in srgb, #f43f5e 18%, var(--surface)); }
.whatif-impact-diff.is-even { color: var(--t2); background: color-mix(in srgb, var(--surface-3) 90%, transparent); }

.ctable-rank-col {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ctable-rank {
    font-size: .72rem;
    font-weight: 800;
    color: var(--t2);
}

.ctable-won-count {
    margin-top: 4px;
    font-size: .6rem;
    font-weight: 700;
    color: var(--t3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.test-compare-scoreboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 10px;
}

.tcs-block {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 8px;
    text-align: center;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.tcs-count {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.tcs-label {
    margin-top: 4px;
    font-size: .61rem;
    font-weight: 700;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.tcs-me .tcs-count { color: #22c55e; }
.tcs-other .tcs-count { color: #f43f5e; }
.tcs-tie .tcs-count { color: var(--t2); }

.test-compare-hint {
    font-size: .68rem;
    font-weight: 600;
    color: var(--t3);
    margin-top: 4px;
}

.tsb-top-row,
.tsb-bottom-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tsb-bottom-row {
    margin-top: 2px;
}

.tsb-win-badge {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: .57rem;
    font-weight: 800;
}

.tsb-win-me { color: #22c55e; background: color-mix(in srgb, #22c55e 16%, var(--surface)); }
.tsb-win-other { color: #f43f5e; background: color-mix(in srgb, #f43f5e 16%, var(--surface)); }
.tsb-win-even { color: var(--t2); background: color-mix(in srgb, var(--surface-3) 90%, transparent); }

.tests-subject-diff.is-pos { color: #22c55e; }
.tests-subject-diff.is-neg { color: #f43f5e; }
.tests-subject-diff.is-even { color: var(--t2); }

/* ─────────────────────────────────────────────────────────────
   DASHBOARD POLISH — SHELL, CARDS & EMPTY STATES
   ───────────────────────────────────────────────────────────── */

body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--blue) 14%, transparent), transparent 34%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--purple) 12%, transparent), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #ffffff 4%), var(--bg));
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.035), transparent 35%, rgba(255, 255, 255, 0.015));
    opacity: .55;
}

.container {
    gap: 18px;
}

.main-content {
    padding: 20px;
    position: relative;
}

.subject-board {
    background: color-mix(in srgb, var(--surface) 58%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.view-tab-bar {
    gap: 8px;
    padding: 7px;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
    overflow-x: auto;
    scrollbar-width: thin;
}

.view-tab {
    border-radius: 12px;
}

.view-tab.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 28%, var(--surface-2)), color-mix(in srgb, var(--blue) 16%, var(--surface-3)));
    border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
    color: var(--t1);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.board-header {
    margin-bottom: 18px;
    padding: 16px 18px 14px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 76%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.filter-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

#subject-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.subject-card {
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-2) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.subject-card:hover {
    border-color: color-mix(in srgb, var(--blue) 28%, var(--border));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

.subject-trigger {
    padding: 15px 16px;
}

.score-meta {
    gap: 8px;
}

.score-badge {
    font-size: 1.02rem;
    font-weight: 800;
}

.subject-exclude-btn {
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-3) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.period-nodata-state,
.dashboard-empty-state {
    min-height: 280px;
    padding: 48px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    border-radius: 22px;
    border: 1px dashed color-mix(in srgb, var(--border-2) 88%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 84%, transparent), color-mix(in srgb, var(--surface-3) 64%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px rgba(0, 0, 0, 0.16);
}

.dashboard-empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--border));
    font-size: 1.2rem;
}

.dashboard-empty-title,
.period-nodata-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--t1);
}

.dashboard-empty-body,
.period-nodata-body {
    max-width: 600px;
    margin: 0;
    color: var(--t2);
    line-height: 1.65;
    font-size: .84rem;
}

.dashboard-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.dashboard-empty-actions .period-btn {
    min-width: 140px;
}

.dashboard-empty-state-filtered {
    border-style: solid;
}

@media (max-width: 980px) {
    .main-content {
        padding: 14px;
    }

    .board-header {
        padding: 14px;
    }

    #subject-list {
        grid-template-columns: 1fr;
    }
}

.tsb-count {
    font-size: .58rem;
    font-weight: 700;
    color: var(--t3);
}

.tcm-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tcm-summary-pill {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .62rem;
    font-weight: 800;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 86%, transparent);
    color: var(--t2);
}

.tcm-summary-me { color: #22c55e; border-color: color-mix(in srgb, #22c55e 35%, transparent); }
.tcm-summary-other { color: #f43f5e; border-color: color-mix(in srgb, #f43f5e 35%, transparent); }

.tcm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tcm-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.tcm-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.tcm-label {
    font-size: .71rem;
    font-weight: 800;
    color: var(--t1);
}

.tcm-period {
    font-size: .56rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--t2);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-3) 92%, transparent);
}

.tcm-row-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.tcm-score-value {
    font-size: .68rem;
    font-weight: 700;
    color: var(--t2);
    margin-bottom: 4px;
}

.tcm-bar {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-3) 90%, transparent);
}

.tcm-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 85%, #60a5fa), #22c55e);
}

.tcm-diff {
    text-align: center;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 8px;
    padding: 7px 6px;
    background: color-mix(in srgb, var(--surface-3) 84%, transparent);
    border: 1px solid var(--border);
}

.tcm-diff.is-pos { color: #22c55e; border-color: color-mix(in srgb, #22c55e 38%, transparent); }
.tcm-diff.is-neg { color: #f43f5e; border-color: color-mix(in srgb, #f43f5e 38%, transparent); }

@media (max-width: 740px) {
    .whatif-inputs-row {
        grid-template-columns: 1fr auto 1fr;
    }

    .whatif-pct-live {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .tcm-row-body {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .tcm-diff {
        order: -1;
    }
}