:root {
    --admin-bg: #eef2f5;
    --admin-ink: #111c27;
    --admin-muted: #66727e;
    --admin-line: #d9e1e8;
    --admin-card: #ffffff;
    --admin-soft: #f7f9fb;
    --admin-yellow: #f8c05a;
    --admin-green: #176f4d;
    --admin-blue: #2366a8;
    --admin-red: #b94134;
    --admin-shadow: 0 18px 50px rgba(15, 27, 40, .12);
}

.admin-command-strip,
.admin-focus-grid,
.client-guidance,
.client-assurance,
.professional-grid,
.security-band,
.driver-workflow {
    letter-spacing: 0;
}

.admin-command-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: -6px 0 18px;
}

.admin-command-strip article {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 76px;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 8px;
    padding: 13px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 249, 251, .9));
    box-shadow: 0 10px 30px rgba(15, 27, 40, .1);
}

.admin-command-strip article > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #101923;
    background: var(--admin-yellow);
    font-weight: 950;
}

.admin-command-strip strong,
.admin-focus-grid strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}

.admin-command-strip small,
.admin-focus-grid small {
    display: block;
    color: var(--admin-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.admin-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.admin-focus-grid article {
    border: 1px solid var(--admin-line);
    border-left: 5px solid var(--admin-yellow);
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 27, 40, .08);
}

.admin-focus-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--admin-green);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.system-health-card {
    margin-bottom: 16px;
}

.control-room-card {
    margin-bottom: 16px;
}

.ultimate-control-room {
    margin-bottom: 16px;
}

.control-room-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.control-room-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid #b4b9be;
    background: #b4b9be;
}

.control-room-grid .empty-state {
    grid-column: 1 / -1;
    margin: 0;
}

.control-room-tile {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 5px;
    min-height: 112px;
    border: 0;
    padding: 12px;
    border-left: 5px solid #8793a0;
    background: linear-gradient(#fff, #e8ebee);
    text-align: left;
    cursor: default;
}

.control-room-tile.good {
    border-left-color: #176f4d;
}

.control-room-tile.warn {
    border-left-color: #c48916;
}

.control-room-tile.danger {
    border-left-color: #b94134;
}

.control-room-tile span {
    min-width: 0;
    overflow: hidden;
    color: #5b6269;
    font-size: 10px;
    font-weight: 950;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.control-room-tile strong {
    overflow: hidden;
    color: #15202b;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.control-room-tile small {
    min-width: 0;
    color: #53606c;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.ultimate-control-grid {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.cc-hero {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(300px, 1fr) minmax(320px, 1.1fr);
    gap: 1px;
    border: 1px solid #8e969d;
    background: #8e969d;
}

.cc-command-status,
.cc-radar,
.cc-alarm-strip {
    min-width: 0;
    background: linear-gradient(#f9fafb, #dfe3e7);
}

.cc-command-status {
    display: grid;
    align-content: center;
    gap: 5px;
    border-left: 6px solid #176f4d;
    padding: 16px;
}

.cc-hero.warn .cc-command-status {
    border-left-color: #c48916;
}

.cc-hero.danger .cc-command-status {
    border-left-color: #b94134;
}

.cc-command-status span,
.cc-panel header span {
    color: #59636d;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.cc-command-status strong {
    color: #111820;
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}

.cc-command-status small {
    color: #4f5b66;
    font-size: 12px;
    font-weight: 850;
}

.cc-radar {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
}

.cc-radar-ring {
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#176f4d var(--cc-progress), #cbd3d9 0deg);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
    position: relative;
}

.cc-radar-ring::before {
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: linear-gradient(#fff, #edf0f2);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.16);
}

.cc-radar-ring b,
.cc-radar-ring span {
    position: relative;
    z-index: 1;
}

.cc-radar-ring b {
    margin-top: 20px;
    color: #111820;
    font-size: 24px;
    line-height: 1;
}

.cc-radar-ring span {
    margin-top: -22px;
    color: #5d6872;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cc-radar-stack {
    display: grid;
    gap: 6px;
}

.cc-radar-stack span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #c0c6cc;
    padding: 7px 9px;
    background: #fff;
    color: #4d5864;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.cc-radar-stack b {
    color: #111820;
}

.cc-alarm-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: #adb3b8;
}

.cc-alarm-strip article {
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 92px;
    background: linear-gradient(#fff, #e8ebee);
}

.cc-alarm-strip b {
    color: #111820;
    font-size: 27px;
    line-height: 1;
}

.cc-alarm-strip span {
    color: #59636d;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.cc-alarm-strip .danger {
    box-shadow: inset 0 -5px 0 #b94134;
}

.cc-alarm-strip .warn {
    box-shadow: inset 0 -5px 0 #c48916;
}

.cc-alarm-strip .good {
    box-shadow: inset 0 -5px 0 #176f4d;
}

.cc-ops-wall,
.cc-second-row {
    display: grid;
    gap: 10px;
}

.cc-ops-wall {
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.15fr) minmax(300px, .85fr);
}

.cc-second-row {
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) minmax(340px, 1.2fr);
}

.cc-panel {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    border: 1px solid #a7adb3;
    background: #e7e7e7;
    padding: 9px;
}

.cc-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    border-bottom: 1px solid #b7bcc1;
    padding-bottom: 7px;
}

.cc-panel header strong {
    overflow: hidden;
    color: #17202a;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-list,
.cc-alert-list,
.cc-driver-list,
.cc-helper-lanes,
.cc-mini-grid {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.cc-area-row,
.ultimate-alert-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    border: 1px solid #b7bcc1;
    border-left: 5px solid #8793a0;
    border-radius: 0;
    padding: 8px 10px;
    background: linear-gradient(#fff, #e8ebee);
    color: #15202b;
    text-align: left;
    cursor: pointer;
}

.cc-area-row.good,
.ultimate-alert-row.good {
    border-left-color: #176f4d;
}

.cc-area-row.warn,
.ultimate-alert-row.warn {
    border-left-color: #c48916;
}

.cc-area-row.danger,
.ultimate-alert-row.danger {
    border-left-color: #b94134;
}

.cc-area-row:hover,
.ultimate-alert-row:hover {
    border-color: #7f9db9;
    box-shadow: inset 0 0 0 1px rgba(127,157,185,.22);
}

.cc-area-row.compact {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    padding: 7px 8px;
}

.cc-area-code {
    display: grid;
    place-items: center;
    width: 32px;
    height: 28px;
    border: 1px solid #aab0b6;
    background: linear-gradient(#f7f8fa, #d4d8dc);
    color: #28313a;
    font-size: 10px;
    font-weight: 950;
}

.cc-area-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.cc-area-main i {
    display: block;
    width: 100%;
    height: 4px;
    background: #cbd2d8;
    position: relative;
    overflow: hidden;
}

.cc-area-main i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--cc-progress);
    background: #176f4d;
}

.cc-area-row.warn .cc-area-main i::after {
    background: #c48916;
}

.cc-area-row.danger .cc-area-main i::after {
    background: #b94134;
}

.cc-area-row strong,
.ultimate-alert-row strong,
.cc-driver-row strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-area-row small,
.ultimate-alert-row small,
.cc-driver-row small,
.cc-driver-row time {
    display: block;
    overflow: hidden;
    color: #56616d;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-area-metrics {
    display: grid;
    justify-items: end;
    gap: 1px;
    min-width: 52px;
}

.cc-area-metrics b {
    color: #111820;
    font-size: 16px;
    line-height: 1;
}

.cc-area-metrics small {
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.ultimate-alert-row {
    grid-template-columns: minmax(0, 1fr);
}

.cc-driver-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    border: 1px solid #b7bcc1;
    padding: 8px 10px;
    background: linear-gradient(#fff, #e8ebee);
}

.cc-driver-row > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #9aa4ad;
    border-radius: 50%;
    background: #176f4d;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
}

.cc-driver-row div {
    min-width: 0;
}

.cc-dispatch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid #b4b9be;
    background: #b4b9be;
}

.cc-dispatch-grid article {
    display: grid;
    gap: 4px;
    min-height: 66px;
    padding: 10px;
    background: linear-gradient(#fff, #e8ebee);
}

.cc-dispatch-grid b {
    color: #111820;
    font-size: 22px;
}

.cc-dispatch-grid span {
    color: #5b6269;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.cc-dispatch-grid .danger {
    box-shadow: inset 4px 0 0 #b94134;
}

.cc-dispatch-grid .good {
    box-shadow: inset 4px 0 0 #176f4d;
}

.cc-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.cc-location-list {
    display: grid;
    gap: 6px;
    max-height: 430px;
    overflow: auto;
}

.cc-location-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid #b7bcc1;
    border-left: 5px solid #8793a0;
    padding: 8px 10px;
    background: linear-gradient(#fff, #e8ebee);
    color: #15202b;
    text-align: left;
    cursor: pointer;
}

.cc-location-row.good {
    border-left-color: #176f4d;
}

.cc-location-row.warn {
    border-left-color: #c48916;
}

.cc-location-row.danger {
    border-left-color: #b94134;
}

.cc-location-row span,
.cc-location-row small {
    overflow: hidden;
    color: #56616d;
    font-size: 10px;
    font-weight: 950;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.cc-location-row strong {
    overflow: hidden;
    color: #17202a;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-location-row small {
    grid-column: 2 / 3;
    text-transform: none;
}

.cc-location-row b {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 12px;
    white-space: nowrap;
}

.system-page-card {
    max-width: none;
}

.system-health-details {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr) minmax(260px, .8fr);
    gap: 12px;
}

.system-health-details section {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    border: 1px solid #b4b9be;
    padding: 10px;
    background: #f4f5f6;
}

.system-health-details h3 {
    margin: 0;
    color: #17202a;
    font-size: 14px;
}

.system-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.system-detail-grid article,
.system-backup-card,
.system-log-list article {
    border: 1px solid #b7bcc1;
    border-left: 4px solid #8793a0;
    padding: 8px 10px;
    background: linear-gradient(#fff, #e8ebee);
}

.system-detail-grid span,
.system-log-list small,
.system-backup-card span,
.system-backup-card small {
    display: block;
    overflow: hidden;
    color: #5b6269;
    font-size: 11px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-detail-grid strong {
    color: #111820;
    font-size: 22px;
}

.system-log-list {
    display: grid;
    gap: 8px;
    max-height: 420px;
    overflow: auto;
}

.system-log-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border-radius: 6px;
}

.system-log-row div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.system-log-row strong,
.system-log-row small,
.system-log-row time {
    min-width: 0;
    overflow-wrap: anywhere;
}

.system-log-row strong {
    color: #111820;
    font-size: 13px;
    font-weight: 950;
}

.system-log-row small {
    color: #5b6269;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.25;
}

.system-log-row time {
    justify-self: end;
    border: 1px solid #c8ced4;
    border-radius: 999px;
    padding: 4px 8px;
    background: #fff;
    color: #17202a;
    font-size: 11px;
    font-weight: 950;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.system-log-row.good,
.system-backup-card.good {
    border-left-color: #176f4d;
}

.system-log-row.danger,
.system-backup-card.danger {
    border-left-color: #b94134;
}

.system-log-row.neutral {
    border-left-color: #8793a0;
}

.system-log-list p {
    margin: 4px 0 0;
    color: #3f4650;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.system-health-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    border: 1px solid var(--admin-line);
    border-left: 5px solid var(--admin-blue);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--admin-soft);
}

.system-health-summary.good {
    border-left-color: var(--admin-green);
}

.system-health-summary.danger {
    border-left-color: var(--admin-red);
    background: #fff4f2;
}

.system-health-summary strong,
.system-health-summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-health-summary strong {
    font-size: 14px;
}

.system-health-summary span {
    color: var(--admin-muted);
    font-size: 12px;
    font-weight: 850;
}

.system-health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.system-health-item {
    min-height: 66px;
    border: 1px solid var(--admin-line);
    border-left: 4px solid #9aa7b3;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.system-health-item.good {
    border-left-color: var(--admin-green);
}

.system-health-item.danger {
    border-left-color: var(--admin-red);
    background: #fff7f5;
}

.system-health-item strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-health-item span {
    color: var(--admin-green);
    font-weight: 950;
}

.system-health-item strong {
    color: var(--admin-ink);
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.system-health-item.danger span {
    color: var(--admin-red);
}

.twofa-card {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.security-badge {
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(#f8fafc, #e5e7eb);
    color: #334155;
}

.security-badge.is-on {
    border-color: #15803d;
    color: #14532d;
    background: linear-gradient(#dcfce7, #bbf7d0);
}

.security-badge.is-off {
    border-color: #f59e0b;
    color: #78350f;
    background: linear-gradient(#fef3c7, #fde68a);
}

.muted-copy,
.form-message {
    margin: 0;
    color: var(--admin-muted);
    font-size: 13px;
    line-height: 1.45;
}

.form-message.is-error {
    color: var(--admin-red);
    font-weight: 800;
}

.twofa-setup,
.twofa-disable {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px);
    gap: 10px;
    align-items: end;
}

.twofa-setup label {
    display: grid;
    gap: 5px;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
}

.twofa-setup input,
.twofa-disable input {
    width: 100%;
    min-height: 32px;
    border: 1px solid var(--admin-line);
    border-radius: 3px;
    padding: 6px 9px;
    font-size: 13px;
    background: #fff;
}

.twofa-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.danger-mini {
    border-color: #ef4444 #dc2626 #991b1b;
    color: #7f1d1d;
}

@media (max-width: 980px) {
    .admin-command-strip,
    .admin-focus-grid,
    .system-health-grid {
        grid-template-columns: 1fr;
    }

    .twofa-setup,
    .twofa-disable {
        grid-template-columns: 1fr;
    }
}

.server-body {
    min-height: 100vh;
    overflow: auto;
    color: var(--admin-ink);
    background:
        linear-gradient(180deg, #101923 0, #101923 178px, transparent 178px),
        radial-gradient(circle at top right, rgba(248, 192, 90, .22), transparent 360px),
        var(--admin-bg);
}

.login-screen {
    background:
        linear-gradient(110deg, rgba(7, 24, 41, .95), rgba(20, 63, 107, .76) 44%, rgba(16, 116, 87, .42)),
        url("kobis-login-bg.jpg") center right / cover no-repeat;
}

.login-card {
    width: min(420px, 100%);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .96);
}

.login-card input {
    min-height: 44px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 0 12px;
}

.admin-shell {
    width: min(1520px, calc(100% - 36px));
    margin: 0 auto;
    padding: 22px 0 34px;
}

.admin-header {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    color: #fff;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 22px;
}

.admin-brand img {
    width: 156px;
    height: auto;
    filter:
        brightness(0) saturate(100%) invert(82%) sepia(39%) saturate(1000%) hue-rotate(334deg) brightness(101%) contrast(95%)
        drop-shadow(0 12px 22px rgba(0, 0, 0, .32));
}

.admin-header h1,
.admin-card h2,
.admin-card h3 {
    margin: 0;
    letter-spacing: 0;
}

.admin-header h1 {
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1;
}

.admin-header .eyebrow {
    color: var(--admin-yellow);
}

.admin-toolbar,
.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-toolbar {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
}

.admin-toolbar select,
.admin-toolbar button,
.admin-link-button,
.filter-row select,
.filter-row input,
.user-form input,
.user-form select,
.municipality-form input,
.municipality-form select {
    min-height: 42px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: var(--admin-ink);
    font-weight: 800;
    outline: none;
}

.admin-toolbar button,
.admin-link-button {
    border-color: rgba(255, 255, 255, .34) rgba(255, 255, 255, .22) rgba(255, 255, 255, .14);
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    background-image: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .1));
    box-shadow: rgba(255, 255, 255, .28) 0 1px 0 inset;
    color: #fff;
    cursor: pointer;
}

.admin-toolbar button:hover,
.admin-link-button:hover,
.secondary-button:hover,
.mini-button:hover {
    border-color: var(--admin-yellow);
}

.admin-tabs {
    display: flex;
    gap: 4px;
    margin: 4px 0 18px;
    padding: 6px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--admin-shadow);
}

.admin-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-color: #d5d9d9 #c6cacc #b7babd;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    padding: 0 18px;
    background-image: linear-gradient(#ffffff, #edf0f3);
    color: var(--admin-muted);
    font-weight: 900;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset;
}

.admin-tabs button span {
    min-width: 26px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(17, 28, 39, .12);
    border-radius: 3px;
    background: rgba(255, 255, 255, .72);
    color: var(--admin-ink);
    font-size: 11px;
}

.admin-tabs button.active {
    border-color: #0d5f3e #0b5437 #08452d;
    color: #fff;
    background-image: linear-gradient(#21845d, var(--admin-green));
    box-shadow: rgba(255, 255, 255, .35) 0 1px 0 inset;
}

.admin-tab-panel {
    display: none;
}

.admin-tab-panel.active {
    display: block;
}

.dashboard-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 249, 251, .92));
    box-shadow: var(--admin-shadow);
}

.dashboard-intro h2,
.dashboard-intro p {
    margin: 0;
}

.dashboard-intro h2 {
    font-size: 28px;
}

.dashboard-intro > p {
    max-width: 560px;
    color: var(--admin-muted);
    font-weight: 800;
    line-height: 1.45;
}

.admin-grid,
.overview-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.admin-card {
    display: grid;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--admin-shadow);
}

