@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400&family=Inter:wght@400;500;600&display=swap');

/*
 * NEXBLD Enterprise Design System v1.0 (PI145)
 * Canonical visual authority for application surfaces and components.
 * Deployment mirror: public/assets/nexbld-design-system.css (generated only).
 */

:root {
  color-scheme: light;

  /* Structural color */
  --nxds-page: #f6f8fa;
  --nxds-canvas: #ffffff;
  --nxds-surface: #ffffff;
  --nxds-surface-elevated: #ffffff;
  --nxds-surface-subtle: #f2f5f7;
  --nxds-surface-selected: #f7f1e7;
  --nxds-border: #dce2e7;
  --nxds-border-muted: #e9edf0;
  --nxds-divider: #e4e9ed;
  --nxds-text: #17202d;
  --nxds-text-secondary: #536172;
  --nxds-text-muted: #687587;
  --nxds-text-inverse: #f8fbff;
  --nxds-disabled: #98a2ad;

  /* Brand, navigation, and focus */
  --nxds-header-base: #142158;
  --nxds-header-mid: #123b6f;
  --nxds-header-accent: #105f8e;
  --nxds-header-wash: #18707d;
  --nxds-header-gradient: linear-gradient(180deg, #105f8e 0%, #114d7d 28%, #123b6f 62%, #142158 100%);
  --nxds-nav-active: #b68d4f;
  --nxds-nav-inactive: #596879;
  --nxds-nav-hover: #243f58;
  --nxds-focus: #167eb8;
  --nxds-focus-ring: rgba(22, 126, 184, .38);

  /* Semantic color; meaning must always include text or an accessible label. */
  --nxds-success: #34785f;
  --nxds-success-bg: #e6f2ec;
  --nxds-warning: #8a5a1f;
  --nxds-warning-bg: #faf0df;
  --nxds-error: #7f342f;
  --nxds-error-bg: #f8e9e7;
  --nxds-critical: #7f1d1d;
  --nxds-info: #31576b;
  --nxds-info-bg: #eaf0f3;
  --nxds-neutral: #34434c;
  --nxds-neutral-bg: #eef2f0;

  /* Approved visualization registry; order maximizes adjacent contrast. */
  --nxds-viz-1: #0b54b2;
  --nxds-viz-2: #fd8f20;
  --nxds-viz-3: #637b63;
  --nxds-viz-4: #d70c1d;
  --nxds-viz-5: #18707d;
  --nxds-viz-6: #db894b;
  --nxds-viz-7: #0b414f;
  --nxds-viz-8: #d64e15;
  --nxds-viz-9: #167eb8;
  --nxds-viz-10: #b68d4f;
  --nxds-viz-11: #7f1d1d;

  /* Typography */
  --nxds-font: Inter, "Avenir Next", Aptos, "Segoe UI", system-ui, sans-serif;
  --nxds-font-project: "Barlow Condensed", Inter, "Avenir Next", Aptos, "Segoe UI", system-ui, sans-serif;
  --nxds-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --nxds-type-page: clamp(1.5rem, 1.15rem + .8vw, 1.9rem);
  --nxds-type-section: 1.25rem;
  --nxds-type-card: .94rem;
  --nxds-type-body: .875rem;
  --nxds-type-small: .78rem;
  --nxds-type-label: .72rem;
  --nxds-type-caption: .69rem;
  --nxds-type-metric: clamp(1.35rem, 1.1rem + .65vw, 1.65rem);
  --nxds-leading-tight: 1.2;
  --nxds-leading-body: 1.5;
  --nxds-weight-regular: 400;
  --nxds-weight-medium: 500;
  --nxds-weight-semibold: 600;

  /* Spacing: four-pixel base, eight-pixel working rhythm, 24px sections. */
  --nxds-space-1: .25rem;
  --nxds-space-2: .5rem;
  --nxds-space-3: .75rem;
  --nxds-space-4: 1rem;
  --nxds-space-5: 1.25rem;
  --nxds-space-6: 1.5rem;
  --nxds-space-8: 2rem;
  --nxds-space-10: 2.5rem;
  --nxds-page-x: 1.75rem;
  --nxds-page-y: 1.5rem;
  --nxds-page-bottom: 3.5rem;

  /* Shape, border, and elevation */
  --nxds-radius-control: .375rem;
  --nxds-radius-button: .5rem;
  --nxds-radius-card: .5rem;
  --nxds-radius-modal: .625rem;
  --nxds-radius-popover: .5rem;
  --nxds-radius-badge: .375rem;
  --nxds-card-border: 1px solid var(--nxds-border);
  --nxds-shadow-card: 0 .25rem 1rem rgba(23, 32, 45, .045);
  --nxds-shadow-hover: 0 .5rem 1.5rem rgba(23, 32, 45, .075);
  --nxds-shadow-modal: 0 1.5rem 4.5rem rgba(8, 27, 45, .24);
  --nxds-shadow-header: 0 .5rem 1.5rem rgba(13, 30, 54, .12);

  /* Motion and layout */
  --nxds-motion-quick: 120ms;
  --nxds-motion-standard: 180ms;
  --nxds-motion-modal: 200ms;
  --nxds-ease: cubic-bezier(.2, .7, .2, 1);
  --nxds-rail: 76px;
  --nxds-nav-expanded: 220px;
  --nxds-control-min: 2.5rem;
  --nxds-touch-min: 2.75rem;

  /* Compatibility aliases: old pages may consume these during migration. */
  --nx-bg: var(--nxds-page);
  --nx-surface: var(--nxds-surface);
  --nx-line: var(--nxds-border);
  --nx-text: var(--nxds-text);
  --nx-muted: var(--nxds-text-secondary);
  --nx-accent: var(--nxds-header-accent);
  --nx-radius: var(--nxds-radius-card);
  --nx-shadow: var(--nxds-shadow-card);
}

html { background: var(--nxds-page); }

body.nx-design-system {
  margin: 0;
  background: var(--nxds-page);
  color: var(--nxds-text);
  font-family: var(--nxds-font) !important;
  font-size: var(--nxds-type-body);
  font-weight: var(--nxds-weight-regular);
  line-height: var(--nxds-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.nx-design-system :where(h1, h2, h3, h4, h5, h6, .page-title, .section-title, .card-title, .modal-title) {
  font-family: var(--nxds-font) !important;
  font-weight: var(--nxds-weight-medium) !important;
  letter-spacing: 0 !important;
}

body.nx-design-system :where(h1, .page-title) { font-size: var(--nxds-type-page); line-height: var(--nxds-leading-tight); }
body.nx-design-system :where(h2, .section-title) { font-size: var(--nxds-type-section); line-height: 1.3; }
body.nx-design-system :where(h3, .card-title, .card-head-title) { font-size: var(--nxds-type-card); line-height: 1.35; }
body.nx-design-system :where(p, li, td, th, input, select, textarea, button) { font-family: var(--nxds-font); }
body.nx-design-system :where(.muted, .subtitle, .helper, .caption) { color: var(--nxds-text-secondary); }
body.nx-design-system :where(code, pre, kbd) { font-family: var(--nxds-font-mono); }
body.nx-design-system :where(.metric-val, .kpi-val, .snap-val, .stat-value) { font-size: var(--nxds-type-metric) !important; font-weight: var(--nxds-weight-medium) !important; letter-spacing: 0 !important; }

body.nx-design-system :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--nxds-focus-ring) !important;
  outline-offset: 2px;
}

body.nx-design-system :where(.main, .main-content) { background: var(--nxds-canvas); }
body.nx-design-system :where(.main, .main-content) > :where(.page, .nxds-page) {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Page headers */
body.nx-design-system :where(.nxds-page-header, .page-header-enterprise) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nxds-space-6);
  min-height: 7rem;
  padding: var(--nxds-space-6) var(--nxds-page-x);
  color: var(--nxds-text-inverse);
  background: var(--nxds-header-gradient);
  box-shadow: var(--nxds-shadow-header);
}

