/* =========================================================
   ELEK. Studio — Stylesheet
   Split out from the original single-file build.
   UI/UX pass: refined palette, motion, focus states, toasts,
   scrollbars, empty states, responsive tweaks.
   ========================================================= */

:root {
    --bg-color: #0a0a0b;
    --panel-bg: #141416;
    --panel-bg-alt: #1a1a1d;
    --text-main: #f3f3f4;
    --text-dim: #9a9a9f;
    --text-faint: #66666b;
    --accent: #ff4757;
    --accent-hover: #ff6b7b;
    --accent-dim: rgba(255, 71, 87, 0.16);
    --layer-bg: #202023;
    --border-color: #2a2a2e;
    --border-color-soft: #232326;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

/* Custom scrollbars */
* { scrollbar-width: thin; scrollbar-color: #3a3a3e transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #3a3a3e; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Dropzone overlay ---------- */
#dropzone-overlay {
    position: fixed; inset: 0;
    background: radial-gradient(circle at center, rgba(255, 71, 87, 0.97), rgba(180, 20, 35, 0.97));
    color: white;
    display: flex; flex-direction: column; gap: 14px;
    justify-content: center; align-items: center;
    font-size: 2.2rem; font-weight: 800; letter-spacing: 1px;
    z-index: 100;
    opacity: 0; pointer-events: none;
    backdrop-filter: blur(6px);
    transition: opacity 0.25s var(--ease);
}
#dropzone-overlay.active { opacity: 1; }
#dropzone-overlay::before {
    content: "⬆";
    font-size: 3.5rem;
    animation: bounce 1.1s ease-in-out infinite;
}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---------- Sidebar ---------- */
#sidebar {
    flex: 0 0 420px; max-width: 420px;
    background-color: var(--panel-bg);
    padding: 24px; display: flex; flex-direction: column; gap: 18px;
    border-right: 1px solid var(--border-color);
    z-index: 10; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
    scrollbar-gutter: stable;
}
/* A bit of breathing room below the last block so content never sits flush
   against the scroll boundary, and a visible (not just hover-revealed)
   scrollbar so it's obvious the panel scrolls at all. */
#sidebar::after { content: ''; display: block; height: 4px; flex-shrink: 0; }
#sidebar::-webkit-scrollbar-thumb { background: #45454a; }
/* This is the actual fix for "the panel doesn't scroll, things get clipped
   instead": every .step has `overflow: hidden` (needed for the accordion
   collapse animation), and per the flexbox spec an overflow-hidden flex
   item's *automatic* minimum size is 0 — meaning flexbox was allowed to
   squash each step shorter than its own content to force everything into
   the sidebar's visible height, rather than actually overflowing and
   letting the scrollbar do its job. Pinning flex-shrink: 0 on every direct
   child stops that: the sidebar now grows past its box and scrolls, like
   it always should have. */
#sidebar > * { flex-shrink: 0; }

.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

h1 {
    font-size: 2.1rem; margin: 0; letter-spacing: -1.2px; font-weight: 900;
    background: linear-gradient(135deg, #ffffff 40%, var(--accent) 140%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1::after { content: ''; }

.lang-switch { display: flex; gap: 4px; background: #000; padding: 3px; border-radius: 8px; border: 1px solid var(--border-color); }
.lang-btn {
    background: transparent; border: none; color: var(--text-dim);
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.5px;
    transition: background 0.2s var(--ease-fast), color 0.2s var(--ease-fast);
}
.lang-btn:hover { color: var(--text-main); }
.lang-btn.active { background: var(--accent); color: white; }

.control-group {
    background: var(--layer-bg);
    padding: 18px; border-radius: var(--radius-md);
    border: 1px solid var(--border-color-soft);
    transition: border-color 0.25s var(--ease-fast);
}
.control-group + .control-group { margin-top: 4px; }

label {
    font-size: 0.8rem; font-weight: 700; color: #cfcfd2;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; letter-spacing: 0.2px;
}

/* A labeled control row: text (+ optional ⓘ tip) on the left, the actual
   control (switch/value) pinned to the right. Using a plain div here
   (instead of nesting a real <label> around the whole row) avoids nesting
   one <label> inside another, which is invalid HTML and was throwing off
   the flex spacing (the ⓘ icon ended up drifting into the middle of the
   row instead of sitting right next to its text). */
.field-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; font-weight: 700; color: #cfcfd2;
    margin-bottom: 10px; letter-spacing: 0.2px;
}
.field-row + .field-row { margin-top: 16px; }
.field-label { display: inline-flex; align-items: center; gap: 5px; }

input[type="number"], input[type="text"], select, button {
    width: 100%; padding: 10px 12px; margin-top: 5px; box-sizing: border-box;
    background: #0d0d0e; color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    font-size: 0.95rem; font-family: inherit;
    transition: border-color 0.2s var(--ease-fast), box-shadow 0.2s var(--ease-fast), background 0.2s var(--ease-fast);
}
input[type="number"]:hover, input[type="text"]:hover, select:hover { border-color: #555; }
input[type="number"]:focus, input[type="text"]:focus, select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

input[type="range"] {
    width: 100%; cursor: pointer; accent-color: var(--accent); margin-top: 8px;
    height: 4px;
}

.upload-btn {
    display: flex; justify-content: center; align-items: center;
    width: 100%; padding: 13px; margin-top: 5px; box-sizing: border-box;
    background: #0d0d0e; color: var(--text-main);
    border: 1.5px dashed #4a4a4e; border-radius: var(--radius-sm);
    text-align: center; cursor: pointer;
    transition: background 0.2s var(--ease-fast), border-color 0.2s var(--ease-fast), transform 0.15s var(--ease-fast), color 0.2s;
    font-weight: 600; font-size: 0.9rem;
}
.upload-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-hover); }
.upload-btn:active { transform: scale(0.98); }
.upload-btn-extra { flex: 0 0 50px; border-color: var(--accent); color: var(--accent); font-size: 1.5rem; }

button.primary {
    background: linear-gradient(135deg, var(--accent), #e8384a);
    border: none; font-weight: 700; cursor: pointer;
    transition: filter 0.2s var(--ease-fast), transform 0.15s var(--ease-fast), box-shadow 0.2s var(--ease-fast);
    padding: 15px; font-size: 1.02rem; letter-spacing: 0.2px;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.25);
}
button.primary:hover { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(255, 71, 87, 0.4); }
button.primary:active { transform: scale(0.985); }
button:disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.3); }

