body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(77,77,77,1) 35%, rgba(62,62,62,1) 100%);
    color: white;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-content .logo {
    font-size: 1rem;
    font-weight: bold;
}

.header-content .welcome-message {
    font-size: 0.9rem;
}
/* Menu Dropdown Styles */
.menu-dropdown {
    position: relative;
    display: inline-block;
    margin-left: 20px;
}

.menu-button {
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.menu-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.menu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #2c2c2c;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 1001;
    border-radius: 4px;
    margin-top: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease;
}

.menu-dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-dropdown-content a:first-child {
    border-radius: 4px 4px 0 0;
}

.menu-dropdown-content a:last-child {
    border-radius: 0 0 4px 4px;
}

.menu-dropdown-content img {
    width: 20px;
    height: 20px;
}

.menu-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 5px 0;
}

.menu-dropdown.show .menu-dropdown-content {
    display: block;
}
.profile-menu {
    position: relative;
    display: inline-block;
}

.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    min-width: 160px;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

.main-container {
    display: flex;
    flex: 1;
}

.toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #777;
    padding: 10px;
    width: 5%;
    transition: width 0.3s;
    height: calc(100vh - 60px); /* Adjusted to account for header */
    position: relative; /* Add this to contain the submenu */
}

.toolbar button, .toolbar input {
    background-color: #414141;
    border: none;
    color: white;
    padding: 10px;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    min-width: 40px;
    min-height: 40px;
}

.toolbar button img {
    width: 24px;
    height: 24px;
}

.toolbar button:hover, .toolbar input:hover {
    background-color: #45a049;
}

.toolbar button:active, .toolbar input:active {
    transform: scale(0.95);
}

.toolbar button.active {
    background-color: #2E7D32;
}
.canvas-container {
    overflow: hidden !important;
    flex: 1;
    width: 80%; /* Updated to take 80% of the width */
    border: 2px solid #ccc;
    background-color: #f5f5f5;
    box-shadow: 0 4px 8px rgba(151, 150, 150, 0.382);
    overflow: hidden; /* Ensure content doesn't overflow */
    position: relative; /* Necessary for proper positioning of the canvas */

}

#canvas {
    
    position: absolute; /* Necessary for proper positioning when scaled */
    transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
    cursor: grab;
    /*width: 100%;
    height: 100%;
    background-color: transparent;  Add this line */
}

#canvas.dragging {
    cursor: grabbing;
}

.properties-panel {
    width: 15%;
    padding: 10px;
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: calc(100vh - 60px); /* Adjusted to account for header */
    overflow-y: auto;
    border-left: 1px solid #dee2e6;
}

.properties-panel h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.properties-panel label {
    margin-top: 10px;
    font-size: 1rem;
}

.properties-panel input[type="number"],
.properties-panel input[type="color"] {
    width: 80%;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.properties-panel .dropdown {
    width: 100%;
    margin-bottom: 10px;
}

.properties-panel .dropdown-toggle {
    width: 100%;
    background: white;
    color: #495057;
    border: 1px solid #ced4da;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
    border-radius: 5px;
    outline: none;
}

.properties-panel .dropdown-content {
    display: none; /* Initially hidden */
    background: white;
    padding: 15px;
    margin-top: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.properties-panel .dropdown-toggle.active + .dropdown-content {
    display: block; /* Show when the toggle is active */
}

.pulldown-content {
    display: none;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
.properties-panel .dropdown-toggle:hover {
    background-color: #667eea;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.dropdown-toggle.active + .pulldown-content {
    display: block;
}

.selected-text {
    border: 2px solid red;
    box-sizing: border-box;
}

#layer-list {
    height: 100px;
    width: 100%;
    overflow-y: auto;
    border-top: 5px solid rgb(4, 4, 4);
}

/* styles.css */
.highlight {
    background-color: yellow;
}

button#dinamo-tool {
    background-color: #414141;
    color: white;
}

button#dinamo-tool.active-gravity {
    background-color: darkgreen;
    color: white;
}

.swatch {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
}

#mass-slider {
    width: 100%;
}

#restitution-slider {
    width: 100%;
}

#color-picker {
    height: 48px;
    padding: 0;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    background-color: #4CAF50;
}

.auth-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.auth-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.auth-container form {
    display: flex;
    flex-direction: column;
}

.auth-container label {
    margin-bottom: 5px;
    font-size: 1rem;
}

.auth-container input {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.auth-container button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

.auth-container button:hover {
    background-color: #45a049;
}

.auth-container p {
    text-align: center;
}

.auth-container a {
    color: #4CAF50;
    text-decoration: none;
}

.auth-container a:hover {
    text-decoration: underline;
}

/* Specific styles for the shape select content */
.shape-select-content {
    position: absolute;
    left: 100%; /* Position to the right of the toolbar */
    top: 0;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    min-width: 160px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: none;
    margin-left: 4px;
    padding: 5px;
}

.shape-select-content button {
     display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background-color: #414141;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s ease;
    text-align: left;
    margin: 2px 0;
    border-radius: 5px;
}
.shape-select-content button:hover,
.shape-select-content button.hover-active {
    background-color: #45a049 !important;
}

.shape-select-content button:active {
    transform: scale(0.95);
}

.shape-select-content button img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

/* Ensure shape tool button matches other toolbar buttons */
#shape-tool {
    position: relative;
}

