/* NavVis UI v1.5.0 | navvis.com | MIT Licence */
/* Token-driven CSS framework for Power Pages, Power BI, Model-Driven Apps, Canvas Apps, SPAs, HTML email */
/* Brand source: NavVis Design System v3.3 (Sept 2024) */

/* ═══ SECTION: TOKENS ═══ */
:root {
  /* ════════════════════════════════════════════════════════════════
     TIER 1 — PRIMITIVE RAMPS  (verbatim from NavVis brand colors.scss)
     Numbered 100–900; 500 = canonical brand hue. Brand name in comment.
     Primitives are CONSTANT — never remapped in dark mode.
     ════════════════════════════════════════════════════════════════ */

  /* Blue — Digital Blue */
  --nv-blue-900: #134174;  /* Chathams Blue   */
  --nv-blue-800: #144A87;  /* Fun Blue-1      */
  --nv-blue-700: #165DAC;  /* Fun Blue        */
  --nv-blue-600: #1870D1;  /* Denim           */
  --nv-blue-500: #1979E4;  /* NavVis Blue     */
  --nv-blue-400: #4794E9;  /* Cornflower Blue */
  --nv-blue-300: #75AFEF;  /* Jordy Blue      */
  --nv-blue-200: #BAD7F7;  /* Tropical Blue   */
  --nv-blue-100: #E8F2FD;  /* Tropical Blue-1 */

  /* Green — Digital Green */
  --nv-green-900: #005900;  /* Deep Fir      */
  --nv-green-800: #008123;  /* Camarone      */
  --nv-green-700: #009C3C;  /* Fun Green     */
  --nv-green-600: #00C661;  /* Jade          */
  --nv-green-500: #1FE179;  /* NavVis Green  */
  --nv-green-400: #4CE794;  /* Magic Mint    */
  --nv-green-300: #79EDAF;  /* Magic Mint-1  */
  --nv-green-200: #BCF6D7;  /* Magic Mint-2  */
  --nv-green-100: #E9FCF2;  /* Granny Apple  */

  /* Red — Digital Red */
  --nv-red-900: #8C0001;  /* Sangria     */
  --nv-red-800: #A2000F;  /* Sangria-1   */
  --nv-red-700: #BB001E;  /* Monza       */
  --nv-red-600: #DF0035;  /* Monza-1     */
  --nv-red-500: #F80945;  /* NavVis Red  */
  --nv-red-400: #F93A6A;  /* Radical Red */
  --nv-red-300: #FB6B8F;  /* Brink Pink  */
  --nv-red-200: #FDB5C7;  /* Pastel Pink */
  --nv-red-100: #FEE6EC;  /* Pig Pink    */

  /* Yellow — Digital Yellow */
  --nv-yellow-900: #5C4200;  /* Saddle Brown  */
  --nv-yellow-800: #947100;  /* Pirate Gold   */
  --nv-yellow-700: #B18A00;  /* Buddha Gold   */
  --nv-yellow-600: #DEB100;  /* Corn          */
  --nv-yellow-500: #FFCD0E;  /* NavVis Yellow */
  --nv-yellow-400: #FFD73E;  /* Bright Sun    */
  --nv-yellow-300: #FFE16E;  /* Kournikova    */
  --nv-yellow-200: #FFF0B7;  /* Buttermilk    */
  --nv-yellow-100: #FFFAE7;  /* Gin Fizz      */

  /* Grey — warm-neutral true greys (text) */
  --nv-grey-900: #353436;  /* NavVis Grey  */
  --nv-grey-700: #5D5D5E;  /* Mid Gray     */
  --nv-grey-500: #868586;  /* Monsoon      */
  --nv-grey-300: #C2C2C3;  /* French Gray  */
  --nv-grey-200: #EBEBEB;  /* Gallery      */

  /* Slate — cool neutrals from the Dark Blue family (chrome/surfaces) */
  --nv-slate-900: #112E4F;  /* NavVis Dark Blue */
  --nv-slate-700: #415872;  /* Fiord            */
  --nv-slate-500: #708295;  /* Slate Gray       */
  --nv-slate-300: #B8C0CA;  /* Heather          */
  --nv-slate-200: #E7EAED;  /* Athens Gray      */
  --nv-slate-100: #F5F8FA;  /* Botticelli       */

  --nv-white:              #FFFFFF;
  --nv-black-hardware:     #000000;  /* hardware products ONLY — never UI text */
  --nv-palette-print-blue: #0072BA;  /* print only */

  /* ════════════════════════════════════════════════════════════════
     TIER 2 — SEMANTIC TOKENS  (intent → ramp step)
     These are what dark mode / customer themes remap. Components should
     prefer these over raw ramps.
     ════════════════════════════════════════════════════════════════ */

  /* Brand */
  --nv-color-brand:           var(--nv-blue-500);
  --nv-color-brand-hover:     var(--nv-blue-600);
  --nv-color-brand-active:    var(--nv-blue-700);

  /* Surfaces */
  --nv-color-surface:         var(--nv-white);     /* cards / panels                   */
  --nv-color-surface-raised:  var(--nv-white);     /* overlays / popovers over the page */
  --nv-color-surface-dark:    var(--nv-slate-900);
  --nv-color-page:            var(--nv-slate-100);  /* off-white app background          */

  /* Themeable neutral fills (flip in dark) */
  --nv-color-fill-subtle:     var(--nv-slate-100);  /* table headers, alt sections       */
  --nv-color-fill-muted:      var(--nv-grey-200);   /* disabled, tracks, code, chips     */
  --nv-color-brand-subtle:    var(--nv-blue-100);   /* hovers, selected rows, info tint  */

  /* Borders */
  --nv-color-border:          var(--nv-grey-300);   /* controls/cards/dividers (#C2C2C3) */
  --nv-color-border-focus:    var(--nv-blue-500);

  /* Text */
  --nv-color-text-primary:    var(--nv-grey-900);   /* #353436 — 10.4:1 AAA            */
  --nv-color-text-secondary:  var(--nv-grey-700);   /* #5D5D5E — ~7:1 AAA             */
  --nv-color-text-muted:      var(--nv-grey-500);   /* #868586 — AA Large            */
  --nv-color-text-inverse:    var(--nv-white);
  --nv-color-text-brand:      var(--nv-blue-800);   /* #144A87 — 8.9:1 AAA (was 3.5:1) */
  --nv-color-heading:         var(--nv-slate-900);  /* dark-blue headings; flips in dark */

  /* Status — text / fill / subtle-bg / border (chosen for WCAG AA on white) */
  --nv-color-info-text:       var(--nv-blue-800);   /* 8.9:1 */
  --nv-color-info-fill:       var(--nv-blue-500);
  --nv-color-info-subtle:     var(--nv-blue-100);
  --nv-color-info-border:     var(--nv-blue-200);

  --nv-color-success-text:    var(--nv-green-800);  /* #008123 — 5.0:1 */
  --nv-color-success-fill:    var(--nv-green-700);
  --nv-color-success-fill-hover: var(--nv-green-800);
  --nv-color-success-subtle:  var(--nv-green-100);
  --nv-color-success-border:  var(--nv-green-200);

  --nv-color-danger-text:     var(--nv-red-700);    /* #BB001E — 6.7:1   */
  --nv-color-danger-fill:     var(--nv-red-500);    /* brand red #F80945 */
  --nv-color-danger-fill-hover: var(--nv-red-600);
  --nv-color-danger-subtle:   var(--nv-red-100);
  --nv-color-danger-border:   var(--nv-red-200);

  --nv-color-warning-text:    var(--nv-yellow-900); /* #5C4200 — 9.4:1      */
  --nv-color-warning-fill:    var(--nv-yellow-500); /* brand yellow #FFCD0E */
  --nv-color-warning-subtle:  var(--nv-yellow-100);
  --nv-color-warning-border:  var(--nv-yellow-300);

  /* Convenience text aliases → status text (dark mode flips them once) */
  --nv-color-text-success:    var(--nv-color-success-text);
  --nv-color-text-warning:    var(--nv-color-warning-text);
  --nv-color-text-danger:     var(--nv-color-danger-text);
  --nv-color-text-info:       var(--nv-color-info-text);

  /* Danger focus ring */
  --nv-color-danger-focus-shadow: 0 0 0 3px rgba(248, 9, 69, 0.15);

  /* ── Backward-compat aliases (old token names → new system) ── */
  --nv-palette-digital-blue:  var(--nv-blue-500);
  --nv-palette-dark-blue:     var(--nv-slate-900);
  --nv-palette-grey:          var(--nv-grey-900);
  --nv-palette-green:         var(--nv-green-500);
  --nv-palette-red:           var(--nv-red-500);
  --nv-palette-yellow:        var(--nv-yellow-500);
  --nv-palette-success:       var(--nv-color-success-text);
  --nv-palette-warning:       var(--nv-color-warning-text);
  --nv-palette-danger:        var(--nv-color-danger-text);
  --nv-palette-info:          var(--nv-color-info-text);
  --nv-grey-50:               var(--nv-color-fill-subtle);
  --nv-grey-100:              var(--nv-color-fill-muted);
  --nv-grey-400:              var(--nv-color-text-muted);
  --nv-blue-50:               var(--nv-color-brand-subtle);

  /* ── Typography ── */
  --nv-font-display:  'Poppins', Arial, system-ui, sans-serif;
  --nv-font-body:     'Open Sans', Arial, system-ui, sans-serif;
  /* No brand mono font — use Open Sans with monospace fallback for data */
  --nv-font-data:     'Open Sans', 'Courier New', monospace;
  /* Correspondence font (brand): email + PowerPoint. Swap body→this in HTML email. */
  --nv-font-correspondence: Arial, sans-serif;
  /* Foreign-character font (brand): CJK / non-Latin scripts. */
  --nv-font-cjk:      'Noto Sans', 'Noto Sans SC', 'Open Sans', sans-serif;

  /* Type scale (Major Third ×1.25 from 16px base) */
  --nv-text-xs:   0.75rem;    /* 12px */
  --nv-text-sm:   0.875rem;   /* 14px */
  --nv-text-base: 1rem;       /* 16px */
  --nv-text-lg:   1.25rem;    /* 20px */
  --nv-text-xl:   1.5625rem;  /* 25px */
  --nv-text-2xl:  1.9375rem;  /* 31px */
  --nv-text-3xl:  2.4375rem;  /* 39px */
  --nv-text-4xl:  3.0625rem;  /* 49px */

  /* Line heights */
  --nv-leading-tight:   1.25;
  --nv-leading-snug:    1.375;
  --nv-leading-normal:  1.5;
  --nv-leading-relaxed: 1.625;

  /* Font weights */
  --nv-weight-light:    300;
  --nv-weight-regular:  400;
  --nv-weight-semibold: 600;
  --nv-weight-bold:     700;

  /* ── Spacing (4px grid) ── */
  --nv-space-0:   0;
  --nv-space-1:   0.25rem;   /* 4px */
  --nv-space-2:   0.5rem;    /* 8px */
  --nv-space-3:   0.75rem;   /* 12px */
  --nv-space-4:   1rem;      /* 16px */
  --nv-space-5:   1.25rem;   /* 20px */
  --nv-space-6:   1.5rem;    /* 24px */
  --nv-space-8:   2rem;      /* 32px */
  --nv-space-10:  2.5rem;    /* 40px */
  --nv-space-12:  3rem;      /* 48px */
  --nv-space-16:  4rem;      /* 64px */
  --nv-space-20:  5rem;      /* 80px */
  --nv-space-24:  6rem;      /* 96px */

  /* ── Border Radius ── */
  /* NavVis brand: squared corners everywhere; pill ONLY for tags/badges */
  --nv-radius-none: 0;
  --nv-radius-xs:   2px;
  --nv-radius-sm:   2px;  /* default for cards, inputs, buttons */
  --nv-radius-md:   2px;
  --nv-radius-lg:   2px;
  --nv-radius-xl:   4px;  /* max for layout containers */
  --nv-radius-pill: 999px; /* ONLY for tags/badges */

  /* ── Shadows (flat brand — minimal only) ── */
  --nv-shadow-none: none;
  --nv-shadow-1:    0 1px 2px rgba(17, 46, 79, 0.06);   /* floating UI */
  --nv-shadow-2:    0 4px 12px rgba(17, 46, 79, 0.08);  /* elevated overlays */

  /* ── Motion ── */
  --nv-duration-fast:   150ms;
  --nv-duration-base:   200ms;
  --nv-duration-slow:   300ms;
  --nv-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --nv-ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index Scale ── */
  --nv-z-base:      0;
  --nv-z-dropdown:  100;
  --nv-z-sticky:    200;
  --nv-z-overlay:   300;
  --nv-z-modal:     400;
  --nv-z-toast:     500;
  --nv-z-tooltip:   600;

  /* ── Border Widths ── */
  --nv-border-0:  0;
  --nv-border-1:  1px;
  --nv-border-2:  2px;
  --nv-border-4:  4px;

  /* ── Component-level convenience tokens ── */
  --nv-input-height:       40px;
  --nv-input-height-sm:    32px;
  --nv-input-height-lg:    48px;
  --nv-input-font-size:    var(--nv-text-sm);
  --nv-input-radius:       var(--nv-radius-sm);
  --nv-input-border:       1px solid var(--nv-color-border);
  --nv-input-focus-shadow: 0 0 0 3px rgba(25, 121, 228, 0.15);
  --nv-btn-radius:         var(--nv-radius-sm);

  /* ── Sidebar width ── */
  --nv-sidebar-width: 240px;
  --nv-navbar-height: 60px;
}

