/* =========================================================================
   "U in de Wijk: Thumbnail maker" - UI styling
   Het huisstijl-lettertype (Nuvo Pro) wordt zowel in de UI-titel als op het
   Konva-canvas gebruikt. Plaats het .ttf-bestand in public/fonts/NuvoPro.ttf
   (zie public/fonts/README.md). Zonder bestand valt de UI terug op sans-serif.
   ========================================================================= */
@font-face {
    font-family: "Nuvo Pro";
    src: url("/fonts/NuvoPro.otf") format("opentype"),
         url("/fonts/NuvoPro.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --sidebar-w: 320px;
    --bg: #1e1f24;
    --panel: #2a2c33;
    --panel-2: #34373f;
    --border: #3d4049;
    --text: #e9eaed;
    --muted: #9aa0aa;
    --accent: #e63312;
    --accent-text: #ffffff;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.app {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-w);
    height: 100vh;
    overflow: hidden;
}

/* ---------- Canvas-area ---------- */
.canvas-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    min-width: 0;
}

.stage-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: calc(100vh - 90px);
}

.stage-host {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    line-height: 0;
}

.stage-host canvas { display: block; }

/* Schaakbord als transparantie-indicator: alleen zichtbaar zodra de editor actief
   is en waar het canvas transparant is (transparante achtergrond of PNG met alpha).
   In beeldmodus dekt de afbeelding dit af. Puur CSS, dus niet in de export. */
.app.is-loaded .stage-host {
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #c9ccd2 25%, transparent 25%),
        linear-gradient(-45deg, #c9ccd2 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #c9ccd2 75%),
        linear-gradient(-45deg, transparent 75%, #c9ccd2 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.dropzone {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--muted);
    text-align: center;
    cursor: pointer;
    z-index: 5;
    transition: border-color .15s, color .15s, background .15s;
}

.dropzone.is-hover {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(230, 51, 18, 0.08);
}

.dropzone__inner { display: flex; flex-direction: column; gap: 4px; }
.dropzone__inner strong { font-size: 18px; }

/* When an image is loaded we hide the dropzone overlay. */
.app.is-loaded .dropzone { display: none; }

.hint { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- Sidebar ---------- */
.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-left: 1px solid var(--border);
    height: 100vh;
}

.sidebar__header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.sidebar__header h1 {
    margin: 0;
    font-family: "Nuvo Pro", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.2;
}

.sidebar__header h1 span {
    display: block;
    font-size: 12px;
    font-weight: normal;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 18px 18px;
}

.panel {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.panel:last-child { border-bottom: none; }

.panel h2 {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
}

.sidebar__footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border);
}

/* ---------- Controls ---------- */
.control {
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 8px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}
.control:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.btn {
    appearance: none;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn:hover { background: #3f424c; }
.btn.is-active { border-color: var(--accent); background: rgba(230, 51, 18, 0.15); }

.btn--primary {
    width: 100%;
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
    font-weight: 600;
    padding: 12px;
    font-size: 15px;
}
.btn--primary:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--primary:disabled { opacity: .45; filter: none; }

/* Footer: undo/redo-icoonknoppen naast de download-knop. */
.footer-row { display: flex; gap: 8px; align-items: stretch; }
.footer-row .btn--primary { flex: 1; width: auto; }

.btn--icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 44px;
}
.btn--icon svg { width: 20px; height: 20px; }
.btn--icon:not(:disabled):hover { background: #3f424c; }

.btn--block {
    width: 100%;
    margin-top: 8px;
}

.btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.btn-row { display: flex; gap: 8px; margin-bottom: 8px; }
.btn-row .btn { flex: 1; }

.color-row, .check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}
.color-row input[type="color"] {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
}

.hint-sm {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.range-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}
.range-row span { flex: 0 0 auto; }
.range-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
}