/* ===========================================================================
   ATBIO UI Framework / Components
   Semantic, reusable components. Legacy aliases remain during phased migration.
   =========================================================================== */

.ui-button,
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-6);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-color-ink-900);
  font: inherit;
  font-size: var(--ui-font-size-button);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform var(--ui-duration-fast) var(--ui-ease-standard), box-shadow var(--ui-duration-fast) var(--ui-ease-standard), border-color var(--ui-duration-fast) var(--ui-ease-standard), background-color var(--ui-duration-fast) var(--ui-ease-standard), color var(--ui-duration-fast) var(--ui-ease-standard);
}

.ui-button:hover,
.ui-btn:hover { transform: translateY(var(--ui-hover-lift-sm)); }
.ui-button:active,
.ui-btn:active { transform: translateY(0); }
.ui-button:focus-visible,
.ui-btn:focus-visible,
.ui-input:focus-visible,
.ui-select:focus-visible,
.ui-textarea:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.ui-button:disabled,
.ui-btn:disabled,
.ui-button[aria-disabled="true"],
.ui-btn[aria-disabled="true"] { cursor: not-allowed; opacity: var(--ui-opacity-disabled); pointer-events: none; }

.ui-button--primary,
.ui-btn--primary { background: var(--ui-color-brand-600); color: var(--ui-color-surface-0); box-shadow: var(--ui-shadow-xs); }
.ui-button--primary:hover,
.ui-btn--primary:hover { background: var(--ui-color-brand-700); box-shadow: var(--ui-shadow-sm); }
.ui-button--secondary,
.ui-btn--secondary { background: var(--ui-color-ink-900); color: var(--ui-color-surface-0); }
.ui-button--outline,
.ui-btn--outline { border-color: var(--ui-color-brand-600); background: var(--ui-color-surface-0); color: var(--ui-color-brand-700); }
.ui-button--outline:hover,
.ui-btn--outline:hover { background: var(--ui-color-brand-50); }
.ui-button--ghost,
.ui-btn--ghost { border-color: transparent; background: transparent; color: var(--ui-color-ink-700); }
.ui-button--ghost:hover,
.ui-btn--ghost:hover { background: var(--ui-color-surface-100); color: var(--ui-color-ink-900); }
.ui-button--icon,
.ui-btn--icon { width: var(--ui-control-icon-size); min-width: var(--ui-control-icon-size); padding: 0; border-radius: var(--ui-radius-pill); }
.ui-button--block,
.ui-btn--block { width: 100%; }

.ui-card {
  background: var(--ui-color-surface-0);
  border: var(--ui-border-subtle);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
}

.ui-card--product { border-radius: var(--ui-radius-md); }
.ui-card--article { border-radius: var(--ui-radius-lg); }
.ui-card--feature { border-color: var(--ui-color-brand-100); background: var(--ui-color-surface-50); box-shadow: none; }
.ui-card--cta { border-color: var(--ui-color-brand-200); background: var(--ui-color-brand-50); }
.ui-card--elevated { box-shadow: var(--ui-shadow-md); }
.ui-card--interactive { transition: transform var(--ui-duration-normal) var(--ui-ease-standard), box-shadow var(--ui-duration-normal) var(--ui-ease-standard), border-color var(--ui-duration-normal) var(--ui-ease-standard); }
.ui-card--interactive:hover { transform: translateY(var(--ui-hover-lift-md)); border-color: var(--ui-color-brand-200); box-shadow: var(--ui-shadow-md); }
.ui-card__media { display: block; overflow: hidden; }
.ui-card__body { padding: var(--ui-space-6); }
.ui-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); padding: 0 var(--ui-space-6) var(--ui-space-6); }

