:root {
    --bg-dark: #1d2021; --bg-panel: #282828; --text-main: #ebdbb2; --text-muted: #a89984;
    --accent: #d65d0e; --canvas-bg: #fbf1c7;
}
* { box-sizing: border-box; }
body {
    margin: 0; padding: 0; background-color: var(--bg-dark); color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; height: 100vh; overflow: hidden;
}
#app-container { display: flex; width: 100%; height: 100%; flex-direction: row; }

/* Lightroom Style Horizontal Scrolling Tabs */
#module-tabs {
    display: flex; background: #1d2021; border-bottom: 1px solid #3c3836; 
    overflow-x: auto; white-space: nowrap; padding: 0 10px; min-height: 55px; 
    align-items: center; scrollbar-width: thin; scrollbar-color: #504945 #1d2021;
}
#module-tabs::-webkit-scrollbar { height: 6px; }
#module-tabs::-webkit-scrollbar-thumb { background: #504945; border-radius: 3px; }
#module-tabs::-webkit-scrollbar-track { background: #1d2021; }

.module-tab {
    padding: 12px 15px; background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 0.85rem; font-weight: bold; border-bottom: 2px solid transparent;
}
.module-tab.active { color: #fe8019; border-bottom-color: #fe8019; background: #282828; }

#toolbar {
    width: 340px; flex-shrink: 0; background-color: var(--bg-panel);
    display: flex; flex-direction: column; border-right: 1px solid #3c3836;
}
.module-panel {
    padding: 20px; overflow-y: auto; flex-grow: 1; display: none; -webkit-overflow-scrolling: touch;
}
.module-panel.active { display: flex; flex-direction: column; gap: 15px; }

h2, h3 { margin: 0 0 10px 0; color: #fe8019; font-size: 1.1rem; }
button {
    width: 100%; padding: 10px; background-color: #504945; color: var(--text-main);
    border: none; border-radius: 4px; font-size: 0.95rem; cursor: pointer; transition: background 0.2s;
}
button:hover { background-color: #665c54; }
button.primary { background-color: var(--accent); color: #282828; font-weight: bold; }
button.active-tool { border: 2px solid var(--accent); background: #3c3836; }

input[type="number"], input[type="text"], select {
    background: #3c3836; color: #ebdbb2; border: 1px solid #504945; padding: 7px; border-radius: 4px; width: 100%;
}
input[type="checkbox"], input[type="radio"] { cursor: pointer; width: 16px; height: 16px; }

#design-area {
    flex-grow: 1; display: flex; justify-content: center; align-items: center;
    background-color: #32302f; position: relative; overflow: hidden;
}
#canvas-wrapper {
    touch-action: none; display: flex; justify-content: center; align-items: center;
    width: 100%; height: 100%; overflow: auto; padding: 20px;
}
.canvas-container {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: inline-flex;
    transform-origin: center center; transition: transform 0.1s ease-out;
}
canvas { background-color: var(--canvas-bg); display: block; cursor: crosshair; }

/* Zoom Controls */
#zoom-controls {
    position: absolute; bottom: 20px; right: 20px; display: flex; gap: 5px;
    background: #282828; padding: 5px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
#zoom-controls button { width: 40px; margin: 0; padding: 5px; font-size: 16px; font-weight: bold; }

/* Swatches & Thumbnails */
.thumbnail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 5px; }
.thumb-card {
    background: #3c3836; border: 2px solid #504945; border-radius: 6px; padding: 8px; text-align: center; cursor: pointer;
}
.thumb-card.active { border-color: #fe8019; }
.thumb-card canvas { width: 100%; height: 60px; background: #fbf1c7; margin-bottom: 5px; }

#swatch-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.swatch-item {
    position: relative; width: 50px; height: 50px; border: 2px solid var(--text-muted); border-radius: 4px; cursor: pointer;
}
.swatch-item.active { border-color: var(--accent); }
.delete-btn, .edit-btn {
    position: absolute; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; font-weight: bold; cursor: pointer; display: none; padding: 0;
}
.delete-btn { top: -5px; right: -5px; background: #cc241d; color: white; }
.edit-btn { top: -5px; left: -5px; background: #d79921; color: #282828; }
.swatch-item:hover .delete-btn, .swatch-item:hover .edit-btn { display: block; }

.modal-overlay {
    position: fixed; inset: 0; background: var(--bg-dark); display: none; flex-direction: row; z-index: 1000;
}
.designer-sidebar { width: 300px; background: var(--bg-panel); padding: 20px; display: flex; flex-direction: column; gap: 15px; border-right: 1px solid #504945; overflow-y: auto; }
.designer-workspace { flex-grow: 1; display: flex; justify-content: center; align-items: center; background: #32302f; }

/* Project Management Thumbnail Cards */
#project-gallery {
    display: grid; 
    grid-template-rows: repeat(2, 1fr); 
    grid-auto-columns: minmax(110px, 1fr); 
    grid-auto-flow: column; 
    gap: 10px; 
    overflow-x: auto; 
    padding: 12px; 
    background: #282828; 
    border: 1px solid #3c3836; 
    border-radius: 6px; 
    margin-bottom: 20px; 
    min-height: 245px; /* Locks height to prevent jumping */
    align-content: start;
    scrollbar-width: thin; scrollbar-color: #504945 #1d2021;
}
#project-gallery::-webkit-scrollbar { height: 6px; }
#project-gallery::-webkit-scrollbar-thumb { background: #504945; border-radius: 3px; }

.project-card {
    background: #3c3836; border: 2px solid #504945; border-radius: 6px; padding: 8px;
    display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative;
    transition: border-color 0.2s; min-width: 110px; height: 100px;
}
.project-card:hover { border-color: #8ec07c; }
.project-card img { width: 100%; height: 60px; object-fit: contain; background: #fbf1c7; margin-bottom: 5px; border-radius: 2px; }
.project-card .proj-name { font-size: 0.7rem; color: #ebdbb2; text-align: center; word-break: break-all; }
.project-card .delete-proj-btn {
    position: absolute; top: -8px; right: -8px; background: #cc241d; color: white; border: none; border-radius: 50%;
    width: 24px; height: 24px; font-size: 14px; font-weight:bold; cursor: pointer; display: none; padding: 0;
}
.project-card:hover .delete-proj-btn { display: block; }

/* Palette Containers */
.palette-gallery {
    display: flex; flex-wrap: wrap; gap: 6px; background: #282828; 
    padding: 8px; border: 1px solid #3c3836; border-radius: 4px; 
    min-height: 52px; margin-bottom: 15px; align-content: start;
}




/* Drag and Drop Swatch Styling */
.swatch-item { cursor: grab; }
.swatch-item:active { cursor: grabbing; }
.swatch-item.dragging { opacity: 0.5; transform: scale(0.95); }


/* Dirty State (Unsaved Changes) Indicator */
.project-dirty-glow { border: 1px solid #fe8019 !important; box-shadow: 0 0 5px #fe8019; }

/* Update/Discard Modal */
.dialogue-box {
    background: var(--bg-panel); padding: 25px; border-radius: 8px; 
    border: 2px solid #504945; max-width: 400px; text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
}
.dialogue-box h3 { color: #cc241d; font-size: 1.4rem; margin-bottom: 10px; }
.dialogue-box p { margin-bottom: 20px; font-size: 0.95rem; color: #ebdbb2; }
.dialogue-btns { display: flex; gap: 10px; justify-content: center; }