.personnel-page {
    padding:18px 28px;
    min-height:100%;
    color:var(--mud-palette-text-primary);
    background:radial-gradient(ellipse at 95% 0,rgba(197,163,94,.07),transparent 42%);
    font-family:Jura,sans-serif
}


.personnel-header {
    display:flex;
    align-items:center;
    gap:18px;
    padding:8px 0 18px
}

.personnel-header>div:nth-child(2) {
    flex:1
}

.personnel-emblem {
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border:1px solid rgba(197,163,94,.3);
    border-radius:var(--radius-sm, 12px);
    background:rgba(197,163,94,.08);
    color:var(--mud-palette-primary)
}

.personnel-emblem .mud-icon-root {
    font-size:30px
}

.personnel-eyebrow {
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--mud-palette-primary)
}

.personnel-header h1 {
    font-size:25px;
    font-weight:600;
    margin:4px 0 6px;
    letter-spacing:-.02em
}

.personnel-header p,.personnel-context p {
    margin:0;
    color:var(--mud-palette-text-secondary);
    font-size:13px
}


.personnel-groups {
    display:flex;
    border-bottom:1px solid var(--mud-palette-divider);
    gap:24px
}

.personnel-page .personnel-groups .personnel-group {
    border-radius:0!important;
    border:0;
    border-bottom:2px solid transparent;
    background:none;
    color:var(--mud-palette-text-secondary);
    padding:14px 2px;
    display:flex;
    gap:13px;
    align-items:center;
    font:inherit;
    cursor:pointer
}

.personnel-group strong {
    font-size:12px;
    font-variant-numeric:tabular-nums;
    opacity:.7
}

.personnel-page .personnel-groups .personnel-group.active {
    color:var(--mud-palette-primary);
    border-bottom-color:var(--mud-palette-primary)
}

.personnel-group.active strong {
    opacity:1
}

.personnel-tools {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 0
}

.personnel-search {
    flex:1;
    width:100%;
    max-width:510px
}

.personnel-context {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:2px 0 16px
}

.personnel-context h2 {
    font-size:16px;
    margin:0 0 5px
}

.personnel-context>span {
    font-size:12px;
    white-space:nowrap;
    color:var(--mud-palette-text-secondary)
}

.personnel-selection {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:10px 14px;
    margin-bottom:12px;
    border:1px solid rgba(197,163,94,.22);
    border-radius:var(--radius-sm);
    background:rgba(197,163,94,.07)
}

.personnel-selection-count strong {
    font-size:13px
}

.personnel-selection-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    width:100%;
    padding-top:8px;
    border-top:1px solid var(--mud-palette-divider)
}

.personnel-table-scroll {
    overflow:auto;
    border-top:1px solid var(--mud-palette-divider)
}

.personnel-table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    white-space:nowrap
}

.personnel-table th {
    text-align:left;
    font-weight:500;
    background:var(--mud-palette-surface);
    color:var(--mud-palette-text-secondary);
    position:sticky;
    top:0;
    z-index:1
}

.personnel-table th button {
    background:none;
    border:0;
    color:inherit;
    font:inherit;
    padding:17px 0;
    cursor:pointer
}

.personnel-table th button span {
    font-size:9px;
    color:var(--mud-palette-primary);
    margin-left:6px
}

.personnel-table td,.personnel-table th {
    padding:0 12px;
    border-bottom:1px solid var(--mud-palette-divider)
}

.personnel-table td {
    height:62px
}

.personnel-table .personnel-check {
    width:44px;
    padding:0 2px
}

.personnel-table tr:hover td {
    background:rgba(197,163,94,.035)
}

.personnel-table tr.selected td {
    background:rgba(197,163,94,.07)
}

.personnel-name {
    border:0;
    background:none;
    color:var(--mud-palette-text-primary);
    font:inherit;
    font-weight:600;
    cursor:pointer;
    padding:6px 0;
    text-align:left
}

.personnel-name:hover {
    color:var(--mud-palette-primary)
}

.personnel-page .personnel-name.hss-surface-button {
    border-radius:0;
    text-transform:none;
    font:inherit;
    font-weight:600;
    padding:6px 0
}

.personnel-group-selection {
    font-size:10px;
    color:var(--mud-palette-primary)
}

.personnel-search-hint {
    font-size:12px;
    color:var(--mud-palette-text-secondary)
}

.personnel-empty-actions {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px
}

.personnel-page .personnel-row-action .mud-button-root,
.personnel-page .personnel-detail .mud-button-root {
    font:inherit;
    text-transform:none;
    border-radius:var(--radius-sm);
    padding:8px 12px
}

.personnel-table tr.expanded td {
    background:rgba(197,163,94,.065);
    border-bottom-color:transparent
}

.personnel-table .personnel-detail-row>td {
    padding:0;
    white-space:normal;
    background:rgba(197,163,94,.035)
}

.personnel-detail {
    padding:8px 24px 18px 56px;
    border-left:2px solid var(--mud-palette-primary)
}

.personnel-detail-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}

