/* ============================================
   Canvas & Work Area Styles
   ============================================ */

/* Work Area */
.work-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.tabs-bar {
    display: flex;
    background: var(--bg-darkest);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    min-height: 32px;
}

.tab {
    padding: 8px 12px;
    font-size: 11px;
    background: var(--bg-dark);
    border-right: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 160px;
    min-width: 80px;
    position: relative;
}

.tab:hover { background: var(--bg-medium); }
.tab.active { background: var(--bg-medium); }
.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}

.tab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tab-close {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 14px;
    color: var(--text-dim);
    opacity: 0;
}

.tab:hover .tab-close { opacity: 1; }
.tab-close:hover { background: var(--bg-lighter); color: var(--text-primary); }

.canvas-container {
    flex: 1;
    background: var(--bg-darkest);
    background-image: 
        linear-gradient(45deg, #1e1e22 25%, transparent 25%),
        linear-gradient(-45deg, #1e1e22 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1e1e22 75%),
        linear-gradient(-45deg, transparent 75%, #1e1e22 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    overflow: scroll;
    position: relative;
}

/* Inner container - sized to always allow centering the canvas */
.canvas-scroll-area {
    position: relative;
    display: block;
}

.canvas-wrapper {
    position: absolute;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    transform-origin: center center;
}

#mainCanvas { display: block; }
#overlayCanvas { position: absolute; top: 0; left: 0; pointer-events: none; }

/* Crop Handles */
.crop-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 2px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    transform-origin: center center;
    display: none;
    pointer-events: auto; 
}

/* Individual cursors for handles */
#handle-nw { cursor: nwse-resize; }
#handle-n  { cursor: ns-resize; }
#handle-ne { cursor: nesw-resize; }
#handle-e  { cursor: ew-resize; }
#handle-se { cursor: nwse-resize; }
#handle-s  { cursor: ns-resize; }
#handle-sw { cursor: nesw-resize; }
#handle-w  { cursor: ew-resize; }