/* ============================================
   RESPONSIVE — INFO TAB + FLUID SCALING
   ⚠️ CARICARE PER ULTIMO (dopo main, clienti,
      diete, shopping-list css)
   Range: 4K → tablet (~768px)
   ============================================ */

/* ────────────────────────────────────────────
   1. FLUID BASE — .container, .header, .section
   ──────────────────────────────────────────── */

.container {
    max-width: 98vw;
    margin: 0 auto;
    padding: clamp(10px, 1.5vw, 30px);
    min-width: 375px;
}

.header {
    padding: clamp(16px, 2.5vw, 50px);
    border-radius: clamp(12px, 1.5vw, 24px);
    margin-bottom: clamp(16px, 2vw, 36px);
    min-width: 375px;
}

.header h1 {
    font-size: clamp(1.5em, 2vw + 0.5em, 3.2em);
}

.header p {
    font-size: clamp(0.9em, 0.8vw + 0.5em, 1.3em);
}

.section {
    padding: clamp(16px, 2.5vw, 40px);
    border-radius: clamp(12px, 1.5vw, 24px);
    min-width: 0;
}

.section h2 {
    font-size: clamp(1.3em, 1.2vw + 0.5em, 2em);
    margin-bottom: clamp(16px, 1.5vw, 28px);
    min-width: 375px;
}

.main-content {
    gap: clamp(16px, 2vw, 36px);
    min-width: 375px;
}

/* Wrapper esterno */
#client-detail-section {
    border-radius: clamp(12px, 1.5vw, 24px);
}

#client-detail-section,
#client-detail-section .section {
    width: 100%;
}


/* ────────────────────────────────────────────
   2. OVERFLOW PREVENTION — catena completa
   ──────────────────────────────────────────── */

#client-detail-section,
#client-detail.main-content,
#client-detail.main-content > .section,
.tab-content,
.client-detail-grid,
.info-column,
.kcal-column,
.shopping-column,
.diet-column {
    min-width: 0;
    overflow: hidden;
}

/* Contenuti interni che potrebbero sfondare */
.client-detail-grid .calorie-ranges-section,
.client-detail-grid .kcal-section,
.client-detail-grid .diet-section,
.client-detail-grid .shopping-list-section,
.client-detail-grid .client-detail-card {
    min-width: 0;
    overflow-x: auto;
}


/* ────────────────────────────────────────────
   3. CLIENT-DETAIL-GRID — Layout principale
   Default (≥1400px): 3 colonne + diet 2/3 sotto
   ──────────────────────────────────────────── */

.client-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: clamp(16px, 1.8vw, 32px);
    min-width: 0;
}

.info-column     { grid-column: 1; grid-row: 1; }
.kcal-column     { grid-column: 2; grid-row: 1; }
.weight-history-column { grid-column: 2; grid-row: 1; }

.shopping-column {
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: start;
}


.diet-column {
    grid-column: 1 / 4;
    grid-row: 3;
}


#info-tab .client-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: stretch;
}

#info-tab .info-column,
#info-tab .weight-history-column,
#info-tab .notes-column {
    display: contents;
}

#info-tab #client-info-detail,
#info-tab #app-mobile-card,
#info-tab .weight-history-section,
#info-tab .weight-section,
#info-tab .client-notes-section,
#info-tab #analytics-recap-card {
    width: 100%;
    box-shadow: 0 4px 10px var(--shadow-sm);
    min-width: 0;
}

#info-tab #client-info-detail {
    box-shadow: none;
}

#info-tab #client-info-detail > .client-detail-card,
#info-tab #app-mobile-card,
#info-tab .weight-history-section,
#info-tab .weight-section,
#info-tab .client-notes-section,
#info-tab #analytics-recap-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface-card);
    border: 1px solid var(--border-medium);
    border-radius: 15px;
    padding: clamp(16px, 1.5vw, 28px);
    box-shadow: 0 4px 10px var(--shadow-sm);
    color: var(--text-primary);
    overflow: hidden;
}

#info-tab .client-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    min-width: 0;
}

#info-tab .client-detail-title {
    margin: 0;
    color: var(--text-heading);
    font-size: clamp(16px, 1vw, 22px);
    line-height: 1.2;
    padding-top: 2px;
}

#info-tab .client-detail-header .btn,
#info-tab .client-detail-header .info-card-status-badge {
    margin-top: 0;
}

#info-tab .client-detail-body {
    min-width: 0;
    flex: 1;
}

#info-tab .info-card-status-badge {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--bg-surface-raised);
    color: var(--text-secondary);
}

#info-tab #client-info-detail { grid-column: 1; grid-row: 1; }
#info-tab #app-mobile-card { grid-column: 1; grid-row: 2; margin-top: 0 !important; }
#info-tab .weight-history-section { grid-column: 2; grid-row: 1; }
#info-tab .client-notes-section { grid-column: 2; grid-row: 2; }
#info-tab .weight-section { grid-column: 3; grid-row: 1; }
#info-tab #analytics-recap-card { grid-column: 3; grid-row: 2; margin-top: 0; }

#info-tab #client-info-detail > .client-detail-card,
#info-tab #app-mobile-card,
#info-tab .weight-history-section,
#info-tab .weight-section,
#info-tab .client-notes-section,
#info-tab #analytics-recap-card {
    height: 100%;
}

#info-tab {
    --info-top-card-min-height: 470px;
    --info-bottom-card-min-height: 210px;
}

#info-tab #client-info-detail > .client-detail-card,
#info-tab .weight-history-section,
#info-tab .weight-section {
    min-height: var(--info-top-card-min-height);
}

#info-tab #app-mobile-card,
#info-tab .client-notes-section,
#info-tab #analytics-recap-card {
    min-height: var(--info-bottom-card-min-height);
}

#info-tab .weight-card-body #weight-display-mode:not(.hidden) {
    min-height: 0;
}

#info-tab .weight-card-body .weight-grid {
    margin-top: clamp(6px, 1vw, 14px);
}

