/* css/dips.css */

/* Stili specifici per l'app DIPS */

/* Contenitori principali dell'app */
#inputSection,
#apparentDipSection {
    margin-bottom: 20px;
    padding: 20px; /* Aumentato padding */
    border: 1px solid var(--border-color); /* Usa la variabile del bordo */
    border-radius: 8px;
    background-color: var(--surface-color); /* Usa la variabile di superficie */
    width: 90%;
    max-width: 800px; /* Allargato leggermente */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

/* Header di sezione */
#inputSection h3,
#apparentDipSection h3,
#legendContainer h3 { /* Aggiunto anche l'h3 della leggenda */
    margin-top: 0;
    color: var(--primary-text-color); /* Colore testo primario */
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* Stili tabella */
#giacitureTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    table-layout: fixed;
}
#giacitureTable th,
#giacitureTable td {
    border: 1px solid var(--border-color); /* Bordo tabella scuro */
    padding: 10px; /* Aumentato padding */
    text-align: center;
    word-wrap: break-word;
    color: var(--primary-text-color); /* Colore testo primario */
}
#giacitureTable th {
    background-color: #333a40; /* Grigio scuro per header */
    color: var(--primary-text-color);
}
/* Colore di sfondo delle righe della tabella quando selezionate/plottate dal JS */
#giacitureTable tbody tr {
    transition: background-color 0.3s ease;
}

/* Input all'interno della tabella */
#giacitureTable input[type="number"],
#giacitureTable input[type="text"] {
    width: calc(100% - 16px); /* Adatta larghezza al contenitore */
    padding: 8px; /* Aumentato padding */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--background-color); /* Sfondo input come sfondo pagina */
    color: var(--primary-text-color);
}
#giacitureTable input[type="number"] { text-align: right; }

/* Stili per la sezione di calcolo inclinazione apparente */
#apparentDipSection label {
    display: block;
    margin-bottom: 8px; /* Aumentato margin-bottom */
    font-weight: bold;
    color: var(--primary-text-color); /* Colore testo primario */
}
#apparentDipSection select,
#apparentDipSection input[type="number"] {
    width: calc(100% - 20px); /* Adatta larghezza al contenitore */
    padding: 10px; /* Aumentato padding */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 15px; /* Aumentato margin-bottom */
    background-color: var(--background-color);
    color: var(--primary-text-color);
}

/* Controlli (bottoni) */
.controls {
    margin-top: 20px; /* Aumentato margin-top */
    text-align: center;
}
.controls button {
    padding: 12px 20px; /* Aumentato padding */
    margin: 8px; /* Aumentato margin */
    background-color: var(--accent-color); /* Usa la variabile accent */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.05em; /* Lieve aumento font-size */
    transition: background-color 0.2s ease;
}
.controls button:hover {
    background-color: var(--accent-hover-color); /* Usa la variabile accent-hover */
}
#clearButton { background-color: var(--danger-color); }
#clearButton:hover { background-color: #c82333; }
#exportCsvButton { background-color: var(--success-color); }
#exportCsvButton:hover { background-color: #218838; }

/* NUOVI STILI: Contenitore Plot + Leggenda */
.plot-and-legend-container {
    display: flex;
    flex-direction: column; /* Imposta a colonna per schermi piccoli (default) */
    gap: 30px; /* Spazio tra plot e leggenda */
    align-items: flex-start; /* Allineamento elementi */
    max-width: 1300px; /* Limite per il contenitore combinato */
    margin: 30px auto 40px auto; /* Centra e aggiunge margine */
    padding: 0 20px; /* Padding laterale */
}

/* Media query per affiancare Plot e Leggenda su schermi più grandi */
@media (min-width: 900px) {
    .plot-and-legend-container {
        flex-direction: row; /* Affianca gli elementi */
        justify-content: center; /* Centra gli elementi affiancati */
        align-items: flex-start; /* Allineamento in alto */
    }
}


/* Contenitore del plot (ora parte del .plot-and-legend-container) */
#plotContainer {
    /* Rimosso margin-top e margin-left/right auto perché gestiti dal genitore */
    /* width: 500px; /* Mantenuto width e height del canvas per dimensioni fisse */
    /* height: 500px; */
    border: 1px solid var(--border-color);
    position: relative;
    flex-shrink: 0; /* Impedisce al canvas di rimpicciolirsi */
    background-color: #383838; /* Sfondo canvas più chiaro */
    border-radius: 8px; /* Aggiunto border-radius per coerenza */
    box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* Ombra per profondità */
}
#plotInfo {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 10px;
    color: var(--secondary-text-color);
    background-color: rgba(0, 0, 0, 0.6);
    padding: 3px 6px;
    border-radius: 3px;
}
canvas {
    display: block;
    width: 500px; /* Assicura dimensioni fisse */
    height: 500px; /* Assicura dimensioni fisse */
    /* background-color gestito dal #plotContainer */
}

/* NUOVI STILI: Leggenda */
#legendContainer {
    background-color: var(--surface-color);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    flex-grow: 1; /* Permette alla leggenda di occupare lo spazio rimanente */
    min-width: 280px; /* Larghezza minima per leggenda */
    max-width: 450px; /* Larghezza massima per leggenda su schermi larghi */
}

#giacituraLegendList {
    list-style: none; /* Rimuove i bullet point */
    padding: 0;
    margin: 0;
    display: flex; /* Flexbox per disporre gli elementi in linea/su più colonne */
    flex-wrap: wrap; /* Permette agli elementi di andare a capo */
    gap: 10px 20px; /* Spazio tra gli elementi della leggenda (verticale orizzontale) */
    justify-content: flex-start; /* Allinea gli elementi all'inizio */
}

#giacituraLegendList li {
    display: flex;
    align-items: center; /* Centra verticalmente icona e testo */
    font-size: 0.95em;
    color: var(--primary-text-color);
    white-space: nowrap; /* Evita che il testo vada a capo all'interno di un singolo elemento */
}

.legend-color-box {
    width: 18px; /* Dimensione del quadratino colorato */
    height: 18px;
    border: 1px solid var(--border-color); /* Bordo per il quadratino */
    margin-right: 8px; /* Spazio tra quadratino e testo */
    border-radius: 3px;
    flex-shrink: 0; /* Impedisce al quadratino di rimpicciolirsi */
}


/* Sezione spiegazione */
#explanation {
    margin-top: 30px;
    font-size: 0.95em;
    color: var(--secondary-text-color);
    max-width: 800px;
    text-align: left;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    background-color: var(--surface-color);
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
#explanation strong {
    color: var(--primary-text-color);
}
#explanation code {
    background-color: rgba(0,0,0,0.3);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #e0e0e0;
}
.warning {
    color: var(--warning-color);
    font-weight: bold;
}