/* Kabelberekening – professionele, rustige layout (#kb-rapport) */

.kb-pagina.excel-pagina {
    background: #e8ecf1;
}

#kb-rapport {
    --kb-blauw: #164a85;
    --kb-blauw-licht: #2a6cb8;
    --kb-invoer: #faf9f6;
    --kb-invoer-accent: #c9b87a;
    --kb-standaard: #eef1f5;
    --kb-oppervlak: #ffffff;
    --kb-zone: #f6f8fb;
    --kb-rand: #dce2eb;
    --kb-rand-subtle: #e8ecf2;
    --kb-tekst: #2c3a4d;
    --kb-muted: #6b7a8c;
    --kb-radius: 8px;
    --kb-gap: 1rem;
    background: #f8f9fb;
    border: 1px solid var(--kb-rand-subtle);
    box-shadow: 0 1px 3px rgba(22, 74, 133, 0.06), 0 8px 24px rgba(22, 74, 133, 0.04);
    padding: 1.5rem 1.75rem 1.75rem;
}

/* ── Kop ── */
#kb-rapport .blad-kop {
    margin-bottom: 1.35rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--kb-rand);
}

#kb-rapport .blad-titel {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--kb-blauw);
    letter-spacing: -0.02em;
}

/* ── Projectgegevens ── */
#kb-rapport .project-sectie {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem 2rem;
    align-items: end;
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.35rem;
    background: var(--kb-oppervlak);
    border: 1px solid var(--kb-rand);
    border-left: 3px solid var(--kb-blauw);
    border-radius: var(--kb-radius);
    box-shadow: none;
}

#kb-rapport .project-grid {
    grid-column: 1;
    gap: 0.85rem 1.5rem;
}

#kb-rapport .project-grid .veld-groep label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--kb-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#kb-rapport .project-logo {
    grid-column: 2;
    align-self: center;
    height: 52px;
    opacity: 0.92;
}

/* ── Technische parameters ── */
#kb-rapport .kb-meta-sectie {
    margin: 0 0 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--kb-zone);
    border: 1px solid var(--kb-rand-subtle);
    border-radius: var(--kb-radius);
}

#kb-rapport .kb-meta-sectie .meta-rij {
    gap: 0.75rem 1.5rem;
}

#kb-rapport .meta-rij .veld-groep label,
#kb-rapport .veld-groep label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--kb-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Invoervelden – zacht i.p.v. neon-geel ── */
#kb-rapport .veld-geel,
#kb-rapport select.veld-geel {
    background: var(--kb-invoer);
    border: 1px solid var(--kb-rand);
    border-bottom: 2px solid var(--kb-invoer-accent);
    color: var(--kb-tekst);
    border-radius: 5px;
    font-size: 0.92rem;
    padding: 0.42rem 0.6rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#kb-rapport .veld-grijs,
#kb-rapport select.veld-grijs {
    background: var(--kb-standaard);
    border: 1px solid var(--kb-rand);
    color: var(--kb-tekst);
    border-radius: 5px;
    font-size: 0.92rem;
}

#kb-rapport .veld-geel:focus,
#kb-rapport .veld-grijs:focus,
#kb-rapport select.veld-geel:focus,
#kb-rapport select.veld-grijs:focus {
    outline: none;
    border-color: var(--kb-blauw-licht);
    border-bottom-color: var(--kb-blauw);
    box-shadow: 0 0 0 3px rgba(22, 74, 133, 0.1);
}

#kb-rapport .veld-geel::placeholder {
    color: rgba(44, 58, 77, 0.32);
}

/* ── Legenda ── */
#kb-rapport .legenda {
    margin-bottom: 1.1rem;
    padding: 0.45rem 0.75rem;
    background: var(--kb-zone);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--kb-muted);
    gap: 0.5rem 1.25rem;
}

#kb-rapport .legenda .swatch.geel {
    background: var(--kb-invoer);
    border: 1px solid var(--kb-invoer-accent);
}

