/* ============================================
   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,
.client-detail-grid,
.info-column,
.kcal-column,
.shopping-column,
.diet-column {
    min-width: 0;
    overflow: hidden;
}

#monitoring-tab,
#training-progressi-tab,
#monitoring-tab .monitoring-dashboard,
#monitoring-tab .monitoring-grid,
#monitoring-tab .monitoring-insight-grid,
#training-progressi-tab #training-progressi-container,
#training-progressi-tab .progress-dashboard,
#training-progressi-tab .progress-performance-grid,
#training-progressi-tab .progress-records-grid,
#training-progressi-tab .progress-analysis-grid {
    overflow: visible;
}

/* 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 .minor-percentile-hint {
    display: grid;
    gap: 5px;
    margin: clamp(14px, 1.4vw, 22px) auto 0;
    max-width: 540px;
    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;
    margin-bottom: 15px;
}

#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-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;
    border-color: color-mix(in srgb, var(--primary) 18%, transparent);
    box-shadow: 0 8px 18px -16px var(--shadow-brand-sm);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 8%, var(--bg-surface)),
            color-mix(in srgb, var(--brand) 6%, var(--bg-surface)));
    color: var(--text-secondary);
    text-align: left;
}

body.home-shell-active .actions-grid .btn:hover {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 14%, var(--bg-surface-raised)),
            color-mix(in srgb, var(--brand) 10%, var(--bg-surface-raised)));
    color: var(--text-heading);
}

.dark-mode body.home-shell-active .actions-grid .btn {
    border-color: color-mix(in srgb, var(--primary) 24%, transparent);
    box-shadow: 0 10px 22px -18px rgba(0, 0, 0, 0.65);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 16%, var(--bg-surface)),
            color-mix(in srgb, var(--brand) 10%, var(--bg-surface)));
}

.dark-mode body.home-shell-active .actions-grid .btn:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 24%, var(--bg-surface-raised)),
            color-mix(in srgb, var(--brand) 15%, var(--bg-surface-raised)));
}

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--action {
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body.home-shell-active .home-kpi-card--action:hover,
body.home-shell-active .home-kpi-card--action:focus-visible {
    transform: translateY(-1px);
    border-color: var(--warning);
    box-shadow: var(--shadow-md);
    outline: none;
}

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-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

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;
    min-width: 0;
}

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-toggles {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

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--expired {
    border-left: 3px solid var(--danger);
    padding-left: 12px;
}

body.home-shell-active .home-activation-item {
    border-left: 3px solid rgba(245, 158, 11, 0.75);
    padding-left: 12px;
}

body.home-shell-active .home-activation-item--overdue {
    border-left-color: var(--danger);
}

body.home-shell-active .home-activation-item--overdue .home-expiration-item__deadline {
    color: var(--danger);
    font-weight: 700;
}

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-palette);
}

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

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;
}

/* Note cliente: item elenco cliccabili + azioni Salva/Nuova */
#info-tab .client-note-history__item {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#info-tab .client-note-history__item:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    border-color: var(--border-strong, var(--border-medium));
}

#info-tab .client-note-history__item.is-selected {
    border-color: var(--accent, #2563eb);
    background: var(--accent-soft, rgba(37, 99, 235, 0.08));
}

#info-tab .client-note-actions {
    display: flex;
    gap: 8px;
}

#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;
    
    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;
}


/* --- 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;
}

/* =========================================================
   REDESIGN B — Scheda "Informazioni Personali"
   ========================================================= */
#info-tab #client-info-detail > .client-detail-card { gap: 0; font-size: 1rem; }

#info-tab .cd-identity { display:flex; align-items:center; gap:14px; }
#info-tab .cd-avatar {
  width:54px; height:54px; flex:0 0 auto; border-radius:16px;
  background: linear-gradient(135deg, var(--gradient-app-start), var(--gradient-app-end));
  color:#fff; display:grid; place-items:center; font-size:19px; font-weight:800;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gradient-app-end) 35%, transparent);
}
#info-tab .cd-id-who { min-width:0; }
#info-tab .cd-id-name { font-size:19px; font-weight:800; color:var(--text-heading); line-height:1.15; }
#info-tab .cd-id-meta { margin-top:3px; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
#info-tab .cd-dot { width:3px; height:3px; border-radius:50%; background:var(--text-muted); }

#info-tab .cd-bmi-focal {
  margin-top:16px; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  padding:16px; border-radius:14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cd-bmi-color) 12%, var(--bg-surface-raised)), var(--bg-surface-raised));
  border:1px solid var(--cd-bmi-bd);
}
#info-tab .cd-bmi-ring {
  width:78px; height:78px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background: conic-gradient(var(--cd-bmi-color) 0 var(--cd-bmi-pct), color-mix(in srgb, var(--cd-bmi-color) 16%, var(--bg-surface-card)) var(--cd-bmi-pct) 100%);
}
#info-tab .cd-bmi-ring-inner { width:60px; height:60px; border-radius:50%; background:var(--bg-surface); display:grid; place-items:center; }
#info-tab .cd-bmi-num { font-size:19px; font-weight:800; color:var(--text-heading); }
#info-tab .cd-bmi-cap { font-size:12px; color:var(--text-secondary); }
#info-tab .cd-bmi-label { font-size:17px; font-weight:800; color:var(--text-heading); margin:2px 0; }
#info-tab .cd-bmi-range { font-size:12px; color:var(--text-secondary); }

#info-tab .cd-bmi--bmi-normale    { --cd-bmi-color: var(--success); --cd-bmi-bd: var(--success-border); }
#info-tab .cd-bmi--bmi-sottopeso  { --cd-bmi-color: var(--primary); --cd-bmi-bd: var(--primary-border); }
#info-tab .cd-bmi--bmi-sovrappeso { --cd-bmi-color: var(--warning); --cd-bmi-bd: var(--warning-border); }
#info-tab .cd-bmi--bmi-obesita    { --cd-bmi-color: var(--danger);  --cd-bmi-bd: var(--danger-border); }

#info-tab .cd-deflist { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
#info-tab .cd-def { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px dashed var(--border-light); font-size:13px; min-width:0; }
#info-tab .cd-def-k { color:var(--text-secondary); white-space:nowrap; }
#info-tab .cd-def-v { color:var(--text-heading); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#info-tab .cd-tags { margin-top:auto; padding-top:16px; border-top:1px solid var(--border-light); }
#info-tab .cd-tags-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
#info-tab .cd-tags-lab { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); }
#info-tab .cd-tags-head .btn { font-size:12px; padding:6px 10px; }
#info-tab .cd-tags-row { display:flex; flex-wrap:wrap; gap:7px; }

#info-tab .cd-reminders { margin-top:16px; padding-top:16px; border-top:1px solid var(--border-light); }
#info-tab .cd-reminders-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
#info-tab .cd-reminders-lab { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); }
#info-tab .cd-reminders-head .btn { font-size:12px; padding:6px 10px; }
.client-custom-reminders-list { display:grid; gap:9px; max-height:430px; overflow:auto; padding-right:2px; }
.client-custom-reminder-card {
  display:grid; gap:0; padding:0;
  border:1px solid var(--border-medium); border-radius:12px;
  background:var(--bg-surface-raised);
}
.client-custom-reminder-toggle {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.client-custom-reminder-toggle-copy { display:grid; gap:3px; min-width:0; }
.client-custom-reminder-toggle-copy > strong { display:block; color:var(--text-heading); font-size:13px; overflow-wrap:anywhere; }
.client-custom-reminder-toggle-copy > span { color:var(--text-secondary); font-size:11px; }
.client-custom-reminder-chevron {
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.client-custom-reminder-toggle[aria-expanded="true"] .client-custom-reminder-chevron {
  transform:rotate(225deg);
}
.client-custom-reminder-toggle:focus-visible { outline:2px solid var(--gradient-app-start); outline-offset:-2px; }
.client-custom-reminder-panel { display:grid; gap:10px; padding:0 12px 12px; }
.client-custom-reminder-panel[hidden] { display:none; }
.client-custom-reminder-description { margin:0; color:var(--text-secondary); font-size:12px; line-height:1.4; }
.client-custom-reminder-dot { width:9px; height:9px; flex:0 0 auto; margin-top:4px; border-radius:50%; background:var(--reminder-color); box-shadow:0 0 0 3px color-mix(in srgb, var(--reminder-color) 18%, transparent); }
.client-custom-reminder-auto { display:flex; align-items:center; gap:8px; color:var(--text-heading); font-size:12px; font-weight:700; cursor:pointer; }
.client-custom-reminder-auto input { width:17px; height:17px; accent-color:var(--gradient-app-start); }
.client-custom-reminder-schedule { display:grid; gap:9px; padding:10px; border-radius:10px; background:var(--bg-surface-sunken); }
.client-custom-reminder-schedule.is-disabled { opacity:.58; }
.client-custom-reminder-days { display:flex; flex-wrap:wrap; gap:5px; }
.client-custom-reminder-day { position:relative; cursor:pointer; }
.client-custom-reminder-day input { position:absolute; opacity:0; pointer-events:none; }
.client-custom-reminder-day span {
  display:block; padding:5px 7px; border:1px solid var(--border-medium); border-radius:8px;
  background:var(--bg-surface); color:var(--text-secondary); font-size:10px; font-weight:700;
}
.client-custom-reminder-day input:checked + span { border-color:var(--gradient-app-start); background:color-mix(in srgb, var(--gradient-app-start) 12%, var(--bg-surface)); color:var(--text-heading); }
.client-custom-reminder-day input:focus-visible + span { outline:2px solid var(--gradient-app-start); outline-offset:2px; }
.client-custom-reminder-day.every-day span { padding-inline:9px; }
.client-custom-reminder-time-row { display:grid; grid-template-columns:auto minmax(82px, 1fr) auto; align-items:center; gap:7px; font-size:11px; color:var(--text-secondary); }
.client-custom-reminder-time-row .form-control { min-width:0; padding:6px 8px; font-size:12px; margin-bottom: 10px; }
.client-custom-reminder-time-row .btn { padding:6px 8px; font-size:11px; white-space:nowrap; }
.client-custom-reminder-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.client-custom-reminder-footer > span { color:var(--text-muted); font-size:10px; line-height:1.3; }
.client-custom-reminder-footer .btn { padding:6px 9px; font-size:11px; white-space:nowrap; }
.client-custom-reminder-empty {
  width:100%; padding:11px; border:1px dashed var(--border-medium); border-radius:10px;
  background:transparent; color:var(--text-secondary); font:inherit; font-size:12px; text-align:left; cursor:pointer;
}
.client-custom-reminder-empty.is-error { color:var(--danger); cursor:default; }
.client-custom-reminders-checkboxes { display:grid; gap:9px; }
.client-custom-reminder-assignment {
  display:grid; grid-template-columns:auto auto minmax(0, 1fr); align-items:start; gap:10px;
  padding:12px; border:1px solid var(--border-medium); border-radius:12px; background:var(--bg-surface-raised); cursor:pointer;
}
.client-custom-reminder-assignment input { width:18px; height:18px; margin:0; accent-color:var(--gradient-app-start); }
.client-custom-reminder-assignment .client-custom-reminder-dot { margin-top:5px; }
.client-custom-reminder-assignment strong { display:block; color:var(--text-heading); font-size:13px; }
.client-custom-reminder-assignment small { display:block; margin-top:3px; color:var(--text-secondary); line-height:1.35; }

@media (max-width: 640px) {
  .client-custom-reminder-time-row { grid-template-columns:auto 1fr; }
  .client-custom-reminder-time-row .btn { grid-column:1 / -1; width:100%; }
  .client-custom-reminder-footer { align-items:flex-end; }
  .client-custom-reminders-modal-content { width:min(94vw, 560px); }
}

/* =========================================================
   REDESIGN B — Scheda "App Mobile"
   ========================================================= */
#info-tab .app-mobile-summary  { display:block; gap:0; grid-template-columns:none; }
#info-tab .app-mobile-activity { display:block; gap:0; grid-template-columns:none; }

/* stato NON connesso: hero che riempie la card */
#info-tab .app-mobile-summary.capp-summary--empty { flex:1; display:flex; }
#info-tab .capp-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:6px; padding:18px 12px; border:1.5px dashed var(--border-medium); border-radius:16px; background:var(--bg-surface-raised);
}
#info-tab .capp-empty-ico {
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center; margin-bottom:4px;
  background: linear-gradient(135deg, var(--gradient-app-start), var(--gradient-app-end)); color:#fff;
}
#info-tab .capp-empty-ico svg { width:28px; height:28px; }
#info-tab .capp-empty-t { font-size:15px; font-weight:800; color:var(--text-heading); }
#info-tab .capp-empty-s { font-size:12.5px; color:var(--text-secondary); line-height:1.45; max-width:250px; }

/* stato connesso: banner */
#info-tab .capp-banner {
  display:flex; align-items:center; gap:13px; padding:14px 15px; border-radius:14px;
  background: linear-gradient(135deg, var(--gradient-app-start), var(--gradient-app-end)); color:#fff;
}
#info-tab .capp-phone { width:38px; height:38px; flex:0 0 auto; border-radius:11px; background:rgba(255,255,255,.18); display:grid; place-items:center; }
#info-tab .capp-phone svg { width:20px; height:20px; }
#info-tab .capp-banner-tx { flex:1; min-width:0; }
#info-tab .capp-banner-t { font-size:13.5px; font-weight:700; }
#info-tab .capp-banner-s { font-size:12px; opacity:.88; margin-top:2px; }
#info-tab .capp-live { font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; background:rgba(255,255,255,.2); white-space:nowrap; }

/* feed azioni */
#info-tab .capp-feed { display:flex; flex-direction:column; margin-top:2px; }
#info-tab .capp-feed-title { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:8px; }
#info-tab .capp-feed-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:8px 0; border-bottom:1px solid var(--border-light); }
#info-tab .capp-feed-row:last-child { border-bottom:none; }
#info-tab .capp-feed-ico { width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; }
#info-tab .capp-feed-ico svg { width:15px; height:15px; }
#info-tab .capp-ftxt { min-width:0; }
#info-tab .capp-ft { font-size:13px; font-weight:700; color:var(--text-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#info-tab .capp-fs { font-size:11px; color:var(--text-secondary); }
#info-tab .capp-feed-row time { font-size:11.5px; color:var(--text-muted); white-space:nowrap; }

#info-tab .capp-fi-meal     { background:var(--success-bg); color:var(--success); }
#info-tab .capp-fi-train    { background: color-mix(in srgb, var(--gradient-app-end) 20%, transparent); color:var(--gradient-app-end); }
#info-tab .capp-fi-water    { background: color-mix(in srgb, var(--info) 16%, transparent); color:var(--info); }
#info-tab .capp-fi-feedback { background:var(--warning-bg); color:var(--warning); }
#info-tab .capp-fi-login    { background:var(--bg-surface-alt); color:var(--text-secondary); }

#info-tab .capp-note { font-size:12.5px; color:var(--text-secondary); padding:12px; border:1px dashed var(--border-medium); border-radius:12px; background:var(--bg-surface-raised); text-align:center; }

/* CTA invito → pulsante gradiente a tutta larghezza */
#info-tab #btn-invite-app {
  margin-top:auto; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border-radius:11px; border:none; cursor:pointer; font-size:13.5px !important; font-weight:700;
  background: linear-gradient(135deg, var(--gradient-app-start), var(--gradient-app-end)); color:#fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gradient-app-end) 30%, transparent);
}
#info-tab #btn-invite-app:hover { filter:brightness(1.04); transform:translateY(-1px); }
#info-tab #btn-invite-app img.btn-icon-img { filter:brightness(0) invert(1); }


/* --- 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);
    }


}