/**
 * AegisX Components — reusable CSS classes built on design tokens.
 * Aligned to aegisx-ui-design skill (Untitled UI + Angular Material v3 targets).
 *
 * Depends on: ./tokens.css
 *
 * Naming: BEM-ish — .ax-{component} · .ax-{component}--{modifier}.
 * Body base: 14px (text-sm) for clinical density.
 *
 * Design conventions adopted from Untitled UI (react ref):
 *   - Ring-based borders (box-shadow inset 0 0 0 1px) for sub-pixel crispness
 *   - Badge micro-shadow (shadow-xs + ring)
 *   - Tooltip fade+scale animation
 *   - Focus: box-shadow ring + outline fallback
 *   - Opacity overlays for hover/disabled depth
 *   - data-* attribute conditional styling
 *   - Progress bar uses transform (not width) for GPU compositing
 */

/* ════════════════════════════════════════════════════════════════
 * MATERIAL-ALIGNED COMPONENTS
 * These mirror Angular Material v3 components. Design values (radius,
 * padding, color) match what the Material bridge produces on mat-* elements.
 * In Angular apps, prefer mat-* + bridge; use .ax-* for non-Angular contexts.
 * See COMPONENT-MAP.md for full mapping.
 * ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
 * BUTTON  ·  mat-button / mat-flat-button / mat-stroked-button
 * radius-md (6px) · ring-based border
 * Source: _component-tokens.scss + _material-overrides.scss
 * ──────────────────────────────────────────────────────────── */
.ax-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-control-gap);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  line-height: 1;
  font-weight: var(--ax-font-weight-medium);
  border: none;
  border-radius: var(--ax-radius-md);
  padding: 0 var(--ax-control-pad-x);
  height: var(--ax-control-h);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--ax-duration-fast) var(--ax-easing-easeOut),
    box-shadow var(--ax-duration-fast) var(--ax-easing-easeOut),
    color var(--ax-duration-fast) var(--ax-easing-easeOut);
  user-select: none;
  white-space: nowrap;
  position: relative;
}
.ax-button:focus-visible {
  outline: var(--ax-focus-ring-width) solid var(--ax-focus-ring-color);
  outline-offset: var(--ax-focus-ring-offset);
}
.ax-button:disabled,
.ax-button[aria-disabled="true"],
.ax-button[data-loading] {
  cursor: not-allowed;
  opacity: var(--ax-opacity-disabled);
  pointer-events: none;
}

/* Sizes — opt-out of density (explicit override) */
.ax-button--xs { height: 1.75rem; padding: 0 0.625rem; font-size: var(--ax-text-xs-size); gap: 0.25rem; }
.ax-button--sm { height: var(--ax-control-h-sm); padding: 0 var(--ax-spacing-sm); font-size: var(--ax-text-xs-size); }
.ax-button--lg { height: var(--ax-control-h-lg); padding: 0 var(--ax-spacing-lg); font-size: var(--ax-text-md-size); }
.ax-button--xl { height: var(--ax-control-h-lg); padding: 0 var(--ax-spacing-xl); font-size: var(--ax-text-md-size); }

/* Icon-only via data attribute (Untitled pattern) */
.ax-button[data-icon-only] { padding: 0; aspect-ratio: 1; width: auto; }

/* variants */
.ax-button--primary {
  background: var(--ax-button-primary-bg);
  color: var(--ax-button-primary-text);
}
.ax-button--primary:hover { background: var(--ax-button-primary-bg-hover); }

.ax-button--secondary {
  background: var(--ax-button-secondary-bg);
  color: var(--ax-button-secondary-text);
  box-shadow: inset 0 0 0 1px var(--ax-button-secondary-border);
}
.ax-button--secondary:hover {
  background: var(--ax-button-secondary-bg-hover);
  box-shadow: inset 0 0 0 1px var(--ax-border-emphasis);
}

.ax-button--ghost {
  background: transparent;
  color: var(--ax-text-default);
}
.ax-button--ghost:hover { background: var(--ax-background-subtle); }

.ax-button--danger {
  background: var(--ax-button-danger-bg);
  color: var(--ax-error-inverted);
}
.ax-button--danger:hover { background: var(--ax-button-danger-bg-hover); }

.ax-button--outline {
  background: transparent;
  color: var(--ax-primary);
  box-shadow: inset 0 0 0 1px var(--ax-primary);
}
.ax-button--outline:hover { background: var(--ax-brand-faint); }

/* Pressed state (applies to all variants) */
.ax-button--primary:active,
.ax-button[data-variant='primary']:active { background: var(--ax-primary-dark); }
.ax-button--secondary:active { background: var(--ax-background-muted); }
.ax-button--ghost:active     { background: var(--ax-background-muted); }
.ax-button--danger:active    { background: var(--ax-error-emphasis); }
.ax-button--outline:active   { background: var(--ax-brand-muted); }

/* Elevation modifier — raised button equivalent */
.ax-button--elevated {
  box-shadow: var(--ax-shadow-xs);
  transition: background-color var(--ax-duration-fast) var(--ax-easing-easeOut),
              box-shadow var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-button--elevated:hover { box-shadow: var(--ax-shadow-sm); }
.ax-button--elevated:active { box-shadow: var(--ax-shadow-xs); }

/* Icon-only — square with --ax-control-h, centered */
.ax-button--icon,
.ax-button[data-icon-only] {
  width: var(--ax-control-h);
  padding: 0;
  aspect-ratio: 1;
  gap: 0;
}
.ax-button--icon svg,
.ax-button[data-icon-only] svg { width: var(--ax-control-icon); height: var(--ax-control-icon); }

/* Success variant (green filled, matches mat-flat-button tertiary) */
.ax-button--success {
  background: var(--ax-success-default);
  color: var(--ax-success-inverted);
}
.ax-button--success:hover { background: var(--ax-success-emphasis); }
.ax-button--success:active { background: var(--ax-success-emphasis); }

/* Link variant — inline text button */
.ax-button--link {
  background: transparent;
  color: var(--ax-brand-emphasis);
  padding: 0;
  height: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ax-button--link:hover { color: var(--ax-primary-dark); }

/* ────────────────────────────────────────────────────────────
 * FAB  ·  mat-fab · floating action button (circular, brand)
 * ──────────────────────────────────────────────────────────── */
.ax-fab {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--ax-primary);
  color: var(--ax-brand-inverted);
  border-radius: var(--ax-radius-full);
  box-shadow: var(--ax-shadow-md);
  cursor: pointer;
  transition: background-color var(--ax-duration-fast) var(--ax-easing-easeOut),
              box-shadow var(--ax-duration-fast) var(--ax-easing-easeOut),
              transform var(--ax-duration-fast) var(--ax-easing-easeOut);
  position: relative;
}
.ax-fab svg { width: 24px; height: 24px; }
.ax-fab:hover { background: var(--ax-primary-dark); box-shadow: var(--ax-shadow-lg); transform: translateY(-1px); }
.ax-fab:active { transform: translateY(0); box-shadow: var(--ax-shadow-md); }
.ax-fab:focus-visible {
  outline: var(--ax-focus-ring-width) solid var(--ax-border-focus);
  outline-offset: var(--ax-focus-ring-offset);
}
.ax-fab:disabled,
.ax-fab[aria-disabled='true'] {
  background: var(--ax-background-muted);
  color: var(--ax-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Mini FAB — 40px */
.ax-fab--mini { width: 40px; height: 40px; box-shadow: var(--ax-shadow-sm); }
.ax-fab--mini svg { width: 20px; height: 20px; }
.ax-fab--mini:hover { box-shadow: var(--ax-shadow-md); }

/* Extended FAB — pill with label */
.ax-fab--extended {
  width: auto;
  height: 48px;
  padding: 0 var(--ax-spacing-lg);
  gap: var(--ax-spacing-sm);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-medium);
}
.ax-fab--extended svg { width: 20px; height: 20px; }

/* Role variants */
.ax-fab--success { background: var(--ax-success-default); color: var(--ax-success-inverted); }
.ax-fab--success:hover { background: var(--ax-success-emphasis); }
.ax-fab--danger  { background: var(--ax-error-default); color: var(--ax-error-inverted); }
.ax-fab--danger:hover { background: var(--ax-error-emphasis); }
.ax-fab--surface {
  background: var(--ax-background-default);
  color: var(--ax-text-default);
  box-shadow: var(--ax-shadow-md), inset 0 0 0 1px var(--ax-border-default);
}
.ax-fab--surface:hover { background: var(--ax-background-subtle); }

/* ────────────────────────────────────────────────────────────
 * TOOLBAR  ·  mat-toolbar · app top container (distinct from .ax-navbar)
 * Markup:
 *   <header class="ax-toolbar">
 *     <span class="ax-toolbar__title">Page title</span>
 *     <span class="ax-toolbar__spacer"></span>
 *     <button class="ax-button ax-button--icon">…</button>
 *   </header>
 * Variants: .ax-toolbar--primary / --dark / --warn / --dense / --mobile
 * ──────────────────────────────────────────────────────────── */
.ax-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-md);
  height: 64px;
  padding: 0 var(--ax-spacing-lg);
  background: var(--ax-background-default);
  color: var(--ax-text-heading);
  border-bottom: 1px solid var(--ax-border-subtle);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-lg-size);
  font-weight: var(--ax-font-weight-semibold);
}
.ax-toolbar__title { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.ax-toolbar__spacer { flex: 1; }
.ax-toolbar__actions { display: inline-flex; align-items: center; gap: var(--ax-spacing-xs); }

/* Variants */
.ax-toolbar--primary { background: var(--ax-primary); color: var(--ax-brand-inverted); border-bottom: none; }
.ax-toolbar--dark    { background: var(--ax-color-zinc-900); color: #fff; border-bottom: none; }
.ax-toolbar--warn    { background: var(--ax-error-default); color: var(--ax-error-inverted); border-bottom: none; }
.ax-toolbar--dense   { height: 48px; font-size: var(--ax-text-md-size); }
.ax-toolbar--mobile  { height: 56px; }

/* Icon buttons inside toolbar — transparent, inherit toolbar color */
.ax-toolbar .ax-button {
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.ax-toolbar .ax-button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ax-toolbar .ax-button:active { background: color-mix(in srgb, currentColor 18%, transparent); }
.ax-toolbar .ax-button:disabled { background: transparent; opacity: var(--ax-opacity-disabled); }

/* ────────────────────────────────────────────────────────────
 * BOTTOM SHEET  ·  mat-bottom-sheet · drag handle + safe area
 * Markup:
 *   <div class="ax-scrim"></div>
 *   <div class="ax-bottom-sheet" role="dialog" aria-modal="true">
 *     <div class="ax-bottom-sheet__handle"></div>
 *     <header class="ax-bottom-sheet__header">
 *       <h3 class="ax-bottom-sheet__title">Title</h3>
 *     </header>
 *     <div class="ax-bottom-sheet__body">…content…</div>
 *     <footer class="ax-bottom-sheet__actions">…buttons…</footer>
 *   </div>
 * ──────────────────────────────────────────────────────────── */
.ax-bottom-sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  max-height: 90vh;
  background: var(--ax-background-default);
  color: var(--ax-text-default);
  border-top-left-radius: var(--ax-radius-xl);
  border-top-right-radius: var(--ax-radius-xl);
  box-shadow: var(--ax-shadow-xl);
  padding: var(--ax-spacing-lg);
  padding-bottom: calc(var(--ax-spacing-lg) + env(safe-area-inset-bottom));
  font-family: var(--ax-font-sans);
  z-index: var(--ax-z-modal);
  display: flex; flex-direction: column;
  animation: ax-bottom-sheet-in var(--ax-duration-normal) var(--ax-easing-easeOut);
}
@keyframes ax-bottom-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.ax-bottom-sheet__handle {
  width: 40px; height: 4px;
  background: var(--ax-border-emphasis);
  border-radius: var(--ax-radius-full);
  margin: 0 auto var(--ax-spacing-md);
  cursor: grab;
}
.ax-bottom-sheet__handle:active { cursor: grabbing; }
.ax-bottom-sheet__header {
  margin-bottom: var(--ax-spacing-md);
  padding-bottom: var(--ax-spacing-sm);
  border-bottom: 1px solid var(--ax-border-subtle);
}
.ax-bottom-sheet__title {
  margin: 0;
  font-size: var(--ax-text-lg-size);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-heading);
}
.ax-bottom-sheet__body { flex: 1; overflow-y: auto; }
.ax-bottom-sheet__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ax-spacing-sm);
  margin-top: var(--ax-spacing-md);
  padding-top: var(--ax-spacing-sm);
  border-top: 1px solid var(--ax-border-subtle);
}

/* ────────────────────────────────────────────────────────────
 * TREE  ·  mat-tree · nested indent rails + chevron
 * Markup:
 *   <ul class="ax-tree" role="tree">
 *     <li class="ax-tree__node" role="treeitem" aria-expanded="true">
 *       <button class="ax-tree__trigger">
 *         <span class="ax-tree__chevron"></span>
 *         <span class="ax-tree__icon">📁</span>
 *         <span class="ax-tree__label">Patients</span>
 *         <span class="ax-tree__meta">24</span>
 *       </button>
 *       <ul class="ax-tree__children">
 *         <li class="ax-tree__node ax-tree__node--leaf">
 *           <button class="ax-tree__trigger">
 *             <span class="ax-tree__chevron ax-tree__chevron--leaf"></span>
 *             <span class="ax-tree__label">Ward 5A</span>
 *           </button>
 *         </li>
 *       </ul>
 *     </li>
 *   </ul>
 * ──────────────────────────────────────────────────────────── */
