/* FX Utilities — Access Control — styles specific to this app, on top of
   the shared css/styles.css framework every module in this repo uses. */

/* Round 25 — the same widening every other system got, done here separately
   because Access Control does not use the shared sidebar, so the rule in
   css/app-shell.css cannot reach it. 1400 was already wider than most; 1700
   matches the rest so the estate is consistent. */
.content { max-width: 1700px; }

/* Running text does not get wider with the container — a line of help text at
   1700px is harder to read than the same line at 1100. */
.content p.muted { max-width: 105ch; }

.grid-wrap { overflow-x: auto; }

.access-grid { border-collapse: collapse; font-size: 0.88em; white-space: nowrap; }
.access-grid th, .access-grid td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.access-grid th { background: var(--grey-light); color: #444; font-weight: 600; text-align: left; position: sticky; top: 0; }
.access-grid td.person-cell { white-space: normal; min-width: 180px; }
.access-grid td.person-cell .person-name { font-weight: 600; color: var(--navy); }
.access-grid td.person-cell .person-email { font-size: 0.85em; color: var(--grey); }
.access-grid th.system-col, .access-grid td.system-col { text-align: center; }

.level-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.88em;
  font-weight: 600;
}
.level-select.level-none { color: var(--grey); background: var(--grey-light); }
.level-select.level-view { color: #1c5fa8; background: #e8f1fb; }
.level-select.level-edit { color: #1b7f4b; background: #e6f6ec; }
.level-select.level-superuser { color: #a2211a; background: #fbe9e7; }

.add-person-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.add-person-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; font-weight: 600; color: #333; }
.add-person-row input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.95em;
}

.legend-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.85em; color: var(--grey); margin-bottom: 14px; }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

.btn-small { padding: 4px 10px; font-size: 0.82em; }

.system-col .cell-stack { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.btn-roles {
  border: none;
  background: none;
  color: var(--navy);
  font-size: 0.78em;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.btn-roles:hover { color: var(--red); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}
.modal-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.modal-box h3 { margin-top: 0; color: var(--navy); }
.role-checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.92em; }
.scope-section { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.scope-section .scope-label { font-weight: 600; font-size: 0.88em; margin-bottom: 8px; display: block; }
.scope-radio-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.92em; }
.scope-dept-input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 0.9em; margin-top: 4px; }

/* The departments, ticked rather than typed — they come from HR now, so a
   scope cannot name a department that does not exist. It scrolls, because a
   company with thirty departments should not push the Save button off the
   bottom of the dialog. */
.scope-dept-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-top: 4px; }
.scope-dept-row { display: flex; align-items: center; gap: 8px; font-size: 0.92em; padding: 3px 0; }
/* Something chosen before that HR no longer lists. Kept and ticked rather
   than dropped: silently removing an approver's department is worse than
   showing a name that wants tidying up. */
.scope-dept-stray { color: var(--amber); font-size: 0.88em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---- Profiles ------------------------------------------------------
   A profile is a named set of access — "Field Engineer", "Supervisor" —
   that somebody is put on instead of having fourteen systems ticked by
   hand. The same pane and the same editor as a person, because a profile
   IS a set of grants; only the list on the left changes. */
.ac-tabs { display: flex; gap: 2px; margin-bottom: 10px; }
.ac-tab {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--grey-light);
  color: var(--grey);
  font-size: 0.85em;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
}
.ac-tab:first-child { border-radius: 6px 0 0 6px; }
.ac-tab:last-child { border-radius: 0 6px 6px 0; }
.ac-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.ac-profiles-foot { margin-top: 10px; }

.ac-profile-pick { margin: 12px 0 4px; }
.ac-profile-pick label {
  display: block;
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grey);
  margin-bottom: 4px;
}
.ac-profile-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.92em;
}
/* A profile that has been deleted or renamed out from under somebody.
   Kept visible rather than silently blanked: the name is the only clue
   left as to what they were supposed to have. */
.ac-profile-missing { color: var(--amber); font-size: 0.85em; margin: 6px 0 0; }
.ac-profile-actions { display: flex; gap: 8px; }

/* Inherited rather than set here. Quiet, because most of a person's
   access will be inherited once profiles are in use and a loud marker on
   every row would be worse than none. */
.ac-inherited {
  font-weight: 400;
  font-size: 0.82em;
  color: var(--grey);
  margin-left: 6px;
}
.ac-system-inherited .level-select { opacity: 0.75; }
/* The opposite: set against this person, overriding their profile. It is
   also the control that undoes it, because the place somebody notices an
   override is the place they want to remove it. */
.ac-revert {
  border: none;
  background: none;
  font-size: 0.78em;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
}
.ac-revert:hover { color: var(--red); }