.ui-section-heading,
.ui-title { display: grid; gap: var(--ui-space-3); }
.ui-section-eyebrow,
.ui-title__eyebrow { color: var(--ui-color-brand-700); font-size: var(--ui-font-size-caption); font-weight: var(--ui-font-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; }
.ui-section-title,
.ui-title__heading { margin: 0; color: var(--ui-color-ink-900); font-size: var(--ui-font-size-h2); font-weight: var(--ui-font-weight-bold); line-height: var(--ui-line-height-heading); letter-spacing: var(--ui-letter-spacing-display); }
.ui-section-description,
.ui-title__desc { margin: 0; max-width: var(--ui-measure-readable); color: var(--ui-color-ink-500); font-size: var(--ui-font-size-body); line-height: var(--ui-line-height-relaxed); }

.ui-form-row { display: grid; gap: var(--ui-space-4); }
.ui-field { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.ui-label { color: var(--ui-color-ink-900); font-size: var(--ui-font-size-small); font-weight: var(--ui-font-weight-medium); }
.ui-input,
.ui-select,
.ui-textarea { width: 100%; min-height: 48px; border: 1px solid var(--ui-color-line-200); border-radius: var(--ui-radius-md); background: var(--ui-color-surface-0); color: var(--ui-color-ink-900); font: inherit; padding: var(--ui-space-3) var(--ui-space-4); transition: border-color var(--ui-duration-fast) var(--ui-ease-standard), box-shadow var(--ui-duration-fast) var(--ui-ease-standard), background-color var(--ui-duration-fast) var(--ui-ease-standard); }
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus { outline: none; border-color: var(--ui-color-brand-500); }
.ui-textarea { min-height: var(--ui-control-textarea-min-height); resize: vertical; }
.ui-field-error { color: var(--ui-color-danger); font-size: var(--ui-font-size-caption); }
.ui-field-help,
.ui-field-hint { color: var(--ui-color-ink-500); font-size: var(--ui-font-size-caption); }

.ui-tag,
.ui-badge,
.ui-status { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ui-status-min-height); padding-inline: var(--ui-space-3); border-radius: var(--ui-radius-pill); font-size: var(--ui-font-size-caption); font-weight: var(--ui-font-weight-semibold); line-height: 1; }
.ui-tag { background: var(--ui-color-brand-50); color: var(--ui-color-brand-700); }
.ui-badge { background: var(--ui-color-surface-100); color: var(--ui-color-ink-700); }
.ui-status { background: var(--ui-color-line-100); color: var(--ui-color-ink-700); }
.ui-status--success,
.ui-badge--success { background: color-mix(in srgb, var(--ui-color-success) 12%, transparent); color: var(--ui-color-success); }
.ui-status--warning { background: color-mix(in srgb, var(--ui-color-warning) 12%, transparent); color: var(--ui-color-warning); }
.ui-status--danger { background: color-mix(in srgb, var(--ui-color-danger) 12%, transparent); color: var(--ui-color-danger); }
.ui-status--info { background: color-mix(in srgb, var(--ui-color-info) 12%, transparent); color: var(--ui-color-info); }
.ui-badge--muted { background: var(--ui-color-line-100); color: var(--ui-color-ink-500); }

html:lang(ar) .ui-section-eyebrow,
html:lang(ar) .ui-title__eyebrow { letter-spacing: 0; text-transform: none; }

/* Navigation primitives are opt-in. Header/Footer keep their own DOM styling. */
.ui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); color: var(--ui-color-text-muted); font-size: var(--ui-font-size-small); }
.ui-breadcrumb__link { color: var(--ui-color-text-secondary); text-decoration: none; transition: color var(--ui-duration-fast) var(--ui-ease-standard); }
.ui-breadcrumb__link:hover { color: var(--ui-color-primary); }
.ui-breadcrumb__separator { color: var(--ui-color-ink-300); }
.ui-breadcrumb [aria-current="page"] { color: var(--ui-color-text-primary); font-weight: var(--ui-font-weight-medium); }

.ui-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.ui-pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ui-touch-target-min); min-height: var(--ui-touch-target-min); border: var(--ui-border-subtle); border-radius: var(--ui-radius-pill); background: var(--ui-color-surface); color: var(--ui-color-text-secondary); text-decoration: none; transition: border-color var(--ui-duration-fast) var(--ui-ease-standard), background-color var(--ui-duration-fast) var(--ui-ease-standard), color var(--ui-duration-fast) var(--ui-ease-standard); }
.ui-pagination__item:hover { border-color: var(--ui-color-brand-300); background: var(--ui-color-brand-50); color: var(--ui-color-primary); }
.ui-pagination__item[aria-current="page"] { border-color: var(--ui-color-primary); background: var(--ui-color-primary); color: var(--ui-color-text-inverse); }

