/* ==========================================
   VALIDATION STYLES
   ========================================== */

/* Validation Issues Section */
.validation-issues-section {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.validation-issues-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.validation-issues-title {
  font-size: 1.1em;
  font-weight: 600;
  color: #495057;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.validation-issues-title svg {
  width: 20px;
  height: 20px;
  color: #ffc107;
}

.validation-issues-summary {
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 0.9em;
}

.validation-count {
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85em;
}

.validation-count.critical {
  background: #ffeaea;
  color: #dc3545;
}

.validation-count.warning {
  background: #fff3cd;
  color: #856404;
}

.validation-count.info {
  background: #d1ecf1;
  color: #0c5460;
}

.validation-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-validation-view {
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.875em;
  transition: background-color 0.2s;
}

.btn-validation-view:hover {
  background: #0056b3;
  color: white;
  text-decoration: none;
}

.btn-validation-view:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Validation Issues Cards */
.validation-issues-grid {
  display: grid;
  gap: 15px;
  margin-top: 15px;
}

.validation-issue-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 15px;
  transition: box-shadow 0.2s;
}

.validation-issue-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.validation-issue-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.validation-issue-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.validation-issue-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

.validation-severity-badge {
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.validation-severity-badge svg {
  width: 12px;
  height: 12px;
}

.validation-severity-badge.critical {
  background: #dc3545;
  color: white;
}

.validation-severity-badge.warning {
  background: #ffc107;
  color: #212529;
}

.validation-severity-badge.info {
  background: #17a2b8;
  color: white;
}

.validation-type-badge {
  background: #6c757d;
  color: white;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: 500;
}

.validation-group-info {
  color: #6c757d;
  font-size: 0.85em;
}

.validation-issue-content {
  margin-top: 10px;
}

.validation-issue-url {
  margin-bottom: 8px;
  word-break: break-all;
}

.validation-issue-url a {
  color: #007bff;
  text-decoration: none;
}

.validation-issue-url a:hover {
  text-decoration: underline;
}

.validation-issue-rid {
  margin-bottom: 8px;
  font-family: monospace;
  font-size: 0.9em;
}

.validation-issue-rid a {
  color: #007bff;
  text-decoration: none;
}

.validation-issue-rid a:hover {
  text-decoration: underline;
}

.validation-issue-details {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin-top: 8px;
}

.validation-issue-details pre {
  margin: 0;
  font-size: 0.85em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Validation Pages Specific Styles */
.validation-stats-section {
  background: #f8f9fa;
  padding: 20px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
}

.validation-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.validation-stat-card {
  text-align: center;
  padding: 20px;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.validation-stat-value {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 5px;
  color: #495057;
}

.validation-stat-label {
  font-size: 0.9em;
  color: #6c757d;
}

.validation-filters-section {
  background: #f8f9fa;
  padding: 20px 0;
  border-bottom: 1px solid #e9ecef;
}

.validation-filters-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.validation-filters-form {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.validation-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.validation-filter-group label {
  font-size: 0.85em;
  font-weight: 500;
  color: #495057;
}

.validation-filter-group input,
.validation-filter-group select {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.9em;
  min-width: 180px;
}

.validation-filter-group input:focus,
.validation-filter-group select:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-color: #007bff;
}

.validation-filters-actions {
  display: flex;
  gap: 10px;
  align-items: end;
}

.btn-validation-filter {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s;
}

.btn-validation-filter:hover {
  background: #0056b3;
}

.btn-validation-clear {
  padding: 8px 16px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn-validation-clear:hover {
  background: #545b62;
  color: white;
  text-decoration: none;
}

.validation-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.validation-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.validation-empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  color: #dee2e6;
}

.validation-empty-state h3 {
  margin: 0 0 10px 0;
  font-size: 1.25em;
  color: #495057;
}

.validation-empty-state p {
  margin: 0 0 20px 0;
}

/* Validation Issue Detail Page */
.validation-detail-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 24px;
  min-height: calc(100vh - 200px);
}

.validation-detail-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.2s ease;
}

.validation-detail-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.validation-detail-section {
  margin-bottom: 32px;
  background: #f8f9fa;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.validation-detail-section:last-child {
  margin-bottom: 0;
}

.validation-detail-section h3 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.validation-detail-section h3::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 2px;
}

.validation-detail-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: start;
}

.validation-detail-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  align-self: start;
}

.validation-detail-value {
  word-break: break-word;
  color: #1f2937;
  font-size: 0.95rem;
  line-height: 1.5;
  align-self: start;
}

.validation-detail-value a {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s ease;
}

