/* css/core.css - Global Styles, Resets & Utilities */

/* --- Global Reset & Body --- */
body { 
    margin: 0; 
    overflow: hidden; 
    background-color: #222; 
    font-family: 'Segoe UI', sans-serif; 
    user-select: none; 
}

/* Landing page override (applied via body class) */
body.landing-page { 
    overflow-y: auto !important; 
    overflow-x: hidden; 
    background-color: #0a0a0a; 
    font-family: 'Inter', sans-serif; 
    color: #ffffff; 
}

/* --- Canvas & Layout Containers --- */
#canvas-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    z-index: 0; 
}

/* --- Generic UI Elements (Buttons, Inputs, etc.) --- */

/* Standard UI Button */
.ui-btn { 
    background-color: #444; 
    color: white; 
    border: 1px solid #666; 
    padding: 8px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 12px; 
    transition: background 0.2s; 
    text-align: center; 
    width: 100%; 
    box-sizing: border-box; 
}

.ui-btn:hover { 
    background-color: #666; 
}

/* Danger Variant (Red) */
.ui-btn.danger { 
    border-color: #844; 
    color: #fcc; 
}

.ui-btn.danger:hover { 
    background-color: #633; 
}

/* Close Button (Generic 'X') */
.close-btn { 
    padding: 5px 15px; 
    background: #444; 
    color: white; 
    border: 1px solid #666; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 12px; 
}

.close-btn:hover { 
    background: #555; 
}

/* Parameter Wheel (Custom Input Control) */
.param-wheel { 
    width: 14px; 
    height: 14px; 
    background: radial-gradient(circle, #888 30%, #444 80%); 
    border: 1px solid #666; 
    border-radius: 50%; 
    cursor: ew-resize; 
    display: inline-block; 
    margin-right: 6px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
    position: relative; 
}

.param-wheel::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 1px; 
    height: 50%; 
    background: #ccc; 
    transform: translateX(-50%); 
}

/* Numeric Input Fields */
.numeric-input { 
    width: 50px; 
    background: #333; 
    color: #ddd; 
    border: 1px solid #555; 
    border-radius: 3px; 
    padding: 2px; 
    font-family: monospace; 
}

/* Hidden Inputs (File, etc.) */
#texture-input, 
#template-input, 
#obj-input, 
#normal-input, 
#paint-mesh-input { 
    display: none; 
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar { 
    width: 6px; 
}

::-webkit-scrollbar-track { 
    background: transparent; 
}

::-webkit-scrollbar-thumb { 
    background: #555; 
    border-radius: 3px; 
}

/* --- Loading Indicators & Overlays --- */

/* Main Loading Label (Center Screen) */
#loading { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: white; 
    font-size: 24px; 
    background: rgba(0,0,0,0.8); 
    padding: 20px; 
    border-radius: 10px; 
    display: none; 
    z-index: 100; 
}

/* Full Screen Loading Overlay (with Spinner) */
.loading-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.7); 
    z-index: 5000; 
    display: none; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    border-radius: 8px; 
    backdrop-filter: blur(2px); 
}

.loading-overlay.active { 
    display: flex; 
}

/* Spinner Animation */
.spinner { 
    width: 40px; 
    height: 40px; 
    border: 4px solid rgba(255, 255, 255, 0.3); 
    border-radius: 50%; 
    border-top-color: #4CAF50; 
    animation: spin 1s ease-in-out infinite; 
    margin-bottom: 15px; 
}

.loading-text { 
    color: white; 
    font-size: 14px; 
    font-weight: bold; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); 
}

/* Setup Overlay (Specific for account verification) */
#setup-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.95); 
    z-index: 9999; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    color: white; 
    text-align: center; 
}

.setup-spinner { 
    border: 4px solid #333; 
    border-top: 4px solid #4CAF50; 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    animation: spin 1s linear infinite; 
    margin-bottom: 20px; 
}

/* --- Animations --- */
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(-20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

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