/**
 * Debug System Styles
 * Pure CSS-based visual debugging with minimal DOM injection
 * Uses data attributes for state management
 */

/* ========== DEBUG PANELS (minimal DOM injection) ========== */

.debug-panel {
  position: fixed;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 8px;
  font-family: 'Courier New', 'Monaco', monospace;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  z-index: 999999;
  pointer-events: auto;
  min-width: 280px;
  max-width: 400px;
}

.debug-panel__handle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 10px;
  color: #FFD700;
  font-weight: bold;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 8px 8px 0 0;
}

.debug-panel__collapse-btn {
  cursor: pointer;
  font-size: 10px;
  color: #FFD700;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background 0.15s ease;
}

.debug-panel__collapse-btn:hover {
  background: rgba(255, 215, 0, 0.2);
}

.debug-panel__drag-handle {
  cursor: move;
  flex: 1;
  text-align: center;
}

.debug-panel__drag-handle:active {
  cursor: grabbing;
}

.debug-panel__content {
  padding: 12px;
  color: #00FF00;
  transition: display 0.2s ease;
}

/* Collapsed state */
.debug-panel[data-collapsed="true"] .debug-panel__content {
  display: none;
}

.debug-panel[data-collapsed="true"] {
  min-width: auto;
}

.debug-panel[data-collapsed="true"] .debug-panel__handle {
  border-bottom: none;
}

/* State Panel */
.debug-state-panel {
  top: 10px;
  left: 10px;
}

.debug-state-panel .debug-panel__content {
  color: #0F0;
}

/* Performance Panel */
.debug-performance-panel {
  top: 10px;
  left: 310px;
}

.debug-performance-panel .debug-panel__content {
  color: #0FF;
}

/* Debug Tools Panel (combined) */
.debug-tools-panel {
  bottom: 10px;
  right: 10px;
  max-width: 340px;
}

.debug-tools-panel .debug-panel__content {
  color: #FFA500;
}

/* Inspector Panel */
.debug-inspector-panel {
  top: 10px;
  right: 10px;
  max-width: 420px;
}

.debug-inspector-panel .debug-panel__content {
  color: #FFF;
}

/* Panel Content Styling */
.debug-loading {
  color: #888;
  font-style: italic;
}

.debug-field {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 12px;
}

.debug-field__label {
  color: #888;
  font-size: 10px;
}

.debug-field__value {
  font-weight: bold;
  font-size: 11px;
}

