/* ============================================
   SHARED COMPONENTS
   Reusable patterns consolidated for consistency
   ============================================ */

/* ============================================
   GLASS PANEL - Used across all panels
   ============================================ */
.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ============================================
   CARD PREVIEW - Shared across Deck, Stats, Genome
   Unified sticky preview card styling
   ============================================ */
.card-preview-container {
    position: relative;
    aspect-ratio: 488 / 680;
}

.card-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
}

.card-preview-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.85em;
    font-style: italic;
    position: absolute;
    top: 0;
    left: 0;
}

/* ============================================
   CARD HOVER POPUP - Shared across card displays
   Fixed position preview on hover
   ============================================ */
.card-hover-popup {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    animation: fadeIn 0.15s ease;
}

.card-hover-popup img {
    width: 260px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Alias for deck entry previews */
.deck-entry-preview {
    position: fixed;
    right: calc(400px + 280px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    pointer-events: none;
    animation: fadeIn 0.15s ease;
}

.deck-entry-preview img {
    width: 260px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Synergy card preview */
.synergy-card-preview {
    position: fixed;
    right: calc(400px + 280px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    pointer-events: none;
    animation: fadeIn 0.15s ease;
}

.synergy-card-preview img {
    width: 260px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* Enlarged preview overlay (on hover of deck preview) */
.enlarged-preview-overlay {
    position: fixed;
    transform: translate(-50%, 0);
    z-index: 10000;
    pointer-events: auto;
}

.enlarged-preview-image {
    max-width: 400px;
    max-height: 560px;
    border-radius: 4.75% / 3.5%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
}

/* ============================================
   SCROLLABLE LIST CONTAINER
   Shared across deck list, search results, library
   ============================================ */
.scrollable-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Deck list specific */
.deck-list-scrollable {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    height: 100%;
    /* CRITICAL: Take full height of parent */
}

/* ============================================
   SYNERGY ITEM - Shared synergy display
   Used in Stats panel and Genome info panel
   ============================================ */
.synergy-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.synergy-item:hover {
    background: rgba(255, 200, 100, 0.2);
    transform: translateX(4px);
}

.synergy-item.expanded {
    background: rgba(158, 158, 255, 0.2);
    border-left: 3px solid var(--accent-color);
}

.synergy-item.clickable {
    cursor: pointer;
    user-select: none;
}

.synergy-item.clickable:hover {
    background: rgba(255, 255, 255, 0.1);
}

.synergy-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px currentColor;
}

.synergy-card-name {
    font-size: 0.8em;
    color: #ddd;
}

.synergy-badge {
    background: var(--accent-color);
    color: #121212;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
}

.synergy-reason {
    padding: 8px 12px;
    margin-top: 4px;
    margin-left: 18px;
    background: rgba(0, 0, 0, 0.4);
    border-left: 2px solid rgba(158, 158, 255, 0.5);
    border-radius: 4px;
    font-size: 0.75em;
    color: #aaa;
    line-height: 1.4;
}

.synergy-expand-icon {
    width: 16px;
    font-size: 0.7em;
    color: #888;
    margin-right: 8px;
}

.synergy-details {
    margin-left: 24px;
    padding: 8px 0;
    border-left: 2px solid rgba(158, 158, 255, 0.3);
    margin-top: 4px;
}

/* ============================================
   CARD DETAIL PANEL
   Reusable component for card synergies with hover preview
   ============================================ */
.card-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
}

.card-detail-layout-horizontal {
    display: flex;
    gap: 20px;
}

.card-detail-list-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.synergy-items-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================
   MANA SYMBOLS
   Shared mana symbol display
   ============================================ */
.mana-symbol {
    width: 16px;
    height: 16px;
}

.mana-symbol-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.4;
    filter: grayscale(100%) brightness(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mana-symbol-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.mana-symbol-btn:hover {
    opacity: 0.8;
    filter: grayscale(30%) brightness(1);
    transform: scale(1.1);
}

.mana-symbol-btn.active {
    opacity: 1;
    filter: grayscale(0%) brightness(1.1);
    transform: scale(1.15);
    z-index: 10;
}

.mana-symbol-btn.active img {
    box-shadow: 0 0 15px var(--accent-glow);
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading-text {
    color: #888;
    font-style: italic;
    font-size: 0.85em;
}

.placeholder-text {
    color: #666;
    font-style: italic;
    margin: 8px 0;
    text-align: center;
}

.no-results {
    text-align: center;
    color: #666;
    padding: 40px;
}

.no-selection {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
    border: 1px dashed #444;
    border-radius: 8px;
}

/* ============================================
   BADGE COMPONENTS
   ============================================ */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.badge.free {
    background: #e0e0e0;
    color: #666;
}

.badge.pro {
    background: gold;
    color: black;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* ============================================
   SYNERGY COLOR PALETTE
   ============================================ */
.color-1 {
    color: #4db8ff;
    border-left: 3px solid #4db8ff;
    background: linear-gradient(90deg, rgba(77, 184, 255, 0.1), transparent);
}

.color-2 {
    color: #50fa7b;
    border-left: 3px solid #50fa7b;
    background: linear-gradient(90deg, rgba(80, 250, 123, 0.1), transparent);
}

.color-3 {
    color: #ff79c6;
    border-left: 3px solid #ff79c6;
    background: linear-gradient(90deg, rgba(255, 121, 198, 0.1), transparent);
}

.color-4 {
    color: #f1fa8c;
    border-left: 3px solid #f1fa8c;
    background: linear-gradient(90deg, rgba(241, 250, 140, 0.1), transparent);
}

.color-5 {
    color: #bd93f9;
    border-left: 3px solid #bd93f9;
    background: linear-gradient(90deg, rgba(189, 147, 249, 0.1), transparent);
}

/* ============================================
   VIRTUAL LIST - Efficient windowed scrolling
   ============================================ */
.virtual-list {
    position: relative;
    overflow-y: auto;
    height: 100%;
}

.virtual-list-item {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
}

/* Grid variant for card grids */
.virtual-grid {
    position: relative;
    overflow-y: auto;
    height: 100%;
}

.virtual-grid-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    gap: 16px;
    padding: 0 16px;
    box-sizing: border-box;
}