/* ALGOR MONITOR — bozza grafica
   Identità autonoma in famiglia algor.it: font Afacad Flux,
   accento #34c3eb, blu profondo #2A4D69, tema chiaro/scuro. */

@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@400;500;600;700&display=swap');

:root {
    --algor-accent: #34c3eb;
    --algor-accent-rgb: 52, 195, 235;
    --algor-accent-ink: #14323d;
    --algor-accent-text: #34c3eb;
    --algor-deep: #2A4D69;

    /* Stati: il colore non è mai da solo — sempre icona + etichetta. */
    --st-ok: #3fb950;
    --st-warn: #d29922;
    --st-down: #f85149;
    --st-nodata: #8b98a5;
    --st-maint: #34c3eb;
    --st-notice: #79a6ff;   /* Avviso: informativo, mai allarmante */
}
[data-bs-theme=light] {
    --algor-accent-text: #17708c;
    --st-ok: #1a7f37;
    --st-warn: #9a6700;
    --st-down: #cf222e;
    --st-nodata: #59636e;
    --st-maint: #17708c;
    --st-notice: #2f6fce;
}

html, body { height: 100%; font-family: 'Afacad Flux', sans-serif; }
body { display: flex; flex-direction: column; }
main { flex: 1; }

/* leggibilità dei grigi Bootstrap sul fondo scuro */
[data-bs-theme=dark] .text-secondary { color: #a3b8c6 !important; }

/* ---------- nastro "bozza" ---------- */
.mock-ribbon {
    font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
    text-align: center; padding: .3rem .75rem; font-weight: 600;
    background: repeating-linear-gradient(-45deg,
        rgba(var(--algor-accent-rgb), .14), rgba(var(--algor-accent-rgb), .14) 12px,
        transparent 12px, transparent 24px);
    border-bottom: 1px solid rgba(var(--algor-accent-rgb), .35);
}

/* ---------- navbar ---------- */
.monitor-navbar {
    backdrop-filter: blur(8px);
    background-color: rgba(var(--bs-body-bg-rgb), .88);
    border-bottom: 1px solid rgba(var(--algor-accent-rgb), .25);
}
.navbar-brand { font-weight: 700; font-size: 1.35rem; letter-spacing: .02em; }
.brand-mon { color: var(--algor-accent-text); font-weight: 500; margin-left: .12em; }
.monitor-navbar .nav-link { font-weight: 500; }
.monitor-navbar .nav-link.active {
    color: var(--algor-accent-text);
    border-bottom: 2px solid var(--algor-accent);
}

/* ---------- bottoni algor ---------- */
.btn-algor {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--algor-accent-ink);
    --bs-btn-bg: var(--algor-accent);
    --bs-btn-border-color: var(--algor-accent);
    --bs-btn-hover-color: var(--algor-accent-ink);
    --bs-btn-hover-bg: #2ab0d6;
    --bs-btn-hover-border-color: #2ab0d6;
    --bs-btn-active-color: var(--algor-accent-ink);
    --bs-btn-active-bg: #2ab0d6;
    --bs-btn-active-border-color: #2ab0d6;
}
.btn-outline-algor {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--algor-accent-text);
    --bs-btn-border-color: var(--algor-accent-text);
    --bs-btn-hover-color: var(--algor-accent-ink);
    --bs-btn-hover-bg: var(--algor-accent);
    --bs-btn-hover-border-color: var(--algor-accent);
}
.text-algor { color: var(--algor-accent-text) !important; }

/* ---------- stati: chip icona+testo ---------- */
.st-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; font-size: .9rem;
    padding: .22rem .65rem; border-radius: 2rem;
    border: 1px solid transparent; white-space: nowrap;
}
.st-chip i { font-size: 1rem; line-height: 1; }
.st-chip-sm { font-size: .78rem; padding: .12rem .5rem; }
.st-ok     { color: var(--st-ok);     background: color-mix(in srgb, var(--st-ok) 12%, transparent);     border-color: color-mix(in srgb, var(--st-ok) 35%, transparent); }
.st-warn   { color: var(--st-warn);   background: color-mix(in srgb, var(--st-warn) 12%, transparent);   border-color: color-mix(in srgb, var(--st-warn) 35%, transparent); }
.st-down   { color: var(--st-down);   background: color-mix(in srgb, var(--st-down) 12%, transparent);   border-color: color-mix(in srgb, var(--st-down) 35%, transparent); }
.st-nodata { color: var(--st-nodata); background: color-mix(in srgb, var(--st-nodata) 12%, transparent); border-color: color-mix(in srgb, var(--st-nodata) 35%, transparent); }
.st-maint  { color: var(--st-maint);  background: color-mix(in srgb, var(--st-maint) 12%, transparent);  border-color: color-mix(in srgb, var(--st-maint) 35%, transparent); }
.st-notice { color: var(--st-notice); background: color-mix(in srgb, var(--st-notice) 10%, transparent); border-color: color-mix(in srgb, var(--st-notice) 30%, transparent); }
.text-notice { color: var(--st-notice); }

