/* Generator Layout System - Mobile-First Responsive Design */

:root {
  /* Z-Index Scale */
  --z-auth-header: 100;
  --z-loading-overlay: 90;
  --z-modals: 80;
  --z-viewer-ui: 20;
  --z-viewer-canvas: 10;
  --z-control-panel: 5;
  --z-background: 0;
  
  /* Spacing Scale */
  --auth-header-height: 3rem;      /* 48px */
  --auth-header-height-md: 4rem;   /* 64px */
  --auth-header-height-lg: 5rem;   /* 80px */
  
  /* Layout Breakpoints */
  --mobile-max: 767px;
  --tablet-min: 768px;
  --desktop-min: 1024px;
}

/* Base Generator Layout */
.generator-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .generator-layout {
    flex-direction: row;
  }
}

/* Auth Header Component */
.auth-header-container {
  background-color: #1f2937; /* bg-gray-800 */
  border-bottom: 1px solid #374151; /* border-gray-700 */
  padding: 0.5rem 0; /* py-2 */
  height: var(--auth-header-height);
  z-index: var(--z-auth-header);
  position: relative;
  order: 1;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .auth-header-container {
    height: var(--auth-header-height-md);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}

@media (min-width: 1024px) {
  .auth-header-container {
    height: var(--auth-header-height-lg);
  }
}

/* 3D Viewer Container */
.viewer-container {
  flex: 1;
  position: relative;
  order: 2;
  z-index: var(--z-viewer-canvas);
  min-height: 50vh;
  background-color: #111827; /* bg-gray-900 */
}

@media (min-width: 768px) {
  .viewer-container {
    order: 2;
    min-height: 100vh;
    padding-top: var(--auth-header-height-md);
  }
}

@media (min-width: 1024px) {
  .viewer-container {
    padding-top: var(--auth-header-height-lg);
  }
}

/* Control Panel/Sidebar */
.control-panel {
  width: 100%;
  background-color: #1f2937; /* bg-gray-800 */
  padding: 1.5rem; /* p-6 */
  overflow-y: auto;
  order: 3;
  z-index: var(--z-control-panel);
  max-height: 50vh;
  position: relative;
}

@media (min-width: 768px) {
  .control-panel {
    width: 24rem; /* w-96 = 384px */
    order: 1;
    max-height: 100vh;
    height: 100vh;
    flex-shrink: 0;
  }
}

/* Custom scrollbar for control panel */
.control-panel {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 #2d3748;
}

.control-panel::-webkit-scrollbar {
  width: 8px;
}

.control-panel::-webkit-scrollbar-track {
  background: #2d3748;
}

.control-panel::-webkit-scrollbar-thumb {
  background-color: #4a5568;
  border-radius: 4px;
}

/* 3D Viewer Canvas */
.viewer-canvas {
  z-index: var(--z-viewer-canvas);
  width: 100%;
  height: 100%;
}

/* Remove fixed margins - now handled by container padding */
.viewer-canvas[style*="margin-top"] {
  margin-top: 0 !important;
}

/* Loading Overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(17, 24, 39, 0.75); /* bg-gray-900 bg-opacity-75 */
  z-index: var(--z-loading-overlay);
}

/* Viewer help text styling */
.viewer-help-text {
  position: absolute;
  bottom: 5px; /* Push down for testing desktop limits */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(17, 24, 39, 0.85); /* Slightly more opaque */
  color: #9ca3af;
  font-size: 0.75rem; /* 12px default */
  padding: 8px 16px;
  border-radius: 9999px;
  backdrop-filter: blur(6px); /* Enhanced blur */
  z-index: 10;
  transition: opacity 0.5s ease;
  pointer-events: none;
  white-space: nowrap; /* Prevent text wrapping */
  
  /* Auto-hide animation */
  opacity: 1;
  animation: helpTextAutoHide 8s ease-in-out forwards;
}

/* Auto-hide keyframes */
@keyframes helpTextAutoHide {
  0%, 60% { opacity: 1; }
  100% { opacity: 0.2; }
}

/* Show on hover/interaction */
.viewer-container:hover .viewer-help-text {
  opacity: 0.8 !important;
  animation: none;
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
  .auth-header-container {
    order: 1;
    position: sticky;
    top: 0;
  }
  
  .viewer-container {
    order: 2;
    min-height: 40vh;
    flex: 1;
  }
  
  .control-panel {
    order: 3;
    max-height: 60vh;
    border-top: 1px solid #374151; /* border-gray-700 */
  }

  /* Generator title spacing fix - add breathing room from viewer */
  .generator-layout .control-panel h1,
  .generator-layout .heading-primary {
    padding-top: 1.5rem; /* 24px top padding for visual separation */
    margin-top: 0;
  }

  /* Mobile-optimized viewer help text */
  .viewer-help-text {
    font-size: 0.625rem; /* 10px - compact for mobile */
    padding: 4px 10px; /* Very tight padding */
    bottom: 3px; /* Push as far down as possible for testing */
    max-width: 85vw; /* Prevent overflow on narrow screens */
    
    /* Faster auto-hide on mobile */
    animation: helpTextAutoHideMobile 6s ease-in-out forwards;
  }
  
  /* Mobile-specific auto-hide (faster) */
  @keyframes helpTextAutoHideMobile {
    0%, 45% { opacity: 1; }
    100% { opacity: 0.15; }
  }
  
  /* Mobile interaction - show on touch */
  .viewer-container:active .viewer-help-text {
    opacity: 0.9 !important;
    animation: none;
  }
}

/* Enhanced mobile touch interactions */
@media (max-width: 767px) and (pointer: coarse) {
  .control-panel {
    /* Better touch scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Larger touch targets for mobile */
  .control-panel input[type="range"] {
    height: 2.5rem; /* Larger touch area */
  }
  
  .control-panel button {
    min-height: 2.75rem; /* 44px minimum touch target */
  }
}

/* Tablet-specific optimizations */
@media (min-width: 768px) and (max-width: 1023px) {
  .control-panel {
    width: 20rem; /* Slightly narrower on tablets */
  }
}

/* Large desktop optimizations */
@media (min-width: 1440px) {
  .control-panel {
    width: 28rem; /* Wider panel for large screens */
  }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .viewer-canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Focus and accessibility improvements */
.control-panel input:focus,
.control-panel button:focus {
  outline: 2px solid #818cf8; /* indigo-400 */
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .generator-layout * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .auth-header-container,
  .control-panel {
    display: none;
  }
  
  .viewer-container {
    width: 100%;
    height: 100vh;
    order: 1;
  }
}

/* Dark mode enhancements (default) */
.generator-layout {
  color-scheme: dark;
}

/* Light mode support (if needed in future) */
@media (prefers-color-scheme: light) {
  .generator-layout.light-mode {
    color-scheme: light;
  }
  
  .generator-layout.light-mode .auth-header-container {
    background-color: #f9fafb; /* bg-gray-50 */
    border-bottom-color: #e5e7eb; /* border-gray-200 */
  }
  
  .generator-layout.light-mode .control-panel {
    background-color: #f9fafb; /* bg-gray-50 */
  }
  
  .generator-layout.light-mode .viewer-container {
    background-color: #ffffff; /* bg-white */
  }
}