.erp-modal { position: fixed; inset: 0; z-index: var(--erp-z-modal); display: none; align-items: center; justify-content: center; padding: var(--erp-space-4); background: rgba(var(--erp-rgb-black),.72); }
/* 2026-06-08: Bootstrap modal z-index hierarchy aligned with token authority.
   Before fix: site.css overrode .modal{1060} + .modal-backdrop.show{1059}, but
   design-system loaded later with .erp-modal{--erp-z-modal=1055} → modal(1055)
   < backdrop(1059) → click hit backdrop, not modal buttons (user complaint
   「按下送出 遮罩擋住」). site.css overrides have been shrunk (transitional
   shrink-only); design-system is now sole authority via tokens. */
.modal { z-index: var(--erp-z-modal); }
.modal-backdrop.show { z-index: var(--erp-z-modal-backdrop); }
.erp-modal.is-open { display: flex; }
.erp-modal__dialog { width: min(100%, 560px); max-height: calc(100vh - 48px); display: flex; }
.erp-modal__dialog--lg { width: min(100%, 860px); }
.erp-modal__dialog--xl { width: min(100%, 1120px); }
.erp-modal__content { width: 100%; max-height: inherit; display: flex; flex-direction: column; overflow: hidden; background: var(--erp-card); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); color: var(--erp-text-secondary); box-shadow: 0 30px 80px rgba(var(--erp-rgb-black),.62); }
.erp-modal__header, .erp-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--erp-space-3); padding: var(--erp-space-4) 20px; background: var(--erp-surface); border-bottom: 1px solid var(--erp-border); }
.erp-modal__footer { border-top: 1px solid var(--erp-border); border-bottom: 0; justify-content: flex-end; }
.erp-modal__title, .erp-drawer__title, .admin-tenants-drawer__title { margin: 0; color: var(--erp-gold-light); font-size: 18px; font-weight: 900; }
.erp-modal__title-stack { display: grid; gap: 4px; }
.erp-modal__subtitle { margin: 0; color: var(--erp-text-muted); font-size: 13px; line-height: 1.45; }
.erp-modal__body { min-height: 0; overflow: auto; padding: 20px; }
.erp-drawer { position: fixed; inset: 0 auto 0 0; z-index: var(--erp-z-drawer); width: min(420px, 92vw); display: none; flex-direction: column; background: var(--erp-card); border-right: 1px solid var(--erp-border); box-shadow: 20px 0 60px rgba(var(--erp-rgb-black),.54); }
.erp-drawer--end { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--erp-border); box-shadow: -20px 0 60px rgba(var(--erp-rgb-black),.54); }
.erp-drawer.is-open { display: flex; }
.erp-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--erp-space-3); padding: var(--erp-space-4); background: var(--erp-surface); border-bottom: 1px solid var(--erp-border); }
.erp-drawer__body { min-height: 0; overflow: auto; padding: var(--erp-space-4); }
.erp-overlay-backdrop { position: fixed; inset: 0; z-index: var(--erp-z-overlay-backdrop); background: rgba(var(--erp-rgb-black),.62); }
.erp-popover, .erp-tooltip, .erp-action-menu { background: var(--erp-surface); color: var(--erp-text-secondary); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-md); box-shadow: var(--erp-shadow-card); }
.el-popper, .el-dropdown__popper, .el-picker__popper, .el-select__popper { background: var(--erp-surface) !important; border: 1px solid var(--erp-border) !important; color: var(--erp-text-secondary) !important; }
.el-dropdown-menu, .el-select-dropdown, .el-picker-panel { background: var(--erp-surface) !important; border: 0 !important; color: var(--erp-text-secondary) !important; }
.el-dropdown-menu__item, .el-select-dropdown__item { color: var(--erp-text-secondary) !important; }
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:not(.is-disabled):focus, .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background: rgba(var(--erp-rgb-gold-dark),.16) !important; color: var(--erp-gold-light) !important; }
.el-message-box { background: var(--erp-card) !important; border: 1px solid var(--erp-border) !important; color: var(--erp-text-secondary) !important; }
.el-message-box__title { color: var(--erp-gold-light) !important; }
.el-message-box__content { color: var(--erp-text-secondary) !important; }
/* W4 DECISION-20260615-ui-enforcement-coverage-gaps: Element Plus surface bg
   overrides — blackgold baseline. Without these the EP vendor default (white)
   bleeds through: the el-drawer panel (tenants.js) rendered white below the
   dark .erp-card content; the el-dialog (TenantSettings/PurchaseControls) had
   the same gap. Mirrors the .el-popper / .el-message-box overrides above. */
