/*
 * Stockshop UI — Controls
 * ----------------------------------------------------------------------------
 * Кнопки, поля, селекты, переключатели, поиск. CSS-only: это примитивы, им не
 * нужен свой JS, поэтому они живут слоем, а не Web Component'ами.
 *
 *   <link rel="stylesheet" href="/shared/design/tokens.css">
 *   <link rel="stylesheet" href="/shared/design/base.css">
 *   <link rel="stylesheet" href="/shared/design/controls.css">
 *
 * ПРАВИЛО: сервис не пишет свой `.btn`, `.form-control`, `.input`. Если нужного
 * вида нет — он добавляется СЮДА модификатором, а не в странице.
 * См. /shared/README.md раздел 2.2.
 */

/* ═══ Кнопки ════════════════════════════════════════════════════════════
   Первичная кнопка на экране одна: она называет действие, ради которого
   экран открыли. Остальные — обычные. */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--ui-control-h);
    padding: 0 13px;
    border: 1px solid var(--ui-border-color);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    color: var(--ui-color-text-secondary);
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--ui-shadow-sm);
    transition: background var(--ui-duration) var(--ui-ease),
                border-color var(--ui-duration) var(--ui-ease),
                color var(--ui-duration) var(--ui-ease);
}
.ui-btn:hover {
    background: var(--ui-surface-sunken);
    border-color: var(--ui-border-color-hover);
    color: var(--ui-color-text);
}
.ui-btn:active { transform: translateY(.5px); }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.ui-btn-primary {
    background: var(--ui-color-primary);
    border-color: var(--ui-color-primary);
    color: var(--ui-color-text-inverse);
}
.ui-btn-primary:hover {
    background: var(--ui-color-primary-hover);
    border-color: var(--ui-color-primary-hover);
    color: var(--ui-color-text-inverse);
}

.ui-btn-danger {
    background: var(--ui-color-danger);
    border-color: var(--ui-color-danger);
    color: var(--ui-color-text-inverse);
}
.ui-btn-danger:hover {
    background: var(--ui-color-danger-hover);
    border-color: var(--ui-color-danger-hover);
    color: var(--ui-color-text-inverse);
}

/* Тихий опасный. Удаление, стоящее в КАЖДОЙ строке списка или на каждой
   карточке, не должно кричать: сплошная заливка там превращается в шум и
   провоцирует случайный клик. Залитый `.ui-btn-danger` остаётся для места,
   где удаление — главное действие экрана: подтверждение в модалке. */
.ui-btn-danger-soft {
    background: var(--ui-surface);
    border-color: var(--ui-color-danger-border-strong);
    color: var(--ui-color-danger-strong);
}
.ui-btn-danger-soft:hover {
    background: var(--ui-color-danger-soft);
    border-color: var(--ui-color-danger);
    color: var(--ui-color-danger-strong);
}

/* Успех как ДЕЙСТВИЕ (принять, подтвердить приход) — не как состояние.
   Состояние успеха показывает .ui-badge-success, а не кнопка. */
.ui-btn-success {
    background: var(--ui-color-success);
    border-color: var(--ui-color-success);
    color: var(--ui-color-text-inverse);
}
.ui-btn-success:hover {
    background: var(--ui-color-success-strong);
    border-color: var(--ui-color-success-strong);
    color: var(--ui-color-text-inverse);
}

.ui-btn-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ui-color-text-muted);
}
.ui-btn-ghost:hover {
    background: var(--ui-surface-muted);
    border-color: transparent;
    color: var(--ui-color-text);
}

.ui-btn-sm { height: var(--ui-control-h-sm); padding: 0 9px;  font-size: var(--ui-font-size-sm); gap: 5px; }
.ui-btn-lg { height: var(--ui-control-h-lg); padding: 0 18px; font-size: var(--ui-font-size-lg); }
.ui-btn-block { width: 100%; }

.ui-btn svg { width: 15px; height: 15px; flex: none; }
.ui-btn-sm svg { width: 13px; height: 13px; }

/* Иконочная кнопка — квадрат в высоту контрола. Ей ОБЯЗАТЕЛЕН aria-label:
   иконка без подписи ничего не сообщает скринридеру. */
.ui-icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--ui-control-h);
    height: var(--ui-control-h);
    padding: 0;
    border: 1px solid var(--ui-border-color);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    color: var(--ui-color-text-muted);
    cursor: pointer;
    transition: color var(--ui-duration) var(--ui-ease),
                border-color var(--ui-duration) var(--ui-ease),
                background var(--ui-duration) var(--ui-ease);
}
.ui-icon-btn:hover { color: var(--ui-color-primary); border-color: var(--ui-color-primary); }
.ui-icon-btn.danger:hover,
.ui-icon-btn-danger:hover { color: var(--ui-color-danger); border-color: var(--ui-color-danger); }
.ui-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.ui-icon-btn svg { width: 15px; height: 15px; }
.ui-icon-btn-sm { width: var(--ui-control-h-sm); height: var(--ui-control-h-sm); }
.ui-icon-btn-sm svg { width: 13px; height: 13px; }
.ui-icon-btn-ghost { border-color: transparent; background: transparent; }
.ui-icon-btn-ghost:hover { background: var(--ui-surface-muted); border-color: transparent; }

/* Группа кнопок действий в правой колонке таблицы */
.ui-actions-row { display: inline-flex; gap: 4px; align-items: center; }

