/* === NOTA: Variabili aggiuntive necessarie in theme.css ===
   --shadow-brand-xs: rgba(102, 126, 234, 0.1)    / dark: rgba(90, 111, 214, 0.15)
   --shadow-brand-sm: rgba(102, 126, 234, 0.15)   / dark: rgba(90, 111, 214, 0.2)
   --shadow-brand-md: rgba(102, 126, 234, 0.3)    / dark: rgba(90, 111, 214, 0.35)
   --gradient-surface-light: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%)
      dark: linear-gradient(135deg, var(--bg-surface-raised) 0%, var(--bg-surface-alt) 100%)
   --primary-light: #c7d2fe  / dark: #4338ca
   --primary-bg: #e0e7ff     / dark: rgba(99, 102, 241, 0.15)
   === */

/* === MODAL BASE === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-backdrop);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.planning-modal-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: inherit;
    max-height: inherit;
}

.btn-primary-modal,.btn-secondary-modal,.btn-tertiary-modal,.btn-quartary-modal,.btn-quintary-modal{
    display: block;
    color: var(--text-stable-white);
}


.modal-content {
    background: var(--bg-surface);
    border-radius: 20px;
    width: 96%;
    max-width: 98%;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px var(--shadow-lg);
    scrollbar-width: none;
    -ms-overflow-style: none;

}


/* Rimuovi transform quando autocomplete è aperto */
.food-list:has(.autocomplete-dropdown:not(.hidden)) {
    transform: none !important;
    -webkit-transform: none !important;
}

.food-list:has(.autocomplete-dropdown:not(.hidden)) .food-item,
.food-list .food-item:not(.editing):not(.inserting) {
    z-index: 0;
}

.food-list .food-item.editing,
.food-list .food-item.inserting,
.food-list:has(.autocomplete-dropdown:not(.hidden)) .food-item:has(.autocomplete-dropdown:not(.hidden)) {
    z-index: 10001;
}


.analisi-header {
    position: sticky;
    top: 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%);
    z-index: 1;
    border-radius: 10px 10px 0 0;
}

.analisi-mode-tabs {
    display: flex;
    gap: 0;
    background: rgba(0,0,0,0.08);
    border-bottom: 1px solid var(--border-light);
    padding: 0 16px;
}

.analisi-mode-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.analisi-mode-tab:hover {
    color: white;
    background: rgba(255,255,255,0.08);
}

.analisi-mode-tab.active {
    color: white;
    font-weight: 700;
    background: transparent;
}

.pie-chart-outer {
    margin-bottom: 4px;
}

.pie-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 4px;
}

.pie-chart-eye-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8em;
    padding: 2px 4px;
    transition: opacity 0.2s;
    line-height: 1;
    color: var(--text-primary);
}

.pie-chart-eye-btn:hover {
    opacity: 0.7 !important;
}

.modal-header {
    position: sticky;
    top: 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-app);
    z-index: 1000;
    border-radius: 10px 10px 0 0;
}


.clone.modal-header,
.edit.modal-header,
.state.modal-header,
.pdf.modal-header {
    padding: 16px 20px;
    min-height: auto;
}


.modal-body {
    padding: 30px;
}

.modal-close {
    background: var(--bg-hover-inverse);
    border: none;
    color: white;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.modal-close:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* === MEAL MANAGER === */
/* === MEAL QUICK ADD BUTTONS (stile card originale) === */
.meal-quick-btn {
    background: var(--bg-surface);
    border: 2px solid var(--border-medium);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
}

.meal-quick-btn:hover {
    border-color: var(--gradient-app-start);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-brand-sm);
}

.meal-quick-btn.active {
    background: var(--gradient-app);
    color: white;
    border-color: var(--gradient-app-start);
    box-shadow: 0 4px 15px var(--shadow-brand-md);
}

.meal-quick-btn .meal-number {
    font-size: 1.2em;
    font-weight: bold;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meal-quick-btn.active .meal-number {
    background: var(--bg-active-inverse);
}

.meal-quick-btn .meal-name {
    font-size: 0.95em;
    font-weight: 600;
}

.meal-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    transition: box-shadow 0.2s, opacity 0.2s;
}

.meal-list-item:hover {
    box-shadow: 0 2px 8px var(--shadow-md);
}

.meal-list-item.dragging {
    opacity: 0.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.meal-list-item.drag-over {
    border-color: var(--gradient-app-end);
    border-style: dashed;
}

.meal-drag-handle {
    cursor: grab;
    font-size: 1.2em;
    color: var(--text-muted);
    user-select: none;
}

.meal-drag-handle:active {
    cursor: grabbing;
}

.meal-item-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gradient-app-end);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 700;
    flex-shrink: 0;
}

.meal-item-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.95em;
}

.meal-item-badge {
    font-size: 0.75em;
    padding: 2px 8px;
    background: #4a90d9;
    color: var(--text-stable-white);
    border-radius: 10px;
}

.meal-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-hover-inverse);
    color: #e74c3c;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.meal-remove-btn:hover {
    background: #e74c3c;
    color: white;
}

/* === CONFIGURAZIONE === */
.config-section {
    background: var(--bg-surface-raised);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 25px;
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;

}

/* === SLIDERS MACRONUTRIENTI === */
.macro-sliders {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.slider-group {
    text-align: center;
}

.slider-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--gradient-app-start);
}

.macro-slider {
    width: 100%;
    margin-bottom: 10px;
     -webkit-appearance: none; 
    height: 8px;
    border-radius: 5px;
    background: #ddd;
    outline: none;
}

.macro-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gradient-app-start);
    cursor: pointer;
}

.slider-value {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-primary);
}

/* === GRAFICO A TORTA === */
.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        #ff6b6b 0deg,
        #ff6b6b var(--protein-deg),
        #fce300 var(--protein-deg),
        #fce300 var(--carbs-deg),
        #45b7d1 var(--carbs-deg),
        #45b7d1 360deg
    );
    position: relative;
    margin-right: 30px;
}

.chart-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.legend-protein { background: #ff6b6b; }
.legend-carbs { background: #fce300; }
.legend-fats { background: #45b7d1; }

/* === MEAL SELECTOR CHECKBOXES === */
.meal-checkbox-container {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.meal-checkbox-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.meal-checkbox-label {
    background: var(--bg-surface);
    border: 2px solid var(--border-medium);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.meal-checkbox-container:hover .meal-checkbox-label {
    border-color: var(--gradient-app-start);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-brand-sm);
}

.meal-checkbox-container input[type="checkbox"]:checked ~ .meal-checkbox-label {
    background: var(--gradient-app);
    color: white;
    border-color: var(--gradient-app-start);
    box-shadow: 0 4px 15px var(--shadow-brand-md);
}

.meal-checkbox-container input[type="checkbox"]:checked ~ .meal-checkbox-label .meal-number {
    background: var(--bg-active-inverse);
}

.meal-name {
    font-size: 0.95em;
    font-weight: 600;
}



.form-control-modal{
    background: var(--bg-surface);
    border: 2px solid var(--primary-light);
    border-radius: 10px;
    padding: 14px;
    width: 100%;
    color: var(--text-primary);
}

/* === PIANIFICAZIONE SETTIMANALE === */
.planning-section {
    background: var(--bg-surface-raised);
    border-radius: 15px;
    padding: 25px;
    margin-top: 25px;
    display: none;
    text-align: center;
}

.week-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: clamp(4px, 0.4vw, 8px);
    justify-content: stretch;
    margin-top: 20px;
    margin-bottom: 20px;

}
.week-tabs > * {
    max-width: none;
}

.week-tabs.is-pinned {
    position: absolute;
    z-index: 999;
    background: var(--bg-surface-raised);
    padding: 6px 0;
    margin-top: 0;
    margin-bottom: 0;
}

.week-tabs.two-day-tabs {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    justify-content: stretch;
}
.week-tabs.two-day-tabs > * {
    max-width: none;
}


/* Bottoni */
.week-tabs .day-tab {
    padding: clamp(5px, 0.5vw, 10px) 0;
    font-size: clamp(0.72em, 0.35vw + 0.4em, 0.88rem);
    border-radius: clamp(12px, 1vw, 20px);
    width: 100%;
    max-width: none;
}


.week-tabs .day-tab-single {
    padding: 12px 8px;
    font-size: clamp(0.72em, 0.35vw + 0.4em, 0.88rem);
    border-radius: clamp(12px, 1vw, 20px);
    width: 100%;
    max-width: none;
}



.day-tab {
    padding: 12px 8px;
    border: 2px solid var(--border-medium);
    background: var(--bg-surface);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    text-align: center;
    font-size: 0.9em;
    position: relative;
    width: 100px;
    max-width: 300px;
    color:var(--text-primary);
}

.day-tab.active {
    background: var(--gradient-app);
    color: white;
    border-color: var(--gradient-app-start);
}

.day-tab.completed {
    border-color: #38ef7d;
    box-shadow: 0 2px 10px rgba(56, 239, 125, 0.3);
}

/* === PIANIFICAZIONE GIORNALIERA === */
.day-planning {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 20px;
    
}

#current-day-title {
    display: flex;
    justify-content: center;  /* centra il titolo */
    align-items: center;
    position: relative;       /* permette il posizionamento assoluto del bottone */
    font-size: 1.4rem;
    font-weight: 600;
}

/* bottone a destra */
.day-title-actions {
    position: absolute;
    right: 0;   /* incolla il bottone alla destra */
}


.meal-section {
    border: 2px solid var(--border-light);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    background: var(--bg-surface-raised);
}

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

.meal-title {
    font-size: 1.4em;
    font-weight: bold;
    color: white;
    padding: 15px 20px;
    background: var(--gradient-app);
    border-radius: 10px;
    text-align: center;
    margin-bottom: 0;
    margin-right: 18px;
}

.meal-stats {
    font-size: 0.9em;
    color: var(--text-secondary);
}

/* Griglia micronutrienti */
.micronutrients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    background: var(--bg-surface-raised);
    padding: 20px;
    border-radius: 10px;
    margin: 15px 0;
}

.micro-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.micro-group label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.micro-icon {
    font-size: 1.1em;
}

.micro-input {
    padding: 8px 12px;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.95em;
    transition: all 0.3s ease;
}

.micro-input:focus {
    border-color: var(--gradient-app-start);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.micro-input::placeholder {
    color: var(--text-muted);
}

.micro-info {
    /*background: #e3f2fd;*/
    background: linear-gradient(135deg, var(--info-bg-lightest) 0%, var(--info-bg-light) 100%);
    border:1px solid var(--primary-dark);
    border-left: 4px solid var(--primary-dark);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    
}

.micro-info p {
    margin: 0;
    font-size: 0.9em;
    color: var(--primary-light);
}

/* Stili per valori che superano il limite */
.micro-exceeded {
    color: #32c5ff !important;
    font-weight: bold;
    animation: pulse 1s ease-in-out;
}


.micro-warning {
    color: #ff9800 !important;
    font-weight: bold;
}

/* Tooltip per limiti */
.limit-indicator {
    font-size: 0.8em;
    margin-left: 5px;
    color: var(--text-secondary);
}

.limit-indicator.exceeded {
    color: #32c5ff ;
}


/* === TABELLA ALIMENTI === */
.food-list {
    margin-top: 15px;
}

/* Container principale per ogni sezione pasto */
.meal-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

/* Header del pasto con pulsante e totali */
.meal-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
}

/* Pulsante del pasto */
.meal-title {
    background: #6366f1;
    color: white;
    padding: 15px 25px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.1em;
    min-width: 120px;
    text-align: center;
    flex-shrink: 0;
}

/* Container per i totali nutrizionali */
.meal-totals-container {
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Header dei totali nutrizionali */
.meal-totals-header {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 8px;
    padding: 15px;
    text-align: center;
    font-size:  0.9em;
    border-radius: 12px;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--text-primary);
}



.macro-meal-totals-header {

    gap: 8px;
    padding: 15px;
    text-align: center;
    font-size: 0.9em;
    border-radius: 12px;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--text-primary);
}





.food-table-header,
.food-item {
    display: flex;
    gap: 8px;
    padding: 15px;
    text-align: center;
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box;
}




/* Aggiungi questa regola per l'ultima colonna (pulsante Elimina) */
.food-table-header > div:last-child{
    flex: 0 0 auto; /* Non si espande, mantiene la sua larghezza naturale */
}




.food-table-header {
    background: #ffebee;
    color: #333;
    font-weight: bold;
    border-radius: 12px;
    margin-bottom: 15px;
}



.add-food-btn:hover {
    background: #357abd;
}





