/* RZD UI Components */

/* Button */

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  min-width: 100px;
  padding: 0 var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: 16px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.rt-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.rt-btn:disabled,
.rt-btn[aria-disabled="true"] {
  cursor: not-allowed;
}

.rt-btn__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  color: currentColor;
}

.rt-btn--primary {
  color: var(--color-text-inverse);
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
}

.rt-btn--primary:hover {
  background: var(--color-brand-red-hover);
  border-color: var(--color-brand-red-hover);
}

.rt-btn--primary:active {
  background: var(--color-brand-red-pressed);
  border-color: var(--color-brand-red-pressed);
}

.rt-btn--primary:disabled,
.rt-btn--primary[aria-disabled="true"] {
  color: var(--color-text-disabled);
  background: var(--color-border-muted);
  border-color: var(--color-border-muted);
}

.rt-btn--secondary {
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  border-color: var(--color-border);
}

.rt-btn--secondary:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-muted);
  border-color: var(--color-border-hover);
}

.rt-btn--secondary:active {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
  border-color: var(--color-text-muted);
}

.rt-btn--secondary:disabled,
.rt-btn--secondary[aria-disabled="true"] {
  color: var(--color-text-disabled);
  background: var(--color-bg-surface);
  border-color: var(--color-border-muted);
}

.rt-btn--tertiary {
  min-width: 0;
  padding: 0 var(--space-2);
  color: var(--color-text-secondary);
  background: transparent;
  border-color: transparent;
}

.rt-btn--tertiary:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}

.rt-btn--tertiary:active {
  color: var(--color-text-primary);
  background: var(--color-border-muted);
}

.rt-btn--tertiary:disabled,
.rt-btn--tertiary[aria-disabled="true"] {
  color: var(--color-text-disabled);
  background: transparent;
}

.rt-btn--danger {
  color: var(--color-error);
  background: var(--color-bg-surface);
  border-color: var(--color-error);
}

.rt-btn--danger:hover {
  color: #b91c1c;
  background: #fef2f2;
  border-color: var(--color-error);
}

.rt-btn--danger:active {
  color: #991b1b;
  background: #fee2e2;
  border-color: #b91c1c;
}

.rt-btn--danger:disabled,
.rt-btn--danger[aria-disabled="true"] {
  color: var(--color-text-disabled);
  background: var(--color-bg-surface);
  border-color: var(--color-border-muted);
}

/* Icon Button */

.rt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.rt-icon-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-muted);
  border-color: var(--color-border-hover);
}

.rt-icon-btn:active {
  background: var(--color-bg-subtle);
  border-color: var(--color-text-muted);
}

.rt-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.rt-icon-btn svg {
  width: var(--icon-size);
  height: var(--icon-size);
  color: currentColor;
}

.rt-icon-btn--primary {
  color: var(--color-text-inverse);
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
}

.rt-icon-btn--primary:hover {
  background: var(--color-brand-red-hover);
  border-color: var(--color-brand-red-hover);
}

.rt-icon-btn--ghost {
  border-color: transparent;
  background: transparent;
}

/* Form */

.rt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 280px;
}

.rt-field__label {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--color-text-secondary);
}

.rt-field__hint {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--color-text-muted);
}

.rt-input,
.rt-textarea,
.rt-select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 400;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.rt-input,
.rt-select {
  height: var(--control-height);
  padding: 0 var(--control-padding-x);
}

.rt-textarea {
  min-height: 96px;
  padding: var(--space-3);
  resize: vertical;
}

.rt-input::placeholder,
.rt-textarea::placeholder {
  color: var(--color-text-disabled);
}

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

.rt-input:focus,
.rt-textarea:focus,
.rt-select:focus {
  outline: none;
  border-color: var(--color-border-strong);
}

.rt-input:disabled,
.rt-textarea:disabled,
.rt-select:disabled {
  color: var(--color-text-disabled);
  background: var(--color-bg-subtle);
  border-color: var(--color-border-muted);
  cursor: not-allowed;
}

.rt-field--error .rt-input,
.rt-field--error .rt-textarea,
.rt-field--error .rt-select {
  border-color: var(--color-error);
}

.rt-field--error .rt-field__hint {
  color: var(--color-error);
}

/* Select имитация для кастомных списков */

.rt-select-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-height);
  padding: 0 10px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text-disabled);
  background: var(--color-bg-surface);
}

.rt-select-box__value {
  flex: 1;
  min-width: 0;
}

.rt-select-box__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--color-text-muted);
}

.rt-select-box--open {
  border-color: var(--color-border-strong);
  color: var(--color-text-disabled);
}

.rt-select-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rt-dropdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
}

.rt-dropdown__option {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.rt-dropdown__option:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}

.rt-dropdown__option--selected {
  color: var(--color-brand-red-hover);
  background: var(--color-brand-red-soft);
}

/* Checkbox / Radio */

.rt-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-body-size);
  line-height: 16px;
  cursor: pointer;
}

.rt-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rt-choice__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text-inverse);
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.rt-choice--checkbox .rt-choice__control {
  border-radius: var(--radius-sm);
}

.rt-choice--radio .rt-choice__control {
  border-radius: var(--radius-pill);
}

.rt-choice:hover {
  color: var(--color-text-primary);
}

.rt-choice:hover .rt-choice__control {
  border-color: var(--color-border-hover);
  background: var(--color-bg-muted);
}

.rt-choice input:checked + .rt-choice__control {
  border-color: var(--color-brand-red);
  background: var(--color-brand-red);
}

.rt-choice--radio input:checked + .rt-choice__control {
  background: var(--color-bg-surface);
}

.rt-choice--radio input:checked + .rt-choice__control::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-red);
}

.rt-choice input:focus-visible + .rt-choice__control {
  box-shadow: var(--focus-ring);
}

.rt-choice input:disabled + .rt-choice__control,
.rt-choice input:disabled ~ .rt-choice__label {
  color: var(--color-text-disabled);
  border-color: var(--color-border-muted);
  background: var(--color-bg-subtle);
  cursor: not-allowed;
}

.rt-choice__check {
  width: 12px;
  height: 12px;
}

/* Switch */

.rt-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-body-size);
  line-height: 16px;
  cursor: pointer;
}

.rt-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rt-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--color-border-muted);
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.rt-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  transition: transform 120ms ease;
}

.rt-switch:hover {
  color: var(--color-text-primary);
}

.rt-switch:hover .rt-switch__track {
  background: var(--color-border);
}

.rt-switch input:checked + .rt-switch__track {
  background: var(--color-brand-red);
}

.rt-switch input:checked + .rt-switch__track .rt-switch__thumb {
  transform: translateX(16px);
}

.rt-switch input:focus-visible + .rt-switch__track {
  box-shadow: var(--focus-ring);
}

.rt-switch input:disabled + .rt-switch__track {
  background: var(--color-bg-subtle);
  cursor: not-allowed;
}

.rt-switch input:disabled ~ .rt-switch__label {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* Tabs */

.rt-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rt-tabs__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  min-height: 36px;
}

.rt-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--color-text-muted);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 400;
  line-height: 16px;
  cursor: pointer;
}

.rt-tab:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
}

.rt-tab--active {
  color: var(--color-text-primary);
}

.rt-tab:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.rt-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.rt-tabs__line {
  position: relative;
  height: 1px;
  background: var(--color-border-muted);
}

.rt-tabs__active-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-red);
}