/* ═══════════════════════════════════════════
   Endotek 3D Editor — Dark Professional Theme
   ═══════════════════════════════════════════ */

:root {
    --bg-dark: #1a1a2e;
    --bg-panel: #16213e;
    --bg-input: #0f3460;
    --bg-hover: #1a3a6a;
    --bg-active: #e94560;
    --text: #e0e0e0;
    --text-dim: #8892a4;
    --text-bright: #ffffff;
    --accent: #e94560;
    --accent2: #0ea5e9;
    --accent3: #22c55e;
    --border: #2a2a4a;
    --gizmo-x: #ff4466;
    --gizmo-y: #44ff66;
    --gizmo-z: #4488ff;
    --radius: 6px;
    --toolbar-h: 44px;
    --status-h: 28px;
    --panel-w: 280px;
    --font: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg-dark); }

/* ══════ TOOLBAR ══════ */
#toolbar {
    height: var(--toolbar-h);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    gap: 8px;
    z-index: 100;
}
.tb-left, .tb-center, .tb-right { display: flex; align-items: center; gap: 4px; }
.tb-logo { font-weight: 700; font-size: 15px; color: var(--accent); letter-spacing: -0.5px; display: flex; align-items: center; gap: 6px; }
.tb-logo i { font-size: 18px; }
.tb-sep { width: 1px; height: 24px; background: var(--border); margin: 0 6px; }
.tb-btn {
    width: 34px; height: 34px; border: none; background: transparent; color: var(--text-dim);
    border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: all 0.15s;
}
.tb-btn:hover { background: var(--bg-hover); color: var(--text-bright); }
.tb-btn.active { background: var(--accent); color: #fff; }
.tb-btn.toggled { background: var(--bg-input); color: var(--accent2); }
.tb-select {
    height: 28px; background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0 8px; font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}

/* ══════ MAIN LAYOUT ══════ */
#mainLayout {
    display: flex;
    height: calc(100vh - var(--toolbar-h) - var(--status-h));
}

/* ══════ PANELS ══════ */
#panelLeft, #panelRight {
    width: var(--panel-w);
    min-width: var(--panel-w);
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
#panelRight { border-right: none; border-left: 1px solid var(--border); }

#panelLeft::-webkit-scrollbar, #panelRight::-webkit-scrollbar { width: 5px; }
#panelLeft::-webkit-scrollbar-track, #panelRight::-webkit-scrollbar-track { background: transparent; }
#panelLeft::-webkit-scrollbar-thumb, #panelRight::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; font-weight: 600; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-dim); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--bg-panel); z-index: 2;
}
.panel-header i { margin-right: 6px; font-size: 11px; }
.panel-actions { display: flex; gap: 2px; }
.panel-btn {
    width: 26px; height: 26px; border: none; background: transparent; color: var(--text-dim);
    border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: all 0.15s;
}
.panel-btn:hover { background: var(--bg-hover); color: var(--accent2); }

.panel-section { border-bottom: 1px solid var(--border); }

/* ══════ REFERENCE IMAGE ══════ */
#refContainer {
    position: relative; aspect-ratio: 4/3; background: #0d1117;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-bottom: 1px solid var(--border);
}
#refPlaceholder {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-dim); font-size: 12px; text-align: center;
}
#refPlaceholder i { font-size: 36px; opacity: 0.3; }
#refImage { width: 100%; height: 100%; object-fit: contain; }
#refOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#refControls { padding: 8px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#refControls label { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; flex: 1; }
#refControls input[type="range"] { flex: 1; height: 4px; accent-color: var(--accent2); }

.btn-sm {
    height: 26px; padding: 0 10px; border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text); border-radius: var(--radius); cursor: pointer; font-size: 11px;
    display: flex; align-items: center; gap: 4px; transition: all 0.15s;
}
.btn-sm:hover { border-color: var(--accent2); color: var(--accent2); }
.btn-sm.btn-danger:hover { border-color: var(--accent); color: var(--accent); }

/* ══════ SCENE TREE ══════ */
#sceneTree { max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.tree-item {
    display: flex; align-items: center; gap: 6px; padding: 5px 12px;
    cursor: pointer; font-size: 12px; transition: background 0.1s;
    border-left: 3px solid transparent;
}
.tree-item:hover { background: var(--bg-hover); }
.tree-item.selected { background: rgba(233,69,96,0.15); border-left-color: var(--accent); color: var(--text-bright); }
.tree-item.selected-secondary { background: rgba(14,165,233,0.15); border-left-color: var(--accent2); }
.tree-item i { font-size: 11px; color: var(--text-dim); width: 14px; text-align: center; }
.tree-item .tree-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-item .tree-vis { opacity: 0.4; font-size: 10px; }
.tree-item .tree-vis:hover { opacity: 1; }
.tree-item .tree-vis.hidden { color: var(--accent); }

/* ══════ PROPERTIES ══════ */
.props-empty { padding: 16px 12px; color: var(--text-dim); font-size: 12px; text-align: center; font-style: italic; }
.prop-row {
    display: flex; align-items: center; padding: 4px 12px; gap: 8px;
}
.prop-row label { font-size: 11px; color: var(--text-dim); min-width: 56px; text-transform: uppercase; letter-spacing: 0.3px; }
.prop-row input[type="number"] {
    flex: 1; height: 26px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-bright); padding: 0 6px;
    font-family: var(--font-mono); font-size: 11px; text-align: right;
}
.prop-row input[type="number"]:focus { border-color: var(--accent2); outline: none; }
.prop-row input[type="text"] {
    flex: 1; height: 26px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-bright); padding: 0 8px; font-size: 12px;
}
.prop-row input[type="text"]:focus { border-color: var(--accent2); outline: none; }
.prop-row input[type="color"] { width: 32px; height: 26px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: transparent; }
.prop-row input[type="range"] { flex: 1; height: 4px; accent-color: var(--accent2); }
.prop-row input[type="checkbox"] { accent-color: var(--accent2); }

.prop-group-title {
    padding: 6px 12px 2px; font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--accent2);
}
.prop-xyz { display: flex; gap: 2px; flex: 1; align-items: center; }
.prop-xyz input { width: 100%; min-width: 50px; }
.prop-xyz .lbl-x { color: var(--gizmo-x); font-size: 10px; font-weight: 600; min-width: 12px; }
.prop-xyz .lbl-y { color: var(--gizmo-y); font-size: 10px; font-weight: 600; min-width: 12px; }
.prop-xyz .lbl-z { color: var(--gizmo-z); font-size: 10px; font-weight: 600; min-width: 12px; }

/* ══════ BOOLEAN PANEL ══════ */
.bool-buttons { display: flex; gap: 4px; padding: 8px 12px; }
.btn-bool {
    flex: 1; height: 30px; border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text); border-radius: var(--radius); cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center; gap: 4px; transition: all 0.15s;
}
.btn-bool:hover { border-color: var(--accent); color: var(--accent); }
.btn-bool[data-op="union"]:hover { border-color: var(--accent3); color: var(--accent3); }
.btn-bool[data-op="intersect"]:hover { border-color: var(--accent2); color: var(--accent2); }

/* ══════ ADD MESH DROPDOWN ══════ */
.dropdown-menu {
    position: absolute; right: 12px; top: auto; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 200; min-width: 200px;
}
.dropdown-menu button {
    display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 12px;
    border: none; background: transparent; color: var(--text); cursor: pointer;
    border-radius: 4px; font-size: 12px; text-align: left; transition: background 0.1s;
}
.dropdown-menu button:hover { background: var(--bg-hover); color: var(--text-bright); }
.dropdown-menu button i { width: 16px; text-align: center; color: var(--text-dim); }
.dropdown-menu hr { border: none; height: 1px; background: var(--border); margin: 4px 0; }

/* ══════ VIEWPORT ══════ */
#viewport {
    flex: 1; position: relative; background: #0d1117; overflow: hidden;
}
#renderCanvas {
    width: 100%; height: 100%; display: block;
}
#viewportInfo {
    position: absolute; bottom: 8px; left: 8px; display: flex; gap: 12px;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
    background: rgba(22,33,62,0.85); padding: 4px 10px; border-radius: var(--radius);
}
#viewportAxes {
    position: absolute; bottom: 8px; right: 8px; width: 80px; height: 80px;
}

/* ══════ STATUS BAR ══════ */
#statusBar {
    height: var(--status-h);
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}
#statusMsg { flex: 1; }

/* ══════ SELECTION HIGHLIGHT ══════ */
.mesh-selected { outline: 2px solid var(--accent) !important; }

/* ══════ RESPONSIVE ══════ */
@media (max-width: 1024px) {
    :root { --panel-w: 220px; }
}
@media (max-width: 768px) {
    #panelLeft { display: none; }
    :root { --panel-w: 200px; }
}