.food-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Micronutrienti */
.food-table-header div:nth-child(n+5):nth-child(-n+14) {
    background: var(--bg-surface-raised);
    color: var(--text-secondary);
    padding: 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Food Items */
.food-item {
    align-items: center;
    background: var(--bg-surface);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 2px solid var(--border-light);
    transition: all 0.3s ease;
    background: linear-gradient(90deg, #e3fdf3 0%, #06ff62a0 100%);
    border: 2px solid green;
    position: relative;
    z-index: 1;
}





.food-item input[type="number"]{
    background-color: var(--bg-surface);
}

.food-item:hover {

    transform: translateY(-1px);
}


.food-item.inserting:hover {
    transform: none !important;
    /* Mantieni solo il bordo e l'ombra senza movimento */
    border-color: var(--gradient-app-start);
    box-shadow: 0 4px 6px var(--shadow-brand-sm);
}

/* Allineamento prima colonna */
.food-table-header div:first-child,
.food-item .food-name {
    text-align: left !important;
}

.food-name {
    text-align: left !important;
    font-weight: bold;
    color: var(--text-primary);
    font-size: 1.2em;
    padding: 8px;
    background: var(--bg-surface-raised);
    border-radius: 8px;
    border: 1px solid black;
    
}

/* Input quantità */
.food-item input[type="number"] {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    height: 39.5px;
}

.food-item input[type="number"]:focus {
    border-color: var(--gradient-app-start);
    outline: none;
    box-shadow: 0 0 10px var(--shadow-brand-md);
}


/* === AUTOCOMPLETE === */
.autocomplete-container {
    position: relative;
    width: fit-content;
    z-index: 20000;
}

.autocomplete-input {
    width: 130px;
    padding: 8px 12px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    z-index: 100000;
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

.autocomplete-input:focus {
    border-color: var(--gradient-app-start);
    outline: none;
    z-index: 100000;
    
}

.autocomplete-dropdown {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 455px;
    overflow-y: auto;
    z-index: 100000;
    box-shadow: 0 4px 10px var(--shadow-md);
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 350px;
    text-align: center;
    
}



.autocomplete-dropdown::-webkit-scrollbar {
    display: none;
}

.autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
    background: var(--bg-surface-raised);
  
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.food-nutrition {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ===================================================================
   FIX Z-INDEX DROPDOWN AUTOCOMPLETE - Modal Pasti Pre-fatti
   
   Aggiungi queste regole al tuo modal.css (prima della riga 783)
   =================================================================== */

/* Impedisce che i totali nutrizionali creino nuovi stacking context */
.meal-totals-grid > div {
    position: static !important;
}


/* Solleva il food-item quando l'autocomplete è aperto */
#meal-modal .food-item:has(.autocomplete-dropdown:not(.hidden)) {
    z-index: 10001 !important;
}

/* Solleva il food-item quando il unit-picker è aperto */
.food-item:has(.unit-picker.open) {
    z-index: 10001 !important;
}


.add-food-btn {
    width: 100%;
    padding: 10px;
    border: 2px dashed var(--border-medium);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--gradient-app-start);
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.add-food-btn:hover {
    border-color: var(--gradient-app-start);
    background: rgba(102, 126, 234, 0.1);
}


.food-item.alternative {
    background: linear-gradient(90deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 2px solid #9c27b0;
    border-radius: 8px;
    margin: 8px 0;
    
}

/* Override per alternative con accepted override */
.food-item.alternative.accepted-override {
    background: linear-gradient(90deg, #e3f5ff 0%, #b3d9ff 100%) !important;
    border: 2px solid #4caf50 !important;
}

/* Alternative incompatibile */
.food-item.alternative.incompatible-food {
    background: linear-gradient(90deg, #ffebee 0%, #ffcdd2 100%) !important;
    border: 2px solid #d32f2f !important;
    opacity: 0.85;
}

/* Alternative con warning */
.food-item.alternative.warning-food {
    background: linear-gradient(90deg, #fff3e0 0%, #ffe0b2 100%) !important;
    border: 2px solid #f57c00 !important;
    opacity: 0.85;
}

.food-item.alternative .alternative-container {
    opacity: 0.9;
}



.main-food-container {
    background: var(--bg-surface);
    border-radius: 6px;
    padding: 4px;
}

.main-food-container {
    background: var(--bg-surface);
    border-radius: 6px;
    padding: 4px;
}

.alternative-container {
    background: rgba(156, 39, 176, 0.05);
    border-radius: 6px;
    padding: 4px;
}

.macro-input-section {
    background: var(--bg-surface-raised);
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px;
}

.macro-input-section input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    font-size: 1.4em;
    transition: all 0.3s ease;
}

.macro-input-section input[type="number"]:focus {
    border-color: var(--gradient-app-start);
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.macro-input-section textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.95em;
    resize: vertical;
    transition: all 0.3s ease;
}

.macro-input-section textarea:focus {
    border-color: var(--gradient-app-start);
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}


/* Container quantità + unità - INLINE */
.quantity-unit-container {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-width: 160px;
    flex-shrink: 0;
    height: 39.5px;
}

.quantity-unit-container .quantity-input {
    width: 65px;
    padding: 8px;
    border: 1px solid var(--border-medium);
    border-radius: 10px 0 0 10px;
    text-align: center;
    -moz-appearance: textfield;
    height: 100%;
    color: var(--text-primary);
}

.quantity-unit-container .quantity-input::-webkit-outer-spin-button,
.quantity-unit-container .quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-unit-container .unit-select {
    /* Il select nativo viene nascosto da unit-picker.js; regole visive rimangono
       solo come fallback se JS non è caricato */
    padding: 8px 4px;
    border: 1px solid var(--border-medium);
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: var(--bg-surface-raised);
    cursor: pointer;
    height: 100%;
    color: var(--text-primary);
    min-width: 120px;
}

.quantity-unit-container .unit-select:disabled,
.quantity-unit-container .quantity-input:disabled {
    background: #e9ecef;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ── Meal timing row ── */
.meal-timing-row {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(96px, 120px) 1fr;
    gap: 8px;
    margin: 8px 0 12px;
    align-items: stretch;
}

.meal-timing-role-select {
    min-height: 34px;
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
}

.meal-timing-row .meal-timing-role-picker {
    width: 100%;
    min-width: 0;
    height: 100%;
    flex: none;
}

.meal-timing-row .meal-timing-role-trigger {
    height: 42px;
    margin-top: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-surface-raised);
    padding: 0 28px 0 10px;
    font-size: 0.88rem;
}

.meal-timing-row .meal-timing-role-picker.open .meal-timing-role-trigger {
    border-radius: 8px 8px 0 0;
}

.meal-timing-row .meal-timing-role-dropdown {
    left: 0;
    border-radius: 0 0 8px 8px;
    max-height: 180px;
}

.meal-time-hint-picker {
    width: 100%;
    height: 100%;
}

.meal-time-hint-picker .cal-time-picker-btn {
    width: 100%;
    height: 80%;
    min-height: 34px;
    justify-content: center;
    padding: 0 10px;
    font-size: 0.88rem;
    font-weight: 500;
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    color: var(--text-primary);
    margin-top: 10px;
}

/* ── Unit picker custom (mirrors progress-exercise-picker) ── */
.unit-picker {
    position: relative;
    flex: 1;
    min-width: 120px;
    height: 100%;
}

.unit-picker-trigger {
    width: 100%;
    height: 100%;
    padding: 8px 28px 8px 10px;
    border: 1px solid var(--border-medium);
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: var(--bg-input, var(--bg-surface-raised));
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    text-align: left;
    transition: border-color 0.2s, border-radius 0.2s;
}
.unit-picker-trigger:hover {
    border-color: var(--gradient-app-start, #667eea);
}
.unit-picker.open .unit-picker-trigger {
    border-color: var(--gradient-app-start, #667eea);
    border-bottom-color: transparent;
    border-radius: 0 10px 0 0;
}

.unit-picker-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.unit-picker-arrow {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.unit-picker.open .unit-picker-arrow {
    transform: rotate(180deg);
}

.unit-picker-dropdown {
    position: absolute;
    top: 100%;
    left: -1px;
    right: 0;
    display: none;
    background: var(--bg-surface-card, var(--bg-surface-raised, #fff));
    border: 1px solid var(--gradient-app-start, #667eea);
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 10px 10px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 8px 24px var(--shadow-md);
    scrollbar-width: none;
}
.unit-picker-dropdown::-webkit-scrollbar { display: none; }
.unit-picker.open .unit-picker-dropdown {
    display: block;
}

.unit-picker-option {
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-bottom: 1px solid var(--border-lightest);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.unit-picker-option:last-child { border-bottom: none; }
.unit-picker-option:hover { background: var(--bg-surface-raised); }
.unit-picker-option.selected {
    background: var(--primary-bg-light, var(--bg-surface-raised));
    color: var(--gradient-app-start, #667eea);
    font-weight: 700;
}

/* Stato disabled: griglia input + picker spenti */
.quantity-unit-container:has(.quantity-input:disabled) .unit-picker-trigger,
.unit-picker-trigger:disabled {
    background: #e9ecef;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}

/* Quantity-unit nel modal alimenti manuali */
.manual-food-form .quantity-unit-container {
    display: flex;
    flex-direction: row;
    gap: 0;
}





.manual-food-form .quantity-input {
    flex: 1;
    border-radius: 10px 0 0 10px;
}

.manual-food-form .unit-select {
    width: 100px;
    border-radius: 0 10px 10px 0;
    border-left: none;
}



/* Animazione per nascondere/mostrare sezioni */
#micronutrients-section {
    transition: all 0.3s ease;
}

#micronutrients-section.hidden {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Stile per i totali in modalità macro */
.meal-section.macro-mode .macro-meal-totals-header {
    padding: 15px;
    border-radius: 8px;
}

/* Label per modalità macro */
.macro-mode-indicator {
    display: inline-block;
    background: var(--gradient-app-start);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 10px;
    font-weight: bold;
}

/* Evidenzia quando siamo in modalità macro */
.planning-section.macro-mode {
    border-top: 3px solid var(--gradient-app-start);
}

/* Tooltip per info acqua e sale */
.macro-info-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.macro-info-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.macro-info-tooltip:hover::after {
    opacity: 1;
}

/* Stile per il totale acqua */
#daily-total-water-container {
    animation: slideIn 0.3s ease;
}


/* Evidenzia campi obbligatori in modalità macro */
.macro-input-section input:required {
    border-left: 3px solid var(--gradient-app-start);
}

/* Stile per le note del pasto */
.meal-notes-container {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
}


/* === Autocomplete: compatibilità === */

.autocomplete-item.food-forbidden {
    background-color: var(--danger-bg-lightest);
    border-left: 3px solid var(--danger);
}

.autocomplete-item.food-warning {
    background-color: var(--warning-bg-lightest);
    border-left: 3px solid var(--warning);
}

/* === Food row nel piano: compatibilità === */

.food-item.incompatible-food {
    background: var(--danger-bg-lightest);
    border: 1px solid var(--danger-border);
    border-left: 3px solid var(--danger);
}

.food-item.warning-food {
    background: var(--warning-bg-lightest);
    border: 1px solid var(--warning-border);
    border-left: 3px solid var(--warning);
}

/* Badge per tipo dieta nel modal */
#diet-type-indicator {
    margin-bottom: 20px;
}

/* === DIET-VALIDATION.CSS - STILI PER POPUP DI VALIDAZIONE === */

/* Overlay del popup */
.validation-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-backdrop);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.validation-popup-overlay.show {
    opacity: 1;
}

/* Contenuto del popup */
.validation-popup-content {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px var(--shadow-lg);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.validation-popup-overlay.show .validation-popup-content {
    transform: scale(1);
}

/* Header del popup */
.validation-popup-header {
    padding: 20px 25px;
    background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
    color: white;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.validation-popup-header.warning {
    background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
}

.validation-popup-header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: bold;
}

.popup-close-btn {
    background: var(--bg-hover-inverse);
    border: none;
    color: white;
    font-size: 28px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.popup-close-btn:hover {
    background: var(--bg-active-inverse);
}

/* Body del popup */
.validation-popup-body {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(85vh - 180px);
}

/* Alert boxes */
.validation-alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid;
}

.validation-alert-error {
    background: #ffebee;
    color: #c62828;
    border-color: #d32f2f;
}

.validation-alert-warning {
    background: #fff3e0;
    color: #e65100;
    border-color: #f57c00;
}

/* Sezioni */
.validation-section {
    margin-bottom: 25px;
}

.validation-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: var(--text-primary);
}

.validation-icon-error {
    font-size: 1.2em;
}

.validation-icon-warning {
    font-size: 1.2em;
}

/* Lista violazioni */
.violations-list {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
}

.day-violations {
    margin-bottom: 20px;
    background: var(--bg-surface);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-medium);
}

.day-violations:last-child {
    margin-bottom: 0;
}

.day-header {
    background: var(--bg-surface-raised);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-medium);
}

.day-header strong {
    color: var(--text-primary);
    font-size: 1.05em;
}

.violation-count,
.warning-count {
    background: #d32f2f;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: bold;
}

.warning-count {
    background: #f57c00;
}

.day-violations-list {
    padding: 10px;
}

.diet-violation-badge {
    display: inline-block;
    background: #d32f2f;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 600;
    margin-right: 6px;
}

.diet-violation-badge.warning {
    background: #f57c00;
}

.violation-message {
    margin-top: 4px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/* Singola violazione */
.violation-item {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 3px solid;
}

.violation-item:last-child {
    margin-bottom: 0;
}

.violation-forbidden {
    background: #ffebee;
    border-color: #d32f2f;
}

.violation-warning {
    background: #fff8e1;
    border-color: #ffc107;
}

.violation-location {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.meal-badge {
    background: var(--gradient-app-start);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: bold;
    white-space: nowrap;
}



.violation-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 5px;
}

.category-badge {
    display: inline-block;
    background: #e0e0e0;
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    width: fit-content;
}

.category-badge.warning {
    background: #ffe0b2;
    color: #e65100;
}

.violation-message {
    font-size: 0.9em;
    color: #666;
    font-style: italic;
}

.violation-message.warning {
    color: #f57c00;
}

/* Info box */
.validation-info {
    background: #e3f2fd;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    border-left: 4px solid #2196f3;
}

.validation-info.warning {
    background: #fff8e1;
    border-color: #ffc107;
}

.validation-info p {
    margin: 0 0 10px 0;
    color: #1565c0;
    font-weight: bold;
}

.validation-info ul {
    margin: 0;
    padding-left: 20px;
}

.validation-info li {
    margin-bottom: 8px;
    color: #333;
}

/* Footer del popup */
.validation-popup-footer {
    padding: 20px 25px;
    background: var(--bg-surface-raised);
    border-top: 1px solid var(--border-medium);
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Pulsanti nel popup */
.validation-popup-footer .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1em;
}

.validation-popup-footer .btn-secondary {
    background: #e0e0e0;
    color: var(--text-primary);
}

.validation-popup-footer .btn-secondary:hover {
    background: #d0d0d0;
}

.validation-popup-footer .btn-primary {
    background: var(--gradient-app);
    color: white;
}

.validation-popup-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-brand-md);
}

.validation-popup-footer .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: white;
}

.validation-popup-footer .btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

/* Popup solo warning */
.validation-warning-popup .validation-popup-header {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}




.food-item.incompatible-food {
    animation: shake 0.5s ease-in-out;
    background: linear-gradient(90deg, #ffebee 0%, #ffcdd2 100%) !important;
    border: 2px solid #d32f2f !important;
}

.food-item.warning-food {
    background: linear-gradient(90deg, #fff3e0 0%, #ffe0b2 100%) !important;
    border: 2px solid #f57c00 !important;
}

/* Scrollbar personalizzata per il popup */
.validation-popup-body::-webkit-scrollbar {
    width: 8px;
}

.validation-popup-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.validation-popup-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.validation-popup-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}





/* ========================================
   2. CONTATORE GLOBALE
   ======================================== */
.global-compatibility-counter {
    background: var(--bg-surface);
    border: 2px solid var(--border-medium);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px var(--shadow-md);
    transition: all 0.3s ease;
}

.global-compatibility-counter.minimized {
    padding: 10px;
}

.global-compatibility-counter.minimized .compatibility-counter-body {
    display: none;
}

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

.global-compatibility-counter.minimized .compatibility-counter-header {
    margin-bottom: 0;
}

.diet-type-label {
    font-weight: bold;
    color: var(--gradient-app-start);
    font-size: 1.1em;
}

.minimize-btn {
    background: #e0e0e0;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.minimize-btn:hover {
    background: #d0d0d0;
}

.compatibility-counter-body {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.counter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-surface-raised);
    border-radius: 8px;
    flex: 1;
    min-width: 140px;
}

.counter-item.forbidden {
    background: var(--danger-bg-light) !important;
    border: 2px solid var(--danger-border) !important;
    flex: 0 0 auto;       /* Non si espande più a riempire */
    min-width: 120px;     /* Larghezza fissa più contenuta */
    max-width: 300px;     /* opzionale: limite massimo */
}

.counter-item.warning {
    background: var(--warning-bg-light) !important;
    border: 2px solid var(--warning-border) !important;
    flex: 0 0 auto;       /* Non si espande più a riempire */
    min-width: 120px;     /* Larghezza fissa più contenuta */
    max-width: 300px;     /* opzionale: limite massimo */
}

.counter-icon {
    font-size: 1.3em;
}

.counter-value {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--text-primary);
}

.counter-label {
    font-size: 0.9em;
    color: var(--text-primary);
}

.btn-validate {
    padding: 8px 16px;
    background: var(--gradient-app);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-validate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-brand-md);
}

/* ========================================
   3. LEGEND
   ======================================== */
.compatibility-legend {
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.compatibility-legend.collapsed {
    background: transparent;
    border: none;
    margin-top: 8px;
}

.legend-toggle {
    width: 100%;
    padding: 10px 15px;
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-secondary);
    transition: all 0.2s ease;

}

.legend-toggle:hover {
    background: var(--bg-surface-card);
    box-shadow: 0 10px 25px var(--shadow-lg);
}

.compatibility-legend:not(.collapsed) .legend-toggle {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border-medium);
}

.legend-content {
    padding: 15px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.compatibility-legend.collapsed .legend-content {
    display: none;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
}

.legend-color {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid;
}

.legend-color.forbidden {
    background: #ffebee;
    border-color: #d32f2f;
}

.legend-color.warning {
    background: #fff3e0;
    border-color: #f57c00;
}

.legend-color.allowed {
    background: #e8f5e9;
    border-color: #4caf50;
}

.legend-color.alternative{
    border-color: #9c27b0;
    background: #f5ebff;
}

.legend-color.manual{
    border-color: #000000 ;
    background: #d1d5db;
}

.legend-color.alternative_manual{
    border-color: #2563eb ;
    background: #d1d5db;
}

/* ========================================
   4. TOOLTIP
   ======================================== */
.compatibility-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 5px;
}

.tooltip-icon {
    cursor: help;
    font-size: 0.9em;
}

.tooltip-content {
    visibility: hidden;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    max-width: 250px;
    white-space: normal;
}

.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

.compatibility-tooltip:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* ========================================
   5. BADGE PER PASTO
   ======================================== */
.meal-compatibility-badge {
    display: flex;
    gap: 8px;
    margin-left: auto;
    z-index: 10000000;
}

.badge-forbidden,
.badge-warning {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: bold;
    margin-top: 100px;
}

.badge-forbidden {
    background: #d32f2f;
    color: white;
}

.badge-warning {
    background: #f57c00;
    color: white;
}

/* ========================================
   6. QUICK FIX BUTTON
   ======================================== */
.quick-fix-btn {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 5px;
}

.quick-fix-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* ========================================
   7. ANIMAZIONI
   ======================================== */


.day-compatibility-indicator {
    animation: pulse 2s infinite;
}


.global-compatibility-counter {
    animation: slideDown 0.3s ease;
}


/* ========================================
   10. INTEGRAZIONE CON TEMA ESISTENTE
   ======================================== */
.meal-header {
    position: relative;
}

.meal-compatibility-badge {
    position: absolute;
    top: 60px;
    right: 10px;
}

/* Badge macro mode con compatibilità */
.day-tab.macro-mode .day-compatibility-indicator {
    top: -12px;
}

/* Indicatore compatibilità con stato configured */
.day-tab.configured .day-compatibility-indicator {
    right: -12px;
}

/* === STILI PER MULTI-DIETA E CASI SPECIALI === */

/* Selettore Multi-Dieta */
.multi-diet-selector {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 20px;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 12px var(--shadow-md);
    scrollbar-width: none;
}

.multi-diet-header {
    margin-bottom: 20px;
    text-align: center;
}

.multi-diet-header h4 {
    margin: 0 0 5px 0;
    color: var(--text-primary);
}

.multi-diet-header small {
    color: var(--text-secondary);
    font-style: italic;
}

.diet-group {
    margin-bottom: 25px;
    background: var(--bg-surface-raised);
    padding: 15px;
    border-radius: 8px;
}

.diet-group h5 {
    margin: 0 0 15px 0;
    color: var(--text-secondary);
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.diet-checkboxes {
    display: grid;
    gap: 10px;
}

.diet-checkbox-label {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    background: var(--bg-surface);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.diet-checkbox-label:hover {
    border-color: var(--gradient-app-start);
    transform: translateX(3px);
}

.diet-checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 2px;
    cursor: pointer;
}

.diet-checkbox-label input[type="checkbox"]:checked + .diet-name {
    color: var(--gradient-app-start);
    font-weight: bold;
}

.diet-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.diet-desc {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-top: 3px;
}

.priority-badge {
    background: #d32f2f;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 5px;
}

.multi-diet-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-medium);
}

/* Indicatore Multi-Dieta */
.multi-diet-indicator {
    background: var(--bg-surface-sunken);
    border: 2px solid var(--border-medium);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.multi-diet-indicator .multi-diet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.edit-diets-btn {
    background: var(--gradient-app-start);
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.edit-diets-btn:hover {
    background: #5a67d8;
}

.diet-group-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.diet-group-indicator.medical {
    background: var(--danger-bg-lightest);
    padding: 8px;
    border-radius: 6px;
    border-left: 3px solid var(--danger-dark);
}

.group-icon {
    font-size: 1.2em;
}

.diet-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.diet-tag {
    background: var(--bg-surface);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    border: 1px solid var(--border-medium);
}

.diet-tag.medical-tag {
    background: var(--danger-bg);
    border-color: var(--danger-dark);
    color: var(--danger-text);
    font-weight: bold;
}

/* Conflitti tra diete */
#diet-conflicts {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 10px;
    margin: 10px 0;
    display: none;
    color: #856404;
    font-size: 0.9em;
}

/* Popup per violazioni mediche */
.validation-popup-header.medical {
    background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
}

.violation-item.medical {
    
    border-left: 4px solid #d32f2f;
    
}

.violation-medical-icon {
    display: inline-block;
    background: #d32f2f;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    margin-right: 5px;
}

/* Badge per indicare tipo di restrizione */
.restriction-type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 5px;
}

.restriction-type-badge.medical {
    background: #d32f2f;
    color: white;
}

.restriction-type-badge.ethical {
    background: #4caf50;
    color: white;
}

.restriction-type-badge.lifestyle {
    background: #2196f3;
    color: white;
}



/*OVERRIDE*/
/* Callout */
.config-callout{
   background: linear-gradient(135deg, var(--info-bg-lightest) 0%, var(--info-bg-light) 100%);
  border:1px solid var(--primary-dark);
  border-left: 4px solid var(--primary-dark);
  color: var(--primary-light);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:16px;
  
}

/* Macro + Gestisci */
.macro-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.macro-row-checkboxes {
    display: flex;
    gap: 12px;
}

.macro-row-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.macro-card{
  background: var(--bg-surface); border:2px solid #c7d2fe; border-radius:10px; padding:14px;
}
.macro-toggle{ display:flex; gap:10px; align-items:center; font-weight:700; color:var(--gradient-app-start); }


/* Giorno + Calorie + Copia (stessa riga) */
.day-kcal-row{
  display:grid;
  grid-template-columns: 1fr 1fr auto;  /* Giorno | Calorie | Copia */
  gap:18px;
  align-items:end;
}
.field label{ display:block; margin-bottom:6px; font-weight:700; }
.field--action .btn{ width:100%; min-width:260px; }



*/
/* Tab Giorno Gara */
.day-tab.gara-tab {
    background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%) !important;
    border: 2px solid #e74c3c !important;
    position: relative;
    transition: all 0.3s ease;
}


.week-tabs .day-tab:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


.day-tab.gara-tab.active {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    color: white;
    border-color: #c0392b !important;
}

/* Badge Gara */
.gara-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: bold;
    animation: pulse 2s infinite;
}



/* Meal Section Gara */


.meal-section.gara-meal:hover {
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.meal-section.gara-meal .meal-title {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.3);
}

/* Pulsanti Gara */
.btn-gara {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
}

.btn-gara:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
}