.personnel-detail h3 { font-size:18px; margin:3px 0 0 }
.personnel-detail h4 { font-size:12px; color:var(--mud-palette-text-secondary); margin:0 0 6px }
.personnel-detail-notes { display:grid; grid-template-columns:3fr 2fr; gap:32px; padding:18px 0 }
.personnel-detail-notes p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; max-height:150px; overflow:auto }
.personnel-detail-actions { display:flex; flex-wrap:wrap; gap:4px 8px; border-top:1px solid var(--mud-palette-divider); padding-top:10px }
.personnel-detail-actions .personnel-remove { margin-left:auto }
.personnel-table .personnel-intake-status { font-size:11px }

.personnel-table small {
    display:block;
    font-size:10px;
    color:var(--mud-palette-text-secondary);
    margin-bottom:7px;
    letter-spacing:.02em
}

.personnel-rank {
    color:var(--mud-palette-primary)
}

.personnel-row-action {
    text-align:right
}

.personnel-empty {
    text-align:center;
    padding:65px 24px;
    color:var(--mud-palette-text-secondary)
}

.personnel-empty>.mud-icon-root {
    font-size:40px;
    color:var(--mud-palette-primary);
    margin-bottom:14px
}

.personnel-empty h3 {
    font-size:19px;
    color:var(--mud-palette-text-primary)
}

.personnel-sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0)
}

.personnel-page button:focus-visible {
    outline:2px solid var(--mud-palette-primary);
    outline-offset:3px
}


.personnel-dialog .hysec-dialog-header {
    display:flex;
    gap:16px;
    align-items:center;
    padding:8px 0
}

.personnel-dialog .header-icon {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    background:rgba(197,163,94,.09);
    color:var(--mud-palette-primary);
    border-radius:var(--radius-sm, 12px)
}

.personnel-dialog .header-title {
    font-size:22px;
    font-weight:600;
    letter-spacing:0;
    color:var(--mud-palette-text-primary);
    text-transform:none
}

.personnel-dialog .header-subtitle {
    font-size:13px;
    margin-top:4px;
    color:var(--mud-palette-text-secondary)
}

.personnel-dialog .hysec-form-group {
    margin-bottom:20px
}

.personnel-dialog .form-label,.personnel-dialog .category-header {
    display:block;
    font-size:12px;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--mud-palette-text-secondary);
    margin-bottom:10px
}

.personnel-dialog .role-category {
    padding:14px 0;
    border-bottom:1px solid var(--mud-palette-divider)
}

.personnel-dialog .role-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px 16px
}

.personnel-dialog .role-text {
    font-weight:500
}

.personnel-dialog .changes-summary {
    border-left:2px solid var(--mud-palette-primary);
    padding:10px 14px;
    background:rgba(197,163,94,.05)
}

.personnel-dialog .change-group {
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 0;
    font-size:13px
}

.personnel-dialog .change-group.add {
    color:var(--mud-palette-success)
}

.personnel-dialog .change-group.remove {
    color:var(--mud-palette-error)
}

.personnel-dialog .personnel-org-roles {
    max-height:260px;
    overflow:auto;
    padding:4px 0
}

.personnel-dialog .personnel-preview {
    padding:18px 0;
    border-top:1px solid var(--mud-palette-divider);
    font-size:20px
}

.personnel-dialog .personnel-preview small {
    display:block;
    font-size:12px;
    color:var(--mud-palette-text-secondary);
    margin-bottom:6px
}


@media(max-width:1000px) {
    .personnel-page {
    padding:20px
}

.personnel-header h1 {
    font-size:22px
}

.personnel-header {
    flex-wrap:wrap
}

.personnel-selection-actions {
    margin-left:0
}


}


@media(max-width:600px) {
    .personnel-dialog .role-list {
    grid-template-columns:1fr
}


}



.personnel-page .personnel-selection-actions .mud-button-text-error {
    color:var(--mud-palette-error)!important
}

.personnel-selection-count { display:flex; flex-direction:column; gap:3px; margin-right:auto; }
.personnel-selection-count small { font-size:11px; color:var(--mud-palette-text-secondary); }
.personnel-page .personnel-selection-actions .mud-button-root { min-height:36px; border:0; background:transparent; box-shadow:none; text-transform:none; font-weight:600; border-radius:var(--radius-sm); }
.personnel-page .personnel-selection-actions .mud-button-root:hover { background:rgba(197,163,94,.1); }
.personnel-page .personnel-groups .personnel-group:hover:not(.active) { color:var(--mud-palette-text-primary); }
.personnel-group strong { min-width:24px; padding:2px 6px; border-radius:var(--radius-sm); background:rgba(197,163,94,.07); }
.personnel-dialog .mud-dialog-title { padding-bottom:18px; }
.personnel-dialog .mud-dialog-actions { gap:10px; }
.personnel-dialog .role-checkbox { border-radius:var(--radius-sm); transition:background .15s; }
.personnel-dialog .role-checkbox:hover { background:rgba(197,163,94,.04); }
.personnel-dialog .role-checkbox.is-selected { background:rgba(197,163,94,.07); }
.personnel-dialog .changes-summary { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.personnel-dialog .role-category:first-child { padding-top:4px; }

.personnel-history-flag { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--mud-palette-warning); font-weight:600; }