/* static/css/pages/warehouse.css — стили модуля склада */

/* ===== Layout ===== */
.warehouse-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 12px 30px;
}

.warehouse-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.warehouse-tab {
    padding: 8px 14px;
    color: var(--text-color);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 13px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.warehouse-tab:hover {
    background: rgba(52, 152, 219, 0.08);
    color: var(--primary-color);
}

.warehouse-tab.active {
    background: var(--bg-color);
    border-color: var(--border-color);
    border-bottom-color: var(--bg-color);
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: -2px;
    padding-bottom: 10px;
}

/* ===== Быстрый поиск ===== */
.warehouse-quick-search {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.warehouse-quick-search > i {
    color: var(--primary-color);
    font-size: 18px;
    margin-left: 6px;
}

#warehouse-quick-lookup {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
}

.quick-lookup-result {
    position: absolute;
    top: 100%;
    left: 10px;
    right: 10px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.quick-lookup-result.show { display: block; }

.quick-result-item {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.1s;
}

.quick-result-item:hover { background: var(--surface-alt); }
.quick-result-item:last-child { border-bottom: none; }
.quick-result-item .qr-name { font-weight: 600; }
.quick-result-item .qr-sku { color: var(--text-muted); font-size: 11px; font-family: monospace; }
.quick-result-item .qr-qty { font-weight: 600; color: var(--primary-color); }
.quick-result-item .qr-qty.low { color: var(--danger-color); }

/* ===== KPI cards ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card {
    background: var(--surface);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 4px solid var(--primary-color);
}

.stat-card-blue { border-left-color: #3498db; }
.stat-card-green { border-left-color: #27ae60; }
.stat-card-red { border-left-color: #e74c3c; }
.stat-card-purple { border-left-color: #9b59b6; }

.stat-card .stat-icon {
    font-size: 28px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.1);
    color: var(--primary-color);
}

.stat-card-green .stat-icon { background: rgba(39, 174, 96, 0.1); color: #27ae60; }
.stat-card-red   .stat-icon { background: rgba(231, 76, 60, 0.1); color: #e74c3c; }
.stat-card-purple .stat-icon { background: rgba(155, 89, 182, 0.1); color: #9b59b6; }

.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 22px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.stat-hint  { font-size: 10px; color: var(--text-muted); }

/* ===== Dashboard grid ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

.dashboard-card,
.detail-card {
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.dashboard-card .card-header,
.detail-card h3 {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card h3,
.detail-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.dashboard-card .card-body,
.detail-card > div:not(.card-header) {
    padding: 6px;
}

.detail-card { padding: 0; margin-bottom: 14px; }
.detail-card > div:not(h3) { padding: 10px 14px; }
.detail-card > h3 { padding: 10px 14px; margin: 0; }

/* ===== Таблицы ===== */
.warehouse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--surface);
}

