/* ════════════════════════════════════════════
   7. PLANNING MODAL — Responsive
   ════════════════════════════════════════════ */

/* --- Modal shell --- */
#planning-modal .modal-content {
    border-radius: clamp(10px, 1.2vw, 20px);
}

#planning-modal .modal-header,
#planning-modal .analisi-header {
    padding: 8px clamp(14px, 2vw, 24px);
    min-height: 60px;
    gap: clamp(6px, 0.8vw, 12px);
}

#planning-modal .modal-header h2,
#planning-modal .analisi-header h2 {
    font-size: clamp(1em, 0.8vw + 0.5em, 1.5em);
    white-space: nowrap;
}

#planning-modal .analisi-header h2 {
    color: var(--text-inverse);
}

#planning-modal .header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 0.5vw, 12px);
    align-items: center;
    justify-content: flex-end;
}

#planning-modal .header-actions .btn {
    font-size: clamp(0.78em, 0.4vw + 0.4em, 0.95em);
    padding: clamp(6px, 0.5vw, 12px) clamp(10px, 0.8vw, 18px);
    white-space: nowrap;
}

#planning-modal .modal-close {
    width: clamp(30px, 2.5vw, 40px);
    height: clamp(30px, 2.5vw, 40px);
    font-size: clamp(18px, 1.5vw, 24px);
}

#planning-modal .modal-body {
    padding: clamp(14px, 2vw, 30px);
}

/* --- Config section --- */
#planning-modal .config-section {
    padding: clamp(10px, 1.2vw, 20px);
    border-radius: clamp(8px, 1vw, 15px);
    margin-bottom: clamp(14px, 1.5vw, 25px);
}

#planning-modal .config-callout {
    padding: clamp(10px, 1vw, 16px);
    border-radius: clamp(6px, 0.8vw, 10px);
    margin-bottom: clamp(10px, 1vw, 16px);
}

#planning-modal .config-callout p {
    font-size: clamp(0.8em, 0.4vw + 0.45em, 1em);
}

/* --- Macro row (mode cards + buttons) ---
   modal.css: grid minmax(260px,420px) → fluid wrap */
#planning-modal .macro-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 0.8vw, 18px);
    align-items: stretch;
}

#planning-modal .macro-card {
    flex: 1 1 clamp(180px, 15vw, 280px);
    padding: clamp(8px, 0.8vw, 14px);
    border-radius: clamp(6px, 0.8vw, 10px);
}

#planning-modal .macro-card small {
    font-size: clamp(0.72em, 0.3vw + 0.4em, 0.85em);
}

#planning-modal .macro-toggle {
    font-size: clamp(0.82em, 0.4vw + 0.4em, 1em);
    gap: clamp(4px, 0.4vw, 10px);
}

#planning-modal .macro-row > .btn {
    flex: 0 1 auto;
    font-size: clamp(0.8em, 0.4vw + 0.4em, 0.95em);
    padding: clamp(8px, 0.7vw, 14px) clamp(12px, 1vw, 20px);
    white-space: nowrap;
}

/* --- Daily config --- */
#planning-modal .daily-config {
    padding: clamp(10px, 1.2vw, 18px);
    border-radius: clamp(8px, 0.8vw, 12px);
}

#planning-modal .daily-config .Title {
    font-size: clamp(0.95em, 0.6vw + 0.5em, 1.3em);
}

/* --- Day selector buttons --- */
#planning-modal .day-selector-group {
    grid-template-columns: repeat(auto-fit, minmax(clamp(80px, 7vw, 120px), 1fr));
    gap: clamp(4px, 0.4vw, 8px);
}

#planning-modal .day-selector-btn {
    padding: clamp(5px, 0.5vw, 10px) 0;
    font-size: clamp(0.72em, 0.35vw + 0.4em, 0.88rem);
    border-radius: clamp(12px, 1vw, 20px);
}

/* --- Day + Kcal row ---
   modal.css: grid 3 cols → fluid, stack ≤900px */
#planning-modal .day-kcal-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1vw, 20px);
    align-items: end;
}

#planning-modal .day-kcal-row .field {
    flex: 1 1 clamp(200px, 20vw, 350px);
}

/* --- Meals quick grid ---
   modal.css: grid 6 cols → fluid */
