/* forge/static/css/base.css
 *
 * Глобальные нормализации для всех проектов на forge. Подключается первым
 * (до design-system tokens, до проектных стилей) — чтобы у любого правила
 * с равной специфичностью был приоритет «по каскаду».
 *
 * Подключение в проектном `_base.html.tera`:
 *   <link rel="stylesheet" href="/shared/css/base.css?v={{ salt }}">
 */

/* HTML-атрибут `hidden` имеет браузерный default `display: none`, но любой
   класс с `display: ...` (например `.ds-btn { display: inline-flex }`)
   побеждает атрибутный селектор `[hidden]` (та же специфичность 0,0,1,0 —
   побеждает порядок в каскаде). Без этого правила `<button class="ds-btn"
   hidden>` остаётся видимым. `!important` гарантирует что любой
   display-класс вернёт обратно `display: none` для скрытых элементов.
   Поведение совпадает с тем что прописано в HTML-spec для `[hidden]`. */
[hidden] {
    display: none !important;
}

/* bool-indicator — унифицированная галка/прочерк для bool-полей в list-view.
   Используется компонентом `<bool_indicator>` (forge admin.html.tera).
   Квадратный (через `--ds-radius`) — синхронен с остальной геометрией
   (поля, кнопки, карточки) проекта: всё угловатое, не круглое. */
