/* =============================================================================
   mh-admin.css  -  Administration > User Management (read-only staff directory).
   Renders inside the REAL app shell (MainLayout .content), so this file adds ONLY
   the section's own component classes - it does NOT restyle the shell, sidebar,
   topbar, or the shared toolbar (.cl-head / .cl-srchbar / .mh-sel / .cl-switch live
   in mh-theme.css and are reused as-is). Everything is scoped under .mh-app to match
   the app convention; light + dark both via the shared tokens. Plain hyphens only.
   ============================================================================= */

/* identifiers (usernames / IDs) in mono */
.mh-app .mono { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--mh-muted); letter-spacing:-.01em; }

/* ===== admin shell: header + tabs + helper + Approval Center entry ===== */
.mh-app .ad-headrow { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:4px 2px 18px; }
.mh-app .ad-head h1 { font-size:23px; font-weight:800; margin:0 0 4px; letter-spacing:-.01em; color:var(--mh-ink); }
.mh-app .ad-head p { font-size:13.5px; color:var(--mh-muted); margin:0; }
/* Unified to the search bar's "Inset Cool Field" (.bigbar.b14 in mh-theme.css): same cool
   fill, hairline, inset shadow + lift-to-white on hover, so Feedback / Approval Center / the
   Administration back button read as ONE family with the search + toolbar controls. */
.mh-app .ad-approvals { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 17px; border-radius:999px;
  border:1px solid rgba(40,60,80,.08); background:#DFE4EA; color:var(--mh-ink); font-family:inherit; font-size:13px;
  font-weight:700; cursor:pointer; box-shadow:inset 0 1px 2px rgba(40,60,80,.10);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; white-space:nowrap; }
.mh-app .ad-approvals:hover { background:#fff; border-color:rgba(40,60,80,.16); box-shadow:0 10px 28px rgba(40,60,80,.12); }
.mh-app .ad-approvals svg { width:16px; height:16px; color:var(--mh-ctrl-ico); }
/* dark: flip to the dark control fill + lift-to-surface, exactly like .bigbar.b14 in dark */
body.dark .mh-app .ad-approvals { background:var(--mh-ctrl-fill); border-color:var(--mh-line); box-shadow:inset 0 1px 2px rgba(0,0,0,.22); }
body.dark .mh-app .ad-approvals:hover { background:var(--mh-surface); border-color:var(--mh-ctrl-focus-border); box-shadow:var(--mh-ctrl-focus-ring); }
/* clear gap between Feedback + Approval Center (out-specifies the mh-feedback.css default) */
.mh-app .ad-headrow .ad-headactions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.mh-app .ad-tabs { display:flex; gap:4px; border-bottom:1px solid rgba(78,124,114,.20); margin:0 0 18px; }
.mh-app .ad-tab { position:relative; border:none; background:none; font-family:inherit; cursor:pointer;
  font-size:13.5px; font-weight:700; color:var(--mh-muted); padding:11px 16px 13px; border-radius:10px 10px 0 0;
  transition:color .15s, background .15s; display:inline-flex; align-items:center; gap:8px; }
.mh-app .ad-tab svg { width:16px; height:16px; }
.mh-app .ad-tab:not(:disabled):hover { color:var(--mh-ink); background:var(--mh-ctrl-fill); }
.mh-app .ad-tab:disabled { cursor:default; opacity:.85; }
.mh-app .ad-tab.on { color:var(--mh-green-d); }
body.dark .mh-app .ad-tab.on { color:var(--mh-sage-300); }
.mh-app .ad-tab.on::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:3px;
  border-radius:3px 3px 0 0; background:var(--mh-green); }
body.dark .mh-app .ad-tab.on::after { background:var(--mh-sage-400); }
.mh-app .ad-tab-soon { font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mh-muted); background:var(--mh-ctrl-fill); border-radius:999px; padding:2px 7px; }

.mh-app .ad-helper { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mh-muted); margin:0 2px 16px; }
.mh-app .ad-helper svg { width:15px; height:15px; flex:none; color:var(--mh-ctrl-ico); }

/* ===== admin filter toolbar (Users / Audit / Errors) =====
   One clean row: search pinned left, filters + view toggle to the right, with clear
   space before the content below. (.cl-head alone only sets align-items; the flex base
   normally comes from .toolbar, which this section does not use - so .ad-bar owns the row
   layout.) All fields reuse the app's shared field components, so they share one style. */
