/* ============================================================
   SUPERMON UI MOD — DARK RADIO CONSOLE V1
   File esterno all'installazione Supermon.
   ============================================================ */

:root {
    --sm-bg: #090b0e;
    --sm-bg-2: #0f1318;
    --sm-panel: #141920;
    --sm-panel-2: #1a2028;

    --sm-border: #29313a;
    --sm-border-hi: #3b4652;

    --sm-text: #e6edf3;
    --sm-text-dim: #9ca8b4;
    --sm-text-faint: #66727e;

    --sm-amber: #ffb300;
    --sm-amber-soft: #d99a00;

    --sm-green: #52d273;
    --sm-red: #ff5b57;
    --sm-blue: #51a8ff;
    --sm-cyan: #55d6d0;

    --sm-radius: 9px;
    --sm-shadow: 0 8px 28px rgba(0,0,0,.30);
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        var(--sm-bg) !important;
    background-size: 24px 24px !important;

    color: var(--sm-text) !important;
    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    text-align: center;
}

a {
    color: var(--sm-blue);
}

a:visited {
    color: #91bdf0;
}

a:hover {
    color: #ffffff;
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

#header {
    position: relative !important;
    box-sizing: border-box !important;

    width: calc(100% - 20px) !important;
    max-width: 1440px !important;

    height: 148px !important;
    min-height: 148px !important;

    margin: 10px auto 0 auto !important;

    overflow: hidden;

    border: 1px solid var(--sm-border-hi);
    border-radius: 12px 12px 0 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    box-shadow: var(--sm-shadow);
}

/* scurisce la foto senza modificarla */
#header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.53) 42%,
            rgba(0,0,0,.15) 72%,
            rgba(0,0,0,.32) 100%
        );
}

#header > * {
    position: relative;
    z-index: 1;
}

#headerTitle {
    position: absolute !important;

    top: 17px !important;
    left: 22px !important;

    margin: 0 !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;

    text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

#headerTitle a,
#headerTitle a:link,
#headerTitle a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

#headerTitle a:hover {
    color: var(--sm-amber) !important;
}

#headerTag {
    top: 62px !important;
    left: 23px !important;

    color: #dce6ef !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;

    text-align: left;

    text-shadow: 0 2px 6px rgba(0,0,0,.9);
}

#header2Tag,
#header3Tag,
#header4Tag {
    color: var(--sm-amber) !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.9);
}

#headerLogin {
    top: auto !important;
    bottom: 12px !important;
    left: 22px !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 12px !important;
}

#headerLogin a,
#headerLogin a:link,
#headerLogin a:visited {
    display: inline-block;

    padding: 4px 10px;

    color: var(--sm-text-dim) !important;
    text-decoration: none !important;

    background: rgba(0,0,0,.48);

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 5px;
}

#headerLogin a:hover {
    color: white !important;
    border-color: var(--sm-amber);
}

/* logo corrente — lo sostituiremo in seguito */
#headerImg {
    top: 17px !important;
    right: 22px !important;
}

#headerImg img {
    max-height: 60px;
    width: auto;

    padding: 5px;

    background: rgba(255,255,255,.90);

    border-radius: 7px;

    box-shadow: 0 5px 18px rgba(0,0,0,.45);
}

#headerImg2 {
    top: 17px !important;
}

#mytilepic,
#mytilepic2 {
    top: 17px !important;
}

/* ------------------------------------------------------------
   MENU PRINCIPALE
   ------------------------------------------------------------ */

#menu {
    float: none !important;

    box-sizing: border-box !important;

    width: calc(100% - 20px) !important;
    max-width: 1440px !important;

    margin: 0 auto 16px auto !important;
    padding: 0 10px !important;

    background:
        linear-gradient(180deg, #171c22 0%, #101419 100%) !important;

    border-left: 1px solid var(--sm-border-hi);
    border-right: 1px solid var(--sm-border-hi);
    border-bottom: 1px solid var(--sm-border-hi);

    border-radius: 0 0 12px 12px !important;

    box-shadow: 0 8px 24px rgba(0,0,0,.24);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 13px !important;

    min-height: 39px;
}

#menu ul {
    float: none !important;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    margin: 0 !important;
    padding: 5px 0 !important;

    background: transparent !important;
}

#menu li {
    float: none !important;
}

#menu a,
#menu li a,
#menu li a:link,
#menu li a:visited {
    display: block !important;

    margin: 1px 2px;
    padding: 7px 10px !important;

    color: #cbd4dc !important;
    text-decoration: none !important;

    border: 1px solid transparent;
    border-radius: 6px;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

#menu a:hover,
#menu li a:hover {
    color: #ffffff !important;

    background: #222a33 !important;

    border-color: #3a4652;

    font-weight: inherit !important;
}

#menu a.active,
#menu li a.active {
    color: #0c0d0f !important;

    background: var(--sm-amber) !important;

    border-color: #ffc12e;

    font-weight: 700 !important;
}

#menu .dropdown-content {
    min-width: 190px !important;

    padding: 5px !important;

    background: #11161c !important;

    border: 1px solid var(--sm-border-hi);
    border-radius: 7px;

    box-shadow: 0 12px 30px rgba(0,0,0,.55) !important;
}

#menu .dropdown-content a {
    color: #d6dde5 !important;
    padding: 7px 9px !important;
}

#menu .dropdown-content a:hover {
    color: white !important;
    background: #252d36 !important;
}

/* ------------------------------------------------------------
   PULSANTI
   ------------------------------------------------------------ */

.submit,
.submit2 {
    appearance: none;

    min-height: 30px;

    margin: 2px 1px;
    padding: 5px 10px !important;

    color: #dce4eb !important;

    background:
        linear-gradient(180deg, #232a32 0%, #171c22 100%) !important;

    border: 1px solid #3b4651 !important;
    border-radius: 6px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 12px;

    cursor: pointer;

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 2px 4px rgba(0,0,0,.22);

    transition:
        background-color .12s ease,
        border-color .12s ease,
        color .12s ease,
        transform .08s ease;
}

.submit:hover,
.submit2:hover {
    color: #101215 !important;

    background: var(--sm-amber) !important;

    border-color: #ffd05b !important;

    font-weight: 600 !important;

    transform: translateY(-1px);
}

.submit:active,
.submit2:active {
    transform: translateY(0);
}

/* ------------------------------------------------------------
   PANNELLO COMANDI
   ------------------------------------------------------------ */

#connect_form {
    box-sizing: border-box;

    max-width: 650px;

    margin: 12px auto !important;
    padding: 14px !important;

    color: var(--sm-text);

    background:
        linear-gradient(180deg, #171d24, #101419);

    border: 1px solid var(--sm-border-hi);
    border-radius: var(--sm-radius) !important;

    box-shadow: var(--sm-shadow);
}

#connect_form input[type="text"],
#connect_form select {
    box-sizing: border-box;

    min-height: 31px;

    padding: 5px 8px;

    color: #f0f3f6;

    background: #080b0f;

    border: 1px solid #3b4651;
    border-radius: 5px;

    outline: none;
}

#connect_form input[type="text"]:focus,
#connect_form select:focus {
    border-color: var(--sm-amber);

    box-shadow: 0 0 0 2px rgba(255,179,0,.15);
}

/* ------------------------------------------------------------
   TABELLE NODI
   ------------------------------------------------------------ */

table.gridtable {
    box-sizing: border-box;

    width: calc(100% - 24px) !important;
    max-width: 1400px !important;

    margin: 10px auto 18px auto !important;

    padding: 0 !important;

    color: var(--sm-text) !important;

    background: var(--sm-panel);

    border: 1px solid var(--sm-border-hi) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    border-radius: var(--sm-radius);

    overflow: hidden;

    box-shadow: var(--sm-shadow);

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 12px !important;
}

