/* Nalam360 Enterprise UI - Design Tokens */
/* This file defines the core design system variables for theming, spacing, typography, and colors */

:root {
  /* Color Tokens - Primary Palette */
  --n360-color-primary-50: #e3f2fd;
  --n360-color-primary-100: #bbdefb;
  --n360-color-primary-200: #90caf9;
  --n360-color-primary-300: #64b5f6;
  --n360-color-primary-400: #42a5f5;
  --n360-color-primary-500: #2196f3;
  --n360-color-primary-600: #1e88e5;
  --n360-color-primary-700: #1976d2;
  --n360-color-primary-800: #1565c0;
  --n360-color-primary-900: #0d47a1;

  /* Color Tokens - Secondary Palette */
  --n360-color-secondary-50: #f3e5f5;
  --n360-color-secondary-100: #e1bee7;
  --n360-color-secondary-200: #ce93d8;
  --n360-color-secondary-300: #ba68c8;
  --n360-color-secondary-400: #ab47bc;
  --n360-color-secondary-500: #9c27b0;
  --n360-color-secondary-600: #8e24aa;
  --n360-color-secondary-700: #7b1fa2;
  --n360-color-secondary-800: #6a1b9a;
  --n360-color-secondary-900: #4a148c;

  /* Color Tokens - Neutral/Gray Scale */
  --n360-color-neutral-0: #ffffff;
  --n360-color-neutral-50: #fafafa;
  --n360-color-neutral-100: #f5f5f5;
  --n360-color-neutral-200: #eeeeee;
  --n360-color-neutral-300: #e0e0e0;
  --n360-color-neutral-400: #bdbdbd;
  --n360-color-neutral-500: #9e9e9e;
  --n360-color-neutral-600: #757575;
  --n360-color-neutral-700: #616161;
  --n360-color-neutral-800: #424242;
  --n360-color-neutral-900: #212121;
  --n360-color-neutral-1000: #000000;

  /* Semantic Colors - Success */
  --n360-color-success-50: #e8f5e9;
  --n360-color-success-100: #c8e6c9;
  --n360-color-success-500: #4caf50;
  --n360-color-success-700: #388e3c;
  --n360-color-success-900: #1b5e20;

  /* Semantic Colors - Warning */
  --n360-color-warning-50: #fff3e0;
  --n360-color-warning-100: #ffe0b2;
  --n360-color-warning-500: #ff9800;
  --n360-color-warning-700: #f57c00;
  --n360-color-warning-900: #e65100;

  /* Semantic Colors - Error */
  --n360-color-error-50: #ffebee;
  --n360-color-error-100: #ffcdd2;
  --n360-color-error-500: #f44336;
  --n360-color-error-700: #d32f2f;
  --n360-color-error-900: #b71c1c;

  /* Semantic Colors - Info */
  --n360-color-info-50: #e1f5fe;
  --n360-color-info-100: #b3e5fc;
  --n360-color-info-500: #03a9f4;
  --n360-color-info-700: #0288d1;
  --n360-color-info-900: #01579b;

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

  /* Typography Tokens - Font Families */
  --n360-font-family-sans:
    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --n360-font-family-mono:
    "Cascadia Code", "Fira Code", "Consolas", "Courier New", monospace;
  --n360-font-family-serif: Georgia, "Times New Roman", serif;

  /* Typography Tokens - Font Sizes */
  --n360-font-size-xs: 0.75rem; /* 12px */
  --n360-font-size-sm: 0.875rem; /* 14px */
  --n360-font-size-base: 1rem; /* 16px */
  --n360-font-size-lg: 1.125rem; /* 18px */
  --n360-font-size-xl: 1.25rem; /* 20px */
  --n360-font-size-2xl: 1.5rem; /* 24px */
  --n360-font-size-3xl: 1.875rem; /* 30px */
  --n360-font-size-4xl: 2.25rem; /* 36px */
  --n360-font-size-5xl: 3rem; /* 48px */
  --n360-font-size-display: 2rem; /* 32px — large stat values / numeric displays (sits between 3xl and 4xl; kept out of the t-shirt scale to avoid renumbering) */

  /* Typography Tokens - Font Weights */
  --n360-font-weight-light: 300;
  --n360-font-weight-normal: 400;
  --n360-font-weight-medium: 500;
  --n360-font-weight-semibold: 600;
  --n360-font-weight-bold: 700;

  /* Typography Tokens - Line Heights */
  --n360-line-height-tight: 1.25;
  --n360-line-height-normal: 1.5;
  --n360-line-height-relaxed: 1.75;
  --n360-line-height-loose: 2;

  /* Border Radius Tokens */
  --n360-radius-none: 0;
  --n360-radius-sm: 0.125rem; /* 2px */
  --n360-radius-base: 0.25rem; /* 4px */
  --n360-radius-md: 0.375rem; /* 6px */
  --n360-radius-lg: 0.5rem; /* 8px */
  --n360-radius-xl: 0.75rem; /* 12px */
  --n360-radius-2xl: 1rem; /* 16px */
  --n360-radius-full: 9999px;

  /* Shadow Tokens */
  --n360-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --n360-shadow-sm:
    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --n360-shadow-base:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --n360-shadow-md:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --n360-shadow-lg:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --n360-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Z-Index Tokens */
  --n360-z-index-dropdown: 1000;
  --n360-z-index-sticky: 1020;
  --n360-z-index-fixed: 1030;
  --n360-z-index-modal-backdrop: 1040;
  --n360-z-index-modal: 1050;
  --n360-z-index-popover: 1060;
  --n360-z-index-tooltip: 1070;

  /* Transition Tokens */
  --n360-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --n360-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --n360-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Component-Specific Tokens */
  --n360-input-height-sm: 2rem;
  --n360-input-height-base: 2.5rem;
  --n360-input-height-lg: 3rem;
  --n360-input-border-width: 1px;
  --n360-input-focus-ring-width: 3px;
  --n360-input-focus-ring-opacity: 0.5;

  --n360-button-padding-x-sm: var(--n360-space-3);
  --n360-button-padding-y-sm: var(--n360-space-1);
  --n360-button-padding-x-base: var(--n360-space-4);
  --n360-button-padding-y-base: var(--n360-space-2);
  --n360-button-padding-x-lg: var(--n360-space-6);
  --n360-button-padding-y-lg: var(--n360-space-3);

  /* Layout Tokens — VS Code-style shell */
  --n360-sidebar-width-expanded: 260px;
  --n360-sidebar-width-collapsed: 72px;
  --n360-topbar-height: 35px;
  --n360-activity-bar-width: 80px;
  --n360-sidebar-panel-width: 280px;
  --n360-statusbar-height: 22px;
  --n360-content-padding: var(--n360-space-6);
  --n360-sidebar-gradient: linear-gradient(
    180deg,
    #0a1628 0%,
    #1a1040 50%,
    #2d1250 100%
  );
  --n360-sidebar-border-color: rgba(255, 255, 255, 0.06);

  /* VS Code list/tree colors */
  --n360-list-hover: #2a2d2e;
  --n360-list-active-bg: #094771;
  --n360-list-inactive-bg: #37373d;
  --n360-sidebar-bg: #252526;

  /* VS Code shell colors */
  --n360-activitybar-bg: #333333; /* VS Code exact activity bar */
  --n360-titlebar-bg: #3c3c3c; /* VS Code dark title bar */
  --n360-titlebar-border: #252526; /* bottom border of title bar */
  --n360-titlebar-fg: rgba(255, 255, 255, 0.85); /* primary title bar text */
  --n360-titlebar-fg-muted: rgba(
    255,
    255,
    255,
    0.65
  ); /* icons / secondary text */
  --n360-titlebar-light-bg: #dddddd; /* VS Code light title bar */
  --n360-titlebar-light-border: #b8b8b8; /* VS Code light title bar border */
  --n360-titlebar-light-search-bg: #d4d4d4; /* VS Code light search bar */
  --n360-dropdown-bg: #252526; /* context menu / panel background */
  --n360-dropdown-border: #454545; /* context menu border */
  --n360-statusbar-bg: #007acc;
  --n360-statusbar-fg: #ffffff;
  --n360-link-color: #3794ff; /* VS Code link / accent blue */
  --n360-avatar-gradient-from: #0d1b2a; /* user avatar gradient start — brand Deep Navy */
  --n360-avatar-gradient-to: #cc4a00; /* user avatar gradient end — brand orange (AA shade) */
  --n360-avatar-gradient-hover-from: #1b2b40; /* avatar / modules hover */
  --n360-avatar-gradient-hover-to: #ff6a00;
  --n360-avatar-gradient-active-from: #08121d; /* avatar / modules active */
  --n360-avatar-gradient-active-to: #a33800;
  --n360-modules-accent: #ff6a00; /* Brand Orange focus/hover accent */
  --n360-panel-bg: #1e1e2e;
  --n360-panel-fg: rgba(255, 255, 255, 0.85);
  --n360-panel-hover: rgba(255, 255, 255, 0.08);
  --n360-panel-active: rgba(255, 255, 255, 0.12);
  --n360-panel-border: rgba(255, 255, 255, 0.06);

  /* Extended Z-Index Tokens — Layout layers */
  --n360-z-index-sidebar: 10;
  /* TopBar must be above activity-bar (100) and sidebar-panel (99) so its
       buttons remain clickable when the sidebar is open. */
  --n360-z-index-topbar: 101;
  --n360-z-index-activity-bar: 100;
  --n360-z-index-sidebar-panel: 99;
  --n360-z-index-fab: 1050;
  --n360-z-index-notifications: 1080;
  --n360-z-index-command-palette: 1090;
  --n360-z-index-video-call: 1100;
  --n360-z-index-overlay-max: 9999;
  --n360-z-index-backdrop: 999;

  /* Shorthand Aliases — mapped from component CSS references */
  --n360-primary: var(--n360-color-primary-500);
  --n360-primary-light: var(--n360-color-primary-100);
  --n360-color-primary: var(--n360-color-primary-500);
  --n360-color-primary-light: var(--n360-color-primary-100);
  --n360-color-secondary: var(--n360-color-secondary-500);
  --n360-success: var(--n360-color-success-500);
  --n360-color-success: var(--n360-color-success-500);
  --n360-warning: var(--n360-color-warning-500);
  --n360-color-warning: var(--n360-color-warning-500);
  --n360-color-warning-light: var(--n360-color-warning-100);
  --n360-color-warning-dark: var(--n360-color-warning-700);
  --n360-danger: var(--n360-color-error-500);
  --n360-color-danger: var(--n360-color-error-500);
  --n360-color-danger-light: var(--n360-color-error-100);
  --n360-error: var(--n360-color-error-500);
  --n360-color-error: var(--n360-color-error-500);
  --n360-color-info: var(--n360-color-info-500);
  --n360-color-info-light: var(--n360-color-info-100);
  --n360-color-purple: var(--n360-color-secondary-500);

  /* Background aliases */
  --n360-bg: var(--n360-color-neutral-0);
  --n360-bg-secondary: var(--n360-color-neutral-50);
  --n360-background: var(--n360-color-neutral-0);
  --n360-background-primary: var(--n360-color-neutral-0);
  --n360-background-secondary: var(--n360-color-neutral-50);
  --n360-background-tertiary: var(--n360-color-neutral-100);
  --n360-background-quaternary: var(--n360-color-neutral-200);
  --n360-color-background: var(--n360-color-neutral-0);
  --n360-color-background-hover: var(--n360-color-neutral-100);
  --n360-color-background-active: var(--n360-color-neutral-200);
  --n360-color-background-elevated: var(--n360-color-neutral-0);
  --n360-card-bg: var(--n360-color-neutral-0);
  --n360-hover-bg: var(--n360-color-neutral-100);
  --n360-surface-variant: var(--n360-color-neutral-100);

  /* Border aliases */
  --n360-border: var(--n360-color-neutral-300);
  --n360-border-color: var(--n360-color-neutral-300);
  --n360-border-light: var(--n360-color-neutral-200);
  --n360-color-border: var(--n360-color-neutral-300);
  --n360-color-border-light: var(--n360-color-neutral-200);
  --n360-border-radius: var(--n360-radius-md);

  /* Text aliases */
  --n360-text-primary: var(--n360-color-neutral-900);
  --n360-text-secondary: var(--n360-color-neutral-600);
  --n360-text-muted: var(--n360-color-neutral-500);
  --n360-color-text-primary: var(--n360-color-neutral-900);
  --n360-color-text-secondary: var(--n360-color-neutral-600);
  --n360-color-text-tertiary: var(--n360-color-neutral-500);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --n360-color-neutral-0: #1a1a1a;
  --n360-color-neutral-50: #212121;
  --n360-color-neutral-100: #424242;
  --n360-color-neutral-200: #616161;
  --n360-color-neutral-300: #757575;
  --n360-color-neutral-400: #9e9e9e;
  --n360-color-neutral-500: #bdbdbd;
  --n360-color-neutral-600: #e0e0e0;
  --n360-color-neutral-700: #eeeeee;
  --n360-color-neutral-800: #f5f5f5;
  --n360-color-neutral-900: #fafafa;
  --n360-color-neutral-1000: #ffffff;

  /* Dark layout overrides */
  --n360-sidebar-gradient: linear-gradient(
    180deg,
    #0d0d12 0%,
    #141020 50%,
    #1a0e28 100%
  );
  --n360-sidebar-border-color: rgba(255, 255, 255, 0.04);

  /* Dark shadows */
  --n360-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --n360-shadow-sm:
    0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --n360-shadow-base:
    0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --n360-shadow-md:
    0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --n360-shadow-lg:
    0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --n360-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
  --n360-color-primary-500: #0066cc;
  --n360-color-secondary-500: #8800cc;
  --n360-color-success-500: #006600;
  --n360-color-warning-500: #cc6600;
  --n360-color-error-500: #cc0000;
  --n360-color-neutral-0: #000000;
  --n360-color-neutral-1000: #ffffff;
  --n360-input-border-width: 2px;
}
/* ==========================================================================
   N360 Grid System
   --------------------------------------------------------------------------
   Razor pages declare layout with <div class="n360-row"> and
   <div class="n360-col" xs="12" sm="6" md="3"> — these were never wired up,
   so cols stacked full-width and pages required heavy scrolling.

   This file makes those attributes drive a 12-column flex grid with
   responsive breakpoints aligned to common framework conventions.
   ========================================================================== */

