/* Nexora UI: primitive → semantic → component. Only opt-in nx-* components use these rules. */
:root {
  --nx-neutral-0: #ffffff;
  --nx-neutral-50: #f8f9fc;
  --nx-neutral-100: #f0f2f7;
  --nx-neutral-200: #e0e5ef;
  --nx-neutral-300: #c9d1e0;
  --nx-neutral-500: #65718a;
  --nx-neutral-600: #4f5d76;
  --nx-neutral-800: #27324a;
  --nx-neutral-900: #172039;
  --nx-neutral-950: #101521;
  --nx-violet-50: #f2eeff;
  --nx-violet-100: #e8dfff;
  --nx-violet-300: #baabff;
  --nx-violet-500: #7955f0;
  --nx-violet-600: #5935ff;
  --nx-violet-700: #4726dc;
  --nx-violet-800: #381cb4;
  --nx-green-50: #eaf7ef;
  --nx-green-700: #087c44;
  --nx-green-800: #066334;
  --nx-red-50: #fff0ee;
  --nx-red-700: #b42318;
  --nx-red-800: #912018;
  --nx-amber-50: #fff7e6;
  --nx-amber-800: #8f5300;
  --nx-blue-50: #edf4ff;
  --nx-blue-700: #2155a3;
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-5: 20px;
  --nx-space-6: 24px;
  --nx-space-8: 32px;
  --nx-type-small: 12px;
  --nx-type-body: 14px;
  --nx-type-section: 16px;
  --nx-type-title: 24px;
  --nx-radius-control: 8px;
  --nx-radius-panel: 12px;
  --nx-motion-fast: 150ms;
  --nx-motion-layout: 200ms;
  --nx-ease-out: cubic-bezier(.22, 1, .36, 1);
  --nx-z-dropdown: 50;
  --nx-z-dialog: 10000;
  --nx-z-toast: 100000;
  --nx-surface-canvas: var(--nx-neutral-50);
  --nx-surface-base: var(--nx-neutral-0);
  --nx-surface-raised: var(--nx-neutral-0);
  --nx-surface-sunken: var(--nx-neutral-100);
  --nx-surface-inverse: var(--nx-neutral-900);
  --nx-text-primary: var(--nx-neutral-900);
  --nx-text-secondary: var(--nx-neutral-600);
  --nx-text-on-accent: var(--nx-neutral-0);
  --nx-border-default: var(--nx-neutral-200);
  --nx-border-strong: var(--nx-neutral-300);
  --nx-accent: var(--nx-violet-600);
  --nx-accent-hover: var(--nx-violet-700);
  --nx-accent-active: var(--nx-violet-800);
  --nx-accent-subtle: var(--nx-violet-50);
  --nx-accent-subtle-hover: var(--nx-violet-100);
  --nx-focus-ring: var(--nx-violet-600);
  --nx-status-success: var(--nx-green-700);
  --nx-status-success-hover: var(--nx-green-800);
  --nx-status-success-subtle: var(--nx-green-50);
  --nx-status-danger: var(--nx-red-700);
  --nx-status-danger-hover: var(--nx-red-800);
  --nx-status-danger-subtle: var(--nx-red-50);
  --nx-status-warning: var(--nx-amber-800);
  --nx-status-warning-subtle: var(--nx-amber-50);
  --nx-status-info: var(--nx-blue-700);
  --nx-status-info-subtle: var(--nx-blue-50);
  --nx-overlay: rgb(16 21 33 / 48%);
  --nx-shadow-dialog: 0 20px 56px rgb(16 21 33 / 18%);
  --nx-shadow-toast: 0 8px 24px rgb(16 21 33 / 12%);
  --nx-button-radius: var(--nx-radius-control);
  --nx-button-font-size: var(--nx-type-body);
  --nx-button-height-sm: 32px;
  --nx-button-height-md: 40px;
  --nx-button-height-lg: 48px;
  --nx-dialog-radius: var(--nx-radius-panel);
  --nx-dialog-width-sm: 400px;
  --nx-dialog-width-md: 560px;
  --nx-dialog-width-lg: 800px;
}