/* Titolo del nodo */
table.gridtable thead tr:first-child th {
    padding: 10px 12px !important;

    color: #f6f8fa !important;

    background:
        linear-gradient(180deg, #222a33, #181e25) !important;

    border: 0 !important;
    border-bottom: 1px solid var(--sm-border-hi) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left;
}

table.gridtable thead tr:first-child th a {
    color: var(--sm-amber) !important;
    text-decoration: none;
}

table.gridtable thead tr:first-child th a:hover {
    color: #ffd15f !important;
}

/* intestazioni colonne */
table.gridtable thead tr:nth-child(2) th {
    padding: 8px 8px !important;

    color: #aebac5 !important;

    background: #0f1419 !important;

    border: 0 !important;
    border-right: 1px solid #252c34 !important;
    border-bottom: 1px solid var(--sm-border-hi) !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .45px;
    text-transform: uppercase;
}

table.gridtable thead tr:nth-child(2) th:last-child {
    border-right: 0 !important;
}

table.gridtable td {
    padding: 7px 8px !important;

    color: #dbe2e8 !important;

    background: #151a20 !important;

    border: 0 !important;
    border-right: 1px solid #242b32 !important;
    border-bottom: 1px solid #242b32 !important;

    font-size: 12px !important;

    transition: background-color .12s ease;
}

table.gridtable td:last-child {
    border-right: 0 !important;
}

table.gridtable tbody tr:last-child td {
    border-bottom: 0 !important;
}

table.gridtable tbody tr:hover td {
    background: #1d242c !important;
}

/* Numero nodo cliccabile */
table.gridtable .nodeNum {
    color: #ffffff !important;

    font-weight: 700;

    cursor: pointer;
}

table.gridtable .nodeNum:hover {
    color: var(--sm-amber) !important;
}

/* ------------------------------------------------------------
   STATI RADIO
   ------------------------------------------------------------ */

/* rColor */
table.gridtable tr.rColor td {
    color: #d9e1e8 !important;

    background: #10151a !important;
}

/* cColor */
table.gridtable tr.cColor td {
    color: #ffffff !important;

    background: rgba(182,44,44,.72) !important;

    font-weight: 600;
}

table.gridtable tr.cColor td:first-child {
    box-shadow: inset 4px 0 0 var(--sm-red);
}

/* Full duplex */
table.gridtable tr.bColor td {
    color: #dfffea !important;

    background: rgba(29,101,56,.52) !important;

    font-weight: 700 !important;
}

table.gridtable tr.bColor td:first-child {
    box-shadow: inset 4px 0 0 var(--sm-green);
}

/* Idle */
table.gridtable tr.gColor td {
    color: #c4cdd6 !important;

    background: #1b2127 !important;

    font-weight: 600 !important;
}

table.gridtable tr.gColor td:first-child {
    box-shadow: inset 4px 0 0 #66727e;
}

/* PTT KEYED / TX */
table.gridtable tr.tColor td {
    color: #ffffff !important;

    background: rgba(151,41,44,.65) !important;

    font-weight: 700 !important;
}

table.gridtable tr.tColor td:first-child {
    box-shadow: inset 4px 0 0 var(--sm-red);
}

/* COS / RX */
table.gridtable tr.lColor td {
    color: #fff3cc !important;

    background: rgba(118,84,13,.56) !important;

    font-weight: 700 !important;
}

table.gridtable tr.lColor td:first-child {
    box-shadow: inset 4px 0 0 var(--sm-amber);
}

/* ------------------------------------------------------------
   LINK SECONDARI
   ------------------------------------------------------------ */

#bubblechart,
#lsnodeschart,
#website {
    font-size: 10px !important;

    padding: 2px 5px;

    color: #9ecbff !important;

    background: rgba(81,168,255,.08);

    border: 1px solid rgba(81,168,255,.20);
    border-radius: 4px;

    text-decoration: none;
}

#bubblechart:hover,
#lsnodeschart:hover,
#website:hover {
    color: white !important;

    border-color: rgba(81,168,255,.60);
}

/* ------------------------------------------------------------
   JQUERY UI / LOGIN
   ------------------------------------------------------------ */

.ui-widget-content {
    color: var(--sm-text) !important;
    background: #141a20 !important;

    border-color: var(--sm-border-hi) !important;
}

.ui-widget-header {
    color: white !important;

    background: #202832 !important;

    border-color: var(--sm-border-hi) !important;
}

.ui-dialog {
    box-shadow: 0 20px 60px rgba(0,0,0,.65);
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

#footer {
    box-sizing: border-box;

    width: calc(100% - 24px);
    max-width: 1400px;

    margin: 18px auto 25px auto;

    padding: 12px;

    color: var(--sm-text-faint) !important;

    border-top: 1px solid #20272e;

    font-size: 10px !important;
}

#footer a {
    color: var(--sm-text-dim) !important;
}

/* ------------------------------------------------------------
   ALTRO
   ------------------------------------------------------------ */

#spinny {
    color: var(--sm-amber) !important;
}

.disconnect,
.text {
    color: var(--sm-text) !important;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 850px) {

    body {
        font-size: 12px !important;
    }

    #header {
        width: calc(100% - 10px) !important;

        height: 168px !important;
        min-height: 168px !important;

        margin-top: 5px !important;
    }

    #headerTitle {
        top: 14px !important;
        left: 14px !important;

        max-width: calc(100% - 150px);

        font-size: 17px !important;
    }

    #headerTag {
        top: 64px !important;
        left: 15px !important;

        font-size: 12px !important;
    }

    #headerLogin {
        left: 14px !important;
        bottom: 10px !important;
    }

    #headerImg {
        top: 14px !important;
        right: 13px !important;
    }

    #headerImg img {
        max-width: 115px;
        max-height: 50px;
    }

    #menu {
        width: calc(100% - 10px) !important;
        padding: 0 5px !important;
    }

    #menu ul {
        flex-wrap: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    #menu li {
        flex: 0 0 auto;
    }

    #menu a,
    #menu li a {
        white-space: nowrap;
    }

    table.gridtable {
        display: block;

        width: calc(100% - 10px) !important;

        overflow-x: auto;

        white-space: nowrap;

        -webkit-overflow-scrolling: touch;
    }

    table.gridtable th,
    table.gridtable td {
        font-size: 11px !important;
    }

    #connect_form {
        width: calc(100% - 12px);
    }
}

@media (max-width: 520px) {

    #headerTitle {
        font-size: 15px !important;
    }

    #headerTag {
        font-size: 11px !important;
    }

    .submit,
    .submit2 {
        min-height: 32px;
    }
}

/* === BEGIN SUPERMON MENU HORIZONTAL V2 === */

/*
 * Supermon genera diversi UL separati.
 * Rendiamo orizzontali sia gli UL sia i relativi LI.
 */

#menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 6px !important;

    width: calc(100% - 20px) !important;
    max-width: 1440px !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 auto 16px auto !important;
    padding: 8px 10px !important;

    background:
        linear-gradient(180deg, #171d24 0%, #0e1318 100%) !important;

    border-left: 1px solid var(--sm-border-hi) !important;
    border-right: 1px solid var(--sm-border-hi) !important;
    border-bottom: 1px solid var(--sm-border-hi) !important;

    border-radius: 0 0 12px 12px !important;

    overflow: visible !important;
}

/* Ogni UL diventa semplicemente un contenitore del pulsante */
#menu ul {
    display: flex !important;
    flex: 0 0 auto !important;

    float: none !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    list-style: none !important;
}

