/* ============================================================
   Nexus Design System — Layer 4: component hooks
   Applied via XAF CustomCSSClassName / custom Razor components.
   Only patterns that CANNOT be expressed as a DevExpress
   variable belong here. Still no .dxbl-* selectors.
   ============================================================ */

/* ---- typography helpers (assign via CustomCSSClassName) ---- */
.nexus-h1        { font-family: var(--nexus-font-heading); font-size: var(--nexus-fs-h1); line-height: var(--nexus-lh-h1); font-weight: var(--nexus-fw-semibold); letter-spacing: -0.02em; margin: 0; }
.nexus-h2        { font-family: var(--nexus-font-heading); font-size: var(--nexus-fs-h2); line-height: var(--nexus-lh-h2); font-weight: var(--nexus-fw-semibold); letter-spacing: -0.01em; margin: 0; }
.nexus-h3        { font-family: var(--nexus-font-heading); font-size: var(--nexus-fs-h3); line-height: var(--nexus-lh-h3); font-weight: var(--nexus-fw-semibold); margin: 0; }
.nexus-section   { font-size: var(--nexus-fs-section); line-height: var(--nexus-lh-section); font-weight: var(--nexus-fw-semibold);
                   letter-spacing: 0.08em; text-transform: uppercase; color: var(--nexus-text-muted); }
.nexus-label     { font-size: var(--nexus-fs-label); font-weight: var(--nexus-fw-medium); color: var(--nexus-text-secondary); }
.nexus-caption   { font-size: var(--nexus-fs-caption); color: var(--nexus-text-muted); }
.nexus-mono      { font-family: var(--nexus-font-mono); font-size: 12px; }
.nexus-num       { font-variant-numeric: tabular-nums; text-align: right; }
.nexus-kpi       { font-size: var(--nexus-fs-kpi); line-height: var(--nexus-lh-kpi); font-weight: var(--nexus-fw-semibold);
                   letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---- the signature 2px active rail ------------------------ */
/* Put on nav items, selected grid rows and active tabs.       */
.nexus-rail { position: relative; }
.nexus-rail::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: var(--nexus-rail-width); border-radius: 1px;
  background: var(--nexus-primary);
}
.nexus-tab-active { box-shadow: inset 0 calc(-1 * var(--nexus-rail-width)) 0 var(--nexus-primary); }

/* ---- surfaces --------------------------------------------- */
.nexus-card {
  background: var(--nexus-surface);
  border: var(--nexus-border-width) solid var(--nexus-border);
  border-radius: var(--nexus-radius-lg);
  padding: var(--nexus-card-padding);
}
.nexus-card--flush { padding: 0; overflow: hidden; }

/* ---- grid: horizontal hairlines only, no vertical borders -- */
.nexus-grid { --dxbl-grid-border-color: transparent; }
.nexus-grid td { border-left: 0 !important; border-right: 0 !important; }
.nexus-grid tr { border-bottom: var(--nexus-border-width) solid var(--nexus-border-subtle); }

/* ---- status chip (custom Razor component) ----------------- */
.nexus-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--nexus-radius-pill);
  font-size: var(--nexus-fs-caption); font-weight: var(--nexus-fw-medium);
  white-space: nowrap;
}
.nexus-chip__mark { width: 7px; height: 7px; flex: 0 0 auto; }
/* shape carries meaning as well as colour (colour-blind + print) */
.nexus-chip--success { background: var(--nexus-success-subtle); color: var(--nexus-success-text); }
.nexus-chip--success .nexus-chip__mark { background: var(--nexus-success); border-radius: var(--nexus-radius-pill); }
.nexus-chip--warning { background: var(--nexus-warning-subtle); color: var(--nexus-warning-text); }
.nexus-chip--warning .nexus-chip__mark { background: var(--nexus-warning); transform: rotate(45deg); }
.nexus-chip--error   { background: var(--nexus-error-subtle); color: var(--nexus-error-text); }
.nexus-chip--error .nexus-chip__mark { border: 2px solid var(--nexus-error); border-radius: var(--nexus-radius-pill); }
.nexus-chip--neutral { background: var(--nexus-surface-alt); color: var(--nexus-text-secondary); }
.nexus-chip--neutral .nexus-chip__mark { background: var(--nexus-slate-400); border-radius: var(--nexus-radius-pill); }
.nexus-chip--auto    { background: var(--nexus-accent-subtle); color: var(--nexus-accent-text); }
.nexus-chip--auto .nexus-chip__mark { background: var(--nexus-accent); border-radius: var(--nexus-radius-xs); }

/* ---- inline alert ----------------------------------------- */
.nexus-alert {
  display: flex; gap: 10px; padding: 11px 13px;
  border: var(--nexus-border-width) solid var(--nexus-border);
  border-left: 3px solid var(--nexus-text-muted);
  border-radius: var(--nexus-radius-md);
  font-size: var(--nexus-fs-body-sm); line-height: 1.5;
}
.nexus-alert--success { background: var(--nexus-success-subtle); border-left-color: var(--nexus-success); color: var(--nexus-success-text); }
.nexus-alert--warning { background: var(--nexus-warning-subtle); border-left-color: var(--nexus-warning); color: var(--nexus-warning-text); }
.nexus-alert--error   { background: var(--nexus-error-subtle);   border-left-color: var(--nexus-error);   color: var(--nexus-error-text); }
.nexus-alert--info    { background: var(--nexus-info-subtle);    border-left-color: var(--nexus-info);    color: var(--nexus-info-text); }

/* ---- read-mode property editor (borderless) ---------------
   26.1.3 has no --dxbl-editor-* family: every editor resolves
   from --dxbl-text-edit-*. Renamed accordingly (see the audit
   in docs/design/13-tema-blazor.md). */
.nexus-readonly-editor {
  --dxbl-text-edit-bg: transparent;
  --dxbl-text-edit-readonly-bg: transparent;
  --dxbl-text-edit-border-color: transparent;
  --dxbl-text-edit-border-hovered-color: transparent;
  --dxbl-text-edit-color: var(--nexus-text-secondary);
}

/* ---- focus: never removed --------------------------------- */
.nexus-focusable:focus-visible {
  outline: none;
  border-color: var(--nexus-focus-border);
  box-shadow: var(--nexus-focus-ring);
}

/* ---- wide-table safety ------------------------------------ */
.nexus-scroll-x { overflow-x: auto; }

/* ---- motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}