#info-tab .minor-percentile-hint {
    display: grid;
    gap: 5px;
    margin: clamp(14px, 1.4vw, 22px) auto 0;
    max-width: 420px;
    padding: 12px 14px;
    border: 1px solid var(--success-border);
    border-radius: 14px;
    background: var(--success-bg-light);
    color: var(--text-secondary);
    text-align: left;
    line-height: 1.35;
}

#info-tab .minor-percentile-hint.hidden {
    display: none;
}

#info-tab .minor-percentile-hint strong {
    color: var(--success-text);
}

#info-tab .weight-history-empty {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px;
    border: 1px dashed var(--border-medium);
    border-radius: 16px;
    background: var(--bg-surface-raised);
    color: var(--text-secondary);
    text-align: left;
}

#info-tab .weight-history-empty__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--success-bg-light);
    color: var(--success-text);
    font-size: 1.35em;
}

#info-tab .weight-history-empty strong {
    display: block;
    color: var(--text-heading);
    font-size: 1.05em;
    margin-bottom: 4px;
}

#info-tab .weight-history-empty p {
    margin: 0;
    line-height: 1.45;
}

#info-tab #app-mobile-card .client-detail-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#info-tab .app-mobile-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#info-tab .app-mobile-stat {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    background: var(--bg-surface-raised);
}

#info-tab .app-mobile-stat span,
#info-tab .app-mobile-action span,
#info-tab .app-mobile-action time,
#info-tab .app-mobile-empty {
    color: var(--text-secondary);
    font-size: 0.82em;
}

#info-tab .app-mobile-stat strong {
    display: block;
    margin-top: 4px;
    color: var(--text-heading);
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#info-tab .app-mobile-activity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 0;
}

#info-tab .app-mobile-activity__title {
    grid-column: 1 / -1;
    color: var(--text-heading);
    font-size: 0.8em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#info-tab .app-mobile-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-light);
}

#info-tab .app-mobile-action strong,
#info-tab .app-mobile-action span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#info-tab .app-mobile-action strong {
    color: var(--text-primary);
    font-size: 0.86em;
}

#info-tab .app-mobile-action time {
    white-space: nowrap;
}

#info-tab .app-mobile-empty {
    grid-column: 1 / -1;
    padding: 12px;
    border: 1px dashed var(--border-medium);
    border-radius: 12px;
    background: var(--bg-surface-raised);
    text-align: center;
}

#info-tab #btn-invite-app {
    margin-top: auto;
}

#info-tab #analytics-recap-card .client-detail-header {
    align-items: center;
}

#info-tab #analytics-recap-card .client-detail-edit-btn {
    border-radius: 14px;
    padding: 10px 16px;
}

#info-tab .analytics-recap-card__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

#info-tab .analytics-recap-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 118px;
    padding: 16px;
    border: 1px solid var(--border-medium);
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 10%, var(--success-bg) 0, transparent 32%),
        var(--bg-surface-raised);
}

#info-tab .analytics-recap-hero::before {
    content: "";
    position: absolute;
    inset: auto 18px 14px 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--border-medium);
}

#info-tab .analytics-recap-hero::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 14px;
    width: 54%;
    height: 2px;
    border-radius: 999px;
    background: var(--gradient-app);
}

#info-tab .analytics-recap-trend--gain {
    background:
        radial-gradient(circle at 90% 10%, var(--warning-bg) 0, transparent 32%),
        var(--bg-surface-raised);
}

#info-tab .analytics-recap-trend--neutral {
    background:
        radial-gradient(circle at 90% 10%, var(--info-bg) 0, transparent 32%),
        var(--bg-surface-raised);
}

#info-tab .analytics-recap-kicker,
#info-tab .analytics-recap-metric span,
#info-tab .analytics-recap-metric small,
#info-tab .analytics-recap-empty span,
#info-tab .analytics-recap-hero small {
    color: var(--text-secondary);
}

#info-tab .analytics-recap-kicker {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#info-tab .analytics-recap-hero strong {
    display: block;
    color: var(--text-heading);
    font-size: clamp(1.1em, 1.1vw, 1.45em);
    line-height: 1.15;
}

#info-tab .analytics-recap-hero small {
    display: block;
    margin-top: 7px;
    font-size: 0.82em;
}

#info-tab .analytics-recap-orb {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    border: 1px solid var(--success-border);
    background: var(--success-bg-light);
    color: var(--success-text);
    box-shadow: inset 0 0 0 6px var(--bg-surface-card);
}

#info-tab .analytics-recap-trend--gain .analytics-recap-orb {
    border-color: var(--warning-border);
    background: var(--warning-bg-light);
    color: var(--warning-text);
}

#info-tab .analytics-recap-trend--neutral .analytics-recap-orb {
    border-color: var(--info-border);
    background: var(--info-bg-light);
    color: var(--info-text);
}

#info-tab .analytics-recap-orb span {
    font-size: 1.25em;
    font-weight: 900;
    line-height: 1;
}

#info-tab .analytics-recap-orb small {
    font-size: 0.7em;
    font-weight: 800;
}

#info-tab .analytics-recap-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#info-tab .analytics-recap-metric {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border-medium);
    border-radius: 15px;
    background: var(--bg-surface-raised);
}

#info-tab .analytics-recap-metric span,
#info-tab .analytics-recap-metric small {
    display: block;
    font-size: 0.76em;
}

#info-tab .analytics-recap-metric strong {
    display: block;
    margin: 4px 0 2px;
    color: var(--text-heading);
    font-size: 1.6em;
    line-height: 1;
}

#info-tab .analytics-recap-link {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    padding: 10px 12px;
    background: var(--bg-surface-raised);
    color: var(--text-heading);
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

#info-tab .analytics-recap-link:hover {
    border-color: var(--success-border);
    transform: translateY(-1px);
}

#info-tab .analytics-recap-empty {
    min-height: 150px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px dashed var(--border-medium);
    border-radius: 18px;
    background: var(--bg-surface-raised);
    text-align: center;
}

#info-tab .analytics-recap-empty__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--info-bg-light);
}

#info-tab .analytics-recap-empty strong {
    color: var(--text-heading);
}

/* === Homepage dashboard shell experiment === */
body.home-shell-active .container {
    width: 100%;
    max-width: 100vw;
    padding: clamp(6px, 0.8vw, 14px);
}

body.home-shell-active .header {
    margin-bottom: 16px;
    padding: 16px clamp(18px, 1.6vw, 30px);
    border-radius: 20px;
}

body.home-shell-active #homepage {
    display: grid;
    grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    min-width: 0;
    min-height: calc(100vh - 170px);
    overflow: hidden;
    border: 1px solid var(--border-medium);
    border-radius: 26px;
    background: var(--bg-surface-card);
    box-shadow: 0 22px 48px var(--shadow-md);
}

body.home-shell-active .action-section {
    display: block;
    margin: 0;
    padding: 26px 14px;
    border-radius: 0;
    border-right: 1px solid var(--border-medium);
    box-shadow: none;
    background: var(--bg-surface);
    color: var(--text-primary);
    backdrop-filter: none;
}

body.home-shell-active .home-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 22px;
    color: var(--text-heading);
}

body.home-shell-active .home-sidebar-logo {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

body.home-shell-active .home-sidebar-brand strong,
body.home-shell-active .home-sidebar-brand span {
    display: block;
}

body.home-shell-active .home-sidebar-brand span {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

body.home-shell-active .home-sidebar-title {
    margin: 0 10px 12px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

body.home-shell-active .home-actions-legacy-title {
    display: none;
}

body.home-shell-active .actions-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
}

body.home-shell-active .actions-grid .btn {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: none;
    background: transparent;
    color: var(--text-secondary);
    text-align: left;
}

body.home-shell-active .actions-grid .btn:hover {
    transform: translateX(3px);
    background: var(--bg-surface-raised);
    color: var(--text-heading);
}

body.home-shell-active .actions-grid .btn[onclick="showNewClientForm()"] {
    margin: 10px 0 6px;
    color: var(--text-stable-white);
}

body.home-shell-active .home-dashboard-main {
    min-width: 0;
    margin: 0;
    padding: clamp(22px, 2vw, 32px);
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-surface);
}

body.home-shell-active .home-dashboard-main h2 {
    min-width: 0;
}

body.home-shell-active .home-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

body.home-shell-active .home-dashboard-kicker {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.home-shell-active .home-dashboard-title {
    margin: 0;
    color: var(--text-heading);
    font-size: clamp(1.45rem, 1.5vw, 2rem);
}

body.home-shell-active .home-dashboard-subtitle {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-weight: 600;
}

body.home-shell-active .home-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}


body.home-shell-active .home-new-client-btn {
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    padding: 11px 16px;
    font-weight: 800;
    cursor: pointer;
}



body.home-shell-active .home-new-client-btn {
    border: none;
    background: var(--gradient-app);
    color: var(--text-stable-white);
}

body.home-shell-active .home-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

body.home-shell-active .home-kpi-card {
    min-height: 110px;
    padding: 18px;
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    background: var(--bg-surface-raised);
    box-shadow: 0 12px 24px var(--shadow-sm);
}

body.home-shell-active .home-kpi-card span,
body.home-shell-active .home-kpi-card small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.home-shell-active .home-kpi-card strong {
    display: block;
    margin: 12px 0 6px;
    color: var(--text-heading);
    font-size: clamp(1.9rem, 2vw, 2.5rem);
    line-height: 1;
}

body.home-shell-active .home-kpi-card--accent strong {
    color: var(--gradient-app-start);
}

body.home-shell-active .home-kpi-card--success strong {
    color: var(--success);
}

body.home-shell-active .home-kpi-card--warning strong {
    color: var(--warning);
}

body.home-shell-active #recent-clients {
    min-width: 0;
}

body.home-shell-active .home-dashboard-main > h2 {
    display: none;
}

body.home-shell-active .home-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 16px;
    align-items: start;
}

body.home-shell-active .home-dashboard-panel {
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-medium);
    border-radius: 18px;
    box-shadow: 0 12px 24px var(--shadow-sm);
    padding: 20px;
    min-width: 0;
}

body.home-shell-active .home-dashboard-panel__header {
    
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

body.home-shell-active .home-dashboard-panel__eyebrow {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.home-shell-active .home-dashboard-panel__title {
    margin: 0;
    color: var(--text-heading);
    font-size: 1.1rem;
}

body.home-shell-active .home-dashboard-panel__link {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

body.home-shell-active .home-dashboard-panel__link:hover {
    color: var(--text-primary);
}

body.home-shell-active .home-clients-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.home-shell-active .home-client-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--border-medium);
    background: var(--bg-surface);
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body.home-shell-active .home-client-row:hover {
    transform: translateY(-1px);
    border-color: var(--gradient-app-start);
    box-shadow: var(--shadow-md);
}

body.home-shell-active .home-client-row__identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

body.home-shell-active .home-client-row__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

body.home-shell-active .home-client-row__main {
    min-width: 0;
    display: grid;
    gap: 6px;
}

body.home-shell-active .home-client-row__name-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

body.home-shell-active .home-client-row__name-line h3 {
    margin: 0;
    color: var(--text-heading);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.home-shell-active .home-client-row__module-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

body.home-shell-active .home-client-row__module-summary {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

body.home-shell-active .home-client-row__module-wrap {
    margin-left: auto;
    flex-shrink: 0;
    align-self: start;
}

body.home-shell-active .home-client-row__manage-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-medium);
    background: var(--bg-surface-raised);
}

body.home-shell-active .home-client-row__meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 20px;
}

body.home-shell-active .home-client-row__meta-label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

body.home-shell-active .home-client-row__meta-value {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

body.home-shell-active .home-client-row__status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.home-shell-active .home-client-status {
    min-width: 0;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid var(--border-medium);
    background: var(--bg-surface-raised);
}

body.home-shell-active .home-client-status--active {
    border-color: color-mix(in srgb, var(--gradient-app-start) 35%, var(--border-medium));
}

body.home-shell-active .home-client-status--active[role="button"],
body.home-shell-active .home-client-status--danger[role="button"] {
    cursor: pointer;
}

body.home-shell-active .home-client-status--danger {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

body.home-shell-active .home-client-status--idle,
body.home-shell-active .home-client-status--muted {
    opacity: 0.9;
}

body.home-shell-active .home-client-status__label,
body.home-shell-active .home-client-status__state,
body.home-shell-active .home-client-status__meta {
    display: block;
}

body.home-shell-active .home-client-status__label {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

body.home-shell-active .home-client-status__state {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 4px;
}

body.home-shell-active .home-client-status__meta {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.home-shell-active .home-chat-unread-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gradient-app);
    color: var(--text-stable-white);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
}

body.home-shell-active .home-expirations-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.home-shell-active .home-expirations-filter__btn {
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    padding: 7px 11px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

body.home-shell-active .home-expirations-filter__btn.active,
body.home-shell-active .home-expirations-filter__btn:hover {
    background: var(--gradient-app);
    border-color: transparent;
    color: var(--text-stable-white);
}

body.home-shell-active .home-expiration-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-medium);
}

body.home-shell-active .home-expiration-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

body.home-shell-active .home-expiration-item:first-child {
    padding-top: 0;
}

body.home-shell-active .home-expiration-item__body {
    min-width: 0;
}

body.home-shell-active .home-expiration-item__client {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--text-heading);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

body.home-shell-active .home-expiration-item__client:hover {
    color: var(--gradient-app-start);
}

body.home-shell-active .home-expiration-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

body.home-shell-active .home-expiration-item__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

body.home-shell-active .home-expiration-item__type--nutrition {
    background: rgba(124, 58, 237, 0.12);
    color: var(--gradient-app-start);
}

body.home-shell-active .home-expiration-item__type--training {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

body.home-shell-active .home-expiration-item__title,
body.home-shell-active .home-expiration-item__deadline {
    color: var(--text-secondary);
    font-size: 0.84rem;
}

body.home-shell-active .home-expiration-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.home-shell-active .home-expiration-item__action {
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

body.home-shell-active .home-expiration-item__action--primary {
    background: var(--gradient-app);
    border-color: transparent;
    color: var(--text-stable-white);
}

body.home-shell-active .home-expiration-item__action:disabled {
    opacity: 0.7;
    cursor: default;
}

body.home-shell-active .clients-view-all {
    margin-top: 18px;
    text-align: right;
}

@media (max-width: 1180px) {
    body.home-shell-active #homepage {
        grid-template-columns: 1fr;
    }

    body.home-shell-active .home-overview-grid {
        grid-template-columns: 1fr;
    }

    body.home-shell-active .action-section {
        border-right: none;
        border-bottom: 1px solid var(--border-medium);
    }

    body.home-shell-active .actions-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.home-shell-active .actions-grid .btn[onclick="showNewClientForm()"] {
        margin: 0;
    }
}

@media (max-width: 820px) {
    body.home-shell-active .home-dashboard-header {
        flex-direction: column;
    }

    body.home-shell-active .home-client-row {
        grid-template-columns: 1fr;
    }

    body.home-shell-active .home-dashboard-actions,
    body.home-shell-active .home-new-client-btn {
        width: 100%;
    }

    body.home-shell-active .home-dashboard-actions {
        justify-content: stretch;
    }

    body.home-shell-active .home-kpi-grid {
        grid-template-columns: 1fr;
    }

    body.home-shell-active .home-client-row__status-grid,
    body.home-shell-active .home-expiration-item {
        grid-template-columns: 1fr;
    }

    body.home-shell-active .home-expiration-item__actions {
        justify-content: flex-start;
    }

    body.home-shell-active .actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    body.home-shell-active #homepage {
        border-radius: 18px;
    }

    body.home-shell-active .actions-grid {
        grid-template-columns: 1fr;
    }
}

#info-tab .client-notes-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#info-tab .client-note-focus {
    display: grid;
    gap: 6px;
}

#info-tab .client-note-focus label,
#info-tab .client-note-tool > span,
#info-tab .client-note-history__title {
    color: var(--text-heading);
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#info-tab .client-note-focus__input {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    font-size: 0.9em;
}

#info-tab .client-note-focus__input:focus {
    outline: none;
    border-color: var(--success-border);
    box-shadow: 0 0 0 3px var(--success-hover);
}

#info-tab .client-note-tools {
    display: grid;
    gap: 10px;
}

#info-tab .client-note-tool {
    display: grid;
    gap: 7px;
}

#info-tab .client-note-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#info-tab .client-note-chip {
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--bg-surface-raised);
    color: var(--text-secondary);
    font-size: 0.76em;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#info-tab .client-note-chip:hover {
    transform: translateY(-1px);
    border-color: var(--success-border);
}

#info-tab .client-note-chip.active {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

#info-tab .client-note-chip--ghost {
    color: var(--text-heading);
}

#info-tab .client-notes-textarea {
    min-height: 120px;
}

#info-tab .client-note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#info-tab .client-note-updated-at {
    color: var(--text-secondary);
    font-size: 0.72em;
    text-align: right;
}

#info-tab .client-note-history {
    display: grid;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-medium);
}

#info-tab .client-note-history__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#info-tab .client-note-history__item,
#info-tab .client-note-history__empty {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    background: var(--bg-surface-raised);
}

#info-tab .client-note-history__item time,
#info-tab .client-note-history__item span,
#info-tab .client-note-history__empty {
    color: var(--text-secondary);
    font-size: 0.72em;
}

#info-tab .client-note-history__item strong,
#info-tab .client-note-history__item span,
#info-tab .client-note-history__item time {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#info-tab .client-note-history__item strong {
    margin: 4px 0 3px;
    color: var(--text-primary);
    font-size: 0.8em;
}

#info-tab .client-note-history__empty {
    grid-column: 1 / -1;
    text-align: center;
}

#info-tab .adult-bmi-insights {
    display: grid;
    gap: 14px;
    margin-top: clamp(18px, 2vw, 28px);
    padding-top: clamp(14px, 1.5vw, 22px);
    border-top: 1px solid var(--border-medium);
}

#info-tab .adult-bmi-insights.hidden {
    display: none;
}

#info-tab .adult-bmi-gauge {
    padding: 14px;
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    background: var(--bg-surface-raised);
}

#info-tab .adult-bmi-gauge__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#info-tab .adult-bmi-gauge__head span,
#info-tab .adult-bmi-insight span,
#info-tab .adult-bmi-insight small,
#info-tab .adult-bmi-empty {
    color: var(--text-secondary);
    font-size: 0.82em;
}

#info-tab .adult-bmi-gauge__head strong {
    color: var(--text-heading);
}

#info-tab .adult-bmi-gauge__bar {
    position: relative;
    display: grid;
    grid-template-columns: 25fr 25fr 25fr 25fr;
    gap: 3px;
    height: 12px;
    border-radius: 999px;
}

#info-tab .adult-bmi-gauge__segment {
    min-width: 0;
    border-radius: 999px;
}

#info-tab .adult-bmi-gauge__segment--under { background: var(--info); }
#info-tab .adult-bmi-gauge__segment--normal { background: var(--success); }
#info-tab .adult-bmi-gauge__segment--over { background: var(--warning); }
#info-tab .adult-bmi-gauge__segment--obese { background: var(--danger); }

#info-tab .adult-bmi-gauge__marker {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 3px solid var(--text-stable-white);
    border-radius: 50%;
    background: var(--text-heading);
    box-shadow: 0 3px 10px var(--shadow-md);
    transform: translate(-50%, -50%);
}

#info-tab .adult-bmi-gauge__labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.72em;
}

#info-tab .adult-bmi-gauge__labels span:nth-child(1) { text-align: left; }
#info-tab .adult-bmi-gauge__labels span:nth-child(2) { text-align: center; }
#info-tab .adult-bmi-gauge__labels span:nth-child(3) { text-align: right; }

#info-tab .adult-bmi-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#info-tab .adult-bmi-insight {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    background: var(--bg-surface-raised);
}

#info-tab .adult-bmi-insight strong,
#info-tab .adult-bmi-insight small {
    display: block;
}

#info-tab .adult-bmi-insight strong {
    margin-top: 5px;
    color: var(--text-heading);
    font-size: 0.9em;
    line-height: 1.25;
}

#info-tab .adult-bmi-insight small {
    margin-top: 4px;
}

#info-tab .adult-bmi-empty {
    padding: 12px;
    border: 1px dashed var(--border-medium);
    border-radius: 14px;
    background: var(--bg-surface-raised);
    text-align: center;
}

#diet-tab .client-detail-grid {
    grid-template-columns: minmax(300px, 2fr) minmax(380px, 3fr);
    align-items: start;
}

#diet-tab .kcal-column {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

#diet-tab .diet-column {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

/* ────────────────────────────────────────────
   4. COMPONENTI — Override con specificità alta
   .client-detail-grid come ancestor per vincere
   su clienti.css / diete.css / shopping-list.css
   ──────────────────────────────────────────── */

/* --- Activity Selector --- */
#kcal-content {
    min-width: 0;
}

#kcal-content .energy-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px clamp(16px, 1.8vw, 24px);
    align-items: end;
    margin-bottom: 20px;
    min-width: 0;
}

#kcal-content .energy-control-field {
    min-width: 0;
}

#kcal-content .label-strong {
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.client-detail-grid .activity-selector {
    margin-bottom: clamp(16px, 1.5vw, 28px);
    min-width: 0;
}

.client-detail-grid .activity-selector select,
.client-detail-grid .activity-selector input {
    width: 100%;
    max-width: none;
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
}

/* --- Energy Cards (BMR / TDEE) ---
   clienti.css: padding 25px, font-size 42px → override */
.client-detail-grid .energy-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 1vw, 20px);
    margin-bottom: clamp(16px, 1.5vw, 28px);
}

.client-detail-grid .energy-card--bmr,
.client-detail-grid .energy-card--tdee {
    border-radius: clamp(8px, 0.8vw, 14px);
    padding: clamp(12px, 1.2vw, 24px);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.client-detail-grid .energy-card--bmr:hover,
.client-detail-grid .energy-card--tdee:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-brand-sm);
}

.client-detail-grid .energy-card__subtitle {
    font-size: clamp(0.75em, 0.6vw + 0.4em, 0.95em);
    margin-bottom: 6px;
}

.client-detail-grid .energy-card__value {
    font-size: clamp(1.5em, 1.3vw + 0.6em, 2.6em);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 5px;
}

.client-detail-grid .energy-card__unit {
    font-size: clamp(0.7em, 0.5vw + 0.35em, 0.85em);
    margin-top: 4px;
}


/* --- Calorie Ranges --- */
.client-detail-grid .calorie-ranges-section {
    margin-top: clamp(16px, 1.5vw, 28px);
}

.client-detail-grid .calorie-ranges-section h4 {
    font-size: clamp(0.75em, 0.6vw + 0.4em, 0.95em);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: clamp(10px, 1vw, 18px);
}

/* --- Calorie Table ---
   clienti.css: padding 15px fisso → override */
.client-detail-grid .calorie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.63em, 0.27vw + 0.40em, 0.95em);
}

.client-detail-grid .calorie-table--styled {
    border-radius: clamp(8px, 0.6vw, 12px);
    overflow: hidden;
    box-shadow: 0 2px 10px var(--shadow-sm);
}

.client-detail-grid .calorie-th {
    padding: clamp(8px, 0.8vw, 15px) clamp(6px, 0.6vw, 12px);
    font-weight: 700;
    color: var(--text-secondary);
    text-align: left;
    border-bottom: 2px solid var(--border-medium);
    white-space: nowrap;
}

.client-detail-grid .calorie-th--center {
    text-align: center;
}

.client-detail-grid .calorie-tr {
    border-bottom: 1px solid var(--border-light);
}



.client-detail-grid .calorie-td {
    padding: clamp(8px, 0.8vw, 15px) clamp(6px, 0.6vw, 12px);
    vertical-align: middle;
}

.client-detail-grid .calorie-td--deficit,
.client-detail-grid .calorie-td--maintenance,
.client-detail-grid .calorie-td--surplus,
.client-detail-grid .calorie-td--value {
    padding: clamp(8px, 0.8vw, 15px) clamp(6px, 0.6vw, 12px);
    text-align: center;
    font-weight: 700;
    font-size: clamp(0.85em, 0.5vw + 0.45em, 1.05em);
}