.warehouse-table th,
.warehouse-table td {
    padding: 7px 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.warehouse-table th {
    background: var(--surface-alt);
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
}

.warehouse-table.compact th,
.warehouse-table.compact td {
    padding: 5px 6px;
    font-size: 11px;
}

.warehouse-table tr:hover { background: var(--surface-alt); }

.row-low-stock { background: rgba(231, 76, 60, 0.04) !important; }
.row-inactive  { opacity: 0.5; }

.col-check { width: 30px; text-align: center; }
.col-actions { width: 90px; white-space: nowrap; text-align: right; }

.btn-icon {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 13px;
    margin-left: 2px;
}

.btn-icon:hover { background: rgba(52, 152, 219, 0.1); }
.btn-icon.text-danger { color: var(--danger-color); }
.btn-icon.text-danger:hover { background: rgba(231, 76, 60, 0.1); }

.text-right  { text-align: right; }
.text-muted  { color: var(--text-muted); }
.text-success{ color: #27ae60; }
.text-danger { color: #e74c3c; }
.text-warning{ color: #f39c12; }
.text-info   { color: #17a2b8; }
.text-primary{ color: #3498db; }
.small       { font-size: 11px; }

.badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.badge-success { background: #27ae60; color: white; }
.badge-info    { background: #3498db; color: white; }
.badge-warning { background: #f39c12; color: white; }
.badge-danger  { background: #e74c3c; color: white; }
.badge-secondary { background: var(--text-muted); color: white; }

/* ===== Empty state ===== */
.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}
.empty-state i { font-size: 32px; margin-bottom: 8px; display: block; }
.empty-state p { margin: 0; font-size: 13px; }

/* ===== Filters ===== */
.parts-filters {
    background: var(--surface);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-search {
    flex: 1;
    min-width: 240px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
}
.filter-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    background: var(--surface);
}
.filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    cursor: pointer;
}

/* ===== Actions row ===== */
.parts-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.parts-count { font-size: 13px; color: var(--text-muted); }
.parts-actions-right { display: flex; gap: 6px; }

/* ===== Pagination ===== */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
}
.page-info { color: var(--text-muted); font-size: 12px; }

/* ===== Forms ===== */
.part-form-container,
.ref-container,
.price-list-container,
.movements-container {
    background: var(--surface);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.part-form-container h2,
.ref-container h2,
.price-list-container h2,
.movements-container h2 {
    font-size: 18px;
    margin-bottom: 14px;
    color: var(--secondary-color);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 12px;
}

@media (max-width: 900px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
}

.form-group { display: flex; flex-direction: column; }
.form-group-wide { grid-column: 1 / -1; }
.form-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.form-group small { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    text-transform: none !important;
    font-weight: normal !important;
    cursor: pointer;
}

.form-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/* ===== Detail page ===== */
.part-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 14px;
    flex-wrap: wrap;
}
.part-detail-header h2 { font-size: 18px; color: var(--secondary-color); margin: 0; }
.part-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.part-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.part-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.part-stat-card {
    background: var(--surface);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
}
.part-stat-card.part-stat-danger { border-top-color: var(--danger-color); }
.part-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.part-stat-value { font-size: 20px; font-weight: 700; margin: 2px 0; }
.part-stat-hint  { font-size: 11px; }

.part-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 14px;
}
@media (max-width: 1100px) {
    .part-detail-grid { grid-template-columns: 1fr; }
}

.props-table { width: 100%; font-size: 12px; }
.props-table th {
    text-align: left;
    width: 35%;
    padding: 5px 0;
    color: var(--text-muted);
    vertical-align: top;
    font-weight: normal;
}
.props-table td {
    padding: 5px 0;
    color: var(--text-color);
}

/* Movement form */
.movement-form .form-row {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}
.movement-form .form-row label {
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.movement-form .form-row input,
.movement-form .form-row select {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
}

/* ===== Modals ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.modal-box {
    background: var(--surface);
    border-radius: 8px;
    padding: 20px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.modal-box h3 {
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--secondary-color);
}

/* ===== Price list ===== */
.price-list-intro {
    background: #eaf6ff;
    border-left: 4px solid #3498db;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-size: 12px;
}
.price-list-intro p { margin: 0; color: var(--text-color); line-height: 1.5; }

.price-list-form {
    background: var(--surface);
    padding: 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.price-list-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr auto auto;
    gap: 10px;
    align-items: end;
}
@media (max-width: 900px) {
    .price-list-form .form-row { grid-template-columns: 1fr; }
}

.price-list-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.pl-stat-card {
    background: var(--surface);
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pl-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.pl-stat-value { font-size: 20px; font-weight: 700; margin: 3px 0; color: var(--secondary-color); }
.pl-stat-hint  { font-size: 10px; color: var(--text-muted); }

.price-list-results h3 {
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--secondary-color);
}

/* ===== "Use in repair" modal (на странице ремонта) ===== */
/* 30.09.2026: z-index поднят выше обычных .modal (10000) — модалка
   «Добавить запчасть в ремонт» теперь открывается ПОВЕРХ других
   модалок (в частности, «Редактирование работ и финансов»). */
.use-part-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10500;
    display: none;
    align-items: center;
    justify-content: center;
}
.use-part-modal.show { display: flex; }
.use-part-modal-box {
    background: var(--surface);
    border-radius: 8px;
    padding: 20px;
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
}
.use-part-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.use-part-search-row input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
}
.use-part-results {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    margin-bottom: 10px;
}
.use-part-result-item {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.use-part-result-item:hover { background: var(--surface-alt); }
.use-part-result-item.selected { background: var(--input-focus-ring); border-left: 3px solid var(--primary-color); }

.use-part-qty-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.use-part-qty-row label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
}
.use-part-qty-row input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* ===== 30.09.2026 — Кнопка «Добавить запчасть» в шапке поля формы ===== */
/* Используется в модалке «Редактирование работ и финансов» и на
   страницах добавления/редактирования заказа — рядом с полем
   «Стоимость запчастей». Визуально — как .btn-template-header
   (device_form.css), но компактнее. */
.btn-use-part-header {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22.8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-use-part-header:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ===== 23.09.2026 — Кнопка «＋» у поля «Стоимость запчастей» ===== */
/* На страницах добавления/редактирования заказа поле стоит в
   двухколоночной строке (.form-row) с «Предоплатой». Ранее текстовая
   кнопка в строке метки переносилась на две строки и смещала поле
   ввода вниз. Теперь кнопка — рядом с полем ввода, высотой с поле:
     - .parts-input-group — [поле][кнопка «＋»];
     - .parts-input-spacer — невидимый слот 34px в колонке
       «Предоплата»: симметричен кнопке, поэтому ОБА поля ввода
       всегда строго одной ширины при любом зуме и плотности
       интерфейса (никаких пиксельных calc);
     - спейсер и кнопка рендерятся шаблоном одновременно (модуль
       «Склад» + мастер/админ), без кнопки поля тоже равны. */
.parts-input-group {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.parts-input-group .compact-input {
    flex: 1 1 auto;
    min-width: 0;
}
.parts-input-spacer {
    flex: 0 0 34px;
    align-self: stretch;
}
.btn-use-part-inline {
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}
.btn-use-part-inline:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.98);
}

/* ===== 23.09.2026 — Кнопка «＋ Добавить запчасть» в заголовке списка ===== */
/* Отрисовывается warehouse.js в .staged-parts-title — появляется,
   когда в заказе есть хотя бы одна запчасть. */
.staged-parts-title-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.staged-part-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.staged-part-add-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ===== 30.09.2026 — Таблица запчастей в форме заказа ===== */
/* Контейнер #staged-parts-container отрисовывается warehouse.js:
   страницы добавления (отложенные запчасти) и редактирования
   (уже сохранённые + новые). */
.staged-parts-list {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 12px;
}
.staged-parts-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 6px;
}
.staged-parts-title .badge {
    font-size: 10px;
}
.staged-parts-table-wrap {
    overflow-x: auto;
}
.staged-parts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.staged-parts-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.staged-parts-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    vertical-align: top;
}
.staged-parts-table tr:last-child td {
    border-bottom: none;
}
.staged-parts-table .text-right {
    text-align: right;
    white-space: nowrap;
}
.staged-part-name {
    font-weight: 600;
}
.staged-part-sku {
    font-size: 10px;
    color: var(--text-muted);
    font-family: monospace;
}
.staged-part-comment {
    font-size: 10px;
    color: var(--text-muted);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.staged-part-remove {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1;
    transition: all 0.15s ease;
}
.staged-part-remove:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}
.staged-parts-total {
    text-align: right;
    font-size: 12px;
    color: var(--secondary-color);
    margin-top: 6px;
}

/* Used parts list on device_detail — компактный блок */
.used-parts-list {
    background: var(--surface);
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 6px;
    border: 1px solid var(--border-color);
}
.used-parts-list h4 {
    font-size: 12px;
    color: var(--secondary-color);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.used-parts-list table {
    width: 100%;
    font-size: 11px;
    border-collapse: collapse;
}
.used-parts-list th, .used-parts-list td {
    padding: 3px 4px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.2;
}
.used-parts-list th {
    font-weight: 600;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.used-parts-list .total-row td {
    font-weight: bold;
    border-top: 2px solid var(--border-color);
    background: var(--surface-alt);
    padding: 4px;
}

/* ===== Price-list widget in add_device ===== */
.price-list-widget {
    background: linear-gradient(135deg, var(--surface-alt), var(--input-focus-ring));
    border: 1px solid var(--input-focus-ring);
    border-radius: 6px;
    padding: 12px;
    margin-top: 14px;
}
.price-list-widget h4 {
    font-size: 13px;
    margin: 0 0 6px;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 6px;
}
.price-list-widget .plw-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-color);
}
.price-list-widget .plw-stats > div { padding: 4px 0; }
.price-list-widget .plw-stats strong { color: var(--primary-color); font-size: 14px; }
.price-list-widget .plw-list {
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 4px;
    padding: 6px;
    border: 1px solid #f0f0f0;
    font-size: 11px;
}
.price-list-widget .plw-list-item {
    padding: 5px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
}
.price-list-widget .plw-list-item:last-child { border-bottom: none; }
.price-list-widget .plw-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 12px;
    font-size: 12px;
}
.price-list-widget .plw-suggest {
    margin-top: 6px;
    font-size: 11px;
    color: #27ae60;
    background: rgba(39, 174, 96, 0.08);
    padding: 5px 8px;
    border-radius: 3px;
}

/* ===== Табы в модалке «Добавить запчасть» ===== */
.use-part-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 14px;
    padding-bottom: 0;
}

.use-part-tab {
    padding: 9px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.15s;
    font-family: inherit;
}

.use-part-tab:hover {
    background: rgba(52, 152, 219, 0.08);
    color: var(--primary-color);
}

.use-part-tab.active {
    background: var(--input-focus-ring);
    border-color: var(--border-color);
    border-bottom-color: #e8f4fc;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: -2px;
    padding-bottom: 11px;
}

.use-part-panel {
    animation: fadeIn 0.15s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Информационная плашка в табах */
.use-part-info-note {
    background: var(--input-focus-ring);
    border-left: 4px solid #f39c12;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
}

/* Бейджи источников запчастей */
.badge-info    { background: #3498db; }
.badge-warning { background: #f39c12; color: white; }
.badge-success { background: #27ae60; color: white; }
.badge-secondary { background: var(--text-muted); color: white; }

/* Подсказка при пустом списке произвольных полей */
.use-part-qty-row label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
}
.use-part-qty-row input[type="text"],
.use-part-qty-row input[type="number"] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}
.use-part-qty-row input[type="text"]:focus,
.use-part-qty-row input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}

/* ============================================================================
   INLINE-КНОПКА «ДОБАВИТЬ ЗАПЧАСТЬ» + СВОРАЧИВАЕМАЯ ШТОРКА
   (добавлено из ранней версии v81 — компактный UI списка запчастей)
   ============================================================================ */

/* ===== Inline-кнопка «Добавить запчасть» ===== */
/* Плоская иконка без рамки и фона — как .btn-icon на этой же странице.
   Минимум визуального шума, вписывается в строку detail-row. */
.btn-add-part-inline {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 3px;
    margin-left: 3px;
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.15s ease;
}

.btn-add-part-inline:hover {
    color: var(--primary-color);
}

.btn-add-part-inline i {
    pointer-events: none;
}

/* ===== Сворачиваемая шторка списка запчастей ===== */
/* Тонкая кликабельная строка-ссылка, почти как detail-row.
   Без рамки/фона/карточки — минимум высоты. */
.used-parts-list .parts-toggle-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 2px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 0;
    transition: color 0.15s ease;
    line-height: 1.2;
}

.used-parts-list .parts-toggle-header:hover {
    color: var(--primary-color);
}

.used-parts-list .parts-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    font-size: 8px;
    color: var(--text-muted);
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.used-parts-list .parts-toggle-header:hover .parts-toggle-icon {
    color: var(--primary-color);
}

.used-parts-list .parts-toggle-title {
    font-size: 11px;
    font-weight: 600;
    color: inherit;
}

.used-parts-list .parts-toggle-header .badge {
    font-size: 9px;
    padding: 1px 4px;
    min-width: auto;
    height: auto;
    line-height: 1.2;
}

.used-parts-list .parts-table-wrapper {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    max-height: 2000px;
    opacity: 1;
}

.used-parts-list .parts-table-wrapper.collapsed {
    max-height: 0;
    opacity: 0;
}

/* ===== 24.09.2026: Быстрая приёмка (/warehouse/receive) ===== */
.receive-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 1100px) {
    .receive-layout { grid-template-columns: 1fr; }
}