#planning-modal .meals-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 9vw, 150px), 1fr));
    gap: clamp(8px, 0.7vw, 15px);
}

#planning-modal .meal-quick-btn {
    padding: clamp(8px, 0.7vw, 15px);
    border-radius: clamp(8px, 0.7vw, 12px);
    gap: clamp(3px, 0.3vw, 8px);
}

#planning-modal .meal-number {
    font-size: clamp(1em, 0.6vw + 0.5em, 1.4em);
    color:var(--text-primary);
}

#planning-modal .meal-name {
    font-size: clamp(0.75em, 0.35vw + 0.4em, 0.95em);
    color:var(--text-primary);
}

/* --- Meals + Macro columns (side by side) ---
   modal.css: flex row → responsive */
#planning-modal .meals-kcal-col {
    gap: clamp(12px, 1.2vw, 24px);
}

/* --- Macro inputs (carbs/protein/fats) ---
   modal.css: grid 3 cols → fluid */
#planning-modal .macro-inputs {
    gap: clamp(8px, 0.7vw, 14px);
}

#planning-modal .macro-input-group {
    padding: clamp(8px, 0.7vw, 14px);
    border-radius: clamp(8px, 0.7vw, 12px);
}

#planning-modal .macro-input-group label {
    font-size: clamp(0.82em, 0.4vw + 0.4em, 1em);
    margin-bottom: clamp(4px, 0.4vw, 8px);
}

/* --- Macro kcal summary --- */
#planning-modal .macro-kcal-summary {
    padding: clamp(8px, 0.8vw, 14px);
    border-radius: clamp(8px, 0.8vw, 14px);
}

#planning-modal .macro-kcal-grid {
    gap: clamp(6px, 0.6vw, 12px);
}

#planning-modal .macro-kcal-grid > div {
    padding: clamp(6px, 0.6vw, 12px);
    border-radius: clamp(6px, 0.6vw, 12px);
}

/* --- Micronutrients grid --- */
#planning-modal .micronutrients-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 12vw, 210px), 1fr));
    gap: clamp(8px, 0.7vw, 15px);
    padding: clamp(10px, 1vw, 20px);
    border-radius: clamp(6px, 0.7vw, 10px);
}

#planning-modal .micro-group label {
    font-size: clamp(0.8em, 0.35vw + 0.4em, 0.92em);
}

#planning-modal .micro-input {
    padding: clamp(6px, 0.5vw, 10px) clamp(8px, 0.6vw, 12px);
    font-size: clamp(0.85em, 0.35vw + 0.45em, 0.95em);
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
}



#planning-modal .micro-info {
    padding: clamp(8px, 0.8vw, 15px);
    border-radius: clamp(5px, 0.5vw, 8px);
}

#planning-modal .micro-info p {
    font-size: clamp(0.78em, 0.35vw + 0.4em, 0.92em);
}

/* --- ON/OFF container --- */
#planning-modal .onoff-container {
    padding: clamp(12px, 1.2vw, 22px);
    border-radius: clamp(8px, 0.8vw, 12px);
}

#planning-modal .onoff-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(80px, 8vw, 130px), 1fr));
    gap: clamp(6px, 0.5vw, 12px);
}

/* --- Macro distribution (ON/OFF tabs) --- */
#planning-modal .macro-distribution-section {
    padding: clamp(12px, 1.2vw, 22px);
    border-radius: clamp(8px, 0.8vw, 12px);
}

#planning-modal .distribution-tabs {
    gap: clamp(4px, 0.4vw, 10px);
}

#planning-modal .dist-tab {
    padding: clamp(8px, 0.7vw, 14px);
    font-size: clamp(0.82em, 0.4vw + 0.4em, 1em);
    border-radius: clamp(5px, 0.5vw, 8px) clamp(5px, 0.5vw, 8px);
}

#planning-modal .macro-card-on,
#planning-modal .macro-card-off {
    padding: clamp(12px, 1.2vw, 22px);
    border-radius: clamp(6px, 0.7vw, 10px);
    margin-bottom: clamp(12px, 1vw, 20px);
}

#planning-modal .macro-inputs--onoff {
    gap: clamp(8px, 0.7vw, 15px);
}

#planning-modal .meals-selector-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 11vw, 190px), 1fr));
    gap: clamp(8px, 0.7vw, 15px);
}

