/* SPDX-License-Identifier: MIT */
/* SPDX-FileCopyrightText: Copyright (c) 2023 Chris Dragan */

:root {
    --bg:         #d0d0c8;
    --toolbar-bg: #383840;
    --panel-bg:   #c8c8c0;
    --border-dk:  #50505a;   /* borders on dark surfaces */
    --border-lt:  #a8a8a0;   /* borders on light surfaces */
    --accent:     #1e7ed4;   /* selected mode, focus rings */
    --text-lt:    #eeeeee;   /* text on dark surfaces */
    --text-dk:    #1a1a1e;   /* text on light surfaces */
    --text-dim:   #b0b0b8;   /* dim text on dark surfaces */
    --btn-bg:     #4e4e58;
    --btn-hover:  #5e5e68;
    --btn-active: #3a3a44;
    --input-bg:   #444450;
}

* {
    box-sizing: border-box;
}

body {
    font: 12px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text-dk);
    margin: 0;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */

#toolbar {
    background: var(--toolbar-bg);
    border-bottom: 2px solid #26262e;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    user-select: none;
    color: var(--text-lt);
}

#toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-dim);
    cursor: default;
    white-space: nowrap;
}

#toolbar input[type="text"] {
    width: 3.4em;
    background: var(--input-bg);
    border: 1px solid var(--border-dk);
    color: var(--text-lt);
    padding: 3px 5px;
    border-radius: 3px;
    font: inherit;
    text-align: center;
}

#toolbar input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

#toolbar input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 13px;
    height: 13px;
}

#toolbar input[type="file"] {
    display: none;
}

.sep {
    width: 1px;
    height: 18px;
    background: var(--border-dk);
    flex-shrink: 0;
    margin: 0 2px;
}

button {
    background: var(--btn-bg);
    color: var(--text-lt);
    border: 1px solid var(--border-dk);
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
    transition: background 0.1s;
}

button:hover {
    background: var(--btn-hover);
}

button:active {
    background: var(--btn-active);
}

/* Mode radio group styled as a segmented button */

.mode-group {
    display: flex;
    border: 1px solid var(--border-dk);
    border-radius: 3px;
    overflow: hidden;
}

.mode-group label {
    padding: 3px 12px;
    cursor: pointer;
    color: var(--text-dim);
    border-right: 1px solid var(--border-dk);
    background: var(--btn-bg);
    transition: background 0.1s, color 0.1s;
}

.mode-group label:last-child {
    border-right: none;
}

.mode-group label:hover {
    background: var(--btn-hover);
    color: var(--text-lt);
}

.mode-group label:has(input[type="radio"]:checked) {
    background: var(--accent);
    color: #ffffff;
}

.mode-group input[type="radio"] {
    display: none;
}

/* ── Mid container ───────────────────────────────────────────────────── */

#mid-container {
    width: 100%;
    overflow: hidden;
}

/* ── Palette ─────────────────────────────────────────────────────────── */

#palette {
    width: 10em;
    padding: 8px 6px;
    float: left;
    background: var(--panel-bg);
    min-height: 200px;
    border-right: 1px solid var(--border-lt);
}

#palette > div {
    margin-bottom: 6px;
}

.palette-color {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
}

.palette-selected-color {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border: 2px solid var(--accent);
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 0 0 1px var(--accent);
}

.palette-color input[type="color"],
.palette-selected-color input[type="color"] {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border-lt);
    border-radius: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

.palette-color input[type="text"],
.palette-selected-color input[type="text"] {
    width: 3em;
    background: #e0e0d8;
    border: 1px solid var(--border-lt);
    color: var(--text-dk);
    padding: 2px 3px;
    border-radius: 2px;
    font: 11px monospace;
    text-align: center;
}

/* Palette buttons */
#palette button {
    background: #b8b8b0;
    color: var(--text-dk);
    border: 1px solid var(--border-lt);
    font-size: 11px;
    padding: 2px 8px;
}

#palette button:hover {
    background: #c8c8c0;
}

/* ── Editor SVG ──────────────────────────────────────────────────────── */

#image-container {
    margin-left: 10em;
    padding: 0;
}

#image {
    margin: 0;
    background-image: url("checkerboard.png");
    display: block;
}

.sel-bg {
    fill: #EE00EE;
}

.grid {
    fill: #909088;
}

/* ── Preview ─────────────────────────────────────────────────────────── */

#preview-container {
    text-align: center;
    float: right;
    padding: 6px;
    background: var(--panel-bg);
    border-left: 1px solid var(--border-lt);
}

#preview {
    display: block;
    border: 1px solid var(--border-lt);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background-image: url("checkerboard.png");
}

/* ── Footer image strip ──────────────────────────────────────────────── */

#footer {
    clear: both;
    background: var(--toolbar-bg);
    border-top: 2px solid #26262e;
    padding: 8px;
}

#all-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.img-tile {
    position: relative;
    cursor: pointer;
    border: 2px solid #555560;
    border-radius: 4px;
    background-image: url("checkerboard.png");
    background-size: 8px 8px;
    transition: border-color 0.1s;
    flex-shrink: 0;
}

.img-tile canvas {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.img-tile:hover {
    border-color: #8888a0;
}

.img-tile.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.img-tile.drag-over {
    border-color: #88aaff;
    box-shadow: 0 0 0 1px #88aaff;
}

.img-tile.dragging {
    opacity: 0.35;
}

.img-tile-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.img-tile-delete {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    background: #c03030;
    border: 1px solid #ff5555;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    display: none;
    cursor: pointer;
    z-index: 1;
    transition: background 0.1s;
}

.img-tile-delete:hover {
    background: #e04040;
}

.img-tile:hover .img-tile-delete {
    display: block;
}

.img-tile-add {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #555560;
    border-radius: 4px;
    cursor: pointer;
    color: #888898;
    font-size: 22px;
    font-weight: 300;
    transition: border-color 0.1s, color 0.1s;
    flex-shrink: 0;
}

.img-tile-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}