/**
 * Layout Builder Enhanced Admin Experience
 */

/* ============================================
   Layout Builder Active Indicator
   ============================================ */

body.layout-builder-enabled {
  border-top: 4px solid var(--color-primary);
}

body.layout-builder-enabled::before {
  content: '✏️ Layout Builder Active - Click "Save layout" when finished';
  display: block;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: var(--shadow-lg);
}

/* ============================================
   Region Enhancements
   ============================================ */

.layout-builder__region {
  border: 2px dashed var(--color-text-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 120px;
  transition: all var(--transition);
  position: relative;
  margin-bottom: var(--space-4);
}

.layout-builder__region::before {
  content: attr(data-region-label);
  position: absolute;
  top: -12px;
  left: var(--space-4);
  background: white;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.layout-builder__region:hover {
  border-color: var(--color-primary);
  background: rgba(102, 143, 195, 0.02);
}

.layout-builder__region:empty::after {
  content: 'Click "Add block" to add content to this region';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: var(--color-text-light);
  font-style: italic;
  font-size: var(--text-sm);
}

.layout-builder__region:empty {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(0, 0, 0, 0.02) 10px,
      rgba(0, 0, 0, 0.02) 20px
    );
}

/* Section Type Indicators */
.layout--onecol .layout-builder__region::before {
  content: 'Full Width Section';
}

.layout--twocol .layout-builder__region::before {
  content: 'Two Column Section';
}

.layout--threecol .layout-builder__region::before {
  content: 'Three Column Section';
}

/* ============================================
   Add Block/Section Buttons
   ============================================ */

.layout-builder__add-block,
.layout-builder__add-section {
  background: var(--color-primary) !important;
  color: white !important;
  border: none !important;
  padding: var(--space-3) var(--space-6) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  box-shadow: var(--shadow-md) !important;
}

.layout-builder__add-block:hover,
.layout-builder__add-section:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.layout-builder__add-block a,
.layout-builder__add-section a {
  color: white;
}

.layout-builder__link--add {
  background: none;
  padding-inline-start: 0;
}

/* ============================================
   Block Labels in Edit Mode
   ============================================ */

.layout-builder-block {
  position: relative;
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  background-color: unset;
}

.layout-builder-block:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* Component Preview in Modal */
#layout-builder-modal .layout-builder-block {
  background: var(--color-background-alt);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* ============================================
   Drag and Drop Visual Feedback
   ============================================ */

.layout-builder__region.is-dragging-over {
  background: rgba(102, 143, 195, 0.1) !important;
  border-color: var(--color-primary) !important;
  border-style: solid !important;
}

.layout-builder-block.is-dragging {
  opacity: 0.5 !important;
  transform: scale(0.98) !important;
}

/* Preview Mode */
.layout-builder__region--preview {
  border-style: dotted !important;
  opacity: 0.8;
}

/* ============================================
   Contextual Links
   ============================================ */

.contextual {
  border-radius: var(--radius-sm) !important;
}

.contextual-links {
  background: white !important;
  border: 1px solid var(--color-gray-300) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden !important;
}

.contextual-links a {
  padding: var(--space-3) var(--space-4) !important;
  transition: all var(--transition) !important;
}

.contextual-links a:hover {
  background: var(--color-background-alt) !important;
  color: var(--color-primary) !important;
}

/* ============================================
   Messages - Status, Warning, Error
   ============================================ */

/* Status - Green */
.messages--status {
  background: #f0fdf4;
  color: #166534;
  border-left: 4px solid #22c55e;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.messages--status::before {
  content: '✅';
  flex-shrink: 0;
}

/* Warning - Yellow */
.messages--warning {
  background: #fefce8;
  color: #854d0e;
  border-left: 4px solid #eab308;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.messages--warning::before {
  content: '⚠️';
  flex-shrink: 0;
}

/* Error - Red */
.messages--error {
  background: #fef2f2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.messages--error::before {
  content: '❌';
  flex-shrink: 0;
}

/* Info - Blue */
.messages--info {
  background: #eff6ff;
  color: #1e40af;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.messages--info::before {
  content: 'ℹ️';
  flex-shrink: 0;
}

/* Messages wrapper */
.messages__wrapper {
  max-width: var(--block-container-contain);
  padding: 0 var(--space-4);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Links inside messages */
.messages a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.messages a:hover {
  opacity: 0.8;
}

/* All messages base style */
[data-drupal-messages] [role="contentinfo"] {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  max-width: var(--block-container-contain);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
}

[data-drupal-messages] [role="contentinfo"] h2 {
  display: none;
}

/* Status - Green */
[data-drupal-messages] [role="contentinfo"][aria-label="Status message"] {
  background: #f0fdf4;
  color: #166534;
  border-left: 4px solid #22c55e;
}

[data-drupal-messages] [role="contentinfo"][aria-label="Status message"]::before {
  content: '✅';
  flex-shrink: 0;
}

/* Warning - Yellow */
[data-drupal-messages] [role="contentinfo"][aria-label="Warning message"] {
  background: #fefce8;
  color: #854d0e;
  border-left: 4px solid #eab308;
}

[data-drupal-messages] [role="contentinfo"][aria-label="Warning message"]::before {
  content: '⚠️';
  flex-shrink: 0;
}

/* Error - Red */
[data-drupal-messages] [role="contentinfo"][aria-label="Error message"] {
  background: #fef2f2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

[data-drupal-messages] [role="contentinfo"][aria-label="Error message"]::before {
  content: '❌';
  flex-shrink: 0;
}

/* Info/Help messages match help block style */
[data-drupal-messages] [role="contentinfo"][aria-label="Info message"],
[data-drupal-messages] [role="contentinfo"][aria-label="Information message"] {
  background: #eff6ff;
  color: #1e40af;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  max-width: var(--block-container-contain);
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-sizing: border-box;
}

[data-drupal-messages] [role="contentinfo"][aria-label="Info message"]::before,
[data-drupal-messages] [role="contentinfo"][aria-label="Information message"]::before {
  content: 'ℹ️';
  flex-shrink: 0;
}


#block-modern-minimal-atomic-help[role="complementary"] {
  background: #eff6ff;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  max-width: var(--block-container-contain);
  margin-inline: auto;
  box-sizing: border-box;
  gap: var(--space-3);
  display: flex;
  align-items: flex-start;
  color: #1e40af;
  box-shadow: var(--shadow-sm);
}

#block-modern-minimal-atomic-help[role="complementary"]::before {
  content: 'ℹ️';
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

#block-modern-minimal-atomic-help[role="complementary"] p {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #1e40af;
}

#block-modern-minimal-atomic-help[role="complementary"] p:last-child {
  margin-bottom: 0;
}

