/* brakes.css - Styling specifically for brake components */

/* Brake Card Layout */
.brake-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 */
}

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

.brake-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);
}

/* Brake type and rarity info */
.brake-type-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);
}

/* Brake series and rarity info */
.brake-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);
}

/* Brake image container */
.brake-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);
}

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

/* Fallback avatar when no image is available */
.brake-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;
}

/* Base brake image container (keep your existing styles) */
.brake-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Stock (base) brake 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 brake image */
.brake-card:hover .brake-image {
    transform: scale(1.05);
}

/* Dark mode adjustments */
.dark-mode .brake-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);
}