/* lib-portal-access.css — the effective-access panel, shared by the two
 * places portal contacts are administered: the standalone /portal-admin page
 * and the Customer Portal tool inside Peep Light. Both render the same panel
 * from lib-portal-access.js, so they get their look from here rather than
 * each keeping a copy.
 *
 * Peep Light's Tailwind is a PURGED build, so these are plain classes with
 * plain declarations — a utility class invented here would silently do
 * nothing there.
 */

.access {
  background: var(--page);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
  color: var(--ink);
  font-size: 13px;
  /* The panel opens as a full-width row under a contact, inside a grant
     matrix wide enough to scroll sideways (one column per grant). Without
     this it scrolls away with the columns and you end up reading the middle
     of it. Pinned left, it stays put while the ticks scroll behind it. */
  position: sticky;
  left: 0;
  max-width: min(1080px, calc(100vw - 72px));
}
.access h4 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft);
}
.access-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* One row per portal page: does this contact get it, and if not, why not. */
.pglist { display: grid; gap: 3px; }
.pg {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; padding: 3px 0;
  border-bottom: 1px dashed var(--hairline);
}
.pg:last-child { border-bottom: 0; }
.pg .nm { font-weight: 700; min-width: 104px; }
.pg .why { color: var(--ink-soft); font-size: 11.5px; }
.pg-yes .nm { color: var(--good); }
.pg-no  .nm { color: var(--ink-soft); font-weight: 600; }
/* Amber, not grey: a page missing because of a company switch or an unset
   dock is a page the admin probably MEANT to grant — worth looking twice at,
   unlike one that simply was never ticked. */
.pg-no.blk-switch .nm,
.pg-no.blk-dock   .nm { color: var(--warn); }

/* How much data actually resolves to this customer — the difference between
   "granted" and "will show them anything". */
.scope { display: flex; flex-wrap: wrap; gap: 8px; }
.scope div {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 6px 11px;
  font-size: 12px;
  color: var(--ink-soft);
}
.scope b {
  display: block;
  font-size: 16px; font-weight: 800;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.access-notes { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.access-notes li {
  font-size: 12px;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 6px 10px;
}
.access .masked { color: var(--warn); font-size: 11.5px; }
.access .dim { color: var(--ink-soft); font-size: 11.5px; }