#kb-rapport .legenda .swatch.grijs {
    background: var(--kb-standaard);
}

/* ── Secties ── */
#kb-rapport .goot-sectie {
    margin-bottom: 1.35rem;
    padding: 1.25rem 1.35rem 1.4rem;
    background: var(--kb-oppervlak);
    border: 1px solid var(--kb-rand);
    border-radius: var(--kb-radius);
    box-shadow: none;
}

#kb-rapport .sectie-kop {
    margin-bottom: 1.1rem;
}

#kb-rapport .sectie-titel {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kb-blauw);
    margin: 0 0 0.2rem;
}

#kb-rapport .sectie-oms {
    font-size: 0.82rem;
    color: var(--kb-muted);
    margin: 0;
    line-height: 1.45;
}

#kb-rapport .kb-bereken-acties .ks-acties {
    padding: 0.5rem 0.65rem;
    background: var(--kb-zone);
    border: 1px solid var(--kb-rand-subtle);
    border-radius: 6px;
    gap: 0.35rem;
}

#kb-rapport .kb-bereken-acties .ks-knop {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
    border-radius: 5px;
}

#kb-rapport .kb-bereken-acties .ks-knop--primair {
    background: var(--kb-blauw);
    border-color: var(--kb-blauw);
}

/* ── Invoerzones ── */
.kb-invoer-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.kb-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.35rem;
    align-items: flex-end;
    padding: 0.85rem 1rem;
    background: var(--kb-zone);
    border: 1px solid var(--kb-rand-subtle);
    border-radius: 6px;
}

.kb-zone:last-child {
    padding-bottom: 0.85rem;
}

.kb-zone[data-zone="installatie"] {
    flex: 1 1 100%;
    background: var(--kb-oppervlak);
    border-color: var(--kb-rand);
}

.kb-zone[data-zone="installatie"] .veld-groep {
    flex: 1;
    min-width: min(100%, 18rem);
}

.kb-zone[data-zone="uitgangspunt"] {
    flex: 1 1 100%;
    background: transparent;
    border: none;
    padding: 0.25rem 0 0;
}

.kb-zone .veld-groep select.veld-geel,
.kb-zone .veld-groep select.veld-grijs,
#kb-rapport .meta-rij select.veld-geel,
#kb-rapport .meta-rij select.veld-grijs {
    width: 100%;
    max-width: none;
}

#kb-rapport .veld-groep.veld-breed {
    flex: 1 1 100%;
    max-width: none;
}

/* Uitgangspunt / materiaal – segmentatie */
#kb-rapport .segmentatie-groep {
    flex: 1 1 100%;
    gap: 0.45rem;
}

#kb-rapport .segmentatie-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--kb-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#kb-rapport .segmentatie-keuze {
    background: var(--kb-standaard);
    border: 1px solid var(--kb-rand);
    border-radius: 6px;
    padding: 0.2rem;
    gap: 0.2rem;
}

#kb-rapport .segmentatie-knop {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    color: var(--kb-muted);
}

#kb-rapport .segmentatie-optie input:checked + .segmentatie-knop {
    background: var(--kb-oppervlak);
    color: var(--kb-blauw);
    box-shadow: 0 1px 2px rgba(22, 74, 133, 0.1);
}

#kb-rapport .veld-groep[data-type="checkbox"] {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    padding-top: 1.1rem;
}

#kb-rapport .veld-groep[data-type="checkbox"] label {
    margin: 0;
    text-transform: none;
    font-size: 0.82rem;
}

/* Patroon alleen bij smeltveiligheid gG */
#kb-invoer:not([data-veiligheid="gG"]) .veld-groep[data-alleen-gg],
.veld-groep[data-alleen-gg][hidden] {
    display: none !important;
}