.ds-bool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-control-height);
    height: var(--ds-control-height);
    border-radius: var(--ds-radius, 2px);
    line-height: 0;
    border: 1px solid var(--ds-line, #e5e5e5);
    background: transparent;
}
.ds-bool--true {
    color: var(--ds-accent, #c8a04a);
    border-color: var(--ds-accent, #c8a04a);
}
.ds-bool--false {
    color: var(--ds-dim, #888);
}

/* bool_toggle_cell — кликабельная обёртка вокруг .ds-bool для inline-toggle
   в строке списка. Кнопка-«голая» (без фона/рамки), курсор-pointer, hover
   подсвечивает рамку индикатора. Сам индикатор остаётся .ds-bool. */
.ds-bool-cell { display: inline-flex; }
.ds-bool-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}
.ds-bool-btn:hover .ds-bool { border-color: var(--ds-accent, #c8a04a); }
.ds-bool-btn:focus-visible { outline: 2px solid var(--ds-accent, #c8a04a); outline-offset: 2px; border-radius: var(--ds-radius, 2px); }

/* sort_header — кликабельный заголовок сортируемой колонки */
.ds-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ds-th-sort__icon { margin-left: 5px; font-size: 10px; color: var(--muted); }
.ds-th-sort__icon--none { opacity: .45; }
.ds-th-sort:hover .ds-th-sort__icon { color: var(--ds-info, #d4af6a); }
.ds-th-sort__icon--asc,
.ds-th-sort__icon--desc { color: var(--ds-info, #d4af6a); opacity: 1; }

/* bool_toggle — кликабельная версия `.ds-bool`. Квадрат 22×22, под ним
   скрытый checkbox. Состояние переключается естественно — клик по
   <label> = клик по input. Внутри две иконки (true/false), одна
   видна за раз через :checked sibling-selector. */
.ds-bool-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.ds-bool-toggle__input {
    /* visually-hidden, остаётся focusable для accessibility */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.ds-bool-toggle__square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-control-height);
    height: var(--ds-control-height);
    border-radius: var(--ds-radius, 2px);
    border: 1px solid var(--ds-line, #e5e5e5);
    background: transparent;
    color: var(--ds-dim, #888);
    line-height: 0;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.ds-bool-toggle:hover .ds-bool-toggle__square {
    border-color: var(--ds-accent, #c8a04a);
}
.ds-bool-toggle__input:checked + .ds-bool-toggle__square {
    color: var(--ds-accent, #c8a04a);
    border-color: var(--ds-accent, #c8a04a);
}
.ds-bool-toggle__input:focus-visible + .ds-bool-toggle__square {
    outline: 2px solid var(--ds-accent, #c8a04a);
    outline-offset: 2px;
}
/* Показываем нужную иконку: `--true` при checked, `--false` иначе. */
.ds-bool-toggle__icon { display: none; }
.ds-bool-toggle__input:checked + .ds-bool-toggle__square .ds-bool-toggle__icon--true { display: inline-flex; }
.ds-bool-toggle__input:not(:checked) + .ds-bool-toggle__square .ds-bool-toggle__icon--false { display: inline-flex; }

/* fixed-n field — input + suffix (например "кг"/"€") в одну строку.
   Используется в формах товара/варианта. Отдельная обёртка чтобы input
   и suffix были на одной линии без переноса. */
.ds-field__group {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.ds-field__group .ds-field__input {
    flex: 1;
    min-width: 0;
    text-align: right;
    /* Убираем native-spinner для type=number; для type=text нет смысла.
       Оставляем правило на случай переключения. */
    appearance: textfield;
    -moz-appearance: textfield;
}
.ds-field__group .ds-field__input::-webkit-outer-spin-button,
.ds-field__group .ds-field__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ds-field__suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--ds-line, #e5e5e5);
    border-left: 0;
    border-top-right-radius: var(--ds-radius, 2px);
    border-bottom-right-radius: var(--ds-radius, 2px);
    background: var(--ds-line, #f0f0f0);
    color: var(--ds-dim, #888);
    font: 300 12px/1 var(--ds-font);
    letter-spacing: 0.04em;
}
.ds-field--fixed-n .ds-field__group .ds-field__input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ds-field--fixed-n:has(.ds-field__group:not(:has(.ds-field__suffix))) .ds-field__input {
    /* без suffix — обычные углы */
    border-top-right-radius: var(--ds-radius, 2px);
    border-bottom-right-radius: var(--ds-radius, 2px);
}

/* ── Числовые знаки ────────────────────────────────────────────────────────
   Эмитятся ядерными Tera-фильтрами `money` и `signed` (forge_core::tera_filters):
   цвет по знаку значения. Проект может переопределить в своём CSS. */
.num-pos  { color: var(--ds-success, #1f9d56); }
.num-neg  { color: var(--ds-error, #d14343); }
.num-zero { color: var(--muted, #888); }

/* ── filter_accordion — сворачиваемый блок фильтров над списком ──────────────
   Рендерится ядерным <filter_accordion> из FilterParams::to_fields().
   Шапка: [Фильтры ▾] [инфо N из M] [✕]. У поля — toggle (применять?) + контрол. */
.ds-filter { border: 1px solid var(--line); border-radius: var(--ds-radius, 4px); margin-bottom: 16px; background: var(--bg); }
.ds-filter__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.ds-filter__toggle { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--fg); padding: 2px 0; }
.ds-filter__title { font-weight: 600; font-size: 13px; }
.ds-filter__chevron { width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.ds-filter__toggle[aria-expanded="true"] .ds-filter__chevron { transform: rotate(-135deg); }
.ds-filter__info { margin-left: auto; font-size: 12px; color: var(--muted); }
/* крестик-сброс всегда у правого края шапки (margin-auto работает и без info) */
.ds-filter__clear { margin-left: auto; display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px; border-radius: 3px; }
.ds-filter__info + .ds-filter__clear { margin-left: 8px; }
.ds-filter__clear:hover { color: var(--ds-error, #d14343); }
.ds-filter__body { padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.ds-filter__fields { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.ds-filter__field { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.ds-filter__field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* неактивное поле (toggle off) — контрол затемнён и не участвует в фильтре */
.ds-filter__field--off .ds-filter__control { opacity: .4; pointer-events: none; }
.ds-filter__range { display: flex; align-items: center; gap: 6px; }
.ds-filter__range .ds-field__input { width: 84px; }
.ds-filter__range-dash { color: var(--muted); }
.ds-filter__commands { display: flex; gap: 8px; justify-content: flex-end; }

/* compact per-field switch — применять ли фильтр по полю */
.ds-filter__switch { position: relative; display: inline-block; width: 30px; height: 16px; cursor: pointer; flex: none; }
.ds-filter__switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-filter__switch-track { display: block; width: 30px; height: 16px; border-radius: 999px; background: var(--line); transition: background .15s; }
.ds-filter__switch-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ds-filter__switch-input:checked + .ds-filter__switch-track { background: var(--ds-info, #d4af6a); }
.ds-filter__switch-input:checked + .ds-filter__switch-track .ds-filter__switch-thumb { transform: translateX(14px); }