/* dialog.css -- the ONE dialog (templates/_dialog.html, docs/specs/ui-acceptance.md).
   Modelled on the entity picker (.ep-modal), the best-behaved dialog in the app.
   What it fixes by construction, so a new dialog cannot forget it: inner padding
   on header / body / footer, a gap between body children, one radius, a
   viewport-sized box on a phone. Loaded by base.html on every page. */
.dlg {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  background: rgba(30, 27, 75, .38); backdrop-filter: blur(3px); padding: 1rem;
}
/* .dlg sets display:flex, which beats the [hidden] attribute's UA display:none
   (the CLAUDE.md gotcha) -- the guard ships in the same rule set. */
.dlg[hidden] { display: none !important; }
.dlg__box {
  display: flex; flex-direction: column; width: min(520px, 100%); max-height: min(88vh, 720px);
  background: #fff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(49, 46, 129, .22); overflow: hidden;
}
.dlg__box--sm { width: min(420px, 100%); }
.dlg__box--lg { width: min(720px, 100%); }
/* size="side": a detail sheet anchored right, full height -- for a record you read beside the list it came from. */
.dlg--side { justify-content: flex-end; align-items: stretch; padding: 0; }
.dlg__box--side { width: min(460px, 100%); max-height: none; height: 100%; border-radius: 0; border-width: 0 0 0 1px; }
.dlg__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 16px 20px; border-bottom: 1px solid #eef2f7; flex: none;
}
.dlg__title { font-size: 1.05rem; font-weight: 700; color: #111827; min-width: 0; overflow-wrap: anywhere; }
.dlg__x { border: 0; background: none; color: #6b7280; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 4px; }
.dlg__x:hover { color: #111827; }
.dlg__body {
  padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; flex: 1 1 auto; min-height: 0;
}
.dlg__foot {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px; border-top: 1px solid #eef2f7; flex: none;
}
@media (max-width: 560px) {
  .dlg { padding: 0; }
  .dlg__box, .dlg__box--sm, .dlg__box--lg, .dlg__box--side { width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
  .dlg__head, .dlg__body, .dlg__foot { padding-left: 16px; padding-right: 16px; }
}