/* kerncijfers.css - de kerncijfertegels van het dashboard (WQ-178, Nico 05-10-2026).

   'Team overzicht' (de zaakvoerder) en 'Mijn verkopen' (verkoper en salesmanager): per categorie een ring naar het
   maanddoel, het getal van deze maand groot, en onder een stippellijn MTD-1 en YTD-1 (of de vorige maand). De tegels
   worden getekend door kerncijferTegel() in dashboard.js.

   Eigen bestand en eigen klassen, zoals toonzaal.css en navigatie.css: .adm-kpi blijft zoals hij is, want de
   werkverdeling van aftersales en de leveringen per fase gebruiken hem ook.

   GEEN GLAS EN GEEN GLANS (WQ-180). De tegel is één rustig vlak; bij aanwijzen alleen een lichtere rand en een zachte
   schaduw, geen opwippen en geen muisgloed. Het omhulsel rond de tegels (.dashboard-section, .section-content) blijft
   doorzichtig: geen glas over glas (klacht van 14-08-2026, test_glas_niet_over_glas). Deze klassen staan bewust NIET
   in de lijsten van glas.js of premium-v4.js.

   Alleen bestaande kleurtokens (tokens.css, style.css); test_kleuren_bestaan bewaakt dat. */

.ss-kc-uitleg {
    font-size: var(--tekst-xs);
    color: var(--tekst-zacht);
    margin: 0 0 .7rem;
    line-height: 1.4;
}

.ss-kerncijfers {
    display: grid;
    /* Drie naast elkaar op een breed scherm; staat het blok in een smalle kolom, dan schuiven ze vanzelf onder
       elkaar in plaats van onleesbaar smal te worden. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* .dash-klikbaar (de tegeldeur van 'Mijn verkopen') geeft een kale klikregel een linkerrand, een kleine inspringing
   en een informatietint bij aanwijzen. Op deze tegel hoort dat niet: daarom staat de klasse er hier mee bij, zodat
   deze regels die van style.css overschrijven. */
.ss-kerncijfers .ss-kerncijfer,
.ss-kerncijfers .ss-kerncijfer.dash-klikbaar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 16px 18px;
    text-align: left;
    font: inherit;
    color: var(--tekst);
    background: var(--glas-1);
    border: 0;
    border-radius: var(--rond);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .28), inset 0 0 0 1px var(--lijn);
    cursor: pointer;
    transform: none;
    transition: box-shadow .15s ease;
}

.ss-kerncijfers .ss-kerncijfer:hover,
.ss-kerncijfers .ss-kerncijfer.dash-klikbaar:hover,
.ss-kerncijfers .ss-kerncijfer.dash-klikbaar:focus-visible {
    background: var(--glas-1);
    transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .30), inset 0 0 0 1px var(--lijn-sterk);
}

/* Bovenaan: de ring links, de tekst rechts. */
.ss-kc-boven {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 16px;
    align-items: center;
}

.ss-kc-ring {
    display: block;
    width: 84px;
    height: 84px;
}
.ss-kc-bak {
    fill: none;
    stroke: var(--lijn);
    stroke-width: 9;
}
.ss-kc-vul {
    fill: none;
    stroke: var(--info);
    stroke-width: 9;
    stroke-linecap: round;
}
.ss-kc-vul--af {
    stroke: var(--ok);
}
/* Het gouden streepje: waar je vandaag zou moeten staan. */
.ss-kc-tempo {
    stroke: var(--merk);
    stroke-width: 3;
    stroke-linecap: round;
}
.ss-kc-pct {
    fill: var(--tekst);
    font-size: 17px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Geen doel: een gestippelde cirkel. Nooit een verzonnen doel of een 0. */
.ss-kc-geen-doel {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px dashed var(--lijn-sterk);
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
    color: var(--tekst-uit);
}

.ss-kc-tekst {
    display: block;
    min-width: 0;
}
.ss-kc-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tekst-zacht);
}
/* De categoriekleur van vroeger (de bovenrand), nu als bolletje. */
.ss-kc-stip {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.ss-kc-stip--kia_new { background: var(--midnight); }
.ss-kc-stip--nvd { background: var(--gold); }
.ss-kc-stip--kia_used { background: var(--text-muted); }

.ss-kc-regel {
    display: block;
    margin-top: 6px;
    line-height: 1;
}
.ss-kc-getal {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tekst);
}
.ss-kc-van {
    font-size: 15px;
    font-weight: 600;
    color: var(--tekst-zacht);
}
.ss-kc-stand {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--tekst-zacht);
}

/* Onder de stippellijn: MTD-1 en YTD tegenover YTD-1 (team) of de vorige maand (persoonlijk). */
.ss-kc-vgl {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px 10px;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--lijn);
    font-size: 12.5px;
}
.ss-kc-lab {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tekst-uit);
}
.ss-kc-waarde {
    color: var(--tekst-zacht);
}
.ss-kc-waarde b {
    color: var(--tekst);
    font-variant-numeric: tabular-nums;
}
.ss-kc-vgl-uitleg {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--tekst-uit);
}

/* Het pijltje: tekst met een dunne rand, nooit een gekleurd vlak. */
.ss-kc-pijl {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--lijn);
    border-radius: var(--rond-vol);
    padding: 2px 9px;
}
.ss-kc-pijl--op {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.ss-kc-pijl--neer {
    color: var(--red-tekst);
    border-color: color-mix(in srgb, var(--red-tekst) 40%, transparent);
}
.ss-kc-pijl--gelijk {
    color: var(--tekst-zacht);
}

/* Gsm: de drie tegels onder elkaar, een kleinere ring, het getal blijft groot genoeg om in één oogopslag te lezen. */
@media (max-width: 600px) {
    .ss-kerncijfers {
        grid-template-columns: 1fr;
        gap: .7rem;
    }
    .ss-kerncijfers .ss-kerncijfer,
    .ss-kerncijfers .ss-kerncijfer.dash-klikbaar {
        padding: 13px 14px;
    }
    .ss-kc-boven {
        grid-template-columns: 64px 1fr;
        gap: 12px;
    }
    .ss-kc-ring,
    .ss-kc-geen-doel {
        width: 64px;
        height: 64px;
    }
    .ss-kc-getal {
        font-size: 30px;
    }
}