/* =============================================================================
   mh-passcard.css  -  PHASE 12: the ONE canonical pass card (PassCard.razor).
   Ported from the approved DESIGN "Soft Layered" pass, re-tinted from the design's
   sage palette to the MH PINE brand (no sage anywhere), app self-hosted fonts
   (Hanken Grotesk / Source Serif 4 / IBM Plex Mono - no CDN @import), and a status
   pill driven only by the lookup ColorHex (--c). Light is the default; body.dark
   carries the dark twin. Plain hyphens only (rule 10). Layout/spacing kept exact.
   ============================================================================= */

.mh-app .passcard {
  width: min(400px, calc(92 * var(--mh-vw))); position: relative; overflow: hidden;
  border-radius: 26px; padding: 26px 24px;
  border: 1.5px solid rgba(39, 52, 40, .32);   /* print cut edge */
  background: #E8EBF0;                           /* cool light surface (brand cream-2) */
  box-shadow: 0 18px 44px rgba(30, 38, 42, .12);
  font-family: var(--mh-font-head);
  break-inside: avoid;
}

/* faint background watermark MH mark (currentColor: dark pine in light, cream in dark) */
.mh-app .passcard .pc-watermark {
  position: absolute; right: -64px; bottom: -56px; width: 360px; height: auto;
  pointer-events: none; user-select: none; color: #243B35; opacity: .06;
}

.mh-app .passcard .pc-layer { position: relative; z-index: 1; }

/* ---- header: MH logo + wordmark + kind pill ---- */
.mh-app .passcard .pc-head { display: flex; align-items: center; gap: 11px; justify-content: center; margin-bottom: 26px; }
.mh-app .passcard .pc-logo { width: 34px; height: 34px; flex: none; border-radius: 999px; display: grid; place-items: center; background: rgba(78, 124, 114, .12); color: var(--mh-green-d); }
.mh-app .passcard .pc-logo svg { width: 20px; height: 20px; display: block; }
.mh-app .passcard .pc-org { font-weight: 700; font-size: 18px; color: var(--mh-green-d); }
.mh-app .passcard .pc-kind {
  margin-left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  color: var(--mh-green-d); background: rgba(78, 124, 114, .12);
}

/* ---- layered QR stack ---- */
.mh-app .passcard .pc-qrstack { position: relative; width: 196px; margin: 0 auto 22px; }
.mh-app .passcard .pc-qrstack::before { content: ""; position: absolute; inset: -16px; border-radius: 30px; transform: rotate(-4deg); background: rgba(78, 124, 114, .14); }
.mh-app .passcard .pc-qrstack::after  { content: ""; position: absolute; inset: -9px;  border-radius: 26px; transform: rotate(3deg);  background: rgba(78, 124, 114, .26); }
.mh-app .passcard .pc-qrwrap { position: relative; z-index: 2; background: #fff; border: 1px solid rgba(78, 124, 114, .30); border-radius: 22px; padding: 18px; box-shadow: 0 10px 24px rgba(30, 38, 42, .18); }
.mh-app .passcard .pc-qr { position: relative; display: block; }
.mh-app .passcard .pc-qr svg { display: block; width: 100%; height: auto; }
/* The canonical centered MH badge - identical to the small list tiles (.idc-qr .qr-logo):
   a pine-gradient chip with the white MH mark and a white ring for its own quiet zone.
   NOT the inline vector mark (that is the header chip only); nothing else overlays the QR. */
.mh-app .passcard .pc-qrlogo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22%; height: 22%; border-radius: 22%; padding: 4.5%; display: grid; place-items: center; background: linear-gradient(135deg, #2E4A43, #213A33); box-shadow: 0 0 0 4px #fff; }
.mh-app .passcard .pc-qrlogo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- name / id ---- */
.mh-app .passcard .pc-name { font-family: var(--mh-font-serif); font-weight: 600; font-size: 30px; text-align: center; letter-spacing: -.01em; color: var(--mh-ink); }
.mh-app .passcard .pc-id { text-align: center; font-size: 14px; margin-top: 5px; font-family: var(--mono); font-weight: 500; letter-spacing: .04em; color: var(--mh-green-d); }

/* ---- status pill (color ONLY from the lookup --c) ---- */
.mh-app .passcard .pc-pill {
  margin: 18px auto 24px; width: fit-content; display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; padding: 7px 17px; border-radius: 999px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--c) 45%, #fff);
  color: color-mix(in srgb, var(--c) 78%, #15201d); box-shadow: var(--mh-shadow-sm, 0 1px 3px rgba(30, 38, 42, .08));
}
.mh-app .passcard .pc-pill .pc-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c); }