/* Input Fields Gara */
.gara-input {
    border: 2px solid #ffcccc;
    transition: all 0.3s ease;
}

.gara-input:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* Totals Container Gara */
.gara-totals-container {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border-radius: 15px;
    padding: 20px;
    margin: 30px 0;
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
}

.gara-totals-container h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Nutrition Items Gara */
.gara-nutrition-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.gara-nutrition-item:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Warning Box Gara */
.gara-warning-box {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
    border-left: 5px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    color: #856404;
}

.gara-warning-box h4 {
    margin: 0 0 10px 0;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Suggestion Box Gara */
.gara-suggestion-box {
    background: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.gara-suggestion-box ul {
    margin: 10px 0;
    padding-left: 20px;
}

.gara-suggestion-box li {
    margin-bottom: 8px;
    color: #2e7d32;
}

/* Modal Gara Config */
#gara-config-modal .modal-header {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

#gara-config-modal .config-section {
    border-left: 3px solid #e74c3c;
    margin-bottom: 20px;
}

/* Checkbox Gara Meals */
.meal-checkbox-container.gara-meal input[type="checkbox"]:checked ~ .meal-checkbox-label {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-color: #c0392b;
}

/* Food Item Gara */
.food-item.gara-food {
    background: linear-gradient(90deg, #ffe6e6 0%, #ffcccc 100%) !important;
    border: 2px solid #e74c3c !important;
}

.food-item.gara-food:hover {
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

/* Autocomplete Gara */
.autocomplete-item.gara-suggestion {
    background: #fff5f5;
    border-left: 3px solid #e74c3c;
}

.autocomplete-item.gara-suggestion:hover {
    background: #ffe8e8;
}

/* Performance Indicators */
.performance-indicator {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    margin-left: 5px;
}

.performance-high {
    background: #4caf50;
    color: white;
}

.performance-medium {
    background: #ff9800;
    color: white;
}

.performance-low {
    background: #f44336;
    color: white;
}

/* Timing Labels */
.timing-label {
    display: inline-block;
    background: #e74c3c;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    margin-left: 5px;
    font-weight: bold;
}

/* Summary Display */
#gara-day-summary {
    animation: fadeIn 0.5s ease;
}


#gara-day-summary > div:first-child {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    text-align: center;
}





/* Animazioni Hover */
.gara-toggle-section:hover {
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.1);
}