/* ═══ Поля ══════════════════════════════════════════════════════════════
   Поле — это не <input>, а связка: подпись, контрол, подсказка и место под
   ошибку. Место под ошибку существует всегда, поэтому её появление не
   двигает раскладку формы. */
.ui-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.ui-field > label {
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-semi);
    color: var(--ui-color-text-secondary);
}
.ui-field .ui-req { color: var(--ui-color-danger); }
.ui-field .ui-hint { font-size: var(--ui-font-size-xs); color: var(--ui-color-text-faint); }
.ui-field .ui-error {
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-weight-medium);
    color: var(--ui-color-danger);
}
.ui-field-row { flex-direction: row; align-items: center; gap: var(--ui-spacing-3); }

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    height: var(--ui-control-h);
    padding: 0 10px;
    border: 1px solid var(--ui-border-color);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-md);
    outline: none;
    transition: border-color var(--ui-duration) var(--ui-ease),
                box-shadow var(--ui-duration) var(--ui-ease);
}
.ui-textarea {
    height: auto;
    min-height: 68px;
    padding: 8px 10px;
    line-height: var(--ui-leading-normal);
    resize: vertical;
}
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--ui-border-color-hover); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
    border-color: var(--ui-color-primary);
    box-shadow: var(--ui-ring);
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-color-text-faint); }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled {
    background: var(--ui-surface-muted);
    color: var(--ui-color-text-faint);
    cursor: not-allowed;
}
.ui-input[readonly] { background: var(--ui-surface-sunken); }
.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] { border-color: var(--ui-color-danger); }
.ui-input[aria-invalid="true"]:focus,
.ui-select[aria-invalid="true"]:focus,
.ui-textarea[aria-invalid="true"]:focus { box-shadow: var(--ui-ring-danger); }

.ui-input-sm, .ui-select-sm { height: var(--ui-control-h-sm); font-size: var(--ui-font-size-sm); padding: 0 8px; }
.ui-input-mono { font-family: var(--ui-font-mono); font-size: var(--ui-font-size-sm); }
.ui-input-num  { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ui-font-mono); }
.ui-input-auto { width: auto; }

/* Стрелку селекта рисуем сами: системная различается между платформами и
   ломает единый вид ряда контролов. */
.ui-select {
    appearance: none;
    padding-right: 30px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px;
}
.ui-select-sm { padding-right: 26px; background-position: right 7px center; background-size: 12px; }

/* ── Флажок и переключатель ───────────────────────────────────────────── */
.ui-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ui-font-size-md);
    cursor: pointer;
}
.ui-check input {
    width: 15px; height: 15px; margin: 0;
    accent-color: var(--ui-color-primary);
    cursor: pointer;
}
.ui-check input:disabled { cursor: not-allowed; }
.ui-check:has(input:disabled) { color: var(--ui-color-text-faint); cursor: not-allowed; }

.ui-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--ui-font-size-md);
    cursor: pointer;
    position: relative;
}
.ui-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ui-switch .ui-switch-track {
    position: relative;
    width: 34px; height: 19px;
    flex: none;
    border-radius: var(--ui-radius-full);
    background: var(--ui-neutral-300);
    transition: background var(--ui-duration) var(--ui-ease);
}
.ui-switch .ui-switch-track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--ui-neutral-0);
    box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-duration) var(--ui-ease);
}
.ui-switch input:checked + .ui-switch-track { background: var(--ui-color-primary); }
.ui-switch input:checked + .ui-switch-track::after { transform: translateX(15px); }
.ui-switch input:focus-visible + .ui-switch-track { box-shadow: var(--ui-ring); }
.ui-switch input:disabled + .ui-switch-track { opacity: .5; }

/* ── Сегментный переключатель ─────────────────────────────────────────────
   Взаимоисключающий выбор из 2-5 коротких значений (фильтр списка, режим
   отображения). Не путать с вкладками: вкладки меняют СОДЕРЖИМОЕ раздела,
   сегмент — сужает то, что уже показано.
   Активный элемент помечается `aria-pressed="true"` (или классом .active —
   для страниц, где выбор ведёт готовый JS). */
.ui-segment {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--ui-border-color);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    user-select: none;
}
.ui-segment > button {
    height: var(--ui-control-h-sm);
    padding: 0 11px;
    border: 0;
    border-left: 1px solid var(--ui-border-color);
    background: transparent;
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ui-duration) var(--ui-ease),
                color var(--ui-duration) var(--ui-ease);
}
.ui-segment > button:first-child { border-left: 0; }
.ui-segment > button:hover { background: var(--ui-surface-muted); color: var(--ui-color-text); }
.ui-segment > button[aria-pressed="true"],
.ui-segment > button.active {
    background: var(--ui-color-primary-soft);
    color: var(--ui-color-primary-hover);
    font-weight: var(--ui-weight-semi);
}
.ui-segment > button:disabled { opacity: .45; cursor: not-allowed; }
.ui-segment-lg > button { height: var(--ui-control-h); padding: 0 14px; font-size: var(--ui-font-size-md); }

/* ── Поле поиска ──────────────────────────────────────────────────────── */
.ui-search { position: relative; display: inline-flex; }
.ui-search > .ui-input { padding-left: 30px; }
.ui-search > svg {
    position: absolute;
    left: 9px; top: 50%;
    width: 14px; height: 14px;
    transform: translateY(-50%);
    color: var(--ui-color-text-faint);
    pointer-events: none;
}

/* ── Группа полей ─────────────────────────────────────────────────────── */
.ui-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ui-spacing-4);
    align-items: start;
}
.ui-form-grid .ui-span-all { grid-column: 1 / -1; }