/* ═══ SECTION: DARK MODE (opt-in only — never automatic) ═══ */
/* Activate by adding .navvis-dark or [data-theme="dark"] to <html> or any
   ancestor element. There is intentionally NO @media (prefers-color-scheme)
   rule — the client OS setting must NOT change the theme. To follow the OS,
   set the attribute yourself in JS (see README → Dark Mode).
   Only Tier-2 SEMANTIC tokens are remapped here; Tier-1 primitives stay constant. */
.navvis-dark,
[data-theme="dark"] {
  color-scheme: dark;

  /* Brand — keep blue-500 as the fill so white labels stay legible; links lighten */
  --nv-color-brand:          var(--nv-blue-500);
  --nv-color-brand-hover:    var(--nv-blue-400);
  --nv-color-brand-active:   var(--nv-blue-600);
  --nv-color-border-focus:   var(--nv-blue-400);

  /* Surfaces — derived from the Dark Blue family (brand has no dark-UI palette) */
  --nv-color-surface:        #143459;  /* lifted Dark Blue (cards)  */
  --nv-color-surface-raised: #1B3F69;  /* overlays / popovers       */
  --nv-color-surface-dark:   #0A1B30;
  --nv-color-page:           #0C2038;  /* deeper than Dark Blue     */

  /* Themeable neutral fills */
  --nv-color-fill-subtle:    #102C4B;
  --nv-color-fill-muted:     #1B3F69;
  --nv-color-brand-subtle:   rgba(25, 121, 228, 0.18);

  /* Borders */
  --nv-color-border:         var(--nv-slate-700);  /* Fiord #415872 */

  /* Text */
  --nv-color-text-primary:   #F0F4FF;
  --nv-color-text-secondary: var(--nv-slate-300);  /* Heather    */
  --nv-color-text-muted:     var(--nv-slate-500);  /* Slate Gray */
  --nv-color-text-brand:     var(--nv-blue-300);   /* Jordy — links on dark */
  --nv-color-heading:        var(--nv-color-text-primary);

  /* Status — lighten text, tint subtle bgs, darken borders for dark surfaces */
  --nv-color-info-text:      var(--nv-blue-300);
  --nv-color-info-subtle:    rgba(25, 121, 228, 0.18);
  --nv-color-info-border:    var(--nv-blue-700);

  --nv-color-success-text:   var(--nv-green-400);
  --nv-color-success-subtle: rgba(0, 156, 60, 0.20);
  --nv-color-success-border: var(--nv-green-800);

  --nv-color-danger-text:    var(--nv-red-300);
  --nv-color-danger-subtle:  rgba(248, 9, 69, 0.20);
  --nv-color-danger-border:  var(--nv-red-700);

  --nv-color-warning-text:   var(--nv-yellow-300);
  --nv-color-warning-subtle: rgba(255, 205, 14, 0.16);
  --nv-color-warning-border: var(--nv-yellow-700);

  /* Shadows + focus rings tuned for dark */
  --nv-shadow-1:             0 1px 2px rgba(0, 0, 0, 0.3);
  --nv-shadow-2:             0 4px 16px rgba(0, 0, 0, 0.4);
  --nv-input-focus-shadow:   0 0 0 3px rgba(71, 148, 233, 0.25);
  --nv-color-danger-focus-shadow: 0 0 0 3px rgba(248, 9, 69, 0.25);
}

/* ═══ SECTION: RESET & BASE ═══ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-base);
  font-weight: var(--nv-weight-regular);
  line-height: var(--nv-leading-normal);
  color: var(--nv-color-text-primary);
  background-color: var(--nv-color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Poppins Semibold per brand */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--nv-space-4);
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  line-height: var(--nv-leading-tight);
  color: var(--nv-color-heading);
}

/* Headings use --nv-color-heading, which flips automatically in the dark block.
   (No prefers-color-scheme rule — dark mode is opt-in only.) */

h1 { font-size: var(--nv-text-3xl); }
h2 { font-size: var(--nv-text-2xl); }
h3 { font-size: var(--nv-text-xl); }
h4 { font-size: var(--nv-text-lg); }
h5 { font-size: var(--nv-text-base); }
h6 { font-size: var(--nv-text-sm); }

p {
  margin: 0 0 var(--nv-space-4);
}

a {
  color: var(--nv-color-text-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--nv-duration-fast) var(--nv-ease-out);
}

a:hover {
  color: var(--nv-color-brand-hover);
}

/* Global focus-visible ring — WCAG 2.2 AA */
:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}

/* Remove default outline when focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--nv-color-brand);
  color: #FFFFFF;
}

code, kbd, samp {
  font-family: var(--nv-font-data);
  font-size: 0.9em;
  background-color: var(--nv-grey-100);
  padding: 0.1em 0.35em;
  border-radius: var(--nv-radius-xs);
}

pre {
  font-family: var(--nv-font-data);
  font-size: var(--nv-text-sm);
  background-color: var(--nv-grey-100);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  padding: var(--nv-space-4);
  overflow-x: auto;
  margin: 0 0 var(--nv-space-4);
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

blockquote {
  margin: 0 0 var(--nv-space-4);
  padding: var(--nv-space-3) var(--nv-space-4);
  border-left: var(--nv-border-4) solid var(--nv-color-brand);
  color: var(--nv-color-text-secondary);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--nv-color-border);
  margin: var(--nv-space-6) 0;
}

ul, ol {
  margin: 0 0 var(--nv-space-4);
  padding-left: var(--nv-space-6);
}

img, svg, video {
  max-width: 100%;
  display: block;
}

/* Reduced motion — disable ALL transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ SECTION: LAYOUT SYSTEM ═══ */

/* Container */
.nv-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(var(--nv-space-4), 4vw, var(--nv-space-8));
}

.nv-container--sm     { max-width: 640px; }
.nv-container--md     { max-width: 768px; }
.nv-container--lg     { max-width: 1024px; }
.nv-container--xl     { max-width: 1280px; }
.nv-container--fluid  { max-width: none; }
.nv-container--padded { padding-block: var(--nv-space-8); }
.nv-container--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nv-navbar-height));
}

/* Grid */
.nv-grid {
  display: grid;
  grid-template-columns: repeat(var(--nv-cols, 12), minmax(0, 1fr));
  gap: var(--nv-gap, var(--nv-space-4));
}

.nv-col-1  { grid-column: span 1; }
.nv-col-2  { grid-column: span 2; }
.nv-col-3  { grid-column: span 3; }
.nv-col-4  { grid-column: span 4; }
.nv-col-5  { grid-column: span 5; }
.nv-col-6  { grid-column: span 6; }
.nv-col-7  { grid-column: span 7; }
.nv-col-8  { grid-column: span 8; }
.nv-col-9  { grid-column: span 9; }
.nv-col-10 { grid-column: span 10; }
.nv-col-11 { grid-column: span 11; }
.nv-col-12 { grid-column: span 12; }
.nv-col-full { grid-column: 1 / -1; }

/* Grid gap density modifiers (default gap is --nv-space-4 = 16px) */
.nv-grid--gap-sm { --nv-gap: var(--nv-space-3); }  /* 12px — compact forms */
.nv-grid--gap-lg { --nv-gap: var(--nv-space-6); }  /* 24px — airy layouts */

/* Flex layout */
.nv-flex { display: flex; }
.nv-inline-flex { display: inline-flex; }
.nv-flex-col { flex-direction: column; }
.nv-flex-row { flex-direction: row; }
.nv-flex-wrap { flex-wrap: wrap; }
.nv-flex-nowrap { flex-wrap: nowrap; }
.nv-flex-1 { flex: 1 1 0%; }
.nv-flex-auto { flex: 1 1 auto; }
.nv-flex-none { flex: none; }
.nv-items-start { align-items: flex-start; }
.nv-items-center { align-items: center; }
.nv-items-end { align-items: flex-end; }
.nv-items-stretch { align-items: stretch; }
.nv-justify-start { justify-content: flex-start; }
.nv-justify-center { justify-content: center; }
.nv-justify-end { justify-content: flex-end; }
.nv-justify-between { justify-content: space-between; }
.nv-justify-around { justify-content: space-around; }

/* Stack — vertical rhythm */
.nv-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nv-stack-gap, var(--nv-space-4));
}
.nv-stack--xs { --nv-stack-gap: var(--nv-space-1); }
.nv-stack--sm { --nv-stack-gap: var(--nv-space-2); }
.nv-stack--md { --nv-stack-gap: var(--nv-space-4); }
.nv-stack--lg { --nv-stack-gap: var(--nv-space-8); }

/* Cluster — horizontal wrapping group */
.nv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nv-cluster-gap, var(--nv-space-3));
}
.nv-cluster--sm { --nv-cluster-gap: var(--nv-space-2); }
.nv-cluster--lg  { --nv-cluster-gap: var(--nv-space-4); }
.nv-cluster--gap-md { --nv-cluster-gap: var(--nv-space-4); }

/* Sidebar layout — sidebar + main content */
.nv-sidebar-layout {
  display: flex;
  min-height: 100vh;
}

.nv-sidebar-layout__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--nv-color-page);
}

/* ═══ SECTION: TYPOGRAPHY UTILITIES ═══ */

/* Size */
.nv-text-xs   { font-size: var(--nv-text-xs);   line-height: var(--nv-leading-normal); }
.nv-text-sm   { font-size: var(--nv-text-sm);   line-height: var(--nv-leading-normal); }
.nv-text-base { font-size: var(--nv-text-base); line-height: var(--nv-leading-normal); }
.nv-text-lg   { font-size: var(--nv-text-lg);   line-height: var(--nv-leading-snug); }
.nv-text-xl   { font-size: var(--nv-text-xl);   line-height: var(--nv-leading-snug); }
.nv-text-2xl  { font-size: var(--nv-text-2xl);  line-height: var(--nv-leading-tight); }
.nv-text-3xl  { font-size: var(--nv-text-3xl);  line-height: var(--nv-leading-tight); }
.nv-text-4xl  { font-size: var(--nv-text-4xl);  line-height: var(--nv-leading-tight); }

/* Weight */
.nv-font-light    { font-weight: var(--nv-weight-light); }
.nv-font-regular  { font-weight: var(--nv-weight-regular); }
.nv-font-semibold { font-weight: var(--nv-weight-semibold); }
.nv-font-bold     { font-weight: var(--nv-weight-bold); }

/* Colour */
.nv-text-primary   { color: var(--nv-color-text-primary); }
.nv-text-secondary { color: var(--nv-color-text-secondary); }
.nv-text-muted     { color: var(--nv-color-text-muted); }
.nv-text-inverse   { color: var(--nv-color-text-inverse); }
.nv-text-brand     { color: var(--nv-color-text-brand); }
.nv-text-success   { color: var(--nv-color-text-success); }
.nv-text-warning   { color: var(--nv-color-text-warning); }
.nv-text-danger    { color: var(--nv-color-text-danger); }
.nv-text-info      { color: var(--nv-color-text-info); }

/* Display heading — Poppins Light */
.nv-heading-display {
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-light);
  font-size: clamp(var(--nv-text-2xl), 5vw, var(--nv-text-4xl));
  line-height: var(--nv-leading-tight);
  letter-spacing: -0.02em;
  color: var(--nv-color-heading);
}

/* Label — Open Sans 700 uppercase */
.nv-label {
  font-family: var(--nv-font-body);
  font-size: 11px;
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nv-color-text-secondary);
}

/* Mono / data */
.nv-mono {
  font-family: var(--nv-font-data);
  font-size: var(--nv-text-sm);
  font-feature-settings: "tnum" 1;
}

/* Truncate */
.nv-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Line clamp */
.nv-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nv-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alignment */
.nv-text-left   { text-align: left; }
.nv-text-center { text-align: center; }
.nv-text-right  { text-align: right; }