[data-nexora-theme="nexora"] {
  --nx-accent: var(--nx-violet-600);
  --nx-accent-hover: var(--nx-violet-700);
  --nx-accent-active: var(--nx-violet-800);
  --nx-accent-subtle: var(--nx-violet-50);
  --nx-accent-subtle-hover: var(--nx-violet-100);
  --nx-focus-ring: var(--nx-violet-600);
}
[data-nexora-theme="warm"] {
  --nx-accent: #b45309;
  --nx-accent-hover: #92400e;
  --nx-accent-active: #78350f;
  --nx-accent-subtle: #fffbeb;
  --nx-accent-subtle-hover: #fef3c7;
  --nx-focus-ring: #b45309;
}

/* Optional color mode is separate from tenant identity. No switch is enabled here. */
[data-nexora-color-mode="dark"],
[data-nexora-color-mode="dark"] [data-nexora-theme] {
  --nx-surface-canvas: #141923;
  --nx-surface-base: #1b2230;
  --nx-surface-raised: #232c3d;
  --nx-surface-sunken: #121722;
  --nx-surface-inverse: #eef1f8;
  --nx-text-primary: #eef1f8;
  --nx-text-secondary: #b8c2d5;
  --nx-border-default: #384357;
  --nx-border-strong: #59677f;
  --nx-accent: #ad99ff;
  --nx-accent-hover: #beaaff;
  --nx-accent-active: #cfbfff;
  --nx-text-on-accent: #20133f;
  --nx-accent-subtle: #33284f;
  --nx-accent-subtle-hover: #443363;
  --nx-focus-ring: #ad99ff;
  --nx-status-success: #8be0ad;
  --nx-status-success-hover: #b2ecc9;
  --nx-status-success-subtle: #1b382b;
  --nx-status-danger: #ffb4a9;
  --nx-status-danger-hover: #ffd0c9;
  --nx-status-danger-subtle: #482824;
  --nx-status-warning: #f0c685;
  --nx-status-warning-subtle: #3b301d;
  --nx-status-info: #a2c7ff;
  --nx-status-info-subtle: #233752;
  --nx-overlay: rgb(7 10 16 / 72%);
  --nx-shadow-dialog: 0 0 0 1px var(--nx-border-strong);
  --nx-shadow-toast: 0 0 0 1px var(--nx-border-default);
}
[data-nexora-color-mode="dark"] [data-nexora-theme="warm"] {
  --nx-accent: #f3c18c;
  --nx-accent-hover: #f6d4b0;
  --nx-accent-active: #f9e4cc;
  --nx-accent-subtle: #3c2c1d;
  --nx-accent-subtle-hover: #513821;
  --nx-focus-ring: #f3c18c;
}