.receive-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: var(--text-color);
}

.receive-head-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}

.receive-scan-box {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    position: relative;
}

.receive-scan-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.receive-scan-row > i {
    color: var(--primary-color);
    font-size: 18px;
}

#receive-scan,
#sale-scan {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    font-size: 15px;
}

#receive-scan:focus,
#sale-scan:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.receive-results {
    position: absolute;
    top: 100%;
    left: 10px;
    right: 10px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 120;
    max-height: 380px;
    overflow-y: auto;
    display: none;
}

.receive-results.show { display: block; }

.receive-notfound {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 4px;
    font-size: 12px;
}

.receive-selected {
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    animation: receiveSlideIn 0.18s ease-out;
}

@keyframes receiveSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.receive-part-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface-alt);
    border-left: 4px solid var(--success-color, #27ae60);
    border-radius: 4px;
    margin-bottom: 10px;
}

.receive-part-card .rp-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
}

.receive-part-card .rp-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.receive-part-card .rp-stock {
    text-align: right;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.receive-form {
    display: grid;
    grid-template-columns: 100px 160px 200px 1fr auto;
    gap: 10px;
    align-items: end;
}

@media (max-width: 900px) {
    .receive-form { grid-template-columns: 1fr 1fr; }
    .rf-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
}

.receive-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.receive-field input,
.receive-field select {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    background: var(--surface);
    box-sizing: border-box;
}

.receive-field input:focus,
.receive-field select:focus {
    outline: none;
    border-color: var(--primary-color);
}

#receive-qty { font-size: 16px; font-weight: 600; text-align: center; }

.receive-field kbd {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    font-family: inherit;
}

.receive-session {
    margin-top: 14px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
}

.receive-session-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.receive-session-head h3 {
    margin: 0;
    font-size: 14px;
    color: var(--text-color);
}

.receive-session-table tfoot td {
    border-top: 2px solid var(--border-color);
    font-size: 12px;
}

.receive-side .dashboard-card { margin: 0; }

/* ===== 26.09.2026 (релиз 97): Продажа со склада (/warehouse/sale) =====
   Переиспользует сетку и компоненты «Приёмки» (receive-*); отличаются
   акцент карточки (оранжевый вместо зелёного) и блок итогов дня. */
.sale-page .receive-part-card {
    border-left-color: var(--warning-color, #f39c12);
}
.sale-page .receive-session-head h3 { color: var(--text-color); }

.sale-today {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sale-today-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border-color);
}
.sale-today-row:last-child { border-bottom: none; }
.sale-today-row span { color: var(--text-muted); }
.sale-today-row strong { font-size: 14px; }

.sale-journal-link {
    margin-top: 8px;
    text-align: center;
}
.sale-journal-link a {
    font-size: 12px;
    color: var(--primary-color);
    text-decoration: none;
}
.sale-journal-link a:hover { text-decoration: underline; }

/* Бейдж типа «Продажа» в журнале движений */
.badge-sale {
    background: rgba(20, 160, 160, 0.14);
    color: #109090;
    border: 1px solid rgba(20, 160, 160, 0.45);
}
body.theme-dark .badge-sale {
    background: rgba(32, 178, 170, 0.18);
    color: #4dd0cf;
    border-color: rgba(32, 178, 170, 0.5);
}

/* ===== 24.09.2026: Список запчастей — хоткеи и быстрое движение ===== */
.parts-filters .filter-search {
    background-image: none;
}

.filter-search-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-muted);
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0 5px;
    pointer-events: none;
}

