/* =============================================================================
   mh-usermenu.css - the two pages reached from the top-right user menu:
   /requests (Requests.razor + MyRequestsPane) and /help (HelpCenter.razor).
   Built Aug 8 2026.

   THE RE-SCOPE THAT MATTERS: the .mrq-* rules below used to live in mh-profile.css
   under `#ppProfOv .mrq-*`. My Requests was a tab inside the My Profile overlay, and
   that id was the overlay. The moment it became its own page that id stopped
   existing, and every one of those rules would have silently stopped applying -
   the list would have rendered as unstyled divs with no error anywhere. They are
   re-scoped to `.mrq-root`, which the component now carries itself, so the list
   looks the same wherever it is hosted.

   The row internals (.apv-list / .apv-card / .apv-type / .apv-badge / .apv-empty)
   are NOT here - they are scoped `.mh-app` in mh-approvals.css, shared with the
   admin Approval Center, and they travelled to the page unchanged.
   ============================================================================= */

/* =========================================================
   SHARED PAGE FRAME
   ========================================================= */
/* max-width WITHOUT an auto margin is a block that hugs the left edge. The Help
   Center card was already `justify-content:center`, so it centred correctly - but
   inside a 1180px box pinned to the left of a much wider screen, which reads as
   "not centred" and is exactly what the CEO was looking at. The centring was never
   the broken part; the frame around it was. */
.mh-app .mh-reqpage,
.mh-app .mh-helppage { padding: 4px 2px 40px; max-width: 1180px; margin-inline: auto; }

.mh-app .rqp-head,
.mh-app .hlp-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}
.mh-app .rqp-head-tx,
.mh-app .hlp-head-tx { flex: 1; min-width: 0; }

