/* ============================================================
   Riestro · shared/ui/* primitive styles
   ------------------------------------------------------------
   Token-driven. Class-name prefix .ui-* (BEM modifiers with --).
   Loaded after modernize.css per
   migration/css-token-migration.md "Load order is the contract".

   Created by: Phase 6 — first controlled extraction (notifications).
   Each primitive in this file has a real consumer in the current
   migration phase. Speculative primitives are not added here.
   ============================================================ */

/* ---------- Typography / Heading ---------- */

.ui-heading {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.ui-heading--display {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.ui-heading--page {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.ui-heading--section {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.ui-heading--subsection {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.ui-heading--tone-primary { color: var(--color-text-primary); }
.ui-heading--tone-secondary { color: var(--color-text-secondary); }
.ui-heading--tone-tertiary { color: var(--color-text-tertiary); }

/* Optional icon slot — expresses the design's [icon] [H2] section
   rhythm primitive without forcing consumers to render the icon
   outside the heading. */
.ui-heading--with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-heading__icon {
  color: var(--color-text-tertiary);
  font-size: 0.9em;
  line-height: 1;
  flex-shrink: 0;
}

.ui-heading__text {
  min-width: 0;
}

/* ---------- Typography / Text ---------- */

.ui-text {
  font-family: var(--font-sans);
  margin: 0;
  color: var(--color-text-primary);
}

.ui-text--xs { font-size: var(--font-size-xs); }
.ui-text--sm { font-size: var(--font-size-sm); }
.ui-text--md { font-size: var(--font-size-md); }
.ui-text--lg { font-size: var(--font-size-lg); }
.ui-text--xl { font-size: var(--font-size-xl); }

.ui-text--tone-primary   { color: var(--color-text-primary); }
.ui-text--tone-secondary { color: var(--color-text-secondary); }
.ui-text--tone-tertiary  { color: var(--color-text-tertiary); }
.ui-text--tone-danger    { color: var(--color-danger); }
.ui-text--tone-success   { color: var(--color-success); }

.ui-text--weight-regular  { font-weight: var(--font-weight-regular); }
.ui-text--weight-medium   { font-weight: var(--font-weight-medium); }
.ui-text--weight-semibold { font-weight: var(--font-weight-semibold); }
.ui-text--weight-bold     { font-weight: var(--font-weight-bold); }

.ui-text--leading-tight   { line-height: var(--line-height-tight); }
.ui-text--leading-normal  { line-height: var(--line-height-normal); }
.ui-text--leading-relaxed { line-height: var(--line-height-relaxed); }

/* ---------- Loading / Spinner ---------- */

.ui-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.ui-spinner--sm { width: 16px; height: 16px; }
.ui-spinner--md { width: 24px; height: 24px; }
.ui-spinner--lg { width: 40px; height: 40px; }

.ui-spinner__svg {
  width: 100%;
  height: 100%;
  animation: ui-spinner-rotate var(--duration-slow) linear infinite;
}

.ui-spinner__track {
  stroke: var(--color-border-subtle);
}

.ui-spinner__head {
  stroke: currentColor;
  stroke-dasharray: 25 75;
  stroke-dashoffset: 0;
}

.ui-spinner__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ui-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* ---------- EmptyState ---------- */

.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-secondary);
}

.ui-empty--sm { padding: var(--space-6) var(--space-4); }
.ui-empty--md { padding: var(--space-10) var(--space-4); }
.ui-empty--lg { padding: var(--space-16) var(--space-4); }

.ui-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xl);
}

.ui-empty__illustration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-empty__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.ui-empty__description {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 38rem;
}

.ui-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-2);
}

/* ---------- Field / InlineError ----------
   Created by: Phase 8 — first form mutation (notification preferences). */

.ui-inline-error {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  color: var(--color-danger);
}

/* ---------- Field / Checkbox ----------
   Native input hidden, visible indicator + label rendered alongside.
   Token-driven; no hard-coded color / spacing / radius. */

.ui-checkbox {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
  cursor: pointer;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  line-height: var(--line-height-normal);
}