.validation-detail-value a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Fix for validation severity badges in detail view */
.validation-detail-value .validation-severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.validation-detail-value .validation-severity-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.validation-detail-value .validation-severity-badge.critical {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.validation-detail-value .validation-severity-badge.warning {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fed7aa;
}

.validation-detail-value .validation-severity-badge.info {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

/* Fix for validation type badges in detail view */
.validation-detail-value .validation-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Validation type badge styling for listings */
.validation-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 500;
  white-space: nowrap;
}

.validation-type-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Different colors for different issue type categories */
.validation-type-badge.bot-security {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.validation-type-badge.content-quality {
  background: #fff7ed;
  color: #ea580c;
  border-color: #fed7aa;
}

.validation-type-badge.extraction {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
}

.validation-type-badge.performance {
  background: #fefce8;
  color: #ca8a04;
  border-color: #fde047;
}

/* Fix for status badges in detail view */
.validation-detail-value .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.validation-detail-value .status-badge.status-completed {
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.validation-detail-value .status-badge.status-failed {
  background-color: #fecaca;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.validation-detail-value .status-badge.status-running {
  background-color: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.validation-detail-value .status-badge.status-pending {
  background-color: #e0e7ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.validation-detail-code {
  background: #1f2937;
  color: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #374151;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.validation-detail-code::-webkit-scrollbar {
  width: 8px;
}

.validation-detail-code::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 4px;
}

.validation-detail-code::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 4px;
}

.validation-detail-code::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Status Badge Styles */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.status-badge.status-completed {
  background-color: #dcfce7;
  color: #15803d;
}

.status-badge.status-failed {
  background-color: #fecaca;
  color: #dc2626;
}

.status-badge.status-running {
  background-color: #fef3c7;
  color: #d97706;
}

.status-badge.status-pending {
  background-color: #e0e7ff;
  color: #4338ca;
}

/* Retrospective Validation Modal Styles */
.validation-warning {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.validation-warning svg {
  width: 20px;
  height: 20px;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 2px;
}

.validation-warning h4 {
  margin: 0 0 8px 0;
  color: #92400e;
  font-size: 1em;
  font-weight: 600;
}

.validation-warning p {
  margin: 0;
  color: #92400e;
  font-size: 0.9em;
  line-height: 1.5;
}

.validation-details {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.validation-details h4 {
  margin: 0 0 12px 0;
  color: #495057;
  font-size: 1em;
  font-weight: 600;
}

.validation-details ul {
  margin: 0;
  padding-left: 20px;
  color: #6c757d;
}

.validation-details li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.validation-details li:last-child {
  margin-bottom: 0;
}

.modal-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Spinner for loading states */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
}

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

/* Job Type Badges */
.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.badge-primary {
  background-color: #3b82f6;
  color: white;
}

.badge-secondary {
  background-color: #6b7280;
  color: white;
}

/* Statistics Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.stat-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-card h4 {
  margin: 0 0 15px 0;
  color: #374151;
  font-size: 1.1em;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 10px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row span:first-child {
  color: #6b7280;
  font-weight: 500;
}

.stat-row span:last-child {
  color: #1f2937;
  font-weight: 600;
}

/* Distribution Chart */
.distribution-chart {
  background: #f9fafb;
  border-radius: 6px;
  padding: 15px;
}

.distribution-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.distribution-row:last-child {
  margin-bottom: 0;
}

.category-label {
  min-width: 80px;
  font-size: 0.85em;
  font-weight: 500;
}

.distribution-bar {
  flex: 1;
  height: 18px;
  background: #e5e7eb;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}

.distribution-fill {
  height: 100%;
  border-radius: 9px;
  transition: width 0.3s ease;
}

.distribution-value {
  min-width: 80px;
  text-align: right;
  font-size: 0.85em;
  font-weight: 500;
  color: #6b7280;
}

/* Category Colors */
.category-very_small { color: #dc2626; }
.category-very_small .distribution-fill { background: #dc2626; }

.category-small { color: #ea580c; }
.category-small .distribution-fill { background: #ea580c; }

.category-normal { color: #16a34a; }
.category-normal .distribution-fill { background: #16a34a; }

.category-large { color: #ca8a04; }
.category-large .distribution-fill { background: #ca8a04; }

.category-very_large { color: #dc2626; }
.category-very_large .distribution-fill { background: #dc2626; }

/* Recommendations Section */
.recommendations-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.recommendations-section h4 {
  margin: 0 0 15px 0;
  color: #1e293b;
  font-size: 1.1em;
  font-weight: 600;
}

.recommendations-list {
  margin: 0;
  padding-left: 20px;
  border-left: 4px solid #3b82f6;
}

.recommendations-list li {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #475569;
}

.recommendations-list li:last-child {
  margin-bottom: 0;
}

/* Reprocessing Actions */
.reprocessing-actions {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.reprocessing-actions h4 {
  margin: 0 0 15px 0;
  color: #92400e;
  font-size: 1.1em;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Batch Actions Section */
.batch-actions-section {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

/* Groups Analysis Table */
.groups-analysis-table {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.groups-analysis-table .data-table {
  margin: 0;
  border: none;
}

.groups-analysis-table .data-table th {
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.groups-analysis-table .data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.group-row:hover {
  background-color: #f9fafb;
}

.groups-analysis-table .health-score-badge {
  font-size: 0.8em;
  padding: 4px 8px;
  border-radius: 12px;
}

.text-warning {
  color: #f59e0b !important;
  font-weight: 600;
}

/* No Data State */
.no-data {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.no-data svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #d1d5db;
}

.no-data h3 {
  margin: 0 0 8px 0;
  font-size: 1.2em;
  color: #374151;
}

.no-data p {
  margin: 0;
  font-size: 0.9em;
}

/* Action buttons spacing in table */
/* Button spacing for table actions */
.groups-analysis-table .data-table td .btn-action-enhanced {
  margin-right: 8px;
  margin-bottom: 4px;
}

.groups-analysis-table .data-table td .btn-action-enhanced:last-child {
  margin-right: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .validation-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .validation-filters-form {
    flex-direction: column;
    align-items: stretch;
  }

  .validation-filter-group input,
  .validation-filter-group select {
    min-width: auto;
  }

  .validation-detail-content {
    margin: 16px auto;
    padding: 0 16px;
  }

  .validation-detail-card {
    padding: 24px;
    margin-bottom: 16px;
  }

  .validation-detail-section {
    margin-bottom: 24px;
    padding: 20px;
  }

  .validation-detail-section h3 {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }

  .validation-detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .validation-detail-label {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }

  .validation-detail-value {
    font-size: 0.9rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .btn-action-enhanced {
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .validation-stats-grid {
    grid-template-columns: 1fr;
  }

  .validation-stat-value {
    font-size: 2em;
  }

  .validation-detail-card {
    padding: 20px;
  }

  .stat-card {
    padding: 15px;
  }

  .health-score-badge {
    font-size: 0.85em;
    padding: 8px 16px;
  }
}

/* ==========================================
   GROUPED VALIDATION ISSUES STYLES
   ========================================== */

.validation-count-badge {
  background-color: #3b82f6;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.validation-summary {
  margin: 10px 0;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #dee2e6;
}

.severity-count {
  margin-right: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.severity-count.critical {
  background-color: #fee2e2;
  color: #dc2626;
}

.severity-count.warning {
  background-color: #fef3c7;
  color: #d97706;
}

.severity-count.info {
  background-color: #dbeafe;
  color: #2563eb;
}

.detailed-issues {
  margin-top: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.individual-issue {
  margin-bottom: 10px;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

.individual-issue:last-child {
  margin-bottom: 0;
}

.issue-header {
  margin-bottom: 8px;
}

.issue-details {
  margin-top: 8px;
}

.btn-validation-toggle {
  background-color: #6b7280;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  margin-right: 8px;
}

.btn-validation-toggle:hover {
  background-color: #4b5563;
}

.btn-validation-reprocess {
  background-color: #059669;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-validation-reprocess:hover {
  background-color: #047857;
}

.btn-validation-reprocess svg {
  width: 16px;
  height: 16px;
}

/* ==========================================
   VALIDATION ISSUES MODAL STYLES
   ========================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

.modal-subtitle {
  margin: 5px 0 0 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
}

.modal-close-btn:hover {
  color: #374151;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-group {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #374151;
}

.form-control-enhanced {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
}

.form-control-enhanced:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* btn-action-enhanced styles are defined in application.css */

/* ==========================================
   ENHANCED VALIDATION MODAL STYLES
   ========================================== */

.validation-modal {
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-title-section {
  flex: 1;
}

.modal-title-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
}

.modal-icon {
  width: 24px;
  height: 24px;
  color: #3b82f6;
}

.reprocess-info-section {
  margin-bottom: 24px;
}

.info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.info-card h4 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.info-card ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}

.info-card li {
  margin: 6px 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.warning-card {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.warning-card svg {
  width: 20px;
  height: 20px;
  color: #d97706;
  flex-shrink: 0;
}

.warning-card span {
  font-size: 0.875rem;
  color: #92400e;
  font-weight: 500;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
}

.form-label span {
  font-size: 0.875rem;
}

.required-asterisk {
  color: #ef4444;
  margin-left: 4px;
}

.form-control-enhanced {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}

.form-control-enhanced:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b7280;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.radio-option:hover {
  background-color: #f9fafb;
}

.radio-option input[type="radio"] {
  margin: 0;
  margin-top: 2px;
}

.radio-label {
  font-weight: 500;
  color: #374151;
  display: block;
  margin-bottom: 2px;
}

.radio-option small {
  font-size: 0.75rem;
  color: #6b7280;
}

.btn-text {
  margin-left: 8px;
}

/* ==========================================
   TOAST NOTIFICATION STYLES
   ========================================== */

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999; /* Highest priority - must be above everything */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  min-width: 320px;
  max-width: 500px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-slide-in 0.3s ease-out;
  position: relative;
}

.toast.success {
  background: #f0fdf4;
  border: 1px solid #22c55e;
  color: #15803d;
}

.toast.error {
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #dc2626;
}

.toast.info {
  background: #f0f9ff;
  border: 1px solid #3b82f6;
  color: #1d4ed8;
}

.toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0 0 4px 0;
}

.toast-message {
  font-size: 0.875rem;
  margin: 0;
  opacity: 0.9;
}

.toast-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toast-close:hover {
  opacity: 1;
}

.toast-close svg {
  width: 16px;
  height: 16px;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.toast-exit {
  animation: toast-slide-out 0.3s ease-in forwards;
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ==========================================
   COMPACT SUMMARY DASHBOARD STYLES
   ========================================== */

.validation-summary-section {
  margin-bottom: 24px;
}

.summary-dashboard {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 20px;
  margin-bottom: 16px;
}

.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.summary-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  transition: all 0.2s ease;
}

.summary-stat-card:hover {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.overview-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.severity-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.page-type-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.stat-content {
  flex: 1;
  min-width: 0;
}

/* Overview Stats */
.primary-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.secondary-stats {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Severity Breakdown */
.severity-breakdown {
  display: flex;
  gap: 16px;
}

.severity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.severity-count {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

.severity-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.severity-item.critical .severity-count {
  color: #ef4444;
}

.severity-item.warning .severity-count {
  color: #f59e0b;
}

.severity-item.info .severity-count {
  color: #3b82f6;
}

/* Page Type Breakdown */
.page-type-breakdown {
  display: flex;
  gap: 20px;
}

.page-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.page-type-count {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

.page-type-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.page-type-item.listing .page-type-count {
  color: #3b82f6;
}

.page-type-item.product .page-type-count {
  color: #10b981;
}

/* Compact Actions */
.summary-actions {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.actions-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

.btn-compact-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-compact-action:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-compact-action:active {
  transform: translateY(0);
}

.btn-compact-action svg {
  width: 14px;
  height: 14px;
}

/* Job Type Badges */
.job-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
}

.job-type-badge svg {
  width: 12px;
  height: 12px;
}

.job-type-badge.listing {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.job-type-badge.product {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

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

  .summary-stat-card {
    padding: 12px;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .severity-breakdown,
  .page-type-breakdown {
    gap: 12px;
  }

  .summary-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
}

/* ==========================================
   BATCH ACTIONS STYLES
   ========================================== */

.batch-actions {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 20px;
  margin-bottom: 24px;
}

.batch-actions h3 {
  margin: 0 0 16px 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
}

.batch-actions .action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.reprocess-all-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  cursor: pointer;
}

.reprocess-all-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.reprocess-all-btn:active {
  transform: translateY(0);
}

.reprocess-all-btn svg {
  width: 16px;
  height: 16px;
}

/* Spinner animation */
.animate-spin {
  animation: spin 1s linear infinite;
}

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

/* ==========================================
   VALIDATION ISSUES PAGINATION STYLES
   ========================================== */

.validation-content .pagination-controls {
  background: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.validation-content .pagination-controls .pagy-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.validation-content .pagination-controls .pagy-nav a,
.validation-content .pagination-controls .pagy-nav .page.active,
.validation-content .pagination-controls .pagy-nav .page.gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  border: 1px solid transparent;
  background: transparent;
  color: #6b7280;
}

.validation-content .pagination-controls .pagy-nav a:hover {
  background: #f3f4f6;
  color: #374151;
}

.validation-content .pagination-controls .pagy-nav .page.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.3);
}

.validation-content .pagination-controls .pagy-nav .page.gap {
  color: #9ca3af;
  cursor: default;
  border: none;
}

.validation-content .pagination-controls .pagy-nav .page.gap:hover {
  background: transparent;
  color: #9ca3af;
}

/* Responsive pagination for mobile */
@media (max-width: 640px) {
  .validation-content .pagination-controls .pagy-nav a,
  .validation-content .pagination-controls .pagy-nav .page.active {
    min-width: 28px;
    height: 28px;
    font-size: 0.75rem;
    padding: 4px 6px;
  }

  .validation-content .pagination-controls {
    padding: 8px 16px;
  }
}
/* Export History Modal Styles - Updated */

.export-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
}

.section-title {
  color: #1f2937;
  font-size: 1.1em;
  margin-bottom: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-subtitle {
  color: #374151;
  font-size: 1em;
  margin-bottom: 16px;
  font-weight: 500;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-label {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.option-label:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.option-radio:checked + .option-label {
  border-color: #3b82f6;
  background: #eff6ff;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #1f2937;
}

.option-header svg {
  width: 20px;
  height: 20px;
  color: #6b7280;
}

.option-description {
  color: #6b7280;
  font-size: 0.9em;
  margin-top: 4px;
  margin-bottom: 0;
}

.advanced-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group-inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.checkbox-label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.checkbox-label span {
  font-weight: 500;
  color: #1f2937;
}

.form-checkbox {
  margin-top: 2px;
}

.form-help {
  color: #6b7280;
  font-size: 0.85em;
  margin-top: 4px;
}

.config-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #92400e;
}

.config-warning svg {
  width: 20px;
  height: 20px;
  color: #f59e0b;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #6b7280;
}

.empty-state .empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}

.empty-state h4 {
  margin: 0 0 8px 0;
  color: #374151;
}

.empty-state p {
  margin: 0;
}

/* Improved Export History Table */
.export-history-table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.export-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
}

.export-history-table th,
.export-history-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.export-history-table th {
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px;
}

.export-history-table td:last-child {
  border-top: none;
  background: transparent !important;
}

.export-history-table tr:hover {
  background: #f8fafc;
}

.export-history-table .text-center {
  text-align: center;
}

.export-history-table .text-muted {
  color: #6b7280;
  font-size: 0.8em;
}

.export-history-table .status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  min-width: 70px;
}

.export-history-table .status-badge.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.export-history-table .status-badge.status-in_progress {
  background: #dbeafe;
  color: #1e40af;
}

.export-history-table .status-badge.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.export-history-table .status-badge.status-failed {
  background: #fee2e2;
  color: #dc2626;
}

.export-history-table .status-badge.status-cancelled {
  background: #f3f4f6;
  color: #6b7280;
}

.format-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.format-badge.format-zip {
  background: #e0e7ff;
  color: #3730a3;
}

.format-badge.format-gzip {
  background: #fef3c7;
  color: #92400e;
}

.format-badge.format-flat {
  background: #f3e8ff;
  color: #6b46c1;
}

.structure-text {
  font-size: 0.75em;
  color: #6b7280;
  font-weight: 500;
}

.compression-text {
  font-size: 0.75em;
  color: #6b7280;
  font-style: italic;
}

.progress-bar-container {
  width: 60px;
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.export-actions-cycle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent !important;
}

.btn-cancel-export {
  background: none;
  border: 1px solid #fca5a5;
  color: #dc2626;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-cancel-export:hover {
  background: #fee2e2;
  border-color: #f87171;
}

.btn-cancel-export svg {
  width: 12px;
  height: 12px;
}

.export-info {
  font-size: 0.75em;
  color: #374151;
  font-weight: 500;
}

.export-info.error {
  color: #dc2626;
}

.icon-completed {
  color: #10b981;
  width: 14px;
  height: 14px;
}

.icon-failed {
  color: #ef4444;
  width: 14px;
  height: 14px;
}

.file-count {
  font-size: 0.75em;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.file-size {
  font-size: 0.75em;
  color: #6b7280;
  font-weight: 500;
}

.completion-time {
  font-size: 0.75em;
  color: #6b7280;
}

.link-primary {
  color: #3b82f6;
  text-decoration: none;
}

.link-primary:hover {
  text-decoration: underline;
}

.optional {
  color: #9ca3af;
  font-weight: normal;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.form-label svg {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.form-control,
.form-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9em;
  transition: all 0.2s;
  background: white;
  color: #1f2937;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: #fefefe;
}

/* Modern Dropdown Specific Styling */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding-right: 40px;
  cursor: pointer;
}

.form-select:hover {
  border-color: #9ca3af;
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.form-select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.form-group {
  margin-bottom: 16px;
}

.btn-primary-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9em;
  justify-content: center;
  min-height: 48px;
}

.btn-primary-modern:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary-modern:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
}

.btn-primary-modern svg {
  width: 16px;
  height: 16px;
}

.option-radio {
  position: absolute;
  opacity: 0;
}

.export-history-section {
  margin-bottom: 24px;
}

.export-configuration-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}

.extension-rules-container {
  margin-top: 8px;
}

.extension-rules-list {
  margin-bottom: 12px;
}

.extension-rule-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: flex-start;
}

.extension-rule-row:last-child {
  margin-bottom: 0;
}

.btn-add-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-rule:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.btn-add-rule svg {
  width: 14px;
  height: 14px;
}

.btn-remove-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 36px;
}

.btn-remove-rule:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.btn-remove-rule svg {
  width: 14px;
  height: 14px;
}

.extension-rules-list:empty::before {
  content: "No extension rules defined.";
  color: #9ca3af;
  font-style: italic;
  font-size: 0.85em;
}

/* Info Button - Just the icon without background */
.btn-info-export {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: none !important;
  color: #6b7280 !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

.btn-info-export:hover {
  background: none !important;
  color: #374151 !important;
}

.btn-info-export svg {
  width: 20px !important;
  height: 20px !important;
}

/* Compact modal styling */
#export-info-modal.modal-overlay {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
}

#export-info-modal .modal-content {
  max-width: 540px;
  width: 95%;
  padding: 20px;
}

#export-info-modal .modal-header {
  margin: -20px -20px 16px -20px;
  padding: 16px 20px;
  color: white;
  border-radius: 16px 16px 0 0;
}

#export-info-modal .modal-header h2 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}

#export-info-modal .modal-subtitle {
  font-size: 0.8rem;
  margin: 2px 0 0 0;
  opacity: 0.9;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #e2e8f0;
  transition: all 0.2s ease;
}

.info-row:hover {
  background: #f1f5f9;
  border-left-color: #4f46e5;
}

.info-label {
  font-weight: 500;
  color: #64748b;
  font-size: 0.85rem;
}

.info-value {
  color: #1e293b;
  font-weight: 600;
  font-size: 0.85rem;
  text-align: right;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#export-info-path,
.export-info-modal #export-info-path,
.destination-path code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  background: #374151 !important;
  color: #f3f4f6 !important;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  max-width: none;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: break-word;
  display: block;
  margin: 0;
}

@media (max-width: 480px) {
  #export-info-modal .modal-content {
    max-width: 95%;
    padding: 16px;
  }

  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
  }

  .info-label {
    font-size: 0.8rem;
  }

  .info-value {
    font-size: 0.8rem;
    max-width: none;
    white-space: normal;
    text-align: left;
    word-break: break-all;
  }
}

/* Group Selection Styles */
.group-selection-container {
  margin-top: 1rem;
}

.group-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.group-selection-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-secondary-small {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary-small:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
}

.btn-secondary-small svg {
  width: 1rem;
  height: 1rem;
}

.group-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.group-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.group-checkbox-input {
  width: 1rem;
  height: 1rem;
  accent-color: #4f46e5;
  cursor: pointer;
}

.group-checkbox-label {
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  font-weight: 500;
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-checkbox-label:hover {
  color: #111827;
}

.group-name {
  font-weight: 500;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-file-count {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 400;
  margin-left: 8px;
  flex-shrink: 0;
}

.no-groups-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  color: #6b7280;
}

.no-groups-message svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.no-groups-message p {
  margin: 0;
  font-size: 0.875rem;
}

/* Export Info Modal - Modern Design */
.export-info-modal {
  width: 95%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  background: white;
}

.export-info-modal .modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1001;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.export-info-modal .modal-close:hover {
  background: #f3f4f6;
  color: #374151;
  transform: scale(1.1);
}

/* Header */
.export-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.export-info-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.export-info-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.export-info-icon svg {
  width: 24px;
  height: 24px;
}

.export-info-details h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.export-info-subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.export-info-status-badge .status-badge {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(10px);
}

/* Body */
.export-info-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Scrollbar styling for export modal */
.export-info-body::-webkit-scrollbar {
  width: 8px;
}

.export-info-body::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.1);
  border-radius: 4px;
}

.export-info-body::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.export-info-body::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}

/* For Firefox */
.export-info-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.4) rgba(148, 163, 184, 0.1);
}

.export-info-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
}

.section-header svg {
  width: 20px;
  height: 20px;
  color: #667eea;
}

.section-header.error {
  color: #dc2626;
}

.section-header.error svg {
  color: #dc2626;
}

/* Progress Card */
.progress-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 16px;
  color: white;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.progress-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.progress-percentage {
  font-size: 1.5rem;
  font-weight: 700;
}

.progress-card .progress-bar-container {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-card .progress-bar {
  height: 100%;
  background: white;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.progress-details {
  font-size: 0.875rem;
  opacity: 0.9;
}

/* Info Cards */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.info-card {
  background: #f8fafc;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #374151;
}

.info-card-header svg {
  width: 16px;
  height: 16px;
  color: #667eea;
}

.info-card-content {
  color: #6b7280;
  line-height: 1.6;
}

.info-card-content p {
  margin: 0 0 8px;
}

.info-card-content p:last-child {
  margin-bottom: 0;
}

/* Destination Card */
.destination-card,
.export-info-modal .destination-card {
  background: #f8fafc !important;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

.destination-path {
  margin-bottom: 16px;
}

.destination-path code {
  font-size: 0.875rem;
  background: #374151;
  color: #f3f4f6;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  word-break: break-all;
}

.destination-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.875rem;
  color: #6b7280;
}

.destination-details span {
  font-weight: 500;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat-card {
  background: #f8fafc;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #374151;
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.timeline-dot.created {
  background: #6b7280;
}

.timeline-dot.started {
  background: #3b82f6;
}

.timeline-dot.completed {
  background: #10b981;
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.timeline-value {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

/* Error Card */
.error-card {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 16px;
  color: #dc2626;
}

.error-card p {
  margin: 0;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .export-info-modal {
    width: 95%;
    max-width: none;
    margin: 10px;
  }

  .export-info-header {
    padding: 16px 20px 12px;
  }

  .export-info-body {
    padding: 16px 20px;
    gap: 16px;
  }

  .info-cards {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .destination-details {
    flex-direction: column;
    gap: 8px;
  }
}
/* Bulk Export Dashboard Styles */

.bulk-export-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Bulk Export History Section */
.bulk-export-history-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  margin-bottom: 32px;
  overflow: hidden;
}

.history-header {
  padding: 0;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

/* Accordion Toggle Button */
.history-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.history-accordion-toggle:hover {
  background: #f1f5f9;
}

.history-accordion-toggle:focus {
  outline: 2px solid #4f46e5;
  outline-offset: -2px;
}

.history-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.history-icon {
  width: 24px;
  height: 24px;
  color: #4f46e5;
}

.export-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

/* Accordion Chevron */
.accordion-chevron {
  width: 20px;
  height: 20px;
  color: #6b7280;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.history-accordion-toggle.expanded .accordion-chevron {
  transform: rotate(0deg);
}

/* Collapsible Content */
.bulk-export-history-content {
  transition: opacity 0.2s ease;
}

.bulk-export-history-content.show {
  opacity: 1;
}

.bulk-export-history-table-container {
  overflow-x: auto;
  max-height: 500px;
  overflow-y: auto;
}

/* Bulk Export History Table Compact Styling */
.bulk-export-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
}

.bulk-export-history-table th,
.bulk-export-history-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.bulk-export-history-table th {
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px;
}

.bulk-export-history-table td:last-child {
  border-top: none;
  background: transparent !important;
}

.bulk-export-history-table tr:hover {
  background: #f8fafc;
}

.bulk-export-history-table .text-center {
  text-align: center;
}

.bulk-export-history-table .text-muted {
  color: #6b7280;
  font-size: 0.8em;
}

.bulk-export-history-table .status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7em;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  min-width: 65px;
}

.bulk-export-history-table .status-badge.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.bulk-export-history-table .status-badge.status-in_progress {
  background: #dbeafe;
  color: #1e40af;
}

.bulk-export-history-table .status-badge.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.bulk-export-history-table .status-badge.status-failed {
  background: #fee2e2;
  color: #dc2626;
}

.bulk-export-history-table .format-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.bulk-export-history-table .format-badge.format-zip {
  background: #e0e7ff;
  color: #3730a3;
}

.bulk-export-history-table .format-badge.format-gzip {
  background: #fef3c7;
  color: #92400e;
}

.bulk-export-history-table .format-badge.format-flat {
  background: #f3e8ff;
  color: #6b46c1;
}

.bulk-export-history-table .structure-text {
  font-size: 0.8em;
  color: #64748b;
}

.bulk-export-history-table .file-count {
  font-size: 0.8em;
  color: #374151;
  font-weight: 500;
}

.bulk-export-history-table .file-size {
  font-size: 0.8em;
  color: #374151;
  font-weight: 500;
}

.bulk-export-history-table .progress-bar-container {
  width: 100%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.bulk-export-history-table .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Bulk Export Cycle Info Cell */
.bulk-export-cycle-info-cell {
  max-width: 120px;
}

.bulk-export-cycle-link {
  font-weight: 500;
  color: #1e40af;
  text-decoration: none;
  font-size: 0.85em;
}

.bulk-export-cycle-link:hover {
  color: #1e3a8a;
  text-decoration: underline;
}

.bulk-export-cycle-custom-name {
  font-size: 0.7em;
  color: #64748b;
  margin: 2px 0 0 0;
  display: block;
}

/* Bucket Info */
.bucket-name {
  font-weight: 500;
  color: #374151;
  font-size: 0.8em;
}

.bucket-path {
  font-size: 0.7em;
  color: #6b7280;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  display: block;
  margin-top: 2px;
}

/* Groups Info */
.groups-count {
  font-weight: 500;
  color: #374151;
  font-size: 0.8em;
}

.groups-list {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.group-tag {
  background: #f3f4f6;
  color: #374151;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.65em;
  font-weight: 500;
}

.groups-summary {
  font-size: 0.7em;
  color: #6b7280;
  margin-top: 2px;
  display: block;
}

.empty-history-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  color: #6b7280;
}

.empty-history-state .empty-icon {
  width: 48px;
  height: 48px;
  color: #d1d5db;
  margin-bottom: 16px;
}

.empty-history-state h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.empty-history-state p {
  margin: 0;
  font-size: 0.875rem;
}

/* Bulk Export Form Section */
.bulk-export-form-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.form-header {
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.form-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.form-icon {
  width: 24px;
  height: 24px;
  color: #4f46e5;
}

.form-subtitle {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

.bulk-export-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 30px;
  min-height: calc(100vh - 200px);
}

/* Left Panel - Export Configuration */
.export-config-panel {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: fit-content;
  position: sticky;
  top: 20px;
}

.config-section {
  padding: 24px;
}

.config-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 20px 0;
}

.config-title svg {
  width: 20px;
  height: 20px;
  color: #4f46e5;
}

.form-section-mini {
  margin: 20px 0;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.section-subtitle-mini {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px 0;
}

.option-group-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-label-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  font-weight: 500;
}

.option-label-mini:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.option-radio:checked + .option-label-mini {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1e40af;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4f46e5;
  margin-top: 2px;
}

.checkbox-label {
  flex: 1;
  cursor: pointer;
}

.checkbox-label span {
  display: block;
  font-weight: 500;
  color: #374151;
  margin-bottom: 2px;
}

.checkbox-label small {
  color: #6b7280;
  font-size: 0.8rem;
}

/* Export Actions */
.export-actions {
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

.btn-bulk-export {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
  position: relative;
}

.btn-bulk-export:hover:not(:disabled) {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4);
}

.btn-bulk-export:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-bulk-export svg {
  width: 18px;
  height: 18px;
}

.export-counter {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #dc2626;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.bulk-actions {
  display: flex;
  gap: 8px;
}

.btn-secondary-mini {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary-mini:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.btn-secondary-mini svg {
  width: 14px;
  height: 14px;
}

/* Right Panel - Cycles Selection */
.cycles-selection-panel {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cycles-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 12px 12px 0 0;
}

.cycles-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.cycles-title svg {
  width: 20px;
  height: 20px;
  color: #4f46e5;
}

.cycles-counter {
  color: #6b7280;
  font-weight: 500;
  font-size: 0.9rem;
}

.cycles-list {
  padding: 0;
}

/* Bulk Export Cycle Cards */
.bulk-export-cycle-card {
  border-bottom: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.bulk-export-cycle-card:last-child {
  border-bottom: none;
}

.bulk-export-cycle-card.selected {
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
}

.bulk-export-cycle-card-header {
  padding: 20px 24px;
  cursor: pointer;
  transition: background 0.2s;
}

.bulk-export-cycle-card-header:hover {
  background: #f9fafb;
}

.bulk-export-cycle-selection {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bulk-export-cycle-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #4f46e5;
  cursor: pointer;
}

.bulk-export-cycle-label {
  flex: 1;
  cursor: pointer;
  margin: 0;
}

.bulk-export-cycle-info {
  flex: 1;
}

.bulk-export-cycle-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.bulk-export-cycle-custom-name {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0 0 6px 0;
  font-style: italic;
}

.bulk-export-cycle-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #6b7280;
}

.bulk-export-meta-separator {
  color: #d1d5db;
}

.bulk-export-cycle-date {
  font-weight: 500;
}

.bulk-export-cycle-groups-count,
.bulk-export-cycle-exports-count {
  font-weight: 500;
}

/* Bulk Export Groups Section */
.bulk-export-cycle-groups-section {
  padding: 16px 24px 20px 24px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
}

.bulk-export-cycle-groups-section.show {
  opacity: 1;
}

.groups-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.groups-header h5 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.group-actions-bulk {
  display: flex;
  gap: 8px;
}

.btn-select-all-groups,
.btn-clear-groups {
  padding: 4px 8px;
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-select-all-groups:hover,
.btn-clear-groups:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.group-checkbox-bulk {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.group-checkbox-bulk:hover {
  background: #f3f4f6;
}

.group-checkbox-input {
  width: 14px;
  height: 14px;
  accent-color: #4f46e5;
  cursor: pointer;
}

.group-checkbox-label {
  font-size: 0.8rem;
  color: #374151;
  cursor: pointer;
  font-weight: 500;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-checkbox-label:hover {
  color: #111827;
}

.group-name {
  font-weight: 500;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-file-count {
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 400;
  margin-left: 8px;
  flex-shrink: 0;
}

.no-groups-message {
  padding: 20px;
  text-align: center;
  color: #6b7280;
  font-style: italic;
}

.no-groups-message p {
  margin: 0;
}

/* Enhanced Queue Management */
.queue-management-container {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}

.queue-option {
  margin-bottom: 16px;
}

.queue-option-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.queue-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #4f46e5;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

.queue-option-label {
  cursor: pointer;
  flex: 1;
  margin: 0;
}

.queue-option-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.queue-option-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
}

.queue-icon {
  width: 16px;
  height: 16px;
  color: #6366f1;
  flex-shrink: 0;
}

.queue-option-description {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.4;
}

.queue-benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 30px;
  margin-top: 8px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #059669;
}

.benefit-icon {
  width: 14px;
  height: 14px;
  color: #10b981;
  flex-shrink: 0;
}

.queue-timing-info {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
}

.timing-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.timing-header svg {
  width: 16px;
  height: 16px;
  color: #6366f1;
}

.timing-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.timing-label {
  color: #6b7280;
}

.timing-value {
  color: #374151;
  font-weight: 500;
}

/* Section subtitle with icon */
.section-subtitle-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px 0;
}

.section-subtitle-mini svg {
  width: 18px;
  height: 18px;
  color: #6366f1;
}

/* Warning Messages */
.config-warning-global {
  margin: 20px auto;
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #92400e;
}

.config-warning-global svg {
  width: 20px;
  height: 20px;
  color: #f59e0b;
  flex-shrink: 0;
}

/* Empty State */
.bulk-export-container .empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px auto;
  color: #d1d5db;
}

.empty-state h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.empty-state p {
  margin: 0;
  font-size: 0.95rem;
}

/* Export Actions Container */
.bulk-export-actions {
  padding: 24px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 12px 12px;
}

.btn-bulk-export {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-bulk-export:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.btn-bulk-export:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-bulk-export svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bulk-export-counter {
  background: rgba(255, 255, 255, 0.9);
  color: #4f46e5;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  position: relative;
  top: -2px;
}

/* Bulk Actions Section */
.bulk-export-bulk-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.bulk-export-btn-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: white;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  min-width: 140px;
  justify-content: center;
}

.bulk-export-btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #374151;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bulk-export-btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bulk-export-btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
  border-color: #4f46e5;
}

.bulk-export-btn-secondary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Bulk Export History Table Actions */
.bulk-export-history-table .export-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent !important;
}

.bulk-export-history-table .btn-info-export {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: none !important;
  color: #6b7280 !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bulk-export-history-table .btn-info-export:hover {
  background: none !important;
  color: #374151 !important;
}

.bulk-export-history-table .btn-info-export svg {
  width: 20px !important;
  height: 20px !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .bulk-export-layout {
    grid-template-columns: 350px 1fr;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .bulk-export-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .export-config-panel {
    position: static;
  }

  .groups-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 600px) {
  .bulk-export-container {
    padding: 15px;
  }

  .config-section {
    padding: 20px;
  }

  .bulk-export-actions {
    padding: 16px 20px;
  }

  .cycles-header {
    padding: 16px 20px;
  }

  .bulk-export-cycle-card-header {
    padding: 16px 20px;
  }

  .bulk-export-cycle-groups-section {
    padding: 12px 20px 16px 20px;
  }

  .groups-grid {
    grid-template-columns: 1fr;
  }

  /* Mobile button improvements */
  .bulk-export-bulk-actions {
    flex-direction: column;
    gap: 8px;
  }

  .bulk-export-btn-secondary {
    width: 100%;
    min-width: auto;
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  .btn-bulk-export {
    padding: 18px 24px;
    font-size: 1.1rem;
  }

  .bulk-export-counter {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .bulk-export-bulk-actions {
    gap: 6px;
  }

  .bulk-export-btn-secondary {
    padding: 12px 14px;
    font-size: 0.85rem;
  }

  .btn-bulk-export {
    padding: 16px 20px;
    font-size: 1rem;
  }

  .bulk-export-actions {
    padding: 12px 16px;
  }
}
/* Validation Issues Styles - Consistent with existing app patterns */

/* Stats Section - Compact */
.validation-stats-section {
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-card.total {
  border-left: 4px solid #3b82f6;
}

.stat-card.unique-requests {
  border-left: 4px solid #8b5cf6;
}

.stat-card.critical {
  border-left: 4px solid #ef4444;
}

.stat-card.warning {
  border-left: 4px solid #f59e0b;
}

.stat-card.info {
  border-left: 4px solid #10b981;
}

.stat-card.resolved {
  border-left: 4px solid #059669;
}

.stat-card.discarded {
  border-left: 4px solid #6b7280;
}

.stat-card.marked-as-failure {
  border-left: 4px solid #dc2626;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

/* Filters Section - Compact */
.validation-filters-section {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

/* Bulk Actions Section */
.validation-bulk-actions {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.bulk-actions-container h3 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.bulk-actions-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-bulk-reprocess-all {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}

.btn-bulk-reprocess-all:hover {
  background: #2563eb;
}

.btn-bulk-reprocess-all svg {
  width: 16px;
  height: 16px;
}

.bulk-actions-description {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
  font-style: italic;
}

.validation-filters-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: end;
}

.validation-filter-group {
  display: flex;
  flex-direction: column;
  min-width: 185px;
}

.validation-filter-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.validation-filter-group input,
.validation-filter-group select {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
  background: white;
}

.validation-filter-group input:focus,
.validation-filter-group select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.validation-filters-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 0; /* Align with bottom of dropdowns */
}

.btn-validation-clear {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: 500;
  height: 31px; /* Match dropdown height */
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.btn-validation-clear:hover {
  background: #e5e7eb;
  text-decoration: none;
}

/* Issues Grid - Compact */
.validation-issues-grid {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.validation-issue-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.validation-issue-card.issue-resolved {
  border-left: 4px solid #10b981;
  background: #f0fdf4;
}

.validation-issue-card.issue-discarded {
  border-left: 4px solid #6b7280;
  background: #f9fafb;
}

.validation-issue-card.issue-marked-as-failure {
  border-left: 4px solid #dc2626;
  background: #fef2f2;
}

.validation-issue-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.validation-issue-meta {
  flex: 1;
}

.validation-issue-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.validation-issue-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
}

.validation-issue-badges svg {
  width: 12px;
  height: 12px;
}

.job-type-badge {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.job-type-badge.listing {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.job-type-badge.product {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.validation-severity-badge.critical {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.validation-severity-badge.warning {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.validation-severity-badge.info {
  background: #dbeafe;
  color: #2563eb;
  border: 1px solid #93c5fd;
}

.validation-count-badge {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.resolved-badge {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}

.discarded-badge {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.marked-as-failure-badge {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.validation-group-info {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 4px;
}

.validation-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.validation-actions button,
.validation-actions a {
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.validation-actions svg {
  width: 12px;
  height: 12px;
}

.btn-validation-toggle {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
}

.btn-validation-toggle:hover {
  background: #e5e7eb;
}

.btn-issue-action {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

.btn-issue-action:hover {
  background: #bfdbfe;
}

.btn-validation-view {
  background: #f0f9ff;
  border: 1px solid #7dd3fc;
  color: #0369a1;
}

.btn-validation-view:hover {
  background: #e0f2fe;
  text-decoration: none;
}

.btn-validation-reprocess {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
}

.btn-validation-reprocess:hover {
  background: #fef08a;
}

/* Issue Content */
.validation-issue-content {
  margin-bottom: 12px;
}

.validation-issue-url,
.validation-issue-rid {
  margin-bottom: 8px;
  font-size: 0.875rem;
}

.validation-issue-url strong,
.validation-issue-rid strong {
  color: #374151;
}

.validation-issue-url a,
.validation-issue-rid a {
  color: #2563eb;
  text-decoration: none;
  word-break: break-all;
}

.validation-issue-url a:hover,
.validation-issue-rid a:hover {
  text-decoration: underline;
}

.validation-summary {
  margin-bottom: 8px;
  font-size: 0.875rem;
}

.validation-summary strong {
  color: #374151;
}

.severity-count {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  margin-right: 6px;
}

.severity-count.critical {
  background: #fee2e2;
  color: #dc2626;
}

.severity-count.warning {
  background: #fef3c7;
  color: #d97706;
}

.severity-count.info {
  background: #dbeafe;
  color: #2563eb;
}

.validation-issue-details {
  margin-bottom: 8px;
}

.validation-issue-details strong {
  color: #374151;
  font-size: 0.875rem;
}

.validation-issue-details pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-top: 4px;
}

/* Detailed Issues */
.detailed-issues {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.detailed-issues h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.individual-issue {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.individual-issue .issue-header {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.validation-type-badge {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 1px 4px;
  font-size: 0.75rem;
  border-radius: 3px;
}

.individual-issue .issue-details pre {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  font-size: 0.625rem;
  padding: 6px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: auto;
}

/* Status Actions */
.issue-status-actions {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 8px;
}

.btn-resolve {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #16a34a;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-resolve:hover {
  background: #bbf7d0;
}

.btn-discard {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-discard:hover {
  background: #e2e8f0;
}

.btn-mark-as-failure {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-mark-as-failure:hover {
  background: #fee2e2;
}

.btn-resolve svg,
.btn-discard svg,
.btn-mark-as-failure svg {
  width: 12px;
  height: 12px;
}

/* Timestamp */
.issue-timestamp {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

/* Empty State */
.validation-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.validation-empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: #9ca3af;
}

.validation-empty-state h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.validation-empty-state p {
  margin-bottom: 8px;
}

.validation-empty-state a {
  color: #2563eb;
  text-decoration: none;
}

.validation-empty-state a:hover {
  text-decoration: underline;
}

/* Pagination */
.pagination-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination-controls:has(nav) {
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
}

/* Fallback for browsers that don't support :has() */
.pagination-controls nav {
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
  margin: 0;
}

/* File Viewer Modal */
.file-viewer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1005;
}

.file-viewer-content {
  background: white;
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  width: 800px;
  height: 600px;
  display: flex;
  flex-direction: column;
}

.file-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.file-viewer-header h3 {
  margin: 0;
  font-size: 1.125rem;
  color: #374151;
}

.file-viewer-actions {
  display: flex;
  gap: 8px;
}

.file-viewer-actions button {
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: white;
  cursor: pointer;
}

.file-viewer-actions button:hover {
  background: #f3f4f6;
}

.file-viewer-body {
  flex: 1;
  overflow: auto;
  background: #f8fafc;
}

.file-viewer-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: white;
}

.file-tab {
  background: #f3f4f6;
  border: none;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.file-tab.active {
  background: white;
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.file-tab:hover {
  background: #e5e7eb;
  color: #374151;
}

.file-tab.active:hover {
  background: white;
  color: #3b82f6;
}

.file-viewer-content-area {
  position: relative;
  height: 500px;
}

.tab-content {
  display: none;
  height: 100%;
}

.tab-content.active {
  display: block;
}

.html-renderer {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

.source-code {
  background: #f1f5f9;
  border: none;
  padding: 15px;
  margin: 0;
  overflow: auto;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #334155;
  white-space: pre-wrap;
  word-wrap: break-word;
  height: 100%;
  box-sizing: border-box;
}

.file-info {
  background: #e5e7eb;
  padding: 8px 15px;
  border-bottom: 1px solid #d1d5db;
  font-size: 0.875rem;
  color: #374151;
}

/* Custom Prompt Input Styles */
.prompt-input-container {
  margin: 15px 0;
}

.prompt-input-container input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.prompt-input-container input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.prompt-input-container input::placeholder {
  color: #9ca3af;
}

.file-viewer-body pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 12px;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  max-height: 100%;
  overflow: auto;
}

/* Responsive Design */
/* Custom Dropdown Styling */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #374151;
  min-height: 48px;
  box-sizing: border-box;
}

.dropdown-toggle:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.dropdown-toggle:focus,
.custom-dropdown.open .dropdown-toggle {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.dropdown-value {
  flex: 1;
  text-align: left;
  font-weight: 500;
  color: #1f2937;
}

.dropdown-arrow {
  width: 20px;
  height: 20px;
  color: #6b7280;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.custom-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.custom-dropdown.open .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.dropdown-option {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  color: #374151;
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.dropdown-option:active {
  background: #e5e7eb;
}

.dropdown-option.selected {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 500;
}

.dropdown-option.selected:hover {
  background: #dbeafe;
}

/* Dropdown scroll styling */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}



@media (max-width: 768px) {
  .validation-filters-container {
    flex-direction: column;
    gap: 12px;
  }

  .validation-filter-group {
    min-width: 100%;
  }

  .validation-issue-header {
    flex-direction: column;
    gap: 10px;
  }

  .validation-actions {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Custom dropdown mobile adjustments */
  .dropdown-toggle {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
  }

  .dropdown-option {
    padding: 10px 12px;
    font-size: 13px;
  }

  .dropdown-arrow {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .validation-issue-badges {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================
   SIMPLE BULK SELECTION STYLES
   ========================================== */

/* Bulk selection section */
.bulk-selection-section {
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  margin-bottom: 16px;
}

.bulk-selection-section h4 {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.bulk-select-all-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 12px;
}

.bulk-select-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.bulk-select-label {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
  cursor: pointer;
}

.bulk-selection-note {
  margin-top: 6px;
  margin-bottom: 12px;
}

.bulk-selection-note small {
  color: #6b7280;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.4;
}

/* Selected actions */
.selected-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  margin-top: 8px;
}

.selected-count {
  font-weight: 500;
  color: #1e40af;
  font-size: 0.875rem;
}

.btn-bulk-resolve-selected,
.btn-bulk-discard-selected,
.btn-bulk-mark-as-failure-selected,
.btn-bulk-reprocess-selected,
.btn-bulk-revalidate-selected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-bulk-resolve-selected {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}

.btn-bulk-resolve-selected:hover {
  background: #bbf7d0;
}

.btn-bulk-discard-selected {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.btn-bulk-discard-selected:hover {
  background: #e2e8f0;
}

.btn-bulk-mark-as-failure-selected {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.btn-bulk-mark-as-failure-selected:hover {
  background: #fee2e2;
}

.btn-bulk-reprocess-selected {
  background: #fefbf3;
  color: #d97706;
  border: 1px solid #fed7aa;
}

.btn-bulk-reprocess-selected:hover {
  background: #fef3c7;
}

.btn-bulk-revalidate-selected {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #93c5fd;
}

.btn-bulk-revalidate-selected:hover {
  background: #dbeafe;
}

.btn-bulk-reprocess-selected svg {
  width: 16px;
  height: 16px;
}

.btn-bulk-revalidate-selected svg {
  width: 16px;
  height: 16px;
}

/* Global actions section */
.global-actions-section {
  padding: 16px;
  background: #fefefe;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
}

.global-actions-section h4 {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.global-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-resolve-all,
.btn-discard-all,
.btn-mark-all-as-failure,
.btn-revalidate-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-resolve-all {
  background: #16a34a;
  color: white;
}

.btn-resolve-all:hover {
  background: #15803d;
}

.btn-discard-all {
  background: #64748b;
  color: white;
}

.btn-discard-all:hover {
  background: #475569;
}

.btn-mark-all-as-failure {
  background: #dc2626;
  color: white;
}

.btn-mark-all-as-failure:hover {
  background: #b91c1c;
}

.btn-revalidate-all {
  background: #2563eb;
  color: white;
}

.btn-revalidate-all:hover {
  background: #1d4ed8;
}

.btn-resolve-all svg,
.btn-discard-all svg,
.btn-mark-all-as-failure svg,
.btn-revalidate-all svg {
  width: 16px;
  height: 16px;
}

/* Individual issue checkboxes */
.issue-select-container {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.issue-select-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}

/* Selected issue styling */
.validation-issue-card.selected {
  border-color: #3b82f6;
  background: #f0f9ff;
}

/* ==========================================
   LAYOUT STYLES - 3 COLUMN LAYOUT
   ========================================== */

/* Page container override for validation issues */
.validation-issues-page.page-container {
  max-width: 1800px;
  width: 95%;
  margin: 0 auto;
  padding: 0 20px;
}

/* Main 3-column layout: Stats | Issues | Actions */
.validation-main-layout {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}

/* Left Column: Stats */
.validation-stats-column {
  position: sticky;
  top: 20px;
}

.validation-stats-column .validation-stats-section {
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 16px;
  margin-bottom: 0;
}

.validation-stats-column h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.validation-stats-column .stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 0;
}

.validation-stats-column .stat-card {
  padding: 12px;
  margin-bottom: 0;
}

.validation-stats-column .stat-value {
  font-size: 1.5rem;
}

/* Center Column: Issues */
.validation-issues-column {
  min-width: 0; /* Allows content to shrink */
}

/* Right Column: Actions */
.validation-actions-column {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Adjust action sections for right column */
.validation-actions-column .validation-bulk-actions,
.validation-actions-column .bulk-selection-section,
.validation-actions-column .global-actions-section {
  margin-bottom: 0;
}

.validation-actions-column h3,
.validation-actions-column h4 {
  font-size: 0.9rem;
  margin-bottom: 12px;
}

/* Adjust button sizes for actions column */
.validation-actions-column .btn-bulk-reprocess-all,
.validation-actions-column .btn-resolve-all,
.validation-actions-column .btn-discard-all,
.validation-actions-column .btn-mark-all-as-failure,
.validation-actions-column .btn-revalidate-all {
  width: 100%;
  justify-content: center;
  font-size: 0.75rem;
  padding: 8px 10px;
  line-height: 1.3;
}

.validation-actions-column .btn-bulk-resolve-selected,
.validation-actions-column .btn-bulk-discard-selected,
.validation-actions-column .btn-bulk-mark-as-failure-selected,
.validation-actions-column .btn-bulk-reprocess-selected,
.validation-actions-column .btn-bulk-revalidate-selected {
  width: 100%;
  justify-content: center;
  font-size: 0.75rem;
  padding: 6px 8px;
  line-height: 1.3;
}

.validation-actions-column .selected-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.validation-actions-column .global-actions-buttons {
  flex-direction: column;
  gap: 6px;
}

.validation-actions-column .bulk-actions-description p {
  font-size: 0.75rem;
  margin: 8px 0 0 0;
  line-height: 1.3;
}

.validation-actions-column .bulk-select-label {
  font-size: 0.8rem;
  line-height: 1.3;
}

.validation-actions-column .selected-count {
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 4px;
}

/* Mobile responsive */
@media (max-width: 1200px) {
  .validation-main-layout {
    grid-template-columns: 280px 1fr 280px;
    gap: 20px;
  }

  .validation-stats-column .stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .validation-stats-column .stat-card {
    padding: 10px;
  }

  .validation-stats-column .stat-value {
    font-size: 1.3rem;
  }

  /* Override error-page conflicts on medium screens */
  .validation-stats-column .stat-card.error-page {
    padding: 10px !important;
  }


}

@media (max-width: 1024px) {
  .validation-main-layout {
    grid-template-columns: 240px 1fr 240px;
    gap: 16px;
  }

  .validation-issues-page .page-container {
    width: 98%;
    padding: 0 15px;
  }

  .validation-stats-column .stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .validation-stats-column .stat-card {
    padding: 8px;
  }

  .validation-stats-column .stat-value {
    font-size: 1.25rem;
  }

  /* Override error-page conflicts on smaller screens */
  .validation-stats-column .stat-card.error-page {
    padding: 8px !important;
  }
}

@media (max-width: 768px) {
  .validation-main-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .validation-stats-column,
  .validation-actions-column {
    position: static;
  }

  .validation-stats-column .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .validation-actions-column {
    order: -1; /* Show actions before issues on mobile */
  }

  .validation-stats-column {
    order: 1; /* Show stats after actions but before issues */
  }

  .validation-issues-column {
    order: 2; /* Show issues last on mobile */
  }

  .bulk-actions-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .selected-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .global-actions-buttons {
    flex-direction: column;
  }

  .btn-resolve-all,
  .btn-discard-all,
  .btn-mark-all-as-failure,
  .btn-revalidate-all,
  .btn-bulk-resolve-selected,
  .btn-bulk-discard-selected,
  .btn-bulk-mark-as-failure-selected,
  .btn-bulk-reprocess-selected,
  .btn-bulk-revalidate-selected {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .validation-stats-column .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Override error-page conflicts on small mobile */
  .validation-stats-column .stat-card.error-page {
    padding: 8px !important;
  }
}

/* Issue Type Statistics use same styles as main statistics */

/* Override conflicting .error-page styles from application.css for validation stat cards */
.validation-stats-column .stat-card.error-page {
  background: white !important;
  min-height: auto !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 12px !important;
  margin: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  text-align: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================
   ENHANCED VALIDATION STATS STYLING
   ========================================== */

/* Enhanced validation stats with better visual hierarchy */
.validation-stats-compact .validation-stat-card {
  position: relative;
  padding: 12px 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

.validation-stats-compact .validation-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.validation-stats-compact .validation-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.validation-stats-compact .validation-stat-card:hover::before {
  opacity: 1;
}

.validation-stats-compact .validation-stat-card .stat-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}

.validation-stats-compact .validation-stat-card .stat-separator {
  display: flex;
  align-items: center;
  color: #9ca3af;
  font-size: 1.2rem;
  font-weight: 300;
}

.validation-stats-compact .validation-stat-card .stat-separator::before {
  content: '';
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom, transparent, #9ca3af, transparent);
  margin: 0 6px;
  flex-shrink: 0;
}

.validation-stats-compact .validation-stat-card .stat-primary {
  font-weight: 800;
  flex-shrink: 0;
  min-width: 0;
}

.validation-stats-compact .validation-stat-card .stat-secondary {
  font-weight: 600;
  opacity: 0.8;
  font-size: 0.9em;
  flex-shrink: 0;
  min-width: 0;
}

.validation-stats-compact .validation-stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.025em;
}

/* Enhanced color styling for different card types */
.validation-stats-compact .validation-stat-card.total {
  border-left: 4px solid #3b82f6;
}

.validation-stats-compact .validation-stat-card.total .stat-number {
  color: #1e40af;
}

.validation-stats-compact .validation-stat-card.total::before {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
}

.validation-stats-compact .validation-stat-card.critical {
  border-left: 4px solid #ef4444;
}

.validation-stats-compact .validation-stat-card.critical .stat-number {
  color: #dc2626;
}

.validation-stats-compact .validation-stat-card.critical::before {
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.3), transparent);
}

.validation-stats-compact .validation-stat-card.warning {
  border-left: 4px solid #f59e0b;
}

.validation-stats-compact .validation-stat-card.warning .stat-number {
  color: #d97706;
}

.validation-stats-compact .validation-stat-card.warning::before {
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.3), transparent);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .validation-stats-compact .validation-stat-card {
    padding: 10px 6px;
  }

  .validation-stats-compact .validation-stat-card .stat-number {
    font-size: 1.1rem;
    gap: 6px;
  }

  .validation-stats-compact .validation-stat-card .stat-separator::before {
    height: 14px;
    margin: 0 4px;
  }

  .validation-stats-compact .validation-stat-card .stat-label {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .validation-stats-compact .validation-stat-card {
    padding: 8px 4px;
  }

  .validation-stats-compact .validation-stat-card .stat-number {
    font-size: 1rem;
    gap: 4px;
  }

  .validation-stats-compact .validation-stat-card .stat-separator::before {
    height: 12px;
    margin: 0 3px;
  }

  .validation-stats-compact .validation-stat-card .stat-label {
    font-size: 0.65rem;
  }
}
/* Console Interface Styles */

/* Console Container */
.console-container {
  max-width: 1200px;
  margin: 20px auto;
  border: 1px solid #333;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.4;
}

.console-header {
  padding: 15px 20px;
  background: #2d2d2d;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.console-header h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
}

.console-controls {
  display: flex;
  gap: 10px;
}

.console-output {
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
  background: #1a1a1a;
}

.console-welcome {
  color: #888;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #333;
}

.console-intro-left {
  text-align: left !important;
}

.console-welcome p {
  margin: 5px 0;
}

.history-section h4 {
  color: #888;
  margin-bottom: 15px;
  font-size: 14px;
}

.console-entry {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #333;
}

.console-entry:last-child {
  border-bottom: none;
}

.console-command {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.prompt {
  color: #4CAF50;
  font-weight: bold;
  margin-right: 10px;
}

.command-text {
  color: #fff;
  flex: 1;
}

.timestamp {
  color: #666;
  font-size: 12px;
  margin-left: 10px;
}

.console-result {
  background: #2d2d2d;
  padding: 10px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #e0e0e0;
  margin-left: 40px;
}

.console-result.error {
  background: #4a1a1a;
  color: #ffaaaa;
}

.console-input-container {
  padding: 15px 20px;
  background: #2d2d2d;
  border-top: 1px solid #333;
}

.console-input-line {
  display: flex;
  align-items: center;
}

.console-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  margin-left: 10px;
}

.console-input::placeholder {
  color: #666;
}

.console-input.loading {
  opacity: 0.6;
}

.console-input.search-mode {
  background-color: #2d4a3a;
  border-color: #4a9;
  box-shadow: 0 0 0 2px rgba(68, 170, 153, 0.3);
}

.console-output::-webkit-scrollbar {
  width: 8px;
}

.console-output::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.console-output::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.console-output::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* Challenge Styles */
.console-challenge-container {
  max-width: 500px;
  margin: 60px auto;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.challenge-header {
  text-align: center;
  margin-bottom: 30px;
}

.challenge-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  color: #f39c12;
}

.challenge-header h2 {
  color: #333;
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
}

.challenge-description {
  color: #666;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.environment-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 14px;
  flex-wrap: wrap;
}

.env-label {
  color: #666;
  font-weight: 500;
  margin-right: 4px;
}

.env-value {
  color: #333;
  font-weight: 600;
  text-transform: uppercase;
  background: #e9ecef;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.challenge-form-container {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-hint {
  margin-top: 6px;
  color: #666;
  font-size: 12px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

/* Button Styles */
.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-secondary {
  background: #666;
  color: #fff;
}

.btn-warning {
  background: #f39c12;
  color: #fff;
}

.btn:hover {
  opacity: 0.8;
}

.btn-primary {
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
}

.btn-primary:hover {
  background: #45a049;
}

.btn-secondary {
  background: #6c757d;
  color: white;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
}

.btn-secondary:hover {
  background: #5a6268;
}

/* Responsive Design */
@media (max-width: 600px) {
  .console-challenge-container {
    margin: 20px;
    padding: 20px;
  }

  .challenge-form-container {
    padding: 20px;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .console-container {
    margin: 10px;
  }

  .console-header {
    flex-direction: column;
    gap: 10px;
  }

  .console-controls {
    width: 100%;
    justify-content: center;
  }
}

/* Floating Console Styles */
.floating-console-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #1a1a1a;
  color: #00ff00;
  border: 2px solid #00ff00;
  border-radius: 25px;
  padding: 10px 16px;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);
  transition: all 0.3s ease;
  user-select: none;
}

.floating-console-toggle:hover {
  background: #2a2a2a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 0, 0.4);
}

.floating-console-toggle .console-icon {
  font-weight: bold;
  font-size: 16px;
}

.floating-console-toggle.active {
  background: #00ff00;
  color: #1a1a1a;
}

.floating-console {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 500px;
  height: 400px;
  background: #1a1a1a;
  border: 2px solid #00ff00;
  border-radius: 8px;
  display: none;
  flex-direction: column;
  z-index: 9998;
  box-shadow: 0 8px 32px rgba(0, 255, 0, 0.2);
  font-family: 'Monaco', 'Menlo', monospace;
  resize: both;
  overflow: hidden;
  min-width: 300px;
  min-height: 200px;
}

.floating-console.show {
  display: flex;
}

.floating-console.maximized {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  width: auto;
  height: auto;
  resize: none;
}

.floating-console.minimized {
  height: 40px;
  resize: none;
}

.floating-console.minimized .floating-console-body {
  display: none;
}

.floating-console-header {
  background: #2a2a2a;
  color: #00ff00;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #333;
  cursor: move;
  user-select: none;
}

.console-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: bold;
}

.console-controls {
  display: flex;
  gap: 4px;
}

.console-control-btn {
  background: none;
  border: none;
  color: #00ff00;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.console-control-btn:hover {
  background: #333;
  color: #fff;
}

.console-control-btn svg {
  width: 16px;
  height: 16px;
}

.floating-console-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.floating-console-output {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  background: #1a1a1a;
  color: #00ff00;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.console-welcome {
  text-align: center;
  padding: 20px;
  color: #888;
}

.welcome-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 8px;
}

.welcome-icon {
  font-size: 18px;
}

.welcome-hint {
  font-size: 12px;
  color: #666;
}

.welcome-hint code {
  background: #2a2a2a;
  padding: 2px 6px;
  border-radius: 3px;
  color: #00ff00;
}

.floating-console-input-container {
  border-top: 1px solid #333;
  padding: 8px;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating-console-prompt {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.prompt-text {
  color: #00ff00;
  font-weight: bold;
  font-size: 12px;
}

.floating-console-input {
  flex: 1;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #00ff00;
  padding: 6px 8px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 12px;
  outline: none;
}

.floating-console-input:focus {
  border-color: #00ff00;
  box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
}

.floating-console-actions {
  display: flex;
  gap: 4px;
}

.console-action-btn {
  background: #333;
  border: 1px solid #555;
  color: #00ff00;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.console-action-btn:hover {
  background: #555;
  border-color: #00ff00;
}

.console-action-btn svg {
  width: 14px;
  height: 14px;
}

.floating-console-entry {
  margin-bottom: 8px;
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
}

.floating-console-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.floating-console-command {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.floating-console-command .prompt {
  color: #00ff00;
  font-weight: bold;
}

.floating-console-command .command-text {
  color: #fff;
}

.floating-console-command .timestamp {
  color: #666;
  font-size: 10px;
  margin-left: auto;
}

.floating-console-result {
  color: #00ff00;
  padding-left: 20px;
  font-size: 11px;
  white-space: pre-wrap;
}

.floating-console-result.error {
  color: #ff6b6b;
}

/* Dragging functionality */
.floating-console.dragging {
  transition: none;
  user-select: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .floating-console {
    width: calc(100vw - 20px);
    height: 300px;
    right: 10px;
    left: 10px;
    bottom: 70px;
  }

  .floating-console-toggle {
    bottom: 10px;
    right: 10px;
  }

  .floating-console.maximized {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
}

/* Scrollbar styling for floating console */
.floating-console-output::-webkit-scrollbar {
  width: 8px;
}

.floating-console-output::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.floating-console-output::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.floating-console-output::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Filesystem Audit Progress Modal - Specific Classes to Avoid Conflicts */
#filesystem-audit-progress-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  backdrop-filter: blur(8px);
  animation: modalFadeIn 0.3s ease-out;
}

#filesystem-audit-progress-modal .modal-content {
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transform: none;
  padding: 0;
}

#filesystem-audit-progress-modal .modal-header {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  color: white;
  padding: 20px 24px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  margin: 0;
  border: none;
}

#filesystem-audit-progress-modal .modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: headerShimmer 4s infinite;
}

@keyframes headerShimmer {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(200%);
  }
}

#filesystem-audit-progress-modal .modal-title-section {
  flex: 1;
  position: relative;
  z-index: 1;
}

#filesystem-audit-progress-modal .modal-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

#filesystem-audit-progress-modal .modal-icon svg {
  width: 20px;
  height: 20px;
  color: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

#filesystem-audit-progress-modal .modal-title-text h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: white;
}

#filesystem-audit-progress-modal .modal-subtitle {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
  font-weight: 400;
  line-height: 1.3;
  color: white;
}

#filesystem-audit-progress-modal .modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  backdrop-filter: blur(10px);
  z-index: 2;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

#filesystem-audit-progress-modal .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

#filesystem-audit-progress-modal .modal-body {
  padding: 24px;
  max-height: 65vh;
  overflow-y: auto;
  background: white;
}

#filesystem-audit-progress-modal .modal-body::-webkit-scrollbar {
  width: 4px;
}

#filesystem-audit-progress-modal .modal-body::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 2px;
}

#filesystem-audit-progress-modal .modal-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

#filesystem-audit-progress-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

#filesystem-audit-progress-modal .progress-section {
  margin-bottom: 24px;
  width: 95%;
}

#filesystem-audit-progress-modal .progress-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

#filesystem-audit-progress-modal .progress-status {
  flex: 1;
}

#filesystem-audit-progress-modal .progress-percentage {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.015em;
  display: block;
  margin-bottom: 4px;
}

#filesystem-audit-progress-modal .progress-message {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  font-weight: 400;
}

#filesystem-audit-progress-modal .progress-time {
  font-size: 12px;
  color: #64748b;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
  font-weight: 500;
  background: #f8fafc;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

 #filesystem-audit-progress-modal .progress-bar-container {
   margin-bottom: 16px;
   background: #f1f5f9;
   border-radius: 8px;
   height: 10px;
   overflow: hidden;
   position: relative;
   border: 1px solid #e2e8f0;
   width: 100%;
 }

 #filesystem-audit-progress-modal .progress-bar-enhanced {
   background: #f1f5f9;
   border-radius: 8px;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
 }

#filesystem-audit-progress-modal .progress-bar-fill-enhanced {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 8px;
  transition: width 0.5s ease;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

#filesystem-audit-progress-modal .progress-bar-fill-enhanced.running::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

#filesystem-audit-progress-modal .progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

#filesystem-audit-progress-modal .stat-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

#filesystem-audit-progress-modal .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #e2e8f0;
}

#filesystem-audit-progress-modal .stat-card:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

#filesystem-audit-progress-modal .stat-card.valid::before {
  background: #10b981;
}

#filesystem-audit-progress-modal .stat-card.orphaned::before {
  background: #f59e0b;
}

#filesystem-audit-progress-modal .stat-card.missing::before {
  background: #ef4444;
}

#filesystem-audit-progress-modal .stat-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

#filesystem-audit-progress-modal .stat-icon.valid {
  background: #dcfce7;
  color: #16a34a;
}

#filesystem-audit-progress-modal .stat-icon.orphaned {
  background: #fef3c7;
  color: #d97706;
}

#filesystem-audit-progress-modal .stat-icon.missing {
  background: #fee2e2;
  color: #dc2626;
}

#filesystem-audit-progress-modal .stat-icon svg {
  width: 14px;
  height: 14px;
}

#filesystem-audit-progress-modal .stat-content {
  text-align: center;
}

#filesystem-audit-progress-modal .stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
  line-height: 1;
}

#filesystem-audit-progress-modal .stat-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.2;
}

#filesystem-audit-progress-modal .progress-info-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

#filesystem-audit-progress-modal .info-icon {
  width: 20px;
  height: 20px;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

#filesystem-audit-progress-modal .info-icon svg {
  width: 12px;
  height: 12px;
  max-width: 12px;
  max-height: 12px;
}

#filesystem-audit-progress-modal .info-content {
  flex: 1;
}

#filesystem-audit-progress-modal .info-content p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

/* Progress Details Section */
#filesystem-audit-progress-modal .progress-details-section {
  margin-top: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

#filesystem-audit-progress-modal .details-tabs {
  display: flex;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

#filesystem-audit-progress-modal .details-tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

#filesystem-audit-progress-modal .details-tab.active {
  color: #3b82f6;
  background: #f8fafc;
  border-bottom-color: #3b82f6;
}

#filesystem-audit-progress-modal .details-tab:hover {
  background: #e2e8f0;
}

#filesystem-audit-progress-modal .details-content {
  position: relative;
  min-height: 120px;
}

#filesystem-audit-progress-modal .details-panel {
  display: none;
  padding: 16px;
  max-height: 200px;
  overflow-y: auto;
}

#filesystem-audit-progress-modal .details-panel.active {
  display: block;
}

#filesystem-audit-progress-modal .details-panel::-webkit-scrollbar {
  width: 4px;
}

#filesystem-audit-progress-modal .details-panel::-webkit-scrollbar-track {
  background: #f1f5f9;
}

#filesystem-audit-progress-modal .details-panel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

/* Actions List */
#filesystem-audit-progress-modal .actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#filesystem-audit-progress-modal .action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: all 0.2s ease;
}

#filesystem-audit-progress-modal .action-item:hover {
  border-color: #cbd5e1;
}

#filesystem-audit-progress-modal .action-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  color: #2563eb;
  flex-shrink: 0;
}

#filesystem-audit-progress-modal .action-icon svg {
  width: 12px;
  height: 12px;
}

#filesystem-audit-progress-modal .action-content {
  flex: 1;
}

#filesystem-audit-progress-modal .action-title {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 2px;
}

