/*
 * A-31 "Job roles & levels" (module R, docs/PHASE2.md §18.3) on A-23's page: five columns — Job
 * role, Level, Usually reports to, People, actions — 60px rows; the Director row first (Level 1,
 * "Access level · fixed"); the row in Edit gets a blue ring with the name, a Level select, the
 * Usually reports to picker and Cancel / Save, and a refused level lists the people under it.
 */
@layer pages {
  .rl-levels .job-roles-list { --list-cols: minmax(0, 1.4fr) 120px minmax(0, 1.6fr) 100px 150px; }
  .rl-levels .job-role-row,
  .rl-director-row { min-height: 60px; }

  .job-role-row__level,
  .job-role-row__usual { min-width: 0; display: flex; align-items: center; gap: 8px; }
  .job-role-row__usual.is-none,
  .rl-director-row__top,
  .rl-director-row__end { color: var(--color-neutral-700); }
  .rl-director-row__end { justify-content: flex-end; }
  .rl-director-row .job-role-row__people { color: var(--color-text); }

  .job-role-row__edit {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 6px;
    color: var(--color-blue);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
  }
  .job-role-row__edit:hover { color: var(--color-blue-deep); }

  /* Edit: the form's fields are the row's cells. */
  .job-role-row__form { display: contents; }
  .rl-levels .job-role-row:has(.job-role-row__form) {
    align-items: start;
    padding-block: 10px;
    box-shadow: 0 0 0 2px var(--color-blue);
  }
  .job-role-row:has(.job-role-row__form) .job-role-row__people,
  .job-role-row:has(.job-role-row__form) .job-role-row__end { align-self: center; }
  .job-role-row__level.is-editing,
  .job-role-row__usual.is-editing { display: block; }
  .rl-level-select {
    min-height: 48px;
    padding-left: 16px;
    padding-right: 10px;
    border: 2px solid var(--color-blue);
  }
  .rl-level-select[aria-invalid="true"] { border-color: var(--color-err); }
  .job-role-row__usual .token-field { min-height: 48px; padding: 6px 8px; }
  .job-role-row__usual .token { height: 30px; }
  .job-role-row__usual .token-input { min-width: 90px; height: 30px; font-size: 13.5px; }
  .job-role-row__problems { grid-column: 1 / -1; margin-top: 8px; }
  .job-role-row__conflicts { margin: 4px 0 0; padding-left: 18px; }

  .rl-levels__notice { margin-top: 18px; }

  @media (max-width: 1199px) {
    .rl-levels .job-roles-list { --list-cols: minmax(0, 1.2fr) 100px minmax(0, 1.5fr) 70px 120px; }
  }

  @media (max-width: 1023px) {
    .rl-levels .job-roles-list { --list-cols: minmax(0, 1fr) 90px minmax(0, 1.2fr) 60px 110px; }
  }

  /* Phones: each role is a card — name and level, usually reports to and people, then the actions. */
  @media (max-width: 767px) {
    .rl-levels .job-roles-list .job-role-row,
    .rl-levels .rl-director-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4px 12px;
    }
    .rl-levels .job-role-row__name,
    .rl-levels .rl-director-row__name { grid-column: 1; }
    .rl-levels .job-role-row__level { grid-column: 2; grid-row: 1; justify-self: end; }
    .rl-levels .job-role-row__usual,
    .rl-levels .job-role-row__people { grid-column: 1 / -1; font-size: 12.5px; }
    .rl-levels .job-role-row__end,
    .rl-levels .rl-director-row__end { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
    .rl-levels .job-role-row:has(.job-role-row__form) .job-role-row__level { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
  }
}