/**
 * Strategy Feature Styles
 * 
 * Styles for the visual trading strategy builder interface.
 * Provides drag-and-drop functionality, trigger/action components,
 * and canvas-based visual strategy editor.
 * 
 * Features:
 * - Drag-and-drop strategy components
 * - Visual canvas for node-based strategy building
 * - Trigger and action item styling
 * - Connection line rendering
 * - Dark mode support
 * 
 * Dependencies:
 * - palette.css: Color variables and theme definitions
 * - Bootstrap 5: Base layout and utilities
 * 
 * Related Files:
 * - public/strategies.js: JavaScript for canvas interaction
 * - app/views/strategies/: ERB templates for strategy UI
 * 
 * @see STYLE_GUIDE.md for CSS conventions
 * @author Algorithmic Trading System Team
 */

/* ==========================================================================
   Color Variables Reference
   Note: All color variables are defined in palette.css
   This file uses those variables for consistent theming
   ========================================================================== */

/* ==========================================================================
   Strategy Container & Layout
   ========================================================================== */

/**
 * Strategy Card Styles
 * 
 * Cards that contain strategy information and controls.
 * Includes hover effects for better user interaction.
 */
.strategy-card {
  /* Smooth transitions for hover effects */
  transition: all 0.3s ease;
  border-radius: 12px;
}

.strategy-card:hover {
  /* Elevated shadow on hover for depth perception */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Active strategy cards - highlighted with thicker borders */
.strategy-card.border-success {
  border-width: 2px;
}

.strategy-card.border-primary {
  border-width: 2px;
}

/* --------------------------------------------------------------------------
   Trigger and Action Items
   -------------------------------------------------------------------------- */

/**
 * Trigger and Action Item Containers
 * 
 * Draggable components that represent strategy triggers (conditions)
 * and actions (trades to execute). Styled for clear visual hierarchy
 * and drag-and-drop interaction.
 */
.trigger-item,
.action-item {
  /* Visual styling */
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  
  /* Spacing */
  padding: 1rem;
  margin-bottom: 1rem;
  
  /* Layout */
  position: relative;
  
  /* Interaction */
  cursor: move;
  transition: all 0.2s ease;
}

/* Hover state - provides visual feedback for draggable items */
.trigger-item:hover,
.action-item:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: #adb5bd;
  transform: translateY(-2px);  /* Subtle lift effect */
}

/* Ghost state during drag operation - reduced opacity */
.trigger-item.sortable-ghost,
.action-item.sortable-ghost {
  opacity: 0.4;
  background: #e9ecef;
}

/* --------------------------------------------------------------------------
   Drag and Drop Controls
   -------------------------------------------------------------------------- */

/**
 * Drag Handle Icon
 * 
 * Visual indicator that an item can be dragged.
 * Uses cursor change to communicate draggability.
 */
.drag-handle {
  cursor: move;
  color: #6c757d;
  margin-right: 0.5rem;
  display: inline-block;
  font-size: 1.2rem;
}

.drag-handle:hover {
  color: #495057;  /* Darker on hover for feedback */
}

/**
 * Remove Button
 * 
 * Delete button positioned in top-right corner of items.
 * High z-index ensures it stays clickable during drag operations.
 */
.remove-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;  /* Above other elements */
}

/* --------------------------------------------------------------------------
   Container Sections
   -------------------------------------------------------------------------- */

/* Triggers and Actions Containers */
.triggers-container,
.actions-container {
  min-height: 100px;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #dee2e6;
}

.triggers-container:empty::after,
.actions-container:empty::after {
  content: "Drag items here...";
  display: block;
  text-align: center;
  color: #adb5bd;
  padding: 2rem;
  font-style: italic;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
}

.empty-state i {
  color: #dee2e6;
}

.empty-state-enhanced {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
}

.empty-state-enhanced .empty-icon {
  font-size: 5rem;
  color: #dee2e6;
  margin-bottom: 1.5rem;
}

/* Badge Styles */
.triggers-list .trigger-item,
.actions-list .action-item {
  display: inline-block;
  font-size: 0.875rem;
  border-radius: 6px;
}

/* Strategy Grid */
.strategies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

/* Form Styles */
.strategy-builder-form .card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-default) !important;
}

.strategy-builder-form .card-header {
  background: var(--color-bg-secondary) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  padding: var(--space-5) var(--space-6);
  color: var(--color-text-primary) !important;
}