/* Flex alignment utility */
.nv-align-center { align-items: center; }

/* Heading component — use instead of raw h1–h4 when inside flex/grid contexts */
.nv-heading {
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  line-height: var(--nv-leading-tight);
  color: var(--nv-color-heading);
  margin: 0;
}
.nv-heading--1 { font-size: var(--nv-text-3xl); }
.nv-heading--2 { font-size: var(--nv-text-2xl); }
.nv-heading--3 { font-size: var(--nv-text-xl); }
.nv-heading--4 { font-size: var(--nv-text-lg); }

/* Text emphasis utility */
.nv-text-strong {
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-text-primary);
}

/* Display utilities (alternatives to .nv-block / .nv-hidden where Bootstrap conflicts).
   !important so they reliably override component display rules (e.g. .nv-form-error). */
.nv-d-block { display: block !important; }
.nv-d-none  { display: none !important; }

/* ═══ SECTION: COMPONENTS — BUTTONS ═══ */

.nv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-space-2);
  height: var(--nv-input-height);
  padding: 0 var(--nv-space-5);
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--nv-btn-radius);
  cursor: pointer;
  transition:
    background-color var(--nv-duration-fast) var(--nv-ease-out),
    border-color var(--nv-duration-fast) var(--nv-ease-out),
    color var(--nv-duration-fast) var(--nv-ease-out),
    box-shadow var(--nv-duration-fast) var(--nv-ease-out);
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}

.nv-btn:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}

.nv-btn:disabled,
.nv-btn[aria-disabled="true"] {
  background-color: var(--nv-grey-100);
  border-color: var(--nv-grey-100);
  color: var(--nv-grey-400);
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.nv-btn--primary {
  background-color: var(--nv-color-brand);
  border-color: var(--nv-color-brand);
  color: #FFFFFF;
}
.nv-btn--primary:hover:not(:disabled) {
  background-color: var(--nv-color-brand-hover);
  border-color: var(--nv-color-brand-hover);
}
.nv-btn--primary:active:not(:disabled) {
  background-color: var(--nv-color-brand-active);
  border-color: var(--nv-color-brand-active);
}
/* Keep white text on hover/focus: when a .nv-btn is rendered as an <a>, the base
   a:hover / a:focus rules (0,1,1) otherwise beat the variant's color (0,1,0). */
.nv-btn--primary:hover,
.nv-btn--primary:focus,
.nv-btn--primary:focus-visible { color: #FFFFFF; }

/* Secondary (outlined) */
.nv-btn--secondary {
  background-color: transparent;
  border-color: var(--nv-color-brand);
  color: var(--nv-color-brand);
}
.nv-btn--secondary:hover:not(:disabled) {
  background-color: var(--nv-blue-50);
}
.nv-btn--secondary:active:not(:disabled) {
  background-color: var(--nv-blue-200);
}

/* Ghost */
.nv-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--nv-color-text-primary);
}
.nv-btn--ghost:hover:not(:disabled) {
  background-color: var(--nv-grey-100);
}
.nv-btn--ghost:active:not(:disabled) {
  background-color: var(--nv-color-fill-muted);
}

/* Dark */
.nv-btn--dark {
  background-color: var(--nv-color-surface-dark);
  border-color: var(--nv-color-surface-dark);
  color: #FFFFFF;
}
.nv-btn--dark:hover:not(:disabled) {
  background-color: var(--nv-blue-700);
  border-color: var(--nv-blue-700);
}

/* Danger */
.nv-btn--danger {
  background-color: var(--nv-color-danger-fill);
  border-color: var(--nv-color-danger-fill);
  color: #FFFFFF;
}
.nv-btn--danger:hover:not(:disabled) {
  background-color: var(--nv-color-danger-fill-hover);
  border-color: var(--nv-color-danger-fill-hover);
}

/* Success */
.nv-btn--success {
  background-color: var(--nv-color-success-fill);
  border-color: var(--nv-color-success-fill);
  color: #FFFFFF;
}
.nv-btn--success:hover:not(:disabled) {
  background-color: var(--nv-color-success-fill-hover);
  border-color: var(--nv-color-success-fill-hover);
}
.nv-btn--success:hover,
.nv-btn--success:focus,
.nv-btn--success:focus-visible { color: #FFFFFF; }

/* Coloured outline variants — like --secondary (the brand outline) but in status colours:
   transparent fill, coloured border + accessible text token, subtle tint on hover. */
.nv-btn--success-outline {
  background-color: transparent;
  border-color: var(--nv-color-success-fill);
  color: var(--nv-color-success-text);
}
.nv-btn--success-outline:hover:not(:disabled) { background-color: var(--nv-color-success-subtle); }
.nv-btn--success-outline:active:not(:disabled) { background-color: var(--nv-color-success-border); }

.nv-btn--danger-outline {
  background-color: transparent;
  border-color: var(--nv-color-danger-fill);
  color: var(--nv-color-danger-text);
}
.nv-btn--danger-outline:hover:not(:disabled) { background-color: var(--nv-color-danger-subtle); }
.nv-btn--danger-outline:active:not(:disabled) { background-color: var(--nv-color-danger-border); }

/* Link */
.nv-btn--link {
  background-color: transparent;
  border-color: transparent;
  color: var(--nv-color-text-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-inline: 0;
  height: auto;
}
.nv-btn--link:hover:not(:disabled) {
  color: var(--nv-color-brand-hover);
}

/* Sizes */
.nv-btn--sm {
  height: var(--nv-input-height-sm);
  padding: 0 var(--nv-space-3);
  font-size: var(--nv-text-xs);
}
.nv-btn--lg {
  height: var(--nv-input-height-lg);
  padding: 0 var(--nv-space-6);
  font-size: var(--nv-text-base);
}

/* Full width */
.nv-btn--block {
  width: 100%;
}

/* Loading state */
.nv-btn--loading {
  color: transparent;
  pointer-events: none;
}
.nv-btn--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #FFFFFF;
  animation: nv-spin 0.6s linear infinite;
}

/* Button group */
.nv-btn-group {
  display: inline-flex;
}
.nv-btn-group .nv-btn {
  border-radius: 0;
}
.nv-btn-group .nv-btn:first-child {
  border-radius: var(--nv-btn-radius) 0 0 var(--nv-btn-radius);
}
.nv-btn-group .nv-btn:last-child {
  border-radius: 0 var(--nv-btn-radius) var(--nv-btn-radius) 0;
}
.nv-btn-group .nv-btn + .nv-btn {
  margin-left: -1px;
}

/* ═══ SECTION: COMPONENTS — FORMS ═══ */

/* Form group */
.nv-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-1);
  margin-bottom: var(--nv-space-4);
}

/* Inside a grid the grid's own gap owns vertical rhythm — drop the form-group
   margin so rows aren't double-spaced (grid gap + margin). */
.nv-grid > .nv-form-group { margin-bottom: 0; }

.nv-form-group label,
.nv-form-label {
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-text-primary);
}

.nv-form-hint {
  font-size: var(--nv-text-xs);
  color: var(--nv-color-text-muted);
}

.nv-form-error {
  font-size: var(--nv-text-xs);
  color: var(--nv-color-text-danger);
  display: flex;
  align-items: center;
  gap: var(--nv-space-1);
}

/* Base input */
.nv-input {
  width: 100%;
  height: var(--nv-input-height);
  padding: 0 var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-input-font-size);
  font-weight: var(--nv-weight-regular);
  color: var(--nv-color-text-primary);
  background-color: var(--nv-color-surface);
  border: var(--nv-input-border);
  border-radius: var(--nv-input-radius);
  transition:
    border-color var(--nv-duration-fast) var(--nv-ease-out),
    box-shadow var(--nv-duration-fast) var(--nv-ease-out);
  appearance: none;
  -webkit-appearance: none;
}

.nv-input::placeholder {
  color: var(--nv-grey-400);
}

.nv-input:hover:not(:disabled):not(:focus) {
  border-color: var(--nv-grey-400);
}

.nv-input:focus {
  outline: none;
  border-color: var(--nv-color-border-focus);
  box-shadow: var(--nv-input-focus-shadow);
}

.nv-input:disabled {
  background-color: var(--nv-grey-100);
  color: var(--nv-grey-400);
  cursor: not-allowed;
}

.nv-input--error {
  border-color: var(--nv-color-danger-fill);
}
.nv-input--error:focus {
  box-shadow: var(--nv-color-danger-focus-shadow);
}

.nv-input--success {
  border-color: var(--nv-palette-success);
}

/* Textarea */
.nv-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--nv-space-2) var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-input-font-size);
  color: var(--nv-color-text-primary);
  background-color: var(--nv-color-surface);
  border: var(--nv-input-border);
  border-radius: var(--nv-input-radius);
  resize: vertical;
  transition:
    border-color var(--nv-duration-fast) var(--nv-ease-out),
    box-shadow var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-textarea:focus {
  outline: none;
  border-color: var(--nv-color-border-focus);
  box-shadow: var(--nv-input-focus-shadow);
}
.nv-textarea:disabled {
  background-color: var(--nv-grey-100);
  color: var(--nv-grey-400);
  cursor: not-allowed;
}
.nv-textarea--error { border-color: var(--nv-palette-red); }

/* Select */
.nv-select {
  width: 100%;
  height: var(--nv-input-height);
  padding: 0 var(--nv-space-8) 0 var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-input-font-size);
  color: var(--nv-color-text-primary);
  background-color: var(--nv-color-surface);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235E5F63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--nv-space-3) center;
  border: var(--nv-input-border);
  border-radius: var(--nv-input-radius);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--nv-duration-fast) var(--nv-ease-out),
    box-shadow var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-select:focus {
  outline: none;
  border-color: var(--nv-color-border-focus);
  box-shadow: var(--nv-input-focus-shadow);
}
.nv-select:disabled {
  background-color: var(--nv-color-fill-muted);
  color: var(--nv-color-text-muted);
  cursor: not-allowed;
}
/* Dark-mode chevron — light stroke (Heather) so it stays visible on dark surfaces */
.navvis-dark .nv-select,
[data-theme="dark"] .nv-select {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23B8C0CA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nv-form-group--grow {
  flex: 1;
  min-width: 0;
}

/* Fieldset wrapper */
.nv-fieldset {
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  padding: var(--nv-space-4);
  margin: 0;
}
.nv-fieldset legend {
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-text-primary);
  padding: 0 var(--nv-space-1);
}

/* Radio card label — rich radio option with title + description */
.nv-radio-label {
  display: flex;
  align-items: flex-start;
  gap: var(--nv-space-3);
  padding: var(--nv-space-3);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  cursor: pointer;
  transition:
    border-color var(--nv-duration-fast) var(--nv-ease-out),
    background-color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-radio-label:hover {
  border-color: var(--nv-color-brand);
  background-color: var(--nv-blue-50);
}
.nv-radio-label:has(input:checked) {
  border-color: var(--nv-color-brand);
  background-color: var(--nv-blue-50);
}
.nv-radio-label__content {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-1);
}
.nv-radio-label__title {
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-text-primary);
}
.nv-radio-label__desc {
  font-size: var(--nv-text-xs);
  color: var(--nv-color-text-secondary);
}

/* Input group (prepend/append) */
.nv-input-group {
  display: flex;
  align-items: stretch;
}
.nv-input-group .nv-input {
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.nv-input-group__prepend,
.nv-input-group__append {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--nv-space-3);
  background-color: var(--nv-grey-100);
  border: 1px solid var(--nv-color-border);
  color: var(--nv-color-text-secondary);
  font-size: var(--nv-text-sm);
  white-space: nowrap;
}
.nv-input-group__prepend {
  border-right: 0;
  border-radius: var(--nv-radius-sm) 0 0 var(--nv-radius-sm);
}
.nv-input-group__append {
  border-left: 0;
  border-radius: 0 var(--nv-radius-sm) var(--nv-radius-sm) 0;
}

/* Checkbox */
.nv-checkbox,
.nv-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-2);
  cursor: pointer;
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
  user-select: none;
}

.nv-checkbox input[type="checkbox"],
.nv-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--nv-color-border);
  background-color: var(--nv-color-surface);
  cursor: pointer;
  transition:
    background-color var(--nv-duration-fast) var(--nv-ease-out),
    border-color var(--nv-duration-fast) var(--nv-ease-out);
  position: relative;
}

.nv-checkbox input[type="checkbox"] {
  border-radius: var(--nv-radius-xs);
}

.nv-radio input[type="radio"] {
  border-radius: 50%;
}

.nv-checkbox input[type="checkbox"]:checked,
.nv-radio input[type="radio"]:checked {
  background-color: var(--nv-color-brand);
  border-color: var(--nv-color-brand);
}

