/*!
 * KoersGrafiek - stijl
 * Eigen implementatie Geld.nl / Finance Network, geen code van derden.
 *
 * Kleuren aanpassen: overschrijf de --kg-* variabelen op .kg of op een ouder-element,
 * bijvoorbeeld: .mijn-site .kg { --kg-achtergrond: #155271; }
 * of vanuit JavaScript met grafiek.setKleuren({ achtergrond: '#155271' }).
 */
.kg {
    --kg-achtergrond: #3677B6;
    --kg-lijn: #ffffff;
    --kg-lijn-dikte: 1px;
    --kg-vlak: #9cc3e6;
    --kg-vlak-dekking: 0.75;
    --kg-grid: #679ECA;
    --kg-as: #ffffff;
    --kg-label: #ffffff;
    --kg-label-grootte: 15px;
    --kg-font: Arial, Helvetica, sans-serif;
    --kg-marker: #ffffff;
    --kg-crosshair: rgba(255, 255, 255, 0.6);
    --kg-selectie: rgba(51, 92, 173, 0.25);
    --kg-tooltip-achtergrond: rgba(247, 247, 247, 0.92);
    --kg-tooltip-tekst: #333333;
    --kg-tooltip-rand: #3677B6;
    --kg-knop-achtergrond: #ffffff;
    --kg-knop-tekst: #3677B6;
    --kg-focus: #ffffff;
    position: relative;
    font-family: var(--kg-font);
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

    .kg:focus-visible {
        box-shadow: inset 0 0 0 2px var(--kg-focus);
    }

.kg-svg {
    display: block;
    width: 100%;
    overflow: hidden;
    cursor: crosshair;
}

.kg-achtergrond {
    fill: var(--kg-achtergrond);
}

.kg-grid line {
    stroke: var(--kg-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

    .kg-grid .kg-grid-verticaal {
        stroke: var(--kg-grid-verticaal, var(--kg-grid));
    }

.kg-vlak {
    fill: var(--kg-vlak);
    fill-opacity: var(--kg-vlak-dekking);
}

.kg-lijn {
    fill: none;
    stroke: var(--kg-lijn);
    stroke-width: var(--kg-lijn-dikte);
    stroke-linejoin: round;
    stroke-linecap: round;
}

.kg-x-as {
    stroke: var(--kg-as);
    stroke-width: 2;
}

.kg-x-labels text,
.kg-y-labels text {
    fill: var(--kg-label);
    font-size: var(--kg-label-grootte);
}

.kg-crosshair {
    stroke: var(--kg-crosshair);
    stroke-width: 1;
    shape-rendering: crispEdges;
    pointer-events: none;
}

.kg-marker {
    fill: var(--kg-marker);
    stroke: var(--kg-achtergrond);
    stroke-width: 1;
    pointer-events: none;
}

.kg-selectie {
    fill: var(--kg-selectie);
    pointer-events: none;
}

.kg-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 6px 10px;
    background: var(--kg-tooltip-achtergrond);
    color: var(--kg-tooltip-tekst);
    border: 1px solid var(--kg-tooltip-rand);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    font-size: 15px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}

.kg-tooltip-kop {
    font-size: 13px;
}

.kg-tooltip-bol {
    color: var(--kg-tooltip-rand);
}

.kg-reset {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 5px 10px;
    border: 0;
    border-radius: 3px;
    background: var(--kg-knop-achtergrond);
    color: var(--kg-knop-tekst);
    font: 13px var(--kg-font);
    cursor: pointer;
}

    .kg-reset:focus-visible {
        outline: 2px solid var(--kg-focus);
        outline-offset: 2px;
    }

.kg-melding {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 40px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: var(--kg-label);
    font-size: 15px;
    text-align: center;
    pointer-events: none;
}

.kg--laden .kg-svg {
    opacity: 0.6;
    transition: opacity 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    .kg--laden .kg-svg {
        transition: none;
    }
}