body {
    background-color: #121212; /* Deep Dark */
    color: #e0e0e0;
    overflow-y: hidden; /* Prevent body scroll, handle inside content-area */
    height: 100vh;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #1a1a1a !important;
}

.content-area {
    margin-top: 110px; /* Height of header */
    height: calc(100vh - 110px);
    overflow-y: auto; /* Internal Scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
    padding-top: 10px;
}

.card {
    background-color: #1e1e1e;
    border: 1px solid #333;
    transition: transform 0.2s;
    cursor: pointer;
}

.card:active {
    transform: scale(0.98);
}

.badge-planet {
    background-color: #0d6efd;
    font-size: 0.75rem;
    margin-right: 5px;
}

.drop-chance {
    font-family: monospace;
    color: #ffc107; /* Gold color for rates */
}

/* Modal Styling */
.modal-content {
    background-color: #212529;
    border: 1px solid #444;
}

.table-dark {
    --bs-table-bg: #212529;
}

/* Relic Hover Overlay */
.relic-popover {
    display: none;
    position: absolute;
    background: #2b2b2b;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px;
    z-index: 9999;
    width: 300px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    pointer-events: none; /* Let mouse pass through so it doesn't flicker */
}

.relic-popover h6 {
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    margin-bottom: 8px;
    color: #ffd700; /* Gold */
}

.rarity-common { color: #cd7f32; } /* Bronze */
.rarity-uncommon { color: #c0c0c0; } /* Silver */
.rarity-rare { color: #ffd700; font-weight: bold; } /* Gold */

.popover-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

/* Relic Hover Popover (Desktop) */
.relic-popover {
    display: none;
    position: absolute;
    background: #2b2b2b;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px;
    z-index: 10000; /* Above modal */
    width: 250px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
    pointer-events: none;
}

.relic-popover h6 {
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    margin-bottom: 8px;
    color: #ffd700;
    font-size: 0.9rem;
}

.popover-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 2px;
}

/* Expansion Table (Inside Modal) */
.relic-expansion {
    background-color: #1a1a1a;
    border-top: 1px solid #444;
    font-size: 0.85rem;
}

.rarity-common { color: #cd7f32; }    /* Bronze */
.rarity-uncommon { color: #c0c0c0; }  /* Silver */
.rarity-rare { color: #ffd700; font-weight: bold; }      /* Gold */

.table-rates th { color: #888; font-weight: normal; font-size: 0.75rem; }
.table-rates td { vertical-align: middle; }

/* RARITY COLORS (Shared by Overlay and Table) */
.rarity-common { 
    color: #cd7f32 !important; /* Bronze */
} 
.rarity-uncommon { 
    color: #b0c4de !important; /* Silver/Light Steel Blue for readability */
} 
.rarity-rare { 
    color: #ffd700 !important; /* Gold */
    font-weight: bold; 
}

/* Ensure the table backgrounds don't clash */
.relic-expansion {
    background-color: #151515; /* Slightly darker than list item */
    border-top: 1px solid #333;
}

/* Rotation Headers (Location View) */
.rotation-header {
    background-color: #2c2c2c;
    color: #a0a0a0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    margin-top: 8px;
    border-left: 3px solid #0d6efd; /* Blue accent */
    font-weight: bold;
}

/* Planet List Buttons */
.btn-planet {
    background-color: #1a1a1a;
    border: 1px solid #333;
    color: #e0e0e0;
    text-align: left;
    transition: all 0.2s;
}
.btn-planet:hover {
    background-color: #252525;
    border-color: #555;
    color: #fff;
}
.btn-planet .badge {
    float: right;
}

/* LOCATION CARD */
.location-card {
    border-color: #0d6efd !important; /* Blue border */
}

.location-card .card-header-text {
    color: #0d6efd !important;
}

/* ITEM CARD */
.item-card {
    border-color: #495057 !important; /* Grey border */
}