/* ==========================================================================
   ATA PEOPLE HUB — REUSABLE DESIGN SYSTEM
   Loaded after legacy styles so new primitives and compatibility bridges win.
   Use ds-* classes for new UI. Existing hz-* and reference-* components are
   visually mapped here while older pages are migrated.
   ========================================================================== */

/* Layout primitives */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ds-page,
.reference-page,
.reference-dashboard {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}
.ds-showcase-shell {
  min-height: 100vh;
  padding: clamp(1rem, 4vw, 3rem);
  background: var(--color-canvas);
}

.ds-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-stack--sm { gap: var(--space-2); }
.ds-stack--lg { gap: var(--space-6); }
.ds-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.ds-grid { display: grid; gap: var(--space-4); }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2,
.grid-3,
.grid-4,
.grid-7-5,
.grid-8-4 { gap: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.gap-3 { gap: var(--space-3); }

/* Page headings */
.ds-page-header,
.reference-page-header,
.reference-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.ds-page-heading { min-width: 0; }
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-action);
  font-size: var(--font-size-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-page-title,
.reference-page h1,
.reference-dashboard-heading h1 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 650;
  letter-spacing: var(--letter-tight);
  line-height: var(--line-height-tight);
}
.ds-page-description,
.reference-page-heading p,
.reference-dashboard-heading p {
  max-width: 46rem;
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}
.ds-page-actions,
.reference-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Cards */
.ds-card,
.hz-card,
.reference-card,
.reference-dashboard-card,
.reference-stat-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: 1.375rem;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.025);
}
.ds-card { padding: var(--space-5); }
.ds-card--compact { padding: var(--space-4); }
.ds-card--interactive,
.hz-card.hoverable {
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.ds-card--interactive:hover,
.hz-card.hoverable:hover {
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.content-body .hz-card:not(.hoverable):hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.025);
  transform: none;
}
.ds-card__header,
.hz-card-header,
.reference-card-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.ds-card__title,
.hz-card-title,
.reference-card-toolbar h2,
.reference-dashboard-card h2 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: var(--line-height-tight);
}
.ds-card__description,
.hz-card-subtitle,
.reference-card-toolbar p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Buttons */
.ds-button,
.btn,
.reference-button {
  display: inline-flex;
  min-height: var(--control-md);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.ds-button:hover,
.btn:hover,
.reference-button:hover { transform: translateY(-1px); }
.ds-button:active,
.btn:active,
.reference-button:active { transform: translateY(0); }
.ds-button:disabled,
.btn:disabled,
.reference-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}
.ds-button[aria-busy='true'],
.btn[aria-busy='true'] { cursor: progress; }
.ds-button[aria-busy='true']::before,
.btn[aria-busy='true']::before {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ds-spin 700ms linear infinite;
  content: '';
}
.ds-button--primary,
.btn-primary,
.reference-button.primary {
  background: var(--color-action);
  color: var(--color-on-action);
  box-shadow: none;
}
.ds-button--primary:hover,
.btn-primary:hover,
.reference-button.primary:hover {
  background: var(--color-action-hover);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-action) 20%, transparent);
}
.ds-button--dark {
  background: var(--color-action-strong);
  color: var(--color-text-inverse);
}
.ds-button--dark:hover { background: var(--color-action-strong-hover); }
.ds-button--secondary,
.btn-secondary,
.reference-button.secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.ds-button--secondary:hover,
.btn-secondary:hover,
.reference-button.secondary:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}
.ds-button--ghost,
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.ds-button--ghost:hover,
.btn-ghost:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.ds-button--success,
.btn-success { background: var(--color-success-strong); color: #fff; box-shadow: none; }
.ds-button--danger,
.btn-danger { background: var(--color-danger-strong); color: #fff; box-shadow: none; }
.ds-button--sm,
.btn-sm { min-height: var(--control-sm); padding-inline: var(--space-3); font-size: var(--font-size-xs); }
.ds-button--lg { min-height: var(--control-lg); padding-inline: var(--space-5); }
.ds-button--icon,
.btn-icon,
.reference-icon-button {
  width: var(--control-md);
  min-width: var(--control-md);
  height: var(--control-md);
  min-height: var(--control-md);
  padding: 0;
}
.ds-button svg,
.btn svg,
.reference-button svg { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 auto; }

/* Badges */
.ds-badge,
.badge,
.reference-status {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.ds-badge::before,
.badge::before {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  content: '';
}
.ds-badge--success,
.badge-success,
.reference-status.success { background: var(--color-success-bg); color: var(--color-success); }
.ds-badge--warning,
.badge-warning,
.reference-status.warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ds-badge--danger,
.badge-danger,
.reference-status.danger { background: var(--color-danger-bg); color: var(--color-danger); }
.ds-badge--info,
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.ds-badge--neutral,
.badge-neutral,
.reference-status.neutral { background: var(--color-neutral-bg); color: var(--color-text-secondary); }
.ds-badge--accent,
.badge-purple,
.badge-primary { background: var(--color-action-soft); color: var(--color-action); }

/* Forms */
.ds-field,
.form-group { display: grid; gap: var(--space-2); margin: 0; }
.ds-label,
.form-label {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.ds-input,
.ds-select,
.ds-textarea,
.form-control,
.reference-modal input,
.reference-modal textarea {
  width: 100%;
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-md);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.ds-textarea,
.reference-modal textarea { min-height: 6rem; padding-block: var(--space-3); resize: vertical; }
.ds-input::placeholder,
.ds-textarea::placeholder,
.form-control::placeholder { color: var(--color-text-disabled); }
.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover,
.form-control:hover { border-color: var(--color-border-strong); }
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus,
.form-control:focus,
.reference-modal input:focus,
.reference-modal textarea:focus {
  border-color: var(--color-border-focus);
  background: var(--color-surface);
  box-shadow: var(--shadow-focus);
}
.ds-help { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ds-error { color: var(--color-danger); font-size: var(--font-size-xs); }
.ds-input[aria-invalid='true'],
.form-control[aria-invalid='true'] { border-color: var(--color-danger); }

/* Search and toolbars */
.ds-toolbar,
.reference-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.ds-search,
.reference-search {
  display: flex;
  width: min(20rem, 100%);
  min-height: var(--control-md);
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.ds-search:focus-within,
.reference-search:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.ds-search input,
.reference-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
}

/* Data tables */
.ds-table-wrap,
.table-responsive,
.reference-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.ds-table,
.hz-table,
.reference-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text);
  text-align: left;
}
.ds-table th,
.hz-table th,
.reference-table th,
.data-table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}
.ds-table td,
.hz-table td,
.reference-table td,
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  vertical-align: middle;
}
.ds-table tbody tr,
.hz-table tbody tr,
.reference-table tbody tr,
.data-table tbody tr { transition: background-color var(--transition-fast); }
.ds-table tbody tr:hover,
.hz-table tbody tr:hover,
.reference-table tbody tr:hover,
.data-table tbody tr:hover { background: var(--color-surface-hover); }
.ds-table tbody tr:last-child td,
.hz-table tbody tr:last-child td,
.reference-table tbody tr:last-child td,
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Metric cards */
.ds-metric-grid,
.reference-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.ds-metric-card,
.metric-card,
.reference-stat-card {
  display: flex;
  min-height: 7.5rem;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
}
.ds-metric-card__top,
.metric-header-row,
.reference-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.ds-metric-card__label,
.metric-label,
.reference-stat-top > span:first-child {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.025em;
}
.ds-metric-card__value,
.metric-value,
.reference-stat-card > strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-2xl);
  font-weight: 650;
  letter-spacing: var(--letter-tight);
  line-height: var(--line-height-tight);
}
.ds-metric-card__value-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}
.ds-metric-card__delta {
  display: inline-flex;
  min-height: 1.375rem;
  align-items: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-bg);
  color: var(--color-text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}
