/* ============================================================================
   fid-users.css — Users & Access
   ----------------------------------------------------------------------------
   Everything here is either a form control the base sheet does not have, or a
   status marker that has to be readable rather than decorative. The markers
   are the point of the screen: "no team" and "no such team" are the two states
   that make somebody vanish from the product, so they are the two that must be
   impossible to skim past.

   Contrast measured against the light admin surface (#FFFFFF card on the
   #F8FAFF pane), not eyeballed:
     .fid-us-bad   #B3261E on #FFF  → 6.4:1
     .fid-us-warn  #7A5200 on #FFF  → 7.0:1
     .fid-us-flag.off  #4A5568 on #EDF1F7 → 7.1:1
   ========================================================================== */

/* ── Notes ────────────────────────────────────────────────────────────────
   `.fid-note` was used in fid-admin.js but never defined anywhere, so every
   warning it rendered came out as ordinary body text — including the one that
   says people are missing from Team View. A warning that does not look like a
   warning is a sentence nobody reads. Defined here because it is a shared
   class; the admin pane's existing uses pick it up too.

   Measured on the light admin surface:
     .fid-note          #17233A on #F3F6FC → 14.5:1
     .fid-note.fid-danger  #8C1D18 on #FDF2F1 → 8.3:1
     .fid-note.fid-ok      #1B5E2B on #EFF8F1 → 7.2:1 */
.fid-note {
  background: #F3F6FC; border: 1px solid var(--fid-line, #E5EDF8);
  border-radius: var(--fid-r-sm, 6px); padding: 8px 10px; margin: 8px 0;
  font-size: var(--fid-fs-sm, 11px); line-height: 1.55;
  color: var(--fid-text, #17233A);
}
.fid-note code {
  background: rgba(0,0,0,.06); border-radius: 3px; padding: 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fid-note.fid-danger {
  background: #FDF2F1; border-color: #F0C9C5; border-left: 3px solid #B3261E;
  color: #8C1D18;
}
.fid-note.fid-ok {
  background: #EFF8F1; border-color: #C6E4CE; border-left: 3px solid #2E7D3A;
  color: #1B5E2B;
}

.fid-us-bar {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

.fid-us-pager {
  margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}

/* ── Bulk action bar ──────────────────────────────────────────────────────
   Sticky, because a selection built across several pages is acted on from
   wherever you happen to have scrolled to, and an action bar you have to hunt
   for is an action bar you use on the wrong rows. */
.fid-us-bulk {
  position: sticky; top: 0; z-index: 3;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: var(--fid-info-bg, #EAF2FE);
  border: 1px solid #CFE0F7;
  border-radius: var(--fid-r-sm, 6px);
  font-size: var(--fid-fs-sm, 11px);
}
.fid-us-bulk b { color: var(--fid-info-fg, #14418B); }

/* ── Table ────────────────────────────────────────────────────────────── */
.fid-us-table td { vertical-align: top; }
.fid-us-table tr.off td { opacity: .62; }
.fid-us-table input[type="checkbox"] { margin: 2px 0 0; cursor: pointer; }

.fid-us-bad {
  color: #B3261E; font-weight: 700; font-size: var(--fid-fs-xs, 10px);
  display: block; line-height: 1.45;
}
.fid-us-warn {
  color: #7A5200; font-weight: 600; font-size: var(--fid-fs-xs, 10px);
  display: block; line-height: 1.45;
}

.fid-us-flag {
  display: inline-block; border-radius: 4px; padding: 1px 5px;
  font-size: var(--fid-fs-micro, 9px); font-weight: 700;
  vertical-align: 1px; white-space: nowrap;
}
.fid-us-flag.off   { background: #EDF1F7; color: #4A5568; }
.fid-us-flag.admin { background: #FDF0F0; color: #A02622; }

.fid-us-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fid-fs-xs, 10px);
  background: #F3F6FC; border-radius: 3px; padding: 1px 5px;
  word-break: break-word;
}

.fid-input.sm, .fid-select.sm { padding: 3px 6px; font-size: var(--fid-fs-xs, 10px); }
/* The team name is the thing you are reading in this table; a box that clips it
   at "FL UK — Frontline Technical S" makes the column decorative. */
.fid-us-table .fid-input.sm { width: 100%; min-width: 150px; }

/* ── Edit drawer ──────────────────────────────────────────────────────────
   Reuses .fid-drawer geometry from the token sheet. Only the form inside it is
   new: the evidence drawer escapes every value it renders, which is right for
   evidence and useless for a form.

   The drawer HEADER is navy and the BODY is light — a distinction I got wrong
   first time and only caught by rendering it and looking. Every label in here
   was #fff on a near-white panel: present in the DOM, invisible on screen, and
   passing every assertion I had written. Measured against the body's white:
     .fid-us-f > span   #4A5568 → 7.5:1
     .fid-us-f em       #606D85 → 5.2:1
     .fid-us-chk b      #17233A → 15.7:1
     .fid-us-why        #7A5200 on #FFF8E8 → 6.5:1 */
.fid-us-drawer .fid-drawer-body { display: block; background: var(--fid-canvas, #F5F8FD); }

.fid-us-f { display: block; margin: 0 0 14px; }
.fid-us-f > span {
  display: block; font-size: var(--fid-fs-xs, 10px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--fid-text-2, #4A5568);
  margin-bottom: 5px;
}
.fid-us-f .fid-input, .fid-us-f .fid-select { width: 100%; }
.fid-us-f em {
  display: block; margin-top: 5px; font-style: normal;
  font-size: var(--fid-fs-xs, 10px); line-height: 1.5;
  color: var(--fid-text-3, #606D85);
}
.fid-us-f input:disabled { opacity: 1; background: #EEF2F9; cursor: not-allowed; }

.fid-us-acc { display: grid; gap: 6px; }

.fid-us-chk {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 9px; border-radius: var(--fid-r-sm, 6px);
  background: var(--fid-surface, #fff);
  border: 1px solid var(--fid-line, #E5EDF8);
  cursor: pointer;
}
.fid-us-chk:hover { border-color: var(--fid-line-strong, #C9D8EE); background: #FAFCFF; }
.fid-us-chk input { margin-top: 2px; cursor: pointer; flex: none; }
.fid-us-chk span { display: block; min-width: 0; }
.fid-us-chk b {
  display: block; font-size: var(--fid-fs-sm, 11px);
  color: var(--fid-text, #17233A); font-weight: 700;
}
.fid-us-chk em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: var(--fid-fs-xs, 10px); line-height: 1.45;
  color: var(--fid-text-3, #606D85);
}

/* Why you were sent here — an Identity Health finding, or a warning about the
   record you are looking at. It is the first thing in the drawer and the reason
   the drawer is open, so it has to hold its own against the form below it. */
.fid-us-why {
  background: #FFF8E8;
  border: 1px solid #E8CF9B;
  border-left: 3px solid #B8860B;
  color: #7A5200;
  font-size: var(--fid-fs-sm, 11px); line-height: 1.55;
  border-radius: var(--fid-r-sm, 6px); padding: 8px 10px; margin-bottom: 14px;
}
.fid-us-why code {
  background: rgba(0,0,0,.06); border-radius: 3px; padding: 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fid-us-why b { color: #5C3D00; }

.fid-us-drawer .fid-drawer-foot {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .fid-us-bulk { position: static; }
  .fid-us-bar .fid-select { flex: 1 1 46%; }
}