/* --- Meal section (days content) --- */
#planning-modal .meal-section {
    padding: clamp(12px, 1.5vw, 25px);
    border-radius: clamp(8px, 1vw, 15px);
    margin-bottom: clamp(14px, 1.5vw, 30px);
    gap: clamp(8px, 0.8vw, 15px);
}

#planning-modal .meal-title {
    padding: clamp(8px, 0.8vw, 15px) clamp(12px, 1vw, 25px);
    border-radius: clamp(6px, 0.7vw, 12px);
    min-width: clamp(80px, 8vw, 130px);
}

#planning-modal .meal-header {
    gap: clamp(10px, 1vw, 20px);
}

/* --- Meal totals header (14-col grid) ---
   Ora gestito come flex-wrap nella sezione meal-section sopra */
#planning-modal .meal-totals-header {
    border-radius: clamp(6px, 0.7vw, 12px);
}

/* --- Food items ---
   Scroll + sticky buttons gestiti nella sezione meal-section sopra */


#planning-modal .food-table-header {
    gap: clamp(4px, 0.4vw, 8px);
    padding: clamp(8px, 0.7vw, 15px);
}

/* --- Copy day / meal / conflict modals --- */
.copy-day-modal-content {
    border-radius: clamp(8px, 1vw, 15px);
    
}

.copy-day-modal-header h3 {
    font-size: clamp(1em, 0.6vw + 0.5em, 1.3em);
}

.copy-day-modal-footer {
    gap: clamp(6px, 0.5vw, 12px);
    padding: clamp(10px, 1vw, 18px);
}

/* --- Buttons generici nel planning modal --- */


#planning-modal .btn.btn-primary.radius,
#planning-modal .btn.btn-septiary.radius {
    border-radius: clamp(6px, 0.5vw, 10px);
}

/* --- Overflow prevention --- */
#planning-modal .modal-body,
#planning-modal .config-section,
#planning-modal .daily-config,
#planning-modal .meals-kcal-col,
#planning-modal .macro-distribution-section,
#planning-modal .onoff-container {
    min-width: 0;
    overflow: hidden;
}

#planning-modal .food-list {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ── Planning Modal Breakpoints ── */

/* ≤ 1199px: meals + macro stack */
@media (max-width: 1199px) {
    #planning-modal .meals-kcal-col {
        flex-direction: column;
    }

    #planning-modal #meals-preview,
    #planning-modal #macro-slider-section {
        flex: none;
        width: 100%;
    }

    #planning-modal .macro-inputs--onoff {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ≤ 1023px: macro-inputs stack to 1 col */
@media (max-width: 1023px) {
    #planning-modal .macro-inputs {
        grid-template-columns: 1fr;
    }

    #planning-modal .macro-kcal-grid {
        grid-template-columns: 1fr;
    }

    #planning-modal .macro-inputs--onoff {
        grid-template-columns: 1fr;
    }

    #planning-modal .onoff-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ≤ 768px: full stacking */
@media (max-width: 768px) {
    #planning-modal .modal-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    #planning-modal .header-actions {
        justify-content: center;
    }

    #planning-modal .day-kcal-row {
        flex-direction: column;
    }

    #planning-modal .day-kcal-row .field {
        flex: none;
        width: 100%;
    }

    #planning-modal .onoff-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    #planning-modal .custom-meal-row,
    #planning-modal .custom-meal-row-macro {
        flex-direction: column;
    }
}


/* ── Meal section: testo più leggero + fluid ── */
#planning-modal .meal-section {
    font-weight: 400;
    font-size: clamp(0.78em, 0.35vw + 0.4em, 0.95em);
}

#planning-modal .food-table-header {
    font-weight: 600;
    font-size: clamp(0.75em, 0.3vw + 0.4em, 0.92em);
}



/* ── meal-totals-header: wrap + no overlap ── */
#planning-modal .meal-totals-header {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(4px, 0.4vw, 10px);
    padding: clamp(10px, 0.8vw, 16px);
}

#planning-modal .macro-badge-total {
    font-size: clamp(0.9em, 1vw + 0.6em, 1.4em);
    padding: clamp(3px, 0.3vw, 8px) clamp(5px, 0.4vw, 8px);
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: clamp(85px, 5vw, 85px);
    max-width: clamp(85px, 5vw, 85px);
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
}