.ds-metric-card__delta--success { background: var(--color-success-bg); color: var(--color-success); }
.ds-metric-card__delta--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ds-metric-card__delta--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.ds-metric-card--featured {
  border-color: transparent;
  background: var(--gradient-primary);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.ds-metric-card--featured .ds-metric-card__label,
.ds-metric-card--featured .ds-metric-card__meta { color: color-mix(in srgb, white 90%, transparent); }
.ds-metric-card--featured .ds-metric-card__value { color: white; }
.ds-metric-card--featured .ds-icon-tile {
  background: color-mix(in srgb, white 18%, transparent);
  color: white;
}
.ds-metric-card--featured .ds-metric-card__delta {
  background: color-mix(in srgb, white 92%, transparent);
  color: var(--color-success-strong);
}
.ds-metric-card__meta,
.reference-stat-card > small {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.ds-icon-tile,
.metric-icon-box,
.reference-stat-icon,
.reference-page-icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-hover);
  color: var(--color-text);
  flex: 0 0 auto;
}
.ds-icon-tile--accent,
.reference-page-icon { background: var(--color-action-soft); color: var(--color-action); }
.ds-icon-tile--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.ds-icon-tile--info { background: var(--color-info-bg); color: var(--color-info); }
.ds-icon-tile--success { background: var(--color-success-bg); color: var(--color-success); }
.ds-icon-tile--warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* Alerts */
.ds-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.ds-alert__content { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.ds-alert__icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-on-action);
  flex: 0 0 auto;
}
.ds-alert__copy { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.ds-alert__copy strong { color: var(--color-text); font-weight: 600; }

/* Dashboard compositions */
.reference-dashboard > .ds-alert { margin-bottom: var(--space-4); }
.reference-dashboard-stats { margin-bottom: var(--space-6); }
.reference-dashboard-overview,
.reference-dashboard-insights { gap: var(--space-4); }
.attendance-summary,
.leave-summary,
.reference-company-leave,
.company-attendance-card,
.churn-rate-card,
.daily-late-card,
.workflow-guide { padding: var(--space-5); }
.reference-leave-track,
.churn-rate-track { background: var(--color-surface-active); }
.reference-leave-track i,
.churn-rate-track i { background: var(--color-action); }
.reference-leave-total {
  border-color: color-mix(in srgb, var(--color-success) 25%, var(--color-border));
  background: var(--color-success-bg);
  color: var(--color-success);
}
.reference-leave-total strong { color: var(--color-success-strong); }
.reference-leave-total small { color: var(--color-success); }
.daily-late-status { background: var(--color-success-bg); color: var(--color-success); }
.workflow-guide-item { border-color: var(--color-border); border-radius: var(--radius-md); }
.workflow-guide-trigger:hover { background: var(--color-surface-hover); }
.workflow-guide-marker { background: var(--color-action-soft); color: var(--color-action); }
.workflow-guide-item.is-open .workflow-guide-chevron { color: var(--color-action); }
.workflow-guide-steps li { border-color: var(--color-border-strong); color: var(--color-text-secondary); }
.workflow-guide-steps li > span { background: var(--color-action); color: #fff; }

/* Avatars */
.ds-avatar {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  place-items: center;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-action-soft);
  color: var(--color-action);
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar--sm { width: 1.75rem; height: 1.75rem; }
.ds-avatar--lg { width: 3rem; height: 3rem; }
.ds-avatar-group { display: flex; align-items: center; }
.ds-avatar-group .ds-avatar + .ds-avatar { margin-left: -0.55rem; }

/* Tabs */
.ds-tabs,
.hz-tabs-header,
.profile-tabs-nav {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: var(--space-1);
  padding: var(--space-1);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.ds-tab,
.hz-tab-btn,
.profile-tab-btn {
  min-height: var(--control-sm);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
}
.ds-tab,
.profile-tab-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.ds-tab:hover,
.hz-tab-btn:hover,
.profile-tab-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ds-tab[aria-selected='true'],
.ds-tab.is-active,
.hz-tab-btn.active,
.profile-tab-btn.active { background: var(--color-surface-active); color: var(--color-text); }
.hz-tab-btn.active::after { display: none; }

/* Progress */
.ds-progress {
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-active);
}
.ds-progress__bar {
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-action);
  transition: width var(--duration-slow) var(--ease-standard);
}
.ds-progress--success .ds-progress__bar { background: var(--color-success); }
.ds-progress--info .ds-progress__bar { background: var(--color-info); }

/* Empty states */
.ds-empty,
.reference-empty {
  display: grid;
  min-height: 12rem;
  place-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--color-text-secondary);
  text-align: center;
}
.ds-empty__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
}
.ds-empty__title { color: var(--color-text); font-size: var(--font-size-lg); font-weight: 650; }
.ds-empty__description { max-width: 28rem; font-size: var(--font-size-sm); }

/* Switches */
.ds-switch {
  position: relative;
  display: flex;
  min-height: var(--control-lg);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
}
.ds-switch > span:first-child { display: grid; gap: 0.125rem; }
.ds-switch strong { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; }
.ds-switch small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ds-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ds-switch__control {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-active);
  flex: 0 0 auto;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.ds-switch__control::after {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  content: '';
  transition: transform var(--transition-fast);
}
.ds-switch input:checked + .ds-switch__control {
  border-color: var(--color-action);
  background: var(--color-action);
}
.ds-switch input:checked + .ds-switch__control::after { transform: translateX(1rem); }
.ds-switch input:focus-visible + .ds-switch__control { box-shadow: var(--shadow-focus); }
.ds-switch input:disabled + .ds-switch__control { opacity: 0.48; cursor: not-allowed; }

.ds-choice {
  display: inline-flex;
  min-height: var(--control-md);
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.ds-choice input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-action);
}
.ds-choice input:disabled { opacity: 0.48; cursor: not-allowed; }
.ds-file-upload {
  display: grid;
  min-height: 8rem;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ds-file-upload:hover,
.ds-file-upload:focus-within { border-color: var(--color-action); background: var(--color-action-soft); }
.ds-file-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ds-file-upload strong { color: var(--color-text); font-size: var(--font-size-sm); }
.ds-file-upload small { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* Loading */
.ds-skeleton-stack { display: grid; gap: var(--space-2); }
.ds-skeleton {
  display: block;
  width: var(--skeleton-width, 100%);
  height: 0.875rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-active);
}
.ds-skeleton::after {
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 70%, transparent), transparent);
  animation: ds-shimmer 1.25s infinite;
  content: '';
}

/* Toasts */
.ds-toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1200;
  display: grid;
  width: min(24rem, calc(100vw - 2rem));
  gap: var(--space-2);
}
.ds-toast {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.125rem var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-secondary);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-popover);
  font-size: var(--font-size-sm);
}
.ds-toast strong { color: var(--color-text); }
.ds-toast > span { grid-column: 1; }
.ds-toast button {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.ds-toast button:hover { background: var(--color-surface-hover); }
.ds-toast--success { border-left-color: var(--color-success); }
.ds-toast--warning { border-left-color: var(--color-warning); }
.ds-toast--danger { border-left-color: var(--color-danger); }
.ds-toast--info { border-left-color: var(--color-info); }

/* Popovers and drawers */
.ds-popover,
.ds-dropdown {
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-popover);
}
.ds-popover__item {
  display: flex;
  width: 100%;
  min-height: var(--control-md);
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
}
.ds-popover__item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ds-tooltip {
  position: relative;
  display: inline-flex;
}
.ds-tooltip::after {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: 15rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-popover);
  content: attr(data-tooltip);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.25rem);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.ds-tooltip:hover::after,
.ds-tooltip:focus-within::after { opacity: 1; transform: translate(-50%, 0); }
.app-notification-popover {
  position: fixed;
  top: 4.75rem;
  right: var(--space-5);
  z-index: 999;
  width: 20rem;
  padding: 0;
  overflow: hidden;
}
.app-notification-header,
.app-notification-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-subtle);
}
.app-notification-header { border-bottom: 1px solid var(--color-border); }
.app-notification-footer { justify-content: center; border-top: 1px solid var(--color-border); }
.app-notification-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 650;
}
.app-notification-list { max-height: 20rem; overflow-y: auto; padding: var(--space-2); }
.app-notification-item {
  padding: var(--space-3);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
}
.app-notification-item.is-unread {
  border-left-color: var(--color-action);
  background: var(--color-action-soft);
}
.app-notification-item-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.app-notification-item-heading span { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; }
.app-notification-item-heading time { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.app-notification-item p { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.is-hidden { display: none !important; }
.ds-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1100;
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--space-5);
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-modal);
}

