/* People workspace */
.people-workspace { width: min(1280px, 100%); margin: 0 auto; padding: 4px 0 var(--space-8); }
.people-hero { padding: var(--space-4) 0 var(--space-6); }
.people-eyebrow { margin: 0 0 5px; color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
.people-hero h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.035em; }
.people-hero > p:last-child { max-width: 680px; margin: var(--space-2) 0 0; color: var(--color-fg-muted); line-height: 1.55; }
.people-hub-tabs {
  display: flex;
  align-items: center;
  min-height: 58px;
  margin-bottom: var(--space-5);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.people-hub-tabs .lv-tabs { margin: 0; border: 0; }
.people-hub-tabs .lv-tab { min-width: 118px; }

/* Onboarding/Offboarding */
.onboard-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.onboard-stat {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-fg);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.onboard-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.onboard-stat__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.onboard-stat--offboarding .onboard-stat__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.onboard-stat__icon .icon { width: 20px; height: 20px; }
.onboard-stat__content { display: grid; min-width: 0; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--space-2); flex: 1; }
.onboard-stat__content strong { color: var(--color-fg); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.onboard-stat__content > span { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.onboard-stat__content small { grid-column: 1 / -1; margin-top: 2px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.onboard-stat__arrow { width: 16px; height: 16px; flex: 0 0 16px; color: var(--color-fg-subtle); }

.checklist-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 60vh; overflow-y: auto; }
.checklist-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.checklist-row:hover { background: var(--color-surface-hover); }
.checklist-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.checklist-row__name { font-weight: var(--font-medium); font-size: var(--text-sm); }
.checklist-row__pos { font-size: var(--text-xs); color: var(--color-fg-muted); }
.checklist-row__pct { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-fg-muted); flex-shrink: 0; }

.people-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.people-kpi {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.people-kpi__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary); }
.people-kpi__icon .icon { width: 18px; height: 18px; }
.people-kpi--success .people-kpi__icon { background: var(--color-success-soft); color: var(--color-success); }
.people-kpi--warning .people-kpi__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.people-kpi--info .people-kpi__icon { background: var(--color-blue-soft, var(--color-primary-soft)); color: var(--color-blue, var(--color-primary)); }
.people-kpi > span:last-child { min-width: 0; }
.people-kpi strong { display: block; font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.people-kpi small { display: block; margin-top: 5px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

.people-page { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--space-5); align-items: start; }
.people-main { min-width: 0; }

/* Toolbar */
.people-toolbar {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.people-toolbar__filters,
.people-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.people-toolbar__actions { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.people-toolbar__actions > .btn { min-height: 40px; }
.people-toolbar__actions > .btn:last-child { margin-left: auto; }
.people-toolbar__actions .btn .icon { width: 15px; height: 15px; }
.people-search { position: relative; flex: 1 1 240px; display: flex; align-items: center; }
.people-search .icon { position: absolute; left: var(--space-3); width: 18px; height: 18px; color: var(--color-fg-subtle); pointer-events: none; }
.people-search input {
  width: 100%; height: 42px; padding: 0 var(--space-3) 0 var(--space-10);
  font: inherit; font-size: var(--text-sm); color: var(--color-fg);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.people-search input:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.people-filter {
  height: 42px; padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm); line-height: normal;
  color: var(--color-fg); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer;
}
.people-viewtoggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.people-viewtoggle button { display: grid; place-items: center; width: 40px; height: 42px; background: var(--color-surface); color: var(--color-fg-muted); border: 0; }
.people-viewtoggle button.is-active { background: var(--color-primary-soft); color: var(--color-primary); }
.people-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.people-results-head h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -.015em; }
.people-results-head p { margin: 4px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); }
.people-results-head > span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }

/* Avatar (10 colors by letter) */
.employee-avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  border-radius: var(--radius-full); color: #fff; font-weight: var(--font-bold);
  overflow: hidden; text-transform: uppercase; line-height: 1;
}

/* Status badge */
.status-badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.status-badge--active { background: var(--color-success-soft); color: var(--color-success); }
.status-badge--inactive { background: var(--color-surface-hover); color: var(--color-fg-muted); }

