@charset "UTF-8";
/* ==========================================================
NEXIGRID – GLOBAL VARIABLES
----------------------------------------------------------
Central file for the system variables.

Contains:

1) Runtime CSS variables (:root)
   - Global colors
   - Typography
   - Spacing
   - Shared component variables

2) System SCSS maps
   - Color utility palette
   - Breakpoints
   - Grid
   - Z-index layers
   - Gap scale
   - Flex alignment helpers

This file is the foundation of the design system.
========================================================== */
/* ==========================================================
NG-COLORS MAP
----------------------------------------------------------
Palette used to generate utility classes:

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

Single source of truth for the color utilities.
========================================================== */
/* ==========================================================
LAYOUT STRUCTURE
========================================================== */
/* ==========================================================
Z-INDEX SYSTEM
========================================================== */
/* ==========================================================
GRID SYSTEM
========================================================== */
/* ==========================================================
FLEX / ALIGNMENT MAPS
========================================================== */
/* ==========================================================
SPACING SCALE
========================================================== */
/* ==========================================================
GLOBAL BREAKPOINT ALIAS
========================================================== */
/* ==========================================================
GLOBAL ROOT
========================================================== */
/* "Neutral" brands (surfaces) excluded from automatic L2 derivation.
   Defined at the global level so it is available both inside :root
   (light formulas) and inside @mixin ng-theme-dark (dark formula overrides). */
: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
  ------------------------------------------------------
  Main layout colors (body, surfaces).
  ====================================================== */
  --ng-body-color: #828ca8;
  --ng-body-background: #ffffff;
  /* ======================================================
  THEME SURFACE & NEUTRAL TOKENS (light/dark ready)
  ------------------------------------------------------
  Semantic set that THEMES flip ([data-theme="..."]).
  Components read ONLY these (never hardcoded surface
  hex), so a theme changes every surface/neutral without
  touching the brand colors. Values = light theme (default).
  ====================================================== */
  --ng-surface: #ffffff; /* card, modal, dropdown, list, popover, accordion, header-menu */
  --ng-surface-sunken: #f5f5f5; /* footer, chip, input-disabled */
  --ng-fill: #e5e7eb; /* neutral fills: default badge, progress/avatar/steps track */
  --ng-text: #222222; /* main text on surfaces */
  --ng-text-muted: rgba(0,0,0,.55);
  --ng-text-on-fill: #ffffff; /* text on solid fills (e.g. active step circle) */
  --ng-hover-tint: 0,0,0; /* base for translucent overlays: rgba(var(--ng-hover-tint), .0X) */
  --ng-backdrop: rgba(0,0,0,.35);
  /* ======================================================
  BORDER SYSTEM
  ------------------------------------------------------
  Global tokens for borders and dividers.
  ====================================================== */
  --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. The color is --ng-color-border.
  Components point here 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
  ------------------------------------------------------
  Design-system t-shirt scale. --ng-radius is the MASTER (component
  default). Components point to a step via fallback-at-use:
  var(--ng-<c>-radius, var(--ng-radius-md)). Never declare the scoped
  knob with a literal value on the selector (it would shadow :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
  ------------------------------------------------------
  Global framework fonts.
  ====================================================== */
  --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
  ------------------------------------------------------
  Global layout spacing and behavior.
  ====================================================== */
  --ng-gap: 1.5rem;
  --ng-nav-gap: 0.65rem;
  --ng-nav-font-size: 0.875rem;
  /* Motion: tokenized speed + easing (read by NG Studio, Effects tab).
     Components use var(--ng-<c>-speed, var(--ng-transition-speed)) +
     var(--ng-transition-ease). --ng-transition stays as the composed shorthand. */
  --ng-transition-speed: 0.2s;
  --ng-transition-ease: ease-in-out;
  --ng-transition: all var(--ng-transition-speed) var(--ng-transition-ease);
  --ng-fill-width: 200px;
  /* ======================================================
  FOCUS SYSTEM
  ------------------------------------------------------
  Focus accessibility tokens.
  ====================================================== */
  --ng-focus-border: rgba(200,200,220,.15);
  --ng-focus-ring: 0 0 0 2px rgba(45,45,45,.15);
  /* ======================================================
  COMPONENT BASE TOKENS
  ------------------------------------------------------
  Variables shared by components.
  ====================================================== */
  /* 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); /* aligned to the scale (5px) */
  --ng-input-bg: var(--ng-surface);
  --ng-input-color: inherit;
  --ng-input-color-border: rgba(100,100,100,0.3);
  /* Signature: brand-governed focus (crisp, not the BS5 grey glow).
     Rebrandable via --ng-input-focus-accent or --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 / ELEVATION TOKENS
  ------------------------------------------------------
  Design-system elevation scale. --ng-shadow is the MASTER
  (default = md). Components do NOT declare their own
  --ng-<c>-shadow with a literal value on the selector (it would
  shadow :root): they use fallback-at-use
    box-shadow: var(--ng-<c>-shadow, var(--ng-shadow-<step>));
  Override: redefine --ng-shadow-* (global) or the single
  --ng-<c>-shadow (per component). Read by NG Studio (Effects tab).
  ====================================================== */
  --ng-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --ng-shadow-md: 0 4px 12px rgba(0, 0, 0, .10); /* master / default */
  --ng-shadow-lg: 0 12px 28px rgba(0, 0, 0, .16);
  --ng-shadow-xl: 0 20px 40px rgba(0, 0, 0, .22);
  --ng-shadow: var(--ng-shadow-md);
  /* ======================================================
  L2 — RUNTIME DERIVATIVES (2-level token model)
  ------------------------------------------------------
  Each color's derivatives (hover/active/focus/outline/
  soft/disabled/dark/light/ring) are recomputed at
  runtime from --ng-<name>-bg via relative color syntax.
  Effect: overriding --ng-<name>-bg propagates to ALL the
  derivatives without recompiling. bg/text/border stay the
  base knobs.
  The @each block above stays as a baked FALLBACK for
  browsers without relative color syntax
  (Chrome <119, Safari <16.4, Firefox <128).
  Placed at the end of :root (after the other declarations)
  to avoid the "declarations after nested rules" deprecation;
  Sass hoists the @supports anyway → output unchanged.
  ====================================================== */
  /* Excluded neutrals: clight/cdark/mute have hand-made hover/soft
     (they lighten); the generic L2 formula would darken them → invisible hover.
     List defined at the global level (above :root) so it is available
     inside @mixin ng-theme-dark too. */
}
@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
----------------------------------------------------------
Flips ONLY neutrals/surfaces; the brand colors stay unchanged
(the L2 @supports block derives from --ng-<name>-bg, untouched).
Activation: explicit ONLY via [data-theme]. Default (no attribute) = LIGHT,
OS-independent (no prefers-color-scheme). Themes are multiple.
  [data-theme="dark"]   → dark
  [data-theme="<name>"] → custom theme (one block per theme)
========================================================== */
/* :root[...] and not just [data-theme] to beat in specificity the :root
   defined in other files (e.g. typography) regardless of import order. */
: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);
  /* Typography (heading/title/text/muted) — otherwise h1-h6 invisible */
  --ng-color-title: #f3f6fb;
  --ng-color-heading: #e8eef7;
  --ng-color-text: #c9d1d9;
  --ng-color-muted: #8b95a5;
  /* Brand readability override — 4 naturally "dark" brands (primary,
     secondary, indigo, purple-heart) fall below the WCAG contrast
     threshold against the dark --ng-body-background. We lighten ONLY
     their -bg/-border: the L2 @supports automatically recomputes hover/
     active/focus/soft/dark/light/outline/ring → one override for 4 brands
     lightens the whole derivative family. The other brands stay unchanged. */
  --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 → no L2: manual override for dark
     (medium bg, soft = tinted dark surface, dark = light "text on soft").
     Before the @supports to avoid the "declarations after nested" deprecation. */
  --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 (too bright for L2) → manual dark override.
     Solid stays bright bg + dark text; soft dark olive; -dark = light text. */
  --ng-lime-bg: #9edc00;
  --ng-lime-border: #82b800;
  --ng-lime-hover: #8cc400;
  --ng-lime-soft: #2f3d12;
  --ng-lime-dark: #cdee63;
  /* Soft variants — in light the L2 formula lightens the brand a lot
     (l ≈ 85-90%): great as a "tinted card" on a light page. In dark
     that same very pale surface becomes a white island on a black
     background, off-tone. Override: in dark the soft is a tinted DARK
     island (lightness fixed at 20% + reduced saturation), and --ng-*-dark
     (used as text on the soft) is raised to ~78% for readability.
     Here -dark changes meaning only: it is "text on soft" in the
     consumers (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%);
  }
}

/* No @media (prefers-color-scheme): NG is ALWAYS light by default,
   regardless of the OS. Themes (dark and custom) activate only with
   an explicit [data-theme] (via ng_theme.js or a manual attribute). */
/* NexiGrid – Reset 0.5 */
/* Neutral, non-destructive, variable-driven */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Removes default margins only */
* {
  margin: 0;
}

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

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

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

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

button {
  cursor: pointer;
}

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

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

/* Headings and text */
h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}