.n360-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
  box-sizing: border-box;
  /* Vertical gap between wrapped rows — eliminates the need for mb-4 on every card */
  row-gap: 12px;
}

.n360-row > .n360-col {
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
}

/* ── Gap modifiers ────────────────────────────────────────────────────────── */
/* Tight: 8px gutter columns, 8px row gap */
.n360-row--tight {
  margin-left: -4px;
  margin-right: -4px;
  row-gap: 8px;
}
.n360-row--tight > .n360-col {
  padding-left: 4px;
  padding-right: 4px;
}

/* Cozy: 24px gutter columns, 16px row gap */
.n360-row--cozy {
  margin-left: -12px;
  margin-right: -12px;
  row-gap: 16px;
}
.n360-row--cozy > .n360-col {
  padding-left: 12px;
  padding-right: 12px;
}

/* Flush: zero gutter, zero row gap (used inside compact stat cards) */
.n360-row--flush {
  margin-left: 0;
  margin-right: 0;
  row-gap: 0;
}
.n360-row--flush > .n360-col {
  padding-left: 0;
  padding-right: 0;
}

/* Loose: 24px gutter, 20px row gap (used in dashboard widget grids) */
.n360-row--loose {
  margin-left: -12px;
  margin-right: -12px;
  row-gap: 20px;
}
.n360-row--loose > .n360-col {
  padding-left: 12px;
  padding-right: 12px;
}