body.nx-design-system :where(.nxds-page-header, .page-header-enterprise)::after {
  content: "";
  position: absolute;
  inset: -55% -8% auto 35%;
  z-index: -1;
  height: 190%;
  background: radial-gradient(circle, rgba(24, 112, 125, .25), transparent 64%);
  filter: blur(1.5rem);
  pointer-events: none;
}

body.nx-design-system :where(.nxds-page-header, .page-header-enterprise) :where(h1, h2, p, .muted) { color: inherit; }
body.nx-design-system :where(.nxds-page-header, .page-header-enterprise) p { margin: .35rem 0 0; color: rgba(248, 251, 255, .76); }

/* Cards and content groups */
body.nx-design-system :where(.nxds-card, .card, .panel, .metric-card, .kpi-card) {
  box-sizing: border-box;
  border-color: var(--nxds-border);
  border-radius: var(--nxds-radius-card);
}

body.nx-design-system :where(.nxds-card) {
  background: var(--nxds-surface);
  border: var(--nxds-card-border);
  box-shadow: var(--nxds-shadow-card);
}

.nxds-card--compact { padding: var(--nxds-space-3); }
.nxds-card--standard { padding: var(--nxds-space-4); }
.nxds-card--interactive { transition: border-color var(--nxds-motion-quick) var(--nxds-ease), box-shadow var(--nxds-motion-standard) var(--nxds-ease), transform var(--nxds-motion-standard) var(--nxds-ease); }
.nxds-card--interactive:hover { border-color: #c5cdd4; box-shadow: var(--nxds-shadow-hover); transform: translateY(-1px); }
.nxds-comparison-grid { display: grid; grid-auto-rows: 1fr; gap: var(--nxds-space-4); }
.nxds-natural-grid { display: grid; align-items: start; gap: var(--nxds-space-4); }

/* Buttons and icon controls */
body.nx-design-system :where(button, .btn, [role="button"]) {
  font-weight: var(--nxds-weight-medium) !important;
  letter-spacing: 0;
}

.nxds-button,
body.nx-design-system :where(.btn) {
  min-height: var(--nxds-control-min);
  border-radius: var(--nxds-radius-button);
  transition: background var(--nxds-motion-quick) var(--nxds-ease), border-color var(--nxds-motion-quick) var(--nxds-ease), color var(--nxds-motion-quick) var(--nxds-ease), transform var(--nxds-motion-quick) var(--nxds-ease);
}

.nxds-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--nxds-space-2); padding: .55rem .875rem; border: 1px solid transparent; background: var(--nxds-header-accent); color: #fff; cursor: pointer; }
.nxds-button--secondary { border-color: var(--nxds-border); background: #fff; color: var(--nxds-text); }
.nxds-button--quiet { border-color: transparent; background: transparent; color: var(--nxds-text-secondary); }
.nxds-button--danger { border-color: rgba(127, 29, 29, .35); background: #fff; color: var(--nxds-critical); }
.nxds-button:active { transform: translateY(1px); }
.nxds-button:disabled, body.nx-design-system :where(button, .btn):disabled { opacity: .55; cursor: not-allowed; }

.nxds-icon-button,
body.nx-design-system :where(.modal-close, .dialog-close, .drawer-close, [data-close-modal]) {
  width: var(--nxds-touch-min);
  min-width: var(--nxds-touch-min);
  height: var(--nxds-touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--nxds-radius-control) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nxds-text-secondary);
}

/* Canonical window close affordance for admin and design-system-only pages. */
body.nx-design-system button[aria-label^="Close"],
body.nx-design-system button.nx-window-close,
body.nx-design-system button.icon-close {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nxds-text-secondary) !important;
  font-size: 0 !important;
  transform: none !important;
}