/* Directory grid */
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.people-card {
  position: relative; display: flex; min-width: 0; flex-direction: column;
  padding: var(--space-5); text-align: left; cursor: pointer;
  border: 1px solid var(--color-border); box-shadow: none;
  animation: card-in var(--dur-base) var(--ease-out) both;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.people-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.people-card:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.people-card__top { display: flex; align-items: center; min-width: 0; gap: var(--space-3); }
.people-card__identity { flex: 1; min-width: 0; }
.people-card__name { overflow: hidden; font-weight: var(--font-bold); text-overflow: ellipsis; white-space: nowrap; }
.people-card__pos { margin-top: 3px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.people-card__email { margin: var(--space-4) 0; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.people-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.people-card__meta div { min-width: 0; }
.people-card__meta dt { color: var(--color-fg-muted); font-size: var(--text-xs); }
.people-card__meta dd { margin: 4px 0 0; overflow: hidden; color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-semibold); text-overflow: ellipsis; white-space: nowrap; }
.people-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.people-card__footer > span:last-child { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.people-card__footer .icon { width: 14px; height: 14px; }
.people-role-chip { overflow: hidden; max-width: 52%; padding: 4px 8px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-fg-muted); font-weight: var(--font-medium); text-overflow: ellipsis; white-space: nowrap; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Table */
.people-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.people-table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--color-surface); }
.people-table thead { background: var(--color-surface-2); }
.people-table th { text-align: left; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-fg-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.people-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.people-table tbody tr { cursor: pointer; animation: card-in var(--dur-base) var(--ease-out) both; }
.people-table tbody tr:hover { background: var(--color-surface-hover); }
.people-table tbody tr:last-child td { border-bottom: 0; }
.people-table__name { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--font-medium); }

/* Department filter */
.org-chart { position: sticky; top: var(--space-6); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.org-title-wrap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.org-title-wrap > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-primary); }
.org-title-wrap .icon { width: 17px; height: 17px; }
.org-title-wrap > div { min-width: 0; }
.org-title { margin: 0; color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-bold); }
.org-title-wrap p { margin: 3px 0 0; color: var(--color-fg-muted); font-size: 11px; line-height: 1.35; }
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
.org-tree ul { margin-left: var(--space-4); border-left: 1px solid var(--color-border); padding-left: var(--space-2); }
.org-node { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 38px; padding: var(--space-2) var(--space-3); margin-bottom: 3px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-fg); font-size: var(--text-sm); text-align: left; }
.org-node:hover { background: var(--color-surface-hover); }
.org-node.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--font-semibold); }
.org-count { min-width: 20px; text-align: center; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.org-empty, .org-node.is-active .org-count { color: var(--color-fg-muted); }

/* Profile */
/* 2026-07-13 — complete structural redesign per an explicit design brief
   (Rippling/Deel/HiBob-style): header and tabs are now full-width rows
   (previously the sidebar ran the full height alongside them as one tall
   column) — only the panel content and sidebar form the two-column split
   below. Max width bumped 1180px→1400px per the brief. */
.profile { max-width: 1400px; }
.profile-back { display: inline-block; margin-bottom: var(--space-4); color: var(--color-fg-muted); font-size: var(--text-sm); }
.profile-back:hover { color: var(--color-primary); }

/* 70/30 main/sidebar split (Phase 41 was a fixed 280px sidebar column;
   the brief asks for proportional ~70/30). Collapses to a single column
   under the same 901px breakpoint the sidebar/collapse mechanism in
   layout.css already uses, sidebar moving below main content. */
.profile-grid { display: grid; grid-template-columns: 7fr 3fr; gap: var(--space-6); align-items: start; }
.profile-main { min-width: 0; }
.profile-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
.profile-side-card { padding: var(--space-5); min-width: 0; }
.profile-side-card__action { display: flex; justify-content: center; width: 100%; margin-top: var(--space-3); }

/* 2026-07-13 — icon-chip sidebar headers, mirroring dashboard.css's
   dash-card__icon pattern from the Dashboard redesign, so this page (opened
   right after Dashboard) reads as the same generation of UI instead of an
   older, flatter one. Tones are purely for visual differentiation between
   the 4 cards, not semantic status (unlike the KPI chips on Dashboard). */
.profile-side-card__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.profile-side-card__head h3 { margin: 0; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-fg-muted); }
.profile-side-card__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.profile-side-card__icon .icon { width: 15px; height: 15px; }
.profile-side-card--manager .profile-side-card__icon { background: var(--color-success-soft); color: var(--color-success); }
.profile-side-card--reports .profile-side-card__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.profile-side-card--team .profile-side-card__icon { background: var(--color-orange-soft); color: var(--color-orange); }
/* The card is only ~280px wide — the main profile panel's two-column
   180px+1fr info-grid (people.css:140) doesn't fit here, so labels stack
   above values instead, and both use the same font-size (only weight/color
   tell them apart) rather than the panel's larger dd/smaller dt split. */
