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

* {
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
}

body {
    background: linear-gradient(135deg, #edf4f0 0%, #f8f5ed 100%);
    color: #19302b;
    line-height: 1.6;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: clamp(20px, 4vw, 48px);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(31, 61, 51, .12);
}

.home-button {
    display: inline-block;
    color: #23745f;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 18px;
}

.home-button:hover {
    color: #b9522f;
    text-decoration: underline;
}

h1 {
    text-align: center;
    color: #19302b;
    font: 700 clamp(28px, 5vw, 42px) 'Space Grotesk', sans-serif;
    margin-bottom: 5px;
}

.intro, .section-heading p {
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 30px;
}

fieldset {
    border: 1px solid #d7e3dc;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 25px;
    background-color: #f7faf7;
}

legend {
    font-weight: bold;
    color: #23745f;
    background: #fff;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.form-group label {
    flex: 1 1 250px;
    font-weight: 500;
}

.form-group input {
    flex: 1 1 200px;
    padding: 10px;
    border: 1px solid #c6d6ce;
    border-radius: 4px;
    font-size: 16px;
    color: #19302b;
}

button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #dc6b3f;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

button:hover {
    background-color: #b9522f;
    transform: translateY(-1px);
}

.hidden {
    display: none;
}

#risultati {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #d7e3dc;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.result-card {
    background: #f3f7f4;
    padding: 17px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #d7e3dc;
}

.result-card h3 {
    margin-top: 0;
    font-size: 16px;
    color: #58736b;
}

.result-card p {
    font-size: 24px;
    font-weight: bold;
    color: #19302b;
    margin: 10px 0;
}

.result-card.highlight {
    background: #e4f2eb;
    border-color: #55a982;
}

.result-card.highlight p {
    color: #23745f;
}

.analysis-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr); gap: 16px; margin-top: 24px; }
.panel { background: #fff; border: 1px solid #d7e3dc; border-radius: 6px; padding: 20px; min-width: 0; }
.section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.section-heading h3 { margin: 0; font: 600 18px 'Space Grotesk', sans-serif; }
.section-heading p { text-align: left; margin: 5px 0 18px; font-size: 13px; }
.total-label { color: #23745f; font-weight: 700; white-space: nowrap; }
#grafico-costi { width: 100%; height: 250px; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: #58736b; }
.chart-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; background: var(--legend-color); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 10px 7px; border-bottom: 1px solid #e4ece7; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: #58736b; font-weight: 600; }
.nota { color: #58736b; font-size: 12px; margin: 18px 0 0; text-align: left; }
.error { color: #a93623; background: #fbeeea; border: 1px solid #e7b7aa; padding: 10px 12px; margin-bottom: 18px; display: none; border-radius: 4px; }
.salary-panel { margin-top: 16px; }
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.time-result { border-left: 3px solid #dc6b3f; padding: 10px 12px; background: #fff8f2; }
.time-result span, .time-result small { display: block; color: #58736b; font-size: 12px; }
.time-result strong { display: block; color: #19302b; font: 700 28px 'Space Grotesk', sans-serif; margin: 5px 0 2px; }
@media (max-width: 520px) { .time-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .analysis-grid { grid-template-columns: 1fr; } .container { padding: 22px 16px; } .form-group input { flex-basis: 100%; margin-top: 6px; } }