/* ============================================================
   IWØRQH - DATASUMMARY (FULL RESTORE 2026)
   ============================================================ */

/* 1. CONTENITORE E STRUTTURA TABELLA */
#tableData {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important; /* Impedisce alla tabella di uscire dal bordo destro */
    box-sizing: border-box !important; /* Include padding e bordi nel calcolo della larghezza */
    overflow-x: auto !important; /* Attiva lo scroll orizzontale solo se necessario */
    background: var(--card);
    border-radius: 16px;
    padding: 15px;
    border: 1px solid var(--border);
}

#tableData table {
    display: table !important;
    width: 100% !important; /* Forza la tabella a occupare tutto lo spazio disponibile */
    margin: 0 auto !important;
    table-layout: auto !important; /* Permette alle colonne di adattarsi al contenuto */
}

#tableData th, 
#tableData td {
    display: table-cell !important;
    padding: 10px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap !important;
    color: var(--text-main) !important;
    vertical-align: middle !important;
    font-size: 0.85rem;
}

#tableData th {
    background: color-mix(in srgb, var(--accent), transparent 92%) !important;
    color: var(--accent) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/* 2. NAVIGAZIONE, PARAMETRI E TASTI (FLEXBOX RESTORED) */
/* Questa sezione gestisce i link Temp Max, Temp Min, ecc. */
#tableData center, 
#tableData .navigation,
#tableData ul,
#tableData form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 15px 0 !important;
    list-style: none !important;
}

#tableData a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: var(--bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#tableData a:hover, #tableData a:active {
    background: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
}

/* 3. HOVER SULLE RIGHE (TESTO BIANCO + OMBRA) */
#tableData tr {
    transition: background-color 0.2s ease !important;
}

#tableData tr:hover td {
    background-color: color-mix(in srgb, var(--accent), transparent 90%) !important;
}

#tableData tr:hover td, 
#tableData tr:hover td b, 
#tableData tr:hover td span {
    color: #ffffff !important;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* 4. INTESTAZIONE: TITOLO E SELETTORI DISTANZIATI */
#tableData .table_title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 50px !important; /* Spazio tra Anno, Titolo e Unità */
    margin: 15px 0 25px 0 !important;
    border-bottom: 2px solid var(--accent) !important;
    padding-bottom: 12px !important;
    flex-wrap: wrap !important;
}

#tableData .table_title b, 
#tableData .table_title strong {
    font-size: 1.3rem !important;
    color: var(--accent) !important;
    text-transform: uppercase !important;
}

/* 5. SELECT (TENDINE) STILE AI */
#tableData select {
    appearance: none !important;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 12px center / 16px !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 6px 30px 6px 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* 6. LOGICA SUNSHINE (METER BAR) */
#tableData .meterCont {
    position: relative !important;
    display: inline-block !important;
    width: 80px !important;
    height: 18px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    border: 1px solid var(--border) !important;
}

#tableData .meterBar.real {
    background: #ffdd00 !important;
    height: 100% !important;
    position: absolute !important;
    z-index: 2 !important;
}

#tableData .meterTxt {
    position: relative !important;
    z-index: 5 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px #000 !important;
}

/* 7. CONTRASTO DINAMICO TESTO (QUANDO NON IN HOVER) */
#tableData tr:not(:hover) td[style*="background-color"], 
#tableData tr:not(:hover) td b {
    color: #1a1a1a !important; 
    font-weight: 700 !important;
}

body.dark-theme #tableData td:not([style*="background-color"]) {
    color: var(--text-main) !important;
}

/* 8. ICONE STAGIONI E PULIZIA */
#tableData td[align="left"]::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}
#tableData tr:nth-of-type(2) td[align="left"]::before { content: "\f35c"; color: #10b981; }
#tableData tr:nth-of-type(3) td[align="left"]::before { content: "\f185"; color: #f59e0b; }
#tableData tr:nth-of-type(4) td[align="left"]::before { content: "\f06c"; color: #d97706; }
#tableData tr:nth-of-type(5) td[align="left"]::before { content: "\f2dc"; color: #3b82f6; }

#tableData br, #tableData font, #tableData img { display: none !important; }