/* engines.css - Styling specifically for engine components */

/* Engine Card Layout */
.engine-card {
    background-color: var(--color-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
    margin-bottom: var(--space-6);
    border: 1px solid transparent; /* For hover effect */
}

.engine-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.engine-card h2 {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 600;
    padding: var(--space-4);
    background-color: var(--color-card-alt);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

/* Engine series and rarity info */
.engine-series-rarity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-card-alt);
    font-size: 0.875rem;
    transition: background-color var(--transition-normal);
}

/* Engine image container */
.engine-image {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    margin-left: var(--space-2);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

/* Engine image */
.engine-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Better for mechanical parts */
    object-position: center center;
}

/* Fallback avatar when no image is available */
.engine-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-card);
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    font-weight: bold;
}

/* Rarity-based background colors for engine images */
.rarity-card-common .engine-image {
    background-color: rgba(51, 102, 204, 0.1);
    border-color: var(--rarity-common-border);
}

.rarity-card-rare .engine-image {
    background-color: rgba(245, 124, 0, 0.1);
    border-color: var(--rarity-rare-border);
}

.rarity-card-epic .engine-image {
    background-color: rgba(123, 31, 162, 0.1);
    border-color: var(--rarity-epic-border);
}

.rarity-card-legendary .engine-image {
    background-color: rgba(255, 152, 0, 0.1);
    border-color: var(--rarity-legendary-border);
}

.rarity-card-stock .engine-image {
    background-color: rgba(128, 128, 128, 0.1);
    border-color: rgba(128, 128, 128, 0.4);
}

/* Dark mode adjustments for engine image backgrounds */
.dark-mode .rarity-card-common .engine-image {
    background-color: rgba(122, 165, 255, 0.15);
    border-color: var(--rarity-common-border);
}

.dark-mode .rarity-card-rare .engine-image {
    background-color: rgba(255, 171, 88, 0.15);
    border-color: var(--rarity-rare-border);
}

.dark-mode .rarity-card-epic .engine-image {
    background-color: rgba(197, 134, 227, 0.15);
    border-color: var(--rarity-epic-border);
}

.dark-mode .rarity-card-legendary .engine-image {
    background-color: rgba(255, 191, 80, 0.15);
    border-color: var(--rarity-legendary-border);
}

.dark-mode .rarity-card-stock .engine-image {
    background-color: rgba(160, 160, 160, 0.15);
    border-color: rgba(160, 160, 160, 0.3);
}

/* Engine inputs */
.engine-inputs {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1.2fr;
    gap: var(--space-3);
    padding: var(--space-4);
    align-items: stretch;
}

/* Engine grid layout - 4 cards per row */
.engine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1600px) {
    .engine-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .engine-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .engine-grid {
        grid-template-columns: 1fr;
    }
}

/* Stock (base) engine styling */
.rarity-stock {
    background-color: rgba(128, 128, 128, 0.1);
    color: #808080;
    border-color: rgba(128, 128, 128, 0.4);
}

/* Rarity-specific hover effects */
.rarity-card-common:hover {
    box-shadow: 0 10px 15px -3px rgba(51, 102, 204, 0.25), 0 4px 6px -2px rgba(51, 102, 204, 0.15);
    border: 1px solid var(--rarity-common-border);
}

.rarity-card-rare:hover {
    box-shadow: 0 10px 15px -3px rgba(245, 124, 0, 0.25), 0 4px 6px -2px rgba(245, 124, 0, 0.15);
    border: 1px solid var(--rarity-rare-border);
}

.rarity-card-epic:hover {
    box-shadow: 0 10px 15px -3px rgba(123, 31, 162, 0.25), 0 4px 6px -2px rgba(123, 31, 162, 0.15);
    border: 1px solid var(--rarity-epic-border);
}

.rarity-card-legendary:hover {
    box-shadow: 0 10px 15px -3px rgba(255, 152, 0, 0.25), 0 4px 6px -2px rgba(255, 152, 0, 0.15);
    border: 1px solid var(--rarity-legendary-border);
}

.rarity-card-stock:hover {
    box-shadow: 0 10px 15px -3px rgba(128, 128, 128, 0.25), 0 4px 6px -2px rgba(128, 128, 128, 0.15);
    border: 1px solid rgba(128, 128, 128, 0.4);
}

/* Hover effect for engine image */
.engine-card:hover .engine-image {
    transform: scale(1.05);
}

/* Dark mode adjustments */
.dark-mode .engine-avatar-fallback {
    background-color: var(--color-card-alt);
    color: var(--color-text-tertiary);
}

.dark-mode .rarity-stock {
    background-color: rgba(160, 160, 160, 0.1);
    color: #a0a0a0;
    border-color: rgba(160, 160, 160, 0.3);
}

.dark-mode .rarity-card-common:hover {
    box-shadow: 0 10px 15px -3px rgba(122, 165, 255, 0.25), 0 4px 6px -2px rgba(122, 165, 255, 0.15);
}

.dark-mode .rarity-card-rare:hover {
    box-shadow: 0 10px 15px -3px rgba(255, 171, 88, 0.25), 0 4px 6px -2px rgba(255, 171, 88, 0.15);
}

.dark-mode .rarity-card-epic:hover {
    box-shadow: 0 10px 15px -3px rgba(197, 134, 227, 0.25), 0 4px 6px -2px rgba(197, 134, 227, 0.15);
}

.dark-mode .rarity-card-legendary:hover {
    box-shadow: 0 10px 15px -3px rgba(255, 191, 80, 0.25), 0 4px 6px -2px rgba(255, 191, 80, 0.15);
}

.dark-mode .rarity-card-stock:hover {
    box-shadow: 0 10px 15px -3px rgba(160, 160, 160, 0.25), 0 4px 6px -2px rgba(160, 160, 160, 0.15);
}