.administratie-details { display: flex; min-height: 0; flex-direction: column; }
.administratie-details > header,
.administratie-detailtabs { flex: 0 0 auto; }
.administratie-details-scroll { min-height: 0; height: auto; flex: 1 1 auto; }

.administratie-detailtabs {
    display: grid;
    height: 42px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid #b8b8b8;
    background: #fff;
}

.administratie-detailtabs button {
    position: relative;
    border: 0;
    color: #424242;
    background: transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.administratie-detailtabs button:hover:not(:disabled) { background: #f3f7f5; }
.administratie-detailtabs button:focus-visible { z-index: 1; outline: 2px solid #0f6cbd; outline-offset: -2px; }
.administratie-detailtabs button.actief { color: var(--primair); }
.administratie-detailtabs button.actief::after {
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    height: 3px;
    background: var(--primair);
    content: "";
}
.administratie-detailtabs button:disabled { color: #a19f9d; cursor: default; }

.staat-historie { min-height: 100%; background: #fafafa; }
.staat-historie > header { padding: 16px 16px 12px; border-bottom: 1px solid var(--lijn); background: #fff; }
.staat-historie > header h3 { margin: 0; font-size: 16px; }
.staat-historie > header p { margin: 3px 0 0; overflow: hidden; color: var(--subtiel); text-overflow: ellipsis; white-space: nowrap; }

.staat-historie-lijst { margin: 0; padding: 10px 14px 26px 34px; list-style: none; }
.staat-historie-lijst > li { position: relative; padding: 8px 0 13px 16px; border-left: 1px solid #b8b8b8; }
.staat-historie-lijst > li:last-child { border-left-color: transparent; }
.staat-historie-punt {
    position: absolute;
    top: 14px;
    left: -5px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--primair);
    box-shadow: 0 0 0 1px var(--primair);
}

.staat-historie-lijst article { padding: 10px 11px; border: 1px solid #d1d1d1; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px #0000000a; }
.staat-historie-lijst article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.staat-historie-lijst article > header strong { min-width: 0; line-height: 1.35; }
.staat-historie-status { flex: 0 0 auto; padding: 2px 5px; border: 1px solid #d1d1d1; color: #4b4b4b; background: #f5f5f5; font-size: 10px; white-space: nowrap; }
.staat-historie-status.gereed { border-color: #9fd5b6; color: #0b5a28; background: #e8f5ed; }
.staat-historie-status.aandacht { border-color: #dbc37c; color: #654b00; background: #fff7d6; }
.staat-historie-status.afgewezen { border-color: #e4a7a7; color: #a4262c; background: #fdecec; }
.staat-historie-actor { margin: 5px 0 1px; overflow-wrap: anywhere; color: #424242; font-size: 12px; }
.staat-historie-lijst article > small { color: var(--subtiel); font-size: 11px; }
.staat-historie-meta { margin: 7px 0 0; color: var(--subtiel); font-size: 11px; }
.staat-historie-doel { display: grid; gap: 1px; margin: 8px 0 0; padding-top: 7px; border-top: 1px solid #ededed; }
.staat-historie-doel strong { color: var(--subtiel); font-size: 10px; text-transform: uppercase; }
.staat-historie-doel span { overflow-wrap: anywhere; }
.staat-historie-toelichting { margin: 8px 0 0; padding: 7px 8px; border-left: 3px solid #8a8886; color: #424242; background: #f5f5f5; line-height: 1.4; }

.staat-historie-leeg { padding: 36px 22px; text-align: center; }
.staat-historie-leeg strong { display: block; }
.staat-historie-leeg p { margin: 5px 0 0; color: var(--subtiel); line-height: 1.45; }
.staat-historie-laden { padding: 18px 16px; }
.staat-historie-laden > p { margin: 0 0 14px; color: var(--subtiel); }
.staat-historie-skelet { display: grid; gap: 7px; margin-bottom: 10px; padding: 13px; border: 1px solid #e1e1e1; background: #fff; }
.staat-historie-skelet span { display: block; height: 10px; background: #e9e9e9; animation: staat-historie-puls 1.2s ease-in-out infinite alternate; }
.staat-historie-skelet span:last-child { width: 62%; height: 8px; }

@keyframes staat-historie-puls { to { opacity: .48; } }

@media (max-width: 900px) {
    .administratie-detailtabs { height: 46px; }
    .staat-historie-lijst { padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .staat-historie-skelet span { animation: none; }
}