.personnel-page {
    display: grid;
    gap: 18px;
    padding: 16px;
}

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

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

.personnel-module-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 18px;
    color: var(--ui-text);
    text-decoration: none;
    transition:
        border-color 120ms ease,
        background 120ms ease;
}

.personnel-module-card:hover {
    border-color:
        var(--tenant-primary, var(--ui-info));
    background: #fbfdfe;
}

.personnel-module-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--tenant-primary, #e85a32);
    background: rgb(232 90 50 / 10%);
}

.personnel-module-icon svg {
    width: 19px;
    height: 19px;
}

.personnel-module-content,
.personnel-summary-card small,
.personnel-summary-card strong {
    display: block;
}

.personnel-module-content strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.personnel-module-content small {
    display: block;
    color: var(--ui-text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.personnel-module-arrow {
    color: var(--ui-text-muted);
    font-size: 18px;
}

.personnel-summary-card {
    padding: 16px 18px;
}

.personnel-summary-card small {
    margin-bottom: 7px;
    color: var(--ui-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.personnel-summary-card strong {
    color: var(--ui-text);
    font-size: 28px;
    line-height: 1;
}

.personnel-panel {
    min-width: 0;
    padding: 18px;
}

.personnel-age-groups {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.personnel-age-card {
    display: block;
    min-width: 0;
    padding: 14px 16px;
    color: var(--ui-text);
    text-decoration: none;
}

.personnel-age-card small,
.personnel-age-card strong,
.personnel-age-card span {
    display: block;
}

.personnel-age-card small {
    min-height: 28px;
    color: var(--ui-text-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.personnel-age-card strong {
    margin: 5px 0;
    font-size: 27px;
    line-height: 1;
}

.personnel-age-card span {
    color: var(--ui-text-muted);
    font-size: 10px;
}

.personnel-age-card.is-active {
    border-color:
        var(--tenant-primary, var(--ui-info));
    box-shadow: inset 0 3px 0
        var(--tenant-primary, var(--ui-info));
}

.personnel-member-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.personnel-member-header h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.personnel-member-header p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 12px;
}

.personnel-age-notice {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #d8e6ed;
    border-radius: var(--ui-radius);
    color: #315566;
    background: #f3f8fa;
    font-size: 11px;
    line-height: 1.45;
}

.personnel-age-badge {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    color: #315566;
    background: #e8f1f5;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.personnel-age-badge.is-child_fire_brigade {
    color: #765600;
    background: #fff2c8;
}

.personnel-age-badge.is-youth_fire_brigade,
.personnel-age-badge.is-youth_training {
    color: #176789;
    background: #e7f1f7;
}

.personnel-age-badge.is-active_service {
    color: #22733b;
    background: #e5f4e9;
}

.personnel-age-badge.is-age_department {
    color: #6c4a82;
    background: #f0e7f5;
}

.personnel-age-badge.is-active_service_exception {
    color: #9a3d16;
    background: #ffeadf;
}

.personnel-excluded-note {
    margin: 12px 0 0;
    color: var(--ui-text-muted);
    font-size: 10px;
}

@media (max-width: 1000px) {
    .personnel-module-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

    .personnel-age-groups {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .personnel-page {
        padding: 8px;
    }

    .personnel-module-grid,
    .personnel-summary,
    .personnel-age-groups {
        grid-template-columns: 1fr;
    }

    .personnel-member-header {
        flex-direction: column;
    }

    .personnel-panel {
        padding: 12px;
    }
}