button.secondary {
    background: #2b2b2f; border: 1px solid #3c3c40; padding: 10px;
    font-size: 0.82rem; font-weight: 700; cursor: pointer; color: var(--text-main);
    transition: background 0.2s var(--ease-fast), border-color 0.2s var(--ease-fast), transform 0.15s;
}
button.secondary:hover { background: #38383d; border-color: #555; }
button.secondary:active { transform: scale(0.98); }
button.secondary.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-hover); }

#custom-dims { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 5px; }

/* ---------- Toggle switches ---------- */
.switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; inset: 0;
    background-color: #3a3a3e; transition: background-color 0.25s var(--ease);
    border-radius: 26px;
}
.slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: transform 0.25s var(--ease), box-shadow 0.2s;
    border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
input:checked + .slider { background-color: var(--accent); }
input:checked + .slider:before { transform: translateX(22px); }
input:disabled + .slider { opacity: 0.4; cursor: not-allowed; }

#mode-status {
    font-size: 0.72rem; padding: 9px; border-radius: var(--radius-sm); margin-top: 15px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; text-align: center;
    transition: background 0.3s var(--ease-fast), color 0.3s var(--ease-fast), border-color 0.3s;
}
.mode-grayscale { background: #2a2a2d; color: var(--text-dim); border: 1px solid transparent; }
.mode-active { background: var(--accent-dim); color: var(--accent-hover); border: 1px solid var(--accent); }

/* ---------- Layer playground ---------- */
#layer-playground { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.layer-item {
    display: flex; align-items: center; justify-content: space-between;
    background: #0d0d0e; padding: 10px 12px; border-radius: var(--radius-sm);
    border-left: 4px solid #444; cursor: grab;
    transition: background 0.2s var(--ease-fast), border-color 0.15s, box-shadow 0.2s, transform 0.15s var(--ease-fast);
    animation: layerIn 0.25s var(--ease);
}
@keyframes layerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.layer-item:hover { background: #17171a; box-shadow: var(--shadow-sm); }
.layer-item:active { cursor: grabbing; }
.layer-item.dragging { opacity: 0.4; background: #333; }
.layer-item.drag-over { border-top: 3px solid var(--accent); }
.layer-controls { display: flex; gap: 6px; align-items: center; }
.drag-handle { color: var(--text-faint); cursor: grab; padding: 0 4px; font-size: 1.1rem; }
.layer-checkbox { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); margin: 0; padding: 0; }

.color-swatch-btn {
    width: 32px; height: 32px; padding: 0; margin-top: 0; box-sizing: border-box;
    border: 2px solid #555; border-radius: 7px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5); transition: border-color 0.2s, transform 0.15s var(--ease-fast);
    flex-shrink: 0;
}
.color-swatch-btn:hover { border-color: white; transform: scale(1.06); }

.layer-btn {
    width: auto; padding: 6px 9px; margin-top: 0; font-size: 0.8rem; background: #2b2b2f; border: 1px solid #3c3c40;
    color: white; border-radius: var(--radius-sm); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s var(--ease-fast), transform 0.15s var(--ease-fast);
}
.layer-btn:hover { background: #444; }
.layer-btn:active { transform: scale(0.92); }
.btn-danger:hover { background: var(--accent); border-color: var(--accent); }

.layer-empty-hint {
    font-size: 0.78rem; color: var(--text-faint); text-align: center;
    padding: 18px 10px; border: 1px dashed var(--border-color); border-radius: var(--radius-sm);
}

/* ---------- Main workspace area ---------- */
#main-area { flex: 1; display: flex; flex-direction: column; background: #050506; overflow: hidden; position: relative; }

#floating-toolbar {
    position: absolute; left: 20px; top: 20px;
    background: rgba(20, 20, 22, 0.9); backdrop-filter: blur(10px);
    border: 1px solid var(--border-color); border-radius: 12px;
    display: flex; flex-direction: column; gap: 5px; padding: 6px;
    z-index: 10; box-shadow: var(--shadow-md);
}
.tool-btn {
    background: transparent; border: none; color: var(--text-main);
    width: 42px; height: 42px; border-radius: 8px; cursor: pointer;
    font-size: 1.25rem; transition: background 0.2s var(--ease-fast), transform 0.15s var(--ease-fast), color 0.2s;
    display: flex; justify-content: center; align-items: center;
}
.tool-btn.active { background: var(--accent); color: white; box-shadow: 0 4px 14px rgba(255, 71, 87, 0.4); }
.tool-btn:hover:not(.active):not(:disabled) { background: #2a2a2e; transform: translateY(-1px); }
.tool-btn:active:not(:disabled) { transform: scale(0.92); }
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.toolbar-divider { height: 1px; background: var(--border-color); margin: 2px 4px; }

#zoom-indicator {
    position: absolute; left: 20px; bottom: 20px; z-index: 10;
    background: rgba(20, 20, 22, 0.9); backdrop-filter: blur(10px);
    border: 1px solid var(--border-color); border-radius: 20px;
    padding: 8px 16px; font-size: 0.78rem; font-weight: 700; color: var(--text-dim);
    letter-spacing: 0.5px; box-shadow: var(--shadow-sm); user-select: none;
}

#workspace {
    flex: 1; position: relative; overflow: hidden;
    background-image: linear-gradient(#141416 1px, transparent 1px), linear-gradient(90deg, #141416 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: #0a0a0b;
}
#zoom-container { position: absolute; transform-origin: 0 0; transition: transform 0.06s linear; }
#paper-wrapper { box-shadow: var(--shadow-lg); background: white; }

#loading-overlay {
    position: absolute; inset: 0;
    background: rgba(6, 6, 7, 0.92); backdrop-filter: blur(3px);
    display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 20;
    animation: fadeIn 0.15s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.spinner {
    width: 64px; height: 64px; border: 3px solid #222; border-top: 3px solid var(--accent);
    border-radius: 50%; animation: spin 0.85s linear infinite; margin-bottom: 18px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#loading-overlay div[data-i18n="processing"] { color: var(--text-dim); font-weight: 700; letter-spacing: 2px; font-size: 0.85rem; }

/* ---------- Color modal ---------- */
#color-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    z-index: 200; display: none; justify-content: center; align-items: center;
    animation: fadeIn 0.18s var(--ease);
}
#color-modal {
    background: #18181b; padding: 24px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-color); width: 340px; box-shadow: var(--shadow-lg);
    animation: modalPop 0.22s var(--ease);
}
@keyframes modalPop { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
#color-modal h3 { font-size: 1.05rem; }
.cmyk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; }
.cmyk-grid label { display: block; text-align: center; font-size: 0.72rem; color: var(--text-dim); }
.cmyk-grid input { text-align: center; font-weight: 700; }

