/* ── DASHBOARD MEDICATION ALERT OVERLAY ──────────────────────────────
   Tap-through detail panel for a dose alert (js/features/med-alerts.js).

   Tokens: the --bg / --surface / --border / --muted / --text family
   ONLY, because body.dark-mode flips those. Do NOT style this from the
   Clinical Clarity --color-* palette, which is not flipped (same rule
   as skeletons.css and file-viewer.css).

   z-index 9000: above modals (300), BELOW the toast (9999) so a toast
   fired from here is still readable, and well below the file viewer
   (11000), the Reconnecting chip (11500) and the terms gate (12000). */

/* ⚠ TWO ELEMENTS, ONE SHELL. #ac-group-sheet is the alert-group list
   sheet (js/features/alerts-center.js), which reuses this overlay's
   container, .ma-box, .ma-close, .ma-head, .ma-badge and .ma-go rather
   than carrying a second copy of them that would drift. The two are
   never open at the same time (each hands over to the other), so they
   share the z-index as well. Only the sheet's item list is its own, in
   css/alerts-center.css. */
#med-alert-overlay, #ac-group-sheet { display: none; }

#med-alert-overlay.ma-open, #ac-group-sheet.ma-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, .55);
  align-items: center;
  justify-content: center;
  padding: calc(14px + env(safe-area-inset-top)) 14px
           calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

body.ma-lock { overflow: hidden; }

.ma-box {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  width: 100%;
  max-width: 460px;
  padding: 16px;
  /* Deliberately large: this is read at arm's length, on a phone, by
     someone mid-pass. */
  font-size: 17px;
  line-height: 1.4;
}

/* Close is FIRST in the DOM and first in the tab order, has a text
   label (never icon-only) and clears the 44px touch target. */
.ma-close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.ma-close:hover { background: var(--border); }
.ma-close:focus-visible { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }
.ma-close .lucide { width: 18px; height: 18px; }

/* Back to the group sheet this panel was opened from. NOT an exit, so
   it follows Close in the DOM and in the tab order.
   ⚠ The icon is the vendored arrow-right FLIPPED: arrow-left has no
   vendored geometry (js/icons/lucide-icons.js) and an unvendored name
   renders as nothing at all. A symmetric arrow mirrors exactly. */
.ma-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  margin: 0 0 12px 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.ma-back:hover { background: var(--border); }
.ma-back:focus-visible { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }
.ma-back .lucide { width: 18px; height: 18px; transform: scaleX(-1); }

.ma-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.ma-photo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.ma-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-photo-none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--muted);
  font-size: 22px;
  font-weight: 700;
}

.ma-who { flex: 1; min-width: 0; }
.ma-name { font-size: 22px; font-weight: 700; }
.ma-sub { font-size: 14px; color: var(--muted); }

.ma-badge {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 99px;
  white-space: nowrap;
}
/* Status colours stay literal: these are the SAME four status hues the
   alert rows and MAR cells already use, and they must read the same in
   both themes. */
.ma-missed   .ma-badge { background: #FCEBEB; color: #A32D2D; }
.ma-due      .ma-badge { background: #FAEEDA; color: #854F0B; }
.ma-upcoming .ma-badge { background: #ECEBE8; color: #5B5651; }

.ma-med {
  font-size: 24px;
  font-weight: 700;
  margin: 14px 0 4px;
  word-break: break-word;
}
.ma-dose { font-size: 18px; font-weight: 500; color: var(--muted); }

.ma-rows { margin-top: 10px; }
.ma-row {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.ma-k { flex: 0 0 38%; font-size: 15px; color: var(--muted); }
.ma-v { flex: 1; font-size: 17px; font-weight: 600; word-break: break-word; }

.ma-go {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--color-tertiary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.ma-go:hover { background: var(--color-tertiary-hover); }
.ma-go:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

/* The alert row itself is tappable — make that obvious without changing
   the card's density or the row's horizontal geometry.

   ⚠ DO NOT PUT A NEGATIVE MARGIN BACK HERE. This rule used to carry
   `margin: 0 -6px` with a matching `padding-left/right: 6px` to bleed
   the hover background into the card's gutter. The row it styles is
   built in js/features/dashboard.js with an INLINE `padding: 10px 0`,
   and an inline declaration beats a class selector — so the padding
   half was always discarded while the negative margin survived. Net
   effect on prod: every tappable (med) row sat 6px left of every
   non-tappable (form/staff/drill) row, and 6 of the status dot's 8px
   were cut away — NOT by the card, whose padding is 20px, but by
   #alerts-body, which carries `overflow-y: auto`; a computed
   `visible` on one axis becomes `auto` when the other is not, so that
   scroller clips horizontally at its own box. Hover and focus do not need the
   bleed; a row that shares its neighbours' box is worth more than a
   background that reaches 6px further. */
.ma-alert-row {
  cursor: pointer;
  border-radius: 8px;
}
.ma-alert-row:hover { background: var(--bg); }
.ma-alert-row:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: -2px; }

/* Brief highlight on the MAR card an alert jumped to. */
.mar-medication-card.ma-flash {
  box-shadow: 0 0 0 3px var(--color-tertiary);
  transition: box-shadow .4s;
}
@media (prefers-reduced-motion: reduce) {
  .mar-medication-card.ma-flash { transition: none; }
}

@media (max-width: 600px) {
  .ma-box { font-size: 18px; padding: 14px; border-radius: 14px; }
  .ma-name { font-size: 21px; }
  .ma-med { font-size: 22px; }
  .ma-k { flex-basis: 42%; }
}

@media print {
  #med-alert-overlay.ma-open { display: none !important; }
}