/* ZPL Viewer — palette mirrors the WinForms Theme.cs */
:root {
    --bg: #F4F5F7;
    --surface: #FFFFFF;
    --surface-alt: #ECEEF1;
    --border: #D8DCE0;
    --text: #1A1D21;
    --text-2: #6B7280;
    --accent: #2D6CDF;
    --accent-hover: #245BBF;
    --toolbar: #22262B;
    --toolbar-text: #E8EAED;
    --preview-back: #9AA0A8;
    --success: #2E7D32;
    --error: #C03A2B;
    --syn-default: #3A4049;
    --syn-keyword: #1A56C4;
    --syn-data: #1B7F4B;
    --syn-comment: #949CA6;
    --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

.app { display: flex; flex-direction: column; height: 100vh; }

/* ── Top toolbar ───────────────────────────────────────────── */
.toolbar {
    background: var(--toolbar);
    color: var(--toolbar-text);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    height: 52px;
    flex: 0 0 auto;
}
.toolbar .title { font-weight: 600; font-size: 15px; margin-right: 8px; }
.toolbar .sep { flex: 1 1 auto; }
.toolbar label { font-size: 12px; color: #aeb4bc; display: flex; align-items: center; gap: 6px; }
.toolbar select, .toolbar input[type=number] {
    background: #2c3137; color: var(--toolbar-text);
    border: 1px solid #3a4047; border-radius: 6px;
    padding: 5px 8px; font-size: 13px;
}
.toolbar input[type=number] { width: 64px; }
.toolbar .chk { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text);
    padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--surface-alt); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { background: var(--surface); }

/* ── Multi-label pager (preview header) ────────────────────── */
.pager { display: inline-flex; align-items: center; gap: 6px; }
.pager .btn.small { padding: 2px 9px; font-size: 15px; line-height: 1; }
.pager-text {
    font-size: 12px; color: var(--text-2); min-width: 40px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Body split ────────────────────────────────────────────── */
.body { flex: 1 1 auto; display: flex; min-height: 0; }
.pane { display: flex; flex-direction: column; min-width: 0; }
.pane.editor-pane { flex: 0 0 46%; border-right: 1px solid var(--border); background: var(--surface); }
.pane.preview-pane { flex: 1 1 54%; }
.pane-header {
    background: var(--surface-alt); border-bottom: 1px solid var(--border);
    height: 34px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--text-2);
    flex: 0 0 auto;
}
.header-actions { display: flex; gap: 6px; }
.header-actions .btn { min-width: 64px; text-align: center; }

/* ── Editor (textarea + highlight overlay) ─────────────────── */
.editor-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.editor-input, .editor-highlight {
    position: absolute; inset: 0; margin: 0;
    padding: 10px 12px;
    font-family: var(--mono); font-size: 14px; line-height: 1.45;
    white-space: pre; word-wrap: normal; overflow: auto;
    border: 0; tab-size: 2;
}
.editor-highlight { color: var(--syn-default); background: var(--surface); pointer-events: none; z-index: 0; }
.editor-input {
    color: transparent; background: transparent; caret-color: var(--text);
    resize: none; outline: none; z-index: 1;
}
.editor-input::selection { background: rgba(45,108,223,0.25); }
.tok-cmd { color: var(--syn-keyword); }
.tok-data { color: var(--syn-data); }
.tok-comment { color: var(--syn-comment); }
.tok-hover { background: rgba(45,108,223,0.18); border-radius: 3px; }
/* Linter problem: red wavy underline + soft red wash on the offending ^cmd+value. */
.tok-problem { background: rgba(224,58,43,0.16); border-radius: 2px; text-decoration: underline wavy var(--error); text-decoration-skip-ink: none; }
/* The ZPL block of the label currently shown in the multi-label pager. */
.active-label { background: rgba(45,108,223,0.10); border-radius: 2px; }

/* Floating command-help tooltip */
.zpl-tooltip {
    position: fixed; z-index: 1000; max-width: 360px;
    background: var(--toolbar); color: var(--toolbar-text);
    border: 1px solid #3a4047; border-radius: 6px;
    padding: 6px 9px; font-size: 12px; line-height: 1.35;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3); pointer-events: none;
}

