/* =============================================================================
   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:var(--tg-well,rgb(223,228,234)); 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:rgb(var(--tg-rgb,255,255,255)); 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; }
/* justify-content:flex-start - this row is a <button>, and MudBlazor.min.css ships a bare
   `button{justify-content:center}` that wins whenever the class does not name the property.
   `text-align:left` was declared but text-align does not govern a flex main axis, so the
   whole row (avatar, name, stats) sat 19px off its own left padding. Measured 31 Aug 2026
   alongside the same defect on the Client Detail @-mention picker. */
.mh-app .adu { position:relative; display:flex; align-items:center; justify-content:flex-start; 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. */
/* ===== 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:var(--tg-well,rgb(223,228,234)); }
.mh-app .ad-daterange .ad-dp .dp-field:hover { border-color:rgba(40,60,80,.16); background:rgb(var(--tg-rgb,255,255,255)); 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; }

/* =============================================================================
   THE STAFF ACCOUNT RECORD (#mhDetail.ud-host) - 11 September 2026.

   The user side panel became the app's standard record popup, so the department
   dropdown, the contract tick box and the panel's own Microsoft-account chip were
   deleted with the markup that drew them: the record renders those as mint tiles,
   which are the standard, and a retired skin left behind is what the next person
   reaches for by mistake.

   WHAT IS LEFT HERE IS ONLY WHAT THE MINT KIT HAS NO WORD FOR - the attention
   rows, the "see all" link and the two empty states. Everything is scoped
   #mhDetail.ud-host (id + class + class), which outranks the kit's own
   #mhDetail rules whatever order the sheets load in - the reason DetailShell
   carries a StageClass at all. The activity feed reuses the .fe-* vocabulary
   above unchanged: one feed, one set of rules, drawn in a new place.
   ============================================================================= */
#mhDetail.ud-host .ud-att { display:flex; flex-direction:column; gap:10px; margin-top:2px; }
#mhDetail.ud-host .ud-attrow { display:flex; gap:11px; align-items:flex-start;
  background:rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1))); border:1px solid rgba(30,55,48,.10); border-radius:13px; padding:11px 13px; }
body.dark #mhDetail.ud-host .ud-attrow { background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))); border-color:rgba(255,255,255,.10); }
#mhDetail.ud-host .ud-attic { flex:none; width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
  background:rgba(217,155,61,.16); color:#9A6B18; }
body.dark #mhDetail.ud-host .ud-attic { color:#E3B462; }
#mhDetail.ud-host .ud-attic svg { width:15px; height:15px; }
#mhDetail.ud-host .ud-attt { font-size:12.5px; font-weight:750; color:var(--mh-ink); }
#mhDetail.ud-host .ud-attx { font-size:11.5px; line-height:1.5; color:var(--mh-muted); margin-top:2px; }

/* "See all N changes" - a link, not a button: it moves you to a tab, it does not act. */
#mhDetail.ud-host .ud-more { display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:7px 12px;
  border:1px solid rgba(30,55,48,.12); border-radius:11px; background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));
  font-family:inherit; font-size:12px; font-weight:700; color:var(--mh-green-d); cursor:pointer;
  transition:background .14s ease, transform .14s ease; }
#mhDetail.ud-host .ud-more:hover { background:rgb(var(--tg-rgb,255,255,255)); transform:translateY(-1px); }
#mhDetail.ud-host .ud-more svg { width:14px; height:14px; }
body.dark #mhDetail.ud-host .ud-more { background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); border-color:rgba(255,255,255,.12); color:var(--mh-sage-300); }
body.dark #mhDetail.ud-host .ud-more:hover { background:rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))); }

/* An empty state SAYS WHAT WOULD BE HERE, so "nothing" reads as a fact rather than
   as something that failed to load. */
#mhDetail.ud-host .ud-empty { display:flex; gap:11px; align-items:flex-start; padding:13px 14px; margin-top:2px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.45*var(--tg-k,1))); border:1px dashed rgba(30,55,48,.18); border-radius:13px; }
body.dark #mhDetail.ud-host .ud-empty { background:rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))); border-color:rgba(255,255,255,.14); }
#mhDetail.ud-host .ud-empty > svg { width:17px; height:17px; flex:none; margin-top:1px; color:var(--mh-ctrl-ico); }
#mhDetail.ud-host .ud-empty b { display:block; font-size:12.5px; font-weight:750; color:var(--mh-ink); }
#mhDetail.ud-host .ud-empty span { display:block; font-size:11.5px; line-height:1.5; color:var(--mh-muted); margin-top:2px; }

