/* ============================================================
   БКМ-СТАТУС — catalog-inline.css
   Inline-форма добавления в заявку прямо в таблице подкатегорий.
   Работает совместно с /assets/js/catalog-inline.js и window.Order.
   Все селекторы под .subcat-table — не конфликтуют с .price-table.
   ============================================================ */

/* ------------------------------------------------------------
   Sticky-сайдбар опускается под весь sticky-стек (header + crumbs + order-bar).
   Если order-bar нет, используется базовый top: 16px из catalog.css.
   ------------------------------------------------------------ */
body:has(.order-bar) .catalog-sidebar {
    top: calc(var(--header-h) + var(--breadcrumbs-h) + var(--order-bar-h) + 16px);
}

/* ------------------------------------------------------------
   Таблица подкатегорий: overflow-visible чтобы inline-форма
   не обрезалась на ширине .table-wrap (там overflow-x:auto в main.css).
   ------------------------------------------------------------ */
.table-wrap:has(.subcat-table) { overflow: visible; }

/* ------------------------------------------------------------
   Кнопка-триггер «+ Добавить» / «✓ В заявке» в колонке действия.
   Базовая форма через .btn.btn--outline/.btn--navy.btn--sm из main.css.
   ------------------------------------------------------------ */
.subcat-table .col-add { text-align: center; white-space: nowrap; }
.subcat-table .col-add .btn-label-short { display: none; }

/* Открытое состояние — синяя рамка, текст «▴ Свернуть» */
.subcat-table tr[data-expanded="1"] .col-add .btn {
    background: #fff;
    border: 1px solid var(--navy);
    color: var(--navy);
}
.subcat-table tr[data-expanded="1"] .col-add .btn .label-add { display: none; }
.subcat-table tr[data-expanded="1"] .col-add .btn .label-opened { display: inline; }
.subcat-table tr[data-expanded="1"] .col-add .btn .label-inorder { display: none; }
.subcat-table .col-add .btn .label-opened { display: none; }
.subcat-table .col-add .btn .label-inorder { display: none; }

/* Строка в заявке (data-in-order="1") — оранжевая полоса слева + кнопка navy */
.subcat-table tr[data-in-order="1"]:not([data-expanded="1"]) .col-add .btn {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.subcat-table tr[data-in-order="1"]:not([data-expanded="1"]) .col-add .btn .label-add { display: none; }
.subcat-table tr[data-in-order="1"]:not([data-expanded="1"]) .col-add .btn .label-inorder { display: inline; }

.subcat-table tr[data-in-order="1"] > td:first-child {
    border-left: 3px solid var(--orange);
    padding-left: 9px;
}

/* ------------------------------------------------------------
   Inline-строка: тот же стиль что на прайсе (#EEF7FF фон,
   10px отступ), но скоуп .subcat-table.
   ------------------------------------------------------------ */
.subcat-table .add-inline-row { background: #EEF7FF !important; }
.subcat-table .add-inline-row > td { padding: 10px 12px; }

.subcat-table .add-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.subcat-table .add-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.subcat-table .add-field label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.subcat-table .add-field input {
    width: 90px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 13px;
    outline: none;
    color: var(--text);
    font-family: inherit;
}
.subcat-table .add-field input:focus { border-color: var(--blue); }
.subcat-table .add-total {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    min-width: 100px;
    text-align: right;
    color: var(--navy);
    font-weight: 600;
}
.subcat-table .add-total strong { color: var(--navy); }

/* Кнопки «Отмена» / «Удалить» — базовые стили (такие же как на прайсе
   в price.css:142-163, но изолированы под .subcat-table чтобы не конфликтовать). */
.subcat-table .btn--add-cancel,
.subcat-table .btn--add-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--radius);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
.subcat-table .btn--add-cancel { color: var(--text-muted); border: 1px solid var(--border-dark); }
.subcat-table .btn--add-cancel:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-page); }
.subcat-table .btn--add-cancel:active { transform: scale(0.98); }

