/*
 * Admin employee
 *
 * Feature-level classes for the admin employee tabs.
 */

.admin-employee-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.admin-employee-toolbar--split {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
}

.admin-employee-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.admin-employee-toolbar__item {
  margin-inline-end: 1rem;
}

@media (min-width: 640px) {
  .admin-employee-toolbar--split {
    flex-direction: row;
    align-items: center;
  }
}

.admin-employee-section {
  margin-block-start: 1.5rem;
}

.admin-employee-stack {
  display: flex;
  flex-direction: column;
}

.admin-employee-split {
  display: flex;
  flex-direction: column;
}

.admin-employee-split__main {
  margin-block-start: 1.5rem;
}

.admin-employee-split__sidebar {
  min-inline-size: 0;
}

.admin-employee-split__sidebar--gutter {
  margin-inline-end: 1rem;
}

.admin-employee-split__sidebar--padded {
  padding-inline-end: 1.5rem;
}

@media (min-width: 640px) {
  .admin-employee-split {
    flex-direction: row-reverse;
  }

  .admin-employee-split__main {
    inline-size: 66.666667%;
    margin-block-start: 0;
  }

  .admin-employee-split__sidebar {
    inline-size: 33.333333%;
  }
}

.admin-employee-heading--offset-small {
  margin-block-start: 0.5rem;
}

.admin-employee-heading--offset {
  margin-block-start: 1.5rem;
}

.admin-employee-text--spacious {
  margin-block-start: 1rem;
}

.admin-employee-inline-link {
  color: var(--color-brand-strong);
  font-weight: 500;
  transition:
    color 150ms ease-in-out,
    text-decoration-color 150ms ease-in-out;
}

.admin-employee-inline-link:hover {
  color: var(--color-brand);
}

.admin-employee-inline-link:focus-visible {
  outline: none;
  text-decoration-line: underline;
  text-underline-offset: 0.125rem;
}

.admin-employee-new {
  margin-block-start: 1.5rem;
}

.admin-employee-index {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-employee-index__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.admin-employee-index__heading {
  min-inline-size: 0;
}

.admin-employee-index__eyebrow,
.admin-employee-index__description {
  margin: 0;
}

.admin-employee-index__eyebrow {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.admin-employee-index__title {
  margin: 0.2rem 0 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.15;
}

.admin-employee-index__description {
  max-inline-size: 68ch;
  margin-block-start: 0.5rem;
  color: var(--color-ink-light);
}

.admin-employee-index__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
}

.admin-employee-index__status-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-success-strong);
}

.admin-employee-index__status-dot--archived {
  background-color: var(--color-ink-lighter);
}

.admin-employee-index__status-dot--onboarding {
  background-color: var(--color-warning);
}

@media (min-width: 768px) {
  .admin-employee-index__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem;
  }
}

.admin-employee-new__layout {
  display: flex;
  flex-direction: column;
}

.admin-employee-new__form {
  margin-block-start: 1.5rem;
}

@media (min-width: 640px) {
  .admin-employee-new__layout {
    flex-direction: row-reverse;
  }

  .admin-employee-new__form {
    inline-size: 66.666667%;
  }

  .admin-employee-new__intro {
    inline-size: 33.333333%;
  }
}

@media (min-width: 768px) {
  .admin-employee-new__form {
    margin-block-start: 0;
  }
}