.ax-tree {
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-default);
}
.ax-tree__node { list-style: none; position: relative; }
.ax-tree__children {
  list-style: none;
  margin: 0;
  padding-inline-start: var(--ax-spacing-lg);
  position: relative;
}
.ax-tree__children::before {
  content: '';
  position: absolute;
  inset-inline-start: 10px;
  top: 0; bottom: 8px;
  width: 1px;
  background: var(--ax-border-subtle);
}
.ax-tree__trigger {
  all: unset;
  display: flex;
  align-items: center;
  gap: var(--ax-control-gap);
  width: 100%;
  padding: var(--ax-spacing-xs) var(--ax-spacing-sm);
  border-radius: var(--ax-radius-sm);
  cursor: pointer;
  transition: background-color var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-tree__trigger:hover { background: var(--ax-background-subtle); }
.ax-tree__trigger:focus-visible {
  outline: var(--ax-focus-ring-width) solid var(--ax-border-focus);
  outline-offset: var(--ax-focus-ring-offset);
}
.ax-tree__node[aria-selected='true'] > .ax-tree__trigger,
.ax-tree__node--selected > .ax-tree__trigger {
  background: var(--ax-brand-faint);
  color: var(--ax-brand-emphasis);
  font-weight: var(--ax-font-weight-medium);
}
.ax-tree__chevron {
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  color: var(--ax-text-secondary);
  transition: transform var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-tree__chevron::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px; top: 3px;
  width: 6px; height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.ax-tree__node[aria-expanded='true'] > .ax-tree__trigger > .ax-tree__chevron { transform: rotate(90deg); }
.ax-tree__chevron--leaf { visibility: hidden; }
.ax-tree__icon {
  width: var(--ax-control-icon);
  height: var(--ax-control-icon);
  flex-shrink: 0;
  color: var(--ax-text-secondary);
}
.ax-tree__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-tree__meta {
  margin-inline-start: auto;
  font-size: var(--ax-text-xs-size);
  color: var(--ax-text-subtle);
  font-variant-numeric: tabular-nums;
}
.ax-tree__node[aria-disabled='true'] > .ax-tree__trigger {
  opacity: var(--ax-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
 * INPUT  ·  mat-form-field (appearance=outline)
 * radius-md (6px) · 1px border · focus 2px brand
 * Source: _material-overrides.scss + _component-tokens.scss
 * ──────────────────────────────────────────────────────────── */
.ax-field { display: flex; flex-direction: column; gap: var(--ax-spacing-xs); }
.ax-field__label {
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-default);
}
.ax-field__hint {
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
  color: var(--ax-text-secondary);
}
.ax-field__error {
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
  color: var(--ax-error-default);
}

.ax-input,
.ax-textarea {
  display: block;
  width: 100%;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
  color: var(--ax-input-text);
  background: var(--ax-input-bg);
  border: 1px solid var(--ax-input-border);
  border-radius: var(--ax-radius-md);
  padding: 0 var(--ax-control-pad-x);
  height: var(--ax-control-h);
  transition:
    border-color var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-textarea { height: auto; padding: var(--ax-control-pad-y) var(--ax-control-pad-x); min-height: calc(var(--ax-control-h) * 2.4); resize: vertical; }

.ax-input::placeholder,
.ax-textarea::placeholder { color: var(--ax-input-placeholder); }

.ax-input:hover,
.ax-textarea:hover { border-color: var(--ax-input-border-hover); }

.ax-input:focus,
.ax-textarea:focus {
  outline: none;
  border-color: var(--ax-input-border-focus);
  /* Keep border-width at 1px so total height doesn't shift by 1-2px on
     focus. Draw the second 1px ring via inset box-shadow instead. */
  box-shadow: inset 0 0 0 1px var(--ax-input-border-focus);
}

.ax-input--error,
.ax-textarea--error { border-color: var(--ax-input-border-error); }
.ax-input--error:focus,
.ax-textarea--error:focus {
  border-color: var(--ax-input-border-error);
}

.ax-input:disabled,
.ax-textarea:disabled {
  background: var(--ax-input-bg-disabled);
  color: var(--ax-text-disabled);
  cursor: not-allowed;
  opacity: var(--ax-opacity-disabled);
}
.ax-input[readonly],
.ax-textarea[readonly] {
  background: var(--ax-background-subtle);
  color: var(--ax-text-secondary);
  cursor: default;
}
.ax-input[readonly]:hover,
.ax-textarea[readonly]:hover { border-color: var(--ax-input-border); }

/* Number input — hide native spinner arrows */
.ax-input[type='number']::-webkit-outer-spin-button,
.ax-input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ax-input[type='number'] { -moz-appearance: textfield; }

/* ────────────────────────────────────────────────────────────
 * ICON FONT SUPPORT
 * Since AegisX UI targets Angular Material apps as the primary consumer,
 * ax-* components accept Google's Material Icons ligature font out of
 * the box. Consumer includes the font stylesheet once in index.html, then
 * renders icons via:
 *   <i class="material-icons">edit</i>
 *   <i class="material-symbols-outlined">edit</i>   ← M3 variant
 *   <mat-icon svgIcon="custom-ax-icon">…</mat-icon> ← our own SVG set
 * When placed inside an ax-* control, the icon is sized from --ax-control-icon
 * so density stays consistent with the surrounding text.
 * ──────────────────────────────────────────────────────────── */
.ax-button .material-icons,
.ax-button .material-symbols-outlined,
.ax-button > mat-icon,
.ax-fab .material-icons,
.ax-fab .material-symbols-outlined,
.ax-fab > mat-icon,
.ax-navbar__icon-btn .material-icons,
.ax-navbar__icon-btn .material-symbols-outlined,
.ax-navbar__icon-btn > mat-icon,
.ax-toolbar .material-icons,
.ax-toolbar .material-symbols-outlined,
.ax-toolbar > mat-icon,
.ax-menu__item .material-icons,
.ax-menu__item .material-symbols-outlined,
.ax-menu__item > mat-icon,
.ax-list__item .material-icons,
.ax-list__item .material-symbols-outlined,
.ax-list__item > mat-icon,
.ax-tree__icon .material-icons,
.ax-tree__icon .material-symbols-outlined,
.ax-tree__icon > mat-icon,
.ax-field__icon .material-icons,
.ax-field__icon .material-symbols-outlined,
.ax-field__icon > mat-icon {
  font-size: var(--ax-control-icon);
  width: var(--ax-control-icon);
  height: var(--ax-control-icon);
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

/* FAB defaults — larger icon (24px) */
.ax-fab > .material-icons,
.ax-fab > .material-symbols-outlined,
.ax-fab > mat-icon {
  font-size: 24px;
  width: 24px; height: 24px;
}
.ax-fab--mini > .material-icons,
.ax-fab--mini > .material-symbols-outlined,
.ax-fab--mini > mat-icon {
  font-size: 20px;
  width: 20px; height: 20px;
}
.ax-fab--extended > .material-icons,
.ax-fab--extended > .material-symbols-outlined,
.ax-fab--extended > mat-icon {
  font-size: 20px;
  width: 20px; height: 20px;
}

/* Autofill styling */
.ax-input:-webkit-autofill,
.ax-input:-webkit-autofill:hover,
.ax-input:-webkit-autofill:focus {
  border-radius: var(--ax-radius-md);
  -webkit-text-fill-color: var(--ax-input-text);
  box-shadow: inset 0 0 0 100px var(--ax-input-bg);
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--ax-input-text);
}

/* ────────────────────────────────────────────────────────────
 * CARD  ·  mat-card · radius-lg (8px) · border + shadow-xs
 * Source: _material-overrides.scss + _component-tokens.scss
 * ──────────────────────────────────────────────────────────── */
.ax-card {
  background: var(--ax-background-default);
  border: 1px solid var(--ax-border-default);
  border-radius: var(--ax-radius-lg);
  box-shadow: var(--ax-shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-card--flat { box-shadow: none; }
.ax-card--elevated { box-shadow: var(--ax-elevation-1); }
.ax-card--floating { box-shadow: var(--ax-elevation-3); border: none; }
.ax-card--interactive:hover { box-shadow: var(--ax-shadow-md); }

.ax-card__header,
.ax-card__footer {
  padding: 1rem 1.5rem;
  font-family: var(--ax-font-sans);
}
/* Header flows into body by default (matches mat-card). Add
   .ax-card__header--divider when you need the visual separator. */
.ax-card__header--divider { border-bottom: 1px solid var(--ax-border-subtle); }
.ax-card__footer {
  border-top: 1px solid var(--ax-border-default);
  background: var(--ax-background-muted);
}
.ax-card__body {
  padding: 1.5rem;
  color: var(--ax-text-default);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
}
.ax-card__title {
  margin: 0;
  font-size: var(--ax-text-md-size);
  line-height: var(--ax-text-md-line);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-heading);
}
.ax-card__subtitle {
  margin: var(--ax-spacing-xs) 0 0;
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-secondary);
}

/* ────────────────────────────────────────────────────────────
 * ALERT / BANNER
 * ──────────────────────────────────────────────────────────── */
.ax-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ax-spacing-md);
  padding: var(--ax-spacing-md) var(--ax-spacing-lg);
  border-radius: var(--ax-radius-md);
  border: var(--ax-border-width-thin) solid transparent;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
}
.ax-alert__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.ax-alert__body { flex: 1; }
.ax-alert__title {
  font-weight: var(--ax-font-weight-semibold);
  margin: 0 0 2px;
}
.ax-alert__text { margin: 0; color: inherit; opacity: .88; }

.ax-alert--success { background: var(--ax-success-faint); color: var(--ax-success-emphasis); border-color: var(--ax-success-muted); }
.ax-alert--success .ax-alert__icon { background: var(--ax-success-default); }
.ax-alert--warning { background: var(--ax-warning-faint); color: var(--ax-warning-emphasis); border-color: var(--ax-warning-muted); }
.ax-alert--warning .ax-alert__icon { background: var(--ax-warning-default); }
.ax-alert--error   { background: var(--ax-error-faint);   color: var(--ax-error-emphasis);   border-color: var(--ax-error-muted); }
.ax-alert--error   .ax-alert__icon { background: var(--ax-error-default); }
.ax-alert--info    { background: var(--ax-info-faint);    color: var(--ax-info-emphasis);    border-color: var(--ax-info-muted); }
.ax-alert--info    .ax-alert__icon { background: var(--ax-info-default); }

/* ────────────────────────────────────────────────────────────
 * BADGE · pills for status
 * ──────────────────────────────────────────────────────────── */
.ax-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-spacing-xs);
  padding: 2px 10px;
  border-radius: var(--ax-radius-full);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-xs-size);
  line-height: var(--ax-text-xs-line);
  font-weight: var(--ax-font-weight-medium);
  border: none;
  white-space: nowrap;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.08), var(--ax-shadow-xs);
}
.ax-badge--solid-success { background: var(--ax-success-default); color: var(--ax-success-inverted); }
.ax-badge--solid-warning { background: var(--ax-warning-default); color: var(--ax-warning-inverted); }
.ax-badge--solid-error   { background: var(--ax-error-default);   color: var(--ax-error-inverted); }
.ax-badge--solid-info    { background: var(--ax-info-default);    color: var(--ax-info-inverted); }
.ax-badge--solid-brand   { background: var(--ax-primary);          color: var(--ax-brand-inverted); }

.ax-badge--soft-success  { background: var(--ax-success-faint);  color: var(--ax-success-emphasis); }
.ax-badge--soft-warning  { background: var(--ax-warning-faint);  color: var(--ax-warning-emphasis); }
.ax-badge--soft-error    { background: var(--ax-error-faint);    color: var(--ax-error-emphasis); }
.ax-badge--soft-info     { background: var(--ax-info-faint);     color: var(--ax-info-emphasis); }
.ax-badge--soft-brand    { background: var(--ax-brand-faint);    color: var(--ax-brand-emphasis); }

.ax-badge--outline-success { border-color: var(--ax-success-default); color: var(--ax-success-emphasis); }
.ax-badge--outline-warning { border-color: var(--ax-warning-default); color: var(--ax-warning-emphasis); }
.ax-badge--outline-error   { border-color: var(--ax-error-default);   color: var(--ax-error-emphasis); }
.ax-badge--outline-info    { border-color: var(--ax-info-default);    color: var(--ax-info-emphasis); }
.ax-badge--outline-brand   { border-color: var(--ax-primary);          color: var(--ax-brand-emphasis); }

/* ────────────────────────────────────────────────────────────
 * CHIP
 * ──────────────────────────────────────────────────────────── */
.ax-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-spacing-sm);
  padding: var(--ax-spacing-xs) var(--ax-spacing-md);
  border-radius: var(--ax-radius-md);
  background: transparent;
  color: var(--ax-text-default);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  border: 1px solid var(--ax-border-default);
}
.ax-chip__close {
  all: unset; cursor: pointer;
  width: 16px; height: 16px;
  border-radius: var(--ax-radius-full);
  display: grid; place-items: center;
  color: var(--ax-text-secondary);
  font-size: 11px;
}
.ax-chip__close:hover { background: var(--ax-border-default); color: var(--ax-text-heading); }

/* Chip variants */
.ax-chip--selected {
  background: var(--ax-brand-faint);
  color: var(--ax-brand-emphasis);
  border-color: var(--ax-brand-default);
}
.ax-chip--disabled,
.ax-chip[aria-disabled='true'] {
  opacity: var(--ax-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ax-chip__avatar {
  width: 20px; height: 20px;
  border-radius: var(--ax-radius-full);
  object-fit: cover;
  margin-inline-start: calc(var(--ax-spacing-xs) * -1);
}
.ax-chip--interactive { cursor: pointer; transition: background-color var(--ax-duration-fast) var(--ax-easing-easeOut); }
.ax-chip--interactive:hover { background: var(--ax-background-subtle); }
.ax-chip--interactive:focus-visible {
  outline: var(--ax-focus-ring-width) solid var(--ax-border-focus);
  outline-offset: var(--ax-focus-ring-offset);
}
/* Role chips — filled variants */
.ax-chip--success { background: var(--ax-success-faint); color: var(--ax-success-emphasis); border-color: transparent; }
.ax-chip--warning { background: var(--ax-warning-faint); color: var(--ax-warning-emphasis); border-color: transparent; }
.ax-chip--danger  { background: var(--ax-error-faint);   color: var(--ax-error-emphasis);   border-color: transparent; }
.ax-chip--info    { background: var(--ax-info-faint);    color: var(--ax-info-emphasis);    border-color: transparent; }

/* ────────────────────────────────────────────────────────────
 * DIALOG  ·  mat-dialog · radius-xl (12px) · shadow-lg
 * Source: _material-overrides.scss + _component-tokens.scss
 * ──────────────────────────────────────────────────────────── */
.ax-dialog {
  background: var(--ax-background-default);
  border-radius: var(--ax-radius-xl);
  border: 1px solid var(--ax-border-default);
  box-shadow: var(--ax-shadow-lg);
  max-width: 420px;
  width: 100%;
  overflow: hidden;
}
.ax-dialog__header { padding: 1.5rem; }
.ax-dialog__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: var(--ax-text-lg-line);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-heading);
}
.ax-dialog__body {
  padding: 0 1.5rem 1.5rem;
  color: var(--ax-text-default);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
}
.ax-dialog__footer {
  display: flex;
  gap: var(--ax-spacing-sm);
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--ax-border-default);
}

.ax-scrim {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  padding: var(--ax-spacing-2xl);
  border-radius: var(--ax-radius-lg);
  display: grid; place-items: center;
  min-height: 280px;
}

/* ────────────────────────────────────────────────────────────
 * TOAST  ·  mat-snack-bar · role-coded left border
 * ──────────────────────────────────────────────────────────── */
.ax-toast {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-md);
  padding: var(--ax-spacing-md) var(--ax-spacing-lg);
  background: var(--ax-background-default);
  border: var(--ax-border-width-thin) solid var(--ax-border-default);
  border-left: 4px solid var(--ax-primary);
  border-radius: var(--ax-radius-md);
  box-shadow: var(--ax-elevation-2);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
  color: var(--ax-text-default);
  min-width: 280px;
}
.ax-toast--success { border-left-color: var(--ax-success-default); }
.ax-toast--warning { border-left-color: var(--ax-warning-default); }
.ax-toast--error   { border-left-color: var(--ax-error-default); }
.ax-toast--info    { border-left-color: var(--ax-info-default); }

.ax-toast__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ax-primary); }
.ax-toast--success .ax-toast__icon { color: var(--ax-success-default); }
.ax-toast--warning .ax-toast__icon { color: var(--ax-warning-default); }
.ax-toast--error   .ax-toast__icon { color: var(--ax-error-default); }
.ax-toast--info    .ax-toast__icon { color: var(--ax-info-default); }

.ax-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ax-toast__title { font-weight: var(--ax-font-weight-semibold); color: var(--ax-text-heading); }
.ax-toast__desc  { color: var(--ax-text-secondary); font-size: var(--ax-text-xs-size); }
.ax-toast__action {
  all: unset; cursor: pointer;
  color: var(--ax-primary);
  font-weight: var(--ax-font-weight-medium);
  padding: 0 var(--ax-spacing-sm);
}
.ax-toast__close {
  all: unset; cursor: pointer;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--ax-radius-sm);
  color: var(--ax-text-subtle);
}
.ax-toast__close:hover { background: var(--ax-background-subtle); color: var(--ax-text-heading); }

/* Auto-dismiss progress bar (consumer sets CSS custom-property --ax-toast-progress 0→1) */
.ax-toast__progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: color-mix(in srgb, var(--ax-primary) 30%, transparent);
  border-bottom-left-radius: var(--ax-radius-md);
  border-bottom-right-radius: var(--ax-radius-md);
  transform-origin: left;
  transform: scaleX(var(--ax-toast-progress, 1));
  transition: transform linear var(--ax-toast-duration, 5s);
}
.ax-toast { position: relative; overflow: hidden; }

/* Toast stack container — stick to a viewport corner */
.ax-toast-stack {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--ax-spacing-sm);
  z-index: var(--ax-z-toast);
  pointer-events: none;
  width: min(400px, calc(100vw - 2 * var(--ax-spacing-lg)));
}
.ax-toast-stack .ax-toast { pointer-events: auto; animation: ax-toast-in var(--ax-duration-normal) var(--ax-easing-easeOut); }
.ax-toast-stack--top-right    { top:    var(--ax-spacing-lg); inset-inline-end: var(--ax-spacing-lg); }
.ax-toast-stack--top-left     { top:    var(--ax-spacing-lg); inset-inline-start: var(--ax-spacing-lg); }
.ax-toast-stack--bottom-right { bottom: var(--ax-spacing-lg); inset-inline-end: var(--ax-spacing-lg); }
.ax-toast-stack--bottom-left  { bottom: var(--ax-spacing-lg); inset-inline-start: var(--ax-spacing-lg); }
.ax-toast-stack--top-center,
.ax-toast-stack--bottom-center { inset-inline: 0; margin: 0 auto; align-items: center; }
.ax-toast-stack--top-center    { top: var(--ax-spacing-lg); }
.ax-toast-stack--bottom-center { bottom: var(--ax-spacing-lg); }
@keyframes ax-toast-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* JS contract: consumer creates toast element, inserts into stack,
   sets --ax-toast-duration, schedules removal after progress fills. */

/* ────────────────────────────────────────────────────────────
 * LINK
 * ──────────────────────────────────────────────────────────── */
.ax-link {
  color: var(--ax-primary);
  text-decoration: none;
  font-weight: var(--ax-font-weight-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-link:hover { border-bottom-color: var(--ax-primary); }
.ax-link:focus-visible {
  outline: none;
  box-shadow: var(--ax-focus-ring);
  border-radius: 2px;
}

/* ────────────────────────────────────────────────────────────
 * TABLE  ·  mat-table
 * Source: _material-overrides.scss (12px header, 0.75rem 1rem cell)
 * ──────────────────────────────────────────────────────────── */
.ax-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ax-background-default);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  border-radius: inherit;
  overflow: hidden;
}
.ax-table th {
  text-align: left;
  padding: 0.625rem 1rem;
  background: var(--ax-table-header-bg);
  color: var(--ax-table-header-text);
  font-size: 0.75rem;
  font-weight: var(--ax-font-weight-medium);
  text-transform: none;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--ax-table-cell-border);
}
.ax-table td {
  padding: 0.75rem 1rem;
  color: var(--ax-table-cell-text);
  border-bottom: 1px solid var(--ax-table-cell-border);
}
.ax-table tbody tr {
  transition: background-color 0.15s ease;
}
.ax-table tbody tr:hover { background: var(--ax-table-row-hover-bg); }
.ax-table tbody tr:last-child td { border-bottom: none; }