/* Preserve retained Tailwind layout/visibility utilities on existing consumers. */
@layer components {
.nx-button {
  --nx-button-bg: var(--nx-surface-base);
  --nx-button-fg: var(--nx-text-primary);
  --nx-button-border: var(--nx-border-default);
  --nx-button-hover: var(--nx-surface-canvas);
  --nx-button-active: var(--nx-surface-sunken);
  --nx-button-height: var(--nx-button-height-md);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-2);
  flex-shrink: 0;
  min-height: var(--nx-button-height);
  padding: var(--nx-space-2) var(--nx-space-4);
  border: 1px solid var(--nx-button-border);
  border-radius: var(--nx-button-radius);
  background: var(--nx-button-bg);
  background-image: none;
  color: var(--nx-button-fg);
  font-family: inherit;
  font-size: var(--nx-button-font-size);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--nx-motion-fast), border-color var(--nx-motion-fast), color var(--nx-motion-fast);
}
.nx-button > svg { width: 16px; height: 16px; flex-shrink: 0; }
.nx-button:hover:not(:disabled) { background: var(--nx-button-hover); }
.nx-button:active:not(:disabled) { background: var(--nx-button-active); }
.nx-button:focus-visible { outline: 2px solid var(--nx-focus-ring); outline-offset: 3px; }
.nx-button:disabled { opacity: .5; cursor: not-allowed; }
.nx-button--primary { --nx-button-bg: var(--nx-accent); --nx-button-fg: var(--nx-text-on-accent); --nx-button-border: transparent; --nx-button-hover: var(--nx-accent-hover); --nx-button-active: var(--nx-accent-active); }
.nx-button--soft { --nx-button-bg: var(--nx-accent-subtle); --nx-button-fg: var(--nx-accent); --nx-button-border: transparent; --nx-button-hover: var(--nx-accent-subtle-hover); --nx-button-active: var(--nx-accent-subtle-hover); }
.nx-button--ghost { --nx-button-bg: transparent; --nx-button-fg: var(--nx-text-secondary); --nx-button-border: transparent; }
.nx-button--inverse { --nx-button-fg: var(--nx-neutral-0); --nx-button-hover: rgb(255 255 255 / 12%); --nx-button-active: rgb(255 255 255 / 18%); }
.nx-button--danger { --nx-button-bg: var(--nx-status-danger); --nx-button-fg: var(--nx-text-on-accent); --nx-button-border: transparent; --nx-button-hover: var(--nx-status-danger-hover); --nx-button-active: var(--nx-status-danger-hover); }
.nx-button--success { --nx-button-bg: var(--nx-status-success); --nx-button-fg: var(--nx-text-on-accent); --nx-button-border: transparent; --nx-button-hover: var(--nx-status-success-hover); --nx-button-active: var(--nx-status-success-hover); }
.nx-button--sm { --nx-button-height: var(--nx-button-height-sm); padding: 5px var(--nx-space-3); font-size: var(--nx-type-small); }
.nx-button--md { --nx-button-height: var(--nx-button-height-md); }
.nx-button--lg { --nx-button-height: var(--nx-button-height-lg); padding: var(--nx-space-3) var(--nx-space-5); }
.nx-button--icon { width: var(--nx-button-height-md); min-width: var(--nx-button-height-md); height: var(--nx-button-height-md); padding: var(--nx-space-2); }
.nx-button--loading { cursor: progress; opacity: .75; }
.nx-button__progress { position: absolute; left: 25%; bottom: 2px; width: 50%; height: 2px; border-radius: 1px; background: currentColor; animation: nx-button-progress 1s ease-in-out infinite; pointer-events: none; }
@keyframes nx-button-progress { 0%, 100% { opacity: .3; transform: scaleX(.4); } 50% { opacity: .85; transform: scaleX(1); } }

.nx-dialog-overlay { position: fixed; inset: 0; z-index: var(--nx-z-dialog); display: flex; align-items: center; justify-content: center; padding: var(--nx-space-6); background: var(--nx-overlay); }
.nx-dialog { display: flex; flex-direction: column; width: 100%; max-width: var(--nx-dialog-width-md); max-height: calc(100dvh - 48px); min-height: 0; border-radius: var(--nx-dialog-radius); background: var(--nx-surface-raised); color: var(--nx-text-primary); box-shadow: var(--nx-shadow-dialog); }
.nx-dialog--sm { max-width: var(--nx-dialog-width-sm); }
.nx-dialog--lg { max-width: var(--nx-dialog-width-lg); }
.nx-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nx-space-4); padding: var(--nx-space-6) var(--nx-space-6) var(--nx-space-4); flex-shrink: 0; }
.nx-dialog__heading { display: flex; align-items: flex-start; gap: var(--nx-space-3); min-width: 0; }
.nx-dialog__title { margin: 0; color: var(--nx-text-primary); font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.nx-dialog__description { margin-top: var(--nx-space-2); font-size: var(--nx-type-body); line-height: 1.6; color: var(--nx-text-secondary); white-space: pre-line; }
.nx-dialog__body { padding: 0 var(--nx-space-6) var(--nx-space-6); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nx-dialog__footer { padding: var(--nx-space-4) var(--nx-space-6); border-top: 1px solid var(--nx-border-default); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nx-space-2); flex-shrink: 0; }
.nx-dialog__status { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--nx-radius-control); }
.nx-dialog__status--warning { color: var(--nx-status-warning); background: var(--nx-status-warning-subtle); }
.nx-dialog__status--danger { color: var(--nx-status-danger); background: var(--nx-status-danger-subtle); }
.nx-dialog__status--success { color: var(--nx-status-success); background: var(--nx-status-success-subtle); }
.nx-dialog__status--info { color: var(--nx-status-info); background: var(--nx-status-info-subtle); }
.nx-confirmation-action { position: relative; display: flex; flex-direction: column; gap: var(--nx-space-1); min-width: 0; }
.nx-confirmation-action > .nx-button { white-space: normal; overflow-wrap: anywhere; max-width: 100%; min-width: 0; }
.nx-confirmation-badge { position: absolute; top: -8px; right: -6px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 1px 5px; border-radius: 8px; background: var(--nx-status-danger); color: var(--nx-text-on-accent); border: 2px solid var(--nx-surface-raised); font-size: var(--nx-type-small); line-height: 1.4; font-weight: 600; pointer-events: none; }
.nx-confirmation-badge--bottom { top: auto; bottom: -8px; }
.nx-confirmation-cancel { align-self: flex-start; margin-right: auto; }
.nx-confirmation-link { color: var(--nx-accent); }
.nx-toast { position: fixed; top: var(--nx-space-6); right: var(--nx-space-6); z-index: var(--nx-z-toast); width: min(400px, calc(100% - 32px)); display: flex; align-items: flex-start; gap: var(--nx-space-3); padding: var(--nx-space-4); border-radius: var(--nx-radius-panel); background: var(--nx-surface-raised); color: var(--nx-text-primary); box-shadow: var(--nx-shadow-toast); }
.nx-toast__content { flex: 1; min-width: 0; }
.nx-toast__title { margin: 0; font-size: var(--nx-type-body); line-height: 1.4; font-weight: 600; }
.nx-toast__description { margin: var(--nx-space-1) 0 0; color: var(--nx-text-secondary); font-size: var(--nx-type-small); line-height: 1.6; }