.profile-side-card .info-grid { gap: var(--space-3); }
.profile-side-card .info-grid__row { grid-template-columns: 1fr; gap: 2px; }
.profile-side-card .info-grid dt { font-size: var(--text-sm); }
.profile-side-card .info-grid dd { font-size: var(--text-sm); overflow-wrap: break-word; }
.profile-side-person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.profile-side-person__name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-fg); overflow-wrap: break-word; }
.profile-side-person:hover .profile-side-person__name { color: var(--color-primary); }
.profile-side-list { display: flex; flex-direction: column; gap: var(--space-3); }
.profile-side-person--sm { gap: var(--space-2); font-size: var(--text-sm); }
.profile-side-person--sm span { overflow-wrap: break-word; }

/* Direct reports — overlapping avatar stack + "show all" toggle, same
   device teams.js's own .team-card__avatars already uses. The full name
   list (.profile-side-card__expandable) stays in the DOM but hidden until
   expanded — there's no separate "reports of X" page to link out to. */
.profile-side-card__stack { display: flex; align-items: center; margin-bottom: var(--space-3); }
.profile-side-card__stack > * { margin-left: -8px; border: 2px solid var(--color-surface); border-radius: var(--radius-full); }
.profile-side-card__stack > *:first-child { margin-left: 0; }
.profile-side-card__stack-more { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--color-surface); border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.profile-side-list.profile-side-card__expandable { display: none; margin-bottom: var(--space-3); }
.profile-side-card--reports.is-expanded .profile-side-card__stack { display: none; }
.profile-side-card--reports.is-expanded .profile-side-list.profile-side-card__expandable { display: flex; }
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
}

/* 2026-07-13 — decorative gradient strip behind the avatar (a common
   Stripe/Linear profile-header device) so this card doesn't read as a bare
   flex row; purely cosmetic, `pointer-events: none` + z-index so it never
   intercepts clicks meant for the avatar/edit button. */
.profile-header { position: relative; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); margin-bottom: var(--space-5); overflow: hidden; }
.profile-header::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 72px; pointer-events: none; z-index: 0;
  background: linear-gradient(120deg, var(--color-primary-soft), var(--color-orange-soft));
}
.profile-avatar-wrap, .profile-header__info, .profile-header__actions { position: relative; z-index: 1; }

/* Header actions — primary "Edit Profile" button + an optional "•••" menu
   (the brief's only genuinely wireable secondary action here is "View org
   chart", already in the sidebar — see people-profile.js's own note on why
   a fuller Quick Actions menu wasn't invented). */
.profile-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; align-self: flex-start; }
.profile-header__more { position: relative; }
.profile-header__menu {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 20; min-width: 200px;
  padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.profile-header__menu-item {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--color-fg); font-size: var(--text-sm); text-decoration: none;
}
.profile-header__menu-item:hover { background: var(--color-surface-hover); }

/* Avatar upload overlay (Priority 30) — camera button + optional remove button
   anchored to the bottom-right of the avatar circle; a soft spinner-style dim
   while a real R2 upload is in flight. */
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar-wrap.is-uploading { opacity: 0.5; pointer-events: none; }
.profile-avatar-wrap__edit {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--radius-full); border: 2px solid var(--color-surface);
  background: var(--color-primary); color: #fff; cursor: pointer;
}
.profile-avatar-wrap__edit:hover { background: var(--color-primary-hover); }
.profile-avatar-wrap__edit .icon { width: 16px; height: 16px; }
.profile-avatar-wrap__remove {
  position: absolute; left: -2px; bottom: -2px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--radius-full); border: 2px solid var(--color-surface);
  background: var(--color-danger); color: #fff; font-size: 11px; line-height: 1; cursor: pointer;
}
.profile-avatar-wrap__remove:hover { filter: brightness(0.9); }

