/*
   Editor di codice: un <textarea> trasparente sopra un <pre> evidenziato.

   La regola che tiene in piedi tutto è che i due elementi devono rendere il testo IDENTICO:
   stesso font, stessa dimensione, stessa interlinea, stesso padding, stesso trattamento degli
   spazi. Qualunque differenza sposta il cursore rispetto ai colori. Le proprietà condivise sono
   raccolte in variabili proprio per non poterle cambiare in un solo posto per sbaglio.
*/

.code-editor {
    --code-editor-font: 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
    --code-editor-size: 0.8125rem;
    --code-editor-line: 1.55;
    --code-editor-pad: 0.75rem;
    --code-editor-height: 24rem;
    --code-editor-bg: #1b1f27;
    --code-editor-fg: #dfe3ea;

    border: 1px solid #2c313c;
    border-radius: 10px;
    overflow: hidden;
    background: var(--code-editor-bg);
}

/* ── barra degli strumenti ─────────────────────────────────────────────────── */

.code-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    background: #151922;
    border-bottom: 1px solid #2c313c;
}

.code-editor-info {
    font-family: var(--code-editor-font);
    font-size: 0.6875rem;
    color: #7d8694;
    user-select: none;
}

.code-editor-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.code-editor-actions .rz-button {
    color: #aeb6c2 !important;
    min-width: 2rem;
}

.code-editor-actions .rz-button:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* L'InputFile nativo è invisibile ma cliccabile: la <label> che lo contiene fa da pulsante, così
   l'aspetto resta quello degli altri e non serve interoperare col JS per aprire il selettore. */
.code-editor-import {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    cursor: pointer;
    color: #aeb6c2;
}

.code-editor-import:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.code-editor-import .rz-icon {
    font-size: 1.125rem;
}

.code-editor-import input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── area di editing ──────────────────────────────────────────────────────── */

.code-editor-body {
    display: flex;
    height: var(--code-editor-height);
    min-height: 8rem;
}

.code-editor-gutter {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: var(--code-editor-pad) 0.5rem var(--code-editor-pad) 0.75rem;
    font-family: var(--code-editor-font);
    font-size: var(--code-editor-size);
    line-height: var(--code-editor-line);
    text-align: right;
    color: #4d5666;
    background: #171b23;
    border-right: 1px solid #2c313c;
    white-space: pre;
    overflow: hidden;
    user-select: none;
    min-width: 2.75rem;
}

.code-editor-scroll {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Il <pre> e il <textarea> occupano esattamente lo stesso rettangolo e scorrono insieme. */
.code-editor-highlight,
.code-editor-input {
    position: absolute;
    inset: 0;
    margin: 0;
    box-sizing: border-box;
    padding: var(--code-editor-pad);
    border: 0;
    font-family: var(--code-editor-font);
    font-size: var(--code-editor-size);
    line-height: var(--code-editor-line);
    tab-size: 2;
    white-space: pre;
    word-wrap: normal;
    overflow: auto;
}

.code-editor-highlight {
    pointer-events: none;
    color: var(--code-editor-fg);
    background: transparent;
    overflow: hidden;
}

.code-editor-highlight code {
    font: inherit;
    color: inherit;
    background: none;
    padding: 0;
    white-space: inherit;
}

.code-editor-input {
    /* Testo trasparente: si vede quello colorato del <pre> sotto, ma la selezione e il cursore
       restano quelli nativi del textarea. */
    color: transparent;
    background: transparent;
    caret-color: #ffffff;
    resize: none;
    outline: none;
}

.code-editor-input::selection {
    background: rgba(88, 130, 193, 0.45);
}

.code-editor-input::placeholder {
    color: #6b7480;
}

/* ── tema dei token ───────────────────────────────────────────────────────── */

.code-editor .tok-comment  { color: #6b7787; font-style: italic; }
.code-editor .tok-string   { color: #b3d99b; }
.code-editor .tok-regex    { color: #e3a76f; }
.code-editor .tok-number   { color: #d9a2e8; }
.code-editor .tok-constant { color: #d9a2e8; }
.code-editor .tok-keyword  { color: #7fb6f0; }
.code-editor .tok-function { color: #f0d78c; }
.code-editor .tok-property { color: #9fd8d0; }

/* ── errore di import ─────────────────────────────────────────────────────── */

.code-editor-error {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: #ffb4b4;
    background: #38222a;
    border-top: 1px solid #5a3038;
}