.strategy-builder-form .card-body {
  padding: var(--space-6);
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-secondary) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .strategies-grid {
    grid-template-columns: 1fr;
  }

  .trigger-item,
  .action-item {
    padding: 0.75rem;
  }

  .remove-btn {
    position: static;
    display: block;
    margin-top: 0.5rem;
    width: 100%;
  }

  .drag-handle {
    display: none;
  }

  /* Canvas responsive adjustments */
  .canvas-container {
    height: 500px;
  }

  .canvas-instructions {
    font-size: 0.8rem;
  }

  .canvas-help-text {
    font-size: 0.75rem;
  }

  #node-editor-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 1050;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 80vh;
    overflow-y: auto;
  }

  .strategy-card .btn-group {
    flex-direction: column;
    gap: 0.25rem;
  }

  .strategy-card .btn-group .btn {
    width: 100%;
  }
}

/* Touch-friendly sizing for mobile */
@media (max-width: 576px) {
  .canvas-container {
    height: 400px;
  }

  .page-header-section .btn-lg {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  .strategy-builder-form .card-header {
    padding: 0.75rem 1rem;
  }

  .strategy-builder-form .card-header h5 {
    font-size: 1rem;
  }

  .canvas-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .canvas-toolbar button {
    width: 100%;
  }
}

/* Animation for triggered strategies */
@keyframes pulse-success {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(25, 135, 84, 0);
  }
}

.strategy-alert-pulse {
  animation: pulse-success 2s infinite;
}

/* Strategy-specific header enhancements - inherits from custom.css */
.strategies-section .page-header-content .header-badge {
  display: inline-block;
}

/* Default Strategy Notice Card */
.default-strategy-notice {
  background: linear-gradient(135deg, 
    rgba(13, 110, 253, 0.02) 0%, 
    rgba(13, 202, 240, 0.02) 100%
  );
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: var(--radius-lg);
}

.default-strategy-notice .info-icon-wrapper {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.default-strategy-notice .card-title {
  font-weight: 600;
  font-size: 1.125rem;
}

.default-strategy-notice .card-text {
  line-height: 1.6;
}

/* Strategy Cards Enhancement */
.strategy-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
  background: var(--color-surface);
}

.strategy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.strategy-card .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.strategy-card .badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
}

/* Empty State Enhancement */
.empty-state-enhanced {
  background: linear-gradient(135deg, 
    rgba(203, 157, 240, 0.02) 0%, 
    rgba(24, 21, 19, 0.02) 100%
  );
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-16);
  text-align: center;
}

.empty-state-enhanced .empty-icon {
  color: var(--color-text-secondary);
  opacity: 0.6;
}

/* Trigger and Action Items */
.trigger-item, .action-item {
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  font-weight: 500;
}

.trigger-item {
  background: rgba(255, 193, 7, 0.1) !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
  color: #ffc107 !important;
}

.action-item {
  background: rgba(25, 135, 84, 0.1) !important;
  border-color: rgba(25, 135, 84, 0.3) !important;
  color: #86efac !important;
}

/* Badge overrides for strategy pages */
.strategies-section .badge.bg-warning {
  background: rgba(255, 193, 7, 0.15) !important;
  color: #ffc107 !important;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.strategies-section .badge.bg-success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.strategies-section .badge.text-dark {
  color: var(--color-text-primary) !important;
}

.strategies-section .badge.text-white {
  color: var(--color-text-primary) !important;
}

/* Sortable Placeholder */
.sortable-chosen {
  opacity: 0.8;
  cursor: grabbing;
}

.sortable-drag {
  opacity: 0.9;
  cursor: grabbing;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Status Indicators */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.status-indicator.active {
  background: #198754;
  box-shadow: 0 0 8px rgba(25, 135, 84, 0.5);
}

.status-indicator.inactive {
  background: #6c757d;
}

/* Trigger and Action Type Icons */
.trigger-type-icon,
.action-type-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-right: 0.75rem;
  font-size: 1.25rem;
}

