/* ==========================================================================
   HRlume APP — staging visual polish
   Presentation-only layer created after the 2026-07-30 UI audit.
   It deliberately overrides existing primitives without changing markup,
   routes, state, permissions, or module behaviour.
   ========================================================================== */

:root {
  --radius-lg: 14px;
  --radius-xl: 20px;
  --content-max: 1400px;
  --workspace-max: 1180px;

  --color-bg: #f5f7fb;
  --color-surface-hover: #f2f4f8;
  --color-border: #e2e6ef;
  --color-border-strong: #cfd6e4;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .035);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 24px rgba(15, 23, 42, .035);
  --shadow-md: 0 3px 8px rgba(15, 23, 42, .045), 0 16px 36px rgba(15, 23, 42, .065);
  --shadow-lg: 0 18px 52px rgba(15, 23, 42, .12);
}

/* One width contract for the main product workspaces. Historically each
   module picked its own cap (1120–1320px), which made the page header and
   navigation visibly jump while moving between sections. Keep both the
   workspace shell and stand-alone heroes on the same 1180px rhythm. */
.people-workspace,
.requests-page,
.rc-hub,
.rc-job-board-page,
.docs-page,
.assets-page,
.sv-page,
.sv-detail-page,
.perform-goals-page,
.rp-page,
.kb-page,
.kb-article-page {
  width: min(var(--workspace-max), 100%);
  margin-inline: auto;
}

/* Shared workspace hero — one visual and responsive contract for the main
   product areas. Module-specific headers keep their own semantic classes and
   behaviour; this final layer only normalises spacing, hierarchy and tabs. */
.workspace-hero {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  width: min(var(--workspace-max), 100%);
  margin: 0 auto var(--space-6);
  padding: var(--space-6) var(--space-6) 0;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 92% -25%, color-mix(in srgb, var(--color-primary) 17%, transparent), transparent 39%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface)), var(--color-surface) 60%);
  box-shadow: var(--shadow-sm);
}

/* Leaves is rendered directly into the route outlet rather than a module
   wrapper. Its content follows the same width as the shared header without
   changing any rendering behaviour. */
.lv-head.workspace-hero + #lv-body {
  width: min(var(--workspace-max), 100%);
  margin-inline: auto;
}

/* Settings subpages used several generations of small standalone headings,
   and the dashboard settings page had no heading at all. Normalise every
   settings header to the same workspace surface while preserving each
   page's existing controls, forms and permissions. */
.settings-subpage,
.company-settings-page,
.calendar-settings-page,
.sub-page,
.cs-settings-page {
  width: min(var(--workspace-max), 100%);
  margin-inline: auto;
}

.sub-page {
  overflow-x: clip;
}

.settings-page-head,
.company-settings-head,
.calendar-settings-head,
.sub-page-head {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-height: 148px;
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 92% -25%, color-mix(in srgb, var(--color-primary) 17%, transparent), transparent 39%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface)), var(--color-surface) 60%);
  box-shadow: var(--shadow-sm);
}

.settings-page-head::after,
.company-settings-head::after,
.calendar-settings-head::after,
.sub-page-head::after {
  position: absolute;
  z-index: -1;
  top: -118px;
  right: clamp(24px, 8vw, 96px);
  width: 250px;
  height: 250px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 11%, transparent);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.settings-page-head > *,
.company-settings-head > *,
.calendar-settings-head > *,
.sub-page-head > * {
  position: relative;
  z-index: 1;
}

.settings-page-head,
.company-settings-head,
.calendar-settings-head,
.sub-page-head {
  align-items: center;
}

.workspace-hero::after {
  position: absolute;
  z-index: -1;
  top: -118px;
  right: clamp(24px, 8vw, 96px);
  width: 250px;
  height: 250px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 11%, transparent);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.workspace-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-width: 0;
  padding-bottom: var(--space-6);
}