#filesystem-audit-progress-modal .action-time {
  font-size: 11px;
  color: #64748b;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
}

/* Groups List */
#filesystem-audit-progress-modal .groups-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#filesystem-audit-progress-modal .groups-placeholder {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  padding: 20px;
  font-style: italic;
}

#filesystem-audit-progress-modal .group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: all 0.2s ease;
}

#filesystem-audit-progress-modal .group-item:hover {
  border-color: #cbd5e1;
}

#filesystem-audit-progress-modal .group-name {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
}

#filesystem-audit-progress-modal .group-stats {
  display: flex;
  gap: 16px;
  align-items: center;
}

#filesystem-audit-progress-modal .group-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
}

#filesystem-audit-progress-modal .group-stat.valid {
  color: #059669;
}

#filesystem-audit-progress-modal .group-stat.orphaned {
  color: #dc2626;
}

#filesystem-audit-progress-modal .group-stat.missing {
  color: #d97706;
}

#filesystem-audit-progress-modal .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  border-radius: 0 0 16px 16px;
  margin: 0;
}

#filesystem-audit-progress-modal .btn-background-action {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#filesystem-audit-progress-modal .btn-background-action:hover {
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#filesystem-audit-progress-modal .btn-background-action svg {
  width: 14px;
  height: 14px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  #filesystem-audit-progress-modal .modal-content {
    width: 95%;
    max-width: none;
  }

  #filesystem-audit-progress-modal .modal-header {
    padding: 16px 20px;
  }

  #filesystem-audit-progress-modal .modal-body {
    padding: 20px;
  }

  #filesystem-audit-progress-modal .progress-stats {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
  }

  #filesystem-audit-progress-modal .stat-card {
    padding: 12px;
  }

  #filesystem-audit-progress-modal .modal-footer {
    padding: 12px 20px;
  }
}