body.nx-design-system button[aria-label^="Close"]::before,
body.nx-design-system button.nx-window-close::before,
body.nx-design-system button.icon-close::before {
  content: "\00d7";
  font: 300 36px/1 Inter, "Avenir Next", Aptos, "Segoe UI", sans-serif;
  color: currentColor;
}

body.nx-design-system button[aria-label^="Close"] > *,
body.nx-design-system button.nx-window-close > *,
body.nx-design-system button.icon-close > * {
  display: none !important;
}

body.nx-design-system button[aria-label^="Close"]:hover,
body.nx-design-system button.nx-window-close:hover,
body.nx-design-system button.icon-close:hover {
  background: transparent !important;
  color: var(--nxds-text) !important;
  transform: none !important;
}

body.nx-design-system button[aria-label^="Close"]:focus-visible,
body.nx-design-system button.nx-window-close:focus-visible,
body.nx-design-system button.icon-close:focus-visible {
  outline: 2px solid var(--nxds-focus) !important;
  outline-offset: 2px !important;
}

.nxds-icon { display: inline-flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; color: var(--nxds-viz-1); }
.nxds-icon svg { width: 100%; height: 100%; stroke-width: 1.75; }

/* Forms */
.nxds-field { display: grid; gap: var(--nxds-space-2); }
.nxds-field > label, .nxds-label { color: var(--nxds-text-secondary); font-size: var(--nxds-type-label); font-weight: var(--nxds-weight-medium); }
body.nx-design-system :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .input) {
  box-sizing: border-box;
  min-height: var(--nxds-control-min);
  border-color: var(--nxds-border);
  border-radius: var(--nxds-radius-control);
  background: #fff;
  color: var(--nxds-text);
  font-weight: var(--nxds-weight-regular);
}
body.nx-design-system :where(input, select, textarea):disabled { background: var(--nxds-surface-subtle); color: var(--nxds-disabled); }
.nxds-field-error { color: var(--nxds-error); font-size: var(--nxds-type-small); }
.nxds-field-help { color: var(--nxds-text-muted); font-size: var(--nxds-type-small); }