.subcat-table .btn--add-remove { color: var(--red); border: 1px solid #E8B5B0; }
.subcat-table .btn--add-remove:hover { background: #FDECEA; border-color: var(--red); }
.subcat-table .btn--add-remove:active { transform: scale(0.98); }

/* Иконки в кнопках — видны только на мобилке (<600px). Скрываем по умолчанию. */
.subcat-table .add-form .btn-icon { display: none; }

/* На десктопе/планшете .add-buttons растворяется — кнопки становятся
   прямыми детьми .add-form и участвуют в общем flex-ряду (как на прайсе). */
.subcat-table .add-form .add-buttons { display: contents; }

/* ------------------------------------------------------------
   Подвал формы: зелёное подтверждение после добавления
   ------------------------------------------------------------ */
.subcat-table .add-form-footer {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-top: 2px;
}
.subcat-table .add-success-note,
.subcat-table .add-removed-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    animation: catalog-fade-slide-in 0.25s ease;
}
.subcat-table .add-success-note {
    color: var(--green);
    background: var(--green-bg);
    border-left: 3px solid var(--green);
}
.subcat-table .add-removed-note {
    color: var(--red);
    background: #FDECEA;
    border-left: 3px solid var(--red);
}
.subcat-table .add-success-note .check,
.subcat-table .add-removed-note .check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    flex-shrink: 0;
}
.subcat-table .add-success-note .check { background: var(--green); }
.subcat-table .add-removed-note .check { background: var(--red); }
@keyframes catalog-fade-slide-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Адаптив: планшет (600–900)
   Таблица остаётся полной, inline — горизонтальный flex-wrap.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .subcat-table .add-field input { width: 80px; }
    .subcat-table .add-total { min-width: 90px; }
}

/* ------------------------------------------------------------
   Адаптив: мобилка (<600px)
   На мобилке .subcat-table переходит в карточный grid (catalog.css:482).
   Inline-row должен быть display:block, форма — 2×2 grid
   (qty | сумма / кнопки на всю ширину).
   Иконки в кнопках показываем, текст остаётся рядом.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    /* Критично: родительский .subcat-table tbody tr { display:grid } (catalog.css:482)
       применяется ко всем строкам, в том числе скрытым hidden. Приходится явно
       сохранять hidden для inline-row — иначе они показываются в исходном состоянии. */
    .subcat-table tr.add-inline-row[hidden] { display: none !important; }

    /* Видимая (не-hidden) inline-row: переопределяем display:grid на block */
    .subcat-table tr.add-inline-row:not([hidden]) {
        display: block !important;
        grid-column: 1 / -1;
        width: 100%;
        padding: 0;
        margin: -8px 0 8px;   /* склеиваем с карточкой сверху */
        background: transparent !important;
        border: none;
        box-shadow: none;
    }
    .subcat-table tr.add-inline-row:not([hidden]) > td {
        display: block !important;
        width: 100%;
        background: #EEF7FF;
        border: 1px solid var(--border);
        border-top: 1px solid var(--border);
        border-radius: 0 0 var(--radius) var(--radius);
        padding: 10px 12px;
        font-size: 13px;
    }
    .subcat-table tr.add-inline-row:not([hidden]) > td::before { display: none !important; }

    /* Визуально «приклеиваем» inline к карточке товара: у карточки-родителя
       убираем нижний радиус. Селектор :has() — пропускаем, делаем через JS
       (добавляем класс .has-inline-open на строку товара при раскрытии). */
    .subcat-table tr.has-inline-open {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-color: transparent !important;
        margin-bottom: 0 !important;
    }

    /* Форма: qty | сумма одной строкой, кнопки — ниже */
    .subcat-table .add-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "qty   sum"
            "btns  btns";
        align-items: end;
        gap: 8px;
    }
    .subcat-table .add-form .add-field:nth-of-type(1) { grid-area: qty; }
    .subcat-table .add-form .add-field:nth-of-type(2) { grid-area: sum; }
    .subcat-table .add-form .add-buttons { grid-area: btns; }

    /* Компактные поля */
    .subcat-table .add-field label {
        font-size: 10px;
        letter-spacing: 0.3px;
        margin-bottom: 2px;
    }
    .subcat-table .add-field input {
        width: 100%;
        font-size: 15px;
        padding: 7px 10px;
        height: 36px;
    }
    .subcat-table .add-total {
        width: 100%;
        min-height: 36px;
        padding: 7px 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* Кнопки в 2 колонки с иконками */
    .subcat-table .add-form .add-buttons {
        display: flex;
        gap: 6px;
        margin-top: 2px;
    }
    .subcat-table .add-form .add-buttons > .btn,
    .subcat-table .add-form .add-buttons > .btn--add-cancel,
    .subcat-table .add-form .add-buttons > .btn--add-remove {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        height: 38px;
        padding: 0 10px;
        font-size: 13px;
        font-weight: 600;
        border-radius: var(--radius-sm);
        white-space: nowrap;
        text-decoration: none;
    }
    .subcat-table .add-form .add-buttons > .btn--orange { flex: 1.4; }
    .subcat-table .add-form .btn-icon {
        display: inline-block;
        font-size: 14px;
        line-height: 1;
    }

    /* Полоса подтверждения компактнее */
    .subcat-table .add-success-note {
        font-size: 11.5px;
        padding: 8px 10px;
        line-height: 1.45;
    }
}