/* The tile value line is nowrap + ellipsis by design, which is right for a name and
   wrong for a 36-character object id - so the two identifiers that are genuinely long
   are allowed to wrap inside their own tile rather than being silently truncated. */
#mhDetail.ud-host .mint-w .mint-vl.mono { font-family:var(--mh-mono, "IBM Plex Mono", monospace); font-size:12px;
  white-space:normal; word-break:break-all; line-height:1.35; }

/* POLISH, 14 Sep 2026 - CEO: "all text are attached to the fields and give txt space".

   1. EXPLANATIONS ARE THEIR OWN BLOCK. They used to follow the last row of tiles with no
      gap, in the same grey as a tile's caption, so they read as part of the field above.
      Now: 18px of air, a soft panel, an icon and a heading naming what is explained. */
#mhDetail.ud-host .ud-notes { display:grid; gap:12px; margin-top:18px; }
#mhDetail.ud-host .ud-notes.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
#mhDetail.ud-host .ud-note { display:flex; gap:12px; align-items:flex-start; padding:14px 16px;
  border-radius:14px; background:rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1))); border:1px solid rgba(30,55,48,.08); }
#mhDetail.ud-host .ud-noteic { flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:rgba(47,107,87,.10); color:#2F6B57; }
#mhDetail.ud-host .ud-noteic svg { width:15px; height:15px; }
#mhDetail.ud-host .ud-notetx { min-width:0; padding-top:1px; }
#mhDetail.ud-host .ud-notetx b { display:block; font-size:12.5px; font-weight:750; color:#1C2A25; margin-bottom:5px; }
#mhDetail.ud-host .ud-notetx p { margin:0; font-size:12px; font-weight:500; line-height:1.6; color:#6B7A74; }
body.dark #mhDetail.ud-host .ud-note { background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))); border-color:rgba(255,255,255,.10); }
body.dark #mhDetail.ud-host .ud-noteic { background:rgba(143,196,176,.14); color:var(--mh-sage-300); }
body.dark #mhDetail.ud-host .ud-notetx b { color:var(--mh-ink); }
body.dark #mhDetail.ud-host .ud-notetx p { color:var(--mh-muted); }

/* 2. A CARD WITH TWO FIELDS LAYS THEM IN TWO COLUMNS, so each note lines up under its own
      field instead of a third, empty column leaving the tiles and notes out of step. */
#mhDetail.ud-host .mint-grid.ud-cols2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@container mintcard (max-width:560px) {
  #mhDetail.ud-host .ud-notes.two,
  #mhDetail.ud-host .mint-grid.ud-cols2 { grid-template-columns:1fr; }
}

/* 3. THE "WHY IT IS LOCKED" LINE INSIDE A TILE gets a hairline and room of its own, so it
      stops sitting welded to the value. Scoped to this record - Client and Household keep
      the kit's tighter line. */
#mhDetail.ud-host .mint-w.ed.lockt .mint-note { margin-top:8px; padding-top:7px; font-size:11px; line-height:1.45;
  border-top:1px dashed rgba(30,55,48,.12); }
body.dark #mhDetail.ud-host .mint-w.ed.lockt .mint-note { border-top-color:rgba(255,255,255,.12); }

/* 4. Air between the capsule and the first row, and between a card's error and its notes. */
#mhDetail.ud-host .pd-card.mint > .mint-grid { margin-top:4px; }
#mhDetail.ud-host .pd-card.mint .mint-err { margin:14px 0 0; }

/* CONTRACT CHIP (A5) - CEO, 14 Sep 2026: "how Admins only know that this user is Paid Under the
   contract?" Wears the role badge's shape (it sits beside it) in amber, the colour of a funding
   fact, so it cannot be mistaken for a fourth role colour. */
.mh-app .role-contract { color:#8A5A12; background:rgba(217,155,61,.18); }
.mh-app .role-contract svg { width:11px; height:11px; flex:none; }
body.dark .mh-app .role-contract { color:#E3B462; background:rgba(217,155,61,.22); }
.mh-app .adu-id .adu-badges { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.mh-app .adu-id .adu-badges .role { margin-top:0; }
.mh-app .umr-badges { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }