/* ============================================================
   NEXUS shared dialog system (nx-dialog)
   Single source of truth for dialog chrome: header, body,
   footer, buttons, sizing, responsiveness.
   Load order: LAST stylesheet in index.html (after
   nexus-ux-fixes.css) so it wins dialog-related cascades.

   Opt-in rollout:
   - Pattern A: component root uses .nx-dialog (custom header).
   - Pattern B: component root carries .nx-native (restores the
     native Radzen titlebar hidden globally by dialog-styles.css).
   Dialogs using neither class keep their current appearance.
   ============================================================ */

/* ---- Pattern B: restore native titlebar for opted-in dialogs ---- */
.rz-dialog:has(.nx-native) .rz-dialog-titlebar {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 18px 24px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
}
.rz-dialog:has(.nx-native) .rz-dialog-title {
  display: block !important;
  flex: 1 1 auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: #0F172A !important;
  user-select: none;
}
.rz-dialog:has(.nx-native) .rz-dialog-titlebar .rz-button,
.rz-dialog:has(.nx-native) .rz-dialog-titlebar .rz-dialog-close {
  color: #64748B !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.rz-dialog:has(.nx-native) .rz-dialog-content {
  background: #FFFFFF !important;
  padding: 20px 24px !important;
  overflow-y: auto !important;
}
.rz-dialog:has(.nx-native),
.rz-dialog:has(.nx-dialog) {
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 92vh !important;
  max-width: 96vw !important;
  overflow: hidden !important;
}
.rz-dialog:has(.nx-dialog) .rz-dialog-content {
  padding: 0 !important;
  background: #FFFFFF !important;
  overflow-y: auto !important;
}

/* ---- Pattern A: full-bleed custom dialog ---- */
.nx-dialog {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  max-height: 92vh;
  min-width: 0;
}
.nx-dialog__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #E5E7EB;
  flex: 0 0 auto;
}
.nx-dialog__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #F0FDF4;
  color: var(--nx-primary, #00753A);
}
.nx-dialog__icon--danger  { background: #FEF2F2; color: #DC2626; }
.nx-dialog__icon--warning { background: #FFFBEB; color: #B45309; }
.nx-dialog__icon--info    { background: #EFF6FF; color: #2563EB; }
.nx-dialog__heading { min-width: 0; }
.nx-dialog__title {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  line-height: 1.3;
}
.nx-dialog__subtitle {
  font-size: 13px;
  color: #64748B;
  margin: 2px 0 0;
}
.nx-dialog__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.nx-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
  background: #FFFFFF;
  flex: 0 0 auto;
}

/* ---- Buttons for hand-rolled (Pattern A) dialogs ---- */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nx-btn:disabled { opacity: .55; cursor: not-allowed; }
.nx-btn--secondary { background: #FFFFFF; border-color: #D1D5DB; color: #374151; }
.nx-btn--secondary:hover:not(:disabled) { background: #F9FAFB; }
.nx-btn--primary { background: var(--nx-primary, #00753A); color: #FFFFFF; }
.nx-btn--primary:hover:not(:disabled) { background: var(--nx-primary-hover, #00753A); }
.nx-btn--danger { background: #DC2626; color: #FFFFFF; }
.nx-btn--danger:hover:not(:disabled) { background: #B91C1C; }

/* ---- Responsive ---- */
@media (max-width: 576px) {
  .rz-dialog:has(.nx-native),
  .rz-dialog:has(.nx-dialog) {
    width: 96vw !important;
    max-height: 94vh !important;
  }
  .nx-dialog__header,
  .nx-dialog__body { padding-left: 16px; padding-right: 16px; }
  .nx-dialog__footer { padding: 12px 16px; flex-wrap: wrap; }
  .nx-btn { flex: 1 1 auto; }
}