.client-detail-grid .calorie-td--deficit     { color: var(--danger); }
.client-detail-grid .calorie-td--maintenance  { color: var(--primary); }
.client-detail-grid .calorie-td--surplus      { color: var(--success); }
.client-detail-grid .calorie-td--value        { color: var(--text-secondary); font-weight: 600; }

.client-detail-grid .calorie-objective-label {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.5vw, 12px);
}

.client-detail-grid .calorie-objective-icon {
    font-size: clamp(1.2em, 1vw + 0.5em, 1.6em);
    flex-shrink: 0;
}

.client-detail-grid .calorie-objective-name {
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.client-detail-grid .calorie-objective-desc {
    font-size: 0.82em;
    color: var(--text-secondary);
}


/* --- Shopping List ---
   shopping-list.css: padding 20px, position sticky → override */
.client-detail-grid .shopping-list-section {
    padding: clamp(14px, 1.5vw, 24px);
    max-height: none;
    position: static;
    height: auto;
}

.client-detail-grid .shopping-list-header {
    margin-bottom: clamp(10px, 1vw, 18px);
    padding-bottom: clamp(8px, 0.8vw, 14px);
}

.client-detail-grid .shopping-list-title h3 {
    font-size: clamp(1em, 0.7vw + 0.5em, 1.3em);
}

.client-detail-grid .shopping-header h3 {
    font-size: clamp(1.1em, 0.8vw + 0.5em, 1.5em);
    margin: 0;
}

.client-detail-grid .shopping-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 0.6vw, 12px);
    margin-bottom: 10px;
    margin-top: 10px;
}

.client-detail-grid .shopping-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(0.82em, 0.5vw + 0.4em, 1em);
    padding: clamp(8px, 0.7vw, 14px) clamp(12px, 1vw, 24px);
    margin: 0;
}

.client-detail-grid .shopping-loading {
    padding: clamp(20px, 2vw, 50px);
}


/* --- Diet Section ---
   diete.css: padding 20px, margin-bottom 18px → override */
.client-detail-grid .diet-section {
    padding: clamp(14px, 1.5vw, 24px);
    border-radius: clamp(8px, 0.8vw, 14px);
}

.client-detail-grid .diet-header {
    margin-bottom: clamp(12px, 1vw, 20px);
}

.client-detail-grid .diet-header h3 {
    font-size: clamp(1.1em, 0.8vw + 0.5em, 1.5em);
    margin: 0;
}

.client-detail-grid .diet-header .btn {
    margin: 0;
}

.client-detail-grid .diet-card {
    padding: clamp(12px, 1vw, 20px);
    margin-bottom: clamp(10px, 0.8vw, 18px);
}

.client-detail-grid .diet-actions .btn {
    padding: clamp(8px, 0.6vw, 12px) clamp(12px, 0.8vw, 18px);
    font-size: clamp(0.8em, 0.5vw + 0.4em, 0.9em);
}


/* --- New Diet Form --- */
.client-detail-grid .new-diet-form {
    padding: clamp(14px, 1.5vw, 28px);
    border-radius: clamp(8px, 0.6vw, 14px);
}

.client-detail-grid .new-diet-form h4 {
    font-size: clamp(1em, 0.7vw + 0.4em, 1.25em);
    margin: 0 0 clamp(12px, 1vw, 20px) 0;
}

.client-detail-grid .form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1vw, 20px);
    margin-bottom: clamp(10px, 1vw, 18px);
}

.client-detail-grid .form-group label {
    font-size: clamp(0.82em, 0.5vw + 0.4em, 0.95em);
}

.client-detail-grid .form-control {
    padding: clamp(8px, 0.6vw, 12px) clamp(10px, 0.8vw, 14px);
    font-size: clamp(0.85em, 0.5vw + 0.4em, 1em);
}

.client-detail-grid .form-actions {
    display: flex;
    gap: clamp(8px, 0.6vw, 14px);
    flex-wrap: wrap;
    margin-top: clamp(8px, 0.8vw, 16px);
}

.client-detail-grid .form-actions .btn {
    margin: 0;
}


/* --- Client Detail Card (info personali) --- */
.client-detail-grid .client-detail-card {
    padding: clamp(16px, 1.5vw, 28px);
    font-size: clamp(0.95em, 0.5vw + 0.55em, 1.2em);
}


/* ────────────────────────────────────────────
   5. RESPONSIVE BREAKPOINTS
   ──────────────────────────────────────────── */

/* Nuova regola per schermi ultra-wide (Sopra i 1920px) */
@media (min-width: 1921px) {
    body.home-shell-active #recent-clients .client-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        /* Puoi regolare il gap qui se necessario per schermi grandi */
        gap: 20px; 
    }
}


/* === ≤ 1399px: 2 colonne === */
@media (max-width: 1399px) {
    .client-detail-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
    }

    .info-column     { grid-column: 1; grid-row: 1; }
    .kcal-column     { grid-column: 2; grid-row: 1; }
    .weight-history-column { grid-column: 2; grid-row: 1; }

    body.home-shell-active #recent-clients .client-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    }
    .notes-column {
        grid-column: 1 / -1;
        grid-row: 4;
    }
    
    .diet-column {
        grid-column: 1 / -1;
        grid-row: 3;
    }
    
    .shopping-column {
        grid-column: 1 / -1;
        grid-row: 4;
        align-self: auto;
    }
}


@media (max-width: 720px) {
    #info-tab .adult-bmi-insight-grid,
    #info-tab .app-mobile-summary,
    #info-tab .app-mobile-activity,
    #info-tab .analytics-recap-metrics,
    #info-tab .client-note-history__list {
        grid-template-columns: 1fr;
    }

    #info-tab .analytics-recap-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1399px ) {
    .actions-grid{
        justify-content:center;
    }
}


@media (max-width: 1209px) {
    .actions-grid{
        justify-content:flex-start;
    }
}

@media (max-width: 918px ) {
    .actions-grid{
        justify-content:center;
    }
}

/* === ≤ 1080px: Info-tab 2 colonne === */
@media (max-width: 1080px) {
    #info-tab .client-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
    }

    #info-tab .weight-section        { grid-column: 1; grid-row: 1; }
    #info-tab #analytics-recap-card  { grid-column: 2; grid-row: 1; margin-top: 0; }
    #info-tab .client-notes-section  { grid-column: 1; grid-row: 2; }
    #info-tab .weight-history-section{ grid-column: 2; grid-row: 2; }
    #info-tab #client-info-detail    { grid-column: 1; grid-row: 3; }
    #info-tab #app-mobile-card       { grid-column: 2; grid-row: 3; margin-top: 0 !important; }
}

/* === ≤ 1023px: Colonna singola === */
@media (max-width: 1023px) {
    .client-detail-grid {
        grid-template-columns: 1fr;
    }

    /* Info-tab mantiene 2 colonne fino a 900px */
    #info-tab .client-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .info-column,
    .kcal-column,
    .weight-history-column,
    .notes-column,
    .shopping-column,
    .diet-column {
        grid-column: 1;
        grid-row: auto;
    }

    .info-column     { order: 4; }
    .kcal-column     { order: 5; }
    .weight-history-column { order: 5; }
    .notes-column    { order: 2; }
    .diet-column     { order: 1; }
    .shopping-column { order: 3; }

    #info-tab .info-column { order: 1; }
    #info-tab .weight-history-column { order: 2; }
    #info-tab .notes-column { order: 3; }

    #diet-tab .kcal-column { order: 1; }
    #diet-tab .diet-column { order: 2; }



    .client-detail-grid .energy-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .client-detail-grid .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* === ≤ 899px: Tablet portrait === */
@media (max-width: 899px) {
    /* Info-tab passa a 1 colonna */
    #info-tab .client-detail-grid {
        grid-template-columns: 1fr;
    }

    #info-tab .weight-section,
    #info-tab #analytics-recap-card,
    #info-tab .client-notes-section,
    #info-tab .weight-history-section,
    #info-tab #client-info-detail,
    #info-tab #app-mobile-card {
        grid-column: 1;
        grid-row: auto;
    }

    .client-detail-grid .calorie-objective-desc {
        display: none;
    }

    .client-detail-grid .energy-cards-grid {
        grid-template-columns: 1fr;
    }

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

    .client-detail-grid .shopping-actions {
        flex-direction: column;
    }

    .client-detail-grid .shopping-actions .btn {
        width: 100%;
    }
}


/* === ≤ 768px: Calorie table → card layout === */

@media (max-width: 800px){
        .logout-btn .text {
        display: none;
    }

}

@media (max-width: 450px){

    .logout-btn .text {
        display: none;
    }

    .logout-btn {
        padding: 8px;
        margin-top: -5px;
    }

}



@media (max-width: 768px) {

    .calorie-table--styled {
        background: transparent;
    }

    .client-detail-grid .calorie-table thead {
        display: none;
    }

    .client-detail-grid .calorie-table tr,
    .client-detail-grid .calorie-table .calorie-tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background: var(--bg-surface-raised);
        border-radius: 10px;
        padding: clamp(8px, 1vw, 12px);
        border: 1px solid var(--border-medium);
    }

    /* Obiettivo — riga intera */
    .client-detail-grid .calorie-table .calorie-td:first-child {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--border-medium);
        padding-bottom: 6px;
        margin-bottom: 2px;
    }

    /* Calorie — riga intera con label */
    .client-detail-grid .calorie-td--deficit,
    .client-detail-grid .calorie-td--maintenance,
    .client-detail-grid .calorie-td--surplus {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: 1.3em;
        font-weight: 700;
    }

    .client-detail-grid .calorie-td--deficit::before,
    .client-detail-grid .calorie-td--maintenance::before,
    .client-detail-grid .calorie-td--surplus::before {
        content: "Calorie";
        font-size: 0.55em;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Carboidrati, Proteine, Grassi — 3 colonne con label */
    .client-detail-grid .calorie-td--value {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-align: center;
        font-size: 1.1em;
    }

    .client-detail-grid .calorie-table tr td:nth-child(3)::before { content: "Carboidrati"; }
    .client-detail-grid .calorie-table tr td:nth-child(4)::before { content: "Proteine"; }
    .client-detail-grid .calorie-table tr td:nth-child(5)::before { content: "Grassi"; }

    .client-detail-grid .calorie-table tr td:nth-child(3)::before,
    .client-detail-grid .calorie-table tr td:nth-child(4)::before,
    .client-detail-grid .calorie-table tr td:nth-child(5)::before {
        font-size: 0.65em;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .client-detail-grid .diet-header {
        flex-direction: column;
        align-items: flex-start;
    }

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


/* ════════════════════════════════════════════
   6. MEASUREMENTS TAB — Responsive
   ════════════════════════════════════════════ */

/* --- Measurements Grid (3fr/2fr, 3 righe) --- */
#measurements-tab .measurements-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1600px) {
    /* Antropo + circ-panel: da 2 colonne a 4 righe full-width */
    #measurements-tab .section--antropo.section {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    #measurements-tab .meas-col2-panel#col2-circ-panel {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    /* Plico + plico-panel: stessa cosa */
    #measurements-tab .meas-row-plico-wrap {
        grid-column: 1 / -1;
        grid-row: 3;
    }
    #measurements-tab .meas-col2-panel#col2-plico-panel {
        grid-column: 1 / -1;
        grid-row: 4;
    }
    /* Fabbisogno + donut restano affiancati */
    #measurements-tab .fabbisogno-section {
        grid-column: 1;
        grid-row: 5;
    }
    #measurements-tab .meas-col2-panel#col2-donut-panel {
        grid-column: 2;
        grid-row: 5;
    }
}

@media (max-width: 960px) {
    #measurements-tab .measurements-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Plico Section (flex: plicometria + sidebar peso/valutaz) ---
   misurazioni.css: sidebar flex: 0 0 380px → fluid */
#measurements-tab .plico-section {
    display: flex;
    gap: clamp(16px, 1.5vw, 28px);
    align-items: flex-start;
}

#measurements-tab .plico-section .section--plico {
    flex: 1;
    min-width: 0;
}

/* Sidebar: peso + valutazione — fluid width */
#measurements-tab .plico-section > div:not(.section) {
    flex: 0 0 clamp(280px, 22vw, 420px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1vw, 20px);
}

/* --- Weight Section ---
   misurazioni.css: padding 25px fisso → fluid */
#measurements-tab .weight-section {
    padding: clamp(16px, 1.5vw, 28px);
    border-radius: clamp(10px, 1vw, 16px);
}

#measurements-tab .weight-section h3 {
    font-size: clamp(1em, 0.7vw + 0.5em, 1.2em);
    margin: 0 0 clamp(12px, 1vw, 20px) 0;
}

/* --- Weight Grid (peso / BMI / categoria) --- */
#measurements-tab .weight-grid {
    gap: clamp(10px, 0.8vw, 18px);
}

#measurements-tab .weight-value {
    font-size: clamp(1.5em, 1.2vw + 0.7em, 2.4em);
}

/* --- Antropo-Plico Section (valutazione completa) ---
   misurazioni.css: flex: 0 0 380px, padding 25px → fluid */
#measurements-tab .antropo-plico-section {
    padding: clamp(16px, 1.5vw, 28px);
    border-radius: clamp(10px, 1vw, 16px);
    min-height: auto;
}

#measurements-tab .antropo-plico-section h3 {
    font-size: clamp(1em, 0.7vw + 0.5em, 1.2em);
    margin: 0 0 clamp(12px, 1vw, 18px) 0;
}

#measurements-tab .antropo-plico-section button {
    font-size: clamp(0.82em, 0.5vw + 0.4em, 1em);
    padding: clamp(10px, 0.8vw, 16px) clamp(14px, 1vw, 24px);
}

/* --- Antropo Section (flex: circonferenze + eventuale sidebar) ---
   misurazioni.css: sidebar flex: 0 0 380px → fluid */
#measurements-tab .antropo-section {
    display: flex;
    gap: clamp(16px, 1.5vw, 28px);
    align-items: flex-start;
}

#measurements-tab .antropo-section .section--antropo {
    flex: 1;
    min-width: 0;
}

/* --- Section plico/antropo interne ---
   misurazioni.css: padding 30px via .section → fluid */
#measurements-tab .section--plico,
#measurements-tab .section--antropo {
    padding: clamp(16px, 2vw, 32px);
    border-radius: clamp(12px, 1.2vw, 22px);
}

/* --- Plicometria results grid --- */
#measurements-tab .plico-results {
    grid-template-columns: repeat(auto-fit, minmax(clamp(90px, 8vw, 130px), 1fr));
    gap: clamp(8px, 0.7vw, 12px);
}

#measurements-tab .plico-result-value {
    font-size: clamp(1.1em, 0.8vw + 0.5em, 1.5em);
}

/* --- Antropometria results grid --- */
#measurements-tab .antropo-results {
    grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 9vw, 150px), 1fr));
    gap: clamp(8px, 0.8vw, 14px);
}

#measurements-tab .antropo-result-value {
    font-size: clamp(1.2em, 0.8vw + 0.5em, 1.6em);
}

/* --- Measurement form fields grid --- */
#measurements-tab .measurement-fields-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 15vw, 260px), 1fr));
    gap: clamp(12px, 1vw, 22px);
}

/* --- Body fat display --- */
#measurements-tab .body-fat-display {
    padding: clamp(14px, 1.5vw, 24px);
    border-radius: clamp(10px, 1vw, 16px);
}

#measurements-tab .body-fat-value {
    font-size: clamp(1.8em, 1.5vw + 0.8em, 2.8em);
}

/* --- Buttons inside text-center-mt20 --- */
#measurements-tab .text-center-mt20 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(6px, 0.5vw, 12px);
    margin-top: clamp(12px, 1vw, 22px);
}

#measurements-tab .text-center-mt20 .btn {
    margin: 0;
    font-size: clamp(0.82em, 0.5vw + 0.4em, 1em);
    padding: clamp(10px, 0.8vw, 16px) clamp(14px, 1vw, 28px);
}

/* --- Measurements-left (results wrapper sotto) --- */
#measurements-tab .measurements-left {
    margin-top: clamp(16px, 1.5vw, 30px);
}

/* --- Overflow prevention --- */
#measurements-tab,
#measurements-tab .measurements-grid,
#measurements-tab .measurements-right,
#measurements-tab .plico-section,
#measurements-tab .antropo-section,
#measurements-tab .section--plico,
#measurements-tab .section--antropo {
    min-width: 0;
    overflow: hidden;
}


/* --- Measurements Breakpoints --- */

/* ≤ 1199px: sidebar ridotta */
@media (max-width: 1199px) {
    #measurements-tab .plico-section > div:not(.section) {
        flex: 0 0 clamp(240px, 20vw, 320px);
    }
}

/* ≤ 1023px: stack verticale plico + sidebar affiancate */
@media (max-width: 1023px) {
    #measurements-tab .plico-section {
        flex-direction: column;
    }

    #client-tabs-navigation {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 2px 10px;
        margin: 0 -2px 24px;
        border-bottom: none;
        scroll-snap-type: x proximity;
    }


    /* Peso + Valutazione restano affiancati */
    #measurements-tab .plico-section > div:not(.section) {
        flex: none;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: clamp(12px, 1vw, 20px);
    }

    /* Entrambi i box prendono metà */
    #measurements-tab .plico-section > div:not(.section) > * {
        flex: 1;
        min-width: 0;
    }

    #measurements-tab .antropo-section {
        flex-direction: column;
    }

    #measurements-tab .antropo-section .section--antropo {
        width: 100%;
    }
}

/* ≤ 768px: peso + valutazione stackano */
@media (max-width: 768px) {
    #client-tabs-navigation {
        margin-bottom: 20px;
    }

    #client-tabs-navigation .tab-button {
        padding: 9px 12px;
        font-size: 13px;
    }

    #measurements-tab .plico-section > div:not(.section) {
        flex-direction: column;
    }

    #measurements-tab .text-center-mt20 {
        flex-direction: column;
        align-items: stretch;
    }

    #measurements-tab .text-center-mt20 .btn {
        width: 100%;
    }

    #measurements-tab .measurement-fields-grid {
        grid-template-columns: repeat(2, 1fr);
    }


}