/* Enhanced Rules Styles - Extracted from injectEnhancedRulesCss function */
.enhanced-rules-container { 
  margin-top: 8px; 
  width: 100%;
  overflow: visible;
}

/* Rules section styling */
.rules-section {
  margin-bottom: 24px;
  width: 100%;
}

.rules-section-title {
  margin: 0 0 12px 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: #e2e8f0;
}

.disabled-rules-section {
  opacity: 0.8;
}

/* Table wrapper with horizontal scroll */
.rules-table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 8px;
  border: 1px solid #2d3748;
  background: #1a1d24;
}

/* Scrollbar styling for webkit browsers */
.rules-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.rules-table-wrapper::-webkit-scrollbar-track {
  background: #2d3748;
  border-radius: 4px;
}

.rules-table-wrapper::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 4px;
}

.rules-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #718096;
}

.rules-table.enhanced { 
  width: 100%; 
  min-width: auto; /* Allow table to size to content */
  border-collapse: collapse; 
  border-radius: 0; /* Remove border-radius from table since wrapper has it */
  overflow: visible; 
  table-layout: auto; /* Auto-size columns to content */
  background: #1a1d24;
  border: none; /* Remove table border since wrapper has it */
}
.rules-table.enhanced th { 
  background: #1a1d24 !important; 
  color: #e2e8f0 !important; 
  font-weight: 600; 
  padding: 12px 8px; 
  text-align: left; 
  border-bottom: 2px solid #2d3748 !important; 
  border-top: none !important; 
  border-left: none !important; 
  border-right: none !important; 
  position: relative; 
  overflow: visible; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}
/* CRITICAL: Force exact header consistency - alignment, borders, spacing */
html body table.rules-table.enhanced thead tr th.rule-notifications,
html body table.rules-table.enhanced thead tr th.rule-actions {
  /* Background and color - FIXED */
  background-color: #1a1d24 !important;
  background: #1a1d24 !important;
  color: #e2e8f0 !important;
  
  /* CRITICAL: Reset and match exact border styling */
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 2px solid #2d3748 !important;
  border-style: solid !important;
  border-width: 0 0 2px 0 !important;
  border-color: transparent transparent #2d3748 transparent !important;
  
  /* CRITICAL: Match exact typography of TIME WINDOW/STATUS headers */
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  padding: 12px 8px !important;
  margin: 0 !important;
  text-align: left !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
  
  /* CRITICAL: Exact positioning */
  position: relative !important;
  display: table-cell !important;
  box-sizing: border-box !important;
  
  /* CRITICAL: Remove any transform/offset */
  transform: none !important;
  top: auto !important;
  left: auto !important;
  
  /* Match exact styling of other headers */
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.rules-table.enhanced th.sortable { cursor: pointer; user-select: none; transition: background-color 0.2s; }
.rules-table.enhanced th.sortable:hover { background: #2d3748; }
.rules-table.enhanced td { padding: 12px 8px; border-bottom: 1px solid #2d3748; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }

/* CRITICAL: Fix NOTIFICATIONS column cells */
.rules-table.enhanced td.rule-notifications {
  background: inherit !important;
  border: none !important;
  border-bottom: 1px solid #2d3748 !important;
  border-left: 1px solid #2d3748 !important;
  padding: 12px 8px !important;
  vertical-align: top !important;
  display: table-cell !important;
  position: static !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Fix ACTIONS column cells with proper icon spacing */
.rules-table.enhanced td.rule-actions {
  background: inherit !important;
  border: none !important;
  border-bottom: 1px solid #2d3748 !important;
  border-left: 1px solid #2d3748 !important;
  padding: 12px 16px 12px 12px !important; /* Extra right padding to space from icons */
  vertical-align: top !important;
  display: table-cell !important;
  position: static !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Ensure action icons have proper spacing from left border */
.rules-table.enhanced td.rule-actions .action-group {
  margin-left: 4px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* Column Resizing */
.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  cursor: col-resize;
  user-select: none;
  z-index: 1;
  pointer-events: auto;
}
.resize-handle:hover,
.resize-handle.resizing {
  background: #4299e1;
}
.resize-handle:active {
  background: #3182ce;
}

/* Enhanced cell content - Auto-sizing */
.rule-name { min-width: auto; max-width: none; }
.rule-notifications { min-width: auto; max-width: none; }
.rule-timewindow { min-width: auto; }
.rule-status { min-width: auto; }
.rule-severity { min-width: auto; }
.rule-cooldown { min-width: auto; }
.rule-created { min-width: auto; }
.rule-actions { min-width: auto; width: auto; }

/* Wrap long content in name and notification cells */
.rule-name .rule-name-main,
.rule-notifications {
  white-space: normal;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Tooltip for full content on hover */
.rules-table.enhanced td[title]:hover {
  position: relative;
  overflow: visible;
}
.rules-table.enhanced td[title]:hover::after {
  content: attr(title);
  position: absolute;
  background: #2d3748;
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: normal;
  max-width: 300px;
  word-wrap: break-word;
  z-index: 1000;
  top: -5px;
  left: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid #4a5568;
}
.rule-row { transition: background-color 0.2s; }
.rule-row:hover { background: rgba(74, 85, 104, 0.1); }
.rule-row.enabled { border-left: 3px solid #48bb78; }
.rule-row.disabled { border-left: 3px solid #f56565; opacity: 0.8; }
.rule-name-main { font-weight: 500; margin-bottom: 4px; }
.rule-name-meta { font-size: 12px; color: #a0aec0; }
.type-display { font-weight: 500; margin-bottom: 2px; }
.type-meta { color: #a0aec0; font-style: italic; }
.status-pill { padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }
.status-pill.enabled { background: rgba(72, 187, 120, 0.2); color: #48bb78; }
.status-pill.disabled { background: rgba(245, 101, 101, 0.2); color: #f56565; }
.severity-pill { padding: 2px 6px; border-radius: 8px; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.severity-pill.high { background: rgba(245, 101, 101, 0.2); color: #f56565; }
.severity-pill.medium { background: rgba(237, 137, 54, 0.2); color: #ed8936; }
.severity-pill.low { background: rgba(72, 187, 120, 0.2); color: #48bb78; }
.rule-chip.enhanced { background: rgba(74, 85, 104, 0.15); color: #e2e8f0; padding: 4px 8px; border-radius: 6px; font-size: 12px; border: 1px solid rgba(74, 85, 104, 0.3); }
.rule-chip-empty { color: #a0aec0; font-style: italic; font-size: 12px; }
.action-group { display: flex; gap: 4px; justify-content: center; }
.action-btn { background: none; border: 1px solid #4a5568; border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.action-btn:hover { background: rgba(74, 85, 104, 0.2); transform: translateY(-1px); }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.action-btn.test { border-color: #4299e1; color: #4299e1; }
.action-btn.edit { border-color: #ed8936; color: #ed8936; }
.action-btn.toggle.enabled { border-color: #f56565; color: #f56565; }
.action-btn.toggle.disabled { border-color: #48bb78; color: #48bb78; }
.action-btn.duplicate { border-color: #805ad5; color: #805ad5; }
.action-btn.delete { border-color: #f56565; color: #f56565; }
.rules-empty { text-align: center; padding: 40px; background: #1a202c; border-radius: 8px; border: 2px dashed #4a5568; }
.rules-empty button { margin-top: 16px; }