.trigger-type-icon {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.action-type-icon {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

/* Loading States */
.strategy-loading {
  text-align: center;
  padding: 2rem;
}

.strategy-loading-spinner {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0d6efd;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Success Messages */
.strategy-success-message {
  background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(25, 135, 84, 0.05) 100%);
  border-left: 4px solid #198754;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Error Messages */
.strategy-error-message {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
  border-left: 4px solid #dc3545;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Enhanced Canvas Styling */
.canvas-instructions {
  font-size: 0.9rem;
  color: var(--color-text-secondary) !important;
  background: linear-gradient(135deg, var(--color-bg-tertiary), rgba(68, 64, 60, 0.95)) !important;
  border-top: 1px solid var(--color-border-default) !important;
  padding: var(--space-5) var(--space-6);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.canvas-instructions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.6;
}

.canvas-instructions p,
.canvas-instructions li,
.canvas-instructions ul {
  color: var(--color-text-secondary) !important;
  line-height: 1.6;
}

.canvas-instructions strong {
  color: var(--color-text-primary) !important;
  font-weight: 600;
}

.canvas-instructions ul {
  list-style: none;
  padding: 0;
}

.canvas-instructions li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  transition: all var(--transition-fast);
}

.canvas-instructions li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  opacity: 0.7;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
}

.canvas-instructions li:hover {
  color: var(--color-text-primary) !important;
  padding-left: var(--space-6);
}

.canvas-instructions li:hover::before {
  opacity: 1;
  transform: translateX(2px);
}

.canvas-help-text {
  font-size: 0.875rem;
  color: var(--color-text-tertiary) !important;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-bg-secondary), rgba(41, 37, 36, 0.95)) !important;
  border-radius: var(--radius-lg);
  margin-top: var(--margin-3);
  border: 1px solid var(--color-border-default);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  line-height: 1.6;
}

.canvas-help-text kbd {
  background: linear-gradient(135deg, var(--color-bg-primary), rgba(24, 21, 19, 0.95));
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.5rem;
  font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 0.75rem;
  color: var(--color-text-primary);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin: 0 0.125rem;
  display: inline-block;
  min-width: 1.5rem;
  text-align: center;
}

/* Node Editor Panel Dark Mode */
.node-editor-form {
  color: var(--color-text-secondary) !important;
}

.node-editor-form .form-label {
  color: var(--color-text-primary) !important;
  font-weight: 500;
}

.node-editor-form .form-control,
.node-editor-form .form-select {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

.node-editor-form .form-control:focus,
.node-editor-form .form-select:focus {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(203, 157, 240, 0.25);
}

.node-editor-form .form-control::placeholder {
  color: var(--color-text-muted) !important;
}

/* Enhanced Node Editor Styling - Apply to dynamically created forms */
#node-editor-panel .form-label {
  color: var(--color-text-primary) !important;
  font-weight: 500;
}

#node-editor-panel .form-control,
#node-editor-panel .form-select {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

#node-editor-panel .form-control:focus,
#node-editor-panel .form-select:focus {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(203, 157, 240, 0.25);
}

#node-editor-panel .form-control::placeholder {
  color: var(--color-text-muted) !important;
}

#node-editor-panel h5 {
  color: var(--color-text-primary) !important;
}

#node-editor-panel input,
#node-editor-panel select,
#node-editor-panel option {
  color: var(--color-text-primary) !important;
  background-color: var(--color-bg-secondary) !important;
}

/* Enhanced Strategy Canvas Toolbar */
.canvas-toolbar {
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--color-bg-tertiary), rgba(68, 64, 60, 0.95));
  border-bottom: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.canvas-toolbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.6;
}

.canvas-toolbar-label {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-3);
}

.canvas-toolbar .btn-group {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Enhanced Canvas Container */
.canvas-container,
.strategy-canvas-wrapper {
  position: relative;
  background: linear-gradient(135deg, var(--color-bg-secondary), rgba(41, 37, 36, 0.95));
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-6);
}

