/**
 * Software/VDB Page Styles
 * Matches live site software.css structure
 */

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    padding: 2rem 0;
    padding-top: 7rem; /* Account for fixed header (5rem) + spacing */
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
    margin-bottom: 1.5rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    font-size: 0.875rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    color: hsl(var(--muted-foreground));
}

.breadcrumb a {
    color: hsl(var(--muted-foreground));
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: hsl(var(--primary));
}

.breadcrumb .current {
    color: hsl(var(--foreground));
}

/* ============================================
   SEARCH
   ============================================ */
.search-container {
    position: relative;
    margin-bottom: 2rem;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
}

.search-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background-color: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

.search-input::placeholder {
    color: hsl(var(--muted-foreground));
}

.search-input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

/* ============================================
   PAGE TITLES
   ============================================ */
.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .page-title {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    .section-title {
        font-size: 1.5rem;
    }
}

/* ============================================
   VENDOR CATALOG - PRODUCT GRID
   ============================================ */
.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

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

.product-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-link {
    display: block;
    color: hsl(var(--primary));
    text-decoration: none;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.product-link:hover {
    text-decoration: underline;
}

/* ============================================
   PRODUCT VERSION - INFO GRID
   ============================================ */
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .info-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    overflow: hidden;
}

.card-header {
    padding: 1.5rem 1.5rem 0;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.card-title-sm {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.card-content {
    padding: 1.5rem;
}

/* ============================================
   INFO ROWS (Product Details)
   ============================================ */
.info-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.info-row svg {
    color: hsl(var(--muted-foreground));
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.info-label {
    color: hsl(var(--muted-foreground));
}

.info-link {
    color: hsl(var(--primary));
    text-decoration: none;
}

.info-link:hover {
    text-decoration: underline;
}

/* ============================================
   SEVERITY CHART
   ============================================ */
.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pie-chart {
    width: 160px;
    height: 160px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    font-size: 0.875rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

.legend-color.critical { background-color: hsl(var(--critical)); }
.legend-color.high { background-color: hsl(var(--high)); }
.legend-color.medium { background-color: hsl(var(--medium)); }
.legend-color.low { background-color: hsl(var(--low)); }

/* ============================================
   VERSION SWITCHER
   ============================================ */
.version-section {
    margin-bottom: 2rem;
}

.version-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.version-toggle:hover {
    text-decoration: underline;
}

.chevron-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.chevron-icon.rotated {
    transform: rotate(180deg);
}

.version-list {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
    background-color: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
}

.version-list.is-visible {
    display: grid;
}

@media (min-width: 640px) {
    .version-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .version-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .version-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

.version-link {
    display: block;
    padding: 0.5rem;
    color: hsl(var(--primary));
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

.version-link:hover {
    background-color: hsl(var(--primary) / 0.1);
    text-decoration: underline;
}

.version-link.active {
    background-color: hsl(var(--primary) / 0.15);
    font-weight: 500;
}

/* ============================================
   VULNERABILITY TABLE
   ============================================ */
.table-section {
    margin-bottom: 2rem;
}

.vuln-table {
    width: 100%;
    border-collapse: collapse;
}

.vuln-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
    background-color: hsl(var(--secondary));
}

.vuln-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid hsl(var(--border));
    vertical-align: top;
}

.vuln-table tr:last-child td {
    border-bottom: none;
}

.vuln-table tr:hover {
    background-color: hsl(var(--secondary));
}

/* Table Column Widths */
.col-vuln {
    width: 50%;
}

.col-severity {
    width: 15%;
}

.col-status {
    width: 15%;
}

.col-date {
    width: 20%;
}

.vuln-link {
    color: hsl(var(--primary));
    text-decoration: none;
}

.vuln-link:hover {
    text-decoration: underline;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: capitalize;
}

.badge-critical {
    background-color: hsl(var(--critical));
    color: hsl(var(--critical-foreground));
}

.badge-high {
    background-color: hsl(var(--high));
    color: hsl(var(--high-foreground));
}

.badge-medium {
    background-color: hsl(var(--medium));
    color: hsl(var(--medium-foreground));
}

.badge-low {
    background-color: hsl(var(--low));
    color: hsl(var(--low-foreground));
}

/* Status badges */
.status-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.status-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 500;
    border-radius: 0.25rem;
    text-transform: uppercase;
}

.status-tag.patched {
    background-color: hsl(var(--success) / 0.15);
    color: hsl(var(--success));
}
.status-tag.not-patched {
    background-color: hsl(var(--success) / 0.15);
    color: hsl(var(--warning));
}


.status-tag.exploited {
    background-color: hsl(var(--destructive) / 0.15);
    color: hsl(var(--destructive));
}

.status-tag.public-exploit {
    background-color: hsl(var(--warning) / 0.15);
    color: hsl(var(--warning));
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 2rem;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    background: transparent;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background-color: hsl(var(--secondary));
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
}

.pagination-ellipsis {
    padding: 0 0.5rem;
    color: hsl(var(--muted-foreground));
}

/* ============================================
   RESULTS COUNT
   ============================================ */
.results-count {
    text-align: center;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 1rem;
}

/* ============================================
   MOBILE RESPONSIVE TABLE
   ============================================ */
@media (max-width: 768px) {
    .vuln-table thead {
        display: none;
    }

    .vuln-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid hsl(var(--border));
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .vuln-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid hsl(var(--border));
    }

    .vuln-table td:last-child {
        border-bottom: none;
    }

    .vuln-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: hsl(var(--muted-foreground));
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .col-vuln, .col-severity, .col-status, .col-date {
        width: 100%;
    }
}