/* Riquadro «Avvisi» del Quadro generale: eventi non gravi, tono discreto. */
.notice-box { border-radius: .75rem; border-left: 4px solid var(--st-notice); }
.notice-box .notice-title { color: var(--st-notice); font-weight: 600; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- riquadri riepilogo (stat tile) ---------- */
.kpi-card { border-radius: .75rem; height: 100%; }
.kpi-card .kpi-num { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.kpi-card .kpi-label { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }

/* ---------- card bersaglio ---------- */
.target-card {
    border-radius: .75rem; height: 100%;
    border-left: 4px solid var(--bs-border-color);
    transition: transform .08s ease, box-shadow .08s ease;
}
a.target-link { color: inherit; text-decoration: none; display: block; height: 100%; }
a.target-link:hover .target-card,
a.target-link:focus-visible .target-card { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.target-card.b-ok     { border-left-color: var(--st-ok); }
.target-card.b-warn   { border-left-color: var(--st-warn); }
.target-card.b-down   { border-left-color: var(--st-down); }
.target-card.b-nodata { border-left-color: var(--st-nodata); }
.target-name { font-weight: 700; font-size: 1.05rem; }
.target-host { font-size: .82rem; }
.check-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .75rem; font-weight: 600;
    padding: .1rem .5rem; border-radius: 2rem;
    background: rgba(var(--bs-body-color-rgb), .07);
    border: 1px solid rgba(var(--bs-body-color-rgb), .12);
}

/* titolo di gruppo */
/* titoli di sezione dentro i moduli (Backup: Piattaforma e collegamento, Livelli, Limiti…) */
.form-section-title {
    font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
    color: var(--algor-accent);
    padding-bottom: .35rem; margin-bottom: .75rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.form-section-title.mb-0 { margin-bottom: .25rem !important; }

.group-title {
    font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
    padding-left: .75rem; border-left: 4px solid var(--algor-accent);
    margin: 2rem 0 1rem;
}

/* ---------- grafici ---------- */
.spark { width: 100%; height: 34px; display: block; }
.spark polyline { fill: none; stroke: var(--algor-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-area { fill: rgba(var(--algor-accent-rgb), .12); stroke: none; }

.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: 260px; display: block; }
.chart-svg .grid line { stroke: rgba(var(--bs-body-color-rgb), .1); stroke-width: 1; }
.chart-svg .axis text { fill: var(--bs-secondary-color); font-size: 11px; font-family: 'Afacad Flux', sans-serif; }
.chart-svg .serie { fill: none; stroke: var(--algor-accent); stroke-width: 2; stroke-linejoin: round; }
.chart-svg .serie-area { fill: rgba(var(--algor-accent-rgb), .10); stroke: none; }
.chart-svg .maint-band { fill: rgba(var(--algor-accent-rgb), .10); }
.chart-svg .incident-band { fill: color-mix(in srgb, var(--st-down) 14%, transparent); }
.chart-svg .cross { stroke: rgba(var(--bs-body-color-rgb), .4); stroke-dasharray: 3 3; }
.chart-tip {
    position: absolute; pointer-events: none; display: none;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: .5rem; padding: .35rem .6rem; font-size: .8rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.3); white-space: nowrap; z-index: 10;
}
.chart-legend { font-size: .78rem; }

/* ---------- tabelle ---------- */
.table-monitor { font-size: .92rem; }
.table-monitor th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

/* incidente aperto in evidenza */
.incident-open { border-left: 4px solid var(--st-down); border-radius: .75rem; }

/* ---------- login ---------- */
.login-bg { min-height: 100vh; display: flex; align-items: center; }
.login-card { max-width: 420px; width: 100%; border-radius: 1rem; }
.otp-input { letter-spacing: .6em; font-size: 1.4rem; text-align: center; font-weight: 700; }

/* ---------- footer ---------- */
.monitor-footer { border-top: 1px solid rgba(var(--algor-accent-rgb), .2); font-size: .82rem; }

@media (max-width: 575px) {
    .kpi-card .kpi-num { font-size: 1.5rem; }
}

/* ---------- pagina pubblica di stato (status.algor.it) ---------- */
.status-hero { text-align: center; padding: 2.5rem 1rem 1.5rem; }
.status-hero .navbar-brand { font-size: 2rem; }
.status-banner {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: 1.15rem; font-weight: 700;
    padding: .6rem 1.4rem; border-radius: 2rem;
}
.service-row { border-radius: .75rem; }
/* su schermi stretti il badge di stato va sempre sotto il testo, per tutte le schede */
@media (max-width: 575px) {
    .service-head { flex-direction: column; align-items: flex-start !important; }
}

/* ---------- Stato del server ----------
   Il colore dell'area (--area) sta nel filetto, nell'etichetta e nelle barre;
   verde/ambra/rosso compaiono solo nei chip, nelle barre oltre soglia e nello scostamento. */
.srv-banner { border-radius: .75rem; padding: .9rem 1.25rem; border: 1px solid var(--bs-border-color); display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem; }
.srv-banner-main { font-size: 1.35rem; }
.srv-banner-main .bi { margin-right: .4rem; }
.srv-banner-detail { color: var(--bs-secondary-color); }
.srv-banner.st-ok     { background: color-mix(in srgb, var(--st-ok) 12%, transparent);     border-color: color-mix(in srgb, var(--st-ok) 40%, transparent);     color: var(--st-ok); }
.srv-banner.st-warn   { background: color-mix(in srgb, var(--st-warn) 12%, transparent);   border-color: color-mix(in srgb, var(--st-warn) 40%, transparent);   color: var(--st-warn); }
.srv-banner.st-down   { background: color-mix(in srgb, var(--st-down) 12%, transparent);   border-color: color-mix(in srgb, var(--st-down) 40%, transparent);   color: var(--st-down); }
.srv-banner.st-nodata { background: color-mix(in srgb, var(--st-nodata) 12%, transparent); border-color: color-mix(in srgb, var(--st-nodata) 40%, transparent); color: var(--st-nodata); }
.srv-banner .srv-banner-detail { color: var(--bs-body-color); opacity: .8; }

.srv-tile { border-radius: .75rem; border-top: 3px solid var(--area); }
.srv-label { color: var(--area); font-weight: 600; font-size: .9rem; text-transform: lowercase; }
[data-bs-theme=dark] .srv-label { filter: brightness(1.35); }
.srv-big { font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin: .15rem 0; }
.srv-sec { font-size: .95rem; line-height: 1.35; }
.srv-tip, .help-tip { color: var(--bs-secondary-color); font-size: .8rem; cursor: help; margin-left: .15rem; font-weight: 400; }
/* «?» accanto ai titoli: apre il manuale alla sezione */
.help-manual { color: var(--bs-secondary-color); font-size: .85em; font-weight: 400; text-decoration: none; vertical-align: middle; margin-left: .15rem; }
.help-manual:hover, .help-manual:focus { color: var(--algor-accent); }
.srv-bar { height: 6px; border-radius: 3px; background: rgba(var(--bs-body-color-rgb), .12); margin: .35rem 0; overflow: hidden; }
.srv-bar-fill { height: 100%; background: var(--area); border-radius: 3px; transition: width .6s ease; }
.srv-bar-fill.warn { background: var(--st-warn); }
.srv-bar-fill.down { background: var(--st-down); }
.st-text-ok { color: var(--st-ok); }
.st-text-warn { color: var(--st-warn); }
.st-text-down { color: var(--st-down); }
.st-text-nodata { color: var(--bs-secondary-color); }
.srv-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); margin: 0 .3rem 0 .6rem; vertical-align: -1px; }
.srv-chart { height: auto; max-height: 320px; }  /* l'altezza segue il viewBox: niente vuoti né testo minuscolo */
.srv-chart .serie { stroke-width: 2; fill: none; stroke-linejoin: round; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: '▸'; display: inline-block; width: 1rem; color: var(--algor-accent-text); transition: transform .15s; }
details.card[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 576px) { .srv-big { font-size: 1.6rem; } .srv-banner-main { font-size: 1.15rem; } }