.ui-checkbox--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ui-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-checkbox__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  color: var(--color-text-on-brand);
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ui-checkbox__check {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.ui-checkbox__input:checked + .ui-checkbox__indicator {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.ui-checkbox__input:checked + .ui-checkbox__indicator .ui-checkbox__check {
  opacity: 1;
}

.ui-checkbox__input:focus-visible + .ui-checkbox__indicator {
  box-shadow: var(--focus-ring);
  border-color: var(--color-accent);
  outline: none;
}

.ui-checkbox:hover .ui-checkbox__indicator {
  border-color: var(--color-accent);
}

.ui-checkbox--disabled:hover .ui-checkbox__indicator {
  border-color: var(--color-border-default);
}

.ui-checkbox--invalid .ui-checkbox__indicator {
  border-color: var(--color-danger);
}

.ui-checkbox__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.ui-checkbox__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.ui-checkbox__description {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.ui-checkbox__error {
  margin-top: var(--space-1);
}

/* ---------- Field / TextInput ----------
   Created by: Phase 9 — first text-input form (company contact).
   Native <input> styled with token-driven hover/focus/disabled states. */

.ui-text-input {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.ui-text-input::placeholder {
  color: var(--color-text-tertiary);
}

.ui-text-input:hover {
  border-color: var(--color-border-strong);
}

.ui-text-input:focus,
.ui-text-input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.ui-text-input:disabled,
.ui-text-input--disabled {
  cursor: not-allowed;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  opacity: 0.85;
}

.ui-text-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.ui-text-input[aria-invalid="true"]:focus,
.ui-text-input[aria-invalid="true"]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

/* ---------- Field ----------
   Wraps the input with label-above + help + error rows. */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.ui-field__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.ui-field__required {
  margin-left: var(--space-1);
  color: var(--color-danger);
}

.ui-field__help {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.ui-field__control {
  display: block;
}

.ui-field__error {
  margin-top: var(--space-1);
}

.ui-field--invalid .ui-field__label {
  color: var(--color-text-primary);
}

/* ---------- Field / Combobox ----------
   Created by: Phase 10 — first composite input (company finder).
   Inline popup pattern; no portal. z-index = 20 chosen to sit above
   ordinary content (no z-index) and well below modals (1050+) /
   navbar (1030). Token-driven; no hard-coded color or spacing.
   See migration/phase10-composite-input-plan.md §13.3. */

.ui-combobox {
  position: relative;
  display: block;
  width: 100%;
}

.ui-combobox__input {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ui-combobox__input::placeholder {
  color: var(--color-text-tertiary);
}

.ui-combobox__input:hover {
  border-color: var(--color-border-strong);
}

.ui-combobox__input:focus,
.ui-combobox__input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.ui-combobox--invalid .ui-combobox__input {
  border-color: var(--color-danger);
}

.ui-combobox--invalid .ui-combobox__input:focus,
.ui-combobox--invalid .ui-combobox__input:focus-visible {
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.ui-combobox--disabled .ui-combobox__input {
  cursor: not-allowed;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  opacity: 0.85;
}

.ui-combobox__popup {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 20;
}

.ui-combobox__option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}

.ui-combobox__option--active {
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
}

.ui-combobox__option--selected:not(.ui-combobox__option--active) {
  background: var(--color-bg-subtle);
}

.ui-combobox__option--selected .ui-combobox__option-label {
  font-weight: var(--font-weight-semibold, 600);
}

.ui-combobox__option-label {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.ui-combobox__option-sublabel {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
}

.ui-combobox__state-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: default;
  user-select: none;
}

.ui-combobox__state-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---------- Select (Phase 13) ----------
   Native <select> styled to visual parity with .ui-text-input. Extracted
   verbatim from features/clientContacts/.../type-select per
   migration/phase13-primitive-stabilization-plan.md §2.1. */

.ui-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%23808080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ui-select::-ms-expand {
  display: none;
}

.ui-select:hover {
  border-color: var(--color-border-strong);
}

.ui-select:focus,
.ui-select:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.ui-select:disabled,
.ui-select--disabled {
  cursor: not-allowed;
  background-color: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  opacity: 0.85;
}

.ui-select[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.ui-select[aria-invalid="true"]:focus,
.ui-select[aria-invalid="true"]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

/* ---------- Textarea (Phase 13) ----------
   Plain multi-line input. No autosize, no plugins, no editor systems.
   See migration/phase13-primitive-stabilization-plan.md §2.2. */

.ui-textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  outline: none;
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.ui-textarea::placeholder {
  color: var(--color-text-tertiary);
}

.ui-textarea:hover {
  border-color: var(--color-border-strong);
}

.ui-textarea:focus,
.ui-textarea:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.ui-textarea:disabled,
.ui-textarea--disabled {
  cursor: not-allowed;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  opacity: 0.85;
  resize: none;
}

.ui-textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.ui-textarea[aria-invalid="true"]:focus,
.ui-textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

/* ---------- Form shell (Phase 13) ----------
   Shared layout for single-resource form editors. Extracted as CSS
   only (no React wrapper) per
   migration/phase13-primitive-stabilization-plan.md §2.3. Phase 9 and
   Phase 11 features deliberately keep their feature-local copies
   (migration-on-edit-touch discipline). */

.ui-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.ui-form__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ui-form__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 1.25rem;
}

.ui-form__message {
  display: inline-flex;
}

.ui-form__saved {
  color: var(--color-success);
}

.ui-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-4);
}

.ui-form__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.ui-form__button--primary {
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  border: 1px solid var(--color-accent);
}

.ui-form__button--primary:hover:not(:disabled),
.ui-form__button--primary:focus-visible:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  outline: none;
}

.ui-form__button--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.ui-form__button--ghost:hover:not(:disabled),
.ui-form__button--ghost:focus-visible:not(:disabled) {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  outline: none;
}

.ui-form__button:disabled,
.ui-form__button[data-loading="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ui-form__button--primary .ui-spinner {
  color: var(--color-text-on-brand);
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .ui-form {
    padding: var(--space-6);
  }
}

/* ---------- Pagination / NumberedPagination ---------- */

.ui-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-2);
  max-width: 100%;
  min-width: 0;
}

.ui-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.ui-pagination__button,
.ui-pagination__edge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.ui-pagination__button:hover:not(:disabled),
.ui-pagination__edge:hover:not(:disabled) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ui-pagination__button:focus-visible,
.ui-pagination__edge:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ui-pagination__button--current {
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-color: var(--color-border-strong, var(--color-border-subtle));
  background: var(--color-bg-subtle);
  cursor: default;
}

.ui-pagination__button--current:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong, var(--color-border-subtle));
  color: var(--color-text-primary);
}

.ui-pagination__button:disabled,
.ui-pagination__edge:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--color-text-tertiary);
  border-color: var(--color-border-subtle);
  background: var(--color-bg-subtle);
}

.ui-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 44px;
  color: var(--color-text-secondary);
  user-select: none;
}

.ui-pagination__edge i {
  color: var(--color-accent);
  font-size: 0.85em;
  line-height: 1;
}

.ui-pagination__edge:disabled i {
  color: var(--color-text-tertiary);
}

.ui-pagination__edge-label {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ui-pagination {
    gap: var(--space-2);
  }

  .ui-pagination__edge-label {
    /* Visual label collapses on mobile; accessible name stays on aria-label. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ui-pagination__edge {
    position: relative;
    padding-inline: var(--space-3);
  }
}