#block-modern-minimal-atomic-help[role="complementary"] a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

#block-modern-minimal-atomic-help[role="complementary"] a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}



/* ============================================
   Layout Builder Messages Container
   ============================================ */

.layout-builder__message {
  margin-bottom: var(--space-6);
}

.layout-builder__message .messages {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.layout-builder__message .messages--status {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  color: #166534;
}

.layout-builder__message .messages--warning {
  background: #fefce8;
  border-left: 4px solid #eab308;
  color: #854d0e;
}

.layout-builder__message .messages--error {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  color: #991b1b;
}

/* ============================================
   Help Block
   ============================================ */

#block-modern-minimal-atomic-help {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: 0 2px 8px rgba(102, 143, 195, 0.1);
}

#block-modern-minimal-atomic-help p {
  margin: 0;
  margin-bottom: var(--space-3);
  color: #1e40af;
  font-size: var(--text-base);
  line-height: 1.6;
}

#block-modern-minimal-atomic-help p:last-child {
  margin-bottom: 0;
}

#block-modern-minimal-atomic-help a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 600;
  transition: color var(--transition);
}

#block-modern-minimal-atomic-help a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

#block-modern-minimal-atomic-help::before {
  content: 'ℹ️';
  font-size: 1.25rem;
  margin-right: var(--space-3);
  float: left;
}

/* ============================================
   Layout Builder Form Container
   ============================================ */

#node-page-layout-builder-form {
  max-width: var(--block-container-contain);
  padding: 0 var(--container-padding);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

/* ============================================
   Form Actions (Save/Discard Buttons)
   ============================================ */

.layout-builder-form .form-actions {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  padding: var(--space-4) var(--space-6);
  margin: calc(var(--space-4) * -1) 0 var(--space-8);
  border-bottom: 2px solid var(--color-gray-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Save Layout Button */
.layout-builder-form .form-actions #edit-submit {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 2px 4px rgba(102, 143, 195, 0.2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.layout-builder-form .form-actions #edit-submit::before {
  content: '💾';
  font-size: 1.125rem;
}

.layout-builder-form .form-actions #edit-submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 143, 195, 0.3);
}

/* Discard Changes Button */
.layout-builder-form .form-actions #edit-discard-changes {
  background: white;
  color: var(--color-text);
  border: 2px solid var(--color-gray-300);
  padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.layout-builder-form .form-actions #edit-discard-changes::before {
  content: '↩️';
  font-size: 1rem;
}