/* Animation for shape select content */
.shape-select-content {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.shape-select-content.show {
    opacity: 1;
    transform: translateX(0);
    display: block;
}

/* Prevent text selection during drag */
#shape-tool {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.show {
    display: block;
}
button#shape-tool.active {
    background-color: darkgreen;
}
.properties-panel input[type="color"] {
    width: 80%;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.properties-panel input[type="range"] {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
}

.properties-panel button {
    background: #667eea;
    color: white;
    border: none;
    padding: 10px;
    margin: 5px 0;
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    transition: all 0.2s;
}

.properties-panel button:hover {
    background: #764ba2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

.properties-panel button:active {
    transform: scale(0.95);
}

.canvas-container {
    /* Ensure the canvas container has the necessary styles for transformation */
    transition: transform 0.3s ease;
}
.properties-panel input[type="number"],
.properties-panel input[type="color"],
.properties-panel input[type="range"] {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s;
}
.properties-panel input[type="number"]:focus,
.properties-panel input[type="color"]:focus {
    border-color: #667eea;
    outline: none;
}
/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 60px;
    height: 30px;
    margin: 10px; /* Adjust the 20px value to your desired spacing */
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    position: absolute;
    cursor: pointer;
    background-color: #1f1a1a;
    border-radius: 30px;
    width: 60px;
    height: 30px;
    transition: background-color 0.2s;
}

.toggle-label:before {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 22px;
    height: 22px;
    background-color: darkblue;
    border-radius: 50%;
    transition: transform 0.2s, background-image 0.2s ease-in-out;
    background-image: url('icons/circle.png');
    background-size: cover;
}

input:checked + .toggle-label {
    background-color: #8dbbe8;
}

input:checked + .toggle-label:before {
    transform: translateX(30px);
    background-color: rgb(95, 177, 205);
    background-image: url('icons/circle2.png');
}

.properties-panel input[type="color"],
.properties-panel input[type="range"] {
    width: 80%;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#spring-tool {
    background-color: #414141;
    color: white;
}
#spring-tool.active {
    background-color: darkgreen;
}

#brush-tool {
    background-color: #414141;
    color: white;
}

#brush-tool.active {
    background-color: darkgreen;
}

.properties-panel input[type="range"],
.properties-panel input[type="number"] {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
}

.dropdown-toggle.active + .pulldown-content {
    display: block;
}

/* Cursor styles for resize handles */
.canvas-container {
    position: relative;
}

#canvas.cursor-nw-resize { cursor: nw-resize; }
#canvas.cursor-ne-resize { cursor: ne-resize; }
#canvas.cursor-se-resize { cursor: se-resize; }
#canvas.cursor-sw-resize { cursor: sw-resize; }
#canvas.cursor-n-resize { cursor: n-resize; }
#canvas.cursor-e-resize { cursor: e-resize; }
#canvas.cursor-s-resize { cursor: s-resize; }
#canvas.cursor-w-resize { cursor: w-resize; }
#canvas.cursor-rotate { cursor: grab; }
#canvas.cursor-rotating { cursor: grabbing; }

/* Handle styles for better visibility */
.handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: white;
    border: 2px solid #2196F3;
    box-sizing: border-box;
    pointer-events: auto;
}

.handle-rotate {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background-color: white;
    border: 2px solid #2196F3;
}

/* Selection box style */
.selection-box {
    stroke: #2196F3;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    fill: none;
    pointer-events: none;
}

.canvas-container {
    overflow: hidden !important;
    position: relative;
}

#canvas.dragging {
    cursor: grabbing !important;
}

.toolbar-button {
    background: #333;
    border: 2px solid #555;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

.toolbar-button:hover {
    background: #444;
    border-color: #666;
}

.toolbar-button.active {
    background: #007acc;
    border-color: #0066aa;
}

/* Update submenu positioning */
.tool-submenu {
    position: absolute;
    left: 100%; /* Position to the right of the toolbar */
    top: 0; /* Align with the edit button */
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    min-width: 140px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: none;
    margin-left: 4px;
}

/* Ensure the submenu appears at the right position relative to edit button */
#edit-tool ~ .tool-submenu {
    top: auto;
    margin-top: 0;
}

.submenu-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s ease;
    text-align: left;
}

.submenu-button:hover {
    background: #444;
}

.submenu-button:first-child {
    border-radius: 6px 6px 0 0;
}

.submenu-button:last-child {
    border-radius: 0 0 6px 6px;
}

.submenu-button img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    opacity: 0.8;
}

.submenu-button.active {
    background: #007acc;
    color: white;
}

.submenu-button.active img {
    opacity: 1;
}

/* Pin visualization styles */
.pin-indicator {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border: 2px solid #ff4757;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
}