.canvas-container::before,
.strategy-canvas-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(203, 157, 240, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(159, 226, 191, 0.02) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.canvas-container canvas,
.strategy-canvas-wrapper canvas {
  position: relative;
  z-index: 2;
  background: transparent;
  border-radius: inherit;
}

/* Canvas with toolbar styling */
.canvas-with-toolbar {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.canvas-with-toolbar .canvas-container {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  border-top: none;
  margin-bottom: 0;
}

/* Canvas status overlay */
.canvas-status-overlay {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.canvas-status-item {
  background: rgba(24, 21, 19, 0.9);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

/* Strategy Validation Messages */
.strategy-validation-message {
  padding: var(--space-4);
  background: rgba(251, 146, 60, 0.1);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  margin-bottom: var(--margin-4);
  color: var(--color-text-secondary);
}

.strategy-validation-message strong {
  color: var(--color-text-primary);
}

/* Connection Highlight on Hover */
.canvas-connection-hover {
  cursor: pointer;
  stroke-width: 4;
  stroke: var(--color-primary);
}

/* Strategy Page Header Enhancements */
.page-header-section {
  background: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
}

.page-header-section .page-title {
  color: var(--color-text-primary) !important;
}

.page-header-section .page-subtitle {
  color: var(--color-text-secondary) !important;
}

.page-header-section .header-badge .badge {
  background-color: var(--color-primary) !important;
  color: var(--color-bg-primary) !important;
}

/* Card Header Enhancements */
.card-header {
  background-color: var(--color-bg-secondary) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
  padding: var(--space-5) var(--space-8) !important;
  font-weight: 500;
}

.strategies-section .card-header,
.strategy-form-section .card-header {
  background-color: var(--color-bg-secondary) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
  padding: var(--space-5) var(--space-8) !important;
  font-weight: 500;
}

.card-header h5 {
  color: var(--color-text-primary) !important;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.125rem;
}

.card-header h6 {
  color: var(--color-text-primary) !important;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}

/* Special styling for canvas card header with flex layout */
.strategy-form-section .card-header.d-flex {
  align-items: center;
  justify-content: space-between;
}

/* Ensure icons in card headers have proper color */
.card-header .bi {
  color: var(--color-primary) !important;
}

.card-header .text-primary {
  color: var(--color-primary) !important;
}

/* Card Body Enhancements to maintain hierarchy */
.strategies-section .card-body,
.strategy-form-section .card-body {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-secondary) !important;
  padding: var(--space-8) !important;
}

.strategy-form-section .card-body.p-0 {
  padding: 0 !important;
}

/* Canvas Card Header Button Enhancements */
.strategy-form-section .card-header .btn-sm {
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 500;
}

.strategy-form-section .card-header .btn-warning {
  background-color: rgba(255, 193, 7, 0.15) !important;
  border-color: rgba(255, 193, 7, 0.4) !important;
  color: #ffc107 !important;
}

.strategy-form-section .card-header .btn-warning:hover {
  background-color: rgba(255, 193, 7, 0.25) !important;
  border-color: rgba(255, 193, 7, 0.6) !important;
  color: #ffc107 !important;
}

.strategy-form-section .card-header .btn-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}

.strategy-form-section .card-header .btn-success:hover {
  background-color: rgba(34, 197, 94, 0.25) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
  color: #86efac !important;
}

/* Strategy Show and Templates Page Card Headers */
.strategy-details-section .card-header,
.strategy-templates-section .card-header {
  background-color: var(--color-bg-secondary) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
  padding: var(--space-5) var(--space-8) !important;
  font-weight: 500;
}

.strategy-details-section .card-header h5,
.strategy-templates-section .card-header h5,
.strategy-details-section .card-header h6,
.strategy-templates-section .card-header h6 {
  color: var(--color-text-primary) !important;
  margin-bottom: 0;
  font-weight: 600;
}

.strategy-details-section .card-header .bi,
.strategy-templates-section .card-header .bi {
  color: var(--color-primary) !important;
}

/* Card headers with background utility classes (like bg-success bg-opacity-10) */
.strategies-section .card-header[class*="bg-"],
.strategy-form-section .card-header[class*="bg-"],
.strategy-details-section .card-header[class*="bg-"],
.strategy-templates-section .card-header[class*="bg-"] {
  background-color: var(--color-bg-secondary) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

/* Comprehensive Button Theme Override for Strategy Pages */
.strategy-form-section .btn,
.strategies-section .btn {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

.strategy-form-section .btn-outline-secondary {
  background-color: transparent !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border-default) !important;
}

.strategy-form-section .btn-outline-secondary:hover {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-strong) !important;
}

.strategy-form-section .btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-bg-primary) !important;
}

.strategy-form-section .btn-primary:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: white !important;
}

.strategy-form-section .btn-warning,
.strategies-section .btn-warning {
  background-color: rgba(255, 193, 7, 0.2) !important;
  border-color: rgba(255, 193, 7, 0.4) !important;
  color: #ffc107 !important;
}

.strategy-form-section .btn-warning:hover,
.strategies-section .btn-warning:hover {
  background-color: rgba(255, 193, 7, 0.3) !important;
  border-color: rgba(255, 193, 7, 0.6) !important;
  color: #ffc107 !important;
}