.layout-builder-form .form-actions #edit-discard-changes:hover {
  background: var(--color-background-alt);
  border-color: var(--color-gray-400);
  transform: translateY(-1px);
}

/* Revert to Defaults Button */
.layout-builder-form .form-actions #edit-revert {
  background: white;
  color: var(--color-danger);
  border: 2px solid var(--color-danger);
  padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.layout-builder-form .form-actions #edit-revert::before {
  content: '⚠️';
  font-size: 1rem;
}

.layout-builder-form .form-actions #edit-revert:hover {
  background: var(--color-danger);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* ============================================
   Page Title in Layout Builder
   ============================================ */

#block-modern-minimal-atomic-page-title h1 {
  font-size: var(--text-3xl);
  color: var(--color-text);
}

#block-modern-minimal-atomic-page-title h1 .placeholder {
  color: var(--color-primary);
  font-style: normal;
  font-weight: 700;
}

/* ============================================
   Component Spacing Guides
   ============================================ */

.layout-builder-enabled .hero,
.layout-builder-enabled .cta {
  outline: 2px dashed rgba(102, 143, 195, 0.3);
  outline-offset: 4px;
}

.layout-builder-enabled .hero:hover,
.layout-builder-enabled .cta:hover {
  outline-color: var(--color-primary);
}

/* ============================================
   Accessibility Focus States
   ============================================ */

.layout-builder__add-block:focus,
.layout-builder__add-section:focus {
  outline: 3px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

.layout-builder-form .form-actions input:focus,
.layout-builder-form .form-actions button:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

#block-modern-minimal-atomic-help a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   Loading State
   ============================================ */

.layout-builder-form .form-actions #edit-submit.is-loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   MODAL DIALOG STYLING
   ============================================ */

.ui-dialog {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  background: var(--color-background) !important;
  overflow: hidden !important;
}

.ui-dialog-titlebar {
  background: var(--color-primary) !important;
  color: white !important;
  padding: var(--space-4) var(--space-6) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-heading) !important;
}

.ui-dialog-title {
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  color: white !important;
}

.ui-dialog-titlebar-close {
  background: transparent !important;
  border: none !important;
  color: white !important;
  opacity: 0.8 !important;
  transition: opacity var(--transition) !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: var(--radius-sm) !important;
  right: var(--space-4) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.ui-dialog-titlebar-close:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.ui-dialog-titlebar-close .ui-icon {
  background: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

.ui-dialog-titlebar-close .ui-icon::before {
  content: "✕";
  font-size: var(--text-xl);
  font-weight: 300;
  display: block;
  text-align: center;
}

.ui-dialog-content {
  padding: var(--space-6) !important;
  background: var(--color-background) !important;
  overflow-y: auto !important;
  max-height: 70vh !important;
}

.ui-dialog .form-item {
  margin-bottom: var(--space-6);
}

.ui-dialog label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text) !important;
  font-size: var(--text-sm);
}

.ui-dialog .description {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-top: var(--space-2);
  line-height: 1.5;
}

.ui-dialog input[type="text"],
.ui-dialog input[type="email"],
.ui-dialog input[type="url"],
.ui-dialog input[type="number"],
.ui-dialog textarea,
.ui-dialog select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-base);
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--color-background);
  color: var(--color-text);
}

#drupal-off-canvas-wrapper input {
  border: solid var(--color-border);
}

.ui-dialog input:focus,
.ui-dialog textarea:focus,
.ui-dialog select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(102, 143, 195, 0.1);
}

.ui-dialog textarea {
  min-height: 6rem;
  resize: vertical;
}