.profile-header__info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.profile-header__title-row { display: flex; align-items: center; gap: var(--space-3); }
.profile-header__info h1 { font-size: var(--text-2xl); font-weight: var(--font-extrabold); }
.profile-header__pos { color: var(--color-fg-muted); font-size: var(--text-sm); }
/* Meta row (email/location/tenure) — a Stripe/Linear-style detail summary
   directly under the name, so the header carries more than just a title;
   the sidebar's "Головна" card still has the full info-grid, this is just
   the at-a-glance version. */
.profile-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-1); }
.profile-header__meta-item { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-fg-muted); }
.profile-header__meta-item .icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-fg-subtle); }
.profile-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  padding: var(--space-3) var(--space-4); background: transparent; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent; color: var(--color-fg-muted); font-size: var(--text-sm); font-weight: var(--font-medium);
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-bottom-color var(--dur-fast) var(--ease-out);
}
.profile-tab:hover { color: var(--color-fg); background: var(--color-surface-hover); }
.profile-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-semibold); }
.profile-tab.is-active:hover { background: transparent; }
.profile-panel { padding: var(--space-6); }

.info-grid { display: grid; gap: var(--space-4); margin: 0; }
.info-grid__row { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4); }
.info-grid dt { color: var(--color-fg-muted); font-size: var(--text-sm); }
.info-grid dd { margin: 0; font-weight: var(--font-medium); font-size: var(--text-sm); }
.info-grid__empty { font-weight: var(--font-normal); color: var(--color-fg-subtle); font-style: italic; }

/* 2026-07-13 — grouped section cards (General/Contacts/Performance tabs
   etc.) instead of one giant table — each is its own bordered card with an
   icon-chip head, same device used across the app this pass. */
.profile-section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-5); align-items: start; }
.profile-section { padding: var(--space-6); }
.profile-section__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.profile-section__head > .btn { margin-left: auto; }
.profile-section__title { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); }
.profile-section__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.profile-section__icon .icon { width: 17px; height: 17px; }
.profile-section .pr-subhead:first-child { margin-top: 0; }

/* In-card empty state (icon + short line) — replaces every bare "—" or
   plain sentence this page used to fall back to. */
.profile-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-fg-subtle); }
.profile-empty .icon { width: 28px; height: 28px; opacity: 0.5; }
.profile-empty p { margin: 0; font-size: var(--text-sm); max-width: 32ch; }

/* Timeline — icon-chip per event instead of a bare dot (same "icon + tint"
   device used across the app this pass), plus a hover lift so the list
   doesn't feel static. Only 3 real event kinds exist today (hired/account/
   verified — src/routes/people.js) — see TIMELINE_ICON in
   people-profile.js; `i-info` is the fallback for any future kind. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out); }
.timeline__item:hover { background: var(--color-surface-hover); }
.timeline__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-full); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.timeline__title { font-weight: var(--font-medium); font-size: var(--text-sm); }
.timeline__date { color: var(--color-fg-subtle); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* Time Off "hero" balance card — number + progress ring for the primary
   leave type, same numbers the .balance-card grid below already shows, just
   a bigger presentation for the first/primary one. */
.balance-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); margin-bottom: var(--space-5); }
/* The ring and the number share one grid cell (grid-area: 1/1) so the
   number sits precisely centered inside the ring regardless of its text
   length, rather than an approximate negative-margin overlap. */
.balance-hero__ring-wrap { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.balance-ring { grid-area: 1 / 1; width: 120px; height: 120px; transform: rotate(-90deg); }
.balance-ring__track { fill: none; stroke: var(--color-surface-2); stroke-width: 10; }
.balance-ring__fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.balance-hero__num { grid-area: 1 / 1; font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--color-fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.balance-hero__num span { font-size: var(--text-xs); font-weight: var(--font-normal); color: var(--color-fg-muted); display: block; }
.balance-hero__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-fg-muted); margin-bottom: var(--space-3); }
.balance-hero__stats { display: flex; gap: var(--space-8); }
.balance-hero__stats b { display: block; font-size: var(--text-xl); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; }
.balance-hero__stats span { font-size: var(--text-xs); color: var(--color-fg-muted); }