.workspace-hero > .workspace-hero__content {
  padding-bottom: var(--space-6);
}

.workspace-hero__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.workspace-hero .workspace-hero__eyebrow,
.workspace-hero__content > div:first-child {
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--font-bold);
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}

.workspace-hero h1 {
  max-width: 24ch;
  margin: 0;
  color: var(--color-fg);
  font-size: clamp(1.7rem, 3.1vw, 2.2rem);
  font-weight: var(--font-extrabold);
  letter-spacing: -.042em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.workspace-hero .workspace-hero__description,
.workspace-hero .acc-subtitle {
  max-width: 720px;
  margin: var(--space-2) 0 0;
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.workspace-hero__top > .btn,
.workspace-hero__top > .rp-report-count {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.workspace-hero__nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 54px;
  margin: 0 calc(-1 * var(--space-6));
  padding: 0 var(--space-6);
  overflow-x: auto;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
  border-bottom: 0;
  background: color-mix(in srgb, var(--color-surface) 68%, transparent);
  scrollbar-width: none;
}

.workspace-hero__nav::-webkit-scrollbar { display: none; }

.workspace-hero__nav.lv-tabs,
.workspace-hero__nav .lv-tabs {
  min-width: max-content;
  margin: 0;
  border-bottom: 0;
}

.workspace-hero__nav .lv-tab,
.workspace-hero > .workspace-hero__nav.lv-tabs .lv-tab {
  min-height: 54px;
  padding-block: 0;
  white-space: nowrap;
}

.workspace-hero .people-hub-tabs,
.workspace-hero .requests-toolbar,
.workspace-hero .docs-toolbar,
.workspace-hero .sv-toolbar {
  margin-top: 0;
  margin-bottom: 0;
}

.workspace-hero .rc-nav,
.workspace-hero .acc-tabs {
  bottom: auto;
  flex-wrap: nowrap;
  margin: 0 calc(-1 * var(--space-6));
  padding: 0 var(--space-6);
}

.workspace-hero .rc-nav__item,
.workspace-hero .acc-tab {
  min-height: 54px;
  white-space: nowrap;
}

.people-hero.workspace-hero,
.requests-hero.workspace-hero,
.docs-page-head.workspace-hero,
.assets-page-head.workspace-hero,
.sv-page-head.workspace-hero,
.rp-page-head.workspace-hero,
.kb-page-head.workspace-hero,
.lv-head.workspace-hero,
.acc-head.workspace-hero,
.rc-hub__hero.workspace-hero {
  align-items: initial;
  padding: var(--space-6) var(--space-6) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
}

.docs-toolbar {
  grid-template-columns: minmax(240px, 1fr) 200px;
  margin: var(--space-5) 0 var(--space-6);
}

.sv-page-head.workspace-hero + .sv-toolbar,
.people-hero.workspace-hero + .people-hub-tabs,
.requests-hero.workspace-hero + .requests-toolbar {
  display: none;
}

@media (max-width: 720px) {
  .settings-page-head,
  .company-settings-head,
  .calendar-settings-head,
  .sub-page-head {
    min-height: 0;
    padding: var(--space-5) var(--space-4);
  }

  .sub-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-hero,
  .people-hero.workspace-hero,
  .requests-hero.workspace-hero,
  .docs-page-head.workspace-hero,
  .assets-page-head.workspace-hero,
  .sv-page-head.workspace-hero,
  .rp-page-head.workspace-hero,
  .kb-page-head.workspace-hero,
  .lv-head.workspace-hero,
  .acc-head.workspace-hero,
  .rc-hub__hero.workspace-hero {
    padding: var(--space-5) var(--space-4) 0;
  }

  .workspace-hero__top {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
  }

  .workspace-hero > .workspace-hero__content {
    padding-bottom: var(--space-5);
  }

  .workspace-hero__top > .btn,
  .workspace-hero__top > .rp-report-count {
    align-self: flex-start;
  }

  .workspace-hero__nav,
  .workspace-hero .rc-nav,
  .workspace-hero .acc-tabs {
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
  }

  .workspace-hero .sv-toolbar__hint { display: none; }
  .docs-toolbar { grid-template-columns: 1fr; }
}

:root[data-theme='dark'] {
  --color-bg: #080b13;
  --color-surface: #111622;
  --color-surface-2: #171d2a;
  --color-surface-hover: #1b2231;
  --color-fg: #f3f5fa;
  --color-on-surface: #e1e6ef;
  --color-fg-muted: #a5afc0;
  --color-fg-subtle: #7e899d;
  --color-border: #273044;
  --color-border-strong: #354158;
  --color-primary-soft: rgba(59, 130, 246, .18);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22), 0 10px 28px rgba(0, 0, 0, .12);
  --shadow-md: 0 5px 14px rgba(0, 0, 0, .24), 0 18px 44px rgba(0, 0, 0, .16);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .36);
}

