/* ==========================================================================
   EMPLOYEES — the office's own people
   --------------------------------------------------------------------------
   Prefix .emp-. Tokens and logical properties only: no hex colours, no
   left/right, so both themes, the high-contrast fallback and right-to-left
   come for free. Loaded after apple.css (docs/EMPLOYEES.md).

   Contents
     1  The list: who they are, the table that becomes cards, the actions
     2  The step before an action: a confirmation under the person's row
     3  The hand-over: sign-in details shown once, and the copy buttons
     4  The form
     5  Roles and permissions
   ========================================================================== */

/* ==========================================================================
   1 · THE LIST
   A person is a name with their address under it. Six columns on a wide screen — the sidebar takes a sixth of a
   laptop's width and the actions are three buttons, so "wide" starts at 80rem; under it the table is
   re-flowed as one card per person: the cells stack, each carrying its column's name (data-label) in front,
   and the header row is kept for screen readers only. Reading order is the DOM order, so nothing moves for
   assistive technology; the explicit table roles in the markup keep the table semantics that `display: block`
   would otherwise take away.
   ========================================================================== */

.emp-sub {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* An address or a username is left-to-right text in a right-to-left page; it is set against the reading edge so
   it lines up under the name, not against the opposite one. */
[dir='rtl'] .emp-sub[dir='ltr'] {
  text-align: end;
}

.emp-person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.emp-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.emp-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-weight: var(--font-weight-semibold);
}

/* Somebody who cannot sign in recedes; their badge still says why, in words. */
.emp-row--off td {
  color: var(--color-text-muted);
}

.emp-table td:first-child {
  min-inline-size: 14rem;
}

/* The shared `.table__actions` squeezes a cell to its narrowest word (1% wide, no wrapping). Three buttons in a
   column make a row three lines tall, so this cell takes what its buttons want and wraps them only when the table
   runs out of room. */
.emp-table td.emp-actions {
  inline-size: auto;
  min-inline-size: 13rem;
  white-space: normal;
}

.emp-actions__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

/* A row-level destructive button is quiet: a solid red button on every card makes a list look like an alarm.
   The loud one is the confirmation's, which is where the harm would be done. */
.btn.emp-btn-danger {
  color: var(--color-danger-fg);
  background: transparent;
  border-color: var(--color-danger-border);
}

.btn.emp-btn-danger:hover {
  background: var(--color-danger-soft);
}

.emp-pager .pagination__list {
  flex-wrap: wrap;
}

/* On a phone the filters are not four boxes in a column: the search has the width, the two selects share a line. */
@media (max-width: 40rem) {
  .emp-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .emp-filters > .field:first-child,
  .emp-filters .filter-bar__actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 80rem) {
  .emp-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .emp-table,
  .emp-table tbody,
  .emp-table tr,
  .emp-table td {
    display: block;
  }

  /* Visually hidden, still announced: the cells carry their own labels below. */
  .emp-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .emp-table tbody tr {
    margin-block-end: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .emp-table.table--zebra tbody tr:nth-child(even) {
    background: var(--color-surface);
  }

  .emp-table td,
  .emp-table.table--zebra td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
    border: 0;
    white-space: normal;
  }

  .emp-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 7rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
  }

  .emp-table td > * {
    min-inline-size: 0;
  }

  /* The first cell leads the card and needs no label of its own. */
  .emp-table td:first-child {
    display: block;
    padding-block-start: 0;
    min-inline-size: 0;
  }

  .emp-table .table__actions {
    inline-size: auto;
    padding-block-end: 0;
  }

  .emp-actions__row {
    justify-content: flex-start;
  }

  .emp-table .emp-expand-row {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .emp-table .emp-expand-row > td {
    display: block;
    padding: 0;
  }
}

/* Between a phone and a wide screen the cards sit two to a row rather than one tall card each; a confirmation that
   opens under a person still takes the whole row. */
