/* Admin: overview, people, security log. Loaded in the order web/index.html lists them; the order is the cascade. */
/* ---------- admin ---------- */
/* The five equal stat tiles made "ADDED TODAY: 0" look as urgent as a verification failure.
   As a strip above the tabs they read as context for the page rather than its first section. */
.adm-strip { padding:var(--s-4) var(--s-5); margin-bottom:var(--s-4); }
.adm-strip .stats { margin:0; }
#page-admin .subtabs { margin-bottom:var(--s-5); }
/* An unresolved problem inside a group is visible from every other group. */
.adm-dot { display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%;
           background:var(--bad); vertical-align:middle; }
/* Pending count on a tab (Cases Deletion Requests). */
.adm-count { display:inline-block; min-width:18px; height:18px; margin-left:7px; padding:0 5px; border-radius:999px;
             background:var(--bad); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; vertical-align:middle; }


/* ════════════════════════════════════════════════════════════════════════════════════════════
   FEATURE STYLES — People tab and Security log.
   These belong to the admin features, NOT to the reverted Apple craft layer. They were
   appended after that layer and so fell inside its deletion range in ba95f3a, which left the
   Security log rendering as unstyled stacked fields and ran '1 user online' straight into the
   address and duration with no spacing. Restored here, minus the one entrance animation.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
/* ---------- admin: people ---------- */
/* No max-height. A panel-height scroll box inside a scrolling page is the thing that made this
   table feel cramped; the page scrolls, the table does not. table-layout:fixed makes the colgroup
   percentages binding, which is what actually prevents the horizontal scrollbar. */
.users-fit { max-height:none; overflow:visible; }
.users-fit table { table-layout:fixed; width:100%; min-width:0; }
.users-fit td, .users-fit th { overflow:hidden; text-overflow:ellipsis; }
#usersTbl td.uexp { padding-right:0; text-align:center; }
#usersTbl td.uexp .btn { padding:2px 6px; line-height:1; min-width:0; }
.uident { min-width:0; }
.uident .uemail { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uident .hint { display:block; font-weight:400; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#usersTbl td.ustatus { white-space:nowrap; }
#usersTbl td.ustatus .btn { margin-left:6px; }
.uaccess { white-space:normal; }
.uchip { display:inline-block; margin:1px 4px 1px 0; padding:2px 7px; border-radius:var(--r-pill, 999px);
  background:var(--neutral-soft); color:var(--muted); font-size:11px; white-space:nowrap; }
.uchip-ok { background:var(--ok-soft); color:var(--ok); }
.uchip-all { background:var(--accent-soft, #eaf0ff); color:var(--accent, #2f5bd7); }
.uchip-off { background:var(--warn-soft); color:var(--warn); }
#usersTbl tr.urow.is-open > td { background:var(--accent-soft); }
#usersTbl tr.exprow > td { padding:0; background:var(--accent-soft); }
.ucard { padding:14px 16px 16px; display:flex; flex-direction:column; gap:14px; }
.uc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px 20px; }
.uc-sec { padding-top:12px; border-top:1px solid var(--line-soft); }
.uc-tabs { display:flex; flex-wrap:wrap; gap:2px 4px; }
.uc-danger { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-top:12px;
  border-top:1px solid var(--line-soft); }
.uc-danger-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-right:auto; }

/* ---------- admin: security log ---------- */
.online-strip { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin:2px 0 12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); }
.online-strip b { font-size:13px; }
.online-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--r-pill, 999px);
  background:var(--ok-soft); color:var(--ok); font-size:12px; white-space:nowrap; }
.online-chip::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.online-chip .odur { opacity:.75; font-variant-numeric:tabular-nums; }
.audit-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:10px; }
.audit-filters .field { margin:0; }
.audit-filters input, .audit-filters select { font-size:12.5px; }
/* Actions stay one unit and sit at the end of the row. margin-left:auto eats the slack, so on a
   wide screen they finish the filter row and on a narrow one they wrap together rather than
   splitting across two lines with Clear stranded on its own. */
.audit-actions { display:flex; align-items:flex-end; gap:8px; margin-left:auto; }
/* Below the point where the row can hold both, actions take their own full-width line and align
   left with the filters instead of floating off to the right on their own. */
@media (max-width:1100px){ .audit-actions { margin-left:0; flex:1 0 100%; } }
#auditTbl td.adur { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- admin: alert recipients ---------- */
.ar-send { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.ar-send > span { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.ar-topics { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.ar-topic { display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
#arTbl th { white-space:normal; max-width:150px; }
#arTbl td input[type=text], #arTbl td input[type=email] { width:100%; min-width:140px; }
#arTbl td input[type=checkbox] { margin:0 auto; display:block; }
.ar-paused { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; color:#854F0B; background:#faeeda; }
.ar-warn { margin:0 0 14px; padding:10px 14px; border-radius:var(--r-sm); font-size:13px; line-height:1.5; color:#854F0B; background:#faeeda; }
/* The global table cell clips at 220px with an ellipsis; an address or name here must show in full. */
#arTbl tbody td { max-width:none; overflow:visible; white-space:normal; overflow-wrap:anywhere; }
#arTbl tbody td:last-child { white-space:nowrap; }