.team-management-grid,
.transfer-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.team-summary-grid {
  margin-bottom: 4px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.team-wizard-step {
  border: 1px solid var(--border, #dbe3ef);
  border-radius: 18px;
  margin: 0 0 16px;
  padding: 16px;
  min-width: 0;
}

.team-wizard-step:not(.active) {
  display: none;
}

.team-wizard-step legend {
  color: var(--text, #162033);
  font-weight: 800;
  padding: 0 8px;
}

.team-wizard-step legend span {
  align-items: center;
  background: #fff0e5;
  border-radius: 999px;
  color: #bd4a0d;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  margin-right: 8px;
  width: 28px;
}

.team-directory-list,
.team-transfer-list,
.org-chart-list,
.team-member-editor,
.team-activation-checklist,
.transfer-impact {
  display: grid;
  gap: 12px;
}

.team-directory-card,
.team-roster-row,
.org-department-card,
.team-transfer-card,
.team-check-row,
.transfer-impact-card {
  background: #fff;
  border: 1px solid var(--border, #dbe3ef);
  border-radius: 16px;
  padding: 16px;
}

.team-directory-card.is-selected {
  border-color: #fd7c38;
  box-shadow: 0 0 0 3px rgba(253, 124, 56, 0.12);
}

.team-directory-card-header,
.team-roster-row,
.team-transfer-card-header,
.org-department-header,
.team-check-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.team-directory-card h4,
.org-department-card h4,
.team-transfer-card h4 {
  margin: 0;
}

.team-meta-grid,
.transfer-impact-grid,
.org-team-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.team-meta-grid > div,
.transfer-impact-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
}

.team-meta-grid small,
.transfer-impact-card small {
  color: #65748a;
  display: block;
}

.team-meta-grid strong,
.transfer-impact-card strong {
  display: block;
  margin-top: 3px;
}

.team-integrity-list {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  color: #9a3412;
  margin: 12px 0 0;
  padding: 10px 28px;
}

.team-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.team-card-actions button {
  min-height: 40px;
}

.team-roster-row {
  background: #f8fafc;
  padding: 12px;
}

.team-roster-copy {
  min-width: 0;
}

.team-roster-copy strong,
.team-roster-copy small {
  display: block;
}

.team-check-row {
  background: #f8fafc;
  padding: 11px 12px;
}

.team-check-row.is-ready {
  border-color: #a7e5bd;
  background: #f0fdf4;
}

.team-check-row.is-blocked {
  border-color: #fed7aa;
  background: #fff7ed;
}

.team-check-icon {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.is-ready .team-check-icon {
  background: #dcfce7;
  color: #166534;
}

.is-blocked .team-check-icon {
  background: #ffedd5;
  color: #9a3412;
}

.org-department-card {
  background: linear-gradient(135deg, #fff, #f8fbff);
}

.org-company-root {
  background: linear-gradient(135deg, #101a32, #24345d);
  border-radius: 18px;
  color: #fff;
  padding: 18px;
}

.org-company-root h4 {
  margin: 4px 0;
}

.org-company-root .muted {
  color: #cbd5e1;
}

.org-team-card {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 14px;
  padding: 14px;
}

.org-line {
  border-left: 2px solid #d9e3ef;
  margin: 14px 0 0 18px;
  padding: 4px 0 4px 24px;
  position: relative;
}

.org-line::before {
  border-top: 2px solid #d9e3ef;
  content: "";
  left: -2px;
  position: absolute;
  top: 24px;
  width: 20px;
}

.team-transfer-card[data-status="requested"] {
  border-color: #f4c989;
}

.team-transfer-card[data-status="completed"] {
  border-color: #a7e5bd;
}

.transfer-impact {
  margin-top: 14px;
}

.reporting-exception-panel {
  margin-top: 0;
}

.transfer-impact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.team-reporting-workspace {
  display: grid;
  gap: 16px;
}

.team-reporting-hero {
  align-items: end;
  background: linear-gradient(135deg, #fff7ed, #ffffff 48%, #eff6ff);
  border: 1px solid #fed7aa;
  border-radius: 22px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 1fr) minmax(520px, 1.35fr);
  padding: 20px;
}

.team-reporting-hero h3 {
  margin: 4px 0 8px;
}

.team-reporting-filters {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
}

.team-reporting-status-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.team-reporting-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.team-report-metric {
  min-width: 0 !important;
}

.team-report-metric.is-warning {
  background: #fff7ed;
  border-color: #fed7aa;
}

.team-report-metric.is-good {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.team-reporting-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.8fr);
}

.team-reporting-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-reporting-panel {
  min-width: 0;
  padding: 18px;
}

.team-reporting-table td small,
.team-reporting-table td strong {
  display: block;
}

.team-report-alert-list,
.team-report-employee-list,
.team-report-leave-list {
  display: grid;
  gap: 10px;
  max-height: 480px;
  overflow: auto;
}

.team-report-alert,
.team-report-row,
.team-report-empty-success {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
}

.team-report-alert[data-severity="high"],
.team-report-row.is-overdue {
  background: #fff7ed;
  border-color: #fdba74;
}

.team-report-alert strong,
.team-report-alert small,
.team-report-row strong,
.team-report-row small {
  display: block;
}

.team-report-alert p,
.team-report-empty-success p {
  margin: 8px 0 0;
}

.team-report-empty-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.team-report-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.team-report-row-status {
  display: grid;
  flex: 0 0 auto;
  gap: 4px;
  justify-items: end;
}

/* People & Teams hub: directory first, low-friction drawers for editing. */
.people-teams-hub {
  min-height: 70vh;
  overflow: visible;
}

.people-teams-hub > .panel-header {
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}

.people-teams-hub .user-management-workspace {
  gap: 14px;
}

.people-teams-hub .directory-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2px;
}

.people-teams-hub .team-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.people-teams-hub .metric-card {
  align-items: center;
  display: grid;
  gap: 2px 12px;
  grid-template-columns: auto 1fr;
  min-height: 72px;
  min-width: 190px;
  padding: 12px 16px;
  border-radius: 16px;
}

.people-teams-hub .metric-card span {
  grid-column: 2;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.people-teams-hub .metric-card strong {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 1.65rem;
}

.people-teams-hub .metric-card p {
  grid-column: 2;
  margin: 0;
  font-size: 0.78rem;
}

.people-directory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
}

.people-directory-layout > .users-panel {
  grid-column: 1;
  min-width: 0;
  padding: 20px;
  border-radius: 22px;
}

.people-teams-hub .directory-table th,
.people-teams-hub .directory-table td {
  padding: 12px 10px;
}

.people-teams-hub .table-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.people-teams-hub .table-action-row button {
  min-height: 36px;
  padding: 8px 10px;
}

.people-teams-hub .team-directory-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.directory-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.directory-toolbar .user-management-filters {
  display: grid;
  flex: 1 1 520px;
  gap: 8px;
  grid-template-columns: minmax(190px, 1.3fr) repeat(2, minmax(130px, 0.7fr));
}

.workspace-drawer {
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 24px 0 0 24px;
  bottom: 0;
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
  display: block;
  max-width: min(760px, calc(100vw - 24px));
  overflow-y: auto;
  padding: 22px;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(calc(100% + 32px));
  transition: transform 220ms ease;
  width: 100%;
  z-index: 12020;
}

.workspace-drawer.is-open {
  transform: translateX(0);
}

.workspace-drawer-header {
  background: rgba(255, 255, 255, 0.96);
  margin: -22px -22px 18px;
  padding: 18px 22px;
  position: sticky;
  top: -22px;
  z-index: 4;
  border-bottom: 1px solid #e8edf4;
  backdrop-filter: blur(12px);
}

.workspace-drawer-backdrop {
  background: rgba(15, 23, 42, 0.42);
  border: 0;
  border-radius: 0;
  inset: 0;
  padding: 0;
  position: fixed;
  z-index: 12010;
}

.workspace-drawer-backdrop:not(.hidden) {
  display: block;
}

body.people-workspace-drawer-open {
  overflow: hidden;
}

.drawer-section-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 10px 0;
}

.drawer-section-heading > span {
  align-items: center;
  background: #fff0e5;
  border-radius: 999px;
  color: #bd4a0d;
  display: inline-flex;
  flex: 0 0 34px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
}

.drawer-section-heading div,
.drawer-section-heading small {
  display: block;
}

.advanced-settings-toggle-row {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin: 18px 0;
  padding: 12px;
}

.user-form .user-advanced-panel {
  display: none;
}

.user-form.show-advanced .user-advanced-panel {
  display: block;
}

.team-wizard-nav {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 8px;
}

.team-wizard-nav button {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  color: #64748b;
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 8px;
}

.team-wizard-nav button span {
  align-items: center;
  background: #e2e8f0;
  border-radius: 999px;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.team-wizard-nav button.active,
.team-wizard-nav button.is-complete {
  border-color: #fd9a64;
  color: #9a3412;
  background: #fff7ed;
}

.team-wizard-nav button.active span,
.team-wizard-nav button.is-complete span {
  color: #fff;
  background: linear-gradient(135deg, #fb923c, #ef4444);
}

.team-wizard-progress {
  background: #e8edf4;
  border-radius: 999px;
  height: 4px;
  margin: 0 0 18px;
  overflow: hidden;
}

.team-wizard-progress span {
  background: linear-gradient(90deg, #fb923c, #ef4444);
  display: block;
  height: 100%;
  transition: width 180ms ease;
  width: 25%;
}

.team-wizard-footer {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr auto;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #e8edf4;
}

.team-wizard-footer span {
  text-align: center;
}

.transfer-view-toggle {
  display: inline-flex;
  gap: 6px;
  justify-self: start;
  padding: 5px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #f8fafc;
}

.transfer-view-toggle button {
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-weight: 700;
}

.transfer-view-toggle button.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

body[data-active-section="user-management"] #chatFloatingWidget.chat-floating-closed {
  bottom: 18px;
  right: 86px;
}

body[data-active-section="user-management"] .assistant-widget.assistant-widget-closed,
body[data-active-section="user-management"] .assistant-widget.assistant-widget-minimized {
  bottom: 16px !important;
  right: 16px !important;
}

@media (max-width: 1100px) {
  .team-management-grid,
  .transfer-management-grid {
    grid-template-columns: 1fr;
  }

  .people-teams-hub .team-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-reporting-hero,
  .team-reporting-grid {
    grid-template-columns: 1fr;
  }

  .team-reporting-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #userManagementViewTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .team-reporting-filters,
  .team-reporting-kpis,
  .team-reporting-detail-grid {
    grid-template-columns: 1fr;
  }

  .team-report-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-report-row-status {
    justify-items: start;
  }

  #userManagementViewTabs .view-toggle-button {
    min-width: 0;
  }

  .people-teams-hub {
    padding: 14px;
  }

  .people-teams-hub .directory-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-teams-hub .team-directory-list {
    grid-template-columns: 1fr;
  }

  .people-teams-hub .metric-card {
    min-width: 0;
  }

  .directory-toolbar,
  .directory-toolbar .user-management-filters {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .workspace-drawer {
    border-radius: 22px 22px 0 0;
    max-width: none;
    padding: 16px;
    top: 44px;
  }

  .workspace-drawer-header {
    margin: -16px -16px 16px;
    padding: 14px 16px;
    top: -16px;
  }

  .team-wizard-nav strong {
    display: none;
  }

  .team-wizard-nav button {
    padding: 6px;
  }

  .team-wizard-footer {
    grid-template-columns: 1fr 1fr;
  }

  .team-wizard-footer span {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body[data-active-section="user-management"] #chatFloatingWidget.chat-floating-closed {
    bottom: 82px;
    right: 12px;
  }

  .team-meta-grid,
  .transfer-impact-grid,
  .org-team-grid {
    grid-template-columns: 1fr;
  }

  .team-directory-card-header,
  .team-roster-row,
  .team-transfer-card-header,
  .org-department-header,
  .team-check-row {
    align-items: flex-start;
    flex-direction: column;
  }
}