/* ============================================================================
   40-admin-admins.css — /admin/admins, the panel-access roster.

   The page has one visual job beyond looking tidy: make the OWNER / ADMIN
   distinction impossible to miss. An owner comes from the ADMIN_IDS env var and
   cannot be removed here; an admin was granted and can. Those rows do very
   different things when you click them, so they must not look alike.
   ============================================================================ */

.adm-am{ display:flex; flex-direction:column; gap:18px; }

/* ---------- headline counts ---------- */
.adm-am-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
}
.adm-am-stat{
  padding:14px 16px; border-radius:13px;
  background:var(--adm-card); border:1px solid var(--adm-border);
}
.adm-am-stat b{
  display:block; font-size:26px; font-weight:800; line-height:1.1;
  color:var(--adm-text);
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
}
.adm-am-stat span{
  display:block; margin-top:3px; font-size:14px; font-weight:600;
  color:var(--adm-muted);
}

/* ---------- roster rows ---------- */
.adm-am-list{ display:flex; flex-direction:column; gap:8px; }
.adm-am-row{
  display:grid; grid-template-columns:48px minmax(0,1fr) auto;
  gap:14px; align-items:center;
  padding:13px 15px; border-radius:13px;
  background:var(--adm-card); border:1px solid var(--adm-border);
  animation:admAmIn .3s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i, 0) * 30ms);
  transition:border-color .18s, background .18s;
}
.adm-am-row:hover{ border-color:var(--adm-border-hi); background:var(--adm-card-hi); }
/* Hidden start state belongs in the keyframes: a row parked at opacity:0 by a
   bare selector is a hole in the layout if the animation never runs. */
@keyframes admAmIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}
/* Owners get the gold edge — the same language the lifetime pill uses in
   Finance, i.e. "permanent, not something you change from a screen". */
.adm-am-row.is-owner{ box-shadow:inset 3px 0 0 var(--adm-accent-2); }

