/*
 * Styles for OSDS3D Mug Customizer
 *
 * The layout is designed to be responsive, mobile-first, and clean. On
 * larger screens, the 2D canvas and 3D preview are displayed side by side.
 * On smaller screens, they stack vertically. Toolbar buttons and panels
 * are styled for clarity and accessibility.
 */

/* Import a few Google Web Fonts to offer more typography choices.  These must
   come before all other CSS rules.  If Google servers are unreachable,
   the browser will fall back to system fonts and the additional fonts will
   simply not load. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap');

.osds3d-customizer {
    margin-top: 20px;
    font-family: inherit;
    max-width: 100%;
    color: #333;
}


/* Theme variables */
:root {
    /* Primary accent color used for borders and hovers */
    --osds3d-accent: #0073aa;
    /* Background color for panels and toolbar */
    --osds3d-background: #f8f9fb;
    /* Button hover color */
    --osds3d-hover: #006799;
    /* Panel border radius */
    --osds3d-radius: 6px;
}

/* Toolbar */
.osds3d-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    background: var(--osds3d-background);
    padding: 10px;
    border: 1px solid var(--osds3d-accent);
    border-radius: var(--osds3d-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.osds3d-toolbar button {
    padding: 6px 12px;
    font-size: 16px;
    border: 1px solid var(--osds3d-accent);
    background: #ffffff;
    cursor: pointer;
    border-radius: var(--osds3d-radius);
    transition: background 0.2s ease, color 0.2s ease;
}

.osds3d-toolbar button:hover,
.osds3d-toolbar button:focus {
    background: var(--osds3d-hover);
    color: #ffffff;
}

/* Workspace layout */
.osds3d-workspace {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

/* Canvas wrapper */
.osds3d-canvas-wrapper {
    border: 1px solid var(--osds3d-accent);
    /* Hide scrollbars on the canvas wrapper; the canvas will scale to fit */
    overflow: hidden;
    position: relative;
    background: #ffffff;
    border-radius: var(--osds3d-radius);
}

.osds3d-canvas-wrapper canvas {
    width: 100%;
    height: auto;
    display: block;
}

/* 3D preview */
.osds3d-preview-3d {
    border: 1px solid var(--osds3d-accent);
    /* Increase preview height so the 3D mug appears larger */
    height: 450px;
    background: #f9f9f9;
    position: relative;
    border-radius: var(--osds3d-radius);
}

/* Actions area */
.osds3d-actions {
    margin-top: 10px;
    text-align: center;
}

.osds3d-actions .button {
    padding: 10px 20px;
    font-size: 16px;
}

/* Responsive layout for larger screens */
@media (min-width: 768px) {
    .osds3d-workspace {
        flex-direction: row;
    }
    .osds3d-canvas-wrapper {
        flex: 2;
        /* Reduce the minimum height on larger screens so the module does not
           occupy excessive vertical space. */
        min-height: 400px;
    }
    .osds3d-preview-3d {
        flex: 1;
        /* Reduce the minimum height to match the canvas wrapper */
        min-height: 400px;
    }
}

/* Options panel for editing selected objects */
.osds3d-options-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 300px;
    background: #ffffff;
    border-top: 1px solid var(--osds3d-accent);
    padding: 10px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    z-index: 9999;
    font-size: 14px;
}

/* Hide the panel by default */
.osds3d-options-panel.hidden {
    display: none;
}

.osds3d-options-panel label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
}
.osds3d-options-panel input[type="text"],
.osds3d-options-panel input[type="number"],
.osds3d-options-panel select,
.osds3d-options-panel textarea {
    width: 100%;
    padding: 4px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 14px;
}
.osds3d-options-panel .option-row {
    margin-bottom: 10px;
}
.osds3d-options-panel .inline-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.osds3d-options-panel .inline-controls button {
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #f0f0f0;
    cursor: pointer;
}
.osds3d-options-panel .inline-controls button.active {
    background: #d0d0d0;
}

/* Generic modal styling */
.osds3d-modal {
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    max-height: 80%;
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    z-index: 10000;
}
.osds3d-modal h2 {
    font-size: 18px;
    margin: 0 0 10px;
}
.osds3d-modal .close-modal {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
.osds3d-modal .button {
    margin-top: 10px;
}

/* Layers panel styling */
.osds3d-layers-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 260px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid var(--osds3d-accent);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}
.osds3d-layers-panel .layers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--osds3d-accent);
    background: var(--osds3d-background);
    font-weight: bold;
}
.osds3d-layers-panel .layers-header button {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
.osds3d-layers-panel .layers-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}
.osds3d-layers-panel .layers-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
.osds3d-layers-panel .layers-list li .layer-label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.osds3d-layers-panel .layers-list li .layer-controls button {
    margin-left: 4px;
    padding: 2px 6px;
    font-size: 12px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 3px;
}
.osds3d-layers-panel .layers-list li .layer-controls button:hover {
    background: #e8e8e8;
}