.mh-app .rqp-title,
.mh-app .hlp-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: #22302c;
  line-height: 1.2;
}
.mh-app .rqp-sub,
.mh-app .hlp-sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #6d7c77;
  line-height: 1.5;
  max-width: 68ch;
}
body.dark .mh-app .rqp-title,
body.dark .mh-app .hlp-title { color: #eef2f1; }
body.dark .mh-app .rqp-sub,
body.dark .mh-app .hlp-sub { color: #a7b5b1; }

.mh-app .rqp-refresh {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  border: 1px solid #e7ecea;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #3D655D;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.mh-app .rqp-refresh:hover:not(:disabled) { border-color: #4E7C72; background: #f4f8f6; }
.mh-app .rqp-refresh:disabled { opacity: .55; cursor: default; }
.mh-app .rqp-refresh svg.mh-bi { stroke: none; }
body.dark .mh-app .rqp-refresh {
  background: #1d2421; border-color: #2e3a37; color: #9fc7bd;
}
body.dark .mh-app .rqp-refresh:hover:not(:disabled) { background: #232b28; border-color: #3f524d; }

/* =========================================================
   THE STATUS BOARD - counters that ARE the filter
   =========================================================
   [[mh-cardgrid-law]]: an EXPLICIT track count, never auto-fill. Four across, to
   two, to one. The pressed state is a ring rather than a fill so the count stays
   the loudest thing in the tile - it is what the staff member came to read. */
.mh-app .rqp-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 1080px) { .mh-app .rqp-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mh-app .rqp-board { grid-template-columns: minmax(0, 1fr); } }

.mh-app .rqp-stat {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #e7ecea;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 32, 28, .04), 0 8px 22px rgba(20, 32, 28, .05);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* NO transform on hover. These tiles sit above the list's filter popover; a
     transform here would create a stacking context and trap it
     ([[mh-transform-traps-dropdowns]]). Colour and shadow carry the hover. */
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.mh-app .rqp-stat:hover:not(.dead) { border-color: #c9d6d1; }
.mh-app .rqp-stat.on { border-color: #4E7C72; box-shadow: 0 0 0 2px rgba(78, 124, 114, .22); }
.mh-app .rqp-stat.dead { cursor: default; box-shadow: none; opacity: .62; }
.mh-app .rqp-stat:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(78, 124, 114, .32); }

.mh-app .rqp-stat-ic {
  grid-row: 1 / span 2;
  width: 42px; height: 42px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(20, 32, 28, .04);
  border: 1px solid #eef1f0;
}
.mh-app .rqp-stat-ic svg.mh-bi { stroke: none; }
.mh-app .rqp-stat-n {
  font-family: var(--mh-font-head, inherit);
  font-size: 25px; font-weight: 800; line-height: 1.05; color: #22302c;
}
.mh-app .rqp-stat-k {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #6d7c77; line-height: 1.3;
}
.mh-app .rqp-stat--approved .rqp-stat-n { color: #3D655D; }
.mh-app .rqp-stat--denied   .rqp-stat-n { color: #9c3a31; }
.mh-app .rqp-stat--pending  .rqp-stat-n { color: #8A5F16; }

body.dark .mh-app .rqp-stat { background: #1d2421; border-color: #2e3a37; box-shadow: none; }
body.dark .mh-app .rqp-stat:hover:not(.dead) { border-color: #3f524d; }
body.dark .mh-app .rqp-stat.on { border-color: #4E7C72; box-shadow: 0 0 0 2px rgba(78, 124, 114, .3); }
body.dark .mh-app .rqp-stat-ic { background: rgba(255, 255, 255, .05); border-color: #2e3a37; }
body.dark .mh-app .rqp-stat-n { color: #eef2f1; }
body.dark .mh-app .rqp-stat-k { color: #a7b5b1; }
body.dark .mh-app .rqp-stat--approved .rqp-stat-n { color: #9fc7bd; }
body.dark .mh-app .rqp-stat--denied   .rqp-stat-n { color: #e7948b; }
body.dark .mh-app .rqp-stat--pending  .rqp-stat-n { color: #e7c79a; }

/* =========================================================
   THE LIST - re-scoped from `#ppProfOv .mrq-*` to `.mrq-root .mrq-*`.
   Values are the ones that were signed off in the overlay; only the
   scope and the theme variables changed.
   ========================================================= */
.mh-app .mrq-root { max-width: 940px; }

/* ON THE /requests PAGE the cap has to go. 940px is the width this pane was
   signed off at INSIDE the profile overlay, which was a narrow drawer. On a full
   page it left the request cards 236px short of the status board directly above
   them, so the two rows did not line up on the right edge - measured, not
   guessed: board 1176px, cards 940px.

   Overridden here rather than deleted above, so the pane keeps its original
   width if it is ever placed back inside a drawer. */
.mh-app .mh-reqpage .mrq-root,
.mh-app .mh-reqpage .mrq-list { max-width: none; }

.mh-app .mrq-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.mh-app .mrq-count { font-size: 12.5px; font-weight: 700; color: #6d7c77; }
body.dark .mh-app .mrq-count { color: #a7b5b1; }

.mh-app .mrq-filterwrap { position: relative; display: flex; align-items: center; gap: 8px; }
.mh-app .mrq-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px;
  padding: 0 5px 0 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  background: rgba(78, 124, 114, .12); color: #3D655D;
}
.mh-app .mrq-chip-x {
  display: grid; place-items: center; width: 17px; height: 17px; border: none;
  border-radius: 50%; background: rgba(78, 124, 114, .18); color: #3D655D;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.mh-app .mrq-chip-x:hover { background: rgba(78, 124, 114, .32); }
.mh-app .mrq-filter-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: 9px; border: 1px solid #e7ecea; background: #fff;
  font-family: inherit; font-size: 12px; font-weight: 800; color: #56635f; cursor: pointer;
}
.mh-app .mrq-filter-btn svg { width: 14px; height: 14px; }
.mh-app .mrq-filter-btn:hover { border-color: #4E7C72; color: #3D655D; }
.mh-app .mrq-filter-btn.on { border-color: #4E7C72; color: #3D655D; background: rgba(78, 124, 114, .1); }
.mh-app .mrq-filter-scrim { position: fixed; inset: 0; z-index: 20; }
.mh-app .mrq-filter-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 21; min-width: 186px;
  background: #fff; border: 1px solid #e7ecea; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(20, 32, 28, .22); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.mh-app .mrq-filter-menu button {
  display: flex; align-items: center; width: 100%; border: none; background: none;
  padding: 9px 12px; border-radius: 9px; font-family: inherit; font-size: 12.5px;
  font-weight: 700; color: #28332f; cursor: pointer; text-align: left;
}
.mh-app .mrq-filter-menu button:hover { background: #f2f5f4; }
.mh-app .mrq-filter-menu button.sel { background: rgba(78, 124, 114, .12); color: #3D655D; }
body.dark .mh-app .mrq-filter-btn { background: #1d2421; border-color: #2e3a37; color: #a7b5b1; }
body.dark .mh-app .mrq-filter-menu { background: #1d2421; border-color: #2e3a37; }
body.dark .mh-app .mrq-filter-menu button { color: #eef2f1; }
body.dark .mh-app .mrq-filter-menu button:hover { background: #232b28; }

.mh-app .mrq-card {
  display: flex; flex-direction: column; gap: 7px; background: #fff;
  border: 1px solid #e7ecea; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(20, 32, 28, .04);
}
body.dark .mh-app .mrq-card { background: #1d2421; border-color: #2e3a37; box-shadow: none; }

.mh-app .mrq-row1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mh-app .mrq-name { font-size: 15px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; word-break: break-word; }
.mh-app .mrq-namelink { color: #4E7C72; text-decoration: none; cursor: pointer; border-radius: 4px; }
.mh-app .mrq-namelink:hover { color: #3D655D; text-decoration: underline; }
.mh-app .mrq-namelink:focus-visible { outline: 2px solid #4E7C72; outline-offset: 2px; }
.mh-app .mrq-name-static { color: #28332f; }
body.dark .mh-app .mrq-name-static { color: #eef2f1; }
body.dark .mh-app .mrq-namelink { color: #9fc7bd; }

.mh-app .mrq-detail { font-size: 12px; font-weight: 500; color: #6d7c77; line-height: 1.45; }
.mh-app .mrq-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 7px; }
.mh-app .mrq-foot-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; font-size: 11.5px; line-height: 1.35; }
.mh-app .mrq-foot-k { font-weight: 700; color: #56635f; }
.mh-app .mrq-foot-v { color: #6d7c77; }
.mh-app .mrq-pending { font-style: italic; color: #6d7c77; opacity: .9; }
.mh-app .mrq-foot-why { font-size: 11px; font-style: italic; color: #6d7c77; line-height: 1.4; white-space: normal; }
body.dark .mh-app .mrq-detail,
body.dark .mh-app .mrq-foot-v,
body.dark .mh-app .mrq-pending,
body.dark .mh-app .mrq-foot-why { color: #a7b5b1; }
body.dark .mh-app .mrq-foot-k { color: #c3cecb; }

/* =========================================================
   HELP CENTER - the shell's empty state
   ========================================================= */
/* The shell has nothing else on it, so the card sits in the middle of the space
   rather than clinging to the top of it - min-height keeps it off the header
   without ever pushing the page into a scroll. --mh-vh, never a bare vh
   ([[mh-display-resolution]]: the app is root-zoomed and bare vh ignores that). */
.mh-app .hlp-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 0;
  min-height: calc(var(--mh-vh, 1vh) * 62);
}
.mh-app .hlp-empty {
  max-width: 560px; text-align: center; padding: 52px 34px 46px;
  background: #fff; border: 1px solid #e7ecea; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20, 32, 28, .04), 0 10px 30px rgba(20, 32, 28, .05);
}
.mh-app .hlp-empty-ic { margin: 0 auto 18px; width: 46px; height: 46px; opacity: .85; }
.mh-app .hlp-empty-ic svg.mh-bi { stroke: none; }
.mh-app .hlp-empty h3 {
  margin: 0 0 12px; font-family: var(--mh-font-head, inherit);
  font-size: 20px; font-weight: 700; color: #22302c;
}
.mh-app .hlp-empty p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #6d7c77; }
.mh-app .hlp-empty p:last-child { margin-bottom: 0; }
.mh-app .hlp-empty-alt {
  margin-top: 20px !important; padding-top: 18px; border-top: 1px solid #eef1f0;
  font-size: 13.5px !important;
}
body.dark .mh-app .hlp-empty { background: #1d2421; border-color: #2e3a37; box-shadow: none; }
body.dark .mh-app .hlp-empty h3 { color: #eef2f1; }
body.dark .mh-app .hlp-empty p { color: #a7b5b1; }
body.dark .mh-app .hlp-empty-alt { border-color: #2e3a37; }

/* =========================================================
   PERMISSION NOTICE (Aug 13 2026) - shown when a view-only
   account opens a link to a section they do not have.
   Covers the blocked screen, states why, self-dismisses.
   Both themes defined; never only one.

   RENAMED pd- TO pnx- ON Aug 14 2026, AND IT MUST NEVER GO BACK.
   ---------------------------------------------------------
   `pd-` was ALREADY OWNED by the detail mocks - `.pd-card` and `.pd-grid` are the
   info/KPI cards on Program Detail, Student Detail, Client Record, Housing Subsidy
   and My Profile (76 uses across seven components). This notice borrowed the same
   prefix, and because it loads AFTER detail-view.css it broke every one of them:

     width: min(430px,100%)  ->  every detail card shrank to 430px
     text-align: center      ->  every field label centred over a left-aligned value

   The detail's own `#mhDetail .pd-card` wins on ID specificity for what it DECLARES
   (background, border, padding, flex) - but it declares neither width nor
   text-align, so those two landed unopposed. That is why exactly those two things
   broke and nothing else did.

   The notice is the newcomer and the smaller surface, so the notice yields. Only
   `.pd-card` actually collided; the rest of the family is renamed with it so the
   prefix itself stops being a shared landmine. NEVER give a NEW surface a prefix
   without grepping it first.
   ========================================================= */
.mh-app .pnx-scrim {
  position: fixed; inset: 0; z-index: 100060;
  background: rgba(42, 47, 49, .46); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
  animation: pdFade .18s ease both;
}
@keyframes pdFade { from { opacity: 0; } to { opacity: 1; } }

.mh-app .pnx-card {
  width: min(430px, 100%); text-align: center;
  background: var(--mh-surface); color: var(--mh-ink);
  border: 1px solid rgba(78, 124, 114, .28); border-radius: 18px;
  padding: 30px 28px; box-shadow: var(--mh-shadow-lg);
}
.mh-app .pnx-ic {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(196, 138, 30, .14); color: var(--mh-warning-d);
}
body.dark .mh-app .pnx-ic { background: rgba(196, 138, 30, .22); color: var(--mh-warning); }
.mh-app .pnx-ic svg { width: 26px; height: 26px; }

.mh-app .pnx-title { font-size: 19px; font-weight: 800; margin: 0 0 10px; color: var(--mh-ink); }
.mh-app .pnx-body  { font-size: 13.5px; line-height: 1.55; color: var(--mh-muted); margin: 0 0 14px; }
.mh-app .pnx-count { font-size: 12.5px; color: var(--mh-muted); margin: 0 0 20px; font-variant-numeric: tabular-nums; }

.mh-app .pnx-btn {
  min-width: 190px; height: 42px; padding: 0 20px; border-radius: 12px; border: none;
  background: var(--mh-green, #4E7C72); color: #fff; font-weight: 700; font-size: 13.5px;
  font-family: inherit; cursor: pointer;
}
.mh-app .pnx-btn:hover { background: var(--mh-green-d, #2E4A43); }

/* The notice renders IN PLACE OF the blocked page, so it needs to fill the content
   area rather than float above it. */
.mh-app .pnx-inline { display: grid; place-items: center; min-height: calc(70 * var(--mh-vh, 1vh)); padding: 24px; }