/* ==========================================================================
   IWØRQH - STYLE PER PAGINE ESTREMI (VERSIONE COMPATTA ED ELEGANTE)
   ========================================================================== */

.main-title { 
    color: var(--accent); 
    font-weight: 700; /* Ridotto da 800 */
    font-size: 1.25rem;
    margin: 0; 
}

.full-card {
    display: flex;
    background: var(--card);
    border-radius: 16px; /* Leggermente più secco rispetto a 20px */
    border: 1px solid var(--border);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card-icon {
    background: color-mix(in srgb, var(--accent), transparent 95%);
    color: var(--accent);
    width: 50px; /* Ridotto da 60px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; /* Ridotto da 1.5 */
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.card-content { 
    flex: 1; 
    padding: 15px 20px; /* Compattato il padding verticale */
}

.group-title { 
    margin: 0 0 10px 0; 
    font-size: 0.75rem; /* Più piccolo e tecnico */
    color: var(--accent); 
    text-transform: uppercase; 
    letter-spacing: 1.2px; 
    font-weight: 700; 
}

/* Righe dati più sottili */
.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0; /* Ridotto da 12px per coerenza con la Home */
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.data-row:last-child { border-bottom: none; }

.data-row .label { 
    color: var(--text-main); 
    font-size: 0.9rem; /* Testo leggermente più piccolo */
    font-weight: 500; 
    flex-shrink: 0; 
}

.value-group { 
    display: flex;
    justify-content: flex-end; 
    flex: 1;
    font-size: 0.95rem; /* Più armonioso */
    font-weight: 700; /* Ridotto da 800 per non appesantire */
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.align-grid {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.max-box { text-align: right; padding-right: 10px; }
.min-box { text-align: left; padding-left: 10px; }
.single-align { text-align: right; }

.value-group small { 
    font-weight: 400; 
    color: var(--text-dim); 
    font-size: 0.7rem; 
    margin-left: 5px; 
}

/* Colori più sobri */
.sep { color: var(--border); font-weight: 300; margin: 0 2px; }
.max { color: #ef4444; opacity: 0.9; }
.min { color: #3b82f6; opacity: 0.9; }

/* ==========================================================================
   RESPONSIVE (Ottimizzato per Mobile)
   ========================================================================== */
@media (max-width: 992px) {
    .full-card { flex-direction: column; }
    
    .card-icon { 
        width: 100%; 
        height: 45px; 
        border-right: none; 
        border-bottom: 1px solid var(--border); 
        font-size: 1.1rem;
    }
    
    .data-row { 
        padding: 12px 0;
    }
    
    .value-group { 
        font-size: 0.9rem;
    }
}
/* ==========================================================================
   INTEGRAZIONE CONFRONTO DATI (IERI vs OGGI)
   ========================================================================== */

.data-row-comp { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 0; 
    border-bottom: 1px solid rgba(148, 163, 184, 0.08); 
}

.header-row { 
    border-bottom: 2px solid var(--accent); 
    padding-bottom: 8px; 
    margin-bottom: 5px; 
}

.values-grid { 
    display: grid; 
    grid-template-columns: 140px 140px 160px; 
    gap: 15px; 
    align-items: center; 
}

.col-head { 
    font-size: 0.7rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: var(--accent); 
    text-align: center; 
    letter-spacing: 0.5px;
}

.val-col { 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 4px; 
    min-height: 50px; 
}

.val-col span { 
    font-size: 1rem; 
    font-weight: 700; 
    line-height: 1.1; 
    display: block; 
    color: var(--text-main); 
    white-space: nowrap; 
}

.val-col small { 
    display: block; 
    font-size: 0.65rem; 
    font-weight: 400; 
    color: var(--text-dim); 
    font-style: italic; 
    line-height: 1; 
}

.trend-container { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    width: 100%; 
    justify-content: flex-start; 
    padding-left: 15px; 
}

.trend-pill { 
    width: 24px; 
    height: 24px; 
    border-radius: 6px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.7rem; 
    flex-shrink: 0; 
}

.trend-val { 
    font-size: 0.9rem; 
    font-weight: 700; 
    color: var(--text-main); 
}

/* Stati Trend */
.trend-pill.up { background: color-mix(in srgb, #ef4444, transparent 90%); color: #ef4444; }
.trend-pill.down { background: color-mix(in srgb, #3b82f6, transparent 90%); color: #3b82f6; }
.trend-pill.equal { background: rgba(148, 163, 184, 0.1); color: var(--text-dim); }

.trend-val.up { color: #ef4444; }
.trend-val.down { color: #3b82f6; }

/* Colori Specifici Variabili */
.rain { color: #3498db; } 
.wind { color: #a855f7; }

/* Adattamento Responsive per la griglia di confronto */
@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr 1fr; /* Nasconde o sposta il trend su mobile se necessario */
        gap: 10px;
    }
    .trend-container { padding-left: 0; justify-content: center; }
}