@media (max-width: 480px) {
  #filesystem-audit-progress-modal .modal-content {
    width: 98%;
    margin: 10px;
  }

  #filesystem-audit-progress-modal .modal-header {
    padding: 14px 16px;
  }

  #filesystem-audit-progress-modal .modal-body {
    padding: 16px;
  }

  #filesystem-audit-progress-modal .progress-stats {
    grid-template-columns: 1fr 1fr;
  }

  #filesystem-audit-progress-modal .progress-info-box {
    padding: 12px;
  }

  #filesystem-audit-progress-modal .modal-footer {
    padding: 10px 16px;
  }
}
/* ==========================================
   SUMMARY MODAL STYLES
   ========================================== */

.summary-container {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.summary-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.summary-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.summary-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.summary-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-card-icon.listing {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
}

.summary-card-icon.product {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #15803d;
}

.summary-card-icon.status {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
}

.summary-card-icon svg {
  width: 18px;
  height: 18px;
}

.summary-card-title {
  font-weight: 600;
  color: #1e293b;
  font-size: 0.9em;
}

.summary-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.summary-stat-main {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-number {
  font-weight: 700;
  font-size: 1.1em;
  color: #1e293b;
}

.stat-divider {
  color: #94a3b8;
  font-weight: 500;
}

.stat-total {
  font-weight: 600;
  color: #64748b;
}

.summary-stat-percentage {
  font-size: 0.9em;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.summary-progress-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.summary-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.status-card .summary-card-stats {
  justify-content: center;
}

.estimation-card {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.estimation-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.estimation-icon svg {
  width: 20px;
  height: 20px;
}

.estimation-content {
  flex: 1;
}

.estimation-label {
  font-size: 0.85em;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 2px;
}

.estimation-value {
  font-size: 1.1em;
  font-weight: 600;
  color: #1e293b;
}

/* Details Section Styling */
.details-section {
  margin-top: 24px;
}

.details-section:first-child {
  margin-top: 0;
}

.details-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.section-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-icon svg {
  width: 12px;
  height: 12px;
}
/* ==========================================
   LOGS MODAL STYLES
   ========================================== */

/* Logs Modal Container */
.logs-container {
  max-height: 65vh;
  overflow-y: auto;
  margin-top: 8px;
  padding: 0;
  background: transparent;
}

/* Logs Header */
.logs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #e2e8f0;
}

.logs-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e293b;
}

.logs-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logs-icon svg {
  width: 14px;
  height: 14px;
}

/* Modern Logs Table */
.logs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin: 0;
  border: 1px solid #e2e8f0;
}

.logs-table th {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: none;
  border-bottom: 2px solid #e2e8f0;
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  color: #1e293b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.logs-table th:first-child {
  border-radius: 12px 0 0 0;
}

.logs-table th:last-child {
  border-radius: 0 12px 0 0;
}

.logs-table td {
  padding: 12px 20px;
  border: none;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  text-align: left;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.logs-table tbody tr {
  transition: all 0.2s ease;
}

.logs-table tbody tr:nth-child(even) {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.logs-table tbody tr:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.logs-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 12px;
}

.logs-table tbody tr:last-child td:last-child {
  border-radius: 0 0 12px 0;
}

/* Log Timestamp Styling */
.log-timestamp {
  white-space: nowrap;
  width: 1%;
  color: #64748b;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  padding: 6px 12px !important;
  border-radius: 8px;
  margin: 4px;
}

/* Log Message Styling */
.log-message {
  position: relative;
  line-height: 1.6;
}

.log-prefix {
  color: #6366f1;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  display: inline-block;
}

.log-message-content {
  color: #1e293b;
  font-weight: 500;
}

/* Empty Logs State */
.logs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 2px dashed #cbd5e1;
  margin: 20px 0;
}

.logs-empty-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #64748b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.logs-empty-icon svg {
  width: 28px;
  height: 28px;
}

.logs-empty h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #475569;
}

.logs-empty p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
}

/* Loading State */
.logs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  margin: 20px 0;
}

.logs-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 12px;
}

.logs-loading-text {
  color: #6366f1;
  font-weight: 600;
  font-size: 0.9rem;
}

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

/* Enhanced Pagination for Logs */
.logs-pagination {
  margin-top: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: flex;
  justify-content: center;
}

.logs-pagination .pagy-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.logs-pagination .pagy-nav a,
.logs-pagination .pagy-nav .page.active,
.logs-pagination .pagy-nav .page.gap {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  color: #475569;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  min-width: 36px;
  text-align: center;
}

.logs-pagination .pagy-nav a:hover {
  border-color: #6366f1;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.logs-pagination .pagy-nav .page.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-color: #6366f1;
  font-weight: 600;
}

.logs-pagination .pagy-nav .page.gap {
  border: none;
  background: none;
  color: #94a3b8;
}

/* Custom Scrollbar for Logs Container */
.logs-container::-webkit-scrollbar {
  width: 8px;
}

.logs-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.logs-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.logs-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .logs-container {
    max-height: 50vh;
  }

  .logs-table th,
  .logs-table td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .logs-header h2 {
    font-size: 1.1rem;
  }

  .log-timestamp {
    font-size: 0.75rem;
    padding: 4px 8px !important;
  }

  .log-prefix {
    font-size: 0.7rem;
    padding: 1px 4px;
  }

  .logs-pagination .pagy-nav a,
  .logs-pagination .pagy-nav .page.active,
  .logs-pagination .pagy-nav .page.gap {
    padding: 6px 10px;
    font-size: 0.8rem;
    min-width: 32px;
  }
}
/* ==========================================
   CYCLE / GROUP DETAILS MODAL STYLES
   ========================================== */

/* Cycle Details Container */
.cycle-details-container {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0;
  margin-top: 8px;
  background: transparent;
}

/* Details Section */
.details-section {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.details-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.details-section:last-child {
  margin-bottom: 0;
}

/* Section Headers */
.details-section h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  color: #1e293b;
  font-weight: 700;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  position: relative;
}

.details-section h4::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 1px;
}

/* Details Grid Layout */
.details-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px 24px;
  align-items: start;
  margin-bottom: 0;
}

/* Detail Labels and Values */
.detail-label {
  font-weight: 600;
  color: #475569;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.detail-value {
  color: #1e293b;
  word-break: break-all;
  line-height: 1.5;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.detail-value:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* JSON Display */
.json-display {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #e2e8f0;
  border: 1px solid #475569;
  border-radius: 12px;
  padding: 20px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.json-display::before {
  content: 'JSON';
  position: absolute;
  top: 12px;
  right: 16px;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Group Details Specific Styles */
.group-details-content {
  max-height: 70vh;
  overflow-y: auto;
}

.group-details-content .details-section {
  margin-bottom: 24px;
}

.group-details-content .details-section:last-child {
  margin-bottom: 0;
}

.group-details-content .details-section h4 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.1rem;
  color: #1e293b;
  font-weight: 700;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 12px;
}

.group-details-content .details-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px 24px;
  align-items: start;
}

.group-details-content .detail-label {
  font-weight: 600;
  color: #475569;
  padding-top: 2px;
  font-size: 0.9rem;
}

.group-details-content .detail-value {
  color: #1e293b;
  word-break: break-all;
  line-height: 1.5;
  font-weight: 500;
}

.group-details-content .detail-value a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.group-details-content .detail-value a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.group-details-content .detail-value code {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: #475569;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #cbd5e1;
}

/* Job Breakdown Container */
.job-breakdown-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}

.job-breakdown-item {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  transition: all 0.3s ease;
}

.job-breakdown-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.job-breakdown-item .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.job-breakdown-item .label .name {
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-breakdown-item .label .name::before {
  content: '';
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
}

.job-breakdown-item .label .count {
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
}

/* Enhanced Stat Value Button */
.stat-value-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: center;
  display: block;
  width: 100%;
  border-radius: 8px;
  position: relative;
  padding: 8px;
}

.stat-value-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.12));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.stat-value-btn p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.stat-value-btn .percentage {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 600;
}

/* Section Icons */
.section-icon {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-icon svg {
  width: 12px;
  height: 12px;
}

/* Enhanced Data Table for Details */
.cycle-details-container .data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  margin-top: 16px;
}

.cycle-details-container .data-table th {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: none;
  border-bottom: 2px solid #e2e8f0;
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  color: #1e293b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cycle-details-container .data-table th:first-child {
  border-radius: 12px 0 0 0;
}

.cycle-details-container .data-table th:last-child {
  border-radius: 0 12px 0 0;
}

.cycle-details-container .data-table td {
  padding: 12px 20px;
  border: none;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  text-align: left;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.cycle-details-container .data-table tbody tr:nth-child(even) {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.cycle-details-container .data-table tbody tr:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.cycle-details-container .data-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 12px;
}

.cycle-details-container .data-table tbody tr:last-child td:last-child {
  border-radius: 0 0 12px 0;
}

/* Action Buttons in Details */
.cycle-details-container .data-table .actions {
  display: flex;
  gap: 8px;
}

.cycle-details-container .btn-view-files {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.cycle-details-container .btn-view-files:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* Custom Scrollbar for Details Container */
.cycle-details-container::-webkit-scrollbar {
  width: 8px;
}

.cycle-details-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.cycle-details-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.cycle-details-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .cycle-details-container {
    max-height: 50vh;
  }

  .details-section {
    padding: 16px;
    margin-bottom: 16px;
  }

  .details-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .group-details-content .details-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .job-breakdown-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .details-section h4 {
    font-size: 1rem;
  }

  .detail-label,
  .detail-value {
    font-size: 0.85rem;
  }

  .json-display {
    font-size: 0.8rem;
    padding: 16px;
    max-height: 300px;
  }

  .cycle-details-container .data-table th,
  .cycle-details-container .data-table td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
}
/* ==========================================
   BODY SIZE ANALYSIS STYLES
   ========================================== */

/* Container styles removed - now using standard modal-content-lg system */

/* Custom styles removed - now using standard modal system */

/* Body size analysis modal padding fixes */
#reprocess-outliers-modal .modal-content,
#batch-reprocess-modal .modal-content {
  padding: 0 !important;
  padding-bottom: 32px !important;
}

#reprocess-outliers-modal .modal-content:has(.modal-header),
#batch-reprocess-modal .modal-content:has(.modal-header) {
  padding-top: 0 !important;
}

#reprocess-outliers-modal .modal-body,
#batch-reprocess-modal .modal-body {
  padding: 60px !important;
}

#reprocess-outliers-modal .modal-header,
#batch-reprocess-modal .modal-header {
  margin: 0 !important;
}

/* Dynamic modal content when used for body size analysis */
#dynamic-modal .modal-content-lg {
  padding: 0 !important;
}

#dynamic-modal .modal-content-lg:has(.modal-header) {
  padding-top: 0 !important;
}

/* Modal Back Button Styling */
.modal-back-btn {
  position: absolute;
  top: 20px;
  right: 60px;
  z-index: 10;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  padding: 8px;
  color: #6366f1;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08),
              0 2px 6px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 36px;
  height: 36px;
}

.modal-back-btn:hover {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border-color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.2),
              0 4px 8px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.modal-back-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15),
              0 1px 4px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.modal-back-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.modal-back-btn:hover svg {
  transform: translateX(-2px);
}

/* Adjust close button positioning to avoid overlap */
.modal-close-btn {
  top: 20px;
  right: 20px;
}

/* Responsive adjustments for back button */
@media (max-width: 768px) {
  .modal-back-btn {
    top: 16px;
    right: 50px;
    padding: 6px;
    border-radius: 6px;
    width: 32px;
    height: 32px;
  }

  .modal-back-btn svg {
    width: 16px;
    height: 16px;
  }

  .modal-close-btn {
    top: 16px;
    right: 16px;
  }
}

@media (max-width: 480px) {
  .modal-back-btn {
    top: 12px;
    right: 45px;
    padding: 5px;
    border-radius: 5px;
    width: 28px;
    height: 28px;
  }

  .modal-back-btn svg {
    width: 14px;
    height: 14px;
  }

  .modal-close-btn {
    top: 12px;
    right: 12px;
  }
}

/* Body Size Stat Cards - Specific to body size analysis */
.body-size-stat-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.body-size-stat-card h4 {
  margin: 0 0 15px 0;
  color: #374151;
  font-size: 1.1em;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 10px;
}

/* Flash Notice */
.flash.flash-notice {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border: 1px solid #3b82f6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #1e40af;
  font-size: 14px;
  line-height: 1.5;
}

.flash.flash-notice .flash-content {
  margin: 0;
}

.flash.flash-notice .flash-content strong {
  color: #1e3a8a;
}

