/**
 * Copyright 2023 TriOrb Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Based on original work Copyright (c) 2018 Oleg Kalachev
 *
 */
:root {
        --accent: #223b80;
        --accent-strong: #162a5f;
        --accent-soft: #e9eefc;
        --surface: #ffffff;
        --surface-muted: rgba(255, 255, 255, 0.82);
        --workspace-bg: #eef2f8;
        --border: #d8dfec;
        --text: #1f2937;
        --muted: #66758f;
        --danger: #a22626;
        --sidebar-width: clamp(280px, 22vw, 400px);
}

html {
        color-scheme: light;
        background: var(--workspace-bg);
}

body {
        font-family: "Segoe UI", "Helvetica Neue", sans-serif;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        color: var(--text);
        background:
                radial-gradient(circle at top left, rgba(34, 59, 128, 0.12), transparent 28%),
                linear-gradient(180deg, #f7f9fc 0%, var(--workspace-bg) 100%);
}

*,
*::before,
*::after {
        box-sizing: inherit;
}

a {
        color: var(--accent);
        text-decoration: none;
}

button,
input,
select {
        font: inherit;
}

.app-shell {
        display: grid;
        grid-template-columns: 0 minmax(0, 1fr);
        min-height: 100vh;
        transition: grid-template-columns 220ms ease;
}

body.is-sidebar-open .app-shell {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.control-panel {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        padding: 16px 14px 20px;
        background: var(--surface);
        border-right: 1px solid var(--border);
        box-shadow: 18px 0 36px rgba(15, 23, 42, 0.08);
        transition: transform 220ms ease, opacity 220ms ease, box-shadow 220ms ease;
        z-index: 20;
        scrollbar-width: thin;
}

body:not(.is-sidebar-open) .control-panel {
        transform: translateX(calc(-100% - 24px));
        opacity: 0;
        pointer-events: none;
        box-shadow: none;
}

.control-panel__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
}

.panel-eyebrow,
.workspace__eyebrow {
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent);
}

.control-panel h1 {
        margin: 0;
        font-size: 28px;
        line-height: 1.1;
        font-weight: 700;
        color: #172554;
}

.panel-summary {
        margin: 10px 0 0;
        font-size: 14px;
        line-height: 1.6;
        color: var(--muted);
}

.setup {
        margin: 0;
}

.config-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.config-group {
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 14px;
        background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.config-group h2 {
        margin: 0 0 14px;
        font-size: 15px;
        font-weight: 700;
        color: #24324b;
}

.marker-config-group {
        transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.marker-config-group.is-dragover {
        border-color: var(--accent);
        background: #eef3ff;
        box-shadow: 0 0 0 3px rgba(34, 59, 128, 0.12);
}

.field-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
}

.field-grid .field {
        display: grid;
        gap: 8px;
        min-width: 0;
}

.setup label {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
        color: var(--muted);
}

.setup input,
.setup select {
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 10px 12px;
        border: 1px solid #cfd7e6;
        border-radius: 12px;
        background: #ffffff;
        color: var(--text);
}

.setup input:focus,
.setup select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 4px rgba(34, 59, 128, 0.12);
}

.error-message {
        display: none;
        width: 100%;
        margin-top: 16px;
        padding: 12px 14px;
        border: 1px solid #f0bbbb;
        border-radius: 12px;
        background: #fff2f2;
        color: var(--danger);
        font-size: 14px;
        font-weight: 700;
}

.form-actions {
        margin-top: 12px;
}

.button-primary,
.sidebar-toggle,
.panel-close-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.button-primary {
        width: 100%;
        min-height: 48px;
        padding: 0 18px;
        border-radius: 999px;
        background: var(--accent);
        color: #ffffff;
        box-shadow: 0 16px 30px rgba(34, 59, 128, 0.18);
}

.button-primary:hover,
.button-primary:focus-visible {
        background: var(--accent-strong);
        transform: translateY(-1px);
}

.button-primary:active {
        transform: scale(0.98);
}

