/* ============================================================
   EMPLOYEE CARD — REDESIGN
   Применяет те же принципы, что customer-redesign.css:
   hero без карточки, padding 12px 28px, avatar 64px, name 26/600.
   Нет отдельного прототипа — за образец взят customer-v2.jsx.
   ============================================================ */

/* --- Employee Hero — приведён к стандарту customer hero --- */
.erpds-employee-hero {
  padding: 12px 16px 14px;
  gap: 16px;
  align-items: flex-end;
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--erpds-border, #DDE1E8);
  box-shadow: none;
  background: var(--erpds-surface, #FFFFFF);
}
.erpds-employee-hero-avatar,
.erpds-employee-hero-photo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}
.erpds-employee-hero-avatar {
  font-size: 24px;
}
.erpds-employee-hero-name {
  font-size: 26px;
  font-weight: 600;
}
.erpds-employee-hero-meta {
  font-size: 11.5px;
}

@media (max-width: 900px) {
  .erpds-employee-hero {
    padding: 12px 16px 14px;
    gap: 14px;
    align-items: center;
  }
}

/* --- Employee field row — единый стиль строки поля карточки --- */
.erpds-field-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.erpds-field-row > .erpds-field-label {
  min-width: 150px;
  color: var(--erpds-text-muted, var(--text-muted, #6B7280));
  font-size: 0.9em;
}

@media (max-width: 600px) {
  .erpds-field-row {
    flex-direction: column;
    gap: 4px;
  }
  .erpds-field-row > .erpds-field-label {
    min-width: 0;
  }
}

/* Edit-форма: отступ между hero и accordion-секциями. */
.erpds-employee-page form .erpds-employee-hero + #accordeon_id,
.erpds-employee-page form .erpds-employee-hero {
  margin-bottom: 0;
}
.erpds-employee-page form .erpds-employee-main > #accordeon_id {
  margin-top: 16px;
}

/* Hero на edit — отступ снизу для разделения с формой. */
.erpds-employee-page form .erpds-employee-hero {
  margin-bottom: 8px;
}

/* Accordion headers внутри edit-формы — стилизация под ERPDS-токены
   вместо jQuery-UI синего default. */
.erpds-employee-page .ui-accordion .ui-accordion-header {
  background-color: var(--erpds-surface-2, #F6F7F9) !important;
  background-image: none !important;
  color: var(--erpds-text, #0F172A) !important;
  border: 1px solid var(--erpds-border, #DDE1E8) !important;
  border-radius: var(--erpds-radius, 10px) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  margin-top: 8px;
  opacity: 1 !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.erpds-employee-page .ui-accordion .ui-accordion-header:hover {
  background-color: var(--erpds-accent-soft, #E5EAFB) !important;
  border-color: var(--erpds-accent, #3B5BDB) !important;
}
.erpds-employee-page .ui-accordion .ui-accordion-header.ui-state-active {
  background-color: var(--erpds-accent, #3B5BDB) !important;
  background-image: none !important;
  color: var(--erpds-text-on-accent, #FFFFFF) !important;
  border-color: var(--erpds-accent, #3B5BDB) !important;
  border-radius: var(--erpds-radius, 10px) var(--erpds-radius, 10px) 0 0 !important;
}
.erpds-employee-page .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
  filter: brightness(0.5);
}
.erpds-employee-page .ui-accordion .ui-accordion-header.ui-state-active .ui-accordion-header-icon {
  filter: brightness(2);
}
.erpds-employee-page .ui-accordion .ui-accordion-content {
  border: 1px solid var(--erpds-border, #DDE1E8);
  border-top: none;
  border-radius: 0 0 var(--erpds-radius, 10px) var(--erpds-radius, 10px);
  background: var(--erpds-surface, #FFFFFF);
}

/* Edit-форма: длинные многострочные labels должны переноситься.
   Перебиваем глобальное .table_block .left_data { white-space: nowrap }
   из customer-redesign.css — на формах текст с <br> overflow'ит контейнер. */
.erpds-employee-page form .table_block .left_data {
  white-space: normal;
  min-width: 200px;
  width: auto;
}

/* Sidebar карточка quick-actions — sticky только на desktop, чтобы
   на mobile (sidebar превращается в столбец под main) не перекрывала контент. */
.erpds-employee-sidebar-card {
  padding: 12px;
}
@media (min-width: 901px) {
  .erpds-employee-sidebar-card {
    position: sticky;
    top: 12px;
  }
}

/* Скрыть дубль действий в основной колонке — те же кнопки есть в sidebar.
   На узких экранах sidebar становится снизу/сверху — показываем legacy
   обратно, чтобы пользователь не терял доступ. */
.erpds-employee-actions-legacy,
.erpds-legacy-dup {
  display: none;
}
@media (max-width: 900px) {
  .erpds-employee-actions-legacy,
  .erpds-legacy-dup {
    display: block;
  }
}

/* === V-010: Keyboard a11y — focus-visible на accordion header === */
.erpds-employee-page .ui-accordion .ui-accordion-header:focus-visible {
  outline: 2px solid var(--erpds-accent, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Layout страницы сотрудника (перенесено из task-redesign.css) --- */
.erpds-employee-page {
  padding: 12px;
  max-width: 1200px;
  margin: 0 auto;
}
.erpds-employee-header {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.erpds-employee-content {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.erpds-employee-main {
  flex: 1;
  min-width: 0;
}
.erpds-employee-sidebar {
  width: 300px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .erpds-employee-content {
    flex-direction: column;
  }
  .erpds-employee-sidebar {
    width: 100%;
  }
}
.erpds-employee-page .erpds-card,
.table_block.erpds-card {
  background: var(--erpds-surface);
  border: 1px solid var(--erpds-border);
  border-radius: var(--erpds-radius);
  box-shadow: var(--erpds-shadow-sm);
}

/* --- Soft standard: employee sidebar action card --- */
.erpds-employee-sidebar-card {
  overflow: hidden;
}

.erpds-employee-sidebar-card .erpds-card-header--plain {
  background: var(--erpds-bg-2, #F8FAFC);
  border-bottom: 1px solid var(--erpds-border, #E2E8F0);
  padding: 8px 12px;
}

.erpds-employee-sidebar-card .erpds-card-header__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--erpds-text-faint, #9ca3af);
}

.erpds-employee-sidebar-card .erpds-card-body--soft {
  padding: 10px 12px 12px;
}

.erpds-employee-sidebar-card .div_space + .div_space {
  margin-top: 12px;
}

.erpds-employee-sidebar-card .link_dashed {
  color: var(--erpds-text, #0F172A);
}