/* Il radar della classe: tutto lo schermo, sfondo quasi nero, testo grande e ad alto contrasto.
   --radar-font arriva dalla pagina: è la stessa altezza di testo delle etichette sul canvas. */

.radar-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #03070d;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.radar {
    --radar-ink: #d9e3ec;
    --radar-dim: #7f95a8;
    --radar-edge: #16222e;
    --radar-panel: #060c14;
    --radar-alarm: #ff3b3b;
    --radar-warn: #ffb020;
    --radar-stca: #ff5a36;
    --radar-ok: #7dffa8;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #03070d;
    color: var(--radar-ink);
    font-family: "DejaVu Sans Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
    font-weight: 600;
    font-size: var(--radar-font, 20px);
    line-height: 1.2;
    overflow: hidden;
}

/* In proiezione non si vede il cursore: nessuno lo muove, e sul megaschermo disturberebbe. */
.radar--projection, .radar--projection * { cursor: none !important; }

/* --- barra in alto: METAR, avvisi, ora ------------------------------------------ */

.radar__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: start;
    gap: 0.4em 1em;
    padding: 0.3em 0.6em;
    border-bottom: 1px solid var(--radar-edge);
    background: var(--radar-panel);
}

.radar__metar-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; }
.radar__warn { color: var(--radar-warn); }

.radar__alerts { display: flex; flex-wrap: wrap; gap: 0.3em 0.6em; justify-content: center; }
.radar__alert {
    padding: 0.05em 0.45em;
    border: 2px solid currentColor;
    border-radius: 0.2em;
    white-space: nowrap;
}
.radar__alert--emergency { color: var(--radar-alarm); animation: radar-blink 1s steps(1, end) infinite; }
.radar__alert--stca { color: var(--radar-stca); animation: radar-blink 1s steps(1, end) infinite; }

@keyframes radar-blink {
    50% { color: transparent; border-color: currentColor; }
}

.radar__clock { text-align: right; white-space: nowrap; }
.radar__utc { font-size: 2.1em; line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.radar__utc small { font-size: 0.5em; margin-left: 0.1em; color: var(--radar-dim); }
.radar__clock-row { display: flex; gap: 0.8em; justify-content: flex-end; color: var(--radar-dim); font-size: 0.8em; }
.radar__clock-row.is-warn { color: var(--radar-warn); }
.radar__clock-row.is-alarm { color: var(--radar-alarm); }
.radar__fast { color: var(--radar-warn); }
.radar__paused { color: var(--radar-warn); }

/* --- corpo: schermo e liste --------------------------------------------------------- */

.radar__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    position: relative;
}

.radar-scope {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
    touch-action: none;
}
.radar-scope canvas { display: block; position: absolute; inset: 0; }
.radar-scope--ruler canvas, .radar-scope--drawing canvas { cursor: crosshair; }

.radar__lists {
    flex: 0 0 auto;
    width: clamp(14em, 24vw, 30em);
    max-width: 38%;
    overflow-y: auto;
    border-left: 1px solid var(--radar-edge);
    background: var(--radar-panel);
    font-size: 0.78em;
}

