/* ============================================================
   UI KIT — .ui-*
   ============================================================ */

/* ---------- Кнопки ---------- */
.ui-btn {
  --btn-bg:     var(--surface-2);
  --btn-bg-hi:  var(--surface-3);
  --btn-fg:     var(--text);
  --btn-bd:     var(--border);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  min-height: 32px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.ui-btn:hover   { background: var(--btn-bg-hi); border-color: var(--border-2); }
.ui-btn:active  { transform: translateY(1px); }
.ui-btn:disabled { opacity: .5; pointer-events: none; }

.ui-btn--primary {
  --btn-bg: var(--accent);
  --btn-bg-hi: var(--accent-hi);
  --btn-fg: #fff;
  --btn-bd: transparent;
}
.ui-btn--primary:hover { background: var(--accent-hi); }

.ui-btn--danger {
  --btn-bg: var(--danger);
  --btn-bg-hi: #f58888;
  --btn-fg: #fff;
  --btn-bd: transparent;
}

.ui-btn--success {
  --btn-bg: var(--success);
  --btn-bg-hi: #6ce29b;
  --btn-fg: #052e1a;
  --btn-bd: transparent;
}

.ui-btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hi: var(--surface-2);
  --btn-bd: transparent;
}

.ui-btn--soft {
  --btn-bg: var(--accent-soft);
  --btn-bg-hi: rgba(109,124,255,.2);
  --btn-fg: var(--accent-hi);
  --btn-bd: transparent;
}

.ui-btn--sm { min-height: 26px; padding: 4px 9px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.ui-btn--lg { min-height: 40px; padding: 10px 18px; font-size: var(--fs-lg); border-radius: var(--r-lg); }

.ui-btn--icon { padding: 0; width: 32px; height: 32px; min-height: 0; }
.ui-btn--icon.ui-btn--sm { width: 26px; height: 26px; }

.ui-btn--block { display: flex; width: 100%; }

.ui-btn__label { display: inline-flex; align-items: center; gap: 6px; }
.ui-btn__spinner { display: inline-flex; }
.ui-btn.is-loading .ui-btn__label { opacity: .75; }

/* ---------- Поля ---------- */
.ui-field { display: block; }
.ui-label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: var(--fw-medium);
}
.ui-input-wrap { position: relative; display: block; }

.ui-input,
.ui-textarea,
.ui-select {
  width: 100%;
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.ui-textarea { min-height: 68px; resize: vertical; }

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

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background: var(--surface-3);
}

.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--text-4); }

.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled { opacity: .55; cursor: not-allowed; }

.ui-input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.ui-select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