.debug-field__value--good { color: #0F0; }
.debug-field__value--ok { color: #FF0; }
.debug-field__value--poor { color: #F00; }
.debug-field__value--carousel { color: #00B894; }
.debug-field__value--openingManual,
.debug-field__value--openingAuto { color: #FDCB6E; }
.debug-field__value--project { color: #6C5CE7; }
.debug-field__value--closingManual,
.debug-field__value--closingAuto { color: #FD79A8; }

/* Debug Sections */
.debug-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.debug-section__title {
  font-weight: bold;
  color: #FFD700;
  margin-bottom: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Checkboxes */
.debug-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 11px;
}

.debug-checkbox input[type="checkbox"] {
  cursor: pointer;
  accent-color: #0F0;
}

.debug-checkbox span {
  color: #CCC;
}

/* Debug Info */
.debug-info {
  margin-top: 8px;
}

.debug-info__title {
  font-size: 10px;
  color: #888;
  margin-bottom: 6px;
}

.debug-info__content {
  font-size: 10px;
  color: #AAA;
}

.debug-info__content > div {
  margin-bottom: 4px;
}

.debug-info__content span {
  color: #0F0;
  font-weight: bold;
}

/* Hide panels when debug mode is off */
body:not([data-debug]) .debug-panel {
  display: none !important;
}

/* ========== CONTAINER OUTLINES (pure CSS) ========== */

/* Main containers - only visible when data-debug-containers is true */
body[data-debug][data-debug-containers="true"] #hero-section {
  outline: 2px dashed #FF6B6B;
  outline-offset: -2px;
}

body[data-debug][data-debug-containers="true"] .carousel-container {
  outline: 2px dashed #4ECDC4;
  outline-offset: -2px;
}

body[data-debug][data-debug-containers="true"] .mockups-container {
  outline: 2px dashed #45B7D1;
  outline-offset: -2px;
}

body[data-debug][data-debug-containers="true"] .device-item {
  outline: 2px dashed #96CEB4;
  outline-offset: -2px;
}

body[data-debug][data-debug-containers="true"] #project-details-slot {
  outline: 2px dashed #FFEAA7;
  outline-offset: -2px;
}

body[data-debug][data-debug-containers="true"] .project-pages-container {
  outline: 2px dashed #DFE6E9;
  outline-offset: -2px;
}

body[data-debug][data-debug-containers="true"] .main-header {
  outline: 2px dashed #A29BFE;
  outline-offset: -2px;
}

/* ========== INSPECTOR PANEL STYLES ========== */

.debug-inspector-toggle {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.debug-inspector-info {
  min-height: 80px;
}

.debug-empty-state {
  color: #888;
  font-style: italic;
  font-size: 11px;
  text-align: center;
  padding: 20px 10px;
}

.debug-inspector-header {
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.debug-inspector-type {
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.debug-inspector-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.debug-inspector-field {
  display: flex;
  gap: 8px;
  font-size: 10px;
  align-items: baseline;
}

.debug-inspector-label {
  color: #888;
  font-weight: bold;
  min-width: 50px;
  flex-shrink: 0;
}

.debug-inspector-value {
  font-family: 'Monaco', 'Courier New', monospace;
  word-break: break-all;
  flex: 1;
}

/* Parent Hierarchy */
.debug-inspector-parents {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-inspector-parent {
  margin-bottom: 10px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
}

.debug-inspector-parent:last-child {
  margin-bottom: 0;
}

.debug-inspector-parent-type {
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.debug-inspector-parent-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}

.debug-inspector-parent-field {
  display: flex;
  gap: 6px;
  font-size: 9px;
  align-items: baseline;
}

/* Section styling within inspector */
.debug-inspector-panel .debug-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-inspector-panel .debug-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ========== GRID OVERLAY (pure CSS) ========== */

body[data-debug][data-debug-grid="true"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 0, 255, 0.15) 0px, transparent 1px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(255, 0, 255, 0.15) 0px, transparent 1px, transparent 10px);
  background-size: 10px 10px;
  pointer-events: none;
  z-index: 999998;
}

/* ========== LAYOUT COMPONENT DEBUG OUTLINES ========== */

/* These outlines are applied by BaseLayout.js using inline styles */
/* Just ensure they don't interfere with layout */
[data-debug-outlined="true"] {
  /* Outline already applied via inline style in BaseLayout */
  /* This is just a placeholder to ensure specificity */
}

/* ========== MOBILE RESPONSIVE ========== */
/* Mobile: Single breakpoint at 1080px */
@media (max-width: 1080px) {
  .debug-panel {
    max-width: 95vw;
    min-width: 240px;
    font-size: 10px;
  }

  .debug-panel__handle {
    padding: 6px 10px;
    font-size: 9px;
  }

  .debug-panel__content {
    padding: 10px;
  }

  .debug-section__title {
    font-size: 9px;
  }

  .debug-checkbox {
    font-size: 10px;
  }

  .debug-field {
    font-size: 10px;
  }

  /* Position panels better on mobile */
  .debug-state-panel {
    top: 5px;
    left: 5px;
  }

  .debug-performance-panel {
    top: 5px;
    left: 5px;
    transform: translateY(calc(100% + 10px));
  }

  .debug-inspector-panel {
    top: 5px;
    right: 5px;
    left: 5px;
  }

  .debug-tools-panel {
    bottom: 5px;
    right: 5px;
    left: 5px;
  }
}

/* ========== PRINT STYLES ========== */

@media print {
  .debug-panel,
  body[data-debug][data-debug-grid="true"]::before {
    display: none !important;
  }

  body[data-debug] [data-layout],
  body[data-debug] [class*="layout-"] {
    outline: none !important;
  }
}

/* ========== ACCESSIBILITY ========== */

/* Ensure debug elements don't interfere with focus */
.debug-panel {
  outline: none;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .debug-panel {
    transition: none;
  }
}

/* ========== IMPORTANT: Debug outline visibility ========== */
/* Debug outlines use CSS 'outline' property which does NOT affect layout */
/* No position, overflow, or layout property changes needed */
/* Outlines are applied via inline styles in BaseLayout.js */

/* Keep this section minimal - outlines work without forcing layout changes */
[data-debug-outlined="true"] {
  /* Placeholder for debug-outlined elements */
  /* No styles needed - outline is applied inline and doesn't affect layout */
}