.parts-filters .filter-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.btn-quick-move {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: all 0.12s;
    text-decoration: none;
}

.btn-quick-move.in:hover {
    border-color: var(--success-color, #27ae60);
    color: var(--success-color, #27ae60);
    background: rgba(39, 174, 96, 0.08);
}

.btn-quick-move.out:hover {
    border-color: var(--danger-color, #e74c3c);
    color: var(--danger-color, #e74c3c);
    background: rgba(231, 76, 60, 0.08);
}

/* Модалка быстрого движения */
.quick-move-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.quick-move-overlay.show { display: flex; }

.quick-move-box {
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 380px;
    padding: 16px;
}

.quick-move-box h4 {
    margin: 0 0 6px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-move-part {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 6px 8px;
    background: var(--surface-alt);
    border-radius: 4px;
}

.quick-move-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.quick-move-grid .full { grid-column: 1 / -1; }

.quick-move-grid label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
}

.quick-move-grid input,
.quick-move-grid select {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    background: var(--surface);
    box-sizing: border-box;
}

.quick-move-grid input:focus,
.quick-move-grid select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.quick-move-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
}

.quick-move-error {
    display: none;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.5);
    color: var(--danger-color, #e74c3c);
    border-radius: 4px;
    font-size: 12px;
}

.quick-move-ok {
    display: none;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(39, 174, 96, 0.1);
    border: 1px solid rgba(39, 174, 96, 0.5);
    color: var(--success-color, #27ae60);
    border-radius: 4px;
    font-size: 12px;
}

/* ===== 24.09.2026: Форма запчасти — предупреждение о дубликатах ===== */
.duplicate-warning {
    display: none;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.45);
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    font-size: 12px;
}

.duplicate-warning.show { display: block; }

.duplicate-warning .dup-title {
    font-weight: 600;
    color: #856404;
    margin-bottom: 4px;
}

.duplicate-warning .dup-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.duplicate-warning .dup-item:last-child { border-bottom: none; }

.duplicate-warning .dup-item a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
}

.duplicate-warning .dup-item a:hover { color: var(--primary-color); }

.duplicate-warning .dup-qty {
    color: var(--text-muted);
    white-space: nowrap;
    font-size: 11px;
}

/* ===== 26.09.2026 (релиз 97): Форма запчасти — компактный режим =====
   Форма сжата до 900px и отцентрирована — на широких экранах поля
   не растягиваются на всю ширину склада. Плотная сетка 4/5 колонок,
   уменьшенные отступы и подписи. Блоки + sticky-сохранение — релиз 96. */

/* Форма уже склада: центрируем и ограничиваем ширину */
.part-form-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 14px 16px;
}

/* Шапка формы */
.pf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 10px;
}
.pf-head h2 { margin: 0; font-size: 17px; }
.pf-head .pf-head-hint {
    font-size: 11px;
    color: var(--text-muted);
}

