/* =========================================
   IMPOSTAZIONI GENERALI
   ========================================= */

* {box-sizing: border-box;}

body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #cfe8f5; color: #263238;} /* #f4f7f8 */
.app-container {width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px;}


/* =========================================
   HEADER E FOOTER
   ========================================= */

.site-header {background-color: #ffffff; border-bottom: 1px solid #dce3e6;}

.header-container {display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; padding: 15px 20px;}

.site-logo {display: block;}

.site-logo img {display: block; width: 60px; height: 60px; object-fit: contain;}

.header-title {flex: 1; margin-left: 20px;}

.header-title h1 {margin: 0; color: #1565c0; font-size: 28px;}

.header-user {display: flex; align-items: center; gap: 15px;}

.username {color: #263238; font-size: 14px;}

.logout-button {padding: 8px 15px; border: none; border-radius: 6px; background-color: #c62828; color: #ffffff; cursor: pointer;}

.logout-button:hover {background-color: #b71c1c;}

.site-footer {background-color: #ffffff; border-top: 1px solid #dce3e6; color: #90a4ae;}

.footer-container {max-width: 1100px; margin: 0 auto; padding: 25px 20px; text-align: center;}

.footer-container p {margin: 0; font-size: 13px;}


/* =========================================
   INTRODUZIONE
   ========================================= */

.welcome-section {margin-bottom: 25px;}

.welcome-section h2 {margin-bottom: 5px;}

.welcome-section p {margin-top: 0; color: #607d8b;}


/* =========================================
   SCHEDE PARAMETRI
   ========================================= */

.parametri-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px;}

.parametro-card {display: flex; flex-direction: column; min-height: 130px; padding: 20px; background-color: #F5F5F5; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);} /*#ffffff */

.parametro-label {color: #78909c; font-size: 14px;}

.parametro-valore {margin-top: 15px; color: #263238; font-size: 22px; font-weight: bold;}

.parametro-valore small {font-size: 25px; font-weight: bold;}

.parametro-variazione {margin-top: 8px; font-size: 13px;}

.variazione-positiva {color: #2e7d32;}

.variazione-negativa {color: #c62828;}


/* =========================================
   CARD GENERICHE
   ========================================= */

.dashboard-card {margin-bottom: 25px; padding: 25px; background-color: #F5F5F5; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);}  /*#ffffff */

.card-header {display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px;}

.card-header h2 {margin: 0 0 5px;}

.card-header p {margin: 0; color: #78909c; font-size: 14px;}


/* =========================================
   DATI RILEVAZIONE
   ========================================= */

.dati-rilevazione {display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px;}

.dato {padding: 15px; background-color: #f5f8fa; border-radius: 8px;}

.dato span {display: block; margin-bottom: 8px; color: #78909c; font-size: 13px;}

.dato strong {font-size: 17px;}


/* =========================================
   BOTTONI
   ========================================= */

.btn {display: inline-block; padding: 10px 18px; border: none; border-radius: 7px; font-size: 14px; font-weight: bold; text-decoration: none; cursor: pointer; transition: 0.2s ease;}

.btn-principale {background-color: #1565c0; color: #ffffff;}

.btn-principale:hover {background-color: #0d47a1;}

.btn-secondario {background-color: #e3f2fd; color: #1565c0;}

.btn-secondario:hover {background-color: #bbdefb;}


/* =========================================
   ALIMENTAZIONE
   ========================================= */


.alimentazione-lista {display: flex; flex-direction: column;}

.pasto-card {padding: 16px 0;}

.pasto-card + .pasto-card {border-top: 1px solid #e5e5e5;}

.pasto-label {display: block; margin-bottom: 3px; color: #78909c; font-size: 12px; font-weight: bold;}

.pasto-descrizione {margin-top: 12px;}

.pasto-nota {margin-top: 12px;}

.calorie-box {display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #fff8e1; border-radius: 8px;}

.calorie-box span {color: #795548;}

.calorie-box strong {color: #e65100; font-size: 25px;}

.empty-small {padding: 10px 0;}

.empty-small p {color: #78909c;}


/* =========================================
   AZIONI RAPIDE
   ========================================= */

.azioni-section {margin-bottom: 30px;}

.azioni-section h2 {margin-bottom: 15px;}

.azioni-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;}

.azione-card {display: flex; flex-direction: column; padding: 20px; background-color: #ffffff; border-radius: 10px; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: 0.2s ease;}

.azione-card:hover {transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);}

.azione-titolo {color: #1565c0; font-size: 16px; font-weight: bold;}

.azione-descrizione {margin-top: 8px; color: #78909c; font-size: 13px;}


/* =========================================
   STATO VUOTO
   ========================================= */

.empty-state {text-align: center; padding: 50px 25px;}

.empty-state h2 {margin-bottom: 10px;}

.empty-state p {margin-bottom: 25px; color: #78909c;}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {
    .parametri-grid {grid-template-columns: repeat(2, 1fr);}
    .dati-rilevazione {grid-template-columns: repeat(2, 1fr);}
    .azioni-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 600px) {
    .app-container {padding: 0 12px;}
    .header-container {flex-direction: column; align-items: flex-start; gap: 15px;}
    .header-title {margin-left: 0;}
    .header-user {width: 100%; justify-content: space-between;}
    .parametri-grid, .dati-rilevazione, .azioni-grid {grid-template-columns: 1fr;}
    .card-header {flex-direction: column; align-items: flex-start;}
    .calorie-box {flex-direction: column; align-items: flex-start; gap: 10px;}
}


/* =========================================
FORM INSERIMENTO
========================================= */
.welcome-header {display: flex;justify-content: space-between;align-items: center;gap: 20px;}

.form-section {margin-bottom: 30px;}

.form-section:last-of-type {margin-bottom: 0;}

.form-section h3 {margin: 0 0 18px;color: #263238;font-size: 18px;}

.form-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}

.form-data-ora {grid-template-columns: 1fr 1fr auto;align-items: end;}

.form-group {display: flex;flex-direction: column;}

.form-group label,
.parametro-valore-form label,
.parametro-nota-form label {margin-bottom: 7px;color: #455a64;font-size: 14px;font-weight: bold;}

.form-group input,
.form-group textarea,
.parametro-valore-form input,
.parametro-nota-form textarea {width: 100%;padding: 11px 12px;border: 1px solid #cfd8dc;border-radius: 7px;background-color: #ffffff;color: #263238;font-family: Arial, Helvetica, sans-serif;font-size: 14px;outline: none;transition: 0.2s ease;}

.form-group input:focus,
.form-group textarea:focus,
.parametro-valore-form input:focus,
.parametro-nota-form textarea:focus {border-color: #1565c0;box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.10);}

.parametro-form {display: grid;grid-template-columns: 1fr 1fr;gap: 25px;align-items: start;}

.parametro-valore-form,
.parametro-nota-form {display: flex;flex-direction: column;}

.parametro-nota-form textarea {resize: vertical;min-height: 80px;}

.input-unita {display: flex;align-items: center;gap: 8px;}

.input-unita input {flex: 1;}

.input-unita span {min-width: 55px;color: #78909c;font-size: 13px;}

.form-adesso {display: flex;align-items: flex-end;}

.pulsante-adesso {white-space: nowrap;}

.pressione-input {display: flex;align-items: center;gap: 8px;}

.pressione-input .input-unita {flex: 1;}

.pressione-separatore {color: #78909c;font-size: 22px;font-weight: bold;}

.form-actions {display: flex;justify-content: flex-end;align-items: center;gap: 12px;margin-top: 30px;padding-top: 25px;border-top: 1px solid #e5e5e5;}

/* =========================================
RESPONSIVE FORM
========================================= */

@media (max-width: 700px) {

.parametro-form {grid-template-columns: 1fr;}

.form-data-ora {grid-template-columns: 1fr 1fr;}

.form-adesso {grid-column: 1 / -1;}

.form-adesso .btn {width: 100%;}

}

@media (max-width: 600px) {

.form-grid {grid-template-columns: 1fr;}

.form-data-ora {grid-template-columns: 1fr;}

.form-adesso {grid-column: auto;}

.form-actions {flex-direction: column-reverse;align-items: stretch;}

.form-actions .btn {width: 100%;text-align: center;}

.pressione-input {flex-direction: column;align-items: stretch;}

.pressione-separatore {display: none;}

}

/* =========================================
ERRORE FORM
=========================================

.form-errore {margin-bottom: 25px;padding: 12px 15px;border-radius: 7px;background-color: #ffebee;color: #c62828;font-size: 14px;} */

/* =========================================
MESSAGGISTICA
========================================= */

.messaggio {margin-bottom: 25px;padding: 12px 15px;border-radius: 7px;font-size: 14px;}

.messaggio.success {background-color: #e8f5e9;color: #2e7d32;}

.messaggio.error {background-color: #ffebee;color: #c62828;}

.messaggio.warning {background-color: #fff8e1;color: #e65100;}

.messaggio.info {background-color: #e3f2fd;color: #1565c0;}


/* =========================================
   LOGIN
   ========================================= */
.login-intro {text-align: center;}

.login-card {max-width: 500px; margin-left: auto; margin-right: auto;}



/* =========================================
   ALIMENTAZIONE
   ========================================= */

.alimentazione-lista {display: flex; flex-direction: column; gap: 15px;}

.pasto-card {padding: 18px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #ffffff;}

.pasto-header {display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px;}

.pasto-ora {color: #455a64; font-size: 14px; font-weight: bold;}

.pasto-calorie {color: #e65100; font-size: 14px;}

.pasto-descrizione,
.pasto-nota {display: flex; flex-direction: column; gap: 5px; color: #455a64; font-size: 14px; line-height: 1.5;}

.pasto-nota {margin-top: 15px; padding-top: 15px; border-top: 1px solid #eeeeee; color: #78909c;}

.pasto-label {color: #263238; font-size: 13px; font-weight: bold;}

.form-info {margin: 0; color: #78909c; font-size: 13px; line-height: 1.5;}

.giornata-header { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 25px; margin-bottom: 15px; text-align: center; }

.giornata-header h3 { margin: 0; font-weight: 400; }

.giornata-header span { font-weight: 400; }

.pasto-modifica {
    display: none;
}

.pasto-card.modifica-aperta .pasto-visualizzazione {
    display: none;
}

.pasto-card.modifica-aperta .pasto-modifica {
    display: block;
}


/* =========================================
   RESPONSIVE ALIMENTAZIONE
   ========================================= */

@media (max-width: 600px) {.pasto-header {align-items: flex-start; flex-direction: column;}}



/* ==========================================================
   DATI - HTML DATI
   ========================================================== */

.dati-categorie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 30px 0; }
.dati-categoria-card { display: flex; flex-direction: column; padding: 25px; text-decoration: none; background: #ffffff; border: 2px solid #e5e7eb; border-radius: 12px; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; }
.dati-categoria-card:hover { border-color: #2563eb; transform: translateY(-2px); }
.dati-categoria-attiva { background-color: #eff6ff; border-color: #2563eb; }
.dati-categoria-titolo { font-size: 1.2rem; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
.dati-categoria-descrizione { font-size: 0.95rem; color: #6b7280; }


/* ==========================================================
   SEZIONE DATI
   ========================================================== */

.dati-section { margin-top: 30px; }
.dati-section h2 { margin-bottom: 5px; }
.dati-section > p { color: #6b7280; margin-bottom: 20px; }


/* ==========================================================
   LISTA DATI
   ========================================================== */

.dati-lista { display: flex; flex-direction: column; gap: 15px; }


/* ==========================================================
   CARD SINGOLO DATO
   ========================================================== */

.dati-card { background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }


/* ==========================================================
   HEADER CARD
   ========================================================== */

.dati-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e5e7eb; }
.dati-data { display: block; font-weight: 600; color: #1f2937; }
.dati-ora { display: block; margin-top: 3px; font-size: 0.9rem; color: #6b7280; }


/* ==========================================================
   VALORI
   ========================================================== */

.dati-valori-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.dato-item { display: flex; flex-direction: column; padding: 15px; background-color: #f9fafb; border-radius: 8px; }
.dato-label { font-size: 0.85rem; color: #6b7280; margin-bottom: 5px; }
.dato-valore { font-size: 1.1rem; font-weight: 600; color: #1f2937; }


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
    .dati-categorie { grid-template-columns: 1fr; }
    .dati-valori-grid { grid-template-columns: 1fr; }
    .dati-card-header { align-items: flex-start; gap: 15px; }
}

/* ==========================================================
   GESTIONE IMMAGINE ADMIN
   ========================================================== */

.footer-container { display: flex; align-items: center; }
.admin-link { margin-left: auto; }
.admin-icon { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; cursor: pointer; }



/* =========================================
   MODIFICA PESO - riferito alle html dei 6 paramentri nella app dati
   ========================================= */

.parametro-modifica { display: block; }


/* =========================================
   TABELLA DATI - riferito a peso.html
   ========================================= */

.tabella-container { width: 100%; overflow-x: auto; margin-top: 10px; }
.tabella-dati { width: 100%; border-collapse: collapse; background-color: #ffffff; border: 1px solid #d9e2e8; border-radius: 8px; overflow: hidden; font-size: 14px; }

/* =========================================
   INTESTAZIONE - riferito a peso.html
   ========================================= */

.tabella-dati thead { background-color: #eaf4fb; }
.tabella-dati th { padding: 15px 16px; text-align: left; color: #455a64; font-size: 13px; font-weight: bold; border-bottom: 2px solid #cfdde5; border-right: 1px solid #d9e2e8; }
.tabella-dati th:last-child { border-right: none; }

/* =========================================
   CELLE - riferito a peso.html
   ========================================= */

.tabella-dati td { padding: 16px; color: #455a64; vertical-align: middle; border-bottom: 1px solid #dfe7ec; border-right: 1px solid #dfe7ec; }
.tabella-dati td:last-child { border-right: none; }

/* =========================================
   RIGHE - riferito a peso.html
   ========================================= */

.tabella-dati tbody tr:not(.riga-modifica):nth-child(even) { background-color: #f8fbfd; }
.tabella-dati tbody tr:not(.riga-modifica):hover { background-color: #f0f7fc; }


/* =========================================
   PESO - riferito a peso.html
   ========================================= */

.tabella-dati td strong { color: #263238; font-size: 15px; }

/* =========================================
   NOTA - riferito a peso.html
   ========================================= */

.tabella-dati .testo-secondario { color: #90a4ae; }

/* =========================================
   AZIONI - riferito a peso.html
   ========================================= */

.tabella-azioni { display: flex; align-items: center; gap: 8px; }
.tabella-azioni .btn { min-width: 38px; padding: 8px 10px; text-align: center; }

/* =========================================
   RIGA MODIFICA - riferito a peso.html
   ========================================= */

.riga-modifica { background-color: #f5f9fc; }
.riga-modifica td { padding: 25px; border-bottom: 1px solid #d9e2e8; }


/* =========================================
   TABELLA DATI - MOBILE - riferito a peso.html
   ========================================= */

@media (max-width: 700px) {
  .tabella-container { width: 100%; overflow-x: auto; }
  .tabella-dati { width: 100%; min-width: 0; table-layout: auto; font-size: 13px; }
  .tabella-dati th, .tabella-dati td { padding: 11px 8px; }
  /* DATA */
  .tabella-dati th:nth-child(1), .tabella-dati td:nth-child(1) { white-space: nowrap; width: 1%; }
  /* ORA */
  .tabella-dati th:nth-child(2), .tabella-dati td:nth-child(2) { white-space: nowrap; width: 1%; }
  /* PESO */
  .tabella-dati th:nth-child(3), .tabella-dati td:nth-child(3) { white-space: nowrap; width: 1%; }
  /* NOTA */
  .tabella-dati th:nth-child(4), .tabella-dati td:nth-child(4) { width: auto; }
  /* AZIONI */
  .tabella-dati th:nth-child(5), .tabella-dati td:nth-child(5) { white-space: nowrap; width: 1%; }
  .tabella-azioni { gap: 4px; }
  .tabella-azioni .btn { min-width: 34px; padding: 7px 8px; font-size: 13px; }
}