/* Nessuna disposizione verticale */
#menu li {
    display: block !important;
    float: none !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* PULSANTI MENU */
#menu a,
#menu li a,
#menu li a:link,
#menu li a:visited,
#menu .dropbtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    min-height: 34px !important;

    margin: 0 !important;
    padding: 7px 13px !important;

    white-space: nowrap !important;

    color: #d7e0e8 !important;

    background:
        linear-gradient(
            180deg,
            #252d36 0%,
            #171d23 100%
        ) !important;

    border: 1px solid #3c4854 !important;
    border-radius: 7px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 2px 5px rgba(0,0,0,.25) !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .10s ease !important;
}

#menu a:hover,
#menu li a:hover,
#menu .dropbtn:hover {
    color: #101215 !important;

    background:
        linear-gradient(
            180deg,
            #ffc43d 0%,
            #ffab00 100%
        ) !important;

    border-color: #ffd264 !important;

    transform: translateY(-1px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 4px 9px rgba(0,0,0,.32) !important;
}

/* Nodo/pagina selezionata */
#menu a.active,
#menu li a.active {
    color: #0b0d0f !important;

    background:
        linear-gradient(
            180deg,
            #ffc83e 0%,
            #ffad00 100%
        ) !important;

    border-color: #ffd970 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 0 0 1px rgba(255,179,0,.20),
        0 3px 10px rgba(0,0,0,.30) !important;

    font-weight: 700 !important;
}

/* Dropdown eventualmente presenti */
#menu li.dropdown {
    position: relative !important;
    display: block !important;
}

#menu .dropdown-content {
    position: absolute !important;

    top: calc(100% + 5px) !important;
    left: 0 !important;

    min-width: 200px !important;

    padding: 6px !important;

    background: #11171d !important;

    border: 1px solid #3c4854 !important;
    border-radius: 8px !important;

    box-shadow: 0 14px 35px rgba(0,0,0,.55) !important;

    z-index: 1000 !important;
}

#menu .dropdown-content a {
    display: flex !important;

    width: 100% !important;

    margin: 2px 0 !important;

    justify-content: flex-start !important;
}

/* Tablet */
@media (max-width: 900px) {

    #menu {
        justify-content: flex-start !important;

        gap: 5px !important;

        padding: 7px !important;
    }

    #menu a,
    #menu li a,
    #menu .dropbtn {
        min-height: 32px !important;

        padding: 6px 10px !important;

        font-size: 11px !important;
    }
}

/* Telefono: barra scorrevole invece di colonna verticale */
@media (max-width: 600px) {

    #menu {
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: visible !important;

        -webkit-overflow-scrolling: touch;
    }

    #menu ul {
        flex: 0 0 auto !important;
    }
}

/* === END SUPERMON MENU HORIZONTAL V2 === */

/* === BEGIN SUPERMON POLISH V3 === */

/* ============================================================
   HEADER — FIX POSIZIONAMENTO
   ============================================================ */

/*
 * Non imponiamo più position:relative a tutti i figli.
 * Questo era il motivo del logo e Login/Logout al centro.
 */
#header > * {
    z-index: 1;
}

/* Elementi realmente sovrapposti alla fotografia */
#headerTitle,
#headerTag,
#header2Tag,
#header3Tag,
#header4Tag,
#headerLogin,
#headerImg,
#headerImg2,
#mytilepic,
#mytilepic2 {
    position: absolute !important;
}

/* Titolo */
#headerTitle {
    top: 17px !important;
    left: 20px !important;
}

/* Roma / Server */
#headerTag {
    top: 58px !important;
    left: 21px !important;
}

/* Login / Logout */
#headerLogin {
    top: auto !important;
    bottom: 13px !important;
    left: 20px !important;

    margin: 0 !important;
}

#headerLogin a,
#headerLogin a:link,
#headerLogin a:visited {
    min-width: 48px;

    padding: 5px 10px !important;

    color: #cdd6de !important;

    background: rgba(8,12,16,.74) !important;

    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 6px !important;

    backdrop-filter: blur(4px);

    text-align: center;
}

#headerLogin a:hover {
    color: #111 !important;

    background: var(--sm-amber) !important;
    border-color: #ffd05c !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ============================================================
   LOGO ALLSTAR
   ============================================================ */

#headerImg {
    top: 14px !important;
    right: 18px !important;

    left: auto !important;
    bottom: auto !important;

    margin: 0 !important;
}

#headerImg a {
    display: block;

    padding: 0 !important;
    margin: 0 !important;

    line-height: 0;
}

#headerImg img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 118px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    object-fit: contain;

    background: rgba(250,252,248,.94) !important;

    border: 1px solid rgba(255,255,255,.60) !important;
    border-radius: 7px !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

/* Eventuale secondo logo */
#headerImg2 {
    top: 14px !important;
    right: 155px !important;
    left: auto !important;
}

#mytilepic {
    top: 14px !important;
    right: 155px !important;
    left: auto !important;
}

#mytilepic2 {
    top: 14px !important;
    right: 270px !important;
    left: auto !important;
}

/* ============================================================
   MENU — PICCOLA RIFINITURA
   ============================================================ */

#menu {
    border-top: 1px solid rgba(255,255,255,.03) !important;
}

#menu a,
#menu li a,
#menu .dropbtn {
    letter-spacing: .05px;
}

/* ============================================================
   PANNELLO COMANDI
   ============================================================ */

#connect_form {
    max-width: 720px !important;

    margin-top: 14px !important;
    margin-bottom: 10px !important;

    padding: 17px 18px 14px 18px !important;

    background:
        linear-gradient(
            180deg,
            rgba(25,32,40,.98) 0%,
            rgba(16,21,27,.98) 100%
        ) !important;

    border-color: #394653 !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#connect_form #node {
    width: 190px !important;
}

#connect_form input[type="text"] {
    height: 33px !important;
}

#connect_form .submit,
#connect_form .submit2 {
    min-height: 30px !important;
}

/* Azioni potenzialmente critiche */
#astaroff,
#fastrestart,
#reboot {
    border-color: rgba(255,91,87,.55) !important;
}

#astaroff:hover,
#fastrestart:hover,
#reboot:hover {
    color: #fff !important;

    background: #a93434 !important;
    border-color: #ff6863 !important;
}

/* Azioni positive */
#astaron {
    border-color: rgba(82,210,115,.45) !important;
}

#astaron:hover {
    color: #07120a !important;

    background: var(--sm-green) !important;
    border-color: #7fe398 !important;
}

/* ============================================================
   SUPPORT / DIGITAL DASHBOARD / DISPLAY CONFIGURATION
   ============================================================ */

/*
 * Questa è la P generata direttamente da link.php.
 * La trasformiamo in una toolbar indipendente.
 */
p[style*="margin-bottom:5px"][style*="margin-top:10px"] {
    box-sizing: border-box;

    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 6px;

    width: fit-content;
    max-width: calc(100% - 24px);

    margin: 11px auto 5px auto !important;
    padding: 7px 8px !important;

    color: var(--sm-text-dim);

    background:
        linear-gradient(
            180deg,
            rgba(26,33,41,.92),
            rgba(14,19,24,.92)
        );

    border: 1px solid #303b46;
    border-radius: 8px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025);
}

p[style*="margin-bottom:5px"][style*="margin-top:10px"] .submit {
    min-height: 31px !important;

    margin: 0 !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
}

/* Digital Dashboard leggermente evidenziata */
p[style*="margin-bottom:5px"][style*="margin-top:10px"]
.submit:nth-of-type(2) {
    border-color: rgba(81,168,255,.52) !important;
}

/* ============================================================
   METEO
   ============================================================ */