/* Invoermodus – zichtbaarheid */
#kb-invoer[data-modus="vermogen"] .veld-groep[data-modus]:not([data-modus~="vermogen"]),
#kb-invoer[data-modus="ib"] .veld-groep[data-modus]:not([data-modus~="ib"]),
#kb-invoer[data-modus="ibth"] .veld-groep[data-modus]:not([data-modus~="ibth"]),
#kb-invoer[data-modus="in"] .veld-groep[data-modus]:not([data-modus~="in"]),
#kb-invoer[data-modus="do"] .veld-groep[data-modus]:not([data-modus~="do"]),
#kb-invoer[data-modus="motor"] .veld-groep[data-modus]:not([data-modus~="motor"]) {
    display: none;
}

/* ── Resultaat ── */
#kb-rapport .kb-resultaat-sectie {
    padding-top: 0.25rem;
}

#kb-rapport .kb-resultaat-sectie .sectie-titel {
    margin-bottom: 0.85rem;
}

.kb-resultaat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 2rem;
    padding: 1rem 1.15rem;
    background: var(--kb-zone);
    border: 1px solid var(--kb-rand-subtle);
    border-radius: var(--kb-radius);
}

.kb-resultaat-kolom {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kb-resultaat-kolom:first-child {
    padding-right: 1rem;
    border-right: 1px solid var(--kb-rand-subtle);
}

.kb-resultaat-rij {
    display: grid;
    grid-template-columns: minmax(8rem, 1.3fr) auto minmax(4rem, 0.9fr);
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.28rem 0.4rem;
    font-size: 0.82rem;
    border-radius: 4px;
}

.kb-resultaat-rij:nth-child(odd) {
    background: rgba(255, 255, 255, 0.55);
}

.kb-resultaat-label {
    color: var(--kb-muted);
    font-weight: 500;
}

.kb-resultaat-eq {
    color: #94a3b8;
    font-weight: 500;
}

.kb-resultaat-rij[data-wrap] {
    grid-template-columns: minmax(8rem, 1.3fr) auto 1fr;
}

.kb-resultaat-rij[data-wrap] .waarde {
    text-align: left;
    font-size: 0.78rem;
}

.kb-resultaat-rij .waarde.vet {
    font-weight: 600;
    color: var(--kb-blauw);
}

/* ── Controles ── */
#kb-rapport .kb-controles {
    margin: 1.15rem 0 0.5rem;
}

.kb-controles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.85rem;
}

.kb-controle-item {
    padding: 0.45rem 0.65rem 0.45rem 1.75rem;
    font-size: 0.78rem;
    line-height: 1.35;
    position: relative;
    border-radius: 6px;
    background: var(--kb-oppervlak);
    border: 1px solid var(--kb-rand);
}

.kb-controle-item::before {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: 0.85rem;
}

.kb-controle-item[data-status="ok"] {
    color: #2e5c32;
    background: #f4faf5;
    border-color: #c5e1c8;
}

.kb-controle-item[data-status="ok"]::before {
    content: '✓';
    color: #3d8b47;
}

.kb-controle-item[data-status="kritiek"] {
    color: #8b3a3a;
    background: #fdf6f6;
    border-color: #e8c4c4;
}

.kb-controle-item[data-status="kritiek"]::before {
    content: '✗';
    color: #c45c5c;
}

/* ── Footer ── */
#kb-rapport .gewicht-balk {
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--kb-rand-subtle);
    color: var(--kb-muted);
    font-size: 0.78rem;
}

@media (max-width: 760px) {
    #kb-rapport {
        padding: 1rem 1.1rem;
    }

    #kb-rapport .project-sectie {
        grid-template-columns: 1fr;
    }

    #kb-rapport .project-logo {
        grid-column: 1;
        justify-self: start;
        height: 44px;
    }

    .kb-resultaat-grid {
        grid-template-columns: 1fr;
    }

    .kb-resultaat-kolom:first-child {
        padding-right: 0;
        border-right: none;
        padding-bottom: 0.65rem;
        border-bottom: 1px solid var(--kb-rand-subtle);
    }

    .kb-controles-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .kb-bereken-acties {
        display: none;
    }

    .kb-pagina.excel-pagina {
        background: #fff;
    }

    #kb-rapport {
        box-shadow: none;
        border: none;
    }
}