/* Сворачиваемый блок */
.pf-block {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface);
    margin-bottom: 8px;
    overflow: hidden;
}

.pf-block-head {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    user-select: none;
}
.pf-block-head:hover,
.pf-block-head:focus-visible {
    background: rgba(52, 152, 219, 0.07);
    outline: none;
}

.pf-chevron {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.pf-block.pf-collapsed .pf-chevron { transform: rotate(-90deg); }

.pf-block-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--secondary-color);
}
.pf-block-title > i {
    color: var(--primary-color);
    font-size: 12px;
    width: 15px;
    text-align: center;
}

.pf-block-hint {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-required-badge {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 600;
    color: #b02a37;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.35);
    border-radius: 999px;
    padding: 1px 6px;
}

.pf-block-body { padding: 10px; }
.pf-block.pf-collapsed .pf-block-body { display: none; }

/* ===== Плотная сетка формы =====
   4 колонки по умолчанию; .pf-cols5 — для коротких полей (цены, учёт). */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
}
.pf-grid.pf-cols5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Ширины ячеек */
.pf-w2 { grid-column: span 2; }
.pf-w3 { grid-column: span 3; }
.pf-w4 { grid-column: 1 / -1; }

@media (max-width: 920px) {
    .pf-grid,
    .pf-grid.pf-cols5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .pf-grid,
    .pf-grid.pf-cols5 { grid-template-columns: 1fr; }
    .pf-w2, .pf-w3 { grid-column: span 1; }
    .pf-block-hint { display: none; }
}

