/**
 * Multi-Sheet Display System CSS
 * For Fixed Dimension Material Presets Only
 * Phase 2.3: Multi-Sheet Visualization & UI
 * Version: 1.0.0
 */

/* ==========================================================================
   Multi-Sheet Layout Container - ONLY for Fixed Dimension Materials
   ========================================================================== */

/* Multi-sheet is ALWAYS LENGTH mode - no grid layout needed */

/* ==========================================================================
   PROFESSIONAL APPROACH: Immediate Correct Layout Without Flash
   No mobile-first - each viewport gets correct styles immediately
   ========================================================================== */

/* BASE STYLES: Common to both mobile and desktop */
.sheet-container {
  border: 1px solid var(--color-background-brighter);
  background: var(--color-background);
  transition: none; /* Remove transitions to prevent flash */
  position: relative;
  box-sizing: border-box;
  overflow: visible !important;
  container-type: inline-size; /* Enable container queries */
}

/* SIMPLEST SOLUTION: Hide everything until JavaScript loads */
#layout_canvas .layout-visualization {
  display: none !important;
}

#layout_canvas .layout-visualization.layout-ready {
  display: flex !important;
}

/* MOBILE STYLES: < 900px - Vertical stacking */
@media screen and (max-width: 899px) {
  #layout_canvas:has(.layout-visualization.multi-sheet) {
    overflow-x: visible;
    overflow-y: visible;
  }

  /* CRITICAL: Apply to ANY multi-sheet immediately */
  #layout_canvas .layout-visualization.multi-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-18);
    overflow-x: visible;
    overflow-y: visible;
    grid-template-columns: none;
    width: 100%;
    flex: 1;
  }

  .sheet-container {
    /* width removed - JavaScript sets consistent width for all viewports */
    max-width: 100% !important;
    margin: 0px !important;
    padding: 12px 18px 24px 18px;
    height: auto;
    margin-bottom: var(--space-18);
    position: relative; /* Ensure proper positioning context */
  }

  /* Fix sheet visualization positioning for mobile */
  .sheet-visualization {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-top: 12px;
  }

  #layout_canvas .layout-visualization.multi-sheet.scale-to-length .sheet-visualization .base-material {
    max-width: 100%;
    /* margin removed - ruler positioning CSS handles margins consistently */
  }

  #layout_canvas .layout-visualization.multi-sheet.scale-to-length .sheet-visualization .base-material .panel {
    transform-origin: 0 0;
  }
}

/* DESKTOP STYLES: ≥900px - Horizontal layout */
@media screen and (min-width: 900px) {
  #layout_canvas:has(.layout-visualization.multi-sheet.scale-to-length) {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  /* CRITICAL: Apply to ANY multi-sheet, not just scale-to-length */
  #layout_canvas .layout-visualization.multi-sheet {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--gap) !important;
    overflow-x: visible !important;
    overflow-y: hidden !important;
    grid-template-columns: none !important;
    width: max-content !important;
    min-width: 100% !important;
    flex: none !important;
    white-space: nowrap !important;
  }

  .sheet-container {
    padding: 6px 12px 18px 12px;
    min-height: 300px;
    width: auto;
    max-width: none !important;
    margin: 0 !important;
  }

  #layout_canvas .layout-visualization.multi-sheet.scale-to-length .sheet-container {
    height: calc(100vh - 72px) !important;
    /* width: 100%; - Removed! JavaScript sets specific width */
    flex-shrink: 0 !important;
    flex-basis: auto !important;
  }

  #layout_canvas .layout-visualization.multi-sheet .base-material {
    /* width removed - now set by UnifiedScaleManager */
  }
}



/* ==========================================================================
   Sheet Header - Title and Stats
   ========================================================================== */

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3px 0px 9px 0px;
  height: 30px;
}