#config-gara-btn {
    transition: all 0.3s ease;
}

#config-gara-btn:hover {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    color: white !important;
}

/* Icone e Badge */
.gara-icon {
    display: inline-block;
    font-size: 1.2em;
    margin-right: 5px;
}

.gara-count-badge {
    background: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    margin-left: 10px;
    font-weight: bold;
}

/* Stati */
.gara-enabled {
    border: 2px solid #4caf50 !important;
    background: #e8f5e9 !important;
}

.gara-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Tooltips */
.gara-tooltip {
    position: relative;
    cursor: help;
}

.gara-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    white-space: nowrap;
    z-index: 1000;

}




/* === EDITING MODE === */




.food-name-container {
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    user-select: none;
    
}


.food-name-container:hover .food-name {
    color: var(--gradient-app-start);
}

.food-name-container:active {
    transform: scale(0.98);
}


/* Stili per tab Two Day Mode */
.two-day-tab {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border: 2px solid #ddd;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.two-day-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.two-day-tab.active {
    background: var(--gradient-app) !important;
    border: 2px solid var(--gradient-app-start) !important;
    color: white !important;
}

.diet-day-distribution-panel {
    margin: 14px 0 12px;
    padding: 14px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm, none);
}

.diet-day-distribution-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.diet-day-distribution-head strong {
    display: block;
    color: var(--text-heading);
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.diet-day-distribution-head small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.diet-day-distribution-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--bg-surface-raised);
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.diet-day-distribution-total.is-invalid {
    color: var(--warning);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.diet-day-distribution-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.diet-day-distribution-field {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.diet-day-distribution-field input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    font: inherit;
}

.diet-day-distribution-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

@media (max-width: 640px) {
    .diet-day-distribution-fields {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   MANUAL FOOD MODAL STYLES
   ================================================ */

/* Modal specifico per alimenti manuali */
.manual-food-modal .modal-content {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.manual-food-modal .modal-header {
    background: var(--gradient-app);
    color: var(--text-primary);
}

#manual-food-name,
.quantity-input{
    background: var(--bg-surface-card);
}

.manual-food-modal .modal-header h2 {
    color: var(--text-stable-white);
}


/* Form alimento manuale */
.manual-food-form {
    padding: 25px;
}

.manual-food-form .form-section {
    margin-bottom: 25px;
}

.manual-food-form .form-section h4 {
    color: var(--gradient-app-start);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-medium);
    font-size: 1.1em;
}

/* Campi principali (nome e quantità) */
.manual-food-basics {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

/* Griglia campi nutrizionali */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

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

.form-group label {
    font-weight: 600;
    
    margin-bottom: 5px;
    font-size: 0.9em;
}

.form-group input {
    padding: 10px 12px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s ease;
    background-color: var(--bg-surface-card);
    color: var(--text-primary);
}

.form-group input:focus {
    box-shadow: 0 0 0 3px var(--shadow-brand-sm);
}

.form-group input:invalid {
    border-color: var(--danger);
}

.form-group input:invalid:focus {
    box-shadow: 0 0 0 3px var(--danger-hover);
}

/* Footer modal */
.manual-food-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 25px;
    border-top: 1px solid var(--border-medium);
    background: var(--bg-surface-raised);
    
}

.manual-food-modal .modal-footer button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 160px;
}

.manual-food-modal .btn-cancel {
    background: #e5e7eb;
    color: var(--text-primary);
}

.manual-food-modal .btn-cancel:hover {
    background: #d1d5db;
}

.manual-food-modal .btn-save {
    background: var(--gradient-app);
    color: white;
}

.manual-food-modal .btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}




/* Stile per input con errore di validazione */
.validation-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

.validation-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.error-message {
    color: #ef4444;
    font-size: 0.85em;
    margin-top: 3px;
    font-weight: 500;
}

/* Cursore per alimenti manuali non modificabili */
.food-item.manual-food .food-name-container {
    cursor: not-allowed !important;
}

.food-item.manual-food .food-name {
    cursor: not-allowed !important;
    opacity: 0.9;
}

/* Stile per ALTERNATIVE manuali - bordo blu */
.food-item.manual-food.alternative {
    background: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 100%) !important;
    border: 2px solid #9c27b0 !important;  /* BLU */
}




/* Impedisce che i totali nutrizionali creino nuovi stacking context */
.meal-totals-grid > div {
    position: static !important;
}

/* Food-item con z-index corretto */
#meal-modal .food-item {
    position: relative;
    z-index: 1;
}

#meal-modal .food-item.inserting {
    z-index: 10001;
}



/* ===================================================================
   CSS PER AUTOCOMPLETE DEI PASTI PRE-FATTI
   
   Aggiungi queste regole al tuo modal.css
   =================================================================== */

/* === AUTOCOMPLETE PASTI PRE-FATTI === */

/* Container autocomplete */
.preset-autocomplete-container {
    position: relative;
    width: fit-content;
    margin-right: 55px;
}

/* Input autocomplete */
.preset-autocomplete-input {
    width: 130px;
    padding: 8px 12px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.preset-autocomplete-input:focus {
    border-color: var(--gradient-app-start);
    outline: none;
}

/* Dropdown autocomplete con position fixed */
.preset-autocomplete-dropdown {
    /* NON impostare position, top, left, right qui - vengono gestiti dal JavaScript */
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 999999 !important;
    box-shadow: 0 4px 10px var(--shadow-md);
    scrollbar-width: none;
    -ms-overflow-style: none;
    text-align: center;
}

.preset-autocomplete-dropdown::-webkit-scrollbar {
    display: none;
}

/* Item nel dropdown */
.preset-autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
}

.preset-autocomplete-item:hover {
    background: var(--bg-surface-raised);
}

.preset-autocomplete-item:last-child {
    border-bottom: none;
}

/* Item con stati speciali */
.preset-autocomplete-item.food-forbidden {
    background-color: #ffebee;
    border-left: 3px solid #d32f2f;
}

.preset-autocomplete-item.food-warning {
    background-color: #fff3e0;
    border-left: 3px solid #f57c00;
}

/* === GESTIONE Z-INDEX E HOVER === */

/* Impedisce che i totali nutrizionali creino nuovi stacking context */
.meal-totals-grid > div {
    position: static !important;
}

/* Food-item normali hanno z-index basso */
#meal-modal .food-item {
    position: relative;
    z-index: 1;
}



/* Quando hover è disabilitato, abbassa z-index e disabilita interazioni */
#meal-modal .food-item.hover-disabled {
    z-index: 0 !important;
 
    
}


/* FIX per il modal transform - Aggiungi questa regola */
#meal-modal .modal-content {
    transform: none !important;
}

/* O se vuoi mantenere qualche transform, usa will-change invece */
#meal-modal .modal-content {
    will-change: transform;
    transform: translateZ(0); /* Crea un layer ma non interferisce con fixed */
}

/* =========================
   DIET RECAP - MOCKUP UI
   Solo stile, nessuna logica modificata
========================= */

#dietRecapModal {
    display: none;
}

/* Overlay/modal */
#dietRecapModal .modal-content,
.diet-modal-content {
    max-width: 98%;
    width: auto;
    max-height: 90vh;
    overflow: hidden;
    background: linear-gradient(180deg, #252525 0%, #1f1f1f 100%);
    margin: 2% auto;
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Header più moderno */
.diet-modal-header {
    padding: 22px 26px;
    background: linear-gradient(135deg, #5a67d8 0%, #667eea 55%, #48aaa1 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 22px 22px 0 0;
}

.diet-modal-header h2,
.diet-modal-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

/* Bottone chiusura più elegante, senza cambiare logica */
.diet-modal-header button,
.diet-modal-header .close,
.diet-modal-header [onclick] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: 0.2s ease;
}

.diet-modal-header button:hover,
.diet-modal-header .close:hover,
.diet-modal-header [onclick]:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}

/* Corpo */
.diet-modal-body {
    padding: 22px 26px 26px;
    overflow: auto;
    max-height: calc(90vh - 86px);
}

/* Testo descrittivo */
.diet-modal-body > p {
    margin: 0 0 18px;
    color: #e7e7e7;
    font-size: 15px;
    line-height: 1.45;
}

/* Wrapper tabella */
#dietRecapTableContainer {
    overflow: auto;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.18);
    background: rgba(255, 255, 255, 0.03);
}

/* Tabella */
#dietRecapTableContainer table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    min-width: 980px;
}

/* Header giorni */
#dietRecapTableContainer table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(180deg, #45b5aa 0%, #369b93 100%);
    color: white;
    padding: 12px 8px;
    text-align: center;
    font-weight: 800;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

/* Header colonna pasti */
#dietRecapTableContainer table th:first-child {
    left: 0;
    z-index: 4;
    background: linear-gradient(180deg, #566276 0%, #424b5c 100%);
    width: 110px;
    min-width: 110px;
}

/* Celle */
#dietRecapTableContainer table td {
    padding: 7px 8px;
    border-right: 1px solid rgba(226, 232, 240, 0.14);
    border-bottom: 1px solid rgba(226, 232, 240, 0.14);
    vertical-align: top;
    text-align: left;
}

/* Prima colonna sticky */
#dietRecapTableContainer table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    color: white;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0.2px;
    box-shadow: 8px 0 16px rgba(0, 0, 0, 0.16);
}

/* Alternanza prima colonna */
#dietRecapTableContainer table tr:nth-child(even) td:first-child {
    background: linear-gradient(180deg, #566276 0%, #485365 100%);
}

#dietRecapTableContainer table tr:nth-child(odd) td:first-child {
    background: linear-gradient(180deg, #647084 0%, #505c70 100%);
}

/* Celle contenuto */
#dietRecapTableContainer table td:not(:first-child) {
    background: rgba(255, 255, 255, 0.035);
    min-width: 130px;
    max-width: 170px;
    color: #f5f5f5;
}

/* Hover riga */
#dietRecapTableContainer table tbody tr:hover td:not(:first-child) {
    background: rgba(72, 170, 161, 0.08);
}

/* Item alimento come piccola card */
.diet-recap-food-item {
    margin-bottom: 3px;
    line-height: 1.15;
    word-wrap: break-word;
    padding: 3px 6px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffd166;
    font-weight: 700;
    border: 1px solid rgba(255, 209, 102, 0.12);
}

/* Alternative evidenziate diversamente */
.diet-recap-food-item.alternativa {
    color: #9ee6d8;
    background: rgba(63, 168, 158, 0.12);
    border: 1px dashed rgba(158, 230, 216, 0.32);
    font-weight: 700;
}

/* Celle vuote */
.diet-recap-empty-cell {
    text-align: center !important;
    color: rgba(255, 255, 255, 0.32) !important;
    font-weight: 600;
}

/* Angoli arrotondati tabella */
#dietRecapTableContainer table thead th:first-child {
    border-top-left-radius: 15px;
}

#dietRecapTableContainer table thead th:last-child {
    border-top-right-radius: 15px;
}

/* Scrollbar più pulita */
.diet-modal-body::-webkit-scrollbar,
#dietRecapTableContainer::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.diet-modal-body::-webkit-scrollbar-track,
#dietRecapTableContainer::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.diet-modal-body::-webkit-scrollbar-thumb,
#dietRecapTableContainer::-webkit-scrollbar-thumb {
    background: rgba(72, 170, 161, 0.6);
    border-radius: 999px;
}

.diet-modal-body::-webkit-scrollbar-thumb:hover,
#dietRecapTableContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(72, 170, 161, 0.85);
}

/* Responsive */
@media (max-width: 768px) {
    .diet-modal-content,
    #dietRecapModal .modal-content {
        max-width: 96%;
        max-height: 92vh;
        border-radius: 18px;
    }

    .diet-modal-header {
        padding: 18px 20px;
        border-radius: 18px 18px 0 0;
    }

    .diet-modal-header h2,
    .diet-modal-header h3 {
        font-size: 20px;
    }

    .diet-modal-body {
        padding: 18px;
    }

    #dietRecapTableContainer table {
        font-size: 11px;
        min-width: 850px;
    }

    #dietRecapTableContainer table td:not(:first-child) {
        min-width: 120px;
    }
}

#planning-modal .modal-content::-webkit-scrollbar,
#planning-modal .modal-body::-webkit-scrollbar,
#planning-modal .food-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#planning-modal .modal-content::-webkit-scrollbar-track,
#planning-modal .modal-body::-webkit-scrollbar-track,
#planning-modal .food-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#planning-modal .modal-content::-webkit-scrollbar-thumb,
#planning-modal .modal-body::-webkit-scrollbar-thumb,
#planning-modal .food-list::-webkit-scrollbar-thumb {
    background: var(--gradient-app-start);
    border-radius: 4px;
}

#planning-modal .modal-content::-webkit-scrollbar-thumb:hover,
#planning-modal .modal-body::-webkit-scrollbar-thumb:hover,
#planning-modal .food-list::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}



#planning-modal .modal-content {
    /* GPU acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto; /* Evita memoria GPU eccessiva */
}