.mh-app .ad-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 2px 22px; }
/* Jul 3 reorder: view toggle far LEFT, filters next, SEARCH anchored far RIGHT - one
   consistent order across Users / Audit Trail / Errors. Done with flex `order` so the
   markup is untouched; the search's margin-left:auto pushes it to the right edge. */
.mh-app .ad-bar .cl-switch { order:1; }
.mh-app .ad-bar .mh-sel, .mh-app .ad-bar .ad-daterange { order:2; }
.mh-app .ad-bar .cl-srchbar { order:9; margin:0 0 0 auto; }
@media (max-width:760px) {
  .mh-app .ad-bar .cl-srchbar { margin:0; flex:1 1 100%; max-width:none; }
}

/* ===== shared bits: avatar, role badge, status dot, profile + entra markers ===== */
.mh-app .av { border-radius:14px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800;
  overflow:hidden; position:relative; background:linear-gradient(160deg, var(--mh-sage-400), var(--mh-green-d)); }
.mh-app .av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.mh-app .role { font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
/* role badge hue by role (matches the card accent stripe): Admin = darker pine (solid),
   Staff = clay, Viewer = pine. Admin-only classes, so this is consistent across the card,
   list row and side panel without touching any other surface. */
.mh-app .role-admin { color:#fff; background:var(--mh-green-d); }
.mh-app .role-staff { color:var(--mh-clay-d); background:rgba(201,123,90,.16); }
body.dark .mh-app .role-staff { color:#E5B59E; background:rgba(201,123,90,.24); }
.mh-app .role-viewer { color:var(--mh-green-d); background:rgba(78,124,114,.14); }
body.dark .mh-app .role-viewer { color:var(--mh-sage-300); background:rgba(78,124,114,.22); }

.mh-app .status .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.mh-app .st-active { color:var(--mh-green-d); background:rgba(78,124,114,.14); }
body.dark .mh-app .st-active { color:var(--mh-sage-300); }
.mh-app .st-inactive { color:var(--mh-muted); background:var(--mh-ctrl-fill); }

.mh-app .pmark { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; }
.mh-app .pmark svg { width:14px; height:14px; }
.mh-app .pmark.ok { color:var(--mh-green-d); }
body.dark .mh-app .pmark.ok { color:var(--mh-sage-300); }
.mh-app .pmark.pending { color:var(--mh-warning-d); }
body.dark .mh-app .pmark.pending { color:var(--mh-warning); }

/* ===== Users - scannable-row card (card view) =====
   Circular avatar (subtle ring) | id block (name, title, role badge) | left-divided stats
   grid (Active, Profile, Sign-in, Account linked). Each stat sits on its own line - nothing
   overlaps. Cool hairline (--mh-line-cool) on the cool admin surface. Light + dark via the
   shared tokens. Role accent stripe: Admin darker pine, Staff clay, Viewer pine. */
.mh-app .adu-list { display:flex; flex-direction:column; gap:12px; }
.mh-app .adu { position:relative; display:flex; align-items:center; gap:16px; width:100%; text-align:left; font-family:inherit;
  background:var(--mh-surface); border:1px solid rgba(78,124,114,.22); border-radius:16px; padding:16px 20px; overflow:hidden;
  cursor:pointer; box-shadow:var(--mh-shadow-sm); transition:transform .14s, box-shadow .14s, border-color .14s; }
.mh-app .adu:hover { transform:translateY(-1px); box-shadow:var(--mh-shadow); border-color:var(--mh-ctrl-focus-border); }
.mh-app .adu.is-inactive { opacity:.6; }
.mh-app .adu.is-inactive:hover { opacity:1; }
.mh-app .adu::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--mh-green); }
.mh-app .adu.acc-admin::before { background:var(--mh-green-d); }
.mh-app .adu.acc-staff::before { background:var(--mh-clay); }
.mh-app .adu.acc-viewer::before { background:var(--mh-green); }
/* circular avatar with subtle ring */
.mh-app .adu .av { width:54px; height:54px; font-size:17px; border-radius:50%; margin-left:4px; flex:none;
  box-shadow:0 0 0 3px var(--mh-surface), 0 0 0 4.5px rgba(78,124,114,.22); }
/* id block */
.mh-app .adu-id { flex:0 0 156px; min-width:0; }
.mh-app .adu-name { font-size:15.5px; font-weight:800; color:var(--mh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mh-app .adu-title { font-size:12px; color:var(--mh-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.mh-app .adu-id .role { margin-top:9px; }
/* left-divided stats grid: each stat on its own line, no overlap */
.mh-app .adu-stats { flex:1; min-width:0; display:grid; grid-template-columns:minmax(150px, 200px) auto; gap:11px 28px;
  align-content:center; padding-left:20px; border-left:1px solid rgba(78,124,114,.22); }
.mh-app .adu-stats > * { justify-self:start; align-self:center; min-width:0; max-width:100%; }
.mh-app .adu-meta { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--mh-ink); min-width:0; }
.mh-app .adu-meta svg { width:15px; height:15px; flex:none; color:var(--mh-ctrl-ico); }
.mh-app .adu-meta span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mh-app .adu-meta.muted { color:var(--mh-muted); font-weight:500; }
.mh-app .adu-meta.muted svg { color:var(--mh-muted); }
@media (max-width:880px) {
  .mh-app .adu { flex-wrap:wrap; }
  .mh-app .adu-stats { grid-template-columns:1fr; flex-basis:100%; padding-left:0; padding-top:12px;
    border-left:none; border-top:1px solid rgba(78,124,114,.22); }
}

/* ===== list (table-like) view ===== */
.mh-app .um-rows { display:flex; flex-direction:column; gap:8px; }
.mh-app .um-rhead { display:grid; grid-template-columns:2.4fr 1fr 1fr 1.1fr 1fr; gap:14px; padding:4px 16px;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mh-muted); }
.mh-app .um-row { display:grid; grid-template-columns:2.4fr 1fr 1fr 1.1fr 1fr; gap:14px; align-items:center;
  background:var(--mh-surface); border:1px solid rgba(78,124,114,.22); border-radius:13px; padding:11px 16px;
  cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; box-shadow:var(--mh-shadow-sm); text-align:left; font-family:inherit; width:100%; }
.mh-app .um-row:hover { transform:translateY(-1px); box-shadow:var(--mh-shadow); border-color:var(--mh-ctrl-focus-border); }
.mh-app .um-row.is-inactive { opacity:.62; }
.mh-app .um-row.is-inactive:hover { opacity:1; }
.mh-app .umr-person { display:flex; align-items:center; gap:11px; min-width:0; }
.mh-app .umr-person .av { width:40px; height:40px; font-size:13.5px; }
.mh-app .umr-id { min-width:0; }
.mh-app .umr-name { font-size:14px; font-weight:800; color:var(--mh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mh-app .umr-sub { font-size:11.5px; color:var(--mh-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.mh-app .umr-cell { font-size:12.5px; color:var(--mh-ink); min-width:0; }
.mh-app .umr-cell.muted { color:var(--mh-muted); }
.mh-app .umr-seen.never { font-style:italic; color:var(--mh-muted); }
@media (max-width:1000px) {
  .mh-app .um-rhead, .mh-app .um-row { grid-template-columns:2fr 1fr 1fr; }
  .mh-app .um-rhead .h-seen, .mh-app .um-rhead .h-profile, .mh-app .um-row .c-seen, .mh-app .um-row .c-profile { display:none; }
}

/* ===== empty + loading states ===== */
.mh-app .um-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 20px; }
.mh-app .um-empty-ic { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin-bottom:16px;
  background:var(--mh-ctrl-fill); color:var(--mh-ctrl-ico); }
.mh-app .um-empty-ic svg { width:28px; height:28px; }
.mh-app .um-empty h3 { font-size:16px; font-weight:800; margin:0 0 6px; color:var(--mh-ink); }
.mh-app .um-empty p { font-size:13px; color:var(--mh-muted); margin:0; }

/* loading skeleton mirrors the scannable-row card (avatar | id block | divided stats) */
.mh-app .um-skel { display:flex; flex-direction:column; gap:12px; }
.mh-app .sk-card { display:flex; align-items:center; gap:16px; background:var(--mh-surface);
  border:1px solid rgba(78,124,114,.22); border-radius:16px; padding:16px 20px; }
/* Scoped to .sk-card (the admin loading skeleton): .sk is a generic class name also
   used by the Household KPI stat label (#hhDetail .stat .sk), and the unscoped rule
   leaked this shimmer gradient + animation behind those labels. */
.mh-app .sk-card .sk { background:linear-gradient(90deg, var(--mh-ctrl-fill) 25%, color-mix(in srgb, var(--mh-ctrl-fill) 55%, var(--mh-surface)) 50%, var(--mh-ctrl-fill) 75%);
  background-size:200% 100%; animation:mhAdSk 1.3s infinite; border-radius:8px; }
@keyframes mhAdSk { from { background-position:200% 0; } to { background-position:-200% 0; } }
.mh-app .sk-av { width:54px; height:54px; border-radius:50%; flex:none; margin-left:4px; }
.mh-app .sk-idblock { flex:0 0 156px; min-width:0; }
.mh-app .sk-l1 { height:13px; width:70%; margin-bottom:8px; }
.mh-app .sk-l2 { height:11px; width:48%; }
.mh-app .sk-statblock { flex:1; min-width:0; padding-left:20px; border-left:1px solid rgba(78,124,114,.22); }
.mh-app .sk-bar { height:11px; width:60%; border-radius:999px; }
.mh-app .sk-bar.b2 { width:42%; margin-top:10px; }

/* ===== side panel (slides in from the right; list stays visible) ===== */
.mh-app .um-scrim { position:fixed; inset:0; background:rgba(20,28,25,.28); -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px); z-index:100020; animation:mhAdFade .2s ease both; }
@keyframes mhAdFade { from { opacity:0; } to { opacity:1; } }
.mh-app .um-panel { position:fixed; top:0; right:0; height:calc(100 * var(--mh-vh)); width:min(440px, calc(94 * var(--mh-vw))); background:var(--mh-surface);
  border-left:1px solid rgba(78,124,114,.28); box-shadow:var(--mh-shadow-lg); z-index:100021; display:flex; flex-direction:column;
  transform:translateX(100%); animation:mhAdSlide .26s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes mhAdSlide { to { transform:translateX(0); } }
.mh-app .up-head { position:relative; padding:22px 22px 18px; border-bottom:1px solid rgba(78,124,114,.18);
  background:linear-gradient(160deg, rgba(78,124,114,.10), transparent 70%); }
.mh-app .up-x { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:9px; border:1px solid rgba(78,124,114,.30);
  background:var(--mh-surface); color:var(--mh-muted); display:grid; place-items:center; cursor:pointer; transition:color .15s, border-color .15s; }
.mh-app .up-x:hover { color:var(--mh-ink); border-color:var(--mh-ctrl-focus-border); }
.mh-app .up-x svg { width:16px; height:16px; }
.mh-app .up-person { display:flex; align-items:center; gap:14px; }
.mh-app .up-person .av { width:60px; height:60px; font-size:20px; border-radius:16px; }
.mh-app .up-name { font-size:18px; font-weight:800; color:var(--mh-ink); }
.mh-app .up-user { margin-top:3px; }
.mh-app .up-chips { display:flex; align-items:center; gap:7px; margin-top:13px; flex-wrap:wrap; }

.mh-app .up-body { flex:1; overflow-y:auto; padding:18px 22px 22px; }
.mh-app .up-grp { margin-bottom:20px; }
.mh-app .up-grp:last-child { margin-bottom:0; }
.mh-app .up-grp-h { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mh-muted); margin:0 0 10px; }
.mh-app .up-field { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:7px 0; }
.mh-app .up-field + .up-field { border-top:1px solid color-mix(in srgb, var(--mh-line) 70%, transparent); }
.mh-app .up-k { font-size:12.5px; color:var(--mh-muted); flex:none; }
.mh-app .up-v { font-size:13px; font-weight:600; color:var(--mh-ink); text-align:right; min-width:0; word-break:break-word; }
.mh-app .up-v.notset { color:var(--mh-muted); font-weight:500; font-style:italic; }
.mh-app .up-note { font-size:11.5px; color:var(--mh-muted); margin-top:6px; display:flex; align-items:center; gap:6px; }
.mh-app .up-note svg { width:13px; height:13px; flex:none; }

/* KICKOFF 19: the one editable field in the read-only panel - department assign.
   Stacks the label, the dropdown + Save row, then the routing note. */
.mh-app .up-deptfield { flex-direction:column; align-items:stretch; gap:8px; }
.mh-app .up-deptedit { display:flex; align-items:center; gap:8px; }
.mh-app .up-deptedit .mh-sel { flex:1; min-width:0; }
.mh-app .up-deptedit .mh-sel select { width:100%; }
.mh-app .up-deptsave { flex:none; height:38px; padding:0 18px; border:none; border-radius:10px; cursor:pointer;
   background:var(--mh-green); color:#fff; font-family:inherit; font-weight:700; font-size:13px;
   transition:background .15s ease, opacity .15s ease; }
.mh-app .up-deptsave:hover:not(:disabled) { background:var(--mh-green-d); }
.mh-app .up-deptsave:disabled { opacity:.45; cursor:default; }

.mh-app .entra { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:11px; }
.mh-app .entra svg { width:15px; height:15px; }
.mh-app .entra.linked { color:var(--mh-green-d); background:rgba(78,124,114,.12); }
body.dark .mh-app .entra.linked { color:var(--mh-sage-300); }
.mh-app .entra.unlinked { color:var(--mh-muted); background:var(--mh-ctrl-fill); }

/* ===== activity history feed (read-only, tbl_AuditLog) ===== */
.mh-app .up-feed { display:flex; flex-direction:column; }
.mh-app .fe-item { display:flex; gap:11px; padding:10px 0; }
.mh-app .fe-item + .fe-item { border-top:1px solid color-mix(in srgb, var(--mh-line) 70%, transparent); }
.mh-app .fe-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none; background:var(--mh-ctrl-ico); }
.mh-app .fe-dot.fe-create, .mh-app .fe-dot.fe-link { background:var(--mh-green); }
.mh-app .fe-dot.fe-update { background:var(--mh-info); }
.mh-app .fe-dot.fe-danger { background:var(--mh-danger); }
.mh-app .fe-main { min-width:0; flex:1; }
.mh-app .fe-line { font-size:12.5px; color:var(--mh-ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mh-app .fe-act { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--mh-green-d);
  background:rgba(78,124,114,.12); border-radius:999px; padding:2px 7px; }
body.dark .mh-app .fe-act { color:var(--mh-sage-300); }
.mh-app .fe-tgt { font-size:12px; }
.mh-app .fe-sub { font-size:11.5px; color:var(--mh-muted); margin-top:3px; }
.mh-app .fe-when { font-size:11px; color:var(--mh-muted); margin-top:3px; }
.mh-app .fe-empty { font-size:12.5px; color:var(--mh-muted); font-style:italic; padding:8px 0 4px; }

/* =============================================================================
   Audit Trail + Error Logs (read-only viewers). Reuse the shared .cl-* toolbar,
   the .fe-* activity-feed chip/dot, the .mono identifiers, the .um-* side panel
   and the .um-empty / .fe-empty states. Only the section's own row/list classes
   live here. Light + dark via the shared tokens. Plain hyphens only.
   ============================================================================= */

/* date-range filter in the toolbar (two frozen MhDatePickers + a "to" separator).
   The MhDatePicker is FROZEN: we do NOT touch its own CSS/markup. These are admin-scoped
   wrapper overrides (on the .ad-dp Class we pass in - the same per-context pattern as
   .arch-dp), bringing the picker's field to the SAME height/weight as the dropdowns +
   search on this row (filled pill, 40px, no heavy resting border). The popover and the
   open-state ring are the component's own and stay untouched. */
.mh-app .ad-daterange { display:flex; align-items:center; gap:8px; }
.mh-app .ad-daterange .ad-dp { width:150px; }
/* From/To date fields wear the SAME "Inset Cool Field" as the search bar + dropdowns:
   cool fill #DFE4EA + hairline + inset shadow, lift-to-white on hover. (The picker's own
   popover + open-state ring stay untouched - only this resting field wrapper is retinted.) */
.mh-app .ad-daterange .ad-dp .dp-field { height:40px; padding:0 14px; gap:9px; border-radius:999px;
  border:1px solid rgba(40,60,80,.08); box-shadow:inset 0 1px 2px rgba(40,60,80,.10); background:#DFE4EA; }
.mh-app .ad-daterange .ad-dp .dp-field:hover { border-color:rgba(40,60,80,.16); background:#fff; box-shadow:0 10px 28px rgba(40,60,80,.12); }
body.dark .mh-app .ad-daterange .ad-dp .dp-field { background:var(--mh-ctrl-fill); border-color:var(--mh-line); box-shadow:inset 0 1px 2px rgba(0,0,0,.22); }
body.dark .mh-app .ad-daterange .ad-dp .dp-field:hover { background:var(--mh-surface); border-color:var(--mh-ctrl-focus-border); box-shadow:var(--mh-ctrl-focus-ring); }
.mh-app .ad-daterange .ad-dp .dpf-ico { width:16px; height:16px; }
.mh-app .ad-daterange .ad-dp .dpf-val { font-size:13.5px; font-weight:600; }
.mh-app .ad-daterange .ad-dp .dpf-chev { width:14px; height:14px; }
.mh-app .ad-dash { font-size:12px; color:var(--mh-muted); flex:none; }

/* result count line + load-more */
.mh-app .au-meta { font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--mh-muted); margin:0 2px 10px; }
.mh-app .au-more { display:flex; justify-content:center; margin-top:16px; }
.mh-app .ad-loadmore { height:38px; padding:0 20px; border-radius:11px; border:1px solid rgba(78,124,114,.32);
  background:var(--mh-surface); color:var(--mh-ink); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.mh-app .ad-loadmore:hover:not(:disabled) { border-color:var(--mh-ctrl-focus-border); box-shadow:var(--mh-ctrl-focus-ring); }
.mh-app .ad-loadmore:disabled { opacity:.6; cursor:default; }

/* ===== audit list (org-wide tbl_AuditLog, full-width rows) ===== */
.mh-app .au-list { display:flex; flex-direction:column; gap:8px; }
.mh-app .au-row { display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:13px;
  background:var(--mh-surface); border:1px solid rgba(78,124,114,.22); border-radius:13px; padding:13px 16px; box-shadow:var(--mh-shadow-sm); }
.mh-app .au-row .fe-dot { margin-top:6px; }
.mh-app .au-main { min-width:0; }
.mh-app .au-l1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mh-app .au-tgt { font-size:12px; }
.mh-app .au-change { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px; font-size:12px; }
.mh-app .au-field { font-weight:700; color:var(--mh-ink); }
.mh-app .au-old { color:var(--mh-muted); text-decoration:line-through; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-app .au-new { color:var(--mh-ink); font-weight:600; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-app .au-arrow { width:14px; height:14px; flex:none; color:var(--mh-ctrl-ico); }
.mh-app .au-who { text-align:right; flex:none; }
.mh-app .au-actor { font-size:12.5px; font-weight:700; color:var(--mh-ink); white-space:nowrap; }
.mh-app .au-when { font-size:11px; color:var(--mh-muted); margin-top:2px; white-space:nowrap; }
@media (max-width:760px) {
  .mh-app .au-row { grid-template-columns:auto 1fr; }
  .mh-app .au-who { grid-column:2; text-align:left; margin-top:6px; }
}

/* ===== severity pills (shared by error rows + detail panel) ===== */
.mh-app .er-sev { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; white-space:nowrap; flex:none; align-self:start; }
.mh-app .er-sev.big { font-size:11px; padding:6px 12px; border-radius:10px; }
.mh-app .er-sev.sev-error { color:#fff; background:var(--mh-danger); }
.mh-app .er-sev.sev-warn { color:var(--mh-warning-d); background:rgba(196,138,30,.16); }
body.dark .mh-app .er-sev.sev-warn { color:var(--mh-warning); background:rgba(196,138,30,.22); }
.mh-app .er-sev.sev-info { color:var(--mh-muted); background:var(--mh-ctrl-fill); border:1px solid var(--mh-line); }
/* EMAIL ENGINE: a message that actually went. The error log has no "good"
   severity, so this pill is added here rather than starting a second palette. */
.mh-app .er-sev.sev-ok { color:var(--mh-brand-d, #2f6b4f); background:rgba(78,124,114,.16); }
body.dark .mh-app .er-sev.sev-ok { color:#8fd3b6; background:rgba(78,124,114,.26); }

/* ===== EMAIL ENGINE (Administration > Email, Aug 13 2026) =====
   Reuses the admin surfaces above; only the state strip and the count tiles are
   new. Both themes are defined here, never only one. */
.mh-app .em-state { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 12px; }
.mh-app .em-chip { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:999px; border:1px solid var(--mh-line); background:var(--mh-ctrl-fill); color:var(--mh-muted); }
.mh-app .em-chip .em-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.mh-app .em-chip.on { color:var(--mh-brand-d, #2f6b4f); background:rgba(78,124,114,.14); border-color:rgba(78,124,114,.32); }
body.dark .mh-app .em-chip.on { color:#8fd3b6; background:rgba(78,124,114,.24); }
.mh-app .em-chip.off { color:var(--mh-muted); }
.mh-app .em-chip.warn { color:var(--mh-warning-d); background:rgba(196,138,30,.16); border-color:rgba(196,138,30,.3); }
body.dark .mh-app .em-chip.warn { color:var(--mh-warning); background:rgba(196,138,30,.22); }
.mh-app .em-sender { font-size:12px; color:var(--mh-muted); margin-left:2px; }

.mh-app .em-note { font-size:12.5px; line-height:1.55; color:var(--mh-muted); background:var(--mh-ctrl-fill);
  border:1px solid var(--mh-line); border-radius:11px; padding:10px 13px; margin:0 0 12px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mh-app .em-note.warn { color:var(--mh-warning-d); background:rgba(196,138,30,.12); border-color:rgba(196,138,30,.28); }
body.dark .mh-app .em-note.warn { color:var(--mh-warning); background:rgba(196,138,30,.18); }
.mh-app .em-retry { margin-left:auto; }

/* Count tiles. Capped at 4 across, then 2, then 1 - the app-wide card-grid law:
   never auto-fill, because seven tiles on a wide screen become a thin unreadable
   row. */
.mh-app .em-kpis { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 14px; }
.mh-app .em-kpi { min-width:0; background:var(--mh-surface); border:1px solid rgba(78,124,114,.22);
  border-radius:13px; padding:12px 14px; box-shadow:var(--mh-shadow-sm); }
.mh-app .em-kpi-n { font-size:22px; font-weight:800; color:var(--mh-ink); line-height:1.1; }
.mh-app .em-kpi-l { font-size:11.5px; color:var(--mh-muted); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1100px) { .mh-app .em-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px)  { .mh-app .em-kpis { grid-template-columns:1fr; } }

/* The message body is shown exactly as it was built, newlines and all, so an
   admin can confirm with their own eyes that no client name left the tenant. */
.mh-app .em-body { white-space:pre-wrap; word-break:break-word; }

/* ===== error list (tbl_ErrorLog, full-width clickable rows) ===== */
.mh-app .er-list { display:flex; flex-direction:column; gap:8px; }
.mh-app .er-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; width:100%; text-align:left;
  background:var(--mh-surface); border:1px solid rgba(78,124,114,.22); border-radius:13px; padding:12px 14px 12px 16px;
  cursor:pointer; font-family:inherit; box-shadow:var(--mh-shadow-sm); transition:transform .12s, box-shadow .12s, border-color .12s; }
.mh-app .er-row:hover { transform:translateY(-1px); box-shadow:var(--mh-shadow); border-color:var(--mh-ctrl-focus-border); }
.mh-app .er-main { min-width:0; }
.mh-app .er-msg { font-size:13px; font-weight:600; color:var(--mh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mh-app .er-meta { font-size:11.5px; color:var(--mh-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mh-app .er-chev { width:18px; height:18px; flex:none; color:var(--mh-ctrl-ico); }

/* error detail panel: full message / notes blocks (reuses .um-panel + .up-*) */
.mh-app .er-detail-msg { font-size:13px; line-height:1.55; color:var(--mh-ink); word-break:break-word; white-space:pre-wrap;
  background:var(--mh-ctrl-fill); border:1px solid var(--mh-line); border-radius:11px; padding:11px 13px; }
.mh-app .up-person .er-sev.big { align-self:center; }