.strategy-form-section .btn-success,
.strategies-section .btn-success {
  background-color: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}

.strategy-form-section .btn-success:hover,
.strategies-section .btn-success:hover {
  background-color: rgba(34, 197, 94, 0.3) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
  color: #86efac !important;
}

.strategy-form-section .btn-danger,
.strategies-section .btn-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}

.strategy-form-section .btn-danger:hover,
.strategies-section .btn-danger:hover {
  background-color: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #fca5a5 !important;
}

/* Strategy Tips Section - ensure proper theming */
.strategy-tips {
  background: var(--color-bg-tertiary) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--margin-6);
}

.strategy-tips h6 {
  color: var(--color-text-primary) !important;
  margin-bottom: var(--margin-3);
  font-weight: 600;
}

.strategy-tips p,
.strategy-tips ul,
.strategy-tips li {
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--margin-2);
}

.strategy-tips .text-primary {
  color: var(--color-primary) !important;
}

.strategy-tips strong {
  color: var(--color-text-primary) !important;
}

/* Form Enhancements */
.strategy-builder-form .form-control,
.strategy-builder-form .form-select {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

.strategy-builder-form .form-control:focus,
.strategy-builder-form .form-select:focus {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(203, 157, 240, 0.25);
}

.strategy-builder-form .form-check-input {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
}

.strategy-builder-form .form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.strategy-builder-form .form-check-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(203, 157, 240, 0.25);
}

.strategy-builder-form .text-muted {
  color: var(--color-text-muted) !important;
}

.strategy-builder-form .form-label {
  color: var(--color-text-primary) !important;
  font-weight: 500;
}

.strategy-builder-form .form-control::placeholder {
  color: var(--color-text-muted) !important;
}

/* Ensure all form elements in strategy pages follow dark theme */
.strategy-form-section input,
.strategy-form-section select,
.strategy-form-section textarea,
.strategy-form-section .form-control,
.strategy-form-section .form-select {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

.strategy-form-section input:focus,
.strategy-form-section select:focus,
.strategy-form-section textarea:focus,
.strategy-form-section .form-control:focus,
.strategy-form-section .form-select:focus {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(203, 157, 240, 0.25);
}

.strategy-form-section label,
.strategy-form-section .form-label {
  color: var(--color-text-primary) !important;
}

.strategy-form-section .form-check-label {
  color: var(--color-text-secondary) !important;
}

.strategy-form-section .form-check-label small {
  color: var(--color-text-muted) !important;
}

/* Strategy Evaluation Results - Dark Mode Support */
#strategy-alerts {
  background: var(--color-bg-elevated);
  border-color: var(--color-success);
}

#strategy-alerts .card-header {
  background: rgba(34, 197, 94, 0.1);
  border-bottom-color: var(--color-border-default);
}

#strategy-alerts .text-success {
  color: var(--color-success) !important;
}

#strategy-alerts .alert-success {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--color-text-secondary);
}

#strategy-alerts .alert-success h6 {
  color: var(--color-text-primary);
}

#strategy-alerts .alert-success strong {
  color: var(--color-text-primary);
}

#strategy-alerts .alert-info {
  background: rgba(159, 226, 191, 0.1);
  border-color: rgba(159, 226, 191, 0.3);
  color: var(--color-text-secondary);
}

#strategy-alerts .alert-primary {
  background: rgba(203, 157, 240, 0.1);
  border-color: rgba(203, 157, 240, 0.3);
  color: var(--color-text-secondary);
}

/* Enhanced Bootstrap Override for Strategy Pages */
.strategies-section .card,
.strategy-form-section .card {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.strategies-section .card:hover,
.strategy-form-section .card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--color-border-strong) !important;
}

.strategies-section .card-body,
.strategy-form-section .card-body {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-secondary) !important;
}

.strategies-section .card-header,
.strategy-form-section .card-header {
  background-color: var(--color-bg-secondary) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

.strategies-section .card-title,
.strategy-form-section .card-title {
  color: var(--color-text-primary) !important;
}

.strategies-section .card-text,
.strategy-form-section .card-text {
  color: var(--color-text-secondary) !important;
}

.strategies-section .text-muted,
.strategy-form-section .text-muted {
  color: var(--color-text-muted) !important;
}

/* Bootstrap Tooltip Dark Theme */
.tooltip {
  --bs-tooltip-bg: var(--color-bg-elevated) !important;
  --bs-tooltip-color: var(--color-text-primary) !important;
}

.tooltip .tooltip-inner {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-default) !important;
  box-shadow: var(--shadow-sm) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--color-bg-elevated) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--color-bg-elevated) !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--color-bg-elevated) !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--color-bg-elevated) !important;
}