/* Animated checkmark */
.nv-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9l3.5 3.5L14 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.nv-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.nv-checkbox input[type="checkbox"]:focus-visible,
.nv-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}

.nv-checkbox input[type="checkbox"]:disabled,
.nv-radio input[type="radio"]:disabled {
  background-color: var(--nv-color-fill-muted);
  border-color: var(--nv-color-border);
  cursor: not-allowed;
}

/* Toggle switch */
.nv-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-2);
  cursor: pointer;
}

.nv-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 24px;
  background-color: var(--nv-color-fill-muted);
  border-radius: var(--nv-radius-pill);
  border: none;
  cursor: pointer;
  transition: background-color var(--nv-duration-fast) var(--nv-ease-out);
  position: relative;
}
.nv-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #FFFFFF;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform var(--nv-duration-fast) var(--nv-ease-out);
  box-shadow: var(--nv-shadow-1);
}
.nv-toggle input[type="checkbox"]:checked {
  background-color: var(--nv-color-brand);
}
.nv-toggle input[type="checkbox"]:checked::after {
  transform: translateX(24px);
}
.nv-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}
.nv-toggle input[type="checkbox"]:disabled {
  background-color: var(--nv-grey-100);
  cursor: not-allowed;
}

/* ═══ SECTION: COMPONENTS — CARDS ═══ */

.nv-card {
  background-color: var(--nv-color-surface);
  border-radius: var(--nv-radius-sm);  /* 2px — brand rule */
  overflow: hidden;
}

.nv-card--bordered {
  border: 1px solid var(--nv-color-border);
}

.nv-card--elevated {
  box-shadow: var(--nv-shadow-1);
}

.nv-card--interactive {
  cursor: pointer;
  border: 1px solid var(--nv-color-border);
  transition: border-color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-card--interactive:hover {
  border-color: var(--nv-color-brand);
}
.nv-card--interactive:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}

.nv-card--dark {
  background-color: var(--nv-color-surface-dark);
  color: var(--nv-color-text-inverse);
}

.nv-card__header {
  padding: var(--nv-space-4) var(--nv-space-5);
  border-bottom: 1px solid var(--nv-color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-3);
}

.nv-card__body {
  padding: var(--nv-space-5);
}

.nv-card__footer {
  padding: var(--nv-space-4) var(--nv-space-5);
  border-top: 1px solid var(--nv-color-border);
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
}

/* Stat card */
.nv-stat-card {
  background-color: var(--nv-color-surface);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  padding: var(--nv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-2);
}

.nv-stat-card__value {
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-2xl);
  font-weight: var(--nv-weight-semibold);
  line-height: 1;
  color: var(--nv-color-heading);
}

.nv-stat-card__label {
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-secondary);
}

.nv-stat-card__footer {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  margin-top: var(--nv-space-1);
}

/* Semantic tint variants — subtle status background + matching border.
   Brand-neutral surfaces stay the default .nv-stat-card; use these to encode
   status (e.g. KPI grids) without loud solid fills. Dark-mode safe (tokens flip). */
.nv-stat-card--success { background-color: var(--nv-color-success-subtle); border-color: var(--nv-color-success-border); }
.nv-stat-card--danger  { background-color: var(--nv-color-danger-subtle);  border-color: var(--nv-color-danger-border);  }
.nv-stat-card--warning { background-color: var(--nv-color-warning-subtle); border-color: var(--nv-color-warning-border); }
.nv-stat-card--brand   { background-color: var(--nv-color-brand-subtle);   border-color: var(--nv-color-info-border);    }

/* ═══ SECTION: COMPONENTS — NAVIGATION ═══ */

/* Navbar */
.nv-navbar {
  position: sticky;
  top: 0;
  z-index: var(--nv-z-sticky);
  height: var(--nv-navbar-height);
  background-color: var(--nv-palette-dark-blue);  /* flat — no gradient */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 var(--nv-space-5);
  gap: var(--nv-space-4);
}

.nv-navbar__brand {
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-lg);
  font-weight: var(--nv-weight-semibold);
  color: #FFFFFF;
  text-decoration: none;
  flex-shrink: 0;
}

.nv-navbar__nav,
.nv-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--nv-space-1);
  flex: 1;
}

.nv-navbar__link {
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  padding: var(--nv-space-2) var(--nv-space-3);
  border-radius: var(--nv-radius-sm);
  transition: color var(--nv-duration-fast) var(--nv-ease-out),
              background-color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-navbar__link:hover,
.nv-navbar__link--active {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
.nv-navbar__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.nv-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  margin-left: auto;
}

.nv-navbar__user-name {
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  color: #FFFFFF;
}

/* Sidebar */
.nv-sidebar {
  width: var(--nv-sidebar-width);
  min-height: 100vh;
  background-color: var(--nv-palette-dark-blue);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--nv-duration-base) var(--nv-ease-out);
}

.nv-sidebar--collapsed {
  width: 64px;
}

.nv-sidebar__brand {
  height: var(--nv-navbar-height);
  display: flex;
  align-items: center;
  padding: 0 var(--nv-space-5);
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-lg);
  font-weight: var(--nv-weight-semibold);
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.nv-sidebar__section-label {
  font-size: 10px;
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  padding: var(--nv-space-4) var(--nv-space-5) var(--nv-space-2);
}

.nv-sidebar__nav {
  padding: var(--nv-space-3) var(--nv-space-2);
  flex: 1;
}

.nv-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  padding: var(--nv-space-2) var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: var(--nv-radius-xs);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background-color var(--nv-duration-fast) var(--nv-ease-out),
              color var(--nv-duration-fast) var(--nv-ease-out),
              border-color var(--nv-duration-fast) var(--nv-ease-out);
  border-left: 2px solid transparent;
  margin-bottom: 2px;
}

.nv-sidebar__item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

.nv-sidebar__item--active {
  background-color: var(--nv-blue-100);   /* constant light pill — sidebar is always dark */
  color: var(--nv-blue-700);
  border-left-color: var(--nv-blue-500);
  font-weight: var(--nv-weight-semibold);
}

.nv-sidebar__item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Breadcrumb */
.nv-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nv-space-1);
  padding: var(--nv-space-3) 0;
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-muted);
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.nv-breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--nv-space-1);
}

.nv-breadcrumb li::before {
  content: '/';
  color: var(--nv-grey-400);
}

.nv-breadcrumb li:first-child::before {
  display: none;
}

.nv-breadcrumb a {
  color: var(--nv-color-text-muted);
  text-decoration: none;
}
.nv-breadcrumb a:hover {
  color: var(--nv-color-text-brand);
  text-decoration: underline;
}

.nv-breadcrumb [aria-current="page"] {
  color: var(--nv-color-text-primary);
}

/* Tabs */
.nv-tabs {
  display: flex;
  border-bottom: 1px solid var(--nv-color-border);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nv-tabs__item {
  display: flex;
}

.nv-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-2);
  padding: var(--nv-space-3) var(--nv-space-4);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-regular);
  color: var(--nv-color-text-secondary);
  text-decoration: none;
  background: none;                       /* reset <button> chrome */
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--nv-duration-fast) var(--nv-ease-out),
              border-color var(--nv-duration-fast) var(--nv-ease-out);
  white-space: nowrap;
}
.nv-tabs__link:hover {
  color: var(--nv-color-text-primary);
}
.nv-tabs__link--active {
  color: var(--nv-color-brand);
  border-bottom-color: var(--nv-color-brand);
  font-weight: var(--nv-weight-semibold);
}
.nv-tabs__link:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: -2px;
}

/* Pills variant */
.nv-tabs--pills {
  border-bottom: none;
  background-color: var(--nv-grey-100);
  border-radius: var(--nv-radius-xs);
  padding: var(--nv-space-1);
  display: inline-flex;
}
.nv-tabs--pills .nv-tabs__link {
  border-bottom: none;
  border-radius: var(--nv-radius-xs);
  margin-bottom: 0;
  padding: var(--nv-space-2) var(--nv-space-4);
}
.nv-tabs--pills .nv-tabs__link--active {
  background-color: var(--nv-color-surface);
  color: var(--nv-color-text-primary);
  box-shadow: var(--nv-shadow-1);
}

/* ═══ SECTION: COMPONENTS — DATA DISPLAY ═══ */

/* Table wrapper */
.nv-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--nv-radius-sm);
}

/* Table */
.nv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
}

.nv-table thead {
  background-color: var(--nv-grey-50);
}

.nv-table th {
  padding: var(--nv-space-3) var(--nv-space-4);
  text-align: left;
  font-family: var(--nv-font-body);
  font-size: 11px;
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nv-color-text-secondary);
  border-bottom: 1px solid var(--nv-color-border);
  white-space: nowrap;
  user-select: none;
}

.nv-table td {
  padding: 0 var(--nv-space-4);
  height: 44px;
  border-bottom: 1px solid var(--nv-grey-100);
  vertical-align: middle;
}

.nv-table tbody tr:hover {
  background-color: var(--nv-blue-50);
}

.nv-table tbody tr:last-child td {
  border-bottom: none;
}

/* Striped */
.nv-table--striped tbody tr:nth-child(even) {
  background-color: var(--nv-grey-50);
}
.nv-table--striped tbody tr:nth-child(even):hover {
  background-color: var(--nv-blue-50);
}

/* Compact */
.nv-table--compact td {
  height: 32px;
  padding: 0 var(--nv-space-3);
}
.nv-table--compact th {
  padding: var(--nv-space-2) var(--nv-space-3);
}

/* Bordered */
.nv-table--bordered th,
.nv-table--bordered td {
  border: 1px solid var(--nv-color-border);
}

/* Sticky header */
.nv-table--sticky-header th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--nv-grey-50);
}

/* Sortable column headers */
.nv-th--sortable {
  cursor: pointer;
}
.nv-th--sortable:hover {
  color: var(--nv-color-text-primary);
}
.nv-th--sortable::after {
  content: ' ↕';
  opacity: 0.4;
  font-size: 10px;
}
.nv-th--asc::after {
  content: ' ↑';
  opacity: 1;
  color: var(--nv-color-brand);
}
.nv-th--desc::after {
  content: ' ↓';
  opacity: 1;
  color: var(--nv-color-brand);
}

/* Sortable header as a real <button> (keyboard-operable) that reads as plain
   header text — not a default button. Provides its own arrow via __sort-icon. */
.nv-th__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-1);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
}
.nv-th__sort-btn:hover { color: var(--nv-color-text-primary); }
.nv-th__sort-icon { opacity: 0.45; font-size: 11px; }
.nv-th--asc  .nv-th__sort-icon,
.nv-th--desc .nv-th__sort-icon { opacity: 1; color: var(--nv-color-brand); }
/* When a sort button supplies its own icon, drop the th's ::after arrow */
.nv-th--sortable:has(.nv-th__sort-btn)::after { content: none; }

/* Special cells */
.nv-td--status {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
}
.nv-td--status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--nv-status-color, var(--nv-grey-400));
  flex-shrink: 0;
}

.nv-td--actions {
  text-align: right;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--nv-duration-fast) var(--nv-ease-out);
}
tr:hover .nv-td--actions {
  opacity: 1;
}

/* Badge */
.nv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-1);
  padding: 2px var(--nv-space-2);
  font-family: var(--nv-font-display);
  font-size: 12px;
  font-weight: var(--nv-weight-semibold);
  line-height: 1.4;
  border-radius: var(--nv-radius-pill);
  white-space: nowrap;
}

.nv-badge--blue   { background: var(--nv-color-info-subtle);    color: var(--nv-color-info-text); }
.nv-badge--green  { background: var(--nv-color-success-subtle); color: var(--nv-color-success-text); }
.nv-badge--yellow { background: var(--nv-color-warning-subtle); color: var(--nv-color-warning-text); }
.nv-badge--red    { background: var(--nv-color-danger-subtle);  color: var(--nv-color-danger-text); }
.nv-badge--grey   { background: var(--nv-color-fill-muted);     color: var(--nv-color-text-secondary); }
.nv-badge--dark   { background: var(--nv-color-surface-dark);   color: var(--nv-color-text-inverse); }

.nv-badge--lg {
  padding: var(--nv-space-1) var(--nv-space-3);
  font-size: var(--nv-text-sm);
}

/* Tag (alias for badge — same pill shape) */
.nv-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--nv-space-2);
  font-family: var(--nv-font-display);
  font-size: 12px;
  font-weight: var(--nv-weight-semibold);
  border-radius: var(--nv-radius-pill);
}