.el-drawer, .el-drawer__body { background: var(--erp-card) !important; color: var(--erp-text-secondary) !important; }
.el-drawer__header { background: var(--erp-surface) !important; }
.el-dialog, .el-dialog__body { background: var(--erp-card) !important; color: var(--erp-text-secondary) !important; }
.el-dialog__header { background: var(--erp-surface) !important; }
.el-dialog__title { color: var(--erp-gold-light) !important; }
/* Scrim: EP default rgba(0,0,0,.5) is near-invisible on the blackgold dark
   shell (ux-nova) — strengthen el-drawer/el-dialog overlay so it reads as
   focus isolation. (el-message-box uses .el-overlay-message-box, unaffected.) */
.el-overlay { background: rgba(var(--erp-rgb-black),.72) !important; }

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1 / Phase 1b-iii Batch B (2026-05-13)
 * Migrated from erp-tailwind.css S19 (modal + offcanvas + btn-close).
 * Bootstrap `.modal-*` / `.offcanvas-*` / `.btn-close` get cyber-mandarin
 * dark surface treatment. `cyber-modal / modal-cyber-dialog / cyber-text-*`
 * variants are still served by site.css until Phase 1c.
 * ─────────────────────────────────────────────────────────────────────── */
.modal-content {
  overflow: hidden;
  border-radius: var(--erp-radius-md);
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  color: var(--erp-text-primary);
  box-shadow: 0 25px 50px -12px rgba(var(--erp-rgb-black), 0.45);
}
.modal-dialog {
  width: min(100% - 1rem, 42rem);
  margin-inline: auto;
}
.modal-lg {
  width: min(100% - 1rem, 56rem);
}
.modal-xl,
.modal-xxl {
  width: min(100% - 1rem, 72rem);
}
.modal-dialog-centered {
  min-height: calc(100% - 2rem);
  display: flex;
  align-items: center;
}
.modal-dialog-scrollable .modal-content {
  max-height: calc(100dvh - (var(--erp-space-4) * 2));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-header,
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-color: var(--erp-border);
  background: var(--erp-surface);
  padding: 1rem 1.25rem;
}
.modal-header {
  border-bottom: 1px solid var(--erp-border);
}
.modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--erp-border);
}
.modal-body {
  max-height: 70vh;
  overflow: auto;
  padding: 1.25rem;
}

/* Bootstrap adds .modal-open while a modal owns the page. Keep the help dock
 * outside that focus scope so its FAB cannot cover a modal footer or remain
 * keyboard-reachable behind the dialog. */
body.modal-open .erp-help-dock {
  display: none;
}
.btn-close {
  border-radius: var(--erp-radius-xs);
  opacity: 0.8;
  transition: opacity var(--erp-motion-fast);
  filter: invert(1) sepia(1) saturate(0.7) hue-rotate(350deg);
  /* 44px = ui-ux-pro-max §2 touch-target-size 標準（Apple HIG / Material）.
     Bootstrap 預設 1.5em (~24px) — 對觸控與運動障礙使用者太小。 */
  min-width: 44px;
  min-height: 44px;
  background-position: center;
  background-size: 1em 1em;
}
.btn-close:hover,
.btn-close:focus {
  opacity: 1;
}
.btn-close:focus-visible {
  outline: var(--erp-focus-ring);
  outline-offset: 2px;
}
.btn.btn-circle {
  display: inline-flex;
  min-height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0;
}
.btn-close.btn.btn-circle {
  border-color: color-mix(in oklab, var(--erp-gold-dark) 40%, transparent) !important;
  background: color-mix(in oklab, var(--erp-surface) 84%, transparent) !important;
}
.offcanvas,
.offcanvas-start,
.offcanvas-end {
  border-color: var(--erp-border);
  background: var(--erp-surface);
  color: var(--erp-text-primary);
  box-shadow: 0 25px 50px -12px rgba(var(--erp-rgb-black), 0.45);
}
.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--erp-border);
  background: var(--erp-surface);
  padding: 1rem 1.25rem;
}
.offcanvas-body {
  overflow: auto;
  padding: 1rem 1.25rem;
}

/* ───────────────────────────────────────────────────────────────────────
 * Detail-modal summary bar (erp-detail-modal.js)
 *
 * Pattern: [data-erp-detail-modal-card] sections use a summary bar that
 * collapses content behind a "open" button; clicking opens a modal-xl.
 * JS adds .erp-detail-modal-summary to the summary div on init.
 * Used across Receipts / Purchases / Inventories (13 instances / 5 pages).
 * ─────────────────────────────────────────────────────────────────────── */
.erp-detail-modal-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--erp-space-3);
  padding: var(--erp-space-3) var(--erp-space-4);
  background:
    linear-gradient(180deg,
      rgba(var(--erp-rgb-card), 0.96),
      rgba(var(--erp-rgb-black), 0.94));
  border-bottom: var(--erp-border-width-hairline) solid rgba(var(--erp-rgb-gold-primary), 0.14);
  border-radius: var(--erp-radius-md) var(--erp-radius-md) 0 0;
  color: var(--erp-text-secondary);
}
.erp-detail-modal-summary strong {
  color: var(--erp-gold-light);
}
.erp-detail-modal-summary .table-summary {
  color: var(--erp-text-muted);
}