/* ==========================================================================
   Apple Design System - EmployeeCard Component Styles
   ========================================================================== */

.employeeCard {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.employeeCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
  z-index: 10;
}

.employeeCard:has(.ui-action-menu.open),
.employeeCard.has-open-menu {
  z-index: 50;
  overflow: visible !important;
}

.employeeCardContent {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.employeeCardHeader {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
}

.nameRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.employeeName {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--apple-text, #1d1d1f);
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.employeePosition {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--apple-text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cardHeaderActions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.employeeDisplayRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-radius: 0.75rem;
  border: 1px solid #f1f5f9;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.employeeDisplayRow.disabledRow {
  opacity: 0.75;
  background: #f1f5f9;
}

.cardEmailValue {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--apple-primary, #0071e3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}

.cardEmailValue:hover {
  text-decoration: underline;
}

.employeeDisplayRow .sa-badge,
.employeeDisplayRow .badge {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .employeeCardContent {
    padding: 1rem;
    gap: 0.75rem;
  }

  .employeeDisplayRow {
    padding: 0.625rem 0.75rem;
    gap: 0.5rem;
  }

  .employeeName {
    font-size: 1rem;
  }
}

/* Dark Theme Support */
[data-theme='dark'] .employeeCard {
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .employeeCard:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .employeeName {
  color: #f5f5f7;
}

[data-theme='dark'] .employeePosition {
  color: #94a3b8;
}

[data-theme='dark'] .employeeDisplayRow {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .employeeDisplayRow.disabledRow {
  background: rgba(15, 23, 42, 0.25);
}

[data-theme='dark'] .cardEmailValue {
  color: var(--apple-primary, #38bdf8);
}