/**
 * PC Builder Compatibility Base Styles
 * 
 * Common compatibility styles and container styles.
 */

/* Compatibility Checks Container */
.pc-builder-compatibility-container {
    width: 100%;
    max-width: 100%;
    margin: 32px 0 0 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(35,103,218,0.04);
    padding: 0 0 24px 0;
}

.pc-builder-compatibility-header h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.pc-builder-compatibility-content {
    min-height: 100px;
}

.pc-builder-compatibility-notes {
    /* Notes will be populated dynamically */
}

.compatibility-warning-item {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    color: #dc2626;
    font-size: 14px;
}

/* Responsive design for compatibility sections */
@media (max-width: 768px) {
    .pc-builder-compatibility-container {
        margin: 20px auto;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .pc-builder-compatibility-container {
        margin: 16px auto;
        padding: 12px;
        border-radius: 8px;
    }
    
    .pc-builder-compatibility-header h3 {
        font-size: 18px;
    }
}

/* ========================================
   UNIFIED COMPATIBILITY STYLES
   ======================================== */

/**
 * Unified compatibility section container
 * Replaces: .pc-builder-motherboard-compatibility, .pc-builder-power-supply-compatibility, .pc-builder-computer-case-compatibility
 */
.compatibility-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 32px 0 0 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(35,103,218,0.04);
    padding: 24px 0;
}

.compatibility-section h3 {
    margin: 0 0 24px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/**
 * Unified compatibility label
 * Replaces: .pc-builder-socket-label, .pc-builder-ram-label, .pc-builder-m2-label, .pc-builder-pcie-label, etc.
 */
.compatibility-label {
    font-size: 16px;
    font-weight: 600;
    color: #555;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

/**
 * Unified slot row container
 * Replaces: .pc-builder-socket-row, .pc-builder-ram-row, .pc-builder-m2-slot-row, .pc-builder-pcie-slot-row, .psu-slot-row, .case-slot-row
 */
.compatibility-slot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    transition: all 0.3s ease;
}

/* Compatibility states - unified across all sections */
.compatibility-slot-row.compatible {
    border-color: #10b981;
    background: #f0fdf4; /* Using RAM's color as reference */
}

.compatibility-slot-row.incompatible {
    border-color: #ef4444;
    background: #fef2f2;
}

.compatibility-slot-row.empty {
    border-color: #d1d5db;
    background: #f3f4f6;
}

.compatibility-slot-row.redundant {
    border-color: #ef4444;
    background: #fef2f2;
    border-width: 2px;
}

/**
 * Special PCIe covering functionality - MUST BE PRESERVED
 * This is the special case you mentioned for PCIe slot covering
 */
.compatibility-slot-row.covered {
    border: 2px dashed #888;
    background: #f9f9f9;
}

/**
 * Unified slot box (left side)
 * Replaces: .pc-builder-socket-box, .pc-builder-ram-box, .pc-builder-m2-slot-box, .pc-builder-pcie-slot-box, .psu-slot-box, .case-slot-box
 */
.compatibility-slot-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 5px 5px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    min-width: 140px; /* Unified width - accommodates all content types */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Redundant state for slot boxes */
.compatibility-slot-box.redundant {
    background: #fef2f2;
    border-color: #ef4444;
}

.compatibility-slot-box.redundant .slot-number,
.compatibility-slot-box.redundant .slot-value,
.compatibility-slot-box.redundant .slot-arrow {
    color: #dc2626;
}

/**
 * Unified device box (right side)
 * Replaces: .pc-builder-processor-box, .pc-builder-ram-module-box, .pc-builder-m2-ssd-box, .pc-builder-pcie-device-box, .psu-device-box, .case-device-box
 */
.compatibility-device-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 5px 5px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    flex: 1;
    min-width: 0; /* Allow shrinking to accommodate content */
}

.compatibility-device-box.empty {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

/**
 * Unified text elements
 */
.slot-number {
    font-weight: 600;
    color: #374151;
    font-size: 12px;
}

.slot-value {
    color: #6b7280;
    font-size: 12px;
}

.slot-arrow {
    color: #6b7280;
    font-size: 14px;
    font-weight: bold;
    margin-left: auto;
}

.device-info {
    flex: 1;
    min-width: 0;
}

.device-title {
    font-weight: 500;
    color: #374151;
    font-size: 12px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-type {
    color: #6b7280;
    font-size: 10px;
}

/**
 * Unified thumbnail styles
 */
.device-thumb {
    flex: 0 0 40px;
}

.device-thumb img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
}

/**
 * Unified compatibility icons
 */
.compat-icon {
    font-weight: bold;
    font-size: 18px;
}

.compat-icon.compatible {
    color: #10b981;
}

.compat-icon.incompatible {
    color: #ef4444;
}

/**
 * Unified redundant section styles
 */
.compatibility-redundant-section {
    margin-top: 10px;
    padding-top: 10px;
}

.compatibility-redundant-label {
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #fecaca;
}

/**
 * Unified responsive styles
 */
@media (max-width: 768px) {
    .compatibility-section {
        margin: 20px auto;
        padding: 16px;
    }
    
    .compatibility-slot-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .compatibility-slot-box {
        justify-content: center;
        min-width: auto; /* Remove min-width on mobile */
        width: 100%; /* Full width on mobile */
    }
    
    .compatibility-device-box {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .device-info {
        text-align: center;
    }
    
    .device-title {
        white-space: normal;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .compatibility-section {
        margin: 16px auto;
        padding: 12px;
        border-radius: 8px;
    }
    
    .compatibility-section h3 {
        font-size: 18px;
    }
    
    .compatibility-label {
        font-size: 14px;
    }
    
    .compatibility-slot-box,
    .compatibility-device-box {
        padding: 10px 12px;
    }
}

/* ========================================
   COMMON COMPATIBILITY ROW & COLUMN STYLES
   ======================================== */

/**
 * Common row container for all compatibility sections
 * Replaces: .pc-builder-motherboard-row, .pc-builder-power-supply-row, .pc-builder-computer-case-row
 */
.pc-builder-compatibility-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

/**
 * Common column styles for all compatibility sections
 * Replaces: .pc-builder-socket-col, .pc-builder-ram-col, .pc-builder-m2-col, 
 *          .pc-builder-atx-eps-col, .pc-builder-pcie-col, .pc-builder-sata-col, .pc-builder-molex-col,
 *          .pc-builder-internal-col, .pc-builder-external-col
 */
.pc-builder-compatibility-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/**
 * Common responsive styles for all compatibility rows
 */
@media (max-width: 900px) {
    .pc-builder-compatibility-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .pc-builder-compatibility-col {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .pc-builder-compatibility-row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
} 

/* Ensure single column in a row takes only half width on desktop, but full width on mobile */
.pc-builder-compatibility-row > .pc-builder-compatibility-col:only-child {
  flex: 0 0 50%;
  max-width: 50%;
}

@media (max-width: 768px) {
  .pc-builder-compatibility-row > .pc-builder-compatibility-col:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
}