.admin-card h2 {
    font-size: 22px;
}

.hidden {
    display: none !important;
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--admin-line);
}

.split-list > div,
.assignment-panel,
.user-list,
.municipality-list {
    border-top: 1px solid var(--admin-line);
    padding-top: 14px;
}

.progress-card {
    justify-items: center;
}

.progress-ring {
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    border-radius: 999px;
    background: conic-gradient(var(--admin-green) 0deg, #dde6df 0deg);
    box-shadow: inset 0 0 0 1px rgba(17, 28, 39, .08);
}

.progress-ring span {
    display: grid;
    place-items: center;
    width: 136px;
    height: 136px;
    border-radius: 999px;
    background: #fff;
    color: var(--admin-ink);
    font-size: 34px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(17, 28, 39, .1);
}

.progress-bars {
    display: grid;
    gap: 8px;
    width: 100%;
}

.progress-bars label {
    display: flex;
    justify-content: space-between;
    color: var(--admin-muted);
    font-size: 13px;
    font-weight: 900;
}

meter {
    width: 100%;
    height: 14px;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.admin-stats div {
    min-height: 106px;
    display: grid;
    align-content: center;
    gap: 8px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 15px;
    background: linear-gradient(180deg, #fff, var(--admin-soft));
}

.admin-stats strong {
    display: block;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1;
}

.admin-stats span,
.user-list small,
.activity-list small,
.municipality-list small,
.record-list small {
    display: block;
    color: var(--admin-muted);
    font-size: 12px;
    font-weight: 850;
}

.user-form,
.municipality-form,
.assignment-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: var(--admin-soft);
}

.user-create-actions,
.user-management-grid,
.user-overview {
    display: grid;
    gap: 12px;
}

.user-create-actions {
    grid-template-columns: repeat(3, auto);
    align-items: center;
}

.user-management-grid {
    grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
    align-items: start;
}

.user-editor-panel,
.user-column {
    display: grid;
    gap: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.user-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-column-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--admin-line);
}

.user-column-heading span {
    min-width: 34px;
    border-radius: 999px;
    padding: 6px 9px;
    background: #e7f4ec;
    color: #244b35;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}

.role-user-list {
    max-height: 430px;
    border-top: 0;
    padding-top: 0;
}

.municipality-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 180px 180px;
}

.rev-upload-form {
    margin-top: 14px;
    border-top: 1px solid rgba(30, 42, 35, .1);
    padding-top: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 170px;
}

.upload-intro {
    display: grid;
    gap: 3px;
    align-content: center;
}

.upload-intro small,
.form-message {
    color: var(--admin-muted);
    font-size: 12px;
    font-weight: 800;
}

.form-message {
    margin: 0;
}

.assignment-panel {
    display: grid;
    gap: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.compact-heading {
    padding-bottom: 10px;
}

.assignment-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    padding: 12px;
    border: 1px solid var(--admin-line);
    background: var(--admin-soft);
}

#assignmentId {
    display: none;
}

#assignmentNote {
    grid-column: 1 / -1;
}

.assignment-form .save-button,
.assignment-form .danger-button {
    width: 100%;
}

.assignment-form input,
.assignment-form select {
    min-height: 42px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: var(--admin-ink);
    font-weight: 800;
}

.check-line {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    font-weight: 850;
}

.check-line input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
}

.office-user-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
}

.office-user-form .field-line {
    min-width: 0;
    display: grid;
    gap: 4px;
    color: #4b5563;
    font-size: 11px;
    font-weight: 900;
}

.office-user-form .field-line input,
.office-user-form .field-line select {
    width: 100%;
    min-width: 0;
}

.office-user-form .field-line:nth-of-type(1),
.office-user-form .field-line:nth-of-type(2),
.office-user-form .field-line:nth-of-type(3) {
    grid-column: 1 / -1;
}