/* ---------- Toast notifications (replaces alert()) ---------- */
#toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 300;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
    background: #1c1c1f; border: 1px solid var(--border-color); border-left: 4px solid var(--accent);
    color: var(--text-main); padding: 13px 18px; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); font-size: 0.87rem; font-weight: 600;
    max-width: 320px; animation: toastIn 0.25s var(--ease);
    pointer-events: auto;
}
.toast.leaving { animation: toastOut 0.2s var(--ease-fast) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

/* ---------- Accessibility: focus states ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible, .layer-item:focus-visible, .upload-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* iro.js color wheel canvas etc. shouldn't get a stray focus box */
canvas:focus-visible { outline: none; }

/* ---------- Project bar (save / load / new) ---------- */
.project-bar {
    display: flex; gap: 6px; margin-bottom: 4px;
}
.icon-text-btn {
    flex: 1; width: auto; margin-top: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #202023; border: 1px solid var(--border-color); color: var(--text-main);
    padding: 8px 6px; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px;
    transition: background 0.2s var(--ease-fast), border-color 0.2s var(--ease-fast), transform 0.15s var(--ease-fast);
}
.icon-text-btn:hover { background: #2c2c30; border-color: #4a4a4e; }
.icon-text-btn:active { transform: scale(0.96); }
.icon-text-btn svg { flex-shrink: 0; }

/* ---------- Stepped / accordion sidebar sections ---------- */
.step {
    background: var(--layer-bg);
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.step-header {
    width: 100%; margin-top: 0; display: flex; align-items: center; gap: 12px;
    background: transparent; border: none; color: var(--text-main);
    padding: 16px 18px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 0.85rem; font-weight: 700;
}
.step-badge {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: #2e2e32; color: var(--text-dim);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800;
    transition: background 0.25s var(--ease-fast), color 0.25s var(--ease-fast);
}
.step.is-done .step-badge { background: var(--accent); color: white; }
.step-title { flex: 1; }
.step-chevron { flex-shrink: 0; color: var(--text-dim); transition: transform 0.25s var(--ease); }
.step.is-collapsed .step-chevron { transform: rotate(-90deg); }
/* Accordion open/close: height is measured and set in JS (see app.js
   toggleStep) rather than relied on via a pure-CSS grid-fr trick — that
   trick clipped content whenever a step's natural height didn't match what
   `1fr` resolved to on an auto-height container (visible as the print-size
   dropdown getting cut off). Measuring the real scrollHeight and animating
   max-height to it is slower to write but never clips.
   `max-height: none` once fully open means later content changes inside an
   open step (e.g. picking "Custom Size") are never clipped either. */
.step-body {
    padding: 0 18px 18px 18px;
    overflow: hidden;
    max-height: none;
    transition: max-height 0.28s var(--ease), padding 0.28s var(--ease);
}
.step.is-collapsed .step-body { max-height: 0 !important; padding-top: 0; padding-bottom: 0; }
.step .control-group { border: none; background: transparent; padding: 0; }
.step-export { background: transparent; border: none; padding: 0; margin-top: auto; }
.step-export .primary { width: 100%; }

.hint-text {
    font-size: 0.72rem; color: var(--text-dim); font-weight: 500;
    margin: -4px 0 10px 0; line-height: 1.4;
}

/* ---------- Info tooltip (ⓘ) ---------- */
.info-tip {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; background: #333; color: var(--text-dim);
    font-size: 0.65rem; font-weight: 700; cursor: help; font-family: inherit;
    margin-left: 4px;
}
.info-tip:hover, .info-tip:focus-visible { background: var(--accent); color: white; outline: none; }
.info-tip::after {
    content: attr(data-tip-tr);
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
    width: 220px; max-width: 60vw;
    background: #0d0d0e; border: 1px solid var(--border-color); color: var(--text-main);
    font-size: 0.72rem; font-weight: 500; line-height: 1.4; text-align: left;
    padding: 10px 12px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease-fast), transform 0.18s var(--ease-fast);
    z-index: 50; white-space: normal;
}
.info-tip:hover::after, .info-tip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
html[lang="en"] .info-tip::after, body.lang-en .info-tip::after { content: attr(data-tip-en); }

/* ---------- Layer reorder buttons (keyboard accessible alt to drag) ---------- */
.reorder-btns { display: flex; flex-direction: column; gap: 2px; }
.reorder-btn {
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    width: 18px; height: 14px; padding: 0; margin-top: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 3px; transition: color 0.15s, background 0.15s;
}
.reorder-btn:hover:not(:disabled) { color: var(--text-main); background: #333; }
.reorder-btn:disabled { opacity: 0.25; cursor: not-allowed; }

/* ---------- Desktop-only notice (honest, no fake mobile UX) ---------- */
#desktop-notice {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; z-index: 150;
    background: #1c1409; color: #ffcf7a; border-bottom: 1px solid #4a3510;
    font-size: 0.78rem; font-weight: 600; text-align: center; padding: 8px 14px;
}
@media (max-width: 700px) {
    #desktop-notice { display: block; }
    body { padding-top: 34px; }
}

/* ---------- Processing progress bar ---------- */
.progress-label { color: var(--text-dim); font-weight: 700; letter-spacing: 2px; font-size: 0.85rem; margin-top: 4px; }
.progress-track {
    width: 220px; height: 6px; background: #222; border-radius: 4px; margin-top: 16px; overflow: hidden;
}
.progress-fill {
    height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: 4px; transition: width 0.15s var(--ease-fast);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body { flex-direction: column; height: 100vh; }
    #sidebar { flex: 0 0 auto; max-width: none; max-height: 46vh; border-right: none; border-bottom: 1px solid var(--border-color); }
    #main-area { flex: 1 1 auto; min-height: 0; }
}