/* Health Score Section */
.health-score-section {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.health-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.health-score-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.health-score-badge.score-good {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.health-score-badge.score-fair {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
}

.health-score-badge.score-poor {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.health-score-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Distribution Chart */
.distribution-chart {
  margin-top: 8px;
  flex: 1;
}

.distribution-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  gap: 6px;
  font-size: 11px;
}

.distribution-row:last-child {
  margin-bottom: 0;
}

.category-label {
  min-width: 60px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.distribution-bar {
  flex: 1;
  height: 14px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  min-width: 60px;
}

.distribution-fill {
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(135deg, currentColor 0%, currentColor 100%);
  transition: width 0.5s ease;
}

.distribution-value {
  min-width: 65px;
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  flex-shrink: 0;
}

/* Category Colors */
.category-very_small { color: #ef4444; }
.category-very_small .distribution-fill { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.category-small { color: #f97316; }
.category-small .distribution-fill { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }

.category-normal { color: #10b981; }
.category-normal .distribution-fill { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.category-large { color: #f59e0b; }
.category-large .distribution-fill { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

.category-very_large { color: #ef4444; }
.category-very_large .distribution-fill { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

/* Groups Analysis Table */
.groups-analysis-table {
  margin-bottom: 24px;
}

.groups-analysis-table .data-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  background: #ffffff;
}

.groups-analysis-table .data-table th {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e2e8f0;
}

.groups-analysis-table .data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: 13px;
  color: #374151;
}

.groups-analysis-table .data-table tbody tr:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f9fafb 100%);
}

.groups-analysis-table .data-table tbody tr:last-child td {
  border-bottom: none;
}

.groups-analysis-table .health-score-badge {
  padding: 3px 8px;
  font-size: 10px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.groups-analysis-table .badge {
  padding: 3px 6px;
  font-size: 9px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.groups-analysis-table .badge-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.groups-analysis-table .badge-secondary {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
}

.groups-analysis-table .text-warning {
  color: #f59e0b;
  font-weight: 600;
}

/* Action buttons in reprocessing section */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.action-buttons .btn {
  flex: 0 0 auto;
  max-width: 300px;
}

/* Batch Actions Section */
.batch-actions-section {
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  text-align: center;
}

.batch-actions-section .btn {
  margin: 0 auto;
  max-width: 300px;
}

/* No Data State */
.no-data {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-radius: 8px;
  border: 2px dashed #d1d5db;
}

.no-data svg {
  width: 40px;
  height: 40px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.no-data h3 {
  margin: 0 0 6px 0;
  color: #6b7280;
  font-size: 1.1rem;
  font-weight: 600;
}

.no-data p {
  margin: 0;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.5;
}

/* Recommendations Section */
.recommendations-section {
  margin-bottom: 24px;
}

.recommendations-section h4 {
  color: #1e293b;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 600;
}

.recommendations-list {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #0ea5e9;
  border-left: 3px solid #0ea5e9;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0;
}

.recommendations-list li {
  margin-bottom: 6px;
  color: #075985;
  font-size: 13px;
  line-height: 1.5;
}

.recommendations-list li:last-child {
  margin-bottom: 0;
}

/* Reprocessing Actions */
.reprocessing-actions {
  border-top: 1px solid #e2e8f0;
  padding-top: 20px;
  margin-top: 20px;
}

.reprocessing-actions h4 {
  color: #1e293b;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 600;
}

/* Modal Header */
.modal-header {
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.03) 100%);
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-icon {
  width: 20px;
  height: 20px;
  color: #6366f1;
}

.modal-close {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
  transform: scale(1.05);
}

/* Modal Body */
.modal-body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Info and Warning Cards */
.reprocess-info-card,
.batch-warning-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.batch-warning-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.06) 100%);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.info-content h4,
.warning-content h4 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.info-content p,
.warning-content p {
  margin: 0;
  color: #64748b;
  line-height: 1.4;
  font-size: 13px;
}

/* Form Styling */
.reprocess-form,
.batch-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.label-icon {
  width: 14px;
  height: 14px;
  color: #6366f1;
  flex-shrink: 0;
}

.required {
  color: #ef4444;
  font-weight: 700;
}

.form-control {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s ease;
  background: white;
}

.form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-control::placeholder {
  color: #9ca3af;
}

/* Modern Select Dropdown Styling */
.form-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9em;
  transition: all 0.2s;
  background: white;
  color: #1f2937;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding-right: 40px;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  background: #fefefe;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.form-select:hover {
  border-color: #9ca3af;
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

/* Form Actions */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  min-width: 120px;
  max-width: 200px;
}

.btn svg {
  width: 14px;
  height: 14px;
}

.btn.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.2);
}

.btn.btn-primary:hover {
  background: linear-gradient(135deg, #5855eb, #7c3aed);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}

.btn.btn-secondary {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.btn.btn-secondary:hover {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

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

  .groups-analysis-table .data-table th,
  .groups-analysis-table .data-table td {
    padding: 8px 10px;
    font-size: 11px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .btn {
    min-width: auto;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .groups-analysis-table .data-table th,
  .groups-analysis-table .data-table td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .btn {
    width: 100%;
    justify-content: center;
    min-width: auto;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .btn {
    width: 100%;
    max-width: none;
    justify-content: center;
  }
}
/* Category coverage section on the cycle page */
.coverage-section {
  margin: 20px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
}

.coverage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.coverage-title {
  margin: 0;
  font-size: 1.1rem;
  color: #1f2937;
}

.coverage-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: #4b5563;
}

.coverage-table-wrap {
  overflow-x: auto;
}

.coverage-table td:first-child {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.coverage-status-complete {
  color: #166534;
}

.coverage-status-short {
  color: #b91c1c;
}

.coverage-status-in_progress {
  color: #1d4ed8;
}

.coverage-status-unknown {
  color: #6b7280;
}

span.coverage-status-complete {
  background: #dcfce7;
}

span.coverage-status-short {
  background: #fee2e2;
}

span.coverage-status-in_progress {
  background: #dbeafe;
}

span.coverage-status-unknown {
  background: #f3f4f6;
}
/*











 */

/* General & Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  margin: 0;
  background-color: #f8fafc;
  color: #334155;
  zoom: 0.85;
}

h1 {
  color: #1e293b;
  margin: 40px 40px 20px;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: white;
  border-bottom: 1px solid #e2e8f0;
}

.header-bar h1 {
  margin: 0;
}

.page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Refresh Controls */
.refresh-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.refresh-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.refresh-indicator.active {
  opacity: 1;
}

.refresh-countdown.warning {
  color: #f59e0b;
  font-weight: 600;
}

.refresh-controls label {
  font-size: 0.9em;
  font-weight: 500;
  color: #64748b;
}

.refresh-controls select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background-color: white;
  font-size: 0.9em;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.refresh-controls select:hover {
  border-color: #94a3b8;
}

.refresh-controls::after {
  content: '▼';
  font-size: 10px;
  color: #94a3b8;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Main Cycle Card */
.cycle-card {
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin: 0 0 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Cycles Grid Layout */
.cycles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
}

.cycles-grid .cycle-card {
  margin: 0;
}

/* Responsive grid behavior */
@media (max-width: 1400px) {
  .cycles-grid {
    gap: 16px;
  }
}

@media (max-width: 1200px) {
  .cycles-grid {
    gap: 15px;
  }
}

@media (max-width: 900px) {
  .cycles-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .cycles-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .progress-stats {
    gap: 6px;
  }

  .progress-crawlbase {
    gap: 4px;
  }
}

.cycle-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.cycle-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cycle-header-top h2 {
  margin: 0;
  font-size: 1.5em;
  color: #1e293b;
}

.cycle-header-top h2 .custom-name {
  font-size: 0.8em;
  font-weight: 400;
  color: #64748b;
  margin-left: 8px;
}

/* Make custom name smaller in the page header */
h1 .custom-name {
  font-size: 0.6em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 8px;
}

.cycle-header-bottom p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 0.9em;
}

.cycle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.85em;
}

.meta-label {
  font-weight: 600;
  color: #475569;
}

.meta-value {
  color: #1e293b;
}

/* Status & Action Buttons */
.cycle-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Legacy Supervisor Control */
.supervisor-control {
  display: flex;
  align-items: stretch;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.supervisor-status-text {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: #475569;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
}

.supervisor-status-text.status-running {
  color: #15803d;
  background-color: #f0fdf4;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%,
  100% {
    background-color: #f0fdf4;
  }
  50% {
    background-color: #dcfce7;
  }
}

.supervisor-status-text.status-inactive {
  color: #c2410c;
  background-color: #fffbeb;
}

.btn-restart {
  background-color: white;
  color: #475569;
  border: none;
  border-left: 1px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
}

.btn-restart:hover {
  background-color: #f8fafc;
}

/* Modern Supervisor Control */
.supervisor-control-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.supervisor-control-modern:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.supervisor-status-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  font-weight: 500;
}

.supervisor-status-modern .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.supervisor-status-modern.status-active .status-indicator {
  background-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  animation: pulse-indicator 2s infinite;
}

.supervisor-status-modern.status-inactive .status-indicator {
  background-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.supervisor-status-modern .status-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.supervisor-status-modern .status-label {
  color: #64748b;
  font-weight: 500;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.supervisor-status-modern .status-value {
  color: #1e293b;
  font-weight: 600;
  font-size: 0.9em;
}

.supervisor-status-modern.status-active .status-value {
  color: #059669;
}

.supervisor-status-modern.status-inactive .status-value {
  color: #d97706;
}

/* Requeue Button */
.btn-requeue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-requeue:hover {
  background-color: #1d4ed8;
  color: white;
  border-color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.2);
}

.btn-requeue svg {
  width: 14px;
  height: 14px;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 0.85em;
  white-space: nowrap;
}

.supervisor-status {
  width: 120px;
  justify-content: center;
}

.status-tag svg {
  width: 14px;
  height: 14px;
}

.status-running {
  background-color: #e0f2fe;
  color: #0284c7;
  animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
  0%,
  100% {
    background-color: #e0f2fe;
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.3);
  }
  50% {
    background-color: #bae6fd;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
  }
}
.status-completed {
  background-color: #dcfce7;
  color: #16a34a;
}
.status-failed {
  background-color: #fee2e2;
  color: #dc2626;
}
.status-stopped {
  background-color: #fef3c7;
  color: #92400e;
}
.status-wiped {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.status-dry-run {
  background-color: #fefce8;
  color: #a16207;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s ease;
  height: 40px;
  box-sizing: border-box;
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

.btn-restart {
  background-color: white;
  color: #475569;
  border: none;
  border-left: 1px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
}

.btn-restart:hover {
  background-color: #f8fafc;
}

.btn-start {
  background-color: #dcfce7;
  color: #16a34a;
  border-color: #bbf7d0;
}
.btn-start:hover {
  background-color: #22c55e;
  color: white;
  border-color: #16a34a;
}

.btn-stop {
  background-color: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.btn-stop:hover {
  background-color: #ef4444;
  color: white;
  border-color: #dc2626;
}

.btn-delete {
  background-color: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.btn-delete:hover {
  background-color: #ef4444;
  color: white;
  border-color: #dc2626;
}

.btn-wipe {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 4px 10px;
  font-size: 0.8em;
  line-height: 1.2;
  border-radius: 5px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.btn-wipe:hover {
  background-color: #ef4444;
  color: white;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.btn-cancel {
  background-color: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.btn-cancel:hover {
  background-color: #e2e8f0;
}

/* 🎨 Modern Modal System */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.8) 0%,
    rgba(30, 41, 59, 0.9) 50%,
    rgba(15, 23, 42, 0.8) 100%
  );
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(8px) saturate(180%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 20px;
}

.modal-overlay[style*='display: flex'] {
  opacity: 1;
  animation: modalFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.modal-active {
  z-index: 1010;
}

.modal-overlay.modal-active + .modal-overlay {
  z-index: 1020;
}

/* 🎯 Base Modal Content */
.modal-content {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 250, 252, 0.98) 100%
  );
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 10px 20px -5px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  position: relative;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 32px;
}

.modal-overlay[style*='display: flex'] .modal-content {
  transform: scale(1) translateY(0);
  animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ✨ Enhanced Modal Header */
.modal-header {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(168, 85, 247, 0.08) 100%
  );
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  margin: -32px -32px 24px -32px;
  padding: 24px 32px;
  position: relative;
  overflow: hidden;
}

.modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: headerShimmer 3s infinite;
}

.modal-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 50px;
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 50px;
}

.modal-subtitle {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
  font-weight: 500;
}

/* 🔄 Modal Body - No extra padding when header exists */
.modal-body {
  overflow-y: auto;
  max-height: calc(90vh - 200px);
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.1);
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

/* 🎯 Modal Footer */
.modal-footer {
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.8) 0%,
    rgba(241, 245, 249, 0.9) 100%
  );
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  margin: 24px -32px -32px -32px;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ❌ Enhanced Close Button */
.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  color: #64748b;
  transition: all 0.2s ease;
  z-index: 20;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.5);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 🎨 Specialized Modal Types */

/* 📊 Samples Modal */
.modal-samples {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 250, 252, 0.98) 100%
  );
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 10px 20px -5px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px;
}

#samples-modal-content {
  overflow-y: auto;
  flex: 1;
  margin-top: 16px;
}

/* 🖼️ Large Content Modal */
.modal-content-lg {
  max-width: 1200px;
  width: 95%;
  height: 90vh;
  padding: 0;
}

.modal-content-lg .modal-header {
  margin: 0 0 24px 0;
  padding: 24px 32px;
}

.modal-content-lg .modal-body {
  padding: 0 32px;
}

.modal-content-lg .modal-footer {
  margin: 24px 0 0 0;
  padding: 20px 32px;
}

/* 🔧 Sidekiq Modal Enhancements */
#sidekiq-ui-modal .modal-content {
  width: 95%;
  height: 90vh;
  max-width: 1600px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 250, 252, 0.98) 100%
  );
}

#sidekiq-ui-modal .sidekiq-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 16px;
}

#sidekiq-ui-modal .modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
}

#sidekiq-ui-modal .modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.5);
}

/* 📈 Stats Modal */
#crawler-stats-modal .modal-content {
  max-width: 1000px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

#crawler-stats-modal .modal-header {
  background: white;
  color: #1e293b;
  padding: 24px 32px;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid #e2e8f0;
  margin: 0;
}

#crawler-stats-modal .modal-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1e293b;
}

#crawler-stats-modal-content {
  padding: 32px;
  flex: 1;
  overflow-y: auto;
  background: #f8fafc;
}

#error-details-modal .modal-content {
  max-width: 1000px;
  width: 95%;
}

/* 🔄 Modal Content Without Header - Fallback for older browsers */
.modal-content {
  padding-top: 48px;
}

.modal-content:has(.modal-header) {
  padding-top: 32px;
}

/* 🎯 Form Actions in Modals */
.modal-content .form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
}

.modal-content .form-actions-modern {
  margin: 32px -32px -32px -32px;
  padding: 20px 32px;
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.8) 0%,
    rgba(241, 245, 249, 0.9) 100%
  );
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 🔄 Override inline styles in export form */
.modal-content .form-actions[style] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
}

/* 🎭 Modal Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px) saturate(180%);
  }
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.9) translateY(40px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes headerShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 16px;
  }

  .modal-content {
    border-radius: 12px;
    max-height: 95vh;
    padding: 24px;
  }

  .modal-header {
    margin: -24px -24px 20px -24px;
    padding: 20px 24px;
  }

  .modal-header h2 {
    font-size: 1.2rem;
    padding-right: 40px;
  }

  .modal-header h3 {
    font-size: 1.1rem;
    padding-right: 40px;
  }

  .modal-footer {
    margin: 20px -24px -24px -24px;
    padding: 16px 24px;
    flex-direction: column;
    gap: 12px;
  }

  .modal-close-btn {
    width: 32px;
    height: 32px;
    top: 16px;
    right: 16px;
    font-size: 1rem;
  }

  .modal-samples {
    width: 100%;
    max-height: 95vh;
    border-radius: 12px;
    padding: 20px;
  }

  #samples-modal-content {
    margin-top: 12px;
  }

  #sidekiq-ui-modal .modal-content {
    width: 100%;
    height: 95vh;
    border-radius: 12px;
  }

  #error-details-modal .modal-content {
    width: 100%;
  }

  .modal-content-lg {
    padding: 0;
  }

  .modal-content-lg .modal-header {
    margin: 0 0 20px 0;
    padding: 20px 24px;
  }

  .modal-content-lg .modal-body {
    padding: 0 24px;
  }

  .modal-content-lg .modal-footer {
    margin: 20px 0 0 0;
    padding: 16px 24px;
  }

  .modal-content .form-actions-modern {
    margin: 24px -24px -24px -24px;
    padding: 16px 24px;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 12px;
  }

  .modal-content {
    border-radius: 8px;
    max-height: 98vh;
    padding: 20px;
  }

  .modal-header {
    margin: -20px -20px 16px -20px;
    padding: 16px 20px;
  }

  .modal-header h2 {
    font-size: 1.1rem;
    padding-right: 36px;
  }

  .modal-header h3 {
    font-size: 1rem;
    padding-right: 36px;
  }

  .modal-footer {
    margin: 16px -20px -20px -20px;
    padding: 12px 20px;
  }

  .modal-close-btn {
    width: 28px;
    height: 28px;
    top: 12px;
    right: 12px;
    font-size: 0.9rem;
  }

  .modal-samples {
    padding: 16px;
  }

  .modal-content-lg .modal-header {
    padding: 16px 20px;
  }

  .modal-content-lg .modal-body {
    padding: 0 20px;
  }

  .modal-content-lg .modal-footer {
    padding: 12px 20px;
  }

  .modal-content .form-actions-modern {
    margin: 20px -20px -20px -20px;
    padding: 12px 20px;
  }
}

/* Failed Count Button */
.failed-count-btn {
  background: none;
  border: none;
  color: #ef4444;
  font-weight: 500;
  font-size: inherit;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.failed-count-btn:hover {
  background-color: #fee2e2;
  color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* Error Details Modal */
.error-details-container {
  max-height: 500px;
  overflow-y: auto;
  margin-top: 20px;
}

.error-item {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.error-item:last-child {
  margin-bottom: 0;
}

.error-url {
  margin-bottom: 12px;
  word-break: break-all;
}

.error-url a {
  color: #3b82f6;
  text-decoration: none;
}

.error-url a:hover {
  text-decoration: underline;
}

.error-message {
  margin-bottom: 12px;
}

.error-message pre {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px;
  margin: 4px 0 0 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
    monospace;
  font-size: 0.9em;
  color: #dc2626;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.error-meta {
  display: flex;
  gap: 20px;
  font-size: 0.9em;
  color: #64748b;
}

.error-meta span {
  flex-shrink: 0;
}

/* Form Card */
.form-card {
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin: 0 40px 30px;
  padding: 25px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}
.form-label {
  font-size: 1.1em;
  font-weight: 600;
  color: #334155;
  display: block;
  margin-bottom: 8px;
}
.form-description {
  font-size: 0.9em;
  color: #64748b;
  margin-top: 0;
  margin-bottom: 12px;
}
.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1em;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: #334155;
}

/* Modern Flash Messages */
.flash-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999; /* Highest priority - must be above everything */
  max-width: 350px;
  pointer-events: none;
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9em;
  border: 1px solid transparent;
  margin-bottom: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.flash-notice {
  background: rgba(220, 252, 231, 0.95);
  color: #15803d;
  border-color: #bbf7d0;
}

.flash-notice::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2315803d'%3e%3cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.236 4.53L8.53 10.53a.75.75 0 00-1.06 1.061l2.03 2.03a.75.75 0 001.137-.089l3.857-5.401z' clip-rule='evenodd'/%3e%3c/svg%3e")
    no-repeat center;
  background-size: contain;
  flex-shrink: 0;
  margin-top: 1px;
}

.flash-alert {
  background: rgba(254, 226, 226, 0.95);
  color: #b91c1c;
  border-color: #fecaca;
}

.flash-alert::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b91c1c'%3e%3cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3e%3c/svg%3e")
    no-repeat center;
  background-size: contain;
  flex-shrink: 0;
  margin-top: 1px;
}

.flash-success {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}

.flash-success::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2315803d'%3e%3cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.236 4.53L8.53 10.53a.75.75 0 00-1.06 1.061l2.03 2.03a.75.75 0 001.137-.089l3.857-5.401z' clip-rule='evenodd'/%3e%3c/svg%3e")
    no-repeat center;
  background-size: contain;
  flex-shrink: 0;
  margin-top: 1px;
}

.flash-error {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.flash-error::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b91c1c'%3e%3cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3e%3c/svg%3e")
    no-repeat center;
  background-size: contain;
  flex-shrink: 0;
  margin-top: 1px;
}

.flash-info {
  background: rgba(240, 249, 255, 0.95);
  color: #1e40af;
  border-color: #bfdbfe;
}

.flash-info::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231e40af'%3e%3cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z' clip-rule='evenodd'/%3e%3c/svg%3e")
    no-repeat center;
  background-size: contain;
  flex-shrink: 0;
  margin-top: 1px;
}

.flash-content {
  flex: 1;
  line-height: 1.5;
}

.flash-dismiss {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  font-size: 1rem;
  line-height: 1;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.flash-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.flash.flash-dismissing {
  animation: slideOutToRight 0.3s ease-in forwards;
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Enhanced Progress Bar */
.progress-section {
  padding: 16px 20px;
  background-color: #f8fafc;
  border-radius: 0 0 12px 12px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.progress-label {
  font-size: 0.9em;
  font-weight: 600;
  color: #475569;
}

.progress-percentage {
  font-size: 1.1em;
  font-weight: 700;
  color: #1e293b;
}

.progress-details {
  font-size: 0.85em;
  color: #64748b;
  font-weight: 500;
}

.progress-failures {
  display: flex;
  align-items: center;
}

.progress-failures .failed-count {
  font-size: 0.85em;
  font-weight: 600;
  color: #ef4444;
  background-color: #fee2e2;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #fecaca;
}

.progress-bar-enhanced {
  width: 100%;
  height: 12px;
  background-color: #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill-enhanced {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 8px;
  transition: width 0.8s ease;
  position: relative;
  overflow: hidden;
}

.progress-bar-fill-enhanced.running {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);
  background-size: 200% 100%;
  animation: progress-flow 3s ease-in-out infinite;
}

.progress-bar-fill-enhanced.completed {
  background: linear-gradient(90deg, #10b981, #059669);
}

.progress-bar-fill-enhanced.export-ready {
  background: linear-gradient(90deg, #059669, #047857);
}

.progress-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer-slide 2s infinite;
}

.progress-bar-fill-enhanced.running .progress-shimmer {
  animation: shimmer-slide 1.5s infinite;
}

@keyframes progress-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shimmer-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Legacy Progress Bar (for backward compatibility) */
.progress-container {
  width: 100%;
  background-color: #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  height: 16px;
  margin-top: 12px;
}
.progress-bar {
  width: 100%;
  background-color: #e2e8f0;
  border-radius: 8px;
  height: 16px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background-color: #22c55e; /* Green */
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 0.75em;
  line-height: 16px;
  white-space: nowrap;
  transition: width 0.6s ease;
  position: relative;
  overflow: hidden;
}

.progress-bar-fill.updating::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.progress-bar-fill.running {
  background-color: #3b82f6;
} /* Blue */

/* Groups Search */
.groups-search-container {
  background-color: #f8fafc;
  padding: 10px 25px;
  border-top: 1px solid #e2e8f0;
}

.groups-search-container .search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.groups-search-container .search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.groups-search-container .search-results {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #6b7280;
}

/* Group Cards */
.groups-container {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  background-color: #f8fafc;
}

.group-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  position: relative;
}

.group-card:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.group-card.completed {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.group-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}

.group-card-title {
  flex: 1;
  min-width: 0;
}

.group-card-title h3 {
  font-size: 1.05em;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px 0;
  line-height: 1.3;
  word-break: break-word;
}

.group-card-subtitle {
  font-size: 0.8em;
  color: #64748b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.group-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.group-card-header strong {
  font-size: 1.25em;
  font-weight: 600;
  color: #0ea5e9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
  cursor: pointer;
  line-height: 1.3;
}

.group-card-header span {
  font-size: 0.9em;
  color: #64748b;
}

.group-controls .stat-separator {
  color: #cbd5e1;
  margin: 0 4px;
  font-weight: 400;
}

.group-controls .avg-stat {
  background-color: #e0f2fe;
  color: #0c4a6e;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.85em;
  white-space: nowrap;
}

/* No Directory Indicator */
.no-directory-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
  font-size: 0.8em;
  font-weight: 500;
  font-style: italic;
}

.group-progress-section {
  margin-bottom: 12px;
}

.group-card .progress-bar {
  height: 10px;
  background-color: #f1f5f9;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 6px;
}

.group-card .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 6px;
  transition: width 0.6s ease;
  position: relative;
}

.group-card .progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Loading skeleton animation */
.loading-skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Smooth loading state for stat values */
.stat-value.loading {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  color: transparent;
  border-radius: 4px;
  min-height: 1.5em;
}