@media (pointer: coarse), (max-width: 767px) {
  .nx-button { min-height: 44px; min-width: 44px; }
  .nx-button--icon { width: 44px; height: 44px; }
}
@media (max-width: 479px) {
  .nx-dialog-overlay { padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .nx-dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .nx-dialog__header { padding: var(--nx-space-5) var(--nx-space-4) var(--nx-space-4); }
  .nx-dialog__body { padding: 0 var(--nx-space-4) var(--nx-space-5); }
  .nx-dialog__footer { padding: var(--nx-space-4); gap: var(--nx-space-3); }
  .nx-confirmation-action { flex: 1 1 100%; }
  .nx-confirmation-cancel { order: 2; width: 100%; }
  .nx-toast { left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top, 0px)); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-button { transition: none; }
  .nx-button__progress { animation: none; opacity: .7; }
}
}

/* Opt-in migration for existing internal modals. Keep their geometry and behavior. */
.nx-dialog-surface {
  background: var(--nx-surface-raised);
  color: var(--nx-text-primary);
  border-radius: var(--nx-dialog-radius);
  border-color: var(--nx-border-default);
  box-shadow: var(--nx-shadow-dialog);
}
.nx-dialog-surface__header {
  color: var(--nx-text-primary);
  background: var(--nx-surface-raised);
  border-color: var(--nx-border-default);
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
}
.nx-dialog-surface__header :where(h1, h2, h3, h4) {
  color: var(--nx-text-primary);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.nx-dialog-surface__header :where(p) {
  color: var(--nx-text-secondary);
  font-weight: 400;
}
.nx-dialog-surface__footer {
  color: var(--nx-text-primary);
  background: var(--nx-surface-raised);
  border-color: var(--nx-border-default);
  border-radius: 0;
  box-shadow: none;
  font-size: var(--nx-type-body);
  font-weight: 500;
}

/* Existing production utilities and preflight remain authoritative. Add only component tokens and opt-in surfaces. */
@layer theme, base, components, utilities;


.hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
.hide-scrollbar::-webkit-scrollbar { display:none; }
.nx-button--primary[style] { background:var(--nx-accent) !important; color:var(--nx-text-on-accent) !important; }
.nx-button--primary[style]:hover:not(:disabled) { background:var(--nx-accent-hover) !important; }
@media (any-pointer:coarse) {
  #nexora-primary-sidebar .nexora-sidebar-nav-item { min-height:44px; padding-block:8px; }
}