/* Force proper styling on all input elements, including dynamically created ones */
[class*="strategy"] input[type="text"],
[class*="strategy"] input[type="number"],
[class*="strategy"] input[type="email"],
[class*="strategy"] textarea,
[class*="strategy"] select,
[id*="edit-"] {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

[class*="strategy"] input:focus,
[class*="strategy"] textarea:focus,
[class*="strategy"] select:focus,
[id*="edit-"]:focus {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(203, 157, 240, 0.25) !important;
}

/* Canvas validation and helper text */
#canvas-validation-messages {
  color: var(--color-text-secondary) !important;
  background: var(--color-bg-secondary) !important;
}

#canvas-validation-messages .alert {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-secondary) !important;
}

#canvas-validation-messages .alert-warning {
  background-color: rgba(255, 193, 7, 0.1) !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
  color: var(--color-text-secondary) !important;
}

#canvas-validation-messages .alert-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: var(--color-text-secondary) !important;
}

#canvas-validation-messages .alert-info {
  background-color: rgba(159, 226, 191, 0.1) !important;
  border-color: rgba(159, 226, 191, 0.3) !important;
  color: var(--color-text-secondary) !important;
}

/* Force canvas container and all children to follow dark theme */
.canvas-container,
.canvas-container * {
  background-color: var(--color-bg-secondary) !important;
}

#strategy-canvas {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
}

/* Override any potential white backgrounds in form sections */
.strategy-form-section {
  background-color: var(--color-bg-primary) !important;
}

.strategy-form-section .bg-white,
.strategy-form-section .bg-light,
.strategies-section .bg-white,
.strategies-section .bg-light {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

/* Ensure proper contrast for all text elements */
.strategies-section h1,
.strategies-section h2, 
.strategies-section h3,
.strategies-section h4,
.strategies-section h5,
.strategies-section h6,
.strategy-form-section h1,
.strategy-form-section h2,
.strategy-form-section h3,
.strategy-form-section h4,
.strategy-form-section h5,
.strategy-form-section h6 {
  color: var(--color-text-primary) !important;
}

.strategies-section p,
.strategy-form-section p {
  color: var(--color-text-secondary) !important;
}

.strategies-section small,
.strategy-form-section small {
  color: var(--color-text-muted) !important;
}

/* Breadcrumb Dark Mode (scoped to strategy pages) */
.strategies-section .breadcrumb {
  background: var(--color-bg-secondary) !important;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
}

.strategies-section .breadcrumb-item a {
  color: var(--color-primary) !important;
  text-decoration: none;
}

.strategies-section .breadcrumb-item.active {
  color: var(--color-text-secondary) !important;
}

.strategies-section .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted) !important;
}

/* Strategy Templates Page Enhancements */
.strategy-templates-section .card {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

.strategy-template-card:hover {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.strategy-template-card .card-title {
  color: var(--color-text-primary) !important;
}

.strategy-template-card .card-text,
.strategy-template-card p {
  color: var(--color-text-secondary) !important;
}

.strategy-template-card .text-muted {
  color: var(--color-text-muted) !important;
}

/* Strategy Show Page Enhancements */
.strategy-details-section .card {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-default) !important;
}

.strategy-details-section .card-header {
  background-color: var(--color-bg-secondary) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}

.strategy-details-section .card-title,
.strategy-details-section h5,
.strategy-details-section h6 {
  color: var(--color-text-primary) !important;
}

.strategy-details-section .card-text,
.strategy-details-section p {
  color: var(--color-text-secondary) !important;
}

.strategy-details-section .text-muted {
  color: var(--color-text-muted) !important;
}

/* Evaluation Results Enhanced Styling */
#strategy-alerts {
  background: var(--color-bg-elevated) !important;
  border-color: var(--color-success) !important;
}

#strategy-alerts .card-header {
  background: rgba(34, 197, 94, 0.1) !important;
  border-bottom-color: var(--color-border-default) !important;
}

#strategy-alerts .text-success {
  color: var(--color-success) !important;
}

