/* Herbruikbaar diagonaal lijnenpatroon (profiel-hero / Nova-kaarten) */

.pn-line-pattern {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.pn-line-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(15, 107, 86, 0.04) 0%, rgba(56, 189, 248, 0.08) 100%),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 18px,
            rgba(15, 107, 86, 0.06) 18px,
            rgba(15, 107, 86, 0.06) 19px
        ),
        repeating-linear-gradient(
            78deg,
            transparent,
            transparent 28px,
            rgba(56, 189, 248, 0.07) 28px,
            rgba(56, 189, 248, 0.07) 29px
        );
}

.pn-line-pattern > * {
    position: relative;
    z-index: 1;
}

/* Optioneel: witte kaart met rand (Nova-panelen) */
.pn-line-pattern--card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d8e2df);
    border-radius: 14px;
    box-shadow: var(--shadow, 0 1px 3px rgba(26, 46, 40, 0.08));
}

/* Lichtere variant op gekleurde achtergronden */
.pn-line-pattern--soft::before {
    opacity: 0.85;
}

/* Scrollbare vlakken (chat): patroon groeit mee met inhoud */
.pn-line-pattern--scroll {
    --pn-line-bg-color: var(--surface, #f8fbfa);
    background-color: var(--pn-line-bg-color);
    background-image:
        linear-gradient(135deg, rgba(15, 107, 86, 0.04) 0%, rgba(56, 189, 248, 0.08) 100%),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 18px,
            rgba(15, 107, 86, 0.06) 18px,
            rgba(15, 107, 86, 0.06) 19px
        ),
        repeating-linear-gradient(
            78deg,
            transparent,
            transparent 28px,
            rgba(56, 189, 248, 0.07) 28px,
            rgba(56, 189, 248, 0.07) 29px
        );
    background-attachment: local, local, local;
}

.pn-line-pattern--scroll.pn-line-pattern--soft {
    background-image:
        linear-gradient(135deg, rgba(15, 107, 86, 0.034) 0%, rgba(56, 189, 248, 0.068) 100%),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 18px,
            rgba(15, 107, 86, 0.051) 18px,
            rgba(15, 107, 86, 0.051) 19px
        ),
        repeating-linear-gradient(
            78deg,
            transparent,
            transparent 28px,
            rgba(56, 189, 248, 0.06) 28px,
            rgba(56, 189, 248, 0.06) 29px
        );
}

/* Lessen & examens: zelfde lijnen als profiel, duidelijker op wit */
.pn-line-pattern--lesson {
    background-color: var(--surface, #f8fbfa);
    background-image:
        linear-gradient(135deg, rgba(15, 107, 86, 0.06) 0%, rgba(56, 189, 248, 0.11) 100%),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 18px,
            rgba(15, 107, 86, 0.11) 18px,
            rgba(15, 107, 86, 0.11) 19px
        ),
        repeating-linear-gradient(
            78deg,
            transparent,
            transparent 28px,
            rgba(56, 189, 248, 0.12) 28px,
            rgba(56, 189, 248, 0.12) 29px
        );
}

.pn-line-pattern--lesson::before {
    display: none;
}

/* Donkergroene vlakken: sidebar, chat-topbalk */
.pn-line-pattern.pn-line-pattern--on-green::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(130, 220, 185, 0.06) 100%),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 18px,
            rgba(255, 255, 255, 0.1) 18px,
            rgba(255, 255, 255, 0.1) 19px
        ),
        repeating-linear-gradient(
            78deg,
            transparent,
            transparent 28px,
            rgba(120, 210, 175, 0.16) 28px,
            rgba(120, 210, 175, 0.16) 29px
        );
    opacity: 1;
}