/**
 * ASSP Catalog - Manufacturing UI Upgrade
 * Technical Blueprint Aesthetic
 * 
 * Design Principles:
 * - Restrained, professional, industrial
 * - Minimal border-radius (2-3px max)
 * - Hard-edged grids and tables
 * - Technical typography (Geist Mono + IBM Plex Sans)
 * - Subtle interactions (no floating effects)
 * - Data-first density
 */

/* ========================================
   1. TYPOGRAPHY SYSTEM - Technical Stack
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Industrial color refinements */
    --color-steel-gray: #3A4556;
    --color-blueprint-blue: #1F6FB2;
    --color-technical-border: #D1D5DB;
    --color-data-background: #F9FAFB;
    --color-grid-line: #E5E7EB;
    
    /* Minimal radius - industrial restraint */
    --radius-technical: 3px;
    --radius-minimal: 2px;
    
    /* Technical shadows - subtle depth only */
    --shadow-technical: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-technical-hover: 0 2px 4px rgba(0, 0, 0, 0.08);
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
}

/* Technical monospace for codes and data */
.copyable-code,
.company-number-value,
.code-item code,
.product-result-code,
pre,
code {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Headings - clean, technical */
h1, h2, h3, h4, h5, h6 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ========================================
   2. MINIMAL RADIUS - Industrial Restraint
   ======================================== */

/* Remove excessive consumer-grade roundness */
.catalog-hero,
.catalog-search-card,
.product-result-card,
.catalog-result-card,
.detail-container,
.detail-section-card,
.detail-sidebar-card,
#searchInput,
.search-box button,
.primary-btn,
#searchBtn,
.view-detail-btn {
    border-radius: var(--radius-technical) !important;
}

/* Chips and pills - slightly rounder but still restrained */
.catalog-chip,
.company-number-badge,
.detail-eyebrow {
    border-radius: 4px !important;
}

/* Inputs and controls - minimal */
input, select, textarea {
    border-radius: var(--radius-minimal) !important;
}

/* ========================================
   3. HOVER EFFECTS - Subtle, No Float
   ======================================== */

/* Remove floating effects - too consumer-grade */
.catalog-hero:hover,
.catalog-search-card:hover,
.product-result-card:hover,
.catalog-result-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-technical-hover);
    border-color: var(--color-blueprint-blue);
}

.primary-btn:hover,
#searchBtn:hover,
.view-detail-btn:hover {
    transform: none !important;
    background: var(--color-accent-hover);
    box-shadow: none;
}

/* ========================================
   4. NAVIGATION - Solid, Industrial
   ======================================== */

.site-nav {
    backdrop-filter: none !important;
    background: var(--color-site-charcoal) !important;
    border-bottom: 2px solid var(--color-blueprint-blue);
}

/* ========================================
   5. SEARCH HERO - Functional Focus
   ======================================== */

.catalog-hero {
    border-top: 3px solid var(--color-blueprint-blue);
    border-left: none;
    border-right: none;
    box-shadow: none;
}

.catalog-intro {
    max-width: 100%;
}

.catalog-intro h1 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    max-width: 100%;
    margin-bottom: 0.75rem;
}

.catalog-subtitle {
    font-size: 1.05rem;
    color: var(--color-muted);
    max-width: 65ch;
}

/* Capability chips - technical labels */
.catalog-chip {
    background: var(--color-data-background);
    border: 1px solid var(--color-technical-border);
    color: var(--color-steel-gray);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    transition: all 0.2s ease;
}

.catalog-chip:hover {
    background: var(--color-blueprint-blue);
    color: white;
    border-color: var(--color-blueprint-blue);
}

/* ========================================
   6. SEARCH CARD - Technical Interface
   ======================================== */

.catalog-search-card {
    background: white;
    border: 2px solid var(--color-technical-border);
    box-shadow: var(--shadow-technical);
}

#searchInput {
    border: 2px solid var(--color-technical-border);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

#searchInput:focus {
    border-color: var(--color-blueprint-blue);
    box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.1);
}

/* ========================================
   7. RESULTS GRID - Data-First Density
   ======================================== */

.catalog-result-card,
.product-result-card {
    border: 1px solid var(--color-technical-border);
    background: white;
    box-shadow: var(--shadow-technical);
    transition: all 0.2s ease;
}

.catalog-result-card:hover,
.product-result-card:hover {
    border-color: var(--color-blueprint-blue);
    box-shadow: var(--shadow-technical-hover);
}

