/* ============================================
   DIALOG CONTAINER OVERFLOW FIXES
   Ensures all containers properly contain their children
   ============================================ */

/* ============================================
   DIALOG COLOR SCHEME ISOLATION
   Force dialogs to use fixed colors, ignore color scheme variables
   ============================================ */

/* Override CSS variables in all dialogs - use fixed colors */
.dialog,
.dialog-overlay .dialog,
[id*="Dialog"] .dialog,
[class*="dialog"] .dialog {
  --card-border: #ddd !important;
  --accent-color: #134F5C !important;
  --text-primary: #333 !important;
  --text-secondary: #666 !important;
  --card-bg: white !important;
}

/* Force all borders in dialogs to use fixed #ddd */
.dialog,
.dialog *,
.dialog-overlay .dialog,
.dialog-overlay .dialog *,
[id*="Dialog"],
[id*="Dialog"] *,
[class*="dialog"],
[class*="dialog"] * {
  border-color: #ddd !important;
}

/* Exception: Allow specific border colors for buttons and special elements */
.dialog .dialog-button-primary,
.dialog button.dialog-button-primary,
.dialog .save-button,
.dialog .add-button,
.dialog .delete-button,
.dialog .restart-button,
.dialog .shutdown-button {
  border-color: transparent !important;
}

/* Exception: Allow red borders for delete/error elements */
.dialog [style*="color: #dc3545"],
.dialog [style*="color: #d32f2f"],
.dialog .error,
.dialog .delete-button {
  border-color: inherit !important;
}

/* Override inline styles that use CSS variables - force fixed colors */
.dialog [style*="var(--card-border"],
.dialog [style*="var(--accent-color"],
.dialog-overlay [style*="var(--card-border"],
.dialog-overlay [style*="var(--accent-color"],
[id*="Dialog"] [style*="var(--card-border"],
[id*="Dialog"] [style*="var(--accent-color"] {
  border-color: #ddd !important;
}

/* Specifically target border-right and border-bottom that use CSS variables */
.dialog [style*="border-right"][style*="var(--card-border"],
.dialog [style*="border-bottom"][style*="var(--card-border"],
.dialog-overlay [style*="border-right"][style*="var(--card-border"],
.dialog-overlay [style*="border-bottom"][style*="var(--card-border"] {
  border-right-color: #ddd !important;
  border-bottom-color: #ddd !important;
}

/* Main dialog - normal behavior, scroll if exceeds screen */
.dialog {
  max-width: 95vw !important;
  width: auto !important;
  min-width: 400px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.dialog-content {
  overflow-x: visible !important;
  overflow-y: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Main dialog body - normal behavior */
.dialog-body {
  overflow-x: visible !important;
  overflow-y: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Plan Modules/Tools Container - prevent overflow */
#planModulesToolsContainer {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#planModulesToolsContainer > div {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Module Container - only in plan modules/tools container */
#planModulesToolsContainer [style*="border: 1px solid #ddd"][style*="border-radius: 5px"] {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Sub-module Container - only in plan modules/tools container */
#planModulesToolsContainer [style*="background: #f5f5f5"][style*="border-radius: 3px"] {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Sub-modules wrapper div - only in plan modules/tools container */
#planModulesToolsContainer [id*="submodules_"] {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Features container - only in plan modules/tools container */
#planModulesToolsContainer [id*="features_"] {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Flex containers - only in plan modules/tools container */
#planModulesToolsContainer [style*="display: flex"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Select dropdowns - size based on content */
.dialog select[data-item-id] {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Limit dropdown containers */
.dialog [id*="_limit"] {
  overflow-x: visible !important;
  overflow-y: visible !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

/* Checkbox groups - prevent overlapping */
.dialog [style*="gap: 50px"] {
  gap: 50px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.dialog [style*="gap: 50px"] label {
  margin: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Dialog footer - ensure proper button layout */
.dialog-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 20px !important;
  border-top: 1px solid #e0e0e0 !important;
  padding-top: 15px !important;
}

.dialog-footer .dialog-button-primary,
.dialog-footer .dialog-button-secondary {
  padding: 8px 16px !important;
  border: none !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: auto !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.dialog-footer .dialog-button-primary {
  background: #6c757d !important;
  color: white !important;
}

.dialog-footer .dialog-button-secondary {
  background: #6c757d !important;
  color: white !important;
  margin-right: 10px !important;
}

.dialog-footer .delete-button,
.dialog-footer button.delete-button {
  background: #d32f2f !important;
  color: white !important;
}