/* ----- xs (default, all viewports) ----- */
.n360-col[xs="1"] {
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}
.n360-col[xs="2"] {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
}
.n360-col[xs="3"] {
  flex: 0 0 25%;
  max-width: 25%;
}
.n360-col[xs="4"] {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.n360-col[xs="5"] {
  flex: 0 0 41.6667%;
  max-width: 41.6667%;
}
.n360-col[xs="6"] {
  flex: 0 0 50%;
  max-width: 50%;
}
.n360-col[xs="7"] {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}
.n360-col[xs="8"] {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}
.n360-col[xs="9"] {
  flex: 0 0 75%;
  max-width: 75%;
}
.n360-col[xs="10"] {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}
.n360-col[xs="11"] {
  flex: 0 0 91.6667%;
  max-width: 91.6667%;
}
.n360-col[xs="12"] {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ----- sm (>= 600px) ----- */
@media (min-width: 600px) {
  .n360-col[sm="1"] {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .n360-col[sm="2"] {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .n360-col[sm="3"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .n360-col[sm="4"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .n360-col[sm="5"] {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .n360-col[sm="6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .n360-col[sm="7"] {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .n360-col[sm="8"] {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .n360-col[sm="9"] {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .n360-col[sm="10"] {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .n360-col[sm="11"] {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .n360-col[sm="12"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ----- md (>= 960px) ----- */
@media (min-width: 960px) {
  .n360-col[md="1"] {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .n360-col[md="2"] {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .n360-col[md="3"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .n360-col[md="4"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .n360-col[md="5"] {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .n360-col[md="6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .n360-col[md="7"] {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .n360-col[md="8"] {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .n360-col[md="9"] {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .n360-col[md="10"] {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .n360-col[md="11"] {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .n360-col[md="12"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ----- lg (>= 1280px) ----- */
@media (min-width: 1280px) {
  .n360-col[lg="1"] {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .n360-col[lg="2"] {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .n360-col[lg="3"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .n360-col[lg="4"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .n360-col[lg="5"] {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .n360-col[lg="6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .n360-col[lg="7"] {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .n360-col[lg="8"] {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .n360-col[lg="9"] {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .n360-col[lg="10"] {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .n360-col[lg="11"] {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .n360-col[lg="12"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ----- xl (>= 1920px) ----- */
@media (min-width: 1920px) {
  .n360-col[xl="1"] {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .n360-col[xl="2"] {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .n360-col[xl="3"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .n360-col[xl="4"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .n360-col[xl="5"] {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .n360-col[xl="6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .n360-col[xl="7"] {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .n360-col[xl="8"] {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .n360-col[xl="9"] {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .n360-col[xl="10"] {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .n360-col[xl="11"] {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .n360-col[xl="12"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   Column alignment helpers
   ========================================================================== */
/* Align a column's content to the flex end (useful for action button columns) */
.n360-col--align-end {
  display: flex;
  align-items: flex-end;
}
.n360-col--align-center {
  display: flex;
  align-items: center;
}
.n360-col--align-start {
  display: flex;
  align-items: flex-start;
}

/* Full-height column (equalize card heights in a row) */
.n360-col--stretch > * {
  height: 100%;
}

/* ==========================================================================
   Row alignment helpers
   ========================================================================== */
.n360-row--align-end {
  align-items: flex-end;
}
.n360-row--align-center {
  align-items: center;
}
.n360-row--align-start {
  align-items: flex-start;
}
.n360-row--align-stretch {
  align-items: stretch;
}

/* ==========================================================================
   Compact-density helpers — use to reduce vertical padding so dashboards
   and form pages fit one viewport without scrolling.
   ========================================================================== */
.n360-card.pa-3 {
  padding: 12px !important;
}
.n360-card.pa-4 {
  padding: 16px !important;
}

/* Trim outer page padding inside MainContent on dense pages. Pages can opt
   in by adding class="n360-dense" to their root wrapper. */
.n360-dense .n360-card {
  padding: 12px !important;
}
.n360-dense h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
}
.n360-dense h5 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.n360-dense h6 {
  font-size: 0.875rem;
  margin-bottom: 4px;
}
.n360-dense .mb-4 {
  margin-bottom: 12px !important;
}
.n360-dense .mb-3 {
  margin-bottom: 8px !important;
}

/* ==========================================================================
   Common utility classes used by pages but missing — keep here so existing
   pages render correctly.
   ========================================================================== */
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.align-center {
  align-items: center;
}
.gap-1 {
  gap: 4px;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: right;
}
.text-secondary {
  color: var(--n360-color-text-secondary, #6b7280);
}
.text-primary {
  color: var(--n360-color-primary-500, #3b82f6);
}
.text-success {
  color: var(--n360-color-success-500, #10b981);
}
/* warning/info as TEXT on white need the darker -700 to pass WCAG AA (the -500
   amber/cyan are ~3.6:1); the -500 tokens stay for coloured backgrounds. */
.text-warning {
  color: var(--n360-color-warning-700, #b45309);
}
.text-info {
  color: var(--n360-color-info-700, #075985);
}
.text-danger,
.text-error {
  color: var(--n360-color-error-500, #ef4444);
}
.text-body-2 {
  font-size: 0.875rem;
  line-height: 1.4;
}
.mr-1 {
  margin-right: 4px;
}
.mr-2 {
  margin-right: 8px;
}
.mt-2 {
  margin-top: 8px;
}
.mt-3 {
  margin-top: 12px;
}
.mt-4 {
  margin-top: 16px;
}
.mb-1 {
  margin-bottom: 4px;
}
.mb-2 {
  margin-bottom: 8px;
}
.mb-3 {
  margin-bottom: 12px;
}
.mb-4 {
  margin-bottom: 16px;
}
.pa-3 {
  padding: 12px;
}
.pa-4 {
  padding: 16px;
}
.pa-6 {
  padding: 24px;
}
.pa-8 {
  padding: 32px;
}

/* ============================================================================
   COMPATIBILITY ALIASES — tokens that pages reference but nothing defined.
   Added 2026-10-02.

   Measured across all 2,985 routable pages: 15 --n360-* custom properties were
   used with NO inline fallback on 28 pages. An undefined custom property with no
   fallback makes the whole declaration invalid, so `color: var(--n360-color-muted)`
   was dropped at parse time and the text simply inherited — silently, with no
   build warning and nothing visible in the page source to suggest it.

   Each alias points at an existing token rather than a literal, so both the
   [data-theme="dark"] and [data-theme="high-contrast"] overrides above apply to
   these names too. The six *-bg aliases resolve to the same 50-level tints that
   the pages were already passing as fallbacks (danger-bg's #ffebee IS
   --n360-color-error-50), so light-mode appearance is unchanged.

   Not aliased on purpose: the --n360-surgery-* family on OTManagement's
   ORScheduleBoard. All eight carry inline fallbacks and render correctly, and
   their fallbacks are dark slab colours chosen for that board; defining them
   would change a page that has no defect.
   ============================================================================ */

:root {
    /* text */
    --n360-color-text-muted: var(--n360-text-muted);
    --n360-color-muted: var(--n360-text-muted);
    --n360-color-gray: var(--n360-color-neutral-500);

    /* surfaces */
    --n360-color-surface: var(--n360-bg);
    --n360-bg-muted: var(--n360-surface-variant);
    --n360-color-bg-light: var(--n360-color-neutral-100);
    --n360-color-bg-lighter: var(--n360-color-neutral-50);

    /* primary */
    --n360-color-primary-dark: var(--n360-color-primary-700);
    --n360-color-primary-bg: var(--n360-color-primary-50);

    /* success */
    --n360-color-success-light: var(--n360-color-success-100);
    --n360-color-success-lighter: var(--n360-color-success-50);
    --n360-color-success-dark: var(--n360-color-success-700);
    --n360-color-success-alt: var(--n360-color-success-700);
    --n360-color-success-bg: var(--n360-color-success-50);

    /* status tints */
    --n360-color-danger-bg: var(--n360-color-error-50);
    --n360-color-info-bg: var(--n360-color-info-50);
    --n360-color-warning-bg: var(--n360-color-warning-50);
    --n360-color-warning-light-bg: var(--n360-color-warning-50);
}