/* Global resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* html */
html,
body {
    height: 100%;
    width: 100%;
}

/* body > .app */
.app {
    height: 100vh;
    background-color: #2c2c2c;
    /* border: 1px solid #444444; */
    color: whitesmoke;
    display: flex;
}

/* .app > main */
main {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
}

/* main > aside.left-panel */
aside {
    width: 250px;
    height: 100%;
    /* background-color: red; */
}

/* aside.left-panel > :nth-child(n) */
.left-panel > :nth-child(n) {
    padding: 1rem 1.25rem;
    border-bottom: 2px dotted #444444;
}

/* aside.left-panel > .logo > svg */
.logo > svg {
    width: 40%;
}

/* aside.left-panel > .logo */
.logo {
    display: flex;
    gap: .2rem;
}

/* aside.left-panel > .logo > h1 */
h1 {
    font-family: 'LED Dot-Matrix', sans-serif;
    font-weight: lighter;
    font-size: 1.5rem;
}

/* aside.left-panel > .elements > h3, aside.left-panel > .layers > h3, aside.right-panel > .save-export > h3, aside.right-panel > .properties > h3 */
h3 {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .075rem;
    color: #ffffff;
    margin-bottom: 12px;
}

/* aside.left-panel > .elements > button */
.elements button,
.layer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: .75rem .5rem;
    margin-bottom: .5rem;
    background: rgba(28, 31, 40, 0.575);
    border: 1px solid #444444;
    border-radius: 6px;
    color: #e5e7eb;
    font-size: .75rem;
    letter-spacing: .1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* aside.left-panel > .elements > button:hover, aside.right-panel > .save-export > button:hover */
.elements button:hover,
.save-export button:hover {
    border-color: aqua;
    background: rgb(68, 72, 86);
}

/* aside.left-panel > .layers > ul > .layer-item (dynamic) */
.layer-item {
    text-transform: capitalize
}

.layer-item.dragging {
    opacity: 0.4;
}

.layer-item.drag-over {
    border-color: aqua;
    cursor: grabbing;
    border-top: 2px solid #3b82f6;
}

.layer-item.selected {
    background: aqua;
    color: #111;
    font-weight: 600;
}

.layer-item.drag-over {
    border-top: 2px solid #3b82f6;
}

.layer-item::first-letter {
    margin-right: 10px;
}

/* main > section.canvas-panel */
section {
    padding: .75rem;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background-color: #e0e0e0;
    position: relative;
}

/* section.canvas-panel > .design-canvas */
.design-canvas {
    width: 100%;
    height: 100%;
    color: #111;
    border: 2px dotted black;
    height: 100%;
    border-radius: 10px;
}

/* main > aside.right-panel */
.right-panel > :nth-child(n) {
    padding: 1rem 1.25rem;
    border-bottom: 2px dotted #444444;
}

/* aside.right-panel > .save-export */
.save-export {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

/* aside.right-panel > .save-export > button */
.save-export button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: .75rem .5rem;
    background: rgba(28, 31, 40, 0.575);
    border: 1px solid #444444;
    border-radius: 6px;
    color: #e5e7eb;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* aside.right-panel > .save-export > button:last-child */
.save-export button:last-child {
    background: rgb(0, 255, 255);
    color: #2c2c2c;
}

/* aside.right-panel > .save-export > button:last-child:hover */
.save-export button:last-child:hover {
    background: rgba(0, 255, 255, 0.656);
    color: whitesmoke;
}

/* aside.right-panel > .properties > .no-selection */
.no-selection {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* aside.right-panel > .properties > .props-content */
.props-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* .props-content > .prop-group */
.prop-group {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* .prop-group > .prop-label */
.prop-label {
    font-size: 1rem;
    color: #9ca3af;
}

/* .prop-group > .prop-row */
.prop-row {
    display: flex;
    gap: .5rem;
}

/* .prop-row > .prop-field */
.prop-field {
    display: flex;
    flex: 1;
    background: rgba(28, 31, 40, 0.575);
    gap: .1rem;
    align-items: center;
    border-radius: 6px;
    /* justify-content: center; */
}

/* .prop-field > .prop-input */
.prop-input {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: .25rem;
    color: #e5e7eb;
    /* font-size: 13px; */
    padding: .25rem .5rem;
    outline: none;
    width: 100%;
}

/* input[type=number] (global for number inputs) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* .prop-group > input.prop-color */
.prop-color {
    width: 100%;
    height: 2rem;
    border: none;
    cursor: pointer;
    background: transparent;
}

/* .prop-group > input#prop-text */
#prop-text {
    margin-top: .25rem;
    background: rgb(28, 31, 40, 0.575);
    border-radius: .5rem;
}

/* Dynamic elements added to .design-canvas */
.design-element {
    position: absolute;
    cursor: move; /* Default drag cursor (Requirement 29) */
    transition: box-shadow 0.1s ease;
    transform-origin: center center;
    user-select: none;
}

.design-element[data-type="text"] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
}

.resize-handle,
.rotate-handle {
    pointer-events: all;
}

.design-element[contenteditable="true"] .resize-handle,
.design-element[contenteditable="true"] .rotate-handle {
    pointer-events: none;
}

/* Selected Element (Requirement 20) */
.design-element.selected {
    outline: 2px solid black; /* ← visible border */
    outline-style: dashed;
    outline-offset: -2px;
}

.design-element[data-type="text"].selected {
    outline: 2px solid black; /* ← visible border */
    outline-style: dashed;
    outline-offset: -2px;
}

/* Resize Handles (Requirement 21, 34) */
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #111;
    border: 1px solid white;
    z-index: 1000; /* Ensure handles are on top */
}

.design-element:not(.selected) .resize-handle {
    display: none; /* Hide handles when not selected */
}

/* Corner positions */
.handle-tl { top: -5px; left: -5px; cursor: nwse-resize; }
.handle-tr { top: -5px; right: -5px; cursor: nesw-resize; }
.handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; }

.rotate-handle {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: rgb(2, 2, 2);
    border-radius: 50%;
    cursor: grab;
    border: 2px solid #111;
}

.design-element:not(.selected) .rotate-handle {
    display: none;
}