.ui-dialog details {
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ui-dialog summary {
  padding: var(--space-4);
  background: var(--color-background-alt);
  cursor: pointer;
  font-weight: 600;
  transition: background-color var(--transition);
}

.ui-dialog summary:hover {
  background: var(--color-gray-200);
}

.ui-dialog details[open] > summary {
  border-bottom: 1px solid var(--color-gray-300);
}

.ui-dialog .details-wrapper {
  padding: var(--space-4);
}

.ui-dialog .vertical-tabs {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ui-dialog .vertical-tabs__menu {
  background: var(--color-background-alt);
  border-right: 1px solid var(--color-gray-300);
}

.ui-dialog .vertical-tabs__menu-item {
  border: none;
  border-bottom: 1px solid var(--color-gray-300);
}

.ui-dialog .vertical-tabs__menu-item a {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition);
}

.ui-dialog .vertical-tabs__menu-item a:hover {
  background: var(--color-gray-200);
}

.ui-dialog .vertical-tabs__menu-item.is-selected a {
  background: var(--color-background);
  font-weight: 600;
  color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
}

.ui-dialog .vertical-tabs__pane {
  padding: var(--space-6);
}

.ui-dialog .image-widget,
.ui-dialog .file-widget {
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  transition: border-color var(--transition);
}

.ui-dialog .image-widget:hover,
.ui-dialog .file-widget:hover {
  border-color: var(--color-primary);
}

.ui-dialog .form-type-checkbox,
.ui-dialog .form-type-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-dialog input[type="checkbox"],
.ui-dialog input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.ui-dialog-buttonpane {
  background: var(--color-background-alt) !important;
  border-top: 1px solid var(--color-gray-300) !important;
  padding: var(--space-4) var(--space-6) !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: var(--space-3) !important;
}

.ui-dialog-buttonset {
  display: flex !important;
  gap: var(--space-3) !important;
}

.ui-dialog-buttonset button,
.ui-dialog .form-actions button,
.ui-dialog .form-actions input[type="submit"] {
  padding: var(--space-3) var(--space-6) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  font-family: var(--font-base) !important;
}

.ui-dialog-buttonset .button--primary,
.ui-dialog .button--primary,
.ui-dialog input[type="submit"] {
  background: var(--color-primary) !important;
  color: white !important;
}

.ui-dialog-buttonset .button--primary:hover,
.ui-dialog .button--primary:hover,
.ui-dialog input[type="submit"]:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.ui-dialog-buttonset .button,
.ui-dialog .button {
  background: var(--color-background) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-gray-300) !important;
}

.ui-dialog-buttonset .button:hover,
.ui-dialog .button:hover {
  background: var(--color-background-alt) !important;
  border-color: var(--color-secondary) !important;
}

.ui-dialog .button--danger {
  background: var(--color-danger) !important;
  color: white !important;
}

.ui-dialog .button--danger:hover {
  background: #dc2626 !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.ui-dialog .form-actions {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-300);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.ui-dialog .field-multiple-table {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ui-dialog .field-multiple-table th {
  background: var(--color-background-alt);
  padding: var(--space-3);
  font-weight: 600;
}

.ui-dialog .field-multiple-table td {
  padding: var(--space-3);
  border-top: 1px solid var(--color-gray-300);
}

.ui-dialog .field-add-more-submit {
  margin-top: var(--space-3) !important;
  padding: var(--space-2) var(--space-4) !important;
  background: var(--color-background-alt) !important;
  border: 1px solid var(--color-gray-300) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  font-size: var(--text-sm) !important;
}

.ui-dialog .field-add-more-submit:hover {
  background: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
}

.ui-dialog .ajax-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-3);
}

.ui-dialog .ajax-progress-throbber .throbber {
  border: 2px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  animation: spin 0.6s linear infinite;
}

.ui-dialog .form-required::after {
  content: "*";
  color: var(--color-danger);
  margin-left: var(--space-1);
}

.ui-dialog .form-item--error input,
.ui-dialog .form-item--error textarea,
.ui-dialog .form-item--error select {
  border-color: var(--color-danger) !important;
}

.ui-dialog .form-item--error-message {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-widget-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(2px) !important;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
  body.layout-builder-enabled::before {
    font-size: var(--text-sm);
    padding: var(--space-2);
  }

  .layout-builder__region {
    padding: var(--space-3);
  }

  .layout-builder__add-block,
  .layout-builder__add-section {
    width: 100%;
    margin-bottom: var(--space-2);
  }

  .layout-builder-form .form-actions {
    position: relative;
    padding: var(--space-4);
    flex-direction: column;
    align-items: stretch;
  }

  h1 {
    margin-left: var(--space-4);
  }

  .layout-builder-form .form-actions input[type="submit"],
  .layout-builder-form .form-actions button {
    width: 100%;
    justify-content: center;
  }

  .layout-builder-form .form-actions #edit-revert {
    margin-left: 0;
    order: 3;
  }

  #block-modern-minimal-atomic-help {
    padding: var(--space-4);
    margin-bottom: var(--space-6);
  }

  #block-modern-minimal-atomic-help p {
    font-size: var(--text-sm);
  }

  .ui-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
  }

  .ui-dialog-content {
    max-height: 60vh !important;
  }

  .ui-dialog-titlebar {
    padding: var(--space-3) var(--space-4) !important;
  }

  .ui-dialog-title {
    font-size: var(--text-lg) !important;
  }

  .ui-dialog-buttonpane {
    padding: var(--space-3) var(--space-4) !important;
  }

  .ui-dialog-buttonset {
    flex-direction: column !important;
    width: 100% !important;
  }

  .ui-dialog-buttonset button {
    width: 100% !important;
  }
}