/* =====================================================
   NUTRIXIONE.IT — MOBILE RESPONSIVE FIX
   Questo file contiene SOLO @media queries.
   Zero impatto su desktop. Safe da aggiungere/rimuovere.
   v1.0 — 2 Maggio 2026
   ===================================================== */

/* =====================================================
   TABLET (max 1024px)
   ===================================================== */
@media (max-width: 1024px) {

    /* === DIETA MANUALE BUILDER === */
    .builder-topbar {
        padding: 0.6rem 0.8rem;
    }
    .builder-topbar-left h2 {
        font-size: 0.9rem;
    }
    .builder-food-panel {
        width: 260px;
        min-width: 220px;
    }
    .builder-macro-bar {
        padding: 0.4rem 0.8rem;
    }

    /* Inline grids in piani / diete-generate */
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    div[style*="grid-template-columns: 120px 60px 1fr 70px"] {
        grid-template-columns: 1fr !important;
        gap: 0.2rem !important;
    }
    div[style*="grid-template-columns: 1fr 60px 80px 100px"] {
        grid-template-columns: 1fr !important;
        gap: 0.2rem !important;
    }
    div[style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================
   MOBILE (max 768px)
   ===================================================== */
@media (max-width: 768px) {

    /* === DIETA MANUALE BUILDER — LAYOUT PRINCIPALE === */
    .builder-main {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

    .builder-food-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border, #e2e8df);
        position: relative;
    }

    /* Pannello alimenti: collassabile su mobile */
    .builder-food-panel .food-panel-header {
        padding: 0.5rem;
    }
    .builder-food-panel .food-list {
        max-height: 200px;
        overflow-y: auto;
    }

    /* Plan panel: scroll libero, no overflow hidden */
    .builder-plan-panel {
        overflow-y: visible !important;
        overflow-x: hidden !important;
        padding: 0 0.5rem 2rem !important;
    }

    /* === TOPBAR BUILDER === */
    .builder-topbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 0.6rem 0.8rem !important;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .builder-topbar-left {
        width: 100%;
        flex-wrap: wrap;
    }
    .builder-topbar-left h2 {
        font-size: 0.85rem !important;
        white-space: normal !important;
        line-height: 1.3;
    }
    .builder-topbar-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    .builder-kcal-display {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
    .kcal-input {
        width: 60px !important;
    }

    /* === MACRO BAR === */
    .builder-macro-bar {
        flex-wrap: wrap !important;
        padding: 0.4rem 0.5rem !important;
        gap: 0.3rem !important;
    }
    .macro-target {
        flex: 1 1 45% !important;
        min-width: 0;
    }
    .macro-name {
        display: none !important;
    }
    .macro-val {
        font-size: 0.7rem !important;
    }

    /* === DAY TABS === */
    .day-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 0.2rem !important;
        padding: 0.5rem 0 !important;
        scrollbar-width: none;
    }
    .day-tabs::-webkit-scrollbar {
        display: none;
    }
    .day-tab {
        flex-shrink: 0 !important;
        padding: 0.3rem 0.6rem !important;
        font-size: 0.75rem !important;
    }

    /* === MEAL CONFIG BAR === */
    .meal-config-bar {
        flex-wrap: wrap !important;
        gap: 0.3rem !important;
        padding: 0.4rem 0 !important;
    }
    .meal-config-bar .btn {
        font-size: 0.72rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    .day-kcal-counter {
        width: 100%;
        margin-left: 0 !important;
        font-size: 0.75rem !important;
        justify-content: center;
    }

    /* === MEAL CARDS === */
    .meal-card {
        margin-bottom: 0.6rem;
    }
    .meal-header {
        padding: 0.4rem 0.6rem !important;
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .meal-header-left {
        flex-wrap: wrap;
        gap: 0.3rem !important;
    }
    .meal-title {
        font-size: 0.8rem !important;
    }
    .meal-time,
    .meal-kcal {
        font-size: 0.68rem !important;
    }

    /* === MEAL ITEM ROWS === */
    .meal-item-row {
        flex-wrap: wrap !important;
        gap: 0.3rem !important;
        padding: 0.4rem !important;
    }
    .meal-item-name {
        flex: 1 1 100% !important;
        font-size: 0.78rem !important;
        font-weight: 500;
    }
    .meal-item-qty {
        width: 50px !important;
    }
    .meal-item-qty input {
        font-size: 0.72rem !important;
        padding: 0.15rem 0.2rem !important;
    }
    .meal-item-macros {
        flex-wrap: wrap !important;
        gap: 0.2rem !important;
    }
    .meal-item-macros span {
        font-size: 0.6rem !important;
        padding: 0.05rem 0.2rem !important;
    }

    /* === FOOD ITEMS nel pannello === */
    .food-item {
        padding: 0.4rem !important;
    }
    .food-item-name {
        font-size: 0.75rem !important;
    }
    .food-item-macros {
        font-size: 0.6rem !important;
    }
    .food-item-portion {
        font-size: 0.6rem !important;
    }

    /* === BUILDER EXTRAS === */
    .builder-extras {
        padding: 0.5rem 0 !important;
    }
    .builder-section summary {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.6rem !important;
    }

    /* === MEAL ACTION BAR === */
    .meal-action-bar {
        padding: 0.4rem !important;
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .meal-action-bar .btn {
        font-size: 0.72rem !important;
        padding: 0.25rem 0.6rem !important;
    }

    /* === COMPLETE DAY === */
    .complete-day-btn {
        font-size: 0.85rem !important;
        padding: 0.6rem 1.2rem !important;
    }
    .complete-day-bar.completed {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .complete-day-bar.completed span {
        font-size: 0.8rem !important;
    }

    /* === MODALS su mobile (builder e tutti) === */
    #copy-day-modal .modal,
    #add-meal-modal .modal {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 0 auto;
    }


    /* =====================================================
       ADMIN PAGES — INLINE GRIDS (piani, diete-generate, checkin, consensi)
       ===================================================== */

    /* 4-col stat grids */
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Meal row grids: 120px 60px 1fr 70px → stack */
    div[style*="grid-template-columns: 120px 60px 1fr 70px"],
    div[style*="grid-template-columns:120px 60px 1fr 70px"] {
        grid-template-columns: 1fr !important;
        gap: 0.15rem !important;
    }

    /* Exercise/supplement grids */
    div[style*="grid-template-columns: 1fr 60px 80px 100px"] {
        grid-template-columns: 1fr !important;
        gap: 0.15rem !important;
    }
    div[style*="grid-template-columns: 1fr 150px"] {
        grid-template-columns: 1fr !important;
    }

    /* Checkin 3-col */
    div[style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Consensi 2-col */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }


    /* =====================================================
       ADMIN - PAZIENTE.PHP
       ===================================================== */

    /* Password field */
    input#pwd-display {
        width: 120px !important;
        font-size: 0.8rem !important;
    }

    /* Forms con flex inline */
    form[style*="display:flex"][style*="min-width:250px"] {
        min-width: 0 !important;
        flex-direction: column !important;
    }

    /* AI loading overlay */
    #ai-loading-overlay > div {
        padding: 1.5rem 1rem !important;
    }

    /* Review modal */
    .modal[style*="max-width: 900px"],
    .modal[style*="max-width:900px"],
    .modal[style*="max-width: 800px"],
    .modal[style*="max-width:800px"],
    .modal[style*="max-width: 700px"],
    .modal[style*="max-width:700px"] {
        max-width: 95vw !important;
        width: 95vw !important;
    }


    /* =====================================================
       ADMIN - LEADS.PHP
       ===================================================== */

    /* Filter bar */
    div[style*="display:flex"][style*="gap:0.5rem"] {
        flex-wrap: wrap !important;
    }

    /* Tab-like nav */
    div[style*="display:flex"][style*="border-bottom:2px solid"] {
        flex-wrap: wrap !important;
    }

    /* Edit modal card */
    .card[style*="max-width:400px"][style*="margin:15vh auto"] {
        max-width: 95vw !important;
        margin: 5vh auto !important;
    }


    /* =====================================================
       ADMIN - IMPOSTAZIONI.PHP
       ===================================================== */

    /* Radio label groups */
    div[style*="display: flex"][style*="gap: 1rem"] {
        flex-wrap: wrap !important;
    }
    div[style*="display:flex"][style*="gap:1rem"] {
        flex-wrap: wrap !important;
    }
    label[style*="padding: 0.8rem 1.2rem"],
    label[style*="padding:0.8rem 1.2rem"],
    label[style*="padding: 0.6rem 1rem"],
    label[style*="padding:0.6rem 1rem"] {
        flex: 1 1 100% !important;
    }


    /* =====================================================
       ADMIN - ALIMENTI.PHP (già parziale, rinforzo)
       ===================================================== */

    .alimenti-toolbar {
        flex-direction: column !important;
    }
    .alimenti-search-group {
        width: 100% !important;
    }
    .alimenti-actions {
        width: 100% !important;
        justify-content: stretch;
    }
    .alimenti-actions .btn {
        flex: 1;
        justify-content: center;
    }
    .search-box {
        min-width: 0 !important;
    }
    .col-name {
        min-width: 120px !important;
    }
    .alimenti-table {
        font-size: 0.75rem !important;
    }
    .alimenti-table th,
    .alimenti-table td {
        padding: 0.35rem 0.3rem !important;
    }


    /* =====================================================
       ADMIN - GENERA-DIETA.PHP
       ===================================================== */

    /* Checkbox grids */
    .form-check[style*="width:auto"] {
        width: 100% !important;
    }


    /* =====================================================
       ADMIN - PAZIENTI.PHP
       ===================================================== */

    input[style*="width: 250px"] {
        width: 100% !important;
    }


    /* =====================================================
       ADMIN - PROFILO.PHP
       ===================================================== */

    .form-group[style*="max-width:150px"] {
        max-width: 100% !important;
    }
    img[style*="max-width:300px"] {
        max-width: 100% !important;
    }


    /* =====================================================
       ADMIN - RECENSIONI.PHP
       ===================================================== */

    td[style*="max-width: 300px"] {
        max-width: 150px !important;
        word-break: break-word;
    }


    /* =====================================================
       PATIENT - PIANO.PHP (già parziale, rinforzo)
       ===================================================== */

    .piano-doc {
        margin: 0.5rem !important;
        border-radius: 10px !important;
    }
    .piano-header {
        padding: 1rem !important;
    }
    .piano-logo {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.3rem !important;
    }
    .piano-site {
        font-size: 1.3rem !important;
    }
    .piano-exercises {
        padding: 1rem !important;
    }
    .piano-exercises-grid {
        grid-template-columns: 1fr !important;
    }


    /* =====================================================
       PATIENT - CHECKIN.PHP
       ===================================================== */

    /* Le tabelle e forms usano classi globali, già gestite */


    /* =====================================================
       SIDEBAR SUBMENU su mobile
       ===================================================== */

    /* Il submenu usa display:contents per "esplodere" nel flusso della barra.
       Dieta Manuale è la voce toggle, le sotto-voci appaiono inline come pill
       solo quando .open è attivo. Questo evita il problema di overflow. */
    .sidebar-submenu {
        display: contents !important;
    }
    .sidebar-submenu-toggle {
        white-space: nowrap;
    }
    /* Freccia che indica espansione */
    .sidebar-arrow {
        font-size: 0.55rem !important;
        margin-left: 0.3rem !important;
        transition: transform 0.25s ease;
    }
    .sidebar-submenu.open > .sidebar-submenu-toggle .sidebar-arrow {
        transform: rotate(180deg);
    }
    /* Sotto-voci: nascoste di default */
    .sidebar-submenu-items {
        display: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* Quando aperto: le sotto-voci appaiono inline nella barra orizzontale */
    .sidebar-submenu.open > .sidebar-submenu-items {
        display: contents !important;
    }
    .sidebar-submenu-items li {
        flex-shrink: 0 !important;
    }
    .sidebar-submenu-items li a {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        border-radius: 20px !important;
        background: var(--bg, #f0f3ed) !important;
        border: 1px dashed var(--border, #c5d0be) !important;
    }
    .sidebar-submenu-items li a.active {
        background: var(--primary, #4a7c59) !important;
        color: #fff !important;
        border-color: var(--primary, #4a7c59) !important;
        border-style: solid !important;
    }


    /* =====================================================
       GLOBAL — LAYOUT & OVERFLOW (CRITICO per mobile)
       ===================================================== */

    /* Corpo pagina: nessun overflow orizzontale */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Layout sidebar: deve stare in 100vw, mai espandersi */
    .layout-sidebar {
        display: flex !important;
        flex-direction: column !important;
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: hidden !important;
        min-height: auto !important;
    }

    /* Sidebar: contenuta rigidamente */
    .sidebar {
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* Sidebar menu: la scroll-bar orizzontale è gestita dalla sidebar */
    .sidebar-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        scrollbar-width: none;
    }
    .sidebar-menu::-webkit-scrollbar {
        display: none;
    }
    .sidebar-menu li {
        flex-shrink: 0 !important;
    }

    /* Content area: contenuta, scroll interno */
    .content-area,
    .layout-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.75rem !important;
        min-width: 0 !important;
    }

    /* Tabelle sempre scrollabili */
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }

    /* Alimenti table wrap */
    .alimenti-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }

    /* Details/summary nelle pagine diete */
    details[style*="border:1px solid"] {
        overflow-x: auto;
        max-width: 100%;
    }
    details[style*="border:1px solid"] summary {
        font-size: 0.85rem;
    }

    /* Max-height per contenuti scrollabili */
    div[style*="max-height:300px"] {
        max-height: 200px !important;
    }

    /* Tutti i form-row inline → colonna (forza flex stack) */
    .form-row,
    .form-row-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Input/select/textarea: contenuti nel contenitore, mai overflow */
    .form-control,
    input.form-control,
    select.form-control,
    textarea.form-control {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Input date/datetime: hanno min-width intrinseco nei browser, forzare contenimento */
    input[type="date"].form-control,
    input[type="datetime-local"].form-control,
    input[type="time"].form-control {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        -webkit-appearance: none !important;
    }

    /* Pulsanti nei content-header */
    .content-header .btn {
        font-size: 0.78rem !important;
        padding: 0.3rem 0.7rem !important;
    }

    /* Badge nel sidebar su mobile */
    .sidebar-menu .badge {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.35rem !important;
        margin-left: 0.2rem !important;
    }

    /* Qualsiasi elemento con larghezza fissa che esce dallo schermo */
    img, video, iframe, table, pre, code {
        max-width: 100% !important;
    }
}


/* =====================================================
   SMALL MOBILE (max 380px) — iPhone SE, Galaxy S etc
   ===================================================== */
@media (max-width: 380px) {

    /* Builder ancora più compatto */
    .builder-topbar-left h2 {
        font-size: 0.75rem !important;
    }
    .builder-food-panel .food-list {
        max-height: 150px;
    }
    .macro-target {
        flex: 1 1 100% !important;
    }
    .meal-item-name {
        font-size: 0.72rem !important;
    }
    .food-item-name {
        font-size: 0.7rem !important;
    }

    /* Day tabs più compatti */
    .day-tab {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.68rem !important;
    }

    /* Stat grids 4 → 2 ma più piccoli */
    div[style*="grid-template-columns: repeat(4"] {
        gap: 0.3rem !important;
    }

    /* Piano paziente */
    .piano-nutrition-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        padding: 0.8rem !important;
    }
    .piano-nut-value {
        font-size: 1.2rem !important;
    }
}


/* =====================================================
   LANDSCAPE MOBILE (larghezza > 768px ma altezza piccola)
   Copre telefoni ruotati in orizzontale: 812x375, 926x428 ecc.
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* Corpo pagina: nessun overflow orizzontale */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Layout: sidebar + contenuto in colonna (come portrait mobile) */
    .layout-sidebar {
        display: flex !important;
        flex-direction: column !important;
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: hidden !important;
        min-height: auto !important;
    }

    /* Sidebar: diventa barra orizzontale */
    .sidebar {
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border, #e2e8df) !important;
        padding: 0.4rem 0.6rem !important;
    }
    .sidebar h4 {
        display: none !important;
    }
    .sidebar-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        gap: 0.2rem !important;
        scrollbar-width: none;
    }
    .sidebar-menu::-webkit-scrollbar {
        display: none;
    }
    .sidebar-menu li {
        flex-shrink: 0 !important;
    }
    .sidebar-menu a {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        border-radius: 20px !important;
        background: var(--bg, #f8f9f7) !important;
        gap: 0.3rem !important;
    }
    .sidebar-menu a.active {
        background: var(--primary, #4a7c59) !important;
        color: #fff !important;
    }
    .sidebar-menu a i {
        font-size: 0.7rem !important;
        width: auto !important;
    }

    /* Submenu inline (come portrait) */
    .sidebar-submenu {
        display: contents !important;
    }
    .sidebar-arrow {
        font-size: 0.55rem !important;
        margin-left: 0.3rem !important;
    }
    .sidebar-submenu-items {
        display: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .sidebar-submenu.open > .sidebar-submenu-items {
        display: contents !important;
    }
    .sidebar-submenu-items li a {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        border-radius: 20px !important;
        background: var(--bg, #f0f3ed) !important;
        border: 1px dashed var(--border, #c5d0be) !important;
    }
    .sidebar-submenu-items li a.active {
        background: var(--primary, #4a7c59) !important;
        color: #fff !important;
        border-color: var(--primary, #4a7c59) !important;
        border-style: solid !important;
    }

    /* Content area: a tutta larghezza */
    .content-area,
    .layout-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.75rem !important;
        min-width: 0 !important;
    }

    /* Tabelle scrollabili */
    .table-wrap,
    .alimenti-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }

    /* Qualsiasi elemento con larghezza fissa */
    img, video, iframe, table, pre, code {
        max-width: 100% !important;
    }

    /* Grids inline troppo larghi */
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    div[style*="grid-template-columns: 120px 60px 1fr 70px"],
    div[style*="grid-template-columns:120px 60px 1fr 70px"] {
        grid-template-columns: 1fr !important;
    }

    /* Modali */
    .modal {
        max-width: 95vw !important;
        width: 95vw !important;
        max-height: 90vh !important;
    }

    /* Badge sidebar */
    .sidebar-menu .badge {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.3rem !important;
        margin-left: 0.2rem !important;
    }

    /* Dieta manuale builder */
    .builder-main {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }
    .builder-food-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 200px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border, #e2e8df);
    }
    .builder-plan-panel {
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    .builder-topbar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Form-row stack + input overflow fix (landscape) */
    .form-row,
    .form-row-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .form-control,
    input.form-control,
    select.form-control,
    textarea.form-control {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Input date: contenimento forzato (landscape) */
    input[type="date"].form-control,
    input[type="datetime-local"].form-control,
    input[type="time"].form-control {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        -webkit-appearance: none !important;
    }
}