/* Asset cards (profile "Assets" tab) — a photo thumbnail when the asset has
   one (imageUrl, a real configurable field — Phase 39), warranty pill when
   set, scoped to .profile-panel so the main Assets module page (a data
   table) is unaffected. */
.asset-item__photo { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.asset-item__warranty { font-size: var(--text-xs); color: var(--color-fg-subtle); margin-top: 2px; }

/* Document/asset cards read as a proper grid only inside the profile page —
   the shared .doc-list/.asset-list classes stay a single-column list
   everywhere else (Dashboard, Knowledge Base, candidate CVs, main Assets
   page) since those weren't part of this redesign. */
.profile-panel .doc-list, .profile-panel .asset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-3); }
.profile-panel .doc-item, .profile-panel .asset-item { align-items: flex-start; }

/* States */
.people-loading, .empty-state { padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-fg-muted); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.empty-state p { margin: 0; max-width: 40ch; }

@media (max-width: 900px) {
  .people-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-page { grid-template-columns: 1fr; }
  .org-chart { position: static; order: -1; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid__row { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 560px) {
  .people-workspace { padding-top: 0; }
  .people-hub-tabs { min-height: 54px; overflow-x: auto; }
  .people-hub-tabs .lv-tabs { min-width: max-content; }
  .people-hub-tabs .lv-tab { min-width: 100px; }
  .onboard-stats,
  .people-overview { grid-template-columns: 1fr; gap: var(--space-2); }
  .onboard-stat,
  .people-kpi { padding: var(--space-3); }
  .people-toolbar { padding: var(--space-3); }
  .people-toolbar__filters,
  .people-toolbar__actions { align-items: stretch; flex-direction: column; }
  .people-search { flex-basis: auto; width: 100%; }
  .people-filter,
  .people-toolbar__actions > .btn,
  .people-toolbar__actions .hdr-dropdown,
  .people-toolbar__actions .hdr-dropdown > .btn { width: 100%; }
  .people-toolbar__actions > .btn:last-child { margin-left: 0; }
  .people-viewtoggle { align-self: flex-start; }
  .people-results-head { align-items: flex-start; }
  .people-grid { grid-template-columns: 1fr; }
  .people-card { min-height: 0; padding: var(--space-4); }
  .people-card__top { align-items: flex-start; }
  .people-card__top .status-badge { position: absolute; top: var(--space-4); right: var(--space-4); }
  .people-card__identity { padding-right: 70px; }
  /* Profile header is a desktop flex row (avatar · info · actions) that gets
     cramped on phones — the Edit button stops fitting. Stack it: avatar on top,
     name/role/meta below, and the action button full-width at the bottom. */
  .profile-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .profile-header__info { width: 100%; }
  .profile-header__actions { align-self: stretch; width: 100%; }
  .profile-header__actions > .btn { flex: 1; }
  /* The panel wraps tab content in space-6 padding, so section cards sat
     inset (narrower) while the sidebar cards ran full width — they looked
     mismatched once stacked. Drop the panel's own padding on phones so every
     card (section + sidebar) shares the same full width; cards carry their
     own padding already. */
  .profile-panel { padding: 0; }
  .profile-grid > * { min-width: 0; }
}

/* Onboarding/Offboarding checklist profile tab (Phase 10 data, added Phase 13) */
.chk-progress { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.chk-progress .balance-bar { flex: 1; }
.chk-progress__label { flex-shrink: 0; font-size: var(--text-sm); color: var(--color-fg-muted); white-space: nowrap; }
.chk-table { display: flex; flex-direction: column; }
.chk-row { display: grid; grid-template-columns: 28px 1fr 120px 120px 32px; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.chk-row:last-child { border-bottom: 0; }
.chk-row--head { color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.chk-row__title { font-size: var(--text-sm); }
.chk-row.is-done .chk-row__title { color: var(--color-fg-muted); text-decoration: line-through; }
.chk-row__date { font-size: var(--text-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .chk-row { grid-template-columns: 28px 1fr 32px; }
  .chk-row__date { display: none; }
}

/* Teams (Phase 13) */
.teams-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.teams-eyebrow { margin: 0 0 4px; color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .07em; text-transform: uppercase; }
.teams-header h2 { margin: 0; font-size: var(--text-2xl); letter-spacing: -.025em; }
.teams-header > div > span { display: block; max-width: 660px; margin-top: var(--space-2); color: var(--color-fg-muted); font-size: var(--text-sm); line-height: 1.5; }
.teams-header > .btn { min-height: 42px; white-space: nowrap; }
.teams-header > .btn .icon { width: 16px; height: 16px; }
.teams-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.teams-stat { display: flex; align-items: center; min-width: 0; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.teams-stat > span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary); }
.teams-stat > span .icon { width: 18px; height: 18px; }
.teams-stat--success > span { background: var(--color-success-soft); color: var(--color-success); }
.teams-stat--warning > span { background: var(--color-warning-soft); color: var(--color-warning); }
.teams-stat--info > span { background: var(--color-blue-soft, var(--color-primary-soft)); color: var(--color-blue, var(--color-primary)); }
.teams-stat div { min-width: 0; }
.teams-stat strong { display: block; font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.teams-stat small { display: block; margin-top: 5px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.teams-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.teams-toolbar h3 { margin: 0; font-size: var(--text-lg); }
.teams-toolbar p { margin: 4px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); }
.teams-search { position: relative; display: flex; align-items: center; width: min(280px, 100%); }
.teams-search .icon { position: absolute; left: var(--space-3); width: 16px; height: 16px; color: var(--color-fg-subtle); }
.teams-search input { width: 100%; min-height: 40px; padding: 0 var(--space-3) 0 var(--space-9); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-fg); font: inherit; font-size: var(--text-sm); }
.teams-search input:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.team-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); box-shadow: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast); }
.team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.team-card:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.team-card__head { display: flex; align-items: center; min-width: 0; gap: var(--space-3); }
.team-card__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary); }
.team-card--1 .team-card__icon { background: var(--color-success-soft); color: var(--color-success); }
.team-card--2 .team-card__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.team-card--3 .team-card__icon { background: var(--color-orange-soft); color: var(--color-orange); }
.team-card__icon .icon { width: 20px; height: 20px; }
.team-card__head > div { flex: 1; min-width: 0; }
.team-card__head p { margin: 0 0 3px; color: var(--color-fg-muted); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; }
.team-card__head h3 { margin: 0; overflow: hidden; font-size: var(--text-lg); font-weight: var(--font-bold); text-overflow: ellipsis; white-space: nowrap; }
.team-card__member-badge { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--text-sm); font-weight: var(--font-bold); }
.team-card__manager { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.team-card__label { display: block; margin-bottom: var(--space-2); color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-medium); }
.team-card__managerrow { display: flex; align-items: center; gap: var(--space-2); }
.team-card__managername { font-size: var(--text-sm); font-weight: var(--font-medium); }
.team-card__managerpos { font-size: var(--text-xs); color: var(--color-fg-muted); }
.team-card__nomanager { display: grid; min-height: 66px; place-items: center; padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-fg-subtle); font-size: var(--text-sm); }
.team-card__members { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.team-card__members > div { min-width: 0; }
.team-card__avatars { display: flex; }
.team-card__avatars > * { margin-left: -8px; border: 2px solid var(--color-surface); border-radius: var(--radius-full); }
.team-card__avatars > *:first-child { margin-left: 0; }
.team-card__more { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--color-surface); border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-fg-muted); font-size: 10px; font-weight: var(--font-semibold); }
.team-card__empty { color: var(--color-fg-subtle); font-size: var(--text-xs); }
.team-card__open { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.team-card__open .icon { width: 14px; height: 14px; }
.teams-filter-empty { padding: var(--space-8); color: var(--color-fg-muted); text-align: center; }

.team-member-row { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
/* 2026-07-29 — was a blanket `span` selector, which also matched the row's
   own avatarHTML() <span class="employee-avatar"> (both teams.js and
   reports.js render exactly avatar-span + label-span here): flex:1 stretched
   the fixed-height avatar to the row's full width, and border-radius:50%
   then clipped that wide-short box into a thin crescent. Scoped to the
   label span only. */
.team-member-row span:not(.employee-avatar) { display: flex; min-width: 0; flex: 1; flex-direction: column; font-size: var(--text-sm); }
.team-member-row span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-member-row span small { margin-top: 2px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.team-modal-intro,
.team-detail-summary { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.team-modal-intro > span,
.team-detail-summary__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary); }
.team-modal-intro .icon,
.team-detail-summary__icon .icon { width: 20px; height: 20px; }
.team-modal-intro strong { font-size: var(--text-sm); }
.team-modal-intro p { margin: 3px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); line-height: 1.45; }
.team-detail-summary { margin-bottom: var(--space-4); }
.team-detail-summary > div { min-width: 0; }
.team-detail-summary small { color: var(--color-primary); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; }
.team-detail-summary strong { display: block; margin-top: 2px; font-size: var(--text-lg); }
.team-detail-summary p { margin: 3px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); }
.team-detail-section { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.team-detail-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.team-detail-section__head h3 { margin: 0; font-size: var(--text-base); }
.team-detail-section__head span { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-bold); }
.team-detail-manager { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.team-detail-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.team-detail-member { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.team-detail-danger { display: flex; justify-content: flex-end; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.team-detail-danger .btn { color: var(--color-danger); }

@media (max-width: 900px) {
  .teams-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .teams-header,
  .teams-toolbar { align-items: stretch; flex-direction: column; }
  .teams-header > .btn,
  .teams-search { width: 100%; }
  .teams-stats { grid-template-columns: 1fr; gap: var(--space-2); }
  .teams-stat { padding: var(--space-3); }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { padding: var(--space-4); }
  .team-detail-members { grid-template-columns: 1fr; }
}

/* View-settings column checkboxes (Phase 18) */
.people-col-check { display: flex !important; align-items: center; gap: var(--space-2); cursor: pointer; }
.people-col-check input { margin: 0; }

/* ═══ Invite Employee modal redesign (2026-07-13) — grouped sections
   instead of one flat form, per an explicit design brief. Reuses the
   shared .modal-form/.modal-label/.modal-input primitives throughout —
   only the section grouping/hints/success screen are new. ═══ */
.invite-form { gap: var(--space-6); }
.invite-section__title {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border);
}
/* The email field is the primary one — a taller input than the rest, per
   the brief's "visually emphasized" ask. */
.modal-input--lg { height: 48px; font-size: var(--text-base); }
.invite-field-hint { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-fg-subtle); min-height: 1.2em; }
.invite-field-hint.is-valid { color: var(--color-success); }
.invite-field-hint.is-invalid { color: var(--color-danger); }
/* "Organization" fields grouped inside one visually distinct block. */
.invite-group { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-lg); }