.ui-dropdown { position: relative; }
.ui-dropdown__trigger { min-height: var(--ui-touch-target-min); }
.ui-dropdown__menu { position: absolute; z-index: var(--ui-z-dropdown); min-width: 100%; margin-top: var(--ui-space-1); padding: var(--ui-space-2); border: var(--ui-border-subtle); border-radius: var(--ui-radius-md); background: var(--ui-color-surface); box-shadow: var(--ui-shadow-floating); }
.ui-dropdown__item { display: flex; align-items: center; min-height: var(--ui-touch-target-min); padding-inline: var(--ui-space-3); border-radius: var(--ui-radius-sm); color: var(--ui-color-text-secondary); text-decoration: none; transition: background-color var(--ui-duration-fast) var(--ui-ease-standard), color var(--ui-duration-fast) var(--ui-ease-standard); }
.ui-dropdown__item:hover,
.ui-dropdown__item:focus-visible { background: var(--ui-color-brand-50); color: var(--ui-color-primary); }

.ui-search { display: flex; align-items: center; gap: var(--ui-space-2); }
.ui-search__input { flex: 1; min-width: 0; }
.ui-dialog { position: fixed; inset: 0; z-index: var(--ui-z-dialog); display: grid; place-items: center; padding: var(--ui-space-4); }
.ui-overlay { position: fixed; inset: 0; z-index: var(--ui-z-overlay); background: var(--ui-color-overlay-scrim); }
.ui-dialog__panel { position: relative; z-index: var(--ui-z-dialog); width: min(100%, var(--ui-container-narrow)); max-height: calc(100dvh - (var(--ui-space-8) * 2)); overflow: auto; border-radius: var(--ui-radius-lg); background: var(--ui-color-surface); box-shadow: var(--ui-shadow-lg); animation: var(--ui-animation-slide-up); }
.ui-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--ui-z-drawer); width: min(100%, var(--ui-drawer-max-width)); overflow: auto; background: var(--ui-color-surface); box-shadow: var(--ui-shadow-lg); animation: var(--ui-animation-slide-up); }
.ui-toast-region { position: fixed; inset-inline-end: var(--ui-space-4); inset-block-end: var(--ui-space-4); z-index: var(--ui-z-toast); display: grid; gap: var(--ui-space-3); width: min(calc(100% - (var(--ui-space-8))), var(--ui-toast-max-width)); }
.ui-toast { padding: var(--ui-space-4); border: var(--ui-border-subtle); border-radius: var(--ui-radius-md); background: var(--ui-color-surface); box-shadow: var(--ui-shadow-floating); animation: var(--ui-animation-fade-in); }
.ui-loading { display: inline-flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-color-text-secondary); font-size: var(--ui-font-size-small); }
.ui-loading::before { width: var(--ui-spinner-size); height: var(--ui-spinner-size); border: var(--ui-border-width) solid var(--ui-color-brand-200); border-top-color: var(--ui-color-primary); border-radius: var(--ui-radius-pill); content: ""; animation: var(--ui-animation-spin); }
.ui-image { display: block; max-width: 100%; height: auto; }
.ui-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--ui-icon-size-current); height: var(--ui-icon-size-current); }

@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-slide-up { from { opacity: 0; transform: translateY(var(--ui-space-2)); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .ui-card--interactive,
  .ui-button,
  .ui-btn,
  .ui-breadcrumb__link,
  .ui-pagination__item,
  .ui-dropdown__item { transition-duration: var(--ui-duration-reduced); }
  .ui-dialog__panel,
  .ui-drawer,
  .ui-toast,
  .ui-loading::before { animation-duration: var(--ui-duration-reduced); animation-iteration-count: 1; }
}