/*
 * G3AxonLive Counter Example (JScript - Procedural)
 * Copyright (C) 2026 G3pix Ltda. All rights reserved.
 *
 * Developed by Lucas Guimaraes - G3pix Ltda
 * Contact: https://g3pix.com.br
 * Project URL: https://g3pix.com.br/axonasp
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
    */
[v-cloak] {
    display: none;
}

body {
    margin: 0;
    padding: 0;
    background-color: #ECE9D8;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    color: #000;
}

.builder-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.builder-header {
    background: linear-gradient(90deg, #0A246A 0%, #3A6EA5 100%);
    color: #FFF;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 2px solid #000;
}

.builder-toolbar {
    background-color: #ECE9D8;
    padding: 5px;
    border-bottom: 1px solid #ACA899;
    display: flex;
    gap: 5px;
}

.btn-xp {
    background-color: #ECE9D8;
    border: 1px solid #FFF;
    border-right-color: #ACA899;
    border-bottom-color: #ACA899;
    padding: 3px 8px;
    font-family: Tahoma;
    font-size: 11px;
    cursor: pointer;
    color: #000;
}

.btn-xp:active {
    border: 1px solid #ACA899;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    padding: 4px 7px 2px 9px;
}

.builder-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.builder-sidebar {
    width: 200px;
    background-color: #FFF;
    border-right: 2px solid #ACA899;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    background-color: #D4D0C8;
    padding: 4px;
    font-weight: bold;
    border-bottom: 1px solid #ACA899;
}

.component-item {
    padding: 5px;
    cursor: grab;
    border-bottom: 1px dashed #E0E0E0;
    user-select: none;
}

.component-item:hover {
    background-color: #0A246A;
    color: #FFF;
}

.builder-canvas-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #808080;
    padding: 10px;
    overflow: auto;
}

.builder-canvas {
    background-color: #FFF;
    min-height: 400px;
    width: 800px;
    /* Fixed starting width, but container allows overflow */
    margin: 0 auto;
    border: 1px solid #000;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    position: relative;
    padding: 10px;
}

.canvas-element {
    border: 1px dashed #ACA899;
    padding: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative;
    min-height: 30px;
    box-sizing: border-box;
    user-select: none;
}

.canvas-element:hover {
    cursor: move;
}

.canvas-element.selected {
    border: 2px solid #0A246A;
}

/* Functional Components Bar (Visual Studio style) */
.functional-bar {
    background-color: #D4D0C8;
    border-top: 2px solid #ACA899;
    padding: 5px;
    display: flex;
    gap: 10px;
    min-height: 60px;
    overflow-x: auto;
}

.functional-item {
    background-color: #FFFFCC;
    border: 1px solid #CC9900;
    padding: 5px 10px;
    min-width: 100px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.functional-item.selected {
    border: 2px solid #0A246A;
    background-color: #FFF;
}

.functional-item.script {
    background-color: #E1F5FE;
    border-color: #039BE5;
}

.functional-item.style {
    background-color: #F3E5F5;
    border-color: #7B1FA2;
}

.functional-item.timer {
    background-color: #FFF9C4;
    border-color: #FBC02D;
}

.functional-item.hiddenfield {
    background-color: #E8F5E9;
    border-color: #388E3C;
}

/* Code Pane States */
.builder-code-pane {
    height: 200px;
    background-color: #FFF;
    border-top: 2px solid #ACA899;
    display: flex;
    flex-direction: column;
    transition: height 0.3s;
}

.builder-code-pane.maximized {
    height: 600px;
}

.builder-code-pane.hidden {
    height: 30px;
}

.builder-code-pane.hidden .code-area {
    display: none;
}

.code-header {
    background-color: #D4D0C8;
    padding: 4px;
    font-weight: bold;
    border-bottom: 1px solid #ACA899;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-toggle-pane {
    cursor: pointer;
    font-size: 14px;
    padding: 0 5px;
    border: 1px solid transparent;
}

.btn-toggle-pane:hover {
    background: #0A246A;
    color: #FFF;
}

.code-area {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    border: none;
    resize: none;
    padding: 5px;
    background-color: #F8F8F8;
    color: #333;
}

.code-pre-wrap {
    overflow: auto;
    padding: 0;
}

.code-pre-wrap pre {
    margin: 0;
    padding: 8px;
    min-height: 100%;
    white-space: pre;
}

.code-pre-wrap code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.4;
}

.timer-component {
    background-color: #FFFFCC;
    border: 1px solid #CC9900;
    color: #CC9900;
    text-align: center;
    font-style: italic;
    font-weight: bold;
}

.empty-canvas {
    color: #ACA899;
    text-align: center;
    margin-top: 50px;
    font-style: italic;
}

.selected-cell {
    border: 2px solid #0A246A !important;
    background: rgba(10, 36, 106, 0.1);
}

hr {
    border: 0;
    border-top: 1px solid #000;
    margin: 10px 0;
    width: 100%;
}

/* Resize Handles */
.resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #0A246A;
    border: 1px solid #FFF;
    z-index: 100;
}

.handle-se {
    bottom: -5px;
    right: -5px;
    cursor: nwse-resize;
}

.handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: nesw-resize;
}

.handle-ne {
    top: -5px;
    right: -5px;
    cursor: nesw-resize;
}

.handle-nw {
    top: -5px;
    left: -5px;
    cursor: nwse-resize;
}

.handle-e {
    top: 50%;
    right: -5px;
    margin-top: -4px;
    cursor: e-resize;
}

.handle-w {
    top: 50%;
    left: -5px;
    margin-top: -4px;
    cursor: w-resize;
}

.handle-s {
    bottom: -5px;
    left: 50%;
    margin-left: -4px;
    cursor: s-resize;
}

.handle-n {
    top: -5px;
    left: 50%;
    margin-left: -4px;
    cursor: n-resize;
}

.builder-properties {
    width: 250px;
    background-color: #ECE9D8;
    border-left: 2px solid #ACA899;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.prop-group {
    padding: 5px;
    border-bottom: 1px solid #ACA899;
}

.prop-label {
    display: block;
    font-weight: bold;
    margin-bottom: 2px;
}

.prop-input {
    width: 100%;
    box-sizing: border-box;
    font-family: Tahoma;
    font-size: 11px;
    border: 1px solid #7F9DB9;
    padding: 2px;
}

.prop-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 11px;
    border: 1px solid #7F9DB9;
    min-height: 80px;
    resize: vertical;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: #FFF;
    border: 1px solid #ACA899;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    min-width: 150px;
    padding: 2px 0;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
}

.context-menu-item {
    padding: 4px 20px;
    cursor: pointer;
}

.context-menu-item:hover {
    background: #0A246A;
    color: #FFF;
}

.context-menu-divider {
    height: 1px;
    background: #ACA899;
    margin: 2px 0;
}