.internal-navigation { display: flex; flex-wrap: wrap; gap: .25rem; padding: .75rem max(2rem, calc((100vw - 75rem) / 2)); background: var(--surface); border-bottom: 1px solid var(--line); }
.internal-navigation button { padding: .65rem .85rem; border-radius: var(--control-radius); color: var(--navy); background: transparent; font-size: .8125rem; font-weight: 500; }
.internal-navigation button:hover { background: #f0f3f9; }
.internal-navigation button[aria-current="page"] { color: #fff; background: var(--navy); }
.account-role { display: block; color: var(--muted); font-size: .6875rem; font-weight: 400; }
.staff-layout { display: grid; grid-template-columns: minmax(17rem, .8fr) minmax(0, 1.6fr); gap: 1.5rem; align-items: start; }
.staff-create, .staff-directory { min-width: 0; padding: 1.5rem; }
.staff-create input { width: 100%; margin-bottom: 1rem; }
.staff-create .primary { width: 100%; white-space: normal; margin-top: 1rem; }
.staff-create .field-hint { font-size: .8125rem; }
.staff-directory-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.staff-directory-heading .muted { font-size: .75rem; }
.staff-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.staff-identity { min-width: 0; overflow-wrap: anywhere; }
.staff-row h3 { margin: 0 0 .2rem; font-size: 1rem; }
.staff-row p { margin: 0 0 .4rem; font-size: .8125rem; }
.staff-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1rem; flex: 0 0 12rem; }
.staff-actions button { font-size: .75rem; }
.staff-remove { color: #9d2435; }
.staff-active { display: inline-block; padding: .2rem .55rem; border-radius: 4rem; background: #eaf5ee; color: #146d3c; font-size: .6875rem; font-weight: 500; }
.staff-inactive { background: #eef0f4; color: #626c80; }
.staff-row .staff-mail { margin-top: .6rem; color: var(--muted); }
.staff-mail-error { color: #9d2435; }
.staff-feedback { padding: .75rem; margin-bottom: 1rem; background: #eaf5ee; color: #146d3c; border-radius: var(--control-radius); font-size: .8125rem; }
.staff-empty { padding: 1.5rem 0; }
.staff-dialog { width: min(32rem, calc(100% - 2rem)); border: 1px solid var(--line); border-radius: var(--card-radius); padding: 1.5rem; color: inherit; }
.staff-dialog::backdrop { background: #01015866; }
.staff-dialog p { overflow-wrap: anywhere; font-size: .875rem; }
.staff-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 800px) { .staff-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .internal-navigation { padding: .5rem .75rem; } .internal-navigation button { padding: .6rem; font-size: .75rem; } .staff-create, .staff-directory { padding: 1rem; } .staff-row { align-items: flex-start; flex-direction: column; } .staff-actions { flex-basis: auto; justify-content: flex-start; } .staff-directory-heading { flex-wrap: wrap; gap: 0; } }
#staff-role { width: 100%; min-height: 2.875rem; padding: .625rem; border: 1px solid var(--line-strong); border-radius: var(--control-radius); background: var(--surface); color: var(--navy); font: inherit; }
.staff-role { font-size: .75rem; color: var(--muted); }