/* Responsive sheet header for narrow containers */
@container (max-width: 179px) {
  .sheet-header {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
}

.sheet-label h3 {
  margin: 0;
  color: var(--color-foreground);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  font-family: var(--font-family-01);
  text-align: center;
  opacity: 0.81;
  letter-spacing: 0.06rem;
  font-weight: 400;
  font-size: 0.72rem;
}

.sheet-stats {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 9px;
}

.sheet-panel-count {
    font-size: 0.72rem;
    font-weight: 200;
    letter-spacing: 0.06rem;
    color: var(--color-foreground);
    font-weight: 200;
    opacity: 0.8;
}

.sheet-efficiency {
    font-size: 0.75rem;
    font-weight: 100;
    color: var(--color-foreground);
    font-family: var(--font-family-02);
    opacity: 0.8;
    letter-spacing: 0.06rem;
}



/* ==========================================================================
   Sheet Visualization - Base Material Container
   ========================================================================== */

.sheet-visualization {
  position: absolute;
  top: 42px; /* sheet-header height (30px) + margin (9px) + 3px */
  left: 0;
  min-height: 510px;
  width: fit-content;
  margin: 0;
  padding: 0;
}

/* Each sheet contains a base material that looks identical to current single sheet */
.sheet-visualization .base-material {
  /* Inherit all styles from base-material-styles.css */
  /* This ensures identical appearance to current single sheet */
  overflow: visible !important; /* Allow panels to move outside base-material boundaries */
}

/* WIDTH mode removed - multi-sheet is always LENGTH mode */

/* LENGTH mode: base-materials use hardcoded dimensions within sheet-container */
#layout_canvas .layout-visualization.multi-sheet.scale-to-length .sheet-visualization .base-material {
  margin: 0 auto auto 0;
  /* Center the base-material within the sheet-container */
  box-sizing: border-box;
  /* Include borders in width calculation */
}

/* CRITICAL: Allow UnifiedScaleManager dimensions to override container constraints */
#layout_canvas .layout-visualization.multi-sheet.scale-to-length .sheet-visualization .base-material[data-hardcoded-dimensions="true"] {
  max-width: none !important;
  /* Remove max-width constraint - width now set by UnifiedScaleManager */
  /* width: auto removed - now set by UnifiedScaleManager */
}

/* ==========================================================================
   Responsive Design - Sheet Sizing
   ========================================================================== */

/* Desktop: Optimized for 2-column grid */
@media (min-width: 900px) {
  .sheet-visualization {
    min-height: 510px;
  }
}

/* ==========================================================================
   Scale-to-Length Mode Adjustments
   ========================================================================== */

/* Sheet sizing is handled in lines 85-91 - no duplicate rules needed */

.layout-visualization.multi-sheet.scale-to-length .sheet-visualization {
  /* Maintain aspect ratio in horizontal layout */
  min-height: 250px;
}

/* ==========================================================================
   Clean Separation - Variable Dimension Materials (FABRIC) Unchanged
   ========================================================================== */

/* 
IMPORTANT: This CSS file only affects elements with .multi-sheet class
Variable dimension materials (FABRIC) continue to use:
- .layout-visualization (without .multi-sheet class)
- Single base-material display
- All existing functionality unchanged
*/

/* Multi-sheet styles ONLY apply when .multi-sheet class is present */
.layout-visualization:not(.multi-sheet) {
  /* Ensure no multi-sheet styles leak into FABRIC materials */
  /* This selector has no rules - it's a safety placeholder */
}


/* ==========================================================================
   Loading and Error States
   ========================================================================== */

.sheet-container.loading {
  opacity: 0.6;
  pointer-events: none;
}

.sheet-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 1px solid var(--color-background-brighter);
  border-top-color: var(--color-accent-01);
  border-radius: 50%;
  animation: sheet-loading-spin 1s linear infinite;
}

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

.sheet-container.error {
  border-color: #dc3545;
  background: #fff5f5;
}

.sheet-error-message {
  color: #dc3545;
  font-size: 0.8rem;
  text-align: center;
  padding: 12px;
  font-style: italic;
}

/* ==========================================================================
   Phase 2.4: Cross-Sheet Drag and Drop Visual Feedback
   ========================================================================== */

.sheet-container.cross-sheet-target {
  border-color: var(--color-accent-01) !important;
  box-shadow: 0 0 12px rgba(var(--color-accent-01-rgb), 0.5) !important;
}

.sheet-container.cross-sheet-target .sheet-label h3 {
  color: var(--color-accent-01-brighter) !important;
  font-weight: 600 !important;
}

/* Smooth transitions for cross-sheet dragging */
.panel {
  transition: none; /* No transitions during normal state */
}

.panel.dragging {
  transition: none !important; /* Ensure no transitions interfere with dragging */
}

/* Smooth visual feedback for sheet highlighting */
.sheet-container {
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}