/* Shared notice surfaces: match the app's blue actions and neutral light/navy panels. */
:root {
  --notice-surface: #fff;
  --notice-soft: #f5f8fc;
  --notice-ink: #172033;
  --notice-muted: #475569;
  --notice-line: #d6dfec;
  --notice-control: #edf2f8;
  --notice-hover: #e0e9f5;
}
body:is([data-theme="dark"], .dark-mode, :has(.admin-shell)) {
  --notice-surface: #142238;
  --notice-soft: #182b44;
  --notice-ink: #edf4ff;
  --notice-muted: #c3d0e2;
  --notice-line: #3b5270;
  --notice-control: #263d57;
  --notice-hover: #344f70;
}
dialog.app-dialog,
body dialog:has(> .dialog-form.compact-dialog-form) {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--notice-line);
  border-radius: 16px;
  background: var(--notice-surface);
  color: var(--notice-ink);
  box-shadow: 0 24px 80px #02061766;
  font: 14px/1.55 system-ui, sans-serif;
  color-scheme: light;
}
body:is([data-theme="dark"], .dark-mode, :has(.admin-shell)) :is(dialog.app-dialog, dialog:has(> .compact-dialog-form)) { color-scheme: dark; }
.app-dialog::backdrop,
dialog:has(> .compact-dialog-form)::backdrop { background: #02061799; }
.app-dialog .app-dialog-card,
body dialog .dialog-form.compact-dialog-form,
body .notice-dialog.is-centered-only .compact-dialog-form {
  display: block;
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
  padding: 22px;
  background: var(--notice-surface);
  color: var(--notice-ink);
  box-shadow: none;
}
.app-dialog .app-dialog-header,
body dialog .compact-dialog-form > .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: auto;
  margin: -22px -22px 20px;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--notice-line) !important;
  background: var(--notice-soft) !important;
  color: var(--notice-ink) !important;
  text-align: left;
}
body .notice-dialog.is-centered-only .compact-dialog-header > div { width: auto; }
body .notice-dialog.is-centered-only .compact-dialog-header { width: auto; justify-content: space-between; }
.compact-dialog-form > .dialog-header > div { min-width: 0; flex: 1; }
.app-dialog h2,
body dialog .compact-dialog-form .dialog-title,
.compact-dialog-form > .dialog-header > strong {
  margin: 0;
  font: 700 18px/1.4 system-ui, sans-serif;
  letter-spacing: -.015em;
  color: var(--notice-ink) !important;
  overflow-wrap: anywhere;
}
.app-dialog p,
body dialog .compact-dialog-form > :is(.confirm-dialog-message, p),
body .notice-dialog.is-centered-only .confirm-dialog-message {
  margin: 0 0 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  color: var(--notice-muted) !important;
}
.app-dialog .app-dialog-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0 0 20px;
  padding: 10px 12px;
  border: 1px solid var(--notice-line);
  border-radius: 9px;
  background: var(--notice-soft);
  color: var(--notice-ink);
  font: inherit;
}
.app-dialog textarea.app-dialog-input { min-height: 140px; resize: vertical; }
.app-dialog .app-dialog-actions,
body dialog .compact-dialog-form > .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px -22px -22px;
  padding: 16px 20px;
  border: 0;
  border-top: 1px solid var(--notice-line) !important;
  background: var(--notice-soft) !important;
  box-shadow: none;
}
body .notice-dialog.is-centered-only .compact-dialog-actions { width: auto; justify-content: center; }
.app-dialog .app-dialog-actions button,
body dialog .compact-dialog-form > .dialog-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--notice-line);
  border-radius: 9px;
  background: var(--notice-control);
  color: var(--notice-ink);
  box-shadow: none;
  font: 600 14px/1.35 system-ui, sans-serif;
  cursor: pointer;
}
.app-dialog .app-dialog-actions button:hover,
body dialog .compact-dialog-form > .dialog-actions .btn:hover { background: var(--notice-hover); }
.app-dialog .app-dialog-actions .app-dialog-primary,
body dialog .compact-dialog-form > .dialog-actions .btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.app-dialog .app-dialog-actions .app-dialog-primary:hover,
body dialog .compact-dialog-form > .dialog-actions .btn.primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
body dialog .compact-dialog-form > .dialog-actions .btn.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
body dialog .compact-dialog-form > .dialog-actions .btn.danger:hover { background: #991b1b; border-color: #991b1b; }
body .app-dialog-close,
body dialog .compact-dialog-form > .dialog-header > :is(.icon-btn, [data-close]) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0 0 0 auto;
  border: 1px solid var(--notice-line);
  border-radius: 10px;
  background: var(--notice-control);
  color: var(--notice-ink);
  box-shadow: none;
  text-shadow: none;
  font: 400 26px/1 system-ui, sans-serif;
  cursor: pointer;
}
body .app-dialog-close:hover,
body dialog .compact-dialog-form > .dialog-header > :is(.icon-btn, [data-close]):hover { background: var(--notice-hover); }
.app-dialog :is(button, input, textarea):focus-visible,
.compact-dialog-form :is(button, input, textarea):focus-visible,
body .app-dialog-close:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.confirm-box > .notice-overlay-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.session-expired-modal { position: relative; }
.session-expired-modal > .app-dialog-close { position: absolute; top: 12px; right: 12px; --notice-line: #3b5270; --notice-control: #263d57; --notice-hover: #344f70; --notice-ink: #edf4ff; }
.session-expired-modal > h2 { padding-inline: 26px; }
.app-dialog-fallback { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; background: #02061799; }
.app-dialog-fallback > .app-dialog { position: relative; inset: auto; }
@media (min-width: 901px) {
  body:has(#appQuickActions) :is(dialog.app-dialog, dialog:has(> .compact-dialog-form)) { zoom: calc(1 / var(--ui-scale, .67)); }
}
@media (max-width: 480px) {
  .app-dialog .app-dialog-card,
  body dialog .dialog-form.compact-dialog-form,
  body .notice-dialog.is-centered-only .compact-dialog-form { padding: 18px; }
  .app-dialog .app-dialog-header,
  body dialog .compact-dialog-form > .dialog-header { margin: -18px -18px 18px; padding: 14px 16px; }
  .app-dialog .app-dialog-actions,
  body dialog .compact-dialog-form > .dialog-actions { margin: 18px -18px -18px; padding: 14px 16px; }
}