/* ── Preview ───────────────────────────────────────────────── */
.preview-area {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    background: var(--preview-back);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 24px;
}
/* Stage reserves the (possibly rotated) footprint so fit/scroll/centering work. */
.preview-area .label-stage { position: relative; flex: 0 0 auto; }
.preview-area .label-img {
    /* image-rendering is set inline per zoom: 'pixelated' when zoomed in (crisp
       bars), 'auto' (smooth) when shrinking to fit so text isn't jagged.
       Centred in the stage and rotated about its centre via an inline transform. */
    position: absolute; left: 50%; top: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    background: #fff;
}
.preview-empty { color: #eef0f2; align-self: center; text-align: center; }

/* ── Footer ────────────────────────────────────────────────── */
/* ── Problems panel (linter warnings, à la Labelary) ───────── */
.problems {
    flex: 0 0 auto; max-height: 150px; overflow-y: auto;
    background: #FFF8E6; border-top: 2px solid #E0A800; color: var(--text);
}
.problems-header {
    padding: 4px 12px; font-size: 12px; font-weight: 700; color: #8A6D00;
    background: #FCEFC7; border-bottom: 1px solid #EAD79A;
    position: sticky; top: 0;
}
.problems-list { margin: 0; padding: 4px 0; list-style: none; }
.problems-list li {
    padding: 3px 12px; font-size: 12px; line-height: 1.4;
    border-bottom: 1px solid #F2E6BE;
}
.problems-list li:last-child { border-bottom: none; }
.problem-loc { display: inline-block; min-width: 56px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.problem-cmd { display: inline-block; min-width: 44px; font-family: var(--mono, monospace); font-weight: 700; color: #8A6D00; }

.footer {
    flex: 0 0 auto; height: 34px;
    background: var(--surface-alt); border-top: 1px solid var(--border);
    display: flex; align-items: center; padding: 0 12px; gap: 10px;
    font-size: 12px; color: var(--text-2);
}
.footer .status { flex: 1 1 auto; }
.footer .app-version { color: var(--text-2); opacity: .7; font-size: 11px; font-variant-numeric: tabular-nums; text-decoration: none; }
.footer a.app-version:hover { opacity: 1; color: var(--accent); text-decoration: underline; }
.footer .status.ok { color: var(--success); }
.footer .status.err { color: var(--error); }
.footer select, .footer input {
    border: 1px solid var(--border); border-radius: 5px;
    padding: 3px 6px; font-size: 12px; font-family: inherit; background: #fff; width: 78px;
}

/* ── Release notes page (/release-notes) ───────────────────── */
.toolbar .toolbar-subtitle { color: #aeb4bc; font-size: 13px; }
.toolbar a.btn { text-decoration: none; }
.notes-page { flex: 1 1 auto; overflow-y: auto; background: var(--bg); }
.notes-inner { max-width: 860px; margin: 0 auto; padding: 24px 28px 48px; }
.note {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 18px 24px 8px; margin-bottom: 18px;
}
.note h2 {
    font-size: 17px; margin: 0 0 4px;
    display: flex; align-items: baseline; gap: 12px;
}
.note .note-date { font-size: 12px; font-weight: 400; color: var(--text-2); }
.note h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--accent); margin: 14px 0 4px;
}
.note ul { margin: 4px 0 14px; padding-left: 22px; }
.note li { font-size: 13.5px; line-height: 1.55; margin-bottom: 6px; color: var(--text); }

/* "Open..." upload control: a styled label hosting a hidden file input */
.upload-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; cursor: pointer; }
.upload-btn input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }