/* =====================================================================
   NUTRILIFT THEME TOKENS
   ---------------------------------------------------------------------
   Global theme contract for the web app. Keep token names stable: many
   feature CSS files and inline JS templates consume these variables.

   Light mode follows the auth light palette: clean surfaces, ink text,
   Nutri purple as brand accent, Train green as secondary accent.

   Dark mode follows the auth dark palette: premium dark base, glass-like
   surfaces, soft violet brand accents, muted green training accents.
   ===================================================================== */

:root {
  /* Brand */
  --nl-nutri: #595082;
  --nl-nutri-light: #7367a8;
  --nl-train: #5a8466;
  --nl-train-light: #6c9a78;

  /* App gradients and primary accents */
  --gradient-app: linear-gradient(135deg, #7367a8 0%, #595082 100%);
  --gradient-app-start: #7367a8;
  --gradient-app-end: #595082;
  --gradient-app-palette: #595082;
  --gradient-success-btn: linear-gradient(135deg, #11998e 0%, #38b2ac 100%);
  --gradient-danger-btn: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --gradient-cyan-btn: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
  --gradient-purple-btn: linear-gradient(135deg, #7367a8 0%, #595082 100%);
  --gradient-pink-btn: linear-gradient(135deg, #d53f8c 0%, #ff7eb3 100%);
  --gradient-peach-btn: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  --gradient-blue-btn: linear-gradient(135deg, #396afc 0%, #2948ff 100%);
  --gradient-quartary-btn: linear-gradient(135deg, #2a9cdf 0%, #2563eb 100%);
  --gradient-quintary-btn: linear-gradient(135deg, #7c3aed 0%, #595082 100%);
  --gradient-sestiary-btn: linear-gradient(135deg, #fdb051 0%, #fdd937 100%);
  --gradient-septiary-btn: linear-gradient(135deg, #464d53 0%, #8b8b8b 100%);
  --gradient-management-btn: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  --gradient-dark-btn: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --gradient-summary: linear-gradient(to right, #f3f1f8, #faf9fd);
  --gradient-score-total: linear-gradient(to bottom, #fbfaf7, #f1fbf6);

  /* Text */
  --text-primary: #1f2430;
  --text-secondary: #6b7180;
  --text-muted: #7d8391;
  --text-hint: #9a9fae;
  --text-disabled: #b8bbc6;
  --text-inverse: #ffffff;
  --text-heading: #171923;
  --text-link: #595082;
  --text-link-hover: #3f3860;
  --text-stable-white: #ffffff;
  --text-gray: #444444;
  --text-stable-light-gray: #b9b8b8;
  --text-placeholder: #8b8f9d;
  --text-title: #595082;

  /* Page and layout surfaces */
  --bg-body: #ecebf4;
  --bg-surface: #fbfaf7;
  --bg-surface-raised: #f7f5f0;
  --bg-surface-card: #fbfaf7;
  --bg-surface-card-light: #f2f0f8;
  --bg-surface-sunken: #e8e6f0;
  --bg-surface-sunken-training: #eef3ef;
  --bg-surface-alt: #f6f5fb;
  --bg-surface-translucent: rgba(251, 250, 247, 0.95);
  --bg-sidebar: #2c3e50;
  --bg-sidebar-hover: #34495e;
  --bg-sidebar-active: #1a202c;
  --bg-navbar: #fbfaf7;
  --bg-input: #fbfaf7;
  --bg-input-disabled: #eceaf2;
  --bg-light-blue-stable: linear-gradient(180deg, #eef2ff, #f5f7ff);

  /* Interactive backgrounds */
  --bg-hover: rgba(89, 80, 130, 0.06);
  --bg-hover-medium: rgba(89, 80, 130, 0.1);
  --bg-active: rgba(89, 80, 130, 0.14);
  --bg-selected: rgba(89, 80, 130, 0.18);
  --bg-hover-inverse: rgba(255, 255, 255, 0.1);
  --bg-active-inverse: rgba(255, 255, 255, 0.2);

  /* NutriLift glass surfaces */
  --nl-bg: #07080c;
  --nl-surface: rgba(251, 250, 247, 0.92);
  --nl-surface-solid: #fbfaf7;
  --nl-surface-raised: #f7f5f0;

  /* Overlays */
  --overlay-lightest: rgba(0, 0, 0, 0.02);
  --overlay-light: rgba(0, 0, 0, 0.06);
  --overlay-medium: rgba(0, 0, 0, 0.25);
  --overlay-heavy: rgba(0, 0, 0, 0.5);
  --overlay-darker: rgba(0, 0, 0, 0.7);
  --overlay-darkest: rgba(0, 0, 0, 0.9);

  /* Borders */
  --border-lightest: #f0eef6;
  --border-light: #e6e4f0;
  --border-medium: #d8d4e6;
  --border-inverse: rgba(0, 0, 0, 0.3);
  --border-strong: #c8c2dc;
  --border-dark: #a9a2c0;
  --border-input: #d8d4e6;
  --border-input-focus: #7367a8;

  /* Shadows: color values, not complete shadow declarations */
  --shadow-sm: rgba(43, 38, 74, 0.08);
  --shadow-md: rgba(43, 38, 74, 0.15);
  --shadow-lg: rgba(43, 38, 74, 0.25);
  --shadow-focus: rgba(89, 80, 130, 0.2);
  --shadow-brand-xs: rgba(89, 80, 130, 0.1);
  --shadow-brand-sm: rgba(89, 80, 130, 0.16);
  --shadow-brand-md: rgba(89, 80, 130, 0.3);

  /* Primary scale */
  --primary-darkest: #241f38;
  --primary-darker: #3f3860;
  --primary-dark: #4c4570;
  --primary: #595082;
  --primary-light: #7367a8;
  --primary-lighter: #9b8fd0;
  --primary-bg: #ece8f7;
  --primary-bg-light: #f6f3fc;
  --primary-border: #cfc8e9;
  --primary-hover: #4c4570;
  --primary-active: #3f3860;

  /* Brand / Train green */
  --brand-dark: #43664d;
  --brand: #5a8466;
  --brand-light: #6fae82;
  --brand-lighter: #8dbb9a;
  --brand-bg: #e9f2eb;
  --brand-bg-light: #f3f8f4;
  --brand-bg-hover: rgba(90, 132, 102, 0.12);
  --brand-bg-active: rgba(90, 132, 102, 0.2);
  --brand-border: rgba(90, 132, 102, 0.32);
  --brand-shadow: rgba(90, 132, 102, 0.32);

  /* Success */
  --success-darkest: #0f5132;
  --success-dark: #166534;
  --success: #27ae60;
  --success-medium: #4caf50;
  --success-light: #66bb6a;
  --success-lighter: #a5d6a7;
  --success-bg: #d4edda;
  --success-bg-message: #d4edda;
  --success-bg-light: #e8f5e9;
  --success-bg-lightest: #f0fff4;
  --success-border: #c3e6c9;
  --success-text: #155724;
  --success-text-message: #155724;
  --success-hover: rgba(76, 175, 80, 0.15);
  --success-active: rgba(76, 175, 80, 0.3);

  /* Danger */
  --danger-darkest: #721c24;
  --danger-dark: #c62828;
  --danger: #e74c3c;
  --danger-medium: #ef4444;
  --danger-light: #ef9a9a;
  --danger-lighter: #fca5a5;
  --danger-bg: #f8d7da;
  --danger-bg-message: #f8d7da;
  --danger-bg-light: #fee2e2;
  --danger-bg-lightest: #fff5f5;
  --danger-border: #f5c6cb;
  --danger-border-dark: #f0384b;
  --danger-text: #721c24;
  --danger-text-message: #721c24;
  --danger-hover: rgba(231, 76, 60, 0.1);
  --danger-active: rgba(231, 76, 60, 0.2);

  /* Warning */
  --warning-darkest: #78350f;
  --warning-dark: #92400e;
  --warning: #f59e0b;
  --warning-medium: #ffc107;
  --warning-light: #fbd38d;
  --warning-bg: #fff3cd;
  --warning-bg-message: #fff3cd;
  --warning-pdf: #fff3cd;
  --warning-bg-light: #fff8e1;
  --warning-bg-lightest: #fffbeb;
  --warning-border: #ffeaa7;
  --warning-text: #856404;
  --warning-text-message: #856404;
  --warning-hover: rgba(243, 156, 18, 0.2);

  /* Info */
  --info-dark: #0c5460;
  --info: #17a2b8;
  --info-light: #45b7d1;
  --info-bg: #d1ecf1;
  --info-bg-message: #d1ecf1;
  --info-bg-light: #e0f7ff;
  --info-bg-lightest: #ecfeff;
  --info-border: #bee5eb;
  --info-text: #0c5460;
  --info-text-message: #0c5460;

  /* Soft action buttons */
  --alt-btn: rgba(8, 145, 178, 0.12);
  --delete-btn-bg: rgba(220, 38, 38, 0.1);
  --delete-btn-border: rgba(220, 38, 38, 0.3);
  --delete-btn-boder: var(--delete-btn-border);
  --action-btn-bg: rgba(89, 80, 130, 0.1);
  --action-btn-border: rgba(89, 80, 130, 0.32);
  --success-btn-soft-bg: rgba(90, 132, 102, 0.12);
  --success-btn-soft-border: rgba(90, 132, 102, 0.32);
  --peach-btn-soft-bg: rgba(217, 119, 6, 0.12);
  --peach-btn-soft-border: rgba(217, 119, 6, 0.34);
  --blue-btn-soft-bg: rgba(37, 99, 235, 0.1);
  --blue-btn-soft-border: rgba(37, 99, 235, 0.3);
  --cyan-btn-soft-bg: rgba(2, 132, 199, 0.1);
  --cyan-btn-soft-border: rgba(2, 132, 199, 0.3);
  --purple-btn-soft-bg: rgba(89, 80, 130, 0.1);
  --purple-btn-soft-border: rgba(89, 80, 130, 0.32);
  --pink-btn-soft-bg: rgba(219, 39, 119, 0.1);
  --pink-btn-soft-border: rgba(219, 39, 119, 0.3);
  --quartary-btn-soft-bg: rgba(30, 64, 175, 0.1);
  --quartary-btn-soft-border: rgba(30, 64, 175, 0.3);
  --quintary-btn-soft-bg: rgba(124, 58, 237, 0.1);
  --quintary-btn-soft-border: rgba(124, 58, 237, 0.3);
  --sestiary-btn-soft-bg: rgba(180, 83, 9, 0.1);
  --sestiary-btn-soft-border: rgba(180, 83, 9, 0.3);
  --septiary-btn-soft-bg: rgba(71, 85, 105, 0.1);
  --septiary-btn-soft-border: rgba(71, 85, 105, 0.3);
  --management-btn-soft-bg: rgba(168, 85, 247, 0.1);
  --management-btn-soft-border: rgba(168, 85, 247, 0.32);

  /* Violet and pink accents */
  --violet-dark: #4c4570;
  --violet: #595082;
  --violet-medium: #7367a8;
  --violet-light: #9b8fd0;
  --violet-bg: #ece8f7;
  --violet-bg-light: #f6f3fc;
  /* Stato food-item (planning dieta) */
  /* "da verificare" (❓): viola distinto, non confondibile col grigio manuale */
  --food-slate-bg: #ede9fe;
  --food-slate-line: #7c3aed;
  --food-manual-fill: #e5e7eb;
  --food-alt-line: #2563eb;
  /* Deroga (🔓): ambra/oro, colore proprio distinto da "da verificare" (viola) */
  --food-deroga-bg: #fde68a6e;
  --food-deroga-line: #d97706;
  --violet-border: #d8d0f0;
  --violet-hover: rgba(89, 80, 130, 0.1);
  --pink-dark: #c2185b;
  --pink: #d53f8c;
  --pink-light: #ff7eb3;
  --pink-bg: #fce4ec;
  --pink-bg-light: #fff0f5;

  /* Navy */
  --navy-darkest: #0f172a;
  --navy-dark: #111827;
  --navy: #1f2937;
  --navy-medium: #2d3748;
  --navy-light: #374151;
  --navy-lighter: #475569;

  /* Functional grays */
  --gray-100: #f8f7fc;
  --gray-200: #f0eef6;
  --gray-300: #e6e4f0;
  --gray-400: #d1ccdf;
  --gray-500: #9a9fae;
  --gray-600: #6b7180;
  --gray-700: #4f5664;
  --gray-800: #333946;
  --gray-900: #1f2430;

  /* Base gradients */
  --gradient-brand-start: #5a8466;
  --gradient-brand-end: #8dbb9a;
  --gradient-primary-start: #7367a8;
  --gradient-primary-end: #595082;

  /* Tables and lists */
  --table-header-bg: #f0eef6;
  --table-row-alt: #f8f7fc;
  --table-border: #e6e4f0;
  --table-row-hover: rgba(89, 80, 130, 0.06);

  /* Modal and card */
  --card-bg: #fbfaf7;
  --card-border: #e6e4f0;
  --card-shadow: rgba(43, 38, 74, 0.1);
  --modal-backdrop: rgba(0, 0, 0, 0.5);

  /* Badge and scrollbar */
  --badge-default-bg: #6b7180;
  --badge-default-text: #ffffff;
  --scrollbar-track: #f0eef6;
  --scrollbar-thumb: #c8c2dc;
  --scrollbar-thumb-hover: #a9a2c0;

  /* Diet type badges */
  --badge-chetogenica: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --badge-chetogenica-text: #1f2430;
  --badge-vegetariana: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  --badge-vegetariana-text: #1f2430;
  --badge-vegana: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --badge-vegana-text: #1f2430;
  --badge-intermittente: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --badge-intermittente-text: #ffffff;
  --badge-mediterranea: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --badge-mediterranea-text: #1f2430;
  --badge-lowcarb: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  --badge-lowcarb-text: #1f2430;
  --badge-normale: linear-gradient(135deg, #7367a8 0%, #595082 100%);
  --badge-normale-text: #ffffff;
  --badge-macro: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --badge-macro-text: #ffffff;
  --badge-paleo: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  --badge-paleo-text: #1f2430;
  --badge-altro: linear-gradient(135deg, #e6e4f0 0%, #c8c2dc 100%);
  --badge-altro-text: #4f5664;
  --badge-medical: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  --badge-medical-text: #c62828;
  --badge-medical-border: #ef5350;
  --badge-medical-hover: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
  --badge-medical-shadow: rgba(198, 40, 40, 0.2);
  --badge-lifestyle: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  --badge-lifestyle-text: #2e7d32;
  --badge-lifestyle-border: #66bb6a;
  --badge-lifestyle-hover: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
  --badge-lifestyle-shadow: rgba(46, 125, 50, 0.2);

  /* Diet status badges */
  --status-attiva-bg: #d4edda;
  --status-attiva-text: #155724;
  --status-completata-bg: #cce5ff;
  --status-completata-text: #004085;
  --status-sospesa-bg: #fff3cd;
  --status-sospesa-text: #856404;
  --status-annullata-bg: #f8d7da;
  --status-annullata-text: #721c24;

  /* Analysis badges */
  --analysis-few-bg: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  --analysis-some-bg: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  --analysis-many-bg: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  --analysis-full-bg: linear-gradient(135deg, #7367a8 0%, #595082 100%);
  --analysis-default-bg: linear-gradient(135deg, #7367a8 0%, #595082 100%);
  --analysis-text: #ffffff;

  /* Measurement add cards */
  --add-plica-bg: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  --add-plica-bg-hover: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
  --add-plica-border: #4caf50;
  --add-plica-text: #4caf50;
  --add-plica-text-hover: #2e7d32;
  --add-circ-bg: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  --add-circ-bg-hover: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
  --add-circ-border: #4caf50;
  --add-circ-text: #4caf50;
  --add-diam-bg: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  --add-diam-bg-hover: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
  --add-diam-border: #2196f3;
  --add-diam-text: #4e4caf;
}

/* =====================================================================
   DARK MODE
   ===================================================================== */

.dark-mode {
  /* Brand */
  --nl-nutri: #9b8fd0;
  --nl-nutri-light: #cdc6ec;
  --nl-train: #6fae82;
  --nl-train-light: #8dbb9a;

  /* Text */
  --text-primary: #f1f1f6;
  --text-secondary: #b7b9c6;
  --text-muted: #7c7f90;
  --text-hint: #5f6272;
  --text-disabled: #4c4f5f;
  --text-inverse: #07080c;
  --text-heading: #f6f3ff;
  --text-link: #9b8fd0;
  --text-link-hover: #cdc6ec;
  --text-stable-white: #ffffff;
  --text-gray: #b7b9c6;
  --text-stable-light-gray: #b9b8b8;
  --text-placeholder: #7c7f90;
  --text-title: #cdc6ec;

  /* Page and layout surfaces */
  --bg-body: #07080c;
  --bg-surface: #1a1d2a;
  --bg-surface-raised: #1a1d2a;
  --bg-surface-card: rgba(20, 22, 33);
  --bg-surface-card-light: #202333;
  --bg-surface-sunken: #0b0c12;
  --bg-surface-sunken-training: #10151a;
  --bg-surface-alt: #171925;
  --bg-surface-translucent: rgba(20, 22, 33, 0.95);
  --bg-sidebar: #0f111a;
  --bg-sidebar-hover: #171925;
  --bg-sidebar-active: #1f2434;
  --bg-navbar: rgba(20, 22, 33, 0.86);
  --bg-input: rgba(255, 255, 255, 0.04);
  --bg-input-disabled: rgba(255, 255, 255, 0.07);
  --bg-light-blue-stable: linear-gradient(180deg, #eef2ff, #f5f7ff);

  /* Interactive backgrounds */
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-hover-medium: rgba(255, 255, 255, 0.1);
  --bg-active: rgba(255, 255, 255, 0.14);
  --bg-selected: rgba(155, 143, 208, 0.18);
  --bg-hover-inverse: rgba(0, 0, 0, 0.2);
  --bg-active-inverse: rgba(0, 0, 0, 0.3);

  /* NutriLift glass surfaces */
  --nl-bg: #07080c;
  --nl-surface: rgba(20, 22, 33, 0.72);
  --nl-surface-solid: #141621;
  --nl-surface-raised: #1a1d2a;

  /* Overlays */
  --overlay-lightest: rgba(255, 255, 255, 0.02);
  --overlay-light: rgba(255, 255, 255, 0.06);
  --overlay-medium: rgba(0, 0, 0, 0.4);
  --overlay-heavy: rgba(0, 0, 0, 0.6);
  --overlay-darker: rgba(0, 0, 0, 0.8);
  --overlay-darkest: rgba(0, 0, 0, 0.95);

  /* Borders */
  --border-lightest: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.09);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-inverse: rgba(255, 255, 255, 0.42);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-dark: rgba(255, 255, 255, 0.24);
  --border-input: rgba(255, 255, 255, 0.12);
  --border-input-focus: #9b8fd0;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.32);
  --shadow-md: rgba(0, 0, 0, 0.45);
  --shadow-lg: rgba(0, 0, 0, 0.6);
  --shadow-focus: rgba(155, 143, 208, 0.28);
  --shadow-brand-xs: rgba(155, 143, 208, 0.14);
  --shadow-brand-sm: rgba(155, 143, 208, 0.22);
  --shadow-brand-md: rgba(155, 143, 208, 0.36);

  /* Primary scale */
  --primary-darkest: #1f1936;
  --primary-darker: #3f3860;
  --primary-dark: #595082;
  --primary: #9b8fd0;
  --primary-light: #b7aedf;
  --primary-lighter: #cdc6ec;
  --primary-bg: rgba(155, 143, 208, 0.16);
  --primary-bg-light: rgba(155, 143, 208, 0.08);
  --primary-border: rgba(155, 143, 208, 0.32);
  --primary-hover: #cdc6ec;
  --primary-active: #7367a8;

  /* Brand / Train green */
  --brand-dark: #4d7a5a;
  --brand: #6fae82;
  --brand-light: #8dbb9a;
  --brand-lighter: #b7d8bf;
  --brand-bg: rgba(111, 174, 130, 0.15);
  --brand-bg-light: rgba(111, 174, 130, 0.08);
  --brand-bg-hover: rgba(111, 174, 130, 0.16);
  --brand-bg-active: rgba(111, 174, 130, 0.26);
  --brand-border: rgba(111, 174, 130, 0.34);
  --brand-shadow: rgba(111, 174, 130, 0.3);

  /* Success */
  --success-darkest: #065f46;
  --success-dark: #059669;
  --success: #10b981;
  --success-medium: #34d399;
  --success-light: #6ee7b7;
  --success-lighter: #a7f3d0;
  --success-bg: rgba(16, 185, 129, 0.15);
  --success-bg-message: #d4edda;
  --success-bg-light: rgba(16, 185, 129, 0.08);
  --success-bg-lightest: rgba(16, 185, 129, 0.04);
  --success-border: rgba(16, 185, 129, 0.3);
  --success-text: #6ee7b7;
  --success-text-message: #155724;
  --success-hover: rgba(16, 185, 129, 0.12);
  --success-active: rgba(16, 185, 129, 0.25);

  /* Danger */
  --danger-darkest: #7f1d1d;
  --danger-dark: #b91c1c;
  --danger: #ef4444;
  --danger-medium: #f87171;
  --danger-light: #fca5a5;
  --danger-lighter: #fecaca;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --danger-bg-message: #f8d7da;
  --danger-bg-light: rgba(239, 68, 68, 0.08);
  --danger-bg-lightest: rgba(239, 68, 68, 0.04);
  --danger-border: rgba(239, 68, 68, 0.3);
  --danger-border-dark: rgba(239, 68, 68, 0.3);
  --danger-text: #fca5a5;
  --danger-text-message: #721c24;
  --danger-hover: rgba(239, 68, 68, 0.12);
  --danger-active: rgba(239, 68, 68, 0.25);

  /* Warning */
  --warning-darkest: #78350f;
  --warning-dark: #b45309;
  --warning: #f59e0b;
  --warning-medium: #fbbf24;
  --warning-light: #fde68a;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --warning-bg-message: #fff3cd;
  --warning-pdf: #fbd38d;
  --warning-bg-light: rgba(245, 158, 11, 0.08);
  --warning-bg-lightest: rgba(245, 158, 11, 0.04);
  --warning-border: rgba(245, 158, 11, 0.3);
  --warning-text: #fde68a;
  --warning-text-message: #856404;
  --warning-hover: rgba(245, 158, 11, 0.12);

  /* Info */
  --info-dark: #0e7490;
  --info: #06b6d4;
  --info-light: #22d3ee;
  --info-bg: rgba(6, 182, 212, 0.15);
  --info-bg-message: #d1ecf1;
  --info-bg-light: rgba(6, 182, 212, 0.08);
  --info-bg-lightest: rgba(6, 182, 212, 0.04);
  --info-border: rgba(6, 182, 212, 0.3);
  --info-text: #67e8f9;
  --info-text-message: #0c5460;

  /* Soft action buttons */
  --alt-btn: rgba(6, 182, 212, 0.22);
  --delete-btn-bg: rgba(239, 68, 68, 0.22);
  --delete-btn-border: rgba(239, 68, 68, 0.34);
  --delete-btn-boder: var(--delete-btn-border);
  --action-btn-bg: rgba(155, 143, 208, 0.14);
  --action-btn-border: rgba(155, 143, 208, 0.34);
  --success-btn-soft-bg: rgba(111, 174, 130, 0.18);
  --success-btn-soft-border: rgba(111, 174, 130, 0.34);
  --peach-btn-soft-bg: rgba(217, 119, 6, 0.18);
  --peach-btn-soft-border: rgba(245, 158, 11, 0.34);
  --blue-btn-soft-bg: rgba(37, 99, 235, 0.18);
  --blue-btn-soft-border: rgba(96, 165, 250, 0.34);
  --cyan-btn-soft-bg: rgba(2, 132, 199, 0.18);
  --cyan-btn-soft-border: rgba(34, 211, 238, 0.32);
  --purple-btn-soft-bg: rgba(155, 143, 208, 0.16);
  --purple-btn-soft-border: rgba(155, 143, 208, 0.34);
  --pink-btn-soft-bg: rgba(219, 39, 119, 0.18);
  --pink-btn-soft-border: rgba(244, 114, 182, 0.34);
  --quartary-btn-soft-bg: rgba(30, 64, 175, 0.18);
  --quartary-btn-soft-border: rgba(56, 189, 248, 0.32);
  --quintary-btn-soft-bg: rgba(124, 58, 237, 0.18);
  --quintary-btn-soft-border: rgba(129, 140, 248, 0.34);
  --sestiary-btn-soft-bg: rgba(180, 83, 9, 0.18);
  --sestiary-btn-soft-border: rgba(251, 191, 36, 0.34);
  --septiary-btn-soft-bg: rgba(71, 85, 105, 0.24);
  --septiary-btn-soft-border: rgba(148, 163, 184, 0.3);
  --management-btn-soft-bg: rgba(168, 85, 247, 0.18);
  --management-btn-soft-border: rgba(192, 132, 252, 0.34);

  /* Violet and pink accents */
  --violet-dark: #7367a8;
  --violet: #9b8fd0;
  --violet-medium: #b7aedf;
  --violet-light: #cdc6ec;
  --violet-bg: rgba(155, 143, 208, 0.15);
  --violet-bg-light: rgba(155, 143, 208, 0.08);
  /* Stato food-item (planning dieta) — dark: grigio manuale VISIBILE, non trasparente */
  /* "da verificare" (❓): viola distinto anche in dark */
  --food-slate-bg: rgba(124, 58, 237, 0.22);
  --food-slate-line: rgba(167, 139, 250, 0.60);
  --food-manual-fill: #363b47;
  --food-alt-line: #3b82f6;
  /* Deroga (🔓): ambra/oro visibile anche in dark */
  --food-deroga-bg: rgba(217, 119, 6, 0.25);
  --food-deroga-line: rgba(251, 191, 36, 0.60);
  --violet-border: rgba(155, 143, 208, 0.3);
  --violet-hover: rgba(155, 143, 208, 0.12);
  --pink-dark: #db2777;
  --pink: #ec4899;
  --pink-light: #f9a8d4;
  --pink-bg: rgba(236, 72, 153, 0.15);
  --pink-bg-light: rgba(236, 72, 153, 0.08);

  /* Navy */
  --navy-darkest: #020617;
  --navy-dark: #0f172a;
  --navy: #1e293b;
  --navy-medium: #334155;
  --navy-light: #475569;
  --navy-lighter: #64748b;

  /* Functional grays */
  --gray-100: #141621;
  --gray-200: #1a1d2a;
  --gray-300: #202333;
  --gray-400: #303447;
  --gray-500: #4c4f5f;
  --gray-600: #7c7f90;
  --gray-700: #b7b9c6;
  --gray-800: #d9d9e4;
  --gray-900: #f1f1f6;

  /* Gradients */
  --gradient-app: linear-gradient(135deg, #7367a8 0%, #595082 100%);
  --gradient-app-start: #595082;
  --gradient-app-end: #595082; 
  --gradient-app-palette: #595082;
  --gradient-app-training:#41644a;
  --gradient-success-btn: linear-gradient(135deg, #4d7a5a 0%, #6fae82 100%);
  --gradient-danger-btn: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  --gradient-cyan-btn: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  --gradient-purple-btn: linear-gradient(135deg, #7367a8 0%, #595082 100%);
  --gradient-pink-btn: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
  --gradient-peach-btn: linear-gradient(135deg, #b45309 0%, #d69121 100%);
  --gradient-blue-btn: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --gradient-quartary-btn: linear-gradient(135deg, #0284c7 0%, #1e40af 100%);
  --gradient-quintary-btn: linear-gradient(135deg, #7c3aed 0%, #4338ca 100%);
  --gradient-sestiary-btn: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  --gradient-septiary-btn: linear-gradient(135deg, #374151 0%, #6b7280 100%);
  --gradient-management-btn: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
  --gradient-dark-btn: linear-gradient(135deg, #141621 0%, #202333 100%);
  --gradient-brand-start: #6fae82;
  --gradient-brand-end: #8dbb9a;
  --gradient-primary-start: #9b8fd0;
  --gradient-primary-end: #7367a8;
  --gradient-summary: linear-gradient(to right, var(--bg-surface-raised), var(--bg-surface-alt));
  --gradient-score-total: linear-gradient(to bottom, var(--bg-surface), var(--success-bg-lightest));

  /* Tables and lists */
  --table-header-bg: #1a1d2a;
  --table-row-alt: #171925;
  --table-border: rgba(255, 255, 255, 0.09);
  --table-row-hover: rgba(255, 255, 255, 0.05);

  /* Modal and card */
  --card-bg: rgba(20, 22, 33);
  --card-border: rgba(255, 255, 255, 0.09);
  --card-shadow: rgba(0, 0, 0, 0.42);
  --modal-backdrop: rgba(0, 0, 0, 0.72);

  /* Badge and scrollbar */
  --badge-default-bg: #303447;
  --badge-default-text: #f1f1f6;
  --scrollbar-track: #0b0c12;
  --scrollbar-thumb: #303447;
  --scrollbar-thumb-hover: #4c4f5f;

  /* Diet type badges */
  --badge-chetogenica: linear-gradient(135deg, #d4305a 0%, #c9a800 100%);
  --badge-chetogenica-text: #ffffff;
  --badge-vegetariana: linear-gradient(135deg, #1a9c5a 0%, #2a8fb0 100%);
  --badge-vegetariana-text: #ffffff;
  --badge-vegana: linear-gradient(135deg, #2aaba5 0%, #c47a9a 100%);
  --badge-vegana-text: #ffffff;
  --badge-intermittente: linear-gradient(135deg, #1a6fd4 0%, #0098c8 100%);
  --badge-intermittente-text: #ffffff;
  --badge-mediterranea: linear-gradient(135deg, #1aaa50 0%, #15a88e 100%);
  --badge-mediterranea-text: #ffffff;
  --badge-lowcarb: linear-gradient(135deg, #d4555a 0%, #a84a8a 100%);
  --badge-lowcarb-text: #ffffff;
  --badge-normale: linear-gradient(135deg, #7367a8 0%, #595082 100%);
  --badge-normale-text: #ffffff;
  --badge-macro: linear-gradient(135deg, #b050c8 0%, #c43050 100%);
  --badge-macro-text: #ffffff;
  --badge-paleo: linear-gradient(135deg, #8a5a2a 0%, #a05530 100%);
  --badge-paleo-text: #ffffff;
  --badge-altro: linear-gradient(135deg, #303447 0%, #4c4f5f 100%);
  --badge-altro-text: #d9d9e4;
  --badge-medical: linear-gradient(135deg, #7a1a1a 0%, #a02020 100%);
  --badge-medical-text: #fca5a5;
  --badge-medical-border: #b91c1c;
  --badge-medical-hover: linear-gradient(135deg, #8a2020 0%, #b02828 100%);
  --badge-medical-shadow: rgba(239, 68, 68, 0.3);
  --badge-lifestyle: linear-gradient(135deg, #0a4a20 0%, #156030 100%);
  --badge-lifestyle-text: #6ee7b7;
  --badge-lifestyle-border: #059669;
  --badge-lifestyle-hover: linear-gradient(135deg, #156030 0%, #1a7a3a 100%);
  --badge-lifestyle-shadow: rgba(16, 185, 129, 0.3);

  /* Diet status badges */
  --status-attiva-bg: rgba(16, 185, 129, 0.2);
  --status-attiva-text: #6ee7b7;
  --status-completata-bg: rgba(59, 130, 246, 0.2);
  --status-completata-text: #93c5fd;
  --status-sospesa-bg: rgba(245, 158, 11, 0.2);
  --status-sospesa-text: #fde68a;
  --status-annullata-bg: rgba(239, 68, 68, 0.2);
  --status-annullata-text: #fca5a5;

  /* Analysis badges */
  --analysis-few-bg: rgba(59, 130, 246, 0.12);
  --analysis-some-bg: rgba(16, 185, 129, 0.12);
  --analysis-many-bg: rgba(245, 158, 11, 0.12);
  --analysis-full-bg: rgba(155, 143, 208, 0.14);
  --analysis-default-bg: rgba(155, 143, 208, 0.14);
  --analysis-text: var(--text-primary);

  /* Measurement add cards */
  --add-plica-bg: rgba(16, 185, 129, 0.08);
  --add-plica-bg-hover: rgba(16, 185, 129, 0.15);
  --add-plica-border: rgba(16, 185, 129, 0.4);
  --add-plica-text: var(--success);
  --add-plica-text-hover: var(--success-light);
  --add-circ-bg: rgba(16, 185, 129, 0.08);
  --add-circ-bg-hover: rgba(16, 185, 129, 0.15);
  --add-circ-border: rgba(16, 185, 129, 0.4);
  --add-circ-text: var(--success);
  --add-diam-bg: rgba(59, 130, 246, 0.08);
  --add-diam-bg-hover: rgba(59, 130, 246, 0.15);
  --add-diam-border: rgba(59, 130, 246, 0.4);
  --add-diam-text: var(--primary-light);
}

/* =====================================================================
   ICON RECOLOR
   ===================================================================== */

:root {
  --icon-filter: brightness(0) saturate(100%) invert(28%) sepia(18%)
    saturate(1180%) hue-rotate(220deg) brightness(92%) contrast(88%);
  --icon-filter-on-dark-btn: brightness(0) invert(1);
}

.dark-mode {
  --icon-filter: brightness(0) saturate(100%) invert(92%) sepia(0%)
    saturate(0%) hue-rotate(180deg) brightness(98%) contrast(88%);
}

img.ui-icon,
img.section-title-icon,
img.tab-icon,
img.btn-icon-img {
  filter: var(--icon-filter);
  transition: filter 0.2s ease;
}

img.ui-icon[src*="/macros/"],
img.ui-icon[src*="/meals/"],
img.ui-icon[src*="/plicometria/"],
img.ui-icon[src*="/circonferenze/"],
img.ui-icon[src*="/diete/"],
img.ui-icon[src*="/logo/"],
img.ui-icon[src*="/obiettivi/"] {
  filter: none;
}

/* =====================================================================
   LIQUID GLASS THEME SWITCH
   ===================================================================== */

.theme-switch {
  --ts-width: 58px;
  --ts-height: 30px;
  --ts-pad: 3px;
  --ts-travel: 28px;
  position: relative;
  width: var(--ts-width);
  height: var(--ts-height);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -14px 24px rgba(89, 80, 130, 0.12),
    0 12px 30px -18px rgba(31, 36, 48, 0.6);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  cursor: pointer;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    transform 0.18s ease;
}

.theme-switch:hover {
  transform: translateY(-1px);
  border-color: rgba(89, 80, 130, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -14px 24px rgba(89, 80, 130, 0.15),
    0 16px 34px -18px rgba(31, 36, 48, 0.72);
}

.theme-switch:focus-visible {
  outline: 3px solid rgba(115, 103, 168, 0.28);
  outline-offset: 3px;
}

.theme-switch::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.62) 43%, transparent 58%),
    radial-gradient(circle at 20% 25%, rgba(248, 198, 98, 0.28), transparent 30%);
  opacity: 0.82;
  transform: translateX(-24%);
  transition: transform 0.45s ease, opacity 0.25s ease;
  pointer-events: none;
}

.theme-switch.is-dark {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(42, 37, 64, 0.78), rgba(7, 8, 12, 0.68)),
    rgba(20, 22, 33, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -14px 24px rgba(0, 0, 0, 0.3),
    0 14px 34px -18px rgba(0, 0, 0, 0.86);
}

.theme-switch.is-dark::before {
  opacity: 0.5;
  transform: translateX(22%);
  background:
    linear-gradient(110deg, transparent 0 30%, rgba(255, 255, 255, 0.34) 45%, transparent 60%),
    radial-gradient(circle at 78% 35%, rgba(155, 143, 208, 0.32), transparent 34%);
}

.theme-switch__track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.theme-switch__track::before,
.theme-switch__track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.theme-switch__track::before {
  left: 12px;
  background: rgba(248, 198, 98, 0.9);
  box-shadow: 0 0 12px rgba(248, 198, 98, 0.55);
}

.theme-switch__track::after {
  right: 12px;
  background: rgba(205, 198, 236, 0.92);
  box-shadow: 0 0 12px rgba(155, 143, 208, 0.58);
  opacity: 0.42;
}

.theme-switch.is-dark .theme-switch__track::before {
  opacity: 0.34;
}

.theme-switch.is-dark .theme-switch__track::after {
  opacity: 1;
}

.theme-switch__orb {
  position: absolute;
  top: var(--ts-pad);
  left: var(--ts-pad);
  width: calc(var(--ts-height) - (var(--ts-pad) * 2));
  height: calc(var(--ts-height) - (var(--ts-pad) * 2));
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 28%, #fff8d6 0 18%, #f8c662 38%, #d9a441 78%);
  box-shadow:
    inset -4px -5px 8px rgba(120, 84, 16, 0.22),
    inset 3px 3px 8px rgba(255, 255, 255, 0.74),
    0 6px 14px rgba(120, 84, 16, 0.2);
  transform: translateX(0);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.28s ease,
    box-shadow 0.28s ease;
}


.theme-switch__track::after {
  right: 12px;
  background: rgba(205, 198, 236, 0.92);
  box-shadow: 0 0 12px rgba(155, 143, 208, 0.58);
  opacity: 0.42;
}

.theme-switch.is-dark .theme-switch__track::before { opacity: 0.34; }
.theme-switch.is-dark .theme-switch__track::after { opacity: 1; }

.theme-switch__orb {
  position: absolute;
  top: var(--ts-pad);
  left: var(--ts-pad);
  width: calc(var(--ts-height) - (var(--ts-pad) * 2));
  height: calc(var(--ts-height) - (var(--ts-pad) * 2));
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 28%, #fff8d6 0 18%, #f8c662 38%, #d9a441 78%);
  box-shadow:
    inset -4px -5px 8px rgba(120, 84, 16, 0.22),
    inset 3px 3px 8px rgba(255, 255, 255, 0.74),
    0 6px 14px rgba(120, 84, 16, 0.2);
  transform: translateX(0);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s ease, box-shadow 0.28s ease;
}

.theme-switch__track::after {
  right: 12px;
  background: rgba(205, 198, 236, 0.92);
  box-shadow: 0 0 12px rgba(155, 143, 208, 0.58);
  opacity: 0.42;
}

.theme-switch.is-dark .theme-switch__track::before { opacity: 0.34; }
.theme-switch.is-dark .theme-switch__track::after { opacity: 1; }

.theme-switch__orb {
  position: absolute;
  top: var(--ts-pad);
  left: var(--ts-pad);
  width: calc(var(--ts-height) - (var(--ts-pad) * 2));
  height: calc(var(--ts-height) - (var(--ts-pad) * 2));
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 28%, #fff8d6 0 18%, #f8c662 38%, #d9a441 78%);
  box-shadow:
    inset -4px -5px 8px rgba(120, 84, 16, 0.22),
    inset 3px 3px 8px rgba(255, 255, 255, 0.74),
    0 6px 14px rgba(120, 84, 16, 0.2);
  transform: translateX(0);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s ease, box-shadow 0.28s ease;
}

.theme-switch__orb::before {
  content: "";
  position: absolute;
  inset: 4px 7px auto 5px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  filter: blur(0.2px);
}

.theme-switch.is-dark .theme-switch__orb {
  transform: translateX(var(--ts-travel));
  background:
    radial-gradient(circle at 70% 30%, #e7e2ff 0 12%, #9b8fd0 38%, #595082 82%);
  box-shadow:
    inset -4px -5px 8px rgba(20, 15, 45, 0.34),
    inset 3px 3px 8px rgba(255, 255, 255, 0.2),
    0 6px 16px rgba(89, 80, 130, 0.42);
}

.theme-switch__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch,
  .theme-switch::before,
  .theme-switch__track::before,
  .theme-switch__track::after,
  .theme-switch__orb {
    transition: none;
  }
}