.employee-section-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); }
.employee-section-nav a { display: inline-flex; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 2px solid transparent; color: var(--muted); font-weight: var(--fw-semibold); min-height: 2.75rem; }
.employee-section-nav a:hover { background: var(--tint-row); color: var(--ink); }
.employee-section-nav a.is-active { color: var(--brand); border-color: var(--brand); }
.employee-roster-summary { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.employee-roster-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.employee-roster-summary a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-soft); }
.employee-state-dot { width: .5rem; height: .5rem; border-radius: var(--pill); background: var(--ok); display: inline-block; }
.operator-page .employee-directory { overflow: hidden; padding: 0; }
.employee-directory-filter { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-4); align-items: end; padding: var(--space-5); border-bottom: 1px solid var(--line); }
.employee-directory-filter .form-row { min-width: 0; margin: 0; }
.employee-directory-filter input, .employee-directory-filter select { width: 100%; min-width: 0; }
.employee-directory-filter .employee-search { grid-column: 1 / 5; }
.employee-directory-filter .form-row:nth-of-type(2) { grid-column: 5; }
.employee-search-input { position: relative; }
.employee-search-input > .ico { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.employee-search-input input { padding-left: var(--space-8); }
.employee-filter-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.employee-directory-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5); color: var(--muted); font-size: var(--text-sm); background: var(--tint-row); border-bottom: 1px solid var(--line); }
.employee-directory-caption p { margin: 0; color: var(--ink-soft); font-weight: var(--fw-semibold); }
.employee-directory-table table { width: 100%; table-layout: auto; }
.employee-directory-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--card); white-space: nowrap; }
.employee-directory-table td, .employee-directory-table th { padding: var(--space-3) var(--space-4); vertical-align: middle; }
.employee-directory-row:nth-child(even) { background: var(--tint-row); }
.employee-directory-row:hover, .employee-directory-row:focus-within { background: var(--brand-tint); }
.employee-directory-table th:first-child, .employee-directory-table td:first-child { padding-left: var(--space-5); }
.employee-directory-table th:last-child, .employee-directory-table td:last-child { padding-right: var(--space-5); }
.employee-identity { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.employee-identity > div { min-width: 0; }
.employee-identity small, .employee-cell-detail { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; }
.employee-avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--r-md); background: var(--fill-muted); color: var(--ink-soft); font-weight: var(--fw-semibold); }
.employee-name { font-weight: var(--fw-semibold); color: var(--ink); overflow-wrap: anywhere; }
.employee-name:hover { color: var(--brand); text-decoration: underline; }
.employee-contact { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--ink-soft); overflow-wrap: anywhere; }
.employee-contact > span + span { color: var(--muted); font-size: var(--text-xs); }
.employee-access-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; max-width: 16rem; }
.employee-access-tags span { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--ink-soft); background: var(--card); }
.employee-status { font-size: var(--text-sm); color: var(--ok); }
.employee-status.is-inactive { color: var(--muted); }
.employee-row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.employee-row-actions .btn { white-space: nowrap; }
.employee-protected { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.employee-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--muted); }
.employee-empty h2 { margin-top: var(--space-4); color: var(--ink); font-size: var(--text-lg); }
.employee-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--muted); }
.employee-pagination > div { display: flex; gap: var(--space-2); }
.operator-page .employee-audit { margin-top: var(--space-5); overflow: hidden; padding: 0; }
.employee-audit > summary { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.employee-audit > summary::-webkit-details-marker { display: none; }
.employee-audit > summary > .ico:last-child { margin-left: auto; }
.employee-audit[open] > summary { border-bottom: 1px solid var(--line); }
.employee-audit[open] > summary > .ico:last-child { transform: rotate(180deg); }
.employee-audit > summary .text-muted { font-size: var(--text-xs); font-weight: var(--fw-normal); }
.employee-back { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.employee-editor-layout { display: grid; grid-template-columns: minmax(0,3fr) minmax(15rem,1fr); gap: var(--space-5); align-items: start; }
.employee-editor-layout > * { min-width: 0; }
.employee-editor-help { display: grid; gap: var(--space-5); }
.employee-editor-help > .card { margin: 0; }
.employee-editor-help h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); }
.employee-editor-help p { font-size: var(--text-sm); color: var(--muted); }
.employee-editor-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.employee-editor .employee-form-footer { background: var(--tint-row); padding: var(--space-4); border-radius: var(--r-md); }
@media (max-width: 80rem) { .employee-directory-filter { grid-template-columns: repeat(3,minmax(0,1fr)); } .employee-directory-filter .employee-search { grid-column: 1 / 3; } .employee-directory-filter .form-row:nth-of-type(2) { grid-column: 3; } .employee-filter-actions { grid-column: 1 / -1; } }
@media (max-width: 64rem) { .employee-editor-layout { grid-template-columns: 1fr; } .employee-directory-table table, .employee-directory-table tbody { display: block; } .employee-directory-table thead { display: none; } .employee-directory-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: var(--space-4); gap: var(--space-3); border-bottom: 1px solid var(--line); } .employee-directory-table td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; } .employee-directory-table td::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--text-xs); } .employee-directory-table td:first-child, .employee-directory-table td:last-child { grid-column: 1 / -1; padding: 0; } .employee-directory-table td:first-child::before { display: none; } .employee-row-actions { justify-content: flex-start; } .employee-access-tags { max-width: none; } }
@media (max-width: 40rem) { .employee-directory-filter { grid-template-columns: repeat(2,minmax(0,1fr)); padding: var(--space-4); } .employee-directory-filter .employee-search { grid-column: 1 / -1; } .employee-directory-filter .form-row:nth-of-type(2) { grid-column: auto; } .employee-directory-caption { padding-inline: var(--space-4); } .employee-roster-summary { gap: var(--space-3); } .employee-audit > summary { flex-wrap: wrap; padding-inline: var(--space-4); } .employee-editor .employee-form-footer { align-items: stretch; } .employee-editor-actions { width: 100%; } .employee-editor-actions .btn { flex: 1 1 auto; } }
@media (max-width: 24rem) { .employee-directory-filter { grid-template-columns: 1fr; } .employee-directory-table tr { grid-template-columns: 1fr; } .employee-section-nav a { padding-inline: var(--space-2); } }