#strategy-alerts .alert-success {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: var(--color-text-secondary) !important;
}

#strategy-alerts .alert-success h6 {
  color: var(--color-text-primary) !important;
}

#strategy-alerts .alert-success strong {
  color: var(--color-text-primary) !important;
}

#strategy-alerts .alert-info {
  background: rgba(159, 226, 191, 0.1) !important;
  border-color: rgba(159, 226, 191, 0.3) !important;
  color: var(--color-text-secondary) !important;
}

#strategy-alerts .alert-primary {
  background: rgba(203, 157, 240, 0.1) !important;
  border-color: rgba(203, 157, 240, 0.3) !important;
  color: var(--color-text-secondary) !important;
}

/* Universal Alert Styling for Strategy Pages */
.strategies-section .alert,
.strategy-form-section .alert,
.strategy-templates-section .alert,
.strategy-details-section .alert {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-secondary) !important;
}

.strategies-section .alert h6,
.strategy-form-section .alert h6,
.strategy-templates-section .alert h6,
.strategy-details-section .alert h6 {
  color: var(--color-text-primary) !important;
}

/* Final Catch-All for Any Missing White Backgrounds */
.strategies-section .bg-white,
.strategy-form-section .bg-white,
.strategy-templates-section .bg-white,
.strategy-details-section .bg-white,
.strategies-section .bg-light,
.strategy-form-section .bg-light,
.strategy-templates-section .bg-light,
.strategy-details-section .bg-light {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

/* Ensure table elements within strategy pages follow theme */
.strategies-section .table,
.strategy-form-section .table,
.strategy-templates-section .table,
.strategy-details-section .table {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

.strategies-section .table th,
.strategy-form-section .table th,
.strategy-templates-section .table th,
.strategy-details-section .table th {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border-default) !important;
}

.strategies-section .table td,
.strategy-form-section .table td,
.strategy-templates-section .table td,
.strategy-details-section .table td {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-subtle) !important;
}

/* Bootstrap Modal and Dropdown Dark Theme */
.modal-content {
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

.modal-header {
  background-color: var(--color-bg-secondary) !important;
  border-bottom-color: var(--color-border-default) !important;
}

.modal-body {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-secondary) !important;
}

.modal-footer {
  background-color: var(--color-bg-secondary) !important;
  border-top-color: var(--color-border-default) !important;
}

.dropdown-menu {
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-border-default) !important;
  box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
  color: var(--color-text-secondary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
}

.dropdown-divider {
  border-color: var(--color-border-default) !important;
}

/* Strategy-specific overrides for any remaining Bootstrap defaults */
.strategy-form-section input[type="text"],
.strategy-form-section input[type="number"],
.strategy-form-section input[type="email"],
.strategy-form-section input[type="password"],
.strategy-form-section textarea,
.strategy-form-section select,
.strategies-section input[type="text"],
.strategies-section input[type="number"],
.strategies-section input[type="email"],
.strategies-section input[type="password"],
.strategies-section textarea,
.strategies-section select {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

.strategy-form-section input:focus,
.strategy-form-section textarea:focus,
.strategy-form-section select:focus,
.strategies-section input:focus,
.strategies-section textarea:focus,
.strategies-section select:focus {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(203, 157, 240, 0.25) !important;
}

/* Form check controls (checkboxes, radio buttons, switches) */
.strategy-form-section .form-check-input,
.strategies-section .form-check-input {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-default) !important;
}

.strategy-form-section .form-check-input:checked,
.strategies-section .form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.strategy-form-section .form-check-input:focus,
.strategies-section .form-check-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(203, 157, 240, 0.25) !important;
}

/* Final comprehensive override for any Bootstrap elements that might slip through */
/* Specifically override common Bootstrap background classes within strategy pages */
.strategy-form-section .bg-white,
.strategy-form-section .bg-light,
.strategy-form-section .bg-secondary,
.strategies-section .bg-white,
.strategies-section .bg-light,
.strategies-section .bg-secondary,
.strategy-templates-section .bg-white,
.strategy-templates-section .bg-light,
.strategy-templates-section .bg-secondary,
.strategy-details-section .bg-white,
.strategy-details-section .bg-light,
.strategy-details-section .bg-secondary {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

/* Ensure input placeholders are visible */
.strategy-form-section input::placeholder,
.strategy-form-section textarea::placeholder,
.strategies-section input::placeholder,
.strategies-section textarea::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 0.7;
}