/* ---------- Alert ---------- */
.ui-alert {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  animation: pop-in var(--t-base) var(--ease-out);
}
.ui-alert--danger  { background: var(--danger-soft);  color: #f8b4b4; border-color: rgba(242,108,108,.25); }
.ui-alert--warning { background: var(--warning-soft); color: #f5d9a3; border-color: rgba(240,184,96,.25); }
.ui-alert--info    { background: var(--info-soft);    color: #b3d4f8; border-color: rgba(107,168,245,.25); }
.ui-alert--success { background: var(--success-soft); color: #a7f3c4; border-color: rgba(74,222,128,.25); }
.ui-alert__icon { flex-shrink: 0; }

/* ---------- Chip ---------- */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease);
}
.ui-chip--soft    { background: var(--accent-soft);   color: var(--accent-hi); }
.ui-chip--success { background: var(--success-soft);  color: #a7f3c4; }
.ui-chip--warning { background: var(--warning-soft);  color: #f5d9a3; }
.ui-chip--danger  { background: var(--danger-soft);   color: #f8b4b4; }
.ui-chip--info    { background: var(--info-soft);     color: #b3d4f8; }

/* ---------- Badge ---------- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
}
.ui-badge--active  { background: var(--success-soft); color: #a7f3c4; }
.ui-badge--warning { background: var(--warning-soft); color: #f5d9a3; }
.ui-badge--danger  { background: var(--danger-soft);  color: #f8b4b4; }
.ui-badge--info    { background: var(--info-soft);    color: #b3d4f8; }
.ui-badge--muted   { background: var(--surface-3);    color: var(--text-3); }

/* ---------- Skeleton ---------- */
.ui-skeleton {
  --sk: linear-gradient(90deg,
          var(--surface-2) 0%,
          var(--surface-3) 40%,
          var(--surface-3) 60%,
          var(--surface-2) 100%);
  background: var(--sk);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
  display: block;
  min-height: 12px;
}
.ui-skeleton--circle { border-radius: var(--r-full); }

/* ---------- Spinner ---------- */
.ui-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.ui-spinner--sm { width: 13px; height: 13px; border-width: 1.75px; }
.ui-spinner--lg { width: 28px; height: 28px; border-width: 2.5px; }

/* ---------- Card ---------- */
.ui-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ui-card__header {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.ui-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.ui-card__body   { padding: var(--s-5); }
.ui-card__footer {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--s-2);
}

/* ---------- Modal ---------- */
.ui-modal {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  pointer-events: none;
}
.ui-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(6,7,10,.72);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.ui-modal__content {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: min(90vh, 880px);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
  pointer-events: none;
}
.ui-modal--open { pointer-events: auto; }
.ui-modal--open .ui-modal__overlay { opacity: 1; }
.ui-modal--open .ui-modal__content { opacity: 1; transform: none; pointer-events: auto; }

.ui-modal--wide .ui-modal__content { max-width: 860px; }
.ui-modal--xl   .ui-modal__content { max-width: 1150px; }
.ui-modal--sm   .ui-modal__content { max-width: 400px; }

.ui-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ui-modal__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.ui-modal__body {
  padding: var(--s-5);
  overflow-y: auto;
  flex: 1 1 auto;
}
.ui-modal__footer {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--s-2);
  flex-shrink: 0;
  background: var(--surface);
}

/* ---------- Toast ---------- */
.ui-toast-root {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
.ui-toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm);
  color: var(--text);
  pointer-events: auto;
  animation: pop-in var(--t-base) var(--ease-out);
}
.ui-toast--out { animation: pop-out var(--t-base) var(--ease-in) forwards; }
.ui-toast--success { border-color: rgba(74,222,128,.35); }
.ui-toast--error   { border-color: rgba(242,108,108,.35); }
.ui-toast--info    { border-color: rgba(107,168,245,.35); }
.ui-toast__icon { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.ui-toast__icon svg { width: 16px; height: 16px; }
.ui-toast--success .ui-toast__icon { color: var(--success); }
.ui-toast--error   .ui-toast__icon { color: var(--danger); }
.ui-toast--info    .ui-toast__icon { color: var(--info); }
.ui-toast__text { flex: 1; }
.ui-toast__close {
  background: none; border: none; color: var(--text-4);
  font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer;
}
.ui-toast__close:hover { color: var(--text); }

/* ---------- Dropdown ---------- */
.ui-dd { position: relative; }
.ui-dd__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  z-index: var(--z-menu);
  opacity: 0; transform: translateY(-3px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.ui-dd--open .ui-dd__list { opacity: 1; transform: none; pointer-events: auto; }
.ui-dd__item {
  padding: 7px 11px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.ui-dd__item:hover, .ui-dd__item.is-active { background: var(--surface-4); }
.ui-dd__empty {
  padding: 12px;
  color: var(--text-4);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ---------- Menu (⋮) ---------- */
.ui-menu {
  position: fixed;
  min-width: 190px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-4);
  padding: 4px;
  z-index: var(--z-menu);
  transform-origin: top right;
  opacity: 0;
  transform: scale(.97) translateY(-3px);
  pointer-events: none;
  transition:
    opacity var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.ui-menu--open { opacity: 1; transform: none; pointer-events: auto; }
.ui-menu--up   { transform-origin: bottom right; }

.ui-menu__item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 7px 9px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ui-menu__item:hover { background: var(--surface-4); }
.ui-menu__item svg { flex-shrink: 0; opacity: .7; width: 15px; height: 15px; }
.ui-menu__item--danger { color: #f8b4b4; }
.ui-menu__item--danger:hover { background: var(--danger-soft); color: #fecaca; }
.ui-menu__item--danger svg { color: inherit; }
.ui-menu__item--muted { color: var(--text-3); }
.ui-menu__divider {
  height: 1px; background: var(--border);
  margin: 4px 2px;
}

/* ---------- Progress ---------- */
.ui-progress {
  position: relative;
  height: 5px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.ui-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi));
  border-radius: inherit;
  transition: width var(--t-slow) var(--ease-out);
}
.ui-progress--indeterminate .ui-progress__fill {
  width: 40% !important;
  animation: indeterminate 1.3s var(--ease) infinite;
}
@keyframes indeterminate {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* ---------- Empty ---------- */
.ui-empty {
  padding: var(--s-8) var(--s-5);
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.ui-empty__icon { color: var(--text-4); }
.ui-empty__icon svg { width: 40px; height: 40px; }
.ui-empty__title { color: var(--text-2); font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.ui-empty__hint { color: var(--text-4); font-size: var(--fs-sm); max-width: 380px; }

/* ---------- Table ---------- */
.ui-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--r-lg);
}
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.ui-table th, .ui-table td {
  padding: 11px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ui-table th {
  color: var(--text-3);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  user-select: none;
}
.ui-table th.is-sortable { cursor: pointer; }
.ui-table th.is-sortable:hover { color: var(--text-2); }
.ui-table th .th-sort {
  display: inline-block; margin-left: 4px; opacity: .35; font-size: 10px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.ui-table th.is-sorted-asc  .th-sort { opacity: 1; }
.ui-table th.is-sorted-desc .th-sort { opacity: 1; transform: rotate(180deg); }
.ui-table tbody tr {
  transition: background var(--t-fast) var(--ease);
}
.ui-table tbody tr:hover { background: var(--surface-2); }
.ui-table td.actions-cell { width: 48px; text-align: right; }

/* ---------- Avatar ---------- */
.ui-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  overflow: hidden;
  color: var(--text-3);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease);
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar--zoomable { cursor: zoom-in; }
.ui-avatar--zoomable:hover {
  transform: scale(2.2);
  box-shadow: var(--shadow-3);
  z-index: 5;
  position: relative;
}

/* ---------- Tooltip ---------- */
.ui-tip { position: relative; }
.ui-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%) translateY(2px);
  padding: 4px 8px;
  background: var(--surface-4);
  color: var(--text);
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  z-index: var(--z-menu);
  border: 1px solid var(--border-2);
}
.ui-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }