<div id="aussie-growth-tool">
<div class="ag-container">
<h2 class="ag-title">Diario di crescita del cucciolo di Australian Shepherd</h2>
<p class="ag-intro">
Questo strumento ti aiuta a monitorare la crescita del tuo cucciolo di Australian Shepherd,
confrontando peso e andamento di crescita con un modello di riferimento per cani di taglia media
(15–30 kg), ispirato alle curve percentile WALTHAM™. I dati restano salvati solo sul tuo dispositivo.
</p>

<!-- ACCORDION -->
<div class="ag-accordion">

<!-- 1. DATI DEL CUCCIOLO -->
<div class="ag-accordion-item ag-open">
<button class="ag-accordion-header" type="button">
<span>1. Dati del cucciolo</span>
<span class="ag-accordion-icon">−</span>
</button>
<div class="ag-accordion-body">
<div class="ag-grid">
<div class="ag-field">
<label for="ag-name">Nome del cucciolo</label>
<input type="text" id="ag-name" placeholder="Es. Nash">
</div>

<div class="ag-field">
<label for="ag-birthdate">Data di nascita</label>
<input type="date" id="ag-birthdate">
</div>

<div class="ag-field">
<label for="ag-sex">Sesso</label>
<select id="ag-sex">
<option value="">Seleziona...</option>
<option value="M">Maschio</option>
<option value="F">Femmina</option>
</select>
</div>

<div class="ag-field">
<label for="ag-weight-class">Classe di peso adulto attesa</label>
<select id="ag-weight-class">
<option value="15-30" selected>Taglia media 15–30 kg (Aussie standard)</option>
<option value="30-40">Taglia medio-grande 30–40 kg</option>
</select>
</div>

<div class="ag-field">
<label for="ag-expected-weight">Peso adulto atteso (kg, opzionale)</label>
<input type="number" step="0.1" min="1" id="ag-expected-weight" placeholder="Es. 21">
<small class="ag-help">
Se lasci vuoto, verrà usato un valore di riferimento in base a sesso e taglia.
</small>
</div>
</div>

<p class="ag-note">
<strong>Nota:</strong> questo strumento ha valore informativo e non sostituisce il parere
del veterinario. Porta sempre il diario e il grafico alle visite di controllo.
</p>
</div>
</div>

<!-- 2. DIARIO DI CRESCITA -->
<div class="ag-accordion-item">
<button class="ag-accordion-header" type="button">
<span>2. Diario di crescita: peso, altezza, BCS</span>
<span class="ag-accordion-icon">+</span>
</button>
<div class="ag-accordion-body">
<div class="ag-subtitle">Aggiungi una nuova rilevazione</div>

<div class="ag-grid ag-grid-compact">
<div class="ag-field">
<label for="ag-measure-date">Data misurazione</label>
<input type="date" id="ag-measure-date">
</div>

<div class="ag-field">
<label for="ag-measure-weight">Peso (kg)</label>
<input type="number" step="0.1" min="0" id="ag-measure-weight" placeholder="Es. 8.5">
</div>

<div class="ag-field">
<label for="ag-measure-height">Altezza al garrese (cm, opzionale)</label>
<input type="number" step="0.5" min="0" id="ag-measure-height" placeholder="Es. 33">
</div>

<div class="ag-field">
<label for="ag-measure-bcs">BCS (Body Condition Score, 1–9)</label>
<select id="ag-measure-bcs">
<option value="">Non valutato</option>
<option value="3">3 - Molto magro</option>
<option value="4">4 - Magro</option>
<option value="5">5 - Normale</option>
<option value="6">6 - Leggermente sovrappeso</option>
<option value="7">7 - Sovrappeso</option>
<option value="8">8 - Obeso</option>
<option value="9">9 - Gravemente obeso</option>
</select>
</div>

<div class="ag-field ag-field-full">
<label for="ag-measure-notes">Note (cambi alimentazione, calore, malesseri...)</label>
<input type="text" id="ag-measure-notes" placeholder="Es. cambio crocchette, vaccinazione, diarrea, ecc.">
</div>
</div>

<div class="ag-actions">
<button type="button" class="ag-btn ag-btn-primary" id="ag-add-measure">
Aggiungi rilevazione
</button>
<button type="button" class="ag-btn ag-btn-secondary" id="ag-clear-measures">
Azzera diario
</button>
</div>

<div class="ag-subtitle ag-subtitle-space">Rilevazioni registrate</div>

<div class="ag-table-wrapper">
<table class="ag-table">
<thead>
<tr>
<th>Data</th>
<th>Età (mesi)</th>
<th>Peso (kg)</th>
<th>Altezza (cm)</th>
<th>BCS</th>
<th>Note</th>
<th>Azioni</th>
</tr>
</thead>
<tbody id="ag-measures-body">
<!-- Righe generate via JS -->
</tbody>
</table>
</div>

<div class="ag-actions ag-actions-right">
<button type="button" class="ag-btn ag-btn-outline" id="ag-print-diario">
Stampa / Esporta diario
</button>
</div>
</div>
</div>

<!-- 3. GRAFICO E INTERPRETAZIONE -->
<div class="ag-accordion-item">
<button class="ag-accordion-header" type="button">
<span>3. Grafico di crescita e interpretazione</span>
<span class="ag-accordion-icon">+</span>
</button>
<div class="ag-accordion-body">
<p class="ag-note">
Il grafico confronta il peso del tuo cucciolo con una curva di riferimento per cani
di taglia media (15–30 kg). Le curve di riferimento hanno senso soprattutto
<strong>dai 2 mesi di età in poi</strong>: nei primissimi giorni e settimane è normale
che il peso segua andamenti molto individuali. L’obiettivo non è “stare sul numero
perfetto”, ma verificare che la crescita sia regolare nel tempo.
</p>

<div class="ag-chart-wrapper">
<canvas id="ag-growth-chart" height="260"></canvas>
</div>

<div class="ag-subtitle ag-subtitle-space">Interpretazione automatica</div>
<div id="ag-interpretation" class="ag-interpretation">
Inserisci almeno una rilevazione per ottenere un commento sulla crescita.
</div>

<div class="ag-box-info">
<strong>Come leggere il grafico e le curve di crescita</strong>
<ul>
<li>Le curve percentile servono a seguire il <em>trend</em> di crescita, non a inseguire un singolo valore.</li>
<li>Esistono Aussies più leggeri e più robusti: ciò che conta è la coerenza nel tempo.</li>
<li>Segnali da non ignorare: curva piatta per settimane, crescita troppo rapida, salti improvvisi da molto sotto a molto sopra il range o viceversa.</li>
<li>In caso di dubbi, parla sempre con il tuo veterinario portando diario e grafico stampati.</li>
</ul>
</div>

</div>
</div>

</div>
</div>
</div>

<!-- ===============================
STILI CSS (scoped via #aussie-growth-tool)
=============================== -->
<style>
#aussie-growth-tool {
font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #222;
}

#aussie-growth-tool .ag-container {
max-width: 900px;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
background: #fafafa;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

#aussie-growth-tool .ag-title {
font-size: 1.7rem;
margin-bottom: 0.5rem;
}

#aussie-growth-tool .ag-intro {
margin-bottom: 1.5rem;
font-size: 0.95rem;
color: #444;
}

#aussie-growth-tool .ag-accordion {
border-radius: 10px;
overflow: hidden;
border: 1px solid #e0e0e0;
background: #fff;
}

#aussie-growth-tool .ag-accordion-item + .ag-accordion-item {
border-top: 1px solid #e0e0e0;
}

#aussie-growth-tool .ag-accordion-header {
width: 100%;
text-align: left;
padding: 0.85rem 1rem;
background: #f3f3f3;
border: none;
outline: none;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
}

#aussie-growth-tool .ag-accordion-header:hover {
background: #e9e9e9;
}

#aussie-growth-tool .ag-accordion-icon {
font-weight: 600;
margin-left: 0.5rem;
}

#aussie-growth-tool .ag-accordion-body {
padding: 1rem 1rem 1.2rem;
display: none;
}

#aussie-growth-tool .ag-accordion-item.ag-open .ag-accordion-body {
display: block;
}

#aussie-growth-tool .ag-accordion-item.ag-open .ag-accordion-header {
background: #e8f2ff;
}

#aussie-growth-tool .ag-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem 1.2rem;
}

#aussie-growth-tool .ag-grid-compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

#aussie-growth-tool .ag-field {
display: flex;
flex-direction: column;
}

#aussie-growth-tool .ag-field-full {
grid-column: 1 / -1;
}

#aussie-growth-tool label {
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 0.15rem;
}

#aussie-growth-tool input[type="text"],
#aussie-growth-tool input[type="number"],
#aussie-growth-tool input[type="date"],
#aussie-growth-tool select {
border-radius: 6px;
border: 1px solid #cfcfcf;
padding: 0.35rem 0.45rem;
font-size: 0.9rem;
font-family: inherit;
}

#aussie-growth-tool input[type="text"]:focus,
#aussie-growth-tool input[type="number"]:focus,
#aussie-growth-tool input[type="date"]:focus,
#aussie-growth-tool select:focus {
outline: none;
border-color: #4a8fff;
box-shadow: 0 0 0 1px rgba(74,143,255,0.2);
}

#aussie-growth-tool .ag-help {
font-size: 0.75rem;
color: #666;
margin-top: 0.15rem;
}

#aussie-growth-tool .ag-note {
font-size: 0.85rem;
color: #555;
margin-top: 0.7rem;
}

#aussie-growth-tool .ag-subtitle {
margin-top: 0.2rem;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 1rem;
}

#aussie-growth-tool .ag-subtitle-space {
margin-top: 1rem;
}

#aussie-growth-tool .ag-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.8rem;
}

#aussie-growth-tool .ag-actions-right {
justify-content: flex-end;
}

#aussie-growth-tool .ag-btn {
border-radius: 6px;
border: 1px solid transparent;
padding: 0.4rem 0.9rem;
font-size: 0.9rem;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
}

#aussie-growth-tool .ag-btn-primary {
background: #2f7dff;
color: #fff;
border-color: #2f7dff;
}

#aussie-growth-tool .ag-btn-primary:hover {
background: #2564cc;
}

#aussie-growth-tool .ag-btn-secondary {
background: #f1f1f1;
color: #333;
border-color: #d0d0d0;
}

#aussie-growth-tool .ag-btn-secondary:hover {
background: #e5e5e5;
}

#aussie-growth-tool .ag-btn-outline {
background: transparent;
color: #2f7dff;
border-color: #2f7dff;
}

#aussie-growth-tool .ag-btn-outline:hover {
background: #e8f2ff;
}

#aussie-growth-tool .ag-table-wrapper {
width: 100%;
overflow-x: auto;
margin-top: 0.6rem;
border-radius: 8px;
border: 1px solid #e0e0e0;
background: #fff;
}

#aussie-growth-tool .ag-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}

#aussie-growth-tool .ag-table th,
#aussie-growth-tool .ag-table td {
padding: 0.45rem 0.6rem;
border-bottom: 1px solid #f0f0f0;
text-align: left;
vertical-align: top;
}

#aussie-growth-tool .ag-table th {
background: #f6f6f6;
font-weight: 600;
}

#aussie-growth-tool .ag-table tr:nth-child(even) td {
background: #fcfcfc;
}

#aussie-growth-tool .ag-table .ag-table-actions button {
font-size: 0.75rem;
padding: 0.2rem 0.45rem;
margin-right: 0.25rem;
}

#aussie-growth-tool .ag-chart-wrapper {
margin-top: 0.8rem;
padding: 0.6rem;
border-radius: 10px;
border: 1px solid #e0e0e0;
background: #fafbff;
}

#aussie-growth-tool .ag-interpretation {
margin-top: 0.7rem;
padding: 0.7rem 0.8rem;
border-radius: 8px;
border: 1px solid #e0e0e0;
background: #fdfdfd;
font-size: 0.9rem;
}

#aussie-growth-tool .ag-interpretation strong {
display: block;
margin-bottom: 0.2rem;
}

#aussie-growth-tool .ag-box-info {
margin-top: 1rem;
padding: 0.8rem 0.9rem;
border-radius: 8px;
background: #fff8e6;
border: 1px solid #f0ddaa;
font-size: 0.85rem;
}

#aussie-growth-tool .ag-box-info ul {
margin: 0.4rem 0 0 1.2rem;
padding: 0;
}

#aussie-growth-tool .ag-box-info li + li {
margin-top: 0.2rem;
}

/* Responsive */
@media (max-width: 768px) {
#aussie-growth-tool .ag-container {
padding: 1.2rem 0.8rem 1.5rem;
}

#aussie-growth-tool .ag-grid,
#aussie-growth-tool .ag-grid-compact {
grid-template-columns: 1fr;
}

#aussie-growth-tool .ag-title {
font-size: 1.4rem;
}
}