/* ===== Shared third-party-medication dialog (PXMAR, contract §5.4) =====
   Unified scaffold for px-internal and carehome-portal.
   Tokens: --pxm-* ONLY (contract §6). Chips / PRN chip / flag badges /
   schedule row / drug-search CSS live in the bridge-injected
   #pxm-shared-css block — never re-declared here. The only estate class
   names below are surface-local layout overrides on shared markup
   (.mar-schedule-row / .mar-flag-row margins, the dm+d warfarin lock
   states, .mk-prn-invalid) that the dialog's JS relies on.

   Every rule is scoped :where(.pxm-tp-root), which adds no specificity.
   A head <link> cannot express "only while mounted", so the four
   estate-class rules below reach only this dialog, always. */
:where(.pxm-tp-root) .pxm-tp-dialog {
  border: none; border-radius: var(--pxm-radius-lg); box-shadow: var(--pxm-shadow-lg);
  padding: 0; max-width: 560px; width: 90vw;
  background: var(--pxm-bg-card); color: var(--pxm-text-primary);
  font-family: var(--pxm-font);
}
:where(.pxm-tp-root) .pxm-tp-dialog::backdrop { background: var(--pxm-bg-overlay); }
:where(.pxm-tp-root) .pxm-tp-header {
  padding: 16px; border-bottom: 1px solid var(--pxm-border);
  display: flex; align-items: center; justify-content: space-between;
}
:where(.pxm-tp-root) .pxm-tp-title { font-size: 18px; font-weight: 600; color: var(--pxm-text-primary); margin: 0; }
:where(.pxm-tp-root) .pxm-tp-close {
  width: 32px; height: 32px; border: none; background: transparent; color: var(--pxm-text-muted);
  cursor: pointer; border-radius: var(--pxm-radius-sm); display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
:where(.pxm-tp-root) .pxm-tp-close:hover { background: var(--pxm-bg-elevated); color: var(--pxm-text-primary); }
:where(.pxm-tp-root) .pxm-tp-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
:where(.pxm-tp-root) .pxm-tp-field { display: flex; flex-direction: column; gap: 4px; }
:where(.pxm-tp-root) .pxm-tp-field label { font-size: 12px; font-weight: 500; color: var(--pxm-text-secondary); }
:where(.pxm-tp-root) .pxm-tp-field input, :where(.pxm-tp-root) .pxm-tp-field textarea {
  padding: 8px 12px; font-size: 14px; font-family: var(--pxm-font);
  border: 1px solid var(--pxm-border); border-radius: var(--pxm-radius-md);
  background: var(--pxm-input-bg); color: var(--pxm-text-primary); outline: none;
}
:where(.pxm-tp-root) .pxm-tp-field textarea { min-height: 80px; resize: vertical; field-sizing: content; max-height: 120px; overflow-y: auto; }
:where(.pxm-tp-root) .pxm-tp-field input:focus, :where(.pxm-tp-root) .pxm-tp-field textarea:focus { border-color: var(--pxm-info); }
:where(.pxm-tp-root) .pxm-tp-row { display: flex; gap: 10px; flex-wrap: wrap; }
:where(.pxm-tp-root) .pxm-tp-row .pxm-tp-field { flex: 1; min-width: 120px; }
:where(.pxm-tp-root) .pxm-tp-note { font-size: 0.72rem; color: var(--pxm-text-muted); margin: 2px 0 0 0; }
:where(.pxm-tp-root) .pxm-tp-section { border-top: 1px solid var(--pxm-border); padding-top: 10px; margin-top: 6px; }
:where(.pxm-tp-root) .pxm-tp-section-label { font-size: 11px; color: var(--pxm-text-muted); margin: 0 0 8px; }
/* Was style="display:contents" on #tp-schedule-slot; a template carries no
   inline style, so the one declaration moves here as a class. */
:where(.pxm-tp-root) .pxm-tp-schedule-slot { display: contents; }
:where(.pxm-tp-root) .pxm-tp-footer {
  padding: 16px; border-top: 1px solid var(--pxm-border);
  display: flex; justify-content: flex-end; gap: 10px;
}
:where(.pxm-tp-root) .pxm-tp-btn {
  padding: 8px 20px; font-size: 14px; font-family: var(--pxm-font);
  background: var(--pxm-bg-elevated); color: var(--pxm-text-secondary);
  border: 1px solid var(--pxm-border); border-radius: var(--pxm-radius-md); cursor: pointer;
}
:where(.pxm-tp-root) .pxm-tp-btn:hover { border-color: var(--pxm-border-strong); color: var(--pxm-text-primary); }
:where(.pxm-tp-root) .pxm-tp-btn.pxm-tp-primary {
  background: var(--pxm-info); color: var(--pxm-text-inverse);
  border: 1px solid var(--pxm-info); font-weight: 600;
}
:where(.pxm-tp-root) .pxm-tp-btn.pxm-tp-primary:hover { filter: brightness(0.92); color: var(--pxm-text-inverse); }
/* Surface-local layout overrides on the shared (bridge-styled) markup. */
:where(.pxm-tp-root) .mar-schedule-row { margin: 8px 0; }
:where(.pxm-tp-root) .mar-flag-row { margin: 8px 0; }
/* dm+d-locked warfarin: a coded 3P item derives warfarin from dm+d
   (server-authoritative), so the badge becomes read-only — mirror the
   main Rx row, where warfarin is a static badge. Hide the checkbox,
   keep the warfarin colour, non-interactive. The badge is hidden
   entirely for a coded NON-warfarin drug (matching the Rx row, which
   only shows the warfarin badge when true). Free-text rows keep the
   editable checkbox. */
:where(.pxm-tp-root) label.mar-flag-badge[data-dmd-warf-locked] { cursor: default; }
:where(.pxm-tp-root) label.mar-flag-badge[data-dmd-warf-locked] input { display: none; }
:where(.pxm-tp-root) label.mar-flag-badge[data-dmd-warf-hidden] { display: none; }
/* PRN dose invalid state — pinned invalid-input reds (CR-INT-13). */
:where(.pxm-tp-root) .mar-prn-dose-input.mk-prn-invalid {
  border: 2px solid #dc2626;
  background: #fef2f2;
  color: #7f1d1d;
}
/* Toasts (warfarin/insulin mutex notices AND submit validation
   errors) render via the bridge singleton PXMAR.toast — a top-layer
   [popover] element, so it stacks ABOVE this showModal() dialog
   (RULING NC-10: top-centre, styles in #pxm-shared-css .pxm-toast —
   no per-template toast CSS or element). */
@media (max-width: 768px) {
  :where(.pxm-tp-root) .pxm-tp-dialog { width: 95vw; }
  :where(.pxm-tp-root) .pxm-tp-row { flex-direction: column; }
}