/* partList.css */

/* Global root variables */
:root {
    --thumbnail-size: 150px; /* Define the base size for thumbnails */
}

/* Base container */
#parts3DContainer {
    position: fixed; /* Keeps the container in place relative to the viewport */
    top: 10px; /* Positions the container near the top of the page */
    left: 50%; /* Centers horizontally (adjustable as needed) */
    transform: translateX(-50%); /* Centers horizontally */
    display: flex; /* Enables flexbox for alignment */
    flex-wrap: wrap; /* Allows children to wrap to the next row if needed */
    gap: 10px; /* Spacing between child elements */
    width: calc(7 * var(--thumbnail-size) + 50px); /* Example width based on the number of items */
    background-color: #1575d6; /* Background color */
    overflow: auto; /* Enables scrolling for content */
    max-height: 97vh; /* Limit height to fit within the viewport */
    border-radius: 8px; /* Rounded corners */
    padding: 10px; /* Internal spacing */
    z-index: 1000000; /* Ensures it appears above other elements */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Prevents interaction when hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for opacity and visibility */
    box-sizing: border-box; /* Includes padding and borders in the element's size */
}

#parts3DContainer.visible {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Allows interaction */
}

/* Individual section for each type */
.parts-3d-section {
    width: var(--thumbnail-size); /* Fixed width */
    flex: 0 0 var(--thumbnail-size); /* Prevent shrinking or growing */
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.material-preview-thumbnail {
    width: 100px;
    height: 100px;
    background-color: #f5f5f5; /* fallback if no render */
    background-size: cover;
    background-position: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}


/* Type name styling */
.parts-3d-type-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 5px;
}

/* ID list styling */
.parts-3d-id-list {
    font-size: 14px;
    color: #555;
    background-color: #f1f1f1;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
}

/* 3D Preview container (thumbnails) */
.parts-3d-preview {
    width: 100%;
    width: var(--thumbnail-size);
    height: var(--thumbnail-size); /* Ensures square aspect ratio */
    background-color: #e9ecef;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover; /* Ensures proper thumbnail scaling */
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

/* Hover effect for 3D thumbnails */
.parts-3d-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* View container for thumbnails and slices */
.parts-3d-view-container {
    display: flex;
    flex-direction: column; /* Stack thumbnail and slice vertically */
    align-items: center; /* Center-align the contents */
    gap: 10px; /* Add spacing between thumbnail and slice */
    width: var(--thumbnail-size); /* Match the thumbnail width */
}

.parts-3d-slice-container:hover {
    transform: scale(1.5);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    z-index: 999987884;
}
/* Slice container */
.parts-3d-slices-container {
    display: flex;
    flex-wrap: wrap; /* Allows images to wrap to the next line if they don't fit */
    justify-content: center; /* Centers the images horizontally */
    gap: 10px; /* Adds spacing between the images */
    align-items: center; /* Aligns images vertically */
}

/* Slice image styling */
.parts-3d-slice {
    
    width: var(--thumbnail-size); 
    height: auto; /* Maintains the aspect ratio of the image */
    border: 1px solid #ccc; /* Optional: Adds a border around the image */
    border-radius: 4px; /* Optional: Adds rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

/* General styles for toggle buttons */


/* Hover effect for buttons */
.enable-button:hover , .restore-button:hover {
    background-color: #0056b3; /* Darker blue shade on hover */
    transform: scale(1.05); /* Slight zoom effect for interactivity */
}

/* Specific styles for the Enable button */
.enable-button {
    position: absolute;
    right: 20px;
    bottom: 100px; /* Position 100px from the bottom edge */
    z-index: 984566455;
}

/* Specific styles for the Restore button */
.restore-button {
    position: absolute;
    right: 20px;
    bottom: 100px; /* Position 100px from the bottom edge */
    z-index: 984566455;
}

#togglePartListButton {
    position: absolute;
    right: 40vw;
    bottom: 10px; /* Position 100px from the bottom edge */
    z-index: 984566455;
    background-color: orangered;
}