body {
  background:
    radial-gradient(920px 500px at 92% -12%, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent 68%),
    var(--color-bg);
  letter-spacing: -.006em;
}

h1, h2, h3 { letter-spacing: -.025em; }

/* ---------- App shell ---------- */
.app-sidebar {
  padding: 16px 12px 12px;
  border-right-color: color-mix(in srgb, var(--color-border) 84%, transparent);
  background:
    radial-gradient(330px 250px at 0 0, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--color-surface) 98%, var(--color-primary) 2%);
  box-shadow: 12px 0 38px rgba(15, 23, 42, .025);
}

:root[data-theme='dark'] .app-sidebar {
  background:
    radial-gradient(320px 270px at 0 0, rgba(59, 130, 246, .1), transparent 70%),
    #0d121d;
  border-right-color: rgba(255, 255, 255, .07);
}

.sidebar__brand {
  min-height: 48px;
  padding: 2px 10px 8px;
}
.sidebar__brand-row { min-width: 0; }
.sidebar__brand-icon {
  width: 38px; height: 38px; padding: 4px;
  border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
  background: var(--color-surface); box-shadow: var(--shadow-xs);
}
.sidebar__brandname {
  overflow: hidden; color: var(--color-fg); font-size: var(--text-base);
  font-weight: var(--font-bold); letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__powered { margin-top: 2px; padding-left: 50px; opacity: .58; }
.sidebar__profile {
  position: relative;
  min-height: 62px;
  margin-block: 4px 14px;
  padding: 10px;
  border-color: color-mix(in srgb, var(--color-border) 78%, transparent);
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 96%, var(--color-primary) 4%), var(--color-surface));
  box-shadow: var(--shadow-xs);
  text-decoration: none;
}
.sidebar__profile:hover {
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.sidebar__profile-avatar .employee-avatar {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
}
.sidebar__profile-name { font-size: .84rem; letter-spacing: -.01em; }
.sidebar__profile-role { margin-top: 2px; font-size: .7rem; }
.sidebar__profile-arrow { transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast); }
.sidebar__profile:hover .sidebar__profile-arrow { color: var(--color-primary); transform: translateX(2px); }
.sidebar__section-label { margin: 0 0 6px; padding-inline: 12px; }
.sidebar__nav { gap: 2px; }
.sidebar__link {
  min-height: 40px;
  padding: 5px 8px;
  border-radius: 12px;
  font-size: .84rem;
  font-weight: var(--font-medium);
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.sidebar__link > .icon:first-child {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px;
  background: color-mix(in srgb, var(--color-surface-hover) 82%, transparent);
  color: var(--color-fg-muted);
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.sidebar__link:hover {
  color: var(--color-fg);
  background: color-mix(in srgb, var(--color-surface-hover) 72%, transparent);
  transform: translateX(2px);
}
.sidebar__link:hover > .icon:first-child {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.sidebar__link.is-active {
  color: var(--color-primary);
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--color-primary-soft) 94%, transparent),
    color-mix(in srgb, var(--color-primary-soft) 45%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 13%, transparent), 0 5px 16px color-mix(in srgb, var(--color-primary) 7%, transparent);
  transform: none;
}
.sidebar__link.is-active > .icon:first-child {
  background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, var(--color-accent)));
  color: var(--color-on-primary);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.sidebar__link .sidebar__link-arrow {
  margin-right: 3px;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.sidebar__item:hover .sidebar__link-arrow { opacity: 1; transform: translateX(2px); }
.sidebar__submenu {
  min-width: 220px; padding: 7px;
  border-color: color-mix(in srgb, var(--color-border) 82%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  box-shadow: 0 18px 52px rgba(15, 23, 42, .16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.sidebar__submenu-link {
  position: relative; padding: 9px 11px 9px 28px; border-radius: 9px;
  color: var(--color-fg-muted); font-size: .8rem; text-decoration: none;
}
.sidebar__submenu-link::before {
  position: absolute; left: 11px; top: 50%; width: 6px; height: 6px;
  border: 1px solid var(--color-border-strong); border-radius: 50%;
  content: ''; transform: translateY(-50%);
}
.sidebar__submenu-link:hover { color: var(--color-fg); }
.sidebar__submenu-link.is-active { color: var(--color-primary); font-weight: var(--font-semibold); }
.sidebar__submenu-link.is-active::before { border-color: var(--color-primary); background: var(--color-primary); }
.sidebar__bottom {
  margin-top: auto;
  padding: 10px 8px 0;
  border-top-color: color-mix(in srgb, var(--color-border) 76%, transparent);
}
.sidebar__bottom .sidebar__section-label { padding-inline: 4px; }
.sidebar__bottom .sidebar__link { padding-inline: 4px; }
.sidebar__collapse {
  min-height: 38px; margin-top: 5px; padding: 4px; border-radius: 10px;
  font-size: .78rem;
}
.sidebar__collapse .icon {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px;
  background: var(--color-surface-hover);
}
.sidebar__mobile-close {
  border-color: color-mix(in srgb, var(--color-border) 78%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: var(--shadow-xs);
}
.sidebar__mobile-close:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); }

@media (min-width: 901px) {
  :root[data-sidebar-collapsed] .app-sidebar { padding-inline: 8px; }
  :root[data-sidebar-collapsed] .sidebar__brand { min-height: 48px; padding-inline: 0; }
  :root[data-sidebar-collapsed] .sidebar__profile { width: 48px; min-height: 48px; margin: 4px auto 14px; padding: 4px; }
  :root[data-sidebar-collapsed] .sidebar__link,
  :root[data-sidebar-collapsed] .sidebar__collapse {
    width: 48px; min-height: 44px; margin-inline: auto; padding: 7px;
  }
  :root[data-sidebar-collapsed] .sidebar__link > .icon:first-child,
  :root[data-sidebar-collapsed] .sidebar__collapse .icon { width: 30px; height: 30px; }
  :root[data-sidebar-collapsed] .sidebar__bottom { padding-inline: 0; }
}

@media (max-width: 900px) {
  .app-sidebar { width: min(88vw, 360px); padding: max(18px, env(safe-area-inset-top, 0px)) 14px 16px; }
  .sidebar__brand { padding-right: 48px; }
  .sidebar__profile { margin-top: 8px; }
  .sidebar__link { min-height: 44px; }
  .sidebar__bottom { padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
}

/* Keep the complete desktop navigation reachable on shorter laptop screens
   without turning the sidebar into a scroll container (which would clip the
   desktop flyout submenus). Taller screens retain the roomier rhythm above. */
@media (min-width: 901px) and (max-height: 800px) {
  .app-sidebar { padding-block: 10px 8px; }
  .sidebar__brand { min-height: 40px; padding-block: 0 4px; }
  .sidebar__brand-icon { width: 34px; height: 34px; }
  .sidebar__powered { padding-left: 46px; }
  .sidebar__profile { min-height: 52px; margin-block: 2px 9px; padding: 7px 9px; }
  .sidebar__profile-avatar .employee-avatar { width: 36px !important; height: 36px !important; }
  .sidebar__section-label { margin-bottom: 4px; }
  .sidebar__link { min-height: 34px; padding-block: 2px; }
  .sidebar__link > .icon:first-child { width: 28px; height: 28px; padding: 5px; }
  .sidebar__bottom { padding-top: 6px; }
  .sidebar__collapse { min-height: 34px; margin-top: 3px; padding-block: 2px; }
  :root[data-sidebar-collapsed] .sidebar__profile { min-height: 44px; margin-bottom: 9px; }
  :root[data-sidebar-collapsed] .sidebar__link,
  :root[data-sidebar-collapsed] .sidebar__collapse { min-height: 40px; padding-block: 5px; }
}

.app-header {
  height: 68px;
  padding-inline: 24px;
  border-bottom-color: color-mix(in srgb, var(--color-border) 82%, transparent);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: 0 1px 14px rgba(15, 23, 42, .025);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.hdr-search input {
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface-2) 82%, transparent);
}
.hdr-search input:hover { border-color: var(--color-border); }
.hdr-icon, .hdr-user { border-radius: 11px; }
.hdr-icon:hover, .hdr-user:hover { background: var(--color-surface-hover); }

.app-view { padding: 34px 32px 56px; }
.license-banner { border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }

/* ---------- Shared controls and surfaces ---------- */
.card {
  border-color: color-mix(in srgb, var(--color-border) 92%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.btn {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 12px;
  letter-spacing: -.005em;
}
.btn--primary {
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 18%, transparent), inset 0 1px rgba(255,255,255,.15);
}
.btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-active));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 24%, transparent), inset 0 1px rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.btn--ghost {
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.modal-overlay {
  background: color-mix(in srgb, var(--color-overlay) 92%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.modal {
  border-color: color-mix(in srgb, var(--color-border) 86%, transparent);
  border-radius: 22px;
}
.modal__head { padding: 24px 26px 18px; }
.modal__body { padding: 24px 26px 26px; }
.modal__close { width: 36px; height: 36px; border: 1px solid var(--color-border); }
.modal-input,
.people-filter,
.people-search input,
.settings-search {
  min-height: 44px;
  border-color: var(--color-border);
  border-radius: 11px;
  background-color: var(--color-surface);
  box-shadow: 0 1px 2px rgba(15,23,42,.025);
}
.modal-input:focus,
.people-filter:focus,
.people-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-soft) 76%, transparent);
}

.dropdown-menu {
  padding: 6px;
  border-color: var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.dropdown-item { min-height: 38px; padding: 9px 12px; border-radius: 9px; }

/* ---------- Navigation and content hierarchy ---------- */
.lv-tabs, .profile-tabs {
  gap: 4px;
  border-bottom-color: var(--color-border);
}
.lv-tab, .profile-tab {
  min-height: 44px;
  padding-inline: 15px;
  letter-spacing: -.005em;
}
.lv-section-head h1,
.settings-title { letter-spacing: -.035em; }

.status-badge,
.prio-badge,
.doc-exp,
.goal-conf,
.dev-action__status {
  min-height: 23px;
  padding-inline: 9px;
  border: 1px solid color-mix(in srgb, currentColor 13%, transparent);
}

.people-table,
.data-table {
  border-collapse: separate;
  border-spacing: 0;
}
.people-table th,
.data-table th {
  background: color-mix(in srgb, var(--color-surface-2) 72%, transparent);
  color: var(--color-fg-muted);
  font-size: .72rem;
  font-weight: var(--font-semibold);
  letter-spacing: .025em;
  text-transform: uppercase;
}
.people-table tbody tr,
.data-table tbody tr { transition: background var(--dur-fast); }
.people-table tbody tr:hover,
.data-table tbody tr:hover { background: var(--color-surface-hover); }

/* ---------- Dashboard ---------- */
.dashboard-grid {
  max-width: 1180px;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
}
.dash-main { gap: 28px; }
.dash-aside { gap: 14px; }
.greeting-block h1 {
  font-size: clamp(1.75rem, 2.6vw, 2.15rem);
  letter-spacing: -.045em;
}
.announcement-card { padding: 22px; }
.announcement-card.is-pinned {
  border-left-width: 4px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--color-primary-soft) 35%, transparent), transparent 42%),
    var(--color-surface);
}
.announcement-card__img { max-height: 190px; border-radius: 13px; }
.stat-chip {
  min-height: 134px;
  padding: 17px;
  border-radius: 17px;
  background:
    radial-gradient(130px 80px at 100% 0, color-mix(in srgb, var(--color-primary-soft) 46%, transparent), transparent 76%),
    var(--color-surface);
}
.stat-chip__value { font-size: 1.9rem; letter-spacing: -.045em; }
.dash-card, .leave-widget { padding: 18px; }