.office-user-checks,
.office-user-buttons {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.office-user-checks .check-line {
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-user-buttons .save-button,
.office-user-buttons .danger-button {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-user-action-list {
    gap: 8px;
}

.office-user-action-list .office-action-button {
    min-height: 58px;
    padding: 9px 10px;
}

.upload-inbox-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
}

.office-import-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    border: 1px solid #c4cbd2;
    border-left: 5px solid var(--admin-blue);
    border-radius: 6px;
    padding: 14px;
    background: linear-gradient(#fff, #eef1f4);
}

.office-import-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.office-import-form .field-line,
.office-import-form .check-line,
.office-import-form .office-inline-message,
.office-import-form .office-import-preview {
    min-width: 0;
}

.office-import-form .field-line input,
.office-import-form .field-line select {
    width: 100%;
}

.office-import-mode,
.office-address-field {
    grid-column: 1 / -1;
}

.office-import-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    border: 1px solid #d1d7dd;
    border-radius: 5px;
    padding: 10px;
    background: rgba(255, 255, 255, .72);
}

.office-import-mode legend {
    padding: 0 5px;
    color: #4f5b66;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.office-import-mode label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    border: 1px solid #cbd3da;
    border-radius: 4px;
    padding: 8px;
    background: linear-gradient(#fff, #f0f3f6);
    cursor: pointer;
}

.office-import-mode strong,
.office-import-mode small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-import-mode small {
    margin-top: 2px;
    color: #65717d;
    font-size: 11px;
    font-weight: 750;
}

.office-import-mode label:has(input:checked) {
    border-color: var(--admin-blue);
    box-shadow: inset 0 0 0 1px rgba(31, 90, 133, .22);
}

.office-address-field {
    position: relative;
}

.office-address-field small {
    display: block;
    margin-top: 4px;
    color: #5b6670;
    font-size: 11px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.office-address-results {
    position: absolute;
    z-index: 1300;
    top: calc(100% - 2px);
    right: 0;
    left: 0;
    display: none;
    max-height: 240px;
    overflow: auto;
    border: 1px solid #aeb7c0;
    border-radius: 0 0 5px 5px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 32, .18);
}

.office-address-results.open {
    display: grid;
}

.office-address-results button,
.office-address-empty {
    display: grid;
    gap: 2px;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid #e1e5e9;
    padding: 8px 10px;
    background: #fff;
    color: #17212b;
    text-align: left;
}

.office-address-results button {
    cursor: pointer;
}

.office-address-results button:hover,
.office-address-results button:focus-visible {
    background: #eef5fb;
    outline: 0;
}

.office-address-results strong,
.office-address-results span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-address-results span,
.office-address-empty {
    color: #65717d;
    font-size: 11px;
    font-weight: 800;
}

.is-hidden {
    display: none !important;
}

.office-import-check {
    min-height: 39px;
    align-items: center;
}

.office-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.office-import-actions button {
    min-width: 150px;
}

.office-import-form .office-inline-message,
.office-import-form .office-import-preview {
    grid-column: 1 / -1;
}

.office-import-preview:empty {
    display: none;
}

.import-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.import-preview-grid article {
    min-width: 0;
    border: 1px solid #d1d7dd;
    border-radius: 4px;
    padding: 8px;
    background: rgba(255, 255, 255, .78);
}

.import-preview-grid span,
.import-preview-grid strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.import-preview-grid span {
    color: #66717c;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.import-preview-grid strong {
    color: #111820;
    font-size: 16px;
    font-weight: 950;
}

.import-warning-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.import-warning-list span {
    border: 1px solid #e2c87b;
    border-left: 4px solid #c48916;
    border-radius: 4px;
    padding: 7px 9px;
    background: #fff7df;
    color: #5a4210;
    font-size: 12px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.upload-inbox-list {
    display: grid;
    gap: 10px;
    align-content: start;
}

.upload-job-card {
    gap: 10px;
}

.upload-job-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.upload-job-head > div,
.upload-advice,
.upload-plan-controls {
    min-width: 0;
}

.upload-advice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.upload-advice span {
    border: 1px solid #d2d8de;
    border-radius: 3px;
    padding: 6px 7px;
    background: #f8fafc;
    color: #4b5563;
    font-size: 11px;
    font-weight: 850;
}

.upload-plan-controls {
    display: grid;
    grid-template-columns: minmax(190px, 1.4fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(100px, 0.5fr) minmax(140px, 0.7fr);
    gap: 8px;
    align-items: end;
}

.upload-plan-controls label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #4b5563;
    font-size: 11px;
    font-weight: 900;
}

.upload-plan-controls select,
.upload-plan-controls input,
.upload-plan-controls button {
    width: 100%;
    min-width: 0;
    height: 31px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-started-note {
    display: grid;
    gap: 3px;
    border: 1px solid #bad8cc;
    border-radius: 3px;
    padding: 8px 9px;
    background: #f1faf5;
}

.upload-started-note strong {
    color: #176f4d;
}

.upload-started-note span {
    color: #51606e;
    font-size: 12px;
    font-weight: 800;
}

.upload-archive-note {
    margin: 0;
    border: 1px dashed #c6cdd4;
    border-radius: 4px;
    padding: 9px 10px;
    background: #f8fafc;
    color: #51606e;
    font-size: 12px;
    font-weight: 850;
}

.webmail-body {
    min-height: 100vh;
    background: #dfe4e8;
}

.webmail-shell {
    width: min(100% - 16px, 1680px);
    margin: 0 auto;
    padding: 8px 0;
}

.webmail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 44px;
    border: 1px solid #aeb6bf;
    border-radius: 3px 3px 0 0;
    margin-bottom: 0;
    padding: 5px 8px;
    background: linear-gradient(#f6f7f8, #d2d8de);
    box-shadow: rgba(255, 255, 255, .75) 0 1px 0 inset;
}

.webmail-topbar .admin-brand {
    gap: 8px;
}

.webmail-topbar .admin-brand img {
    width: 30px;
    height: 30px;
}

.webmail-topbar .eyebrow {
    margin: 0;
    font-size: 9px;
}

.webmail-topbar h1 {
    margin: 0;
    font-size: 15px;
    line-height: 1.1;
}

.webmail-topbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.webmail-topbar a,
.webmail-topbar button,
.webmail-login-card a {
    min-height: 27px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    padding: 0 9px;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    color: #111820;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.webmail-nav-link {
    position: relative;
}

.webmail-nav-badge {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #8b1010;
    border-radius: 999px;
    margin-left: 6px;
    padding: 0 5px;
    background: linear-gradient(#e54343, #b81717);
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset;
}

.webmail-layout {
    position: relative;
    display: grid;
    grid-template-columns: 205px minmax(280px, 380px) minmax(0, 1fr);
    min-height: calc(100vh - 62px);
    border: 1px solid #aeb7c0;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    background: #fff;
}

.webmail-flash {
    margin: 0;
    border: 1px solid #96c9a8;
    border-top: 0;
    padding: 9px 12px;
    background: #effaf3;
    color: #176f4d;
    font-size: 12px;
    font-weight: 900;
}

.webmail-flash.error {
    border-color: #df9a92;
    background: #fff4f2;
    color: #9d2e24;
}

.webmail-folders {
    display: grid;
    align-content: start;
    gap: 2px;
    border-right: 1px solid #c9d0d7;
    padding: 7px;
    background: #eef1f4;
}

.webmail-folders a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 6px 7px;
    background: transparent;
    color: #17212b;
    text-align: left;
    text-decoration: none;
}

.webmail-folders a.active {
    border-color: #9db4cf;
    background: #e6f0fb;
}

.webmail-folders .webmail-compose-link {
    border-color: #9fb6cc;
    background: linear-gradient(#fdfefe, #dce8f3);
    margin-bottom: 5px;
}

.webmail-folders span {
    grid-row: span 2;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #aab5bf;
    border-radius: 3px;
    background: #fff;
    font-size: 10px;
    font-weight: 950;
}

.webmail-folders strong,
.webmail-folders small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.webmail-folders strong {
    font-size: 12px;
}

.webmail-folders small {
    color: #66727e;
    font-size: 10px;
}

.webmail-list {
    min-width: 0;
    border-right: 1px solid #c9d0d7;
    background: #fbfcfd;
    overflow: auto;
}

.webmail-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    gap: 4px;
    align-items: center;
    border-bottom: 1px solid #bfc8d1;
    padding: 5px;
    background: linear-gradient(#f9fafb, #d8dee4);
}

.webmail-toolbar a,
.webmail-toolbar button {
    min-height: 26px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    padding: 0 8px;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    color: #111820;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}

.webmail-toolbar button:disabled {
    opacity: .55;
}

.webmail-list-head {
    position: sticky;
    top: 37px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #c9d0d7;
    padding: 8px 10px;
    background: linear-gradient(#fff, #edf1f4);
}

.webmail-list-head strong {
    font-size: 13px;
}

.webmail-list-head span {
    color: #607080;
    font-size: 11px;
    font-weight: 850;
}

.webmail-list a {
    display: grid;
    gap: 3px;
    min-width: 0;
    border-bottom: 1px solid #e0e5e9;
    padding: 8px 10px;
    color: #17212b;
    text-decoration: none;
}

.webmail-list a:hover,
.webmail-list a.active {
    background: #eaf3ff;
}

.webmail-list a.locked {
    border-left: 4px solid #b94134;
    background: #fff5f3;
}

.webmail-list a.assigned-other {
    border-left: 4px solid #7a5d17;
    background: #fff9e9;
}

.webmail-list a.important {
    box-shadow: inset 3px 0 0 #b94134;
}

.webmail-list a.todo {
    box-shadow: inset 3px 0 0 #2366a8;
}

.webmail-list a.unseen strong {
    font-weight: 950;
}

.webmail-list a.seen {
    color: #596674;
}

.webmail-list strong,
.webmail-list span,
.webmail-list small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webmail-list strong {
    font-size: 12px;
}

.webmail-flag {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 3px;
    margin-right: 4px;
    padding: 0 4px;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

.webmail-flag.important {
    border-color: #b94134;
    background: #fff0ee;
    color: #9d2e24;
}

.webmail-flag.todo {
    border-color: #2366a8;
    background: #edf6ff;
    color: #174d80;
}

.webmail-list span {
    font-size: 12px;
    font-weight: 800;
}

.webmail-list small {
    color: #687684;
    font-size: 11px;
}

.webmail-reader {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #fff;
}

.webmail-reader-head {
    border-bottom: 1px solid #c9d0d7;
    padding: 12px 16px;
    background: linear-gradient(#fff, #f4f6f8);
}

.webmail-reader-head h2 {
    margin: 0 0 6px;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.webmail-reader-head span,
.webmail-reader-head small {
    display: block;
    color: #53616f;
    font-weight: 800;
}

.webmail-reply-button {
    width: max-content;
    min-height: 26px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    margin-top: 8px;
    padding: 0 10px;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    color: #111820;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.webmail-reader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.webmail-reader-actions .webmail-reply-button {
    min-height: 29px;
    margin-top: 0;
}

.webmail-reader-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.webmail-reader-actions button,
.webmail-assign-form select {
    height: 29px;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    color: #111820;
    font-size: 11px;
    font-weight: 900;
}

.webmail-reader-actions button {
    padding: 0 9px;
    cursor: pointer;
}

.webmail-reader-actions button.active {
    border-color: #7d9fba;
    background-image: linear-gradient(#e7f2ff, #cbdff3);
    color: #123d66;
}

.webmail-reader-actions button.danger.active,
.webmail-reader-actions button.danger:hover {
    border-color: #b94134;
    background-image: linear-gradient(#fff4f2, #f0cbc6);
}

.webmail-reader-actions button:disabled,
.webmail-assign-form select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.webmail-assign-form {
    justify-content: flex-end;
    margin-left: auto;
}

.webmail-assign-form label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: min(280px, 100%);
    height: 29px;
    color: #4b5563;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.webmail-assign-form select {
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    text-transform: none;
}

.webmail-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.webmail-meta-tags span {
    border: 1px solid #bec7d1;
    border-radius: 999px;
    padding: 4px 8px;
    background: #fff;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
}

.webmail-reader pre {
    margin: 0;
    padding: 16px;
    color: #1f2933;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: auto;
}

.webmail-login-card,
.webmail-compose {
    border: 1px solid #aab4bd;
    border-radius: 4px;
    background: #fff;
}

.webmail-login-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 18px;
    align-items: start;
    padding: 14px;
    background: linear-gradient(#fff, #edf1f4);
}

.webmail-login-card form {
    display: grid;
    gap: 10px;
}

.webmail-compose {
    position: absolute;
    right: 18px;
    top: 48px;
    z-index: 8;
    width: min(720px, calc(100% - 36px));
    max-height: calc(100% - 70px);
    display: none;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(22, 31, 42, .28);
}

.webmail-compose:target,
.webmail-compose.has-message {
    display: grid;
}

.webmail-compose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #bfc8d1;
    padding: 8px 10px;
    background: linear-gradient(#f7f8fa, #d7dde3);
}

.webmail-compose-head .eyebrow {
    margin: 0;
    font-size: 9px;
}

.webmail-compose-head h2 {
    margin: 0;
    font-size: 14px;
}

.webmail-compose-head a {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    background: #fff;
    color: #111820;
    font-size: 14px;
    font-weight: 950;
    text-decoration: none;
}

.webmail-compose form {
    display: grid;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}

.webmail-login-card label,
.webmail-compose label {
    display: grid;
    gap: 5px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 900;
}

.webmail-login-card input,
.webmail-compose input,
.webmail-compose textarea {
    width: 100%;
}

.webmail-compose textarea {
    min-height: 220px;
    resize: vertical;
}

.webmail-compose-from {
    border: 1px solid #d4dae0;
    border-radius: 3px;
    padding: 7px 8px;
    background: #f8fafc;
    color: #51606e;
    font-size: 12px;
    font-weight: 850;
}

.webmail-compose-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.webmail-error {
    border: 1px solid #df9a92;
    border-radius: 4px;
    padding: 9px;
    background: #fff4f2;
    color: #9d2e24;
    font-weight: 850;
}

.webmail-success {
    border: 1px solid #96c9a8;
    border-radius: 4px;
    padding: 9px;
    background: #effaf3;
    color: #176f4d;
    font-weight: 850;
}

.webmail-lock-alert,
.webmail-lock-own {
    margin: 10px 0 0;
    border-radius: 4px;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 850;
}

.webmail-lock-alert {
    border: 1px solid #df9a92;
    background: #fff4f2;
    color: #9d2e24;
}

.webmail-lock-own {
    border: 1px solid #96c9a8;
    background: #effaf3;
    color: #176f4d;
}

.webmail-empty {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 260px;
    padding: 24px;
    color: #596674;
    text-align: center;
}

@media (max-width: 720px) {
    .office-user-form,
    .office-user-checks,
    .office-user-buttons,
    .upload-advice,
    .upload-plan-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .webmail-topbar,
    .webmail-login-card,
    .webmail-layout {
        grid-template-columns: 1fr;
    }

    .webmail-topbar {
        display: grid;
    }

    .webmail-layout {
        min-height: auto;
    }

    .webmail-assign-form {
        justify-content: stretch;
        margin-left: 0;
    }

    .webmail-assign-form label {
        width: 100%;
    }

    .webmail-folders,
    .webmail-list {
        border-right: 0;
        border-bottom: 1px solid #c9d0d7;
    }
}

.municipality-photo-toggle {
    grid-column: 1 / -1;
    justify-content: flex-start;
    border-color: rgba(196, 137, 22, .32);
    background: #fff8e8;
}

.municipality-photo-toggle span {
    color: var(--admin-ink);
}

.user-list,
.assignment-list,
.activity-list,
.municipality-list,
.record-list {
    display: grid;
    gap: 8px;
    max-height: 58vh;
    overflow: auto;
    padding-right: 4px;
}

.user-list article,
.assignment-list article,
.activity-list article,
.municipality-list article,
.record-list article {
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 13px;
    background: #fff;
}

.user-list article,
.assignment-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.municipality-list article {
    display: grid;
    gap: 12px;
    cursor: pointer;
}

.user-list article:hover,
.assignment-list article:hover,
.municipality-list article:hover,
.record-list article:hover {
    border-color: rgba(23, 111, 77, .45);
    box-shadow: 0 10px 24px rgba(17, 28, 39, .06);
}

.user-list article > span,
.assignment-list article > span,
.municipality-summary > span {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 9px;
    color: #37513f;
    background: #e7f4ec;
    font-size: 12px;
    font-weight: 900;
}

.user-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.user-card-actions > span {
    border-radius: 999px;
    padding: 5px 9px;
    color: #37513f;
    background: #e7f4ec;
    font-size: 12px;
    font-weight: 900;
}

.mini-button {
    min-height: 32px;
    border-color: #d5d9d9 #c6cacc #b7babd;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    padding: 0 10px;
    background-image: linear-gradient(#ffffff, #edf0f3);
    color: var(--admin-ink);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset;
}

.admin-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.admin-centre-body {
    min-height: 100vh;
}

.admin-centre-shell {
    max-width: 1640px;
}

.admin-security-strip {
    margin-top: 0;
}

.admin-centre-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
    gap: 16px;
    margin-bottom: 16px;
}

.admin-action-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-create-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    margin: 0 0 14px;
    border: 1px solid #d4dbe1;
    border-radius: 8px;
    background: #f8fafb;
}

.admin-create-form .compact-heading,
.admin-create-form .office-inline-message {
    grid-column: 1 / -1;
}

.admin-create-form .field-line {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--admin-muted);
    font-size: 11px;
    font-weight: 850;
}

.admin-create-form .field-line input {
    width: 100%;
    min-width: 0;
}

.admin-create-form .check-line {
    align-self: end;
}

.admin-create-form .save-button {
    align-self: end;
    width: 100%;
}

.compact-admin-log {
    max-height: 340px;
    overflow: auto;
}

.admin-centre-lists {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-area-table {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid #cbd3da;
    border-radius: 8px;
    background: #cbd3da;
}

.admin-area-table article {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(130px, .55fr));
    gap: 1px;
    background: #cbd3da;
}

.admin-area-table article > div {
    padding: 11px 12px;
    background: #fff;
}

.admin-area-table strong,
.admin-area-table span,
.admin-area-table small {
    display: block;
}

.admin-area-table span,
.admin-area-table small {
    color: var(--admin-muted);
    font-size: 11px;
    font-weight: 850;
}

.admin-area-table strong {
    color: var(--admin-ink);
    font-size: 13px;
}

.status-pill {
    align-self: center;
    border-radius: 999px;
    padding: 5px 8px;
    color: #38513d;
    background: #e5f5eb;
    font-size: 11px;
    font-weight: 950;
}

.status-pill.danger {
    color: #7a261f;
    background: #ffe8e4;
}

.fast-office-shell {
    max-width: 1720px;
}

.cc-fast-hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #aeb7c0;
    border-radius: 8px;
    margin: 0 0 16px;
    background: #aeb7c0;
    box-shadow: var(--admin-shadow);
}

.cc-fast-hero article {
    display: grid;
    gap: 6px;
    min-height: 118px;
    padding: 16px;
    background: linear-gradient(#fff, #e9edf1);
}

.cc-fast-hero span {
    color: #59636d;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.cc-fast-hero strong {
    color: #111820;
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}

.cc-fast-hero small {
    color: #51606e;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.cc-fast-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .75fr) minmax(340px, .75fr);
    gap: 16px;
    margin-bottom: 16px;
}

.cc-fast-grid.lower {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
}

.cc-command-centre {
    margin-bottom: 16px;
}

.cc-command-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    border-left: 6px solid #8793a0;
}

.cc-command-card.good {
    border-left-color: var(--admin-green);
}

.cc-command-card.warn {
    border-left-color: #c48916;
}

.cc-command-card.danger {
    border-left-color: var(--admin-red);
}

.cc-command-card h2,
.cc-command-card p {
    margin: 0;
}

.cc-command-card h2 {
    color: #111820;
    font-size: 22px;
    font-weight: 950;
}

.cc-command-card p:not(.eyebrow) {
    max-width: 860px;
    color: #51606e;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
}

.cc-command-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.cc-active-overview {
    margin-bottom: 16px;
}

.cc-area-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cc-work-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid #c2c9d0;
    border-left: 5px solid #8793a0;
    border-radius: 6px;
    padding: 12px;
    background: linear-gradient(#fff, #eef1f4);
    color: #111820;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(15, 27, 40, .08);
}

.cc-work-card:hover {
    border-color: #8793a0;
    box-shadow: 0 16px 40px rgba(15, 27, 40, .13);
    transform: translateY(-1px);
}

.cc-work-card.good {
    border-left-color: var(--admin-green);
}

.cc-work-card.warn {
    border-left-color: #c48916;
}

.cc-work-card.danger {
    border-left-color: var(--admin-red);
}

.cc-work-card-type {
    justify-self: start;
    border: 1px solid #c4cbd2;
    border-radius: 999px;
    padding: 3px 8px;
    background: #fff;
    color: #59636d;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.cc-work-card strong,
.cc-work-card small,
.cc-work-card em {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cc-work-card strong {
    font-size: 18px;
    font-weight: 950;
    line-height: 1.12;
}

.cc-work-card small {
    color: #59636d;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.3;
}

.cc-work-progress {
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: #d7dee5;
}

.cc-work-progress b {
    display: block;
    width: var(--cc-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #176f4d, #2fa66f);
}

.cc-work-card.warn .cc-work-progress b {
    background: linear-gradient(90deg, #c48916, #f0c15d);
}

.cc-work-card.danger .cc-work-progress b {
    background: linear-gradient(90deg, #b94134, #e06a5e);
}

.cc-work-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.cc-work-stats span {
    min-width: 0;
    border: 1px solid #d3d9df;
    border-radius: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, .72);
}

.cc-work-stats b,
.cc-work-stats small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cc-work-stats b {
    color: #111820;
    font-size: 14px;
    font-weight: 950;
}

.cc-work-stats small {
    color: #66717c;
    font-size: 10px;
    font-weight: 850;
}

.cc-work-card em {
    color: #39434d;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.cc-empty-workareas {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    border: 1px dashed #b4bec8;
    border-radius: 8px;
    padding: 18px;
    background: #f7f9fb;
}

.cc-empty-workareas strong {
    color: #111820;
    font-size: 18px;
    font-weight: 950;
}

.cc-empty-workareas span {
    color: #51606e;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.4;
}

.cc-empty-workareas div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cc-fast-wall,
.cc-fast-radar,
.cc-fast-dispatch {
    min-height: 420px;
}

.control-centre-page .cc-list,
.control-centre-page .cc-alert-list,
.control-centre-page .cc-driver-list,
.control-centre-page .cc-location-list {
    max-height: 560px;
    overflow: auto;
    padding-right: 2px;
}

.control-centre-page .admin-link-button.control-room-tile {
    align-items: stretch;
    justify-content: start;
}

.control-centre-page #fastSelectedPanel.control-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.control-centre-page #fastSelectedPanel .control-room-tile.admin-link-button {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    white-space: normal;
    overflow: hidden;
}

.control-centre-page #fastSelectedPanel .control-room-tile > * {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

.control-centre-page #fastSelectedPanel .control-room-tile span {
    white-space: nowrap;
}

.office-page-body .admin-toolbar {
    flex-wrap: wrap;
}

.office-page-body .admin-toolbar select {
    min-width: min(100%, 320px);
}

.office-page-nav,
.control-centre-nav {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 10px;
}

.office-page-nav a,
.control-centre-nav a {
    min-width: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    padding: 0 10px;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    color: #111820;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.15;
    text-align: center;
}

.office-page-nav a span,
.control-centre-nav a span {
    width: 24px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid #b6bcc2;
    border-radius: 3px;
    background: #fff;
    font-size: 10px;
    font-weight: 950;
}

.office-page-nav a.active,
.control-centre-nav a.active {
    border-color: #8b6a22;
    background-image: linear-gradient(#ffe0a1, #f3bf56);
}

.kantoor-tabs.office-nav-grouped {
    gap: 8px;
    align-items: stretch;
    padding: 6px 12px;
}

.office-nav-group {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    border: 1px solid #b4b9be;
    border-radius: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, .48);
}

.office-nav-group > b {
    display: grid;
    place-items: center;
    min-width: 72px;
    padding: 0 8px;
    border-right: 1px solid #c2c7cc;
    color: #4b5563;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.office-nav-group.compact > b {
    min-width: 62px;
}

.portal-planning .dashboard-intro,
.portal-planning .office-workflow-grid,
.portal-planning .office-page-kpis {
    margin-bottom: 10px;
}

.portal-planning .office-page-content-card {
    min-height: 0;
}

.portal-planning .office-page-content {
    display: grid;
    gap: 12px;
}

.planning-board-grid {
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    align-items: stretch;
}

.planning-panel-scroll,
.upload-inbox-list {
    min-height: 0;
    max-height: min(58vh, 620px);
    overflow: auto;
    padding-right: 4px;
}

.planning-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
}

.planning-card-list .office-page-record {
    min-height: 74px;
}

.portal-planning .office-page-record strong,
.portal-planning .office-page-record span,
.portal-planning .office-page-record small {
    overflow-wrap: anywhere;
}

.portal-kantoor .office-page-nav .office-nav-group {
    flex: 0 1 auto;
}

.office-nav-grouped .office-nav-group a {
    min-height: 32px;
}

.office-module-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.office-module-group {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    border: 1px solid #c1c7cd;
    border-radius: 5px;
    padding: 8px;
    background: #f5f6f7;
}

.office-module-group > b {
    color: #4b5563;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.office-module-group a {
    min-height: 62px;
}

.cc-module-launcher {
    margin-bottom: 16px;
}

.cc-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cc-module-grid a {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px solid #b4bac1;
    border-radius: 4px;
    padding: 10px;
    background: linear-gradient(#fff, #e9edf0);
    color: #18222c;
    text-decoration: none;
}

.cc-module-grid a:hover,
.cc-module-grid a:focus-visible {
    border-color: #7f9db9;
    box-shadow: inset 0 0 0 1px rgba(127, 157, 185, .28);
    outline: 0;
}

.cc-module-grid strong {
    font-size: 13px;
}

.cc-module-grid span {
    color: #5b6269;
    font-size: 11px;
    line-height: 1.35;
}

.office-page-intro {
    margin-bottom: 16px;
}

.office-workflow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 16px;
    margin-bottom: 16px;
}

.section-heading.compact {
    margin-bottom: 10px;
}

.office-step-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.office-step-list li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    padding: 9px;
    background: linear-gradient(#fff, #f1f4f6);
}

.office-step-list span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #b8c0c7;
    border-radius: 50%;
    background: #f8c05a;
    color: #111820;
    font-size: 12px;
    font-weight: 950;
}

.office-step-list strong {
    min-width: 0;
    color: #17212b;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.office-action-list {
    display: grid;
    gap: 8px;
}

.office-action-button,
.office-next-step a {
    min-width: 0;
    display: grid;
    gap: 3px;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    padding: 9px 10px;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    color: #111820;
    text-decoration: none;
    box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset;
}

.office-action-button strong,
.office-action-button span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-action-button strong {
    font-size: 12px;
    font-weight: 950;
}

.office-action-button span {
    color: #52606d;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
}

.office-next-step {
    display: grid;
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    border: 1px solid #c6cdd4;
    border-left: 5px solid #8793a0;
    border-radius: 5px;
    margin-bottom: 14px;
    padding: 11px;
    background: linear-gradient(#fff, #eef1f4);
}

.office-next-step.good {
    border-left-color: #176f4d;
}

.office-next-step.warn {
    border-left-color: #c48916;
}

.office-next-step.danger {
    border-left-color: #b94134;
}

.office-next-step strong,
.office-next-step span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-next-step strong {
    font-size: 13px;
    font-weight: 950;
}

.office-next-step span {
    color: #51606e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.office-next-step a {
    display: inline-grid;
    min-height: 30px;
    align-content: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.office-page-kpis {
    margin-bottom: 16px;
}

.office-page-content {
    min-width: 0;
}

.office-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.office-page-grid h3,
.office-area-grid h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.office-page-record {
    width: 100%;
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 58px;
    border: 1px solid #c4cbd2;
    border-left: 4px solid #8793a0;
    border-radius: 4px;
    margin-bottom: 7px;
    padding: 10px;
    background: linear-gradient(#fff, #eef1f4);
    color: #17212b;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

button.office-page-record {
    cursor: pointer;
}

.office-page-record.good {
    border-left-color: #176f4d;
}

.office-page-record.warn {
    border-left-color: #c48916;
}

.office-page-record.danger {
    border-left-color: #b94134;
}

.office-page-record strong,
.office-page-record span,
.office-page-record small {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.25;
}

.office-page-record strong {
    font-size: 13px;
    font-weight: 950;
}

.office-page-record span {
    font-size: 12px;
    font-weight: 800;
}

.office-page-record small {
    color: #5b6874;
    font-size: 11px;
    font-weight: 750;
}

.office-close-actions {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    border: 1px solid #c4cbd2;
    border-radius: 5px;
    padding: 14px;
    background: linear-gradient(#fff, #f1f3f5);
}

.office-status-pill {
    justify-self: end;
    border: 1px solid #adb1b8;
    border-radius: 999px;
    padding: 4px 10px;
    background: #fff;
    color: #17212b;
    font-size: 11px;
    font-weight: 950;
}

.office-close-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.office-close-summary article {
    min-width: 0;
    border: 1px solid #ccd2d8;
    border-radius: 4px;
    padding: 9px 10px;
    background: #fff;
}

.office-close-summary span,
.office-close-summary strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-close-summary span {
    color: #5b6874;
    font-size: 11px;
    font-weight: 850;
}

.office-close-summary strong {
    color: #17212b;
    font-size: 14px;
    font-weight: 950;
}

.office-close-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.office-close-form {
    display: grid;
    gap: 9px;
    min-width: 0;
    border: 1px solid #c4cbd2;
    border-left: 4px solid #8793a0;
    border-radius: 4px;
    padding: 12px;
    background: #fff;
}

.office-close-form > strong {
    color: #17212b;
    font-size: 13px;
    font-weight: 950;
}

.office-close-form > span {
    color: #51606e;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.office-close-form .field-line {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #4b5563;
    font-size: 11px;
    font-weight: 900;
}

.office-close-form textarea,
.office-close-form select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--admin-line);
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
    color: var(--admin-ink);
    font: inherit;
    font-weight: 800;
}

.office-close-form textarea {
    resize: vertical;
}

.office-close-form .save-button,
.office-close-form .danger-button {
    width: 100%;
    min-width: 0;
}

.office-close-actions + .office-page-grid {
    margin-top: 16px;
}

.active-area-panel,
.archived-area-panel {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    border: 1px solid #c4cbd2;
    border-radius: 5px;
    padding: 14px;
    background: linear-gradient(#fff, #f1f3f5);
}

.active-area-panel {
    border-left: 5px solid #176f4d;
}

.archived-area-panel {
    border-left: 5px solid #8793a0;
}

.area-split-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.area-split-switch a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 1px solid #b4bac1;
    border-radius: 4px;
    padding: 10px 12px;
    background: linear-gradient(#fff, #e9edf0);
    color: #17212b;
    text-decoration: none;
}

.area-split-switch strong {
    min-width: 46px;
    min-height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #c2c7cc;
    border-radius: 3px;
    background: #fff;
    font-size: 18px;
    font-weight: 950;
}

.area-split-switch span {
    min-width: 0;
    color: #4b5563;
    font-size: 12px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.dossier-command {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    border: 1px solid #c4cbd2;
    border-left: 5px solid #8793a0;
    border-radius: 5px;
    padding: 14px;
    background: linear-gradient(#fff, #eef1f4);
}

.dossier-command.good {
    border-left-color: #176f4d;
}

.dossier-command.warn {
    border-left-color: #c48916;
}

.dossier-command.danger {
    border-left-color: #b94134;
}

.dossier-command h3 {
    margin: 0;
    color: #17212b;
    font-size: 20px;
    font-weight: 950;
}

.dossier-command span,
.dossier-next-action span {
    color: #51606e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.dossier-next-action {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dossier-next-action strong {
    color: #17212b;
    font-size: 14px;
    font-weight: 950;
}

.dossier-primary-action {
    display: inline-grid;
    align-content: center;
    min-width: 150px;
    min-height: 34px;
    text-align: center;
    text-decoration: none;
}

.dossier-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.dossier-kpi-row article {
    min-width: 0;
    border: 1px solid #c4cbd2;
    border-radius: 4px;
    padding: 10px;
    background: #fff;
}

.dossier-kpi-row span,
.dossier-kpi-row strong,
.dossier-kpi-row small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dossier-kpi-row span {
    color: #5b6874;
    font-size: 11px;
    font-weight: 900;
}

.dossier-kpi-row strong {
    color: #17212b;
    font-size: 20px;
    font-weight: 950;
}

.dossier-kpi-row small {
    color: #66717c;
    font-size: 11px;
    font-weight: 750;
}

.dossier-action-rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}

.dossier-action-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    min-width: 0;
    border: 1px solid #c4cbd2;
    border-radius: 4px;
    padding: 8px;
    background-image: linear-gradient(#fff, #eef1f4);
    color: #111820;
    text-decoration: none;
}

.dossier-action-link:hover {
    border-color: #9ba5af;
}

.dossier-action-link span {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #b6bcc2;
    border-radius: 4px;
    background: #fff;
    color: #17202a;
    font-size: 10px;
    font-weight: 950;
}

.dossier-action-link strong,
.dossier-action-link small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dossier-action-link strong {
    font-size: 12px;
    font-weight: 950;
}

.dossier-action-link small {
    color: #66717c;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
}

.dossier-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr);
    gap: 14px;
    margin-bottom: 16px;
}

.dossier-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.dossier-workflow-step {
    display: grid;
    gap: 5px;
    min-width: 0;
    min-height: 104px;
    border: 1px solid #c4cbd2;
    border-left: 4px solid #8793a0;
    border-radius: 4px;
    padding: 10px;
    background: linear-gradient(#fff, #eef1f4);
    color: #17212b;
    text-decoration: none;
}

.dossier-workflow-step.good {
    border-left-color: #176f4d;
}

.dossier-workflow-step.warn {
    border-left-color: #c48916;
}

.dossier-workflow-step.danger {
    border-left-color: #b94134;
}

.dossier-workflow-step strong,
.dossier-workflow-step span,
.dossier-workflow-step small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dossier-workflow-step strong {
    font-size: 13px;
    font-weight: 950;
}

.dossier-workflow-step span {
    font-size: 12px;
    font-weight: 900;
}

.dossier-workflow-step small {
    color: #5b6874;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.dossier-facts {
    display: grid;
    grid-template-columns: minmax(110px, .55fr) minmax(0, 1fr);
    gap: 7px 10px;
    margin: 0;
}

.dossier-facts dt,
.dossier-facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.dossier-facts dt {
    color: #5b6874;
    font-weight: 900;
}

.dossier-facts dd {
    color: #17212b;
    font-weight: 850;
}

.dossier-detail-grid {
    margin-top: 4px;
}

.archived-area-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.archived-area-card {
    margin-bottom: 0;
}

.archived-area-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.archived-area-stats span {
    min-width: 0;
    border: 1px solid #d3d8dd;
    border-radius: 3px;
    padding: 6px 7px;
    background: #fff;
    color: #51606e;
    font-size: 11px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.archived-note {
    margin: 0;
    color: #51606e;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.archived-area-actions,
.archived-area-danger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.archived-area-actions label,
.archived-area-danger label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #4b5563;
    font-size: 11px;
    font-weight: 900;
}

.archived-area-actions select,
.archived-area-danger input {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    border: 1px solid var(--admin-line);
    border-radius: 3px;
    padding: 0 9px;
    background: #fff;
    color: var(--admin-ink);
    font-weight: 800;
}

.archived-area-actions .save-button,
.archived-area-danger .danger-button {
    min-width: 150px;
    height: 32px;
}

.office-inline-message {
    min-height: 18px;
    margin: 0;
    color: #51606e;
    font-size: 12px;
    font-weight: 850;
}

.office-inline-message.good {
    color: #176f4d;
}

.office-inline-message.danger {
    color: #b94134;
}

.office-personal-dashboard {
    margin-bottom: 14px;
}

.office-personal-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.office-personal-tile {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 3px 8px;
    align-items: start;
    min-height: 76px;
    border: 1px solid #c5ccd3;
    border-radius: 5px;
    padding: 9px;
    background: linear-gradient(#fff, #eef1f4);
    color: #17212b;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.office-personal-tile.active {
    border-color: #176f4d;
    box-shadow: inset 0 0 0 2px rgba(23,111,77,.16);
}

.office-personal-tile span {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #adb1b8;
    border-radius: 4px;
    background: #f7f8fa;
    color: #51606e;
    font-size: 11px;
    font-weight: 950;
}

.office-personal-tile strong,
.office-personal-tile small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-personal-tile strong {
    font-size: 13px;
    font-weight: 950;
}

.office-personal-tile small {
    color: #51606e;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

.office-dashboard-modal {
    position: fixed;
    inset: 0;
    z-index: 6200;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .42);
}

.office-dashboard-dialog {
    width: min(780px, 100%);
    max-height: min(780px, calc(100vh - 36px));
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 12px;
    border: 1px solid #adb1b8;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(15,23,42,.28);
}

.office-dashboard-dialog header,
.office-dashboard-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.office-dashboard-dialog h2 {
    margin: 0;
    font-size: 18px;
}

.office-dashboard-settings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.office-dashboard-settings .field-line {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #51606e;
    font-size: 11px;
    font-weight: 850;
}

.office-dashboard-settings select {
    width: 100%;
    min-width: 0;
}

.office-dashboard-editor-list {
    display: grid;
    gap: 6px;
    min-height: 120px;
    overflow: auto;
    padding-right: 2px;
}

.office-dashboard-editor-row {
    display: grid;
    grid-template-columns: 26px minmax(140px, .8fr) minmax(0, 1.35fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid #d0d6dc;
    border-radius: 5px;
    padding: 8px;
    background: linear-gradient(#fff, #f3f5f7);
}

.office-dashboard-editor-row.dragging {
    opacity: .55;
}

.office-dashboard-editor-row .drag-handle {
    color: #7a8794;
    cursor: grab;
    font-weight: 950;
    letter-spacing: 1px;
}

.office-dashboard-editor-row small {
    min-width: 0;
    color: #51606e;
    font-size: 11px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.office-dashboard-editor-row > div {
    display: inline-flex;
    gap: 5px;
}

.office-notification-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 6400;
    width: min(430px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 26px;
    gap: 8px;
    align-items: center;
    border: 1px solid #9a7c2c;
    border-left: 6px solid #c48916;
    border-radius: 7px;
    padding: 12px;
    background: linear-gradient(#fffaf0, #f2d18b);
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    color: #1e252c;
}

.office-notification-toast.good {
    border-color: #8ab6a2;
    border-left-color: #176f4d;
    background: linear-gradient(#f7fffb, #dcefe6);
}

.office-notification-toast.danger {
    border-color: #c48078;
    border-left-color: #b94134;
    background: linear-gradient(#fff7f5, #f1d7d3);
}

.office-notification-toast strong,
.office-notification-toast span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-notification-toast strong {
    font-size: 13px;
    font-weight: 950;
}

.office-notification-toast span {
    margin-top: 2px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.office-notification-toast a,
.office-notification-toast button {
    min-height: 26px;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    background: #fff;
    color: #17212b;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.office-notification-toast a {
    padding: 5px 8px;
}

.office-notification-toast button {
    width: 26px;
}

.office-message-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    width: min(360px, calc(100vw - 32px));
    border: 1px solid #adb1b8;
    border-left: 5px solid #176f4d;
    border-radius: 5px;
    padding: 12px;
    background: linear-gradient(#fff, #eef1f4);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}

.office-message-toast.danger {
    border-left-color: #b94134;
}

.office-message-toast strong,
.office-message-toast span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-message-toast strong {
    color: #17212b;
    font-size: 13px;
    font-weight: 950;
}

.office-message-toast span {
    grid-column: 1 / -1;
    color: #51606e;
    font-size: 12px;
    font-weight: 800;
}

.office-message-toast button {
    width: 24px;
    height: 24px;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    background: #fff;
    color: #17212b;
    font-weight: 950;
    cursor: pointer;
}

.office-area-grid,
.office-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.office-photo-card {
    min-width: 0;
    display: grid;
    gap: 5px;
    border: 1px solid #c4cbd2;
    border-radius: 5px;
    padding: 9px;
    background: #fff;
    color: #17212b;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.office-photo-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
    background: #e6eaee;
}

.office-photo-card strong,
.office-photo-card span,
.office-photo-card small {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.office-map-launch {
    display: grid;
    gap: 10px;
    max-width: 720px;
}

.office-map-launch strong,
.office-map-launch span {
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.office-upload-toast {
    position: fixed;
    z-index: 5000;
    right: 18px;
    bottom: 18px;
    width: min(380px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    border: 1px solid #8b6a22;
    border-radius: 6px;
    padding: 12px;
    background: linear-gradient(#fff7df, #f2d18b);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    color: #1e252c;
}

.office-upload-toast strong,
.office-upload-toast span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.office-upload-toast strong {
    font-size: 14px;
}

.office-upload-toast span {
    grid-column: 1 / -1;
    color: #4b3d1a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.office-upload-toast a {
    justify-self: start;
    border: 1px solid #8b6a22;
    border-radius: 3px;
    padding: 6px 9px;
    background: #fff;
    color: #1e252c;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.office-upload-toast button {
    width: 24px;
    height: 24px;
    border: 1px solid #8b6a22;
    border-radius: 3px;
    background: #fff;
    color: #1e252c;
    cursor: pointer;
    font-weight: 900;
}

.office-message-screen {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10050;
    width: min(420px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 10px;
    align-items: start;
    border: 1px solid #9fb8aa;
    border-left: 6px solid #176f4d;
    border-radius: 6px;
    padding: 13px 12px;
    background: linear-gradient(#ffffff, #edf6f1);
    box-shadow: 0 18px 54px rgba(10, 24, 38, .24);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.office-message-screen.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.office-message-screen.warn {
    border-color: #d7bd7c;
    border-left-color: #c48916;
    background: linear-gradient(#fff, #fff6df);
}

.office-message-screen.danger {
    border-color: #d8a19a;
    border-left-color: #b94134;
    background: linear-gradient(#fff, #fff0ee);
}

.office-message-screen strong,
.office-message-screen span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.28;
}

.office-message-screen strong {
    color: #111820;
    font-size: 14px;
    font-weight: 950;
}

.office-message-screen span {
    margin-top: 3px;
    color: #4e5c68;
    font-size: 12px;
    font-weight: 800;
}

.office-message-screen button {
    width: 26px;
    height: 26px;
    border: 1px solid #b8c0c7;
    border-radius: 3px;
    background: linear-gradient(#fff, #e7e9ec);
    color: #111820;
    font-weight: 950;
    cursor: pointer;
}

.assignment-active {
    border-color: rgba(23, 111, 77, .5) !important;
    background: #f3fbf6 !important;
}

.user-list em {
    color: var(--admin-green);
    font-style: normal;
    font-weight: 900;
}

.municipality-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.municipality-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.municipality-actions > span {
    border-radius: 999px;
    padding: 5px 9px;
    color: #37513f;
    background: #e7f4ec;
    font-size: 12px;
    font-weight: 900;
}

.round-button {
    border-color: #145f87 #104f70 #0c405b;
    background-image: linear-gradient(#eaf8ff, #cfeeff);
    color: #145f87;
}

.complete-button {
    border-color: #0d5f3e #0b5437 #08452d;
    background-image: linear-gradient(#e8f8ee, #cdeed9);
    color: #0d5639;
}

.work-complete-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(23, 111, 77, .35);
    border-radius: 8px;
    padding: 10px;
    background: #ecf9f0;
    color: #0d5639;
    font-size: 12px;
    font-weight: 900;
}

.work-complete-banner span {
    color: #234436;
    font-weight: 800;
}

.municipality-work {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--admin-line);
    padding-top: 10px;
}

.work-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.work-meta span {
    display: grid;
    gap: 4px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 10px;
    background: var(--admin-soft);
    color: var(--admin-muted);
    font-size: 12px;
    font-weight: 800;
}

.work-meta strong {
    color: var(--admin-ink);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.driver-work-list {
    display: grid;
    gap: 8px;
}

.driver-work {
    display: grid;
    gap: 8px;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.driver-work ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.driver-work li {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(120px, 1fr) auto;
    gap: 8px;
    color: var(--admin-muted);
    font-size: 12px;
}

.driver-work li strong {
    color: var(--admin-ink);
}

.driver-work time {
    color: var(--admin-muted);
    font-weight: 850;
}

.is-muted {
    opacity: .62;
}

.split-list {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 16px;
    align-items: start;
}

.split-list h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.record-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.record-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.round-detail {
    display: block;
    margin-top: 4px;
    color: var(--admin-green);
    font-weight: 900;
}

.record-list ul {
    margin: 9px 0 0;
    padding-left: 18px;
    color: var(--admin-muted);
    font-size: 13px;
}

.operations-card {
    grid-column: 1 / -1;
}

.operations-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid #b4b9be;
    background: #b4b9be;
}

.daily-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 10px;
    border: 1px solid #b4b9be;
    background: #b4b9be;
}

.daily-summary .operation-row:nth-child(n+6) {
    grid-column: 1 / -1;
}

.operation-row {
    display: grid;
    width: 100%;
    gap: 5px;
    min-height: 64px;
    border: 0;
    padding: 10px;
    background: linear-gradient(#fff, #e8ebee);
    text-align: left;
    cursor: default;
}

.operation-row.clickable,
.control-room-tile.clickable {
    cursor: pointer;
}

.operation-row.clickable:hover,
.control-room-tile.clickable:hover {
    filter: brightness(.985);
    outline: 1px solid #8aa9c8;
    outline-offset: -1px;
}

.operation-row.clickable:focus-visible,
.control-room-tile.clickable:focus-visible {
    outline: 2px solid #e77600;
    outline-offset: 2px;
}

.operation-row span {
    color: #5b6269;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.operation-row strong {
    color: #1f252b;
    font-size: 12px;
}

.operation-row.good {
    box-shadow: inset 4px 0 0 #176f4d;
}

.operation-row.warn {
    box-shadow: inset 4px 0 0 #c48916;
}

.operation-row.danger {
    box-shadow: inset 4px 0 0 #b94134;
}

.operations-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.map-card {
    min-height: calc(100vh - 142px);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: #9da2a7;
    border-radius: 6px;
    background: #d8d8d8;
}

.office-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 0;
    min-height: calc(100vh - 252px);
    border-top: 1px solid #a6a8aa;
}

.office-map {
    min-height: calc(100vh - 252px);
    border: 0;
    background: #e5e8eb;
}

.office-map-side {
    display: flex;
    flex-direction: column;
    align-content: start;
    gap: 0;
    min-width: 0;
    border: 0;
    border-left: 1px solid #8f9295;
    padding: 0;
    background: #d8d8d8;
    overflow: auto;
    scrollbar-width: thin;
}

.map-card > .section-heading {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #9da2a7;
    background: linear-gradient(#f4f4f4, #c9cbcd);
}

.map-card .section-heading h2 {
    font-size: 17px;
}

.map-card .section-heading .eyebrow {
    color: #40464d;
}

.office-map-panel-header {
    display: grid;
    gap: 3px;
    padding: 15px 12px 14px;
    border-bottom: 1px solid #a6a8aa;
    background: #efefef;
}

.office-map-panel-header span {
    color: #46505a;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.office-map-panel-header strong {
    color: #15191d;
    font-size: 16px;
    line-height: 1.2;
}

.office-map-panel-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #b8bbbe;
}

.office-map-panel-section h3 {
    margin: 0;
    font-size: 13px;
}

.office-layer-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.office-layer-menu button {
    height: 29px;
    border: 1px solid #9da2a7;
    border-radius: 3px;
    background-image: linear-gradient(#f7f8fa, #e0e3e6);
    color: #15191d;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.office-layer-menu button[aria-pressed="true"] {
    border-color: #4f7fbd;
    background: linear-gradient(#eaf2ff, #cbdff8);
    color: #163d73;
}

.map-legend {
    display: grid;
    gap: 8px;
}

.map-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #38424c;
    font-size: 12px;
    font-weight: 850;
}

.map-legend i {
    width: 12px;
    height: 12px;
    border: 1px solid #111820;
}

.map-legend .open { background: #c48916; }
.map-legend .done { background: #176f4d; }
.map-legend .issue { background: #2366d1; }
.map-legend .blocked { background: #b94134; }
.map-legend .driver {
    border-radius: 999px;
    background: #111820;
}

.office-marker {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(17, 24, 39, .65);
    background: #c48916;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.office-marker.geleegd { background: #176f4d; }
.office-marker.probleem { background: #2366d1; }
.office-marker.niet_bereikbaar { background: #b94134; }
.office-marker.driver {
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: #111820;
}

.office-map .maplibregl-ctrl-bottom-left {
    bottom: 8px;
}

.office-map .maplibregl-ctrl-group {
    border-radius: 3px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    max-height: 68vh;
    overflow: auto;
}

.photo-card {
    display: grid;
    gap: 8px;
    border: 1px solid #b7bcc1;
    padding: 10px;
    background: #f8f8f8;
}

.photo-card-preview {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.photo-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid #c6cbd0;
    background: #e5e8eb;
}

.photo-viewer {
    position: fixed;
    z-index: 2600;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(17, 24, 39, .72);
}

.photo-viewer.hidden {
    display: none;
}

.photo-viewer-window {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: min(980px, 96vw);
    height: min(760px, 92vh);
    border: 1px solid #8f9295;
    background: #111820;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.photo-viewer-window img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #0b0f14;
}

.photo-viewer-window footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 8px 12px;
    background: linear-gradient(#f4f4f4, #c9cbcd);
    color: #15191d;
    font-size: 13px;
    font-weight: 850;
}

.photo-viewer-close,
.photo-viewer-nav {
    position: absolute;
    z-index: 2;
    border: 1px solid #8d9096;
    border-radius: 3px;
    background-image: linear-gradient(#f7f8fa, #e0e3e6);
    color: #111820;
    cursor: pointer;
}

.photo-viewer-close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 30px;
    font-size: 18px;
    font-weight: 900;
}

.photo-viewer-nav {
    top: 50%;
    width: 38px;
    height: 54px;
    transform: translateY(-50%);
    font-size: 32px;
    line-height: 1;
}

.photo-viewer-nav.previous {
    left: 10px;
}

.photo-viewer-nav.next {
    right: 10px;
}

.photo-viewer-nav:disabled {
    opacity: .35;
    cursor: default;
}

.compact-records {
    max-height: 36vh;
}

.control-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.import-preview {
    display: grid;
    gap: 8px;
    border: 1px solid #b4b9be;
    padding: 12px;
    background: #fff;
}

.import-preview.hidden {
    display: none;
}

.import-preview ul {
    margin: 0;
    padding-left: 18px;
    color: #5b6269;
    font-size: 12px;
    font-weight: 800;
}

.priority-high {
    border-color: #b94134 !important;
    box-shadow: inset 4px 0 0 #b94134;
}

.schedule-rate {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    padding: 0 10px;
    background: #fff8e8;
    color: #704d0f;
    font-size: 12px;
    font-weight: 900;
}

.schedule-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid #b4b9be;
    background: #b4b9be;
}

.schedule-kpi {
    display: grid;
    gap: 4px;
    padding: 12px;
    background: linear-gradient(#fff, #e8ebee);
}

.schedule-kpi strong {
    font-size: 28px;
    line-height: 1;
}

.schedule-kpi span {
    color: #5b6269;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.schedule-kpi.green,
.schedule-card.green {
    box-shadow: inset 4px 0 0 #176f4d;
}

.schedule-kpi.yellow,
.schedule-card.yellow {
    box-shadow: inset 4px 0 0 #c48916;
}

.schedule-kpi.red,
.schedule-card.red {
    box-shadow: inset 4px 0 0 #b94134;
}

.schedule-list {
    display: grid;
    gap: 8px;
    max-height: 66vh;
    overflow: auto;
    padding-right: 4px;
}

.schedule-card {
    display: grid;
    gap: 10px;
    border: 1px solid #b7bcc1;
    padding: 12px;
    background: #f8f8f8;
    cursor: pointer;
}

.schedule-card.selected {
    border-color: #2366d1;
    background: #eef5ff;
}

.schedule-head,
.schedule-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.schedule-head strong {
    display: block;
    font-size: 15px;
}

.schedule-head small {
    color: #5b6269;
    font-size: 11px;
    font-weight: 850;
}

.schedule-head > span {
    border-radius: 3px;
    padding: 5px 8px;
    background: #e8edf2;
    color: #24303a;
    font-size: 11px;
    font-weight: 900;
}

.schedule-track {
    position: relative;
    height: 12px;
    overflow: hidden;
    border: 1px solid #aeb3b8;
    background: #fff;
}

.schedule-track i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
}

.schedule-track .expected {
    background: #d9dde2;
}

.schedule-track .actual {
    background: linear-gradient(90deg, #176f4d, #35a06f);
}

.schedule-card.yellow .schedule-track .actual {
    background: linear-gradient(90deg, #c48916, #f2c24f);
}

.schedule-card.red .schedule-track .actual {
    background: linear-gradient(90deg, #b94134, #e56050);
}

.street-progress-card.green {
    box-shadow: inset 4px 0 0 #176f4d;
}

.street-progress-card.yellow {
    box-shadow: inset 4px 0 0 #c48916;
}

.street-progress-card.red {
    box-shadow: inset 4px 0 0 #b94134;
}

.schedule-meta {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-meta span {
    display: grid;
    gap: 2px;
    color: #5b6269;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.schedule-meta b {
    color: #1f252b;
    font-size: 12px;
}

.round-driver-modal {
    position: fixed;
    z-index: 2600;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(20, 24, 28, .42);
}

.round-driver-card {
    display: grid;
    gap: 14px;
    width: min(480px, 100%);
    border: 1px solid #9fa4a9;
    padding: 16px;
    background: #f2f2f2;
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.round-driver-card h2,
.round-driver-card p {
    margin: 0;
}

.round-driver-card label {
    display: grid;
    gap: 6px;
    color: #5b6269;
    font-size: 12px;
    font-weight: 900;
}

.round-driver-card select {
    min-height: 34px;
    border: 1px solid #b7bcc1;
    border-radius: 3px;
    padding: 0 9px;
    background: #fff;
    color: #1f252b;
    font-weight: 800;
}

.round-driver-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.status-pill {
    border-radius: 999px;
    padding: 5px 9px;
    background: #e8edf2;
    color: #435363;
    font-size: 12px;
    font-weight: 900;
}

.round-pill {
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 900;
}

.round-done {
    background: #dff3e7;
    color: #16603c;
}

.round-open {
    background: #e9f7ff;
    color: #145f87;
}

.status-geleegd {
    background: #dff3e7;
    color: #16603c;
}

.status-niet_bereikbaar,
.status-probleem {
    background: #fde4dd;
    color: #9c3525;
}

.secondary-button,
.danger-button,
.save-button {
    box-sizing: border-box;
    min-height: 34px;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    padding: 0 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, .35) 0 1px 0 inset;
    text-align: center;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

.secondary-button:focus-visible,
.danger-button:focus-visible,
.save-button:focus-visible,
.mini-button:focus-visible,
.admin-toolbar button:focus-visible,
.admin-tabs button:focus-visible {
    border-color: #e0a126;
    box-shadow:
        rgba(255, 255, 255, .35) 0 1px 0 inset,
        rgba(224, 161, 38, .5) 0 0 3px 2px;
    outline: 0;
}

.save-button {
    border-color: #0d5f3e #0b5437 #08452d;
    background-image: linear-gradient(#21845d, var(--admin-green));
    color: #fff;
}

.secondary-button {
    border-color: #d5d9d9 #c6cacc #b7babd;
    background-image: linear-gradient(#ffffff, #edf0f3);
    color: var(--admin-ink);
}

.danger-button {
    border-color: #9f2828 #8e2222 #751a1a;
    background-image: linear-gradient(#d94b4b, var(--admin-red));
    color: #fff;
}

.danger-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.empty-state {
    margin: 0;
    color: var(--admin-muted);
    font-weight: 850;
}

@media (max-width: 1100px) {
    .admin-grid,
    .overview-grid,
    .office-map-layout,
    .split-list {
        grid-template-columns: 1fr;
    }

    .admin-header,
    .admin-toolbar,
    .section-heading,
    .filter-row,
    .admin-brand {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-stats,
    .operations-list,
    .schedule-summary,
    .schedule-meta,
    .user-form,
    .assignment-form,
    .municipality-form,
    .work-meta,
    .driver-work li {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .admin-shell {
        width: min(100% - 20px, 1520px);
        padding-top: 14px;
    }

    .admin-tabs {
        overflow-x: auto;
    }

    .admin-tabs button {
        flex: 0 0 auto;
    }

    .admin-brand img {
        width: 138px;
    }
}

/* Kantoorportal in dezelfde MapKit/Kikker-achtige stijl als de chauffeurskant. */
.server-body {
    min-height: 100vh;
    overflow: auto;
    color: #1f252b;
    background: #d6d8da;
}

.server-body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 60px 0 0;
    background:
        linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.35)),
        repeating-linear-gradient(0deg, rgba(105, 115, 125, .08) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(105, 115, 125, .07) 0 1px, transparent 1px 44px),
        #e9ecef;
}

.admin-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 60px 0 26px;
}

.kantoor-toolbar {
    position: fixed;
    z-index: 1800;
    top: 0;
    left: 0;
    right: 0;
    min-height: 60px;
    height: 60px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px 0 10px;
    color: #23282d;
    border-bottom: 1px solid #8f9295;
    background: linear-gradient(#eeeeee, #c7c9cb 48%, #b4b6b8);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 1px 3px rgba(0,0,0,.22);
}

.admin-brand {
    min-width: 330px;
    gap: 12px;
}

.admin-brand img {
    width: 86px;
    max-height: 44px;
    object-fit: contain;
    filter: none;
}

.admin-header h1 {
    color: #1f252b;
    font-size: 17px;
    line-height: 1.05;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.admin-header .eyebrow {
    margin-bottom: 3px;
    color: #5b6269;
    font-size: 10px;
    letter-spacing: .06em;
}

.admin-toolbar {
    align-self: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.admin-toolbar select {
    width: min(330px, 30vw);
    min-height: 28px;
    height: 28px;
    border-color: #c8cdd2;
    border-radius: 4px;
    padding: 0 9px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.09);
    font-size: 12px;
}

.admin-toolbar button,
.admin-link-button,
.secondary-button,
.danger-button,
.save-button,
.mini-button,
.admin-tabs button {
    min-height: 29px;
    border-color: #adb1b8 #a2a6ac #8d9096;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
    color: #111820;
    font-size: 12px;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.admin-toolbar button:hover,
.admin-link-button:hover,
.secondary-button:hover,
.mini-button:hover,
.admin-tabs button:hover {
    border-color: #a2a6ac #979aa1 #82858a;
}

.save-button {
    border-color: #0d5f3e #0b5437 #08452d;
    background-image: linear-gradient(#21845d, #176f4d);
    color: #fff;
    text-shadow: none;
}

.danger-button {
    border-color: #9f2828 #8e2222 #751a1a;
    background-image: linear-gradient(#d94b4b, #b94134);
    color: #fff;
    text-shadow: none;
}

.kantoor-tabs {
    position: sticky;
    z-index: 900;
    top: 60px;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid #a0a4a8;
    border-radius: 0;
    background: #d9d9d9;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.kantoor-tabs button {
    min-width: 118px;
    min-height: 42px;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 5px;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #343a40;
}

.kantoor-tabs button span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #8c9398;
    border-radius: 3px;
    background: linear-gradient(#f7f8fa, #d9dde2);
    color: #1f2933;
    font-size: 13px;
}

.kantoor-tabs button.active {
    border-color: #8d9096;
    background: linear-gradient(#f3f4f5, #c4c8cc);
    color: #111820;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}

.admin-tab-panel {
    padding: 14px 14px 0;
}

.selected-area-context {
    position: sticky;
    z-index: 850;
    top: 103px;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, .7fr));
    gap: 1px;
    margin: 0 14px 0;
    border: 1px solid #a0a4a8;
    background: #a0a4a8;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.sla-control-card {
    margin-bottom: 12px;
}

.sla-control-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
}

.sla-control-grid label,
.sla-note-line {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #3f4650;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.sla-control-grid input,
.sla-control-grid select,
.sla-note-line input {
    width: 100%;
    min-height: 32px;
    border: 1px solid #b3b8be;
    border-radius: 3px;
    padding: 0 9px;
    background: #fff;
    color: #151a20;
    font-size: 13px;
    text-transform: none;
}

.sla-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sla-dashboard {
    display: grid;
    gap: 10px;
    border-top: 1px solid #c4c8cc;
    padding-top: 10px;
}

.sla-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 8px;
}

.sla-driver-list,
.sla-plan-grid {
    display: grid;
    gap: 8px;
}

.sla-driver-advice,
.sla-plan-bucket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    border: 1px solid #c4c8cc;
    border-left-width: 4px;
    padding: 8px 10px;
    background: linear-gradient(#ffffff, #eceff2);
}

.sla-driver-advice strong,
.sla-plan-bucket strong {
    color: #17202a;
}

.sla-driver-advice small,
.sla-plan-bucket small {
    display: block;
    overflow: hidden;
    color: #56616d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sla-driver-advice.green,
.sla-driver-advice.recommended {
    border-left-color: #176f4d;
}

.sla-driver-advice.yellow {
    border-left-color: #c48916;
}

.sla-driver-advice.red {
    border-left-color: #bf3434;
}

.sla-driver-advice.recommended {
    background: linear-gradient(#f5fff9, #e3f6ec);
}

.sla-plan-bucket {
    grid-template-columns: minmax(160px, .5fr) auto minmax(0, 1fr);
    border-left-color: #2366d1;
}

.selected-area-context > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 10px;
    background: linear-gradient(#ffffff, #e8ebee);
}

.selected-area-context span {
    overflow: hidden;
    color: #5b6269;
    font-size: 10px;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.selected-area-context strong {
    overflow: hidden;
    color: #1f252b;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-intro {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #aeb3b8;
    border-radius: 0;
    background: linear-gradient(#f7f8fa, #e7e9ec);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.dashboard-intro h2 {
    font-size: 18px;
}

.dashboard-intro > p {
    color: #4c5660;
    font-size: 13px;
}

.admin-grid,
.overview-grid {
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 12px;
}

.admin-card {
    gap: 12px;
    border: 1px solid #aeb3b8;
    border-radius: 0;
    padding: 12px;
    background: #eeeeee;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.admin-card h2 {
    font-size: 17px;
}

.admin-card h3 {
    font-size: 14px;
}

.section-heading {
    align-items: center;
    min-height: 42px;
    padding: 6px 8px 10px;
    border-bottom: 1px solid #b6bbc0;
    background: #e6e6e6;
}

.section-heading .eyebrow {
    color: #5b6269;
    font-size: 10px;
    letter-spacing: .06em;
}

.filter-row select,
.filter-row input,
.user-form input,
.user-form select,
.municipality-form input,
.municipality-form select,
.assignment-form input,
.assignment-form select,
.login-card input {
    min-height: 32px;
    border-color: #c2c7cc;
    border-radius: 3px;
    padding: 0 9px;
    background: #fff;
    color: #1f252b;
    font-size: 12px;
    font-weight: 700;
}

.progress-card {
    justify-items: stretch;
}

.progress-ring {
    width: 144px;
    height: 144px;
    justify-self: center;
    background: conic-gradient(#176f4d 0deg, #d0d5d8 0deg);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.progress-ring span {
    width: 104px;
    height: 104px;
    background: #f6f6f6;
    font-size: 25px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}

.admin-stats {
    gap: 1px;
    border: 1px solid #b4b9be;
    background: #b4b9be;
}

.admin-stats div {
    min-height: 78px;
    border: 0;
    border-radius: 0;
    padding: 10px;
    background: linear-gradient(#fff, #e8ebee);
}

.admin-stats strong {
    font-size: 26px;
}

.admin-stats span,
.user-list small,
.activity-list small,
.municipality-list small,
.record-list small {
    color: #5b6269;
    font-size: 11px;
}

.user-form,
.municipality-form,
.assignment-form,
.assignment-panel {
    border-color: #b4b9be;
    border-radius: 0;
    background: #e5e5e5;
}

.check-line {
    min-height: 32px;
    border-color: #c2c7cc;
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
}

.user-list,
.assignment-list,
.activity-list,
.municipality-list,
.record-list {
    gap: 6px;
}

.user-list article,
.assignment-list article,
.activity-list article,
.municipality-list article,
.record-list article,
.driver-work,
.work-meta span {
    border-color: #b7bcc1;
    border-radius: 0;
    background: #f8f8f8;
    box-shadow: none;
}

.user-list article:hover,
.assignment-list article:hover,
.municipality-list article:hover,
.record-list article:hover {
    border-color: #7f9db9;
    box-shadow: inset 0 0 0 1px rgba(127,157,185,.22);
}

.user-card-actions > span,
.assignment-list article > span,
.municipality-actions > span,
.status-pill,
.round-pill {
    border-radius: 3px;
    padding: 4px 7px;
    font-size: 11px;
}

.split-list {
    gap: 12px;
}

.record-badges {
    gap: 4px;
}

.login-screen {
    background:
        linear-gradient(110deg, rgba(7, 24, 41, .95), rgba(20, 63, 107, .76) 44%, rgba(16, 116, 87, .42)),
        url("kobis-login-bg.jpg") center right / cover no-repeat;
}

.login-card {
    width: min(450px, 100%);
    border-radius: 8px;
    border-color: rgba(255,255,255,.72);
    padding: 28px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 28px 76px rgba(0,0,0,.34);
}

body.office-theme-dark.server-body {
    --admin-bg: #101820;
    --admin-ink: #edf4f8;
    --admin-muted: #a9b6c1;
    --admin-line: #344452;
    --admin-card: #18232d;
    --admin-soft: #111b24;
    --admin-yellow: #f3bd59;
    --admin-green: #32a574;
    --admin-blue: #69a8e8;
    --admin-red: #ef756c;
    --admin-shadow: 0 18px 48px rgba(0, 0, 0, .34);
    color: var(--admin-ink);
    background: #0f1720;
}

body.office-theme-dark.server-body::before {
    background:
        linear-gradient(rgba(8, 13, 18, .72), rgba(13, 20, 27, .78)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 44px),
        #101820;
}

body.office-theme-dark .kantoor-toolbar {
    color: #edf4f8;
    border-bottom-color: #04070a;
    background: linear-gradient(#2d3944, #1b2630 48%, #121a22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 1px 6px rgba(0,0,0,.48);
}

body.office-theme-dark .admin-toolbar {
    border-color: rgba(255,255,255,.12);
    background: rgba(0,0,0,.16);
}

body.office-theme-dark :is(.admin-card, .dashboard-intro, .admin-tabs, .office-page-nav, .control-centre-nav, .office-personal-tile, .office-dashboard-dialog, .office-page-record, .user-column, .user-card, .assignment-panel, .office-photo-card, .map-card, .dossier-command, .dossier-action-link, .dossier-workflow-step, .upload-job-card, .upload-advice, .office-close-summary article, .archived-area-card, .system-health-item, .system-log-row, .admin-area-table article > div) {
    border-color: var(--admin-line);
    background: linear-gradient(#1b2732, #15202a);
    color: var(--admin-ink);
    box-shadow: var(--admin-shadow);
}

body.office-theme-dark :is(.cc-fast-hero article, .dossier-kpi-row article, .admin-stats div, .office-next-step, .office-dashboard-editor-row, .office-import-panel, .office-import-form, .office-import-mode label, .planning-panel-scroll, .sla-control-card, .office-close-form, .office-close-action, .record-item, .activity-list article, .municipality-list article, .assignment-list article, .user-list article) {
    border-color: var(--admin-line);
    background: linear-gradient(#1a2631, #121d26);
    color: var(--admin-ink);
}

body.office-theme-dark :is(.admin-tabs a, .admin-tabs button, .office-page-nav a, .control-centre-nav a, .mini-button, .secondary-button, .office-action-button, .admin-link-button, .danger-button, .save-button) {
    border-color: #3d4c59 #33414d #26323d;
    background-image: linear-gradient(#263542, #18242e);
    color: #edf4f8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

body.office-theme-dark :is(.save-button) {
    border-color: #2e8765 #257659 #1d5f48;
    background-image: linear-gradient(#32a574, #207857);
}

body.office-theme-dark :is(.danger-button) {
    border-color: #a6453d #8e3831 #6c2b27;
    background-image: linear-gradient(#d65f57, #9d3d36);
}

body.office-theme-dark :is(input, select, textarea, .check-line) {
    border-color: var(--admin-line);
    background: #0f1821;
    color: var(--admin-ink);
}

body.office-theme-dark option {
    background: #0f1821;
    color: var(--admin-ink);
}

body.office-theme-dark :is(.eyebrow, .muted-copy, small, .office-personal-tile small, .office-dashboard-editor-row small, .dashboard-intro > p, .office-next-step span, .office-page-record span, .office-page-record small, .dossier-facts dt, .dossier-facts dd, .section-heading p, .upload-advice span) {
    color: var(--admin-muted);
}

body.office-theme-dark :is(.section-heading, .user-column-heading, .office-dashboard-dialog header, .office-dashboard-dialog footer) {
    border-color: var(--admin-line);
}

body.office-theme-dark .office-personal-tile.active,
body.office-theme-dark .office-page-nav a.active,
body.office-theme-dark .control-centre-nav a.active {
    border-color: var(--admin-green);
    box-shadow: inset 0 0 0 2px rgba(50, 165, 116, .25), var(--admin-shadow);
}

body.office-theme-dark .office-dashboard-modal {
    background: rgba(0, 0, 0, .62);
}

body.office-theme-dark .office-message-toast,
body.office-theme-dark .office-notification-toast {
    background: linear-gradient(#182532, #111b24);
    border-color: var(--admin-line);
    color: var(--admin-ink);
}

body.office-theme-dark .office-notification-toast.good {
    border-left-color: var(--admin-green);
}

body.office-theme-dark .office-notification-toast.danger {
    border-left-color: var(--admin-red);
}

body.office-theme-dark .empty-state {
    color: var(--admin-muted);
}

html.kobis-theme-dark {
    --admin-bg: #101820;
    --admin-ink: #edf4f8;
    --admin-muted: #a9b6c1;
    --admin-line: #344452;
    --admin-card: #18232d;
    --admin-soft: #111b24;
    --admin-yellow: #f3bd59;
    --admin-green: #32a574;
    --admin-blue: #69a8e8;
    --admin-red: #ef756c;
    --admin-shadow: 0 18px 48px rgba(0, 0, 0, .34);
    color-scheme: dark;
    background: #0f1720;
}

html.kobis-theme-light {
    color-scheme: light;
}

html.kobis-theme-dark body.server-body,
body.office-theme-dark.server-body {
    color: var(--admin-ink);
    background: #0f1720;
}

html.kobis-theme-dark body.server-body::before,
body.office-theme-dark.server-body::before {
    background:
        linear-gradient(rgba(8, 13, 18, .72), rgba(13, 20, 27, .78)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 44px),
        #101820;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .admin-card,
    .admin-command-strip article,
    .admin-focus-grid article,
    .active-area-panel,
    .archived-area-panel,
    .area-split-switch a,
    .assignment-panel,
    .cc-alarm-strip,
    .cc-command-card,
    .cc-command-status,
    .cc-empty-workareas,
    .cc-fast-hero article,
    .cc-module-grid a,
    .cc-panel,
    .cc-radar,
    .cc-work-card,
    .control-room-tile,
    .daily-summary .operation-row,
    .dashboard-intro,
    .dossier-action-link,
    .dossier-command,
    .dossier-kpi-row article,
    .dossier-workflow-step,
    .driver-work,
    .import-preview,
    .login-card,
    .office-action-button,
    .office-close-actions,
    .office-close-form,
    .office-close-summary article,
    .office-dashboard-dialog,
    .office-dashboard-editor-row,
    .office-import-form,
    .office-import-mode label,
    .office-import-panel,
    .office-map-panel-header,
    .office-map-panel-section,
    .office-map-side,
    .office-module-group,
    .office-next-step,
    .office-page-content-card,
    .office-page-record,
    .office-personal-tile,
    .office-photo-card,
    .office-step-list li,
    .operations-list .operation-row,
    .photo-card,
    .planning-panel-scroll,
    .record-item,
    .round-driver-card,
    .schedule-card,
    .schedule-kpi,
    .sla-control-card,
    .system-health-item,
    .system-log-row,
    .upload-advice,
    .upload-job-card,
    .user-card,
    .user-column,
    .user-list article,
    .webmail-compose,
    .webmail-folders,
    .webmail-list,
    .webmail-reader,
    .webmail-toolbar
) {
    border-color: var(--admin-line);
    background: linear-gradient(#1b2732, #121d26);
    color: var(--admin-ink);
    box-shadow: var(--admin-shadow);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .admin-tabs,
    .control-centre-nav,
    .kantoor-tabs,
    .office-nav-group,
    .office-page-nav,
    .selected-area-context,
    .schedule-summary,
    .operations-list,
    .daily-summary,
    .control-room-grid,
    .cc-hero
) {
    border-color: #263440;
    background: #18232d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .admin-toolbar button,
    .admin-link-button,
    .admin-tabs button,
    .admin-tabs a,
    .complete-button,
    .control-centre-nav a,
    .mini-button,
    .office-action-button,
    .office-layer-menu button,
    .office-next-step a,
    .office-page-nav a,
    .round-button,
    .secondary-button
) {
    border-color: #3d4c59 #33414d #26323d;
    background-image: linear-gradient(#263542, #18242e);
    color: #edf4f8;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    input,
    select,
    textarea,
    .check-line,
    .field-line,
    .office-dashboard-settings .field-line,
    .archived-area-actions label,
    .archived-area-danger label,
    .round-driver-card label
) {
    border-color: var(--admin-line);
    background: #0f1821;
    color: var(--admin-ink);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(option) {
    background: #0f1821;
    color: var(--admin-ink);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    h1,
    h2,
    h3,
    h4,
    label,
    strong,
    th,
    .admin-header h1,
    .cc-command-status strong,
    .cc-empty-workareas strong,
    .cc-work-stats b,
    .control-room-tile strong,
    .dossier-command h3,
    .dossier-facts dd,
    .dossier-kpi-row strong,
    .dossier-next-action strong,
    .office-close-form > strong,
    .office-close-summary strong,
    .office-message-screen strong,
    .office-message-toast strong,
    .operation-row strong,
    .schedule-meta b,
    .system-health-item strong,
    .webmail-reader h2
) {
    color: #f3f8fb;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .admin-header .eyebrow,
    .archived-note,
    .cc-command-status small,
    .cc-command-status span,
    .cc-empty-workareas span,
    .cc-module-grid span,
    .cc-panel header span,
    .cc-work-card em,
    .cc-work-stats small,
    .control-room-tile small,
    .control-room-tile span,
    .dashboard-intro > p,
    .dossier-action-link small,
    .dossier-command span,
    .dossier-facts dt,
    .dossier-kpi-row small,
    .dossier-kpi-row span,
    .dossier-next-action span,
    .dossier-workflow-step small,
    .eyebrow,
    .login-copy,
    .login-footnote,
    .map-legend span,
    .muted-copy,
    .office-action-button span,
    .office-close-form > span,
    .office-close-summary span,
    .office-dashboard-editor-row small,
    .office-inline-message,
    .office-module-group > b,
    .office-nav-group > b,
    .office-next-step span,
    .office-page-record small,
    .office-personal-tile small,
    .office-step-list strong,
    .operation-row span,
    .record-list ul,
    .schedule-head small,
    .schedule-kpi span,
    .schedule-meta span,
    .upload-advice span,
    .work-meta span,
    small
) {
    color: var(--admin-muted);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .office-page-nav a span,
    .control-centre-nav a span,
    .dossier-action-link span,
    .office-personal-tile span,
    .office-step-list span,
    .area-split-switch strong,
    .status-pill,
    .round-pill,
    .schedule-head > span,
    .work-meta span,
    .cc-work-stats span,
    .archived-area-stats span
) {
    border-color: #3c4c58;
    background: #101a23;
    color: #dce8ef;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .assignment-active,
    .office-personal-tile.active,
    .office-page-nav a.active,
    .control-centre-nav a.active,
    .schedule-card.selected
) {
    border-color: var(--admin-green) !important;
    background: linear-gradient(#1c3329, #13251d) !important;
    color: #f3f8fb;
    box-shadow: inset 0 0 0 2px rgba(50, 165, 116, .22), var(--admin-shadow);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .save-button,
    .complete-button
) {
    border-color: #2e8765 #257659 #1d5f48;
    background-image: linear-gradient(#32a574, #207857);
    color: #fff;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .danger-button
) {
    border-color: #a6453d #8e3831 #6c2b27;
    background-image: linear-gradient(#d65f57, #9d3d36);
    color: #fff;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .office-message-screen,
    .office-message-toast,
    .office-notification-toast,
    .office-upload-toast
) {
    border-color: var(--admin-line);
    background: linear-gradient(#182532, #111b24);
    color: var(--admin-ink);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .office-message-screen.warn,
    .office-notification-toast.warn,
    .office-upload-toast
) {
    border-left-color: var(--admin-yellow);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .office-message-screen.danger,
    .office-notification-toast.danger
) {
    border-left-color: var(--admin-red);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .office-map,
    .map-card,
    .photo-viewer-window,
    .photo-viewer-window footer
) {
    border-color: var(--admin-line);
    background: #121a22;
    color: var(--admin-ink);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) ::placeholder {
    color: #7f90a0;
    opacity: 1;
}

@media (max-width: 1100px) {
    .kantoor-toolbar {
        position: static;
        height: auto;
        min-height: 60px;
        flex-direction: column;
        padding: 10px;
    }

    .admin-shell {
        padding-top: 0;
    }

    .kantoor-tabs {
        top: 0;
        overflow-x: auto;
    }

    .office-page-nav,
    .control-centre-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .office-nav-group {
        flex: 0 0 auto;
    }

    .office-page-nav a,
    .control-centre-nav a {
        flex: 0 0 auto;
    }

    .selected-area-context {
        top: 42px;
        grid-template-columns: 1fr 1fr;
    }

    .admin-toolbar select {
        width: 100%;
    }

    .control-room-grid,
    .cc-hero,
    .cc-ops-wall,
    .cc-second-row,
    .cc-fast-hero,
    .cc-fast-grid,
    .cc-command-card,
    .cc-area-card-grid,
    .office-workflow-grid,
    .office-module-groups,
    .dossier-command,
    .dossier-grid,
    .office-page-grid,
    .office-close-action-grid,
    .archived-area-grid,
    .office-area-grid,
    .office-photo-grid,
    .office-import-form,
    .office-import-mode,
    .import-preview-grid,
    .cc-module-grid,
    .system-health-grid,
    .admin-centre-grid,
    .admin-centre-lists,
    .schedule-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .office-close-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dossier-kpi-row,
    .dossier-action-rail,
    .dossier-workflow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-command-status,
    .cc-radar {
        grid-column: 1 / -1;
    }

    .cc-action-grid,
    .cc-dispatch-grid,
    .cc-alarm-strip,
    .system-health-details {
        grid-template-columns: 1fr;
    }

    .admin-area-table article {
        grid-template-columns: 1fr 1fr;
    }

    .office-dashboard-settings,
    .office-dashboard-editor-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .office-dashboard-editor-row .drag-handle {
        display: none;
    }
}

@media (max-width: 760px) {
    .control-room-grid,
    .cc-hero,
    .cc-ops-wall,
    .cc-second-row,
    .cc-fast-hero,
    .cc-fast-grid,
    .cc-command-card,
    .cc-area-card-grid,
    .office-workflow-grid,
    .office-module-groups,
    .area-split-switch,
    .dossier-command,
    .dossier-grid,
    .dossier-kpi-row,
    .dossier-action-rail,
    .dossier-workflow,
    .office-page-grid,
    .office-close-action-grid,
    .office-close-summary,
    .archived-area-grid,
    .office-area-grid,
    .office-photo-grid,
    .office-import-form,
    .office-import-mode,
    .import-preview-grid,
    .cc-module-grid,
    .system-health-grid,
    .admin-centre-grid,
    .admin-centre-lists,
    .schedule-summary {
        grid-template-columns: 1fr;
    }

    .archived-area-stats,
    .archived-area-actions,
    .archived-area-danger {
        grid-template-columns: 1fr;
    }

    .archived-area-actions .save-button,
    .archived-area-danger .danger-button {
        width: 100%;
    }

    .cc-command-actions,
    .cc-empty-workareas div {
        justify-content: stretch;
    }

    .cc-command-actions > *,
    .cc-empty-workareas div > * {
        width: 100%;
    }

    .cc-work-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-area-table article {
        grid-template-columns: 1fr;
    }

    .cc-radar {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .cc-location-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .cc-location-row b {
        grid-column: 2;
        grid-row: auto;
        justify-self: start;
    }

    .office-next-step {
        grid-template-columns: 1fr;
    }

    .office-next-step a {
        justify-content: stretch;
        text-align: center;
    }

    .office-personal-tiles,
    .office-dashboard-settings,
    .office-dashboard-editor-row {
        grid-template-columns: 1fr;
    }

    .office-dashboard-dialog {
        max-height: calc(100vh - 20px);
        padding: 10px;
    }

    .office-dashboard-dialog header,
    .office-dashboard-dialog footer {
        align-items: stretch;
        flex-direction: column;
    }

    .office-dashboard-editor-row > div {
        justify-content: stretch;
    }

    .office-dashboard-editor-row > div > button,
    .office-notification-toast a {
        width: 100%;
    }

    .office-notification-toast {
        grid-template-columns: minmax(0, 1fr) 26px;
    }

    .office-notification-toast a {
        grid-column: 1 / -1;
        text-align: center;
    }
}

/* Laatste donkere egalisatielaag voor kantoor/planning/admin modules. */
:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .office-personal-dashboard,
    .dashboard-intro,
    .office-page-intro,
    .office-steps-card,
    .office-actions-card,
    .office-page-content-card,
    .active-area-panel,
    .archived-area-panel,
    .office-page-content > section,
    .office-page-grid > section,
    .office-area-grid > section,
    .planning-board-grid > section,
    .user-editor-panel,
    .user-overview,
    .upload-inbox-list,
    .upload-intro,
    .office-import-preview,
    .office-address-results,
    .office-close-action,
    .active-area-panel .section-heading,
    .archived-area-panel .section-heading,
    .office-page-content-card > .section-heading,
    .office-workflow-grid .section-heading,
    .office-personal-dashboard .section-heading
) {
    border-color: var(--admin-line) !important;
    background: linear-gradient(#1b2732, #121d26) !important;
    color: var(--admin-ink) !important;
    box-shadow: var(--admin-shadow);
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .area-split-switch,
    .archived-area-grid,
    .office-workflow-grid,
    .office-page-grid,
    .office-area-grid,
    .planning-board-grid,
    .office-page-content
) {
    background: transparent !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .area-split-switch a,
    .office-step-list li,
    .office-action-button,
    .office-personal-tile,
    .office-next-step,
    .office-page-record,
    .archived-area-card,
    .active-area-panel article,
    .archived-area-panel article,
    .upload-job-card,
    .upload-advice,
    .record-item,
    .schedule-card,
    .user-list article,
    .assignment-list article,
    .municipality-list article,
    .activity-list article
) {
    border-color: var(--admin-line) !important;
    background: linear-gradient(#1a2631, #111b24) !important;
    color: var(--admin-ink) !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .area-split-switch strong,
    .office-step-list span,
    .office-personal-tile span,
    .archived-area-stats span,
    .work-meta span,
    .status-pill,
    .round-pill,
    .office-status-pill
) {
    border-color: #3c4c58 !important;
    background: #101a23 !important;
    color: #dce8ef !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .dashboard-intro h2,
    .office-page-content-card h2,
    .office-page-content-card h3,
    .office-workflow-grid h2,
    .office-workflow-grid h3,
    .office-personal-dashboard h2,
    .active-area-panel h3,
    .archived-area-panel h3,
    .area-split-switch span,
    .office-page-record strong,
    .office-action-button strong,
    .office-step-list strong
) {
    color: #f3f8fb !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .dashboard-intro p,
    .office-page-content-card p,
    .office-workflow-grid p,
    .office-personal-dashboard p,
    .office-action-button span,
    .office-page-record span,
    .office-page-record small,
    .archived-note,
    .archived-area-actions label,
    .archived-area-danger label,
    .area-split-switch span,
    .eyebrow,
    .muted-copy,
    small
) {
    color: var(--admin-muted) !important;
}

/* Control Room dynamische lijsten en tegels worden door JavaScript gevuld. */
:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .cc-active-overview,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-module-launcher,
    .cc-area-card-grid,
    .cc-list,
    .cc-alert-list,
    .cc-driver-list,
    .cc-location-list,
    .cc-command-centre,
    .cc-fast-grid.lower > article,
    .cc-module-grid,
    .office-module-groups
) {
    background: transparent !important;
    color: var(--admin-ink) !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .cc-area-row,
    .ultimate-alert-row,
    .cc-driver-row,
    .cc-dispatch-grid article,
    .cc-location-row,
    .cc-work-card,
    .cc-empty-workareas,
    .office-module-group a,
    .control-room-tile,
    .cc-fast-wall .empty-state,
    .cc-fast-radar .empty-state,
    .cc-fast-dispatch .empty-state,
    .cc-location-list .empty-state,
    .cc-area-card-grid .empty-state
) {
    border-color: var(--admin-line) !important;
    background: linear-gradient(#1a2631, #111b24) !important;
    color: var(--admin-ink) !important;
    box-shadow: none;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .cc-area-code,
    .cc-area-metrics,
    .cc-driver-row > span,
    .cc-location-row > span,
    .cc-work-card-type,
    .cc-work-stats span,
    .cc-dispatch-grid,
    .cc-area-main i,
    .cc-work-progress
) {
    border-color: #3c4c58 !important;
    background: #101a23 !important;
    color: #dce8ef !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .cc-area-row strong,
    .ultimate-alert-row strong,
    .cc-driver-row strong,
    .cc-location-row strong,
    .cc-location-row b,
    .cc-area-metrics b,
    .cc-dispatch-grid b,
    .cc-work-card strong,
    .cc-work-stats b,
    .office-module-group a strong,
    .control-room-tile strong
) {
    color: #f3f8fb !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .cc-area-row small,
    .ultimate-alert-row small,
    .cc-driver-row small,
    .cc-driver-row time,
    .cc-location-row span,
    .cc-location-row small,
    .cc-area-metrics small,
    .cc-dispatch-grid span,
    .cc-work-card small,
    .cc-work-card em,
    .cc-work-stats small,
    .office-module-group a span,
    .control-room-tile span,
    .control-room-tile small
) {
    color: var(--admin-muted) !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .cc-area-row.good,
    .cc-location-row.good,
    .cc-work-card.good,
    .ultimate-alert-row.good,
    .control-room-tile.good
) {
    border-left-color: var(--admin-green) !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .cc-area-row.warn,
    .cc-location-row.warn,
    .cc-work-card.warn,
    .ultimate-alert-row.warn,
    .control-room-tile.warn
) {
    border-left-color: var(--admin-yellow) !important;
}

:is(html.kobis-theme-dark body.server-body, body.office-theme-dark) :is(
    .cc-area-row.danger,
    .cc-location-row.danger,
    .cc-work-card.danger,
    .ultimate-alert-row.danger,
    .control-room-tile.danger
) {
    border-left-color: var(--admin-red) !important;
}

/* Control Room hoofdpanelen: voorkom witte admin-card achtergronden. */
html.kobis-theme-dark body.control-centre-page :is(
    .cc-active-overview,
    .cc-command-card,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-fast-grid.lower > article,
    .cc-module-launcher
),
body.office-theme-dark.control-centre-page :is(
    .cc-active-overview,
    .cc-command-card,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-fast-grid.lower > article,
    .cc-module-launcher
) {
    border-color: var(--admin-line) !important;
    background: linear-gradient(#1b2732, #121d26) !important;
    color: var(--admin-ink) !important;
    box-shadow: var(--admin-shadow) !important;
}

html.kobis-theme-dark body.control-centre-page :is(
    .cc-active-overview,
    .cc-command-card,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-fast-grid.lower > article,
    .cc-module-launcher
) > .section-heading,
body.office-theme-dark.control-centre-page :is(
    .cc-active-overview,
    .cc-command-card,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-fast-grid.lower > article,
    .cc-module-launcher
) > .section-heading {
    border-color: var(--admin-line) !important;
    background: transparent !important;
    color: var(--admin-ink) !important;
}

html.kobis-theme-dark body.control-centre-page :is(
    .cc-active-overview,
    .cc-command-card,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-fast-grid.lower > article,
    .cc-module-launcher
) :is(h2, strong),
body.office-theme-dark.control-centre-page :is(
    .cc-active-overview,
    .cc-command-card,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-fast-grid.lower > article,
    .cc-module-launcher
) :is(h2, strong) {
    color: #f3f8fb !important;
}

html.kobis-theme-dark body.control-centre-page :is(
    .cc-active-overview,
    .cc-command-card,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-fast-grid.lower > article,
    .cc-module-launcher
) :is(.eyebrow, p, span, small),
body.office-theme-dark.control-centre-page :is(
    .cc-active-overview,
    .cc-command-card,
    .cc-fast-wall,
    .cc-fast-radar,
    .cc-fast-dispatch,
    .cc-fast-grid.lower > article,
    .cc-module-launcher
) :is(.eyebrow, p, span, small) {
    color: var(--admin-muted) !important;
}