/* Kanban and task cards */
.ds-kanban {
  display: grid;
  grid-auto-columns: minmax(17rem, 1fr);
  grid-auto-flow: column;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: inline proximity;
}
.ds-kanban__column {
  display: flex;
  min-height: 20rem;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  scroll-snap-align: start;
}
.ds-kanban__header {
  display: flex;
  min-height: var(--control-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.ds-task-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.ds-task-card__title { color: var(--color-text); font-size: var(--font-size-md); font-weight: 650; }
.ds-task-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* Stepper */
.ds-stepper {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}
.ds-stepper__item {
  display: flex;
  min-width: max-content;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.ds-stepper__item:not(:last-child)::after {
  width: 2.5rem;
  height: 1px;
  margin: 0 var(--space-2);
  background: var(--color-border-strong);
  content: '';
}
.ds-stepper__index {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: var(--space-2);
  place-items: center;
  border-radius: 50%;
  background: var(--color-neutral-bg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 650;
}
.ds-stepper__item.is-complete .ds-stepper__index,
.ds-stepper__item.is-current .ds-stepper__index { background: var(--color-action); color: var(--color-on-action); }
.ds-stepper__item.is-current { color: var(--color-text); font-weight: 600; }

/* Pagination, filtering and charts */
.ds-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}
.ds-pagination__item {
  display: inline-grid;
  min-width: var(--control-sm);
  height: var(--control-sm);
  padding: 0 var(--space-2);
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.ds-pagination__item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ds-pagination__item[aria-current='page'] { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); }
.ds-filter-bar,
.ds-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.ds-bulk-bar { border-color: color-mix(in srgb, var(--color-action) 30%, var(--color-border)); background: var(--color-action-soft); }
.ds-chart {
  position: relative;
  min-height: 16rem;
  padding: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.ds-chart__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-xs); }

/* Feature-pattern bridges */
.checkin-hero-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-card);
}
.checkin-hero-card::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-action) 35%, transparent), transparent 70%);
}
.camera-preview-box {
  border-color: color-mix(in srgb, var(--color-text-inverse) 24%, transparent);
  border-radius: var(--radius-lg);
  background: var(--ds-black);
}
.gps-badge {
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 18%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
}
.wizard-steps::before { height: 2px; background: var(--color-border); }
.step-circle {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.wizard-step-item.active .step-circle {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-on-action);
  box-shadow: var(--shadow-focus);
}
.wizard-step-item.completed .step-circle {
  border-color: var(--color-success-strong);
  background: var(--color-success-strong);
  color: #fff;
}
.wizard-step-item.active .step-title { color: var(--color-action); }
.calendar-header-grid { border-color: var(--color-border); color: var(--color-text-secondary); }
.shift-page { width: 100%; max-width: 75rem; margin-inline: auto; }
.shift-tabs { width: 100%; margin-bottom: var(--space-5); scrollbar-width: none; }
.shift-tabs .ds-tab { flex: 0 0 auto; }
.calendar-days-grid { gap: var(--space-2); }
.cal-day-cell {
  border-color: transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.cal-day-cell:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.cal-day-cell.today { border-color: var(--color-action); background: var(--color-action-soft); }
.cal-shift-pill { display: inline-flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-sm); }
.shift-morning { background: var(--color-info-bg); color: var(--color-info); }
.shift-afternoon { background: var(--color-warning-bg); color: var(--color-warning); }
.shift-night { background: var(--color-action-soft); color: var(--color-action); }
.shift-wfh { background: var(--color-success-bg); color: var(--color-success); }
.shift-off { background: var(--color-neutral-bg); color: var(--color-text-secondary); }
.workflow-step-node {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.profile-cover-mesh {
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--color-action) 42%, transparent), transparent 30%),
    var(--color-surface-inverse);
}
.profile-avatar-pulse {
  border-color: var(--color-surface);
  background: var(--color-action);
  color: var(--color-on-action);
  box-shadow: var(--shadow-popover);
}
.digital-badge-card {
  border-color: color-mix(in srgb, var(--ds-white) 14%, transparent);
  border-radius: var(--radius-lg);
  background: var(--ds-ink-950);
  box-shadow: var(--shadow-popover);
}
.info-item-box {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.info-item-box:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.copy-pill-btn {
  min-height: var(--control-sm);
  padding-inline: var(--space-3);
  border-color: var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.copy-pill-btn:hover { border-color: var(--color-action); background: var(--color-action); color: var(--color-on-action); }
.timeline-dot { background: var(--color-action); box-shadow: 0 0 0 2px var(--color-action); }

/* Modals */
.modal-backdrop {
  padding: var(--space-4);
  background: rgba(15, 15, 14, 0.58);
  backdrop-filter: blur(4px);
}
.modal-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-modal);
}
.modal-header,
.modal-footer { border-color: var(--color-border); }
.modal-footer { background: var(--color-surface-subtle); }

/* Application shell: the sidebar is expanded by default. Its compact rail is
   applied only by the explicit sidebar button state in layout.css. */