.sidebar-toggle {
        flex-shrink: 0;
        min-height: 48px;
        padding: 0 18px;
        border-radius: 999px;
        background: #ffffff;
        border-color: var(--border);
        color: var(--text);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible,
.panel-close-button:hover,
.panel-close-button:focus-visible {
        border-color: #b7c3dc;
        background: #f5f8ff;
}

.panel-close-button {
        min-width: 72px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        background: #eef3ff;
        color: var(--accent);
        font-size: 14px;
        font-weight: 700;
}

.sidebar-toggle__icon {
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.workspace {
        min-width: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px 12px 16px;
}

.workspace__header {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 16px;
        border: 1px solid rgba(216, 223, 236, 0.9);
        border-radius: 18px;
        background: var(--surface-muted);
        backdrop-filter: blur(14px);
}

.workspace__copy {
        min-width: 0;
}

.workspace__summary {
        margin: 0;
        font-size: clamp(16px, 1vw + 12px, 22px);
        line-height: 1.45;
        color: #22304c;
}

.tools {
        margin: 0;
        padding: 12px 16px;
        border: 1px solid rgba(216, 223, 236, 0.9);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.9);
        line-height: 1.7;
        color: var(--muted);
}

.tools a {
        font-weight: 700;
}

.marker-id {
        display: none;
}

.marker-stage {
        flex: 1 1 auto;
        display: flex;
        min-height: 0;
        padding: 10px;
        border: 1px solid rgba(216, 223, 236, 0.9);
        border-radius: 18px;
        background:
                radial-gradient(circle at top right, rgba(34, 59, 128, 0.12), transparent 24%),
                linear-gradient(180deg, #fdfefe 0%, #f3f6fb 100%);
}

.marker {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-height: max(560px, 100%);
        margin: 0;
        padding: 8px;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
        overflow: auto;
}

.marker svg {
        display: block;
        max-width: 100%;
        height: auto;
}

.marker table {
        border: none;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        width: 100mm;
        height: 100mm;
}

.marker table td {
        margin: 0;
        padding: 0;
        border: none;
        background: white;
}

footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: auto;
        gap: 16px;
        padding: 2px 4px 0;
        font-size: 13px;
        color: var(--muted);
        flex-wrap: wrap;
}

.app-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
        z-index: 15;
}

.mydict div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
}

.mydict label {
        display: block;
}

.mydict input[type="radio"] {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
}

.mydict input[type="radio"]:checked + img {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(34, 59, 128, 0.16);
        background: #ffffff;
        opacity: 1;
        transform: translateY(-1px);
}

.mydict label img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        cursor: pointer;
        padding: 10px;
        border: 1px solid #cfd7e6;
        border-radius: 16px;
        background: #f9fbff;
        opacity: 0.45;
        transition: opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mydict label:hover img {
        opacity: 0.8;
        border-color: #b9c4dd;
}

@media (min-width: 961px) {
        .app-backdrop {
                display: none !important;
        }

        .panel-close-button {
                display: none;
        }
}

@media (max-width: 960px) {
        .app-shell,
        body.is-sidebar-open .app-shell {
                grid-template-columns: minmax(0, 1fr);
        }

        .control-panel {
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                width: min(360px, calc(100vw - 24px));
                max-width: 100%;
                height: auto;
                border-right: 1px solid var(--border);
                border-radius: 0 24px 24px 0;
        }

        body.is-sidebar-open .app-backdrop {
                opacity: 1;
                pointer-events: auto;
        }

        .workspace {
                padding: 8px 8px 12px;
        }

        .workspace__header {
                align-items: flex-start;
                flex-direction: column;
                border-radius: 16px;
        }

        .marker-stage {
                border-radius: 16px;
        }

        .marker {
                min-height: max(360px, 100%);
                padding: 6px;
        }

        footer {
                flex-direction: column;
        }
}

@media (max-width: 640px) {
        .control-panel {
                width: min(340px, calc(100vw - 12px));
                padding: 16px 12px 20px;
        }

        .config-group {
                padding: 12px;
        }

        .mydict div {
                gap: 10px;
        }

        .workspace__summary {
                font-size: 16px;
        }
}

@media print {
        @page {
                margin: 0mm;
        }

        body {
                -webkit-print-color-adjust: exact;
                color-adjust: exact;
                background: white;
                margin: 0;
                padding: 0;
        }

        .control-panel,
        .workspace__header,
        .tools,
        footer,
        .app-backdrop {
                display: none !important;
        }

        .app-shell,
        .workspace,
        .marker-stage,
        .marker {
                display: block !important;
                margin: 0 !important;
                padding: 0 !important;
                border: none !important;
                border-radius: 0 !important;
                background: white !important;
                box-shadow: none !important;
                min-height: 0 !important;
        }

        .marker {
                overflow: visible !important;
        }

        .marker svg {
                display: block;
                max-width: none;
        }
}