/* Avatar */
.nv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--nv-text-xs);
  border-radius: 50%;
  background-color: var(--nv-color-brand-subtle);
  color: var(--nv-color-text-brand);
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
}
.nv-avatar--sm  { width: 24px; height: 24px; font-size: 10px; }
.nv-avatar--md  { width: 36px; height: 36px; font-size: var(--nv-text-sm); }
.nv-avatar--lg  { width: 48px; height: 48px; font-size: var(--nv-text-base); }
.nv-avatar--xl  { width: 64px; height: 64px; font-size: var(--nv-text-lg); }
.nv-avatar img  { width: 100%; height: 100%; object-fit: cover; }

/* Progress bar */
.nv-progress {
  width: 100%;
  height: 6px;
  background-color: var(--nv-grey-100);
  border-radius: var(--nv-radius-pill);
  overflow: hidden;
}
.nv-progress__bar {
  height: 100%;
  background-color: var(--nv-color-brand);
  border-radius: var(--nv-radius-pill);
  width: var(--nv-progress-value, 0%);
  transition: width var(--nv-duration-slow) var(--nv-ease-out);
}
.nv-progress--success .nv-progress__bar { background-color: var(--nv-color-success-fill); }
.nv-progress--warning .nv-progress__bar { background-color: var(--nv-color-warning-fill); }
.nv-progress--danger  .nv-progress__bar { background-color: var(--nv-color-danger-fill); }

/* ═══ SECTION: COMPONENTS — FEEDBACK ═══ */

/* Alert */
.nv-alert {
  display: flex;
  gap: var(--nv-space-3);
  padding: var(--nv-space-4);
  border-radius: var(--nv-radius-sm);
  border: 1px solid transparent;
  font-size: var(--nv-text-sm);
}

.nv-alert--info {
  background-color: var(--nv-color-info-subtle);
  border-color: var(--nv-color-info-border);
  color: var(--nv-color-info-text);
}
.nv-alert--success {
  background-color: var(--nv-color-success-subtle);
  border-color: var(--nv-color-success-border);
  color: var(--nv-color-success-text);
}
.nv-alert--warning {
  background-color: var(--nv-color-warning-subtle);
  border-color: var(--nv-color-warning-border);
  color: var(--nv-color-warning-text);
}
.nv-alert--danger {
  background-color: var(--nv-color-danger-subtle);
  border-color: var(--nv-color-danger-border);
  color: var(--nv-color-danger-text);
}

.nv-alert__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}
.nv-alert__content { flex: 1; }
.nv-alert__title {
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  margin-bottom: var(--nv-space-1);
}
.nv-alert__body { opacity: 0.9; }
.nv-alert__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  transition: opacity var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-alert__close:hover { opacity: 1; }
.nv-alert__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Toast */
.nv-toast-container {
  position: fixed;
  bottom: var(--nv-space-5);
  right: var(--nv-space-5);
  z-index: var(--nv-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-3);
  pointer-events: none;
}

.nv-toast {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: var(--nv-space-3);
  min-width: 300px;
  max-width: 400px;
  padding: var(--nv-space-4);
  background-color: var(--nv-color-surface);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  box-shadow: var(--nv-shadow-2);
  font-size: var(--nv-text-sm);
}

/* Modal */
.nv-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 46, 79, 0.5);
  z-index: var(--nv-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nv-space-4);
}

.nv-modal-overlay[hidden] { display: none; }

.nv-modal {
  background-color: var(--nv-color-surface);
  border-radius: var(--nv-radius-sm);
  box-shadow: var(--nv-shadow-2);
  width: 100%;
  max-height: calc(100vh - var(--nv-space-8));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nv-modal--sm { max-width: 400px; }
.nv-modal--md { max-width: 560px; }
.nv-modal--lg { max-width: 768px; }
.nv-modal--xl { max-width: 1024px; }

.nv-modal__header {
  padding: var(--nv-space-4) var(--nv-space-5);
  border-bottom: 1px solid var(--nv-color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.nv-modal__title {
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-base);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-heading);
  margin: 0;
}

.nv-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nv-color-text-muted);
  font-size: 20px;
  line-height: 1;
  padding: var(--nv-space-1);
  border-radius: var(--nv-radius-xs);
  transition: color var(--nv-duration-fast) var(--nv-ease-out),
              background-color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-modal__close:hover {
  color: var(--nv-color-text-primary);
  background-color: var(--nv-grey-100);
}
.nv-modal__close:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}

.nv-modal__body {
  padding: var(--nv-space-5);
  overflow-y: auto;
  flex: 1;
}

.nv-modal__footer {
  padding: var(--nv-space-4) var(--nv-space-5);
  border-top: 1px solid var(--nv-color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nv-space-3);
  flex-shrink: 0;
}

/* Modal step progress area */
.nv-modal__steps {
  padding: var(--nv-space-4) var(--nv-space-5);
  border-bottom: 1px solid var(--nv-color-border);
  flex-shrink: 0;
}

/* Step progress bar + step list */
.nv-step-progress {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-3);
}
.nv-step-progress__track {
  width: 100%;
  height: 4px;
  background-color: var(--nv-grey-100);
  border-radius: var(--nv-radius-pill);
  overflow: hidden;
}
.nv-step-progress__fill {
  height: 100%;
  width: var(--nv-progress-value, 0%);
  background-color: var(--nv-color-brand);
  border-radius: var(--nv-radius-pill);
  transition: width var(--nv-duration-slow) var(--nv-ease-out);
}
.nv-step-progress__list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Individual step item */
.nv-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nv-space-1);
  flex: 1;
}
.nv-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--nv-grey-100);
  color: var(--nv-grey-400);
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-xs);
  font-weight: var(--nv-weight-semibold);
  transition:
    background-color var(--nv-duration-fast) var(--nv-ease-out),
    color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-step__label {
  font-size: var(--nv-text-xs);
  color: var(--nv-color-text-muted);
  text-align: center;
}
.nv-step--active .nv-step__dot {
  background-color: var(--nv-color-brand);
  color: #FFFFFF;
}
.nv-step--active .nv-step__label {
  color: var(--nv-color-text-primary);
  font-weight: var(--nv-weight-semibold);
}
.nv-step--complete .nv-step__dot {
  background-color: var(--nv-palette-dark-blue);
  color: #FFFFFF;
}

/* Step panel — wizard content pane */
.nv-step-panel { display: block; }
.nv-step-panel[hidden] { display: none; }

/* Body scroll lock when modal is open */
.nv-modal-open { overflow: hidden; }

/* Tooltip (CSS-only via data attribute) */
[data-tooltip] {
  position: relative;
  cursor: default;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--nv-space-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--nv-z-tooltip);
  background-color: var(--nv-palette-dark-blue);
  color: #FFFFFF;
  font-size: var(--nv-text-xs);
  font-family: var(--nv-font-body);
  padding: var(--nv-space-1) var(--nv-space-2);
  border-radius: var(--nv-radius-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--nv-duration-fast) var(--nv-ease-out);
}
[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + var(--nv-space-1));
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--nv-palette-dark-blue);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--nv-duration-fast) var(--nv-ease-out);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}

/* Skeleton shimmer */
.nv-skeleton {
  background: linear-gradient(
    90deg,
    var(--nv-grey-100) 25%,
    var(--nv-grey-50) 50%,
    var(--nv-grey-100) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--nv-radius-xs);
  display: block;
}

.nv-skeleton--text {
  height: 14px;
  margin-bottom: var(--nv-space-2);
  border-radius: var(--nv-radius-xs);
}
.nv-skeleton--title {
  height: 20px;
  width: 60%;
  margin-bottom: var(--nv-space-3);
}
.nv-skeleton--avatar {
  border-radius: 50%;
}
.nv-skeleton--btn {
  height: 40px;
  width: 120px;
}

/* ═══ SECTION: COMPONENTS — DASHBOARD ═══ */

/* Panel */
.nv-panel {
  background-color: var(--nv-color-surface);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  overflow: hidden;
}

.nv-panel__header {
  padding: var(--nv-space-4) var(--nv-space-5);
  border-bottom: 1px solid var(--nv-color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-3);
}

.nv-panel__title {
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-base);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-heading);
  margin: 0;
}

.nv-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
}

.nv-panel__body {
  padding: var(--nv-space-5);
}

/* KPI grid */
.nv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--nv-space-4);
}
/* Centered variant — cards keep a tidy capped width (auto-fit collapses empty
   tracks) and the group centers instead of stretching to 1fr / leaving a gap.
   Use when a small number of cards would otherwise sit left-aligned on wide screens. */
.nv-kpi-grid--center {
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: center;
}

/* Data grid (dense analytical) */
.nv-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--nv-space-3);
}

/* Chart container (aspect-ratio locked 16/9) */
.nv-chart-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--nv-color-surface);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══ SECTION: COMPONENTS — EXTENDED (v1.2) ═══ */

/* ── Description list (key/value — detail views) ── */
.nv-desc-list { margin: 0; }
.nv-desc-list__term {
  margin: 0;
  font-size: var(--nv-text-xs);
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nv-color-text-secondary);
}
.nv-desc-list__desc {
  margin: 0 0 var(--nv-space-4);
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
}
.nv-desc-list--horizontal {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: 0 var(--nv-space-4);
}
.nv-desc-list--horizontal .nv-desc-list__term,
.nv-desc-list--horizontal .nv-desc-list__desc {
  margin: 0;
  padding: var(--nv-space-2) var(--nv-space-3);
  display: flex;
  align-items: center;
}
.nv-desc-list--striped .nv-desc-list__term:nth-of-type(even),
.nv-desc-list--striped .nv-desc-list__desc:nth-of-type(even) {
  background-color: var(--nv-color-fill-subtle);
}

/* ── Empty state ── */
.nv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--nv-space-3);
  padding: var(--nv-space-12) var(--nv-space-6);
  color: var(--nv-color-text-secondary);
}
.nv-empty__icon {
  width: 48px;
  height: 48px;
  color: var(--nv-color-text-muted);
  opacity: 0.8;
}
.nv-empty__title {
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-lg);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-heading);
  margin: 0;
}
.nv-empty__message {
  font-size: var(--nv-text-sm);
  max-width: 40ch;
  margin: 0;
}
.nv-empty__actions {
  display: flex;
  gap: var(--nv-space-3);
  margin-top: var(--nv-space-2);
}

/* ── Spinner ── */
.nv-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--nv-color-brand);
}
.nv-spinner--sm { width: 16px; height: 16px; }
.nv-spinner--lg { width: 40px; height: 40px; border-width: 3px; }
.nv-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--nv-color-surface) 70%, transparent);
  z-index: var(--nv-z-overlay);
}

/* ── Pagination ── */
.nv-pagination {
  display: flex;
  align-items: center;
  gap: var(--nv-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nv-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--nv-space-2);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
  text-decoration: none;
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  background-color: var(--nv-color-surface);
  cursor: pointer;
  transition: background-color var(--nv-duration-fast) var(--nv-ease-out),
              border-color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-pagination__link:hover:not(.nv-pagination__link--active):not(.nv-pagination__link--disabled) {
  border-color: var(--nv-color-brand);
  background-color: var(--nv-color-brand-subtle);
}
.nv-pagination__link--active {
  background-color: var(--nv-color-brand);
  border-color: var(--nv-color-brand);
  color: #FFFFFF;
  font-weight: var(--nv-weight-semibold);
}
.nv-pagination__link--disabled {
  color: var(--nv-color-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.nv-pagination__link:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}
.nv-pagination--sm .nv-pagination__link { min-width: 28px; height: 28px; font-size: var(--nv-text-xs); }

/* ── Banner (full-width, page-level) ── */
.nv-banner {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  width: 100%;
  padding: var(--nv-space-3) var(--nv-space-5);
  font-size: var(--nv-text-sm);
  border-bottom: 1px solid var(--nv-color-border);
  background-color: var(--nv-color-fill-subtle);
  color: var(--nv-color-text-primary);
}
.nv-banner__content { flex: 1; min-width: 0; }
.nv-banner__actions { display: flex; align-items: center; gap: var(--nv-space-2); flex-shrink: 0; }
.nv-banner__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.nv-banner__close:hover { opacity: 1; }
.nv-banner--info    { background-color: var(--nv-color-info-subtle);    color: var(--nv-color-info-text);    border-bottom-color: var(--nv-color-info-border); }
.nv-banner--success { background-color: var(--nv-color-success-subtle); color: var(--nv-color-success-text); border-bottom-color: var(--nv-color-success-border); }
.nv-banner--warning { background-color: var(--nv-color-warning-subtle); color: var(--nv-color-warning-text); border-bottom-color: var(--nv-color-warning-border); }
.nv-banner--danger  { background-color: var(--nv-color-danger-subtle);  color: var(--nv-color-danger-text);  border-bottom-color: var(--nv-color-danger-border); }
.nv-banner--brand   { background-color: var(--nv-color-surface-dark);   color: var(--nv-color-text-inverse); border-bottom-color: transparent; }

/* ── Chips / filter bar ── */
.nv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-1);
  height: 28px;
  padding: 0 var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
  background-color: var(--nv-color-fill-muted);
  border: 1px solid transparent;
  border-radius: var(--nv-radius-pill);
  cursor: default;
  white-space: nowrap;
}
.nv-chip--selected {
  background-color: var(--nv-color-brand-subtle);
  border-color: var(--nv-color-brand);
  color: var(--nv-color-text-brand);
  font-weight: var(--nv-weight-semibold);
}
.nv-chip--clickable { cursor: pointer; }
.nv-chip--clickable:hover { border-color: var(--nv-color-brand); }
.nv-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: calc(var(--nv-space-1) * -1);
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
}
.nv-chip__remove:hover { opacity: 1; }
.nv-chip:focus-visible,
.nv-chip__remove:focus-visible {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}
.nv-chip-group { display: flex; flex-wrap: wrap; gap: var(--nv-space-2); }
.nv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nv-space-2);
  padding: var(--nv-space-2) 0;
}
.nv-filter-bar__clear {
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-brand);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 var(--nv-space-2);
}