/* ===== Компактные поля внутри формы ===== */
.part-form-container .form-group { margin: 0; min-width: 0; }
.part-form-container .form-group label {
    font-size: 10px;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
}
.part-form-container .form-group input,
.part-form-container .form-group select,
.part-form-container .form-group textarea {
    padding: 4px 8px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: 4px;
}
.part-form-container .form-group textarea { resize: vertical; }
.part-form-container .form-group small {
    font-size: 9.5px;
    margin-top: 1px;
    line-height: 1.3;
}

/* SKU: поле + кнопка «Авто» в одну строку */
.pf-sku-row {
    display: flex;
    gap: 6px;
}
.pf-sku-row input { flex: 1; min-width: 0; }
.pf-sku-row .btn { white-space: nowrap; padding: 4px 9px; font-size: 12px; }

/* Заметка о прайс-листе — компактная строка под сеткой цен */
.pf-price-note {
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--text-muted);
    background: var(--surface-alt, rgba(0, 0, 0, 0.03));
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    padding: 5px 9px;
    line-height: 1.35;
}
.pf-price-note i { color: var(--primary-color); margin-right: 4px; }

/* «Дополнительно» — редко нужное, свёрнуто по умолчанию */
.pf-extra {
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--surface);
    margin-bottom: 8px;
}
.pf-extra summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.pf-extra summary::-webkit-details-marker { display: none; }
.pf-extra summary:hover { color: var(--secondary-color); }
.pf-extra summary > i { color: var(--text-muted); font-size: 11px; }
.pf-extra .pf-extra-hint {
    font-size: 10px;
    font-weight: normal;
    color: var(--text-muted);
    opacity: 0.85;
}
.pf-extra[open] summary { border-bottom: 1px dashed var(--border-color); }
.pf-extra .pf-extra-body { padding: 10px; }