/* Canvas-specific element styling */
.canvas-container canvas {
  background-color: var(--color-bg-secondary) !important;
}

/* Strategy page body override */
body .strategy-form-section,
body .strategies-section,
body .strategy-templates-section,
body .strategy-details-section {
  background-color: var(--color-bg-primary) !important;
}

/* ==========================================
   Canvas Sidebar Layout Styles
   ========================================== */

/* Canvas Layout with Sidebar */
.strategy-form-section .canvas-layout {
  display: flex !important;
  width: 100% !important;
  min-height: 700px !important;
  background: #181513 !important;
}

/* Sidebar Styling */
.strategy-form-section .canvas-sidebar {
  width: 280px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(180deg, #1c1917 0%, #292524 100%) !important;
  border-right: 1px solid rgba(203, 157, 240, 0.15) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 12px !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2) !important;
}

.strategy-form-section .canvas-sidebar::-webkit-scrollbar {
  width: 6px !important;
}

.strategy-form-section .canvas-sidebar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
}

.strategy-form-section .canvas-sidebar::-webkit-scrollbar-thumb {
  background: rgba(203, 157, 240, 0.3) !important;
  border-radius: 3px !important;
}

.strategy-form-section .canvas-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(203, 157, 240, 0.5) !important;
}

/* Sidebar Sections */
.strategy-form-section .sidebar-section {
  margin-bottom: 24px !important;
}

.strategy-form-section .sidebar-section:last-child {
  margin-bottom: 0 !important;
}

.strategy-form-section .sidebar-heading {
  color: #e7e5e4 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 12px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
}

.strategy-form-section .sidebar-heading i {
  font-size: 1rem !important;
  opacity: 0.8 !important;
}

/* Sidebar Buttons */
.strategy-form-section .sidebar-btn {
  width: 100% !important;
  text-align: left !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #e7e5e4 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
}

.strategy-form-section .sidebar-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
  transition: left 0.5s ease !important;
}

.strategy-form-section .sidebar-btn:hover::before {
  left: 100% !important;
}

.strategy-form-section .sidebar-btn i {
  font-size: 1.25rem !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.strategy-form-section .btn-content {
  flex: 1 !important;
}

.strategy-form-section .btn-title {
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

.strategy-form-section .btn-description {
  font-size: 0.75rem !important;
  opacity: 0.7 !important;
  line-height: 1.3 !important;
}

/* Sidebar Button Variants */
.strategy-form-section .sidebar-btn-warning {
  border-color: rgba(251, 146, 60, 0.2) !important;
}

.strategy-form-section .sidebar-btn-warning:hover {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 146, 60, 0.08)) !important;
  border-color: rgba(251, 146, 60, 0.4) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.2) !important;
}

.strategy-form-section .sidebar-btn-warning i {
  color: #fb923c !important;
}

.strategy-form-section .sidebar-btn-info {
  border-color: rgba(14, 165, 233, 0.2) !important;
}

.strategy-form-section .sidebar-btn-info:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.08)) !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2) !important;
}

.strategy-form-section .sidebar-btn-info i {
  color: #0ea5e9 !important;
}

.strategy-form-section .sidebar-btn-success {
  border-color: rgba(34, 197, 94, 0.2) !important;
}

.strategy-form-section .sidebar-btn-success:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08)) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2) !important;
}

.strategy-form-section .sidebar-btn-success i {
  color: #22c55e !important;
}

.strategy-form-section .sidebar-btn-danger {
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.strategy-form-section .sidebar-btn-danger:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08)) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

.strategy-form-section .sidebar-btn-danger i {
  color: #ef4444 !important;
}

.strategy-form-section .sidebar-btn:active {
  transform: translateX(2px) scale(0.98) !important;
}

/* Canvas Wrapper */
.strategy-form-section .canvas-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* Responsive Sidebar */
@media (max-width: 992px) {
  .strategy-form-section .canvas-layout {
    flex-direction: column !important;
  }

  .strategy-form-section .canvas-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(203, 157, 240, 0.15) !important;
    max-height: 300px !important;
    padding: 16px 12px !important;
  }

  .strategy-form-section .canvas-container {
    height: 500px !important;
  }
}

@media (max-width: 768px) {
  .strategy-form-section .canvas-sidebar {
    max-height: 250px !important;
  }

  .strategy-form-section .canvas-container {
    height: 400px !important;
  }
}