/* ── food-item: 3 zone layout ── */


/* Zona 1: nome + quantità */


#planning-modal .food-name-container {
    min-width: clamp(80px, 8vw, 180px);
    max-width: clamp(80px, 8vw, 180px);
    padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
}

#planning-modal .quantity-unit-container {
    flex-shrink: 0;
}



#planning-modal .macro-badge,
#planning-modal .macro-badge-sm {
    font-size: clamp(0.9em, 1vw + 0.6em, 1.4em);
    padding: clamp(3px, 0.3vw, 8px) clamp(5px, 0.4vw, 8px);
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: clamp(85px, 5vw, 85px);
    max-width: clamp(85px, 5vw, 85px);
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
    justify-content: center;
}

/* Zona 3: pulsanti — sempre a destra */



/* ════════════════════════════════════════════
   8. DUAL MODAL LAYOUT — Planning (73%) + Analisi (27%)
   ════════════════════════════════════════════ */

/* --- Planning Modal: 73% a sinistra --- */
#planning-modal.modal-overlay {
    justify-content: flex-start;
    align-items: stretch;
    padding: clamp(4px, 0.4vw, 10px);
}

#planning-modal .modal-content {
    width: 73%;
    max-width: 73%;
    height: 100%;
    max-height: 100%;
    border-radius: clamp(10px, 1vw, 20px);
}

/* Planning full-width quando analisi è nascosto */
#planning-modal.planning-full .modal-content {
    width: 100%;
    max-width: 100%;
}

/* --- Analisi Modal: 27% a destra ---
   z-index 10001 → sopra l'overlay scuro del planning
   L'overlay resta trasparente + pointer-events:none,
   quindi il click passa attraverso al planning sotto */
.analisi-overlay {
    z-index: 10001;
    justify-content: flex-end;
    align-items: stretch;
    padding: clamp(4px, 0.4vw, 10px);
    padding-left: 0;
}

.analisi-content {
    width: calc(27vw - clamp(4px, 0.4vw, 10px));
    max-width: calc(27vw - clamp(4px, 0.4vw, 10px));
    height: 100%;
    max-height: 100%;
    border-radius: clamp(10px, 1vw, 20px);
}


/* ════════════════════════════════════════════
   9. ANALISI MODAL — Responsive
   ════════════════════════════════════════════ */

/* --- Header --- */

.analisi-search-btn {
    width: clamp(28px, 2.5vw, 40px);
    height: clamp(28px, 2.5vw, 40px);
    font-size: clamp(14px, 1.2vw, 20px);
}

/* --- Body --- */
.analisi-body {
    padding: clamp(12px, 1.5vw, 30px);
}

/* --- View selector (Settimana / Giorno) --- */
.analisi-view-selector {
    gap: clamp(6px, 0.5vw, 15px);
    padding: clamp(10px, 1vw, 20px);
    border-radius: clamp(8px, 0.8vw, 12px);
    margin-bottom: clamp(12px, 1.2vw, 25px);
}

.analisi-radio-custom {
    padding: clamp(8px, 0.7vw, 15px) clamp(10px, 0.8vw, 20px);
    border-radius: clamp(6px, 0.6vw, 10px);
    font-size: clamp(0.8em, 0.4vw + 0.4em, 1.1em);
}

/* --- Giorni container --- */
.analisi-giorni-container {
    padding: clamp(10px, 1vw, 20px);
    border-radius: clamp(8px, 0.8vw, 12px);
    margin-bottom: clamp(12px, 1.2vw, 25px);
}

.analisi-giorni-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(60px, 5vw, 100px), 1fr));
    gap: clamp(4px, 0.4vw, 10px);
}

.analisi-day-btn {
    padding: clamp(6px, 0.5vw, 12px) clamp(8px, 0.6vw, 15px);
    font-size: clamp(0.72em, 0.3vw + 0.38em, 0.95em);
    border-radius: clamp(6px, 0.5vw, 10px);
}

/* --- Pasti container --- */
.analisi-pasti-container {
    padding: clamp(10px, 1vw, 20px);
    border-radius: clamp(8px, 0.8vw, 12px);
    margin-bottom: clamp(12px, 1.2vw, 25px);
}

.analisi-pasti-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(80px, 7vw, 130px), 1fr));
    gap: clamp(4px, 0.4vw, 10px);
}