p[style*="margin-top:8px"] {
    box-sizing: border-box;

    display: inline-block;

    margin: 4px auto 10px auto !important;
    padding: 5px 12px !important;

    color: #9eabb7 !important;

    background: rgba(15,20,25,.72);

    border: 1px solid #26303a;
    border-radius: 7px;

    font-size: 10px !important;
    line-height: 1.45 !important;
}

p[style*="margin-top:8px"] span {
    color: #e3eaf0 !important;

    font-size: 11px !important;
}

/* ============================================================
   TABELLA — PICCOLA RIFINITURA
   ============================================================ */

table.gridtable {
    margin-top: 5px !important;
}

table.gridtable thead tr:first-child th {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

table.gridtable tbody tr:hover td {
    background: #202832 !important;
}

/* Colonna NODE più netta */
table.gridtable td:first-child,
table.gridtable th:first-child {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 850px) {

    #headerImg {
        top: 12px !important;
        right: 12px !important;
    }

    #headerImg img {
        max-width: 95px !important;
        max-height: 48px !important;
    }

    #headerLogin {
        left: 14px !important;
        bottom: 11px !important;
    }

    #connect_form {
        width: calc(100% - 16px) !important;
    }

    p[style*="margin-bottom:5px"][style*="margin-top:10px"] {
        width: calc(100% - 16px);
    }
}

/* === END SUPERMON POLISH V3 === */

/* === LOGIN LOGOUT RIGHT === */

#headerLogin {
    position: absolute !important;

    top: auto !important;
    right: 18px !important;
    bottom: 12px !important;
    left: auto !important;

    margin: 0 !important;

    z-index: 30 !important;
}

#headerLogin a,
#headerLogin a:link,
#headerLogin a:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 58px;

    padding: 5px 10px !important;

    color: #dce5ec !important;

    background: rgba(8,12,16,.78) !important;

    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 6px !important;

    text-decoration: none !important;

    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

#headerLogin a:hover {
    color: #101215 !important;

    background: var(--sm-amber) !important;

    border-color: #ffd05b !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}

@media (max-width: 850px) {
    #headerLogin {
        right: 12px !important;
        bottom: 10px !important;
        left: auto !important;
    }
}

/* === END LOGIN LOGOUT RIGHT === */

/* === LOGIN LOGOUT RIGHT === */

#headerLogin {
    position: absolute !important;

    top: auto !important;
    right: 18px !important;
    bottom: 12px !important;
    left: auto !important;

    margin: 0 !important;

    z-index: 30 !important;
}

#headerLogin a,
#headerLogin a:link,
#headerLogin a:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 58px;

    padding: 5px 10px !important;

    color: #dce5ec !important;

    background: rgba(8,12,16,.78) !important;

    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 6px !important;

    text-decoration: none !important;

    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

#headerLogin a:hover {
    color: #101215 !important;

    background: var(--sm-amber) !important;

    border-color: #ffd05b !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}

@media (max-width: 850px) {
    #headerLogin {
        right: 12px !important;
        bottom: 10px !important;
        left: auto !important;
    }
}

/* === END LOGIN LOGOUT RIGHT === */

/* === BEGIN HEADER PHOTO CUSTOM === */

/*
 * Cambia esclusivamente la fotografia dell'header.
 * Nessuna modifica a Login/Logout, logo, menu o Supermon.
 */

#header {
    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.42) 42%,
            rgba(0,0,0,.12) 72%,
            rgba(0,0,0,.28) 100%
        ),
        url("/supermon-ui/assets/monte-mario-radio.jpg") !important;

    background-size: cover !important;
    background-position: center 42% !important;
    background-repeat: no-repeat !important;
}

/* disabilita il vecchio overlay perché è già incluso sopra */
#header::before {
    background: transparent !important;
}

/* === END HEADER PHOTO CUSTOM === */

/* === BEGIN ASL TETRA BOT LOGO === */

/*
 * Logo del bot asl_tetra_bot.
 * Modifica esclusivamente il logo dell'header.
 */

#headerImg {
    position: absolute !important;

    top: 10px !important;
    right: 16px !important;
    left: auto !important;

    width: 94px !important;
    height: 94px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/supermon-ui/assets/asl-tetra-bot.png") !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.55) !important;

    z-index: 20 !important;
}

/* nasconde soltanto il vecchio logo AllStar */
#headerImg img {
    display: none !important;
}

/* il vecchio link AllStar non deve essere cliccabile sul nuovo logo */
#headerImg a {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    pointer-events: none !important;
}

/* Login/Logout resta sotto il logo, a destra */
#headerLogin {
    right: 18px !important;
    bottom: 10px !important;
    left: auto !important;

    z-index: 30 !important;
}

@media (max-width: 850px) {

    #headerImg {
        top: 9px !important;
        right: 11px !important;

        width: 78px !important;
        height: 78px !important;
    }

    #headerLogin {
        right: 11px !important;
        bottom: 9px !important;
    }
}

/* === END ASL TETRA BOT LOGO === */


/* === BEGIN WEATHER CARD V2 === */

/*
 * Card larga ma sempre contenuta nella pagina.
 * Desktop: 6 celle orizzontali.
 * Tablet: 3 + 3.
 * Telefono: 2 + 2 + 2.
 */

.sm-weather-card {
    box-sizing: border-box !important;

    display: grid !important;

    grid-template-columns:
        54px
        minmax(240px, 1fr)
        auto !important;

    grid-template-areas:
        "icon main temp"
        "data data data" !important;

    gap: 8px 14px !important;

    width: calc(100% - 32px) !important;
    max-width: 1120px !important;

    margin: 8px auto 14px auto !important;
    padding: 11px 12px !important;

    color: #e8eef4 !important;

    background:
        linear-gradient(
            135deg,
            rgba(25,33,41,.98),
            rgba(11,16,21,.98)
        ) !important;

    border: 1px solid #394754 !important;
    border-radius: 10px !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.035) !important;

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    text-align: left !important;
}

.sm-weather-icon {
    grid-area: icon;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    font-size: 32px;

    background: rgba(255,255,255,.035);

    border: 1px solid #313e49;
    border-radius: 9px;
}

.sm-weather-main {
    grid-area: main;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.sm-weather-place {
    color: #f3f6f9;

    font-size: 15px;
    font-weight: 700;
}

.sm-weather-place span {
    display: inline-block;

    margin-left: 7px;
    padding: 2px 5px;

    color: #ffbd27;

    background: rgba(255,179,0,.08);

    border: 1px solid rgba(255,179,0,.28);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .5px;
}

.sm-weather-condition {
    margin-top: 3px;

    color: #99a8b5;

    font-size: 11px;
}

.sm-weather-source {
    margin-left: 8px;

    color: #566674;

    font-size: 8px;

    white-space: nowrap;
}

.sm-weather-temp {
    grid-area: temp;

    align-self: center;

    padding-right: 5px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 300;

    line-height: 1;

    white-space: nowrap;
}

.sm-weather-temp span {
    margin-left: 2px;

    color: #aebac5;

    font-size: 15px;
    font-weight: 500;
}

/* Sei celle orizzontali */
.sm-weather-data {
    grid-area: data;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    margin-top: 2px;

    background: rgba(4,8,11,.35);

    border: 1px solid #29343e;
    border-radius: 7px;

    overflow: hidden;
}

.sm-weather-data > div {
    box-sizing: border-box;

    min-width: 0;
    min-height: 43px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 6px 8px;

    border-right: 1px solid #29343e;

    text-align: center;
}

.sm-weather-data > div:last-child {
    border-right: 0;
}

.sm-weather-data small {
    display: block;

    margin-bottom: 3px;

    color: #71808d;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .65px;

    white-space: nowrap;
}

.sm-weather-data strong {
    display: block;

    color: #dce5ec;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

    max-width: 100%;
}

/* ------------------------------------------------------------
   ASTERISK STATUS
   Mantiene la logica del vecchio / \ | -
   ------------------------------------------------------------ */

#spinny {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    min-width: 142px;
    min-height: 27px;

    margin: 10px auto 7px auto !important;
    padding: 5px 10px !important;

    background:
        linear-gradient(
            180deg,
            rgba(26,33,41,.92),
            rgba(11,16,21,.92)
        );

    border: 1px solid #313e49;
    border-radius: 6px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.03);

    /*
     * Nasconde soltanto il carattere / | \ -
     * senza modificarlo nel DOM.
     */
    font-size: 0 !important;
}