/* Scroll wrapper — keeps narrow tables readable on mobile without horizontal page scroll */
.ax-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ax-border-subtle);
  border-radius: var(--ax-radius-lg);
  background: var(--ax-background-default);
}
.ax-table-wrap > .ax-table { border-radius: 0; }

/* Mobile: stack table rows as cards (consumer opts in with .ax-table--stack) */
@media (max-width: 640px) {
  .ax-table--stack thead { display: none; }
  .ax-table--stack tr {
    display: block;
    border-bottom: 1px solid var(--ax-border-subtle);
    padding: var(--ax-spacing-md);
  }
  .ax-table--stack td {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--ax-spacing-xs) 0;
    border: 0;
  }
  .ax-table--stack td::before {
    content: attr(data-label);
    font-size: var(--ax-text-xs-size);
    color: var(--ax-text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--ax-tracking-wide);
    font-weight: var(--ax-font-weight-medium);
  }
}

/* ════════════════════════════════════════════════════════════════
 * AEGISX-CUSTOM COMPONENTS
 * No Angular Material v3 equivalent. Pure AegisX patterns.
 * Use .ax-* classes directly in any context.
 * ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
 * AVATAR · initials fallback for patient/staff photos
 * ──────────────────────────────────────────────────────────── */
.ax-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ax-radius-full);
  background: var(--ax-brand-faint);
  color: var(--ax-brand-emphasis);
  font-family: var(--ax-font-sans);
  font-weight: var(--ax-font-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
}
.ax-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.ax-avatar--md { width: 36px; height: 36px; font-size: var(--ax-text-xs-size); }
.ax-avatar--lg { width: 44px; height: 44px; font-size: var(--ax-text-sm-size); }
.ax-avatar--xl { width: 56px; height: 56px; font-size: var(--ax-text-md-size); }
.ax-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ax-avatar--success { background: var(--ax-success-faint); color: var(--ax-success-emphasis); }
.ax-avatar--warning { background: var(--ax-warning-faint); color: var(--ax-warning-emphasis); }
.ax-avatar--error   { background: var(--ax-error-faint);   color: var(--ax-error-emphasis); }

/* ────────────────────────────────────────────────────────────
 * STATUS DOT · inline indicator (active/idle/offline/busy)
 * ──────────────────────────────────────────────────────────── */
.ax-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-text-disabled);
  flex-shrink: 0;
}
.ax-dot--success { background: var(--ax-success-default); }
.ax-dot--warning { background: var(--ax-warning-default); }
.ax-dot--error   { background: var(--ax-error-default); }
.ax-dot--info    { background: var(--ax-info-default); }
.ax-dot--lg { width: 10px; height: 10px; }

/* ────────────────────────────────────────────────────────────
 * TAB BAR
 * ──────────────────────────────────────────────────────────── */
.ax-tabs {
  display: block;
}
.ax-tabs__list {
  display: flex;
  gap: var(--ax-spacing-xl);
  border-bottom: var(--ax-border-width-thin) solid var(--ax-border-default);
  padding: 0;
  overflow-x: auto;
}
.ax-tabs__item,
.ax-tabs__tab {
  all: unset;
  cursor: pointer;
  padding: var(--ax-spacing-md) 0;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--ax-duration-fast) var(--ax-easing-easeOut),
              border-color var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-tabs__item:hover,
.ax-tabs__tab:hover { color: var(--ax-text-heading); }
.ax-tabs__item[aria-selected="true"],
.ax-tabs__item.active,
.ax-tabs__tab[aria-selected="true"],
.ax-tabs__tab--active {
  color: var(--ax-primary);
  border-bottom-color: var(--ax-primary);
}
.ax-tabs__tab:disabled,
.ax-tabs__tab[aria-disabled="true"] {
  opacity: var(--ax-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ax-tabs__item:focus-visible,
.ax-tabs__tab:focus-visible {
  outline: var(--ax-focus-ring-width) solid var(--ax-border-focus);
  outline-offset: var(--ax-focus-ring-offset);
}
.ax-tabs__panel {
  padding: var(--ax-spacing-md) 0;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-default);
}

/* ────────────────────────────────────────────────────────────
 * BREADCRUMB
 * ──────────────────────────────────────────────────────────── */
.ax-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-sm);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-secondary);
}
.ax-breadcrumb a { color: var(--ax-text-secondary); }
.ax-breadcrumb a:hover { color: var(--ax-primary); }
.ax-breadcrumb__sep { color: var(--ax-text-disabled); font-size: 10px; }
.ax-breadcrumb__current { color: var(--ax-text-heading); font-weight: var(--ax-font-weight-medium); }

/* ────────────────────────────────────────────────────────────
 * PAGINATION
 * ──────────────────────────────────────────────────────────── */
.ax-pagination {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-xs);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
}
.ax-pagination__btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 var(--ax-spacing-sm);
  border-radius: var(--ax-radius-sm);
  color: var(--ax-text-default);
  font-weight: var(--ax-font-weight-medium);
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-pagination__btn:hover { background: var(--ax-background-subtle); }
.ax-pagination__btn[aria-current="page"],
.ax-pagination__btn.active {
  background: var(--ax-primary);
  color: #fff;
}
.ax-pagination__btn:disabled { color: var(--ax-text-disabled); cursor: not-allowed; }
.ax-pagination__btn:focus-visible { outline: var(--ax-focus-ring-width) solid var(--ax-border-focus); outline-offset: var(--ax-focus-ring-offset); }
.ax-pagination__info { color: var(--ax-text-secondary); font-size: var(--ax-text-xs-size); margin: 0 var(--ax-spacing-sm); }

/* ────────────────────────────────────────────────────────────
 * PAGINATOR  ·  mat-paginator · table footer with range + page size
 * Markup:
 *   <div class="ax-paginator">
 *     <label class="ax-paginator__size">
 *       Items per page:
 *       <select class="ax-select"><option>10</option>…</select>
 *     </label>
 *     <span class="ax-paginator__range">1–10 of 100</span>
 *     <div class="ax-paginator__nav">
 *       <button class="ax-button ax-button--icon" aria-label="First"> ⟪ </button>
 *       <button class="ax-button ax-button--icon" aria-label="Prev">  ‹  </button>
 *       <button class="ax-button ax-button--icon" aria-label="Next">  ›  </button>
 *       <button class="ax-button ax-button--icon" aria-label="Last"> ⟫ </button>
 *     </div>
 *   </div>
 * ──────────────────────────────────────────────────────────── */
.ax-paginator {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-md);
  padding: var(--ax-spacing-xs) var(--ax-spacing-md);
  min-height: 3.5rem;
  border-top: 1px solid var(--ax-border-subtle);
  background: var(--ax-background-default);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-xs-size);
  color: var(--ax-text-secondary);
}
.ax-paginator__size { display: inline-flex; align-items: center; gap: var(--ax-spacing-sm); white-space: nowrap; }
.ax-paginator__size .ax-select { width: auto; min-width: 64px; }
.ax-paginator__size .ax-select select {
  height: 2rem;
  padding: 0 var(--ax-spacing-xl) 0 var(--ax-spacing-sm);
  font-size: var(--ax-text-xs-size);
}
.ax-paginator__size .ax-select::after { right: 8px; }
.ax-paginator__range { margin-inline-start: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ax-paginator__nav { display: inline-flex; gap: 0; }
.ax-paginator__nav .ax-button--icon {
  width: 2rem;
  height: 2rem;
  min-height: 0;
  color: var(--ax-text-secondary);
}
.ax-paginator__nav .ax-button--icon .material-icons,
.ax-paginator__nav .ax-button--icon .material-symbols-outlined { font-size: 1.125rem; }
.ax-paginator__nav .ax-button--icon:hover { color: var(--ax-text-heading); background: var(--ax-background-subtle); }
.ax-paginator__nav .ax-button--icon:disabled { color: var(--ax-text-disabled); background: transparent; }

@media (max-width: 640px) {
  .ax-paginator { flex-wrap: wrap; gap: var(--ax-spacing-sm); }
  .ax-paginator__size { order: 3; }
  .ax-paginator__range { margin-inline-start: 0; flex: 1 0 auto; }
  .ax-paginator__nav { margin-inline-start: auto; }
}

/* ────────────────────────────────────────────────────────────
 * SORT HEADER (for .ax-table)  ·  mat-sort
 * Apply .ax-table__sort to <th> + aria-sort='ascending|descending'
 * ──────────────────────────────────────────────────────────── */
.ax-table__sort {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-inline-end: calc(var(--ax-spacing-md) + 14px) !important;
}
.ax-table__sort::after {
  content: '↕';
  position: absolute;
  inset-inline-end: var(--ax-spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ax-text-subtle);
  opacity: 0;
  transition: opacity var(--ax-duration-fast) var(--ax-easing-easeOut), color var(--ax-duration-fast) var(--ax-easing-easeOut);
  font-size: 11px;
}
.ax-table__sort:hover::after { opacity: 1; color: var(--ax-text-secondary); }
.ax-table__sort[aria-sort='ascending']::after  { content: '↑'; opacity: 1; color: var(--ax-primary); }
.ax-table__sort[aria-sort='descending']::after { content: '↓'; opacity: 1; color: var(--ax-primary); }
.ax-table__sort:focus-visible {
  outline: var(--ax-focus-ring-width) solid var(--ax-border-focus);
  outline-offset: -1px;
}

/* ────────────────────────────────────────────────────────────
 * PROGRESS BAR
 * ──────────────────────────────────────────────────────────── */
.ax-progress {
  width: 100%;
  height: 6px;
  background: var(--ax-background-subtle);
  border-radius: var(--ax-radius-full);
  overflow: hidden;
}
.ax-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--ax-primary);
  border-radius: var(--ax-radius-full);
  transform-origin: left;
  transition: transform var(--ax-duration-normal) var(--ax-easing-easeOut);
  will-change: transform;
}
/* Use transform: scaleX() for GPU compositing.
   Set via inline style="--ax-progress: 0.72" + CSS below,
   or use style="width: 72%" as fallback (both work). */
.ax-progress__bar[style*="--ax-progress"] {
  width: 100%;
  transform: scaleX(var(--ax-progress, 1));
}
.ax-progress--success .ax-progress__bar { background: var(--ax-success-default); }
.ax-progress--warning .ax-progress__bar { background: var(--ax-warning-default); }
.ax-progress--error   .ax-progress__bar { background: var(--ax-error-default); }
.ax-progress--lg { height: 10px; }

/* ────────────────────────────────────────────────────────────
 * SPINNER
 * ──────────────────────────────────────────────────────────── */
.ax-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--ax-border-default);
  border-top-color: var(--ax-primary);
  border-radius: var(--ax-radius-full);
  animation: ax-spin 0.7s linear infinite;
}
.ax-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.ax-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* ────────────────────────────────────────────────────────────
 * EMPTY STATE
 * ──────────────────────────────────────────────────────────── */
.ax-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ax-spacing-3xl) var(--ax-spacing-xl);
  gap: var(--ax-spacing-md);
}
.ax-empty__icon {
  width: 48px; height: 48px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-brand-faint);
  color: var(--ax-brand-emphasis);
  display: grid; place-items: center;
  font-size: 20px;
}
.ax-empty__title {
  margin: 0;
  font-size: var(--ax-text-md-size);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-heading);
}
.ax-empty__desc {
  margin: 0;
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-secondary);
  max-width: 360px;
}

/* ────────────────────────────────────────────────────────────
 * DIVIDER
 * ──────────────────────────────────────────────────────────── */
.ax-divider {
  border: none;
  border-top: var(--ax-border-width-thin) solid var(--ax-border-default);
  margin: var(--ax-spacing-xl) 0;
}
.ax-divider--subtle { border-top-color: var(--ax-border-subtle); }
.ax-divider--sm { margin: var(--ax-spacing-md) 0; }

/* ────────────────────────────────────────────────────────────
 * STAT CARD · dashboard KPI
 * ──────────────────────────────────────────────────────────── */
.ax-stat {
  background: var(--ax-background-default);
  border: var(--ax-border-width-thin) solid var(--ax-border-default);
  border-radius: var(--ax-radius-lg);
  padding: var(--ax-spacing-lg) var(--ax-spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ax-spacing-xs);
}
.ax-stat__label {
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ax-tracking-widest);
}
.ax-stat__value {
  font-size: var(--ax-display-xs-size);
  line-height: var(--ax-display-xs-line);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-heading);
}
.ax-stat__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-medium);
}
.ax-stat__trend--up { color: var(--ax-success-emphasis); }
.ax-stat__trend--down { color: var(--ax-error-emphasis); }
.ax-stat__trend--flat { color: var(--ax-text-secondary); }

/* ────────────────────────────────────────────────────────────
 * KEY-VALUE · patient record, detail view
 * ──────────────────────────────────────────────────────────── */
.ax-kv {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: var(--ax-spacing-xs) var(--ax-spacing-lg);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
}
.ax-kv__key {
  color: var(--ax-text-secondary);
  font-weight: var(--ax-font-weight-medium);
}
.ax-kv__val { color: var(--ax-text-heading); }
.ax-kv--striped .ax-kv__key:nth-child(4n+1),
.ax-kv--striped .ax-kv__val:nth-child(4n+2) {
  padding: var(--ax-spacing-xs) var(--ax-spacing-sm);
  background: var(--ax-background-muted);
  border-radius: var(--ax-radius-xs);
}

/* ────────────────────────────────────────────────────────────
 * TOGGLE  ·  mat-slide-toggle · on/off switch
 * ──────────────────────────────────────────────────────────── */
.ax-toggle {
  position: relative;
  display: inline-flex;
  width: 36px; height: 20px;
  cursor: pointer;
}
.ax-toggle input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.ax-toggle__track {
  width: 100%; height: 100%;
  background: var(--ax-border-default);
  border-radius: var(--ax-radius-full);
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-toggle:hover .ax-toggle__track { background: var(--ax-border-emphasis); }
.ax-toggle__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--ax-background-default);
  border-radius: var(--ax-radius-full);
  box-shadow: var(--ax-shadow-xs);
  transition: transform var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-toggle input:checked ~ .ax-toggle__track { background: var(--ax-primary); }
.ax-toggle:hover input:checked ~ .ax-toggle__track { background: var(--ax-primary-dark); }
.ax-toggle input:checked ~ .ax-toggle__thumb { transform: translateX(16px); }
.ax-toggle input:focus-visible ~ .ax-toggle__track {
  outline: var(--ax-focus-ring-width) solid var(--ax-border-focus);
  outline-offset: var(--ax-focus-ring-offset);
}
.ax-toggle input:disabled ~ .ax-toggle__track { opacity: var(--ax-opacity-disabled); cursor: not-allowed; }
.ax-toggle input:disabled ~ .ax-toggle__thumb { cursor: not-allowed; }

/* Size variants */
.ax-toggle--sm { width: 28px; height: 16px; }
.ax-toggle--sm .ax-toggle__thumb { width: 12px; height: 12px; }
.ax-toggle--sm input:checked ~ .ax-toggle__thumb { transform: translateX(12px); }
.ax-toggle--lg { width: 44px; height: 24px; }
.ax-toggle--lg .ax-toggle__thumb { width: 20px; height: 20px; }
.ax-toggle--lg input:checked ~ .ax-toggle__thumb { transform: translateX(20px); }

/* ────────────────────────────────────────────────────────────
 * TOOLTIP  ·  mat-tooltip · CSS-only via data-tooltip attr
 * ──────────────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--ax-color-zinc-900);
  color: #fff;
  font-family: var(--ax-font-sans);
  font-size: 11px;
  line-height: 1.4;
  border-radius: var(--ax-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.95);
  transition: opacity var(--ax-duration-fast) var(--ax-easing-easeOut),
              transform var(--ax-duration-fast) var(--ax-easing-easeOut);
  z-index: var(--ax-z-popover);
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ────────────────────────────────────────────────────────────
 * DROPDOWN MENU  ·  mat-menu
 * ──────────────────────────────────────────────────────────── */