#planning-modal .food-item,
#planning-modal .meal-section {
    /* Smooth scrolling */
    scroll-behavior: smooth;
}



#planning-modal.modal-overlay {
    z-index: 10000; /* Base z-index per planning modal */
}

#planning-modal .modal-content {
    position: relative;
    z-index: 1;
}

#planning-modal .modal-header {
    z-index: 1200; /* Sticky header sempre sopra i tab giorni */
}




/* === MODAL RICERCA ALIMENTI === */
.food-search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-backdrop);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.food-search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.food-search-modal {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px var(--shadow-lg);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.food-search-modal-overlay.active .food-search-modal {
    transform: scale(1);
}

.food-search-modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradient-app);
    border-radius: 14px 14px 0px 0px;
    color: white
}

.food-search-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.food-search-modal-close {
    background: var(--bg-hover-inverse);
    border: none;
    color: white;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.food-search-modal-close:hover {
    background: #f3f4f6;
    color: var(--text-heading);
}

.food-search-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.food-search-input-container {
    position: relative;
}



.food-search-input:focus {
    outline: none;
    border-color: var(--gradient-app-start);
    box-shadow: 0 0 0 3px var(--shadow-brand-sm);
}

.food-search-results {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    scrollbar-width: none;
}

.food-search-results:empty::before {
    content: 'Digita per cercare un alimento...';
    display: block;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.food-search-item {
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s ease;
}

.food-search-item:last-child {
    border-bottom: none;
}

.food-search-item:hover {
    background: var(--bg-surface-raised);
}

.food-search-item .food-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.food-search-item .food-name-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.food-search-item .compatibility-indicator {
    margin-left: auto;
}

.food-search-item .food-nutrition {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.food-search-item.food-forbidden {
    background: #fef2f2;
}

.food-search-item.food-forbidden:hover {
    background: #fee2e2;
}

.food-search-item.food-warning {
    background: #fffbeb;
}

.food-search-item.food-warning:hover {
    background: #fef3c7;
}

.food-search-no-results {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.food-search-item .badge-personale {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background-color: #d4edda;
    color: #155724;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
    margin-bottom: 2px;
}

/* === MODAL CONFRONTO ALIMENTI === */

.compare-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-backdrop);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 260000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.compare-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.compare-modal {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 95%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px var(--shadow-lg);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.compare-modal-overlay.active .compare-modal {
    transform: scale(1);
}

.compare-modal-header {
    padding: 20px;
    background: var(--gradient-app);
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-stable-white);
}

.compare-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.compare-modal-close {
    background: var(--bg-hover-inverse);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-stable-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-modal-close:hover {
    background: var(--bg-active-inverse);
}

.compare-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
}

/* Sezione aggiunta alimenti */
.compare-add-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.compare-search-container {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.compare-search-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gradient-app-start);
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
}



.compare-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-input);
    border: 2px solid var(--gradient-app-start);
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    scrollbar-width: none;
    margin-top: -2px;
}

.compare-search-container {
    flex: 1;
    min-width: 200px;
    position: relative;
}


.compare-search-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: transform 0.3s ease;
    line-height: 1;
}

/* Ruota freccia quando dropdown aperto */
.compare-search-container:has(.compare-search-dropdown.active) .compare-search-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Input si fonde col dropdown quando aperto */
.compare-search-container:has(.compare-search-dropdown.active) .compare-search-input {
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
}

.compare-search-dropdown.active {
    display: block;
}

.compare-search-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

.compare-search-item:hover {
    background: var(--bg-surface-raised);
}

.compare-search-item:last-child {
    border-bottom: none;
}

.compare-slots-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Griglia confronto */
.compare-grid {
    display: grid;
    gap: 0;
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    overflow: hidden;
}

.compare-grid-header {
    display: contents;
}

.compare-column-header {
    background: var(--bg-surface-raised);
    padding: 15px 10px;
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid var(--border-medium);
    position: relative;
    color: var(--text-primary);
}

.compare-column-header.target {
    background: var(--warning-bg-light);
}

.compare-column-header .food-name {
    font-size: 0.95rem;
    margin-bottom: 5px;
    word-break: break-word;
}

.compare-column-header .target-badge {
    font-size: 0.7rem;
    background: var(--warning);
    color: var(--text-stable-white);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 4px;
}

.compare-column-header .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--danger);
    color: var(--text-stable-white);
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-column-header .remove-btn:hover {
    background: var(--danger-dark);
}

.compare-column-header .set-target-btn {
    font-size: 0.7rem;
    background: var(--primary);
    color: var(--text-stable-white);
    padding: 2px 8px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    margin-top: 4px;
}

.compare-column-header .set-target-btn:hover {
    background: var(--primary-hover);
}

.compare-row-label {
    background: var(--bg-surface-raised);
    padding: 10px 12px;
    font-weight: 500;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-medium);
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

.compare-cell {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid var(--border-medium);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-primary);
}

.compare-cell.target-cell {
    background: var(--warning-bg-lightest);
    font-weight: 600;
}

/* Frecce confronto */
.compare-arrow {
    font-size: 0.8rem;
    font-weight: bold;
}

.compare-arrow.up {
    color: var(--success);
}

.compare-arrow.down {
    color: var(--danger);
}

.compare-arrow.equal {
    color: var(--text-muted);
}

/* Sezione categorie */
.compare-category-row {
    display: contents;
}

.compare-category-label {
    grid-column: 1 / -1;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    padding: 10px 15px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Empty state */
.compare-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.compare-empty-icon {
    font-size: 4rem;
    margin-bottom: 15px;
}

/* Input: arrotonda solo top quando dropdown aperto */
.compare-search-container:has(.compare-search-dropdown.active) .compare-search-input {
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
}





/* === FOOD DRAG & DROP === */
.food-dragging {
    opacity: 0.35 !important;
    box-shadow: 0 0 0 3px var(--gradient-app-end) !important;
    transform: scale(0.98);
    transition: opacity 0.2s, transform 0.2s;
}

.food-longpress-pending {
    box-shadow: 0 0 0 2px var(--gradient-app-end) !important;
    transition: box-shadow 0.3s;
}

#food-drop-indicator {
    height: 4px;
    background: linear-gradient(90deg, var(--gradient-app-end), var(--gradient-app-start));
    border-radius: 2px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(118, 75, 162, 0.5);
}

.day-selector-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
    width: 100%;
}


.day-selector-btn {
    width: 100%;
    padding: 8px 0;
    border: 2px solid var(--border-inverse);
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    text-align: center;
}

.day-selector-btn:hover {
    border-color: #4a90d9;
    color: #4a90d9;
}

.day-selector-btn.active {
    background: #4a90d9;
    border-color: #4a90d9;
    color: #fff;
}


.daily-config {
    background-color: rgba(125, 211, 252, 0.16);
    border: 2px solid rgb(102, 126, 234);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px var(--shadow-sm);
}

.daily-config .Title {
    color: #90caf9;      /* blu scuro */
    font-weight: 600;
    font-size: 20px;
    display: block;
    text-align: center;
    margin-bottom: 10px;
}



#meals-preview {
    flex: 0 0 45%;
}



@media (max-width: 900px) {
    .meals-kcal-col {
        flex-direction: column;
    }

    #meals-preview,
    #macro-slider-section {
        flex: 0 0 100%;
    }
}

.meals-quick-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
}


@media (max-width: 900px) {
    .meals-quick-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

.meals-kcal-col {
    display: flex;
    gap: 20px;
    width: 100%;
}

.meals-preview {
    flex: 0 0 45%;
}



.custom-meal-row {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.custom-meal-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.95em;
    background: var(--bg-surface-card);
}

#custom-meal-input::placeholder{
    color: var(--text-primary);
}

.btn-add-meal {
    padding: 8px 16px;
    background: var(--gradient-app-end);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.meals-ordered-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 40px;
}


.macro-preset select {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-medium);
}





.macro-field input {
    width: 100%;
}



/* Card principale */
#macro-slider-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  padding: 18px 18px 16px;
}

/* Titoli */
#macro-slider-section h3 {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-heading);
}

#macro-slider-section h4 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
}

/* Barra modalità + preset */
.macro-mode-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;

  padding: 12px 12px;
  border-radius: 12px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-medium);

  margin-bottom: 14px;
}

.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: var(--text-primary);
}

.radio-inline input {
  transform: translateY(1px);
}

.macro-preset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.macro-preset label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

#macro-preset-selector {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  font-size: 0.92rem;
  cursor: pointer;
}

/* Grid input macro */
.macro-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .macro-inputs {
    grid-template-columns: 1fr;
  }
}

.macro-input-group {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
}

.macro-input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.macro-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.macro-field .form-control-modal,
.macro-field input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  font-size: 0.95rem;
  outline: none;
  color: var(--text-primary);
}

.macro-field .form-control-modal:focus,
.macro-field input[type="number"]:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

.macro-unit {
  min-width: 22px;
  text-align: right;
  font-weight: 800;
  color: var(--text-primary);
}

/* grammi convertiti sotto */
.macro-converted {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

/* Warning */
.warning-message {
  display: none; /* lo mostri via JS quando serve */
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-weight: 700;
}

/* Riepilogo kcal */
.macro-kcal-summary {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-medium);
}

.macro-kcal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .macro-kcal-grid {
    grid-template-columns: 1fr;
  }
}

.macro-kcal-grid > div {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

/* Prima riga (kcal) più evidente */
#carbs-kcal, #protein-kcal, #fats-kcal {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-heading);
  margin-bottom: 2px;
}

/* riga descrizione */
.macro-kcal-grid > div > div:nth-child(2) {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* grammi */
#carbs-grams, #protein-grams, #fats-grams {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.preset-selector-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preset-btn {
    padding: 6px 14px;
    border: 2px solid var(--border-medium);
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.preset-btn:hover {
    border-color: #4a90d9;
    color: #4a90d9;
}

.preset-btn.active {
    background: #4a90d9;
    border-color: #4a90d9;
    color: #fff;
}



/* ============================================
   PATCH per planning-modal
   Migrazione inline styles da planning-modal.html
   ============================================ */

#apply-auto-distribution-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    background: #f0f0f0;
}

#apply-auto-distribution-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px var(--shadow-lg);
}



#restrizioni-button,
#import-planning {
    height: fit-content;
    padding: 12px 20px;
    white-space: wrap;
}

.day-kcal-row {
    grid-template-columns: 1fr 1fr;
}

.btn-copy-config {
    width: 100%;
    margin: auto;
}

.onoff-container {
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);
    border-radius: 12px;
    border: 2px solid var(--gradient-app-start);
}

.onoff-title {
    color: var(--gradient-app-start);
    margin-bottom: 10px;
}

.onoff-desc {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 15px;
}

.text-on {
    color: #4caf50;
    font-weight: bold;
}

.text-off {
    color: #f44336;
    font-weight: bold;
}

.onoff-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}

.macro-distribution-section {
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);
    border-radius: 12px;
    border: 2px solid var(--gradient-app-start);
}

.distribution-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-medium);
}

.dist-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: #e0e0e0;
    color: var(--text-gray);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
    transition: all 0.3s;
}

.dist-tab.active {
    background: var(--gradient-app-start);
    color: white;
}

.macro-card-on {
    background: var(--bg-surface);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 2px solid #4caf50;
}

.macro-card-on__title {
    color: #4caf50;
    margin-bottom: 15px;
}

.macro-card-off {
    background: var(--bg-surface);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 2px solid #f44336;
}

.macro-card-off__title {
    color: #f44336;
    margin-bottom: 15px;
}

.macro-kcal-field {
    margin-bottom: 20px;
}

.macro-kcal-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

.macro-kcal-input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    font-size: 1.1em;
    background: var(--bg-surface-raised);
    color: var(--text-primary);
}

.macro-mode-radio {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
}

.macro-mode-radio--on {
    background: #f0f8f0;
}

.macro-mode-radio--off {
    background: #fff5f5;
}

.macro-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.macro-radio-text {
    font-weight: 500;
}

