/* 阿卡尼亞號互動地圖 - 響應式布局和網格系統 */

/* 基礎重置和佈局 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
}

/* 頂部標題區域 */
.ship-header {
    background: var(--bg-main);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

/* 主容器網格系統 */
.main-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    min-height: 75vh;
}

/* 側邊欄佈局 */
.sidebar {
    padding: 0;
    height: fit-content;
    position: sticky;
    top: var(--spacing-lg);
}

/* 快速前往區塊 */
.quick-access {
    margin-bottom: var(--spacing-xl);
}

/* 艙等區塊 */
.class-legend {
    margin-top: var(--spacing-lg);
    margin-bottom: 0;
}


/* 主內容區域 */
.main-content {
    background: var(--overlay-light);
    padding: 0;
}

/* 樓層標題區域 */
.floor-header {
    background: var(--bg-main);
    padding: var(--spacing-md) var(--spacing-md);
    margin-bottom: 0;
}

/* 房間網格系統 */
.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) var(--spacing-md);
}

/* 連接點網格 */
.connections {
    margin: 20px 15px;
}

.connection-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 圖例網格 */
.legend-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 麵包屑導航 */
.breadcrumb {
    background: var(--shadow-color-1);
    padding: var(--spacing-md) var(--spacing-md);
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}

/* 響應式設計 */
@media (max-width: 1200px) {
    .main-container {
        max-width: 100%;
        grid-template-columns: 280px 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .room-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 1024px) {
    .main-container {
        grid-template-columns: 250px 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .room-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .sidebar {
        padding: var(--spacing-sm);
    }
    
    .legend-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xs);
    }
    
    .quick-access {
        margin-bottom: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .main-container {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    
    .sidebar {
        position: static;
        margin-bottom: 20px;
        order: 2;
        padding: 0 15px;
    }
    
    .main-content {
        order: 1;
        margin-bottom: 20px;
    }
    
    .room-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .room {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
        min-height: 50px;
    }
    
    .connection-grid {
        grid-template-columns: 1fr;
    }
    
    .legend-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

@media (max-width: 480px) {
    .main-container {
        padding: 8px;
    }
    
    .ship-header {
        padding: 15px 0;
    }
    
    .sidebar,
    .main-content {
        padding: 15px;
    }
    
    .floor-header {
        padding: 15px;
    }
    
}

/* Footer */
.footer {
    background: var(--primary-bg);
    color: var(--text-primary);
    text-align: center;
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.footer p {
    margin: 0;
}