/*
  Componente condiviso "Tabella valori nutrizionali" — un solo file per
  tutti i 55 template compatibili (vedi inc/tabella-nutrizionale.php).
  Accento sempre nero (non var(--head-text-color)): ogni template cambia
  colore/tema, un accento fisso resta leggibile e coerente ovunque venga
  incluso il componente.
*/

.nutri-card {
    --nutri-accent: #000;
    --nutri-ink: var(--tan-color, #1e1f26);
    --nutri-muted: #78717e;
    --nutri-line: var(--border-color, #e5e2ea);
    font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    margin: 0 0 20px;
}


/* Stato di caricamento durante "Calcola" (solo editing, vedi
   nutrition-editor.js): la tabella viene sostituita via AJAX invece di
   ricaricare la pagina, questo overlay copre l'attesa. */

.nutri-card.is-calculating {
    position: relative;
}

.nutri-card.is-calculating .nutri-table {
    opacity: 0.35;
    pointer-events: none;
}

.nutri-card-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nutri-card-spinner::after {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--nutri-line);
    border-top-color: var(--nutri-accent);
    animation: nutri-card-spin 0.7s linear infinite;
}

@keyframes nutri-card-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nutri-card-spinner::after {
        animation: none;
    }
}

.nutri-card .nutri-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nutri-muted);
    margin: 0 0 10px;
}

.nutri-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--nutri-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 10, 30, 0.04), 0 12px 26px -18px rgba(20, 10, 30, 0.2);
}

.nutri-table thead th {
    text-align: right;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nutri-accent);
    padding: 10px 14px;
    border-bottom: 1px solid var(--nutri-line);
    white-space: nowrap;
}

.nutri-table thead th.col-label {
    text-align: left;
    color: var(--nutri-muted);
}

.nutri-table tbody td {
    padding: 9px 14px;
    font-size: 13.5px;
    vertical-align: baseline;
}

.nutri-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--nutri-line);
}

.nutri-table td.col-label {
    font-weight: 500;
    text-align: left;
}

.nutri-table td.col-val {
    width: 96px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.nutri-table td.col-val .unit {
    font-weight: 500;
    font-size: 11px;
    color: var(--nutri-muted);
    margin-left: 3px;
}

.nutri-table td.col-val.nutri-readonly {
    color: var(--nutri-muted);
    font-weight: 500;
}


/* riga "di cui..." */

.nutri-table tr.nutri-sub td.col-label {
    padding-left: 12px;
    color: var(--nutri-muted);
    font-size: 12.5px;
    font-weight: 400;
    border-left: 2px solid var(--nutri-line);
    margin-left: 2px;
}

.nutri-table tr.nutri-sub td {
    padding-top: 6px;
    padding-bottom: 6px;
}


/* riga Energia: trattata come statistica in evidenza */

.nutri-table tr.nutri-hero-row td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--nutri-line);
}

.nutri-table tr.nutri-hero-row td.col-label {
    font-weight: 600;
    font-size: 13px;
}

.nutri-table tr.nutri-hero-row td.col-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--nutri-accent);
    letter-spacing: -0.01em;
}

.nutri-table tr.nutri-hero-row td.col-val.nutri-readonly {
    color: color-mix(in oklab, var(--nutri-accent), var(--nutri-muted) 35%);
}

.nutri-table tr.nutri-hero-row td.col-val .unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--nutri-accent);
    opacity: 0.7;
}


/* kJ: riga secondaria sotto ai kcal, volutamente più discreta */

.nutri-table tr.nutri-hero-row td.col-val .nutri-kj-sub {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--nutri-accent);
    margin-top: 2px;
}


/* Nella colonna di sola lettura tutto il valore è già smorzato (vedi
   .nutri-readonly sopra): i kJ devono restare dello stesso grigio, non
   tornare neri come nella colonna principale. */

.nutri-table tr.nutri-hero-row td.col-val.nutri-readonly .nutri-kj-sub {
    color: inherit;
}

@media (max-width: 420px) {
    .nutri-table td.col-val,
    .nutri-table th.col-val {
        width: 76px;
    }
}