@charset "UTF-8";
/* ==========================================================
NEXIGRID – GLOBAL VARIABLES
----------------------------------------------------------
File centrale delle variabili del sistema.

Contiene:

1) Variabili CSS runtime (:root)
   - Colori globali
   - Tipografia
   - Spaziature
   - Variabili comuni dei componenti

2) Mappe SCSS di sistema
   - Palette colori utility
   - Breakpoint
   - Grid
   - Z-index layers
   - Gap scale
   - Flex alignment helpers

Questo file rappresenta la base del design system.
========================================================== */
/* ==========================================================
NG-COLORS MAP
----------------------------------------------------------
Palette utilizzata per generare utility classes:

.text-*
.bg-*
.border-*

Serve come fonte unica per le utility di colore.
========================================================== */
/* ==========================================================
LAYOUT STRUCTURE
========================================================== */
/* ==========================================================
Z-INDEX SYSTEM
========================================================== */
/* ==========================================================
GRID SYSTEM
========================================================== */
/* ==========================================================
FLEX / ALIGNMENT MAPS
========================================================== */
/* ==========================================================
SPACING SCALE
========================================================== */
/* ==========================================================
GLOBAL BREAKPOINT ALIAS
========================================================== */
/* ==========================================================
GLOBAL ROOT
========================================================== */
/* Brand "neutri" (superfici) esclusi dalla derivazione L2 automatica.
   Definito a livello globale per essere disponibile sia dentro :root
   (formule light) sia dentro @mixin ng-theme-dark (override formule dark). */
:root {
  /* ======================================================
  PALETTE ROOT
  ====================================================== */
  --ng-color-white: rgba(255,255,255,1);
  --ng-color-black: rgba(0,0,0,1);
  --ng-color-midgrey: rgba(128,128,128,1);
  --ng-primary: #4a2a86;
  --ng-primary-bg: #4a2a86;
  --ng-primary-text: #ffffff;
  --ng-primary-border: #382066;
  --ng-primary-hover: rgb(62.9, 35.7, 113.9);
  --ng-primary-dark: #4a2a86;
  --ng-primary-light: #ffffff;
  --ng-primary-soft: rgb(216.2863636364, 204.1409090909, 239.0590909091);
  --ng-primary-active: rgb(60.68, 34.44, 109.88);
  --ng-primary-focus: rgb(68.08, 38.64, 123.28);
  --ng-primary-ring: rgba(74, 42, 134, 0.35);
  --ng-primary-outline: rgb(65.12, 36.96, 117.92);
  --ng-primary-disabled: rgb(129.1806818182, 89.7079545455, 203.1920454545);
  --ng-secondary: #7d2342;
  --ng-secondary-bg: #7d2342;
  --ng-secondary-text: #ffffff;
  --ng-secondary-border: #611a34;
  --ng-secondary-hover: rgb(106.25, 29.75, 56.1);
  --ng-secondary-dark: #7d2342;
  --ng-secondary-light: #ffffff;
  --ng-secondary-soft: rgb(239.6875, 200.3125, 213.875);
  --ng-secondary-active: rgb(102.5, 28.7, 54.12);
  --ng-secondary-focus: rgb(115, 32.2, 60.72);
  --ng-secondary-ring: rgba(125, 35, 66, 0.35);
  --ng-secondary-outline: rgb(110, 30.8, 58.08);
  --ng-secondary-disabled: rgb(205.234375, 77.265625, 121.34375);
  --ng-success: #1da571;
  --ng-success-bg: #1da571;
  --ng-success-text: #ffffff;
  --ng-success-border: #18875d;
  --ng-success-hover: rgb(24.65, 140.25, 96.05);
  --ng-success-dark: #1da571;
  --ng-success-light: #ffffff;
  --ng-success-soft: rgb(201.2474226804, 245.5525773196, 228.612371134);
  --ng-success-active: rgb(23.78, 135.3, 92.66);
  --ng-success-focus: rgb(26.68, 151.8, 103.96);
  --ng-success-ring: rgba(29, 165, 113, 0.35);
  --ng-success-outline: rgb(25.52, 145.2, 99.44);
  --ng-success-disabled: rgb(80.3041237113, 224.2958762887, 169.2402061856);
  --ng-info: #119bdc;
  --ng-info-bg: #119bdc;
  --ng-info-text: #ffffff;
  --ng-info-border: #0e7fb4;
  --ng-info-hover: rgb(14.45, 131.75, 187);
  --ng-info-dark: #119bdc;
  --ng-info-light: #ffffff;
  --ng-info-soft: rgb(204.3164556962, 236.1088607595, 251.0835443038);
  --ng-info-active: rgb(13.94, 127.1, 180.4);
  --ng-info-focus: rgb(15.64, 142.6, 202.4);
  --ng-info-ring: rgba(17, 155, 220, 0.35);
  --ng-info-outline: rgb(14.96, 136.4, 193.6);
  --ng-info-disabled: rgb(90.2784810127, 193.6037974684, 242.2715189873);
  --ng-warning: #dd7900;
  --ng-warning-bg: #dd7900;
  --ng-warning-text: #ffffff;
  --ng-warning-border: #b56300;
  --ng-warning-hover: rgb(187.85, 102.85, 0);
  --ng-warning-dark: #dd7900;
  --ng-warning-light: #ffffff;
  --ng-warning-soft: rgb(255, 228.8461538462, 197.2);
  --ng-warning-active: rgb(181.22, 99.22, 0);
  --ng-warning-focus: rgb(203.32, 111.32, 0);
  --ng-warning-ring: rgba(221, 121, 0, 0.35);
  --ng-warning-outline: rgb(194.48, 106.48, 0);
  --ng-warning-disabled: rgb(255, 170, 67.15);
  --ng-danger: #f2415c;
  --ng-danger-bg: #f2415c;
  --ng-danger-text: #ffffff;
  --ng-danger-border: #d82e47;
  --ng-danger-hover: rgb(239.0509852217, 21.8990147783, 55.0238916256);
  --ng-danger-dark: #f2415c;
  --ng-danger-light: #ffffff;
  --ng-danger-soft: rgb(252.4, 217, 222.4);
  --ng-danger-active: rgb(235.6187192118, 16.1212807882, 49.6039408867);
  --ng-danger-focus: rgb(240.4271921182, 42.0128078818, 72.279408867);
  --ng-danger-ring: rgba(242, 65, 92, 0.35);
  --ng-danger-outline: rgb(239.6407881773, 30.5192118227, 62.4191133005);
  --ng-danger-disabled: rgb(246.55, 131.5, 149.05);
  --ng-mute: #c8c8c8;
  --ng-mute-bg: #c8c8c8;
  --ng-mute-text: #646464;
  --ng-mute-border: #dcdcdc;
  --ng-mute-hover: #aaaaaa;
  --ng-mute-dark: #5a5a5a;
  --ng-mute-light: #646464;
  --ng-mute-soft: #f4f4f4;
  --ng-mute-active: #a4a4a4;
  --ng-mute-focus: #b8b8b8;
  --ng-mute-ring: rgba(200, 200, 200, 0.35);
  --ng-mute-outline: #b0b0b0;
  --ng-mute-disabled: rgb(219.25, 219.25, 219.25);
  --ng-blue: #3b82f6;
  --ng-blue-bg: #3b82f6;
  --ng-blue-text: #ffffff;
  --ng-blue-border: #2563eb;
  --ng-blue-hover: rgb(15.2585365854, 102.1036585366, 243.9914634146);
  --ng-blue-dark: #3b82f6;
  --ng-blue-light: #ffffff;
  --ng-blue-soft: rgb(215.8, 230, 253.2);
  --ng-blue-active: rgb(10.98, 97.6, 239.12);
  --ng-blue-focus: rgb(35.6712195122, 115.1219512195, 244.9287804878);
  --ng-blue-ring: rgba(59, 130, 246, 0.35);
  --ng-blue-outline: rgb(24.0068292683, 107.6829268293, 244.3931707317);
  --ng-blue-disabled: rgb(127.6, 173.75, 249.15);
  --ng-blue-sky: #6cc8ff;
  --ng-blue-sky-bg: #6cc8ff;
  --ng-blue-sky-text: #07456e;
  --ng-blue-sky-border: #2ea8f5;
  --ng-blue-sky-hover: rgb(53.55, 179.6275510204, 255);
  --ng-blue-sky-dark: #1f8fd6;
  --ng-blue-sky-light: #bce4ff;
  --ng-blue-sky-soft: rgb(225.6, 244, 255);
  --ng-blue-sky-active: rgb(42.66, 175.5530612245, 255);
  --ng-blue-sky-focus: rgb(78.96, 189.1346938776, 255);
  --ng-blue-sky-ring: rgba(108, 200, 255, 0.35);
  --ng-blue-sky-outline: rgb(64.44, 183.7020408163, 255);
  --ng-blue-sky-disabled: rgb(159.45, 219.25, 255);
  --ng-green: #2e7d32;
  --ng-green-bg: #2e7d32;
  --ng-green-text: #ffffff;
  --ng-green-border: #246428;
  --ng-green-hover: rgb(39.1, 106.25, 42.5);
  --ng-green-dark: #1b5e20;
  --ng-green-light: #4caf50;
  --ng-green-soft: rgb(205.4385964912, 236.7614035088, 207.0245614035);
  --ng-green-active: rgb(37.72, 102.5, 41);
  --ng-green-focus: rgb(42.32, 115, 46);
  --ng-green-ring: rgba(46, 125, 50, 0.35);
  --ng-green-outline: rgb(40.48, 110, 44);
  --ng-green-disabled: rgb(93.9254385965, 195.7245614035, 99.0798245614);
  --ng-lime: #9edc00;
  --ng-lime-bg: #9edc00;
  --ng-lime-text: #476f11;
  --ng-lime-border: #82b800;
  --ng-lime-hover: rgb(134.3, 187, 0);
  --ng-lime-dark: #5a7d00;
  --ng-lime-light: #c0ff25;
  --ng-lime-soft: rgb(238.6545454545, 255, 197);
  --ng-lime-active: rgb(129.56, 180.4, 0);
  --ng-lime-focus: rgb(145.36, 202.4, 0);
  --ng-lime-ring: rgba(158, 220, 0, 0.35);
  --ng-lime-outline: rgb(139.04, 193.6, 0);
  --ng-lime-disabled: rgb(201.8772727273, 255, 66.5);
  --ng-aguagreen: #0e9c7e;
  --ng-aguagreen-bg: #0e9c7e;
  --ng-aguagreen-text: #ffffff;
  --ng-aguagreen-border: #0b7d64;
  --ng-aguagreen-hover: rgb(11.9, 132.6, 107.1);
  --ng-aguagreen-dark: #0c7a62;
  --ng-aguagreen-light: #ffffff;
  --ng-aguagreen-soft: rgb(192.6, 249.4, 237.4);
  --ng-aguagreen-active: rgb(11.48, 127.92, 103.32);
  --ng-aguagreen-focus: rgb(12.88, 143.52, 115.92);
  --ng-aguagreen-ring: rgba(14, 156, 126, 0.35);
  --ng-aguagreen-outline: rgb(12.32, 137.28, 110.88);
  --ng-aguagreen-disabled: rgb(52.2, 236.8, 197.8);
  --ng-indigo: #4f46e5;
  --ng-indigo-bg: #4f46e5;
  --ng-indigo-text: #ffffff;
  --ng-indigo-border: #4338ca;
  --ng-indigo-hover: rgb(42.1575829384, 31.3170616114, 222.8329383886);
  --ng-indigo-dark: #4f46e5;
  --ng-indigo-light: #ffffff;
  --ng-indigo-soft: rgb(219.8, 218, 249.8);
  --ng-indigo-active: rgb(40.6696682464, 30.2117535545, 214.9682464455);
  --ng-indigo-focus: rgb(59.0477725118, 49.0274881517, 226.0525118483);
  --ng-indigo-ring: rgba(79, 70, 229, 0.35);
  --ng-indigo-outline: rgb(49.0716587678, 38.5412322275, 224.5787677725);
  --ng-indigo-disabled: rgb(140.6, 134.75, 238.1);
  --ng-purple: #a027f0;
  --ng-purple-bg: #a027f0;
  --ng-purple-text: #ffffff;
  --ng-purple-border: #810ecb;
  --ng-purple-hover: rgb(139.6207792208, 15.3993506494, 221.7506493506);
  --ng-purple-dark: #a027f0;
  --ng-purple-light: #ffffff;
  --ng-purple-soft: rgb(236, 211.8, 252);
  --ng-purple-active: rgb(134.692987013, 14.8558441558, 213.9241558442);
  --ng-purple-focus: rgb(150.8207792208, 18.1293506494, 238.5506493506);
  --ng-purple-ring: rgba(160, 39, 240, 0.35);
  --ng-purple-outline: rgb(144.5485714286, 15.9428571429, 229.5771428571);
  --ng-purple-disabled: rgb(193.25, 114.6, 245.25);
  --ng-purple-heart: #b23a8a;
  --ng-purple-heart-bg: #b23a8a;
  --ng-purple-heart-text: #ffffff;
  --ng-purple-heart-border: #7d2962;
  --ng-purple-heart-hover: rgb(151.3, 49.3, 117.3);
  --ng-purple-heart-dark: #b23a8a;
  --ng-purple-heart-light: #ffffff;
  --ng-purple-heart-soft: rgb(241.5322033898, 213.6677966102, 232.2440677966);
  --ng-purple-heart-active: rgb(145.96, 47.56, 113.16);
  --ng-purple-heart-focus: rgb(163.76, 53.36, 126.96);
  --ng-purple-heart-ring: rgba(178, 58, 138, 0.35);
  --ng-purple-heart-outline: rgb(156.64, 51.04, 121.44);
  --ng-purple-heart-disabled: rgb(211.2296610169, 120.6703389831, 181.043220339);
  --ng-cyan: #009dd9;
  --ng-cyan-bg: #009dd9;
  --ng-cyan-text: #ffffff;
  --ng-cyan-border: #0081b2;
  --ng-cyan-hover: rgb(0, 133.45, 184.45);
  --ng-cyan-dark: #0081b2;
  --ng-cyan-light: #ffffff;
  --ng-cyan-soft: rgb(196.4, 238.797235023, 255);
  --ng-cyan-active: rgb(0, 128.74, 177.94);
  --ng-cyan-focus: rgb(0, 144.44, 199.64);
  --ng-cyan-ring: rgba(0, 157, 217, 0.35);
  --ng-cyan-outline: rgb(0, 138.16, 190.96);
  --ng-cyan-disabled: rgb(64.55, 202.3410138249, 255);
  --ng-magenta: #d4007f;
  --ng-magenta-bg: #d4007f;
  --ng-magenta-text: #ffffff;
  --ng-magenta-border: #b0006a;
  --ng-magenta-hover: rgb(180.2, 0, 107.95);
  --ng-magenta-dark: #b0006a;
  --ng-magenta-light: #ffffff;
  --ng-magenta-soft: rgb(255, 195.4, 231.1037735849);
  --ng-magenta-active: rgb(173.84, 0, 104.14);
  --ng-magenta-focus: rgb(195.04, 0, 116.84);
  --ng-magenta-ring: rgba(212, 0, 127, 0.35);
  --ng-magenta-outline: rgb(186.56, 0, 111.76);
  --ng-magenta-disabled: rgb(255, 61.3, 177.3372641509);
  --ng-yellow: #ffd200;
  --ng-yellow-bg: #ffd200;
  --ng-yellow-text: #8a6800;
  --ng-yellow-border: #e6bd00;
  --ng-yellow-hover: rgb(216.75, 178.5, 0);
  --ng-yellow-dark: #e6bd00;
  --ng-yellow-light: #000000;
  --ng-yellow-soft: #fff6cc;
  --ng-yellow-active: rgb(209.1, 172.2, 0);
  --ng-yellow-focus: rgb(234.6, 193.2, 0);
  --ng-yellow-ring: rgba(255, 210, 0, 0.35);
  --ng-yellow-outline: rgb(224.4, 184.8, 0);
  --ng-yellow-disabled: rgb(255, 225.75, 89.25);
  --ng-clight: #f0f0f0;
  --ng-clight-bg: #f0f0f0;
  --ng-clight-text: #1f2937;
  --ng-clight-border: #e5e7eb;
  --ng-clight-hover: rgb(227.6, 230.34, 235.82);
  --ng-clight-dark: #e5e7eb;
  --ng-clight-light: #ffffff;
  --ng-clight-soft: rgb(245.4, 246.36, 248.28);
  --ng-clight-active: rgb(196.8, 196.8, 196.8);
  --ng-clight-focus: rgb(220.8, 220.8, 220.8);
  --ng-clight-ring: rgba(240, 240, 240, 0.35);
  --ng-clight-outline: rgb(211.2, 211.2, 211.2);
  --ng-clight-disabled: rgb(245.25, 245.25, 245.25);
  --ng-cdark: #424242;
  --ng-cdark-bg: #424242;
  --ng-cdark-text: #f0f0f0;
  --ng-cdark-border: #5a5a5a;
  --ng-cdark-hover: rgb(100.02, 100.02, 100.02);
  --ng-cdark-dark: #2b2b2b;
  --ng-cdark-light: #6e6e6e;
  --ng-cdark-soft: rgb(88.68, 88.68, 88.68);
  --ng-cdark-active: rgb(54.12, 54.12, 54.12);
  --ng-cdark-focus: rgb(60.72, 60.72, 60.72);
  --ng-cdark-ring: rgba(66, 66, 66, 0.35);
  --ng-cdark-outline: rgb(58.08, 58.08, 58.08);
  --ng-cdark-disabled: rgb(132.15, 132.15, 132.15);
  --ng-g-0: #ffffff;
  --ng-g-10: #f5f5f5;
  --ng-g-20: #e5e5e5;
  --ng-g-30: #d4d4d4;
  --ng-g-40: #a3a3a3;
  --ng-g-50: #737373;
  --ng-g-60: #525252;
  --ng-g-70: #404040;
  --ng-g-80: #262626;
  --ng-g-90: #171717;
  --ng-g-100: #000000;
  /* ======================================================
  GLOBAL Z-INDEX
  ====================================================== */
  --ng-z-card: 100;
  --ng-z-table: 150;
  --ng-z-sidebar: 200;
  --ng-z-header: 300;
  --ng-z-dropdown: 400;
  --ng-z-dropdown_menu: 401;
  --ng-z-overlay: 700;
  --ng-z-modal: 750;
  --ng-z-back-to-top: 770;
  --ng-z-snackbar: 775;
  --ng-z-popover: 790;
  --ng-z-tooltip: 800;
  /* ======================================================
  GLOBAL SURFACE COLORS
  ------------------------------------------------------
  Colori principali di layout (body, superfici).
  ====================================================== */
  --ng-body-color: #828ca8;
  --ng-body-background: #ffffff;
  /* ======================================================
  THEME SURFACE & NEUTRAL TOKENS (light/dark ready)
  ------------------------------------------------------
  Set semantico che i TEMI flippano ([data-theme="..."]).
  I componenti leggono SOLO questi (mai hex hardcoded di
  superficie), così un tema cambia tutte le superfici/neutri
  senza toccare i colori brand. Valori = tema light (default).
  ====================================================== */
  --ng-surface: #ffffff; /* card, modal, dropdown, list, popover, accordion, header-menu */
  --ng-surface-sunken: #f5f5f5; /* footer, chip, input-disabled */
  --ng-fill: #e5e7eb; /* fill neutri: badge default, track progress/avatar/steps */
  --ng-text: #222222; /* testo principale su superfici */
  --ng-text-muted: rgba(0,0,0,.55);
  --ng-text-on-fill: #ffffff; /* testo su fill pieni (es. step circle attivo) */
  --ng-hover-tint: 0,0,0; /* base overlay translucidi: rgba(var(--ng-hover-tint), .0X) */
  --ng-backdrop: rgba(0,0,0,.35);
  /* ======================================================
  BORDER SYSTEM
  ------------------------------------------------------
  Token globali per bordi e divider.
  ====================================================== */
  --ng-color-border: rgba(232,235,244,1);
  --ng-color-border-dark: rgba(26,26,26,1);
  --ng-color-border-middle: rgba(115,115,115,1);
  --ng-color-border-light: rgba(210,210,210,1);
  /* ------------------------------------------------------
  Border (L1): width + shorthand. Il colore è --ng-color-border.
  I componenti puntano qui via fallback: var(--ng-<c>-border, var(--ng-border)).
  ------------------------------------------------------ */
  --ng-border-width: 1px;
  --ng-border-color: var(--ng-color-border);
  --ng-border: var(--ng-border-width) solid var(--ng-border-color);
  /* ======================================================
  RADIUS TOKENS
  ------------------------------------------------------
  Scala t-shirt del design system. --ng-radius è il MASTER (default
  componenti). I componenti puntano a un gradino via fallback-at-use:
  var(--ng-<c>-radius, var(--ng-radius-md)). Mai dichiarare il knob
  scoped con valore literal sul selettore (schermerebbe :root).
  ====================================================== */
  --ng-radius-0: 0;
  --ng-radius: 0.1875rem; /* 3px  · master / default */
  --ng-radius-sm: 0.3125rem; /* 5px  */
  --ng-radius-md: 0.5rem; /* 8px  */
  --ng-radius-lg: 0.75rem; /* 12px */
  --ng-radius-xl: 1rem; /* 16px */
  --ng-radius-pill: 999px;
  /* ======================================================
  TYPOGRAPHY SYSTEM
  ------------------------------------------------------
  Font globali del framework.
  ====================================================== */
  --ng-font-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ng-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ng-font-code: monospace;
  --ng-font-heading: var(--ng-font-base);
  --ng-font-size: 16px;
  /* ======================================================
  LAYOUT TOKENS
  ------------------------------------------------------
  Spaziature e comportamento layout globale.
  ====================================================== */
  --ng-gap: 1.5rem;
  --ng-nav-gap: 0.65rem;
  --ng-nav-font-size: 0.875rem;
  --ng-transition: all 0.2s ease-in-out;
  --ng-fill-width: 200px;
  /* ======================================================
  FOCUS SYSTEM
  ------------------------------------------------------
  Token accessibilità focus.
  ====================================================== */
  --ng-focus-border: rgba(200,200,220,.15);
  --ng-focus-ring: 0 0 0 2px rgba(45,45,45,.15);
  /* ======================================================
  COMPONENT BASE TOKENS
  ------------------------------------------------------
  Variabili condivise da componenti.
  ====================================================== */
  /* Header */
  --ng-header-height:4.5rem;
  /* Button */
  --ng-btn-size: 1.7rem;
  /* Form inputs */
  --ng-input-padding-y: .55rem;
  --ng-input-padding-x: .75rem;
  --ng-input-font-size: .9rem;
  --ng-input-line-height: 1.4;
  --ng-input-radius: var(--ng-radius-sm); /* allineato alla scala (5px) */
  --ng-input-bg: var(--ng-surface);
  --ng-input-color: inherit;
  --ng-input-color-border: rgba(100,100,100,0.3);
  /* Signature: focus brand-governed (crisp, non glow grigio BS5).
     Rebrandabile via --ng-input-focus-accent o --ng-primary-bg. */
  --ng-input-focus-accent: var(--ng-primary-bg, #4a2a86);
  --ng-input-focus-border: var(--ng-input-focus-accent);
  --ng-input-focus-ring: 0 0 0 3px var(--ng-primary-ring, rgba(74,42,134,.35));
  /* ======================================================
  SHADOW TOKENS
  ------------------------------------------------------
  Ombre riutilizzabili nel framework.
  ====================================================== */
  --ng-tab-box-shadow-main: rgba(100,100,111,0.2) 0px 7px 29px 0px;
  --ng-tab-box-shadow-alt: rgba(149,157,165,0.2) 0px 8px 24px 0px;
  /* ======================================================
  L2 — DERIVATE RUNTIME (modello token a 2 livelli)
  ------------------------------------------------------
  Le derivate di ogni colore (hover/active/focus/outline/
  soft/disabled/dark/light/ring) vengono ricalcolate a
  runtime da --ng-<name>-bg via relative color syntax.
  Effetto: override di --ng-<name>-bg propaga a TUTTE le
  derivate senza ricompilare. bg/text/border restano i
  knob base.
  Il blocco @each sopra resta come FALLBACK bakato per
  browser senza relative color syntax
  (Chrome <119, Safari <16.4, Firefox <128).
  Posizionato in fondo a :root (dopo le altre dichiarazioni)
  per evitare il deprecation "declarations after nested rules";
  Sass hoista comunque l'@supports → output invariato.
  ====================================================== */
  /* Neutri esclusi: clight/cdark/mute hanno hover/soft fatti a mano
     (schiariscono), la formula L2 generica li scurirebbe → hover invisibile.
     Lista definita a livello globale (sopra :root) per essere disponibile
     anche dentro @mixin ng-theme-dark. */
}
@supports (color: hsl(from white h s l)) {
  :root {
    --ng-primary-hover: hsl(from var(--ng-primary-bg) h s calc(l * 0.85));
    --ng-primary-active: hsl(from var(--ng-primary-bg) h s calc(l * 0.82));
    --ng-primary-focus: hsl(from var(--ng-primary-bg) h s calc(l * 0.92));
    --ng-primary-outline: hsl(from var(--ng-primary-bg) h s calc(l * 0.88));
    --ng-primary-soft: hsl(from var(--ng-primary-bg) h s calc(l + (100 - l) * 0.80));
    --ng-primary-disabled: hsl(from var(--ng-primary-bg) h s calc(l + (100 - l) * 0.35));
    --ng-primary-dark: hsl(from var(--ng-primary-bg) h s calc(l * 0.70));
    --ng-primary-light: hsl(from var(--ng-primary-bg) h s calc(l + (100 - l) * 0.85));
    --ng-primary-ring: hsl(from var(--ng-primary-bg) h s l / calc(alpha * 0.35));
    --ng-secondary-hover: hsl(from var(--ng-secondary-bg) h s calc(l * 0.85));
    --ng-secondary-active: hsl(from var(--ng-secondary-bg) h s calc(l * 0.82));
    --ng-secondary-focus: hsl(from var(--ng-secondary-bg) h s calc(l * 0.92));
    --ng-secondary-outline: hsl(from var(--ng-secondary-bg) h s calc(l * 0.88));
    --ng-secondary-soft: hsl(from var(--ng-secondary-bg) h s calc(l + (100 - l) * 0.80));
    --ng-secondary-disabled: hsl(from var(--ng-secondary-bg) h s calc(l + (100 - l) * 0.35));
    --ng-secondary-dark: hsl(from var(--ng-secondary-bg) h s calc(l * 0.70));
    --ng-secondary-light: hsl(from var(--ng-secondary-bg) h s calc(l + (100 - l) * 0.85));
    --ng-secondary-ring: hsl(from var(--ng-secondary-bg) h s l / calc(alpha * 0.35));
    --ng-success-hover: hsl(from var(--ng-success-bg) h s calc(l * 0.85));
    --ng-success-active: hsl(from var(--ng-success-bg) h s calc(l * 0.82));
    --ng-success-focus: hsl(from var(--ng-success-bg) h s calc(l * 0.92));
    --ng-success-outline: hsl(from var(--ng-success-bg) h s calc(l * 0.88));
    --ng-success-soft: hsl(from var(--ng-success-bg) h s calc(l + (100 - l) * 0.80));
    --ng-success-disabled: hsl(from var(--ng-success-bg) h s calc(l + (100 - l) * 0.35));
    --ng-success-dark: hsl(from var(--ng-success-bg) h s calc(l * 0.70));
    --ng-success-light: hsl(from var(--ng-success-bg) h s calc(l + (100 - l) * 0.85));
    --ng-success-ring: hsl(from var(--ng-success-bg) h s l / calc(alpha * 0.35));
    --ng-info-hover: hsl(from var(--ng-info-bg) h s calc(l * 0.85));
    --ng-info-active: hsl(from var(--ng-info-bg) h s calc(l * 0.82));
    --ng-info-focus: hsl(from var(--ng-info-bg) h s calc(l * 0.92));
    --ng-info-outline: hsl(from var(--ng-info-bg) h s calc(l * 0.88));
    --ng-info-soft: hsl(from var(--ng-info-bg) h s calc(l + (100 - l) * 0.80));
    --ng-info-disabled: hsl(from var(--ng-info-bg) h s calc(l + (100 - l) * 0.35));
    --ng-info-dark: hsl(from var(--ng-info-bg) h s calc(l * 0.70));
    --ng-info-light: hsl(from var(--ng-info-bg) h s calc(l + (100 - l) * 0.85));
    --ng-info-ring: hsl(from var(--ng-info-bg) h s l / calc(alpha * 0.35));
    --ng-warning-hover: hsl(from var(--ng-warning-bg) h s calc(l * 0.85));
    --ng-warning-active: hsl(from var(--ng-warning-bg) h s calc(l * 0.82));
    --ng-warning-focus: hsl(from var(--ng-warning-bg) h s calc(l * 0.92));
    --ng-warning-outline: hsl(from var(--ng-warning-bg) h s calc(l * 0.88));
    --ng-warning-soft: hsl(from var(--ng-warning-bg) h s calc(l + (100 - l) * 0.80));
    --ng-warning-disabled: hsl(from var(--ng-warning-bg) h s calc(l + (100 - l) * 0.35));
    --ng-warning-dark: hsl(from var(--ng-warning-bg) h s calc(l * 0.70));
    --ng-warning-light: hsl(from var(--ng-warning-bg) h s calc(l + (100 - l) * 0.85));
    --ng-warning-ring: hsl(from var(--ng-warning-bg) h s l / calc(alpha * 0.35));
    --ng-danger-hover: hsl(from var(--ng-danger-bg) h s calc(l * 0.85));
    --ng-danger-active: hsl(from var(--ng-danger-bg) h s calc(l * 0.82));
    --ng-danger-focus: hsl(from var(--ng-danger-bg) h s calc(l * 0.92));
    --ng-danger-outline: hsl(from var(--ng-danger-bg) h s calc(l * 0.88));
    --ng-danger-soft: hsl(from var(--ng-danger-bg) h s calc(l + (100 - l) * 0.80));
    --ng-danger-disabled: hsl(from var(--ng-danger-bg) h s calc(l + (100 - l) * 0.35));
    --ng-danger-dark: hsl(from var(--ng-danger-bg) h s calc(l * 0.70));
    --ng-danger-light: hsl(from var(--ng-danger-bg) h s calc(l + (100 - l) * 0.85));
    --ng-danger-ring: hsl(from var(--ng-danger-bg) h s l / calc(alpha * 0.35));
    --ng-blue-hover: hsl(from var(--ng-blue-bg) h s calc(l * 0.85));
    --ng-blue-active: hsl(from var(--ng-blue-bg) h s calc(l * 0.82));
    --ng-blue-focus: hsl(from var(--ng-blue-bg) h s calc(l * 0.92));
    --ng-blue-outline: hsl(from var(--ng-blue-bg) h s calc(l * 0.88));
    --ng-blue-soft: hsl(from var(--ng-blue-bg) h s calc(l + (100 - l) * 0.80));
    --ng-blue-disabled: hsl(from var(--ng-blue-bg) h s calc(l + (100 - l) * 0.35));
    --ng-blue-dark: hsl(from var(--ng-blue-bg) h s calc(l * 0.70));
    --ng-blue-light: hsl(from var(--ng-blue-bg) h s calc(l + (100 - l) * 0.85));
    --ng-blue-ring: hsl(from var(--ng-blue-bg) h s l / calc(alpha * 0.35));
    --ng-blue-sky-hover: hsl(from var(--ng-blue-sky-bg) h s calc(l * 0.85));
    --ng-blue-sky-active: hsl(from var(--ng-blue-sky-bg) h s calc(l * 0.82));
    --ng-blue-sky-focus: hsl(from var(--ng-blue-sky-bg) h s calc(l * 0.92));
    --ng-blue-sky-outline: hsl(from var(--ng-blue-sky-bg) h s calc(l * 0.88));
    --ng-blue-sky-soft: hsl(from var(--ng-blue-sky-bg) h s calc(l + (100 - l) * 0.80));
    --ng-blue-sky-disabled: hsl(from var(--ng-blue-sky-bg) h s calc(l + (100 - l) * 0.35));
    --ng-blue-sky-dark: hsl(from var(--ng-blue-sky-bg) h s calc(l * 0.70));
    --ng-blue-sky-light: hsl(from var(--ng-blue-sky-bg) h s calc(l + (100 - l) * 0.85));
    --ng-blue-sky-ring: hsl(from var(--ng-blue-sky-bg) h s l / calc(alpha * 0.35));
    --ng-green-hover: hsl(from var(--ng-green-bg) h s calc(l * 0.85));
    --ng-green-active: hsl(from var(--ng-green-bg) h s calc(l * 0.82));
    --ng-green-focus: hsl(from var(--ng-green-bg) h s calc(l * 0.92));
    --ng-green-outline: hsl(from var(--ng-green-bg) h s calc(l * 0.88));
    --ng-green-soft: hsl(from var(--ng-green-bg) h s calc(l + (100 - l) * 0.80));
    --ng-green-disabled: hsl(from var(--ng-green-bg) h s calc(l + (100 - l) * 0.35));
    --ng-green-dark: hsl(from var(--ng-green-bg) h s calc(l * 0.70));
    --ng-green-light: hsl(from var(--ng-green-bg) h s calc(l + (100 - l) * 0.85));
    --ng-green-ring: hsl(from var(--ng-green-bg) h s l / calc(alpha * 0.35));
    --ng-aguagreen-hover: hsl(from var(--ng-aguagreen-bg) h s calc(l * 0.85));
    --ng-aguagreen-active: hsl(from var(--ng-aguagreen-bg) h s calc(l * 0.82));
    --ng-aguagreen-focus: hsl(from var(--ng-aguagreen-bg) h s calc(l * 0.92));
    --ng-aguagreen-outline: hsl(from var(--ng-aguagreen-bg) h s calc(l * 0.88));
    --ng-aguagreen-soft: hsl(from var(--ng-aguagreen-bg) h s calc(l + (100 - l) * 0.80));
    --ng-aguagreen-disabled: hsl(from var(--ng-aguagreen-bg) h s calc(l + (100 - l) * 0.35));
    --ng-aguagreen-dark: hsl(from var(--ng-aguagreen-bg) h s calc(l * 0.70));
    --ng-aguagreen-light: hsl(from var(--ng-aguagreen-bg) h s calc(l + (100 - l) * 0.85));
    --ng-aguagreen-ring: hsl(from var(--ng-aguagreen-bg) h s l / calc(alpha * 0.35));
    --ng-indigo-hover: hsl(from var(--ng-indigo-bg) h s calc(l * 0.85));
    --ng-indigo-active: hsl(from var(--ng-indigo-bg) h s calc(l * 0.82));
    --ng-indigo-focus: hsl(from var(--ng-indigo-bg) h s calc(l * 0.92));
    --ng-indigo-outline: hsl(from var(--ng-indigo-bg) h s calc(l * 0.88));
    --ng-indigo-soft: hsl(from var(--ng-indigo-bg) h s calc(l + (100 - l) * 0.80));
    --ng-indigo-disabled: hsl(from var(--ng-indigo-bg) h s calc(l + (100 - l) * 0.35));
    --ng-indigo-dark: hsl(from var(--ng-indigo-bg) h s calc(l * 0.70));
    --ng-indigo-light: hsl(from var(--ng-indigo-bg) h s calc(l + (100 - l) * 0.85));
    --ng-indigo-ring: hsl(from var(--ng-indigo-bg) h s l / calc(alpha * 0.35));
    --ng-purple-hover: hsl(from var(--ng-purple-bg) h s calc(l * 0.85));
    --ng-purple-active: hsl(from var(--ng-purple-bg) h s calc(l * 0.82));
    --ng-purple-focus: hsl(from var(--ng-purple-bg) h s calc(l * 0.92));
    --ng-purple-outline: hsl(from var(--ng-purple-bg) h s calc(l * 0.88));
    --ng-purple-soft: hsl(from var(--ng-purple-bg) h s calc(l + (100 - l) * 0.80));
    --ng-purple-disabled: hsl(from var(--ng-purple-bg) h s calc(l + (100 - l) * 0.35));
    --ng-purple-dark: hsl(from var(--ng-purple-bg) h s calc(l * 0.70));
    --ng-purple-light: hsl(from var(--ng-purple-bg) h s calc(l + (100 - l) * 0.85));
    --ng-purple-ring: hsl(from var(--ng-purple-bg) h s l / calc(alpha * 0.35));
    --ng-purple-heart-hover: hsl(from var(--ng-purple-heart-bg) h s calc(l * 0.85));
    --ng-purple-heart-active: hsl(from var(--ng-purple-heart-bg) h s calc(l * 0.82));
    --ng-purple-heart-focus: hsl(from var(--ng-purple-heart-bg) h s calc(l * 0.92));
    --ng-purple-heart-outline: hsl(from var(--ng-purple-heart-bg) h s calc(l * 0.88));
    --ng-purple-heart-soft: hsl(from var(--ng-purple-heart-bg) h s calc(l + (100 - l) * 0.80));
    --ng-purple-heart-disabled: hsl(from var(--ng-purple-heart-bg) h s calc(l + (100 - l) * 0.35));
    --ng-purple-heart-dark: hsl(from var(--ng-purple-heart-bg) h s calc(l * 0.70));
    --ng-purple-heart-light: hsl(from var(--ng-purple-heart-bg) h s calc(l + (100 - l) * 0.85));
    --ng-purple-heart-ring: hsl(from var(--ng-purple-heart-bg) h s l / calc(alpha * 0.35));
    --ng-cyan-hover: hsl(from var(--ng-cyan-bg) h s calc(l * 0.85));
    --ng-cyan-active: hsl(from var(--ng-cyan-bg) h s calc(l * 0.82));
    --ng-cyan-focus: hsl(from var(--ng-cyan-bg) h s calc(l * 0.92));
    --ng-cyan-outline: hsl(from var(--ng-cyan-bg) h s calc(l * 0.88));
    --ng-cyan-soft: hsl(from var(--ng-cyan-bg) h s calc(l + (100 - l) * 0.80));
    --ng-cyan-disabled: hsl(from var(--ng-cyan-bg) h s calc(l + (100 - l) * 0.35));
    --ng-cyan-dark: hsl(from var(--ng-cyan-bg) h s calc(l * 0.70));
    --ng-cyan-light: hsl(from var(--ng-cyan-bg) h s calc(l + (100 - l) * 0.85));
    --ng-cyan-ring: hsl(from var(--ng-cyan-bg) h s l / calc(alpha * 0.35));
    --ng-magenta-hover: hsl(from var(--ng-magenta-bg) h s calc(l * 0.85));
    --ng-magenta-active: hsl(from var(--ng-magenta-bg) h s calc(l * 0.82));
    --ng-magenta-focus: hsl(from var(--ng-magenta-bg) h s calc(l * 0.92));
    --ng-magenta-outline: hsl(from var(--ng-magenta-bg) h s calc(l * 0.88));
    --ng-magenta-soft: hsl(from var(--ng-magenta-bg) h s calc(l + (100 - l) * 0.80));
    --ng-magenta-disabled: hsl(from var(--ng-magenta-bg) h s calc(l + (100 - l) * 0.35));
    --ng-magenta-dark: hsl(from var(--ng-magenta-bg) h s calc(l * 0.70));
    --ng-magenta-light: hsl(from var(--ng-magenta-bg) h s calc(l + (100 - l) * 0.85));
    --ng-magenta-ring: hsl(from var(--ng-magenta-bg) h s l / calc(alpha * 0.35));
    --ng-yellow-hover: hsl(from var(--ng-yellow-bg) h s calc(l * 0.85));
    --ng-yellow-active: hsl(from var(--ng-yellow-bg) h s calc(l * 0.82));
    --ng-yellow-focus: hsl(from var(--ng-yellow-bg) h s calc(l * 0.92));
    --ng-yellow-outline: hsl(from var(--ng-yellow-bg) h s calc(l * 0.88));
    --ng-yellow-soft: hsl(from var(--ng-yellow-bg) h s calc(l + (100 - l) * 0.80));
    --ng-yellow-disabled: hsl(from var(--ng-yellow-bg) h s calc(l + (100 - l) * 0.35));
    --ng-yellow-dark: hsl(from var(--ng-yellow-bg) h s calc(l * 0.70));
    --ng-yellow-light: hsl(from var(--ng-yellow-bg) h s calc(l + (100 - l) * 0.85));
    --ng-yellow-ring: hsl(from var(--ng-yellow-bg) h s l / calc(alpha * 0.35));
  }
}

/* ==========================================================
UTILITY PLACEHOLDERS
========================================================== */
/* ==========================================================
THEME — DARK
----------------------------------------------------------
Flippa SOLO neutri/superfici; i colori brand restano invariati
(il blocco L2 @supports deriva da --ng-<name>-bg, non toccato).
Attivazione: SOLO esplicita via [data-theme]. Default (nessun attributo) = LIGHT,
indipendente dall'OS (niente prefers-color-scheme). I temi sono molteplici.
  [data-theme="dark"]   → dark
  [data-theme="<nome>"] → tema custom (un blocco per tema)
========================================================== */
/* :root[...] e non solo [data-theme] per battere in specificità i :root
   definiti in altri file (es. tipografia) a prescindere dall'ordine di import. */
:root[data-theme=dark] {
  --ng-surface: #1b1f27;
  --ng-surface-sunken: #14171d;
  --ng-fill: #2a2f3a;
  --ng-text: #e6edf3;
  --ng-text-muted: rgba(255,255,255,.55);
  --ng-hover-tint: 255,255,255;
  --ng-backdrop: rgba(0,0,0,.6);
  --ng-body-background: #0e1116;
  --ng-body-color: #c9d1d9;
  --ng-color-border: rgba(255,255,255,.14);
  --ng-color-border-light: rgba(255,255,255,.08);
  --ng-color-border-middle: rgba(255,255,255,.24);
  --ng-color-border-dark: rgba(255,255,255,.40);
  /* Tipografia (heading/title/text/muted) — altrimenti h1-h6 invisibili */
  --ng-color-title: #f3f6fb;
  --ng-color-heading: #e8eef7;
  --ng-color-text: #c9d1d9;
  --ng-color-muted: #8b95a5;
  /* Brand readability override — 4 brand "scuri" di natura (primary,
     secondary, indigo, purple-heart) hanno contrasto sotto soglia WCAG
     contro --ng-body-background scuro. Schiariamo SOLO il loro -bg/-border:
     l'@supports L2 ricalcola in automatico hover/active/focus/soft/dark/
     light/outline/ring → un override per 4 brand schiarisce tutta la
     famiglia di derivate. Gli altri brand restano invariati. */
  --ng-primary-bg: #8a6dd4;
  --ng-primary-border: #7058b8;
  --ng-secondary-bg: #d35a85;
  --ng-secondary-border: #bb4475;
  --ng-indigo-bg: #928bf0;
  --ng-indigo-border: #7d75e7;
  --ng-purple-heart-bg: #d674b3;
  --ng-purple-heart-border: #c1599f;
  /* mute ∈ $ng-surface-neutrals → niente L2: override manuale per il dark
     (bg medio, soft = superficie scura tinta, dark = "text on soft" chiaro).
     Prima del @supports per evitare il deprecation "declarations after nested". */
  --ng-mute-bg: #6b7280;
  --ng-mute-border: #565d68;
  --ng-mute-hover: #5b626d;
  --ng-mute-text: #f0f3f7;
  --ng-mute-soft: #2c3038;
  --ng-mute-dark: #b8bdc7;
  /* lime ∈ $ng-surface-neutrals (troppo brillante per l'L2) → override manuale dark.
     Solid resta bright bg + dark text; soft scuro olive; -dark = text chiaro. */
  --ng-lime-bg: #9edc00;
  --ng-lime-border: #82b800;
  --ng-lime-hover: #8cc400;
  --ng-lime-soft: #2f3d12;
  --ng-lime-dark: #cdee63;
  /* Soft variants — in light la formula L2 schiarisce molto il brand
     (l ≈ 85-90%): ottimo come "card tinted" su pagina chiara. In dark
     quella stessa pallidissima superficie diventa un'isola bianca su
     fondo nero, fuori tono. Override: in dark il soft è un'isola SCURA
     tinta (lightness fissa al 20% + saturazione ridotta), e --ng-*-dark
     (usato come testo sul soft) viene rialzato a ~78% per leggibilità.
     Sale -dark cambia significato solo qui: è "text on soft" nei
     consumer (button/badge/alert/snackbar/table). */
}
@supports (color: hsl(from white h s l)) {
  :root[data-theme=dark] {
    --ng-primary-soft: hsl(from var(--ng-primary-bg) h calc(s * 0.60) 20%);
    --ng-primary-dark: hsl(from var(--ng-primary-bg) h s 78%);
    --ng-secondary-soft: hsl(from var(--ng-secondary-bg) h calc(s * 0.60) 20%);
    --ng-secondary-dark: hsl(from var(--ng-secondary-bg) h s 78%);
    --ng-success-soft: hsl(from var(--ng-success-bg) h calc(s * 0.60) 20%);
    --ng-success-dark: hsl(from var(--ng-success-bg) h s 78%);
    --ng-info-soft: hsl(from var(--ng-info-bg) h calc(s * 0.60) 20%);
    --ng-info-dark: hsl(from var(--ng-info-bg) h s 78%);
    --ng-warning-soft: hsl(from var(--ng-warning-bg) h calc(s * 0.60) 20%);
    --ng-warning-dark: hsl(from var(--ng-warning-bg) h s 78%);
    --ng-danger-soft: hsl(from var(--ng-danger-bg) h calc(s * 0.60) 20%);
    --ng-danger-dark: hsl(from var(--ng-danger-bg) h s 78%);
    --ng-blue-soft: hsl(from var(--ng-blue-bg) h calc(s * 0.60) 20%);
    --ng-blue-dark: hsl(from var(--ng-blue-bg) h s 78%);
    --ng-blue-sky-soft: hsl(from var(--ng-blue-sky-bg) h calc(s * 0.60) 20%);
    --ng-blue-sky-dark: hsl(from var(--ng-blue-sky-bg) h s 78%);
    --ng-green-soft: hsl(from var(--ng-green-bg) h calc(s * 0.60) 20%);
    --ng-green-dark: hsl(from var(--ng-green-bg) h s 78%);
    --ng-aguagreen-soft: hsl(from var(--ng-aguagreen-bg) h calc(s * 0.60) 20%);
    --ng-aguagreen-dark: hsl(from var(--ng-aguagreen-bg) h s 78%);
    --ng-indigo-soft: hsl(from var(--ng-indigo-bg) h calc(s * 0.60) 20%);
    --ng-indigo-dark: hsl(from var(--ng-indigo-bg) h s 78%);
    --ng-purple-soft: hsl(from var(--ng-purple-bg) h calc(s * 0.60) 20%);
    --ng-purple-dark: hsl(from var(--ng-purple-bg) h s 78%);
    --ng-purple-heart-soft: hsl(from var(--ng-purple-heart-bg) h calc(s * 0.60) 20%);
    --ng-purple-heart-dark: hsl(from var(--ng-purple-heart-bg) h s 78%);
    --ng-cyan-soft: hsl(from var(--ng-cyan-bg) h calc(s * 0.60) 20%);
    --ng-cyan-dark: hsl(from var(--ng-cyan-bg) h s 78%);
    --ng-magenta-soft: hsl(from var(--ng-magenta-bg) h calc(s * 0.60) 20%);
    --ng-magenta-dark: hsl(from var(--ng-magenta-bg) h s 78%);
    --ng-yellow-soft: hsl(from var(--ng-yellow-bg) h calc(s * 0.60) 20%);
    --ng-yellow-dark: hsl(from var(--ng-yellow-bg) h s 78%);
  }
}

/* Niente @media (prefers-color-scheme): NG è SEMPRE light di default,
   a prescindere dall'OS. I temi (dark e custom) si attivano solo con
   [data-theme] esplicito (via ng_theme.js o attributo manuale). */
/* NexiGrid – Reset 0.5 */
/* Neutro, non distruttivo, variabile-driven */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Rimuove solo margini di default */
* {
  margin: 0;
}

html, body {
  height: 100%;
  min-height: 100%;
}

/* Focus accessibile */
*:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ng-focus-outline, 1px solid rgba(99, 102, 241, 0.55));
  outline-offset: var(--ng-focus-outline-offset, 2px);
  border-radius: var(--ng-focus-outline-radius, 3px);
}

/* Media sicuri */
img, picture, video, canvas, svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Form inherit */
input, button, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Liste – reset controllato */
ul, ol {
  list-style: none;
  padding-left: 1.25rem;
}

ul ul, ol ol {
  padding-left: 1.25rem;
}

/* Titoli e testo */
h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}

/* ===
NexiGrid — Typography
---
Tipografia strutturale: reset link, scale font (.fs-*), pesi (.fw-*), line-height
(.lh-*), token :root (family/size/weight/spacing/color/measure), elementi
semantici base (h*, p, list, code), utility allineamento/flow testo, icone Phosphor.
NON definisce il design dei componenti, solo strumenti riutilizzabili.
---
Version: 1.0 · Status: stable
=== */
/* ==========================================================
BASE LINK RESET
----------------------------------------------------------
I link ereditano il colore del contesto e non hanno decorazioni
di default. Gli stati hover sono gestiti altrove.
========================================================== */
a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================
FONT SCALE — genera le utilities .fs-*
========================================================== */
.fs-2xs {
  font-size: 0.6875rem !important;
}

.fs-xs {
  font-size: 0.75rem !important;
}

.fs-sm {
  font-size: 0.875rem !important;
}

.fs-base {
  font-size: 1rem !important;
}

.fs-lg {
  font-size: 1.125rem !important;
}

.fs-xl {
  font-size: 1.25rem !important;
}

.fs-2xl {
  font-size: 1.5rem !important;
}

.fs-3xl {
  font-size: 2rem !important;
}

.fs-4xl {
  font-size: 3rem !important;
}

.fs-5xl {
  font-size: 3.75rem !important;
}

.fs-6xl {
  font-size: 4.5rem !important;
}

/* ==========================================================
TYPOGRAPHY TOKENS (:root)
----------------------------------------------------------
Family, size scale, line-height, weight, letter-spacing, color,
spacing tipografico, measure. Overridabili da :root per tema.
========================================================== */
:root {
  /* Font family */
  --ng-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ng-font-serif: Georgia, "Times New Roman", serif;
  --ng-font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
  /* Font size scale */
  --ng-fs-display: 2.25rem;
  --ng-fs-h1: 1.75rem;
  --ng-fs-h2: 1.4rem;
  --ng-fs-h3: 1.125rem;
  --ng-fs-lead: 1.125rem;
  --ng-fs-body: .85rem;
  --ng-fs-small: .875rem;
  --ng-fs-micro: .75rem;
  /* Line height */
  --ng-lh-tight: 1.2;
  --ng-lh-heading: 1.3;
  --ng-lh-body: 1.6;
  --ng-lh-loose: 1.8;
  /* Font weight */
  --ng-fw-light: 300;
  --ng-fw-regular: 400;
  --ng-fw-medium: 500;
  --ng-fw-semibold: 600;
  --ng-fw-bold: 700;
  --ng-fw-black: 800;
  /* Letter spacing */
  --ng-ls-tight: -.02em;
  --ng-ls-normal: 0;
  --ng-ls-wide: .04em;
  --ng-ls-wider: .08em;
  /* Colors */
  --ng-color-title: #0f1115;
  --ng-color-heading: #1a1d23;
  --ng-color-text: #3b4252;
  --ng-color-muted: #99a1b7;
  --ng-color-accent: #3975ec;
  --ng-color-mark: #fff1a8;
  --ng-color-inverse: #ffffff;
  /* Typo spacing */
  --ng-text-space-xs: .35rem;
  --ng-text-space-lg: 1.5rem;
  --ng-text-space-xl: 2rem;
  /* Flow — ritmo verticale heading/p. Heading in em (scala col titolo),
     p in rem. Override da :root. */
  --ng-flow-heading-top: 1.25rem;
  --ng-flow-heading-bottom: .5rem;
  --ng-flow-p: 1rem;
  /* Measure */
  --ng-text-measure: 68ch;
}

/* ==========================================================
BASE ELEMENTS
----------------------------------------------------------
Stili base per elementi HTML semantici: assicurano leggibilità
coerente senza imporre design.
========================================================== */
body {
  font-family: var(--ng-font-sans);
  font-size: var(--ng-fs-body);
  line-height: var(--ng-lh-body);
  color: var(--ng-body-color);
  background: var(--ng-body-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: var(--ng-fw-regular);
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--ng-flow-heading-top) 0 var(--ng-flow-heading-bottom);
  font-weight: var(--ng-fw-semibold);
  line-height: var(--ng-lh-tight);
  color: var(--ng-color-heading);
}

h1 {
  font-size: var(--ng-fs-h1);
  letter-spacing: var(--ng-ls-tight);
}

h2 {
  font-size: var(--ng-fs-h2);
}

h3 {
  font-size: var(--ng-fs-h3);
}

p {
  margin: 0 0 var(--ng-flow-p);
  font-size: var(--ng-fs-body);
  line-height: var(--ng-lh-body);
  color: var(--ng-text);
}

/* Niente spinta fuori dai container: primo elemento del flow senza margine
   sopra, ultimo senza margine sotto. */
:is(h1, h2, h3, h4, h5, h6, p):first-child {
  margin-block-start: 0;
}

:is(h1, h2, h3, h4, h5, h6, p):last-child {
  margin-block-end: 0;
}

ul,
ol {
  margin: 0;
  padding-left: var(--ng-text-space-lg);
  line-height: var(--ng-lh-body);
}

small {
  font-size: var(--ng-fs-small);
  color: var(--ng-color-muted);
}

strong {
  font-weight: var(--ng-fw-bold);
}

em {
  font-style: italic;
}

code {
  font-family: var(--ng-font-mono);
  font-size: 0.875em;
}

pre {
  font-family: var(--ng-font-mono);
  overflow-x: auto;
}

/* ==========================================================
DISPLAY TEXT LINE HEIGHT
----------------------------------------------------------
I titoli molto grandi richiedono line-height più compatto.
========================================================== */
.fs-2xl,
.fs-3xl,
.fs-4xl,
.fs-5xl,
.fs-6xl {
  line-height: 1.1;
}

/* ==========================================================
FONT WEIGHT UTILITIES — .fw-*
========================================================== */
.fw-200 {
  font-weight: 200 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

/* ==========================================================
LINE HEIGHT UTILITIES — .lh-*
========================================================== */
.lh-tight {
  line-height: 1.25 !important;
}

.lh-normal {
  line-height: 1.5 !important;
}

.lh-relaxed {
  line-height: 1.75 !important;
}

.lh-loose {
  line-height: 2 !important;
}

/* ==========================================================
TEXT ALIGNMENT UTILITIES
========================================================== */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

.text-upper {
  text-transform: uppercase !important;
}

.text-lower {
  text-transform: lowercase !important;
}

/* ==========================================================
TEXT FLOW UTILITIES
========================================================== */
/* Troncamento su una riga */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rottura parole lunghe */
.text-wrap {
  overflow-wrap: break-word;
}

/* Impedisce il ritorno a capo */
.text-nowrap {
  white-space: nowrap !important;
}

/* ==========================================================
PHOSPHOR ICONS — normalize
========================================================== */
.ph, .ph-thin, .ph-light, .ph-bold, .ph-fill, .ph-duotone {
  line-height: 0;
}

/* ==========================================================
NexiGrid — Layout (struttura pagina)
----------------------------------------------------------
Struttura di pagina: .ng-layout (flex root), .ng-content (area
centrale), .ng-container (wrapper + container-fix-*). Header,
footer e sidebar sono componenti dedicati.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
.ng-layout > * {
  min-width: 0;
}
.ng-layout.ng-sidebar-right {
  flex-direction: row-reverse;
}

/* =====================================================
NG-CONTENT — Area centrale
===================================================== */
.ng-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* =====================================================
NG-CONTAINER — Wrapper interno
===================================================== */
.ng-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--ng-gap, 1rem);
}
.ng-container.container-center {
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================
CONTAINER WIDTHS — .container-fix-*
===================================================== */
.container-fix-400 {
  max-width: 400px;
}

.container-fix-576 {
  max-width: 576px;
}

.container-fix-768 {
  max-width: 768px;
}

.container-fix-992 {
  max-width: 992px;
}

.container-fix-1280 {
  max-width: 1280px;
}

.container-fix-1400 {
  max-width: 1400px;
}

/* ===
NexiGrid — Grid System
---
Due sistemi coesistenti: Flex grid (.ng-row + .ng-col-*) per layout 12-col, e
Lanes grid (.ng-grid + .ng-lanes-*) per auto-flow/dashboard. Gutter, offset,
order, allineamenti, gap, wide/span, fallback responsive. Token da $ng-breakpoints.
---
Version: 1.0 · Status: stable
=== */
/* =============================================================
FLEX
============================================================= */
.ng-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.ng-row.go-column {
  flex-direction: column;
}
.ng-row.same-height {
  align-items: stretch;
}

.ng-col {
  box-sizing: border-box;
  flex: 1 0 0%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ng-col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.ng-col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.ng-col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.ng-col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.ng-col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.ng-col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.ng-col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.ng-col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.ng-col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.ng-col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.ng-col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.ng-col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  .ng-col-sm-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .ng-col-sm-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .ng-col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .ng-col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .ng-col-sm-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .ng-col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .ng-col-sm-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .ng-col-sm-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .ng-col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .ng-col-sm-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .ng-col-sm-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .ng-col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .ng-col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .ng-col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .ng-col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .ng-col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .ng-col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .ng-col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .ng-col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .ng-col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .ng-col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .ng-col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .ng-col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .ng-col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 896px) {
  .ng-col-lg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .ng-col-lg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .ng-col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .ng-col-lg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .ng-col-lg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .ng-col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .ng-col-lg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .ng-col-lg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .ng-col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .ng-col-lg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .ng-col-lg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .ng-col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 1024px) {
  .ng-col-xlg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .ng-col-xlg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .ng-col-xlg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .ng-col-xlg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .ng-col-xlg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .ng-col-xlg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .ng-col-xlg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .ng-col-xlg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .ng-col-xlg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .ng-col-xlg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .ng-col-xlg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .ng-col-xlg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 1280px) {
  .ng-col-xl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .ng-col-xl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .ng-col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .ng-col-xl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .ng-col-xl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .ng-col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .ng-col-xl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .ng-col-xl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .ng-col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .ng-col-xl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .ng-col-xl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .ng-col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 1400px) {
  .ng-col-xxl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .ng-col-xxl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .ng-col-xxl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .ng-col-xxl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .ng-col-xxl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .ng-col-xxl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .ng-col-xxl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .ng-col-xxl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .ng-col-xxl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .ng-col-xxl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .ng-col-xxl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .ng-col-xxl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.ng-gutter-0 {
  margin-inline: 0;
  row-gap: 0;
}
.ng-gutter-0 > [class*=ng-col] {
  padding-inline: 0;
}

.ng-gutter-xs {
  margin-inline: -0.125rem;
  row-gap: 0.25rem;
}
.ng-gutter-xs > [class*=ng-col] {
  padding-inline: 0.125rem;
}

.ng-gutter-sm {
  margin-inline: -0.25rem;
  row-gap: 0.5rem;
}
.ng-gutter-sm > [class*=ng-col] {
  padding-inline: 0.25rem;
}

.ng-gutter-md {
  margin-inline: -0.5rem;
  row-gap: 1rem;
}
.ng-gutter-md > [class*=ng-col] {
  padding-inline: 0.5rem;
}

.ng-gutter-lg {
  margin-inline: -0.75rem;
  row-gap: 1.5rem;
}
.ng-gutter-lg > [class*=ng-col] {
  padding-inline: 0.75rem;
}

.ng-gutter-xl {
  margin-inline: -1rem;
  row-gap: 2rem;
}
.ng-gutter-xl > [class*=ng-col] {
  padding-inline: 1rem;
}

.ng-offset-0 {
  margin-left: 0;
}

.ng-offset-1 {
  margin-left: 8.3333333333%;
}

.ng-offset-2 {
  margin-left: 16.6666666667%;
}

.ng-offset-3 {
  margin-left: 25%;
}

.ng-offset-4 {
  margin-left: 33.3333333333%;
}

.ng-offset-5 {
  margin-left: 41.6666666667%;
}

.ng-offset-6 {
  margin-left: 50%;
}

.ng-offset-7 {
  margin-left: 58.3333333333%;
}

.ng-offset-8 {
  margin-left: 66.6666666667%;
}

.ng-offset-9 {
  margin-left: 75%;
}

.ng-offset-10 {
  margin-left: 83.3333333333%;
}

.ng-offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 576px) {
  .ng-offset-sm-0 {
    margin-left: 0;
  }
  .ng-offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .ng-offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .ng-offset-sm-3 {
    margin-left: 25%;
  }
  .ng-offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .ng-offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .ng-offset-sm-6 {
    margin-left: 50%;
  }
  .ng-offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .ng-offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .ng-offset-sm-9 {
    margin-left: 75%;
  }
  .ng-offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .ng-offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 768px) {
  .ng-offset-md-0 {
    margin-left: 0;
  }
  .ng-offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .ng-offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .ng-offset-md-3 {
    margin-left: 25%;
  }
  .ng-offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .ng-offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .ng-offset-md-6 {
    margin-left: 50%;
  }
  .ng-offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .ng-offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .ng-offset-md-9 {
    margin-left: 75%;
  }
  .ng-offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .ng-offset-md-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 896px) {
  .ng-offset-lg-0 {
    margin-left: 0;
  }
  .ng-offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .ng-offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .ng-offset-lg-3 {
    margin-left: 25%;
  }
  .ng-offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .ng-offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .ng-offset-lg-6 {
    margin-left: 50%;
  }
  .ng-offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .ng-offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .ng-offset-lg-9 {
    margin-left: 75%;
  }
  .ng-offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .ng-offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1024px) {
  .ng-offset-xlg-0 {
    margin-left: 0;
  }
  .ng-offset-xlg-1 {
    margin-left: 8.3333333333%;
  }
  .ng-offset-xlg-2 {
    margin-left: 16.6666666667%;
  }
  .ng-offset-xlg-3 {
    margin-left: 25%;
  }
  .ng-offset-xlg-4 {
    margin-left: 33.3333333333%;
  }
  .ng-offset-xlg-5 {
    margin-left: 41.6666666667%;
  }
  .ng-offset-xlg-6 {
    margin-left: 50%;
  }
  .ng-offset-xlg-7 {
    margin-left: 58.3333333333%;
  }
  .ng-offset-xlg-8 {
    margin-left: 66.6666666667%;
  }
  .ng-offset-xlg-9 {
    margin-left: 75%;
  }
  .ng-offset-xlg-10 {
    margin-left: 83.3333333333%;
  }
  .ng-offset-xlg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1280px) {
  .ng-offset-xl-0 {
    margin-left: 0;
  }
  .ng-offset-xl-1 {
    margin-left: 8.3333333333%;
  }
  .ng-offset-xl-2 {
    margin-left: 16.6666666667%;
  }
  .ng-offset-xl-3 {
    margin-left: 25%;
  }
  .ng-offset-xl-4 {
    margin-left: 33.3333333333%;
  }
  .ng-offset-xl-5 {
    margin-left: 41.6666666667%;
  }
  .ng-offset-xl-6 {
    margin-left: 50%;
  }
  .ng-offset-xl-7 {
    margin-left: 58.3333333333%;
  }
  .ng-offset-xl-8 {
    margin-left: 66.6666666667%;
  }
  .ng-offset-xl-9 {
    margin-left: 75%;
  }
  .ng-offset-xl-10 {
    margin-left: 83.3333333333%;
  }
  .ng-offset-xl-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1400px) {
  .ng-offset-xxl-0 {
    margin-left: 0;
  }
  .ng-offset-xxl-1 {
    margin-left: 8.3333333333%;
  }
  .ng-offset-xxl-2 {
    margin-left: 16.6666666667%;
  }
  .ng-offset-xxl-3 {
    margin-left: 25%;
  }
  .ng-offset-xxl-4 {
    margin-left: 33.3333333333%;
  }
  .ng-offset-xxl-5 {
    margin-left: 41.6666666667%;
  }
  .ng-offset-xxl-6 {
    margin-left: 50%;
  }
  .ng-offset-xxl-7 {
    margin-left: 58.3333333333%;
  }
  .ng-offset-xxl-8 {
    margin-left: 66.6666666667%;
  }
  .ng-offset-xxl-9 {
    margin-left: 75%;
  }
  .ng-offset-xxl-10 {
    margin-left: 83.3333333333%;
  }
  .ng-offset-xxl-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 576px) {
  .ng-order-sm-0 {
    order: 0;
  }
  .ng-order-sm-1 {
    order: 1;
  }
  .ng-order-sm-2 {
    order: 2;
  }
  .ng-order-sm-3 {
    order: 3;
  }
  .ng-order-sm-4 {
    order: 4;
  }
  .ng-order-sm-5 {
    order: 5;
  }
  .ng-order-sm-6 {
    order: 6;
  }
  .ng-order-sm-7 {
    order: 7;
  }
  .ng-order-sm-8 {
    order: 8;
  }
  .ng-order-sm-9 {
    order: 9;
  }
  .ng-order-sm-10 {
    order: 10;
  }
  .ng-order-sm-11 {
    order: 11;
  }
  .ng-order-sm-12 {
    order: 12;
  }
}
@media (min-width: 768px) {
  .ng-order-md-0 {
    order: 0;
  }
  .ng-order-md-1 {
    order: 1;
  }
  .ng-order-md-2 {
    order: 2;
  }
  .ng-order-md-3 {
    order: 3;
  }
  .ng-order-md-4 {
    order: 4;
  }
  .ng-order-md-5 {
    order: 5;
  }
  .ng-order-md-6 {
    order: 6;
  }
  .ng-order-md-7 {
    order: 7;
  }
  .ng-order-md-8 {
    order: 8;
  }
  .ng-order-md-9 {
    order: 9;
  }
  .ng-order-md-10 {
    order: 10;
  }
  .ng-order-md-11 {
    order: 11;
  }
  .ng-order-md-12 {
    order: 12;
  }
}
@media (min-width: 896px) {
  .ng-order-lg-0 {
    order: 0;
  }
  .ng-order-lg-1 {
    order: 1;
  }
  .ng-order-lg-2 {
    order: 2;
  }
  .ng-order-lg-3 {
    order: 3;
  }
  .ng-order-lg-4 {
    order: 4;
  }
  .ng-order-lg-5 {
    order: 5;
  }
  .ng-order-lg-6 {
    order: 6;
  }
  .ng-order-lg-7 {
    order: 7;
  }
  .ng-order-lg-8 {
    order: 8;
  }
  .ng-order-lg-9 {
    order: 9;
  }
  .ng-order-lg-10 {
    order: 10;
  }
  .ng-order-lg-11 {
    order: 11;
  }
  .ng-order-lg-12 {
    order: 12;
  }
}
@media (min-width: 1024px) {
  .ng-order-xlg-0 {
    order: 0;
  }
  .ng-order-xlg-1 {
    order: 1;
  }
  .ng-order-xlg-2 {
    order: 2;
  }
  .ng-order-xlg-3 {
    order: 3;
  }
  .ng-order-xlg-4 {
    order: 4;
  }
  .ng-order-xlg-5 {
    order: 5;
  }
  .ng-order-xlg-6 {
    order: 6;
  }
  .ng-order-xlg-7 {
    order: 7;
  }
  .ng-order-xlg-8 {
    order: 8;
  }
  .ng-order-xlg-9 {
    order: 9;
  }
  .ng-order-xlg-10 {
    order: 10;
  }
  .ng-order-xlg-11 {
    order: 11;
  }
  .ng-order-xlg-12 {
    order: 12;
  }
}
@media (min-width: 1280px) {
  .ng-order-xl-0 {
    order: 0;
  }
  .ng-order-xl-1 {
    order: 1;
  }
  .ng-order-xl-2 {
    order: 2;
  }
  .ng-order-xl-3 {
    order: 3;
  }
  .ng-order-xl-4 {
    order: 4;
  }
  .ng-order-xl-5 {
    order: 5;
  }
  .ng-order-xl-6 {
    order: 6;
  }
  .ng-order-xl-7 {
    order: 7;
  }
  .ng-order-xl-8 {
    order: 8;
  }
  .ng-order-xl-9 {
    order: 9;
  }
  .ng-order-xl-10 {
    order: 10;
  }
  .ng-order-xl-11 {
    order: 11;
  }
  .ng-order-xl-12 {
    order: 12;
  }
}
@media (min-width: 1400px) {
  .ng-order-xxl-0 {
    order: 0;
  }
  .ng-order-xxl-1 {
    order: 1;
  }
  .ng-order-xxl-2 {
    order: 2;
  }
  .ng-order-xxl-3 {
    order: 3;
  }
  .ng-order-xxl-4 {
    order: 4;
  }
  .ng-order-xxl-5 {
    order: 5;
  }
  .ng-order-xxl-6 {
    order: 6;
  }
  .ng-order-xxl-7 {
    order: 7;
  }
  .ng-order-xxl-8 {
    order: 8;
  }
  .ng-order-xxl-9 {
    order: 9;
  }
  .ng-order-xxl-10 {
    order: 10;
  }
  .ng-order-xxl-11 {
    order: 11;
  }
  .ng-order-xxl-12 {
    order: 12;
  }
}
.ng-row-justify-start {
  justify-content: flex-start !important;
}

.ng-row-justify-center {
  justify-content: center !important;
}

.ng-row-justify-end {
  justify-content: flex-end !important;
}

.ng-row-justify-between {
  justify-content: space-between !important;
}

.ng-row-justify-around {
  justify-content: space-around !important;
}

.ng-row-justify-evenly {
  justify-content: space-evenly !important;
}

.ng-row-align-start {
  align-items: flex-start !important;
}

.ng-col-align-start {
  align-self: flex-start !important;
}

.ng-row-align-center {
  align-items: center !important;
}

.ng-col-align-center {
  align-self: center !important;
}

.ng-row-align-end {
  align-items: flex-end !important;
}

.ng-col-align-end {
  align-self: flex-end !important;
}

.ng-row-align-stretch {
  align-items: stretch !important;
}

.ng-col-align-stretch {
  align-self: stretch !important;
}

.ng-row-align-baseline {
  align-items: baseline !important;
}

.ng-col-align-baseline {
  align-self: baseline !important;
}

.ng-row-align-top {
  align-items: flex-start !important;
}

.ng-col-align-top {
  align-self: flex-start !important;
}

.ng-row-align-bottom {
  align-items: flex-end !important;
}

.ng-col-align-bottom {
  align-self: flex-end !important;
}

@media (max-width: 575.98px) {
  .ng-col,
  [class^=ng-col-],
  [class*=" ng-col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  [class^=ng-offset-],
  [class*=" ng-offset-"] {
    margin-left: 0 !important;
  }
}
@media (max-width: 895px) {
  .ng-col-stack {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1024px) {
  .ng-col-balance-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* =============================================================
LANES
============================================================= */
.ng-grid {
  display: grid;
  box-sizing: border-box;
}

.ng-lanes-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.ng-lanes-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ng-lanes-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ng-lanes-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ng-lanes-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ng-lanes-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ng-lanes-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ng-lanes-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.ng-lanes-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.ng-lanes-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.ng-lanes-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.ng-lanes-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (min-width: 576px) {
  .ng-lanes-sm-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .ng-lanes-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ng-lanes-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ng-lanes-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ng-lanes-sm-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ng-lanes-sm-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ng-lanes-sm-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .ng-lanes-sm-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ng-lanes-sm-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .ng-lanes-sm-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .ng-lanes-sm-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .ng-lanes-sm-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .ng-lanes-md-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .ng-lanes-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ng-lanes-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ng-lanes-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ng-lanes-md-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ng-lanes-md-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ng-lanes-md-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .ng-lanes-md-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ng-lanes-md-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .ng-lanes-md-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .ng-lanes-md-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .ng-lanes-md-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 896px) {
  .ng-lanes-lg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .ng-lanes-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ng-lanes-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ng-lanes-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ng-lanes-lg-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ng-lanes-lg-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ng-lanes-lg-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .ng-lanes-lg-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ng-lanes-lg-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .ng-lanes-lg-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .ng-lanes-lg-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .ng-lanes-lg-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .ng-lanes-xlg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .ng-lanes-xlg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ng-lanes-xlg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ng-lanes-xlg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ng-lanes-xlg-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ng-lanes-xlg-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ng-lanes-xlg-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .ng-lanes-xlg-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ng-lanes-xlg-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .ng-lanes-xlg-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .ng-lanes-xlg-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .ng-lanes-xlg-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .ng-lanes-xl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .ng-lanes-xl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ng-lanes-xl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ng-lanes-xl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ng-lanes-xl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ng-lanes-xl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ng-lanes-xl-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .ng-lanes-xl-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ng-lanes-xl-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .ng-lanes-xl-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .ng-lanes-xl-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .ng-lanes-xl-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .ng-lanes-xxl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .ng-lanes-xxl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ng-lanes-xxl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ng-lanes-xxl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ng-lanes-xxl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ng-lanes-xxl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ng-lanes-xxl-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .ng-lanes-xxl-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ng-lanes-xxl-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .ng-lanes-xxl-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .ng-lanes-xxl-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .ng-lanes-xxl-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.ng-autolanes-xs {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.ng-autolanes-s {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ng-autolanes-m {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ng-autolanes-l {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ng-autolanes-xl {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

@media (min-width: 576px) {
  .ng-autolanes-sm-xs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .ng-autolanes-sm-s {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .ng-autolanes-sm-m {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .ng-autolanes-sm-l {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .ng-autolanes-sm-xl {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}
@media (min-width: 768px) {
  .ng-autolanes-md-xs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .ng-autolanes-md-s {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .ng-autolanes-md-m {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .ng-autolanes-md-l {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .ng-autolanes-md-xl {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}
@media (min-width: 896px) {
  .ng-autolanes-lg-xs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .ng-autolanes-lg-s {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .ng-autolanes-lg-m {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .ng-autolanes-lg-l {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .ng-autolanes-lg-xl {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}
@media (min-width: 1024px) {
  .ng-autolanes-xlg-xs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .ng-autolanes-xlg-s {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .ng-autolanes-xlg-m {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .ng-autolanes-xlg-l {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .ng-autolanes-xlg-xl {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}
@media (min-width: 1280px) {
  .ng-autolanes-xl-xs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .ng-autolanes-xl-s {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .ng-autolanes-xl-m {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .ng-autolanes-xl-l {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .ng-autolanes-xl-xl {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}
@media (min-width: 1400px) {
  .ng-autolanes-xxl-xs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .ng-autolanes-xxl-s {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .ng-autolanes-xxl-m {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .ng-autolanes-xxl-l {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .ng-autolanes-xxl-xl {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}
.ng-gap-0 {
  gap: 0;
}

.ng-gap-xs {
  gap: 0.25rem;
}

.ng-gap-sm {
  gap: 0.5rem;
}

.ng-gap-md {
  gap: 1rem;
}

.ng-gap-lg {
  gap: 1.5rem;
}

.ng-gap-xl {
  gap: 2rem;
}

@media (min-width: 576px) {
  .ng-gap-sm-0 {
    gap: 0;
  }
  .ng-gap-sm-xs {
    gap: 0.25rem;
  }
  .ng-gap-sm-sm {
    gap: 0.5rem;
  }
  .ng-gap-sm-md {
    gap: 1rem;
  }
  .ng-gap-sm-lg {
    gap: 1.5rem;
  }
  .ng-gap-sm-xl {
    gap: 2rem;
  }
}
@media (min-width: 768px) {
  .ng-gap-md-0 {
    gap: 0;
  }
  .ng-gap-md-xs {
    gap: 0.25rem;
  }
  .ng-gap-md-sm {
    gap: 0.5rem;
  }
  .ng-gap-md-md {
    gap: 1rem;
  }
  .ng-gap-md-lg {
    gap: 1.5rem;
  }
  .ng-gap-md-xl {
    gap: 2rem;
  }
}
@media (min-width: 896px) {
  .ng-gap-lg-0 {
    gap: 0;
  }
  .ng-gap-lg-xs {
    gap: 0.25rem;
  }
  .ng-gap-lg-sm {
    gap: 0.5rem;
  }
  .ng-gap-lg-md {
    gap: 1rem;
  }
  .ng-gap-lg-lg {
    gap: 1.5rem;
  }
  .ng-gap-lg-xl {
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .ng-gap-xlg-0 {
    gap: 0;
  }
  .ng-gap-xlg-xs {
    gap: 0.25rem;
  }
  .ng-gap-xlg-sm {
    gap: 0.5rem;
  }
  .ng-gap-xlg-md {
    gap: 1rem;
  }
  .ng-gap-xlg-lg {
    gap: 1.5rem;
  }
  .ng-gap-xlg-xl {
    gap: 2rem;
  }
}
@media (min-width: 1280px) {
  .ng-gap-xl-0 {
    gap: 0;
  }
  .ng-gap-xl-xs {
    gap: 0.25rem;
  }
  .ng-gap-xl-sm {
    gap: 0.5rem;
  }
  .ng-gap-xl-md {
    gap: 1rem;
  }
  .ng-gap-xl-lg {
    gap: 1.5rem;
  }
  .ng-gap-xl-xl {
    gap: 2rem;
  }
}
@media (min-width: 1400px) {
  .ng-gap-xxl-0 {
    gap: 0;
  }
  .ng-gap-xxl-xs {
    gap: 0.25rem;
  }
  .ng-gap-xxl-sm {
    gap: 0.5rem;
  }
  .ng-gap-xxl-md {
    gap: 1rem;
  }
  .ng-gap-xxl-lg {
    gap: 1.5rem;
  }
  .ng-gap-xxl-xl {
    gap: 2rem;
  }
}
.ng-wide-1 {
  grid-column: span 1;
  flex: none;
}

.ng-wide-2 {
  grid-column: span 2;
  flex: none;
}

.ng-wide-3 {
  grid-column: span 3;
  flex: none;
}

.ng-wide-4 {
  grid-column: span 4;
  flex: none;
}

.ng-wide-5 {
  grid-column: span 5;
  flex: none;
}

.ng-wide-6 {
  grid-column: span 6;
  flex: none;
}

.ng-wide-7 {
  grid-column: span 7;
  flex: none;
}

.ng-wide-8 {
  grid-column: span 8;
  flex: none;
}

.ng-wide-9 {
  grid-column: span 9;
  flex: none;
}

.ng-wide-10 {
  grid-column: span 10;
  flex: none;
}

.ng-wide-11 {
  grid-column: span 11;
  flex: none;
}

.ng-wide-12 {
  grid-column: span 12;
  flex: none;
}

@media (min-width: 576px) {
  .ng-wide-sm-1 {
    grid-column: span 1;
  }
  .ng-wide-sm-2 {
    grid-column: span 2;
  }
  .ng-wide-sm-3 {
    grid-column: span 3;
  }
  .ng-wide-sm-4 {
    grid-column: span 4;
  }
  .ng-wide-sm-5 {
    grid-column: span 5;
  }
  .ng-wide-sm-6 {
    grid-column: span 6;
  }
  .ng-wide-sm-7 {
    grid-column: span 7;
  }
  .ng-wide-sm-8 {
    grid-column: span 8;
  }
  .ng-wide-sm-9 {
    grid-column: span 9;
  }
  .ng-wide-sm-10 {
    grid-column: span 10;
  }
  .ng-wide-sm-11 {
    grid-column: span 11;
  }
  .ng-wide-sm-12 {
    grid-column: span 12;
  }
}
@media (min-width: 768px) {
  .ng-wide-md-1 {
    grid-column: span 1;
  }
  .ng-wide-md-2 {
    grid-column: span 2;
  }
  .ng-wide-md-3 {
    grid-column: span 3;
  }
  .ng-wide-md-4 {
    grid-column: span 4;
  }
  .ng-wide-md-5 {
    grid-column: span 5;
  }
  .ng-wide-md-6 {
    grid-column: span 6;
  }
  .ng-wide-md-7 {
    grid-column: span 7;
  }
  .ng-wide-md-8 {
    grid-column: span 8;
  }
  .ng-wide-md-9 {
    grid-column: span 9;
  }
  .ng-wide-md-10 {
    grid-column: span 10;
  }
  .ng-wide-md-11 {
    grid-column: span 11;
  }
  .ng-wide-md-12 {
    grid-column: span 12;
  }
}
@media (min-width: 896px) {
  .ng-wide-lg-1 {
    grid-column: span 1;
  }
  .ng-wide-lg-2 {
    grid-column: span 2;
  }
  .ng-wide-lg-3 {
    grid-column: span 3;
  }
  .ng-wide-lg-4 {
    grid-column: span 4;
  }
  .ng-wide-lg-5 {
    grid-column: span 5;
  }
  .ng-wide-lg-6 {
    grid-column: span 6;
  }
  .ng-wide-lg-7 {
    grid-column: span 7;
  }
  .ng-wide-lg-8 {
    grid-column: span 8;
  }
  .ng-wide-lg-9 {
    grid-column: span 9;
  }
  .ng-wide-lg-10 {
    grid-column: span 10;
  }
  .ng-wide-lg-11 {
    grid-column: span 11;
  }
  .ng-wide-lg-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1024px) {
  .ng-wide-xlg-1 {
    grid-column: span 1;
  }
  .ng-wide-xlg-2 {
    grid-column: span 2;
  }
  .ng-wide-xlg-3 {
    grid-column: span 3;
  }
  .ng-wide-xlg-4 {
    grid-column: span 4;
  }
  .ng-wide-xlg-5 {
    grid-column: span 5;
  }
  .ng-wide-xlg-6 {
    grid-column: span 6;
  }
  .ng-wide-xlg-7 {
    grid-column: span 7;
  }
  .ng-wide-xlg-8 {
    grid-column: span 8;
  }
  .ng-wide-xlg-9 {
    grid-column: span 9;
  }
  .ng-wide-xlg-10 {
    grid-column: span 10;
  }
  .ng-wide-xlg-11 {
    grid-column: span 11;
  }
  .ng-wide-xlg-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1280px) {
  .ng-wide-xl-1 {
    grid-column: span 1;
  }
  .ng-wide-xl-2 {
    grid-column: span 2;
  }
  .ng-wide-xl-3 {
    grid-column: span 3;
  }
  .ng-wide-xl-4 {
    grid-column: span 4;
  }
  .ng-wide-xl-5 {
    grid-column: span 5;
  }
  .ng-wide-xl-6 {
    grid-column: span 6;
  }
  .ng-wide-xl-7 {
    grid-column: span 7;
  }
  .ng-wide-xl-8 {
    grid-column: span 8;
  }
  .ng-wide-xl-9 {
    grid-column: span 9;
  }
  .ng-wide-xl-10 {
    grid-column: span 10;
  }
  .ng-wide-xl-11 {
    grid-column: span 11;
  }
  .ng-wide-xl-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1400px) {
  .ng-wide-xxl-1 {
    grid-column: span 1;
  }
  .ng-wide-xxl-2 {
    grid-column: span 2;
  }
  .ng-wide-xxl-3 {
    grid-column: span 3;
  }
  .ng-wide-xxl-4 {
    grid-column: span 4;
  }
  .ng-wide-xxl-5 {
    grid-column: span 5;
  }
  .ng-wide-xxl-6 {
    grid-column: span 6;
  }
  .ng-wide-xxl-7 {
    grid-column: span 7;
  }
  .ng-wide-xxl-8 {
    grid-column: span 8;
  }
  .ng-wide-xxl-9 {
    grid-column: span 9;
  }
  .ng-wide-xxl-10 {
    grid-column: span 10;
  }
  .ng-wide-xxl-11 {
    grid-column: span 11;
  }
  .ng-wide-xxl-12 {
    grid-column: span 12;
  }
}
.ng-flow-start {
  justify-content: flex-start !important;
}

.ng-flow-center {
  justify-content: center !important;
}

.ng-flow-end {
  justify-content: flex-end !important;
}

.ng-flow-between {
  justify-content: space-between !important;
}

.ng-flow-around {
  justify-content: space-around !important;
}

.ng-flow-evenly {
  justify-content: space-evenly !important;
}

.ng-stack-start {
  align-items: flex-start !important;
}

.ng-stack-center {
  align-items: center !important;
}

.ng-stack-end {
  align-items: flex-end !important;
}

.ng-stack-stretch {
  align-items: stretch !important;
}

.ng-self-start {
  align-self: flex-start !important;
}

.ng-self-center {
  align-self: center !important;
}

.ng-self-end {
  align-self: flex-end !important;
}

.ng-self-stretch {
  align-self: stretch !important;
}

.ng-box {
  min-width: 0;
  min-height: 0;
}

@media (max-width: 575.98px) {
  .ng-grid:not(.ng-mobile-grid) {
    grid-template-columns: 1fr !important;
  }
  .ng-grid:not(.ng-mobile-grid) > * {
    grid-column: 1/-1;
  }
}
/* ==========================================================
NexiGrid — Accordion
----------------------------------------------------------
Accordion strutturale neutro. Layout a colonna con gap; item
con trigger (JS ng_accordion.js) e content animato via
max-height. Variante compact. Var scoped overridabili per tema.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-accordion {
  /* ===== Scoped Variables (overridabili per tema/contesto) ===== */
  --ng-acc-gap: .5rem;
  --ng-acc-bg: var(--ng-surface);
  --ng-acc-border: var(--ng-color-border, #e5e5e5);
  /* radius: default md via fallback-at-use (non dichiarato → :root cascata) */
  --ng-acc-trigger-padding-y: .9rem;
  --ng-acc-trigger-padding-x: 1.1rem;
  --ng-acc-trigger-hover-bg: rgba(var(--ng-hover-tint), .03);
  --ng-acc-content-padding-y: 1rem;
  --ng-acc-content-padding-x: 1.1rem;
  --ng-acc-transition-speed: .25s;
  --ng-acc-max-height: 1000px;
  /* ===== Root Layout ===== */
  display: flex;
  flex-direction: column;
  gap: var(--ng-acc-gap);
  /* ===== Accordion Item ===== */
  /* ===== Variante Compact (riduce padding, gap, radius) ===== */
}
.ng-accordion .ng-accordion-item {
  border: var(--ng-border-width, 1px) solid var(--ng-acc-border);
  border-radius: var(--ng-acc-radius, var(--ng-radius-md));
  overflow: hidden;
  background: var(--ng-acc-bg);
  /* Trigger (cliccabile / focusable) */
  /* Icona rotazione */
  /* Content (animazione via max-height, gestita dal JS) */
  /* Stato aperto */
}
.ng-accordion .ng-accordion-item .ng-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--ng-acc-trigger-padding-y) var(--ng-acc-trigger-padding-x);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ng-text);
  font-weight: 500;
  text-align: left;
  transition: background var(--ng-acc-transition-speed) ease;
}
.ng-accordion .ng-accordion-item .ng-accordion-trigger:hover {
  background: var(--ng-acc-trigger-hover-bg);
}
.ng-accordion .ng-accordion-item .ng-accordion-icon {
  transition: transform var(--ng-acc-transition-speed) ease;
}
.ng-accordion .ng-accordion-item .ng-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ng-acc-transition-speed) ease, opacity var(--ng-acc-transition-speed) ease, transform var(--ng-acc-transition-speed) ease;
  /* Padding applicato solo al contenuto interno */
}
.ng-accordion .ng-accordion-item .ng-accordion-content > * {
  padding: var(--ng-acc-content-padding-y) var(--ng-acc-content-padding-x);
}
.ng-accordion .ng-accordion-item.is-open .ng-accordion-content {
  max-height: var(--ng-acc-max-height);
}
.ng-accordion .ng-accordion-item.is-open .ng-accordion-icon {
  transform: rotate(180deg);
}
.ng-accordion.compact {
  --ng-acc-gap: .25rem;
  --ng-acc-trigger-padding-y: .5rem;
  --ng-acc-trigger-padding-x: .75rem;
  --ng-acc-content-padding-y: .6rem;
  --ng-acc-content-padding-x: .75rem;
  --ng-acc-radius: var(--ng-radius-sm);
}
.ng-accordion.compact .ng-accordion-item {
  border-radius: var(--ng-acc-radius, var(--ng-radius-sm));
}
.ng-accordion.compact .ng-accordion-trigger {
  font-size: 0.9rem;
}

/* ==========================================================
NexiGrid — Alert
----------------------------------------------------------
Alert/notice inline (icona, body, title, desc). Varianti colore, compact, dismissible.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-alert {
  --ng-alert-bg: var(--ng-mute-soft, #ececec);
  --ng-alert-color: var(--ng-color-text);
  /* radius: default 0 (bandiera, signature NG) via fallback-at-use.
     :root{--ng-alert-radius} cascata; banner re-scope sotto. */
  --ng-alert-padding: .75rem 1rem;
  --ng-alert-gap: .65rem;
  --ng-alert-icon-size: 1.2rem;
  --ng-alert-close-space: 2.5rem;
  display: flex;
  align-items: center;
  gap: var(--ng-alert-gap);
  padding: var(--ng-alert-padding);
  border-radius: var(--ng-alert-radius, var(--ng-radius-0));
  background: var(--ng-alert-bg);
  color: var(--ng-alert-color);
  /* =================================================
  ICON
  ================================================= */
  /* =================================================
  BODY
  ================================================= */
  /* =================================================
  TITLE
  ================================================= */
  /* =================================================
  DESCRIPTION
  ================================================= */
  /* =================================================
  COMPACT
  ================================================= */
  /* =================================================
  DISMISSIBLE
  ================================================= */
}
.ng-alert .ng-alert-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ng-alert-icon-size);
}
.ng-alert .ng-alert-icon i {
  line-height: 1;
  display: block;
}
.ng-alert .ng-alert-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ng-alert .ng-alert-title {
  font-weight: 600;
  line-height: 1.2;
}
.ng-alert .ng-alert-desc {
  font-size: 0.92em;
  opacity: 0.85;
}
.ng-alert.compact {
  --ng-alert-padding: .5rem .75rem;
  font-size: 0.875rem;
}
.ng-alert.dismissible {
  padding-right: var(--ng-alert-close-space);
  position: relative;
}
.ng-alert.dismissible .ng-alert-close {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 1rem;
  line-height: 1;
}

/* =================================================
COLORS — bg = -soft, text = -dark, bar = -dark (firma laterale)
================================================= */
.ng-alert-primary {
  --ng-alert-bg: var(--ng-primary-soft, rgb(216.2863636364, 204.1409090909, 239.0590909091));
  --ng-alert-color: var(--ng-primary-dark, #4a2a86);
  --ng-alert-bar: var(--ng-primary-dark, #4a2a86);
}

.ng-alert-secondary {
  --ng-alert-bg: var(--ng-secondary-soft, rgb(239.6875, 200.3125, 213.875));
  --ng-alert-color: var(--ng-secondary-dark, #7d2342);
  --ng-alert-bar: var(--ng-secondary-dark, #7d2342);
}

.ng-alert-success {
  --ng-alert-bg: var(--ng-success-soft, rgb(201.2474226804, 245.5525773196, 228.612371134));
  --ng-alert-color: var(--ng-success-dark, #1da571);
  --ng-alert-bar: var(--ng-success-dark, #1da571);
}

.ng-alert-info {
  --ng-alert-bg: var(--ng-info-soft, rgb(204.3164556962, 236.1088607595, 251.0835443038));
  --ng-alert-color: var(--ng-info-dark, #119bdc);
  --ng-alert-bar: var(--ng-info-dark, #119bdc);
}

.ng-alert-warning {
  --ng-alert-bg: var(--ng-warning-soft, rgb(255, 228.8461538462, 197.2));
  --ng-alert-color: var(--ng-warning-dark, #dd7900);
  --ng-alert-bar: var(--ng-warning-dark, #dd7900);
}

.ng-alert-danger {
  --ng-alert-bg: var(--ng-danger-soft, rgb(252.4, 217, 222.4));
  --ng-alert-color: var(--ng-danger-dark, #f2415c);
  --ng-alert-bar: var(--ng-danger-dark, #f2415c);
}

.ng-alert-mute {
  --ng-alert-bg: var(--ng-mute-soft, #f4f4f4);
  --ng-alert-color: var(--ng-mute-dark, #5a5a5a);
  --ng-alert-bar: var(--ng-mute-dark, #5a5a5a);
}

.ng-alert-blue {
  --ng-alert-bg: var(--ng-blue-soft, rgb(215.8, 230, 253.2));
  --ng-alert-color: var(--ng-blue-dark, #3b82f6);
  --ng-alert-bar: var(--ng-blue-dark, #3b82f6);
}

.ng-alert-blue-sky {
  --ng-alert-bg: var(--ng-blue-sky-soft, rgb(225.6, 244, 255));
  --ng-alert-color: var(--ng-blue-sky-dark, #1f8fd6);
  --ng-alert-bar: var(--ng-blue-sky-dark, #1f8fd6);
}

.ng-alert-green {
  --ng-alert-bg: var(--ng-green-soft, rgb(205.4385964912, 236.7614035088, 207.0245614035));
  --ng-alert-color: var(--ng-green-dark, #1b5e20);
  --ng-alert-bar: var(--ng-green-dark, #1b5e20);
}

.ng-alert-lime {
  --ng-alert-bg: var(--ng-lime-soft, rgb(238.6545454545, 255, 197));
  --ng-alert-color: var(--ng-lime-dark, #5a7d00);
  --ng-alert-bar: var(--ng-lime-dark, #5a7d00);
}

.ng-alert-aguagreen {
  --ng-alert-bg: var(--ng-aguagreen-soft, rgb(192.6, 249.4, 237.4));
  --ng-alert-color: var(--ng-aguagreen-dark, #0c7a62);
  --ng-alert-bar: var(--ng-aguagreen-dark, #0c7a62);
}

.ng-alert-indigo {
  --ng-alert-bg: var(--ng-indigo-soft, rgb(219.8, 218, 249.8));
  --ng-alert-color: var(--ng-indigo-dark, #4f46e5);
  --ng-alert-bar: var(--ng-indigo-dark, #4f46e5);
}

.ng-alert-purple {
  --ng-alert-bg: var(--ng-purple-soft, rgb(236, 211.8, 252));
  --ng-alert-color: var(--ng-purple-dark, #a027f0);
  --ng-alert-bar: var(--ng-purple-dark, #a027f0);
}

.ng-alert-purple-heart {
  --ng-alert-bg: var(--ng-purple-heart-soft, rgb(241.5322033898, 213.6677966102, 232.2440677966));
  --ng-alert-color: var(--ng-purple-heart-dark, #b23a8a);
  --ng-alert-bar: var(--ng-purple-heart-dark, #b23a8a);
}

.ng-alert-cyan {
  --ng-alert-bg: var(--ng-cyan-soft, rgb(196.4, 238.797235023, 255));
  --ng-alert-color: var(--ng-cyan-dark, #0081b2);
  --ng-alert-bar: var(--ng-cyan-dark, #0081b2);
}

.ng-alert-magenta {
  --ng-alert-bg: var(--ng-magenta-soft, rgb(255, 195.4, 231.1037735849));
  --ng-alert-color: var(--ng-magenta-dark, #b0006a);
  --ng-alert-bar: var(--ng-magenta-dark, #b0006a);
}

.ng-alert-yellow {
  --ng-alert-bg: var(--ng-yellow-soft, #fff6cc);
  --ng-alert-color: var(--ng-yellow-dark, #e6bd00);
  --ng-alert-bar: var(--ng-yellow-dark, #e6bd00);
}

.ng-alert-clight {
  --ng-alert-bg: var(--ng-clight-soft, rgb(245.4, 246.36, 248.28));
  --ng-alert-color: var(--ng-clight-dark, #e5e7eb);
  --ng-alert-bar: var(--ng-clight-dark, #e5e7eb);
}

.ng-alert-cdark {
  --ng-alert-bg: var(--ng-cdark-soft, rgb(88.68, 88.68, 88.68));
  --ng-alert-color: var(--ng-cdark-dark, #2b2b2b);
  --ng-alert-bar: var(--ng-cdark-dark, #2b2b2b);
}

/* ==========================================================
SIGNATURE — BANDIERA LATERALE
La firma NG per .ng-alert: 4px solid color `-dark` sul lato sinistro.
Token-driven: ogni variante color setta --ng-alert-bar dal proprio -dark.
Opt-out via .ng-alert-bare.
========================================================== */
.ng-alert:not(.ng-alert-bare) {
  border-inline-start: 4px solid var(--ng-alert-bar, var(--ng-mute-dark, #888));
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* ==========================================================
VARIANTI PRE-COTTE — modifier opt-in

  .ng-alert-solid     → bg = -bg color brand + testo -text (look "command output")
  .ng-alert-banner    → full-width senza radius (per top di pagina)
  .ng-alert-floating  → shadow elevata (per overlay/toast position fixed)
  .ng-alert-bare      → opt-out bandiera (look "BS classico")
========================================================== */
/* SOLID — bg saturato del brand, testo a contrasto */
.ng-alert-primary.ng-alert-solid {
  --ng-alert-bg: var(--ng-primary-bg, #4a2a86);
  --ng-alert-color: var(--ng-primary-text, #ffffff);
  --ng-alert-bar: var(--ng-primary-border, #382066);
}

.ng-alert-secondary.ng-alert-solid {
  --ng-alert-bg: var(--ng-secondary-bg, #7d2342);
  --ng-alert-color: var(--ng-secondary-text, #ffffff);
  --ng-alert-bar: var(--ng-secondary-border, #611a34);
}

.ng-alert-success.ng-alert-solid {
  --ng-alert-bg: var(--ng-success-bg, #1da571);
  --ng-alert-color: var(--ng-success-text, #ffffff);
  --ng-alert-bar: var(--ng-success-border, #18875d);
}

.ng-alert-info.ng-alert-solid {
  --ng-alert-bg: var(--ng-info-bg, #119bdc);
  --ng-alert-color: var(--ng-info-text, #ffffff);
  --ng-alert-bar: var(--ng-info-border, #0e7fb4);
}

.ng-alert-warning.ng-alert-solid {
  --ng-alert-bg: var(--ng-warning-bg, #dd7900);
  --ng-alert-color: var(--ng-warning-text, #ffffff);
  --ng-alert-bar: var(--ng-warning-border, #b56300);
}

.ng-alert-danger.ng-alert-solid {
  --ng-alert-bg: var(--ng-danger-bg, #f2415c);
  --ng-alert-color: var(--ng-danger-text, #ffffff);
  --ng-alert-bar: var(--ng-danger-border, #d82e47);
}

.ng-alert-mute.ng-alert-solid {
  --ng-alert-bg: var(--ng-mute-bg, #c8c8c8);
  --ng-alert-color: var(--ng-mute-text, #646464);
  --ng-alert-bar: var(--ng-mute-border, #dcdcdc);
}

.ng-alert-blue.ng-alert-solid {
  --ng-alert-bg: var(--ng-blue-bg, #3b82f6);
  --ng-alert-color: var(--ng-blue-text, #ffffff);
  --ng-alert-bar: var(--ng-blue-border, #2563eb);
}

.ng-alert-blue-sky.ng-alert-solid {
  --ng-alert-bg: var(--ng-blue-sky-bg, #6cc8ff);
  --ng-alert-color: var(--ng-blue-sky-text, #07456e);
  --ng-alert-bar: var(--ng-blue-sky-border, #2ea8f5);
}

.ng-alert-green.ng-alert-solid {
  --ng-alert-bg: var(--ng-green-bg, #2e7d32);
  --ng-alert-color: var(--ng-green-text, #ffffff);
  --ng-alert-bar: var(--ng-green-border, #246428);
}

.ng-alert-lime.ng-alert-solid {
  --ng-alert-bg: var(--ng-lime-bg, #9edc00);
  --ng-alert-color: var(--ng-lime-text, #476f11);
  --ng-alert-bar: var(--ng-lime-border, #82b800);
}

.ng-alert-aguagreen.ng-alert-solid {
  --ng-alert-bg: var(--ng-aguagreen-bg, #0e9c7e);
  --ng-alert-color: var(--ng-aguagreen-text, #ffffff);
  --ng-alert-bar: var(--ng-aguagreen-border, #0b7d64);
}

.ng-alert-indigo.ng-alert-solid {
  --ng-alert-bg: var(--ng-indigo-bg, #4f46e5);
  --ng-alert-color: var(--ng-indigo-text, #ffffff);
  --ng-alert-bar: var(--ng-indigo-border, #4338ca);
}

.ng-alert-purple.ng-alert-solid {
  --ng-alert-bg: var(--ng-purple-bg, #a027f0);
  --ng-alert-color: var(--ng-purple-text, #ffffff);
  --ng-alert-bar: var(--ng-purple-border, #810ecb);
}

.ng-alert-purple-heart.ng-alert-solid {
  --ng-alert-bg: var(--ng-purple-heart-bg, #b23a8a);
  --ng-alert-color: var(--ng-purple-heart-text, #ffffff);
  --ng-alert-bar: var(--ng-purple-heart-border, #7d2962);
}

.ng-alert-cyan.ng-alert-solid {
  --ng-alert-bg: var(--ng-cyan-bg, #009dd9);
  --ng-alert-color: var(--ng-cyan-text, #ffffff);
  --ng-alert-bar: var(--ng-cyan-border, #0081b2);
}

.ng-alert-magenta.ng-alert-solid {
  --ng-alert-bg: var(--ng-magenta-bg, #d4007f);
  --ng-alert-color: var(--ng-magenta-text, #ffffff);
  --ng-alert-bar: var(--ng-magenta-border, #b0006a);
}

.ng-alert-yellow.ng-alert-solid {
  --ng-alert-bg: var(--ng-yellow-bg, #ffd200);
  --ng-alert-color: var(--ng-yellow-text, #8a6800);
  --ng-alert-bar: var(--ng-yellow-border, #e6bd00);
}

.ng-alert-clight.ng-alert-solid {
  --ng-alert-bg: var(--ng-clight-bg, #f0f0f0);
  --ng-alert-color: var(--ng-clight-text, #1f2937);
  --ng-alert-bar: var(--ng-clight-border, #e5e7eb);
}

.ng-alert-cdark.ng-alert-solid {
  --ng-alert-bg: var(--ng-cdark-bg, #424242);
  --ng-alert-color: var(--ng-cdark-text, #f0f0f0);
  --ng-alert-bar: var(--ng-cdark-border, #5a5a5a);
}

/* BANNER — full width, no radius (per top page) */
.ng-alert.ng-alert-banner {
  --ng-alert-radius: var(--ng-radius-0);
  width: 100%;
}

/* FLOATING — shadow per uso in overlay / toast */
.ng-alert.ng-alert-floating {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

/* ===
NexiGrid — Autocomplete
---
Combobox con menu listbox (top-layer via Popover API), risultati raggruppati,
icona/sublabel per voce, stato loading, empty, error. Sicurezza by-design nel JS
(no innerHTML, AbortController, validazione JSON). Riusa --ng-input-* e i
pattern visivi di .ng-dropdown-menu.
---
Multi-select: .is-multiple (data-multiple nel JS) → tags-input inline con chip.
---
Version: 1.1 · Status: stable
=== */
.ng-autocomplete {
  /* ===== Scoped Variables ===== */
  --ng-ac-menu-bg: var(--ng-surface, #fff);
  --ng-ac-menu-border: var(--ng-color-border, #e5e5e5);
  --ng-ac-menu-radius: var(--ng-input-radius, 6px);
  --ng-ac-menu-shadow: 0 10px 30px rgba(0,0,0,.18);
  --ng-ac-menu-max-h: 280px;
  --ng-ac-item-padding-y: .55rem;
  --ng-ac-item-padding-x: .8rem;
  --ng-ac-item-gap: .65rem;
  --ng-ac-item-hover-bg: rgba(var(--ng-hover-tint, 0,0,0), .06);
  --ng-ac-item-active-bg: rgba(var(--ng-hover-tint, 0,0,0), .10);
  --ng-ac-icon-color: var(--ng-text-muted, #777);
  --ng-ac-sublabel-color: var(--ng-text-muted, #777);
  --ng-ac-group-color: var(--ng-text-muted, #777);
  --ng-ac-z: var(--ng-z-dropdown_menu, 401);
  position: relative;
  display: block;
  inline-size: 100%;
}

/* ============================================================
MULTI-SELECT — tags-input inline (.is-multiple)
Il .ng-autocomplete-control fa da box input (riusa i token --ng-input-*);
l'input interno diventa "nudo" e cresce nello spazio libero. I selezionati
sono .ng-chip removable, gestiti dal JS (ng_autocomplete v1.1).
============================================================ */
.ng-autocomplete.is-multiple {
  /* input nudo dentro il control: niente box proprio, cresce e va a capo */
}
.ng-autocomplete.is-multiple .ng-autocomplete-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-block: calc(var(--ng-input-padding-y) - 0.15rem);
  padding-inline: var(--ng-input-padding-x);
  border: 1px solid var(--ng-input-color-border);
  border-radius: var(--ng-input-radius);
  background: var(--ng-input-bg);
  cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ng-autocomplete.is-multiple .ng-autocomplete-control:focus-within {
  border-color: var(--ng-input-focus-border);
  box-shadow: var(--ng-input-focus-ring);
}
.ng-autocomplete.is-multiple .ng-input {
  flex: 1 1 80px;
  min-inline-size: 80px;
  inline-size: auto;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}
.ng-autocomplete.is-multiple .ng-input:focus, .ng-autocomplete.is-multiple .ng-input:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}
.ng-autocomplete.is-multiple .ng-chip {
  max-inline-size: 100%;
}

/* ============================================================
MENU (listbox) — top-layer via Popover API
============================================================ */
.ng-autocomplete-menu {
  /* Popover API: nascosto di default quando non aperto */
  /* Stile contenitore */
  min-inline-size: 220px;
  max-block-size: var(--ng-ac-menu-max-h);
  overflow-y: auto;
  background: var(--ng-ac-menu-bg);
  border: 1px solid var(--ng-ac-menu-border);
  border-radius: var(--ng-ac-menu-radius);
  box-shadow: var(--ng-ac-menu-shadow);
  padding: 0.25rem;
  z-index: var(--ng-ac-z);
  /* Fade entry coerente con dropdown */
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ng-autocomplete-menu[popover]:not(:popover-open) {
  display: none;
}
.ng-autocomplete-menu:popover-open {
  inset: auto;
  margin: 0;
}
.ng-autocomplete-menu.is-open, .ng-autocomplete-menu:popover-open {
  opacity: 1;
}
@starting-style {
  .ng-autocomplete-menu:popover-open {
    opacity: 0;
  }
}

/* Loading indicator: barra sottile animata in cima al menu, senza svuotarlo */
.ng-autocomplete-menu.is-loading::before {
  content: "";
  position: sticky;
  inset-block-start: 0;
  display: block;
  block-size: 2px;
  margin-block-end: 0.15rem;
  background: linear-gradient(90deg, transparent, var(--ng-primary-bg, #4a2a86) 50%, transparent);
  background-size: 200% 100%;
  animation: ng-ac-loading 1.1s linear infinite;
  z-index: 1;
}

@keyframes ng-ac-loading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
/* ============================================================
ITEMS
============================================================ */
.ng-autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--ng-ac-item-gap);
  padding-block: var(--ng-ac-item-padding-y);
  padding-inline: var(--ng-ac-item-padding-x);
  border-radius: calc(var(--ng-ac-menu-radius) - 2px);
  cursor: pointer;
  user-select: none;
  color: var(--ng-text, #222);
  /* Highlight match (wrapped by JS in <mark>) */
}
.ng-autocomplete-item:hover {
  background: var(--ng-ac-item-hover-bg);
}
.ng-autocomplete-item.is-active {
  background: var(--ng-ac-item-active-bg);
}
.ng-autocomplete-item[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}
.ng-autocomplete-item .ng-autocomplete-icon {
  flex-shrink: 0;
  color: var(--ng-ac-icon-color);
  font-size: 1.1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.ng-autocomplete-item .ng-autocomplete-body {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.ng-autocomplete-item .ng-autocomplete-label {
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ng-autocomplete-item .ng-autocomplete-sublabel {
  color: var(--ng-ac-sublabel-color);
  font-size: 0.78rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ng-autocomplete-item mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
}

/* ============================================================
GROUPS
============================================================ */
.ng-autocomplete-group {
  padding-block: 0.35rem 0.2rem;
  padding-inline: var(--ng-ac-item-padding-x);
  color: var(--ng-ac-group-color);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  /* Separatore tra gruppi successivi */
}
.ng-autocomplete-group + .ng-autocomplete-item {
  margin-top: 0.15rem;
}

/* ============================================================
STATI (loading / empty / error)
============================================================ */
.ng-autocomplete-status {
  padding-block: var(--ng-ac-item-padding-y);
  padding-inline: var(--ng-ac-item-padding-x);
  color: var(--ng-text-muted, #777);
  font-size: 0.85rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.ng-autocomplete-status.is-error {
  color: var(--ng-danger-bg, #f2415c);
}

.ng-autocomplete-status .ng-spinner {
  --ng-spinner-border-width: 2px;
  inline-size: 14px;
  block-size: 14px;
}

/* ==========================================================
NexiGrid — Avatar
----------------------------------------------------------
Avatar (immagine/iniziali), dot/badge, ring, size system, avatar-group/stack.
----------------------------------------------------------
Version: 1.0.1 · Status: stable
========================================================== */
.ng-avatar {
  /* radius: default md via fallback-at-use (non dichiarato → :root cascata) */
  --ng-avatar-bg: var(--ng-fill);
  --ng-avatar-color: var(--ng-text-muted, #ccc);
  --ng-avatar-border: 0;
  --ng-avatar-border-color: var(--ng-surface);
  --ng-avatar-border-group: 3px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ng-avatar-size, 40px);
  height: var(--ng-avatar-size, 40px);
  border-radius: var(--ng-avatar-radius, var(--ng-radius-md));
  background: var(--ng-avatar-bg);
  font-weight: 600;
  flex: 0 0 auto;
  overflow: visible;
  border: var(--ng-avatar-border) solid var(--ng-avatar-border-color);
}
.ng-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ng-avatar.circle {
  --ng-avatar-radius: 50%;
}
.ng-avatar.ring {
  box-shadow: 0 0 0 3px var(--ng-g-0, #fff), 0 0 0 5px currentColor;
}

/* =================================================
SIZE SYSTEM (UNIFICATO)
================================================= */
.ng-avatar.xs,
.ng-avatar-group.xs {
  --ng-avatar-size: 26px;
}
.ng-avatar.sm,
.ng-avatar-group.sm {
  --ng-avatar-size: 32px;
}
.ng-avatar.md,
.ng-avatar-group.md {
  --ng-avatar-size: 40px;
}
.ng-avatar.md2x,
.ng-avatar-group.md2x {
  --ng-avatar-size: 50px;
}
.ng-avatar.lg,
.ng-avatar-group.lg {
  --ng-avatar-size: 70px;
}
.ng-avatar.lg2x,
.ng-avatar-group.lg2x {
  --ng-avatar-size: 90px;
}
.ng-avatar.xl,
.ng-avatar-group.xl {
  --ng-avatar-size: 120px;
}

/* =================================================
OVERLAY ELEMENTS
================================================= */
.ng-avatar .ng-avatar-dot {
  position: absolute;
  width: calc(var(--ng-avatar-size) * 0.25);
  height: calc(var(--ng-avatar-size) * 0.25);
  border-radius: 50%;
  border: 2px solid var(--ng-avatar-border-color);
  background: transparent;
  bottom: calc(var(--ng-avatar-size) * 0.04);
  right: calc(var(--ng-avatar-size) * 0.04);
}
.ng-avatar .ng-avatar-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.ng-avatar.xs .ng-avatar-badge, .ng-avatar.sm .ng-avatar-badge, .ng-avatar.md .ng-avatar-badge {
  top: -9px;
  right: -9px;
  width: 21px;
  height: 21px;
}
.ng-avatar.md2x .ng-avatar-badge {
  top: -6px;
  right: -6px;
}
.ng-avatar.lg .ng-avatar-badge {
  top: -4px;
  right: -4px;
}
.ng-avatar.lg2x .ng-avatar-badge {
  top: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
}
.ng-avatar.xl .ng-avatar-badge {
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
}

/* =================================================
AVATAR GROUP / STACK
================================================= */
.ng-avatar-group {
  --ng-avatar-gap: -10px;
  display: inline-flex;
  align-items: center;
}
.ng-avatar-group .ng-avatar {
  /* BUG-005: stesso fallback della regola base — senza, var undefined
     (group privo di size class) invalida width/height e l'avatar collassa */
  width: var(--ng-avatar-size, 40px);
  height: var(--ng-avatar-size, 40px);
  margin-left: var(--ng-avatar-gap);
  border: var(--ng-avatar-border-group) solid var(--ng-avatar-border-color, #fff);
}
.ng-avatar-group .ng-avatar:first-child {
  margin-left: 0;
}

/* ==========================================================
NexiGrid — Back to top
----------------------------------------------------------
Bottone flottante "torna su". COMPONE .ng-btn per tutto il look
(colore/forma/size): qui solo position:fixed, angolo, z-layer,
show/hide su scroll (.is-visible da ng_back_to_top.js) e l'anello
di progresso opzionale (conic+mask, come .ng-chart-donut).
JS: assets/js/ng_back_to_top.js — opzioni via data-ng-*.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-back-to-top {
  /* ===== Scoped Variables ===== */
  --ng-btt-offset: var(--ng-gap, 1.5rem);
  --ng-btt-z: var(--ng-z-back-to-top, var(--ng-z-snackbar, 770));
  --ng-btt-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  --ng-btt-transition: opacity .25s ease, transform .25s ease, visibility .25s;
  --ng-btt-progress: 0%; /* DATO: % scroll (da JS) */
  --ng-btt-ring-thickness: 3px;
  --ng-btt-ring-gap: 9px; /* anello staccato dal bordo (gap netto ≈ gap - thickness) */
  --ng-btt-ring-color: currentColor; /* default = testo button (OK su outline/soft);
   per i solid impostalo al brand, es. var(--ng-primary-bg) */
  --ng-btt-ring-track: transparent; /* opz. traccia del cerchio (parte non riempita) */
  position: fixed;
  inset-block-end: var(--ng-btt-offset);
  inset-inline-end: var(--ng-btt-offset);
  z-index: var(--ng-btt-z);
  box-shadow: var(--ng-btt-shadow);
  /* Nascosto di default; .is-visible lo mostra (toggle dal JS) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--ng-btt-transition);
  /* Contained: ancorato a un wrapper position:relative (per container scope).
     Va messo FUORI dall'elemento scrollabile (come fratello), dentro un
     wrapper relative che avvolge container + bottone — altrimenti, se è
     dentro lo scroll, scorre via col contenuto. */
  /* ===== Animazioni show/hide (transform dello stato nascosto) ===== */
  /* ===== Angoli ===== */
  /* Center: composizione con translateX(-50%). Tenere su .fade
     (default): slide/scale + center richiederebbero transform combinato. */
  /* ===== Anello di progresso (opzionale, data-ng-progress) =====
     Stessa tecnica del donut: conic-gradient (dato) + mask radiale.
     currentColor → eredita il colore del .ng-btn-<color>. */
}
.ng-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ng-back-to-top.contained {
  position: absolute;
}
.ng-back-to-top.slide {
  transform: translateY(12px);
}
.ng-back-to-top.scale {
  transform: scale(0.8);
}
.ng-back-to-top.slide.is-visible, .ng-back-to-top.scale.is-visible {
  transform: none;
}
.ng-back-to-top.bottom-left {
  inset-inline: var(--ng-btt-offset) auto;
}
.ng-back-to-top.top-right {
  inset-block: var(--ng-btt-offset) auto;
}
.ng-back-to-top.top-left {
  inset-block: var(--ng-btt-offset) auto;
  inset-inline: var(--ng-btt-offset) auto;
}
.ng-back-to-top.bottom-center, .ng-back-to-top.top-center {
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);
}
.ng-back-to-top.top-center {
  inset-block: var(--ng-btt-offset) auto;
}
.ng-back-to-top .ng-back-to-top-ring {
  position: absolute;
  inset: calc(var(--ng-btt-ring-gap) * -1);
  border-radius: 50%;
  background: conic-gradient(var(--ng-btt-ring-color) var(--ng-btt-progress), var(--ng-btt-ring-track) 0);
  -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--ng-btt-ring-thickness)), #000 0);
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--ng-btt-ring-thickness)), #000 0);
  pointer-events: none;
}

/* ===== Hide on mobile (sotto md) ===== */
@media (max-width: 767px) {
  .ng-back-to-top.hide-on-mobile {
    display: none;
  }
}
/* ==========================================================
NexiGrid — Badge
----------------------------------------------------------
Etichette / contatori inline. SCSS-only (nessun JS).
Varianti: solid · outline · soft · size sm/lg (default = medium) ·
shape pill/quad/circle · subtle.
Colori da $ng-colors (token L1/L2, override via --ng-<color>-bg).
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-badge {
  /* === Scoped Variables === */
  --ng-badge-font-size: .75rem;
  --ng-badge-font-weight: 600;
  --ng-badge-padding-y: .35em;
  --ng-badge-padding-x: .7em;
  /* Radius: non dichiarato qui (schermerebbe :root). Default master via
     fallback-at-use → :root{--ng-badge-radius} cascata su tutti i badge. */
  --ng-badge-border-width: var(--ng-border-width, 1px);
  --ng-badge-bg: var(--ng-fill);
  --ng-badge-color: var(--ng-text);
  --ng-badge-border: transparent;
  --ng-badge-gap: .35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ng-badge-gap);
  padding-block: var(--ng-badge-padding-y);
  padding-inline: var(--ng-badge-padding-x);
  font-size: var(--ng-badge-font-size);
  font-weight: var(--ng-badge-font-weight);
  line-height: 1;
  border-radius: var(--ng-badge-radius, var(--ng-radius));
  border: var(--ng-badge-border-width) solid var(--ng-badge-border);
  background: var(--ng-badge-bg);
  color: var(--ng-badge-color);
  white-space: nowrap;
  user-select: none;
  /* =========================
     Sizes
  ========================= */
  /* =========================
     Shape Modifiers
  ========================= */
  /* =========================
     Subtle Variant
  ========================= */
}
.ng-badge.sm {
  --ng-badge-font-size: .65rem;
  --ng-badge-padding-y: .2em;
  --ng-badge-padding-x: .45em;
}
.ng-badge.lg {
  --ng-badge-font-size: .90rem;
  --ng-badge-padding-y: .40em;
  --ng-badge-padding-x: 1.2em;
}
.ng-badge.pill {
  --ng-badge-radius: var(--ng-radius-pill);
}
.ng-badge.quad {
  aspect-ratio: 1/1;
  min-inline-size: 1.6em;
  padding: 8px;
  border: var(--ng-badge-border-width) solid transparent;
  --ng-badge-radius: var(--ng-radius-sm);
}
.ng-badge.circle {
  aspect-ratio: 1/1;
  min-inline-size: 1.6em;
  padding: 0;
  --ng-badge-radius: 50%;
}
.ng-badge.subtle {
  opacity: 0.85;
  font-weight: 500;
}

.ng-badge i {
  display: block;
}

/* ==========================================================
Color Variants (Theme-ready)
========================================================== */
.ng-badge-primary {
  --ng-badge-bg: var(--ng-primary-bg, #4a2a86);
  --ng-badge-color: var(--ng-primary-text, #ffffff);
  --ng-badge-border: var(--ng-primary-border, #382066);
}

.ng-badge-primary-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-primary-dark, #4a2a86);
  --ng-badge-border: var(--ng-primary-border, #382066);
}

.ng-badge-primary-soft {
  --ng-badge-bg: var(--ng-primary-soft, rgb(216.2863636364, 204.1409090909, 239.0590909091));
  --ng-badge-color: var(--ng-primary-dark, #4a2a86);
  --ng-badge-border: transparent;
}

.ng-badge-secondary {
  --ng-badge-bg: var(--ng-secondary-bg, #7d2342);
  --ng-badge-color: var(--ng-secondary-text, #ffffff);
  --ng-badge-border: var(--ng-secondary-border, #611a34);
}

.ng-badge-secondary-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-secondary-dark, #7d2342);
  --ng-badge-border: var(--ng-secondary-border, #611a34);
}

.ng-badge-secondary-soft {
  --ng-badge-bg: var(--ng-secondary-soft, rgb(239.6875, 200.3125, 213.875));
  --ng-badge-color: var(--ng-secondary-dark, #7d2342);
  --ng-badge-border: transparent;
}

.ng-badge-success {
  --ng-badge-bg: var(--ng-success-bg, #1da571);
  --ng-badge-color: var(--ng-success-text, #ffffff);
  --ng-badge-border: var(--ng-success-border, #18875d);
}

.ng-badge-success-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-success-dark, #1da571);
  --ng-badge-border: var(--ng-success-border, #18875d);
}

.ng-badge-success-soft {
  --ng-badge-bg: var(--ng-success-soft, rgb(201.2474226804, 245.5525773196, 228.612371134));
  --ng-badge-color: var(--ng-success-dark, #1da571);
  --ng-badge-border: transparent;
}

.ng-badge-info {
  --ng-badge-bg: var(--ng-info-bg, #119bdc);
  --ng-badge-color: var(--ng-info-text, #ffffff);
  --ng-badge-border: var(--ng-info-border, #0e7fb4);
}

.ng-badge-info-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-info-dark, #119bdc);
  --ng-badge-border: var(--ng-info-border, #0e7fb4);
}

.ng-badge-info-soft {
  --ng-badge-bg: var(--ng-info-soft, rgb(204.3164556962, 236.1088607595, 251.0835443038));
  --ng-badge-color: var(--ng-info-dark, #119bdc);
  --ng-badge-border: transparent;
}

.ng-badge-warning {
  --ng-badge-bg: var(--ng-warning-bg, #dd7900);
  --ng-badge-color: var(--ng-warning-text, #ffffff);
  --ng-badge-border: var(--ng-warning-border, #b56300);
}

.ng-badge-warning-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-warning-dark, #dd7900);
  --ng-badge-border: var(--ng-warning-border, #b56300);
}

.ng-badge-warning-soft {
  --ng-badge-bg: var(--ng-warning-soft, rgb(255, 228.8461538462, 197.2));
  --ng-badge-color: var(--ng-warning-dark, #dd7900);
  --ng-badge-border: transparent;
}

.ng-badge-danger {
  --ng-badge-bg: var(--ng-danger-bg, #f2415c);
  --ng-badge-color: var(--ng-danger-text, #ffffff);
  --ng-badge-border: var(--ng-danger-border, #d82e47);
}

.ng-badge-danger-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-danger-dark, #f2415c);
  --ng-badge-border: var(--ng-danger-border, #d82e47);
}

.ng-badge-danger-soft {
  --ng-badge-bg: var(--ng-danger-soft, rgb(252.4, 217, 222.4));
  --ng-badge-color: var(--ng-danger-dark, #f2415c);
  --ng-badge-border: transparent;
}

.ng-badge-mute {
  --ng-badge-bg: var(--ng-mute-bg, #c8c8c8);
  --ng-badge-color: var(--ng-mute-text, #646464);
  --ng-badge-border: var(--ng-mute-border, #dcdcdc);
}

.ng-badge-mute-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-mute-dark, #5a5a5a);
  --ng-badge-border: var(--ng-mute-border, #dcdcdc);
}

.ng-badge-mute-soft {
  --ng-badge-bg: var(--ng-mute-soft, #f4f4f4);
  --ng-badge-color: var(--ng-mute-dark, #5a5a5a);
  --ng-badge-border: transparent;
}

.ng-badge-blue {
  --ng-badge-bg: var(--ng-blue-bg, #3b82f6);
  --ng-badge-color: var(--ng-blue-text, #ffffff);
  --ng-badge-border: var(--ng-blue-border, #2563eb);
}

.ng-badge-blue-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-blue-dark, #3b82f6);
  --ng-badge-border: var(--ng-blue-border, #2563eb);
}

.ng-badge-blue-soft {
  --ng-badge-bg: var(--ng-blue-soft, rgb(215.8, 230, 253.2));
  --ng-badge-color: var(--ng-blue-dark, #3b82f6);
  --ng-badge-border: transparent;
}

.ng-badge-blue-sky {
  --ng-badge-bg: var(--ng-blue-sky-bg, #6cc8ff);
  --ng-badge-color: var(--ng-blue-sky-text, #07456e);
  --ng-badge-border: var(--ng-blue-sky-border, #2ea8f5);
}

.ng-badge-blue-sky-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-blue-sky-dark, #1f8fd6);
  --ng-badge-border: var(--ng-blue-sky-border, #2ea8f5);
}

.ng-badge-blue-sky-soft {
  --ng-badge-bg: var(--ng-blue-sky-soft, rgb(225.6, 244, 255));
  --ng-badge-color: var(--ng-blue-sky-dark, #1f8fd6);
  --ng-badge-border: transparent;
}

.ng-badge-green {
  --ng-badge-bg: var(--ng-green-bg, #2e7d32);
  --ng-badge-color: var(--ng-green-text, #ffffff);
  --ng-badge-border: var(--ng-green-border, #246428);
}

.ng-badge-green-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-green-dark, #1b5e20);
  --ng-badge-border: var(--ng-green-border, #246428);
}

.ng-badge-green-soft {
  --ng-badge-bg: var(--ng-green-soft, rgb(205.4385964912, 236.7614035088, 207.0245614035));
  --ng-badge-color: var(--ng-green-dark, #1b5e20);
  --ng-badge-border: transparent;
}

.ng-badge-lime {
  --ng-badge-bg: var(--ng-lime-bg, #9edc00);
  --ng-badge-color: var(--ng-lime-text, #476f11);
  --ng-badge-border: var(--ng-lime-border, #82b800);
}

.ng-badge-lime-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-lime-dark, #5a7d00);
  --ng-badge-border: var(--ng-lime-border, #82b800);
}

.ng-badge-lime-soft {
  --ng-badge-bg: var(--ng-lime-soft, rgb(238.6545454545, 255, 197));
  --ng-badge-color: var(--ng-lime-dark, #5a7d00);
  --ng-badge-border: transparent;
}

.ng-badge-aguagreen {
  --ng-badge-bg: var(--ng-aguagreen-bg, #0e9c7e);
  --ng-badge-color: var(--ng-aguagreen-text, #ffffff);
  --ng-badge-border: var(--ng-aguagreen-border, #0b7d64);
}

.ng-badge-aguagreen-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-aguagreen-dark, #0c7a62);
  --ng-badge-border: var(--ng-aguagreen-border, #0b7d64);
}

.ng-badge-aguagreen-soft {
  --ng-badge-bg: var(--ng-aguagreen-soft, rgb(192.6, 249.4, 237.4));
  --ng-badge-color: var(--ng-aguagreen-dark, #0c7a62);
  --ng-badge-border: transparent;
}

.ng-badge-indigo {
  --ng-badge-bg: var(--ng-indigo-bg, #4f46e5);
  --ng-badge-color: var(--ng-indigo-text, #ffffff);
  --ng-badge-border: var(--ng-indigo-border, #4338ca);
}

.ng-badge-indigo-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-indigo-dark, #4f46e5);
  --ng-badge-border: var(--ng-indigo-border, #4338ca);
}

.ng-badge-indigo-soft {
  --ng-badge-bg: var(--ng-indigo-soft, rgb(219.8, 218, 249.8));
  --ng-badge-color: var(--ng-indigo-dark, #4f46e5);
  --ng-badge-border: transparent;
}

.ng-badge-purple {
  --ng-badge-bg: var(--ng-purple-bg, #a027f0);
  --ng-badge-color: var(--ng-purple-text, #ffffff);
  --ng-badge-border: var(--ng-purple-border, #810ecb);
}

.ng-badge-purple-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-purple-dark, #a027f0);
  --ng-badge-border: var(--ng-purple-border, #810ecb);
}

.ng-badge-purple-soft {
  --ng-badge-bg: var(--ng-purple-soft, rgb(236, 211.8, 252));
  --ng-badge-color: var(--ng-purple-dark, #a027f0);
  --ng-badge-border: transparent;
}

.ng-badge-purple-heart {
  --ng-badge-bg: var(--ng-purple-heart-bg, #b23a8a);
  --ng-badge-color: var(--ng-purple-heart-text, #ffffff);
  --ng-badge-border: var(--ng-purple-heart-border, #7d2962);
}

.ng-badge-purple-heart-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-purple-heart-dark, #b23a8a);
  --ng-badge-border: var(--ng-purple-heart-border, #7d2962);
}

.ng-badge-purple-heart-soft {
  --ng-badge-bg: var(--ng-purple-heart-soft, rgb(241.5322033898, 213.6677966102, 232.2440677966));
  --ng-badge-color: var(--ng-purple-heart-dark, #b23a8a);
  --ng-badge-border: transparent;
}

.ng-badge-cyan {
  --ng-badge-bg: var(--ng-cyan-bg, #009dd9);
  --ng-badge-color: var(--ng-cyan-text, #ffffff);
  --ng-badge-border: var(--ng-cyan-border, #0081b2);
}

.ng-badge-cyan-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-cyan-dark, #0081b2);
  --ng-badge-border: var(--ng-cyan-border, #0081b2);
}

.ng-badge-cyan-soft {
  --ng-badge-bg: var(--ng-cyan-soft, rgb(196.4, 238.797235023, 255));
  --ng-badge-color: var(--ng-cyan-dark, #0081b2);
  --ng-badge-border: transparent;
}

.ng-badge-magenta {
  --ng-badge-bg: var(--ng-magenta-bg, #d4007f);
  --ng-badge-color: var(--ng-magenta-text, #ffffff);
  --ng-badge-border: var(--ng-magenta-border, #b0006a);
}

.ng-badge-magenta-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-magenta-dark, #b0006a);
  --ng-badge-border: var(--ng-magenta-border, #b0006a);
}

.ng-badge-magenta-soft {
  --ng-badge-bg: var(--ng-magenta-soft, rgb(255, 195.4, 231.1037735849));
  --ng-badge-color: var(--ng-magenta-dark, #b0006a);
  --ng-badge-border: transparent;
}

.ng-badge-yellow {
  --ng-badge-bg: var(--ng-yellow-bg, #ffd200);
  --ng-badge-color: var(--ng-yellow-text, #8a6800);
  --ng-badge-border: var(--ng-yellow-border, #e6bd00);
}

.ng-badge-yellow-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-yellow-dark, #e6bd00);
  --ng-badge-border: var(--ng-yellow-border, #e6bd00);
}

.ng-badge-yellow-soft {
  --ng-badge-bg: var(--ng-yellow-soft, #fff6cc);
  --ng-badge-color: var(--ng-yellow-dark, #e6bd00);
  --ng-badge-border: transparent;
}

.ng-badge-clight {
  --ng-badge-bg: var(--ng-clight-bg, #f0f0f0);
  --ng-badge-color: var(--ng-clight-text, #1f2937);
  --ng-badge-border: var(--ng-clight-border, #e5e7eb);
}

.ng-badge-clight-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-clight-dark, #e5e7eb);
  --ng-badge-border: var(--ng-clight-border, #e5e7eb);
}

.ng-badge-clight-soft {
  --ng-badge-bg: var(--ng-clight-soft, rgb(245.4, 246.36, 248.28));
  --ng-badge-color: var(--ng-clight-dark, #e5e7eb);
  --ng-badge-border: transparent;
}

.ng-badge-cdark {
  --ng-badge-bg: var(--ng-cdark-bg, #424242);
  --ng-badge-color: var(--ng-cdark-text, #f0f0f0);
  --ng-badge-border: var(--ng-cdark-border, #5a5a5a);
}

.ng-badge-cdark-outline {
  --ng-badge-bg: transparent;
  --ng-badge-color: var(--ng-cdark-dark, #2b2b2b);
  --ng-badge-border: var(--ng-cdark-border, #5a5a5a);
}

.ng-badge-cdark-soft {
  --ng-badge-bg: var(--ng-cdark-soft, rgb(88.68, 88.68, 88.68));
  --ng-badge-color: var(--ng-cdark-dark, #2b2b2b);
  --ng-badge-border: transparent;
}

/* ==========================================================
NexiGrid — Breadcrumb
----------------------------------------------------------
Breadcrumb con separatori (arrow/chevron/dot/pipe), size, interactive, boxed, truncate.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-breadcrumb {
  --ng-bc-gap: .5rem;
  --ng-bc-sep: "/";
  --ng-bc-font-size: .95rem;
  --ng-bc-padding-y: 0;
  --ng-bc-padding-x: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ng-bc-gap);
  font-size: var(--ng-bc-font-size);
  /* ==========================
     Separator Variants
  ========================== */
  /* ==========================
     Size Variants
  ========================== */
  /* ==========================
     Interactive
  ========================== */
  /* ==========================
     Boxed Style
  ========================== */
  /* ==========================
     Icon space
  ========================== */
  /* ==========================
     Center
  ========================== */
  /* ==========================
     Muted
  ========================== */
  /* ==========================
     Truncate
  ========================== */
}
.ng-breadcrumb .ng-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  padding: var(--ng-bc-padding-y) var(--ng-bc-padding-x);
}
.ng-breadcrumb .ng-breadcrumb-item:not(:last-child)::after {
  content: var(--ng-bc-sep);
  margin-left: var(--ng-bc-gap);
  opacity: 0.5;
}
.ng-breadcrumb .ng-breadcrumb-item.is-active {
  font-weight: 600;
  pointer-events: none;
}
.ng-breadcrumb.arrow {
  --ng-bc-sep: "›";
}
.ng-breadcrumb.chevron {
  --ng-bc-sep: ">";
}
.ng-breadcrumb.dot {
  --ng-bc-sep: "•";
}
.ng-breadcrumb.pipe {
  --ng-bc-sep: "|";
}
.ng-breadcrumb.sm {
  --ng-bc-font-size: .85rem;
  --ng-bc-gap: .35rem;
}
.ng-breadcrumb.lg {
  --ng-bc-font-size: 1.1rem;
  --ng-bc-gap: .75rem;
}
.ng-breadcrumb.interactive .ng-breadcrumb-item:not(.is-active) {
  cursor: pointer;
}
.ng-breadcrumb.interactive .ng-breadcrumb-item:not(.is-active):hover {
  text-decoration: underline;
}
.ng-breadcrumb.boxed .ng-breadcrumb-item {
  background: rgba(var(--ng-hover-tint), 0.04);
  border-radius: var(--ng-radius-md);
  padding: 0.25rem 0.6rem;
}
.ng-breadcrumb.boxed .ng-breadcrumb-item:not(:last-child)::after {
  display: none;
}
.ng-breadcrumb.icon-space {
  --ng-bc-icon-gap: .4rem;
}
.ng-breadcrumb.icon-space .ng-breadcrumb-item {
  margin-left: var(--ng-bc-icon-gap);
  margin-right: var(--ng-bc-icon-gap);
}
.ng-breadcrumb.icon-space .ng-breadcrumb-item:not(:last-child)::after {
  display: none;
}
.ng-breadcrumb.icon-space .ng-breadcrumb-item:first-child {
  margin-left: 0;
}
.ng-breadcrumb.icon-space .ng-breadcrumb-item:last-child {
  margin-right: 0;
}
.ng-breadcrumb.center {
  justify-content: center;
}
.ng-breadcrumb.muted {
  opacity: 0.7;
}
.ng-breadcrumb.truncate {
  overflow: hidden;
  white-space: nowrap;
}
.ng-breadcrumb.truncate .ng-breadcrumb-item {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================
NexiGrid — Button
----------------------------------------------------------
Bottoni interattivi. Stile SCSS-only (spinner in _ng_spinner).
Varianti: solid · outline · soft · ghost · link · size xs/sm/md/lg
· shape rect/quad/circle · stati hover/disabled/loading.
Colori da $ng-colors (token L1/L2, override via --ng-<color>-bg).
----------------------------------------------------------
Version: 1.0.2 · Status: stable
========================================================== */
.ng-btn {
  /* ===== Scoped Variables ===== */
  --ng-btn-padding-y: .5em;
  --ng-btn-padding-x: 1em;
  --ng-btn-font-size: .95rem;
  --ng-btn-font-weight: 500;
  --ng-btn-line-height: 1.2;
  /* Radius: NON dichiarato qui (schermerebbe :root). Default al master
     --ng-radius via fallback-at-use → :root{--ng-btn-radius} cascata su
     tutti i bottoni; style="--ng-btn-radius" override per-istanza. */
  --ng-btn-border-width: var(--ng-border-width, 1px);
  --ng-btn-disabled-opacity: .6;
  --ng-btn-focus-outline: 2px solid rgba(var(--ng-hover-tint), .25);
  --ng-btn-focus-offset: 2px;
  --ng-btn-spinner-size: 1em;
  --ng-btn-spinner-border: 2px;
  --ng-btn-spinner-speed: .6s;
  --ng-btn-transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: var(--ng-btn-padding-y) var(--ng-btn-padding-x);
  font-size: var(--ng-btn-font-size);
  font-family: var(--ng-font-base);
  font-weight: var(--ng-btn-font-weight);
  line-height: var(--ng-btn-line-height);
  border-radius: var(--ng-btn-radius, var(--ng-radius));
  border: var(--ng-btn-border-width) solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ng-btn-transition);
  white-space: nowrap;
  vertical-align: middle;
  /* Disabled */
  /* Focus */
  /* Sizes */
  /* Rect — radius = master (3px), solo padding diverso */
  /* Quad — radius = master (3px), come i button normali e i group.
     Stessa ALTEZZA dei button normali: mantiene --ng-btn-padding-y (segue
     anche le size sm/lg) e ottiene il quadrato con aspect-ratio 1/1, NON
     con un padding literal (era 4px → più basso). */
  /* Circle — tondo (re-scope del knob a 50%, eccezione literal ammessa) */
}
.ng-btn:disabled, .ng-btn.is-disabled {
  opacity: var(--ng-btn-disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
}
.ng-btn:focus-visible {
  outline: var(--ng-btn-focus-outline);
  outline-offset: var(--ng-btn-focus-offset);
}
.ng-btn.xs {
  --ng-btn-font-size: .65rem;
  --ng-btn-padding-y: .15em;
  --ng-btn-padding-x: .55em;
}
.ng-btn.sm {
  --ng-btn-font-size: .85rem;
  --ng-btn-padding-y: .35em;
  --ng-btn-padding-x: .75em;
}
.ng-btn.lg {
  --ng-btn-font-size: 1.1rem;
  --ng-btn-padding-y: .65em;
  --ng-btn-padding-x: 1.3em;
}
.ng-btn.rect {
  padding: 1rem;
}
.ng-btn.quad {
  aspect-ratio: 1/1;
  min-inline-size: 1.6em;
  padding: var(--ng-btn-padding-y);
  border: var(--ng-btn-border-width) solid transparent;
}
.ng-btn.circle {
  padding: 0;
  inline-size: calc(var(--ng-btn-font-size) * 1.2 + var(--ng-btn-padding-y) * 2);
  block-size: calc(var(--ng-btn-font-size) * 1.2 + var(--ng-btn-padding-y) * 2);
  --ng-btn-radius: 50%;
}
.ng-btn i.ph, .ng-btn i.ph-thin, .ng-btn i.ph-light, .ng-btn i.ph-bold, .ng-btn i.ph-fill, .ng-btn i.ph-duotone {
  font-size: 1em;
  line-height: 1;
  display: inline-flex;
}
.ng-btn i.ph[class*=fs-] {
  font-size: 1em;
}

/* ==========================================================
Color Variants (solid + outline)
========================================================== */
/* Solid */
.ng-btn-primary {
  background: var(--ng-primary-bg, #4a2a86);
  color: var(--ng-primary-text, #ffffff);
  border-color: var(--ng-primary-border, #382066);
}
.ng-btn-primary:hover {
  background: var(--ng-primary-hover, rgb(62.9, 35.7, 113.9));
}

/* Outline */
.ng-btn-primary-outline {
  background: transparent;
  color: var(--ng-primary-dark, #4a2a86);
  border-color: var(--ng-primary-border, #382066);
}
.ng-btn-primary-outline:hover {
  background: var(--ng-primary-bg, #4a2a86);
  color: var(--ng-primary-text, #ffffff);
}

/* Soft */
.ng-btn-primary-soft {
  background: var(--ng-primary-soft, rgb(216.2863636364, 204.1409090909, 239.0590909091));
  color: var(--ng-primary-dark, #4a2a86);
  border-color: transparent;
}
.ng-btn-primary-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(109.8238636364, 64.2784090909, 195.2215909091);
  color: var(--ng-primary-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-primary-soft:hover {
    background: hsl(from var(--ng-primary-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-primary-ghost {
  background: transparent;
  color: var(--ng-primary-dark, #4a2a86);
  border-color: transparent;
}
.ng-btn-primary-ghost:hover {
  background: var(--ng-primary-soft, rgb(216.2863636364, 204.1409090909, 239.0590909091));
  border-color: transparent;
}

/* Link */
.ng-btn-primary-link {
  background: transparent;
  color: var(--ng-primary-dark, #4a2a86);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-primary-link:hover {
  color: var(--ng-primary-hover, rgb(62.9, 35.7, 113.9));
  text-decoration: none;
}

/* Solid */
.ng-btn-secondary {
  background: var(--ng-secondary-bg, #7d2342);
  color: var(--ng-secondary-text, #ffffff);
  border-color: var(--ng-secondary-border, #611a34);
}
.ng-btn-secondary:hover {
  background: var(--ng-secondary-hover, rgb(106.25, 29.75, 56.1));
}

/* Outline */
.ng-btn-secondary-outline {
  background: transparent;
  color: var(--ng-secondary-dark, #7d2342);
  border-color: var(--ng-secondary-border, #611a34);
}
.ng-btn-secondary-outline:hover {
  background: var(--ng-secondary-bg, #7d2342);
  color: var(--ng-secondary-text, #ffffff);
}

/* Soft */
.ng-btn-secondary-soft {
  background: var(--ng-secondary-soft, rgb(239.6875, 200.3125, 213.875));
  color: var(--ng-secondary-dark, #7d2342);
  border-color: transparent;
}
.ng-btn-secondary-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(193.359375, 54.140625, 102.09375);
  color: var(--ng-secondary-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-secondary-soft:hover {
    background: hsl(from var(--ng-secondary-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-secondary-ghost {
  background: transparent;
  color: var(--ng-secondary-dark, #7d2342);
  border-color: transparent;
}
.ng-btn-secondary-ghost:hover {
  background: var(--ng-secondary-soft, rgb(239.6875, 200.3125, 213.875));
  border-color: transparent;
}

/* Link */
.ng-btn-secondary-link {
  background: transparent;
  color: var(--ng-secondary-dark, #7d2342);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-secondary-link:hover {
  color: var(--ng-secondary-hover, rgb(106.25, 29.75, 56.1));
  text-decoration: none;
}

/* Solid */
.ng-btn-success {
  background: var(--ng-success-bg, #1da571);
  color: var(--ng-success-text, #ffffff);
  border-color: var(--ng-success-border, #18875d);
}
.ng-btn-success:hover {
  background: var(--ng-success-hover, rgb(24.65, 140.25, 96.05));
}

/* Outline */
.ng-btn-success-outline {
  background: transparent;
  color: var(--ng-success-dark, #1da571);
  border-color: var(--ng-success-border, #18875d);
}
.ng-btn-success-outline:hover {
  background: var(--ng-success-bg, #1da571);
  color: var(--ng-success-text, #ffffff);
}

/* Soft */
.ng-btn-success-soft {
  background: var(--ng-success-soft, rgb(201.2474226804, 245.5525773196, 228.612371134));
  color: var(--ng-success-dark, #1da571);
  border-color: transparent;
}
.ng-btn-success-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(53.4278350515, 219.5721649485, 156.0463917526);
  color: var(--ng-success-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-success-soft:hover {
    background: hsl(from var(--ng-success-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-success-ghost {
  background: transparent;
  color: var(--ng-success-dark, #1da571);
  border-color: transparent;
}
.ng-btn-success-ghost:hover {
  background: var(--ng-success-soft, rgb(201.2474226804, 245.5525773196, 228.612371134));
  border-color: transparent;
}

/* Link */
.ng-btn-success-link {
  background: transparent;
  color: var(--ng-success-dark, #1da571);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-success-link:hover {
  color: var(--ng-success-hover, rgb(24.65, 140.25, 96.05));
  text-decoration: none;
}

/* Solid */
.ng-btn-info {
  background: var(--ng-info-bg, #119bdc);
  color: var(--ng-info-text, #ffffff);
  border-color: var(--ng-info-border, #0e7fb4);
}
.ng-btn-info:hover {
  background: var(--ng-info-hover, rgb(14.45, 131.75, 187));
}

/* Outline */
.ng-btn-info-outline {
  background: transparent;
  color: var(--ng-info-dark, #119bdc);
  border-color: var(--ng-info-border, #0e7fb4);
}
.ng-btn-info-outline:hover {
  background: var(--ng-info-bg, #119bdc);
  color: var(--ng-info-text, #ffffff);
}

/* Soft */
.ng-btn-info-soft {
  background: var(--ng-info-soft, rgb(204.3164556962, 236.1088607595, 251.0835443038));
  color: var(--ng-info-dark, #119bdc);
  border-color: transparent;
}
.ng-btn-info-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(64.9367088608, 184.1582278481, 240.3132911392);
  color: var(--ng-info-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-info-soft:hover {
    background: hsl(from var(--ng-info-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-info-ghost {
  background: transparent;
  color: var(--ng-info-dark, #119bdc);
  border-color: transparent;
}
.ng-btn-info-ghost:hover {
  background: var(--ng-info-soft, rgb(204.3164556962, 236.1088607595, 251.0835443038));
  border-color: transparent;
}

/* Link */
.ng-btn-info-link {
  background: transparent;
  color: var(--ng-info-dark, #119bdc);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-info-link:hover {
  color: var(--ng-info-hover, rgb(14.45, 131.75, 187));
  text-decoration: none;
}

/* Solid */
.ng-btn-warning {
  background: var(--ng-warning-bg, #dd7900);
  color: var(--ng-warning-text, #ffffff);
  border-color: var(--ng-warning-border, #b56300);
}
.ng-btn-warning:hover {
  background: var(--ng-warning-hover, rgb(187.85, 102.85, 0));
}

/* Outline */
.ng-btn-warning-outline {
  background: transparent;
  color: var(--ng-warning-dark, #dd7900);
  border-color: var(--ng-warning-border, #b56300);
}
.ng-btn-warning-outline:hover {
  background: var(--ng-warning-bg, #dd7900);
  color: var(--ng-warning-text, #ffffff);
}

/* Soft */
.ng-btn-warning-soft {
  background: var(--ng-warning-soft, rgb(255, 228.8461538462, 197.2));
  color: var(--ng-warning-dark, #dd7900);
  border-color: transparent;
}
.ng-btn-warning-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(255, 156.9230769231, 38.25);
  color: var(--ng-warning-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-warning-soft:hover {
    background: hsl(from var(--ng-warning-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-warning-ghost {
  background: transparent;
  color: var(--ng-warning-dark, #dd7900);
  border-color: transparent;
}
.ng-btn-warning-ghost:hover {
  background: var(--ng-warning-soft, rgb(255, 228.8461538462, 197.2));
  border-color: transparent;
}

/* Link */
.ng-btn-warning-link {
  background: transparent;
  color: var(--ng-warning-dark, #dd7900);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-warning-link:hover {
  color: var(--ng-warning-hover, rgb(187.85, 102.85, 0));
  text-decoration: none;
}

/* Solid */
.ng-btn-danger {
  background: var(--ng-danger-bg, #f2415c);
  color: var(--ng-danger-text, #ffffff);
  border-color: var(--ng-danger-border, #d82e47);
}
.ng-btn-danger:hover {
  background: var(--ng-danger-hover, rgb(239.0509852217, 21.8990147783, 55.0238916256));
}

/* Outline */
.ng-btn-danger-outline {
  background: transparent;
  color: var(--ng-danger-dark, #f2415c);
  border-color: var(--ng-danger-border, #d82e47);
}
.ng-btn-danger-outline:hover {
  background: var(--ng-danger-bg, #f2415c);
  color: var(--ng-danger-text, #ffffff);
}

/* Soft */
.ng-btn-danger-soft {
  background: var(--ng-danger-soft, rgb(252.4, 217, 222.4));
  color: var(--ng-danger-dark, #f2415c);
  border-color: transparent;
}
.ng-btn-danger-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(245.25, 112.5, 132.75);
  color: var(--ng-danger-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-danger-soft:hover {
    background: hsl(from var(--ng-danger-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-danger-ghost {
  background: transparent;
  color: var(--ng-danger-dark, #f2415c);
  border-color: transparent;
}
.ng-btn-danger-ghost:hover {
  background: var(--ng-danger-soft, rgb(252.4, 217, 222.4));
  border-color: transparent;
}

/* Link */
.ng-btn-danger-link {
  background: transparent;
  color: var(--ng-danger-dark, #f2415c);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-danger-link:hover {
  color: var(--ng-danger-hover, rgb(239.0509852217, 21.8990147783, 55.0238916256));
  text-decoration: none;
}

/* Solid */
.ng-btn-mute {
  background: var(--ng-mute-bg, #c8c8c8);
  color: var(--ng-mute-text, #646464);
  border-color: var(--ng-mute-border, #dcdcdc);
}
.ng-btn-mute:hover {
  background: var(--ng-mute-hover, #aaaaaa);
}

/* Outline */
.ng-btn-mute-outline {
  background: transparent;
  color: var(--ng-mute-dark, #5a5a5a);
  border-color: var(--ng-mute-border, #dcdcdc);
}
.ng-btn-mute-outline:hover {
  background: var(--ng-mute-bg, #c8c8c8);
  color: var(--ng-mute-text, #646464);
}

/* Soft */
.ng-btn-mute-soft {
  background: var(--ng-mute-soft, #f4f4f4);
  color: var(--ng-mute-dark, #5a5a5a);
  border-color: transparent;
}
.ng-btn-mute-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(213.75, 213.75, 213.75);
  color: var(--ng-mute-text, #646464);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-mute-soft:hover {
    background: hsl(from var(--ng-mute-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-mute-ghost {
  background: transparent;
  color: var(--ng-mute-dark, #5a5a5a);
  border-color: transparent;
}
.ng-btn-mute-ghost:hover {
  background: var(--ng-mute-soft, #f4f4f4);
  border-color: transparent;
}

/* Link */
.ng-btn-mute-link {
  background: transparent;
  color: var(--ng-mute-dark, #5a5a5a);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-mute-link:hover {
  color: var(--ng-mute-hover, #aaaaaa);
  text-decoration: none;
}

/* Solid */
.ng-btn-blue {
  background: var(--ng-blue-bg, #3b82f6);
  color: var(--ng-blue-text, #ffffff);
  border-color: var(--ng-blue-border, #2563eb);
}
.ng-btn-blue:hover {
  background: var(--ng-blue-hover, rgb(15.2585365854, 102.1036585366, 243.9914634146));
}

/* Outline */
.ng-btn-blue-outline {
  background: transparent;
  color: var(--ng-blue-dark, #3b82f6);
  border-color: var(--ng-blue-border, #2563eb);
}
.ng-btn-blue-outline:hover {
  background: var(--ng-blue-bg, #3b82f6);
  color: var(--ng-blue-text, #ffffff);
}

/* Soft */
.ng-btn-blue-soft {
  background: var(--ng-blue-soft, rgb(215.8, 230, 253.2));
  color: var(--ng-blue-dark, #3b82f6);
  border-color: transparent;
}
.ng-btn-blue-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(108, 161.25, 248.25);
  color: var(--ng-blue-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-blue-soft:hover {
    background: hsl(from var(--ng-blue-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-blue-ghost {
  background: transparent;
  color: var(--ng-blue-dark, #3b82f6);
  border-color: transparent;
}
.ng-btn-blue-ghost:hover {
  background: var(--ng-blue-soft, rgb(215.8, 230, 253.2));
  border-color: transparent;
}

/* Link */
.ng-btn-blue-link {
  background: transparent;
  color: var(--ng-blue-dark, #3b82f6);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-blue-link:hover {
  color: var(--ng-blue-hover, rgb(15.2585365854, 102.1036585366, 243.9914634146));
  text-decoration: none;
}

/* Solid */
.ng-btn-blue-sky {
  background: var(--ng-blue-sky-bg, #6cc8ff);
  color: var(--ng-blue-sky-text, #07456e);
  border-color: var(--ng-blue-sky-border, #2ea8f5);
}
.ng-btn-blue-sky:hover {
  background: var(--ng-blue-sky-hover, rgb(53.55, 179.6275510204, 255));
}

/* Outline */
.ng-btn-blue-sky-outline {
  background: transparent;
  color: var(--ng-blue-sky-dark, #1f8fd6);
  border-color: var(--ng-blue-sky-border, #2ea8f5);
}
.ng-btn-blue-sky-outline:hover {
  background: var(--ng-blue-sky-bg, #6cc8ff);
  color: var(--ng-blue-sky-text, #07456e);
}

/* Soft */
.ng-btn-blue-sky-soft {
  background: var(--ng-blue-sky-soft, rgb(225.6, 244, 255));
  color: var(--ng-blue-sky-dark, #1f8fd6);
  border-color: transparent;
}
.ng-btn-blue-sky-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(144.75, 213.75, 255);
  color: var(--ng-blue-sky-text, #07456e);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-blue-sky-soft:hover {
    background: hsl(from var(--ng-blue-sky-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-blue-sky-ghost {
  background: transparent;
  color: var(--ng-blue-sky-dark, #1f8fd6);
  border-color: transparent;
}
.ng-btn-blue-sky-ghost:hover {
  background: var(--ng-blue-sky-soft, rgb(225.6, 244, 255));
  border-color: transparent;
}

/* Link */
.ng-btn-blue-sky-link {
  background: transparent;
  color: var(--ng-blue-sky-dark, #1f8fd6);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-blue-sky-link:hover {
  color: var(--ng-blue-sky-hover, rgb(53.55, 179.6275510204, 255));
  text-decoration: none;
}

/* Solid */
.ng-btn-green {
  background: var(--ng-green-bg, #2e7d32);
  color: var(--ng-green-text, #ffffff);
  border-color: var(--ng-green-border, #246428);
}
.ng-btn-green:hover {
  background: var(--ng-green-hover, rgb(39.1, 106.25, 42.5));
}

/* Outline */
.ng-btn-green-outline {
  background: transparent;
  color: var(--ng-green-dark, #1b5e20);
  border-color: var(--ng-green-border, #246428);
}
.ng-btn-green-outline:hover {
  background: var(--ng-green-bg, #2e7d32);
  color: var(--ng-green-text, #ffffff);
}

/* Soft */
.ng-btn-green-soft {
  background: var(--ng-green-soft, rgb(205.4385964912, 236.7614035088, 207.0245614035));
  color: var(--ng-green-dark, #1b5e20);
  border-color: transparent;
}
.ng-btn-green-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(69.1447368421, 186.6052631579, 75.0921052632);
  color: var(--ng-green-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-green-soft:hover {
    background: hsl(from var(--ng-green-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-green-ghost {
  background: transparent;
  color: var(--ng-green-dark, #1b5e20);
  border-color: transparent;
}
.ng-btn-green-ghost:hover {
  background: var(--ng-green-soft, rgb(205.4385964912, 236.7614035088, 207.0245614035));
  border-color: transparent;
}

/* Link */
.ng-btn-green-link {
  background: transparent;
  color: var(--ng-green-dark, #1b5e20);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-green-link:hover {
  color: var(--ng-green-hover, rgb(39.1, 106.25, 42.5));
  text-decoration: none;
}

/* Solid */
.ng-btn-lime {
  background: var(--ng-lime-bg, #9edc00);
  color: var(--ng-lime-text, #476f11);
  border-color: var(--ng-lime-border, #82b800);
}
.ng-btn-lime:hover {
  background: var(--ng-lime-hover, rgb(134.3, 187, 0));
}

/* Outline */
.ng-btn-lime-outline {
  background: transparent;
  color: var(--ng-lime-dark, #5a7d00);
  border-color: var(--ng-lime-border, #82b800);
}
.ng-btn-lime-outline:hover {
  background: var(--ng-lime-bg, #9edc00);
  color: var(--ng-lime-text, #476f11);
}

/* Soft */
.ng-btn-lime-soft {
  background: var(--ng-lime-soft, rgb(238.6545454545, 255, 197));
  color: var(--ng-lime-dark, #5a7d00);
  border-color: transparent;
}
.ng-btn-lime-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(193.7045454545, 255, 37.5);
  color: var(--ng-lime-text, #476f11);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-lime-soft:hover {
    background: hsl(from var(--ng-lime-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-lime-ghost {
  background: transparent;
  color: var(--ng-lime-dark, #5a7d00);
  border-color: transparent;
}
.ng-btn-lime-ghost:hover {
  background: var(--ng-lime-soft, rgb(238.6545454545, 255, 197));
  border-color: transparent;
}

/* Link */
.ng-btn-lime-link {
  background: transparent;
  color: var(--ng-lime-dark, #5a7d00);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-lime-link:hover {
  color: var(--ng-lime-hover, rgb(134.3, 187, 0));
  text-decoration: none;
}

/* Solid */
.ng-btn-aguagreen {
  background: var(--ng-aguagreen-bg, #0e9c7e);
  color: var(--ng-aguagreen-text, #ffffff);
  border-color: var(--ng-aguagreen-border, #0b7d64);
}
.ng-btn-aguagreen:hover {
  background: var(--ng-aguagreen-hover, rgb(11.9, 132.6, 107.1));
}

/* Outline */
.ng-btn-aguagreen-outline {
  background: transparent;
  color: var(--ng-aguagreen-dark, #0c7a62);
  border-color: var(--ng-aguagreen-border, #0b7d64);
}
.ng-btn-aguagreen-outline:hover {
  background: var(--ng-aguagreen-bg, #0e9c7e);
  color: var(--ng-aguagreen-text, #ffffff);
}

/* Soft */
.ng-btn-aguagreen-soft {
  background: var(--ng-aguagreen-soft, rgb(192.6, 249.4, 237.4));
  color: var(--ng-aguagreen-dark, #0c7a62);
  border-color: transparent;
}
.ng-btn-aguagreen-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: #15eabd;
  color: var(--ng-aguagreen-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-aguagreen-soft:hover {
    background: hsl(from var(--ng-aguagreen-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-aguagreen-ghost {
  background: transparent;
  color: var(--ng-aguagreen-dark, #0c7a62);
  border-color: transparent;
}
.ng-btn-aguagreen-ghost:hover {
  background: var(--ng-aguagreen-soft, rgb(192.6, 249.4, 237.4));
  border-color: transparent;
}

/* Link */
.ng-btn-aguagreen-link {
  background: transparent;
  color: var(--ng-aguagreen-dark, #0c7a62);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-aguagreen-link:hover {
  color: var(--ng-aguagreen-hover, rgb(11.9, 132.6, 107.1));
  text-decoration: none;
}

/* Solid */
.ng-btn-indigo {
  background: var(--ng-indigo-bg, #4f46e5);
  color: var(--ng-indigo-text, #ffffff);
  border-color: var(--ng-indigo-border, #4338ca);
}
.ng-btn-indigo:hover {
  background: var(--ng-indigo-hover, rgb(42.1575829384, 31.3170616114, 222.8329383886));
}

/* Outline */
.ng-btn-indigo-outline {
  background: transparent;
  color: var(--ng-indigo-dark, #4f46e5);
  border-color: var(--ng-indigo-border, #4338ca);
}
.ng-btn-indigo-outline:hover {
  background: var(--ng-indigo-bg, #4f46e5);
  color: var(--ng-indigo-text, #ffffff);
}

/* Soft */
.ng-btn-indigo-soft {
  background: var(--ng-indigo-soft, rgb(219.8, 218, 249.8));
  color: var(--ng-indigo-dark, #4f46e5);
  border-color: transparent;
}
.ng-btn-indigo-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(123, 116.25, 235.5);
  color: var(--ng-indigo-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-indigo-soft:hover {
    background: hsl(from var(--ng-indigo-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-indigo-ghost {
  background: transparent;
  color: var(--ng-indigo-dark, #4f46e5);
  border-color: transparent;
}
.ng-btn-indigo-ghost:hover {
  background: var(--ng-indigo-soft, rgb(219.8, 218, 249.8));
  border-color: transparent;
}

/* Link */
.ng-btn-indigo-link {
  background: transparent;
  color: var(--ng-indigo-dark, #4f46e5);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-indigo-link:hover {
  color: var(--ng-indigo-hover, rgb(42.1575829384, 31.3170616114, 222.8329383886));
  text-decoration: none;
}

/* Solid */
.ng-btn-purple {
  background: var(--ng-purple-bg, #a027f0);
  color: var(--ng-purple-text, #ffffff);
  border-color: var(--ng-purple-border, #810ecb);
}
.ng-btn-purple:hover {
  background: var(--ng-purple-hover, rgb(139.6207792208, 15.3993506494, 221.7506493506));
}

/* Outline */
.ng-btn-purple-outline {
  background: transparent;
  color: var(--ng-purple-dark, #a027f0);
  border-color: var(--ng-purple-border, #810ecb);
}
.ng-btn-purple-outline:hover {
  background: var(--ng-purple-bg, #a027f0);
  color: var(--ng-purple-text, #ffffff);
}

/* Soft */
.ng-btn-purple-soft {
  background: var(--ng-purple-soft, rgb(236, 211.8, 252));
  color: var(--ng-purple-dark, #a027f0);
  border-color: transparent;
}
.ng-btn-purple-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(183.75, 93, 243.75);
  color: var(--ng-purple-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-purple-soft:hover {
    background: hsl(from var(--ng-purple-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-purple-ghost {
  background: transparent;
  color: var(--ng-purple-dark, #a027f0);
  border-color: transparent;
}
.ng-btn-purple-ghost:hover {
  background: var(--ng-purple-soft, rgb(236, 211.8, 252));
  border-color: transparent;
}

/* Link */
.ng-btn-purple-link {
  background: transparent;
  color: var(--ng-purple-dark, #a027f0);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-purple-link:hover {
  color: var(--ng-purple-hover, rgb(139.6207792208, 15.3993506494, 221.7506493506));
  text-decoration: none;
}

/* Solid */
.ng-btn-purple-heart {
  background: var(--ng-purple-heart-bg, #b23a8a);
  color: var(--ng-purple-heart-text, #ffffff);
  border-color: var(--ng-purple-heart-border, #7d2962);
}
.ng-btn-purple-heart:hover {
  background: var(--ng-purple-heart-hover, rgb(151.3, 49.3, 117.3));
}

/* Outline */
.ng-btn-purple-heart-outline {
  background: transparent;
  color: var(--ng-purple-heart-dark, #b23a8a);
  border-color: var(--ng-purple-heart-border, #7d2962);
}
.ng-btn-purple-heart-outline:hover {
  background: var(--ng-purple-heart-bg, #b23a8a);
  color: var(--ng-purple-heart-text, #ffffff);
}

/* Soft */
.ng-btn-purple-heart-soft {
  background: var(--ng-purple-heart-soft, rgb(241.5322033898, 213.6677966102, 232.2440677966));
  color: var(--ng-purple-heart-dark, #b23a8a);
  border-color: transparent;
}
.ng-btn-purple-heart-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(204.4957627119, 100.0042372881, 169.6652542373);
  color: var(--ng-purple-heart-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-purple-heart-soft:hover {
    background: hsl(from var(--ng-purple-heart-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-purple-heart-ghost {
  background: transparent;
  color: var(--ng-purple-heart-dark, #b23a8a);
  border-color: transparent;
}
.ng-btn-purple-heart-ghost:hover {
  background: var(--ng-purple-heart-soft, rgb(241.5322033898, 213.6677966102, 232.2440677966));
  border-color: transparent;
}

/* Link */
.ng-btn-purple-heart-link {
  background: transparent;
  color: var(--ng-purple-heart-dark, #b23a8a);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-purple-heart-link:hover {
  color: var(--ng-purple-heart-hover, rgb(151.3, 49.3, 117.3));
  text-decoration: none;
}

/* Solid */
.ng-btn-cyan {
  background: var(--ng-cyan-bg, #009dd9);
  color: var(--ng-cyan-text, #ffffff);
  border-color: var(--ng-cyan-border, #0081b2);
}
.ng-btn-cyan:hover {
  background: var(--ng-cyan-hover, rgb(0, 133.45, 184.45));
}

/* Outline */
.ng-btn-cyan-outline {
  background: transparent;
  color: var(--ng-cyan-dark, #0081b2);
  border-color: var(--ng-cyan-border, #0081b2);
}
.ng-btn-cyan-outline:hover {
  background: var(--ng-cyan-bg, #009dd9);
  color: var(--ng-cyan-text, #ffffff);
}

/* Soft */
.ng-btn-cyan-soft {
  background: var(--ng-cyan-soft, rgb(196.4, 238.797235023, 255));
  color: var(--ng-cyan-dark, #0081b2);
  border-color: transparent;
}
.ng-btn-cyan-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(35.25, 194.2396313364, 255);
  color: var(--ng-cyan-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-cyan-soft:hover {
    background: hsl(from var(--ng-cyan-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-cyan-ghost {
  background: transparent;
  color: var(--ng-cyan-dark, #0081b2);
  border-color: transparent;
}
.ng-btn-cyan-ghost:hover {
  background: var(--ng-cyan-soft, rgb(196.4, 238.797235023, 255));
  border-color: transparent;
}

/* Link */
.ng-btn-cyan-link {
  background: transparent;
  color: var(--ng-cyan-dark, #0081b2);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-cyan-link:hover {
  color: var(--ng-cyan-hover, rgb(0, 133.45, 184.45));
  text-decoration: none;
}

/* Solid */
.ng-btn-magenta {
  background: var(--ng-magenta-bg, #d4007f);
  color: var(--ng-magenta-text, #ffffff);
  border-color: var(--ng-magenta-border, #b0006a);
}
.ng-btn-magenta:hover {
  background: var(--ng-magenta-hover, rgb(180.2, 0, 107.95));
}

/* Outline */
.ng-btn-magenta-outline {
  background: transparent;
  color: var(--ng-magenta-dark, #b0006a);
  border-color: var(--ng-magenta-border, #b0006a);
}
.ng-btn-magenta-outline:hover {
  background: var(--ng-magenta-bg, #d4007f);
  color: var(--ng-magenta-text, #ffffff);
}

/* Soft */
.ng-btn-magenta-soft {
  background: var(--ng-magenta-soft, rgb(255, 195.4, 231.1037735849));
  color: var(--ng-magenta-dark, #b0006a);
  border-color: transparent;
}
.ng-btn-magenta-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(255, 31.5, 165.3891509434);
  color: var(--ng-magenta-text, #ffffff);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-magenta-soft:hover {
    background: hsl(from var(--ng-magenta-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-magenta-ghost {
  background: transparent;
  color: var(--ng-magenta-dark, #b0006a);
  border-color: transparent;
}
.ng-btn-magenta-ghost:hover {
  background: var(--ng-magenta-soft, rgb(255, 195.4, 231.1037735849));
  border-color: transparent;
}

/* Link */
.ng-btn-magenta-link {
  background: transparent;
  color: var(--ng-magenta-dark, #b0006a);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-magenta-link:hover {
  color: var(--ng-magenta-hover, rgb(180.2, 0, 107.95));
  text-decoration: none;
}

/* Solid */
.ng-btn-yellow {
  background: var(--ng-yellow-bg, #ffd200);
  color: var(--ng-yellow-text, #8a6800);
  border-color: var(--ng-yellow-border, #e6bd00);
}
.ng-btn-yellow:hover {
  background: var(--ng-yellow-hover, rgb(216.75, 178.5, 0));
}

/* Outline */
.ng-btn-yellow-outline {
  background: transparent;
  color: var(--ng-yellow-dark, #e6bd00);
  border-color: var(--ng-yellow-border, #e6bd00);
}
.ng-btn-yellow-outline:hover {
  background: var(--ng-yellow-bg, #ffd200);
  color: var(--ng-yellow-text, #8a6800);
}

/* Soft */
.ng-btn-yellow-soft {
  background: var(--ng-yellow-soft, #fff6cc);
  color: var(--ng-yellow-dark, #e6bd00);
  border-color: transparent;
}
.ng-btn-yellow-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(255, 221.25, 63.75);
  color: var(--ng-yellow-text, #8a6800);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-yellow-soft:hover {
    background: hsl(from var(--ng-yellow-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-yellow-ghost {
  background: transparent;
  color: var(--ng-yellow-dark, #e6bd00);
  border-color: transparent;
}
.ng-btn-yellow-ghost:hover {
  background: var(--ng-yellow-soft, #fff6cc);
  border-color: transparent;
}

/* Link */
.ng-btn-yellow-link {
  background: transparent;
  color: var(--ng-yellow-dark, #e6bd00);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-yellow-link:hover {
  color: var(--ng-yellow-hover, rgb(216.75, 178.5, 0));
  text-decoration: none;
}

/* Solid */
.ng-btn-clight {
  background: var(--ng-clight-bg, #f0f0f0);
  color: var(--ng-clight-text, #1f2937);
  border-color: var(--ng-clight-border, #e5e7eb);
}
.ng-btn-clight:hover {
  background: var(--ng-clight-hover, rgb(227.6, 230.34, 235.82));
}

/* Outline */
.ng-btn-clight-outline {
  background: transparent;
  color: var(--ng-clight-dark, #e5e7eb);
  border-color: var(--ng-clight-border, #e5e7eb);
}
.ng-btn-clight-outline:hover {
  background: var(--ng-clight-bg, #f0f0f0);
  color: var(--ng-clight-text, #1f2937);
}

/* Soft */
.ng-btn-clight-soft {
  background: var(--ng-clight-soft, rgb(245.4, 246.36, 248.28));
  color: var(--ng-clight-dark, #e5e7eb);
  border-color: transparent;
}
.ng-btn-clight-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(243.75, 243.75, 243.75);
  color: var(--ng-clight-text, #1f2937);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-clight-soft:hover {
    background: hsl(from var(--ng-clight-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-clight-ghost {
  background: transparent;
  color: var(--ng-clight-dark, #e5e7eb);
  border-color: transparent;
}
.ng-btn-clight-ghost:hover {
  background: var(--ng-clight-soft, rgb(245.4, 246.36, 248.28));
  border-color: transparent;
}

/* Link */
.ng-btn-clight-link {
  background: transparent;
  color: var(--ng-clight-dark, #e5e7eb);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-clight-link:hover {
  color: var(--ng-clight-hover, rgb(227.6, 230.34, 235.82));
  text-decoration: none;
}

/* Solid */
.ng-btn-cdark {
  background: var(--ng-cdark-bg, #424242);
  color: var(--ng-cdark-text, #f0f0f0);
  border-color: var(--ng-cdark-border, #5a5a5a);
}
.ng-btn-cdark:hover {
  background: var(--ng-cdark-hover, rgb(100.02, 100.02, 100.02));
}

/* Outline */
.ng-btn-cdark-outline {
  background: transparent;
  color: var(--ng-cdark-dark, #2b2b2b);
  border-color: var(--ng-cdark-border, #5a5a5a);
}
.ng-btn-cdark-outline:hover {
  background: var(--ng-cdark-bg, #424242);
  color: var(--ng-cdark-text, #f0f0f0);
}

/* Soft */
.ng-btn-cdark-soft {
  background: var(--ng-cdark-soft, rgb(88.68, 88.68, 88.68));
  color: var(--ng-cdark-dark, #2b2b2b);
  border-color: transparent;
}
.ng-btn-cdark-soft:hover {
  /* +25% lighten del bg: fallback bakato per browser senza relative color */
  background: rgb(113.25, 113.25, 113.25);
  color: var(--ng-cdark-text, #f0f0f0);
  /* runtime: stessa formula (+25% lightness), propaga l'override di --ng-<name>-bg */
}
@supports (color: hsl(from white h s l)) {
  .ng-btn-cdark-soft:hover {
    background: hsl(from var(--ng-cdark-bg) h s calc(l + (100 - l) * 0.25));
  }
}

/* Ghost */
.ng-btn-cdark-ghost {
  background: transparent;
  color: var(--ng-cdark-dark, #2b2b2b);
  border-color: transparent;
}
.ng-btn-cdark-ghost:hover {
  background: var(--ng-cdark-soft, rgb(88.68, 88.68, 88.68));
  border-color: transparent;
}

/* Link */
.ng-btn-cdark-link {
  background: transparent;
  color: var(--ng-cdark-dark, #2b2b2b);
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ng-btn-cdark-link:hover {
  color: var(--ng-cdark-hover, rgb(100.02, 100.02, 100.02));
  text-decoration: none;
}

/* ==========================================================
Button Group
========================================================== */
.ng-btn-group {
  display: flex;
  width: max-content;
  /* Radius del gruppo: i figli ereditano --ng-btn-radius. Default = master;
     opt-in con .ng-btn-group-{sm|md|lg}. Una classe sul gruppo, tutti i
     bottoni allineati. */
}
.ng-btn-group.ng-btn-group-sm {
  --ng-btn-radius: var(--ng-radius-sm);
}
.ng-btn-group.ng-btn-group-md {
  --ng-btn-radius: var(--ng-radius-md);
}
.ng-btn-group.ng-btn-group-lg {
  --ng-btn-radius: var(--ng-radius-lg);
}
.ng-btn-group > .ng-btn {
  border-radius: 0;
  margin-left: calc(-1 * var(--ng-btn-border-width));
}
.ng-btn-group > .ng-btn:first-child {
  border-top-left-radius: var(--ng-btn-radius, var(--ng-radius));
  border-bottom-left-radius: var(--ng-btn-radius, var(--ng-radius));
  margin-left: 0;
}
.ng-btn-group > .ng-btn:last-child {
  border-top-right-radius: var(--ng-btn-radius, var(--ng-radius));
  border-bottom-right-radius: var(--ng-btn-radius, var(--ng-radius));
}

/* Loading state (.ng-btn.is-loading): layout + spinner in _ng_spinner.scss */
/* ==========================================================
SPLIT — modifier che separa la label dalla freccia in un pannello laterale.
Sfrutta la palette governata: con 1-2 classi look "CTA design" su tutti i
20 colori (light + dark), zero hardcode.

  .ng-btn-split        → layout label + icon-panel a destra
  .ng-btn-split-icon   → l'icona dentro il pannello (es. <i class="ph ...">)
  .ng-btn-split-bare   → pannello senza fill, solo divider verticale
  .ng-btn-grad         → gradient mono-color sul body (-bg → -hover);
                         usabile anche standalone, si combina con .ng-btn-split.

Markup:

  <!-- A: outline + panel filled -->
  <button class="ng-btn ng-btn-primary-outline ng-btn-split">
    Read more <i class="ng-btn-split-icon ph-bold ph-arrow-right"></i>
  </button>

  <!-- B: outline + bare (divider) -->
  <button class="ng-btn ng-btn-primary-outline ng-btn-split ng-btn-split-bare">
    Read more <i class="ng-btn-split-icon ph ph-arrow-right"></i>
  </button>

  <!-- C: solid + panel shaft scuro -->
  <button class="ng-btn ng-btn-primary ng-btn-split">
    Read more <i class="ng-btn-split-icon ph-bold ph-arrow-right"></i>
  </button>

  <!-- D: solid + gradient sul body -->
  <button class="ng-btn ng-btn-primary ng-btn-grad ng-btn-split">
    Read more <i class="ng-btn-split-icon ph-bold ph-arrow-right"></i>
  </button>
========================================================== */
.ng-btn-split {
  display: inline-flex;
  align-items: center; /* label centrata verticalmente */
  padding-inline-end: 0; /* il padding right lo prende il pannello */
  overflow: hidden; /* contiene il pannello + bg gradient */
  gap: 1em; /* distanza minima label ↔ pannello (sempre garantita,
   anche quando il button è inline-flex min-content) */
}

.ng-btn-split-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto; /* spinge il pannello a destra */
  /* Pannello FULL — tocca top/bottom del button border via margin-block
     negativo che cancella il padding-y del button (scala con tutte le size
     grazie alla CSS var del componente). */
  align-self: stretch;
  margin-block: calc(var(--ng-btn-padding-y, 0.95em) * -1);
  margin-inline-end: 0;
  padding-block: 0;
  padding-inline: 1.25em;
  font-size: 1.15em;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Bare: il pannello resta dentro il padding (no extend), niente fill */
.ng-btn-split.ng-btn-split-bare > .ng-btn-split-icon {
  margin-block: 0;
  padding-inline: 1em;
}

/* ============================================================
COLORI — fill del pannello per ogni variante (palette $ng-colors)

   SOLID    (.ng-btn-X)         → pannello = -hover  (più scuro del bg)
   OUTLINE  (.ng-btn-X-outline) ─┐ pannello = -bg    (filled brand color)
   SOFT     (.ng-btn-X-soft)    ─┘

   Esclusi clight/cdark/mute/lime (superfici neutre).
   L'override .ng-btn-split-bare (sotto) reset → transparent + divider.
============================================================ */
/* Solid → -hover */
.ng-btn-split.ng-btn-primary > .ng-btn-split-icon {
  background: var(--ng-primary-hover, rgb(62.9, 35.7, 113.9));
  color: var(--ng-primary-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-primary-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-primary-soft > .ng-btn-split-icon {
  background: var(--ng-primary-bg, #4a2a86);
  color: var(--ng-primary-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-primary > .ng-btn-split-icon {
  background: var(--ng-primary-border, #382066);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-secondary > .ng-btn-split-icon {
  background: var(--ng-secondary-hover, rgb(106.25, 29.75, 56.1));
  color: var(--ng-secondary-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-secondary-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-secondary-soft > .ng-btn-split-icon {
  background: var(--ng-secondary-bg, #7d2342);
  color: var(--ng-secondary-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-secondary > .ng-btn-split-icon {
  background: var(--ng-secondary-border, #611a34);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-success > .ng-btn-split-icon {
  background: var(--ng-success-hover, rgb(24.65, 140.25, 96.05));
  color: var(--ng-success-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-success-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-success-soft > .ng-btn-split-icon {
  background: var(--ng-success-bg, #1da571);
  color: var(--ng-success-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-success > .ng-btn-split-icon {
  background: var(--ng-success-border, #18875d);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-info > .ng-btn-split-icon {
  background: var(--ng-info-hover, rgb(14.45, 131.75, 187));
  color: var(--ng-info-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-info-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-info-soft > .ng-btn-split-icon {
  background: var(--ng-info-bg, #119bdc);
  color: var(--ng-info-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-info > .ng-btn-split-icon {
  background: var(--ng-info-border, #0e7fb4);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-warning > .ng-btn-split-icon {
  background: var(--ng-warning-hover, rgb(187.85, 102.85, 0));
  color: var(--ng-warning-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-warning-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-warning-soft > .ng-btn-split-icon {
  background: var(--ng-warning-bg, #dd7900);
  color: var(--ng-warning-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-warning > .ng-btn-split-icon {
  background: var(--ng-warning-border, #b56300);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-danger > .ng-btn-split-icon {
  background: var(--ng-danger-hover, rgb(239.0509852217, 21.8990147783, 55.0238916256));
  color: var(--ng-danger-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-danger-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-danger-soft > .ng-btn-split-icon {
  background: var(--ng-danger-bg, #f2415c);
  color: var(--ng-danger-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-danger > .ng-btn-split-icon {
  background: var(--ng-danger-border, #d82e47);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-blue > .ng-btn-split-icon {
  background: var(--ng-blue-hover, rgb(15.2585365854, 102.1036585366, 243.9914634146));
  color: var(--ng-blue-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-blue-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-blue-soft > .ng-btn-split-icon {
  background: var(--ng-blue-bg, #3b82f6);
  color: var(--ng-blue-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-blue > .ng-btn-split-icon {
  background: var(--ng-blue-border, #2563eb);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-blue-sky > .ng-btn-split-icon {
  background: var(--ng-blue-sky-hover, rgb(53.55, 179.6275510204, 255));
  color: var(--ng-blue-sky-text, #07456e);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-blue-sky-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-blue-sky-soft > .ng-btn-split-icon {
  background: var(--ng-blue-sky-bg, #6cc8ff);
  color: var(--ng-blue-sky-text, #07456e);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-blue-sky > .ng-btn-split-icon {
  background: var(--ng-blue-sky-border, #2ea8f5);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-green > .ng-btn-split-icon {
  background: var(--ng-green-hover, rgb(39.1, 106.25, 42.5));
  color: var(--ng-green-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-green-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-green-soft > .ng-btn-split-icon {
  background: var(--ng-green-bg, #2e7d32);
  color: var(--ng-green-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-green > .ng-btn-split-icon {
  background: var(--ng-green-border, #246428);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-aguagreen > .ng-btn-split-icon {
  background: var(--ng-aguagreen-hover, rgb(11.9, 132.6, 107.1));
  color: var(--ng-aguagreen-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-aguagreen-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-aguagreen-soft > .ng-btn-split-icon {
  background: var(--ng-aguagreen-bg, #0e9c7e);
  color: var(--ng-aguagreen-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-aguagreen > .ng-btn-split-icon {
  background: var(--ng-aguagreen-border, #0b7d64);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-indigo > .ng-btn-split-icon {
  background: var(--ng-indigo-hover, rgb(42.1575829384, 31.3170616114, 222.8329383886));
  color: var(--ng-indigo-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-indigo-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-indigo-soft > .ng-btn-split-icon {
  background: var(--ng-indigo-bg, #4f46e5);
  color: var(--ng-indigo-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-indigo > .ng-btn-split-icon {
  background: var(--ng-indigo-border, #4338ca);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-purple > .ng-btn-split-icon {
  background: var(--ng-purple-hover, rgb(139.6207792208, 15.3993506494, 221.7506493506));
  color: var(--ng-purple-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-purple-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-purple-soft > .ng-btn-split-icon {
  background: var(--ng-purple-bg, #a027f0);
  color: var(--ng-purple-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-purple > .ng-btn-split-icon {
  background: var(--ng-purple-border, #810ecb);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-purple-heart > .ng-btn-split-icon {
  background: var(--ng-purple-heart-hover, rgb(151.3, 49.3, 117.3));
  color: var(--ng-purple-heart-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-purple-heart-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-purple-heart-soft > .ng-btn-split-icon {
  background: var(--ng-purple-heart-bg, #b23a8a);
  color: var(--ng-purple-heart-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-purple-heart > .ng-btn-split-icon {
  background: var(--ng-purple-heart-border, #7d2962);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-cyan > .ng-btn-split-icon {
  background: var(--ng-cyan-hover, rgb(0, 133.45, 184.45));
  color: var(--ng-cyan-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-cyan-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-cyan-soft > .ng-btn-split-icon {
  background: var(--ng-cyan-bg, #009dd9);
  color: var(--ng-cyan-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-cyan > .ng-btn-split-icon {
  background: var(--ng-cyan-border, #0081b2);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-magenta > .ng-btn-split-icon {
  background: var(--ng-magenta-hover, rgb(180.2, 0, 107.95));
  color: var(--ng-magenta-text, #ffffff);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-magenta-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-magenta-soft > .ng-btn-split-icon {
  background: var(--ng-magenta-bg, #d4007f);
  color: var(--ng-magenta-text, #ffffff);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-magenta > .ng-btn-split-icon {
  background: var(--ng-magenta-border, #b0006a);
}

/* Solid → -hover */
.ng-btn-split.ng-btn-yellow > .ng-btn-split-icon {
  background: var(--ng-yellow-hover, rgb(216.75, 178.5, 0));
  color: var(--ng-yellow-text, #8a6800);
}

/* Outline + Soft → -bg (filled brand). Stesso comportamento → unico blocco. */
.ng-btn-split.ng-btn-yellow-outline > .ng-btn-split-icon,
.ng-btn-split.ng-btn-yellow-soft > .ng-btn-split-icon {
  background: var(--ng-yellow-bg, #ffd200);
  color: var(--ng-yellow-text, #8a6800);
}

/* Quando split + grad coabitano, il pannello usa -border (più scuro
   del -hover di fine gradient), per restare visibile sopra al body. */
.ng-btn-split.ng-btn-grad.ng-btn-yellow > .ng-btn-split-icon {
  background: var(--ng-yellow-border, #e6bd00);
}

/* BARE — override finale: pannello trasparente + solo divider verticale.
   Posizionato DOPO i blocchi color: vince per source order a parità di
   specificity. Funziona su qualsiasi variante. */
.ng-btn-split.ng-btn-split-bare > .ng-btn-split-icon {
  background: transparent;
  color: inherit;
  border-inline-start: 1px solid currentColor;
  opacity: 0.9;
}

/* ==========================================================
GRAD — gradient mono-color sul body (-bg → -hover).
Hover: gradient più scuro (-hover → -border). Senza questo override,
il background-image preesistente blocca il background-color del :hover
default del componente .ng-btn.
========================================================== */
.ng-btn-grad.ng-btn-primary {
  background-image: linear-gradient(135deg, var(--ng-primary-bg, #4a2a86), var(--ng-primary-hover, rgb(62.9, 35.7, 113.9)));
  border-color: var(--ng-primary-border, #382066);
}

.ng-btn-grad.ng-btn-primary:hover {
  background-image: linear-gradient(135deg, var(--ng-primary-hover, rgb(62.9, 35.7, 113.9)), var(--ng-primary-border, #382066));
}

.ng-btn-grad.ng-btn-secondary {
  background-image: linear-gradient(135deg, var(--ng-secondary-bg, #7d2342), var(--ng-secondary-hover, rgb(106.25, 29.75, 56.1)));
  border-color: var(--ng-secondary-border, #611a34);
}

.ng-btn-grad.ng-btn-secondary:hover {
  background-image: linear-gradient(135deg, var(--ng-secondary-hover, rgb(106.25, 29.75, 56.1)), var(--ng-secondary-border, #611a34));
}

.ng-btn-grad.ng-btn-success {
  background-image: linear-gradient(135deg, var(--ng-success-bg, #1da571), var(--ng-success-hover, rgb(24.65, 140.25, 96.05)));
  border-color: var(--ng-success-border, #18875d);
}

.ng-btn-grad.ng-btn-success:hover {
  background-image: linear-gradient(135deg, var(--ng-success-hover, rgb(24.65, 140.25, 96.05)), var(--ng-success-border, #18875d));
}

.ng-btn-grad.ng-btn-info {
  background-image: linear-gradient(135deg, var(--ng-info-bg, #119bdc), var(--ng-info-hover, rgb(14.45, 131.75, 187)));
  border-color: var(--ng-info-border, #0e7fb4);
}

.ng-btn-grad.ng-btn-info:hover {
  background-image: linear-gradient(135deg, var(--ng-info-hover, rgb(14.45, 131.75, 187)), var(--ng-info-border, #0e7fb4));
}

.ng-btn-grad.ng-btn-warning {
  background-image: linear-gradient(135deg, var(--ng-warning-bg, #dd7900), var(--ng-warning-hover, rgb(187.85, 102.85, 0)));
  border-color: var(--ng-warning-border, #b56300);
}

.ng-btn-grad.ng-btn-warning:hover {
  background-image: linear-gradient(135deg, var(--ng-warning-hover, rgb(187.85, 102.85, 0)), var(--ng-warning-border, #b56300));
}

.ng-btn-grad.ng-btn-danger {
  background-image: linear-gradient(135deg, var(--ng-danger-bg, #f2415c), var(--ng-danger-hover, rgb(239.0509852217, 21.8990147783, 55.0238916256)));
  border-color: var(--ng-danger-border, #d82e47);
}

.ng-btn-grad.ng-btn-danger:hover {
  background-image: linear-gradient(135deg, var(--ng-danger-hover, rgb(239.0509852217, 21.8990147783, 55.0238916256)), var(--ng-danger-border, #d82e47));
}

.ng-btn-grad.ng-btn-blue {
  background-image: linear-gradient(135deg, var(--ng-blue-bg, #3b82f6), var(--ng-blue-hover, rgb(15.2585365854, 102.1036585366, 243.9914634146)));
  border-color: var(--ng-blue-border, #2563eb);
}

.ng-btn-grad.ng-btn-blue:hover {
  background-image: linear-gradient(135deg, var(--ng-blue-hover, rgb(15.2585365854, 102.1036585366, 243.9914634146)), var(--ng-blue-border, #2563eb));
}

.ng-btn-grad.ng-btn-blue-sky {
  background-image: linear-gradient(135deg, var(--ng-blue-sky-bg, #6cc8ff), var(--ng-blue-sky-hover, rgb(53.55, 179.6275510204, 255)));
  border-color: var(--ng-blue-sky-border, #2ea8f5);
}

.ng-btn-grad.ng-btn-blue-sky:hover {
  background-image: linear-gradient(135deg, var(--ng-blue-sky-hover, rgb(53.55, 179.6275510204, 255)), var(--ng-blue-sky-border, #2ea8f5));
}

.ng-btn-grad.ng-btn-green {
  background-image: linear-gradient(135deg, var(--ng-green-bg, #2e7d32), var(--ng-green-hover, rgb(39.1, 106.25, 42.5)));
  border-color: var(--ng-green-border, #246428);
}

.ng-btn-grad.ng-btn-green:hover {
  background-image: linear-gradient(135deg, var(--ng-green-hover, rgb(39.1, 106.25, 42.5)), var(--ng-green-border, #246428));
}

.ng-btn-grad.ng-btn-aguagreen {
  background-image: linear-gradient(135deg, var(--ng-aguagreen-bg, #0e9c7e), var(--ng-aguagreen-hover, rgb(11.9, 132.6, 107.1)));
  border-color: var(--ng-aguagreen-border, #0b7d64);
}

.ng-btn-grad.ng-btn-aguagreen:hover {
  background-image: linear-gradient(135deg, var(--ng-aguagreen-hover, rgb(11.9, 132.6, 107.1)), var(--ng-aguagreen-border, #0b7d64));
}

.ng-btn-grad.ng-btn-indigo {
  background-image: linear-gradient(135deg, var(--ng-indigo-bg, #4f46e5), var(--ng-indigo-hover, rgb(42.1575829384, 31.3170616114, 222.8329383886)));
  border-color: var(--ng-indigo-border, #4338ca);
}

.ng-btn-grad.ng-btn-indigo:hover {
  background-image: linear-gradient(135deg, var(--ng-indigo-hover, rgb(42.1575829384, 31.3170616114, 222.8329383886)), var(--ng-indigo-border, #4338ca));
}

.ng-btn-grad.ng-btn-purple {
  background-image: linear-gradient(135deg, var(--ng-purple-bg, #a027f0), var(--ng-purple-hover, rgb(139.6207792208, 15.3993506494, 221.7506493506)));
  border-color: var(--ng-purple-border, #810ecb);
}

.ng-btn-grad.ng-btn-purple:hover {
  background-image: linear-gradient(135deg, var(--ng-purple-hover, rgb(139.6207792208, 15.3993506494, 221.7506493506)), var(--ng-purple-border, #810ecb));
}

.ng-btn-grad.ng-btn-purple-heart {
  background-image: linear-gradient(135deg, var(--ng-purple-heart-bg, #b23a8a), var(--ng-purple-heart-hover, rgb(151.3, 49.3, 117.3)));
  border-color: var(--ng-purple-heart-border, #7d2962);
}

.ng-btn-grad.ng-btn-purple-heart:hover {
  background-image: linear-gradient(135deg, var(--ng-purple-heart-hover, rgb(151.3, 49.3, 117.3)), var(--ng-purple-heart-border, #7d2962));
}

.ng-btn-grad.ng-btn-cyan {
  background-image: linear-gradient(135deg, var(--ng-cyan-bg, #009dd9), var(--ng-cyan-hover, rgb(0, 133.45, 184.45)));
  border-color: var(--ng-cyan-border, #0081b2);
}

.ng-btn-grad.ng-btn-cyan:hover {
  background-image: linear-gradient(135deg, var(--ng-cyan-hover, rgb(0, 133.45, 184.45)), var(--ng-cyan-border, #0081b2));
}

.ng-btn-grad.ng-btn-magenta {
  background-image: linear-gradient(135deg, var(--ng-magenta-bg, #d4007f), var(--ng-magenta-hover, rgb(180.2, 0, 107.95)));
  border-color: var(--ng-magenta-border, #b0006a);
}

.ng-btn-grad.ng-btn-magenta:hover {
  background-image: linear-gradient(135deg, var(--ng-magenta-hover, rgb(180.2, 0, 107.95)), var(--ng-magenta-border, #b0006a));
}

.ng-btn-grad.ng-btn-yellow {
  background-image: linear-gradient(135deg, var(--ng-yellow-bg, #ffd200), var(--ng-yellow-hover, rgb(216.75, 178.5, 0)));
  border-color: var(--ng-yellow-border, #e6bd00);
}

.ng-btn-grad.ng-btn-yellow:hover {
  background-image: linear-gradient(135deg, var(--ng-yellow-hover, rgb(216.75, 178.5, 0)), var(--ng-yellow-border, #e6bd00));
}

/* ==========================================================
NexiGrid — Card
----------------------------------------------------------
Card strutturale: media, head (left/right), subhead, body,
section, subfoot, foot (left/center/right). Varianti hover,
compact, horizontal. Responsive. Var scoped overridabili.
Head titles: blocco .ng-card-head-titles (stack verticale) +
.ng-card-title / .ng-card-subtitle per il pattern "titolo sopra,
sottotitolo sotto" senza forzare head-left a column.
Head right: stack a sm (576) con margin-top --ng-card-gap.
Foot: padding-top non più 0 (era attaccato al body senza subfoot) →
simmetrico 1.75rem, spaziato anche senza divider/subfoot.
----------------------------------------------------------
Version: 1.2.1 · Status: stable
========================================================== */
.ng-card {
  /* ===== Scoped Variables ===== */
  --ng-card-bg: var(--ng-surface);
  --ng-card-color: currentColor;
  --ng-card-head-border-bottom: transparent;
  /* radius: default md via fallback-at-use (non dichiarato → :root cascata) */
  --ng-card-border-width: var(--ng-border-width, 1px);
  --ng-card-border-color: var(--ng-color-border, rgba(232,235,244,1));
  --ng-card-border-topbot-line: 1px dashed var(--ng-color-border);
  --ng-card-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  --ng-card-shadow-hover: 0 18px 40px rgba(15, 23, 42, .12);
  --ng-card-padding: 1.75rem 2.25rem;
  --ng-card-body-padding: 2.25rem 1.5rem;
  --ng-card-header-padding: 1.75rem 2.25rem 0;
  --ng-card-footer-padding: 1.75rem 2.25rem;
  --ng-card-gap: 1.25rem;
  --ng-card-gap-foot: .875rem;
  --ng-card-section-gap: 1.25rem;
  --ng-card-sub-color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  min-height: 50px;
  background: var(--ng-card-bg);
  color: var(--ng-card-color);
  border: var(--ng-card-border-width) solid var(--ng-card-border-color);
  border-radius: var(--ng-card-radius, var(--ng-radius-md));
  box-shadow: var(--ng-card-shadow);
  overflow: visible;
  transition: box-shadow 0.22s ease, transform 0.18s ease;
  /* ===== Hover ===== */
  /* ===== Media ===== */
  /* ===== Head ===== */
  /* ===== Head titles (stacked title + subtitle) =====
     Blocco verticale per il pattern "titolo sopra, sottotitolo sotto"
     dentro head-left. Tiene head-left STRETTO (larghezza = riga più lunga,
     non somma) così il contenuto a destra resta inline finché c'è spazio
     reale, invece di andare a capo per via del testo affiancato.
     head-left resta flex-row di default (uso "titolo + badge inline").
     Posto DOPO `.ng-card-head-left > *` per vincere a parità di specificity. */
  /* ===== Subhead ===== */
  /* ===== Body ===== */
  /* ===== Subfoot ===== */
  /* ===== Foot ===== */
  /* ===== Density (compact) ===== */
  /* ===== Layout (horizontal) ===== */
}
.ng-card.hover:hover {
  z-index: var(--ng-z-card, 100);
  box-shadow: var(--ng-card-shadow-hover);
  transform: translateY(-3px);
}
.ng-card > .ng-card-media {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.ng-card > .ng-card-media img,
.ng-card > .ng-card-media video,
.ng-card > .ng-card-media picture,
.ng-card > .ng-card-media canvas,
.ng-card > .ng-card-media svg {
  border-top-left-radius: var(--ng-card-radius, var(--ng-radius-md));
  border-top-right-radius: var(--ng-card-radius, var(--ng-radius-md));
  display: block;
  width: 100%;
  height: auto;
}
.ng-card .ng-card-head-left > *,
.ng-card .ng-card-head-right > * {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.ng-card .ng-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ng-card-header-padding);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ng-card-head-border-bottom);
}
.ng-card .ng-card-head-left,
.ng-card .ng-card-head-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex-wrap: nowrap;
}
.ng-card .ng-card-head-left {
  flex: 1 1 auto;
}
.ng-card .ng-card-head-right {
  flex: 0 0 auto;
}
.ng-card .ng-card-head-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}
.ng-card .ng-card-title {
  font-weight: 600;
  line-height: 1.2;
}
.ng-card .ng-card-subtitle {
  font-size: 0.875rem;
  line-height: 1.2;
  opacity: 0.7;
}
.ng-card .ng-card-subhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  word-break: break-word;
  min-width: 0;
  min-height: 2.25rem;
  border-bottom: var(--ng-card-border-topbot-line);
  padding: 0 2.25rem 1rem;
  color: var(--ng-card-sub-color);
}
.ng-card .ng-card-subhead > * {
  min-width: 0;
}
.ng-card .ng-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--ng-card-gap);
  padding: var(--ng-card-body-padding);
  min-width: 0;
}
.ng-card .ng-card-section {
  min-width: 0;
}
.ng-card .ng-card-section + .ng-card-section {
  margin-top: var(--ng-card-section-gap);
}
.ng-card .ng-card-subfoot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 2.25rem;
  padding: var(--ng-card-padding);
  color: var(--ng-card-sub-color);
  border-top: var(--ng-card-border-topbot-line);
}
.ng-card .ng-card-foot {
  display: flex;
  align-items: center;
  gap: var(--ng-card-gap-foot);
  padding: var(--ng-card-footer-padding);
  flex-wrap: wrap;
  min-width: 0;
  /* solo icone "bare" figlie dirette: NON le <i> dentro i .ng-btn
     (i button gestiscono già lo spacing icona/testo via gap) */
}
.ng-card .ng-card-foot > i {
  margin-right: 0.75em;
}
.ng-card .ng-card-foot > i:last-child {
  margin-left: 0;
}
.ng-card .ng-card-foot-left,
.ng-card .ng-card-foot-center,
.ng-card .ng-card-foot-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex-wrap: wrap;
}
.ng-card .ng-card-foot-left {
  flex: 1 1 0;
  justify-content: flex-start;
}
.ng-card .ng-card-foot-center {
  flex: 1 1 0;
  justify-content: center;
}
.ng-card .ng-card-foot-right {
  flex: 1 1 0;
  justify-content: flex-end;
}
.ng-card.compact {
  --ng-card-padding: 1.125rem;
  --ng-card-gap: 1rem;
  --ng-card-section-gap: 1rem;
}
.ng-card.horizontal {
  flex-direction: row;
}
.ng-card.horizontal > .ng-card-media {
  flex: 0 0 42%;
}
.ng-card.horizontal > .ng-card-media img,
.ng-card.horizontal > .ng-card-media video,
.ng-card.horizontal > .ng-card-media picture,
.ng-card.horizontal > .ng-card-media canvas,
.ng-card.horizontal > .ng-card-media svg {
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 768px) {
  .ng-card.horizontal {
    flex-direction: column;
  }
  .ng-card.horizontal > .ng-card-media {
    flex: 0 0 auto;
    width: 100%;
  }
  .ng-card.horizontal > .ng-card-media img,
  .ng-card.horizontal > .ng-card-media video,
  .ng-card.horizontal > .ng-card-media picture,
  .ng-card.horizontal > .ng-card-media canvas,
  .ng-card.horizontal > .ng-card-media svg {
    height: auto;
  }
  .ng-card .ng-card-foot-left,
  .ng-card .ng-card-foot-center,
  .ng-card .ng-card-foot-right {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}
/* ==========================================================
HEAD — stack a sm (576): il right va a capo solo su schermi piccoli,
non già a md. Quando va sotto, distanziato con --ng-card-gap.
========================================================== */
@media (max-width: 575.98px) {
  .ng-card .ng-card-head-left,
  .ng-card .ng-card-head-right {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .ng-card .ng-card-head-right {
    margin-top: var(--ng-card-gap);
  }
}
/* ==========================================================
NexiGrid — Chip
----------------------------------------------------------
Chip/tag inline, variante removable.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-chip {
  --ng-chip-bg: var(--ng-surface-sunken);
  --ng-chip-color: var(--ng-text, #222);
  /* radius: default pill via fallback-at-use (non dichiarato → :root cascata) */
  --ng-chip-close-space: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--ng-chip-radius, var(--ng-radius-pill));
  background: var(--ng-chip-bg);
  color: var(--ng-chip-color);
  font-size: 0.875rem;
}
.ng-chip.removable {
  padding-right: var(--ng-chip-close-space);
}
.ng-chip .ng-chip-close {
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  font-size: 0.85rem;
}

/* ==========================================================
NexiGrid — Collapse
----------------------------------------------------------
Contenitore collassabile (height gestita inline dal JS).
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-collapse {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* .ng-collapse.is-open → height impostata inline dal JS (nessuno stile statico) */
/* ==========================================================
NexiGrid — Chart (UN solo componente per tutte le primitive)
----------------------------------------------------------
Famiglia chart NG, zero dipendenze.
  Tier 1 (SCSS-only, qui): donut ✓ · gauge ✓ · bars ✓ · sparkline ✓
  Tier 2 (ng_chart.js): line/area/bar da dati (SVG) — futuro
Token condivisi --ng-chart-* (value/fill/track/size). Varianti colore
.ng-chart-<color> per tutta la famiglia. value = DATO del componente
(come --ng-progress-value), non override cosmetico.
Size scale xs/sm/md/lg/xl su donut · gauge · bars (default = md).
Tier 2 (ng_chart.js): .ng-chart-js line/area/bar da data-values.
----------------------------------------------------------
Version: 1.4 · Status: stable
========================================================== */
/* ===== Shared scoped variables (famiglia) ===== */
[class*=ng-chart-] {
  --ng-chart-value: 0%; /* DATO: % */
  --ng-chart-track: var(--ng-fill);
  --ng-chart-fill: var(--ng-primary-bg, #4a2a86);
}

/* Label centrale/condivisa */
.ng-chart-label {
  position: relative; /* sopra l'anello mascherato */
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

/* ==========================================================
DONUT — conic-gradient (dato) + mask radiale (foro anello)
========================================================== */
.ng-chart-donut {
  --ng-chart-size: 7rem;
  --ng-chart-thickness: .85rem;
  position: relative;
  inline-size: var(--ng-chart-size);
  block-size: var(--ng-chart-size);
  display: grid;
  place-items: center;
  /* Size scale xs → xl (default = md) */
}
.ng-chart-donut::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ng-chart-fill) var(--ng-chart-value), var(--ng-chart-track) 0);
  -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--ng-chart-thickness)), #000 0);
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--ng-chart-thickness)), #000 0);
}
.ng-chart-donut.xs {
  --ng-chart-size: 3.5rem;
  --ng-chart-thickness: .45rem;
}
.ng-chart-donut.sm {
  --ng-chart-size: 4.5rem;
  --ng-chart-thickness: .6rem;
}
.ng-chart-donut.md {
  --ng-chart-size: 7rem;
  --ng-chart-thickness: .85rem;
}
.ng-chart-donut.lg {
  --ng-chart-size: 8.5rem;
  --ng-chart-thickness: 1rem;
}
.ng-chart-donut.xl {
  --ng-chart-size: 10rem;
  --ng-chart-thickness: 1.1rem;
}

/* ==========================================================
GAUGE — semicerchio (180°). conic from -90deg (parte da sx),
fill = value/2 perché il gauge copre metà cerchio. Mezza altezza +
overflow:hidden nasconde la metà inferiore. Stesso mask a ciambella.
========================================================== */
.ng-chart-gauge {
  --ng-chart-size: 8rem;
  --ng-chart-thickness: .85rem;
  position: relative;
  inline-size: var(--ng-chart-size);
  block-size: calc(var(--ng-chart-size) / 2);
  overflow: hidden;
  display: grid;
  place-items: end center; /* label nell'apertura, in basso */
  /* Size scale xs → xl (default = md) */
}
.ng-chart-gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  inline-size: var(--ng-chart-size);
  block-size: var(--ng-chart-size); /* cerchio pieno, metà sotto è clippata */
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--ng-chart-fill) calc(var(--ng-chart-value) / 2), var(--ng-chart-track) 0 50%, transparent 50%);
  -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--ng-chart-thickness)), #000 0);
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--ng-chart-thickness)), #000 0);
}
.ng-chart-gauge.xs {
  --ng-chart-size: 4rem;
  --ng-chart-thickness: .5rem;
}
.ng-chart-gauge.sm {
  --ng-chart-size: 5.5rem;
  --ng-chart-thickness: .6rem;
}
.ng-chart-gauge.md {
  --ng-chart-size: 8rem;
  --ng-chart-thickness: .85rem;
}
.ng-chart-gauge.lg {
  --ng-chart-size: 9.5rem;
  --ng-chart-thickness: 1rem;
}
.ng-chart-gauge.xl {
  --ng-chart-size: 11rem;
  --ng-chart-thickness: 1.1rem;
}

/* ==========================================================
BARS — bar/column chart, flex + height % (height per barra = --ng-chart-value).
Nessun JS: ogni .ng-chart-bar porta il proprio valore. Top arrotondato,
base squadrata (poggia sulla baseline).
========================================================== */
.ng-chart-bars {
  --ng-chart-bars-height: 8rem; /* altezza grafico (token, non size) */
  --ng-chart-bars-gap: .5rem;
  --ng-chart-bar-width: .85rem; /* LARGHEZZA barra — md (default) */
  display: flex;
  align-items: flex-end;
  inline-size: max-content; /* il grafico si adatta alle barre a larghezza fissa */
  gap: var(--ng-chart-bars-gap);
  block-size: var(--ng-chart-bars-height);
  /* Size = larghezza della barra (3 taglie) */
}
.ng-chart-bars.sm {
  --ng-chart-bar-width: .5rem;
  --ng-chart-bars-gap: .35rem;
}
.ng-chart-bars.md {
  --ng-chart-bar-width: .85rem;
  --ng-chart-bars-gap: .5rem;
}
.ng-chart-bars.lg {
  --ng-chart-bar-width: 1.4rem;
  --ng-chart-bars-gap: .7rem;
}

.ng-chart-bar {
  flex: 0 0 auto;
  inline-size: var(--ng-chart-bar-width); /* larghezza fissa per taglia */
  block-size: var(--ng-chart-value); /* DATO: % della height */
  background: var(--ng-chart-fill);
  border-radius: var(--ng-chart-bar-radius, var(--ng-radius-sm));
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* ==========================================================
SPARKLINE — SVG <polyline>/<path> inline (Tier 1: punti nel markup).
preserveAspectRatio="none" per stirare; non-scaling-stroke mantiene
lo spessore costante. Variante .area per riempimento sotto la linea.
========================================================== */
.ng-chart-sparkline {
  --ng-chart-spark-w: 8rem;
  --ng-chart-spark-h: 2.25rem;
  --ng-chart-spark-stroke: 2;
  display: inline-block;
  inline-size: var(--ng-chart-spark-w);
  block-size: var(--ng-chart-spark-h);
  line-height: 0;
  /* Area: riempimento tenue sotto la linea (polygon/path.area) */
}
.ng-chart-sparkline svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  overflow: visible;
}
.ng-chart-sparkline polyline,
.ng-chart-sparkline path {
  fill: none;
  stroke: var(--ng-chart-fill);
  stroke-width: var(--ng-chart-spark-stroke);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ng-chart-sparkline.area polygon, .ng-chart-sparkline.area .area {
  fill: var(--ng-chart-fill);
  stroke: none;
  opacity: 0.15;
}

/* ==========================================================
JS CHART (Tier 2) — line/area/bar renderizzati da ng_chart.js (SVG da dati).
Il JS inietta <svg> con classi line/area/bar/dot. Stile = token famiglia.
========================================================== */
.ng-chart-js {
  --ng-chart-js-h: 9rem;
  --ng-chart-js-stroke: 2;
  --ng-chart-tip-bg: var(--ng-cdark-bg, #2a2f3a);
  --ng-chart-tip-color: var(--ng-cdark-text, #fff);
  position: relative; /* ancora per il tooltip */
  display: block;
  inline-size: 100%;
  block-size: var(--ng-chart-js-h);
  /* render in px reali (viewBox = dimensioni px) → cerchi tondi, niente distorsione */
  /* Punto attivo (hover) — nascosto di default */
}
.ng-chart-js svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  overflow: visible;
}
.ng-chart-js .line {
  fill: none;
  stroke: var(--ng-chart-fill);
  stroke-width: var(--ng-chart-js-stroke);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ng-chart-js .area {
  fill: var(--ng-chart-fill);
  stroke: none;
  opacity: 0.15;
}
.ng-chart-js .bar {
  fill: var(--ng-chart-fill);
  transition: opacity 0.12s;
}
.ng-chart-js .dot {
  fill: var(--ng-chart-fill);
}
.ng-chart-js .dot-active {
  fill: var(--ng-chart-fill);
  stroke: var(--ng-surface, #fff);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.1s;
}
.ng-chart-js.is-hover .dot-active {
  opacity: 1;
}

/* Tooltip (hover) — bolla scura, segue il punto/barra attiva */
.ng-chart-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-block-start: -8px;
  padding: 0.15rem 0.45rem;
  border-radius: var(--ng-radius-sm);
  background: var(--ng-chart-tip-bg);
  color: var(--ng-chart-tip-color);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 2;
}

.ng-chart-js.is-hover .ng-chart-tip {
  opacity: 1;
}

/* ==========================================================
Color Variants — fill della famiglia (track resta neutro)
========================================================== */
.ng-chart-primary {
  --ng-chart-fill: var(--ng-primary-bg, #4a2a86);
}

.ng-chart-secondary {
  --ng-chart-fill: var(--ng-secondary-bg, #7d2342);
}

.ng-chart-success {
  --ng-chart-fill: var(--ng-success-bg, #1da571);
}

.ng-chart-info {
  --ng-chart-fill: var(--ng-info-bg, #119bdc);
}

.ng-chart-warning {
  --ng-chart-fill: var(--ng-warning-bg, #dd7900);
}

.ng-chart-danger {
  --ng-chart-fill: var(--ng-danger-bg, #f2415c);
}

.ng-chart-mute {
  --ng-chart-fill: var(--ng-mute-bg, #c8c8c8);
}

.ng-chart-blue {
  --ng-chart-fill: var(--ng-blue-bg, #3b82f6);
}

.ng-chart-blue-sky {
  --ng-chart-fill: var(--ng-blue-sky-bg, #6cc8ff);
}

.ng-chart-green {
  --ng-chart-fill: var(--ng-green-bg, #2e7d32);
}

.ng-chart-lime {
  --ng-chart-fill: var(--ng-lime-bg, #9edc00);
}

.ng-chart-aguagreen {
  --ng-chart-fill: var(--ng-aguagreen-bg, #0e9c7e);
}

.ng-chart-indigo {
  --ng-chart-fill: var(--ng-indigo-bg, #4f46e5);
}

.ng-chart-purple {
  --ng-chart-fill: var(--ng-purple-bg, #a027f0);
}

.ng-chart-purple-heart {
  --ng-chart-fill: var(--ng-purple-heart-bg, #b23a8a);
}

.ng-chart-cyan {
  --ng-chart-fill: var(--ng-cyan-bg, #009dd9);
}

.ng-chart-magenta {
  --ng-chart-fill: var(--ng-magenta-bg, #d4007f);
}

.ng-chart-yellow {
  --ng-chart-fill: var(--ng-yellow-bg, #ffd200);
}

.ng-chart-clight {
  --ng-chart-fill: var(--ng-clight-bg, #f0f0f0);
}

.ng-chart-cdark {
  --ng-chart-fill: var(--ng-cdark-bg, #424242);
}

/* ==========================================================
NexiGrid — Divider
----------------------------------------------------------
Divisore orizzontale/verticale; half/center/dashed/dotted/with-text; varianti colore.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-divider {
  --ng-divider-color: var(--ng-color-border);
  --ng-divider-size: 1px;
  --ng-divider-style: solid;
  --ng-divider-width: 100%;
  --ng-divider-gap: 1rem;
  display: block;
  position: relative;
  width: var(--ng-divider-width);
  height: 0;
  border-top: var(--ng-divider-size) var(--ng-divider-style) var(--ng-divider-color);
  /* 50% width */
  /* center horizontal */
  /* dashed */
  /* dotted */
  /* vertical */
  /* with text */
}
.ng-divider.half {
  --ng-divider-width: 50%;
}
.ng-divider.center {
  margin-left: auto;
  margin-right: auto;
}
.ng-divider.dashed {
  --ng-divider-style: dashed;
}
.ng-divider.dotted {
  --ng-divider-style: dotted;
}
.ng-divider.vertical {
  align-self: stretch;
  width: 0;
  min-height: 1px;
  border-top: 0;
  border-left: var(--ng-divider-size) var(--ng-divider-style) var(--ng-divider-color);
  margin: 0 var(--ng-divider-gap);
}
.ng-divider.with-text {
  display: flex;
  align-items: center;
  text-align: center;
  border: 0;
}
.ng-divider.with-text::before, .ng-divider.with-text::after {
  content: "";
  flex: 1;
  border-top: var(--ng-divider-size) var(--ng-divider-style) var(--ng-divider-color);
}
.ng-divider.with-text span {
  padding: 0 1rem;
  font-size: 0.875rem;
  opacity: 0.7;
}

.ng-divider-primary {
  --ng-divider-color: var(--ng-primary-bg, #4a2a86);
}

.ng-divider-secondary {
  --ng-divider-color: var(--ng-secondary-bg, #7d2342);
}

.ng-divider-success {
  --ng-divider-color: var(--ng-success-bg, #1da571);
}

.ng-divider-info {
  --ng-divider-color: var(--ng-info-bg, #119bdc);
}

.ng-divider-warning {
  --ng-divider-color: var(--ng-warning-bg, #dd7900);
}

.ng-divider-danger {
  --ng-divider-color: var(--ng-danger-bg, #f2415c);
}

.ng-divider-mute {
  --ng-divider-color: var(--ng-mute-bg, #c8c8c8);
}

.ng-divider-blue {
  --ng-divider-color: var(--ng-blue-bg, #3b82f6);
}

.ng-divider-blue-sky {
  --ng-divider-color: var(--ng-blue-sky-bg, #6cc8ff);
}

.ng-divider-green {
  --ng-divider-color: var(--ng-green-bg, #2e7d32);
}

.ng-divider-lime {
  --ng-divider-color: var(--ng-lime-bg, #9edc00);
}

.ng-divider-aguagreen {
  --ng-divider-color: var(--ng-aguagreen-bg, #0e9c7e);
}

.ng-divider-indigo {
  --ng-divider-color: var(--ng-indigo-bg, #4f46e5);
}

.ng-divider-purple {
  --ng-divider-color: var(--ng-purple-bg, #a027f0);
}

.ng-divider-purple-heart {
  --ng-divider-color: var(--ng-purple-heart-bg, #b23a8a);
}

.ng-divider-cyan {
  --ng-divider-color: var(--ng-cyan-bg, #009dd9);
}

.ng-divider-magenta {
  --ng-divider-color: var(--ng-magenta-bg, #d4007f);
}

.ng-divider-yellow {
  --ng-divider-color: var(--ng-yellow-bg, #ffd200);
}

.ng-divider-clight {
  --ng-divider-color: var(--ng-clight-bg, #f0f0f0);
}

.ng-divider-cdark {
  --ng-divider-color: var(--ng-cdark-bg, #424242);
}

/* ==========================================================
NexiGrid — Dropdown
----------------------------------------------------------
Dropdown generico (trigger + menu) standalone. Allineamento
left/right/center, hover-mode, with-arrow. Menu nel top layer
(Popover API) con flip/clamp automatico via ng_dropdown.js.
Var scoped overridabili per tema/contesto.
----------------------------------------------------------
Version: 1.3 · Status: stable
========================================================== */
.ng-dropdown {
  /* === Scoped variables === */
  --ng-dd-min-width: 160px;
  --ng-dd-offset: .4rem;
  --ng-dd-bg: var(--ng-surface);
  --ng-dd-color: var(--ng-text);
  --ng-dd-border: var(--ng-border-width, 1px) solid var(--ng-color-border, #e5e5e5);
  /* radius: default md via fallback-at-use (non dichiarato → :root cascata) */
  --ng-dd-shadow: 0 6px 18px rgba(0,0,0,.08);
  --ng-dd-item-padding-y: .5rem;
  --ng-dd-item-padding-x: .9rem;
  --ng-dd-item-font-size: .85rem;
  --ng-dd-item-hover-bg: rgba(var(--ng-hover-tint), .04);
  --ng-dd-item-hover-color: inherit;
  --ng-dd-divider-color: rgba(var(--ng-hover-tint), .08);
  --ng-dd-transition-speed: .15s;
  --ng-dd-translate-y: 6px;
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-self: flex-start;
  flex: 0 0 auto;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  /* Trigger */
  /* Menu */
  /* Open states */
  /* Popover chiuso: fuori dal layout (non solo opacity:0) → niente box,
     niente overflow di pagina, a qualsiasi posizione del trigger. */
  /* Top layer (Popover API): annulla il centraggio UA (inset:0;margin:auto);
     il posizionamento fixed + flip/clamp è gestito dall'engine JS. */
  /* Stato iniziale del fade all'apertura (entry) per browser moderni */
  /* Alignment */
  /* Align center – il menu si centra sotto il trigger */
  /* Optional arrow */
}
.ng-dropdown .ng-dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  /* Icone Phosphor: neutralizza il normalize line-height:0 globale
     (stesso pattern di _ng_button.scss) — senza, un trigger icon-only
     collassa a 0px e il centramento flex del parent non ha presa */
}
.ng-dropdown .ng-dropdown-trigger i.ph, .ng-dropdown .ng-dropdown-trigger i.ph-thin, .ng-dropdown .ng-dropdown-trigger i.ph-light, .ng-dropdown .ng-dropdown-trigger i.ph-bold, .ng-dropdown .ng-dropdown-trigger i.ph-fill, .ng-dropdown .ng-dropdown-trigger i.ph-duotone {
  line-height: 1;
  display: inline-flex;
}
.ng-dropdown .ng-dropdown-trigger i {
  flex: 0 0 auto;
}
.ng-dropdown .ng-dropdown-trigger span {
  min-width: 0;
}
.ng-dropdown .ng-dropdown-menu {
  position: absolute;
  top: 100%;
  min-width: var(--ng-dd-min-width);
  margin-top: var(--ng-dd-offset);
  background: var(--ng-dd-bg);
  color: var(--ng-dd-color);
  border: var(--ng-dd-border);
  border-radius: var(--ng-dd-radius, var(--ng-radius-md));
  box-shadow: var(--ng-dd-shadow);
  opacity: 0;
  transform: translateY(var(--ng-dd-translate-y));
  pointer-events: none;
  /* display nella transition (allow-discrete) → il fade resta anche
     sul toggle none↔block del Popover API (Chrome/Safari/Firefox moderni) */
  transition: opacity var(--ng-dd-transition-speed) ease, transform var(--ng-dd-transition-speed) ease, display var(--ng-dd-transition-speed) allow-discrete;
  z-index: var(--ng-z-dropdown_menu, 401);
}
.ng-dropdown .ng-dropdown-menu a,
.ng-dropdown .ng-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* spazio icona ↔ testo (coerente col trigger) */
  width: 100%;
  padding: var(--ng-dd-item-padding-y) var(--ng-dd-item-padding-x);
  font-size: var(--ng-dd-item-font-size);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.ng-dropdown .ng-dropdown-menu a:hover,
.ng-dropdown .ng-dropdown-menu button:hover {
  background: var(--ng-dd-item-hover-bg);
  color: var(--ng-dd-item-hover-color);
}
.ng-dropdown .ng-dropdown-menu .ng-dropdown-title {
  padding: calc(var(--ng-dd-item-padding-y) * 0.9) var(--ng-dd-item-padding-x);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  pointer-events: none;
}
.ng-dropdown .ng-dropdown-menu .ng-dropdown-divider {
  height: 1px;
  background: var(--ng-dd-divider-color);
  margin: 0.4rem 0;
}
.ng-dropdown.is-open > .ng-dropdown-menu, .ng-dropdown.hover-mode:hover > .ng-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ng-dropdown .ng-dropdown-menu[popover]:not(:popover-open) {
  display: none;
}
.ng-dropdown .ng-dropdown-menu:popover-open {
  inset: auto;
  margin: 0;
}
@starting-style {
  .ng-dropdown.is-open > .ng-dropdown-menu {
    opacity: 0;
  }
}
.ng-dropdown.align-left > .ng-dropdown-menu {
  left: 0;
  right: auto;
}
.ng-dropdown.align-right > .ng-dropdown-menu {
  right: 0;
  left: auto;
}
.ng-dropdown.align-center > .ng-dropdown-menu {
  left: 50%;
  transform: translateX(-50%) translateY(var(--ng-dd-translate-y));
}
.ng-dropdown.align-center.is-open > .ng-dropdown-menu, .ng-dropdown.align-center.hover-mode:hover > .ng-dropdown-menu {
  transform: translateX(-50%) translateY(0);
}
.ng-dropdown.with-arrow > .ng-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--ng-dd-bg);
}
.ng-dropdown.align-right.with-arrow > .ng-dropdown-menu::before {
  left: auto;
  right: 16px;
}

/* ==========================================================
NexiGrid — Empty
----------------------------------------------------------
Empty state centrato (title + text).
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-empty {
  --ng-empty-gap: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ng-empty-gap);
}
.ng-empty .ng-empty-title {
  font-weight: 600;
}
.ng-empty .ng-empty-text {
  opacity: 0.7;
}

/* ==========================================================
NexiGrid — Footer
----------------------------------------------------------
Footer di pagina: grid colonne (auto-fit), nav, bottom bar.
Varianti center/right/inline. Responsive. Var scoped.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-footer {
  /* Scoped variables */
  --ng-footer-bg: var(--ng-surface-sunken);
  --ng-footer-color: var(--ng-text);
  --ng-footer-font-size: .875rem;
  --ng-footer-bottom-size: .75rem;
  --ng-footer-mtop: 40px;
  --ng-footer-muted: #888;
  /* hover link footer (default underline; il tema puo' passare a colore:
     --ng-footer-link-hover-color: var(--ng-primary); -decoration: none) */
  --ng-footer-link-hover-color: inherit;
  --ng-footer-link-hover-decoration: underline;
  width: 100%;
  padding: var(--ng-gap) 0;
  background: var(--ng-footer-bg);
  color: var(--ng-footer-color);
  font-size: var(--ng-footer-font-size);
  margin-top: var(--ng-footer-mtop);
  margin-bottom: 0;
  /* Hover su QUALSIASI link del footer (non solo .ng-footer-nav), esclusi
     i .ng-btn. Token-based -> i temi lo sovrascrivono. Stessa specificita'
     della regola .ng-footer-nav a:hover ma piu' generica (la include). */
}
.ng-footer .ng-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ng-gap);
  align-items: center;
  width: 100%;
  padding-inline: var(--ng-gap);
}
.ng-footer h4 {
  margin-bottom: 6px;
}
.ng-footer .ng-footer-col {
  text-align: left;
}
.ng-footer .ng-footer-col .ng-footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ng-footer .ng-footer-col .ng-footer-nav a {
  color: inherit;
  text-decoration: none;
}
.ng-footer .ng-footer-col .ng-footer-nav a:hover {
  text-decoration: underline;
}
.ng-footer .ng-footer-col .ng-footer-nav.inline {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.ng-footer .ng-footer-bottom {
  margin-top: var(--ng-gap);
  border-top: 1px solid rgba(var(--ng-hover-tint), 0.1);
  padding-top: var(--ng-gap);
  font-size: var(--ng-footer-bottom-size);
  text-align: center;
  color: var(--ng-footer-muted, #888);
}
.ng-footer .ng-footer-col.center,
.ng-footer .ng-footer-bottom.center {
  text-align: center;
}
.ng-footer .ng-footer-col.right,
.ng-footer .ng-footer-bottom.right {
  text-align: right;
}
.ng-footer a:not(.ng-btn):not([class*=ng-btn-]):hover {
  color: var(--ng-footer-link-hover-color);
  text-decoration: var(--ng-footer-link-hover-decoration);
  transition: color 0.12s ease;
}

@media (max-width: 575px) {
  .ng-footer .ng-footer-grid {
    grid-template-columns: 1fr;
  }
  .ng-footer .ng-footer-col, .ng-footer .ng-footer-col.right {
    text-align: center;
  }
  .ng-footer .ng-footer-col .ng-footer-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
/* ==========================================================
NexiGrid — Form
----------------------------------------------------------
Sistema form: input/select/textarea, check/radio custom
(ng-check-nexi classic/bolder), label/required, help, stati
error/success, size sm/lg, upload, form-actions, count.
Signature anti-BS5: focus brand-governed (crisp) + check brand;
underline opt-in con .ng-form-underline / .ng-field-underline.
----------------------------------------------------------
Version: 1.1 · Status: stable
========================================================== */
.ng-form {
  /* ============================================================
  SCOPED VARIABLES
  ============================================================ */
  --ng-form-gap: 1rem;
  --ng-form-label-size: .85rem;
  --ng-form-label-weight: 600;
  --ng-form-label-color: var(--ng-text);
  --ng-field-gap: .6rem;
  --ng-label-margin: .8rem 0 .5rem;
  --ng-input-disabled-bg: var(--ng-surface-sunken);
  --ng-input-disabled-color: var(--ng-text-muted, #888);
  --ng-input-placeholder: #999;
  --ng-form-help-color: var(--ng-text-muted, #777);
  display: flex;
  flex-direction: column;
  gap: var(--ng-form-gap);
  inline-size: 100%;
}
.ng-form.form_100 .ng-input, .ng-form.form_100 .ng-select, .ng-form.form_100 .ng-textarea {
  width: 100%;
}

/* ============================================================
FIELD WRAPPER
============================================================ */
.ng-field {
  display: flex;
  flex-direction: column;
  gap: var(--ng-field-gap);
  inline-size: 100%;
}

/* ============================================================
INPUT BASE (Shared Core)
============================================================ */
.ng-input,
.ng-select,
.ng-textarea {
  min-width: 0;
  padding-block: var(--ng-input-padding-y);
  padding-inline: var(--ng-input-padding-x);
  border: 1px solid var(--ng-input-color-border);
  border-radius: var(--ng-input-radius);
  background: var(--ng-input-bg);
  color: var(--ng-input-color);
  font-size: var(--ng-input-font-size);
  line-height: var(--ng-input-line-height);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ng-input:focus,
.ng-select:focus,
.ng-textarea:focus, .ng-input:focus-visible,
.ng-select:focus-visible,
.ng-textarea:focus-visible {
  outline: none;
  border-color: var(--ng-input-focus-border);
  border-radius: var(--ng-input-radius);
  box-shadow: var(--ng-input-focus-ring);
}
.ng-input:disabled,
.ng-select:disabled,
.ng-textarea:disabled {
  background: var(--ng-input-disabled-bg);
  color: var(--ng-input-disabled-color);
  cursor: not-allowed;
}
.ng-input::placeholder,
.ng-select::placeholder,
.ng-textarea::placeholder {
  color: var(--ng-input-placeholder);
}
.is-uppercase.ng-input,
.is-uppercase.ng-select,
.is-uppercase.ng-textarea {
  text-transform: uppercase;
}

/* ============================================================
TEXTUAL INPUTS
============================================================ */
.ng-textarea {
  resize: vertical;
  min-block-size: 90px;
}

.ng-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: none;
}

/* ============================================================
SIGNATURE — Underline (anti-BS5, opt-in con UNA classe)
.ng-form-underline sul form (o .ng-field-underline sul singolo campo):
tutti gli input/select/textarea diventano "editorial" — niente box, solo
riga inferiore; focus = barra brand 2px. Zero classi per-campo. La riga usa
--ng-input-color-border, quindi gli stati error/success la colorano da soli.
============================================================ */
.ng-form-underline .ng-input,
.ng-form-underline .ng-select,
.ng-form-underline .ng-textarea,
.ng-field-underline .ng-input,
.ng-field-underline .ng-select,
.ng-field-underline .ng-textarea {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
  box-shadow: inset 0 -1px 0 var(--ng-input-color-border);
  transition: box-shadow 0.2s ease;
}
.ng-form-underline .ng-input:focus,
.ng-form-underline .ng-input:focus-visible,
.ng-form-underline .ng-select:focus,
.ng-form-underline .ng-select:focus-visible,
.ng-form-underline .ng-textarea:focus,
.ng-form-underline .ng-textarea:focus-visible,
.ng-field-underline .ng-input:focus,
.ng-field-underline .ng-input:focus-visible,
.ng-field-underline .ng-select:focus,
.ng-field-underline .ng-select:focus-visible,
.ng-field-underline .ng-textarea:focus,
.ng-field-underline .ng-textarea:focus-visible {
  box-shadow: inset 0 -2px 0 var(--ng-input-focus-accent, var(--ng-primary-bg, #4a2a86));
}

/* ============================================================
CHECKBOX / RADIO
============================================================ */
/* Wrapper base (sempre valido) */
.ng-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Default (nativo fallback) */
.ng-check input[type=checkbox],
.ng-check input[type=radio] {
  inline-size: var(--ng-check-size, 16px);
  block-size: var(--ng-check-size, 16px);
  cursor: pointer;
}

/* ============================================================
CHECKBOX / RADIO – Custom (ng-check-nexi)
Varianti: .classic | .bolder
============================================================ */
/* Base condivisa (non emessa direttamente) */
.ng-check-nexi.bolder, .ng-check-nexi.classic {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  /* Checked */
  /* Indeterminate */
  /* Hover */
  /* Focus */
  /* Disabled */
  /* Windows HCM */
}
.ng-check-nexi.bolder input[type=checkbox], .ng-check-nexi.classic input[type=checkbox],
.ng-check-nexi.bolder input[type=radio],
.ng-check-nexi.classic input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ng-check-nexi.bolder .ng-check-box, .ng-check-nexi.classic .ng-check-box {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.ng-check-nexi.bolder input[type=checkbox] ~ .ng-check-box, .ng-check-nexi.classic input[type=checkbox] ~ .ng-check-box {
  border-radius: var(--_check-radius);
}
.ng-check-nexi.bolder input[type=radio] ~ .ng-check-box, .ng-check-nexi.classic input[type=radio] ~ .ng-check-box {
  border-radius: 50%;
}
.ng-check-nexi.bolder input[type=checkbox]:checked ~ .ng-check-box, .ng-check-nexi.classic input[type=checkbox]:checked ~ .ng-check-box {
  background-color: var(--ng-check-color);
  border-color: var(--ng-check-color);
  background-image: var(--_check-icon);
  background-size: 65%;
}
.ng-check-nexi.bolder input[type=radio]:checked ~ .ng-check-box, .ng-check-nexi.classic input[type=radio]:checked ~ .ng-check-box {
  border-color: var(--ng-check-color);
  background-image: radial-gradient(circle, var(--ng-check-color) 38%, transparent 40%);
}
.ng-check-nexi.bolder input[type=checkbox]:indeterminate ~ .ng-check-box, .ng-check-nexi.classic input[type=checkbox]:indeterminate ~ .ng-check-box {
  background-color: var(--ng-check-color);
  border-color: var(--ng-check-color);
  background-image: var(--_check-indeterminate);
  background-size: 65%;
}
.ng-check-nexi.bolder:hover input:not(:disabled) ~ .ng-check-box, .ng-check-nexi.classic:hover input:not(:disabled) ~ .ng-check-box {
  border-color: var(--ng-input-focus-border);
  box-shadow: var(--ng-input-focus-ring);
}
.ng-check-nexi.bolder input:focus-visible ~ .ng-check-box, .ng-check-nexi.classic input:focus-visible ~ .ng-check-box {
  border-color: var(--ng-input-focus-border);
  box-shadow: var(--ng-input-focus-ring);
}
.ng-check-nexi.bolder input:disabled ~ .ng-check-box, .ng-check-nexi.classic input:disabled ~ .ng-check-box {
  background-color: var(--ng-input-disabled-bg, #f5f5f5);
  border-color: var(--ng-input-color-border);
  opacity: 0.55;
}
.ng-check-nexi.bolder:has(input:disabled), .ng-check-nexi.classic:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
@media (forced-colors: active) {
  .ng-check-nexi.bolder .ng-check-box, .ng-check-nexi.classic .ng-check-box {
    border: 2px solid ButtonText;
    background-color: ButtonFace;
    forced-color-adjust: none;
  }
  .ng-check-nexi.bolder input:checked ~ .ng-check-box, .ng-check-nexi.classic input:checked ~ .ng-check-box,
  .ng-check-nexi.bolder input:indeterminate ~ .ng-check-box,
  .ng-check-nexi.classic input:indeterminate ~ .ng-check-box {
    background-color: Highlight;
    border-color: Highlight;
  }
  .ng-check-nexi.bolder input:focus-visible ~ .ng-check-box, .ng-check-nexi.classic input:focus-visible ~ .ng-check-box {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* ============================================================
ng-check-nexi
============================================================ */
.ng-check-nexi {
  --ng-check-color: var(--ng-primary-bg, #4a2a86);
  --_check-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  --_check-indeterminate: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1h8' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  /* ── CLASSIC ─────────────────────────────── */
  /* ── BOLDER ──────────────────────────────── */
}
.ng-check-nexi.classic {
  --_check-radius: var(--ng-radius-sm);
}
.ng-check-nexi.classic .ng-check-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--ng-input-color-border);
  background-color: var(--ng-input-bg, #fff);
}
.ng-check-nexi.bolder {
  --_check-radius: var(--ng-radius-md);
}
.ng-check-nexi.bolder .ng-check-box {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(180, 180, 180, 0.45);
  border-radius: var(--_check-radius);
  background-color: var(--ng-input-bg, #fff);
  box-shadow: 0 0 0 0 transparent;
}
.ng-check-nexi.bolder input[type=radio] ~ .ng-check-box {
  border-radius: 50%;
}
.ng-check-nexi.bolder:hover input:not(:disabled) ~ .ng-check-box,
.ng-check-nexi.bolder input:focus-visible ~ .ng-check-box {
  border-color: rgba(180, 180, 180, 0.75);
  box-shadow: 0 0 0 3px rgba(100, 100, 100, 0.12);
}

/* ============================================================
LABEL
============================================================ */
.ng-label {
  display: block;
  margin: var(--ng-label-margin);
  font-size: var(--ng-form-label-size);
  font-weight: var(--ng-form-label-weight);
  color: var(--ng-form-label-color);
}

/* Default per <label> PLAIN (senza classe) nei field impilati: il reset
   globale li azzera, restavano attaccati all'input (come heading e p).
   Specificità 0 (:where) - .ng-label / .ng-check / label inline NON toccati. */
:where(.ng-field:not(.ng-field-inline) > label) {
  margin-block-end: var(--ng-label-gap, 0.45rem);
}

.ng-label-required::after {
  content: " *";
  color: var(--ng-danger-bg, #f2415c);
  font-weight: 700;
}

.ng-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ng-primary-bg, #4a2a86);
}

.ng-summary-value {
  font-size: 15px;
  margin-bottom: 20px;
}

/* ============================================================
INLINE MODE
============================================================ */
.ng-field.ng-field-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.ng-field.ng-field-inline .ng-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ng-field.ng-field-inline .ng-input,
.ng-field.ng-field-inline .ng-select,
.ng-field.ng-field-inline .ng-textarea {
  flex: 1 1 0;
  inline-size: auto;
  min-inline-size: 0;
}
.ng-field.ng-field-inline .ng-inline-full {
  flex: 0 0 100%;
}

/* ============================================================
HELP TEXT
============================================================ */
.ng-help {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--ng-form-help-color);
}

/* ============================================================
STATES
============================================================ */
.ng-field-error {
  --ng-input-color-border: var(--ng-danger-bg, #f2415c);
}
.ng-field-error .ng-help {
  color: var(--ng-danger-bg, #f2415c);
}

.ng-field-success {
  --ng-input-color-border: var(--ng-success-bg, #1da571);
}

.ng-field-warning {
  --ng-input-color-border: var(--ng-warning-bg, #dd7900);
}
.ng-field-warning .ng-help {
  color: var(--ng-warning-bg, #dd7900);
}

/* ============================================================
SIZE MODIFIERS
============================================================ */
.ng-input-sm,
.ng-select-sm,
.ng-textarea-sm {
  --ng-input-padding-y: .35rem;
  --ng-input-padding-x: .6rem;
  --ng-input-font-size: .8rem;
  --ng-input-line-height: 1.2;
}

.ng-input-lg,
.ng-select-lg,
.ng-textarea-lg {
  --ng-input-padding-y: .7rem;
  --ng-input-padding-x: 1rem;
  --ng-input-font-size: 1rem;
  --ng-input-line-height: 1.5;
}

.ng-input.w-auto,
.ng-select.w-auto,
.ng-textarea.w-auto {
  width: auto;
}

/* ============================================================
NG UPLOAD
File upload minimale compatibile con ng-form
============================================================ */
.ng-upload {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Input reale nascosto */
  /* Area clic / drop */
  /* Testo */
  /* Lista file */
  /* Singolo file */
}
.ng-upload .ng-upload-input {
  display: none;
}
.ng-upload .ng-upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px dashed var(--ng-input-color-border);
  border-radius: var(--ng-radius);
  background: var(--ng-input-bg);
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ng-upload .ng-upload-drop:hover {
  border-color: var(--ng-input-focus-border);
}
.ng-upload .ng-upload-drop > * {
  min-width: 0;
}
.ng-upload .ng-upload-text {
  font-size: 0.9rem;
  line-height: 1.4;
}
.ng-upload .ng-upload-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.ng-upload .ng-upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  min-width: 0;
}
.ng-upload .ng-upload-item span {
  min-width: 0;
}

/* ============================================================
FORM ACTIONS
============================================================ */
.ng-form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-block-start: 2rem;
}

.ng-count {
  /* Brand-governed: segue i form brandizzati + theme-aware. Override
     per-istanza via --ng-count-bg/-color. */
  --ng-count-bg: var(--ng-primary-bg, #4a2a86);
  --ng-count-color: var(--ng-primary-text, #ffffff);
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
  padding: 0.25rem 0.375rem;
  border-radius: var(--ng-radius-sm);
  background: var(--ng-count-bg);
  color: var(--ng-count-color);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.ng-count.top-left {
  top: 12px;
  left: 0;
}
.ng-count.top-center {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}
.ng-count.top-right {
  top: 12px;
  right: 0;
}
.ng-count.bottom-left {
  bottom: -30px;
  left: 4px;
}
.ng-count.bottom-center {
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
.ng-count.bottom-right {
  bottom: -30px;
  right: 4px;
}

/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 575.98px) {
  .ng-field.ng-field-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ==========================================================
NexiGrid — Header
----------------------------------------------------------
Header di pagina: inner grid (left/center/right), nav, header-menu
(dropdown), header-panel, divider. Responsive. JS ng_header.js.
Brand/surface da token globali; resto scoped.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-header {
  --ng-header-gap:var(--ng-gap,1rem);
  --ng-header-padding-x:2rem;
  --ng-header-padding-y:.5rem;
  --ng-header-background: var(--ng-surface);
  --ng-header-border-bottom: var(--ng-color-border, #e3e3e3);
  --ng-header-color-brand: var(--ng-info-border, #0e7fb4);
  --ng-header-active-link: var(--ng-warning-bg, #dd7900);
  --ng-header-hover-bg: rgba(var(--ng-hover-tint), .06);
  width: 100%;
  position: relative;
  background-color: var(--ng-header-background);
  border-bottom: 1px solid var(--ng-header-border-bottom);
  z-index: var(--ng-z-header, 300);
}
.ng-header .ng-header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ng-header-gap);
  min-height: var(--ng-header-height);
  padding-inline: var(--ng-header-padding-x);
  padding-block: var(--ng-header-padding-y);
  background: transparent;
}
.ng-header .ng-header-left,
.ng-header .ng-header-center,
.ng-header .ng-header-right {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ng-header-gap);
}
.ng-header .ng-header-left {
  justify-self: start;
}
.ng-header .ng-header-center {
  grid-column: 2;
  justify-self: stretch;
  justify-content: center;
}
.ng-header .ng-header-right {
  grid-column: 3;
  justify-self: end;
  justify-content: flex-end;
}
.ng-header .ng-header-nav {
  display: flex;
  align-items: center;
  gap: var(--ng-header-gap);
  /* LINK STANDARD */
  /* ICON / OVERLAY TOGGLE */
  /* MENU TRIGGER (avatar / custom) */
}
.ng-header .ng-header-nav > *:not(.ng-btn):not([class*=ng-btn-]) {
  text-decoration: none;
  color: inherit;
}
.ng-header .ng-header-nav > a:not(.ng-overlay-toggle):not(.ng-header-menu-trigger):not(.ng-btn):not([class*=ng-btn-]) {
  padding: 0.35rem 0.6rem;
  border-radius: var(--ng-radius-sm);
  transition: background 0.12s ease;
}
.ng-header .ng-header-nav > a:not(.ng-overlay-toggle):not(.ng-header-menu-trigger):not(.ng-btn):not([class*=ng-btn-]):hover {
  background: rgba(var(--ng-hover-tint), 0.06);
}
.ng-header .ng-header-nav > .ng-overlay-toggle {
  border-radius: var(--ng-radius-md);
  transition: background 0.12s ease;
}
.ng-header .ng-header-nav > .ng-overlay-toggle:hover {
  background: rgba(var(--ng-hover-tint), 0.06);
}
.ng-header .ng-header-nav .ng-header-menu-trigger > * {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ng-header .ng-header-nav .ng-header-menu-trigger:hover > * {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}
.ng-header.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.ng-header.sticky-header ~ .ng-layout, .ng-header.sticky-header ~ .ng-content, .ng-header.sticky-header ~ .ng-container {
  margin-top: calc(var(--ng-header-height, 64px) + 20px);
}
.ng-header .active {
  color: var(--ng-header-active-link);
}

.ng-header-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ng-header-color-brand);
}

/* =====================================================
HEADER MENU
===================================================== */
.ng-header-menu {
  position: relative;
  display: flex;
  align-items: center;
}
.ng-header-menu.align-left .ng-header-menu-panel {
  left: 0;
}
.ng-header-menu.align-center .ng-header-menu-panel {
  left: 50%;
  transform: translateX(-50%) translateY(6px);
}
.ng-header-menu.align-right .ng-header-menu-panel {
  right: 0;
}
.ng-header-menu.align-center.is-open .ng-header-menu-panel {
  transform: translateX(-50%) translateY(0);
}

/* =====================================================
TRIGGER HEADER MENU
===================================================== */
.ng-header-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* =====================================================
MENU PANEL
===================================================== */
.ng-header-menu-panel {
  /* ===== Scoped Variables ===== */
  --ng-header-menu-bg: var(--ng-surface);
  --ng-header-menu-color: var(--ng-text);
  --ng-header-menu-border: var(--ng-border-width, 1px) solid #ccc;
  /* radius: default lg via fallback-at-use (non dichiarato → :root cascata) */
  --ng-header-menu-shadow:0 12px 30px rgba(15,23,42,.10);
  --ng-header-menu-padding-y:.35rem;
  --ng-header-menu-item-padding-x:2rem;
  --ng-header-menu-item-padding-y:.75rem;
  --ng-header-menu-hover-bg:rgba(var(--ng-hover-tint), .075);
  --ng-header-menu-divider:rgba(var(--ng-hover-tint), .08);
  position: absolute;
  top: calc(100% + 0.35rem);
  min-width: 220px;
  background: var(--ng-header-menu-bg);
  border: var(--ng-header-menu-border);
  color: var(--ng-header-menu-color);
  border-radius: var(--ng-header-menu-radius, var(--ng-radius-lg));
  box-shadow: var(--ng-header-menu-shadow);
  padding: var(--ng-header-menu-padding-y) 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ng-header-menu.is-open .ng-header-menu-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =====================================================
HEADER PANEL
===================================================== */
.ng-header-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 70px;
  padding: 20px 40px;
  white-space: nowrap;
  justify-content: center;
  background: var(--ng-surface-sunken, #f2f2f2);
}
.ng-header-panel h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
.ng-header-panel small,
.ng-header-panel .ng-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.ng-header-panel small {
  font-size: 0.75rem;
}

/* =====================================================
HEADER MENU ITEMS
===================================================== */
.ng-header-menu-panel a,
.ng-header-menu-panel button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: var(--ng-header-menu-item-padding-y) var(--ng-header-menu-item-padding-x);
  font-size: 0.9rem;
  background: transparent;
  border: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

.ng-header-menu-panel a:hover,
.ng-header-menu-panel button:hover {
  background: var(--ng-header-menu-hover-bg);
}

.ng-header-menu-panel .ng-header-item-section {
  margin-top: calc(var(--ng-header-menu-item-padding-y) * 2);
  margin-bottom: calc(var(--ng-header-menu-item-padding-y) * 2);
}

.ng-header-divider {
  height: 1px;
  background: var(--ng-header-menu-divider);
  margin: 10px 0;
}

.ng-header-menu-panel .has-end > .ng-badge:last-child {
  margin-left: auto;
}

@media (max-width: 768px) {
  .ng-overlay .ng-header-menu {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .ng-overlay .ng-header-menu .ng-header-menu-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .ng-overlay .ng-header-menu .ng-header-menu-panel {
    position: static;
    transform: translateY(-6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .ng-overlay .ng-header-menu .ng-header-menu-panel a,
  .ng-overlay .ng-header-menu .ng-header-menu-panel button {
    padding: 0.75rem var(--ng-gap, 1rem);
  }
  .ng-overlay .ng-header-menu.is-open .ng-header-menu-panel {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }
  .ng-overlay .ng-overlay-panel .ng-overlay-body a,
  .ng-overlay .ng-overlay-panel .ng-overlay-body button {
    padding: 0.75rem var(--ng-gap, 1rem);
  }
  .ng-header-nav > [data-on-mobile] {
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .ng-header-nav > [data-on-mobile] {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }
  .ng-overlay-panel .ng-overlay-body > [data-on-mobile] {
    margin-inline: calc(var(--ng-gap, 1rem) * -1);
  }
}
@media (max-width: 767px) {
  .ng-header .ng-header-inner {
    grid-template-columns: auto 1fr auto;
  }
}
@media (max-width: 1023px) {
  .ng-header .ng-overlay-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* ===
NexiGrid — Input Group
---
Wrapper per input + addons (icone, testo, bottoni) prepend/append, multi-addon,
sizes ereditati. Focus-within propagato all'intero gruppo. Stato disabled
coerente. Riusa token --ng-input-*. Pattern derivato da .ng-btn-group.
Password toggle: .ng-password-toggle (occhio mostra/nascondi, JS in ng_form.js).
---
Version: 1.1 · Status: stable
=== */
.ng-input-group {
  /* ===== Scoped Variables ===== */
  --ng-ig-addon-bg: var(--ng-surface-sunken, #f5f5f5);
  --ng-ig-addon-color: var(--ng-text-muted, #555);
  --ng-ig-addon-padding-x: var(--ng-input-padding-x, .75rem);
  display: inline-flex;
  align-items: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  /* Tutti i figli condividono lo stesso "rounded box" complessivo:
     - mezzi spigoli a 0
     - solo primo a sx e ultimo a dx tengono il radius
     - margin negativo per collassare i border duplicati */
  /* L'input flessibile occupa lo spazio rimanente */
  /* Hover/focus portano il figlio sopra per non far tagliare il bordo */
}
.ng-input-group > .ng-input,
.ng-input-group > .ng-select,
.ng-input-group > .ng-textarea,
.ng-input-group > .ng-btn,
.ng-input-group > .ng-input-addon {
  border-radius: 0;
  margin-inline-start: -1px;
  position: relative; /* per portare in alto su focus/hover */
}
.ng-input-group > *:first-child {
  margin-inline-start: 0;
  border-top-left-radius: var(--ng-input-radius);
  border-bottom-left-radius: var(--ng-input-radius);
}
.ng-input-group > *:last-child {
  border-top-right-radius: var(--ng-input-radius);
  border-bottom-right-radius: var(--ng-input-radius);
}
.ng-input-group > .ng-input,
.ng-input-group > .ng-select,
.ng-input-group > .ng-textarea {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.ng-input-group > .ng-input:hover,
.ng-input-group > .ng-input:focus,
.ng-input-group > .ng-input:focus-visible,
.ng-input-group > .ng-select:hover,
.ng-input-group > .ng-select:focus,
.ng-input-group > .ng-select:focus-visible,
.ng-input-group > .ng-btn:hover,
.ng-input-group > .ng-btn:focus {
  z-index: 2;
}

/* ============================================================
ADDON statico (icona / testo)
============================================================ */
.ng-input-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding-block: var(--ng-input-padding-y);
  padding-inline: var(--ng-ig-addon-padding-x);
  border: 1px solid var(--ng-input-color-border);
  background: var(--ng-ig-addon-bg);
  color: var(--ng-ig-addon-color);
  font-size: var(--ng-input-font-size);
  line-height: var(--ng-input-line-height);
  white-space: nowrap;
  user-select: none;
  /* Icone Phosphor allineate al baseline tipografico dell'input */
}
.ng-input-addon > i,
.ng-input-addon > svg {
  font-size: 1.1em;
  line-height: 1;
}
.ng-input-addon.is-disabled, .ng-input-group.is-disabled .ng-input-addon {
  background: var(--ng-input-disabled-bg);
  color: var(--ng-input-disabled-color);
}

/* Variante: addon "trasparente" (icona dentro fondo input, no fill) */
.ng-input-addon-ghost {
  background: var(--ng-input-bg);
}

/* ============================================================
FOCUS-WITHIN: ring sull'intero gruppo
============================================================ */
.ng-input-group:focus-within {
  /* Ring complessivo sul gruppo (no doppio shadow per ogni figlio) */
  box-shadow: var(--ng-input-focus-ring);
  border-radius: var(--ng-input-radius);
}
.ng-input-group:focus-within > .ng-input,
.ng-input-group:focus-within > .ng-select,
.ng-input-group:focus-within > .ng-input-addon {
  border-color: var(--ng-input-focus-border);
}

/* ============================================================
DISABLED PROPAGATO (input disabilitato → addons coerenti)
============================================================ */
.ng-input-group:has(> .ng-input:disabled) > .ng-input-addon,
.ng-input-group:has(> .ng-select:disabled) > .ng-input-addon,
.ng-input-group:has(> .ng-textarea:disabled) > .ng-input-addon,
.ng-input-group.is-disabled > .ng-input-addon {
  background: var(--ng-input-disabled-bg);
  color: var(--ng-input-disabled-color);
}

/* ============================================================
SIZES (mappano sui figli .ng-input / .ng-input-addon / .ng-btn)
============================================================ */
.ng-input-group-sm {
  --ng-ig-addon-padding-x: .6rem;
}
.ng-input-group-sm > .ng-input,
.ng-input-group-sm > .ng-select,
.ng-input-group-sm > .ng-textarea,
.ng-input-group-sm > .ng-input-addon {
  --ng-input-padding-y: .35rem;
  --ng-input-padding-x: .6rem;
  font-size: 0.875rem;
}
.ng-input-group-sm > .ng-btn {
  padding-block: 0.35rem;
  padding-inline: 0.7rem;
  font-size: 0.875rem;
}

.ng-input-group-lg {
  --ng-ig-addon-padding-x: 1rem;
}
.ng-input-group-lg > .ng-input,
.ng-input-group-lg > .ng-select,
.ng-input-group-lg > .ng-textarea,
.ng-input-group-lg > .ng-input-addon {
  --ng-input-padding-y: .7rem;
  --ng-input-padding-x: 1rem;
  font-size: 1.05rem;
}
.ng-input-group-lg > .ng-btn {
  padding-block: 0.7rem;
  padding-inline: 1.1rem;
  font-size: 1.05rem;
}

/* ============================================================
TEXTAREA dentro un input-group: forza align top per non sembrare disallineata
============================================================ */
.ng-input-group:has(> .ng-textarea) {
  align-items: stretch;
}
.ng-input-group:has(> .ng-textarea) > .ng-input-addon {
  align-items: flex-start;
  padding-block-start: var(--ng-input-padding-y);
}

/* ============================================================
PASSWORD TOGGLE — occhio mostra/nascondi password (JS in ng_form.js).
È un .ng-input-addon (di norma -ghost) su <button>: il group dà già
border, radius, sizes, focus-within e disabled; qui solo il reset del
bottone nativo e gli stati hover/attivo.
============================================================ */
.ng-password-toggle {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
}
.ng-password-toggle:hover, .ng-password-toggle.is-active {
  color: var(--ng-input-color, var(--ng-text));
}
.ng-password-toggle:focus-visible {
  outline: none;
  z-index: 2;
  border-color: var(--ng-input-focus-border);
}

/* ==========================================================
NexiGrid — List
----------------------------------------------------------
Liste e list-item (media/content/action), meta-content. Varianti selectable/divided/bordered/flush/hover/clickable/striped/compact/horizontal/tags/tasks.
----------------------------------------------------------
Version: 1.1 · Status: stable
========================================================== */
.ng-list {
  /* ===== Scoped Variables ===== */
  --ng-list-bg: var(--ng-surface);
  --ng-list-color: inherit;
  --ng-list-border-color: var(--ng-color-border-light);
  --ng-list-border-width: var(--ng-border-width, 1px);
  /* radius: default md via fallback-at-use (non dichiarato → :root cascata) */
  --ng-list-item-padding-y: .75rem;
  --ng-list-item-padding-x: 1rem;
  --ng-list-item-gap: .75rem;
  --ng-list-item-padding: .75rem;
  --ng-list-hover-bg: rgba(var(--ng-hover-tint), .04);
  --ng-list-striped-bg: rgba(var(--ng-hover-tint), .02);
  /* selected: grigio chiaro OPACO (non condizionato dallo sfondo sotto) */
  --ng-list-selected-bg: color-mix(in srgb, rgb(var(--ng-hover-tint)) 6%, var(--ng-surface));
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--ng-list-bg);
  color: var(--ng-list-color);
  border-radius: var(--ng-list-radius, var(--ng-radius-md));
  /* ==========================================================
  ITEM
  ========================================================== */
  /* Active state */
  /* Divider */
  /* Bordered */
  /* Flush */
  /* Hover */
  /* Clickable */
  /* Striped */
  /* Compact */
  /* Horizontal */
  /* Horizontal Tag style */
  /* ==========================================================
  Task / Activity List
  ========================================================== */
  /* ==========================================================
  Shared Structure Blocks
  ========================================================== */
}
.ng-list .ng-list-item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--ng-list-item-gap);
  padding: var(--ng-list-item-padding);
}
.ng-list .ng-list-item .ng-list-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.ng-list .ng-list-item .ng-list-action a {
  display: inline-flex;
  align-items: center;
}
.ng-list.selectable .ng-list-item.is-active {
  background: var(--ng-list-selected-bg);
  font-weight: 600;
}
.ng-list.divided .ng-list-item + .ng-list-item {
  border-top: var(--ng-list-border-width) solid var(--ng-list-border-color);
}
.ng-list.bordered {
  border: var(--ng-list-border-width) solid var(--ng-list-border-color);
}
.ng-list.flush {
  border-radius: 0;
}
.ng-list.flush li {
  padding-left: 0;
}
.ng-list.hover .ng-list-item:hover {
  background: var(--ng-list-hover-bg);
}
.ng-list.clickable .ng-list-item {
  cursor: pointer;
}
.ng-list.striped .ng-list-item:nth-child(even) {
  background: var(--ng-list-striped-bg);
}
.ng-list.compact {
  --ng-list-item-padding-y: .5rem;
  --ng-list-item-padding-x: .75rem;
}
.ng-list.horizontal {
  display: flex;
  flex-wrap: wrap;
}
.ng-list.horizontal .ng-list-item {
  border: 0;
}
.ng-list.horizontal.tags {
  gap: 0.5rem;
  border: 0;
  background: transparent;
}
.ng-list.horizontal.tags .ng-list-item {
  padding: 0.35rem 0.75rem;
  border-radius: var(--ng-radius-pill);
  background: rgba(var(--ng-hover-tint), 0.06);
  font-size: 0.875rem;
  border: 0;
}
.ng-list.horizontal.tags .ng-list-item:hover {
  background: rgba(var(--ng-hover-tint), 0.12);
}
.ng-list.tasks {
  --ng-task-border-width: 4px;
  --ng-task-border-color: var(--ng-primary-bg, #4a2a86);
  --ng-task-checkbox-gap: .75rem;
}
.ng-list.tasks .ng-list-item {
  position: relative;
  align-items: center;
  padding-left: 1.25rem;
}
.ng-list.tasks .ng-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: var(--ng-task-border-width);
  border-radius: 2px;
  background: var(--ng-task-border-color);
}
.ng-list.tasks .ng-task-check {
  flex: 0 0 auto;
  margin-right: var(--ng-task-checkbox-gap);
  margin-top: 0.15rem;
}
.ng-list.tasks .ng-task-content {
  flex: 1 1 auto;
  min-width: 0;
}
.ng-list.tasks .ng-task-title {
  font-weight: 600;
}
.ng-list.tasks .ng-task-meta {
  font-size: 0.85rem;
  opacity: 0.65;
  margin-top: 0.25rem;
}
.ng-list.tasks .ng-task-action {
  flex: 0 0 auto;
  margin-left: auto;
}
.ng-list .ng-list-media {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.ng-list .ng-list-content {
  flex: 1 1 auto;
  min-width: 0;
}
.ng-list .ng-list-title {
  font-weight: 600;
}
.ng-list .ng-list-text {
  opacity: 0.7;
  font-size: 0.875rem;
}

/* ==========================================================
NG LIST META CONTENT (indipendente)
========================================================== */
.ng-list-meta-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* ITEM */
  /* LEFT (avatar / icon / badge) */
  /* CONTENT */
  /* RIGHT (badge / icon) */
}
.ng-list-meta-content .ng-meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
}
.ng-list-meta-content .ng-meta-start {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.ng-list-meta-content .ng-meta-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ng-list-meta-content .ng-meta-title {
  font-weight: 600;
  line-height: 1.2;
}
.ng-list-meta-content .ng-meta-text {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 2px;
}
.ng-list-meta-content .ng-meta-end {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.ng-list.tasks .ng-list-item.primary::before {
  background: var(--ng-primary-bg, #4a2a86);
}

.ng-list.tasks .ng-list-item.secondary::before {
  background: var(--ng-secondary-bg, #7d2342);
}

.ng-list.tasks .ng-list-item.success::before {
  background: var(--ng-success-bg, #1da571);
}

.ng-list.tasks .ng-list-item.info::before {
  background: var(--ng-info-bg, #119bdc);
}

.ng-list.tasks .ng-list-item.warning::before {
  background: var(--ng-warning-bg, #dd7900);
}

.ng-list.tasks .ng-list-item.danger::before {
  background: var(--ng-danger-bg, #f2415c);
}

.ng-list.tasks .ng-list-item.mute::before {
  background: var(--ng-mute-bg, #c8c8c8);
}

.ng-list.tasks .ng-list-item.blue::before {
  background: var(--ng-blue-bg, #3b82f6);
}

.ng-list.tasks .ng-list-item.blue-sky::before {
  background: var(--ng-blue-sky-bg, #6cc8ff);
}

.ng-list.tasks .ng-list-item.green::before {
  background: var(--ng-green-bg, #2e7d32);
}

.ng-list.tasks .ng-list-item.lime::before {
  background: var(--ng-lime-bg, #9edc00);
}

.ng-list.tasks .ng-list-item.aguagreen::before {
  background: var(--ng-aguagreen-bg, #0e9c7e);
}

.ng-list.tasks .ng-list-item.indigo::before {
  background: var(--ng-indigo-bg, #4f46e5);
}

.ng-list.tasks .ng-list-item.purple::before {
  background: var(--ng-purple-bg, #a027f0);
}

.ng-list.tasks .ng-list-item.purple-heart::before {
  background: var(--ng-purple-heart-bg, #b23a8a);
}

.ng-list.tasks .ng-list-item.cyan::before {
  background: var(--ng-cyan-bg, #009dd9);
}

.ng-list.tasks .ng-list-item.magenta::before {
  background: var(--ng-magenta-bg, #d4007f);
}

.ng-list.tasks .ng-list-item.yellow::before {
  background: var(--ng-yellow-bg, #ffd200);
}

.ng-list.tasks .ng-list-item.clight::before {
  background: var(--ng-clight-bg, #f0f0f0);
}

.ng-list.tasks .ng-list-item.cdark::before {
  background: var(--ng-cdark-bg, #424242);
}

/* ==========================================================
NexiGrid — Modal
----------------------------------------------------------
Finestra centrale con backdrop e focus trap. Panel con
header/body/footer, animazioni (fade/slide/zoom/rotate),
alignment, fullscreen, no-backdrop, dynamic. JS ng_modal.js.
Signature anti-BS5: backdrop sfocato + brand header band
(.ng-modal-<color>, header colorato dal token brand).
----------------------------------------------------------
Version: 1.1 · Status: stable
========================================================== */
.ng-modal {
  --ng-modal-width: auto;
  --ng-modal-height: auto;
  --ng-modal-max-width: 640px;
  --ng-modal-gap: 1rem;
  /* radius: default xl via fallback-at-use (non dichiarato → :root cascata) */
  --ng-modal-background: var(--ng-surface);
  --ng-modal-shadow: var(--ng-tab-box-shadow-main);
  /* Signature: backdrop sfocato (premium). Disattiva con --ng-modal-backdrop-blur: 0. */
  --ng-modal-backdrop-blur: 4px;
  --ng-modal-padding-header-footer: 1.25rem 1.875rem;
  --ng-modal-header-border-bottom: 1px dashed var(--ng-color-border-light);
  --ng-modal-footer-border-top: 1px dashed var(--ng-color-border-light);
  --ng-modal-padding-body: 1.25rem 1.875rem;
  --ng-modal-body-margin: 0;
  --ng-modal-z: var(--ng-z-modal, 750);
  position: fixed;
  inset: 0;
  z-index: var(--ng-modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow-y: auto;
}
.ng-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ng-backdrop, rgba(var(--ng-hover-tint), 0.2));
  -webkit-backdrop-filter: blur(var(--ng-modal-backdrop-blur, 4px));
  backdrop-filter: blur(var(--ng-modal-backdrop-blur, 4px));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.ng-modal:not(.anim-fade) .ng-modal-panel {
  opacity: 0;
}
.ng-modal.anim-fade .ng-modal-panel {
  transform: none;
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.ng-modal.anim-classic .ng-modal-panel {
  transform: translateY(10px) scale(0.96);
}
.ng-modal.anim-slide-top .ng-modal-panel {
  transform: translateY(-140px);
}
.ng-modal.anim-slide-bottom .ng-modal-panel {
  transform: translateY(140px);
}
.ng-modal.anim-slide-left .ng-modal-panel {
  transform: translateX(-140px);
}
.ng-modal.anim-slide-right .ng-modal-panel {
  transform: translateX(140px);
}
.ng-modal.anim-zoom .ng-modal-panel {
  transform: scale(0.75);
}
.ng-modal.anim-clockwise-light .ng-modal-panel {
  transform: rotate(-12deg) scale(0.98);
}
.ng-modal.anim-anticlockwise-light .ng-modal-panel {
  transform: rotate(12deg) scale(0.98);
}
.ng-modal.anim-clockwise-strong .ng-modal-panel {
  transform: rotate(-180deg) scale(0.98);
}
.ng-modal.anim-anticlockwise-strong .ng-modal-panel {
  transform: rotate(180deg) scale(0.98);
}
.ng-modal .ng-modal-panel {
  position: relative;
  pointer-events: none;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: var(--ng-modal-width);
  height: var(--ng-modal-height);
  max-width: var(--ng-modal-max-width);
  background: var(--ng-modal-background);
  border-radius: var(--ng-modal-radius, var(--ng-radius-xl));
  box-shadow: var(--ng-modal-shadow);
  opacity: 0;
  transition: all 0.25s ease;
}
.ng-modal.is-open {
  pointer-events: auto;
}
.ng-modal.is-open::before {
  opacity: 1;
  pointer-events: auto;
}
.ng-modal.is-open .ng-modal-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ng-modal .ng-modal-header,
.ng-modal .ng-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ng-modal-gap);
  padding: var(--ng-modal-padding-header-footer);
}
.ng-modal .ng-modal-header {
  border-bottom: var(--ng-modal-header-border-bottom);
}
.ng-modal .ng-modal-footer {
  border-top: var(--ng-modal-footer-border-top);
}
.ng-modal .ng-modal-body {
  margin: var(--ng-modal-body-margin);
  padding: var(--ng-modal-padding-body);
}
.ng-modal .ng-modal-body > * {
  margin: 0;
  line-height: 1;
  padding: 0;
}
.ng-modal .ng-modal-body p {
  line-height: 1.7;
}
.ng-modal .ng-left,
.ng-modal .ng-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ng-modal .ng-left > *,
.ng-modal .ng-right > * {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.ng-modal .ng-right {
  margin-left: auto;
}
.ng-modal .ng-modal-close {
  cursor: pointer;
}
.ng-modal.top-center {
  align-items: flex-start;
}
.ng-modal.bottom-center {
  align-items: flex-end;
}
.ng-modal.left-center {
  justify-content: flex-start;
}
.ng-modal.right-center {
  justify-content: flex-end;
}
.ng-modal.is-full .ng-modal-panel {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
}
.ng-modal.no-backdrop::before {
  display: none;
}
.ng-modal.is-dynamic {
  cursor: pointer;
}
.ng-modal.is-dynamic .ng-modal-panel {
  cursor: auto;
}

/* ==========================================================
SIGNATURE — Brand header band (anti-BS5)
----------------------------------------------------------
.ng-modal-<color> dipinge l'header col colore brand governato (testo in
contrasto), header come "bandiera": niente border-bottom dashed, gli angoli
alti seguono il radius del panel. Body/footer restano neutri. 0 hardcode,
colori da $ng-colors (token L1/L2, override via --ng-<color>-bg).
========================================================== */
.ng-modal-primary .ng-modal-header {
  background: var(--ng-primary-bg, #4a2a86);
  color: var(--ng-primary-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-secondary .ng-modal-header {
  background: var(--ng-secondary-bg, #7d2342);
  color: var(--ng-secondary-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-success .ng-modal-header {
  background: var(--ng-success-bg, #1da571);
  color: var(--ng-success-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-info .ng-modal-header {
  background: var(--ng-info-bg, #119bdc);
  color: var(--ng-info-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-warning .ng-modal-header {
  background: var(--ng-warning-bg, #dd7900);
  color: var(--ng-warning-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-danger .ng-modal-header {
  background: var(--ng-danger-bg, #f2415c);
  color: var(--ng-danger-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-mute .ng-modal-header {
  background: var(--ng-mute-bg, #c8c8c8);
  color: var(--ng-mute-text, #646464);
  border-bottom: 0;
}

.ng-modal-blue .ng-modal-header {
  background: var(--ng-blue-bg, #3b82f6);
  color: var(--ng-blue-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-blue-sky .ng-modal-header {
  background: var(--ng-blue-sky-bg, #6cc8ff);
  color: var(--ng-blue-sky-text, #07456e);
  border-bottom: 0;
}

.ng-modal-green .ng-modal-header {
  background: var(--ng-green-bg, #2e7d32);
  color: var(--ng-green-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-lime .ng-modal-header {
  background: var(--ng-lime-bg, #9edc00);
  color: var(--ng-lime-text, #476f11);
  border-bottom: 0;
}

.ng-modal-aguagreen .ng-modal-header {
  background: var(--ng-aguagreen-bg, #0e9c7e);
  color: var(--ng-aguagreen-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-indigo .ng-modal-header {
  background: var(--ng-indigo-bg, #4f46e5);
  color: var(--ng-indigo-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-purple .ng-modal-header {
  background: var(--ng-purple-bg, #a027f0);
  color: var(--ng-purple-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-purple-heart .ng-modal-header {
  background: var(--ng-purple-heart-bg, #b23a8a);
  color: var(--ng-purple-heart-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-cyan .ng-modal-header {
  background: var(--ng-cyan-bg, #009dd9);
  color: var(--ng-cyan-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-magenta .ng-modal-header {
  background: var(--ng-magenta-bg, #d4007f);
  color: var(--ng-magenta-text, #ffffff);
  border-bottom: 0;
}

.ng-modal-yellow .ng-modal-header {
  background: var(--ng-yellow-bg, #ffd200);
  color: var(--ng-yellow-text, #8a6800);
  border-bottom: 0;
}

.ng-modal-clight .ng-modal-header {
  background: var(--ng-clight-bg, #f0f0f0);
  color: var(--ng-clight-text, #1f2937);
  border-bottom: 0;
}

.ng-modal-cdark .ng-modal-header {
  background: var(--ng-cdark-bg, #424242);
  color: var(--ng-cdark-text, #f0f0f0);
  border-bottom: 0;
}

/* ==========================================================
NexiGrid — Overlay (Drawer / Offcanvas)
----------------------------------------------------------
Struttura: .ng-overlay (backdrop) > .ng-overlay-panel >
header/body/footer. Varianti right (drawer da destra), form.
Stato is-active (aperto). Toggle hamburger .ng-overlay-toggle.
----------------------------------------------------------
Version: 1.0.1 · Status: stable
========================================================== */
.ng-overlay {
  /* ===== Token scoped (sovrascrivibili dal theme) ===== */
  --ng-overlay-width: 320px;
  --ng-overlay-duration: .25s;
  --ng-overlay-bg: var(--ng-backdrop);
  --ng-overlay-panel-bg: var(--ng-surface);
  --ng-overlay-divider: rgba(var(--ng-hover-tint), .08);
  /* ===== Backdrop ===== */
  position: fixed;
  inset: 0;
  z-index: var(--ng-z-overlay, 700);
  background: var(--ng-overlay-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ng-overlay-duration) ease, visibility 0s linear var(--ng-overlay-duration);
  /* ===== Panel (il drawer vero e proprio) ===== */
  /* ===== Header (fisso in cima al panel) ===== */
  /* ===== Body (scrollabile) ===== */
  /* ===== Footer (opzionale, fisso in fondo) ===== */
}
.ng-overlay .ng-overlay-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  max-height: 100vh;
  overflow-y: auto;
  width: var(--ng-overlay-width);
  background: var(--ng-overlay-panel-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--ng-overlay-duration) ease;
}
.ng-overlay .ng-overlay-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ng-overlay-divider);
}
.ng-overlay .ng-overlay-body {
  flex: 1;
  height: 100%;
  overflow-y: auto;
}
.ng-overlay .ng-overlay-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--ng-overlay-divider);
}

/* ===== Variant: form ===== */
.ng-overlay.form .ng-overlay-panel {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* ==========================================================
STATO ATTIVO / CLOSE
----------------------------------------------------------
Con is-active (da JS): backdrop opacity 1, visibility immediata,
panel scorre nella viewport.
========================================================== */
.ng-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--ng-overlay-duration) ease, visibility 0s linear 0s;
}
.ng-overlay.is-active .ng-overlay-panel {
  transform: translateX(0);
}

.ng-overlay-close {
  cursor: pointer;
  background: transparent;
}

/* ==========================================================
VARIANTE DESTRA
========================================================== */
.ng-overlay.right .ng-overlay-panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
}
.ng-overlay.right.is-active .ng-overlay-panel {
  transform: translateX(0);
}

/* ==========================================================
OVERLAY TOGGLE — Bottone hamburger
----------------------------------------------------------
<button class="ng-overlay-toggle"><span></span></button>
::before = linea sopra · span = centrale · ::after = sotto
========================================================== */
.ng-overlay-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
}

.ng-toggle-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: var(--ng-border-width, 1px) solid currentColor;
  border-radius: var(--ng-radius-sm);
  background: transparent;
  cursor: pointer;
}
.ng-toggle-box i {
  font-size: 18px;
}

.ng-toggle-square {
  border-radius: var(--ng-radius-sm);
}

.ng-toggle-circle {
  border-radius: 50%;
}

.ng-toggle-box.burger {
  position: relative;
}
.ng-toggle-box.burger::before, .ng-toggle-box.burger::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  background: currentColor;
  top: 50%;
  transform: translateY(-50%);
}
.ng-toggle-box.burger::before {
  transform: translateY(-6px);
}
.ng-toggle-box.burger::after {
  transform: translateY(6px);
}
.ng-toggle-box.burger::before {
  box-shadow: 0 6px 0 currentColor;
}

/* ==========================================================
HEADER ITEMS DENTRO OVERLAY
========================================================== */
.ng-overlay-body {
  display: flex;
  flex-direction: column;
  gap: var(--ng-header-gap);
  /* SOLO figli diretti: gli item nav mobile (spostati qui da ng_header) vanno
     full-width, ma i bottoni/link di componenti ANNIDATI (select-orion clear,
     table expander, dropdown, ecc.) NON devono essere stirati a tutta larghezza. */
}
.ng-overlay-body > a,
.ng-overlay-body > button {
  display: block;
  width: 100%;
}

/* Mobile */
.ng-overlay-toggle[data-ng-mobile] {
  display: none;
}

@media (max-width: 768px) {
  .ng-overlay-toggle[data-ng-mobile] {
    display: inline-flex;
  }
}
/* ==========================================================
NexiGrid — Page Loader
----------------------------------------------------------
Overlay fullscreen di caricamento (fixed, inset:0) con blur.
Varianti dark e is-hidden (per nascondere quando pronto).
Var scoped overridabili.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-page-loader {
  /* ===== Scoped Variables ===== */
  --ng-pl-bg: rgba(255,255,255,.85);
  --ng-pl-color: var(--ng-text);
  --ng-pl-blur: 2px;
  --ng-pl-z: 9999;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ng-pl-bg);
  color: var(--ng-pl-color);
  backdrop-filter: blur(var(--ng-pl-blur));
  z-index: var(--ng-pl-z);
  /* Stato iniziale visibile */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Dark mode — classe manuale + tema globale */
.ng-page-loader.dark,
:root[data-theme=dark] .ng-page-loader {
  --ng-pl-bg: rgba(0, 0, 0, .65);
  --ng-pl-color: #fff;
}

/* Nascondi quando pronto */
.ng-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ==========================================================
NexiGrid — Pagination
----------------------------------------------------------
Paginazione a struttura stabile (slot fissi per evitare
layout shift). Page list, page-size select, elementi page/
prev/next/first/last/ellipsis, stati active/disabled, varianti
allineamento e size. SCSS-only.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-pagination {
  /* ── CONFIG ───────────────────────────────────────────── */
  --ng-pagination-gap: .35rem;
  --ng-pagination-margin-y: 1.3rem 0;
  /* radius: default sm via fallback-at-use (non dichiarato → :root cascata) */
  --ng-pagination-border: rgba(var(--ng-hover-tint), .15);
  --ng-pagination-bg: transparent;
  --ng-pagination-hover: rgba(var(--ng-hover-tint), .05);
  --ng-pagination-active-bg: rgba(var(--ng-hover-tint), .08);
  --ng-pagination-active-color: currentColor;
  --ng-pagination-size: 34px;
  --ng-pagination-font-size: .85rem;
  /* ── LAYOUT ROOT ─────────────────────────────────────── */
  display: flex;
  align-items: center;
  gap: var(--ng-pagination-gap);
  margin: var(--ng-pagination-margin-y);
  font-size: var(--ng-pagination-font-size);
}

/* ===== Page list (core stability: larghezza fissa → niente salti) ===== */
.ng-page-list {
  display: flex;
  align-items: center;
  gap: var(--ng-pagination-gap);
  min-width: calc(3 * var(--ng-pagination-size));
  justify-content: center;
}

/* ===== Page size (select) ===== */
.ng-page-size {
  width: auto;
  min-width: 70px;
}

/* ===== Page element (tutti stessa dimensione → griglia stabile) ===== */
.ng-page,
.ng-page-prev,
.ng-page-next,
.ng-page-first,
.ng-page-last,
.ng-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ng-pagination-size);
  height: var(--ng-pagination-size);
  padding: 0 0.55rem;
  border: var(--ng-border-width, 1px) solid var(--ng-pagination-border);
  border-radius: var(--ng-pagination-radius, var(--ng-radius-sm));
  background: var(--ng-pagination-bg);
  color: inherit;
  text-decoration: none;
  user-select: none;
  transition: background 0.15s ease;
}

/* ===== Hover ===== */
.ng-page:hover,
.ng-page-prev:hover,
.ng-page-next:hover,
.ng-page-first:hover,
.ng-page-last:hover {
  background: var(--ng-pagination-hover);
}

/* ===== States ===== */
/* attivo */
.ng-page.is-active {
  background: var(--ng-pagination-active-bg);
  color: var(--ng-pagination-active-color);
  font-weight: 600;
  pointer-events: none;
}

/* disabilitato */
.ng-page.is-disabled,
.ng-page-prev.is-disabled,
.ng-page-next.is-disabled,
.ng-page-first.is-disabled,
.ng-page-last.is-disabled {
  pointer-events: none;
  opacity: 0.45;
}

.ng-page.is-page-empty {
  pointer-events: none;
  color: rgba(var(--ng-hover-tint), 0.35);
}
.ng-page.is-page-empty::before {
  content: "–";
}

/* ===== Ellipsis (sempre presenti → cambia solo visibilità) ===== */
.ng-ellipsis {
  cursor: default;
  opacity: 0.6;
}

.ng-ellipsis.is-hidden {
  opacity: 0.6;
  pointer-events: none;
}

/* ===== Variants ===== */
.ng-pagination--left {
  justify-content: flex-start;
}

.ng-pagination--center {
  justify-content: center;
}

.ng-pagination--right {
  justify-content: flex-end;
}

.ng-pagination-sm {
  --ng-pagination-size: 26px;
  --ng-pagination-font-size: .75rem;
}

.ng-pagination-lg {
  --ng-pagination-size: 42px;
  --ng-pagination-font-size: .95rem;
}

/* ==========================================================
NexiGrid — Panel
----------------------------------------------------------
Container strutturale/funzionale per raggruppare contenuti in sezioni
(settings, dashboard, filtri). Opposto della card: piatto, bordato, denso,
niente shadow/hover-lift. Sub: head/body/foot.
Varianti: brand header band (.ng-panel-<color>) · .ng-panel-flat · size sm/lg ·
collassabile .ng-panel-collapsible (riusa ng_toggle.js + .ng-collapse, 0 JS nuovo).
Colori da $ng-colors (token L1/L2). Radius md via fallback-at-use.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-panel {
  /* ===== Scoped Variables ===== */
  --ng-panel-bg: var(--ng-surface);
  --ng-panel-border-color: var(--ng-color-border);
  --ng-panel-head-bg: transparent;
  --ng-panel-head-color: inherit;
  /* radius: default md via fallback-at-use (non dichiarato → :root cascata) */
  --ng-panel-pad: 1rem 1.25rem;
  --ng-panel-gap: 1rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ng-panel-bg);
  border: var(--ng-border-width, 1px) solid var(--ng-panel-border-color);
  border-radius: var(--ng-panel-radius, var(--ng-radius-md));
  overflow: hidden; /* clip della head band agli angoli arrotondati */
  /* ===== Head ===== */
  /* ===== Body ===== */
  /* ===== Foot ===== */
}
.ng-panel .ng-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ng-panel-gap);
  padding: var(--ng-panel-pad);
  background: var(--ng-panel-head-bg);
  color: var(--ng-panel-head-color);
  border-bottom: var(--ng-border-width, 1px) solid var(--ng-panel-border-color);
  font-weight: 600;
}
.ng-panel .ng-panel-head > h1, .ng-panel .ng-panel-head > h2, .ng-panel .ng-panel-head > h3, .ng-panel .ng-panel-head > h4, .ng-panel .ng-panel-head > h5, .ng-panel .ng-panel-head > h6,
.ng-panel .ng-panel-head .ng-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.ng-panel .ng-panel-body {
  padding: var(--ng-panel-pad);
}
.ng-panel .ng-panel-foot {
  display: flex;
  align-items: center;
  gap: var(--ng-panel-gap);
  padding: var(--ng-panel-pad);
  border-top: var(--ng-border-width, 1px) solid var(--ng-panel-border-color);
}

/* ==========================================================
Variante Flat — niente bordo esterno (separatori interni restano)
========================================================== */
.ng-panel-flat {
  border-color: transparent;
}

/* ==========================================================
Sizes — densità del padding interno
========================================================== */
.ng-panel-sm {
  --ng-panel-pad: .6rem .85rem;
}

.ng-panel-lg {
  --ng-panel-pad: 1.4rem 1.75rem;
}

/* ==========================================================
Collassabile — .ng-panel-collapsible
----------------------------------------------------------
La head fa da trigger (data-ng-toggle="#id"), il body è dentro un .ng-collapse
con quell'id. Meccanica e ARIA da ng_toggle.js (nessun JS nuovo).
========================================================== */
.ng-panel-collapsible {
  /* ng_toggle.js mette aria-expanded sulla head (trigger) */
}
.ng-panel-collapsible .ng-panel-head {
  cursor: pointer;
  user-select: none;
}
.ng-panel-collapsible .ng-panel-toggle-icon {
  margin-left: auto;
  transition: transform 0.25s ease;
}
.ng-panel-collapsible .ng-panel-head[aria-expanded=true] .ng-panel-toggle-icon {
  transform: rotate(180deg);
}

/* ==========================================================
SIGNATURE — Brand header band (anti-BS5)
----------------------------------------------------------
.ng-panel-<color> dipinge la head col colore brand governato (testo in
contrasto), niente border-bottom. 0 hardcode, colori da $ng-colors.
========================================================== */
.ng-panel-primary > .ng-panel-head {
  background: var(--ng-primary-bg, #4a2a86);
  color: var(--ng-primary-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-secondary > .ng-panel-head {
  background: var(--ng-secondary-bg, #7d2342);
  color: var(--ng-secondary-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-success > .ng-panel-head {
  background: var(--ng-success-bg, #1da571);
  color: var(--ng-success-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-info > .ng-panel-head {
  background: var(--ng-info-bg, #119bdc);
  color: var(--ng-info-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-warning > .ng-panel-head {
  background: var(--ng-warning-bg, #dd7900);
  color: var(--ng-warning-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-danger > .ng-panel-head {
  background: var(--ng-danger-bg, #f2415c);
  color: var(--ng-danger-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-mute > .ng-panel-head {
  background: var(--ng-mute-bg, #c8c8c8);
  color: var(--ng-mute-text, #646464);
  border-bottom: 0;
}

.ng-panel-blue > .ng-panel-head {
  background: var(--ng-blue-bg, #3b82f6);
  color: var(--ng-blue-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-blue-sky > .ng-panel-head {
  background: var(--ng-blue-sky-bg, #6cc8ff);
  color: var(--ng-blue-sky-text, #07456e);
  border-bottom: 0;
}

.ng-panel-green > .ng-panel-head {
  background: var(--ng-green-bg, #2e7d32);
  color: var(--ng-green-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-lime > .ng-panel-head {
  background: var(--ng-lime-bg, #9edc00);
  color: var(--ng-lime-text, #476f11);
  border-bottom: 0;
}

.ng-panel-aguagreen > .ng-panel-head {
  background: var(--ng-aguagreen-bg, #0e9c7e);
  color: var(--ng-aguagreen-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-indigo > .ng-panel-head {
  background: var(--ng-indigo-bg, #4f46e5);
  color: var(--ng-indigo-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-purple > .ng-panel-head {
  background: var(--ng-purple-bg, #a027f0);
  color: var(--ng-purple-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-purple-heart > .ng-panel-head {
  background: var(--ng-purple-heart-bg, #b23a8a);
  color: var(--ng-purple-heart-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-cyan > .ng-panel-head {
  background: var(--ng-cyan-bg, #009dd9);
  color: var(--ng-cyan-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-magenta > .ng-panel-head {
  background: var(--ng-magenta-bg, #d4007f);
  color: var(--ng-magenta-text, #ffffff);
  border-bottom: 0;
}

.ng-panel-yellow > .ng-panel-head {
  background: var(--ng-yellow-bg, #ffd200);
  color: var(--ng-yellow-text, #8a6800);
  border-bottom: 0;
}

.ng-panel-clight > .ng-panel-head {
  background: var(--ng-clight-bg, #f0f0f0);
  color: var(--ng-clight-text, #1f2937);
  border-bottom: 0;
}

.ng-panel-cdark > .ng-panel-head {
  background: var(--ng-cdark-bg, #424242);
  color: var(--ng-cdark-text, #f0f0f0);
  border-bottom: 0;
}

/* ==========================================================
NexiGrid — Popover
----------------------------------------------------------
Container anchored. Posizione dinamica/flip via JS
(ng_popover.js); classe .placement-<side> sincronizzata dopo
flip. Arrow con .with-arrow, size sm/md/lg, no-shadow,
is-modal (marker focus-trap JS). Modello root+scoped.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-popover {
  /* === Scoped variables === */
  --ng-pop-bg: var(--ng-surface);
  --ng-pop-color: var(--ng-text);
  --ng-pop-border: var(--ng-border-width, 1px) solid var(--ng-color-border, #e5e5e5);
  /* radius: default md via fallback-at-use (non dichiarato → :root cascata) */
  --ng-pop-shadow: 0 12px 28px rgba(0,0,0,.14);
  --ng-pop-padding: 1rem 1.25rem;
  --ng-pop-min-width: 180px;
  --ng-pop-max-width: 360px;
  --ng-pop-offset: .5rem;
  --ng-pop-arrow-size: 8px;
  --ng-pop-transition-speed: .18s;
  --ng-pop-translate: 6px;
  /* base layout */
  position: fixed;
  top: 0;
  left: 0;
  min-width: var(--ng-pop-min-width);
  max-width: var(--ng-pop-max-width);
  background: var(--ng-pop-bg);
  color: var(--ng-pop-color);
  border: var(--ng-pop-border);
  border-radius: var(--ng-pop-radius, var(--ng-radius-md));
  box-shadow: var(--ng-pop-shadow);
  opacity: 0;
  transform: translateY(var(--ng-pop-translate));
  pointer-events: none;
  transition: opacity var(--ng-pop-transition-speed) ease, transform var(--ng-pop-transition-speed) ease;
  z-index: var(--ng-z-popover, 790);
  /* Slot contenuti */
  /* Arrow (posizionato dal JS via classe placement) */
  /* Stato aperto */
  /* ----- Placement: direzione di entrata animata (slide dal lato di provenienza) ----- */
  /* ----- Arrow per ogni lato (richiede .with-arrow) ----- */
  /* arrow su BOTTOM → freccia che punta in alto */
  /* ----- Sizing varianti ----- */
  /* ----- Modificatori ----- */
  /* &.is-modal → marker semantico, focus-trap gestito dal JS (nessuno stile) */
}
.ng-popover .ng-popover-content {
  padding: var(--ng-pop-padding);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.ng-popover .ng-popover-arrow {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  display: none; /* attivato da .with-arrow */
}
.ng-popover.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ng-popover.placement-bottom, .ng-popover.placement-bottom-start, .ng-popover.placement-bottom-end {
  transform: translateY(calc(var(--ng-pop-translate) * -1));
}
.ng-popover.placement-top, .ng-popover.placement-top-start, .ng-popover.placement-top-end {
  transform: translateY(var(--ng-pop-translate));
}
.ng-popover.placement-right, .ng-popover.placement-right-start, .ng-popover.placement-right-end {
  transform: translateX(calc(var(--ng-pop-translate) * -1));
}
.ng-popover.placement-left, .ng-popover.placement-left-start, .ng-popover.placement-left-end {
  transform: translateX(var(--ng-pop-translate));
}
.ng-popover.is-open {
  transform: none;
}
.ng-popover.with-arrow .ng-popover-arrow {
  display: block;
}
.ng-popover.placement-bottom .ng-popover-arrow, .ng-popover.placement-bottom-start .ng-popover-arrow, .ng-popover.placement-bottom-end .ng-popover-arrow {
  top: calc(var(--ng-pop-arrow-size) * -1);
  /* il JS posiziona il BORDO del box (largo 2*size) sul centro trigger →
     compenso metà freccia per centrare il PUNTO */
  margin-inline: calc(var(--ng-pop-arrow-size) * -1);
  border-left: var(--ng-pop-arrow-size) solid transparent;
  border-right: var(--ng-pop-arrow-size) solid transparent;
  border-bottom: var(--ng-pop-arrow-size) solid var(--ng-pop-bg);
}
.ng-popover.placement-top .ng-popover-arrow, .ng-popover.placement-top-start .ng-popover-arrow, .ng-popover.placement-top-end .ng-popover-arrow {
  bottom: calc(var(--ng-pop-arrow-size) * -1);
  margin-inline: calc(var(--ng-pop-arrow-size) * -1);
  border-left: var(--ng-pop-arrow-size) solid transparent;
  border-right: var(--ng-pop-arrow-size) solid transparent;
  border-top: var(--ng-pop-arrow-size) solid var(--ng-pop-bg);
}
.ng-popover.placement-right .ng-popover-arrow, .ng-popover.placement-right-start .ng-popover-arrow, .ng-popover.placement-right-end .ng-popover-arrow {
  left: calc(var(--ng-pop-arrow-size) * -1);
  margin-block: calc(var(--ng-pop-arrow-size) * -1);
  border-top: var(--ng-pop-arrow-size) solid transparent;
  border-bottom: var(--ng-pop-arrow-size) solid transparent;
  border-right: var(--ng-pop-arrow-size) solid var(--ng-pop-bg);
}
.ng-popover.placement-left .ng-popover-arrow, .ng-popover.placement-left-start .ng-popover-arrow, .ng-popover.placement-left-end .ng-popover-arrow {
  right: calc(var(--ng-pop-arrow-size) * -1);
  margin-block: calc(var(--ng-pop-arrow-size) * -1);
  border-top: var(--ng-pop-arrow-size) solid transparent;
  border-bottom: var(--ng-pop-arrow-size) solid transparent;
  border-left: var(--ng-pop-arrow-size) solid var(--ng-pop-bg);
}
.ng-popover.sm {
  --ng-pop-padding: .6rem .8rem;
  --ng-pop-min-width: 140px;
  --ng-pop-max-width: 240px;
  font-size: 0.8rem;
}
.ng-popover.md {
  --ng-pop-padding: .9rem 1.1rem;
  --ng-pop-max-width: 360px;
}
.ng-popover.lg {
  --ng-pop-padding: 1.2rem 1.4rem;
  --ng-pop-min-width: 260px;
  --ng-pop-max-width: 520px;
}
.ng-popover.no-shadow {
  box-shadow: none;
}

/* ==========================================================
NexiGrid — Progress
----------------------------------------------------------
Barra di avanzamento. Varianti colore via --ng-progress-fill.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-progress {
  --ng-progress-height: .5rem;
  --ng-progress-bg: var(--ng-fill);
  --ng-progress-fill: var(--ng-primary-bg, #4a2a86);
  /* radius: default pill via fallback-at-use (non dichiarato → :root cascata) */
  --ng-progress-value: 0%;
  width: 100%;
  height: var(--ng-progress-height);
  background: var(--ng-progress-bg);
  border-radius: var(--ng-progress-radius, var(--ng-radius-pill));
  overflow: hidden;
}
.ng-progress .ng-progress-bar {
  height: 100%;
  width: var(--ng-progress-value);
  background: var(--ng-progress-fill);
  transition: width 0.3s ease;
}

.ng-progress-primary {
  --ng-progress-fill: var(--ng-primary-bg, #4a2a86);
}

.ng-progress-secondary {
  --ng-progress-fill: var(--ng-secondary-bg, #7d2342);
}

.ng-progress-success {
  --ng-progress-fill: var(--ng-success-bg, #1da571);
}

.ng-progress-info {
  --ng-progress-fill: var(--ng-info-bg, #119bdc);
}

.ng-progress-warning {
  --ng-progress-fill: var(--ng-warning-bg, #dd7900);
}

.ng-progress-danger {
  --ng-progress-fill: var(--ng-danger-bg, #f2415c);
}

.ng-progress-mute {
  --ng-progress-fill: var(--ng-mute-bg, #c8c8c8);
}

.ng-progress-blue {
  --ng-progress-fill: var(--ng-blue-bg, #3b82f6);
}

.ng-progress-blue-sky {
  --ng-progress-fill: var(--ng-blue-sky-bg, #6cc8ff);
}

.ng-progress-green {
  --ng-progress-fill: var(--ng-green-bg, #2e7d32);
}

.ng-progress-lime {
  --ng-progress-fill: var(--ng-lime-bg, #9edc00);
}

.ng-progress-aguagreen {
  --ng-progress-fill: var(--ng-aguagreen-bg, #0e9c7e);
}

.ng-progress-indigo {
  --ng-progress-fill: var(--ng-indigo-bg, #4f46e5);
}

.ng-progress-purple {
  --ng-progress-fill: var(--ng-purple-bg, #a027f0);
}

.ng-progress-purple-heart {
  --ng-progress-fill: var(--ng-purple-heart-bg, #b23a8a);
}

.ng-progress-cyan {
  --ng-progress-fill: var(--ng-cyan-bg, #009dd9);
}

.ng-progress-magenta {
  --ng-progress-fill: var(--ng-magenta-bg, #d4007f);
}

.ng-progress-yellow {
  --ng-progress-fill: var(--ng-yellow-bg, #ffd200);
}

.ng-progress-clight {
  --ng-progress-fill: var(--ng-clight-bg, #f0f0f0);
}

.ng-progress-cdark {
  --ng-progress-fill: var(--ng-cdark-bg, #424242);
}

/* ===
NexiGrid — Range
---
Slider flat con fill colorato dinamico, output number live, single o dual-thumb
(no thumb-cross), marks min/max, focus ring NG. Riusa token --ng-input-* e brand.
Pilotato da JS leggero (ng_range.js): aggiorna --ng-range-fill / -min / -max e
dispatcha ng:range:input / :change.
Verticale: .ng-range-vertical (single + dual), via writing-mode, lunghezza --ng-range-length.
Tacche opt-in: .ng-range-ticks (ogni step; JS imposta --ng-range-step-pct).
Colorpicker: .ng-range-hue (spettro 0-360) e .ng-range-alpha (canale alpha,
scacchiera + data-color); formati/copia colore via JS (data-color-format, data-copy).
Stesso JS (il fill è %, agnostico all'orientamento).
---
Version: 1.3.1 · Status: stable
=== */
.ng-range {
  /* ===== Scoped Variables ===== */
  /* tint (non surface-sunken: si confondeva con lo sfondo in light e dark)
     → la parte non selezionata è visibile su entrambi i temi */
  --ng-range-track-bg: rgba(var(--ng-hover-tint), .18);
  --ng-range-fill-bg: var(--ng-primary-bg, #4a2a86);
  --ng-range-thumb-bg: var(--ng-primary-bg, #4a2a86);
  --ng-range-thumb-border: var(--ng-color-white, #fff);
  --ng-range-thumb-size: 18px;
  --ng-range-track-h: 6px;
  --ng-range-length: 180px; /* lunghezza in modalità verticale */
  /* radius: default pill via fallback-at-use (non dichiarato → :root cascata) */
  --ng-range-output-color: var(--ng-text, #222);
  --ng-range-marks-color: var(--ng-text-muted, #777);
  --ng-range-disabled-opacity: .5;
  /* Tacche (opt-in con .ng-range-ticks) */
  /* segue il colore del variant: -dark in LIGHT, -soft in DARK (override sotto).
     Default = primary (come il fill di default). */
  --ng-range-tick-color: var(--ng-primary-dark, #4a2a86);
  --ng-range-tick-w: 2px;
  /* Stato (aggiornato da JS) */
  --ng-range-fill: 0%; /* single: 0..100 */
  --ng-range-min: 0%; /* dual: posizione thumb min */
  --ng-range-max: 100%; /* dual: posizione thumb max */
  --ng-range-step-pct: 10%; /* % di uno step (JS) — per le tacche */
  display: grid;
  gap: 0.35rem;
  inline-size: 100%;
}
.ng-range .ng-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
}
.ng-range .ng-range-output {
  color: var(--ng-range-output-color);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9rem;
}
.ng-range .ng-range-marks {
  display: flex;
  justify-content: space-between;
  color: var(--ng-range-marks-color);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
SINGLE — un solo <input type="range">
============================================================ */
.ng-range:not(.ng-range-dual) .ng-range-input {
  /* reset UA */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
  /* track con fill via gradient */
  --_fill: var(--ng-range-fill);
}
.ng-range:not(.ng-range-dual) .ng-range-input::-webkit-slider-runnable-track {
  height: var(--ng-range-track-h);
  border-radius: var(--ng-range-radius, var(--ng-radius-pill));
  background: linear-gradient(to right, var(--ng-range-fill-bg) 0 var(--_fill), var(--ng-range-track-bg) var(--_fill) 100%);
}
.ng-range:not(.ng-range-dual) .ng-range-input::-moz-range-track {
  height: var(--ng-range-track-h);
  border-radius: var(--ng-range-radius, var(--ng-radius-pill));
  background: var(--ng-range-track-bg);
}
.ng-range:not(.ng-range-dual) .ng-range-input::-moz-range-progress {
  height: var(--ng-range-track-h);
  border-radius: var(--ng-range-radius, var(--ng-radius-pill));
  background: var(--ng-range-fill-bg);
}
.ng-range:not(.ng-range-dual) .ng-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--ng-range-thumb-size);
  block-size: var(--ng-range-thumb-size);
  border-radius: 50%;
  background: var(--ng-range-thumb-bg);
  border: 2px solid var(--ng-range-thumb-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  margin-top: calc((var(--ng-range-thumb-size) - var(--ng-range-track-h)) / -2);
  transition: transform 0.15s ease;
}
.ng-range:not(.ng-range-dual) .ng-range-input::-moz-range-thumb {
  inline-size: var(--ng-range-thumb-size);
  block-size: var(--ng-range-thumb-size);
  border-radius: 50%;
  background: var(--ng-range-thumb-bg);
  border: 2px solid var(--ng-range-thumb-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ng-range:not(.ng-range-dual) .ng-range-input:hover::-webkit-slider-thumb, .ng-range:not(.ng-range-dual) .ng-range-input:focus-visible::-webkit-slider-thumb {
  transform: scale(1.1);
}
.ng-range:not(.ng-range-dual) .ng-range-input:focus-visible {
  outline: none;
}
.ng-range:not(.ng-range-dual) .ng-range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--ng-input-focus-ring, rgba(74, 42, 134, 0.25));
}
.ng-range:not(.ng-range-dual) .ng-range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--ng-input-focus-ring, rgba(74, 42, 134, 0.25));
}

/* ============================================================
VERTICAL — .ng-range-vertical (single + dual). Stesso JS (fill % è agnostico).
Usa writing-mode (standard moderno): Chrome 110+, Safari 16+, Firefox.
min in basso, max in alto. Lunghezza: --ng-range-length.
Scaffolding grid condiviso; l'area "input" è occupata dall'input (single)
o da .ng-range-track (dual, vedi DUAL VERTICALE più sotto).
============================================================ */
.ng-range-vertical {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas: "label label" "input marks";
  gap: 0.35rem 0.4rem;
  justify-items: center;
  /* max-content: non si stira nei container che danno larghezza (flex/grid) →
     tacche e marks restano vicine al track invece di allargarsi */
  inline-size: max-content;
  justify-self: start;
}
.ng-range-vertical .ng-label {
  grid-area: label;
}
.ng-range-vertical .ng-range-input,
.ng-range-vertical .ng-range-track {
  grid-area: input;
}
.ng-range-vertical .ng-range-marks {
  grid-area: marks;
  flex-direction: column-reverse; /* max in alto, min in basso */
  block-size: var(--ng-range-length);
  align-items: start;
}

.ng-range-vertical:not(.ng-range-dual) .ng-range-input {
  writing-mode: vertical-lr;
  direction: rtl; /* min in basso */
  inline-size: var(--ng-range-thumb-size);
  block-size: var(--ng-range-length);
  width: var(--ng-range-thumb-size); /* fallback per UA che ignorano logical su input */
  height: var(--ng-range-length);
}
.ng-range-vertical:not(.ng-range-dual) .ng-range-input::-webkit-slider-runnable-track {
  inline-size: var(--ng-range-track-h);
  block-size: 100%;
  width: var(--ng-range-track-h);
  height: 100%;
  background: linear-gradient(to top, var(--ng-range-fill-bg) 0 var(--_fill), var(--ng-range-track-bg) var(--_fill) 100%);
}
.ng-range-vertical:not(.ng-range-dual) .ng-range-input::-moz-range-track {
  width: var(--ng-range-track-h);
  height: 100%;
}
.ng-range-vertical:not(.ng-range-dual) .ng-range-input::-webkit-slider-thumb {
  /* centra il thumb sulla track sottile lungo l'asse orizzontale */
  margin-top: 0;
  margin-left: calc((var(--ng-range-thumb-size) - var(--ng-range-track-h)) / -2);
}

/* ============================================================
DUAL — due <input type="range"> sovrapposti su track condivisa
============================================================ */
.ng-range-dual .ng-range-track {
  position: relative;
  block-size: var(--ng-range-thumb-size);
  display: grid;
  align-items: center;
  /* track + fill tra i due thumb (CSS var aggiornate da JS) */
}
.ng-range-dual .ng-range-track::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: var(--ng-range-track-h);
  margin-block-start: calc(var(--ng-range-track-h) / -2);
  border-radius: var(--ng-range-radius, var(--ng-radius-pill));
  background: var(--ng-range-track-bg);
  z-index: 0;
}
.ng-range-dual .ng-range-track::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--ng-range-min);
  inset-inline-end: calc(100% - var(--ng-range-max));
  block-size: var(--ng-range-track-h);
  margin-block-start: calc(var(--ng-range-track-h) / -2);
  border-radius: var(--ng-range-radius, var(--ng-radius-pill));
  background: var(--ng-range-fill-bg);
  z-index: 1;
}
.ng-range-dual .ng-range-input {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 2; /* thumb SOPRA la barra di selezione (::after) */
  width: 100%;
  height: var(--ng-range-thumb-size);
  background: transparent;
  margin: 0;
  padding: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  /* Track INTERNA all'input alta come l'intero container: così il thumb
     di default è centrato verticalmente nel container, senza margin
     correttivi (fix Chrome dual: maniglie non allineate con la track). */
}
.ng-range-dual .ng-range-input::-webkit-slider-runnable-track {
  background: transparent;
  height: var(--ng-range-thumb-size);
  border: none;
}
.ng-range-dual .ng-range-input::-moz-range-track {
  background: transparent;
  height: var(--ng-range-thumb-size);
  border: none;
}
.ng-range-dual .ng-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--ng-range-thumb-size);
  block-size: var(--ng-range-thumb-size);
  border-radius: 50%;
  background: var(--ng-range-thumb-bg);
  border: 2px solid var(--ng-range-thumb-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  cursor: pointer;
  margin-top: 0; /* dual: thumb centrato dalla runnable-track piena */
  transition: transform 0.15s ease;
}
.ng-range-dual .ng-range-input::-moz-range-thumb {
  inline-size: var(--ng-range-thumb-size);
  block-size: var(--ng-range-thumb-size);
  border-radius: 50%;
  background: var(--ng-range-thumb-bg);
  border: 2px solid var(--ng-range-thumb-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  cursor: pointer;
}
.ng-range-dual .ng-range-input:hover::-webkit-slider-thumb, .ng-range-dual .ng-range-input:focus-visible::-webkit-slider-thumb {
  transform: scale(1.1);
}
.ng-range-dual .ng-range-input:focus-visible {
  outline: none;
}
.ng-range-dual .ng-range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--ng-input-focus-ring, rgba(74, 42, 134, 0.25));
}
.ng-range-dual .ng-range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--ng-input-focus-ring, rgba(74, 42, 134, 0.25));
}

/* ============================================================
DUAL VERTICALE — .ng-range-vertical.ng-range-dual
writing-mode sul wrapper .ng-range-track: ::before/::after usano logical
props (inset-inline-* = --ng-range-min/max) → il fill flippa da solo
sull'asse verticale. direction rtl = min in basso, come il single.
Input: ereditano writing-mode/direction dal track; vanno ribaltati solo
i fisici width/height che la regola DUAL setta per l'orizzontale.
============================================================ */
.ng-range-vertical.ng-range-dual .ng-range-track {
  writing-mode: vertical-lr;
  direction: rtl; /* min in basso */
  inline-size: var(--ng-range-length); /* = altezza in vertical-lr */
  /* block-size: thumb-size (regola DUAL) = larghezza in vertical-lr */
  width: var(--ng-range-thumb-size); /* fallback fisici */
  height: var(--ng-range-length);
}
.ng-range-vertical.ng-range-dual .ng-range-input {
  width: var(--ng-range-thumb-size);
  height: 100%;
}
.ng-range-vertical.ng-range-dual .ng-range-input::-webkit-slider-runnable-track {
  width: var(--ng-range-thumb-size);
  height: 100%;
}
.ng-range-vertical.ng-range-dual .ng-range-input::-moz-range-track {
  width: var(--ng-range-thumb-size);
  height: 100%;
}
.ng-range-vertical.ng-range-dual .ng-range-input::-webkit-slider-thumb {
  /* runnable-track piena: thumb già centrato, nessun margin correttivo */
  margin-left: 0;
}

/* ============================================================
COLOR VARIANTS (riusa palette $ng-colors)
Tacche: seguono il colore del variant e si adattano al tema —
-dark in LIGHT (legge su track chiaro + sul fill), -soft in DARK
(legge sul track scuro + sul fill brand).
============================================================ */
/* default range (fill primary) in dark — prima del loop così i variant lo battono */
:root[data-theme=dark] .ng-range {
  --ng-range-tick-color: var(--ng-primary-soft);
}

.ng-range-primary {
  --ng-range-fill-bg: var(--ng-primary-bg, #4a2a86);
  --ng-range-thumb-bg: var(--ng-primary-bg, #4a2a86);
  --ng-range-tick-color: var(--ng-primary-dark, #4a2a86);
}

:root[data-theme=dark] .ng-range-primary {
  --ng-range-tick-color: var(--ng-primary-soft, rgb(216.2863636364, 204.1409090909, 239.0590909091));
}

.ng-range-secondary {
  --ng-range-fill-bg: var(--ng-secondary-bg, #7d2342);
  --ng-range-thumb-bg: var(--ng-secondary-bg, #7d2342);
  --ng-range-tick-color: var(--ng-secondary-dark, #7d2342);
}

:root[data-theme=dark] .ng-range-secondary {
  --ng-range-tick-color: var(--ng-secondary-soft, rgb(239.6875, 200.3125, 213.875));
}

.ng-range-success {
  --ng-range-fill-bg: var(--ng-success-bg, #1da571);
  --ng-range-thumb-bg: var(--ng-success-bg, #1da571);
  --ng-range-tick-color: var(--ng-success-dark, #1da571);
}

:root[data-theme=dark] .ng-range-success {
  --ng-range-tick-color: var(--ng-success-soft, rgb(201.2474226804, 245.5525773196, 228.612371134));
}

.ng-range-info {
  --ng-range-fill-bg: var(--ng-info-bg, #119bdc);
  --ng-range-thumb-bg: var(--ng-info-bg, #119bdc);
  --ng-range-tick-color: var(--ng-info-dark, #119bdc);
}

:root[data-theme=dark] .ng-range-info {
  --ng-range-tick-color: var(--ng-info-soft, rgb(204.3164556962, 236.1088607595, 251.0835443038));
}

.ng-range-warning {
  --ng-range-fill-bg: var(--ng-warning-bg, #dd7900);
  --ng-range-thumb-bg: var(--ng-warning-bg, #dd7900);
  --ng-range-tick-color: var(--ng-warning-dark, #dd7900);
}

:root[data-theme=dark] .ng-range-warning {
  --ng-range-tick-color: var(--ng-warning-soft, rgb(255, 228.8461538462, 197.2));
}

.ng-range-danger {
  --ng-range-fill-bg: var(--ng-danger-bg, #f2415c);
  --ng-range-thumb-bg: var(--ng-danger-bg, #f2415c);
  --ng-range-tick-color: var(--ng-danger-dark, #f2415c);
}

:root[data-theme=dark] .ng-range-danger {
  --ng-range-tick-color: var(--ng-danger-soft, rgb(252.4, 217, 222.4));
}

.ng-range-mute {
  --ng-range-fill-bg: var(--ng-mute-bg, #c8c8c8);
  --ng-range-thumb-bg: var(--ng-mute-bg, #c8c8c8);
  --ng-range-tick-color: var(--ng-mute-dark, #5a5a5a);
}

:root[data-theme=dark] .ng-range-mute {
  --ng-range-tick-color: var(--ng-mute-soft, #f4f4f4);
}

.ng-range-blue {
  --ng-range-fill-bg: var(--ng-blue-bg, #3b82f6);
  --ng-range-thumb-bg: var(--ng-blue-bg, #3b82f6);
  --ng-range-tick-color: var(--ng-blue-dark, #3b82f6);
}

:root[data-theme=dark] .ng-range-blue {
  --ng-range-tick-color: var(--ng-blue-soft, rgb(215.8, 230, 253.2));
}

.ng-range-blue-sky {
  --ng-range-fill-bg: var(--ng-blue-sky-bg, #6cc8ff);
  --ng-range-thumb-bg: var(--ng-blue-sky-bg, #6cc8ff);
  --ng-range-tick-color: var(--ng-blue-sky-dark, #1f8fd6);
}

:root[data-theme=dark] .ng-range-blue-sky {
  --ng-range-tick-color: var(--ng-blue-sky-soft, rgb(225.6, 244, 255));
}

.ng-range-green {
  --ng-range-fill-bg: var(--ng-green-bg, #2e7d32);
  --ng-range-thumb-bg: var(--ng-green-bg, #2e7d32);
  --ng-range-tick-color: var(--ng-green-dark, #1b5e20);
}

:root[data-theme=dark] .ng-range-green {
  --ng-range-tick-color: var(--ng-green-soft, rgb(205.4385964912, 236.7614035088, 207.0245614035));
}

.ng-range-lime {
  --ng-range-fill-bg: var(--ng-lime-bg, #9edc00);
  --ng-range-thumb-bg: var(--ng-lime-bg, #9edc00);
  --ng-range-tick-color: var(--ng-lime-dark, #5a7d00);
}

:root[data-theme=dark] .ng-range-lime {
  --ng-range-tick-color: var(--ng-lime-soft, rgb(238.6545454545, 255, 197));
}

.ng-range-aguagreen {
  --ng-range-fill-bg: var(--ng-aguagreen-bg, #0e9c7e);
  --ng-range-thumb-bg: var(--ng-aguagreen-bg, #0e9c7e);
  --ng-range-tick-color: var(--ng-aguagreen-dark, #0c7a62);
}

:root[data-theme=dark] .ng-range-aguagreen {
  --ng-range-tick-color: var(--ng-aguagreen-soft, rgb(192.6, 249.4, 237.4));
}

.ng-range-indigo {
  --ng-range-fill-bg: var(--ng-indigo-bg, #4f46e5);
  --ng-range-thumb-bg: var(--ng-indigo-bg, #4f46e5);
  --ng-range-tick-color: var(--ng-indigo-dark, #4f46e5);
}

:root[data-theme=dark] .ng-range-indigo {
  --ng-range-tick-color: var(--ng-indigo-soft, rgb(219.8, 218, 249.8));
}

.ng-range-purple {
  --ng-range-fill-bg: var(--ng-purple-bg, #a027f0);
  --ng-range-thumb-bg: var(--ng-purple-bg, #a027f0);
  --ng-range-tick-color: var(--ng-purple-dark, #a027f0);
}

:root[data-theme=dark] .ng-range-purple {
  --ng-range-tick-color: var(--ng-purple-soft, rgb(236, 211.8, 252));
}

.ng-range-purple-heart {
  --ng-range-fill-bg: var(--ng-purple-heart-bg, #b23a8a);
  --ng-range-thumb-bg: var(--ng-purple-heart-bg, #b23a8a);
  --ng-range-tick-color: var(--ng-purple-heart-dark, #b23a8a);
}

:root[data-theme=dark] .ng-range-purple-heart {
  --ng-range-tick-color: var(--ng-purple-heart-soft, rgb(241.5322033898, 213.6677966102, 232.2440677966));
}

.ng-range-cyan {
  --ng-range-fill-bg: var(--ng-cyan-bg, #009dd9);
  --ng-range-thumb-bg: var(--ng-cyan-bg, #009dd9);
  --ng-range-tick-color: var(--ng-cyan-dark, #0081b2);
}

:root[data-theme=dark] .ng-range-cyan {
  --ng-range-tick-color: var(--ng-cyan-soft, rgb(196.4, 238.797235023, 255));
}

.ng-range-magenta {
  --ng-range-fill-bg: var(--ng-magenta-bg, #d4007f);
  --ng-range-thumb-bg: var(--ng-magenta-bg, #d4007f);
  --ng-range-tick-color: var(--ng-magenta-dark, #b0006a);
}

:root[data-theme=dark] .ng-range-magenta {
  --ng-range-tick-color: var(--ng-magenta-soft, rgb(255, 195.4, 231.1037735849));
}

.ng-range-yellow {
  --ng-range-fill-bg: var(--ng-yellow-bg, #ffd200);
  --ng-range-thumb-bg: var(--ng-yellow-bg, #ffd200);
  --ng-range-tick-color: var(--ng-yellow-dark, #e6bd00);
}

:root[data-theme=dark] .ng-range-yellow {
  --ng-range-tick-color: var(--ng-yellow-soft, #fff6cc);
}

.ng-range-clight {
  --ng-range-fill-bg: var(--ng-clight-bg, #f0f0f0);
  --ng-range-thumb-bg: var(--ng-clight-bg, #f0f0f0);
  --ng-range-tick-color: var(--ng-clight-dark, #e5e7eb);
}

:root[data-theme=dark] .ng-range-clight {
  --ng-range-tick-color: var(--ng-clight-soft, rgb(245.4, 246.36, 248.28));
}

.ng-range-cdark {
  --ng-range-fill-bg: var(--ng-cdark-bg, #424242);
  --ng-range-thumb-bg: var(--ng-cdark-bg, #424242);
  --ng-range-tick-color: var(--ng-cdark-dark, #2b2b2b);
}

:root[data-theme=dark] .ng-range-cdark {
  --ng-range-tick-color: var(--ng-cdark-soft, rgb(88.68, 88.68, 88.68));
}

/* ============================================================
SIZES
============================================================ */
.ng-range-sm {
  --ng-range-thumb-size: 14px;
  --ng-range-track-h: 4px;
}
.ng-range-sm .ng-range-output, .ng-range-sm .ng-range-marks {
  font-size: 0.75rem;
}

.ng-range-lg {
  --ng-range-thumb-size: 22px;
  --ng-range-track-h: 8px;
}
.ng-range-lg .ng-range-output {
  font-size: 1.05rem;
}
.ng-range-lg .ng-range-marks {
  font-size: 0.85rem;
}

/* ============================================================
HUE + ALPHA — track colorpicker (single only). La track è un gradiente
STATICO (niente fill dinamico): il thumb seleziona la posizione.
Track piena (track-h = thumb-size) come nei colorpicker; la sezione sta
DOPO SIZES così vince su sm/lg ma ne eredita la scala via thumb-size.
JS (v1.2): espone --ng-range-val (valore raw) → thumb del colore corrente;
per alpha data-color setta --ng-range-alpha-color. Copia colore: data-copy
+ data-color-format (hex|rgb|css-rgb|css-rgba|cmyk), click sull'output.
Gli stop hsl() dello spettro e i neutri scacchiera sono literal per natura
(riferimento fisso, non palette — eccezione tipo 50% del §3-bis).
============================================================ */
.ng-range-hue,
.ng-range-alpha {
  --ng-range-track-h: var(--ng-range-thumb-size);
}

/* output cliccabile quando la copia è attiva */
.ng-range[data-copy] .ng-range-output {
  cursor: pointer;
}

.ng-range-hue:not(.ng-range-dual) .ng-range-input {
  --_track: linear-gradient(to right,
  	hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
  	hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
  	hsl(360 100% 50%));
}
.ng-range-hue:not(.ng-range-dual) .ng-range-input::-webkit-slider-runnable-track {
  background: var(--_track);
}
.ng-range-hue:not(.ng-range-dual) .ng-range-input::-moz-range-track {
  background: var(--_track);
}
.ng-range-hue:not(.ng-range-dual) .ng-range-input::-moz-range-progress {
  background: transparent;
}
.ng-range-hue:not(.ng-range-dual) .ng-range-input::-webkit-slider-thumb {
  background: hsl(calc(var(--ng-range-val, 0) * 1deg), 100%, 50%);
}
.ng-range-hue:not(.ng-range-dual) .ng-range-input::-moz-range-thumb {
  background: hsl(calc(var(--ng-range-val, 0) * 1deg), 100%, 50%);
}

/* verticale: basta ri-orientare il gradiente (ridefinizione della var) */
.ng-range-hue.ng-range-vertical:not(.ng-range-dual) .ng-range-input {
  --_track: linear-gradient(to top,
  	hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
  	hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
  	hsl(360 100% 50%));
}

.ng-range-alpha {
  /* scacchiera: riferimento neutro FISSO (uguale in light/dark) */
  --ng-range-checker-a: #ccc;
  --ng-range-checker-b: #fff;
  --ng-range-checker-size: 8px;
  --ng-range-alpha-color: var(--ng-primary-bg, #4a2a86);
}

.ng-range-alpha:not(.ng-range-dual) .ng-range-input {
  --_track:
  	linear-gradient(to right, transparent, var(--ng-range-alpha-color)),
  	repeating-conic-gradient(var(--ng-range-checker-a) 0% 25%, var(--ng-range-checker-b) 0% 50%)
  		0 0 / var(--ng-range-checker-size) var(--ng-range-checker-size);
}
.ng-range-alpha:not(.ng-range-dual) .ng-range-input::-webkit-slider-runnable-track {
  background: var(--_track);
}
.ng-range-alpha:not(.ng-range-dual) .ng-range-input::-moz-range-track {
  background: var(--_track);
}
.ng-range-alpha:not(.ng-range-dual) .ng-range-input::-moz-range-progress {
  background: transparent;
}
.ng-range-alpha:not(.ng-range-dual) .ng-range-input::-webkit-slider-thumb {
  background: var(--ng-range-alpha-color);
}
.ng-range-alpha:not(.ng-range-dual) .ng-range-input::-moz-range-thumb {
  background: var(--ng-range-alpha-color);
}

.ng-range-alpha.ng-range-vertical:not(.ng-range-dual) .ng-range-input {
  --_track:
  	linear-gradient(to top, transparent, var(--ng-range-alpha-color)),
  	repeating-conic-gradient(var(--ng-range-checker-a) 0% 25%, var(--ng-range-checker-b) 0% 50%)
  		0 0 / var(--ng-range-checker-size) var(--ng-range-checker-size);
}

/* ============================================================
TICKS — .ng-range-ticks (opt-in). Tacche SOPRA il track (NON sovrapposte alla
linea di selezione): stanno sullo sfondo pagina → contrasto facile, sempre
leggibili. Colore = brand adattivo (-dark in light / -soft in dark, vedi loop).
JS imposta --ng-range-step-pct. Usare con step "larghi" (poche tacche).
============================================================ */
/* BUG-006 — allineamento tacca/thumb: il centro del thumb NON percorre il
   100% del track (va da thumb/2 a larghezza-thumb/2, il thumb resta dentro).
   La barra tacche è quindi ristretta alla corsa reale (margine thumb/2 per
   lato) e ogni tacca è CENTRATA sul multiplo dello step (mezza tacca a
   inizio/fine periodo nel repeating-gradient). */
/* Orizzontale (single + dual): barra tacche SOPRA il track (riordino grid) */
.ng-range-ticks:not(.ng-range-vertical) .ng-label {
  order: 0;
}
.ng-range-ticks:not(.ng-range-vertical) .ng-range-input,
.ng-range-ticks:not(.ng-range-vertical) .ng-range-track {
  order: 2;
}
.ng-range-ticks:not(.ng-range-vertical) .ng-range-marks {
  order: 3;
}
.ng-range-ticks:not(.ng-range-vertical)::before {
  content: "";
  order: 1;
  align-self: stretch;
  block-size: 6px;
  margin-inline: calc(var(--ng-range-thumb-size) / 2); /* corsa reale del thumb */
  background: repeating-linear-gradient(to right, var(--ng-range-tick-color) 0 calc(var(--ng-range-tick-w) / 2), transparent calc(var(--ng-range-tick-w) / 2) calc(var(--ng-range-step-pct) - var(--ng-range-tick-w) / 2), var(--ng-range-tick-color) calc(var(--ng-range-step-pct) - var(--ng-range-tick-w) / 2) var(--ng-range-step-pct));
}

/* Verticale: barra tacche a fianco (sinistra) del track */
.ng-range-ticks.ng-range-vertical {
  grid-template-columns: auto auto auto;
  grid-template-areas: "label label label" "ticks input marks";
}
.ng-range-ticks.ng-range-vertical::before {
  content: "";
  grid-area: ticks;
  align-self: center;
  inline-size: 6px;
  /* corsa reale del thumb (già centrata nella row dall'align-self) */
  block-size: calc(var(--ng-range-length) - var(--ng-range-thumb-size));
  background: repeating-linear-gradient(to top, var(--ng-range-tick-color) 0 calc(var(--ng-range-tick-w) / 2), transparent calc(var(--ng-range-tick-w) / 2) calc(var(--ng-range-step-pct) - var(--ng-range-tick-w) / 2), var(--ng-range-tick-color) calc(var(--ng-range-step-pct) - var(--ng-range-tick-w) / 2) var(--ng-range-step-pct));
}

/* ============================================================
DISABLED
============================================================ */
.ng-range:has(.ng-range-input:disabled),
.ng-range.is-disabled {
  opacity: var(--ng-range-disabled-opacity);
  pointer-events: none;
}

/* ===
NexiGrid — Select Orion (select avanzato, select2-like)
---
Enhancement del <select> nativo: il select reale resta la source of truth
(form submit nativo + degrado graceful — il native porta anche .ng-select del
form per lo stile a JS spento). UI custom: control box, menu listbox top-layer
(Popover API), ricerca locale, single + multi (chip), gruppi (optgroup),
opzioni ricche (icona Phosphor + sublabel), placeholder, clear.

COMPONENTE A PARTE: classi tutte .ng-select-orion-* → NESSUNA collisione con
.ng-select del form (token CSS distinti). Qui NON esiste alcuna regola .ng-select.

Distintivi NG: opzioni ricche + sync opzionale via ng_state (mirror sul native).
Riusa token --ng-input-* (solo in lettura) e il markup .ng-chip. JS: ng_select_orion.js.
---
Version: 1.0.1 · Status: stable
=== */
.ng-select-orion {
  /* ===== Scoped Variables ===== */
  --ng-selor-menu-bg: var(--ng-surface, #fff);
  --ng-selor-menu-border: var(--ng-color-border, #e5e5e5);
  --ng-selor-menu-radius: var(--ng-input-radius, 6px);
  --ng-selor-menu-shadow: 0 10px 30px rgba(0,0,0,.18);
  --ng-selor-menu-max-h: 280px;
  --ng-selor-item-padding-y: .55rem;
  --ng-selor-item-padding-x: .8rem;
  --ng-selor-item-gap: .65rem;
  --ng-selor-item-hover-bg: rgba(var(--ng-hover-tint, 0,0,0), .06);
  --ng-selor-item-active-bg: rgba(var(--ng-hover-tint, 0,0,0), .10);
  --ng-selor-item-selected-color: var(--ng-primary-bg, #4a2a86);
  --ng-selor-icon-color: var(--ng-text-muted, #777);
  --ng-selor-sublabel-color: var(--ng-text-muted, #777);
  --ng-selor-group-color: var(--ng-text-muted, #777);
  --ng-selor-placeholder: var(--ng-input-placeholder, #999);
  --ng-selor-z: var(--ng-z-dropdown_menu, 401);
  /* wrapper del componente (un <div>): nessuna eredità da %ng-input-base
     perché NON è .ng-select. Solo contesto di posizionamento. */
  display: block;
  position: relative;
  inline-size: 100%;
}

/* <select> nativo enhanced: nascosto alla vista ma presente nel form
   (NON display:none → deve continuare a submit-are). A JS spento NON ha
   .is-enhanced → resta visibile e stilizzato dalla .ng-select del form. */
.ng-select-orion-native.is-enhanced {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
CONTROL (box) — legge i token --ng-input-* (non li ridefinisce)
============================================================ */
.ng-select-orion-control {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  inline-size: 100%;
  min-inline-size: 0;
  padding-block: var(--ng-input-padding-y);
  padding-inline: var(--ng-input-padding-x);
  border: 1px solid var(--ng-input-color-border);
  border-radius: var(--ng-input-radius);
  background: var(--ng-input-bg);
  /* --ng-input-color non è un token globale → fallback su --ng-text */
  color: var(--ng-input-color, var(--ng-text, #222));
  font-size: var(--ng-input-font-size);
  line-height: var(--ng-input-line-height);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ng-select-orion-control:focus, .ng-select-orion-control:focus-visible {
  outline: none;
  border-color: var(--ng-input-focus-border);
  box-shadow: var(--ng-input-focus-ring);
}
.ng-select-orion-control .ng-select-orion-value {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ng-select-orion-control .ng-select-orion-value.is-placeholder {
  color: var(--ng-selor-placeholder);
}
.ng-select-orion.is-multiple .ng-select-orion-control .ng-select-orion-value {
  white-space: normal;
}
.ng-select-orion-control .ng-select-orion-clear {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ng-text-muted, #777);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
  /* Difesa da reset esterni (es. .ng-overlay-body button{display:block;
     width:100%}, 0,1,1): questo selettore composto è (0,2,0) e vince →
     il clear resta piccolo e inline, non a tutta larghezza centrato. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: auto;
  width: auto;
  /* nascondimento (clearBtn.hidden=true) ancorato al componente:
     .ng-select-orion-control .ng-select-orion-clear[hidden] = (0,2,1)
     > .ng-overlay-body button (0,1,1) → display:none vince. */
}
.ng-select-orion-control .ng-select-orion-clear:hover {
  color: var(--ng-text, #222);
}
.ng-select-orion-control .ng-select-orion-clear[hidden] {
  display: none;
}
.ng-select-orion-control .ng-select-orion-caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--ng-text-muted, #777);
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.ng-select-orion.is-open .ng-select-orion-caret {
  transform: rotate(180deg);
}

.ng-select-orion.is-disabled .ng-select-orion-control {
  background: var(--ng-input-disabled-bg);
  color: var(--ng-input-disabled-color);
  cursor: not-allowed;
}

.ng-select-orion.is-multiple .ng-select-orion-control {
  padding-block: calc(var(--ng-input-padding-y) - 0.15rem);
}

/* ============================================================
MENU (listbox) — top-layer via Popover API
============================================================ */
.ng-select-orion-menu {
  min-inline-size: 200px;
  max-block-size: var(--ng-selor-menu-max-h);
  overflow-y: auto;
  background: var(--ng-selor-menu-bg);
  border: 1px solid var(--ng-selor-menu-border);
  border-radius: var(--ng-selor-menu-radius);
  box-shadow: var(--ng-selor-menu-shadow);
  padding: 0.25rem;
  z-index: var(--ng-selor-z);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ng-select-orion-menu[popover]:not(:popover-open) {
  display: none;
}
.ng-select-orion-menu:popover-open {
  inset: auto;
  margin: 0;
}
.ng-select-orion-menu.is-open, .ng-select-orion-menu:popover-open {
  opacity: 1;
}
@starting-style {
  .ng-select-orion-menu:popover-open {
    opacity: 0;
  }
}

.ng-select-orion-search {
  position: sticky;
  inset-block-start: 0;
  background: var(--ng-selor-menu-bg);
  padding: 0.15rem 0.15rem 0.35rem;
  z-index: 1;
}
.ng-select-orion-search .ng-select-orion-search-input {
  inline-size: 100%;
  padding-block: 0.4rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--ng-input-color-border);
  border-radius: var(--ng-input-radius);
  background: var(--ng-input-bg);
  color: var(--ng-input-color, var(--ng-text, #222));
  font-size: 0.9rem;
}
.ng-select-orion-search .ng-select-orion-search-input:focus, .ng-select-orion-search .ng-select-orion-search-input:focus-visible {
  outline: none;
  border-color: var(--ng-input-focus-border);
  box-shadow: var(--ng-input-focus-ring);
}

/* ============================================================
ITEMS
============================================================ */
.ng-select-orion-item {
  display: flex;
  align-items: center;
  gap: var(--ng-selor-item-gap);
  padding-block: var(--ng-selor-item-padding-y);
  padding-inline: var(--ng-selor-item-padding-x);
  border-radius: calc(var(--ng-selor-menu-radius) - 2px);
  cursor: pointer;
  user-select: none;
  color: var(--ng-text, #222);
}
.ng-select-orion-item:hover {
  background: var(--ng-selor-item-hover-bg);
}
.ng-select-orion-item.is-active {
  background: var(--ng-selor-item-active-bg);
}
.ng-select-orion-item.is-selected {
  color: var(--ng-selor-item-selected-color);
  font-weight: 600;
}
.ng-select-orion-item[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}
.ng-select-orion-item .ng-select-orion-icon {
  flex-shrink: 0;
  color: var(--ng-selor-icon-color);
  font-size: 1.1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.ng-select-orion-item .ng-select-orion-body {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.ng-select-orion-item .ng-select-orion-label {
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ng-select-orion-item .ng-select-orion-sublabel {
  color: var(--ng-selor-sublabel-color);
  font-size: 0.78rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ng-select-orion-item mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
}

/* ============================================================
GROUPS + STATUS
============================================================ */
.ng-select-orion-group {
  padding-block: 0.35rem 0.2rem;
  padding-inline: var(--ng-selor-item-padding-x);
  color: var(--ng-selor-group-color);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.ng-select-orion-group + .ng-select-orion-item {
  margin-top: 0.15rem;
}

.ng-select-orion-status {
  padding-block: var(--ng-selor-item-padding-y);
  padding-inline: var(--ng-selor-item-padding-x);
  color: var(--ng-text-muted, #777);
  font-size: 0.85rem;
  text-align: center;
}

/* ============================================================
SIZES (mappano sui token --ng-input-* nel control)
============================================================ */
.ng-select-orion-sm .ng-select-orion-control {
  --ng-input-padding-y: .35rem;
  --ng-input-padding-x: .6rem;
  font-size: 0.875rem;
}

.ng-select-orion-lg .ng-select-orion-control {
  --ng-input-padding-y: .7rem;
  --ng-input-padding-x: 1rem;
  font-size: 1.05rem;
}

/* ==========================================================
NexiGrid — Sidebar (componente unificato)
----------------------------------------------------------
Sidebar di pagina: struttura (width, sticky, compact/text) +
menu (header/body/footer, nav, link/trigger, submenu, divider,
title). Stati is-active/is-open/is-compact, drawer mobile.
JS ng_sidebar.js. Modello root+scoped (bg/border al global).
Struttura + var consolidate qui (prima in _ng_layout.scss).
----------------------------------------------------------
Version: 1.2.1 · Status: stable
========================================================== */
.ng-sidebar {
  /* === Scoped variables === */
  --ng-sidebar-width: 260px;
  --ng-sidebar-width-compact: 84px;
  --ng-sidebar-width-text: 220px;
  --ng-sidebar-gap: .75rem;
  --ng-sidebar-pad: 1rem;
  /* radius: default 0 via fallback-at-use (non dichiarato → :root cascata) */
  --ng-sidebar-bg: var(--ng-surface);
  --ng-sidebar-border: var(--ng-border-width, 1px) solid var(--ng-color-border, rgba(var(--ng-hover-tint), .08));
  --ng-sidebar-color: inherit;
  --ng-sidebar-muted: var(--ng-text-muted);
  --ng-sidebar-hover: rgba(var(--ng-hover-tint), .045);
  --ng-sidebar-active: rgba(var(--ng-hover-tint), .12);
  --ng-sidebar-active-accent: purple;
  --ng-sidebar-divider: rgba(var(--ng-hover-tint), .08);
  --ng-sidebar-item-h: 44px;
  --ng-sidebar-submenu-margin-top: 5px;
  --ng-sidebar-submenu-bg: transparent;
  --ng-sidebar-submenu-border: var(--ng-border-width, 1px) solid transparent;
  --ng-sidebar-submenu-border-radius: var(--ng-radius-0);
  --ng-sidebar-indent-2: 1.375rem;
  --ng-sidebar-indent-3: 0.625rem;
  /* === Struttura === */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: var(--ng-sidebar-width);
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  overflow: hidden auto;
  background: var(--ng-sidebar-bg);
  color: var(--ng-sidebar-color);
  border-inline-end: var(--ng-sidebar-border);
  transition: width 0.25s ease, padding 0.2s ease;
  z-index: var(--ng-z-sidebar, 200);
  /* ===== Header ===== */
  /* ===== Body ===== */
  /* ===== Footer ===== */
  /* ===== Divider ===== */
  /* ===== Title ===== */
  /* ===== Nav / list ===== */
  /* ===== Submenu ===== */
  /* ===== Link / trigger ===== */
  /* ===== Inner elements ===== */
  /* ===== Chevron ===== */
  /* ===== State — desktop (compact) ===== */
}
.ng-sidebar.is-compact {
  width: var(--ng-sidebar-width-compact);
}
.ng-sidebar.is-text {
  width: var(--ng-sidebar-width-text);
}
.ng-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: var(--ng-sidebar-gap);
  padding: var(--ng-sidebar-pad);
  background: var(--ng-sidebar-bg);
  z-index: 2;
}
.ng-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: var(--ng-sidebar-gap);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ng-sidebar-pad);
}
.ng-sidebar-body i {
  line-height: normal;
}
.ng-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--ng-sidebar-gap);
  padding: var(--ng-sidebar-pad);
  margin-top: auto;
  background: var(--ng-sidebar-bg);
  z-index: 2;
}
.ng-sidebar-footer.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ng-sidebar-footer.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ng-sidebar-footer.cols-1 {
  display: grid;
  grid-template-columns: 1fr;
}
.ng-sidebar-divider {
  block-size: 1px;
  background: var(--ng-sidebar-divider);
  margin: 0.25rem 0;
}
.ng-sidebar-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 36px;
  color: var(--ng-sidebar-muted);
}
.ng-sidebar-nav, .ng-sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ng-sidebar-submenu {
  margin-top: var(--ng-sidebar-submenu-margin-top);
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
  /* FIX 1 (sidebar scrollabili): mai comprimere il submenu dentro il
     body/sidebar flex con overflow-y → altrimenti viene schiacciato e
     l'overflow:hidden clippa le voci, e lo scroll della sidebar muore. */
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  /* indent dopo il reset padding:0 (altrimenti veniva azzerato) */
  padding-inline-start: var(--ng-sidebar-indent-2);
  /* FIX 2: il JS mette [hidden] sui pannelli chiusi, ma la regola UA
     [hidden]{display:none} perde contro il display:flex del componente →
     restavano flex item fantasma a height 0 che contano 2x il gap tra i
     trigger di primo livello. Forziamo display:none sui chiusi. */
}
.ng-sidebar-submenu[hidden] {
  display: none;
}
.ng-sidebar-submenu.is-submenu-active {
  border-radius: var(--ng-sidebar-submenu-border-radius);
  background: var(--ng-sidebar-submenu-bg);
  border: var(--ng-sidebar-submenu-border);
  padding: 0.35rem;
}
.ng-sidebar-submenu .ng-sidebar-submenu {
  padding-inline-start: var(--ng-sidebar-indent-3);
}
.ng-sidebar-link, .ng-sidebar-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--ng-sidebar-item-h);
  padding: 0.625rem 0.875rem;
  border-radius: var(--ng-sidebar-radius, var(--ng-radius-0));
  color: var(--ng-sidebar-color);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  inline-size: 100%;
  text-align: left;
}
.ng-sidebar-link:hover, .ng-sidebar-trigger:hover {
  background: var(--ng-sidebar-hover);
}
.ng-sidebar-link.is-active, .ng-sidebar-link[aria-current=page], .ng-sidebar-trigger.is-active {
  background: var(--ng-sidebar-active);
  border-left: 2px solid color-mix(in srgb, var(--ng-sidebar-active) 80%, var(--ng-sidebar-active-accent));
  border-radius: 0;
  font-weight: 600;
}
.ng-sidebar-icon, .ng-sidebar-check, .ng-sidebar-badge, .ng-sidebar-chevron {
  flex-shrink: 0;
}
.ng-sidebar-text {
  min-width: 0;
  flex: 1;
}
.ng-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 0;
}
.ng-sidebar-chevron {
  margin-inline-start: auto;
  transition: transform 0.2s ease;
}
.ng-sidebar-trigger.is-open .ng-sidebar-chevron {
  transform: rotate(90deg);
}
.ng-layout.ng-sidebar-compact .ng-sidebar {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border: 0;
}

/* ==========================================================
Sidebar — toggle visibility
========================================================== */
[data-ng-sidebar-toggle] {
  display: none;
}

.ng-layout.ng-sidebar-always [data-ng-sidebar-toggle] {
  display: inline-flex;
}

@media (max-width: 895px) {
  [data-ng-sidebar-toggle] {
    display: inline-flex;
  }
}
/* ==========================================================
Sidebar — mobile behavior (drawer)
========================================================== */
@media (max-width: 895px) {
  .ng-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ng-sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: calc(var(--ng-z-sidebar, 200) + 10);
  }
  .ng-layout.ng-sidebar-open .ng-sidebar {
    transform: translateX(0);
  }
}
/* ==========================================================
NexiGrid — Skeleton
----------------------------------------------------------
Placeholder di caricamento con shimmer. Elementi line/rect/
circle, width utilities, variante compact. Container
.ng-skeleton opzionale (le var hanno fallback). SCSS-only.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
/* ===== Container (opzionale) ===== */
.ng-skeleton {
  --ng-skeleton-bg: rgba(var(--ng-hover-tint), .06);
  --ng-skeleton-highlight: rgba(255,255,255,.5);
  /* radius: default sm via fallback-at-use (non dichiarato → :root cascata) */
  --ng-skeleton-height-line: 14px;
  --ng-skeleton-animation-speed: 1.2s;
  position: relative;
}

/* ===== Base Elements ===== */
.ng-skeleton-line,
.ng-skeleton-rect,
.ng-skeleton-circle {
  position: relative;
  overflow: hidden;
  background: var(--ng-skeleton-bg, rgba(var(--ng-hover-tint), 0.06));
  border-radius: var(--ng-skeleton-radius, var(--ng-radius-sm));
}

/* ===== Shapes ===== */
.ng-skeleton-line {
  height: var(--ng-skeleton-height-line, 14px);
  margin-bottom: 0.6rem;
}

.ng-skeleton-rect {
  height: 120px;
}

.ng-skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* ===== Shimmer Animation ===== */
.ng-skeleton-line::after,
.ng-skeleton-rect::after,
.ng-skeleton-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--ng-skeleton-highlight, rgba(255, 255, 255, 0.5)) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: ng-skeleton-shimmer var(--ng-skeleton-animation-speed, 1.2s) infinite;
}

@keyframes ng-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
/* ===== Width Utilities ===== */
.ng-skeleton-line.w-25 {
  width: 25%;
}

.ng-skeleton-line.w-40 {
  width: 40%;
}

.ng-skeleton-line.w-50 {
  width: 50%;
}

.ng-skeleton-line.w-60 {
  width: 60%;
}

.ng-skeleton-line.w-75 {
  width: 75%;
}

.ng-skeleton-line.w-100 {
  width: 100%;
}

/* ===== Compact Variant ===== */
.ng-skeleton.compact {
  --ng-skeleton-height-line: 10px;
}

/* ==========================================================
NexiGrid — Snackbar
----------------------------------------------------------
Stack di notifiche (.ng-snackbar-stack) + item .ng-snackbar.
Varianti fill/soft per colore (da $ng-colors), posizioni
top/middle/bottom × left/center/right. JS ng_snackbar.js.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-snackbar-stack {
  --ng-snackbar-gap: var(--ng-gap, 8px);
  --ng-snackbar-offset: 16px;
  --ng-snackbar-z: var(--ng-z-snackbar, 775);
  position: fixed;
  inset-inline-end: var(--ng-snackbar-offset);
  inset-block-end: var(--ng-snackbar-offset);
  display: flex;
  flex-direction: column;
  gap: var(--ng-snackbar-gap);
  z-index: var(--ng-snackbar-z);
  pointer-events: none;
}

/* ===== Item ===== */
.ng-snackbar {
  /* radius: default master (3px) via fallback-at-use (→ :root cascata) */
  --ng-snackbar-padding: 1.6rem 2.4rem;
  --ng-snackbar-shadow: 0 4px 8px rgba(0,0,0,.2);
  --ng-snackbar-transition: .25s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 240px;
  max-width: 420px;
  border-radius: var(--ng-snackbar-radius, var(--ng-radius));
  box-shadow: var(--ng-snackbar-shadow);
  padding: var(--ng-snackbar-padding);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--ng-snackbar-transition), transform var(--ng-snackbar-transition);
}

.ng-snackbar.is-active {
  opacity: 1;
  transform: translateY(0);
}

.ng-snackbar.is-closing {
  opacity: 0;
  transform: translateY(8px);
}

/* ===== Content ===== */
.ng-snackbar-message {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.ng-snackbar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* elementi media dentro message */
.ng-snackbar-message > .ng-badge,
.ng-snackbar-message > .ng-avatar,
.ng-snackbar-message > i,
.ng-snackbar-message > svg {
  flex-shrink: 0;
}

/* ===== Variants ===== */
.ng-snackbar--soft {
  background: var(--ng-surface, #fff);
}

/* ===== Color system (auto da $ng-colors) ===== */
/* --- FILL --- */
.ng-snackbar--fill.primary {
  background: var(--ng-primary-bg, #4a2a86);
  color: var(--ng-primary-text, #ffffff);
  border: 1px solid var(--ng-primary-border, #382066);
}

/* --- SOFT --- */
.ng-snackbar--soft.primary {
  background: var(--ng-primary-soft, rgb(216.2863636364, 204.1409090909, 239.0590909091));
  color: var(--ng-primary-dark, #4a2a86);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-primary-bg, #4a2a86);
}

/* --- FILL --- */
.ng-snackbar--fill.secondary {
  background: var(--ng-secondary-bg, #7d2342);
  color: var(--ng-secondary-text, #ffffff);
  border: 1px solid var(--ng-secondary-border, #611a34);
}

/* --- SOFT --- */
.ng-snackbar--soft.secondary {
  background: var(--ng-secondary-soft, rgb(239.6875, 200.3125, 213.875));
  color: var(--ng-secondary-dark, #7d2342);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-secondary-bg, #7d2342);
}

/* --- FILL --- */
.ng-snackbar--fill.success {
  background: var(--ng-success-bg, #1da571);
  color: var(--ng-success-text, #ffffff);
  border: 1px solid var(--ng-success-border, #18875d);
}

/* --- SOFT --- */
.ng-snackbar--soft.success {
  background: var(--ng-success-soft, rgb(201.2474226804, 245.5525773196, 228.612371134));
  color: var(--ng-success-dark, #1da571);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-success-bg, #1da571);
}

/* --- FILL --- */
.ng-snackbar--fill.info {
  background: var(--ng-info-bg, #119bdc);
  color: var(--ng-info-text, #ffffff);
  border: 1px solid var(--ng-info-border, #0e7fb4);
}

/* --- SOFT --- */
.ng-snackbar--soft.info {
  background: var(--ng-info-soft, rgb(204.3164556962, 236.1088607595, 251.0835443038));
  color: var(--ng-info-dark, #119bdc);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-info-bg, #119bdc);
}

/* --- FILL --- */
.ng-snackbar--fill.warning {
  background: var(--ng-warning-bg, #dd7900);
  color: var(--ng-warning-text, #ffffff);
  border: 1px solid var(--ng-warning-border, #b56300);
}

/* --- SOFT --- */
.ng-snackbar--soft.warning {
  background: var(--ng-warning-soft, rgb(255, 228.8461538462, 197.2));
  color: var(--ng-warning-dark, #dd7900);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-warning-bg, #dd7900);
}

/* --- FILL --- */
.ng-snackbar--fill.danger {
  background: var(--ng-danger-bg, #f2415c);
  color: var(--ng-danger-text, #ffffff);
  border: 1px solid var(--ng-danger-border, #d82e47);
}

/* --- SOFT --- */
.ng-snackbar--soft.danger {
  background: var(--ng-danger-soft, rgb(252.4, 217, 222.4));
  color: var(--ng-danger-dark, #f2415c);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-danger-bg, #f2415c);
}

/* --- FILL --- */
.ng-snackbar--fill.mute {
  background: var(--ng-mute-bg, #c8c8c8);
  color: var(--ng-mute-text, #646464);
  border: 1px solid var(--ng-mute-border, #dcdcdc);
}

/* --- SOFT --- */
.ng-snackbar--soft.mute {
  background: var(--ng-mute-soft, #f4f4f4);
  color: var(--ng-mute-dark, #5a5a5a);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-mute-bg, #c8c8c8);
}

/* --- FILL --- */
.ng-snackbar--fill.blue {
  background: var(--ng-blue-bg, #3b82f6);
  color: var(--ng-blue-text, #ffffff);
  border: 1px solid var(--ng-blue-border, #2563eb);
}

/* --- SOFT --- */
.ng-snackbar--soft.blue {
  background: var(--ng-blue-soft, rgb(215.8, 230, 253.2));
  color: var(--ng-blue-dark, #3b82f6);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-blue-bg, #3b82f6);
}

/* --- FILL --- */
.ng-snackbar--fill.blue-sky {
  background: var(--ng-blue-sky-bg, #6cc8ff);
  color: var(--ng-blue-sky-text, #07456e);
  border: 1px solid var(--ng-blue-sky-border, #2ea8f5);
}

/* --- SOFT --- */
.ng-snackbar--soft.blue-sky {
  background: var(--ng-blue-sky-soft, rgb(225.6, 244, 255));
  color: var(--ng-blue-sky-dark, #1f8fd6);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-blue-sky-bg, #6cc8ff);
}

/* --- FILL --- */
.ng-snackbar--fill.green {
  background: var(--ng-green-bg, #2e7d32);
  color: var(--ng-green-text, #ffffff);
  border: 1px solid var(--ng-green-border, #246428);
}

/* --- SOFT --- */
.ng-snackbar--soft.green {
  background: var(--ng-green-soft, rgb(205.4385964912, 236.7614035088, 207.0245614035));
  color: var(--ng-green-dark, #1b5e20);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-green-bg, #2e7d32);
}

/* --- FILL --- */
.ng-snackbar--fill.lime {
  background: var(--ng-lime-bg, #9edc00);
  color: var(--ng-lime-text, #476f11);
  border: 1px solid var(--ng-lime-border, #82b800);
}

/* --- SOFT --- */
.ng-snackbar--soft.lime {
  background: var(--ng-lime-soft, rgb(238.6545454545, 255, 197));
  color: var(--ng-lime-dark, #5a7d00);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-lime-bg, #9edc00);
}

/* --- FILL --- */
.ng-snackbar--fill.aguagreen {
  background: var(--ng-aguagreen-bg, #0e9c7e);
  color: var(--ng-aguagreen-text, #ffffff);
  border: 1px solid var(--ng-aguagreen-border, #0b7d64);
}

/* --- SOFT --- */
.ng-snackbar--soft.aguagreen {
  background: var(--ng-aguagreen-soft, rgb(192.6, 249.4, 237.4));
  color: var(--ng-aguagreen-dark, #0c7a62);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-aguagreen-bg, #0e9c7e);
}

/* --- FILL --- */
.ng-snackbar--fill.indigo {
  background: var(--ng-indigo-bg, #4f46e5);
  color: var(--ng-indigo-text, #ffffff);
  border: 1px solid var(--ng-indigo-border, #4338ca);
}

/* --- SOFT --- */
.ng-snackbar--soft.indigo {
  background: var(--ng-indigo-soft, rgb(219.8, 218, 249.8));
  color: var(--ng-indigo-dark, #4f46e5);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-indigo-bg, #4f46e5);
}

/* --- FILL --- */
.ng-snackbar--fill.purple {
  background: var(--ng-purple-bg, #a027f0);
  color: var(--ng-purple-text, #ffffff);
  border: 1px solid var(--ng-purple-border, #810ecb);
}

/* --- SOFT --- */
.ng-snackbar--soft.purple {
  background: var(--ng-purple-soft, rgb(236, 211.8, 252));
  color: var(--ng-purple-dark, #a027f0);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-purple-bg, #a027f0);
}

/* --- FILL --- */
.ng-snackbar--fill.purple-heart {
  background: var(--ng-purple-heart-bg, #b23a8a);
  color: var(--ng-purple-heart-text, #ffffff);
  border: 1px solid var(--ng-purple-heart-border, #7d2962);
}

/* --- SOFT --- */
.ng-snackbar--soft.purple-heart {
  background: var(--ng-purple-heart-soft, rgb(241.5322033898, 213.6677966102, 232.2440677966));
  color: var(--ng-purple-heart-dark, #b23a8a);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-purple-heart-bg, #b23a8a);
}

/* --- FILL --- */
.ng-snackbar--fill.cyan {
  background: var(--ng-cyan-bg, #009dd9);
  color: var(--ng-cyan-text, #ffffff);
  border: 1px solid var(--ng-cyan-border, #0081b2);
}

/* --- SOFT --- */
.ng-snackbar--soft.cyan {
  background: var(--ng-cyan-soft, rgb(196.4, 238.797235023, 255));
  color: var(--ng-cyan-dark, #0081b2);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-cyan-bg, #009dd9);
}

/* --- FILL --- */
.ng-snackbar--fill.magenta {
  background: var(--ng-magenta-bg, #d4007f);
  color: var(--ng-magenta-text, #ffffff);
  border: 1px solid var(--ng-magenta-border, #b0006a);
}

/* --- SOFT --- */
.ng-snackbar--soft.magenta {
  background: var(--ng-magenta-soft, rgb(255, 195.4, 231.1037735849));
  color: var(--ng-magenta-dark, #b0006a);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-magenta-bg, #d4007f);
}

/* --- FILL --- */
.ng-snackbar--fill.yellow {
  background: var(--ng-yellow-bg, #ffd200);
  color: var(--ng-yellow-text, #8a6800);
  border: 1px solid var(--ng-yellow-border, #e6bd00);
}

/* --- SOFT --- */
.ng-snackbar--soft.yellow {
  background: var(--ng-yellow-soft, #fff6cc);
  color: var(--ng-yellow-dark, #e6bd00);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-yellow-bg, #ffd200);
}

/* --- FILL --- */
.ng-snackbar--fill.clight {
  background: var(--ng-clight-bg, #f0f0f0);
  color: var(--ng-clight-text, #1f2937);
  border: 1px solid var(--ng-clight-border, #e5e7eb);
}

/* --- SOFT --- */
.ng-snackbar--soft.clight {
  background: var(--ng-clight-soft, rgb(245.4, 246.36, 248.28));
  color: var(--ng-clight-dark, #e5e7eb);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-clight-bg, #f0f0f0);
}

/* --- FILL --- */
.ng-snackbar--fill.cdark {
  background: var(--ng-cdark-bg, #424242);
  color: var(--ng-cdark-text, #f0f0f0);
  border: 1px solid var(--ng-cdark-border, #5a5a5a);
}

/* --- SOFT --- */
.ng-snackbar--soft.cdark {
  background: var(--ng-cdark-soft, rgb(88.68, 88.68, 88.68));
  color: var(--ng-cdark-dark, #2b2b2b);
  border: 1px solid rgba(var(--ng-hover-tint), 0.08);
  border-inline-start: 6px solid var(--ng-cdark-bg, #424242);
}

/* ===== Position modifiers ===== */
/* reset base */
.ng-snackbar-stack {
  inset: auto;
}

/* --- Vertical --- */
.ng-snackbar-stack.top {
  inset-block-start: var(--ng-snackbar-offset);
}

.ng-snackbar-stack.middle {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.ng-snackbar-stack.bottom {
  inset-block-end: var(--ng-snackbar-offset);
}

/* --- Horizontal --- */
.ng-snackbar-stack.left {
  inset-inline-start: var(--ng-snackbar-offset);
  align-items: flex-start;
}

.ng-snackbar-stack.center {
  inset-inline-start: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.ng-snackbar-stack.right {
  inset-inline-end: var(--ng-snackbar-offset);
  align-items: flex-end;
}

.ng-snackbar-stack.middle.center {
  transform: translate(-50%, -50%);
}

/* ==========================================================
NexiGrid — Spinner
----------------------------------------------------------
Spinner circolare (border + rotazione). Size sm/lg, center.
Integrazione con .ng-btn / .ng-auto-disable in stato
is-loading (posizioni spinner-right/left/top/bottom). SCSS-only.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
@keyframes ng-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ===== Base Spinner ===== */
.ng-spinner {
  /* Scoped variables */
  --ng-spinner-size: 1.5rem;
  --ng-spinner-border-width: 3px;
  --ng-spinner-track-color: rgba(var(--ng-hover-tint), .15);
  --ng-spinner-active-color: currentColor;
  --ng-spinner-speed: .6s;
  display: inline-block;
  width: var(--ng-spinner-size);
  height: var(--ng-spinner-size);
  border: var(--ng-spinner-border-width) solid var(--ng-spinner-track-color);
  border-top-color: var(--ng-spinner-active-color);
  border-radius: 50%;
  animation: ng-spin var(--ng-spinner-speed) linear infinite;
  /* Sizes */
  /* Center helper */
}
.ng-spinner.sm {
  --ng-spinner-size: 1rem;
  --ng-spinner-border-width: 2px;
}
.ng-spinner.lg {
  --ng-spinner-size: 2.2rem;
  --ng-spinner-border-width: 4px;
}
.ng-spinner.center {
  display: block;
  margin: 1rem auto;
}

/* ===== Button Integration (.ng-btn / .ng-auto-disable, is-loading) ===== */
.ng-btn.is-loading,
.ng-auto-disable.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}

/* Spinner solo se presente spinner-* */
.ng-btn.is-loading.spinner-right::after,
.ng-btn.is-loading.spinner-left::after,
.ng-btn.is-loading.spinner-top::after,
.ng-btn.is-loading.spinner-bottom::after,
.ng-auto-disable.is-loading.spinner-right::after,
.ng-auto-disable.is-loading.spinner-left::after,
.ng-auto-disable.is-loading.spinner-top::after,
.ng-auto-disable.is-loading.spinner-bottom::after {
  content: "";
  --ng-spinner-size: 1em;
  --ng-spinner-border-width: 2px;
  --ng-spinner-track-color: rgba(255,255,255,.3);
  --ng-spinner-active-color: currentColor;
  --ng-spinner-speed: .6s;
  width: var(--ng-spinner-size);
  height: var(--ng-spinner-size);
  border: var(--ng-spinner-border-width) solid var(--ng-spinner-track-color);
  border-top-color: var(--ng-spinner-active-color);
  border-radius: 50%;
  animation: ng-spin var(--ng-spinner-speed) linear infinite;
}

/* Positions */
.ng-btn.is-loading.spinner-right,
.ng-auto-disable.is-loading.spinner-right {
  flex-direction: row;
}

.ng-btn.is-loading.spinner-left,
.ng-auto-disable.is-loading.spinner-left {
  flex-direction: row-reverse;
}

.ng-btn.is-loading.spinner-top,
.ng-auto-disable.is-loading.spinner-top {
  flex-direction: column-reverse;
}

.ng-btn.is-loading.spinner-bottom,
.ng-auto-disable.is-loading.spinner-bottom {
  flex-direction: column;
}

/* ==========================================================
NexiGrid — Steps
----------------------------------------------------------
Steps/wizard: stili classic e bar, stati is-active/is-done, size.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-steps {
  --ng-steps-gap: .75rem;
  --ng-steps-font-size: .95rem;
  --ng-steps-text-color: var(--ng-primary-bg, #05f);
  --ng-steps-circle-size: 1.4rem;
  --ng-steps-circle-color: var(--ng-text-on-fill);
  --ng-steps-circle-bg: var(--ng-primary-bg, #5125eb);
  --ng-steps-circle-font: .75rem;
  --ng-steps-line-width: 20px;
  --ng-steps-line-height: 1px;
  --ng-steps-line-color: rgba(var(--ng-hover-tint), .2);
  font-size: var(--ng-steps-font-size);
  color: var(--ng-steps-text-color);
  /* =================================================
  STEPS — CLASSIC
  ================================================= */
  /* =================================================
  STEPS — BAR
  ================================================= */
  /* =================================================
  SIZE
  ================================================= */
}
.ng-steps.classic {
  display: flex;
  align-items: center;
  gap: var(--ng-steps-gap);
  counter-reset: step;
}
.ng-steps.classic .ng-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  counter-increment: step;
}
.ng-steps.classic .ng-step::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ng-steps-circle-size);
  height: var(--ng-steps-circle-size);
  border-radius: 50%;
  font-size: var(--ng-steps-circle-font);
  background: var(--ng-steps-circle-bg);
  color: var(--ng-steps-circle-color);
  flex: 0 0 auto;
}
.ng-steps.classic .ng-step:not(:last-child)::after {
  content: "";
  width: var(--ng-steps-line-width);
  height: var(--ng-steps-line-height);
  background: var(--ng-steps-line-color);
  margin-left: var(--ng-steps-gap);
}
.ng-steps.classic .ng-step.is-active {
  font-weight: 600;
}
.ng-steps.bar {
  position: relative;
  width: 100%;
  --ng-steps-track-height: 2px;
  --ng-steps-track-color: var(--ng-fill);
  --ng-steps-progress-color: var(--ng-primary-bg, #2563eb);
}
.ng-steps.bar .steps-track {
  position: absolute;
  top: calc(var(--ng-steps-circle-size) / 2);
  left: 0;
  right: 0;
  height: var(--ng-steps-track-height);
  background: var(--ng-steps-track-color);
}
.ng-steps.bar .steps-progress {
  height: 100%;
  background: var(--ng-steps-progress-color);
}
.ng-steps.bar .steps-items {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.ng-steps.bar .ng-step {
  text-align: center;
}
.ng-steps.bar .ng-step-dot {
  width: var(--ng-steps-circle-size);
  height: var(--ng-steps-circle-size);
  border-radius: 50%;
  background: var(--ng-steps-circle-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ng-steps-circle-font);
  color: var(--ng-steps-circle-color);
  margin: 0 auto 0.35rem;
}
.ng-steps.bar .ng-step-label {
  font-size: 0.9em;
}
.ng-steps.bar .ng-step.is-done .ng-step-dot,
.ng-steps.bar .ng-step.is-active .ng-step-dot {
  background: var(--ng-steps-progress-color);
  color: #fff;
}
.ng-steps.sm {
  --ng-steps-font-size: .75rem;
  --ng-steps-gap: .35rem;
}
.ng-steps.lg {
  --ng-steps-font-size: 1.2rem;
  --ng-steps-gap: 1.1rem;
}

/* ===
NexiGrid — Table
---
Sistema tabella dati: header, filtri, column toggle, wrapper scrollabile, zebra/hover/selected, sorting, width system, sticky (.scroll-y interno / .sticky-page esterno), empty/loading/error · dipende dai token globali ($ng-colors, --ng-color-border, --ng-radius, --ng-gap, z-layer)
---
Version: 2.4.5 · Status: stable
=== */
.ng-table {
  --ng-table-gap: var(--ng-gap);
  /* radius: default md via fallback-at-use (non dichiarato → :root cascata) */
  --ng-table-text: currentColor;
  --ng-table-muted: var(--ng-text-muted);
  --ng-table-border-color: var(--ng-color-border);
  --ng-table-border-width: var(--ng-border-width, 1px);
  --ng-table-border-style: solid;
  --ng-table-border-strong: rgba(var(--ng-hover-tint), .18);
  --ng-table-line: var(--ng-table-border-width) var(--ng-table-border-style) var(--ng-table-border-color);
  --ng-table-head-height: 60px;
  --ng-table-head-padding: .75rem .85rem;
  --ng-table-cell-padding: .8rem 1.3rem;
  --ng-table-header-text: currentColor;
  --ng-table-head-bg: var(--ng-surface-sunken);
  /* Sticky/scroll (vedi modifier .scroll-y / .sticky-page in fondo) */
  --ng-table-max-h: 420px;
  --ng-table-sticky-top: 0px;
  --ng-table-row-odd: var(--ng-surface); /* base */
  --ng-table-row-even: var(--ng-surface-sunken); /* zebra leggerissimo */
  --ng-table-row-hover: rgba(var(--ng-hover-tint), .06); /* hover */
  /* selected: viola pallido, theme-aware. Mix OPACO (base --ng-surface, non
     transparent) → resta solido e non si moltiplica sulla zebra; adatta al
     tema (in dark --ng-surface è scuro → riga viola scura, non bianca). */
  --ng-table-row-selected: color-mix(in srgb, var(--ng-primary-bg) 7%, var(--ng-surface));
  /* sub-table (detail-row) */
  --ng-table-detail-bg: var(--ng-surface);
  --ng-table-detail-pad: 1rem;
  /* #7: allineato al brand (era success) per coerenza con la firma focus
     di form/button/modal. Pilota check-checked + outline focus/sort. */
  --ng-table-focus: var(--ng-primary-bg, #4a2a86);
  --ng-table-check-size: 16px;
  --ng-table-check-radius: var(--ng-radius-sm);
  --ng-table-check-border: var(--ng-table-border-strong);
  --ng-table-check-bg: var(--ng-surface, #fff);
  --ng-table-check-checked-bg-border: transparent;
  --ng-table-check-checked-bg: var(--ng-table-focus);
  --ng-table-check-checked-color: var(--ng-primary-text, #fff);
  display: flex;
  flex-direction: column;
  gap: var(--ng-table-gap);
  width: 100%;
}

/* ============================================================
HEADER
============================================================ */
.ng-table-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ng-table-gap);
  flex-wrap: wrap;
}

.ng-table-head-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 220px;
}

.ng-table-head-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ng-table-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ng-table-text);
}

.ng-table-subtitle {
  font-size: 0.85rem;
  color: var(--ng-table-muted);
}

/* ============================================================
FILTERS (LEFT / RIGHT)
============================================================ */
.ng-table-filters,
.ng-table-filters-left,
.ng-table-filters-right {
  min-width: 0;
}

.ng-table-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ng-table-gap);
  flex-wrap: wrap;
  padding: 0.9rem;
  border: var(--ng-border-width, 1px) solid var(--ng-table-border-color);
  border-radius: var(--ng-table-radius, var(--ng-radius-md));
}

.ng-table-filters-left,
.ng-table-filters-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ng-table-filters-left a,
.ng-table-filters-right a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ng-table-filters-right {
  margin-inline-start: auto;
}

/* Dropdown nella filter bar: il base .ng-dropdown ha align-self:flex-start
   (anti-stretch deliberato) → qui si appunterebbe in alto rispetto a item
   più alti (input 40px). Nella bar va centrato come gli altri. */
.ng-table-filters .ng-dropdown {
  align-self: center;
}

/* ============================================================
FILTER FIELD WRAPPER
============================================================ */
.ng-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 80px;
}

.ng-filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}

.ng-filter-select {
  appearance: none;
  /* freccia: colore fisso mid-grey (currentColor non eredita in bg-image →
     sarebbe nera/invisibile in dark). #888 leggibile su light e dark. #2 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23888888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 6px;
  padding-right: 2rem;
}

.ng-filter-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.ng-filter-inline label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  margin: 0;
}

/* ============================================================
COLUMN TOGGLE (checkbox in dropdown)
Scoped a .ng-table: altrimenti questi stili leakano su OGNI dropdown del
framework (item + checkbox custom). Vedi review #5 finding #1.
============================================================ */
.ng-table .ng-dropdown-menu .ng-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  user-select: none;
}
.ng-table .ng-dropdown-menu .ng-dropdown-item:hover {
  background: var(--ng-table-row-hover);
}
.ng-table .ng-dropdown-menu .ng-dropdown-item input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: var(--ng-table-check-size);
  height: var(--ng-table-check-size);
  border: 1px solid var(--ng-table-check-border);
  border-radius: var(--ng-table-check-radius, var(--ng-radius-sm));
  background: var(--ng-table-check-bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  margin: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ng-table .ng-dropdown-menu .ng-dropdown-item input[type=checkbox]::after {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform 0.15s ease;
  background: var(--ng-table-check-checked-color);
  border-radius: 2px;
}
.ng-table .ng-dropdown-menu .ng-dropdown-item input[type=checkbox]:checked {
  background: var(--ng-table-check-checked-bg);
  border-color: var(--ng-table-check-checked-bg-border);
}
.ng-table .ng-dropdown-menu .ng-dropdown-item input[type=checkbox]:checked::after {
  transform: scale(1);
}
.ng-table .ng-dropdown-menu .ng-dropdown-item input[type=checkbox]:focus-visible {
  outline: 2px solid var(--ng-table-focus);
  outline-offset: 2px;
}

/* ============================================================
TABLE WRAPPER
============================================================ */
.ng-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: var(--ng-table-line);
  border-radius: var(--ng-table-radius, var(--ng-radius-md));
}

/* ============================================================
SCROLL / STICKY MODIFIERS (#6 scroll-y interno · #7 sticky-page)
------------------------------------------------------------
thead th è sticky (top: --ng-table-sticky-top). Il wrapper, con overflow-x:auto,
è scroll-container anche in Y: senza una di queste modalità l'header non resta
agganciato allo scroll di pagina. Scegliere UNA modalità:

 .ng-table.scroll-y    → altezza fissa + scroll verticale DENTRO il wrapper;
                          header sticky interno. Altezza: --ng-table-max-h (420px).
 .ng-table.sticky-page → niente scroll interno; header sticky allo scroll di
                          PAGINA con offset --ng-table-sticky-top (es. sotto un
                          header app fixed). NB: il wrapper non scrolla in
                          orizzontale in questa modalità.
============================================================ */
.ng-table.scroll-y .ng-table-wrapper {
  max-height: var(--ng-table-max-h, 420px);
  overflow-y: auto;
}

.ng-table.sticky-page .ng-table-wrapper {
  overflow: visible;
}

/* ============================================================
TABLE BASE
============================================================ */
.ng-table-table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: inherit;
  color: var(--ng-table-text);
}

/* HEADER TABLE */
.ng-table-table thead th {
  height: var(--ng-table-head-height);
  padding: var(--ng-table-head-padding);
  position: sticky;
  top: var(--ng-table-sticky-top, 0);
  z-index: var(--ng-z-table, 150);
  background: var(--ng-table-head-bg);
  border-bottom: var(--ng-table-line);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ng-table-header-text);
  white-space: nowrap;
}

/* BODY */
.ng-table-table tbody td {
  padding: var(--ng-table-cell-padding);
  border-bottom: var(--ng-table-line);
  vertical-align: middle;
}

.ng-table-table tbody tr:last-child td {
  border-bottom: none;
}

/* Vertical grid lines */
.ng-table-table thead th + th,
.ng-table-table tbody td + td {
  border-left: var(--ng-table-line);
}

/* =========================
   ZEBRA ROWS + SELECTED
========================= */
/* `of :not(.ng-table-detail)` → le righe-dettaglio della sub-table NON
   contano nella parità zebra (altrimenti sfaserebbero le righe sotto). */
.ng-table-table.zebra tbody tr:nth-child(odd of :not(.ng-table-detail)) {
  background-color: var(--ng-table-row-odd);
}

.ng-table-table.zebra tbody tr:nth-child(even of :not(.ng-table-detail)) {
  background-color: var(--ng-table-row-even);
}

.ng-table-table tbody tr.is-selected > td {
  background-color: var(--ng-table-row-selected);
}

/* ============================================================
ROW BEHAVIOR
============================================================ */
/* Hover globale (escluse le righe-dettaglio della sub-table) */
.ng-table-table.row-hover tbody tr:not(.ng-table-detail):hover td {
  background: var(--ng-table-row-hover);
}

/* Clickable globale */
.ng-table-table.row-clickable tbody tr {
  cursor: pointer;
}

/* Selected singola riga */
.ng-table-table tbody tr.row-selected td,
.ng-table-table tbody tr[aria-selected=true] td {
  background: var(--ng-table-row-selected);
}

/* ============================================================
SUB-TABLE (detail-row gemella) — opt-in data-table-expandable
============================================================ */
/* colonna + cella expander (stretta) */
.ng-table-expander-col,
.ng-table-expander-cell {
  inline-size: 1%;
  white-space: nowrap;
  text-align: center;
}

.ng-table-expander {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.15rem;
  line-height: 1;
  font-size: 1rem; /* base = md; icona e testo scalano con questo */
  color: var(--ng-text-muted, #777);
  transition: color 0.15s ease;
}
.ng-table-expander i {
  display: inline-flex;
  line-height: 1;
  font-size: 1em;
  transition: transform 0.15s ease;
}
.ng-table-expander:hover {
  color: var(--ng-text, #222);
}

/* trigger testuale (es. Open/Close) */
.ng-table-expander-label {
  line-height: 1;
  white-space: nowrap;
}

.ng-table-expander-text {
  padding-inline: 0.5rem;
  font-weight: 600;
}

/* dimensioni trigger (sm | md | lg | xl) — scalano icona + testo */
.ng-table-expander-sm {
  font-size: 0.8rem;
}

.ng-table-expander-md {
  font-size: 1rem;
}

.ng-table-expander-lg {
  font-size: 1.2rem;
}

.ng-table-expander-xl {
  font-size: 1.45rem;
}

/* caret-right → punta in basso quando la riga è aperta (default).
   Con icone custom (data-collapse-icon, es. plus/minus) lo swap del glifo
   sostituisce la rotazione → rotazione disattivata per quella tabella. */
.ng-table-table tbody tr.is-expanded .ng-table-expander i {
  transform: rotate(90deg);
}

.ng-table[data-collapse-icon] .ng-table-table tbody tr.is-expanded .ng-table-expander i {
  transform: none;
}

/* riga-dettaglio: neutra (no zebra/hover/selected), padding gestito dal content */
.ng-table-detail > td {
  padding: 0;
  background: var(--ng-table-detail-bg);
}

/* animazione apertura: grid-template-rows 0fr→1fr via @starting-style
   (parte da 0 ogni volta che il nodo entra nel DOM = a ogni expand) */
.ng-table-detail-inner {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s ease;
}

@starting-style {
  .ng-table-detail-inner {
    grid-template-rows: 0fr;
  }
}
.ng-table-detail-content {
  overflow: hidden;
  min-block-size: 0;
  padding: var(--ng-table-detail-pad);
}

/* ============================================================
CELL UTILITIES
============================================================ */
.ng-tcol-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ng-tcol-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em;
  color: var(--ng-table-muted);
}

.ng-tcol-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ng-tcol-center {
  text-align: center;
}

/* ============================================================
WIDTH SYSTEM
============================================================ */
.ng-tcol-w-1 {
  width: 5%;
}

.ng-tcol-w-5 {
  width: 5%;
}

.ng-tcol-w-10 {
  width: 10%;
}

.ng-tcol-w-15 {
  width: 15%;
}

.ng-tcol-w-20 {
  width: 20%;
}

.ng-tcol-w-25 {
  width: 25%;
}

.ng-tcol-w-30 {
  width: 30%;
}

.ng-tcol-w-35 {
  width: 35%;
}

.ng-tcol-w-40 {
  width: 40%;
}

.ng-tcol-w-45 {
  width: 45%;
}

.ng-tcol-w-50 {
  width: 50%;
}

.ng-tcol-w-55 {
  width: 55%;
}

.ng-tcol-w-60 {
  width: 60%;
}

.ng-tcol-w-65 {
  width: 65%;
}

.ng-tcol-w-70 {
  width: 70%;
}

.ng-tcol-w-75 {
  width: 75%;
}

.ng-tcol-w-80 {
  width: 80%;
}

.ng-tcol-w-85 {
  width: 85%;
}

.ng-tcol-w-90 {
  width: 90%;
}

.ng-tcol-w-95 {
  width: 95%;
}

.ng-col-grow {
  width: auto;
}

/* ============================================================
SORTING
============================================================ */
.ng-sortable {
  cursor: pointer;
  user-select: none;
  /* hover */
  /* stati attivi */
}
.ng-sortable:focus-visible {
  outline: 2px solid var(--ng-table-focus);
  outline-offset: 2px;
}
.ng-sortable .ng-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ng-sortable .ng-sort-indicator {
  font-size: 0.8rem;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.ng-sortable .ng-sort-indicator::before {
  content: "↕";
}
.ng-sortable:hover .ng-sort-indicator {
  opacity: 0.7;
}
.ng-sortable[data-sort=asc] .ng-sort-indicator::before {
  content: "↑";
  opacity: 1;
}
.ng-sortable[data-sort=desc] .ng-sort-indicator::before {
  content: "↓";
  opacity: 1;
}

/* ============================================================
EMPTY STATE
============================================================ */
.ng-table-empty td {
  text-align: center;
  padding: 1.2rem;
  opacity: 0.6;
  font-style: italic;
}

/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 575.98px) {
  .ng-table-head-right {
    justify-content: flex-start;
  }
  .ng-table-table thead th,
  .ng-table-table tbody td {
    padding: 0.55rem 0.62rem;
  }
  .ng-filter {
    width: 100%;
  }
}
/* ============================================================
LOADING / ERROR BOX
============================================================ */
.ng-table.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.ng-table-error-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  font-size: 0.9rem;
  background: var(--ng-danger-soft, #ffe5e5);
  border-radius: var(--ng-radius-md);
  color: var(--ng-danger-dark, #995353);
  font-weight: 600;
}

/* ==========================================================
NexiGrid — Tabs
----------------------------------------------------------
Tab nav + content panels. Varianti classic/pills/vertical.
Stati is-active/is-disabled. JS ng_tabs.js.
Modello root+scoped: i bordi "standard" puntano al token
globale (--ng-color-border); gli altri knob sono scoped sul
componente (override per-istanza/contesto).
----------------------------------------------------------
Version: 1.1 · Status: stable
========================================================== */
.ng-tabs {
  /* === Scoped variables === */
  --ng-tabs-nav-gap: .5rem;
  --ng-tabs-nav-pad-x: .75rem; /* inset dai bordi della nav (no edge-touch) */
  --ng-tabs-nav-border: 1px solid var(--ng-color-border, rgba(229,229,229,1));
  --ng-tab-panel-scroll-border: 1px solid rgba(var(--ng-hover-tint), .08);
  --ng-tab-color: var(--ng-text-muted);
  --ng-tab-color-hover: var(--ng-text);
  --ng-tab-color-active: var(--ng-text);
  --ng-tab-bg-hover: transparent;
  --ng-tab-bg-active: transparent;
  --ng-tab-border-active: var(--ng-color-border-middle);
  /* radius: default 0 via fallback-at-use (non dichiarato → :root cascata) */
  --ng-tab-font-size: .9rem;
  --ng-tab-font-weight: 500;
  --ng-tab-font-weight-active: 600;
  --ng-tab-nav-line-height: 1.2;
  --ng-tab-padding-y: 1.4rem;
  --ng-tab-padding-x: 1rem;
  --ng-tab-panel-padding-y: 1.25rem;
  --ng-tab-panel-padding-x: 1.25rem;
  --ng-tab-underline-height: 2px;
  --ng-tab-underline-color: var(--ng-color-border, #ccc);
  --ng-tab-transition: .2s ease;
  display: flex;
  flex-direction: column;
  /* ===== Nav ===== */
  /* ===== Content ===== */
}
.ng-tabs .ng-tabs-nav {
  display: flex;
  gap: var(--ng-tabs-nav-gap);
  border-bottom: var(--ng-tabs-nav-border);
  /* Default: voci distribuite (space-evenly) e MAI a contatto coi bordi.
     Il padding-inline garantisce l'inset dai bordi su OGNI variante
     (anche .right / group-right / .start). */
  justify-content: space-evenly;
  padding-inline: var(--ng-tabs-nav-pad-x);
  /* Opt-out: layout compatto a sinistra */
  /* .spread = ora ridondante (default), mantenuto come alias retro-compatibile */
}
.ng-tabs .ng-tabs-nav.start {
  justify-content: flex-start;
}
.ng-tabs .ng-tabs-nav.spread {
  justify-content: space-evenly;
}
.ng-tabs .ng-tabs-nav .ng-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: none;
  border: 0;
  margin: 0;
  padding: var(--ng-tab-padding-y) var(--ng-tab-padding-x);
  font: inherit;
  font-size: var(--ng-tab-font-size);
  font-weight: var(--ng-tab-font-weight);
  color: var(--ng-tab-color);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  transition: color var(--ng-tab-transition), background var(--ng-tab-transition);
}
.ng-tabs .ng-tabs-nav .ng-tab:hover {
  color: var(--ng-tab-color-hover);
  background: var(--ng-tab-bg-hover);
}
.ng-tabs .ng-tabs-nav .ng-tab.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.ng-tabs .ng-tabs-nav .ng-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: var(--ng-tab-underline-height);
  background: var(--ng-tab-underline-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ng-tab-transition);
}
.ng-tabs .ng-tabs-nav .ng-tab.is-active {
  color: var(--ng-tab-color-active);
  font-weight: var(--ng-tab-font-weight-active);
  background: var(--ng-tab-bg-active);
}
.ng-tabs .ng-tabs-nav .ng-tab.is-active::after {
  transform: scaleX(1);
}
.ng-tabs .ng-tabs-nav .ng-tab i {
  line-height: var(--ng-tab-nav-line-height);
}
.ng-tabs .ng-tabs-nav.right {
  justify-content: flex-end;
}
.ng-tabs .ng-tabs-nav .ng-tabs-group-right {
  margin-left: auto;
  display: flex;
  gap: var(--ng-tabs-nav-gap);
  align-items: center;
}
.ng-tabs .ng-tabs-nav .ng-dropdown > .ng-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: var(--ng-tab-font-size);
  font-weight: var(--ng-tab-font-weight);
  padding: var(--ng-tab-padding-y) var(--ng-tab-padding-x) 0;
  color: var(--ng-tab-color);
  cursor: pointer;
}
.ng-tabs .ng-tabs-nav .ng-dropdown > .ng-dropdown-trigger:hover {
  color: var(--ng-tab-color-hover);
}
.ng-tabs .ng-tabs-content .ng-tab-panel {
  display: none;
  padding: var(--ng-tab-panel-padding-y, 1.25rem) var(--ng-tab-panel-padding-x, 1.25rem);
}
.ng-tabs .ng-tabs-content .ng-tab-panel.is-scroll {
  overflow-y: auto;
  max-height: 250px;
  border-bottom: var(--ng-tab-panel-scroll-border);
  background: linear-gradient(90deg, var(--ng-surface) 0%, var(--ng-surface-sunken) 100%);
  padding: 10px var(--ng-tab-panel-padding-x);
}
.ng-tabs .ng-tabs-content .ng-tab-panel.is-active {
  display: block;
}

/* ==========================================================
Variante Classic (background active)
========================================================== */
.ng-tabs.classic {
  --ng-tab-bg-hover: rgba(var(--ng-hover-tint), .08);
  --ng-tab-bg-active: var(--ng-fill);
  --ng-tab-border-active: transparent;
}
.ng-tabs.classic .ng-tabs-nav .ng-tab {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--ng-tab-border-active);
  border-bottom: 0;
  border-radius: var(--ng-tab-radius, var(--ng-radius-0));
}
.ng-tabs.classic .ng-tabs-nav .ng-tab:hover {
  background: var(--ng-tab-bg-hover);
}
.ng-tabs.classic .ng-tabs-nav .ng-tab.is-active {
  background: var(--ng-tab-bg-active);
}
.ng-tabs.classic .ng-tabs-nav .ng-tab.is-active:hover {
  background: var(--ng-tab-bg-hover);
}

/* ==========================================================
Variante Pills
========================================================== */
.ng-tabs.pills {
  --ng-tab-padding-y: .45rem;
  --ng-tab-padding-x: .9rem;
  --ng-tab-pill-bg: var(--ng-surface-sunken);
  --ng-tab-pill-bg-hover: var(--ng-fill);
  --ng-tab-pill-bg-active: var(--ng-text);
  --ng-tab-pill-color-active: var(--ng-surface);
}
.ng-tabs.pills .ng-tabs-nav {
  border-bottom: 0;
  gap: 0.5rem;
}
.ng-tabs.pills .ng-tabs-nav .ng-tab {
  border-radius: var(--ng-radius-pill);
  background: var(--ng-tab-pill-bg);
}
.ng-tabs.pills .ng-tabs-nav .ng-tab::after {
  display: none;
}
.ng-tabs.pills .ng-tabs-nav .ng-tab:hover {
  background: var(--ng-tab-pill-bg-hover);
}
.ng-tabs.pills .ng-tabs-nav .ng-tab.is-active {
  background: var(--ng-tab-pill-bg-active);
  color: var(--ng-tab-pill-color-active);
}

/* ==========================================================
Variante Vertical
========================================================== */
.ng-tabs.vertical {
  flex-direction: row;
  align-items: flex-start;
  --ng-tabs-vertical-border: 1px solid var(--ng-color-border, #e5e5e5);
}
.ng-tabs.vertical .ng-tabs-nav {
  flex-direction: column;
  border-bottom: 0;
  border-right: var(--ng-tabs-vertical-border);
  padding-inline: 0; /* no inset orizzontale in verticale */
  padding-right: 1rem;
  gap: 0.75rem;
  justify-content: flex-start; /* verticale: tab in alto, non spread */
}
.ng-tabs.vertical .ng-tabs-nav .ng-tab {
  padding: var(--ng-tab-padding-y) var(--ng-tab-padding-x);
}
.ng-tabs.vertical .ng-tabs-nav .ng-tab::after {
  left: auto;
  right: -1rem;
  top: 0;
  bottom: 0;
  width: var(--ng-tab-underline-height);
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
}
.ng-tabs.vertical .ng-tabs-nav .ng-tab.is-active::after {
  transform: scaleY(1);
}
.ng-tabs.vertical .ng-tabs-content {
  flex: 1 1 auto;
  padding-left: 1rem;
}

/* ==========================================================
NexiGrid — Toggle (Collapsible)
----------------------------------------------------------
Target collassabile (.ng-toggle-target) con transizione di
height/opacity. Stato is-open. JS ng_toggle.js.
----------------------------------------------------------
Version: 1.0 · Status: stable
========================================================== */
.ng-toggle-target {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.25s ease, opacity 0.2s ease;
  will-change: height;
}
.ng-toggle-target.is-open {
  opacity: 1;
}

/* ==========================================================
NexiGrid — Tooltip
----------------------------------------------------------
Tooltip su trigger (JS ng_tooltip.js). Posizioni is-top/
bottom/left/right con arrow. Colori da $ng-colors (token L1/L2).
Contenuto: data-tooltip (testo); con data-tooltip-html sul trigger
reso come HTML (es. <br>/<b>) — SOLO contenuto fidato.
Posizione viewport-aware: auto-flip sul lato opposto + clamp ai bordi
(mai tagliato); l'arrow segue il lato finale.
----------------------------------------------------------
Version: 1.2 · Status: stable
========================================================== */
.ng-tooltip {
  --ng-tooltip-bg: #111;
  --ng-tooltip-color: #fff;
  /* radius: default sm via fallback-at-use (non dichiarato → :root cascata) */
  --ng-tooltip-padding-y: .35rem;
  --ng-tooltip-padding-x: .6rem;
  --ng-tooltip-font-size: .75rem;
  --ng-tooltip-shadow: 0 6px 18px rgba(0,0,0,.18);
  position: absolute;
  z-index: var(--ng-z-tooltip, 9999);
  pointer-events: none;
  background: var(--ng-tooltip-bg);
  color: var(--ng-tooltip-color);
  border-radius: var(--ng-tooltip-radius, var(--ng-radius-sm));
  padding: var(--ng-tooltip-padding-y) var(--ng-tooltip-padding-x);
  font-size: var(--ng-tooltip-font-size);
  box-shadow: var(--ng-tooltip-shadow);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ng-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
ARROW (small + $ng-colors support)
============================================================ */
.ng-tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* 4 direzioni generate da mappa: edge offset (-5px) + center 50% + arrow */
.ng-tooltip.is-top::after {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-color: var(--ng-tooltip-bg) transparent transparent transparent;
}

.ng-tooltip.is-bottom::after {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent var(--ng-tooltip-bg) transparent;
}

.ng-tooltip.is-left::after {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent var(--ng-tooltip-bg);
}

.ng-tooltip.is-right::after {
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 5px 5px 0;
  border-color: transparent var(--ng-tooltip-bg) transparent transparent;
}

/* ============================================================
COLOR VARIANTS (from $ng-colors)
============================================================ */
.ng-tooltip.ng-tooltip-primary {
  --ng-tooltip-bg: var(--ng-primary-bg, #4a2a86);
  --ng-tooltip-color: var(--ng-primary-text, #ffffff);
}

.ng-tooltip.ng-tooltip-secondary {
  --ng-tooltip-bg: var(--ng-secondary-bg, #7d2342);
  --ng-tooltip-color: var(--ng-secondary-text, #ffffff);
}

.ng-tooltip.ng-tooltip-success {
  --ng-tooltip-bg: var(--ng-success-bg, #1da571);
  --ng-tooltip-color: var(--ng-success-text, #ffffff);
}

.ng-tooltip.ng-tooltip-info {
  --ng-tooltip-bg: var(--ng-info-bg, #119bdc);
  --ng-tooltip-color: var(--ng-info-text, #ffffff);
}

.ng-tooltip.ng-tooltip-warning {
  --ng-tooltip-bg: var(--ng-warning-bg, #dd7900);
  --ng-tooltip-color: var(--ng-warning-text, #ffffff);
}

.ng-tooltip.ng-tooltip-danger {
  --ng-tooltip-bg: var(--ng-danger-bg, #f2415c);
  --ng-tooltip-color: var(--ng-danger-text, #ffffff);
}

.ng-tooltip.ng-tooltip-mute {
  --ng-tooltip-bg: var(--ng-mute-bg, #c8c8c8);
  --ng-tooltip-color: var(--ng-mute-text, #646464);
}

.ng-tooltip.ng-tooltip-blue {
  --ng-tooltip-bg: var(--ng-blue-bg, #3b82f6);
  --ng-tooltip-color: var(--ng-blue-text, #ffffff);
}

.ng-tooltip.ng-tooltip-blue-sky {
  --ng-tooltip-bg: var(--ng-blue-sky-bg, #6cc8ff);
  --ng-tooltip-color: var(--ng-blue-sky-text, #07456e);
}

.ng-tooltip.ng-tooltip-green {
  --ng-tooltip-bg: var(--ng-green-bg, #2e7d32);
  --ng-tooltip-color: var(--ng-green-text, #ffffff);
}

.ng-tooltip.ng-tooltip-lime {
  --ng-tooltip-bg: var(--ng-lime-bg, #9edc00);
  --ng-tooltip-color: var(--ng-lime-text, #476f11);
}

.ng-tooltip.ng-tooltip-aguagreen {
  --ng-tooltip-bg: var(--ng-aguagreen-bg, #0e9c7e);
  --ng-tooltip-color: var(--ng-aguagreen-text, #ffffff);
}

.ng-tooltip.ng-tooltip-indigo {
  --ng-tooltip-bg: var(--ng-indigo-bg, #4f46e5);
  --ng-tooltip-color: var(--ng-indigo-text, #ffffff);
}

.ng-tooltip.ng-tooltip-purple {
  --ng-tooltip-bg: var(--ng-purple-bg, #a027f0);
  --ng-tooltip-color: var(--ng-purple-text, #ffffff);
}

.ng-tooltip.ng-tooltip-purple-heart {
  --ng-tooltip-bg: var(--ng-purple-heart-bg, #b23a8a);
  --ng-tooltip-color: var(--ng-purple-heart-text, #ffffff);
}

.ng-tooltip.ng-tooltip-cyan {
  --ng-tooltip-bg: var(--ng-cyan-bg, #009dd9);
  --ng-tooltip-color: var(--ng-cyan-text, #ffffff);
}

.ng-tooltip.ng-tooltip-magenta {
  --ng-tooltip-bg: var(--ng-magenta-bg, #d4007f);
  --ng-tooltip-color: var(--ng-magenta-text, #ffffff);
}

.ng-tooltip.ng-tooltip-yellow {
  --ng-tooltip-bg: var(--ng-yellow-bg, #ffd200);
  --ng-tooltip-color: var(--ng-yellow-text, #8a6800);
}

.ng-tooltip.ng-tooltip-clight {
  --ng-tooltip-bg: var(--ng-clight-bg, #f0f0f0);
  --ng-tooltip-color: var(--ng-clight-text, #1f2937);
}

.ng-tooltip.ng-tooltip-cdark {
  --ng-tooltip-bg: var(--ng-cdark-bg, #424242);
  --ng-tooltip-color: var(--ng-cdark-text, #f0f0f0);
}

/* ===
NexiGrid — Brand Signature (button + badge)
---
Firme visive che distinguono NG dall'effetto Bootstrap 5. Applicate solo a
.ng-btn e .ng-badge, opt-out con .ng-flat su un'istanza:

  C. Radius 3px         → silhouette "precision", baseline master --ng-radius
  D. Padding premium    → respiro tipografico, ogni size scalata
  E. Microtipografia    → weight 600 + tracking +.02em (no uppercase)
  Bar  (hover)          → barra animata top o bottom, 4 direzioni opt-in
                          (.ng-btn-bar + posizione + direzione). Vedi sotto.

  .ng-flat              → opt-out: radius sm (5px), padding default, tipografia
                          default, niente bar (= look BS5-like).

Token-based: 0 hex hardcoded. Importato DOPO ng_button/ng_badge in
_ng_components.scss per garantire l'override.
---
Version: 1.0 · Status: experimental
=== */
/* ============================================================
C — Radius (silhouette "3px precision", non BS5)
   Base = master --ng-radius (3px), gestita da _ng_button/_ng_badge via
   fallback-at-use. Qui NON si forza più 0: la firma è la baseline 3px.
   Resta solo l'opt-out .ng-flat → 5px (più morbido, look BS5-like).
============================================================ */
.ng-btn.ng-flat {
  --ng-btn-radius: var(--ng-radius-sm);
}

.ng-badge.ng-flat {
  --ng-badge-radius: var(--ng-radius-sm);
}

/* ============================================================
D — Padding premium (default + sm + lg)
============================================================ */
.ng-btn:not(.ng-flat) {
  --ng-btn-padding-y: .95em;
  --ng-btn-padding-x: 2em;
}

.ng-btn.xs:not(.ng-flat) {
  --ng-btn-padding-y: .3em;
  --ng-btn-padding-x: .85em;
}

.ng-btn.sm:not(.ng-flat) {
  --ng-btn-padding-y: .45em;
  --ng-btn-padding-x: 1.1em;
}

.ng-btn.lg:not(.ng-flat) {
  --ng-btn-padding-y: 1.15em;
  --ng-btn-padding-x: 2.5em;
}

.ng-badge:not(.ng-flat) {
  --ng-badge-padding-y: .35em;
  --ng-badge-padding-x: .75em;
}

/* ============================================================
E — Microtipografia (sottile, senza uppercase)
============================================================ */
.ng-btn:not(.ng-flat) {
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.ng-btn.sm:not(.ng-flat) {
  font-size: 0.85rem;
}

.ng-btn.lg:not(.ng-flat) {
  font-size: 1.05rem;
}

/* ============================================================
.ng-btn-bar — barra animata su hover (opt-in)
---
Markup minimo (ad es. primary, top, da sinistra a destra):
  <button class="ng-btn ng-btn-primary ng-btn-bar ng-btn-bar-top ng-btn-bar-ltr">
    Click
  </button>

Posizione (uno tra):
  .ng-btn-bar-top
  .ng-btn-bar-bottom

Direzione (uno tra):
  .ng-btn-bar-center-out   → cresce dal centro verso i bordi
  .ng-btn-bar-out-center   → cresce dai bordi verso il centro
  .ng-btn-bar-ltr          → cresce da sinistra a destra
  .ng-btn-bar-rtl          → cresce da destra a sinistra

Tutte finiscono con la barra FULL WIDTH (rimane).

Token scoped:
  --ng-btn-bar-color   colore barra (default -border della variante color)
  --ng-btn-bar-h       altezza barra (default 3px)
  --ng-btn-bar-duration durata animazione (default .35s)
============================================================ */
.ng-btn-bar {
  /* Default: currentColor → riusa il colore del testo del componente,
     sempre in contrasto col bg per definizione del color system. Su solid
     = -text (bianco/scuro contrastante); su outline/soft = -bg del brand.
     Override personalizzato: setta --ng-btn-bar-color sull'istanza. */
  --ng-btn-bar-color: currentColor;
  --ng-btn-bar-h: 3px;
  --ng-btn-bar-duration: .35s;
  --ng-btn-bar-ease: cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

/* Barra principale (::after) — usata da ltr/rtl/center-out */
.ng-btn-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  block-size: var(--ng-btn-bar-h);
  background: var(--ng-btn-bar-color);
  opacity: 0.5;
  transform: scaleX(0);
  transition: transform var(--ng-btn-bar-duration) var(--ng-btn-bar-ease);
  pointer-events: none;
}

.ng-btn-bar.ng-btn-bar-top::after {
  top: 0;
}

.ng-btn-bar.ng-btn-bar-bottom::after {
  bottom: 0;
}

/* Origini di crescita */
.ng-btn-bar.ng-btn-bar-ltr::after {
  transform-origin: left center;
}

.ng-btn-bar.ng-btn-bar-rtl::after {
  transform-origin: right center;
}

.ng-btn-bar.ng-btn-bar-center-out::after {
  transform-origin: center;
}

/* Hover → scaleX 1 (ltr/rtl/center-out) */
.ng-btn-bar.ng-btn-bar-ltr:hover::after,
.ng-btn-bar.ng-btn-bar-rtl:hover::after,
.ng-btn-bar.ng-btn-bar-center-out:hover::after {
  transform: scaleX(1);
}

/* === out-center: due segmenti che crescono dai bordi verso il centro ===
   Usa ::before + ::after, ciascuno largo 50% con transform-origin opposta. */
.ng-btn-bar.ng-btn-bar-out-center::before,
.ng-btn-bar.ng-btn-bar-out-center::after {
  content: "";
  position: absolute;
  inline-size: 50%;
  block-size: var(--ng-btn-bar-h);
  background: var(--ng-btn-bar-color);
  opacity: 0.5;
  transform: scaleX(0);
  transition: transform var(--ng-btn-bar-duration) var(--ng-btn-bar-ease);
  pointer-events: none;
}

.ng-btn-bar.ng-btn-bar-out-center.ng-btn-bar-top::before {
  top: 0;
  left: 0;
  transform-origin: left center;
}

.ng-btn-bar.ng-btn-bar-out-center.ng-btn-bar-top::after {
  top: 0;
  right: 0;
  left: auto;
  transform-origin: right center;
}

.ng-btn-bar.ng-btn-bar-out-center.ng-btn-bar-bottom::before {
  bottom: 0;
  left: 0;
  transform-origin: left center;
}

.ng-btn-bar.ng-btn-bar-out-center.ng-btn-bar-bottom::after {
  bottom: 0;
  right: 0;
  left: auto;
  transform-origin: right center;
}

.ng-btn-bar.ng-btn-bar-out-center:hover::before,
.ng-btn-bar.ng-btn-bar-out-center:hover::after {
  transform: scaleX(1);
}

/* Disabled: niente animazione */
.ng-btn-bar:disabled::before,
.ng-btn-bar:disabled::after,
.ng-btn-bar.is-disabled::before,
.ng-btn-bar.is-disabled::after {
  display: none;
}

/* ============================================================
.ng-badge-mono — variante opt-in: monospace + uppercase + tracking largo.
============================================================ */
.ng-badge.ng-badge-mono {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  line-height: 1;
}

/* ===
NexiGrid — Helpers
---
Utility globali: spacing (margin/padding), color (text/bg/border da $ng-colors +
greys, brand-aware via token), box-shadow, visibility/position, flex, responsive, print.
---
Version: 1.0 · Status: stable
=== */
/* =================================================
SPACING UTILITIES
================================================= */
/* Margin */
.mt-4 {
  margin-top: 0.25rem;
}

.mb-4 {
  margin-bottom: 0.25rem;
}

.ml-4 {
  margin-left: 0.25rem;
}

.mr-4 {
  margin-right: 0.25rem;
}

.my-4 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mx-4 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.-mt-4 {
  margin-top: -0.25rem;
}

.-mb-4 {
  margin-bottom: -0.25rem;
}

.-ml-4 {
  margin-left: -0.25rem;
}

.-mr-4 {
  margin-right: -0.25rem;
}

.-my-4 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}

.-mx-4 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

/* Padding */
.pt-4 {
  padding-top: 0.25rem;
}

.pb-4 {
  padding-bottom: 0.25rem;
}

.pl-4 {
  padding-left: 0.25rem;
}

.pr-4 {
  padding-right: 0.25rem;
}

.py-4 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-4 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.pxy-4 {
  padding: 0.25rem;
}

.mxy-4 {
  margin: 0.25rem;
}

/* Margin */
.mt-8 {
  margin-top: 0.5rem;
}

.mb-8 {
  margin-bottom: 0.5rem;
}

.ml-8 {
  margin-left: 0.5rem;
}

.mr-8 {
  margin-right: 0.5rem;
}

.my-8 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mx-8 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.-mt-8 {
  margin-top: -0.5rem;
}

.-mb-8 {
  margin-bottom: -0.5rem;
}

.-ml-8 {
  margin-left: -0.5rem;
}

.-mr-8 {
  margin-right: -0.5rem;
}

.-my-8 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.-mx-8 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

/* Padding */
.pt-8 {
  padding-top: 0.5rem;
}

.pb-8 {
  padding-bottom: 0.5rem;
}

.pl-8 {
  padding-left: 0.5rem;
}

.pr-8 {
  padding-right: 0.5rem;
}

.py-8 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-8 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.pxy-8 {
  padding: 0.5rem;
}

.mxy-8 {
  margin: 0.5rem;
}

/* Margin */
.mt-10 {
  margin-top: 0.625rem;
}

.mb-10 {
  margin-bottom: 0.625rem;
}

.ml-10 {
  margin-left: 0.625rem;
}

.mr-10 {
  margin-right: 0.625rem;
}

.my-10 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.mx-10 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

.-mt-10 {
  margin-top: -0.625rem;
}

.-mb-10 {
  margin-bottom: -0.625rem;
}

.-ml-10 {
  margin-left: -0.625rem;
}

.-mr-10 {
  margin-right: -0.625rem;
}

.-my-10 {
  margin-top: -0.625rem;
  margin-bottom: -0.625rem;
}

.-mx-10 {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}

/* Padding */
.pt-10 {
  padding-top: 0.625rem;
}

.pb-10 {
  padding-bottom: 0.625rem;
}

.pl-10 {
  padding-left: 0.625rem;
}

.pr-10 {
  padding-right: 0.625rem;
}

.py-10 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.px-10 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.pxy-10 {
  padding: 0.625rem;
}

.mxy-10 {
  margin: 0.625rem;
}

/* Margin */
.mt-12 {
  margin-top: 0.75rem;
}

.mb-12 {
  margin-bottom: 0.75rem;
}

.ml-12 {
  margin-left: 0.75rem;
}

.mr-12 {
  margin-right: 0.75rem;
}

.my-12 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.mx-12 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.-mt-12 {
  margin-top: -0.75rem;
}

.-mb-12 {
  margin-bottom: -0.75rem;
}

.-ml-12 {
  margin-left: -0.75rem;
}

.-mr-12 {
  margin-right: -0.75rem;
}

.-my-12 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}

.-mx-12 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

/* Padding */
.pt-12 {
  padding-top: 0.75rem;
}

.pb-12 {
  padding-bottom: 0.75rem;
}

.pl-12 {
  padding-left: 0.75rem;
}

.pr-12 {
  padding-right: 0.75rem;
}

.py-12 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.px-12 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.pxy-12 {
  padding: 0.75rem;
}

.mxy-12 {
  margin: 0.75rem;
}

/* Margin */
.mt-16 {
  margin-top: 1rem;
}

.mb-16 {
  margin-bottom: 1rem;
}

.ml-16 {
  margin-left: 1rem;
}

.mr-16 {
  margin-right: 1rem;
}

.my-16 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mx-16 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.-mt-16 {
  margin-top: -1rem;
}

.-mb-16 {
  margin-bottom: -1rem;
}

.-ml-16 {
  margin-left: -1rem;
}

.-mr-16 {
  margin-right: -1rem;
}

.-my-16 {
  margin-top: -1rem;
  margin-bottom: -1rem;
}

.-mx-16 {
  margin-left: -1rem;
  margin-right: -1rem;
}

/* Padding */
.pt-16 {
  padding-top: 1rem;
}

.pb-16 {
  padding-bottom: 1rem;
}

.pl-16 {
  padding-left: 1rem;
}

.pr-16 {
  padding-right: 1rem;
}

.py-16 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-16 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.pxy-16 {
  padding: 1rem;
}

.mxy-16 {
  margin: 1rem;
}

/* Margin */
.mt-20 {
  margin-top: 1.25rem;
}

.mb-20 {
  margin-bottom: 1.25rem;
}

.ml-20 {
  margin-left: 1.25rem;
}

.mr-20 {
  margin-right: 1.25rem;
}

.my-20 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.mx-20 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.-mt-20 {
  margin-top: -1.25rem;
}

.-mb-20 {
  margin-bottom: -1.25rem;
}

.-ml-20 {
  margin-left: -1.25rem;
}

.-mr-20 {
  margin-right: -1.25rem;
}

.-my-20 {
  margin-top: -1.25rem;
  margin-bottom: -1.25rem;
}

.-mx-20 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

/* Padding */
.pt-20 {
  padding-top: 1.25rem;
}

.pb-20 {
  padding-bottom: 1.25rem;
}

.pl-20 {
  padding-left: 1.25rem;
}

.pr-20 {
  padding-right: 1.25rem;
}

.py-20 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.px-20 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.pxy-20 {
  padding: 1.25rem;
}

.mxy-20 {
  margin: 1.25rem;
}

/* Margin */
.mt-24 {
  margin-top: 1.5rem;
}

.mb-24 {
  margin-bottom: 1.5rem;
}

.ml-24 {
  margin-left: 1.5rem;
}

.mr-24 {
  margin-right: 1.5rem;
}

.my-24 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mx-24 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.-mt-24 {
  margin-top: -1.5rem;
}

.-mb-24 {
  margin-bottom: -1.5rem;
}

.-ml-24 {
  margin-left: -1.5rem;
}

.-mr-24 {
  margin-right: -1.5rem;
}

.-my-24 {
  margin-top: -1.5rem;
  margin-bottom: -1.5rem;
}

.-mx-24 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

/* Padding */
.pt-24 {
  padding-top: 1.5rem;
}

.pb-24 {
  padding-bottom: 1.5rem;
}

.pl-24 {
  padding-left: 1.5rem;
}

.pr-24 {
  padding-right: 1.5rem;
}

.py-24 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-24 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pxy-24 {
  padding: 1.5rem;
}

.mxy-24 {
  margin: 1.5rem;
}

/* Margin */
.mt-32 {
  margin-top: 2rem;
}

.mb-32 {
  margin-bottom: 2rem;
}

.ml-32 {
  margin-left: 2rem;
}

.mr-32 {
  margin-right: 2rem;
}

.my-32 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mx-32 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.-mt-32 {
  margin-top: -2rem;
}

.-mb-32 {
  margin-bottom: -2rem;
}

.-ml-32 {
  margin-left: -2rem;
}

.-mr-32 {
  margin-right: -2rem;
}

.-my-32 {
  margin-top: -2rem;
  margin-bottom: -2rem;
}

.-mx-32 {
  margin-left: -2rem;
  margin-right: -2rem;
}

/* Padding */
.pt-32 {
  padding-top: 2rem;
}

.pb-32 {
  padding-bottom: 2rem;
}

.pl-32 {
  padding-left: 2rem;
}

.pr-32 {
  padding-right: 2rem;
}

.py-32 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.px-32 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.pxy-32 {
  padding: 2rem;
}

.mxy-32 {
  margin: 2rem;
}

/* Margin */
.mt-40 {
  margin-top: 2.5rem;
}

.mb-40 {
  margin-bottom: 2.5rem;
}

.ml-40 {
  margin-left: 2.5rem;
}

.mr-40 {
  margin-right: 2.5rem;
}

.my-40 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.mx-40 {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.-mt-40 {
  margin-top: -2.5rem;
}

.-mb-40 {
  margin-bottom: -2.5rem;
}

.-ml-40 {
  margin-left: -2.5rem;
}

.-mr-40 {
  margin-right: -2.5rem;
}

.-my-40 {
  margin-top: -2.5rem;
  margin-bottom: -2.5rem;
}

.-mx-40 {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
}

/* Padding */
.pt-40 {
  padding-top: 2.5rem;
}

.pb-40 {
  padding-bottom: 2.5rem;
}

.pl-40 {
  padding-left: 2.5rem;
}

.pr-40 {
  padding-right: 2.5rem;
}

.py-40 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.px-40 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.pxy-40 {
  padding: 2.5rem;
}

.mxy-40 {
  margin: 2.5rem;
}

/* Margin */
.mt-48 {
  margin-top: 3rem;
}

.mb-48 {
  margin-bottom: 3rem;
}

.ml-48 {
  margin-left: 3rem;
}

.mr-48 {
  margin-right: 3rem;
}

.my-48 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.mx-48 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.-mt-48 {
  margin-top: -3rem;
}

.-mb-48 {
  margin-bottom: -3rem;
}

.-ml-48 {
  margin-left: -3rem;
}

.-mr-48 {
  margin-right: -3rem;
}

.-my-48 {
  margin-top: -3rem;
  margin-bottom: -3rem;
}

.-mx-48 {
  margin-left: -3rem;
  margin-right: -3rem;
}

/* Padding */
.pt-48 {
  padding-top: 3rem;
}

.pb-48 {
  padding-bottom: 3rem;
}

.pl-48 {
  padding-left: 3rem;
}

.pr-48 {
  padding-right: 3rem;
}

.py-48 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.px-48 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.pxy-48 {
  padding: 3rem;
}

.mxy-48 {
  margin: 3rem;
}

/* Margin */
.mt-64 {
  margin-top: 4rem;
}

.mb-64 {
  margin-bottom: 4rem;
}

.ml-64 {
  margin-left: 4rem;
}

.mr-64 {
  margin-right: 4rem;
}

.my-64 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.mx-64 {
  margin-left: 4rem;
  margin-right: 4rem;
}

.-mt-64 {
  margin-top: -4rem;
}

.-mb-64 {
  margin-bottom: -4rem;
}

.-ml-64 {
  margin-left: -4rem;
}

.-mr-64 {
  margin-right: -4rem;
}

.-my-64 {
  margin-top: -4rem;
  margin-bottom: -4rem;
}

.-mx-64 {
  margin-left: -4rem;
  margin-right: -4rem;
}

/* Padding */
.pt-64 {
  padding-top: 4rem;
}

.pb-64 {
  padding-bottom: 4rem;
}

.pl-64 {
  padding-left: 4rem;
}

.pr-64 {
  padding-right: 4rem;
}

.py-64 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.px-64 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.pxy-64 {
  padding: 4rem;
}

.mxy-64 {
  margin: 4rem;
}

/* Margin */
.mt-80 {
  margin-top: 5rem;
}

.mb-80 {
  margin-bottom: 5rem;
}

.ml-80 {
  margin-left: 5rem;
}

.mr-80 {
  margin-right: 5rem;
}

.my-80 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.mx-80 {
  margin-left: 5rem;
  margin-right: 5rem;
}

.-mt-80 {
  margin-top: -5rem;
}

.-mb-80 {
  margin-bottom: -5rem;
}

.-ml-80 {
  margin-left: -5rem;
}

.-mr-80 {
  margin-right: -5rem;
}

.-my-80 {
  margin-top: -5rem;
  margin-bottom: -5rem;
}

.-mx-80 {
  margin-left: -5rem;
  margin-right: -5rem;
}

/* Padding */
.pt-80 {
  padding-top: 5rem;
}

.pb-80 {
  padding-bottom: 5rem;
}

.pl-80 {
  padding-left: 5rem;
}

.pr-80 {
  padding-right: 5rem;
}

.py-80 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.px-80 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.pxy-80 {
  padding: 5rem;
}

.mxy-80 {
  margin: 5rem;
}

/* Margin */
.mt-96 {
  margin-top: 6rem;
}

.mb-96 {
  margin-bottom: 6rem;
}

.ml-96 {
  margin-left: 6rem;
}

.mr-96 {
  margin-right: 6rem;
}

.my-96 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.mx-96 {
  margin-left: 6rem;
  margin-right: 6rem;
}

.-mt-96 {
  margin-top: -6rem;
}

.-mb-96 {
  margin-bottom: -6rem;
}

.-ml-96 {
  margin-left: -6rem;
}

.-mr-96 {
  margin-right: -6rem;
}

.-my-96 {
  margin-top: -6rem;
  margin-bottom: -6rem;
}

.-mx-96 {
  margin-left: -6rem;
  margin-right: -6rem;
}

/* Padding */
.pt-96 {
  padding-top: 6rem;
}

.pb-96 {
  padding-bottom: 6rem;
}

.pl-96 {
  padding-left: 6rem;
}

.pr-96 {
  padding-right: 6rem;
}

.py-96 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.px-96 {
  padding-left: 6rem;
  padding-right: 6rem;
}

.pxy-96 {
  padding: 6rem;
}

.mxy-96 {
  margin: 6rem;
}

/* Margin */
.mt-110 {
  margin-top: 6.875rem;
}

.mb-110 {
  margin-bottom: 6.875rem;
}

.ml-110 {
  margin-left: 6.875rem;
}

.mr-110 {
  margin-right: 6.875rem;
}

.my-110 {
  margin-top: 6.875rem;
  margin-bottom: 6.875rem;
}

.mx-110 {
  margin-left: 6.875rem;
  margin-right: 6.875rem;
}

.-mt-110 {
  margin-top: -6.875rem;
}

.-mb-110 {
  margin-bottom: -6.875rem;
}

.-ml-110 {
  margin-left: -6.875rem;
}

.-mr-110 {
  margin-right: -6.875rem;
}

.-my-110 {
  margin-top: -6.875rem;
  margin-bottom: -6.875rem;
}

.-mx-110 {
  margin-left: -6.875rem;
  margin-right: -6.875rem;
}

/* Padding */
.pt-110 {
  padding-top: 6.875rem;
}

.pb-110 {
  padding-bottom: 6.875rem;
}

.pl-110 {
  padding-left: 6.875rem;
}

.pr-110 {
  padding-right: 6.875rem;
}

.py-110 {
  padding-top: 6.875rem;
  padding-bottom: 6.875rem;
}

.px-110 {
  padding-left: 6.875rem;
  padding-right: 6.875rem;
}

.pxy-110 {
  padding: 6.875rem;
}

.mxy-110 {
  margin: 6.875rem;
}

/* Margin */
.mt-120 {
  margin-top: 7.5rem;
}

.mb-120 {
  margin-bottom: 7.5rem;
}

.ml-120 {
  margin-left: 7.5rem;
}

.mr-120 {
  margin-right: 7.5rem;
}

.my-120 {
  margin-top: 7.5rem;
  margin-bottom: 7.5rem;
}

.mx-120 {
  margin-left: 7.5rem;
  margin-right: 7.5rem;
}

.-mt-120 {
  margin-top: -7.5rem;
}

.-mb-120 {
  margin-bottom: -7.5rem;
}

.-ml-120 {
  margin-left: -7.5rem;
}

.-mr-120 {
  margin-right: -7.5rem;
}

.-my-120 {
  margin-top: -7.5rem;
  margin-bottom: -7.5rem;
}

.-mx-120 {
  margin-left: -7.5rem;
  margin-right: -7.5rem;
}

/* Padding */
.pt-120 {
  padding-top: 7.5rem;
}

.pb-120 {
  padding-bottom: 7.5rem;
}

.pl-120 {
  padding-left: 7.5rem;
}

.pr-120 {
  padding-right: 7.5rem;
}

.py-120 {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}

.px-120 {
  padding-left: 7.5rem;
  padding-right: 7.5rem;
}

.pxy-120 {
  padding: 7.5rem;
}

.mxy-120 {
  margin: 7.5rem;
}

/* Margin */
.mt-130 {
  margin-top: 8.125rem;
}

.mb-130 {
  margin-bottom: 8.125rem;
}

.ml-130 {
  margin-left: 8.125rem;
}

.mr-130 {
  margin-right: 8.125rem;
}

.my-130 {
  margin-top: 8.125rem;
  margin-bottom: 8.125rem;
}

.mx-130 {
  margin-left: 8.125rem;
  margin-right: 8.125rem;
}

.-mt-130 {
  margin-top: -8.125rem;
}

.-mb-130 {
  margin-bottom: -8.125rem;
}

.-ml-130 {
  margin-left: -8.125rem;
}

.-mr-130 {
  margin-right: -8.125rem;
}

.-my-130 {
  margin-top: -8.125rem;
  margin-bottom: -8.125rem;
}

.-mx-130 {
  margin-left: -8.125rem;
  margin-right: -8.125rem;
}

/* Padding */
.pt-130 {
  padding-top: 8.125rem;
}

.pb-130 {
  padding-bottom: 8.125rem;
}

.pl-130 {
  padding-left: 8.125rem;
}

.pr-130 {
  padding-right: 8.125rem;
}

.py-130 {
  padding-top: 8.125rem;
  padding-bottom: 8.125rem;
}

.px-130 {
  padding-left: 8.125rem;
  padding-right: 8.125rem;
}

.pxy-130 {
  padding: 8.125rem;
}

.mxy-130 {
  margin: 8.125rem;
}

/* Margin */
.mt-140 {
  margin-top: 8.75rem;
}

.mb-140 {
  margin-bottom: 8.75rem;
}

.ml-140 {
  margin-left: 8.75rem;
}

.mr-140 {
  margin-right: 8.75rem;
}

.my-140 {
  margin-top: 8.75rem;
  margin-bottom: 8.75rem;
}

.mx-140 {
  margin-left: 8.75rem;
  margin-right: 8.75rem;
}

.-mt-140 {
  margin-top: -8.75rem;
}

.-mb-140 {
  margin-bottom: -8.75rem;
}

.-ml-140 {
  margin-left: -8.75rem;
}

.-mr-140 {
  margin-right: -8.75rem;
}

.-my-140 {
  margin-top: -8.75rem;
  margin-bottom: -8.75rem;
}

.-mx-140 {
  margin-left: -8.75rem;
  margin-right: -8.75rem;
}

/* Padding */
.pt-140 {
  padding-top: 8.75rem;
}

.pb-140 {
  padding-bottom: 8.75rem;
}

.pl-140 {
  padding-left: 8.75rem;
}

.pr-140 {
  padding-right: 8.75rem;
}

.py-140 {
  padding-top: 8.75rem;
  padding-bottom: 8.75rem;
}

.px-140 {
  padding-left: 8.75rem;
  padding-right: 8.75rem;
}

.pxy-140 {
  padding: 8.75rem;
}

.mxy-140 {
  margin: 8.75rem;
}

.my-zero {
  margin-top: 0;
  margin-bottom: 0;
}

.mx-zero {
  margin-left: 0;
  margin-right: 0;
}

.myx-zero {
  margin: 0;
}

.py-zero {
  padding-top: 0;
  padding-bottom: 0;
}

.px-zero {
  padding-left: 0;
  padding-right: 0;
}

.pyx-zero {
  padding: 0;
}

/* =================================================
STRUCTURAL STYLE
================================================= */
.ng-density-compact {
  --ng-form-gap: .6rem;
  --ng-field-gap: .25rem;
  --ng-input-padding-y: .35rem;
  --ng-input-padding-x: .6rem;
  --ng-input-font-size: .85rem;
}

.ng-100 {
  display: block;
  width: 100%;
}

.dd-block {
  display: block;
}

.c-def {
  cursor: default;
}

.c-point {
  cursor: pointer;
}

.c-auto {
  cursor: auto;
}

/* =================================================
COLOR UTILITIES
================================================= */
[class*=text-].text-primary {
  color: var(--ng-primary-bg, #4a2a86);
}

[class*=bg-].bg-primary {
  background-color: var(--ng-primary-bg, #4a2a86);
  color: var(--ng-primary-text, #ffffff);
}

[class*=border-].border-primary {
  border-color: var(--ng-primary-border, #382066);
}

[class*=text-].text-secondary {
  color: var(--ng-secondary-bg, #7d2342);
}

[class*=bg-].bg-secondary {
  background-color: var(--ng-secondary-bg, #7d2342);
  color: var(--ng-secondary-text, #ffffff);
}

[class*=border-].border-secondary {
  border-color: var(--ng-secondary-border, #611a34);
}

[class*=text-].text-success {
  color: var(--ng-success-bg, #1da571);
}

[class*=bg-].bg-success {
  background-color: var(--ng-success-bg, #1da571);
  color: var(--ng-success-text, #ffffff);
}

[class*=border-].border-success {
  border-color: var(--ng-success-border, #18875d);
}

[class*=text-].text-info {
  color: var(--ng-info-bg, #119bdc);
}

[class*=bg-].bg-info {
  background-color: var(--ng-info-bg, #119bdc);
  color: var(--ng-info-text, #ffffff);
}

[class*=border-].border-info {
  border-color: var(--ng-info-border, #0e7fb4);
}

[class*=text-].text-warning {
  color: var(--ng-warning-bg, #dd7900);
}

[class*=bg-].bg-warning {
  background-color: var(--ng-warning-bg, #dd7900);
  color: var(--ng-warning-text, #ffffff);
}

[class*=border-].border-warning {
  border-color: var(--ng-warning-border, #b56300);
}

[class*=text-].text-danger {
  color: var(--ng-danger-bg, #f2415c);
}

[class*=bg-].bg-danger {
  background-color: var(--ng-danger-bg, #f2415c);
  color: var(--ng-danger-text, #ffffff);
}

[class*=border-].border-danger {
  border-color: var(--ng-danger-border, #d82e47);
}

[class*=text-].text-mute {
  color: var(--ng-mute-bg, #c8c8c8);
}

[class*=bg-].bg-mute {
  background-color: var(--ng-mute-bg, #c8c8c8);
  color: var(--ng-mute-text, #646464);
}

[class*=border-].border-mute {
  border-color: var(--ng-mute-border, #dcdcdc);
}

[class*=text-].text-blue {
  color: var(--ng-blue-bg, #3b82f6);
}

[class*=bg-].bg-blue {
  background-color: var(--ng-blue-bg, #3b82f6);
  color: var(--ng-blue-text, #ffffff);
}

[class*=border-].border-blue {
  border-color: var(--ng-blue-border, #2563eb);
}

[class*=text-].text-blue-sky {
  color: var(--ng-blue-sky-bg, #6cc8ff);
}

[class*=bg-].bg-blue-sky {
  background-color: var(--ng-blue-sky-bg, #6cc8ff);
  color: var(--ng-blue-sky-text, #07456e);
}

[class*=border-].border-blue-sky {
  border-color: var(--ng-blue-sky-border, #2ea8f5);
}

[class*=text-].text-green {
  color: var(--ng-green-bg, #2e7d32);
}

[class*=bg-].bg-green {
  background-color: var(--ng-green-bg, #2e7d32);
  color: var(--ng-green-text, #ffffff);
}

[class*=border-].border-green {
  border-color: var(--ng-green-border, #246428);
}

[class*=text-].text-lime {
  color: var(--ng-lime-bg, #9edc00);
}

[class*=bg-].bg-lime {
  background-color: var(--ng-lime-bg, #9edc00);
  color: var(--ng-lime-text, #476f11);
}

[class*=border-].border-lime {
  border-color: var(--ng-lime-border, #82b800);
}

[class*=text-].text-aguagreen {
  color: var(--ng-aguagreen-bg, #0e9c7e);
}

[class*=bg-].bg-aguagreen {
  background-color: var(--ng-aguagreen-bg, #0e9c7e);
  color: var(--ng-aguagreen-text, #ffffff);
}

[class*=border-].border-aguagreen {
  border-color: var(--ng-aguagreen-border, #0b7d64);
}

[class*=text-].text-indigo {
  color: var(--ng-indigo-bg, #4f46e5);
}

[class*=bg-].bg-indigo {
  background-color: var(--ng-indigo-bg, #4f46e5);
  color: var(--ng-indigo-text, #ffffff);
}

[class*=border-].border-indigo {
  border-color: var(--ng-indigo-border, #4338ca);
}

[class*=text-].text-purple {
  color: var(--ng-purple-bg, #a027f0);
}

[class*=bg-].bg-purple {
  background-color: var(--ng-purple-bg, #a027f0);
  color: var(--ng-purple-text, #ffffff);
}

[class*=border-].border-purple {
  border-color: var(--ng-purple-border, #810ecb);
}

[class*=text-].text-purple-heart {
  color: var(--ng-purple-heart-bg, #b23a8a);
}

[class*=bg-].bg-purple-heart {
  background-color: var(--ng-purple-heart-bg, #b23a8a);
  color: var(--ng-purple-heart-text, #ffffff);
}

[class*=border-].border-purple-heart {
  border-color: var(--ng-purple-heart-border, #7d2962);
}

[class*=text-].text-cyan {
  color: var(--ng-cyan-bg, #009dd9);
}

[class*=bg-].bg-cyan {
  background-color: var(--ng-cyan-bg, #009dd9);
  color: var(--ng-cyan-text, #ffffff);
}

[class*=border-].border-cyan {
  border-color: var(--ng-cyan-border, #0081b2);
}

[class*=text-].text-magenta {
  color: var(--ng-magenta-bg, #d4007f);
}

[class*=bg-].bg-magenta {
  background-color: var(--ng-magenta-bg, #d4007f);
  color: var(--ng-magenta-text, #ffffff);
}

[class*=border-].border-magenta {
  border-color: var(--ng-magenta-border, #b0006a);
}

[class*=text-].text-yellow {
  color: var(--ng-yellow-bg, #ffd200);
}

[class*=bg-].bg-yellow {
  background-color: var(--ng-yellow-bg, #ffd200);
  color: var(--ng-yellow-text, #8a6800);
}

[class*=border-].border-yellow {
  border-color: var(--ng-yellow-border, #e6bd00);
}

[class*=text-].text-clight {
  color: var(--ng-clight-bg, #f0f0f0);
}

[class*=bg-].bg-clight {
  background-color: var(--ng-clight-bg, #f0f0f0);
  color: var(--ng-clight-text, #1f2937);
}

[class*=border-].border-clight {
  border-color: var(--ng-clight-border, #e5e7eb);
}

[class*=text-].text-cdark {
  color: var(--ng-cdark-bg, #424242);
}

[class*=bg-].bg-cdark {
  background-color: var(--ng-cdark-bg, #424242);
  color: var(--ng-cdark-text, #f0f0f0);
}

[class*=border-].border-cdark {
  border-color: var(--ng-cdark-border, #5a5a5a);
}

.text-g-0 {
  color: var(--ng-g-0, #ffffff) !important;
}

.bg-g-0 {
  background-color: var(--ng-g-0, #ffffff) !important;
}

.border-g-0 {
  border-color: var(--ng-g-0, #ffffff) !important;
}

.text-g-10 {
  color: var(--ng-g-10, #f5f5f5) !important;
}

.bg-g-10 {
  background-color: var(--ng-g-10, #f5f5f5) !important;
}

.border-g-10 {
  border-color: var(--ng-g-10, #f5f5f5) !important;
}

.text-g-20 {
  color: var(--ng-g-20, #e5e5e5) !important;
}

.bg-g-20 {
  background-color: var(--ng-g-20, #e5e5e5) !important;
}

.border-g-20 {
  border-color: var(--ng-g-20, #e5e5e5) !important;
}

.text-g-30 {
  color: var(--ng-g-30, #d4d4d4) !important;
}

.bg-g-30 {
  background-color: var(--ng-g-30, #d4d4d4) !important;
}

.border-g-30 {
  border-color: var(--ng-g-30, #d4d4d4) !important;
}

.text-g-40 {
  color: var(--ng-g-40, #a3a3a3) !important;
}

.bg-g-40 {
  background-color: var(--ng-g-40, #a3a3a3) !important;
}

.border-g-40 {
  border-color: var(--ng-g-40, #a3a3a3) !important;
}

.text-g-50 {
  color: var(--ng-g-50, #737373) !important;
}

.bg-g-50 {
  background-color: var(--ng-g-50, #737373) !important;
}

.border-g-50 {
  border-color: var(--ng-g-50, #737373) !important;
}

.text-g-60 {
  color: var(--ng-g-60, #525252) !important;
}

.bg-g-60 {
  background-color: var(--ng-g-60, #525252) !important;
}

.border-g-60 {
  border-color: var(--ng-g-60, #525252) !important;
}

.text-g-70 {
  color: var(--ng-g-70, #404040) !important;
}

.bg-g-70 {
  background-color: var(--ng-g-70, #404040) !important;
}

.border-g-70 {
  border-color: var(--ng-g-70, #404040) !important;
}

.text-g-80 {
  color: var(--ng-g-80, #262626) !important;
}

.bg-g-80 {
  background-color: var(--ng-g-80, #262626) !important;
}

.border-g-80 {
  border-color: var(--ng-g-80, #262626) !important;
}

.text-g-90 {
  color: var(--ng-g-90, #171717) !important;
}

.bg-g-90 {
  background-color: var(--ng-g-90, #171717) !important;
}

.border-g-90 {
  border-color: var(--ng-g-90, #171717) !important;
}

.text-g-100 {
  color: var(--ng-g-100, #000000) !important;
}

.bg-g-100 {
  background-color: var(--ng-g-100, #000000) !important;
}

.border-g-100 {
  border-color: var(--ng-g-100, #000000) !important;
}

/* =================================================
BOX SHADOWS UTILITIES
================================================= */
.bs-main-main {
  box-shadow: var(--ng-tab-box-shadow-main);
}

.bs-main-alt {
  box-shadow: var(--ng-tab-box-shadow-alt);
}

/* =================================================
VISIBILITY & POSITION
================================================= */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.sticky-top {
  position: sticky;
  top: 0;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

.center-text {
  text-align: center;
  justify-content: center;
}

.center-auto {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.center-block {
  display: flex;
  margin: 0 auto;
}

.center-center-auto {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =================================================
FLEX HELPERS
================================================= */
.no-shrink {
  flex: 0 0 auto !important;
}

.f-row {
  flex-direction: row;
}

.f-column {
  flex-direction: column;
}

.jc-start {
  justify-content: flex-start !important;
}

.jc-center {
  justify-content: center !important;
}

.jc-end {
  justify-content: flex-end !important;
}

.ji-start {
  justify-items: start !important;
}

.ji-center {
  justify-items: center !important;
}

.ji-end {
  justify-items: end !important;
}

/* ============================================================
RESPONSIVE HELPERS
============================================================ */
/* HIDE MOBILE (< lg) */
@media (max-width: 895px) {
  .ng-hide-mobile {
    display: none !important;
  }
}
/* HIDE DESKTOP (>= lg) */
@media (min-width: 896px) {
  .ng-hide-desktop {
    display: none !important;
  }
}
/* =================================================
PRINT STRUCTURE
================================================= */
.ng-print-show {
  display: none !important;
}

@media print {
  .ng-print-show {
    display: initial !important;
  }
  .ng-print-hide {
    display: none !important;
  }
  .ng-print-break-before {
    break-before: page !important;
  }
  .ng-print-break-after {
    break-after: page !important;
  }
  .ng-print-avoid-break {
    break-inside: avoid !important;
  }
  img, svg, video {
    max-width: 100% !important;
    height: auto !important;
  }
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    tab-size: 4 !important;
  }
}
.ng-debug {
  background-color: #2d2d44;
}
.ng-debug > .ng-col, .ng-debug > .ng-box {
  padding: 12px 18px;
  color: var(--ng-color-white);
  background-color: #545482;
  border: 1px solid #f2f2f2;
}

/*# sourceMappingURL=nexigrid.css.map */