/* Success screen replacing the old instant-close + toast. */
.invite-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4) 0; }
.invite-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-success-soft); color: var(--color-success); margin-bottom: var(--space-2); }
.invite-success__icon .icon { width: 28px; height: 28px; }
.invite-success h3 { font-size: var(--text-lg); font-weight: var(--font-bold); margin: 0; }
.invite-success p { margin: 0; color: var(--color-fg-muted); font-size: var(--text-sm); max-width: 40ch; }
.invite-link-row { display: flex; gap: var(--space-2); width: 100%; margin-top: var(--space-3); }
.invite-link-row .modal-input { flex: 1; font-size: var(--text-xs); color: var(--color-fg-muted); }
.invite-success__actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }

/* ═══ Edit Employee modal redesign (2026-07-13) — grouped sections (icon +
   title + short description), same device as the Invite modal but richer
   (per the brief) since this form is considerably longer. Reuses the
   shared .modal-form/.modal-label/.modal-input/.modal-row primitives
   throughout — only the section chrome + discard-guard/loading bits are
   new. ═══ */
.edit-form { gap: var(--space-8); }
.edit-section__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.edit-section__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.edit-section__icon .icon { width: 18px; height: 18px; }
.edit-section__title { margin: 0; font-size: var(--text-base); font-weight: var(--font-bold); }
.edit-section__desc { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-fg-muted); }
.edit-section__body { display: flex; flex-direction: column; gap: var(--space-4); }
/* "Employment" sits in a visually distinct tinted block, matching the
   Invite modal's .invite-group — this is the information HR changes most
   often, per the brief. */
.edit-section--employment .edit-section__body { padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-lg); }
.edit-section + .edit-section { padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

/* Profile documents: let a single card use the row and wrap its controls. */
.profile-panel .doc-list {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.profile-panel .doc-item {
  align-items: center;
  flex-wrap: wrap;
}
.profile-panel .doc-item__main { flex: 1 1 180px; }