.ax-menu {
  background: var(--ax-background-default);
  border: 1px solid var(--ax-border-default);
  border-radius: var(--ax-radius-md);
  box-shadow: var(--ax-shadow-md);
  min-width: 180px;
  padding: var(--ax-spacing-xs) 0;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
}
.ax-menu__item {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-sm);
  padding: var(--ax-spacing-sm) var(--ax-spacing-lg);
  color: var(--ax-text-default);
  cursor: pointer;
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut);
  border: none; background: none; width: 100%; text-align: left;
  font: inherit;
}
.ax-menu__item:hover { background: var(--ax-background-subtle); }
.ax-menu__item:focus-visible { outline: none; background: var(--ax-background-subtle); box-shadow: inset var(--ax-focus-ring); }
.ax-menu__item--danger { color: var(--ax-error-emphasis); }
.ax-menu__item--danger:hover { background: var(--ax-error-faint); }
.ax-menu__sep { height: 0; border-top: var(--ax-border-width-thin) solid var(--ax-border-subtle); margin: var(--ax-spacing-xs) 0; }
.ax-menu__label { padding: var(--ax-spacing-sm) var(--ax-spacing-lg); font-size: var(--ax-text-xs-size); font-weight: var(--ax-font-weight-medium); color: var(--ax-text-secondary); text-transform: uppercase; letter-spacing: var(--ax-tracking-widest); }

/* ────────────────────────────────────────────────────────────
 * CHECKBOX  ·  mat-checkbox · styled, hides native input
 * ──────────────────────────────────────────────────────────── */
.ax-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-spacing-sm);
  cursor: pointer;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-default);
  position: relative;
}
.ax-checkbox input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
.ax-checkbox__box {
  width: 18px; height: 18px;
  background: #fff;
  border: 1.5px solid var(--ax-border-emphasis);
  border-radius: 4px;
  display: grid; place-items: center;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.ax-checkbox__box::after {
  content: '';
  width: 10px; height: 5px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg) translateY(-1px);
}
.ax-checkbox input:checked ~ .ax-checkbox__box {
  background: var(--ax-primary);
  border-color: var(--ax-primary);
}
.ax-checkbox input:checked ~ .ax-checkbox__box::after {
  border-left-color: var(--ax-brand-inverted);
  border-bottom-color: var(--ax-brand-inverted);
}
/* Indeterminate state — flat horizontal bar instead of check */
.ax-checkbox input:indeterminate ~ .ax-checkbox__box,
.ax-checkbox[data-indeterminate='true'] .ax-checkbox__box {
  background: var(--ax-primary);
  border-color: var(--ax-primary);
}
.ax-checkbox input:indeterminate ~ .ax-checkbox__box::after,
.ax-checkbox[data-indeterminate='true'] .ax-checkbox__box::after {
  width: 10px; height: 0;
  border-left: 0;
  border-bottom: 2px solid var(--ax-brand-inverted);
  transform: none;
}
.ax-checkbox:hover .ax-checkbox__box { border-color: var(--ax-text-default); }
.ax-checkbox input:focus-visible ~ .ax-checkbox__box { outline: var(--ax-focus-ring-width) solid var(--ax-focus-ring-color); outline-offset: var(--ax-focus-ring-offset); }
.ax-checkbox input:disabled ~ .ax-checkbox__box { opacity: var(--ax-opacity-disabled); cursor: not-allowed; background: var(--ax-background-muted); border-color: var(--ax-border-default); }
.ax-checkbox input:disabled ~ span { color: var(--ax-text-disabled); }
/* Error state */
.ax-checkbox--error .ax-checkbox__box,
.ax-checkbox[aria-invalid='true'] .ax-checkbox__box { border-color: var(--ax-error-default); }
.ax-checkbox--error input:checked ~ .ax-checkbox__box,
.ax-checkbox[aria-invalid='true'] input:checked ~ .ax-checkbox__box { background: var(--ax-error-default); border-color: var(--ax-error-default); }

/* Group wrapper for vertical or horizontal layout */
.ax-checkbox-group { display: inline-flex; flex-direction: column; gap: var(--ax-spacing-sm); }
.ax-checkbox-group--horizontal { flex-direction: row; gap: var(--ax-spacing-lg); }

/* ────────────────────────────────────────────────────────────
 * RADIO  ·  mat-radio-button · styled, hides native input
 * ──────────────────────────────────────────────────────────── */
.ax-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-spacing-sm);
  cursor: pointer;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-default);
}
.ax-radio { position: relative; }
.ax-radio input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.ax-radio__dot {
  width: 18px; height: 18px;
  background: #fff;
  border: 1.5px solid var(--ax-border-emphasis);
  border-radius: 9999px;
  display: grid; place-items: center;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.ax-radio__dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: transparent;
  transition: background 150ms ease;
}
.ax-radio:hover .ax-radio__dot { border-color: var(--ax-text-default); }
.ax-radio input:checked ~ .ax-radio__dot { border-color: var(--ax-primary); }
.ax-radio input:checked ~ .ax-radio__dot::after { background: var(--ax-primary); }
.ax-radio input:focus-visible ~ .ax-radio__dot { outline: var(--ax-focus-ring-width) solid var(--ax-focus-ring-color); outline-offset: var(--ax-focus-ring-offset); }
.ax-radio input:disabled ~ .ax-radio__dot { opacity: var(--ax-opacity-disabled); cursor: not-allowed; background: var(--ax-background-muted); border-color: var(--ax-border-default); }
.ax-radio input:disabled ~ span { color: var(--ax-text-disabled); }
.ax-radio--error .ax-radio__dot,
.ax-radio[aria-invalid='true'] .ax-radio__dot { border-color: var(--ax-error-default); }
.ax-radio--error input:checked ~ .ax-radio__dot::after,
.ax-radio[aria-invalid='true'] input:checked ~ .ax-radio__dot::after { background: var(--ax-error-default); }

/* Group — vertical (default) or horizontal */
.ax-radio-group { display: inline-flex; flex-direction: column; gap: var(--ax-spacing-sm); }
.ax-radio-group--horizontal { flex-direction: row; gap: var(--ax-spacing-lg); }
.ax-radio input:disabled ~ .ax-radio__dot { opacity: 0.4; cursor: not-allowed; }

/* ────────────────────────────────────────────────────────────
 * SELECT  ·  mat-select · styled wrapper (native <select>)
 * ──────────────────────────────────────────────────────────── */
.ax-select {
  position: relative;
  display: block;
  width: 100%;
}
.ax-select select {
  display: block;
  width: 100%;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
  color: var(--ax-input-text);
  background: var(--ax-input-bg);
  border: var(--ax-border-width-thin) solid var(--ax-input-border);
  border-radius: var(--ax-radius-md);
  padding: 0 var(--ax-spacing-2xl) 0 var(--ax-control-pad-x);
  height: var(--ax-control-h);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-select::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--ax-text-secondary);
  pointer-events: none;
}
.ax-select select:hover { border-color: var(--ax-input-border-hover); }
.ax-select select:focus { outline: none; border-color: var(--ax-input-border-focus); box-shadow: var(--ax-input-ring-focus); }
.ax-select select:disabled { background: var(--ax-input-bg-disabled); cursor: not-allowed; color: var(--ax-text-secondary); }

/* Standalone option-panel — pair with .ax-select trigger (or use directly) */
.ax-select-panel {
  background: var(--ax-background-default);
  border: 1px solid var(--ax-border-default);
  border-radius: var(--ax-radius-md);
  box-shadow: var(--ax-shadow-md);
  padding: var(--ax-spacing-xs) 0;
  max-height: 320px;
  overflow-y: auto;
  min-width: 180px;
  font-family: var(--ax-font-sans);
}
.ax-option {
  display: flex;
  align-items: center;
  gap: var(--ax-control-gap);
  min-height: var(--ax-control-h-sm);
  padding: 0 var(--ax-control-pad-x);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
  color: var(--ax-text-default);
  cursor: pointer;
  transition: background-color var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-option:hover,
.ax-option:focus-visible { background: var(--ax-background-subtle); outline: none; }
.ax-option[aria-selected="true"],
.ax-option--selected {
  background: var(--ax-brand-faint);
  color: var(--ax-brand-emphasis);
  font-weight: var(--ax-font-weight-medium);
}
.ax-option--disabled,
.ax-option[aria-disabled="true"] {
  opacity: var(--ax-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ax-option__meta { margin-left: auto; color: var(--ax-text-subtle); font-size: var(--ax-text-xs-size); }
.ax-option__check { width: var(--ax-control-icon); height: var(--ax-control-icon); flex-shrink: 0; color: var(--ax-brand-default); }
.ax-option[aria-selected="true"] .ax-option__check,
.ax-option--selected .ax-option__check { display: inline-block; }
.ax-optgroup__label {
  padding: var(--ax-spacing-sm) var(--ax-control-pad-x) var(--ax-spacing-xs);
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ax-tracking-wide);
}

/* ────────────────────────────────────────────────────────────
 * AUTOCOMPLETE — input + floating results panel
 * Markup:
 *   <div class="ax-autocomplete" role="combobox">
 *     <input class="ax-input" aria-autocomplete="list" aria-controls="opts">
 *     <div class="ax-autocomplete__panel" id="opts" role="listbox">
 *       <div class="ax-option" role="option">Patient HN-01234 — <mark>สม</mark>ชาย</div>
 *     </div>
 *   </div>
 * Panel visibility is consumer-controlled (`hidden` attribute or display toggle).
 * ──────────────────────────────────────────────────────────── */
.ax-autocomplete {
  position: relative;
  display: block;
}
.ax-autocomplete__panel {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: var(--ax-z-dropdown);
  background: var(--ax-background-default);
  border: 1px solid var(--ax-border-default);
  border-radius: var(--ax-radius-md);
  box-shadow: var(--ax-shadow-md);
  padding: var(--ax-spacing-xs) 0;
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--ax-font-sans);
}
.ax-autocomplete__panel[hidden] { display: none; }
.ax-autocomplete__empty {
  padding: var(--ax-spacing-md);
  color: var(--ax-text-subtle);
  font-size: var(--ax-text-sm-size);
  text-align: center;
}
.ax-autocomplete__footer {
  padding: var(--ax-spacing-sm) var(--ax-control-pad-x);
  border-top: 1px solid var(--ax-border-subtle);
  color: var(--ax-text-subtle);
  font-size: var(--ax-text-xs-size);
  display: flex;
  align-items: center;
  gap: var(--ax-control-gap);
}
/* Highlighted match inside an option (wrap substring in <mark> or .ax-match) */
.ax-option mark,
.ax-option .ax-match {
  background: var(--ax-warning-faint);
  color: var(--ax-warning-emphasis);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: var(--ax-font-weight-semibold);
}

/* ────────────────────────────────────────────────────────────
 * SEARCH INPUT · with icon placeholder
 * ──────────────────────────────────────────────────────────── */
.ax-search {
  position: relative;
  display: block;
}
.ax-search .ax-input { padding-left: var(--ax-spacing-2xl); }
.ax-search__icon {
  position: absolute;
  left: var(--ax-spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--ax-text-subtle);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.ax-search__icon svg { width: 16px; height: 16px; }

/* ────────────────────────────────────────────────────────────
 * SIDEBAR NAV  ·  mat-sidenav · vertical app navigation
 * ──────────────────────────────────────────────────────────── */
.ax-sidenav {
  width: 240px;
  background: var(--ax-nav-bg);
  border-right: var(--ax-border-width-thin) solid var(--ax-nav-border);
  display: flex;
  flex-direction: column;
  font-family: var(--ax-font-sans);
  padding: var(--ax-spacing-md) var(--ax-spacing-sm);
}
.ax-sidenav__brand {
  padding: var(--ax-spacing-md) var(--ax-spacing-md) var(--ax-spacing-lg);
  border-bottom: var(--ax-border-width-thin) solid var(--ax-border-subtle);
  margin-bottom: var(--ax-spacing-md);
}
.ax-sidenav__brand img { height: 26px; }
.ax-sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-sm);
  padding: var(--ax-spacing-sm) var(--ax-spacing-md);
  border-radius: var(--ax-radius-sm);
  color: var(--ax-nav-text);
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-medium);
  text-decoration: none;
  transition: all var(--ax-duration-fast) var(--ax-easing-easeOut);
  cursor: pointer;
}
.ax-sidenav__item:hover { background: var(--ax-background-subtle); color: var(--ax-nav-text-hover); text-decoration: none; }
.ax-sidenav__item.active { background: var(--ax-nav-bg-active); color: var(--ax-nav-text-active); }
.ax-sidenav__item .ax-dot { margin-left: auto; }
.ax-sidenav__section {
  padding: var(--ax-spacing-lg) var(--ax-spacing-md) var(--ax-spacing-xs);
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ax-tracking-widest);
}
.ax-sidenav__footer {
  margin-top: auto;
  padding: var(--ax-spacing-md);
  border-top: var(--ax-border-width-thin) solid var(--ax-border-subtle);
  font-size: var(--ax-text-xs-size);
  color: var(--ax-text-secondary);
  display: flex; align-items: center; gap: var(--ax-spacing-sm);
}

/* ── Dark navy variant (matches AegisX production app) ───── */
.ax-sidenav--dark {
  background: #0f172a;
  border-right-color: rgba(255,255,255,.08);
}
.ax-sidenav--dark .ax-sidenav__brand {
  border-bottom-color: rgba(255,255,255,.08);
}
.ax-sidenav--dark .ax-sidenav__brand img { filter: brightness(10); }
.ax-sidenav--dark .ax-sidenav__section {
  color: rgba(255,255,255,.35);
}
.ax-sidenav--dark .ax-sidenav__item {
  color: rgba(255,255,255,.6);
  border-left: 2px solid transparent;
  margin: 1px 0;
  border-radius: 0;
  padding: var(--ax-spacing-sm) var(--ax-spacing-lg);
}
.ax-sidenav--dark .ax-sidenav__item:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.ax-sidenav--dark .ax-sidenav__item.active {
  color: #fff;
  background: rgba(99,102,241,.18);
  border-left-color: var(--ax-brand-subtle);
}
.ax-sidenav--dark .ax-sidenav__footer {
  border-top-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
}

/* ── Rail variant (icon-only collapsed, ~56px) ───────────── */
.ax-sidenav--rail {
  width: 56px;
  padding: var(--ax-spacing-md) var(--ax-spacing-xs);
  align-items: center;
}
.ax-sidenav--rail .ax-sidenav__brand { padding: var(--ax-spacing-md) 0; justify-content: center; }
.ax-sidenav--rail .ax-sidenav__brand img { height: 24px; }
.ax-sidenav--rail .ax-sidenav__brand span { display: none; }
.ax-sidenav--rail .ax-sidenav__section { display: none; }
.ax-sidenav--rail .ax-sidenav__item {
  justify-content: center;
  padding: var(--ax-spacing-sm);
  border-radius: var(--ax-radius-md);
  border-left: none;
  margin: 2px 0;
  width: 40px; height: 40px;
}
.ax-sidenav--rail .ax-sidenav__item span:not(.ax-dot) { display: none; }
.ax-sidenav--rail .ax-sidenav__footer { justify-content: center; }
.ax-sidenav--rail .ax-sidenav__footer > *:not(:first-child) { display: none; }

/* ────────────────────────────────────────────────────────────
 * ACCORDION  ·  mat-expansion-panel
 * ──────────────────────────────────────────────────────────── */
.ax-accordion {
  border: var(--ax-border-width-thin) solid var(--ax-border-default);
  border-radius: var(--ax-radius-lg);
  overflow: hidden;
}
.ax-accordion__item + .ax-accordion__item { border-top: var(--ax-border-width-thin) solid var(--ax-border-default); }
/* Hide native <details>/<summary> marker — we provide our own chevron */
.ax-accordion__item summary::-webkit-details-marker { display: none; }
.ax-accordion__item summary::marker { content: ''; }
.ax-accordion__item summary { list-style: none; }

.ax-accordion__trigger,
.ax-accordion__header {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-spacing-md);
  width: 100%;
  box-sizing: border-box;
  padding: var(--ax-spacing-md) var(--ax-spacing-lg);
  min-height: var(--ax-control-h);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-heading);
  background: var(--ax-background-default);
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-accordion__trigger:hover,
.ax-accordion__header:hover { background: var(--ax-background-subtle); }
.ax-accordion__trigger:focus-visible,
.ax-accordion__header:focus-visible {
  outline: var(--ax-focus-ring-width) solid var(--ax-border-focus);
  outline-offset: calc(var(--ax-focus-ring-offset) * -1);
}
/* Chevron on the right, rotates when open */
.ax-accordion__trigger::after,
.ax-accordion__header::after {
  content: '';
  width: 10px; height: 10px;
  flex-shrink: 0;
  border-right: 2px solid var(--ax-text-secondary);
  border-bottom: 2px solid var(--ax-text-secondary);
  transform: rotate(45deg);
  transition: transform var(--ax-duration-fast) var(--ax-easing-easeOut);
  margin-bottom: 4px;
}
.ax-accordion__item[open] .ax-accordion__trigger::after,
.ax-accordion__item[open] .ax-accordion__header::after {
  transform: rotate(-135deg);
  margin-bottom: -4px;
}
.ax-accordion__body {
  padding: var(--ax-spacing-md) var(--ax-spacing-lg) var(--ax-spacing-lg);
  color: var(--ax-text-default);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
  background: var(--ax-background-default);
}
.ax-accordion__body > *:first-child { margin-top: 0; }
.ax-accordion__body > *:last-child { margin-bottom: 0; }