#spinny::before {
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .65px;
}

#spinny[data-sm-ast-state="online"]::before {
    content: "●  ASTERISK ACTIVE";

    color: #ffb300;

    text-shadow:
        0 0 7px rgba(255,179,0,.28);
}

#spinny[data-sm-ast-state="other"]::before {
    content: "●  ASTERISK STATUS";

    color: #ff6b61;
}

#spinny[data-sm-ast-state="idle"]::before {
    content: "○  ASTERISK";

    color: #65727d;
}

/* Tablet: 3 + 3, sempre orizzontale */
@media (max-width: 900px) {

    .sm-weather-card {
        width: calc(100% - 18px) !important;

        grid-template-columns:
            48px
            minmax(180px, 1fr)
            auto !important;
    }

    .sm-weather-data {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .sm-weather-data > div:nth-child(3) {
        border-right: 0;
    }

    .sm-weather-data > div:nth-child(-n+3) {
        border-bottom: 1px solid #29343e;
    }
}

/* Telefono: 2 + 2 + 2 */
@media (max-width: 560px) {

    .sm-weather-card {
        grid-template-columns:
            44px
            minmax(120px, 1fr)
            auto !important;

        gap: 7px 9px !important;

        padding: 9px !important;
    }

    .sm-weather-icon {
        width: 42px;
        height: 42px;

        font-size: 27px;
    }

    .sm-weather-place {
        font-size: 12px;
    }

    .sm-weather-temp {
        font-size: 23px;
    }

    .sm-weather-data {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sm-weather-data > div {
        border-right: 1px solid #29343e !important;
        border-bottom: 1px solid #29343e;
    }

    .sm-weather-data > div:nth-child(even) {
        border-right: 0 !important;
    }

    .sm-weather-data > div:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}

/* === END WEATHER CARD V2 === */



/* === BEGIN SUPERMON HOME VOTER V2 === */

/* ============================================================
   BLOCCO PRINCIPALE
   Stessa larghezza del meteo e della tabella originale.
   Il voter NON sottrae più spazio alla tabella.
   ============================================================ */

.sm-home-mainrow {
    position: relative !important;

    display: block !important;

    box-sizing: border-box !important;

    width: calc(100% - 32px) !important;
    max-width: 1120px !important;

    margin:
        9px auto
        4px auto !important;

    overflow: visible !important;

    text-align: left !important;
}

.sm-home-node-wrap {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
}

.sm-home-node-wrap table.gridtable {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}

/* ============================================================
   COLONNA VOTER ESTERNA

                METEO
   ┌──────────────────────────┐ ┌──── VOTER 1 ────┐
   │                          │ │                  │
   └──────────────────────────┘ ├──── VOTER 2 ────┤
                                │                  │
   ┌──────────────────────────┐ ├──── VOTER 3 ────┤
   │     TABELLA ALLSTAR      │ │                  │
   │                          │ │                  │
   └──────────────────────────┘ │      vuoto       │
                                │                  │

   ============================================================ */

.sm-home-voter-column {
    position: absolute !important;

    top: 0 !important;

    /*
     * Parte esattamente dopo il bordo destro
     * della tabella/meteo.
     */
    left: calc(100% + 12px) !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;

    gap: 10px !important;

    width: 228px !important;

    margin: 0 !important;
    padding: 0 !important;

    /*
     * Nessun background sulla colonna:
     * la zona sotto l'ultimo voter resta realmente vuota.
     */
    background: transparent !important;

    border: 0 !important;

    overflow: visible !important;
}

/* ============================================================
   SINGOLA CARD VOTER
   ============================================================ */

.sm-home-voter {
    box-sizing: border-box !important;

    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    color: #dfe7ed !important;

    background:
        linear-gradient(
            180deg,
            rgba(24,31,38,.98),
            rgba(11,16,21,.98)
        ) !important;

    border: 1px solid #394754 !important;
    border-radius: 8px !important;

    overflow: hidden !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.26),
        inset 0 1px rgba(255,255,255,.03) !important;
}

.sm-home-voter-head {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 7px !important;

    min-height: 40px !important;

    padding: 7px 8px !important;

    background:
        linear-gradient(
            180deg,
            #202933,
            #171e26
        ) !important;

    border-bottom:
        1px solid #35414c !important;
}

.sm-home-voter-title small {
    display: block !important;

    margin-bottom: 1px !important;

    color: #72818e !important;

    font-size: 6px !important;
    font-weight: 700 !important;

    letter-spacing: .7px !important;
}

.sm-home-voter-title strong {
    color: #f0f4f7 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}

/* LIVE */

.sm-home-voter-live {
    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    padding: 2px 4px !important;

    color: #83909a !important;

    background:
        rgba(255,255,255,.025) !important;

    border: 1px solid #34404a !important;
    border-radius: 4px !important;

    font-size: 6px !important;
    font-weight: 700 !important;

    letter-spacing: .4px !important;
}

.sm-home-voter-live span {
    width: 5px !important;
    height: 5px !important;

    background: #66727b !important;

    border-radius: 50% !important;
}

.sm-home-voter-live[data-state="online"] {
    color: #9bd5a6 !important;

    border-color:
        rgba(91,188,109,.30) !important;
}

.sm-home-voter-live[data-state="online"] span {
    background: #5fcb73 !important;

    box-shadow:
        0 0 6px rgba(95,203,115,.65) !important;
}

/* BODY */

.sm-home-voter-body {
    display: flex !important;
    flex-direction: column !important;

    gap: 6px !important;

    padding: 7px !important;
}

.sm-home-voter-wait {
    padding: 16px 5px !important;

    color: #75838e !important;

    font-size: 8px !important;

    text-align: center !important;
}

/* CLIENT */

.sm-voter-client {
    padding: 6px !important;

    background:
        rgba(5,9,12,.32) !important;

    border:
        1px solid #2a343d !important;

    border-radius: 5px !important;
}

.sm-voter-client + .sm-voter-client {
    margin-top: 0 !important;
}

.sm-voter-client-top {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 5px !important;

    margin-bottom: 6px !important;
}

.sm-voter-client-top strong {
    min-width: 0 !important;

    color: #e5ebf0 !important;

    font-size: 8px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
}

.sm-voter-state {
    flex: 0 0 auto !important;

    padding: 1px 3px !important;

    border-radius: 3px !important;

    font-size: 5px !important;
    font-weight: 800 !important;

    letter-spacing: .3px !important;
}

.sm-voter-state.voted {
    color: #aee484 !important;

    background:
        rgba(145,210,78,.08) !important;

    border:
        1px solid rgba(145,210,78,.25) !important;
}

.sm-voter-state.voting {
    color: #68bfff !important;

    background:
        rgba(0,153,255,.08) !important;

    border:
        1px solid rgba(0,153,255,.25) !important;
}

.sm-voter-state.mix {
    color: #6fdde3 !important;

    background:
        rgba(0,220,230,.07) !important;

    border:
        1px solid rgba(0,220,230,.22) !important;
}

/* RSSI */

.sm-voter-rssi-line {
    display: grid !important;

    grid-template-columns:
        minmax(0,1fr)
        22px !important;

    align-items: center !important;

    gap: 5px !important;
}

.sm-voter-rssi-track {
    height: 12px !important;

    background: #06090c !important;

    border:
        1px solid #303a43 !important;

    border-radius: 4px !important;

    overflow: hidden !important;
}

.sm-voter-rssi-fill {
    height: 100% !important;

    min-width: 2px !important;

    transition:
        width .18s linear !important;
}

.sm-voter-rssi-fill.voted {
    background:
        linear-gradient(
            90deg,
            #668f3e,
            #9bd85f
        ) !important;
}

.sm-voter-rssi-fill.voting {
    background:
        linear-gradient(
            90deg,
            #0068a8,
            #0099ff
        ) !important;
}

.sm-voter-rssi-fill.mix {
    background:
        linear-gradient(
            90deg,
            #198a91,
            #29d7df
        ) !important;
}

.sm-voter-rssi-line b {
    color: #f0f3f5 !important;

    font-family: Consolas, monospace !important;

    font-size: 8px !important;

    text-align: right !important;
}

.sm-voter-scale {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    margin-top: 2px !important;
    padding-right: 27px !important;

    color: #53616d !important;

    font-size: 5px !important;
}

.sm-voter-scale small {
    font-size: 5px !important;
}

/* LINK */

.sm-home-voter-open {
    display: block !important;

    padding: 6px !important;

    color: #8e9ba6 !important;

    background:
        rgba(0,0,0,.14) !important;

    border-top:
        1px solid #2b353e !important;

    font-size: 6px !important;
    font-weight: 700 !important;

    letter-spacing: .4px !important;

    text-align: center !important;

    text-decoration: none !important;
}

.sm-home-voter-open:hover {
    color: #ffb300 !important;
}

/* ============================================================
   SPIRALE ASTERISK
   Manteniamo quella già scelta, senza @.
   ============================================================ */

#spinny {
    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 30px !important;
    min-width: 30px !important;

    height: 30px !important;
    min-height: 30px !important;

    margin: 10px auto 7px auto !important;

    padding: 0 !important;

    font-size: 0 !important;

    background:
        radial-gradient(
            circle,
            rgba(255,179,0,.055),
            rgba(255,179,0,.025) 48%,
            transparent 50%
        ) !important;

    border:
        1px solid rgba(255,179,0,.27) !important;

    border-radius: 50% !important;
}

#spinny::before {
    content: "" !important;

    position: absolute !important;

    width: 17px !important;
    height: 17px !important;

    border: 2px solid transparent !important;

    border-top-color: #ffb300 !important;
    border-right-color: #ffb300 !important;

    border-bottom-color:
        rgba(255,179,0,.20) !important;

    border-radius: 50% !important;

    animation:
        sm-debian-swirl
        1.05s linear infinite !important;
}