/* ── Segmented control (radio-based — pure CSS, no JS) ── */
.nv-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background-color: var(--nv-color-fill-muted);
  border-radius: var(--nv-radius-sm);
  border: 0;
  margin: 0;
}
.nv-segmented__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-space-2);
  padding: var(--nv-space-2) var(--nv-space-4);
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-text-secondary);
  border-radius: var(--nv-radius-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--nv-duration-fast) var(--nv-ease-out),
              color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-segmented__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.nv-segmented__option:hover { color: var(--nv-color-text-primary); }
.nv-segmented__option:has(input:checked) {
  background-color: var(--nv-color-surface);
  color: var(--nv-color-text-primary);
  box-shadow: var(--nv-shadow-1);
}
.nv-segmented__option:has(input:focus-visible) {
  outline: 2px solid var(--nv-color-border-focus);
  outline-offset: 2px;
}

/* ── Table toolbar (search / filters / bulk actions above a table) ── */
.nv-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  flex-wrap: wrap;
  padding: var(--nv-space-3) var(--nv-space-4);
  background-color: var(--nv-color-surface);
  border: 1px solid var(--nv-color-border);
  border-bottom: 0;
  border-radius: var(--nv-radius-sm) var(--nv-radius-sm) 0 0;
}
.nv-table-toolbar__search { flex: 1 1 220px; min-width: 0; }
.nv-table-toolbar__filters { display: flex; align-items: center; gap: var(--nv-space-2); flex-wrap: wrap; }
.nv-table-toolbar__actions { display: flex; align-items: center; gap: var(--nv-space-2); margin-left: auto; }
.nv-table-toolbar__bulk {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  width: 100%;
  padding: var(--nv-space-2) var(--nv-space-3);
  background-color: var(--nv-color-brand-subtle);
  border-radius: var(--nv-radius-sm);
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-brand);
}

/* ── Timeline / activity feed ── */
.nv-timeline { list-style: none; margin: 0; padding: 0; }
.nv-timeline__item {
  position: relative;
  padding: 0 0 var(--nv-space-5) var(--nv-space-6);
  border-left: 2px solid var(--nv-color-border);
}
.nv-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.nv-timeline__marker {
  position: absolute;
  left: -7px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--nv-color-brand);
  border: 2px solid var(--nv-color-surface);
}
.nv-timeline__time {
  font-size: var(--nv-text-xs);
  color: var(--nv-color-text-muted);
  margin-bottom: var(--nv-space-1);
}
.nv-timeline__content { font-size: var(--nv-text-sm); color: var(--nv-color-text-primary); }

/* ── Testimonial / quote card (brand-native) ── */
.nv-testimonial {
  position: relative;
  background-color: var(--nv-color-surface);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  padding: var(--nv-space-8) var(--nv-space-6) var(--nv-space-6);
}
.nv-testimonial__quote {
  position: relative;
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-light);
  font-size: var(--nv-text-lg);
  line-height: var(--nv-leading-snug);
  color: var(--nv-color-heading);
  margin: 0 0 var(--nv-space-5);
}
.nv-testimonial__quote::before {
  content: '\201C';
  position: absolute;
  top: -0.45em;
  left: -0.05em;
  font-size: var(--nv-text-4xl);
  line-height: 1;
  color: var(--nv-color-brand);
  opacity: 0.25;
  pointer-events: none;
}
.nv-testimonial__author {
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-text-brand);
}
.nv-testimonial__role { font-size: var(--nv-text-sm); color: var(--nv-color-text-secondary); }
.nv-testimonial--dark {
  background-color: var(--nv-color-surface-dark);
  border-color: transparent;
  color: var(--nv-color-text-inverse);
}
.nv-testimonial--dark .nv-testimonial__quote { color: #FFFFFF; }
.nv-testimonial--dark .nv-testimonial__quote::before { color: var(--nv-blue-300); opacity: 0.5; }
.nv-testimonial--dark .nv-testimonial__author { color: var(--nv-blue-300); }
.nv-testimonial--dark .nv-testimonial__role { color: rgba(255, 255, 255, 0.7); }

/* ── Angled split + divider (brand-native 20.5°) ── */
.nv-angle-split {
  display: grid;
  grid-template-columns: 1fr;          /* media + content share one cell and overlap */
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--nv-radius-sm);
  min-height: 260px;
}
.nv-angle-split__media,
.nv-angle-split__content {
  grid-area: 1 / 1;                    /* stack both children in the same cell */
}
.nv-angle-split__media {
  background-color: var(--nv-color-fill-muted);
  background-size: cover;
  background-position: center;
}
.nv-angle-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--nv-color-surface-dark);
  color: var(--nv-color-text-inverse);
  padding: var(--nv-space-10);
  padding-left: 32%;                   /* keep text clear of the diagonal */
  /* dark panel takes the right side with a ~20.5° diagonal left edge;
     the media shows through where the panel is clipped away (clip-path
     scales with the panel, unlike a fixed-width skewed seam) */
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 12% 100%);
}
.nv-angle-divider {
  height: 56px;
  background-color: var(--nv-color-surface-dark);
  clip-path: polygon(0 0, 100% 35%, 100% 100%, 0 65%);
  margin: var(--nv-space-8) 0;
}
@media (max-width: 767px) {
  .nv-angle-split { grid-template-columns: 1fr; min-height: 0; }
  .nv-angle-split__media,
  .nv-angle-split__content { grid-area: auto; }   /* stack into separate rows */
  .nv-angle-split__media { min-height: 180px; }
  .nv-angle-split__content { clip-path: none; padding-left: var(--nv-space-10); }
}

/* ── Logo lockup (protection zone = 1×N clear space baked in) ── */
.nv-logo {
  display: inline-flex;
  align-items: center;
  padding: 0.5em;  /* clear space ≈ height of the "N" glyph on each side */
}
.nv-logo img { display: block; height: 28px; width: auto; }
.nv-logo--sm img { height: 20px; }
.nv-logo--lg img { height: 40px; }
.nv-logo--on-dark { /* consumer supplies the negative-logo asset via <img src> */ }

/* ── Accordion (native <details>/<summary> — works with no JS) ── */
.nv-accordion {
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  overflow: hidden;
}
.nv-accordion__item { border-bottom: 1px solid var(--nv-color-border); }
.nv-accordion__item:last-child { border-bottom: 0; }
.nv-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-3);
  padding: var(--nv-space-4) var(--nv-space-5);
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-heading);
  background-color: var(--nv-color-surface);
  cursor: pointer;
  list-style: none;
}
.nv-accordion__header::-webkit-details-marker { display: none; }
.nv-accordion__header::after {
  content: '';
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--nv-color-text-secondary);
  border-bottom: 2px solid var(--nv-color-text-secondary);
  transform: rotate(45deg);
  transition: transform var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-accordion__item[open] .nv-accordion__header::after { transform: rotate(-135deg); }
.nv-accordion__header:hover { background-color: var(--nv-color-fill-subtle); }
.nv-accordion__header:focus-visible { outline: 2px solid var(--nv-color-border-focus); outline-offset: -2px; }
.nv-accordion__panel {
  padding: 0 var(--nv-space-5) var(--nv-space-4);
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
}

/* ── Dropdown / menu ──
   CSS-only variant (no JS):  <details class="nv-dropdown"><summary>…</summary>
                              <div class="nv-menu">…</div></details>
   JS variant (Phase 3):      wrap a [data-nv-dropdown] button + .nv-menu[hidden]
                              in .nv-dropdown; JS toggles [hidden] + aria-expanded. */
.nv-dropdown { position: relative; display: inline-block; }
.nv-dropdown > summary { list-style: none; cursor: pointer; }
.nv-dropdown > summary::-webkit-details-marker { display: none; }
.nv-menu {
  position: absolute;
  top: calc(100% + var(--nv-space-1));
  left: 0;
  min-width: 200px;
  padding: var(--nv-space-1);
  background-color: var(--nv-color-surface-raised);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  box-shadow: var(--nv-shadow-2);
  z-index: var(--nv-z-dropdown);
}
.nv-menu--end { left: auto; right: 0; }
.nv-menu[hidden] { display: none; }
.nv-menu__item {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  width: 100%;
  padding: var(--nv-space-2) var(--nv-space-3);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--nv-radius-xs);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.nv-menu__item:hover { background-color: var(--nv-color-brand-subtle); color: var(--nv-color-text-brand); text-decoration: none; }
.nv-menu__item:focus-visible { outline: 2px solid var(--nv-color-border-focus); outline-offset: -2px; }
.nv-menu__item--danger { color: var(--nv-color-danger-text); }
.nv-menu__item--danger:hover { background-color: var(--nv-color-danger-subtle); }
.nv-menu__divider { height: 1px; margin: var(--nv-space-1) 0; background-color: var(--nv-color-border); border: 0; }
.nv-menu__label {
  padding: var(--nv-space-2) var(--nv-space-3) var(--nv-space-1);
  font-size: 11px;
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nv-color-text-muted);
}

/* Navbar fly-out — place a .nv-dropdown (with a .nv-navbar__link summary) inside
   the navbar to get a menu that drops cleanly below the bar. Works with no JS
   (native <details>) or with navvis-ui.js. Use .nv-menu--end to right-align. */
.nv-navbar__nav:has(> .nv-dropdown),
.nv-navbar__links:has(> .nv-dropdown),
.nv-navbar__actions:has(> .nv-dropdown) { align-self: stretch; }
/* dropdown fills the bar height (so the menu drops below it), but the summary
   keeps its natural compact size + centred — its hover pill matches a normal link */
.nv-navbar .nv-dropdown { align-self: stretch; display: inline-flex; align-items: center; }
.nv-navbar .nv-dropdown > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-1);
}

/* ── Mobile hamburger ──
   navvis-ui.js injects the .nv-navbar__toggle button and adds .nv-navbar--collapsible.
   Without JS the navbar simply wraps on small screens (links stay reachable). */
.nv-navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--nv-radius-sm);
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.nv-navbar__toggle:hover { background-color: rgba(255, 255, 255, 0.08); }
.nv-navbar__toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

@media (max-width: 767px) {
  .nv-navbar { flex-wrap: wrap; height: auto; min-height: var(--nv-navbar-height); }
  .nv-navbar--collapsible .nv-navbar__toggle { display: inline-flex; margin-left: auto; }
  .nv-navbar--collapsible .nv-navbar__nav,
  .nv-navbar--collapsible .nv-navbar__links,
  .nv-navbar--collapsible .nv-navbar__actions {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    gap: var(--nv-space-1);
  }
  .nv-navbar--collapsible.nv-navbar--open .nv-navbar__nav,
  .nv-navbar--collapsible.nv-navbar--open .nv-navbar__links,
  .nv-navbar--collapsible.nv-navbar--open .nv-navbar__actions {
    display: flex;
    padding-bottom: var(--nv-space-2);
  }
  /* fly-out triggers behave like full-width rows inside the collapsed menu */
  .nv-navbar--collapsible.nv-navbar--open .nv-dropdown { align-self: stretch; }
}