/* ────────────────────────────────────────────────────────────
 * SKELETON · loading placeholder (no shimmer per principles)
 * ──────────────────────────────────────────────────────────── */
.ax-skeleton {
  background: var(--ax-background-subtle);
  border-radius: var(--ax-radius-sm);
  display: block;
}
.ax-skeleton--text { height: 14px; width: 100%; margin-bottom: var(--ax-spacing-sm); }
.ax-skeleton--text:last-child { width: 70%; }
.ax-skeleton--heading { height: 20px; width: 40%; margin-bottom: var(--ax-spacing-md); }
.ax-skeleton--avatar { width: 36px; height: 36px; border-radius: var(--ax-radius-full); }
.ax-skeleton--rect { height: 80px; width: 100%; border-radius: var(--ax-radius-md); }

/* ────────────────────────────────────────────────────────────
 * BANNER · full-width top notification (dismissable)
 * ──────────────────────────────────────────────────────────── */
.ax-banner {
  display: flex;
  align-items: center;
  gap: var(--ax-spacing-md);
  padding: var(--ax-spacing-md) var(--ax-spacing-xl);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  line-height: var(--ax-text-sm-line);
}
.ax-banner--info    { background: var(--ax-info-faint);    color: var(--ax-info-emphasis);    border-bottom: 1px solid var(--ax-info-muted); }
.ax-banner--warning { background: var(--ax-warning-faint); color: var(--ax-warning-emphasis); border-bottom: 1px solid var(--ax-warning-muted); }
.ax-banner--error   { background: var(--ax-error-faint);   color: var(--ax-error-emphasis);   border-bottom: 1px solid var(--ax-error-muted); }
.ax-banner--success { background: var(--ax-success-faint); color: var(--ax-success-emphasis); border-bottom: 1px solid var(--ax-success-muted); }
.ax-banner__text { flex: 1; }
.ax-banner__close {
  all: unset; cursor: pointer;
  color: inherit; opacity: 0.6;
  font-size: 18px;
  padding: 4px;
}
.ax-banner__close:hover { opacity: 1; }

/* ────────────────────────────────────────────────────────────
 * NOTIFICATION COUNTER · badge on icon/avatar
 * ──────────────────────────────────────────────────────────── */
.ax-counter-wrap { position: relative; display: inline-flex; }
.ax-counter {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-error-default);
  color: #fff;
  font-family: var(--ax-font-sans);
  font-size: 10px;
  font-weight: var(--ax-font-weight-semibold);
  display: grid; place-items: center;
  line-height: 1;
  border: 2px solid var(--ax-background-default);
}

/* ────────────────────────────────────────────────────────────
 * STEPPER · wizard steps
 * ──────────────────────────────────────────────────────────── */
.ax-stepper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
.ax-stepper__step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ax-spacing-xs);
  min-height: 24px;
  min-width: 0;
  flex: 0 1 auto;
  color: var(--ax-text-secondary);
}
.ax-stepper__step .ax-stepper__num { display: grid; }
.ax-stepper__num {
  width: 24px; height: 24px;
  border-radius: var(--ax-radius-full);
  border: var(--ax-border-width-thin) solid var(--ax-border-emphasis);
  place-items: center;
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-secondary);
  flex-shrink: 0;
}
.ax-stepper__label {
  display: block;
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-secondary);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ax-stepper__line { flex: 0 1 64px; width: 64px; height: 1px; background: var(--ax-border-default); min-width: 24px; margin: 0 var(--ax-spacing-sm); }

.ax-stepper__step.done .ax-stepper__num { background: var(--ax-primary); border-color: var(--ax-primary); color: var(--ax-brand-inverted); }
.ax-stepper__step.done .ax-stepper__label { color: var(--ax-text-heading); }
.ax-stepper__step.done + .ax-stepper__line { background: var(--ax-primary); }

.ax-stepper__step.active .ax-stepper__num { border-color: var(--ax-primary); color: var(--ax-primary); background: var(--ax-brand-faint); }
.ax-stepper__step.active .ax-stepper__label { color: var(--ax-text-heading); font-weight: var(--ax-font-weight-medium); }

.ax-stepper__step.error .ax-stepper__num { background: var(--ax-error-default); border-color: var(--ax-error-default); color: var(--ax-error-inverted); }
.ax-stepper__step.error .ax-stepper__label { color: var(--ax-error-emphasis); }

.ax-stepper__step.disabled .ax-stepper__num { opacity: var(--ax-opacity-disabled); }
.ax-stepper__step.disabled .ax-stepper__label { color: var(--ax-text-disabled); }

/* Vertical variant */
.ax-stepper--vertical { flex-direction: column; align-items: stretch; gap: 0; }
.ax-stepper--vertical .ax-stepper__step {
  flex-direction: row;
  align-items: flex-start;
  padding-bottom: var(--ax-spacing-lg);
  position: relative;
}
.ax-stepper--vertical .ax-stepper__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--ax-border-default);
}
.ax-stepper--vertical .ax-stepper__step.done:not(:last-child)::after { background: var(--ax-primary); }
.ax-stepper--vertical .ax-stepper__content {
  padding-inline-start: var(--ax-spacing-md);
  flex: 1;
}
.ax-stepper--vertical .ax-stepper__line { display: none; }

/* ────────────────────────────────────────────────────────────
 * TIMELINE · vertical event log
 * ──────────────────────────────────────────────────────────── */
.ax-timeline { display: flex; flex-direction: column; gap: 0; padding-left: var(--ax-spacing-xl); position: relative; }
.ax-timeline::before { content: ''; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; background: var(--ax-border-default); }
.ax-timeline__item { position: relative; padding: 0 0 var(--ax-spacing-xl) var(--ax-spacing-lg); }
.ax-timeline__item:last-child { padding-bottom: 0; }
.ax-timeline__dot {
  position: absolute;
  left: calc(var(--ax-spacing-xl) * -1 + 3px);
  top: 4px;
  width: 16px; height: 16px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-background-default);
  border: var(--ax-border-width-thick) solid var(--ax-border-emphasis);
  z-index: 1;
}
.ax-timeline__item.done .ax-timeline__dot { background: var(--ax-success-default); border-color: var(--ax-success-default); }
.ax-timeline__item.active .ax-timeline__dot { background: var(--ax-primary); border-color: var(--ax-primary); box-shadow: 0 0 0 4px var(--ax-brand-faint); }
.ax-timeline__item.warning .ax-timeline__dot { background: var(--ax-warning-default); border-color: var(--ax-warning-default); }
.ax-timeline__item.error .ax-timeline__dot { background: var(--ax-error-default); border-color: var(--ax-error-default); }
.ax-timeline__time { font-size: var(--ax-text-xs-size); color: var(--ax-text-secondary); font-family: var(--ax-font-mono); }
.ax-timeline__title { font-size: var(--ax-text-sm-size); font-weight: var(--ax-font-weight-medium); color: var(--ax-text-heading); margin: 2px 0; }
.ax-timeline__desc { font-size: var(--ax-text-sm-size); color: var(--ax-text-default); }

/* Density variants */
.ax-timeline--dense .ax-timeline__item { padding-bottom: var(--ax-spacing-md); }
.ax-timeline--relaxed .ax-timeline__item { padding-bottom: calc(var(--ax-spacing-2xl) + var(--ax-spacing-md)); }

/* Icon dot — replace circle with named SVG slot */
.ax-timeline__icon {
  position: absolute;
  left: calc(var(--ax-spacing-xl) * -1 + 3px);
  top: 4px;
  width: 24px; height: 24px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-background-default);
  border: var(--ax-border-width-thick) solid var(--ax-border-emphasis);
  display: grid; place-items: center;
  color: var(--ax-text-secondary);
  z-index: 1;
}
.ax-timeline__icon svg { width: 12px; height: 12px; }
.ax-timeline__item.done .ax-timeline__icon    { background: var(--ax-success-faint); border-color: var(--ax-success-default); color: var(--ax-success-emphasis); }
.ax-timeline__item.active .ax-timeline__icon  { background: var(--ax-brand-faint); border-color: var(--ax-primary); color: var(--ax-brand-emphasis); }
.ax-timeline__item.warning .ax-timeline__icon { background: var(--ax-warning-faint); border-color: var(--ax-warning-default); color: var(--ax-warning-emphasis); }
.ax-timeline__item.error .ax-timeline__icon   { background: var(--ax-error-faint); border-color: var(--ax-error-default); color: var(--ax-error-emphasis); }
.ax-timeline:has(.ax-timeline__icon) { padding-left: calc(var(--ax-spacing-xl) + 4px); }
.ax-timeline:has(.ax-timeline__icon)::before { left: 14px; }

/* Alternate-side layout (event log spreading left/right of rail) */
.ax-timeline--alternate {
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: 0 var(--ax-spacing-lg);
  row-gap: var(--ax-spacing-xl);
  align-items: start;
}
.ax-timeline--alternate::before {
  position: static;
  grid-column: 2;
  grid-row: 1 / -1;
  height: auto;
  width: 2px;
}
.ax-timeline--alternate .ax-timeline__item {
  padding: 0;
  grid-column: 1;
  text-align: end;
}
.ax-timeline--alternate .ax-timeline__item:nth-child(even) {
  grid-column: 3;
  text-align: start;
}
.ax-timeline--alternate .ax-timeline__dot,
.ax-timeline--alternate .ax-timeline__icon {
  position: absolute;
  left: auto;
  inset-inline-end: calc(var(--ax-spacing-lg) * -1 - 8px);
  top: 0;
}
.ax-timeline--alternate .ax-timeline__item:nth-child(even) .ax-timeline__dot,
.ax-timeline--alternate .ax-timeline__item:nth-child(even) .ax-timeline__icon {
  inset-inline-end: auto;
  inset-inline-start: calc(var(--ax-spacing-lg) * -1 - 8px);
}
@media (max-width: 640px) {
  .ax-timeline--alternate {
    grid-template-columns: 24px 1fr;
    padding-left: var(--ax-spacing-md);
  }
  .ax-timeline--alternate::before { grid-column: 1; }
  .ax-timeline--alternate .ax-timeline__item,
  .ax-timeline--alternate .ax-timeline__item:nth-child(even) {
    grid-column: 2;
    text-align: start;
  }
}

/* ────────────────────────────────────────────────────────────
 * FILE UPLOAD · dropzone
 * ──────────────────────────────────────────────────────────── */
.ax-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ax-spacing-sm);
  padding: var(--ax-spacing-2xl);
  border: 2px dashed var(--ax-border-default);
  border-radius: var(--ax-radius-lg);
  background: var(--ax-background-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ax-duration-fast) var(--ax-easing-easeOut),
              background var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-upload:hover,
.ax-upload[data-drag='true'] {
  border-color: var(--ax-primary);
  background: var(--ax-brand-faint);
}
.ax-upload:focus-visible {
  outline: var(--ax-focus-ring-width) solid var(--ax-border-focus);
  outline-offset: var(--ax-focus-ring-offset);
}
.ax-upload--error {
  border-color: var(--ax-error-default);
  background: var(--ax-error-faint);
}
.ax-upload--error .ax-upload__icon { color: var(--ax-error-default); }
.ax-upload--success {
  border-color: var(--ax-success-default);
  background: var(--ax-success-faint);
}
.ax-upload--disabled,
.ax-upload[aria-disabled='true'] {
  opacity: var(--ax-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ax-upload__icon { font-size: 28px; color: var(--ax-text-subtle); }
.ax-upload__title { font-size: var(--ax-text-sm-size); font-weight: var(--ax-font-weight-medium); color: var(--ax-text-heading); }
.ax-upload__title .ax-link { font-weight: var(--ax-font-weight-semibold); }
.ax-upload__hint { font-size: var(--ax-text-xs-size); color: var(--ax-text-secondary); }

/* File list below dropzone — one row per uploaded/queued file */
.ax-upload-list {
  display: flex;
  flex-direction: column;
  gap: var(--ax-spacing-xs);
  margin-top: var(--ax-spacing-md);
}
.ax-upload-item {
  display: grid;
  grid-template-columns: var(--ax-control-h-sm) 1fr auto;
  gap: var(--ax-control-gap);
  align-items: center;
  padding: var(--ax-spacing-sm) var(--ax-spacing-md);
  background: var(--ax-background-default);
  border: 1px solid var(--ax-border-subtle);
  border-radius: var(--ax-radius-md);
  font-family: var(--ax-font-sans);
}
.ax-upload-item__icon {
  width: var(--ax-control-h-sm); height: var(--ax-control-h-sm);
  background: var(--ax-background-subtle);
  border-radius: var(--ax-radius-sm);
  display: grid; place-items: center;
  color: var(--ax-text-secondary);
  font-size: var(--ax-control-icon);
}
.ax-upload-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ax-upload-item__name {
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-heading);
  font-weight: var(--ax-font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax-upload-item__meta {
  font-size: var(--ax-text-xs-size);
  color: var(--ax-text-secondary);
  display: flex; gap: var(--ax-spacing-sm);
  font-variant-numeric: tabular-nums;
}
.ax-upload-item__progress {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--ax-background-muted);
  border-radius: var(--ax-radius-full);
  overflow: hidden;
  margin-top: var(--ax-spacing-xs);
}
.ax-upload-item__progress-bar {
  height: 100%;
  background: var(--ax-primary);
  border-radius: var(--ax-radius-full);
  transition: width var(--ax-duration-normal) var(--ax-easing-easeOut);
}
.ax-upload-item--error  { border-color: var(--ax-error-default); background: var(--ax-error-faint); }
.ax-upload-item--error  .ax-upload-item__progress-bar { background: var(--ax-error-default); }
.ax-upload-item--success { border-color: var(--ax-success-default); }
.ax-upload-item--success .ax-upload-item__progress-bar { background: var(--ax-success-default); }
.ax-upload-item__remove {
  all: unset; cursor: pointer;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--ax-radius-sm);
  color: var(--ax-text-secondary);
}
.ax-upload-item__remove:hover { background: var(--ax-error-faint); color: var(--ax-error-default); }

/* JS contract: consumer handles dragenter/leave (sets [data-drag=true]),
   file picker, progress per file (sets .ax-upload-item__progress-bar width),
   and success/error state class on .ax-upload-item. */

/* ════════════════════════════════════════════════════════════════
 * Components below mirror aegisx-ui library structure.
 * See: aegisx-starter-1/libs/aegisx-ui/src/lib/components/*
 * ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
 * KBD · keyboard shortcut badge
 * ──────────────────────────────────────────────────────────── */
.ax-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-family: var(--ax-font-mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--ax-text-default);
  background: var(--ax-background-muted);
  border: var(--ax-border-width-thin) solid var(--ax-border-default);
  border-bottom-width: 2px;
  border-radius: var(--ax-radius-xs);
}

/* ────────────────────────────────────────────────────────────
 * DRAWER  ·  mat-drawer / mat-bottom-sheet · slide-out panel
 * ──────────────────────────────────────────────────────────── */
.ax-drawer {
  position: fixed;
  top: 0; bottom: 0;
  inset-inline-end: 0;
  width: 420px; max-width: 90vw;
  background: var(--ax-background-default);
  border-inline-start: var(--ax-border-width-thin) solid var(--ax-border-default);
  box-shadow: var(--ax-elevation-3);
  z-index: var(--ax-z-overlay);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--ax-duration-normal) var(--ax-easing-easeOut);
}
.ax-drawer[data-open='true'],
.ax-drawer.is-open { transform: translateX(0); }
/* Left-side drawer variant */
.ax-drawer--start {
  inset-inline-end: auto;
  inset-inline-start: 0;
  border-inline-start: 0;
  border-inline-end: var(--ax-border-width-thin) solid var(--ax-border-default);
  transform: translateX(-100%);
}
.ax-drawer--start[data-open='true'],
.ax-drawer--start.is-open { transform: translateX(0); }
/* Bottom drawer (use .ax-bottom-sheet for mobile patterns) */
.ax-drawer--bottom {
  inset-inline: 0;
  top: auto; bottom: 0;
  width: 100%; max-width: none;
  max-height: 80vh;
  border: 0;
  border-top: var(--ax-border-width-thin) solid var(--ax-border-default);
  border-top-left-radius: var(--ax-radius-xl);
  border-top-right-radius: var(--ax-radius-xl);
  transform: translateY(100%);
}
.ax-drawer--bottom[data-open='true'],
.ax-drawer--bottom.is-open { transform: translateY(0); }
.ax-drawer--bottom::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 4px;
  background: var(--ax-border-emphasis);
  border-radius: var(--ax-radius-full);
  cursor: grab;
}
.ax-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ax-spacing-lg) var(--ax-spacing-xl);
  border-bottom: var(--ax-border-width-thin) solid var(--ax-border-default);
}
.ax-drawer__title { margin: 0; font-size: var(--ax-text-lg-size); font-weight: var(--ax-font-weight-semibold); color: var(--ax-text-heading); }
.ax-drawer__close {
  all: unset; cursor: pointer;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--ax-radius-sm);
  color: var(--ax-text-secondary);
}
.ax-drawer__close:hover { background: var(--ax-background-subtle); color: var(--ax-text-heading); }
.ax-drawer__body { flex: 1; padding: var(--ax-spacing-xl); overflow-y: auto; }
.ax-drawer__footer { padding: var(--ax-spacing-md) var(--ax-spacing-xl); border-top: var(--ax-border-width-thin) solid var(--ax-border-default); display: flex; gap: var(--ax-spacing-sm); justify-content: flex-end; }