#spinny::after {
    content: "" !important;

    position: absolute !important;

    width: 8px !important;
    height: 8px !important;

    margin-left: -2px !important;
    margin-top: 2px !important;

    border: 2px solid transparent !important;

    border-left-color: #ffb300 !important;
    border-bottom-color: #ffb300 !important;

    border-radius: 50% !important;

    animation:
        sm-debian-swirl-inner
        .82s linear infinite !important;
}

@keyframes sm-debian-swirl {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes sm-debian-swirl-inner {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

/*
 * Solo su schermi veramente piccoli rinunciamo alla sidebar.
 */
@media (max-width: 1050px) {

    .sm-home-voter-column {
        position: static !important;

        width: 100% !important;

        margin-top: 10px !important;
    }

}

/* === END SUPERMON HOME VOTER V2 === */





/* === BEGIN LOCAL NODE STEP2 === */

/*
 * Stato nodo locale generato nativamente da Supermon:
 *
 * gColor = Idle
 * tColor = PTT-Keyed
 * lColor = COS-Detected
 * bColor = COS + PTT / Full Duplex
 *
 * Nessun JavaScript.
 */

/* Nodo locale leggermente più riconoscibile */
table.gridtable tbody tr.gColor td:first-child,
table.gridtable tbody tr.tColor td:first-child,
table.gridtable tbody tr.lColor td:first-child,
table.gridtable tbody tr.bColor td:first-child {
    font-weight: 700 !important;

    box-shadow:
        inset 3px 0 0 currentColor !important;
}

/* Pallino di stato */
table.gridtable tbody tr.gColor td:first-child::before,
table.gridtable tbody tr.tColor td:first-child::before,
table.gridtable tbody tr.lColor td:first-child::before,
table.gridtable tbody tr.bColor td:first-child::before {
    content: "●" !important;

    display: inline-block !important;

    margin-right: 5px !important;

    font-size: 7px !important;

    vertical-align: 1px !important;
}

/* IDLE */
table.gridtable tbody tr.gColor td:first-child {
    color: #72cf84 !important;
}

table.gridtable tbody tr.gColor td:nth-child(2) {
    color: #9fcaaa !important;
}

/* PTT / TX */
table.gridtable tbody tr.tColor td:first-child {
    color: #ffb300 !important;
}

table.gridtable tbody tr.tColor td:nth-child(2) {
    color: #e6bd69 !important;
}

/* COS / RX */
table.gridtable tbody tr.lColor td:first-child {
    color: #55bde9 !important;
}

table.gridtable tbody tr.lColor td:nth-child(2) {
    color: #9bcde2 !important;
}

/* FULL DUPLEX */
table.gridtable tbody tr.bColor td:first-child {
    color: #ff6b5e !important;
}

table.gridtable tbody tr.bColor td:nth-child(2) {
    color: #e8a09a !important;
}

/* === END LOCAL NODE STEP2 === */

/* === BEGIN TABLE HOVER STEP3 === */

/*
 * Evidenzia solo le righe remote normali.
 * Le righe di stato locale gColor/tColor/lColor/bColor
 * restano completamente indipendenti.
 */

table.gridtable tbody tr:not(.gColor):not(.tColor):not(.lColor):not(.bColor) td {
    transition:
        background-color .12s ease,
        color .12s ease,
        box-shadow .12s ease !important;
}

table.gridtable tbody tr:not(.gColor):not(.tColor):not(.lColor):not(.bColor):hover td {
    background-color: #1b242c !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.018),
        inset 0 -1px rgba(255,179,0,.07) !important;
}

/* Nodo della riga sotto il mouse */
table.gridtable tbody tr:not(.gColor):not(.tColor):not(.lColor):not(.bColor):hover td:first-child {
    color: #ffbd27 !important;
}

/* Informazione principale leggermente più chiara */
table.gridtable tbody tr:not(.gColor):not(.tColor):not(.lColor):not(.bColor):hover td:nth-child(2) {
    color: #f1f4f6 !important;
}

/* === END TABLE HOVER STEP3 === */

/* === BEGIN TABLE COLUMNS STEP4 === */

/*
 * Colonne Supermon:
 *
 * 1 NODE
 * 2 NODE INFORMATION
 * 3 RECEIVED
 * 4 LINK
 * 5 DIRECTION
 * 6 CONNECTED
 * 7 MODE
 */

/* NODE */
table.gridtable tbody td:nth-child(1) {
    font-family:
        "IBM Plex Mono",
        Consolas,
        "Courier New",
        monospace !important;

    font-variant-numeric:
        tabular-nums !important;

    font-weight: 700 !important;

    white-space: nowrap !important;
}

/* RECEIVED + CONNECTED */
table.gridtable tbody td:nth-child(3),
table.gridtable tbody td:nth-child(6) {
    font-family:
        "IBM Plex Mono",
        Consolas,
        "Courier New",
        monospace !important;

    font-variant-numeric:
        tabular-nums !important;

    letter-spacing: -.15px !important;

    white-space: nowrap !important;
}

/* LINK / DIRECTION / MODE più regolari */
table.gridtable tbody td:nth-child(4),
table.gridtable tbody td:nth-child(5),
table.gridtable tbody td:nth-child(7) {
    white-space: nowrap !important;
}

/* Header leggermente più leggibile */
table.gridtable thead th,
table.gridtable tr:first-child + tr th {
    letter-spacing: .45px !important;
}

/* Information prende lo spazio disponibile */
table.gridtable tbody td:nth-child(2) {
    width: 100% !important;
}

/* Le altre colonne restano compatte */
table.gridtable tbody td:nth-child(1),
table.gridtable tbody td:nth-child(3),
table.gridtable tbody td:nth-child(4),
table.gridtable tbody td:nth-child(5),
table.gridtable tbody td:nth-child(6),
table.gridtable tbody td:nth-child(7) {
    width: 1% !important;
}

/* === END TABLE COLUMNS STEP4 === */

/* === BEGIN TABLE TOOLS STEP5 === */

/*
 * Strumenti nella testata:
 * Bubble Chart / LsNodes / Listen Live
 *
 * Nessuna modifica ai link o a link.php.
 */

table.gridtable tr:first-child th a#bubblechart,
table.gridtable tr:first-child th a#lsnodeschart {
    display: inline-block !important;

    box-sizing: border-box !important;

    margin-left: 5px !important;
    padding: 3px 6px !important;

    color: #9fc8e8 !important;

    background:
        linear-gradient(
            180deg,
            rgba(41,57,70,.92),
            rgba(21,30,38,.92)
        ) !important;

    border: 1px solid #3b5264 !important;
    border-radius: 4px !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;

    vertical-align: 1px !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.035) !important;

    transition:
        color .12s ease,
        border-color .12s ease,
        background-color .12s ease,
        box-shadow .12s ease !important;
}