.pin-constraint {
    stroke: #ff6b6b;
    stroke-width: 2;
    stroke-dasharray: 3,3;
}

/* Cursor styles for pin mode */
.canvas-container.pin-mode {
    cursor: crosshair !important;
}

.canvas-container.pin-mode canvas {
    cursor: crosshair !important;
}

/* Button for clearing pins */
#clear-pins-btn {
    background: #000000;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 8px;
    transition: background 0.2s ease;
}

#clear-pins-btn:hover {
    background: #333333;
}

#clear-pins-btn:disabled {
    background: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Tool status indicator */
.tool-status {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    pointer-events: none;
    z-index: 1000;
}

.tool-status.pin-mode {
    background: rgba(255, 107, 107, 0.9);
}

/* Animation for submenu */
.tool-submenu {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tool-submenu.show {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

/* Ensure edit button matches other toolbar buttons */
#edit-tool {
    background-color: #414141;
    border: none;
    color: white;
    padding: 10px;
    margin: 5px 0;
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
}

#edit-tool img {
    width: 24px;
    height: 24px;
}

#edit-tool:hover {
    background-color: #45a049;
}

#edit-tool:active {
    transform: scale(0.95);
}

#edit-tool.active {
    background-color: #2E7D32;
}
/* Smooth transition for text editing */
input.text-editor-overlay {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px dashed rgba(0, 123, 255, 0.5);
    border-radius: 3px;
    outline: none;
    padding: 0;
    margin: 0;
    text-align: center;
    z-index: 9999;
    transition: border-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

input.text-editor-overlay:focus {
    border-color: rgba(0, 123, 255, 0.8);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Animation for text bodies when hovering with text tool */
canvas[data-tool="text"] + .text-body-hover {
    cursor: text;
}

/* Visual feedback for editable text */
.text-body-editing {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Ensure input overlays properly on different backgrounds */
@supports (backdrop-filter: blur(10px)) {
    input.text-editor-overlay {
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
    }
}

/* Submenu indicator styling */
.submenu-indicator {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #ffffff;
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
    z-index: 1;
}

.toolbar button:hover .submenu-indicator {
    opacity: 1;
    border-top-color: #ffffff;
    transform: translateY(-1px);
}

.toolbar button.active .submenu-indicator {
    border-top-color: #ffffff;
    opacity: 1;
    animation: pulse 2s infinite;
}

/* Pulsing animation for active indicators */
@keyframes pulse {
    0% { 
        transform: scale(1); 
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.1); 
        opacity: 1;
    }
    100% { 
        transform: scale(1); 
        opacity: 0.8;
    }
}

/* Enhanced toolbar button styling for submenu support */
.toolbar button {
    position: relative; /* Ensure this is set for absolute positioning of indicators */
}

/* Alternative indicator styles (optional) */
.submenu-indicator.dots {
    border: none;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ffffff 1px, transparent 1px);
    background-size: 3px 3px;
    border-radius: 50%;
    opacity: 0.7;
}

.submenu-indicator.chevron {
    border: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    opacity: 0.8;
    bottom: 4px;
    right: 4px;
}

.submenu-indicator.plus {
    border: none;
    width: 8px;
    height: 8px;
    opacity: 0.8;
}

.submenu-indicator.plus::before,
.submenu-indicator.plus::after {
    content: '';
    position: absolute;
    background-color: #ffffff;
}

.submenu-indicator.plus::before {
    width: 8px;
    height: 2px;
    top: 3px;
    left: 0;
}

.submenu-indicator.plus::after {
    width: 2px;
    height: 8px;
    top: 0;
    left: 3px;
}

/* Enhanced submenu styling */
.tool-submenu {
    opacity: 0;
    transform: translateX(-10px) translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tool-submenu.show {
    opacity: 1;
    transform: translateX(0) translateY(0);
}
/* Dark Mode Styles */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .toolbar {
    background-color: #2a2a2a;
}

body.dark-mode .properties-panel {
    background-color: #2a2a2a;
}

body.dark-mode .dropdown-toggle {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark-mode .pulldown-content {
    background-color: #3a3a3a;
    border-color: #4a4a4a;
}

body.dark-mode .layer-item {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark-mode .layer-item:hover {
    background-color: #4a4a4a;
}

body.dark-mode input[type="number"],
body.dark-mode input[type="range"],
body.dark-mode select {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #4a4a4a;
}

body.dark-mode button {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark-mode button:hover {
    background-color: #4a4a4a;
}
#reset-view-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 8px 16px;
    margin: 10px 0;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    transition: all 0.2s;
}

#reset-view-btn:hover {
    background: #764ba2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

#reset-view-btn:active {
    transform: scale(0.95);
}
.orientation-controls {
    display: flex;
    gap: 5px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.orientation-controls button {
    padding: 5px 8px !important;
    font-size: 12px !important;
    background: #667eea !important;
    color: white !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    width: auto !important;
    min-width: auto !important;
}

.orientation-controls button:hover {
    background: #764ba2 !important;
    transform: translateY(-1px) !important;
}