/* Sticky-панель сохранения */
.pf-save-bar {
    position: sticky;
    bottom: 10px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.pf-save-bar .pf-save-info {
    margin-right: auto;
    font-size: 11px;
    color: var(--text-muted);
}
.pf-save-bar .pf-save-info.pf-save-ready {
    color: var(--success-color, #27ae60);
    font-weight: 600;
}

.pf-save-bar .btn { padding: 5px 12px; font-size: 13px; }
.pf-save-bar .pf-cancel-btn { margin-left: 0; }

.pf-kbd {
    display: inline-block;
    font-family: inherit;
    font-size: 9.5px;
    line-height: 1;
    padding: 3px 5px;
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    vertical-align: middle;
}

/* Тёмная тема: панель и блоки не «прозрачнеют» */
body.theme-dark .pf-block,
body.theme-dark .pf-extra,
body.theme-dark .pf-save-bar {
    background: var(--surface);
}
body.theme-dark .pf-save-bar {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
body.theme-dark .pf-kbd {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Мобильная адаптация панели сохранения */
@media (max-width: 620px) {
    .pf-save-bar {
        bottom: 6px;
        padding: 8px 10px;
        gap: 8px;
    }
    .pf-save-bar .pf-save-info { width: 100%; margin-right: 0; }
    .pf-save-bar .btn { flex: 1; justify-content: center; }
}