/* ============================================================
   Nexus New UI - Design System (scoped)
   Auto-generated from the approved mockup and scoped under
   `.nx-app` so it CANNOT affect the classic UI. Do not edit
   classic files. New UI only.
   Updated: 2026-06-18 - Aligned to Microsoft Fluent design tokens
   (UX guide: Segoe UI Variable font, Fluent Web Light color palette,
    sentence case, 14px min body text, colorBrand/colorStatus tokens)
   ============================================================ */

:root {
 --nx-font: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

 /* ── Responsive typography tokens ── */
 --nx-type-label:   12px;
 --nx-type-value:   14px;
 --nx-type-tab:     13px;
 --nx-type-panel:   16px;
 --nx-type-hero:    20px;
 --nx-type-grid-cell: 13px;
 --nx-type-cell:    var(--nx-type-grid-cell);
 --nx-type-header:  12px;
 --nx-type-footer:  12px;
 --nx-type-control: 14px;
 --nx-type-search:  14px;
 --nx-type-btn:     14px;
 --nx-type-radio:   14px;
 --nx-type-helper:  12px;
 --nx-type-badge:   12px;
 --nx-type-drawer:  16px;
}

@media (min-width: 1101px) { :root {
 --nx-type-tab: 14px; --nx-type-hero: 22px; --nx-type-header: 13px;
}}
@media (min-width: 1440px) { :root {
 --nx-type-label: 13px; --nx-type-hero: 24px; --nx-type-drawer: 17px;
}}
@media (min-width: 1920px) { :root {
 --nx-type-value: 15px; --nx-type-tab: 15px; --nx-type-panel: 17px; --nx-type-hero: 26px;
 --nx-type-grid-cell: 14px; --nx-type-header: 14px; --nx-type-footer: 13px;
 --nx-type-control: 15px; --nx-type-search: 15px; --nx-type-btn: 15px;
 --nx-type-radio: 15px; --nx-type-helper: 13px; --nx-type-badge: 13px; --nx-type-drawer: 18px;
}}

html:has(.nx-app),
body:has(.nx-app) {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden !important;
 font-family: var(--nx-font);
}

.nx-app *, .nx-app *::before, .nx-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Visually hidden utility for screen reader only content */
.nx-app .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.nx-app { /* Brand — Fluent Web Light theme (colorBrand* tokens) */
  --brand-primary: #0F6CBD;                                      /* colorBrandBackground */
  --brand-50: #ebf3fc; --brand-100: #cfe4fa; --brand-200: #b4d6fa;
  --brand-400: #479EF5; --brand-500: #0078D4; --brand-600: #0f6cbd;  /* colorBrandBackground */
  --brand-700: #115ea3; --brand-800: #0f548c; --brand-900: #0c3b5e;  /* Hover / Selected / Pressed */

  /* Neutral — Fluent colorNeutralBackground tokens */
  --gray-25: #FCFCFD; --gray-50: #fafafa;  /* colorNeutralBackground2 */
  --gray-100: #f5f5f5;                     /* colorNeutralBackground3 */
  --gray-200: #f0f0f0;                     /* colorNeutralBackground4 */
  --gray-300: #E5E7EB; --gray-400: #bdbdbd; /* colorNeutralForegroundDisabled */
  --gray-500: #707070;                     /* colorNeutralForeground4 */
  --gray-600: #616161;                     /* colorNeutralForeground5 */
  --gray-700: #424242; --gray-800: #242424; --gray-900: #141414;

  /* Semantic — Fluent colorStatus* / colorPalette* tokens */
  --success-50: #DFF6DD; --success-500: #0e700e; --success-700: #094509; /* colorStatusSuccessForeground1/2 */
  --warning-50: #FFF4CE; --warning-500: #eaa300; --warning-700: #835B00; /* colorPaletteMarigoldForeground3 */
  --danger-50:  #FDE7E9; --danger-500:  #b10e1c; --danger-700:  #6e0811; /* colorStatusDangerForeground1/2 */
  --tag-white-bg: #ffffff; --tag-white-fg: #424242; --tag-white-border: #707070;
  --info-50: #EBF3FB; --info-500: #0078D4; --info-700: #0f6cbd;
  --purple-50: #F5F3FF; --purple-500: #5c2e91; --purple-700: #341a51;   /* colorPalettePurpleBorderActive/Foreground2 */
  --teal-50: #F0FDFA;   --teal-500: #038387;   --teal-700: #00666d;     /* colorPaletteLightTealBorderActive/Foreground2 */
  --chart-blue: var(--brand-600);
  --chart-grape: #7160E8;
  --chart-teal: #009CA6;
  --chart-iris: #8764B8;
  --chart-success: var(--success-500);
  --chart-neutral: var(--gray-500);

  /* By-type accent colors — UX guide "By Type" palette */
  --accent-pending-actions: #00666d;
  --accent-open-issues:     #0e700e;
  --accent-open-rfis:       #6d2064;
  --accent-push-requests:   #bf0077;
  --accent-test-scripts:    #bc4b09;
  --accent-pending-approvals: #6e0811;

  /* Surfaces — Fluent colorNeutralBackground */
  --bg-app: #fafafa;        /* colorNeutralBackground2 */
  --bg-card: #fafafa;       /* colorNeutralBackground2 */
  --bg-elevated: #ffffff;
  --bg-subtle: #fafafa;     /* colorNeutralBackground2 */
  --bg-muted: #fcfcfc;

  /* Borders — Fluent colorNeutralStroke */
  --border-subtle: #f0f0f0;   /* colorNeutralBackground4 */
  --border-default: #e0e0e0;  /* colorNeutralStroke1 */
  --border-strong: #c8c8c8;   /* colorNeutralStroke2 */

  /* Text — Fluent colorNeutralForeground tokens */
  --text-primary: #000000;    /* colorNeutralForeground1 */
  --text-secondary: #242424;  /* colorNeutralForeground2 */
  --text-tertiary: #616161;   /* colorNeutralForeground5 */
  --text-inverse: #FFFFFF;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-ring: 0 0 0 3px rgba(0,120,212,0.15);

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-full: 9999px;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  --font: var(--nx-font);

  /* Accessibility - Focus Visible Styles */
  --focus-ring-color: #0078D4;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --admin-control-focus: #5B5FC7;
  --admin-control-focus-ring: rgba(91,95,199,.18);
  --sidebar-w: 240px;
  --topbar-h: 56px;
}

.nx-app { font-size: var(--nx-type-value); }
.nx-app { font-family: var(--nx-font);
  background: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden; }
.nx-app, .nx-app * { text-transform: none !important; }
.nx-app button { font-family: inherit; cursor: pointer; border: none; background: none; }
.nx-app input, .nx-app select, .nx-app textarea { font-family: inherit; }
.nx-app a { color: var(--brand-600); text-decoration: none; }
.nx-app ::selection { background: var(--brand-100); color: var(--brand-800); }
/* Focus ring */
.nx-app *:focus-visible { outline: 2px solid #1586d8;
  outline-offset: 2px; }
.nx-app button:focus-visible,
.nx-app a:focus-visible,
.nx-app input:focus-visible,
.nx-app select:focus-visible,
.nx-app textarea:focus-visible { outline: 2px solid #1586d8 !important;
  outline-offset: 2px !important; }
.nx-app .nx-skip-link { position: absolute; top: -40px; left: 0; z-index: 9999;
  padding: 8px 16px; background: #031E40; color: #fff;
  border-radius: 0 0 4px 0; font-size: 14px; font-weight: 600; transition: top .2s; }
.nx-app .nx-skip-link:focus { top: 0; }
/* === TOP BAR - Sophisticated glass nav
   ======================================================= */
.nx-app .topbar { height: var(--topbar-h, 56px);
  background: var(--gray-900);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: right .25s ease;
  z-index: 200; }
.nx-app .topbar__brand { display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-inverse);
  white-space: nowrap; }
.nx-app .topbar__brand-text { display: flex; flex-direction: column; gap: 0; }
.nx-app .topbar__brand-name { font-weight: 800; font-size: 16px; letter-spacing: -0.5px; line-height: 1.1; }
.nx-app .topbar__brand-env { font-size: 9px; font-weight: 700; letter-spacing: normal;
  text-transform: none; line-height: 1.2; }
.nx-app .topbar__brand-env--sandbox { color: #fbbf24; }
.nx-app .topbar__brand-env--prod { color: #4ade80; }
.nx-app .topbar__brand-logo { width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--brand-400), var(--purple-500));
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff;
  box-shadow: 0 0 12px rgba(99,102,241,0.3); }
.nx-app .topbar__sep { width: 1px; height: 24px; background: rgba(255,255,255,0.1); margin: 0 var(--sp-2); }
/* Breadcrumb */
.nx-app .breadcrumb { display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: rgba(255,255,255,0.45); }
.nx-app .breadcrumb a { color: rgba(255,255,255,0.55); transition: color var(--duration-fast) var(--ease); }
.nx-app .breadcrumb a:hover { color: rgba(255,255,255,0.85); text-decoration: none; }
.nx-app .breadcrumb__current { color: rgba(255,255,255,0.9); font-weight: 600; }
.nx-app .breadcrumb__chevron { font-size: 10px; }
.nx-app .topbar__spacer { flex: 1; }
/* Command palette trigger */
.nx-app .cmd-trigger { display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  min-width: 240px;
  transition: all var(--duration-normal) var(--ease); }
.nx-app .cmd-trigger:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
.nx-app .cmd-trigger__icon { font-size: 15px; }
.nx-app .cmd-trigger__label { flex: 1; }
.nx-app .cmd-trigger__kbd { display: flex; gap: 3px; }
.nx-app .cmd-trigger__kbd kbd { padding: 1px 5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  font-family: inherit; }
/* Top bar actions */
.nx-app .topbar__view-toggle { display: inline-flex; align-items: center; background: rgba(255,255,255,0.08); border-radius: 20px; padding: 2px; margin-right: 8px; border: 1px solid rgba(255,255,255,0.12); }
.nx-app .topbar__view-btn { padding: 4px 14px; font-size: var(--nx-type-btn); font-weight: 600; line-height: 1.4; font-family: var(--nx-font); border: none; border-radius: 18px; cursor: pointer; transition: all 0.2s ease; color: rgba(255,255,255,0.6); background: transparent; white-space: nowrap; }
.nx-app .topbar__view-btn:hover { color: rgba(255,255,255,0.9); }
.nx-app .topbar__view-btn--active { background: #0078D4; color: #fff; box-shadow: 0 1px 4px rgba(0,120,212,0.4); }
.nx-app .topbar__actions { display: flex; align-items: center; gap: var(--sp-3); }
.nx-app .topbar__action { width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 17px;
  transition: all var(--duration-fast) var(--ease);
  position: relative; }
.nx-app .topbar__action:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
.nx-app .topbar__action .notif-dot {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  background: #b10e1c;
  border-radius: 8px;
  border: 1.5px solid #1a1a2e;
  color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  line-height: 1; }
.nx-app .topbar__avatar { width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--purple-500));
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-left: var(--sp-2);
  border: 2px solid rgba(255,255,255,0.15);
  transition: border-color var(--duration-fast) var(--ease); }
.nx-app .topbar__avatar:hover { border-color: rgba(255,255,255,0.4); }
/* === SIDEBAR - Polished product nav
   ======================================================= */
.nx-app .app-layout { display: flex;
  padding-top: var(--topbar-h, 56px);
  height: 100vh;
  background: #F3F2F1; }
.nx-app--dark .app-layout { background: var(--bg-app); }
.nx-app .sidebar { width: var(--sidebar-w, 240px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(21,134,216,0.22) 0%, transparent 55%),
    linear-gradient(180deg, #073770 0%, #042952 40%, #031E40 100%);
  border-right: 1px solid #243552;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  top: var(--topbar-h, 56px);
  left: 0;
  bottom: 0;
  z-index: 100;
  font-family: 'Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif;
  scrollbar-width: thin;
  scrollbar-color: #2A3D5A transparent; }
.nx-app .sidebar::-webkit-scrollbar { width: 4px; }
.nx-app .sidebar::-webkit-scrollbar-thumb { background: #2A3D5A; border-radius: 4px; }
.nx-app .sidebar__section { margin-top: 0; padding: 4px 12px; }
.nx-app .sidebar__section:first-child { margin-top: 0; }
.nx-app .sidebar__section-label { font-size: 11px; font-weight: 600; color: #7A9BB8;
  text-transform: none; letter-spacing: normal;
  padding: 12px 8px 6px;
  margin-bottom: 0; }
.nx-app .sidebar__item { display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: #B5CAE0;
  transition: all 0.12s ease;
  position: relative;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  margin: 1px 0; }
.nx-app .sidebar__item:hover { background: rgba(255,255,255,0.07); color: #E6F0FA; border-color: rgba(255,255,255,0.06); }
.nx-app .sidebar__item:focus-visible { outline: 2px solid #479EF5; outline-offset: -2px; border-radius: 8px; }
.nx-app .sidebar__item--active { background: rgba(71,158,245,0.16);
  color: #60AAEF;
  font-weight: 600;
  border-color: rgba(71,158,245,0.22); }
.nx-app .sidebar__item--active::before { content: '';
  position: absolute; left: 0; top: 25%; bottom: 25%;
  width: 3px; height: auto;
  background: #479EF5;
  border-radius: 0 3px 3px 0;
  transform: none; }
.nx-app .sidebar__icon { width: 20px; height: 20px; text-align: center; font-size: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nx-app .sidebar__badge { margin-left: auto;
  padding: 2px 8px;
  font-size: 10px; font-weight: 700;
  border-radius: 12px;
  min-width: 20px; text-align: center; }
.nx-app .sidebar__badge--primary { background: #0f6cbd; color: #fff; }
.nx-app .sidebar__badge--danger { background: #b10e1c; color: #fff; }
.nx-app .sidebar__divider { height: 1px; background: linear-gradient(90deg, transparent, #243552, transparent); margin: 6px 20px; }
/* Offline toggle */
.nx-app .sidebar__offline { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #1E2E45;
  background: rgba(0,0,0,0.15); }
.nx-app .sidebar__offline-label { font-size: 12px; font-weight: 500; color: #7A9BB8; }
.nx-app .toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.nx-app .toggle input { opacity: 0; width: 0; height: 0; }
.nx-app .toggle__slider { position: absolute; inset: 0;
  background: #2A3D5A;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 0.2s ease; }
.nx-app .toggle__slider::before { content: '';
  position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.2s ease; }
.nx-app .toggle input:checked + .toggle__slider { background: #0078D4; }
.nx-app .toggle input:checked + .toggle__slider::before { transform: translateX(18px); }
.nx-app .toggle input:focus-visible + .toggle__slider { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078D4; }
/* Search input */
.nx-app .sidebar__search-wrap { position: relative; }
.nx-app .sidebar__search-input-wrap { display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid #1E3050;
  border-radius: 6px;
  background: #0D1A2E;
  transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.nx-app .sidebar__search-input-wrap--open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: #479EF5; }
.nx-app .sidebar__search-input-wrap:focus-within { border-color: #479EF5; box-shadow: 0 0 0 1px rgba(71,158,245,0.2); }
.nx-app .sidebar__search-input { border: none; outline: none; background: none;
  font-size: 12px; font-family: inherit; color: #B5CAE0; width: 100%; }
.nx-app .sidebar__search-input::placeholder { color: #4A6A88; }
.nx-app .sidebar__search-spinner { width: 12px; height: 12px; border: 2px solid #2A3D5A;
  border-top-color: #479EF5; border-radius: 50%; animation: nx-spin 0.6s linear infinite; flex-shrink: 0; }
@keyframes nx-spin { to { transform: rotate(360deg); } }
.nx-app .sidebar__search-results { position: absolute; left: 0; right: 0; z-index: 200;
  background: #0D1A2E; border: 1px solid #1E3050; border-top: none;
  border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  list-style: none; margin: 0; padding: 4px 0; max-height: 240px; overflow-y: auto; }
.nx-app .sidebar__search-result { display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer; font-size: 12px; color: #B5CAE0; }
.nx-app .sidebar__search-result:hover { background: rgba(71,158,245,0.10); }
.nx-app .sidebar__search-result--active { background: rgba(71,158,245,0.15); outline: 2px solid #479EF5; outline-offset: -2px; }
.nx-app .sidebar__search-result-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nx-app .sidebar__search-result-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #E6F0FA; }
.nx-app .sidebar__search-result-status { font-size: 10px; padding: 1px 6px; border-radius: 10px; flex-shrink: 0; background: rgba(255,255,255,0.06); color: #7A9BB8; }
.nx-app .sidebar__search-empty { padding: 10px 12px; font-size: 12px; color: #4A6A88; font-style: italic; }
/* Section toggle (collapsible) */
.nx-app .sidebar__section-toggle { display: flex; align-items: center; width: 100%;
  padding: 8px 8px;
  margin-bottom: 2px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s ease; }
.nx-app .sidebar__section-toggle:hover { background: rgba(255,255,255,0.05); }
.nx-app .sidebar__section-toggle .sidebar__section-label { flex: 1; padding: 0; margin: 0; text-align: left; }
.nx-app .sidebar__section-chevron { display: none; }
.nx-app .sidebar__section-toggle[aria-expanded="false"] .sidebar__section-chevron::before { content: ''; }
.nx-app .sidebar__section-toggle[aria-expanded="true"] .sidebar__section-chevron::before { content: ''; }
.nx-app .sidebar__section-toggle[aria-expanded="false"] ~ .sidebar__item { display: none; }

/* ── Collapse toggle + icon-rail (collapsed) mode ─────────────────────── */
/* NOTE: --sidebar-w is set inline on .nx-app (beats stylesheet), so collapse
   uses explicit width/margin values rather than overriding the variable. */
.nx-app .sidebar { transition: width .18s ease; }
.nx-app .main { transition: margin-left .18s ease; }
.nx-app .sidebar--collapsed { width: 64px; }
.nx-app:has(.sidebar--collapsed:not(:where([data-nx-route-hidden] *))) .main { margin-left: 64px; }

/* Edge handle: a small tab centered on the sidebar's right border. */
.nx-app .sidebar__edge-toggle { position: fixed; z-index: 150;
  top: calc(var(--topbar-h, 56px) + 58px);
  left: var(--sidebar-w, 240px);
  transform: translate(-50%, -50%);
  width: 24px; height: 24px; padding: 0;
  border: 1px solid #3D3D3D; border-radius: 50%;
  background: #1A1A1A; color: #D6D6D6;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(3,20,45,0.45);
  transition: left .18s ease, background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.nx-app .sidebar__edge-toggle--collapsed { left: 64px; }
.nx-app .sidebar__edge-toggle:hover { background: #242424; color: #fff; border-color: rgba(71,158,245,0.55); box-shadow: 0 2px 8px rgba(0,120,212,0.35); }
.nx-app .sidebar__edge-toggle:focus-visible { outline: 2px solid #0078D4; outline-offset: 2px; }
.nx-app .sidebar__edge-toggle svg { transition: transform .18s ease; }
.nx-app .sidebar__edge-toggle--collapsed svg { transform: rotate(180deg); }

.nx-app .sidebar--collapsed .sidebar__section-label,
.nx-app .sidebar--collapsed .sidebar__section-toggle,
.nx-app .sidebar--collapsed .sidebar__user-info { display: none; }
/* Raw text labels are bare text nodes (not spans); font-size:0 hides them while
   the SVG icon stays sized via .sidebar__icon. */
.nx-app .sidebar--collapsed .sidebar__item { justify-content: center; padding: 10px 0; gap: 0; font-size: 0 !important; }
.nx-app .sidebar--collapsed .sidebar__icon { font-size: 16px !important; }
/* Section headers are hidden in rail mode, so surface all items as icons. */
.nx-app .sidebar--collapsed .sidebar__section-toggle ~ .sidebar__item { display: flex !important; }
.nx-app .sidebar--collapsed .sidebar__item--active::before { left: 0; }
.nx-app .sidebar--collapsed .sidebar__user { justify-content: center; padding-left: 0; padding-right: 0; }
.nx-app .sidebar--collapsed .sidebar__divider { margin: 6px 12px; }

.nx-app--dark .sidebar__edge-toggle { background: #1A1A1A; border-color: #3D3D3D; color: #D6D6D6; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.nx-app--dark .sidebar__edge-toggle:hover { background: #242424; color: #fff; border-color: rgba(71,158,245,0.55); }
/* User card at bottom */
.nx-app .sidebar__user { margin-top: auto;
  padding: 8px 14px;
  border-top: 1px solid #1E2E45;
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.18);
  transition: background 0.12s; }
.nx-app .sidebar__user:hover { background: rgba(71,158,245,0.06); }
.nx-app .sidebar__user-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.nx-app .sidebar__signout { font-size: 10px; color: #60AAEF; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.nx-app .sidebar__signout:hover { text-decoration: underline; color: #90C4F0; }
.nx-app .sidebar__user-photo { flex-shrink: 0; width: 36px; height: 36px; }
.nx-app .sidebar__user-photo .cirle-div-style { width: 36px; height: 36px; border-radius: 50%;
  background: #0078D4; display: flex; align-items: center; justify-content: center; }
.nx-app .sidebar__user-photo .cirle-div-style label { color: #fff; font-size: 13px; font-weight: 700;
  margin: 0; cursor: default; line-height: 1; }
.nx-app .sidebar__user-photo .img-fluid.rounded-circle { width: 36px; height: 36px; object-fit: cover; border-radius: 50% !important; }
  background: linear-gradient(135deg, #0078D4, #5B5FC7);
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,120,212,0.2);
  position: relative; }
.nx-app .sidebar__user-avatar { width: 36px; height: 36px; border-radius: 50%;
  background: #0078D4; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
  position: relative; user-select: none; }
.nx-app .sidebar__user-info { flex: 1; min-width: 0; }
.nx-app .sidebar__user-name { font-size: 12px; font-weight: 600; color: #E6F0FA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-app .sidebar__user-email { font-size: 10px; color: #6A8EB0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* === MAIN CONTENT AREA
   ======================================================= */
.nx-app .main { flex: 1;
  margin-left: var(--sidebar-w, 240px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;}
/* Scrollable inner wrapper — prevents flex squeeze on page content */
.nx-app .page-scroll { flex: 1; overflow-y: auto; min-height: 0; background: var(--bg-card, #ffffff); border-radius: 8px; border: 1px solid var(--border-default, #e0e0e0); box-shadow: none; transition: margin-right .18s ease;
  scrollbar-width: none; -ms-overflow-style: none; border-right-color: transparent; }
.nx-app .page-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* NexusFooter — global footer strip (mirrors classic FooterAppBar). Sits as a fixed strip at the
   bottom of the content area (inside .main, below .page-scroll), beside the sidebar. Dark navy in
   both light and dark mode to match classic. Rendered once in the shell, so every New UI page
   (current and future) gets it automatically. */
.nx-app .nx-footer {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin-top: 8px;
  padding: 0 12px;
  background: #0b1b34;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
}
.nx-app .nx-footer__center { display: flex; align-items: center; gap: 14px; }
.nx-app .nx-footer__brand { display: inline-flex; align-items: center; gap: 6px; }
.nx-app .nx-footer__logo { display: block; }
.nx-app .nx-footer__brand-text { font-size: 12px; font-weight: 600; line-height: 1; }
.nx-app .nx-footer__link {
  color: #ffffff;
  font-size: 12px;
  text-decoration: underline;
}
.nx-app .nx-footer__link:hover { color: #cfe3ff; }
.nx-app .nx-footer__link:focus-visible { outline: 2px solid #cfe3ff; outline-offset: 2px; border-radius: 2px; }
.nx-app .nx-footer__version {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}
@media (max-width: 768px) {
  .nx-app .nx-footer__version { display: none; }
  /* Tablet portrait and phone layouts need the full viewport width. Keeping the desktop sidebar
     margin after the sidebar disappears compresses detail pages and causes resize flicker. */
  .nx-app .sidebar { display: none !important; }
  .nx-app .main,
  .nx-app:has(.sidebar--collapsed) .main { margin-left: 0 !important; transition: none !important; }
  .nx-app .sidebar__edge-toggle { display: none !important; }
  .nx-app .topbar { right: 0 !important; }
  .nx-app .app-layout,
  .nx-app .page-scroll { width: 100%; min-width: 0; transition: none !important; }
}

/* ============================================================================
   Settings panel — App notification (NexusAppNotifications). Custom New UI
   accordion + switch controls (no Telerik). Sentence case, Segoe UI, dark-mode aware.
   ============================================================================ */
.nx-app .nx-settings-section { display: flex; flex-direction: column; gap: 12px; }
.nx-app .nx-settings-section--collapsible { gap: 0; border: 1px solid var(--border-default, #e0e0e0); border-radius: 10px; background: var(--bg-card, #fff); overflow: hidden; margin-bottom: 12px; }
.nx-app .nx-settings-section__header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; background: var(--gray-50, #faf9f8); border: none; cursor: pointer; text-align: left; }
.nx-app .nx-settings-section__header:hover { background: var(--gray-100, #f3f2f1); }
.nx-app .nx-settings-section__header:focus-visible { outline: 2px solid #0078D4; outline-offset: -2px; }
.nx-app .nx-settings-section__chevron { color: var(--text-secondary); flex-shrink: 0; transition: transform .2s ease; }
.nx-app .nx-settings-section__chevron--open { transform: rotate(180deg); }
.nx-app .nx-settings-section__title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.nx-app .nx-settings-section--collapsible .nx-settings-section__title { margin: 0; }
.nx-app .nx-settings-section__body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; }
.nx-app .nx-display-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.nx-app .nx-display-row__label { display: flex; flex-direction: column; gap: 2px; }
.nx-app .nx-display-row__name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.nx-app .nx-display-row__desc { font-size: 12px; color: var(--text-secondary); }
.nx-app .nx-settings-muted { font-size: 14px; color: var(--text-secondary); margin: 4px 0; }

/* Settings field + dropdown (Language → User interface language) */
.nx-app .nx-field { display: flex; flex-direction: column; gap: 6px; }
.nx-app .nx-field__label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.nx-app .nx-select { width: 100%; height: 34px; padding: 0 32px 0 10px; font-family: inherit; font-size: 14px;
  color: var(--text-primary); background-color: var(--bg-card, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23605e5c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  border: 1px solid var(--border-neutral, #c8c6c4); border-radius: 6px; cursor: pointer; appearance: none; -webkit-appearance: none; }
.nx-app .nx-select:hover { border-color: #0078D4; }
.nx-app .nx-select:focus-visible { outline: none; border-color: #0078D4; box-shadow: 0 0 0 2px rgba(0,120,212,.25); }

.nx-app .nx-settings-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 6px; font-size: 13px; border: 1px solid transparent; }
.nx-app .nx-settings-banner--success { background: #dff6dd; color: #0e700e; border-color: #b7e6b7; }
.nx-app .nx-settings-banner--warning { background: #fff4ce; color: #6b5900; border-color: #f2e2a8; }
.nx-app .nx-settings-banner--error   { background: #fde7e9; color: #a4262c; border-color: #f3c9cd; }
.nx-app .nx-settings-banner__close { background: none; border: none; font-size: 17px; line-height: 1; cursor: pointer; color: inherit; }

/* Accordion group */
.nx-app .nx-acc { border: 1px solid var(--border-default, #e0e0e0); border-radius: 8px; overflow: hidden; background: var(--bg-card, #fff); }
.nx-app .nx-acc--editing { border-color: #0078D4; box-shadow: 0 0 0 1px rgba(0,120,212,.25); }
.nx-app .nx-acc__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--gray-50, #faf9f8); }
.nx-app .nx-acc__lead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-app .nx-acc__name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.nx-app .nx-acc__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nx-app .nx-acc__chevron { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 2px; display: flex; align-items: center; border-radius: 4px; transition: transform .2s ease; }
.nx-app .nx-acc__chevron--open { transform: rotate(180deg); }
.nx-app .nx-acc__chevron:hover { background: var(--gray-100, #f3f2f1); color: var(--text-primary); }
.nx-app .nx-acc__body { padding: 6px 12px 10px; display: flex; flex-direction: column; }
.nx-app .nx-acc__row { display: grid; grid-template-columns: 1fr auto 36px; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--border-subtle, #f0f0f0); }
.nx-app .nx-acc__row:first-child { border-top: none; }
.nx-app .nx-acc__label { font-size: 14px; color: #201F1E; display: inline-flex; align-items: center; gap: 6px; }
.nx-app .nx-acc__info { display: inline-flex; color: var(--text-tertiary, #8a8886); cursor: help; }
.nx-app .nx-acc__info:focus-visible { outline: 2px solid #0078D4; outline-offset: 2px; border-radius: 50%; }
.nx-app .nx-acc__yesno { font-size: 13px; color: var(--text-secondary); text-align: right; }

.nx-app .nx-icon-btn { background: none; border: none; cursor: pointer; color: #0078D4; padding: 4px; border-radius: 4px; display: flex; align-items: center; }
.nx-app .nx-icon-btn:hover { background: rgba(0,120,212,.1); }
.nx-app .nx-icon-btn:focus-visible { outline: 2px solid #0078D4; outline-offset: 1px; }

/* Custom switch (role="switch") */
.nx-app .nx-switch { position: relative; width: 38px; height: 20px; border-radius: 999px; border: none; background: var(--gray-300, #c8c6c4); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .15s ease; }
.nx-app .nx-switch--sm { width: 32px; height: 18px; }
.nx-app .nx-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s ease; }
.nx-app .nx-switch--sm .nx-switch__thumb { width: 14px; height: 14px; }
.nx-app .nx-switch--on { background: #0078D4; }
.nx-app .nx-switch--on .nx-switch__thumb { transform: translateX(18px); }
.nx-app .nx-switch--sm.nx-switch--on .nx-switch__thumb { transform: translateX(14px); }
.nx-app .nx-switch:disabled { cursor: default; opacity: .55; }
.nx-app .nx-switch:not(:disabled):focus-visible { outline: 2px solid #0078D4; outline-offset: 2px; }

/* Dark mode */
.nx-app--dark .nx-settings-section__title { color: #F7F7F7; }
.nx-app--dark .nx-settings-section--collapsible { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-settings-section__header { background: #1A1A1A; }
.nx-app--dark .nx-settings-section__header:hover { background: #242424; }
.nx-app--dark .nx-settings-section__chevron { color: #ADADAD; }
.nx-app--dark .nx-settings-muted { color: #ADADAD; }
.nx-app--dark .nx-field__label { color: #F7F7F7; }
.nx-app--dark .nx-select { color: #F7F7F7; background-color: #1A1A1A; border-color: #3D3D3D;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238aa0bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.nx-app--dark .nx-select:hover { border-color: #479ef5; }
.nx-app--dark .nx-select option { background: #1A1A1A; color: #F7F7F7; }
.nx-app--dark .nx-acc { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-acc__header { background: #1A1A1A; }
.nx-app--dark .nx-acc__name { color: #F7F7F7; }
.nx-app--dark .nx-acc__chevron { color: #ADADAD; }
.nx-app--dark .nx-acc__chevron:hover { background: rgba(255,255,255,.08); color: #fff; }
.nx-app--dark .nx-acc__row { border-top-color: #3D3D3D; }
.nx-app--dark .nx-acc__label { color: #F7F7F7; }
.nx-app--dark .nx-acc__yesno { color: #ADADAD; }
.nx-app--dark .nx-acc__info { color: #ADADAD; }
.nx-app--dark .nx-icon-btn { color: #60a5fa; }
.nx-app--dark .nx-icon-btn:hover { background: rgba(71,158,245,.15); }
.nx-app--dark .nx-switch { background: #3D3D3D; }
.nx-app--dark .nx-switch--on { background: #2899f5; }
.nx-app--dark .nx-settings-banner--success { background: rgba(16,124,16,.18); color: #6ccb6c; border-color: #1f5c1f; }
.nx-app--dark .nx-settings-banner--warning { background: rgba(245,158,11,.15); color: #f5c451; border-color: #6b5900; }
.nx-app--dark .nx-settings-banner--error   { background: rgba(164,38,44,.18); color: #f3a0a4; border-color: #7a2327; }

/* NexusMonitorFittingLayout - Lock viewport scrolling specifically for the projects list page */
.nx-app:has(.nx-projects-page:not(:where([data-nx-route-hidden] *))) .page-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* NexusMonitorFittingLayout - the projects grid tab panel (#proj-panel) must fill the remaining
   height as a flex column so the grid inside (.grid-area) gets a bounded height and scrolls
   internally, matching the project-details grid tabs. Without this the #proj-panel wrapper (added
   for the Home / All projects tab split) sizes to content, the outer .page-scroll clips it, and the
   grid's internal scroll never engages. Guarded by .nx-projects-page so the Home tab keeps page scroll. */
.nx-app:has(.nx-projects-page:not(:where([data-nx-route-hidden] *))) #proj-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.nx-app:has(.nx-projects-page:not(:where([data-nx-route-hidden] *))) #proj-panel > .metrics-strip,
.nx-app:has(.nx-projects-page:not(:where([data-nx-route-hidden] *))) #proj-panel > .nexus-common-grid-host {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* NexusMonitorFittingLayout - while the project's Equipment tab is active, lock the details-page
   viewport so the equipment grid fits the screen and scrolls internally (matches the Projects grid). */
.nx-app:has(.nx-pd-grid-active:not(:where([data-nx-route-hidden] *))) .page-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* The currently-visible grid tabpanel fills the remaining height so its internal scroll handles the
   rows while the column headers stay sticky. Targets the visible tabpanel generically, so EVERY grid
   tab (Equipment, RFIs, and any future table) gets monitor-fitting automatically. */
.nx-app:has(.nx-pd-grid-active:not(:where([data-nx-route-hidden] *))) section[role="tabpanel"]:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Leftpanelalignment - Shift main content left when column picker panel is open */
.nx-app:has(.nx-projects-page--colpick-open:not(:where([data-nx-route-hidden] *))) .main {
  margin-right: 420px; /* Shift content by the panel width */
}
/* Leftpanelalignment - While a right-docked drawer (edit / create) is open, inset the scrollable
   content by the 500px drawer width so the hero banner + page content aren't covered — but keep the
   shared top header and the Administrator category tab strip full width, and the drawer opens from
   the hero banner downward (see the drawer-top offset below).
   IMPORTANT: the inset is done with padding on the SCROLL CONTAINER (not margin on each child), so
   viewport-fixed sibling panels (the "Manage and share views" NexusSidePanel, column picker,
   advanced-filter modal, etc.) are NOT dragged on-screen — only in-flow content is inset. */
.nx-app:has(.nx-pd-page--drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .page-scroll {
  padding-right: 500px;
}
/* Keep the Administrator category tab strip within the inset content (do NOT counter the inset) so
   it narrows with the page while the drawer is open. Allow the tabs to wrap onto a second row instead
   of scrolling horizontally, so every category tab stays visible in the reduced width. */
.nx-app:has(.nx-pd-page--drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-tabs--standalone {
  flex-wrap: wrap;
  overflow-x: visible;
}
/* Same wrap behaviour for the pill-style admin/detail tab strip (NexusPillTabStrip) so every
   category pill stays visible when a docked drawer narrows the page instead of scrolling. */
.nx-app:has(.nx-pd-page--drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .nx-pilltabs {
  flex-wrap: wrap;
  overflow-x: visible;
}
/* Same wrap for Project details when a .nx-create-drawer (New building, New equipment, New RFI and
   so on) narrows the page instead. Those drawers shift .main rather than setting the
   nx-pd-page--drawer-open marker, so the rule above never fires for them and the strip stayed on one
   row, silently clipped by its own overflow-x:auto + hidden scrollbar. Anchored on the
   .nx-projdetail-page marker, which exists only on Project details, so no other page is affected. */
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *), .nx-team-panel:not([hidden] *)) .nx-pilltabs {
  flex-wrap: wrap;
  overflow-x: visible;
}
/* Equipment Details only: the New issue / New RFI drawers are not docked (they reserve their width
   through the generic .main shift), so the rule above never fires for them and the pill strip stayed
   on one scrolling row while the Edit drawers wrapped it onto two. This marker reflows the strip the
   same way for those two drawers without applying any of the docking insets. */
.pd-detail.nx-pd-page--tabs-wrap .nx-pilltabs {
  flex-wrap: wrap;
  overflow-x: visible;
}
/* Open the drawer (and its click-to-close overlay) from the top of the page hero downward: start
   them at the hero-header level (just below the shared top bar) so the drawer height matches the
   list/detail page hero, and run flush to the viewport bottom so the footer (Cancel / Save changes)
   sits at the bottom edge — matching the building create/edit drawers (.nx-create-drawer), which
   dock full-height with no bottom gap. */
.nx-app:has(.nx-pd-page--drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-drawer,
.nx-app:has(.nx-pd-page--drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-drawer-overlay {
  top: var(--topbar-h, 56px);
  bottom: var(--nx-pd-drawer-bottom, 0px);
}
/* With the content shifted left, the drawer no longer overlaps it, so the dimming overlay
   should be transparent AND non-blocking: the docked drawer is non-modal, so the visible page
   beside it must stay scrollable and interactive. The overlay is a full-viewport fixed layer, so
   without pointer-events:none it would swallow wheel/click events over the page. Closing is still
   available via the drawer Close (X) and Cancel buttons. */
.nx-app:has(.nx-pd-page--drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-drawer-overlay {
  background: transparent;
  pointer-events: none;
}
/* Narrow screens: the drawer becomes a near full-width overlay covering the page, so restore the
   dimmed, click-to-close modal overlay (blocking) — matching the create/issue drawer behaviour. */
@media (max-width: 1200px) {
  .nx-app:has(.nx-pd-page--drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-drawer-overlay {
    background: rgba(0,0,0,.32);
    pointer-events: auto;
  }
}

/* Issue edit drawers (issue module only) — header-preserving right drawer that tucks flush beneath the
   topbar (no top gap), and compresses the content column instead of overlapping it, matching the
   create drawer. Scoped via .nx-pd-page--issue-drawer-open so the Project/Team edit drawers keep their
   existing layout. */
.nx-app:has(.nx-pd-page--issue-drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-drawer {
  top: var(--topbar-h, 56px);
}
.nx-app:has(.nx-pd-page--issue-drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .main {
  margin-right: 500px; transition: margin-right .18s ease;
}
.nx-app:has(.nx-pd-page--issue-drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-drawer-overlay {
  background: transparent;
}
@media (max-width: 1200px) {
  .nx-app:has(.nx-pd-page--issue-drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-drawer { top: var(--topbar-h, 56px); }
  .nx-app:has(.nx-pd-page--issue-drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .main { margin-right: 0; }
  .nx-app:has(.nx-pd-page--issue-drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .pd-drawer-overlay { background: rgba(0,0,0,.32); }
}
/* Equipment Details edit drawers use .nx-create-drawer; make their backdrop transparent AND
   non-blocking while the page is shifted left so the squeezed page stays visible and scrollable
   (the docked drawer is non-modal; closing is via the drawer Close / Cancel buttons). */
.nx-app:has(.nx-pd-page--drawer-open:not([hidden] *):not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop {
  background: transparent;
  pointer-events: none;
}

/* Equipment Details edit drawers (.pd-detail marker): keep the global topbar and footer fully
   visible and squeeze ONLY the equipment details section. The generic .main/.topbar shift rules
   above move the header/footer too, so override them here (higher specificity via the .pd-detail
   compound) and instead shift the scroll content, then dock the drawer between the topbar and
   footer so neither is covered. */
.nx-app:has(.pd-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .topbar {
  right: 0;
}
.nx-app:has(.pd-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .main {
  margin-right: 0;
}
/* Page-scroll inset is handled once by the generic ".nx-pd-page--drawer-open .page-scroll"
   padding-right rule above. Do NOT re-add a margin-right here or it double-shifts (padding + margin)
   and collapses the content column. */
.nx-app:has(.pd-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer {
  top: var(--topbar-h, 56px);
  bottom: 0;
  height: auto;
}
.nx-app:has(.pd-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop {
  top: var(--topbar-h, 56px);
  bottom: 0;
  inset: auto;
  left: 0;
  right: 0;
}
/* Create New Equipment drawer (listing / project Equipment tab): same content-only squeeze as the
   Equipment Details edit drawers. Keep the global topbar + footer full width and shift ONLY the page
   scroll content left, then dock the drawer between the topbar and footer so neither is covered. */
.nx-app:has(.nx-eq-create-host.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .topbar {
  right: 0;
}
.nx-app:has(.nx-eq-create-host.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .main {
  margin-right: 0;
}
/* Page-scroll inset handled once by the generic padding-right rule above; no margin-right here
   (avoids the padding + margin double-shift that collapses the content column). */
.nx-app:has(.nx-eq-create-host.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer {
  top: var(--topbar-h, 56px);
  bottom: 0;
  height: auto;
}
.nx-app:has(.nx-eq-create-host.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop {
  top: var(--topbar-h, 56px);
  bottom: 0;
  inset: auto;
  left: 0;
  right: 0;
  background: transparent;
}
/* RFI, Issue and NCR detail drawers: keep the global topbar + footer full width and shift ONLY the
   page scroll content left, then dock the drawer between the topbar and footer so neither is covered.
   The :not(:where([data-nx-route-hidden] *)) guard skips router-cached (hidden) instances. */
.nx-app:has(.nx-rfi-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .topbar,
.nx-app:has(.nx-issue-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .topbar,
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .topbar {
  right: 0;
}
.nx-app:has(.nx-rfi-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .main,
.nx-app:has(.nx-issue-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .main,
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .main {
  margin-right: 0;
}
.nx-app:has(.nx-rfi-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer,
.nx-app:has(.nx-issue-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer,
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer {
  top: var(--topbar-h, 56px);
  bottom: 0;
  height: auto;
  width: 500px;
  max-width: 94vw;
}
.nx-app:has(.nx-rfi-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop,
.nx-app:has(.nx-issue-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop,
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop {
  top: var(--topbar-h, 56px);
  bottom: 0;
  inset: auto;
  left: 0;
  right: 0;
  background: transparent;
}
/* NCR details: while the Discussions drawer is docked, give the main window a real, grabbable
   scrollbar so the user can scroll the (now narrower) NCR content. The shared drawer-open rule insets
   the content with padding-right, which parks the scrollbar at the far right underneath the drawer,
   and the base .page-scroll hides its own scrollbar entirely. Reuse the Project-details recipe: inset
   with margin instead of padding so the scroll container's scrollbar stops at the drawer edge, then
   restore a visible thin scrollbar. The clamp collapses the inset on narrow screens (where the drawer
   becomes a full-width overlay, handled by the max-width:1200px block below). */
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll {
  --nx-ncr-dock-w: 500px;         /* matches the docked Discussions drawer width */
  --nx-ncr-content-min: 700px;    /* narrowest content column worth docking beside */
  padding-right: 0;
  margin-right: clamp(
    0px,
    (100vw - (var(--nx-ncr-dock-w) + var(--nx-ncr-content-min))) * 999,
    var(--nx-ncr-dock-w)
  );
  scrollbar-width: thin; scrollbar-color: #b0bec5 var(--gray-100);
  border-right-color: var(--border-default, #e0e0e0);
}
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll::-webkit-scrollbar { width: 10px; }
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll::-webkit-scrollbar-track { background: var(--gray-100); }
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; border: 2px solid var(--gray-100); }
.nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll::-webkit-scrollbar-thumb:hover { background: #78909c; }
.nx-app--dark:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll { scrollbar-color: #3D3D3D #141414; }
.nx-app--dark:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll::-webkit-scrollbar-track { background: #141414; }
.nx-app--dark:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll::-webkit-scrollbar-thumb { background: #3D3D3D; border-color: #141414; }
.nx-app--dark:has(.nx-ncr-detail.nx-pd-page--drawer-open) .page-scroll::-webkit-scrollbar-thumb:hover { background: #666666; }
@media (max-width: 1200px) {
  .nx-app:has(.nx-rfi-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll,
  .nx-app:has(.nx-issue-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll,
  .nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll {
    padding-right: 0;
  }
  .nx-app:has(.nx-rfi-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer,
  .nx-app:has(.nx-issue-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer,
  .nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer {
    width: 96vw;
    max-width: 96vw;
  }
  .nx-app:has(.nx-rfi-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop,
  .nx-app:has(.nx-issue-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop,
  .nx-app:has(.nx-ncr-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop {
    background: rgba(0,0,0,.32);
    pointer-events: auto;
  }
}
/* === Page Header - Gradient hero === */
.nx-app .page-hero { background: var(--nx-hero-grad);
  padding: var(--sp-6) var(--sp-8) var(--sp-5);
  border-bottom: none;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; }
.nx-app .page-hero::before { content: '';
  position: absolute; top: -100px; right: -50px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(21,134,216,0.15) 0%, transparent 70%);
  pointer-events: none; }
.nx-app .page-hero__row { display: flex; align-items: flex-start; gap: var(--sp-5);
  position: relative; z-index: 1; }
.nx-app .page-hero__icon { width: 52px; height: 52px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff;
  flex-shrink: 0; }
.nx-app .page-hero__content { flex: 1; }
.nx-app .page-hero__title-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 2px; }
.nx-app .page-hero__title { font-size: 24px; font-weight: 800; color: #fff;
  letter-spacing: -0.7px; line-height: 1.2; }
.nx-app .page-hero__env-badge { padding: 2px 10px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 600;
  color: #fff; }
.nx-app .page-hero__desc { font-size: 14px; color: rgba(255,255,255,0.88); margin-bottom: var(--sp-3); }
.nx-app .page-hero__meta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.nx-app .page-hero__stat { display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.nx-app .page-hero__stat strong { color: var(--text-primary); font-weight: 700; }
.nx-app .page-hero__stat-dot { width: 4px; height: 4px; border-radius: 50%;
  background: var(--gray-300); }
.nx-app .page-hero__actions { display: flex; gap: var(--sp-2); flex-shrink: 0; align-self: center; }
.nx-app .page-hero__actions .btn,
.nx-app .page-hero__actions .btn--secondary { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.32); color: #fff; }
.nx-app .page-hero__actions .btn:hover,
.nx-app .page-hero__actions .btn--secondary:hover { background: rgba(255,255,255,0.26); color: #fff; }
/* Equipment page hero — mockup (eq-module-hero) restyle. Scoped via the
   page-hero--eqmodule modifier so the shared .page-hero used by other listing
   pages is unaffected. */
.nx-app .page-hero.page-hero--eqmodule {
  background: var(--nx-hero-grad);
  padding: var(--sp-3) var(--sp-8) var(--sp-4); }
.nx-app .page-hero--eqmodule .page-hero__back { margin-bottom: var(--sp-2); }
.nx-app .page-hero.page-hero--eqmodule::before { display: none; }
.nx-app .page-hero--eqmodule .page-hero__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,0.15); border: none;
  backdrop-filter: blur(4px); }
.nx-app .page-hero--eqmodule .page-hero__icon svg { width: 24px; height: 24px; }
.nx-app .page-hero--eqmodule .page-hero__title { font-size: 18px; font-weight: 700; letter-spacing: normal; }
.nx-app .page-hero--eqmodule .page-hero__desc { font-size: 12px; color: rgba(255,255,255,0.85); margin-bottom: 0; }
.nx-app .page-hero__back {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px; padding: 7px 14px; margin-bottom: 12px;
  font-size: 13px; font-weight: 500; color: #fff; cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--duration-normal) var(--ease);
  text-decoration: none; position: relative; z-index: 1; }
.nx-app .page-hero__back:hover { background: rgba(255,255,255,0.25); color: #fff; }
.nx-app .page-hero__back svg { width: 14px; height: 14px; }
/* Buttons */
.nx-app .btn { display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px 18px;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  transition: all var(--duration-normal) var(--ease);
  white-space: nowrap; }
.nx-app .btn svg { width: 16px; height: 16px; }
.nx-app .btn--primary { background: var(--brand-600); color: #fff;
  box-shadow: 0 1px 3px rgba(15,108,189,0.3); }
.nx-app .btn--primary:hover { background: var(--brand-700); box-shadow: 0 4px 12px rgba(15,108,189,0.35); transform: translateY(-1px); }
.nx-app .coledit__footer .btn--primary {
  border-color: transparent;
  background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%);
  color: #fff;
}
.nx-app .coledit__footer .btn--primary:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%);
}
.nx-app .btn--secondary { background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-xs); }
.nx-app .btn--secondary:hover { background: var(--bg-subtle); border-color: var(--brand-400); }
.nx-app .btn--ghost { color: var(--text-secondary); padding: 9px 12px; }
.nx-app .btn--ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }
/* Icon-only button (square-ish) — matches the .btn family height so toolbars stay uniform. */
.nx-app .btn--icon { padding: 9px 11px; }
/* Circular icon-only button (e.g. Refresh) — round, same height as the .btn family. */
.nx-app .btn--round { padding: 0; width: 38px; height: 38px; border-radius: var(--r-full); justify-content: center; }
.nx-app .btn--round svg { width: 15px; height: 15px; }
/* Destructive outline button (rectangular, red outline) — used for Delete team member. */
.nx-app .btn--danger-outline,
.nx-app .toolbar .btn--danger-outline { background: var(--bg-card, #fff); color: #c50f1f; border: 1px solid #e6a3a7; box-shadow: var(--shadow-xs); }
.nx-app .btn--danger-outline svg { color: #c50f1f; }
.nx-app .btn--danger-outline:hover,
.nx-app .toolbar .btn--danger-outline:hover { background: var(--danger-50, #fde7e9); border-color: #d13438; color: #a30e18; box-shadow: 0 4px 12px rgba(164,38,44,.18); transform: translateY(-1px); }
.nx-app .btn--danger-outline:disabled { color: #c9a3a5; border-color: #ecd6d7; background: var(--bg-card, #fff); }
/* Toggled/active state for secondary toolbar buttons (e.g. Filter on). */
.nx-app .btn--secondary.is-active { border-color: var(--brand-400); color: var(--brand-600); background: var(--brand-50); }
/* Count badge inside a toolbar button. */
.nx-app .btn__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 2px; font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: var(--r-full); background: var(--brand-600); color: #fff; }
.nx-app--dark .btn--danger-outline { background: var(--bg-elevated); border-color: #7a2327; color: #f3a0a4; }
.nx-app--dark .btn--danger-outline:hover { background: rgba(164,38,44,.20); border-color: #a4262c; color: #ffb3b3; }
.nx-app--dark .btn--secondary.is-active { background: rgba(71,158,245,0.14); }
/* === Summary Cards === */
.nx-app .metrics-strip { display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-8);
  overflow-x: auto;
  flex-shrink: 0; }
.nx-app .metric-card { flex: 1; min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: 10px var(--sp-4);
  display: flex; flex-direction: column; gap: 1px;
  transition: all var(--duration-normal) var(--ease);
  cursor: default; position: relative; overflow: hidden; }
.nx-app .metric-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.nx-app .metric-card__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px 3px 0 0; }
.nx-app .metric-card__header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.nx-app .metric-card__icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nx-app .metric-card__label { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform:none; letter-spacing: normal; }
.nx-app .metric-card__value { font-size: 22px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.2; margin: 0 0 2px; }
.nx-app .metric-card__trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; }
.nx-app .metric-card__trend--up { color: var(--success-700); }
.nx-app .metric-card__trend--down { color: var(--danger-700); }
.nx-app .metric-card__trend-label { color: var(--text-tertiary); font-weight: 400; margin-left: 2px; }
/* === Toolbar === */
.nx-app .toolbar { display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-1) var(--sp-4) 0;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  flex-wrap: wrap;
  row-gap: var(--sp-2);
  min-width: 0; }
/* Subgrid toolbar: the subgrid lives inside a panel card, so it drops the toolbar's own
   card chrome (border / shadow / fill) and horizontal margin to sit flush, matching the mockup. */
.nx-app .nx-subgrid .toolbar { border: none; box-shadow: none; background: transparent;
  margin-left: var(--sp-4); margin-right: var(--sp-4); padding-left: 0; padding-right: 0; }
/* View selector pill */
.nx-app .view-selector { display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  min-width: 140px; max-width: 240px;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease); }
.nx-app .view-selector__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .view-selector:hover { border-color: var(--brand-400); background: var(--brand-50); }
.nx-app .view-selector__caret { flex-shrink: 0; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-tertiary); margin-left: 6px; vertical-align: middle; }
/* Divider */
.nx-app .toolbar__divider { width: 1px; height: 24px; background: var(--border-default); margin: 0 var(--sp-1); }
/* Chips */
.nx-app .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; row-gap: var(--sp-2); min-width: 0; }
.nx-app .chip { display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 500;
  flex-shrink: 0; white-space: nowrap;
  animation: chip-pop 0.2s var(--ease-spring); }
@keyframes chip-pop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.nx-app .chip--blue { background: var(--brand-50); border: 1px solid var(--brand-200); color: var(--brand-800); }
.nx-app .chip--amber { background: #FFF4CE; border: 1px solid #F2D57E; color: #6E5100; }
.nx-app .chip--overflow { background: #EDEBE9; border: 1px solid #D2D0CE; color: #605E5C; cursor: pointer;
  font-weight: 600; transition: background var(--duration-fast) var(--ease); }
.nx-app .chip--overflow:hover { background: #E1DFDD; }
.nx-app .chip__remove { margin-left: 2px; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  background: transparent; border: none; color: inherit;
  transition: background var(--duration-fast) var(--ease); }
.nx-app .chip__remove:hover { background: rgba(0,0,0,0.10); }
.nx-app .chip__close { width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  transition: background var(--duration-fast) var(--ease); }
.nx-app .chip__close:hover { background: rgba(0,0,0,0.06); }
.nx-app .add-filter-pill { display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 12px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 500;
  color: var(--brand-600);
  transition: all var(--duration-fast) var(--ease); }
.nx-app .add-filter-pill:hover { border-color: var(--brand-400); background: var(--brand-50); }
.nx-app .toolbar__spacer { flex: 1; }
/* Tool buttons */
.nx-app .tool-btn { display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary); background: var(--bg-card);
  transition: all var(--duration-fast) var(--ease); }
.nx-app .tool-btn:hover { border-color: var(--brand-400); color: var(--brand-600); background: var(--brand-50); }
.nx-app .tool-btn svg { width: 15px; height: 15px; }
/* Search */
.nx-app .search-input { display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: var(--bg-card);
  flex: 0 1 240px;
  min-width: 150px;
  transition: all var(--duration-normal) var(--ease); }
.nx-app .search-input:focus-within {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid #0F6CBD;
  outline-offset: 0;
}
.nx-app .search-input--active { border-color: #0F6CBD; }
.nx-app .search-input svg { width: 15px; height: 15px; color: var(--text-tertiary); flex-shrink: 0; }
.nx-app .search-input:focus-within svg,
.nx-app .search-input--active svg { color: #0F6CBD; }
.nx-app .search-input input { border: none; outline: none; background: none; font-size: 13px; width: 100%; color: var(--text-primary); }
.nx-app .search-input input:focus,
.nx-app .search-input input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.nx-app .search-input input[type="search"]::-webkit-search-cancel-button { display: none; }
.nx-app .search-input input::placeholder { color: var(--text-tertiary); }
.nx-app .search-clear { display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  color: var(--text-tertiary);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.nx-app .search-clear:hover { background: var(--gray-200); color: var(--text-primary); }
.nx-app .search-clear svg { width: 12px; height: 12px; }
/* Disabled button */
.nx-app .btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* === DATA GRID - Premium table with row detail
   ======================================================= */
/* Inline alert banner above the grid (e.g. Export "record count exceeded" message). */
.nx-app .grid-inline-alert {
  display: flex; align-items: flex-start; gap: 8px;
  margin: var(--sp-1) var(--sp-4); padding: 10px 14px;
  border: 1px solid var(--info-700); border-radius: 6px;
  background: var(--info-50); color: var(--info-700);
  font-size: 13px; line-height: 1.4;
  box-sizing: border-box; }
.nx-app .grid-inline-alert--error { background: var(--danger-50); border-color: var(--danger-500); color: var(--danger-700); }
.nx-app .grid-inline-alert__text { flex: 1; }
.nx-app .grid-inline-alert__close {
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: inherit; padding: 0 2px; }
.nx-app--dark .grid-inline-alert { background: rgba(15,108,189,.15); border-color: #0f6cbd; color: #8ec2f2; }
.nx-app--dark .grid-inline-alert--error { background: rgba(164,38,44,.18); border-color: #7a2327; color: #f3a0a4; }

.nx-app .grid-area { flex: 1;
  display: flex;
  overflow: hidden; }
.nx-app .grid-scroll { flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--sp-2) var(--sp-4) var(--sp-5); }
.nx-app .grid-card { flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
/* The table viewport owns scrolling while the secondary horizontal scrollbar is disabled. */
.nx-app .grid-tbl-wrap { flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto; }
.nx-app .grid-tbl-wrap::-webkit-scrollbar { width: 10px; }
.nx-app .grid-tbl-wrap::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.nx-app .grid-tbl-wrap::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; border: 2px solid var(--gray-100); }
.nx-app .grid-tbl-wrap::-webkit-scrollbar-thumb:hover { background: #78909c; }
.nx-app .grid-tbl-wrap { scrollbar-width: thin; scrollbar-color: #b0bec5 var(--gray-100); }
.nx-app .grid-horizontal-scroll {
  flex: 0 0 12px;
  min-height: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--gray-100);
}
.nx-app .grid-horizontal-scroll,
.nx-app .nx-sga-process__scroll {
  scrollbar-width: thin;
  scrollbar-color: #78909c var(--gray-100);
}
.nx-app .grid-horizontal-scroll[hidden] { display: none; }
.nx-app .grid-horizontal-scroll__content { height: 1px; min-width: 100%; }
.nx-app .grid-horizontal-scroll::-webkit-scrollbar,
.nx-app .nx-sga-process__scroll::-webkit-scrollbar { height: 12px; }
.nx-app .grid-horizontal-scroll::-webkit-scrollbar-track,
.nx-app .nx-sga-process__scroll::-webkit-scrollbar-track { background: var(--gray-100); }
.nx-app .grid-horizontal-scroll::-webkit-scrollbar-thumb,
.nx-app .nx-sga-process__scroll::-webkit-scrollbar-thumb {
  background: #78909c;
  border: 2px solid var(--gray-100);
  border-radius: 10px;
}
.nx-app .grid-horizontal-scroll:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -2px;
}

/* NexusColumnFilters — clickable column header button + dropdown menu (sort + filter) */
.nx-app .col-head--btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
}
.nx-app .col-head--btn:hover .col-head__caret { opacity: 1; }
.nx-app .col-head__caret { display: inline-flex; justify-content: center; min-width: 12px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.nx-app .col-head__caret svg { width: 13px; height: 13px; }
.nx-app .col-head__caret--active { opacity: 1; }
.nx-app .col-head__caret .sort-arrow { width: 11px; height: 14px; color: var(--neutral-500, #9aa0a6); }
.nx-app .col-head__caret .sort-arrow--on { color: var(--brand-600); }

/* During a reload the previous rows stay rendered (keeps column widths stable — no width jump on
   sort/filter/page); a subtle dim signals the grid is busy. */
.nx-app table.tbl tbody.tbl-body--busy { opacity: .55; transition: opacity .12s; pointer-events: none; }
.nx-app .col-head__filter-dot { display: inline-flex; color: var(--brand-600); flex-shrink: 0; }
.nx-app .col-head__filter-dot svg { width: 12px; height: 12px; }

/* Header layout: sort button (label + caret) fills the cell; the funnel menu button is right-justified. */
.nx-app .col-head-wrap { display: flex; align-items: center; gap: 4px; width: 100%; }
.nx-app .col-head-wrap .col-head--btn { width: auto; flex: 1 1 auto; min-width: 0; }
.nx-app .col-head-wrap .col-head__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .col-head__menu-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; padding: 0; margin: 0;
  background: none; border: none; border-radius: 4px; cursor: pointer;
  color: var(--neutral-500, #616161); opacity: 0; transition: opacity .12s, background .12s;
}
.nx-app table.tbl thead th:hover .col-head__menu-btn { opacity: 1; }
.nx-app .col-head__menu-btn:hover { background: rgba(0, 0, 0, .06); }
.nx-app .col-head__menu-btn--open,
.nx-app .col-head__menu-btn--filtered { opacity: 1; color: var(--brand-600); }
.nx-app .col-head__menu-btn svg { width: 14px; height: 14px; }

/* Persistent per-column active-filter indicator (funnel). Always visible (brand-colored)
   when the column has an active filter, so the filtered state is discoverable without hover. */
.nx-app .col-head__filter-ind {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; padding: 0; margin: 0;
  background: none; border: none; border-radius: 4px; cursor: pointer;
  color: var(--brand-600); opacity: 1; transition: background .12s;
}
.nx-app .col-head__filter-ind svg { width: 13px; height: 13px; }
.nx-app .col-head__filter-ind:hover { background: rgba(0, 0, 0, .06); }
.nx-app .col-head__filter-ind:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 1px; }
/* Dark mode: brand-600 (#0f6cbd) is too dim on the dark-navy thead; use the same lighter
   accent as the sorted-header treatment so the funnel and filtered-kebab stay legible. */
.nx-app--dark .col-head__filter-ind,
.nx-app--dark .col-head__menu-btn--filtered { color: #60A5FA; }
.nx-app--dark .col-head__filter-ind:hover,
.nx-app--dark .col-head__menu-btn:hover { background: rgba(255, 255, 255, .10); }
.nx-app--dark .col-head__filter-ind:focus-visible,
.nx-app--dark .col-head__menu-btn:focus-visible { outline-color: #60A5FA; }

/* Keyboard focus: the header controls are otherwise hover-only (opacity:0) with no focus ring,
   so a keyboard/Narrator user sees nothing focused. Reveal them and add a visible focus outline. */
.nx-app table.tbl thead th:focus-within .col-head__menu-btn { opacity: 1; }
.nx-app .col-head__menu-btn:focus-visible { opacity: 1; outline: 2px solid var(--brand-600); outline-offset: 1px; }
.nx-app .col-head--btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }
.nx-app .col-head--btn:focus-visible .col-head__caret { opacity: 1; }

.nx-app .col-menu__backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; border: none; pointer-events: none; }
.nx-app .col-menu {
  position: absolute; top: 100%; left: 0; z-index: 61; min-width: 248px;
  margin-top: 4px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,0.16));
  font-weight: 400; text-transform: none; cursor: default;
}
/* Fixed-position variant: escapes the grid's overflow containers (.grid-card overflow:hidden,
   .grid-tbl-wrap overflow:auto) so the value input + Filter/Clear stay reachable on short grids.
   left/top are set inline from the kebab's viewport rect; opens below and left-of the kebab. */
.nx-app .col-menu--fixed {
  position: fixed; top: auto; left: auto; margin-top: 0; z-index: 1000;
  transform: translate(-100%, 6px);
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
}
.nx-app .col-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 9px 10px; font-size: 13px; color: var(--text-primary); border-radius: var(--r-sm); font-family: var(--font);
}
.nx-app .col-menu__item:hover { background: var(--bg-subtle); }
.nx-app .col-menu__item svg { width: 15px; height: 15px; color: var(--text-secondary); flex-shrink: 0; }
.nx-app .col-menu__sep { height: 1px; background: var(--border-default); margin: 6px 4px; }
.nx-app .col-menu__filter { padding: 4px 4px 2px; }
.nx-app .col-menu__buttons { display: flex; gap: var(--sp-2); margin-top: 10px; }
.nx-app .col-menu__btn {
  flex: 1; padding: 7px 10px; font-size: 13px; font-weight: 600; font-family: var(--font);
  border: 1px solid var(--border-default); background: var(--bg-card); color: var(--text-primary);
  border-radius: var(--r-sm); cursor: pointer;
}
.nx-app .col-menu__btn:hover { background: var(--bg-subtle); }
.nx-app .col-menu__btn--primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.nx-app .col-menu__btn--primary:hover { background: var(--brand-700); }

/* NexusColumnFilter editor (inside the column menu) */
.nx-app .ncf { display: flex; flex-direction: column; gap: 6px; }
.nx-app .ncf__label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); }
.nx-app .ncf__op, .nx-app .ncf__input {
  width: 100%; border: 1px solid var(--border-default); border-radius: var(--r-sm);
  padding: 7px 9px; font-size: 13px; font-family: var(--font); color: var(--text-primary); background: var(--bg-card);
}
.nx-app .ncf__op:focus, .nx-app .ncf__input:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--shadow-ring); }
.nx-app .ncf__value { margin-top: 2px; }
.nx-app .ncf__novalue { margin: 2px 0 0; font-size: 13px; color: var(--text-tertiary); }

/* Multiselect / bool checkbox value editor inside the column filter menu (classic-style value picker) */
.nx-app .ncf__search { margin-bottom: 6px; }
.nx-app .col-menu__checklist {
  max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 4px; background: var(--bg-card);
}
.nx-app .col-menu__check {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-primary); cursor: pointer; font-weight: 400; font-family: var(--font);
}
.nx-app .col-menu__check:hover { background: var(--bg-subtle); }
.nx-app .col-menu__check input[type="checkbox"] { flex-shrink: 0; margin: 0; cursor: pointer; }
.nx-app .col-menu__check-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .col-menu__checklist-empty { padding: 8px; font-size: 12px; color: var(--text-tertiary); text-align: center; }

/* Let a header escape its clipping (inline overflow:hidden from the resize JS) while its menu is open. */
.nx-app table.tbl thead th:has(.col-menu) { overflow: visible !important; z-index: 30; }
.nx-app table.tbl { width: 100%; min-width: 1000px; border-collapse: collapse; font-size: 11px; }
/* Scale grid font on large monitors — only rules whose BASE comes before this block */
@media (min-width: 1440px) {
  .nx-app table.tbl { font-size: 13px; }
  .nx-app .grid-footer__info, .nx-app .grid-footer__page-size { font-size: 12px; }
}
.nx-app table.tbl thead th { position: sticky; top: 0; z-index: 10;
  background: var(--gray-50);
  font-size: 11px; font-weight: 700;
  color: #424242;
  text-transform:none;
  letter-spacing: normal;
  padding: 11px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-default);
  user-select: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease); }
.nx-app table.tbl thead th:hover { background: var(--gray-100); color: var(--text-secondary); }
/* Column header interactive icons */
/* Column resize handle (injected by initColResize JS) */
.nx-app table.tbl thead th { overflow: hidden; }
.nx-app .col-resizer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 5px;
  cursor: col-resize; z-index: 3; background: transparent;
  transition: background 0.15s ease; }
.nx-app .col-resizer:hover { background: var(--brand-500); opacity: 0.5; }
.nx-app th.col-resizing .col-resizer { background: var(--brand-500); opacity: 0.8; }
.nx-app th.col-resizing { user-select: none; }
.nx-app .col-head { display: flex; align-items: center; gap: 4px; }
.nx-app .col-head__label { flex: 1; }
.nx-app .col-head__icons { display: flex; gap: 2px; opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
.nx-app table.tbl thead th:hover .col-head__icons { opacity: 1; }
.nx-app .col-head__icons--visible { opacity: 1 !important; }
.nx-app .col-head--sorted { color: var(--brand-700); }
.nx-app table.tbl thead th[aria-sort="ascending"],
.nx-app table.tbl thead th[aria-sort="descending"] { background: var(--brand-50); }
.nx-app .col-icon { width: 22px; height: 22px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  transition: all var(--duration-fast) var(--ease);
  position: relative; }
.nx-app .col-icon:hover { background: rgba(0,0,0,0.06); color: var(--text-secondary); }
.nx-app .col-icon svg { width: 13px; height: 13px; }
.nx-app .col-icon--active { color: var(--brand-600) !important; }
.nx-app .col-icon--active-dot::after { content: ''; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-500); }
/* === COLUMN FILTER DROPDOWN ======= */
.nx-app .col-filter-dropdown { position: absolute; top: 100%; left: 0; z-index: 500;
  background: #fff; border: 1px solid var(--border-default);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  width: 240px; padding: 0; display: none;
  animation: slideDown 0.15s var(--ease); }
.nx-app .col-filter-dropdown.active { display: block; }
@keyframes slideDown { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } }
.nx-app .col-filter-dropdown__item { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  font-size: 13px; color: var(--text-primary); cursor: pointer; transition: background 0.1s; }
.nx-app .col-filter-dropdown__item:hover { background: var(--gray-50); }
.nx-app .col-filter-dropdown__item svg { width: 14px; height: 14px; color: var(--text-secondary); flex-shrink: 0; }
.nx-app .col-filter-dropdown__divider { height: 1px; background: var(--border-default); margin: 4px 0; }
.nx-app .col-filter-dropdown__section { padding: 8px 14px 4px; font-size: 11px; font-weight: 600;
  color: var(--text-tertiary); text-transform:none; letter-spacing: normal; }
.nx-app .col-filter-dropdown__filter-area { padding: 8px 14px 12px; }
.nx-app .col-filter-dropdown__select { width: 100%; padding: 7px 10px; border: 1px solid var(--border-default);
  border-radius: var(--r-sm); font-size: 12px; background: #fff;
  margin-bottom: 6px; cursor: pointer; appearance: auto; }
.nx-app .col-filter-dropdown__select:focus { border-color: var(--brand-500); outline: none; box-shadow: var(--shadow-ring); }
.nx-app .col-filter-dropdown__input { width: 100%; padding: 7px 10px; border: 1px solid var(--border-default);
  border-radius: var(--r-sm); font-size: 12px; }
.nx-app .col-filter-dropdown__input:focus { border-color: var(--brand-500); outline: none; box-shadow: var(--shadow-ring); }
.nx-app .col-filter-dropdown__actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.nx-app .col-filter-dropdown__actions button { padding: 5px 12px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500; cursor: pointer; }
.nx-app .col-filter-dropdown__actions .cfd-apply { background: var(--brand-600); color: #fff; border: none; }
.nx-app .col-filter-dropdown__actions .cfd-apply:hover { background: var(--brand-700); }
.nx-app .col-filter-dropdown__actions .cfd-clear { background: #fff; color: var(--text-secondary); border: 1px solid var(--border-default); }
.nx-app .col-filter-dropdown__actions .cfd-clear:hover { background: var(--gray-50); }
/* === EDIT COLUMNS SIDE PANEL ======= */
.nx-app .columns-panel { position: fixed; top: 0; right: -380px; width: 360px; height: 100vh;
  background: #fff; z-index: 1001; box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; transition: right 0.3s var(--ease); }
.nx-app .columns-panel.active { right: 0; }
.nx-app .columns-panel__header { display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border-default); }
.nx-app .columns-panel__header h3 { font-size: 18px; font-weight: 600; margin: 0; }
.nx-app .columns-panel__close { width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  font-size: 18px; color: var(--text-tertiary); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; }
.nx-app .columns-panel__close:hover { background: var(--gray-100); color: var(--text-primary); }
.nx-app .columns-panel__tabs { display: flex; gap: 0; padding: 0 24px; border-bottom: 1px solid var(--border-default); }
.nx-app .columns-panel__tab { padding: 10px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
  border-bottom: 2px solid transparent; color: var(--text-secondary); transition: all 0.15s; }
.nx-app .columns-panel__tab:hover { color: var(--text-primary); }
.nx-app .columns-panel__tab--active { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.nx-app .columns-panel__search { display: flex; gap: 8px; padding: 12px 24px; align-items: center; }
.nx-app .columns-panel__search input { flex: 1; padding: 8px 12px; border: 1px solid var(--border-default);
  border-radius: var(--r-sm); font-size: 13px; }
.nx-app .columns-panel__search input:focus { border-color: var(--brand-500); outline: none; box-shadow: var(--shadow-ring); }
.nx-app .columns-panel__search select { padding: 8px 10px; border: 1px solid var(--border-default);
  border-radius: var(--r-sm); font-size: 12px; background: #fff; }
.nx-app .columns-panel__list { flex: 1; overflow-y: auto; padding: 0; }
.nx-app .columns-panel__item { display: flex; align-items: center; padding: 12px 24px;
  border-bottom: 1px solid var(--border-subtle); cursor: pointer;
  transition: background 0.1s; font-size: 13px; color: var(--text-primary); }
.nx-app .columns-panel__item:hover { background: var(--brand-50); }
.nx-app .columns-panel__item--selected { background: var(--brand-50); font-weight: 500; }
.nx-app .columns-panel__item-label { flex: 1; line-height: 1.4; }
.nx-app .columns-panel__item-check { width: 18px; height: 18px; border-radius: 3px; border: 2px solid var(--brand-500);
  background: var(--brand-500); color: #fff; display: none; align-items: center; justify-content: center; font-size: 11px; }
.nx-app .columns-panel__item--selected .columns-panel__item-check { display: flex; }
.nx-app .columns-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 1000;
  display: none; backdrop-filter: blur(1px); }
.nx-app .columns-panel-backdrop.active { display: block; }
/* Table rows */
.nx-app table.tbl tbody tr { transition: background var(--duration-fast) var(--ease);
  border-bottom: 1px solid var(--border-subtle);
  cursor: default; }
.nx-app table.tbl tbody tr:hover { background: #F8FAFF; }
.nx-app table.tbl tbody tr.selected { background: var(--brand-50); }
.nx-app table.tbl tbody tr:last-child { border-bottom: none; }
.nx-app table.tbl tbody td { padding: 11px 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; }
/* Cell styles */
.nx-app .cell-check { width: 40px; }
.nx-app .cell-check input { width: 16px; height: 16px; accent-color: var(--brand-600); cursor: pointer; }
.nx-app .cell-name { display: flex; align-items: center; gap: var(--sp-2); }
.nx-app .cell-name__color { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nx-app .cell-name__text { font-weight: 400; color: #106ebe; }
.nx-app .cell-name__text:hover { text-decoration: none; }
/* Subgrid name link: match the mockup's semibold weight (mockup .cell-name__text is 600). */
.nx-app .nx-subgrid .cell-name__text { font-weight: 600; }
/* Primary-name cell with no detail link (e.g. Project Onboarding): plain text, not a blue hyperlink */
.nx-app .cell-name__text--plain { color: var(--text-primary); cursor: default; }
/* Status badge */
.nx-app .status { display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; }
.nx-app .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.nx-app .status--active { background: var(--success-50); color: var(--success-700); }
.nx-app .status--active::before { background: var(--success-500); }
.nx-app .status--draft { background: var(--warning-50); color: var(--warning-700); }
.nx-app .status--draft::before { background: var(--warning-500); }
.nx-app .status--review { background: #fef7b2; color: #835B00; }
.nx-app .status--review::before { background: #835B00; }
.nx-app .status--inactive { background: var(--danger-50); color: var(--danger-700); }
.nx-app .status--inactive::before { background: var(--danger-500); }
.nx-app .status--done { background: #EBF3FB; color: #0f6cbd; }
.nx-app .status--done::before { background: #0f6cbd; }
/* Tags — UX guide: all white background, neutral border (no color-coded backgrounds) */
.nx-app .tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-primary); }
.nx-app .tag--1, .nx-app .tag--2, .nx-app .tag--3, .nx-app .tag--4,
.nx-app .tag--5, .nx-app .tag--6, .nx-app .tag--7, .nx-app .tag--8, .nx-app .tag--9 {
  background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-primary); }
/* Progress */
.nx-app .progress-cell { display: flex; align-items: center; gap: var(--sp-2); }
.nx-app .progress-track { flex: 1; height: 6px; background: var(--gray-100); border-radius: var(--r-full); overflow: hidden; max-width: 80px; }
.nx-app .progress-fill { height: 100%; border-radius: var(--r-full); transition: width 0.6s var(--ease); }
/* Progress — solid Fluent semantic colors (no gradients) */
.nx-app .progress-fill--g { background: var(--success-500); }   /* #0e700e */
.nx-app .progress-fill--y { background: linear-gradient(90deg, #F59E0B, #FBBF24); }   /* #eaa300 */
.nx-app .progress-fill--r { background: var(--danger-500); }    /* #b10e1c */
.nx-app .progress-fill--b { background: var(--brand-600); }     /* #0f6cbd — for Done/100% */

.nx-app .area-progress-cell { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.nx-app .area-progress-cell__track { width: 120px; height: 6px; overflow: hidden; background: #E1E5EA; border-radius: 999px; }
.nx-app .area-progress-cell__fill { height: 100%; border-radius: inherit; transition: width .3s ease; }
.nx-app .area-progress-cell__fill--red { background: #D83B01; }
.nx-app .area-progress-cell__fill--yellow { background: #F2C811; }
.nx-app .area-progress-cell__fill--green { background: #21A366; }
.nx-app .area-progress-cell__value { min-width: 34px; color: var(--text-secondary); font-size: 12px; text-align: right; }
.nx-app--dark .area-progress-cell__track { background: #34445A; }
.nx-app .progress-pct { font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 32px; }
/* Person — neutral gray avatar matching Microsoft People control style */
.nx-app .person { display: inline-flex; align-items: center; gap: var(--sp-2); }
.nx-app .person__av { width: 28px; height: 28px; border-radius: 50%;
  font-size: 10px; font-weight: 600; color: #424242;
  background: #E0E0E0; border: 1px solid #C8C8C8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.nx-app .person__av--color { color: #fff; border-color: transparent; font-weight: 700; }
.nx-app .person__name { font-size: 11px; font-weight: 500; color: var(--text-primary); }
/* Clickable lookup cells (person avatar link + generic lookup link) */
.nx-app a.person--link { text-decoration: none; cursor: pointer; }
.nx-app a.person--link .person__name { color: #106ebe; }
.nx-app a.person--link:hover .person__name { text-decoration: underline; }
.nx-app .cell-lookup__link { color: #106ebe; text-decoration: none; cursor: pointer; }
.nx-app .cell-lookup__link:hover { text-decoration: underline; }
/* Overdue date cell */
.nx-app .date-cell--overdue { color: var(--danger-500); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.nx-app .date-cell--overdue::before { content: '⚠'; font-size: 11px; }
/* Date */
.nx-app .date-cell { color: #000000; font-size: 11px; font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif; }
/* ↑ Cascade fix: @1440px / @1920px overrides for all elements with explicit font-size
   MUST come after their base rules so the media query wins the source-order battle */
@media (min-width: 1440px) {
  .nx-app table.tbl thead th { font-size: 13px; }
  .nx-app .status            { font-size: 13px; }
  .nx-app .tag               { font-size: 13px; }
  .nx-app .person__name      { font-size: 13px; }
  .nx-app .date-cell         { font-size: 13px; }
}
/* Row hover actions */
.nx-app .row-actions-cell { width: 40px; padding: 0 8px; text-align: center; }
.nx-app .row-actions { display: flex; justify-content: center; opacity: 0; transition: opacity .15s; position: relative; }
.nx-app table.tbl tbody tr:hover .row-actions,
.nx-app table.tbl tbody tr:focus-within .row-actions { opacity: 1; }
.nx-app .row-action-btn { background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 3px; border-radius: 4px; display: flex; align-items: center; }
.nx-app .row-action-btn:hover { background: var(--gray-100); color: var(--text-primary); }
.nx-app .row-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 160px; z-index: 200; padding: 4px 0; }
.nx-app .row-menu__item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; color: var(--text-primary); cursor: pointer; background: none; border: none; width: 100%; text-align: left; text-decoration: none; }
.nx-app .row-menu__item:hover { background: #f0f6ff; }
.nx-app .row-menu__backdrop { position: fixed; inset: 0; z-index: 199; background: transparent; border: none; cursor: default; }
/* Built-in row menu floated as a fixed-position flyout so it escapes the grid's overflow
   containers (.grid-tbl-wrap / .grid-card). Anchored to the click point; opens below-left. */
.nx-app .row-menu--fixed { position: fixed; right: auto; bottom: auto; z-index: 1000; transform: translate(-100%, 6px); }
/* Built-in row "⋮" Copy link menu — dark mode */
.nx-app--dark .row-menu { background: var(--bg-elevated, #1A1A1A); border-color: #3D3D3D; }
.nx-app--dark .row-menu__item { color: #F7F7F7; }
.nx-app--dark .row-menu__item:hover { background: rgba(71,158,245,.12); }
.nx-app--dark .row-action-btn { color: #ADADAD; }
.nx-app--dark .row-action-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Grid footer */
.nx-app .grid-footer { display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-default);
  background: var(--gray-50);
  font-size: 13px; color: var(--text-tertiary);
  border-radius: 0 0 var(--r-lg) var(--r-lg); }
.nx-app .grid-footer__info { display: flex; align-items: center; gap: var(--sp-3); font-size: 11px; color: #616161; flex: 1; }
.nx-app .grid-footer__center { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--text-secondary); justify-content: center; flex: 1; }
.nx-app .grid-footer__page-size { display: flex; align-items: center; gap: var(--sp-1); font-size: 11px; color: #616161; }
.nx-app .grid-footer__page-size select { padding: 3px 6px; border: 1px solid var(--border-default);
  border-radius: var(--r-xs); font-size: 12px; background: var(--bg-card); color: var(--text-primary); }
.nx-app .grid-footer__center select { padding: 3px 8px; border: 1px solid var(--border-default);
  border-radius: var(--r-xs); font-size: 13px; background: var(--bg-card); color: var(--text-primary); }
.nx-app .grid-footer__pages { display: flex; gap: 2px; flex: 1; justify-content: flex-end; }
.nx-app .page-btn { width: 28px; height: 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary); background: var(--bg-card);
  transition: all var(--duration-fast) var(--ease); }
.nx-app .page-btn:hover { border-color: var(--brand-400); color: var(--brand-600); }
.nx-app .page-btn:focus-visible { outline: 2px solid var(--brand-500, #0078d4); outline-offset: 2px; }
.nx-app .page-btn--active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.nx-app .page-btn--nav { width: 32px; height: 32px; border-radius: 6px; font-size: 18px; font-weight: 400; color: var(--brand-500, #0078d4); border-color: var(--border-default); }
.nx-app .page-btn--nav:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--brand-400); color: var(--brand-600); }
.nx-app .page-btn--nav:disabled { color: var(--text-tertiary); border-color: var(--border-subtle); cursor: not-allowed; opacity: 0.5; }
.nx-app .page-btn__info { font-size: 13px; font-weight: 500; color: var(--text-secondary); padding: 0 6px; min-width: 52px; text-align: center; user-select: none; }
/* === ROW DETAIL PANEL - Slide-in from right
   ======================================================= */
.nx-app .detail-panel { width: 420px;
  background: var(--bg-card);
  border-left: 1px solid var(--border-default);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  animation: slide-in 0.3s var(--ease); }
.nx-app .detail-panel.active { display: flex; }
@keyframes slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.nx-app .detail-panel__header { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.nx-app .detail-panel__title { flex: 1; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.nx-app .detail-panel__close { width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 16px;
  transition: all var(--duration-fast) var(--ease); }
.nx-app .detail-panel__close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nx-app .detail-panel__body { padding: var(--sp-5); }
.nx-app .detail-section { margin-bottom: var(--sp-5); }
.nx-app .detail-section__title { font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform:none; letter-spacing: normal; margin-bottom: var(--sp-3); }
.nx-app .detail-row { display: flex; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); }
.nx-app .detail-row:last-child { border-bottom: none; }
.nx-app .detail-row__label { width: 120px; font-size: 12px; color: var(--text-tertiary); font-weight: 500; flex-shrink: 0; }
.nx-app .detail-row__value { flex: 1; font-size: 13px; color: var(--text-primary); font-weight: 500; }
/* Activity timeline */
.nx-app .timeline { margin-top: var(--sp-3); }
.nx-app .timeline__item { display: flex; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  position: relative; }
.nx-app .timeline__item::before { content: '';
  position: absolute; left: 11px; top: 28px; bottom: -8px;
  width: 1px; background: var(--border-default); }
.nx-app .timeline__item:last-child::before { display: none; }
.nx-app .timeline__dot { width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  background: var(--brand-50); color: var(--brand-600); }
.nx-app .timeline__content { flex: 1; }
.nx-app .timeline__text { font-size: 13px; color: var(--text-secondary); }
.nx-app .timeline__text strong { color: var(--text-primary); }
.nx-app .timeline__time { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
/* Quick action buttons in detail panel */
.nx-app .detail-actions { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-subtle); }
.nx-app .detail-actions .btn { flex: 1; justify-content: center; }
/* === COMMAND PALETTE MODAL
   ======================================================= */
.nx-app .cmd-overlay { position: fixed; inset: 0;
  background: rgba(15,23,42,0.5); backdrop-filter: blur(4px);
  z-index: 9000;
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 15vh; }
.nx-app .cmd-overlay.active { display: flex; }
.nx-app .cmd-dialog { width: 560px;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: cmd-in 0.2s var(--ease-out); }
@keyframes cmd-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: scale(1); } }
.nx-app .cmd-input-wrap { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle); }
.nx-app .cmd-input-wrap svg { width: 20px; height: 20px; color: var(--text-tertiary); flex-shrink: 0; }
.nx-app .cmd-input-wrap input { flex: 1; border: none; outline: none; background: none;
  font-size: 16px; color: var(--text-primary); font-weight: 500; }
.nx-app .cmd-input-wrap input::placeholder { color: var(--text-tertiary); }
.nx-app .cmd-results { max-height: 320px; overflow-y: auto; padding: var(--sp-2); }
.nx-app .cmd-group-label { font-size: 10px; font-weight: 700; color: var(--text-tertiary); text-transform:none; letter-spacing: normal; padding: var(--sp-2) var(--sp-3); }
.nx-app .cmd-item { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: 13px; color: var(--text-primary);
  transition: background var(--duration-fast) var(--ease);
  cursor: pointer; }
.nx-app .cmd-item:hover, .nx-app .cmd-item--focused { background: var(--brand-50); }
.nx-app .cmd-item__icon { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.nx-app .cmd-item__text { flex: 1; }
.nx-app .cmd-item__shortcut { font-size: 11px; color: var(--text-tertiary); }
.nx-app .cmd-item__shortcut kbd { padding: 1px 5px; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 3px; font-size: 10px; }
.nx-app .cmd-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-subtle); display: flex; gap: var(--sp-4); font-size: 11px; color: var(--text-tertiary); }
.nx-app .cmd-footer span { display: flex; align-items: center; gap: 4px; }
.nx-app .cmd-footer kbd { padding: 1px 5px; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 3px; font-size: 10px; }
/* === RESPONSIVE
   ======================================================= */
@media (max-width: 1024px) {
  /* Sidebar collapse is driven solely by the edge toggle (.sidebar--collapsed),
     which behaves identically at every width above the mobile breakpoint. The
     previous responsive auto-collapse fought the manual toggle: it force-set the
     rail to 60px (so the chevron could not expand it) and hid labels with a dead
     span selector, leaving the bare-text labels overflowing the narrow rail. */
  .nx-app .metrics-strip { padding: var(--sp-4); gap: var(--sp-3); }
  .nx-app .detail-panel { width: 340px; }
}
@media (max-width: 768px) {
  .nx-app .cmd-trigger { min-width: auto; }
  .nx-app .cmd-trigger__label { display: none; }
  .nx-app .breadcrumb { display: none; }
  .nx-app .metrics-strip { flex-wrap: nowrap; overflow-x: auto; padding: var(--sp-3) var(--sp-4); }
  .nx-app .metric-card { min-width: 160px; flex: none; }
  .nx-app .toolbar { padding: var(--sp-3) var(--sp-4); }
  .nx-app .grid-scroll { padding: 0 var(--sp-4) var(--sp-4); padding-top: var(--sp-3); }
  .nx-app .detail-panel { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 150; width: 100%; }
  .nx-app .page-hero { padding: var(--sp-4) var(--sp-5); }
  .nx-app .page-hero__actions { flex-direction: column; }
  .nx-app .eq-action,
  .nx-app .nec__btn,
  .nx-app .pd-btn,
  .nx-app .pd-form-control,
  .nx-app .nx-form-text__control,
  .nx-app .pd-form-grid--ep .nec__input,
  .nx-app .pd-form-grid--ep .nfl__control,
  .nx-app .im-status-banner__close,
  .nx-app .topbar__action,
  .nx-app .eq-action--icon,
  .nx-app .search-clear,
  .nx-app .nx-create-drawer__close,
  .nx-app .pd-drawer__close,
  .nx-app .page-btn,
  .nx-app .row-action-btn,
  .nx-app .nx-side-panel__close { min-width: 44px; min-height: 44px; }
}
/* Touch targets */
@media (pointer: coarse) {
  .nx-app .sidebar__item,
  .nx-app .tool-btn,
  .nx-app .view-selector,
  .nx-app .add-filter-pill,
  .nx-app .btn,
  .nx-app .eq-action,
  .nx-app .nec__btn,
  .nx-app .pd-btn,
  .nx-app .nx-form-text__control,
  .nx-app .pd-form-grid--ep .nec__input,
  .nx-app .pd-form-grid--ep .nfl__control,
  .nx-app .pd-form-control,
  .nx-app .im-status-banner__close { min-height: 44px; }
  .nx-app table.tbl tbody td { padding: 14px 16px; }
  .nx-app .topbar__action,
  .nx-app .eq-action--icon,
  .nx-app .search-clear,
  .nx-app .nx-create-drawer__close,
  .nx-app .pd-drawer__close,
  .nx-app .page-btn,
  .nx-app .row-action-btn,
  .nx-app .nx-side-panel__close { min-width: 44px; min-height: 44px; }
  .nx-app .page-btn { width: 44px; height: 44px; }
}

/* === New UI additions: form fields & alerts (panels) === */
.nx-app .nx-field { margin-bottom: 18px; }
.nx-app .nx-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.nx-app .nx-req { color: var(--danger-500); }
.nx-app .nx-input, .nx-app .nx-textarea {
  width: 100%; padding: 9px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border-default); border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--text-primary); outline: none;
}
.nx-app .nx-input:focus, .nx-app .nx-textarea:focus { border-color: var(--brand-500); box-shadow: var(--shadow-ring); }
.nx-app .nx-textarea { resize: vertical; min-height: 84px; }
.nx-app .nx-input--invalid, .nx-app .nx-textarea--invalid { border-color: var(--danger-500); }
.nx-app .nx-field__error { font-size: 12px; color: var(--danger-700); margin-top: 5px; }
.nx-app .nx-form-alert { padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 16px; }
.nx-app .nx-form-alert--error { background: var(--danger-50); color: var(--danger-700); border: 1px solid var(--danger-500); }
.nx-app .nx-form-alert--success { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-500); }
.nx-app .nx-form-hint { font-size: 12px; color: var(--text-tertiary); margin-bottom: 16px; }

/* ===========================================================================
   Project Details (New UI) — hero, tabs, summary cards, fields, team, areas
   =========================================================================== */
/* ── Project Details – Hero ── */
/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   PREMIUM UX LAYER — Hero aurora, bar animations, panel accent,
   presence dot, pulse ring, frosted icon box
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* 1 ── Hero: layered aurora shimmer */
@keyframes pd-aurora { 0%,100% { opacity:.35; transform:scale(1) translateX(0); } 50% { opacity:.55; transform:scale(1.15) translateX(8px); } }
.nx-app .pd-hero { background:
    radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.45) 0%, transparent 55%),
    linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%);
  color: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--sp-3) var(--sp-6) var(--sp-3); margin-bottom: 0;
  box-shadow: 0 4px 24px rgba(2,15,34,.35); position: relative; overflow: hidden; min-height: 120px; box-sizing: border-box; }
.nx-app .pd-hero--deep {
  background:
    radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.45) 0%, transparent 55%),
    linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%); }
/* Unified deep-navy premium hero — scoped to Project detail + Building family detail only
   (both opt in via .pd-hero--premium). Matches the Test Execution hero palette and the
   shared --nx-hero-grad token; other .pd-hero consumers (Users/Accounts/RFI/masters) unchanged. */
.nx-app .pd-hero.pd-hero--premium { background: var(--nx-hero-grad); }
.nx-app .pd-hero::before { content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 70% 40%, rgba(21,134,216,0.15) 0%, transparent 60%);
  animation: pd-aurora 8s ease-in-out infinite; }
.nx-app .pd-hero__top { margin-bottom: var(--sp-2); position: relative; z-index: 1; }
.nx-app .pd-hero__row { position: relative; z-index: 1; }

/* Back link focus ring */
.nx-app .pd-back { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15);
  color: #fff; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(4px);
  transition: background var(--duration-normal) var(--ease); text-decoration: none; }
.nx-app .pd-back:hover { background: rgba(255,255,255,0.25); color: #fff; }
.nx-app .pd-back:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 3px; border-radius: 8px; }
.nx-app .pd-back svg { width: 14px; height: 14px; }

/* 2 ── Hero icon: frosted glass box */
.nx-app .pd-hero__row { display: flex; align-items: center; gap: var(--sp-4); }
.nx-app .pd-hero__icon { width: 58px; height: 58px; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,0.14); border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 4px 20px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.3), 0 0 0 1px rgba(21,134,216,.3); }
.nx-app .pd-hero__title { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: #fff; letter-spacing: -0.3px; }
.nx-app .pd-hero__chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.nx-app .pd-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92); padding: 3px 11px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 500; border: 1px solid rgba(255,255,255,0.18); }
.nx-app .pd-chip--status { background: rgba(16,124,16,0.3); border-color: rgba(16,124,16,0.5); }
.nx-app .pd-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; flex-shrink: 0; }
.nx-app .pd-chip--status.pd-chip--rfi-status .pd-chip__dot { animation: none; }
.nx-app .pd-chip--rfi-draft { background: rgba(96,94,92,.34); border-color: rgba(200,198,196,.55); }
.nx-app .pd-chip--rfi-draft .pd-chip__dot { background: #C8C6C4; }
.nx-app .pd-chip--rfi-gc-review { background: rgba(181,100,0,.38); border-color: rgba(251,191,36,.62); }
.nx-app .pd-chip--rfi-gc-review .pd-chip__dot { background: #FBBF24; }
.nx-app .pd-chip--rfi-responders-review { background: rgba(92,46,145,.42); border-color: rgba(196,181,253,.62); }
.nx-app .pd-chip--rfi-responders-review .pd-chip__dot { background: #C4B5FD; }
.nx-app .pd-chip--rfi-closed { background: rgba(16,124,16,.36); border-color: rgba(74,222,128,.58); }
.nx-app .pd-chip--rfi-closed .pd-chip__dot { background: #4ADE80; }
.nx-app .pd-chip--issue-status .pd-chip__dot { animation: none; }
.nx-app .pd-chip--issue-new { background: rgba(96,94,92,.34); border-color: rgba(200,198,196,.55); }
.nx-app .pd-chip--issue-new .pd-chip__dot { background: #C8C6C4; }
.nx-app .pd-chip--issue-progress { background: rgba(0,120,212,.38); border-color: rgba(96,165,250,.65); }
.nx-app .pd-chip--issue-progress .pd-chip__dot { background: #60A5FA; }
.nx-app .pd-chip--issue-fixed { background: rgba(92,46,145,.42); border-color: rgba(196,181,253,.62); }
.nx-app .pd-chip--issue-fixed .pd-chip__dot { background: #C4B5FD; }
.nx-app .pd-chip--issue-verified { background: rgba(16,124,16,.36); border-color: rgba(74,222,128,.58); }
.nx-app .pd-chip--issue-verified .pd-chip__dot { background: #4ADE80; }
.nx-app .pd-chip--issue-rejected { background: rgba(196,43,28,.42); border-color: rgba(252,165,165,.68); }
.nx-app .pd-chip--issue-rejected .pd-chip__dot { background: #FCA5A5; }
.nx-app .pd-chip--issue-closed { background: rgba(5,99,51,.5); border-color: rgba(34,197,94,.7); }
.nx-app .pd-chip--issue-closed .pd-chip__dot { background: #22C55E; }
.nx-app .pd-chip--issue-cancelled { background: rgba(50,49,48,.48); border-color: rgba(161,159,157,.62); }
.nx-app .pd-chip--issue-cancelled .pd-chip__dot { background: #A19F9D; }

/* 3 ── Status dot pulse ring for "In Progress" */
@keyframes pd-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 60%{ box-shadow: 0 0 0 5px rgba(52,211,153,0); } }
.nx-app .pd-chip--status .pd-chip__dot { animation: pd-pulse 2.4s ease infinite; }

/* ── Project Details – Tab bar (flush below hero, no gap/border) ── */
.nx-app .pd-banners { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-1) var(--sp-8) 0; padding: 0; }
.nx-app .pd-banners--inset { margin: 0 16px 12px; }
.nx-app .pd-banners--surface { margin-left: var(--sp-4); margin-right: var(--sp-4); }
.nx-app .issue-ncr-designation { margin: var(--sp-4) 0 0; }
.nx-app .pd-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-family: var(--font); }
.nx-app .pd-banner__body { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-app .pd-banner__body > svg { flex-shrink: 0; }
.nx-app .pd-banner--warning { background: #fff4ce; border: 1px solid #f0d060; color: #6b4f00; }
.nx-app .pd-banner--info { background: #dff6dd; border: 1px solid #6fd987; color: #1e5128; }
.nx-app .pd-banner__close { background: none; border: none; cursor: pointer; font-size: 14px; color: inherit; padding: 0 2px; line-height: 1; opacity: .7; }
.nx-app .pd-banner__close:hover { opacity: 1; }
.nx-app .pd-tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  background: var(--bg-card); border: 1px solid var(--border-default); border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md); margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-xs); padding: 0 var(--sp-3); }
.nx-app .pd-tabs::-webkit-scrollbar { display: none; }
/* Standalone variant — a self-contained top menu bar (not attached beneath a hero). */
.nx-app .pd-tabs--standalone { border-top: 1px solid var(--border-default);
  border-radius: var(--r-md); }
.nx-app .pd-tab { display: inline-flex; align-items: center; gap: 6px; padding: 11px 13px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap;
  border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer; transition: color 0.15s; }
.nx-app .pd-tab:hover:not(.pd-tab--disabled) { color: var(--brand-700); }
.nx-app .pd-tab--active { color: var(--brand-700); border-bottom-color: var(--brand-600); font-weight: 600; }
.nx-app .pd-tab--disabled { color: var(--text-tertiary); cursor: default; opacity: .5; }
.nx-app .pd-tab:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; border-radius: 2px; }
.nx-app .pd-tab--disabled:focus-visible { outline: none; }
.nx-app .pd-tab__icon { flex-shrink: 0; color: inherit; }
.nx-app .pd-tab__badge { display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text-secondary); border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; min-width: 20px; height: 18px; padding: 0 5px; }
.nx-app .pd-tab--active .pd-tab__badge { background: var(--brand-100); color: var(--brand-700); }

/* ── Building Areas sub-tab strip (Building / Tranche / Loop / Area / Sub area / Rooms / SKIDs).
   Borderless tabs: each carries a local --pill-accent (an existing token, no hardcoded hex) used to
   tint its icon; the active tab fills with that accent. ── */
.nx-app .pd-areanav { display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  padding: var(--sp-2) var(--sp-3); margin: 0 var(--sp-4) var(--sp-1); background: var(--bg-card);
  border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.nx-app .pd-areanav--admin-types { margin-top: var(--sp-1); margin-bottom: 0; }
.nx-app .pd-areapill { --pill-accent: var(--brand-600); display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--text-primary);
  white-space: nowrap; background: transparent; border: 1px solid transparent;
  border-radius: var(--r-md); cursor: pointer; transition: background .15s, color .15s; }
.nx-app .pd-areapill:hover:not(.pd-areapill--disabled):not(.pd-areapill--active) { background: var(--gray-100); }
.nx-app .pd-areapill--active { color: #fff; background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%);
  border-color: transparent; font-weight: 600; }
.nx-app .pd-areapill--disabled { color: var(--text-tertiary); cursor: default; opacity: .55; }
.nx-app .pd-areapill:focus-visible { outline: 2px solid var(--pill-accent); outline-offset: 2px; }
.nx-app .pd-areapill--disabled:focus-visible { outline: none; }
.nx-app .pd-areapill__icon { flex-shrink: 0; color: var(--pill-accent); }
.nx-app .pd-areapill--active .pd-areapill__icon { color: #fff; }
.nx-app .pd-areapill__label { color: inherit; }
.nx-app .pd-areapill__badge { display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-200); color: var(--text-secondary); border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; min-width: 20px; height: 18px; padding: 0 6px; }
.nx-app .pd-areapill--active .pd-areapill__badge { background: rgba(255,255,255,.25); color: #fff; }
/* Per-tab accents using existing tokens (matches the colored icons in the spec) */
.nx-app .pd-areapill--building { --pill-accent: var(--brand-600); }
.nx-app .pd-areapill--tranche  { --pill-accent: var(--purple-500); }
.nx-app .pd-areapill--loop     { --pill-accent: var(--teal-500); }
.nx-app .pd-areapill--area     { --pill-accent: var(--warning-500); }
.nx-app .pd-areapill--subarea  { --pill-accent: var(--info-500); }
.nx-app .pd-areapill--rooms    { --pill-accent: var(--accent-push-requests); }
.nx-app .pd-areapill--skids    { --pill-accent: var(--accent-test-scripts); }
.nx-app .pd-areanav__panel { min-height: 0; }
/* GridScrollFitting - the visible Building-areas sub-tab panel fills the remaining height as a flex
   column so the grid inside (BuildingGrid / AreaGrid) gets a bounded height and scrolls internally
   (sticky headers + thin scrollbar), matching the Equipment tab. Without this the grid is wrapped one
   level deeper than Equipment, so monitor-fitting never reached it. */
.nx-app .pd-areanav__panel:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* GridScrollFitting - exception for any right-docked drawer opened over a Project details grid tab:
   Import from Excel (the shared NexusDrawer, which insets .page-scroll by 500px) and the create /
   edit drawers (.nx-create-drawer, and the Team tab's .nx-team-panel, which shift .main by 500px
   instead). Either way the narrower page
   wraps the main pill strip onto extra rows and stacks the toolbars taller, so the grid's flex:1
   share collapses to near-zero and monitor fitting (overflow:hidden) leaves no way to reach it. Give
   the grid a usable height floor and let the visible tabpanel scroll, so the grid stays reachable and
   keeps its own internal scroll and sticky headers.
   The scroll deliberately sits on the tabpanel rather than .page-scroll: .page-scroll is inset with
   padding-right, so its scrollbar would land underneath the drawer, while the tabpanel lives inside
   that padding and its scrollbar stays visible beside the drawer.
   Scope note: .nx-projdetail-page is a Project details only marker, so this cannot reach any other
   page, and it changes no drawer's own open/close behaviour. On tabs with no grid (Home) the panel is
   not height-bounded, so overflow-y here is inert. */
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-pd-page--drawer-open:not([hidden] *), .nx-create-drawer:not([hidden] *), .nx-team-panel:not([hidden] *)) section[role="tabpanel"]:not([hidden]) {
  overflow-y: auto;
}
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-pd-page--drawer-open:not([hidden] *), .nx-create-drawer:not([hidden] *), .nx-team-panel:not([hidden] *)) section[role="tabpanel"]:not([hidden]) > .pd-areanav__panel:not([hidden]),
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-pd-page--drawer-open:not([hidden] *), .nx-create-drawer:not([hidden] *), .nx-team-panel:not([hidden] *)) section[role="tabpanel"]:not([hidden]) > .nexus-common-grid-host {
  min-height: 420px;
}

.nx-app .pd-state { padding: 40px; text-align: center; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg); }

/* ── Project Details – Summary cards (compact) ── */
/* Inset the Home-tab content slightly from the rounded page-scroll panel so the summary cards,
   Project Details, Project Team and Building Areas panels don't stick to the outer panel border.
   The hero banner and the tab bar stay full-bleed. */
.nx-app #main-tabpanel-home { padding: 4px 16px 16px; }
.nx-app .pd-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); align-items: stretch;
  overflow: visible; }
@media (max-width: 1300px) { .nx-app .pd-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .nx-app .pd-cards { grid-template-columns: repeat(2, 1fr); } }
/* 4 ── Card hover: soft glow border instead of aggressive 3D tilt */
.nx-app .pd-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg);
  padding: 8px 10px; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
  overflow: visible; }
.nx-app .pd-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-100);
  box-shadow: var(--shadow-md); }
/* Freeze card lift while equipment dropdown is open so it can't jump */
.nx-app .pd-card--no-lift,
.nx-app .pd-card--no-lift:hover { transform: none !important; }
.nx-app .pd-card__head { display: flex; align-items: center; gap: 10px; }
.nx-app .pd-card__iconbox { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; flex-shrink: 0; }
.nx-app .pd-card__iconbox--blue   { background: var(--info-50); color: var(--info-700); }
.nx-app .pd-card__iconbox--purple { background: var(--purple-50); color: var(--purple-500); }
.nx-app .pd-card__iconbox--amber  { background: var(--warning-50); color: var(--warning-700); }
.nx-app .pd-card__iconbox--teal   { background: var(--teal-50); color: var(--teal-700); }
.nx-app .pd-card__iconbox--green  { background: var(--success-50); color: var(--success-500); }
.nx-app .pd-card__title { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.nx-app .pd-card__desc { font-size: 11px; color: var(--text-secondary); margin: 0; line-height: 1.3; }
/* Metric row: label left, big number right */
.nx-app .pd-card__metric { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.nx-app .pd-card__num { font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1; font-family: var(--font); }
.nx-app .pd-card__label { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
/* Progress bar */
.nx-app .pd-bar-wrap { background: var(--gray-300); border-radius: var(--r-full); height: 4px; overflow: hidden; }
.nx-app .pd-bar { height: 4px; border-radius: var(--r-full); }
.nx-app .pd-bar--purple { background: linear-gradient(90deg,#7C3AED,#A78BFA); }
.nx-app .pd-bar--amber  { background: linear-gradient(90deg,#F59E0B,#FBBF24); }
.nx-app .pd-bar--teal   { background: linear-gradient(90deg,#0d7377,#14b8a6); }
/* 5 ── Bar fill animation: scaleX from 0→1 on page load */
@keyframes pd-seg-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
/* Segmented bar */
.nx-app .pd-bar-wrap--segmented { display: flex; gap: 2px; background: var(--gray-300); overflow: hidden; }
.nx-app .pd-bar__seg { height: 4px; border-radius: var(--r-full); min-width: 0; transition: flex 0.3s;
  transform-origin: left center; animation: pd-seg-grow 0.65s cubic-bezier(.22,.61,.36,1) both; }
.nx-app .pd-bar-wrap--segmented .pd-bar__seg:nth-child(1) { animation-delay: 0.15s; }
.nx-app .pd-bar-wrap--segmented .pd-bar__seg:nth-child(2) { animation-delay: 0.32s; }
.nx-app .pd-bar-wrap--segmented .pd-bar__seg:nth-child(3) { animation-delay: 0.48s; }
.nx-app .pd-bar-wrap:not(.pd-bar-wrap--segmented) .pd-bar__seg { animation-delay: 0.2s; }
.nx-app .pd-bar__seg--g     { background: var(--chart-success); }
.nx-app .pd-bar__seg--y     { background: var(--warning-500); }
.nx-app .pd-bar__seg--n     { background: var(--purple-500); }
/* Fluent v9 chart palette */
.nx-app .pd-bar__seg--blue  { background: var(--chart-blue); }
.nx-app .pd-bar__seg--grape { background: var(--chart-grape); }
.nx-app .pd-bar__seg--teal  { background: var(--chart-teal); }
.nx-app .pd-bar__seg--corn  { background: var(--brand-700); }
.nx-app .pd-bar__seg--iris  { background: var(--chart-iris); }
.nx-app .pd-bar__seg--navy  { background: var(--brand-800); }
.nx-app .pd-bar__seg--gray  { background: var(--chart-neutral); }
/* Rows (assigned-to breakdown) */
.nx-app .pd-card__rows { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 3px; }
.nx-app .pd-card__rows li { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); }
.nx-app .pd-card__rows strong { color: var(--text-primary); font-weight: 600; }
/* Legend — horizontal inline dots */
.nx-app .pd-card__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nx-app .pd-card__legend li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.nx-app .pd-card__legend strong { color: var(--text-primary); font-weight: 700; font-size: 13px; margin-left: 1px; }
.nx-app .pd-card__legend--stack { flex-direction: column; align-items: flex-start; }
.nx-app .pd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.nx-app .pd-dot--g      { background: var(--chart-success); }
.nx-app .pd-dot--y      { background: var(--warning-500); }
.nx-app .pd-dot--n      { background: var(--purple-500); }
/* Fluent v9 cool-tone palette — safe for charts (no red/yellow) */
.nx-app .pd-dot--blue   { background: var(--chart-blue); }
.nx-app .pd-dot--grape  { background: var(--chart-grape); }
.nx-app .pd-dot--teal   { background: var(--chart-teal); }
.nx-app .pd-dot--corn   { background: var(--brand-700); }
.nx-app .pd-dot--iris   { background: var(--chart-iris); }
.nx-app .pd-dot--navy   { background: var(--brand-800); }
.nx-app .pd-dot--gray   { background: var(--chart-neutral); }
.nx-app .pd-card__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; padding-top: 3px; }
/* Search input inside equipment card */
.nx-app .pd-search { display: flex; align-items: center; gap: 6px; background: var(--bg-subtle);
  border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 6px 10px; }
.nx-app .pd-search__icon { color: var(--text-tertiary); flex-shrink: 0; }
.nx-app .pd-search__input { flex: 1; border: none; background: none; font-size: 12px; color: var(--text-primary);
  outline: none; min-width: 0; }
.nx-app .pd-search__input::placeholder { color: var(--text-tertiary); }
.nx-app .pd-search:focus-within { border-color: var(--brand-500); box-shadow: var(--shadow-ring); }
/* Buttons */
.nx-app .pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 3px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; cursor: pointer; border: none;
  transition: background .2s, box-shadow .2s, transform .1s; }
.nx-app .pd-btn:hover:not(:disabled) { transform: translateY(-1px); }
.nx-app .pd-btn--primary { background: #eff6fc; color: #0078d4; border: 1px solid #cce0f5; }
.nx-app .pd-btn--primary:hover { background: #ddeeff; box-shadow: 0 2px 8px rgba(0,120,212,.15); }
.nx-app .pd-btn--ghost  { background: #f5f5f5; color: var(--text-secondary); border: 1px solid var(--border-default); }
.nx-app .pd-btn--ghost:hover  { background: var(--bg-subtle); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.nx-app .pd-btn--block  { width: 100%; }

/* ── Project Details – Sub-tabs and layout ── */
.nx-app .pd-subtabs { display: flex; gap: var(--sp-4); border-bottom: 1px solid var(--border-default); margin-bottom: var(--sp-4); padding-left: 23px; }
/* pd-subtab is now a <button> — reset browser defaults to match original span look */
.nx-app .pd-subtab { padding: 8px 2px; font-size: 13px; font-weight: 600; color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  appearance: none; background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer; font-family: inherit; line-height: inherit; outline-offset: 2px; }
.nx-app .pd-subtab:focus-visible { outline: 2px solid var(--brand-600); border-radius: 2px; }
.nx-app .pd-subtab--active { color: var(--brand-700); border-bottom-color: var(--brand-600); }
.nx-app .pd-subtab--disabled { cursor: default; opacity: .45; }
.nx-app .pd-subtab--disabled:focus-visible { outline: none; }

.nx-app .pd-layout { display: grid; grid-template-columns: 1fr 390px; gap: var(--sp-5); align-items: start; }
/* Full-width variant: building-family Details tab has no right sidebar, so the Details panel spans
   the full row and its right edge aligns with the summary-cards (.pd-scards) row above it. */
.nx-app .pd-layout--full { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .nx-app .pd-layout { grid-template-columns: 1fr; } }
/* Full-width variant for detail pages with no right-side aside/tree (e.g. Item Master):
   the main content spans the full page width instead of leaving the 390px column empty. */
.nx-app .pd-layout--full { grid-template-columns: 1fr; }
.nx-app .pd-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

/* 6 ── Panel: top-only color-coded accent line (no left border) */
.nx-app .pd-panel { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden; }
/* Allow an inline dropdown (NexusFormMultiSelect .nfl__menu, or a legacy .pd-multiselect) opened inside a
   panel — e.g. the Category cell in the Project Access grid — to escape the panel's overflow clip so its
   options are fully visible above the grid instead of being cut off. Only relaxes while a menu is open. */
.nx-app .pd-panel:has(.nfl__menu),
.nx-app .pd-panel:has(.pd-multiselect.is-open),
.nx-app .pd-panel:has(.ud-cat-dd--open),
.nx-app .pd-panel:has(.col-menu) { overflow: visible; }
/* The attachments tab is hosted inside a .pd-panel on Issues and RFIs. The clip here defeated every
   escaping element the tab owns - the AI summary popover, the column menu, and (before it was moved to
   fixed) the staged-files commit bar, which resolved its stickiness against a box that never scrolls and
   so never moved at all. The tab draws its own bordered surfaces, so it needs no clipping from the panel. */
.nx-app .pd-panel:has(.nx-attach) { overflow: visible; }
/* Entity-scoped summary cards (Equipment / RFIs / Open Issues) on building-family detail pages.
   Container only — the cards themselves reuse the shared .pd-card styles from the project home.
   No horizontal margin so the row's left edge aligns with the Details card (.pd-layout) below. */
.nx-app .pd-scards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4); margin: 0 0 var(--sp-4); align-items: stretch; }
@media (max-width: 900px) { .nx-app .pd-scards { grid-template-columns: 1fr; } }
/* 3-up summary card row (Equipment details tab: RFIs / Issues / Attachments). */
.nx-app .pd-scards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .nx-app .pd-scards--3 { grid-template-columns: 1fr; } }
/* Container-query responsiveness for the Equipment Details tab. .eq-body establishes an inline-size
   container ("eqdetail"), so these reflow to the actual available width of the details section - which
   shrinks when an edit drawer squeezes it - not just the viewport width. When narrow, the summary row
   drops the Attachments card to a second row (3 -> 2 columns) and the Details/Location/Turnover panels
   take the full width with the Building Areas card wrapping below (2 -> 1 column). */
@container eqdetail (max-width: 820px) {
  .nx-app .pd-scards--3 { grid-template-columns: repeat(2, 1fr); }
  .nx-app .pd-layout { grid-template-columns: 1fr; }
}
@container eqdetail (max-width: 520px) {
  .nx-app .pd-scards--3 { grid-template-columns: 1fr; }
  .nx-app .pd-scards { grid-template-columns: 1fr; }
}
/* Key/value legend variant — label left, value right, one per line. */
.nx-app .pd-card__legend--kv li { display: flex; justify-content: space-between; width: 100%; gap: var(--sp-3); }
.nx-app .pd-card__legend--kv li span { color: var(--text-secondary); }
/* Right column wrapper — align top edge with the main column. */
.nx-app .pd-aside { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

/* ── Building Areas tree card (Equipment details tab) ── */
/* Deliberately not a scroll container: the tree below owns the height cap and the scrollbar.
   Capping the body too wrapped a second scrollbar around the project row. Note that setting
   only overflow-x here would promote overflow-y from visible to auto and bring it back. */
.nx-app .pd-areas__body { overflow: visible; }
.nx-app .pd-areas__project { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700;
  font-size: 13px; color: var(--text-primary); padding: 2px 0 var(--sp-3); }
.nx-app .pd-areas__project svg { color: var(--brand-600, #0f6cbd); flex-shrink: 0; }
.nx-app .pd-areas__foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.nx-app .pd-panel__title .pd-areas__badge { width: 26px; height: 26px; }
.nx-app .pd-tree { list-style: none; margin: 0; padding: 0; }
.nx-app .pd-tree__item { margin: 0; }
.nx-app .pd-tree__row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: var(--r-sm, 4px);
  cursor: default; }
.nx-app .pd-tree__row:hover { background: var(--bg-subtle); }
.nx-app .pd-tree__toggle { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; border: none; background: transparent; color: var(--text-secondary);
  cursor: pointer; border-radius: 3px; }
.nx-app .pd-tree__toggle:hover { background: rgba(0,0,0,.06); color: var(--text-primary); }
.nx-app .pd-tree__toggle svg { transition: transform .15s ease; }
.nx-app .pd-tree__toggle--open svg { transform: rotate(90deg); }
.nx-app .pd-tree__toggle--leaf { cursor: default; }
.nx-app .pd-tree__toggle--leaf:hover { background: transparent; }
.nx-app .pd-tree__icon { display: inline-flex; align-items: center; color: var(--brand-600, #0f6cbd); flex-shrink: 0; }
.nx-app .pd-tree__label { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.nx-app .pd-tree__spin { font-size: 13px; color: var(--text-secondary); margin-left: 4px; }
.nx-app .pd-tree__empty { font-size: 12px; color: var(--text-secondary); font-style: italic; padding: 2px 4px; }
/* Details panel — brand blue top line */
.nx-app .pd-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #0078d4 0%, rgba(0,120,212,0) 70%);
  border-radius: var(--r-lg) var(--r-lg) 0 0; pointer-events: none; }
/* Team panel — teal top line */
.nx-app .pd-panel--team::after { background: linear-gradient(90deg, #038387 0%, rgba(3,131,135,0) 70%); }
/* Admin detail related-record panels — Fluent indigo treatment shared across the admin family. */
.nx-app .pd-panel--admin-associated {
  --admin-grid-header-bg: #F0F0FA;
  --admin-grid-header-text: #3F3F8F;
  --admin-grid-header-hover-bg: #E4E4F5;
  --admin-grid-header-hover-text: #33358A;
  --admin-grid-row-even-bg: #F7F7FC;
  --admin-grid-row-even-hover-bg: #EEEEFA;
  --admin-grid-row-odd-hover-bg: #F3F3FB;
}
.nx-app .pd-panel--admin-associated::after {
  background: linear-gradient(90deg, #5B5FC7 0%, rgba(91,95,199,0) 70%);
}
.nx-app .pd-panel--admin-associated table.tbl thead th {
  background: var(--admin-grid-header-bg);
  color: var(--admin-grid-header-text);
  border-bottom-color: rgba(91,95,199,0.3);
  font-weight: 600;
}
.nx-app .pd-panel--admin-associated table.tbl thead th:hover {
  background: var(--admin-grid-header-hover-bg);
  color: var(--admin-grid-header-hover-text);
}
.nx-app .pd-panel--admin-associated table.tbl tbody tr:nth-child(even) { background: var(--admin-grid-row-even-bg); }
.nx-app .pd-panel--admin-associated table.tbl tbody tr:nth-child(even):hover { background: var(--admin-grid-row-even-hover-bg); }
.nx-app .pd-panel--admin-associated table.tbl tbody tr:nth-child(odd):hover { background: var(--admin-grid-row-odd-hover-bg); }
.nx-app .pd-panel--admin-associated .search-input:focus-within {
  border-color: #5B5FC7;
  box-shadow: 0 0 0 3px rgba(91,95,199,0.15);
}
.nx-app .pd-panel--admin-associated .search-input--active { border-color: #5B5FC7; }
.nx-app .pd-panel--admin-associated .search-input:focus-within svg,
.nx-app .pd-panel--admin-associated .search-input--active svg { color: #5B5FC7; }
.nx-app .its-panel-search {
  align-items: center; background: var(--bg-elevated); border: 1.5px solid #c8c6c4; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06); color: var(--text-tertiary); display: flex; font-size: 13px;
  gap: 6px; min-width: 200px; max-width: 280px; padding: 5px 10px;
  transition: border-color 180ms ease, box-shadow 180ms ease; }
.nx-app .its-panel-search:focus-within {
  border-color: #5B5FC7 !important;
  box-shadow: 0 0 0 3px rgba(91,95,199,0.15), 0 1px 3px rgba(0,0,0,0.08) !important;
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px; }
.nx-app .its-panel-search--active {
  border-color: #5B5FC7;
  box-shadow: 0 0 0 2px rgba(91,95,199,0.1), 0 1px 3px rgba(0,0,0,0.08); }
.nx-app .its-panel-search__icon { color: var(--text-tertiary); flex: 0 0 auto; }
.nx-app .its-panel-search--active .its-panel-search__icon,
.nx-app .its-panel-search:focus-within .its-panel-search__icon { color: #5B5FC7; }
.nx-app .its-panel-search__input {
  background: transparent; border: 0 !important; box-shadow: none !important; color: var(--text-primary);
  flex: 1 1 auto; font-size: 13px; min-width: 0; outline: 0 !important; padding: 0; }
.nx-app .its-panel-search__input:focus,
.nx-app .its-panel-search__input:focus-visible {
  border: 0 !important; box-shadow: none !important; outline: 0 !important; }
.nx-app .its-panel-search__input::placeholder { color: var(--text-tertiary); }
.nx-app .its-panel-search__clear {
  align-items: center; background: transparent; border: 0; color: var(--text-secondary); cursor: pointer;
  display: inline-flex; justify-content: center; padding: 3px; }
.nx-app .its-panel-search__clear:hover { color: var(--text-primary); }
/* User detail: Project Access panel — teal top line (distinct from the blue User Details panel above it) */
.nx-app .pd-panel--projects::after { background: linear-gradient(90deg, #038387 0%, rgba(3,131,135,0) 70%); }
.nx-app .pd-panel__head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--sp-3); }
.nx-app .pd-panel__title { display: flex; align-items: center; gap: var(--sp-2); font-size: 11px; font-weight: 700;
  color: var(--text-primary); margin: 0; }
.nx-app .pd-panel__title-btn { display: inline-flex; align-items: center; gap: var(--sp-2); background: transparent;
  border: none; padding: 0; margin: 0; font: inherit; color: inherit; }
.nx-app .pd-panel__title--toggle { cursor: pointer; user-select: none; }
.nx-app .pd-panel__title--toggle:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; border-radius: var(--r-sm); }
/* Full-row toggle: whole header (not just the title text) toggles the section. */
.nx-app .pd-panel__head--toggle { cursor: pointer; user-select: none; }
.nx-app .pd-panel__head--toggle:hover { background: var(--bg-subtle); }
.nx-app .pd-panel__head--toggle:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: var(--r-sm); }
.nx-app .pd-panel__chevron { color: var(--text-secondary); flex-shrink: 0; transition: transform .15s ease; }
.nx-app .pd-panel__chevron--open { transform: rotate(90deg); }
/* Header meta: field count + Edit affordance, pushed to the right of the section title. */
.nx-app .pd-panel__head--toggle .pd-panel__title { margin-right: auto; }
.nx-app .pd-panel__collapse-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-secondary);
  cursor: pointer; font-size: 20px; line-height: 1;
}
.nx-app .pd-panel__collapse-button:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nx-app .pd-panel__collapse-button:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.nx-app .pd-panel__toggle-surface {
  position: absolute; inset: -4px -6px 4px; z-index: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
}
.nx-app .pd-panel__toggle-surface:hover { background: var(--bg-subtle); }
.nx-app .pd-panel__toggle-surface:focus-visible {
  outline: 2px solid var(--brand-600); outline-offset: 2px;
}
.nx-app .pd-panel__head > :not(.pd-panel__toggle-surface) { position: relative; z-index: 1; }
.nx-app .pd-panel__head > .pd-panel__title,
.nx-app .pd-panel__head .pd-panel__count { pointer-events: none; }
.nx-app .pd-panel__head .pd-panel__actions { pointer-events: none; }
/* Restore pointer events for every interactive control in the header actions slot (not just
   <button>). Panels place search boxes and links in LeadingActions; an <input> there would
   otherwise inherit pointer-events:none from the container and become unclickable. The
   [role="search"] wrapper is included so the whole search pill (padding + icon) is clickable. */
.nx-app .pd-panel__head .pd-panel__actions button,
.nx-app .pd-panel__head .pd-panel__actions a,
.nx-app .pd-panel__head .pd-panel__actions input,
.nx-app .pd-panel__head .pd-panel__actions select,
.nx-app .pd-panel__head .pd-panel__actions textarea,
.nx-app .pd-panel__head .pd-panel__actions [role="search"] { pointer-events: auto; }
.nx-app .pd-panel__meta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.nx-app .pd-panel__count { font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.nx-app .pd-panel__edit { display: inline-flex; align-items: center; gap: var(--sp-1); background: transparent; border: none;
  color: var(--brand-600); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); }
.nx-app .pd-panel__edit:hover { background: var(--bg-subtle); color: var(--brand-700); }
.nx-app .pd-panel__edit:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.nx-app .pd-panel__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.nx-app .pd-panel__icon { color: var(--brand-600); }
.nx-app .pd-panel__count { font-size: 12px; font-weight: 600; color: var(--text-tertiary);
  background: var(--bg-subtle); padding: 2px 10px; border-radius: var(--r-full); }
.nx-app .pd-btn--sm { padding: 5px 10px; font-size: 12px; gap: 4px; }
/* Projects panel header: compact inline search + icon-only collapse chevron button. */
.nx-app .pd-search--head { padding: 4px 9px; min-width: 180px; max-width: 240px; }
.nx-app .pd-search--head .pd-search__input { font-size: 12px; }
.nx-app .pd-panel__collapse-btn { padding: 5px 7px; }
.nx-app .pd-panel__collapse-btn svg { transition: transform .18s ease; }
.nx-app .pd-panel__collapse-btn--collapsed svg { transform: rotate(180deg); }

.nx-app .pd-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); margin: 0; }
/* Project Details: responsive down-scaling for small / narrow screens (max-width 1100 / 900 / 700)
   so pd-* text and the fields grid stay readable and avoid cut-off. Mirrors the 1440 / 1920 up-scaling below. */
@media (max-width: 1100px) {
  .nx-app .pd-hero__title { font-size: 18px; }
  .nx-app .pd-tab { font-size: 12px; }
  .nx-app .pd-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nx-app .pd-hero__title { font-size: 16px; }
  .nx-app .pd-tab { font-size: 11.5px; }
  .nx-app .pd-field dt { font-size: 10px; }
  .nx-app .pd-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .nx-app .pd-hero__title { font-size: 14px; }
  .nx-app .pd-tab { font-size: 11px; }
  .nx-app .pd-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nx-app .pd-field { min-width: 0; }
.nx-app .pd-field--wide { grid-column: span 2; }
.nx-app .pd-field dt { font-size: 11px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 5px; }
.nx-app .pd-field dd { font-size: 11px; color: var(--text-primary); margin: 0; word-break: break-word; line-height: 1.4; }
.nx-app .pd-field dd.pd-val--empty { color: var(--text-tertiary); font-style: italic; }

/* Workflow cards use one text hierarchy across Issue and RFI action stages. */
.nx-app .nx-workflow-panel .pd-panel__title,
.nx-app .nx-workflow-panel .pd-field dd {
  color: var(--text-primary);
}
.nx-app .nx-workflow-panel .pd-field dt {
  color: var(--text-tertiary);
}
.nx-app .nx-workflow-panel .pd-field dd.pd-val--empty,
.nx-app .nx-workflow-panel .pd-panel__count {
  color: var(--text-tertiary);
}
.nx-app:not(.nx-app--dark) .nx-workflow-drawer .nec__select,
.nx-app:not(.nx-app--dark) .nx-workflow-drawer .nec__textarea {
  background: #fff;
}
.nx-app .nx-workflow-drawer .nec__label {
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--nx-type-field-label);
  font-weight: 600;
}
.nx-app .nx-workflow-drawer .nec__input,
.nx-app .nx-workflow-drawer .nec__select,
.nx-app .nx-workflow-drawer .nec__textarea {
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--nx-type-control);
}
.nx-app .nx-workflow-drawer .nec__grid--edit .nec__field:has(.nec__textarea) {
  grid-column: 1 / -1;
}
.nx-app .nx-workflow-drawer--comment-only .nec__textarea {
  min-height: 90px;
}
.nx-app .nx-workflow-drawer .nec__select--placeholder,
.nx-app .nx-workflow-drawer :is(.nec__input, .nec__textarea)::placeholder {
  color: var(--text-tertiary);
}
.nx-app .nx-workflow-drawer .nec__err {
  color: var(--danger-600);
  font-size: var(--nx-type-support);
}
.nx-app .nx-workflow-drawer .pd-drawer__saving {
  color: var(--text-secondary);
  font-size: var(--nx-type-support);
}
.nx-app .nx-workflow-drawer .pd-drawer__error {
  color: var(--danger-600);
  font-size: var(--nx-type-support);
}
.nx-app .nx-workflow-drawer .nec__select:focus,
.nx-app .nx-workflow-drawer .nec__select:focus-visible,
.nx-app .nx-workflow-drawer .nec__textarea:focus,
.nx-app .nx-workflow-drawer .nec__textarea:focus-visible {
  border-color: var(--brand-600, #0f6cbd);
  box-shadow: none !important;
  outline: none !important;
}

/* Reusable read-only detail table (e.g. User Onboarding project-membership list). New UI only. */
.nx-app .pd-simple-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nx-app .pd-simple-table thead th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: normal; text-transform: none;
  color: var(--text-tertiary); padding: 8px 12px; border-bottom: 1px solid var(--border-default);
}
.nx-app .pd-simple-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle, #f0eff1); color: var(--text-primary); vertical-align: middle; }
.nx-app .pd-simple-table tbody tr:last-child td { border-bottom: none; }
.nx-app--dark .pd-simple-table thead th { border-bottom-color: #33415a; }
.nx-app--dark .pd-simple-table tbody td { border-bottom-color: #1f2a3d; color: #F7F7F7; }

/* ===== New UI detail-grid column headers (User Detail / User Onboarding project grids) =====
   These read-only tables (marked .pd-grid-table) reuse the main grid's col-head / col-menu markup
   (NexusColHeader component) for per-column sort + a client-side "contains" filter. The base
   col-head / col-menu styles are defined higher up (shared with table.tbl); the rules below
   (a) upgrade the small uppercase header to the main grid's header font, and (b) port the
   hover-reveal + clip-escape behaviour that was previously scoped only to table.tbl. */
.nx-app .pd-simple-table.pd-grid-table thead th {
  font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none;
  color: #424242; padding: 10px 12px; overflow: visible; cursor: default;
}
.nx-app--dark .pd-simple-table.pd-grid-table thead th { color: #F7F7F7; }
/* Reveal the sort caret + kebab on header hover / keyboard focus (their base state is opacity:0). */
.nx-app .pd-grid-table thead th:hover .col-head__menu-btn,
.nx-app .pd-grid-table thead th:focus-within .col-head__menu-btn { opacity: 1; }
.nx-app .pd-grid-table thead th:hover .col-head__caret { opacity: 1; }
/* Stack a header whose menu is open above its sibling cells so the popup is not covered. */
.nx-app .pd-grid-table thead th:has(.col-menu) { z-index: 30; }
/* Empty-result row: keep the column headers (and their filter menus) on screen when a filter
   excludes every row, so the filter can still be cleared. Spans the full grid width. */
.nx-app .pd-grid-table__empty { text-align: center; padding: 28px 12px; color: var(--text-secondary); }
.nx-app--dark .pd-grid-table__empty { color: #b9c6d6; }

/* Match the User Information section's field font size (.pd-field dd: 12→13px@1440→14px@1920)
   on the project grid body/header cells, and give the row checkboxes a larger, easier-to-hit box
   proportional to that text (the generic-grid checkbox rule needs a .pd-grid ancestor these
   read-only tables don't have, so they otherwise fall back to the small browser default).
   Scoped to .pd-grid-table — used only by the User Detail / User Onboarding project grids. */
.nx-app .pd-grid-table tbody td { font-size: 12px; }
.nx-app .pd-grid-table .pd-grid__check { width: 44px; text-align: center; }
.nx-app .pd-grid-table .pd-grid__check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #0078d4; cursor: pointer; }
@media (min-width: 1440px) {
  .nx-app .pd-grid-table tbody td { font-size: 13px; }
  .nx-app .pd-simple-table.pd-grid-table thead th { font-size: 13px; }
}
@media (min-width: 1920px) {
  .nx-app .pd-grid-table tbody td { font-size: 14px; }
  .nx-app .pd-simple-table.pd-grid-table thead th { font-size: 14px; }
}

/* Sub-section heading inside a pd-panel (e.g. Availability / Safety groups) */
.nx-app .pd-subhead { font-size: 13px; font-weight: 700; color: var(--text-primary);
  margin: var(--sp-4) 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); }
.nx-app .pd-subhead:first-of-type { margin-top: 0; }
/* Stacked panels in the Details tab get breathing room between them */
#issue-tabpanel-details .pd-panel + .pd-panel { margin-top: 16px; }

/* ── Collapsible pd-panel (Issue Details / Availability & Safety / Action Center sections) ── */
.nx-app .pd-panel__iconbox { width: 30px; height: 30px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.nx-app .pd-panel__iconbox--blue { background: linear-gradient(135deg,#0078d4,#2b88d8); }
.nx-app .pd-panel__iconbox--indigo { background: linear-gradient(135deg,#5b5fc7,#7b7ed6); }
.nx-app .pd-panel__iconbox--amber { background: linear-gradient(135deg,#b56400,#eaa300); }
.nx-app .pd-panel__iconbox--green { background: linear-gradient(135deg,#107C10,#13a10e); }
.nx-app .pd-panel__iconbox--purple { background: linear-gradient(135deg,#7c3aed,#9333ea); }
.nx-app .pd-panel__iconbox--gray { background: linear-gradient(135deg,#6b7280,#8a8f98); }
.nx-app .pd-panel__iconbox svg { display: block; }
.nx-app .pd-panel--collapsible .pd-panel__head { cursor: pointer; }
.nx-app .pd-panel--collapsible .pd-panel__head:hover { background: var(--bg-subtle); }
.nx-app .pd-panel--collapsed .pd-panel__head { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.nx-app .pd-panel--collapsed .pd-panel__body { display: none; }

/* ── Issue hero: Days Open card ── */
.nx-app .pd-hero__daysopen { margin-left: auto; flex-shrink: 0; text-align: center; position: relative; z-index: 1;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: 14px;
  padding: 10px 22px; box-shadow: 0 4px 20px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.3); min-width: 96px; }
.nx-app .pd-hero__daysopen-num { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.5px; }
.nx-app .pd-hero__daysopen-lbl { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85);
  margin-top: 5px; text-transform: none; }

/* ── Issue detail: command toolbar card ── */
.nx-app .pd-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg);
  padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin: 0 16px 12px; }
.nx-app .pd-toolbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nx-app .pd-toolbar__sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--border-strong); margin: 0 4px; }
.nx-app .pd-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: var(--r-md); border: 1.5px solid var(--border-strong); background: var(--bg-card);
  color: var(--text-primary); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04); white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s; }
.nx-app .pd-toolbar__btn:hover { background: var(--bg-subtle); border-color: var(--brand-600); color: var(--brand-700);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
.nx-app .pd-toolbar__btn:disabled { opacity: 0.5; cursor: default; background: var(--bg-card); border-color: var(--border-default);
  color: var(--text-primary); box-shadow: none; transform: none; }
.nx-app .pd-toolbar__btn--danger { color: var(--text-primary); border-color: var(--border-strong); }
.nx-app .pd-toolbar__btn--danger:hover { background: var(--bg-subtle); border-color: var(--brand-600); color: var(--brand-700); }
.nx-app .pd-toolbar__btn--warning { color: var(--warning-700); border-color: var(--warning-500); background: var(--warning-50); }
.nx-app .pd-toolbar__btn--warning:hover { color: var(--warning-700); border-color: var(--warning-700); background: var(--warning-50); }
.nx-app .pd-toolbar__badge { display: inline-grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center;
  border-radius: var(--r-full); color: #fff; background: var(--brand-600); font-size: var(--nx-type-badge); font-weight: 800; line-height: 1; }
.nx-app .pd-toolbar__icon { flex: 0 0 auto; }
.nx-app .pd-toolbar__icon--blue { color: var(--brand-600); }
.nx-app .pd-toolbar__icon--purple { color: var(--purple-500); }
.nx-app .pd-toolbar__icon--amber { color: var(--warning-700); }
.nx-app .pd-toolbar__icon--green { color: var(--success-500); }

/* ── Issue detail: Issue ID / Status / Days Open info strip ── */
.nx-app .pd-infostrip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 10px 18px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.nx-app .pd-infostrip__item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.nx-app .pd-infostrip__item--stacked { display: flex; align-items: stretch; flex-direction: column; gap: 6px; white-space: normal; }
.nx-app .pd-infostrip__row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.nx-app .pd-infostrip__row--question .pd-infostrip__value { font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.nx-app .pd-infostrip__sep { width: 1px; height: 16px; background: var(--border-strong); }
.nx-app .pd-infostrip__label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.nx-app .pd-infostrip__value { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.nx-app .pd-infostrip--spread { display: grid; grid-template-columns: 1fr auto 1fr; flex-wrap: nowrap; }
.nx-app .pd-infostrip--spread .pd-infostrip__item:nth-child(1) { justify-self: start; }
.nx-app .pd-infostrip--spread .pd-infostrip__item:nth-child(2) { justify-self: center; }
.nx-app .pd-infostrip--spread .pd-infostrip__item:nth-child(3) { justify-self: end; }
.nx-app .pd-infostrip--spread4 { display: grid; grid-template-columns: repeat(4, 1fr); flex-wrap: nowrap; }
.nx-app .pd-infostrip--spread4 .pd-infostrip__item:nth-child(1) { justify-self: start; }
.nx-app .pd-infostrip--spread4 .pd-infostrip__item:nth-child(2) { justify-self: center; }
.nx-app .pd-infostrip--spread4 .pd-infostrip__item:nth-child(3) { justify-self: center; }
.nx-app .pd-infostrip--spread4 .pd-infostrip__item:nth-child(4) { justify-self: end; }
.nx-app .pd-infostrip--response { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; }
.nx-app .pd-infostrip--response .pd-infostrip__item:nth-child(1) { justify-self: start; }
.nx-app .pd-infostrip--response .pd-infostrip__item:nth-child(2),
.nx-app .pd-infostrip--response .pd-infostrip__item:nth-child(3) { justify-self: center; }
.nx-app .pd-infostrip--response .pd-infostrip__item:nth-child(4) { justify-self: end; }
.nx-app .pd-infostrip--response .pd-infostrip__item--question { grid-column: 1 / -1; justify-self: stretch; white-space: normal; }
.nx-app .pd-infostrip--response .pd-infostrip__item--question .pd-infostrip__value {
  font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .nx-app .pd-infostrip--response { grid-template-columns: 1fr; }
  .nx-app .pd-infostrip--response .pd-infostrip__item,
  .nx-app .pd-infostrip--response .pd-infostrip__item--question { grid-column: auto; justify-self: start; }
}

/* Inline status badge used in the Details panel (reuses status-- colour classes) */
.nx-app .pd-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
  border-radius: var(--r-full); font-size: 12px; font-weight: 600; }
.nx-app .pd-status-badge .pd-dot { width: 6px; height: 6px; }
.nx-app .pd-status-badge.status--active   { background: rgba(16,124,16,.1);  color: #107C10; }
.nx-app .pd-status-badge.status--done     { background: rgba(0,120,212,.1);  color: #0078d4; }
.nx-app .pd-status-badge.status--review   { background: rgba(181,100,0,.1);  color: #b56400; }
.nx-app .pd-status-badge.status--inactive { background: rgba(164,38,44,.07); color: #a4262c; }
.nx-app .pd-status-badge.status--draft    { background: var(--bg-subtle);    color: var(--text-tertiary); }

/* Status dot colours matching each variant */
.nx-app .pd-status-badge.status--active   .pd-dot { background: #107C10; }
.nx-app .pd-status-badge.status--done     .pd-dot { background: #0078d4; }
.nx-app .pd-status-badge.status--review   .pd-dot { background: #f59e0b; }
.nx-app .pd-status-badge.status--inactive .pd-dot { background: #a4262c; }
.nx-app .pd-status-badge.status--draft    .pd-dot { background: var(--text-tertiary); }

/* Skeleton shimmer for card counts while loading */
@keyframes pd-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.nx-app .pd-card__num--skeleton {
  background: linear-gradient(90deg, var(--border-subtle) 25%, var(--bg-subtle) 50%, var(--border-subtle) 75%);
  background-size: 200% 100%; animation: pd-shimmer 1.5s infinite linear;
  border-radius: var(--r-sm); color: transparent; min-width: 44px; display: inline-block;
  height: 1em; vertical-align: middle; user-select: none; }

.nx-app .pd-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-4); }
@media (max-width: 900px) { .nx-app .pd-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .nx-app .pd-team { grid-template-columns: 1fr; } }
.nx-app .pd-team__item { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 6px 8px;
  border-radius: var(--r-sm); transition: background .15s; }
.nx-app .pd-team__item:hover { background: var(--bg-subtle); }
.nx-app .pd-team__av { width: 32px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center;
  background: #0078D4; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0;
  letter-spacing: normal; overflow: hidden; line-height: 1; box-shadow: 0 1px 3px rgba(0,120,212,.25);
  transition: box-shadow .2s, transform .2s; position: relative; }
.nx-app .pd-team__item:hover .pd-team__av { box-shadow: 0 0 0 3px rgba(0,120,212,.2), 0 2px 6px rgba(0,120,212,.25); transform: scale(1.07); }

/* Unassigned team role slots — shown (like classic) but visually muted */
.nx-app .pd-team__item--empty { opacity: 0.7; }
.nx-app .pd-team__av--empty { background: var(--gray-200, #e1dfdd); color: var(--text-tertiary, #8a8886); box-shadow: none; }
.nx-app .pd-team__item--empty .pd-team__name { color: var(--text-tertiary, #8a8886); font-style: italic; }
.nx-app .pd-team__item--empty:hover .pd-team__av { box-shadow: none; transform: none; }

/* 7 ── Presence dot (Teams-style) */
.nx-app .pd-team__presence { position: absolute; bottom: 0; right: 0; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid var(--bg-card); pointer-events: none; }
.nx-app .pd-team__presence--online  { background: #34D399; }
.nx-app .pd-team__presence--offline { background: #8a8886; }
.nx-app .pd-team__text { display: flex; flex-direction: column; min-width: 0; }
.nx-app .pd-team__role { font-size: 11px; color: #424242; font-weight: 600; text-transform: none; letter-spacing: normal; }
.nx-app .pd-team__name { font-size: 11px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Empty state — team / other panels */
.nx-app .pd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-5) 0; color: var(--text-tertiary); font-size: 13px; text-align: center; }
.nx-app .pd-empty svg { opacity: .35; }
  padding: var(--sp-4); box-shadow: var(--shadow-xs); position: sticky; top: var(--sp-4); }
.nx-app .pd-aside__title { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px !important; font-weight: 700; line-height: 1.4; margin: 0;
  color: var(--text-primary); margin: 0 0 var(--sp-3); }
.nx-app .pd-buildings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  max-height: 420px; overflow-y: auto; }
.nx-app .pd-buildings__item { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 6px; font-size: 13px;
  color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.nx-app .pd-buildings__item:last-child { border-bottom: none; }
.nx-app .pd-buildings__icon { color: var(--text-tertiary); }
.nx-app .pd-empty { font-size: 13px; color: var(--text-tertiary); margin: 0; }

/* ----- Tab badges ----- */
.nx-app .pd-tab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
  padding: 0 6px; margin-left: 6px; border-radius: var(--r-full); background: var(--gray-800); color: #fff;
  font-size: 11px; font-weight: 700; vertical-align: middle; }
.nx-app .pd-tab--active .pd-tab__badge { background: var(--brand-600); color: #fff; }
.nx-app--dark .pd-tab__badge { background: var(--gray-200); }

/* ----- Card redesign (search / bars / buttons / legend) ----- */
.nx-app .pd-card__desc { font-size: 12px; color: var(--text-tertiary); margin: 0; }
.nx-app .pd-card .pd-card__metric { justify-content: space-between; align-items: baseline; }

.nx-app .pd-search { display: flex; align-items: center; gap: var(--sp-2); background: var(--bg-subtle);
  border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 7px 10px; }
.nx-app .pd-search__icon { color: var(--text-tertiary); font-size: 13px; }
.nx-app .pd-search__input { border: none; background: transparent; outline: none; width: 100%; font-size: 13px;
  color: var(--text-primary); font-family: var(--font); }

/* Equipment live search dropdown */
@keyframes pd-dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.nx-app .pd-eq-search-wrap { position: relative; z-index: 200; margin-top: 8px; }
.nx-app .pd-eq-search-wrap .pd-form-control:focus,
.nx-app .pd-eq-search-wrap .pd-form-control:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
  outline: none;
}
.nx-app .pd-eq-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9999;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
  max-height: 220px; overflow-y: auto;
  animation: pd-dropdown-in .15s ease both; }
.nx-app .pd-eq-dropdown__item { padding: 8px 12px; font-size: 13px; cursor: pointer;
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
.nx-app .pd-eq-dropdown__item:last-child { border-bottom: none; }
.nx-app .pd-eq-dropdown__item:hover,
.nx-app .pd-eq-dropdown__item:focus { background: var(--bg-subtle); outline: none; }
.nx-app .pd-eq-dropdown__item--hint { color: var(--text-tertiary); cursor: default; font-style: italic; }

/* ===== My Imports premium modal (NexusMyImports) — mockup: projects-grid-product .eq-imports-* ===== */
.nx-app .nx-imports__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000;
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: pd-dropdown-in .15s ease both; }
.nx-app .nx-imports { position: relative;
  width: min(1040px, 100%); max-height: calc(100vh - 48px); z-index: 1001;
  display: flex; flex-direction: column; background: var(--bg-card, #fff);
  border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.28);
  animation: nx-imports-in .18s ease both; font-family: var(--font); }
@keyframes nx-imports-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
/* The My imports header carries the same chrome as the shared drawer (.pd-drawer__header), so the
   panel and the Import from Excel drawer it launches read as one family. The gradient below is a
   byte-for-byte copy of .pd-drawer__header, and the New import button reuses the drawer's primary
   footer gradient (.nec__btn--primary). Because the header is now dark, its text, icon tile and
   icon buttons switch to the white-on-blue treatment the drawer header already uses. */
.nx-app .nx-imports__head { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.45) 0%, transparent 55%),
    linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%); }
.nx-app .nx-imports__head-left { display: flex; align-items: center; gap: 12px; }
.nx-app .nx-imports__icon { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; }
.nx-app .nx-imports__title { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.nx-app .nx-imports__subtitle { margin: 2px 0 0; font-size: 12px; color: rgba(255,255,255,.85); }
.nx-app .nx-imports__head-actions { display: flex; align-items: center; gap: 8px; }
.nx-app .nx-imports__newbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 8px; cursor: pointer; border: 1px solid transparent; font-size: 13px; font-weight: 600;
  color: #fff; background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%);
  box-shadow: 0 2px 6px rgba(4,41,82,.35); transition: all .15s ease; }
.nx-app .nx-imports__newbtn:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%);
  box-shadow: 0 4px 10px rgba(4,41,82,.45); }
.nx-app .nx-imports__newbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nx-app .nx-imports__iconbtn { width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.nx-app .nx-imports__iconbtn:hover { background: rgba(255,255,255,.2); color: #fff; }
.nx-app .nx-imports__iconbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nx-app .nx-imports__stats { display: flex; gap: 12px; padding: 16px 22px;
  background: var(--bg-subtle, #FAFAFA); border-bottom: 1px solid var(--border-subtle); }
.nx-app .nx-imports__stat { flex: 1; text-align: center; padding: 12px; border-radius: 10px;
  background: var(--bg-card, #fff); border: 1px solid var(--border-subtle); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.nx-app .nx-imports__stat-num { font-size: 22px; font-weight: 800; line-height: 1; }
.nx-app .nx-imports__stat-label { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; font-weight: 500; }
.nx-app .nx-imports__table-wrap { padding: 12px 22px; display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.nx-app .nx-imports__state { padding: 32px 8px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.nx-app .nx-imports__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--nx-type-grid-cell); }
.nx-app .nx-imports__table thead th { padding: 10px 12px; text-align: left; font-weight: 600; font-size: var(--nx-type-grid-header);
  text-transform: none; letter-spacing: normal; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-default); background: var(--bg-subtle); position: sticky; top: 0; }
.nx-app .nx-imports__table thead th:first-child { border-radius: 8px 0 0 0; }
.nx-app .nx-imports__table thead th:last-child { border-radius: 0 8px 0 0; }
.nx-app .nx-imports__table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.nx-app .nx-imports__table tbody tr:hover td { background: #F0FDF4; }
.nx-app .nx-imports__table tbody tr:last-child td { border-bottom: none; }
.nx-app .nx-imports__file { display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
  color: #0f6cbd; background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.nx-app .nx-imports__file:hover span { text-decoration: underline; }
.nx-app .nx-imports__badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.nx-app .nx-imports__badge--success { background: #D1FAE5; color: #065F46; }
.nx-app .nx-imports__badge--progress { background: #FEF3C7; color: #92400E; }
.nx-app .nx-imports__badge--error { background: #FEE2E2; color: #991B1B; }
.nx-app .nx-imports__iconbtn-sm { width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-default); background: var(--bg-card, #fff); color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.nx-app .nx-imports__iconbtn-sm:hover { background: var(--bg-subtle); color: var(--text-secondary); }
.nx-app .nx-imports__footer { padding: 12px 22px; border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; }
.nx-app .nx-imports__count { font-size: 12px; color: var(--text-tertiary); }
.nx-app .nx-imports__pager { display: flex; gap: 6px; }
.nx-app .nx-imports__pager button { width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-default); background: var(--bg-card, #fff); color: var(--text-secondary);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.nx-app .nx-imports__pager button:hover:not(:disabled) { background: var(--bg-subtle); border-color: #0f6cbd; }
.nx-app .nx-imports__pager button:disabled { opacity: .4; cursor: not-allowed; }
/* Dark mode */
.nx-app--dark .nx-imports { background: #1A1A1A; }
/* The header keeps its blue drawer chrome in dark mode, exactly as .pd-drawer__header does (which
   has no dark override), so the two panels stay identical in both themes. */
.nx-app--dark .nx-imports__stats { background: #0b1220; border-color: #3D3D3D; }
.nx-app--dark .nx-imports__stat { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-imports__table thead th { background: #0b1220; color: #7f93aa; border-color: #3D3D3D; }
.nx-app--dark .nx-imports__table tbody td { color: #F7F7F7; border-color: #3D3D3D; }
.nx-app--dark .nx-imports__table tbody tr:hover td { background: rgba(16,185,129,.08); }
/* .nx-imports__iconbtn is excluded here: it now sits on the dark blue header and carries the
   white-on-blue treatment in both themes, matching .pd-drawer__close. */
.nx-app--dark .nx-imports__iconbtn-sm,
.nx-app--dark .nx-imports__pager button { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }

/* ============================================================================
   Import from Excel — reusable NexusImportExcel control (story #396360).
   Green-accented, right-docked upload panel. Sibling of .nx-imports (My Imports):
   no inline component CSS. Neutral surfaces use design tokens; the green accents
   are literal, matching the .nx-imports import theme.
   ============================================================================ */
.nx-app .nx-import-excel__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000;
  backdrop-filter: blur(4px); }
.nx-app .nx-import-excel { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw;
  background: var(--bg-card, #fff); z-index: 1001; display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.16); transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1); }
.nx-app .nx-import-excel--open { transform: translateX(0); }

.nx-app .nx-import-excel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; border-bottom: 1px solid var(--border-subtle, #E5E7EB);
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5); }
.nx-app .nx-import-excel__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary, #111827);
  display: flex; align-items: center; gap: 10px; }
.nx-app .nx-import-excel__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px;
  height: 32px; border-radius: 10px; background: linear-gradient(135deg,#10B981,#047857); flex: 0 0 auto; }
.nx-app .nx-import-excel__close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-default, #E5E7EB);
  background: var(--bg-card, #fff); color: var(--text-tertiary, #6B7280); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.nx-app .nx-import-excel__close:hover { background: var(--bg-subtle, #F3F4F6); color: var(--text-primary, #111827); }
.nx-app .nx-import-excel__close:focus-visible { outline: 2px solid #10B981; outline-offset: 2px; }

.nx-app .nx-import-excel__body { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg-subtle, #FAFBFC); }
.nx-app .nx-import-excel__section { margin-bottom: 20px; }
/* Section labels adopt the shared form-field label recipe (.nec__label, as used for Description in
   the Edit issue details drawer): same family, size token, weight and colour, so the panel's labels
   match every other New UI form label. .nec__label picks its size up from the label-normalising
   block near the end of this file, which only reaches real <label> elements, so the token is
   restated here for these <div> labels. The icon keeps its 12px size and takes the drawer header's
   blue rather than the label colour, so it stays a distinct accent. */
.nx-app .nx-import-excel__section-label { font-family: var(--font); font-size: var(--nx-type-label);
  font-weight: 600; color: var(--text-primary); text-transform: none;
  letter-spacing: normal; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.nx-app .nx-import-excel__section-icon { color: #0f6cbd; flex: 0 0 auto; }

/* The dropzone mirrors the Documents tab drag and drop box (NexusAttachmentDropBox, .nxdb) so the
   two upload surfaces read identically: same blue dashed border, radius, padding, resting and hover
   backgrounds, and underlined browse link. The resting #EBF4FF is the value .nxdb actually paints,
   set by ".nx-app .nxdb" further down this file, which wins over the component's scoped #FAFCFF. */
.nx-app .nx-import-excel__dropzone { position: relative; border: 2px dashed #0078D4; border-radius: 12px;
  padding: 32px 20px; text-align: center; background: #EBF4FF; cursor: pointer; transition: all .2s ease; }
.nx-app .nx-import-excel__dropzone:hover { border-color: #106EBE; background: #EFF6FF; }
.nx-app .nx-import-excel__dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.nx-app .nx-import-excel__dropzone-input:disabled { cursor: default; }
.nx-app .nx-import-excel__dropzone-title { margin: 12px 0 0; font-size: var(--nx-type-value); font-weight: 500; color: var(--text-primary, #1B2A3D); }
.nx-app .nx-import-excel__dropzone-sub { margin: 4px 0 0; font-size: var(--nx-type-helper); color: var(--text-tertiary, #616161); }
.nx-app .nx-import-excel__dropzone-browse { color: #0078D4; text-decoration: underline; font-weight: 600; }
.nx-app .nx-import-excel__dropzone-hint { margin: 8px 0 0; font-size: 11px; color: var(--text-tertiary, #9CA3AF); }

/* The selected-file chip follows the Upload Excel file section's blue family, matching the card above it. */
.nx-app .nx-import-excel__file { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px;
  border: 1px solid #BFDBFE; border-radius: 10px; background: #EBF4FF; }
.nx-app .nx-import-excel__file-icon { color: #0078D4; flex-shrink: 0; }
.nx-app .nx-import-excel__file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nx-app .nx-import-excel__file-name { font-size: 13px; font-weight: 600; color: #0c3b5e; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-import-excel__file-size { font-size: 11px; color: #1E40AF; }
.nx-app .nx-import-excel__file-remove { flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid #BFDBFE; background: #fff; color: #1E40AF; cursor: pointer; font-size: 12px; line-height: 1; }
.nx-app .nx-import-excel__file-remove:hover { background: #DBEAFE; }
.nx-app .nx-import-excel__file-remove:disabled { opacity: .5; cursor: default; }

/* The Download template card follows the Upload Excel file section: same blue family as the dropzone
   (#EBF4FF surface, #0078D4 accent) instead of the original green. */
.nx-app .nx-import-excel__template { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid #BFDBFE; border-radius: 10px; background: #EBF4FF; }
.nx-app .nx-import-excel__template-icon { width: 40px; height: 40px; border-radius: 10px; background: #0078D4;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nx-app .nx-import-excel__template-meta { flex: 1; min-width: 0; }
.nx-app .nx-import-excel__template-name { font-size: 13px; font-weight: 600; color: #0c3b5e; }
.nx-app .nx-import-excel__template-desc { font-size: 11px; color: #1E40AF; margin-top: 2px; }

.nx-app .nx-import-excel__tips { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
  border: 1px solid #BFDBFE; border-radius: 10px; background: #EFF6FF; }
.nx-app .nx-import-excel__tips-text { font-size: 12px; color: #1E40AF; line-height: 1.5; }

/* The error banner now sits at the top of the drawer body, so it spaces itself below rather than
   above. The busy status and its spinner were removed with the in-body "Importing..." message,
   which the drawer's Import button already reports. */
.nx-app .nx-import-excel__status { margin-bottom: 16px; padding: 10px 14px; border-radius: 8px; font-size: 12px;
  font-weight: 500; display: flex; align-items: center; gap: 8px; }
.nx-app .nx-import-excel__status--error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.nx-app .nx-import-excel__status--error:focus-visible { outline: 2px solid #991B1B; outline-offset: 2px; }

.nx-app .nx-import-excel__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px;
  border-top: 1px solid var(--border-subtle, #E5E7EB); background: var(--bg-card, #fff); box-shadow: 0 -2px 8px rgba(0,0,0,.04); }
.nx-app .nx-import-excel__btn { padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: normal; cursor: pointer; border: 1px solid transparent; transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 6px; }
.nx-app .nx-import-excel__btn:disabled { opacity: .55; cursor: default; }
.nx-app .nx-import-excel__btn:focus-visible { outline: 2px solid #0078D4; outline-offset: 2px; }
.nx-app .nx-import-excel__btn--secondary { background: var(--bg-card, #fff); color: var(--text-secondary, #374151);
  border: 1.5px solid var(--border-default, #D1D5DB); }
.nx-app .nx-import-excel__btn--secondary:not(:disabled):hover { background: var(--bg-subtle, #F9FAFB); border-color: #9CA3AF; }
.nx-app .nx-import-excel__btn--primary { min-width: 120px; justify-content: center;
  background: linear-gradient(135deg,#10B981,#047857); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.3); }
.nx-app .nx-import-excel__btn--primary:not(:disabled):hover { box-shadow: 0 4px 12px rgba(16,185,129,.4); }
.nx-app .nx-import-excel__btn--template { padding: 6px 12px; font-size: 12px; background: #fff; color: #0078D4; border-color: #0078D4; }
.nx-app .nx-import-excel__btn--template:hover { background: #EFF6FF; }

@media (max-width: 640px) {
  .nx-app .nx-import-excel { width: 100%; }
}

/* Dark mode */
.nx-app--dark .nx-import-excel { background: #1A1A1A; }
.nx-app--dark .nx-import-excel__head { background: linear-gradient(135deg, #0b2b20, #0d3327); border-color: #3D3D3D; }
.nx-app--dark .nx-import-excel__body { background: #0b1220; }
.nx-app--dark .nx-import-excel__footer { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-import-excel__title { color: #F1F5F9; }
.nx-app--dark .nx-import-excel__close { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .nx-import-excel__btn--secondary { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }
/* Dark mode parity with .nxdb. The dropzone previously had no dark rule at all, so it kept its light
   background inside the dark panel; these mirror the Documents tab box exactly. */
.nx-app--dark .nx-import-excel__dropzone { background: rgba(71,158,245,0.06); border-color: #479EF5; }
.nx-app--dark .nx-import-excel__dropzone:hover { background: rgba(71,158,245,0.12); border-color: #62ABF5; }
.nx-app--dark .nx-import-excel__dropzone-title { color: var(--text-primary); }
.nx-app--dark .nx-import-excel__dropzone-sub,
.nx-app--dark .nx-import-excel__dropzone-hint { color: var(--text-tertiary); }
.nx-app--dark .nx-import-excel__dropzone-browse { color: #62ABF5; }
/* Matches ".nx-app--dark .nec__label", the dark treatment of the Description label this recipe
   copies. The icon lifts to the dark-mode blue so it keeps its contrast on the dark panel. */
.nx-app--dark .nx-import-excel__section-label { color: #F7F7F7; }
.nx-app--dark .nx-import-excel__section-icon { color: #62ABF5; }
/* Download template card, dark parity with the dropzone above. It previously had no dark rule, so
   it kept its light surface inside the dark panel. */
.nx-app--dark .nx-import-excel__template { background: rgba(71,158,245,0.06); border-color: #479EF5; }
.nx-app--dark .nx-import-excel__template-icon { background: #0f6cbd; }
.nx-app--dark .nx-import-excel__template-name { color: #F7F7F7; }
.nx-app--dark .nx-import-excel__template-desc { color: var(--text-tertiary); }
.nx-app--dark .nx-import-excel__btn--template { background: #1A1A1A; color: #62ABF5; border-color: #62ABF5; }
.nx-app--dark .nx-import-excel__btn--template:hover { background: rgba(71,158,245,0.12); }
/* Selected-file chip and in-progress status, dark parity with the dropzone. Neither had a dark rule
   before, so both kept a light surface inside the dark panel. */
.nx-app--dark .nx-import-excel__file { background: rgba(71,158,245,0.06); border-color: #479EF5; }
.nx-app--dark .nx-import-excel__file-icon { color: #62ABF5; }
.nx-app--dark .nx-import-excel__file-name { color: #F7F7F7; }
.nx-app--dark .nx-import-excel__file-size { color: var(--text-tertiary); }
.nx-app--dark .nx-import-excel__file-remove { background: #1A1A1A; border-color: #479EF5; color: #62ABF5; }
.nx-app--dark .nx-import-excel__file-remove:hover { background: rgba(71,158,245,0.12); }


.nx-app .pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px;
  border-radius: 10px; font-size: 12px; font-weight: 600; letter-spacing: normal; font-family: var(--font); cursor: pointer;
  background: #fff; color: var(--text-secondary); border: 1.5px solid var(--border-default, #e1dfdd);
  white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.2s ease; }
.nx-app .pd-btn:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--brand-600, #0f6cbd); color: var(--brand-700, #115ea3);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
.nx-app .pd-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.nx-app .pd-btn:focus-visible { outline: 2px solid var(--brand-500, #0078d4); outline-offset: 1px; }
.nx-app .pd-btn--primary { background: #fff; color: var(--brand-600, #0f6cbd); border-color: var(--border-default, #e1dfdd); }
.nx-app .pd-btn--primary:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--brand-600, #0f6cbd); color: var(--brand-700, #115ea3); }
.nx-app .pd-btn--save { background: var(--brand-600, #0f6cbd); color: #fff; border-color: var(--brand-600, #0f6cbd); }
.nx-app .pd-btn--save:hover:not(:disabled) { background: var(--brand-700, #115ea3); border-color: var(--brand-700, #115ea3); color: #fff; }
.nx-app .pd-btn--grad { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff; border-color: transparent; }
.nx-app .pd-btn--grad:hover:not(:disabled) { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(0,120,212,.25); }
.nx-app .pd-btn--grad:disabled { opacity: .5; }
.nx-app--dark .pd-btn--grad { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff; border-color: transparent; }
.nx-app .pd-btn--ghost { background: #fff; color: var(--text-secondary); border: 1.5px solid var(--border-default, #e1dfdd); }
.nx-app .pd-btn--ghost:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--brand-600, #0f6cbd); color: var(--brand-700, #115ea3); }
.nx-app .pd-btn--approve { background: #107C10; color: #fff; border-color: #107C10; }
.nx-app .pd-btn--approve:hover:not(:disabled) { background: #0b5a0b; border-color: #0b5a0b; color: #fff; }
.nx-app .pd-btn--reject { background: #A80000; color: #fff; border-color: #A80000; }
.nx-app .pd-btn--reject:hover:not(:disabled) { background: #870000; border-color: #870000; color: #fff; }
.nx-app .pd-btn--approve:disabled, .nx-app .pd-btn--reject:disabled { opacity: .6; }
/* General disabled state: dim, no hover lift/shadow, not-allowed cursor. */
.nx-app .pd-btn:disabled, .nx-app .pd-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.nx-app .pd-btn:disabled:hover, .nx-app .pd-btn[disabled]:hover { box-shadow: none; transform: none; }
.nx-app .pd-btn--block { width: 100%; }
.nx-app .pd-card__actions { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-1); }
/* Two-button card footers (RFIs, Open issues). Keep both buttons on one row so the
   wider "View issues" / "New issue" pair does not stack when the edit drawer narrows
   the grid. space-between still supplies the visible spacing, so the gap here is only
   the minimum separation. min-width:0 lets the buttons shrink inside the card at very
   narrow widths instead of overflowing it, which the drawer-open block below documents
   as a cause of shell-wide horizontal overflow. */
.nx-app .pd-card__actions--split { justify-content: space-between; flex-wrap: nowrap; gap: var(--sp-1); }
.nx-app .pd-card__actions--split > * { min-width: 0; }
/* Two-button footers on the Equipment details summary cards (RFIs, Open Issues). Those cards
   shrink to roughly 260px at three columns, too narrow for both buttons at their natural width,
   so the wider "View issues" / "New issue" pair stacked while "View RFIs" / "New RFI" did not.
   Sharing the row equally keeps the buttons side by side and consistent between the two cards at
   every width; min-width:0 lets them shrink inside the card rather than spilling out of it. */
.nx-app .pd-card__actions--fill { flex-wrap: nowrap; }
.nx-app .pd-card__actions--fill > * { flex: 1 1 0; min-width: 0; }
/* "New RFI" / "New issue" card buttons. Gradient, shadows and press feedback match the
   .eq-action--primary action-bar button (Admin "New account"), the reference primary style. */
.nx-app .pd-btn--pill-active {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%);
  color: var(--text-inverse);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,120,212,0.25);
}
.nx-app .pd-btn--pill-active:hover:not(:disabled) {
  background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%);
  color: var(--text-inverse);
  box-shadow: 0 4px 14px rgba(0,120,212,0.35);
  transform: translateY(-1px);
}
.nx-app .pd-btn--pill-active:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,120,212,0.3); }
.nx-app .pd-btn--pill-active svg { flex-shrink: 0; }

.nx-app .pd-bar { height: 6px; border-radius: var(--r-full); background: var(--gray-200); overflow: hidden; }
.nx-app .pd-bar--segmented { display: flex; background: var(--gray-200); }
.nx-app .pd-bar__seg { display: block; min-width: 0; }
.nx-app .pd-bar__seg--g     { background: #107C10; }
.nx-app .pd-bar__seg--n     { background: var(--gray-300); }
.nx-app .pd-bar__seg--blue  { background: var(--chart-blue); }
.nx-app .pd-bar__seg--grape { background: var(--chart-grape); }
.nx-app .pd-bar__seg--teal  { background: var(--chart-teal); }
.nx-app .pd-bar__seg--corn  { background: var(--brand-700); }
.nx-app .pd-bar__seg--iris  { background: var(--chart-iris); }
.nx-app .pd-bar__seg--navy  { background: var(--brand-800); }

.nx-app .pd-card__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.nx-app .pd-card__legend li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.nx-app .pd-card__legend strong { color: var(--text-primary); }
.nx-app .pd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.nx-app .pd-dot--g     { background: #107C10; }
.nx-app .pd-dot--n     { background: var(--gray-400); }
.nx-app .pd-dot--blue  { background: var(--chart-blue); }
.nx-app .pd-dot--grape { background: var(--chart-grape); }
.nx-app .pd-dot--teal  { background: var(--chart-teal); }
.nx-app .pd-dot--corn  { background: var(--brand-700); }
.nx-app .pd-dot--iris  { background: var(--chart-iris); }
.nx-app .pd-dot--navy  { background: var(--brand-800); }

/* ----- Building Areas tree ----- */
.nx-app .pd-tree { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; margin: 0 -4px; scrollbar-width: thin; }
/* NexusAreaTree renders itself recursively, so every nesting level is another .pd-tree ul.
   Only the root may scroll; without this each depth inherits the cap and nests scrollbars. */
.nx-app .pd-tree .pd-tree { max-height: none; overflow: visible; margin: 0; }
.nx-app .pd-tree__node { display: flex; flex-direction: column; }
.nx-app .pd-tree__row { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 12px; color: var(--text-secondary); user-select: none; }
.nx-app .pd-tree__row:hover { background: var(--bg-subtle); }
.nx-app .pd-tree__row:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.nx-app .pd-tree__chevron { width: 12px; text-align: center; font-size: 9px; color: var(--text-tertiary); flex-shrink: 0; }
.nx-app .pd-tree__chevron--leaf { visibility: hidden; }
.nx-app .pd-tree__icon { font-size: 11px; flex-shrink: 0; }
.nx-app .pd-tree__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-app .pd-tree__row:hover .pd-tree__label { color: var(--brand-700); }
.nx-app .pd-tree__hint { font-size: 11px; color: var(--text-tertiary); padding: 3px 6px; }

/* ===========================================================================
   Advanced Filters modal (New UI) — matches the classic "Edit filters" feature
   =========================================================================== */
.nx-app .af-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(15,23,42,0.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 20px 16px; overflow-y: auto; }
.nx-app .af-modal { width: 1100px; max-width: 96vw; background: #F4F7FB; border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column; min-height: 85vh; max-height: calc(100vh - 40px); }
.nx-app .af-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px;
  background: #FFFFFF; border-bottom: 1px solid #D7E3EF; }
.nx-app .af-modal__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.nx-app .af-modal__icon { color: var(--brand-600); }
.nx-app .af-modal__close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--text-tertiary); cursor: pointer; }
.nx-app .af-modal__close:hover { color: var(--text-primary); }

.nx-app .af-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: #FFFFFF; border-bottom: 1px solid #D7E3EF; }
.nx-app .af-toolbar__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px;
  padding: 7px 14px; border: 1px solid transparent; border-radius: 8px;
  font-family: var(--font); font-size: var(--nx-type-button); font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nx-app .af-toolbar__button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nx-app .af-toolbar__button--primary {
  color: #FFFFFF; background: linear-gradient(120deg, #0F548C 0%, #0F6CBD 55%, #1586D8 100%); border-color: transparent;
  box-shadow: 0 2px 8px rgba(15,108,189,.22);
}
.nx-app .af-toolbar__button--primary:hover {
  background: linear-gradient(120deg, #0C3B5E 0%, #0F548C 55%, #0F6CBD 100%);
  border-color: transparent;
}
.nx-app .af-toolbar__button--danger { color: #C50F1F; background: #FFFFFF; border-color: #E6A3A7; }
.nx-app .af-toolbar__button--danger:hover { color: #A30E18; background: #FDE7E9; border-color: #D13438; }
.nx-app .af-toolbar__button:focus-visible { outline: 2px solid #0F6CBD; outline-offset: 2px; }

.nx-app .af-modal__body { flex: 1; overflow: auto; padding: 20px; background: #F4F7FB; }
.nx-app .af-validation {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  color: var(--danger-foreground, #a4262c);
  background: var(--danger-background, #FDE7E9);
  border: 1px solid var(--danger-border, #f1bcc0);
  border-radius: var(--r-sm);
  font-size: var(--nx-type-support, 12px);
}
.nx-app .af-validation__close {
  flex: 0 0 auto;
  border: 0;
  padding: 0 2px;
  color: inherit;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.nx-app .af-validation__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.nx-app .af-rootgroup { background: #FFFFFF; border: 1px solid #D7E3EF; border-left: 3px solid var(--brand-600); border-radius: var(--r-sm); padding: 14px; min-width: 680px; }
.nx-app .af-group-wrap { display: flex; align-items: center; gap: 0; }
.nx-app .af-group-wrap > .af-group { flex: 1; margin: 8px 0; }
.nx-app .af-group__check { flex: 0 0 auto; }
.nx-app .af-group { background: #F7F5FC; border: 1px solid #D9D4F0; border-left: 3px solid #5B5FC7; border-radius: var(--r-sm); padding: 12px; margin: 8px 0; }
.nx-app .af-group__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 8px; }
.nx-app .af-conj { border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 4px 8px; font-size: 12px; font-weight: 700; color: var(--brand-700); background: var(--bg-card); }
.nx-app .af-conj--fixed { display: inline-flex; align-items: center; background: var(--bg-subtle); border-style: dashed; cursor: default; }
.nx-app .af-cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--sp-2); flex: 1; font-size: 11px; font-weight: 600; color: var(--text-tertiary); }

.nx-app .af-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: var(--sp-2); align-items: center; padding: 6px 0; }
.nx-app .af-modal .af-check { display: none !important; }
.nx-app .af-field-select,
.nx-app .af-operator-select { min-width: 0; }
.nx-app .af-field-select .nfl__control,
.nx-app .af-operator-select .nfl__control,
.nx-app .af-val > .nfl .nfl__control,
.nx-app .af-related-field .nfl__control {
  min-height: 34px;
  padding: 7px 9px;
  border-color: transparent;
  border-radius: var(--r-sm);
  background: #EEF3F8;
  font-size: 13px;
}
.nx-app .af-field-select .nfl__input,
.nx-app .af-operator-select .nfl__input,
.nx-app .af-val > .nfl .nfl__input,
.nx-app .af-related-field .nfl__input,
.nx-app .af-field-select .nfl__opt,
.nx-app .af-operator-select .nfl__opt,
.nx-app .af-val > .nfl .nfl__opt,
.nx-app .af-related-field .nfl__opt {
  font-size: 13px;
}
.nx-app .af-field, .nx-app .af-op, .nx-app .af-val__input {
  width: 100%; border: 1px solid transparent; border-radius: var(--r-sm); padding: 7px 9px;
  font-size: 13px; font-family: var(--font); color: var(--text-primary); background: #EEF3F8; }
.nx-app .af-field:focus, .nx-app .af-op:focus, .nx-app .af-val__input:focus {
  outline: none; background: #F3F8FC; border-color: transparent; border-left: 2px solid #2B88D8; box-shadow: none;
}
.nx-app .af-op:disabled { background: var(--bg-subtle); color: var(--text-tertiary); }
.nx-app .af-val { min-width: 0; }
.nx-app .af-row--related { grid-template-columns: 1fr 1fr 1.4fr auto; }
.nx-app .af-related-note { font-size: 11px; color: var(--text-tertiary); font-style: italic; }

/* NexusGridFilters — highlight the Related Entity row in a boxed container (classic UI parity) */
.nx-app .af-related-wrap { display: flex; align-items: center; gap: 0; }
.nx-app .af-related-wrap > .af-related-box { flex: 1; }
.nx-app .af-related__check { flex: 0 0 auto; }
.nx-app .af-related-box {
  background: #F2F8F7;
  border: 1px solid #CFE6E2;
  border-left: 3px solid #038387;
  border-radius: var(--r-md, 6px);
  padding: 12px 14px;
  margin: 8px 0;
  align-items: end;
}
.nx-app .af-related-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx-app .af-related-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); }
.nx-app .af-related-box .af-related-note { align-self: center; }

/* NexusGridFilters — nested child conditions inside a Related Entity box (classic parity) */
.nx-app .af-related-children {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
}
.nx-app .af-related-empty {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--r-sm);
}

/* NexusGridFilters — lookup value editor (searchable record picker with chips) */
.nx-app .af-lookup { position: relative; width: 100%; }
.nx-app .af-lookup__chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: 34px; padding: 4px 6px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: #EEF3F8; cursor: text; }
.nx-app .af-lookup__chips:focus-within {
  background: #F3F8FC; border-color: transparent; border-left: 2px solid #2B88D8; box-shadow: none;
}
.nx-app .af-lookup__chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-subtle); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); padding: 1px 4px 1px 7px; font-size: 12px; color: var(--text-primary); }
.nx-app .af-lookup__chip-x {
  border: none; background: none; cursor: pointer; font-size: 14px; line-height: 1;
  color: var(--text-tertiary); padding: 0 2px; }
.nx-app .af-lookup__chip-x:hover { color: var(--danger-700); }
.nx-app .af-lookup__input {
  flex: 1; min-width: 80px; border: none; outline: none; background: transparent;
  font-size: 13px; font-family: var(--font); color: var(--text-primary); padding: 2px; }
.nx-app .af-lookup__menu {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 50;
  max-height: 260px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
.nx-app .af-lookup__list { overflow-y: auto; padding: 4px; }
.nx-app .af-lookup__backdrop { position: fixed; inset: 0; z-index: 49; background: transparent; border: none; cursor: default; }
.nx-app .af-lookup__done-row { flex-shrink: 0; display: flex; justify-content: flex-end; padding: 6px; background: var(--bg-card); border-top: 1px solid var(--border-subtle); }
.nx-app .af-lookup__done { background: var(--brand-600); color: #fff; border: none; border-radius: var(--r-sm); padding: 5px 14px; font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; }
.nx-app .af-lookup__done:hover { background: var(--brand-700); }
.nx-app .af-lookup__opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  font-size: 13px; color: var(--text-primary); cursor: pointer; border-radius: var(--r-sm); }
.nx-app .af-lookup__opt:hover { background: var(--bg-subtle); }
.nx-app .af-lookup__opt input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand-600); }
.nx-app .af-lookup__status { padding: 10px 8px; font-size: 12px; color: var(--text-tertiary); }

/* Column-filter lookup suggestions must take up layout space inside the scrollable header menu.
   Otherwise the absolutely-positioned menu is clipped to the small area below the value field. */
.nx-app .col-menu .af-lookup__menu {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  min-height: 180px;
  max-height: 240px;
  margin-top: 4px;
}
.nx-app .col-menu .af-lookup__list { min-height: 130px; }

.nx-app .af-menu, .nx-app .af-add { position: relative; }
.nx-app .af-menu > summary {
  display: grid; width: 28px; height: 28px; padding: 0; place-items: center;
  list-style: none; cursor: pointer; color: var(--text-tertiary); border-radius: 6px; font-weight: 700;
}
.nx-app .af-menu > summary::-webkit-details-marker { display: none; }
.nx-app .af-menu > summary:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nx-app .af-menu__list { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--bg-card);
  border: 1px solid var(--border-default); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 4px; min-width: 150px; display: flex; flex-direction: column; }
.nx-app .af-menu__list button { background: none; border: none; text-align: left; padding: 7px 10px; font-size: 13px; color: var(--text-secondary); cursor: pointer; border-radius: var(--r-xs); font-family: var(--font); }
.nx-app .af-menu__list button:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nx-app .af-menu__danger { color: var(--danger-700) !important; }
.nx-app .af-menu__list--actions {
  width: 184px; min-width: 184px; padding: 6px; border-color: #D7E3EF; border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.08);
}
.nx-app .af-menu__title {
  padding: 5px 9px 7px; color: #687789; font-size: var(--nx-type-support);
  font-weight: 600; line-height: 1.2;
}
.nx-app .af-menu__list--actions button {
  display: flex; align-items: center; gap: 9px; min-height: 36px; width: 100%;
  padding: 7px 9px; border-radius: 6px; font-size: var(--nx-type-button);
}
.nx-app .af-menu__list--actions button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.nx-app .af-menu__list--actions .af-menu__danger:hover { color: #A30E18 !important; background: #FDE7E9; }
.nx-app .af-menu__danger--divided { margin-top: 4px; padding-top: 9px !important; border-top: 1px solid #E7EDF3 !important; border-radius: 0 0 6px 6px !important; }

.nx-app--dark .af-field,
.nx-app--dark .af-op,
.nx-app--dark .af-val__input,
.nx-app--dark .af-lookup__chips {
  color: #F7F7F7; background: #2B2B2B; border-color: transparent;
}
.nx-app--dark .af-field:focus,
.nx-app--dark .af-op:focus,
.nx-app--dark .af-val__input:focus,
.nx-app--dark .af-lookup__chips:focus-within {
  background: #303030; border-color: transparent; border-left: 2px solid #479EF5; box-shadow: none;
}
.nx-app--dark .af-menu__list--actions { background: #242424; border-color: #3D3D3D; }
.nx-app--dark .af-menu__title { color: #ADADAD; }
.nx-app--dark .af-menu__danger--divided { border-top-color: #3D3D3D !important; }
.nx-app--dark .af-menu__list--actions .af-menu__danger {
  color: #FF99A4 !important;
  background: transparent;
  opacity: 1;
}
.nx-app--dark .af-menu__list--actions .af-menu__danger svg {
  color: inherit;
  stroke: currentColor;
}
.nx-app--dark .af-menu__list--actions .af-menu__danger:hover { color: #FFB3BA !important; background: #3B171B; }
.nx-app--dark .af-menu__list--actions .af-menu__danger:focus-visible {
  color: #FFB3BA !important;
  background: #3B171B;
  outline: 2px solid #FF99A4;
  outline-offset: -2px;
}

.nx-app .af-add { margin-top: 10px; display: inline-block; }
.nx-app .af-add__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm); padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.nx-app .af-add__btn::-webkit-details-marker { display: none; }
.nx-app .af-add__btn:hover { border-color: var(--brand-500); color: var(--brand-700); }
.nx-app .af-add .af-menu__list { left: 0; right: auto; top: 100%; margin-top: 4px; }

/* NexusGridFilters — in-panel "Add ▾" dropdown inside a Related Entity panel (Blazor-controlled) */
.nx-app .af-add-menu { position: relative; margin-top: 10px; display: inline-block; }
.nx-app .af-add__btn--dropdown { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); }
.nx-app .af-add__caret { font-size: 10px; line-height: 1; color: var(--text-tertiary); }
.nx-app .af-add__btn--dropdown:hover .af-add__caret { color: var(--brand-700); }
.nx-app .af-add__backdrop { position: fixed; inset: 0; z-index: 4; background: transparent; border: none; cursor: default; }
.nx-app .af-menu__list--down { left: 0; right: auto; top: 100%; margin-top: 4px; z-index: 6; }

.nx-app .af-modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 14px 20px; background: #FFFFFF; border-top: 1px solid #D7E3EF; }

.nx-app--dark .af-modal,
.nx-app--dark .af-modal__body { background: #0F0F0F; }
.nx-app--dark .af-modal__head,
.nx-app--dark .af-toolbar,
.nx-app--dark .af-modal__foot {
  background: #1A1A1A;
  border-color: #3D3D3D;
}
.nx-app--dark .af-rootgroup {
  background: #1A1A1A;
  border-color: #3D3D3D;
  border-left-color: #479EF5;
}
.nx-app--dark .af-group {
  background: #24222C;
  border-color: #46405E;
  border-left-color: #8B86D9;
}
.nx-app--dark .af-related-box {
  background: #1E2927;
  border-color: #36544F;
  border-left-color: #4EC9B0;
}
.nx-app--dark .af-related-children,
.nx-app--dark .af-related-empty {
  background: #242424;
  border-color: #3D3D3D;
}
.nx-app--dark .af-toolbar__button--primary {
  color: #FFFFFF; background: linear-gradient(120deg, #0F548C 0%, #0F6CBD 55%, #1586D8 100%); border-color: transparent;
}
.nx-app--dark .af-toolbar__button--primary:hover {
  background: linear-gradient(120deg, #0C3B5E 0%, #0F548C 55%, #0F6CBD 100%); border-color: transparent;
}
.nx-app--dark .af-toolbar__button--danger { color: #FF99A4; background: #242424; border-color: #8B3039; }
.nx-app--dark .af-toolbar__button--danger:hover { color: #FFB3BA; background: #3B171B; border-color: #C50F1F; }
.nx-app .af-btn {
  min-height: 36px; padding: 8px 18px; border-radius: 8px;
  font-size: var(--nx-type-button); font-weight: 600; font-family: var(--font);
  cursor: pointer; border: 1px solid transparent;
}
.nx-app .af-btn--ghost { background: #FFFFFF; border-color: #D1DCE8; color: #33475B; }
.nx-app .af-btn--ghost:hover { background: #F3F6F9; border-color: #AEBECD; }
.nx-app .af-btn--primary {
  min-width: 112px; background: linear-gradient(120deg, #0F548C 0%, #0F6CBD 55%, #1586D8 100%); border-color: transparent; color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15,108,189,.22);
}
.nx-app .af-btn--primary:hover {
  background: linear-gradient(120deg, #0C3B5E 0%, #0F548C 55%, #0F6CBD 100%); border-color: transparent;
}
.nx-app .af-btn:focus-visible { outline: 2px solid #0F6CBD; outline-offset: 2px; }
.nx-app .af-btn--primary:disabled { opacity: 0.6; cursor: default; }
.nx-app--dark .af-btn--ghost { color: #D6D6D6; background: #242424; border-color: #3D3D3D; }
.nx-app--dark .af-btn--ghost:hover { color: #F7F7F7; background: #333333; border-color: #525252; }
.nx-app--dark .af-btn--primary {
  color: #FFFFFF; background: linear-gradient(120deg, #0F548C 0%, #0F6CBD 55%, #1586D8 100%); border-color: transparent;
}
.nx-app--dark .af-btn--primary:hover {
  background: linear-gradient(120deg, #0C3B5E 0%, #0F548C 55%, #0F6CBD 100%); border-color: transparent;
}

/* ===========================================================================
   Create New Equipment drawer (New UI) — hosts the classic CreateNewEquipment form
   =========================================================================== */
.nx-app .nx-create-drawer {
  position: fixed; top: var(--topbar-h, 56px); right: 0; height: calc(100vh - var(--topbar-h, 56px)); width: 500px; max-width: 94vw; z-index: 410;
  background: var(--bg-subtle, #faf9f8); display: flex; flex-direction: column;
  box-shadow: -8px 0 28px rgba(0,0,0,0.18); }
.nx-app .nx-create-drawer:has(> .nec--rfi) { background: var(--bg-card); }

/* Create-drawer docks below the topbar so its blue header lines up with the page hero banner
   (topbar 56px + .main 12px padding = 68px). To keep the grid AND the top nav fully visible — not
   hidden underneath — the page reserves the drawer's width with padding-right (border-box) instead
   of narrowing, and the topbar stays full-width so it covers the strip above the drawer (no gap; the
   12px band below the topbar is filled by the app-layout background, matching the hero side).
   `.nx-app--create-open` is toggled by setPanelOpen() when a create-drawer is open. */
.nx-app.nx-app--create-open .topbar { right: 0; }
.nx-app.nx-app--create-open .app-layout { width: 100%; padding-right: 500px; }
/* Narrow screens: drawer becomes a full-width overlay, so stop reserving its width. */
@media (max-width: 1200px) { .nx-app.nx-app--create-open .app-layout { padding-right: 0; } }

.nx-app .nx-create-drawer__backdrop { position: fixed; inset: 0; z-index: 409; background: rgba(0,0,0,0.32); }

/* Building-family detail push layout: when the edit drawer is open, reserve the drawer width so the
   read-only detail content stays visible beside it rather than hidden underneath. On narrower screens
   the drawer is near full-width, so revert to the standard dimmed overlay. */
.nx-app .nx-bfd { transition: padding-right .18s ease; }
.nx-app .nx-bfd--editing { padding-right: 500px; }
.nx-app .nx-create-drawer__backdrop--soft { background: transparent; }
@media (max-width: 1200px) {
  .nx-app .nx-bfd--editing { padding-right: 0; }
  .nx-app .nx-create-drawer__backdrop--soft { background: rgba(0,0,0,0.32); }
}

/* Generic push layout: whenever a right-docked create/edit form drawer (.nx-create-drawer) is open,
   compress the content column (page body + footer) to the left so the drawer sits beside the page
   instead of over it. The top header stays full width and the drawer tucks beneath it. The
   building-family detail already reserves the width via .nx-bfd--editing, so it is excluded here to
   avoid a double shift. The equipment/project detail (.pd-detail), equipment-create host
   (.nx-eq-create-host), RFI detail (.nx-rfi-detail), Issue detail (.nx-issue-detail), and NCR detail
   (.nx-ncr-detail) reserve width via .page-scroll instead, so they are likewise excluded to avoid
   shifting BOTH .main and .page-scroll. Narrow screens keep the full-width drawer with a dimmed
   overlay. Grids that toggle .nx-app--create-open already reserve the width via .app-layout
   padding-right, so they are excluded here to avoid a double shift.
   Retention: every :has() term below must ignore routes the router is holding hidden, or a page
   the user merely visited keeps shifting .main for every page that follows. */
.nx-app:not(.nx-app--create-open):has(.nx-create-drawer:not([hidden] *):not(:where([data-nx-route-hidden] *))):not(:has(.nx-bfd--editing:not(:where([data-nx-route-hidden] *)))):not(:has(.pd-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *)))):not(:has(.nx-eq-create-host.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *)))):not(:has(.nx-rfi-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *)))):not(:has(.nx-issue-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *)))):not(:has(.nx-ncr-detail.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *)))) .main {
  margin-right: 500px; transition: margin-right .18s ease; }
/* Desktop: the page is reserved beside the drawer (padding/margin above), so the drawer is non-modal.
   Make the backdrop transparent AND non-blocking so the visible page stays scrollable/interactive.
   Closing is via the drawer's own Close / Cancel controls. Narrow screens (below) restore the dimmed,
   click-to-close modal overlay because the drawer is then a full-width overlay covering the page. */
.nx-app:has(.nx-create-drawer:not([hidden] *):not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop { background: transparent; pointer-events: none; }
@media (max-width: 1200px) {
  .nx-app:has(.nx-create-drawer:not([hidden] *):not(:where([data-nx-route-hidden] *))):not(:has(.nx-bfd--editing)) .main { margin-right: 0; }
  .nx-app:has(.nx-create-drawer:not([hidden] *):not(:where([data-nx-route-hidden] *))) .nx-create-drawer__backdrop { background: rgba(0,0,0,0.32); pointer-events: auto; }
}
.nx-app .nx-create-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; color: #fff; flex-shrink: 0;
  background:
    radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.45) 0%, transparent 55%),
    linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%); }
.nx-app .nx-create-drawer__title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nx-app .nx-create-drawer__icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.nx-app .nx-create-drawer__icon--circle { border-radius: 50%; background: transparent; border: 2px solid rgba(255,255,255,0.3); }
.nx-app .nx-create-drawer__titles { min-width: 0; }
.nx-app .nx-create-drawer__title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.nx-app .nx-create-drawer__subtitle { font-size: 12px; opacity: 0.9; }
.nx-app .nx-create-drawer__close { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 28px; height: 28px;
  min-width: 44px; min-height: 44px; border-radius: 6px; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.nx-app .nx-create-drawer__close:hover { background: rgba(255,255,255,0.30); }

/* Create NCR drawer */
.nx-app .nx-create-drawer--ncr { background: var(--bg-card); }
.nx-app .nx-create-drawer--ncr .nx-create-drawer__head {
  padding: 18px 26px;
  background: linear-gradient(120deg, var(--brand-900), var(--brand-600));
}
.nx-app .nx-create-drawer--ncr .nx-create-drawer__title { font-size: var(--nx-type-drawer-title); }
.nx-app .nx-create-drawer--ncr .nx-create-drawer__subtitle {
  margin-top: 3px;
  font-size: var(--nx-type-support);
}
.nx-app .nx-create-drawer--ncr .nx-create-drawer__icon--circle {
  border-color: var(--brand-stroke2);
}
.nx-app--dark .nx-create-drawer--ncr .nx-create-drawer__head {
  background:
    radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.35) 0%, transparent 55%),
    linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%);
}

/* Add Reviewer drawer variant (Issue Push Request) — scoped overrides so the drawer matches the
   mockup exactly WITHOUT altering the shared .nx-create-drawer base rules used by other drawers. */
.nx-app .nx-create-drawer--addrev { width: 480px; }
.nx-app .nx-create-drawer--addrev .nx-create-drawer__head {
  padding: 20px 24px;
  background: linear-gradient(135deg, #0078D4 0%, #2BA4E0 50%, #4FC3F7 100%); }
.nx-app .nx-create-drawer--addrev .nx-create-drawer__title-wrap { gap: 14px; }
.nx-app .nx-create-drawer--addrev .nx-create-drawer__icon--circle {
  width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.4); background: transparent; }
.nx-app .nx-create-drawer--addrev .nx-create-drawer__title { font-size: 17px; }
.nx-app .nx-create-drawer--addrev .nx-create-drawer__subtitle { opacity: 1; color: rgba(255,255,255,0.85); }
.nx-app .nx-create-drawer--addrev .nx-create-drawer__close {
  width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); border-radius: 6px; }
.nx-app .nx-create-drawer--addrev .nx-create-drawer__close:hover { background: rgba(255,255,255,0.30); }
/* Reserve exactly the addrev drawer width (480px) so no empty sliver shows between the page and the
   drawer. Additive override — the shared 500px reservation stays intact for every other drawer. */
.nx-app.nx-app--create-open:has(.nx-create-drawer--addrev:not(:where([data-nx-route-hidden] *))) .app-layout { padding-right: 480px; }
@media (max-width: 1200px) { .nx-app.nx-app--create-open:has(.nx-create-drawer--addrev:not(:where([data-nx-route-hidden] *))) .app-layout { padding-right: 0; } }

/* Red Tag completion fields: emphasise when empty (mirrors the classic required-for-red-tag styling). */
.nx-app .nec__input--redtag { border-color: var(--danger-500); background: rgba(177,14,28,0.04); }
.nx-app .nec__hint { font-size: var(--nx-type-support); color: var(--danger-500); margin-top: 4px; }

/* Create-equipment form (NexusEquipmentCreate) — HTML/Fluent controls */
.nx-app .nec { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Onboarding create form: make the hosting drawer body a full-height flex column so the
   .nec form fills it — its .nec__body scrolls and .nec__footer (Cancel/Create) stays pinned
   to the drawer bottom instead of floating up when auto-approve roles hide the Region/Projects
   sections and shorten the form. Scoped to the onboarding form only (via .nec--onboarding) so
   no other .nec drawer form is affected. The drawer's own 20px padding is dropped because the
   .nec body/footer already carry their own padding. */
.nx-app .pd-drawer__body:has(> .nec--onboarding) { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.nx-app .nec__body { flex: 1; overflow-y: auto; padding: 18px 20px 8px; position: relative; }
.nx-app .nec__field { margin-bottom: 14px; min-width: 0; }
.nx-app .nec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.nx-app .nec__section-title { margin: 4px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-default);
  color: var(--text-primary); font-size: var(--nx-type-panel-title); font-weight: 700; }
.nx-app .nec__label { display: block; font-size: var(--nx-type-field-label); font-weight: 600; color: var(--text-primary); margin-bottom: 5px; font-family: var(--font); }
.nx-app .nec__req { color: #c4314b; }
.nx-app .nec__info { display: inline-flex; align-items: center; color: var(--text-secondary, #616161); margin-left: 5px; vertical-align: -2px; cursor: help; opacity: .85; }
.nx-app .nec__info:hover, .nx-app .nec__info:focus-visible { opacity: 1; color: var(--accent, #0f6cbd); outline: none; }
.nx-app .nec__lock { color: #888; vertical-align: -1px; margin-left: 4px; }
.nx-app--dark .nec__lock { color: #9aa7b5; }
.nx-app .nec__input { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; font-size: var(--nx-type-control); font-family: var(--font);
  color: var(--text-primary); background: #fff; border: 1px solid var(--border-default, #e1dfdd); border-radius: 6px; outline: none; text-overflow: ellipsis; }
.nx-app .nec__input:focus { border-color: var(--brand-500, #0078d4); box-shadow: 0 0 0 1px var(--brand-500, #0078d4); }
.nx-app .nec--rfi .nec__input:focus,
.nx-app .nec--rfi .nec__input:focus-visible {
  border-color: var(--border-default);
  box-shadow: none;
  outline: 2px solid var(--focus-ring-color) !important;
  outline-offset: 1px !important;
}
.nx-app .nec--rfi .nfl__control:focus-within {
  border-color: var(--border-default);
  box-shadow: none;
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 1px;
}
.nx-app .nx-issue-edit-drawer .nec__input:focus,
.nx-app .nx-issue-edit-drawer .nec__input:focus-visible,
.nx-app .nx-issue-edit-drawer .nec__select:focus,
.nx-app .nx-issue-edit-drawer .nec__select:focus-visible,
.nx-app .nx-issue-edit-drawer .nec__textarea:focus,
.nx-app .nx-issue-edit-drawer .nec__textarea:focus-visible {
  border-color: var(--border-default);
  box-shadow: none;
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 1px;
}
.nx-app .nec__input--readonly { background: var(--bg-subtle, #f3f2f1); color: var(--text-secondary); cursor: default; }
.nx-app .nec__textarea { min-height: 76px; resize: vertical; }
/* Building Family create/edit form: soft blue focus ring on textareas to match the lookup fields.
   Scoped to .nec--bldgarea so no other module's .nec forms are affected. */
.nx-app .nec--bldgarea .nec__textarea:focus { border-color: var(--brand-600, #0f6cbd); box-shadow: 0 0 0 3px rgba(0,120,212,0.12); }
/* Equipment ID as a textarea but locked to single-line (text-box) height: allow wrapping without
   growing the control, and hide the resize handle so it visually matches the adjacent text inputs. */
.nx-app .nec__input--singleline { min-height: 0; resize: none; overflow-y: auto; line-height: 1.3; }
.nx-app .nec__select { appearance: auto; }
/* Hide the native number-input spinner arrows on nec__input number fields (design uses plain text entry). */
.nx-app .nec__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.nx-app .nec__input[type="number"]::-webkit-outer-spin-button,
.nx-app .nec__input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nx-app .nec__select--placeholder { color: var(--text-tertiary, #616161); }
.nx-app .nec__input.nec__select--error { border-color: #a4262c; }
/* Dark theme: the light error red does not meet the 3:1 non-text contrast floor on dark surfaces.
   Both rules are qualified with .nec__input so they win over the generic dark input border below. */
.nx-app--dark .nec__input.nec__select--error { border-color: var(--danger-foreground); }
.nx-app .nec__err { color: #c4314b; font-size: var(--nx-type-support); margin-top: 4px; }
.nx-app .nec__dropzone { border: 1.5px dashed var(--border-strong, #c8c6c4); border-radius: 8px; padding: 22px; text-align: center;
  color: var(--text-secondary); font-size: var(--nx-type-control); display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; }
.nx-app .nec__dropzone svg { width: 26px; height: 26px; color: var(--text-tertiary); }
.nx-app .nec__dropzone a { color: var(--brand-600, #0f6cbd); font-weight: 600; }
.nx-app .nec__dropzone--disabled { opacity: .7; cursor: not-allowed; font-style: italic; }
.nx-app .nec__errsummary { border: 1px solid #f3c9d0; background: #fdf3f5; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.nx-app .nec__errsummary ul { margin: 0; padding-left: 18px; }
.nx-app .nec__errsummary li { color: #c4314b; font-size: var(--nx-type-support); line-height: 1.5; }
.nx-app .nec__partial-success { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; padding: 10px 14px;
  border: 1px solid #a9dfa9; border-radius: 8px; background: #dff6dd; color: #0b6a0b; font-size: var(--nx-type-support); line-height: 1.4; }
.nx-app .nec__partial-success strong { font-weight: 700; }
.nx-app .nec__overlay { position: absolute; inset: 0; background: rgba(255,255,255,.55); display: flex; align-items: center;
  justify-content: center; z-index: 5; border-radius: 8px; }
.nx-app--dark .nec__overlay { background: rgba(20,20,20,.62); }
.nx-app .nec__spinner { width: 30px; height: 30px; border: 3px solid var(--border-default, #e1dfdd); border-top-color: var(--brand-600, #0f6cbd);
  border-radius: 50%; animation: nec-spin .8s linear infinite; }
.nx-app .nec__overlay-content { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nx-app .nec__overlay-msg { font-size: var(--nx-type-support); font-weight: 600; color: var(--text-secondary, #605e5c); }
@keyframes nec-spin { to { transform: rotate(360deg); } }
.nx-app .nec__footer { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--border-default, #e1dfdd); background: var(--bg-card, #fff); }
.nx-app .nec__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 8px; font-size: var(--nx-type-button);
  font-weight: 600; font-family: var(--font); cursor: pointer; border: 1px solid transparent; }
.nx-app .nec__btn svg { width: 16px; height: 16px; }
.nx-app .nec__btn--ghost { background: #fff; color: var(--text-secondary); border-color: var(--border-default, #e1dfdd); }
.nx-app .nec__btn--ghost:hover { background: var(--bg-subtle); }
.nx-app .nec__btn--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff; }
.nx-app .nec__btn--primary:hover:not(:disabled) { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); }
.nx-app .nec__btn--primary:disabled { opacity: 0.6; cursor: default; }

.nx-app .nec--ncr { position: relative; }
.nx-app .nec--ncr .nec__body { padding: 22px 34px 10px; }
.nx-app .nec--ncr .nec__footer { padding: 16px 30px; }
.nx-app .nec--ncr .nec__field { margin-bottom: 18px; }
.nx-app .nec--ncr .nec__grid > .nec__field { margin-bottom: 0; }
.nx-app .nec--ncr .nec__assignment-banner {
  width: 100%;
  margin: 0 0 18px;
  box-sizing: border-box;
}
.nx-app .nec--ncr .nec__assignment-banner .pd-banner {
  width: 100%;
  box-sizing: border-box;
}
.nx-app .nec--ncr .nfl--disabled,
.nx-app .nec--ncr .nff__ms.nfl--disabled { opacity: 1; }
.nx-app .nec--ncr .nfl--disabled .nfl__control,
.nx-app .nec--ncr .nff__ms.nfl--disabled .nfl__control {
  color: var(--text-disabled);
  background: var(--neutral-bg4);
  cursor: not-allowed;
}
.nx-app .nec--ncr .nff__ms-control {
  flex-wrap: nowrap;
}
.nx-app .nec--ncr .nff__ms-control > .nfl__value {
  flex: 1;
  min-width: 0;
}
.nx-app .nec--ncr .nff__ms-control > .nfl__caret {
  flex: 0 0 16px;
}
.nx-app .nec--ncr .nff__ms-chips {
  max-height: 116px;
  overflow-x: hidden;
}
.nx-app .nec--ncr .nff__person-chip {
  width: 100%;
  box-sizing: border-box;
}
.nx-app .nec--ncr .nff__ms .nfl__menu {
  overflow-x: auto;
  max-height: min(320px, calc(100dvh - 220px));
}
.nx-app .nec--ncr .nff__ms-opt {
  width: max-content;
  min-width: 100%;
}
.nx-app .nec--ncr .nff__ms-opt .nff__ms-check:empty {
  display: none;
}
.nx-app .nec--ncr .nff__ms-opt .nff__person-text {
  flex: none;
  min-width: max-content;
}
.nx-app .nec--ncr .nff__ms-opt .nff__person-name,
.nx-app .nec--ncr .nff__ms-opt .nff__person-account {
  overflow: visible;
  text-overflow: clip;
}
.nx-app .nec-ncr-team {
  margin: 14px 0 10px;
  padding: 20px 24px 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--neutral-bg2);
}
.nx-app .nec-ncr-team__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-primary);
}
.nx-app .nec-ncr-team__heading > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--brand-600);
}
.nx-app .nec-ncr-team__heading h3 {
  display: inline;
  margin: 0;
  font-family: var(--font);
  font-size: var(--nx-type-field-value);
  font-weight: 700;
}
.nx-app .nec-ncr-team__heading span {
  margin-left: 6px;
  color: var(--text-tertiary);
  font-family: var(--font);
  font-size: var(--nx-type-support);
}
.nx-app .nec-ncr-team__notice {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--warning-500);
  border-radius: var(--r-md);
  color: var(--warning-700);
  background: var(--warning-50);
  font-family: var(--font);
  font-size: var(--nx-type-support);
}
@media (max-width: 720px) {
  .nx-app .nec--ncr .nec__body { padding: 18px 18px 8px; }
  .nx-app .nec--ncr .nec__footer { padding: 14px 18px; }
  .nx-app .nec-ncr-team { padding: 16px; }
  .nx-app .nec-ncr-team__heading div { display: flex; flex-direction: column; }
  .nx-app .nec-ncr-team__heading span { margin-left: 0; }
}
/* Building Family (scoped): hero-style blue gradient on primary form button */
.nx-app .nec--bldgarea .nec__btn--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); }
.nx-app .nec--bldgarea .nec__btn--primary:hover:not(:disabled) { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); }
/* Admin Family: opt-in gradient modifier so admin create/detail primary buttons match the Building
   Family hero-style blue gradient. Applied only to buttons tagged .nec__btn--grad (admin family). */
.nx-app .nec__btn--grad { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff; }
.nx-app .nec__btn--grad:hover:not(:disabled) { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); }

/* ── RFI create — Owner line (read-only) and Attachments (paperclip + selected file chips). ── */
.nx-app .nec__owner { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; font-size: var(--nx-type-field-value);
  font-family: var(--font); color: var(--text-secondary, #605e5c); }
.nx-app .nec__owner--tight { margin-bottom: 6px; }
.nx-app .nec__owner-label { font-weight: 600; }
.nx-app .nec__owner-value { font-weight: 700; color: var(--text-primary); }
.nx-app .nec__attach { display: flex; align-items: center; gap: 8px; }
.nx-app .nec__attach-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  min-width: 44px; min-height: 44px;
  border-radius: 8px; border: 1px solid var(--border-default, #e1dfdd); background: #fff; color: var(--text-secondary);
  cursor: pointer; }
.nx-app .nec__attach-btn:hover { background: var(--bg-subtle); }
.nx-app .nec__attach-btn svg { width: 18px; height: 18px; }
.nx-app .nec__attach-input { display: none; }
/* RFI attachments dropzone — the file input overlays the whole dashed zone so click-to-browse AND
   native drag-and-drop both populate it. */
.nx-app .nec__dropzone--rfi { position: relative; cursor: pointer; }
.nx-app .nec__dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.nx-app .nec__dropzone-browse { color: var(--brand-600, #0f6cbd); font-weight: 600; }
.nx-app .nec__attach-errors { margin: 8px 0 0; padding-left: 18px; color: #c4314b; font-size: var(--nx-type-support); }
.nx-app .nec__attach-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.nx-app .nec__attach-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: 6px; background: var(--bg-subtle, #f3f2f1); font-size: var(--nx-type-field-value); }
.nx-app .nec__attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nec__attach-remove { flex-shrink: 0; border: none; background: transparent; color: var(--text-secondary);
  min-width: 44px; min-height: 44px; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.nx-app .nec__attach-remove:hover { color: #c4314b; }
.nx-app--dark .nec__attach-btn { background: #1b2636; border-color: #33415a; color: #cbd5e1; }
.nx-app--dark .nec__attach-item { background: #1b2636; color: #cbd5e1; }

/* ── Create Issue form — mockup look & feel (sentence-case labels, taller controls). Scoped to the
   issue create form so other .nec create/edit forms are unaffected. ── */
.nx-app .nec--issuecreate .nec__label { text-transform: none; font-size: var(--nx-type-field-label); font-weight: 700;
  color: var(--text-secondary, #605e5c); margin-bottom: 6px; }
.nx-app .nec--issuecreate .nec__input { padding: 10px 12px; border-radius: 8px; }
/* Soft blue focus halo to match the other common form components (Building Family, side panels).
   Scoped to .nec--issuecreate so the base hard 1px ring is unchanged for other modules' forms. */
.nx-app .nec--issuecreate .nec__input:focus,
.nx-app .nec--issuecreate .nec__select:focus,
.nx-app .nec--issuecreate .nec__textarea:focus { border-color: var(--brand-600, #0f6cbd); box-shadow: 0 0 0 3px rgba(0,120,212,0.12); }
.nx-app .nec--issuecreate .nec__grid { gap: 16px 16px; }
.nx-app .nec--issuecreate .nec__field { margin-bottom: 16px; }
.nx-app .nec--issuecreate .nec__dropzone { padding: 26px; gap: 10px; position: relative; cursor: pointer; }
.nx-app .nec--issuecreate .nec__dropzone svg { width: 30px; height: 30px; }

/* NexusIssueClone — clone drawer (sentence-case labels, checkbox list, selected chips) */
.nx-app .nx-issue-clone-drawer { background: var(--bg-card); }
.nx-app:not(.nx-app--dark) .nx-issue-clone-drawer { background: var(--bg-elevated); }
.nx-app .nx-issue-clone-drawer > .nec { min-height: 0; flex: 1; }
.nx-app .nic__label { display: block; font-size: var(--nx-type-field-label); font-weight: 700; text-transform: none;
  color: var(--text-tertiary, #8a8886); margin-bottom: 6px; font-family: var(--font); }
.nx-app .nic__proj { font-size: var(--nx-type-panel-title); color: var(--text-primary, #242424); }
.nx-app .nec__select--placeholder { color: var(--text-tertiary, #8a8886); }
.nx-app .nic__loading { padding: 10px 0; font-size: var(--nx-type-support); color: var(--text-tertiary, #8a8886); }
.nx-app .nic__notice { margin-bottom: 14px; padding: 9px 11px; border: 1px solid var(--brand-200);
  border-radius: 8px; background: var(--brand-50); color: var(--brand-700); font-size: var(--nx-type-support); }
.nx-app .nic__list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nx-app .nic__count { color: var(--brand-700); font-size: var(--nx-type-badge); font-weight: 700; }
.nx-app .nic__search-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px;
  border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-card); color: var(--text-tertiary); }
.nx-app .nic__search-wrap:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500); }
.nx-app .nic__search { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text-primary); font-family: var(--font); font-size: var(--nx-type-control); }
.nx-app .nic__search::placeholder { color: var(--text-tertiary); }
.nx-app .nic__list-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px;
  color: var(--text-tertiary); font-size: var(--nx-type-support); }
.nx-app .nic__list-actions > div { display: flex; gap: 4px; }
.nx-app .nic__text-btn { padding: 3px 6px; border: 0; border-radius: 4px; background: transparent;
  color: var(--brand-700); font-family: var(--font); font-size: var(--nx-type-button); font-weight: 600; cursor: pointer; }
.nx-app .nic__text-btn:hover:not(:disabled) { background: var(--brand-50); }
.nx-app .nic__text-btn:disabled { color: var(--text-tertiary); cursor: default; opacity: .6; }
.nx-app .nic__box { border: 1px solid var(--border-default, #e1dfdd); border-radius: 8px; padding: 8px;
  min-height: 96px; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.nx-app .nic__no-results { padding: 24px 12px; color: var(--text-tertiary); font-size: var(--nx-type-support); text-align: center; }
.nx-app .nic__check { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 6px; cursor: pointer;
  font-size: var(--nx-type-choice); color: var(--text-primary, #242424); }
.nx-app .nic__check:hover { background: var(--bg-subtle, #f3f2f1); }
.nx-app .nic__check input { width: 16px; height: 16px; accent-color: var(--brand-600, #0f6cbd); cursor: pointer; }
.nx-app .nic__selected { min-height: 54px; border: 1px solid var(--border-default, #e1dfdd); border-radius: 8px;
  background: var(--bg-subtle, #faf9f8); padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nx-app .nic__empty { color: var(--text-tertiary, #8a8886); font-size: var(--nx-type-support); }
.nx-app .nic__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 6px;
  background: var(--brand-50, #eff6fc); color: var(--brand-700, #115ea3); font-size: 13px; font-weight: 600; }
.nx-app .nic__chip-x { border: none; background: none; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.nx-app .nic__chip-x:hover { color: #c50f1f; }
.nx-app--dark .nic__proj { color: #F7F7F7; }
.nx-app--dark .nic__box, .nx-app--dark .nic__selected { border-color: #33415a; }
.nx-app--dark .nic__search-wrap { border-color: #33415a; background: #1b2636; }
.nx-app--dark .nic__selected { background: #131c2a; }
.nx-app--dark .nic__check { color: #F7F7F7; }
.nx-app--dark .nic__check:hover { background: #3D3D3D; }
.nx-app--dark .nic__chip { background: rgba(71,158,245,0.18); color: #6cb4f7; }

/* Issue Details tab (NexusIssueDetailsTab) — view/edit metadata-driven form */
/* Inset the Details tab content from the rounded page panel, like #main-tabpanel-home in Project Details. */
.nx-app #issue-tabpanel-details,
.nx-app #issue-tabpanel-quality,
.nx-app #issue-tabpanel-action { padding: 4px 16px 16px; }
.nx-app #rfi-tabpanel-details,
.nx-app #rfi-tabpanel-responses,
.nx-app #rfi-tabpanel-audit { padding: 4px 16px 16px; }
.nx-app #rfi-tabpanel-details .pd-toolbar,
.nx-app #rfi-tabpanel-responses .pd-toolbar { margin: 0 0 12px; padding: 8px 16px; }
.nx-app #rfi-tabpanel-details .pd-toolbar__sep,
.nx-app #rfi-tabpanel-responses .pd-toolbar__sep { display: none; }
.nx-app #rfi-tabpanel-details .nx-rfi-detail .pd-panel + .pd-panel,
.nx-app #rfi-tabpanel-responses .nx-rfi-detail .pd-panel + .pd-panel { margin-top: 16px; }
.nx-app .nx-rfi-response-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px;
  border-bottom: 1px solid var(--border-default); }
.nx-app .nx-rfi-response-guidance { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 12px;
  border: 1px solid var(--brand-600); border-radius: var(--r-md); background: var(--brand-50); color: var(--text-secondary);
  font-size: var(--nx-type-support); }
.nx-app .nx-rfi-response-guidance strong { color: var(--brand-700); white-space: nowrap; }
.nx-app .nx-rfi-response-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0;
  margin-bottom: -1px; padding: 11px 14px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--text-primary); font-family: var(--font); text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.nx-app .nx-rfi-response-tab:hover { border-bottom-color: var(--brand-400); background: var(--bg-subtle); }
.nx-app .nx-rfi-response-tab:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.nx-app .nx-rfi-response-tab--active { border-bottom-color: var(--brand-600); background: var(--brand-50); }
.nx-app .nx-rfi-response-tab:disabled { cursor: not-allowed; opacity: .58; }
.nx-app .nx-rfi-response-tab:disabled:hover { border-bottom-color: transparent; background: transparent; }
.nx-app .nx-rfi-response-tab__heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-app .nx-rfi-response-tab__heading strong { overflow: hidden; font-size: var(--nx-type-tab); text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-rfi-response-tab__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nx-app .nx-rfi-response-tab__icon--purple { color: var(--purple-500); }
.nx-app .nx-rfi-response-tab__icon--amber { color: var(--warning-700); }
.nx-app .nx-rfi-response-tab__icon--green { color: var(--success-500); }
.nx-app .nx-rfi-response-tab__status { display: inline-flex; align-items: center; gap: 4px; padding-left: 24px;
  color: var(--text-secondary); font-size: var(--nx-type-support); }
.nx-app .nx-rfi-response__step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  flex-shrink: 0; border-radius: 9px; background: var(--brand-600); color: #fff; font-size: var(--nx-type-badge); font-weight: 700; }
.nx-app .nx-rfi-response__primary-action { box-shadow: 0 2px 7px rgba(0,120,212,.24); }
.nx-app .pd-fields.nx-rfi-response-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-app .pd-fields.nx-rfi-response-fields .pd-field--wide { grid-column: span 1; }
.nx-app .nx-rfi-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nx-app .nx-rfi-person__avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  flex: 0 0 34px; border-radius: 50%; background: var(--brand-600); color: #fff; font-size: var(--nx-type-badge); font-weight: 700; }
.nx-app .nx-rfi-person__details { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nx-app .nx-rfi-person__name { overflow: hidden; color: var(--text-primary); font-size: var(--nx-type-field-value); font-weight: 400;
  text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-rfi-person__name--inactive { color: #c50f1f; }
.nx-app--dark .nx-rfi-person__name--inactive { color: #FF99A4; }
.nx-app .nx-rfi-person__meta { overflow: hidden; color: var(--text-secondary); font-size: var(--nx-type-support);
  text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-rfi-person__email { overflow: hidden; color: var(--brand-700); font-size: var(--nx-type-support); text-decoration: none;
  text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-rfi-person__email:hover { text-decoration: underline; }
.nx-app .nx-rfi-detail dl.pd-field { margin: 0; }
.nx-app .nx-rfi-detail-group-title { grid-column: 1 / -1; margin: 3px 0 -2px; padding-top: 12px;
  border-top: 1px solid var(--border-subtle); color: var(--brand-700); font-size: var(--nx-type-field-label); font-weight: 700; }
.nx-app .nx-rfi-detail-group-title:first-child { padding-top: 0; border-top: 0; }
.nx-app .nx-rfi-detail-field--full { grid-column: 1 / -1; }
.nx-app .nx-rfi-question-field { min-height: 92px; padding: 13px 15px; border: 1px solid var(--border-default);
  border-radius: var(--r-md); background: var(--bg-subtle); }
.nx-app .nx-rfi-question-field dt { margin-bottom: 7px; color: var(--brand-700); font-size: var(--nx-type-field-label); }
.nx-app .nx-rfi-question-field dd { font-size: var(--nx-type-field-value); line-height: 1.55; }
.nx-app .nx-rfi-people-list { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.nx-app .nx-rfi-person--card { flex: 0 1 auto; min-width: 210px; max-width: 100%; min-height: 36px; padding: 2px 0; }
.nx-app .nx-rfi-person--card .nx-rfi-person__avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: var(--nx-type-badge); }
.nx-app .nx-rfi-person--card .nx-rfi-person__name { white-space: nowrap; }
.nx-app .nx-rfi-person--card .nx-rfi-person__meta { white-space: normal; }
.nx-app .nx-person-summary { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.nx-app .nx-person-summary__avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--r-full); color: #fff; font-size: var(--nx-type-badge); font-weight: 700; }
.nx-app .nx-person-summary__details { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nx-app .nx-person-summary__name { color: var(--text-primary); font-size: var(--nx-type-field-value); line-height: 1.25; }
.nx-app .nx-person-summary__account { color: var(--text-secondary); font-size: var(--nx-type-support); line-height: 1.2; }
.nx-app .nx-rfi-people { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 190px; }
.nx-app .nx-rfi-people .nx-person-summary__avatar { width: 28px; height: 28px; flex-basis: 28px; }
.nx-app .nx-rfi-people__more { color: var(--brand-700); font-size: var(--nx-type-support); font-weight: 600; }
.nx-app .nx-approval-history { display: grid;
  grid-template-columns: repeat(var(--nx-approval-stage-count), minmax(210px, 1fr));
  padding: 6px 16px 16px; overflow-x: auto; }
.nx-app .nx-approval-history__stage { position: relative; min-width: 210px; padding-right: 18px; }
.nx-app .nx-approval-history__stage:not(:last-of-type) .nx-approval-history__rail::after {
  content: ""; position: absolute; z-index: 0; top: 13px; left: 28px; right: -18px; height: 2px; background: var(--success-500); }
.nx-app .nx-approval-history__rail { position: relative; height: 34px; }
.nx-app .nx-approval-history__marker { position: relative; z-index: 1; display: grid; place-items: center;
  width: 28px; height: 28px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-card); color: var(--text-tertiary); }
.nx-app .nx-approval-history__marker svg { width: 17px; height: 17px; display: block; }
.nx-app .nx-approval-history__marker--completed { border-color: var(--success-500); background: var(--success-500); color: #fff; }
.nx-app .nx-approval-history__marker--rejected { border-color: var(--danger-600); background: var(--danger-600); color: #fff; }
.nx-app .nx-approval-history__marker--pending { border-color: var(--border-strong); background: var(--bg-subtle); color: var(--text-secondary); }
.nx-app .nx-approval-history__stage:has(.nx-approval-history__marker--pending) .nx-approval-history__rail::after { background: var(--border-default); }
.nx-app .nx-approval-history__stage:has(.nx-approval-history__marker--rejected) .nx-approval-history__rail::after { background: var(--danger-600); }
.nx-app .nx-approval-history__content { min-width: 0; }
.nx-app .nx-approval-history__heading { display: flex; min-height: 42px; align-items: flex-start; flex-direction: column; gap: 4px; }
.nx-app .nx-approval-history__heading h3 { margin: 0; color: var(--text-primary); font-size: var(--nx-type-field-label); font-weight: 700; }
.nx-app .nx-approval-history__status { font-size: var(--nx-type-badge); font-weight: 700; }
.nx-app .nx-approval-history__status--completed { color: var(--success-700); }
.nx-app .nx-approval-history__status--rejected { color: var(--danger-700); }
.nx-app .nx-approval-history__status--pending { color: var(--text-secondary); }
.nx-app .nx-approval-history__details { display: flex; min-width: 0; flex-direction: column; gap: 9px; margin-top: 7px; }
.nx-app .nx-approval-history__details > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.nx-app .nx-approval-history__details .nx-person-summary__avatar { width: 28px; height: 28px; flex-basis: 28px; }
.nx-app .nx-approval-history__label { color: var(--text-secondary); font-size: var(--nx-type-field-label); font-weight: 700; }
.nx-app .nx-approval-history__value { color: var(--text-primary); font-size: var(--nx-type-field-value); }
.nx-app .nx-approval-history__comments { grid-column: 1 / -1; margin-top: 14px; padding: 12px; border: 1px solid var(--border-subtle);
  border-radius: 8px; background: var(--bg-subtle); }
.nx-app .nx-approval-history__comments p { margin: 5px 0 0; color: var(--text-primary); font-size: var(--nx-type-field-value); white-space: pre-wrap; }
@media (max-width: 700px) {
  .nx-app .nx-rfi-person--card { flex-basis: 100%; }
}
.nx-app .nx-rfi-toast { position: fixed; top: 78px; right: 20px; z-index: 1400; display: flex; align-items: center; gap: 9px;
  width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--border-default);
  border-radius: var(--r-md); background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-lg); }
.nx-app .nx-rfi-toast--success { border-color: rgba(16,124,16,.45); }
.nx-app .nx-rfi-toast--success .nx-rfi-toast__icon { color: #107c10; }
.nx-app .nx-rfi-toast--warning { border-color: rgba(181,100,0,.5); }
.nx-app .nx-rfi-toast--warning .nx-rfi-toast__icon { color: #b56400; }
.nx-app .nx-rfi-toast--error { border-color: rgba(196,49,75,.55); }
.nx-app .nx-rfi-toast--error .nx-rfi-toast__icon { color: #c4314b; }
.nx-app .nx-rfi-toast__icon { display: inline-flex; flex: 0 0 auto; }
.nx-app .nx-rfi-toast__message { flex: 1; font-size: var(--nx-type-support); line-height: 1.4; }
.nx-app .nx-rfi-toast__close { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  flex: 0 0 auto; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary);
  cursor: pointer; font-size: 20px; line-height: 1; }
.nx-app .nx-rfi-toast__close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nx-app .nx-rfi-toast__close:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
@media (max-width: 1100px) {
  .nx-app .pd-fields.nx-rfi-response-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .nx-app .nx-rfi-toast { top: 66px; right: 12px; left: 12px; width: auto; }
  .nx-app .nx-rfi-response-tabs { grid-template-columns: 1fr; }
  .nx-app .nx-rfi-response-guidance { align-items: flex-start; flex-direction: column; gap: 2px; }
  .nx-app .pd-fields.nx-rfi-response-fields { grid-template-columns: 1fr; }
  .nx-app .pd-fields.nx-rfi-response-fields .pd-field--wide { grid-column: span 1; }
}
.nx-app #issue-tabpanel-stepgap { padding: 4px 16px 16px; }
.nx-app #issue-tabpanel-audit { padding: 4px 16px 16px; }
.nx-app #issue-tabpanel-audit .pd-panel + .pd-panel { margin-top: 16px; }
.nx-app .pd-audit-table-wrap { overflow-x: auto; border: 1px solid var(--border-default, #e1dfdd); border-radius: 6px; }
.nx-app .pd-audit-table { width: 100%; border-collapse: collapse; font-size: var(--nx-type-grid-cell); }
.nx-app .pd-audit-table thead th { text-align: left; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-subtle, #faf9f8); padding: 8px 12px; border-bottom: 1px solid var(--border-default, #e1dfdd); white-space: nowrap; }
.nx-app .pd-audit-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle, #f3f2f1); color: var(--text-primary); }
.nx-app .pd-audit-table tbody tr:last-child td { border-bottom: none; }
.nx-app .pd-audit-table tbody tr:hover { background: var(--bg-subtle, #faf9f8); }
.nx-app .pd-audit-table tbody td { vertical-align: top; }
.nx-app .pd-audit-field, .nx-app .pd-audit-val { min-height: 18px; line-height: 18px; padding: 1px 0; }
.nx-app .pd-audit-field:not(:last-child), .nx-app .pd-audit-val:not(:last-child) { border-bottom: 1px dashed var(--border-subtle, #f3f2f1); margin-bottom: 2px; padding-bottom: 3px; }
.nx-app .pd-audit-field { font-weight: 600; color: var(--text-secondary); }
.nx-app .pd-state--empty { color: var(--text-secondary); }
.nx-app .pd-stepgap-overview { padding: 4px 4px 2px; font-size: var(--nx-type-field-value); color: var(--text-secondary); line-height: 1.5; }
.nx-app .pd-stepgap-overview__img { max-width: 100%; height: auto; display: block; margin: 0 0 12px; }
.nx-app .pd-stepgap-overview p { margin: 0 0 8px; }
.nx-app .pd-stepgap-overview ul { margin: 0 0 8px; padding-left: 20px; }
.nx-app .pd-stepgap-overview li { margin: 2px 0; }

/* Step Gap Analysis storyboard */
.nx-app .nx-sga { color: var(--text-primary); }
.nx-app .nx-sga-load-warning {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--warning-500);
  border-radius: 8px;
  background: var(--warning-50);
  color: var(--text-primary);
  font-size: var(--nx-type-support);
}
.nx-app .nx-sga-process {
  margin: 14px 0 8px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
}
.nx-app .nx-sga-process__head,
.nx-app .nx-sga-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.nx-app .nx-sga-process__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-default);
}
.nx-app .nx-sga-process__head h2,
.nx-app .nx-sga-section-head h2 {
  margin: 0;
  font-family: var(--font);
  font-size: var(--nx-type-panel-title);
  font-weight: 700;
  color: var(--text-primary);
}
.nx-app .nx-sga-kicker {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font);
  font-size: var(--nx-type-support);
  font-weight: 700;
  color: var(--brand-700);
}
.nx-app .nx-sga-kicker--green { color: var(--success-700); }
.nx-app .nx-sga-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font);
  font-size: var(--nx-type-badge);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-subtle);
}
.nx-app .nx-sga-process__body {
  padding: 20px 18px 18px;
  background: var(--bg-subtle);
}
.nx-app .nx-sga-process__scroll {
  overflow-x: auto;
  padding: 2px 2px 12px;
}
.nx-app .nx-sga-phases,
.nx-app .nx-sga-steps {
  min-width: 1040px;
  display: grid;
  grid-template-columns: repeat(9, minmax(105px, 1fr));
  gap: 9px;
}
.nx-app .nx-sga-phases { margin-bottom: 8px; }
.nx-app .nx-sga-phase {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: var(--nx-type-badge);
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-card);
}
.nx-app .nx-sga-phase::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-600);
}
.nx-app .nx-sga-phase--define { grid-column: 1 / span 3; }
.nx-app .nx-sga-phase--analyze { grid-column: 4 / span 5; }
.nx-app .nx-sga-phase--analyze::before { background: var(--success-500); }
.nx-app .nx-sga-phase--resolve {
  grid-column: 9;
  color: var(--success-700);
  background: var(--success-50);
}
.nx-app .nx-sga-phase--resolve::before { background: var(--success-500); }
.nx-app .nx-sga-step {
  position: relative;
  min-width: 105px;
  min-height: 108px;
  padding: 12px 11px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}
.nx-app .nx-sga-step:not(:last-child)::after {
  content: "›";
  position: absolute;
  z-index: 2;
  top: 40px;
  right: -8px;
  width: 15px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--bg-subtle);
  color: var(--brand-600);
  font-size: var(--nx-type-panel-title);
  font-weight: 700;
}
.nx-app .nx-sga-step:nth-child(n+4):nth-child(-n+8) {
  border-top: 3px solid var(--success-500);
  padding-top: 10px;
}
.nx-app .nx-sga-step:hover {
  border-color: var(--brand-500);
  background: var(--brand-50);
}
.nx-app .nx-sga-step--selected {
  border-color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-600);
}
.nx-app .nx-sga-step--root {
  border-color: var(--success-500);
  background: var(--success-50);
}
.nx-app .nx-sga-step--root.nx-sga-step--selected {
  border-color: var(--success-700);
  box-shadow: inset 0 0 0 1px var(--success-700);
}
.nx-app .nx-sga-step__number {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--nx-type-badge);
  font-weight: 700;
}
.nx-app .nx-sga-step__check {
  position: absolute;
  top: 11px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--success-500);
  color: var(--text-inverse);
}
.nx-app .nx-sga-step__check svg { width: 11px; height: 11px; }
.nx-app .nx-sga-step--complete:not(.nx-sga-step--selected) {
  border-color: var(--success-500);
}
.nx-app .nx-sga-step:nth-child(n+4):nth-child(-n+8) .nx-sga-step__number,
.nx-app .nx-sga-step--root .nx-sga-step__number {
  background: var(--success-50);
  color: var(--success-700);
}
.nx-app .nx-sga-step--selected .nx-sga-step__number {
  background: var(--brand-600);
  color: var(--text-inverse);
}
.nx-app .nx-sga-step--root.nx-sga-step--selected .nx-sga-step__number {
  background: var(--success-500);
  color: var(--text-inverse);
}
.nx-app .nx-sga-step__label {
  display: block;
  margin-top: 10px;
  font-size: var(--nx-type-tab);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}
.nx-app .nx-sga-step__hint {
  display: block;
  margin-top: 4px;
  font-size: var(--nx-type-support);
  line-height: 1.25;
  color: var(--text-secondary);
}
.nx-app .nx-sga-overview {
  margin-top: 4px;
  padding: 14px 16px;
  border-left: 4px solid var(--brand-600);
  border-radius: 0 9px 9px 0;
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 22px;
  background: var(--bg-card);
}
.nx-app .nx-sga-overview h3 {
  margin: 0 0 5px;
  font-size: var(--nx-type-field-value);
  font-weight: 700;
}
.nx-app .nx-sga-overview p,
.nx-app .nx-sga-overview ul {
  margin: 0;
  font-size: var(--nx-type-support);
  line-height: 1.45;
  color: var(--text-secondary);
}
.nx-app .nx-sga-overview ul {
  padding-left: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 20px;
}
.nx-app .nx-sga-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  width: fit-content;
  margin: 0 0 4px;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  display: inline-flex;
  gap: 3px;
  background: var(--bg-card);
}
.nx-app .nx-sga-tab {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: var(--nx-type-tab);
  font-weight: 600;
}
.nx-app .nx-sga-tab:hover:not(.nx-sga-tab--active) {
  background: var(--gray-50);
  color: var(--text-primary);
}
.nx-app .nx-sga-tab--active {
  background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #115ea3 100%);
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(0,120,212,.25);
  font-weight: 700;
}
.nx-app .nx-sga-tab--active:hover {
  background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%);
}
.nx-app .nx-sga-tab--active::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
}
.nx-app .nx-sga-audit {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--nx-type-support);
}
.nx-app .nx-sga-workspace[hidden] { display: none; }
.nx-app .nx-sga-section-head {
  margin: 22px 0 12px;
}
.nx-app .nx-sga-section-head p {
  margin: 4px 0 0;
  max-width: 760px;
  font-size: var(--nx-type-support);
  line-height: 1.45;
  color: var(--text-secondary);
}
.nx-app .nx-sga-section-progress {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--success-50);
  color: var(--success-700);
  font-size: var(--nx-type-badge);
  font-weight: 700;
}
.nx-app .nx-sga-frame {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
}
.nx-app .nx-sga-frame__issues {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
}
.nx-app .nx-sga-frame__issues article { padding: 20px; }
.nx-app .nx-sga-frame__issues article > span,
.nx-app .nx-sga-team article > span,
.nx-app .nx-sga-why__cell > span,
.nx-app .nx-sga-outcome > span {
  display: block;
  margin-bottom: 7px;
  font-size: var(--nx-type-field-label);
  font-weight: 600;
  color: var(--text-secondary);
}
.nx-app .nx-sga-frame p,
.nx-app .nx-sga-why p,
.nx-app .nx-sga-outcome p {
  margin: 0;
  font-size: var(--nx-type-field-value);
  line-height: 1.45;
  color: var(--text-primary);
}
.nx-app .nx-sga-frame__issues article p {
  font-weight: 600;
}
.nx-app .nx-sga-frame__arrow {
  border-left: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  display: grid;
  place-items: center;
  color: var(--brand-600);
  background: var(--bg-subtle);
}
.nx-app .nx-sga-frame__arrow svg,
.nx-app .nx-sga-why__arrow svg { width: 20px; height: 20px; }
.nx-app .nx-sga-team {
  padding: 14px 16px;
  border-top: 1px solid var(--border-default);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.nx-app .nx-sga-team article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--bg-subtle);
}
.nx-app .nx-sga-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nx-app .nx-sga-contact__avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--brand-700);
  color: var(--text-inverse);
  font-size: var(--nx-type-badge);
  font-weight: 700;
}
.nx-app .nx-sga-contact__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.nx-app .nx-sga-contact__details strong,
.nx-app .nx-sga-contact__details small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-app .nx-sga-contact__details strong {
  color: var(--text-primary);
  font-size: var(--nx-type-field-value);
  font-weight: 600;
}
.nx-app .nx-sga-contact__details small {
  color: var(--text-secondary);
  font-size: var(--nx-type-support);
}
.nx-app .nx-sga-whys {
  position: relative;
  display: grid;
  gap: 10px;
}
.nx-app .nx-sga-whys::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 29px;
  width: 2px;
  background: var(--success-500);
}
.nx-app .nx-sga-why {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 38px minmax(0, 1.15fr);
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-card);
  overflow: hidden;
}
.nx-app .nx-sga-why--selected {
  border-color: var(--success-500);
  box-shadow: inset 0 0 0 1px var(--success-500);
}
.nx-app .nx-sga-why__number {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin: 16px auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--success-500);
  color: var(--text-inverse);
  font-size: var(--nx-type-badge);
  font-weight: 700;
}
.nx-app .nx-sga-why__cell {
  min-width: 0;
  padding: 16px 18px;
}
.nx-app .nx-sga-why__cell--answer { background: var(--bg-subtle); }
.nx-app .nx-sga-why__arrow {
  display: grid;
  place-items: center;
  color: var(--success-700);
}
.nx-app .nx-sga-outcomes {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.nx-app .nx-sga-outcome {
  min-height: 170px;
  padding: 20px;
  border: 1px solid var(--border-default);
  border-top: 4px solid var(--success-500);
  border-radius: 11px;
  background: var(--bg-card);
}
.nx-app .nx-sga-outcome--root {
  border-color: var(--brand-600);
  background: var(--brand-50);
}
.nx-app .nx-sga-empty {
  color: var(--text-secondary) !important;
  font-style: italic;
}
.nx-app .nx-sga-drawer .nec__grid {
  grid-template-columns: 1fr;
}
.nx-app .nx-sga-field-hint {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: var(--nx-type-support);
  line-height: 1.35;
}
.nx-app .nx-sga-unsaved {
  color: var(--warning-700);
  font-size: var(--nx-type-support);
  font-weight: 700;
}
.nx-app .nx-sga-drawer .pd-btn.pd-btn--grad,
.nx-app.nx-app--dark .nx-sga-drawer .pd-btn.pd-btn--grad {
  border-color: transparent;
  background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #115ea3 100%);
  color: #fff;
}
.nx-app .nx-sga-drawer .pd-btn.pd-btn--grad:hover:not(:disabled),
.nx-app.nx-app--dark .nx-sga-drawer .pd-btn.pd-btn--grad:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%);
  color: #fff;
}

@media (max-width: 900px) {
  .nx-app .nx-sga-overview { grid-template-columns: 1fr; }
  .nx-app .nx-sga-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-app .nx-sga-why { grid-template-columns: 56px minmax(0, 1fr); }
  .nx-app .nx-sga-why__arrow { display: none; }
  .nx-app .nx-sga-why__cell--answer {
    grid-column: 2;
    border-top: 1px solid var(--border-default);
  }
  .nx-app .nx-sga-outcomes { grid-template-columns: 1fr; }
  .nx-app .nx-sga-outcome { min-height: 0; }
}

@media (max-width: 700px) {
  .nx-app #issue-tabpanel-stepgap { padding: 4px 10px 12px; }
  .nx-app .nx-sga-process__head,
  .nx-app .nx-sga-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .nx-app .nx-sga-process__body { padding: 14px 12px; }
  .nx-app .nx-sga-overview ul { grid-template-columns: 1fr; }
  .nx-app .nx-sga-tabs { width: 100%; }
  .nx-app .nx-sga-tab { min-height: 44px; flex: 1; }
  .nx-app .nx-sga-section-head .pd-btn,
  .nx-app .nx-sga-drawer .pd-btn,
  .nx-app .nfl__opt { min-height: 44px; }
  .nx-app .nx-sga-frame__issues { grid-template-columns: 1fr; }
  .nx-app .nx-sga-frame__arrow {
    min-height: 44px;
    border: 0;
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
  }
  .nx-app .nx-sga-frame__arrow svg { transform: rotate(90deg); }
  .nx-app .nx-sga-team { grid-template-columns: 1fr; }
  .nx-app .nx-sga-whys::before { left: 27px; }
  .nx-app .nfl__toggle {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

.nx-app .pd-quality-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 14px;
  font-size: var(--nx-type-support); color: var(--text-secondary); }
.nx-app .pd-quality-meta strong { color: var(--text-primary); font-weight: 600; margin-right: 4px; }
/* Action Center tab — header strip (same visual style as pd-quality-meta) */
.nx-app .pd-action-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 14px;
  font-size: var(--nx-type-support); color: var(--text-secondary); }
.nx-app .pd-action-meta strong { color: var(--text-primary); font-weight: 600; margin-right: 4px; }
/* Action Center workflow */
.nx-app .nx-acwf { margin-bottom: 12px; border: 1px solid var(--border-default); border-radius: 12px;
  background: var(--bg-card); overflow: hidden; }
.nx-app .nx-acwf__head { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 18px; border-bottom: 1px solid var(--border-default); }
.nx-app .nx-acwf__title { margin: 0; font-size: var(--nx-type-panel-title); font-weight: 700; color: var(--text-primary); }
.nx-app .nx-acwf__subtitle { margin: 3px 0 0; font-size: var(--nx-type-support); color: var(--text-secondary); }
.nx-app .nx-acwf__progress { min-width: 160px; font-size: var(--nx-type-support); font-weight: 700; color: var(--text-secondary); text-align: right; }
.nx-app .nx-acwf__progress-track { display: block; height: 6px; margin-top: 6px; overflow: hidden;
  border-radius: var(--r-full); background: var(--gray-100); }
.nx-app .nx-acwf__progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--brand-600); }
.nx-app .nx-acwf__steps { display: grid; grid-template-columns: repeat(var(--nx-acwf-step-count), minmax(145px, 1fr));
  gap: 0; padding: 18px; overflow-x: auto; }
.nx-app .nx-acwf__step { position: relative; min-width: 145px; padding: 0 14px 0 0; border: 0;
  background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.nx-app .nx-acwf__step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 15px;
  left: 34px; right: 0; height: 2px; background: var(--border-default); }
.nx-app .nx-acwf__step--completed:not(:last-child)::after { background: var(--success-500); }
.nx-app .nx-acwf__marker { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px;
  border: 2px solid var(--border-strong); border-radius: 8px; background: var(--bg-card);
  color: var(--text-secondary); font-size: var(--nx-type-badge); font-weight: 800; }
.nx-app .nx-acwf__check { width: 18px; height: 18px; display: block; }
.nx-app .nx-acwf__step--completed .nx-acwf__marker { border-color: var(--success-500);
  background: var(--success-500); color: #fff; }
.nx-app .nx-acwf__step--current .nx-acwf__marker { border-color: var(--brand-600);
  background: var(--brand-600); color: #fff; }
.nx-app .nx-acwf__step--selected .nx-acwf__marker { outline: 3px solid var(--brand-50); outline-offset: 2px; }
.nx-app .nx-acwf__step:focus-visible { outline: none; }
.nx-app .nx-acwf__step:focus-visible .nx-acwf__marker { outline: 3px solid var(--brand-100); outline-offset: 2px; }
.nx-app .nx-acwf__step-title { display: block; margin-top: 9px; font-size: var(--nx-type-field-label); font-weight: 700; }
.nx-app .nx-acwf__step-owner { display: block; margin-top: 2px; font-size: var(--nx-type-support); color: var(--text-tertiary); }
.nx-app .nx-acwf__step-state { display: inline-block; margin-top: 6px; font-size: var(--nx-type-badge); font-weight: 700;
  color: var(--text-tertiary); }
.nx-app .nx-acwf__step--completed .nx-acwf__step-state { color: var(--success-700); }
.nx-app .nx-acwf__step--current .nx-acwf__step-state { color: var(--brand-600); }
.nx-app .nx-acwf__step:disabled { cursor: not-allowed; opacity: .72; }
.nx-app .nx-acwf__step:disabled .nx-acwf__marker { background: var(--gray-50); border-color: var(--border-default); color: var(--text-tertiary); }
.nx-app .nx-acwf__step:disabled .nx-acwf__step-title,
.nx-app .nx-acwf__step:disabled .nx-acwf__step-owner { color: var(--text-tertiary); }
.nx-app .nx-acwf__step:disabled .nx-acwf__step-state { display: inline-flex; align-items: center; gap: 4px; color: var(--text-tertiary); }
.nx-app .nx-acwf__lock { flex: 0 0 auto; }
.nx-app .nx-acwf-action { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; padding: 14px 16px;
  border: 1px solid var(--border-default); border-left-width: 4px; border-radius: 10px; background: var(--bg-card); }
.nx-app .nx-acwf-action--required { border-left-color: var(--brand-600); background: var(--brand-50); }
.nx-app .nx-acwf-action--waiting { border-left-color: var(--warning-500); background: var(--warning-50); }
.nx-app .nx-acwf-action__content { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.nx-app .nx-acwf-action__eyebrow { color: var(--text-secondary); font-size: var(--nx-type-support); font-weight: 700; }
.nx-app .nx-acwf-action__title { color: var(--text-primary); font-size: var(--nx-type-field-value); }
.nx-app .nx-acwf-action__description { color: var(--text-secondary); font-size: var(--nx-type-support); }
.nx-app .nx-acwf-action__restriction { margin-top: 4px; color: var(--danger-700); font-size: var(--nx-type-support); font-weight: 700; }
.nx-app .nx-acwf-action__due { width: fit-content; margin-top: 4px; padding: 2px 7px; border-radius: var(--r-full);
  color: var(--danger-700); background: var(--danger-50); font-size: var(--nx-type-badge); font-weight: 700; }
@media (max-width: 900px) {
  .nx-app .nx-acwf__head { align-items: stretch; flex-direction: column; }
  .nx-app .nx-acwf__progress { width: 100%; text-align: left; }
  .nx-app .nx-acwf-action { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .nx-app .nx-acwf__steps { display: flex; flex-direction: column; gap: 12px; }
  .nx-app .nx-acwf__step { min-height: 42px; padding-left: 40px; }
  .nx-app .nx-acwf__marker { position: absolute; top: 0; left: 0; }
  .nx-app .nx-acwf__step:not(:last-child)::after { top: 29px; bottom: -14px; left: 14px; right: auto; width: 2px; height: auto; }
  .nx-app .nx-acwf__step-title { margin-top: 0; }
}
/* Supporting Documents placeholder text */
.nx-app .pd-action-docs-placeholder { margin: 8px 0 4px; font-size: var(--nx-type-field-value); color: var(--text-secondary); }
/* Building-family detail shell (NexusBuildingFamilyDetail) — inset the Details tab content from the
   rounded page panel so it has the same left/right margin as #main-tabpanel-home in Project Details. */
.nx-app #det-tabpanel-details { padding: 4px 16px 16px; }
.nx-app .nec__grid--edit { gap: 14px 20px; }
.nx-app .nec__grid--edit .nec__field { margin-bottom: 0; }
/* Two-column create/edit form grid (building-family). Fields flow into two columns; full-width
   rows (Name, Description, Regarding type) span both columns. */
.nx-app .nec__grid--form { row-gap: 14px; align-items: start; }
.nx-app .nec__grid--form .nec__field { margin-bottom: 0; }
.nx-app .nec__field--full { grid-column: 1 / -1; }
.nx-app .nec--rfi .nec__field--rfi-equipment { grid-column: 1 / -1 !important; width: 100%; }
.nx-app .nec--rfi .nec__field--rfi-equipment > .nfl { width: 100%; }
/* Extra top spacing to separate a full-width field (e.g. Questions) from the two-column grid above it. */
.nx-app .nec__field--gap-top { margin-top: 14px; }
/* Greyed, non-editable look for locked/disabled controls in edit mode. */
.nx-app .nec__input:disabled,
.nx-app .nec__select:disabled,
.nx-app .nec__textarea:disabled { background: var(--bg-subtle, #f3f2f1); color: var(--text-secondary); cursor: not-allowed; opacity: 1; }
.nx-app .nec__notice { margin: 4px 0 12px; padding: 8px 12px; border-radius: 6px; font-size: var(--nx-type-support);
  color: var(--text-primary); background: var(--bg-subtle, #f3f2f1); border: 1px solid var(--border-default, #e1dfdd); }
.nx-app .nec__readvalue { padding: 8px 10px; min-height: 18px; font-size: var(--nx-type-field-value); font-family: var(--font);
  color: var(--text-primary); background: var(--bg-subtle, #f3f2f1); border: 1px solid var(--border-default, #e1dfdd); border-radius: 6px; }
@media (max-width: 720px) { .nx-app .nec__grid { grid-template-columns: 1fr; } }

/* NexusFormLookup — searchable single-select */
.nx-app .nfl { position: relative; width: 100%; }
.nx-app .nfl__control { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; font-size: var(--nx-type-control); font-family: var(--font); color: var(--text-primary); background: #fff;
  border: 1px solid var(--border-default, #e1dfdd); border-radius: 6px; cursor: text; text-align: left; }
.nx-app .nfl__control:hover { border-color: var(--brand-400, #479ef5); }
.nx-app .nfl--invalid .nfl__control { border-color: var(--danger-700, #a4262c); }
.nx-app .nfl__control:focus-within {
  border-color: var(--brand-500, #0078d4);
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.nx-app .nfl--disabled .nfl__control { background: var(--bg-subtle, #f3f2f1); color: var(--text-tertiary); cursor: default; }
/* Invalid single-select: qualified with .nfl so it outranks the generic and dark .nfl__control borders. */
.nx-app .nfl.nfl--error .nfl__control { border-color: var(--danger-foreground); }
.nx-app .nfl.nfl--error .nfl__control:hover { border-color: var(--danger-foreground); }
.nx-app--dark .nfl.nfl--error .nfl__control { border-color: var(--danger-foreground); }
.nx-app .nfl__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0;
  font-size: var(--nx-type-control); font-family: var(--font); color: var(--text-primary); text-overflow: ellipsis; }
.nx-app .nfl__input::placeholder { color: var(--text-tertiary); }
.nx-app .nfl--disabled .nfl__input { cursor: default; color: var(--text-tertiary); }
.nx-app .nfl__person-value {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 0; border: 0;
  background: transparent; color: var(--text-primary); font-family: var(--font); cursor: pointer; text-align: left;
}
.nx-app .nfl__person-value:disabled { color: var(--text-tertiary); cursor: default; }
.nx-app .nfl__person-option { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nx-app .nfl__person-value .nff__person-avatar,
.nx-app .nfl__person-option .nff__person-avatar {
  width: 30px; height: 30px; flex-basis: 30px;
}
/* Focus is indicated by the control's outer border (:focus-within); suppress the inner input outline to avoid a double border. */
.nx-app .nfl__input:focus, .nx-app .nfl__input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.nx-app .nfl__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nfl__value--ph { color: var(--text-tertiary); }
.nx-app .nfl__toggle {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  color: var(--text-tertiary);
}
.nx-app .nfl__clear {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.nx-app .nfl__clear:hover { background: var(--bg-subtle, #f3f2f1); color: var(--text-primary); }
.nx-app .nfl__toggle:disabled { cursor: default; }
.nx-app .nfl__caret { width: 16px; height: 16px; }
.nx-app .nfl__backdrop { position: fixed; inset: 0; z-index: 420; background: transparent; border: none; pointer-events: none; }
.nx-app .nfl__menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 421; background: #fff;
  border: 1px solid var(--border-default, #e1dfdd); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 6px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.nx-app .nfl--open-up .nfl__menu { top: auto; bottom: calc(100% + 4px); }
.nx-app .nec--rfi .nff__ms .nfl__menu { max-height: min(260px, calc(100dvh - 220px)); }
.nx-app .nfl__search { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: var(--nx-type-search); font-family: var(--font);
  border: 1px solid var(--border-default, #e1dfdd); border-radius: 6px; outline: none; margin-bottom: 6px; }
.nx-app .nfl__search:focus { border-color: var(--brand-500, #0078d4); }
.nx-app .nfl__status { padding: 10px; font-size: var(--nx-type-support); color: var(--text-tertiary); text-align: center; }
.nx-app .nfl__status--error { color: var(--danger-700); }
.nx-app .nfl__opt { display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: var(--nx-type-control); font-family: var(--font);
  color: var(--text-primary); background: none; border: none; border-radius: 6px; cursor: pointer; }
.nx-app .nfl__opt:hover { background: var(--bg-subtle, #f3f2f1); }
.nx-app .nfl__opt--active { background: var(--bg-subtle, #f3f2f1); box-shadow: inset 0 0 0 2px var(--brand-500, #0078d4); }
.nx-app .nfl__opt--sel { background: var(--brand-50, #eff6fc); color: var(--brand-700, #115ea3); font-weight: 600; }

/* NexusFormYesNo — segmented toggle */
.nx-app .nff__seg { display: inline-flex; border: 1px solid var(--border-default, #e1dfdd); border-radius: 6px; overflow: hidden; }
.nx-app .nff__seg-btn { padding: 8px 18px; font-size: var(--nx-type-choice); font-family: var(--font); color: var(--text-secondary);
  background: #fff; border: none; cursor: pointer; border-right: 1px solid var(--border-default, #e1dfdd); }
.nx-app .nff__seg-btn:last-child { border-right: none; }
.nx-app .nff__seg-btn:hover:not(:disabled) { background: var(--bg-subtle, #f3f2f1); }
.nx-app .nff__seg-btn--on { background: var(--brand-600, #0f6cbd); color: #fff; font-weight: 600; }
.nx-app .nff__seg-btn--on:hover { background: var(--brand-700, #115ea3); }
.nx-app .nff__seg--disabled { opacity: 0.6; }
.nx-app .nff__seg--disabled .nff__seg-btn { cursor: default; }
/* Yes/No as native radio buttons (create form — matches mockup) */
.nx-app .nff__radios { display: inline-flex; align-items: center; gap: 28px; padding: 4px 0; }
.nx-app .nff__radio { display: inline-flex; align-items: center; gap: 8px; font-size: var(--nx-type-choice);
  font-family: var(--font); color: var(--text-primary); cursor: pointer; }
.nx-app .nff__radio input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-600, #0f6cbd); cursor: pointer; }
.nx-app .nff__radios--disabled .nff__radio { cursor: default; opacity: 0.6; }

/* NexusFormMultiSelect — chips + checkbox options (reuses .nfl__ dropdown) */
.nx-app .nff__ms .nfl__control { min-height: 38px; height: auto; flex-wrap: wrap; align-items: center; padding: 4px 10px; }
.nx-app .nec--ncr .nff__ms .nfl__menu { overflow-x: hidden; }
.nx-app .nx-issue-edit-drawer .nff__ms .nfl__menu { top: 100%; }
/* RFI multi-selects reuse the Equipment column-filter .af-lookup look. Inside the RFI create/edit
   drawer the floating menu must sit above sibling fields and the drawer footer (parity with the
   Category combobox), so scope a higher z-index only for the .nff__ms usage. */
.nx-app .nff__ms.af-lookup .af-lookup__backdrop { z-index: 420; }
.nx-app .nff__ms.af-lookup .af-lookup__menu { z-index: 421; }
/* Match the Category (.nfl__control) sizing so the RFI multi-selects line up with the single-selects. */
.nx-app .nff__ms.af-lookup .af-lookup__chips { min-height: 38px; padding: 4px 10px; border-radius: 6px; gap: 6px; }
.nx-app .nff__ms.af-lookup .af-lookup__input { min-width: 60px; padding: 2px 0; font-size: var(--nx-type-control); font-family: var(--font); }
.nx-app .nff__ms-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; max-height: 92px; overflow-y: auto; align-content: flex-start; }
/* Inline search input embedded in the chips row (replaces the separate search box in the menu) */
.nx-app .nff__ms-inline-search { flex: 1; min-width: 80px; border: none; outline: none; background: transparent;
  padding: 2px 0; font-size: var(--nx-type-control); font-family: var(--font); color: var(--text-primary); }
.nx-app .nff__ms-inline-search:focus,
.nx-app .nff__ms-inline-search:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.nx-app .nff__ms-inline-search::placeholder { color: var(--text-tertiary); }
.nx-app .nff__ms-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 4px;
  font-size: var(--nx-type-badge); background: var(--brand-50, #eff6fc); color: var(--brand-700, #115ea3); border: 1px solid var(--brand-100, #cfe4fa); }
.nx-app .nff__ms-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  min-width: 24px; min-height: 24px; padding: 0; background: none; border: none; border-radius: 3px;
  cursor: pointer; font-size: 14px; line-height: 1; color: inherit; }
.nx-app .nff__ms-chip-x:hover { color: #c4314b; }
.nx-app .nff__ms-opt { display: flex; align-items: center; gap: 8px; }
.nx-app .nff__ms-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: none; background: none; font-size: 13px; font-weight: 700; color: transparent; flex-shrink: 0; }
.nx-app .nff__ms-opt.nfl__opt--sel .nff__ms-check { color: var(--brand-600, #0f6cbd); border: none; background: none; }
.nx-app .nff__person-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 5px;
  border: 1px solid var(--brand-100); border-radius: 5px; background: var(--brand-50); color: var(--text-primary); }
.nx-app .nff__person-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  flex: 0 0 26px; border-radius: 50%; background: var(--brand-700); color: #fff; font-size: var(--nx-type-badge); font-weight: 700; }
.nx-app .nff__person-text { display: flex; min-width: 0; flex: 1; flex-direction: column; text-align: left; line-height: 1.2; }
.nx-app .nff__person-name { overflow: hidden; color: var(--text-primary); font-size: var(--nx-type-control); text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nff__person-account { overflow: hidden; color: var(--text-secondary); font-size: var(--nx-type-support); text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nff__ms-opt .nff__person-text { padding: 2px 0; }
.nx-app .nx-project-team-edit { display: grid; gap: 12px; width: 100%; min-width: 0; }
.nx-app .pd-drawer .nx-project-team-edit .nec__field {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  margin-bottom: 0;
}
/* Match the Edit project details drawer labels (.pd-form-label), which use --text-secondary.
   Scoped to the team drawer only, so no other .nec__label on any other page is affected. The
   token resolves per theme: #242424 in light, #D6D6D6 in dark. */
.nx-app .pd-drawer .nx-project-team-edit .nec__label {
  grid-column: 1;
  margin-bottom: 0;
  color: var(--text-secondary);
}
.nx-app .pd-drawer .nx-project-team-edit .nfl,
.nx-app .pd-drawer .nx-project-team-edit .nec__err {
  grid-column: 2;
  min-width: 0;
}
/* Locked (RBAC-gated) options/chips, e.g. Commissioning Manager / Supplier Quality in the Roles picker. */
.nx-app .nff__ms-opt--locked { opacity: .55; cursor: not-allowed; }
.nx-app .nff__ms-chip--locked { opacity: .7; }
.nx-app .nff__ms-chip--locked .nff__ms-chip-x { cursor: not-allowed; opacity: .5; }
/* Coloured category pills (ColorChips) — reuse the Team grid palette (.nx-team-cat-tag--N supplies bg/color).
   No background of its own so the colour class wins; just layout + room for the remove (×) button. */
.nx-app .nff__ms-chip-cat { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 10px;
  border-radius: 999px; font-size: var(--nx-type-badge); font-weight: 500; line-height: 1.4; white-space: nowrap; border: none; }
.nx-app .nff__ms-chip-cat .nff__ms-chip-x { color: inherit; font-size: 13px; }
/* Inline Category cell in the Project Access grid keeps a sensible min width so chips/menu are readable. */
.nx-app .pd-grid .nff__ms { min-width: 200px; }

/* NexusFormYesNo / MultiSelect — dark mode */
.nx-app--dark .nff__seg { border-color: #33415a; }
.nx-app--dark .nff__seg-btn { background: #1b2636; color: #cbd5e1; border-right-color: #33415a; }
.nx-app--dark .nff__seg-btn:hover:not(:disabled) { background: #3D3D3D; }
.nx-app--dark .nff__seg-btn--on { background: var(--brand-600, #0f6cbd); color: #fff; }
.nx-app--dark .nff__ms-chip { background: rgba(71,158,245,0.18); color: #6cb4f7; border-color: #2a4a6e; }
.nx-app--dark .nff__ms-check { border-color: #33415a; color: #6cb4f7; }

/* Create-equipment form + lookup — dark mode */
.nx-app--dark .nx-create-drawer { background: #1A1A1A; }
.nx-app--dark .nec__label { color: #F7F7F7; }
.nx-app--dark .nec__input,
.nx-app--dark .nec__select,
.nx-app--dark .nfl__control { background: #1b2636; border-color: #33415a; color: #F7F7F7; }
.nx-app--dark .nfl__input { color: #F7F7F7; }
.nx-app--dark .nec__input::placeholder { color: #ADADAD; }
.nx-app--dark .nec__input:focus,
.nx-app--dark .nfl__control:hover { border-color: var(--brand-400, #479ef5); }
.nx-app--dark .nec__input--readonly { background: #131c2a; color: #ADADAD; }
.nx-app--dark .nec--bldgarea .nec__textarea:focus { border-color: var(--brand-400, #479ef5); box-shadow: 0 0 0 3px rgba(71,158,245,0.2); }
.nx-app--dark .nec--issuecreate .nec__input:focus,
.nx-app--dark .nec--issuecreate .nec__select:focus,
.nx-app--dark .nec--issuecreate .nec__textarea:focus { border-color: var(--brand-400, #479ef5); box-shadow: 0 0 0 3px rgba(71,158,245,0.2); }
.nx-app--dark .nfl--disabled .nfl__control { background: #131c2a; color: #5d7593; }
.nx-app--dark .nec__dropzone { background: #1b2636; border-color: #33415a; color: #F7F7F7; }
.nx-app--dark .nec__partial-success { background: #12331a; color: #7ee787; border-color: #1f5a2b; }
.nx-app--dark .nec__footer { background: #1A1A1A; border-top-color: #3D3D3D; }
.nx-app--dark .nec__btn--ghost { background: #1b2636; color: #cbd5e1; border-color: #33415a; }
.nx-app--dark .nec__btn--ghost:hover { background: #3D3D3D; }
.nx-app--dark .nfl__menu { background: #1b2636; border-color: #33415a; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.nx-app--dark .nfl__search { background: #131c2a; border-color: #33415a; color: #F7F7F7; }
.nx-app--dark .nfl__opt { color: #cbd5e1; }
.nx-app--dark .nfl__opt:hover { background: #3D3D3D; }
.nx-app--dark .nfl__opt--active { background: #3D3D3D; box-shadow: inset 0 0 0 2px #479ef5; }
.nx-app--dark .nfl__opt--sel { background: rgba(71,158,245,0.18); color: #6cb4f7; }
.nx-app--dark .nfl__status { color: #ADADAD; }

/* ===========================================================================
   Add Columns picker (New UI) — right-docked panel
   =========================================================================== */
.nx-app .colpick-overlay { position: fixed; inset: 0; z-index: 360; background: rgba(15,23,42,0.25); }
.nx-app .colpick { position: fixed; top: 0; right: 0; height: 100vh; width: 360px; z-index: 370;
  background: var(--bg-card); border-left: 1px solid #DCE5EF; box-shadow: none; display: flex; flex-direction: column; }
.nx-app--dark .colpick { border-left-color: var(--border-default); }
/* Edit columns / Add columns panels: dock the 440px panel between the global topbar and footer and
   squeeze ONLY the page content left, matching the Create Equipment drawer. By default
   .nx-app--panel-open (see NexusSidePanel) shrinks the whole app-layout + topbar, which squeezes the
   header and footer too; the :has(.colpick) overrides below undo that for the column pickers only,
   keeping the topbar and footer full width. The .colpick element only exists in the DOM while a
   picker is open, so the scope is precise. The panel docks flush to the viewport bottom (the global
   footer was removed). */
.nx-app.nx-app--panel-open:has(.colpick:not(:where([data-nx-route-hidden] *))) .topbar {
  right: 0;
}
.nx-app.nx-app--panel-open:has(.colpick:not(:where([data-nx-route-hidden] *))) .app-layout {
  width: 100%;
  min-width: 0;
}
.nx-app.nx-app--panel-open:has(.colpick:not(:where([data-nx-route-hidden] *))) .main {
  margin-right: 0;
}
.nx-app.nx-app--panel-open:has(.colpick:not(:where([data-nx-route-hidden] *))) .page-scroll {
  margin-right: 360px;
}
.nx-app.nx-app--panel-open:has(.colpick:not(:where([data-nx-route-hidden] *))) .colpick {
  top: var(--topbar-h, 56px);
  height: auto;
  bottom: 0;
}
.nx-app .colpick__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: none; color: #fff; background: linear-gradient(135deg, #004578 0%, #0078D4 100%); }
.nx-app .colpick__title { font-size: var(--nx-type-panel); font-weight: 700; color: #fff; margin: 0; }
.nx-app .colpick__close { background: rgba(255,255,255,0.15); border: none; width: 28px; height: 28px; border-radius: 6px; font-size: 18px; line-height: 1; color: #fff; cursor: pointer; }
.nx-app .colpick__close:hover { background: rgba(255,255,255,0.30); color: #fff; }

.nx-app .colpick__tabs { display: flex; gap: var(--sp-4); padding: 0 18px; border-bottom: 1px solid var(--border-default); }
.nx-app .colpick__tab { background: none; border: none; padding: 12px 2px; font-size: var(--nx-type-tab); font-weight: 600; color: var(--text-tertiary); cursor: pointer; border-bottom: 2px solid transparent; }
.nx-app .colpick__tab--active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

.nx-app .colpick__controls { display: flex; gap: var(--sp-2); padding: 14px 18px; }
.nx-app .colpick__search-wrap { position: relative; display: flex; flex: 1; min-width: 0; }
.nx-app .colpick__search { width: 100%; border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 7px 34px 7px 10px; font-size: var(--nx-type-search); font-family: var(--nx-font); }
.nx-app .colpick__search::-webkit-search-cancel-button { display: none; }
.nx-app .colpick__search:focus { border-color: transparent; outline: 2px solid #0F6CBD; outline-offset: 0; box-shadow: none; }
.nx-app .colpick__search-clear { position: absolute; top: 50%; right: 7px; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: #242424; font-size: 16px; line-height: 1;
  cursor: pointer; transform: translateY(-50%); z-index: 2; }
.nx-app .colpick__search-clear--hidden { visibility: hidden; pointer-events: none; }
.nx-app .colpick__search-clear:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nx-app .colpick__filter { border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 7px 8px; font-size: var(--nx-type-control); font-family: var(--nx-font); background: var(--bg-card); }
.nx-app .colpick__selection-warning { margin: 0 18px 12px; padding: 9px 10px; border: 1px solid var(--warning-200, #f2cc60);
  border-radius: var(--r-sm); background: var(--warning-50, #fff8e1); color: var(--warning-800, #6d3b00);
  font-size: var(--nx-type-helper); line-height: 1.4; }

.nx-app .colpick__list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.nx-app .colpick__section-title {
  margin: 4px 10px 6px;
  color: var(--text-secondary);
  font-size: var(--nx-type-label);
  font-weight: 700;
}
.nx-app .colpick__section-title--related {
  margin-top: 18px;
}
.nx-app .colpick__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 11px 10px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.nx-app .colpick__item:hover { background: var(--bg-subtle); }
.nx-app .colpick__item--checked { background: var(--brand-50); }
.nx-app .colpick__item--checked:hover { background: var(--brand-100); }
.nx-app .colpick__label { font-size: var(--nx-type-radio); color: var(--text-primary); }
.nx-app .colpick__item input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand-600); flex-shrink: 0; }
.nx-app .colpick__empty { padding: 24px; text-align: center; font-size: var(--nx-type-helper); color: var(--text-tertiary); }

/* Accordion-style Related Tab */
.nx-app .colpick__group {
  margin-bottom: 8px;
}
.nx-app .colpick__group--base {
  margin-top: 2px;
}
.nx-app .colpick__group-content--base {
  margin-left: 0;
}
.nx-app .colpick__group-header {
  display: flex;
  align-items: center;
  width: 100%;
  background: #F3F2F1;
  border: none;
  border-radius: 4px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}
.nx-app .colpick__group-header:hover {
  background: #E1DFDD;
}
.nx-app .colpick__group-chevron {
  font-size: 11px;
  color: #605E5C;
  margin-right: var(--sp-3);
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}
.nx-app .colpick__group-chevron--expanded {
  transform: rotate(90deg);
}
.nx-app .colpick__group-title {
  font-size: var(--nx-type-radio);
  font-weight: 500;
  color: var(--text-primary);
}
.nx-app .colpick__group-content {
  margin-left: 14px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nx-app .colpick__item--nested {
  padding: 8px 12px;
  border-bottom: none;
  border-radius: 4px;
}

/* Related-tab group header: the base background is a hardcoded light grey, so it needs an
   explicit dark surface in dark mode (otherwise light bg + light text = invisible). */
.nx-app--dark .colpick__group-header { background: var(--bg-elevated); }
.nx-app--dark .colpick__group-header:hover { background: var(--border-default); }
.nx-app--dark .colpick__group-chevron { color: var(--text-tertiary); }

/* Edit columns panel (classic parity: reorder + per-row menu, fixed first column) */
.nx-app .coledit { display: flex; flex-direction: column; }
.nx-app .coledit__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: 14px 18px; border-bottom: 1px solid var(--border-default); }
.nx-app .coledit__toolbar .btn { padding: 7px 12px; font-size: var(--nx-type-btn); }
.nx-app .coledit__count { margin-left: auto; color: var(--text-secondary); font-size: var(--nx-type-badge); white-space: nowrap; }
.nx-app .coledit__count--warning { display: inline-flex; align-items: center; gap: 4px; color: var(--warning-800, #6d3b00); font-weight: 600; }
.nx-app .coledit__count--warning svg { width: 14px; height: 14px; flex: 0 0 14px; }
.nx-app .coledit__dirty { color: var(--warning-700, #8a4b08); font-size: var(--nx-type-helper); font-weight: 600; white-space: nowrap; }
.nx-app .coledit__list { flex: 1; overflow-y: auto; padding: 8px; }
.nx-app .coledit__row { position: relative; display: flex; align-items: center; gap: var(--sp-2); padding: 8px 44px 8px 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--bg-card); }
.nx-app .coledit__row:hover { background: var(--bg-subtle); }
.nx-app .coledit__row + .coledit__row { margin-top: 4px; }
.nx-app .coledit__row:not(.coledit__row--locked) { cursor: grab; }
.nx-app .coledit__row--dragging { opacity: 0.5; border-color: var(--brand-400); cursor: grabbing; }
.nx-app .coledit__row--locked { background: var(--bg-subtle); }
.nx-app .coledit__drag { display: inline-flex; color: var(--text-tertiary); cursor: grab; flex-shrink: 0; pointer-events: none; }
.nx-app .coledit__drag svg { width: 18px; height: 18px; }
.nx-app .coledit__lock { display: inline-flex; color: var(--text-tertiary); flex-shrink: 0; pointer-events: none; }
.nx-app .coledit__lock svg { width: 15px; height: 15px; }
.nx-app .coledit__name { flex: 1; font-size: var(--nx-type-value); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.nx-app .coledit__remove-btn { position: absolute; top: 50%; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text-tertiary); font-size: 18px; line-height: 1; cursor: pointer;
  transform: translateY(-50%); }
.nx-app .coledit__remove-btn:hover { background: var(--danger-50); color: var(--danger-700); }
.nx-app .coledit__move-actions { position: absolute; top: 50%; right: 40px; z-index: 2;
  display: inline-flex; gap: 2px; padding-left: 4px; background: var(--bg-card);
  opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .12s; }
.nx-app .coledit__row:hover .coledit__move-actions { background: var(--bg-subtle); }
.nx-app .coledit__row:hover .coledit__move-actions,
.nx-app .coledit__row:focus-within .coledit__move-actions { opacity: 1; pointer-events: auto; }
.nx-app .coledit__move-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-secondary);
  line-height: 1; cursor: pointer; }
.nx-app .coledit__move-btn svg { width: 16px; height: 16px; }
.nx-app .coledit__move-btn:hover:not(:disabled) { background: var(--brand-50); color: var(--brand-700); }
.nx-app .coledit__move-btn:disabled { opacity: .35; cursor: default; }
.nx-app .coledit__move-btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 1px; }
@media (hover: none), (pointer: coarse) {
  .nx-app .coledit__row:not(.coledit__row--locked) { padding-right: 104px; }
  .nx-app .coledit__move-actions { opacity: 1; pointer-events: auto; }
}
.nx-app .coledit__menu-wrap { position: relative; flex-shrink: 0; }
.nx-app .coledit__menu-btn { background: none; border: none; width: 28px; height: 28px; border-radius: var(--r-sm); font-size: 18px; line-height: 1; color: var(--text-secondary); cursor: pointer; }
.nx-app .coledit__menu-btn:hover { background: var(--bg-muted, rgba(0,0,0,0.06)); }
.nx-app .coledit__menu { position: absolute; top: 30px; right: 0; z-index: 5; min-width: 140px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-sm); box-shadow: var(--shadow-lg, 0 6px 20px rgba(15,23,42,0.18)); padding: 4px; }
.nx-app .coledit__menu-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; font-size: var(--nx-type-btn); color: var(--text-primary); border-radius: 4px; cursor: pointer; }
.nx-app .coledit__menu-item:hover:not(:disabled) { background: var(--bg-subtle); }
.nx-app .coledit__menu-item:disabled { opacity: 0.45; cursor: default; }
.nx-app .coledit__footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 14px 18px; border-top: 1px solid var(--border-default); }

/* Equipment action bar (matches classic Equipment header: New Equipment / View Status / More) */
.nx-app .eq-body { container: eqdetail / inline-size; }
.nx-app .nx-detail-tabpanel { margin: var(--sp-4) 20px 0; }

/* Equipment Details scroll containment (mockup parity): the hero, tab strip and action toolbar
   stay fixed while only the tab content (.eq-body) scrolls. The page shell's .page-scroll owns the
   scroll for other pages, so scope this to the equipment detail (.pd-detail) and let .eq-body own
   the scroll instead. The retention router keeps visited pages mounted, so the match must ignore
   routes it is holding hidden; without that guard a single visit to a detail page left .page-scroll
   permanently at overflow:hidden and every later page stopped scrolling. */
.nx-app .page-scroll:has(.pd-detail:not(:where([data-nx-route-hidden] *))) { overflow: hidden; display: flex; flex-direction: column; }
.nx-app .pd-detail { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.nx-app .pd-detail > .nx-pilltabs,
.nx-app .pd-detail > .nx-toolbar,
.nx-app .pd-detail > .nx-redtag-banner { flex-shrink: 0; }
/* Read-only notice on the Equipment Details page. .pd-detail is a flex column, so a banner added as a
   direct child must opt out of shrinking exactly like the tab strip, toolbar and red-tag banner above.
   Scoped to .pd-detail children only, so the .pd-banners used elsewhere is untouched. */
.nx-app .pd-detail > .pd-banners { flex-shrink: 0; }
.nx-app .pd-detail .eq-body { flex: 1 1 auto; min-height: 0; overflow-y: scroll; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #b0bec5 var(--gray-100); }
.nx-app .pd-detail .eq-body::-webkit-scrollbar { width: 10px; }
.nx-app .pd-detail .eq-body::-webkit-scrollbar-track { background: var(--gray-100); }
.nx-app .pd-detail .eq-body::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; border: 2px solid var(--gray-100); }
.nx-app .pd-detail .eq-body::-webkit-scrollbar-thumb:hover { background: #78909c; }
.nx-app--dark .pd-detail .eq-body { scrollbar-color: #3D3D3D #141414; }
.nx-app--dark .pd-detail .eq-body::-webkit-scrollbar-track { background: #141414; }
.nx-app--dark .pd-detail .eq-body::-webkit-scrollbar-thumb { background: #3D3D3D; border-color: #141414; }
.nx-app--dark .pd-detail .eq-body::-webkit-scrollbar-thumb:hover { background: #666666; }
/* Red Tag readiness banner (classic parity): shown on the Equipment Details page when Model Name,
   Model Number or Serial Number is empty. Styling taken from the mockup's .eq-warning-banner. */
.nx-app .nx-redtag-banner {
  background: #FEF2F2;
  border-left: 4px solid #D13438;
  padding: 10px 16px;
  margin: 0;
  font-size: 13px;
  color: #991B1B;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nx-app .nx-redtag-banner svg { flex-shrink: 0; }
.nx-app .eq-actionbar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 0; padding: 8px 0; }
.nx-app .eq-actionbar--surface { margin: var(--sp-1) var(--sp-4) 0; padding: var(--sp-2) var(--sp-4);
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.nx-app .eq-action {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid var(--border-default, #e1dfdd); cursor: pointer;
  padding: 8px 16px; border-radius: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: normal; font-family: var(--font);
  color: var(--text-secondary); white-space: nowrap; list-style: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s ease;
}
.nx-app .eq-action svg { width: 15px; height: 15px; }
.nx-app .eq-action:hover {
  background: var(--bg-subtle); border-color: var(--brand-600, #0f6cbd); color: var(--brand-700, #115ea3);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08); transform: translateY(-1px);
}
.nx-app .eq-action:active { transform: translateY(0); box-shadow: none; }
.nx-app .eq-action:focus-visible { outline: 2px solid var(--brand-500, #0078d4); outline-offset: 1px; }
.nx-app .eq-action--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(0,120,212,0.25); }
.nx-app .eq-action--primary:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(0,120,212,0.35); transform: translateY(-1px); }
.nx-app .eq-action--primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,120,212,0.3); }
.nx-app .eq-action--grad { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); }
.nx-app .eq-action--grad:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); }
.nx-app .nx-issue-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border: 1px solid var(--border-default); border-radius: var(--r-full); font-size: var(--nx-type-badge); font-weight: 700; white-space: nowrap; }
.nx-app .nx-issue-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nx-app .nx-issue-status--new { color: var(--text-secondary); background: var(--gray-50); }
.nx-app .nx-issue-status--progress { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-100); }
.nx-app .nx-issue-status--fixed { color: #5c2e91; background: #f3e8ff; border-color: #d8b4fe; }
.nx-app .nx-issue-status--verified { color: var(--success-700); background: var(--success-50); border-color: var(--success-100); }
.nx-app .nx-issue-status--rejected { color: var(--danger-700); background: var(--danger-50); border-color: var(--danger-100); }
.nx-app .nx-issue-status--cancelled { color: var(--text-tertiary); background: var(--gray-100); }
.nx-app--dark .nx-issue-status--new { color: #D1D5DB; background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.32); }
.nx-app--dark .nx-issue-status--progress { color: #93c5fd; background: rgba(29,78,216,.20); border-color: rgba(147,197,253,.32); }
.nx-app--dark .nx-issue-status--fixed { color: #d8b4fe; background: rgba(109,40,217,.22); border-color: rgba(196,181,253,.34); }
.nx-app--dark .nx-issue-status--verified { color: #6ee7b7; background: rgba(4,120,87,.20); border-color: rgba(110,231,183,.32); }
.nx-app--dark .nx-issue-status--rejected { color: #fca5a5; background: rgba(185,28,28,.20); border-color: rgba(252,165,165,.32); }
.nx-app--dark .nx-issue-status--cancelled { color: #ADADAD; background: rgba(75,85,99,.24); border-color: rgba(148,163,184,.30); }
.nx-app .nx-tag-status--red { color: var(--danger-700); background: var(--danger-50); border-color: var(--danger-500); }
.nx-app .nx-tag-status--yellow { color: var(--warning-700); background: var(--warning-50); border-color: var(--warning-500); }
.nx-app .nx-tag-status--green { color: var(--success-700); background: var(--success-50); border-color: var(--success-500); }
.nx-app .nx-tag-status--blue { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-400); }
.nx-app .nx-tag-status--white { color: var(--tag-white-fg); background: var(--tag-white-bg); border-color: var(--tag-white-border); }

/* Grid modules use one continuous page surface. Keep borders on controls and the data table, but
   remove the nested card chrome around the module action bar and reusable grid toolbar. */
.nx-app .eq-actionbar--surface,
.nx-app .toolbar {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* Building Family (scoped to the Building Areas panel): hero-style blue gradient on the create button */
.nx-app #main-tabpanel-buildingareas .eq-action--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); }
.nx-app #main-tabpanel-buildingareas .eq-action--primary:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); }
/* Administration family: match the Building Family hero-style gradient on primary create actions. */
.nx-app .eq-actionbar--admin .eq-action--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); }
.nx-app .eq-actionbar--admin .eq-action--primary:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); }
.nx-app .eq-actionbar--admin .eq-action--danger,
.nx-app .eq-action.eq-action--team-delete {
  background: var(--bg-card, #fff); color: var(--text-secondary); border-color: var(--border-default, #e1dfdd);
}
.nx-app .eq-actionbar--admin .eq-action--danger svg,
.nx-app .eq-action.eq-action--team-delete svg { color: currentColor; }
.nx-app .eq-actionbar--admin .eq-action--danger:hover:not(:disabled),
.nx-app .eq-action.eq-action--team-delete:hover:not(:disabled) {
  background: var(--bg-subtle); border-color: var(--brand-600, #0f6cbd); color: var(--brand-700, #115ea3);
  box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translateY(-1px);
}
.nx-app .eq-actionbar--admin .eq-action--danger:disabled,
.nx-app .eq-action.eq-action--team-delete:disabled {
  color: var(--text-disabled, #bdbdbd); border-color: var(--border-default, #e1dfdd); background: var(--bg-card, #fff);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.nx-app .eq-actionbar--admin .eq-action--danger:disabled svg,
.nx-app .eq-action.eq-action--team-delete:disabled svg { color: var(--text-disabled, #bdbdbd); }

/* DCEM inline editing uses the same searchable lookup and dense controls as Item master steps. */
.nx-app .dcem-inline-cell { min-width: 0; }
.nx-app .dcem-project-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nx-app .dcem-project-grid .grid-area,
.nx-app .dcem-project-grid .grid-scroll {
  min-height: 0;
}
.nx-app .dcem-project-grid .grid-footer {
  position: relative;
  z-index: 425;
}
.nx-app .grid-required-marker {
  color: var(--danger-500);
  margin-left: 2px;
}
.nx-app .im-step-inline-error {
  color: var(--danger-500);
}
.nx-app .dcem-project-grid .search-input {
  border: 1.5px solid #c8c6c4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.nx-app .dcem-project-grid .search-input:focus-within {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid #0F6CBD;
  outline-offset: 0;
}
.nx-app .dcem-project-grid .search-input--active {
  border-color: #0F6CBD;
}
.nx-app .dcem-project-grid .search-input:focus-within svg,
.nx-app .dcem-project-grid .search-input--active svg {
  color: #0F6CBD;
}
.nx-app .dcem-project-grid .search-input input:focus,
.nx-app .dcem-project-grid .search-input input:focus-visible {
  border: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  box-shadow: none !important;
}
.nx-app #dcemprojects-grid {
  width: 100%;
  table-layout: fixed;
}
.nx-app #dcemprojects-grid th,
.nx-app #dcemprojects-grid td {
  box-sizing: border-box;
  vertical-align: middle;
}
.nx-app .dcem-inline-comments {
  display: block;
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  resize: vertical;
  padding: 7px 9px;
  border: 1.5px solid #c8c6c4;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font);
}
.nx-app .dcem-inline-comments:focus-visible {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid #0078d4 !important;
  outline-offset: 0 !important;
}
.nx-app #dcemprojects-grid .dcem-inline-lookup .nfl__control {
  border: 1.5px solid #c8c6c4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.nx-app #dcemprojects-grid .dcem-inline-lookup .nfl__control:hover {
  border-color: #0078d4;
}
.nx-app #dcemprojects-grid .dcem-inline-lookup .nfl__control:focus-within {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid #0078d4;
  outline-offset: 0;
}
.nx-app #dcemprojects-grid td:has(.nfl__menu),
.nx-app #dcemprojects-grid tbody tr:has(.nfl__menu) {
  position: relative;
  z-index: 423;
  overflow: visible;
}
.nx-app #dcemprojects-grid .dcem-inline-lookup .nfl__menu {
  width: max(100%, 280px);
  max-height: 260px;
}
.nx-app #dcemprojects-grid .dcem-inline-cell .nfl__input,
.nx-app #dcemprojects-grid .dcem-inline-cell .nfl__value,
.nx-app #dcemprojects-grid .dcem-inline-cell .nfl__opt,
.nx-app #dcemprojects-grid .dcem-inline-cell .nfl__status,
.nx-app #dcemprojects-grid .dcem-inline-comments {
  font-size: var(--nx-type-grid-cell) !important;
}
.nx-app--dark .dcem-project-grid .search-input,
.nx-app--dark #dcemprojects-grid .dcem-inline-comments,
.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__control {
  border-color: #3b3a39;
}
/* Team tab: same hero-style blue gradient on the create button as Building Family */
.nx-app #main-tabpanel-team .eq-action--primary,
.nx-app .eq-action--team-create { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); }
.nx-app #main-tabpanel-team .eq-action--primary:hover,
.nx-app .eq-action--team-create:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); }
.nx-app .eq-action--icon { padding: 8px; gap: 0; }
.nx-app .eq-more { position: relative; }
.nx-app .eq-more > summary { list-style: none; }
.nx-app .eq-more > summary::-webkit-details-marker { display: none; }
.nx-app .eq-more__menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 200px;
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 4px; display: flex; flex-direction: column;
}
.nx-app .eq-more__menu button {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 9px 12px; font-size: 13px; font-family: var(--font); color: var(--text-primary); border-radius: var(--r-sm);
}
.nx-app .eq-more__menu button svg { width: 16px; height: 16px; color: var(--warning-700, #835B00); flex-shrink: 0; }
.nx-app .eq-more__menu button:hover { background: var(--bg-subtle); }
.nx-app .eq-more__menu button svg { color: var(--text-secondary); }
.nx-app .eq-more__menu button svg.eq-more__icon--print { color: var(--brand-600); }
.nx-app .eq-more__menu button svg.eq-more__icon--clone { color: var(--purple-500); }
.nx-app .eq-more__backdrop { position: fixed; inset: 0; z-index: 49; background: transparent; border: none; padding: 0; cursor: default; }
.nx-app .eq-action--icon { padding: 8px; }
.nx-app .eq-action__busy { display: inline-flex; align-items: center; margin-left: 2px; }
.nx-app .nx-selinfo { margin: 0 var(--sp-8); padding: 2px var(--sp-4) 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); font-family: var(--font); }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   Equipment detail: hero / pill tab strip / action toolbar — matches the Nexus
   mockup (projects-grid-product.html). Colors are hardcoded to the mockup hex
   values where they differ from our theme tokens. Light + dark (.nx-app--dark).
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Hero banner ──
   The Equipment detail hero now reuses the shared .pd-hero styling from the Project details
   section above, so the two detail pages render identically. The former .nx-eqhero rules were
   removed once EquipmentDetails.razor switched to .pd-hero; that page was their only consumer. */

/* ── Generic pill tab strip (.eq-detail-subnav) — NexusPillTabStrip ── */
.nx-app .nx-pilltabs { display: flex; align-items: center; gap: 4px; padding: 10px 28px;
  border-bottom: 1px solid #E5E7EB; background: #fff; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.nx-app .nx-pilltabs::-webkit-scrollbar { display: none; }
.nx-app .nx-pilltabs__item { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: #4B5563; cursor: pointer; white-space: nowrap;
  background: none; border: none; font-family: var(--font); transition: all 0.2s; }
.nx-app .nx-pilltabs__item svg { flex-shrink: 0; }
.nx-app .nx-pilltabs__item:hover { background: #F3F4F6; color: #1F2937; }
.nx-app .nx-pilltabs__item--active { background: linear-gradient(135deg, #0078D4, #1E40AF); color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,120,212,0.3); }
.nx-app .nx-pilltabs__item--active:hover { background: linear-gradient(135deg, #0078D4, #1E40AF); color: #fff !important; }
.nx-app .nx-pilltabs__item--active svg,
.nx-app .nx-pilltabs__item--active svg * { stroke: #fff; }
.nx-app .nx-pilltabs__item:focus-visible { outline: 2px solid #0078D4; outline-offset: 1px; }

/* Admin/detail variant — underline tabs (matches classic top-nav look) */
.nx-app .nx-pilltabs--admin,
.nx-app .nx-pilltabs--underline { gap: 22px; }
.nx-app .nx-pilltabs--admin .nx-pilltabs__item,
.nx-app .nx-pilltabs--underline .nx-pilltabs__item { border-radius: 0; padding: 8px 2px;
  border-bottom: 2px solid transparent; background: none; box-shadow: none; color: #4B5563; }
.nx-app .nx-pilltabs--admin .nx-pilltabs__item svg,
.nx-app .nx-pilltabs--admin .nx-pilltabs__item svg *,
.nx-app .nx-pilltabs--underline .nx-pilltabs__item svg,
.nx-app .nx-pilltabs--underline .nx-pilltabs__item svg * { stroke: currentColor; }
.nx-app .nx-pilltabs--admin .nx-pilltabs__item:hover,
.nx-app .nx-pilltabs--underline .nx-pilltabs__item:hover { background: none; color: #1F2937; }
.nx-app .nx-pilltabs--admin .nx-pilltabs__item--active,
.nx-app .nx-pilltabs--underline .nx-pilltabs__item--active { background: none !important; box-shadow: none;
  color: #0078D4 !important; border-bottom-color: #0078D4; }
.nx-app .nx-pilltabs--admin .nx-pilltabs__item--active:hover,
.nx-app .nx-pilltabs--underline .nx-pilltabs__item--active:hover { background: none !important; color: #0078D4 !important; }
.nx-app .nx-pilltabs--admin .nx-pilltabs__item--active svg,
.nx-app .nx-pilltabs--admin .nx-pilltabs__item--active svg *,
.nx-app .nx-pilltabs--underline .nx-pilltabs__item--active svg,
.nx-app .nx-pilltabs--underline .nx-pilltabs__item--active svg * { stroke: #0078D4; }

/* Project Details main tab strip — pill tabs that sit flush beneath the hero, with a gap
   before the tab panel content. Horizontal padding matches the 16px content gutter used by
   the toolbar/summary cards below, so the first pill lines up with them. */
.nx-app .pd-maintabs { padding-left: 16px; padding-right: 16px; margin-bottom: var(--sp-3); }

/* ═══════════════════════════════════════════════════════════════════════════════
   Project Details drawer-open layout — PAGE-SCOPED, ProjectDetails.razor only.

   Every rule below is gated on BOTH .nx-projdetail-page (a marker rendered only by
   ProjectDetails.razor) AND .nx-pd-page--drawer-open, so none of them can reach any other New UI
   page that uses the shared docking pattern, and none of them apply while the drawer is closed.

   Why these overrides exist: the shared docking pattern insets the page by the 500px drawer width
   with padding on .page-scroll. That narrows the content BOX while the VIEWPORT stays wide, so
   this page's viewport-based responsive fallbacks never fire — at a 1780px viewport the layout
   still believes it has 1780px while the real content box is about 880px. Each fixed track then
   collapses its flexible sibling or overflows. These rules react to the drawer marker instead.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Main tab strip: .nx-pilltabs is overflow-x:auto with white-space:nowrap items, and it hides its
   scrollbar, so the trailing tabs (Team, Building areas, Documents) were cut off at the drawer edge
   and unreachable. Wrap them onto a second row instead. The shared wrap rule in the docking block
   deliberately excludes .pd-maintabs and is left untouched. */
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .pd-maintabs {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Summary cards: fixed repeat(5, 1fr) whose step-downs to 3 and 2 columns are viewport media
   queries (1300px / 800px), so neither fires and the last two cards ran past the drawer edge.
   An auto-fit track reflows them onto a second row, and being 1fr-based each row spans exactly the
   same width as the Details section beneath it, keeping all sections in sync. */
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .pd-cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Two-column body (.pd-main + the 390px Building areas tree) only falls back to one column at a
   1100px viewport, so the 1fr column was squeezed to about 140px — one character per line — while
   the fixed track refused to shrink and forced horizontal overflow that dragged the shell sideways.
   Stack instead: Building areas moves below Project details at full readable width, reached by the
   page's existing vertical scrollbar. min-width:0 stops long unbreakable content re-introducing the
   overflow (grid children default to min-width:auto). */
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .pd-layout {
  grid-template-columns: 1fr;
}
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .pd-layout > * {
  min-width: 0;
}

/* Release the 500px docking inset once the page can no longer accommodate both the drawer and a
   usable content column — at that point the drawer stops docking beside the page and covers it as a
   blocking modal (see the shared docking block), so the inset reserves space for nothing and only
   squeezes the content.

   Expressed as tokens rather than a hard-coded breakpoint: the threshold is derived from the drawer
   width plus the narrowest content column we are willing to show, so changing either token moves the
   switch automatically. Media queries cannot read var(), hence the clamp: multiplying the remaining
   space by a large factor makes the middle term saturate, so this resolves to the full inset while
   there is room and snaps to 0 once there is not. It snaps rather than easing on purpose — a partial
   inset would leave the fixed-width drawer overlapping the content. */
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll {
  --nx-projdetail-dock-w: 500px;        /* matches .pd-drawer width */
  --nx-projdetail-content-min: 700px;   /* narrowest content column worth docking beside */
  /* Inset with margin, not padding, so the scroll container's own scrollbar stops at the drawer edge
     and stays visible/grabbable. With padding the scrollbar sat at the far right, underneath the
     drawer. Margin on the container (as opposed to margin on each child) still leaves viewport-fixed
     sibling panels alone, which is what the generic padding inset was protecting. The generic
     padding-right from the shared drawer-open rule is zeroed here to avoid a double inset. */
  padding-right: 0;
  margin-right: clamp(
    0px,
    (100vw - (var(--nx-projdetail-dock-w) + var(--nx-projdetail-content-min))) * 999,
    var(--nx-projdetail-dock-w)
  );
}

/* The shared .page-scroll hides its own scrollbar (scrollbar-width:none plus a zero-width webkit
   scrollbar in the base rule), so the margin inset alone would still leave nothing visible to grab.
   Restore a real scrollbar for this docked case only, reusing the Equipment details .eq-body recipe
   verbatim, and bring back the right border that the base rule makes transparent so the card edge
   reads cleanly beside the drawer. Grid tabs are unaffected: monitor fitting keeps .page-scroll at
   overflow:hidden there, so this only surfaces on Home, the one tab that page-scrolls. */
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll {
  scrollbar-width: thin; scrollbar-color: #b0bec5 var(--gray-100);
  border-right-color: var(--border-default, #e0e0e0);
}
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll::-webkit-scrollbar { width: 10px; }
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll::-webkit-scrollbar-track { background: var(--gray-100); }
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; border: 2px solid var(--gray-100); }
.nx-app:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll::-webkit-scrollbar-thumb:hover { background: #78909c; }
.nx-app--dark:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll { scrollbar-color: #3D3D3D #141414; }
.nx-app--dark:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll::-webkit-scrollbar-track { background: #141414; }
.nx-app--dark:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll::-webkit-scrollbar-thumb { background: #3D3D3D; border-color: #141414; }
.nx-app--dark:has(.nx-projdetail-page.nx-pd-page--drawer-open:not(:where([data-nx-route-hidden] *))) .page-scroll::-webkit-scrollbar-thumb:hover { background: #666666; }

/* Same reflow for the page-level create drawers (New RFI, New issue, and the other
   .nx-create-drawer forms opened from this page). Those reserve their width a third way: their
   setPanelOpen() call adds .nx-app--create-open, which insets .app-layout by 500px, so they never
   set the nx-pd-page--drawer-open marker and none of the rules above fired for them. The content box
   narrowed by 500px while the viewport stayed wide, so the summary cards kept their fixed
   repeat(5, 1fr) track and the body kept its two-column track with the 390px Building areas
   sibling (the exact squeeze the marker rules exist to prevent), and .page-scroll kept the hidden
   scrollbar from its base rule, leaving nothing to grab.

   Only the reflow and the scrollbar are repeated here. The 500px inset is deliberately left out: the
   width is already reserved on .app-layout for these drawers, and adding the .page-scroll inset on
   top would inset the content column twice. The main tab strip is already handled by the create
   drawer wrap rule near the top of this file, so it is not repeated either.

   Gated on .nx-projdetail-page, a marker rendered only by ProjectDetails.razor, so no other New UI
   page is affected. .pd-cards and .pd-layout render only on the Home > Details sub-tab, and grid
   tabs keep .page-scroll at overflow:hidden through monitor fitting, so the scrollbar rules surface
   on that same sub-tab only. */
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .pd-cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .pd-layout {
  grid-template-columns: 1fr;
}
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .pd-layout > * {
  min-width: 0;
}
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll {
  scrollbar-width: thin; scrollbar-color: #b0bec5 var(--gray-100);
  border-right-color: var(--border-default, #e0e0e0);
}
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll::-webkit-scrollbar { width: 10px; }
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll::-webkit-scrollbar-track { background: var(--gray-100); }
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; border: 2px solid var(--gray-100); }
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll::-webkit-scrollbar-thumb:hover { background: #78909c; }
.nx-app--dark:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll { scrollbar-color: #3D3D3D #141414; }
.nx-app--dark:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll::-webkit-scrollbar-track { background: #141414; }
.nx-app--dark:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll::-webkit-scrollbar-thumb { background: #3D3D3D; border-color: #141414; }
.nx-app--dark:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))):has(.nx-create-drawer:not([hidden] *)) .page-scroll::-webkit-scrollbar-thumb:hover { background: #666666; }

/* The strip is wrapped in .nx-admin-list-tabs (same as the Accounts admin strip) so it renders as a
   bounded card inset to the summary-card / Details-section width and narrows with them. That
   wrapper resets the strip's own margin to 0, so restore the gap before the tab panel content on
   the wrapper instead. Scoped with :has(.pd-maintabs) so the Administration list pages keep their
   existing flush spacing. */
.nx-app .nx-admin-list-tabs:has(.pd-maintabs) { margin-bottom: var(--sp-3); }

/* ── Generic action toolbar (.eq-toolbar) — NexusDetailToolbar / NexusToolbarButton ── */
.nx-app .nx-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
  padding: 10px 20px; background: #fff; border-bottom: 1px solid #E5E7EB; }
.nx-app .nx-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px;
  border: 1.5px solid #E5E7EB; background: #fff; color: #374151; cursor: pointer; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: normal; font-family: var(--font);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s ease; }
.nx-app .nx-toolbar__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.nx-app .nx-toolbar__btn:hover:not(:disabled) { background: #F9FAFB; border-color: #0F6CBD; color: #0F6CBD;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
.nx-app .nx-toolbar__btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.nx-app .nx-toolbar__btn:focus-visible { outline: 2px solid #0078D4; outline-offset: 1px; }
.nx-app .nx-toolbar__btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.nx-app .nx-toolbar__btn--accent { color: #0078D4; }
.nx-app .nx-toolbar__btn--accent:hover:not(:disabled) { color: #0F6CBD; }
.nx-app .nx-toolbar__btn--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff;
  border-color: transparent; box-shadow: 0 2px 8px rgba(0,120,212,0.25); }
.nx-app .nx-toolbar__btn--primary:hover:not(:disabled) { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%);
  color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(0,120,212,0.35); transform: translateY(-1px); }
.nx-app .nx-toolbar__btn--danger { background: #fff; color: #374151; border-color: #E5E7EB; }
.nx-app .nx-toolbar__btn--danger:hover:not(:disabled) { background: #F9FAFB; border-color: #0F6CBD;
  color: #0F6CBD; box-shadow: 0 3px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
.nx-app .nx-toolbar__btn--success { background: var(--success-500); color: #fff;
  border-color: transparent; box-shadow: 0 1px 4px rgba(14,112,14,0.3); }
.nx-app .nx-toolbar__btn--success:hover:not(:disabled) { background: var(--success-700);
  color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(14,112,14,0.4); transform: translateY(-1px); }
.nx-app .nx-toolbar__btn--camera { background: var(--teal-500); color: #fff;
  border-color: transparent; box-shadow: 0 1px 4px rgba(3,131,135,0.3); }
.nx-app .nx-toolbar__btn--camera:hover:not(:disabled) { background: var(--teal-700);
  color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(3,131,135,0.4); transform: translateY(-1px); }
.nx-app .nx-toolbar__btn-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 10px; background: rgba(255,255,255,0.28);
  color: #fff; font-size: var(--nx-type-badge); font-weight: 700; line-height: 1; margin-left: 2px; }
.nx-app .nx-toolbar__btn--danger .nx-toolbar__btn-badge { background: rgba(55,65,81,0.1); color: #374151; }
.nx-app .nx-toolbar__btn--danger:hover:not(:disabled) .nx-toolbar__btn-badge { background: rgba(15,108,189,0.14); color: #0F6CBD; }
.nx-app .nx-toolbar__sep { width: 1px; height: 24px; background: #E5E7EB; margin: 0 4px; flex-shrink: 0; }

/* ── Dark mode (.nx-app--dark) ── */
/* The hero back link is now .pd-back, whose dark-mode rules live with the Project details hero. */
.nx-app--dark .nx-pilltabs { background: #1A1A1A; border-color: #334155; }
.nx-app--dark .nx-pilltabs__item { color: #ADADAD; }
.nx-app--dark .nx-pilltabs__item:hover { background: rgba(255,255,255,0.04); color: #F7F7F7; }
.nx-app--dark .nx-pilltabs__item--active { background: rgba(0,120,212,0.08); color: #60A5FA !important; box-shadow: none; }
.nx-app--dark .nx-pilltabs__item--active:hover { background: rgba(0,120,212,0.12); color: #60A5FA !important; }
.nx-app--dark .nx-pilltabs__item--active svg,
.nx-app--dark .nx-pilltabs__item--active svg * { stroke: #60A5FA; }
.nx-app--dark .nx-pilltabs--admin .nx-pilltabs__item,
.nx-app--dark .nx-pilltabs--underline .nx-pilltabs__item { color: #C8C8C8; }
.nx-app--dark .nx-pilltabs--admin .nx-pilltabs__item:hover,
.nx-app--dark .nx-pilltabs--underline .nx-pilltabs__item:hover { background: none; color: #FFFFFF; }
.nx-app--dark .nx-pilltabs--admin .nx-pilltabs__item--active,
.nx-app--dark .nx-pilltabs--underline .nx-pilltabs__item--active { background: none !important; color: #60A5FA !important; border-bottom-color: #60A5FA; }
.nx-app--dark .nx-pilltabs--admin .nx-pilltabs__item--active:hover,
.nx-app--dark .nx-pilltabs--underline .nx-pilltabs__item--active:hover { background: none !important; color: #60A5FA !important; }
.nx-app--dark .nx-toolbar { background: #1A1A1A; border-color: #334155; }
.nx-app--dark .nx-toolbar__btn { background: #374151; color: #CBD5E1; border-color: #4B5563; }
.nx-app--dark .nx-toolbar__btn:hover:not(:disabled) { background: #4B5563; color: #F1F5F9; border-color: #4B5563; }
.nx-app--dark .nx-toolbar__btn--accent { color: #0078D4; }
.nx-app--dark .nx-toolbar__btn--accent:hover:not(:disabled) { color: #F1F5F9; }
.nx-app--dark .nx-toolbar__btn--primary { background: #106EBE; color: #fff; border-color: #0078D4; }
.nx-app--dark .nx-toolbar__btn--primary:hover:not(:disabled) { background: #0F6CBD; color: #fff; }
.nx-app--dark .nx-toolbar__btn--danger { background: #374151; color: #CBD5E1; border-color: #4B5563; }
.nx-app--dark .nx-toolbar__btn--danger:hover:not(:disabled) { background: #4B5563; color: #F1F5F9; border-color: #4B5563; }
.nx-app--dark .nx-toolbar__btn--danger .nx-toolbar__btn-badge { background: rgba(203,213,225,0.14); color: #CBD5E1; }
.nx-app--dark .nx-toolbar__btn--danger:hover:not(:disabled) .nx-toolbar__btn-badge { background: rgba(241,245,249,0.18); color: #F1F5F9; }
.nx-app--dark .nx-toolbar__btn--success { background: #359b35; color: #08170a; border-color: transparent; }
.nx-app--dark .nx-toolbar__btn--success:hover:not(:disabled) { background: #54b054; color: #08170a; }
.nx-app--dark .nx-toolbar__btn--success .nx-toolbar__btn-badge { background: rgba(255,255,255,0.30); color: #08170a; }
.nx-app--dark .nx-toolbar__btn--camera { background: #4cc2c4; color: #07231f; border-color: transparent; }
.nx-app--dark .nx-toolbar__btn--camera:hover:not(:disabled) { background: #6bd2d3; color: #07231f; border-color: transparent; }
.nx-app--dark .nx-toolbar__btn--camera .nx-toolbar__btn-badge { background: rgba(255,255,255,0.30); color: #07231f; }
.nx-app--dark .nx-toolbar__sep { background: #4B5563; }

/* Private-instance attachment name link (mirrors the classic GridLinkTemplateForPrivateInstanse). */
.nx-app .nx-attach__private-link { color: #0078D4; text-decoration: none; font-weight: 500; }
.nx-app .nx-attach__private-link:hover { text-decoration: underline; color: #0078D4; }
.nx-app .nx-attach__private-link:focus-visible { outline: 2px solid #0078D4; outline-offset: 2px; border-radius: 2px; }
.nx-app--dark .nx-attach__private-link { color: #4AA5FF; }
.nx-app--dark .nx-attach__private-link:hover { color: #4AA5FF; }


/* Refresh Pill Button */
.nx-app .refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease);
  height: 32px;
  margin-left: var(--sp-2);
}
.nx-app .refresh-pill:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.nx-app .refresh-pill:active:not(:disabled) {
  background: var(--border-default);
}
.nx-app .refresh-pill svg {
  width: 13px;
  height: 13px;
  color: var(--text-secondary);
}
.nx-app .refresh-pill__icon--spinning {
  animation: nx-spin 1s linear infinite;
}

/* ----- Clear filters pill (shown only when filters are active) ----- */
.nx-app .clear-filters-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease);
  height: 32px;
  margin-left: var(--sp-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.nx-app .clear-filters-pill:hover {
  background: #FDF3F4;
  border-color: #D13438;
  color: #A4262C;
}
.nx-app .clear-filters-pill:active {
  background: #F8E6E7;
}
.nx-app .clear-filters-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.nx-app--dark .clear-filters-pill { border-color: var(--border-default); }
.nx-app--dark .clear-filters-pill:hover { background: #3B1B1D; border-color: #D13438; color: #F1707B; }

/* ----- Grid column pager (‹ › between sets of columns) ----- */
.nx-app .grid-card { position: relative; }
.nx-app .col-pager { position: absolute; top: 6px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-full); padding: 2px 6px; box-shadow: var(--shadow-sm); }
.nx-app .col-pager__btn { width: 24px; height: 24px; border: none; background: var(--bg-subtle); border-radius: var(--r-full);
  color: var(--text-secondary); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.nx-app .col-pager__btn:hover:not(:disabled) { background: var(--brand-50); color: var(--brand-700); }
.nx-app .col-pager__btn:disabled { opacity: 0.4; cursor: default; }
.nx-app .col-pager__label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; padding: 0 2px; }

/* High contrast keyboard focus for all interactive elements */
.nx-app *:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  z-index: 1;
}

/* Remove default outline for mouse/touch users */
.nx-app *:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   EDIT DRAWER — right-side slide-over panel
   ============================================================ */
.pd-drawer-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.32);
}
.pd-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001;
  width: 500px; max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  box-shadow: -4px 0 32px rgba(0,0,0,.2);
  animation: pd-slide-in .2s ease;
}
.pd-drawer--wide { width: 820px; }
@keyframes pd-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}
.pd-drawer__header {
  padding: 16px 20px;
  background:
    radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.45) 0%, transparent 55%),
    linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.pd-drawer__title { color: #fff; font-size: 15px; font-weight: 600; margin: 0; font-family: var(--font); }
.pd-drawer__close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.85); padding: 6px; border-radius: 4px; line-height: 1;
  transition: background .12s;
}
.pd-drawer__close:hover { color: #fff; background: rgba(255,255,255,.15); }
.pd-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
/* The searchable time zone menu is absolutely positioned, but an absolutely positioned box still
   contributes to its scroll container's overflow. Opening it therefore grows the drawer body's
   scroll height, a vertical scrollbar appears, the content box narrows, and every control in the
   grid reflows. Closing it shifts everything back. Reserving the scrollbar gutter keeps the content
   width constant whether the menu is open or closed. Scoped to the project details edit drawer. */
.nx-app .pd-drawer__body:has(.pd-form-grid--ep) { scrollbar-gutter: stable; }
/* Footer row: status/error left, buttons right — buttons never shift regardless of message length */
.pd-drawer__footer {
  flex-shrink: 0; padding: 10px 20px 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  background: var(--bg-card);
}
.pd-drawer__footer-msg { flex: 1; font-size: 12px; line-height: 1.4; min-height: 18px; }
.pd-drawer__footer-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.pd-drawer__saving { color: var(--text-secondary); }
.pd-drawer__error { color: var(--danger-600,#c4301c); }
/* Error message shown at the top of a drawer body, above the first field */
.pd-drawer__body-error {
  color: var(--danger-600,#c4301c); font-size: 13px; line-height: 1.4; margin-bottom: 14px;
  padding: 8px 12px; border-radius: 6px;
  background: var(--danger-50,#fdece9); border: 1px solid var(--danger-200,#f5c2b8);
}

/* Drawer form grid */
.pd-form-section { margin-bottom: 18px; }
.pd-form-section__title { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: none; letter-spacing: normal; margin: 0 0 10px; }
.pd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-form-row { display: flex; flex-direction: column; gap: 4px; }
.pd-form-row--wide { grid-column: 1 / -1; }
.pd-form-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.pd-form-control {
  font-size: 13px; font-family: var(--font);
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-primary);
  width: 100%; box-sizing: border-box;
  outline: none; transition: border-color .15s;
}
/* Large monitors (≥ 1440px) — scale up for readability */
@media (min-width: 1440px) {
  /* Edit drawer form */
  .pd-form-label { font-size: 14px; }
  .pd-form-control { font-size: 14px; padding: 9px 11px; }
  /* Project Details — field labels & values */
  .nx-app .pd-field dt { font-size: 13px; }
  .nx-app .pd-field dd { font-size: 13px; }
  /* Cards — title, desc, number, legend, rows */
  .nx-app .pd-card__title { font-size: 13px; }
  .nx-app .pd-card__desc { font-size: 13px; }
  .nx-app .pd-card__num { font-size: 26px; }
  .nx-app .pd-card__label { font-size: 13px; }
  .nx-app .pd-card__rows li { font-size: 12px; }
  .nx-app .pd-card__legend li { font-size: 13px; }
  /* Project Team */
  .nx-app .pd-team__name { font-size: 13px; }
  .nx-app .pd-team__role { font-size: 12px; }
  /* Hero title */
  .nx-app .pd-hero__title { font-size: 24px; }
  /* Grid toolbar — view selector, chips, buttons, search */
  .nx-app .view-selector { font-size: 14px; }
  .nx-app .chip { font-size: 13px; }
  .nx-app .add-filter-pill { font-size: 13px; }
  .nx-app .tool-btn { font-size: 13px; }
  .nx-app .search-input input { font-size: 14px; }
  /* Summary card section titles & action buttons */
  .nx-app .pd-panel__title { font-size: 13px; }
  .nx-app .pd-panel__count { font-size: 13px; }
  .nx-app .pd-btn--sm { font-size: 13px; }
  .nx-app .pd-btn { font-size: 12px; }
  /* Equipment search dropdown */
  .nx-app .pd-eq-dropdown__item { font-size: 14px; }
  /* Tabs & subtabs */
  .nx-app .pd-tab { font-size: 14px; padding: 12px 15px; }
  .nx-app .pd-subtab { font-size: 14px; }
  /* Edit drawer title */
  .pd-drawer__title { font-size: 17px; }
  /* Building Areas tree */
  .nx-app .pd-aside__title { font-size: 13px !important; }
  .nx-app .pd-tree__row { font-size: 13px; }
  .nx-app .pd-tree__hint { font-size: 12px; }
}

/* Extra-large monitors (≥ 1920px / 24"+) — comfortable reading scale */
@media (min-width: 1920px) {
  /* Tabs & subtabs */
  .nx-app .pd-tab { font-size: 15px; padding: 13px 17px; }
  .nx-app .pd-subtab { font-size: 15px; }
  /* Edit drawer forms */
  .pd-form-label { font-size: 15px; }
  .pd-form-control { font-size: 15px; padding: 10px 12px; }
  .pd-drawer__title { font-size: 18px; }
  /* Project Details fields */
  .nx-app .pd-field dt { font-size: 14px; }
  .nx-app .pd-field dd { font-size: 14px; }
  /* Summary cards */
  .nx-app .pd-card__title { font-size: 14px; }
  .nx-app .pd-card__desc { font-size: 14px; }
  .nx-app .pd-card__num { font-size: 28px; }
  .nx-app .pd-card__label { font-size: 14px; }
  .nx-app .pd-card__rows li { font-size: 13px; }
  .nx-app .pd-card__legend li { font-size: 14px; }
  /* Project Team */
  .nx-app .pd-team__name { font-size: 14px; }
  .nx-app .pd-team__role { font-size: 13px; }
  /* Hero */
  .nx-app .pd-hero__title { font-size: 26px; }
  /* Panel titles */
  .nx-app .pd-panel__title { font-size: 14px; }
  .nx-app .pd-panel__count { font-size: 14px; }
  /* Buttons */
  .nx-app .pd-btn--sm { font-size: 14px; }
  /* Grid toolbar */
  .nx-app .view-selector { font-size: 15px; }
  .nx-app .chip { font-size: 14px; }
  .nx-app .search-input input { font-size: 15px; }
  /* Grid table — header + body + footer */
  .nx-app table.tbl { font-size: 14px; }
  .nx-app table.tbl thead th { font-size: 14px; }
  .nx-app .status { font-size: 14px; }
  .nx-app .tag { font-size: 14px; }
  .nx-app .person__name { font-size: 14px; }
  .nx-app .date-cell { font-size: 14px; }
  .nx-app .grid-footer__info, .nx-app .grid-footer__page-size { font-size: 13px; }
  /* Equipment dropdown */
  .nx-app .pd-eq-dropdown__item { font-size: 15px; }
  /* Building Areas tree */
  .nx-app .pd-aside__title { font-size: 14px !important; }
  .nx-app .pd-tree__row { font-size: 14px; }
  .nx-app .pd-tree__hint { font-size: 13px; }
}
.pd-form-control:focus { border-color: #0078d4; box-shadow: 0 0 0 1px #0078d4; outline: none; }
select.pd-form-control { appearance: auto; cursor: pointer; }
textarea.pd-form-control { resize: vertical; min-height: 72px; }
textarea.pd-form-control--single-line { min-height: 0; height: auto; resize: none; overflow-y: hidden; }
.pd-form-control[readonly] { background: var(--bg-subtle); color: var(--text-tertiary); cursor: default; }
.pd-form-control--readonly { background: #f5f5f5 !important; color: #888 !important; cursor: not-allowed !important; border-color: #e0e0e0 !important; }.pd-drawer__info-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff4ce; border: 1px solid #f0d060; border-radius: 6px; font-size: 12px; color: #6b4f00; margin-bottom: 12px; }

/* Shared admin detail drawer treatment used by Item master and Technical category details. */
.nx-app .pd-drawer--admin-detail .pd-form-control,
.nx-app .pd-drawer--admin-detail .nec__input,
.nx-app .pd-drawer--admin-detail .nfl__control,
.nx-app .pd-drawer--admin-detail .nfl__menu,
.nx-app .pd-drawer--admin-detail .nfl__search {
  background: var(--bg-elevated) !important;
}
.nx-app .pd-drawer--admin-detail .nfl--disabled .nfl__control {
  background: var(--gray-100) !important;
  border-color: var(--border-default) !important;
}
.nx-app .pd-drawer--admin-detail .nfl__control:hover,
.nx-app .pd-drawer--admin-detail .nfl--disabled .nfl__control:hover,
.nx-app .pd-drawer--admin-detail .nfl--disabled .nfl__control:focus-within {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}
.nx-app .pd-drawer--admin-detail .nfl__control:focus-within,
.nx-app .pd-drawer--admin-detail .pd-form-control:focus,
.nx-app .pd-drawer--admin-detail .pd-form-control:focus-visible,
.nx-app .pd-drawer--admin-detail .nec__input:focus,
.nx-app .pd-drawer--admin-detail .nec__input:focus-visible,
.nx-app .pd-drawer--admin-detail input:not(.nfl__input):focus,
.nx-app .pd-drawer--admin-detail input:not(.nfl__input):focus-visible,
.nx-app .pd-drawer--admin-detail select:focus,
.nx-app .pd-drawer--admin-detail select:focus-visible,
.nx-app .pd-drawer--admin-detail textarea:focus,
.nx-app .pd-drawer--admin-detail textarea:focus-visible {
  border-color: #0078d4 !important;
  box-shadow: 0 0 0 1px #0078d4 !important;
  outline: none !important;
  outline-offset: 0 !important;
}
/* Dark-mode parity: match the base .pd-form-control:focus lighter blue. */
.nx-app--dark .pd-drawer--admin-detail .nfl__control:focus-within,
.nx-app--dark .pd-drawer--admin-detail :is(.pd-form-control, .nec__input, input:not(.nfl__input), select, textarea):focus,
.nx-app--dark .pd-drawer--admin-detail :is(.pd-form-control, .nec__input, input:not(.nfl__input), select, textarea):focus-visible {
  border-color: #479EF5 !important;
  box-shadow: 0 0 0 1px #479EF5 !important;
}
/* Drawer controls use one shared 2px focus indicator. Lookup and multi-select inputs defer to
   their focus-within wrapper so nested controls do not render a double outline. */
.nx-app .pd-drawer :is(input:not(.nfl__input), select, textarea, .pd-form-control, .nec__input):focus-visible,
.nx-app .pd-drawer .nfl__control:focus-within,
.nx-app .nx-create-drawer :is(input:not(.nfl__input), select, textarea, .pd-form-control, .nec__input):focus-visible,
.nx-app .nx-create-drawer .nfl__control:focus-within {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
  box-shadow: none !important;
}
.nx-app .pd-drawer .nfl__input:focus-visible,
.nx-app .nx-create-drawer .nfl__input:focus-visible {
  outline: none !important;
}
/* Windows High Contrast / forced-colors: box-shadow rings are ignored, so restore a real
   outline for keyboard focus visibility (WCAG 2.4.7) only in that mode. */
@media (forced-colors: active) {
  .nx-app .pd-drawer :is(textarea, select, input:not(.nfl__input), .pd-form-control):focus-visible,
  .nx-app .pd-drawer .nfl__control:focus-within,
  .nx-app .nx-create-drawer :is(textarea, select, input:not(.nfl__input), .pd-form-control):focus-visible,
  .nx-app .nx-create-drawer .nfl__control:focus-within {
    outline: 2px solid Highlight !important;
    outline-offset: 1px !important;
  }
}

.pd-required-star { color: #a4262c; font-weight: 700; }
.pd-required { color: #a4262c; font-weight: 700; margin-left: 2px; }
.pd-field-error { display: block; margin-top: 3px; font-size: 11px; color: #a4262c; }
.pd-form-control--error { border-color: #a4262c !important; }
.pd-form-control--error:focus { box-shadow: 0 0 0 2px rgba(164,38,44,.18) !important; }
/* Reserved space for a conditional inline field error. The slot is always in the DOM with a fixed
   line box, so showing or hiding the message never changes the row height and never shifts the
   neighbouring controls in the drawer grid. */
.nx-app .pd-field-error-slot { min-height: 16px; line-height: 16px; margin-top: 3px; }
.nx-app .pd-field-error-slot .pd-field-error { margin-top: 0; line-height: 16px; }

/* ── Account typeahead (Edit User Details) ── */
.pd-typeahead { position: relative; }
.pd-typeahead__list {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 41;
  margin: 0; padding: 4px; list-style: none;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14); max-height: 240px; overflow-y: auto;
}
.pd-typeahead__item {
  padding: 7px 10px; font-size: 13px; border-radius: 4px; cursor: pointer;
  color: var(--text-primary);
}
.pd-typeahead__item:hover { background: rgba(0,120,212,.10); }
.pd-typeahead__selected { display: block; margin-top: 4px; font-size: 11px; color: var(--text-secondary); }
.pd-typeahead__selected strong { color: var(--text-primary); font-weight: 600; }
.nx-app--dark .pd-typeahead__item:hover { background: rgba(71,158,245,.18); }

/* ── Role checklist (multiselect, styled to match the drawer form controls) ── */
.pd-checklist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px;
  padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 6px;
  background: var(--bg-card);
}
.pd-checklist--error { border-color: #a4262c; }
.pd-checklist__item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.pd-checklist__item input { width: 15px; height: 15px; accent-color: #0078d4; cursor: pointer; flex-shrink: 0; }
@media (max-width: 620px) { .pd-checklist { grid-template-columns: 1fr; } }
.nx-app--dark .pd-checklist--error { border-color: #f87171; }

/* ── Multiselect picker (Roles in the edit form + inline Category cell in the Project Access grid) ── */
.nx-app .pd-multiselect { position: relative; display: inline-block; width: 100%; min-width: 180px; }
.nx-app .pd-multiselect--block { display: block; }
.nx-app .pd-multiselect__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; box-sizing: border-box;
  border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-card);
  font-size: 13px; color: var(--text-primary); cursor: pointer; text-align: left;
}
.nx-app .pd-multiselect__trigger:hover { border-color: var(--brand-400); }
.nx-app .pd-multiselect.is-open .pd-multiselect__trigger { border-color: #0078d4; box-shadow: 0 0 0 2px rgba(0,120,212,.14); }
.nx-app .pd-multiselect--error .pd-multiselect__trigger { border-color: #a4262c; }
.nx-app .pd-multiselect__trigger.is-placeholder .pd-multiselect__value { color: var(--text-tertiary); }
.nx-app .pd-multiselect__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .pd-multiselect__trigger svg { flex-shrink: 0; color: var(--text-tertiary); transition: transform var(--duration-normal) var(--ease); }
.nx-app .pd-multiselect.is-open .pd-multiselect__trigger svg { transform: rotate(180deg); }
.nx-app .pd-multiselect__panel {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40;
  max-height: 260px; overflow-y: auto; padding: 4px;
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.nx-app .pd-multiselect__opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.nx-app .pd-multiselect__opt:hover { background: rgba(0,120,212,.10); }
.nx-app .pd-multiselect__opt input { width: 15px; height: 15px; accent-color: #0078d4; cursor: pointer; flex-shrink: 0; }
.nx-app .pd-multiselect__opt.is-disabled { opacity: .55; cursor: not-allowed; }
.nx-app .pd-multiselect__opt.is-disabled input { cursor: not-allowed; }
.nx-app--dark .pd-multiselect__opt:hover { background: rgba(71,158,245,.18); }

/* ── Project Access grid toolbar (Save / Remove / Add + keyword filter) ── */
.nx-app .pd-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0 12px; }
.nx-app .pd-grid-toolbar__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nx-app .pd-grid-toolbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nx-app .pd-grid-toolbar .pd-search { min-width: 220px; }

/* small button variant + danger colour for grid actions */
.nx-app .btn--sm { padding: 6px 12px; font-size: 12px; }
.nx-app .btn--sm svg { width: 14px; height: 14px; }
.nx-app .btn--danger { background: #a4262c; color: #fff; box-shadow: 0 1px 3px rgba(164,38,44,.3); border: 1px solid transparent; }
.nx-app .btn--danger:hover { background: #8a1f24; box-shadow: 0 4px 12px rgba(164,38,44,.35); transform: translateY(-1px); }
.nx-app .btn[disabled] { opacity: .6; cursor: not-allowed; pointer-events: none; }

/* ── Editable Project Access grid: checkbox column + dispatch + selected row ── */
.nx-app .pd-grid .pd-grid__check { width: 40px; text-align: center; }
.nx-app .pd-grid .pd-grid__check input, .nx-app .pd-grid .pd-grid__dispatch { width: 16px; height: 16px; accent-color: #0078d4; cursor: pointer; }
.nx-app .pd-grid tbody tr.is-selected { background: rgba(0,120,212,.06); }
.nx-app .pd-grid td { overflow: visible; }
.nx-app .pd-grid .pd-multiselect { min-width: 200px; }
.nx-app--dark .pd-grid tbody tr.is-selected { background: rgba(71,158,245,.12); }

/* ── Sortable column headers (CSS-drawn caret, no glyph) ── */
.nx-app .pd-sort {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-weight: 600;
}
.nx-app .pd-sort:hover { color: #0f6cbd; }
.nx-app .pd-sort:focus-visible { outline: 2px solid #0f6cbd; outline-offset: 2px; border-radius: 3px; }
.nx-app .pd-sort__caret { width: 0; height: 0; display: inline-block; }
.nx-app .pd-sort__caret.is-asc {
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor;
}
.nx-app .pd-sort__caret.is-desc {
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
}

/* ── Grid pager (10 rows/page) ── */
.nx-app .pd-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 2px 2px; font-size: 12.5px; color: var(--text-secondary, #605e5c);
}
.nx-app .pd-pager__btn {
  border: 1px solid var(--border-default, #d1d1d1); background: var(--bg-surface, #fff);
  border-radius: 4px; padding: 4px 12px; font: inherit; cursor: pointer; color: var(--text-primary, #242424);
}
.nx-app .pd-pager__btn:hover:not(:disabled) { background: var(--bg-subtle, #f3f2f1); }
.nx-app .pd-pager__btn:disabled { opacity: .5; cursor: default; }
.nx-app .pd-pager__info { min-width: 96px; text-align: center; }
.nx-app--dark .pd-pager__btn { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .pd-pager__btn:hover:not(:disabled) { background: #16213a; }


/* ── Click-outside backdrop for the multiselect / typeahead dropdowns (closes on any outside click) ── */
.nx-app .pd-ms-backdrop {
  position: fixed; inset: 0; z-index: 39;
  background: transparent; border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; cursor: default;
}

/* ── Add Project Access picker: active-project checklist + selected-project chips ── */
.nx-app .pd-picklist {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 240px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-card);
}
.nx-app .pd-picklist__opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px;
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.nx-app .pd-picklist__opt:hover { background: rgba(0,120,212,.10); }
.nx-app--dark .pd-picklist__opt:hover { background: rgba(71,158,245,.18); }
.nx-app .pd-picklist__opt input { width: 15px; height: 15px; accent-color: #0078d4; cursor: pointer; flex-shrink: 0; }
.nx-app .pd-picklist__empty, .nx-app .pd-selected-list__empty {
  padding: 10px 12px; font-size: 12px; color: var(--text-tertiary);
  border: 1px dashed var(--border-default); border-radius: 6px; background: var(--bg-subtle);
}
.nx-app .pd-selected-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
}
.nx-app .pd-selected-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: 6px; background: var(--bg-subtle);
  border: 1px solid var(--border-default); font-size: 13px; color: var(--text-primary);
}
.nx-app .pd-selected-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .pd-selected-item__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; padding: 0;
  background: transparent; border: 0; border-radius: 4px; cursor: pointer; color: var(--text-secondary);
}
.nx-app .pd-selected-item__remove:hover { background: rgba(164,38,44,.12); color: #a4262c; }
.nx-app--dark .pd-selected-item__remove:hover { background: rgba(248,113,113,.18); color: #f87171; }

/* ── New User Onboarding create form host ──────────────────────────────────────────────
   The classic <CreateNewUserOnboarding> (Telerik) always renders its own internal title row
   (label + X close button) and default-styled Save/Cancel buttons. When embedded in the New
   UI drawer — which already provides a "New User Onboarding" header with a close button — that
   internal header is a duplicate. Hide it and restyle the footer buttons to match the design
   system, all scoped to .nx-ubc-host so the classic page is unaffected. */
.nx-app .nx-ubc-host .row:has(> .col-md-2) { display: none !important; }
.nx-app .nx-ubc-host .row:has(> .col-md-2) + br { display: none; }
/* Telerik Card chrome is redundant inside the drawer body — flatten it. */
.nx-app .nx-ubc-host .k-card { border: 0; background: transparent; box-shadow: none; }
.nx-app .nx-ubc-host .k-card > div[style] { padding: 0 !important; }
/* Footer buttons: right-aligned, Cancel-left / Save-right to match other New UI forms (e.g. Create new
   Equipment). DOM order is Save-then-Cancel, so row-reverse + flex-start yields Cancel | Save, right-aligned. */
.nx-app .nx-ubc-host .k-form-buttons { display: flex; flex-direction: row-reverse; gap: 8px; justify-content: flex-start; margin-top: 16px; }
.nx-app .nx-ubc-host .form-btn.k-button {
  border-radius: 6px; font-weight: 600; font-size: 14px; min-height: 36px; padding: 8px 16px; box-shadow: none;
}
.nx-app .nx-ubc-host .k-form-submit.form-btn {
  background: var(--brand-600, #0f6cbd) !important; border-color: var(--brand-600, #0f6cbd) !important; color: #fff !important;
}
.nx-app .nx-ubc-host .k-form-submit.form-btn:hover {
  background: var(--brand-700, #115ea3) !important; border-color: var(--brand-700, #115ea3) !important;
}
.nx-app .nx-ubc-host .form-btn.k-button:not(.k-form-submit) {
  background: var(--bg-card, #fff) !important; border: 1px solid var(--border-default, #d1d1d1) !important; color: var(--text-primary, #242424) !important;
}
.nx-app .nx-ubc-host .form-btn.k-button:not(.k-form-submit):hover { background: var(--bg-subtle, #f5f5f5) !important; }

/* Selected Projects list: replace the flat grey band with rounded-rectangle "chips" that read like the
   New UI selected-item pills, scoped to .nx-ubc-host so the classic page keeps its original styling. */
.nx-app .nx-ubc-host .selected-Issues {
  background: var(--brand-50, #eff6fc) !important;
  border: 1px solid var(--brand-200, #cfe4fa);
  border-radius: 14px;
  padding: 4px 6px 4px 14px;
  align-items: center;
  min-height: 32px;
  color: var(--text-primary, #242424);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
}
.nx-app .nx-ubc-host .crossButton,
.nx-app .nx-ubc-host .crossButton.k-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text-secondary, #616161) !important;
  min-width: 24px; width: 24px; height: 24px; padding: 0;
  border-radius: 50%;
}
.nx-app .nx-ubc-host .crossButton:hover,
.nx-app .nx-ubc-host .crossButton.k-button:hover {
  background: rgba(164,38,44,.12) !important; color: #a4262c !important;
}
.nx-app--dark .nx-ubc-host .selected-Issues {
  background: rgba(96,165,250,.14) !important;
  border-color: rgba(96,165,250,.35);
  color: var(--text-primary, #e6e6e6);
}
.nx-app--dark .nx-ubc-host .crossButton:hover,
.nx-app--dark .nx-ubc-host .crossButton.k-button:hover {
  background: rgba(248,113,113,.18) !important; color: #f87171 !important;
}

/* "Saving…" overlay for the embedded create form. The New UI host (UserOnboarding.razor) owns the
   actual POST via HandleCreateSubmitted, so it drives this overlay while _creating is true — giving the
   user save feedback without modifying the shared classic <CreateNewUserOnboarding> submit button. */
.nx-app .pd-drawer__body:has(> .nx-ubc-saving) { position: relative; }
.nx-app .nx-ubc-saving {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.66); backdrop-filter: blur(1px);
  font-size: 14px; font-weight: 600; color: var(--text-primary, #242424);
}
.nx-app .nx-ubc-saving__spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--brand-200, #cfe4fa); border-top-color: var(--brand-600, #0f6cbd);
  animation: nx-spin .7s linear infinite;
}
.nx-app--dark .nx-ubc-saving { background: rgba(24,24,27,.66); color: #e6e6e6; }
.nx-app--dark .nx-ubc-saving__spinner { border-color: rgba(96,165,250,.35); border-top-color: #60a5fa; }

/* ── New UI look for the embedded onboarding form controls ──────────────────────────────
   Restyle the classic Telerik inputs (textboxes, comboboxes, picklists/multiselects) so the
   embedded form reads like the New UI NexusFormLookup / NexusFormMultiSelect controls the user
   referenced (Parent Account = searchable dropdown, Relationship Type = multiselect): 13px text,
   1px #d1d1d1 border, 4px radius and a subtle focus ring. All scoped to .nx-ubc-host so classic
   pages and every other Telerik usage in the app are untouched. */
.nx-app .nx-ubc-host .content-label-style {
  font-size: 13px; font-weight: 600; color: var(--text-secondary, #424242);
  display: block; margin-bottom: 4px;
}
.nx-app .nx-ubc-host .k-form-field + .k-form-field,
.nx-app .nx-ubc-host .demo-section > .k-form .k-form-items > * + * { margin-top: 14px; }
.nx-app .nx-ubc-host .k-input,
.nx-app .nx-ubc-host .k-picker {
  font-size: 13px !important;
  border: 1px solid var(--border-default, #d1d1d1) !important;
  border-radius: 4px !important;
  background: var(--bg-card, #fff) !important;
  min-height: 34px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nx-app .nx-ubc-host .k-input:hover,
.nx-app .nx-ubc-host .k-picker:hover { border-color: #b0b0b0 !important; }
.nx-app .nx-ubc-host .k-input.k-focus,
.nx-app .nx-ubc-host .k-picker.k-focus,
.nx-app .nx-ubc-host .k-input:focus-within,
.nx-app .nx-ubc-host .k-picker:focus-within {
  border-color: #0078d4 !important;
  box-shadow: 0 0 0 2px rgba(0,120,212,.18) !important;
}
.nx-app .nx-ubc-host .k-input-inner {
  font-size: 13px !important;
  padding: 6px 10px !important;
  color: var(--text-primary, #242424) !important;
}
.nx-app .nx-ubc-host .k-input-inner::placeholder { color: var(--text-tertiary, #909090) !important; opacity: 1; }
/* Caret / clear buttons flatten into the field */
.nx-app .nx-ubc-host .k-input-button,
.nx-app .nx-ubc-host .k-picker > .k-button {
  background: transparent !important; border: 0 !important; color: var(--text-secondary, #616161) !important;
}
/* Multiselect / picklist chips */
.nx-app .nx-ubc-host .k-chip { border-radius: 4px !important; font-size: 12px !important; }
/* Validation text sizing */
.nx-app .nx-ubc-host .k-form-error,
.nx-app .nx-ubc-host .k-messagebox-error { font-size: 12px !important; }

/* New User Onboarding form: while the classic form loads (OnInitialized data + email checks) it renders
   SpinnerComponent's .loading-overlay — a translucent grey sheet over the whole card. The New UI drawer
   already animates in, so suppress that grey overlay/spinner inside the hosted form. Scoped to
   .nx-ubc-host so the classic page keeps its loader. */
.nx-app .nx-ubc-host .loading-overlay { display: none !important; }

/* "MSFT Approvers:" field: the classic template emits the label, then a separate <span class="info-icon">,
   then the combo box as siblings, so the info icon wraps onto its own line under the label. Lay the field
   out as a flex row that keeps the label + info icon together on line 1 and pushes the input to line 2.
   Covers both Telerik field wrappers; scoped to .nx-ubc-host. */
.nx-app .nx-ubc-host .k-form-field:has(> .info-icon),
.nx-app .nx-ubc-host .k-form-field-wrap:has(> .info-icon) {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px;
}
.nx-app .nx-ubc-host .k-form-field:has(> .info-icon) > .content-label-style,
.nx-app .nx-ubc-host .k-form-field-wrap:has(> .info-icon) > .content-label-style {
  order: 1; flex: 0 0 auto; width: auto; margin: 0;
}
.nx-app .nx-ubc-host .k-form-field:has(> .info-icon) > .info-icon,
.nx-app .nx-ubc-host .k-form-field-wrap:has(> .info-icon) > .info-icon {
  order: 2; flex: 0 0 auto; margin: 0; display: inline-flex; align-items: center;
}
.nx-app .nx-ubc-host .k-form-field:has(> .info-icon) > *:not(.content-label-style):not(.info-icon),
.nx-app .nx-ubc-host .k-form-field-wrap:has(> .info-icon) > *:not(.content-label-style):not(.info-icon) {
  order: 3; flex: 0 0 100%;
}

/* Dark mode drawer overrides */
.nx-app--dark .pd-form-control { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark .pd-form-control:focus { border-color: #479EF5; box-shadow: 0 0 0 2px rgba(71,158,245,.2); }
/* Readonly fields in dark mode — use dark subtle bg, not hardcoded white */
.nx-app--dark .pd-form-control--readonly { background: #141414 !important; color: var(--text-tertiary) !important; border-color: var(--border-default) !important; }
/* Readonly label icon — slightly more visible in dark mode */
.nx-app--dark .pd-form-label svg { opacity: .7; }
/* Project Team roster — role label + member name readable in dark mode (role was hardcoded #424242) */
.nx-app--dark .pd-team__role { color: #ADADAD; }
.nx-app--dark .pd-team__name { color: #F7F7F7; }
.nx-app--dark .pd-team__item--empty .pd-team__name { color: #ADADAD; }

/* ============================================================
   DARK MODE — .nx-app--dark overrides (New UI only)
   Follows Microsoft Fluent Dark theme token values.
   ============================================================ */
.nx-app--dark {
  color-scheme: dark;

  /* Fluent 2 Web dark neutral surfaces */
  --bg-app:       #0F0F0F;
  --bg-card:      #1A1A1A;
  --bg-elevated:  #242424;
  --neutral-bg-3: #242424;
  --bg-subtle:    #1F1F1F;
  --bg-muted:     #141414;

  /* Fluent neutral strokes */
  --border-subtle:  #292929;
  --border-default: #3D3D3D;
  --border-strong:  #666666;

  /* Fluent neutral foregrounds */
  --text-primary:   #F7F7F7;
  --text-secondary: #D6D6D6;
  --text-tertiary:  #ADADAD;
  --text-inverse:   #1A1A1A;

  /* Fluent brand colors for dark surfaces */
  --brand-primary: #479EF5;
  --brand-50:  #0C3B5E;
  --brand-100: #0F548C;
  --brand-200: #115EA3;
  --brand-400: #62ABF5;
  --brand-500: #479EF5;
  --brand-600: #479EF5;
  --brand-700: #62ABF5;
  --brand-800: #77B7F7;
  --brand-900: #96C6FA;
  --admin-control-focus: #479EF5;
  --admin-control-focus-ring: rgba(71,158,245,.2);

  /* Fluent dark neutral scale */
  --gray-25:  #0F0F0F;
  --gray-50:  #141414;
  --gray-100: #1A1A1A;
  --gray-200: #242424;
  --gray-300: #3D3D3D;
  --gray-400: #666666;
  --gray-500: #999999;
  --gray-600: #ADADAD;
  --gray-700: #D6D6D6;
  --gray-800: #F0F0F0;
  --gray-900: #FFFFFF;

  /* Semantic tints flip */
  --success-50: #0E2B0E;
  --warning-50: #332900;
  --danger-50:  #3B1113;
  --info-50:    #0C2D48;
  --purple-50:  #2B1838;
  --teal-50:    #0B3031;

  /* Shadows stronger in dark */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-ring: 0 0 0 3px rgba(71,158,245,0.32);
}

.nx-app--dark .pd-panel--admin-associated {
  --admin-grid-header-bg: #292A4A;
  --admin-grid-header-text: #C6C7FF;
  --admin-grid-header-hover-bg: #34365C;
  --admin-grid-header-hover-text: #E1E2FF;
  --admin-grid-row-even-bg: rgba(91, 95, 199, 0.08);
  --admin-grid-row-even-hover-bg: rgba(91, 95, 199, 0.18);
  --admin-grid-row-odd-hover-bg: rgba(91, 95, 199, 0.12);
}
.nx-app--dark .pd-panel--admin-associated table.tbl tbody td {
  color: var(--text-primary);
  border-bottom-color: var(--border-default);
}
.nx-app--dark .its-panel-search {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-tertiary);
}
.nx-app--dark .its-panel-search__input {
  color: var(--text-primary);
}

/* Sidebar — dark (deep navy to match Fluent dark shell) */
.nx-app--dark .sidebar {
  background: linear-gradient(180deg, #1A1F2E 0%, #141824 100%);
  border-right: 1px solid #2A3040;
  scrollbar-color: #3D3D3D transparent; }
.nx-app--dark .sidebar::-webkit-scrollbar-thumb { background: #3D3D3D; }
.nx-app--dark .sidebar__section-label { color: #ADADAD; }
.nx-app--dark .sidebar__section-toggle:hover { background: rgba(71,158,245,0.06); }
.nx-app--dark .sidebar__section-chevron { color: #ADADAD; }
.nx-app--dark .sidebar__item { color: #F7F7F7; border-color: transparent; }
.nx-app--dark .sidebar__item:hover { background: rgba(71,158,245,0.08); color: #F7F7F7; border-color: rgba(71,158,245,0.12); }
.nx-app--dark .sidebar__item--active { background: rgba(71,158,245,0.14); color: #479EF5; border-color: rgba(71,158,245,0.2); }
.nx-app--dark .sidebar__item--active::before { background: #479EF5; }
.nx-app--dark .sidebar__badge--danger { background: rgba(196,43,28,0.25); color: #f87171; }
.nx-app--dark .sidebar__badge--primary { background: rgba(71,158,245,0.18); color: #479EF5; }
.nx-app--dark .sidebar__divider { background: linear-gradient(90deg, transparent, #3D3D3D, transparent); }
.nx-app--dark .sidebar__offline { background: transparent; border-bottom-color: #3D3D3D; }
.nx-app--dark .sidebar__offline-label { color: #ADADAD; }
.nx-app--dark .toggle__slider { background: #3D3D3D; }
.nx-app--dark .toggle input:checked + .toggle__slider { background: #0078D4; }
.nx-app--dark .sidebar__search-input-wrap { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .sidebar__search-input-wrap:focus-within { border-color: #479EF5; box-shadow: 0 0 0 1px rgba(71,158,245,0.2); }
.nx-app--dark .sidebar__search-input { color: #F7F7F7; }
.nx-app--dark .sidebar__search-input::placeholder { color: #666666; }
.nx-app--dark .sidebar__search-results { background: #1A1A1A; border-color: #3D3D3D; box-shadow: 0 6px 16px rgba(0,0,0,0.5); }
.nx-app--dark .sidebar__search-result { color: #F7F7F7; }
.nx-app--dark .sidebar__search-result:hover { background: rgba(71,158,245,0.1); }
.nx-app--dark .sidebar__search-result--active { background: rgba(71,158,245,0.15); outline: 2px solid #479EF5; outline-offset: -2px; }
.nx-app--dark .sidebar__search-result-name { color: #F7F7F7; }
.nx-app--dark .sidebar__search-result-status { background: rgba(255,255,255,0.06); color: #ADADAD; }
.nx-app--dark .sidebar__search-empty { color: #666666; }
.nx-app--dark .sidebar__user { border-top-color: #3D3D3D; background: rgba(0,0,0,0.2); }
.nx-app--dark .sidebar__user:hover { background: rgba(71,158,245,0.06); }
.nx-app--dark .sidebar__user-name { color: #F7F7F7; }
.nx-app--dark .sidebar__user-email { color: #ADADAD; }
.nx-app--dark .sidebar__signout { color: #479EF5; }
.nx-app--dark .sidebar__signout:hover { color: #6cb3f8; }

/* Topbar — Fluent dark shell */
.nx-app--dark .topbar { background: #141414; border-bottom: 1px solid #292929; }
.nx-app--dark .topbar__brand { color: #F7F7F7; }
.nx-app--dark .cmd-trigger { background: #1A1A1A; border-color: #3D3D3D; color: #ADADAD; }
.nx-app--dark .cmd-trigger:hover { background: #3D3D3D; border-color: #3D3D3D; }
.nx-app--dark .cmd-trigger__label, .nx-app--dark .cmd-trigger__kbd kbd { color: #ADADAD; }

/* Cards & surfaces */
.nx-app--dark .grid-card { background: var(--bg-card); border-color: var(--border-default); }
.nx-app--dark .metric-card { background: var(--bg-card); border-color: var(--border-default); }
.nx-app--dark .metric-card__value { color: var(--text-primary); }
.nx-app--dark .toolbar { background: var(--bg-card); border-color: var(--border-default); }

/* Table */
.nx-app--dark table.tbl thead th { background: #1F1F1F; color: var(--text-secondary); border-bottom-color: var(--border-default); }
.nx-app--dark table.tbl thead th[aria-sort="ascending"],
.nx-app--dark table.tbl thead th[aria-sort="descending"] {
  background: #162B3D;
  isolation: isolate;
  z-index: 11;
}
.nx-app--dark .col-head--sorted { color: #60A5FA; }
.nx-app--dark table.tbl tbody tr { border-bottom-color: var(--border-subtle); }
.nx-app--dark table.tbl tbody tr:hover { background: rgba(0,120,212,0.06); }
.nx-app--dark table.tbl tbody td { color: var(--text-primary); }
.nx-app--dark .cell-name__text { color: #60A5FA; }
.nx-app--dark .cell-name__text--plain { color: var(--text-primary); }
.nx-app--dark .grid-footer { background: var(--bg-card); border-top-color: var(--border-default); color: var(--text-secondary); }
.nx-app--dark .page-btn { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-secondary); }
.nx-app--dark .page-btn:hover:not(:disabled) { border-color: #60A5FA; color: #60A5FA; }
.nx-app--dark .page-btn--active { background: #0078D4; border-color: #0078D4; color: #ffffff; }
.nx-app--dark .page-btn--nav { color: #479EF5; background: var(--bg-elevated); border-color: var(--border-default); }
.nx-app--dark .page-btn--nav:hover:not(:disabled) { background: var(--bg-subtle); border-color: #479EF5; color: #62ABF5; }
.nx-app--dark .page-btn__info { color: var(--text-secondary); }
.nx-app--dark .grid-tbl-wrap::-webkit-scrollbar-track { background: var(--bg-card); }
.nx-app--dark .grid-tbl-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); }
.nx-app--dark .grid-tbl-wrap::-webkit-scrollbar-thumb:hover { background: #64748B; }
.nx-app--dark .grid-tbl-wrap { scrollbar-color: var(--border-strong) var(--bg-card); }
.nx-app--dark .grid-horizontal-scroll {
  background: var(--bg-card);
}
.nx-app--dark .grid-horizontal-scroll,
.nx-app--dark .nx-sga-process__scroll {
  scrollbar-color: var(--border-strong) var(--bg-card);
}
.nx-app--dark .grid-horizontal-scroll::-webkit-scrollbar-track,
.nx-app--dark .nx-sga-process__scroll::-webkit-scrollbar-track { background: var(--bg-card); }
.nx-app--dark .grid-horizontal-scroll::-webkit-scrollbar-thumb,
.nx-app--dark .nx-sga-process__scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-color: var(--bg-card);
}

/* Toolbar controls */
.nx-app--dark .tool-btn { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-secondary); }
.nx-app--dark .tool-btn:hover { border-color: #60A5FA; color: #60A5FA; background: rgba(0,120,212,0.08); }
.nx-app--dark .search-input { background: var(--bg-elevated); border-color: var(--border-default); }
.nx-app--dark .search-input input { color: var(--text-primary); }
.nx-app--dark .search-input input::placeholder { color: var(--text-tertiary); }
.nx-app--dark .search-input svg { color: var(--text-tertiary); }
.nx-app--dark .search-clear { color: var(--text-secondary); }
.nx-app--dark .search-clear:hover { background: var(--border-default); color: var(--text-primary); }
.nx-app--dark .view-selector { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-secondary); }
.nx-app--dark .view-selector:hover { background: rgba(0,120,212,0.08); border-color: #60A5FA; }
.nx-app--dark .add-filter-pill { color: #60A5FA; border-color: var(--border-default); }
.nx-app--dark .add-filter-pill:hover { background: rgba(0,120,212,0.08); border-color: #60A5FA; }
.nx-app--dark .chip--blue { background: rgba(0,120,212,0.15); border-color: rgba(0,120,212,0.35); color: #93C5FD; }
.nx-app--dark .chip--amber { background: rgba(234,163,0,0.15); border-color: rgba(234,163,0,0.35); color: #F5D57E; }
.nx-app--dark .chip--overflow { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-secondary); }
.nx-app--dark .chip--overflow:hover { background: var(--border-default); }
.nx-app--dark .toolbar__divider { background: var(--border-default); }

/* Buttons */
.nx-app--dark .btn--primary { background: #0078D4; color: #ffffff; }
.nx-app--dark .btn--primary:hover { background: #115ea3; }
.nx-app--dark .btn--secondary { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-secondary); }
.nx-app--dark .btn--secondary:hover { background: var(--border-default); border-color: var(--border-strong); }
.nx-app--dark .col-icon { color: var(--text-tertiary); }
.nx-app--dark .col-icon:hover { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.nx-app--dark .col-icon--active { color: #60A5FA !important; }

/* Side panels */
.nx-app--dark .side-panel { background: var(--bg-card); border-left-color: var(--border-default); }
.nx-app--dark .panel-header { background: var(--bg-card); border-bottom-color: var(--border-default); }
.nx-app--dark .panel-header h2 { color: var(--text-primary); }
.nx-app--dark .panel-close { color: var(--text-secondary); }
.nx-app--dark .panel-close:hover { background: var(--border-default); }

/* Inputs & selects inside dark */
.nx-app--dark input[type="text"],
.nx-app--dark input[type="search"],
.nx-app--dark select,
.nx-app--dark textarea { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark input::placeholder { color: var(--text-tertiary); }
.nx-app--dark select option { background: #1A1A1A; color: var(--text-primary); }

/* Command palette */
.nx-app--dark .cmd-overlay { background: rgba(0,0,0,0.7); }
.nx-app--dark .cmd-box { background: var(--bg-card); border-color: var(--border-default); }
.nx-app--dark .cmd-search { background: var(--bg-card); border-bottom-color: var(--border-default); }
.nx-app--dark .cmd-search input { color: var(--text-primary); background: transparent; }
.nx-app--dark .cmd-item:hover, .nx-app--dark .cmd-item--focused { background: rgba(0,120,212,0.08); }
.nx-app--dark .cmd-group-label { color: var(--text-tertiary); }
.nx-app--dark .cmd-footer { border-top-color: var(--border-default); }
.nx-app--dark .cmd-footer kbd, .nx-app--dark .cmd-item__shortcut kbd { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-secondary); }

/* Column picker */
.nx-app--dark .nx-picker-tabs .tab-btn { color: var(--text-secondary); border-bottom-color: transparent; }
.nx-app--dark .nx-picker-tabs .tab-btn--active { color: #60A5FA; border-bottom-color: #60A5FA; }
.nx-app--dark .picker-col-item { color: var(--text-secondary); }
.nx-app--dark .picker-col-item:hover { background: rgba(0,120,212,0.08); }
.nx-app--dark .picker-col-item--selected { background: rgba(0,120,212,0.12); color: #60A5FA; }

/* Scrollbars global */
/* Thin scrollbars for every scrollable container in the app (lists, panels, dropdowns).
   Class-scoped rules elsewhere (grid-tbl-wrap, eq-body, audit table) are more specific and
   keep their own sizing where a wider bar is intentional. */
.nx-app ::-webkit-scrollbar { width: 8px; height: 8px; }
.nx-app ::-webkit-scrollbar-track { background: transparent; }
.nx-app ::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 4px; }
.nx-app ::-webkit-scrollbar-thumb:hover { background: #78909c; }
.nx-app * { scrollbar-width: thin; scrollbar-color: #b0bec5 transparent; }
.nx-app--dark ::-webkit-scrollbar-track { background: var(--bg-card); }
.nx-app--dark ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.nx-app--dark ::-webkit-scrollbar-thumb:hover { background: #64748B; }
.nx-app--dark * { scrollbar-color: var(--border-strong) transparent; }

/* Tags (Type column) — override hardcoded white to dark */
.nx-app--dark .tag,
.nx-app--dark .tag--1, .nx-app--dark .tag--2, .nx-app--dark .tag--3,
.nx-app--dark .tag--4, .nx-app--dark .tag--5, .nx-app--dark .tag--6,
.nx-app--dark .tag--7, .nx-app--dark .tag--8, .nx-app--dark .tag--9 {
  background: #242424; border-color: #3d3d3d; color: #F7F7F7; }

/* Status badges in dark — keep dot colors, flip backgrounds */
.nx-app--dark .status--active { background: rgba(14,112,14,0.2); color: #4ade80; }
.nx-app--dark .status--active::before { background: #4ade80; }
.nx-app--dark .status--draft { background: rgba(234,163,0,0.15); color: #fbbf24; }
.nx-app--dark .status--draft::before { background: #fbbf24; }
.nx-app--dark .status--review { background: rgba(92,46,145,0.25); color: #c084fc; }
.nx-app--dark .status--review::before { background: #c084fc; }
.nx-app--dark .status--inactive { background: rgba(177,14,28,0.2); color: #f87171; }
.nx-app--dark .status--inactive::before { background: #f87171; }
.nx-app--dark .status--done { background: rgba(3,131,135,0.2); color: #2dd4bf; border-color: rgba(3,131,135,0.2); }
.nx-app--dark .status--done::before { background: #2dd4bf; }

/* Page hero env badge — make visible in dark */
.nx-app--dark .page-hero__env-badge {
  background: rgba(16,185,129,0.18);
  border-color: rgba(74,222,128,0.3);
  color: #4ade80; }

/* Page hero gradient in dark — already dark navy, keep consistent */
.nx-app--dark .page-hero {
  background:
    radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.35) 0%, transparent 55%),
    linear-gradient(120deg, #021628 0%, #042952 28%, #0a3d6e 58%, #0f6cbd 82%, #1275c0 100%);
  border-bottom-color: #3D3D3D; }
.nx-app--dark .page-hero__title { color: #f0f6ff; }
.nx-app--dark .page-hero__desc { color: rgba(255,255,255,0.80); }
/* Equipment module hero stays blue in dark mode */
.nx-app--dark .page-hero.page-hero--eqmodule { background: linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%); }
.nx-app--dark .page-hero--eqmodule .page-hero__title { color: #f1f5f9; }
.nx-app--dark .page-hero--eqmodule .page-hero__desc { color: rgba(255,255,255,0.85); }
.nx-app--dark .page-hero__back { background: rgba(255,255,255,0.1); color: #cbd5e1; border-color: rgba(255,255,255,0.15); }
.nx-app--dark .page-hero__back:hover { background: rgba(255,255,255,0.15); color: #f1f5f9; }
.nx-app--dark .pd-back { background: rgba(255,255,255,0.1); color: #cbd5e1; border-color: rgba(255,255,255,0.15); }
.nx-app--dark .pd-back:hover { background: rgba(255,255,255,0.15); color: #f1f5f9; }

/* Metric cards — darker surface in dark */
.nx-app--dark .metric-card { background: #141e2d; border-color: #3D3D3D; }
.nx-app--dark .metric-card__label { color: #ADADAD; }
.nx-app--dark .metric-card__value { color: #F7F7F7; }
.nx-app--dark .metric-card__trend--up { color: #4ade80; }
.nx-app--dark .metric-card__trend--down { color: #f87171; }

/* Progress track in dark */
.nx-app--dark .progress-track { background: #3D3D3D; }
.nx-app--dark .col-resizer:hover { background: #479EF5; opacity: 0.5; }
.nx-app--dark th.col-resizing .col-resizer { background: #479EF5; opacity: 0.8; }
.nx-app--dark .progress-pct { color: #ADADAD; }

/* Date cells and Created By in dark — match tag muted color */
.nx-app--dark table.tbl td time { color: #F7F7F7; }
.nx-app--dark .person__name { color: #F7F7F7; }
.nx-app--dark .person__av { background: #3D3D3D; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark a.person--link:hover .person__name { color: #479EF5; }
.nx-app--dark a.person--link .person__name { color: #479EF5; }
.nx-app--dark .cell-lookup__link { color: #479EF5; }

/* Rows per page dropdown in dark */
.nx-app--dark .grid-footer__page-size select { background: #3D3D3D; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .grid-footer__page-size select option { background: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .grid-footer__info { color: #ADADAD; }
.nx-app--dark .grid-footer__page-size { color: #ADADAD; }

/* ── Responsive: Go Offline + Search Projects — mobile only ── */
@media (min-width: 768px) {
  .nx-app .sidebar__offline { display: none; }
  .nx-app .sidebar__search-wrap { display: none; }
}
@media (max-width: 767px) {
  .nx-app .sidebar__offline { display: flex; }
  .nx-app .sidebar__search-wrap { display: block; }
}

/* Dark mode status overrides — match reference yellow/blue palette */
.nx-app--dark .status--review { background: rgba(131,91,0,0.2); color: #fbbf24; }
.nx-app--dark .status--review::before { background: #fbbf24; }
.nx-app--dark .status--done { background: rgba(15,108,189,0.2); color: #60a5fa; border-color: rgba(15,108,189,0.2); }
.nx-app--dark .status--done::before { background: #60a5fa; }

/* Dark tag override */
.nx-app--dark .tag,
.nx-app--dark .tag--1, .nx-app--dark .tag--2, .nx-app--dark .tag--3,
.nx-app--dark .tag--4, .nx-app--dark .tag--5, .nx-app--dark .tag--6,
.nx-app--dark .tag--7, .nx-app--dark .tag--8, .nx-app--dark .tag--9 {
  background: #242424; border-color: #3d3d3d; color: #F7F7F7; }

/* ── Dark mode – Project Details ── */
.nx-app--dark .pd-tabs { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .pd-tabs--standalone { border-top: 1px solid #3D3D3D; }
.nx-app--dark .pd-tab { color: #ADADAD; }
.nx-app--dark .pd-tab--active { color: #60a5fa; border-bottom-color: #60a5fa; }
.nx-app--dark .pd-tab__badge { background: #3D3D3D; color: #ADADAD; }
.nx-app--dark .pd-tab--active .pd-tab__badge { background: rgba(96,165,250,0.15); color: #60a5fa; }
.nx-app--dark .pd-areanav { background: var(--bg-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.nx-app--dark .pd-areapill { background: transparent; border-color: transparent; color: #F7F7F7; }
.nx-app--dark .pd-areapill:hover:not(.pd-areapill--disabled):not(.pd-areapill--active) { background: #3D3D3D; }
.nx-app--dark .pd-areapill__badge { background: #3D3D3D; color: #b8c7da; }
.nx-app--dark .pd-areapill--disabled { color: #ADADAD; }
.nx-app--dark .pd-card { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .pd-card__iconbox--blue   { background: rgba(15,108,189,0.2); color: #60a5fa; }
.nx-app--dark .pd-card__iconbox--purple { background: rgba(124,58,237,0.2); color: #a78bfa; }
.nx-app--dark .pd-card__iconbox--amber  { background: rgba(245,158,11,0.15); color: #fbbf24; }
.nx-app--dark .pd-card__iconbox--teal   { background: rgba(13,115,119,0.2); color: #2dd4bf; }
.nx-app--dark .pd-card__iconbox--green  { background: rgba(16,124,16,0.2); color: #34d399; }
.nx-app--dark .pd-card__title { color: #F7F7F7; }
.nx-app--dark .pd-card__num { color: #F7F7F7; }
.nx-app--dark .pd-card__label { color: #ADADAD; }
.nx-app--dark .pd-card__rows { border-color: #3D3D3D; }
.nx-app--dark .pd-card__rows li { color: #ADADAD; }
/* Dark mode — pill action buttons (.eq-action) and dashboard buttons (.pd-btn) */
.nx-app--dark .eq-action { background: #374151; color: #cbd5e1; border-color: #4b5563; box-shadow: none; }
.nx-app--dark .eq-action:hover { background: #4b5563; color: #f1f5f9; border-color: var(--brand-400, #479ef5); box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
.nx-app--dark .eq-action--primary { background: #106ebe; color: #fff; border-color: #0f6cbd; }
.nx-app--dark .eq-action--primary:hover { background: #1a7fd4; color: #fff; border-color: transparent; }
.nx-app--dark .pd-btn { background: #374151; color: #cbd5e1; border-color: #4b5563; box-shadow: none; }
.nx-app--dark .pd-btn:hover { background: #4b5563; color: #f1f5f9; border-color: var(--brand-400, #479ef5); box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
.nx-app--dark .pd-btn--primary { background: #374151; color: #479ef5; border-color: #4b5563; }
.nx-app--dark .pd-btn--primary:hover { background: #4b5563; color: #6cb4f7; border-color: var(--brand-400, #479ef5); }
.nx-app--dark .pd-card__rows strong { color: #F7F7F7; }
.nx-app--dark .pd-card__legend li { color: #ADADAD; }
.nx-app--dark .pd-card__legend strong { color: #F7F7F7; }
.nx-app--dark .pd-bar-wrap { background: #3D3D3D; }
.nx-app--dark .pd-search { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .pd-search__input { color: #F7F7F7; }
.nx-app--dark .pd-search__input::placeholder { color: #ADADAD; }
.nx-app--dark .pd-eq-dropdown { background: #1A1A1A; border-color: #3D3D3D; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.nx-app--dark .pd-eq-dropdown__item { color: #F7F7F7; border-bottom-color: #3D3D3D; }
.nx-app--dark .pd-eq-dropdown__item:hover,
.nx-app--dark .pd-eq-dropdown__item:focus { background: #1a2740; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Project Details equipment search results — PAGE-SCOPED, ProjectDetails.razor only.

   Makes the equipment card's result list show a clear blue row plus a real focus ring while
   arrowing through results. The shared .pd-eq-dropdown__item rules above set outline:none over a
   faint var(--bg-subtle) grey, which is nearly invisible while roving and leaves the control with
   no focus indicator at all.

   Why page-scoped rather than fixed on the shared class: .pd-eq-dropdown__item has a second
   consumer, NexusBuildingFamilyDetail.razor, which backs the seven standalone Buildings detail
   pages (Building, Tranche, Loop, Area, Sub area, Rooms, SKIDs). Editing the shared rule would
   restyle those too. Every selector here is gated on .nx-projdetail-page, a marker rendered only by
   ProjectDetails.razor, and that component is never rendered inside this page, so the Buildings
   pages keep their existing appearance untouched.

   Placed after the .nx-app--dark block above so the dark override below still wins in dark mode:
   both are (0,5,0), and these come later in source. The colours are the team dropdown's literals
   rather than tokens precisely so the two lists cannot drift apart.

   Hint rows (Searching… / No equipment found) are held at no highlight: they are not options and
   already carry cursor:default, so tinting them implied they were selectable. */
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))) .pd-eq-dropdown__item:not(.pd-eq-dropdown__item--hint):hover,
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))) .pd-eq-dropdown__item:not(.pd-eq-dropdown__item--hint):focus {
  background: #f0f6ff;
  outline: none;
}
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))) .pd-eq-dropdown__item:not(.pd-eq-dropdown__item--hint):focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -2px;
}
.nx-app:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))) .pd-eq-dropdown__item--hint:hover {
  background: transparent;
}
.nx-app--dark:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))) .pd-eq-dropdown__item:not(.pd-eq-dropdown__item--hint):hover,
.nx-app--dark:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))) .pd-eq-dropdown__item:not(.pd-eq-dropdown__item--hint):focus {
  background: rgba(71,158,245,.1);
}
.nx-app--dark:has(.nx-projdetail-page:not(:where([data-nx-route-hidden] *))) .pd-eq-dropdown__item--hint:hover {
  background: transparent;
}
.nx-app--dark .pd-btn--ghost { background: #3D3D3D; color: #F7F7F7; border-color: #3D3D3D; }
/* Dark mode keeps the same gradient as light, mirroring the Admin "New account" button. The previous
   rule painted a light-blue brand-500/800 gradient and set white text on it, which measured 2.12:1
   and failed WCAG AA; the darker reference stops restore legible contrast. */
.nx-app--dark .pd-btn--pill-active {
  background: linear-gradient(120deg, #0F548C 0%, #0F6CBD 55%, #1586D8 100%);
  color: #FFFFFF;
  border-color: transparent;
}
.nx-app--dark .pd-btn--pill-active:hover:not(:disabled) {
  background: linear-gradient(120deg, #0C3B5E 0%, #0F548C 55%, #0F6CBD 100%);
  color: #FFFFFF;
  border-color: transparent;
}
.nx-app--dark .pd-subtabs { border-color: #3D3D3D; }
.nx-app--dark .pd-subtab { color: #ADADAD; }
.nx-app--dark .pd-subtab--active { color: #60a5fa; border-bottom-color: #60a5fa; }
.nx-app--dark .pd-state { background: #1A1A1A; border-color: #3D3D3D; }

/* Dark mode — error & required states (WCAG AA: #f87171 on dark bg = ~5.1:1) */
.nx-app--dark .pd-required-star { color: #f87171; }
.nx-app--dark .pd-form-control--error { border-color: #f87171 !important; }
.nx-app--dark .pd-form-control--error:focus { box-shadow: 0 0 0 2px rgba(248,113,113,.25) !important; }
.nx-app--dark .pd-drawer__error { color: #f87171; }
.nx-app--dark .pd-drawer__body-error { color: #f87171; background: #3a1518; border-color: #6b2a2f; }

/* Transition for smooth theme switching */
.nx-app, .nx-app * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
/* Exclude animations/transforms (but allow SVG color to inherit currentColor) */
.nx-app *[style*="animation"] { transition: none; }

/* ──────────────────────────────────────────────────────────
   Banner extra variants (success / error)
   ────────────────────────────────────────────────────────── */
.nx-app .pd-banner--success { background: #dff6dd; border: 1px solid #6fd987; color: #1e5128; }
.nx-app .pd-banner--error   { background: #fde7e9; border: 1px solid #f1707b; color: #6e1319; }

/* ──────────────────────────────────────────────────────────
   Sub-tab panel body (Offline Access & Audit History)
   ────────────────────────────────────────────────────────── */
.nx-app .pd-subtab-panel-body { padding: 8px 16px 16px; }
.nx-app #subtab-panel-dashboard.pd-subtab-panel-body { padding-top: 0; }

/* ──────────────────────────────────────────────────────────
   Offline Access tab
   ────────────────────────────────────────────────────────── */
.nx-app .pd-offline-panel { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; }
.nx-app .pd-offline-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid #f0f0f0; }
.nx-app .pd-offline-header__left { display: flex; align-items: center; gap: 8px; }
.nx-app .pd-offline-header__icon { color: #0078d4; flex-shrink: 0; }
.nx-app .pd-offline-header__title { font-size: 13px; font-weight: 600; color: #323130; margin: 0; }
.nx-app .pd-offline-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: #eff6fc; color: #0078d4; border-radius: 10px; font-size: 11px; font-weight: 600; }
.nx-app .pd-offline-toggle { background: none; border: none; cursor: pointer; padding: 4px; color: #605e5c; border-radius: 4px; display: flex; align-items: center; }
.nx-app .pd-offline-toggle:hover { background: #f3f2f1; color: #323130; }
.nx-app .pd-offline-toggle__icon { transition: transform 0.2s ease; }
.nx-app .pd-offline-toggle__icon--collapsed { transform: rotate(-90deg); }
.nx-app .pd-offline-gate { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-size: 12px; color: #605e5c; background: #faf9f8; }
.nx-app .pd-offline-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; background: #faf9f8; border-bottom: 1px solid #f0f0f0; }
.nx-app .pd-offline-toolbar .pd-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.nx-app .pd-offline-skeleton { padding: 16px 18px; }
.nx-app .pd-offline-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 36px 20px; text-align: center; color: #605e5c; }
.nx-app .pd-offline-empty p { font-size: 13px; font-weight: 500; margin: 0; }
.nx-app .pd-offline-empty span { font-size: 12px; color: #8a8886; }
.nx-app .pd-offline-table-wrap { padding: 0; overflow-x: auto; }
.nx-app .pd-offline-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nx-app .pd-offline-table thead th { padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 600; color: #605e5c; background: #faf9f8; border-bottom: 1px solid #e5e5e5; white-space: nowrap; }
.nx-app .pd-offline-table thead th:first-child { padding-left: 18px; }
.nx-app .pd-offline-row { cursor: pointer; border-bottom: 1px solid #f3f2f1; }
.nx-app .pd-offline-row td { padding: 10px 12px; vertical-align: middle; color: #323130; }
.nx-app .pd-offline-row td:first-child { padding-left: 18px; }
.nx-app .pd-offline-row:hover { background: #f5f9ff; }
.nx-app .pd-offline-row:focus-within { outline: 2px solid #0078d4; outline-offset: -2px; }
.nx-app .pd-offline-row--selected { background: #eff6fc; }
.nx-app .pd-offline-radio { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid #c8c6c4; border-radius: 50%; }
.nx-app .pd-offline-radio__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background 0.15s; }
.nx-app .pd-offline-radio__dot--on { background: #0078d4; }
.nx-app .pd-offline-row--selected .pd-offline-radio { border-color: #0078d4; }
.nx-app .pd-offline-name { font-weight: 500; }
.nx-app .pd-offline-date { color: #605e5c; white-space: nowrap; }
.nx-app .pd-offline-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 500; }
.nx-app .pd-offline-status__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.nx-app .pd-offline-status--active    { background: #dff6dd; color: #1e5128; }
.nx-app .pd-offline-status--complete  { background: #e5e5e5; color: #323130; }
.nx-app .pd-offline-status--preparing { background: #eff6fc; color: #0078d4; }
.nx-app .pd-offline-status--saving    { background: #fff4ce; color: #6b4f00; }
.nx-app .pd-offline-status--cancelled { background: #f3f2f1; color: #605e5c; }
.nx-app .pd-offline-status--error     { background: #fde7e9; color: #6e1319; }
.nx-app .pd-offline-status--failed    { background: #fde7e9; color: #6e1319; }

/* ──────────────────────────────────────────────────────────
   Audit History tab — flat table with rowspan grouping
   Font scale: header 13px/600, th 11px/600 uppercase,
               data cells 13px, date-time 11px, badges 11px
   ────────────────────────────────────────────────────────── */
.nx-app .pd-audit-panel { background: #F8F8F8; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; }

/* Header bar */
.nx-app .pd-audit-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 11px 16px 10px; border-bottom: 1px solid #edebe9; background: linear-gradient(to bottom, #F0F0F0, #E8E8E8); }
.nx-app .pd-audit-header__left { display: flex; align-items: center; gap: 8px; }
.nx-app .pd-audit-header__pencil { color: #0078d4; flex-shrink: 0; }
.nx-app .pd-audit-header__title { font-size: var(--nx-type-panel-title); font-weight: 700; color: #201f1e; margin: 0; }
.nx-app .pd-audit-header__right { display: flex; align-items: center; }
.nx-app .pd-audit-changes-badge { display: inline-flex; align-items: center; padding: 2px 8px; background: #f3f2f1; color: #605e5c; border-radius: 100px; font-size: var(--nx-type-badge); font-weight: 500; }
.nx-app .pd-audit-truncation-note { display: inline-flex; align-items: center; padding: 2px 8px; background: #fff4ce; color: #6b4f00; border-radius: 100px; font-size: var(--nx-type-badge); font-weight: 500; cursor: help; }
.nx-app .pd-audit-timezone { color: var(--text-tertiary); font-size: var(--nx-type-badge); }

/* Search box */
.nx-app .pd-audit-search-wrap { position: relative; display: flex; align-items: center; }
.nx-app .pd-audit-search-icon { position: absolute; left: 9px; color: #8a8886; pointer-events: none; }
.nx-app .pd-audit-search { box-sizing: border-box; max-width: 100%; padding: 5px 12px 5px 30px; border: 1px solid #d2d0ce; border-radius: 100px; font-family: var(--font); color: #201f1e; background: #fff; outline: none; width: 270px; transition: border-color 0.15s, box-shadow 0.15s; }
.nx-app .pd-audit-search:focus {
  border-color: var(--border-default);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 22%, transparent);
}

/* Skeleton / empty */
.nx-app .pd-audit-skeleton { padding: 16px 20px; }
.nx-app .pd-audit-skeleton__row { margin-bottom: 18px; }
.nx-app .pd-audit-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: #605e5c; }
.nx-app .pd-audit-empty p { font-size: var(--nx-type-support); margin: 0; }

/* Flat table — fixed viewport-relative height so scrollbar always fires (same pattern as grid-tbl-wrap) */
.nx-app .pd-audit-table-wrap {
  height: calc(100vh - 410px);
  min-height: 200px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #b0bec5 var(--gray-100);
}
.nx-app .pd-audit-table-wrap:focus-visible {
  outline: 2px solid var(--brand-600, #0f6cbd);
  outline-offset: 2px;
}
.nx-app .pd-audit-table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.nx-app .pd-audit-table-wrap::-webkit-scrollbar-track { background: var(--gray-100); }
.nx-app .pd-audit-table-wrap::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 10px; border: 2px solid var(--gray-100); }
.nx-app .pd-audit-table-wrap::-webkit-scrollbar-thumb:hover { background: #78909c; }
.nx-app .pd-audit-table { width: 100%; border-collapse: collapse; font-size: var(--nx-type-grid-cell); font-family: var(--font); table-layout: fixed; }

/* Sortable column headers — reuse col-head/col-icon from project grid */
.nx-app .pd-audit-th { padding: 8px 10px; text-align: left; font-size: var(--nx-type-grid-header); font-weight: 600; color: #605e5c; background: #F0F0F0; border-bottom: 1px solid #edebe9; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.nx-app .pd-audit-table thead th:hover .col-head__icons { opacity: 1; }
.nx-app .pd-audit-th--date  { width: 175px; min-width: 130px; }
.nx-app .pd-audit-th--by    { width: 185px; min-width: 100px; }
.nx-app .pd-audit-th--event { width: 80px; min-width: 60px; text-align: center; }
.nx-app .pd-audit-th--event .col-head { position: relative; justify-content: center; }
.nx-app .pd-audit-th--event .col-head__label { flex: 0 0 auto; }
.nx-app .pd-audit-th--event .col-head__icons { position: absolute; right: 0; }
.nx-app .pd-audit-th--field { width: 140px; min-width: 80px; }
.nx-app .pd-audit-th--old   { width: 160px; min-width: 80px; }
.nx-app .pd-audit-th--new   { width: 160px; min-width: 80px; }

/* Drag-to-reorder (within band) feedback */
.nx-app .pd-audit-th[draggable="true"] { cursor: grab; }
.nx-app .pd-audit-th[draggable="true"]:active { cursor: grabbing; }
.nx-app .pd-audit-th--dragging { opacity: 0.45; }
.nx-app .pd-audit-th--drop { box-shadow: inset 3px 0 0 0 var(--brand-600, #0f6cbd); }
.nx-app--dark .pd-audit-th--drop { box-shadow: inset 3px 0 0 0 #60a5fa; }

/* Rows */
.nx-app .pd-audit-row { border-bottom: 1px solid #f3f2f1; }
.nx-app .pd-audit-row--group-start { border-top: 2px solid #edebe9; }
.nx-app .pd-audit-row--group-start:first-child { border-top: none; }

/* Rowspan cells (date / by / event) */
.nx-app .pd-audit-td-span { vertical-align: top; padding: 10px 10px; background: #F8F8F8; transition: background 0.12s; }

/* Date cell */
.nx-app .pd-audit-date-primary { font-size: var(--nx-type-grid-cell); font-weight: 500; color: #201f1e; white-space: nowrap; }

/* Changed By cell */
.nx-app .pd-audit-by-inner { display: flex; align-items: flex-start; gap: 7px; }
.nx-app .pd-audit-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #0078D4; color: #fff; font-size: var(--nx-type-badge); font-weight: 700; line-height: 1; flex-shrink: 0; overflow: hidden; margin-top: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.nx-app .pd-audit-by-name { font-size: var(--nx-type-grid-cell); font-weight: 400; color: #201f1e; line-height: 1.4; word-break: break-word; }

/* Event badge */
.nx-app .pd-audit-table .pd-audit-td-event { text-align: center; }
.nx-app .pd-audit-event { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; border-radius: 100px; font-size: var(--nx-type-badge); font-weight: 700; white-space: nowrap; }
.nx-app .pd-audit-event--create     { background: #dff6dd; color: #0e4a1a; border: 1px solid #b3e6b3; }
.nx-app .pd-audit-event--update     { background: #e1f0fd; color: #004a8f; border: 1px solid #b3d4f5; }
.nx-app .pd-audit-event--delete     { background: #fde7e9; color: #6e1319; border: 1px solid #f5b3b8; }
.nx-app .pd-audit-event--deactivate { background: #fff4ce; color: #5a3d00; border: 1px solid #f0d060; }

/* Field-change data cells */
.nx-app .pd-audit-td-field,
.nx-app .pd-audit-td-old,
.nx-app .pd-audit-td-new { padding: 8px 10px; vertical-align: middle; font-size: var(--nx-type-grid-cell); overflow: hidden; text-overflow: ellipsis; transition: background 0.12s; }
.nx-app .pd-audit-td-field { font-weight: 400; color: #201f1e; white-space: nowrap; }
.nx-app table.pd-audit-table tbody td.pd-audit-td-old,
.nx-app table.pd-audit-table tbody td.pd-audit-td-new {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.nx-app .pd-audit-table tbody td.pd-audit-td-old {
  color: var(--text-tertiary) !important;
  font-weight: 400;
  font-style: italic;
}
.nx-app .pd-audit-td-new   { font-weight: 400; color: #201f1e; }
.nx-app .pd-audit-nofields { padding: 8px 10px; font-size: var(--nx-type-support); color: #8a8886; font-style: italic; }

/* Row hover — highlight entire row */
.nx-app .pd-audit-row:hover .pd-audit-td-field,
.nx-app .pd-audit-row:hover .pd-audit-td-old,
.nx-app .pd-audit-row:hover .pd-audit-td-new  { background: #f3f7fd; }
.nx-app .pd-audit-row:hover .pd-audit-td-span { background: #eaf0f8 !important; }

/* Group separator — stronger visual boundary between audit events */
.nx-app .pd-audit-row--group-start td { border-top: 1.5px solid #d6d0cc; }
.nx-app .pd-audit-row--group-start:first-child td { border-top: none; }

/* Sticky header shadow for depth */
.nx-app .pd-audit-th { box-shadow: 0 2px 4px rgba(0,0,0,0.06); }

/* Load more (kept for compatibility) */
.nx-app .pd-audit-more { padding: 12px 20px; text-align: center; border-top: 1px solid #edebe9; background: #faf9f8; }

/* RFI workflow audit uses the same visual language as the field-level audit history. */
.nx-app .nx-rfi-audit-stack { display: flex; flex-direction: column; gap: 16px; }
.nx-app .nx-rfi-workflow-audit .pd-audit-table-wrap { height: auto; min-height: 0; max-height: none; overflow-x: auto; }
/* NCR details renders the audit history inline in the scrolling detail page (not a full-height tab),
   so the fixed 100vh-based inner scroller fights the page scroll. Let it flow naturally and let the
   page own the single vertical scrollbar (mirrors the RFI workflow-audit inline placement above). */
.nx-app .ncrd .pd-audit-table-wrap { height: auto; min-height: 0; max-height: none; overflow-y: visible; overflow-x: auto; }
.nx-app .nx-rfi-workflow-table { min-width: 900px; }
.nx-app .nx-rfi-workflow-table th:nth-child(1) { width: 170px; }
.nx-app .nx-rfi-workflow-table th:nth-child(2),
.nx-app .nx-rfi-workflow-table th:nth-child(3) { width: 180px; }
.nx-app .nx-rfi-workflow-table th:nth-child(4) { width: 90px; }
.nx-app .nx-rfi-workflow-table tbody td { padding: 11px 12px; vertical-align: top; background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); font-size: var(--nx-type-grid-cell); line-height: 1.45; }
.nx-app .nx-rfi-workflow-table tbody tr:last-child td { border-bottom: 0; }
.nx-app .nx-rfi-workflow-table tbody tr:hover td { background: var(--bg-subtle); }
.nx-app .nx-rfi-workflow-table__stage { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.nx-app .nx-rfi-workflow-table__step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  flex: 0 0 24px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-size: var(--nx-type-badge); font-weight: 700; }
.nx-app .nx-rfi-workflow-table__details { max-width: 420px; white-space: pre-wrap; word-break: break-word; }

/* Dark mode */
.nx-app--dark .pd-audit-panel { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .pd-audit-header { background: #141414; border-color: #3D3D3D; }
.nx-app--dark .pd-audit-header__pencil { color: #479EF5; }
.nx-app--dark .pd-audit-header__title { color: #F7F7F7; }
.nx-app--dark .pd-audit-changes-badge { background: #3D3D3D; color: #ADADAD; }
.nx-app--dark .pd-audit-truncation-note { background: rgba(251,191,36,.1); color: #fbbf24; }
.nx-app--dark .pd-audit-timezone { color: #ADADAD; }
.nx-app--dark .pd-audit-search-wrap { background: transparent; }
.nx-app--dark .pd-audit-search-icon { color: #666666; }
.nx-app--dark .pd-audit-search { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .pd-audit-search:focus { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,.2); }
.nx-app--dark .pd-audit-table-wrap::-webkit-scrollbar-track { background: #141414; }
.nx-app--dark .pd-audit-table-wrap::-webkit-scrollbar-thumb { background: #3D3D3D; border-color: #141414; }
.nx-app--dark .pd-audit-table-wrap::-webkit-scrollbar-thumb:hover { background: #666666; }
.nx-app--dark .pd-audit-th { background: #141414; color: #ADADAD; border-color: #3D3D3D; }
.nx-app--dark .pd-audit-row { border-color: #3D3D3D; }
.nx-app--dark .pd-audit-row--group-start { border-top-color: #3D3D3D; }
.nx-app--dark .pd-audit-row--group-start td { border-top-color: #3D3D3D; }
.nx-app--dark .pd-audit-td-span { background: #141414; border-color: #3D3D3D; }
.nx-app--dark .pd-audit-row:hover .pd-audit-td-field,
.nx-app--dark .pd-audit-row:hover .pd-audit-td-old,
.nx-app--dark .pd-audit-row:hover .pd-audit-td-new  { background: #242424; }
.nx-app--dark .pd-audit-row:hover .pd-audit-td-span { background: #242424 !important; }
.nx-app--dark .pd-audit-date-primary,
.nx-app--dark .pd-audit-by-name,
.nx-app--dark .pd-audit-td-field,
.nx-app--dark .pd-audit-td-new { color: #F7F7F7; }
.nx-app--dark .pd-audit-date-time,
.nx-app--dark .pd-audit-td-old { color: #ADADAD; }
.nx-app--dark .pd-audit-nofields { color: #666666; }
.nx-app--dark .pd-audit-empty { color: #ADADAD; }
.nx-app--dark .pd-audit-skeleton__row { background: linear-gradient(90deg,#3D3D3D 25%,#3D3D3D 50%,#3D3D3D 75%); background-size:200% 100%; }
.nx-app--dark .pd-audit-av { background: #0078D4; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.nx-app--dark .pd-audit-event--create     { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.25); }
.nx-app--dark .pd-audit-event--update     { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.25); }
.nx-app--dark .pd-audit-event--delete     { background: rgba(239,68,68,.12);  color: #f87171; border-color: rgba(239,68,68,.25); }
.nx-app--dark .pd-audit-event--deactivate { background: rgba(245,158,11,.1);  color: #fbbf24; border-color: rgba(245,158,11,.25); }
.nx-app--dark .pd-audit-more { background: #141414; border-color: #3D3D3D; }

/* Dark mode — Offline tab */
.nx-app--dark .pd-offline-panel { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .pd-offline-header { border-color: #3D3D3D; }
.nx-app--dark .pd-offline-header__title { color: #F7F7F7; }
.nx-app--dark .pd-offline-toolbar { background: #141414; border-color: #3D3D3D; }
.nx-app--dark .pd-offline-table thead th { background: #141414; color: #ADADAD; border-color: #3D3D3D; }
.nx-app--dark .pd-offline-row td { color: #F7F7F7; }
.nx-app--dark .pd-offline-row { border-color: #3D3D3D; }
.nx-app--dark .pd-offline-row:hover { background: #1a2740; }
.nx-app--dark .pd-offline-row--selected { background: #242424; }

/* Dark mode — Banner success / error */
.nx-app--dark .pd-banner--success { background: #1a3a1e; border-color: #2e6b36; color: #6fd987; }
.nx-app--dark .pd-banner--warning { background: #3a3213; border-color: #6b5b1f; color: #f0d060; }
.nx-app--dark .pd-banner--error   { background: #3a1318; border-color: #8b2030; color: #f87171; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   Premium PIN dialog — nx-pin-*  (v8.75)
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.nx-app .nx-pin-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  animation: nx-fade-in .15s ease;
}
@keyframes nx-fade-in { from { opacity: 0 } to { opacity: 1 } }

.nx-app .nx-pin-dialog {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
  overflow: hidden;
  animation: nx-slide-up .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes nx-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

/* Header */
.nx-app .nx-pin-dialog__header {
  background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
  padding: 22px 24px 18px; position: relative;
}
.nx-app .nx-pin-dialog__header-icon {
  width: 42px; height: 42px; background: rgba(255,255,255,.15);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.nx-app .nx-pin-dialog__title {
  font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 3px; line-height: 1.2;
}
.nx-app .nx-pin-dialog__subtitle {
  font-size: 12px; color: rgba(255,255,255,.75); margin: 0;
}
.nx-app .nx-pin-dialog__close {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; cursor: pointer;
  color: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.nx-app .nx-pin-dialog__close:hover { background: rgba(255,255,255,.28); }
.nx-app .nx-pin-dialog__close:disabled { opacity: .4; cursor: not-allowed; }

/* Body */
.nx-app .nx-pin-dialog__body { padding: 20px 24px 4px; }

/* Requirements checklist */
.nx-app .nx-pin-rules { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.nx-app .nx-pin-rule {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #605e5c; transition: color .2s;
}
.nx-app .nx-pin-rule__icon {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: #e0e0e0; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.nx-app .nx-pin-rule--ok { color: #107c10; }
.nx-app .nx-pin-rule--ok .nx-pin-rule__icon { background: #107c10; }

/* Error */
.nx-app .nx-pin-error {
  display: flex; align-items: center; gap: 8px;
  background: #fde8e8; border: 1px solid #f1b8b8; border-radius: 8px;
  padding: 10px 12px; font-size: 12px; color: #a4262c; margin-bottom: 14px;
}

/* PIN label */
.nx-app .nx-pin-label {
  display: block; font-size: 11px; font-weight: 600; color: #323130;
  margin-bottom: 6px; text-transform: none; letter-spacing: normal;
}

/* PIN boxes */
.nx-app .nx-pin-boxes { display: flex; gap: 8px; margin-bottom: 16px; }
.nx-app .nx-pin-box {
  width: 44px; height: 52px;
  border: 2px solid #e0e0e0; border-radius: 10px;
  background: #fafafa;
  font-size: 22px; font-weight: 700; text-align: center; color: #323130;
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none; appearance: none;
}
.nx-app .nx-pin-box:focus {
  border-color: #0078d4;
  box-shadow: 0 0 0 3px rgba(0,120,212,.18);
  background: #fff;
}
.nx-app .nx-pin-box--filled { border-color: #0078d4; background: #eff6fc; }
.nx-app .nx-pin-box--error { border-color: #a4262c; background: #fde8e8; }

/* Footer */
.nx-app .nx-pin-dialog__footer {
  padding: 12px 24px 20px;
  display: flex; gap: 10px; justify-content: flex-end;
}

/* Loading overlay */
.nx-app .nx-pin-loading {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(255,255,255,.82);
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
}
.nx-app .nx-pin-spinner {
  width: 32px; height: 32px;
  border: 3px solid #e0e0e0;
  border-top-color: #0078d4;
  border-radius: 50%;
  animation: nx-spin .7s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(360deg) } }


/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   Generic small centered modal — nx-modal-*
   Reusable confirm / reason dialog (Reactivate, and future small dialogs).
   Reuses the nx-fade-in / nx-slide-up / nx-spin keyframes above and the shared
   .pd-btn footer buttons; mirrors the PIN dialog look without the PIN specifics.
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.nx-app .nx-modal-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  animation: nx-fade-in .15s ease; padding: 16px;
}
.nx-app .nx-modal {
  position: relative; width: 100%; max-width: 460px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
  overflow: hidden; animation: nx-slide-up .2s cubic-bezier(.34,1.56,.64,1);
}
.nx-app .nx-modal__header {
  background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
  padding: 18px 24px; position: relative;
}
.nx-app .nx-modal__title { font-size: 17px; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
.nx-app .nx-modal__subtitle { font-size: 12px; color: rgba(255,255,255,.78); margin: 4px 0 0; }
.nx-app .nx-modal__close {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; cursor: pointer; color: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.nx-app .nx-modal__close:hover { background: rgba(255,255,255,.28); }
.nx-app .nx-modal__close:disabled { opacity: .4; cursor: not-allowed; }
.nx-app .nx-modal__footer { padding: 12px 24px 20px; display: flex; gap: 10px; justify-content: flex-end; }
.nx-app .nx-modal__loading {
  position: absolute; inset: 0; z-index: 10; background: rgba(255,255,255,.82);
  display: flex; align-items: center; justify-content: center; border-radius: 16px;
}
.nx-app .nx-modal__spinner {
  width: 32px; height: 32px; border: 3px solid #e0e0e0; border-top-color: #0078d4;
  border-radius: 50%; animation: nx-spin .7s linear infinite;
}
.nx-app--dark .nx-modal { background: #1A1A1A; }
.nx-app--dark .nx-modal__loading { background: rgba(13,21,35,.82); }

/* nx-modal--wide — wide modal variant used to host the classic Telerik user-management forms.
   Provides a scrollable body so large forms (project pickers, multi-field onboarding) fit the viewport. */
.nx-app .nx-modal.nx-modal--wide { max-width: 920px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.nx-app .nx-modal.nx-modal--wide .nx-modal__body {
  padding: 20px 24px 24px; overflow: auto; background: #fff;
}
.nx-app--dark .nx-modal.nx-modal--wide .nx-modal__body { background: #1A1A1A; color: #F7F7F7; }

/* nx-confirm — polished confirmation dialog (icon + title + body + actions). Shared by delete flows. */
.nx-app .nx-confirm {
  position: relative; width: 100%; max-width: 480px; background: #fff; border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
  padding: 24px; animation: nx-slide-up .2s cubic-bezier(.34,1.56,.64,1);
}
.nx-app .nx-confirm__head { display: flex; align-items: flex-start; gap: 14px; }
.nx-app .nx-confirm__icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: #fde7e9; color: #c50f1f; display: flex; align-items: center; justify-content: center;
}
.nx-app .nx-confirm__icon svg { width: 22px; height: 22px; }
.nx-app .nx-confirm__title { font-size: 18px; font-weight: 700; color: var(--text-primary, #242424); margin: 0; line-height: 1.2; }
.nx-app .nx-confirm__sub { font-size: 13px; color: var(--text-tertiary, #8a8886); margin: 3px 0 0; }
.nx-app .nx-confirm__body { font-size: 14px; color: var(--text-secondary, #484644); line-height: 1.5; margin: 16px 0 0; }
.nx-app .nx-confirm__footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.nx-app .nx-confirm__btn {
  padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: 'Segoe UI', var(--font);
  cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.nx-app .nx-confirm__btn:disabled { opacity: .5; cursor: not-allowed; }
.nx-app .nx-confirm__btn--cancel { background: #fff; border-color: var(--border-default, #e1dfdd); color: var(--text-primary, #242424); }
.nx-app .nx-confirm__btn--cancel:hover:not(:disabled) { background: var(--bg-subtle, #f3f2f1); }
.nx-app .nx-confirm__btn--danger { background: #c50f1f; color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.nx-app .nx-confirm__btn--danger:hover:not(:disabled) { background: #a80710; }
.nx-app .nx-confirm__btn--primary { background: var(--success-500, #0e700e); color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.nx-app .nx-confirm__btn--primary:hover:not(:disabled) { background: var(--success-700, #094509); }
.nx-app--dark .nx-confirm { background: #1A1A1A; }
.nx-app--dark .nx-confirm__title { color: #F7F7F7; }
.nx-app--dark .nx-confirm__body { color: #cbd5e1; }
.nx-app--dark .nx-confirm__icon { background: rgba(197,15,31,.18); color: #f87171; }
.nx-app--dark .nx-confirm__btn--cancel { background: #1b2636; border-color: #33415a; color: #F7F7F7; }
.nx-app--dark .nx-confirm__btn--cancel:hover:not(:disabled) { background: #3D3D3D; }

/* Hero action buttons (issue detail) — right-aligned in the hero row */
.nx-app .pd-hero__actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

/* Bulk action bar — appears above the issue grid when rows are selected */
.nx-app .nx-bulkbar { display: flex; align-items: center; gap: var(--sp-2); margin: 4px var(--sp-8) 0; padding: 8px var(--sp-4); background: #eff6fc; border: 1px solid #cce0f5; border-radius: 8px; }
.nx-app .nx-bulkbar__count { font-weight: 600; font-size: 13px; color: var(--text-secondary); margin-right: var(--sp-2); }
.nx-app .nx-bulkbar__busy { display: inline-flex; align-items: center; }
.nx-app .nx-bulkbar__spinner { width: 16px; height: 16px; border-width: 2px; }
.nx-app .eq-action--danger { color: var(--text-secondary); border-color: var(--border-default, #e1dfdd); }
.nx-app .eq-action--danger:hover { background: var(--bg-subtle); color: var(--brand-700, #115ea3); border-color: var(--brand-600, #0f6cbd); }
.nx-app .pd-btn--danger { background: #A80000; color: #fff; border-color: #A80000; }
.nx-app .pd-btn--danger:hover { background: #870000; border-color: #870000; color: #fff; }
.nx-app .pd-btn--danger:disabled { opacity: .6; }
.nx-app--dark .nx-bulkbar { background: #3D3D3D; border-color: #3D3D3D; }
.nx-app--dark .eq-action--danger { color: var(--text-secondary); border-color: var(--border-default); }
.nx-app--dark .eq-action--danger:hover { background: var(--bg-subtle); color: var(--brand-700); border-color: var(--brand-600); }


/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   Premium Offline Access Tab — nx-offline-*  (v8.75)
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* Panel wrapper */
.nx-app .nx-offline-panel {
  background: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}

/* ── Header ── */
.nx-app .nx-offline-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #0f2d5c 0%, #0078d4 100%);
  min-height: 72px;
}
.nx-app .nx-offline-hdr__left { display: flex; align-items: center; gap: 14px; }
.nx-app .nx-offline-hdr__icon-wrap {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(255,255,255,.15); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.nx-app .nx-offline-hdr__title {
  font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 2px; line-height: 1.2;
}
.nx-app .nx-offline-hdr__sub {
  font-size: 11px; color: rgba(255,255,255,.72); margin: 0; line-height: 1.3;
}
.nx-app .nx-offline-hdr__right { display: flex; align-items: center; gap: 10px; }
.nx-app .nx-offline-count-pill {
  background: rgba(255,255,255,.2); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 2px 10px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.3);
}
.nx-app .nx-offline-toggle-btn {
  width: 30px; height: 30px; border-radius: 6px;
  background: rgba(255,255,255,.12); border: none;
  color: rgba(255,255,255,.9); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.nx-app .nx-offline-toggle-btn:hover { background: rgba(255,255,255,.24); }
.nx-app .nx-offline-toggle-btn svg { transition: transform .22s ease; }
.nx-app .nx-offline-toggle-btn__icon--collapsed { transform: rotate(-90deg); }

/* ── Gate cards ── */
.nx-app .nx-offline-gate {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 16px 20px;
  background: #eff6fc; border: 1px solid #cce0f5; border-radius: 10px;
  padding: 14px 16px;
}
.nx-app .nx-offline-gate--warn { background: #fff8e1; border-color: #ffe082; }
.nx-app .nx-offline-gate__icon {
  flex-shrink: 0; color: #0078d4; margin-top: 1px;
}
.nx-app .nx-offline-gate--warn .nx-offline-gate__icon { color: #8d5700; }
.nx-app .nx-offline-gate__body { display: flex; flex-direction: column; gap: 2px; }
.nx-app .nx-offline-gate__body strong { font-size: 12px; color: #0d2e5c; }
.nx-app .nx-offline-gate--warn .nx-offline-gate__body strong { color: #5d3c00; }
.nx-app .nx-offline-gate__body span { font-size: 11px; color: #605e5c; }

/* ── Action cards ── */
.nx-app .nx-offline-actions {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
  padding: 16px 20px 12px;
}
.nx-app .nx-offline-action {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid #e8e6e3; background: #fafafa;
  text-align: left; transition: all .15s;
  position: relative; overflow: hidden;
}
.nx-app .nx-offline-action::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 10px 0 0 10px;
  background: transparent; transition: background .15s;
}
.nx-app .nx-offline-action:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  border-color: transparent;
}
.nx-app .nx-offline-action:disabled {
  opacity: .44; cursor: not-allowed;
  filter: grayscale(.2);
}

/* Icon wraps */
.nx-app .nx-offline-action__icon-wrap {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.nx-app .nx-offline-action:not(:disabled):hover .nx-offline-action__icon-wrap {
  transform: scale(1.08);
}
.nx-app .nx-offline-action__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nx-app .nx-offline-action__label {
  font-size: 12px; font-weight: 600; color: #323130;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-app .nx-offline-action__hint {
  font-size: 10px; color: #8a8886;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Prepare — blue */
.nx-app .nx-offline-action--prepare .nx-offline-action__icon-wrap {
  background: #eff6fc; color: #0078d4;
}
.nx-app .nx-offline-action--prepare::before { background: #0078d4; }
.nx-app .nx-offline-action--prepare:not(:disabled):hover {
  background: #f0f8ff; border-color: #cce0f5;
}

/* Cancel — red */
.nx-app .nx-offline-action--cancel .nx-offline-action__icon-wrap {
  background: #fde8e8; color: #a4262c;
}
.nx-app .nx-offline-action--cancel::before { background: #a4262c; }
.nx-app .nx-offline-action--cancel:not(:disabled):hover {
  background: #fff5f5; border-color: #f1b8b8;
}

/* Sync — teal */
.nx-app .nx-offline-action--sync .nx-offline-action__icon-wrap {
  background: #e6f8ee; color: #107c10;
}
.nx-app .nx-offline-action--sync::before { background: #107c10; }
.nx-app .nx-offline-action--sync:not(:disabled):hover {
  background: #f2fcf4; border-color: #9fd89f;
}

/* Retry — amber */
.nx-app .nx-offline-action--retry .nx-offline-action__icon-wrap {
  background: #fff4ce; color: #7d5700;
}
.nx-app .nx-offline-action--retry::before { background: #d4a100; }
.nx-app .nx-offline-action--retry:not(:disabled):hover {
  background: #fffbee; border-color: #ffe082;
}

/* ── Banners ── */
.nx-app .nx-offline-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 20px 12px;
  border-radius: 10px; padding: 12px 14px;
  font-size: 12px; animation: nx-fade-in .2s ease;
}
.nx-app .nx-offline-banner--success {
  background: #e6f8ee; border: 1px solid #9fd89f; color: #0a4a12;
}
.nx-app .nx-offline-banner--error {
  background: #fde8e8; border: 1px solid #f1b8b8; color: #8a1a1a;
}
.nx-app .nx-offline-banner__icon { flex-shrink: 0; margin-top: 1px; }
.nx-app .nx-offline-banner__msg { flex: 1; line-height: 1.5; }
.nx-app .nx-offline-banner__close {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 4px;
  border: none; background: transparent; cursor: pointer;
  color: currentColor; opacity: .65;
  display: flex; align-items: center; justify-content: center;
}
.nx-app .nx-offline-banner__close:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* ── Hero session card ── */
.nx-app .nx-offline-hero {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 20px 14px;
  border-radius: 12px; padding: 16px 18px;
  border: 1px solid;
}
.nx-app .nx-offline-hero--preparing {
  background: linear-gradient(135deg, #eff6fc 0%, #e1f0fd 100%);
  border-color: #b3d7f5;
}
.nx-app .nx-offline-hero--active {
  background: linear-gradient(135deg, #e6f8ee 0%, #d4f0dc 100%);
  border-color: #9fd89f;
}
.nx-app .nx-offline-hero--failed {
  background: linear-gradient(135deg, #fde8e8 0%, #fad8d8 100%);
  border-color: #f1b8b8;
}
.nx-app .nx-offline-hero__icon-col {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.nx-app .nx-offline-hero--preparing .nx-offline-hero__icon-col { background: rgba(0,120,212,.1); color: #0078d4; }
.nx-app .nx-offline-hero--active .nx-offline-hero__icon-col { background: rgba(16,124,16,.1); color: #107c10; }
.nx-app .nx-offline-hero--failed .nx-offline-hero__icon-col { background: rgba(164,38,44,.1); color: #a4262c; }
.nx-app .nx-offline-hero__body { flex: 1; min-width: 0; }
.nx-app .nx-offline-hero__name {
  font-size: 13px; font-weight: 700; color: #201f1e; margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-app .nx-offline-hero__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.nx-app .nx-offline-hero__date { font-size: 11px; color: #605e5c; }

/* Preparing pulse icon */
.nx-app .nx-offline-hero__pulse {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: nx-offline-pulse 2s ease-in-out infinite;
}
@keyframes nx-offline-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,120,212,.3) }
  50% { box-shadow: 0 0 0 8px rgba(0,120,212,0) }
}

/* Progress bar */
.nx-app .nx-offline-progress { display: flex; flex-direction: column; gap: 5px; }
.nx-app .nx-offline-progress__track {
  height: 6px; background: rgba(0,120,212,.15); border-radius: 100px; overflow: hidden;
}
.nx-app .nx-offline-progress__bar {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #0078d4, #40aff5);
  animation: nx-offline-indeterminate 1.6s ease-in-out infinite;
  width: 40%;
}
@keyframes nx-offline-indeterminate {
  0%   { transform: translateX(-100%) }
  100% { transform: translateX(350%) }
}
.nx-app .nx-offline-progress__label { font-size: 10px; color: #0050a0; }

/* ── Status badges ── */
.nx-app .nx-offline-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 100px;
  border: 1px solid transparent;
}
.nx-app .nx-offline-badge--active    { background: #e6f8ee; color: #107c10; border-color: #9fd89f; }
.nx-app .nx-offline-badge--preparing { background: #eff6fc; color: #0050a0; border-color: #b3d7f5; }
.nx-app .nx-offline-badge--saving    { background: #fff4ce; color: #7d5700; border-color: #ffe082; }
.nx-app .nx-offline-badge--complete  { background: #e6f8ee; color: #107c10; border-color: #9fd89f; }
.nx-app .nx-offline-badge--cancelled { background: #f3f2f1; color: #605e5c; border-color: #c8c6c4; }
.nx-app .nx-offline-badge--failed    { background: #fde8e8; color: #a4262c; border-color: #f1b8b8; }
.nx-app .nx-offline-badge--error     { background: #fde8e8; color: #a4262c; border-color: #f1b8b8; }

/* ── Session list ── */
.nx-app .nx-offline-list { padding: 0 20px 16px; }
.nx-app .nx-offline-list__header {
  display: grid; grid-template-columns: 36px 1fr 150px 120px;
  padding: 0 12px 6px; margin-bottom: 2px;
}
.nx-app .nx-offline-list__col {
  font-size: 10px; font-weight: 600; color: #8a8886; text-transform: none; letter-spacing: normal;
}

/* Session row */
.nx-app .nx-offline-row {
  display: grid; grid-template-columns: 36px 1fr 150px 120px;
  align-items: center;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; transition: all .15s;
  border: 1px solid transparent; margin-bottom: 4px;
  background: #fafafa;
}
.nx-app .nx-offline-row:hover { background: #f3f8fd; border-color: #d0e8f8; }
.nx-app .nx-offline-row:focus { outline: 2px solid #0078d4; outline-offset: 1px; }
.nx-app .nx-offline-row--selected {
  background: linear-gradient(135deg, #eff6fc 0%, #e8f2fb 100%);
  border-color: #0078d4;
  box-shadow: 0 0 0 1px rgba(0,120,212,.15);
}

.nx-app .nx-offline-row__sel { display: flex; align-items: center; justify-content: center; }
.nx-app .nx-offline-row__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #c8c6c4; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.nx-app .nx-offline-row--selected .nx-offline-row__radio,
.nx-app .nx-offline-row__radio--on {
  border-color: #0078d4; background: #0078d4;
}

.nx-app .nx-offline-row__name-col { min-width: 0; }
.nx-app .nx-offline-row__name {
  font-size: 12px; font-weight: 600; color: #106ebe;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.nx-app .nx-offline-row__date-col { display: flex; flex-direction: column; gap: 1px; }
.nx-app .nx-offline-row__date { font-size: 11px; color: #323130; }
.nx-app .nx-offline-row__time { font-size: 10px; color: #8a8886; }
.nx-app .nx-offline-row__status-col { display: flex; }

/* ── Empty state ── */
.nx-app .nx-offline-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 24px; text-align: center;
}
.nx-app .nx-offline-empty__icon svg { display: block; }
.nx-app .nx-offline-empty__title {
  font-size: 14px; font-weight: 700; color: #323130; margin: 0;
}
.nx-app .nx-offline-empty__hint {
  font-size: 12px; color: #605e5c; max-width: 320px; line-height: 1.5;
}

/* ── Skeleton ── */
.nx-app .nx-offline-skeleton { padding: 16px 20px; }

/* ── Dark mode overrides — nx-offline-* ── */
.nx-app--dark .nx-offline-panel { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-offline-hdr { background: linear-gradient(135deg, #060e1f 0%, #0050a0 100%); }
.nx-app--dark .nx-offline-gate { background: #0d2a44; border-color: #1e4a6e; }
.nx-app--dark .nx-offline-gate__body strong,
.nx-app--dark .nx-offline-gate__body span { color: #8ab4d0; }
.nx-app--dark .nx-offline-action { background: #141414; border-color: #3D3D3D; }
.nx-app--dark .nx-offline-action__label { color: #F7F7F7; }
.nx-app--dark .nx-offline-action__hint { color: #506070; }
.nx-app--dark .nx-offline-action--prepare .nx-offline-action__icon-wrap { background: #0d2a44; }
.nx-app--dark .nx-offline-action--cancel .nx-offline-action__icon-wrap { background: #3a1318; }
.nx-app--dark .nx-offline-action--sync .nx-offline-action__icon-wrap { background: #0d2a1a; }
.nx-app--dark .nx-offline-action--retry .nx-offline-action__icon-wrap { background: #2e2200; }
.nx-app--dark .nx-offline-banner--success { background: #0d2a1a; border-color: #2e6b36; color: #6fd987; }
.nx-app--dark .nx-offline-banner--error { background: #3a1318; border-color: #8b2030; color: #f87171; }
.nx-app--dark .nx-offline-hero--preparing { background: linear-gradient(135deg, #0d2a44 0%, #0a1e38 100%); border-color: #1e4a6e; }
.nx-app--dark .nx-offline-hero--active { background: linear-gradient(135deg, #0d2a1a 0%, #0a1e14 100%); border-color: #1e4a2e; }
.nx-app--dark .nx-offline-hero--failed { background: linear-gradient(135deg, #3a1318 0%, #2a0e12 100%); border-color: #6b1c24; }
.nx-app--dark .nx-offline-hero__name { color: #F7F7F7; }
.nx-app--dark .nx-offline-hero__date { color: #ADADAD; }
.nx-app--dark .nx-offline-row { background: #141414; border-color: transparent; }
.nx-app--dark .nx-offline-row:hover { background: #0f1e30; border-color: #1e4a6e; }
.nx-app--dark .nx-offline-row--selected { background: #0d2a44; border-color: #0078d4; }
.nx-app--dark .nx-offline-row__name { color: #60a5fa; }
.nx-app--dark .nx-offline-row__date { color: #F7F7F7; }
.nx-app--dark .nx-offline-row__time { color: #ADADAD; }
.nx-app--dark .nx-offline-list__col { color: #506070; }
.nx-app--dark .nx-offline-empty__title { color: #F7F7F7; }
.nx-app--dark .nx-offline-empty__hint { color: #ADADAD; }

/* ── Dark mode — PIN dialog ── */
.nx-app--dark .nx-pin-dialog { background: #1A1A1A; }
.nx-app--dark .nx-pin-rule { color: #ADADAD; }
.nx-app--dark .nx-pin-rule__icon { background: #3D3D3D; }
.nx-app--dark .nx-pin-rule--ok { color: #6fd987; }
.nx-app--dark .nx-pin-rule--ok .nx-pin-rule__icon { background: #107c10; }
.nx-app--dark .nx-pin-box { background: #141414; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .nx-pin-box:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.2); background: #0d1f33; }
.nx-app--dark .nx-pin-box--filled { border-color: #0078d4; background: #0d2a44; }
.nx-app--dark .nx-pin-label { color: #F7F7F7; }
.nx-app--dark .nx-pin-loading { background: rgba(13,21,35,.82); }

/* === Nexus dashboard v8.77 =============================================== */
.nx-app .nx-dash {
  padding: 0 16px 16px;
  background: transparent;
}
.nx-app .nx-dash__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid #e5e7eb;
}
.nx-app .nx-dash__tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nx-app .nx-dash__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
}
.nx-app .nx-dash__tab:hover { color: #1f2937; }
.nx-app .nx-dash__tab--active {
  color: #0078d4;
  border-bottom-color: #0078d4;
}
.nx-app .nx-dash__loading {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #6b7280;
}
.nx-app .nx-dash__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #d1d5db;
  border-top-color: #0078d4;
  border-radius: 50%;
  animation: nx-dash-spin .7s linear infinite;
}
.nx-app .nx-dash__body { padding-top: 16px; }
.nx-app .nx-dash__refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.nx-app .nx-dash__refresh-btn:hover { border-color: #93c5fd; color: #0078d4; }
.nx-app .nx-dash__refresh-btn:disabled { opacity: .55; cursor: not-allowed; }
.nx-app .nx-dash__spin { animation: nx-dash-spin .7s linear infinite; }
@keyframes nx-dash-spin { to { transform: rotate(360deg); } }
.nx-app .nx-dash-section { display: flex; flex-direction: column; gap: 16px; }
.nx-app .nx-dash-charts-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.nx-app .nx-dash-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 16px;
}
.nx-app .nx-dash-chart-panel,
.nx-app .nx-dash-table-panel {
  flex: 1;
  min-width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: 1px solid #e5e7eb;
  padding: 12px;
}
.nx-app .nx-dash-chart-wrap {
  position: relative;
  height: 240px;
}
.nx-app .nx-dash-chart-wrap--donut { height: 280px; }
.nx-app .nx-dash-tables-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 0;
}
.nx-app .nx-dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
}
.nx-app .nx-dash-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.nx-app .nx-dash-panel-subtitle {
  font-size: 11px;
  color: #6b7280;
}
.nx-app .nx-dash-kpis {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.nx-app .nx-dash-kpi {
  flex: 1;
  min-width: 120px;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #9ca3af;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.nx-app .nx-dash-kpi--green { border-left-color: #10b981; background: #f0fdf4; }
.nx-app .nx-dash-kpi--blue { border-left-color: #3b82f6; background: #eff6ff; }
.nx-app .nx-dash-kpi--amber { border-left-color: #f59e0b; background: #fffbeb; }
.nx-app .nx-dash-kpi--red { border-left-color: #ef4444; background: #fef2f2; }
.nx-app .nx-dash-kpi--gray { border-left-color: #9ca3af; background: #f9fafb; }
.nx-app .nx-dash-kpi__value {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  color: #111827;
}
.nx-app .nx-dash-kpi__label {
  margin-top: 6px;
  font-size: var(--nx-type-support);
  color: #6b7280;
}
.nx-app .nx-dash-kpi__sub {
  margin-top: 4px;
  font-size: var(--nx-type-support);
  color: #6b7280;
}
.nx-app .nx-dash-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.nx-app .nx-dash-filter-label {
  font-size: var(--nx-type-field-label);
  font-weight: 600;
  color: #6b7280;
}
.nx-app .nx-dash-filter-select {
  min-width: 120px;
  font-size: var(--nx-type-control);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 7px 10px;
  background: #fff;
  color: #374151;
}
.nx-app .nx-dash-filter-clear {
  font-size: var(--nx-type-button);
  color: #0078d4;
  padding: 6px 8px;
}

/* ── Multi-select filter dropdown (v9.05) ── */
.nx-app .nx-mf-backdrop {
  position: fixed; inset: 0; z-index: 99;
}
/* Label above each filter — matches classic "Step Level" label style */
.nx-app .nx-mf-wrap { display: flex; flex-direction: column; min-width: 120px; flex: 1; position: relative; }
.nx-app .nx-mf-label {
  display: block; font-size: var(--nx-type-field-label); font-weight: 600; color: #323130;
  margin-bottom: 3px; white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}
.nx-app .nx-mf {
  position: relative;
}
/* Trigger: flex-wrap so chips wrap onto multiple lines */
.nx-app .nx-mf__trigger {
  display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap;
  padding: 4px 8px 4px 8px; border: 1px solid #d1d5db; border-radius: 4px;
  background: #fff; font-size: var(--nx-type-control); color: #374151; cursor: pointer;
  min-width: 120px; min-height: 32px; transition: border-color .15s, box-shadow .15s;
  user-select: none;
}
.nx-app .nx-mf__trigger:hover { border-color: #0f6cbd; }
.nx-app .nx-mf--open .nx-mf__trigger {
  border-color: #0f6cbd; box-shadow: 0 0 0 2px rgba(15,108,189,.15);
}
/* Chips area */
.nx-app .nx-mf__chips { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; align-items: center; min-height: 22px; }
.nx-app .nx-mf__placeholder { font-size: inherit; color: #9ca3af; line-height: 22px; }
/* Individual chip — matches Telerik k-chip style */
.nx-app .nx-mf__chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe;
  border-radius: 3px; padding: 1px 4px 1px 7px; font-size: var(--nx-type-badge); font-weight: 500;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nx-app .nx-mf__chip-x {
  background: none; border: none; color: #3b82f6; cursor: pointer;
  padding: 0 2px; font-size: 13px; line-height: 1; flex-shrink: 0;
  border-radius: 2px;
}
.nx-app .nx-mf__chip-x:hover { color: #dc2626; background: rgba(220,38,38,.08); }
.nx-app .nx-mf__caret { font-size: 10px; color: #6b7280; transition: transform .15s; align-self: center; margin-left: 2px; flex-shrink: 0; }
.nx-app .nx-mf--open .nx-mf__caret { transform: rotate(180deg); }
.nx-app .nx-mf__panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 200px; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #F7F7F7; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 100; padding: 6px 0;
}
.nx-app .nx-mf--open .nx-mf__panel { display: block; }
.nx-app .nx-mf__item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: var(--nx-type-choice); color: #374151; cursor: pointer;
  transition: background .1s;
}
.nx-app .nx-mf__item:hover { background: #f0f7ff; }
.nx-app .nx-mf__item input[type=checkbox] {
  accent-color: #0f6cbd; width: 14px; height: 14px; flex-shrink: 0; cursor: pointer;
}
.nx-app .nx-mf__search {
  display: block; width: calc(100% - 20px); padding: 6px 10px; margin: 4px 10px 2px;
  border: 1px solid #F7F7F7; border-radius: 4px;
  font-size: var(--nx-type-search); color: #374151; outline: none;
  box-sizing: border-box;
}
.nx-app .nx-mf__search:focus { border-color: #0f6cbd; box-shadow: 0 0 0 2px rgba(15,108,189,.12); }
/* Inline dropdown (render-fragment based) */
.nx-app .nx-mf__trigger--open { border-color: #0f6cbd; box-shadow: 0 0 0 2px rgba(15,108,189,.15); }
.nx-app .nx-mf__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  min-width: 200px; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #F7F7F7; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px 0;
}
.nx-app .nx-mf__option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: var(--nx-type-choice); color: #374151; cursor: pointer;
  transition: background .1s;
}
.nx-app .nx-mf__option:hover { background: #f0f7ff; }
.nx-app .nx-mf__option--selected { background: #eff6ff; color: #1e40af; font-weight: 500; }
.nx-app .nx-mf__option input[type=checkbox] { accent-color: #0f6cbd; width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
/* Test Scripts pill toggle buttons */
.nx-app .nx-ts-pill {
  display: inline-flex; align-items: center; padding: 4px 14px;
  border: 1px solid #d1d5db; border-radius: 999px; background: #fff;
  font-size: var(--nx-type-button); color: #374151; cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.nx-app .nx-ts-pill:hover { border-color: #0f6cbd; color: #0f6cbd; }
.nx-app .nx-ts-pill--active { background: #0f6cbd; border-color: #0f6cbd; color: #fff; font-weight: 600; }
/* no-border grid wrap variant */
.nx-app .nx-dash-grid-wrap--no-border { border: none; border-radius: 0; }
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  color: #374151;
}
.nx-app .nx-dash-chip-check input { margin: 0; }
.nx-app .nx-dash-grid-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.nx-app .nx-dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.nx-app .nx-dash-table thead th {
  background: #f8fafc;
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
}
.nx-app .nx-dash-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 11px;
  color: #374151;
  vertical-align: top;
}
.nx-app .nx-dash-table tbody tr:hover { background: #f8fafc; }
.nx-app .nx-dash-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
}
.nx-app .nx-dash-badge--green { background: #dcfce7; color: #166534; }
.nx-app .nx-dash-badge--blue { background: #dbeafe; color: #1d4ed8; }
.nx-app .nx-dash-badge--amber { background: #fef3c7; color: #b45309; }
.nx-app .nx-dash-badge--red { background: #fee2e2; color: #b91c1c; }
.nx-app .nx-dash-badge--gray { background: #e5e7eb; color: #4b5563; }
.nx-app .nx-dash-collapsible { margin-top: 16px; }
.nx-app .nx-dash-collapsible summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 12px;
  color: #111827;
}
.nx-app .nx-dash-loading-panel {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  color: #6b7280;
  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);
}
.nx-app .nx-dash-empty {
  text-align: center;
  padding: 28px 16px;
  color: #6b7280;
}
.nx-app .nx-dash-grid-meta {
  font-size: 11px;
  color: #6b7280;
}
.nx-app .nx-dash-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.nx-app .nx-dash-dot--red { background: #ef4444; }
.nx-app .nx-dash-dot--yellow { background: #f59e0b; }
.nx-app .nx-dash-dot--green { background: #10b981; }
.nx-app .nx-dash-dot--blue { background: #3b82f6; }
.nx-app .nx-dash-dot--gray { background: #9ca3af; }
.nx-app .nx-dash-number { text-align: right; }
.nx-app .nx-dash-link { color: #0078d4; text-decoration: none; }
.nx-app .nx-dash-link:hover { text-decoration: underline; }
.nx-app .nx-dash-chart-panel--full { width: 100%; }
.nx-app .nx-dash-error { color: #b91c1c; }
.nx-app--dark .nx-dash__bar,
.nx-app--dark .nx-dash-panel-header,
.nx-app--dark .nx-dash-grid-wrap,
.nx-app--dark .nx-dash-chart-panel,
.nx-app--dark .nx-dash-table-panel,
.nx-app--dark .nx-dash-kpi,
.nx-app--dark .nx-dash-filters,
.nx-app--dark .nx-dash-loading-panel {
  border-color: #374151;
}
.nx-app--dark .nx-dash-chart-panel,
.nx-app--dark .nx-dash-table-panel,
.nx-app--dark .nx-dash-kpi,
.nx-app--dark .nx-dash__refresh-btn,
.nx-app--dark .nx-dash-filter-select,
.nx-app--dark .nx-dash-chip-check,
.nx-app--dark .nx-dash-filters,
.nx-app--dark .nx-dash-loading-panel {
  background: #111827;
  color: #e5e7eb;
}
.nx-app--dark .nx-dash-panel-title,
.nx-app--dark .nx-dash-collapsible summary,
.nx-app--dark .nx-dash-kpi__value,
.nx-app--dark .nx-dash-table thead th,
.nx-app--dark .nx-dash-table tbody td { color: #e5e7eb; }
.nx-app--dark .nx-dash-panel-subtitle,
.nx-app--dark .nx-dash-grid-meta,
.nx-app--dark .nx-dash-empty,
.nx-app--dark .nx-dash-filter-label,
.nx-app--dark .nx-dash-kpi__label,
.nx-app--dark .nx-dash-kpi__sub,
.nx-app--dark .nx-dash__loading { color: #9ca3af; }
.nx-app--dark .nx-dash-table thead th,
.nx-app--dark .nx-dash-table tbody tr:hover { background: #1f2937; }
.nx-app--dark .nx-dash-table tbody td { border-bottom-color: #374151; }
@media (max-width: 900px) {
  .nx-app .nx-dash__bar { align-items: flex-start; flex-direction: column; }
  .nx-app .nx-dash-chart-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
  .nx-app .nx-dash__tab,
  .nx-app .nx-dash-table,
  .nx-app .nx-dash-table thead th,
  .nx-app .nx-dash-table tbody td,
  .nx-app .nx-dash-filter-select,
  .nx-app .nx-dash-filter-label,
  .nx-app .nx-dash-chip-check,
  .nx-app .nx-dash-grid-meta { font-size: 13px; }
  .nx-app .nx-dash-panel-title { font-size: 13px; }
  .nx-app .nx-dash-kpi__value { font-size: 30px; }
}
@media (min-width: 1920px) {
  .nx-app .nx-dash__tab,
  .nx-app .nx-dash-table,
  .nx-app .nx-dash-table thead th,
  .nx-app .nx-dash-table tbody td,
  .nx-app .nx-dash-filter-select,
  .nx-app .nx-dash-filter-label,
  .nx-app .nx-dash-chip-check,
  .nx-app .nx-dash-grid-meta { font-size: 14px; }
  .nx-app .nx-dash-panel-title { font-size: 14px; }
  .nx-app .nx-dash-kpi__value { font-size: 32px; }
}

/* ── Dashboard Overview layout (classic-parity) ── */
.nx-app .nx-dash-overview-layout { display:flex; gap:16px; align-items:flex-start; }
.nx-app .nx-dash-overview-left { flex:0 0 340px; display:flex; flex-direction:column; gap:0; }
.nx-app .nx-dash-overview-right { flex:1; min-width:0; }
.nx-app .nx-dash-panel-header--blue { background:#1565c0; border-radius:8px 8px 0 0; padding:10px 14px; }
.nx-app .nx-dash-panel-title--white { color:#fff; font-size:12px; font-weight:600; }
.nx-app .nx-dash-table-panel--blue-hdr { padding:0; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 220px); }
.nx-app .nx-dash-table-panel--blue-hdr .nx-dash-panel-header { margin-bottom:0; border-bottom:none; flex-shrink:0; }
.nx-app .nx-dash-table-panel--blue-hdr .nx-dash-equip-scroll { height:calc(100vh - 280px); min-height:180px; overflow-y:auto !important; overflow-x:hidden; }
.nx-app .nx-dash-equip-scroll .nx-dash-table thead th { position:sticky; top:0; z-index:2; }
.nx-app .nx-dash-grid-wrap--no-border { border:none; border-radius:0; }
.nx-app .nx-dash-grid-wrap--scroll { max-height:220px; overflow-y:auto; }
.nx-app .nx-dash-chart-wrap--tall { height:340px; }
.nx-app .nx-dash-chart-wrap--donut-sm { height:300px; padding:8px 0 4px; }
.nx-app .nx-dash-link-cell { color:#0078d4; }
@media (max-width:900px) {
  .nx-app .nx-dash-overview-layout { flex-direction:column; }
  .nx-app .nx-dash-overview-left { flex:none; width:100%; }
}

/* Dashboard Overview v8.79 */
.nx-app .nx-dash-toggle { display:inline-flex; border:1px solid #d1d5db; border-radius:6px; overflow:hidden; }
.nx-app .nx-dash-toggle__btn { padding:4px 12px; font-size:11px; font-weight:600; color:#6b7280; background:#fff; }
.nx-app .nx-dash-toggle__btn--active { background:#1565c0; color:#fff; }
.nx-app .nx-dash-expand-btn { padding:4px; color:rgba(255,255,255,0.85); background:transparent; border-radius:4px; }
.nx-app .nx-dash-expand-btn:hover { color:#fff; background:rgba(255,255,255,0.15); }
.nx-app .nx-dash-xfilter { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; margin-bottom:12px; flex-wrap:wrap; }
.nx-app .nx-dash-xfilter__label { font-size:11px; font-weight:600; color:#1d4ed8; }
.nx-app .nx-dash-xfilter__pill { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; background:#dbeafe; color:#1d4ed8; border-radius:999px; font-size:11px; font-weight:500; }
.nx-app .nx-dash-xfilter__pill--tag { background:#fce7f3; color:#9d174d; }
.nx-app .nx-dash-xfilter__pill button { color:inherit; font-size:13px; line-height:1; padding:0 2px; }
.nx-app .nx-dash-focus-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9000; display:flex; align-items:center; justify-content:center; }
.nx-app .nx-dash-focus-modal { background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.3); width:85vw; max-width:1100px; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; }
.nx-app .nx-dash-focus-modal__header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#1565c0; color:#fff; font-size:13px; font-weight:600; }
.nx-app .nx-dash-focus-modal__header button { color:#fff; font-size:20px; line-height:1; padding:0 4px; }
.nx-app .nx-dash-focus-modal__body { flex:1; overflow:auto; padding:16px; }
.nx-app .nx-dash-row--selected { background:#eff6ff !important; }
.nx-app .nx-dash-row--selected td { color:#1d4ed8; }
.nx-app .nx-dash-grid-wrap--scroll { max-height:300px; overflow-y:auto; }
.nx-app .nx-dash-section-error { display:flex; align-items:center; gap:10px; padding:16px; color:#b91c1c; font-size:11px; }
.nx-app .nx-dash-retry-btn { padding:4px 10px; border:1px solid #fca5a5; border-radius:6px; color:#b91c1c; font-size:11px; background:#fff; }
.nx-app .nx-dash-retry-btn:hover { background:#fef2f2; }
.nx-app .nx-dash-clickable-row { cursor:pointer; }
.nx-app .nx-dash-clickable-row:hover td { background:#f0f7ff; }
.nx-app .nx-dash-cell-truncate { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-app .nx-dash-overview-layout { align-items:stretch; }
.nx-app .nx-dash-overview-left { flex:0 0 340px; }
.nx-app .nx-dash-overview-right { display:flex; min-width:0; }
.nx-app .nx-dash-overview-right .nx-dash-table-panel--blue-hdr { display:flex; flex:1; flex-direction:column; min-height:0; }
.nx-app .nx-dash-chart-wrap--tall { height:240px; }
.nx-app .nx-dash-chart-stage { position:relative; width:100%; height:100%; }
.nx-app .nx-dash-chart-stage canvas { width:100% !important; height:100% !important; }
.nx-app .nx-dash-chart-hitboxes { position:absolute; inset:12px 18px 34px 42px; display:grid; gap:12px; pointer-events:none; }
.nx-app .nx-dash-chart-hitbox { pointer-events:auto; border-radius:8px; border:1px solid transparent; background:transparent; }
.nx-app .nx-dash-chart-hitbox:hover { background:rgba(21,101,192,0.06); border-color:rgba(21,101,192,0.16); }
.nx-app .nx-dash-chart-hitbox--active { background:rgba(21,101,192,0.10); border-color:rgba(21,101,192,0.28); }
/* Tagging chart fills panel body — no whitespace below x-axis */
.nx-app .nx-dash-chart-fill { flex:1; min-height:200px; position:relative; }
/* Dashboard Overview v8.85 — compact left column */
/* Tagging right panel: table view should fill available panel height */
.nx-app .nx-dash-overview-right .nx-dash-table-panel--blue-hdr { min-height:280px; }
.nx-app .nx-dash-grid-wrap--fill { flex:1 1 0; overflow-y:auto; min-height:0; }
/* Issue Status: fixed max-height with always-visible scrollbar */
.nx-app .nx-dash-issue-scroll { max-height:240px; overflow-y:scroll; scrollbar-width:thin; }
.nx-app .nx-dash-issue-fill  { max-height:180px; overflow-y:scroll; scrollbar-width:thin; }
/* Tagging table: fill remaining height of flex column panel */
.nx-app .nx-dash-tagging-table-wrap { flex:1 1 0; min-height:0; overflow-y:scroll; scrollbar-width:thin; max-height:420px; }
/* Remove duplicate scroll rule */
.nx-app .nx-dash-grid-wrap--scroll { max-height:300px; overflow-y:auto; }
/* ── Script status chips in header (Option D) ── */
.nx-app .nx-dash-panel-header--wrap { flex-wrap: wrap; gap: 6px 12px; }
.nx-app .nx-dash-script-chips { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.nx-app .nx-dash-script-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; color:#374151; white-space:nowrap;
}
.nx-app .nx-dash-script-chip__dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}
.nx-app .nx-dash-script-chip strong { font-weight:700; color:#141414; }

/* Donut: full height now legend is in header */
.nx-app .nx-dash-chart-wrap--donut-sm { height:160px !important; padding:4px 0; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   ★  PREMIUM DASHBOARD — HERO THEME  v8.89
   Matches the pd-hero banner: deep navy → Microsoft blue gradient,
   radial sky-blue + indigo accents, glassmorphism controls, elevated cards.
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Shared hero gradient token ── */
:root {
  --nx-hero-grad:
    radial-gradient(ellipse at 82% 25%, rgba(96,165,250,.32) 0%, transparent 55%),
    radial-gradient(ellipse at 14% 80%, rgba(99,102,241,.22) 0%, transparent 48%),
    linear-gradient(120deg,#020f22 0%,#042952 22%,#0c3b5e 46%,#0f548c 68%,#0f6cbd 86%,#1586d8 100%);
}

/* ── Panel card ── */
.nx-app .nx-dash-table-panel,
.nx-app .nx-dash-chart-panel {
  border-radius: 16px !important;
  border: 1px solid rgba(15,108,189,.16) !important;
  box-shadow: 0 6px 24px rgba(2,15,34,.10), 0 1px 4px rgba(2,15,34,.06) !important;
  overflow: hidden;
  background: #fff;
}

/* ── Panel header — Fluent white + blue accent border (Option C) ── */
.nx-app .nx-dash-panel-header--blue {
  background: #ffffff !important;
  border-left: 4px solid #0f6cbd !important;
  border-bottom: 1px solid #F7F7F7 !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  position: relative;
  overflow: visible;
}
.nx-app .nx-dash-panel-header--blue::after { display: none; }
.nx-app .nx-dash-panel-title--white {
  color: #141414 !important;
  font-size: var(--nx-type-panel-title);
  font-weight: 700 !important;
  text-shadow: none;
}
.nx-app .nx-dash-panel-subtitle { color: #64748b !important; }

/* ── Toggle buttons — clean pill on light header ── */
.nx-app .nx-dash-toggle {
  display: inline-flex;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  overflow: hidden;
  background: #f8fafc !important;
  backdrop-filter: none;
}
.nx-app .nx-dash-toggle__btn {
  padding: 4px 12px !important;
  font-size: var(--nx-type-button) !important;
  font-weight: 600 !important;
  color: #64748b !important;
  background: transparent !important;
  border: none;
  transition: background .15s, color .15s;
}
.nx-app .nx-dash-toggle__btn:hover { color: #0f6cbd !important; background: #eff6ff !important; }
.nx-app .nx-dash-toggle__btn--active {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500)) !important;
  color: #fff !important;
  border-radius: 6px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-600) 28%, transparent);
}

/* ── Expand button — on light header ── */
.nx-app .nx-dash-expand-btn {
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #F7F7F7;
  border-radius: 6px;
  padding: 4px 6px;
  transition: all .15s;
}
.nx-app .nx-dash-expand-btn:hover { color: #0f6cbd; background: #eff6ff; border-color: #93c5fd; }

/* ── Table header row — premium blue tint, fluid font ── */
.nx-app .nx-dash-table thead th {
  background: linear-gradient(to bottom, #eaf3fb, #dceefb) !important;
  color: #0c3b5e !important;
  font-weight: 700 !important;
  font-size: var(--nx-type-grid-header);
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(15,108,189,.18) !important;
}

/* ── Table body rows — fluid font ── */
.nx-app .nx-dash-table tbody td {
  padding: 10px 14px !important;
  font-size: clamp(11px, 0.9vw, 13px);
  color: #141414 !important;
  border-bottom: 1px solid rgba(226,232,240,.75) !important;
}

/* ── Clickable row hover ── */
.nx-app .nx-dash-clickable-row:hover td {
  background: linear-gradient(to right, #dbeafe 0%, #f0f7ff 100%) !important;
  color: #1e3a8a !important;
}

/* ── Selected row ── */
.nx-app .nx-dash-row--selected { background: #dbeafe !important; }
.nx-app .nx-dash-row--selected td {
  background: transparent !important;
  color: #1e40af !important;
  font-weight: 600;
  border-left: none;
}
.nx-app .nx-dash-row--selected td:first-child {
  border-left: 3px solid #1586d8;
  padding-left: 11px !important;
}

/* ── Cross-filter bar ── */
.nx-app .nx-dash-xfilter {
  background: linear-gradient(to right, #eff6ff, #f0f7ff) !important;
  border: 1px solid rgba(15,108,189,.22) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  box-shadow: 0 1px 4px rgba(2,15,34,.06);
}
.nx-app .nx-dash-xfilter__pill {
  background: rgba(15,108,189,.12) !important;
  color: #0c3b5e !important;
  border: 1px solid rgba(15,108,189,.28);
  font-weight: 600;
}
.nx-app .nx-dash-xfilter__pill button:hover { color: #ef4444; }

/* ── Dashboard tab bar ── */
.nx-app .nx-dash__bar {
  background: linear-gradient(to bottom,#f8fafc,#ffffff) !important;
  border-bottom: 1px solid rgba(15,108,189,.14) !important;
  box-shadow: 0 2px 8px rgba(2,15,34,.06) !important;
}
.nx-app .nx-dash__tab {
  color: #475569 !important;
  font-weight: 500;
  font-size: clamp(11px, 1vw, 13px);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nx-app .nx-dash__tab:hover { color: #0f6cbd !important; background: rgba(15,108,189,.06) !important; }
.nx-app .nx-dash__tab--active {
  color: #0f6cbd !important;
  border-bottom-color: #0f6cbd !important;
  font-weight: 700 !important;
  background: rgba(15,108,189,.08) !important;
}

/* ── Refresh button ── */
.nx-app .nx-dash__refresh-btn {
  background: linear-gradient(135deg,#0f6cbd,#1586d8) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(15,108,189,.35) !important;
  font-weight: 600;
  font-size: 11.5px !important;
  transition: box-shadow .15s, opacity .15s;
}
.nx-app .nx-dash__refresh-btn:hover { box-shadow: 0 4px 12px rgba(15,108,189,.5) !important; opacity: .92; }
.nx-app .nx-dash__refresh-btn:disabled { opacity: .5; }

/* ── Focus / expand modal ── */
.nx-app .nx-dash-focus-modal__header {
  background: var(--nx-hero-grad) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
}

/* ── Scrollbar chrome to match blue theme ── */
.nx-app .nx-dash-issue-fill::-webkit-scrollbar,
.nx-app .nx-dash-tagging-table-wrap::-webkit-scrollbar { width: 5px; }
.nx-app .nx-dash-issue-fill::-webkit-scrollbar-track,
.nx-app .nx-dash-tagging-table-wrap::-webkit-scrollbar-track { background: #f0f7ff; }
.nx-app .nx-dash-issue-fill::-webkit-scrollbar-thumb,
.nx-app .nx-dash-tagging-table-wrap::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 4px; }
.nx-app .nx-dash-issue-fill::-webkit-scrollbar-thumb:hover,
.nx-app .nx-dash-tagging-table-wrap::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

/* ── Link cells ── */
.nx-app .nx-dash-link-cell { color: #0f6cbd !important; font-weight: 500; }
.nx-app .nx-dash-link { color: #0f6cbd; font-weight: 500; }
.nx-app .nx-dash-link:hover { color: #042952; text-decoration: underline; }



/* Panel shell */
.nx-app .nx-btree-panel {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden;
  display:flex; flex-direction:column; min-height:0; position:relative;
}
.nx-app .nx-btree-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#1565c0 0%,#42a5f5 60%,#90caf9 100%);
  z-index:1;
}
/* Header */
.nx-app .nx-btree-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:#fff;
  border-bottom:1px solid #e5e7eb;
  gap:8px; flex-shrink:0;
}
.nx-app .nx-btree-header__left { display:flex; align-items:center; gap:8px; min-width:0; }
.nx-app .nx-btree-header__icon { color:#1565c0; flex-shrink:0; }
.nx-app .nx-btree-header__title { font-size:12px; font-weight:700; color:#111827; letter-spacing: normal; white-space:nowrap; }
.nx-app .nx-btree-header__badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  background:#eff6ff; color:#1565c0;
  border-radius:999px; font-size:10px; font-weight:700; border:1px solid #bfdbfe;
}
.nx-app .nx-btree-header__actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.nx-app .nx-btree-action-btn {
  display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px;
  font-size:10px; font-weight:600; color:#1565c0;
  background:#eff6ff; border:1px solid #bfdbfe; transition:background .15s;
}
.nx-app .nx-btree-action-btn:hover { background:#dbeafe; }
/* Search */
.nx-app .nx-btree-search {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:#f8faff; border-bottom:1px solid #e5e7eb; flex-shrink:0;
}
.nx-app .nx-btree-search__icon { color:#9ca3af; flex-shrink:0; }
.nx-app .nx-btree-search__input { flex:1; min-width:0; font-size:11px; color:#111827; background:transparent; border:none; outline:none; padding:2px 0; }
.nx-app .nx-btree-search__input::placeholder { color:#9ca3af; }
.nx-app .nx-btree-search__clear { color:#9ca3af; font-size:14px; line-height:1; padding:0 2px; }
.nx-app .nx-btree-search__clear:hover { color:#374151; }
/* Body */
/* min-height keeps the scroll body from collapsing to zero. flex-basis:0 means the body takes its
   height purely from the free space in the panel, so wherever the panel has no definite height the
   body computed to 0 and the tree rendered as an empty strip. The floor guarantees ~9 rows. */
.nx-app .nx-btree-body { overflow-y:scroll; flex:1 1 0; min-height:280px; padding:6px 0; scrollbar-width:thin; }
/* Empty */
.nx-app .nx-btree-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 16px; color:#9ca3af; font-size:11px; text-align:center; }
.nx-app .nx-btree-no-match { padding:14px 16px; font-size:11px; color:#6b7280; text-align:center; }
.nx-app .nx-btree-no-match strong { color:#374151; }
/* Skeleton */
.nx-app .nx-btree-skeleton { height:10px; border-radius:6px; background:linear-gradient(90deg,#f3f4f6 25%,#e9ecef 50%,#f3f4f6 75%); background-size:200% 100%; animation:nx-btree-shimmer 1.4s infinite; margin:8px 14px; }
@keyframes nx-btree-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* Node */
.nx-app .nx-btree-node { position:relative; }
/* Row */
.nx-app .nx-btree-row {
  display:flex; align-items:center; gap:6px;
  padding-top:5px; padding-right:10px; padding-bottom:5px;
  border-radius:6px; margin:1px 6px; cursor:default;
  transition:background .12s; position:relative;
}
.nx-app .nx-btree-row--expandable { cursor:pointer; }
.nx-app .nx-btree-row:hover { background:#eff6ff; }
.nx-app .nx-btree-row:focus-visible { outline:2px solid #1565c0; outline-offset:1px; }
/* Connector */
.nx-app .nx-btree-connector { position:absolute; left:0; top:50%; width:12px; height:1px; background:#d1d5db; pointer-events:none; }
/* Vertical line */
.nx-app .nx-btree-children { position:relative; }
.nx-app .nx-btree-children::before { content:''; position:absolute; left:calc(12px + var(--depth,0) * 20px + 20px); top:0; bottom:6px; width:1px; background:#e5e7eb; pointer-events:none; }
/* Chevron */
.nx-app .nx-btree-chevron { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; color:#6b7280; transition:transform .18s ease,color .12s; transform:rotate(-90deg); }
.nx-app .nx-btree-chevron--open { transform:rotate(0deg); color:#1565c0; }
.nx-app .nx-btree-chevron--leaf { width:16px; height:16px; }
/* Level icons - same glyphs as the Building areas sub-tab pills, tinted per level with the colours
   the old level dots used. Replaces .nx-btree-dot, which no longer appears in any markup. */
.nx-app .nx-btree-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; }
.nx-app .nx-btree-icon svg { display:block; }
.nx-app .nx-btree-icon--building { color:#1565c0; }
.nx-app .nx-btree-icon--tranche  { color:#00838f; }
.nx-app .nx-btree-icon--loop     { color:#7b1fa2; }
.nx-app .nx-btree-icon--area     { color:#e65100; }
.nx-app .nx-btree-icon--subarea  { color:#2e7d32; }
.nx-app .nx-btree-icon--room     { color:#c62828; }
.nx-app .nx-btree-icon--skid     { color:#546e7a; }
/* Label */
.nx-app .nx-btree-label { flex:1; min-width:0; font-size:11.5px; color:#111827; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-app .nx-btree-highlight { background:#fef08a; color:#713f12; border-radius:2px; padding:0 1px; }
/* Level badge */
.nx-app .nx-btree-badge { flex-shrink:0; font-size:9px; font-weight:700; letter-spacing: normal; text-transform: none; padding:2px 6px; border-radius:999px; border:1px solid transparent; opacity:.75; }
.nx-app .nx-btree-badge--building { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.nx-app .nx-btree-badge--tranche  { background:#ccfbf1; color:#065f46; border-color:#99f6e4; }
.nx-app .nx-btree-badge--loop     { background:#f3e8ff; color:#6b21a8; border-color:#e9d5ff; }
.nx-app .nx-btree-badge--area     { background:#ffedd5; color:#9a3412; border-color:#fed7aa; }
.nx-app .nx-btree-badge--subarea  { background:#dcfce7; color:#14532d; border-color:#bbf7d0; }
.nx-app .nx-btree-badge--room     { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.nx-app .nx-btree-badge--skid     { background:#f1f5f9; color:#334155; border-color:#cbd5e1; }
/* Loading spinner */
.nx-app .nx-btree-loading-row { display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:11px; color:#6b7280; }
.nx-app .nx-btree-spinner { width:12px; height:12px; border-radius:50%; border:2px solid #d1d5db; border-top-color:#1565c0; animation:nx-btree-spin .6s linear infinite; flex-shrink:0; }
@keyframes nx-btree-spin { to { transform:rotate(360deg); } }
.nx-app .nx-btree-hint { font-size:10.5px; color:#9ca3af; padding:4px 10px; }
/* Footer action. Sits inside the panel as the last flex child so it docks below the scrolling
   body rather than scrolling with it. The button itself uses the shared .pd-btn classes, so it
   matches the View RFIs / View issues buttons elsewhere and inherits their dark mode. */
.nx-app .nx-btree-foot {
  display:flex; justify-content:flex-end; padding:8px 12px;
  background:#fff; border-top:1px solid #e5e7eb; flex-shrink:0;
}
/* Dark mode */
.nx-app--dark .nx-btree-panel { background:#1A1A1A; border-color:#334155; }
.nx-app--dark .nx-btree-search { background:#141414; border-color:#334155; }
.nx-app--dark .nx-btree-foot { background:#141414; border-color:#334155; }
.nx-app--dark .nx-btree-search__input { color:#F7F7F7; }
.nx-app--dark .nx-btree-row:hover { background:rgba(255,255,255,.06); }
.nx-app--dark .nx-btree-label { color:#F7F7F7; }
.nx-app--dark .nx-btree-children::before { background:#334155; }
/* Lightened level icons for the dark surface. The light-mode hues (notably loop #7b1fa2 at 2.12:1
   and building #1565c0 at 3.03:1) do not clear the 3:1 minimum for non-text contrast against
   #1A1A1A, so each level gets a lighter tint drawn from the existing dark tag palette. */
.nx-app--dark .nx-btree-icon--building { color:#479EF5; }
.nx-app--dark .nx-btree-icon--tranche  { color:#4dd0e1; }
.nx-app--dark .nx-btree-icon--loop     { color:#b39ddb; }
.nx-app--dark .nx-btree-icon--area     { color:#ffb84d; }
.nx-app--dark .nx-btree-icon--subarea  { color:#81c784; }
.nx-app--dark .nx-btree-icon--room     { color:#ef9a9a; }
.nx-app--dark .nx-btree-icon--skid     { color:#b0bec5; }

/* ── DARK MODE — Dashboard Tabs (v9.21) ─────────────────────────────────── */

/* Dashboard tab bar & tabs */
.nx-app--dark .nx-dash__tabs { background:#1A1A1A; border-bottom-color:#3D3D3D; }
.nx-app--dark .nx-dash__tab { color:#ADADAD; }
.nx-app--dark .nx-dash__tab:hover { color:#F7F7F7 !important; background:rgba(71,158,245,.08) !important; }
.nx-app--dark .nx-dash__tab--active { color:#60a5fa !important; border-bottom-color:#60a5fa !important; background:transparent !important; }
.nx-app--dark .nx-dash__loading { color:#ADADAD; }
.nx-app--dark .nx-dash__spinner { border-color:rgba(71,158,245,.2); border-top-color:#479EF5; }

/* KPI cards */
.nx-app--dark .nx-dash-kpi { background:#1A1A1A; border-left-color:#3D3D3D; }
.nx-app--dark .nx-dash-kpi--green  { background:rgba(16,185,129,.08);  border-left-color:#10b981; }
.nx-app--dark .nx-dash-kpi--blue   { background:rgba(59,130,246,.08);  border-left-color:#3b82f6; }
.nx-app--dark .nx-dash-kpi--amber  { background:rgba(245,158,11,.08);  border-left-color:#f59e0b; }
.nx-app--dark .nx-dash-kpi--red    { background:rgba(239,68,68,.08);   border-left-color:#ef4444; }
.nx-app--dark .nx-dash-kpi--gray   { background:rgba(156,163,175,.08); border-left-color:#6b7280; }
.nx-app--dark .nx-dash-kpi__value  { color:#F7F7F7; }
.nx-app--dark .nx-dash-kpi__label  { color:#ADADAD; }
.nx-app--dark .nx-dash-kpi__sub    { color:#64748b; }

/* Badges */
.nx-app--dark .nx-dash-badge        { background:#3D3D3D; color:#ADADAD; }
.nx-app--dark .nx-dash-badge--green { background:rgba(16,185,129,.15); color:#34d399; }
.nx-app--dark .nx-dash-badge--blue  { background:rgba(59,130,246,.15); color:#60a5fa; }
.nx-app--dark .nx-dash-badge--amber { background:rgba(245,158,11,.15); color:#fbbf24; }
.nx-app--dark .nx-dash-badge--red   { background:rgba(239,68,68,.15);  color:#f87171; }
.nx-app--dark .nx-dash-badge--gray  { background:rgba(156,163,175,.12); color:#ADADAD; }

/* Status dots — no bg change needed, but ensure visibility */
.nx-app--dark .nx-dash-dot--red    { background:#f87171; }
.nx-app--dark .nx-dash-dot--yellow { background:#fbbf24; }
.nx-app--dark .nx-dash-dot--green  { background:#34d399; }
.nx-app--dark .nx-dash-dot--blue   { background:#60a5fa; }
.nx-app--dark .nx-dash-dot--gray   { background:#475569; }

/* Links, errors, misc text */
.nx-app--dark .nx-dash-link       { color:#60a5fa; }
.nx-app--dark .nx-dash-link:hover { color:#93c5fd; }
.nx-app--dark .nx-dash-link-cell  { color:#60a5fa !important; }
.nx-app--dark .nx-dash-error,
.nx-app--dark .nx-dash-section-error { color:#f87171; }
.nx-app--dark .nx-dash-number     { color:#F7F7F7; }
.nx-app--dark .nx-dash-clickable-row:hover { background:rgba(71,158,245,.08); }

/* Retry & filter-clear buttons */
.nx-app--dark .nx-dash-retry-btn     { background:#141414; border-color:#3a1318; color:#f87171; }
.nx-app--dark .nx-dash-retry-btn:hover { background:#3a1318; }
.nx-app--dark .nx-dash-filter-clear  { background:#141414; border-color:#3D3D3D; color:#ADADAD; }
.nx-app--dark .nx-dash-filter-clear:hover { background:#3D3D3D; color:#F7F7F7; }

/* Chart-mode toggle */
.nx-app--dark .nx-dash-toggle         { border-color:#3D3D3D; }
.nx-app--dark .nx-dash-toggle__btn    { background:#1A1A1A; color:#ADADAD; }
.nx-app--dark .nx-dash-toggle__btn:hover { color:#60a5fa !important; background:rgba(71,158,245,.1) !important; }
.nx-app--dark .nx-dash-toggle__btn--active { background:#1e3a5f; color:#60a5fa; border-color:#3b82f6; }

/* Expand-to-focus button (on blue panel headers — already readable on dark) */
.nx-app--dark .nx-dash-expand-btn       { color:rgba(255,255,255,.85); }
.nx-app--dark .nx-dash-expand-btn:hover { color:#fff; background:rgba(255,255,255,.15); border-color:transparent; }

/* Active-filter strip (cross-filter) */
.nx-app--dark .nx-dash-xfilter          { background:#0d2a44; border-color:#1e4a6e; }
.nx-app--dark .nx-dash-xfilter__label   { color:#60a5fa; }
.nx-app--dark .nx-dash-xfilter__pill    { background:rgba(59,130,246,.18); color:#93c5fd; }
.nx-app--dark .nx-dash-xfilter__pill--tag { background:rgba(244,114,182,.12); color:#f9a8d4; }
.nx-app--dark .nx-dash-xfilter__pill button:hover { color:#f87171; }

/* Legend chips (Script Status / Risk type) */
.nx-app--dark .nx-dash-script-chip      { background:#1A1A1A; border-color:#3D3D3D; color:#ADADAD; }
.nx-app--dark .nx-dash-script-chip strong { color:#F7F7F7; }

/* Focus / expand overlay modals */
.nx-app--dark .nx-dash-focus-modal   { background:#1A1A1A; }
.nx-app--dark .nx-dash-focus-modal__header { background:linear-gradient(135deg,#0f3460,#1565c0); }
.nx-app--dark .nx-dash-focus-modal__body { background:#1A1A1A; }
.nx-app--dark .nx-focus-overlay,
.nx-app--dark .nx-dash-focus-overlay { background:rgba(0,0,0,.72); }
.nx-app--dark .nx-focus-modal        { background:#1A1A1A; border-color:#3D3D3D; box-shadow:0 20px 60px rgba(0,0,0,.7); }
.nx-app--dark .nx-focus-modal__header { background:linear-gradient(135deg,#0f3460,#1565c0); }
.nx-app--dark .nx-focus-modal__title { color:#fff; }
.nx-app--dark .nx-focus-modal__close { color:rgba(255,255,255,.8); }
.nx-app--dark .nx-focus-modal__close:hover { background:rgba(255,255,255,.2); }
.nx-app--dark .nx-focus-modal__body  { background:#1A1A1A; }

/* Issues Report chart cards */
.nx-app--dark .nx-ir-chart-grid,
.nx-app--dark .nx-ir-expand-grid     { gap: 10px; }
.nx-app--dark .nx-ir-card            { background:#1A1A1A; border-color:#3D3D3D; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.nx-app--dark .nx-ir-card__hdr       { background:#141414; border-bottom-color:#3D3D3D; border-left-color:#3b82f6; }

/* ==========================================================================
   Inspection Steps subsystem (New UI) — stepper, step grid, slide-out panels.
   Used by NexusInspectionStepsTab + NexusStepper + NexusInspectionStepGrid +
   NexusStepPanel + NexusStartTestPanel. Design-language matches the pd-* shell.
   ========================================================================== */

/* ---- Tab container + layout ---- */
.nx-insp { position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.nx-insp__loading { padding: var(--sp-3); color: var(--text-tertiary); font-style: italic; }
/* Loading state — classic SpinnerComponent parity, New UI look. No card: just the spinner, with the
   optional status message directly under it. */
.nx-insp__overlay-box {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 60; animation: nx-fade-in .15s ease-out; pointer-events: none;
}
/* The busy state dims the content elements rather than laying a box over them: the tab's box is one
   scroller-height tall while its content is taller, so any inset:0 overlay left part of the grid
   showing once the page was scrolled. Dimming the elements always covers exactly the content, and
   dimming them individually keeps the spinner box itself at full opacity. */
.nx-insp--busy .nx-insp__stepper,
.nx-insp--busy .nx-insp__clearwrap,
.nx-insp--busy .nx-insp-grid-wrap,
.nx-insp--busy .nx-insp-grid__pager { opacity: .45; pointer-events: none; user-select: none; }
.nx-insp__overlay-spinner {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 3px solid var(--border-default, #e0e0e0);
  border-top-color: #0078D4; border-radius: 50%;
  animation: nx-spin .7s linear infinite;
}
.nx-insp__overlay-msg {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-align: center; line-height: 1.35; max-width: 320px;
}
.nx-app--dark .nx-insp__overlay-spinner { border-color: #3D3D3D; border-top-color: #3b82f6; }
.nx-insp__layout { display: flex; flex-direction: column; gap: var(--sp-4); align-items: stretch; }
.nx-insp__layout--nostepper { display: block; }
.nx-insp__stepper { border: 1px solid var(--border-default); border-radius: 8px; background: var(--gray-50, #F8FAFC); padding: var(--sp-2); }
.nx-insp__stepper-title { font-weight: 700; font-size: 13px; color: var(--text-secondary); margin-bottom: var(--sp-3); }

/* ---- Scroll model: the outer scroller may only travel far enough to reach the level strip -------
   The tab stacks an optional alert banner, the next-action banner, the summary counts, the note,
   the status guide, and then the level strip + grid column. Everything before the strip is the
   scroll region: those blocks keep their natural height (flex-shrink:0) and sit *above* a layout
   that is itself pinned to the full height of the tab, so the content overflows by exactly their
   combined height. Scrolling consumes that and no more - the level strip lands directly under the
   toolbar and the outer scrollbar is at its end, so the grid's sticky header can never be pushed
   out of view. From there the grid's own scrollbar takes over. Inside the layout the strip is
   fixed and the grid column flexes, so the grid gets every pixel below the strip; that, not a
   min-height, is what keeps it from collapsing to one row. Everything is content-measured, so a
   summary row that wraps on a narrow window simply lengthens the scroll by the same amount. The
   :has() guards keep every other tab on its existing behaviour. */
.nx-app .pd-detail .eq-body:has(.nx-insp) > * { height: 100%; }
.nx-app .page-scroll:has(.nx-bfd .nx-insp:not(:where([data-nx-route-hidden] *))) > .nx-bfd { height: 100%; }
.nx-app .nx-bfd:has(.nx-insp) > section[role="tabpanel"]:not([hidden]) { height: 100%; }

/* The section's vertical padding is moved onto the inner children. Left on .nx-insp it would shrink
   every height:100% below it, and the scroll would stop that many pixels short of hiding the strip. */
.nx-insp:has(.nx-insp-grid-wrap) { height: 100%; padding-top: 0; padding-bottom: 0; display: flex; flex-direction: column; }
.nx-insp:has(.nx-insp-grid-wrap) .nx-panel__alert { flex-shrink: 0; margin-top: var(--sp-4); }
/* The blocks that make up the scroll region. The layout below them refuses to shrink, so the flex
   column is permanently in negative free space and would otherwise squash these instead. */
.nx-insp:has(.nx-insp-grid-wrap) > .nx-insp-next,
.nx-insp:has(.nx-insp-grid-wrap) > .nx-insp-summary,
.nx-insp:has(.nx-insp-grid-wrap) > .nx-insp-summary__note,
.nx-insp:has(.nx-insp-grid-wrap) > .nx-insp-status-guide,
.nx-insp:has(.nx-insp-grid-wrap) > .nx-insp-view-only,
.nx-insp:has(.nx-insp-grid-wrap) > .nx-insp__error { flex-shrink: 0; }
/* Pinned to the full height of the tab and refusing to shrink, so the blocks above it become
   overflow rather than stealing from it. See the scroll model note above. */
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp__layout,
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp__layout--nostepper { height: 100%; flex-shrink: 0; min-height: 0; display: flex; flex-direction: column; }
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp__stepper { flex-shrink: 0; margin-top: var(--sp-4); }
/* Takes the height left over after the level strip. This is the inverse of the earlier approach,
   which pinned the column to the full layout height and let the strip be the overflow. Flexing here
   keeps the strip on screen at full scroll (the requirement) and hands the column every pixel below
   it, which is where the grid's height now comes from - no min-height floor is needed, and none may
   be used, because a floor would let the column outgrow its parent and unbound the page scroll. */
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp__main { flex: 1 1 auto; min-height: 0; min-width: 0; padding-bottom: var(--sp-4); display: flex; flex-direction: column; }
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp__layout--nostepper .nx-insp__main { padding-top: var(--sp-4); }
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp__clearwrap { flex-shrink: 0; }
/* The search/filter row is a fixed cost above the grid; without this it is squashed before the
   grid gives up any height. */
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp-tools { flex-shrink: 0; }
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp-grid-wrap { flex: 1 1 auto; min-height: 0; }
.nx-insp:has(.nx-insp-grid-wrap) .nx-insp-grid__pager { flex-shrink: 0; }

.nx-insp__main { min-width: 0; position: relative; }
.nx-insp__name { margin-bottom: var(--sp-3); color: var(--text-secondary); font-size: 14px; }
.nx-insp__clearwrap { margin-bottom: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-3); }
.nx-insp__filter-ind { font-size: 12px; color: var(--brand-600); font-weight: 600; }
.nx-insp__clear { border: 1px solid var(--border-default); background: #fff; color: var(--text-tertiary); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.nx-insp__clear:hover { background: var(--brand-50); color: var(--brand-600); }
.nx-insp__alert-close { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; float: right; color: inherit; }
.nx-insp__error {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--status-red, #D13438); border-radius: 10px;
  background: var(--status-red-bg, #FDE7E9);
}
.nx-insp__error strong, .nx-insp__error span { display: block; }
.nx-insp__error span { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
.nx-insp-next {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--brand-500); border-radius: 10px; background: var(--brand-50);
}
.nx-insp-next__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-600); color: #fff;
}
.nx-insp-next__icon svg { width: 17px; height: 17px; }
.nx-insp-next__copy strong, .nx-insp-next__copy span { display: block; }
.nx-insp-next__copy span { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
.nx-insp-summary {
  display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.nx-insp-summary__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 66px; padding: 10px 12px; border: 1px solid var(--border-default);
  border-radius: 10px; background: var(--bg-elevated); color: var(--text-primary);
  cursor: pointer; text-align: left;
}
.nx-insp-summary__card:hover, .nx-insp-summary__card--active {
  border-color: var(--brand-500); background: var(--brand-50);
}
.nx-insp-summary__card:focus-visible,
.nx-insp__clear:focus-visible,
.nx-insp-grid__steplink:focus-visible,
.nx-insp-caret:focus-visible,
.nx-combo__control:focus-visible,
.nx-combo__option:focus-visible,
.nx-insp-btn:focus-visible {
  outline: 2px solid var(--brand-600); outline-offset: 2px;
}
.nx-insp-summary__card strong { font-size: 21px; line-height: 1; }
.nx-insp-summary__card span { color: var(--text-secondary); font-size: 12px; }
.nx-insp-summary__note { margin: -4px 0 var(--sp-2); color: var(--text-tertiary); font-size: 11px; }
.nx-insp > .nx-insp-next,
.nx-insp > .nx-insp-summary,
.nx-insp > .nx-insp-summary__note,
.nx-insp > .nx-insp-status-guide,
.nx-insp > .nx-insp-view-only { flex-shrink: 0; }
.nx-insp-status-guide {
  margin-bottom: var(--sp-2); padding: 7px 10px;
  border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-elevated);
  color: var(--text-secondary); font-size: 12px;
}
.nx-insp-status-guide summary { cursor: pointer; font-weight: 600; color: var(--brand-700); }
.nx-insp-status-guide dl { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 7px 14px; margin: 9px 0 2px; }
.nx-insp-status-guide dl div { min-width: 0; }
.nx-insp-status-guide dt { font-weight: 700; color: var(--text-primary); }
.nx-insp-status-guide dd { margin: 1px 0 0; color: var(--text-tertiary); line-height: 1.35; }
.nx-insp-view-only {
  margin-bottom: var(--sp-2); padding: 7px 10px; border-left: 3px solid var(--brand-500);
  border-radius: 6px; background: var(--brand-50); color: var(--text-secondary); font-size: 12px;
}
.nx-insp-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--border-default); border-radius: 8px; background: var(--gray-50, #F8FAFC);
}
.nx-insp-tools__search { position: relative; flex: 1 1 280px; }
.nx-insp-tools__search svg {
  position: absolute; left: 10px; top: 50%; width: 15px; height: 15px;
  color: var(--text-tertiary); transform: translateY(-50%); pointer-events: none;
}
.nx-insp-tools__search input, .nx-insp-tools select {
  min-height: 34px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: #fff; color: var(--text-primary); font-size: 12px;
}
.nx-insp-tools__search input { width: 100%; padding: 6px 10px 6px 32px; }
.nx-insp-tools select { min-width: 145px; padding: 6px 28px 6px 9px; }
.nx-insp-tools__count { margin-left: auto; color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }

/* Equipment inspection is task-first: keep guidance available while moving the working grid above the fold. */
.nx-insp--equipment { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.nx-insp--equipment .nx-insp-next {
  min-height: 50px; margin-bottom: var(--sp-2); padding: 7px 12px;
}
.nx-insp--equipment .nx-insp-next__icon { width: 28px; height: 28px; }
.nx-insp--equipment .nx-insp-next__icon svg { width: 14px; height: 14px; }
.nx-insp--equipment .nx-insp-summary--compact {
  grid-template-columns: repeat(7, minmax(90px, 1fr)); gap: 6px;
  margin-bottom: var(--sp-2);
}
.nx-insp--equipment .nx-insp-summary--compact .nx-insp-summary__card {
  flex-direction: row; align-items: center; gap: 6px;
  min-height: 38px; padding: 6px 9px; border-radius: 7px;
}
.nx-insp--equipment .nx-insp-summary--compact .nx-insp-summary__card strong {
  font-size: 17px;
}
.nx-insp--equipment .nx-insp-summary--compact .nx-insp-summary__card span {
  white-space: nowrap;
}
.nx-insp--equipment .nx-insp__layout { gap: var(--sp-2); }
.nx-insp--equipment .nx-insp__stepper--compact { padding: 6px; }
.nx-insp--equipment .nx-insp__stepper--compact .nx-lvl-cards { gap: 6px; }
.nx-insp--equipment .nx-insp__stepper--compact .nx-lvl-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  min-height: 52px; padding: 5px 8px;
}
.nx-insp--equipment .nx-insp__stepper--compact .nx-lvl-card__head { grid-column: 1 / -1; }
.nx-insp--equipment .nx-insp__stepper--compact .nx-lvl-card__status {
  grid-column: 1; margin-top: 2px;
}
.nx-insp--equipment .nx-insp__stepper--compact .nx-lvl-card__detail {
  grid-column: 1 / -1; margin: 2px 0 0; white-space: nowrap; text-align: left;
}
.nx-insp--equipment .nx-insp__stepper--compact .nx-lvl-card__steps,
.nx-insp--equipment .nx-insp__stepper--compact .nx-lvl-card__date { display: none; }
.nx-insp--equipment .nx-insp-tools {
  flex-wrap: nowrap; min-height: 46px;
  margin-bottom: var(--sp-2); padding: 6px 8px;
}
.nx-insp--equipment .nx-insp-tools__search {
  flex: 0 1 500px; width: min(500px, 100%);
}

/* ---- Level filter cards (horizontal) ---- */
.nx-lvl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.nx-lvl-card { position: relative; border: 1px solid var(--border-default); border-left: 3px solid var(--lvl-accent, var(--border-strong));
    border-radius: 8px; background: var(--bg-elevated); padding: 7px 10px; cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s, transform .1s; outline: none; }
.nx-lvl-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
.nx-lvl-card:focus-visible { box-shadow: 0 0 0 3px rgba(0,120,212,.25); }
.nx-lvl-card--active { border-color: var(--lvl-accent, var(--brand-600)); box-shadow: 0 0 0 2px var(--lvl-accent, var(--brand-600)) inset, 0 2px 8px rgba(0,0,0,.08); }
.nx-app--dark .nx-lvl-card { background: #1A1A1A; border-color: var(--border-default); border-left-color: var(--lvl-accent, var(--border-strong)); }
.nx-app--dark .nx-lvl-card:hover { background: #1C2940; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.nx-app--dark .nx-lvl-card--active { background: #243049; border-color: var(--lvl-accent, var(--brand-600)); }
.nx-lvl-card__head { display: flex; align-items: center; gap: 6px; }
.nx-lvl-card__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lvl-accent, var(--border-strong)); flex-shrink: 0; }
.nx-lvl-card__label { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.nx-lvl-card__pct { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.nx-lvl-card__pct--low { color: #A4262C; background: #FDE7E9; }
.nx-lvl-card__pct--medium { color: #8A5700; background: #FFF4CE; }
.nx-lvl-card__pct--high { color: #107C10; background: #DFF6DD; }
.nx-app--dark .nx-lvl-card__pct--low { color: #FFB3B8; background: #4A1D22; }
.nx-app--dark .nx-lvl-card__pct--medium { color: #FFD580; background: #493817; }
.nx-app--dark .nx-lvl-card__pct--high { color: #8EE58E; background: #173D20; }
.nx-lvl-card__status { display: flex; align-items: center; gap: 5px; font-size: 11px; margin-top: 4px; color: var(--text-tertiary); font-weight: 600; }
.nx-lvl-card__glyph { width: 13px; height: 13px; display: inline-flex; flex-shrink: 0; }
.nx-lvl-card__glyph svg { width: 13px; height: 13px; }
.nx-lvl-card__status--done { color: var(--accent-open-issues, #10B981); }
.nx-app--dark .nx-lvl-card__status--done { color: #6ccb5f; }
.nx-lvl-card__status--current { color: var(--warning-700); }
.nx-app--dark .nx-lvl-card__status--current { color: var(--warning-50); }
.nx-lvl-card__steps { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.nx-lvl-card__bar { height: 4px; border-radius: 999px; background: var(--border-subtle); margin-top: 6px; overflow: hidden; }
.nx-lvl-card__bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .25s ease; }
.nx-lvl-card__bar-fill--low { background: #A4262C; }
.nx-lvl-card__bar-fill--medium { background: #D97706; }
.nx-lvl-card__bar-fill--high { background: #107C10; }
.nx-app--dark .nx-lvl-card__bar { background: #333; }
.nx-app--dark .nx-lvl-card__bar-fill--low { background: #E4717A; }
.nx-app--dark .nx-lvl-card__bar-fill--medium { background: #E0A030; }
.nx-app--dark .nx-lvl-card__bar-fill--high { background: #4CAF50; }
.nx-lvl-card__date { font-size: 11px; color: var(--text-secondary); margin-top: 2px; font-weight: 600; }
.nx-lvl-card__detail { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.nx-lvl-card__detail b { font-weight: 600; }

/* ---- Step grid (table) ---- */
.nx-insp-grid-wrap { border: 1px solid var(--border-default); border-radius: 8px; overflow: auto; background: #fff; position: relative; }
/* The wrap is a focusable scroll region (tabindex=0) so it can be scrolled with the arrow keys,
   which matters most in the empty, loading and error states where it holds no focusable child.
   Pull the ring inside the border so it follows the rounded corners instead of floating outside. */
.nx-app .nx-insp-grid-wrap:focus-visible { outline-offset: -2px; }
.nx-insp-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
/* 10px gutters rather than 12px: with seven columns this returns ~28px to the table, which is the
   difference between Scheduled Date fitting and sliding under the sticky Action cell. */
.nx-insp-grid thead th { text-align: left; background: #faf9f8; color: var(--text-secondary); font-weight: 600; padding: 10px 10px; border-bottom: 1px solid var(--border-default); white-space: nowrap; position: sticky; top: 0; z-index: 3; }
.nx-insp-grid tbody td { padding: 10px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
.nx-insp-grid__row { cursor: default; }
.nx-insp-grid__row:hover { background: var(--brand-50); }
.nx-insp-grid__row--expanded { background: var(--brand-50); }
.nx-insp-grid__empty { text-align: center; color: var(--text-tertiary); padding: var(--sp-6) !important; }
.nx-insp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Empty / error states ----
   Loading, "nothing configured" and "the load failed" are three different situations and must not
   look alike. Neutral for the empty variants, an amber rail plus a Retry for the error ones. */
.nx-insp-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-4) var(--sp-3); }
.nx-insp-state__icon { color: #B45309; line-height: 1; margin-bottom: 2px; }
.nx-insp-state__icon svg { width: 22px; height: 22px; }
.nx-insp-state__title { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.nx-insp-state__text { font-size: 12px; color: var(--text-tertiary); max-width: 420px; line-height: 1.5; }
.nx-insp-state__action { margin-top: 8px; }
.nx-insp-state--error {
  border-left: 3px solid #D97706; background: #FFFBEB;
  border-radius: 8px; margin: var(--sp-2) auto; max-width: 520px;
}
.nx-insp-state--error .nx-insp-state__title { color: #92400E; }
.nx-insp-state--error .nx-insp-state__text { color: #B45309; }

/* Reload failed while rows were already displayed. Warn above the grid and keep the stale rows. */
.nx-insp__refresh-error {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  border: 1px solid #FDE68A; border-left: 3px solid #D97706; background: #FFFBEB;
  border-radius: 8px; padding: 8px 12px; margin-bottom: var(--sp-2);
  font-size: 12px; font-weight: 600; color: #92400E;
}
.nx-app--dark .nx-insp-state__title { color: #F7F7F7; }
.nx-app--dark .nx-insp-state__text { color: #ADADAD; }
.nx-app--dark .nx-insp-state--error { background: #2A2113; border-left-color: #D97706; }
.nx-app--dark .nx-insp-state--error .nx-insp-state__title { color: #FCD34D; }
.nx-app--dark .nx-insp-state--error .nx-insp-state__text { color: #E3B341; }
.nx-app--dark .nx-insp__refresh-error { background: #2A2113; border-color: #4A3A17; border-left-color: #D97706; color: #FCD34D; }
.nx-insp-grid__action-col, .nx-insp-grid__action { text-align: center; white-space: nowrap; position: sticky; right: 0; box-shadow: none; }
/* Reclaim width for the Start & Finish column by tightening the gutters rather than setting a hard
   width: the cell holds text buttons (Continue / Start) plus the save-state line, and a fixed width
   would wrap them. */
.nx-insp-grid thead th.nx-insp-grid__action-col, .nx-insp-grid tbody td.nx-insp-grid__action { padding-left: 8px; padding-right: 8px; }
.nx-insp-grid__action-col { z-index: 4; }
.nx-insp-grid__action { background: #fff; z-index: 2; }
.nx-insp-save { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 700; }
.nx-insp-save--saving { color: var(--text-tertiary); }
.nx-insp-save--saved { color: #107C10; }
.nx-insp-save--failed { color: #A4262C; white-space: normal; }
.nx-insp-grid__row:hover .nx-insp-grid__action, .nx-insp-grid__row--expanded .nx-insp-grid__action { background: var(--brand-50); }
.nx-insp-status { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #f0f0f0; color: var(--text-secondary); font-size: 12px; }
.nx-insp-grid__steplink { border: 0; background: transparent; color: var(--brand-600); font-weight: 600; cursor: pointer; padding: 0; font-size: 13px; text-align: left; }
.nx-insp-grid__steplink:hover { text-decoration: underline; }
/* Auto table layout means every column's minimum is content-driven, so an uncapped column sets the
   table's width and the whole grid scrolls sideways. Test Script had no cap at all, so a long script
   name alone could push Scheduled Date and Start & Finish underneath the sticky Action cell.
   overflow-wrap lets the minimum fall below the longest word, which a bare max-width cannot do. */
.nx-insp-grid__script { max-width: 160px; white-space: normal; overflow-wrap: anywhere; }
.nx-insp-grid__step { min-width: 210px; }
.nx-insp-grid__stepid { white-space: nowrap; }
.nx-insp-grid__step .nx-insp-grid__stepid { display: block; margin-bottom: 3px; color: var(--text-tertiary); font-size: 11px; font-weight: 700; }
.nx-insp-grid__description {
  display: block; max-width: 300px; margin-top: 3px;
  color: var(--text-tertiary); font-size: 11px; line-height: 1.35;
}
/* ---- Start & Finish (stacked pair) ----
   Deliberately one column rather than two: both values carry a time, so two columns would roughly
   double the width and push the grid into horizontal scrolling. The label is a fixed-width flex
   item so the two dates align on a common left edge and read as a column, not as ragged text.
   The value stays nowrap (a date broken across lines is unreadable), so this column's width is a
   hard floor - it is the one column that cannot give any width back. */
.nx-insp-grid__dates { font-size: 11px; line-height: 1.4; }
.nx-insp-dates__line { display: flex; align-items: baseline; gap: 5px; }
.nx-insp-dates__lbl {
  flex: 0 0 30px; color: var(--text-tertiary);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.nx-insp-dates__val { color: var(--text-primary); white-space: nowrap; }
.nx-insp-grid__caret-col { width: 30px; }
.nx-insp-caret { border: 0; background: transparent; cursor: pointer; color: var(--text-tertiary); display: inline-flex; padding: 2px; transition: transform .15s; }
.nx-insp-caret svg { width: 14px; height: 14px; }
.nx-insp-caret--open { transform: rotate(90deg); color: var(--brand-600); }

/* Status badges */
.nx-insp-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.nx-insp-badge__glyph { width: 12px; height: 12px; display: inline-flex; flex-shrink: 0; }
.nx-insp-badge__glyph svg { width: 12px; height: 12px; }
.nx-insp-badge--passed { background: #D1FAE5; color: #065F46; }
.nx-insp-badge--progress { background: #FEF3C7; color: #92400E; }
.nx-insp-badge--notstarted { background: #F1F5F9; color: #475569; }
.nx-insp-badge--skipped { background: #E5E7EB; color: #4B5563; }
.nx-insp-badge--rejected { background: #FEE2E2; color: #991B1B; }
.nx-insp-badge--attn { background: #FEF3C7; color: #92400E; box-shadow: inset 0 0 0 1px #D97706; }
.nx-insp-badge--scheduled { background: #DBEAFE; color: #1E40AF; }

/* Inline Skip radios */
.nx-insp-grid__skip { white-space: nowrap; }
.nx-insp-skip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; margin-right: 8px; color: var(--text-secondary); }
.nx-insp-skip input:disabled + span { opacity: .5; }

/* Inline Schedule Date */
.nx-insp-date { border: 1px solid var(--border-strong); border-radius: 6px; padding: 4px 8px; font-size: 12px; background: #fff; color: var(--text-primary); }
/* Scheduled date: an outstanding step whose planned start has passed is called out in red so it is
   not mistaken for a normal future date. */
.nx-insp-date--overdue { border-color: #a4262c; color: #a4262c; }
.nx-insp-sched--overdue { color: #a4262c; font-weight: 600; }
.nx-insp-sched__msg { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; }
.nx-insp-sched__msg--overdue { color: #a4262c; font-weight: 600; }
.nx-insp-sched__msg--error { color: #a4262c; font-weight: 500; }
.nx-app--dark .nx-insp-date--overdue { border-color: #f87171; color: #f87171; }
.nx-app--dark .nx-insp-sched--overdue,
.nx-app--dark .nx-insp-sched__msg--overdue,
.nx-app--dark .nx-insp-sched__msg--error { color: #f87171; }
.nx-insp-date:focus { border-color: var(--brand-600); outline: none; box-shadow: 0 0 0 3px rgba(0,120,212,.12); }

/* Inline Test Script combo */
.nx-combo { position: relative; min-width: 150px; }
.nx-combo__control { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; padding: 5px 9px; background: #fff; cursor: pointer; font-size: 12px; color: var(--text-primary); }
.nx-combo__control:hover { border-color: var(--brand-600); }
.nx-combo__value { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-combo__chevron { width: 12px; height: 12px; color: var(--text-tertiary); flex-shrink: 0; }
.nx-combo__backdrop { position: fixed; inset: 0; z-index: 40; }
.nx-combo__dropdown { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 220px; max-width: 320px; background: #fff; border: 1px solid var(--border-default); border-radius: 8px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.14)); overflow: hidden; display: flex; flex-direction: column; }
.nx-combo__search { width: 100%; border: 0; border-bottom: 1px solid var(--border-subtle); padding: 8px 10px; font-size: 12px; outline: none; flex: 0 0 auto; }
/* min-height:0 lets the list shrink inside the max-height JS applies when the menu is pinned to
   the viewport; without it the bottom options would be clipped and unreachable. */
.nx-combo__list { flex: 1 1 auto; min-height: 0; max-height: 220px; overflow-y: auto; }
.nx-combo__option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; background: transparent; text-align: left; font-size: 12px; cursor: pointer; color: var(--text-primary); }
.nx-combo__option:hover, .nx-combo__option--active { background: var(--brand-50); }
.nx-combo__option--selected { color: var(--brand-700); font-weight: 600; }
.nx-combo__check { width: 14px; height: 14px; color: var(--brand-600); flex-shrink: 0; }
.nx-combo__empty { padding: 10px; font-size: 12px; color: var(--text-tertiary); text-align: center; }

/* Expandable history row */
.nx-insp-hist-row > td { background: #FAFBFC; padding: 0 !important; }
.nx-insp-hist { padding: 14px 18px; border-top: 2px solid var(--brand-500); }
.nx-insp-hist__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 20px; font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.nx-insp-hist__lbl { font-weight: 700; color: var(--text-tertiary); }
.nx-insp-hist__title { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: none; letter-spacing: normal; margin-bottom: 8px; }
.nx-insp-hist__empty { font-size: 12px; color: var(--text-tertiary); font-style: italic; }
.nx-insp-exec { border: 1px solid var(--border-default); border-radius: 8px; background: #fff; padding: 10px 12px; margin-bottom: 8px; }
.nx-insp-exec__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.nx-insp-exec__name { border: 0; background: transparent; color: var(--brand-600); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; text-align: left; }
.nx-insp-exec__name:hover { text-decoration: underline; }
.nx-insp-exec__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 20px; font-size: 12px; color: var(--text-secondary); }

/* Test history. Each execution is a card with a coloured status rail so the outcome reads at a
   glance; Rejected and Passed with Issues get a stronger tint because they may need follow-up. */
.nx-insp-exec__summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 11px; color: var(--text-tertiary); }
.nx-insp-exec__count { font-weight: 700; color: var(--text-secondary); }
.nx-insp-exec__attn-count { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #991B1B; background: #FEE2E2; border-radius: 999px; padding: 2px 8px; }
.nx-insp-exec__attn-count svg { width: 12px; height: 12px; }
.nx-insp-exec__latest { margin-left: auto; font-style: italic; }
.nx-insp-exec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nx-insp-exec-list .nx-insp-exec { margin-bottom: 0; border-left: 4px solid var(--border-default); }
.nx-insp-exec--passed { border-left-color: #10B981; }
.nx-insp-exec--rejected { border-left-color: #DC2626; }
.nx-insp-exec--attn { border-left-color: #D97706; background: #FFFBEB; }
.nx-insp-exec--rejected.nx-insp-exec--attn, .nx-insp-exec.nx-insp-exec--attn.nx-insp-exec--rejected { background: #FEF2F2; border-left-color: #DC2626; }
.nx-insp-exec--progress { border-left-color: #F59E0B; }
.nx-insp-exec--skipped { border-left-color: #9CA3AF; }
/* Header is a 3-column grid rather than a flex row: the equal side tracks put the test name at the
   exact centre of the card, so it starts at the same x on every row whether or not a Latest tag is
   present. The old space-between flex let the badge width push the name around. */
.nx-insp-exec__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.nx-insp-exec__head > .nx-insp-badge { justify-self: start; }
.nx-insp-exec__head > .nx-insp-exec__name { justify-self: center; text-align: center; }
.nx-insp-exec__head > .nx-insp-exec__tag { justify-self: start; }
/* Open test keeps its place against the right edge of the card, but is pulled out of the header
   line so it sits at the card's vertical centre instead of level with the status badge. The card
   reserves the gutter so the Completed column never runs underneath it. */
.nx-insp-exec-list .nx-insp-exec { position: relative; padding-right: 92px; }
.nx-insp-exec__open { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.nx-insp-exec__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-600); background: #EFF6FF; border-radius: 999px; padding: 2px 7px; }
.nx-insp-exec__open { border: 0; background: transparent; color: var(--brand-600); border-radius: 4px; padding: 0; font-size: 12px; font-weight: 600; cursor: pointer; }
.nx-insp-exec__open:hover { background: transparent; color: var(--brand-700, #0c3b5e); text-decoration: underline; }
.nx-insp-exec__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; margin: 0; }
.nx-insp-exec__grid dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin: 0 0 1px; }
.nx-insp-exec__grid dd { margin: 0; font-size: 12px; color: var(--text-primary); word-break: break-word; }
.nx-insp-exec__rev { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: #F1F5F9; border-radius: 4px; padding: 1px 5px; }
.nx-insp-exec__note { margin-top: 8px; padding: 7px 9px; border-radius: 6px; background: #F8FAFC; font-size: 12px; color: var(--text-secondary); }
.nx-insp-exec__note--attn { background: #FEF2F2; color: #7F1D1D; }
.nx-insp-exec__note-lbl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.nx-insp-exec__more { margin-top: 10px; border: 1px solid var(--border-strong); background: #fff; color: var(--brand-600); border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.nx-insp-exec__more:hover { background: #f5f5f5; }

/* ---- Buttons ---- */
.nx-app .nx-insp-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); background: #fff; color: var(--text-secondary); border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.nx-app .nx-insp-btn svg { width: 14px; height: 14px; }
.nx-app .nx-insp-btn:hover:not(:disabled) { background: #f5f5f5; }
.nx-app .nx-insp-btn:disabled { opacity: .5; cursor: not-allowed; }
.nx-app .nx-insp-btn--accent { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); border-color: transparent; color: #fff; }
.nx-app .nx-insp-btn--accent:hover:not(:disabled) { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); }
.nx-app .nx-insp-btn--continue { background: var(--warning-700); border-color: var(--warning-700); color: #fff; }
.nx-app .nx-insp-btn--continue:hover:not(:disabled) {
  background: color-mix(in srgb, var(--warning-700) 85%, #000);
  border-color: color-mix(in srgb, var(--warning-700) 85%, #000);
}

/* Blocked Start: aria-disabled rather than disabled, so it still receives clicks and can open the
   explanation. The reason itself lives behind an info icon to keep the row height unchanged. */
.nx-app .nx-insp-btn--blocked { opacity: .55; cursor: not-allowed; }
.nx-app .nx-insp-btn--blocked:hover { background: #fff; }
.nx-app .nx-insp-blocked { position: relative; display: inline-flex; align-items: center; gap: 4px; }
/* The action column is sticky with a z-index, so each cell is its own stacking context and a later
   row would paint over an open popover. Lift the owning cell above its siblings while it is open. */
.nx-app .nx-insp-grid__action--why { z-index: 5; }
.nx-app .nx-insp-why__toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-tertiary); cursor: pointer; }
.nx-app .nx-insp-why__toggle svg { width: 16px; height: 16px; }
.nx-app .nx-insp-why__toggle:hover, .nx-app .nx-insp-why__toggle--open { background: #EFF6FC; color: var(--brand-600, #0f6cbd); }
.nx-app .nx-insp-why__toggle:focus-visible { outline: 2px solid var(--brand-600, #0f6cbd); outline-offset: 1px; }
.nx-app .nx-insp-why__backdrop { position: fixed; inset: 0; z-index: 40; }
.nx-app .nx-insp-why__pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; width: 236px; padding: 8px 10px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.16); text-align: left; white-space: normal; }
.nx-app .nx-insp-why__head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.nx-app .nx-insp-why__close { margin-left: auto; display: inline-flex; padding: 2px; border: 0; border-radius: 4px; background: none; color: var(--text-tertiary); cursor: pointer; }
.nx-app .nx-insp-why__close svg { width: 13px; height: 13px; }
.nx-app .nx-insp-why__close:hover { background: #f0f0f0; color: var(--text-primary); }
.nx-app .nx-insp-why__body { margin: 5px 0 0; padding: 0 0 0 16px; font-size: 12px; line-height: 1.45; color: var(--text-primary); font-weight: 400; }
.nx-app .nx-insp-why__body li { margin-top: 3px; }
.nx-app .nx-insp-why__body li:first-child { margin-top: 0; }
.nx-app .nx-insp-why__body li::marker { color: var(--text-tertiary); }
.nx-app .nx-insp-why__link { border: 0; background: none; padding: 0; margin: 0 1px; font: inherit; font-weight: 700; color: var(--brand-600, #0f6cbd); text-decoration: underline; cursor: pointer; }
.nx-app .nx-insp-why__link:hover { color: #0c3b5e; }
.nx-app .nx-insp-why__link:focus-visible { outline: 2px solid var(--brand-600, #0f6cbd); outline-offset: 2px; border-radius: 2px; }
.nx-app .nx-insp-grid__row--flash > td { animation: nx-insp-flash 1.6s ease-out 1; }
@keyframes nx-insp-flash {
    0%, 40% { background: #FFF4CE; }
    100% { background: transparent; }
}
.nx-app--dark .nx-insp-btn--blocked:hover { background: #1A1A1A; }
.nx-app--dark .nx-insp-why__toggle:hover, .nx-app--dark .nx-insp-why__toggle--open { background: #243049; color: #6FB6FF; }
.nx-app--dark .nx-insp-why__pop { background: #1A1A1A; border-color: #3D3D3D; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.nx-app--dark .nx-insp-why__close:hover { background: #2A2A2A; }
.nx-app--dark .nx-insp-why__link { color: #6FB6FF; }
.nx-app--dark .nx-insp-why__link:hover { color: #9CCDFF; }
.nx-app--dark .nx-insp-grid__row--flash > td { animation-name: nx-insp-flash-dark; }
@keyframes nx-insp-flash-dark {
    0%, 40% { background: #493817; }
    100% { background: transparent; }
}
.nx-panel__spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: nx-spin .6s linear infinite; }

/* ---- Step grid dark mode ---- */
.nx-app--dark .nx-insp-grid-wrap { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-insp-grid thead th { background: #1A1A1A; color: #ADADAD; border-bottom-color: #3D3D3D; }
.nx-app--dark .nx-insp-grid tbody td { color: #F7F7F7; border-bottom-color: #3D3D3D; }
.nx-app--dark .nx-insp-grid__row:hover { background: #1A1A1A; }
.nx-app--dark .nx-insp-grid__row--expanded { background: #1A1A1A; }
.nx-app--dark .nx-insp-grid__empty { color: #ADADAD; }
.nx-app--dark .nx-insp-grid__action-col, .nx-app--dark .nx-insp-grid__action { box-shadow: none; }
.nx-app--dark .nx-insp-grid__action { background: #1A1A1A; }
.nx-app--dark .nx-insp-grid__row:hover .nx-insp-grid__action, .nx-app--dark .nx-insp-grid__row--expanded .nx-insp-grid__action { background: #1A1A1A; }
.nx-app--dark .nx-insp-status { background: #1A1A1A; color: #ADADAD; }
.nx-app--dark .nx-insp-grid__steplink { color: #479ef5; }
.nx-app--dark .nx-insp-dates__lbl { color: #ADADAD; }
.nx-app--dark .nx-insp-dates__val { color: #F7F7F7; }
.nx-app--dark .nx-insp-caret { color: #ADADAD; }
.nx-app--dark .nx-insp-caret--open { color: #479ef5; }
.nx-app--dark .nx-insp-skip { color: #b6c2d4; }
.nx-app--dark .nx-insp-date { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .nx-insp-date:focus { border-color: #479ef5; box-shadow: 0 0 0 3px rgba(71,158,245,.18); }
.nx-app--dark .nx-combo__control { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .nx-combo__control:hover { border-color: #479ef5; }
.nx-app--dark .nx-combo__chevron { color: #ADADAD; }
.nx-app--dark .nx-combo__dropdown { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-combo__search { background: #1A1A1A; color: #F7F7F7; border-bottom-color: #3D3D3D; }
.nx-app--dark .nx-combo__option { color: #F7F7F7; }
.nx-app--dark .nx-combo__option:hover, .nx-app--dark .nx-combo__option--active { background: #243049; }
.nx-app--dark .nx-combo__option--selected { color: #479ef5; }
.nx-app--dark .nx-combo__empty { color: #ADADAD; }
.nx-app--dark .nx-insp-hist-row > td { background: #0b1220; }
.nx-app--dark .nx-insp-hist__meta { color: #b6c2d4; }
.nx-app--dark .nx-insp-hist__lbl { color: #ADADAD; }
.nx-app--dark .nx-insp-hist__title { color: #b6c2d4; }
.nx-app--dark .nx-insp-hist__empty { color: #ADADAD; }
.nx-app--dark .nx-insp-exec { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-insp-exec__name { color: #479ef5; }
.nx-app--dark .nx-insp-exec__details { color: #b6c2d4; }
.nx-app--dark .nx-insp-exec__summary { color: #ADADAD; }
.nx-app--dark .nx-insp-exec__count { color: #D6D6D6; }
.nx-app--dark .nx-insp-exec__attn-count { background: #3f1d1d; color: #fca5a5; }
.nx-app--dark .nx-insp-exec-list .nx-insp-exec { border-left-color: #3D3D3D; }
.nx-app--dark .nx-insp-exec--attn { background: #2a2313; }
.nx-app--dark .nx-insp-exec--rejected.nx-insp-exec--attn { background: #2b1616; }
.nx-app--dark .nx-insp-exec__tag { background: #16283f; color: #479ef5; }
.nx-app--dark .nx-insp-exec__open { background: transparent; border: 0; color: #479ef5; }
.nx-app--dark .nx-insp-exec__open:hover { background: transparent; color: #8ac2fa; }
.nx-app--dark .nx-insp-exec__grid dt { color: #ADADAD; }
.nx-app--dark .nx-insp-exec__grid dd { color: #F7F7F7; }
.nx-app--dark .nx-insp-exec__rev { background: #2A2A2A; color: #D6D6D6; }
.nx-app--dark .nx-insp-exec__note { background: #242424; color: #b6c2d4; }
.nx-app--dark .nx-insp-exec__note--attn { background: #2b1616; color: #fca5a5; }
.nx-app--dark .nx-insp-exec__more { background: #1A1A1A; border-color: #3D3D3D; color: #479ef5; }
.nx-app--dark .nx-insp-exec__more:hover { background: #242424; }
.nx-app--dark .nx-insp-badge--attn { background: #2a2313; color: #fbbf24; box-shadow: inset 0 0 0 1px #b45309; }
.nx-app--dark .nx-insp-btn { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .nx-insp-btn:hover:not(:disabled) { background: #242424; }
.nx-app--dark .nx-insp__error { background: #3B1719; border-color: #F1707B; }
.nx-app--dark .nx-insp-next,
.nx-app--dark .nx-insp-summary__card--active,
.nx-app--dark .nx-insp-summary__card:hover { background: #172A3D; }
.nx-app--dark .nx-insp-summary__card { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }
.nx-app--dark .nx-insp-status-guide { background: #1A1A1A; border-color: #3D3D3D; }
.nx-app--dark .nx-insp-status-guide summary { color: #6FB6FF; }
.nx-app--dark .nx-insp-view-only { background: #172A3D; color: #D6E8FA; }
.nx-app--dark .nx-insp-save--saved { color: #8EE58E; }
.nx-app--dark .nx-insp-save--failed { color: #FFB3B8; }
.nx-app--dark .nx-insp-tools { background: #141414; border-color: #3D3D3D; }
.nx-app--dark .nx-insp-tools__search input,
.nx-app--dark .nx-insp-tools select { background: #1A1A1A; border-color: #3D3D3D; color: #F7F7F7; }

@media (max-width: 1050px) {
  .nx-insp-summary { grid-template-columns: repeat(3, 1fr); }
  .nx-insp--equipment .nx-insp-summary--compact {
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    overflow-x: auto;
  }
  .nx-insp--equipment .nx-insp-tools { flex-wrap: wrap; }
  .nx-insp-status-guide dl { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .nx-insp-grid__step { min-width: 190px; }
  .nx-insp-grid__script { max-width: 120px; }
  .nx-insp-grid__description { max-width: 240px; }
  .nx-insp-grid__action { min-width: 118px; }
  .nx-insp-btn, .nx-combo__control, .nx-insp-date { min-height: 40px; }
}
@media (max-width: 680px) {
  .nx-insp { padding: var(--sp-3); }
  .nx-insp-next { grid-template-columns: auto 1fr; }
  .nx-insp-next > .nx-insp-btn { grid-column: 1 / -1; justify-content: center; }
  .nx-insp-summary { grid-template-columns: repeat(2, 1fr); }
  .nx-insp--equipment .nx-insp-summary--compact {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .nx-insp-tools { align-items: stretch; }
  .nx-insp--equipment .nx-insp-tools__search { flex-basis: 100%; width: 100%; }
  .nx-insp-tools select, .nx-insp-tools .nx-insp__clear { width: 100%; }
  .nx-insp-tools__count { width: 100%; margin-left: 0; }
  .nx-insp__error { align-items: flex-start; flex-direction: column; }
  .nx-insp-status-guide dl { grid-template-columns: 1fr; }
}

@container eqdetail (max-width: 700px) {
  .nx-insp-next { grid-template-columns: auto minmax(0, 1fr); }
  .nx-insp-next > .nx-insp-btn { grid-column: 1 / -1; justify-content: center; }
  .nx-insp--equipment { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .nx-insp--equipment .nx-insp-summary--compact {
    grid-template-columns: repeat(7, minmax(104px, 1fr));
    overflow-x: auto;
    scrollbar-gutter: stable;
  }
  .nx-insp-status-guide dl { grid-template-columns: 1fr; }
}

/* ---- Slide-out panel (Step + Start Test) — premium mockup look ---- */
.nx-panel__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1199; animation: nx-panel-fade .25s ease; }
.nx-panel { position: fixed; top: 0; right: 0; height: 100vh; width: 500px; max-width: 94vw; background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,.16); display: flex; flex-direction: column; z-index: 1200; animation: nx-panel-in .3s cubic-bezier(.4,0,.2,1); }
@keyframes nx-panel-in { from { transform: translateX(40px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
@keyframes nx-panel-fade { from { opacity: 0; } to { opacity: 1; } }
.nx-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px;
  background: linear-gradient(135deg, #1e3a5f 0%, #0078D4 60%, #3FBDE8 100%); }
.nx-panel__head-titles { min-width: 0; }
.nx-panel__title { font-size: 16px; font-weight: 700; margin: 0; color: #fff; display: flex; align-items: center; gap: 9px; }
.nx-panel__title svg { flex-shrink: 0; }
.nx-panel__subtitle { font-size: 11px; color: rgba(255,255,255,.82); margin-top: 2px; }
.nx-panel__close { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.nx-panel__close:hover { background: rgba(255,255,255,.3); }
.nx-panel__body { flex: 1; overflow-y: auto; padding: 24px; }
.nx-panel__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--border-subtle); background: var(--bg-subtle, #FAFAFA); }
.nx-panel__field { margin-bottom: 16px; }
.nx-panel__label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; text-transform: none; letter-spacing: normal; }
.nx-panel__hint { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--text-tertiary); }
.nx-panel__input, .nx-panel__body .nec__input { width: 100%; border: 1.5px solid var(--border-strong); border-radius: 8px; padding: 10px 12px; font-size: 13px; background: #fff; color: var(--text-primary); font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.nx-panel__input:focus, .nx-panel__body .nec__input:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(0,120,212,.12); }
.nx-panel__input:disabled, .nx-panel__body .nec__input--readonly { background: #f5f5f5; color: var(--text-tertiary); }
.nx-panel__radios { display: flex; gap: var(--sp-4); }
.nx-panel__radio { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
/* Read-only context — grey rounded card (mockup) */
.nx-panel__context { background: var(--bg-subtle, #FAFAFA); border: 1px solid var(--border-default); border-radius: 10px; padding: 12px 14px; margin-bottom: 20px; font-size: 12px; line-height: 1.8; color: var(--text-secondary); }
.nx-panel__readonly { display: flex; flex-direction: column; gap: 6px; }
.nx-panel__ro { font-size: 12px; color: var(--text-primary); }
.nx-panel__ro .nx-panel__label { display: inline; font-weight: 700; color: var(--text-tertiary); text-transform: none; letter-spacing: normal; margin: 0; }
.nx-panel__divider { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--sp-4) 0; }
.nx-panel__history { font-size: 13px; color: var(--text-primary); display: flex; flex-direction: column; gap: 4px; }
.nx-panel__link { color: var(--brand-600); cursor: pointer; }
.nx-panel__link:hover { text-decoration: underline; }
.nx-panel__err { color: #a4262c; font-size: 12px; margin-top: 4px; }
.nx-panel__alert { border-radius: 6px; padding: 10px 12px; font-size: 13px; margin-bottom: var(--sp-3); }
.nx-panel__alert--info { background: #eff6fc; color: #115ea3; border: 1px solid #b4d6fa; }
.nx-panel__alert--error { background: #fde7e9; color: #a4262c; border: 1px solid #f3c6cb; }
.nx-req { color: #a4262c; }
.nx-app--dark .nx-ir-card__hdr span  { color:#F7F7F7; }

/* Test Scripts tab pills */
.nx-app--dark .nx-ts-pill            { background:#1A1A1A; border-color:#3D3D3D; color:#ADADAD; }
.nx-app--dark .nx-ts-pill:hover      { border-color:#479EF5; color:#60a5fa; }
.nx-app--dark .nx-ts-pill--active    { background:#1e3a5f; border-color:#3b82f6; color:#60a5fa; }
.nx-app--dark .nx-ts-grids           { background:transparent; }

/* Multi-select filter (Inspection Steps) */
.nx-app--dark .nx-mf-label           { color:#ADADAD; }
.nx-app--dark .nx-mf__trigger        { background:#1A1A1A; border-color:#3D3D3D; color:#F7F7F7; }
.nx-app--dark .nx-mf__trigger:hover,
.nx-app--dark .nx-mf__trigger--open,
.nx-app--dark .nx-mf--open .nx-mf__trigger { border-color:#479EF5; box-shadow:0 0 0 2px rgba(71,158,245,.2); }
.nx-app--dark .nx-mf__placeholder    { color:#666666; }
.nx-app--dark .nx-mf__chip           { background:#1e3a5f; color:#93c5fd; border-color:#2d4d7a; }
.nx-app--dark .nx-mf__chip-x         { color:#ADADAD; }
.nx-app--dark .nx-mf__chip-x:hover   { color:#f87171; background:rgba(239,68,68,.1); }
.nx-app--dark .nx-mf__caret          { color:#ADADAD; }
.nx-app--dark .nx-mf__panel          { background:#1A1A1A; border-color:#3D3D3D; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.nx-app--dark .nx-mf__search         { background:#141414; border-color:#3D3D3D; color:#F7F7F7; }
.nx-app--dark .nx-mf__search:focus   { border-color:#479EF5; box-shadow:0 0 0 2px rgba(71,158,245,.15); }
.nx-app--dark .nx-mf__item           { color:#F7F7F7; border-bottom-color:#3D3D3D; }
.nx-app--dark .nx-mf__item:hover     { background:rgba(71,158,245,.1); }
.nx-app--dark .nx-mf-backdrop        { background:rgba(0,0,0,.3); }

/* Building Areas — header, actions, empty, skeleton */
.nx-app--dark .nx-btree-header       { background:#1A1A1A; border-bottom-color:#3D3D3D; }
.nx-app--dark .nx-btree-header__icon { color:#479EF5; }
.nx-app--dark .nx-btree-header__title { color:#F7F7F7; }
.nx-app--dark .nx-btree-header__badge { background:#3D3D3D; color:#ADADAD; }
.nx-app--dark .nx-btree-action-btn   { background:transparent; border-color:#3D3D3D; color:#ADADAD; }
.nx-app--dark .nx-btree-action-btn:hover { background:rgba(71,158,245,.12); border-color:#479EF5; color:#60a5fa; }
.nx-app--dark .nx-btree-search__icon { color:#666666; }
.nx-app--dark .nx-btree-search__clear { color:#666666; }
.nx-app--dark .nx-btree-search__clear:hover { color:#F7F7F7; }
.nx-app--dark .nx-btree-empty        { color:#666666; }
.nx-app--dark .nx-btree-no-match     { color:#666666; }
.nx-app--dark .nx-btree-no-match strong { color:#ADADAD; }
.nx-app--dark .nx-btree-skeleton     { background:linear-gradient(90deg,#3D3D3D 25%,#3D3D3D 50%,#3D3D3D 75%); background-size:200% 100%; }

@media (min-width:1440px) { .nx-app .nx-btree-label { font-size:12.5px; } .nx-app .nx-btree-badge { font-size:10px; } }

/* ── Inspection Steps — both panels fit to screen height (v9.04) ── */
/* Chart panel: remove default padding so chart fills the card */
.nx-app .nx-dash-chart-panel--steps { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.nx-app .nx-dash-chart-panel--steps .nx-dash-panel-header--blue { flex-shrink: 0; }
/* Chart canvas wrapper fills remaining height */
.nx-app .nx-dash-chart-wrap--steps { height: calc(100vh - 280px); min-height: 200px; max-height: calc(100vh - 280px); }
.nx-app .nx-dash-chart-wrap--hbar  { position: relative; width: 100%; overflow: hidden; }
/* Equipment panel: flex-column, capped to same viewport height */
.nx-app .nx-dash-equip-scroll::-webkit-scrollbar { width:5px; }
.nx-app .nx-dash-equip-scroll::-webkit-scrollbar-thumb { background:#c7d2fe; border-radius:3px; }
.nx-app .nx-dash-panel-header--blue { background: linear-gradient(135deg,#1565c0,#1e88e5); border-radius:8px 8px 0 0; }
.nx-app .nx-dash-panel-title--white { color:#fff; }

/* Building Areas height — align-items:stretch so panel fills left-column height */
.nx-app .pd-layout { align-items: stretch; }
.nx-app .pd-layout > aside,
.nx-app .pd-layout > .nx-btree-panel { height: 100%; box-sizing: border-box; }
.nx-app .nx-btree-panel { height: 100%; }
/* The panel is overflow:hidden, so whenever height:100% resolves against a container that has no
   definite height (the Equipment details sidebar, and either page once a docked drawer reflows the
   layout) the panel collapsed to the header strip and clipped the tree away entirely. This floor
   guarantees the header, search and roughly nine rows are always visible; the body scrolls past it. */
.nx-app .nx-btree-panel { min-height: 360px; }

/* ── Issues Report charts (v9.08) ── */
.nx-app .nx-dash-kpis--compact .nx-dash-kpi { padding:8px 14px; min-height:56px; }
.nx-app .nx-dash-kpis--compact .nx-dash-kpi__value { font-size:22px; line-height:1.1; }
.nx-app .nx-dash-kpis--compact .nx-dash-kpi__label { font-size:11px; font-weight:700; text-transform: none; letter-spacing: normal; }
.nx-app .nx-ir-chart-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;
}
.nx-app .nx-ir-trend-row { margin-top:10px; }
.nx-app .nx-ir-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  display:flex; flex-direction:column; overflow:hidden;
}
.nx-app .nx-ir-card__hdr {
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px;
  padding:9px 12px; background:#fff;
  border-left:3px solid #1565c0; border-bottom:1px solid #e5e7eb;
  font-size:12px; font-weight:700; color:#1e3a5f;
}
.nx-app .nx-ir-card__body { flex:1; min-height:0; }
.nx-app .nx-ir-card__body canvas { display:block; }
.nx-app .nx-ir-card__body--scroll-chart {
  position:relative; overflow:hidden;
}
.nx-app .nx-ir-chart-scroll {
  position:absolute; inset:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-gutter:stable;
}
.nx-app .nx-ir-chart-scroll:focus-visible {
  outline:2px solid #1565c0; outline-offset:-2px;
}
.nx-app .nx-ir-chart-canvas {
  position:relative; min-width:100%; height:100%;
}
.nx-app .nx-ir-chart-canvas canvas {
  width:100% !important; height:100% !important;
}
.nx-app .nx-ir-expand-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:4px;
}
.nx-app .nx-ir-expand-grid .nx-ir-card__body { height:270px; }
.nx-app .nx-ir-expand-grid .nx-ir-card--scroll-chart { min-height:308px; }
.nx-app .nx-ir-expand-grid .nx-ir-card--full { grid-column:span 2; }
.nx-app .nx-ir-expand-grid .nx-ir-card--full.nx-ir-card--scroll-chart { min-height:298px; }
.nx-app .nx-ir-expand-grid .nx-ir-card--full .nx-ir-card__body { height:260px; }
.nx-app .nx-ir-expand-grid .nx-ir-card--e-tall { grid-row:span 2; }
.nx-app .nx-ir-expand-grid .nx-ir-card--e-tall .nx-ir-card__body { height:auto; flex:1; min-height:554px; }
.nx-app .nx-ir-chart-grid .nx-ir-card__body { height:170px; }
.nx-app .nx-ir-chart-grid .nx-ir-card--scroll-chart { min-height:208px; }
.nx-app .nx-ir-chart-grid .nx-ir-card--tall { grid-row:span 2; }
.nx-app .nx-ir-chart-grid .nx-ir-card--tall .nx-ir-card__body { height:auto; flex:1; min-height:340px; }
.nx-app .nx-ir-chart-grid .nx-ir-card--wide { grid-column:span 2; }
.nx-app .nx-ir-chart-grid .nx-ir-card--wide.nx-ir-card--scroll-chart { min-height:218px; }
.nx-app .nx-ir-chart-grid .nx-ir-card--wide .nx-ir-card__body { height:180px; }

/* Test Scripts — side-by-side grid */
.nx-app .nx-ts-grids {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;
}
.nx-app .nx-ts-section {
  gap: 8px;
}
.nx-app .nx-ts-section > .nx-dash-kpis,
.nx-app .nx-ts-section > .nx-dash-filters {
  margin-bottom: 0;
}
.nx-app .nx-ts-section > .nx-ts-grids {
  margin-top: 0;
}
.nx-app .nx-ts-focus-title {
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--nx-type-panel-title);
  font-weight: 700;
}
.nx-app .nx-ts-focus-meta {
  margin-left: 8px;
  color: var(--text-secondary);
  font-size: var(--nx-type-support);
  font-weight: 400;
}
.nx-app .nx-inspection-section {
  gap: 4px;
}
.nx-app .nx-inspection-section > .nx-dash-filters {
  margin-bottom: 0;
}
/* Panel inside the grid: same flex-column pattern as Issue Status by Area */
.nx-app .nx-ts-grids .nx-dash-table-panel--blue-hdr {
  overflow:hidden; display:flex; flex-direction:column;
  height:calc(100vh - 300px); min-height:280px;
}
/* Override equip-scroll height for this context (panel is smaller than global equip panel) */
.nx-app .nx-ts-grids .nx-dash-equip-scroll {
  height:auto !important; flex:1; min-height:0;
  overflow-y:scroll !important; overflow-x:auto;
  scrollbar-width:thin;
}

/* Test Scripts — individual panel focus button */
.nx-app .nx-ts-focus-btn {
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);
  color:#fff; border-radius:4px; padding:2px 7px; font-size:14px; cursor:pointer;
  line-height:1.4; transition:background .15s;
}
.nx-app .nx-ts-focus-btn:hover { background:rgba(255,255,255,.32); }

/* Test Scripts — scroll container */
.nx-app .nx-ts-scroll {
  height:calc(100vh - 380px); min-height:180px;
  overflow-y:scroll; overflow-x:auto;
}
.nx-app .nx-ts-scroll .nx-dash-table thead th {
  position:sticky; top:0; z-index:2; background:#f9fafb;
}
/* Focus mode scroll (taller) */
.nx-app .nx-ts-scroll--focus {
  height:calc(100vh - 200px); min-height:300px;
  overflow-y:auto; overflow-x:auto;
}
.nx-app .nx-ts-scroll--focus .nx-dash-table thead th {
  position:sticky; top:0; z-index:2; background:#f9fafb;
}

/* Focus overlay backdrop + modal base */
.nx-app .nx-focus-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
}
.nx-app .nx-focus-modal {
  background:#fff; border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.nx-app .nx-focus-modal__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#1565c0;
  flex-shrink:0;
}
.nx-app .nx-focus-modal__title {
  font-size:15px; font-weight:600; color:#fff;
}
.nx-app .nx-focus-modal__close {
  background:rgba(255,255,255,.2); border:none; color:#fff;
  border-radius:50%; width:28px; height:28px; font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.nx-app .nx-focus-modal__close:hover { background:rgba(255,255,255,.4); }
.nx-app .nx-focus-modal__body {
  flex:1; overflow:hidden; padding:12px 16px 16px;
}

/* Wide focus modal (single panel full-screen) */
.nx-app .nx-focus-modal--wide {
  width:min(95vw, 1200px); max-height:92vh;
  display:flex; flex-direction:column;
}
.nx-app .nx-focus-modal--wide .nx-focus-modal__body {
  flex:1; overflow:hidden; padding:12px 16px 16px;
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   DARK MODE — FINAL OVERRIDES (v9.22)
   Must be last in the file so they win over all !important light-mode rules
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* Dashboard bar & tabs */
.nx-app--dark .nx-dash__bar { background:#1A1A1A !important; border-bottom-color:#3D3D3D !important; box-shadow:none !important; }
.nx-app--dark .nx-dash__tab { color:#ADADAD !important; }
.nx-app--dark .nx-dash__tab:hover { color:#F7F7F7 !important; background:rgba(71,158,245,.08) !important; }
.nx-app--dark .nx-dash__tab--active { color:#60a5fa !important; border-bottom-color:#60a5fa !important; background:rgba(71,158,245,.1) !important; font-weight:700 !important; }
.nx-app--dark .nx-dash__refresh-btn { background:linear-gradient(135deg,#0f3460,#1565c0) !important; box-shadow:0 2px 8px rgba(0,0,0,.4) !important; }

/* Panel cards */
.nx-app--dark .nx-dash-chart-panel,
.nx-app--dark .nx-dash-table-panel { background:#1A1A1A !important; border-color:#3D3D3D !important; box-shadow:0 4px 16px rgba(0,0,0,.4) !important; }

/* Panel header (blue gradient version — becomes dark header in dark mode) */
.nx-app--dark .nx-dash-panel-header--blue { background:linear-gradient(135deg,#0a1e38,#0f3460) !important; border-left-color:#3b82f6 !important; border-bottom-color:#3D3D3D !important; }
.nx-app--dark .nx-dash-panel-title--white { color:#F7F7F7 !important; text-shadow:none !important; }
.nx-app--dark .nx-dash-panel-subtitle { color:#ADADAD !important; }

/* Table headers & body */
.nx-app--dark .nx-dash-table thead th { background:linear-gradient(to bottom,#0a1e38,#242424) !important; color:#93c5fd !important; border-bottom-color:#3D3D3D !important; }
.nx-app--dark .nx-ts-scroll .nx-dash-table thead th,
.nx-app--dark .nx-ts-scroll--focus .nx-dash-table thead th { background:#141414 !important; }
.nx-app--dark .nx-dash-table tbody td { color:#F7F7F7 !important; border-bottom-color:#3D3D3D !important; }
.nx-app--dark .nx-dash-clickable-row:hover td { background:rgba(71,158,245,.1) !important; color:#93c5fd !important; }
.nx-app--dark .nx-dash-row--selected { background:#0d2a44 !important; }
.nx-app--dark .nx-dash-row--selected td { color:#60a5fa !important; }
.nx-app--dark .nx-dash-row--selected td:first-child { border-left-color:#479EF5; }

/* Grid wrap */
.nx-app--dark .nx-dash-grid-wrap { background:#1A1A1A !important; border-color:#3D3D3D !important; }

/* Cross-filter bar */
.nx-app--dark .nx-dash-xfilter { background:linear-gradient(to right,#0d2a44,#0f2d44) !important; border-color:#1e4a6e !important; }
.nx-app--dark .nx-dash-xfilter__pill { background:rgba(59,130,246,.18) !important; color:#93c5fd !important; }
.nx-app--dark .nx-dash-xfilter__label { color:#60a5fa !important; }

/* Toggle buttons */
.nx-app--dark .nx-dash-toggle { border-color:#3D3D3D !important; background:#141414 !important; }
.nx-app--dark .nx-dash-toggle__btn { color:#ADADAD !important; background:transparent !important; }
.nx-app--dark .nx-dash-toggle__btn:hover { color:#60a5fa !important; background:rgba(71,158,245,.1) !important; }
.nx-app--dark .nx-dash-toggle__btn--active { background:#1e3a5f !important; color:#60a5fa !important; }

/* Expand-to-focus button */
.nx-app--dark .nx-dash-expand-btn { color:rgba(255,255,255,.75) !important; background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.18) !important; }
.nx-app--dark .nx-dash-expand-btn:hover { color:#fff !important; background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.35) !important; }

/* Focus modals */
.nx-app--dark .nx-dash-focus-modal__header { background:linear-gradient(135deg,#0a1e38,#0f3460) !important; }
.nx-app--dark .nx-focus-modal { background:#1A1A1A !important; border-color:#3D3D3D; }
.nx-app--dark .nx-focus-modal__header { background:linear-gradient(135deg,#0a1e38,#0f3460) !important; }
.nx-app--dark .nx-focus-modal__body { background:#1A1A1A !important; }

/* Issues Report chart cards */
.nx-app--dark .nx-ir-card { background:#1A1A1A !important; border-color:#3D3D3D !important; }
.nx-app--dark .nx-ir-card__hdr { background:#141414 !important; border-left-color:#3b82f6 !important; border-bottom-color:#3D3D3D !important; color:#F7F7F7 !important; }

/* Building Areas panel */
.nx-app--dark .nx-btree-panel { background:#1A1A1A !important; border-color:#3D3D3D !important; }
.nx-app--dark .nx-btree-header { background:#1A1A1A !important; border-bottom-color:#3D3D3D !important; }
.nx-app--dark .nx-btree-header__title { color:#F7F7F7 !important; }

/* Test Scripts — sticky header fix */
.nx-app--dark .nx-dash-equip-scroll::-webkit-scrollbar-thumb { background:#3D3D3D; }
.nx-app--dark .nx-dash-equip-scroll::-webkit-scrollbar-track { background:#141414; }

/* Links & misc text — ensure not overridden */
.nx-app--dark .nx-dash-link,
.nx-app--dark .nx-dash-link-cell { color:#60a5fa !important; }
.nx-app--dark .nx-dash-link:hover { color:#93c5fd !important; }

/* ============================================================
   NexusProjectHome — Home tab KPI cards and Quick Links
   ============================================================ */

/* Page tab bar (Home | All Projects) */
.nx-app .nx-proj-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card);
    flex-shrink: 0;
}

.nx-app .nx-proj-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 4px 4px 0 0;
}

.nx-app .nx-proj-tab:hover { color: var(--text-primary); background: var(--bg-subtle); }

.nx-app .nx-proj-tab:focus-visible {
    outline-offset: -2px !important;
}

.nx-app .nx-proj-tab--active {
    color: var(--brand-600);
    border-bottom-color: var(--brand-600);
    font-weight: 600;
}

/* Home section container */
.nx-app .nx-home {
    padding: 24px 24px 32px;
    overflow-y: auto;
}

/* Loading state */
.nx-app .nx-home__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-secondary);
    font-size: 14px;
}

.nx-app .nx-home__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--brand-600);
    border-radius: 50%;
    animation: nx-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* 3-column card grid */
.nx-app .nx-home__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1100px) {
    .nx-app .nx-home__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .nx-app .nx-home__grid { grid-template-columns: 1fr; }
}

/* Individual KPI card */
.nx-app .nx-home-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.nx-app .nx-home-card:hover {
    border-color: var(--brand-400);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.nx-app .nx-home-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-subtle);
}

.nx-app .nx-home-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nx-app .nx-home-card__icon--blue   { background: #EBF3FB; color: #0078D4; }
.nx-app .nx-home-card__icon--orange { background: #FFF4CE; color: #835B00; }
.nx-app .nx-home-card__icon--purple { background: #F5F3FF; color: #5c2e91; }
.nx-app .nx-home-card__icon--teal   { background: #DFF6F8; color: #005B70; }
.nx-app .nx-home-card__icon--green  { background: #DFF6DD; color: #107C10; }
.nx-app .nx-home-card__icon--red    { background: #FDE7E9; color: #C42B1C; }

.nx-app .nx-home-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.nx-app .nx-home-card__body {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nx-app .nx-home-card__metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.nx-app .nx-home-card__label {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border-strong);
}

.nx-app .nx-home-card__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 24px;
    text-align: right;
}

.nx-app .nx-home-card__footer {
    padding: 10px 16px 14px;
}

/* Small button modifier */
.nx-app .btn--sm {
    padding: 6px 14px;
    font-size: 12px;
}

/* Quick Links panel */
.nx-app .nx-quick-links {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 16px 20px 20px;
    max-width: 680px;
}

.nx-app .nx-quick-links__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.nx-app .nx-quick-links__list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.nx-app .nx-quick-links__link {
    color: var(--brand-600);
    text-decoration: none;
    font-weight: 500;
}

.nx-app .nx-quick-links__link:hover { text-decoration: underline; }

/* ── Dark mode overrides ── */
.nx-app--dark .nx-proj-tabs { background: var(--bg-card); border-bottom-color: var(--border-subtle); }
.nx-app--dark .nx-proj-tab:hover { background: rgba(255,255,255,0.06); }
.nx-app--dark .nx-proj-tab--active { color: #4da6ff; border-bottom-color: #4da6ff; }

.nx-app--dark .nx-home-card { background: var(--bg-card); border-color: var(--border-subtle); }
.nx-app--dark .nx-home-card:hover { border-color: var(--brand-400); }
.nx-app--dark .nx-home-card__header { border-bottom-color: var(--border-subtle); }

.nx-app--dark .nx-home-card__icon--blue   { background: rgba(0,120,212,0.15); color: #4da6ff; }
.nx-app--dark .nx-home-card__icon--orange { background: rgba(131,91,0,0.18); color: #ffd966; }
.nx-app--dark .nx-home-card__icon--purple { background: rgba(92,46,145,0.2); color: #c5a3ff; }
.nx-app--dark .nx-home-card__icon--teal   { background: rgba(0,91,112,0.2); color: #4dd4e8; }
.nx-app--dark .nx-home-card__icon--green  { background: rgba(16,124,16,0.18); color: #4ade80; }
.nx-app--dark .nx-home-card__icon--red    { background: rgba(196,43,28,0.18); color: #f87171; }

.nx-app--dark .nx-quick-links { background: var(--bg-card); border-color: var(--border-subtle); }
.nx-app--dark .nx-quick-links__link { color: #4da6ff; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   Project Home — Premium dashboard  (v11.4)
   Greeting header · summary strip · KPI cards · Quick Links tile grid
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Greeting header ──────────────────────────────────────────────────── */
.nx-app .nx-home-greeting {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle);
}
.nx-app .nx-home-greeting__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}
.nx-app .nx-home-greeting__sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ── Summary stat strip ───────────────────────────────────────────────── */
.nx-app .nx-home-greeting__stat-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.nx-app .nx-home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid var(--border-subtle);
}
.nx-app .nx-home-stat__num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}
.nx-app .nx-home-stat__label {
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
    color: var(--text-secondary);
    text-align: center;
    text-transform: none;
}
.nx-app .nx-home-stat--orange .nx-home-stat__num { color: #c4501c; }
.nx-app .nx-home-stat--pink   .nx-home-stat__num { color: #c1226a; }
.nx-app .nx-home-stat--purple .nx-home-stat__num { color: #7a3db8; }
.nx-app .nx-home-stat--teal   .nx-home-stat__num { color: #0e7490; }
.nx-app .nx-home-stat--blue   .nx-home-stat__num { color: #0078d4; }
.nx-app .nx-home-stat--green  .nx-home-stat__num { color: #107c10; }

/* ── KPI card — premium redesign ─────────────────────────────────────── */
.nx-app .nx-home__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 20px 24px;
}
.nx-app .nx-home-card {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}
.nx-app .nx-home-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 10px 10px 0 0;
}
.nx-app .nx-home-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border-color: var(--border-default);
}

/* Color accents per card type */
.nx-app .nx-home-card--orange::before { background: #c4501c; }
.nx-app .nx-home-card--pink::before   { background: #c1226a; }
.nx-app .nx-home-card--purple::before { background: #7a3db8; }
.nx-app .nx-home-card--teal::before   { background: #0e7490; }
.nx-app .nx-home-card--blue::before   { background: #0078d4; }
.nx-app .nx-home-card--green::before  { background: #107c10; }
.nx-app .nx-home-card--rose::before   { background: #4338ca; }

/* Card header row */
.nx-app .nx-home-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nx-app .nx-home-card__icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.nx-app .nx-home-card--orange .nx-home-card__icon { background: rgba(196,80,28,0.1); color: #c4501c; }
.nx-app .nx-home-card--pink   .nx-home-card__icon { background: rgba(193,34,106,0.1); color: #c1226a; }
.nx-app .nx-home-card--purple .nx-home-card__icon { background: rgba(122,61,184,0.1); color: #7a3db8; }
.nx-app .nx-home-card--teal   .nx-home-card__icon { background: rgba(14,116,144,0.1); color: #0e7490; }
.nx-app .nx-home-card--blue   .nx-home-card__icon { background: rgba(0,120,212,0.1); color: #0078d4; }
.nx-app .nx-home-card--green  .nx-home-card__icon { background: rgba(16,124,16,0.1); color: #107c10; }
.nx-app .nx-home-card--rose   .nx-home-card__icon { background: rgba(67,56,202,0.1); color: #4338ca; }

.nx-app .nx-home-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Big primary count */
.nx-app .nx-home-card__count {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}
.nx-app .nx-home-card--orange .nx-home-card__count { color: #c4501c; }
.nx-app .nx-home-card--pink   .nx-home-card__count { color: #c1226a; }
.nx-app .nx-home-card--purple .nx-home-card__count { color: #7a3db8; }
.nx-app .nx-home-card--teal   .nx-home-card__count { color: #0e7490; }
.nx-app .nx-home-card--blue   .nx-home-card__count { color: #0078d4; }
.nx-app .nx-home-card--green  .nx-home-card__count { color: #107c10; }
.nx-app .nx-home-card--rose   .nx-home-card__count { color: #4338ca; }

.nx-app .nx-home-card__sub-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: -6px;
}

/* Sub-metric rows */
.nx-app .nx-home-card__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nx-app .nx-home-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.nx-app .nx-home-card__row:last-child { border-bottom: none; }
.nx-app .nx-home-card__row-label { color: var(--text-secondary); }
.nx-app .nx-home-card__row-val {
    font-weight: 600;
    color: var(--text-primary);
}
.nx-app .nx-home-card__row-val--orange { color: #c4501c; }
.nx-app .nx-home-card__row-val--pink   { color: #c1226a; }
.nx-app .nx-home-card__row-val--purple { color: #7a3db8; }
.nx-app .nx-home-card__row-val--teal   { color: #0e7490; }
.nx-app .nx-home-card__row-val--blue   { color: #0078d4; }
.nx-app .nx-home-card__row-val--green  { color: #107c10; }

/* Progress bar */
.nx-app .nx-home-card__progress {
    height: 4px;
    background: var(--border-subtle);
    border-radius: 2px;
    overflow: hidden;
    margin-top: auto;
}
.nx-app .nx-home-card__progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}
.nx-app .nx-home-card--orange .nx-home-card__progress-bar { background: #c4501c; }
.nx-app .nx-home-card--pink   .nx-home-card__progress-bar { background: #c1226a; }
.nx-app .nx-home-card--purple .nx-home-card__progress-bar { background: #7a3db8; }
.nx-app .nx-home-card--teal   .nx-home-card__progress-bar { background: #0e7490; }
.nx-app .nx-home-card--blue   .nx-home-card__progress-bar { background: #0078d4; }
.nx-app .nx-home-card--green  .nx-home-card__progress-bar { background: #107c10; }
.nx-app .nx-home-card--rose   .nx-home-card__progress-bar { background: #4338ca; }

/* Navigation link at bottom */
.nx-app .nx-home-card__link {
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--brand-600);
    display: inline-block;
}
.nx-app .nx-home-card__link:hover { text-decoration: underline; }

/* ── Quick Links — tile grid ──────────────────────────────────────────── */
.nx-app .nx-quick-links {
    margin: 0 24px 24px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 18px 20px;
}
.nx-app .nx-quick-links__title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.nx-app .nx-quick-links__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.nx-app .nx-quick-link-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-page);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.nx-app .nx-quick-link-tile:hover {
    background: #fff;
    border-color: var(--brand-600);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.nx-app .nx-quick-link-tile__icon {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: rgba(0,120,212,0.08);
    color: #0078d4;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.nx-app .nx-quick-link-tile__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nx-app .nx-quick-link-tile__label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nx-app .nx-quick-link-tile__sub {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Dark mode — premium home ─────────────────────────────────────────── */
.nx-app--dark .nx-home-greeting {
    background: var(--bg-card);
    border-bottom-color: var(--border-subtle);
}
.nx-app--dark .nx-home-stat {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
}
.nx-app--dark .nx-home-stat--orange .nx-home-stat__num { color: #ffa07a; }
.nx-app--dark .nx-home-stat--pink   .nx-home-stat__num { color: #f48fb1; }
.nx-app--dark .nx-home-stat--purple .nx-home-stat__num { color: #c5a3ff; }
.nx-app--dark .nx-home-stat--teal   .nx-home-stat__num { color: #4dd4e8; }
.nx-app--dark .nx-home-stat--blue   .nx-home-stat__num { color: #4da6ff; }
.nx-app--dark .nx-home-stat--green  .nx-home-stat__num { color: #4ade80; }

.nx-app--dark .nx-home-card {
    background: var(--bg-card);
    border-color: var(--border-subtle);
}
.nx-app--dark .nx-home-card:hover {
    border-color: var(--border-default);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.nx-app--dark .nx-home-card--orange .nx-home-card__count { color: #ffa07a; }
.nx-app--dark .nx-home-card--pink   .nx-home-card__count { color: #f48fb1; }
.nx-app--dark .nx-home-card--purple .nx-home-card__count { color: #c5a3ff; }
.nx-app--dark .nx-home-card--teal   .nx-home-card__count { color: #4dd4e8; }
.nx-app--dark .nx-home-card--blue   .nx-home-card__count { color: #4da6ff; }
.nx-app--dark .nx-home-card--green  .nx-home-card__count { color: #4ade80; }
.nx-app--dark .nx-home-card--rose   .nx-home-card__count { color: #a5b4fc; }

.nx-app--dark .nx-home-card--orange .nx-home-card__icon { background: rgba(255,160,122,0.12); color: #ffa07a; }
.nx-app--dark .nx-home-card--pink   .nx-home-card__icon { background: rgba(244,143,177,0.12); color: #f48fb1; }
.nx-app--dark .nx-home-card--purple .nx-home-card__icon { background: rgba(197,163,255,0.12); color: #c5a3ff; }
.nx-app--dark .nx-home-card--teal   .nx-home-card__icon { background: rgba(77,212,232,0.12); color: #4dd4e8; }
.nx-app--dark .nx-home-card--blue   .nx-home-card__icon { background: rgba(77,166,255,0.12); color: #4da6ff; }
.nx-app--dark .nx-home-card--green  .nx-home-card__icon { background: rgba(74,222,128,0.12); color: #4ade80; }
.nx-app--dark .nx-home-card--rose   .nx-home-card__icon { background: rgba(165,180,252,0.12); color: #a5b4fc; }

.nx-app--dark .nx-home-card__row-val--orange { color: #ffa07a; }
.nx-app--dark .nx-home-card__row-val--pink   { color: #f48fb1; }
.nx-app--dark .nx-home-card__row-val--purple { color: #c5a3ff; }
.nx-app--dark .nx-home-card__row-val--teal   { color: #4dd4e8; }
.nx-app--dark .nx-home-card__row-val--blue   { color: #4da6ff; }
.nx-app--dark .nx-home-card__row-val--green  { color: #4ade80; }

.nx-app--dark .nx-quick-links {
    background: var(--bg-card);
    border-color: var(--border-subtle);
}
.nx-app--dark .nx-quick-link-tile {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}
.nx-app--dark .nx-quick-link-tile:hover {
    background: var(--bg-card);
    border-color: #4da6ff;
}
.nx-app--dark .nx-quick-link-tile__icon {
    background: rgba(77,166,255,0.1);
    color: #4da6ff;
}
.nx-app--dark .nx-home-card__link { color: #4da6ff; }

/* ── Quick Links — simple text grid (v11.4 override) ─────────────────── */
.nx-app .nx-quick-links {
    margin: 0 24px 24px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 18px 20px;
}
.nx-app .nx-quick-links__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.nx-app .nx-quick-links__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
}
/* Each link is a simple cell */
.nx-app .nx-quick-link-tile {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: none;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    transition: background 0.1s ease, color 0.1s ease;
}
.nx-app .nx-quick-link-tile:hover {
    background: #f0f6ff;
    color: var(--brand-600);
    box-shadow: none;
}
/* Remove border from rightmost and bottom cells */
.nx-app .nx-quick-link-tile:nth-child(3n) { border-right: none; }
.nx-app .nx-quick-link-tile:nth-last-child(-n+3) { border-bottom: none; }

.nx-app--dark .nx-quick-links {
    background: var(--bg-card);
    border-color: var(--border-subtle);
}
.nx-app--dark .nx-quick-links__grid {
    border-color: var(--border-subtle);
}
.nx-app--dark .nx-quick-link-tile {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    background: transparent;
}
.nx-app--dark .nx-quick-link-tile:hover {
    background: rgba(77,166,255,0.08);
    color: #4da6ff;
}

/* ── Progress bar text (v11.4) ────────────────────────────────────────── */
.nx-app .nx-home-card__progress-text {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ── Additional row-val colors ────────────────────────────────────────── */
.nx-app .nx-home-card__row-val--danger { color: #c4262e; }
.nx-app .nx-home-card__row-val--teal   { color: #0e7490; }
.nx-app .nx-home-card__row-val--orange { color: #c4501c; }

.nx-app--dark .nx-home-card__row-val--danger { color: #f87171; }
.nx-app--dark .nx-home-card__row-val--teal   { color: #4dd4e8; }
.nx-app--dark .nx-home-card__row-val--orange { color: #ffa07a; }

/* ── v11.5 layout fixes ─────────────────────────────────────────────────
   Remove overflow-y:auto from nx-home so the page-level scroll handles
   all content, making the Quick Links section reachable.
   ──────────────────────────────────────────────────────────────────────── */
.nx-app .nx-home {
    overflow-y: visible;
    padding: 0 0 32px;       /* remove side padding — greeting/grid/quick-links manage their own */
}

/* Greeting stretches full width */
.nx-app .nx-home-greeting {
    padding: 20px 24px 16px;
}

/* Card grid already has its own padding */
.nx-app .nx-home__grid {
    padding: 20px 24px;
}

/* Quick links — no extra margin; already has padding internally */
.nx-app .nx-quick-links {
    margin: 0 24px 32px;
}

/* ── v11.6 spacing tightening ──────────────────────────────────────────
   Reduce whitespace between greeting and cards; richer compact look.
   ──────────────────────────────────────────────────────────────────── */

/* Greeting: less vertical padding, no bottom border gap */
.nx-app .nx-home-greeting {
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0;
}

/* Remove top gap before cards */
.nx-app .nx-home__grid {
    padding: 16px 24px 12px;
    gap: 14px;
}

/* Cards: tighter internal spacing */
.nx-app .nx-home-card {
    gap: 6px;
    padding: 14px 16px 12px;
}

.nx-app .nx-home-card__count {
    font-size: 40px;
    line-height: 1;
}

.nx-app .nx-home-card__sub-label {
    margin-top: -4px;
    font-size: 11px;
}

.nx-app .nx-home-card__rows {
    gap: 2px;
    margin-top: 2px;
}

.nx-app .nx-home-card__row {
    padding: 2px 0;
    font-size: 12px;
}

.nx-app .nx-home-card__progress {
    margin-top: 4px;
}

/* Stat strip: tighter */
.nx-app .nx-home-greeting__stat-strip {
    gap: 6px;
}

.nx-app .nx-home-stat {
    min-width: 64px;
    padding: 6px 10px;
}

.nx-app .nx-home-stat__num {
    font-size: 20px;
}

/* Quick links: tighter top margin */
.nx-app .nx-quick-links {
    margin: 4px 24px 28px;
}

/* ── v11.8: Greeting whitespace fix + Quick Links inside grid ─────────────
   1. Greeting: text flex:1 fills the gap; stat strip stays right-aligned.
   2. Quick Links: inside nx-home__grid, uses grid-column: auto/-1 to fill
      remaining columns on the same row as Test Scripts.
   ──────────────────────────────────────────────────────────────────────── */

/* Fix greeting middle whitespace */
.nx-app .nx-home-greeting {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-subtle);
}
.nx-app .nx-home-greeting__text {
    flex: 1;
    min-width: 0;
}
.nx-app .nx-home-greeting__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nx-app .nx-home-greeting__sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.nx-app .nx-home-greeting__stat-strip {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Quick Links — inside the card grid, spans remaining columns next to Test Scripts */
.nx-app .nx-home__grid > .nx-quick-links {
    grid-column: auto / -1;   /* start at auto-placed position, end at last column */
    margin: 0;
    align-self: stretch;
    min-height: 0;
}

/* Ensure the quick-links inner grid fills the height */
.nx-app .nx-home__grid > .nx-quick-links {
    display: flex;
    flex-direction: column;
}
.nx-app .nx-home__grid > .nx-quick-links .nx-quick-links__grid {
    flex: 1;
    grid-template-columns: 1fr;   /* stack vertically when in narrow remaining space */
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
}

/* When Quick Links has plenty of horizontal room (≥ 2 columns worth), use 2 columns */
@media (min-width: 900px) {
    .nx-app .nx-home__grid > .nx-quick-links .nx-quick-links__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dark mode for greeting fix */
.nx-app--dark .nx-home-greeting {
    background: var(--bg-card);
    border-bottom-color: var(--border-subtle);
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   v11.9 — Landing Home: 3-column grid + horizontal Quick Links strip
   No wasted space. Rich, business-first landing page design.
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Fixed 4-column grid (row 1: 4 cards, row 2: 3 cards) ─────────────── */
.nx-app .nx-home__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 14px 24px 10px;
}
@media (max-width: 1280px) {
    .nx-app .nx-home__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .nx-app .nx-home__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .nx-app .nx-home__grid { grid-template-columns: 1fr; }
}

/* Quick Links strip spans the full grid row */
.nx-app .nx-home__grid > .nx-ql-strip {
    grid-column: 1 / -1;
}

/* ── Quick Links horizontal action strip ─────────────────────────────── */
.nx-app .nx-ql-strip {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    height: 48px;
    margin-top: 2px;
}

/* Left label badge */
.nx-app .nx-ql-strip__label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: #f5f5f5;
    border-right: 1px solid var(--border-subtle);
    letter-spacing: normal;
    white-space: nowrap;
}

/* Individual link tiles */
.nx-app .nx-ql-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 100%;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    border-right: 1px solid var(--border-subtle);
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
.nx-app .nx-ql-item:last-of-type { border-right: none; }

/* Colored top accent bar on hover */
.nx-app .nx-ql-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: #0078d4;
    transform: scaleX(0);
    transition: transform 0.15s ease;
}
.nx-app .nx-ql-item:hover::before { transform: scaleX(1); }

.nx-app .nx-ql-item:hover {
    background: rgba(0, 120, 212, 0.05);
    color: #0078d4;
}

.nx-app .nx-ql-item__icon {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.12s ease;
}
.nx-app .nx-ql-item:hover .nx-ql-item__icon { color: #0078d4; }

/* Responsive: stack vertically below 680px */
@media (max-width: 680px) {
    .nx-app .nx-ql-strip {
        flex-direction: column;
        height: auto;
        padding: 8px 0;
    }
    .nx-app .nx-ql-strip__label {
        width: 100%;
        height: 32px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }
    .nx-app .nx-ql-item {
        width: 100%;
        height: 36px;
        justify-content: flex-start;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding: 0 16px;
    }
    .nx-app .nx-ql-item:last-of-type { border-bottom: none; }
}

/* Dark mode */
.nx-app--dark .nx-ql-strip {
    background: var(--bg-card);
    border-color: var(--border-subtle);
}
.nx-app--dark .nx-ql-strip__label {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
}
.nx-app--dark .nx-ql-item {
    color: var(--text-primary);
    border-color: var(--border-subtle);
}
.nx-app--dark .nx-ql-item:hover {
    background: rgba(77,166,255,0.08);
    color: #4da6ff;
}
.nx-app--dark .nx-ql-item::before { background: #4da6ff; }
.nx-app--dark .nx-ql-item:hover .nx-ql-item__icon { color: #4da6ff; }

/* ============================================================
   v12.0 — Option 1: Help popover  |  Option 3: About settings
   ============================================================ */

/* Role Matrix - dark mode (.nx-app--dark) */
.nx-app--dark .eq-rm-card { background: #1A1A1A; border-color: #334155; }
.nx-app--dark .eq-rm-header { background: linear-gradient(135deg, #141414 0%, #1E3A5F 60%, #1E40AF 100%); }
.nx-app--dark .eq-rm-table thead th { background: #141414; color: #ADADAD; border-color: #334155; }
.nx-app--dark .eq-rm-table thead th:first-child,
.nx-app--dark .eq-rm-table thead th:nth-child(2) { background: #141414; }
.nx-app--dark .eq-rm-table tbody td { border-color: #334155; color: #F7F7F7; }
.nx-app--dark .eq-rm-table tbody td:first-child,
.nx-app--dark .eq-rm-table tbody td:nth-child(2) { background: #1A1A1A; }
.nx-app--dark .eq-rm-table tbody tr:nth-child(even) td { background: #141414; }
.nx-app--dark .eq-rm-table tbody tr:nth-child(even) td:first-child,
.nx-app--dark .eq-rm-table tbody tr:nth-child(even) td:nth-child(2) { background: #141414; }
.nx-app--dark .eq-rm-table tbody tr:hover td { background: rgba(0,120,212,0.08) !important; }
.nx-app--dark .eq-rm-table tbody tr:hover td:first-child,
.nx-app--dark .eq-rm-table tbody tr:hover td:nth-child(2) { background: rgba(0,120,212,0.08) !important; }
.nx-app--dark .eq-rm-level-group td { background: linear-gradient(90deg, #141414, #1A1A1A) !important; color: #CBD5E1 !important; border-color: #334155 !important; }
.nx-app--dark .eq-rm-legend { background: #141414; border-color: #334155; }
.nx-app--dark .eq-rm-legend-item { color: #ADADAD; }
.nx-app--dark .eq-rm-cell-na { background: #334155; color: #64748B; }
.nx-app--dark .eq-rm-filter-select option { color: #F7F7F7; background: #1A1A1A; }
.nx-app--dark .eq-rm-table-wrap { background: #1A1A1A; }
/* ============================================================
   Nexus Discussion drawer (nxd-*) — New UI Discussion module.
   Reuses the .nx-create-drawer contract for docking/size; nxd-*
   classes skin the panel, threads, replies, composer and menus.
   ============================================================ */
.nxd-backdrop { position: fixed; inset: 0; z-index: 409; background: transparent; }
@media (max-width: 1200px) { .nxd-backdrop { background: rgba(0,0,0,0.32); } }

.nx-app .nx-create-drawer.nxd-drawer { background: #f3f2f1; }
/* Discussions matches the standard create-drawer width (500px) so it reads as a consistent side
   panel, not a full-screen surface. The drawer overlays with its own backdrop (no main push). */
.nx-app .nx-create-drawer.nxd-drawer { width: 500px; max-width: 94vw; }
/* Unscoped fallback: apply the width even if the .nx-app ancestor scope is absent in a given
   render path (otherwise a fixed-position drawer with no width collapses to its content). */
.nxd-drawer.nx-create-drawer { width: 500px; max-width: 94vw; }

/* Head */
.nxd-head { align-items: center; }
.nxd-head__left { display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; }
.nxd-head__titles { display: flex; flex-direction: column; min-width: 0; }
.nxd-head__title { font-size: 16px; font-weight: 700; line-height: 1.25; }
.nxd-head__subtitle { font-size: 11.5px; opacity: 0.88; line-height: 1.3; }
.nxd-head__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nxd-icon-btn { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 30px; height: 30px;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .12s ease; }
.nxd-icon-btn:hover { background: rgba(255,255,255,0.30); }
.nxd-resolve-btn { margin-right: 2px; }

/* Body */
.nxd-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }

/* Search */
.nxd-search { position: relative; margin: 12px 16px 8px; flex-shrink: 0; }
.nxd-search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #8a8f98; pointer-events: none; }
.nxd-search__input { width: 100%; box-sizing: border-box; height: 36px; border: 1px solid #d7dbe0; border-radius: 8px;
  padding: 0 12px 0 34px; font-size: 13px; background: #fff; color: #1b1a19; outline: none; transition: border-color .12s ease, box-shadow .12s ease; }
.nxd-search__input:focus { border-color: #0f6cbd; box-shadow: 0 0 0 2px rgba(15,108,189,0.16); }

/* Thread list */
.nxd-threads { flex: 1; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.nxd-threads--compact { gap: 2px; }
.nxd-time-divider { display: flex; align-items: center; justify-content: center; margin: 12px 0 6px; }
.nxd-time-label { font-size: 11px; font-weight: 600; color: #8a8f98; background: #e9edf2; padding: 3px 12px; border-radius: 12px; }

/* Thread card */
.nxd-thread-wrapper { position: relative; }
.nxd-unread-dot { position: absolute; left: -4px; top: 16px; width: 8px; height: 8px; border-radius: 50%;
  background: #0f6cbd; box-shadow: 0 0 0 3px rgba(15,108,189,0.16); z-index: 2; }
.nxd-thread { position: relative; background: #fff; border: 1px solid #e6e9ee; border-left: 3px solid #0f6cbd;
  border-radius: 10px; padding: 12px 14px; transition: box-shadow .12s ease, border-color .12s ease; }
.nxd-thread:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.nxd-unread .nxd-thread { background: #f2f8fe; border-left-color: #1586d8; }
.nxd-threads--compact .nxd-thread { padding: 8px 12px; }
.nxd-thread__loading { position: absolute; inset: 0; background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; z-index: 3; border-radius: 10px; }

/* Avatars */
.nxd-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; letter-spacing: normal; }
.nxd-avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }
.nxd-avatar--mini { width: 22px; height: 22px; font-size: 9.5px; border: 2px solid #fff; }

/* Thread header */
.nxd-thread__header { display: flex; align-items: center; gap: 10px; }
.nxd-thread__meta { display: flex; flex-direction: column; min-width: 0; }
.nxd-thread__author { font-size: 13px; font-weight: 600; color: #1b1a19; line-height: 1.3; }
.nxd-thread__account { font-size: 11px; color: #57606a; line-height: 1.2; }
.nxd-thread__time { font-size: 11px; color: #8a8f98; }

/* Thread body */
.nxd-thread__body { margin: 8px 0 0; padding-left: 42px; font-size: 13px; line-height: 1.5; color: #24292f; word-break: break-word; white-space: pre-wrap; }
.nxd-thread__body--compact { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
.nxd-edited { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: #8a8f98; margin-left: 6px; font-style: italic; }

/* Hover toolbar */
.nxd-hover-toolbar { position: absolute; top: 8px; right: 10px; display: flex; gap: 2px; background: #fff;
  border: 1px solid #e0e3e8; border-radius: 8px; padding: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.10); z-index: 4; }
.nxd-tb-btn { background: transparent; border: none; width: 28px; height: 28px; border-radius: 6px; color: #57606a;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .1s ease, color .1s ease; }
.nxd-tb-btn:hover { background: #eef1f5; color: #0f6cbd; }

/* More menu */
.nxd-more-wrapper { position: relative; }
.nxd-more-menu { position: absolute; top: 32px; right: 0; background: #fff; border: 1px solid #e0e3e8; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14); padding: 4px; min-width: 170px; z-index: 20; }
.nxd-more-item { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none;
  padding: 8px 10px; border-radius: 6px; font-size: 12.5px; color: #24292f; cursor: pointer; text-align: left; }
.nxd-more-item:hover { background: #f2f4f7; }
.nxd-more-item--danger { color: #d13438; }
.nxd-more-item--danger:hover { background: #fdf0f0; }

/* Edit inline */
.nxd-edit { margin-top: 8px; margin-left: 42px; background: #f7f9fc; border: 1px solid #d7e3f2; border-radius: 10px; padding: 10px; }
.nxd-edit--reply { margin-left: 0; }
.nxd-edit__header { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #0f6cbd; margin-bottom: 6px; }
.nxd-edit__input { position: relative; }
.nxd-edit__actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.nxd-edit-save { display: inline-flex; align-items: center; gap: 5px; background: #0f6cbd; color: #fff; border: none;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.nxd-edit-save:hover:not(:disabled) { background: #0c5aa0; }
.nxd-edit-save:disabled { opacity: 0.5; cursor: not-allowed; }
.nxd-edit-cancel { background: transparent; color: #57606a; border: 1px solid #d7dbe0; padding: 6px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; }
.nxd-edit-cancel:hover { background: #eef1f5; }
.nxd-edit-hint { font-size: 10.5px; color: #a0a4ab; margin-right: auto; }

/* Delete confirm (thread overlay) */
.nxd-delete-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.85); display: flex; align-items: center;
  justify-content: center; z-index: 12; border-radius: 10px; backdrop-filter: blur(1px); }
.nxd-delete-dialog { background: #fff; border: 1px solid #f0d0d0; border-radius: 12px; padding: 16px; max-width: 300px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16); text-align: center; }
.nxd-delete-icon { width: 40px; height: 40px; border-radius: 50%; background: #fdeded; color: #d13438; display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 8px; }
.nxd-delete-content { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.nxd-delete-title { font-size: 14px; font-weight: 700; color: #1b1a19; }
.nxd-delete-desc { font-size: 12px; color: #57606a; line-height: 1.4; }
.nxd-delete-actions { display: flex; gap: 8px; justify-content: center; }
.nxd-delete-yes { display: inline-flex; align-items: center; gap: 5px; background: #d13438; color: #fff; border: none;
  padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.nxd-delete-yes:hover { background: #b52b2f; }
.nxd-delete-no { background: transparent; color: #57606a; border: 1px solid #d7dbe0; padding: 7px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; }
.nxd-delete-no:hover { background: #eef1f5; }
.nxd-delete--sm { padding: 4px 10px; font-size: 11.5px; }

/* Delete bar (reply inline) */
.nxd-delete-bar { display: flex; align-items: center; gap: 8px; background: #fdf0f0; border: 1px solid #f3d0d0; border-radius: 8px; padding: 6px 10px; }
.nxd-delete-bar__icon { color: #d13438; display: inline-flex; }
.nxd-delete-bar__text { font-size: 12px; color: #a4262c; font-weight: 600; flex: 1; }
.nxd-delete-bar__actions { display: flex; gap: 6px; }

/* Reply count / replies */
.nxd-reply-count { display: inline-flex; align-items: center; gap: 5px; margin: 8px 0 0 42px; font-size: 11.5px; color: #0f6cbd; font-weight: 600; }
.nxd-replies { margin: 8px 0 0 42px; border-left: 2px solid #e6e9ee; padding-left: 12px; }
.nxd-reply-summary, .nxd-reply-collapse { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none;
  padding: 4px 0; font-size: 12px; color: #0f6cbd; font-weight: 600; cursor: pointer; }
.nxd-reply-avatars { display: flex; }
.nxd-reply-avatars .nxd-avatar--mini { margin-left: -6px; }
.nxd-reply-avatars .nxd-avatar--mini:first-child { margin-left: 0; }
.nxd-reply-chevron, .nxd-reply-collapse svg { color: #8a8f98; }
.nxd-reply-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nxd-reply { position: relative; display: flex; gap: 8px; }
.nxd-reply__content { flex: 1; min-width: 0; }
.nxd-reply__meta { display: flex; align-items: center; gap: 8px; }
.nxd-reply__author { font-size: 12px; font-weight: 600; color: #1b1a19; }
.nxd-reply__account { font-size: 10.5px; color: #57606a; }
.nxd-reply__time { font-size: 10.5px; color: #8a8f98; }
.nxd-reply__text { font-size: 12.5px; line-height: 1.45; color: #24292f; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
.nxd-reply__actions { display: flex; gap: 2px; align-self: flex-start; }
.nxd-reply-action { background: transparent; border: none; width: 24px; height: 24px; border-radius: 5px; color: #57606a;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nxd-reply-action:hover { background: #eef1f5; color: #0f6cbd; }
.nxd-reply-action--danger:hover { background: #fdf0f0; color: #d13438; }

/* Reply composer */
.nxd-reply-composer { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0 42px; }
.nxd-reply-composer__input { position: relative; flex: 1; }
.nxd-reply-composer__actions { display: flex; flex-direction: column; gap: 4px; }
.nxd-reply-send, .nxd-reply-cancel { width: 30px; height: 30px; border-radius: 6px; border: none; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; }
.nxd-reply-send { background: #0f6cbd; color: #fff; }
.nxd-reply-send:hover:not(:disabled) { background: #0c5aa0; }
.nxd-reply-send:disabled { opacity: 0.45; cursor: not-allowed; }
.nxd-reply-cancel { background: #eef1f5; color: #57606a; }
.nxd-reply-cancel:hover { background: #e0e4e9; }

/* Suggestions dropdown (@mentions) */
.nxd-suggestions { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e0e3e8;
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.14); max-height: 200px; overflow-y: auto; z-index: 30; padding: 4px; }
.nxd-suggestion { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: #24292f; }
.nxd-suggestion:hover, .nxd-suggestion--sel { background: #eaf3fc; }
.nxd-suggestion__avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.nxd-suggestion__meta { display: flex; flex-direction: column; min-width: 0; }
.nxd-suggestion__name { line-height: 1.25; }
.nxd-suggestion__account { font-size: 11px; color: #8a8f98; line-height: 1.2; }

/* Empty state */
.nxd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; gap: 4px; }
.nxd-empty__title { font-size: 15px; font-weight: 700; color: #1b1a19; margin: 8px 0 0; }
.nxd-empty__subtitle { font-size: 12.5px; color: #8a8f98; margin: 0; }
.nxd-empty__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; background: #0f6cbd; color: #fff; border: none;
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.nxd-empty__cta:hover { background: #0c5aa0; }

/* Skeletons */
.nxd-skeletons { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.nxd-skel-card { background: #fff; border: 1px solid #e6e9ee; border-radius: 10px; padding: 12px 14px; }
.nxd-skel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nxd-skel-avatar { width: 32px; height: 32px; border-radius: 50%; }
.nxd-skel-meta { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nxd-skel-line { border-radius: 4px; background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%); background-size: 400% 100%; animation: nxd-shimmer 1.4s ease infinite; height: 10px; }
.nxd-skel-avatar { background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%); background-size: 400% 100%; animation: nxd-shimmer 1.4s ease infinite; }
.nxd-skel-name { width: 40%; }
.nxd-skel-time { width: 25%; height: 8px; }
.nxd-skel-full { width: 100%; margin-bottom: 6px; }
.nxd-skel-partial { width: 70%; }
@keyframes nxd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Composer */
.nxd-composer { flex-shrink: 0; border-top: 1px solid #e6e9ee; background: #faf9f8; padding: 12px 16px 14px; }
.nxd-composer__errors { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.nxd-error-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a4262c; background: #fdf0f0; border: 1px solid #f3d0d0; border-radius: 6px; padding: 6px 10px; }
.nxd-attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nxd-attach-chip { display: inline-flex; align-items: center; gap: 5px; background: #eef4fb; border: 1px solid #d0e0f2; border-radius: 14px; padding: 3px 8px 3px 10px; font-size: 11.5px; color: #0f548c; max-width: 200px; }
.nxd-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxd-attach-remove { background: transparent; border: none; color: #57606a; cursor: pointer; display: inline-flex; padding: 0; }
.nxd-attach-remove:hover { color: #d13438; }
.nxd-composer__label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #0f6cbd; margin-bottom: 6px; }
.nxd-composer__row { display: flex; gap: 8px; align-items: flex-end; }
.nxd-composer__input { position: relative; flex: 1; }
.nxd-composer__actions { display: flex; gap: 4px; align-items: center; }
.nxd-composer__btn { width: 38px; height: 38px; border-radius: 8px; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nxd-attach-btn { background: #eef1f5; color: #57606a; position: relative; overflow: hidden; }
.nxd-attach-btn:hover { background: #e0e4e9; color: #0f6cbd; }
.nxd-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.nxd-send { background: #0f6cbd; color: #fff; }
.nxd-send:hover:not(:disabled) { background: #0c5aa0; }
.nxd-send--disabled, .nxd-send:disabled { opacity: 0.45; cursor: not-allowed; }
.nxd-send__spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: nxd-spin .7s linear infinite; }
@keyframes nxd-spin { to { transform: rotate(360deg); } }
.nxd-textarea { width: 100%; }
.nxd-textarea .k-input, .nxd-textarea.k-textarea { border-radius: 8px; }

/* Dark mode */
.nx-app--dark .nx-create-drawer.nxd-drawer { background: #12161c; }
.nx-app--dark .nxd-search__input { background: #1b2129; border-color: #2b3440; color: #F7F7F7; }
.nx-app--dark .nxd-thread { background: #1b2129; border-color: #2b3440; }
.nx-app--dark .nxd-unread .nxd-thread { background: #16283a; }
.nx-app--dark .nxd-thread__author, .nx-app--dark .nxd-reply__author, .nx-app--dark .nxd-thread__body, .nx-app--dark .nxd-reply__text { color: #F7F7F7; }
.nx-app--dark .nxd-thread__account, .nx-app--dark .nxd-reply__account, .nx-app--dark .nxd-suggestion__account { color: #ADADAD; }
.nx-app--dark .nxd-time-label { background: #2b3440; color: #ADADAD; }
.nx-app--dark .nxd-composer { background: #12161c; border-color: #2b3440; }
.nx-app--dark .nxd-more-menu, .nx-app--dark .nxd-suggestions, .nx-app--dark .nxd-hover-toolbar { background: #1b2129; border-color: #2b3440; }
.nx-app--dark .nxd-more-item, .nx-app--dark .nxd-suggestion { color: #F7F7F7; }
.nx-app--dark .nxd-more-item:hover, .nx-app--dark .nxd-suggestion:hover, .nx-app--dark .nxd-suggestion--sel { background: #223040; }
.nx-app--dark .nxd-skel-card { background: #1b2129; border-color: #2b3440; }

/* Discussion buttons: re-scope under .nx-app to beat the global
   `.nx-app button { background:none }` reset (specificity fix). */
.nx-app .nxd-icon-btn { background: rgba(255,255,255,0.15); color: #fff; }
.nx-app .nxd-icon-btn:hover { background: rgba(255,255,255,0.30); }
.nx-app .nxd-resolve-btn { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.30); height: 30px; padding: 0 14px;
  font-size: 13px; font-weight: 600; border-radius: 6px; box-shadow: none; }
.nx-app .nxd-resolve-btn:hover { background: rgba(255,255,255,0.30); color: #fff; border-color: rgba(255,255,255,0.45); }
.nx-app .nxd-empty__cta { background: #0f6cbd; color: #fff; }
.nx-app .nxd-empty__cta:hover { background: #0c5aa0; }
.nx-app .nxd-send { background: #0f6cbd; color: #fff; }
.nx-app .nxd-send:hover:not(:disabled) { background: #0c5aa0; }
.nx-app .nxd-attach-btn { background: #eef1f5; color: #57606a; }
.nx-app .nxd-attach-btn:hover { background: #e0e4e9; color: #0f6cbd; }
.nx-app .nxd-edit-save { background: #0f6cbd; color: #fff; }
.nx-app .nxd-edit-save:hover:not(:disabled) { background: #0c5aa0; }
.nx-app .nxd-edit-cancel { background: transparent; color: #57606a; border: 1px solid #d7dbe0; }
.nx-app .nxd-edit-cancel:hover { background: #eef1f5; }
.nx-app .nxd-delete-yes { background: #d13438; color: #fff; }
.nx-app .nxd-delete-yes:hover { background: #b52b2f; }
.nx-app .nxd-delete-no { background: transparent; color: #57606a; border: 1px solid #d7dbe0; }
.nx-app .nxd-delete-no:hover { background: #eef1f5; }
.nx-app .nxd-reply-send { background: #0f6cbd; color: #fff; }
.nx-app .nxd-reply-send:hover:not(:disabled) { background: #0c5aa0; }
.nx-app .nxd-reply-cancel { background: #eef1f5; color: #57606a; }
.nx-app .nxd-reply-cancel:hover { background: #e0e4e9; }
.nx-app .nxd-more-item--danger { color: #d13438; }
.nx-app .nxd-reply-action:hover { background: #eef1f5; color: #0f6cbd; }
.nx-app .nxd-reply-action--danger:hover { background: #fdf0f0; color: #d13438; }
.nx-app .nxd-tb-btn:hover { background: #eef1f5; color: #0f6cbd; }
.nx-app .nxd-send--disabled, .nx-app .nxd-send:disabled,
.nx-app .nxd-edit-save:disabled, .nx-app .nxd-reply-send:disabled { opacity: 0.45; }

/* Textarea inner padding so text does not sit on the border. */
.nx-app .nxd-textarea .k-input-inner,
.nx-app .nxd-textarea textarea { padding: 8px 12px; line-height: 1.45; }
.nx-app .nxd-textarea .k-textarea, .nx-app .nxd-textarea.k-textarea { padding: 0; }

/* Discussions grid cell (Issues) — count badge + expandable AI summary. */
.nx-app .nxd-cell { padding: 4px 0; width: 100%; white-space: normal; word-break: break-word; overflow-wrap: break-word; }
.nx-app .nxd-cell__header { display: flex; align-items: flex-start; gap: 6px; }
.nx-app .nxd-cell__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px;
  padding: 2px 6px; border: none; border-radius: 4px; background: #e8f4fd; color: #036ac4; font-weight: 600; font-size: 13px;
  cursor: pointer; flex-shrink: 0; transition: background-color .15s ease; }
.nx-app .nxd-cell__count:hover { background: #cce7f7; }
.nx-app .nxd-cell__count:focus-visible { outline: 2px solid #036ac4; outline-offset: 2px; }
.nx-app .nxd-cell__preview { color: #424242; font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nxd-cell__summary { margin-top: 6px; padding: 8px; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 4px;
  font-size: 12px; line-height: 1.5; color: #333; white-space: normal; word-break: break-word; overflow-wrap: break-word;
  min-width: 260px; box-sizing: border-box;
  max-height: 300px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.nx-app .nxd-cell__empty { color: #999; font-size: 13px; }
.nx-app .nxd-cell__date { color: #616161; font-size: 11px; font-weight: 500; font-style: italic; }

.nx-app--dark .nxd-cell__count { background: #10344f; color: #66b6ff; }
.nx-app--dark .nxd-cell__count:hover { background: #16416a; }
.nx-app--dark .nxd-cell__preview { color: #a9b4c0; }
.nx-app--dark .nxd-cell__summary { background: #12161c; border-color: #2b3440; color: #cbd5e1; }
.nx-app--dark .nxd-cell__date { color: #ADADAD; }

/* ── Help anchor wrapper (relative position for popover) ── */
.nx-help-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Active state on the ? button when popover is open */
.topbar__action--active {
  background: var(--nx-surface-hover, rgba(0,0,0,.08));
  color: var(--nx-accent, #0078d4);
}

/* ── Backdrop — transparent click-away layer ── */
.nx-help-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1099;
  cursor: default;
}

/* ── Help popover card ── */
.nx-help-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1100;
  width: 260px;
  background: var(--nx-bg, #ffffff);
  border: 1px solid var(--nx-border, #e0e0e0);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  padding: 0;
  overflow: hidden;
  animation: nx-pop-in .12s ease-out;
}
@keyframes nx-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Brand row at top of popover */
.nx-help-pop__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.nx-help-pop__logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--nx-accent, #0078d4);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nx-help-pop__brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nx-help-pop__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-text, #242424);
  line-height: 1.2;
}
.nx-help-pop__tagline {
  font-size: 11px;
  color: var(--nx-text-secondary, #616161);
  line-height: 1.3;
}

/* Version row */
.nx-help-pop__ver-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
}
.nx-help-pop__ver-label {
  font-size: 12px;
  color: var(--nx-text-secondary, #616161);
}
.nx-help-pop__ver-val {
  font-size: 11px;
  font-family: Consolas, "Courier New", monospace;
  color: var(--nx-text-secondary, #616161);
  background: var(--nx-surface-soft, #f5f5f5);
  padding: 2px 6px;
  border-radius: 4px;
}

.nx-help-pop__divider {
  height: 1px;
  background: var(--nx-border, #e0e0e0);
  margin: 0;
}

/* Link / button rows */
.nx-help-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--nx-text, #242424);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background .12s;
}
.nx-help-pop__item:hover {
  background: var(--nx-surface-hover, rgba(0,0,0,.04));
  color: var(--nx-accent, #0078d4);
}
.nx-help-pop__item svg {
  flex-shrink: 0;
  opacity: .65;
}

/* Copyright footer strip */
.nx-help-pop__footer {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--nx-text-tertiary, #9e9e9e);
  border-top: 1px solid var(--nx-border, #e0e0e0);
  text-align: center;
}

/* ── Option 3: About Nexus — Settings panel section ── */
.nx-about-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nx-about-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 12px;
}
.nx-about-brand__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--nx-accent, #0078d4);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nx-about-brand__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nx-about-brand__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text, #242424);
}
.nx-about-brand__tagline {
  font-size: 12px;
  color: var(--nx-text-secondary, #616161);
}

.nx-about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--nx-border-subtle, #f0f0f0);
}
.nx-about-row__label {
  font-size: 13px;
  color: var(--nx-text-secondary, #616161);
}
.nx-about-row__value {
  font-size: 13px;
  color: var(--nx-text, #242424);
  font-weight: 500;
}
.nx-about-row__value--mono {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  background: var(--nx-surface-soft, #f5f5f5);
  padding: 2px 7px;
  border-radius: 4px;
}

.nx-about-divider {
  height: 1px;
  background: var(--nx-border, #e0e0e0);
  margin: 10px 0;
}

.nx-about-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
  color: var(--nx-text, #242424);
  text-decoration: none;
  border-bottom: 1px solid var(--nx-border-subtle, #f0f0f0);
  transition: color .12s;
}
.nx-about-link:hover {
  color: var(--nx-accent, #0078d4);
}
.nx-about-link svg { flex-shrink: 0; opacity: .65; }
.nx-about-link__ext {
  margin-left: auto;
  opacity: .4;
}

.nx-about-copy {
  font-size: 11px;
  color: var(--nx-text-tertiary, #9e9e9e);
  text-align: center;
  padding: 12px 0 4px;
  margin: 0;
}

/* ── Dark mode overrides ── */
.nx-dark .nx-help-pop,
[data-theme="dark"] .nx-help-pop {
  background: #2c2c2c;
  border-color: #3d3d3d;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.nx-dark .nx-help-pop__ver-val,
[data-theme="dark"] .nx-help-pop__ver-val {
  background: #383838;
}
.nx-dark .nx-help-pop__divider,
[data-theme="dark"] .nx-help-pop__divider {
  background: #3d3d3d;
}
.nx-dark .nx-help-pop__footer,
[data-theme="dark"] .nx-help-pop__footer {
  border-color: #3d3d3d;
}
.nx-dark .nx-about-row__value--mono,
[data-theme="dark"] .nx-about-row__value--mono {
  background: #383838;
}

/* ============================================================
   v12.1 — Quick Links two-line items (title + schedule sub)
   ============================================================ */

/* Body wrapper inside each ql-item — stacks title + subtitle */
.nx-ql-item__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.nx-ql-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text, #242424);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.nx-ql-item__sub {
  font-size: 11px;
  color: var(--nx-text-secondary, #616161);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Slightly taller ql-item to accommodate two lines */
.nx-ql-item {
  align-items: center;
}

/* Dark mode */
.nx-dark .nx-ql-item__title,
[data-theme="dark"] .nx-ql-item__title {
  color: var(--nx-text-on-dark, #e0e0e0);
}
.nx-dark .nx-ql-item__sub,
[data-theme="dark"] .nx-ql-item__sub {
  color: var(--nx-text-secondary-dark, #9e9e9e);
}

/* ============================================================
   v12.2 — Quick Links: Rich card redesign
   ============================================================ */

/* Strip container: stacked — label row then card row */
.nx-ql-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0 4px;
  background: none;
  border: none;
  border-radius: 0;
}

/* Section header row */
.nx-ql-strip__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--nx-text-secondary, #616161);
  padding: 0 2px 0;
  display: block;
}

/* Card row */
.nx-ql-strip__cards {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Each ql-item is now a card */
.nx-ql-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 14px;
  background: var(--nx-surface, #ffffff);
  border: 1px solid var(--nx-border, #e0e0e0);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
  min-width: 0;
}
.nx-ql-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ql-accent, #0078d4);
  opacity: 0;
  transition: opacity .15s ease;
}
.nx-ql-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  border-color: var(--ql-accent, #0078d4);
}
.nx-ql-item:hover::before { opacity: 1; }

/* Per-item accent colors */
.nx-ql-item:nth-child(1) { --ql-accent: #0078d4; --ql-accent-bg: #e8f3fb; }
.nx-ql-item:nth-child(2) { --ql-accent: #00b294; --ql-accent-bg: #e0f5f1; }
.nx-ql-item:nth-child(3) { --ql-accent: #8764b8; --ql-accent-bg: #ede8f5; }
.nx-ql-item:nth-child(4) { --ql-accent: #ca5010; --ql-accent-bg: #fbeee8; }
.nx-ql-item:nth-child(5) { --ql-accent: #4f6bed; --ql-accent-bg: #eaedfc; }

/* Icon badge — colored circle */
.nx-ql-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ql-accent-bg, #e8f3fb);
  color: var(--ql-accent, #0078d4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px;
  box-sizing: border-box;
  transition: background .15s, color .15s;
}
.nx-ql-item:hover .nx-ql-item__icon {
  background: var(--ql-accent, #0078d4);
  color: #fff;
}

/* Text body */
.nx-ql-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.nx-ql-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text, #242424);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.nx-ql-item__sub {
  font-size: 11px;
  color: var(--nx-text-secondary, #616161);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Arrow indicator on hover */
.nx-ql-item::after {
  content: '→';
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 13px;
  color: var(--ql-accent, #0078d4);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}
.nx-ql-item:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Dark mode */
.nx-dark .nx-ql-item,
[data-theme="dark"] .nx-ql-item {
  background: #2a2a2a;
  border-color: #3a3a3a;
}
.nx-dark .nx-ql-item:nth-child(1),
[data-theme="dark"] .nx-ql-item:nth-child(1) { --ql-accent-bg: #0e2a3d; }
.nx-dark .nx-ql-item:nth-child(2),
[data-theme="dark"] .nx-ql-item:nth-child(2) { --ql-accent-bg: #0d2e28; }
.nx-dark .nx-ql-item:nth-child(3),
[data-theme="dark"] .nx-ql-item:nth-child(3) { --ql-accent-bg: #241a35; }
.nx-dark .nx-ql-item:nth-child(4),
[data-theme="dark"] .nx-ql-item:nth-child(4) { --ql-accent-bg: #321408; }
.nx-dark .nx-ql-item:nth-child(5),
[data-theme="dark"] .nx-ql-item:nth-child(5) { --ql-accent-bg: #151d3d; }

/* ============================================================
   v12.3 — Quick Links card fix: override height/overflow clipping
   High-specificity rules to beat .nx-app .nx-ql-strip
   ============================================================ */

.nx-app .nx-ql-strip {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 0 4px !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

.nx-app .nx-ql-strip__label {
  flex-shrink: unset !important;
  display: block !important;
  height: auto !important;
  padding: 0 2px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-secondary, #616161) !important;
  background: none !important;
  border: none !important;
  letter-spacing: normal;
  text-transform: none !important;
  white-space: nowrap !important;
}

.nx-ql-strip__cards {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.nx-app .nx-ql-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 80px !important;
  padding: 14px 16px !important;
  background: var(--nx-surface, #ffffff) !important;
  border: 1px solid var(--nx-border, #e0e0e0) !important;
  border-right: 1px solid var(--nx-border, #e0e0e0) !important;
  border-radius: 10px !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
  position: relative !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.nx-app .nx-ql-item:last-of-type {
  border-right: 1px solid var(--nx-border, #e0e0e0) !important;
}
.nx-app .nx-ql-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06) !important;
  border-color: var(--ql-accent, #0078d4) !important;
  background: var(--nx-surface, #ffffff) !important;
}

/* Icon badge */
.nx-app .nx-ql-item .nx-ql-item__icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  background: var(--ql-accent-bg, #e8f3fb) !important;
  color: var(--ql-accent, #0078d4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  transition: background .15s, color .15s !important;
}
.nx-app .nx-ql-item:hover .nx-ql-item__icon {
  background: var(--ql-accent, #0078d4) !important;
  color: #fff !important;
}

/* ============================================================
   v12.4 — Responsive font scale + mobile layout
   ============================================================ */

/* ── Base font enforcement: Segoe UI, min 14px body ── */
.nx-app {
  font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px;
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   RESPONSIVE FONT SCALE — breakpoint-based
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ≥1920px */
@media (min-width: 1920px) {
  .nx-app dt, .nx-app .nx-field__label, .nx-app .field-label,
  .nx-app .nx-dl dt, .nx-app .nx-kv__key { font-size: 13px !important; }

  .nx-app dd, .nx-app .nx-field__value, .nx-app .field-value,
  .nx-app .nx-dl dd, .nx-app .nx-kv__val { font-size: 14px !important; }

  .nx-app .nx-proj-tab, .nx-app .nx-tab, .nx-app [role="tab"],
  .nx-app .nav-tab, .nx-app .tab-label, .nx-app .pd-tab { font-size: 15px !important; }

  .nx-app .nx-hero__title, .nx-app .page-title, .nx-app .project-title,
  .nx-app .nx-project-hero__name, .nx-app h1.nx-title,
  .nx-app .page-hero__title { font-size: 26px !important; }

  .nx-app .k-grid td, .nx-app .nx-grid td, .nx-app .nx-grid-cell,
  .nx-app table.tbl td { font-size: 13px !important; }
  .nx-app .k-grid th, .nx-app .nx-grid th, .nx-app .nx-grid-header,
  .nx-app table.tbl thead th { font-size: 13px !important; }

  .nx-app .nx-pagination, .nx-app .pagination, .nx-app .k-pager-info,
  .nx-app .k-pager-sizes, .nx-app .grid-footer,
  .nx-app .grid-footer__info, .nx-app .grid-footer__page-size { font-size: 12px !important; }
}

/* ≥1440px (default range) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .nx-app dt, .nx-app .nx-field__label, .nx-app .field-label,
  .nx-app .nx-dl dt, .nx-app .nx-kv__key { font-size: 13px !important; }

  .nx-app dd, .nx-app .nx-field__value, .nx-app .field-value,
  .nx-app .nx-dl dd, .nx-app .nx-kv__val { font-size: 13px !important; }

  .nx-app .nx-proj-tab, .nx-app .nx-tab, .nx-app [role="tab"],
  .nx-app .nav-tab, .nx-app .tab-label, .nx-app .pd-tab { font-size: 14px !important; }

  .nx-app .nx-hero__title, .nx-app .page-title, .nx-app .project-title,
  .nx-app .nx-project-hero__name, .nx-app h1.nx-title,
  .nx-app .page-hero__title { font-size: 24px !important; }

  .nx-app .k-grid td, .nx-app .nx-grid td, .nx-app .nx-grid-cell,
  .nx-app table.tbl td { font-size: 12px !important; }
  .nx-app .k-grid th, .nx-app .nx-grid th, .nx-app .nx-grid-header,
  .nx-app table.tbl thead th { font-size: 12px !important; }

  .nx-app .nx-pagination, .nx-app .pagination, .nx-app .k-pager-info,
  .nx-app .k-pager-sizes, .nx-app .grid-footer,
  .nx-app .grid-footer__info, .nx-app .grid-footer__page-size { font-size: 11px !important; }
}

/* ~1280px */
@media (min-width: 1101px) and (max-width: 1439px) {
  .nx-app dt, .nx-app .nx-field__label, .nx-app .field-label,
  .nx-app .nx-dl dt, .nx-app .nx-kv__key { font-size: 11px !important; }

  .nx-app dd, .nx-app .nx-field__value, .nx-app .field-value,
  .nx-app .nx-dl dd, .nx-app .nx-kv__val { font-size: 13px !important; }

  .nx-app .nx-proj-tab, .nx-app .nx-tab, .nx-app [role="tab"],
  .nx-app .nav-tab, .nx-app .tab-label, .nx-app .pd-tab { font-size: 13px !important; }

  .nx-app .nx-hero__title, .nx-app .page-title, .nx-app .project-title,
  .nx-app .nx-project-hero__name, .nx-app h1.nx-title,
  .nx-app .page-hero__title { font-size: 20px !important; }

  .nx-app .k-grid td, .nx-app .nx-grid td, .nx-app .nx-grid-cell,
  .nx-app table.tbl td { font-size: 11px !important; }
  .nx-app .k-grid th, .nx-app .nx-grid th, .nx-app .nx-grid-header,
  .nx-app table.tbl thead th { font-size: 12px !important; }

  .nx-app .nx-pagination, .nx-app .pagination, .nx-app .k-pager-info,
  .nx-app .k-pager-sizes, .nx-app .grid-footer,
  .nx-app .grid-footer__info, .nx-app .grid-footer__page-size { font-size: 11px !important; }
}

/* ≤1100px */
@media (max-width: 1100px) {
  .nx-app dt, .nx-app .nx-field__label, .nx-app .field-label,
  .nx-app .nx-dl dt, .nx-app .nx-kv__key { font-size: 11px !important; }

  .nx-app dd, .nx-app .nx-field__value, .nx-app .field-value,
  .nx-app .nx-dl dd, .nx-app .nx-kv__val { font-size: 11px !important; }

  .nx-app .nx-proj-tab, .nx-app .nx-tab, .nx-app [role="tab"],
  .nx-app .nav-tab, .nx-app .tab-label, .nx-app .pd-tab { font-size: 12px !important; }

  .nx-app .nx-hero__title, .nx-app .page-title, .nx-app .project-title,
  .nx-app .nx-project-hero__name, .nx-app h1.nx-title,
  .nx-app .page-hero__title { font-size: 18px !important; }

  .nx-app .k-grid td, .nx-app .nx-grid td, .nx-app .nx-grid-cell,
  .nx-app table.tbl td { font-size: 11px !important; }
  .nx-app .k-grid th, .nx-app .nx-grid th, .nx-app .nx-grid-header,
  .nx-app table.tbl thead th { font-size: 11px !important; }

  .nx-app .nx-pagination, .nx-app .pagination, .nx-app .k-pager-info,
  .nx-app .k-pager-sizes, .nx-app .grid-footer,
  .nx-app .grid-footer__info, .nx-app .grid-footer__page-size { font-size: 10px !important; }
}

/* ≤900px */
@media (max-width: 900px) {
  .nx-app dt, .nx-app .nx-field__label, .nx-app .field-label,
  .nx-app .nx-dl dt, .nx-app .nx-kv__key { font-size: 10px !important; }

  .nx-app dd, .nx-app .nx-field__value, .nx-app .field-value,
  .nx-app .nx-dl dd, .nx-app .nx-kv__val { font-size: 11px !important; }

  .nx-app .nx-proj-tab, .nx-app .nx-tab, .nx-app [role="tab"],
  .nx-app .nav-tab, .nx-app .tab-label, .nx-app .pd-tab { font-size: 11.5px !important; }

  .nx-app .nx-hero__title, .nx-app .page-title, .nx-app .project-title,
  .nx-app .nx-project-hero__name, .nx-app h1.nx-title,
  .nx-app .page-hero__title { font-size: 16px !important; }

  .nx-app .k-grid td, .nx-app .nx-grid td, .nx-app .nx-grid-cell,
  .nx-app table.tbl td { font-size: 11px !important; }
  .nx-app .k-grid th, .nx-app .nx-grid th, .nx-app .nx-grid-header,
  .nx-app table.tbl thead th { font-size: 11px !important; }

  .nx-app .nx-pagination, .nx-app .pagination, .nx-app .k-pager-info,
  .nx-app .k-pager-sizes, .nx-app .grid-footer,
  .nx-app .grid-footer__info, .nx-app .grid-footer__page-size { font-size: 10px !important; }
}

/* ≤700px — mobile */
@media (max-width: 700px) {
  .nx-app dt, .nx-app .nx-field__label, .nx-app .field-label,
  .nx-app .nx-dl dt, .nx-app .nx-kv__key { font-size: 10px !important; }

  .nx-app dd, .nx-app .nx-field__value, .nx-app .field-value,
  .nx-app .nx-dl dd, .nx-app .nx-kv__val { font-size: 11px !important; }

  .nx-app .nx-proj-tab, .nx-app .nx-tab, .nx-app [role="tab"],
  .nx-app .nav-tab, .nx-app .tab-label, .nx-app .pd-tab { font-size: 11px !important; }

  .nx-app .nx-hero__title, .nx-app .page-title, .nx-app .project-title,
  .nx-app .nx-project-hero__name, .nx-app h1.nx-title,
  .nx-app .page-hero__title { font-size: 14px !important; }

  .nx-app .k-grid td, .nx-app .nx-grid td, .nx-app .nx-grid-cell,
  .nx-app table.tbl td { font-size: 11px !important; }
  .nx-app .k-grid th, .nx-app .nx-grid th, .nx-app .nx-grid-header,
  .nx-app table.tbl thead th { font-size: 11px !important; }

  .nx-app .nx-pagination, .nx-app .pagination, .nx-app .k-pager-info,
  .nx-app .k-pager-sizes, .nx-app .grid-footer,
  .nx-app .grid-footer__info, .nx-app .grid-footer__page-size { font-size: 10px !important; }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   MOBILE LAYOUT (≤768px)
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* Hide "Go Offline" toggle and "Search Projects" on mobile — desktop-only features */
@media (max-width: 768px) {
  .nx-app .sidebar__offline,
  .nx-app .sidebar__search-wrap {
    display: none !important;
  }

  /* Main content fills remaining width */
  .nx-app .nx-body {
    flex-direction: column !important;
  }
  .nx-app .page-scroll {
    padding: 8px !important;
  }

  /* KPI cards stack vertically on mobile */
  .nx-app .nx-home__grid {
    grid-template-columns: 1fr !important;
  }
  .nx-app .nx-home-card {
    min-height: unset !important;
  }

  /* Quick links card row stacks on mobile */
  .nx-ql-strip__cards {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .nx-app .nx-ql-item {
    min-height: 60px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Touch targets: minimum 44x44px */
  .nx-app button,
  .nx-app .topbar__action,
  .nx-app .sidebar__item {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Topbar: hide breadcrumb on very small screens */
  .nx-app .breadcrumb {
    display: none !important;
  }

  /* Topbar brand shrinks */
  .nx-app .topbar__brand {
    font-size: 14px !important;
  }

  /* Project detail: tabs wrap on mobile */
  .nx-app .nx-proj-tabs {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}

/* ≤480px — small phones */
@media (max-width: 480px) {
  .nx-app .topbar {
    padding: 0 8px !important;
  }
  .nx-app .topbar__view-toggle {
    display: none !important;
  }
  .nx-app .page-scroll {
    padding: 4px !important;
  }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   DESKTOP-ONLY: ensure Go Offline + Search visible ≥769px
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
@media (min-width: 769px) {
  .nx-app .sidebar__offline,
  .nx-app .sidebar__search-wrap {
    display: flex !important;
  }
}

/* ============================================================
   v12.5 — Revert: Go Offline + Search Projects visible on ALL screen sizes
   Both are required for mobile offline functionality
   ============================================================ */
@media (max-width: 768px) {
  .nx-app .sidebar__offline,
  .nx-app .sidebar__search-wrap {
    display: flex !important;
  }
}

/* ─── v12.6 KPI summary bar (image-matched horizontal strip) ─────────────── */
.nx-home-greeting {
    display: flex;
    align-items: center;
    padding: 16px 24px 12px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}
.nx-home-greeting__text { flex: 1; }
.nx-home-greeting__title { font-size: 18px; font-weight: 600; color: #242424; margin: 0 0 2px; }
.nx-home-greeting__sub   { font-size: 13px; color: #616161; margin: 0; }

.nx-home-kpi-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}
.nx-home-kpi-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px 14px;
    border-right: 1px solid #e5e7eb;
    cursor: default;
    transition: background 0.15s;
}
.nx-home-kpi-bar__item:last-child { border-right: none; }
.nx-home-kpi-bar__item--first { background: #f0f4ff; }
.nx-home-kpi-bar__item:hover  { background: #f5f7ff; }
.nx-home-kpi-bar__item--first:hover { background: #e8eeff; }

.nx-home-kpi-bar__num {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-family: "Segoe UI", sans-serif;
    margin-bottom: 5px;
}
.nx-home-kpi-bar__label {
    font-size: 11px;
    font-weight: 500;
    color: #616161;
    text-align: center;
    letter-spacing: normal;
    font-family: "Segoe UI", sans-serif;
}

/* Per-item accent colors */
.nx-home-kpi-bar__item--orange .nx-home-kpi-bar__num { color: #d83b01; }
.nx-home-kpi-bar__item--blue   .nx-home-kpi-bar__num { color: #0078d4; }
.nx-home-kpi-bar__item--purple .nx-home-kpi-bar__num { color: #5c2e91; }
.nx-home-kpi-bar__item--pink   .nx-home-kpi-bar__num { color: #bf0077; }
.nx-home-kpi-bar__item--teal   .nx-home-kpi-bar__num { color: #00666d; }
.nx-home-kpi-bar__item--green  .nx-home-kpi-bar__num { color: #0e700e; }
.nx-home-kpi-bar__item--rose   .nx-home-kpi-bar__num { color: #4338ca; }

/* Responsive: collapse to 3-col on smaller screens */
@media (max-width: 900px) {
    .nx-home-kpi-bar { grid-template-columns: repeat(3, 1fr); }
    .nx-home-kpi-bar__item:nth-child(3) { border-right: none; }
    .nx-home-kpi-bar__item:nth-child(3) ~ .nx-home-kpi-bar__item { border-top: 1px solid #e5e7eb; }
}
@media (max-width: 600px) {
    .nx-home-kpi-bar { grid-template-columns: repeat(2, 1fr); }
    .nx-home-kpi-bar__num { font-size: 24px; }
}

/* ─── v12.7 KPI bar — rounded card, aligned with grid width ──────────────── */
.nx-home-kpi-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #fff;
    border: 1px solid #e1e4ea;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
    overflow: hidden;
    margin: 0 0 20px;
    /* match the card grid max-width / padding */
    width: 100%;
}

/* remove the bottom-border override we set in v12.6 */
.nx-home .nx-home-kpi-bar { border-bottom: none; }

.nx-home-kpi-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px 16px;
    border-right: 1px solid #e5e7eb;
    cursor: default;
    transition: background 0.15s;
    position: relative;
}
.nx-home-kpi-bar__item:last-child { border-right: none; }

/* rounded corners on outermost items */
.nx-home-kpi-bar__item:first-child { border-radius: 12px 0 0 12px; }
.nx-home-kpi-bar__item:last-child  { border-radius: 0 12px 12px 0; }

.nx-home-kpi-bar__item--first { background: #eef3fb; }
.nx-home-kpi-bar__item:hover  { background: #f5f8ff; }
.nx-home-kpi-bar__item--first:hover { background: #e4ecf9; }

.nx-home-kpi-bar__num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    font-family: "Segoe UI", sans-serif;
    margin-bottom: 6px;
}
.nx-home-kpi-bar__label {
    font-size: 11px;
    font-weight: 500;
    color: #707070;
    text-align: center;
    font-family: "Segoe UI", sans-serif;
}

@media (max-width: 900px) {
    .nx-home-kpi-bar {
        grid-template-columns: repeat(3, 1fr);
        border-radius: 10px;
    }
    .nx-home-kpi-bar__item:nth-child(3) { border-right: none; border-radius: 0; }
    .nx-home-kpi-bar__item:nth-child(4) { border-top: 1px solid #e5e7eb; }
    .nx-home-kpi-bar__item:nth-child(5) { border-top: 1px solid #e5e7eb; }
    .nx-home-kpi-bar__item:nth-child(6) { border-top: 1px solid #e5e7eb; border-right: none; }
    .nx-home-kpi-bar__item:first-child  { border-radius: 10px 0 0 0; }
    .nx-home-kpi-bar__item:nth-child(3) { border-radius: 0 10px 0 0; }
    .nx-home-kpi-bar__item:nth-child(4) { border-radius: 0 0 0 10px; }
    .nx-home-kpi-bar__item:last-child   { border-radius: 0 0 10px 0; }
}
@media (max-width: 600px) {
    .nx-home-kpi-bar { grid-template-columns: repeat(2, 1fr); border-radius: 8px; }
    .nx-home-kpi-bar__num { font-size: 26px; }
}

/* ─── v12.8 KPI bar — remove all internal column dividers ────────────────── */
.nx-home-kpi-bar__item,
.nx-home-kpi-bar__item:last-child {
    border-right: none !important;
}

/* ─── v12.9 KPI bar — remove Issues first-item highlight; fix alignment ───── */

/* Remove the different background on the first (Issues) item */
.nx-home-kpi-bar__item--first {
    background: transparent !important;
}
.nx-home-kpi-bar__item--first:hover {
    background: #f5f8ff !important;
}

/* Greeting: remove extra side padding so it matches the grid width exactly */
.nx-home-greeting {
    padding: 16px 0 12px !important;
    background: transparent !important;
    border-bottom: none !important;
}

/* KPI bar: no extra horizontal margin — stay flush with grid */
.nx-home-kpi-bar {
    margin: 0 0 20px !important;
}

/* ─── v13.0 KPI bar — reduce gap to cards below ──────────────────────────── */
.nx-home-kpi-bar {
    margin: 0 0 8px !important;
}

/* ─── v13.1 KPI bar — match greeting/grid 24px side padding ──────────────── */
.nx-app .nx-home-kpi-bar {
    margin: 0 24px 8px !important;
    width: auto !important;
}

/* ─── v13.2 Greeting — restore 24px side padding to match KPI bar / grid ─── */
.nx-app .nx-home-greeting {
    padding: 16px 24px 12px !important;
    background: transparent !important;
    border-bottom: none !important;
}

/* ─── v13.3 Card top accent — use border-top to follow rounded corners ────── */

/* Remove the pseudo-element approach */
.nx-app .nx-home-card::before {
    display: none !important;
}

/* Use border-top directly so it curves with the card's border-radius */
.nx-app .nx-home-card {
    border-top: 4px solid transparent;
    overflow: visible;
}
.nx-app .nx-home-card--orange { border-top-color: #c4501c; }
.nx-app .nx-home-card--pink   { border-top-color: #c1226a; }
.nx-app .nx-home-card--purple { border-top-color: #7a3db8; }
.nx-app .nx-home-card--teal   { border-top-color: #0e7490; }
.nx-app .nx-home-card--blue   { border-top-color: #0078d4; }
.nx-app .nx-home-card--green  { border-top-color: #0e700e; }
.nx-app .nx-home-card--rose   { border-top-color: #4338ca; }

/* ─── v13.4 KPI bar — individual mini-cards (matches reference image) ──────── */
.nx-app .nx-home-kpi-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin: 0 24px 8px !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.nx-app .nx-home-kpi-card {
    background: #fff;
    border: 1px solid #e1e4ea;
    border-radius: 8px;
    border-top: 3px solid transparent;
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: default;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.nx-app .nx-home-kpi-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.nx-app .nx-home-kpi-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nx-app .nx-home-kpi-card__icon {
    flex-shrink: 0;
    opacity: 0.85;
}
.nx-app .nx-home-kpi-card__label {
    font-size: 12px;
    font-weight: 500;
    color: #424242;
    font-family: "Segoe UI", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nx-app .nx-home-kpi-card__num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    font-family: "Segoe UI", sans-serif;
}

/* Per-card accent colors — top border + icon + number */
.nx-app .nx-home-kpi-card--orange { border-top-color: #c4501c; }
.nx-app .nx-home-kpi-card--orange .nx-home-kpi-card__icon { color: #c4501c; }
.nx-app .nx-home-kpi-card--orange .nx-home-kpi-card__num  { color: #c4501c; }

.nx-app .nx-home-kpi-card--pink { border-top-color: #c1226a; }
.nx-app .nx-home-kpi-card--pink .nx-home-kpi-card__icon { color: #c1226a; }
.nx-app .nx-home-kpi-card--pink .nx-home-kpi-card__num  { color: #c1226a; }

.nx-app .nx-home-kpi-card--purple { border-top-color: #7a3db8; }
.nx-app .nx-home-kpi-card--purple .nx-home-kpi-card__icon { color: #7a3db8; }
.nx-app .nx-home-kpi-card--purple .nx-home-kpi-card__num  { color: #7a3db8; }

.nx-app .nx-home-kpi-card--teal { border-top-color: #0e7490; }
.nx-app .nx-home-kpi-card--teal .nx-home-kpi-card__icon { color: #0e7490; }
.nx-app .nx-home-kpi-card--teal .nx-home-kpi-card__num  { color: #0e7490; }

.nx-app .nx-home-kpi-card--blue { border-top-color: #0078d4; }
.nx-app .nx-home-kpi-card--blue .nx-home-kpi-card__icon { color: #0078d4; }
.nx-app .nx-home-kpi-card--blue .nx-home-kpi-card__num  { color: #0078d4; }

.nx-app .nx-home-kpi-card--green { border-top-color: #0e700e; }
.nx-app .nx-home-kpi-card--green .nx-home-kpi-card__icon { color: #0e700e; }
.nx-app .nx-home-kpi-card--green .nx-home-kpi-card__num  { color: #0e700e; }

/* Responsive */
@media (max-width: 1100px) {
    .nx-app .nx-home-kpi-bar { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .nx-app .nx-home-kpi-bar { grid-template-columns: repeat(2, 1fr); margin: 0 16px 8px !important; }
}

/* ─── v13.5 Restore KPI bar border + card borders after revert ───────────── */

/* Restore KPI bar as single rounded card */
.nx-app .nx-home-kpi-bar {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    background: #fff !important;
    border: 1px solid #e1e4ea !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
    margin: 0 24px 8px !important;
    width: auto !important;
    gap: 0 !important;
}

/* KPI bar stays on a single line, shrinking with the viewport; only very
   narrow screens fall back to multiple rows. */
@media (max-width: 1280px) {
    .nx-app .nx-home-kpi-bar__num { font-size: 22px; }
}
@media (max-width: 1024px) {
    .nx-app .nx-home-kpi-bar { grid-template-columns: repeat(4, 1fr) !important; }
    .nx-app .nx-home-kpi-bar__item:nth-child(4) { border-right: none; }
}
@media (max-width: 640px) {
    .nx-app .nx-home-kpi-bar { grid-template-columns: repeat(2, 1fr) !important; margin: 0 16px 8px !important; }
}

/* Restore card ::before top accent line */
.nx-app .nx-home-card::before {
    display: block !important;
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 0;
}

/* Restore card border-top to normal (remove the transparent override) */
.nx-app .nx-home-card {
    border-top: 1px solid var(--border-subtle) !important;
    overflow: hidden !important;
}

/* Restore accent colors on ::before */
.nx-app .nx-home-card--orange::before { background: #c4501c !important; }
.nx-app .nx-home-card--pink::before   { background: #c1226a !important; }
.nx-app .nx-home-card--purple::before { background: #7a3db8 !important; }
.nx-app .nx-home-card--teal::before   { background: #0e7490 !important; }
.nx-app .nx-home-card--blue::before   { background: #0078d4 !important; }
.nx-app .nx-home-card--green::before  { background: #0e700e !important; }
.nx-app .nx-home-card--rose::before   { background: #4338ca !important; }

/* ─── v13.6 Quick Links — card-style matching project cards ──────────────── */

/* Outer strip: white card, same border/radius as project cards */
.nx-app .nx-home__grid > .nx-ql-strip,
.nx-app .nx-ql-strip {
    background: #fff !important;
    border: 1px solid var(--border-subtle, #e1e4ea) !important;
    border-radius: 10px !important;
    padding: 16px 20px 18px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    gap: 10px !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Label: sentence case, same style as card section labels */
.nx-app .nx-ql-strip .nx-ql-strip__label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #616161 !important;
    text-transform: none !important;
    letter-spacing: normal;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    display: block !important;
}

/* Cards row: equal-width items, same gap as grid */
.nx-app .nx-ql-strip .nx-ql-strip__cards {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* Individual quick link card: match project card border style */
.nx-app .nx-ql-strip .nx-ql-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    background: #fafafa !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: box-shadow 0.15s, background 0.15s !important;
}
.nx-app .nx-ql-strip .nx-ql-item:hover {
    background: #f0f4ff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
    border-color: #b4d6fa !important;
}

/* Quick link icon badge */
.nx-app .nx-ql-strip .nx-ql-item__icon {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Text */
.nx-app .nx-ql-strip .nx-ql-item__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    display: block !important;
}
.nx-app .nx-ql-strip .nx-ql-item__sub {
    font-size: 11px !important;
    color: #616161 !important;
    display: block !important;
    margin-top: 2px !important;
}

@media (max-width: 1100px) {
    .nx-app .nx-ql-strip .nx-ql-strip__cards { flex-wrap: wrap !important; }
    .nx-app .nx-ql-strip .nx-ql-item { flex: 1 1 calc(33% - 12px) !important; }
}
@media (max-width: 700px) {
    .nx-app .nx-ql-strip .nx-ql-item { flex: 1 1 calc(50% - 12px) !important; }
}

/* ─── v13.7 Quick Links — match reference card style (top-border cards) ───── */

/* Outer strip: no card wrapper — just a transparent row container */
.nx-app .nx-home__grid > .nx-ql-strip,
.nx-app .nx-ql-strip {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 0 !important;
    align-items: stretch !important;
}

/* "Quick links" label */
.nx-app .nx-ql-strip .nx-ql-strip__label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #616161 !important;
    text-transform: none !important;
    letter-spacing: normal;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* Cards row */
.nx-app .nx-ql-strip .nx-ql-strip__cards {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* Each quick link = individual card matching reference image */
.nx-app .nx-ql-strip .nx-ql-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    background: #fff !important;
    border: 1px solid #e1e4ea !important;
    border-top: 3px solid #0078d4 !important;
    border-radius: 8px !important;
    padding: 12px 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: box-shadow 0.15s, background 0.15s !important;
    cursor: pointer !important;
}
.nx-app .nx-ql-strip .nx-ql-item:hover {
    background: #fafafa !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Icon + title row */
.nx-app .nx-ql-strip .nx-ql-item__icon {
    display: none !important; /* hide large icon badge — use inline icon in header */
}
.nx-app .nx-ql-strip .nx-ql-item__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
}
.nx-app .nx-ql-strip .nx-ql-item__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}
.nx-app .nx-ql-strip .nx-ql-item__sub {
    font-size: 11px !important;
    color: #616161 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
}

/* Per-item accent colors via nth-child */
.nx-app .nx-ql-strip .nx-ql-strip__cards .nx-ql-item:nth-child(1) { border-top-color: #0078d4 !important; }
.nx-app .nx-ql-strip .nx-ql-strip__cards .nx-ql-item:nth-child(2) { border-top-color: #0e7490 !important; }
.nx-app .nx-ql-strip .nx-ql-strip__cards .nx-ql-item:nth-child(3) { border-top-color: #7a3db8 !important; }
.nx-app .nx-ql-strip .nx-ql-strip__cards .nx-ql-item:nth-child(4) { border-top-color: #c4501c !important; }
.nx-app .nx-ql-strip .nx-ql-strip__cards .nx-ql-item:nth-child(5) { border-top-color: #5c2e91 !important; }

/* Responsive */
@media (max-width: 1100px) {
    .nx-app .nx-ql-strip .nx-ql-strip__cards { flex-wrap: wrap !important; }
    .nx-app .nx-ql-strip .nx-ql-item { flex: 1 1 calc(33% - 12px) !important; }
}
@media (max-width: 700px) {
    .nx-app .nx-ql-strip .nx-ql-item { flex: 1 1 calc(50% - 12px) !important; }
}

/* ─── v13.8 Dark mode fixes — KPI bar + Quick Links cards ───────────────── */

/* KPI bar container */
.nx-app--dark .nx-home-kpi-bar {
    background: #1A1A1A !important;
    border-color: #3D3D3D !important;
}

/* KPI bar numbers — keep accent colors but lighten for dark bg */
.nx-app--dark .nx-home-kpi-bar__item--orange .nx-home-kpi-bar__num { color: #ffa07a !important; }
.nx-app--dark .nx-home-kpi-bar__item--pink   .nx-home-kpi-bar__num { color: #f48fb1 !important; }
.nx-app--dark .nx-home-kpi-bar__item--purple .nx-home-kpi-bar__num { color: #c5a3ff !important; }
.nx-app--dark .nx-home-kpi-bar__item--teal   .nx-home-kpi-bar__num { color: #4dd4e8 !important; }
.nx-app--dark .nx-home-kpi-bar__item--blue   .nx-home-kpi-bar__num { color: #4da6ff !important; }
.nx-app--dark .nx-home-kpi-bar__item--green  .nx-home-kpi-bar__num { color: #4ade80 !important; }
.nx-app--dark .nx-home-kpi-bar__item--rose   .nx-home-kpi-bar__num { color: #a5b4fc !important; }

/* KPI bar labels */
.nx-app--dark .nx-home-kpi-bar__label {
    color: #ADADAD !important;
}

/* KPI bar dividers (if any) */
.nx-app--dark .nx-home-kpi-bar__item {
    border-color: #3D3D3D !important;
}

/* Quick Links — outer strip (transparent already, but ensure no white bleed) */
.nx-app--dark .nx-ql-strip {
    background: transparent !important;
}

/* Quick Links label */
.nx-app--dark .nx-ql-strip .nx-ql-strip__label {
    color: #ADADAD !important;
}

/* Quick Links — individual cards */
.nx-app--dark .nx-ql-strip .nx-ql-item {
    background: #1A1A1A !important;
    border-color: #3D3D3D !important;
}
.nx-app--dark .nx-ql-strip .nx-ql-item:hover {
    background: #1A1A1A !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Quick Links — title text */
.nx-app--dark .nx-ql-strip .nx-ql-item__title {
    color: #F7F7F7 !important;
}

/* Quick Links — subtitle text */
.nx-app--dark .nx-ql-strip .nx-ql-item__sub {
    color: #ADADAD !important;
}

/* Quick Links — keep colored top borders as-is (accent colors look fine on dark) */
/* nth-child overrides already use !important so top border colors are preserved */

/* ─── v13.9 Dark mode hover fixes — all cards ────────────────────────────── */

/* KPI bar items — override the hardcoded light hover backgrounds */
.nx-app--dark .nx-home-kpi-bar__item:hover,
.nx-app--dark .nx-home-kpi-bar__item--first:hover {
    background: #1A1A1A !important;
}

/* Home cards (Issues, Push, RFI, Onboarding, Approvals, Test Scripts) */
.nx-app--dark .nx-home-card {
    background: #1A1A1A !important;
}
.nx-app--dark .nx-home-card:hover {
    background: #1A1A1A !important;
    border-color: #3D3D3D !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}

/* Quick Links cards — also catch any older hover rule still winning */
.nx-app--dark .nx-ql-item:hover,
.nx-app--dark .nx-app .nx-ql-item:hover,
.nx-app--dark .nx-ql-strip .nx-ql-item:hover,
.nx-app--dark .nx-app .nx-ql-strip .nx-ql-item:hover {
    background: #1A1A1A !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   NEXUS HELP CENTER  —  v14.0
   Page: /nexus/help  (NexusHelpCenter.razor)
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

.nx-help-body {
  padding: 0 32px 64px;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Hero banner ── */
.nx-help-hero {
  background:
    radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.45) 0%, transparent 55%),
    linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%);
  padding: 56px 32px 48px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.nx-help-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.nx-help-hero__inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.nx-help-hero__kicker { font-size: 12px; font-weight: 600; opacity: .85; margin-bottom: 10px; }
.nx-help-hero__title { font-size: clamp(24px, 3vw, 36px); font-weight: 700; margin: 0 0 10px; color: #fff; }
.nx-help-hero__sub { font-size: 15px; opacity: .88; margin: 0 0 28px; }

/* ── Search ── */
.nx-help-search-wrap { max-width: 640px; }
.nx-help-search-shell {
  display: flex; align-items: center;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 10px; padding: 0 14px;
  backdrop-filter: blur(8px);
}
.nx-help-search-shell:focus-within {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}
.nx-help-search-icon { font-size: 17px; margin-right: 8px; opacity: .8; flex-shrink: 0; display: inline-flex; align-items: center; }
.nx-help-search-input {
  flex: 1; background: none; border: none;
  color: #fff; font-size: 15px; font-family: var(--font, "Segoe UI", sans-serif);
  padding: 13px 0; outline: none;
}
.nx-help-search-input::placeholder { color: rgba(255,255,255,.65); }
.nx-help-search-clear { background: none; border: none; color: rgba(255,255,255,.7); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.nx-help-search-clear:hover { color: #fff; background: rgba(255,255,255,.15); }

/* ── Pills ── */
.nx-help-pills { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.nx-help-pills__label { font-size: 13px; opacity: .75; }
.nx-help-pill {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 20px;
  cursor: pointer; font-family: var(--font, "Segoe UI", sans-serif);
  transition: background .15s, border-color .15s;
}
.nx-help-pill:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.55); }
.nx-help-pill--active { background: #fff; color: #0078d4; border-color: #fff; font-weight: 600; }

/* ── Sections ── */
.nx-help-section { margin-top: 44px; }
.nx-help-section__hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.nx-help-section__title { font-size: 19px; font-weight: 700; color: var(--text-primary, #1a202c); margin: 0 0 4px; }
.nx-help-section__sub { font-size: 13px; color: var(--text-tertiary, #6b7280); margin: 0; }

/* ── Toolbar ── */
.nx-help-toolbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nx-help-toolbar__status { font-size: 12px; color: var(--text-tertiary, #6b7280); }
.nx-help-ghost-btn {
  background: none; border: 1.5px solid var(--border-default, #d1d5db);
  color: var(--text-secondary, #374151); font-size: 13px; padding: 5px 14px;
  border-radius: 8px; cursor: pointer; font-family: var(--font, "Segoe UI", sans-serif);
  transition: border-color .15s, color .15s;
}
.nx-help-ghost-btn:hover { border-color: var(--brand-500, #0078d4); color: var(--brand-600, #0078d4); }
.nx-help-sec-btn {
  background: var(--brand-600, #0078d4); border: none; color: #fff;
  font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  font-family: var(--font, "Segoe UI", sans-serif); transition: background .15s;
}
.nx-help-sec-btn:hover { background: var(--brand-700, #005fa3); }

/* ── Quick Actions grid ── */
.nx-help-qa-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .nx-help-qa-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .nx-help-qa-grid { grid-template-columns: repeat(2, 1fr); } }

.nx-help-qa-tile {
  background: var(--bg-card, #fff); border: 1.5px solid var(--border-default, #e5e7eb);
  border-radius: 12px; padding: 20px 16px 16px; text-align: left; cursor: pointer;
  font-family: var(--font, "Segoe UI", sans-serif); position: relative;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.nx-help-qa-tile:hover { border-color: var(--brand-400, #38bdf8); box-shadow: 0 4px 16px rgba(0,120,212,.12); transform: translateY(-2px); }
.nx-help-qa-tile__icon { font-size: 24px; }
.nx-help-qa-tile__title { font-size: 14px; font-weight: 700; color: var(--text-primary, #111827); }
.nx-help-qa-tile__sub { font-size: 12px; color: var(--text-tertiary, #6b7280); }
.nx-help-qa-tile__arrow { position: absolute; top: 14px; right: 14px; font-size: 14px; color: var(--text-tertiary, #9ca3af); opacity: 0; transition: opacity .15s; }
.nx-help-qa-tile:hover .nx-help-qa-tile__arrow { opacity: 1; }

/* ── Module category cards ── */
.nx-help-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1400px) { .nx-help-cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .nx-help-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .nx-help-cat-grid { grid-template-columns: 1fr; } }

.nx-help-cat-card { background: var(--bg-card, #fff); border: 1.5px solid var(--border-default, #e5e7eb); border-radius: 12px; overflow: hidden; transition: border-color .15s; }
.nx-help-cat-card:hover, .nx-help-cat-card--open { border-color: var(--cat-accent, #0078d4); }
.nx-help-cat-summary { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; padding: 14px 16px; text-align: left; cursor: pointer; font-family: var(--font, "Segoe UI", sans-serif); }
.nx-help-cat-summary:hover { background: var(--bg-subtle, #f9fafb); }
.nx-help-cat-icon { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; color: #fff; }
.nx-help-cat-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-help-cat-name { font-size: 14px; font-weight: 700; color: var(--text-primary, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-help-cat-count { font-size: 11px; color: var(--text-tertiary, #6b7280); }
.nx-help-cat-preview { font-size: 11px; color: var(--text-tertiary, #9ca3af); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.nx-help-cat-chevron { font-size: 18px; color: var(--text-tertiary, #9ca3af); flex-shrink: 0; transition: transform .2s; }
.nx-help-cat-card--open .nx-help-cat-chevron { transform: rotate(90deg); }

/* ── Document rows ── */
.nx-help-doc-list { border-top: 1px solid var(--border-subtle, #f3f4f6); padding: 4px 0; }
.nx-help-doc-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; border-bottom: 1px solid var(--border-subtle, #f3f4f6); transition: background .12s; }
.nx-help-doc-row:last-child { border-bottom: none; }
.nx-help-doc-row:hover { background: var(--bg-subtle, #f9fafb); }
.nx-help-doc-icon { font-size: 16px; flex-shrink: 0; }
.nx-help-doc-main { flex: 1; min-width: 0; }
.nx-help-doc-name { font-size: 13px; color: var(--text-primary, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.nx-help-doc-row:hover .nx-help-doc-name { color: var(--brand-600, #0078d4); }
.nx-help-type-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--brand-50, #eff6ff); color: var(--brand-700, #0369a1); flex-shrink: 0; text-transform: none; }
.nx-help-doc-arrow { font-size: 13px; color: var(--text-tertiary, #9ca3af); flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.nx-help-doc-row:hover .nx-help-doc-arrow { opacity: 1; }

/* ── Recent / Trending panels ── */
.nx-help-recent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .nx-help-recent-grid { grid-template-columns: 1fr; } }
.nx-help-panel { background: var(--bg-card, #fff); border: 1.5px solid var(--border-default, #e5e7eb); border-radius: 12px; overflow: hidden; }
.nx-help-panel__title { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--text-primary, #111827); padding: 14px 18px 12px; border-bottom: 1px solid var(--border-subtle, #f3f4f6); margin: 0; }
.nx-help-panel__chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--brand-600, #0078d4); color: #fff; text-transform: none; }
.nx-help-mini-list { padding: 6px 0; }
.nx-help-mini-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; text-decoration: none; border-bottom: 1px solid var(--border-subtle, #f3f4f6); transition: background .12s; }
.nx-help-mini-item:last-child { border-bottom: none; }
.nx-help-mini-item:hover { background: var(--bg-subtle, #f9fafb); }
.nx-help-mini-icon { font-size: 18px; flex-shrink: 0; }
.nx-help-mini-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-help-mini-copy strong { font-size: 13px; font-weight: 600; color: var(--text-primary, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-help-mini-copy span { font-size: 11px; color: var(--text-tertiary, #6b7280); }
.nx-help-mini-item:hover .nx-help-mini-copy strong { color: var(--brand-600, #0078d4); }

/* ── States ── */
.nx-help-state, .nx-help-empty { padding: 40px; text-align: center; font-size: 14px; color: var(--text-tertiary, #6b7280); }

/* ── CTA ── */
.nx-help-cta { margin-top: 44px; background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 100%); border: 1.5px solid #b3d9f7; border-radius: 14px; padding: 36px 40px; display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.nx-help-cta__left { flex: 1; min-width: 260px; }
.nx-help-cta__title { font-size: 20px; font-weight: 700; color: #0f2d5e; margin: 0 0 10px; }
.nx-help-cta__copy { font-size: 14px; color: #334155; margin: 0; line-height: 1.6; }
.nx-help-cta__cards { display: flex; gap: 16px; flex-wrap: wrap; }
.nx-help-cta__card { background: #fff; border: 1.5px solid #b3d9f7; border-radius: 12px; padding: 20px 22px; width: 220px; display: flex; flex-direction: column; gap: 8px; }
.nx-help-cta__card strong { font-size: 14px; font-weight: 700; color: #0f2d5e; }
.nx-help-cta__card p { font-size: 12px; color: #475569; margin: 0; line-height: 1.5; }
.nx-help-primary-btn { display: inline-block; background: #0078d4; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px; text-decoration: none; text-align: center; transition: background .15s; }
.nx-help-primary-btn:hover { background: #005fa3; }
.nx-help-sec-btn-link { display: inline-block; background: none; border: 1.5px solid #0078d4; color: #0078d4; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 8px; text-decoration: none; text-align: center; transition: background .15s, color .15s; }
.nx-help-sec-btn-link:hover { background: #0078d4; color: #fff; }

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

/* ─────────────────────────────────────────
   DARK MODE — Help Center (v14.0)
   ───────────────────────────────────────── */
.nx-app--dark .nx-help-hero { background: linear-gradient(135deg, #071a38 0%, #0a3566 55%, #065a87 100%) !important; }
.nx-app--dark .nx-help-search-shell { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.2) !important; }
.nx-app--dark .nx-help-search-shell:focus-within { background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.4) !important; }
.nx-app--dark .nx-help-section__title { color: #F7F7F7 !important; }
.nx-app--dark .nx-help-section__sub { color: #ADADAD !important; }
.nx-app--dark .nx-help-toolbar__status { color: #ADADAD !important; }
.nx-app--dark .nx-help-ghost-btn { border-color: #3D3D3D !important; color: #ADADAD !important; }
.nx-app--dark .nx-help-ghost-btn:hover { border-color: #4da6ff !important; color: #4da6ff !important; }
.nx-app--dark .nx-help-sec-btn { background: #1a4a8a !important; }
.nx-app--dark .nx-help-sec-btn:hover { background: #1e5aa0 !important; }
.nx-app--dark .nx-help-qa-tile { background: #1A1A1A !important; border-color: #3D3D3D !important; }
.nx-app--dark .nx-help-qa-tile:hover { background: #1A1A1A !important; border-color: #4da6ff !important; box-shadow: 0 4px 16px rgba(77,166,255,.12) !important; }
.nx-app--dark .nx-help-qa-tile__title { color: #F7F7F7 !important; }
.nx-app--dark .nx-help-qa-tile__sub { color: #ADADAD !important; }
.nx-app--dark .nx-help-cat-card { background: #1A1A1A !important; border-color: #3D3D3D !important; }
.nx-app--dark .nx-help-cat-card:hover, .nx-app--dark .nx-help-cat-card--open { border-color: var(--cat-accent, #4da6ff) !important; }
.nx-app--dark .nx-help-cat-summary:hover { background: #1A1A1A !important; }
.nx-app--dark .nx-help-cat-name { color: #F7F7F7 !important; }
.nx-app--dark .nx-help-cat-count, .nx-app--dark .nx-help-cat-preview { color: #ADADAD !important; }
.nx-app--dark .nx-help-cat-chevron { color: #ADADAD !important; }
.nx-app--dark .nx-help-doc-list { border-top-color: #3D3D3D !important; }
.nx-app--dark .nx-help-doc-row { border-bottom-color: #3D3D3D !important; }
.nx-app--dark .nx-help-doc-row:hover { background: #1A1A1A !important; }
.nx-app--dark .nx-help-doc-name { color: #c4d3e8 !important; }
.nx-app--dark .nx-help-doc-row:hover .nx-help-doc-name { color: #4da6ff !important; }
.nx-app--dark .nx-help-type-badge { background: #1a2d45 !important; color: #4da6ff !important; }
.nx-app--dark .nx-help-panel { background: #1A1A1A !important; border-color: #3D3D3D !important; }
.nx-app--dark .nx-help-panel__title { color: #F7F7F7 !important; border-bottom-color: #3D3D3D !important; }
.nx-app--dark .nx-help-mini-item { border-bottom-color: #3D3D3D !important; }
.nx-app--dark .nx-help-mini-item:hover { background: #1A1A1A !important; }
.nx-app--dark .nx-help-mini-copy strong { color: #F7F7F7 !important; }
.nx-app--dark .nx-help-mini-copy span { color: #ADADAD !important; }
.nx-app--dark .nx-help-mini-item:hover .nx-help-mini-copy strong { color: #4da6ff !important; }
.nx-app--dark .nx-help-cta { background: linear-gradient(135deg, #071829 0%, #0a2040 100%) !important; border-color: #1e3a5f !important; }
.nx-app--dark .nx-help-cta__title { color: #93c5fd !important; }
.nx-app--dark .nx-help-cta__copy { color: #ADADAD !important; }
.nx-app--dark .nx-help-cta__card { background: #1A1A1A !important; border-color: #1e3a5f !important; }
.nx-app--dark .nx-help-cta__card strong { color: #93c5fd !important; }
.nx-app--dark .nx-help-cta__card p { color: #ADADAD !important; }
.nx-app--dark .nx-help-primary-btn { background: #1a4a8a !important; }
.nx-app--dark .nx-help-primary-btn:hover { background: #1e5aa0 !important; }
.nx-app--dark .nx-help-sec-btn-link { border-color: #4da6ff !important; color: #4da6ff !important; }
.nx-app--dark .nx-help-sec-btn-link:hover { background: #1a4a8a !important; color: #93c5fd !important; }
.nx-app--dark .nx-help-state, .nx-app--dark .nx-help-empty { color: #ADADAD !important; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   NEXUS HELP DOC VIEWER  —  v14.1
   Page: /nexus/help/doc/{id}  (NexusHelpDocViewer.razor)
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Reading progress bar ── */
.hdv-progress-rail { height: 3px; background: var(--border-subtle, #f0f0f0); position: sticky; top: 0; z-index: 100; }
.hdv-progress-fill { height: 100%; background: linear-gradient(90deg, #0078d4, #00b4d8); transition: width .15s; }

/* ── Sticky top bar ── */
.hdv-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 28px; background: var(--bg-card, #fff);
  border-bottom: 1px solid var(--border-default, #e5e7eb);
  position: sticky; top: 3px; z-index: 90;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.hdv-back-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid var(--border-default, #d1d5db);
  color: var(--text-secondary, #374151); font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  font-family: var(--font, "Segoe UI", sans-serif); white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.hdv-back-btn:hover { border-color: #0078d4; color: #0078d4; }

/* ── Breadcrumb ── */
.hdv-breadcrumb { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 13px; }
.hdv-breadcrumb__link { color: #0078d4; text-decoration: none; font-weight: 500; white-space: nowrap; }
.hdv-breadcrumb__link:hover { text-decoration: underline; }
.hdv-breadcrumb__sep { color: var(--text-tertiary, #9ca3af); font-size: 15px; }
.hdv-breadcrumb__item { color: var(--text-secondary, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdv-breadcrumb__item--current { font-weight: 600; color: var(--text-primary, #111827); }

/* ── Bar right actions ── */
.hdv-bar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.hdv-read-time { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary, #6b7280); }
.hdv-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; text-transform: none; letter-spacing: normal; }
.hdv-badge--doc { background: #eff6ff; color: #0369a1; }
.hdv-badge--pdf { background: #fef2f2; color: #b91c1c; }
.hdv-badge--video { background: #f0fdf4; color: #166534; }

/* ── Two-column shell ── */
.hdv-shell {
  display: flex; align-items: flex-start;
  min-height: calc(100dvh - 120px);
}

/* ── Left ToC panel ── */
.hdv-toc {
  width: 272px; min-width: 240px; max-width: 300px; flex-shrink: 0;
  position: sticky; top: 59px;
  height: calc(100dvh - 60px); overflow-y: auto;
  border-right: 1px solid var(--border-default, #e5e7eb);
  padding: 24px 0 40px;
  background: var(--bg-elevated, #fafafa);
  scrollbar-width: thin;
}
.hdv-toc__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
  margin-bottom: 8px;
}
.hdv-toc__label { font-size: 11px; font-weight: 700; color: var(--text-tertiary, #6b7280); text-transform: none; letter-spacing: normal; }
.hdv-toc__count { font-size: 11px; color: var(--text-tertiary, #9ca3af); }
.hdv-toc__loading, .hdv-toc__empty { padding: 16px 20px; font-size: 13px; color: var(--text-tertiary, #6b7280); }

/* ── ToC nav items ── */
.hdv-toc__nav { padding: 4px 0; }
.hdv-toc__item {
  display: block; padding: 7px 20px 7px 20px;
  font-size: 13.5px; color: var(--text-secondary, #374151);
  cursor: pointer; border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  line-height: 1.45; font-family: var(--font, "Segoe UI", sans-serif);
}
.hdv-toc__item:hover { background: var(--bg-subtle, #f3f4f6); color: var(--text-primary, #111827); border-left-color: #cbd5e1; }
.hdv-toc__item--active { background: #eff6ff !important; color: #0078d4 !important; border-left-color: #0078d4 !important; font-weight: 600; }
.hdv-toc__item--d1 { padding-left: 32px; font-size: 13px; color: var(--text-tertiary, #6b7280); }
.hdv-toc__item--d2 { padding-left: 44px; font-size: 12.5px; color: var(--text-tertiary, #9ca3af); }
.hdv-toc__children { /* wrapper only */ }

/* ── Right content area ── */
.hdv-content {
  flex: 1; min-width: 0;
  padding: 36px 48px 80px;
  background: var(--bg-subtle, #f5f6f7);
  min-height: calc(100dvh - 120px);
  overflow-y: auto;
}

/* ── Document header ── */
.hdv-doc-header {
  max-width: 860px; margin: 0 auto 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-default, #e5e7eb);
}
.hdv-doc-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--text-primary, #141414);
  margin: 0 0 12px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.hdv-doc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hdv-doc-module { font-size: 12px; font-weight: 600; color: var(--text-tertiary, #6b7280); padding: 3px 10px; background: var(--bg-card, #fff); border: 1px solid var(--border-default, #e5e7eb); border-radius: 20px; }

/* ── Paper (doc body container) ── */
.hdv-paper {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 48px 64px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.07);
  min-height: 400px;
}
@media (max-width: 768px) { .hdv-paper { padding: 28px 24px; } }

/* ── DOCX body typography ── */
.hdv-docx-body {
  font-family: "Segoe UI", Aptos, Calibri, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: #1a202c;
  word-wrap: break-word;
}
.hdv-docx-body h1 { font-size: 1.5em; font-weight: 700; color: #0f2d5e; margin: 1.4em 0 .5em; border-bottom: 2px solid #F7F7F7; padding-bottom: .3em; }
.hdv-docx-body h2 { font-size: 1.25em; font-weight: 700; color: #1e3a5f; margin: 1.2em 0 .4em; }
.hdv-docx-body h3 { font-size: 1.1em; font-weight: 600; color: #0078d4; margin: 1em 0 .3em; }
.hdv-docx-body h4, .hdv-docx-body h5, .hdv-docx-body h6 { font-size: 1em; font-weight: 600; color: #374151; margin: .9em 0 .25em; }
.hdv-docx-body p { margin: 0 0 .9em; }
.hdv-docx-body ul, .hdv-docx-body ol { margin: 0 0 .9em 1.5em; }
.hdv-docx-body li { margin-bottom: .3em; }
.hdv-docx-body strong, .hdv-docx-body b { font-weight: 700; color: #111827; }
.hdv-docx-body a { color: #0078d4; text-decoration: underline; }
.hdv-docx-body a:hover { color: #005fa3; }
.hdv-docx-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.hdv-docx-body th { background: #f8faff; color: #0f2d5e; font-weight: 700; padding: 10px 14px; border: 1px solid #d1dde8; text-align: left; }
.hdv-docx-body td { padding: 9px 14px; border: 1px solid #e5eaf0; vertical-align: top; }
.hdv-docx-body tr:nth-child(even) td { background: #fafbfd; }
.hdv-docx-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px auto; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.hdv-docx-body hr { border: none; border-top: 1.5px solid #F7F7F7; margin: 1.5em 0; }
.hdv-docx-body blockquote { border-left: 4px solid #0078d4; margin: 1em 0; padding: .5em 1.2em; background: #f0f7ff; border-radius: 0 6px 6px 0; color: #334155; font-style: italic; }

/* ── Video ── */
.hdv-video-wrap { max-width: 760px; margin: 24px auto; }
.hdv-video { width: 100%; border-radius: 8px; background: #000; box-shadow: 0 4px 20px rgba(0,0,0,.2); }

/* ── Loading / states ── */
.hdv-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 0; gap: 16px; color: var(--text-tertiary, #6b7280); font-size: 14px; }
.hdv-loading--inline { padding: 48px 0; }
.hdv-spinner { width: 36px; height: 36px; border: 3px solid #F7F7F7; border-top-color: #0078d4; border-radius: 50%; animation: hdv-spin .7s linear infinite; }
@keyframes hdv-spin { to { transform: rotate(360deg); } }
.hdv-error { margin: 32px auto; max-width: 500px; background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 10px; padding: 20px 24px; font-size: 14px; color: #b91c1c; display: flex; gap: 10px; align-items: flex-start; }
.hdv-empty { padding: 60px; text-align: center; font-size: 14px; color: var(--text-tertiary, #6b7280); }

/* ── Nav footer ── */
.hdv-nav-footer { max-width: 860px; margin: 28px auto 0; padding: 14px 20px; background: #f8faff; border: 1px solid #d1e4f7; border-radius: 8px; font-size: 13px; color: #334155; }
.hdv-nav-footer__current { color: var(--text-secondary, #374151); }

/* ─────────────────────────────────────────
   DARK MODE — Help Doc Viewer (v14.1)
   ───────────────────────────────────────── */
.nx-app--dark .hdv-progress-rail { background: #3D3D3D !important; }
.nx-app--dark .hdv-bar { background: #1A1A1A !important; border-bottom-color: #3D3D3D !important; box-shadow: 0 1px 6px rgba(0,0,0,.3) !important; }
.nx-app--dark .hdv-back-btn { border-color: #3D3D3D !important; color: #ADADAD !important; }
.nx-app--dark .hdv-back-btn:hover { border-color: #4da6ff !important; color: #4da6ff !important; }
.nx-app--dark .hdv-breadcrumb__link { color: #4da6ff !important; }
.nx-app--dark .hdv-breadcrumb__sep { color: #4a5568 !important; }
.nx-app--dark .hdv-breadcrumb__item { color: #ADADAD !important; }
.nx-app--dark .hdv-breadcrumb__item--current { color: #F7F7F7 !important; }
.nx-app--dark .hdv-read-time { color: #ADADAD !important; }
.nx-app--dark .hdv-toc { background: #0a111e !important; border-right-color: #3D3D3D !important; }
.nx-app--dark .hdv-toc__header { border-bottom-color: #3D3D3D !important; }
.nx-app--dark .hdv-toc__label { color: #ADADAD !important; }
.nx-app--dark .hdv-toc__item { color: #c4d3e8 !important; }
.nx-app--dark .hdv-toc__item:hover { background: #1A1A1A !important; color: #F7F7F7 !important; border-left-color: #3D3D3D !important; }
.nx-app--dark .hdv-toc__item--active { background: #0f2445 !important; color: #4da6ff !important; border-left-color: #4da6ff !important; }
.nx-app--dark .hdv-content { background: #0c1728 !important; }
.nx-app--dark .hdv-doc-title { color: #F7F7F7 !important; }
.nx-app--dark .hdv-doc-header { border-bottom-color: #3D3D3D !important; }
.nx-app--dark .hdv-doc-module { background: #1A1A1A !important; border-color: #3D3D3D !important; color: #ADADAD !important; }
.nx-app--dark .hdv-paper { background: #0f1e30 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.3) !important; }
.nx-app--dark .hdv-docx-body { color: #d1d5db !important; }
.nx-app--dark .hdv-docx-body h1 { color: #93c5fd !important; border-bottom-color: #3D3D3D !important; }
.nx-app--dark .hdv-docx-body h2 { color: #bfdbfe !important; }
.nx-app--dark .hdv-docx-body h3 { color: #4da6ff !important; }
.nx-app--dark .hdv-docx-body h4, .nx-app--dark .hdv-docx-body h5, .nx-app--dark .hdv-docx-body h6 { color: #ADADAD !important; }
.nx-app--dark .hdv-docx-body strong { color: #F7F7F7 !important; }
.nx-app--dark .hdv-docx-body th { background: #0d1a2e !important; color: #93c5fd !important; border-color: #3D3D3D !important; }
.nx-app--dark .hdv-docx-body td { border-color: #3D3D3D !important; }
.nx-app--dark .hdv-docx-body tr:nth-child(even) td { background: #0a1525 !important; }
.nx-app--dark .hdv-docx-body blockquote { background: #0f2445 !important; border-left-color: #4da6ff !important; color: #ADADAD !important; }
.nx-app--dark .hdv-nav-footer { background: #0d1a2e !important; border-color: #1e3a5f !important; color: #ADADAD !important; }

/* ============================================================
   v14.2 — Help Center CRUD: admin panel, ghost card, hover actions
   ============================================================ */

/* ── Right-slide admin panel ── */
.nx-help-panel-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.32); z-index: 1040;
    animation: nx-fade-in .18s ease;
}
.nx-help-admin-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 96vw;
    background: #fff; box-shadow: -4px 0 32px rgba(0,0,0,0.18); z-index: 1041;
    display: flex; flex-direction: column; animation: nx-slide-in-right .22s ease;
    overflow: hidden;
}
@keyframes nx-slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes nx-fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
.nx-help-admin-panel__hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 16px; border-bottom: 1px solid #e5e7eb;
    background: #f8f9fc; flex-shrink: 0;
}
.nx-help-admin-panel__title {
    font-size: 15px; font-weight: 600; color: #1a2535; margin: 0;
    font-family: "Segoe UI", sans-serif;
}
.nx-help-admin-panel__close {
    width: 30px; height: 30px; border: none; border-radius: 6px;
    background: transparent; cursor: pointer; font-size: 16px; color: #64748b;
    display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.nx-help-admin-panel__close:hover { background: #fee2e2; color: #dc2626; }
.nx-help-admin-panel__body {
    flex: 1; overflow-y: auto; padding: 20px;
}

/* ── Ghost module card ── */
.nx-help-ghost-card {
    border: 2px dashed #cbd5e1; border-radius: 12px; padding: 28px 20px;
    background: transparent; cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; min-height: 110px;
    transition: border-color .18s, background .18s; color: #64748b;
    font-family: "Segoe UI", sans-serif;
}
.nx-help-ghost-card:hover { border-color: #0078d4; background: #f0f7ff; color: #0078d4; }
.nx-help-ghost-card__icon {
    font-size: 26px; width: 44px; height: 44px; border-radius: 50%;
    background: #f1f5f9; display: flex; align-items: center; justify-content: center;
    transition: background .18s;
}
.nx-help-ghost-card:hover .nx-help-ghost-card__icon { background: #dbeafe; }
.nx-help-ghost-card__label { font-size: 13px; font-weight: 600; letter-spacing: normal; }

/* ── Per-module admin actions (hover reveals "+ Add doc") ── */
.nx-help-cat-admin-actions {
    display: flex; align-items: center; margin-right: 4px;
    opacity: 0; transition: opacity .15s;
}
.nx-help-cat-card:hover .nx-help-cat-admin-actions,
.nx-help-cat-card--open .nx-help-cat-admin-actions { opacity: 1; }
.nx-help-cat-add-doc-btn {
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
    background: #e0f0ff; color: #0078d4; cursor: pointer; white-space: nowrap;
    border: 1px solid #bfdbfe; transition: background .15s, color .15s;
    font-family: "Segoe UI", sans-serif;
}
.nx-help-cat-add-doc-btn:hover { background: #0078d4; color: #fff; }

/* ── Doc row wrapper + hover actions ── */
.nx-help-doc-row-wrap {
    display: flex; align-items: center; position: relative;
}
.nx-help-doc-row-wrap .nx-help-doc-row { flex: 1; }
.nx-help-doc-actions {
    display: flex; align-items: center; gap: 2px; padding: 0 6px;
    opacity: 0; transition: opacity .15s; flex-shrink: 0;
}
.nx-help-doc-row-wrap:hover .nx-help-doc-actions { opacity: 1; }
.nx-help-doc-action-btn {
    width: 28px; height: 28px; border: none; border-radius: 6px; cursor: pointer;
    font-size: 13px; display: flex; align-items: center; justify-content: center;
    background: transparent; color: #64748b; transition: background .15s, color .15s;
}
.nx-help-doc-action-btn:hover { background: #e0f0ff; color: #0078d4; }
.nx-help-doc-action-btn--del:hover { background: #fee2e2; color: #dc2626; }

/* ── Inline delete confirm row ── */
.nx-help-doc-row--delete-confirm {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: #fef2f2; border-radius: 8px; margin: 3px 0;
    font-family: "Segoe UI", sans-serif;
}
.nx-help-doc-row--delete-confirm .nx-help-doc-name { font-size: 13px; color: #dc2626; font-weight: 500; }
.nx-help-confirm-del-btn {
    padding: 5px 14px; border-radius: 6px; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600; background: #dc2626; color: #fff;
    font-family: "Segoe UI", sans-serif; transition: background .15s;
}
.nx-help-confirm-del-btn:hover:not(:disabled) { background: #b91c1c; }
.nx-help-confirm-del-btn:disabled { opacity: .6; cursor: not-allowed; }
.nx-help-cancel-del-btn {
    padding: 5px 12px; border-radius: 6px; border: 1px solid #F7F7F7; cursor: pointer;
    font-size: 12px; background: #fff; color: #475569;
    font-family: "Segoe UI", sans-serif; transition: background .15s;
}
.nx-help-cancel-del-btn:hover { background: #f1f5f9; }

/* ── Ghost "add doc" row at bottom of expanded module ── */
.nx-help-ghost-row {
    width: 100%; text-align: left; padding: 9px 16px; border: none;
    background: transparent; color: #ADADAD; font-size: 13px; cursor: pointer;
    border-top: 1px dashed #F7F7F7; margin-top: 4px;
    display: flex; align-items: center; gap: 6px;
    font-family: "Segoe UI", sans-serif; transition: color .15s, background .15s;
    border-radius: 0 0 10px 10px;
}
.nx-help-ghost-row:hover { color: #0078d4; background: #f0f7ff; }

/* ── Dark mode overrides ── */
.nx-app--dark .nx-help-admin-panel { background: #1A1A1A !important; box-shadow: -4px 0 32px rgba(0,0,0,0.45) !important; }
.nx-app--dark .nx-help-admin-panel__hdr { background: #0a1120 !important; border-color: #3D3D3D !important; }
.nx-app--dark .nx-help-admin-panel__title { color: #F7F7F7 !important; }
.nx-app--dark .nx-help-admin-panel__close { color: #ADADAD !important; }
.nx-app--dark .nx-help-admin-panel__close:hover { background: #3d1a1a !important; color: #f87171 !important; }
.nx-app--dark .nx-help-ghost-card { border-color: #3D3D3D !important; color: #64748b !important; }
.nx-app--dark .nx-help-ghost-card:hover { border-color: #4da6ff !important; background: #0f1e30 !important; color: #4da6ff !important; }
.nx-app--dark .nx-help-cat-add-doc-btn { background: #0f2445 !important; color: #4da6ff !important; border-color: #1e3a5f !important; }
.nx-app--dark .nx-help-cat-add-doc-btn:hover { background: #4da6ff !important; color: #1A1A1A !important; }
.nx-app--dark .nx-help-doc-action-btn { color: #64748b !important; }
.nx-app--dark .nx-help-doc-action-btn:hover { background: #0f1e30 !important; color: #4da6ff !important; }
.nx-app--dark .nx-help-doc-action-btn--del:hover { background: #2d1515 !important; color: #f87171 !important; }
.nx-app--dark .nx-help-doc-row--delete-confirm { background: #2d1515 !important; }
.nx-app--dark .nx-help-doc-row--delete-confirm .nx-help-doc-name { color: #f87171 !important; }
.nx-app--dark .nx-help-cancel-del-btn { background: #1A1A1A !important; border-color: #3D3D3D !important; color: #ADADAD !important; }
.nx-app--dark .nx-help-cancel-del-btn:hover { background: #1A1A1A !important; }
.nx-app--dark .nx-help-ghost-row { color: #475569 !important; border-color: #3D3D3D !important; }
.nx-app--dark .nx-help-ghost-row:hover { color: #4da6ff !important; background: #0f1e30 !important; }
.nx-app--dark .nx-help-panel-backdrop { background: rgba(0,0,0,0.55) !important; }

/* ============================================================
   v14.3 — Help Center: strip duplicate inner title inside NexusSidePanel
   ============================================================ */

/* Hide the inner FormTitle label + close button row that NewUserTrainingDoc renders
   (NexusSidePanel already shows the title in its gradient header) */
.nx-side-panel__body .demo-section > .row:first-child { display: none !important; }

/* Remove the TelerikCard outer border/shadow — the panel body is already clean */
.nx-side-panel__body .k-card {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.nx-side-panel__body .k-card > div:first-child { padding: 0 !important; }

/* ============================================================
   v14.4 — Help Center toolbar redesign + NexusHelpCrudPanel
   ============================================================ */

/* ── Toolbar redesign ── */
.nx-help-toolbar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.nx-help-toolbar__count-badge {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
    background: #f0f7ff; color: #0078d4; border: 1px solid #bfdbfe;
    font-family: "Segoe UI", sans-serif; white-space: nowrap;
}
.nx-help-tb-divider {
    width: 1px; height: 22px; background: #F7F7F7; flex-shrink: 0;
}
.nx-help-tb-ghost {
    font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 6px;
    border: 1px solid #F7F7F7; background: #fff; color: #64748b; cursor: pointer;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    font-family: "Segoe UI", sans-serif; transition: border-color .15s, color .15s;
}
.nx-help-tb-ghost:hover { border-color: #ADADAD; color: #374151; }
.nx-help-tb-outline {
    font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 6px;
    border: 1.5px solid #0078d4; background: #fff; color: #0078d4; cursor: pointer;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    font-family: "Segoe UI", sans-serif; transition: background .15s, color .15s;
}
.nx-help-tb-outline:hover { background: #0078d4; color: #fff; }
.nx-help-tb-primary {
    font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 6px;
    border: none; background: linear-gradient(135deg, #004578 0%, #0078d4 100%);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    font-family: "Segoe UI", sans-serif;
    box-shadow: 0 1px 4px rgba(0,120,212,0.3);
    transition: opacity .15s, box-shadow .15s;
}
.nx-help-tb-primary:hover { opacity: .92; box-shadow: 0 2px 8px rgba(0,120,212,0.4); }
.nx-help-tb-primary__icon {
    width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}

/* ── Dark mode toolbar ── */
.nx-app--dark .nx-help-toolbar__count-badge { background: #0f2445 !important; color: #4da6ff !important; border-color: #1e3a5f !important; }
.nx-app--dark .nx-help-tb-divider { background: #3D3D3D !important; }
.nx-app--dark .nx-help-tb-ghost { background: #1A1A1A !important; border-color: #3D3D3D !important; color: #ADADAD !important; }
.nx-app--dark .nx-help-tb-ghost:hover { border-color: #4da6ff !important; color: #F7F7F7 !important; }
.nx-app--dark .nx-help-tb-outline { background: #1A1A1A !important; border-color: #4da6ff !important; color: #4da6ff !important; }
.nx-app--dark .nx-help-tb-outline:hover { background: #4da6ff !important; color: #1A1A1A !important; }
.nx-app--dark .nx-help-tb-primary { background: linear-gradient(135deg, #1a3a6a 0%, #1e5aa0 100%) !important; }

/* ── NexusHelpCrudPanel ── */

/* Step 1 */
.nhcp-step1, .nhcp-step2 { padding: 0 0 16px; font-family: "Segoe UI", sans-serif; }
.nhcp-step-hint { font-size: 13px; color: #64748b; margin: 0 0 16px; }

.nhcp-module-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
}
.nhcp-mod-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 14px 12px; border-radius: 10px;
    border: 1.5px solid #e5e7eb; background: #fff; cursor: pointer; text-align: left;
    position: relative; transition: border-color .18s, box-shadow .18s, background .18s;
    min-height: 90px;
}
.nhcp-mod-card:hover, .nhcp-mod-card--hover {
    border-color: #0078d4; background: #f8fbff;
    box-shadow: 0 2px 12px rgba(0,120,212,.12);
}
.nhcp-mod-card--new { border-style: dashed; background: transparent; }
.nhcp-mod-card--new:hover { border-color: #0078d4; background: #f0f7ff; }
.nhcp-mod-card--active { border-color: #0078d4 !important; background: #f0f7ff !important; }
.nhcp-mod-icon {
    width: 34px; height: 34px; border-radius: 8px; font-size: 18px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: #fff; margin-bottom: 4px;
}
.nhcp-mod-icon--new { background: #F7F7F7; color: #64748b; font-size: 20px; }
.nhcp-mod-name { font-size: 13px; font-weight: 600; color: #1a2535; line-height: 1.3; }
.nhcp-mod-count { font-size: 11px; color: #ADADAD; }
.nhcp-mod-arrow {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 20px; color: #cbd5e1; transition: color .15s, right .15s;
}
.nhcp-mod-card:hover .nhcp-mod-arrow { color: #0078d4; right: 8px; }

/* New module inline form */
.nhcp-new-mod-form {
    border: 1.5px solid #e0ecff; border-radius: 10px; padding: 16px;
    background: #f8fbff; margin-top: 8px;
}
.nhcp-form-group { margin-bottom: 14px; }
.nhcp-label { font-size: 12px; font-weight: 600; color: #374151; display: block; margin-bottom: 5px; }
.nhcp-input {
    width: 100%; padding: 8px 12px; border-radius: 6px;
    border: 1.5px solid #F7F7F7; font-size: 13px; color: #1a2535;
    font-family: "Segoe UI", sans-serif; transition: border-color .15s; box-sizing: border-box;
}
.nhcp-input:focus { outline: none; border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0,120,212,.12); }

/* Icon grid */
.nhcp-icon-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.nhcp-icon-btn {
    width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #F7F7F7;
    background: #fff; font-size: 18px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: border-color .15s, background .15s;
}
.nhcp-icon-btn:hover { border-color: #0078d4; background: #e0f0ff; }
.nhcp-icon-btn--active { border-color: #0078d4 !important; background: #e0f0ff !important; box-shadow: 0 0 0 2px #bfdbfe; }

/* Color swatches */
.nhcp-color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nhcp-color-swatch {
    width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent;
    cursor: pointer; transition: border-color .15s, transform .1s;
}
.nhcp-color-swatch:hover { transform: scale(1.15); }
.nhcp-color-swatch--active { border-color: #1a2535 !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }

/* Live preview */
.nhcp-preview-wrap {
    background: #f1f5f9; border-radius: 8px; padding: 12px 14px; margin-bottom: 4px;
}
.nhcp-preview-lbl { font-size: 11px; font-weight: 600; color: #ADADAD; text-transform: none; letter-spacing: normal; display: block; margin-bottom: 8px; }
.nhcp-preview-card {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: #fff; border-radius: 8px; border-left: 3px solid var(--acc, #0078d4);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.nhcp-preview-icon {
    width: 30px; height: 30px; border-radius: 6px; font-size: 15px;
    display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.nhcp-preview-title { font-size: 13px; font-weight: 600; color: #1a2535; flex: 1; }
.nhcp-preview-chip {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
    background: #dcfce7; color: #16a34a; text-transform: none;
}

/* Step 1 next button */
.nhcp-step-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
.nhcp-btn-primary {
    padding: 8px 20px; border-radius: 7px; border: none; cursor: pointer; font-size: 13px;
    font-weight: 600; background: linear-gradient(135deg, #004578 0%, #0078d4 100%); color: #fff;
    font-family: "Segoe UI", sans-serif; transition: opacity .15s;
    box-shadow: 0 2px 6px rgba(0,120,212,.25);
}
.nhcp-btn-primary:hover:not(:disabled) { opacity: .9; }
.nhcp-btn-primary:disabled { opacity: .45; cursor: not-allowed; }

/* Step 2: module context banner */
.nhcp-module-banner {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px;
    border-radius: 10px; background: linear-gradient(135deg,
        color-mix(in srgb, var(--acc, #0078d4) 10%, #f8fbff),
        color-mix(in srgb, var(--acc, #0078d4) 5%, #fff));
    border-left: 3px solid var(--acc, #0078d4);
}
.nhcp-module-banner__icon {
    width: 36px; height: 36px; border-radius: 8px; font-size: 20px;
    background: var(--acc, #0078d4); display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.nhcp-module-banner__text { flex: 1; min-width: 0; }
.nhcp-module-banner__label { font-size: 11px; color: #ADADAD; display: block; }
.nhcp-module-banner__name { font-size: 14px; font-weight: 700; color: #1a2535; }
.nhcp-module-banner__back {
    font-size: 12px; color: #0078d4; background: none; border: none; cursor: pointer;
    font-weight: 600; white-space: nowrap; font-family: "Segoe UI", sans-serif;
    padding: 4px 8px; border-radius: 5px; transition: background .15s;
}
.nhcp-module-banner__back:hover { background: rgba(0,120,212,.08); }

/* Strip inner card/header from NewUserTrainingDoc when inside crud panel */
.nhcp-form-wrapper .k-card { border: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; }
.nhcp-form-wrapper .k-card > div:first-child { padding: 0 !important; }
.nhcp-form-wrapper .demo-section > .row:first-child { display: none !important; }

/* ── Dark mode crud panel ── */
.nx-app--dark .nhcp-step-hint { color: #ADADAD !important; }
.nx-app--dark .nhcp-mod-card { background: #1A1A1A !important; border-color: #3D3D3D !important; }
.nx-app--dark .nhcp-mod-card:hover { background: #1A1A1A !important; border-color: #4da6ff !important; }
.nx-app--dark .nhcp-mod-name { color: #F7F7F7 !important; }
.nx-app--dark .nhcp-mod-card--new { background: transparent !important; }
.nx-app--dark .nhcp-new-mod-form { background: #0a1120 !important; border-color: #3D3D3D !important; }
.nx-app--dark .nhcp-label { color: #cbd5e1 !important; }
.nx-app--dark .nhcp-input { background: #1A1A1A !important; border-color: #3D3D3D !important; color: #F7F7F7 !important; }
.nx-app--dark .nhcp-icon-btn { background: #1A1A1A !important; border-color: #3D3D3D !important; }
.nx-app--dark .nhcp-preview-wrap { background: #0a1120 !important; }
.nx-app--dark .nhcp-preview-card { background: #1A1A1A !important; }
.nx-app--dark .nhcp-preview-title { color: #F7F7F7 !important; }
.nx-app--dark .nhcp-module-banner__name { color: #F7F7F7 !important; }

/* ============================================================
   v14.5 — Help Center: ghost card visibility + panel bg fix
   ============================================================ */

/* Ghost card — explicit background so it is always visible */
.nx-help-ghost-card {
    background: #f8fafc !important;
    border-color: #bfdbfe !important;
    color: #0078d4 !important;
}
.nx-help-ghost-card:hover {
    background: #e0f0ff !important;
    border-color: #0078d4 !important;
    color: #005ea6 !important;
}
.nx-help-ghost-card__icon { background: #e0f0ff !important; color: #0078d4 !important; }
.nx-help-ghost-card__label { color: inherit !important; }

/* Ensure NexusSidePanel always has a solid white background */
.nx-side-panel { background: #ffffff !important; }
.nx-app--dark .nx-side-panel { background: #1A1A1A !important; }
.nx-app--dark .nx-side-panel__header { background: #106EBE; }
.nx-app--dark .nx-side-panel__body { color: #F7F7F7 !important; background: #141414 !important; }

/* NexusHelpCrudPanel: ensure content is always visible */
.nhcp-step1, .nhcp-step2 { background: transparent; }
.nhcp-mod-card { background: #ffffff !important; }
.nx-app--dark .nhcp-mod-card { background: #141c2e !important; border-color: #3D3D3D !important; }
.nx-app--dark .nhcp-mod-name { color: #F7F7F7 !important; }
.nx-app--dark .nhcp-mod-count { color: #64748b !important; }
.nx-app--dark .nhcp-mod-card--new { background: transparent !important; }

/* ============================================================
   v14.6 — Fix nx-help-tb-primary visibility
   ============================================================ */
.nx-help-tb-primary {
    background: linear-gradient(135deg, #004578 0%, #0078d4 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    font-family: "Segoe UI", sans-serif !important;
    box-shadow: 0 1px 6px rgba(0,120,212,0.35) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.nx-help-tb-primary:hover { opacity: 0.9 !important; }
.nx-help-tb-primary__icon {
    width: 18px !important; height: 18px !important; border-radius: 50% !important;
    background: rgba(255,255,255,0.22) !important; color: #fff !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; font-size: 14px !important; font-weight: 700 !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   v14.7 — Module picker: 3-column grid
   ============================================================ */
.nhcp-module-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}
.nhcp-mod-card {
    padding: 12px 10px 10px !important;
    min-height: 80px !important;
    align-items: center !important;
    text-align: center !important;
}
.nhcp-mod-icon { margin-bottom: 2px !important; align-self: center !important; }
.nhcp-mod-name { font-size: 11px !important; text-align: center !important; word-break: break-word !important; }
.nhcp-mod-count { font-size: 10px !important; }
.nhcp-mod-arrow { display: none !important; }

/* ============================================================
   v14.8 — Step 2 full New UX redesign (matches Edit Building style)
   ============================================================ */

/* ── Strip TelerikCard shell ── */
.nhcp-form-wrapper .k-card {
    border: none !important; box-shadow: none !important;
    border-radius: 0 !important; background: transparent !important;
}
.nhcp-form-wrapper .k-card > div { padding: 0 !important; }

/* ── Hide inner title row + <br/> — correct selector (sibling of .demo-section) ── */
.nhcp-form-wrapper .k-card > div > .row:first-of-type { display: none !important; }
.nhcp-form-wrapper .k-card > div > br { display: none !important; }

/* ── Field labels — New UX style ── */
.nhcp-form-wrapper .content-label-style,
.nhcp-form-wrapper .k-label,
.nhcp-form-wrapper .k-form-label,
.nhcp-form-wrapper label.content-label-style span {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    font-family: "Segoe UI", sans-serif !important;
    margin-bottom: 5px !important;
    display: block !important;
    letter-spacing: normal;
}

/* ── TelerikTextBox — clean New UX inputs ── */
.nhcp-form-wrapper .k-textbox,
.nhcp-form-wrapper .k-input {
    border: 1.5px solid #d1d1d1 !important;
    border-radius: 4px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-family: "Segoe UI", sans-serif !important;
    color: #242424 !important;
    transition: border-color .15s !important;
    min-height: 34px !important;
}
.nhcp-form-wrapper .k-textbox:focus-within,
.nhcp-form-wrapper .k-input:focus-within {
    border-color: #0078d4 !important;
    box-shadow: 0 0 0 3px rgba(0,120,212,0.1) !important;
}
.nhcp-form-wrapper .k-input-inner,
.nhcp-form-wrapper .k-textbox input {
    font-size: 14px !important;
    font-family: "Segoe UI", sans-serif !important;
    padding: 6px 10px !important;
    color: #242424 !important;
}
.nhcp-form-wrapper .k-input-inner::placeholder { color: #999 !important; }

/* Disabled (locked module name) */
.nhcp-form-wrapper .k-textbox.k-disabled,
.nhcp-form-wrapper .k-input.k-disabled {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: #666 !important;
}

/* ── Form field spacing ── */
.nhcp-form-wrapper .k-form-field,
.nhcp-form-wrapper .k-form-field-wrap { margin-bottom: 18px !important; }
.nhcp-form-wrapper .k-form { padding: 0 !important; }

/* ── Required asterisk ── */
.nhcp-form-wrapper .k-required { color: #c4314b !important; }

/* ── Form buttons footer — matches Edit Building "Cancel / Save changes" ── */
.nhcp-form-wrapper .k-form-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 0 4px !important;
    border-top: 1px solid #e5e7eb !important;
    margin-top: 20px !important;
    flex-direction: row-reverse !important;
}

/* Save / Update — gradient blue primary */
.nhcp-form-wrapper .k-form-buttons .k-button-solid-primary,
.nhcp-form-wrapper .k-form-buttons button[type="submit"],
.nhcp-form-wrapper .k-form-buttons .k-button[type="submit"] {
    background: linear-gradient(135deg, #004578 0%, #0078d4 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    font-family: "Segoe UI", sans-serif !important;
    box-shadow: 0 1px 5px rgba(0,120,212,.35) !important;
    min-width: 100px !important;
    cursor: pointer !important;
}
.nhcp-form-wrapper .k-form-buttons .k-button-solid-primary:hover { opacity: 0.9 !important; }
.nhcp-form-wrapper .k-form-buttons .k-button-solid-primary:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }

/* Cancel — ghost button */
.nhcp-form-wrapper .k-form-buttons .k-button-solid-base,
.nhcp-form-wrapper .k-form-buttons .k-button:not([type="submit"]) {
    background: transparent !important;
    border: 1.5px solid #d1d1d1 !important;
    color: #424242 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    font-family: "Segoe UI", sans-serif !important;
    cursor: pointer !important;
}
.nhcp-form-wrapper .k-form-buttons .k-button-solid-base:hover { background: #f5f5f5 !important; border-color: #bbb !important; }

/* ── Upload button — New UX style ── */
.nhcp-form-wrapper .k-upload .k-upload-button,
.nhcp-form-wrapper button.upload-btn-disabled,
.nhcp-form-wrapper .k-button:not(.k-form-buttons .k-button):not(.k-button[type="submit"]) {
    border: 1.5px solid #d1d1d1 !important;
    background: #fff !important;
    color: #424242 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-family: "Segoe UI", sans-serif !important;
}

/* ── Module banner refinement ── */
.nhcp-module-banner {
    margin: 0 0 18px !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
}
.nhcp-module-banner__label { font-size: 11px !important; color: #888 !important; }
.nhcp-module-banner__name { font-size: 14px !important; font-weight: 700 !important; }

/* ── Dark mode ── */
.nx-app--dark .nhcp-form-wrapper .k-textbox,
.nx-app--dark .nhcp-form-wrapper .k-input { background: #141c2e !important; border-color: #3D3D3D !important; color: #F7F7F7 !important; }
.nx-app--dark .nhcp-form-wrapper .k-input-inner { color: #F7F7F7 !important; }
.nx-app--dark .nhcp-form-wrapper .content-label-style,
.nx-app--dark .nhcp-form-wrapper .k-label { color: #cbd5e1 !important; }
.nx-app--dark .nhcp-form-wrapper .k-form-buttons { border-color: #3D3D3D !important; }
.nx-app--dark .nhcp-form-wrapper .k-button-solid-base { border-color: #3D3D3D !important; color: #cbd5e1 !important; }

/* ── v14.9 — Hero height reduction + remove kicker ─────────────────────── */
.nx-help-hero { padding: 28px 32px 24px !important; }
.nx-help-hero__title { font-size: clamp(20px, 2.5vw, 28px) !important; margin: 0 0 6px !important; }
.nx-help-hero__sub { margin: 0 0 16px !important; }
.nx-help-hero__kicker { display: none !important; }
.nx-help-pills { margin-top: 10px !important; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   v14.10 — NexusHelpDocViewer: MS Learn-style 3-column layout
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Reading progress bar ── */
.nhdv-progress { position: sticky; top: 0; left: 0; right: 0; height: 3px; background: #e8eaf0; z-index: 200; }
.nhdv-progress__fill { height: 100%; background: linear-gradient(90deg, #0078d4 0%, #00b4d8 100%); transition: width .12s linear; }

/* ── Top breadcrumb bar ── */
.nhdv-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid #e0e4ea;
  background: #fff; font-size: 13px; min-height: 44px;
  position: sticky; top: 3px; z-index: 150;
}
.nx-app--dark .nhdv-topbar { background: #1e2635 !important; border-bottom-color: #2a3748 !important; }
.nhdv-back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 4px;
  border: 1px solid #d0d5dd; background: #fff;
  color: #374151; cursor: pointer; flex-shrink: 0; transition: all .15s;
}
.nhdv-back-btn:hover { background: #f0f6ff; border-color: #0078d4; color: #0078d4; }
.nx-app--dark .nhdv-back-btn { background: #252f42 !important; border-color: #3a4a5e !important; color: #cbd5e1 !important; }
.nhdv-breadcrumb { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.nhdv-bc__link { color: #0078d4; text-decoration: none; white-space: nowrap; }
.nhdv-bc__link:hover { text-decoration: underline; }
.nhdv-bc__sep { color: #9ca3af; font-size: 15px; }
.nhdv-bc__item { color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.nhdv-bc__item--current { font-weight: 600; color: #111827; }
.nx-app--dark .nhdv-bc__item--current { color: #F7F7F7 !important; }
.nhdv-topbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.nhdv-read-badge { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7280; }
.nhdv-type-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: none; letter-spacing: normal; }
.nhdv-type-badge--doc   { background: #eff6ff; color: #0369a1; }
.nhdv-type-badge--pdf   { background: #fef2f2; color: #b91c1c; }
.nhdv-type-badge--video { background: #f0fdf4; color: #166534; }

/* ── 3-column grid shell ── */
.nhdv-shell {
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  height: calc(100vh - 90px);
  overflow: hidden;
  background: #fafbfc;
}
.nx-app--dark .nhdv-shell { background: #161d2c !important; }

/* ── LEFT NAV sidebar ── */
.nhdv-nav {
  border-right: 1px solid #e0e4ea;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column;
  transition: width .2s ease;
}
.nhdv-nav--collapsed { width: 40px; min-width: 40px; }
.nx-app--dark .nhdv-nav { background: #1e2635 !important; border-right-color: #2a3748 !important; }

.nhdv-nav__head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 10px 8px; border-bottom: 1px solid #eef0f3;
  position: sticky; top: 0; background: #fff; z-index: 10;
}
.nx-app--dark .nhdv-nav__head { background: #1e2635 !important; border-bottom-color: #2a3748 !important; }
.nhdv-nav__filter {
  flex: 1; min-width: 0;
  border: 1px solid #d0d5dd; border-radius: 4px;
  padding: 5px 8px; font-size: 12.5px; color: #374151;
  background: #fafbfc; outline: none; font-family: "Segoe UI", sans-serif;
}
.nhdv-nav__filter:focus { border-color: #0078d4; background: #fff; }
.nx-app--dark .nhdv-nav__filter { background: #252f42 !important; border-color: #3a4a5e !important; color: #cbd5e1 !important; }
.nhdv-nav__toggle {
  flex-shrink: 0; width: 26px; height: 26px;
  border: 1px solid #d0d5dd; border-radius: 4px;
  background: #fff; color: #6b7280; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.nhdv-nav__toggle:hover { background: #f0f6ff; border-color: #0078d4; color: #0078d4; }
.nx-app--dark .nhdv-nav__toggle { background: #252f42 !important; border-color: #3a4a5e !important; color: #ADADAD !important; }
.nhdv-nav__msg { padding: 14px 16px; font-size: 12.5px; color: #9ca3af; font-style: italic; }
.nhdv-nav__tree { padding: 6px 0 24px; }

/* Nav tree items */
.nhdv-nav__item { position: relative; }
.nhdv-nav__row {
  display: flex; align-items: flex-start;
  padding: 1px 10px 1px 0;
}
.nhdv-nav__chevron {
  flex-shrink: 0; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: #9ca3af; transition: transform .18s, color .15s; padding: 0;
  margin: 4px 0 0 4px;
}
.nhdv-nav__chevron:hover { color: #0078d4; }
.nhdv-nav__chevron--open { transform: rotate(90deg); color: #0078d4; }
.nhdv-nav__indent { display: inline-block; width: 24px; flex-shrink: 0; }
.nhdv-nav__label {
  flex: 1; min-width: 0; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: "Segoe UI", sans-serif; font-size: 13.5px;
  color: #323130; line-height: 1.5; padding: 4px 8px 4px 4px;
  border-radius: 4px; transition: background .12s, color .12s;
  border-left: 2px solid transparent; margin-left: 0;
  white-space: normal; overflow-wrap: anywhere;
}
.nhdv-nav__label:hover { background: #f0f6ff; color: #0078d4; }
.nhdv-nav__item--active > .nhdv-nav__row > .nhdv-nav__label {
  color: #0078d4; font-weight: 600; border-left-color: #0078d4;
  background: #eff6ff;
}
.nhdv-nav__item--d1 > .nhdv-nav__row { padding-left: 10px; }
.nhdv-nav__item--d1 > .nhdv-nav__row > .nhdv-nav__label { font-size: 13px; color: #4b5563; }
.nhdv-nav__item--d2 > .nhdv-nav__row { padding-left: 20px; }
.nhdv-nav__item--d2 > .nhdv-nav__row > .nhdv-nav__label { font-size: 12.5px; color: #6b7280; }
.nhdv-nav__children { border-left: 1px solid #e8edf3; margin-left: 22px; }
.nx-app--dark .nhdv-nav__label { color: #cbd5e1 !important; }
.nx-app--dark .nhdv-nav__item--active > .nhdv-nav__row > .nhdv-nav__label { color: #4da6ff !important; background: rgba(77,166,255,.1) !important; border-left-color: #4da6ff !important; }
.nx-app--dark .nhdv-nav__label:hover { color: #4da6ff !important; background: rgba(77,166,255,.08) !important; }

/* ── CENTER content ── */
.nhdv-content {
  overflow-y: auto; overflow-x: hidden;
  padding: 0; background: #fafbfc;
}
.nx-app--dark .nhdv-content { background: #161d2c !important; }

.nhdv-article {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 40px 64px;
}
@media (max-width: 1100px) { .nhdv-article { padding: 24px 24px 48px; } }

.nhdv-article__h1 {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 600; color: #0f2d5e; margin: 0 0 12px;
  line-height: 1.2; font-family: "Segoe UI", sans-serif;
}
.nx-app--dark .nhdv-article__h1 { color: #F7F7F7 !important; }

.nhdv-article__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.nhdv-meta-module {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: #6b7280;
  padding: 3px 10px; background: #f3f4f6;
  border: 1px solid #e5e7eb; border-radius: 20px;
}
.nx-app--dark .nhdv-meta-module { background: #252f42 !important; border-color: #3a4a5e !important; color: #ADADAD !important; }

.nhdv-article__rule { border: none; border-top: 1px solid #e0e4ea; margin: 16px 0 24px; }
.nx-app--dark .nhdv-article__rule { border-top-color: #2a3748 !important; }

/* ── Content body typography (MS Learn style) ── */
.nhdv-body {
  font-family: "Segoe UI", -apple-system, sans-serif;
  font-size: 15px; line-height: 1.7; color: #323130;
}
.nx-app--dark .nhdv-body { color: #cbd5e1 !important; }
.nhdv-body h1 { font-size: 1.6em; font-weight: 600; color: #0f2d5e; margin: 1.6em 0 .5em; border-bottom: 1.5px solid #F7F7F7; padding-bottom: .3em; }
.nhdv-body h2 { font-size: 1.3em; font-weight: 600; color: #1e3a5f; margin: 1.6em 0 .5em; }
.nhdv-body h3 { font-size: 1.1em; font-weight: 600; color: #0f2d5e; margin: 1.3em 0 .4em; }
.nhdv-body h4 { font-size: 1em; font-weight: 600; color: #374151; margin: 1em 0 .3em; }
.nhdv-body p  { margin: 0 0 1em; }
.nhdv-body ul, .nhdv-body ol { margin: 0 0 1em 1.5em; }
.nhdv-body li { margin-bottom: .35em; }
.nhdv-body strong, .nhdv-body b { font-weight: 700; }
.nhdv-body a  { color: #0078d4; text-decoration: none; }
.nhdv-body a:hover { text-decoration: underline; }
.nhdv-body blockquote { border-left: 4px solid #0078d4; margin: 1em 0; padding: .6em 1.2em; background: #f0f7ff; color: #334155; }
.nhdv-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.nhdv-body th { background: #f0f5fa; color: #0f2d5e; font-weight: 700; padding: 9px 14px; border: 1px solid #d1dde8; text-align: left; }
.nhdv-body td { padding: 8px 14px; border: 1px solid #e5eaf0; vertical-align: top; }
.nhdv-body tr:nth-child(even) td { background: #fafbfd; }
.nhdv-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px auto; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.nhdv-body hr { border: none; border-top: 1px solid #F7F7F7; margin: 1.5em 0; }
.nhdv-body code, .nhdv-body pre { font-family: Consolas, "Courier New", monospace; background: #f6f8fa; border-radius: 4px; }
.nhdv-body code { padding: 1px 5px; font-size: .88em; color: #0f2d5e; border: 1px solid #F7F7F7; }
.nhdv-body pre { padding: 14px 16px; overflow-x: auto; font-size: 13px; border: 1px solid #F7F7F7; }
.nx-app--dark .nhdv-body h1, .nx-app--dark .nhdv-body h2, .nx-app--dark .nhdv-body h3 { color: #F7F7F7 !important; }
.nx-app--dark .nhdv-body { color: #cbd5e1 !important; }
.nx-app--dark .nhdv-body a { color: #4da6ff !important; }

/* ── Was this page helpful? ── */
.nhdv-feedback { margin-top: 48px; }
.nhdv-feedback__rule { border: none; border-top: 1px solid #e0e4ea; margin-bottom: 20px; }
.nhdv-feedback__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nhdv-feedback__label { font-size: 14px; color: #374151; font-weight: 500; }
.nx-app--dark .nhdv-feedback__label { color: #cbd5e1 !important; }
.nhdv-feedback__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #d0d5dd; background: #fff;
  color: #6b7280; cursor: pointer; transition: all .15s;
}
.nhdv-feedback__btn:hover { border-color: #0078d4; color: #0078d4; background: #f0f6ff; }
.nhdv-feedback__btn--yes { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.nhdv-feedback__btn--no  { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.nhdv-feedback__thanks { font-size: 13px; color: #4b5563; font-style: italic; }
.nx-app--dark .nhdv-feedback__btn { background: #252f42 !important; border-color: #3a4a5e !important; color: #ADADAD !important; }

/* ── RIGHT RAIL "In this article" ── */
.nhdv-rail {
  border-left: 1px solid #e0e4ea;
  background: #fff;
  overflow-y: auto; overflow-x: hidden;
  padding: 20px 0;
  position: sticky; top: 0; align-self: start;
  max-height: calc(100vh - 90px);
}
.nx-app--dark .nhdv-rail { background: #1e2635 !important; border-left-color: #2a3748 !important; }
.nhdv-rail__head {
  font-size: 11px; font-weight: 700; text-transform: none;
  letter-spacing: normal; color: #6b7280; padding: 0 20px 10px;
  border-bottom: 1px solid #eef0f3; margin-bottom: 8px;
}
.nx-app--dark .nhdv-rail__head { color: #ADADAD !important; border-bottom-color: #2a3748 !important; }
.nhdv-rail__nav { display: flex; flex-direction: column; }
.nhdv-rail__link {
  display: block; padding: 4px 20px 4px 16px;
  font-size: 12.5px; color: #4b5563; text-decoration: none;
  border-left: 2px solid transparent;
  line-height: 1.5; transition: color .12s, border-color .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nhdv-rail__link:hover { color: #0078d4; }
.nhdv-rail__link--h3 { padding-left: 28px; font-size: 12px; color: #6b7280; }
.nhdv-rail__link--active { color: #0078d4 !important; border-left-color: #0078d4 !important; font-weight: 600; background: #f0f6ff; }
.nx-app--dark .nhdv-rail__link { color: #ADADAD !important; }
.nx-app--dark .nhdv-rail__link--active { color: #4da6ff !important; border-left-color: #4da6ff !important; background: rgba(77,166,255,.1) !important; }

/* ── Loading / error ── */
.nhdv-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 0; gap: 14px; color: #6b7280; font-size: 14px; }
.nhdv-loading--sm { padding: 36px 0; flex-direction: row; gap: 10px; }
.nhdv-spinner { width: 32px; height: 32px; border: 3px solid #F7F7F7; border-top-color: #0078d4; border-radius: 50%; animation: nhdv-spin .65s linear infinite; }
.nhdv-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes nhdv-spin { to { transform: rotate(360deg); } }
.nhdv-error { display: flex; align-items: flex-start; gap: 10px; margin: 32px; padding: 18px 22px; background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 8px; font-size: 14px; color: #b91c1c; }
.nhdv-empty { text-align: center; padding: 60px; font-size: 14px; color: #9ca3af; }
.nhdv-video-wrap { max-width: 760px; margin: 24px auto; }
.nhdv-video { width: 100%; border-radius: 8px; background: #000; box-shadow: 0 4px 20px rgba(0,0,0,.2); }

/* ── Responsive: collapse rail on narrow viewports ── */
@media (max-width: 1024px) {
  .nhdv-shell { grid-template-columns: 220px 1fr; }
  .nhdv-rail { display: none; }
}
@media (max-width: 720px) {
  .nhdv-shell { grid-template-columns: 1fr; }
  .nhdv-nav { display: none; }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   v14.11 — Help Center: MS Docs hub grid + detail page typography fixes
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Detail page: force consistent headings + bullets ── */
.nhdv-body { color: #1a1a1a !important; }
.nhdv-body p  { color: #1a1a1a !important; }
.nhdv-body li { color: #1a1a1a !important; }
.nhdv-body span { color: inherit; }
.nhdv-body h1, .nhdv-body h2, .nhdv-body h3,
.nhdv-body h4, .nhdv-body h5, .nhdv-body h6 {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
.nhdv-body h2 { font-size: 1.25em !important; border-bottom: 1px solid #e8eaf0; padding-bottom: .3em; margin-top: 1.8em !important; }
.nhdv-body h3 { font-size: 1.1em !important; margin-top: 1.4em !important; }
/* Consistent round bullets — override any Word-injected list styles */
.nhdv-body ul  { list-style-type: disc   !important; padding-left: 1.5em !important; }
.nhdv-body ol  { list-style-type: decimal!important; padding-left: 1.5em !important; }
.nhdv-body ul li { list-style-type: disc !important; }
.nhdv-body ul ul li { list-style-type: circle !important; }
.nhdv-body ul ul ul li { list-style-type: square !important; }
/* Keep links blue */
.nhdv-body a { color: #0078d4 !important; }
/* Dark mode overrides */
.nx-app--dark .nhdv-body,
.nx-app--dark .nhdv-body p,
.nx-app--dark .nhdv-body li { color: #d1d8e0 !important; }
.nx-app--dark .nhdv-body h1,
.nx-app--dark .nhdv-body h2,
.nx-app--dark .nhdv-body h3,
.nx-app--dark .nhdv-body h4 { color: #e8ecf1 !important; }

/* ── Landing page: MS Docs-style hub grid ── */
.nx-help-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 1100px) { .nx-help-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .nx-help-hub-grid { grid-template-columns: 1fr; } }

.nx-help-hub-card {
  background: #fff;
  border: 1px solid #e0e4ea;
  border-radius: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.nx-help-hub-card:hover { box-shadow: 0 4px 16px rgba(0,120,212,.1); border-color: #b3d4f0; }

/* Card header */
.nx-help-hub-card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f0f2f5;
}
.nx-help-hub-card__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}
.nx-help-hub-card__meta { flex: 1; min-width: 0; }
.nx-help-hub-card__title {
  font-size: 14px; font-weight: 700; color: #0f2d5e;
  margin: 0; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.nx-help-hub-card__count {
  font-size: 11px; color: #9ca3af;
  display: block; margin-top: 1px;
}
.nx-help-hub-card__edit {
  flex-shrink: 0; width: 26px; height: 26px;
  border: 1px solid #d0d5dd; border-radius: 4px;
  background: #f8fafb; color: #0078d4; cursor: pointer;
  font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.nx-help-hub-card:hover .nx-help-hub-card__edit { opacity: 1; }
.nx-help-hub-card__edit:hover { background: #0078d4; color: #fff; }

/* Document link list */
.nx-help-hub-card__links {
  list-style: none; margin: 0; padding: 6px 0 8px;
  flex: 1;
}
.nx-help-hub-link-row {
  display: flex; align-items: center;
  padding: 0 8px; position: relative;
}
.nx-help-hub-link-row:hover { background: #f5f9ff; }
.nx-help-hub-link {
  display: flex; align-items: center; gap: 6px;
  flex: 1; padding: 6px 8px; text-decoration: none;
  min-width: 0;
}
.nx-help-hub-link__icon { font-size: 13px; flex-shrink: 0; opacity: .7; }
.nx-help-hub-link__text {
  flex: 1; font-size: 13px; color: #0078d4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4;
}
.nx-help-hub-link:hover .nx-help-hub-link__text { text-decoration: underline; }
.nx-help-hub-link__badge { font-size: 9px !important; padding: 1px 5px !important; flex-shrink: 0; }
.nx-help-hub-link__admin {
  display: none; gap: 2px; flex-shrink: 0;
}
.nx-help-hub-link-row:hover .nx-help-hub-link__admin { display: flex; }
.nx-help-hub-link__admin button {
  width: 22px; height: 22px; border: none; background: none;
  cursor: pointer; color: #9ca3af; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px; transition: background .12s, color .12s;
}
.nx-help-hub-link__admin button:hover { background: #f0f6ff; color: #0078d4; }
.nx-help-hub-link__admin button.del:hover { background: #fef2f2; color: #dc2626; }

/* Delete confirm row */
.nx-help-hub-link--delconfirm {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: #fff5f5;
  font-size: 12px; color: #b91c1c;
}

/* "More" link */
.nx-help-hub-more {
  padding: 4px 16px 6px;
  font-size: 12px;
}
/* "more" is now a <button> — style like a link */
.nx-help-hub-more { background: none; border: none; cursor: pointer; padding: 4px 16px 6px; font-size: 12px; color: #0078d4; text-decoration: none; font-family: inherit; }
.nx-help-hub-more:hover { text-decoration: underline; }

/* Dark mode for hub grid */
.nx-app--dark .nx-help-hub-card { background: #1a2335 !important; border-color: #3D3D3D !important; }
.nx-app--dark .nx-help-hub-card__head { border-bottom-color: #3D3D3D !important; }
.nx-app--dark .nx-help-hub-card__title { color: #F7F7F7 !important; }
.nx-app--dark .nx-help-hub-link__text { color: #4da6ff !important; }
.nx-app--dark .nx-help-hub-link-row:hover { background: #151f30 !important; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   v14.12 — Hero: compact + left/right split | 4-col grid | flush body
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Hero: match Projects page height, left title / right search ── */
.nx-help-hero { padding: 24px 32px 20px !important; }

.nx-help-hero__inner {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  max-width: none !important;
  margin: 0 !important;
}
.nx-help-hero__left { flex: 0 0 auto; }
.nx-help-hero__right {
  flex: 1;
  max-width: 420px;
  margin-left: auto;
}
/* keep title/sub left-aligned, compact */
.nx-help-hero__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
}
.nx-help-hero__sub {
  font-size: 13px !important;
  opacity: .85;
  margin: 0 !important;
}
/* Search fills the right column */
.nx-help-search-shell {
  width: 100% !important;
}

/* ── Body: flush left, no centering ── */
.nx-help-body {
  padding: 0 24px 64px !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ── Hub grid: 4 columns ── */
.nx-help-hub-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1300px) { .nx-help-hub-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 960px)  { .nx-help-hub-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { .nx-help-hub-grid { grid-template-columns: 1fr !important; } }

/* ── v14.13 — Remove blue focus border on hero search box ── */
.nx-help-search-shell:focus-within {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.85) !important;
  outline: 2px solid rgba(255,255,255,0.95) !important;
  outline-offset: 2px !important;
}
.nx-help-search-input:focus { outline: 2px solid rgba(255,255,255,0.9) !important; outline-offset: 2px !important; }

/* ============================================================
   v14.14 — Help CRUD form field groups, inline validation,
             hub module icon solid background
   ============================================================ */

/* Consistent vertical rhythm between form fields */
.nx-app .nhcp-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.nx-app .nhcp-field-group .content-label-style { margin-bottom: 0; }

/* Red border on invalid Telerik text-box */
.nx-app .nhcp-field-invalid .k-input { border-color: #d13438 !important; }
.nx-app .nhcp-field-invalid .k-input:focus-within { box-shadow: 0 0 0 2px rgba(209,52,56,.18) !important; }

/* Inline field error — matches pd-field-error from ProjectDetails */
.pd-field-error {
  display: block;
  font-size: 12px;
  color: #d13438;
  margin-top: 3px;
  font-weight: 500;
}
/* Required star shared style */
.pd-required { color: #d13438; font-weight: 700; margin-left: 2px; }

/* ============================================================
   v14.15 — Hide left nav when no ToC items (no white space)
   ============================================================ */
.nhdv-shell--notoc {
  grid-template-columns: 1fr 220px !important;
}
.nhdv-shell--notoc .nhdv-nav {
  display: none !important;
}

/* ============================================================
   v14.16 — Heading bold (higher specificity) + remove bullets
   ============================================================ */

/* Force headings bold — cover both direct and span-wrapped content */
.nhdv-body h1, .nhdv-body h2, .nhdv-body h3,
.nhdv-body h4, .nhdv-body h5, .nhdv-body h6,
.nhdv-body h1 *, .nhdv-body h2 *, .nhdv-body h3 *,
.nhdv-body h4 *, .nhdv-body h5 *, .nhdv-body h6 * {
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-style: normal !important;
}

/* Remove bullet points from document content */
.nhdv-body ul, .nhdv-body ol {
  list-style: none !important;
  padding-left: 12px !important;
  margin: 0 0 8px 0 !important;
}
.nhdv-body li {
  padding-left: 0 !important;
}
.nhdv-body li::before { display: none !important; }

/* ============================================================
   v14.17 — Fix required * inline + red colour
            (override earlier span block + grey colour rule)
   ============================================================ */
.nhcp-form-wrapper label.content-label-style span.pd-required,
label.content-label-style span.pd-required,
.pd-required {
  display: inline !important;
  color: #d13438 !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
  margin-bottom: 0 !important;
  font-size: inherit !important;
}

/* ============================================================
   v14.18 — Help: right rail hide when empty, heading bold
             hardened, sentence case rail header, form spacing
   ============================================================ */

/* Hide right rail when article has no extractable headings */
.nhdv-shell--norail {
  grid-template-columns: 240px 1fr !important;
}
.nhdv-shell--norail .nhdv-rail {
  display: none !important;
}

/* Both notoc + norail → single-column content */
.nhdv-shell--notoc.nhdv-shell--norail {
  grid-template-columns: 1fr !important;
}

/* Heading bold — maximum specificity, no wildcards */
.nhdv-body h1 { font-weight: 700 !important; color: #1a1a1a !important; font-size: 1.4em !important; margin: 1.4em 0 .4em !important; }
.nhdv-body h2 { font-weight: 700 !important; color: #1a1a1a !important; font-size: 1.2em !important; margin: 1.2em 0 .4em !important; }
.nhdv-body h3 { font-weight: 700 !important; color: #1a1a1a !important; font-size: 1.05em !important; margin: 1em 0 .3em !important; }
.nhdv-body h4, .nhdv-body h5, .nhdv-body h6 { font-weight: 700 !important; color: #1a1a1a !important; }
/* Also cover span-wrapped content inside headings */
.nhdv-body h1 span, .nhdv-body h2 span, .nhdv-body h3 span,
.nhdv-body h4 span, .nhdv-body h5 span, .nhdv-body h6 span {
  font-weight: 700 !important;
  color: inherit !important;
  font-style: normal !important;
}

/* Right rail "In this article" — sentence case (not UPPERCASE) */
.nhdv-rail__head {
  text-transform: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: normal;
  color: #424242 !important;
}

/* CRUD form — ensure bottom padding around buttons doesn't feel clipped */
.nhcp-form-wrapper .k-form-buttons {
  margin-top: 8px !important;
  padding: 16px 0 8px !important;
}

/* ============================================================
   v14.19 — Help: PDF inline frame
   ============================================================ */
.nhdv-pdf-wrap {
  width: 100%;
  height: calc(100vh - 190px);
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.nhdv-pdf-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
  background: #f4f4f4;
}

/* ============================================================
   v14.20 — Help CRUD: right-align form buttons
   ============================================================ */
.nhcp-form-wrapper .k-form-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* ============================================================
   v14.21 — Help CRUD: Cancel left / Save right
   ============================================================ */
.nhcp-form-wrapper .k-form-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* ============================================================
   v14.22 — Help: delete confirmation modal
   ============================================================ */

/* Overlay */
.nx-del-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nx-del-fade-in 0.15s ease;
}
@keyframes nx-del-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal card */
.nx-del-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.20), 0 4px 16px rgba(0,0,0,0.10);
  width: 420px;
  max-width: calc(100vw - 32px);
  padding: 24px;
  animation: nx-del-slide-up 0.18s ease;
}
@keyframes nx-del-slide-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Header row */
.nx-del-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

/* Red icon circle */
.nx-del-modal__icon-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fde7e9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Titles */
.nx-del-modal__titles { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.nx-del-modal__title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}
.nx-del-modal__subtitle {
  font-size: 12px;
  color: #c50f1f;
  font-weight: 500;
  margin: 0;
}

/* Body */
.nx-del-modal__body {
  font-size: 13.5px;
  color: #424242;
  line-height: 1.6;
  margin: 0 0 24px;
  padding-left: 58px; /* align under titles */
}

/* Footer */
.nx-del-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Cancel button */
.nx-del-modal__cancel {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid #d1d1d1;
  border-radius: 6px;
  background: #ffffff;
  color: #424242;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nx-del-modal__cancel:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #aaa;
}

/* Delete button */
.nx-del-modal__confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: #c50f1f;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s;
}
.nx-del-modal__confirm:hover:not(:disabled) { background: #a80e1a; }
.nx-del-modal__confirm:disabled,
.nx-del-modal__cancel:disabled { opacity: 0.6; cursor: not-allowed; }

/* Spinner animation */
.nx-del-spin {
  animation: nx-del-spin-anim 0.8s linear infinite;
}
@keyframes nx-del-spin-anim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   v14.23 - Help CRUD: multi-file upload queue
   ============================================================ */
.nx-app .nhcp-multifile-queue {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}
.nx-app .nhcp-mf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  font-size: 12.5px;
  transition: background 0.1s;
}
.nx-app .nhcp-mf-item--done  { background: #f0fdf4; border-color: #bbf7d0; }
.nx-app .nhcp-mf-item--error { background: #fff0f0; border-color: #fecaca; }
.nx-app .nhcp-mf-item--uploading { background: #eff6ff; border-color: #bfdbfe; }

.nx-app .nhcp-mf-icon {
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  color: #666;
  min-width: 28px;
}

.nx-app .nhcp-mf-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  cursor: pointer;
}
.nx-app .nhcp-mf-name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1a1a1a;
  font-weight: 500;
}
.nx-app .nhcp-mf-name-input {
  flex: 1;
  font-size: 12px;
  border: 1px solid #0078d4;
  border-radius: 3px;
  padding: 1px 5px;
  outline: none;
}
.nx-app .nhcp-mf-ext {
  font-size: 10px;
  text-transform: none;
  color: #757575;
  background: #e5e5e5;
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.nx-app .nhcp-mf-size { font-size: 11px; color: #888; flex-shrink: 0; }

.nx-app .nhcp-mf-chip {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 10px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.nx-app .nhcp-mf-chip--queued    { background: #e8f4fd; color: #0078d4; }
.nx-app .nhcp-mf-chip--uploading { background: #dbeafe; color: #1d4ed8; }
.nx-app .nhcp-mf-chip--done      { background: #dcfce7; color: #16a34a; }
.nx-app .nhcp-mf-chip--error     { background: #fee2e2; color: #dc2626; }

.nx-app .nhcp-mf-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.nx-app .nhcp-mf-remove:hover { color: #c50f1f; background: #fee2e2; }


/* ============================================================
   v14.24 — Help: dark mode + delete modal + white space fixes
   ============================================================ */

/* ── 1. Delete modal: higher z-index so it clears the side panel ── */
.nx-del-modal-overlay { z-index: 99999 !important; }
.nx-del-modal__footer { flex-wrap: wrap; gap: 8px !important; }

/* ── 2. Delete modal: dark mode ── */
.nx-app--dark .nx-del-modal,
[data-theme="dark"] .nx-del-modal {
  background: #1a2335 !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3) !important;
}
.nx-app--dark .nx-del-modal__title,
[data-theme="dark"] .nx-del-modal__title { color: #F7F7F7 !important; }

.nx-app--dark .nx-del-modal__subtitle,
[data-theme="dark"] .nx-del-modal__subtitle { color: #f87171 !important; }

.nx-app--dark .nx-del-modal__body,
[data-theme="dark"] .nx-del-modal__body { color: #ADADAD !important; }
.nx-app--dark .nx-del-modal__body strong,
[data-theme="dark"] .nx-del-modal__body strong { color: #F7F7F7 !important; }

.nx-app--dark .nx-del-modal__icon-wrap,
[data-theme="dark"] .nx-del-modal__icon-wrap { background: rgba(220,38,38,0.15) !important; }

.nx-app--dark .nx-del-modal__cancel,
[data-theme="dark"] .nx-del-modal__cancel {
  background: transparent !important;
  border-color: #3D3D3D !important;
  color: #ADADAD !important;
}
.nx-app--dark .nx-del-modal__cancel:hover:not(:disabled),
[data-theme="dark"] .nx-del-modal__cancel:hover:not(:disabled) {
  background: #141c2e !important;
  border-color: #3a4a62 !important;
  color: #F7F7F7 !important;
}

/* ── 3. Hub grid: "Add new module" ghost card dark mode ── */
.nx-app--dark .nx-help-ghost-card,
[data-theme="dark"] .nx-help-ghost-card {
  background: #1a2335 !important;
  border-color: #3D3D3D !important;
  color: #64748b !important;
}
.nx-app--dark .nx-help-ghost-card:hover,
[data-theme="dark"] .nx-help-ghost-card:hover {
  background: #0f1e30 !important;
  border-color: #4da6ff !important;
  color: #4da6ff !important;
}
.nx-app--dark .nx-help-ghost-card__icon,
[data-theme="dark"] .nx-help-ghost-card__icon {
  background: rgba(77,166,255,0.12) !important;
  color: #4da6ff !important;
}

/* ── 4. Search box: improved dark mode visibility ── */
.nx-app--dark .nx-help-search-shell,
[data-theme="dark"] .nx-help-search-shell {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.nx-app--dark .nx-help-search-input,
[data-theme="dark"] .nx-help-search-input {
  color: #F7F7F7 !important;
}
.nx-app--dark .nx-help-search-input::placeholder,
[data-theme="dark"] .nx-help-search-input::placeholder {
  color: rgba(226,232,240,0.55) !important;
}
.nx-app--dark .nx-help-search-icon,
[data-theme="dark"] .nx-help-search-icon { color: rgba(226,232,240,0.7) !important; }

/* ── 5. Hub act buttons dark mode ── */
.nx-app--dark .nx-help-act-btn--edit,
[data-theme="dark"] .nx-help-act-btn--edit {
  color: #4da6ff !important;
  background: rgba(77,166,255,0.08) !important;
}
.nx-app--dark .nx-help-act-btn--edit:hover,
[data-theme="dark"] .nx-help-act-btn--edit:hover { background: rgba(77,166,255,0.18) !important; }
.nx-app--dark .nx-help-act-btn--delete,
[data-theme="dark"] .nx-help-act-btn--delete {
  color: #f87171 !important;
  background: rgba(248,113,113,0.08) !important;
}
.nx-app--dark .nx-help-act-btn--delete:hover,
[data-theme="dark"] .nx-help-act-btn--delete:hover { background: rgba(248,113,113,0.18) !important; }

/* ── 6. Module picker panel: reduce excess white space ── */
.nhcp-step1 { padding-bottom: 0 !important; }
.nhcp-module-grid {
  /* let grid sit at its natural height — no min-height forcing empty space */
  margin-bottom: 0 !important;
}
/* If there are many modules, allow scrolling within a bounded area */
.nx-side-panel__body .nhcp-step1 { padding-bottom: 8px !important; }

/* ── 7. CRUD panel module banner dark mode (image 2) ── */
.nx-app--dark .nhcp-module-banner,
[data-theme="dark"] .nhcp-module-banner {
  background: rgba(20,28,46,0.85) !important;
  border-color: #3D3D3D !important;
}
.nx-app--dark .nhcp-module-banner__label,
[data-theme="dark"] .nhcp-module-banner__label { color: #64748b !important; }
.nx-app--dark .nhcp-module-banner__name,
[data-theme="dark"] .nhcp-module-banner__name { color: #F7F7F7 !important; }

/* v15.0 Help Center UX Upgrade: skeleton, cmd-palette, expand, recents, filter-banner, view-toggle */

/* Skeleton shimmer */
@keyframes nx-shimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.nx-help-skel-card {
  background: var(--nx-surface, #fff);
  border-radius: 14px;
  border: 1px solid var(--nx-border, #e8eaf0);
  overflow: hidden;
}
.nx-help-skel-accent {
  height: 4px;
  background: linear-gradient(90deg, #e8eaf0 25%, #f5f5f5 50%, #e8eaf0 75%);
  background-size: 1200px 100%;
  animation: nx-shimmer 1.5s infinite;
}
.nx-help-skel-head {
  display: flex; gap: 12px; padding: 14px 16px 10px; align-items: center;
}
.nx-help-skel-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(90deg, #e8eaf0 25%, #f0f0f0 50%, #e8eaf0 75%);
  background-size: 1200px 100%;
  animation: nx-shimmer 1.5s infinite;
  flex-shrink: 0;
}
.nx-help-skel-meta { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.nx-help-skel-line {
  border-radius: 5px;
  background: linear-gradient(90deg, #e8eaf0 25%, #f0f0f0 50%, #e8eaf0 75%);
  background-size: 1200px 100%;
  animation: nx-shimmer 1.5s infinite;
}
.nx-help-skel-line--title { height: 14px; width: 55%; }
.nx-help-skel-line--sub { height: 11px; width: 35%; }
.nx-help-skel-body { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.nx-help-skel-row {
  height: 34px; border-radius: 7px;
  background: linear-gradient(90deg, #e8eaf0 25%, #f5f5f5 50%, #e8eaf0 75%);
  background-size: 1200px 100%;
  animation: nx-shimmer 1.5s infinite;
}
.nx-help-skel-row--short { width: 75%; }

/* Recently viewed strip */
.nx-help-recents {
  padding: 10px 32px;
  border-bottom: 1px solid var(--nx-border, #e8eaf0);
  background: var(--nx-surface, #fff);
}
.nx-help-recents__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.nx-help-recents__label {
  font-size: 11px; font-weight: 700; color: var(--nx-text-muted, #6b7280);
  text-transform: none; letter-spacing: normal; white-space: nowrap; flex-shrink: 0;
}
.nx-help-recents__list {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1;
}
.nx-help-recents__list::-webkit-scrollbar { display: none; }
.nx-help-recents__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px; white-space: nowrap;
  border: 1px solid var(--nx-border, #e8eaf0);
  background: var(--nx-bg, #f7f8fa);
  font-size: 12px; color: var(--nx-text, #1f2937); cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.nx-help-recents__chip:hover { border-color: #0078d4; background: rgba(0,120,212,.05); }
.nx-help-recents__chip-mod { font-size: 10px; color: var(--nx-text-muted, #6b7280); }

/* Filter active banner */
.nx-help-filter-banner {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0,120,212,.07);
  border: 1px solid rgba(0,120,212,.25);
  font-size: 13px; color: #0078d4;
}
.nx-help-filter-banner strong { font-weight: 700; }
.nx-help-filter-banner__clear {
  margin-left: auto; border: none; background: none;
  color: #0078d4; font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 3px 10px; border-radius: 6px;
  font-family: inherit;
  transition: background .15s;
}
.nx-help-filter-banner__clear:hover { background: rgba(0,120,212,.12); }

/* Card expand/collapse */
.nx-help-cat-card { cursor: pointer; }
.nx-help-cat-summary { cursor: pointer; }
.nx-help-cat-chevron {
  margin-left: auto; font-size: 14px; color: var(--nx-text-muted, #6b7280);
  flex-shrink: 0; transition: transform .2s;
  display: flex; align-items: center; width: 20px; justify-content: center;
}
.nx-help-cat-card--open .nx-help-cat-chevron {
  color: var(--cat-accent, #0078d4);
  transform: none;
}
.nx-help-doc-list {
  display: none;
}
.nx-help-cat-card--open .nx-help-doc-list {
  display: block;
  border-top: 1px solid var(--nx-border, #e8eaf0);
  animation: nx-fadeSlide .2s ease;
}
@keyframes nx-fadeSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* View toggle */
.nx-help-view-toggle {
  display: flex; border: 1px solid var(--nx-border, #e8eaf0);
  border-radius: 8px; overflow: hidden;
}
.nx-help-view-btn {
  width: 32px; height: 32px; border: none; background: var(--nx-surface, #fff);
  color: var(--nx-text-muted, #6b7280); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.nx-help-view-btn--active {
  background: rgba(0,120,212,.1); color: #0078d4;
}
.nx-help-view-btn:hover:not(.nx-help-view-btn--active) { background: var(--nx-bg, #f7f8fa); }
.nx-help-cat-grid--list { grid-template-columns: 1fr !important; }

/* Command palette */
.nx-help-cmd-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
  animation: nx-fadeIn .15s ease;
}
@keyframes nx-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.nx-help-cmd-panel {
  width: 600px; max-width: calc(100vw - 48px);
  background: var(--nx-surface, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
  border: 1px solid var(--nx-border, #e8eaf0);
  overflow: hidden;
  animation: nx-slideDown .18s cubic-bezier(.4,0,.2,1);
}
@keyframes nx-slideDown {
  from { transform: translateY(-10px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.nx-help-cmd-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--nx-border, #e8eaf0);
}
.nx-help-cmd-head__icon { font-size: 16px; color: var(--nx-text-muted, #6b7280); display: inline-flex; }
.nx-help-cmd-head__input {
  flex: 1; border: none; outline: none;
  background: transparent; font-size: 15px;
  color: var(--nx-text, #1f2937); font-family: inherit;
}
.nx-help-cmd-head__input::placeholder { color: var(--nx-text-muted, #6b7280); }
.nx-help-cmd-esc {
  padding: 2px 8px; border-radius: 5px;
  border: 1px solid var(--nx-border, #e8eaf0);
  background: var(--nx-bg, #f7f8fa);
  font-size: 11px; color: var(--nx-text-muted, #6b7280);
  font-family: inherit; cursor: pointer;
}
.nx-help-cmd-results { max-height: 380px; overflow-y: auto; padding: 6px 0; }
.nx-help-cmd-section {
  padding: 6px 16px 3px;
  font-size: 11px; font-weight: 700; letter-spacing: normal;
  color: var(--nx-text-muted, #6b7280); text-transform: none;
}
.nx-help-cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer;
  transition: background .1s;
}
.nx-help-cmd-item:hover, .nx-help-cmd-item:focus {
  background: rgba(0,120,212,.07); outline: none;
}
.nx-help-cmd-item__icon { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.nx-help-cmd-item__body { flex: 1; min-width: 0; }
.nx-help-cmd-item__name { font-size: 13px; color: var(--nx-text, #1f2937); font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-help-cmd-item__mod { font-size: 11px; color: var(--nx-text-muted, #6b7280); display: block; margin-top: 2px; }
.nx-help-cmd-empty { padding: 32px; text-align: center; font-size: 13px; color: var(--nx-text-muted, #6b7280); }
.nx-help-cmd-footer {
  padding: 8px 16px; border-top: 1px solid var(--nx-border, #e8eaf0);
  display: flex; gap: 16px; font-size: 11px; color: var(--nx-text-muted, #6b7280);
}
.nx-help-cmd-footer kbd {
  padding: 1px 5px; border-radius: 4px;
  background: var(--nx-bg, #f7f8fa);
  border: 1px solid var(--nx-border, #e8eaf0);
  font-family: inherit; font-size: 10px;
}

/* Ctrl+K hint in hero search */
.nx-help-search-shell { position: relative; }
.nx-help-search-kbd {
  position: absolute; right: 10px;
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; color: rgba(255,255,255,.6);
  pointer-events: none;
}
.nx-help-search-kbd kbd {
  padding: 1px 4px; border-radius: 3px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  font-size: 10px; font-family: inherit; color: rgba(255,255,255,.8);
}

/* Dark mode overrides for new elements */
.dark-mode .nx-help-skel-accent,
.dark-mode .nx-help-skel-icon,
.dark-mode .nx-help-skel-line,
.dark-mode .nx-help-skel-row {
  background: linear-gradient(90deg, #2d2d2d 25%, #3a3a3a 50%, #2d2d2d 75%);
  background-size: 1200px 100%;
}
.dark-mode .nx-help-recents { background: #1e1e1e; border-color: #333; }
.dark-mode .nx-help-recents__chip { background: #252525; border-color: #333; color: #d4d4d4; }
.dark-mode .nx-help-filter-banner { background: rgba(0,120,212,.15); border-color: rgba(0,120,212,.3); }
.dark-mode .nx-help-cmd-panel { background: #1e1e1e; border-color: #333; }
.dark-mode .nx-help-cmd-head { border-color: #333; }
.dark-mode .nx-help-cmd-head__input { color: #d4d4d4; }
.dark-mode .nx-help-cmd-item:hover { background: rgba(0,120,212,.15); }
.dark-mode .nx-help-cmd-footer { border-color: #333; }
.dark-mode .nx-help-view-btn { background: #1e1e1e; }
.dark-mode .nx-help-view-btn:hover:not(.nx-help-view-btn--active) { background: #252525; }
.dark-mode .nx-help-skel-card { background: #1e1e1e; border-color: #333; }

/* ============================================================
   v14.25 — Dark mode: New module icon + search bar + mod card
   ============================================================ */

/* New module card icon — light grey doesn't work in dark */
.nx-app--dark .nhcp-mod-icon--new,
[data-theme="dark"] .nhcp-mod-icon--new {
  background: #3D3D3D !important;
  color: #4da6ff !important;
}
.nx-app--dark .nhcp-mod-card--new,
[data-theme="dark"] .nhcp-mod-card--new {
  background: transparent !important;
  border-color: #3D3D3D !important;
  color: #ADADAD !important;
}
.nx-app--dark .nhcp-mod-card--new:hover,
[data-theme="dark"] .nhcp-mod-card--new:hover {
  background: #141c2e !important;
  border-color: #4da6ff !important;
  color: #4da6ff !important;
}
.nx-app--dark .nhcp-mod-card--new .nhcp-mod-name,
[data-theme="dark"] .nhcp-mod-card--new .nhcp-mod-name { color: #ADADAD !important; }
.nx-app--dark .nhcp-mod-card--new .nhcp-mod-count,
[data-theme="dark"] .nhcp-mod-card--new .nhcp-mod-count { color: #64748b !important; }

/* Search bar — ensure text is always visible in dark mode */
.nx-app--dark .nx-help-search-input,
[data-theme="dark"] .nx-help-search-input,
html[data-theme="dark"] .nx-help-search-input,
.nx-app--dark input.nx-help-search-input {
  color: #F7F7F7 !important;
  caret-color: #F7F7F7 !important;
}
.nx-app--dark .nx-help-search-input::placeholder,
[data-theme="dark"] .nx-help-search-input::placeholder,
html[data-theme="dark"] .nx-help-search-input::placeholder {
  color: rgba(226,232,240,0.5) !important;
  opacity: 1 !important;
}
.nx-app--dark .nx-help-search-shell,
[data-theme="dark"] .nx-help-search-shell,
html[data-theme="dark"] .nx-help-search-shell {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: #F7F7F7 !important;
}

/* Module card names/counts in dark */
.nx-app--dark .nhcp-mod-name,
[data-theme="dark"] .nhcp-mod-name { color: #F7F7F7 !important; }
.nx-app--dark .nhcp-mod-count,
[data-theme="dark"] .nhcp-mod-count { color: #64748b !important; }
.nx-app--dark .nhcp-mod-arrow,
[data-theme="dark"] .nhcp-mod-arrow { color: #4da6ff !important; }

/* Step hint text */
.nx-app--dark .nhcp-step-hint,
[data-theme="dark"] .nhcp-step-hint { color: #ADADAD !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   v14.26 — Help Doc Viewer: video constrained to viewport height
───────────────────────────────────────────────────────────────────────────── */
.nhdv-video-wrap {
  max-width: 900px;
  margin: 16px auto;
}
.nhdv-video {
  width: 100%;
  max-height: calc(100vh - 160px); /* topbar ~56px + breadcrumb ~40px + padding */
  object-fit: contain;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   v14.27 — Help Center landing page: always show vertical scrollbar
───────────────────────────────────────────────────────────────────────────── */
.nx-app:has(.nx-help-hero:not(:where([data-nx-route-hidden] *))) .page-scroll {
  overflow-y: scroll !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   v14.28 — Help Center: reliable scrollbar via route-driven class
   (Replaces v14.27 :has() approach — applied directly in NexusShellLayout)
───────────────────────────────────────────────────────────────────────────── */
.page-scroll--help {
  /* Explicit bounded height so overflow-y:scroll actually scrolls.
     Flex alone was not constraining height — page was growing to fit content
     while .main's overflow:hidden clipped it visually. */
  height: calc(100vh - var(--topbar-h, 56px) - 24px) !important;
  max-height: calc(100vh - var(--topbar-h, 56px) - 24px) !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   v14.31 — Help Center scroll: make .main the scroll container + 14px font floor
───────────────────────────────────────────────────────────────────────────── */

/* Move scroll to .main so the natural flex height bound is respected */
.main--help {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding: 0 !important;          /* remove 12px gap around content */
}
/* page-scroll becomes transparent pass-through */
.main--help .page-scroll--help {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── 14px minimum font size for readable body text ── */
/* Section subtitles */
.nx-help-section__sub       { font-size: 14px !important; }
/* Quick-action tile description */
.nx-help-qa-tile__sub       { font-size: 13px !important; } /* UI chrome — 13px acceptable */
/* Hub document link text */
.nx-help-hub-link__text     { font-size: 14px !important; }
/* CRUD form labels */
.nhcp-label                 { font-size: 13px !important; } /* form label — 13px acceptable */
/* CRUD form input text */
.nhcp-input                 { font-size: 14px !important; }
/* CRUD module name in picker */
.nhcp-mod-name              { font-size: 14px !important; }
/* CRUD step hint */
.nhcp-step-hint             { font-size: 14px !important; }
/* CRUD preview card title */
.nhcp-preview-title         { font-size: 14px !important; }
/* Module banner label / name */
.nhcp-module-banner__name   { font-size: 14px !important; }
/* CTA copy */
.nx-help-cta__copy          { font-size: 14px !important; }
/* Doc viewer breadcrumb */
.nhdv-breadcrumb            { font-size: 13px !important; } /* nav chrome — 13px acceptable */
/* Doc viewer article body fallback */
.nhdv-body                  { font-size: 14px !important; line-height: 1.7; }
/* Ghost card label */
.nx-help-ghost-card__label  { font-size: 14px !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   v14.32 — CRUD panel: duplicate module name alert
───────────────────────────────────────────────────────────────────────────── */
.nhcp-input--error {
  border-color: #c50f1f !important;
  background: #fff8f8 !important;
  box-shadow: 0 0 0 2px rgba(197, 15, 31, 0.12) !important;
}
.nhcp-dup-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 3px solid #c50f1f;
  border-radius: 6px;
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.5;
}
.nhcp-dup-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #c50f1f;
}
.nhcp-dup-alert strong {
  color: #c50f1f;
}
/* Dark mode */
.nx-app--dark .nhcp-input--error,
[data-theme="dark"] .nhcp-input--error {
  border-color: #f87171 !important;
  background: rgba(248, 113, 113, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15) !important;
}
.nx-app--dark .nhcp-dup-alert,
[data-theme="dark"] .nhcp-dup-alert {
  background: rgba(197, 15, 31, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #fca5a5 !important;
}
.nx-app--dark .nhcp-dup-alert strong,
[data-theme="dark"] .nhcp-dup-alert strong { color: #f87171 !important; }

/* ── v14.33: Delete module button on hub card header ── */
.nx-app .nx-help-mod-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary, #616161);
  cursor: pointer;
  margin-left: 2px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.nx-app .nx-help-mod-del-btn:hover {
  background: rgba(197, 15, 31, 0.08);
  color: #c50f1f;
}
.nx-app .nx-help-mod-del-btn:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: 1px;
}
.nx-app--dark .nx-help-mod-del-btn,
[data-theme="dark"] .nx-help-mod-del-btn {
  color: #ababab;
}
.nx-app--dark .nx-help-mod-del-btn:hover,
[data-theme="dark"] .nx-help-mod-del-btn:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}
/* ============================================================
   v14.34 — Delete modal redesign to match premium reference
   ============================================================ */

/* Override icon wrap: solid red rounded square */
.nx-app .nx-del-modal__icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: #c50f1f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.nx-app .nx-del-modal__icon-wrap svg {
  stroke: #ffffff !important;
}

/* Title: bigger, bolder */
.nx-app .nx-del-modal__title {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Subtitle: stays red */
.nx-app .nx-del-modal__subtitle {
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

/* Body text: slightly bigger */
.nx-app .nx-del-modal__body {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Footer: right-aligned with proper gap */
.nx-app .nx-del-modal__footer {
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* Cancel: solid gray bg so it's clearly visible */
.nx-app .nx-del-modal__cancel {
  padding: 9px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 8px !important;
  background: #e5e5e5 !important;
  color: #1a1a1a !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.nx-app .nx-del-modal__cancel:hover:not(:disabled) {
  background: #d0d0d0 !important;
}

/* Confirm: bigger red button */
.nx-app .nx-del-modal__confirm {
  padding: 9px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  gap: 7px !important;
  letter-spacing: normal;
}

/* Dark mode overrides */
.nx-app--dark .nx-del-modal,
[data-theme="dark"] .nx-del-modal {
  background: #262626 !important;
}
.nx-app--dark .nx-del-modal__icon-wrap,
[data-theme="dark"] .nx-del-modal__icon-wrap {
  background: #c50f1f !important;
}
.nx-app--dark .nx-del-modal__icon-wrap svg,
[data-theme="dark"] .nx-del-modal__icon-wrap svg {
  stroke: #ffffff !important;
}
.nx-app--dark .nx-del-modal__title,
[data-theme="dark"] .nx-del-modal__title {
  color: #f0f0f0 !important;
}
.nx-app--dark .nx-del-modal__body,
[data-theme="dark"] .nx-del-modal__body {
  color: #c8c8c8 !important;
}
.nx-app--dark .nx-del-modal__body strong,
[data-theme="dark"] .nx-del-modal__body strong {
  color: #f0f0f0 !important;
}
.nx-app--dark .nx-del-modal__cancel,
[data-theme="dark"] .nx-del-modal__cancel {
  background: #3d3d3d !important;
  color: #e0e0e0 !important;
}
.nx-app--dark .nx-del-modal__cancel:hover:not(:disabled),
[data-theme="dark"] .nx-del-modal__cancel:hover:not(:disabled) {
  background: #4a4a4a !important;
}
/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   NexusHelpDocForm — New UI document add / edit form  v14.46
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.nhdf-wrapper{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border-radius:8px;overflow:hidden;font-family:"Segoe UI",Aptos,Calibri,sans-serif}
.nx-app--dark .nhdf-wrapper,[data-theme="dark"] .nhdf-wrapper{background:#292929}
.nhdf-loading-bar{position:absolute;top:0;left:0;right:0;height:3px;background:#e8e8e8;overflow:hidden;z-index:10}
.nhdf-loading-bar__inner{height:100%;width:40%;background:#0078d4;border-radius:2px;animation:nhdf-slide-anim 1.4s ease-in-out infinite}
@keyframes nhdf-slide-anim{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.nhdf-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;border-bottom:1px solid #e8e8e8;flex-shrink:0}
.nx-app--dark .nhdf-header,[data-theme="dark"] .nhdf-header{border-color:#404040}
.nhdf-header__left{display:flex;align-items:center;gap:10px}
.nhdf-header__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:#eff6ff;color:#0078d4;flex-shrink:0}
.nx-app--dark .nhdf-header__icon,[data-theme="dark"] .nhdf-header__icon{background:#1a3a5c;color:#4da6ff}
.nhdf-header__title{font-size:15px;font-weight:600;color:#201f1e;margin:0}
.nx-app--dark .nhdf-header__title,[data-theme="dark"] .nhdf-header__title{color:#dedede}
.nhdf-close-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;border:none;background:transparent;color:#605e5c;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}
.nhdf-close-btn:hover{background:#f3f2f1;color:#201f1e}
.nx-app--dark .nhdf-close-btn,[data-theme="dark"] .nhdf-close-btn{color:#919191}
.nx-app--dark .nhdf-close-btn:hover,[data-theme="dark"] .nhdf-close-btn:hover{background:#3a3a3a;color:#dedede}
.nhdf-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column}
.nhdf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.nhdf-label-row{display:flex;align-items:center;gap:6px}
.nhdf-label{font-size:13px;font-weight:600;color:#201f1e;line-height:1.4}
.nx-app--dark .nhdf-label,[data-theme="dark"] .nhdf-label{color:#d0d0d0}
.nhdf-required{color:#a4262c;font-size:13px}
.nhdf-input{width:100%;height:32px;padding:0 10px;border:1px solid #d2d0ce;border-radius:4px;font-size:14px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;color:#201f1e;background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;outline:none}
.nhdf-input:focus{border-color:#0078d4;box-shadow:0 0 0 1px #0078d4}
.nhdf-input--disabled,.nhdf-input:disabled{background:#f3f2f1;color:#a19f9d;cursor:not-allowed}
.nhdf-input--sm{height:28px;font-size:13px}
.nx-app--dark .nhdf-input,[data-theme="dark"] .nhdf-input{background:#1f1f1f;border-color:#474747;color:#dedede}
.nx-app--dark .nhdf-input:focus,[data-theme="dark"] .nhdf-input:focus{border-color:#4da6ff;box-shadow:0 0 0 1px #4da6ff}
.nx-app--dark .nhdf-input--disabled,[data-theme="dark"] .nhdf-input--disabled{background:#2e2e2e;color:#5c5c5c}
.nhdf-hint{font-size:11px;color:#a19f9d;font-style:italic;margin-top:2px}
.nhdf-validation-summary{background:#fef0f0;border:1px solid #f5d0d0;border-left:3px solid #a4262c;border-radius:4px;padding:10px 14px;margin-bottom:16px;display:flex;flex-direction:column;gap:4px}
.nhdf-validation-item{display:flex;align-items:flex-start;gap:6px;font-size:13px;color:#a4262c}
.nhdf-upload-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nhdf-upload-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border:1.5px solid #0078d4;border-radius:4px;background:#fff;color:#0078d4;font-size:13px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;cursor:pointer;transition:background .15s;user-select:none}
.nhdf-upload-btn:hover{background:#eff6ff}
.nhdf-upload-btn--disabled{pointer-events:none;opacity:.45;cursor:not-allowed}
.nx-app--dark .nhdf-upload-btn,[data-theme="dark"] .nhdf-upload-btn{border-color:#4da6ff;color:#4da6ff;background:transparent}
.nx-app--dark .nhdf-upload-btn:hover,[data-theme="dark"] .nhdf-upload-btn:hover{background:#1a3a5c}
.nhdf-template-link{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:#0078d4;font-size:12px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0}
.nhdf-template-link:hover{color:#005a9e}
.nhdf-template-link:disabled{color:#a19f9d;text-decoration:none;cursor:not-allowed}
.nhdf-help-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid #0078d4;background:#fff;color:#0078d4;font-size:11px;font-weight:700;cursor:pointer;line-height:1;padding:0;transition:background .15s,color .15s}
.nhdf-help-icon:hover{background:#0078d4;color:#fff}
.nhdf-upload-progress{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:#605e5c}
.nhdf-spinner{width:14px;height:14px;border:2px solid #d2d0ce;border-top-color:#0078d4;border-radius:50%;animation:nhdf-spin-anim .7s linear infinite;flex-shrink:0}
@keyframes nhdf-spin-anim{to{transform:rotate(360deg)}}
.nhdf-status{display:flex;align-items:flex-start;gap:6px;font-size:12px;margin-top:4px;padding:6px 10px;border-radius:4px}
.nhdf-status--success{color:#107c10;background:#f0fff0;border:1px solid #c3e6c3}
.nhdf-status--error{color:#a4262c;background:#fef0f0;border:1px solid #f5d0d0}
.nx-app--dark .nhdf-status--success,[data-theme="dark"] .nhdf-status--success{color:#4ade80;background:#0d2c1a;border-color:#1a5a30}
.nx-app--dark .nhdf-status--error,[data-theme="dark"] .nhdf-status--error{color:#f87171;background:#2c1515;border-color:#5a2020}
.nhdf-notice{display:flex;align-items:flex-start;gap:8px;margin-top:6px;padding:7px 10px;border-radius:4px;font-size:12px}
.nhdf-notice--warning{background:#fff8e1;border:1px solid #f5c518;border-left:3px solid #e8a317;color:#5d4e00}
.nhdf-notice--info{background:#f0f6ff;border:1px solid #c0d8f5;border-left:3px solid #0078d4;color:#444}
.nhdf-notice__dismiss{margin-left:auto;background:none;border:none;color:#9a8200;cursor:pointer;font-size:13px;padding:0 2px;flex-shrink:0}
.nhdf-backup-box{display:flex;align-items:center;gap:8px;margin-top:6px;padding:7px 10px;background:#f0faf0;border:1px solid #c3e6cb;border-radius:4px;font-size:12px;color:#333;flex-wrap:wrap}
.nhdf-backup-info{flex:1;min-width:0}
.nhdf-backup-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid #107c10;border-radius:3px;background:#fff;color:#107c10;font-size:12px;cursor:pointer;transition:background .15s,color .15s;font-family:"Segoe UI",Aptos,Calibri,sans-serif}
.nhdf-backup-btn:hover{background:#107c10;color:#fff}
.nhdf-backup-btn:disabled,.nhdf-backup-btn--loading{pointer-events:none;opacity:.5}
.nhdf-muted{color:#888}
.nhdf-footer{display:flex;align-items:center;gap:10px;padding:16px 0 4px;margin-top:auto;border-top:1px solid #edebe9}
.nx-app--dark .nhdf-footer,[data-theme="dark"] .nhdf-footer{border-color:#3a3a3a}
.nhdf-btn-primary{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 20px;border:none;border-radius:4px;background:#0078d4;color:#fff;font-size:14px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;font-weight:600;cursor:pointer;transition:background .15s}
.nhdf-btn-primary:hover{background:#106ebe}
.nhdf-btn-primary:disabled{background:#a19f9d;cursor:not-allowed}
.nhdf-btn-ghost{display:inline-flex;align-items:center;height:32px;padding:0 16px;border:1px solid #d2d0ce;border-radius:4px;background:transparent;color:#201f1e;font-size:14px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;cursor:pointer;transition:background .15s}
.nhdf-btn-ghost:hover{background:#f3f2f1}
.nhdf-btn-ghost:disabled{opacity:.5;cursor:not-allowed}
.nx-app--dark .nhdf-btn-ghost,[data-theme="dark"] .nhdf-btn-ghost{border-color:#474747;color:#dedede}
.nx-app--dark .nhdf-btn-ghost:hover,[data-theme="dark"] .nhdf-btn-ghost:hover{background:#3a3a3a}
.nhdf-btn-secondary{display:inline-flex;align-items:center;height:28px;padding:0 14px;border:1px solid #0078d4;border-radius:4px;background:#fff;color:#0078d4;font-size:13px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;cursor:pointer;transition:background .15s}
.nhdf-btn-secondary:hover{background:#eff6ff}
.nhdf-btn-danger{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid #a4262c;border-radius:4px;background:#fff;color:#a4262c;font-size:13px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;cursor:pointer;transition:background .15s}
.nhdf-btn-danger:hover{background:#fef0f0}
.nhdf-btn-danger-solid{display:inline-flex;align-items:center;height:32px;padding:0 18px;border:none;border-radius:4px;background:#a4262c;color:#fff;font-size:14px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;font-weight:600;cursor:pointer;transition:background .15s}
.nhdf-btn-danger-solid:hover{background:#8a1e23}
.nhdf-btn--xs{height:24px;padding:0 8px;font-size:12px}
.nhdf-btn-spinner{width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:nhdf-spin-anim .7s linear infinite;flex-shrink:0}
.nhdf-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:1200;backdrop-filter:blur(2px)}
.nhdf-modal-backdrop--confirm{z-index:1300}
.nhdf-modal{background:#fff;border-radius:8px;box-shadow:0 16px 48px rgba(0,0,0,.22);max-height:85vh;display:flex;flex-direction:column;width:460px}
.nhdf-modal--medium{width:480px}
.nhdf-modal--wide{width:min(760px,92vw);max-height:80vh}
.nx-app--dark .nhdf-modal,[data-theme="dark"] .nhdf-modal{background:#292929}
.nhdf-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #edebe9;flex-shrink:0}
.nx-app--dark .nhdf-modal-header,[data-theme="dark"] .nhdf-modal-header{border-color:#3a3a3a}
.nhdf-modal-title{font-size:14px;font-weight:600;color:#201f1e;margin:0}
.nx-app--dark .nhdf-modal-title,[data-theme="dark"] .nhdf-modal-title{color:#dedede}
.nhdf-modal-body{flex:1;overflow-y:auto;padding:18px}
.nhdf-helptip p{font-size:13px;color:#444;line-height:1.7;margin:4px 0 8px}
.nhdf-helptip__section{font-size:13px;font-weight:600;color:#201f1e;margin-top:12px;margin-bottom:4px}
.nhdf-helptip__list{list-style:none;padding:0;margin:0}
.nhdf-helptip__list li{padding:3px 0 3px 18px;position:relative;font-size:13px;color:#444}
.nhdf-helptip__list li::before{content:"•";position:absolute;left:4px;color:#0078d4;font-weight:bold}
.nhdf-helptip__heading-guide{margin:10px 0;padding:10px 14px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:4px;font-size:12.5px;line-height:1.8}
.nhdf-helptip__h1,.nhdf-helptip__h2,.nhdf-helptip__h3{color:#0078d4}
.nhdf-meta-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.nhdf-meta-heading-card{border:1px solid #e8e8e8;border-radius:6px;padding:10px 12px;margin-bottom:8px}
.nx-app--dark .nhdf-meta-heading-card,[data-theme="dark"] .nhdf-meta-heading-card{border-color:#3a3a3a}
.nhdf-meta-heading-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.nhdf-meta-subheading-row{display:flex;align-items:center;gap:6px;margin-left:20px;margin-bottom:4px;flex-wrap:wrap}
.nhdf-divider{border:none;border-top:1px solid #edebe9;margin:14px 0}
.nhdf-meta-preview{border:1px solid #edebe9;border-radius:4px;padding:12px;background:#f8f9fa;max-height:220px;overflow-y:auto}
.nhdf-meta-preview__list{list-style:none;padding:0;margin:0}
.nhdf-meta-preview__list li{margin-bottom:4px;font-size:13px}
.nhdf-meta-preview__group{font-weight:600;color:#201f1e}
.nhdf-meta-preview__link{color:#0078d4;cursor:pointer}
.nhdf-meta-preview__sub{list-style:none;padding-left:16px;margin:2px 0 0 0}
.nhdf-confirm{background:#fff;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.28);width:min(440px,92vw);overflow:hidden}
.nx-app--dark .nhdf-confirm,[data-theme="dark"] .nhdf-confirm{background:#292929}
.nhdf-confirm__header{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 14px;background:linear-gradient(135deg,#fff7ed,#fef3c7);border-bottom:1px solid #fed7aa}
.nx-app--dark .nhdf-confirm__header,[data-theme="dark"] .nhdf-confirm__header{background:#2a2010;border-color:#5a3a10}
.nhdf-confirm__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:#fff;border:1.5px solid #f59e0b;color:#d97706;flex-shrink:0;box-shadow:0 2px 8px rgba(245,158,11,.2)}
.nhdf-confirm__title{font-size:14px;font-weight:700;color:#201f1e;margin:0 0 2px}
.nhdf-confirm__sub{font-size:12px;color:#d97706;margin:0;font-weight:600}
.nhdf-confirm__body{padding:16px 22px;font-size:13.5px;color:#444;line-height:1.6;margin:0}
.nhdf-confirm__actions{display:flex;justify-content:flex-end;gap:10px;padding:12px 22px 18px}

/* ── Help Center admin controls ── */
.nx-help-admin-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 16px;border-radius:4px;border:none;font-size:13px;font-family:"Segoe UI",Aptos,Calibri,sans-serif;font-weight:600;cursor:pointer;transition:background .15s}
.nx-help-admin-btn--add{background:#0078d4;color:#fff}
.nx-help-admin-btn--add:hover{background:#106ebe}
.nx-help-doc-row__actions{display:flex;align-items:center;gap:4px;margin-left:auto;opacity:0;transition:opacity .15s}
.nx-help-doc-row:hover .nx-help-doc-row__actions{opacity:1}
.nx-help-row-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;border:none;background:transparent;cursor:pointer;color:#605e5c;transition:background .12s,color .12s}
.nx-help-row-icon-btn:hover{background:#edebe9;color:#201f1e}
.nx-help-row-icon-btn--danger:hover{background:#fef0f0;color:#a4262c}
.nx-app--dark .nx-help-row-icon-btn,[data-theme="dark"] .nx-help-row-icon-btn{color:#919191}
.nx-app--dark .nx-help-row-icon-btn:hover,[data-theme="dark"] .nx-help-row-icon-btn:hover{background:#3a3a3a;color:#dedede}
.nx-help-slideover-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:900;backdrop-filter:blur(1px)}
.nx-help-slideover{position:fixed;top:0;right:0;bottom:0;width:min(480px,95vw);background:#fff;box-shadow:-8px 0 32px rgba(0,0,0,.18);z-index:901;display:flex;flex-direction:column;animation:nx-slide-in-right .25s cubic-bezier(.4,0,.2,1)}
@keyframes nx-slide-in-right{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.nx-app--dark .nx-help-slideover,[data-theme="dark"] .nx-help-slideover{background:#1f1f1f}
.nx-help-delete-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:1100;backdrop-filter:blur(2px)}
.nx-help-delete-confirm{background:#fff;border-radius:8px;box-shadow:0 16px 48px rgba(0,0,0,.24);padding:22px 24px 18px;width:min(400px,92vw);font-family:"Segoe UI",Aptos,Calibri,sans-serif}
.nx-app--dark .nx-help-delete-confirm,[data-theme="dark"] .nx-help-delete-confirm{background:#292929}
.nx-help-delete-confirm h3{font-size:14px;font-weight:700;color:#a4262c;margin:0 0 8px}
.nx-help-delete-confirm p{font-size:13.5px;color:#444;margin:0 0 16px;line-height:1.5}
.nx-help-delete-confirm__actions{display:flex;justify-content:flex-end;gap:10px}

/* ── v14.47 Help Center: folder icon + top accent bar + footer right-align ── */
.nx-help-cat-icon--folder {
  font-size: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex-shrink: 0;
}
.nx-help-cat-icon--folder svg { display: block; }

/* Footer: cancel left, save/update right */
.nhdf-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.nhdf-btn-primary--right { margin-left: auto; }

/* Top accent bar radius fix — override overflow:hidden so border-top shows */
.nx-help-cat-card {
  overflow: visible !important;
  border-radius: 12px !important;
}
.nx-help-cat-summary {
  border-radius: 8px 8px 0 0;
}

/* ── v14.48 Always-expanded card headers (no toggle) ── */
.nx-help-cat-summary--static {
  cursor: default !important;
  pointer-events: none;
}
.nx-help-cat-summary--static:hover,
.nx-help-cat-summary--static:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* ── v14.49 Hero split layout: title left, search+filter right ── */
.nx-help-hero__inner--split {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px;
}
.nx-help-hero__text {
  flex: 1 1 0;
  min-width: 0;
}
.nx-help-hero__controls {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx-help-hero__controls .nx-help-search-wrap {
  width: 100%;
  margin: 0;
}
.nx-help-hero__controls .nx-help-pills {
  margin: 0;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .nx-help-hero__inner--split {
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
  }
  .nx-help-hero__controls {
    flex: none;
    width: 100%;
  }
}

/* ── v14.50  Module Picker Dialog (nhmp-*) + New Module Name form (nhmn-*) ── */
.nhmp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1200;
}
.nhmp-dialog {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1201;
  background: #fff;
  border-radius: 12px;
  width: min(92vw, 520px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  overflow: hidden;
}
.nhmp-dialog--sm {
  width: min(92vw, 420px);
  max-height: unset;
}
.nhmp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  background: linear-gradient(135deg, #1a4b8c 0%, #0078d4 100%);
  color: #fff;
  flex-shrink: 0;
}
.nhmp-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #fff;
}
.nhmp-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.85;
}
.nhmp-close:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.nhmp-sub {
  font-size: 13px;
  color: #5c5c5c;
  padding: 10px 20px 6px;
  margin: 0;
  flex-shrink: 0;
}
.nhmp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px 20px 20px;
  overflow-y: auto;
}
.nhmp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid #ececec;
  border-radius: 10px;
  padding: 14px 8px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  text-align: center;
}
.nhmp-tile:hover {
  border-color: #0078d4;
  background: #f0f6ff;
  box-shadow: 0 2px 8px rgba(0,120,212,0.10);
}
.nhmp-tile__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nhmp-tile__icon--new {
  background: #f0f0f0;
  color: #666;
}
.nhmp-tile--new .nhmp-tile__icon--new { color: #444; }
.nhmp-tile--new:hover .nhmp-tile__icon--new {
  background: #e8f3ff;
  color: #0078d4;
}
.nhmp-tile__name {
  font-size: 13px;
  font-weight: 600;
  color: #242424;
  word-break: break-word;
  line-height: 1.3;
}
.nhmp-tile__count {
  font-size: 11px;
  color: #888;
}
.nhmp-tile__count--new { color: #0078d4; }
.nhmp-tile--new .nhmp-tile__name { color: #444; }
.nhmp-tile--new:hover .nhmp-tile__name { color: #0078d4; }

/* Footer */
.nhmp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 18px;
  border-top: 1px solid #ececec;
}

/* New module name form */
.nhmn-body { padding: 6px 20px 4px; }
.nhmn-label { display: block; font-size: 13px; font-weight: 600; color: #242424; margin-bottom: 6px; }
.nhmn-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1.5px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  color: #242424;
  outline: none;
  transition: border-color .15s;
}
.nhmn-input:focus { border-color: #0078d4; }
.nhmn-input--error { border-color: #c4314b !important; }
.nhmn-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #c4314b;
  line-height: 1.4;
}
.nhmn-error svg { flex-shrink: 0; margin-top: 1px; }

/* ── v14.51 Flat list view (type filter active) + card add-doc button ── */
.nx-help-flat-header {
  font-size: 13px;
  color: #605e5c;
  padding: 0 2px 12px;
  font-weight: 500;
}
.nx-help-flat-list {
  background: #fff;
  border: 1px solid #e1dfdd;
  border-radius: 10px;
  overflow: hidden;
}
.nx-help-doc-row--flat {
  cursor: pointer;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f2f1;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .12s;
}
.nx-help-doc-row--flat:last-child { border-bottom: none; }
.nx-help-doc-row--flat:hover { background: #f5f5f5; }
.nx-help-doc-module {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #8a8886;
  margin-top: 2px;
}
.nx-help-doc-module-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nx-help-inline-link {
  background: none;
  border: none;
  color: #0078d4;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

/* "Add document" button inside module card header */
.nx-help-card-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  background: none;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  color: #0078d4;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
  font-family: "Segoe UI", Aptos, Calibri, sans-serif;
}
.nx-help-card-add-btn:hover {
  background: #f0f6ff;
  border-color: #0078d4;
}

/* Dark mode */
.nx-app--dark .nx-help-flat-list { background: #1A1A1A !important; border-color: #3D3D3D !important; }
.nx-app--dark .nx-help-doc-row--flat { border-bottom-color: #3D3D3D !important; }
.nx-app--dark .nx-help-doc-row--flat:hover { background: #1A1A1A !important; }
.nx-app--dark .nx-help-flat-header { color: #ADADAD !important; }
.nx-app--dark .nx-help-doc-module { color: #64748b !important; }
.nx-app--dark .nx-help-card-add-btn { border-color: #3D3D3D !important; color: #4da6ff !important; }
.nx-app--dark .nx-help-card-add-btn:hover { background: #1A1A1A !important; border-color: #4da6ff !important; }

/* ── v14.52 Hero split: title left, search+pills right ── */
.nx-help-hero__inner--split {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 28px 32px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.nx-help-hero__left {
  flex: 1 1 0;
  min-width: 0;
}
.nx-help-hero__left .nx-help-hero__kicker { margin-bottom: 8px; }
.nx-help-hero__left .nx-help-hero__title  { margin: 0 0 6px; }
.nx-help-hero__left .nx-help-hero__sub    { margin: 0; }
.nx-help-hero__right {
  flex: 0 0 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nx-help-hero__right .nx-help-search-wrap { width: 100%; margin: 0; }
.nx-help-hero__right .nx-help-pills       { margin: 0; justify-content: flex-start; }
@media (max-width: 800px) {
  .nx-help-hero__inner--split { flex-direction: column; gap: 20px; padding: 20px 16px 18px; }
  .nx-help-hero__right { flex: none; width: 100%; }
}

/* ── v14.53 Compact hero — matches pd-hero height ── */
.nx-help-hero { padding: 0 !important; }
.nx-help-hero__inner--split {
  padding: 14px 32px !important;
  gap: 32px !important;
  align-items: center !important;
}
.nx-help-hero__kicker { display: none !important; }
.nx-help-hero__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.2px !important;
}
.nx-help-hero__sub {
  font-size: 13px !important;
  opacity: .85 !important;
  margin: 0 !important;
}
.nx-help-hero__right { gap: 8px !important; }
.nx-help-search-shell { height: 36px !important; }
.nx-help-search-input { font-size: 13px !important; }

/* ── v14.54 Toolbar button Fluent styling ── */
.nx-help-ghost-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; height: 32px; border-radius: 10px;
  border: 1.5px solid #d1d5db; background: #fff; color: #374151;
  font: 600 13px/1 'Segoe UI', sans-serif; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nx-help-ghost-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.nx-help-admin-btn--add {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 16px; height: 32px; border-radius: 10px;
  border: none; background: #0078d4; color: #fff;
  font: 600 13px/1 'Segoe UI', sans-serif; cursor: pointer;
  transition: background .15s;
}
.nx-help-admin-btn--add:hover { background: #106ebe; }
.nx-help-card-add-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 6px;
  border: 1.5px solid rgba(0,0,0,.15); background: rgba(255,255,255,.35);
  color: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  flex-shrink: 0; transition: background .15s;
}
.nx-help-card-add-btn:hover { background: rgba(255,255,255,.6); }

/* dark mode */
.dark-mode .nx-help-ghost-btn,
[data-theme="dark"] .nx-help-ghost-btn {
  background: #1f2937; border-color: #374151; color: #d1d5db;
}
.dark-mode .nx-help-ghost-btn:hover,
[data-theme="dark"] .nx-help-ghost-btn:hover { background: #374151; }

/* ── v15.1 Fix: Add module button text visible, always-expanded docs, remove list mode ── */
.nx-help-admin-btn--add { color: #fff !important; }
.nx-help-admin-btn--add svg { fill: #fff !important; }
.nx-help-cat-summary--static { cursor: default !important; pointer-events: none !important; }
.nx-help-cat-summary--static .nx-help-card-add-btn,
.nx-help-cat-summary--static .nx-help-row-icon-btn { pointer-events: auto !important; cursor: pointer !important; }
.nx-help-cat-card--open .nx-help-doc-list { display: block !important; border-top: 1px solid var(--nx-border, #e8eaf0); }
.nx-help-cat-card { cursor: default !important; }

/* ── v15.2 Compact doc rows — less vertical spacing ── */
.nx-help-doc-row { padding: 5px 14px !important; min-height: 0 !important; }
.nx-help-doc-icon { font-size: 13px !important; }
.nx-help-type-badge { font-size: 10px !important; padding: 1px 6px !important; }
.nx-help-doc-row__actions { gap: 3px !important; }
.nx-help-row-icon-btn { width: 20px !important; height: 20px !important; }

/* ── v15.3 Fix Add module button background + remove recent strip ── */
button.nx-help-admin-btn--add,
.nx-help-admin-btn.nx-help-admin-btn--add {
  background: #0078d4 !important;
  background-color: #0078d4 !important;
  color: #fff !important;
  border: none !important;
}
button.nx-help-admin-btn--add:hover,
.nx-help-admin-btn.nx-help-admin-btn--add:hover {
  background: #106ebe !important;
  background-color: #106ebe !important;
}
button.nx-help-admin-btn--add svg path {
  fill: #fff !important;
}

/* ── v15.4 Module Picker → right-side slide panel ── */
.nhmp-dialog {
  position: fixed !important;
  top: 0 !important; right: 0 !important;
  left: auto !important; bottom: 0 !important;
  transform: none !important;
  width: min(92vw, 480px) !important;
  max-height: 100vh !important;
  height: 100vh !important;
  border-radius: 0 !important;
  border-left: 1px solid #d1d5db !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.18) !important;
  animation: nhmp-slideIn .22s cubic-bezier(.4,0,.2,1);
}
.nhmp-dialog--sm {
  width: min(92vw, 420px) !important;
  max-height: 100vh !important;
  height: 100vh !important;
}
@keyframes nhmp-slideIn {
  from { transform: translateX(100%) !important; opacity: 0; }
  to   { transform: translateX(0)    !important; opacity: 1; }
}
.nhmp-overlay {
  backdrop-filter: blur(2px) !important;
}
/* scrollable content area inside panel */
.nhmp-grid {
  overflow-y: auto !important;
  flex: 1 !important;
  padding: 16px 20px !important;
}

/* ── v15.5 Module picker: 4-col grid, New module pinned at bottom ── */
.nhmp-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 12px 16px 20px !important;
  overflow-y: auto !important;
  flex: 1 !important;
}
.nhmp-tile__icon {
  width: 48px !important; height: 48px !important;
  border-radius: 12px !important; font-size: 20px !important;
}
.nhmp-tile__name { font-size: 11px !important; }
.nhmp-tile__count { font-size: 10px !important; }

/* ── v15.6 Module picker tiles compact & polished ── */
.nhmp-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  padding: 10px 14px 14px !important;
}
.nhmp-tile {
  padding: 8px 4px !important;
  gap: 4px !important;
  border-radius: 8px !important;
}
.nhmp-tile__icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  font-size: 16px !important;
}
.nhmp-tile__icon svg {
  width: 18px !important;
  height: 18px !important;
}
.nhmp-tile__icon--new {
  width: 36px !important;
  height: 36px !important;
}
.nhmp-tile__name {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
.nhmp-tile__count {
  font-size: 10px !important;
  line-height: 1 !important;
}
.nhmp-sub {
  padding: 8px 14px 4px !important;
  font-size: 12px !important;
}

/* ── v16.0 Toolbar: dark navy add button + count badge ── */
.nx-help-add-module-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; height: 34px; border-radius: 10px;
  border: none; background: #0078d4; color: #fff;
  font: 600 13px/1 'Segoe UI', sans-serif; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
.nx-help-add-module-btn:hover { background: #106ebe; }
.nx-help-add-module-btn svg { flex-shrink: 0; }

/* ── v16.0 Add new module tile in grid ── */
.nx-help-add-new-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 32px 16px; border-radius: 10px;
  border: 2px dashed #c7d7ed; background: #f7f9fc; cursor: pointer;
  transition: border-color .15s, background .15s; color: #0078d4;
  font-family: 'Segoe UI', sans-serif; min-height: 100px;
}
.nx-help-add-new-tile:hover { border-color: #0078d4; background: #eef5fb; }
.nx-help-add-new-tile__icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #e8f0fb; color: #0078d4;
  transition: background .15s;
}
.nx-help-add-new-tile:hover .nx-help-add-new-tile__icon { background: #cfe0f7; }
.nx-help-add-new-tile__label {
  font-size: 13px; font-weight: 600; color: #0078d4;
}

/* Help Center support actions and ticket panels. */
.nx-help-support {
  margin: 28px 0 8px;
  padding: 20px 24px;
  border: 1px solid #c7d7ed;
  border-radius: 10px;
  background: #f0f6ff;
  font-family: var(--font);
}
.nx-help-support__intro {
  margin-bottom: 16px;
}
.nx-help-support__title {
  margin: 0 0 5px;
  color: #1a2e44;
  font-family: var(--font);
  font-size: var(--nx-type-panel-title);
  font-weight: 700;
}
.nx-help-support__body {
  margin: 0;
  color: #395a8c;
  font-size: var(--nx-type-support);
  line-height: 1.5;
}
.nx-help-support__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 430px));
  gap: 14px;
}
.nx-help-support-card {
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #d9e2ec;
  border-radius: 9px;
  background: #fff;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nx-help-support-card:hover {
  border-color: #b8cbe0;
  background: #f0f6fc;
  box-shadow: 0 3px 10px rgba(15, 76, 129, .08);
}
.nx-help-support-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  color: #0f6cbd;
  background: #e7f2fc;
}
.nx-help-support-card__content {
  min-width: 0;
}
.nx-help-support-card h3 {
  margin: 0 0 4px;
  color: #172b3f;
  font-size: var(--nx-type-field-value);
  font-weight: 700;
}
.nx-help-support-card p {
  margin: 0 0 12px;
  color: #49647d;
  font-size: var(--nx-type-support);
  line-height: 1.45;
}
.nx-help-support-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.nx-app .nx-help-support-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font);
  font-size: var(--nx-type-button);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nx-app .nx-help-support-action--feature,
.nx-app .nx-help-support-action--primary {
  color: #fff;
  border-color: #0f6cbd;
  background: linear-gradient(135deg, #1683d8, #0f548c);
}
.nx-app .nx-help-support-action--feature:hover,
.nx-app .nx-help-support-action--primary:hover {
  color: #fff;
  background: linear-gradient(135deg, #0f6cbd, #0b4778);
}
.nx-app .nx-help-support-action--secondary {
  color: #0f548c;
  border-color: #9dbbd6;
  background: #fff;
}
.nx-app .nx-help-support-action--secondary:hover {
  color: #0b4778;
  border-color: #6f9fc7;
  background: #f4f9fd;
}
.nx-app .nx-help-support-action:focus-visible {
  outline: 2px solid #0f6cbd;
  outline-offset: 2px;
}
.nx-help-support-form {
  min-height: 100%;
}
.nx-help-support-form .nec--support {
  min-height: 100%;
}

.nx-support-status {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: -20px;
  color: var(--text-primary);
  background: #f5f8fc;
  font-family: var(--font);
}
.nx-support-status__toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 36px minmax(180px, 260px);
  align-items: end;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #d9e2ec;
  background: #fff;
}
.nx-support-status__view,
.nx-support-status__search {
  display: grid;
  gap: 5px;
}
.nx-support-status__view label,
.nx-support-status__search label {
  color: var(--text-secondary);
  font-size: var(--nx-type-field-label);
  font-weight: 600;
}
.nx-support-status__view select,
.nx-support-status__search-box input {
  min-height: 36px;
  font-family: var(--font);
  font-size: var(--nx-type-search);
}
.nx-support-status__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #c8d5e2;
  border-radius: 6px;
  color: #0f548c;
  background: #fff;
  cursor: pointer;
}
.nx-support-status__search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #c8d5e2;
  border-radius: 6px;
  color: #55718b;
  background: #fff;
}
.nx-support-status__search-box input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  color: #172b3f;
  background: transparent;
}
.nx-support-status__state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 10px;
  min-height: 240px;
  padding: 28px;
  color: var(--text-secondary);
  font-size: var(--nx-type-support);
}
.nx-support-status__list {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
}
.nx-support-ticket {
  padding: 14px 16px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.nx-support-ticket:hover {
  border-color: #b8cbe0;
  background: #f0f6fc;
}
.nx-support-ticket__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.nx-support-ticket__head h3 {
  margin: 0;
  color: #172b3f;
  font-size: var(--nx-type-field-value);
  font-weight: 700;
}
.nx-support-ticket__status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--nx-type-badge);
  font-weight: 700;
}
.nx-support-ticket__status--new { color: #075985; background: #e0f2fe; }
.nx-support-ticket__status--active { color: #166534; background: #dcfce7; }
.nx-support-ticket__status--mitigated { color: #92400e; background: #fef3c7; }
.nx-support-ticket__status--resolved { color: #475569; background: #F7F7F7; }
.nx-support-ticket__details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.nx-support-ticket__details div {
  min-width: 0;
}
.nx-support-ticket__details dt {
  margin-bottom: 3px;
  color: #5c7185;
  font-size: var(--nx-type-field-label);
  font-weight: 600;
}
.nx-support-ticket__details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #243b53;
  font-size: var(--nx-type-grid-cell);
}
.nx-support-status__pager {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 11px 20px;
  border-top: 1px solid #d9e2ec;
  background: #fff;
  font-size: var(--nx-type-footer);
}
.nx-support-status__pager-info,
.nx-support-status__pager-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nx-support-status__pager select {
  min-height: 30px;
  border: 1px solid #c8d5e2;
  border-radius: 5px;
  background: #fff;
  font: inherit;
}
.nx-support-status__pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #c8d5e2;
  border-radius: 5px;
  color: #0f548c;
  background: #fff;
  cursor: pointer;
}
.nx-support-status__pager button:disabled {
  color: #9aa9b8;
  background: #f2f5f8;
  cursor: default;
}
.nx-app--dark .nx-help-support {
  border-color: #35516b;
  background: #172b3f;
}
.nx-app--dark .nx-help-support__title,
.nx-app--dark .nx-help-support-card h3 {
  color: #f2f7fb;
}
.nx-app--dark .nx-help-support__body,
.nx-app--dark .nx-help-support-card p {
  color: #c0d0de;
}
.nx-app--dark .nx-help-support-card,
.nx-app--dark .nx-support-ticket,
.nx-app--dark .nx-support-status__toolbar,
.nx-app--dark .nx-support-status__pager {
  border-color: #35516b;
  background: #20384d;
}
.nx-app--dark .nx-help-support-card:hover,
.nx-app--dark .nx-support-ticket:hover {
  border-color: #52789a;
  background: #29465f;
}
.nx-app--dark .nx-help-support-card__icon {
  color: #75baf0;
  background: #183d5c;
}
.nx-app--dark .nx-help-support-action--secondary,
.nx-app--dark .nx-support-status__refresh,
.nx-app--dark .nx-support-status__search-box,
.nx-app--dark .nx-support-status__pager select,
.nx-app--dark .nx-support-status__pager button {
  color: #d8eafa;
  border-color: #52708a;
  background: #172b3f;
}
.nx-app--dark .nx-support-status {
  background: #142536;
}
.nx-app--dark .nx-support-status__search-box input,
.nx-app--dark .nx-support-ticket__head h3,
.nx-app--dark .nx-support-ticket__details dd {
  color: #f2f7fb;
}
.nx-app--dark .nx-support-ticket__details dt,
.nx-app--dark .nx-support-status__view label,
.nx-app--dark .nx-support-status__search label {
  color: #b9ccdc;
}
@media (max-width: 900px) {
  .nx-help-support__cards {
    grid-template-columns: 1fr;
  }
  .nx-support-status__toolbar {
    grid-template-columns: minmax(0, 1fr) 36px;
  }
  .nx-support-status__search {
    grid-column: 1 / -1;
  }
  .nx-support-ticket__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .nx-help-support {
    padding: 16px;
  }
  .nx-help-support-card__actions {
    flex-wrap: wrap;
  }
  .nx-app .nx-help-support-action {
    min-height: 44px;
  }
  .nx-support-ticket__details {
    grid-template-columns: 1fr;
  }
  .nx-support-status__pager,
  .nx-support-status__pager-info {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── v16.1 Ensure nx-del-modal confirm button always visible ── */
.nx-del-modal__confirm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 6px !important;
  background: #c50f1f !important;
  color: #ffffff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.nx-del-modal__confirm:hover:not(:disabled) { background: #a80e1a !important; }
.nx-del-modal__confirm:disabled { opacity: 0.65 !important; cursor: not-allowed !important; }
.nx-del-modal__footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; flex-wrap: nowrap !important; }

/* ── v16.2 Fix add-module-btn: override .nx-app button background:none reset ── */
.nx-app .nx-help-add-module-btn {
  background: #0078d4 !important;
  background-color: #0078d4 !important;
  color: #fff !important;
  border: none !important;
}
.nx-app .nx-help-add-module-btn:hover {
  background: #106ebe !important;
  background-color: #106ebe !important;
}
.nx-app .nx-help-add-module-btn svg path { fill: #fff !important; }

/* ── v16.2 Fix add-new-tile and del-modal buttons vs .nx-app button reset ── */
.nx-app .nx-help-add-new-tile {
  background: #f7f9fc !important;
  color: #0078d4 !important;
}
.nx-app .nx-help-add-new-tile:hover { background: #eef5fb !important; }
.nx-app .nx-del-modal__cancel {
  background: #ffffff !important;
  color: #424242 !important;
}
.nx-app .nx-del-modal__cancel:hover { background: #f5f5f5 !important; }

/* ── v16.3 Inline field validation styles ── */
.nhdf-input--error {
  border-color: #c50f1f !important;
  background: #fff8f8 !important;
}
.nhdf-input--error:focus {
  outline-color: #c50f1f !important;
  box-shadow: 0 0 0 2px rgba(197,15,31,0.12) !important;
}

/* ── v16.4 Fix Save/Update button invisible — override .nx-app button background:none reset ── */
.nx-app .nhdf-btn-primary,
button.nhdf-btn-primary {
  background: #0078d4 !important;
  background-color: #0078d4 !important;
  color: #fff !important;
  border: none !important;
  display: inline-flex !important;
}
.nx-app .nhdf-btn-primary:hover,
button.nhdf-btn-primary:hover {
  background: #106ebe !important;
  background-color: #106ebe !important;
}
.nx-app .nhdf-btn-primary:disabled,
button.nhdf-btn-primary:disabled {
  background: #a19f9d !important;
  background-color: #a19f9d !important;
  cursor: not-allowed !important;
}

/* Accessibility: Focus indicators */
.nx-app .nx-help-pill:focus-visible,
.nx-app .nx-help-add-module-btn:focus-visible,
.nx-app .nx-help-add-new-tile:focus-visible,
.nx-app .nx-help-card-add-btn:focus-visible,
.nx-app .nx-help-row-icon-btn:focus-visible,
.nx-app .nx-help-search-clear:focus-visible,
.nx-app .nx-help-cmd-esc:focus-visible,
.nx-app .nx-del-modal__cancel:focus-visible,
.nx-app .nx-del-modal__confirm:focus-visible,
.nx-app .nx-help-filter-banner__clear:focus-visible,
.nx-app .nx-help-ghost-btn:focus-visible,
.nx-app .nx-help-inline-link:focus-visible {
  outline: 2px solid #0078d4 !important;
  outline-offset: 2px !important;
}
.nx-app .nhdf-input:focus-visible {
  outline: 2px solid #0078d4 !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px rgba(0,120,212,0.15) !important;
}
.nx-app .nhdf-btn-primary:focus-visible {
  outline: 2px solid #0078d4 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0,120,212,0.2) !important;
}
.nx-app .nx-help-doc-row:focus-visible {
  outline: 2px solid #0078d4 !important;
  outline-offset: -2px !important;
  background: #f0f7ff !important;
}
.nx-app .nhdv-back-btn:focus-visible,
.nx-app .nhdv-nav__toggle:focus-visible,
.nx-app .nhdv-nav__chevron:focus-visible,
.nx-app .nhdv-nav__label:focus-visible,
.nx-app .nhdv-feedback__btn:focus-visible,
.nx-app .nhdv-rail__link:focus-visible {
  outline: 2px solid #0078d4 !important;
  outline-offset: 2px !important;
}
/* sr-only focusable skip link */
.sr-only--focusable:focus,
.sr-only--focusable:focus-visible {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 20px !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  background: #0078d4 !important;
  color: #fff !important;
  font: 600 14px/1 "Segoe UI", sans-serif !important;
  border-radius: 6px !important;
  z-index: 99999 !important;
  text-decoration: none !important;
}
/* Touch targets for icon buttons */
.nx-app .nx-help-row-icon-btn {
  min-width: 32px !important;
  min-height: 32px !important;
}

/* ── v17.0 Gradient buttons: Add new module + Save + Update ── */
.nx-app .nx-help-add-module-btn,
button.nx-help-add-module-btn {
  background: linear-gradient(135deg, #1a3a6b 0%, #0078D4 100%) !important;
  background-color: #1a3a6b !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(14, 127, 196, 0.35) !important;
}
.nx-app .nx-help-add-module-btn:hover,
button.nx-help-add-module-btn:hover {
  background: linear-gradient(135deg, #163260 0%, #0a6aab 100%) !important;
  box-shadow: 0 4px 12px rgba(14, 127, 196, 0.45) !important;
}
.nx-app .nx-help-add-module-btn:focus-visible,
button.nx-help-add-module-btn:focus-visible {
  outline: 2px solid #0078D4 !important;
  outline-offset: 2px !important;
}

.nx-app .nhdf-btn-primary,
button.nhdf-btn-primary {
  background: linear-gradient(135deg, #1a3a6b 0%, #0078D4 100%) !important;
  background-color: #1a3a6b !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(14, 127, 196, 0.35) !important;
  display: inline-flex !important;
}
.nx-app .nhdf-btn-primary:hover,
button.nhdf-btn-primary:hover {
  background: linear-gradient(135deg, #163260 0%, #0a6aab 100%) !important;
  box-shadow: 0 4px 12px rgba(14, 127, 196, 0.45) !important;
}
.nx-app .nhdf-btn-primary:focus-visible,
button.nhdf-btn-primary:focus-visible {
  outline: 2px solid #0078D4 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(14, 127, 196, 0.25) !important;
}
.nx-app .nhdf-btn-primary:disabled,
button.nhdf-btn-primary:disabled {
  background: linear-gradient(135deg, #8a9ab5 0%, #6ea8c8 100%) !important;
  box-shadow: none !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

/* ── Fix: replace-confirm "Yes, replace" button hidden by global button reset ── */
.nx-app .nhdf-btn-danger-solid {
  background: #b10e1c !important;
  color: #fff !important;
  border: none !important;
}
.nx-app .nhdf-btn-danger-solid:hover {
  background: #6e0811 !important;
}
.nx-app .nhdf-btn-danger-solid:focus-visible {
  outline: 2px solid #b10e1c !important;
  outline-offset: 2px !important;
}
.nx-app .nhdf-btn-ghost {
  background: transparent !important;
  border: 1px solid #d2d0ce !important;
  color: #201f1e !important;
}
.nx-app .nhdf-btn-ghost:hover {
  background: #f3f2f1 !important;
}

/* ── v17.1 Responsive font sizes: module cards (doc name, count, tile name, badge) ── */

/* >=1920px */
@media (min-width: 1920px) {
  .nx-help-cat-name   { font-size: 15px !important; }
  .nx-help-cat-count  { font-size: 12px !important; }
  .nx-help-doc-name   { font-size: 13px !important; }
  .nx-help-type-badge { font-size: 11px !important; }
}

/* >=1440px */
@media (min-width: 1440px) and (max-width: 1919px) {
  .nx-help-cat-name   { font-size: 14px !important; }
  .nx-help-cat-count  { font-size: 12px !important; }
  .nx-help-doc-name   { font-size: 13px !important; }
  .nx-help-type-badge { font-size: 10px !important; }
}

/* ~1280px */
@media (min-width: 1101px) and (max-width: 1439px) {
  .nx-help-cat-name   { font-size: 13px !important; }
  .nx-help-cat-count  { font-size: 11px !important; }
  .nx-help-doc-name   { font-size: 12px !important; }
  .nx-help-type-badge { font-size: 10px !important; }
}

/* <=1100px */
@media (max-width: 1100px) {
  .nx-help-cat-name   { font-size: 13px !important; }
  .nx-help-cat-count  { font-size: 11px !important; }
  .nx-help-doc-name   { font-size: 12px !important; }
  .nx-help-type-badge { font-size: 10px !important; }
}

/* <=900px */
@media (max-width: 900px) {
  .nx-help-cat-name   { font-size: 12px !important; }
  .nx-help-cat-count  { font-size: 10px !important; }
  .nx-help-doc-name   { font-size: 11px !important; }
  .nx-help-type-badge { font-size: 9px  !important; }
}

/* <=700px */
@media (max-width: 700px) {
  .nx-help-cat-name   { font-size: 12px !important; }
  .nx-help-cat-count  { font-size: 10px !important; }
  .nx-help-doc-name   { font-size: 11px !important; }
  .nx-help-type-badge { font-size: 9px  !important; }
}

/* ── NexusNotificationsPanel — notification flyout from topbar bell ── */
.nx-app .nx-notif-anchor { position: relative; }

.nx-app .nx-notif-backdrop { display: none; } /* kept for safety, no longer used */

/* Filter tabs — extend edge-to-edge inside the side panel body (which has 20px padding) */
.nx-app .nx-notif-filters {
  display: flex; gap: 2px;
  margin: -20px -20px 0;
  padding: 8px 20px 0;
  border-bottom: 1px solid #ebebeb; flex-shrink: 0; overflow-x: auto;
  scrollbar-width: none; background: #fff;
}
.nx-app .nx-notif-filters::-webkit-scrollbar { display: none; }
.nx-app--dark .nx-notif-filters { border-color: #333; background: #1f1f1f; }
.nx-app .nx-notif-filter {
  background: none !important; border: none !important; cursor: pointer;
  padding: 6px 10px; border-radius: 4px 4px 0 0; font-size: 12px;
  color: #616161; white-space: nowrap; display: flex; align-items: center; gap: 5px;
  border-bottom: 2px solid transparent !important; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.nx-app .nx-notif-filter:hover { color: #111; background: #f5f5f5 !important; }
.nx-app .nx-notif-filter--active {
  color: #0f6cbd !important; font-weight: 600;
  border-bottom-color: #0f6cbd !important;
}
.nx-app--dark .nx-notif-filter { color: #adadad; }
.nx-app--dark .nx-notif-filter:hover { color: #f3f3f3; background: #2a2a2a !important; }
.nx-app--dark .nx-notif-filter--active { color: #479ef5 !important; border-bottom-color: #479ef5 !important; }
.nx-app .nx-notif-filter-count {
  background: #0f6cbd; color: #fff; border-radius: 10px;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.nx-app .nx-notif-filter--active .nx-notif-filter-count { background: #0f6cbd; }

/* Sub-header */
.nx-app .nx-notif-subheader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 6px;
  flex-shrink: 0;
}
.nx-app .nx-notif-dismiss-all {
  background: none !important; border: none !important;
  color: #0f6cbd; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0;
}
.nx-app .nx-notif-dismiss-all:hover { text-decoration: underline; }
.nx-app .nx-notif-dismiss-all:focus-visible { outline: 2px solid #0f6cbd; outline-offset: 2px; }
.nx-app .nx-notif-last-updated { font-size: 11px; color: #707070; font-style: italic; }

/* Notification list — no fixed height; side panel body handles scroll */
.nx-app .nx-notif-list {
  padding: 4px 0 4px;
}

/* Date group label */
.nx-app .nx-notif-date-label {
  font-size: 11px; font-weight: 600; color: #707070;
  padding: 8px 6px 4px; text-transform: none;
}

/* Notification card */
.nx-app .nx-notif-card {
  background: #fafafa; border: 1px solid #ebebeb; border-radius: 8px;
  margin-bottom: 8px; padding: 12px 32px 12px 12px;
  position: relative; cursor: pointer;
  transition: background .12s;
}
.nx-app .nx-notif-card:hover { background: #f0f4fa; }
.nx-app .nx-notif-card:focus-visible { outline: 2px solid #0f6cbd; outline-offset: 1px; }
.nx-app .nx-notif-card--unread {
  border-left: 3px solid #0f6cbd;
  background: #f5f9ff;
}
.nx-app--dark .nx-notif-card { background: #2a2a2a; border-color: #3a3a3a; }
.nx-app--dark .nx-notif-card--unread { background: #1a2a3a; border-left-color: #0f6cbd; }

/* Dismiss × on card */
.nx-app .nx-notif-card-dismiss {
  position: absolute; top: 8px; right: 8px;
  background: none !important; border: none !important;
  color: #707070; cursor: pointer; padding: 3px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.nx-app .nx-notif-card:hover .nx-notif-card-dismiss { opacity: 1; }
.nx-app .nx-notif-card-dismiss:hover { background: #e6e6e6 !important; color: #111; }
.nx-app .nx-notif-card-dismiss:focus-visible { opacity: 1; outline: 2px solid #0f6cbd; outline-offset: 2px; }

/* Card body layout */
.nx-app .nx-notif-card-body { display: flex; gap: 10px; align-items: flex-start; }
.nx-app .nx-notif-card-content { flex: 1; min-width: 0; }
.nx-app .nx-notif-card-title {
  font-size: 13px; font-weight: 600; color: #111;
  margin-bottom: 3px; line-height: 1.3;
}
.nx-app--dark .nx-notif-card-title { color: #f3f3f3; }
.nx-app .nx-notif-card-msg {
  font-size: 12px; color: #444; line-height: 1.5;
}
.nx-app--dark .nx-notif-card-msg { color: #bdbdbd; }

/* Type icon */
.nx-app .nx-notif-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.nx-app .nx-notif-icon--info    { background: #ebf3fc; color: #0f6cbd; }
.nx-app .nx-notif-icon--success { background: #dff6dd; color: #0e700e; }
.nx-app .nx-notif-icon--warning { background: #fff4e0; color: #b06b09; }

/* View record button */
.nx-app .nx-notif-view-record {
  background: none !important; border: none !important;
  color: #0f6cbd; font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 4px 0 0; display: inline-block;
}
.nx-app .nx-notif-view-record:hover { text-decoration: underline; }

/* Footer count */
.nx-app .nx-notif-footer {
  border-top: 1px solid #ebebeb; padding: 10px 16px;
  font-size: 12px; color: #0f6cbd; text-align: center; flex-shrink: 0;
}
.nx-app--dark .nx-notif-footer { border-color: #333; color: #4fa3d8; }

/* ── Pagination bar ── */
.nx-app .nx-notif-pagination {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 16px 8px; border-bottom: 1px solid #ebebeb;
  flex-shrink: 0; background: #fafafa;
}
.nx-app .nx-notif-pg-btn {
  background: none !important; border: 1px solid transparent !important;
  border-radius: 4px; min-width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: #444; cursor: pointer;
  padding: 0 6px; transition: background .12s, border-color .12s;
}
.nx-app .nx-notif-pg-btn:hover:not(:disabled) {
  background: #e6f0fa !important; border-color: #0f6cbd !important; color: #0f6cbd;
}
.nx-app .nx-notif-pg-btn--active {
  background: #0f6cbd !important; color: #fff !important;
  border-color: #0f6cbd !important; font-weight: 700;
}
.nx-app .nx-notif-pg-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.nx-app .nx-notif-pg-info {
  margin-left: auto; font-size: 11px; color: #707070; white-space: nowrap;
}

/* Loading / spinner */
.nx-app .nx-notif-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 24px; flex: 1;
}
.nx-app .nx-notif-loading-more {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px; font-size: 12px; color: #707070;
}
.nx-app .nx-notif-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid #e0e0e0; border-top-color: #0f6cbd;
  border-radius: 50%; animation: nx-notif-spin .7s linear infinite;
}
@keyframes nx-notif-spin { to { transform: rotate(360deg); } }

/* Empty state */
.nx-app .nx-notif-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 16px;
  gap: 12px; color: #707070;
  font-size: 13px; font-weight: 600;
}
.nx-app .nx-notif-empty p { margin: 0; }

/* ── NexusToastHost — bottom-right business-aware toast stack ── */
.nx-app .nx-toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  pointer-events: none;
}

/* Individual toast */
.nx-app .nx-toast {
  pointer-events: all;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  border: 1px solid #e0e0e0;
  overflow: hidden;
  position: relative;
  font-family: "Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  transform: translateX(0);
  opacity: 1;
  transition: transform .28s cubic-bezier(.22,.68,0,1.2), opacity .28s ease;
}
.nx-app--dark .nx-toast { background: #1f1f1f; border-color: #333; }

/* Entrance animation */
.nx-app .nx-toast--entering {
  animation: nx-toast-in .3s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes nx-toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Exit animation */
.nx-app .nx-toast--leaving {
  animation: nx-toast-out .3s ease forwards;
}
@keyframes nx-toast-out {
  from { transform: translateX(0);    opacity: 1; max-height: 200px; }
  to   { transform: translateX(110%); opacity: 0; max-height: 0; margin: 0; padding: 0; }
}

/* Left accent bar */
.nx-app .nx-toast__bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 10px 0 0 10px;
}

/* Header row */
.nx-app .nx-toast__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 6px 16px;
}
.nx-app .nx-toast__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.nx-app .nx-toast__title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}
.nx-app--dark .nx-toast__title { color: #f3f3f3; }

/* "Action required" badge */
.nx-app .nx-toast__badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dismiss button */
.nx-app .nx-toast__close {
  background: none !important;
  border: none !important;
  color: #707070;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}
.nx-app .nx-toast__close:hover { background: #f0f0f0 !important; color: #111; }
.nx-app .nx-toast__close:focus-visible { outline: 2px solid #0f6cbd; outline-offset: 2px; }

/* Body text */
.nx-app .nx-toast__body {
  font-size: 12px;
  color: #444;
  line-height: 1.5;
  padding: 0 12px 8px 16px;
  /* Clamp to 2 lines so long messages don't make the toast too tall */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nx-app--dark .nx-toast__body { color: #bdbdbd; }
.nx-app--dark .nx-toast__progress { background: #333; }
.nx-app--dark .nx-toast__close { color: #a0a0a0; }
.nx-app--dark .nx-toast__close:hover { background: #333 !important; color: #f3f3f3; }

/* View record / open panel action link */
.nx-app .nx-toast__action {
  background: none !important;
  border: none !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 12px 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}
.nx-app .nx-toast__action:hover { text-decoration: underline; }
.nx-app .nx-toast__action:focus-visible { outline: 2px solid #0f6cbd; outline-offset: 2px; border-radius: 3px; }
.nx-app--dark .nx-toast__action,
.nx-app--dark .nx-toast__icon { color: #f2c94c !important; }

/* Countdown progress bar — 500ms transition matches timer tick interval */
.nx-app .nx-toast__progress {
  height: 3px;
  background: #f0f0f0;
  border-radius: 0 0 10px 0;
}
.nx-app .nx-toast__progress-fill {
  height: 3px;
  transition: width 500ms linear;
}
.nx-app .nx-toast__progress-fill--paused { transition: none; }

/* Dismiss-all button (shown when ≥2 toasts) */
.nx-app .nx-toast-dismiss-all {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid #ddd !important;
  border-radius: 6px;
  font-size: 11px; font-weight: 600; color: #444;
  min-height: 44px; padding: 4px 10px; cursor: pointer;
  margin-bottom: 6px; align-self: flex-end;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transition: background .12s;
}
.nx-app .nx-toast-dismiss-all:hover { background: #f5f5f5 !important; color: #0f6cbd; }
.nx-app .nx-toast-dismiss-all:focus-visible { outline: 2px solid #0f6cbd; outline-offset: 2px; }

/* Variant accent shadows */
.nx-app .nx-toast--push    { border-left: none; }
.nx-app .nx-toast--approval { border-left: none; }
.nx-app .nx-toast--success { border-left: none; }
.nx-app .nx-toast--error   { border-left: none; }
.nx-app .nx-toast--warning { border-left: none; }
.nx-app .nx-toast--info    { border-left: none; }
.nx-app .nx-toast--mention { border-left: none; }

/* Mobile: full width, bottom */
@media (max-width: 640px) {
  .nx-app .nx-toast-host {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    gap: 0;
  }
  .nx-app .nx-toast {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   ADVANCED FIND (nx-af-*) — appended after line 5287
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.nx-af-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    background:
      radial-gradient(ellipse at 75% 40%, rgba(21,134,216,0.45) 0%, transparent 55%),
      linear-gradient(120deg, #042952 0%, #0c3b5e 28%, #0f548c 58%, #0f6cbd 82%, #1586d8 100%);
    border-radius: 12px;
    margin: 16px 24px 0;
    position: relative;
    overflow: hidden;
}

.nx-af-hero__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    flex-shrink: 0;
}

.nx-af-hero__content {
    flex: 1;
}

.nx-af-hero__title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
}

.nx-af-hero__desc {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin: 4px 0 0;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
}

.nx-af-selectors {
    display: flex;
    gap: 24px;
    padding: 20px 24px 0;
    flex-wrap: wrap;
}

.nx-af-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px;
    flex: 1;
    max-width: 400px;
}

.nx-af-selector__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
}

.nx-af-combobox {
    position: relative;
}

.nx-af-combobox__input {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    font-size: 14px;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
    color: var(--text-primary);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

    .nx-af-combobox__input:focus {
        border-color: var(--brand-600);
        box-shadow: 0 0 0 2px rgba(15,108,189,0.15);
    }

    .nx-af-combobox__input:disabled {
        background: #f5f5f5;
        color: var(--text-tertiary);
        cursor: not-allowed;
    }

.nx-af-combobox__chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-tertiary);
}

.nx-af-combobox__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 4px;
}

.nx-af-combobox__option {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
    color: var(--text-primary);
}

    .nx-af-combobox__option:hover, .nx-af-combobox__option--active {
        background: #f0f4ff;
    }

    .nx-af-combobox__option[aria-selected="true"] {
        font-weight: 600;
        color: var(--brand-600);
    }

.nx-af-combobox__badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f0f0f0;
    color: var(--text-tertiary);
    font-weight: 500;
}

.nx-af-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    margin-top: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.nx-af-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
    color: var(--text-tertiary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s,border-color 0.15s;
}

    .nx-af-tab:hover:not(:disabled) {
        color: var(--text-primary);
    }

.nx-af-tab--active {
    color: var(--brand-600);
    border-bottom-color: var(--brand-600);
    font-weight: 600;
}

.nx-af-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nx-af-tab__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nx-af-state {
    padding: 48px 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-tertiary);
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
}

.nx-af-state--ready {
    text-align: left;
    padding: 24px;
    color: var(--text-primary);
}

.nx-af-state__hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

a.topbar__action {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

a.sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
}

    a.sidebar__item:hover {
        background: rgba(0,0,0,0.04);
    }

.nx-af-actionbar {
    display: flex;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: wrap;
}

.nx-af-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s,border-color 0.12s;
}

    .nx-af-action:hover {
        background: #f5f5f5;
        border-color: #bbb;
    }

    .nx-af-action svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.nx-af-filter-area {
    padding: 16px 24px;
    min-height: 200px;
}

.nx-af-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    font-size: 14px;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
}

.nx-af-alert--error {
    background: #fde7e9;
    color: var(--danger-500);
}

.nx-af-alert--success {
    background: #dff6dd;
    color: var(--success-500);
}

.nx-af-alert--info {
    background: #e8f4fd;
    color: var(--brand-600);
}

.nx-af-alert__close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
    padding: 0 4px;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .page-scroll {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) #nx-af-panel-results {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* ── Advanced Find: Dark mode ── */
.nx-app--dark .nx-af-combobox__input {
    background: #2b2b2b;
    border-color: #444;
    color: #e0e0e0;
}

    .nx-app--dark .nx-af-combobox__input:focus {
        border-color: #4dabf7;
        box-shadow: 0 0 0 2px rgba(77,171,247,0.2);
    }

    .nx-app--dark .nx-af-combobox__input:disabled {
        background: #1e1e1e;
        color: #666;
    }

.nx-app--dark .nx-af-combobox__list {
    background: #2b2b2b;
    border-color: #444;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.nx-app--dark .nx-af-combobox__option {
    color: #e0e0e0;
}

    .nx-app--dark .nx-af-combobox__option:hover, .nx-app--dark .nx-af-combobox__option--active {
        background: #333;
    }

    .nx-app--dark .nx-af-combobox__option[aria-selected="true"] {
        color: #4dabf7;
    }

.nx-app--dark .nx-af-combobox__badge {
    background: #333;
    color: #aaa;
}

.nx-app--dark .nx-af-selector__label {
    color: #bbb;
}

.nx-app--dark .nx-af-tabs {
    border-bottom-color: #333;
}

.nx-app--dark .nx-af-tab {
    color: #888;
}

    .nx-app--dark .nx-af-tab:hover:not(:disabled) {
        color: #ddd;
    }

.nx-app--dark .nx-af-tab--active {
    color: #4dabf7;
    border-bottom-color: #4dabf7;
}

.nx-app--dark .nx-af-state {
    color: #888;
}

.nx-app--dark .nx-af-state--ready {
    color: #ddd;
}

.nx-app--dark .nx-af-state__hint {
    color: #666;
}

.nx-app--dark a.sidebar__item:hover {
    background: rgba(255,255,255,0.06);
}

.nx-app--dark .nx-af-actionbar {
    border-bottom-color: #333;
}

.nx-app--dark .nx-af-action {
    background: #2b2b2b;
    border-color: #444;
    color: #ddd;
}

    .nx-app--dark .nx-af-action:hover {
        background: #333;
        border-color: #555;
    }

.nx-app--dark .nx-af-alert--error {
    background: #3b1419;
    color: #f8a0a8;
}

.nx-app--dark .nx-af-alert--success {
    background: #1a3a1a;
    color: #7ce07c;
}

.nx-app--dark .nx-af-alert--info {
    background: #142838;
    color: #6db8e8;
}
/* ── Advanced Find: Compact layout on Results tab ── */
.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-hero {
    padding: 12px 32px;
    margin-top: 8px;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-hero__icon {
    width: 32px;
    height: 32px;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-hero__title {
    font-size: 16px;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-hero__desc {
    display: none;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-selectors {
    padding: 8px 24px 0;
    gap: 16px;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-combobox__input {
    height: 30px;
    font-size: 13px;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-selector__label {
    font-size: 11px;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-tabs {
    margin-top: 8px;
}

.nx-app:has(.nx-af-grid-active:not(:where([data-nx-route-hidden] *))) .nx-af-tab {
    padding: 6px 12px;
    font-size: 13px;
}
/* ── Advanced Find: Right-side panels (Edit Columns, Save As) ── */
.nx-af-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 200;
}

.nx-af-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    z-index: 201;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI Variable","Segoe UI",sans-serif;
}

.nx-af-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
}

.nx-af-panel__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.nx-af-panel__close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0 4px;
}

    .nx-af-panel__close:hover {
        color: var(--text-primary);
    }

.nx-af-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.nx-af-panel__hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.nx-af-panel__section {
    margin-bottom: 16px;
}

.nx-af-panel__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.nx-af-panel__req {
    color: var(--danger-500);
}

.nx-af-panel__select {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}

.nx-af-panel__input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    outline: none;
}

    .nx-af-panel__input:focus {
        border-color: var(--brand-600);
        box-shadow: 0 0 0 2px rgba(15,108,189,0.15);
    }

.nx-af-panel__textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    outline: none;
    resize: vertical;
}

    .nx-af-panel__textarea:focus {
        border-color: var(--brand-600);
        box-shadow: 0 0 0 2px rgba(15,108,189,0.15);
    }

.nx-af-panel__error {
    font-size: 12px;
    color: var(--danger-500);
    margin-top: 4px;
    display: block;
}

.nx-af-panel__fieldlist {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 4px;
}

.nx-af-panel__fielditem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
}

    .nx-af-panel__fielditem:hover {
        background: #f5f5f5;
    }

    .nx-af-panel__fielditem input[type="checkbox"] {
        accent-color: var(--brand-600);
    }

.nx-af-panel__fieldtype {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary);
}

.nx-af-panel__selectedlist {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.nx-af-panel__selecteditem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    font-size: 13px;
    border-radius: 4px;
}

    .nx-af-panel__selecteditem:hover {
        background: #f5f5f5;
    }

.nx-af-panel__reorder {
    display: flex;
    gap: 4px;
}

    .nx-af-panel__reorder button {
        background: none;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
        padding: 2px 6px;
        color: var(--text-tertiary);
    }

        .nx-af-panel__reorder button:hover:not(:disabled) {
            background: #eee;
            color: var(--text-primary);
        }

        .nx-af-panel__reorder button:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

.nx-af-panel__foot {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid #e5e5e5;
}

.nx-af-action--primary {
    background: var(--brand-600);
    color: #fff;
    border-color: var(--brand-600);
}

    .nx-af-action--primary:hover {
        background: var(--brand-700);
        border-color: var(--brand-700);
    }
/* Panel left-shift */
.nx-app:has(.nx-af-page--panel-open:not(:where([data-nx-route-hidden] *))) .main {
    margin-right: 440px;
    transition: margin-right 0.2s;
}

.nx-app:has(.nx-af-page--panel-open:not(:where([data-nx-route-hidden] *))) .topbar {
    transition: margin-right 0.2s;
}
/* ── Dark mode: Panels ── */
.nx-app--dark .nx-af-panel {
    background: #1e1e1e;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
}

.nx-app--dark .nx-af-panel__head {
    border-bottom-color: #333;
}

.nx-app--dark .nx-af-panel__title {
    color: #e0e0e0;
}

.nx-app--dark .nx-af-panel__close {
    color: #888;
}

    .nx-app--dark .nx-af-panel__close:hover {
        color: #ddd;
    }

.nx-app--dark .nx-af-panel__hint {
    color: #888;
}

.nx-app--dark .nx-af-panel__label {
    color: #bbb;
}

.nx-app--dark .nx-af-panel__select {
    background: #2b2b2b;
    border-color: #444;
    color: #e0e0e0;
}

.nx-app--dark .nx-af-panel__input {
    background: #2b2b2b;
    border-color: #444;
    color: #e0e0e0;
}

    .nx-app--dark .nx-af-panel__input:focus {
        border-color: #4dabf7;
    }

.nx-app--dark .nx-af-panel__textarea {
    background: #2b2b2b;
    border-color: #444;
    color: #e0e0e0;
}

    .nx-app--dark .nx-af-panel__textarea:focus {
        border-color: #4dabf7;
    }

.nx-app--dark .nx-af-panel__fieldlist {
    border-color: #333;
}

.nx-app--dark .nx-af-panel__fielditem:hover {
    background: #2b2b2b;
}

.nx-app--dark .nx-af-panel__fieldtype {
    color: #666;
}

.nx-app--dark .nx-af-panel__selectedlist {
    border-color: #333;
}

.nx-app--dark .nx-af-panel__selecteditem:hover {
    background: #2b2b2b;
}

.nx-app--dark .nx-af-panel__reorder button {
    border-color: #444;
    color: #888;
}

    .nx-app--dark .nx-af-panel__reorder button:hover:not(:disabled) {
        background: #333;
        color: #ddd;
    }

.nx-app--dark .nx-af-panel__foot {
    border-top-color: #333;
}

.nx-app--dark .nx-af-action--primary {
    background: #4dabf7;
    color: #1e1e1e;
    border-color: #4dabf7;
}

    .nx-app--dark .nx-af-action--primary:hover {
        background: #339af0;
        border-color: #339af0;
    }
/* Hide grid toolbar chips/columns/views in Advanced Find results (AF has its own controls) */
#nx-af-panel-results .chip-row,
#nx-af-panel-results .add-filter-pill {
    display: none;
}



/* =====================================================================================
   RESTORED equipment-module styles (cards, print-label modal, deactivate confirm dialog,
   inspection-steps role matrix). These were dropped by an evil merge (delivered via PR 71917)
   and are re-added here verbatim from the last intact revision (f762d856f). The unrelated
   Test Execution ".nx-tx" block from that revision is intentionally not restored here.
   ===================================================================================== */
/* ===== Print Equipment Label modal (ported from mockup projects-grid-product.html) =====
   Centered premium modal + inspection label preview. Stage colors follow the classic
   Equipment label (red / yellow / green / blue / white) and are set inline in the markup. */
.nx-app .eq-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998;
  display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s;
}
.nx-app .eq-modal-overlay.show { display: flex; opacity: 1; }
.nx-app .eq-modal {
  background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  transform: scale(0.95); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 420px;
}
.nx-app .eq-modal-overlay.show .eq-modal { transform: scale(1); }
.nx-app .eq-modal-header {
  padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--gray-100);
}
.nx-app .eq-modal-header.gradient {
  background: linear-gradient(135deg, #1e3a5f 0%, #0078D4 60%, #3FBDE8 100%); border-bottom: none;
}
.nx-app .eq-modal-header.gradient h2 { color: #fff; }
.nx-app .eq-modal-header.gradient .eq-modal-close { color: #fff; background: rgba(255,255,255,0.15); }
.nx-app .eq-modal-header.gradient .eq-modal-close:hover { background: rgba(255,255,255,0.3); }
.nx-app .eq-modal-header h2 { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--gray-900); }
.nx-app .eq-modal-header .eq-modal-subtitle { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 2px; }
.nx-app .eq-modal-close {
  width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--gray-100);
  color: var(--gray-600); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.nx-app .eq-modal-body { flex: 1; overflow-y: auto; padding: 24px; }
.nx-app .eq-modal-footer {
  padding: 14px 24px; border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; gap: 10px;
  background: var(--gray-50);
}
.nx-app .eq-edit-btn-save {
  padding: 9px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, #0078D4, #1E40AF); color: #fff; border: none;
  transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px;
}
.nx-app .eq-edit-btn-save:hover { box-shadow: 0 3px 12px rgba(0,120,212,0.3); }
.nx-app .eq-edit-btn-save:disabled,
.nx-app .eq-edit-btn-save:disabled:hover { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.nx-app .eq-edit-btn-cancel {
  padding: 9px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--gray-700); border: 1px solid var(--gray-200); transition: all 0.15s;
}
.nx-app .eq-edit-btn-cancel:hover { background: var(--gray-50); }

/* Inspection label preview card */
.nx-app .eq-label-preview {
  background: #fff; border: 2px solid var(--gray-200); border-radius: 12px; padding: 24px;
  text-align: center;
}
.nx-app .eq-label-ms-logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.nx-app .eq-label-ms-logo span { font-size: 14px; font-weight: 600; color: var(--gray-800); }
/* Real (scannable) QR renders black-on-white, so no dark container background here. */
.nx-app .eq-label-qr { width: 95px; height: 95px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.nx-app .eq-label-title { font-size: 13px; font-weight: 600; color: var(--gray-600); margin-bottom: 12px; }
.nx-app .eq-label-equip-name { font-size: 14px; font-weight: 700; background: var(--gray-100); border-radius: 20px; padding: 6px 16px; display: inline-block; margin-bottom: 16px; }
.nx-app .eq-label-stages { display: flex; flex-direction: column; gap: 6px; }
.nx-app .eq-label-stage {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: #fff; text-transform: none;
}
.nx-app .eq-label-stage .sig-date { display: flex; gap: 40px; font-size: 10px; font-weight: 500; opacity: 0.9; }

/* Generic confirm dialog (NexusConfirmDialog) - type-to-confirm input. Mirrors the mockup's
   deactivate confirmation field (projects-grid-product.html). */
.nx-app .nx-confirm-type__label {
  display: block; font-size: 11px; font-weight: 600; color: var(--gray-500);
  text-transform: none; letter-spacing: normal; margin-bottom: 6px;
}
.nx-app .nx-confirm-type__input {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--gray-200); border-radius: 8px;
  font-size: 13px; font-family: inherit; transition: border-color 0.15s; box-sizing: border-box;
}
.nx-app .nx-confirm-type__input:focus { outline: none; border-color: #0078D4; }

/* Modal shell + confirm dialog (NexusConfirmDialog) - dark mode (.nx-app--dark).
   In dark mode the --gray-* text vars flip light, so the modal shell backgrounds must go dark to
   keep the body text / labels legible. Values mirror the mockup (projects-grid-product.html). */
.nx-app--dark .eq-modal-overlay { background: rgba(0,0,0,0.6); }
.nx-app--dark .eq-modal { background: #1A1A1A; border: 1px solid #334155; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.nx-app--dark .eq-modal-header { border-bottom-color: #334155; }
.nx-app--dark .eq-modal-header h2 { color: #93C5FD; }
.nx-app--dark .eq-modal-close { background: #334155; color: #ADADAD; }
.nx-app--dark .eq-modal-close:hover { background: #475569; color: #F1F5F9; }
.nx-app--dark .eq-modal-body { background: #1A1A1A; color: #F7F7F7; }
.nx-app--dark .eq-modal-footer { background: #1A1A1A; border-top-color: #334155; }
.nx-app--dark .eq-edit-btn-cancel { background: #374151; color: #F7F7F7; border-color: #4B5563; }
.nx-app--dark .eq-edit-btn-cancel:hover { background: #4B5563; }
.nx-app--dark .nx-confirm-type__label { color: #ADADAD; }
.nx-app--dark .nx-confirm-type__input { background: #141414; border-color: #334155; color: #F7F7F7; }
.nx-app--dark .nx-confirm-type__input::placeholder { color: #64748B; }
.nx-app--dark .nx-confirm-type__input:focus { border-color: #3B82F6; }

/* Equipment RFI summary card (NexusRfiSummaryCard) - donut + Open/Closed legend + actions.
   Colors from the mockup projects-grid-product.html (RFIs premium card v2). */
.nx-app .nx-rfi-card__icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  flex-shrink: 0; background: linear-gradient(135deg, #0078D4, #106EBE);
}
.nx-app .nx-rfi-card__title { font-size: var(--nx-type-panel-title); font-weight: 700; color: var(--text-primary); }
.nx-app .nx-rfi-card__chart { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.nx-app .nx-rfi-card__legend { flex: 1; }
.nx-app .nx-rfi-card__legrow { display: flex; align-items: center; gap: 6px; }
.nx-app .nx-rfi-card__legrow + .nx-rfi-card__legrow { margin-top: 6px; }
.nx-app .nx-rfi-card__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nx-app .nx-rfi-card__dot--open { background: #0078D4; }
.nx-app .nx-rfi-card__dot--closed { background: #E5E7EB; }
.nx-app .nx-rfi-card__leglabel { font-size: var(--nx-type-support); color: var(--gray-500); }
.nx-app .nx-rfi-card__legval { font-size: var(--nx-type-field-value); font-weight: 700; color: var(--gray-800); margin-left: auto; }
.nx-app .nx-rfi-card__btn {
  padding: 6px 14px; border-radius: 8px; font-size: var(--nx-type-button); font-weight: 600; cursor: pointer;
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); transition: all 0.15s;
}
.nx-app .nx-rfi-card__btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
/* Primary gradient matches the .eq-action--primary action-bar button (Admin "New account"), which is
   the reference style for every primary call to action in the New UI. */
.nx-app .nx-rfi-card__btn--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff; border: none; box-shadow: 0 2px 8px rgba(0,120,212,0.25); }
.nx-app .nx-rfi-card__btn--primary:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); color: #fff; box-shadow: 0 4px 14px rgba(0,120,212,0.35); transform: translateY(-1px); }
.nx-app .nx-rfi-card__btn--primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,120,212,0.3); }
.nx-app .nx-rfi-card__btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
/* Dark-mode secondary ("+ New") button: light-mode hardcodes #fff so the label is invisible on the
   dark card. Placed after the base rule to win the equal-specificity tie; primary is excluded. */
.nx-app--dark .nx-rfi-card__btn:not(.nx-rfi-card__btn--primary) { background: #152033; color: #F7F7F7; border-color: #33415a; }
.nx-app--dark .nx-rfi-card__btn:not(.nx-rfi-card__btn--primary):hover { background: #1c2a40; border-color: #47597a; }

/* Equipment Open Issues summary card (NexusOpenIssuesSummaryCard) - priority bar chart + avg days
   + actions. Colors from the mockup projects-grid-product.html (Open Issues premium card v2). */
.nx-app .nx-issues-card__icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  flex-shrink: 0; background: linear-gradient(135deg, #C78800, #986000);
}
.nx-app .nx-issues-card__title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.nx-app .nx-issues-card__badge {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: #FEF3C7; color: #92400E;
}
.nx-app .nx-issues-card__chart { padding: 8px 0; }
.nx-app .nx-issues-card__bars {
  display: flex; align-items: flex-end; gap: 6px; height: 56px; padding: 0 4px;
}
.nx-app .nx-issues-card__bar {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%;
  justify-content: flex-end;
}
.nx-app .nx-issues-card__barfill { width: 100%; border-radius: 4px 4px 0 0; }
.nx-app .nx-issues-card__barfill--urgent { background: linear-gradient(180deg, #EF4444, #DC2626); }
.nx-app .nx-issues-card__barfill--high { background: linear-gradient(180deg, #F59E0B, #D97706); }
.nx-app .nx-issues-card__barfill--normal { background: linear-gradient(180deg, #0078D4, #0078D4); }
.nx-app .nx-issues-card__barfill--low { background: linear-gradient(180deg, #10B981, #059669); }
.nx-app .nx-issues-card__barlabel { font-size: 9px; color: var(--gray-500); }
.nx-app .nx-issues-card__avg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-left: 10px; border-left: 1px dashed var(--gray-200); min-width: 50px; height: 100%;
}
.nx-app .nx-issues-card__avgval { font-size: 20px; font-weight: 800; color: #D97706; }
.nx-app .nx-issues-card__avglabel { font-size: 9px; color: var(--gray-500); text-align: center; }
.nx-app .nx-issues-card__btn {
  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); transition: all 0.15s;
}
.nx-app .nx-issues-card__btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
/* Primary gradient matches .eq-action--primary (Admin "New account"). See the RFI card above. */
.nx-app .nx-issues-card__btn--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff; border: none; box-shadow: 0 2px 8px rgba(0,120,212,0.25); }
.nx-app .nx-issues-card__btn--primary:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); color: #fff; box-shadow: 0 4px 14px rgba(0,120,212,0.35); transform: translateY(-1px); }
.nx-app .nx-issues-card__btn--primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,120,212,0.3); }
.nx-app .nx-issues-card__btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
/* Dark-mode secondary ("+ New") button; placed after the base rule to win the specificity tie. */
.nx-app--dark .nx-issues-card__btn:not(.nx-issues-card__btn--primary) { background: #152033; color: #F7F7F7; border-color: #33415a; }
.nx-app--dark .nx-issues-card__btn:not(.nx-issues-card__btn--primary):hover { background: #1c2a40; border-color: #47597a; }

/* Equipment Attachments summary card (NexusAttachmentsSummaryCard) - file preview list + View All.
   Colors from the mockup projects-grid-product.html (Attachments premium card v2). */
.nx-app .nx-attach-card__icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  flex-shrink: 0; background: linear-gradient(135deg, #10B981, #059669);
}
.nx-app .nx-attach-card__title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.nx-app .nx-attach-card__badge {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: #D1FAE5; color: #065F46;
}
.nx-app .nx-attach-card__files { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; }
.nx-app .nx-attach-card__file {
  display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gray-600);
  padding: 3px 8px; border-radius: 4px;
}
.nx-app .nx-attach-card__file svg { flex-shrink: 0; }
.nx-app .nx-attach-card__filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-attach-card__more {
  font-size: 11px; color: var(--gray-600); font-style: italic; padding: 3px 8px;
}
.nx-app .nx-attach-card__btn {
  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); transition: all 0.15s;
}
.nx-app .nx-attach-card__btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
/* Primary gradient matches .eq-action--primary (Admin "New account"). See the RFI card above. */
.nx-app .nx-attach-card__btn--primary { background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); color: #fff; border: none; box-shadow: 0 2px 8px rgba(0,120,212,0.25); }
.nx-app .nx-attach-card__btn--primary:hover { background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); color: #fff; box-shadow: 0 4px 14px rgba(0,120,212,0.35); transform: translateY(-1px); }
.nx-app .nx-attach-card__btn--primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,120,212,0.3); }

/* ============================================================
   Inspection Steps Role Matrix (.eq-rm-*) - premium table
   Ported verbatim from the mockup (projects-grid-product.html).
   Dark-mode overrides mapped from body.dark-mode to .nx-app--dark.
   ============================================================ */
.nx-app .eq-rm-panel { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.eq-rm-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02); }
.eq-rm-header { padding: 18px 24px; background: linear-gradient(135deg, #00243a 0%, #0078D4 60%, #106EBE 100%); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.eq-rm-header-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; }
.eq-rm-header-subtitle { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.eq-rm-header-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eq-rm-search { font-size: 12px; padding: 7px 14px 7px 34px; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; background: rgba(255,255,255,0.12); color: #fff; width: 200px; outline: none; transition: all 0.2s; backdrop-filter: blur(4px); }
.eq-rm-search::placeholder { color: rgba(255,255,255,0.55); }
.eq-rm-search:focus { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
.eq-rm-filter-select { font-size: 12px; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; background: rgba(255,255,255,0.12); color: #fff; outline: none; cursor: pointer; backdrop-filter: blur(4px); }
.eq-rm-filter-select option { color: var(--gray-800); background: #fff; }
.eq-rm-stat-badge { font-size: 11px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.18); padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(4px); white-space: nowrap; }
.eq-rm-table-wrap { overflow-x: auto; position: relative; }
.eq-rm-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.eq-rm-table thead th { padding: 12px 10px; font-size: 10px; font-weight: 700; color: var(--gray-600); text-transform: none; letter-spacing: normal; text-align: center; background: #F8FAFC; border-bottom: 2px solid var(--gray-200); white-space: nowrap; position: sticky; top: 0; z-index: 2; }
.eq-rm-table thead th:first-child, .eq-rm-table thead th:nth-child(2) { position: sticky; z-index: 3; text-align: left; background: #F8FAFC; }
.eq-rm-table thead th:first-child { left: 0; min-width: 70px; }
.eq-rm-table thead th:nth-child(2) { left: 70px; min-width: 160px; }
.eq-rm-table tbody td { padding: 10px 10px; text-align: center; border-bottom: 1px solid var(--gray-100); transition: background 0.15s ease; }
.eq-rm-table tbody td:first-child, .eq-rm-table tbody td:nth-child(2) { position: sticky; background: #fff; z-index: 1; text-align: left; }
.eq-rm-table tbody td:first-child { left: 0; min-width: 70px; font-weight: 600; color: var(--gray-600); font-size: 11px; }
.eq-rm-table tbody td:nth-child(2) { left: 70px; min-width: 160px; font-weight: 600; color: var(--gray-800); }
.eq-rm-table tbody tr:hover td { background: rgba(0,120,212,0.04); }
.eq-rm-table tbody tr:nth-child(even) td { background: #FAFBFC; }
.eq-rm-table tbody tr:nth-child(even):hover td { background: rgba(0,120,212,0.06); }
.eq-rm-table tbody tr:nth-child(even) td:first-child, .eq-rm-table tbody tr:nth-child(even) td:nth-child(2) { background: #FAFBFC; }
.eq-rm-table tbody tr:hover td:first-child, .eq-rm-table tbody tr:hover td:nth-child(2) { background: rgba(0,120,212,0.04); }
.eq-rm-level-group td { background: linear-gradient(90deg, var(--gray-50), #fff) !important; padding: 8px 14px !important; font-size: 11px !important; font-weight: 700 !important; color: var(--gray-700) !important; text-transform: none; letter-spacing: normal; border-bottom: 2px solid var(--gray-200) !important; }
.eq-rm-level-group td:first-child { border-left: 3px solid var(--brand-500); }
.eq-rm-cell-allow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color: #047857; font-weight: 700; font-size: 13px; box-shadow: 0 1px 3px rgba(5,150,105,0.15); transition: transform 0.15s, box-shadow 0.15s; }
.eq-rm-cell-allow:hover { transform: scale(1.1); box-shadow: 0 2px 6px rgba(5,150,105,0.25); }
.eq-rm-cell-deny { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #FEE2E2, #FECACA); color: #B91C1C; font-weight: 700; font-size: 13px; box-shadow: 0 1px 3px rgba(185,28,28,0.1); transition: transform 0.15s, box-shadow 0.15s; }
.eq-rm-cell-deny:hover { transform: scale(1.1); box-shadow: 0 2px 6px rgba(185,28,28,0.2); }
.eq-rm-cell-na { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--gray-100); color: var(--gray-400); font-weight: 600; font-size: 12px; }
.eq-rm-legend { padding: 14px 20px; background: #F8FAFC; border-top: 1px solid var(--gray-200); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.eq-rm-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--gray-600); font-weight: 500; }
.eq-rm-legend-dot { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; }
.eq-rm-col-header { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.eq-rm-col-avatar { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; }

/* Role Matrix - dark mode (.nx-app--dark) */
.nx-app--dark .eq-rm-card { background: #1A1A1A; border-color: #334155; }
.nx-app--dark .eq-rm-header { background: linear-gradient(135deg, #141414 0%, #1E3A5F 60%, #1E40AF 100%); }
.nx-app--dark .eq-rm-table thead th { background: #141414; color: #ADADAD; border-color: #334155; }
.nx-app--dark .eq-rm-table thead th:first-child,
.nx-app--dark .eq-rm-table thead th:nth-child(2) { background: #141414; }
.nx-app--dark .eq-rm-table tbody td { border-color: #334155; color: #F7F7F7; }
.nx-app--dark .eq-rm-table tbody td:first-child,
.nx-app--dark .eq-rm-table tbody td:nth-child(2) { background: #1A1A1A; }
.nx-app--dark .eq-rm-table tbody tr:nth-child(even) td { background: #141414; }
.nx-app--dark .eq-rm-table tbody tr:nth-child(even) td:first-child,
.nx-app--dark .eq-rm-table tbody tr:nth-child(even) td:nth-child(2) { background: #141414; }
.nx-app--dark .eq-rm-table tbody tr:hover td { background: rgba(0,120,212,0.08) !important; }
.nx-app--dark .eq-rm-table tbody tr:hover td:first-child,
.nx-app--dark .eq-rm-table tbody tr:hover td:nth-child(2) { background: rgba(0,120,212,0.08) !important; }
.nx-app--dark .eq-rm-level-group td { background: linear-gradient(90deg, #141414, #1A1A1A) !important; color: #CBD5E1 !important; border-color: #334155 !important; }
.nx-app--dark .eq-rm-legend { background: #141414; border-color: #334155; }
.nx-app--dark .eq-rm-legend-item { color: #ADADAD; }
.nx-app--dark .eq-rm-cell-na { background: #334155; color: #64748B; }
.nx-app--dark .eq-rm-filter-select option { color: #F7F7F7; background: #1A1A1A; }
.nx-app--dark .eq-rm-table-wrap { background: #1A1A1A; }

/* =====================================================================================
   Documents (New UI DAMS File Manager) — NexusDamsFileManager + NexusTreeComponent
   Telerik-free. New styles only; scoped to .nx-app. See NewUI-Documents-Plan.md.
   ===================================================================================== */

/* ---- Generic reusable tree (NexusTreeComponent / NexusTreeNode) ---- */
.nx-app .nx-tree { list-style: none; margin: 0; padding: 4px 0; font-size: 14px; }
.nx-app .nx-tree__group { list-style: none; margin: 0; padding: 0; }
.nx-app .nx-tree__item { position: relative; }
.nx-app .nx-tree__row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text-primary, #242424); outline: none; user-select: none; border: 1px solid transparent; margin: 1px 0; }
.nx-app .nx-tree__row:hover { background: var(--gray-100, #f5f5f5); }
.nx-app .nx-tree__row:focus-visible { box-shadow: 0 0 0 2px var(--brand-600, #0f6cbd) inset; }
.nx-app .nx-tree__row--selected { position: relative; background: rgba(15, 108, 189, 0.08); color: var(--brand-600, #0f6cbd); font-weight: 600; border-color: rgba(15, 108, 189, 0.12); }
.nx-app .nx-tree__row--selected::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 2px; background: var(--brand-600, #0f6cbd); }
.nx-app .nx-tree__row--selected:hover { background: rgba(15, 108, 189, 0.12); }
.nx-app .nx-tree__chevron { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 0; cursor: pointer; color: var(--text-tertiary, #616161); transition: transform .12s ease; }
.nx-app .nx-tree__chevron--open { transform: rotate(90deg); }
.nx-app .nx-tree__chevron--placeholder { cursor: default; }
.nx-app .nx-tree__icon { flex: 0 0 16px; display: inline-flex; color: #d4a017; }
.nx-app .nx-tree__row--selected .nx-tree__icon { color: var(--brand-600, #0f6cbd); }
.nx-app .nx-tree__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-tree__spinner { flex: 0 0 12px; width: 12px; height: 12px; border: 2px solid #c7d3e6; border-top-color: #0f6cbd; border-radius: 50%; animation: nx-doc-spin .7s linear infinite; }

/* ---- Documents host layout ---- */
.nx-app .nx-doc { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; min-height: 0; background: #fff; }
.nx-app .nx-doc__alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 10px 14px; background: #fff4ce; border: 1px solid #f2d17c; border-radius: 6px; color: #6a5100; font-size: 13px; }
.nx-app .nx-doc__alert-close { border: none; background: transparent; cursor: pointer; color: #6a5100; font-size: 13px; line-height: 1; padding: 2px 4px; }

.nx-app .nx-doc__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid #e6e8ec; }
/* The actions group absorbs the free space and the search keeps its intrinsic width, so the search
   stays on the first row next to the buttons instead of being the thing that wraps. */
.nx-app .nx-doc__toolbar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
/* Menu items are permission- and selection-gated, so they can render disabled. */
.nx-app .nx-doc__toolbar .eq-more__menu button:disabled { opacity: .45; cursor: default; }
.nx-app .nx-doc__toolbar .eq-more__menu button:disabled:hover { background: none; }

/* Sizing only; the pill, icon, focus ring and clear button all come from the shared .search-input
   rules (~line 1090), the same ones the attachment toolbar uses. Matches .nxat__search so the two
   toolbars present an identical control. */
.nx-app .nx-doc__search.search-input { height: 34px; flex: 0 1 240px; min-width: 150px; max-width: 300px; margin-left: auto; }
.nx-app .nx-doc__search.search-input input { font-size: var(--nx-type-search); min-width: 0; }

.nx-app .nx-doc__split { display: flex; flex: 1 1 auto; min-height: 0; gap: 0; margin-top: 0; border: 1px solid #e6e8ec; border-radius: 8px; overflow: hidden; }
.nx-app .nx-doc__tree-pane { flex: 0 0 24%; min-width: 200px; max-width: 340px; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid #e6e8ec; background: var(--gray-50, #fafafa); }
.nx-app .nx-doc__sidebar-header { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; font-size: 13px; font-weight: 600; color: var(--text-primary, #000); border-bottom: 1px solid var(--border-default, #e0e0e0); }
.nx-app .nx-doc__sidebar-header svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--brand-500, #0078d4); }
.nx-app .nx-doc__sidebar-search { padding: 10px 12px; border-bottom: 1px solid var(--border-default, #e0e0e0); }
.nx-app .nx-doc__sidebar-search-wrap { position: relative; }
.nx-app .nx-doc__sidebar-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-tertiary, #616161); pointer-events: none; }
.nx-app .nx-doc__sidebar-search-input { width: 100%; box-sizing: border-box; padding: 7px 12px 7px 32px; font-size: 12px; border: 1px solid var(--border-default, #e0e0e0); border-radius: 6px; background: #fff; color: var(--text-primary, #000); outline: none; }
.nx-app .nx-doc__sidebar-search-input:focus { border-color: var(--brand-500, #0078d4); box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.2); }
.nx-app .nx-doc__tree-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 8px; }
.nx-app .nx-doc__sidebar-footer { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-top: 1px solid var(--border-default, #e0e0e0); }
.nx-app .nx-doc__sidebar-footer-btn { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; font-weight: 500; text-align: left; color: var(--text-tertiary, #616161); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.nx-app .nx-doc__sidebar-footer-btn:hover:not(:disabled) { background: var(--gray-100, #f5f5f5); color: var(--brand-500, #0078d4); }
.nx-app .nx-doc__sidebar-footer-btn:disabled { opacity: 0.5; cursor: default; }
.nx-app .nx-doc__sidebar-footer-btn svg { flex: 0 0 14px; width: 14px; height: 14px; }
.nx-app .nx-doc__content-pane { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.nx-app .nx-doc__breadcrumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--border-default, #e1dfdd); background: var(--gray-50, #fafafa); font-size: 12px; color: var(--text-secondary, #424242); }
.nx-app .nx-doc__crumb { border: none; background: transparent; padding: 2px 4px; color: var(--brand-600, #0f6cbd); font-weight: 500; cursor: pointer; border-radius: 4px; font-size: 12px; }
.nx-app .nx-doc__crumb:hover { background: #eef4fc; text-decoration: underline; }
.nx-app .nx-doc__crumb--current { color: var(--text-primary, #000); font-weight: 600; cursor: default; }
.nx-app .nx-doc__crumb--current:hover { background: transparent; text-decoration: none; }
.nx-app .nx-doc__crumb-sep { color: var(--text-tertiary, #616161); }

/* ── Documents grid: shares the attachment-grid baseline ──
   The table shell and body typography below are the same recipe as NexusAttachmentGrid, and the
   header chrome is literally the same rule (see .nx-app :is(.nx-attach, .nx-doc) .nxg__table thead th
   further down), so the two surfaces cannot drift apart. Sizes come from the shared --nx-type-* tokens
   rather than literals, so a change to the ramp moves both grids together.
   border-collapse: separate with zero spacing, not collapse: a collapsed border belongs to the table
   rather than the cell, so it stays put while a sticky th scrolls and the header loses its divider. */
.nx-app .nx-doc .nxg__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--nx-type-cell);
}

.nx-app .nx-doc .nxg__table tbody td {
  padding: 12px;
  border-bottom: none;
  vertical-align: middle;
  font-size: var(--nx-type-cell);
  color: var(--text-primary, #000);
}

.nx-app .nx-doc .nxg__table tbody tr:hover td { background: rgba(15, 108, 189, 0.03); }

.nx-app .nx-doc__col-check { width: 44px; }
/* AI summary cell now uses the shared .nx-ai-link / .nx-ai-note / .nx-ai-popover rules (~line 16881),
   the same ones the attachment grids use, so only the cell needs styling here: the popover is
   absolutely positioned and must resolve against this cell, and it must not be clipped. */
.nx-app .nx-doc__col-ai { width: 190px; position: relative; overflow: visible; }
.nx-app .nx-doc__col-version { width: 84px; }
.nx-app .nx-doc__col-path { max-width: 360px; }
.nx-app .nx-doc__row--selected > td { background: #eaf2ff !important; }
.nx-app .nx-doc__empty { text-align: center; color: #7a828e; padding: 24px 8px; font-style: italic; }

/* ---- Generic reusable grid (NexusGrid) ---- */
.nx-app .nxg { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* The grid body is capped and scrolls internally rather than growing without limit. */
.nx-app .nxg__table-wrap { position: relative; flex: 1 1 auto; min-height: 0; height: auto; max-height: 440px; overflow: auto; scrollbar-width: thin; }
.nx-app .nxg__loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(1px); }
.nx-app .nxg__loading-text { font-size: var(--nx-type-helper); color: var(--text-secondary); }
.nx-app .nxg__spinner { width: 22px; height: 22px; border: 3px solid var(--border-subtle, #d0d0d0); border-top-color: var(--accent, #0f6cbd); border-radius: 50%; animation: nxg-spin 0.7s linear infinite; }
@keyframes nxg-spin { to { transform: rotate(360deg); } }
/* border-collapse: separate (with zero spacing) rather than collapse: a collapsed border belongs to
   the table, not the cell, so it stays behind while a sticky th scrolls and the header loses its
   divider. Matches .nx-insp-grid. */
.nx-app .nxg__table { width: 100%; border-collapse: separate; border-spacing: 0; }
/* Sticky header for the capped body. A sticky th does not carry its thead/tr background, so the header
   colour is chained down explicitly: thead holds the surface colour (or a grid's own tinted tr wins),
   tr inherits it, and the th inherits from tr. Without this the rows show through the header. */
.nx-app .nxg__table thead { background-color: var(--bg-card, #fff); }
.nx-app .nxg__table thead tr { background-color: inherit; }
.nx-app .nxg__table thead th { position: sticky; top: 0; z-index: 1; background-color: inherit; }
/* Column resizing: a hit area on the header's trailing edge. Dragging trades width with the next
   column, so the table total never changes. */
.nx-app .nxg__table thead th:has(.nxg__col-resizer) { position: sticky; }
.nx-app .nxg__col-resizer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 8;
  width: 8px; cursor: col-resize; touch-action: none;
}
.nx-app .nxg__col-resizer::after {
  content: ""; position: absolute; top: 20%; bottom: 20%; left: 3px;
  width: 1px; background: transparent; transition: background-color .15s ease;
}
.nx-app .nxg__col-resizer:hover::after { background: var(--brand-600, #0f6cbd); }
body.nxg-resizing { cursor: col-resize; user-select: none; }
.nx-app .nxg__row--selected > td { background: #eaf2ff !important; }
.nx-app .nxg__empty { text-align: center; color: var(--text-tertiary); padding: 24px 8px; }
.nx-app .nxg__cell--center { text-align: center; }
.nx-app .nxg__cell--right { text-align: right; }
.nx-app .nxg__sort-btn { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.nx-app .nxg__sort-btn:hover { color: var(--brand-700, #0f4a91); }
.nx-app .nxg__sort-btn--active { color: var(--brand-700, #0f4a91); }
.nx-app .nxg__sort-caret { font-size: var(--nx-type-badge); line-height: 1; }
.nx-app .nxg__pager { display: flex; align-items: center; gap: 2px; padding: 8px 12px; border-top: 1px solid #eef0f3; font-size: var(--nx-type-footer); flex: 0 0 auto; }
.nx-app .nxg__pager-info { font-size: var(--nx-type-footer); color: var(--text-secondary); white-space: nowrap; }
.nx-app .nxg__pager-spacer { flex: 1 1 auto; }
.nx-app .nxg__pager-btn { width: 24px; height: 24px; border: none; background: var(--bg-subtle); border-radius: var(--r-full); cursor: pointer; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.nx-app .nxg__pager-btn:hover:not(:disabled) { background: var(--brand-50); color: var(--brand-700); }
.nx-app .nxg__pager-btn:disabled { opacity: 0.4; cursor: default; }
.nx-app .nxg__pager-label { font-size: var(--nx-type-footer); font-weight: 600; color: var(--text-tertiary); white-space: nowrap; padding: 0 2px; }
.nx-app .nxg__pager-num { min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; background: transparent; border-radius: var(--r-md, 6px); cursor: pointer; color: var(--brand-700, #0f4a91); font-size: var(--nx-type-footer); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.nx-app .nxg__pager-num:hover:not(.nxg__pager-num--active) { background: var(--brand-50, #eef4fb); }
.nx-app .nxg__pager-num--active { background: var(--brand-600, #0f6cbd); color: #fff; cursor: default; }
.nx-app .nxg__pager-ellipsis { min-width: 20px; text-align: center; color: var(--text-tertiary); user-select: none; }
.nx-app--dark .nxg__row--selected > td { background: #1d3a5f !important; }

/* ---- Shared AI summary cell (attachment grids) ----------------------------------------------
   Mirrors the Documents (DAMS) AI summary affordance, but rendered as inline link text so it reads
   as secondary metadata inside a dense row instead of competing with the row actions. */
.nx-app .nx-ai-cell { position: relative; }
/* Screen-reader-only text (used by the always-present AI summary live region). */
.nx-app .nx-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nx-app .nx-ai-link {
    border: none; background: none; padding: 0; margin: 0;
    font: inherit; font-size: var(--nx-type-grid-cell); font-weight: 500;
    color: var(--brand-600, #0f6cbd); text-decoration: none;
    cursor: pointer; white-space: nowrap; text-align: left;
}
.nx-app .nx-ai-link:hover { color: var(--brand-700, #0f4a91); text-decoration: none; }
.nx-app .nx-ai-link:focus-visible { outline: 2px solid var(--brand-600, #0f6cbd); outline-offset: 2px; border-radius: 2px; }
/* Same size as the surrounding grid cells and the .nx-ai-link next to them, so "Not applicable" /
   "Generating..." read as ordinary cell text rather than a smaller footnote. */
.nx-app .nx-ai-note { font-size: var(--nx-type-grid-cell); color: var(--text-tertiary); white-space: nowrap; }
.nx-app .nx-ai-note--busy { color: var(--text-secondary); }
/* position:fixed, not absolute: the panel lives inside .nxg__table-wrap, which is an overflow:auto
   scroller with a sticky header, so an absolutely positioned panel was clipped by the scrollport and
   painted underneath the header as soon as the grid scrolled. Fixed escapes every ancestor clip; the
   coordinates and the fitted max-height are written by initAiPanels() in js/nexus-new-ui.js, which
   also flips the panel above or below the link depending on the room available. The z-index clears
   the sticky header and the floating attach bar, and sits just below the nx-tip bubble (13000). */
.nx-app .nx-ai-popover {
    position: fixed; z-index: 12500; top: auto; left: auto; right: auto;
    width: 320px; max-height: 240px; overflow: auto;
    padding: 12px 30px 12px 12px;
    background: var(--bg-card, #fff); color: var(--text-primary);
    border: 1px solid var(--border-default); border-radius: var(--r-md, 6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    white-space: normal;
    overscroll-behavior: contain;
}
.nx-app .nx-ai-popover__content { font-size: var(--nx-type-helper); line-height: 1.5; word-wrap: break-word; }
.nx-app .nx-ai-popover__close {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: var(--r-full, 999px);
    color: var(--text-tertiary); cursor: pointer; font-size: var(--nx-type-helper); line-height: 1;
}
.nx-app .nx-ai-popover__close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nx-app--dark .nx-ai-link { color: #60A5FA; }
.nx-app--dark .nx-ai-link:hover { color: #93C5FD; }
.nx-app--dark .nx-ai-popover { background: var(--bg-elevated); border-color: var(--border-default); }
.nx-app .nx-doc__path { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.nx-app .nx-doc__name { display: inline-flex; align-items: center; gap: 10px; border: none; background: transparent; padding: 0; cursor: pointer; color: #2563EB; font-size: inherit; max-width: 100%; min-width: 0; }
.nx-app .nx-doc__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Let the name text flex and truncate while the leading icon keeps its size. */
.nx-app .nx-doc__name > span:not(.nx-doc__file-icon),
.nx-app .nx-doc__name > a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-doc__name--folder { color: var(--text-primary, #141414); font-weight: 400; }
.nx-app .nx-doc__name--folder:hover { text-decoration: underline; }
/* Keep the folder icon at its intrinsic size; the file-type icon sits in a tinted well (mockup .doc-file-name__icon). */
.nx-app .nx-doc__name > svg { flex: 0 0 18px; width: 18px; height: 18px; }
.nx-app .nx-doc__file-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.nx-app .nx-doc__file-icon svg { width: 18px; height: 18px; }
.nx-app .nx-doc__file-icon--pdf { background: #fef2f2; }
.nx-app .nx-doc__file-icon--doc { background: #eff6ff; }
.nx-app .nx-doc__file-icon--xls { background: #ecfdf5; }
.nx-app .nx-doc__file-icon--img { background: #fffbeb; }
.nx-app .nx-doc__file-icon--other { background: var(--gray-100, #f5f5f5); }

/* ---- Mockup parity (DamsDocuments.bmp): tree folder icon + font size, grid file-name colour ---- */
/* Tree font-size matches the mockup sidebar items (13px). */
.nx-app .nx-doc__tree-pane .nx-tree { font-size: 13px; }
.nx-app .nx-doc__tree-pane .nx-tree__icon { flex: 0 0 18px; width: 18px; height: 18px; }
.nx-app .nx-doc__tree-folder-svg { width: 18px; height: 18px; }
/* Grid first column (file name) uses the mockup's blue link colour. */
/* Non-clickable file names match the other columns' text colour. */
.nx-app .nx-doc__file-name { color: var(--text-primary, #141414); font-weight: 400; text-decoration: none; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clickable (previewable) file links use the same colour as the linkable breadcrumb item. */
.nx-app button.nx-doc__file-name { background: transparent; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; width: 100%; }
.nx-app a.nx-doc__file-name, .nx-app button.nx-doc__file-name { color: var(--brand-700, #115ea3); font-weight: 500; cursor: pointer; }
.nx-app a.nx-doc__file-name:hover, .nx-app button.nx-doc__file-name:hover { text-decoration: underline; color: var(--brand-800, #0f548c); }

/* Name column: comfortable fixed width; longer content is truncated with an ellipsis. */
.nx-app .nx-doc__col-name { width: 260px; max-width: 260px; }
.nx-app td.nx-doc__col-name { overflow: hidden; }

/* ---- Pager ---- */
.nx-app .nx-doc__pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 12px; border-top: 1px solid #eef0f3; font-size: 13px; flex: 0 0 auto; }

/* ---- Loading overlay / spinner ---- */
.nx-app .nx-doc__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.55); z-index: 5; }
/* Same ring as NexusSpinner / the Inspection steps loader (36px, 3px track, #0078D4). The --sm variant
   stays small for inline use beside button text. */
.nx-app .nx-doc__spinner { display: inline-block; width: 36px; height: 36px; border: 3px solid var(--border-default, #e0e0e0); border-top-color: #0078D4; border-radius: 50%; animation: nx-doc-spin .7s linear infinite; }
.nx-app .nx-doc__spinner--sm { width: 13px; height: 13px; border-width: 2px; margin-right: 6px; vertical-align: -2px; }
@keyframes nx-doc-spin { to { transform: rotate(360deg); } }

/* ---- Folder modal fields ---- */
.nx-app .nx-doc__field-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #3a4048; }
.nx-app .nx-doc__field-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #cdd3dd; border-radius: 6px; font-size: 14px; outline: none; }
.nx-app .nx-doc__field-input:focus { border-color: #0f6cbd; box-shadow: 0 0 0 2px rgba(15,108,189,.15); }
.nx-app .nx-doc__error-line { margin: 0 0 6px; font-size: 13px; color: #b3261e; }

/* ---- AI summary cell ---- */
.nx-app .nx-doc__path { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .nx-app .nx-doc__split { flex-direction: column; }
    .nx-app .nx-doc__tree-pane { flex: 0 0 auto; max-width: none; max-height: 360px; border-right: none; border-bottom: 1px solid #e6e8ec; }
}

/* ---- Dark theme ---- */
.nx-app--dark .nx-doc { background: #1A1A1A; }
.nx-app--dark .nx-doc__split { border-color: #334155; }
.nx-app--dark .nx-doc__tree-pane { background: #172033; border-color: #334155; }
.nx-app--dark .nx-doc__sidebar-header { color: #F7F7F7; border-bottom-color: #334155; }
.nx-app--dark .nx-doc__sidebar-header svg { color: #4FC3F7; }
.nx-app--dark .nx-doc__sidebar-search { border-bottom-color: #334155; }
.nx-app--dark .nx-doc__sidebar-search-input { background: #141414; border-color: #334155; color: #F7F7F7; }
.nx-app--dark .nx-doc__sidebar-footer { border-top-color: #334155; }
.nx-app--dark .nx-doc__sidebar-footer-btn { color: #ADADAD; }
.nx-app--dark .nx-doc__sidebar-footer-btn:hover:not(:disabled) { background: #24324a; color: #4FC3F7; }
.nx-app--dark .nx-tree__row { color: #CBD5E1; }
.nx-app--dark .nx-tree__row:hover { background: #24324a; }
.nx-app--dark .nx-tree__row--selected { background: #1d3a5f; color: #93c5fd; }
.nx-app--dark .nx-doc__breadcrumb { border-color: #334155; }
.nx-app--dark .nx-doc__crumb--current { color: #F7F7F7; }
.nx-app--dark .nx-doc__search-input,
.nx-app--dark .nx-doc__field-input { background: #141414; border-color: #334155; color: #F7F7F7; }
.nx-app--dark .nx-doc__row--selected > td { background: #1d3a5f !important; }
.nx-app--dark .nx-doc__file-icon--pdf { background: rgba(220, 38, 38, 0.12); }
.nx-app--dark .nx-doc__file-icon--doc { background: rgba(0, 120, 212, 0.12); }
.nx-app--dark .nx-doc__file-icon--xls { background: rgba(5, 150, 105, 0.12); }
.nx-app--dark .nx-doc__file-icon--img { background: rgba(217, 119, 6, 0.12); }
.nx-app--dark .nx-doc__file-icon--other { background: #24324a; }

/* =====================================================================
   NexusRestoreAttachment - "Restore deleted attachments" modal (New UI).
   Telerik-free; reuses the shared .eq-modal shell. Body text kept at
   14px+ per NEW_UI_PLAN, sentence-case headers, no letter-spacing.
   ===================================================================== */
.nx-app .nx-restore { min-width: auto; }
.nx-app .nx-restore__header { padding: 20px 24px; align-items: flex-start; }
.nx-app .nx-restore__header h2 { font-size: 16px; }
.nx-app .nx-restore__header .eq-modal-subtitle { font-size: 14px; }

.nx-app .nx-restore__actionbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50);
}
.nx-app .nx-restore__count { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.nx-app .nx-restore__restore-btn { font-size: 14px; }
.nx-app .nx-restore__restore-btn svg { width: 14px; height: 14px; }

.nx-app .nx-restore__confirm {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; background: var(--brand-50); border-bottom: 1px solid var(--gray-100);
}
.nx-app .nx-restore__confirm-text { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.nx-app .nx-restore__confirm-actions { display: flex; gap: 10px; flex-shrink: 0; }
.nx-app .nx-restore__confirm-yes { padding: 7px 20px; }

.nx-app .nx-restore__errors { padding: 12px 24px 0; }
.nx-app .nx-restore__error { font-size: 14px; color: #b3261e; line-height: 1.5; }

.nx-app .nx-restore__table-wrap { position: relative; padding: 0 24px; max-height: 320px; overflow-y: auto; }
.nx-app .nx-restore__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nx-app .nx-restore__table thead tr {
  position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid var(--gray-200);
}
.nx-app .nx-restore__table th {
  padding: 10px 8px; text-align: left; font-weight: 600; font-size: 14px; color: var(--text-secondary);
}
.nx-app .nx-restore__table td { padding: 10px 8px; vertical-align: middle; }
.nx-app .nx-restore__table tbody tr { border-bottom: 1px solid var(--gray-100); transition: background 0.1s; }
.nx-app .nx-restore__table tbody tr:hover { background: var(--gray-50); }
.nx-app .nx-restore__table tbody tr.is-selected { background: var(--brand-50); }
.nx-app .nx-restore__th-check, .nx-app .nx-restore__td-check { width: 32px; }
.nx-app .nx-restore__table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand-500); }
.nx-app .nx-restore__muted { color: var(--text-tertiary); }
.nx-app .nx-restore__nowrap { white-space: nowrap; }
.nx-app .nx-restore__empty { text-align: center; color: var(--text-tertiary); padding: 28px 8px; font-size: 14px; }

.nx-app .nx-restore__file { display: flex; align-items: center; gap: 8px; }
.nx-app .nx-restore__file-name {
  color: var(--text-secondary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px;
}
.nx-app .nx-restore__ext {
  flex-shrink: 0; width: 30px; height: 28px; border-radius: 4px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.nx-app .nx-restore__ext--pdf { background: #fde8e8; color: #c42b1c; }
.nx-app .nx-restore__ext--sheet { background: #dff6dd; color: #107c10; }
.nx-app .nx-restore__ext--doc { background: #e1ecfa; color: #0f6cbd; }
.nx-app .nx-restore__ext--image { background: #efe4fb; color: #7e4bc4; }
.nx-app .nx-restore__ext--generic { background: var(--gray-100); color: var(--gray-600); }

.nx-app .nx-restore__expiry { font-size: 12px; padding: 3px 10px; border-radius: 12px; font-weight: 600; white-space: nowrap; }
.nx-app .nx-restore__expiry--ok { background: #dff6dd; color: #107c10; }
.nx-app .nx-restore__expiry--soon { background: #fff4ce; color: #835c00; }

.nx-app .nx-restore__footnote {
  display: flex; align-items: center; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--gray-100);
}
.nx-app .nx-restore__footnote svg { flex-shrink: 0; color: #835c00; }
.nx-app .nx-restore__footnote p { margin: 0; font-size: 14px; color: var(--text-tertiary); line-height: 1.5; }

.nx-app .nx-restore__overlay {
  position: absolute; inset: 0; background: rgba(255,255,255,0.6); display: flex;
  align-items: center; justify-content: center; z-index: 2;
}
/* Same ring as NexusSpinner / the Inspection steps loader (36px, 3px track, #0078D4, .7s). */
.nx-app .nx-restore__spinner {
  width: 36px; height: 36px; border: 3px solid var(--border-default, #e0e0e0); border-top-color: #0078D4;
  border-radius: 50%; animation: nx-restore-spin 0.7s linear infinite;
}
@keyframes nx-restore-spin { to { transform: rotate(360deg); } }

/* Dark mode */
.nx-app--dark .nx-restore__actionbar { background: #1A1A1A; border-bottom-color: #334155; }
.nx-app--dark .nx-restore__count { color: #F7F7F7; }
.nx-app--dark .nx-restore__confirm { background: #17406b; border-bottom-color: #334155; }
.nx-app--dark .nx-restore__confirm-text { color: #F7F7F7; }
.nx-app--dark .nx-restore__table thead tr { background: #1A1A1A; border-bottom-color: #334155; }
.nx-app--dark .nx-restore__table th { color: #ADADAD; }
.nx-app--dark .nx-restore__table tbody tr { border-bottom-color: #334155; }
.nx-app--dark .nx-restore__table tbody tr:hover { background: #24324a; }
.nx-app--dark .nx-restore__table tbody tr.is-selected { background: #1d3a5f; }
.nx-app--dark .nx-restore__file-name { color: #F7F7F7; }
.nx-app--dark .nx-restore__footnote { border-top-color: #334155; }
.nx-app--dark .nx-restore__overlay { background: rgba(15,23,42,0.6); }

/* =====================================================================
   NexusCustomFolder - create / rename folder modal (New UI).
   Gradient-header styling per the Nexus mockup, adapted to NEW_UI_PLAN
   (14px+ text, sentence case, no letter-spacing). Reuses .eq-modal-overlay
   backdrop and the .eq-edit-btn-* footer buttons.
   ===================================================================== */
.nx-app .nx-cf-modal {
  background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  width: 480px; max-width: calc(100vw - 32px); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.nx-app .nx-cf__header { padding: 22px 26px; position: relative; overflow: hidden; }
.nx-app .nx-cf__header--create { background: linear-gradient(135deg, #0078D4 0%, #5C2D91 50%, #B4009E 100%); }
.nx-app .nx-cf__header--rename { background: linear-gradient(135deg, #5B5FC7 0%, #4F52B2 100%); }
.nx-app .nx-cf__header-row { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.nx-app .nx-cf__title { color: #fff; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin: 0; }
.nx-app .nx-cf__title svg { flex-shrink: 0; }
.nx-app .nx-cf__close {
  width: 32px; height: 32px; border-radius: 8px; border: none; background: rgba(255,255,255,0.15);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.nx-app .nx-cf__close:hover:not(:disabled) { background: rgba(255,255,255,0.3); }
.nx-app .nx-cf__close:disabled { opacity: 0.5; cursor: not-allowed; }
.nx-app .nx-cf__body { padding: 22px 26px; }
.nx-app .nx-cf__label { display: block; font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.nx-app .nx-cf__input {
  width: 100%; padding: 11px 14px; font-size: 14px; font-family: var(--font);
  border: 1.5px solid var(--gray-200); border-radius: 10px; background: var(--gray-50);
  color: var(--text-primary); box-sizing: border-box; transition: all 0.2s;
}
.nx-app .nx-cf__input:focus { outline: none; border-color: #0078D4; background: #fff; box-shadow: 0 0 0 3px rgba(0,120,212,0.12); }
.nx-app .nx-cf__input:disabled { opacity: 0.6; cursor: not-allowed; }
.nx-app .nx-cf__current { margin-bottom: 18px; padding: 12px 16px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 8px; }
.nx-app .nx-cf__current-label { font-size: 14px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 4px; }
.nx-app .nx-cf__current-name { font-size: 14px; font-weight: 500; color: var(--text-primary); word-break: break-word; }
.nx-app .nx-cf__footer { padding: 16px 26px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--gray-100); }

/* Dark mode */
.nx-app--dark .nx-cf-modal { background: #1A1A1A; border: 1px solid #334155; }
.nx-app--dark .nx-cf__body { background: #1A1A1A; }
.nx-app--dark .nx-cf__label { color: #F7F7F7; }
.nx-app--dark .nx-cf__input { background: #141414; border-color: #334155; color: #F7F7F7; }
.nx-app--dark .nx-cf__input:focus { background: #141414; }
.nx-app--dark .nx-cf__current { background: #141414; border-color: #334155; }
.nx-app--dark .nx-cf__current-name { color: #F7F7F7; }
.nx-app--dark .nx-cf__footer { border-top-color: #334155; }
/* ═══════════════════════════════════════════════════════════════════════════
   TEAM GRID — Category column (pills + inline edit modal)
   Ported from analysis NexusTeamTab so the common-grid Team tab (TeamGrid.razor)
   renders Category as colored pills with a click-to-edit multi-select modal.
   All selectors are team-scoped (nx-team-cat-*, nx-cat-dot, nx-team-toast,
   nx-team-panel__close, nx-overlay) — unused by any other module.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Inline category cell trigger + placeholder */
.nx-team-cat-trigger { display:flex; flex-wrap:wrap; gap:4px; min-height:28px; cursor:pointer; padding:2px 4px; border-radius:4px; align-items:center; border:1px solid transparent; transition:border-color .15s; }
.nx-team-cat-trigger:hover, .nx-team-cat-trigger:focus { border-color:var(--border-subtle); background:var(--bg-subtle); outline:none; }
.nx-team-cat-placeholder { font-size:12px; color:var(--text-tertiary); font-style:italic; }
/* Category tags — 7 colour variants */
.nx-team-cat-tag { display:inline-flex; align-items:center; font-size:11px; font-weight:500; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.nx-team-cat-tag--0 { background:#EBF3FB; color:#0078D4; }
.nx-team-cat-tag--1 { background:#DFF6DD; color:#107C10; }
.nx-team-cat-tag--2 { background:#FDF2F8; color:#9D174D; }
.nx-team-cat-tag--3 { background:#F5F3FF; color:#5c2e91; }
.nx-team-cat-tag--4 { background:#E5F4F4; color:#007a8a; }
.nx-team-cat-tag--5 { background:#FFF4E5; color:#cc6600; }
.nx-team-cat-tag--6 { background:#F0F8FF; color:#0050a0; }
[data-theme="dark"] .nx-team-cat-tag--0, .nx-app--dark .nx-team-cat-tag--0 { background:rgba(0,120,212,.22); color:#60b0f4; }
[data-theme="dark"] .nx-team-cat-tag--1, .nx-app--dark .nx-team-cat-tag--1 { background:rgba(16,124,16,.22);  color:#6ccb5f; }
[data-theme="dark"] .nx-team-cat-tag--2, .nx-app--dark .nx-team-cat-tag--2 { background:rgba(190,24,93,.22);  color:#f9a8d4; }
[data-theme="dark"] .nx-team-cat-tag--3, .nx-app--dark .nx-team-cat-tag--3 { background:rgba(92,46,145,.22);  color:#b39ddb; }
[data-theme="dark"] .nx-team-cat-tag--4, .nx-app--dark .nx-team-cat-tag--4 { background:rgba(0,131,143,.22);  color:#4dd0e1; }
[data-theme="dark"] .nx-team-cat-tag--5, .nx-app--dark .nx-team-cat-tag--5 { background:rgba(204,102,0,.22);  color:#ffb84d; }
[data-theme="dark"] .nx-team-cat-tag--6, .nx-app--dark .nx-team-cat-tag--6 { background:rgba(0,80,160,.22);   color:#7eb8ff; }
/* .nx-app-scoped trigger (effective override) */
.nx-app .nx-team-cat-trigger { display:flex; flex-wrap:wrap; gap:4px; align-items:center; background:none; border:1px solid transparent; border-radius:6px; padding:4px 6px; cursor:pointer; width:100%; min-width:160px; text-align:left; transition:border-color .15s, background .15s; }
.nx-app .nx-team-cat-trigger:hover { border-color:var(--border-default); background:var(--bg-subtle); }
/* Capped pills (#1): keep the cell to a single row; overflow collapses into a +N chip */
.nx-app .nx-team-cat-trigger { flex-wrap:nowrap; overflow:hidden; }
.nx-app .nx-team-cat-trigger .nx-team-cat-tag { flex:0 0 auto; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.nx-app .nx-team-cat-more { flex:0 0 auto; display:inline-flex; align-items:center; font-size:11px; font-weight:600; line-height:1; padding:2px 7px; border-radius:999px; background:var(--bg-subtle); color:var(--text-secondary); border:1px solid var(--border-subtle); white-space:nowrap; cursor:pointer; }
.nx-app .nx-team-cat-trigger:hover .nx-team-cat-more { background:var(--bg-card); border-color:var(--border-default); }
/* Hover-only empty state (#3): faint "+ Category" affordance that only lights up on row hover/focus */
.nx-app .nx-team-cat-add { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--text-tertiary); opacity:.55; transition:opacity .12s, color .12s; }
.nx-app .nx-team-cat-add svg { color:currentColor; }
.nx-app tr:hover .nx-team-cat-add, .nx-app .nx-team-cat-trigger:hover .nx-team-cat-add, .nx-app .nx-team-cat-trigger:focus .nx-team-cat-add { opacity:1; color:var(--brand-600); }
.nx-app .nx-team-cat-trigger--empty { border-style:dashed; }
.nx-app .nx-team-cat-trigger--empty:hover { border-color:var(--brand-400); }
/* Modal close button */
.nx-team-panel__close { background:none; border:none; cursor:pointer; color:var(--text-secondary); padding:4px; border-radius:4px; display:flex; align-items:center; justify-content:center; transition:background .1s; }
.nx-team-panel__close:hover { background:var(--bg-subtle); }
/* Full-screen dimmed overlay (dialog wrapper) */
.nx-overlay { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); animation:nx-fade-in .15s ease; }
/* Category selection modal */
.nx-app .nx-team-cat-modal { position:relative; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.28); width:320px; max-height:80vh; display:flex; flex-direction:column; animation:nx-slide-up .18s ease; }
.nx-app .nx-team-cat-modal__header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 10px; border-bottom:1px solid var(--border-subtle); }
.nx-app .nx-team-cat-modal__title { font-size:12px; font-weight:700; color:var(--text-tertiary); letter-spacing: normal; margin:0; }
.nx-app .nx-team-cat-modal__body { flex:1; overflow-y:auto; padding:6px 0; }
.nx-app .nx-team-cat-modal__footer { display:flex; gap:8px; padding:10px 18px; border-top:1px solid var(--border-subtle); }
.nx-app .nx-team-cat-modal__search { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border-subtle); color:var(--text-tertiary); }
.nx-app .nx-team-cat-modal__search input { flex:1; border:none; outline:none; background:transparent; font-size:13px; color:var(--text-primary); }
.nx-app .nx-team-cat-modal__search input::placeholder { color:var(--text-tertiary); }
.nx-app .nx-team-cat-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; font-size:14px; }
.nx-app .nx-team-cat-item:hover { background:var(--bg-subtle); }
.nx-app .nx-team-cat-item input[type=checkbox] { flex-shrink:0; accent-color:var(--brand-500); }
[data-theme="dark"] .nx-team-cat-modal, .nx-app--dark .nx-team-cat-modal { background:var(--bg-card); border-color:var(--border-default); }
/* Category dot colors */
.nx-cat-dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.nx-cat-dot--0 { background:#1565c0; }
.nx-cat-dot--1 { background:#2e7d32; }
.nx-cat-dot--2 { background:#7b1fa2; }
.nx-cat-dot--3 { background:#e65100; }
.nx-cat-dot--4 { background:#00695c; }
.nx-cat-dot--5 { background:#b71c1c; }
.nx-cat-dot--6 { background:#0277bd; }
/* Toast */
.nx-team-toast { position:fixed; bottom:28px; right:28px; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:8px; font-size:13px; font-weight:500; box-shadow:0 6px 24px rgba(0,0,0,.18); z-index:400; animation:nx-fade-in .2s ease; max-width:340px; }
.nx-team-toast--success { background:#107C10; color:#fff; }
.nx-team-toast--error   { background:#C42B1C; color:#fff; }
.nx-team-toast--hidden  { visibility:hidden; pointer-events:none; opacity:0; }
.nx-team-toast__close { background:none; border:none; cursor:pointer; color:inherit; opacity:.8; padding:2px; margin-left:auto; display:flex; align-items:center; }

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM GRID — Add-member slide panel + Delete confirm + user list
   Ported from analysis NexusTeamTab. All selectors team-scoped (nx-team-panel*,
   nx-team-user*, nx-sel*, nx-cat-pill*, nx-del-confirm*, nx-team-backdrop,
   nx-team-person__link). Undefined analysis tokens remapped to working tokens:
   --surface-base→--bg-card, --surface-hover/--surface-raised→--bg-subtle,
   --danger-600→--danger-500; grad header uses the building-family blue.
   ═══════════════════════════════════════════════════════════════════════════ */
/* User-name cell link → New UI UserDetail */
.nx-app .nx-team-person__link { color:var(--brand-600, #0f6cbd); text-decoration:none; }
.nx-app .nx-team-person__link:hover { text-decoration:underline; color:var(--brand-700, #115ea3); }
.nx-app--dark .nx-team-person__link { color:#479EF5; }

/* Backdrop behind the add panel */
.nx-team-backdrop { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.28); animation:nx-fade-in .15s ease; }

/* Add-member slide panel */
.nx-team-panel { position:fixed; top:var(--topbar-h, 56px); right:0; width:min(500px,100vw); height:calc(100vh - var(--topbar-h, 56px)); background:var(--bg-card); border-left:1px solid var(--border-subtle); box-shadow:-8px 0 32px rgba(0,0,0,.16); z-index:210; display:flex; flex-direction:column; overflow:hidden; animation:nx-slide-in-right .22s ease; }
@keyframes nx-slide-in-right { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
/* Docking for the add-member panel. .nx-team-panel is geometrically identical to .nx-create-drawer
   (fixed, right:0, 500px wide, starting below the topbar) but carries its own class, so none of the
   shared docking rules reached it and the panel sat on top of the Team grid instead of beside it.
   This mirrors the generic .nx-create-drawer push layout: compress the content column to the left,
   and make the backdrop transparent AND non-blocking so the page beside the panel stays scrollable
   and interactive. Closing is then via the panel's own Close and Cancel controls, exactly as for the
   create/edit drawers. Narrow screens keep the full-width panel with the dimmed, click-to-close
   overlay. TeamGrid is used only by Project details, so this reaches nothing else. */
.nx-app:not(.nx-app--create-open):has(.nx-team-panel:not([hidden] *):not(:where([data-nx-route-hidden] *))) .main {
  margin-right: 500px; transition: margin-right .18s ease;
}
.nx-app:has(.nx-team-panel:not([hidden] *):not(:where([data-nx-route-hidden] *))) .nx-team-backdrop { background: transparent; pointer-events: none; }
@media (max-width: 1200px) {
  .nx-app:has(.nx-team-panel:not([hidden] *):not(:where([data-nx-route-hidden] *))) .main { margin-right: 0; }
  .nx-app:has(.nx-team-panel:not([hidden] *):not(:where([data-nx-route-hidden] *))) .nx-team-backdrop { background: rgba(0,0,0,.28); pointer-events: auto; }
}
.nx-app .nx-team-panel__header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
.nx-app .nx-team-panel__title { font-size:16px; font-weight:600; color:var(--text-primary); margin:0; }
.nx-app .nx-team-panel__section { padding:16px 24px; border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
.nx-app .nx-team-panel__section:last-of-type { border-bottom:none; }
.nx-app .nx-team-panel__footer { position:sticky; bottom:0; z-index:2; display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--border-subtle); background:var(--bg-card); flex-shrink:0; }
.nx-app .nx-team-panel__footer--right { justify-content:flex-end; }
.nx-app .nx-team-panel__footer .nx-team-panel__save { color:#fff; background:linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); border-color:transparent; box-shadow:0 2px 8px rgba(15,108,189,.22); }
.nx-app .nx-team-panel__footer .nx-team-panel__save:hover:not(:disabled) { background:linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%); box-shadow:0 4px 12px rgba(15,108,189,0.35); transform:translateY(-1px); }
.nx-app .nx-team-panel__footer .nx-team-panel__save:disabled { color:#fff; background:linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%); border-color:transparent; opacity:.6; }
/* Gradient header (matches building-family blue) */
.nx-app .nx-team-panel__header--grad { background:#0078D4; border-bottom:none; padding:18px 18px 16px; align-items:flex-start; gap:12px; }
.nx-app .nx-team-panel__header-icon { flex-shrink:0; color:rgba(255,255,255,.9); margin-top:2px; }
.nx-app .nx-team-panel__header-text { flex:1; }
.nx-app .nx-team-panel__header--grad .nx-team-panel__title { color:#fff; font-size:16px; }
.nx-app .nx-team-panel__subtitle { font-size:13px; color:rgba(255,255,255,.75); margin-top:2px; }
.nx-app .nx-team-panel__close--light { color:rgba(255,255,255,.8); }
.nx-app .nx-team-panel__close--light:hover { background:rgba(255,255,255,.15); color:#fff; }
.nx-app .nx-team-panel__section-label { font-size:12px; font-weight:600; color:var(--text-tertiary); margin-bottom:6px; }
.nx-app .nx-team-panel__required { color:var(--danger-500, #C42B1C); margin-left:2px; }
.nx-app .nx-team-panel__section--grow { flex:1; min-height:0; display:flex; flex-direction:column; }
.nx-app .nx-team-user-list__header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nx-app .nx-team-selected-toggle { border:0; background:none; color:var(--brand-600); cursor:pointer; font-size:12px; font-weight:600; margin-bottom:6px; padding:2px 4px; }
.nx-app .nx-team-selected-toggle:hover { text-decoration:underline; }
.nx-app .nx-team-selected-toggle:focus-visible { outline:2px solid var(--brand-600); outline-offset:2px; }
.nx-app .nx-team-panel__search input:focus,
.nx-app .nx-team-panel__search input:focus-visible {
  outline: none !important;
}
.nx-app .nx-team-search-hint { color:var(--text-tertiary); font-size:12px; margin-top:6px; }
/* User list in panel */
.nx-app .nx-team-user-list { flex:1; min-height:0; overflow-y:auto; border:1px solid var(--border-subtle); border-radius:8px; background:var(--bg-card); scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.nx-app .nx-team-user-list::-webkit-scrollbar { width:6px; }
.nx-app .nx-team-user-list::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.nx-app .nx-team-user-item { display:flex; align-items:center; gap:11px; padding:10px 12px; cursor:pointer; border-bottom:1px solid #f1f5f9; color:var(--text-primary); transition:background .12s; }
.nx-app .nx-team-user-item:last-child { border-bottom:none; }
.nx-app .nx-team-user-item:hover { background:#f8faff; }
.nx-app .nx-team-user-item--selected { background:#eff6ff; }
.nx-app .nx-team-user-item--selected:hover { background:#dbeafe; }
.nx-app .nx-team-user-item input[type=checkbox] { accent-color:#2563eb; flex-shrink:0; width:15px; height:15px; }
.nx-app .nx-team-user-item__stack { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.nx-app .nx-team-user-list__empty { padding:20px 16px; text-align:center; color:var(--text-tertiary); font-size:14px; }
.nx-app .nx-team-user-list__error { color:var(--danger-500, #C42B1C); }
.nx-app .nx-team-user-list__hint { display:flex; align-items:center; gap:6px; padding:8px 14px; font-size:13px; color:var(--text-tertiary); border-top:1px solid #f1f5f9; background:#f8faff; border-radius:0 0 8px 8px; }
.nx-app .nx-team-user-list__load-more { display:flex; justify-content:center; padding:12px; border-top:1px solid var(--border-subtle); }
.nx-app .nx-team-user-results { color:var(--text-tertiary); font-size:12px; margin-top:6px; text-align:right; }
.nx-app .nx-team-user-av-sq { width:32px; height:32px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }
/* ── Team card avatar (Project Team grid card view) ── */
.nx-app .nx-team-avatar { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; flex-shrink:0; overflow:hidden; line-height:1; letter-spacing:0; }
.nx-app .nx-team-user-item__name2 { font-size:14px; font-weight:500; color:var(--text-primary); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-app .nx-team-search-match { background:#fff2a8; color:inherit; border-radius:2px; padding:0 1px; }
.nx-app .nx-team-user-item__account2 { font-size:13px; color:var(--text-secondary); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
.nx-app .nx-team-user-item__email { font-size:12px; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
/* Selected-users compact list */
.nx-team-sel-section { flex-shrink:0; max-height:46vh; display:flex; flex-direction:column; min-height:0; }
.nx-sel-count { font-size:12px; font-weight:600; color:var(--brand-600, #0f6cbd); background:var(--brand-50, #eff6ff); border-radius:999px; padding:1px 7px; margin-left:4px; }
/* Premium selected-projects chip cloud (Add project access panel) */
.nx-app .nx-selchips__head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.nx-app .nx-selchips__clear { background:none; border:none; font:inherit; font-size:12px; font-weight:600; color:var(--brand-600); cursor:pointer; padding:2px 8px; border-radius:var(--r-sm); transition:background .12s, color .12s; }
.nx-app .nx-selchips__clear:hover { background:var(--bg-subtle); color:var(--brand-700, #095a9e); }
.nx-app .nx-selchips__clear:focus-visible { outline:2px solid var(--brand-600); outline-offset:2px; }
.nx-app .nx-selchips__box { display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; flex:1; min-height:0;
  max-height:200px; overflow-y:auto; padding:12px; border:1px solid var(--border-default); border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--bg-subtle), var(--bg-card));
  box-shadow: inset 0 1px 3px rgba(15,42,80,0.05); scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.nx-app .nx-selchips__list { display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; width:100%; }
.nx-app .nx-selchips__box::-webkit-scrollbar { width:8px; }
.nx-app .nx-selchips__box::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; border:2px solid transparent; background-clip:content-box; }
.nx-app .nx-selchip { display:inline-flex; align-items:center; gap:6px; max-width:220px; height:26px;
  padding:0 5px 0 10px; font-size:12px; font-weight:500; line-height:1; color:var(--brand-700, #115ea3);
  background:var(--brand-50, #eff6fc); border:1px solid var(--brand-100, #cfe4fa); border-radius:var(--r-sm);
  transition:border-color .12s, box-shadow .12s, background .12s, transform .12s; }
.nx-app .nx-selchip:hover { border-color:var(--brand-400); background:#e3f0fc; box-shadow:0 2px 8px rgba(0,120,212,0.14); transform:translateY(-1px); }
.nx-app .nx-selchip__label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-app .nx-selchip__x { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:16px; height:16px; border:none; border-radius:50%; background:transparent; color:inherit; opacity:.75;
  cursor:pointer; padding:0; transition:background .12s, color .12s, opacity .12s; }
.nx-app .nx-selchip__x:hover { background:#fde7e9; color:#c50f1f; opacity:1; }
.nx-app .nx-selchip__x:focus-visible { outline:2px solid var(--brand-600); outline-offset:1px; }
/* Per-project category button inside a selected-project chip (Add/Edit Project Access drawer). */
.nx-app .nx-selchip__cat { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; height:18px; padding:0 7px;
  border:1px solid var(--brand-200, #b9d7f5); border-radius:var(--r-full, 999px); background:var(--bg-card, #fff);
  color:var(--brand-700, #115ea3); font:inherit; font-size:11px; font-weight:600; line-height:1; cursor:pointer;
  transition:background .12s, border-color .12s, color .12s; }
.nx-app .nx-selchip__cat:hover { background:var(--brand-100, #cfe4fa); border-color:var(--brand-400); }
.nx-app .nx-selchip__cat:focus-visible { outline:2px solid var(--brand-600); outline-offset:1px; }
.nx-app .nx-selchip__cat.is-set { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.nx-app--dark .nx-selchip__cat { background:transparent; border-color:#2f5680; color:#9cc7f5; }
.nx-app--dark .nx-selchip__cat:hover { background:rgba(71,158,245,0.22); }
.nx-app--dark .nx-selchip__cat.is-set { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.nx-app--dark .nx-selchip { background:rgba(71,158,245,0.18); color:#6cb4f7; border-color:#2a4a6e; }
.nx-app--dark .nx-selchip:hover { border-color:var(--brand-400); background:rgba(71,158,245,0.26); }
.nx-app--dark .nx-selchips__box { background:#1A1A1A; border-color:#3D3D3D; }
.nx-app--dark .nx-selchip__x:hover { background:rgba(197,15,31,0.22); color:#ff8a8a; }

/* Inline per-row category dropdown (analysis New UI parity, ported from analysis nexus-design-system.css).
   Anchored under the grid Category trigger; search + colour-dot multiselect + Cancel/Done. */
.nx-app .ud-cat-dd { position: relative; display: inline-block; width: 100%; }
.nx-app .ud-cat-panel {
  position: absolute; top: calc(100% + 4px); bottom: auto; left: 0; z-index: 300;
  width: 300px; max-height: 460px; background: var(--bg-card,#fff);
  border: 1px solid var(--border-default,#d1d5db); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  display: flex; flex-direction: column; overflow: hidden;
}
.nx-app .ud-cat-panel--above { top: auto; bottom: calc(100% + 4px); }
.nx-app .ud-cat-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 6px; border-bottom: 1px solid var(--border-subtle,#e5e7eb);
  flex-shrink: 0;
}
.nx-app .ud-cat-panel__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.nx-app .ud-cat-panel__close {
  border: none; background: none; cursor: pointer;
  color: var(--text-secondary); padding: 2px 4px; border-radius: 4px;
  display: grid; place-items: center; line-height: 1;
}
.nx-app .ud-cat-panel__close:hover { background: var(--surface-hover,#f3f4f6); }
.nx-app .ud-cat-panel__search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-bottom: 1px solid var(--border-subtle,#e5e7eb);
  flex-shrink: 0;
}
.nx-app .ud-cat-panel__search svg { flex-shrink: 0; color: var(--text-secondary); }
.nx-app .ud-cat-panel__search input {
  flex: 1; border: none; outline: none;
  font-size: 12px; background: transparent; color: var(--text-primary); font-family: inherit;
}
.nx-app .ud-cat-panel__list { max-height: 320px; overflow-y: auto; padding: 4px 0; flex: 1; }
.nx-app .ud-cat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  font-size: 13.5px; color: var(--text-primary); user-select: none; margin: 0;
}
.nx-app .ud-cat-item:hover { background: var(--surface-hover,#f3f4f6); }
.nx-app .ud-cat-item--checked { background: #f0f6ff; }
.nx-app .ud-cat-item--checked:hover { background: #e0edff; }
.nx-app .ud-cat-item input[type="checkbox"] { flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; }
.nx-app .ud-cat-item__label { flex: 1; }
.nx-app .ud-cat-panel__footer {
  padding: 8px 12px; border-top: 1px solid var(--border-subtle,#e5e7eb);
  display: flex; justify-content: flex-end; flex-shrink: 0;
}
.nx-app .ud-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.nx-app .ud-cat-dot--blue   { background: #0078d4; }
.nx-app .ud-cat-dot--green  { background: #107c10; }
.nx-app .ud-cat-dot--purple { background: #5c2d91; }
.nx-app .ud-cat-dot--orange { background: #d83b01; }
.nx-app .ud-cat-dot--teal   { background: #008272; }
.nx-app .ud-cat-dot--red    { background: #a4262c; }
.nx-app .ud-cat-dot--yellow { background: #c7a900; }
.nx-app--dark .ud-cat-panel { background: #1f1f1f; border-color: #3d3d3d; }
.nx-app--dark .ud-cat-panel__head { border-bottom-color: #3d3d3d; }
.nx-app--dark .ud-cat-panel__search { border-bottom-color: #3d3d3d; }
.nx-app--dark .ud-cat-panel__search input { color: #e0e0e0; }
.nx-app--dark .ud-cat-item { color: #e0e0e0; }
.nx-app--dark .ud-cat-item:hover { background: #2d2d2d; }
.nx-app--dark .ud-cat-item--checked { background: #1a2a3a; }
.nx-app--dark .ud-cat-item--checked:hover { background: #1e3448; }
.nx-app--dark .ud-cat-panel__footer { border-top-color: #3d3d3d; }

.nx-sel-list { display:flex; flex-direction:column; gap:0; border:1px solid var(--border-subtle); border-radius:8px; background:var(--bg-card); overflow-y:auto; flex:1; min-height:0; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.nx-sel-list::-webkit-scrollbar { width:6px; }
.nx-sel-list::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.nx-sel-row { display:flex; flex-direction:column; border-bottom:1px solid var(--border-subtle); background:var(--bg-card); transition:background .12s; }
.nx-sel-row:last-child { border-bottom:none; }
.nx-sel-row--expanded { background:var(--brand-50, #eff6ff); }
.nx-sel-row__top { display:flex; align-items:center; gap:8px; padding:9px 10px 9px 12px; }
.nx-sel-row__name { flex-shrink:0; max-width:38%; font-size:13px; font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nx-sel-row__tags { flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; }
.nx-sel-tag { display:inline-flex; align-items:center; gap:3px; padding:3px 8px 3px 9px; border-radius:999px; border:none; font-size:12px; font-weight:600; white-space:nowrap; }
.nx-sel-tag--0 { background:#EBF3FB; color:#0078D4; }
.nx-sel-tag--1 { background:#DFF6DD; color:#107C10; }
.nx-sel-tag--2 { background:#FDF2F8; color:#9D174D; }
.nx-sel-tag--3 { background:#F5F3FF; color:#5c2e91; }
.nx-sel-tag--4 { background:#E5F4F4; color:#007a8a; }
.nx-sel-tag--5 { background:#FFF4E5; color:#cc6600; }
.nx-sel-tag--6 { background:#F0F8FF; color:#0050a0; }
.nx-sel-tag__x { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:none; background:none; cursor:pointer; color:inherit; opacity:.65; padding:0; font-size:12px; line-height:1; transition:opacity .1s; }
.nx-sel-tag__x:hover { opacity:1; }
.nx-sel-tag-add { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; border:1.5px dashed var(--border-default); background:transparent; color:var(--text-tertiary); font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.nx-sel-tag-add:hover { border-color:var(--brand-400, #479ef5); color:var(--brand-600, #0f6cbd); background:var(--brand-50, #eff6ff); }
.nx-sel-tag-add--open { border-style:solid; border-color:var(--brand-400, #479ef5); color:var(--brand-600, #0f6cbd); background:var(--brand-50, #eff6ff); }
.nx-sel-row__remove { flex-shrink:0; width:26px; height:26px; border-radius:5px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--text-tertiary); transition:color .15s, background .15s; }
.nx-sel-row__remove:hover { color:var(--danger-500, #C42B1C); background:var(--danger-50, #fef2f2); }
.nx-sel-cat-picker { display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 12px; border-top:1px solid var(--border-subtle); background:var(--brand-50, #eff6ff); animation:nx-fade-in .14s ease; }
.nx-cat-pill { display:inline-flex; align-items:center; gap:0; padding:5px 13px; border-radius:999px; border:1.5px solid var(--border-default); background:var(--bg-card); color:var(--text-secondary); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; user-select:none; }
.nx-cat-pill input[type=checkbox] { display:none; }
.nx-cat-pill:hover { border-color:var(--brand-400, #479ef5); color:var(--brand-700, #115ea3); background:var(--brand-50, #eff6ff); }
.nx-cat-pill--sel.nx-cat-pill--0 { background:#EBF3FB; color:#0078D4; border-color:#0078D4; }
.nx-cat-pill--sel.nx-cat-pill--1 { background:#DFF6DD; color:#107C10; border-color:#107C10; }
.nx-cat-pill--sel.nx-cat-pill--2 { background:#FDF2F8; color:#9D174D; border-color:#9D174D; }
.nx-cat-pill--sel.nx-cat-pill--3 { background:#F5F3FF; color:#5c2e91; border-color:#5c2e91; }
.nx-cat-pill--sel.nx-cat-pill--4 { background:#E5F4F4; color:#007a8a; border-color:#007a8a; }
.nx-cat-pill--sel.nx-cat-pill--5 { background:#FFF4E5; color:#cc6600; border-color:#cc6600; }
.nx-cat-pill--sel.nx-cat-pill--6 { background:#F0F8FF; color:#0050a0; border-color:#0050a0; }
/* Delete confirm dialog (uses .nx-overlay wrapper) */
.nx-app .nx-del-confirm { position:relative; background:var(--bg-card); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.12); width:min(440px,92vw); padding:32px 28px 24px; display:flex; flex-direction:column; gap:0; animation:nx-scale-in .2s cubic-bezier(.34,1.3,.64,1); }
@keyframes nx-scale-in { from { opacity:0; transform:scale(.93) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
.nx-app .nx-del-confirm__head { display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.nx-app .nx-del-confirm__icon-wrap { flex-shrink:0; width:44px; height:44px; background:#fef2f2; border-radius:10px; display:grid; place-items:center; color:#dc2626; }
.nx-app .nx-del-confirm__head-text { display:flex; flex-direction:column; gap:2px; }
.nx-app .nx-del-confirm__title { font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.3; }
.nx-app .nx-del-confirm__subtitle { font-size:13px; color:var(--text-secondary); font-weight:400; }
.nx-app .nx-del-confirm__body { font-size:14px; color:var(--text-primary); line-height:1.6; margin:0 0 28px; }
.nx-app .nx-del-confirm__actions { display:flex; gap:10px; justify-content:flex-end; margin-top:auto; }
.nx-app .nx-del-confirm__actions .btn { min-width:110px; justify-content:center; text-align:center; border-radius:999px; padding:9px 24px; font-weight:600; }
/* Dark mode */
.nx-app--dark .nx-team-panel { background:#1f1f1f; border-left-color:#3d3d3d; }
.nx-app--dark .nx-team-panel__header { border-bottom-color:#3d3d3d; }
.nx-app--dark .nx-team-panel__header--grad { background: #106EBE; }
.nx-app--dark .nx-team-panel__footer { background:#1f1f1f; border-top-color:#3d3d3d; }
.nx-app--dark .nx-team-user-list { background:#1f1f1f; border-color:#3d3d3d; scrollbar-color:#525252 transparent; }
.nx-app--dark .nx-team-user-item { border-bottom-color:#2d2d2d; color:#fff; }
.nx-app--dark .nx-team-user-item:hover { background:#2d2d2d; }
.nx-app--dark .nx-team-user-item--selected { background:#082338; }
.nx-app--dark .nx-team-user-item--selected:hover { background:#0c3b5e; }
.nx-app--dark .nx-sel-list { border-color:#3d3d3d; scrollbar-color:#525252 transparent; }
.nx-app--dark .nx-sel-row { border-bottom-color:#2d2d2d; background:#1f1f1f; }
.nx-app--dark .nx-sel-row__name { color:#fff; }
.nx-app--dark .nx-del-confirm { background:var(--bg-card); border-color:var(--border-default); color:var(--text-primary); }
.nx-app--dark .nx-del-confirm__icon-wrap { background:rgba(220,38,38,.15); }
.nx-app--dark .nx-cat-pill--sel.nx-cat-pill--0 { background:rgba(0,120,212,.22); color:#60b0f4; border-color:#60b0f4; }
.nx-app--dark .nx-cat-pill--sel.nx-cat-pill--1 { background:rgba(16,124,16,.22); color:#6ccb5f; border-color:#6ccb5f; }
.nx-app--dark .nx-cat-pill--sel.nx-cat-pill--2 { background:rgba(190,24,93,.22); color:#f9a8d4; border-color:#f9a8d4; }
.nx-app--dark .nx-cat-pill--sel.nx-cat-pill--3 { background:rgba(92,46,145,.22); color:#b39ddb; border-color:#b39ddb; }
.nx-app--dark .nx-cat-pill--sel.nx-cat-pill--4 { background:rgba(0,131,143,.22); color:#4dd0e1; border-color:#4dd0e1; }
.nx-app--dark .nx-cat-pill--sel.nx-cat-pill--5 { background:rgba(204,102,0,.22); color:#ffb84d; border-color:#ffb84d; }
.nx-app--dark .nx-cat-pill--sel.nx-cat-pill--6 { background:rgba(0,80,160,.22); color:#7eb8ff; border-color:#7eb8ff; }
.nx-app--dark .nx-sel-tag--0 { background:rgba(0,120,212,.22); color:#60b0f4; }
.nx-app--dark .nx-sel-tag--1 { background:rgba(16,124,16,.22); color:#6ccb5f; }
.nx-app--dark .nx-sel-tag--2 { background:rgba(190,24,93,.22); color:#f9a8d4; }
.nx-app--dark .nx-sel-tag--3 { background:rgba(92,46,145,.22); color:#b39ddb; }
.nx-app--dark .nx-sel-tag--4 { background:rgba(0,131,143,.22); color:#4dd0e1; }
.nx-app--dark .nx-sel-tag--5 { background:rgba(204,102,0,.22); color:#ffb84d; }
.nx-app--dark .nx-sel-tag--6 { background:rgba(0,80,160,.22); color:#7eb8ff; }

/* Legacy New UI typography aliases */
.nx-app {
  --nx-type-field-label: var(--nx-type-label);
  --nx-type-field-value: var(--nx-type-value);
  --nx-type-panel-title: var(--nx-type-panel);
  --nx-type-button: var(--nx-type-btn);
  --nx-type-choice: var(--nx-type-radio);
  --nx-type-support: var(--nx-type-helper);
  --nx-type-drawer-title: var(--nx-type-drawer);
  --nx-type-title: var(--nx-type-hero);
  --nx-type-grid-header: var(--nx-type-header);
}

.nx-app dt,
.nx-app .pd-field dt,
.nx-app .pd-form-label,
.nx-app .nx-field__label,
.nx-app .field-label,
.nx-app .nx-dl dt,
.nx-app .nx-kv__key {
  font-family: var(--font) !important;
  font-size: var(--nx-type-field-label) !important;
  text-transform: none !important;
}
.nx-app dd,
.nx-app .pd-field dd,
.nx-app .nx-field__value,
.nx-app .field-value,
.nx-app .nx-dl dd,
.nx-app .nx-kv__val {
  font-family: var(--font) !important;
  font-size: var(--nx-type-field-value) !important;
}
.nx-app .pd-form-control,
.nx-app .nec__input,
.nx-app .nfl__input,
.nx-app .nfl__value,
.nx-app .nfl__opt {
  font-family: var(--font) !important;
  font-size: var(--nx-type-control) !important;
}
.nx-app .nx-proj-tab,
.nx-app .nx-tab,
.nx-app [role="tab"],
.nx-app .nav-tab,
.nx-app .tab-label,
.nx-app .pd-tab {
  font-family: var(--font) !important;
  font-size: var(--nx-type-tab) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.nx-app .nx-hero__title,
.nx-app .page-title,
.nx-app .project-title,
.nx-app .nx-project-hero__name,
.nx-app h1.nx-title,
.nx-app .page-hero__title,
.nx-app .pd-hero__title {
  font-family: var(--font) !important;
  font-size: var(--nx-type-title) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.nx-app .k-grid td,
.nx-app .nx-grid td,
.nx-app .nx-grid-cell,
.nx-app table.tbl tbody td,
.nx-app .nx-dash-table tbody td,
.nx-app .pd-audit-table tbody td,
.nx-app .nxg__table tbody td {
  font-family: var(--font) !important;
  font-size: var(--nx-type-grid-cell) !important;
}
.nx-app .k-grid th,
.nx-app .nx-grid th,
.nx-app .nx-grid-header,
.nx-app table.tbl thead th,
.nx-app .nx-dash-table thead th,
.nx-app .pd-audit-th,
.nx-app .nxg__table thead th {
  font-family: var(--font) !important;
  font-size: var(--nx-type-grid-header) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.nx-app .nx-pagination,
.nx-app .pagination,
.nx-app .k-pager-info,
.nx-app .k-pager-sizes,
.nx-app .grid-footer,
.nx-app .grid-footer *,
.nx-app .nxg__pager,
.nx-app .nxg__pager *,
.nx-app .pd-audit-footer,
.nx-app .pd-audit-footer * {
  font-family: var(--font) !important;
  font-size: var(--nx-type-footer) !important;
}
.nx-app .pd-form-section__title,
.nx-app .pd-panel__title,
.nx-app .nx-dash-panel-title,
.nx-app .pd-audit-header__title {
  font-family: var(--font) !important;
  font-size: var(--nx-type-panel-title) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.nx-app .pd-drawer__title {
  font-family: var(--font) !important;
  font-size: var(--nx-type-drawer-title) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.nx-app .pd-btn,
.nx-app .nec__btn,
.nx-app .eq-action,
.nx-app .page-hero__back,
.nx-app .pd-back,
.nx-app .btn,
.nx-app .tool-btn,
.nx-app .page-btn {
  font-family: var(--font) !important;
  font-size: var(--nx-type-button) !important;
}
.nx-app input[type="search"],
.nx-app .search-input input,
.nx-app .its-panel-search__input,
.nx-app .pd-audit-search,
.nx-app .aht__search-input {
  font-family: var(--font) !important;
  font-size: var(--nx-type-search) !important;
}
.nx-app .nff__seg-btn,
.nx-app .nff__check-label {
  font-family: var(--font) !important;
  font-size: var(--nx-type-choice) !important;
}
.nx-app .im-radio,
.nx-app .im-step-inline-error,
.nx-app .im-step-inline-status {
  font-family: var(--font) !important;
  font-size: var(--nx-type-grid-cell) !important;
}
.nx-app .pd-field-error,
.nx-app .pd-drawer__footer-msg,
.nx-app .pd-drawer__body-error,
.nx-app .im-status-banner,
.nx-app .pd-audit-empty,
.nx-app .nx-dash-panel-subtitle,
.nx-app .nfl__status {
  font-family: var(--font) !important;
  font-size: var(--nx-type-support) !important;
}

/* Admin status banner — base + light/dark variants. Defined globally so every admin grid
   (Accounts, Units, Sections, Technical Categories, Disciplines, Types, Subtypes, DCEM) renders
   consistently; previously these lived only in ItemMasters' scoped style, leaving other grids
   unstyled (and dark-mode broken) unless that page was mounted. */
.nx-app .im-status-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px var(--sp-8, 16px) 0; padding: 10px 14px; border-radius: 8px;
  font-weight: 500; border: 1px solid transparent;
}
.nx-app .im-status-banner--success { background: #DFF6DD; color: #0b6a0b; border-color: #a9dfa9; }
.nx-app .im-status-banner--error   { background: #FDE7E9; color: #a4262c; border-color: #f1bcc0; }
.nx-app .im-status-banner__close {
  background: none; border: none; cursor: pointer; color: inherit; opacity: .7;
  display: inline-flex; padding: 2px; border-radius: 4px;
}
.nx-app .im-status-banner__close:hover { opacity: 1; }
.nx-app .im-status-banner__close:focus-visible { outline: 2px solid #0078d4; outline-offset: 2px; opacity: 1; }
.nx-app--dark .im-status-banner--success { background: #12331a; color: #7ee787; border-color: #1f5a2b; }
.nx-app--dark .im-status-banner--error   { background: #3a1518; color: #ff9aa2; border-color: #6b2a2f; }
.nx-app--dark .im-status-banner__close:focus-visible { outline-color: #479EF5; }
.nx-app .pd-panel__count,
.nx-app .pd-tab__badge,
.nx-app .pd-chip,
.nx-app .pd-audit-changes-badge,
.nx-app .pd-audit-truncation-note,
.nx-app .pd-audit-event,
.nx-app .nx-ts-pager,
.nx-app .status,
.nx-app .tag {
  font-family: var(--font) !important;
  font-size: var(--nx-type-badge) !important;
  letter-spacing: normal !important;
}
/* Telerik popups are rendered outside .nx-app. The document-level theme class
   keeps those popup surfaces synchronized with the Nexus theme selection. */
.nx-theme-dark .k-animation-container .k-popup,
.nx-theme-dark .k-animation-container .k-list,
.nx-theme-dark .k-animation-container .k-list-content,
.nx-theme-dark .k-animation-container .k-menu-group,
.nx-theme-dark .k-animation-container .k-calendar,
.nx-theme-dark .k-window,
.nx-theme-dark .k-dialog {
    color: #F7F7F7;
    background: #1A1A1A;
    border-color: #3D3D3D;
}

.nx-theme-dark .k-animation-container .k-list-item,
.nx-theme-dark .k-animation-container .k-menu-link {
    color: #D6D6D6;
    background: transparent;
}

.nx-theme-dark .k-animation-container .k-list-item:hover,
.nx-theme-dark .k-animation-container .k-list-item.k-hover,
.nx-theme-dark .k-animation-container .k-list-item.k-focus,
.nx-theme-dark .k-animation-container .k-menu-link:hover {
    color: #FFFFFF;
    background: #333333;
}

.nx-theme-dark .k-animation-container .k-list-item.k-selected {
    color: #FFFFFF;
    background: #115EA3;
}

.nx-theme-dark .k-animation-container .k-list-filter,
.nx-theme-dark .k-animation-container .k-input,
.nx-theme-dark .k-window .k-window-titlebar,
.nx-theme-dark .k-dialog .k-dialog-titlebar {
    color: #F7F7F7;
    background: #242424;
    border-color: #3D3D3D;
}

.nx-theme-dark .k-animation-container .k-input-inner {
    color: #F7F7F7;
    background: transparent;
}

.nx-theme-dark .k-animation-container .k-input-inner::placeholder {
    color: #ADADAD;
}

/* Fluent 2 dark foundation for all New UX surfaces and native controls. */
.nx-app--dark,
.nx-app--dark .app-layout,
.nx-app--dark .main,
.nx-app--dark .page-scroll {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

.nx-app--dark .eq-actionbar--surface,
.nx-app--dark .pd-panel,
.nx-app--dark .grid-card,
.nx-app--dark .toolbar,
.nx-app--dark .metric-card,
.nx-app--dark .side-panel,
.nx-app--dark .panel-header {
    background-color: var(--bg-card);
    border-color: var(--border-default);
    box-shadow: none;
}

.nx-app--dark .eq-action {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: none;
}

.nx-app--dark .eq-action:hover {
    color: var(--text-primary);
    background: #333333;
    border-color: var(--brand-500);
}

.nx-app--dark .eq-actionbar--admin .eq-action--danger,
.nx-app--dark .eq-action.eq-action--team-delete {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: none;
}

.nx-app--dark .eq-actionbar--admin .eq-action--danger svg,
.nx-app--dark .eq-action.eq-action--team-delete svg {
    color: currentColor;
}

.nx-app--dark .eq-actionbar--admin .eq-action--danger:hover:not(:disabled),
.nx-app--dark .eq-action.eq-action--team-delete:hover:not(:disabled) {
    color: var(--text-primary);
    background: #333333;
    border-color: var(--brand-500);
    box-shadow: none;
}

.nx-app--dark .eq-actionbar--admin .eq-action--danger:disabled,
.nx-app--dark .eq-action.eq-action--team-delete:disabled {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: none;
}

.nx-app--dark .eq-actionbar--admin .eq-action--danger:disabled svg,
.nx-app--dark .eq-action.eq-action--team-delete:disabled svg {
    color: currentColor;
}

.nx-app--dark .eq-action--primary,
.nx-app--dark .btn--primary {
    color: #FFFFFF;
    background: #115EA3;
    border-color: #115EA3;
}

.nx-app--dark .eq-action--primary:hover,
.nx-app--dark .btn--primary:hover {
    color: #FFFFFF;
    background: #0F6CBD;
    border-color: #0F6CBD;
}

.nx-app--dark .eq-actionbar--admin .eq-action--primary {
    color: #FFFFFF;
    background: linear-gradient(120deg, #0F548C 0%, #0F6CBD 55%, #1586D8 100%);
    border-color: transparent;
}

.nx-app--dark .eq-actionbar--admin .eq-action--primary:hover:not(:disabled) {
    color: #FFFFFF;
    background: linear-gradient(120deg, #0C3B5E 0%, #0F548C 55%, #0F6CBD 100%);
    border-color: transparent;
}

/* Dark-mode gradient for the Equipment action bar's primary button, mirroring the .eq-actionbar--admin
   rules above so "New equipment" matches the Admin "New account" button in dark mode too. Without this
   it falls back to the flat .nx-app--dark .eq-action--primary fill and loses the gradient.
   Deliberately scoped to .eq-actionbar--grad, which only the Equipment action bar carries, so the
   shared .eq-action--grad modifier and every other action bar are left untouched.
   Equal specificity to the flat rule, so it must stay after it to win the tie. */
.nx-app--dark .eq-actionbar--grad .eq-action--primary {
    color: #FFFFFF;
    background: linear-gradient(120deg, #0F548C 0%, #0F6CBD 55%, #1586D8 100%);
    border-color: transparent;
}

.nx-app--dark .eq-actionbar--grad .eq-action--primary:hover:not(:disabled) {
    color: #FFFFFF;
    background: linear-gradient(120deg, #0C3B5E 0%, #0F548C 55%, #0F6CBD 100%);
    border-color: transparent;
}

.nx-app--dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.nx-app--dark select,
.nx-app--dark textarea {
    color: var(--text-primary);
    background-color: var(--bg-elevated);
    border-color: var(--border-default);
}

.nx-app--dark input::placeholder,
.nx-app--dark textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

/* Fluent dark form controls: one neutral surface, visible boundaries, and no nested input fills. */
.nx-app--dark .pd-form-control,
.nx-app--dark .nec__input,
.nx-app--dark .nec__select,
.nx-app--dark .nec__textarea,
.nx-app--dark .nfl__control {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: none;
}

.nx-app--dark .nfl__input,
.nx-app--dark .nff__ms-inline-search,
.nx-app--dark .nff__ms.af-lookup .af-lookup__input {
    color: var(--text-primary);
    background: transparent !important;
    border: 0;
}

.nx-app--dark .nfl__toggle {
    color: var(--text-secondary);
}

.nx-app--dark .pd-form-control:hover:not(:disabled):not([readonly]),
.nx-app--dark .nec__input:hover:not(:disabled),
.nx-app--dark .nec__select:hover:not(:disabled),
.nx-app--dark .nec__textarea:hover:not(:disabled),
.nx-app--dark .nfl__control:hover {
    border-color: var(--border-strong);
}

.nx-app--dark .pd-form-control:focus,
.nx-app--dark .pd-form-control:focus-visible,
.nx-app--dark .nec__input:focus,
.nx-app--dark .nec__select:focus,
.nx-app--dark .nec__textarea:focus,
.nx-app--dark .nfl__control:focus-within {
    border-color: #479EF5;
    outline: none;
    box-shadow: 0 0 0 1px #479EF5;
}

.nx-app--dark .pd-form-control:disabled,
.nx-app--dark .nec__input:disabled,
.nx-app--dark .nec__select:disabled,
.nx-app--dark .nec__textarea:disabled,
.nx-app--dark .nfl--disabled .nfl__control {
    color: var(--text-tertiary);
    background: var(--gray-100);
    border-color: var(--border-default);
    opacity: 1;
}

.nx-app--dark .nfl__menu {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.nx-app--dark .nfl__opt {
    color: var(--text-primary);
}

.nx-app--dark .nfl__opt:hover,
.nx-app--dark .nfl__opt--active {
    background: #333333;
}

.nx-app--dark .nfl__opt--sel {
    color: #62ABF5;
    background: rgba(71, 158, 245, 0.16);
}

.nx-app--dark .nff__seg {
    border-color: var(--border-default);
}

.nx-app--dark .nff__seg-btn {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-right-color: var(--border-default);
}

.nx-app--dark .nff__seg-btn:hover:not(:disabled) {
    color: var(--text-primary);
    background: #333333;
}

.nx-app--dark .nff__seg-btn--on,
.nx-app--dark .nff__seg-btn--on:hover:not(:disabled) {
    color: #FFFFFF;
    background: #115EA3;
}

.nx-app--dark .nff__radio input[type="radio"] {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-content: center;
    appearance: none;
    background: transparent;
    border: 1px solid var(--text-secondary);
    border-radius: 50%;
}

.nx-app--dark .nff__radio input[type="radio"]::before {
    width: 8px;
    height: 8px;
    content: "";
    background: #FFFFFF;
    border-radius: 50%;
    transform: scale(0);
}

.nx-app--dark .nff__radio input[type="radio"]:checked {
    background: #115EA3;
    border-color: #479EF5;
}

.nx-app--dark .nff__radio input[type="radio"]:checked::before {
    transform: scale(1);
}

.nx-app--dark .nff__radio input[type="radio"]:focus-visible {
    outline: 2px solid #479EF5;
    outline-offset: 2px;
}

.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__control {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: none;
}

.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__input {
    color: var(--text-primary);
    background: transparent;
    border: 0;
}

.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__toggle {
    color: var(--text-secondary);
}

.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__menu {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__opt {
    color: var(--text-primary);
}

.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__opt:hover,
.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__opt--active {
    background: #333333;
}

.nx-app--dark #dcemprojects-grid .dcem-inline-lookup .nfl__opt--sel {
    color: #62ABF5;
    background: rgba(71, 158, 245, 0.16);
}

.nx-app--dark :is(input, select, textarea, button, a):focus-visible {
    outline-color: #479EF5 !important;
}

.nx-app--dark,
.nx-app--dark .page-scroll,
.nx-app--dark .grid-tbl-wrap,
.nx-app--dark .side-panel,
.nx-app--dark .nfl__menu {
    scrollbar-color: #666666 #1A1A1A;
}

.nx-app--dark ::-webkit-scrollbar-track { background: #1A1A1A; }
.nx-app--dark ::-webkit-scrollbar-thumb {
    background: #666666;
    border-color: #1A1A1A;
}
.nx-app--dark ::-webkit-scrollbar-thumb:hover { background: #858585; }

.nx-app--dark .nx-settings-section--collapsible,
.nx-app--dark .nx-acc,
.nx-app--dark .columns-panel,
.nx-app--dark .col-filter-dropdown,
.nx-app--dark .row-menu,
.nx-app--dark .detail-panel,
.nx-app--dark .detail-panel__header {
    color: var(--text-primary);
    background: var(--bg-card);
    border-color: var(--border-default);
}

.nx-app--dark .nx-settings-section__header,
.nx-app--dark .nx-acc__header {
    color: var(--text-primary);
    background: var(--bg-subtle);
}

.nx-app--dark .nx-settings-section__header:hover,
.nx-app--dark .nx-acc__header:hover,
.nx-app--dark .columns-panel__item:hover,
.nx-app--dark .row-menu__item:hover,
.nx-app--dark .col-filter-dropdown__item:hover {
    background: #333333;
}

.nx-app--dark .columns-panel__search select,
.nx-app--dark .col-filter-dropdown__select,
.nx-app--dark .col-filter-dropdown__actions .cfd-clear,
.nx-app--dark .grid-footer__page-size select {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

.nx-app--dark .columns-panel__item--selected {
    color: var(--text-primary);
    background: rgba(71, 158, 245, 0.16);
}

.nx-app--dark .grid-footer__info,
.nx-app--dark .grid-footer__page-size,
.nx-app--dark .nx-settings-muted,
.nx-app--dark .nx-acc__yesno,
.nx-app--dark .nx-acc__info {
    color: var(--text-tertiary);
}

/* Area opt-in: compact Fluent 2 column filter popover. */
.nx-app .col-menu--modern {
  width: 272px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  background: #F7FAFD;
  border: 1px solid #DCE5EF;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
}
.nx-app .col-menu--modern::-webkit-scrollbar { width: 6px; }
.nx-app .col-menu--modern::-webkit-scrollbar-track { background: transparent; }
.nx-app .col-menu--modern::-webkit-scrollbar-thumb {
  background: #9EAFBC;
  border: 1px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
.nx-app .col-menu--modern::-webkit-scrollbar-thumb:hover { background: #738696; }
.nx-app .col-menu--modern .col-menu__modern-head {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px;
}
.nx-app .col-menu--modern .col-menu__modern-head > div { display: flex; flex-direction: column; min-width: 0; }
.nx-app .col-menu--modern .col-menu__modern-head strong {
  overflow: hidden; color: #203247; font-size: 14px; line-height: 19px; text-overflow: ellipsis; white-space: nowrap;
}
.nx-app .col-menu--modern .col-menu__modern-head span { color: #687789; font-size: 11px; line-height: 16px; }
.nx-app .col-menu--modern .col-menu__modern-head button {
  display: grid; flex: 0 0 auto; width: 28px; height: 28px; margin-right: -4px; place-items: center;
  color: #526274; background: transparent; border: 0; border-radius: 5px; cursor: pointer;
}
.nx-app .col-menu--modern .col-menu__modern-head button:hover { color: #203247; background: #EEF2F6; }
.nx-app .col-menu--modern .col-menu__modern-head svg { width: 16px; height: 16px; }
.nx-app .col-menu--modern .col-menu__sort-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 14px 12px; }
.nx-app .col-menu--modern .col-menu__sort-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 8px;
  color: #33475B; background: #F7F9FB; border: 1px solid #DCE5EF; border-radius: 6px;
  font-family: var(--font); font-size: 11px; font-weight: 600; cursor: pointer;
}
.nx-app .col-menu--modern .col-menu__sort-btn:hover { color: #0F6CBD; background: #EEF6FC; border-color: #A9D3F5; }
.nx-app .col-menu--modern .col-menu__sort-btn svg { width: 14px; height: 14px; }
.nx-app .col-menu--modern .col-menu__sep { margin: 0; background: #E7EDF3; }
.nx-app .col-menu--modern .col-menu__filter { padding: 12px 14px 14px; background: #F7FAFD; }
.nx-app .col-menu--modern .ncf__label { display: block; margin: 0 0 5px; color: #526274; font-size: 11px; font-weight: 600; }
.nx-app .col-menu--modern .ncf__op,
.nx-app .col-menu--modern .ncf__input {
  width: 100%; min-height: 34px; padding: 6px 9px;
  color: #203247; background: #EEF3F8; border: 1px solid transparent; border-radius: 6px;
  box-shadow: none; outline: none;
}
.nx-app .col-menu--modern .ncf__op:focus,
.nx-app .col-menu--modern .ncf__input:focus {
  background: #F3F8FC;
  border-color: transparent;
  border-left: 2px solid #2B88D8;
  box-shadow: none;
}
.nx-app .col-menu--modern .ncf__custom-date,
.nx-app .col-menu--modern .ncf__value { margin-top: 10px; }
.nx-app .col-menu--modern:has(.af-lookup__menu) {
  overflow-x: hidden;
  overflow-y: auto;
}
.nx-app .col-menu--modern .af-lookup__chips {
  align-items: flex-start;
}
.nx-app .col-menu--modern .af-lookup__chip {
  max-width: 100%;
  min-width: 0;
}
.nx-app .col-menu--modern .af-lookup__chip-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.nx-app .col-menu--modern .af-lookup__input {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app .col-menu--modern .af-lookup__input:focus,
.nx-app .col-menu--modern .af-lookup__input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app .col-menu--modern .af-lookup__menu {
  max-height: 210px;
}
.nx-app .col-menu--modern .col-menu__buttons { justify-content: flex-end; margin-top: 12px; gap: 6px; }
.nx-app .col-menu--modern .col-menu__btn { flex: 0 0 auto; min-height: 32px; padding: 6px 14px; border-radius: 6px; }
.nx-app .col-menu--modern .col-menu__btn--primary {
  order: 2;
  border-color: transparent;
  background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%);
  color: #fff;
}
.nx-app .col-menu--modern .col-menu__btn--primary:hover {
  border-color: transparent;
  background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%);
  color: #fff;
}

.nx-app--dark .col-menu--modern {
  color: #D6D6D6; background: #1A1A1A; border-color: #3D3D3D;
}
.nx-app--dark .col-menu--modern .col-menu__modern-head strong { color: #F7F7F7; }
.nx-app--dark .col-menu--modern .col-menu__modern-head span,
.nx-app--dark .col-menu--modern .col-menu__modern-head button { color: #ADADAD; }
.nx-app--dark .col-menu--modern .col-menu__modern-head button:hover { color: #F7F7F7; background: #333333; }
.nx-app--dark .col-menu--modern .col-menu__sort-btn {
  color: #D6D6D6; background: #242424; border-color: #3D3D3D;
}
.nx-app--dark .col-menu--modern .col-menu__sort-btn:hover { color: #77B7F7; background: #333333; border-color: #479EF5; }
.nx-app--dark .col-menu--modern .col-menu__sep { background: #3D3D3D; }
.nx-app--dark .col-menu--modern .col-menu__filter { background: #1A1A1A; }
.nx-app--dark .col-menu--modern .ncf__label { color: #ADADAD; }
.nx-app--dark .col-menu--modern .ncf__op,
.nx-app--dark .col-menu--modern .ncf__input {
  color: #F7F7F7; background: #2B2B2B; border-color: transparent;
}
.nx-app--dark .col-menu--modern .ncf__op:focus,
.nx-app--dark .col-menu--modern .ncf__input:focus {
  background: #303030;
  border-color: transparent;
  border-left: 2px solid #479EF5;
  box-shadow: none;
}

/* Full-page entity grids use the Area grid's responsive New UX scale. */
.nx-app .nexus-common-grid-host:not(.nexus-main-grid-surface) {
  display: contents;
}
.nx-app .area-grid-surface,
.nx-app .col-menu--modern {
  font-family: var(--font);
}
.nx-app .nexus-main-grid-surface .tbl tbody td {
  font-size: var(--nx-type-grid-cell) !important;
}
.nx-app .nexus-main-grid-surface .tbl tbody td .cell-name__text,
.nx-app .nexus-main-grid-surface .tbl tbody td .cell-lookup__link {
  font-size: inherit !important;
  line-height: inherit;
}
.nx-app .nexus-main-grid-surface #accounts-grid .cell-name__text,
.nx-app .nexus-main-grid-surface #accounts-grid .cell-lookup__link {
  font-family: var(--font) !important;
  font-size: var(--nx-type-grid-cell) !important;
  line-height: 1.4;
}
.nx-app .nexus-main-grid-surface .tbl thead th,
.nx-app .nexus-main-grid-surface .tbl .col-head__label {
  font-size: var(--nx-type-grid-header) !important;
}
.nx-app .area-grid-surface .grid-footer,
.nx-app .area-grid-surface .grid-footer * {
  font-size: var(--nx-type-footer) !important;
}
.nx-app .area-grid-surface input[type="search"],
.nx-app .area-grid-surface .search-input input {
  font-size: var(--nx-type-search) !important;
}
.nx-app .area-grid-surface button,
.nx-app .col-menu--modern button {
  font-family: var(--font);
  font-size: var(--nx-type-button) !important;
}
.nx-app .col-menu--modern .col-menu__modern-head strong {
  font-size: var(--nx-type-panel-title);
}
.nx-app .col-menu--modern .col-menu__modern-head span {
  font-size: var(--nx-type-support);
}
.nx-app .col-menu--modern .ncf__label {
  font-size: var(--nx-type-field-label);
}
.nx-app .col-menu--modern .ncf__op,
.nx-app .col-menu--modern .ncf__input {
  font-family: var(--font);
  font-size: var(--nx-type-control);
}

/* Main-grid layout. Theme-neutral sizing keeps the grid footer and scrollbar inside the viewport. */
.nx-app .area-grid-surface {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Main-grid light surfaces: Ice Blue page, Pale Azure controls, Alice Blue header and Slate rows. */
.nx-app:not(.nx-app--dark) .area-grid-surface {
    background: #F4F7FB;
}

.nx-app:not(.nx-app--dark) .area-grid-surface .area-action-panel {
    background: #F7FAFD;
    border-color: #D7E3EF;
    box-shadow: 0 2px 8px rgba(35, 55, 80, 0.05);
}

.nx-app:not(.nx-app--dark) .eq-actionbar--surface {
    background: #F7FAFD;
    border-color: #D7E3EF;
    box-shadow: 0 2px 8px rgba(35, 55, 80, 0.05);
}

/* Administration list shell follows the same surface hierarchy as the Area grid. The retention
   router keeps visited pages mounted, so the match must ignore routes it is holding hidden. */
.nx-app .page-scroll:has(.nx-admin-list-tabs:not(:where([data-nx-route-hidden] *))) {
    background: #F4F7FB;
}

.nx-app .nx-admin-list-tabs {
    margin: var(--sp-1) var(--sp-4) 0;
}

.nx-app .nx-admin-list-tabs .nx-pilltabs {
    margin: 0;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid #DCE5EF;
    border-radius: var(--r-lg);
    box-shadow: 0 2px 8px rgba(35, 55, 80, 0.05);
}

.nx-app .page-scroll:has(.nx-admin-list-tabs:not(:where([data-nx-route-hidden] *))) .pd-tabs {
    margin: var(--sp-1) var(--sp-4) 0;
    background: #FFFFFF;
    border: 1px solid #DCE5EF;
    border-radius: var(--r-lg);
    box-shadow: 0 2px 8px rgba(35, 55, 80, 0.05);
}

.nx-app--dark .page-scroll:has(.nx-admin-list-tabs:not(:where([data-nx-route-hidden] *))) {
    background: var(--bg-page);
}

.nx-app--dark .nx-admin-list-tabs .nx-pilltabs,
.nx-app--dark .page-scroll:has(.nx-admin-list-tabs:not(:where([data-nx-route-hidden] *))) .pd-tabs {
    background: var(--bg-card);
    border-color: var(--border-default);
    box-shadow: none;
}

.nx-app:not(.nx-app--dark) .area-grid-surface > .toolbar {
    background: #EEF5FB;
    border-color: #D7E3EF;
}

.nx-app:not(.nx-app--dark) .area-grid-surface .grid-card {
    background: #FFFFFF;
    border-color: #DCE5EF;
    box-shadow: 0 3px 12px rgba(35, 55, 80, 0.06);
}

.nx-app:not(.nx-app--dark) .nexus-main-grid-surface .grid-tbl-wrap {
    scrollbar-color: #B0BEC5 #FFFFFF;
}

.nx-app:not(.nx-app--dark) .nexus-main-grid-surface .grid-tbl-wrap::-webkit-scrollbar-track {
    background: #FFFFFF;
}

.nx-app:not(.nx-app--dark) .nexus-main-grid-surface .grid-tbl-wrap::-webkit-scrollbar-thumb {
    border-color: #FFFFFF;
}

.nx-app:not(.nx-app--dark) .nexus-main-grid-surface .tbl thead th {
    background: #EAF2FA;
    border-bottom-color: #D5E1ED;
}

.nx-app:not(.nx-app--dark) .nexus-main-grid-surface .tbl tbody tr:nth-child(even) {
    background: #F8FAFC;
}

.nx-app:not(.nx-app--dark) .nexus-main-grid-surface .tbl tbody tr:hover {
    background: #EEF6FC;
}

/* Main-grid responsive layout: fluid table on desktop and record cards at the mobile breakpoint. */
.nx-app .area-grid-surface,
.nx-app .area-grid-surface > *,
.nx-app .area-grid-surface .grid-area,
.nx-app .area-grid-surface .grid-scroll,
.nx-app .area-grid-surface .grid-card,
.nx-app .area-grid-surface .grid-tbl-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.nx-app .area-grid-surface { overflow: hidden; }
.nx-app .nexus-common-grid-viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.nx-app .nexus-common-grid-viewport > .toolbar {
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  padding-right: 0;
  box-sizing: border-box;
}
/* The export/record-count banner is a sibling of the toolbar inside the same viewport, so it must be
   constrained the same way. Without an explicit width its auto width resolves against a containing
   block that is wider than the visible viewport, so the right edge ran past the grid and was clipped
   by the viewport's overflow:hidden. */
.nx-app .nexus-common-grid-viewport > .grid-inline-alert {
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  margin-left: var(--sp-4);
  margin-right: var(--sp-4);
  box-sizing: border-box;
}
.nx-app .nexus-main-grid-surface .tbl {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
.nx-app .nexus-main-grid-surface .tbl th,
.nx-app .nexus-main-grid-surface .tbl td {
  min-width: 150px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-app .nexus-main-grid-surface .tbl .cell-check {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  overflow: visible;
  text-overflow: clip;
}
/* Full-page grids can expose many optional columns. Let content determine each column width and
   use the existing grid-tbl-wrap horizontal scrollbar when the table exceeds the viewport. */
.nx-app .nx-project-grid,
.nx-app .nx-project-grid .nexus-common-grid-host {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}
.nx-app .nexus-main-grid-surface .tbl th[aria-label="Actions"],
.nx-app .nexus-main-grid-surface .tbl .row-actions-cell {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding-left: 0;
  padding-right: 0;
}
.nx-app .area-grid-surface > .toolbar { flex-wrap: wrap; }
.nx-app .area-grid-surface .columns-panel { width: min(360px, calc(100vw - 16px)); }
.nx-app .area-grid-surface .colpick {
  right: 0 !important;
  left: auto !important;
  width: 360px !important;
  max-width: calc(100vw - 16px);
}
.nx-app .area-grid-surface .af-modal { width: min(1100px, calc(100vw - 32px)); }

@media (max-width: 700px) {
  .nx-app .nx-admin-list-tabs,
  .nx-app .page-scroll:has(.nx-admin-list-tabs:not(:where([data-nx-route-hidden] *))) .pd-tabs {
    margin-right: 8px;
    margin-left: 8px;
  }
  .nx-app .area-grid-surface .eq-actionbar--surface {
    margin-right: 8px;
    margin-left: 8px;
    padding-right: 10px;
    padding-left: 10px;
  }
  .nx-app .area-grid-surface > .toolbar {
    gap: 8px;
    padding: 8px;
  }
  .nx-app .area-grid-surface > .toolbar .toolbar__spacer { display: none; }
  .nx-app .area-grid-surface > .toolbar .search-box,
  .nx-app .area-grid-surface > .toolbar .search-input { flex: 1 1 100%; width: 100%; }
  .nx-app .area-grid-surface .grid-tbl-wrap { overflow-x: hidden; }
  .nx-app .nexus-main-grid-surface .tbl {
    display: block;
    min-width: 0 !important;
    table-layout: auto;
    background: transparent;
  }
  .nx-app .nexus-main-grid-surface .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nx-app .nexus-main-grid-surface .tbl tbody {
    display: block;
    padding: 8px;
  }
  .nx-app .nexus-main-grid-surface .tbl tbody tr {
    display: block;
    margin-bottom: 10px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #D7E3EF;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(35,55,80,.05);
  }
  .nx-app .nexus-main-grid-surface .tbl tbody td[data-label] {
    display: grid;
    grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: auto !important;
    min-width: 0;
    max-width: none;
    min-height: 38px;
    padding: 8px 12px !important;
    border-bottom: 1px solid #E7EDF3;
    white-space: normal;
  }
  .nx-app .nexus-main-grid-surface .tbl tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--text-tertiary);
    font-size: var(--nx-type-field-label);
    font-weight: 600;
  }
  .nx-app .nexus-main-grid-surface .tbl tbody td[data-label]:last-child { border-bottom: 0; }
  .nx-app .nexus-main-grid-surface .tbl .cell-check,
  .nx-app .nexus-main-grid-surface .tbl .row-actions-cell { justify-items: end; }
  .nx-app .area-grid-surface .grid-footer,
  .nx-app .area-grid-surface .grid-footer__info {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .nx-app .area-grid-surface .grid-footer { padding: 10px 12px; }
  .nx-app .area-grid-surface .af-overlay { padding: 8px; }
  .nx-app .area-grid-surface .af-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .nx-app .area-grid-surface .af-modal__body { padding: 10px; }
  .nx-app .area-grid-surface .af-rootgroup { min-width: 0; padding: 10px; }
  .nx-app .area-grid-surface .af-cols { display: none; }
  .nx-app .area-grid-surface .af-row,
  .nx-app .area-grid-surface .af-row--related { grid-template-columns: 1fr; }
  .nx-app .area-grid-surface .af-menu { justify-self: end; }
  .nx-app .area-grid-surface .af-toolbar,
  .nx-app .area-grid-surface .af-modal__foot { flex-wrap: wrap; padding: 10px 12px; }
}

.nx-app--dark .nexus-main-grid-surface .tbl tbody tr {
  background: #1A1A1A;
  border-color: #3D3D3D;
  box-shadow: none;
}
.nx-app--dark .nexus-main-grid-surface .tbl tbody td[data-label] { border-bottom-color: #3D3D3D; }

/* Readable typography scale for all full-page entity grids. */
.nx-app .area-grid-surface,
.nx-app .area-create-drawer {
  --nx-type-field-label: var(--nx-type-label);
  --nx-type-field-value: var(--nx-type-value);
  --nx-type-panel-title: var(--nx-type-panel);
  --nx-type-button: var(--nx-type-btn);
  --nx-type-support: var(--nx-type-helper);
  --nx-type-drawer-title: var(--nx-type-drawer);
  --nx-type-title: var(--nx-type-hero);
  --nx-type-grid-header: var(--nx-type-header);
  font-family: var(--font);
}
.nx-app .area-grid-surface .colpick__title,
.nx-app .area-create-drawer .nx-create-drawer__title {
  font-size: var(--nx-type-drawer-title) !important;
}
.nx-app .area-grid-surface .colpick__label,
.nx-app .area-grid-surface .coledit__name,
.nx-app .area-grid-surface .af-field,
.nx-app .area-grid-surface .af-op,
.nx-app .area-grid-surface .af-val__input {
  font-size: var(--nx-type-control) !important;
}
.nx-app .area-grid-surface .af-related-label,
.nx-app .area-grid-surface .af-cols {
  font-size: var(--nx-type-field-label) !important;
}
.nx-app .area-grid-surface .af-modal__title {
  font-size: var(--nx-type-panel-title) !important;
}

/* Project Details uses the approved readable scale without changing other New UI pages. */
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) {
  --nx-type-field-label: var(--nx-type-label);
  --nx-type-field-value: var(--nx-type-value);
  --nx-type-panel-title: var(--nx-type-panel);
  --nx-type-button: var(--nx-type-btn);
  --nx-type-support: var(--nx-type-helper);
  --nx-type-drawer-title: var(--nx-type-drawer);
  --nx-type-title: var(--nx-type-hero);
  --nx-type-grid-header: var(--nx-type-header);
  font-family: var(--font);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-card__title {
  font-family: var(--font);
  font-size: var(--nx-type-panel-title);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-card__desc,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-card__legend li {
  font-family: var(--font);
  font-size: var(--nx-type-support);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-card__label,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-team__role {
  font-family: var(--font);
  font-size: var(--nx-type-field-label);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-card__legend strong,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-team__name {
  font-family: var(--font);
  font-size: var(--nx-type-field-value);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) button,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) a,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) label,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) dt,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) th,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-card__title,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-panel__title,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-team__role,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-form-section__title {
  text-transform: none !important;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-panel__icon--project { color: var(--brand-500); }
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-panel__icon--team { color: var(--teal-500); }
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .page-scroll {
  background: var(--bg-app);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #main-tabpanel-home {
  background: var(--bg-subtle);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-card,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-panel,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-btree-panel {
  background: var(--bg-elevated);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-btree-header {
  background: var(--bg-elevated);
  border-bottom-color: var(--border-default);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-panel::after,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-btree-panel::before {
  background: linear-gradient(90deg, var(--brand-500) 0%, transparent 70%);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-panel--team::after {
  background: linear-gradient(90deg, var(--teal-500) 0%, transparent 70%);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-panel--rfi-impact::after {
  background: linear-gradient(90deg, #5b5fc7 0%, transparent 70%);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-dash__bar {
  overflow: hidden;
  padding-bottom: 2px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xs);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-dash__tab {
  margin: 4px 0 0;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: var(--r-sm);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-dash__tab--active {
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
}
.nx-app:not(.nx-app--dark):has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash {
  --nx-dashboard-canvas: #f4f7fb;
  --nx-dashboard-card-border: #d8e2ee;
  --nx-dashboard-card-shadow: 0 4px 12px rgba(15, 108, 189, .08);
  background: var(--nx-dashboard-canvas);
}
.nx-app:not(.nx-app--dark):has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-table-panel,
.nx-app:not(.nx-app--dark):has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-chart-panel {
  overflow: hidden !important;
  isolation: isolate;
  background: var(--surface-primary) !important;
  background-clip: padding-box;
  border-color: var(--nx-dashboard-card-border) !important;
  box-shadow: var(--nx-dashboard-card-shadow) !important;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-layout {
  height: var(--nx-dashboard-available-height, calc(100dvh - var(--topbar-h) - 136px));
  min-height: 320px;
  max-height: var(--nx-dashboard-available-height, calc(100dvh - var(--topbar-h) - 136px));
  overflow: hidden;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-left {
  flex-basis: clamp(360px, 24vw, 400px);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-left,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-right {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
    .nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-left > .nx-dash-table-panel:first-child {
        flex: 0 0 220px;
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-left > .nx-dash-table-panel:last-child {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-left .nx-dash-issue-fill {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-chart-wrap--donut-sm {
  flex: 1;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-right .nx-dash-table-panel--blue-hdr {
  flex: none;
  box-sizing: border-box;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-right .nx-dash-chart-fill {
  flex: 1;
  height: auto;
  min-height: 0 !important;
  max-height: none;
  overflow: hidden;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-charts-row:has(.nx-dash-chart-panel--steps) {
  flex-wrap: nowrap;
  align-items: stretch;
  height: var(--nx-dashboard-content-height, calc(100dvh - 430px));
  min-height: 240px;
  max-height: var(--nx-dashboard-content-height, calc(100dvh - 430px));
  overflow: hidden;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-charts-row:has(.nx-dash-chart-panel--steps) > .nx-dash-chart-panel--steps,
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-charts-row:has(.nx-dash-chart-panel--steps) > .nx-dash-table-panel--blue-hdr {
  height: 100%;
  min-height: 0;
  max-height: none;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-chart-wrap--steps {
  flex: 1;
  height: auto;
  min-height: 0;
  max-height: none;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-charts-row:has(.nx-dash-chart-panel--steps) .nx-dash-equip-scroll {
  flex: 1;
  height: auto !important;
  min-height: 0;
  overflow-y: auto !important;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-ts-grids {
  align-items: stretch;
  height: var(--nx-dashboard-test-scripts-height, calc(100dvh - 380px));
  min-height: 240px;
  max-height: var(--nx-dashboard-test-scripts-height, calc(100dvh - 380px));
  overflow: hidden;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-ts-grids .nx-dash-table-panel--blue-hdr {
  height: 100%;
  min-height: 0;
  max-height: none;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-ts-grids .nx-dash-equip-scroll {
  flex: 1;
  height: auto !important;
  min-height: 0;
  overflow-y: auto !important;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-ts-pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-ts-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  background: var(--surface-primary);
  font-family: var(--font);
  font-size: var(--nx-type-support);
  cursor: pointer;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-ts-pager__btn:hover:not(:disabled) {
  background: var(--surface-secondary);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-ts-pager__btn:disabled {
  color: var(--text-disabled);
  background: var(--surface-disabled);
  cursor: default;
}
@media (max-width: 900px) {
  .nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-layout,
  .nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-left,
  .nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-overview-right {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-dash-charts-row:has(.nx-dash-chart-panel--steps) {
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) #subtab-panel-dashboard .nx-ts-grids {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__head {
  color: var(--text-inverse);
  background:
    radial-gradient(ellipse at 75% 40%, color-mix(in srgb, var(--brand-400) 45%, transparent) 0%, transparent 55%),
    linear-gradient(120deg, var(--brand-900) 0%, var(--brand-800) 28%, var(--brand-700) 58%, var(--brand-600) 82%, var(--brand-500) 100%);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__icon {
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--text-inverse) 18%, transparent);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__title {
  font-family: var(--font);
  font-size: var(--nx-type-drawer-title);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__subtitle {
  font-family: var(--font);
  font-size: var(--nx-type-support);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__close {
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--text-inverse) 15%, transparent);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .nx-create-drawer__close:hover {
  background: color-mix(in srgb, var(--text-inverse) 30%, transparent);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--ghost {
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-color: var(--border-default);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--primary {
  color: var(--text-inverse);
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--primary:hover:not(:disabled) {
  background: var(--brand-700);
  border-color: var(--brand-700);
}
/* Admin create-drawer save buttons opt into the Building Family hero blue gradient via
   .nec__btn--grad. The solid .nec__btn--primary override above would otherwise flatten them,
   so restore the gradient here with a higher-specificity selector (extra .nec__btn--grad class). */
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--primary.nec__btn--grad {
  background: linear-gradient(120deg, #0f548c 0%, #0f6cbd 55%, #1586d8 100%);
  border-color: transparent;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--primary.nec__btn--grad:hover:not(:disabled) {
  background: linear-gradient(120deg, #0c3b5e 0%, #0f548c 55%, #0f6cbd 100%);
  border-color: transparent;
}
.nx-app--dark:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--ghost {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-default);
  box-shadow: none;
}
.nx-app--dark:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--ghost:hover:not(:disabled) {
  color: #FFFFFF;
  background: #333333;
  border-color: var(--border-strong);
}
.nx-app--dark:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--primary.nec__btn--grad {
  color: #FFFFFF;
  background: linear-gradient(120deg, #0F548C 0%, #0F6CBD 55%, #1586D8 100%);
  border-color: transparent;
  box-shadow: none;
}
.nx-app--dark:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-drawer__footer .nec__btn--primary.nec__btn--grad:hover:not(:disabled) {
  color: #FFFFFF;
  background: linear-gradient(120deg, #0C3B5E 0%, #0F548C 55%, #0F6CBD 100%);
  border-color: transparent;
}
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-hero__rack-line { stroke: currentColor; }
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-hero__rack-line--strong { opacity: .95; }
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-hero__rack-line--medium { opacity: .9; }
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-hero__rack-line--subtle { opacity: .35; }
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-hero__rack-led--ok { fill: var(--success-500); }
.nx-app:has(.nx-pd-page:not(:where([data-nx-route-hidden] *))) .pd-hero__rack-led--warning { fill: var(--warning-500); }

/* Help Center accessibility refinements. */
.nx-help-still-need-help {
  margin: 28px 0 8px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #f0f6ff;
  border: 1px solid #c7d7ed;
  border-radius: 10px;
}
.nx-help-still-need-help__content {
  min-width: 0;
  max-width: 340px;
}
.nx-help-still-need-help__title {
  margin: 0 0 6px;
  color: #1a2e44;
  font-family: var(--font);
  font-size: var(--nx-type-panel-title);
  font-weight: 700;
}
.nx-help-still-need-help__body {
  margin: 0;
  color: #395a8c;
  font-family: var(--font);
  font-size: var(--nx-type-support);
  line-height: 1.6;
}
.nx-help-still-need-help__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 340px));
  justify-content: end;
  gap: 14px;
}
.nx-help-support-card {
  display: block;
  min-width: 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 10px;
}
.nx-help-support-card__title {
  margin: 0 0 6px;
  color: #172033;
  font-family: var(--font);
  font-size: var(--nx-type-field-value);
  font-weight: 700;
}
.nx-help-support-card__body {
  min-height: 42px;
  margin: 0 0 14px;
  color: #40546d;
  font-family: var(--font);
  font-size: var(--nx-type-support);
  line-height: 1.5;
}
.nx-help-support-card__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}
.nx-app .nx-help-still-need-help__action {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  color: #ffffff;
  background: linear-gradient(110deg, #0f5fa8 0%, #1878c9 58%, #2a91df 100%);
  border: 1px solid #0f6cbd;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(15, 108, 189, .22);
  font-family: var(--font);
  font-size: var(--nx-type-button);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.nx-app .nx-help-support-card__buttons .nx-help-still-need-help__action {
  width: 100%;
  padding-inline: 14px;
  white-space: normal;
  text-align: center;
}
.nx-app .nx-help-still-need-help__action:hover {
  color: #ffffff;
  background: linear-gradient(110deg, #0d548f 0%, #146ab4 58%, #2482ca 100%);
  border-color: #115ea3;
  box-shadow: 0 5px 12px rgba(15, 108, 189, .28);
  text-decoration: none;
}
.nx-app .nx-help-still-need-help__action:focus-visible {
  outline: 2px solid #0f6cbd;
  outline-offset: 3px;
}
.nx-app .nx-help-still-need-help__action--secondary {
  color: #0f5fa8;
  background: #ffffff;
  border-color: #9bc7eb;
  box-shadow: none;
}
.nx-app .nx-help-still-need-help__action--secondary:hover {
  color: #0b4f8a;
  background: #edf6ff;
  border-color: #69aee3;
  box-shadow: none;
}
.nx-side-panel__body:has(.nx-help-support-form) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nx-help-support-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.nx-help-support-form .nec {
  flex: 1;
  min-height: 0;
}
.nx-help-support-form .nec__body {
  padding: 0 0 8px;
  overflow-y: auto;
}
.nx-help-support-form .nec__footer {
  min-height: 68px;
  margin: 8px -20px -20px;
  padding: 14px 20px;
  align-items: center;
}
.nx-help-support-form .nec__btn {
  min-height: 40px;
  padding: 9px 18px;
}
.nx-help-support-form .nec__overlay {
  position: fixed;
  inset: var(--topbar-h, 56px) 0 0 auto;
  width: 440px;
  z-index: 260;
}
.nx-help-support-form__success {
  padding: 36px 12px;
  text-align: center;
}
.nx-help-support-form__success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #107c10;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
}
.nx-help-support-form__success h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: var(--nx-type-panel-title);
}
.nx-help-support-form__success p {
  margin: 0 0 20px;
  color: var(--text-secondary);
}
.nx-help-support-form__success-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.nx-support-status {
  min-height: 100%;
  margin: 0;
  background: transparent;
}
.nx-support-status__toolbar {
  position: sticky;
  top: -20px;
  z-index: 2;
  margin: -20px -20px 16px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
}
.nx-support-status__view {
  width: min(260px, 100%);
  min-width: 0;
  flex: 0 0 auto;
}
.nx-support-status__search {
  width: min(260px, 100%);
  display: grid;
  gap: 5px;
}
.nx-support-status__refresh {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
.nx-support-status__search-box {
  height: 40px;
}
.nx-support-status__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
.nx-support-ticket {
  padding: 14px;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(15, 42, 68, .05);
}
.nx-support-ticket__details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.nx-support-status__pager {
  bottom: -20px;
  margin: 14px -20px -20px;
  padding: 12px 20px;
  box-shadow: 0 -4px 12px rgba(15, 42, 68, .06);
}
.nx-support-create__file-hint {
  color: var(--text-tertiary);
  font-size: var(--nx-type-support);
}
.nx-app--dark .nx-help-still-need-help {
  background: #12243b;
  border-color: #345170;
}
.nx-app--dark .nx-help-still-need-help__title,
.nx-app--dark .nx-help-support-card__title {
  color: #f4f7fb;
}
.nx-app--dark .nx-help-still-need-help__body,
.nx-app--dark .nx-help-support-card__body {
  color: #c8d8eb;
}
.nx-app--dark .nx-help-support-card {
  background: #172a42;
  border-color: #3a5472;
}
.nx-app--dark .nx-help-still-need-help__action--secondary {
  color: #9dccfa;
  background: #172a42;
  border-color: #4f7094;
}
.nx-app--dark .nx-help-still-need-help__action--secondary:hover {
  color: #ffffff;
  background: #213b5b;
}
@media (max-width: 1400px) {
  .nx-help-support-form .nec__overlay {
    width: 380px;
  }
}
@media (max-width: 1200px) {
  .nx-help-support-form .nec__overlay {
    width: 340px;
  }
}
.nx-app:has(.nx-side-panel--open:not(:where([data-nx-route-hidden] *))) .nx-help-still-need-help {
  align-items: stretch;
  flex-direction: column;
  gap: 16px;
}
.nx-app:has(.nx-side-panel--open:not(:where([data-nx-route-hidden] *))) .nx-help-still-need-help__content {
  max-width: none;
}
.nx-app:has(.nx-side-panel--open:not(:where([data-nx-route-hidden] *))) .nx-help-still-need-help__actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}
@media (max-width: 1100px) {
  .nx-help-still-need-help {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }
  .nx-help-still-need-help__content {
    max-width: none;
  }
  .nx-help-still-need-help__actions {
    justify-content: start;
  }
}
@media (max-width: 768px) {
  .nx-help-support-form .nec__overlay {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .nx-help-still-need-help__actions,
  .nx-app:has(.nx-side-panel--open:not(:where([data-nx-route-hidden] *))) .nx-help-still-need-help__actions {
    grid-template-columns: 1fr;
  }
  .nx-help-support-card__buttons {
    flex-wrap: wrap;
  }
  .nx-app .nx-help-still-need-help__action {
    width: 100%;
  }
  .nx-support-status__view,
  .nx-support-status__search {
    width: 100%;
  }
}
.nx-app .nx-help-doc-row {
  padding: 0;
}
.nx-app .nx-help-doc-open {
  min-width: 0;
  min-height: 32px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  flex: 1;
  gap: 10px;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nx-app .nx-help-doc-name,
.nx-app .nx-help-type-badge {
  line-height: 20px;
}
.nx-app .nx-help-doc-open:hover {
  background: #f1f6fb;
}
.nx-app .page-scroll--help,
.nx-app #nx-help-main {
  background: #f5f7fa;
}
.nx-app .nx-help-cat-card,
.nx-app .nx-help-cat-card--open,
.nx-app .nx-help-cat-card:hover {
  background: #ffffff;
  border-color: #d8e1ea !important;
  border-top-width: 2px !important;
  border-top-color: #9cb8d1 !important;
  box-shadow: 0 1px 3px rgba(24, 49, 75, .05);
}
.nx-app .nx-help-cat-icon--folder {
  color: #315f87 !important;
  background: #e8f1fa !important;
}
.nx-app .nx-help-cat-icon--folder svg path {
  fill: currentColor !important;
}
.nx-app--dark .nx-help-cat-card,
.nx-app--dark .nx-help-cat-card--open,
.nx-app--dark .nx-help-cat-card:hover {
  border-top-color: #557590 !important;
}
.nx-app--dark .nx-help-cat-icon--folder {
  color: #9fc2df !important;
  background: #20364a !important;
}

/* Help module picker aligned with the Help Center card design. */
.nx-app .nhcp-step1,
.nx-app .nhcp-step2 {
  font-family: var(--font);
}
.nx-app .nhcp-step-hint {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: var(--nx-type-support) !important;
  line-height: 1.5;
}
.nx-app .nhcp-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.nx-app .nhcp-mod-card {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  gap: 4px;
  min-height: 104px !important;
  padding: 12px 8px !important;
  color: var(--text-primary);
  background: #ffffff !important;
  border: 1px solid #d8e1ea !important;
  border-top: 2px solid #9cb8d1 !important;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(24, 49, 75, .05);
  text-align: center !important;
}
.nx-app .nhcp-mod-card:hover,
.nx-app .nhcp-mod-card--hover,
.nx-app .nhcp-mod-card--active {
  background: #f1f6fb !important;
  border-color: #b8cadb !important;
  border-top-color: #789bb9 !important;
  box-shadow: 0 3px 9px rgba(24, 49, 75, .09);
}
.nx-app .nhcp-mod-icon {
  width: 38px;
  height: 38px;
  margin: 0 0 3px !important;
  color: #315f87 !important;
  background: #e8f1fa !important;
  align-self: center !important;
}
.nx-app .nhcp-mod-icon svg path {
  fill: currentColor !important;
}
.nx-app .nhcp-mod-icon--new {
  color: #526b82 !important;
  background: #e7edf3 !important;
}
.nx-app .nhcp-mod-name {
  min-width: 0;
  width: 100%;
  color: var(--text-primary);
  font-size: var(--nx-type-field-value) !important;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-align: center !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-app .nhcp-mod-count {
  width: 100%;
  color: var(--text-tertiary);
  font-size: var(--nx-type-support) !important;
  line-height: 1.3;
  text-align: center;
}
.nx-app .nhcp-mod-arrow {
  display: none !important;
}
.nx-app .nhcp-mod-card--new {
  border-style: dashed !important;
}
.nx-app--dark .nhcp-mod-card,
.nx-app--dark .nhcp-mod-card--new {
  color: #eef5fb;
  background: #172a3b !important;
  border-color: #38546c !important;
  border-top-color: #557590 !important;
}
.nx-app--dark .nhcp-mod-card:hover,
.nx-app--dark .nhcp-mod-card--hover,
.nx-app--dark .nhcp-mod-card--active {
  background: #20384d !important;
  border-color: #527590 !important;
}
.nx-app--dark .nhcp-mod-icon {
  color: #9fc2df !important;
  background: #203f58 !important;
}
.nx-app .nx-help-cat-summary,
.nx-app .nx-help-cat-summary--static {
  background: #f8fafc !important;
}
.nx-app .nx-help-doc-list {
  padding: 0;
  border-top-color: #e8edf3 !important;
}
.nx-app .nx-help-doc-row {
  border-bottom-color: #e8edf3;
}
.nx-app .nx-help-doc-open:focus-visible,
.nx-app .nx-help-cmd-item:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #0f6cbd !important;
  outline-offset: -2px !important;
}
.nx-help-doc-row:focus-within .nx-help-doc-row__actions,
.nx-help-doc-row__actions:focus-within {
  opacity: 1;
}
.nx-app .nx-help-cmd-item {
  width: 100%;
  min-height: 44px;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
}
.nx-help-empty--error,
.nx-del-modal__error,
.nx-support-status__state--error {
  color: #8a0f28;
}
.nx-del-modal__error {
  margin: -12px 0 20px;
  padding-left: 58px;
  font-size: 13px;
}
.nx-support-status__search-box:focus-within {
  border-color: #0f6cbd;
  box-shadow: 0 0 0 2px #0f6cbd;
}
.nx-support-status__search-box input:focus,
.nx-support-status__search-box input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app .nx-help-search-shell .nx-help-search-input:focus,
.nx-app .nx-help-search-shell .nx-help-search-input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app .nx-help-search-shell:focus-within {
  outline: 2px solid rgba(255,255,255,.95) !important;
  outline-offset: 2px !important;
}
.nx-support-status__refresh:focus-visible,
.nx-support-status__pager button:focus-visible,
.nx-help-support-form .nec__btn:focus-visible,
.nx-help-support-form .nec__attach-remove:focus-visible {
  outline: 2px solid #0f6cbd;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .nx-app .nx-support-status__refresh,
  .nx-app .nx-support-status__pager button,
  .nx-app .nec__attach-remove,
  .nx-app .nx-help-row-icon-btn,
  .nx-app .nx-help-card-add-btn,
  .nx-app .nx-help-search-clear,
  .nx-app .nx-help-cmd-esc {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .nx-help-support-form .nec__btn {
    min-height: 44px;
  }
  .nx-app .nx-help-doc-open {
    min-height: 44px;
  }
  .nx-help-doc-row__actions {
    opacity: 1;
  }
  .nx-del-modal__error {
    padding-left: 0;
  }
}

@media (forced-colors: active) {
  .nx-app .nx-help-doc-open:focus-visible,
  .nx-app .nx-help-cmd-item:focus-visible,
  .nx-app .nx-help-search-shell:focus-within,
  .nx-app .nx-support-status__search-box:focus-within,
  .nx-app .nx-support-status__refresh:focus-visible,
  .nx-app .nx-support-status__pager button:focus-visible,
  .nx-app .nx-help-support-form .nec__btn:focus-visible,
  .nx-app .nx-help-support-form .nec__attach-remove:focus-visible {
    outline-color: Highlight !important;
  }
  .nx-app .nx-help-pill--active,
  .nx-app .nx-support-ticket__status {
    border: 1px solid ButtonText !important;
  }
}

/* Help document drawer: calm, neutral Step 2 palette. */
.nx-app .nx-side-panel:has(.nhcp-step2) {
  background: #f7f9fc !important;
}
.nx-app .nx-side-panel:has(.nhcp-step2) .nx-side-panel__header {
  background: #315f87 !important;
}
.nx-app .nx-side-panel:has(.nhcp-step2) .nx-side-panel__body {
  background: #f7f9fc !important;
}
.nx-app .nhcp-module-banner {
  background: #eef4fa !important;
  border-left: 3px solid #7398b8 !important;
  box-shadow: none !important;
}
.nx-app .nhcp-module-banner__icon {
  color: #315f87 !important;
  background: #ddeaf5 !important;
}
.nx-app .nhcp-module-banner__icon svg path {
  fill: currentColor !important;
}
.nx-app .nhcp-module-banner__label {
  color: #66798a !important;
}
.nx-app .nhcp-form-wrapper {
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e1e8ef;
  border-radius: 6px;
}
.nx-app .nhcp-form-wrapper .k-form-buttons {
  background: #ffffff !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step2),
.nx-app--dark .nx-side-panel:has(.nhcp-step2) .nx-side-panel__body {
  background: #111c27 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step2) .nx-side-panel__header {
  background: #203f58 !important;
}
.nx-app--dark .nhcp-module-banner {
  background: #1a3043 !important;
  border-left-color: #6f96b5 !important;
}
.nx-app--dark .nhcp-module-banner__icon {
  color: #9fc2df !important;
  background: #294a64 !important;
}
.nx-app--dark .nhcp-module-banner__label {
  color: #a8bbca !important;
}
.nx-app--dark .nhcp-form-wrapper,
.nx-app--dark .nhcp-form-wrapper .k-form-buttons {
  background: #172533 !important;
  border-color: #30485c !important;
}

/* Help Center action icons: one outline family and consistent controls. */
.nx-app .nx-help-card-add-btn,
.nx-app .nx-help-row-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  color: #52606d !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.nx-app .nx-help-card-add-btn {
  margin-left: auto;
}
.nx-app .nx-help-card-add-btn svg,
.nx-app .nx-help-row-icon-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
}
.nx-app .nx-help-card-add-btn:hover,
.nx-app .nx-help-row-icon-btn:hover {
  color: #315f87 !important;
  background: #eef3f7 !important;
  border-color: #d8e1ea !important;
}
.nx-app .nx-help-row-icon-btn--danger:hover {
  color: #b42318 !important;
  background: #fff1f2 !important;
  border-color: #f3c4c8 !important;
}
.nx-app--dark .nx-help-card-add-btn,
.nx-app--dark .nx-help-row-icon-btn {
  color: #a8bbca !important;
}
.nx-app--dark .nx-help-card-add-btn:hover,
.nx-app--dark .nx-help-row-icon-btn:hover {
  color: #c7dceb !important;
  background: #20384d !important;
  border-color: #38546c !important;
}
.nx-app--dark .nx-help-row-icon-btn--danger:hover {
  color: #ffb4ab !important;
  background: #46262a !important;
  border-color: #744047 !important;
}
@media (max-width: 768px) {
  .nx-app .nx-help-card-add-btn,
  .nx-app .nx-help-row-icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Help Center dark theme aligned with Microsoft Fluent dark neutrals. */
.nx-app--dark {
  --nx-help-dark-canvas: #1b1a19;
  --nx-help-dark-surface: #252423;
  --nx-help-dark-surface-hover: #323130;
  --nx-help-dark-surface-selected: #3b3a39;
  --nx-help-dark-border: #484644;
  --nx-help-dark-text: #f3f2f1;
  --nx-help-dark-text-secondary: #c8c6c4;
  --nx-help-dark-text-tertiary: #a19f9d;
  --nx-help-dark-brand: #479ef5;
  --nx-help-dark-brand-hover: #62abf5;
}
.nx-app--dark .page-scroll--help,
.nx-app--dark #nx-help-main {
  color: var(--nx-help-dark-text);
  background: var(--nx-help-dark-canvas) !important;
}
.nx-app--dark .nx-help-section__title,
.nx-app--dark .nx-help-cat-name,
.nx-app--dark .nx-help-doc-name,
.nx-app--dark .nx-help-still-need-help__title,
.nx-app--dark .nx-help-support-card__title {
  color: var(--nx-help-dark-text) !important;
}
.nx-app--dark .nx-help-section__sub,
.nx-app--dark .nx-help-cat-count,
.nx-app--dark .nx-help-still-need-help__body,
.nx-app--dark .nx-help-support-card__body {
  color: var(--nx-help-dark-text-secondary) !important;
}
.nx-app--dark .nx-help-cat-card,
.nx-app--dark .nx-help-cat-card--open,
.nx-app--dark .nx-help-cat-card:hover {
  background: var(--nx-help-dark-surface) !important;
  border-color: var(--nx-help-dark-border) !important;
  border-top-color: #666666 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .32);
}
.nx-app--dark .nx-help-cat-summary,
.nx-app--dark .nx-help-cat-summary--static {
  background: var(--nx-help-dark-surface) !important;
}
.nx-app--dark .nx-help-cat-icon--folder {
  color: #8ec2f2 !important;
  background: #323130 !important;
}
.nx-app--dark .nx-help-doc-list {
  border-top-color: var(--nx-help-dark-border) !important;
}
.nx-app--dark .nx-help-doc-row {
  border-bottom-color: var(--nx-help-dark-border) !important;
}
.nx-app--dark .nx-help-doc-open:hover,
.nx-app--dark .nx-help-doc-row:hover {
  background: var(--nx-help-dark-surface-hover) !important;
}
.nx-app--dark .nx-help-doc-row:hover .nx-help-doc-name {
  color: var(--nx-help-dark-brand-hover) !important;
}
.nx-app--dark .nx-help-doc-icon,
.nx-app--dark .nx-help-doc-arrow {
  color: var(--nx-help-dark-text-tertiary) !important;
}
.nx-app--dark .nx-help-type-badge {
  color: #8ec2f2 !important;
  background: #323130 !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-help-add-new-tile {
  color: var(--nx-help-dark-text-secondary) !important;
  background: transparent !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-help-add-new-tile:hover {
  color: var(--nx-help-dark-brand-hover) !important;
  background: var(--nx-help-dark-surface) !important;
  border-color: var(--nx-help-dark-brand) !important;
}
.nx-app--dark .nx-help-add-new-tile__icon {
  color: var(--nx-help-dark-brand) !important;
  background: #323130 !important;
}
.nx-app--dark .nx-help-still-need-help {
  background: #201f1e !important;
  border-color: var(--nx-help-dark-border) !important;
}
.nx-app--dark .nx-help-support-card {
  background: var(--nx-help-dark-surface) !important;
  border-color: var(--nx-help-dark-border) !important;
}
.nx-app--dark .nx-help-support-card:hover {
  background: #292827 !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-help-still-need-help__action--secondary {
  color: var(--nx-help-dark-text) !important;
  background: var(--nx-help-dark-surface) !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-help-still-need-help__action--secondary:hover {
  color: #ffffff !important;
  background: var(--nx-help-dark-surface-hover) !important;
  border-color: var(--nx-help-dark-text-tertiary) !important;
}
.nx-app--dark .nhcp-mod-card,
.nx-app--dark .nhcp-mod-card--new {
  color: var(--nx-help-dark-text);
  background: var(--nx-help-dark-surface) !important;
  border-color: var(--nx-help-dark-border) !important;
  border-top-color: #666666 !important;
}
.nx-app--dark .nhcp-mod-card:hover,
.nx-app--dark .nhcp-mod-card--hover,
.nx-app--dark .nhcp-mod-card--active {
  background: var(--nx-help-dark-surface-hover) !important;
  border-color: var(--nx-help-dark-brand) !important;
}
.nx-app--dark .nhcp-mod-name {
  color: var(--nx-help-dark-text) !important;
}
.nx-app--dark .nhcp-mod-count,
.nx-app--dark .nhcp-step-hint {
  color: var(--nx-help-dark-text-secondary) !important;
}
.nx-app--dark .nhcp-mod-icon,
.nx-app--dark .nhcp-mod-icon--new {
  color: #8ec2f2 !important;
  background: #323130 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step2),
.nx-app--dark .nx-side-panel:has(.nhcp-step2) .nx-side-panel__body {
  color: var(--nx-help-dark-text);
  background: var(--nx-help-dark-canvas) !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step2) .nx-side-panel__header {
  background: #0f6cbd !important;
}
.nx-app--dark .nhcp-module-banner {
  background: var(--nx-help-dark-surface) !important;
  border-left-color: var(--nx-help-dark-brand) !important;
}
.nx-app--dark .nhcp-module-banner__icon {
  color: #8ec2f2 !important;
  background: #323130 !important;
}
.nx-app--dark .nhcp-module-banner__label {
  color: var(--nx-help-dark-text-tertiary) !important;
}
.nx-app--dark .nhcp-module-banner__name {
  color: var(--nx-help-dark-text) !important;
}
.nx-app--dark .nhcp-form-wrapper,
.nx-app--dark .nhcp-form-wrapper .k-form-buttons {
  color: var(--nx-help-dark-text);
  background: var(--nx-help-dark-surface) !important;
  border-color: var(--nx-help-dark-border) !important;
}
.nx-app--dark .nhcp-form-wrapper .content-label-style,
.nx-app--dark .nhcp-form-wrapper .k-label,
.nx-app--dark .nhcp-form-wrapper .k-form-label {
  color: var(--nx-help-dark-text) !important;
}
.nx-app--dark .nhcp-form-wrapper .k-textbox,
.nx-app--dark .nhcp-form-wrapper .k-input {
  color: var(--nx-help-dark-text) !important;
  background: #201f1e !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nhcp-form-wrapper .k-input-inner,
.nx-app--dark .nhcp-form-wrapper .k-textbox input {
  color: var(--nx-help-dark-text) !important;
}
.nx-app--dark .nhcp-form-wrapper .k-input-inner::placeholder,
.nx-app--dark .nhcp-form-wrapper .k-textbox input::placeholder {
  color: var(--nx-help-dark-text-tertiary) !important;
}
.nx-app--dark .nhcp-form-wrapper .k-textbox:focus-within,
.nx-app--dark .nhcp-form-wrapper .k-input:focus-within {
  border-color: var(--nx-help-dark-brand) !important;
  box-shadow: 0 0 0 2px rgba(71, 158, 245, .35) !important;
}
.nx-app--dark .nx-help-card-add-btn,
.nx-app--dark .nx-help-row-icon-btn {
  color: var(--nx-help-dark-text-secondary) !important;
}
.nx-app--dark .nx-help-card-add-btn:hover,
.nx-app--dark .nx-help-row-icon-btn:hover {
  color: var(--nx-help-dark-brand-hover) !important;
  background: var(--nx-help-dark-surface-hover) !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-help-row-icon-btn--danger:hover {
  color: #ffb3b3 !important;
  background: #442726 !important;
  border-color: #a4262c !important;
}
.nx-app--dark .nx-help-search-shell .nx-help-search-input,
.nx-app--dark .nx-help-search-shell input.nx-help-search-input {
  color: #f3f2f1 !important;
  caret-color: #f3f2f1 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  appearance: none;
}
.nx-app--dark .nx-help-search-shell .nx-help-search-input:focus,
.nx-app--dark .nx-help-search-shell .nx-help-search-input:focus-visible {
  background: transparent !important;
  outline: 0 !important;
}
.nx-app--dark .nx-help-search-shell .nx-help-search-input:-webkit-autofill {
  -webkit-text-fill-color: #f3f2f1;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-out;
}

/* Ticket status drawer: Fluent dark surfaces without nested black inputs. */
.nx-app--dark .nx-side-panel__body:has(.nx-support-status),
.nx-app--dark .nx-support-status {
  color: #f3f2f1;
  background: #1b1a19 !important;
}
.nx-app--dark .nx-support-status__toolbar,
.nx-app--dark .nx-support-status__pager {
  color: #f3f2f1;
  background: #252423 !important;
  border-color: #484644 !important;
}
.nx-app--dark .nx-support-status__view label,
.nx-app--dark .nx-support-status__search label,
.nx-app--dark .nx-support-ticket__details dt {
  color: #c8c6c4 !important;
}
.nx-app--dark .nx-support-status__view select,
.nx-app--dark .nx-support-status__search-box,
.nx-app--dark .nx-support-status__refresh,
.nx-app--dark .nx-support-status__pager select,
.nx-app--dark .nx-support-status__pager button {
  color: #f3f2f1 !important;
  background: #323130 !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-support-status__search-box {
  overflow: hidden;
}
.nx-app--dark .nx-support-status__search-box input,
.nx-app--dark .nx-support-status__search-box input[type="search"] {
  color: #f3f2f1 !important;
  caret-color: #f3f2f1 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}
.nx-app--dark .nx-support-status__search-box input::placeholder {
  color: #a19f9d !important;
  opacity: 1;
}
.nx-app--dark .nx-support-status__search-box input::-webkit-search-cancel-button {
  filter: invert(1);
}
.nx-app--dark .nx-support-status__search-box:focus-within {
  border-color: #479ef5 !important;
  box-shadow: 0 0 0 2px rgba(71, 158, 245, .35) !important;
}
.nx-app--dark .nx-support-ticket {
  color: #f3f2f1;
  background: #292827 !important;
  border-color: #484644 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .32);
}
.nx-app--dark .nx-support-ticket:hover {
  background: #323130 !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-support-ticket__head h3,
.nx-app--dark .nx-support-ticket__details dd {
  color: #f3f2f1 !important;
}

/* Contact support drawer: same Fluent dark neutral hierarchy. */
.nx-app--dark .nx-side-panel__body:has(.nx-help-support-form),
.nx-app--dark .nx-help-support-form,
.nx-app--dark .nx-help-support-form .nec,
.nx-app--dark .nx-help-support-form .nec__body {
  color: #f3f2f1;
  background: #1b1a19 !important;
}
.nx-app--dark .nx-help-support-form .nec__label {
  color: #f3f2f1 !important;
}
.nx-app--dark .nx-help-support-form .nec__input,
.nx-app--dark .nx-help-support-form .nec__select,
.nx-app--dark .nx-help-support-form .nec__textarea {
  color: #f3f2f1 !important;
  caret-color: #f3f2f1 !important;
  background: #323130 !important;
  border-color: #605e5c !important;
  box-shadow: none !important;
}
.nx-app--dark .nx-help-support-form .nec__input::placeholder,
.nx-app--dark .nx-help-support-form .nec__textarea::placeholder {
  color: #a19f9d !important;
  opacity: 1;
}
.nx-app--dark .nx-help-support-form .nec__input:focus,
.nx-app--dark .nx-help-support-form .nec__select:focus,
.nx-app--dark .nx-help-support-form .nec__textarea:focus {
  border-color: #479ef5 !important;
  box-shadow: 0 0 0 2px rgba(71, 158, 245, .35) !important;
}
.nx-app--dark .nx-help-support-form .nec__select option {
  color: #f3f2f1;
  background: #323130;
}
.nx-app--dark .nx-help-support-form .nec__dropzone {
  color: #c8c6c4 !important;
  background: #292827 !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-help-support-form .nec__dropzone:hover {
  background: #323130 !important;
  border-color: #479ef5 !important;
}
.nx-app--dark .nx-help-support-form .nec__dropzone svg,
.nx-app--dark .nx-help-support-form .nx-support-create__file-hint {
  color: #a19f9d !important;
}
.nx-app--dark .nx-help-support-form .nec__dropzone-browse {
  color: #62abf5 !important;
}
.nx-app--dark .nx-help-support-form .nec__footer {
  background: #252423 !important;
  border-top-color: #484644 !important;
}
.nx-app--dark .nx-help-support-form .nec__btn--ghost {
  color: #f3f2f1 !important;
  background: #323130 !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-help-support-form .nec__btn--ghost:hover {
  background: #3b3a39 !important;
  border-color: #a19f9d !important;
}
.nx-app--dark .nx-help-support-form .nec__btn--primary {
  color: #ffffff !important;
  background: #0f6cbd !important;
  border-color: #0f6cbd !important;
}
.nx-app--dark .nx-help-support-form .nec__btn--primary:hover:not(:disabled) {
  background: #115ea3 !important;
  border-color: #115ea3 !important;
}
.nx-app--dark .nx-help-support-form .nec__overlay {
  background: rgba(27, 26, 25, .78) !important;
}

/* Contact support controls use one border only, including focus state. */
.nx-app .nx-help-support-form .nec__input,
.nx-app .nx-help-support-form .nec__select,
.nx-app .nx-help-support-form .nec__textarea {
  border-width: 1px !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box;
}
.nx-app .nx-help-support-form .nec__input:focus,
.nx-app .nx-help-support-form .nec__input:focus-visible,
.nx-app .nx-help-support-form .nec__select:focus,
.nx-app .nx-help-support-form .nec__select:focus-visible,
.nx-app .nx-help-support-form .nec__textarea:focus,
.nx-app .nx-help-support-form .nec__textarea:focus-visible {
  border-color: #0f6cbd !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app--dark .nx-help-support-form .nec__input:focus,
.nx-app--dark .nx-help-support-form .nec__input:focus-visible,
.nx-app--dark .nx-help-support-form .nec__select:focus,
.nx-app--dark .nx-help-support-form .nec__select:focus-visible,
.nx-app--dark .nx-help-support-form .nec__textarea:focus,
.nx-app--dark .nx-help-support-form .nec__textarea:focus-visible {
  border-color: #479ef5 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Help module and document inputs use one border only in both themes. */
.nx-app .nhcp-input,
.nx-app .nhdf-input {
  border-width: 1px !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box;
}
.nx-app .nhcp-input:focus,
.nx-app .nhcp-input:focus-visible,
.nx-app .nhdf-input:focus,
.nx-app .nhdf-input:focus-visible {
  border-color: #0f6cbd !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app--dark .nhcp-input:focus,
.nx-app--dark .nhcp-input:focus-visible,
.nx-app--dark .nhdf-input:focus,
.nx-app--dark .nhdf-input:focus-visible {
  border-color: #479ef5 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app .nhdf-input--error,
.nx-app .nhdf-input--error:focus,
.nx-app .nhdf-input--error:focus-visible {
  border-color: #c50f1f !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app .nhcp-form-wrapper .k-textbox,
.nx-app .nhcp-form-wrapper .k-input,
.nx-app .nhcp-form-wrapper .k-picker {
  border-width: 1px !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app .nhcp-form-wrapper .k-textbox:focus-within,
.nx-app .nhcp-form-wrapper .k-input:focus-within,
.nx-app .nhcp-form-wrapper .k-picker:focus-within {
  border-color: #0f6cbd !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app--dark .nhcp-form-wrapper .k-textbox:focus-within,
.nx-app--dark .nhcp-form-wrapper .k-input:focus-within,
.nx-app--dark .nhcp-form-wrapper .k-picker:focus-within {
  border-color: #479ef5 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.nx-app .nhcp-form-wrapper .k-input-inner:focus,
.nx-app .nhcp-form-wrapper .k-input-inner:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Module picker drawer: Microsoft Fluent dark neutral surfaces. */
.nx-app--dark .nx-side-panel:has(.nhcp-step1),
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nx-side-panel__body,
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-step1 {
  color: #f3f2f1;
  background: #1b1a19 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nx-side-panel__header {
  background: #0f6cbd !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-step-hint {
  color: #c8c6c4 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-card,
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-card--new {
  color: #f3f2f1 !important;
  background: #252423 !important;
  border-color: #484644 !important;
  border-top-color: #666666 !important;
  box-shadow: none !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-card:hover,
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-card--hover,
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-card--active {
  background: #323130 !important;
  border-color: #479ef5 !important;
  border-top-color: #479ef5 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-icon,
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-icon--new {
  color: #8ec2f2 !important;
  background: #323130 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-name {
  color: #f3f2f1 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-mod-count {
  color: #c8c6c4 !important;
}

/* Expanded New module form: Fluent dark neutral styling. */
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-new-mod-form {
  color: #f3f2f1;
  background: #252423 !important;
  border-color: #484644 !important;
  box-shadow: none !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-label {
  color: #f3f2f1 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-input {
  color: #f3f2f1 !important;
  caret-color: #f3f2f1 !important;
  background: #323130 !important;
  border-color: #605e5c !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-input::placeholder {
  color: #a19f9d !important;
  opacity: 1;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-preview-wrap {
  background: #201f1e !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-preview-lbl {
  color: #c8c6c4 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-preview-card {
  color: #f3f2f1;
  background: #292827 !important;
  border-left-color: #479ef5 !important;
  box-shadow: none !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-preview-icon {
  color: #8ec2f2 !important;
  background: #323130 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-preview-icon svg path {
  fill: currentColor !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-preview-title {
  color: #f3f2f1 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-preview-chip {
  color: #9fd89f !important;
  background: #052505 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-step-actions button:not(:disabled) {
  color: #ffffff !important;
  background: #0f6cbd !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-step-actions button:not(:disabled):hover {
  background: #115ea3 !important;
}
.nx-app--dark .nx-side-panel:has(.nhcp-step1) .nhcp-step-actions button:disabled {
  color: #a19f9d !important;
  background: #3b3a39 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════
   ATTACHMENT COMPONENTS — Dark Mode (Fluent Neutral)
   Applies to: NexusAttachmentDropBox, NexusAttachmentToolbar,
   NexusFileUploadList, nexus-file-upload (dialog/table)
   ═══════════════════════════════════════════════════════════ */

/* ── Drop Box ── */
.nx-app--dark .nxdb { background: rgba(71,158,245,0.06); border: 2px dashed #479EF5; }
.nx-app--dark .nxdb:hover, .nx-app--dark .nxdb--active { background: rgba(71,158,245,0.12); border-color: #62ABF5; }
.nx-app--dark .nxdb__title { color: var(--text-primary); }
.nx-app--dark .nxdb__sub { color: var(--text-tertiary); }
.nx-app--dark .nxdb__link { color: #62ABF5; }
.nx-app--dark .nxdb__loader { background: rgba(20,20,20,0.7); }
.nx-app--dark .nxdb__spinner { border-color: #3D3D3D; border-top-color: #479EF5; }

/* ── Attachment Toolbar (header + dropzone + search) ── */
.nx-app--dark .nxat__header { border-bottom-color: var(--border-default); background: var(--bg-card); }
.nx-app--dark .nxat__title { color: var(--text-primary); }
.nx-app--dark .nxat__search input { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark .nxat__search input::placeholder { color: var(--text-tertiary); }
.nx-app--dark .nxat__search input:focus-visible { border-color: #479EF5; outline-color: #479EF5; }
.nx-app--dark .nxat__dropzone { background: rgba(71,158,245,0.06); border: 2px dashed #479EF5; color: var(--text-secondary); }
.nx-app--dark .nxat__dropzone:hover { background: #242424; border-color: #62ABF5; color: #62ABF5; }
.nx-app--dark .nxat__dropzone-title { color: var(--text-primary); }
.nx-app--dark .nxat__dropzone-icon { color: #479EF5; }
.nx-app--dark .nxat__dropzone-link { color: #62ABF5; }

/* ── File Upload List grid ── */
.nx-app--dark .nxfu-grid table.nxfu-grid__table thead tr { background: var(--bg-elevated); border-bottom-color: var(--border-default); }
.nx-app--dark .nxfu-grid table.nxfu-grid__table thead th { color: var(--text-secondary); }
.nx-app--dark .nxfu-grid table.nxfu-grid__table tbody td { border-bottom-color: var(--border-subtle); color: var(--text-primary); }

/* ── File Upload Dialog (nxfu-*) ── */
.nx-app--dark .nxfu-overlay { background: rgba(0,0,0,0.6); }
.nx-app--dark .nxfu-dialog { background: #1A1A1A; color: var(--text-primary); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.nx-app--dark .nxfu-dialog__header { border-bottom-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark .nxfu-close-x { color: var(--text-tertiary); }
.nx-app--dark .nxfu-close-x:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nx-app--dark .nxfu-dialog__footer { border-top-color: var(--border-default); }

/* Drop zone inside dialog */
.nx-app--dark .nxfu-dropzone { background: #141414; border-color: #479EF5; }
.nx-app--dark .nxfu-dropzone:hover { background: #1A1A1A; border-color: #62ABF5; }
.nx-app--dark .nxfu-drop-title { color: var(--text-primary); }
.nx-app--dark .nxfu-drop-sub { color: var(--text-tertiary); }
.nx-app--dark .nxfu-drop-link { color: #62ABF5; }
.nx-app--dark .nxfu-drop-icon { color: #479EF5; }

/* Table */
.nx-app--dark .nxfu-table th, .nx-app--dark .nxfu-table td { border-bottom-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark .nxfu-table thead th { color: var(--text-secondary); }
.nx-app--dark .nxfu-sn { color: var(--text-tertiary); }
.nx-app--dark .nxfu-file-icon { color: var(--text-tertiary); }

/* Inputs */
.nx-app--dark .nxfu-input { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark .nxfu-input:focus { border-color: #479EF5; box-shadow: 0 0 0 3px rgba(71,158,245,0.2); }
.nx-app--dark .nxfu-title-input { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark .nxfu-title-input:focus-visible { outline-color: #479EF5; }
.nx-app--dark .nxfu-step-select { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark .nxfu-step-select option { background: var(--bg-elevated); }
.nx-app--dark .nxfu-step-text { color: var(--text-primary); }

/* Buttons */
.nx-app--dark .nxfu-btn { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
.nx-app--dark .nxfu-btn:hover:not(:disabled) { background: var(--bg-subtle); border-color: #479EF5; }
.nx-app--dark .nxfu-btn.primary { background: #0078D4; border-color: #0078D4; color: #fff; }
.nx-app--dark .nxfu-btn.primary:hover:not(:disabled) { background: #106EBE; }
.nx-app--dark .nxfu-remove { color: #479EF5; }
.nx-app--dark .nxfu-remove:hover { background: var(--bg-elevated); }

/* Error / loading states */
.nx-app--dark .nxfu-errors { background: rgba(164,38,44,.18); border-color: #7a2327; }
.nx-app--dark .nxfu-error-line { color: #f3a0a4; }
.nx-app--dark .nxfu-loading-overlay { background: rgba(20,20,20,0.7); }
.nx-app--dark .nxfu-spinner { border-color: #3D3D3D; border-top-color: #479EF5; }
.nx-app--dark .nxfu-progress { background: #3D3D3D; }
.nx-app--dark .nxfu-progress-text { color: var(--text-primary); }

/* Cards (mobile) */
.nx-app--dark .nxfu-card { background: var(--bg-elevated); border-color: var(--border-default); }
.nx-app--dark .nxfu-label { color: var(--text-secondary); }

/* Camera */
.nx-app--dark .nxfu-video { border-color: var(--border-default); }
.nx-app--dark .nxfu-preview-img { background: var(--bg-elevated); border-color: var(--border-default); }

/* ── Attachment Grid table (NexusAttachmentGrid, all modules) ── */
.nx-app--dark [class*="nxag__"] { color: var(--text-primary); }

.nx-app--dark .nxag table.nxag__table tbody td { border-bottom-color: var(--border-subtle) !important; color: var(--text-primary) !important; }

/* ── nx-attach card dark mode (NexusAttachments.razor) ── */
.nx-app--dark .nx-attach__card { background: none !important; border-color: transparent !important; }
/* Each block inside the card is its own surface, so theme them individually. */
.nx-app--dark .nx-attach__card .nxat__header,
.nx-app--dark .nx-attach__dropbox,
.nx-app--dark .nx-attach__card .nxag,
.nx-app--dark .nx-attach__card .nxaf { background: #1A1A1A !important; border-color: #3D3D3D !important; }
/* Matches .nx-app--dark table.tbl thead th, the dark header of the entity common grid. Sticky headers
   need the background on the th itself, so it is repeated here rather than left on the tr. The
   Documents grid shares the light header rule, so it has to share the dark one too or it would keep
   the pale blue header in dark mode. */
.nx-app--dark .nx-attach__card .nxg__table thead th,
.nx-app--dark .nx-doc .nxg__table thead th {
  background: #1F1F1F !important;
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border-default);
}
.nx-app--dark .nx-attach__header { border-bottom-color: #3D3D3D; }
.nx-app--dark .nx-attach__title { color: var(--text-primary); }
.nx-app--dark .nx-attach__search input { background: #242424; border-color: #3D3D3D; color: var(--text-primary); }
.nx-app--dark .nx-attach__search input::placeholder { color: var(--text-tertiary); }
.nx-app--dark .nx-attach__dropzone { background: rgba(71,158,245,0.06); border-color: #479EF5; color: var(--text-secondary); }
.nx-app--dark .nx-attach__dropzone:hover { background: rgba(71,158,245,0.12); border-color: #62ABF5; }
.nx-app--dark .nx-attach__table thead th { background: #242424 !important; color: #D6D6D6 !important; border-bottom-color: #3D3D3D !important; }
.nx-app--dark .nx-attach__table th, .nx-app--dark .nx-attach__table td { border-bottom-color: #3D3D3D; color: var(--text-primary); }
.nx-app--dark .nx-attach__row--selected td { background: #1D3A5F; }
.nx-app--dark .nx-attach__empty { color: var(--text-tertiary); }
.nx-app--dark .nx-attach__moveto { background: #242424; border-color: #3D3D3D; color: var(--text-primary); }
.nx-app--dark .nx-attach__row-action { color: #479EF5; }
.nx-app--dark .nx-attach__row-action:hover { background: #242424; border-color: #3D3D3D; }

/* NexusAttachmentFooter is CSS-isolated; keep its theme rules global so the dark ancestor applies. */
.nx-app--dark .nxaf { background: #1A1A1A !important; border-top-color: #3D3D3D !important; }
.nx-app--dark .nxaf__count { color: #F7F7F7 !important; }
/* --danger-700 is #6e0811, chosen for contrast against the light bar; on the #1A1A1A dark bar it is
   almost unreadable, so the hint lifts to the same soft red the dark failed status label uses. */
.nx-app--dark .nxaf__hint { color: #F08080 !important; }
.nx-app--dark .nxaf__btn {
  color: #F3F4F6 !important;
  background: #242424 !important;
  border-color: #4B5563 !important;
}
.nx-app--dark .nxaf__btn:hover:not(:disabled) {
  background: #303030 !important;
  border-color: #6B7280 !important;
}
.nx-app--dark .nxaf__btn--primary {
  color: #fff !important;
  background: linear-gradient(135deg, #0F6CBD, #5B5FC7) !important;
  border-color: transparent !important;
}
.nx-app--dark .nx-attach__valerr {
  background: rgba(164,38,44,.18);
  border-color: #7A2327;
  color: #F3A0A4;
}
.nx-app--dark .nx-attach__valerr-icon,
.nx-app--dark .nx-attach__valerr-title,
.nx-app--dark .nx-attach__valerr-list,
.nx-app--dark .nx-attach__valerr-close { color: #F3A0A4; }
.nx-app--dark .nx-attach__valerr-close:hover { background: rgba(243,160,164,.16); }
/* Same dark treatment for the initialization failure block, which uses the identical danger tokens. */
.nx-app--dark .nx-attach__initerr {
  background: rgba(164,38,44,.18);
  border-color: #7A2327;
  color: #F3A0A4;
}
.nx-app--dark .nx-attach__initerr-icon,
.nx-app--dark .nx-attach__initerr-text,
.nx-app--dark .nx-attach__initerr-retry { color: #F3A0A4; border-color: #7A2327; }
.nx-app--dark .nx-attach__initerr-retry:hover { background: rgba(243,160,164,.16); }

/* ── Drop zone dark mode (NexusAttachmentDropBox.razor) ── */
.nx-app--dark .nxdb { background: rgba(71,158,245,0.06) !important; border-color: #479EF5 !important; }
.nx-app--dark .nxdb:hover, .nx-app--dark .nxdb--active { background: rgba(71,158,245,0.12) !important; border-color: #62ABF5 !important; }

/* ── Grid tbody dark (NexusAttachmentGrid) ──
   thead is themed by the .nx-attach__card .nxg__table thead th rule above, which is the single
   source of truth so the sticky header matches the details-page grid. */
.nx-app--dark .nxag table.nxag__table tbody tr { background: #1A1A1A !important; }

.nx-app--dark .nxag table.nxag__table tbody tr:hover { background: #242424 !important; }

/* ── Attachment grid inputs dark ── */
.nx-app--dark .nxag__title-input,
.nx-app--dark .nxag__step-select { background: #242424 !important; border-color: #3D3D3D !important; color: #F7F7F7 !important; }

/* ── Status labels dark mode ──
   Plain coloured text, matching the light theme: only the foreground colour is themed. */
.nx-app--dark .nxag__status--pending
{ background: transparent !important; color: #FFC83D !important; border-color: transparent !important; }

.nx-app--dark .nxag__status--uploaded
{ background: transparent !important; color: #54B054 !important; border-color: transparent !important; }

.nx-app--dark .nxag__status--uploading
{ background: transparent !important; color: #62ABF5 !important; border-color: transparent !important; }

.nx-app--dark .nxag__status--failed
{ background: transparent !important; color: #F08080 !important; border-color: transparent !important; }

/* ── Attachment grid column sizing ──
   The attachment grids are user-resizable, so any column can be dragged narrower than its content.
   table-layout: fixed makes the declared widths authoritative (so the table can never grow past its
   card), and the clipping rules stop a squeezed cell from painting over its neighbour. The AI summary
   cell is the one exception: it must keep overflow visible for its popover, so its inner text
   truncates instead. */
.nx-app .nx-attach .nxg__table { table-layout: fixed; }
.nx-app .nx-attach .nxg__table thead th { overflow: hidden; }
.nx-app .nx-attach .nxg__table thead th > *:not(.nxg__col-resizer) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-app .nx-attach .nxg__col-title { display: block; }
.nx-app .nx-attach .nxg__table tbody td:not(.nx-ai-cell) { overflow: hidden; text-overflow: ellipsis; }
.nx-app .nx-attach .nx-ai-cell { overflow: visible; }
.nx-app .nx-attach .nx-ai-cell > .nx-ai-link,
.nx-app .nx-attach .nx-ai-cell > .nx-ai-note { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sticky header for the capped grid body. This is a clone of the entity common grid header
   (.nx-app:not(.nx-app--dark) .nexus-main-grid-surface .tbl thead th, rendered by NexusCommonGrid) so
   the attachment grids read identically to the grid used on every entity page, and it is the single
   source of truth for all four of them - and now for the Documents grid too, which is why .nx-doc is
   on the selector rather than owning a near-identical copy. The background MUST be on the th: a
   thead/tr background does not travel with a sticky cell, which is why the rows were showing through.
   The tables use border-collapse: separate so this border-bottom actually renders on the sticky cell. */
.nx-app :is(.nx-attach, .nx-doc) .nxg__table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: left;
  background: #EAF2FA;
  color: #424242;
  font-size: var(--nx-type-grid-header);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  padding: 11px 16px;
  border-bottom: 1px solid #D5E1ED;
}

/* ── Selection column ──
   The select-all box has to be exempted from two rules above, which is why it was drawn a different
   size and a couple of pixels off the row boxes below it:
     1. `thead th > *:not(.nxg__col-resizer) { max-width: 100% }` is meant to ellipsis long header
        labels, but it also caps the checkbox - and under table-layout: fixed the th content box is
        only 44px - 32px of header padding = 12px, so the 16px control was squashed to a 12x16
        rectangle instead of a square.
     2. The header padding is 16px either side while the body cell uses 14px, so even at a matching
        size the two columns of boxes could not line up.
   Both cells now use the same zero-padded, centred box, so the select-all sits exactly above the row
   controls at every column width. Declared here rather than in the component sheet because these are
   the rules being overridden and scoped styles cannot outrank them. .nx-doc__col-check joins in so the
   Documents grid gets the identical control. */
.nx-app .nx-attach .nxg__table thead th.nxag__h-check,
.nx-app .nx-attach .nxg__table tbody td.nxag__c-check,
.nx-app .nx-doc .nxg__table thead th.nx-doc__col-check,
.nx-app .nx-doc .nxg__table tbody td.nx-doc__col-check {
  padding: 0;
  text-align: center;
  vertical-align: middle;
  overflow: visible;
}

.nx-app .nx-attach .nxg__table thead th.nxag__h-check > input[type="checkbox"],
.nx-app .nx-attach .nxg__table tbody td.nxag__c-check > input[type="checkbox"],
.nx-app .nx-doc .nxg__table thead th.nx-doc__col-check > input[type="checkbox"],
.nx-app .nx-doc .nxg__table tbody td.nx-doc__col-check > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: none;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--brand-600, #0f6cbd);
  cursor: pointer;
}
/* Height comes from the live viewport, not a constant. --nxag-fit is written by initGridViewportFit
   (nexus-new-ui.js), which measures this element's own top on every resize and subtracts the sticky
   commit bar. The dvh fallback keeps the grid bounded before that runs and if JS fails; dvh rather
   than vh so a mobile browser's collapsing URL bar does not make the grid jump.

   max-height, not height: three files shrink the card to its content instead of leaving a white void,
   while forty fill the viewport and scroll internally. overscroll-behavior stops a wheel that reaches
   the last row from chaining into the page and dragging the header out of sight, and scrollbar-gutter
   stops the columns jumping sideways when filtering crosses the overflow threshold. */
.nx-app .nx-attach .nxg__table-wrap {
  border-radius: 8px;
  max-height: var(--nxag-fit, calc(100dvh - 320px));
  min-height: 180px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
/* AI summary is the second column here, so the panel opens to the right of its left edge. The shared
   rule anchors right: 0, which is correct only for the DAMS grid where the column sits on the right. */
.nx-app .nx-attach .nx-ai-popover { left: 0; right: auto; }

/* The attachment tab scrolls with the page: no bounded-height chain and no sticky header. */

/* ── Attachment blocks (light mode) ──
   The card is a transparent layout container; each block inside it is its own bordered surface
   (same recipe as .nx-insp-grid-wrap on the Inspection steps tab). */
.nx-app .nx-attach__card { background: none; }
.nx-app .nxdb { background: #EBF4FF; }
/* ── Shared attachment grid: Uploaded-by avatar + name cell ─────────────── */
.nx-by-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-by-av {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--nx-type-badge); font-weight: 600; letter-spacing: 0;
    overflow: hidden; line-height: 1;
}
.nx-by-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.nx-by-name {
    font-size: var(--nx-type-value); font-weight: 400; color: var(--text-primary, #1B2A3D);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-by-account {
    font-size: var(--nx-type-helper); color: var(--text-secondary, #5B6B7D);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* RFI collapsible panels keep the title beside the collapse button; actions stay right-aligned. */
.nx-app .nx-rfi-detail .pd-panel--collapsible .pd-panel__title { margin-right: auto; }

/* ── Responsive typography contract ───────────────────────────────────────
   This final layer keeps current and future New UI surfaces on the shared
   Fluent type scale, including controls rendered by reusable grid panels. */
.nx-app,
.nx-app button,
.nx-app input,
.nx-app select,
.nx-app textarea,
.nx-app option {
  font-family: var(--nx-font) !important;
}

.nx-app button:not(.icon-only),
.nx-app [role="button"]:not(.icon-only),
.nx-app .btn,
.nx-app .pd-btn,
.nx-app .nec__btn,
.nx-app .eq-action {
  font-size: var(--nx-type-btn) !important;
  text-transform: none !important;
}

.nx-app input:not([type="checkbox"]):not([type="radio"]),
.nx-app select,
.nx-app textarea,
.nx-app option {
  font-size: var(--nx-type-control) !important;
}

.nx-app input[type="search"],
.nx-app .search-input input,
.nx-app [class*="search"] input,
.nx-app input[class*="search"],
.nx-app input[class*="filter"] {
  font-size: var(--nx-type-search) !important;
}

.nx-app input::placeholder,
.nx-app textarea::placeholder {
  font-size: inherit;
}

.nx-app label:has(input[type="radio"]),
.nx-app label:has(input[type="checkbox"]),
.nx-app .radio-label,
.nx-app .checkbox-label {
  font-size: var(--nx-type-radio) !important;
  text-transform: none !important;
}

.nx-app dt,
.nx-app .pd-form-label,
.nx-app .nec__label,
.nx-app .nx-field__label,
.nx-app .field-label,
.nx-app .form-label,
.nx-app .control-label,
.nx-app .nx-panel__label,
.nx-app label:not(:has(input[type="radio"])):not(:has(input[type="checkbox"])) {
  font-size: var(--nx-type-label) !important;
  text-transform: none !important;
}

.nx-app dd,
.nx-app .nx-field__value,
.nx-app .field-value,
.nx-app .read-only-value {
  font-size: var(--nx-type-value) !important;
}

.nx-app [role="tab"],
.nx-app .nx-tab,
.nx-app .pd-tab,
.nx-app .nav-tab,
.nx-app .tab-label {
  font-size: var(--nx-type-tab) !important;
  text-transform: none !important;
}

.nx-app h1,
.nx-app .page-title,
.nx-app .page-hero__title,
.nx-app .pd-hero__title,
.nx-app .nx-hero__title {
  font-size: var(--nx-type-hero) !important;
  text-transform: none !important;
}

.nx-app .pd-panel__title,
.nx-app .pd-card__title,
.nx-app .panel-title,
.nx-app [class$="panel__title"],
.nx-app [class$="section__title"] {
  font-size: var(--nx-type-panel) !important;
  text-transform: none !important;
}

.nx-app .nx-create-drawer__title,
.nx-app .pd-drawer__title,
.nx-app .drawer-title,
.nx-app [class$="drawer__title"] {
  font-size: var(--nx-type-drawer) !important;
  text-transform: none !important;
}

.nx-app table tbody td,
.nx-app .k-grid td,
.nx-app .nx-grid-cell {
  font-size: var(--nx-type-grid-cell) !important;
}

.nx-app table thead th,
.nx-app .k-grid th,
.nx-app .nx-grid-header {
  font-size: var(--nx-type-grid-header) !important;
  text-transform: none !important;
}

.nx-app table input:not([type="checkbox"]):not([type="radio"]),
.nx-app table select,
.nx-app table textarea,
.nx-app table option,
.nx-app .k-grid input:not([type="checkbox"]):not([type="radio"]),
.nx-app .k-grid select,
.nx-app .k-grid textarea,
.nx-app .k-grid option,
.nx-app .nfl__input,
.nx-app .nfl__value,
.nx-app .nfl__opt,
.nx-app .nfl__status {
  font-size: var(--nx-type-grid-cell) !important;
}

.nx-app .grid-footer,
.nx-app .grid-footer *,
.nx-app .nx-pagination,
.nx-app .pagination,
.nx-app .k-pager,
.nx-app .k-pager * {
  font-size: var(--nx-type-footer) !important;
}

/* Test grid typography follows the shared responsive type contract. */
.nx-app .test-grid-surface {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--nx-font);
}

.nx-app .test-grid-surface .test-grid-actionbar {
  margin-left: 16px;
}

.nx-app .test-grid-surface button:not(.icon-only) {
  font-size: var(--nx-type-btn) !important;
  text-transform: none !important;
}

.nx-app .test-grid-surface input[type="search"] {
  font-size: var(--nx-type-search) !important;
}

.nx-app .test-grid-surface table tbody td,
.nx-app .test-grid-surface table tbody td input:not([type="checkbox"]):not([type="radio"]),
.nx-app .test-grid-surface table tbody td select,
.nx-app .test-grid-surface table tbody td option {
  font-size: var(--nx-type-grid-cell) !important;
}

.nx-app .test-grid-surface table thead th,
.nx-app .test-grid-surface table thead th button {
  font-size: var(--nx-type-grid-header) !important;
  text-transform: none !important;
}

.nx-app .test-grid-surface .grid-footer,
.nx-app .test-grid-surface .grid-footer * {
  font-size: var(--nx-type-footer) !important;
}

.nx-app .helper-text,
.nx-app .field-error,
.nx-app [class*="__helper"],
.nx-app [class*="__error"],
.nx-app [class*="__status"] {
  font-size: var(--nx-type-helper) !important;
}

.nx-app .badge,
.nx-app .status,
.nx-app .tag,
.nx-app [class*="__badge"],
.nx-app [class*="__count"] {
  font-size: var(--nx-type-badge) !important;
}

.nx-app label,
.nx-app th,
.nx-app nav a,
.nx-app [role="tab"] {
  text-transform: none !important;
}

/* Final grid chrome rule: grid modules share the page surface rather than nesting bordered cards
   around the action bar and common grid toolbar. Individual controls and the table remain bordered. */
.nx-app .eq-actionbar.eq-actionbar--surface,
.nx-app .toolbar[role="toolbar"] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================
   Access denied and inactive account
   ============================================================ */
.nx-app.nx-denied-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.nx-app .nx-denied-topbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  color: #fff;
  background: #0f548c;
  box-shadow: var(--shadow-sm);
}

.nx-app .nx-denied-topbar .topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
}

.nx-app .nx-denied-topbar .topbar__brand-logo {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #0f548c;
  background: #fff;
  font-size: 15px;
  font-weight: 800;
}

.nx-app .nx-denied-shell {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.nx-app .nx-denied {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
  background:
    radial-gradient(circle at 12% 18%, rgba(15, 108, 189, .09), transparent 32%),
    var(--bg-app);
}

.nx-app .nx-denied__card {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 18px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xl);
}

.nx-app .nx-denied__aside {
  padding: clamp(28px, 4vw, 44px);
  color: #fff;
  background: linear-gradient(145deg, #0c3b5e 0%, #0f6cbd 100%);
}

.nx-app .nx-denied__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 42px;
}

.nx-app .nx-denied__brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 9px;
  color: #0f6cbd;
  background: #fff;
}

.nx-app .nx-denied__brand-mark svg,
.nx-app .nx-denied__lock svg,
.nx-app .nx-denied__info-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nx-app .nx-denied__brand-mark svg {
  width: 22px;
  height: 22px;
}

.nx-app .nx-denied__brand-text,
.nx-app .nx-denied__info-body,
.nx-app .nx-denied__user-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nx-app .nx-denied__brand-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.nx-app .nx-denied__brand-sub {
  margin-top: 2px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
}

.nx-app .nx-denied__lock {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.nx-app .nx-denied__aside-title {
  margin: 0 0 10px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.nx-app .nx-denied__aside-text {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.6;
}

.nx-app .nx-denied__rule {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.nx-app .nx-denied__info {
  display: grid;
  gap: 20px;
  list-style: none;
}

.nx-app .nx-denied__info-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.nx-app .nx-denied__info-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 5px;
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.nx-app .nx-denied__info-label {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.nx-app .nx-denied__info-text {
  margin-top: 3px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.5;
}

.nx-app .nx-denied__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 6vw, 68px);
}

.nx-app .nx-denied__heading {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: clamp(28px, 4vw, 38px) !important;
  font-weight: 700;
  line-height: 1.2;
}

.nx-app .nx-denied__message {
  max-width: 590px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

.nx-app .nx-denied__user {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-subtle);
}

.nx-app .nx-denied__avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0f6cbd;
  font-size: 15px;
  font-weight: 700;
}

.nx-app .nx-denied__user-name {
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.nx-app .nx-denied__user-email,
.nx-app .nx-denied__user-org {
  overflow-wrap: anywhere;
  color: var(--text-tertiary);
  font-size: 12px;
}

.nx-app .nx-denied__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid #f1b7bd;
  border-radius: var(--r-full);
  color: var(--danger-700);
  background: var(--danger-50);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.nx-app .nx-denied__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger-500);
}

.nx-app.nx-app--dark .nx-denied {
  background: #141414;
}

.nx-app.nx-app--dark .nx-denied__card,
.nx-app.nx-app--dark .nx-denied__main {
  background: #242424;
}

.nx-app.nx-app--dark .nx-denied__heading,
.nx-app.nx-app--dark .nx-denied__user-name {
  color: #fff;
}

.nx-app.nx-app--dark .nx-denied__message,
.nx-app.nx-app--dark .nx-denied__user-email,
.nx-app.nx-app--dark .nx-denied__user-org {
  color: #d1d1d1;
}

.nx-app.nx-app--dark .nx-denied__user {
  border-color: #525252;
  background: #333;
}

@media (max-width: 760px) {
  .nx-app .nx-denied {
    place-items: start center;
    padding: 20px 14px;
  }

  .nx-app .nx-denied__card {
    grid-template-columns: 1fr;
  }

  .nx-app .nx-denied__brand {
    margin-bottom: 28px;
  }

  .nx-app .nx-denied__main {
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .nx-app .nx-denied-topbar {
    padding: 0 16px;
  }

  .nx-app .nx-denied__aside {
    padding: 28px 24px;
  }

  .nx-app .nx-denied__user {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .nx-app .nx-denied__avatar {
    width: 44px;
    height: 44px;
  }

  .nx-app .nx-denied__badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ============================================================================
   nx-tip: custom hover/focus tooltip for upload status chips (no Telerik)

   Replaces the native title= attribute on the attachment / file-upload status chips so the full
   client-side validation message is reachable on hover, keyboard focus and touch, matching the
   classic UI behaviour (short message in the grid, full message on hover).

   The bubble is created once by initTooltips() in js/nexus-new-ui.js and appended to <body>, so it
   is deliberately NOT scoped under .nx-app and uses position:fixed to escape the grid's
   overflow:auto scroller.
   ============================================================================ */
.nx-tip-bubble {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 13000;
    display: none;
    box-sizing: border-box;
    max-width: min(360px, calc(100vw - 16px));
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    background: #1B1A19;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
    pointer-events: none;
}

.nx-tip-bubble--open {
    display: block;
}

/* Dark theme. In light mode the near-black bubble separates itself from the page; on a dark surface
   (#1A1A1A rows, #242424 hover) it would sink into the background with only its hairline border
   visible, so the bubble lifts to an elevated grey. The class is set by nxTipShow() in
   js/nexus-new-ui.js because the bubble is a child of <body>, outside the themed .nx-app shell. */
.nx-tip-bubble--dark {
    border-color: rgba(255, 255, 255, .28);
    background: #3B3A39;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}

.nx-tip-anchor {
    cursor: help;
}

.nx-tip-anchor:focus-visible {
    outline: 2px solid #0F6CBD;
    outline-offset: 2px;
}

.nx-app--dark .nx-tip-anchor:focus-visible {
    outline-color: #60A5FA;
}

@media (forced-colors: active) {
    .nx-tip-bubble {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
        forced-color-adjust: none;
    }
}