/* Width variants */
.ax-drawer--sm { width: 320px; }
.ax-drawer--md { width: 420px; }
.ax-drawer--lg { width: 560px; }
.ax-drawer--xl { width: 720px; }

/* JS contract: consumer toggles [data-open='true'] + overlays .ax-scrim
   behind drawer, listens for swipe gesture on bottom drawer handle. */

/* ────────────────────────────────────────────────────────────
 * PAGE HEADER · title + breadcrumb + actions bar
 * ──────────────────────────────────────────────────────────── */
.ax-page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--ax-spacing-md);
  padding-bottom: var(--ax-spacing-xl);
  border-bottom: var(--ax-border-width-thin) solid var(--ax-border-default);
  margin-bottom: var(--ax-spacing-xl);
}
.ax-page-header__left { display: flex; flex-direction: column; gap: var(--ax-spacing-xs); min-width: 0; }
.ax-page-header__title { margin: 0; font-size: var(--ax-display-xs-size); line-height: var(--ax-display-xs-line); font-weight: var(--ax-font-weight-semibold); color: var(--ax-text-heading); }
.ax-page-header__desc { margin: 0; font-size: var(--ax-text-sm-size); color: var(--ax-text-secondary); }
.ax-page-header__actions { display: flex; gap: var(--ax-spacing-sm); align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .ax-page-header { flex-direction: column; align-items: stretch; gap: var(--ax-spacing-md); }
  .ax-page-header__title { font-size: var(--ax-text-xl-size); line-height: var(--ax-text-xl-line); }
  .ax-page-header__actions { width: 100%; }
  .ax-page-header__actions .ax-button { flex: 1; }
}

/* ────────────────────────────────────────────────────────────
 * PAGE SHELL · sidebar + topbar + content layout
 * ──────────────────────────────────────────────────────────── */
.ax-shell { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; }
.ax-shell__sidebar { /* use .ax-sidenav inside */ }
.ax-shell__main { display: flex; flex-direction: column; }
.ax-shell__topbar {
  display: flex; align-items: center; gap: var(--ax-spacing-lg);
  padding: var(--ax-spacing-md) var(--ax-spacing-xl);
  background: var(--ax-background-default);
  border-bottom: var(--ax-border-width-thin) solid var(--ax-border-default);
}
.ax-shell__content { flex: 1; padding: var(--ax-spacing-xl); background: var(--ax-background-page); }
@media (max-width: 1023px) {
  .ax-shell { grid-template-columns: 1fr; }
  .ax-shell__sidebar { display: none; }
  .ax-shell__sidebar.is-open {
    display: block;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--ax-z-overlay);
    width: 280px;
    max-width: 85vw;
    box-shadow: var(--ax-shadow-lg);
  }
}
@media (max-width: 640px) {
  .ax-shell__content { padding: var(--ax-spacing-lg) var(--ax-spacing-md); }
  .ax-shell__topbar { padding: var(--ax-spacing-sm) var(--ax-spacing-md); gap: var(--ax-spacing-sm); }
}

/* ────────────────────────────────────────────────────────────
 * NAVBAR · enterprise-grade top nav (extracted from aegisx-ui)
 * 3-zone layout: start | center | end
 * Variants: bordered, solid, transparent, blur, sm/lg, color-*
 * ──────────────────────────────────────────────────────────── */
.ax-navbar {
  /* Height respects Tweaks density: compact 48 · default 56 · spacious 64 */
  --ax-navbar-height: calc(var(--ax-control-h) + 16px);
  --ax-navbar-bg: var(--ax-background-default);
  --ax-navbar-text: var(--ax-text-default);
  --ax-navbar-text-muted: var(--ax-text-secondary);
  --ax-navbar-hover-bg: var(--ax-background-subtle);
  --ax-navbar-active-bg: var(--ax-brand-faint);
  --ax-navbar-active-color: var(--ax-primary);
  display: flex; flex-direction: column; width: 100%;
  background: var(--ax-navbar-bg);
  color: var(--ax-navbar-text);
  transition: all var(--ax-duration-normal) var(--ax-easing-easeOut);
}
/* Position */
.ax-navbar--fixed { position: fixed; top: 0; left: 0; right: 0; z-index: var(--ax-z-sticky); }
.ax-navbar--sticky { position: sticky; top: 0; z-index: var(--ax-z-sticky); }
/* Visual */
.ax-navbar--bordered { border-bottom: 1px solid var(--ax-border-default); }
.ax-navbar--shadow { box-shadow: var(--ax-shadow-sm); }
.ax-navbar--transparent { background: transparent; }
.ax-navbar--blur { background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* Size */
.ax-navbar--sm { --ax-navbar-height: 48px; }
.ax-navbar--lg { --ax-navbar-height: 64px; }
/* Solid color variant */
.ax-navbar--solid {
  --ax-navbar-bg: var(--ax-primary);
  --ax-navbar-text: #fff;
  --ax-navbar-text-muted: rgba(255,255,255,0.8);
  --ax-navbar-hover-bg: rgba(255,255,255,0.15);
  --ax-navbar-active-bg: rgba(255,255,255,0.25);
  --ax-navbar-active-color: #fff;
}
.ax-navbar--color-charcoal { --ax-navbar-bg: var(--ax-color-zinc-900); --ax-navbar-text: #fff; --ax-navbar-text-muted: rgba(255,255,255,0.8); }
.ax-navbar--color-ocean    { --ax-navbar-bg: #0369a1; --ax-navbar-text: #fff; --ax-navbar-text-muted: rgba(255,255,255,0.8); }
/* Hidden (scroll-away) */
.ax-navbar--hidden { transform: translateY(-100%); }

/* Container — 3-zone layout */
.ax-navbar__container {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--ax-navbar-height);
  padding: 0 var(--ax-spacing-lg);
  max-width: 1400px; margin: 0 auto; width: 100%;
  gap: var(--ax-spacing-md);
}
.ax-navbar__start { display: flex; align-items: center; gap: var(--ax-spacing-md); flex-shrink: 0; }
.ax-navbar__center { display: flex; align-items: center; flex: 1; gap: var(--ax-spacing-sm); }
.ax-navbar__center--start { justify-content: flex-start; }
.ax-navbar__end { display: flex; align-items: center; gap: var(--ax-spacing-sm); flex-shrink: 0; }

/* Brand */
.ax-navbar__brand { display: flex; align-items: center; gap: var(--ax-spacing-sm); font-weight: var(--ax-font-weight-semibold); color: inherit; }
.ax-navbar__brand img { height: 26px; }
/* Links */
.ax-navbar__link {
  color: var(--ax-navbar-text-muted);
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-medium);
  padding: 6px var(--ax-spacing-md);
  border-radius: var(--ax-radius-sm);
  transition: all var(--ax-duration-fast);
  text-decoration: none;
}
.ax-navbar__link:hover { color: var(--ax-navbar-text); background: var(--ax-navbar-hover-bg); text-decoration: none; }
.ax-navbar__link.active { color: var(--ax-navbar-active-color); background: var(--ax-navbar-active-bg); }
/* Icon button */
.ax-navbar__icon-btn {
  all: unset; cursor: pointer;
  width: 40px; height: 40px;
  border-radius: var(--ax-radius-md);
  display: grid; place-items: center;
  color: var(--ax-navbar-text-muted);
  transition: all var(--ax-duration-fast);
}
.ax-navbar__icon-btn:hover { background: var(--ax-navbar-hover-bg); color: var(--ax-navbar-text); }
.ax-navbar__icon-btn:focus-visible { outline: 2px solid var(--ax-primary); outline-offset: 2px; }
/* Mobile hamburger */
.ax-navbar__hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  width: 20px; height: 20px; gap: 4px;
}
.ax-navbar__hamburger span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 1px; transition: all var(--ax-duration-fast); }
.ax-navbar__hamburger--open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ax-navbar__hamburger--open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ax-navbar__hamburger--open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1023px) {
  .ax-navbar__center:not(.ax-navbar__drawer) { display: none; }
  .ax-navbar__hamburger { display: flex; }
}
@media (min-width: 1024px) {
  .ax-navbar__hamburger { display: none !important; }
  .ax-navbar__drawer { display: contents !important; position: static !important; background: transparent !important; box-shadow: none !important; }
}

/* Mobile drawer — slid-in panel toggled by the hamburger (consumer: aria-expanded + [data-open]) */
.ax-navbar__drawer {
  position: fixed;
  inset-inline-start: 0;
  top: var(--ax-navbar-height);
  bottom: 0;
  width: min(280px, 82vw);
  background: var(--ax-navbar-bg);
  border-inline-end: 1px solid var(--ax-border-subtle);
  box-shadow: var(--ax-shadow-lg);
  padding: var(--ax-spacing-md);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--ax-duration-normal) var(--ax-easing-easeOut);
  z-index: var(--ax-z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--ax-spacing-xs);
}
.ax-navbar__drawer[data-open='true'],
.ax-navbar__drawer.is-open { transform: translateX(0); }
.ax-navbar__drawer .ax-navbar__link {
  display: flex;
  width: 100%;
  padding: var(--ax-spacing-sm) var(--ax-spacing-md);
  border-radius: var(--ax-radius-md);
}
/* Search slot — fixed width desktop, full-row mobile */
.ax-navbar__search {
  position: relative;
  flex: 1;
  max-width: 320px;
  margin-inline: var(--ax-spacing-md);
}
.ax-navbar__search .ax-input {
  height: var(--ax-control-h-sm);
  padding-inline-start: calc(var(--ax-control-pad-x) + 20px);
  font-size: var(--ax-text-xs-size);
  background: var(--ax-navbar-hover-bg);
  border-color: transparent;
}
.ax-navbar__search .ax-input:focus {
  background: var(--ax-background-default);
}
.ax-navbar__search::before {
  content: '';
  position: absolute;
  inset-inline-start: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: currentColor;
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center / contain no-repeat;
  pointer-events: none;
}
.ax-navbar__search kbd {
  position: absolute;
  inset-inline-end: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--ax-font-mono);
  font-size: 10px;
  padding: 2px 5px;
  background: var(--ax-background-muted);
  border-radius: 3px;
  color: var(--ax-text-subtle);
  pointer-events: none;
}
@media (max-width: 640px) {
  .ax-navbar__search { display: none; }
}

/* ────────────────────────────────────────────────────────────
 * NAVIGATION (sidebar) · extracted from aegisx-ui ax-navigation
 * Supports: group/divider/spacer/item with icon+badge
 * Appearances: default, compact
 * ──────────────────────────────────────────────────────────── */
.ax-navigation { padding: var(--ax-spacing-sm) 0; }
.ax-nav-group { margin-bottom: var(--ax-spacing-sm); }
.ax-nav-group-title {
  padding: var(--ax-spacing-sm) var(--ax-spacing-md);
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ax-text-secondary);
  opacity: 0.7;
}
.ax-nav-divider { margin: var(--ax-spacing-sm) 0; border-top: 1px solid var(--ax-border-default); }
.ax-nav-spacer { flex: 1; }
.ax-nav-item {
  display: flex; align-items: center;
  padding: var(--ax-spacing-sm) var(--ax-spacing-md);
  margin: 0 var(--ax-spacing-sm);
  border-radius: var(--ax-radius-md);
  color: var(--ax-text-default);
  text-decoration: none;
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-medium);
  transition: background var(--ax-duration-fast), color var(--ax-duration-fast);
}
.ax-nav-item:hover { background: var(--ax-background-subtle); text-decoration: none; }
.ax-nav-item.active { background: var(--ax-brand-faint); color: var(--ax-primary); }
.ax-nav-item-disabled { opacity: 0.5; pointer-events: none; }
.ax-nav-item-icon { margin-right: var(--ax-spacing-sm); width: 20px; height: 20px; color: currentColor; flex-shrink: 0; }
.ax-nav-item-title { flex: 1; }
.ax-nav-item-badge {
  margin-left: var(--ax-spacing-sm);
  padding: 2px var(--ax-spacing-sm);
  font-size: var(--ax-text-xs-size);
  border-radius: var(--ax-radius-full);
}
/* Compact (icon-only sidebar) */
.ax-navigation-compact .ax-nav-item { justify-content: center; padding: var(--ax-spacing-sm); }
.ax-navigation-compact .ax-nav-item-icon { margin-right: 0; }
.ax-navigation-compact .ax-nav-item-title { display: none; }
.ax-navigation-compact .ax-nav-item-badge { position: absolute; top: 2px; right: 2px; }

/* ────────────────────────────────────────────────────────────
 * PAGE SHELL · extracted from aegisx-ui ax-page-shell
 * Consistent wrapper: breadcrumb → header → content with gaps
 * ──────────────────────────────────────────────────────────── */
.ax-page-shell { min-height: 100vh; padding-bottom: 5rem; }
.ax-page-shell-inner { max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.ax-page-shell-header { padding-top: 0.25rem; padding-bottom: 1rem; }
.ax-page-shell-header--bordered { border-bottom: 1px solid var(--ax-border-default); }

/* ────────────────────────────────────────────────────────────
 * TAB PILLS · pill-shaped variant (vs underline .ax-tabs)
 * ──────────────────────────────────────────────────────────── */
.ax-tab-pills {
  display: inline-flex;
  gap: var(--ax-spacing-xs);
  background: var(--ax-background-subtle);
  border-radius: var(--ax-radius-sm);
  padding: 3px;
}
.ax-tab-pills__item {
  all: unset; cursor: pointer;
  padding: var(--ax-spacing-xs) var(--ax-spacing-md);
  border-radius: var(--ax-radius-xs);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-secondary);
  transition: all var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-tab-pills__item:hover { color: var(--ax-text-heading); }
.ax-tab-pills__item.active { background: var(--ax-background-default); color: var(--ax-text-heading); box-shadow: var(--ax-shadow-xs); }
.ax-tab-pills__item:focus-visible { outline: none; box-shadow: var(--ax-focus-ring); }

/* ────────────────────────────────────────────────────────────
 * SECTION CARD · card with a label header
 * ──────────────────────────────────────────────────────────── */
.ax-section-card { background: var(--ax-background-default); border: var(--ax-border-width-thin) solid var(--ax-border-default); border-radius: var(--ax-radius-lg); overflow: hidden; }
.ax-section-card__label {
  padding: var(--ax-spacing-md) var(--ax-spacing-xl);
  background: var(--ax-background-muted);
  border-bottom: var(--ax-border-width-thin) solid var(--ax-border-default);
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ax-tracking-widest);
}
.ax-section-card__body { padding: var(--ax-spacing-lg) var(--ax-spacing-xl); }

/* ────────────────────────────────────────────────────────────
 * SELECT CARD · selectable option card (radio-like)
 * ──────────────────────────────────────────────────────────── */
.ax-select-card {
  display: flex; gap: var(--ax-spacing-md); align-items: flex-start;
  padding: var(--ax-spacing-lg);
  background: var(--ax-background-default);
  border: var(--ax-border-width-thick) solid var(--ax-border-default);
  border-radius: var(--ax-radius-md);
  cursor: pointer;
  transition: border-color var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-select-card:hover { border-color: var(--ax-border-emphasis); }
.ax-select-card.selected { border-color: var(--ax-primary); background: var(--ax-brand-faint); }
.ax-select-card input { position: absolute; opacity: 0; }
.ax-select-card__title { font-size: var(--ax-text-sm-size); font-weight: var(--ax-font-weight-medium); color: var(--ax-text-heading); margin: 0; }
.ax-select-card__desc { font-size: var(--ax-text-sm-size); color: var(--ax-text-secondary); margin: 2px 0 0; }

/* ────────────────────────────────────────────────────────────
 * ERROR STATE · like empty state but error-themed
 * ──────────────────────────────────────────────────────────── */
.ax-error-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--ax-spacing-3xl) var(--ax-spacing-xl);
  gap: var(--ax-spacing-md);
}
.ax-error-state__icon {
  width: 48px; height: 48px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-error-faint);
  color: var(--ax-error-emphasis);
  display: grid; place-items: center;
  font-size: 20px;
}
.ax-error-state__title { margin: 0; font-size: var(--ax-text-md-size); font-weight: var(--ax-font-weight-semibold); color: var(--ax-text-heading); }
.ax-error-state__desc { margin: 0; font-size: var(--ax-text-sm-size); color: var(--ax-text-secondary); max-width: 360px; }
.ax-error-state__code { font-family: var(--ax-font-mono); font-size: var(--ax-text-xs-size); color: var(--ax-text-subtle); }

