/* ==========================================================================
   Lega Navale Italiana - Sezione di Trieste
   Webcam - foglio di stile unico.
   Stile istituzionale e sobrio, chiaro/scuro automatico, mobile first.
   ========================================================================== */

/* --------------------------------------------------------------- token colore */
:root {
    color-scheme: light dark;

    /* Palette istituzionale: blu navale + accenti neutri. */
    --lni-blue:        #0b3d68;
    --lni-blue-dark:   #072a49;
    --lni-blue-light:  #1d5f97;

    --bg:            #f4f6f9;
    --bg-elevated:   #ffffff;
    --bg-sunken:     #e8ecf2;
    --border:        #d3dae4;
    --border-strong: #b9c4d2;

    --text:        #14212e;
    --text-muted:  #566577;
    --text-invert: #ffffff;

    --ok:      #197a3d;
    --ok-bg:   #e4f3e9;
    --warn:    #a45a00;
    --warn-bg: #fdf0dd;
    --err:     #a52121;
    --err-bg:  #fbe6e6;
    --idle:    #5c6b7c;
    --idle-bg: #e9edf2;

    --shadow: 0 1px 2px rgb(12 27 44 / 8%), 0 6px 20px rgb(12 27 44 / 6%);
    --radius: 12px;
    --radius-sm: 8px;

    --max-width: 1180px;
    --gap: clamp(0.85rem, 2vw, 1.35rem);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --lni-blue:       #7fb4e0;
        --lni-blue-dark:  #0d2438;
        --lni-blue-light: #a8cdec;

        --bg:            #0e1620;
        --bg-elevated:   #16212e;
        --bg-sunken:     #0a1119;
        --border:        #27384a;
        --border-strong: #375068;

        --text:        #e7eef6;
        --text-muted:  #9fb0c2;
        --text-invert: #0e1620;

        --ok:      #6ed095;
        --ok-bg:   #10331f;
        --warn:    #f0b869;
        --warn-bg: #3a2a10;
        --err:     #f28a8a;
        --err-bg:  #3b1717;
        --idle:    #93a3b5;
        --idle-bg: #1b2634;

        --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 28%);
    }
}

/* ------------------------------------------------------------------ reset base */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    /* Nessuno scroll orizzontale, su nessun dispositivo. */
    overflow-x: hidden;
}

img, svg { max-width: 100%; }

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
    outline: 3px solid var(--lni-blue-light);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------- brand */
.brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

/* Altezza fissa e larghezza libera: funziona sia con l'emblema verticale
   sia con un logo orizzontale, senza deformarlo. */
.brand__logo {
    flex: 0 0 auto;
    width: auto;
    height: 88px;
    max-width: 150px;
    object-fit: contain;
}

.brand__logo--placeholder {
    display: inline-flex;
    width: 72px;
    color: var(--lni-blue);
    opacity: 0.85;
}

.brand--compact .brand__logo--placeholder { width: 48px; }

.brand__text { min-width: 0; }

.brand__name {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--lni-blue);
    line-height: 1.2;
}

.brand__subtitle {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.3;
}

.brand__section {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.brand--compact .brand__logo { height: 48px; max-width: 96px; }
.brand--compact .brand__logo svg { width: 48px; height: 48px; }
.brand--compact .brand__name { font-size: 1.05rem; }
.brand--compact .brand__subtitle { font-size: 0.85rem; }
.brand--compact .brand__section { display: none; }

/* --------------------------------------------------------------------- topbar */
.topbar {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.7rem clamp(0.85rem, 3vw, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.topbar__user {
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__logout { margin: 0; }

/* -------------------------------------------------------------------- bottoni */
.button {
    font: inherit;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    min-height: 44px; /* area di tocco comoda */
}

.button--primary {
    width: 100%;
    background: var(--lni-blue);
    color: var(--text-invert);
    border-color: var(--lni-blue);
}

.button--primary:hover { background: var(--lni-blue-dark); }

.button--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}

.button--ghost:hover { background: var(--bg-sunken); }

/* ---------------------------------------------------------------------- login */
.page--login { display: block; }

.login {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
}

.login__card {
    width: 100%;
    max-width: 26rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.3rem, 4vw, 2rem);
}

.login__header {
    padding-bottom: 1.1rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--border);
}

.login__footnote {
    margin-top: 1.3rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

/* ----------------------------------------------------------------- form/campi */
.form { display: grid; gap: 1rem; }

.field { display: grid; gap: 0.35rem; }

.field__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.field__input {
    font: inherit;
    width: 100%;
    padding: 0.65rem 0.75rem;
    min-height: 44px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.field__input:focus {
    border-color: var(--lni-blue-light);
    background: var(--bg-elevated);
}

.field__hint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Nota che spiega la comparsa improvvisa del codice di verifica. */
.field__hint--captcha {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--idle-bg);
    border: 1px solid var(--border);
    color: var(--text);
}

.captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.captcha__image {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
}

.captcha__input {
    flex: 1 1 7rem;
    min-width: 7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
}

/* --------------------------------------------------------------------- alerts */
.alert {
    margin-bottom: 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.9rem;
}

.alert code {
    font-size: 0.85em;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    background: rgb(0 0 0 / 8%);
}

.alert--info  { background: var(--idle-bg); border-color: var(--border); color: var(--text); }
.alert--error { background: var(--err-bg);  border-color: var(--err);   color: var(--err); }
.alert--warn  { background: var(--warn-bg); border-color: var(--warn);  color: var(--warn); }

/* ----------------------------------------------------------------------- main */
.main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--gap) clamp(0.85rem, 3vw, 1.5rem) 2rem;
    display: grid;
    gap: var(--gap);
}