/* ---------- People and settings ---------- */
.people-card {
  border-radius: 17px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.people-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.settings-hub-head { margin-bottom: 26px; }
.settings-hub-chips { gap: 9px; }
.settings-hub-chip {
  min-height: 42px;
  padding: 6px 14px 6px 7px;
  background: var(--color-surface);
}
.settings-hub-card {
  padding: 6px;
  gap: 2px;
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.settings-hub-row { min-height: 52px; padding: 8px 10px; border-radius: 11px; }
.settings-hub-row:hover { background: var(--color-surface-hover); }

/* ---------- Auth ---------- */
.auth-page {
  background:
    radial-gradient(900px 580px at 12% -6%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 68%),
    radial-gradient(800px 520px at 92% 8%, color-mix(in srgb, var(--color-accent) 11%, transparent), transparent 66%),
    var(--color-bg);
}
.auth-card {
  max-width: 420px;
  padding: 36px;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.auth-input {
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(15,23,42,.025);
}

@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 292px; gap: 22px; }
}

@media (max-width: 900px) {
  .app-header { height: 62px; padding-inline: 14px; }
  .app-view { padding: 26px 20px 44px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dash-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-chips { grid-column: 1 / -1; }
  .app-sidebar { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
}

@media (max-width: 560px) {
  .app-view { padding: 22px 16px 38px; }
  .card { border-radius: 16px; }
  .lv-tabs, .profile-tabs { margin-bottom: 20px; }
  .lv-tab, .profile-tab { min-height: 42px; padding-inline: 12px; }
  .modal { margin: 8px; border-radius: 19px; }
  .modal__head { padding: 20px 20px 16px; }
  .modal__body { padding: 20px; }
  .dash-aside { grid-template-columns: 1fr; }
  .stat-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-chip { min-height: 112px; padding: 15px; }
  .people-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-items: stretch;
  }
  .people-search { grid-column: 1 / -1; }
  .people-filter { width: 100%; min-width: 0; }
  .people-viewtoggle { width: max-content; }
  .people-toolbar .btn { width: 100%; padding-inline: 10px; }
  #p-bulk-roles,
  #p-invite { grid-column: 1 / -1; }
  .org-chart {
    overflow-x: auto;
    padding: 12px;
    scrollbar-width: none;
  }
  .org-chart::-webkit-scrollbar { display: none; }
  .org-title { margin-bottom: 8px; }
  .org-tree,
  .org-tree ul,
  .org-tree li {
    display: flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .org-node {
    min-height: 38px;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
  }
  .settings-hub-chip { min-height: 40px; }
  .auth-card { padding: 28px 22px; }
}