/* ────────────────────────────────────────────────────────────
 * LOADING BUTTON · button with inline spinner
 * ──────────────────────────────────────────────────────────── */
.ax-button.ax-button--loading { pointer-events: none; opacity: 0.75; }
.ax-button.ax-button--loading .ax-spinner { border-top-color: currentColor; border-color: currentColor; border-top-color: transparent; }

/* ────────────────────────────────────────────────────────────
 * FORM SECTION · grouped fields with heading
 * ──────────────────────────────────────────────────────────── */
.ax-form-section { display: flex; flex-direction: column; gap: var(--ax-spacing-lg); }
.ax-form-section + .ax-form-section { padding-top: var(--ax-spacing-xl); border-top: var(--ax-border-width-thin) solid var(--ax-border-default); }
.ax-form-section__head { display: flex; flex-direction: column; gap: 2px; }
.ax-form-section__title { margin: 0; font-size: var(--ax-text-md-size); font-weight: var(--ax-font-weight-semibold); color: var(--ax-text-heading); }
.ax-form-section__desc { margin: 0; font-size: var(--ax-text-sm-size); color: var(--ax-text-secondary); }
.ax-form-section__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ax-spacing-lg); }

/* ────────────────────────────────────────────────────────────
 * OTP INPUT · digit box grid
 * ──────────────────────────────────────────────────────────── */
.ax-otp {
  display: inline-flex;
  gap: var(--ax-spacing-sm);
}
.ax-otp__digit {
  width: 44px; height: 48px;
  text-align: center;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-text-xl-size);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-heading);
  background: var(--ax-input-bg);
  border: var(--ax-border-width-thin) solid var(--ax-input-border);
  border-radius: var(--ax-radius-md);
  transition: border-color var(--ax-duration-fast) var(--ax-easing-easeOut),
              box-shadow var(--ax-duration-fast) var(--ax-easing-easeOut);
  caret-color: var(--ax-primary);
}
.ax-otp__digit:hover { border-color: var(--ax-input-border-hover); }
.ax-otp__digit:focus,
.ax-otp__digit:focus-visible {
  outline: none;
  border-color: var(--ax-input-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ax-primary) 25%, transparent);
}
.ax-otp__digit:disabled {
  background: var(--ax-input-bg-disabled);
  color: var(--ax-text-disabled);
  cursor: not-allowed;
}
/* Filled digit indicator */
.ax-otp__digit[data-filled='true'],
.ax-otp__digit:not(:placeholder-shown) { border-color: var(--ax-border-emphasis); }
/* Error state — wrap .ax-otp with aria-invalid or .ax-otp--error */
.ax-otp--error .ax-otp__digit,
.ax-otp[aria-invalid='true'] .ax-otp__digit {
  border-color: var(--ax-error-default);
  color: var(--ax-error-emphasis);
}
.ax-otp--error .ax-otp__digit:focus,
.ax-otp[aria-invalid='true'] .ax-otp__digit:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ax-error-default) 25%, transparent);
}
/* Success state after valid confirmation */
.ax-otp--success .ax-otp__digit {
  border-color: var(--ax-success-default);
  color: var(--ax-success-emphasis);
}
/* Separator (e.g. between 3+3 groups) */
.ax-otp__separator {
  display: inline-flex;
  align-items: center;
  color: var(--ax-text-subtle);
  font-size: var(--ax-text-xl-size);
}
/* Size variants */
.ax-otp--sm .ax-otp__digit { width: 36px; height: 40px; font-size: var(--ax-text-lg-size); }
.ax-otp--lg .ax-otp__digit { width: 52px; height: 56px; font-size: var(--ax-display-xs-size); }

/* JS contract: consumer wires auto-advance (on input) + paste-all (on paste,
   split into digits + focus last). Use [data-filled] toggled per-digit. */

/* ────────────────────────────────────────────────────────────
 * COMMAND PALETTE · search modal (visual shell only)
 * ──────────────────────────────────────────────────────────── */
.ax-command {
  background: var(--ax-background-default);
  border: var(--ax-border-width-thin) solid var(--ax-border-default);
  border-radius: var(--ax-radius-lg);
  box-shadow: var(--ax-elevation-3);
  max-width: 560px; width: 100%;
  overflow: hidden;
}
.ax-command__input {
  display: flex; align-items: center; gap: var(--ax-spacing-md);
  padding: var(--ax-spacing-md) var(--ax-spacing-xl);
  border-bottom: var(--ax-border-width-thin) solid var(--ax-border-default);
}
.ax-command__input input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--ax-font-sans); font-size: var(--ax-text-md-size);
  color: var(--ax-text-heading);
}
.ax-command__input input::placeholder { color: var(--ax-text-subtle); }
.ax-command__input .ax-kbd { margin-left: auto; }
.ax-command__list { padding: var(--ax-spacing-xs) 0; max-height: 320px; overflow-y: auto; }
.ax-command__item {
  display: flex; align-items: center; gap: var(--ax-spacing-md);
  padding: var(--ax-spacing-sm) var(--ax-spacing-xl);
  font-size: var(--ax-text-sm-size); color: var(--ax-text-default);
  cursor: pointer; transition: background var(--ax-duration-fast);
}
.ax-command__item:hover,
.ax-command__item:focus-visible,
.ax-command__item.highlighted,
.ax-command__item[aria-selected='true'] {
  background: var(--ax-background-subtle);
  outline: none;
}
.ax-command__item[aria-selected='true'] {
  background: var(--ax-brand-faint);
  color: var(--ax-brand-emphasis);
}
.ax-command__item .ax-kbd { margin-left: auto; }
.ax-command__item-icon { width: var(--ax-control-icon); height: var(--ax-control-icon); color: var(--ax-text-secondary); flex-shrink: 0; }
.ax-command__item-desc { margin-left: auto; font-size: var(--ax-text-xs-size); color: var(--ax-text-subtle); }
.ax-command__item[aria-disabled='true'] { opacity: var(--ax-opacity-disabled); cursor: not-allowed; }

/* Match highlight — wrap query hit in <mark> */
.ax-command__item mark,
.ax-command__item .ax-match {
  background: var(--ax-warning-faint);
  color: var(--ax-warning-emphasis);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: var(--ax-font-weight-semibold);
}

/* Section/group heading — paired with .ax-command__list grouping */
.ax-command__group-title {
  padding: var(--ax-spacing-sm) var(--ax-spacing-xl) var(--ax-spacing-xs);
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ax-tracking-wide);
  font-family: var(--ax-font-mono);
}

/* Empty state inside palette */
.ax-command__empty {
  padding: var(--ax-spacing-xl);
  text-align: center;
  color: var(--ax-text-subtle);
  font-size: var(--ax-text-sm-size);
}

.ax-command__footer {
  padding: var(--ax-spacing-sm) var(--ax-spacing-xl);
  border-top: var(--ax-border-width-thin) solid var(--ax-border-subtle);
  font-size: var(--ax-text-xs-size);
  color: var(--ax-text-secondary);
  display: flex;
  gap: var(--ax-spacing-lg);
  align-items: center;
}
.ax-command__footer-hint { display: inline-flex; align-items: center; gap: var(--ax-spacing-xs); }

/* ────────────────────────────────────────────────────────────
 * LAUNCHER CARD · app module launcher (diamond icon compatible)
 * ──────────────────────────────────────────────────────────── */
.ax-launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--ax-spacing-md); }
.ax-launcher-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--ax-spacing-sm);
  padding: var(--ax-spacing-xl) var(--ax-spacing-lg);
  background: var(--ax-background-default);
  border: var(--ax-border-width-thin) solid var(--ax-border-default);
  border-radius: var(--ax-radius-lg);
  text-align: center; cursor: pointer;
  transition: all var(--ax-duration-fast) var(--ax-easing-easeOut);
  text-decoration: none;
}
.ax-launcher-card:hover { border-color: var(--ax-primary); transform: translateY(-2px); box-shadow: var(--ax-shadow-sm); text-decoration: none; }
.ax-launcher-card:focus-visible { outline: none; box-shadow: var(--ax-focus-ring); }
.ax-launcher-card__icon { width: 44px; height: 44px; border-radius: var(--ax-radius-md); display: grid; place-items: center; }
.ax-launcher-card__name { font-size: var(--ax-text-sm-size); font-weight: var(--ax-font-weight-medium); color: var(--ax-text-heading); }
.ax-launcher-card__desc { font-size: var(--ax-text-xs-size); color: var(--ax-text-secondary); }

/* ────────────────────────────────────────────────────────────
 * SPLASH SCREEN · full-page loading
 * ──────────────────────────────────────────────────────────── */
.ax-splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh;
  background: var(--ax-background-page);
  gap: var(--ax-spacing-xl);
}
.ax-splash img { height: 44px; }
.ax-splash__text { font-size: var(--ax-text-sm-size); color: var(--ax-text-secondary); }

/* ────────────────────────────────────────────────────────────
 * CIRCULAR PROGRESS · CSS donut ring
 * ──────────────────────────────────────────────────────────── */
.ax-circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
}
.ax-circular svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ax-circular__track { fill: none; stroke: var(--ax-background-subtle); stroke-width: 4; }
.ax-circular__bar { fill: none; stroke: var(--ax-primary); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset var(--ax-duration-normal) var(--ax-easing-easeOut); }
.ax-circular--success .ax-circular__bar { stroke: var(--ax-success-default); }
.ax-circular--error   .ax-circular__bar { stroke: var(--ax-error-default); }
.ax-circular--warning .ax-circular__bar { stroke: var(--ax-warning-default); }
.ax-circular__label { position: absolute; font-family: var(--ax-font-mono); font-size: var(--ax-text-xs-size); font-weight: var(--ax-font-weight-semibold); color: var(--ax-text-heading); }
.ax-circular--sm { width: 32px; height: 32px; }
.ax-circular--sm .ax-circular__label { font-size: 9px; }
.ax-circular--lg { width: 72px; height: 72px; }
.ax-circular--lg .ax-circular__label { font-size: var(--ax-text-sm-size); }

/* ────────────────────────────────────────────────────────────
 * SEGMENTED PROGRESS · multi-step bar
 * ──────────────────────────────────────────────────────────── */
.ax-segmented-progress {
  display: flex;
  gap: var(--ax-spacing-xs);
  width: 100%;
}
.ax-segmented-progress__seg {
  flex: 1;
  height: 6px;
  background: var(--ax-background-subtle);
  border-radius: var(--ax-radius-full);
}
.ax-segmented-progress__seg.done { background: var(--ax-primary); }
.ax-segmented-progress__seg.active { background: var(--ax-primary-light); }
.ax-segmented-progress--success .ax-segmented-progress__seg.done { background: var(--ax-success-default); }
.ax-segmented-progress--error   .ax-segmented-progress__seg.done { background: var(--ax-error-default); }

/* ────────────────────────────────────────────────────────────
 * LOADING BAR · top-of-page indeterminate bar
 * ──────────────────────────────────────────────────────────── */
.ax-loading-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: var(--ax-z-toast);
  overflow: hidden;
}
.ax-loading-bar__track {
  height: 100%;
  background: var(--ax-primary);
  animation: ax-loading-bar 1.6s var(--ax-easing-easeInOut) infinite;
}
@keyframes ax-loading-bar {
  0%   { transform: translateX(-100%); width: 40%; }
  50%  { transform: translateX(60%);   width: 60%; }
  100% { transform: translateX(200%);  width: 40%; }
}

/* ────────────────────────────────────────────────────────────
 * MASTER-DETAIL · list + detail split layout
 * ──────────────────────────────────────────────────────────── */
.ax-master-detail {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  min-height: 400px;
  border: var(--ax-border-width-thin) solid var(--ax-border-default);
  border-radius: var(--ax-radius-lg);
  overflow: hidden;
  background: var(--ax-background-default);
}
.ax-master-detail__list {
  border-right: var(--ax-border-width-thin) solid var(--ax-border-default);
  overflow-y: auto;
}
.ax-master-detail__list-item {
  display: flex; align-items: center; gap: var(--ax-spacing-md);
  padding: var(--ax-spacing-md) var(--ax-spacing-lg);
  border-bottom: var(--ax-border-width-thin) solid var(--ax-border-subtle);
  cursor: pointer;
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut);
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-default);
}
.ax-master-detail__list-item:hover { background: var(--ax-background-muted); }
.ax-master-detail__list-item.active { background: var(--ax-brand-faint); border-left: 3px solid var(--ax-primary); }
.ax-master-detail__detail { padding: var(--ax-spacing-xl); overflow-y: auto; }

/* ────────────────────────────────────────────────────────────
 * LIST · generic styled list
 * ──────────────────────────────────────────────────────────── */
.ax-list {
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
}
.ax-list__item {
  display: flex; align-items: center; gap: var(--ax-spacing-md);
  padding: var(--ax-spacing-sm) var(--ax-spacing-md);
  min-height: calc(var(--ax-control-h) + 8px);
  color: var(--ax-text-default);
  /* No outer / row border by default — matches <mat-list> which uses
     explicit <mat-divider> between items. Opt into dividers via
     .ax-list--dividers modifier. */
}
.ax-list__item:hover { background: var(--ax-background-subtle); }
.ax-list--dividers .ax-list__item + .ax-list__item { border-top: var(--ax-border-width-thin) solid var(--ax-border-subtle); }
.ax-list--bordered { border: var(--ax-border-width-thin) solid var(--ax-border-default); border-radius: var(--ax-radius-lg); overflow: hidden; }
.ax-list__item .ax-dot { margin-left: auto; }

/* ────────────────────────────────────────────────────────────
 * CODE BLOCK + TABS · syntax-highlighted code
 * ──────────────────────────────────────────────────────────── */
.ax-code-block {
  background: var(--ax-color-zinc-950);
  border-radius: var(--ax-radius-md);
  overflow: hidden;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-text-xs-size);
  line-height: 1.7;
}
.ax-code-block__tabs {
  display: flex; gap: 0;
  background: var(--ax-color-zinc-900);
  border-bottom: 1px solid var(--ax-color-zinc-800);
  padding: 0 var(--ax-spacing-md);
}
.ax-code-block__tab {
  all: unset; cursor: pointer;
  padding: var(--ax-spacing-sm) var(--ax-spacing-md);
  color: var(--ax-color-zinc-400);
  font-size: 11px;
  border-bottom: 2px solid transparent;
  transition: all var(--ax-duration-fast);
}
.ax-code-block__tab:hover { color: var(--ax-color-zinc-200); }
.ax-code-block__tab.active { color: #fff; border-bottom-color: var(--ax-primary); }
.ax-code-block__body { padding: var(--ax-spacing-lg); color: var(--ax-color-zinc-200); overflow-x: auto; white-space: pre; }
.ax-code-tag {
  display: inline-flex; padding: 1px 6px;
  font-family: var(--ax-font-mono); font-size: 10px;
  background: var(--ax-color-zinc-800); color: var(--ax-color-zinc-300);
  border-radius: var(--ax-radius-xs);
}

/* ────────────────────────────────────────────────────────────
 * IMAGE PREVIEW · preview card
 * ──────────────────────────────────────────────────────────── */
.ax-image-preview {
  position: relative;
  border-radius: var(--ax-radius-md);
  overflow: hidden;
  border: var(--ax-border-width-thin) solid var(--ax-border-default);
  background: repeating-conic-gradient(var(--ax-background-muted) 0% 25%, var(--ax-background-default) 0% 50%) 50% / 16px 16px;
}
.ax-image-preview img {
  width: 100%; height: auto; display: block;
  transition: transform var(--ax-duration-normal) var(--ax-easing-easeOut);
  transform-origin: var(--ax-image-origin-x, 50%) var(--ax-image-origin-y, 50%);
}
.ax-image-preview[data-zoom]:not([data-zoom='1']) img {
  transform: scale(var(--ax-image-zoom, 1));
  cursor: move;
}
.ax-image-preview__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity var(--ax-duration-fast) var(--ax-easing-easeOut);
  cursor: pointer;
  color: #fff; font-size: 24px;
}
.ax-image-preview:hover .ax-image-preview__overlay,
.ax-image-preview:focus-within .ax-image-preview__overlay { opacity: 1; }
.ax-image-preview__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--ax-spacing-sm) var(--ax-spacing-md);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: var(--ax-text-xs-size);
  pointer-events: none;
}
/* Toolbar (zoom in/out, reset, download) — overlays at top-right */
.ax-image-preview__toolbar {
  position: absolute;
  top: var(--ax-spacing-sm);
  inset-inline-end: var(--ax-spacing-sm);
  display: inline-flex;
  gap: var(--ax-spacing-xs);
  padding: 4px;
  background: rgba(0,0,0,0.6);
  border-radius: var(--ax-radius-md);
  opacity: 0;
  transition: opacity var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-image-preview:hover .ax-image-preview__toolbar,
.ax-image-preview:focus-within .ax-image-preview__toolbar { opacity: 1; }
.ax-image-preview__tool {
  all: unset; cursor: pointer;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: #fff;
  border-radius: var(--ax-radius-sm);
  font-size: 14px;
}
.ax-image-preview__tool:hover { background: rgba(255,255,255,0.15); }

/* Full-screen lightbox (pair .ax-scrim + .ax-image-preview--lightbox) */
.ax-image-preview--lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--ax-z-modal);
  background: rgba(0,0,0,0.92);
  border: 0;
  border-radius: 0;
  display: grid; place-items: center;
  padding: var(--ax-spacing-lg);
}
.ax-image-preview--lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto; height: auto;
  object-fit: contain;
}

