/* Galaxy Map Page Styles */
.galactic-grid {
    display: grid;
    grid-template-columns: repeat(26, 1fr); /* A-Z */
    grid-auto-rows: 1fr;
    gap: 2px;
    background-size: cover;
    background-position: center;
    background-image: url('/galaxy.png');
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.cell {
    border: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30,30,30,0.3); /* semi-transparent to show background image */
    font-size: 12px;
    aspect-ratio: 1 / 1;
    position: relative;
    min-width: 40px;
    min-height: 40px;
}

.cell.selected {
    border: 2px solid var(--mud-palette-primary);
    background-color: rgba(126, 111, 255, 0.2);
}

.close-btn {
    margin-top: 8px;
}

.empty {
    opacity: 0.4;
    font-size: 10px;
}

.galactic-grid-with-headers {
    display: grid;
    grid-template-columns: 40px repeat(26, 1fr);
    grid-template-rows: 40px repeat(20, 1fr);
    width: 100%;
    max-width: 1240px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-image: url('/galaxy.png');
    gap: 2px;
}

.header-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #444;
    z-index: 1;
}

.col-header {
    grid-row: 1;
}

.row-header {
    grid-column: 1;
}

.empty-header {
    background: transparent;
    border: none;
    grid-column: 1;
    grid-row: 1;
}

.popover-close {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #fff;
    background: transparent;
}

.galaxy-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100vh - 80px);
    box-sizing: border-box;
}

.galaxy-grid-panel {
    flex: 8 1 0;
    min-width: 0;
    overflow: auto;
}

.galaxy-details-panel {
    flex: 2 1 0;
    min-width: 200px;
    overflow: auto;
    border-left: 1px solid rgba(255,255,255,0.1);
}