/* ====================================================================
   styles.css
   BASE STYLING FOR THE APPLICATION
   ==================================================================== */

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f0f0f0;
}

/* Main container holding all content - centers layout and provides visual structure */
.container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    max-width: 1200px; /* Ensures layout doesn't stretch too wide on large screens */
}

/* ====================================================================
   STORE LAYOUT VISUALIZATION AREA
   ==================================================================== */

/* Container for the store layout visualization - includes hallway + store
   Uses flexbox for precise alignment of hallway and store components */
.layout-area {
    display: flex;
    align-items: flex-start;
    background: #fff;
    margin: 20px 0;
    position: relative;
    overflow: visible; /* Allows furniture to extend beyond boundaries if needed */
    min-width: 1134px; /* Prevents scaling: 54px hallway + 1080px store */
}

/* Hallway area (left side) with diagonal pattern - 18" wide, 180" tall
   Represents external corridor adjacent to store entrance */
.hallway {
    width: 54px;   /* 18" at 1/3 scale (18 inches × 3 pixels/inch = 54 pixels) */
    height: 540px; /* 180" at 1/3 scale (180 inches × 3 pixels/inch = 540 pixels) */
    background: linear-gradient(45deg, #e8e8e8 25%, transparent 25%), 
                linear-gradient(-45deg, #e8e8e8 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #e8e8e8 75%), 
                linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
    background-size: 15px 15px; /* Diagonal stripe pattern for visual distinction */
    background-color: #f5f5f5;
    position: relative;
}

/* Main store area where furniture is placed - 360" wide × 180" tall
   This is the primary workspace for furniture layout planning */
.store {
    width: 1080px;  /* 360" at 1/3 scale (360 inches × 3 pixels/inch = 1080 pixels) */
    height: 540px;  /* 180" at 1/3 scale (180 inches × 3 pixels/inch = 540 pixels) */
    background: #fafafa; /* Subtle background distinguishes from container */
    outline: 2px solid #ccc; /* Visible boundary for store area */
    position: relative; /* Enables absolute positioning of furniture items */
    overflow: visible; /* Allows furniture to extend beyond store if needed */
    box-sizing: border-box; /* Includes outline in dimensions for precision */
}

/* Entrance area - full left edge of store (green vertical bar spanning entire height)
   Visual indicator showing customer entry point along entire left wall */
.entrance {
    position: absolute;
    left: -2px;     /* Slightly overlaps store border for visual connection */
    top: 0;
    width: 2px;     /* Visual thickness matches store wall thickness */
    height: 540px;  /* Full store height (180" at 1/3 scale) */
    background: linear-gradient(to bottom, #4CAF50 0%, #45a049 100%);
    z-index: 1;     /* Behind furniture items for proper layering */
    box-shadow: 2px 0 4px rgba(0,0,0,0.2); /* Subtle depth effect */
}

/* ====================================================================
   DIMENSION LABELS AND INFO DISPLAYS
   ==================================================================== */

/* Labels showing dimensions and other measurements around the layout
   Used for displaying store dimensions, furniture sizes, and spacing information */
.dimension-label {
    position: absolute;
    font-size: 11px;
    font-weight: bold;
    color: #333;
    background: rgba(255,255,255,0.95); /* Semi-transparent white background */
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Subtle depth for readability */
}

/* Information panels with store specs and measurements
   Provides context and technical details about the layout system */
.info-panel {
    margin: 15px 0;
    margin-left: 54px; /* Align with store container (skip hallway width) */
    padding: 15px;
    background: #f8f9fa; /* Light gray background for contrast */
    border-radius: 6px;
    border: 1px solid #dee2e6;
    width: 1020px; /* Narrower than store container (1080px) to end before store's right edge */
    max-width: 1020px;
}

/* ====================================================================
   FURNITURE ITEM STYLING
   ==================================================================== */

/* Base style for all furniture items - core visual representation
   Provides consistent appearance and behavior for all furniture pieces */
.furniture-item {
    position: absolute; /* Allows precise positioning via left/top coordinates */
    outline: 2px solid #333; /* Visible border distinguishing furniture boundaries */
    cursor: move; /* Indicates potential for movement (even if disabled) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #333;
    user-select: none; /* Prevents text selection during interaction */
    box-shadow: 3px 3px 8px rgba(0,0,0,0.25); /* Depth effect for visual hierarchy */
    flex-direction: column; /* Stacks label and dimensions vertically */
    transition: box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transitions for dynamic styling */
    z-index: 10; /* Ensures furniture appears above entrance line and other background elements */
}

/* Hover effect for furniture items - provides visual feedback for interaction */
.furniture-item:hover {
    box-shadow: 4px 4px 12px rgba(0,0,0,0.35); /* Enhanced shadow on hover */
    z-index: 100; /* Brings hovered item to front */
}

/* Style when furniture is being dragged - enhanced visual feedback during movement */
.furniture-item.dragging {
    z-index: 1000; /* Highest z-index during drag operations */
    box-shadow: 6px 6px 20px rgba(0,0,0,0.4); /* Maximum shadow for active state */
}

/* Global furniture type colors and styles - visual categorization system
   Each pre-defined furniture type has distinct color for immediate identification */
.display { background: #20B2AA; color: white; outline-color: #1a9998; } /* Teal for displays */
.standdisplay { background: #e91e63; color: white; outline-color: #c2185b; } /* Pink for stand displays */
.gondola { background: #607d8b; color: white; outline-color: #455a64; } /* Blue-gray for gondolas */
.bookshelf { background: #8B4513; color: white; outline-color: #5d2e0a; } /* Brown for bookshelves */
.shelving { background: #28a745; color: white; outline-color: #1e7e34; } /* Green for shelving units */
.chair { background: #6c757d; color: white; outline-color: #495057; } /* Gray for chairs */
.desk { background: #795548; color: white; outline-color: #5d4037; } /* Brown for desks */

/* Small dimension text shown under furniture labels
   Provides size information with consistent styling */
.measurements {
    font-size: 8px;
    margin-top: 2px;
    opacity: 0.9; /* Slightly muted to de-emphasize secondary information */
    font-weight: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Subtle text shadow for better readability */
}

/* ====================================================================
   GRID OVERLAY SYSTEM (HIDDEN BUT FUNCTIONAL)
   ==================================================================== */

/* Grid system styling - HIDDEN (opacity: 0) but maintains functionality for positioning
   Provides mathematical structure for precise furniture placement and alignment */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Grid doesn't interfere with user interactions */
    z-index: 1; /* Behind furniture but above background */
    opacity: 0; /* HIDDEN: Grid not visible but maintains structure for snapping */
}

/* Grid line styling - invisible but maintains mathematical structure
   Creates 1-inch increment reference system for positioning calculations */
.grid-line {
    stroke: #333;
    stroke-width: 0.5;
}

/* Major grid lines every 12 inches - structural reference points */
.grid-line.major {
    stroke-width: 1;
    opacity: 0.8;
}

/* ====================================================================
   MEASUREMENT OVERLAY SYSTEM (FOR VISUAL MEASUREMENTS)
   ==================================================================== */

/* SVG overlay for measurement lines - displays distance and spacing information
   Positioned above all other elements to ensure visibility */
.measurement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Measurements don't interfere with interactions */
    z-index: 500; /* Highest z-index for maximum visibility */
}

/* Styling for measurement lines in SVG overlay - standardized appearance */
.measurement-line {
    stroke: #ff6b35; /* Orange color for high visibility */
    stroke-width: 2; /* 2px thickness for clear visibility without being intrusive */
    opacity: 0.8; /* Slightly transparent to avoid overwhelming the layout */
}

/* Text labels for measurement values - displays actual distances */
.measurement-label {
    font-size: 9px;
    font-weight: bold;
    fill: #ff6b35; /* Matches measurement line color */
    text-anchor: middle; /* Centers text horizontally */
    dominant-baseline: middle; /* Centers text vertically */
}

/* Background rectangles for measurement labels - ensures text readability */
.measurement-label-bg {
    fill: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    stroke: #ff6b35; /* Matches measurement line color */
    stroke-width: 0.5; /* Thin border for definition */
}

/* ====================================================================
   RESPONSIVE DESIGN CONSIDERATIONS
   ==================================================================== */

/* Ensure layout works well across different screen sizes
   Maintains functionality and visual clarity in various display contexts */
@media (max-width: 1200px) {
    .furniture-item {
        font-size: 9px; /* Slightly smaller text for smaller screens */
    }
    
    .measurements {
        font-size: 7px; /* Proportionally smaller dimension text */
    }
}

/* High DPI display support
   Ensures crisp rendering on high-resolution screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .furniture-item {
        outline-width: 1.5px; /* Slightly thinner outlines for high DPI */
    }
}

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

/* Focus styles for keyboard navigation support
   Ensures furniture is accessible via keyboard navigation */
.furniture-item:focus {
    outline: 3px solid #007bff; /* Blue focus outline for accessibility */
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Blue glow for focus indication */
}

/* Reduced motion support for users with motion sensitivity
   Respects user preferences for reduced animations */
@media (prefers-reduced-motion: reduce) {
    .furniture-item {
        transition: none; /* Disable transitions for users preferring reduced motion */
    }
}

/* High contrast mode support
   Ensures visibility in high contrast display modes */
@media (prefers-contrast: high) {
    .furniture-item {
        outline-width: 3px; /* Thicker outlines for better contrast */
        font-weight: 900; /* Bolder text for enhanced readability */
    }
}