.group-card.completed .progress-bar-fill {
  background: linear-gradient(90deg, #10b981, #059669);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  color: #64748b;
}

.progress-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-percentage {
  font-weight: 600;
  color: #1e293b;
}

.processing-indicator-inline {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #3b82f6;
  font-size: 0.8em;
  font-weight: 500;
  padding: 2px 6px;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
  animation: processing-pulse 2s infinite;
}

.processing-indicator-inline svg {
  width: 11px;
  height: 11px;
  animation: spin 1s linear infinite;
}

.crawlbase-rate-compact {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #16a34a;
  font-size: 0.8em;
  font-weight: 500;
  padding: 2px 6px;
  background-color: rgba(22, 163, 74, 0.1);
  border-radius: 4px;
}

.crawlbase-rate-compact svg {
  width: 11px;
  height: 11px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.stat-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-group-label {
  font-size: 0.7em;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  text-align: center;
}

.stat-item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.stat-group .stat-item {
  padding: 3px 6px;
  border-radius: 4px;
}

.stat-group .stat-item h5 {
  margin: 0 0 1px 0;
  font-size: 0.55em;
}

.stat-group .stat-item p {
  margin: 0;
  font-size: 0.75em;
}

.stat-group .stat-item .percentage {
  font-size: 0.55em;
}

.stat-item:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.stat-item h5 {
  margin: 0 0 2px 0;
  font-size: 0.6em;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-item p {
  margin: 0 0 1px 0;
  font-size: 0.8em;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
}

.stat-item .percentage {
  font-size: 0.6em;
  color: #64748b;
  font-weight: 500;
}

.failed-count {
  color: #ef4444;
  font-weight: bold;
}

.stopped-count {
  color: #9ca3af;
  font-weight: bold;
}

.stopped-stats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.failed-stats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.wiped-stats-container {
  color: #9333ea;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.wiped-count {
  color: #9333ea;
  font-weight: 500;
}

/* Crawlbase Breakdown Styles */
.crawlbase-breakdown {
  margin-top: 6px;
  margin-bottom: 4px;
}

.crawlbase-breakdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.75em;
  padding: 3px 0;
  flex-wrap: wrap;
}

.crawlbase-success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #059669;
  font-weight: 600;
}

.crawlbase-failed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dc2626;
  font-weight: 600;
}

.crawlbase-rate-small {
  color: #64748b;
  font-weight: 500;
  font-size: 0.9em;
}

.crawlbase-stats-info {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8em;
  flex-wrap: wrap;
  justify-content: center;
}

.crawlbase-stats-info .crawlbase-success {
  font-size: 0.9em;
}

.crawlbase-stats-info .crawlbase-failed {
  font-size: 0.9em;
}

.crawlbase-stats-info .crawlbase-rate {
  color: #64748b;
  font-weight: 500;
}

.progress-critical-issues {
  margin: 4px 0;
}

.critical-issues-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dc3545;
  font-size: 0.85em;
  font-weight: 600;
  animation: pulse-red 2s infinite;
}

.critical-issues-count svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Processing indicator with spinning animation */
.processing-indicator {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  color: #3b82f6;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 8px;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 6px;
  animation: processing-pulse 2s infinite;
}

.processing-indicator svg {
  width: 12px;
  height: 12px;
  animation: spin 1s linear infinite;
}

@keyframes processing-pulse {
  0%,
  100% {
    background-color: rgba(59, 130, 246, 0.1);
  }
  50% {
    background-color: rgba(59, 130, 246, 0.2);
  }
}

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

.group-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid #e2e8f0;
  gap: 8px;
}

.group-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.group-actions-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-group-details, .btn-group-action {
  background-color: transparent;
  color: #475569;
  border: 1px solid transparent;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-group-details:hover, .btn-group-action:hover {
  background-color: #f1f5f9;
  border-color: #e2e8f0;
}

.btn-group-details svg, .btn-group-action svg {
  width: 16px;
  height: 16px;
}

.btn-recrawl {
  color: #c2990a;
}

.btn-recrawl:hover {
  background-color: #fef3c7;
  color: #92400e;
}

.btn-reparse {
  color: #0a89c2;
}

.btn-reparse:hover {
  background-color: #e0f2fe;
  color: #0c4a6e;
}

.btn-rerun {
  color: #8b5cf6;
}

.btn-rerun:hover {
  background-color: #f3e8ff;
  color: #6d28d9;
}

.btn-retry-failed {
  color: #ea580c;
}

.btn-retry-failed:hover {
  background-color: #fed7aa;
  color: #ea580c;
}

/* Clean button layout - all elements perfectly aligned */
.group-actions .btn-group-action,
.group-actions .btn-group-details,
.group-actions .processing-indicator {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
}

.url-samples-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.url-samples-container h4 {
  margin-top: 0;
  color: #1e293b;
}

.url-samples-container ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  word-break: break-all;
}

.url-samples-container li {
  padding: 5px 0;
  font-size: 0.9em;
}

.url-samples-container a {
  color: #3b82f6;
  text-decoration: none;
}

.url-samples-container a:hover {
  text-decoration: underline;
}

.data-table .actions {
  display: flex;
  gap: 10px;
}

/* Modern pagination wrapper styles */
.pagination-wrapper {
  margin-top: 25px;
  padding: 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.pagination-info {
  margin-bottom: 16px;
}

.pagination-text {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.pagination-text strong {
  color: #1e293b;
  font-weight: 700;
}

.pagination-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pagination-nav .pagy-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #ffffff;
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.pagination-nav .pagy-nav a,
.pagination-nav .pagy-nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  color: #374151;
  background-color: transparent;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
  min-width: 28px;
  min-height: 28px;
  text-align: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.pagination-nav .pagy-nav a:hover {
  color: #1e293b;
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.pagination-nav .pagy-nav .page.active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
  font-weight: 600;
}

.pagination-nav .pagy-nav .page.active:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

.pagination-nav .pagy-nav .page.gap {
  cursor: default;
  background-color: transparent;
  border: none;
  color: #9ca3af;
  font-weight: 400;
  padding: 4px 4px;
}

.pagination-nav .pagy-nav .page.gap:hover {
  background-color: transparent;
  border-color: transparent;
  color: #9ca3af;
}

/* Navigation arrows styling */
.pagination-nav .pagy-nav a[href*="page="] {
  font-weight: 500;
}

.pagination-nav .pagy-nav a:first-child,
.pagination-nav .pagy-nav a:last-child {
  font-weight: 500;
  background-color: #f8fafc;
  border-color: #d1d5db;
}

.pagination-nav .pagy-nav a:first-child:hover,
.pagination-nav .pagy-nav a:last-child:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

/* Responsive pagination */
@media (max-width: 768px) {
  .pagination-wrapper {
    margin-top: 18px;
    padding: 15px 12px;
  }

  .pagination-nav .pagy-nav {
    padding: 4px;
    gap: 3px;
  }

  .pagination-nav .pagy-nav a,
  .pagination-nav .pagy-nav span {
    padding: 6px 8px;
    font-size: 12px;
    min-width: 28px;
    min-height: 28px;
  }

  .pagination-text {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .pagination-wrapper {
    padding: 12px 8px;
  }

  .pagination-nav .pagy-nav {
    padding: 3px;
    gap: 2px;
  }

  .pagination-nav .pagy-nav a,
  .pagination-nav .pagy-nav span {
    padding: 5px 6px;
    font-size: 11px;
    min-width: 24px;
    min-height: 24px;
  }
}

/* Sourcing Form */
.label-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.label-links {
  display: flex;
  gap: 15px;
}

.form-link {
  font-size: 0.9rem;
  color: #007bff;
  text-decoration: none;
}

.form-link:hover {
  text-decoration: underline;
}

.markdown-page-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Docs view */
.markdown-container {
  max-width: 1800px;
  margin: 2rem auto;
  padding: 2em;
  background-color: #f8f9fa;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.markdown-container h1,
.markdown-container h2,
.markdown-container h3,
.markdown-container h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  line-height: 1.25;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

.markdown-container h1 {
  font-size: 2em;
}
.markdown-container h2 {
  font-size: 1.5em;
}
.markdown-container h3 {
  font-size: 1.25em;
}

.markdown-container p {
  margin-bottom: 1em;
}

.markdown-container ul,
.markdown-container ol {
  padding-left: 2em;
  margin-bottom: 1em;
}

.markdown-container pre {
  background-color: #2d2d2d;
  color: #f8f8f2;
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.markdown-container code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
    monospace;
  background-color: rgba(27, 31, 35, 0.05);
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  border-radius: 3px;
}

.markdown-container pre code {
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: 100%;
  border: none;
}

.markdown-container a {
  color: #007bff;
  text-decoration: none;
}

.markdown-container a:hover {
  text-decoration: underline;
}

/* Clean Navigation */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1f2937;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.brand-link:hover {
  color: #1f2937;
  text-decoration: none;
  background: #f3f4f6;
}

.brand-logo {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.brand-logo svg {
  width: 16px;
  height: 16px;
  color: white;
}

.brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
}

.nav-links {
  display: flex;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  text-decoration: none;
  color: #6b7280;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.nav-link:hover {
  color: #374151;
  text-decoration: none;
  background: #f9fafb;
  border-color: #e5e7eb;
}

.nav-link.active {
  background: #eff6ff;
  border-color: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
}

.nav-link svg {
  width: 16px;
  height: 16px;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-refresh-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-refresh-select {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 140px;
}

.nav-refresh-select:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.nav-refresh-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.nav-refresh-select option {
  background: white;
  color: #374151;
}

.nav-refresh-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #6b7280;
}

.nav-refresh-status.active {
  color: #059669;
}

.nav-sidekiq-btn {
  background: white !important;
  border: 1px solid #d1d5db !important;
  color: #6b7280 !important;
}

.nav-sidekiq-btn:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-email {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}

.btn-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  background: white;
  color: #6b7280;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-logout:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
  text-decoration: none;
}

.btn-logout svg {
  width: 16px;
  height: 16px;
}

/* Markdown Content */
.markdown-container {
  padding: 2rem;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin: 0 40px;
}

.markdown-container h1,
.markdown-container h2,
.markdown-container h3 {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.markdown-container p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

.markdown-container table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.markdown-container th,
.markdown-container td {
  border: 1px solid #e2e8f0;
  padding: 0.75rem;
  text-align: left;
}

.markdown-container th {
  background-color: #f8fafc;
  font-weight: 600;
}

.markdown-container code {
  background-color: #f1f5f9;
  color: #475569;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
}

.markdown-container pre {
  background-color: #f1f5f9;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
}

/* Docs Hub */
.docs-hub-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 2rem;
}

.docs-section {
  margin-top: 2rem;
}

.docs-section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.5rem;
}

.key-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.action-card {
  display: block;
  padding: 1.5rem;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.action-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.action-card p {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 0;
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.doc-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  color: #334155;
  transition: background-color 0.2s;
}

.doc-card:hover {
  background-color: #f8fafc;
}

/* Warning Icons */
.warning-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  cursor: help;
  transition: all 0.2s ease;
  vertical-align: middle;
  border-radius: 50%;
  padding: 2px;
}

.warning-icon:hover {
  background-color: rgba(245, 158, 11, 0.1);
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.estimation-section {
  display: flex;
  align-items: center;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.estimation-icon {
  flex-shrink: 0;
  margin-right: 12px;
}

.estimation-icon svg {
  width: 24px;
  height: 24px;
  color: #6b7280;
}

.estimation-details {
  display: flex;
  flex-direction: column;
}

.estimation-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.estimation-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-percentage-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  background-color: #e0f2fe;
  color: #0c4a6e;
}

.sample-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 12px 16px;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.sample-item h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #475569;
}

.sample-buttons {
  display: flex;
  gap: 8px;
}

.sample-btn {
  background-color: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sample-btn:hover:not(:disabled) {
  background-color: #f1f5f9;
}

.sample-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-content-lg {
  max-width: 90vw;
  width: 1200px;
}

.rid-viewer-frame {
  width: 100%;
  height: 80vh;
  border: 1px solid #e2e8f0;
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}

.tab-link {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: #64748b;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  transition: all 0.2s;
  position: relative;
}

.tab-link:hover {
  color: #475569;
  background-color: #f8fafc;
}

.tab-link.active {
  color: #3b82f6;
  background-color: white;
  border: 1px solid #cbd5e1;
  border-bottom: 3px solid #3b82f6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.sample-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sample-list-item {
  padding: 12px 0;
  border-bottom: 1px solid #e2e8f0;
}

.sample-list-item:last-child {
  border-bottom: none;
}

.sample-main-link {
  font-weight: 500;
  color: #1d4ed8;
  display: block;
  margin-bottom: 4px;
  word-break: break-all;
}

.sample-main-link:hover {
  text-decoration: underline;
}

.sample-sub-item {
  font-size: 0.875rem;
  color: #64748b;
  padding-left: 8px;
}

.sample-sub-item span {
  font-weight: 500;
  margin-right: 4px;
}

.sample-secondary-link {
  color: #475569;
  text-decoration: none;
  word-break: break-all;
}

.sample-secondary-link:hover {
  text-decoration: underline;
}

/* Crawlbase Status in Samples Modal */
.crawlbase-status {
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  font-family: monospace;
  margin-left: 2px;
}

.crawlbase-status.success {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.crawlbase-status.failed {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Live Stats Panel */
.live-stats-panel {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 25px;
  align-self: flex-start;
}

.stats-panel-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 24px;
  border: 1px solid #e1e8ed;
  overflow: hidden;
  position: relative;
}

.stats-panel-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6);
  border-radius: 16px 16px 0 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 8px;
  min-width: 0;
}

.panel-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.panel-title-section {
  flex: 1;
  min-width: 0;
}

.panel-title-section h3 {
  margin: 0 0 6px 0;
  font-size: 1.3em;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.025em;
}

.panel-subtitle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  color: #64748b;
  margin: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.crawlbase-brand {
  font-weight: 600;
  color: #3b82f6;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#live-stats-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75em;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  background-color: #9ca3af;
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.indicator-dot.active {
  background-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  animation: pulse-indicator 2s infinite;
}

@keyframes pulse-indicator {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
  }
}

.stats-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

/* Micro Toggle Switch */
.crawlbase-toggle-micro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.crawlbase-toggle-micro:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.crawlbase-toggle {
  position: relative;
  width: 14px;
  height: 9px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 4.5px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
}

.crawlbase-toggle.enabled {
  background-color: #10b981;
}

.crawlbase-toggle::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 7px;
  height: 7px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.crawlbase-toggle.enabled::before {
  transform: translateX(5px);
}

.stat-card-vertical {
  text-align: center;
  padding: 20px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card-vertical::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.stat-card-vertical:hover::before {
  transform: scaleX(1);
}

.stat-card-vertical:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #3b82f6;
}

.stat-card-vertical .stat-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.stat-card-vertical .stat-label svg {
  width: 1.2em;
  height: 1.2em;
  color: #3b82f6;
}

.stat-card-vertical .stat-value {
  font-size: 2.2em;
  font-weight: 800;
  color: #1e3a8a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.stat-card-vertical:hover .stat-value {
  color: #1d4ed8;
  transform: scale(1.05);
}

.stat-card-vertical .stat-value .critical-issues {
  color: #dc3545;
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.stat-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #cbd5e1;
  position: relative;
}

.placeholder-skeleton {
  width: 120px;
  height: 2.4em;
  background: linear-gradient(
    90deg,
    #f8fafc 0%,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%,
    #f8fafc 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 2s ease-in-out infinite;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 2s ease-in-out infinite;
}

.placeholder-skeleton::after {
  content: '---';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #94a3b8;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.1em;
  animation: pulse-placeholder 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes skeleton-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes pulse-placeholder {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.stats-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.crawler-link {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.crawler-link:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.crawler-link svg {
  width: 16px;
  height: 16px;
}

.action-btn-small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 58, 138, 0.15);
  border-radius: 8px;
  color: #1e3a8a;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(30, 58, 138, 0.08);
  flex: 1;
  position: relative;
}

.action-btn-small::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.action-btn-small:hover::before {
  opacity: 1;
}

.action-btn-small:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(30, 58, 138, 0.25);
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.15);
  transform: translateY(-1px);
}

.action-btn-small svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.action-btn-micro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 58, 138, 0.12);
  border-radius: 50%;
  color: #1e3a8a;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(30, 58, 138, 0.08);
  position: relative;
}

.action-btn-micro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.action-btn-micro:hover::before {
  opacity: 1;
}

.action-btn-micro:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(30, 58, 138, 0.2);
  box-shadow: 0 3px 12px rgba(30, 58, 138, 0.12);
  transform: translateY(-1px) scale(1.05);
}

.action-btn-micro svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 🎨 Additional Modal Enhancements */

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: #64748b;
  transition: all 0.2s ease;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.detailed-stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(30, 58, 138, 0.08);
  overflow: hidden;
}

.detailed-stats-table th {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: none;
  border-bottom: 2px solid #e2e8f0;
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  color: #1e293b;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  position: relative;
}

.detailed-stats-table th:first-child {
  border-radius: 12px 0 0 0;
}

.detailed-stats-table th:last-child {
  border-radius: 0 12px 0 0;
}

.detailed-stats-table th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
}

.detailed-stats-table .th-center {
  text-align: center;
}

.detailed-stats-table td {
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.detailed-stats-table tr {
  transition: all 0.2s ease;
}

.detailed-stats-table tr:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateY(-1px);
}

.detailed-stats-table tr:hover td {
  border-bottom-color: #e2e8f0;
}

.detailed-stats-table tr[style*='background'] {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: white;
}

.detailed-stats-table tr[style*='background'] td {
  color: white !important;
  font-weight: 600;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 0.8rem;
}

.detailed-stats-table tr[style*='background']:hover {
  background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
  transform: none;
}

.detailed-stats-table .loading-cell {
  text-align: center;
  font-style: italic;
  color: #64748b;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.latency-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.badge-green {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #059669;
  border: 1px solid #10b981;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);
}

.badge-yellow {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  color: #d97706;
  border: 1px solid #f59e0b;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1);
}

.badge-red {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #dc2626;
  border: 1px solid #ef4444;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

.no-results-card h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.no-results-card p {
  color: var(--text-light);
  margin-bottom: 1.5rem;
}

.tabs-container {
  padding: 0 25px;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #e2e8f0;
  margin: 0 -25px;
  padding: 0 25px;
}
.tab-item {
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: all 0.2s ease;
}
.tab-item:hover {
  color: #1e293b;
  transform: translateY(-1px);
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 6px 6px 0 0;
}
.tab-item.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.05);
}
.search-results {
  font-size: 14px;
  color: #6b7280;
  padding: 10px 0;
}
.no-results-card {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.no-results-card svg {
  width: 48px;
  height: 48px;
  color: #94a3b8;
  margin-bottom: 16px;
}
.no-results-card h4 {
  font-size: 1.25em;
  margin-bottom: 8px;
}
.no-results-card p {
  color: #64748b;
  margin-bottom: 24px;
}

.search-and-sort-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sort-container .sort-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sort-container label {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}
.sort-container select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

.search-and-sort-container .search-form .search-input {
  min-width: 300px;
}

/* Cycle Index Styles */
.cycle-title-link {
  text-decoration: none;
  color: inherit;
}

.cycle-title-link:hover {
  color: #3b82f6;
}

.cycle-summary-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 8px;
}

.summary-stat {
  font-size: 0.9em;
  color: #475569;
}

.summary-stat.failed {
  color: #ef4444;
}

.summary-stat .percentage {
  font-weight: 600;
  color: #64748b;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.breadcrumb-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transform: translateY(-1px);
}

.breadcrumb-separator {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  font-size: 1.1em;
}

.current-page {
  color: white;
  font-weight: 600;
}

/* Export Button */
.btn-export {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}

.btn-export:hover {
  background-color: #3b82f6;
  color: white;
  border-color: #2563eb;
}

.btn-download {
  background-color: #f0f9ff;
  color: #0369a1;
  border-color: #bae6fd;
}

.btn-download:hover {
  background-color: #0369a1;
  color: white;
  border-color: #0284c7;
}

/* Cycle Actions Layout */
.cycle-actions-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.quick-actions {
  display: flex;
  gap: 6px;
  padding: 4px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

/* Cycle Controls - Better alignment */
.cycle-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  background-color: #f8fafc;
}

/* Quick Action Buttons */
.quick-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background-color: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.quick-action-btn:hover {
  background-color: white;
  color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quick-action-btn.summary-btn:hover {
  color: #059669;
  background-color: #f0fdf4;
}

.quick-action-btn.info-btn:hover {
  color: #3b82f6;
  background-color: #eff6ff;
}

.quick-action-btn svg {
  width: 16px;
  height: 16px;
}

/* Manage Cycle Button */
.manage-cycle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
  position: relative;
  overflow: hidden;
}

.manage-cycle-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.manage-cycle-btn:hover::before {
  left: 100%;
}

.manage-cycle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.manage-cycle-btn .btn-text {
  font-weight: 600;
  letter-spacing: 0.025em;
}

.manage-cycle-btn .btn-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.manage-cycle-btn:hover .btn-arrow {
  transform: translateX(2px);
}

/* Cycle Title Section */
.cycle-title-section {
  flex: 1;
  min-width: 0;
}

.cycle-title-with-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cycle-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cycle-title-section h2 {
  margin: 0;
  font-size: 1.5em;
  color: #1e293b;
  min-width: 0;
}

.custom-name-row {
  margin-left: 0;
}

.custom-name-row .custom-name {
  font-size: 0.9em;
  color: #64748b;
  font-weight: 500;
  font-style: italic;
}

/* Cycle name copy button */
.cycle-name-copy-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.7;
  transition: all 0.2s ease;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-left: 6px;
  position: relative;
}

