/* Pokemon List */
.pokemon-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.pokemon-list.grid-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    align-content: start;
}

/* Pokemon List Item */
.pokemon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
}

.pokemon-item:hover {
    background-color: var(--hover-color);
}

.pokemon-item.added {
    background-color: var(--accent-selected-bg);
}

/* Pokemon Card (Grid View) */
.pokemon-card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.pokemon-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
}

.pokemon-card.added {
    background-color: var(--accent-selected-bg);
    border-color: var(--accent-color);
}

/* Card Image */
.card-img-container {
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    overflow: hidden;
}

.card-img-container img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

/* Sprite Sheet based sprite */
.pokemon-sprite {
    width: 96px;
    height: 96px;
    background-image: url('../data/spritesheet.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* Pokemon Info (shared between list and card views) */
.pokemon-info,
.card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pokemon-info .pokemon-id,
.card-info .pokemon-id {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.pokemon-info .pokemon-name,
.card-info .pokemon-name {
    font-weight: bold;
    font-size: 0.9rem;
}

.pokemon-info .pokemon-types,
.card-info .pokemon-types {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.pokemon-info .pokemon-types span,
.card-info .pokemon-types span {
    font-size: 0.6rem;
    padding: 1px 4px;
}

/* List view specific adjustments */
.pokemon-item .pokemon-info {
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.pokemon-item .pokemon-info .pokemon-id,
.pokemon-item .pokemon-info .pokemon-name {
    margin-bottom: 0;
}

/* Type Badges */
.type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.type-badge.type-normal { background-color: var(--type-normal); }
.type-badge.type-fire { background-color: var(--type-fire); }
.type-badge.type-water { background-color: var(--type-water); }
.type-badge.type-electric { background-color: var(--type-electric); }
.type-badge.type-grass { background-color: var(--type-grass); }
.type-badge.type-ice { background-color: var(--type-ice); }
.type-badge.type-fighting { background-color: var(--type-fighting); }
.type-badge.type-poison { background-color: var(--type-poison); }
.type-badge.type-ground { background-color: var(--type-ground); }
.type-badge.type-flying { background-color: var(--type-flying); }
.type-badge.type-psychic { background-color: var(--type-psychic); }
.type-badge.type-bug { background-color: var(--type-bug); }
.type-badge.type-rock { background-color: var(--type-rock); }
.type-badge.type-ghost { background-color: var(--type-ghost); }
.type-badge.type-dragon { background-color: var(--type-dragon); }
.type-badge.type-dark { background-color: var(--type-dark); }
.type-badge.type-steel { background-color: var(--type-steel); }
.type-badge.type-fairy { background-color: var(--type-fairy); }

/* Egg Group Badges */
.egg-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Hide egg groups when toggle is off */
.pokemon-list.hide-egg-groups .egg-groups {
    display: none;
}

/* Hide stats when toggle is off */
.pokemon-list.hide-stats .pokemon-stats {
    display: none;
}

.egg-badge {
    font-size: 0.6rem;
    padding: 0 4px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid currentColor;
    white-space: nowrap;
    text-transform: uppercase;
}

.egg-badge.egg-monster { color: var(--egg-monster); border-color: var(--egg-monster); }
.egg-badge.egg-water1 { color: var(--egg-water1); border-color: var(--egg-water1); }
.egg-badge.egg-water2 { color: var(--egg-water2); border-color: var(--egg-water2); }
.egg-badge.egg-water3 { color: var(--egg-water3); border-color: var(--egg-water3); }
.egg-badge.egg-bug { color: var(--egg-bug); border-color: var(--egg-bug); }
.egg-badge.egg-flying { color: var(--egg-flying); border-color: var(--egg-flying); }
.egg-badge.egg-field { color: var(--egg-field); border-color: var(--egg-field); }
.egg-badge.egg-fairy { color: var(--egg-fairy); border-color: var(--egg-fairy); }
.egg-badge.egg-grass { color: var(--egg-grass); border-color: var(--egg-grass); }
.egg-badge.egg-humanlike { color: var(--egg-humanlike); border-color: var(--egg-humanlike); }
.egg-badge.egg-mineral { color: var(--egg-mineral); border-color: var(--egg-mineral); }
.egg-badge.egg-nogender { color: var(--egg-nogender); border-color: var(--egg-nogender); }
.egg-badge.egg-dragon { color: var(--egg-dragon); border-color: var(--egg-dragon); }
.egg-badge.egg-ditto { color: var(--egg-ditto); border-color: var(--egg-ditto); }
.egg-badge.egg-noeggs { color: var(--egg-noeggs); border-color: var(--egg-noeggs); }

/* Pokemon stats row (BST + CR) */
.pokemon-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

/* Stat Badge (BST, CR) */
.stat-badge {
    font-size: 0.6rem;
    padding: 0 4px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    white-space: nowrap;
}