/* ---- detail rows ---- */
.mh-app .passcard .pc-rows { display: flex; flex-direction: column; gap: 6px; }
.mh-app .passcard .pc-row { border-radius: 10px; padding: 7px 13px; background: #fff; border: 1px solid rgba(78, 124, 114, .45); box-shadow: 0 1px 2px rgba(30, 38, 42, .05); }
.mh-app .passcard .pc-rlabel { font-weight: 600; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 1px; color: var(--mh-muted); }
.mh-app .passcard .pc-rvalue { font-weight: 600; font-size: 13px; color: var(--mh-ink); }

/* =============================== DARK TWIN =============================== */
body.dark .mh-app .passcard {
  border: 1.5px solid rgba(120, 160, 150, .26);
  background:
    radial-gradient(130% 100% at 18% 0%, #264840 0%, transparent 55%),
    linear-gradient(165deg, #1F3A33 0%, #14211D 55%, #0D1512 100%);
  box-shadow: 0 22px 50px rgba(10, 16, 12, .5);
}
body.dark .mh-app .passcard .pc-watermark { color: #F4F1E8; opacity: .07; }
body.dark .mh-app .passcard .pc-logo { background: rgba(244, 241, 232, .14); color: #F4F1E8; }
body.dark .mh-app .passcard .pc-org { color: #F4F1E8; }
body.dark .mh-app .passcard .pc-kind { color: #BFD3CC; background: rgba(78, 124, 114, .22); border: 1px solid rgba(120, 160, 150, .30); }
body.dark .mh-app .passcard .pc-qrstack::before { background: rgba(120, 160, 150, .22); }
body.dark .mh-app .passcard .pc-qrstack::after  { background: rgba(78, 124, 114, .34); }
body.dark .mh-app .passcard .pc-qrwrap { border-color: rgba(120, 160, 150, .30); }
body.dark .mh-app .passcard .pc-name { color: #F7F3EB; }
body.dark .mh-app .passcard .pc-id { color: #9FBBB2; }
body.dark .mh-app .passcard .pc-pill { background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); color: #fff; box-shadow: none; }
body.dark .mh-app .passcard .pc-pill .pc-dot { background: color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 0 6px var(--c); }
body.dark .mh-app .passcard .pc-row { background: rgba(255, 255, 255, .07); border: 1px solid rgba(120, 160, 150, .26); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
body.dark .mh-app .passcard .pc-rlabel { color: #9FBBB2; }
body.dark .mh-app .passcard .pc-rvalue { color: #ECEFE9; }

/* Phase 12 Step 2 - compact program-card QR tile (reuses .idc-qr, opens the canonical Program pass). */
.mh-app .pg-qr { width: 44px; height: 44px; }
.mh-app .pg-qr .qr-logo { width: 13px; height: 13px; border-radius: 4px; box-shadow: 0 0 0 1.4px #fff; }

/* =================== Phase 12 Step 4: pass action bar =================== */
/* Sits BELOW the card, off the card markup (never in the PDF/print). Compact icon+label
   pills, Download emphasized in pine; wraps cleanly on narrow screens. */
.mh-app .pass-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.mh-app .pass-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 17px; border-radius: 999px; border: none; background: #fff; color: var(--mh-green-d); font-family: var(--mh-font-head); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); transition: transform .15s ease, background .15s ease, color .15s ease; }
.mh-app .pass-btn svg { width: 17px; height: 17px; flex: none; }
.mh-app .pass-btn:hover { transform: translateY(-1px); }
.mh-app .pass-btn:disabled { opacity: .6; cursor: default; transform: none; }
.mh-app .pass-btn--primary { background: var(--mh-green); color: #fff; box-shadow: 0 8px 22px rgba(46, 74, 67, .5); }
.mh-app .pass-btn--primary:hover { background: var(--mh-green-d); }
.mh-app .pass-emailwrap { position: relative; display: inline-flex; }
.mh-app .pass-emailmenu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 244px; background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 28, 25, .3); padding: 12px; z-index: 5; }
.mh-app .pass-emailhint { font-size: 11.5px; color: var(--mh-muted); line-height: 1.45; margin-bottom: 4px; }
.mh-app .pass-em-opt { display: block; width: 100%; text-align: left; border: 1px solid var(--mh-line); background: var(--mh-ctrl-fill); color: var(--mh-ink); font-family: var(--mh-font-head); font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 10px; cursor: pointer; margin-top: 6px; }
.mh-app .pass-em-opt:hover { border-color: var(--mh-green); color: var(--mh-green-d); }

/* Enlarge QR / scan mode */
.mh-app .pass-qrzoom { position: fixed; inset: 0; z-index: 100060; background: rgba(0, 0, 0, .86); display: grid; place-items: center; padding: 24px; }
.mh-app .pass-qrzoom-card { background: #fff; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.mh-app .pass-qrzoom-qr { position: relative; width: min(78vmin, 560px); height: min(78vmin, 560px); }
.mh-app .pass-qrzoom-qr svg { width: 100%; height: 100%; display: block; }
/* the exact card badge (pine chip + white MH mark), scaled to the enlarged QR */
.mh-app .pass-qrzoom-qr .pc-qrlogo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22%; height: 22%; border-radius: 22%; padding: 4.5%; display: grid; place-items: center; background: linear-gradient(135deg, #2E4A43, #213A33); box-shadow: 0 0 0 8px #fff; }
.mh-app .pass-qrzoom-qr .pc-qrlogo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mh-app .pass-qrzoom-code { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--mh-green-d); letter-spacing: .04em; }

@media print {
  .mh-app .passcard { box-shadow: none !important; border: 1.5px solid #27341F !important; }
}

/* =============================================================================
   QR PASS MODAL - FITS THE SCREEN (staff report, Aug 5 2026).
   "The QR Pass covers the whole screen and the buttons are hidden / unreachable
   unless you press F11."

   WHY IT HAPPENED: `.qr-wrap` is a centred flex column with NO height cap, and the
   card grows with its content - header + a 196px QR stack + name + id + pill + one
   row per detail field. With six rows it is ~1050px tall. On a viewport shorter than
   that, `align-items:center` overflows it EQUALLY top and bottom, so the action bar
   (which sits under the card) is pushed off the bottom edge with nothing to scroll -
   a fixed overlay does not scroll the page behind it. Taller content = buttons
   further off screen, which is why only F11 made them reachable.

   THE RULE: the ACTIONS are the one part that must never leave the screen - they are
   the only way out of this modal (the backdrop is deliberately inert). So the card
   scrolls and the bar is pinned.

   --mh-vh, NOT vh: the app applies a root zoom for Display resolution, and bare vh is
   resolved in layout px and NOT divided back down, so `100vh` paints as innerHeight*Z
   and at Large/XL would reintroduce the exact overflow this fixes.

   BLAST RADIUS: everything here is scoped to `.qr-modal`. PassCard's other host
   (NewClientWizard) is untouched, and Download/Print render server-side through
   QuestPDF (PassPdfService) - they never read this CSS, so the PRINTED pass is
   byte-identical to before.
   ========================================================================== */
.mh-app .qr-modal { align-items: center; overflow: hidden; }

.mh-app .qr-modal .qr-wrap {
  display: flex; flex-direction: column; align-items: center;
  max-height: calc(100 * var(--mh-vh) - 40px);
  min-height: 0;                 /* or the card cannot shrink inside the column */
  width: 100%;
}

/* The card is the flexible part: it shrinks and scrolls. overflow-y only - overflow-x
   stays hidden so the corner watermark is still clipped to the rounded card. */
.mh-app .qr-modal .qr-wrap > .passcard {
  flex: 0 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}

/* The action bar never shrinks and never scrolls away. */
.mh-app .qr-modal .qr-wrap > .pass-bar,
.mh-app .qr-modal .qr-wrap .pass-bar { flex: none; margin-top: 14px; }

/* ---- and make the card itself smaller on screen (the CEO asked for this directly:
   a 34" display should not be filled by one pass). Scoped to .qr-modal so the print
   render and the wizard's copy keep their original proportions. ---- */
.mh-app .qr-modal .passcard { width: min(340px, calc(92 * var(--mh-vw))); padding: 20px 20px; border-radius: 22px; }
.mh-app .qr-modal .passcard .pc-head { margin-bottom: 16px; }
.mh-app .qr-modal .passcard .pc-qrstack { width: 150px; margin-bottom: 16px; }
.mh-app .qr-modal .passcard .pc-qrwrap { padding: 12px; border-radius: 18px; }
.mh-app .qr-modal .passcard .pc-name { font-size: 23px; }
.mh-app .qr-modal .passcard .pc-id { font-size: 12.5px; }
.mh-app .qr-modal .passcard .pc-pill { margin: 12px auto 14px; font-size: 13px; padding: 6px 14px; }
.mh-app .qr-modal .passcard .pc-rows { gap: 5px; }
.mh-app .qr-modal .passcard .pc-row { padding: 6px 11px; border-radius: 9px; }
.mh-app .qr-modal .passcard .pc-rvalue { font-size: 12.5px; }
.mh-app .qr-modal .passcard .pc-watermark { width: 260px; right: -48px; bottom: -42px; }

/* A SHORT screen (a laptop, or any PC at Large zoom) gets a tighter card again, so the
   common case still fits with no scrolling at all rather than merely being reachable. */
@media (max-height: 820px) {
  .mh-app .qr-modal .passcard { padding: 16px 18px; }
  .mh-app .qr-modal .passcard .pc-head { margin-bottom: 12px; }
  .mh-app .qr-modal .passcard .pc-qrstack { width: 124px; margin-bottom: 12px; }
  .mh-app .qr-modal .passcard .pc-name { font-size: 20px; }
  .mh-app .qr-modal .passcard .pc-pill { margin: 10px auto 11px; }
  .mh-app .qr-modal .passcard .pc-row { padding: 5px 10px; }
}