/* ------------------------------------------------------------- griglia webcam */
.cams {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr; /* mobile: una colonna */
}

/* Tablet e desktop: due colonne. */
@media (min-width: 700px) {
    .cams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cam {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cam__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
}

.cam__title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cam__figure {
    margin: 0;
}

/* Riquadro immagine: proporzione fissa 4/3 in ogni stato, cosi' il layout non
   si sposta mai (nessun frame, primo caricamento, offline). */
.cam__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--bg-sunken);
    overflow: hidden;
}

/* Due buffer sovrapposti, entrambi nell'albero di rendering. Il frame appena
   caricato viene spostato in cima (ordine del DOM = ordine di disegno) e
   quello precedente resta dipinto sotto: se il nuovo livello tarda a comparire
   non si vede mai un riquadro vuoto. Trasparenti finche' non hanno un frame,
   cosi' non appare l'icona di immagine rotta. */
.cam__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.cam__img.is-loaded {
    opacity: 1;
}

/* --------------------------------------------------------------------- overlay */
.cam__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    background: rgb(8 16 26 / 55%);
    color: #f2f6fa;
    font-size: 0.9rem;
    font-weight: 600;
    transition: opacity 160ms ease;
}

/* L'overlay resta visibile solo quando serve. */
.cam[data-state="live"] .cam__overlay {
    opacity: 0;
    pointer-events: none;
}

.cam[data-state="degraded"] .cam__overlay { background: rgb(8 16 26 / 28%); }
.cam[data-state="offline"] .cam__overlay  { background: rgb(8 16 26 / 62%); }

/* Webcam mai configurata: segnaposto neutro, non una velatura scura
   (che avrebbe senso solo sopra un frame reale). */
.cam[data-state="disabled"] .cam__overlay {
    background: var(--bg-sunken);
    color: var(--text-muted);
}

.cam[data-state="disabled"] .cam__overlay-text {
    background: transparent;
    border: 1px dashed var(--border-strong);
    padding: 0.45rem 0.8rem;
    font-weight: 600;
}

/* Nessuna "pillola" vuota durante le transizioni di stato. */
.cam__overlay-text:empty {
    display: none;
}

.cam__overlay-text {
    background: rgb(0 0 0 / 35%);
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    max-width: 100%;
}

.cam__caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.cam__location { font-weight: 600; }
.cam__meta { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------- badge */
.badge {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.badge--on       { color: var(--ok);   background: var(--ok-bg); }
.badge--degraded { color: var(--warn); background: var(--warn-bg); }
.badge--off      { color: var(--err);  background: var(--err-bg); }
.badge--loading  { color: var(--idle); background: var(--idle-bg); }

/* ------------------------------------------------------- stato collegamento */
.link {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(0.9rem, 2.5vw, 1.2rem);
}

.link__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.link__list {
    display: grid;
    gap: 0.7rem;
}

@media (min-width: 700px) {
    .link__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

.link__item {
    display: grid;
    /* pallino | etichetta | valore : il valore resta accanto all'etichetta,
       cosi' su tre colonne non c'e' ambiguita' su a chi si riferisce. */
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
}

@media (min-width: 700px) {
    .link__item { border-bottom: none; padding-bottom: 0; }
}

.link__label {
    font-weight: 600;
    font-size: 0.92rem;
    min-width: 0;
}

.link__value {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    justify-self: start;
    white-space: nowrap;
}

.link__detail {
    grid-column: 2 / -1;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.link__subtitle {
    margin: 1.1rem 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Due colonne da tablet in su', una sul telefono. Non quattro: con il controllo
   diretto sulla telecamera il valore diventa "immagine 68 ms · telecamera
   41 ms", che su quattro colonne va a capo e sborda. */
@media (min-width: 700px) {
    .link__list--cams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.link__item--cam .link__label {
    white-space: nowrap;
}

/* Qui il valore e' un numero con unita' ("74 ms") o una parola: il maiuscolo
   delle righe di stato lo renderebbe "74 MS". */
.link__item--cam .link__value {
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}

.link__footer {
    margin-top: 0.9rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Pallini di stato */
.dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--idle);
    align-self: center;
    flex: 0 0 auto;
}

.dot--on       { background: var(--ok); }
.dot--degraded { background: var(--warn); }
.dot--off      { background: var(--err); }
.dot--unknown  { background: var(--idle); }

.value--on       { color: var(--ok); }
.value--degraded { color: var(--warn); }
.value--off      { color: var(--err); }
.value--unknown  { color: var(--text-muted); }

/* --------------------------------------------------------------------- footer */
.footer {
    border-top: 1px solid var(--border);
    padding: 1rem clamp(0.85rem, 3vw, 1.5rem) 2rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------- preferenze utente */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}