/* Requirements Version Hiding CSS */
/* Hide version numbers to protect IP */

/* Hide version numbers in requirements display */
.requirement-version,
.requirement-version::after,
[class*="version"] {
    display: none !important;
}

/* Hide anything after colon in requirement items */
.requirement-item::after,
.requirement-line::after,
[class*="requirement"]::after {
    content: none !important;
}

/* Target specific requirement display patterns */
.requirement-item,
.requirement-line,
.requirement-entry,
[class*="requirement"] {
    /* Remove version numbers using CSS - this is a fallback */
    /* The JavaScript function hideRequirementVersions() should handle this */
}

/* Hide version numbers in any text that looks like "package: version" */
.requirement-text::after {
    content: none !important;
}

/* Universal version hiding - hide anything that looks like version numbers */
[data-version],
.version-number,
.version-info {
    display: none !important;
}

/* Hide text after colons in requirement displays */
.requirement-display::after,
.requirement-list::after {
    content: none !important;
}

/* Requirements Display Styles */
.requirements-list {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.requirements-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #333;
}

.requirements-header h4 {
    color: #ff6b35;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.requirements-header p {
    color: #888;
    font-size: 14px;
    margin: 0;
}

.ip-protection-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #2a1a0a, #1a0a0a);
    border: 1px solid #ff6b35;
    border-radius: 20px;
    font-size: 12px;
    color: #ff6b35;
}

.protection-icon {
    font-size: 14px;
}

.protection-text {
    font-weight: 500;
}

.requirements-category {
    margin-bottom: 25px;
}

.category-title {
    color: #ff6b35;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border-left: 4px solid #ff6b35;
    border-radius: 4px;
}

.packages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.package-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #2a2a2a;
    border-radius: 6px;
    border: 1px solid #333;
    transition: all 0.2s ease;
}

.package-item:hover {
    background: #333;
    border-color: #ff6b35;
}

.package-name {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.package-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.package-status.required {
    background: #ff6b35;
    color: #fff;
}

.package-status.optional {
    background: #4a90e2;
    color: #fff;
}

.package-status.warning {
    background: #f39c12;
    color: #fff;
}

.requirements-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.requirements-actions .btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.requirements-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Compatibility Results */
.compatibility-results,
.conflict-results,
.security-results {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.compatibility-results h4,
.conflict-results h4,
.security-results h4 {
    color: #ff6b35;
    font-size: 18px;
    margin: 0 0 15px 0;
}

.compatibility-summary,
.conflict-summary,
.security-summary {
    text-align: center;
    margin-bottom: 20px;
}

.compatibility-status,
.conflict-status,
.security-status {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.compatibility-status.compatible,
.conflict-status.no-conflicts,
.security-status.secure {
    background: #27ae60;
    color: #fff;
}

.compatibility-status.incompatible,
.conflict-status.has-conflicts,
.security-status.has-vulnerabilities {
    background: #e74c3c;
    color: #fff;
}

.compatibility-issues,
.conflicts-list,
.vulnerabilities-list {
    margin: 15px 0;
}

.compatibility-issue,
.conflict-item,
.vulnerability-item {
    background: #2a2a2a;
    padding: 12px;
    margin: 8px 0;
    border-radius: 6px;
    border-left: 4px solid #e74c3c;
}

.compatibility-solution,
.conflict-solution,
.vulnerability-fix {
    margin-top: 8px;
    padding: 8px;
    background: #1a1a1a;
    border-radius: 4px;
    color: #ff6b35;
    font-style: italic;
}

.compatibility-actions,
.conflict-actions,
.security-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #333;
}

/* Individual Version Selection Styles */
.individual-versions {
    margin-top: 20px;
    padding: 20px;
    background: #2a2a2a;
    border-radius: 8px;
    border: 1px solid #333;
    display: block !important; /* Force visible */
    visibility: visible !important;
}

.version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.individual-versions h4 {
    color: #ff6b35;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.auto-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.auto-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #ff6b35;
}

.auto-checkbox span {
    user-select: none;
}

.version-info {
    color: #888;
    font-size: 13px;
    margin: 10px 0 15px 0;
    font-style: italic;
}

.label-icon {
    margin-right: 5px;
}

.version-controls {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    visibility: visible !important;
    opacity: 1 !important;
}

.version-control {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    visibility: visible !important;
}

.version-control label {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.version-select {
    padding: 10px 12px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    transition: all 0.2s ease;
    display: block !important;
    visibility: visible !important;
    width: 100%;
}

.version-select:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.version-select option {
    background: #1a1a1a;
    color: #fff;
    padding: 8px;
}

.version-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.version-actions .btn {
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.version-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}