.adm-am-av{
  position:relative;
  width:46px; height:46px; border-radius:13px; flex:none;
  display:grid; place-items:center;
  font-size:17px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, #64748b, #94a3b8);
}
/* "is this key still in use" — the presence dot answers it at a glance. */
.adm-am-pres{
  position:absolute; right:-2px; bottom:-2px;
  width:11px; height:11px; border-radius:50%;
  background:var(--adm-success);
  border:2px solid var(--adm-card);
  animation:admAmPulse 2.2s ease-out infinite;
}
@keyframes admAmPulse{
  0%  { box-shadow:0 0 0 0   rgba(52,211,153,.5); }
  70% { box-shadow:0 0 0 6px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0   rgba(52,211,153,0); }
}
.adm-am-seen{
  margin-left:10px; padding-left:10px;
  border-left:1px solid var(--adm-border);
  font-size:13.5px; font-weight:600; color:var(--adm-muted);
}
.adm-am-seen.is-live{ color:var(--adm-success); font-weight:750; }
.adm-am-row.is-owner .adm-am-av{
  color:#1b1005;
  background:linear-gradient(135deg, var(--adm-accent-2), #f59e0b);
  box-shadow:0 6px 18px -8px rgba(251,191,36,.85);
}

.adm-am-who{ min-width:0; }
.adm-am-name{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:16.5px; font-weight:750; color:var(--adm-text);
}
.adm-am-tag{
  padding:1px 7px; border-radius:5px; flex:none;
  font-size:11.5px; font-weight:800; letter-spacing:.6px;
  color:var(--adm-muted); background:rgba(255,255,255,.06);
  border:1px solid var(--adm-border);
}
.adm-am-tag.is-owner{
  color:var(--adm-accent-2); background:rgba(251,191,36,.14);
  border-color:rgba(251,191,36,.34);
}
.adm-am-tag.is-you{
  color:var(--adm-success); background:rgba(52,211,153,.12);
  border-color:rgba(52,211,153,.3);
}
.adm-am-sub{
  display:flex; align-items:center; flex-wrap:wrap; margin-top:3px;
  font-size:14px; color:var(--adm-muted);
}
.adm-am-sep{
  width:3px; height:3px; margin:0 8px; border-radius:50%;
  background:currentColor; opacity:.45; flex:none;
}
.adm-am-id{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13.5px; }
.adm-am-warn{ color:var(--adm-warning); font-weight:650; }
.adm-am-meta{ margin-top:4px; font-size:13.5px; color:var(--adm-muted); opacity:.75; }

.adm-am-act{ flex:none; }
/* Not a disabled button. A greyed control invites a click to find out why —
   and the reason IS the answer, so it goes on the label. */
.adm-am-locked{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:6px 11px; border-radius:9px;
  font-size:13.5px; font-weight:700;
  color:var(--adm-muted); background:rgba(255,255,255,.04);
  border:1px dashed var(--adm-border);
}
.adm-am-btn{
  height:36px; padding:0 14px; border-radius:9px; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:700;
  color:var(--adm-muted); background:rgba(255,255,255,.05);
  border:1px solid var(--adm-border);
  transition:color .15s, background .15s, border-color .15s;
}
.adm-am-btn.is-danger{ color:var(--adm-danger); border-color:rgba(248,113,134,.28); }
.adm-am-btn.is-danger:hover{ background:rgba(248,113,134,.16); border-color:var(--adm-danger); }

/* ---------- add-an-admin panel ---------- */
.adm-am-add{
  padding:18px; border-radius:14px;
  background:var(--adm-card); border:1px solid var(--adm-border-hi);
}
.adm-am-add-head{ margin-bottom:13px; }
.adm-am-add-head b{ display:block; font-size:17px; color:var(--adm-text); }
.adm-am-add-head span{
  display:block; margin-top:4px; font-size:15px; line-height:1.55;
  color:var(--adm-muted);
}
.adm-am-search{
  display:flex; align-items:center; gap:10px;
  height:48px; padding:0 15px; border-radius:12px;
  background:rgba(0,0,0,.22); border:1px solid var(--adm-border);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.adm-am-search:focus-within{
  border-color:var(--adm-border-hi); background:rgba(0,0,0,.3);
  box-shadow:0 0 0 3px rgba(255,138,91,.1);
}
.adm-am-search-ico{ font-size:15px; opacity:.6; flex:none; }
.adm-am-search input{
  flex:1; min-width:0; height:100%; border:none; outline:none; background:none;
  font-family:inherit; font-size:16px; font-weight:600; color:var(--adm-text);
}
.adm-am-search input::placeholder{ color:var(--adm-muted); font-weight:500; }

.adm-am-results{ display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.adm-am-results:empty{ display:none; }
.adm-am-hint{ font-size:14.5px; color:var(--adm-muted); padding:4px 2px; line-height:1.55; }

.adm-am-cand{
  display:grid; grid-template-columns:38px minmax(0,1fr) auto;
  gap:11px; align-items:center; width:100%; text-align:left; cursor:pointer;
  padding:9px 12px; border-radius:11px;
  background:rgba(255,255,255,.04); border:1px solid var(--adm-border);
  font-family:inherit;
  transition:border-color .15s, background .15s, transform .15s;
}
.adm-am-cand:hover{
  border-color:var(--adm-border-hi); background:rgba(255,138,91,.09);
  transform:translateX(2px);
}
.adm-am-cand-av{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  font-size:14px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, #64748b, #94a3b8);
}
.adm-am-cand-who{ min-width:0; display:block; }
.adm-am-cand-who b{
  display:flex; align-items:baseline; gap:8px;
  font-size:15.5px; font-weight:700; color:var(--adm-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adm-am-cand-live,
.adm-am-cand-seen{ font-style:normal; font-size:13px; font-weight:650; flex:none; }
.adm-am-cand-live{ color:var(--adm-success); }
.adm-am-cand-seen{ color:var(--adm-muted); opacity:.8; }
.adm-am-cand-who span{ display:block; font-size:13.5px; color:var(--adm-muted); }
.adm-am-cand-go{
  flex:none; font-size:14px; font-weight:750; color:var(--adm-accent);
  opacity:0; transition:opacity .15s;
}
.adm-am-cand:hover .adm-am-cand-go{ opacity:1; }

/* ---------- notes ---------- */
.adm-am-note,
.adm-am-foot{
  padding:13px 16px; border-radius:12px;
  font-size:14.5px; line-height:1.6; color:var(--adm-muted);
  background:rgba(255,255,255,.03); border:1px solid var(--adm-border);
}
.adm-am-note b{ color:var(--adm-text); }
.adm-am-note code,
.adm-am-foot code{
  padding:1px 5px; border-radius:5px;
  background:rgba(255,255,255,.07);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13.5px;
  color:var(--adm-text);
}

/* ---------- responsive ---------- */
@media (max-width: 700px){
  /* .adm-am-name wraps here, so the seen-line's left divider stops separating
     anything and reads as a stray tick at the start of its own line. */
  .adm-am-seen{ margin-left:0; padding-left:0; border-left:none; }
  .adm-am-stats{ grid-template-columns:1fr; }
  .adm-am-row{ grid-template-columns:48px minmax(0,1fr); row-gap:10px; }
  .adm-am-act{ grid-column:2; }
  .adm-am-btn{ width:100%; }
  .adm-am-search input{ font-size:18px; }   /* < 16px makes iOS zoom on focus */
  .adm-am-cand-go{ opacity:1; font-size:13px; }  /* no hover on touch */
}

/* ---------- light theme ---------- */
:root[data-theme="light"] .adm-am-search{ background:rgba(30,40,80,.04); }
:root[data-theme="light"] .adm-am-search:focus-within{ background:rgba(30,40,80,.06); }
:root[data-theme="light"] .adm-am-cand,
:root[data-theme="light"] .adm-am-btn,
:root[data-theme="light"] .adm-am-locked,
:root[data-theme="light"] .adm-am-tag,
:root[data-theme="light"] .adm-am-note,
:root[data-theme="light"] .adm-am-foot{ background:rgba(30,40,80,.045); }
:root[data-theme="light"] .adm-am-note code,
:root[data-theme="light"] .adm-am-foot code{ background:rgba(30,40,80,.08); }
/* --adm-accent-2 (#fbbf24) is 1.67:1 on a light card — the OWNER tag that has
   to be the most legible thing here was the least. amber-800 clears AA at the
   9.5px bold this tag renders at. */
:root[data-theme="light"] .adm-am-tag.is-owner{
  color:#92400e; background:rgba(180,83,9,.10); border-color:rgba(180,83,9,.3);
}
/* --adm-muted (#64748b) on the tinted chip lands at 4.28:1 — just under. */
:root[data-theme="light"] .adm-am-tag,
:root[data-theme="light"] .adm-am-locked{ color:#475569; }
:root[data-theme="light"] .adm-am-row.is-owner{ box-shadow:inset 3px 0 0 #d97706; }

/* ============================================================================
   SHARED ICON RULES  (see js/modules/admin/04h-admin-icons.js)

   Lives at the end of the last-loaded admin sheet so it outranks any per-page
   rule that used to compensate for an emoji's odd metrics.
   ============================================================================ */

/* Optical alignment: an emoji sat on the text baseline with its own generous
   side bearings, so every call site got vertical centring for free. A stroked
   SVG has none of that — without this it rides high and hugs the next word. */
.adm-ico-svg{
  display:inline-block; vertical-align:-0.18em;
  flex:none; overflow:visible;
}
/* A slot only exists to carry an icon, so it must not add a line box of its own. */
.adm-ico-slot{ display:inline-flex; align-items:center; flex:none; line-height:0; }

/* Anywhere an icon leads a label, the container owns the spacing. Emoji were
   separated by a literal space in the string, which is 4px at any size and
   looked cramped once the type grew. */
.adm-section-head h4,
.fin-tab,
.adm-pill,
.fin-st-btn,
.adm-am-btn,
.adm-am-locked,
.adm-ur-seg,
.adm-ur-chip,
.fin-st-acc,
.adm-am-tag{
  display:inline-flex; align-items:center; gap:7px;
}
/* h4 is a block-level section title — inline-flex would shrink-wrap it. */
.adm-section-head h4{ display:flex; }

/* Icon-only buttons: square, centred, no text metrics involved. */
.fin-st-btn.is-ico{ padding:0; width:38px; justify-content:center; }

/* The stroke reads heavy at small sizes on a light background and thin on a
   dark one — nudge each way so the weight looks identical in both themes. */
.adm-ico-svg{ stroke-width:1.8; }
:root[data-theme="light"] .adm-ico-svg{ stroke-width:1.9; }

/* An icon standing in for a button inside running text ("or [cash] if they
   actually paid") needs the same optical treatment as the button it refers to. */
.fin-hint-ico{ display:inline-flex; vertical-align:-.2em; opacity:.85; }
.fin-st-note{ display:flex; align-items:center; gap:6px; }
.adm-am-add-head b{ display:flex; align-items:center; gap:8px; }