/* ============================================================================
   components.css — слой UI-компонентов (аналог shadcn/ui под Jinja2).
   Стили ТОЛЬКО на переменных из theme.css. Ни одного хардкод-цвета/радиуса/шрифта.
   Неймспейс ds-* — чтобы не пересекаться со старым style.css.
   Каждый компонент — 5 состояний: покой / hover / press / focus / disabled (§4).
   ========================================================================= */

/* ---------- Кнопка (§4) ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-head); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 10px 16px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: background .12s ease-out, border-color .12s ease-out,
              box-shadow .15s ease-out, transform .12s ease-out;
}
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.ds-btn .ds-ico { width: 16px; height: 16px; }

/* primary */
.ds-btn--primary { background: var(--accent); color: #fff; }
.ds-btn--primary:hover  { background: var(--accent-hover); }
.ds-btn--primary:active { background: var(--accent-press); transform: translateY(1px); }
.ds-btn--primary:disabled,
.ds-btn--primary[disabled] { background: var(--surface-2); color: var(--text-faint);
                             cursor: not-allowed; transform: none; }

/* secondary */
.ds-btn--secondary { background: var(--surface); border-color: var(--line);
                     color: var(--text); font-weight: 500; }
.ds-btn--secondary:hover  { background: var(--surface-2); border-color: var(--line-strong); }
.ds-btn--secondary:active { background: var(--surface-2); transform: translateY(1px); }
.ds-btn--secondary:disabled,
.ds-btn--secondary[disabled] { color: var(--text-faint); border-color: var(--line);
                               background: var(--surface); cursor: not-allowed; transform: none; }

/* danger — вторичная с красным текстом (§4: опасное действие никогда не заливка) */
.ds-btn--danger { background: var(--surface); border-color: var(--line);
                  color: var(--err-text); font-weight: 500; }
.ds-btn--danger:hover  { background: #FEF2F2; border-color: #FECACA; }
.ds-btn--danger:active { transform: translateY(1px); }
.ds-btn--danger:disabled,
.ds-btn--danger[disabled] { color: var(--text-faint); cursor: not-allowed; transform: none; }

.ds-btn--sm { height: 32px; padding: 6px 12px; font-size: 13px; }

/* ---------- Поле формы (§4) ---------- */
.ds-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-field > .ds-label { margin: 0; }
.ds-input {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; transition: border-color .12s ease-out, box-shadow .15s ease-out;
}
.ds-input::placeholder { color: var(--text-faint); }
.ds-input:hover { border-color: var(--line-strong); }
.ds-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
textarea.ds-input { resize: vertical; min-height: 84px; line-height: 1.5; }
select.ds-input { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2352525B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }

.ds-field--error .ds-input { border-color: var(--err-text); }
.ds-field--error .ds-input:focus { box-shadow: 0 0 0 3px rgba(185,28,28,.15); }
.ds-error-text { font-size: 13px; color: var(--err-text); }

.ds-input:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; }

/* ---------- Карточка (§4) ---------- */
.ds-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: var(--sp-6);
}
.ds-card__title { font-family: var(--font-head); font-size: 17px; font-weight: 600;
                  margin: 0 0 var(--sp-2); }
.ds-card__body  { color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.ds-card--interactive { cursor: pointer;
  transition: box-shadow .12s ease-out, border-color .12s ease-out, transform .12s ease-out; }
.ds-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong);
                              transform: translateY(-1px); }
.ds-card--interactive:active { box-shadow: var(--shadow-soft); transform: translateY(0); }
.ds-card--interactive:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* ---------- Таблица (§3 — линии 1px, цифры моно) ---------- */
.ds-table { width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; font-size: 15px; }
.ds-table th, .ds-table td { text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--line); }
.ds-table thead th { font: 500 11px/1.4 var(--font-body); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); background: var(--surface-2); }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr { transition: background .12s ease-out; }
.ds-table tbody tr:hover { background: var(--surface-2); }
.ds-table .ds-num { text-align: right; }

/* ---------- Диалог (нативный <dialog>, §5 появление 200ms) ---------- */
.ds-dialog { padding: 0; border: none; border-radius: var(--radius);
  box-shadow: var(--shadow-pop); background: var(--surface); color: var(--text);
  width: min(440px, calc(100vw - 32px)); }
.ds-dialog::backdrop { background: rgba(24,24,27,.45); }
.ds-dialog[open] { animation: ds-pop .2s cubic-bezier(.2,.6,.2,1); }
@keyframes ds-pop { from { opacity: 0; transform: translateY(8px) scale(.98); }
                    to   { opacity: 1; transform: none; } }
.ds-dialog__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--line); }
.ds-dialog__head h3 { font-family: var(--font-head); font-size: 17px; font-weight: 600; margin: 0; }
.ds-dialog__close { background: none; border: none; cursor: pointer; font-size: 22px;
  line-height: 1; color: var(--text-faint); padding: 0 4px; }
.ds-dialog__close:hover { color: var(--text); }
.ds-dialog__body { padding: var(--sp-6); color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.ds-dialog__foot { display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); }

/* ---------- Выпадающее меню (нативный <details>) ---------- */
.ds-dropdown { position: relative; display: inline-block; }
.ds-dropdown__trigger { list-style: none; cursor: pointer; }
.ds-dropdown__trigger::-webkit-details-marker { display: none; }
.ds-dropdown__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 200px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--sp-1);
  animation: ds-pop .2s cubic-bezier(.2,.6,.2,1); }
.ds-dropdown[open] .ds-dropdown__trigger .ds-ico { transform: rotate(180deg); }
.ds-dropdown__item { display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  text-align: left; background: none; border: none; cursor: pointer;
  font: 400 15px/1 var(--font-body); color: var(--text);
  padding: 9px 12px; border-radius: var(--radius-sm); transition: background .12s ease-out; }
.ds-dropdown__item:hover { background: var(--surface-2); }
.ds-dropdown__item--danger { color: var(--err-text); }
.ds-dropdown__sep { height: 1px; background: var(--line); margin: var(--sp-1) 0; }

/* ---------- Бейдж статуса (§1 семантика) ---------- */
.ds-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500;
  padding: 2px 10px; border-radius: var(--radius-pill); }
.ds-badge--ok   { color: var(--ok-text);   background: var(--ok-bg); }
.ds-badge--warn { color: var(--warn-text); background: var(--warn-bg); }
.ds-badge--err  { color: var(--err-text);  background: var(--err-bg); }
.ds-badge--neutral { color: var(--text-muted); background: var(--surface-2); }