/*
 * Компоненты: кнопки, формы, панели, бейджи, диалоги, тосты, скелетоны.
 * Все значения — из tokens.css.
 */
.btn {
  padding: var(--s-btn);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-14);
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
}

.btn:hover {
  background: var(--c-accent-soft);
}

.btn:active {
  transform: translateY(var(--bw-1));
}

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.btn-primary {
  border-color: transparent;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: var(--fw-medium);
}

.btn-primary:hover {
  background: var(--c-accent-hover);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--c-text-2);
}

.btn-ghost:hover {
  background: var(--c-accent-soft);
  color: var(--c-text);
}

.btn-danger-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--c-danger);
}

.btn-danger-ghost:hover {
  background: var(--c-danger-soft);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: var(--s-btn-xs);
  font-size: var(--fs-12);
}

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: var(--size-icon);
  height: var(--size-icon);
  padding: 0;
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-20);
  transition: background var(--dur);
}

.btn-icon:hover {
  background: var(--c-accent-soft);
}

/* Поля форм */
.field {
  display: block;
  color: var(--c-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
}

.field + .field {
  margin-top: var(--s-4);
}

.field > input,
.field > select,
.field > textarea {
  width: 100%;
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-text);
}

textarea {
  min-height: var(--h-textarea);
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-accent);
  outline: none;
  box-shadow: var(--sh-ring);
}

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

.field-error {
  display: block;
  min-height: var(--s-4);
  margin-top: var(--s-1);
  color: var(--c-danger);
  font-size: var(--fs-12);
  font-weight: var(--fw-normal);
}

.form-error {
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  font-size: var(--fs-13);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.field-row .field {
  margin-top: 0;
}

.field-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-text-2);
  font-size: var(--fs-13);
}

.field-inline select {
  width: auto;
  padding: var(--s-2) var(--s-3);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
}

.search {
  flex: 1 1 100%;
  order: 3;
}

.search input {
  width: 100%;
  padding: var(--s-2) var(--s-4);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-13);
}

/* Панели и счётчики */
.panel {
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}

.stat {
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}

.stat strong {
  display: block;
  font-size: var(--fs-30);
  line-height: var(--lh-title);
}

.stat span {
  color: var(--c-text-2);
  font-size: var(--fs-13);
}

.stat.is-danger strong {
  color: var(--c-danger);
}

.stat.is-warn strong {
  color: var(--c-warn);
}

/* Бейджи */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
}

.badge-low {
  background: var(--c-surface-2);
  color: var(--c-prio-low);
}

.badge-medium {
  background: var(--c-warn-soft);
  color: var(--c-prio-medium);
}

.badge-high {
  background: var(--c-danger-soft);
  color: var(--c-prio-high);
}

.badge-status-todo {
  background: var(--c-surface-2);
  color: var(--c-text-2);
}

.badge-status-in_progress {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.badge-status-done {
  background: var(--c-ok-soft);
  color: var(--c-ok);
}

/* Пилюля */
.pill {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border: var(--bw-1) solid var(--c-overlay-line);
  border-radius: var(--r-pill);
  background: var(--c-overlay);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wider);
}

/* Колокольчик */
.bell {
  position: relative;
  width: var(--size-bell);
  height: var(--size-bell);
}

.badge-count {
  position: absolute;
  top: calc(var(--s-1) * -1);
  right: calc(var(--s-1) * -1);
  display: grid;
  place-items: center;
  min-width: var(--size-badge);
  height: var(--size-badge);
  padding: 0 var(--s-1);
  border-radius: var(--r-pill);
  background: var(--c-danger);
  color: var(--c-white);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
}

/* Диалоги */
.dialog {
  width: var(--w-dialog);
  max-width: 92vw;
  padding: var(--s-6);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-2);
}

.dialog-lg {
  width: var(--w-dialog-lg);
}

.dialog::backdrop {
  background: var(--c-backdrop);
  backdrop-filter: blur(var(--blur));
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.dialog-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

/* Вкладки */
.tabs {
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
  padding: var(--s-1);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
}

.tab {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
}

.tab.is-active {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-1);
}

/* Тосты */
.toasts {
  position: fixed;
  top: var(--s-5);
  right: var(--s-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-2);
  max-width: var(--size-toast-max);
}

.toast {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--c-toast-bg);
  color: var(--c-toast-text);
  box-shadow: var(--sh-2);
  font-size: var(--fs-13);
  transition: opacity var(--dur-slow), transform var(--dur-slow);
}

.toast.is-success {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.toast.is-error {
  background: var(--c-danger);
  color: var(--c-white);
}

.toast.is-hiding {
  opacity: 0;
  transform: translateY(calc(var(--s-1) * -1));
}

/* Скелетоны */
.skeleton {
  min-height: var(--size-skeleton-card);
  border-radius: var(--r-lg);
  background: linear-gradient(
    90deg,
    var(--c-skeleton) 25%,
    var(--c-skeleton-hi) 50%,
    var(--c-skeleton) 75%
  );
  background-size: 200% 100%;
  animation: shimmer var(--dur-shimmer) infinite;
}

.skeleton-head {
  min-height: var(--s-6);
}

.list-loading {
  display: grid;
  gap: var(--s-2);
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* Пустые состояния и ошибки */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-4);
  text-align: center;
}

.empty-art {
  display: grid;
  place-items: center;
  width: var(--s-7);
  height: var(--s-7);
  border-radius: var(--r-full);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-24);
}

.banner-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--bw-1) solid var(--c-danger);
  border-radius: var(--r-lg);
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.focus-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-lg);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-12);
}

@media (min-width: 768px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }

  .search {
    flex: 0 1 auto;
    order: 0;
  }

  .search input {
    width: var(--w-search);
  }
}