.factuur-tabelkader {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
    border: 1px solid var(--lijn);
}
.factuur-tabelkader table { min-width: 1480px; }
.factuur-tabelkader th { background: #f3f3f3; border-right: 1px solid #b8b8b8; white-space: nowrap; }
.factuur-tabelkader td { border-right: 1px solid #c8c8c8; }
.factuur-tabelkader th:last-child, .factuur-tabelkader td:last-child { border-right: 0; }
.factuur-rij.betaald { background: #f3faf6; }

.factuur-acties {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 210px;
}

.factuur-detailrij > td {
    padding: 0 !important;
    border-right: 0;
    background: #fafafa;
}

.betaling-historie { padding: 14px 16px; border-bottom: 1px solid var(--lijn); }
.betaling-historie h4 { margin: 0 0 10px; font-size: 14px; }

.betaling-kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.betaling-kaart { border: 1px solid #c8c8c8; border-radius: 4px; background: #fff; padding: 10px 12px; }
.betaling-kaart > div { display: flex; justify-content: space-between; gap: 12px; }
.betaling-kaart time { color: var(--subtiel); white-space: nowrap; }
.betaling-kaart dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); margin: 8px 0 0; }
.betaling-kaart dt, .betaling-kaart dd { margin: 0; padding: 3px 0; overflow-wrap: anywhere; }
.betaling-kaart dt { color: var(--subtiel); font-size: 12px; }

.betaling-editor { padding: 14px 16px 16px; border-left: 3px solid var(--groen); background: #f3faf6; }
.betaling-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.betaling-editor h4, .betaling-editor p { margin: 0 0 4px; }

.betaling-formulier {
    display: grid;
    grid-template-columns: minmax(130px, .7fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(220px, 1.2fr) minmax(220px, 1.2fr);
    gap: 10px;
    margin-top: 12px;
}

.betaling-veld { display: grid; gap: 4px; min-width: 0; }
.betaling-veld > span { color: #323130; font-size: 12px; font-weight: 650; }
.betaling-veld input {
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    border: 1px solid #8a8886;
    border-radius: 2px;
    background: #fff;
    padding: 6px 9px;
}
.betaling-veld input:focus { border-color: var(--groen); outline: 2px solid rgba(18, 107, 66, .22); outline-offset: 0; }
.betaling-veld input:disabled { color: #605e5c; background: #f3f2f1; }
.betaling-fout { max-width: none; margin-top: 10px !important; padding: 9px 11px; }
.betaling-acties { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.betaling-acties button { min-height: 40px; }

.creditfactuur-editor { padding: 14px 16px 16px; border-left: 3px solid #0078d4; background: #f5f9fd; }
.creditfactuur-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.creditfactuur-editor h4, .creditfactuur-editor p { margin: 0 0 4px; }
.creditfactuur-formulier {
    display: grid;
    grid-template-columns: minmax(160px, .35fr) minmax(320px, 1fr);
    gap: 10px;
    margin-top: 12px;
}
.creditfactuur-reden textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 76px;
    resize: vertical;
    border: 1px solid #8a8886;
    border-radius: 2px;
    padding: 7px 9px;
    font: inherit;
}
.creditfactuur-reden textarea:focus { border-color: #0078d4; outline: 2px solid rgba(0, 120, 212, .2); }
.creditfactuur-fout { max-width: none; margin-top: 10px !important; padding: 10px 12px; line-height: 1.45; }
.creditfactuur-kaart dd button { min-height: 32px; }

.licentie-aanbodformulier {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(220px, .7fr) auto;
    align-items: end;
    gap: 12px;
    max-width: 980px;
    margin-bottom: 14px;
}

.licentie-inkooptabel {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
    border: 1px solid var(--lijn);
}

.licentie-inkooptabel table { width: 100%; min-width: 920px; border-collapse: collapse; }
.licentie-inkooptabel th, .licentie-inkooptabel td {
    border-right: 1px solid #c8c8c8;
    border-bottom: 1px solid var(--lijn);
    padding: 9px 10px;
    text-align: left;
    vertical-align: middle;
}
.licentie-inkooptabel th { background: #f3f3f3; white-space: nowrap; }
.licentie-inkooptabel th:last-child, .licentie-inkooptabel td:last-child { border-right: 0; }
.licentie-inkooptabel td small { display: block; margin-top: 2px; color: var(--subtiel); }
.licentie-inkopenlijst > header > div p { margin: 2px 0 0; color: var(--subtiel); font-size: 12px; }

.licentie-inkoopcommandobalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 14px 0;
    border-block: 1px solid var(--lijn);
    background: #f7f7f7;
    padding: 10px 12px;
}
.licentie-inkoopcommandobalk strong, .licentie-inkoopcommandobalk span { display: block; }
.licentie-inkoopcommandobalk span { margin-top: 2px; color: var(--subtiel); font-size: 12px; }

.licentie-inkoopeditor {
    margin: 14px 0 20px;
    border: 1px solid #9d9d9d;
    border-left: 3px solid var(--groen);
    background: #fbfdfc;
    padding: 16px;
}
.licentie-inkoopeditor > header { display: flex; justify-content: space-between; gap: 16px; }
.licentie-inkoopeditor h3, .licentie-inkoopeditor p { margin: 0 0 4px; }
.licentie-inkoopkern { display: grid; grid-template-columns: 1.3fr 1.5fr .55fr; gap: 10px; margin-top: 14px; }
.licentie-inkoopveld { display: grid; align-content: start; gap: 4px; min-width: 0; }
.licentie-inkoopveld > span { color: #323130; font-size: 12px; font-weight: 650; }
.licentie-inkoopveld input, .licentie-inkoopveld select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border: 1px solid #8a8886;
    border-radius: 2px;
    background: #fff;
    padding: 6px 9px;
}
.licentie-inkoopveld input:focus, .licentie-inkoopveld select:focus {
    border-color: var(--groen);
    outline: 2px solid rgba(18, 107, 66, .22);
}
.licentie-inkoopsom { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); margin-top: 12px; border: 1px solid var(--lijn); }
.licentie-inkoopsom > div { border-right: 1px solid var(--lijn); padding: 9px 11px; }
.licentie-inkoopsom > div:last-child { border-right: 0; }
.licentie-inkoopsom span, .licentie-inkoopsom strong { display: block; overflow-wrap: anywhere; }
.licentie-inkoopsom span { color: var(--subtiel); font-size: 11px; }
.licentie-factuurcontrole { margin-top: 14px; border: 1px solid var(--lijn); border-left: 3px solid #0078d4; background: #f5f9fd; padding: 12px; }
.licentie-factuurcontrole h4, .licentie-factuurcontrole p { margin: 0 0 4px; }
.licentie-factuurcontrole > header p { color: var(--subtiel); }
.licentie-factuurcontrole dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 0; }
.licentie-factuurcontrole dl > div { min-width: 0; border-right: 1px solid var(--lijn); padding: 3px 10px; }
.licentie-factuurcontrole dl > div:first-child { padding-left: 0; }
.licentie-factuurcontrole dl > div:last-child { border-right: 0; }
.licentie-factuurcontrole dt, .licentie-factuurcontrole dd { margin: 0; overflow-wrap: anywhere; }
.licentie-factuurcontrole dt { color: var(--subtiel); font-size: 11px; }
.licentie-factuurcontrole dd { margin-top: 3px; font-weight: 650; }
.licentie-routering { min-width: 0; margin: 14px 0 0; border: 1px solid #c8c8c8; padding: 12px; }
.licentie-routering legend { padding: 0 6px; font-weight: 650; }
.licentie-routering > div { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.licentie-bevestiging { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 650; }
.licentie-bevestiging input { width: 18px; height: 18px; accent-color: var(--groen); }
.licentie-inkoopreden { max-width: 720px; margin-top: 12px; }
.licentie-inkoopfout { max-width: none; margin-top: 10px !important; padding: 9px 11px; }
.licentie-inkoopeditor > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.historische-abonnementen { opacity: .94; }
.historische-abonnementen > header > div p { margin: 2px 0 0; color: var(--subtiel); }

@media (max-width: 720px) {
    .factuur-tabelkader { border-left: 0; border-right: 0; }
    .betaling-kaarten { grid-template-columns: 1fr; }
    .betaling-formulier { grid-template-columns: 1fr; }
    .creditfactuur-formulier { grid-template-columns: 1fr; }
    .betaling-editor > header, .creditfactuur-editor > header { align-items: stretch; flex-direction: column; }
    .betaling-acties { align-items: stretch; flex-direction: column-reverse; }
    .betaling-acties button { min-height: 44px; width: 100%; }
    .licentie-aanbodformulier, .licentie-inkoopkern, .licentie-routering > div, .licentie-factuurcontrole dl,
    .licentie-inkoopsom { grid-template-columns: 1fr; }
    .licentie-inkoopcommandobalk, .licentie-inkoopeditor > header { align-items: stretch; flex-direction: column; }
    .licentie-inkoopsom > div { border-right: 0; border-bottom: 1px solid var(--lijn); }
    .licentie-inkoopsom > div:last-child { border-bottom: 0; }
    .licentie-inkoopeditor { margin-inline: -8px; padding: 14px 12px; }
    .licentie-inkoopeditor > footer { flex-direction: column-reverse; }
    .licentie-inkoopeditor > footer button, .licentie-inkoopcommandobalk button { width: 100%; min-height: 44px; }
}

@media (max-width: 900px) {
    .organisatie-sectie .factuur-tabelkader { overflow-x: auto; border: 1px solid var(--lijn); }
    .organisatie-sectie .factuur-tabelkader table { display: table; width: 100%; min-width: 1480px; }
    .organisatie-sectie .factuur-tabelkader thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .organisatie-sectie .factuur-tabelkader tbody { display: table-row-group; }
    .organisatie-sectie .factuur-tabelkader tr { display: table-row; margin: 0; border: 0; padding: 0; }
    .organisatie-sectie .factuur-rij td {
        display: table-cell;
        min-width: 110px;
        padding: 9px 10px;
        text-align: left;
    }
    .organisatie-sectie .factuur-rij td::before { content: none; }
    .organisatie-sectie .factuur-detailrij { display: table-row; margin: 0; padding: 0; }
    .organisatie-sectie .factuur-detailrij > td { display: table-cell; padding: 0; }
    .organisatie-sectie .factuur-detailrij > td::before { display: none; }
    .organisatie-sectie .factuur-detailrij .creditfactuur-editor,
    .organisatie-sectie .factuur-detailrij .creditfactuur-historie {
        box-sizing: border-box;
        position: sticky;
        left: 0;
        width: calc(100vw - 34px);
        max-width: calc(100vw - 34px);
    }
    .factuur-acties { min-width: 0; flex-wrap: wrap; }
    .licentie-inkooptabel { overflow: visible; border: 0; }
    .licentie-inkooptabel table, .licentie-inkooptabel tbody { display: block; min-width: 0; }
    .licentie-inkooptabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .licentie-inkooptabel tr { display: block; margin-bottom: 10px; border: 1px solid var(--lijn); background: #fff; }
    .licentie-inkooptabel td {
        display: grid;
        grid-template-columns: minmax(108px, .42fr) minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-width: 0;
        border-right: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .licentie-inkooptabel td::before {
        content: attr(data-label);
        color: var(--subtiel);
        font-size: 11px;
        font-weight: 650;
    }
}