/**
 * @file
 * Dialog/Modal styling for Nebion theme.
 * Overrides Claro/jQuery UI dialog styles.
 */

/* Backdrop */
.ui-widget-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Dialog Container */
.ui-dialog {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  background: var(--color-white);
}

/* Title Bar - match Claro specificity */
.ui-dialog .ui-dialog-titlebar {
  padding: var(--space-4) var(--space-4);
  padding-inline-end: 3rem; /* space for close button */
  color: var(--color-gray-900);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(135deg, rgba(0, 208, 132, 0.1), rgba(0, 208, 132, 0.05));
  border-bottom: 1px solid var(--color-primary);
}

/* Title */
.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

/* Close Button - match Claro specificity */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
  margin-inline: var(--space-2);
  border: none;
  border-radius: var(--radius-md);
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
  background: var(--color-gray-200);
  border-color: transparent;
}

/* Close Icon - override Claro's light gray SVG with darker one */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
  background-image: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%236b7280' stroke-width='1.5'/%3e%3c/svg%3e");
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover .ui-icon.ui-icon-closethick {
  background-image: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23111827' stroke-width='1.5'/%3e%3c/svg%3e");
}

/* Content - match Claro specificity */
.ui-dialog > .ui-dialog-content {
  background: var(--color-white);
  /*text-align: center;*/
  padding: var(--space-8) var(--space-4);
  color: var(--color-dark);
}

/* Button Pane - match Claro specificity */
.ui-dialog > .ui-dialog-buttonpane {
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset {
  margin: var(--space-3);
  margin-inline-start: 0;
  gap: var(--space-6);
}

/* Smaller buttons */
.ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset .button {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  min-height: auto;
}

/* Button base styling */
.ui-dialog .ui-dialog-buttonset .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin: 0;
}
/* Confirm form content styling */
.ui-dialog-content form.confirmation .confirmation__description {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2);
}

.ui-dialog-content form.confirmation .form-type--boolean {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  padding-inline-start: calc(var(--space-4) + 1.125rem + var(--space-2));
  margin: var(--space-4) 0;
  margin-inline-start: 0;
  transition: border-color var(--transition-fast);
}

.ui-dialog-content form.confirmation .form-type--boolean:hover {
  border-color: var(--color-gray-300);
}

.ui-dialog-content form.confirmation .form-type--boolean .form-boolean {
  margin-inline-start: calc(-1.125rem - var(--space-2));
}

.ui-dialog-content form.confirmation .form-type--boolean .form-item__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.ui-dialog-content form.confirmation .form-type--boolean .form-item__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: var(--space-1);
  line-height: var(--line-height-normal);
}

/* Node form fix */
.ui-dialog-content form.node-environment-form > .layout-form,
.ui-dialog-content form.node-project-form > .layout-form,
.ui-dialog-content form.node-server-form > .layout-form {
  display: block;
}