.analisi-meal-btn {
    padding: clamp(6px, 0.5vw, 12px) clamp(8px, 0.6vw, 15px);
    font-size: clamp(0.72em, 0.3vw + 0.38em, 0.95em);
    border-radius: clamp(6px, 0.5vw, 10px);
}

/* --- Selector section --- */
.analisi-selector-section {
    padding: clamp(10px, 1vw, 20px);
    border-radius: clamp(8px, 0.8vw, 12px);
    margin-bottom: clamp(10px, 1vw, 20px);
}

.analisi-selector-section label {
    font-size: clamp(0.85em, 0.4vw + 0.4em, 1.1em);
    margin-bottom: clamp(5px, 0.5vw, 10px);
}

/* --- Data container --- */
.analisi-data-container {
    padding: clamp(12px, 1.2vw, 25px);
    border-radius: clamp(8px, 0.8vw, 12px);
    min-height: clamp(200px, 25vw, 400px);
}

/* --- Nutrient rows --- */
.nutrient-category {
    padding: clamp(8px, 0.8vw, 15px);
    margin: clamp(10px, 1vw, 20px) 0 clamp(5px, 0.5vw, 10px) 0;
    border-radius: clamp(5px, 0.5vw, 8px);
    font-size: clamp(0.85em, 0.4vw + 0.4em, 1em);
}

.nutrient-row {
    padding: clamp(6px, 0.6vw, 12px) clamp(8px, 0.8vw, 15px);
}

.nutrient-name {
    font-size: clamp(0.8em, 0.35vw + 0.4em, 1em);
}

.nutrient-value {
    font-size: clamp(0.8em, 0.35vw + 0.4em, 1em);
}

/* --- Buttons --- */
.analisi-btn {
    padding: clamp(8px, 0.7vw, 12px) clamp(12px, 1vw, 24px);
    border-radius: clamp(6px, 0.5vw, 10px);
    font-size: clamp(0.82em, 0.4vw + 0.4em, 1em);
    gap: clamp(4px, 0.3vw, 8px);
}

/* --- Form controls --- */
.analisi-form-control {
    padding: clamp(8px, 0.7vw, 14px);
    border-radius: clamp(6px, 0.6vw, 10px);
    font-size: clamp(0.85em, 0.35vw + 0.45em, 1em);
}

/* --- Info banners --- */
.analisi-info-banner {
    padding: clamp(8px, 0.8vw, 15px);
    border-radius: clamp(5px, 0.5vw, 8px);
    margin-bottom: clamp(10px, 1vw, 20px);
}

/* --- Footer --- */
.analisi-footer {
    padding: clamp(10px, 1vw, 20px) clamp(12px, 1.5vw, 30px);
    border-radius: 0 0 clamp(10px, 1vw, 20px) clamp(10px, 1vw, 20px);
}

/* --- State boxes --- */
.analisi-state-box {
    padding: clamp(20px, 2vw, 40px);
}

.analisi-state-icon {
    font-size: clamp(1.8em, 1.5vw + 0.8em, 3em);
}

.analisi-state-icon-lg {
    font-size: clamp(2.2em, 2vw + 0.8em, 4em);
}

/* --- Overflow prevention --- */
.analisi-content,
.analisi-body,
.analisi-data-container {
    min-width: 0;
}

#planning-modal .food-item {
    font-weight: 400;
    font-size: clamp(0.75em, 0.3vw + 0.4em, 0.92em);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 0.4vw, 8px);
    padding: clamp(8px, 0.7vw, 15px);
    border-radius: 10px;
    margin-bottom: 15px;
}

#planning-modal .food-info-zone {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.5vw, 12px);
    flex: 0 0 auto;
    min-width: 0;
    order: 1;
}

#planning-modal .food-macros-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(3px, 0.3vw, 6px);
    flex: 1 1 220px;
    min-width: 0;
    order: 2;
}

#planning-modal .food-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    order: 3;
}

@media (max-width: 850px) {
    #planning-modal .food-macros-zone {
        order: 3;
        flex-basis: 100%;
    }

    

    #planning-modal .food-actions {
        order: 2;
        margin-left: auto;
        flex-direction: row;
    }

    #planning-modal .food-info-zone {
    align-items: stretch;
    }



    #planning-modal .quantity-unit-container {
        align-self: stretch;
        align-items: center;
    }
    
}


@media (max-width: 1800px){
    #planning-modal .food-item {
    align-items: flex-start;
    }

    #planning-modal .food-info-zone {
    align-items: center;
    }
}

.mobile-tab-switcher {
    display: none;
}



@media (max-width: 1200px){

        .mobile-tab-switcher {
        display: flex;
        gap: 0;
        margin-bottom: 12px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--border-medium);
    }

    .mobile-tab {
        flex: 1;
        padding: 12px;
        border: none;
        background: var(--bg-surface-raised);
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 0.95em;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-tab.active {
        background: var(--gradient-app);
        color: var(--text-stable-white);
    }

    

    #analisi-modal {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        pointer-events: all;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 0 !important;
        z-index: auto !important;
    }

    #analisi-modal .analisi-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 93vh;
        border-radius: 10px;
        box-shadow: none;
        overflow-y: auto;
        
    }

    #analisi-modal.analisi-hidden {
        display: none;
    }

    #planning-modal .food-name-container {
        display: flex;
        align-items: center;
        align-self: stretch;
    }

    #planning-modal .quantity-unit-container {
        align-self: stretch;
        align-items: center;
    }

    #planning-modal .btn-primary-modal,
    #planning-modal .btn-secondary-modal,
    #planning-modal .btn-tertiary-modal,
    #planning-modal .btn-quartary-modal{
        font-size: 1em;
    }
}

@media (max-width: 880px) {
    #planning-modal .food-info-zone{
        display: flex;
        flex-direction: column;
    }

    #planning-modal .food-name-container{
    min-width: clamp(160px, 8vw, 180px);
    max-width: clamp(160px, 8vw, 180px);
    padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
    }

    #planning-modal .food-name {
    min-width: clamp(140px, 8vw, 180px);
    max-width: clamp(140px, 8vw, 180px);
    padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
    height: 116%;
        display: flex;
    align-items: center;
    }
}

@media (max-width: 850px) {
        #planning-modal .food-name-container{
    min-width: clamp(160px, 8vw, 180px);
    max-width: clamp(160px, 8vw, 180px);
    padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
    }

    #planning-modal .food-name {
    min-width: clamp(140px, 8vw, 180px);
    max-width: clamp(140px, 8vw, 180px);
    padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
    height: 116%;
        display: flex;
    align-items: center;
    }

     #planning-modal .food-info-zone{
        display: flex;
        flex-direction: row;
    }
    
}


@media (max-width: 800px) {
    #planning-modal .food-info-zone {
        order: 1;
    }

    #planning-modal .food-name-container{
    min-width: clamp(180px, 8vw, 180px);
    max-width: clamp(180px, 8vw, 180px);
    padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
    }

    #planning-modal .food-name {
    min-width: clamp(140px, 8vw, 180px);
    max-width: clamp(140px, 8vw, 180px);
    padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
    height: 116%;
        display: flex;
    align-items: center;
    }

    #planning-modal .food-actions {
        order: 3;
        margin-left: 0;
        margin-top: 5px;
    }

    #planning-modal .food-macros-zone {
        order: 2;
        flex-basis: 100%;
    }
}

@media (max-width: 600px) {

    #planning-modal .meal-header{
        display: flex;
        flex-direction: column;
    }

    #planning-modal .food-info-zone {
        display: flex;
        flex-direction: column;
    }

    #planning-modal .food-name-container{
        min-width: clamp(180px, 8vw, 180px);
        max-width: clamp(180px, 8vw, 180px);
        padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
    }

    #planning-modal .food-name {
        min-width: clamp(180px, 8vw, 180px);
        max-width: clamp(180px, 8vw, 180px);
        padding: clamp(5px, 0.5vw, 10px) clamp(8px, 0.7vw, 14px);
        height: 116%;
            display: flex;
        align-items: center;
    }

    #current-day-title {

        justify-content: flex-start;
    }
}

@media (max-width: 500px) {
    #planning-modal .macro-row-checkboxes{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 420px) {
    #planning-modal .food-macro-row-checkboxes{
        flex-direction: column;
    }

    #planning-modal .gara-controls{
        display: block;
    }

    #planning-modal .food-actions{
        flex-direction: column;
    }


}