/**
 * LIVSFORMER v0.3.0 - Stylesheet
 * Retro Blender 1.x Style
 *
 * Structure:
 * 1. Reset & Base
 * 2. Menu & Toolbar
 * 3. Main Layout
 * 4. Panels
 * 5. Viewport
 * 6. Console & Timeline
 * 7. Statusbar
 * 8. Scrollbar
 * 9. Components
 */

/* ==================== RETRO BLENDER 1.x STYLE ==================== */
*{margin:0;padding:0;box-sizing:border-box}
@font-face{font-family:'B1';src:local('Courier New'),local('monospace')}
body{background:#606068;overflow:hidden;font-family:'B1',monospace;font-size:11px;color:#000;image-rendering:pixelated}
#app{display:flex;flex-direction:column;height:100vh;width:100vw}
/* MENYBAR - Classic grey */
#menubar{background:#a0a0a0;border-bottom:2px solid #000;border-top:1px solid #d0d0d0;height:22px;display:flex;align-items:center;padding:0 2px}
.menu-item{padding:2px 12px;color:#000;cursor:pointer;font-size:11px;border:1px solid transparent}
.menu-item:hover{background:#c0c0c0;border:1px outset #fff}
.menu-item:active{border:1px inset #808080}
/* TULBAR - Sunken toolbar */
#toolbar{background:#808088;border-bottom:2px solid #404048;border-top:1px solid #a0a0a8;height:26px;display:flex;align-items:center;padding:0 4px;gap:1px}
.tool-btn{min-width:28px;height:20px;background:#909098;border:2px outset #c0c0c8;color:#000;font-size:10px;cursor:pointer;padding:0 4px;font-family:inherit}
.tool-btn:hover{background:#a0a0a8}
.tool-btn:active,.tool-btn.active{border:2px inset #606068;background:#707078}
.tool-sep{width:2px;height:18px;background:#505058;border-right:1px solid #a0a0a8;margin:0 3px}
/* MAIN */
#main{display:flex;flex:1;overflow:hidden}
/* VÄNSTER PANEL - Sunken look */
#left-panel{width:190px;background:#707078;border-right:2px solid #404048;display:flex;flex-direction:column}
.panel-header{background:#909098;padding:2px 4px;border:1px outset #b0b0b8;border-bottom:2px solid #404048;font-size:10px;color:#000;font-weight:bold;text-transform:uppercase}
.panel-content{padding:3px;flex:1;overflow-y:auto;background:#606068;border:2px inset #404048}
.panel-row{display:flex;align-items:center;margin:1px 0;gap:3px}
.panel-label{color:#000;font-size:10px;width:52px}
.panel-value{color:#00ff00;font-size:10px;background:#202028;padding:1px 3px;border:1px inset #404048}
.panel-btn{background:#909098;border:2px outset #c0c0c8;color:#000;padding:2px 6px;font-size:10px;cursor:pointer;font-family:inherit}
.panel-btn:hover{background:#a0a0a8}
.panel-btn:active{border:2px inset #606068}
/* VJUPORT */
#viewport-container{flex:1;display:flex;flex-direction:column;background:#404048}
#viewport-header{background:#808088;height:18px;border:1px outset #a0a0a8;display:flex;align-items:center;padding:0 4px;font-size:10px;color:#000}
#viewport-header span{margin-right:10px}
#viewport{flex:1;position:relative;background:#303038;border:3px inset #505058}
#viewport canvas{display:block}
#viewport-info{position:absolute;bottom:2px;left:4px;font-size:10px;color:#608060;font-family:monospace}
#viewport-stats{position:absolute;top:2px;right:4px;font-size:10px;color:#608060;text-align:right;font-family:monospace}
/* HÖGER PANEL */
#right-panel{width:160px;background:#707078;border-left:2px solid #404048;display:flex;flex-direction:column}
/* BOTTEN PANEL */
#bottom-panel{height:95px;background:#606068;border-top:2px solid #404048;display:flex}
#console{flex:1;background:#000008;border:3px inset #404048;margin:3px;padding:3px;font-size:10px;color:#00ff00;overflow-y:auto;font-family:monospace}
#console div{margin:0}
.log-info{color:#00cc00}
.log-warn{color:#cccc00}
.log-event{color:#00cccc}
.log-kill{color:#cc4444}
#timeline{width:200px;background:#707078;border-left:2px solid #404048;padding:4px}
#timeline-label{font-size:10px;color:#000;margin-bottom:4px}
#timeline-bar{height:14px;background:#000;border:2px inset #404048;position:relative}
#timeline-pos{position:absolute;top:0;left:0;height:100%;background:#4080c0;width:0%}
/* STATUSBAR */
#statusbar{background:#a0a0a0;border-top:2px outset #c0c0c0;height:20px;display:flex;align-items:center;padding:0 6px;font-size:10px;color:#000}
#statusbar span{margin-right:15px}
.status-val{color:#000080}
/* SCROLLBAR - Old style */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:#606068;border:1px inset #404048}
::-webkit-scrollbar-thumb{background:#909098;border:2px outset #c0c0c8}
::-webkit-scrollbar-thumb:hover{background:#a0a0a8}
::-webkit-scrollbar-button{background:#808088;border:1px outset #a0a0a8;height:14px}
/* ORGANISM LIST */
.org-item{padding:2px 4px;border:1px solid #505058;cursor:pointer;margin:1px 0;font-size:10px;display:flex;justify-content:space-between;align-items:center;background:#505058}
.org-item:hover{background:#606068;border-color:#808088}
.org-item.selected{background:#4060a0;color:#fff;border-color:#80a0c0}
.org-color{width:10px;height:10px;border:1px solid #000}
/* PROP GRID */
.prop-grid{display:grid;grid-template-columns:52px 1fr;gap:1px;font-size:10px}
.prop-grid label{color:#000;padding:1px 3px;background:#808088}
.prop-grid span{color:#00ff00;padding:1px 3px;background:#202028;border:1px inset #101018}
/* CHECKBOX RETRO */
input[type="checkbox"]{width:13px;height:13px;accent-color:#4080c0}