.app-wrapper { min-height: 100vh; background: var(--color-canvas); }
.sidebar {
  width: var(--sidebar-expanded);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  box-shadow: none;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

/* Completely prevent scrollbars within the sidebar */
.sidebar,
.sidebar *,
.sidebar-menu-scroll {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sidebar::-webkit-scrollbar,
.sidebar *::-webkit-scrollbar,
.sidebar-menu-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.main-wrapper {
  margin-left: var(--sidebar-expanded);
  transition: margin-left var(--transition-normal);
}

.sidebar-header {
  height: 3.875rem;
  min-height: 3.875rem;
  padding-inline: 0.875rem;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.brand-logo {
  min-width: 0;
  gap: var(--space-2);
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 1;
}
.brand-logo-img {
  height: 1.625rem;
  width: auto;
  max-width: 4.5rem;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: transform var(--duration-fast, 150ms) var(--ease-standard, ease);
}
.brand-logo:hover .brand-logo-img {
  transform: scale(1.03);
}
.brand-icon-box {
  width: 2.375rem;
  min-width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-info { display: flex; flex-direction: column; min-width: 0; }
.brand-title { color: var(--color-text); font-size: 0.875rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-badge { color: var(--color-text-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.5px; line-height: 1; }

.sidebar-menu-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none;
  padding: 0.25rem 0.625rem;
  gap: 2px;
}

.menu-section-title {
  margin: 0.25rem 0 0.125rem;
  padding: 0.25rem 0.5rem 0.125rem;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

.nav-item,
.nav-parent {
  min-height: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0 0.625rem;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transform: none !important;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nav-item:hover,
.nav-parent:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  transform: none !important;
}
.nav-item.active {
  background: var(--gradient-primary);
  color: white;
}
.route-dashboard .nav-item.active {
  padding: 0 0.625rem;
  border: 1px solid transparent;
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 20%, transparent);
  transform: none !important;
}
[data-theme='dark'] .nav-item.active,
[data-theme='dark'] .route-dashboard .nav-item.active {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 26%, transparent);
}
.nav-item.active .nav-icon { color: inherit; }
.nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex-shrink: 0;
}
.nav-item-content {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item-content span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-chevron {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.nav-submenu {
  display: none;
  margin: 2px 0 2px 0.75rem;
  padding: 2px 0 2px 0.5rem;
  border-left: 1px solid var(--color-border);
  flex-direction: column;
  gap: 1px;
}
.nav-submenu.open {
  display: flex;
}
.nav-subitem {
  min-height: 1.875rem;
  height: 1.875rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.nav-subitem:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-subitem.active { background: var(--color-action-soft); color: var(--color-action); font-weight: 600; }

.sidebar-footer {
  flex-shrink: 0;
  padding: 0.5rem 0.625rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  overflow: hidden;
}
.mini-user-card {
  display: flex;
  align-items: center;
  padding: 0.3125rem 0.5rem;
  border-radius: var(--radius-md);
  gap: 0.5rem;
  min-width: 0;
  background-color: var(--bg-card-secondary, rgba(0, 0, 0, 0.02));
}
.mini-user-card[role='button'] { cursor: pointer; }
.mini-user-monogram { background: var(--color-action-soft); color: var(--color-action); width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; }
.mini-avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mini-user-info { min-width: 0; flex: 1; overflow: hidden; }
.mini-user-name { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-user-role { font-size: 0.6875rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-sidebar-login-switch { width: 1.75rem; min-width: 1.75rem; height: 1.75rem; min-height: 1.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#btn-mobile-menu { display: none; }

@media (max-height: 720px) {
  .sidebar-header {
    height: 3.375rem;
    min-height: 3.375rem;
  }
  .brand-icon-box {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }
  .brand-title {
    font-size: 0.875rem;
  }
  .nav-item,
  .nav-parent {
    min-height: 2rem;
    height: 2rem;
    font-size: 0.8125rem;
  }
  .sidebar-menu-scroll {
    padding: 0.125rem 0.5rem;
    gap: 1px;
  }
  .sidebar-footer {
    padding: 0.375rem 0.5rem;
  }
}

.floating-navbar {
  top: 0;
  min-height: 4.5rem;
  margin: 0 var(--space-6) var(--space-2);
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
  box-shadow: none;
}
.topbar-leading { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.topbar-primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
}
.topbar-primary-link {
  display: inline-flex;
  min-height: var(--control-sm);
  align-items: center;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
}
.topbar-primary-link:hover { background: var(--color-surface-hover); color: var(--color-text); }
.topbar-primary-link.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }
.breadcrumb-area { gap: var(--space-1); }
.breadcrumb-path { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; }
.breadcrumb-title { color: var(--color-text); font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; letter-spacing: var(--letter-tight); }
.route-dashboard .breadcrumb-title { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -0.015em; }
.navbar-controls { padding: 0; background: transparent; box-shadow: none; }
.nav-action-btn,
.nav-language,
.nav-avatar-btn {
  min-width: var(--control-md);
  min-height: var(--control-md);
  border-color: var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}
.nav-action-btn:hover,
.nav-language:hover,
.nav-avatar-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-user-summary { border-radius: var(--radius-pill); }
.nav-user-summary:hover { background: var(--color-surface-hover); }
.nav-user-avatar-wrap { position: relative; display: inline-flex; width: var(--control-md); height: var(--control-md); flex: 0 0 auto; }
.nav-user-avatar-wrap img { width: 100%; height: 100%; border: 1px solid var(--color-border); border-radius: 50%; object-fit: cover; }
.nav-user-status { position: absolute; right: 0; bottom: 0; width: 0.625rem; height: 0.625rem; border: 2px solid var(--color-canvas); background: var(--color-success); }
.content-body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 var(--space-6) var(--space-10);
}

@media (max-width: 1200px) {
  .ds-grid--4,
  .ds-metric-grid,
  .reference-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-primary-nav { display: none; }
}

@media (max-width: 767px) {
  .sidebar { width: min(17.5rem, calc(100vw - 2rem)); }
  .main-wrapper { margin-left: 0; }
  #btn-mobile-menu { display: inline-flex; }
  .floating-navbar {
    top: 0;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-width: 0 0 1px;
    border-radius: 0;
  }
  .content-body { padding: var(--space-4) var(--space-4) var(--space-10); }
  .ds-button,
  .btn,
  .reference-button,
  .ds-tab,
  .hz-tab-btn,
  .profile-tab-btn { min-height: 2.75rem; }
  .ds-choice,
  .ds-pagination__item { min-height: 2.75rem; }
  .ds-pagination__item { min-width: 2.75rem; height: 2.75rem; }
  .ds-button--icon,
  .btn-icon,
  .reference-icon-button,
  .nav-action-btn,
  .nav-language,
  .nav-avatar-btn {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
  .breadcrumb-path,
  .nav-language { display: none; }
  .nav-user-summary { min-width: var(--control-lg); padding: 0; }
  .nav-user-avatar-wrap { width: var(--control-md); height: var(--control-md); }
  .ds-page-header,
  .reference-page-header,
  .reference-dashboard-heading { align-items: flex-start; flex-direction: column; }
  .ds-page-actions,
  .reference-page-actions { width: 100%; justify-content: stretch; }
  .ds-page-actions > *,
  .reference-page-actions > * { flex: 1; }
  .ds-grid--2,
  .ds-grid--3,
  .ds-grid--4,
  .ds-metric-grid,
  .reference-dashboard-stats { grid-template-columns: 1fr; }
  .ds-alert { align-items: flex-start; flex-direction: column; }
  .dashboard-announcement-action { width: 100%; }
  .ds-toolbar,
  .reference-card-toolbar { align-items: stretch; flex-direction: column; }
  .ds-search,
  .reference-search { width: 100%; }
  .app-notification-popover { top: 4.25rem; right: var(--space-3); width: calc(100vw - 1.5rem); }
}

/* Theme bridge for legacy components with hardcoded light surfaces */
[data-theme='dark'] .reference-card,
[data-theme='dark'] .reference-dashboard-card,
[data-theme='dark'] .reference-stat-card,
[data-theme='dark'] .dashboard-hero,
[data-theme='dark'] .community-stories,
[data-theme='dark'] .community-composer,
[data-theme='dark'] .community-post,
[data-theme='dark'] .dashboard-primary-grid .reference-dashboard-card,
[data-theme='dark'] .dashboard-secondary-grid .reference-dashboard-card,
[data-theme='dark'] .dashboard-operational-grid .reference-dashboard-card,
[data-theme='dark'] .ds-card,
[data-theme='dark'] .hz-card,
[data-theme='dark'] .reference-workflow,
[data-theme='dark'] .workflow-guide-item,
[data-theme='dark'] .reference-detail-list div,
[data-theme='dark'] .reference-search,
[data-theme='dark'] .reference-search input {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
[data-theme='dark'] .reference-page h1,
[data-theme='dark'] .reference-dashboard-heading h1,
[data-theme='dark'] .reference-dashboard-card h2,
[data-theme='dark'] .reference-stat-card > strong,
[data-theme='dark'] .workflow-guide-copy strong { color: var(--color-text); }
[data-theme='dark'] .reference-page-heading p,
[data-theme='dark'] .reference-dashboard-heading p,
[data-theme='dark'] .workflow-guide-copy small { color: var(--color-text-secondary); }
[data-theme='dark'] .reference-donut,
[data-theme='dark'] .company-attendance-donut,
[data-theme='dark'] .churn-rate-details div {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
}
[data-theme='dark'] .reference-donut strong,
[data-theme='dark'] .company-attendance-donut strong,
[data-theme='dark'] .churn-rate-value strong,
[data-theme='dark'] .churn-rate-details dd,
[data-theme='dark'] .reference-leave-row strong,
[data-theme='dark'] .reference-leave-debt strong,
[data-theme='dark'] .company-attendance-breakdown strong {
  color: var(--color-text);
}
[data-theme='dark'] .reference-attendance-legend,
[data-theme='dark'] .reference-donut span,
[data-theme='dark'] .company-attendance-donut span,
[data-theme='dark'] .company-attendance-breakdown li,
[data-theme='dark'] .churn-rate-value span,
[data-theme='dark'] .churn-rate-details dt,
[data-theme='dark'] .daily-late-heading p,
[data-theme='dark'] .late-y-axis,
[data-theme='dark'] .late-bar-group small {
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .ds-card--interactive:hover,
  .hz-card.hoverable:hover,
  .ds-button:hover,
  .btn:hover,
  .reference-button:hover { transform: none; }
}

@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-shimmer { from { transform: translateX(-110%); } to { transform: translateX(240%); } }

/* Shared chart and component motion. Rendering modules only provide data and
   semantic classes; this layer keeps transitions consistent across pages. */
@property --chart-progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.reference-donut,
.company-attendance-donut {
  --chart-progress: var(--chart-value, 0);
  position: relative;
  overflow: hidden;
  border: 0;
  background: conic-gradient(var(--chart-color, var(--color-action)) calc(var(--chart-progress) * 1%), var(--color-surface-active) 0);
  isolation: isolate;
}

.reference-donut::before,
.company-attendance-donut::before {
  position: absolute;
  inset: 1rem;
  z-index: 0;
  border-radius: inherit;
  background: var(--color-surface);
  content: '';
}

.reference-donut > div,
.company-attendance-donut > div { position: relative; z-index: 1; }
.reference-chart-area { fill: color-mix(in srgb, var(--color-action) 13%, transparent); }
.reference-chart-series { fill: none; stroke: var(--color-action); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.reference-chart-point { fill: var(--color-surface); stroke: var(--color-action); stroke-width: 2.5; }
.late-bar { width: 1.875rem; height: var(--bar-height); margin-bottom: 1.5rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-action); }
.late-bar-group { overflow: visible; }

@keyframes ds-component-enter {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ds-chart-draw {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes ds-chart-area-reveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
}
@keyframes ds-chart-point-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  65% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ds-chart-fade { to { opacity: 1; transform: scale(1); } }
@keyframes ds-donut-fill { from { --chart-progress: 0; } to { --chart-progress: var(--chart-value); } }

@media (prefers-reduced-motion: no-preference) {
  .ds-motion-ready .ds-page > *,
  .ds-motion-ready .reference-page > * {
    animation: ds-component-enter var(--duration-normal) var(--ease-standard) both;
  }

  .ds-motion-ready .ds-page > *:nth-child(2),
  .ds-motion-ready .reference-page > *:nth-child(2) { animation-delay: 40ms; }
  .ds-motion-ready .ds-page > *:nth-child(3),
  .ds-motion-ready .reference-page > *:nth-child(3) { animation-delay: 80ms; }
  .ds-motion-ready .ds-page > *:nth-child(4),
  .ds-motion-ready .reference-page > *:nth-child(4) { animation-delay: 120ms; }

  .ds-progress__bar { width: 0; }
  .ds-motion-ready .ds-progress__bar { width: var(--progress, 0%); }

  .ds-motion-ready .reference-donut,
  .ds-motion-ready .company-attendance-donut {
    animation: ds-donut-fill 720ms var(--ease-standard) both;
  }

  /* Leave trend chart initial un-animated state (data hidden until user reaches content) */
  .reference-leave-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .reference-chart-series {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .reference-chart-area {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  .reference-chart-point-wrap {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
  }

  /* Slower progressive animation: only triggers when user scrolls and reaches content */
  .dashboard-trend-card.is-in-view .reference-leave-chart .reference-chart-series,
  .reference-leave-chart.is-animating .reference-chart-series {
    animation: ds-chart-draw 2000ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
  .dashboard-trend-card.is-in-view .reference-leave-chart .reference-chart-area,
  .reference-leave-chart.is-animating .reference-chart-area {
    animation: ds-chart-area-reveal 2000ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
  .dashboard-trend-card.is-in-view .reference-leave-chart .reference-chart-point-wrap,
  .reference-leave-chart.is-animating .reference-chart-point-wrap {
    animation: ds-chart-point-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--point-delay, 200ms);
  }

  .late-bar { transform: scaleY(0); transform-origin: bottom; transition: transform 480ms var(--ease-standard); }
  .ds-motion-ready .late-bar { transform: scaleY(1); }
  .late-bar-group:nth-child(2) .late-bar { transition-delay: 45ms; }
  .late-bar-group:nth-child(3) .late-bar { transition-delay: 90ms; }
  .late-bar-group:nth-child(4) .late-bar { transition-delay: 135ms; }
  .late-bar-group:nth-child(5) .late-bar { transition-delay: 180ms; }
  .late-bar-group:nth-child(6) .late-bar { transition-delay: 225ms; }
  .late-bar-group:nth-child(7) .late-bar { transition-delay: 270ms; }
}

@media (prefers-reduced-motion: reduce) {
  .reference-chart-series {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .reference-chart-area {
    clip-path: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .reference-chart-point-wrap {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Compact rail: each navigation control uses the same centered 44px target.
   Hover only fills that target; it never changes the sidebar's width. */
@media (min-width: 768px) {
  body.sidebar-collapsed .sidebar-menu-scroll {
    padding-inline: var(--space-3);
  }

  body.sidebar-collapsed .nav-item,
  body.sidebar-collapsed .nav-parent {
    width: var(--control-lg);
    margin: 0 auto var(--space-2);
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-lg);
  }

  body.sidebar-collapsed .nav-item-content {
    width: 100%;
    justify-content: center;
  }

  body.sidebar-collapsed .nav-item:hover,
  body.sidebar-collapsed .nav-parent:hover {
    background: var(--color-surface-active);
    color: var(--color-text);
  }

  body.sidebar-collapsed .nav-item.active,
  body.sidebar-collapsed.route-dashboard .nav-item.active {
    width: var(--control-lg);
    margin-inline: auto;
    padding: 0;
  }
}

/* Analytics-first dashboard workspace */
.route-dashboard .content-body {
  background:
    radial-gradient(circle at 7% 4%, color-mix(in srgb, var(--color-action-soft) 72%, transparent), transparent 23rem),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--color-accent-soft) 58%, transparent), transparent 25rem);
}
.dashboard-hero {
  position: relative;
  display: flex;
  min-height: auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding: 1.25rem 1.625rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1.375rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 95%, var(--color-action-soft)), var(--color-surface));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.025);
}
.dashboard-hero::before,
.dashboard-hero::after {
  display: none;
}
.dashboard-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  max-width: 44rem;
}
.dashboard-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 0.125rem;
}
.dashboard-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.dashboard-hero__kicker i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 20%, transparent);
}
.dashboard-hero__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  color: var(--color-success);
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent);
  white-space: nowrap;
}
.dashboard-hero__live-badge i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}
.dashboard-hero__greeting {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.dashboard-hero h1 {
  margin: 0;
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.dashboard-hero__content > p,
.dashboard-hero__greeting > p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.dashboard-hero__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.dashboard-hero__chips > span {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.dashboard-hero__chips svg {
  color: var(--color-action);
}
.dashboard-hero__aside {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.dashboard-team-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.dashboard-team-avatars {
  display: flex;
  align-items: center;
}
.dashboard-team-avatars img {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -0.4rem;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dashboard-team-avatars img:first-child {
  margin-left: 0;
}
.dashboard-team-info,
.dashboard-team-preview > span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}
.dashboard-team-preview strong {
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 650;
}
.dashboard-team-preview small {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  margin-top: 1px;
}
.dashboard-hero .ds-button--primary {
  min-height: 2.375rem;
  padding: 0 1.125rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-md);
  white-space: nowrap;
  background: var(--gradient-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 20%, transparent);
  gap: 0.5rem;
}
.dashboard-hero .ds-button--primary:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 26%, transparent);
}

.dashboard-workspace {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-6);
}

.dashboard-workspace.dashboard-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 1.75rem;
  align-items: start;
}

.dashboard-analytics-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard-analytics-column > * { margin: 0 !important; }
.dashboard-metrics-section { display: flex; min-width: 0; flex-direction: column; gap: 0.875rem; }
.dashboard-section-heading,
.dashboard-card-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.dashboard-section-heading > div,
.dashboard-card-heading > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-section-heading {
  margin-bottom: 0.25rem;
}
.dashboard-section-heading .ds-eyebrow {
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-action);
}
.dashboard-section-heading h2 {
  margin: 0;
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.dashboard-section-heading p {
  margin: 0.375rem 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.dashboard-card-heading {
  margin-bottom: 1.125rem;
}
.dashboard-card-heading h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.dashboard-card-heading p {
  margin: 0.25rem 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.dashboard-badge-pill,
.dashboard-section-heading > span,
.dashboard-card-heading > span {
  display: inline-flex;
  min-height: 1.625rem;
  align-items: center;
  gap: 0.35rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dashboard-metrics-section .reference-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}
.dashboard-primary-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.dashboard-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
}
.dashboard-secondary-grid > :last-child {
  grid-column: 1 / -1;
  min-height: auto;
}
.dashboard-operational-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.dashboard-primary-grid > *,
.dashboard-secondary-grid > *,
.dashboard-operational-grid > * { min-width: 0; margin: 0 !important; }
.dashboard-primary-grid .reference-dashboard-card,
.dashboard-secondary-grid .reference-dashboard-card,
.dashboard-operational-grid .reference-dashboard-card {
  border: 1px solid transparent;
  border-radius: 1.375rem;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.025);
}
.dashboard-trend-card,
.company-attendance-card,
.personal-attendance-card,
.dashboard-compact-card { padding: 1.375rem 1.5rem; }
.dashboard-compact-card { padding: 1.25rem 1.375rem; }
.dashboard-trend-card { overflow: visible; }

/* Company & Personal Attendance Cards (Redesigned matching customer segments style) */
.attendance-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0.25rem;
}
.attendance-card-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.attendance-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.attendance-card-title-row h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-height-tight);
}
.attendance-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: help;
  opacity: 0.65;
  transition: opacity var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.attendance-info-btn:hover {
  opacity: 1;
  color: var(--color-action);
}
.attendance-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.2rem 0.625rem 0.2rem 0.375rem;
  border-radius: var(--radius-pill);
  font-size: 0.78125rem;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.attendance-trend-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