/* ===
NexiGrid — Typography
---
Structural typography: link reset, font scale (.fs-*), weights (.fw-*), line-height
(.lh-*), :root tokens (family/size/weight/spacing/color/measure), base semantic
elements (h*, p, list, code), text alignment/flow utilities, Phosphor icons.
Does NOT define component design, only reusable tools.
---
Version: 1.0 · Status: stable
=== */
/* ==========================================================
BASE LINK RESET
----------------------------------------------------------
Links inherit the context color and have no decoration
by default. Hover states are handled elsewhere.
========================================================== */
a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================
FONT SCALE — generates the .fs-* utilities
========================================================== */
.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,
typographic spacing, measure. Overridable from :root per theme.
========================================================== */
: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 — vertical rhythm for heading/p. Heading in em (scales with the title),
     p in rem. Override from :root. */
  --ng-flow-heading-top: 1.25rem;
  --ng-flow-heading-bottom: .5rem;
  --ng-flow-p: 1rem;
  /* Measure */
  --ng-text-measure: 68ch;
}

/* ==========================================================
BASE ELEMENTS
----------------------------------------------------------
Base styles for semantic HTML elements: ensure consistent
readability without imposing 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);
}

/* No push outside the containers: first flow element with no margin
   above, last with no margin below. */
: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
----------------------------------------------------------
Very large titles need a more compact line-height.
========================================================== */
.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
========================================================== */
/* Single-line truncation */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Long-word breaking */
.text-wrap {
  overflow-wrap: break-word;
}