/* ── Drawer / off-canvas (open/close + focus trap = Phase 3 JS) ── */
.nv-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 46, 79, 0.5);
  z-index: var(--nv-z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nv-duration-base) var(--nv-ease-out),
              visibility var(--nv-duration-base) var(--nv-ease-out);
}
.nv-drawer-overlay--open { opacity: 1; visibility: visible; }
.nv-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 320px;
  max-width: 90vw;
  background-color: var(--nv-color-surface);
  box-shadow: var(--nv-shadow-2);
  display: flex;
  flex-direction: column;
  z-index: var(--nv-z-modal);
  transition: transform var(--nv-duration-base) var(--nv-ease-out);
}
.nv-drawer--right { right: 0; transform: translateX(100%); }
.nv-drawer--left  { left: 0;  transform: translateX(-100%); }
.nv-drawer--open  { transform: translateX(0); }
.nv-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-3);
  padding: var(--nv-space-4) var(--nv-space-5);
  border-bottom: 1px solid var(--nv-color-border);
  flex-shrink: 0;
}
.nv-drawer__title { font-family: var(--nv-font-display); font-weight: var(--nv-weight-semibold); color: var(--nv-color-heading); margin: 0; }
.nv-drawer__body { padding: var(--nv-space-5); overflow-y: auto; flex: 1; }
.nv-drawer__footer {
  padding: var(--nv-space-4) var(--nv-space-5);
  border-top: 1px solid var(--nv-color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--nv-space-3);
  flex-shrink: 0;
}

/* ── File dropzone (drag-drop wiring = Phase 3 JS) ── */
.nv-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nv-space-2);
  padding: var(--nv-space-8) var(--nv-space-6);
  text-align: center;
  border: 2px dashed var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  background-color: var(--nv-color-fill-subtle);
  color: var(--nv-color-text-secondary);
  cursor: pointer;
  transition: border-color var(--nv-duration-fast) var(--nv-ease-out),
              background-color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-dropzone:hover,
.nv-dropzone--dragover {
  border-color: var(--nv-color-brand);
  background-color: var(--nv-color-brand-subtle);
}
.nv-dropzone:focus-within { outline: 2px solid var(--nv-color-border-focus); outline-offset: 2px; }
.nv-dropzone__icon { width: 32px; height: 32px; color: var(--nv-color-text-muted); }
.nv-dropzone__text { font-size: var(--nv-text-sm); }
.nv-dropzone__text strong { color: var(--nv-color-text-brand); }
.nv-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nv-dropzone--error { border-color: var(--nv-color-danger-fill); }

/* ── Page shell (sticky-footer layout) ──
   Add .nv-app to <body> (or a top-level wrapper). It becomes a full-height
   flex column so the footer sits at the viewport bottom when content is short,
   and flows naturally after the content (scrolled to) when content is tall.
   The navbar is already position:sticky, so it stays pinned to the top.
   Opt-in — plain pages without .nv-app are unaffected. */
.nv-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;          /* fallback */
  min-height: 100dvh;         /* accounts for mobile browser chrome */
}
.nv-app > main,
.nv-app__main {
  flex: 1 0 auto;             /* grow to fill; never shrink → pushes footer down */
}
/* Inside the shell, flex-grow already fills the viewport, so neutralise the
   standalone min-heights (e.g. .nv-container--centered) that would otherwise
   over-count and push the footer below the fold. */
.nv-app .nv-container--centered { min-height: 0; }

/* ── Footer ──
   Defaults to the SAME fixed dark-blue primitive the navbar uses, so the two
   match in both light and dark themes. Put a .nv-container inside for the
   constrained, centred content; the bar itself is full-bleed. */
.nv-footer {
  flex-shrink: 0;
  background-color: var(--nv-palette-dark-blue);  /* matches navbar; never flips */
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
}
.nv-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-space-8);
  align-items: flex-start;
  justify-content: space-between;
  padding-block: var(--nv-space-10);
}
.nv-footer__brand {
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-lg);
  font-weight: var(--nv-weight-semibold);
  color: #FFFFFF;
  text-decoration: none;
}
.nv-footer__tagline {
  margin-top: var(--nv-space-2);
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.55);
}
.nv-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-space-10);
}
.nv-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-2);
}
.nv-footer__heading {
  font-size: 10px;
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: var(--nv-space-1);
}
.nv-footer__link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--nv-duration-fast) var(--nv-ease-out);
}
.nv-footer__link:hover { color: #FFFFFF; text-decoration: underline; }
.nv-footer__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
  border-radius: var(--nv-radius-sm);
}
.nv-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--nv-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-space-2) var(--nv-space-5);
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--nv-text-xs);
}

/* True-black variant — brand reserves #000 for hardware imagery, so this is an
   explicit opt-in. Apply to navbar and footer together to keep them matched. */
.nv-navbar--black,
.nv-footer--black { background-color: var(--nv-black-hardware); }

/* ═══ SECTION: COMPONENTS — POWER PAGES ═══ */

/* Page hero (full-width, flat dark — no gradient) */
.nv-page-hero {
  background-color: var(--nv-palette-dark-blue);
  color: #FFFFFF;
  padding: var(--nv-space-16) var(--nv-space-8);
  text-align: center;
}
.nv-page-hero__title {
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-light);
  font-size: clamp(var(--nv-text-2xl), 4vw, var(--nv-text-3xl));
  color: #FFFFFF;
  margin-bottom: var(--nv-space-4);
}
.nv-page-hero__subtitle {
  font-size: var(--nv-text-lg);
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  margin-inline: auto;
}

/* Section (vertical rhythm) */
.nv-section {
  padding: var(--nv-space-16) 0;
}
.nv-section--alt {
  background-color: var(--nv-grey-50);
}
.nv-section--dark {
  background-color: var(--nv-palette-dark-blue);
  color: #FFFFFF;
}

/* Portal header */
.nv-portal-header {
  background-color: var(--nv-palette-dark-blue);
  padding: var(--nv-space-3) var(--nv-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Login card (centered, max 420px) */
.nv-login-card {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  background-color: var(--nv-color-surface);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  padding: var(--nv-space-8);
  box-shadow: var(--nv-shadow-2);
}
.nv-login-card__logo {
  margin-bottom: var(--nv-space-6);
  text-align: center;
}
.nv-login-card__title {
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-xl);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-heading);
  text-align: center;
  margin-bottom: var(--nv-space-6);
}

/* Entity list (Power Pages rendered output) */
.nv-entity-list {
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
}
.nv-entity-list table {
  width: 100%;
  border-collapse: collapse;
}
.nv-entity-list th {
  padding: var(--nv-space-3) var(--nv-space-4);
  text-align: left;
  font-size: 11px;
  font-weight: var(--nv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nv-color-text-secondary);
  border-bottom: 1px solid var(--nv-color-border);
  background-color: var(--nv-grey-50);
}
.nv-entity-list td {
  padding: 0 var(--nv-space-4);
  height: 44px;
  border-bottom: 1px solid var(--nv-grey-100);
  vertical-align: middle;
}

/* Entity form (normalise Dynamics-rendered output) */
.nv-entity-form label {
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-semibold);
  color: var(--nv-color-text-primary);
  display: block;
  margin-bottom: var(--nv-space-1);
}
.nv-entity-form input[type="text"],
.nv-entity-form input[type="email"],
.nv-entity-form input[type="number"],
.nv-entity-form input[type="tel"],
.nv-entity-form input[type="url"],
.nv-entity-form input[type="date"],
.nv-entity-form input[type="datetime-local"],
.nv-entity-form select,
.nv-entity-form textarea {
  width: 100%;
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  color: var(--nv-color-text-primary);
  background-color: var(--nv-color-surface);
  border: 1px solid var(--nv-color-border);
  border-radius: var(--nv-radius-sm);
  padding: 0 var(--nv-space-3);
  height: var(--nv-input-height);
  transition: border-color var(--nv-duration-fast) var(--nv-ease-out),
              box-shadow var(--nv-duration-fast) var(--nv-ease-out);
  appearance: none;
}
.nv-entity-form textarea {
  height: auto;
  min-height: 80px;
  padding: var(--nv-space-2) var(--nv-space-3);
  resize: vertical;
}
.nv-entity-form input:focus,
.nv-entity-form select:focus,
.nv-entity-form textarea:focus {
  outline: none;
  border-color: var(--nv-color-border-focus);
  box-shadow: var(--nv-input-focus-shadow);
}
.nv-entity-form .nv-form-section {
  margin-bottom: var(--nv-space-6);
}
.nv-entity-form .nv-form-section-title {
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  font-size: var(--nv-text-base);
  color: var(--nv-color-heading);
  padding-bottom: var(--nv-space-3);
  border-bottom: 1px solid var(--nv-color-border);
  margin-bottom: var(--nv-space-4);
}