.cycle-name-copy-btn:hover {
  opacity: 1;
  background-color: #f1f5f9;
  color: #334155;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cycle-name-copy-btn:active {
  transform: translateY(0) scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cycle-name-copy-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.cycle-name-copy-btn:hover svg {
  transform: scale(1.1);
}

/* Enhanced Form Elements */
.form-select-enhanced {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1em;
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-select-enhanced:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select-enhanced:hover {
  border-color: #cbd5e1;
}

.s3-select-wrapper {
  position: relative;
}

.form-control-enhanced {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1em;
  background-color: white;
  transition: all 0.2s ease;
}

.form-control-enhanced:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control-enhanced:hover {
  border-color: #cbd5e1;
}

.form-control-enhanced::placeholder {
  color: #9ca3af;
}

/* View Files Button */
.btn-view-files {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-view-files:hover {
  background-color: #1d4ed8;
  color: white;
  border-color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.2);
}

.btn-view-files svg {
  width: 14px;
  height: 14px;
}

/* Download File Button */
.btn-download-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-download-file:hover {
  background-color: #16a34a;
  color: white;
  border-color: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.btn-download-file svg {
  width: 14px;
  height: 14px;
}

/* Dashboard Container */
.dashboard-container {
  max-width: none;
  margin: 0;
}

.cycles-column {
  min-height: calc(100vh - 120px);
}

/* Enhanced Cycle Controls */
.cycle-controls-enhanced {
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 12px 12px;
}

.control-group-primary {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.control-group-secondary {
  display: flex;
  justify-content: flex-end;
}

.supervisor-control-enhanced {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.supervisor-status-display {
  display: flex;
  align-items: center;
  gap: 12px;
}

.supervisor-status-display .status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.supervisor-status-display .status-indicator.active {
  background-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: pulse-indicator 2s infinite;
}

.supervisor-status-display .status-indicator.inactive {
  background-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.supervisor-status-display .status-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.supervisor-status-display .status-label {
  font-size: 0.8em;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.supervisor-status-display .status-value {
  font-size: 0.9em;
  font-weight: 600;
  color: #1e293b;
}

.btn-requeue-enhanced {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-requeue-enhanced:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.btn-requeue-enhanced svg {
  width: 16px;
  height: 16px;
}

.action-buttons-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-action-enhanced {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-action-enhanced svg {
  width: 18px;
  height: 18px;
}

.btn-action-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-start {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.btn-start:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-terminate {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.btn-terminate:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.btn-export {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.btn-export:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.btn-retry {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.btn-retry:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.btn-delete {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
}

.btn-delete:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.status-badges {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 600;
  border: 1px solid transparent;
}

.status-badge svg {
  width: 16px;
  height: 16px;
}

.status-badge.status-running {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
  border-color: #93c5fd;
  animation: pulse-blue 2s infinite;
}

.status-badge.status-completed {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #059669;
  border-color: #86efac;
}

.status-badge.status-failed {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #dc2626;
  border-color: #fca5a5;
}

.status-badge.status-stopped {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
  border-color: #fcd34d;
}

.status-badge.status-dry-run {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  color: #ca8a04;
  border-color: #facc15;
}

/* Cycle Progress Overview */
.cycle-progress-overview {
  padding: 24px;
}

.progress-overview-header {
  margin-bottom: 20px;
}

.progress-overview-header h3 {
  margin: 0 0 12px 0;
  font-size: 1.2em;
  font-weight: 700;
  color: #1e293b;
}

.progress-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.progress-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95em;
  color: #475569;
}

.progress-metric strong {
  color: #1e293b;
  font-weight: 600;
}

.progress-metric.failed strong {
  color: #ef4444;
}

.progress-metric.stopped strong {
  color: #6b7280;
}

.progress-metric.ready-export strong {
  color: #059669;
}

.progress-percentage {
  font-weight: 600;
  color: #64748b;
}

.progress-bars-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.progress-bar-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-bar-label {
  font-size: 0.9em;
  font-weight: 600;
  color: #475569;
}

.progress-bar-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85em;
}

.progress-bar-info span:first-child {
  font-weight: 700;
  color: #1e293b;
}

.progress-bar-info span:last-child {
  color: #64748b;
}

/* Fixed Header for Show Page */
body.show-page {
  padding-top: 0;
}

.modern-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* New Show Page Layout Styles */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cycle-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 20px;
  flex-wrap: wrap;
}

.cycle-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-secondary {
  background-color: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.btn-secondary:hover {
  background-color: #f1f5f9;
  color: #334155;
}

.supervisor-status-active {
  color: #059669;
  font-weight: 600;
}

.supervisor-status-inactive {
  color: #dc2626;
  font-weight: 600;
}

/* Dashboard Layout for Show Page */
.dashboard-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  max-width: none;
  min-height: calc(100vh - 200px);
}

.cycles-column {
  flex: 1;
  min-width: 0;
}

/* Enhanced Live Stats Panel */
.live-stats-panel {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 30px;
  align-self: flex-start;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.stats-panel-content {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  padding: 24px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.panel-header h3 {
  margin: 0;
  font-size: 1.3em;
  color: #1e293b;
  font-weight: 700;
}

.panel-subtitle {
  font-size: 0.8em;
  color: #64748b;
  font-weight: 500;
  margin-top: 4px;
  display: block;
}

.stat-card-vertical {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.stat-card-vertical:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
}

.stat-card-vertical .stat-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  color: #64748b;
  margin-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card-vertical .stat-label svg {
  width: 18px;
  height: 18px;
  color: #3b82f6;
}

.stat-card-vertical .stat-value {
  font-size: 2.2em;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
  letter-spacing: -0.025em;
}

.action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.action-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  color: white;
  text-decoration: none;
}

.action-btn svg {
  width: 18px;
  height: 18px;
}

.crawler-link {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.crawler-link:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

/* Live Stats Inline */
.live-stats-inline {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-top: 1px solid #e2e8f0;
  padding: 20px;
  margin: 0 -20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card-inline {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.stat-card-inline:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 0.85em;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 1.5em;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

#live-stats-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
}

.stats-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-stats:hover {
  background-color: #f8fafc;
  color: #334155;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-stats svg {
  width: 16px;
  height: 16px;
}

/* Navigation Responsive Design */
@media (max-width: 1024px) {
  .main-nav {
    padding: 10px 20px;
  }

  .brand-name {
    font-size: 1rem;
  }

  .nav-links {
    gap: 4px;
  }

  .nav-link {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .nav-user {
    gap: 8px;
  }

  .user-email {
    display: none;
  }
}

@media (max-width: 768px) {
  .main-nav {
    padding: 8px 16px;
  }

  .brand-link {
    gap: 8px;
    padding: 4px 8px;
  }

  .brand-logo {
    width: 26px;
    height: 26px;
    padding: 4px;
  }

  .brand-logo svg {
    width: 14px;
    height: 14px;
  }

  .brand-name {
    font-size: 1rem;
  }

  .nav-links {
    gap: 2px;
  }

  .nav-link {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .nav-link svg {
    width: 14px;
    height: 14px;
  }

  .nav-controls {
    gap: 6px;
  }

  .nav-refresh-controls {
    gap: 4px;
  }

  .nav-refresh-select {
    font-size: 0.75rem;
    padding: 4px 6px;
    min-width: 120px;
  }

  .nav-refresh-status {
    font-size: 0.7rem;
  }

  .btn-logout {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .btn-logout svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .main-nav {
    padding: 6px 12px;
  }

  .nav-brand {
    flex: 1;
  }

  .brand-name {
    display: none;
  }

  .nav-links {
    gap: 4px;
  }

  .nav-link {
    padding: 4px 6px;
    font-size: 0.75rem;
  }

  .nav-controls {
    gap: 4px;
  }

  .nav-refresh-select {
    font-size: 0.7rem;
    padding: 2px 4px;
    min-width: 100px;
  }

  .nav-refresh-status {
    font-size: 0.65rem;
  }

  .nav-sidekiq-btn {
    padding: 4px 6px !important;
    font-size: 0.7rem !important;
  }

  .nav-sidekiq-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  .btn-logout {
    padding: 4px 6px;
    font-size: 0.75rem;
  }

  .btn-logout svg {
    width: 12px;
    height: 12px;
  }

  .nav-user {
    gap: 4px;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .cycle-status-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .cycle-actions {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stats-actions {
    justify-content: center;
  }

  .hero-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .groups-container {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .group-card {
    padding: 16px;
  }

  .cycle-actions {
    justify-content: center;
    gap: 6px;
  }

  .btn-action-enhanced {
    padding: 8px 12px;
    font-size: 0.8em;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-card-inline {
    padding: 12px;
  }

  .stat-icon {
    width: 32px;
    height: 32px;
  }

  .stat-icon svg {
    width: 16px;
    height: 16px;
  }

  .stat-value {
    font-size: 1.2em;
  }

  .stats-actions {
    flex-direction: column;
  }

  .btn-stats {
    justify-content: center;
  }

  .hero-text h1.hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .modal-content {
    width: 95%;
    margin: 20px;
    max-height: calc(100vh - 40px);
  }

  .flash-container {
    left: 12px;
    right: 12px;
    top: 12px;
    z-index: 99999; /* Highest priority - must be above everything */
    max-width: none;
  }

  .flash {
    padding: 8px 12px;
    gap: 6px;
  }

  /* Live Stats Panel Responsive */
  .dashboard-container {
    flex-direction: column;
    gap: 20px;
  }

  .live-stats-panel {
    width: 100%;
    position: static;
    order: -1;
  }

  .stats-panel-content {
    padding: 20px;
  }

  .panel-header {
    margin-bottom: 20px;
  }

  .panel-title-section h3 {
    font-size: 1.2em;
  }

  .stats-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }

  .stat-card-vertical {
    padding: 16px 12px;
  }

  .stat-card-vertical .stat-value {
    font-size: 1.8em;
  }

  .stat-card-vertical .stat-label {
    font-size: 0.8em;
  }

  .action-btn {
    font-size: 0.85em;
    padding: 10px 14px;
  }

  .action-btn-small {
    padding: 6px 10px;
    font-size: 0.7rem;
    gap: 4px;
  }

  .action-btn-small svg {
    width: 12px;
    height: 12px;
  }

  .action-btn-micro {
    width: 28px;
    height: 28px;
  }

  .action-btn-micro svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 20px 0;
  }

  .hero-text h1.hero-title {
    font-size: 1.5rem;
    gap: 8px;
  }

  .hero-icon {
    width: 32px;
    height: 32px;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .btn-hero-primary {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .btn-hero-secondary {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .cycle-card {
    margin-bottom: 16px;
  }

  .cycle-header {
    padding: 12px 16px;
  }

  .cycle-meta {
    flex-direction: column;
    gap: 6px;
  }

  .meta-item {
    padding: 3px 8px;
    font-size: 0.8em;
  }

  .cycle-actions {
    flex-direction: column;
    gap: 8px;
  }

  .btn-action-enhanced {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }

  .live-stats-inline {
    padding: 16px;
    margin: 0 -16px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .stat-card-inline {
    padding: 10px;
  }

  .stat-icon {
    width: 28px;
    height: 28px;
  }

  .stat-icon svg {
    width: 14px;
    height: 14px;
  }

  .stat-value {
    font-size: 1.1em;
  }

  .stats-actions {
    flex-direction: column;
    gap: 8px;
  }

  .btn-stats {
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    font-size: 0.8em;
  }

  .action-btn-small {
    padding: 6px 8px;
    font-size: 0.65rem;
    gap: 3px;
  }

  .action-btn-small svg {
    width: 10px;
    height: 10px;
  }

  .action-btn-micro {
    width: 26px;
    height: 26px;
  }

  .action-btn-micro svg {
    width: 12px;
    height: 12px;
  }

  .progress-bars-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .progress-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cycle-progress-overview {
    padding: 16px;
  }
}

/* 🔧 Enhanced Modal Structure */

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-title.fs-5 {
  font-size: 1.1rem;
}

.text-muted {
  color: #64748b;
  font-size: 0.9rem;
}

.text-muted.small {
  font-size: 0.85rem;
}

.mb-0 {
  margin-bottom: 0;
}

/* 🎨 Enhanced Table Styling for Modals */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.data-table th {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.05) 0%,
    rgba(168, 85, 247, 0.03) 100%
  );
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.data-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.02);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* 🔗 Enhanced Link Styling */
.sample-main-link,
.sample-secondary-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sample-main-link:hover,
.sample-secondary-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Improved group name display */
.group-name-copyable {
  cursor: pointer;
  transition: color 0.2s ease;
}

.group-name-copyable:hover {
  color: #3b82f6;
}

/* Better spacing for failed stats */
.failed-stats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5em;
}

/* Improved stat value button */
.stat-value-btn p {
  margin: 0;
  font-size: 1.2em;
  font-weight: 500;
}

/* Modern Headers */
.modern-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #1e40af 100%);
  color: white;
  padding: 0;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(30, 58, 138, 0.3);
}

.modern-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: headerShimmer 8s ease-in-out infinite;
}

.modern-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: wave 4s ease-in-out infinite;
}

@keyframes headerShimmer {
  0%,
  100% {
    background-position: -200% -200%;
  }
  50% {
    background-position: 200% 200%;
  }
}

@keyframes wave {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.hero-section {
  padding: 20px 30px;
  position: relative;
  z-index: 2;
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-text h1.hero-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.custom-name-slash {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  margin: 0 4px;
  font-size: 0.7em;
}

.custom-name-inline {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-style: italic;
  font-size: 0.7em;
}

.hero-icon {
  width: 24px;
  height: 24px;
  color: #fbbf24;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 8px;
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.hero-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: iconShimmer 3s ease-in-out infinite;
}

.hero-icon svg {
  width: 18px;
  height: 18px;
  color: #1e40af;
  z-index: 1;
  position: relative;
}

@keyframes iconShimmer {
  0%,
  100% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
}

.hero-subtitle {
  font-size: 0.85rem;
  opacity: 0.95;
  margin: 0;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.025em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-secondary-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-hero-primary {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: white;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.btn-hero-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-hero-primary:hover::before {
  left: 100%;
}

.btn-hero-primary:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  color: white;
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-hero-primary svg {
  width: 20px;
  height: 20px;
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-hero-secondary svg {
  width: 16px;
  height: 16px;
}

.refresh-controls-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  position: relative;
}

.refresh-controls-modern label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.refresh-label-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.refresh-select-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-select {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: white;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.refresh-select:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.refresh-select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.refresh-select option {
  background: #1e293b;
  color: white;
  padding: 8px;
}

.refresh-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  min-width: 100px;
}

.refresh-status.active {
  color: #10b981;
  animation: pulse-gentle 2s infinite;
}

.refresh-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #6b7280;
  transition: all 0.3s ease;
}

.refresh-indicator.active {
  background-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  animation: pulse-indicator 2s infinite;
}

.refresh-countdown {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 25px;
  text-align: right;
}

.refresh-countdown.warning {
  color: #fbbf24;
  animation: countdown-warning 0.5s ease-in-out;
}

@keyframes pulse-gentle {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes countdown-warning {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* S3 Configuration Cards */
.s3-configs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  margin-top: 0;
}

.s3-config-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.s3-config-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #c7d2fe;
}

.config-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.config-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.config-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.config-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.config-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.config-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
  min-width: 80px;
}

.detail-label svg {
  width: 16px;
  height: 16px;
}

.detail-value {
  font-size: 0.9rem;
  color: #1e293b;
  font-weight: 500;
}

.endpoint-code {
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.8rem;
  color: #475569;
}

.endpoint-default {
  color: #64748b;
  font-style: italic;
}

.config-actions {
  display: flex;
  gap: 12px;
  border-top: 1px solid #f1f5f9;
  padding-top: 20px;
}

.config-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.config-action-btn svg {
  width: 16px;
  height: 16px;
}

.edit-btn {
  background: #f0f9ff;
  color: #0369a1;
  border-color: #bae6fd;
}

.edit-btn:hover {
  background: #e0f2fe;
  color: #0284c7;
  text-decoration: none;
  transform: translateY(-1px);
}

.delete-btn {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.delete-btn:hover {
  background: #fee2e2;
  color: #b91c1c;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Modern Forms */
.modern-form-container {
  max-width: 800px;
  margin: 0 auto;
}

.modern-form {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.form-section {
  padding: 32px;
  border-bottom: 1px solid #f1f5f9;
}

.form-section:last-child {
  border-bottom: none;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 24px 0;
}

.section-title svg {
  width: 20px;
  height: 20px;
  color: #667eea;
}

.form-group {
  margin-bottom: 24px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.form-label svg {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.form-control-enhanced {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  color: #1f2937;
  background: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-control-enhanced:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control-enhanced::placeholder {
  color: #9ca3af;
}

.form-help {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 6px;
  margin-bottom: 0;
}

.form-help-enhanced {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 6px;
  border-left: 3px solid #667eea;
}

.form-help-enhanced svg {
  width: 16px;
  height: 16px;
  color: #667eea;
  margin-top: 2px;
  flex-shrink: 0;
}

.form-help-enhanced div {
  flex: 1;
}

.form-help-enhanced p {
  margin: 0 0 4px 0;
  font-size: 0.85rem;
  color: #4b5563;
}

.form-help-enhanced p:last-child {
  margin-bottom: 0;
}

.error-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.error-icon {
  width: 20px;
  height: 20px;
  color: #dc2626;
  flex-shrink: 0;
}

.error-icon svg {
  width: 100%;
  height: 100%;
}

.error-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #dc2626;
  margin: 0 0 8px 0;
}

.error-content ul {
  margin: 0;
  padding-left: 20px;
  color: #b91c1c;
}

.error-content li {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.form-actions-modern {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 32px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.btn-secondary-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  color: #374151;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-secondary-modern:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #1f2937;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-secondary-modern svg {
  width: 16px;
  height: 16px;
}

.btn-primary-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary-modern:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary-modern svg {
  width: 16px;
  height: 16px;
}

/* Modern Login Page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-container {
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 440px;
  padding: 0;
  overflow: hidden;
}

.login-header {
  text-align: center;
  padding: 40px 40px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid #e2e8f0;
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.logo-icon {
  width: 48px;
  height: 48px;
  color: #3b82f6;
}

.login-header h1 {
  margin: 0;
  font-size: 1.8em;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.025em;
}

.login-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 1em;
  font-weight: 500;
}

.login-form-container {
  padding: 40px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 0.95em;
  margin-bottom: 0;
}

.label-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1em;
  transition: all 0.2s ease;
  background-color: #f9fafb;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  background-color: white;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:hover {
  border-color: #d1d5db;
  background-color: white;
}

.form-input::placeholder {
  color: #9ca3af;
}

.form-group-checkbox {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-custom {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.checkbox-input:checked + .checkbox-custom::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label {
  color: #374151;
  font-size: 0.95em;
  font-weight: 500;
}

.form-actions {
  margin-top: 8px;
}

.btn-login {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  position: relative;
  overflow: hidden;
}

.btn-login::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-login:hover::before {
  left: 100%;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.btn-login:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.login-footer {
  text-align: center;
  padding: 20px 40px;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.login-footer p {
  margin: 0;
  color: #9ca3af;
  font-size: 0.85em;
}

/* Responsive design for login */
@media (max-width: 480px) {
  .login-page {
    padding: 10px;
  }

  .login-container {
    border-radius: 16px;
  }

  .login-header {
    padding: 30px 30px 20px;
  }

  .login-form-container {
    padding: 30px;
  }

  .login-header h1 {
    font-size: 1.5em;
  }

  .form-input {
    padding: 12px 14px;
  }

  .btn-login {
    padding: 14px;
    font-size: 1em;
  }
}

/* Latency badge styles for crawler stats */
.latency-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.95em;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #334155;
  min-width: 48px;
  justify-content: center;
}
.badge-green {
  background: #dcfce7;
  color: #15803d;
}
.badge-yellow {
  background: #fef9c3;
  color: #b45309;
}
.badge-red {
  background: #fee2e2;
  color: #b91c1c;
}

/* Custom Confirmation Modal */
.custom-confirm-content {
  max-width: 420px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  border: none;
  background: white;
}

.confirm-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 20px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #e2e8f0;
}

.confirm-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.confirm-icon svg {
  width: 24px;
  height: 24px;
  color: white;
  stroke-width: 2;
}

.confirm-text {
  flex: 1;
  min-width: 0;
}

.confirm-text h3 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.confirm-text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #64748b;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  padding: 20px 24px 24px 24px;
  background: white;
}

.btn-confirm-cancel,
.btn-confirm-proceed {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-confirm-cancel {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.btn-confirm-cancel:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-confirm-proceed {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-confirm-proceed:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.btn-confirm-cancel svg,
.btn-confirm-proceed svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Animation for modal appearance */
#custom-confirm-modal.show .custom-confirm-content {
  animation: confirmModalSlide 0.3s ease-out;
}

#custom-confirm-modal.hiding .custom-confirm-content {
  animation: confirmModalSlideOut 0.3s ease-in forwards;
}

@keyframes confirmModalSlide {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes confirmModalSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

/* Responsive design for mobile */
@media (max-width: 480px) {
  .custom-confirm-content {
    max-width: 90vw;
    margin: 20px;
  }

  .confirm-header {
    padding: 20px 20px 16px 20px;
  }

  .confirm-actions {
    padding: 16px 20px 20px 20px;
    flex-direction: column;
  }

  .btn-confirm-cancel,
  .btn-confirm-proceed {
    flex: none;
  }
}

/* Recrawl/Reparse Forms */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

.form-control:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control::placeholder {
  color: #9ca3af;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
}

.btn-warning {
  background-color: #f59e0b;
  color: white;
}

.btn-warning:hover {
  background-color: #d97706;
}

.btn-info {
  background-color: #06b6d4;
  color: white;
}

.btn-info:hover {
  background-color: #0891b2;
}

.btn-primary {
  background-color: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background-color: #2563eb;
}

/* Filesystem management modal styles */
.filesystem-actions {
  max-width: 600px;
}

.action-section {
  margin-bottom: 2rem;
}

.action-section h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}

.action-description {
  margin: 0 0 1rem 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.filesystem-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.filesystem-action-btn:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.filesystem-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filesystem-action-btn:disabled:hover {
  border-color: #e5e7eb;
  background: white;
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-icon.audit {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: white;
}

.action-icon.cleanup {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.action-icon svg {
  width: 20px;
  height: 20px;
}

.action-content {
  flex: 1;
}

.action-title {
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.25rem 0;
}

.action-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.running-jobs-section {
  border-top: 1px solid #e5e7eb;
  padding-top: 1.5rem;
}

.running-jobs-section h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}

.running-job-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: #f8fafc;
}

.running-job-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.running-job-icon.audit {
  background: #3b82f6;
  color: white;
}

.running-job-icon.cleanup {
  background: #f59e0b;
  color: white;
}

.running-job-icon svg {
  width: 16px;
  height: 16px;
}

.running-job-content {
  flex: 1;
}

.running-job-title {
  font-weight: 500;
  color: #374151;
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
}

.running-job-status {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0;
}

.resume-job-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.resume-job-btn:hover {
  background: #2563eb;
}

.no-actions-message {
  text-align: center;
  color: #6b7280;
  font-style: italic;
  margin: 1rem 0;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* Filesystem audit modal styles */
.filesystem-audit-content {
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
}

.audit-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.audit-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.audit-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.audit-stat-valid .audit-stat-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.audit-stat-orphaned .audit-stat-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.audit-stat-missing .audit-stat-icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.audit-stat-errors .audit-stat-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

.audit-stat-icon svg {
  width: 20px;
  height: 20px;
}

.audit-stat-content {
  display: flex;
  flex-direction: column;
}

.audit-stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.audit-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.audit-details {
  margin-bottom: 1.5rem;
}

.audit-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.audit-section h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.audit-section h4 svg {
  width: 18px;
  height: 18px;
  color: #6b7280;
}

.audit-section-description {
  margin: 0 0 1rem 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.audit-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.audit-file-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: white;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
}

.audit-file-path {
  font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem;
  color: #1f2937;
  font-weight: 500;
  word-break: break-all;
}

.audit-file-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.audit-file-rid,
.audit-file-type,
.audit-file-group,
.audit-file-size {
  background: #f3f4f6;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
}

.audit-action-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  color: #1e40af;
  font-size: 0.875rem;
}

.audit-action-info svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Group History Indicators */
.group-history-indicators {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.history-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 600;
  font-family: monospace;
}

.history-indicator svg {
  width: 10px;
  height: 10px;
}

.recrawl-indicator {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.reparse-indicator {
  background-color: #e0f2fe;
  color: #0c4a6e;
  border: 1px solid #bae6fd;
}

/* Responsive group actions - when buttons start overlapping */
@media (max-width: 1000px) {
  .group-actions-right {
    gap: 6px;
  }

  .btn-group-details,
  .btn-group-action {
    padding: 0 10px;
    font-size: 0.72rem;
  }
}

@media (max-width: 900px) {
  .group-actions {
    flex-direction: column;
    gap: 12px;
    height: auto;
    padding: 12px 0;
  }

  .group-actions-left,
  .group-actions-right {
    justify-content: center;
    width: 100%;
  }

  .group-actions-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn-group-details,
  .btn-group-action {
    min-width: 80px;
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .group-actions {
    padding: 10px 0;
  }

  .group-actions-right {
    gap: 6px;
  }

  .btn-group-details,
  .btn-group-action {
    padding: 0 8px;
    font-size: 0.7rem;
    min-width: 70px;
  }

  .btn-group-details svg,
  .btn-group-action svg {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .group-actions {
    gap: 8px;
  }

  .group-actions-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .btn-group-details,
  .btn-group-action {
    width: 100%;
    min-width: unset;
    justify-content: center;
  }
}

/* Modern Status Tabs */
.status-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: white;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.status-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  color: #6b7280;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.status-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.status-tab:hover::before {
  opacity: 1;
}

.status-tab:hover {
  color: #374151;
  background: #f9fafb;
  border-color: #e5e7eb;
  transform: translateY(-1px);
}

.status-tab.active {
  color: white;
  background: #3b82f6;
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.status-tab.active:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.status-tab .tab-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-tab .tab-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.status-tab .tab-label {
  font-weight: 500;
}

.status-tab .tab-count {
  background: rgba(0, 0, 0, 0.1);
  color: #6b7280;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.status-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Status-specific colors */
.status-tab-running:hover {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
}

.status-tab-running.active {
  background: #fbbf24;
  border-color: #fbbf24;
  color: white;
}

.status-tab-running.active:hover {
  background: #f59e0b;
  border-color: #f59e0b;
}

.status-tab-completed:hover {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}

.status-tab-completed.active {
  background: #22c55e;
  border-color: #22c55e;
  color: white;
}

.status-tab-completed.active:hover {
  background: #16a34a;
  border-color: #16a34a;
}

.status-tab-failed:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
}

.status-tab-failed.active {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

.status-tab-failed.active:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.status-tab-stopped:hover {
  background: #f3f4f6;
  border-color: #6b7280;
  color: #374151;
}

.status-tab-stopped.active {
  background: #6b7280;
  border-color: #6b7280;
  color: white;
}

.status-tab-stopped.active:hover {
  background: #4b5563;
  border-color: #4b5563;
}

/* Responsive design for status tabs */
@media (max-width: 768px) {
  .status-tabs {
    gap: 4px;
    padding: 4px;
  }

  .status-tab {
    padding: 8px 12px;
    font-size: 13px;
  }

  .status-tab .tab-icon {
    width: 16px;
    height: 16px;
  }

  .status-tab .tab-icon svg {
    width: 14px;
    height: 14px;
  }

  .status-tab .tab-count {
    padding: 1px 6px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .status-tabs {
    justify-content: center;
  }

  .status-tab {
    padding: 6px 10px;
    font-size: 12px;
  }

  .status-tab .tab-label {
    display: none;
  }

  .status-tab .tab-count {
    margin-left: 0;
  }
}

/* Crawler Management Actions */
.crawler-management-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.crawler-management-actions .action-btn {
  margin: 0;
}




/* Specific styling for retrospective validation modal secondary buttons */
#retrospective-validation-modal .form-actions .btn-secondary {
  background-color: #6b7280;
  color: white;
  border: 1px solid #6b7280;
}

#retrospective-validation-modal .form-actions .btn-secondary:hover {
  background-color: #4b5563;
  border-color: #4b5563;
}

/* Enhanced retrospective validation modal styles */
#retrospective-validation-modal .modal-content {
  max-width: 700px;
  max-height: 85vh;
}

#retrospective-validation-modal .modal-body {
  padding: 20px 0;
  max-height: calc(85vh - 200px);
  overflow-y: auto;
}

#retrospective-validation-modal .validation-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#retrospective-validation-modal .validation-warning svg {
  width: 20px;
  height: 20px;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 2px;
}

#retrospective-validation-modal .validation-warning h4 {
  margin: 0 0 8px 0;
  color: #92400e;
  font-size: 16px;
  font-weight: 600;
}

#retrospective-validation-modal .validation-warning p {
  margin: 0;
  color: #92400e;
  font-size: 14px;
  line-height: 1.5;
}

#retrospective-validation-modal .validation-details {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

#retrospective-validation-modal .validation-details h4 {
  margin: 0 0 12px 0;
  color: #495057;
  font-size: 16px;
  font-weight: 600;
}

#retrospective-validation-modal .validation-details ul {
  margin: 0;
  padding-left: 20px;
  color: #6c757d;
  font-size: 14px;
  line-height: 1.6;
}

#retrospective-validation-modal .validation-details li {
  margin-bottom: 6px;
}

#retrospective-validation-modal .validation-details li:last-child {
  margin-bottom: 0;
}

#retrospective-validation-modal .validation-note {
  margin-top: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e0f2fe 0%, #e1f5fe 100%);
  border: 1px solid #0288d1;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #01579b;
}

#retrospective-validation-modal .form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

#retrospective-validation-modal .form-actions .btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

#retrospective-validation-modal .form-actions .btn-secondary {
  background-color: #f8f9fa;
  color: #6c757d;
  border: 1px solid #dee2e6;
}

#retrospective-validation-modal .form-actions .btn-secondary:hover {
  background-color: #e9ecef;
  color: #495057;
  border-color: #adb5bd;
}

#retrospective-validation-modal .form-actions .btn-primary {
  background-color: #0d6efd;
  color: white;
  border: 1px solid #0d6efd;
}

#retrospective-validation-modal .form-actions .btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
}

#retrospective-validation-modal .modal-footer {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.9) 100%);
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  margin: 0 -32px -32px -32px;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#retrospective-validation-modal .modal-footer .form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}



/* Group History Indicators */

/* Two-column layout for progress and validation */
.progress-and-validation-container {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 24px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.progress-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.validation-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  height: fit-content;
}

/* Compact validation issues styling */
.validation-issues-compact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.validation-header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.validation-header-compact h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
}

.validation-header-compact svg {
  width: 20px;
  height: 20px;
  color: #f59e0b;
}

.btn-validation-view-compact {
  background: #3b82f6;
  color: white;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-validation-view-compact:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.validation-stats-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  grid-template-areas:
    "total critical"
    "warning warning";
}

.validation-stat-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  min-width: 70px;
  flex: 1;
}

.validation-stat-card.total {
  background: #f0f9ff;
  border-color: #0ea5e9;
  grid-area: total;
}

.validation-stat-card.critical {
  background: #fef2f2;
  border-color: #ef4444;
  grid-area: critical;
}

.validation-stat-card.warning {
  background: #fffbeb;
  grid-area: warning;
  border-color: #f59e0b;
}

.validation-stat-card .stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}

.validation-stat-card.total .stat-number {
  color: #0ea5e9;
}

.validation-stat-card.critical .stat-number {
  color: #ef4444;
}

.validation-stat-card.warning .stat-number {
  color: #f59e0b;
}

.validation-stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.validation-alert-compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #991b1b;
  line-height: 1.4;
}

.validation-alert-compact svg {
  width: 16px;
  height: 16px;
  color: #dc2626;
  flex-shrink: 0;
  margin-top: 1px;
}

.validation-summary-compact {
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.4;
}

/* Validation Success Section */
.validation-success-compact {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.validation-success-compact .validation-header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.validation-success-compact .validation-header-compact h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #16a34a;
}

.validation-success-compact .validation-header-compact svg {
  width: 20px;
  height: 20px;
  color: #16a34a;
}

.validation-success-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.validation-success-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #f0fdf4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.validation-success-icon svg {
  width: 24px;
  height: 24px;
  color: #16a34a;
}

.validation-success-text {
  flex: 1;
}

.validation-success-text h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #065f46;
}

.validation-success-text p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

.validation-success-actions {
  display: flex;
  justify-content: center;
}

.btn-validation-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-validation-check:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #1f2937;
}

.btn-validation-check svg {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.btn-validation-check:hover svg {
  color: #374151;
}

/* Responsive design */
@media (max-width: 1024px) {
  .progress-and-validation-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .validation-box {
    order: -1; /* Show validation issues first on mobile */
  }
}

@media (max-width: 768px) {
  .progress-box,
  .validation-box {
    padding: 16px;
  }

  .validation-stats-compact {
    grid-template-columns: 1fr;
    grid-template-areas:
      "total"
      "critical"
      "warning";
    gap: 8px;
  }

  .validation-stat-card {
    min-width: auto;
  }

  .validation-header-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Reprocess Validation Modal Styling */
#reprocess-validation-modal .modal-header {
  border-bottom: 1px solid #e5e7eb;
  padding: 24px 24px 16px;
}

#reprocess-validation-modal .modal-header h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  padding-right: 8px; /* Small padding to avoid overlap */
}

#reprocess-validation-modal .modal-icon {
  width: 20px;
  height: 20px;
  color: #3b82f6;
  flex-shrink: 0;
}

#reprocess-validation-modal .modal-subtitle {
  margin: 8px 0 0 0;
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: normal;
}

#reprocess-validation-modal .modal-body {
  padding: 20px 24px;
}

#reprocess-validation-modal .reprocess-info {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

#reprocess-validation-modal .reprocess-info h4 {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

#reprocess-validation-modal .reprocess-info ul {
  margin: 0;
  padding-left: 16px;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

#reprocess-validation-modal .reprocess-info li {
  margin-bottom: 4px;
}

#reprocess-validation-modal .reprocess-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef3cd;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: #92400e;
}