/* Hover */
table.gridtable tr:first-child th a#bubblechart:hover,
table.gridtable tr:first-child th a#lsnodeschart:hover {
    color: #ffbd27 !important;

    border-color:
        rgba(255,179,0,.48) !important;

    background:
        linear-gradient(
            180deg,
            rgba(54,57,45,.94),
            rgba(27,29,23,.94)
        ) !important;

    box-shadow:
        0 0 8px rgba(255,179,0,.10),
        inset 0 1px rgba(255,255,255,.04) !important;
}

/* Click */
table.gridtable tr:first-child th a#bubblechart:active,
table.gridtable tr:first-child th a#lsnodeschart:active {
    transform: translateY(1px) !important;
}

/* === END TABLE TOOLS STEP5 === */

/* === BEGIN WEATHER POLISH STEP6 === */

/*
 * Solo rifinitura tipografica.
 * Nessun cambiamento di larghezza, posizione o struttura.
 */

/* Località */
.sm-weather-place {
    letter-spacing: .15px !important;
}

/* Condizione */
.sm-weather-condition {
    color: #a7b3bd !important;
}

/* Fonte dati più discreta */
.sm-weather-source {
    color: #758590 !important;

    font-size: 7px !important;
    font-weight: 600 !important;

    letter-spacing: .25px !important;
}

/* Temperatura */
.sm-weather-temp {
    font-variant-numeric: tabular-nums !important;

    letter-spacing: -.5px !important;

    text-shadow:
        0 0 8px rgba(255,255,255,.06) !important;
}

/* Etichette dei sei parametri */
.sm-weather-data small {
    color: #708494 !important;

    letter-spacing: .75px !important;
}

/* Valori */
.sm-weather-data strong {
    color: #e2e9ee !important;

    font-variant-numeric:
        tabular-nums !important;

    font-feature-settings:
        "tnum" 1 !important;

    letter-spacing: -.1px !important;
}

/* Umidità */
.sm-weather-data > div:nth-child(1) strong {
    color: #c6dce9 !important;
}

/* Vento */
.sm-weather-data > div:nth-child(2) strong {
    color: #cbdde8 !important;
}

/* Raffiche */
.sm-weather-data > div:nth-child(3) strong {
    color: #d9dfe4 !important;
}

/* Pressione */
.sm-weather-data > div:nth-child(4) strong {
    color: #c4d8e6 !important;
}

/* Precipitazioni */
.sm-weather-data > div:nth-child(5) strong {
    color: #9fd5e5 !important;
}

/* Ora aggiornamento */
.sm-weather-data > div:nth-child(6) strong {
    color: #b9c4cc !important;
}

/* === END WEATHER POLISH STEP6 === */

/* === BEGIN VOTER READABLE STEP8 === */

/*
 * Solo leggibilità.
 * Posizione, larghezza e struttura voter NON cambiano.
 */

/* Titolo Node 515930 */
.sm-home-voter-title strong {
    font-size: 11px !important;
}

/* Corpo leggermente più respirato */
.sm-home-voter-body {
    padding: 8px !important;
}

/* Singolo client */
.sm-voter-client {
    padding: 7px !important;
}

/* Nome client: Tuscolana Master Active Master */
.sm-voter-client-top strong {
    font-size: 9px !important;
    line-height: 1.25 !important;

    color: #edf2f5 !important;
}

/* Badge VOTED / VOTING / MIX */
.sm-voter-state {
    padding: 2px 4px !important;

    font-size: 6px !important;
    line-height: 1.1 !important;

    letter-spacing: .35px !important;
}

/* Più spazio prima della barra */
.sm-voter-client-top {
    margin-bottom: 7px !important;
}

/* Barra RSSI */
.sm-voter-rssi-track {
    height: 15px !important;
}

/* Riempimento barra */
.sm-voter-rssi-fill {
    height: 100% !important;
}

/* Valore RSSI numerico */
.sm-voter-rssi-line b {
    font-size: 9px !important;
    font-weight: 700 !important;

    color: #ffffff !important;

    font-variant-numeric: tabular-nums !important;
}

/* Scala 0 — RSSI — 255 */
.sm-voter-scale {
    margin-top: 3px !important;

    font-size: 6px !important;
}

.sm-voter-scale small {
    font-size: 6px !important;
    letter-spacing: .4px !important;
}

/* LIVE un po' più leggibile */
.sm-home-voter-live {
    font-size: 6.5px !important;
}

/* Link inferiore */
.sm-home-voter-open {
    font-size: 6.5px !important;

    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* === END VOTER READABLE STEP8 === */

/* === BEGIN MONITORING STRIP V1 === */

.sm-monitoring-strip {
    max-width: 1180px;
    margin: 34px auto 24px;
    padding: 18px;
    border: 1px solid rgba(255, 179, 0, 0.20);
    border-radius: 8px;
    background: rgba(12, 14, 12, 0.92);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.025);
}

.sm-monitoring-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.sm-monitoring-kicker {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: #8c887b;
}

.sm-monitoring-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #e9e4d3;
}

.sm-monitoring-update {
    font-size: 10px;
    color: #777367;
}

.sm-monitoring-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    gap: 8px;
}

.sm-monitor-card {
    min-height: 86px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    background: rgba(255,255,255,0.025);
}

.sm-monitor-name {
    margin-bottom: 7px;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: #777367;
}

.sm-monitor-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: #d9d5c8;
}

