/* Employee Form Page */
.employee-page-container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-xxl);
  padding-top: 80px; /* Space for fixed navigation */
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
}

/* Allow scrolling on non-org-chart pages */
body:has(.employee-page-container),
body:has(.employee-page-container) main {
  overflow: auto;
}

.employee-page-container:has(.page-panel.page-panel--wide) {
  max-width: 1000px;
}

.page-panel-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.page-panel-header .subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

.employee-card-header-profile {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.employee-edit-meta {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.employee-edit-meta-item {
  font-size: 12px;
  color: var(--color-text-muted);
}

.employee-edit-meta-item + .employee-edit-meta-item::before {
  content: "\00b7";
  margin-right: var(--space-sm);
}

.employee-form .form-group {
  margin-bottom: var(--space-lg);
}

.employee-form .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.employee-form .form-group input[type="text"],
.employee-form .form-group input[type="email"],
.employee-form .form-group select,
.employee-form .form-group input[list] {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gray-30);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-family);
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.employee-form .form-group input:focus,
.employee-form .form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.employee-form .form-errors {
  background: #fee2e2;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.imported-notice {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 14px;
  color: #9a6700;
}

.employee-form .form-errors ul {
  margin: 0;
  padding-left: var(--space-lg);
  color: #b91c1c;
  font-size: 14px;
}

.employee-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-20);
  margin-top: var(--space-lg);
}

/* Local Employees Table */
.local-employees-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-lg);
}

.local-employees-table th,
.local-employees-table td {
  padding: var(--space-sm) var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-20);
  vertical-align: middle;
}

.local-employees-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.local-employees-table td {
  font-size: 13px;
  color: var(--color-text-primary);
}

.local-employees-table .employee-name {
  font-weight: 600;
  white-space: nowrap;
}

.local-employees-table .date-cell {
  color: var(--color-text-muted);
  font-size: 13px;
}

.local-employees-table .actions-cell {
  display: flex;
  gap: var(--space-xs);
}


/* ============================================
   People Directory
   ============================================ */

.people-directory-container {
  max-width: none;
  padding: 70px 32px 32px;
  align-items: stretch;
}

.people-directory-container .page-panel.page-panel--wide {
  max-width: none;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
}

.people-table-search {
  margin-bottom: var(--space-md);
}

.people-table-filter-input {
  width: 100%;
  padding: 6px var(--space-md);
  border: 1.5px solid var(--color-gray-20);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  outline: none;
  transition: border-color 0.15s;
}

.people-table-filter-input:focus {
  border-color: var(--color-primary);
}

.people-table-filter-input::placeholder {
  color: var(--color-text-muted);
}

.people-table {
  table-layout: fixed;
  width: 100%;
}

.people-table td,
.people-table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
}

/* Column widths (percentages — never overflows) */
.people-table th:nth-child(1),
.people-table td:nth-child(1) { width: 17%; overflow: visible; }   /* Name */
.people-table th:nth-child(2),
.people-table td:nth-child(2) { width: 18%; }   /* Title */
.people-table th:nth-child(3),
.people-table td:nth-child(3) { width: 11%; }   /* Team */
.people-table th:nth-child(4),
.people-table td:nth-child(4) { width: 14%; overflow: visible; }   /* Manager */
.people-table th:nth-child(5),
.people-table td:nth-child(5) { width: 5%; }    /* Loc */
.people-table th:nth-child(6),
.people-table td:nth-child(6) { width: 21%; }   /* Email */
.people-table th:nth-child(7),
.people-table td:nth-child(7) { width: 14%; }   /* GitHub */

.people-table tbody tr:hover {
  position: relative;
  z-index: 10;
}

.people-table-name-cell,
.people-table-team-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 24px;
}

.people-table-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.people-table-mono {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 11px;
}

.people-table-missing {
  color: var(--color-danger, #dc2626);
  font-weight: 600;
}

.people-table-row-warning {
  background: var(--color-warning-bg, #fef3c7);
}

.people-table .avatar-inline .avatar-img {
  width: 20px;
  height: 20px;
}

.people-table .avatar-inline .avatar-initials {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

/* ============================================
   Headcount View
   ============================================ */

.headcount-stats-bar {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-20);
  margin-bottom: var(--space-lg);
}

.headcount-stat {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.headcount-stat strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

.headcount-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.headcount-filter-select {
  padding: 6px var(--space-md);
  border: 1.5px solid var(--color-gray-20);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-surface);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.headcount-filter-select:focus {
  border-color: var(--color-primary);
}

.headcount-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.headcount-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gray-20);
  margin-bottom: 0;
}

.headcount-group-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.headcount-group-count {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: auto;
}

.headcount-table {
  margin-top: 0;
}

/* Days Open Badge */
.badge--days-open {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.days-open-new {
  background: #dcfce7;
  color: #166534;
}

.days-open-medium {
  background: #fef9c3;
  color: #854d0e;
}

.days-open-old {
  background: #fee2e2;
  color: #991b1b;
}

/* Fill Position Notice */
.fill-position-notice {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 14px;
  color: var(--color-primary);
}

/* Small button variant */
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}