/* ==========================================================================
   01_LAYOUT.CSS — Навигация, фильтры, сетка товаров, состояния грида
   Зависит от переменных из 00_global.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ВЕРХНЯЯ НАВИГАЦИЯ (Вкладки + Инфо-кнопка)
   -------------------------------------------------------------------------- */
.shop-tabs-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 25px;
}

.shop-tabs-scroll-area {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.shop-tabs-scroll-area::-webkit-scrollbar { display: none; }

.shop-tab-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.shop-tab-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.shop-tab-btn:hover {
    color: var(--text-main);
    border-color: var(--primary);
    background: var(--bg-panel);
}
.shop-tab-btn:hover svg { transform: translateY(-1px); }

/* Сброс возможных bootstrap-псевдоэлементов */
.shop-tab-btn::before,
.shop-tab-btn::after { display: none !important; }

/* Активные состояния вкладок (каждая в своём цвете) */
.shop-tab-btn[data-tab="system_shop"].active {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
}
.shop-tab-btn[data-tab="market"].active {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
}
.shop-tab-btn[data-tab="inventory"].active {
    background: rgba(var(--rarity-immortal-rgb), 0.1);
    border-color: var(--green);
    color: var(--green);
}
.shop-tab-btn[data-tab="publish"].active {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
}
/* Кнопка "?" (Как пользоваться) */
.shop-info-trigger {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    flex-shrink: 0;
}
.shop-info-trigger svg { width: 20px; height: 20px; fill: currentColor; }
.shop-info-trigger:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-glow);
}

/* Перекрашиваем фильтры из голубого в золотой/оранжевый */
.market-filters-scroll .btn-info {
    background-color: var(--primary-2) !important;
    border-color: var(--primary-2) !important;
    color: var(--text-on-accent) !important;
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3) !important;
}
.market-filters-scroll .btn-outline-info {
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
.market-filters-scroll .btn-outline-info:hover {
    background-color: var(--bg-panel) !important;
    border-color: var(--primary-2) !important;
    color: var(--primary-2) !important;
}

/* --------------------------------------------------------------------------
   2. ФИЛЬТРЫ РЫНКА
   -------------------------------------------------------------------------- */
.market-filters-scroll {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 5px;
    margin-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}
.market-filters-scroll::-webkit-scrollbar { display: none; }

.market-filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--radius-pill) !important;
    padding: 6px 16px !important;
    font-size: 0.85rem !important;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

/* Активный фильтр */
.market-filter-active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-accent);
    box-shadow: 0 4px 15px var(--primary-glow);
}

/* Неактивный фильтр */
.market-filter-inactive {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Наведение на неактивный фильтр */
.market-filter-inactive:hover {
    background-color: var(--bg-panel);
    border-color: var(--primary);
    color: var(--primary);
}

@media (min-width: 768px) {
    .market-filters-scroll { justify-content: center; }
}

/* --------------------------------------------------------------------------
   3. СЕТКА ТОВАРОВ
   -------------------------------------------------------------------------- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

/* --------------------------------------------------------------------------
   4. ШАПКА МАГАЗИНА
   -------------------------------------------------------------------------- */
.shop-header h2 {
    font-weight: 900;
    margin-bottom: 5px;
}
.shop-header p {
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   5. ОБЩИЕ СОСТОЯНИЯ ГРИДА (Загрузка / Пусто / Ошибка)
   Используются на всех вкладках: система, рынок, мои лоты, инвентарь
   -------------------------------------------------------------------------- */

/* Спиннеры по центру грида */
.grid-loader,
.shop-loader,
.inv-spinner {
    grid-column: 1 / -1;
    margin: 50px auto;
    display: block;
}

/* Текстовые сообщения (пусто / ошибка) */
.grid-message,
.inv-state-msg,
.inv-state-msg--error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
}

/* У ошибок отступ сверху меньше */
p.text-danger.grid-message {
    padding: 20px 0;
}

/* --------------------------------------------------------------------------
   6. СЕЛЕКТОР ГЕНЕРАЦИЙ — состояния (Prompt Selector Modal)
   Сама сетка элементов лежит в 04_publish.css
   -------------------------------------------------------------------------- */
.select-grid-loader,
.select-grid-empty,
.select-grid-error {
    grid-column: 1 / -1;
}
.select-grid-loader { margin: auto; }
.select-grid-empty  { padding-top: 30px; }