.sm-monitor-detail {
    margin-top: 7px;
    overflow: hidden;
    font-size: 10px;
    color: #817d71;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-monitor-ok {
    box-shadow: inset 2px 0 0 rgba(95,217,122,0.55);
}

.sm-monitor-active {
    border-color: rgba(255,179,0,0.22);
    background: rgba(255,179,0,0.045);
    box-shadow: inset 2px 0 0 rgba(255,179,0,0.80);
}

.sm-monitor-active .sm-monitor-value {
    color: #ffbd32;
}

@media (max-width: 1050px) {
    .sm-monitoring-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 650px) {
    .sm-monitoring-strip {
        margin-left: 8px;
        margin-right: 8px;
    }

    .sm-monitoring-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === END MONITORING STRIP V1 === */

/* === BEGIN TX COLOR FIX V1 === */

/*
 * Supermon nativo:
 * rColor = nodo remoto attualmente keyed / TX
 * bColor = nodo locale COS + PTT / full-duplex
 *
 * L'ordinamento dei remoti resta completamente nativo.
 */

/* REMOTO ATTUALMENTE IN TX */
table.gridtable tbody tr.rColor td,
table.gridtable tbody tr.rColor:hover td {
    color: #fff1ef !important;
    background: rgba(160, 43, 36, 0.72) !important;
    font-weight: 650 !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.035),
        inset 0 -1px rgba(255,90,75,.15) !important;
}

table.gridtable tbody tr.rColor td:first-child,
table.gridtable tbody tr.rColor:hover td:first-child {
    color: #ff7468 !important;
    font-weight: 800 !important;

    box-shadow:
        inset 4px 0 0 #ff5b4d !important;
}

/* NODO LOCALE FULL-DUPLEX: non identificarlo come talker remoto */
table.gridtable tbody tr.bColor td:first-child {
    color: #72cf84 !important;

    box-shadow:
        inset 4px 0 0 #5fd97a !important;
}

table.gridtable tbody tr.bColor td:nth-child(2) {
    color: #9fcaaa !important;
}

/* === END TX COLOR FIX V1 === */

/* === BEGIN LOCAL PTT SOFT V1 === */

/*
 * Nodo locale PTT-Keyed.
 * Evidenza volutamente più tenue del nodo remoto rColor.
 */

table.gridtable tbody tr.tColor td {
    background: rgba(112, 72, 22, 0.34) !important;
    color: #d7b879 !important;
    font-weight: 600 !important;
}

table.gridtable tbody tr.tColor td:first-child {
    color: #e3ad3c !important;

    box-shadow:
        inset 3px 0 0 rgba(255, 179, 0, 0.68) !important;
}

table.gridtable tbody tr.tColor td:nth-child(2) {
    color: #d5b77c !important;
}

/* === END LOCAL PTT SOFT V1 === */

/* === BEGIN MONITORING MULTI-SVX V2 === */

@media (min-width: 1051px) {
    .sm-monitoring-grid {
        grid-template-columns:
            repeat(9, minmax(100px, 1fr));
    }
}

/* === END MONITORING MULTI-SVX V2 === */

/* === BEGIN MESHCOM VIEW V1 === */

.sm-meshcom-panel {
    max-width: 1180px;
    margin: 14px auto 22px;
    padding: 16px;

    border: 1px solid rgba(255,179,0,.22);
    border-radius: 8px;

    background: rgba(12,15,17,.96);

    box-shadow:
        0 12px 32px rgba(0,0,0,.30),
        inset 0 1px rgba(255,255,255,.025);
}

.sm-meshcom-panel[hidden] {
    display: none !important;
}

.sm-meshcom-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;

    margin-bottom: 14px;
}

.sm-meshcom-kicker {
    display: block;

    margin-bottom: 3px;

    color: #777d78;

    font-size: 9px;
    letter-spacing: .16em;
}

.sm-meshcom-head h2 {
    margin: 0;

    color: #f0ebe0;

    font-size: 19px;
    font-weight: 700;
}

.sm-meshcom-sub {
    margin-top: 4px;

    color: #858b86;

    font-size: 10px;
}

.sm-meshcom-head-right {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 9px;
}

.sm-meshcom-live {
    color: #70df88;
}

.sm-meshcom-updated {
    color: #747a75;
}

.sm-meshcom-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    margin-bottom: 12px;

    border: 1px solid #273037;
    border-radius: 6px;

    overflow: hidden;
}

.sm-meshcom-summary > div {
    padding: 9px 12px;

    text-align: center;

    background: #10161a;

    border-right: 1px solid #273037;
}

.sm-meshcom-summary > div:last-child {
    border-right: 0;
}

.sm-meshcom-summary span {
    display: block;

    margin-bottom: 3px;

    color: #73828b;

    font-size: 8px;
    letter-spacing: .10em;
}

.sm-meshcom-summary strong {
    color: #e8edf0;

    font-size: 14px;
}

.sm-meshcom-table-wrap {
    overflow-x: auto;

    border: 1px solid #273037;
    border-radius: 6px;
}

.sm-meshcom-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 10px;
}

.sm-meshcom-table th {
    padding: 8px 10px;

    color: #7f929e;

    background: #0e1418;

    text-align: left;

    font-size: 8px;
    letter-spacing: .08em;

    border-bottom: 1px solid #2a343b;
}

.sm-meshcom-table td {
    padding: 7px 10px;

    color: #cbd3d7;

    border-bottom: 1px solid rgba(75,90,100,.25);
}

.sm-meshcom-table tbody tr:last-child td {
    border-bottom: 0;
}

.sm-meshcom-table tbody tr:hover td {
    background: #172127;
}

.sm-meshcom-table .sm-mc-node {
    color: #6fe28a;

    font-weight: 700;
}

.sm-meshcom-note {
    margin-top: 9px;

    color: #666f73;

    font-size: 9px;

    text-align: right;
}

/*
 * Quando MeshCom è aperto:
 * nascondiamo solo la tabella AllStar e il voter laterale.
 * Meteo e Servizi monitorati rimangono visibili.
 */
body.sm-view-meshcom table.gridtable {
    display: none !important;
}

body.sm-view-meshcom .sm-home-voter-column {
    display: none !important;
}

body.sm-view-meshcom a.sm-menu-active {
    color: #15110a !important;
    background: #ffb300 !important;
    border-color: #ffc54d !important;
}

@media (max-width: 700px) {
    .sm-meshcom-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .sm-meshcom-summary > div {
        border-bottom: 1px solid #273037;
    }
}

/* === END MESHCOM VIEW V1 === */

/* === BEGIN MESHCOM MESSAGES V1 === */

.sm-messages-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-bottom: 12px;

    border: 1px solid #273037;
    border-radius: 6px;
    overflow: hidden;
}

.sm-messages-summary > div {
    padding: 9px 12px;
    text-align: center;
    background: #10161a;
    border-right: 1px solid #273037;
}

.sm-messages-summary > div:last-child {
    border-right: 0;
}

.sm-messages-summary span {
    display: block;
    margin-bottom: 3px;
    color: #73828b;
    font-size: 8px;
    letter-spacing: .10em;
}

.sm-messages-summary strong {
    color: #e8edf0;
    font-size: 14px;
}

.sm-messages-table .sm-msg-text {
    min-width: 300px;
    white-space: normal;
    color: #e0e5e7;
}

.sm-messages-table .sm-msg-dir {
    font-weight: 700;
}

body.sm-view-messages table.gridtable {
    display: none !important;
}

body.sm-view-messages .sm-home-voter-column {
    display: none !important;
}

body.sm-view-messages a.sm-menu-active {
    color: #15110a !important;
    background: #ffb300 !important;
    border-color: #ffc54d !important;
}

/* === END MESHCOM MESSAGES V1 === */