/* Prevents line wrapping */
.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 (page structure)
----------------------------------------------------------
Page structure: .ng-layout (flex root), .ng-content (central
area), .ng-container (wrapper + container-fix-*). Header,
footer and sidebar are dedicated components.
----------------------------------------------------------
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 — Central area
===================================================== */
.ng-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* =====================================================
NG-CONTAINER — Inner wrapper
===================================================== */
.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
---
Two coexisting systems: Flex grid (.ng-row + .ng-col-*) for 12-col layout, and
Lanes grid (.ng-grid + .ng-lanes-*) for auto-flow/dashboard. Gutter, offset,
order, alignments, gap, wide/span, responsive fallback. Tokens from $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
----------------------------------------------------------
Neutral structural accordion. Column layout with gap; item
with trigger (JS ng_accordion.js) and content animated via
max-height. Compact variant. Scoped vars overridable per theme.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.ng-accordion {
  /* ===== Scoped Variables (overridable per theme/context) ===== */
  --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 (not declared → :root cascade) */
  --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 ===== */
  /* ===== Compact variant (reduces 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 (clickable / focusable) */
  /* Rotation icon */
  /* Content (animation via max-height, handled by the JS) */
  /* Open state */
}
.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 applied only to the inner content */
}
.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
----------------------------------------------------------
Inline alert/notice (icon, body, title, desc). Color variants, compact, dismissible.
----------------------------------------------------------
Version: 1.1.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.ng-alert {
  --ng-alert-bg: var(--ng-mute-soft, #ececec);
  --ng-alert-color: var(--ng-color-text);
  /* radius: default 0 (flag, NG signature) via fallback-at-use.
     :root{--ng-alert-radius} cascade; banner re-scopes below. */
  --ng-alert-padding: .75rem 1rem;
  --ng-alert-gap: .65rem;
  --ng-alert-icon-size: 1.2rem;
  --ng-alert-bar-width: 4px; /* side signature-bar thickness */
  --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 (side signature)
================================================= */
.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 — SIDE FLAG
The NG signature for .ng-alert: 4px solid `-dark` color on the left side.
Token-driven: each color variant sets --ng-alert-bar from its own -dark.
Opt-out via .ng-alert-bare.
========================================================== */
.ng-alert:not(.ng-alert-bare) {
  border-inline-start: var(--ng-alert-bar-width, 4px) solid var(--ng-alert-bar, var(--ng-mute-dark, #888));
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* ==========================================================
PRE-BAKED VARIANTS — opt-in modifier

  .ng-alert-solid     → bg = -bg brand color + -text text (look "command output")
  .ng-alert-banner    → full-width without radius (for page top)
  .ng-alert-floating  → elevated shadow (for overlay/toast position fixed)
  .ng-alert-bare      → flag opt-out (look "classic BS")
========================================================== */
/* SOLID — saturated brand bg, contrasting text */
.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 (for page top) */
.ng-alert.ng-alert-banner {
  --ng-alert-radius: var(--ng-radius-0);
  width: 100%;
}

/* FLOATING — shadow for use in overlay / toast */
.ng-alert.ng-alert-floating {
  box-shadow: var(--ng-alert-shadow, var(--ng-shadow-lg));
}

/* ===
NexiGrid — Autocomplete
---
Combobox with a listbox menu (top-layer via Popover API), grouped results,
icon/sublabel per item, loading, empty, error states. Security by-design in the JS
(no innerHTML, AbortController, JSON validation). Reuses --ng-input-* and the
visual patterns of .ng-dropdown-menu.
---
Multi-select: .is-multiple (data-multiple in the JS) → inline tags-input with chips.
---
Version: 1.1.0 · Status: stable · RetroCompat: 1.1.0
=== */
.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 — inline tags-input (.is-multiple)
The .ng-autocomplete-control acts as the input box (reuses the --ng-input-* tokens);
the inner input becomes "bare" and grows into the free space. The selected ones
are removable .ng-chip, managed by the JS (ng_autocomplete v1.1).
============================================================ */
.ng-autocomplete.is-multiple {
  /* bare input inside the control: no box of its own, grows and wraps */
}
.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 var(--ng-transition-speed) var(--ng-transition-ease), box-shadow var(--ng-transition-speed) var(--ng-transition-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: hidden by default when not open */
  /* Container style */
  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 consistent with the 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: thin animated bar at the top of the menu, without emptying it */
.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;
  /* Separator between successive groups */
}
.ng-autocomplete-group + .ng-autocomplete-item {
  margin-top: 0.15rem;
}

/* ============================================================
STATES (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 · RetroCompat: 1.0.1
========================================================== */
.ng-avatar {
  /* radius: default md via fallback-at-use (not declared → :root cascade) */
  --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 (UNIFIED)
================================================= */
.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: same fallback as the base rule — without it, undefined var
     (group with no size class) invalidates width/height and the avatar collapses */
  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
----------------------------------------------------------
Floating "back to top" button. COMPOSES .ng-btn for the whole look
(color/shape/size): here only position:fixed, corner, z-layer,
show/hide on scroll (.is-visible from ng_back_to_top.js) and the
optional progress ring (conic+mask, like .ng-chart-donut).
JS: assets/js/ng_back_to_top.js — options via data-ng-*.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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));
  /* shadow: default md via fallback-at-use (→ :root cascade) */
  --ng-btt-transition: opacity .25s ease, transform .25s ease, visibility .25s;
  --ng-btt-progress: 0%; /* DATA: scroll % (from JS) */
  --ng-btt-ring-thickness: 3px;
  --ng-btt-ring-gap: 9px; /* ring detached from the border (net gap ≈ gap - thickness) */
  --ng-btt-ring-color: currentColor; /* default = button text (OK on outline/soft);
   for solids set it to the brand, e.g. var(--ng-primary-bg) */
  --ng-btt-ring-track: transparent; /* opt. circle track (unfilled part) */
  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, var(--ng-shadow-md));
  /* Hidden by default; .is-visible shows it (toggled from JS) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--ng-btt-transition);
  /* Contained: anchored to a position:relative wrapper (for container scope).
     Must be placed OUTSIDE the scrollable element (as a sibling), inside a
     relative wrapper that wraps container + button — otherwise, if it is
     inside the scroll, it scrolls away with the content. */
  /* ===== Show/hide animations (transform of the hidden state) ===== */
  /* ===== Corners ===== */
  /* Center: composition with translateX(-50%). Keep on .fade
     (default): slide/scale + center would require a combined transform. */
  /* ===== Progress ring (optional, data-ng-progress) =====
     Same technique as the donut: conic-gradient (data) + radial mask.
     currentColor → inherits the color of the .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 (below md) ===== */
@media (max-width: 767px) {
  .ng-back-to-top.hide-on-mobile {
    display: none;
  }
}
/* ==========================================================
NexiGrid — Badge
----------------------------------------------------------
Inline labels / counters. SCSS-only (no JS).
Variants: solid · outline · soft · size sm/lg (default = medium) ·
shape pill/quad/circle · subtle.
Colors from $ng-colors (L1/L2 tokens, override via --ng-<color>-bg).
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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: not declared here (would shadow :root). Master default via
     fallback-at-use → :root{--ng-badge-radius} cascades to all badges. */
  --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 with separators (arrow/chevron/dot/pipe), size, interactive, boxed, truncate.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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
----------------------------------------------------------
Interactive buttons. SCSS-only styling (spinner in _ng_spinner).
Variants: solid · outline · soft · ghost · link · size xs/sm/md/lg
· shape rect/quad/circle · hover/disabled/loading states.
Colors from $ng-colors (L1/L2 tokens, override via --ng-<color>-bg).
----------------------------------------------------------
Version: 1.0.2 · Status: stable · RetroCompat: 1.0.2
========================================================== */
.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: NOT declared here (it would shadow :root). Defaults to the master
     --ng-radius via fallback-at-use → :root{--ng-btn-radius} cascades onto
     all buttons; style="--ng-btn-radius" per-instance override. */
  --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 var(--ng-transition-speed) var(--ng-transition-ease), color var(--ng-transition-speed) var(--ng-transition-ease), border-color var(--ng-transition-speed) var(--ng-transition-ease), box-shadow var(--ng-transition-speed) var(--ng-transition-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), only the padding differs */
  /* Quad — radius = master (3px), like normal buttons and groups.
     Same HEIGHT as normal buttons: keeps --ng-btn-padding-y (also follows
     the sm/lg sizes) and gets the square via aspect-ratio 1/1, NOT
     with a literal padding (it was 4px → shorter). */
  /* Circle — round (re-scope of the knob to 50%, allowed literal exception) */
}
.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 of bg: baked fallback for browsers without relative color */
  background: rgb(109.8238636364, 64.2784090909, 195.2215909091);
  color: var(--ng-primary-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(193.359375, 54.140625, 102.09375);
  color: var(--ng-secondary-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(53.4278350515, 219.5721649485, 156.0463917526);
  color: var(--ng-success-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(64.9367088608, 184.1582278481, 240.3132911392);
  color: var(--ng-info-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(255, 156.9230769231, 38.25);
  color: var(--ng-warning-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(245.25, 112.5, 132.75);
  color: var(--ng-danger-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(213.75, 213.75, 213.75);
  color: var(--ng-mute-text, #646464);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(108, 161.25, 248.25);
  color: var(--ng-blue-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(144.75, 213.75, 255);
  color: var(--ng-blue-sky-text, #07456e);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(69.1447368421, 186.6052631579, 75.0921052632);
  color: var(--ng-green-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(193.7045454545, 255, 37.5);
  color: var(--ng-lime-text, #476f11);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: #15eabd;
  color: var(--ng-aguagreen-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(123, 116.25, 235.5);
  color: var(--ng-indigo-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(183.75, 93, 243.75);
  color: var(--ng-purple-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(204.4957627119, 100.0042372881, 169.6652542373);
  color: var(--ng-purple-heart-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(35.25, 194.2396313364, 255);
  color: var(--ng-cyan-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(255, 31.5, 165.3891509434);
  color: var(--ng-magenta-text, #ffffff);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(255, 221.25, 63.75);
  color: var(--ng-yellow-text, #8a6800);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(243.75, 243.75, 243.75);
  color: var(--ng-clight-text, #1f2937);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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 of bg: baked fallback for browsers without relative color */
  background: rgb(113.25, 113.25, 113.25);
  color: var(--ng-cdark-text, #f0f0f0);
  /* runtime: same formula (+25% lightness), propagates the --ng-<name>-bg override */
}
@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;
  /* Group radius: children inherit --ng-btn-radius. Default = master;
     opt-in with .ng-btn-group-{sm|md|lg}. One class on the group, all
     buttons aligned. */
}
.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 that separates the label from the caret in a side panel.
Leverages the governed palette: with 1-2 classes, a "CTA design" look across all
20 colors (light + dark), zero hardcode.

  .ng-btn-split        → layout label + icon-panel on the right
  .ng-btn-split-icon   → the icon inside the panel (e.g. <i class="ph ...">)
  .ng-btn-split-bare   → panel without fill, only a vertical divider
  .ng-btn-grad         → mono-color gradient on the body (-bg → -hover);
                         usable standalone too, combines with .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 + dark panel shaft -->
  <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 on the 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 vertically centered */
  padding-inline-end: 0; /* the panel takes the right padding */
  overflow: hidden; /* contains the panel + bg gradient */
  gap: 1em; /* minimum label ↔ panel distance (always guaranteed,
   even when the button is inline-flex min-content) */
}

.ng-btn-split-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto; /* pushes the panel to the right */
  /* FULL panel — touches the button's top/bottom border via negative
     margin-block that cancels the button's padding-y (scales with all sizes
     thanks to the component's CSS var). */
  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: the panel stays inside the padding (no extend), no fill */
.ng-btn-split.ng-btn-split-bare > .ng-btn-split-icon {
  margin-block: 0;
  padding-inline: 1em;
}

/* ============================================================
COLORS — panel fill for each variant ($ng-colors palette)

   SOLID    (.ng-btn-X)         → panel = -hover  (darker than the bg)
   OUTLINE  (.ng-btn-X-outline) ─┐ panel = -bg    (filled brand color)
   SOFT     (.ng-btn-X-soft)    ─┘

   Excludes clight/cdark/mute/lime (neutral surfaces).
   The .ng-btn-split-bare override (below) resets → 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the 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). Same behavior → single block. */
.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);
}

/* When split + grad coexist, the panel uses -border (darker than the
   gradient's end -hover), to stay visible over the body. */
.ng-btn-split.ng-btn-grad.ng-btn-yellow > .ng-btn-split-icon {
  background: var(--ng-yellow-border, #e6bd00);
}

/* BARE — final override: transparent panel + only a vertical divider.
   Placed AFTER the color blocks: wins by source order at equal
   specificity. Works on any variant. */
.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 — mono-color gradient on the body (-bg → -hover).
Hover: darker gradient (-hover → -border). Without this override,
the pre-existing background-image blocks the background-color of the
.ng-btn component's default :hover.
========================================================== */
.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
----------------------------------------------------------
Structural card: media, head (left/right), subhead, body,
section, subfoot, foot (left/center/right). Hover, compact,
horizontal variants. Responsive. Overridable scoped vars.
Head titles: .ng-card-head-titles block (vertical stack) +
.ng-card-title / .ng-card-subtitle for the "title above,
subtitle below" pattern without forcing head-left to column.
Spacing model (1.3.0): single horizontal pad-x + general vertical gap-block
(above/below subhead/body/subfoot); head and foot with their own padding-Y and
independent inner X/Y gaps (--ng-card-{head,foot}-gap-{x,y}). Head ↔ subhead now
separated: divider line below the header (--ng-card-head-border-bottom, default
on) + space. Removed tokens: --ng-card-{padding,body-padding,header-padding,
footer-padding,gap-foot} (absorbed by the new model).
----------------------------------------------------------
Version: 1.4.0 · Status: stable · RetroCompat: 1.3.0
========================================================== */
.ng-card {
  /* ===== Scoped Variables ===== */
  --ng-card-bg: var(--ng-surface);
  --ng-card-color: currentColor;
  /* radius: default md via fallback-at-use (not declared → :root cascade) */
  --ng-card-border-width: var(--ng-border-width, 1px);
  --ng-card-border-color: var(--ng-color-border, rgba(232,235,244,1));
  /* divider (head/foot/subhead/subfoot): shared width/style/color */
  --ng-card-divider-width: 1px;
  --ng-card-divider-style: dashed;
  --ng-card-divider-color: var(--ng-color-border);
  --ng-card-border-topbot-line: var(--ng-card-divider-width) var(--ng-card-divider-style) var(--ng-card-divider-color);
  /* per-divider on/off: default = the composed line; `transparent` to remove it. */
  --ng-card-head-border-bottom: var(--ng-card-border-topbot-line);
  --ng-card-foot-border-top: var(--ng-card-border-topbot-line);
  /* shadow: default md (rest) / lg (hover) via fallback-at-use (→ :root cascade) */
  /* ===== Spacing model =====
     pad-x      → SINGLE horizontal padding of all sections.
     gap-block  → general VERTICAL gap (above/below) of subhead, body, subfoot.
     head/foot  → own padding Y + independent inner X/Y gaps. */
  --ng-card-pad-x: 2.25rem;
  --ng-card-gap-block: 1.25rem;
  --ng-card-head-pad-y: 1.75rem;
  --ng-card-head-gap-x: .75rem;
  --ng-card-head-gap-y: .5rem;
  --ng-card-foot-pad-y: 1.75rem;
  --ng-card-foot-gap-x: .75rem;
  --ng-card-foot-gap-y: .5rem;
  --ng-card-gap: 1.25rem; /* inner gap of the body (between blocks/section) */
  --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, var(--ng-shadow-md));
  overflow: visible;
  transition: box-shadow 0.22s ease, transform 0.18s ease;
  /* ===== Hover ===== */
  /* ===== Media ===== */
  /* ===== Head ===== */
  /* ===== Head titles (stacked title + subtitle) =====
     Vertical block for the "title above, subtitle below" pattern
     inside head-left. Keeps head-left NARROW (width = longest line,
     not the sum) so the content on the right stays inline as long as there is
     real space, instead of wrapping because of the side-by-side text.
     head-left stays flex-row by default ("title + badge inline" use).
     Placed AFTER `.ng-card-head-left > *` to win at equal 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, var(--ng-shadow-lg));
  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;
  flex-wrap: wrap;
  gap: var(--ng-card-head-gap-y) var(--ng-card-head-gap-x);
  padding: var(--ng-card-head-pad-y) var(--ng-card-pad-x);
  border-bottom: var(--ng-card-head-border-bottom);
}
.ng-card .ng-card-head-left,
.ng-card .ng-card-head-right {
  display: flex;
  align-items: center;
  gap: var(--ng-card-head-gap-x);
  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: var(--ng-card-gap-block) var(--ng-card-pad-x);
  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-gap-block) var(--ng-card-pad-x);
  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-gap-block) var(--ng-card-pad-x);
  color: var(--ng-card-sub-color);
  border-top: var(--ng-card-border-topbot-line);
}
.ng-card .ng-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ng-card-foot-gap-y) var(--ng-card-foot-gap-x);
  padding: var(--ng-card-foot-pad-y) var(--ng-card-pad-x);
  border-top: var(--ng-card-foot-border-top);
  min-width: 0;
  /* only "bare" direct-child icons: NOT the <i> inside .ng-btn
     (buttons already handle icon/text spacing 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: var(--ng-card-foot-gap-x);
  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-pad-x: 1.125rem;
  --ng-card-gap-block: .85rem;
  --ng-card-head-pad-y: 1.125rem;
  --ng-card-foot-pad-y: 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 at sm (576): the right wraps only on small screens,
not already at md. When it goes below, spaced with --ng-card-gap.
========================================================== */
@media (max-width: 575.98px) {
  .ng-card {
    /* the spacing when head-right wraps is handled by the row-gap
       of .ng-card-head (--ng-card-head-gap-y): no double margin-top. */
  }
  .ng-card .ng-card-head-left,
  .ng-card .ng-card-head-right {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}
/* ==========================================================
NexiGrid — Chip
----------------------------------------------------------
Inline chip/tag, removable variant.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.ng-chip {
  --ng-chip-bg: var(--ng-surface-sunken);
  --ng-chip-color: var(--ng-text, #222);
  /* radius: default pill via fallback-at-use (not declared → :root cascade) */
  --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.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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 (ONE single component for all primitives)
----------------------------------------------------------
NG chart family, zero dependencies.
  Tier 1 (SCSS-only, here): donut ✓ · gauge ✓ · bars ✓ · sparkline ✓
  Tier 2 (ng_chart.js): line/area/bar from data (SVG) — future
Shared tokens --ng-chart-* (value/fill/track/size). Color variants
.ng-chart-<color> for the whole family. value = component DATA
(like --ng-progress-value), not a cosmetic override.
Size scale xs/sm/md/lg/xl on donut · gauge · bars (default = md).
Tier 2 (ng_chart.js): .ng-chart-js line/area/bar from data-values.
----------------------------------------------------------
Version: 1.4.0 · Status: stable · RetroCompat: 1.4.0
========================================================== */
/* ===== Shared scoped variables (family) ===== */
[class*=ng-chart-] {
  --ng-chart-value: 0%; /* DATA: % */
  --ng-chart-track: var(--ng-fill);
  --ng-chart-fill: var(--ng-primary-bg, #4a2a86);
}

/* Central/shared label */
.ng-chart-label {
  position: relative; /* above the masked ring */
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

/* ==========================================================
DONUT — conic-gradient (data) + radial mask (ring hole)
========================================================== */
.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 — semicircle (180°). conic from -90deg (starts from left),
fill = value/2 because the gauge covers half a circle. Half height +
overflow:hidden hides the lower half. Same donut mask.
========================================================== */
.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 in the opening, at the bottom */
  /* 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); /* full circle, lower half is clipped */
  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 bar = --ng-chart-value).
No JS: each .ng-chart-bar carries its own value. Rounded top,
squared base (rests on the baseline).
========================================================== */
.ng-chart-bars {
  --ng-chart-bars-height: 8rem; /* chart height (token, not size) */
  --ng-chart-bars-gap: .5rem;
  --ng-chart-bar-width: .85rem; /* bar WIDTH — md (default) */
  display: flex;
  align-items: flex-end;
  inline-size: max-content; /* the chart fits the fixed-width bars */
  gap: var(--ng-chart-bars-gap);
  block-size: var(--ng-chart-bars-height);
  /* Size = bar width (3 sizes) */
}
.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); /* fixed width per size */
  block-size: var(--ng-chart-value); /* DATA: % of the 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 — inline SVG <polyline>/<path> (Tier 1: points in the markup).
preserveAspectRatio="none" to stretch; non-scaling-stroke keeps
the width constant. .area variant for fill below the line.
========================================================== */
.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: faint fill below the line (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 rendered by ng_chart.js (SVG from data).
The JS injects <svg> with line/area/bar/dot classes. Style = family tokens.
========================================================== */
.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; /* anchor for the tooltip */
  display: block;
  inline-size: 100%;
  block-size: var(--ng-chart-js-h);
  /* render in real px (viewBox = px dimensions) → round circles, no distortion */
  /* Active point (hover) — hidden by 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) — dark bubble, follows the active point/bar */
.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 — family fill (track stays neutral)
========================================================== */
.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.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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
----------------------------------------------------------
Generic standalone dropdown (trigger + menu). Left/right/center
alignment, hover-mode, with-arrow. Menu in the top layer
(Popover API) with automatic flip/clamp via ng_dropdown.js.
Scoped vars overridable per theme/context.
----------------------------------------------------------
Version: 1.3.1 · Status: stable · RetroCompat: 1.3.0
========================================================== */
.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 (not declared → :root cascade) */
  /* shadow: default md via fallback-at-use (→ :root cascade) */
  --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;
  /* flat color (not translucent) → readable/override-friendly in theme tools */
  --ng-dd-divider-color: var(--ng-color-border-light, 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 */
  /* Closed popover: out of layout (not just opacity:0) → no box,
     no page overflow, at any trigger position. */
  /* Top layer (Popover API): cancel the UA centering (inset:0;margin:auto);
     the fixed positioning + flip/clamp is handled by the JS engine. */
  /* Initial fade state on opening (entry) for modern browsers */
  /* Alignment */
  /* Align center – the menu centers under the 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%;
  /* Phosphor icons: neutralize the global normalize line-height:0
     (same pattern as _ng_button.scss) — without it, an icon-only trigger
     collapses to 0px and the parent's flex centering has nothing to grip */
}
.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, var(--ng-shadow-md));
  opacity: 0;
  transform: translateY(var(--ng-dd-translate-y));
  pointer-events: none;
  /* display in the transition (allow-discrete) → the fade persists even
     on the Popover API none↔block toggle (modern Chrome/Safari/Firefox) */
  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; /* icon ↔ text spacing (consistent with the 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.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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
----------------------------------------------------------
Page footer: column grid (auto-fit), nav, bottom bar.
Variants center/right/inline. Responsive. Scoped vars.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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;
  /* footer link hover (default underline; the theme may switch to color:
     --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 on ANY footer link (not just .ng-footer-nav), excluding
     .ng-btn. Token-based -> themes override it. Same specificity
     as the .ng-footer-nav a:hover rule but more generic (includes it). */
}
.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
----------------------------------------------------------
Form system: input/select/textarea, custom check/radio
(ng-check-nexi classic/bolder), label/required, help, error/success
states, size sm/lg, upload, form-actions, count.
Anti-BS5 signature: brand-governed focus (crisp) + brand check;
opt-in underline with .ng-form-underline / .ng-field-underline.
----------------------------------------------------------
Version: 1.1.0 · Status: stable · RetroCompat: 1.1.0
========================================================== */
.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 with ONE class)
.ng-form-underline on the form (or .ng-field-underline on the single field):
all input/select/textarea become "editorial" — no box, just a
bottom line; focus = 2px brand bar. Zero per-field classes. The line uses
--ng-input-color-border, so error/success states color it on their own.
============================================================ */
.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 var(--ng-transition-speed) var(--ng-transition-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
============================================================ */
/* Base wrapper (always valid) */
.ng-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Default (native 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)
Variants: .classic | .bolder
============================================================ */
/* Shared base (not emitted directly) */
.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 for PLAIN <label> (no class) in stacked fields: the global
   reset zeroes them, leaving them stuck to the input (like heading and p).
   Specificity 0 (:where) - .ng-label / .ng-check / inline label NOT touched. */
: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
Minimal file upload compatible with ng-form
============================================================ */
.ng-upload {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Hidden real input */
  /* Click / drop area */
  /* Text */
  /* File list */
  /* Single 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: follows branded forms + theme-aware. Per-instance
     override 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 var(--ng-transition-speed) var(--ng-transition-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
----------------------------------------------------------
Page header: inner grid (left/center/right), nav, header-menu
(dropdown), header-panel, divider. Optional topbar (utility strip
left/center/right, hide-on-mobile via data-topbar-hide-mobile) and
transparent-over-hero → solid-on-scroll mode (data-transparent +
data-scroll-offset, single --ng-header-color text token). Responsive.
JS ng_header.js. Brand/surface from global tokens; the rest scoped.
----------------------------------------------------------
Version: 1.1.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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);
  --ng-header-color: inherit; /* single text token (propagates to nav) */
  --ng-header-scrolled-bg: var(--ng-surface); /* solid bg once scrolled (transparent mode) */
  width: 100%;
  position: relative;
  color: var(--ng-header-color);
  background-color: var(--ng-header-background);
  border-bottom: 1px solid var(--ng-header-border-bottom);
  z-index: var(--ng-z-header, 300);
  /* ===== Transparent over hero → solid on scroll =====
     Opt-in via attribute: data-transparent (+ data-scroll-offset).
     Il JS aggiunge .is-scrolled oltre la soglia. Il testo bianco si propaga
     dal SOLO token --ng-header-color (niente override per-selettore). */
}
.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: var(--ng-header-hover-bg);
}
.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: var(--ng-header-hover-bg);
}
.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[data-transparent] {
  --ng-header-background: transparent;
  --ng-header-color: var(--ng-color-white, #fff);
  border-bottom-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.ng-header[data-transparent].is-scrolled {
  --ng-header-background: var(--ng-header-scrolled-bg);
  --ng-header-color: var(--ng-header-scrolled-color, inherit);
  border-bottom-color: var(--ng-header-border-bottom);
}
.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 TOPBAR — striscia utility opzionale sopra la barra
principale. Va dentro .ng-header, prima di .ng-header-inner.
Slot left / center / right. Nascondibile su mobile con
l'attributo data-topbar-hide-mobile sul .ng-header.
===================================================== */
.ng-header-topbar {
  --ng-header-topbar-bg: var(--ng-surface-sunken);
  --ng-header-topbar-color: var(--ng-text-muted);
  --ng-header-topbar-min-h: 2.25rem;
  --ng-header-topbar-pad-y: .25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ng-header-gap);
  min-height: var(--ng-header-topbar-min-h);
  padding-inline: var(--ng-header-padding-x);
  padding-block: var(--ng-header-topbar-pad-y);
  background: var(--ng-header-topbar-bg);
  color: var(--ng-header-topbar-color);
  border-bottom: 1px solid var(--ng-header-border-bottom);
  font-size: 0.85rem;
}

.ng-header-topbar-left,
.ng-header-topbar-center,
.ng-header-topbar-right {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ng-header-gap);
}

.ng-header-topbar-left {
  justify-self: start;
}

.ng-header-topbar-center {
  grid-column: 2;
  justify-self: center;
  justify-content: center;
}

.ng-header-topbar-right {
  grid-column: 3;
  justify-self: end;
  justify-content: flex-end;
}

/* =====================================================
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 (not declared → :root cascade) */
  --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;
  }
  /* topbar nascondibile su mobile (opt-in) */
  .ng-header[data-topbar-hide-mobile] .ng-header-topbar {
    display: none;
  }
}
@media (max-width: 1023px) {
  .ng-header .ng-overlay-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* ===
NexiGrid — Input Group
---
Wrapper for input + addons (icons, text, buttons) prepend/append, multi-addon,
inherited sizes. Focus-within propagated to the whole group. Consistent disabled
state. Reuses the --ng-input-* tokens. Pattern derived from .ng-btn-group.
Password toggle: .ng-password-toggle (show/hide eye, JS in ng_form.js).
---
Version: 1.1.0 · Status: stable · RetroCompat: 1.1.0
=== */
.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;
  /* All children share the same overall "rounded box":
     - middle corners at 0
     - only the first on the left and last on the right keep the radius
     - negative margin to collapse the duplicated borders */
  /* The flexible input takes up the remaining space */
  /* Hover/focus bring the child on top so the border is not clipped */
}
.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; /* to bring on top on 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;
}

/* ============================================================
STATIC ADDON (icon / text)
============================================================ */
.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;
  /* Phosphor icons aligned to the input's typographic baseline */
}
.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);
}

/* Variant: "transparent" addon (icon inside the input background, no fill) */
.ng-input-addon-ghost {
  background: var(--ng-input-bg);
}

/* ============================================================
FOCUS-WITHIN: ring on the whole group
============================================================ */
.ng-input-group:focus-within {
  /* Overall ring on the group (no double shadow per child) */
  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);
}

/* ============================================================
PROPAGATED DISABLED (disabled input → consistent addons)
============================================================ */
.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 (map onto the .ng-input / .ng-input-addon / .ng-btn children)
============================================================ */
.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 inside an input-group: force top align so it doesn't look misaligned
============================================================ */
.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 — show/hide password eye (JS in ng_form.js).
It is a .ng-input-addon (usually -ghost) on a <button>: the group already
provides border, radius, sizes, focus-within and disabled; here only the
native button reset and the hover/active states.
============================================================ */
.ng-password-toggle {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--ng-transition-speed) var(--ng-transition-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
----------------------------------------------------------
Lists and list-item (media/content/action), meta-content. Variants selectable/divided/bordered/flush/hover/clickable/striped/compact/horizontal/tags/tasks.
----------------------------------------------------------
Version: 1.1.0 · Status: stable · RetroCompat: 1.1.0
========================================================== */
.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 (not declared → :root cascade) */
  --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: OPAQUE light grey (not affected by the background underneath) */
  --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 (independent)
========================================================== */
.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
----------------------------------------------------------
Central window with backdrop and focus trap. Panel with
header/body/footer, animations (fade/slide/zoom/rotate),
alignment, fullscreen, no-backdrop, dynamic. JS ng_modal.js.
Anti-BS5 signature: blurred backdrop + brand header band
(.ng-modal-<color>, header colored by the brand token).
----------------------------------------------------------
Version: 1.2.0 · Status: stable · RetroCompat: 1.1.0
========================================================== */
.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 (not declared → :root cascade) */
  --ng-modal-background: var(--ng-surface);
  /* shadow: default xl via fallback-at-use (not declared → :root cascade) */
  /* Signature: blurred backdrop (premium). Disable with --ng-modal-backdrop-blur: 0. */
  --ng-modal-backdrop-blur: 4px;
  --ng-modal-hf-pad-y: 1.25rem;
  --ng-modal-hf-pad-x: 1.875rem;
  --ng-modal-padding-header-footer: var(--ng-modal-hf-pad-y) var(--ng-modal-hf-pad-x);
  --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, var(--ng-shadow-xl));
  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> paints the header with the governed brand color (contrasting
text), header as a "flag": no dashed border-bottom, the top corners
follow the panel radius. Body/footer stay neutral. 0 hardcode,
colors from $ng-colors (L1/L2 tokens, 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)
----------------------------------------------------------
Structure: .ng-overlay (backdrop) > .ng-overlay-panel >
header/body/footer. Variants right (drawer from the right), form.
State is-active (open). Hamburger toggle .ng-overlay-toggle.
----------------------------------------------------------
Version: 1.0.1 · Status: stable · RetroCompat: 1.0.1
========================================================== */
.ng-overlay {
  /* ===== Scoped tokens (overridable by the 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 (the drawer itself) ===== */
  /* ===== Header (fixed at the top of the panel) ===== */
  /* ===== Body (scrollable) ===== */
  /* ===== Footer (optional, fixed at the bottom) ===== */
}
.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;
}

/* ==========================================================
ACTIVE STATE / CLOSE
----------------------------------------------------------
With is-active (from JS): backdrop opacity 1, immediate visibility,
panel slides into the 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;
}

/* ==========================================================
RIGHT VARIANT
========================================================== */
.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 — Hamburger button
----------------------------------------------------------
<button class="ng-overlay-toggle"><span></span></button>
::before = top line · span = middle · ::after = bottom
========================================================== */
.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 INSIDE OVERLAY
========================================================== */
.ng-overlay-body {
  display: flex;
  flex-direction: column;
  gap: var(--ng-header-gap);
  /* DIRECT children ONLY: the mobile nav items (moved here from ng_header) go
     full-width, but buttons/links of NESTED components (select-orion clear,
     table expander, dropdown, etc.) must NOT be stretched to full width. */
}
.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
----------------------------------------------------------
Fullscreen loading overlay (fixed, inset:0) with blur.
Variants dark and is-hidden (to hide when ready).
Overridable scoped vars.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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);
  /* Initial visible state */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

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

/* Hide when ready */
.ng-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ==========================================================
NexiGrid — Pagination
----------------------------------------------------------
Pagination with a stable structure (fixed slots to avoid
layout shift). Page list, page-size select, page/
prev/next/first/last/ellipsis elements, active/disabled states,
alignment and size variants. SCSS-only.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.ng-pagination {
  /* ── CONFIG ───────────────────────────────────────────── */
  --ng-pagination-gap: .35rem;
  --ng-pagination-margin-y: 1.3rem 0;
  /* radius: default sm via fallback-at-use (not declared → :root cascade) */
  --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: fixed width → no jumps) ===== */
.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 (all same size → stable grid) ===== */
.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 ===== */
/* active */
.ng-page.is-active {
  background: var(--ng-pagination-active-bg);
  color: var(--ng-pagination-active-color);
  font-weight: 600;
  pointer-events: none;
}

/* disabled */
.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 (always present → only visibility changes) ===== */
.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
----------------------------------------------------------
Structural/functional container to group content into sections
(settings, dashboard, filters). Opposite of the card: flat, bordered, dense,
no shadow/hover-lift. Sub: head/body/foot.
Variants: brand header band (.ng-panel-<color>) · .ng-panel-flat · size sm/lg ·
collapsible .ng-panel-collapsible (reuses ng_toggle.js + .ng-collapse, 0 new JS).
Colors from $ng-colors (L1/L2 tokens). Radius md via fallback-at-use.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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 (not declared → :root cascade) */
  --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 the head band to the rounded corners */
  /* ===== 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);
}

/* ==========================================================
Flat variant — no outer border (inner separators remain)
========================================================== */
.ng-panel-flat {
  border-color: transparent;
}

/* ==========================================================
Sizes — inner padding density
========================================================== */
.ng-panel-sm {
  --ng-panel-pad: .6rem .85rem;
}

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

/* ==========================================================
Collapsible — .ng-panel-collapsible
----------------------------------------------------------
The head acts as the trigger (data-ng-toggle="#id"), the body is inside a .ng-collapse
with that id. Mechanics and ARIA from ng_toggle.js (no new JS).
========================================================== */
.ng-panel-collapsible {
  /* ng_toggle.js sets aria-expanded on the 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> paints the head with the governed brand color (contrasting
text), no border-bottom. 0 hardcode, colors from $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
----------------------------------------------------------
Anchored container. Dynamic position/flip via JS
(ng_popover.js); .placement-<side> class synced after
flip. Arrow with .with-arrow, size sm/md/lg, no-shadow,
is-modal (focus-trap JS marker). Root+scoped model.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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 (not declared → :root cascade) */
  /* shadow: default lg via fallback-at-use (→ :root cascade) */
  --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, var(--ng-shadow-lg));
  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);
  /* Content slot */
  /* Arrow (positioned by the JS via the placement class) */
  /* Open state */
  /* ----- Placement: animated entry direction (slide from the side of origin) ----- */
  /* ----- Arrow for each side (requires .with-arrow) ----- */
  /* arrow on BOTTOM → arrow pointing up */
  /* ----- Sizing variants ----- */
  /* ----- Modifiers ----- */
  /* &.is-modal → semantic marker, focus-trap handled by the JS (no style) */
}
.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; /* activated by .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);
  /* the JS positions the box EDGE (2*size wide) on the trigger center →
     compensate half the arrow to center the TIP */
  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
----------------------------------------------------------
Progress bar. Color variants via --ng-progress-fill.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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 (not declared → :root cascade) */
  --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
---
Flat slider with dynamic colored fill, live number output, single or dual-thumb
(no thumb-cross), min/max marks, NG focus ring. Reuses --ng-input-* tokens and brand.
Driven by lightweight JS (ng_range.js): updates --ng-range-fill / -min / -max and
dispatches ng:range:input / :change.
Vertical: .ng-range-vertical (single + dual), via writing-mode, length --ng-range-length.
Opt-in ticks: .ng-range-ticks (every step; JS sets --ng-range-step-pct).
Colorpicker: .ng-range-hue (0-360 spectrum) and .ng-range-alpha (alpha channel,
checkerboard + data-color); color formats/copy via JS (data-color-format, data-copy).
Same JS (the fill is %, orientation-agnostic).
---
Version: 1.3.1 · Status: stable · RetroCompat: 1.3.1
=== */
.ng-range {
  /* ===== Scoped Variables ===== */
  /* tint (not surface-sunken: it blended with the background in light and dark)
     → the unselected part is visible on both themes */
  --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; /* length in vertical mode */
  /* radius: default pill via fallback-at-use (not declared → :root cascade) */
  --ng-range-output-color: var(--ng-text, #222);
  --ng-range-marks-color: var(--ng-text-muted, #777);
  --ng-range-disabled-opacity: .5;
  /* Ticks (opt-in with .ng-range-ticks) */
  /* follows the variant color: -dark in LIGHT, -soft in DARK (override below).
     Default = primary (like the default fill). */
  --ng-range-tick-color: var(--ng-primary-dark, #4a2a86);
  --ng-range-tick-w: 2px;
  /* State (updated by JS) */
  --ng-range-fill: 0%; /* single: 0..100 */
  --ng-range-min: 0%; /* dual: min thumb position */
  --ng-range-max: 100%; /* dual: max thumb position */
  --ng-range-step-pct: 10%; /* % of one step (JS) — for the ticks */
  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 — a single <input type="range">
============================================================ */
.ng-range:not(.ng-range-dual) .ng-range-input {
  /* UA reset */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
  /* track with 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). Same JS (fill % is agnostic).
Uses writing-mode (modern standard): Chrome 110+, Safari 16+, Firefox.
min at bottom, max at top. Length: --ng-range-length.
Shared grid scaffolding; the "input" area is filled by the input (single)
or by .ng-range-track (dual, see DUAL VERTICAL further below).
============================================================ */
.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: doesn't stretch in containers that give width (flex/grid) →
     ticks and marks stay close to the track instead of widening */
  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 at top, min at bottom */
  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 at bottom */
  inline-size: var(--ng-range-thumb-size);
  block-size: var(--ng-range-length);
  width: var(--ng-range-thumb-size); /* fallback for UAs that ignore logical on 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 {
  /* center the thumb on the thin track along the horizontal axis */
  margin-top: 0;
  margin-left: calc((var(--ng-range-thumb-size) - var(--ng-range-track-h)) / -2);
}

/* ============================================================
DUAL — two <input type="range"> stacked on a shared track
============================================================ */
.ng-range-dual .ng-range-track {
  position: relative;
  block-size: var(--ng-range-thumb-size);
  display: grid;
  align-items: center;
  /* track + fill between the two thumbs (CSS vars updated by 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 ABOVE the selection bar (::after) */
  width: 100%;
  height: var(--ng-range-thumb-size);
  background: transparent;
  margin: 0;
  padding: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  /* Track INSIDE the input as tall as the whole container: so the default
     thumb is vertically centered in the container, without corrective
     margins (Chrome dual fix: handles not aligned with the 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 centered by the full runnable-track */
  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 VERTICAL — .ng-range-vertical.ng-range-dual
writing-mode on the wrapper .ng-range-track: ::before/::after use logical
props (inset-inline-* = --ng-range-min/max) → the fill flips on its own
along the vertical axis. direction rtl = min at bottom, like the single.
Inputs: inherit writing-mode/direction from the track; only the physical
width/height that the DUAL rule sets for the horizontal need flipping.
============================================================ */
.ng-range-vertical.ng-range-dual .ng-range-track {
  writing-mode: vertical-lr;
  direction: rtl; /* min at bottom */
  inline-size: var(--ng-range-length); /* = height in vertical-lr */
  /* block-size: thumb-size (DUAL rule) = width in vertical-lr */
  width: var(--ng-range-thumb-size); /* physical fallbacks */
  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 {
  /* full runnable-track: thumb already centered, no corrective margin */
  margin-left: 0;
}

/* ============================================================
COLOR VARIANTS (reuses $ng-colors palette)
Ticks: follow the variant color and adapt to the theme —
-dark in LIGHT (readable on light track + on fill), -soft in DARK
(readable on dark track + on brand fill).
============================================================ */
/* default range (fill primary) in dark — before the loop so variants override it */
: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 — colorpicker track (single only). The track is a STATIC
gradient (no dynamic fill): the thumb selects the position.
Full track (track-h = thumb-size) as in colorpickers; the section comes
AFTER SIZES so it wins over sm/lg but inherits their scale via thumb-size.
JS (v1.2): exposes --ng-range-val (raw value) → thumb of the current color;
for alpha, data-color sets --ng-range-alpha-color. Color copy: data-copy
+ data-color-format (hex|rgb|css-rgb|css-rgba|cmyk), click on the output.
The hsl() spectrum stops and the checkerboard neutrals are literal by nature
(fixed reference, not palette — 50%-style exception of §3-bis).
============================================================ */
.ng-range-hue,
.ng-range-alpha {
  --ng-range-track-h: var(--ng-range-thumb-size);
}

/* output clickable when copy is active */
.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%);
}

/* vertical: just re-orient the gradient (redefinition of the 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 {
  /* checkerboard: FIXED neutral reference (same 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). Ticks ABOVE the track (NOT overlapping the
selection line): they sit on the page background → easy contrast, always
readable. Color = adaptive brand (-dark in light / -soft in dark, see loop).
JS sets --ng-range-step-pct. Use with "wide" steps (few ticks).
============================================================ */
/* BUG-006 — tick/thumb alignment: the thumb center does NOT travel the
   full 100% of the track (it goes from thumb/2 to width-thumb/2, the thumb stays inside).
   The tick bar is therefore narrowed to the real travel (thumb/2 margin per
   side) and each tick is CENTERED on the step multiple (half tick at the
   start/end of the period in the repeating-gradient). */
/* Horizontal (single + dual): tick bar ABOVE the track (grid reorder) */
.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); /* real thumb travel */
  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));
}

/* Vertical: tick bar beside (left of) the 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;
  /* real thumb travel (already centered in the row by 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 (advanced select, select2-like)
---
Enhancement of the native <select>: the real select stays the source of truth
(native form submit + graceful degradation — the native one also carries the
form's .ng-select for styling when JS is off). Custom UI: control box, top-layer
listbox menu (Popover API), local search, single + multi (chip), groups (optgroup),
rich options (Phosphor icon + sublabel), placeholder, clear.

SEPARATE COMPONENT: all classes are .ng-select-orion-* → NO collision with
the form's .ng-select (distinct CSS tokens). There is NO .ng-select rule here.

NG specifics: rich options + optional sync via ng_state (mirror on the native).
Reuses the --ng-input-* tokens (read-only) and the .ng-chip markup. JS: ng_select_orion.js.
---
Version: 1.0.1 · Status: stable · RetroCompat: 1.0.1
=== */
.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);
  /* component wrapper (a <div>): no inheritance from %ng-input-base
     because it is NOT .ng-select. Positioning context only. */
  display: block;
  position: relative;
  inline-size: 100%;
}

/* enhanced native <select>: hidden from view but present in the form
   (NOT display:none → it must keep submitting). With JS off it has NO
   .is-enhanced → it stays visible and styled by the form's .ng-select. */
.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) — reads the --ng-input-* tokens (does not redefine them)
============================================================ */
.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 is not a global token → fallback to --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 var(--ng-transition-speed) var(--ng-transition-ease), box-shadow var(--ng-transition-speed) var(--ng-transition-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;
  /* Defense against external resets (e.g. .ng-overlay-body button{display:block;
     width:100%}, 0,1,1): this compound selector is (0,2,0) and wins →
     the clear stays small and inline, not full-width centered. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: auto;
  width: auto;
  /* hiding (clearBtn.hidden=true) anchored to the component:
     .ng-select-orion-control .ng-select-orion-clear[hidden] = (0,2,1)
     > .ng-overlay-body button (0,1,1) → display:none wins. */
}
.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 (map onto the --ng-input-* tokens in the 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 (unified component)
----------------------------------------------------------
Page sidebar: structure (width, sticky, compact/text) +
menu (header/body/footer, nav, link/trigger, submenu, divider,
title). States is-active/is-open/is-compact, mobile drawer.
JS ng_sidebar.js. Root+scoped model (bg/border at global level).
Structure + vars consolidated here (previously in _ng_layout.scss).
----------------------------------------------------------
Version: 1.2.1 · Status: stable · RetroCompat: 1.2.1
========================================================== */
.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 (not declared → :root cascade) */
  --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;
  /* === Structure === */
  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 var(--ng-transition-speed) var(--ng-transition-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 (scrollable sidebars): never collapse the submenu inside the
     body/sidebar flex with overflow-y → otherwise it gets squashed and
     overflow:hidden clips the items, and the sidebar scroll dies. */
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  /* indent after the padding:0 reset (otherwise it would be zeroed out) */
  padding-inline-start: var(--ng-sidebar-indent-2);
  /* FIX 2: the JS sets [hidden] on closed panels, but the UA rule
     [hidden]{display:none} loses against the component's display:flex →
     ghost flex items at height 0 remained, counting 2x the gap between
     first-level triggers. We force display:none on the closed ones. */
}
.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 var(--ng-transition-speed) var(--ng-transition-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
----------------------------------------------------------
Loading placeholder with shimmer. Elements line/rect/
circle, width utilities, compact variant. Container
.ng-skeleton optional (vars have fallback). SCSS-only.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
/* ===== Container (optional) ===== */
.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 (not declared → :root cascade) */
  --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
----------------------------------------------------------
Notification stack (.ng-snackbar-stack) + item .ng-snackbar.
Variants fill/soft per color (from $ng-colors), positions
top/middle/bottom × left/center/right. JS ng_snackbar.js.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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: master default (3px) via fallback-at-use (→ :root cascade) */
  --ng-snackbar-padding: 1.6rem 2.4rem;
  /* shadow: default md via fallback-at-use (→ :root cascade) */
  --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, var(--ng-shadow-md));
  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;
}

/* media elements inside 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 from $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
----------------------------------------------------------
Circular spinner (border + rotation). Size sm/lg, center.
Integration with .ng-btn / .ng-auto-disable in the
is-loading state (positions spinner-right/left/top/bottom). SCSS-only.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
@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 only if spinner-* is present */
.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.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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
---
Data table system: header, filters, column toggle, scrollable wrapper, zebra/hover/selected, sorting, width system, sticky (.scroll-y internal / .sticky-page external), empty/loading/error · depends on the global tokens ($ng-colors, --ng-color-border, --ng-radius, --ng-gap, z-layer)
---
Version: 2.4.5 · Status: stable · RetroCompat: 2.4.5
=== */
.ng-table {
  --ng-table-gap: var(--ng-gap);
  /* radius: default md via fallback-at-use (not declared → :root cascade) */
  --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 (see .scroll-y / .sticky-page modifiers at the bottom) */
  --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); /* very light zebra */
  --ng-table-row-hover: rgba(var(--ng-hover-tint), .06); /* hover */
  /* selected: pale violet, theme-aware. OPAQUE mix (base --ng-surface, not
     transparent) → stays solid and doesn't multiply over the zebra; adapts to
     the theme (in dark --ng-surface is dark → dark violet row, not white). */
  --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: aligned to brand (was success) for consistency with the focus
     signature of form/button/modal. Drives 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 in the filter bar: the base .ng-dropdown has align-self:flex-start
   (deliberate anti-stretch) → here it would pin to the top relative to taller
   items (40px input). In the bar it must be centered like the others. */
.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;
  /* caret: fixed mid-grey color (currentColor doesn't inherit in bg-image →
     it would be black/invisible in dark). #888 readable on light and 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 to .ng-table: otherwise these styles leak onto EVERY dropdown in the
framework (item + custom checkbox). See 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 internal · #7 sticky-page)
------------------------------------------------------------
thead th is sticky (top: --ng-table-sticky-top). The wrapper, with overflow-x:auto,
is a scroll-container in Y too: without one of these modes the header doesn't stay
latched to the page scroll. Choose ONE mode:

 .ng-table.scroll-y    → fixed height + vertical scroll INSIDE the wrapper;
                          internal sticky header. Height: --ng-table-max-h (420px).
 .ng-table.sticky-page → no internal scroll; header sticky to the PAGE
                          scroll with offset --ng-table-sticky-top (e.g. below a
                          fixed app header). NB: the wrapper doesn't scroll
                          horizontally in this mode.
============================================================ */
.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)` → the sub-table's detail-rows do NOT
   count in the zebra parity (otherwise they'd offset the rows below). */
.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
============================================================ */
/* Global hover (excluding the sub-table's detail-rows) */
.ng-table-table.row-hover tbody tr:not(.ng-table-detail):hover td {
  background: var(--ng-table-row-hover);
}

/* Global clickable */
.ng-table-table.row-clickable tbody tr {
  cursor: pointer;
}

/* Selected single row */
.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 (twin detail-row) — opt-in data-table-expandable
============================================================ */
/* expander column + cell (narrow) */
.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; icon and text scale with this */
  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);
}

/* text trigger (e.g. Open/Close) */
.ng-table-expander-label {
  line-height: 1;
  white-space: nowrap;
}

.ng-table-expander-text {
  padding-inline: 0.5rem;
  font-weight: 600;
}

/* trigger sizes (sm | md | lg | xl) — scale icon + text */
.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 → points down when the row is open (default).
   With custom icons (data-collapse-icon, e.g. plus/minus) the glyph swap
   replaces the rotation → rotation disabled for that table. */
.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;
}

/* detail-row: neutral (no zebra/hover/selected), padding handled by the content */
.ng-table-detail > td {
  padding: 0;
  background: var(--ng-table-detail-bg);
}

/* open animation: grid-template-rows 0fr→1fr via @starting-style
   (starts from 0 every time the node enters the DOM = on every 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 */
  /* active states */
}
.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 var(--ng-transition-speed) var(--ng-transition-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. Variants classic/pills/vertical.
States is-active/is-disabled. JS ng_tabs.js.
Root+scoped model: the "standard" borders point to the global
token (--ng-color-border); the other knobs are scoped on the
component (per-instance/context override).
----------------------------------------------------------
Version: 1.1.0 · Status: stable · RetroCompat: 1.1.0
========================================================== */
.ng-tabs {
  /* === Scoped variables === */
  --ng-tabs-nav-gap: .5rem;
  --ng-tabs-nav-pad-x: .75rem; /* inset from the nav borders (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 (not declared → :root cascade) */
  --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: var(--ng-transition-speed) var(--ng-transition-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: items distributed (space-evenly) and NEVER touching the borders.
     The padding-inline guarantees the inset from the borders on EVERY variant
     (including .right / group-right / .start). */
  justify-content: space-evenly;
  padding-inline: var(--ng-tabs-nav-pad-x);
  /* Opt-out: compact left-aligned layout */
  /* .spread = now redundant (default), kept as a backward-compatible alias */
}
.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;
}

/* ==========================================================
Classic variant (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);
}

/* ==========================================================
Pills variant
========================================================== */
.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);
}

/* ==========================================================
Vertical variant
========================================================== */
.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 horizontal inset in vertical */
  padding-right: 1rem;
  gap: 0.75rem;
  justify-content: flex-start; /* vertical: tabs at the top, not 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)
----------------------------------------------------------
Collapsible target (.ng-toggle-target) with height/opacity
transition. is-open state. JS ng_toggle.js.
----------------------------------------------------------
Version: 1.0.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.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 on a trigger (JS ng_tooltip.js). Positions is-top/
bottom/left/right with arrow. Colors from $ng-colors (L1/L2 tokens).
Content: data-tooltip (text); with data-tooltip-html on the trigger
rendered as HTML (e.g. <br>/<b>) — TRUSTED content ONLY.
Viewport-aware position: auto-flip to the opposite side + clamp to edges
(never clipped); the arrow follows the final side.
----------------------------------------------------------
Version: 1.2.0 · Status: stable · RetroCompat: 1.2.0
========================================================== */
.ng-tooltip {
  --ng-tooltip-bg: #111;
  --ng-tooltip-color: #fff;
  /* radius: default sm via fallback-at-use (not declared → :root cascade) */
  --ng-tooltip-padding-y: .35rem;
  --ng-tooltip-padding-x: .6rem;
  --ng-tooltip-font-size: .75rem;
  /* shadow: default md via fallback-at-use (→ :root cascade) */
  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, var(--ng-shadow-md));
  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 directions generated from a map: 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 — Treeview
----------------------------------------------------------
Expandable hierarchical tree (file-tree). Nested nodes with
toggle (caret) and an author-chosen Phosphor icon. Opt-in
selection (data-treeview-selectable). Optional group titles.
JS ng_treeview.js: injects caret/spacer, wraps the children for
the animation (grid 0fr→1fr) and handles toggle/select.
Scoped vars overridable per theme.
----------------------------------------------------------
Version: 1.1.0 · Status: stable · RetroCompat: 1.0.0
========================================================== */
.ng-treeview {
  /* ===== Scoped variables ===== */
  --ng-tree-indent: 1.25rem; /* indent per level */
  --ng-tree-gap: .5rem; /* toggle ↔ icon ↔ label */
  --ng-tree-row-gap: .125rem; /* between sibling nodes */
  --ng-tree-item-pad-y: .35rem;
  --ng-tree-item-pad-x: .4rem;
  --ng-tree-toggle-size: 1.25rem;
  /* item radius: default sm via fallback-at-use (not declared → :root cascade) */
  --ng-tree-icon-color: var(--ng-primary-bg);
  --ng-tree-label-color: inherit;
  --ng-tree-muted: var(--ng-text-muted);
  --ng-tree-hover-bg: rgba(var(--ng-hover-tint), .06);
  --ng-tree-selected-bg: color-mix(in srgb, var(--ng-primary-bg) 10%, var(--ng-surface));
  --ng-tree-selected-color: inherit;
  --ng-tree-check-size: 1rem;
  --ng-tree-check-accent: var(--ng-primary-bg);
  --ng-tree-transition: .22s ease;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--ng-tree-label-color);
  min-width: 0;
}

/* ===== Group title ===== */
.ng-treeview-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ng-tree-muted);
  padding: 0.25rem var(--ng-tree-item-pad-x);
  margin-block-start: 0.25rem;
}

/* ===== Lists ===== */
.ng-treeview-group,
.ng-treeview-children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ng-tree-row-gap);
  min-width: 0;
}

.ng-treeview-children {
  padding-inline-start: var(--ng-tree-indent);
}

.ng-treeview-node {
  min-width: 0;
}

/* ===== Item (row) ===== */
.ng-treeview-item {
  display: flex;
  align-items: center;
  gap: var(--ng-tree-gap);
  min-width: 0;
  padding: var(--ng-tree-item-pad-y) var(--ng-tree-item-pad-x);
  border-radius: var(--ng-tree-radius, var(--ng-radius-sm));
  transition: background var(--ng-tree-transition);
}
.ng-treeview-item:hover {
  background: var(--ng-tree-hover-bg);
}

/* ===== Toggle (caret) + spacer (leaf alignment) ===== */
.ng-treeview-toggle,
.ng-treeview-toggle-spacer {
  flex: 0 0 auto;
  inline-size: var(--ng-tree-toggle-size);
  block-size: var(--ng-tree-toggle-size);
}

.ng-treeview-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ng-tree-muted);
  cursor: pointer;
  border-radius: var(--ng-radius-sm);
  transition: transform var(--ng-tree-transition), background var(--ng-tree-transition);
}
.ng-treeview-toggle:hover {
  background: var(--ng-tree-hover-bg);
}
.ng-treeview-toggle i {
  line-height: 1;
  display: inline-flex;
}

/* caret rotation on open (default: expand == collapse icon → it rotates).
   With different custom icons the JS swaps the glyph → here we disable it. */
.ng-treeview-node.is-open > .ng-treeview-item > .ng-treeview-toggle i {
  transform: rotate(90deg);
}

.ng-treeview[data-collapse-icon] .ng-treeview-node.is-open > .ng-treeview-item > .ng-treeview-toggle i {
  transform: none;
}

/* ===== Checkbox (opt-in: data-treeview-checkable) + alignment spacer ===== */
.ng-treeview-check,
.ng-treeview-check-spacer {
  flex: 0 0 auto;
  inline-size: var(--ng-tree-check-size);
  block-size: var(--ng-tree-check-size);
}

.ng-treeview-check {
  margin: 0;
  accent-color: var(--ng-tree-check-accent);
  cursor: pointer;
}

/* ===== Node icon (author) + label ===== */
.ng-treeview-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ng-tree-icon-color);
  line-height: 1;
}

.ng-treeview-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ng-tree-label-color);
}

/* ===== Selection (opt-in) ===== */
.ng-treeview[data-treeview-selectable] .ng-treeview-label {
  cursor: pointer;
}

.ng-treeview-node.is-selected > .ng-treeview-item {
  background: var(--ng-tree-selected-bg);
  color: var(--ng-tree-selected-color);
}

/* ===== Disabled ===== */
.ng-treeview-node.is-disabled > .ng-treeview-item {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Collapse animator (wrapper injected by the JS) ===== */
.ng-treeview-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--ng-tree-transition);
}

.ng-treeview-node:not(.is-open) > .ng-treeview-collapse {
  grid-template-rows: 0fr;
}

.ng-treeview-collapse > .ng-treeview-children {
  overflow: hidden;
  min-block-size: 0;
}

/* ===
NexiGrid — Brand Signature (button + badge)
---
Visual signatures that distinguish NG from the Bootstrap 5 look. Applied only to
.ng-btn and .ng-badge, opt-out with .ng-flat on an instance:

  C. Radius 3px         → "precision" silhouette, master baseline --ng-radius
  D. Premium padding    → typographic breathing room, each size scaled
  E. Microtypography    → weight 600 + tracking +.02em (no uppercase)
  Bar  (hover)          → animated top or bottom bar, 4 opt-in directions
                          (.ng-btn-bar + position + direction). See below.

  .ng-flat              → opt-out: radius sm (5px), default padding, default
                          typography, no bar (= BS5-like look).

Token-based: 0 hardcoded hex. Imported AFTER ng_button/ng_badge in
_ng_components.scss to guarantee the override.
---
Version: 1.0.0 · Status: experimental · RetroCompat: 1.0.0
=== */
/* ============================================================
C — Radius ("3px precision" silhouette, not BS5)
   Base = master --ng-radius (3px), managed by _ng_button/_ng_badge via
   fallback-at-use. Here 0 is NO longer forced: the signature is the 3px baseline.
   Only the .ng-flat opt-out remains → 5px (softer, BS5-like look).
============================================================ */
.ng-btn.ng-flat {
  --ng-btn-radius: var(--ng-radius-sm);
}

.ng-badge.ng-flat {
  --ng-badge-radius: var(--ng-radius-sm);
}

/* ============================================================
D — Premium padding (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 — Microtypography (subtle, without 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 — animated bar on hover (opt-in)
---
Minimal markup (e.g. primary, top, left to right):
  <button class="ng-btn ng-btn-primary ng-btn-bar ng-btn-bar-top ng-btn-bar-ltr">
    Click
  </button>

Position (one of):
  .ng-btn-bar-top
  .ng-btn-bar-bottom

Direction (one of):
  .ng-btn-bar-center-out   → grows from the center toward the edges
  .ng-btn-bar-out-center   → grows from the edges toward the center
  .ng-btn-bar-ltr          → grows from left to right
  .ng-btn-bar-rtl          → grows from right to left

They all end with the bar FULL WIDTH (it stays).

Scoped tokens:
  --ng-btn-bar-color   bar color (default -border of the color variant)
  --ng-btn-bar-h       bar height (default 3px)
  --ng-btn-bar-duration animation duration (default .35s)
============================================================ */
.ng-btn-bar {
  /* Default: currentColor → reuses the component's text color,
     always contrasting with the bg by color-system definition. On solid
     = -text (contrasting white/dark); on outline/soft = brand -bg.
     Custom override: set --ng-btn-bar-color on the instance. */
  --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;
}

/* Main bar (::after) — used by 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;
}

/* Growth origins */
.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: two segments that grow from the edges toward the center ===
   Uses ::before + ::after, each 50% wide with opposite transform-origin. */
.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: no animation */
.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 — opt-in variant: monospace + uppercase + wide tracking.
============================================================ */
.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-shadow-lg);
}

.bs-main-alt {
  box-shadow: var(--ng-shadow-md);
}

/* =================================================
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 */