/* Tables */
.nxds-table-wrap { max-width: 100%; overflow-x: auto; border: var(--nxds-card-border); border-radius: var(--nxds-radius-card); background: #fff; }
body.nx-design-system :where(table) { border-collapse: collapse; font-size: var(--nxds-type-small); }
body.nx-design-system :where(th) { height: 2.25rem; color: var(--nxds-text-secondary); font-size: var(--nxds-type-label); font-weight: var(--nxds-weight-medium) !important; text-align: left; }
body.nx-design-system :where(td, th) { padding: .55rem .75rem; border-color: var(--nxds-divider); }
body.nx-design-system :where(tbody tr) { transition: background var(--nxds-motion-quick) var(--nxds-ease); }
body.nx-design-system :where(tbody tr:hover) { background: #f8fafb; }

/* Status, alerts, and system states */
.nxds-status { display: inline-flex; align-items: center; gap: .4rem; min-height: 1.625rem; padding: .2rem .5rem; border: 1px solid #cbd5d0; border-radius: var(--nxds-radius-badge); background: var(--nxds-neutral-bg); color: var(--nxds-neutral); font-size: var(--nxds-type-caption); font-weight: var(--nxds-weight-medium); }
.nxds-status--success { border-color: #9cc5b2; background: var(--nxds-success-bg); color: #235944; }
.nxds-status--warning { border-color: #d7b171; background: var(--nxds-warning-bg); color: #764814; }
.nxds-status--error { border-color: #d7a29d; background: var(--nxds-error-bg); color: var(--nxds-error); }
.nxds-status--info { border-color: #a5bac6; background: var(--nxds-info-bg); color: var(--nxds-info); }

.nxds-state { display: grid; place-items: center; min-height: 8rem; padding: var(--nxds-space-6); text-align: center; color: var(--nxds-text-secondary); }
.nxds-state h3 { margin: 0; color: var(--nxds-text); }
.nxds-state p { max-width: 38rem; margin: .4rem auto 0; }
.nxds-alert { padding: var(--nxds-space-3) var(--nxds-space-4); border: 1px solid var(--nxds-border); border-left-width: 3px; border-radius: var(--nxds-radius-card); background: #fff; }
.nxds-alert--warning { border-left-color: var(--nxds-warning); }
.nxds-alert--error { border-left-color: var(--nxds-critical); }
.nxds-alert--info { border-left-color: var(--nxds-info); }
.nxds-skeleton { min-height: 1rem; border-radius: .25rem; background: linear-gradient(90deg, #eef1f3 25%, #f7f8f9 45%, #eef1f3 65%); background-size: 220% 100%; animation: nxds-skeleton 1.2s linear infinite; }
@keyframes nxds-skeleton { to { background-position: -220% 0; } }

/* Centered modal, mobile fullscreen, and drawer primitives */
.nxds-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--nxds-space-6); background: rgba(7, 21, 35, .44); backdrop-filter: blur(.3rem); }
.nxds-modal { width: min(48rem, calc(100vw - 3rem)); max-height: calc(100dvh - 3rem); display: flex; flex-direction: column; overflow: hidden; border: var(--nxds-card-border); border-radius: var(--nxds-radius-modal); background: #fff; box-shadow: var(--nxds-shadow-modal); animation: nxds-modal-in var(--nxds-motion-modal) var(--nxds-ease) both; }
.nxds-modal__header, .nxds-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--nxds-space-4); padding: var(--nxds-space-4) var(--nxds-space-5); }
.nxds-modal__header { border-bottom: 1px solid var(--nxds-divider); }
.nxds-modal__body { min-height: 0; overflow: auto; padding: var(--nxds-space-5); }
.nxds-modal__footer { border-top: 1px solid var(--nxds-divider); }
@keyframes nxds-modal-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

/* Layout primitives */
.nxds-stack { display: grid; gap: var(--nxds-space-4); }
.nxds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nxds-space-2); }
.nxds-grid { display: grid; gap: var(--nxds-space-4); }
.nxds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nxds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nxds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nxds-reading { width: min(100%, 52rem); }

@media (max-width: 1100px) {
  .nxds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nxds-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  :root { --nxds-page-x: 1rem; --nxds-page-y: 1.25rem; --nxds-page-bottom: 3rem; }
  body.nx-design-system :where(.nxds-page-header, .page-header-enterprise) { min-height: 5.5rem; align-items: flex-start; flex-direction: column; padding: 1.25rem 1rem; }
  .nxds-grid--2, .nxds-grid--3, .nxds-grid--4 { grid-template-columns: 1fr; }
  .nxds-backdrop { padding: 0; }
  .nxds-modal { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  body.nx-design-system :where(button:not(.nx-raios-orb):not(.nx-raios-close):not(.nx-raios-attach):not(.nx-raios-voice):not(.nx-raios-send), .btn, [role="button"]:not(.nx-raios-orb):not(.nx-raios-close):not(.nx-raios-attach):not(.nx-raios-voice):not(.nx-raios-send)) { min-height: var(--nxds-touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .nxds-card, .nxds-modal, .nxds-alert, .nxds-status { border: 1px solid CanvasText; }
}

/* Canonical site typography: Project Dashboard Inter hierarchy on every authenticated page. */
:is(body.nx-design-system, body.nx-admin-v1) :where(
  div,
  span,
  p,
  a,
  li,
  dt,
  dd,
  label,
  small,
  strong,
  b,
  em,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  button,
  input,
  select,
  textarea,
  option,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  th,
  td,
  caption,
  summary,
  svg text
):not(.gm-style, .gm-style *) {
  font-family: var(--nxds-font) !important;
  font-weight: var(--nxds-weight-regular) !important;
}

:is(body.nx-design-system, body.nx-admin-v1) :where(
  label,
  button,
  select,
  option,
  th,
  summary,
  .eyebrow,
  .page-eyebrow,
  .label,
  .caption,
  .metric-label,
  .kpi-label,
  .snap-label,
  .stat-label,
  .field-label,
  .nav-label,
  .mobile-nav-label,
  .mobile-project-nav-title,
  [class$="-label"],
  [class*="-label "]
):not(.gm-style, .gm-style *) {
  font-weight: var(--nxds-weight-medium) !important;
}

:is(body.nx-design-system, body.nx-admin-v1) :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b,
  .page-title,
  .section-title,
  .card-title,
  .card-head-title,
  .modal-title,
  .panel-title,
  .drawer-title,
  .project-title,
  .project-name,
  [class$="-title"],
  [class*="-title "]
):not(.gm-style, .gm-style *) {
  font-weight: var(--nxds-weight-semibold) !important;
}

:is(body.nx-design-system, body.nx-admin-v1) :where(
  .metric-val,
  .metric-value,
  .kpi-val,
  .kpi-value,
  .snap-val,
  .snap-value,
  .stat-val,
  .stat-value,
  .num-cell,
  [class$="-value"],
  [class*="-value "]
):not(.gm-style, .gm-style *) {
  font-weight: var(--nxds-weight-medium) !important;
  font-variant-numeric: tabular-nums lining-nums;
}

:is(body.nx-design-system, body.nx-admin-v1) :where(code, pre, kbd, samp) {
  font-family: var(--nxds-font-mono) !important;
  font-weight: var(--nxds-weight-regular) !important;
}

/* Project identities retain the Project Dashboard display face at its approved light weight. */
:is(body.nx-design-system, body.nx-admin-v1) :where(
  .proj-name,
  .project-name,
  .nx-project-title,
  .popup-title,
  .portfolio-issue-project-name,
  [data-project-name]
):not(.gm-style, .gm-style *),
body.nx-project-command-upgraded .nx-command-center[data-nx-command="project"] .nx-command-title {
  font-family: var(--nxds-font-project) !important;
  font-weight: var(--nxds-weight-regular) !important;
}