/* ─── Bootstrap Override Neutraliser ─── */
/* IMPORTANT: Wrap Power Pages content in .nv-reset to neutralise Bootstrap */
.nv-reset {
  /* Reset Bootstrap's box model */
  box-sizing: border-box;
}
.nv-reset *,
.nv-reset *::before,
.nv-reset *::after {
  box-sizing: border-box;
}
/* Typography reset within nv-reset scope */
.nv-reset body,
.nv-reset p,
.nv-reset ul,
.nv-reset ol {
  /* Neutralise Bootstrap margin resets that conflict */
  font-family: var(--nv-font-body);
}
/* BOOTSTRAP-OVERRIDE: .nv-input must beat .form-control specificity */
.nv-reset .nv-input.form-control,
.nv-reset .nv-input {
  height: var(--nv-input-height) !important;          /* BOOTSTRAP-OVERRIDE: Bootstrap sets height:auto */
  font-family: var(--nv-font-body) !important;         /* BOOTSTRAP-OVERRIDE: Bootstrap font stack */
  border-radius: var(--nv-radius-sm) !important;       /* BOOTSTRAP-OVERRIDE: Bootstrap uses 4px */
  box-shadow: none !important;                          /* BOOTSTRAP-OVERRIDE: Bootstrap inset shadow */
  border: var(--nv-input-border) !important;
}
.nv-reset .nv-input.form-control:focus {
  border-color: var(--nv-color-border-focus) !important;  /* BOOTSTRAP-OVERRIDE: Bootstrap blue #66afe9 */
  box-shadow: var(--nv-input-focus-shadow) !important;
}
/* BOOTSTRAP-OVERRIDE: .nv-btn--primary beats .btn.btn-primary */
.nv-reset .nv-btn--primary.btn,
.nv-reset .nv-btn--primary.btn-primary,
.nv-reset .nv-btn--primary {
  background-color: var(--nv-color-brand) !important;     /* BOOTSTRAP-OVERRIDE: Bootstrap default blue */
  border-color: var(--nv-color-brand) !important;
  font-family: var(--nv-font-display) !important;
  font-weight: var(--nv-weight-semibold) !important;
  border-radius: var(--nv-btn-radius) !important;          /* BOOTSTRAP-OVERRIDE: Bootstrap 4px */
}
.nv-reset .nv-btn--primary.btn:hover,
.nv-reset .nv-btn--primary.btn-primary:hover,
.nv-reset .nv-btn--primary:hover:not(:disabled) {
  background-color: var(--nv-color-brand-hover) !important;
  border-color: var(--nv-color-brand-hover) !important;
}
.nv-reset .nv-btn--primary:active:not(:disabled) {
  background-color: var(--nv-color-brand-active) !important;
  border-color: var(--nv-color-brand-active) !important;
}
/* Neutralise Bootstrap panel/well/table overrides */
.nv-reset .panel,
.nv-reset .well {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.nv-reset .table > thead > tr > th,
.nv-reset .table > tbody > tr > td {
  border: none;
  padding: 0;
}

/* Entity form reset wrapper — Dynamics-specific */
.nv-entity-form-reset {
  /* Wrap Dynamics entity forms in this class */
}
.nv-entity-form-reset .form-group {
  margin-bottom: var(--nv-space-4);
}
.nv-entity-form-reset .control-label {
  font-family: var(--nv-font-body) !important;       /* BOOTSTRAP-OVERRIDE: Bootstrap control-label */
  font-size: var(--nv-text-sm) !important;
  font-weight: var(--nv-weight-semibold) !important;
  color: var(--nv-color-text-primary) !important;
  padding-top: 0 !important;                          /* BOOTSTRAP-OVERRIDE: Bootstrap adds padding-top:7px */
}
.nv-entity-form-reset .form-control {
  height: var(--nv-input-height) !important;          /* BOOTSTRAP-OVERRIDE: Bootstrap height varies */
  font-family: var(--nv-font-body) !important;
  font-size: var(--nv-text-sm) !important;
  border-radius: var(--nv-radius-sm) !important;
  border: 1px solid var(--nv-color-border) !important;
  box-shadow: none !important;
  color: var(--nv-color-text-primary) !important;
  background-color: var(--nv-color-surface) !important;
}
.nv-entity-form-reset .form-control:focus {
  border-color: var(--nv-color-border-focus) !important;
  box-shadow: var(--nv-input-focus-shadow) !important;
  outline: none !important;
}

/* NavVis 20.5° parallelogram accent element */
.nv-angle {
  display: inline-block;
  transform: skewX(-20.5deg);
  padding: var(--nv-space-2) var(--nv-space-5);
}
.nv-angle--brand   { background: var(--nv-color-brand);         color: #FFFFFF; }
.nv-angle--dark    { background: var(--nv-palette-dark-blue);   color: #FFFFFF; }
.nv-angle--grey    { background: var(--nv-grey-100);            color: var(--nv-color-text-primary); }
/* Inner content should counter-skew if needed */
.nv-angle__inner   { display: inline-block; transform: skewX(20.5deg); }

/* ═══ SECTION: UTILITY CLASSES ═══ */

/* Display */
.nv-block        { display: block; }
.nv-inline-block { display: inline-block; }
.nv-inline       { display: inline; }
.nv-hidden       { display: none; }
.nv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Spacing — margin */
.nv-m-0  { margin: var(--nv-space-0); }
.nv-m-1  { margin: var(--nv-space-1); }
.nv-m-2  { margin: var(--nv-space-2); }
.nv-m-3  { margin: var(--nv-space-3); }
.nv-m-4  { margin: var(--nv-space-4); }
.nv-m-5  { margin: var(--nv-space-5); }
.nv-m-6  { margin: var(--nv-space-6); }
.nv-m-8  { margin: var(--nv-space-8); }
.nv-m-auto { margin: auto; }
.nv-mx-auto { margin-inline: auto; }

.nv-mt-0  { margin-top: var(--nv-space-0); }
.nv-mt-1  { margin-top: var(--nv-space-1); }
.nv-mt-2  { margin-top: var(--nv-space-2); }
.nv-mt-3  { margin-top: var(--nv-space-3); }
.nv-mt-4  { margin-top: var(--nv-space-4); }
.nv-mt-5  { margin-top: var(--nv-space-5); }
.nv-mt-6  { margin-top: var(--nv-space-6); }
.nv-mt-8  { margin-top: var(--nv-space-8); }

.nv-mb-0  { margin-bottom: var(--nv-space-0); }
.nv-mb-1  { margin-bottom: var(--nv-space-1); }
.nv-mb-2  { margin-bottom: var(--nv-space-2); }
.nv-mb-3  { margin-bottom: var(--nv-space-3); }
.nv-mb-4  { margin-bottom: var(--nv-space-4); }
.nv-mb-5  { margin-bottom: var(--nv-space-5); }
.nv-mb-6  { margin-bottom: var(--nv-space-6); }
.nv-mb-8  { margin-bottom: var(--nv-space-8); }

.nv-ml-0  { margin-left: var(--nv-space-0); }
.nv-ml-1  { margin-left: var(--nv-space-1); }
.nv-ml-2  { margin-left: var(--nv-space-2); }
.nv-ml-3  { margin-left: var(--nv-space-3); }
.nv-ml-4  { margin-left: var(--nv-space-4); }
.nv-ml-auto { margin-left: auto; }

.nv-mr-0  { margin-right: var(--nv-space-0); }
.nv-mr-1  { margin-right: var(--nv-space-1); }
.nv-mr-2  { margin-right: var(--nv-space-2); }
.nv-mr-3  { margin-right: var(--nv-space-3); }
.nv-mr-4  { margin-right: var(--nv-space-4); }
.nv-mr-auto { margin-right: auto; }

/* Spacing — padding */
.nv-p-0  { padding: var(--nv-space-0); }
.nv-p-1  { padding: var(--nv-space-1); }
.nv-p-2  { padding: var(--nv-space-2); }
.nv-p-3  { padding: var(--nv-space-3); }
.nv-p-4  { padding: var(--nv-space-4); }
.nv-p-5  { padding: var(--nv-space-5); }
.nv-p-6  { padding: var(--nv-space-6); }
.nv-p-8  { padding: var(--nv-space-8); }

.nv-px-0  { padding-inline: var(--nv-space-0); }
.nv-px-2  { padding-inline: var(--nv-space-2); }
.nv-px-3  { padding-inline: var(--nv-space-3); }
.nv-px-4  { padding-inline: var(--nv-space-4); }
.nv-px-5  { padding-inline: var(--nv-space-5); }
.nv-px-6  { padding-inline: var(--nv-space-6); }
.nv-px-8  { padding-inline: var(--nv-space-8); }

.nv-py-0  { padding-block: var(--nv-space-0); }
.nv-py-2  { padding-block: var(--nv-space-2); }
.nv-py-3  { padding-block: var(--nv-space-3); }
.nv-py-4  { padding-block: var(--nv-space-4); }
.nv-py-5  { padding-block: var(--nv-space-5); }
.nv-py-6  { padding-block: var(--nv-space-6); }
.nv-py-8  { padding-block: var(--nv-space-8); }

/* Gap */
.nv-gap-0 { gap: var(--nv-space-0); }
.nv-gap-1 { gap: var(--nv-space-1); }
.nv-gap-2 { gap: var(--nv-space-2); }
.nv-gap-3 { gap: var(--nv-space-3); }
.nv-gap-4 { gap: var(--nv-space-4); }
.nv-gap-5 { gap: var(--nv-space-5); }
.nv-gap-6 { gap: var(--nv-space-6); }
.nv-gap-8 { gap: var(--nv-space-8); }

/* Sizing */
.nv-w-full  { width: 100%; }
.nv-w-auto  { width: auto; }
.nv-h-full  { height: 100%; }
.nv-h-auto  { height: auto; }
.nv-min-w-0 { min-width: 0; }
.nv-max-w-sm   { max-width: 640px; }
.nv-max-w-md   { max-width: 768px; }
.nv-max-w-lg   { max-width: 1024px; }
.nv-max-w-xl   { max-width: 1280px; }
.nv-max-w-full { max-width: 100%; }

/* Position */
.nv-relative  { position: relative; }
.nv-absolute  { position: absolute; }
.nv-fixed     { position: fixed; }
.nv-sticky    { position: sticky; }

/* Overflow */
.nv-overflow-hidden { overflow: hidden; }
.nv-overflow-auto   { overflow: auto; }
.nv-overflow-x-auto { overflow-x: auto; }
.nv-overflow-y-auto { overflow-y: auto; }

/* Border */
.nv-rounded    { border-radius: var(--nv-radius-sm); }
.nv-rounded-xl { border-radius: var(--nv-radius-xl); }
.nv-rounded-pill { border-radius: var(--nv-radius-pill); }
.nv-border     { border: 1px solid var(--nv-color-border); }
.nv-border-top { border-top: 1px solid var(--nv-color-border); }
.nv-border-bottom { border-bottom: 1px solid var(--nv-color-border); }

/* Shadow */
.nv-shadow-1 { box-shadow: var(--nv-shadow-1); }
.nv-shadow-2 { box-shadow: var(--nv-shadow-2); }
.nv-shadow-none { box-shadow: none; }

/* Opacity */
.nv-opacity-0   { opacity: 0; }
.nv-opacity-50  { opacity: 0.5; }
.nv-opacity-75  { opacity: 0.75; }
.nv-opacity-100 { opacity: 1; }

/* Cursor */
.nv-cursor-pointer { cursor: pointer; }
.nv-cursor-default { cursor: default; }
.nv-cursor-not-allowed { cursor: not-allowed; }

/* Background */
.nv-bg-surface { background-color: var(--nv-color-surface); }
.nv-bg-page    { background-color: var(--nv-color-page); }
.nv-bg-dark    { background-color: var(--nv-palette-dark-blue); }
.nv-bg-brand   { background-color: var(--nv-color-brand); }

/* Divider */
.nv-divider {
  height: 1px;
  background-color: var(--nv-color-border);
  border: none;
  margin: var(--nv-space-4) 0;
}

/* ═══ SECTION: RESPONSIVE UTILITIES ═══ */
/* Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 */

@media (min-width: 640px) {
  .sm\:nv-hidden        { display: none; }
  .sm\:nv-block         { display: block; }
  .sm\:nv-flex          { display: flex; }
  .sm\:nv-flex-col      { flex-direction: column; }
  .sm\:nv-flex-row      { flex-direction: row; }
  .sm\:nv-grid          { display: grid; }
  .sm\:nv-col-6         { grid-column: span 6; }
  .sm\:nv-col-12        { grid-column: span 12; }
  .sm\:nv-items-center  { align-items: center; }
  .sm\:nv-justify-between { justify-content: space-between; }
}

@media (min-width: 768px) {
  .md\:nv-hidden        { display: none; }
  .md\:nv-block         { display: block; }
  .md\:nv-flex          { display: flex; }
  .md\:nv-flex-col      { flex-direction: column; }
  .md\:nv-flex-row      { flex-direction: row; }
  .md\:nv-grid          { display: grid; }
  .md\:nv-col-4         { grid-column: span 4; }
  .md\:nv-col-6         { grid-column: span 6; }
  .md\:nv-col-8         { grid-column: span 8; }
  .md\:nv-col-12        { grid-column: span 12; }
  .md\:nv-items-center  { align-items: center; }
  .md\:nv-justify-between { justify-content: space-between; }
  .md\:nv-sidebar-layout { display: flex; }
}

@media (min-width: 1024px) {
  .lg\:nv-hidden        { display: none; }
  .lg\:nv-block         { display: block; }
  .lg\:nv-flex          { display: flex; }
  .lg\:nv-col-3         { grid-column: span 3; }
  .lg\:nv-col-4         { grid-column: span 4; }
  .lg\:nv-col-6         { grid-column: span 6; }
  .lg\:nv-col-9         { grid-column: span 9; }
  .lg\:nv-items-center  { align-items: center; }
  .lg\:nv-justify-between { justify-content: space-between; }
}

@media (min-width: 1280px) {
  .xl\:nv-hidden        { display: none; }
  .xl\:nv-block         { display: block; }
  .xl\:nv-flex          { display: flex; }
  .xl\:nv-col-2         { grid-column: span 2; }
  .xl\:nv-col-3         { grid-column: span 3; }
  .xl\:nv-col-4         { grid-column: span 4; }
}

/* Mobile: stack sidebar */
@media (max-width: 767px) {
  .nv-sidebar-layout { flex-direction: column; }
  .nv-sidebar { width: 100%; min-height: auto; }
  .nv-sidebar__nav { display: flex; flex-wrap: wrap; padding: var(--nv-space-2); }
}

/* ═══ SECTION: ANIMATIONS ═══ */

@keyframes nv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes nv-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes nv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nv-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nv-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nv-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Apply animations only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .nv-animate-spin {
    animation: nv-spin 1s linear infinite;
  }
  .nv-animate-pulse {
    animation: nv-pulse 2s ease-in-out infinite;
  }
  .nv-animate-fade-in {
    animation: nv-fade-in var(--nv-duration-base) var(--nv-ease-out) both;
  }
  .nv-animate-slide-up {
    animation: nv-slide-up var(--nv-duration-base) var(--nv-ease-out) both;
  }
  .nv-animate-slide-down {
    animation: nv-slide-down var(--nv-duration-base) var(--nv-ease-out) both;
  }
  .nv-skeleton {
    animation: nv-shimmer 1.8s ease-in-out infinite;
  }
}

/* Toast slide-up entrance */
@media (prefers-reduced-motion: no-preference) {
  .nv-toast {
    animation: nv-slide-up var(--nv-duration-base) var(--nv-ease-out) both;
  }
}

/* ═══ SECTION: PRINT STYLES ═══ */

@media print {
  /* Hide navigation, interactive, and decorative elements */
  .nv-navbar,
  .nv-sidebar,
  .nv-toast-container,
  .nv-modal-overlay,
  .nv-btn:not(.nv-btn--link),
  .nv-btn-group,
  .nv-tabs,
  .nv-page-hero__cta,
  [data-tooltip]::before,
  [data-tooltip]::after {
    display: none !important;
  }

  /* Force white backgrounds and remove shadows */
  body,
  .nv-card,
  .nv-panel,
  .nv-alert,
  .nv-table th,
  .nv-table td {
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    color: #000000 !important;
    border-color: #CCCCCC !important;
  }

  /* Clean typography */
  body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.4;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000 !important;
    page-break-after: avoid;
  }

  /* Prevent mid-element page breaks */
  .nv-card,
  .nv-panel,
  .nv-stat-card,
  tr {
    page-break-inside: avoid;
  }

  /* Show full URLs for links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666666;
  }

  /* Ensure tables print cleanly */
  .nv-table {
    border-collapse: collapse;
    width: 100%;
  }
  .nv-table th,
  .nv-table td {
    border: 1px solid #CCCCCC !important;
    padding: 4pt 8pt !important;
  }

  /* Reset layout for print */
  .nv-sidebar-layout {
    display: block;
  }
  .nv-container {
    max-width: 100%;
    padding: 0;
  }
}