/* JS contract: consumer handles zoom (writes --ax-image-zoom + [data-zoom]),
   pan (--ax-image-origin-x/y), download + keyboard arrows for lightbox. */

/* ────────────────────────────────────────────────────────────
 * FIELD DISPLAY · read-only label:value (single field)
 * ──────────────────────────────────────────────────────────── */
.ax-field-display {
  display: flex; flex-direction: column; gap: 2px;
}
.ax-field-display__label {
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ax-tracking-widest);
}
.ax-field-display__value {
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-heading);
  font-weight: var(--ax-font-weight-medium);
}
.ax-field-display__value--mono { font-family: var(--ax-font-mono); }

/* ────────────────────────────────────────────────────────────
 * NAVBAR USER · avatar + name + chevron (right side of navbar)
 * ──────────────────────────────────────────────────────────── */
.ax-navbar-user {
  display: flex; align-items: center; gap: var(--ax-spacing-sm);
  cursor: pointer;
  padding: var(--ax-spacing-xs) var(--ax-spacing-sm);
  border-radius: var(--ax-radius-sm);
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-navbar-user:hover { background: var(--ax-background-subtle); }
.ax-navbar-user__name { font-size: var(--ax-text-sm-size); font-weight: var(--ax-font-weight-medium); color: var(--ax-text-heading); }
.ax-navbar-user__role { font-size: var(--ax-text-xs-size); color: var(--ax-text-secondary); }
.ax-navbar-user__chevron { color: var(--ax-text-subtle); font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
 * Components adopted from Untitled UI React reference
 * ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
 * BUTTON GROUP  ·  mat-button-toggle-group · joined buttons
 * ──────────────────────────────────────────────────────────── */
.ax-button-group {
  display: inline-flex;
}
.ax-button-group > .ax-button {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--ax-border-default);
  margin-left: -1px;
}
.ax-button-group > .ax-button:first-child {
  border-radius: var(--ax-radius-sm) 0 0 var(--ax-radius-sm);
  margin-left: 0;
}
.ax-button-group > .ax-button:last-child {
  border-radius: 0 var(--ax-radius-sm) var(--ax-radius-sm) 0;
}
.ax-button-group > .ax-button:hover { z-index: 1; }
.ax-button-group > .ax-button:focus-visible { z-index: 2; }
.ax-button-group > .ax-button.active {
  background: var(--ax-background-subtle);
  color: var(--ax-text-heading);
  z-index: 1;
}

/* ────────────────────────────────────────────────────────────
 * SLIDER  ·  mat-slider · styled range input
 * Single-thumb native <input type=range>. For dual-thumb range use
 * .ax-slider-range (two inputs overlapped with a tracked fill div).
 * ──────────────────────────────────────────────────────────── */
.ax-slider {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  background: var(--ax-background-muted);
  border-radius: var(--ax-radius-full);
  outline: none;
  cursor: pointer;
  /* Progress fill via accent-color (native per-browser track) */
  accent-color: var(--ax-primary);
}
.ax-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--ax-background-muted);
  border-radius: var(--ax-radius-full);
}
.ax-slider::-moz-range-track {
  height: 6px;
  background: var(--ax-background-muted);
  border-radius: var(--ax-radius-full);
}
.ax-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin-top: -7px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-background-default);
  box-shadow: inset 0 0 0 2px var(--ax-primary), var(--ax-shadow-sm);
  cursor: grab;
  transition: box-shadow var(--ax-duration-fast) var(--ax-easing-easeOut), transform var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-slider::-moz-range-thumb {
  width: 20px; height: 20px; border: none;
  border-radius: var(--ax-radius-full);
  background: var(--ax-background-default);
  box-shadow: inset 0 0 0 2px var(--ax-primary), var(--ax-shadow-sm);
  cursor: grab;
}
.ax-slider::-webkit-slider-thumb:hover,
.ax-slider::-moz-range-thumb:hover {
  box-shadow: inset 0 0 0 2px var(--ax-primary-dark), var(--ax-shadow-md);
  transform: scale(1.1);
}
.ax-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.ax-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 0 0 2px var(--ax-primary), 0 0 0 var(--ax-focus-ring-offset) var(--ax-background-default), 0 0 0 calc(var(--ax-focus-ring-offset) + var(--ax-focus-ring-width)) var(--ax-border-focus);
}
.ax-slider:focus-visible::-moz-range-thumb {
  box-shadow: inset 0 0 0 2px var(--ax-primary), 0 0 0 var(--ax-focus-ring-offset) var(--ax-background-default), 0 0 0 calc(var(--ax-focus-ring-offset) + var(--ax-focus-ring-width)) var(--ax-border-focus);
}
.ax-slider:disabled { opacity: var(--ax-opacity-disabled); cursor: not-allowed; }
.ax-slider:disabled::-webkit-slider-thumb,
.ax-slider:disabled::-moz-range-thumb { cursor: not-allowed; background: var(--ax-background-muted); }

/* Tick marks — pair with datalist or separate DOM */
.ax-slider-ticks {
  display: flex; justify-content: space-between;
  margin-top: var(--ax-spacing-xs);
  padding: 0 10px; /* thumb-radius half */
}
.ax-slider-ticks span {
  width: 2px; height: 6px;
  background: var(--ax-border-default);
  border-radius: 1px;
}

/* Value label (shown on thumb or above) */
.ax-slider-label {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ax-background-emphasis);
  color: var(--ax-text-inverted);
  border-radius: var(--ax-radius-sm);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-medium);
}

/* Dual-thumb range — two inputs overlapped */
.ax-slider-range {
  position: relative;
  height: 20px;
  padding: 7px 0;
}
.ax-slider-range input[type='range'] {
  position: absolute; inset: 7px 0;
  pointer-events: none;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  width: 100%;
}
.ax-slider-range input[type='range']::-webkit-slider-thumb { pointer-events: auto; }
.ax-slider-range input[type='range']::-moz-range-thumb     { pointer-events: auto; }
.ax-slider-range__track {
  position: absolute; inset: 7px 0 auto 0;
  height: 6px;
  background: var(--ax-background-muted);
  border-radius: var(--ax-radius-full);
}
.ax-slider-range__fill {
  position: absolute; inset: 7px 0;
  height: 6px;
  background: var(--ax-primary);
  border-radius: var(--ax-radius-full);
}

/* ────────────────────────────────────────────────────────────
 * DATEPICKER  ·  mat-datepicker · calendar popover
 * Markup:
 *   <div class="ax-datepicker" role="dialog" aria-modal="true">
 *     <header class="ax-datepicker__header">
 *       <button class="ax-datepicker__nav" aria-label="Prev">‹</button>
 *       <button class="ax-datepicker__period">April 2026</button>
 *       <button class="ax-datepicker__nav" aria-label="Next">›</button>
 *     </header>
 *     <div class="ax-datepicker__weekdays"><span>Mo</span>…</div>
 *     <div class="ax-datepicker__grid" role="grid">
 *       <button class="ax-datepicker__day">1</button>
 *       <button class="ax-datepicker__day ax-datepicker__day--today">15</button>
 *       <button class="ax-datepicker__day ax-datepicker__day--selected">16</button>
 *       <button class="ax-datepicker__day ax-datepicker__day--in-range">17</button>
 *       <button class="ax-datepicker__day" disabled>18</button>
 *     </div>
 *     <footer class="ax-datepicker__footer">
 *       <button class="ax-button ax-button--ghost ax-button--sm">Clear</button>
 *       <button class="ax-button ax-button--primary ax-button--sm">Apply</button>
 *     </footer>
 *   </div>
 * ──────────────────────────────────────────────────────────── */
.ax-datepicker {
  width: 320px;
  background: var(--ax-background-default);
  border: 1px solid var(--ax-border-default);
  border-radius: var(--ax-radius-lg);
  box-shadow: var(--ax-shadow-lg);
  padding: var(--ax-spacing-md);
  font-family: var(--ax-font-sans);
  color: var(--ax-text-default);
}
.ax-datepicker__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--ax-spacing-sm);
  padding-bottom: var(--ax-spacing-sm);
  border-bottom: 1px solid var(--ax-border-subtle);
}
.ax-datepicker__period {
  all: unset;
  cursor: pointer;
  flex: 1;
  text-align: center;
  font-size: var(--ax-text-sm-size);
  font-weight: var(--ax-font-weight-semibold);
  color: var(--ax-text-heading);
  padding: var(--ax-spacing-xs) var(--ax-spacing-sm);
  border-radius: var(--ax-radius-sm);
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-datepicker__period:hover { background: var(--ax-background-subtle); }
.ax-datepicker__nav {
  all: unset;
  cursor: pointer;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ax-text-secondary);
  border-radius: var(--ax-radius-sm);
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-datepicker__nav:hover { background: var(--ax-background-subtle); color: var(--ax-text-heading); }
.ax-datepicker__nav:disabled { opacity: var(--ax-opacity-disabled); pointer-events: none; }
.ax-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--ax-spacing-xs);
}
.ax-datepicker__weekdays span {
  text-align: center;
  font-size: var(--ax-text-xs-size);
  font-weight: var(--ax-font-weight-medium);
  color: var(--ax-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ax-tracking-wide);
  padding: var(--ax-spacing-xs) 0;
}
.ax-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ax-datepicker__day {
  all: unset;
  aspect-ratio: 1;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: var(--ax-text-sm-size);
  color: var(--ax-text-default);
  border-radius: var(--ax-radius-md);
  transition: background var(--ax-duration-fast) var(--ax-easing-easeOut), color var(--ax-duration-fast) var(--ax-easing-easeOut);
  text-align: center;
}
.ax-datepicker__day:hover { background: var(--ax-background-subtle); }
.ax-datepicker__day:focus-visible { outline: var(--ax-focus-ring-width) solid var(--ax-border-focus); outline-offset: -1px; }
.ax-datepicker__day--other-month { color: var(--ax-text-disabled); }
.ax-datepicker__day--today { box-shadow: inset 0 0 0 1px var(--ax-primary); color: var(--ax-brand-emphasis); font-weight: var(--ax-font-weight-semibold); }
.ax-datepicker__day--in-range { background: var(--ax-brand-faint); border-radius: 0; color: var(--ax-brand-emphasis); }
.ax-datepicker__day--range-start,
.ax-datepicker__day--range-end { background: var(--ax-brand-faint); color: var(--ax-brand-emphasis); }
.ax-datepicker__day--range-start { border-radius: var(--ax-radius-md) 0 0 var(--ax-radius-md); }
.ax-datepicker__day--range-end   { border-radius: 0 var(--ax-radius-md) var(--ax-radius-md) 0; }
.ax-datepicker__day--selected {
  background: var(--ax-primary);
  color: var(--ax-brand-inverted);
  font-weight: var(--ax-font-weight-semibold);
  border-radius: var(--ax-radius-md);
}
.ax-datepicker__day--selected:hover { background: var(--ax-primary-dark); }
.ax-datepicker__day[disabled],
.ax-datepicker__day[aria-disabled='true'] {
  color: var(--ax-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ax-datepicker__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--ax-spacing-sm);
  margin-top: var(--ax-spacing-sm);
  padding-top: var(--ax-spacing-sm);
  border-top: 1px solid var(--ax-border-subtle);
}

/* Month-picker + year-picker variants use the same grid */
.ax-datepicker--months .ax-datepicker__grid,
.ax-datepicker--years  .ax-datepicker__grid { grid-template-columns: repeat(4, 1fr); }
.ax-datepicker--months .ax-datepicker__day,
.ax-datepicker--years  .ax-datepicker__day  { aspect-ratio: auto; min-height: calc(var(--ax-control-h-sm) + 4px); }

/* Input + toggle button pair — consumer wires the open/close toggle */
.ax-datepicker-input {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  position: relative;
}
.ax-datepicker-input .ax-input { padding-inline-end: calc(var(--ax-control-h) + 4px); }
.ax-datepicker-input__toggle {
  all: unset;
  position: absolute;
  inset-inline-end: 4px; top: 50%;
  transform: translateY(-50%);
  width: calc(var(--ax-control-h) - 8px);
  height: calc(var(--ax-control-h) - 8px);
  display: grid; place-items: center;
  color: var(--ax-text-secondary);
  cursor: pointer;
  border-radius: var(--ax-radius-sm);
}
.ax-datepicker-input__toggle:hover { color: var(--ax-text-heading); background: var(--ax-background-subtle); }
.ax-datepicker-input__toggle:focus-visible { outline: var(--ax-focus-ring-width) solid var(--ax-border-focus); }

/* ────────────────────────────────────────────────────────────
 * TAG INPUT · removable tags with inline input
 * ──────────────────────────────────────────────────────────── */
.ax-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-spacing-xs);
  padding: var(--ax-spacing-xs) var(--ax-spacing-sm);
  background: var(--ax-input-bg);
  box-shadow: inset 0 0 0 1px var(--ax-input-border);
  border-radius: var(--ax-radius-sm);
  min-height: 40px;
  align-items: center;
  cursor: text;
  transition: box-shadow var(--ax-duration-fast) var(--ax-easing-easeOut);
}
.ax-tag-input:focus-within {
  box-shadow: inset 0 0 0 1px var(--ax-input-border-focus), var(--ax-input-ring-focus);
}
.ax-tag-input__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--ax-background-subtle);
  border-radius: var(--ax-radius-xs);
  font-size: var(--ax-text-xs-size);
  color: var(--ax-text-heading);
  font-weight: var(--ax-font-weight-medium);
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
}
.ax-tag-input__remove {
  all: unset; cursor: pointer;
  width: 16px; height: 16px;
  border-radius: var(--ax-radius-full);
  display: grid; place-items: center;
  color: var(--ax-text-secondary);
  font-size: 11px;
}
.ax-tag-input__remove:hover { background: rgb(0 0 0 / 0.08); color: var(--ax-text-heading); }
.ax-tag-input input {
  flex: 1; min-width: 80px;
  border: none; outline: none;
  background: transparent;
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm-size);
  color: var(--ax-input-text);
  padding: 4px;
}
.ax-tag-input input::placeholder { color: var(--ax-input-placeholder); }

/* ────────────────────────────────────────────────────────────
 * FEATURED ICON · larger reusable icon circle (Untitled pattern)
 * ──────────────────────────────────────────────────────────── */
.ax-featured-icon {
  display: inline-grid;
  place-items: center;
  border-radius: var(--ax-radius-full);
  flex-shrink: 0;
}
.ax-featured-icon--sm { width: 32px; height: 32px; font-size: 16px; }
.ax-featured-icon--md { width: 40px; height: 40px; font-size: 20px; }
.ax-featured-icon--lg { width: 48px; height: 48px; font-size: 24px; }
.ax-featured-icon--xl { width: 56px; height: 56px; font-size: 28px; }
.ax-featured-icon--brand   { background: var(--ax-brand-faint);   color: var(--ax-brand-emphasis); }
.ax-featured-icon--success { background: var(--ax-success-faint); color: var(--ax-success-emphasis); }
.ax-featured-icon--warning { background: var(--ax-warning-faint); color: var(--ax-warning-emphasis); }
.ax-featured-icon--error   { background: var(--ax-error-faint);   color: var(--ax-error-emphasis); }
.ax-featured-icon--info    { background: var(--ax-info-faint);    color: var(--ax-info-emphasis); }
.ax-featured-icon--neutral { background: var(--ax-background-subtle); color: var(--ax-text-secondary); }
/* Outlined variant (circle ring) */
.ax-featured-icon--outlined {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor, 0 0 0 4px currentColor;
  opacity: 0.15;
}
.ax-featured-icon--outlined > * { opacity: 1; }