@media (min-width: 48rem) and (max-width: 80rem) {
  .emp-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .emp-table tbody tr {
    margin-block-end: 0;
  }

  .emp-table tbody .emp-expand-row {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   2 · THE STEP BEFORE AN ACTION
   Under the row it is about, where the eye already is: a plain panel with the words and two buttons.
   ========================================================================== */

.emp-expand-row > td {
  padding: var(--space-3);
  white-space: normal;
}

.emp-expand-row,
.emp-expand-row:hover,
.table--zebra .emp-expand-row:nth-child(even) {
  background: var(--color-surface);
}

.emp-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.emp-panel__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   3 · THE HAND-OVER
   Sign-in details shown once. A dashed edge marks them as something that will not be here again; the password
   is large, selectable in one click, and in a monospace face that tells a 1 from an l.
   ========================================================================== */

.emp-secret {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-primary-border);
  border-radius: var(--radius-lg);
}

.emp-secret__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.emp-secret__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

/* A label and its value share a line while there is room for both, and stack when there is not — the panel sits in
   the office's own page and in the platform's narrow side column, so the room is the container's, not the screen's. */
.emp-secret__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.emp-secret__row dt {
  flex: 0 0 9rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.emp-secret__row dd {
  display: flex;
  flex: 1 1 14rem;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
}

.emp-secret__value {
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
  user-select: all;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.emp-secret__value--key {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* Inside a card that goes on to hold something else (the platform's owner accounts), the panel is set off from it. */
.emp-handover--inline {
  margin-block-end: var(--space-6);
}

/* One tap puts a value on the clipboard (the data-copy handler in dashboard.js). The handler sets data-copied /
   data-copy-failed for a couple of seconds; the state is an icon AND a word. */
.emp-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap-target-min);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.emp-copy:hover {
  background: var(--color-primary-soft);
}

.emp-copy__icon--done,
.emp-copy__icon--fail,
.emp-copy__done,
.emp-copy__fail {
  display: none;
}

.emp-copy[data-copied='true'] {
  color: var(--color-success-fg);
  background: var(--color-success-soft);
  border-color: var(--color-success);
}

.emp-copy[data-copied='true'] .emp-copy__icon--idle,
.emp-copy[data-copied='true'] .emp-copy__idle {
  display: none;
}

.emp-copy[data-copied='true'] .emp-copy__icon--done {
  display: inline-block;
}

.emp-copy[data-copied='true'] .emp-copy__done {
  display: inline;
}

.emp-copy[data-copy-failed='true'] {
  color: var(--color-danger-fg);
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

.emp-copy[data-copy-failed='true'] .emp-copy__icon--idle,
.emp-copy[data-copy-failed='true'] .emp-copy__idle {
  display: none;
}

.emp-copy[data-copy-failed='true'] .emp-copy__icon--fail {
  display: inline-block;
}

.emp-copy[data-copy-failed='true'] .emp-copy__fail {
  display: inline;
}

/* ==========================================================================
   4 · THE FORM
   ========================================================================== */

.emp-errors {
  margin: 0;
  padding-inline-start: var(--space-4);
}

/* Two fields to a line, not four: a field here comes with a line of help under it, and four ragged columns of help
   are harder to read than two. One to a line on a phone. */
.emp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
}

@media (max-width: 40rem) {
  .emp-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.emp-form-grid__full {
  grid-column: 1 / -1;
}

/* What is shown and cannot be changed: the username once the person exists, a role that is not the viewer's to give. */
.emp-readonly {
  display: flex;
  align-items: center;
  min-block-size: var(--control-height-md);
  padding-inline: var(--space-3);
  margin: 0;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Beside the role select, level with the control and not with its label. */
.emp-role-about {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block-start: calc(var(--font-size-sm) * var(--line-height-base) + var(--space-1));
}

@media (max-width: 40rem) {
  .emp-role-about {
    padding-block-start: 0;
  }
}

.emp-role-hint {
  min-block-size: 1.5em;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.emp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
}

.emp-facts__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.emp-facts__item dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.emp-facts__item dd {
  margin: 0;
}

/* ==========================================================================
   5 · ROLES AND PERMISSIONS
   Each role in a line, then every area of the product against every role. The matrix is wider than a phone, so
   it scrolls inside its own box, with the area names held at the reading edge while it does.
   ========================================================================== */

.emp-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emp-role {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.emp-role__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.emp-role__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.emp-role__about {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

/* The matrix scrolls inside its own box. Its cells hold visually-hidden text (`sr-only` is absolutely positioned), and
   an absolutely positioned element is only clipped by a scroll container that is positioned too: without this the
   hidden words of a column scrolled out of sight widen the whole page, and the page scrolls sideways on a phone. */
.emp-matrix-wrap,
.emp-table-wrap {
  position: relative;
}

.emp-matrix {
  min-inline-size: 56rem;
}

.emp-matrix th,
.emp-matrix td {
  vertical-align: top;
}

.emp-matrix thead th {
  white-space: normal;
}

.emp-matrix thead th:first-child,
.emp-matrix tbody th[scope='row'] {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-inline-size: 9rem;
  font-weight: var(--font-weight-semibold);
  text-align: start;
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border-subtle);
}

.emp-matrix thead th:first-child {
  z-index: 3;
  background: var(--color-table-head-bg);
}

.emp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.emp-chip {
  padding: 1px var(--space-2);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}