/* Positive Tag Tone (Green / Emerald) */
.attendance-trend-badge--positive {
  --attendance-trend-color: #10b981;
  background: color-mix(in srgb, #10b981 8.5%, var(--color-surface));
  border: 1px solid color-mix(in srgb, #10b981 26%, var(--color-border));
  color: #047857;
}

/* Negative Tag Tone (Red / Rose) */
.attendance-trend-badge--negative {
  --attendance-trend-color: #ef4444;
  background: color-mix(in srgb, #ef4444 8.5%, var(--color-surface));
  border: 1px solid color-mix(in srgb, #ef4444 26%, var(--color-border));
  color: #b91c1c;
}

/* Dark mode variations */
[data-theme='dark'] .attendance-trend-badge--positive {
  --attendance-trend-color: #34d399;
  background: color-mix(in srgb, #10b981 15%, var(--color-surface));
  border-color: color-mix(in srgb, #10b981 35%, var(--color-border));
  color: #34d399;
}
[data-theme='dark'] .attendance-trend-badge--negative {
  --attendance-trend-color: #f87171;
  background: color-mix(in srgb, #ef4444 15%, var(--color-surface));
  border-color: color-mix(in srgb, #ef4444 35%, var(--color-border));
  color: #f87171;
}

/* Mini sparkline within the tag */
.attendance-trend-sparkline {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}
.attendance-trend-badge--positive .attendance-trend-area {
  fill: url(#attendanceTrendGradPos);
}
.attendance-trend-badge--negative .attendance-trend-area {
  fill: url(#attendanceTrendGradNeg);
}
.attendance-trend-badge--positive .attendance-trend-line {
  fill: none;
  stroke: #10b981;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attendance-trend-badge--negative .attendance-trend-line {
  fill: none;
  stroke: #ef4444;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-theme='dark'] .attendance-trend-badge--positive .attendance-trend-line {
  stroke: #34d399;
}
[data-theme='dark'] .attendance-trend-badge--negative .attendance-trend-line {
  stroke: #f87171;
}

.attendance-trend-val {
  font-weight: 750;
  letter-spacing: -0.02em;
}
.attendance-trend-sub {
  font-weight: 500;
  opacity: 0.82;
}

/* Attendance Period Custom Dropdown */
.attendance-period-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.attendance-period-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.625rem 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  user-select: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.attendance-period-trigger:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.attendance-period-trigger:focus-visible {
  border-color: var(--color-action);
  box-shadow: var(--shadow-focus);
  color: var(--color-text);
}
.attendance-period-dropdown.is-open .attendance-period-trigger {
  border-color: var(--color-action);
  background: var(--color-surface);
  color: var(--color-action);
  box-shadow: var(--shadow-focus);
}
.attendance-period-current {
  display: inline-block;
  letter-spacing: -0.01em;
}
.attendance-period-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.attendance-period-dropdown.is-open .attendance-period-chevron {
  transform: rotate(180deg);
  color: var(--color-action);
}
.attendance-period-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 7.5rem;
  padding: 0.3125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-popover);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    opacity 140ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 140ms;
}
.attendance-period-dropdown.is-open .attendance-period-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.attendance-period-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  border: none;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.attendance-period-option:hover,
.attendance-period-option:focus-visible {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.attendance-period-option.is-selected {
  background: var(--color-action-soft);
  color: var(--color-action);
  font-weight: 650;
}
[data-theme='dark'] .attendance-period-trigger {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme='dark'] .attendance-period-trigger:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
[data-theme='dark'] .attendance-period-menu {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}
[data-theme='dark'] .attendance-period-option.is-selected {
  background: var(--color-action-soft);
  color: var(--color-action);
}

/* Attendance Donut Chart Tokens & Crisp HD Color Palette */
:root {
  --attendance-chart-present: #00b67a;
  --attendance-chart-late: #f59e0b;
  --attendance-chart-absent: #ef4444;
  --attendance-chart-leave: #3b82f6;
}

[data-theme='dark'] {
  --attendance-chart-present: #10b981;
  --attendance-chart-late: #fbbf24;
  --attendance-chart-absent: #f87171;
  --attendance-chart-leave: #60a5fa;
}

.company-attendance-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0.25rem 0.25rem;
  min-height: 160px;
}
.company-attendance-donut-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
}
.company-attendance-donut-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Personal Attendance Card (Stacked layout: Donut on top, breakdown categories below) */
.personal-attendance-card .company-attendance-visual,
.attendance-visual--personal {
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 0.25rem 0.25rem;
}

.personal-attendance-card .company-attendance-donut-wrap,
.attendance-visual--personal .company-attendance-donut-wrap {
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.personal-attendance-card .company-attendance-breakdown,
.attendance-visual--personal .company-attendance-breakdown {
  width: 100%;
  gap: 0.65rem;
}

.personal-attendance-card .company-attendance-item,
.attendance-visual--personal .company-attendance-item {
  width: 100%;
  padding: 0.35rem 0.5rem;
}
.attendance-segment {
  cursor: pointer;
  transform-origin: center;
  transition: stroke-width var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.attendance-segment:hover,
.attendance-segment.is-hovered {
  stroke-width: 17px;
  opacity: 1;
}
.company-attendance-donut-svg:hover .attendance-segment:not(:hover):not(.is-hovered) {
  opacity: 0.45;
}

/* Progressive Smooth Chart & List Animations */
@keyframes attendanceArcDraw {
  0% {
    stroke-dashoffset: 100;
    opacity: 0.15;
  }
  30% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes attendanceDonutEnter {
  0% {
    transform: rotate(-55deg) scale(0.94);
    opacity: 0.6;
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes attendanceItemCascade {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.company-attendance-visual.is-animating .company-attendance-donut-svg {
  animation: attendanceDonutEnter 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: center;
}

.company-attendance-visual.is-animating .attendance-segment {
  animation: attendanceArcDraw 750ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--seg-index, 0) * 90ms);
}

.company-attendance-visual.is-animating .company-attendance-item {
  animation: attendanceItemCascade 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--item-index, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .company-attendance-visual.is-animating .company-attendance-donut-svg,
  .company-attendance-visual.is-animating .attendance-segment,
  .company-attendance-visual.is-animating .company-attendance-item {
    animation: none !important;
  }
}

/* Category Stroke Colors */
.attendance-segment--present { stroke: var(--attendance-chart-present); }
.attendance-segment--late { stroke: var(--attendance-chart-late); }
.attendance-segment--absent { stroke: var(--attendance-chart-absent); }
.attendance-segment--leave { stroke: var(--attendance-chart-leave); }

/* Category Dot Colors */
.company-attendance-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.company-attendance-dot--present { background-color: var(--attendance-chart-present); }
.company-attendance-dot--late { background-color: var(--attendance-chart-late); }
.company-attendance-dot--absent { background-color: var(--attendance-chart-absent); }
.company-attendance-dot--leave { background-color: var(--attendance-chart-leave); }

.company-attendance-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.company-attendance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: default;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.company-attendance-item:hover,
.company-attendance-item.is-hovered {
  background-color: var(--color-surface-active);
}
.company-attendance-item-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.company-attendance-label {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 550;
  line-height: 1.2;
}
.company-attendance-item-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.company-attendance-value {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.company-attendance-sep {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--font-size-sm);
}
.company-attendance-percent {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  min-width: 2.2rem;
  text-align: right;
}
.dashboard-primary-grid .reference-company-leave-chart { width: 100%; min-width: 0; margin-top: 1.25rem; overflow: hidden; }
.dashboard-primary-grid .reference-leave-chart { min-width: 0; }
/* ==========================================================================
   Dashboard Widget Cards (Modern iOS / Bento Health Style)
   ========================================================================== */
.dashboard-metrics-section .reference-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}

.dashboard-metrics-section .ds-metric-card,
.dashboard-widget-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1.375rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid transparent;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.025);
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.dashboard-widget-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08);
}

/* Header: Icon + Title inline */
.dashboard-widget-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.dashboard-widget-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.dashboard-widget-card__icon--blue { color: #3b82f6; }
.dashboard-widget-card__icon--cyan { color: #0284c7; }
.dashboard-widget-card__icon--amber { color: #f59e0b; }
.dashboard-widget-card__icon--emerald { color: #10b981; }

.dashboard-widget-card__title {
  margin: 0;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Body: Clean vertical flow without chart */
.dashboard-widget-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-widget-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-widget-card__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.dashboard-widget-card__value {
  color: var(--color-text);
  font-size: 2.125rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dashboard-widget-card__unit {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.3;
  margin-top: 0.25rem;
}
.dashboard-widget-card__meta {
  margin: 0.375rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.71875rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-widget-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  margin-left: 0.25rem;
}
.dashboard-widget-card__badge--success {
  background: color-mix(in srgb, var(--attendance-chart-present) 14%, var(--color-surface));
  color: var(--attendance-chart-present);
}
.dashboard-widget-card__badge--warning {
  background: color-mix(in srgb, #f59e0b 14%, var(--color-surface));
  color: #d97706;
}
.dashboard-widget-card__badge--neutral {
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
}

/* Visual Graphics */
.dashboard-widget-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dashboard-widget-svg {
  display: block;
  overflow: visible;
}
.dashboard-widget-ring-svg {
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Ring SVGs */
.dashboard-widget-svg--ring-blue .dashboard-widget-ring-track {
  stroke: color-mix(in srgb, #3b82f6 18%, transparent);
}
.dashboard-widget-svg--ring-blue .dashboard-widget-ring-progress {
  stroke: #3b82f6;
  transition: stroke-dashoffset 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dashboard-widget-svg--ring-cyan .dashboard-widget-ring-track {
  stroke: color-mix(in srgb, #0284c7 18%, transparent);
}
.dashboard-widget-svg--ring-cyan .dashboard-widget-ring-progress {
  stroke: #0284c7;
  transition: stroke-dashoffset 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bars SVG */
.dashboard-widget-svg--bars-amber .dashboard-widget-bar {
  fill: color-mix(in srgb, #f59e0b 24%, transparent);
  transition: fill 200ms ease;
}
.dashboard-widget-svg--bars-amber .dashboard-widget-bar--highlight {
  fill: #f59e0b;
}

/* Wave SVG */
.dashboard-widget-svg--wave-emerald .dashboard-widget-wave-line {
  stroke: #10b981;
}

/* Dark mode refinements */
[data-theme='dark'] .dashboard-widget-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme='dark'] .dashboard-widget-card__badge--warning {
  color: #fbbf24;
}
.dashboard-chart-tabs { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.1875rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-subtle); }
.dashboard-chart-tabs button { min-width: 2.25rem; min-height: 1.875rem; padding-inline: var(--space-2); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.6875rem; font-weight: 700; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.dashboard-chart-tabs button:hover { color: var(--color-text); }
.dashboard-chart-tabs button[aria-pressed='true'] { background: var(--color-surface); color: var(--color-action); box-shadow: var(--shadow-card); }
.dashboard-chart-tabs button:active { transform: scale(0.96); }
.dashboard-chart-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.dashboard-chart-insight { color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: 1.5; }
.dashboard-chart-insight::before { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: var(--space-2); border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-accent) 10%, transparent); content: ''; }
.dashboard-data-disclosure { position: relative; flex: 0 0 auto; }
.dashboard-data-disclosure summary { display: inline-flex; min-height: var(--control-sm); align-items: center; padding: 0 var(--space-3); border: 1px solid color-mix(in srgb, var(--color-action) 16%, var(--color-border)); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-action-soft) 58%, var(--color-surface)); color: var(--color-action); font-size: var(--font-size-xs); font-weight: 700; cursor: pointer; list-style: none; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.dashboard-data-disclosure summary::-webkit-details-marker { display: none; }
.dashboard-data-disclosure summary::after { display: inline-block; margin-left: var(--space-2); font-size: 0.9em; content: '↓'; transition: transform var(--duration-fast) var(--ease-standard); }
.dashboard-data-disclosure summary:hover { border-color: color-mix(in srgb, var(--color-action) 34%, var(--color-border)); background: var(--color-action-soft); }
.dashboard-data-disclosure summary:active { transform: scale(0.97); }
.dashboard-data-disclosure summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.dashboard-data-disclosure[open] summary::after { transform: rotate(180deg); }
.dashboard-data-disclosure[open] .dashboard-mini-table-wrap { animation: ds-component-enter var(--duration-fast) var(--ease-standard) both; }
.dashboard-mini-table-wrap { position: absolute; right: 0; bottom: calc(100% + var(--space-2)); z-index: 4; width: min(40rem, calc(100vw - 4rem)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-action) 13%, var(--color-border)); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-popover); }
.dashboard-mini-table-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-3); background: linear-gradient(135deg, color-mix(in srgb, var(--color-action-soft) 72%, var(--color-surface)) 0%, var(--color-surface) 72%); }
.dashboard-mini-table-head > div:first-child { display: grid; min-width: 0; gap: 0.125rem; }
.dashboard-mini-table-head > div:first-child > span { color: var(--color-action); font-size: 0.625rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.dashboard-mini-table-head > div:first-child > strong { color: var(--color-text); font-size: var(--font-size-sm); line-height: var(--line-height-tight); }
.dashboard-mini-table-head > div:first-child > small { overflow: hidden; color: var(--color-text-secondary); font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-mini-table-total { display: grid; min-width: 3.75rem; place-items: center; padding: var(--space-2); border: 1px solid color-mix(in srgb, var(--color-action) 14%, var(--color-border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 84%, transparent); text-align: center; }
.dashboard-mini-table-total strong { color: var(--color-action); font-size: var(--font-size-lg); line-height: 1; }
.dashboard-mini-table-total span { margin-top: 0.1875rem; color: var(--color-text-muted); font-size: 0.625rem; font-weight: 650; text-transform: uppercase; }
.dashboard-mini-table-scroll { margin: 0 var(--space-2) var(--space-2); padding: 0 var(--space-2) var(--space-2); overflow-x: auto; scrollbar-color: color-mix(in srgb, var(--color-action) 30%, transparent) transparent; scrollbar-width: thin; }
.dashboard-mini-table-scroll:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-border-focus); }
.dashboard-mini-table { width: 100%; min-width: 31rem; border-collapse: separate; border-spacing: 0 var(--space-1); color: var(--color-text-secondary); font-size: 0.6875rem; white-space: nowrap; }
.dashboard-mini-table th,
.dashboard-mini-table td { padding: var(--space-2) var(--space-3); border: 0; text-align: center; }
.dashboard-mini-table thead th { color: var(--color-text-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; }
.dashboard-mini-table thead th:first-child { width: 8.5rem; padding-left: var(--space-3); color: var(--color-text-secondary); text-align: left; }
.dashboard-mini-table thead th small { display: block; margin-top: 0.125rem; color: var(--color-text-muted); font-size: 0.625rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.dashboard-mini-table-month { display: inline-flex; min-width: 2.2rem; justify-content: center; }
.dashboard-mini-table tbody th,
.dashboard-mini-table tbody td { background: color-mix(in srgb, var(--color-surface-subtle) 72%, var(--color-action-soft)); }
.dashboard-mini-table tbody th { border-radius: var(--radius-md) 0 0 var(--radius-md); color: var(--color-text); text-align: left; }
.dashboard-mini-table tbody th > span { display: block; font-size: 0.6875rem; font-weight: 700; }
.dashboard-mini-table tbody th small { display: block; margin-top: 0.125rem; color: var(--color-text-muted); font-size: 0.625rem; font-weight: 500; }
.dashboard-mini-table tbody td { min-width: 4rem; border-left: 1px solid color-mix(in srgb, var(--color-action) 9%, var(--color-border)); }
.dashboard-mini-table tbody td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.dashboard-mini-table tbody td strong { display: block; color: var(--color-text); font-size: var(--font-size-md); font-variant-numeric: tabular-nums; line-height: 1.1; }
.dashboard-mini-table tbody td small { display: block; margin-top: 0.1875rem; color: var(--color-text-muted); font-size: 0.625rem; }
.reference-company-leave-chart { transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.reference-company-leave-chart.is-updating { opacity: 0.45; transform: translateY(0.25rem); }
.reference-chart-area { fill: url(#dashboard-leave-area); }
.reference-chart-series { stroke: var(--color-accent); stroke-width: 3.5; }
.reference-chart-crosshair {
  stroke: var(--color-accent);
  stroke-dasharray: 4 4;
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.reference-chart-point-halo {
  fill: var(--color-accent);
  opacity: 0.08;
  transition: opacity var(--duration-fast) var(--ease-standard), r var(--duration-fast) var(--ease-standard);
}
.reference-chart-point {
  fill: var(--color-surface);
  stroke: var(--color-accent);
  stroke-width: 2.5;
  transition: all var(--duration-fast) var(--ease-standard);
}

.reference-chart-tooltip {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.reference-chart-tooltip-bg {
  fill: var(--color-surface);
  stroke: var(--color-border);
  stroke-width: 1.2;
  filter: drop-shadow(0 14px 28px rgba(67, 24, 255, 0.16)) drop-shadow(0 4px 10px rgba(15, 23, 42, 0.08));
}
.reference-chart-tooltip-arrow {
  fill: var(--color-surface);
}
.reference-chart-tooltip-dot {
  fill: var(--color-accent);
}
.reference-chart-tooltip-period {
  fill: var(--color-text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.reference-chart-tooltip-divider {
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.8;
}
.reference-chart-tooltip-val {
  fill: var(--color-accent);
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.reference-chart-tooltip-unit {
  fill: var(--color-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
}

[data-theme='dark'] .reference-chart-tooltip-bg {
  fill: var(--color-surface-raised);
  stroke: var(--color-border-strong);
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.6)) drop-shadow(0 4px 12px rgba(117, 81, 255, 0.28));
}
[data-theme='dark'] .reference-chart-tooltip-arrow {
  fill: var(--color-surface-raised);
}

.reference-chart-point-wrap { cursor: pointer; outline: none; }
.reference-chart-point-wrap:hover .reference-chart-tooltip,
.reference-chart-point-wrap:focus .reference-chart-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.reference-chart-point-wrap:hover .reference-chart-crosshair,
.reference-chart-point-wrap:focus .reference-chart-crosshair {
  opacity: 0.45;
}
.reference-chart-point-wrap:hover .reference-chart-point-halo,
.reference-chart-point-wrap:focus .reference-chart-point-halo {
  opacity: 0.25;
  r: 16;
}
.reference-chart-point-wrap:hover .reference-chart-point,
.reference-chart-point-wrap:focus .reference-chart-point {
  r: 6;
  stroke-width: 3.5;
}
.late-bar-value { position: absolute; top: calc(100% - var(--bar-height) - 1.75rem); z-index: 2; display: grid; min-width: 1.5rem; min-height: 1.5rem; place-items: center; border-radius: var(--radius-sm); background: var(--color-surface-inverse); color: var(--color-text-inverse); font-size: 0.6875rem; font-weight: 700; opacity: 0; transform: translateY(0.25rem); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.late-bar-group { outline: none; }
.late-bar-group:hover .late-bar-value,
.late-bar-group:focus .late-bar-value { opacity: 1; transform: translateY(0); }
.late-bar-group:focus .late-bar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 22%, transparent); }
.dashboard-community-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  padding-top: 0;
  border-top: none;
}
.dashboard-community-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  min-width: 0;
}
.dashboard-community-content .community-feed {
  width: 100%;
}
.dashboard-community-content .community-post-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.community-composer {
  padding: 1.25rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 1.375rem;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.025);
}
.community-heading,
.community-feed-heading,
.community-post-header,
.community-post-footer,
.community-post-actions,
.community-composer-actions,
.community-composer-main { display: flex; align-items: center; }

.community-heading { justify-content: space-between; gap: var(--space-3); margin-bottom: 0.875rem; }
.community-current-user { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }
.community-current-user > div { display: grid; min-width: 0; gap: 0.25rem; }
.community-current-user > div > span { overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.community-heading h2,
.community-feed-heading h2 { color: var(--color-text); font-size: var(--font-size-md); font-weight: 700; line-height: var(--line-height-tight); margin: 0; }
.community-audience,
.community-feed-heading > span { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-action-soft); color: var(--color-action); font-size: var(--font-size-xs); font-weight: 600; white-space: nowrap; }
.community-composer-main { align-items: flex-start; gap: var(--space-3); margin-top: 0.875rem; }
.community-avatar { width: var(--control-md); height: var(--control-md); border: 1px solid var(--color-border); border-radius: 50%; object-fit: cover; flex: 0 0 auto; aspect-ratio: 1 / 1; }
.community-composer-input { width: 100%; min-height: 4.75rem; resize: vertical; padding: 0.875rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); color: var(--color-text); font: inherit; font-size: var(--font-size-sm); line-height: 1.55; }
.community-composer-input::placeholder { color: var(--color-text-muted); }
.community-composer-input:focus { border-color: var(--color-border-focus); outline: none; box-shadow: var(--shadow-focus); background: var(--color-surface); }
.community-composer-actions { justify-content: space-between; gap: var(--space-3); margin-top: 0.875rem; }
.community-composer-tools { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.community-tool,
.community-post-action,
.community-menu-button { display: inline-flex; min-height: var(--control-sm); align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.community-tool:hover,
.community-post-action:hover,
.community-menu-button:hover { background: var(--color-surface-hover); color: var(--color-text); }
.community-tool:focus-visible,
.community-post-action:focus-visible,
.community-menu-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.community-feed { display: flex; flex-direction: column; gap: 1rem; }
.community-feed-heading { justify-content: space-between; gap: var(--space-3); margin-bottom: 0.25rem; }
.community-feed-heading p { margin: 0.25rem 0 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: 1.4; }
.community-post-list { display: flex; flex-direction: column; gap: 1rem; }
.community-post { padding: 1.375rem 1.5rem; border: 1px solid transparent; border-radius: 1.375rem; background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.025); }
.community-post-header { align-items: flex-start; gap: 0.75rem; margin-bottom: 0.875rem; }
.community-post-author { display: grid; min-width: 0; gap: 0.25rem; }
.community-post-author strong { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 650; }
.community-post-author span { overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.community-menu-button { min-width: var(--control-sm); margin-left: auto; padding: 0; letter-spacing: 0.1em; }
.community-post-content { margin: 0.875rem 0 1.125rem; color: var(--color-text); font-size: var(--font-size-sm); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.community-post-footer { justify-content: space-between; gap: var(--space-3); padding-bottom: 0.875rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.community-post-actions { gap: 0.5rem; margin-top: 0.25rem; }
.community-post-action { flex: 1; min-height: 2.25rem; padding: 0 0.875rem; gap: 0.5rem; font-size: var(--font-size-xs); font-weight: 600; border-radius: var(--radius-md); }
.community-post-action.is-liked { background: var(--color-action-soft); color: var(--color-action); }

.community-stories {
  padding: 1.25rem 1.375rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1.375rem;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.025);
}
.community-stories-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 1rem; }
.community-stories-heading h2 { margin: 0; color: var(--color-text); font-size: var(--font-size-md); font-weight: 700; }
.community-stories-heading p { margin: 0.25rem 0 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: 1.4; }
.community-stories-heading > span,
.community-stories-tag {
  color: var(--color-action);
  font-size: var(--font-size-xs);
  font-weight: 650;
  padding: 0.2rem 0.6rem;
  background: var(--color-action-soft);
  border-radius: var(--radius-pill);
}
.community-story-list {
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.community-story-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
.community-story-list.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.community-story-list.is-dragging .community-story {
  cursor: grabbing;
  pointer-events: none;
}
.community-story {
  position: relative;
  display: flex;
  flex: 0 0 6.5rem;
  width: 6.5rem;
  height: 9.25rem;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.3) 45%, transparent 75%),
    var(--story-cover) center / cover no-repeat;
  color: #ffffff;
  cursor: pointer;
  scroll-snap-align: start;
  text-align: left;
  transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
  box-sizing: border-box;
}
.community-story:hover {
  border-color: var(--color-action);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.community-story:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.community-story strong {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  font-size: var(--font-size-xs);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.community-story-avatar {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  aspect-ratio: 1 / 1;
  padding: 2px;
  border-radius: 50%;
  background: var(--color-action);
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: visible;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.community-story-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  object-fit: cover;
  box-sizing: border-box;
  flex-shrink: 0;
}
.community-story-avatar i {
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-on-action);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.community-post-media { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); overflow: hidden; border-radius: var(--radius-lg); }
.community-post-image { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-surface-active); border-radius: var(--radius-md); }
.community-post-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.community-post-image:hover img { transform: scale(1.02); }
.community-post-media--single { grid-template-columns: 1fr; aspect-ratio: 16 / 9; }
.community-post-media--double { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 14.5rem; }
.community-post-media--double .community-post-image { height: 100%; }
.community-post-media--mosaic { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); grid-template-rows: repeat(2, 8.75rem); }
.community-post-media--mosaic .community-post-image:first-child { grid-row: 1 / span 2; height: 100%; }
.community-post-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.42) 0%, rgba(15, 23, 42, 0.85) 100%);
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
  user-select: none;
}
.community-post-more:hover {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.92) 100%);
}

/* Community Poll Post */
.community-post-poll {
  margin: 0.875rem 0 1.125rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface-subtle) 60%, var(--color-surface));
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.community-poll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.community-poll-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 650;
  color: var(--color-text);
  line-height: 1.4;
}
.community-poll-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--color-action-soft);
  color: var(--color-action);
  flex-shrink: 0;
}
.community-poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.community-poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
  text-align: left;
  font: inherit;
  width: 100%;
}
.community-poll-option:hover {
  border-color: var(--color-action);
}
.community-poll-option.is-selected {
  border-color: var(--color-action);
  box-shadow: 0 0 0 1px var(--color-action);
}
.community-poll-progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--color-action-soft) 85%, transparent);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.community-poll-option.is-selected .community-poll-progress {
  background: color-mix(in srgb, var(--color-action-soft) 95%, var(--color-action));
  opacity: 0.22;
}
.community-poll-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.community-poll-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.community-poll-option.is-selected .community-poll-radio {
  border-color: var(--color-action);
  background: var(--color-action);
}
.community-poll-radio-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #ffffff;
  display: none;
}
.community-poll-option.is-selected .community-poll-radio-dot {
  display: block;
}
.community-poll-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-poll-stats {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}
.community-poll-percent {
  color: var(--color-text);
  font-weight: 700;
}
.community-poll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  padding-top: 0.25rem;
}

.reference-dashboard > .ds-page-header { align-items: flex-end; margin-bottom: var(--space-6); }
.reference-dashboard > .ds-alert { border-color: transparent; background: color-mix(in srgb, var(--color-action-soft) 72%, var(--color-surface)); box-shadow: none; margin-bottom: 1.25rem; }
.reference-dashboard-stats { margin: 0; }
.dashboard-compact-card { display: flex; min-height: auto; flex-direction: column; }
.dashboard-compact-card .dashboard-card-heading { margin-bottom: 1rem; }

@media (max-width: 1120px) {
  .dashboard-workspace.dashboard-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .dashboard-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-secondary-grid > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .dashboard-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
  }
  .dashboard-hero__aside {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .dashboard-hero {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .dashboard-hero h1 {
    font-size: 1.25rem;
  }
  .dashboard-hero__aside {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .dashboard-hero__aside .ds-button {
    flex-shrink: 0;
  }
  .dashboard-workspace {
    gap: var(--space-4);
  }
  .dashboard-metrics-section .reference-dashboard-stats,
  .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-secondary-grid > :last-child {
    grid-column: auto;
  }
  .dashboard-primary-grid .reference-company-leave-chart {
    min-width: 0;
    overflow: visible;
  }
  .reference-chart-month-group:nth-of-type(even) {
    display: none;
  }
  .dashboard-section-heading {
    align-items: flex-start;
  }
  .dashboard-section-heading > span,
  .dashboard-badge-pill {
    display: none;
  }
  .dashboard-trend-card,
  .company-attendance-card,
  .personal-attendance-card,
  .dashboard-compact-card {
    padding: var(--space-4);
  }
  .dashboard-trend-card .dashboard-card-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-chart-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-mini-table-wrap {
    right: auto;
    left: 0;
    width: calc(100vw - 3rem);
  }
  .community-composer-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .community-composer-actions .ds-button {
    width: 100%;
  }
  .community-post {
    padding: var(--space-4);
  }
  .community-post-media--double {
    height: 11rem;
  }
  .community-post-media--mosaic {
    grid-template-rows: repeat(2, 6.5rem);
  }
}

@media (max-width: 560px) {
  .dashboard-hero__aside {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .dashboard-hero__aside .dashboard-team-preview {
    width: 100%;
    justify-content: flex-start;
  }
  .dashboard-hero__aside .ds-button {
    width: 100%;
    justify-content: center;
  }
  .dashboard-hero__chips {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-hero__chips > span {
    width: 100%;
  }
}