#reprocess-validation-modal .reprocess-warning svg {
  width: 16px;
  height: 16px;
  color: #f59e0b;
  flex-shrink: 0;
}

#reprocess-validation-modal .form-group {
  margin-bottom: 20px;
}

#reprocess-validation-modal .form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

#reprocess-validation-modal .required {
  color: #ef4444;
}

#reprocess-validation-modal .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#reprocess-validation-modal .form-control:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#reprocess-validation-modal .form-help {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b7280;
}

#reprocess-validation-modal .radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#reprocess-validation-modal .radio-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s;
}

#reprocess-validation-modal .radio-label:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

#reprocess-validation-modal .radio-custom {
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

#reprocess-validation-modal input[type="radio"]:checked + .radio-custom {
  border-color: #3b82f6;
}

#reprocess-validation-modal input[type="radio"]:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
}

#reprocess-validation-modal .radio-content strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 2px;
}

#reprocess-validation-modal .radio-content small {
  font-size: 0.75rem;
  color: #6b7280;
}

#reprocess-validation-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid #e5e7eb;
}

#reprocess-validation-modal .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  border: 1px solid transparent;
}

#reprocess-validation-modal .btn-secondary {
  background: white;
  color: #374151;
  border-color: #d1d5db;
}

#reprocess-validation-modal .btn-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

#reprocess-validation-modal .btn-primary {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

#reprocess-validation-modal .btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

#reprocess-validation-modal .btn svg {
  width: 16px;
  height: 16px;
}

#reprocess-validation-modal input[type="radio"] {
  display: none;
}

/* Enhanced Cancel Button for Reprocess Validation Modal */
#reprocess-validation-modal .modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  color: #64748b;
  transition: all 0.2s ease;
  z-index: 30;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  line-height: 1;
  text-align: center;
  padding: 0;
  overflow: hidden;
}

#reprocess-validation-modal .modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.95);
  border-color: rgba(239, 68, 68, 0.6);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

#reprocess-validation-modal .modal-close-btn:active {
  transform: scale(0.95);
}

#reprocess-validation-modal .modal-close-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#reprocess-validation-modal .modal-close-btn:hover::before {
  opacity: 1;
}

/* Ensure proper header positioning with enhanced button */
#reprocess-validation-modal .modal-header {
  border-bottom: 1px solid #e5e7eb;
  padding: 24px 50px 16px 24px; /* Extra right padding for button */
  position: relative;
}

#reprocess-validation-modal .modal-header h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  padding-right: 8px; /* Small padding to avoid overlap */
}

/* 404 Error Page Styles */
.error-page {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin: 0 -20px;
}

.error-container {
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.error-content {
  background: white;
  border-radius: 20px;
  padding: 4rem 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  border: 1px solid #e2e8f0;
}

.error-icon {
  margin-bottom: 2rem;
}

.error-icon svg {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  display: block;
  animation: spider-sway 3s ease-in-out infinite;
}

@keyframes spider-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.error-text {
  margin-bottom: 2rem;
}

.error-code {
  font-size: 6rem;
  font-weight: 800;
  color: #475569;
  margin: 0 0 1rem;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.error-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

.error-message {
  font-size: 1.2rem;
  color: #64748b;
  margin: 0 0 2rem;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.error-humor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.humor-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.humor-item:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
}

.humor-icon {
  font-size: 1.5rem;
  animation: bounce 2s ease-in-out infinite;
}

.humor-item:nth-child(2) .humor-icon {
  animation-delay: 0.5s;
}

.humor-item:nth-child(3) .humor-icon {
  animation-delay: 1s;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.humor-text {
  font-size: 1rem;
  color: #475569;
  font-weight: 500;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.btn-error-home,
.btn-error-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-error-home {
  background: #3b82f6;
  color: white;
}

.btn-error-home:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.btn-error-back {
  background: white;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.btn-error-back:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

.btn-error-home svg,
.btn-error-back svg {
  width: 20px;
  height: 20px;
}

.error-footer {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

.error-footer-text {
  color: #64748b;
  margin: 0 0 2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.error-stats {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin-top: 2rem;
}

.error-stat {
  text-align: center;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  flex: 1;
  transition: all 0.3s ease;
}

.error-stat:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #3b82f6;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .error-page {
    padding: 1rem;
  }

  .error-content {
    padding: 2rem 1.5rem;
  }

  .error-code {
    font-size: 4rem;
  }

  .error-title {
    font-size: 2rem;
  }

  .error-message {
    font-size: 1rem;
  }

  .error-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn-error-home,
  .btn-error-back {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .error-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .humor-item {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .error-content {
    padding: 1.5rem 1rem;
  }

  .error-code {
    font-size: 3rem;
  }

  .error-title {
    font-size: 1.5rem;
  }

  .error-icon svg {
    width: 80px;
    height: 80px;
  }

  .btn-error-home,
  .btn-error-back {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* Enhanced Delete Group Modal Styles */
.delete-group-form {
  width: 100%;
}

.form-group-enhanced {
  margin-bottom: 24px;
}

.form-label-enhanced {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #374151;
  font-size: 14px;
}

.label-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.required-indicator {
  color: #dc2626;
  font-weight: 700;
}

.delete-reason-input {
  resize: vertical;
  min-height: 80px;
}

.form-control-enhanced:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  background-color: #fefefe;
}

.form-control-enhanced::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.input-help-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  background-color: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #92400e;
}

.help-icon {
  width: 16px;
  height: 16px;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 1px;
}

.character-counter {
  text-align: right;
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  font-family: monospace;
}

.character-counter.warning {
  color: #f59e0b;
  font-weight: 600;
}

.character-counter.danger {
  color: #dc2626;
  font-weight: 700;
}

.form-actions-enhanced {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* Delete modal specific button styles */
.delete-group-form .btn-action-enhanced {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.delete-group-form .btn-action-enhanced svg {
  width: 16px;
  height: 16px;
}

.delete-group-form .btn-action-enhanced.btn-secondary {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.delete-group-form .btn-action-enhanced.btn-secondary:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.delete-group-form .btn-action-enhanced.btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
  position: relative;
  overflow: hidden;
}

.delete-group-form .btn-action-enhanced.btn-danger::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.delete-group-form .btn-action-enhanced.btn-danger:hover::before {
  left: 100%;
}

.delete-group-form .btn-action-enhanced.btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
  transform: translateY(-2px);
}

.delete-group-form .btn-action-enhanced.btn-danger:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.delete-group-form .btn-action-enhanced:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.delete-confirm-btn .btn-text {
  font-weight: 700;
}

/* Loading state for delete button */
.delete-group-form .btn-action-enhanced.loading {
  position: relative;
  color: transparent;
}

.delete-group-form .btn-action-enhanced.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: button-spin 1s linear infinite;
  color: white;
}

@keyframes button-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Enhanced group delete button in the card */
.btn-delete-group {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-delete-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.btn-delete-group:hover::before {
  left: 100%;
}

.btn-delete-group:hover {
  background-color: #b91c1c !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

/* Spotlight Search Styles */
.spotlight-search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50000; /* Below notifications but above other content */
  display: none;
  animation: spotlight-fade-in 0.15s ease-out forwards;
}

.spotlight-search-modal.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.spotlight-search-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.spotlight-search-container {
  position: relative;
  width: 90%;
  max-width: 600px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: scale(0.96);
  animation: spotlight-scale-in 0.15s ease-out 0.05s forwards;
}

.spotlight-search-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.spotlight-search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  background: #f9fafb;
  border-radius: 12px;
  padding: 0 16px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.spotlight-search-input-container:focus-within {
  border-color: #4f46e5;
  background: white;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.spotlight-search-icon {
  width: 20px;
  height: 20px;
  color: #6b7280;
  margin-right: 12px;
  flex-shrink: 0;
}

.spotlight-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 14px 0;
  color: #1f2937;
  font-weight: 500;
}

.spotlight-search-input::placeholder {
  color: #9ca3af;
}

.spotlight-search-shortcut {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
  opacity: 0.6;
}

.spotlight-search-shortcut kbd {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.spotlight-search-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
}

.spotlight-search-content::-webkit-scrollbar {
  width: 6px;
}

.spotlight-search-content::-webkit-scrollbar-track {
  background: #f9fafb;
}

.spotlight-search-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.spotlight-search-content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.spotlight-search-section {
  padding: 8px 0;
}

.spotlight-search-group {
  margin-bottom: 16px;
}

.spotlight-search-group:last-child {
  margin-bottom: 0;
}

.spotlight-search-group-header {
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.spotlight-search-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.spotlight-search-item:hover,
.spotlight-search-item.active {
  background: #f0f9ff;
  border-left-color: #3b82f6;
}

.spotlight-search-item.active {
  background: #eff6ff;
}

.spotlight-search-item-icon {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  color: #6b7280;
  flex-shrink: 0;
}

.spotlight-search-item.active .spotlight-search-item-icon {
  color: #3b82f6;
}

/* Specific icon colors for different result types */
.spotlight-search-item[data-type="cycle"] .spotlight-search-item-icon {
  color: #6366f1;
}

.spotlight-search-item[data-type="group"] .spotlight-search-item-icon {
  color: #10b981;
}

.spotlight-search-item[data-type="validation"] .spotlight-search-item-icon {
  color: #f59e0b;
}

.spotlight-search-item[data-type="health"] .spotlight-search-item-icon {
  color: #ef4444;
}

.spotlight-search-item[data-type="export"] .spotlight-search-item-icon {
  color: #8b5cf6;
}

.spotlight-search-item[data-type="url"] .spotlight-search-item-icon {
  color: #06b6d4;
}

.spotlight-search-item[data-type="rid"] .spotlight-search-item-icon {
  color: #84cc16;
}

.spotlight-search-item-content {
  flex: 1;
  min-width: 0;
}

.spotlight-search-item-title {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spotlight-search-item-subtitle {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spotlight-search-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: 12px;
}

.spotlight-search-item-badge {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spotlight-search-item-badge.status-running {
  background: #dbeafe;
  color: #1e40af;
}

.spotlight-search-item-badge.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.spotlight-search-item-badge.status-failed {
  background: #fee2e2;
  color: #991b1b;
}

.spotlight-search-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.spotlight-search-item:hover .spotlight-search-item-actions,
.spotlight-search-item.active .spotlight-search-item-actions {
  opacity: 1;
}

.spotlight-search-item-action {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spotlight-search-empty,
.spotlight-search-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.spotlight-search-empty-icon,
.spotlight-search-loading-spinner {
  width: 32px;
  height: 32px;
  color: #d1d5db;
  margin-bottom: 16px;
}

.spotlight-search-loading-spinner {
  animation: spin 1s linear infinite;
  color: #4f46e5;
}

/* Heavy Search Loading Indicator */
.spotlight-search-item.loading {
  opacity: 0.7;
  pointer-events: none;
}

.spotlight-search-item.loading .spotlight-search-item-title {
  color: #6b7280;
  font-style: italic;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spotlight-search-empty-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.spotlight-search-empty-content p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.spotlight-search-loading p {
  font-size: 14px;
  color: #4f46e5;
  margin: 0;
  font-weight: 500;
}

.spotlight-search-footer {
  padding: 12px 20px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.spotlight-search-tips {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #6b7280;
}

.spotlight-search-tip {
  display: flex;
  align-items: center;
  gap: 4px;
}

.spotlight-search-tip kbd {
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 500;
  color: #6b7280;
}

/* Search result highlighting */
.spotlight-search-highlight {
  background: #fef3c7;
  color: #92400e;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* Animations */
@keyframes spotlight-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spotlight-scale-in {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .spotlight-search-modal.active {
    padding-top: 8vh;
  }

  .spotlight-search-container {
    width: 95%;
    max-width: none;
    margin: 0 auto;
  }

  .spotlight-search-header {
    padding: 16px;
  }

  .spotlight-search-input {
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .spotlight-search-tips {
    gap: 12px;
  }

  .spotlight-search-tip {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .spotlight-search-tips {
    flex-wrap: wrap;
    gap: 8px;
  }

  .spotlight-search-item {
    padding: 10px 16px;
  }

  .spotlight-search-item-title {
    font-size: 13px;
  }

  .spotlight-search-item-subtitle {
    font-size: 11px;
  }
}

/* Job History Section */
.job-history-section {
  margin-top: 24px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.job-history-section h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  background: white;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.history-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.job-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.job-badge.audit-badge {
  background: #dbeafe;
  color: #1e40af;
}

.job-badge.cleanup-badge {
  background: #fef3c7;
  color: #92400e;
}

.history-date {
  font-size: 11px;
  color: #64748b;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
}

.history-stats {
  display: flex;
  gap: 12px;
  align-items: center;
}

.history-stats .stat {
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.history-stats .stat.valid {
  color: #059669;
}

.history-stats .stat.orphaned {
  color: #dc2626;
}

.history-stats .stat.missing {
  color: #d97706;
}

.history-stats .stat.errors {
  color: #dc2626;
}

/* Job Expiration Info */
.job-expiration {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
}