.admin-employee-search-panel__header {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.admin-employee-search-panel__fields {
  margin: 0;
  border: 0;
  padding: 0;
}

.admin-employee-search-panel__intro {
  min-inline-size: 0;
}

.admin-employee-search-panel__title,
.admin-employee-search-panel__description {
  margin: 0;
}

.admin-employee-search-panel__title {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.admin-employee-search-panel__description {
  max-inline-size: 64ch;
  margin-block-start: 0.35rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.admin-employee-search-panel__controller,
.admin-employee-search-panel__form,
.admin-employee-search-panel__query {
  inline-size: 100%;
}

.admin-employee-search-panel__query-wrap:focus-within {
  color: var(--color-brand-strong);
  box-shadow: var(--shadow-focus-soft);
}

.admin-employee-search-panel__query-prefix button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  pointer-events: auto;
  cursor: pointer;
}

.admin-employee-search-panel__query-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.admin-employee-search-panel__input {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 0.7rem 0.75rem 0.7rem 2.75rem;
  color: var(--color-ink);
  font-size: max(16px, 1em);
  box-shadow: var(--shadow-inset-sm);
}

.admin-employee-search-panel__input::placeholder {
  color: var(--color-ink-lighter);
}

.admin-employee-search-panel__input:focus {
  border-color: var(--color-brand);
  outline: none;
}

.admin-employee-search-panel__input:focus::placeholder {
  color: var(--color-ink-medium);
}

.admin-employee-search-panel__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-employee-search-panel__filter {
  display: flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
}

.admin-employee-search-panel__filter-label {
  display: block;
  margin-inline-start: 0.5rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 768px) {
  .admin-employee-search-panel__header {
    grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.8fr);
    align-items: end;
    padding: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .admin-employee-search-panel__filter-label {
    font-size: var(--text-small);
  }
}

.admin-employee-results-panel {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.admin-employee-results-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.admin-employee-results-panel__title,
.admin-employee-results-panel__summary {
  margin: 0;
}

.admin-employee-results-panel__title {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.admin-employee-results-panel__summary {
  margin-block-start: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.admin-employee-results-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-employee-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  color: var(--color-ink-light);
  text-align: center;
}

.admin-employee-search-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-lighter);
}

.admin-employee-search-empty__icon .icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.admin-employee-search-empty__title {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
}

.admin-employee-search-empty__text {
  max-inline-size: 34rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.admin-employee-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-employee-detail__hero,
.admin-employee-detail__summary,
.admin-employee-detail__section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.admin-employee-detail__hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.admin-employee-detail__identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-inline-size: 0;
}

.admin-employee-detail__avatar {
  flex: 0 0 auto;
}

.admin-employee-detail__heading {
  min-inline-size: 0;
}

.admin-employee-detail__eyebrow,
.admin-employee-detail__title,
.admin-employee-detail__subtitle {
  margin: 0;
}

.admin-employee-detail__eyebrow {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.admin-employee-detail__title {
  margin-block-start: 0.2rem;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.admin-employee-detail__subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.admin-employee-detail__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-employee-detail__status,
.admin-employee-detail__role {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
}

.admin-employee-detail__status {
  gap: 0.45rem;
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
}

.admin-employee-detail__role {
  background-color: rgb(var(--palette-blue-100));
  color: rgb(var(--palette-blue-800));
}

.admin-employee-detail__status-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-success-strong);
}

.admin-employee-detail__status--archived .admin-employee-detail__status-dot {
  background-color: var(--color-ink-lighter);
}

.admin-employee-detail__status--onboarding .admin-employee-detail__status-dot {
  background-color: var(--color-warning);
}

.admin-employee-detail__summary {
  overflow: hidden;
}

.admin-employee-detail__metadata {
  display: grid;
  margin: 0;
}

.admin-employee-detail__metadata-item {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border-block-start: 1px solid var(--color-border);
  min-inline-size: 0;
}

.admin-employee-detail__metadata-item:first-child {
  border-block-start: 0;
}

.admin-employee-detail__metadata dt,
.admin-employee-detail__metadata dd {
  margin: 0;
}

.admin-employee-detail__metadata dt {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.admin-employee-detail__metadata dd {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-employee-detail__metadata a {
  color: var(--color-brand-strong);
  text-decoration-color: color-mix(in oklch, var(--color-brand) 45%, transparent);
  text-underline-offset: 0.15rem;
}

.admin-employee-detail__metadata a:hover {
  color: var(--color-brand);
}

.admin-employee-detail__manager {
  color: var(--color-ink);
}

.admin-employee-detail__sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-employee-detail__section {
  overflow: hidden;
}

.admin-employee-detail__section-header {
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.admin-employee-detail__section-kicker,
.admin-employee-detail__section-title {
  margin: 0;
}

.admin-employee-detail__section-kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.admin-employee-detail__section-title {
  margin-block-start: 0.2rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.admin-employee-detail__section .stats-card {
  gap: 0;
}

.admin-employee-detail__section .stats-card__tile {
  padding: 1rem 1.25rem;
  border-block-start: 1px solid var(--color-border);
  border-inline-end: 0;
}

.admin-employee-detail__section .stats-card__tile:first-child {
  border-block-start: 0;
}

.admin-employee-detail__section .stats-card__title,
.admin-employee-detail__section .stats-card__hint {
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.admin-employee-detail__section .stats-card__hint {
  color: var(--color-ink-lighter);
}

.admin-employee-detail__section .stats-card__value {
  font-size: var(--text-large);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .admin-employee-detail__hero {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem;
  }

  .admin-employee-detail__state {
    justify-content: flex-end;
  }

  .admin-employee-detail__metadata {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .admin-employee-detail__metadata-item {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }

  .admin-employee-detail__metadata-item:first-child {
    border-inline-start: 0;
  }
}

@media (min-width: 1024px) {
  .admin-employee-detail {
    gap: 1.25rem;
  }

  .admin-employee-detail__sections {
    gap: 1.25rem;
  }

  .admin-employee-detail__section .stats-card__tile {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }

  .admin-employee-detail__section .stats-card__tile:first-child {
    border-inline-start: 0;
  }
}

.admin-employee-form-return {
  margin-block-start: 1.5rem;
}

.admin-employee-import-layout {
  display: grid;
  gap: 1.5rem;
}

.admin-employee-import-layout__form {
  margin-block-start: 1.5rem;
}

@media (min-width: 768px) {
  .admin-employee-import-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .admin-employee-import-layout__form {
    margin-block-start: 0;
  }
}

.admin-employee-empty-action {
  margin-block-start: 1rem;
}

.admin-employee-empty-action__row {
  display: flex;
  margin: -0.375rem -0.5rem;
}

.admin-employee-empty-action__link {
  transition:
    color 150ms ease-in-out,
    background-color 150ms ease-in-out;
}

.admin-employee-empty-action__link:hover,
.admin-employee-empty-action__link:focus {
  background-color: rgb(var(--palette-blue-100));
  outline: none;
}

.admin-employee-list-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-inline-size: 0;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
  transition:
    background-color 150ms ease-in-out,
    box-shadow 150ms ease-in-out;
}

.admin-employee-list-item:hover {
  background-color: var(--color-surface-muted);
}

.admin-employee-list-item__body {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  min-inline-size: 0;
}

.admin-employee-list-item__identity {
  display: flex;
  align-items: flex-start;
  inline-size: 100%;
  min-inline-size: 0;
  gap: 0.875rem;
}

.admin-employee-list-item__avatar {
  flex-shrink: 0;
  padding-block-start: 0.125rem;
}

.admin-employee-list-item__main {
  flex: 1 1 0;
  min-inline-size: 0;
}

.admin-employee-list-item__name-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem 0.5rem;
  color: var(--color-brand-strong);
  font-size: var(--text-normal);
  font-weight: 700;
  line-height: 1.25rem;
}

.admin-employee-list-item__name-link {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  color: var(--color-brand-strong);
  font-weight: 700;
}

.admin-employee-list-item__name-link:hover {
  color: var(--color-brand);
}

.admin-employee-list-item__pending {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgb(var(--palette-amber-200));
  border-radius: var(--radius-pill);
  background-color: rgb(var(--palette-amber-50));
  color: rgb(var(--palette-amber-800));
  font-size: var(--text-x-small);
  font-weight: 700;
}

.admin-employee-list-item__org,
.admin-employee-list-item__meta {
  margin-block-start: 0.65rem;
}

.admin-employee-list-item__org {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-block-end: 0;
  padding: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.admin-employee-list-item__org-item {
  display: inline-flex;
  align-items: baseline;
  min-inline-size: 0;
  gap: 0.35rem;
}

.admin-employee-list-item__org dt,
.admin-employee-list-item__org dd {
  margin: 0;
}

.admin-employee-list-item__org dt {
  color: var(--color-ink-lighter);
  font-weight: 700;
}

.admin-employee-list-item__org dd {
  min-inline-size: 0;
}

.admin-employee-list-item__org a {
  overflow-wrap: anywhere;
  color: var(--color-ink-light);
  font-weight: 600;
  text-decoration-color: transparent;
  text-underline-offset: 0.15rem;
}

.admin-employee-list-item__org a:hover,
.admin-employee-list-item__org a:focus-visible {
  color: var(--color-brand-strong);
  text-decoration-color: currentColor;
}

.admin-employee-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  line-height: 1.25rem;
}

.admin-employee-list-item__meta-item {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  margin: 0;
}

.admin-employee-list-item__meta-icon {
  flex: 0 0 auto;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--color-ink-lighter);
}

.admin-employee-list-item__meta-text {
  overflow: hidden;
  margin-inline: 0.25rem 0.5rem;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.admin-employee-list-item__code {
  inline-size: 100%;
  max-inline-size: 28rem;
}

.admin-employee-list-item__code-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.admin-employee-list-item__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

@media (min-width: 640px) {
  .admin-employee-list-item__meta {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .admin-employee-list-item {
    flex-direction: row;
    justify-content: space-between;
  }

  .admin-employee-list-item__identity {
    margin-block-end: 0;
  }

  .admin-employee-list-item__actions {
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .admin-employee-list-item__body {
    flex-direction: row;
    align-items: center;
  }
}

.admin-employee-archive-field {
  padding: 0.5rem 1rem;
}

.admin-employee-archive-field__label {
  display: block;
  color: var(--color-subtle);
  font-size: 0.75rem;
  font-weight: 500;
}

.admin-employee-archive-field__input {
  display: block;
  inline-size: 100%;
  margin-block-start: 0.25rem;
  border-color: var(--color-border-medium);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: 0.875rem;
  box-shadow: var(--shadow-sm);
}

.admin-employee-avatar-field {
  margin-block-start: 1rem;
}


.admin-employee-avatar-field__control {
  margin-block-start: 0.5rem;
}

.admin-employee-avatar-field__row {
  display: flex;
  align-items: center;
}

.admin-employee-avatar-field__preview {
  display: block;
  inline-size: 3rem;
  block-size: 3rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-subtle);
}

.admin-employee-avatar-field__input {
  margin-inline-start: 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) {
  .admin-employee-avatar-field {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 1rem;
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--color-border);
  }

  .admin-employee-avatar-field__control {
    grid-column: span 2 / span 2;
    margin-block-start: 0;
  }
}

.admin-employee-checkbox-row {
  display: flex;
  align-items: center;
}

.admin-employee-api-key {
  margin-block-start: 1.5rem;
  padding-inline: 0.5rem;
  font-size: 0.875rem;
}

.admin-employee-api-key__action {
  margin-block-start: 1.5rem;
}

.admin-employee-gender-options {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  column-gap: 1rem;
}

@media (min-width: 1024px) {
  .admin-employee-gender-options {
    flex-direction: row;
  }
}

.admin-employee-form-actions {
  display: flex;
  justify-content: flex-end;
}

.employee-edit-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 1rem;
}

.employee-edit-shell > turbo-frame {
  display: contents;
}

.employee-edit-shell__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-edit-shell__identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-inline-size: 0;
}

.employee-edit-shell__avatar {
  flex: 0 0 auto;
}

.employee-edit-shell__heading {
  min-inline-size: 0;
}

.employee-edit-shell__eyebrow,
.employee-edit-shell__title,
.employee-edit-shell__meta {
  margin: 0;
}

.employee-edit-shell__eyebrow,
.employee-edit-shell__switcher-label {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-edit-shell__title {
  margin-block-start: 0.2rem;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.employee-edit-shell__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.employee-edit-shell__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.employee-edit-shell__status,
.employee-edit-shell__role {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
}

.employee-edit-shell__status {
  gap: 0.45rem;
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
}

.employee-edit-shell__role {
  background-color: color-mix(in oklch, var(--color-brand) 9%, var(--color-surface));
  color: var(--color-brand-strong);
}

.employee-edit-shell__status-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-success-strong);
}

.employee-edit-shell__status--archived .employee-edit-shell__status-dot {
  background-color: var(--color-ink-lighter);
}

.employee-edit-shell__status--onboarding .employee-edit-shell__status-dot {
  background-color: var(--color-warning);
}

.employee-edit-shell__nav {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.employee-edit-shell__switcher {
  display: grid;
  gap: 0.45rem;
  min-inline-size: 0;
  margin-block-end: 0;
}

.employee-edit-shell__switcher .employee-search__control,
.employee-basic-form .employee-search__control {
  flex-direction: row;
  align-items: center;
  block-size: auto;
  min-block-size: 46px;
  min-inline-size: 0;
}

.employee-edit-shell__switcher .employee-search__tags {
  max-inline-size: 45%;
  overflow: hidden;
  white-space: nowrap;
}

.employee-edit-shell__switcher .employee-search__tag {
  max-inline-size: 100%;
}

.employee-edit-shell__switcher .input-tags__label,
.employee-edit-shell__switcher .employee-search__input,
.employee-basic-form .employee-search__input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-edit-shell__switcher .employee-search__input,
.employee-basic-form .employee-search__input {
  min-inline-size: 6rem;
  padding-inline-end: 4.75rem;
}

.employee-edit-shell__tabs {
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block-end: 0.15rem;
}

.employee-edit-shell__tabs .page-tabs,
.employee-edit-shell__tabs .page-tabs__nav-wrap,
.employee-edit-shell__tabs .page-tabs__rule {
  min-inline-size: 0;
}

.employee-edit-shell__tabs .page-tabs__nav {
  gap: 1.25rem;
}

.employee-edit-shell__tabs .page-tabs__actions {
  min-inline-size: 0;
}

.employee-edit-shell__tabs .page-tabs__actions:empty {
  display: none;
}

.employee-edit-shell__content-inner {
  margin-block-start: 0;
}

.employee-basic-info,
.employee-personal-info {
  display: grid;
  gap: 1rem;
}

.employee-basic-info__main,
.employee-basic-info__sidebar,
.employee-personal-info__main,
.employee-personal-info__sidebar {
  min-inline-size: 0;
}

.employee-basic-info__sidebar,
.employee-personal-info__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-basic-info__aside-section,
.employee-basic-form__section,
.employee-personal-info__aside-section,
.employee-personal-form__section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-basic-info__aside-section,
.employee-personal-info__aside-section {
  padding: 1rem;
}

.employee-basic-info__aside-heading,
.employee-personal-info__aside-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.employee-basic-info__aside-icon,
.employee-personal-info__aside-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
}

.employee-basic-info__aside-icon .icon,
.employee-personal-info__aside-icon .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.employee-basic-info__aside-kicker,
.employee-basic-info__aside-title,
.employee-basic-info__aside-text,
.employee-personal-info__aside-kicker,
.employee-personal-info__aside-title,
.employee-personal-info__aside-text {
  margin: 0;
}

.employee-basic-info__aside-kicker,
.employee-personal-info__aside-kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-basic-info__aside-title,
.employee-personal-info__aside-title {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-basic-info__aside-kicker + .employee-basic-info__aside-title,
.employee-basic-info__aside-title + .employee-basic-info__aside-text,
.employee-basic-info__aside-heading + .employee-basic-info__aside-text,
.employee-basic-info__aside-text + .employee-basic-info__aside-text,
.employee-personal-info__aside-kicker + .employee-personal-info__aside-title,
.employee-personal-info__aside-title + .employee-personal-info__aside-text,
.employee-personal-info__aside-heading + .employee-personal-info__aside-text,
.employee-personal-info__aside-text + .employee-personal-info__aside-text {
  margin-block-start: 0.55rem;
}

.employee-basic-info__aside-text,
.employee-personal-info__aside-text {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-personal-info__contact-records {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-block-start: 1rem;
}

.employee-personal-info__contact-records .contact-detail-section {
  align-items: flex-start;
  gap: 0.75rem;
  justify-content: space-between;
  margin-block-start: 0;
}

.employee-personal-info__contact-records .contact-detail-section + .contact-detail-section {
  padding-block-start: 0.85rem;
  border-block-start: 1px solid var(--color-border);
}

.employee-personal-info__contact-records .contact-detail-section__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-personal-info__contact-records .contact-detail-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.employee-personal-info__contact-records .contact-detail-row {
  margin: 0;
  border-block-end: 0;
  border-radius: var(--radius-md);
  padding: 0.55rem 0.65rem;
  background-color: var(--color-surface-muted);
}

.employee-basic-form,
.employee-personal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-basic-form__section,
.employee-personal-form__section {
  overflow: hidden;
}

.employee-basic-form__section-header,
.employee-personal-form__section-header {
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.employee-basic-form__kicker,
.employee-basic-form__title,
.employee-basic-form__description,
.employee-personal-form__kicker,
.employee-personal-form__title,
.employee-personal-form__description {
  margin: 0;
}

.employee-basic-form__kicker,
.employee-personal-form__kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-basic-form__title,
.employee-personal-form__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-basic-form__description,
.employee-personal-form__description {
  max-inline-size: 68ch;
  margin-block-start: 0.4rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.employee-basic-form__fields,
.employee-personal-form__fields {
  margin: 0;
  border: 0;
  padding: 1rem 1.25rem;
}

.employee-basic-form__fields + .employee-basic-form__fields,
.employee-personal-form__fields + .employee-personal-form__fields {
  padding-block-start: 0;
}

.employee-basic-form__avatar {
  margin: 0;
  padding: 1rem 1.25rem;
  border-block-start: 1px solid var(--color-border);
}

.employee-basic-form__section .custom-field-values {
  margin: 0;
  border: 0;
  padding: 1rem 1.25rem;
}

.employee-basic-form__section .custom-field-values__title {
  margin-block-start: 0;
}

.employee-personal-form__choice-group {
  margin: 0;
  border: 0;
  padding: 0 1.25rem 1rem;
}

.employee-personal-form__choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-block-start: 0.35rem;
}

.employee-personal-form__choice-options .form-field--inline {
  padding-block-start: 0;
}

.employee-personal-form__toggles {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
}

.employee-personal-form__toggles .form-field--inline {
  padding-block-start: 0;
}

.employee-personal-form__toggles .form-field__control {
  align-items: flex-start;
}

.employee-personal-form__toggles .form-field__label {
  font-weight: 600;
}

.employee-personal-form__toggles .form-field__hint {
  margin-inline-start: 1.75rem;
}

.employee-personal-form__textarea {
  padding: 0 1.25rem 1rem;
}

.employee-basic-form__actions,
.employee-personal-form__actions {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in oklch, var(--color-surface) 94%, var(--color-surface-muted));
  box-shadow: var(--shadow-sm);
}

.employee-basic-access {
  margin-block-start: 1rem;
}

.employee-basic-access .form-frame,
.employee-basic-access form {
  margin: 0;
}

.admin-employee-api-key {
  display: grid;
  gap: 0.55rem;
  margin-block-start: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  font-size: var(--text-small);
}

.admin-employee-api-key__label {
  color: var(--color-ink-lighter);
  font-weight: 700;
}

.admin-employee-api-key__value {
  display: block;
  min-inline-size: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.admin-employee-api-key__action {
  margin-block-start: 0.25rem;
}

.employee-contracts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-contracts__header {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-contracts__heading,
.employee-contracts__actions {
  min-inline-size: 0;
}

.employee-contracts__kicker,
.employee-contracts__title,
.employee-contracts__description {
  margin: 0;
}

.employee-contracts__kicker,
.employee-contract-form__kicker,
.employee-contracts-empty__kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-contracts__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.employee-contracts__description {
  max-inline-size: 68ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-contracts__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.employee-contracts__summary-item {
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-contracts__summary-value,
.employee-contracts__summary-label {
  display: block;
}

.employee-contracts__summary-value {
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1;
}

.employee-contracts__summary-label {
  margin-block-start: 0.3rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
}

.employee-contracts__actions {
  display: flex;
  justify-content: flex-start;
}

.employee-contracts__table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-contracts__table-scroll .simple-table {
  inline-size: 100%;
  min-inline-size: 56rem;
  margin: 0;
}

.employee-contracts__row {
  vertical-align: top;
}

.employee-contracts__overview {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-inline-size: 14rem;
}

.employee-contracts__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 1.75rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
}

.employee-contracts__status--active {
  border-color: color-mix(in oklch, var(--color-success-strong) 34%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-success) 14%, var(--color-surface));
  color: color-mix(in oklch, var(--color-success-strong) 58%, var(--color-ink));
}

.employee-contracts__status-dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

.employee-contracts__identity {
  min-inline-size: 0;
}

.employee-contracts__position,
.employee-contracts__meta {
  display: block;
}

.employee-contracts__position {
  color: var(--color-ink);
  font-size: var(--text-normal);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.employee-contracts__meta,
.employee-contracts__muted-value {
  margin-block-start: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.employee-contracts__terms {
  display: grid;
  gap: 0.45rem;
  min-inline-size: 12rem;
  margin: 0;
}

.employee-contracts__term {
  display: grid;
  gap: 0.15rem;
}

.employee-contracts__term dt,
.employee-contracts__term dd {
  margin: 0;
}

.employee-contracts__term dt {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-contracts__term dd,
.employee-contracts__salary {
  color: var(--color-ink);
  font-weight: 600;
}

.employee-contracts-empty {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-contracts-empty__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-brand-strong);
}

.employee-contracts-empty__icon .icon {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.employee-contracts-empty__body {
  min-inline-size: 0;
}

.employee-contracts-empty__title,
.employee-contracts-empty__text {
  margin: 0;
}

.employee-contracts-empty__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-contracts-empty__text {
  max-inline-size: 62ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-contracts-empty__actions {
  margin-block-start: 1rem;
}

.employee-leaves {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-leaves__header {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-leaves__heading,
.employee-leaves__actions {
  min-inline-size: 0;
}

.employee-leaves__kicker,
.employee-leaves__title,
.employee-leaves__description,
.employee-leaves__period-label,
.employee-leaves__period-value,
.employee-leaves-empty__kicker,
.employee-leaves-empty__title,
.employee-leaves-empty__text {
  margin: 0;
}

.employee-leaves__kicker,
.employee-leaves-empty__kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-leaves__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.employee-leaves__description {
  max-inline-size: 68ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-leaves__period {
  display: grid;
  gap: 0.25rem;
  align-self: stretch;
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-leaves__period-label {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-leaves__period-value {
  color: var(--color-ink);
  font-size: var(--text-medium);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.employee-leaves__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.employee-leaves__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-leaves__filter-group {
  display: grid;
  gap: 0.4rem;
  min-inline-size: min(100%, 12rem);
}

.employee-leaves__filter-label {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-leaves__filters .date-nav {
  align-self: stretch;
}

.employee-leaves__filters .date-nav__today {
  display: inline-flex;
  min-inline-size: 5.5rem;
}

.employee-leaves__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
}

.employee-leaves__summary-item {
  min-inline-size: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-leaves__summary-item--removed {
  border-color: color-mix(in oklch, var(--color-warning) 26%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-warning) 7%, var(--color-surface));
}

.employee-leaves__summary-item--available {
  border-color: color-mix(in oklch, var(--color-success-strong) 28%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-success) 9%, var(--color-surface));
}

.employee-leaves__summary-label,
.employee-leaves__summary-value,
.employee-leaves__summary-hint {
  display: block;
  margin: 0;
}

.employee-leaves__summary-label {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-leaves__summary-value {
  margin-block-start: 0.35rem;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1;
}

.employee-leaves__summary-hint {
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.35;
}

.employee-leaves__table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-leaves__table-scroll .simple-table {
  inline-size: 100%;
  min-inline-size: 54rem;
  margin: 0;
}

.employee-leaves__table-scroll .td {
  vertical-align: top;
}

.employee-leaves__table-scroll .td:nth-child(1),
.employee-leaves__table-scroll .td:nth-child(3) {
  white-space: normal;
}

.employee-leaves__table-scroll .td:nth-child(1) {
  min-inline-size: 10rem;
}

.employee-leaves__table-scroll .td:nth-child(3) {
  min-inline-size: 14rem;
  max-inline-size: 24rem;
  color: var(--color-ink-light);
  overflow-wrap: anywhere;
}

.employee-leaves-empty {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-leaves-empty__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-brand-strong);
}

.employee-leaves-empty__icon .icon {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.employee-leaves-empty__body {
  min-inline-size: 0;
}

.employee-leaves-empty__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-leaves-empty__text {
  max-inline-size: 62ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-leaves-empty__actions {
  margin-block-start: 1rem;
}

.employee-overtime {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-overtime__header {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-overtime__heading,
.employee-overtime__actions {
  min-inline-size: 0;
}

.employee-overtime__kicker,
.employee-overtime__title,
.employee-overtime__description,
.employee-overtime__period-label,
.employee-overtime__period-value,
.employee-overtime__section-title,
.employee-overtime__section-description,
.employee-overtime-empty__kicker,
.employee-overtime-empty__title,
.employee-overtime-empty__text {
  margin: 0;
}

.employee-overtime__kicker,
.employee-overtime-empty__kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-overtime__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.employee-overtime__description {
  max-inline-size: 68ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-overtime__period {
  display: grid;
  gap: 0.25rem;
  align-self: stretch;
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-overtime__period-label {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-overtime__period-value {
  color: var(--color-ink);
  font-size: var(--text-medium);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.employee-overtime__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.employee-overtime__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-overtime__filter-group {
  display: grid;
  gap: 0.4rem;
  min-inline-size: min(100%, 12rem);
}

.employee-overtime__filter-label {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-overtime__filters .date-nav {
  align-self: stretch;
}

.employee-overtime__filters .date-nav__today {
  display: inline-flex;
  min-inline-size: 5.5rem;
}

.employee-overtime__results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-overtime__summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.employee-overtime__summary-heading {
  display: grid;
  gap: 0.35rem;
}

.employee-overtime__section-title {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.25;
}

.employee-overtime__section-description {
  max-inline-size: 68ch;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-overtime__summary .metric-summary {
  margin: 0;
}

.employee-overtime__summary .metric-summary__tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-overtime__summary .metric-summary__tile:nth-child(2) {
  border-color: color-mix(in oklch, var(--color-warning) 26%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-warning) 7%, var(--color-surface));
}

.employee-overtime__summary .metric-summary__tile:nth-child(3) {
  border-color: color-mix(in oklch, var(--color-success-strong) 28%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-success) 9%, var(--color-surface));
}

.employee-overtime__table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-overtime__table-scroll .simple-table {
  inline-size: 100%;
  min-inline-size: 54rem;
  margin: 0;
}

.employee-overtime__table-scroll .td {
  vertical-align: top;
}

.employee-overtime__table-scroll .td:nth-child(1),
.employee-overtime__table-scroll .td:nth-child(3) {
  white-space: normal;
}

.employee-overtime__table-scroll .td:nth-child(1) {
  min-inline-size: 10rem;
}

.employee-overtime__table-scroll .td:nth-child(3) {
  min-inline-size: 14rem;
  max-inline-size: 24rem;
  color: var(--color-ink-light);
  overflow-wrap: anywhere;
}

.employee-overtime-empty {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-overtime-empty__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-brand-strong);
}

.employee-overtime-empty__icon .icon {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.employee-overtime-empty__body {
  min-inline-size: 0;
}

.employee-overtime-empty__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-overtime-empty__text {
  max-inline-size: 62ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-overtime-empty__actions {
  margin-block-start: 1rem;
}

.employee-contract-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-contract-form__section {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.employee-contract-form__section-header {
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.employee-contract-form__kicker,
.employee-contract-form__title,
.employee-contract-form__description {
  margin: 0;
}

.employee-contract-form__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-contract-form__description {
  max-inline-size: 62ch;
  margin-block-start: 0.35rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.employee-contract-form__fields {
  padding: 1rem;
}

.employee-contract-form__section--compact .employee-contract-form__fields {
  padding-block: 0.85rem;
}

.employee-contract-form__fields > .form-field--inline {
  padding-block-start: 0;
}

@media (min-width: 768px) {
  .employee-edit-shell__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem;
  }

  .employee-edit-shell__nav {
    grid-template-columns: minmax(20rem, 0.42fr) minmax(0, 1fr);
    align-items: end;
  }

  .employee-basic-info,
  .employee-personal-info {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.38fr);
    align-items: start;
  }

  .employee-contracts__header {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.38fr) auto;
    align-items: center;
  }

  .employee-contracts__actions {
    justify-content: flex-end;
  }

  .employee-basic-info__sidebar,
  .employee-personal-info__sidebar {
    position: sticky;
    inset-block-start: 1rem;
  }
}

@media (max-width: 639px) {
  .employee-edit-shell__nav {
    padding: 0.85rem;
  }

  .employee-edit-shell__tabs .page-tabs__actions {
    display: none;
  }

  .employee-basic-form__actions .admin-employee-form-actions,
  .employee-personal-form__actions .admin-employee-form-actions {
    justify-content: stretch;
  }

  .employee-basic-form__actions .admin-employee-submit-wrap,
  .employee-basic-form__actions .btn,
  .employee-personal-form__actions .admin-employee-submit-wrap,
  .employee-personal-form__actions .btn {
    inline-size: 100%;
  }

  .employee-contracts__header,
  .employee-contracts-empty {
    padding: 1rem;
  }

  .employee-contracts__summary {
    grid-template-columns: 1fr;
  }

  .employee-contracts__actions .btn,
  .employee-contracts-empty__actions .btn {
    inline-size: 100%;
  }
}

.employee-schedules {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-schedules__header {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-schedules__heading,
.employee-schedules__actions {
  min-inline-size: 0;
}

.employee-schedules__kicker,
.employee-schedules__title,
.employee-schedules__description {
  margin: 0;
}

.employee-schedules__kicker,
.employee-schedule-form__kicker,
.employee-schedules-empty__kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-schedules__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.employee-schedules__description {
  max-inline-size: 68ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-schedules__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.employee-schedules__summary-item {
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-schedules__summary-item--active {
  border-color: color-mix(in oklch, var(--color-success-strong) 26%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-success) 10%, var(--color-surface));
}

.employee-schedules__summary-value,
.employee-schedules__summary-label {
  display: block;
}

.employee-schedules__summary-value {
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1;
}

.employee-schedules__summary-label {
  margin-block-start: 0.3rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
}

.employee-schedules__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.employee-schedules__inactive-state {
  display: grid;
  gap: 0.35rem;
  inline-size: 100%;
  padding: 0.85rem;
  border: 1px solid color-mix(in oklch, var(--color-warning) 38%, var(--color-border));
  border-radius: var(--radius-md);
  background-color: color-mix(in oklch, var(--color-warning) 11%, var(--color-surface));
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.35;
}

.employee-schedules__inactive-state strong {
  color: var(--color-ink);
  font-weight: 700;
}

.employee-schedules__config-link {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
}

.employee-schedules__config-link:hover,
.employee-schedules__config-link:focus-visible {
  text-decoration: underline;
}

.employee-schedules__list {
  display: grid;
  gap: 0.75rem;
}

.employee-schedules__row {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-schedules__overview {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-inline-size: 0;
}

.employee-schedules__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 1.75rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
}

.employee-schedules__status--active {
  border-color: color-mix(in oklch, var(--color-success-strong) 34%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-success) 14%, var(--color-surface));
  color: color-mix(in oklch, var(--color-success-strong) 58%, var(--color-ink));
}

.employee-schedules__status--scheduled {
  border-color: color-mix(in oklch, var(--color-info) 28%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-info) 9%, var(--color-surface));
  color: color-mix(in oklch, var(--color-info) 58%, var(--color-ink));
}

.employee-schedules__status-dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

.employee-schedules__identity {
  min-inline-size: 0;
}

.employee-schedules__name,
.employee-schedules__category {
  display: block;
}

.employee-schedules__name {
  color: var(--color-ink);
  font-size: var(--text-normal);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.employee-schedules__category {
  margin-block-start: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.employee-schedules__dates {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.employee-schedules__date {
  display: grid;
  gap: 0.15rem;
  min-inline-size: 0;
}

.employee-schedules__date dt,
.employee-schedules__date dd {
  margin: 0;
}

.employee-schedules__date dt {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-schedules__date dd {
  color: var(--color-ink);
  font-weight: 650;
}

.employee-schedules__open-ended {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-subtle);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-schedules__row-actions {
  display: flex;
  justify-content: flex-start;
}

.employee-schedules-empty {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-schedules-empty__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-brand-strong);
}

.employee-schedules-empty__icon .icon {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.employee-schedules-empty__body {
  min-inline-size: 0;
}

.employee-schedules-empty__title,
.employee-schedules-empty__text {
  margin: 0;
}

.employee-schedules-empty__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-schedules-empty__text {
  max-inline-size: 62ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-schedules-empty__actions {
  margin-block-start: 1rem;
}

.employee-skills {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-skills__header {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-skills__heading,
.employee-skills__actions {
  min-inline-size: 0;
}

.employee-skills__kicker,
.employee-skills__title,
.employee-skills__description,
.employee-skills-empty__kicker,
.employee-skills-empty__title,
.employee-skills-empty__text,
.employee-skill-form__kicker,
.employee-skill-form__title,
.employee-skill-form__description,
.employee-skill-form__section-title,
.employee-skill-form__section-description {
  margin: 0;
}

.employee-skills__kicker,
.employee-skills-empty__kicker,
.employee-skill-form__kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-skills__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.employee-skills__description {
  max-inline-size: 68ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-skills__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.employee-skills__summary-item {
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-skills__summary-item--expiring {
  border-color: color-mix(in oklch, var(--color-info) 26%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-info) 8%, var(--color-surface));
}

.employee-skills__summary-value,
.employee-skills__summary-label {
  display: block;
}

.employee-skills__summary-value {
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1;
}

.employee-skills__summary-label {
  margin-block-start: 0.3rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
}

.employee-skills__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.employee-skills__list {
  display: grid;
  gap: 0.75rem;
}

.employee-skills__row {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-skills__overview {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-inline-size: 0;
}

.employee-skills__icon,
.employee-skills-empty__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-brand-strong);
}

.employee-skills__icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
}

.employee-skills__icon .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.employee-skills__identity {
  min-inline-size: 0;
}

.employee-skills__name,
.employee-skills__category {
  display: block;
}

.employee-skills__name {
  color: var(--color-ink);
  font-size: var(--text-normal);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.employee-skills__category {
  margin-block-start: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.employee-skills__details {
  max-inline-size: 58ch;
  margin: 0.65rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.employee-skills__details-label {
  color: var(--color-ink-lighter);
  font-weight: 700;
}

.employee-skills__dates {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.employee-skills__date {
  display: grid;
  gap: 0.15rem;
  min-inline-size: 0;
}

.employee-skills__date dt,
.employee-skills__date dd {
  margin: 0;
}

.employee-skills__date dt {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-skills__date dd {
  color: var(--color-ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.employee-skills__open-ended {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-subtle);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-skills__row-actions {
  display: flex;
  justify-content: flex-start;
}

.employee-skills-empty {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-skills-empty__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.employee-skills-empty__icon .icon {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.employee-skills-empty__body {
  min-inline-size: 0;
}

.employee-skills-empty__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-skills-empty__text {
  max-inline-size: 62ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-skills-empty__actions {
  margin-block-start: 1rem;
}

.employee-skill-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-skill-form__intro {
  display: grid;
  gap: 0.25rem;
}

.employee-skill-form__title {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-skill-form__description {
  max-inline-size: 62ch;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-skill-form__section {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.employee-skill-form__section-header {
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.employee-skill-form__section-title {
  color: var(--color-ink);
  font-size: var(--text-normal);
  font-weight: 700;
  line-height: 1.2;
}

.employee-skill-form__section-description {
  max-inline-size: 62ch;
  margin-block-start: 0.35rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-skill-form__fields {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.employee-skill-form__fields .search-picker,
.employee-skill-form__fields .form-field {
  min-inline-size: 0;
}

.employee-skill-form__current-skill {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-skill-form__current-label {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-skill-form__current-name {
  color: var(--color-ink);
  font-size: var(--text-normal);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.employee-skill-form__current-category {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.employee-schedule-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-schedule-form__section {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.employee-schedule-form__section-header {
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.employee-schedule-form__kicker,
.employee-schedule-form__title,
.employee-schedule-form__description {
  margin: 0;
}

.employee-schedule-form__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-schedule-form__description {
  max-inline-size: 62ch;
  margin-block-start: 0.35rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.employee-schedule-form__fields {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.employee-schedule-form__field {
  min-inline-size: 0;
}

.employee-permissions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-permissions__header {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-permissions__heading,
.employee-permissions__actions {
  min-inline-size: 0;
}

.employee-permissions__kicker,
.employee-permissions__title,
.employee-permissions__description,
.employee-permissions__admin-kicker,
.employee-permissions__admin-title,
.employee-permissions__admin-text,
.employee-permissions-empty__kicker,
.employee-permissions-empty__title,
.employee-permissions-empty__text {
  margin: 0;
}

.employee-permissions__kicker,
.employee-permissions__admin-kicker,
.employee-permissions-empty__kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-permissions__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.employee-permissions__description {
  max-inline-size: 68ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-permissions__summary {
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-permissions__summary-value,
.employee-permissions__summary-label {
  display: block;
}

.employee-permissions__summary-value {
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1;
}

.employee-permissions__summary-label {
  margin-block-start: 0.3rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
}

.employee-permissions__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.employee-permissions__layout {
  display: grid;
  gap: 1rem;
}

.employee-permissions__main,
.employee-permissions__sidebar {
  min-inline-size: 0;
}

.employee-permissions__list {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-permissions__list-head,
.employee-permissions__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.52fr);
  gap: 1rem;
  align-items: center;
}

.employee-permissions__list-head {
  padding: 0.75rem 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-permissions__row {
  padding: 1rem;
}

.employee-permissions__row + .employee-permissions__row {
  border-block-start: 1px solid var(--color-border);
}

.employee-permissions__group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-inline-size: 0;
}

.employee-permissions__group-icon,
.employee-permissions__admin-icon,
.employee-permissions-empty__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-brand-strong);
}

.employee-permissions__group-icon {
  inline-size: 2rem;
  block-size: 2rem;
}

.employee-permissions__group-icon .icon,
.employee-permissions__admin-icon .icon,
.employee-permissions-empty__icon .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.employee-permissions__group-body {
  min-inline-size: 0;
}

.employee-permissions__group-link {
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.employee-permissions__group-link:hover,
.employee-permissions__group-link:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.employee-permissions__group-meta {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.employee-permissions__availability {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
  color: var(--color-ink);
  font-weight: 650;
}

.employee-permissions__availability-value {
  overflow-wrap: anywhere;
}

.employee-permissions__mobile-label {
  display: none;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-permissions__admin-panel,
.employee-permissions-empty {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-permissions__admin-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.employee-permissions__admin-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.employee-permissions__admin-icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
}

.employee-permissions__admin-title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-permissions__admin-text {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-permissions__admin-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  min-block-size: 1.75rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
}

.employee-permissions__admin-state--active {
  border-color: color-mix(in oklch, var(--color-warning) 38%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-warning) 11%, var(--color-surface));
  color: color-mix(in oklch, var(--color-warning) 54%, var(--color-ink));
}

.employee-permissions__admin-state-dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

.employee-permissions__admin-action form {
  margin: 0;
}

.employee-permissions-empty {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
}

.employee-permissions-empty__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.employee-permissions-empty__body {
  min-inline-size: 0;
}

.employee-permissions-empty__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-permissions-empty__text {
  max-inline-size: 62ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-permissions-empty__actions {
  margin-block-start: 1rem;
}

.admin-employee-table-scroll {
  margin-block: -0.5rem;
  padding-block: 0.5rem;
}

@media (min-width: 640px) {
  .employee-schedules__dates,
  .employee-skills__dates,
  .employee-schedule-form__fields,
  .employee-skill-form__fields--dates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .employee-leaves__header {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.34fr) auto;
    align-items: center;
  }

  .employee-overtime__header {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.34fr) auto;
    align-items: center;
  }

  .employee-leaves__actions {
    justify-content: flex-end;
  }

  .employee-overtime__actions {
    justify-content: flex-end;
  }

  .employee-leaves__summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .employee-permissions__header {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.32fr) auto;
    align-items: center;
  }

  .employee-permissions__actions {
    justify-content: flex-end;
  }

  .employee-permissions__layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.36fr);
    align-items: start;
  }

  .employee-permissions__sidebar {
    position: sticky;
    inset-block-start: 1rem;
  }

  .employee-schedules__header {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.38fr) minmax(14rem, auto);
    align-items: center;
  }

  .employee-skills__header {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.38fr) minmax(12rem, auto);
    align-items: center;
  }

  .employee-schedules__actions,
  .employee-schedules__row-actions,
  .employee-skills__actions,
  .employee-skills__row-actions {
    justify-content: flex-end;
  }

  .employee-schedules__row {
    grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 0.8fr) auto;
    align-items: center;
  }

  .employee-skills__row {
    grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 0.9fr) auto;
    align-items: center;
  }
}

@media (max-width: 639px) {
  .employee-leaves__header,
  .employee-leaves__filters,
  .employee-leaves-empty,
  .employee-overtime__header,
  .employee-overtime__filters,
  .employee-overtime-empty {
    padding: 1rem;
  }

  .employee-leaves__actions .btn,
  .employee-leaves-empty__actions .btn,
  .employee-overtime__actions .btn,
  .employee-overtime-empty__actions .btn {
    inline-size: 100%;
  }

  .employee-leaves__filter-group,
  .employee-leaves__filter-group .input,
  .employee-overtime__filter-group,
  .employee-overtime__filter-group .input {
    inline-size: 100%;
  }

  .employee-leaves-empty,
  .employee-overtime-empty {
    align-items: flex-start;
  }

  .employee-permissions__header,
  .employee-permissions-empty {
    padding: 1rem;
  }

  .employee-permissions__actions .btn,
  .employee-permissions__admin-action .btn,
  .employee-permissions-empty__actions .btn {
    inline-size: 100%;
  }

  .employee-permissions__list-head {
    display: none;
  }

  .employee-permissions__row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .employee-permissions__mobile-label {
    display: block;
  }

  .employee-permissions-empty {
    align-items: flex-start;
  }

  .employee-schedules__header,
  .employee-schedules-empty,
  .employee-skills__header,
  .employee-skills-empty {
    padding: 1rem;
  }

  .employee-schedules__summary,
  .employee-skills__summary {
    grid-template-columns: 1fr;
  }

  .employee-schedules__actions .btn,
  .employee-schedules-empty__actions .btn,
  .employee-skills__actions .btn,
  .employee-skills-empty__actions .btn {
    inline-size: 100%;
  }

  .employee-schedules__overview,
  .employee-schedules-empty,
  .employee-skills__overview,
  .employee-skills-empty {
    align-items: flex-start;
  }
}

@media (min-width: 640px) {
  .admin-employee-table-scroll {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .admin-employee-table-scroll {
    margin-inline: -2rem;
    padding-inline: 2rem;
  }
}

.admin-employee-muted-body {
  color: var(--color-ink-light);
}

.employee-evaluations,
.employee-evaluation-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.employee-evaluations__header,
.employee-evaluation-detail__header {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-evaluations__heading,
.employee-evaluations__summary,
.employee-evaluation-detail__heading,
.employee-evaluation-detail__period,
.employee-evaluation-detail__actions {
  min-inline-size: 0;
}

.employee-evaluations__kicker,
.employee-evaluations__title,
.employee-evaluations__description,
.employee-evaluations__summary-value,
.employee-evaluations__summary-label,
.employee-evaluations__section-title,
.employee-evaluations__section-description,
.employee-evaluations-empty__kicker,
.employee-evaluations-empty__title,
.employee-evaluations-empty__text,
.employee-evaluation-detail__kicker,
.employee-evaluation-detail__title,
.employee-evaluation-detail__description,
.employee-evaluation-detail__section-title,
.employee-evaluation-detail__section-description,
.employee-evaluation-detail__empty {
  margin: 0;
}

.employee-evaluations__kicker,
.employee-evaluations-empty__kicker,
.employee-evaluation-detail__kicker {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-evaluations__title,
.employee-evaluation-detail__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.employee-evaluations__description,
.employee-evaluation-detail__description {
  max-inline-size: 68ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-evaluations__summary {
  display: grid;
  gap: 0.3rem;
  align-self: stretch;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-evaluations__summary-value {
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1;
}

.employee-evaluations__summary-label {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-evaluations__history,
.employee-evaluation-detail__chart-panel,
.employee-evaluation-detail__filters {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-evaluations__history-header,
.employee-evaluation-detail__panel-header {
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.employee-evaluations__section-title,
.employee-evaluation-detail__section-title {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.25;
}

.employee-evaluations__section-description,
.employee-evaluation-detail__section-description {
  max-inline-size: 68ch;
  margin-block-start: 0.35rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-evaluations__list {
  display: flex;
  flex-direction: column;
}

.employee-evaluations__item {
  display: grid;
  gap: 0.85rem;
  min-inline-size: 0;
  padding: 1rem 1.25rem;
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.employee-evaluations__item:first-child {
  border-block-start: 0;
}

.employee-evaluations__item-main {
  min-inline-size: 0;
}

.employee-evaluations__item-label {
  display: block;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-evaluations__item-title {
  margin: 0.25rem 0 0;
  color: var(--color-ink);
  font-size: var(--text-normal);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.employee-evaluations__item-link {
  color: var(--color-brand-strong);
  text-decoration-color: color-mix(in oklch, var(--color-brand) 35%, transparent);
  text-underline-offset: 0.15rem;
}

.employee-evaluations__item-link:hover,
.employee-evaluations__item-link:focus-visible {
  color: var(--color-brand);
  text-decoration-color: currentColor;
}

.employee-evaluations__item-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 0.15rem;
}

.employee-evaluations__item-meta {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.employee-evaluations__item-meta-group {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.employee-evaluations__item-meta dt,
.employee-evaluations__item-meta dd,
.employee-evaluation-detail__period dt,
.employee-evaluation-detail__period dd {
  margin: 0;
}

.employee-evaluations__item-meta dt,
.employee-evaluation-detail__period dt {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
}

.employee-evaluations__item-meta dd,
.employee-evaluation-detail__period dd {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.employee-evaluations-empty {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.employee-evaluations-empty__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-brand-strong);
}

.employee-evaluations-empty__icon .icon {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.employee-evaluations-empty__body {
  min-inline-size: 0;
}

.employee-evaluations-empty__title {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.employee-evaluations-empty__text {
  max-inline-size: 62ch;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.employee-evaluations-empty__actions {
  margin-block-start: 1rem;
}

.employee-evaluation-detail__period {
  display: grid;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.employee-evaluation-detail__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.employee-evaluation-detail__layout {
  display: grid;
  gap: 1rem;
}

.employee-evaluation-detail__chart {
  min-block-size: 20rem;
  padding: 1rem;
}

.employee-evaluation-detail__chart canvas {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.employee-evaluation-detail__filter-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.employee-evaluation-detail__empty {
  padding: 1rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.admin-employee-evaluator {
  margin: 0;
}

.admin-employee-evaluator__label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-block-size: 2.75rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.admin-employee-evaluator__label:focus-within {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus-soft);
}

.admin-employee-evaluator__checkbox {
  flex: 0 0 auto;
  margin-block-start: 0.1rem;
}

.admin-employee-evaluator__name {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .employee-evaluations__header {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.22fr);
    align-items: center;
  }

  .employee-evaluations__item {
    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1fr);
    align-items: center;
  }

  .employee-evaluations__item-meta {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, auto);
    align-items: center;
  }

  .employee-evaluations__item-meta-group:last-child {
    text-align: end;
  }

  .employee-evaluation-detail__header {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.38fr) auto;
    align-items: center;
  }

  .employee-evaluation-detail__actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) {
  .employee-evaluation-detail__layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.32fr);
    align-items: start;
  }

  .employee-evaluation-detail__filters {
    position: sticky;
    inset-block-start: 1rem;
  }
}

@media (max-width: 639px) {
  .employee-evaluations__header,
  .employee-evaluations-empty,
  .employee-evaluation-detail__header {
    padding: 1rem;
  }

  .employee-evaluations-empty {
    align-items: flex-start;
  }

  .employee-evaluations-empty__actions .btn,
  .employee-evaluation-detail__actions .btn {
    inline-size: 100%;
  }

  .employee-evaluation-detail__chart {
    min-block-size: 16rem;
    padding: 0.75rem;
  }
}

.admin-employee-evaluation {
  display: flex;
  gap: 1.5rem;
  margin-block-start: 1.5rem;
  padding-inline: 1rem;
}

.admin-employee-evaluation__chart {
  inline-size: 75%;
}

.admin-employee-evaluation__filters {
  inline-size: 25%;
}

.admin-employee-payroll-result {
  margin-block-start: 2rem;
  margin-inline: 2.5rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .admin-employee-payroll-result {
    margin-inline: 5rem;
  }
}

.salary-concepts {
  padding: 0.75rem 1rem;
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.salary-concepts__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0.5rem;
}

.salary-concepts__title {
  margin: 0;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 600;
}

.salary-concepts__action {
  font-size: 0.75rem;
}

.salary-concepts__table {
  min-inline-size: 100%;
  font-size: 0.875rem;
}

.salary-concepts__empty {
  margin: 0;
  color: var(--color-ink-medium);
  font-size: 0.75rem;
  font-style: italic;
}

.salary-concepts__total {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 600;
}

.salary-concepts__total-value {
  margin-inline-start: 0.5rem;
  color: rgb(var(--palette-indigo-700));
}

.salary-concepts__form-panel {
  margin-block-start: 0.75rem;
}

.salary-concepts__row {
  border-block-end: 1px solid var(--color-border-muted);
}

.salary-concepts__row:last-child {
  border-block-end: 0;
}

.salary-concepts__cell {
  padding-block: 0.25rem;
  padding-inline-end: 1rem;
}

.salary-concepts__cell--name {
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.salary-concepts__cell--amount {
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: right;
}

.salary-concepts__cell--actions {
  padding-inline-end: 0;
  text-align: right;
  white-space: nowrap;
}

.salary-concepts__container-cell {
  padding: 0;
}

.salary-concepts__form-cell {
  padding-block: 0.25rem;
}

.salary-concept-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
  padding-block: 0.5rem;
}

.salary-concept-form__label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

.salary-concept-form__label {
  display: block;
  padding-block: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

.salary-concept-form__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.salary-concept-form__actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding-block-end: 0.125rem;
}