.macro-inputs--onoff {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.macro-input-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

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

.macro-inputs--onoff .macro-unit {
    font-weight: 500;
    white-space: nowrap;
}

.macro-inputs--onoff .macro-converted {
    color: var(--text-muted);
    font-size: 0.85em;
    display: block;
    margin-top: 4px;
}

.macro-kcal-detail {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 8px;
}

.macro-warning {
    margin-top: 10px;
    padding: 10px;
    background: #ffebee;
    border-left: 4px solid #f44336;
    color: #c62828;
}

.meals-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.custom-meal-row-macro {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.custom-meal-input-macro {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.95em;
}

.btn-add-meal-macro {
    padding: 8px 16px;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.btn-add-meal-macro--on {
    background: #4caf50;
}

.btn-add-meal-macro--off {
    background: #f44336;
}

.macro-meals-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 40px;
}

.apply-distribution-cta {
    margin-top: 30px;
    padding: 25px;
    background: var(--gradient-app);
    border-radius: 15px;
    text-align: center;
}

.apply-distribution-cta__title {
    color: white;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.apply-distribution-cta__desc {
    color: rgba(255,255,255,0.9);
    margin-bottom: 20px;
    font-size: 0.95em;
    line-height: 1.6;
}

#apply-auto-distribution-btn {
    padding: 15px 40px;
    background: var(--bg-surface);
    color: var(--gradient-app-start);
    border: none;
    border-radius: 25px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--shadow-lg);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.apply-distribution-cta__note {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 0.85em;
    color: rgba(255,255,255,0.8);
}

.gara-toggle-section {
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border: 2px solid #ff6b6b;
    border-radius: 12px;
}

.gara-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gara-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gara-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.gara-checkbox {
    width: 20px;
    height: 20px;
}

.gara-label {
    font-weight: bold;
    color: #e74c3c;
    font-size: 1.1em;
}

.gara-info {
    color: #666;
    font-size: 0.9em;
}

.gara-summary {
    margin-top: 15px;
    padding: 15px;
    background: var(--bg-surface);
    border-radius: 8px;
}

.gara-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    text-align: center;
}

.gara-stat-label {
    font-size: 0.9em;
}

.gara-stat--kcal { color: #e74c3c; }
.gara-stat--protein { color: #e67e22; }
.gara-stat--carbs { color: #f39c12; }
.gara-stat--fats { color: #27ae60; }

.gara-stat-value {
    font-size: 1.2em;
    font-weight: bold;
}

.gara-meals-count {
    margin-top: 10px;
    text-align: center;
}

#gara-meals-count {
    font-weight: bold;
}

.planning-actions {
    text-align: center;
    margin-top: 30px;
}

.text-strong {
    color: var(--text-primary);
    font-weight: 500;
}

.copy-day-modal-footer--stacked {
    flex-direction: column;
    gap: 10px;
}

.btn-conflict-action {
    width: 100%;
}

.copy-day-modal-header--warning {
    background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
}

.search-placeholder__icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.search-placeholder__title {
    color: #11998e;
}

.search-placeholder__hint {
    color: var(--text-muted);
    margin-top: 10px;
}

.diet-recap-container {
    border-radius: 14px;
}

/* ============================================
   PATCH food.js – migrazione inline → classi
   Appendere in fondo a modal.css
   ============================================ */

/* --- Food Row State Backgrounds --- */

.food-row-normal {
    background: linear-gradient(90deg, #e3fdf3 0%, #06ff62a0 100%);
    border: 2px solid green;
}

.food-row-override {
    background: linear-gradient(90deg, #e3fdf3 0%, #06ff62a0 100%);
    border: 2px solid #4caf50;
}

.food-row-manual {
    background: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 100%) !important;
    border: 2px solid #000000 !important;
}

.food-row-manual-alt {
    background: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 100%) !important;
    border: 2px solid #2563eb !important;
}

.food-row-forbidden {
    background: linear-gradient(90deg, #ffebee 0%, #ffcdd2 100%) !important;
    border: 2px solid #d32f2f !important;
}

.food-row-warning {
    background: linear-gradient(90deg, #fff3e0 0%, #ffe0b2 100%) !important;
    border: 2px solid #f57c00 !important;
}

/* --- PRAL Color Indicators (meal totals) --- */

.pral-positive { color: #c62828; }
.pral-negative { color: #2e7d32; }
.pral-neutral  { color: #666; }

/* --- PRAL Color Indicators (daily totals) --- */

.pral-daily-positive { color: #ffcdd2; }
.pral-daily-negative { color: #c8e6c9; }
.pral-daily-neutral  { color: white; }

/* --- Micro nutrient exceeded / limit --- */

.micro-exceeded-color { color: #ffcdd2; }
.limit-exceeded-color { color: #ff5252; }
.micro-reset-color    { color: white; }

/* --- Compatibility Messages --- */

.compat-msg-critical {
    color: #b71c1c;
    font-weight: bold;
    font-size: 0.8em;
}

.compat-msg-forbidden {
    color: #d32f2f;
    font-size: 0.8em;
}

.compat-msg-warning {
    color: #f57c00;
    font-size: 0.8em;
}

/* --- Macro Badge (base + small variant) --- */





.macro-badge-total {
    font-weight: 500;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid currentColor;
    font-size: 1.5em;
}

/* ================================================
   NUTRITION BADGE — classi per macro/micro badges
   ================================================ */

.nutri-badge-kcal     { background: var(--bg-surface-raised);   color: var(--danger);         border: 1px solid var(--border-medium); }
.nutri-badge-carb     { background: var(--bg-surface-raised);  color: var(--warning);        border: 1px solid var(--border-medium); }
.nutri-badge-violet   { background: var(--bg-surface-raised); ;     color: var(--violet);         border: 1px solid var(--border-medium); }
.nutri-badge-protein  { background: var(--bg-surface-raised);     color: var(--primary);        border: 1px solid var(--border-medium); }
.nutri-badge-fat      { background: var(--bg-surface-raised);  color: var(--success);        border: 1px solid var(--border-medium); }
.nutri-badge-mineral  { background: var(--bg-surface-raised);   color: var(--text-secondary); border: 1px solid var(--border-medium); display: none; }
.nutri-badge-mineral.minerals-visible { display: flex; }
.meal-totals-header .nutri-badge-mineral,
.meal-totals-header .nutri-badge-pral {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    white-space: normal;
    line-height: 1.3;
}
.badge-val-unit {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    white-space: nowrap;
}
.nutri-badge-pral                  { display: none; background: var(--bg-surface-raised); color: var(--text-secondary); border: 1px solid var(--border-medium); }
.nutri-badge-pral.minerals-visible { display: flex; }
.nutri-badge-pral.pral-positive    { color: #e53935; border-color: rgba(229,57,53,0.4); }
.nutri-badge-pral.pral-negative    { color: #43a047; border-color: rgba(67,160,71,0.4); }

.btn-minerals-toggle {
    padding: 14px 18px;
    border-radius: 8px;
    border: 2px solid var(--border-medium);
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    font-size: 1.2em;
    font-weight: bolder;
    max-width: clamp(85px, 5vw, 85px);
    min-width: clamp(85px, 5vw, 85px);
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-minerals-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px var(--shadow-lg);
}
.btn-minerals-toggle.active {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Empty Meal Placeholder --- */

.empty-meal-placeholder {
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* --- Meal Actions Button Grid --- */

.meal-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.meal-actions-grid .btn {
    width: 100%;
    background: var(--action-btn-bg);
    border:2px solid var(--action-btn-border);
    color: var(--text-primary);
}

/* --- Food Search Modal Header Elements --- */

.food-search-subtitle {
    margin: 5px 0 0 0;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

.food-search-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-compare {
    background: var(--bg-hover-inverse);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-compare:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* --- Suggestion Badges & Labels --- */

.suggestion-header {
    padding: 6px 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid #eee;
}

.badge-used {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
}

.badge-suggested {
    background: #fff3e0;
    color: #e65100;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
}

.match-reason {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* --- Added Checkmark (after selecting suggestion) --- */

.added-checkmark {
    float: right;
    color: #4caf50;
    font-weight: bold;
}

/* --- Food Item Disabled (after adding) --- */

.food-item-added {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Loading / Placeholder Messages --- */

.search-loading-message {
    text-align: center;
    padding: 15px;
    color: var(--text-muted);
}

/* --- Compare Search Item Details --- */

.compare-item-details {
    font-size: 0.8em;
    color: var(--text-secondary);
}

/* --- Body Scroll Lock --- */

.body-no-scroll {
    overflow: hidden;
}

/* --- Display utilities for food modal --- */

#alimento-search-modal.active {
    display: flex;
}

/* --- Export Meal Modal Form --- */

.export-form-group {
    margin-bottom: 15px;
}

.export-form-group-lg {
    margin-bottom: 20px;
}

.export-form-desc {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.export-form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.export-form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 1em;
    background-color: var(--bg-surface-card);
    color: var(--text-primary);
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: #4e4e4e;
    color: #eaeaea;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 16px;
}

.custom-select.open .custom-select-trigger {
    border-radius: 12px 12px 0 0;
}

.custom-select-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: relative;   /* invece di absolute */
    top: 0;
    left: 0;
    right: 0;
    background: #4e4e4e;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    display: none;
    z-index: 1000;
}

.custom-select.open .custom-select-dropdown {
    display: block;
}
.custom-select-option {
    padding: 12px 16px;
    color: #eaeaea;
    cursor: pointer;
    transition: background 0.15s ease;
}

.custom-select-option:hover {
    background: rgba(255,255,255,0.08);
}

.custom-select-option.selected {
    background: #2d6cdf;
    color: #fff;
}

textarea.export-form-input {
    resize: vertical;
}

.export-form-actions {
    display: flex;
    gap: 10px;
}

.export-form-actions .btn-primary {
    flex: 1;
    padding: 12px;
    font-size: 1em;
}

.export-form-actions .btn-secondary {
    padding: 12px;
}

/* ============================================
   PATCH planning batch:
     - single-day-mode.js
     - config.js
   Appendere in fondo a modal.css
   ============================================ */

/* =============================================
   A. SINGLE DAY MODE
   ============================================= */

/* Hide utility shared across planning */
.planning-hidden { display: none !important; }

/* Single day: kcal field layout override */
.sdm-kcal-left {
    text-align: left !important;
    margin-left: 0 !important;
}

/* Single day: row layout override */
.sdm-single-col {
    grid-template-columns: 1fr !important;
    width: 24% !important;
}

/* Single day: active "GIORNALIERO" tab */
.day-tab-single {
    width: auto;
    justify-items: center;
}

.day-tab-single-content {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.day-tab-single-icon { font-size: 1.2em; }

/* =============================================
   B. CONFIG
   ============================================= */

/* --- Day ON/OFF toggle items --- */
.day-onoff-item { text-align: center; }

.day-onoff-label {
    font-size: 0.95em;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-primary);
}

.btn-day-onoff {
    padding: 10px 24px;
    border-radius: 25px;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.95em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    min-width: 70px;
}

.btn-day-on  { background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); }
.btn-day-off { background: linear-gradient(135deg, #f44336 0%, #e53935 100%); }

/* --- Meal order item --- */
.meal-order-item {
    background: var(--bg-surface);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    border: 2px solid var(--gradient-app-start);
}

.meal-order-num { font-weight: bold; color: var(--text-primary); }
.meal-order-name { font-size: 0.9em; color: var(--gradient-app-start); }

/* --- Config empty states --- */
.config-empty-state {
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
    padding: 15px;
}

/* --- Save button macro highlight --- */
.btn-save-highlight {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

/* --- Macro mode tabs --- */


.dist-tab.active {
    background: var(--gradient-app-start);
    color: white;
}

/* --- Distribution Table --- */
.dist-table {
    width: 100%;
    border-collapse: collapse;
}

.dist-table thead tr {
    background: var(--gradient-app-start);
    color: white;
}

.dist-table th,
.dist-table td {
    padding: 12px;
    text-align: center;
}

.dist-table th:first-child,
.dist-table td:first-child {
    text-align: left;
}

.dist-table tbody tr {
    border-bottom: 1px solid var(--border-medium);
}

.dist-table td:first-child { font-weight: 500; }

.dist-table input[type="number"] {
    width: 80px;
    padding: 8px;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    text-align: center;
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
}

.dist-table .input-water {
    border-color: #3498db;
    background: #e8f4fc;
}

.dist-table .input-salt {
    border-color: #9b59b6;
    background: #f5eef8;
}

/* --- Distribution totals row --- */
.dist-table tfoot tr {
    background: var(--bg-surface-raised);
    font-weight: bold;
    border-top: 2px solid var(--gradient-app-start);
}

.dist-table tfoot td:first-child {
    text-align: right;
}

.dist-total-val { font-size: 1.1em; }

.dist-warning {
    display: none;
    color: #f44336;
    font-size: 0.8em;
}

.dist-total-water { font-size: 1.1em; color: #3498db; }
.dist-unit-water { color: #3498db; }
.dist-total-salt { font-size: 1.1em; color: #9b59b6; }
.dist-unit-salt { color: #9b59b6; }

.dist-tfoot-water { background: #e8f4fc; }
.dist-tfoot-salt { background: #f5eef8; }

/* --- Macro display toggle --- */
.micro-section-hidden { display: none; }

/* --- Config total colors --- */
.total-color-ok { color: #4caf50; }
.total-color-over { color: #f44336; }
.total-color-warn { color: #ff9800; }



/* --- Compare button in details --- */
.btn-compare-details {
    background: var(--gradient-app);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-compare-details:hover {
    opacity: 0.9;
}

.details-header-actions {
    display: flex;
    gap: 10px;
}

/* --- Pie chart legend colors (keep background dynamic via class) --- */
.legend-color-carbs { background: #f39c12; }
.legend-color-sugar { background: #9b59b6; }
.legend-color-protein { background: #3498db; }
.legend-color-fat { background: #27ae60; }

.legend-item-sub {
    padding-left: 12px;
    font-size: 0.8em;
}

.legend-label-italic { font-style: italic; }

/* --- Pie container dynamic display --- */
.nutrition-pie-container.pie-hidden { display: none; }


/* =============================================
   PATCH-DIET-RULES.CSS — Migrazione inline styles
   da diet-rules.js
   ============================================= */

/* === FOOD ITEM COMPATIBILITY HIGHLIGHTS === */
/* Usati da highlightIncompatibleFoods() */



.food-item.accepted-override {
    background: linear-gradient(90deg, #e3fdf3 0%, #06ff62a0 100%);
    border: 2px solid #4caf50;
}

.food-item.incompatible-food {
    background: linear-gradient(90deg, #ffebee 0%, #ffcdd2 100%);
    border: 2px solid #d32f2f;
}

.food-item.warning-food {
    background: linear-gradient(90deg, #fff3e0 0%, #ffe0b2 100%);
    border: 2px solid #f57c00;
}

.food-item.compatible-food {
    background: linear-gradient(90deg, #e3fdf3 0%, #06ff62a0 100%);
    border: 2px solid green;
}

/* === MEDICAL VALIDATION POPUP === */
.validation-alert-medical {
    background: #ffcdd2;
    color: #b71c1c;
    border-left: 4px solid #d32f2f;
}

.validation-section-title-medical {
    color: #d32f2f;
}

.violation-diet-medical {
    color: #b71c1c;
}

/* === DISABLED BUTTON STATE === */
.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =============================================
   PATCH-DIETE-TEMPLATE.CSS — Migrazione inline
   styles da diete-template.js
   ============================================= */

/* === EXPORT MODAL: SUMMARY BOX === */
.tmpl-summary-box {
    background: #e8f5e9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.tmpl-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 0.9em;
}

/* === EXPORT MODAL: FORM FIELDS === */
.tmpl-form-group {
    margin-bottom: 15px;
}

.tmpl-form-group--last {
    margin-bottom: 20px;
}

.tmpl-form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.tmpl-form-input,
.tmpl-form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 1em;
    background: var(--bg-surface-card);
    color:var(--text-primary);
}

#clone-diet-name::placeholder{
    color: var(--text-primary);
}

.tmpl-form-textarea {
    resize: vertical;
}

/* === SHARED: ACTION BUTTON ROWS === */
.tmpl-actions {
    display: flex;
    gap: 10px;
}

.tmpl-actions--center {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.tmpl-actions--mt {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.tmpl-btn-flex {
    flex: 1;
}

.tmpl-btn-pad {
    padding: 12px;
}

/* === IMPORT MODAL === */
.tmpl-import-modal {
    max-width: 700px;
    max-height: 85vh;
}

.tmpl-import-body {
    overflow-y: auto;
    max-height: 65vh;
}

.tmpl-import-help {
    color: var(--text-secondary);
    margin-bottom: 15px;
    font-size: 0.9em;
}

/* === TEMPLATE CARD (in import list) === */
.tmpl-card {
    padding: 15px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.tmpl-card:hover {
    border-color: var(--gradient-app-start);
    box-shadow: 0 2px 8px var(--shadow-sm);
}

.tmpl-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    gap: 5px;
}

.tmpl-card-name {
    font-weight: bold;
    font-size: 1.1em;
}

.tmpl-card-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* === SHARED: BADGE VARIANTS === */
.tmpl-badge-modalita {
    background: #e3f2fd;
    color: #1976d2;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8em;
}

.tmpl-badge-modalita--lg {
    background: #e3f2fd;
    color: #1976d2;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

.tmpl-badge-gara {
    background: #fce4ec;
    color: #c2185b;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8em;
}

.tmpl-badge-gara--lg {
    background: #fce4ec;
    color: #c2185b;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* === TEMPLATE CARD: DESCRIPTION === */
.tmpl-card-desc {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85em;
    margin: 8px 0;
}

.tmpl-card-restrizioni {
    margin: 8px 0;
}

/* === TEMPLATE CARD: MACRO DATA SECTIONS === */
.tmpl-macro-section {
    margin-top: 15px;
}

.tmpl-macro-title {
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 6px;
}

.tmpl-macro-row {
    display: flex;
    gap: 15px;
    font-size: 0.85em;
    flex-wrap: wrap;
}

/* === TEMPLATE CARD: DATE === */
.tmpl-card-date {
    font-size: 0.75em;
    margin-top: 8px;
}

/* === RESTRICTION TAGS (formatRestrizioniTags) === */
.tmpl-tag-medical {
    background: #ffebee;
    color: #c62828;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    margin-right: 4px;
}

.tmpl-tag-ethical {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    margin-right: 4px;
}

.tmpl-tag-preference {
    background: #fff3e0;
    color: #e65100;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    margin-right: 4px;
}

/* === DETAILS MODAL === */
.tmpl-details-modal {
    z-index: 10001;
}

.tmpl-details-inner {
    max-width: 600px;
    max-height: 80vh;
}

.tmpl-details-body {
    overflow-y: auto;
}

.tmpl-desc-text {
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 15px;
}

.tmpl-badges-row {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

/* === NUTRITIONAL SUMMARY PANEL === */
.tmpl-nutri-panel {
    background: var(--bg-surface-raised);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.tmpl-nutri-title {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.tmpl-nutri-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Macro cards */
.tmpl-nutri-card {
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.tmpl-nutri-card--kcal    { background: #fff3e0; }
.tmpl-nutri-card--carbs   { background: #fff8e1; }
.tmpl-nutri-card--protein  { background: #e3f2fd; }
.tmpl-nutri-card--fat     { background: #e8f5e9; }

.tmpl-nutri-value {
    font-size: 1.4em;
    font-weight: bold;
}

.tmpl-nutri-value--kcal    { color: #e65100; }
.tmpl-nutri-value--carbs   { color: #f9a825; }
.tmpl-nutri-value--protein { color: #1976d2; }
.tmpl-nutri-value--fat     { color: #2e7d32; }

.tmpl-nutri-label {
    font-size: 0.75em;
    color: var(--text-secondary);
}

.tmpl-nutri-daily {
    margin-top: 4px;
    font-size: 0.8em;
    color: var(--text-primary);
}

/* === RESTRICTIONS SECTION === */
.tmpl-restrictions-section {
    margin-bottom: 15px;
}

.tmpl-restrictions-box {
    margin-top: 15px;
}

.tmpl-restrictions-tags {
    margin-top: 5px;
}

/* === SUMMARY TABLE === */
.tmpl-table-section {
    margin-bottom: 15px;
}

.tmpl-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 0.9em;
}

.tmpl-table thead tr {
    background: var(--bg-surface-raised);
}

.tmpl-table th {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-medium);
}

.tmpl-table th.text-center {
    text-align: center;
}

.tmpl-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.tmpl-table td.text-center {
    text-align: center;
}

/* === INFO GRID (full details modal) === */
.tmpl-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    font-size: 0.95em;
}

/* === CONFIRM IMPORT MODAL === */
.tmpl-confirm-modal {
    z-index: 10002;
}

.tmpl-confirm-inner {
    max-width: 400px;
}

.tmpl-confirm-header-warning {
    background: #fff3e0;
}

.tmpl-confirm-text-warning {
    color: #e65100;
    font-weight: bold;
    margin-bottom: 15px;
}

.tmpl-confirm-text-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.tmpl-btn-import-confirm {
    background: #e65100;
}

/* === DELETE TEMPLATE MODAL === */
.tmpl-delete-modal {
    z-index: 10001;
}

.tmpl-delete-inner {
    max-width: 400px;
}

.tmpl-delete-header {
    background: linear-gradient(135deg, #e53935, #c62828);
}

.tmpl-delete-body {
    text-align: center;
}

.tmpl-delete-question {
    font-size: 1.1em;
    margin-bottom: 15px;
}

.tmpl-delete-name {
    font-weight: bold;
    font-size: 1.2em;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.tmpl-delete-warning {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: 25px;
}

.tmpl-delete-btn {
    background: #e53935;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.tmpl-delete-btn:hover {
    background: #c62828;
}

.tmpl-cancel-btn {
    background: #eee;
    color: var(--text-primary);
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.tmpl-cancel-btn:hover {
    background: #ddd;
}

/* === LOADING / EMPTY STATES === */
.tmpl-loading {
    text-align: center;
    padding: 40px;
}

.tmpl-no-restrictions {
    color: var(--text-muted);
}

/* === ACCORDION: EMPTY STATES === */
.tmpl-empty-meal {
    color: var(--text-muted);
    font-style: italic;
}

.tmpl-empty-pasto {
    color: var(--text-muted);
    font-size: 0.85em;
    font-style: italic;
}

/* === ACCORDION: MACRO MODE FOOD === */
.dieta-detail-alimento.macro-mode {
    background: #e3f2fd;
}

/* === ACCORDION: ARROW === */
.tmpl-accordion-arrow {
    font-size: 1.2em;
}

/* =============================================
   PATCH-CACHEANDDB.CSS — Migrazione inline
   styles da cacheAndDb.js
   ============================================= */

/* === LOADING TEXT (meal containers) === */
.cache-loading-text {
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* === SAVE BUTTON SUCCESS STATE === */
.save-btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
}

/* === FOOD ROW OVERRIDES (reinforce patch-diet-rules.css with !important) ===
   cacheAndDb.js used inline !important to override base food-row styles.
   These rules ensure the CSS classes work without inline styles. */

.food-item.manual-food {
    background: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 100%) !important;
     border: 2px solid #008000 !important;
}



.food-item.accepted-override {
    background: linear-gradient(90deg, #e3fdf3 0%, #06ff62a0 100%) !important;
     border: 2px solid #008000 !important;
}

/* =============================================
   PATCH-GARA-DAY.CSS — Migrazione inline styles
   da gara-day.js
   ============================================= */

/* === GARA TAB === */
.gara-tab {
    background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
    border: 2px solid #e74c3c;
    position: relative;
}

.gara-tab-icon {
    font-size: 1.2em;
}



/* === GARA TITLE === */
.gara-title-highlight {
    color: #e74c3c;
}

/* === GARA MEAL SECTION OVERRIDE === */
.meal-section.gara-meal {
    border: 2px solid #e74c3c;
    background: linear-gradient(90deg, #fff5f5 0%, #ffe8e8 100%);
}

/* === GARA INFO BOX === */
.gara-info-box {
    background: #fff3cd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #ffc107;
}

/* === CONFIG MODAL === */
.gara-config-modal {
    z-index: 20000;
}

.gara-config-content {
    max-width: 800px;
}

.gara-config-header {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

/* === MODAL: CALORIE GRID === */
.gara-calorie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.gara-calorie-hint {
    color: #666;
}

/* === MODAL: MACRO INPUT MODE RADIO === */
.gara-input-mode-group {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px;
    background: #fff5f5;
    border-radius: 8px;
}

.gara-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.gara-radio-text {
    font-weight: 500;
}

/* === MODAL: MACRO INPUTS GRID === */
.gara-macro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.gara-macro-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

.gara-macro-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gara-macro-input {
    width: 100%;
}

.gara-macro-unit {
    font-weight: 500;
    white-space: nowrap;
}

.gara-macro-converted {
    color: #999;
    font-size: 0.85em;
    display: block;
    margin-top: 4px;
}

/* === MODAL: MACRO WARNING === */
.gara-macro-warning {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: #ffebee;
    border-left: 4px solid #f44336;
    color: #c62828;
}

/* === MODAL: MEALS QUICK ADD GRID === */
.gara-meals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

/* === MODAL: CUSTOM MEAL INPUT ROW === */
.gara-custom-meal-row {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    color: var(--bg-surface-card);
}

.gara-custom-meal-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.95em;
    background: var(--bg-surface-card);
    color: var(--text-primary);
}

.gara-custom-meal-btn {
    padding: 8px 16px;
    background: #e74c3c;
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.gara-custom-meal-btn:hover {
    background: #c0392b;
}

/* === MODAL: MEALS ORDERED LIST === */
.gara-meals-ordered {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 40px;
    
    
}

/* === MODAL: MEAL COUNT INFO === */
.gara-meals-count-box {
    margin-top: 10px;
    padding: 8px;
    background: var(--bg-surface-card);
    color: var(--text-primary);
    border-radius: 8px;
}

/* === MODAL: FOOTER === */
.gara-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.gara-save-btn {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

/* === EMPTY STATES === */
.gara-empty-meals {
    color: #999;
    text-align: center;
    font-style: italic;
    padding: 15px;
}

/* =============================================
   PATCH-MODAL.CSS — Migrazione inline styles
   da planning/modal.js
   ============================================= */

/* === DAY TITLE HIGHLIGHTS === */
.two-day-title-highlight {
    color: var(--gradient-app-start);
}

/* .gara-title-highlight already in patch-gara-day.css */

/* === EMPTY CONFIG STATE === */
.planning-empty-config {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.planning-empty-config-text {
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* === NOTES CONTAINER === */
.notes-container {
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-surface-raised);
    border-radius: 10px;
}

.notes-label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.notes-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 5px;
    background-color: var(--bg-surface-);
    color: var(--text-primary);
}

#macro-daily-notes::placeholder{
    color: var(--text-placeholder);
}

/* === MULTI-DIET SELECTOR MODAL === */
.multi-diet-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-backdrop);
    z-index: 300000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.multi-diet-modal-overlay.visible {
    opacity: 1;
}

.multi-diet-selector {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

/* === SAVE CONFIRMATION MODAL === */
.save-confirm-header {
    background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
}

.save-confirm-text {
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 1.05em;
}

.save-confirm-footer {
    gap: 15px;
}

.save-confirm-btn {
    min-width: 120px;
}

/* =============================================
   PATCH-MACRO-MODE.CSS — Migrazione inline
   styles da macro-mode.js
   ============================================= */

/* === SHARED MACRO GRID (5 columns) === */
.macro-totals-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    text-align: center;
}

/* === MEAL MACRO TOTALS HEADER CARDS === */
.macro-card {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    background-color: var(--bg-surface-raised);
}

.macro-card--kcal    { color: #e74c3c; }
.macro-card--carbs   { color: #f39c12; }
.macro-card--protein { color: #3498db; }
.macro-card--fats    { color: #27ae60; }
.macro-card--salt    {  color: #9c27b0; }

.macro-card-name {
    font-size: 1.4em;
}

.macro-card-value {
    font-weight: bold;
}

/* === MACRO INPUT SECTION GRID === */
.macro-input-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
    background: var(--bg-surface);
    border-radius: 8px;
    border: 1px solid var(--text-primary);
}

.macro-input-label {
    font-size: 0.9em;
    color: var(--text-secondary);
}

/* === WATER TOTAL BOX === */
.macro-water-box {
    background: #e3f2fd;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
}

.macro-water-value {
    font-size: 2em;
    font-weight: bold;
    color: #2196f3;
}

/* === NOTES SECTION === */
.macro-notes-section {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #28a745;
}

.macro-notes-section--macro {
    border-color: var(--gradient-app-start);
}

.macro-notes-title {
    color: #28a745;
    margin-bottom: 10px;
}

.macro-notes-title--macro {
    color: var(--gradient-app-start);
}

.macro-notes-textarea {
    font-size: 1em;
    padding: 10px;
}

/* === DAILY MACRO TOTALS PANEL === */
.macro-daily-panel {
    background: var(--gradient-app);
    color: white;
    border-radius: 15px;
    padding: 20px;
    margin: 30px 0;
    box-shadow: 0 8px 25px var(--shadow-md);
}

.macro-daily-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.3em;
}

.macro-daily-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    text-align: center;
}

.macro-daily-card {
    padding: 12px;
    border-radius: 10px;
}

.macro-daily-card--kcal    { background: rgba(255, 102, 102, 0.9); }
.macro-daily-card--carbs   { background: #f39c12; }
.macro-daily-card--protein { background: #3498db; }
.macro-daily-card--fats    { background: #27ae60; }
.macro-daily-card--salt    { background: #9c27b0; }

.macro-daily-card-value {
    font-size: 1.4em;
    font-weight: bold;
}

.macro-daily-card-icon {
    font-size: 1.2em;
}

.macro-daily-card-label {
    font-size: 0.9em;
}

/* === DAILY WATER SECTION === */
.macro-daily-water {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
}

.macro-daily-water-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.macro-daily-water-icon {
    font-size: 1.5em;
}

.macro-daily-water-label {
    font-size: 1.2em;
    font-weight: bold;
}

.macro-daily-water-value {
    font-size: 1.4em;
    font-weight: bold;
}

.macro-daily-water-unit {
    font-size: 1.1em;
}

/* === WARNING PANEL (static parts only) === */
.macro-warning-detail {
    font-size: 0.95em;
    color: #666;
    line-height: 1.5;
}

.compare-grid {
  display: grid;
  grid-template-columns: 120px repeat(var(--foods-columns), 1fr);
  
}

.compare-grid-header {
  display: contents; /* mantiene la struttura grid */
}

.compare-column-header {
  font-weight: bold;
  text-align: center;
}

.kcal-warning-wrapper {
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

.kcal-warning {
    border-radius: 12px;
    padding: 20px;
    border: 3px solid;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: pulse 2s infinite;
}

.kcal-warning-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.kcal-warning-icon {
    font-size: 3em;
}

.kcal-warning-text {
    flex: 1;
}

.kcal-warning-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 8px;
}

.kcal-warning-target {
    margin-top: 10px;
    padding: 8px 15px;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
    display: inline-block;
    font-weight: bold;
}

/* --- VARIANTI --- */

.warning-over {
    background: #ffebee;
    border-color: #f44336;
    color: #c62828;
}

.warning-under {
    background: #fff3e0;
    border-color: #ff9800;
    color: #e65100;
}

/* --- ANIMAZIONE --- */

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* NOTE: Warning panel bg/border/text colors are dynamic
   (from warning.type). Kept as inline. */

/* ================================================
   DARK MODE — Food row / food item overrides
   Tutti i colori referenziano variabili di theme.css
   ================================================ */

/* --- Compatible / Normal --- */
.dark-mode .food-row-normal,
.dark-mode .food-item.compatible-food {
    background: var( --success-bg);
    border: 2px solid var(--success-border);
}

/* --- Compatible / Normal --- */
.dark-mode .food-item,
.dark-mode .food-item.compatible-food {
    background: var( --success-bg);
    border: 2px solid var(--success-border);
}


/* --- Compatible / Normal --- */
.dark-mode .food-item.alternative,
.dark-mode .food-item.compatible-food {
    background: var(--violet-bg) !important;
    border: 2px solid var(--violet-border) !important;
}


/* --- Accepted Override --- */
.dark-mode .food-row-override,
.dark-mode .food-item.accepted-override {
    background: var(--success-bg) !important;
    border: 2px solid var(--success-border) !important;
}

/* --- Manual food --- */
.dark-mode .food-row-manual,
.dark-mode .food-item.manual-food {
    background: var(--bg-hover) !important;
    border: 2px solid var(--success-border) !important;
}

/* --- Manual alternative --- */
.dark-mode .food-row-manual-alt,
.dark-mode .food-item.manual-food.alternative {
    background: var(--bg-hover) !important;
    border: 2px solid var(--violet-border) !important;
}

/* --- Forbidden --- */
.dark-mode .food-row-forbidden,
.dark-mode .food-item.incompatible-food {
    background: var(--danger-bg-light) !important;
    border: 2px solid var(--danger-border) !important;
}

/* --- Warning --- */
.dark-mode .food-row-warning,
.dark-mode .food-item.warning-food {
    background: var(--warning-bg-light) !important;
    border: 2px solid var(--warning-border) !important;
}


/*FOOD HOVER*/

/* --- Compatible / Normal --- */
.dark-mode .food-item:hover,
.dark-mode .food-row-manual:hover {
    box-shadow: 0 8px 8px -6px var(--success-border);
}

/* --- Compatible / Normal --- */
.dark-mode .food-item.alternative:hover,
.dark-mode .food-row-manual-alt:hover{
    box-shadow: 0 8px 8px -6px var(--violet-border);
}


/* --- Compatible / Normal --- */
.dark-mode .food-item:hover,
.dark-mode .food-item.compatible-food:hover {
    box-shadow: 0 8px 8px -6px var(--success-border);
}

.dark-mode .food-item.warning-food.food-row-warning:hover{
    box-shadow: 0 8px 8px -6px var(--warning-border);
}

.food-item.incompatible-food.food-row-forbidden:hover{
    box-shadow: 0 8px 8px -6px var(--danger-border);
}

/* --- Drag & drop --- */
.dark-mode .food-dragging {
    box-shadow: 0 0 0 3px var(--violet-hover) !important;
}

.dark-mode .food-longpress-pending {
    box-shadow: 0 0 0 2px var(--violet-hover) !important;
}

/* --- Food search item states --- */
.dark-mode .food-search-item.food-forbidden {
    background: var(--danger-hover);
}



.dark-mode .food-search-item.food-warning {
    background: var(--warning-hover);
}


/* --- Badge personale --- */
.dark-mode .food-search-item .badge-personale {
    background-color: var(--success-hover);
    color: var(--success-light);
}

/* ================================================
   DARK MODE — Gara elements
   ================================================ */

.dark-mode .gara-tab {
    background: linear-gradient(135deg, var(--danger-bg-lightest) 0%, var(--danger-bg) 100%);
    border-color: var(--danger-border);
}

.dark-mode .gara-toggle-section {
    background: linear-gradient(135deg, var(--danger-bg-lightest) 0%, var(--danger-bg-light) 100%);
    border-color: var(--danger-border);
}

.dark-mode .meal-section.gara-meal {
    border-color: var(--danger-border);
    background: linear-gradient(90deg, var(--danger-bg-lightest) 0%, var(--danger-bg-light) 100%);
}

.dark-mode .gara-config-header {
    background: linear-gradient(135deg, var(--danger-dark) 0%, #962d22 100%);
}

.dark-mode .gara-input-mode-group {
    background: var(--danger-bg-lightest);
}

.dark-mode .gara-info-box {
    background: var(--warning-bg-lightest);
    border-left-color: var(--warning-border);
}

/* ================================================
   DARK MODE — Macro ON/OFF, warnings
   ================================================ */

.dark-mode .macro-card-on {
    border-color: var(--success-border);
}

.dark-mode .macro-card-off {
    border-color: var(--danger-border);
}

.dark-mode .macro-mode-radio--on {
    background: var(--success-bg-lightest);
}

.dark-mode .macro-mode-radio--off {
    background: var(--danger-bg-lightest);
}

.dark-mode .macro-warning,
.dark-mode .gara-macro-warning {
    background: var(--danger-bg);
    border-left-color: var(--danger-border);
    color: var(--danger-light);
}

.dark-mode .warning-message {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-light);
}

/* ================================================
   DARK MODE — Sections / containers
   ================================================ */

.dark-mode .onoff-container,
.dark-mode .macro-distribution-section {
    background: linear-gradient(135deg, var(--bg-surface-raised) 0%, var(--bg-surface) 100%);
    border-color: var(--gradient-app-start);
}

.dark-mode .daily-config {
    background-color: var(--primary-bg-light);
    border-color: var(--gradient-app-start);
}

.dark-mode .daily-config .Title {
    color: var(--primary-light);
}

/* ================================================
   DARK MODE — Template badges & tags
   ================================================ */

.dark-mode .tmpl-badge-modalita,
.dark-mode .tmpl-badge-modalita--lg {
    background: var(--primary-bg);
    color: var(--primary-light);
}

.dark-mode .tmpl-badge-gara,
.dark-mode .tmpl-badge-gara--lg {
    background: var(--pink-bg);
    color: var(--pink-light);
}

.dark-mode .tmpl-tag-medical {
    background: var(--danger-bg);
    color: var(--danger-light);
}

.dark-mode .tmpl-tag-ethical {
    background: var(--success-bg);
    color: var(--success-light);
}

.dark-mode .tmpl-tag-preference {
    background: var(--warning-bg);
    color: var(--warning-light);
}

/* ================================================
   DARK MODE — Template nutritional cards
   ================================================ */

.dark-mode .tmpl-summary-box {
    background: var(--success-bg-lightest);
}

.dark-mode .tmpl-nutri-panel {
    background: var(--bg-surface-raised);
}

.dark-mode .tmpl-nutri-card--kcal    { background: var(--warning-bg); }
.dark-mode .tmpl-nutri-card--carbs   { background: var(--warning-bg-light); }
.dark-mode .tmpl-nutri-card--protein  { background: var(--primary-bg); }
.dark-mode .tmpl-nutri-card--fat     { background: var(--success-bg); }

/* ================================================
   DARK MODE — Template confirm/delete
   ================================================ */

.dark-mode .tmpl-confirm-header-warning {
    background: var(--warning-bg);
}

.dark-mode .tmpl-delete-header {
    background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger-darkest) 100%);
}

.dark-mode .copy-day-modal-header--warning {
    background: linear-gradient(135deg, var(--warning-dark) 0%, var(--danger) 100%);
}

/* ================================================
   DARK MODE — Validation, badges, buttons
   ================================================ */

.dark-mode .validation-alert-medical {
    background: var(--danger-bg);
    border-left-color: var(--danger-border);
    color: var(--danger-light);
}

.dark-mode .badge-used {
    background: var(--success-hover);
    color: var(--success-light);
}

.dark-mode .badge-suggested {
    background: var(--warning-hover);
    color: var(--warning-light);
}

.dark-mode .save-btn-success {
    background: linear-gradient(135deg, var(--success-dark) 0%, var(--success) 100%) !important;
}

.dark-mode .btn-save-highlight {
    background: linear-gradient(135deg, var(--warning-dark) 0%, var(--warning) 100%);
}

/* ================================================
   DARK MODE — Distribution table inputs
   ================================================ */

.dark-mode .dist-table .input-water {
    border-color: var(--info-border);
    background: var(--info-bg-lightest);
}

.dark-mode .dist-table .input-salt {
    border-color: var(--violet-border);
    background: var(--violet-bg-light);
}

.dark-mode .dist-tfoot-water { background: var(--info-bg-lightest); }
.dark-mode .dist-tfoot-salt  { background: var(--violet-bg-light); }

/* ================================================
   DARK MODE — Misc semantic overrides
   ================================================ */

.dark-mode .dieta-detail-alimento.macro-mode {
    background: var(--primary-bg-light);
}

.dark-mode .pral-daily-positive { color: var(--danger-light); }
.dark-mode .pral-daily-negative { color: var(--success-light); }
.dark-mode .pral-daily-neutral  { color: var(--text-muted); }

.dark-mode .micro-exceeded-color { color: var(--danger-light); }
.dark-mode .micro-reset-color   { color: var(--text-muted); }

.dark-mode .compare-column-header.target {
    background: var(--warning-bg-lightest);
}

.dark-mode .compare-cell.target-cell {
    background: var(--warning-bg-lightest);
}

.dark-mode .warning-over {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-light);
}

.dark-mode .warning-under {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-light);
}