.hulpvragen-pagina,
.beheer-hulpvragen {
    min-width: 0;
}

.hulpvragen-pagina {
    padding: 28px clamp(16px, 3vw, 48px) 40px;
}

.hulpvragen-pagina > header,
.beheer-hulpvragen > section > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.hulpvragen-pagina h1,
.hulpvragen-pagina h2,
.beheer-hulpvragen h2,
.beheer-hulpvraag-detail h2 {
    margin: 0;
}

.hulpvragen-pagina > header > p,
.hulpvraag-formulier > p,
.hulpvraag-lijst > header p,
.beheer-hulpvragen header p,
.beheer-hulpvraag-detail p {
    color: var(--neutral-foreground-rest, #4d4d4d);
    line-height: 1.5;
}

.hulpvragen-inhoud,
.beheer-hulpvragen {
    display: grid;
    grid-template-columns: minmax(300px, 410px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.hulpvraag-formulier,
.hulpvraag-lijst,
.beheer-hulpvragen-lijst,
.beheer-hulpvraag-detail {
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 6px;
    background: var(--neutral-layer-1, #fff);
    padding: 20px;
}

.hulpvraag-formulier,
.beheer-hulpvraag-detail {
    display: grid;
    gap: 14px;
}

.hulpvraag-formulier .tekstveld,
.beheer-hulpvraag-reactie {
    display: grid;
    gap: 6px;
}

.hulpvraag-formulier textarea,
.beheer-hulpvraag-reactie textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 148px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-strong, #777);
    border-radius: 4px;
    font: inherit;
    line-height: 1.45;
}

.hulpvraag-formulier small,
.beheer-hulpvraag-detail small,
.beheer-hulpvragen-tabelkader small {
    display: block;
    color: var(--neutral-foreground-hint, #666);
    overflow-wrap: anywhere;
}

.hulpvraag-kaart {
    border-top: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    padding: 16px 0;
}

.hulpvraag-kaart header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.hulpvraag-kaart h3 {
    margin: 0 0 4px;
}

.hulpvraag-tekst,
.hulpvraag-reactie p,
.beheer-hulpvraag-bericht p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hulpvraag-reactie,
.beheer-hulpvraag-bericht {
    margin-top: 12px;
    padding: 12px;
    border-left: 3px solid var(--primair, #126b42);
    background: var(--neutral-layer-2, #f7f7f7);
}

.hulpvraag-reactie p,
.beheer-hulpvraag-bericht p {
    margin: 8px 0 0;
}

.beheer-hulpvragen-tabelkader {
    overflow-x: auto;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
}

.beheer-hulpvragen-tabelkader table {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
}

.beheer-hulpvragen-tabelkader th,
.beheer-hulpvragen-tabelkader td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    text-align: left;
    vertical-align: top;
}

.beheer-hulpvragen-tabelkader tr.actief td {
    background: color-mix(in srgb, var(--primair, #126b42) 8%, white);
}

.beheer-hulpvraag-detail dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 12px;
    margin: 0;
}

.beheer-hulpvraag-detail dt {
    font-weight: 600;
}

.beheer-hulpvraag-detail dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.hulpvraag-formulier .foutmelding,
.beheer-hulpvraag-detail .foutmelding {
    padding: 10px 12px;
    border-left: 3px solid #c50f1f;
    background: #fdf2f2;
    color: #8a0000;
}

.hulpvraag-formulier .succesmelding,
.beheer-hulpvraag-detail .succesmelding {
    padding: 10px 12px;
    border-left: 3px solid var(--primair, #126b42);
    background: #eff8f2;
}

.lege-status {
    padding: 18px 0 2px;
    color: var(--neutral-foreground-hint, #666);
}

@media (max-width: 900px) {
    .hulpvragen-pagina {
        padding: 20px 16px 28px;
    }

    .hulpvragen-inhoud,
    .beheer-hulpvragen {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .hulpvragen-pagina > header,
    .beheer-hulpvragen > section > header,
    .hulpvraag-kaart header {
        align-items: stretch;
        flex-direction: column;
    }

    .hulpvraag-formulier,
    .hulpvraag-lijst,
    .beheer-hulpvragen-lijst,
    .beheer-hulpvraag-detail {
        padding: 16px;
    }
}