.radar-list { padding: 0.3em 0.5em 0.5em; border-bottom: 1px solid var(--radar-edge); }
.radar-list h2 {
    margin: 0 0 0.2em;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--radar-dim);
}
.radar-list__count { float: right; }
.radar-list table { width: 100%; border-collapse: collapse; }
.radar-list td { padding: 0.08em 0.3em 0.08em 0; white-space: nowrap; }
.radar-list tr { cursor: pointer; }
.radar-list tr:hover td { background: #0d1824; }
.radar-list__callsign { color: var(--radar-ok); }
.radar-list__note { color: var(--radar-dim); overflow: hidden; text-overflow: ellipsis; max-width: 8em; }
.radar-list tr.is-selected td { background: #2a2a0c; color: #ffe45c; }
.radar-list tr.is-emergency td { color: var(--radar-alarm); }
.radar-list tr.is-primary td { color: var(--radar-dim); }

/* --- piede: stato in proiezione, barra degli strumenti in operatore ------------------- */

.radar__status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 1.4em;
    padding: 0.2em 0.6em;
    border-top: 1px solid var(--radar-edge);
    background: var(--radar-panel);
    color: var(--radar-dim);
    font-size: 0.75em;
}
.radar__hint { margin-left: auto; opacity: 0.6; }

.radar--operator { font-size: min(var(--radar-font, 20px), 22px); }
.radar--operator .radar__toolbar { font-size: 14px; }

.radar__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.8rem;
    padding: 0.35rem 0.6rem;
    border-top: 1px solid var(--radar-edge);
    background: var(--radar-panel);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
}
.radar__toolbar button, .radar__toolbar select, .radar__toolbar input:not([type=range]):not([type=checkbox]) {
    padding: 0.2rem 0.5rem;
    border: 1px solid #2a3a4b;
    border-radius: 4px;
    background: #0b1520;
    color: var(--radar-ink);
    font: inherit;
}
.radar__toolbar button.is-on { border-color: #ffe45c; color: #ffe45c; }
.radar__toolbar button:disabled { opacity: 0.45; }
.radar-tool { display: inline-flex; align-items: center; gap: 0.35rem; }
.radar-tool__label { color: var(--radar-dim); }
.radar-tool__value { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.radar-tool--filter input[type=range] { width: 7rem; }
.radar-tool input[type=range] { accent-color: #7dffa8; }
.radar-tool__name { width: 8rem; }
.radar-tool__act { border-color: #ffe45c !important; }
.radar-tool__reading { color: #fff; font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace; }
.radar-tool--settings { position: relative; }
.radar-tool--settings summary { cursor: pointer; color: var(--radar-dim); }
.radar-settings {
    position: absolute;
    bottom: 2.2rem;
    right: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
    gap: 0.5rem;
    width: min(34rem, 90vw);
    padding: 0.6rem;
    border: 1px solid #2a3a4b;
    border-radius: 6px;
    background: #081018;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.radar-settings fieldset { margin: 0; padding: 0.3rem 0.5rem 0.5rem; border: 1px solid #1c2a38; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; }
.radar-settings legend { color: var(--radar-dim); }
.radar-settings label { display: inline-flex; align-items: center; gap: 0.3rem; }
.radar-settings input[type=number] { width: 4.5rem; }
.radar-settings__preset { display: inline-flex; gap: 0.3rem; }

/* --- strumenti sull'aereo selezionato (operatore) -------------------------------------- */

.radar__tools {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 4;
    max-height: calc(100% - 1rem);
    width: min(26rem, 45vw);
    overflow-y: auto;
    border: 1px solid #2a3a4b;
    border-radius: 6px;
    background: rgba(8, 16, 24, 0.96);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
}
.radar__close {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    border: none;
    background: none;
    color: var(--radar-dim);
    font-size: 1.1rem;
    cursor: pointer;
}

.radar-message { color: var(--ink); }

/* --- il radar nel pannello del docente -------------------------------------------------- */

.radar-remote {
    margin: 0 0 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--edge);
    border-radius: 6px;
    background: var(--panel);
    font-size: 0.9rem;
}
.radar-remote summary { cursor: pointer; font-weight: 600; }
.radar-remote__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.45rem; }
.radar-remote__row button, .radar-remote__row select, .radar-remote__row input {
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--edge);
    border-radius: 4px;
    background: var(--ground);
    color: var(--ink);
    font: inherit;
}
.radar-remote__row button.is-on { border-color: var(--accent); color: var(--accent); }
.radar-remote__label { color: var(--ink-dim); }
.radar-remote__value { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.radar-remote__feet { width: 5.5rem; }
.radar-remote__link { margin: 0.45rem 0 0; font-size: 0.8rem; word-break: break-all; }
.radar-remote__link span { color: var(--ink-dim); }
.radar-remote__qr { width: 11rem; margin-top: 0.4rem; }
.radar-remote__qr svg { display: block; width: 100%; height: auto; }

/* La fonte degli spazi aerei, in un angolo dello schermo radar. */
.radar__credit {
    position: absolute;
    left: 0.5em;
    bottom: 0.3em;
    margin: 0;
    font-size: 0.7em;
    color: var(--radar-dim);
    pointer-events: none;
}