/* Result card header - technical emphasis */
.product-result-header {
    border-bottom: 1px solid var(--color-grid-line);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.product-result-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.3;
}

.product-result-code {
    font-size: 0.875rem;
    color: var(--color-steel-gray);
    margin-top: 0.25rem;
}

/* ========================================
   8. DETAIL PAGE - Technical Specification
   ======================================== */

/* Header band - industrial precision */
.detail-identity-band {
    border-bottom: 2px solid var(--color-technical-border);
    background: linear-gradient(to bottom, #FAFBFC 0%, white 100%);
}

.detail-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-steel-gray);
    background: var(--color-data-background);
    border: 1px solid var(--color-technical-border);
    padding: 0.375rem 0.75rem;
    display: inline-block;
}

/* Title bar - left-right technical layout */
.detail-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.detail-titlebar h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.2;
}

.company-number-badge {
    text-align: right;
    background: white;
    border: 1px solid var(--color-technical-border);
    padding: 0.75rem 1rem;
}

.company-number-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.company-number-value {
    font-size: 1.125rem;
    color: var(--color-blueprint-blue);
    font-weight: 600;
    display: block;
}

/* ========================================
   9. DATA TABLES - Grid-First Layout
   ======================================== */

/* Specification sections - true table style */
.detail-section-card {
    border: 1px solid var(--color-technical-border);
    background: white;
    box-shadow: none;
}

.detail-section-heading {
    background: var(--color-data-background);
    border-bottom: 2px solid var(--color-technical-border);
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-steel-gray);
    margin: 0;
}

/* Info grid - aligned columns */
.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    border-top: 1px solid var(--color-grid-line);
}

.detail-info-row {
    display: contents;
}

.detail-info-label,
.detail-info-value {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-grid-line);
}

.detail-info-label {
    background: var(--color-data-background);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-steel-gray);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-info-value {
    background: white;
    font-size: 0.9375rem;
    color: var(--color-ink);
}

/* ========================================
   10. OEM/MOOG CODES - Technical Grid
   ======================================== */

.detail-codes-section {
    border: 1px solid var(--color-technical-border);
    background: white;
}

.code-section-heading {
    background: var(--color-data-background);
    border-bottom: 1px solid var(--color-technical-border);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-steel-gray);
}

.code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0;
}

.code-item {
    border-right: 1px solid var(--color-grid-line);
    border-bottom: 1px solid var(--color-grid-line);
    padding: 0.75rem 1rem;
    background: white;
    transition: background 0.15s ease;
}

.code-item:hover {
    background: var(--color-data-background);
}

.code-item code {
    font-size: 0.875rem;
    color: var(--color-blueprint-blue);
    font-weight: 600;
}

/* ========================================
   11. VEHICLE COMPATIBILITY TABLE
   ======================================== */

.detail-vehicle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.detail-vehicle-table thead {
    background: var(--color-data-background);
    border-bottom: 2px solid var(--color-technical-border);
}

.detail-vehicle-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-steel-gray);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.detail-vehicle-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-grid-line);
    color: var(--color-ink);
}

.detail-vehicle-table tbody tr:hover {
    background: var(--color-data-background);
}

/* ========================================
   12. BUTTONS - Restrained Interaction
   ======================================== */

.view-detail-btn {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border: none;
    background: var(--color-blueprint-blue);
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.view-detail-btn:hover {
    background: var(--color-accent-hover);
}

/* ========================================
   13. PAGINATION - Clean, Technical
   ======================================== */

.pagination {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}

.page-btn {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-technical-border);
    background: white;
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-btn:hover:not(.active):not(:disabled) {
    border-color: var(--color-blueprint-blue);
    background: var(--color-data-background);
}

.page-btn.active {
    background: var(--color-blueprint-blue);
    color: white;
    border-color: var(--color-blueprint-blue);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========================================
   14. FOOTER - Minimal, Industrial
   ======================================== */

.site-footer {
    background: var(--color-site-footer);
    border-top: 3px solid var(--color-blueprint-blue);
}

/* ========================================
   15. RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .detail-titlebar {
        flex-direction: column;
        gap: 1rem;
    }
    
    .company-number-badge {
        text-align: left;
        width: 100%;
    }
    
    .detail-info-grid {
        grid-template-columns: 1fr;
    }
    
    .code-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}