/* ===================================
   LAYOUT
   Базовые layout стили и универсальная система позиционирования панелей
   =================================== */

/* ===================================
   УНИВЕРСАЛЬНАЯ СИСТЕМА ПОЗИЦИОНИРОВАНИЯ ПАНЕЛЕЙ
   Все модальные окна занимают пространство между валютами и нижним меню
   =================================== */

/* Base Panel Positioning */
.exchange-compact-panel,
.fishing-compact-panel,
.inventory-compact-panel,
.shop-compact-panel,
.profile-compact-panel {
    position: fixed;
    /* Верх: учитываем валютную панель (safe-top + 80px) + отступ 40px */
    top: var(--panel-top-offset);
    /* Низ: учитываем нижнее меню (80px) + отступ 4px */
    bottom: var(--bottom-nav-height);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    z-index: var(--z-modal);
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Settings Panel - специальные параметры */
.settings-compact-panel {
    position: fixed;
    top: var(--panel-top-offset);
    bottom: var(--bottom-nav-height);
    left: 50%;
    width: 94%;
    max-width: 520px;
    z-index: 50;
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Glassmorphism стили для settings */
    background: linear-gradient(135deg,
        var(--glass-bg) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.3),
        0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Visible State for Panels */
.overlay.show .inventory-compact-panel,
.overlay.show .shop-compact-panel,
.overlay.show .profile-compact-panel,
.overlay.show .exchange-compact-panel,
.overlay.show .fishing-compact-panel {
    opacity: 1;
}

.overlay.show .settings-compact-panel {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ===================================
   GRID LAYOUTS
   Различные сетки для инвентаря и магазина
   =================================== */

/* 2x4 Grid (2 rows x 4 columns) */
.items-grid-2x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    margin: 0 auto;
}

/* 2x2 Grid (used in unified panels) */
.items-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-md);
    min-height: 260px;
    max-height: 260px;
    padding: var(--spacing-sm);
    margin: 0 auto;
}

/* 1x4 Grid (for equipment - 2x2 layout) */
.items-grid-1x4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
}

/* Dynamic Grid (auto-sizing) */
.items-grid-dynamic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
}

/* Slots Grid (with empty slots) */
.items-grid-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-md);
    min-height: 260px;
    max-height: 260px;
    padding: var(--spacing-sm);
    margin: 0 auto;
    justify-content: center;
    align-content: start;
}

/* ===================================
   FLEX LAYOUTS
   =================================== */

.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-around {
    display: flex;
    justify-content: space-around;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

/* ===================================
   SPACING UTILITIES
   =================================== */

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* ===================================
   VISIBILITY UTILITIES
   =================================== */

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.invisible {
    visibility: hidden;
}

.show {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */

@media (max-width: 480px) {
    /* Панели на мобильных устройствах */
    .exchange-compact-panel,
    .fishing-compact-panel,
    .inventory-compact-panel,
    .shop-compact-panel,
    .profile-compact-panel {
        width: 95%;
    }

    .settings-compact-panel {
        width: 96%;
    }

    /* Сетки на мобильных */
    .items-grid-2x4 {
        gap: var(--spacing-sm);
        padding: var(--spacing-xs);
    }

    .items-grid-2x2,
    .items-grid-slots {
        gap: 10px;
        padding: 6px;
        min-height: 240px;
        max-height: 240px;
    }
}

@media (max-width: 400px) {
    .items-grid-2x2,
    .items-grid-slots {
        gap: var(--spacing-sm);
    }
}