@layer screens {
/* Employments screens (employments#index, new, edit) + employment modals */

/* --- Employments index: responsive table/grid --- */
body#employments_index {
  & .employment-grid {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: var(--spacing-2);
    margin-block-end: var(--spacing-6);
  }

  & .employment-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
  }

  & .employment-row.header {
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
  }

  & .employment-row .col-name {
    font-weight: var(--font-weight-semibold);
  }

  & .employment-row .col-balance a {
    color: var(--brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  & .employment-row .col-balance a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
  }

  & .employment-row .col-balance a:focus-visible {
    outline: var(--border-width-thick) solid var(--focus-ring);
    outline-offset: 2px;
  }

  & .employment-row .col-actions {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    justify-content: flex-end;
  }
}

/* Stack the grid on narrow screens so 7 columns don't overflow. */
@media (max-width: 800px) {
  body#employments_index {
    & .employment-grid {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-3);
    }

    & .employment-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-1);
    }

    & .employment-row.header {
      display: none;
    }

    & .employment-row .col-actions {
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-block-start: var(--spacing-2);
    }
  }
}

/* Row action clusters (index + shared) */
.action-buttons {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- Employment modal internals (edit + details modals) --- */
.modal .employee-info {
  margin-block-end: var(--spacing-4);
  padding-block-end: var(--spacing-3);
  border-block-end: var(--border-width) solid var(--border);
}

.modal .employee-info .employee-email {
  color: var(--text);
  font-weight: var(--font-weight-medium);
}

.modal .employee-info .employee-phone {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.documents-section {
  margin-block: var(--spacing-4);
  padding-block-start: var(--spacing-4);
  border-block-start: var(--border-width) solid var(--border);
}

.documents-section h4 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-block-end: var(--spacing-3);
}

.documents-list .document {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--surface-sunken);
  border-radius: var(--radius);
}

.documents-list .document a {
  color: var(--brand);
}

.documents-list .document a:hover {
  color: var(--brand-hover);
}

.action-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-block: var(--spacing-3);
}
}