/* cc_windows_doors.css - PREMIUM WIND ENGINEERING PLATFORM */
/* ENTERPRISE-GRADE: Competition-Beating Design with WOW Factor */
/* BRAND COLORS: #181E57 (dark blue), #0018FF (blue), #FFFFFF (white) */

/* ==========================================================================
   MODERN CSS RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* PREMIUM Brand Color System - High Contrast */
    --brand-primary: #181E57;
    --brand-secondary: #0018FF;
    --brand-white: #FFFFFF;
    
    /* PREMIUM Extended Color Palette - Bold & Confident */
    --premium-charcoal: #1E293B;      /* Rich text */
    --premium-silver: #F8FAFC;        /* Light backgrounds */
    --premium-emerald: #10B981;       /* Success/Selected - BOLD */
    --premium-ruby: #EF4444;          /* Error/Critical - BOLD */
    --premium-sapphire: #3B82F6;      /* Info/Accent - BOLD */
    --premium-gold: #F59E0B;          /* Warning/Attention - BOLD */
    --premium-onyx: #0F172A;          /* Deep contrast */
    
    /* High-Contrast Grays - Dramatic Hierarchy */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    
    /* PREMIUM Status Colors - Eye-Popping */
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.1);
    --success-bold: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --warning-bold: rgba(245, 158, 11, 0.15);
    --error: #ef4444;
    --error-light: rgba(239, 68, 68, 0.1);
    --error-bold: rgba(239, 68, 68, 0.15);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.1);
    --info-bold: rgba(59, 130, 246, 0.15);
    
    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Typography Scale - Bold Hierarchy */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 36px;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    
    /* PREMIUM Shadows - Colored & Dynamic */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* PREMIUM Colored Shadows */
    --shadow-brand: 0 20px 40px rgba(24, 30, 87, 0.3);
    --shadow-success: 0 20px 40px rgba(16, 185, 129, 0.4);
    --shadow-warning: 0 20px 40px rgba(245, 158, 11, 0.4);
    --shadow-error: 0 20px 40px rgba(239, 68, 68, 0.4);
    --shadow-info: 0 20px 40px rgba(59, 130, 246, 0.4);
    
    /* Glass Effects - Enhanced */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-bg-dark: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: blur(20px);
    
    /* Transitions */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.25s ease-out;
    --transition-slow: 0.35s ease-out;
    
    /* Z-index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1070;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--premium-charcoal);
    background: linear-gradient(135deg, #0018ff 0%, #181E57 100%);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   ENHANCED BACKGROUND - DYNAMIC GRADIENT
   ========================================================================== */
.cc-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0018ff 0%, #181E57 100%);
    z-index: -1;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   ICON COLOR FIX - WHITE ICONS ON WHITE BACKGROUND
   ========================================================================== */

/* Fix department text colors */
.jurisdiction-name,
.county-name-text,
.jurisdiction-name-text {
    color: #374151 !important;
}

.jurisdiction-dept,
.jurisdiction-dept-text {
    color: #64748b !important;
}

/* Allow status message icons to inherit their parent color */
.status-message .fas,
.status-message .fa {
    color: inherit !important;
}

/* ==========================================================================
   PROFESSIONAL HEADER - ENTERPRISE GRADE
   ========================================================================== */
.cc-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 2px solid rgba(24, 30, 87, 0.15);
    padding: var(--space-lg) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-normal);
}

.cc-header:hover {
    box-shadow: var(--shadow-2xl);
}

.cc-header-content {
    display: flex;
    justify-content: flex-start; /* Change from space-between to flex-start */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.cc-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1; /* Add this to take up available space */
}

.cc-header-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-brand);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.cc-header-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.cc-header-icon:hover::before {
    left: 100%;
}

.cc-header-icon:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-2xl), 0 0 30px rgba(24, 30, 87, 0.5);
}

.cc-header-title {
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 800;
    color: var(--brand-primary);
    margin: 0;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 4px rgba(24, 30, 87, 0.15);
    line-height: 1.2;
}

.cc-header-subtitle {
    font-size: var(--text-sm);
    color: var(--premium-charcoal);
    font-weight: 600;
    letter-spacing: 0.025em;
    margin-top: var(--space-xs);
}

.cc-status-indicator {
    background: var(--success-bold);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-normal);
}

.cc-status-indicator:hover {
    background: rgba(16, 185, 129, 0.2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-success);
}

.cc-status-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.8);
    animation: statusPulse 2s ease-in-out infinite;
}

.cc-status-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* ==========================================================================
   ENHANCED MAIN LAYOUT - MOBILE FIRST
   ========================================================================== */
.cc-main-container {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-xl);
    min-height: calc(100vh - 120px);
    background: transparent !important; 
}

@media (min-width: 1024px) {
    .cc-main-container {
        flex-direction: row;
        padding: var(--space-2xl) var(--space-lg);
    }
}

/* ==========================================================================
   ENHANCED SIDEBAR - RESPONSIVE & ELEGANT
   ========================================================================== */
.cc-sidebar {
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--glass-border);
    height: fit-content;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.cc-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
    z-index: -1;
}

.cc-sidebar:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-2xl);
}

@media (min-width: 1024px) {
    .cc-sidebar {
        width: 320px;
        position: sticky;
        top: calc(120px + var(--space-lg));
    }
}

.cc-sidebar-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid rgba(24, 30, 87, 0.15);
}

.cc-sidebar-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-radius: var(--radius-lg);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: var(--space-md);
    box-shadow: var(--shadow-brand);
    position: relative;
    transition: all var(--transition-normal);
}

.cc-sidebar-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.cc-sidebar-icon:hover::after {
    opacity: 1;
}

.cc-sidebar-icon:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-brand), 0 0 25px rgba(24, 30, 87, 0.4);
}

.cc-sidebar-icon i {
    color: var(--brand-white) !important;
    font-size: 18px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
}

.cc-sidebar-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--brand-primary);
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(24, 30, 87, 0.15);
}

.cc-sidebar-subtitle {
    margin: var(--space-xs) 0 0 0;
    font-size: var(--text-xs);
    color: var(--premium-charcoal);
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

/* Enhanced Navigation Menu */
.cc-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (max-width: 1023px) {
    .cc-nav-menu {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: var(--space-xs);
        padding: 0 var(--space-sm) var(--space-sm) var(--space-sm);
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    
    .cc-nav-menu::-webkit-scrollbar {
        display: none;
    }
    
    .cc-nav-item {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .cc-nav-link {
        display: block;
        padding: 12px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        min-width: max-content;
        white-space: nowrap;
    }
    
    /* Ensure parent containers don't constrain width */
    .cc-sidebar {
        overflow: visible;
        width: 100%;
    }
}

.cc-nav-item {
    margin: 0;
    flex-shrink: 0;
}

.cc-nav-link {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--premium-charcoal);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: all var(--transition-normal);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    gap: var(--space-md);
}

.cc-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(24, 30, 87, 0.15), transparent);
    transition: left 0.5s ease;
}

.cc-nav-link:hover::before {
    left: 100%;
}

.cc-nav-link:hover {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    color: white !important;
    transform: translateX(6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(24, 30, 87, 0.2);
}

.cc-nav-link.active {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    color: white !important;
    border: 2px solid rgba(24, 30, 87, 0.3);
    box-shadow: var(--shadow-brand);
    font-weight: 700;
}

.cc-nav-icon {
    font-size: 16px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .cc-nav-link {
        padding: var(--space-sm) var(--space-md);
        font-size: 12px;
        min-width: max-content;
    }
    
    .cc-nav-icon {
        font-size: 14px;
    }
}

/* Product Specification Navigation Button - Electric Green with WHITE Text/Icons */
#cc-nav-products {
    background: linear-gradient(135deg, #00d4aa 0%, #01a085 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid #00d4aa !important;
    border: 2px solid transparent !important;
}

#cc-nav-products .cc-nav-icon {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    margin-right: 12px !important;
}

#cc-nav-products:hover {
    background: linear-gradient(135deg, #01a085 0%, #047857 100%) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.4) !important;
    color: #ffffff !important;
}

#cc-nav-products.active {
    background: linear-gradient(135deg, #01a085 0%, #047857 100%) !important;
    border-left: 4px solid #01a085 !important;
    box-shadow: 0 6px 20px rgba(0, 212, 170, 0.5) !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
}

/* Engineering Report Navigation Button - Electric Orange with WHITE Text/Icons */
.cc-nav-link.report-nav {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #ffffff !important;
    border-left: 4px solid #ff6b35;
}

.cc-nav-link.report-nav .cc-nav-icon {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 900;
    margin-right: 12px;
}

.cc-nav-link.report-nav:hover {
    background: linear-gradient(135deg, #f7931e 0%, #e67e22 100%);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.cc-nav-link.report-nav.active {
    background: linear-gradient(135deg, #f7931e 0%, #e67e22 100%);
    border-left: 4px solid #f7931e;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
}

/* Additional styling for report panel components */
.compliance-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
}

.compliance-description {
    margin: 4px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.compliance-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.location-display-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.location-name {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
}

.location-metadata {
    margin: 4px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.location-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

/* ==========================================================================
   ENHANCED CONTENT AREA - MOBILE OPTIMIZED
   ========================================================================== */
.cc-content-area {
    flex: 1;
    min-width: 0;
    background: transparent !important;
}

/* ==========================================================================
   CRITICAL FIX: ENSURE BODY GRADIENT SHOWS THROUGH EVERYWHERE
   Force all major containers to be transparent so the vibrant blue gradient
   is visible across the entire page without any darker blue overlays
   ========================================================================== */
body > div,
#_dash-app-content,
#react-entry-point,
.dash-container,
[data-dash-app-container],
.cc-wrapper,
.cc-container,
.main-wrapper,
.main-container,
.content-wrapper,
.content-container,
.app-wrapper,
.app-container,
div[data-dash-is-loading] {
    background: transparent !important;
    background-color: transparent !important;
}


/* ==========================================================================
   REVOLUTIONARY PANEL STYLES - ENTERPRISE GRADE
   ========================================================================== */
.cc-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-2xl);
    padding: clamp(20px, 4vw, 32px);
    border: 2px solid var(--glass-border);
    box-shadow: var(--shadow-xl);
    display: none;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.cc-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.12) 100%);
    pointer-events: none;
    z-index: 0;
}

.cc-panel > * {
    position: relative;
    z-index: 1;
}

.cc-panel.active {
    display: block;
    animation: panelSlideIn 0.4s ease-out;
}

@keyframes panelSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cc-panel:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
}

.cc-panel-title {
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 800;
    color: var(--brand-primary);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 4px rgba(24, 30, 87, 0.15);
}

.cc-panel-icon {
    font-size: clamp(20px, 4vw, 24px);
    color: var(--brand-secondary);
    text-shadow: 0 2px 8px rgba(0, 24, 255, 0.3);
    animation: iconGlow 3s ease-in-out infinite alternate;
}

@keyframes iconGlow {
    0% { text-shadow: 0 2px 8px rgba(0, 24, 255, 0.3); }
    100% { text-shadow: 0 4px 16px rgba(0, 24, 255, 0.6); }
}

.cc-panel-description {
    color: var(--premium-charcoal);
    margin-bottom: var(--space-2xl);
    font-size: var(--text-base);
    line-height: 1.7;
    font-weight: 500;
}

/* ==========================================================================
   TYPOGRAPHY IMPROVEMENTS - SECTION TITLES AND SPACING
   ========================================================================== */
.structure-location-title,
h3.structure-location-title {
    font-size: var(--text-2xl) !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
    margin-bottom: var(--space-lg) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-md) !important;
}

.parameter-section h5,
.section-title,
.wind-parameter-title,
.speed-type-title,
.design-wind-speed-title,
.risk-category-title,
.exposure-category-title,
.enclosure-classification-title {
    font-size: var(--text-2xl) !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
    margin-bottom: var(--space-lg) !important;
    margin-top: var(--space-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-md) !important;
    text-shadow: 0 1px 2px rgba(24, 30, 87, 0.1) !important;
}

.design-wind-speed-section {
    margin-bottom: var(--space-xl) !important;
}

.florida-building-code-notice,
.building-code-notice {
    background: var(--info-bold) !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-lg) !important;
    margin-top: var(--space-lg) !important;
    margin-bottom: var(--space-xl) !important;
    position: relative !important;
    overflow: hidden !important;
}

.florida-building-code-notice::before,
.building-code-notice::before {
    content: '🏢' !important;
    position: absolute !important;
    top: var(--space-md) !important;
    left: var(--space-md) !important;
    font-size: var(--text-lg) !important;
    opacity: 0.7 !important;
}

.florida-building-code-notice h6,
.building-code-notice h6 {
    font-size: var(--text-base) !important;
    font-weight: 700 !important;
    color: var(--info) !important;
    margin-bottom: var(--space-sm) !important;
    padding-left: var(--space-3xl) !important;
}

.florida-building-code-notice p,
.building-code-notice p,
.florida-building-code-notice div,
.building-code-notice div {
    color: var(--slate-700) !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    padding-left: var(--space-3xl) !important;
}

.help-icon,
button[id*="help-btn"],
.help-button {
    background: var(--info-bold) !important;
    border: 2px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    color: var(--info) !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-height: auto !important;
    margin-left: var(--space-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-normal) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.help-icon:hover,
button[id*="help-btn"]:hover,
.help-button:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
}

.parameter-section h5 .help-icon,
.section-title .help-icon,
.speed-type-title .help-icon,
.design-wind-speed-title .help-icon,
.risk-category-title .help-icon,
.exposure-category-title .help-icon,
.enclosure-classification-title .help-icon {
    margin-left: auto !important;
}

/* TYPOGRAPHY IMPROVEMENTS - SECTION TITLES AND SPACING */
.help-text,
p.help-text,
.parameter-section p {
    color: var(--slate-700) !important;
    font-weight: 500 !important;
    font-size: var(--text-sm) !important;
    line-height: 1.6 !important;
}

#county-guidance-container .status-message div.mb-sm {
    padding-left: var(--space-xl) !important;
    margin-bottom: var(--space-sm) !important;
}

/* ==========================================================================
   NEXT-GENERATION FORM ELEMENTS
   ========================================================================== */
.cc-form-group {
    margin-bottom: var(--space-xl);
}

.cc-form-row {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cc-form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cc-form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    position: relative;
}

.cc-form-label::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--brand-secondary);
    opacity: 0.8;
    border-radius: 1px;
}

.cc-form-input {
    width: 100%;
    min-height: 48px;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 2px solid var(--slate-300);
    font-size: var(--text-base);
    font-weight: 500;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: var(--premium-charcoal);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.cc-form-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(24, 30, 87, 0.15), var(--shadow-lg);
    transform: translateY(-2px);
}

.cc-form-input::placeholder {
    color: var(--slate-500);
    font-weight: 400;
}

.cc-form-input:hover {
    border-color: var(--slate-400);
    box-shadow: var(--shadow-md);
}

/* Create a container effect for the input */
.wind-speed-input-wrapper {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 200px;
}

.wind-speed-input-wrapper::after {
    content: "mph";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1;  
    user-select: none;
}

/* Roof height input wrapper with ft suffix - now only applies to Building Geometry inputs */
.roof-height-input-wrapper {
    position: relative;
    width: 85%; /* Makes it 40% shorter than full width */
    display: inline-block;
}

.roof-height-input-wrapper::after {
    content: "ft";
    position: absolute;
    right: 45px; 
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
    font-size: 14px;
    z-index: 1;
}

/* Hide "ft" for component dimensions on Pressure Calculations page only */
#cc-openings-panel .roof-height-input-wrapper::after {
    content: none !important;
}

.roof-height-input {
    width: 100% !important;
    padding-right: 20px !important; /* Increase this significantly */
}

/* Display input and button side by side */
.parameter-section .wind-speed-input-wrapper {
    display: inline-block;
    vertical-align: top;
    margin-right: 32px;
}

.parameter-section #open-asce-modal {
    display: inline-block;
    vertical-align: top;
}

.wind-speed-input {
    width: 400px !important;
    padding-right: 25px !important;
}

.wind-speed-input:not(:placeholder-shown) {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: #10b981 !important;
}

/* ==========================================================================
   REVOLUTIONARY DROPDOWN SYSTEM - MOBILE OPTIMIZED
   ========================================================================== */
.dash-dropdown {
    position: relative;
    z-index: var(--z-dropdown);
}

.Select-control {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 2px solid var(--slate-300) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-xs) var(--space-md) !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-normal) !important;
}

.Select-control:hover {
    border-color: var(--slate-400) !important;
    box-shadow: var(--shadow-md) !important;
}

.Select-control.is-focused {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 4px rgba(24, 30, 87, 0.15), var(--shadow-lg) !important;
    transform: translateY(-2px) !important;
}

.Select-placeholder,
.Select-value,
.Select-value-label,
.Select-input,
.Select-input input {
    color: var(--premium-charcoal) !important;
    font-size: var(--text-base) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.Select-arrow-zone {
    padding-right: var(--space-md) !important;
}

.Select-arrow {
    border-color: var(--brand-primary) transparent transparent !important;
    border-style: solid !important;
    border-width: 6px 6px 0 !important;
    transition: all var(--transition-fast) !important;
}

.Select-control.is-open .Select-arrow {
    border-color: transparent transparent var(--brand-primary) !important;
    border-width: 0 6px 6px !important;
    transform: rotate(180deg) !important;
}

.Select-menu-outer {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 2px solid var(--slate-300) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-2xl) !important;
    z-index: calc(var(--z-dropdown) + 1) !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .Select-menu-outer {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: var(--space-md) !important;
        right: var(--space-md) !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        max-height: 50vh !important;
        animation: slideUpIn 0.3s ease-out !important;
    }
}

@keyframes slideUpIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.Select-menu {
    background: transparent !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--slate-300) transparent !important;
}

.Select-menu::-webkit-scrollbar {
    width: 6px;
}

.Select-menu::-webkit-scrollbar-track {
    background: transparent;
}

.Select-menu::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: 3px;
}

.Select-option {
    background: transparent !important;
    color: var(--premium-charcoal) !important;
    padding: var(--space-md) var(--space-lg) !important;
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
    transition: all var(--transition-fast) !important;
}

.Select-option:hover,
.Select-option.is-focused {
    background: rgba(24, 30, 87, 0.12) !important;
    color: var(--brand-primary) !important;
}

.Select-option.is-selected {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
    color: var(--brand-white) !important;
    font-weight: 600 !important;
}

div[class*="singleValue"] {
    color: var(--premium-charcoal) !important;
    font-weight: 500 !important;
}

div[class*="placeholder"] {
    color: var(--slate-500) !important;
    font-weight: 400 !important;
}

.Select-clear,
.Select-clear-zone,
div[class*="-clearIndicator"],
div[class*="ClearIndicator"] {
    display: none !important;
}

/* ==========================================================================
   MOBILE-RESPONSIVE CARD SYSTEM - ENHANCED FOR ALL SCREEN SIZES
   ========================================================================== */

/* Base parameter grid layout - Mobile First Approach */
.parameter-grid {
    display: grid;
    gap: 16px;
    width: 100%;
    margin-top: 16px;
}

/* Risk categories stay as grid */
.parameter-grid.risk-categories,
.parameter-grid.topographic-categories {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Speed, Exposure, Enclosure use flexbox */
.parameter-grid.speed-types,
.parameter-grid.exposures,
.parameter-grid.enclosures {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 12px;
    margin-top: 16px;
}

/* Tablet and up - Side by side */
@media (min-width: 768px) {
    .parameter-grid.risk-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .parameter-grid.speed-types {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: var(--space-lg);
    }

    .parameter-grid.exposures {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: var(--space-md);
        margin-top: 32px;
    }

    .parameter-grid.enclosures {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: var(--space-md);
        margin-top: 32px;
    }
}

/* Desktop Layout (1024px and up) */
@media (min-width: 1024px) {
    .parameter-grid.risk-categories {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }
    
    .parameter-grid.speed-types {
        gap: var(--space-xl);
    }
    
    .parameter-grid.exposures,
    .parameter-grid.enclosures {
        gap: var(--space-lg);
    }
}

/* Enhanced Card Structure - Consistent sizing */
.cc-selection-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 3px solid rgba(203, 213, 225, 0.6);
    border-radius: var(--radius-xl);
    padding: 20px !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-lg);
}

/* Mobile Card Layout - Horizontal on Small Screens */
@media (max-width: 767px) {
    .cc-selection-card {
        padding: 16px !important;
        min-height: 100px;
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
        gap: 16px;
    }
    
    .cc-selection-card i {
        font-size: 20px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }
    
    .cc-selection-card .card-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
    }
    
    .cc-selection-card h6 {
        margin: 0 0 4px 0 !important;
        font-size: 16px !important;
        text-align: left !important;
    }
    
    .cc-selection-card .card-metadata {
        font-size: 12px !important;
        margin: 2px 0 !important;
        text-align: left !important;
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    .parameter-grid {
        gap: 12px;
    }
    
    .cc-selection-card {
        padding: 14px !important;
        min-height: 85px;
        gap: 14px;
    }
    
    .cc-selection-card i {
        font-size: 18px !important;
    }
    
    .cc-selection-card h6 {
        font-size: 15px !important;
    }
    
    .cc-selection-card .card-metadata {
        font-size: 11px !important;
    }
}

/* Base Card Components */
.card {
background: white;
border: 2px solid #e2e8f0;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: all var(--transition-normal);
}

.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}

.card-header {
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
color: var(--brand-white);
padding: var(--space-lg) var(--space-xl);
display: flex;
justify-content: space-between;
align-items: center;
}

.card-title {
font-size: var(--text-xl);
font-weight: 700;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card-content {
padding: var(--space-xl);
}

/* Compliance Status System */
.compliance-status-display {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: var(--text-sm);
opacity: 0.95;
}

.compliance-indicators {
display: flex;
gap: var(--space-md);
}

.compliance-check-item {
display: flex;
align-items: center;
gap: var(--space-xs);
background: rgba(255, 255, 255, 0.15);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 600;
}

.compliance-check {
color: var(--success);
font-weight: 700;
}

/* Enhanced Structure Location Display */
.structure-location-display-card {
background: white;
border: 2px solid var(--info);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-info);
overflow: hidden;
}

.structure-location-header {
background: linear-gradient(135deg, var(--info), #1d4ed8);
color: white;
padding: var(--space-lg) var(--space-xl);
display: flex;
justify-content: space-between;
align-items: center;
}

.structure-location-content {
padding: 2rem;
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
}

.location-details {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

.primary-location-name {
font-size: 1.3rem;
font-weight: 700;
color: var(--premium-charcoal);
margin: 0;
}

.location-metadata {
color: var(--slate-600);
font-size: var(--text-sm);
font-weight: 500;
}

.wind-speed-summary {
background: var(--success-light);
border: 2px solid var(--success);
border-radius: var(--radius-lg);
padding: var(--space-lg) var(--space-xl);
text-align: center;
min-width: 200px;
}

.wind-speed-number-section {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}

.wind-speed-main-number {
font-size: 2rem;
font-weight: 800;
color: var(--success);
line-height: 1;
}

.wind-speed-unit {
font-size: var(--text-sm);
color: var(--success);
font-weight: 600;
}

.selected-risk-category-label {
font-size: 11px;
color: #065f46;
font-weight: 600;
background: rgba(16, 185, 129, 0.15);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-lg);
display: inline-block;
}

/* Enhanced Selection Cards - Preserving Your Existing Functionality */
.parameter-section {
margin-bottom: var(--space-lg);
margin-top: 8px;
}

.parameter-section h5 {
font-size: var(--text-lg);
font-weight: 700;
color: var(--brand-primary);
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
}

.parameter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
}

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

@media (min-width: 1024px) {
.parameter-grid.risk-categories {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}

.parameter-grid.exposures {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: 32px;  /* ADD THIS LINE */
}

.parameter-grid.enclosures {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: 32px;  /* ADD THIS LINE */
}

.parameter-grid.speed-types {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: 16px;  /* ADD THIS LINE */
}
}

.cc-selection-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 3px solid rgba(203, 213, 225, 0.6);
    border-radius: var(--radius-xl);
    padding: 16px 12px !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    min-height: clamp(120px, 15vh, 160px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px !important;
    box-shadow: var(--shadow-lg);
}

/* Professional Risk Category Grid - Enhanced Layout */
.parameter-grid.risk-categories {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    margin: 1.5rem 0 !important;
    margin-top: 32px;  
}

.cc-selection-card.risk-category-card {
    min-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 1.5rem !important;
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

.cc-selection-card.risk-category-card.selected h6,
.cc-selection-card.risk-category-card.selected p,
.cc-selection-card.risk-category-card.selected i {
    color: #ffffff !important;
}

/* Fix Zone 4 icon color - match Zone 5 blue */
#pressure-zone-4 i {
    color: #0018FF !important;
}

/* County Requirements Professional Card */
.county-requirements-card {
    background: white;
    border: 2px solid #10b981;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-xl);
}

.county-requirements-header {
    background: linear-gradient(90deg, #10b981, #059669);
    color: white;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.county-requirements-content {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.county-status-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    align-items: center;
}

.jurisdiction-details-box {
    text-align: center;
    background: #f8fafc;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid #e2e8f0;
}

.jurisdiction-name-text {
    font-size: var(--text-lg);
    font-weight: 700;
    color: #374151;
    margin-bottom: var(--space-xs);
}

.jurisdiction-dept-text {
    font-size: var(--text-sm);
    color: #64748b;
}

.validation-summary-text {
    text-align: center;
    font-size: var(--text-sm);
    color: #047857;
    font-weight: 600;
}

.verification-links-section {
    background: #f1f5f9;
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.verification-links-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: #374151;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.verification-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.verification-link-item {
    display: block;
    color: #3b82f6;
    text-decoration: none;
    font-size: var(--text-xs);
    padding: var(--space-md);
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    text-align: center;
    transition: all var(--transition-normal);
    font-weight: 600;
}

/* GLASSMORPHISM ELECTRIC VERIFICATION LINKS */

.verification-link-item {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: var(--text-xs);
    padding: var(--space-lg);
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ULTRA ELECTRIC NEON VERIFICATION LINKS */
.verification-link-item:nth-child(1) {
   background: linear-gradient(135deg, 
       rgba(0, 255, 255, 1) 0%, 
       rgba(138, 43, 226, 0.95) 25%,
       rgba(75, 0, 130, 0.9) 50%,
       rgba(138, 43, 226, 0.95) 75%,
       rgba(0, 255, 255, 1) 100%) !important;
   border: 2px solid rgba(0, 255, 255, 0.8) !important;
}

.verification-link-item:nth-child(2) {
   background: linear-gradient(135deg, 
       rgba(57, 255, 20, 1) 0%, 
       rgba(0, 255, 127, 0.95) 25%,
       rgba(0, 128, 0, 0.9) 50%,
       rgba(0, 255, 127, 0.95) 75%,
       rgba(57, 255, 20, 1) 100%) !important;
   border: 2px solid rgba(57, 255, 20, 0.8) !important;
}

.verification-link-item:nth-child(3) {
   background: linear-gradient(135deg, 
       rgba(255, 215, 0, 1) 0%, 
       rgba(255, 140, 0, 0.95) 25%,
       rgba(255, 69, 0, 0.9) 50%,
       rgba(255, 140, 0, 0.95) 75%,
       rgba(255, 215, 0, 1) 100%) !important;
   border: 2px solid rgba(255, 215, 0, 0.8) !important;
}

.verification-link-item:nth-child(4) {
   background: linear-gradient(135deg, 
       rgba(255, 0, 127, 1) 0%, 
       rgba(220, 20, 60, 0.95) 25%,
       rgba(139, 0, 139, 0.9) 50%,
       rgba(220, 20, 60, 0.95) 75%,
       rgba(255, 0, 127, 1) 100%) !important;
   border: 2px solid rgba(255, 0, 127, 0.8) !important;
}

/* ELECTRIC PULSE ANIMATIONS */
.verification-link-item::before {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: inherit;
   border-radius: 18px;
   z-index: -1;
   filter: blur(8px);
   opacity: 0.7;
   animation: electricPulse 2s ease-in-out infinite alternate;
}

@keyframes electricPulse {
   0% { opacity: 0.4; transform: scale(0.98); }
   100% { opacity: 0.8; transform: scale(1.02); }
}

/* HOVER ELECTRIC SURGE */
.verification-link-item:hover {
   transform: translateY(-12px) scale(1.08) !important;
   border-color: rgba(255, 255, 255, 1) !important;
   text-decoration: none !important;
   filter: brightness(1.3) saturate(1.5) !important;
}

.verification-link-item:nth-child(1):hover {
   box-shadow: 
       0 30px 80px rgba(0, 255, 255, 0.8),
       0 0 60px rgba(0, 255, 255, 1),
       0 0 100px rgba(138, 43, 226, 0.6),
       inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

.verification-link-item:nth-child(2):hover {
   box-shadow: 
       0 30px 80px rgba(57, 255, 20, 0.8),
       0 0 60px rgba(57, 255, 20, 1),
       0 0 100px rgba(0, 255, 127, 0.6),
       inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

.verification-link-item:nth-child(3):hover {
   box-shadow: 
       0 30px 80px rgba(255, 215, 0, 0.8),
       0 0 60px rgba(255, 215, 0, 1),
       0 0 100px rgba(255, 69, 0, 0.6),
       inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

.verification-link-item:nth-child(4):hover {
   box-shadow: 
       0 30px 80px rgba(255, 0, 127, 0.8),
       0 0 60px rgba(255, 0, 127, 1),
       0 0 100px rgba(139, 0, 139, 0.6),
       inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

/* ELECTRIC CHARGING ANIMATION */
.verification-link-item:hover::before {
   animation: electricCharge 0.5s ease-out infinite alternate;
}

@keyframes electricCharge {
   0% { opacity: 0.8; filter: blur(6px); }
   100% { opacity: 1; filter: blur(12px); }
}

/* Electric pulse animation */
.verification-link-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent);
    transition: left 0.6s ease;
}

.verification-link-item:hover::before {
    left: 100%;
}

/* Electric border animation */
.verification-link-item::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6), 
        transparent 50%, 
        rgba(255, 255, 255, 0.3));
    border-radius: 16px;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.verification-link-item:hover::after {
    opacity: 1;
}

/* Active/pressed state */
.verification-link-item:active {
    transform: translateY(-4px) scale(1.02);
    transition: transform 0.1s ease;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .verification-link-item {
        padding: var(--space-md);
        font-size: 11px;
        border-radius: 12px;
    }
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
    .verification-link-item {
        border-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(30px);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .verification-link-item {
        transition: none;
    }
    
    .verification-link-item::before,
    .verification-link-item::after {
        display: none;
    }
    
    .verification-link-item:hover {
        transform: none;
    }
}

.cc-selection-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(24, 30, 87, 0.15), transparent);
transition: left 0.6s ease;
z-index: 1;
}

.cc-selection-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, 
rgba(255, 255, 255, 0.2) 0%, 
transparent 50%,
rgba(255, 255, 255, 0.1) 100%);
border-radius: var(--radius-xl);
z-index: 0;
}

.county-card-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.cc-selection-card > * {
position: relative;
z-index: 2;
}

.cc-selection-card:hover::before {
left: 100%;
}

.cc-selection-card:hover {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
    color: var(--brand-white) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-8px) scale(1.05) !important;
    box-shadow: 
        var(--shadow-2xl),
        0 0 40px rgba(24, 30, 87, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.cc-selection-card:hover h4,
.cc-selection-card:hover h5,
.cc-selection-card:hover h6,
.cc-selection-card:hover p,
.cc-selection-card:hover div,
.cc-selection-card:hover strong,
.cc-selection-card:hover span {
color: var(--brand-white) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.cc-selection-card:hover i {
color: var(--brand-white) !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
transform: scale(1.2) !important;
}

.cc-selection-card.selected {
background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
color: var(--brand-white);
border: 4px solid var(--brand-white) !important;
box-shadow: 
0 25px 50px rgba(16, 185, 129, 0.6),
0 0 50px rgba(16, 185, 129, 0.8),
inset 0 2px 0 rgba(255, 255, 255, 0.4);
transform: translateY(-6px) scale(1.08);
animation: selectedPulse 3s ease-in-out infinite;
}

@keyframes selectedPulse {
0%, 100% {
box-shadow: 
0 25px 50px rgba(16, 185, 129, 0.6),
0 0 50px rgba(16, 185, 129, 0.8),
inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
50% {
box-shadow: 
0 30px 60px rgba(16, 185, 129, 0.8),
0 0 70px rgba(16, 185, 129, 1),
inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
}

.cc-selection-card.selected h4,
.cc-selection-card.selected h5,
.cc-selection-card.selected h6,
.cc-selection-card.selected p,
.cc-selection-card.selected div,
.cc-selection-card.selected strong,
.cc-selection-card.selected span {
color: var(--brand-white) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
font-weight: 600;
}

.cc-selection-card.selected i {
color: var(--brand-white) !important;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
transform: scale(1.3);
animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
0%, 20%, 50%, 80%, 100% {
transform: scale(1.3) translateY(0);
}
40% {
transform: scale(1.4) translateY(-4px);
}
60% {
transform: scale(1.4) translateY(-2px);
}
}

.cc-selection-card.selected:hover {
background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
transform: translateY(-6px) scale(1.1);
box-shadow: 
0 35px 70px rgba(16, 185, 129, 0.8),
0 0 80px rgba(16, 185, 129, 1),
inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.cc-selection-card h4,
.cc-selection-card h5,
.cc-selection-card h6 {
font-size: clamp(12px, 2.5vw, 14px) !important;
font-weight: 700;
color: var(--premium-charcoal) !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
}

.cc-selection-card p {
font-size: clamp(9px, 2vw, 11px) !important;
color: var(--slate-600) !important;
margin: 0 0 2px 0 !important;
line-height: 1.3 !important;
font-weight: 500;
}

.cc-selection-card i {
font-size: clamp(16px, 4vw, 20px);
color: var(--brand-secondary) !important;
margin-bottom: var(--space-sm);
transition: all var(--transition-normal);
filter: drop-shadow(0 2px 4px rgba(0, 24, 255, 0.3));
}

/* RISK CATEGORY CARD FIXES - SPECIFIC TARGETING */
.cc-selection-card.risk-category-card {
    background: white !important;
    color: #374151 !important;
    border: 2px solid #e2e8f0 !important;
}

/* Wind speed values in Risk Category cards - Bold and 16px */
#risk-1-wind-speed,
#risk-2-wind-speed,
#risk-3-wind-speed,
#risk-4-wind-speed {
    font-weight: bold !important;
    font-size: 16px !important;
}

.cc-selection-card.risk-category-card h4,
.cc-selection-card.risk-category-card h5,
.cc-selection-card.risk-category-card h6,
.cc-selection-card.risk-category-card p {
    color: #374151 !important;
}

.cc-selection-card.risk-category-card i {
    color: var(--brand-secondary) !important;
}

/* SELECTED STATE - Green background for default Category II */
.cc-selection-card.risk-category-card.selected {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: var(--brand-white) !important;
    border: 4px solid var(--brand-white) !important;
    box-shadow: 
        0 25px 50px rgba(16, 185, 129, 0.6),
        0 0 50px rgba(16, 185, 129, 0.8),
        inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-6px) scale(1.08) !important;
}

.cc-selection-card.risk-category-card.selected h4,
.cc-selection-card.risk-category-card.selected h5,
.cc-selection-card.risk-category-card.selected h6,
.cc-selection-card.risk-category-card.selected p {
    color: var(--brand-white) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.cc-selection-card.risk-category-card.selected i {
    color: var(--brand-white) !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)) !important;
    transform: scale(1.3) !important;
}

/* RISK CATEGORY HOVER - DARK BLUE WITH WHITE TEXT */
.cc-selection-card.risk-category-card:hover {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.cc-selection-card.risk-category-card:hover h4,
.cc-selection-card.risk-category-card:hover h5,
.cc-selection-card.risk-category-card:hover h6,
.cc-selection-card.risk-category-card:hover p {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.cc-selection-card.risk-category-card:hover i {
    color: white !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Building Code Compliance Card */
.building-code-compliance-card {
    background: white;
    border: 2px solid #6366f1;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-xl);
}

.building-code-compliance-header {
    background: linear-gradient(90deg, #0018ff, #181E57);
    color: white;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.building-code-compliance-content {
    padding: var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.code-compliance-icon {
    font-size: 2rem;
    color: #6366f1;
}

.code-compliance-text {
    flex: 1;
    color: #4b5563;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.asce-version-badge {
    background: #e0e7ff;
    color: #4338ca;
    padding: var(--space-xs) var(--space-md);
    border-radius: 16px;
    font-size: var(--text-xs);
    font-weight: 700;
}

/* ==========================================================================
   INFORMATION DISPLAY CARDS - PROFESSIONAL
   ========================================================================== */
.info-display-section {
    margin-bottom: var(--space-2xl);
}

.structure-location-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 3px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-lg);
}

.structure-location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-info);
    border-color: rgba(59, 130, 246, 0.5);
}

.location-info-item {
    display: flex;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    transition: all var(--transition-fast);
}

.location-info-item:last-child {
    border-bottom: none;
}

.location-info-item:hover {
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius-sm);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.location-info-item i {
    margin-right: var(--space-md);
    width: 16px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    color: var(--info);
}

.location-info-item span,
.location-info-item div {
    color: var(--premium-charcoal) !important;
    font-weight: 500;
}

@media (min-width: 768px) {
    .structure-location-card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
        align-items: start;
    }
    
    .location-info-item {
        border-bottom: none;
        border-right: 1px solid rgba(59, 130, 246, 0.15);
        padding-right: var(--space-md);
        margin: 0;
    }
    
    .location-info-item:nth-child(even) {
        border-right: none;
    }
}

/* ==========================================================================
   ENHANCED BUTTONS - COMPETITION-BEATING
   ========================================================================== */
button {
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-height: 48px;
    font-family: inherit;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

button:hover::before {
    left: 100%;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

button:active {
    transform: translateY(-1px);
    transition: transform 0.1s ease;
}

#calculate-btn,
#add-opening-btn {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
    color: var(--brand-white) !important;
    box-shadow: var(--shadow-brand) !important;
    font-weight: 700 !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
}

#calculate-btn:hover,
#add-opening-btn:hover {
    box-shadow: 
        var(--shadow-2xl),
        0 0 40px rgba(24, 30, 87, 0.6) !important;
    transform: translateY(-4px) scale(1.03) !important;
}

#save-project {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    color: #FFFFFF !important;
    box-shadow: 
        0 10px 25px rgba(16, 185, 129, 0.4),
        0 0 20px rgba(16, 185, 129, 0.3) !important;
    font-weight: 700 !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    font-size: var(--text-base) !important;
    min-height: 52px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

#save-project:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    box-shadow: 
        0 15px 35px rgba(16, 185, 129, 0.6),
        0 0 30px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-4px) scale(1.05) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

#save-project:active {
    transform: translateY(-2px) scale(1.02) !important;
}

#calculate-btn {
    width: 100%;
    min-height: 56px;
    font-size: var(--text-lg);
    font-weight: 800;
    border-radius: var(--radius-xl);
    margin-top: var(--space-xl);
    position: relative;
    overflow: hidden;
}

#calculate-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        transparent 50%,
        rgba(255, 255, 255, 0.08) 100%);
    border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
    #calculate-btn {
        max-width: 400px;
        margin: var(--space-xl) auto 0;
    }
}

#export-results,
#generate-report,
#export-calculations {
    background: linear-gradient(135deg, #FFFFFF, #F8FAFC) !important;
    color: var(--brand-primary) !important;
    border: 3px solid rgba(24, 30, 87, 0.3) !important;
    box-shadow: var(--shadow-md) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

#export-results:hover,
#generate-report:hover,
#export-calculations:hover {
    background: linear-gradient(135deg, var(--slate-50), var(--slate-100)) !important;
    color: var(--brand-primary) !important;
    border-color: rgba(24, 30, 87, 0.5) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

button[id*="engineering-report"],
.engineering-report-btn {
    background: linear-gradient(135deg, #FFFFFF, #F8FAFC) !important;
    color: var(--brand-primary) !important;
    border: 3px solid rgba(24, 30, 87, 0.3) !important;
    box-shadow: var(--shadow-md) !important;
    font-weight: 600 !important;
}

button[id*="engineering-report"]:hover,
.engineering-report-btn:hover {
    background: linear-gradient(135deg, var(--slate-50), var(--slate-100)) !important;
    color: var(--brand-primary) !important;
    border-color: rgba(24, 30, 87, 0.5) !important;
    box-shadow: var(--shadow-lg) !important;
}

#open-asce-modal {
    background: linear-gradient(90deg, #0018ff, #181E57) !important;
    color: var(--brand-white) !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-md) var(--space-lg) !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    box-shadow: 
        0 10px 25px rgba(0, 24, 255, 0.4),
        0 0 20px rgba(0, 24, 255, 0.3) !important;
    transition: all var(--transition-normal) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

#open-asce-modal i {
    color: white !important;
    margin-right: 0 !important;
}

#open-asce-modal:hover {
    background: linear-gradient(90deg, #181E57, #0018ff) !important;
    transform: translateY(-3px) !important;
    box-shadow: 
        0 15px 35px rgba(0, 24, 255, 0.6),
        0 0 30px rgba(0, 24, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Icon spacing fix */
#open-asce-modal i {
    margin-right: 0 !important;
}

button[id*="help-btn"] {
    background: var(--info-bold) !important;
    border: 2px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
    color: var(--info) !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-height: auto !important;
}

button[id*="help-btn"]:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important;
}

/* ==========================================================================
   RESULTS DISPLAY - REVOLUTIONARY DESIGN
   ========================================================================== */
#pressure-results-display {
    animation: fadeIn 0.5s ease-out;
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

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

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

.pressure-result-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 3px solid var(--slate-200);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.pressure-result-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        transparent 50%,
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: var(--radius-xl);
}

.pressure-result-card > * {
    position: relative;
}

.pressure-result-card:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: var(--shadow-2xl);
}

.pressure-result-card i {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}

.pressure-result-card h6 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--premium-charcoal);
    margin-bottom: var(--space-sm);
}

.pressure-result-card .value {
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 800;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.pressure-positive .value { color: var(--premium-emerald); }
.pressure-negative .value { color: var(--premium-ruby); }
.pressure-critical .value { color: var(--premium-sapphire); }
.pressure-velocity .value { color: #8b5cf6; }

.pressure-positive i { color: var(--premium-emerald); }
.pressure-negative i { color: var(--premium-ruby); }
.pressure-critical i { color: var(--premium-sapphire); }
.pressure-velocity i { color: #8b5cf6; }

/* ==========================================================================
   SIMPLE MODAL FOR ASCE MAP
   ========================================================================== */
#asce-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);  /* Darker backdrop */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 40px;  /* Professional spacing */
}

.modal-content {
    background: white;
    border-radius: 16px;  /* More professional radius */
    width: min(1200px, 90vw);  /* Max width with responsive fallback */
    height: min(800px, 85vh);  /* Max height with responsive fallback */
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);  /* Professional shadow */
    margin: 0 auto;  /* Center it properly */
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    flex: 1;
    padding: 0;
}

.modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

#close-asce-modal {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   HELP CONTENT STYLING
   ========================================================================== */
div[id*="help-content"] {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 2px solid var(--slate-300);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-md);
    animation: expandIn 0.3s ease-out;
    box-shadow: var(--shadow-md);
}

@keyframes expandIn {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }
}

div[id*="help-content"] div {
    margin-bottom: var(--space-md);
    line-height: 1.6;
    color: var(--premium-charcoal);
}

div[id*="help-content"] div:last-child {
    margin-bottom: 0;
}

div[id*="help-content"] strong {
    color: var(--brand-primary);
    font-weight: 700;
}

/* ==========================================================================
   ENHANCED RADIO ITEMS
   ========================================================================== */
.dash-radio-items {
    color: var(--premium-charcoal) !important;
}

.dash-radio-items label {
    color: var(--premium-charcoal) !important;
    font-weight: 500 !important;
    margin-bottom: var(--space-sm) !important;
    display: block !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    padding: var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid transparent !important;
}

.dash-radio-items label:hover {
    background: rgba(24, 30, 87, 0.08) !important;
    border-color: rgba(24, 30, 87, 0.15) !important;
}

.dash-radio-items input[type="radio"] {
    margin-right: var(--space-sm) !important;
    accent-color: var(--brand-primary) !important;
    transform: scale(1.3) !important;
}

/* ==========================================================================
   STATUS MESSAGES & NOTIFICATIONS - BOLD & CLEAR
   ========================================================================== */
.status-message {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    animation: fadeIn 0.3s ease-out;
    border: 2px solid;
}

.status-message.success {
    background: var(--success-bold);
    border-color: rgba(16, 185, 129, 0.4);
    color: #047857;
}

.status-message.warning {
    background: var(--warning-bold);
    border-color: rgba(245, 158, 11, 0.4);
    color: #92400e;
}

.status-message.error {
    background: var(--error-bold);
    border-color: rgba(239, 68, 68, 0.4);
    color: #991b1b;
}

.status-message.info {
    background: var(--info-bold);
    border-color: rgba(59, 130, 246, 0.4);
    color: #1e40af;
}

/* ==========================================================================
   LOADING STATES & ANIMATIONS
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--slate-300);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ==========================================================================
   UTILITY CLASSES - COMPREHENSIVE
   ========================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.m-0 { margin: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-premium-charcoal { color: var(--premium-charcoal) !important; }
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.text-success { color: var(--premium-emerald) !important; }
.text-warning { color: var(--premium-gold) !important; }
.text-error { color: var(--premium-ruby) !important; }
.text-info { color: var(--premium-sapphire) !important; }

.bg-solid-white { background: #FFFFFF !important; }
.bg-premium-silver { background: var(--premium-silver) !important; }
.bg-success-bold { background: var(--success-bold) !important; }
.bg-warning-bold { background: var(--warning-bold) !important; }
.bg-error-bold { background: var(--error-bold) !important; }
.bg-info-bold { background: var(--info-bold) !important; }

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS - PREMIUM GRADE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: high) {
    .cc-selection-card {
        border-width: 4px !important;
    }
    
    .cc-selection-card:hover {
        border-width: 4px !important;
    }
    
    .cc-selection-card.selected {
        border-width: 5px !important;
    }
    
    button {
        border: 3px solid currentColor !important;
    }
    
    .cc-selection-card h4,
    .cc-selection-card h5,
    .cc-selection-card h6 {
        color: var(--premium-onyx) !important;
        font-weight: 800 !important;
    }
    
    .cc-panel-description,
    .location-info-item span,
    .location-info-item div,
    .dash-radio-items label {
        color: var(--premium-onyx) !important;
        font-weight: 600 !important;
    }
}

*:focus-visible {
    outline: 4px solid var(--brand-primary) !important;
    outline-offset: 3px !important;
    border-radius: var(--radius-sm) !important;
}

.cc-selection-card:focus-visible {
    outline: 5px solid var(--brand-primary) !important;
    outline-offset: 6px !important;
}

button:focus-visible {
    outline: 4px solid var(--brand-white) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px var(--brand-primary) !important;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS - PREMIUM TOUCH EXPERIENCE
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --space-xs: 3px;
        --space-sm: 6px;
        --space-md: 12px;
        --space-lg: 18px;
        --space-xl: 24px;
        --space-2xl: 36px;
        --space-3xl: 48px;
    }
    
    .cc-header {
        padding: var(--space-md) 0;
    }
    
    .cc-header-content {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
        padding: 0 var(--space-md);
    }
    
    .cc-header-icon {
        width: 48px;
        height: 48px;
    }
    
    .cc-main-container {
        padding: var(--space-lg) var(--space-md);
        gap: var(--space-lg);
    }
    
    .cc-panel {
        padding: var(--space-lg);
        border-radius: var(--radius-xl);
    }
    
    .parameter-grid {
        gap: var(--space-md);
    }
    
    .parameter-grid.risk-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .cc-selection-card {
        min-height: 110px;
        padding: var(--space-md);
        border-width: 2px;
    }
    
    .cc-selection-card.selected {
        border-width: 3px;
    }
    
    .cc-selection-card h4,
    .cc-selection-card h5,
    .cc-selection-card h6 {
        font-size: 14px;
        font-weight: 700;
    }
    
    .cc-selection-card p {
        font-size: 11px;
        line-height: 1.3;
    }
    
    .cc-selection-card i {
        font-size: 18px;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .pressure-result-card {
        padding: var(--space-md);
    }
    
    .pressure-result-card .value {
        font-size: 24px;
    }
    
    #calculate-btn {
        font-size: var(--text-base);
        min-height: 52px;
    }
    
    #save-project {
        min-height: 48px;
        font-size: var(--text-sm);
    }
    
    button {
        min-height: 44px;
        padding: var(--space-sm) var(--space-lg);
        font-size: 13px;
    }
    
    .structure-location-card {
        grid-template-columns: 1fr;
        padding: var(--space-md);
    }
    
    .location-info-item {
        border-right: none;
        border-bottom: 1px solid rgba(59, 130, 246, 0.15);
        padding: var(--space-sm) 0;
    }
    
    .location-info-item:last-child {
        border-bottom: none;
    }

    /* Enhanced Card Mobile Adjustments */
    .structure-location-content {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
    }

    .wind-speed-summary {
    min-width: auto;
    width: 100%;
    }

    .compliance-indicators {
    flex-wrap: wrap;
    justify-content: center;
    }

    .card-header {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
    }

    .card-content {
    padding: var(--space-lg);
    }
}

/* ==========================================================================
   ULTRA-WIDE SCREEN OPTIMIZATIONS - PREMIUM DESKTOP EXPERIENCE
   ========================================================================== */
@media (min-width: 1600px) {
    .cc-main-container {
        max-width: 1600px;
        padding: var(--space-3xl) var(--space-xl);
    }
    
    .cc-sidebar {
        width: 360px;
    }
    
    .parameter-grid.risk-categories {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
    }
    
    .cc-selection-card {
        min-height: 180px;
        padding: var(--space-xl);
        border-width: 3px;
    }
    
    .cc-selection-card.selected {
        border-width: 4px;
    }
    
    .cc-panel {
        padding: var(--space-3xl);
    }
}

/* ==========================================================================
   HIGH DPI / RETINA OPTIMIZATIONS - CRISP VISUALS
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cc-header-icon,
    .cc-sidebar-icon {
        box-shadow: 
            var(--shadow-brand),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    
    .cc-selection-card {
        border-width: 2px;
    }
    
    .cc-selection-card.selected {
        border-width: 3px;
    }
}

/* ==========================================================================
   PRINT STYLES - PROFESSIONAL DOCUMENTATION
   ========================================================================== */
@media print {
    .cc-background,
    .cc-header,
    .cc-sidebar,
    button,
    #asce-modal {
        display: none !important;
    }
    
    .cc-content-area {
        width: 100% !important;
        max-width: none !important;
    }
    
    .cc-panel {
        display: block !important;
        box-shadow: none !important;
        border: 2px solid #000 !important;
        page-break-inside: avoid;
        margin-bottom: 20px;
        background: #ffffff !important;
    }
    
    .cc-selection-card.selected {
        border: 3px solid #000 !important;
        background: #f0f0f0 !important;
    }
    
    .cc-selection-card h4,
    .cc-selection-card h5,
    .cc-selection-card h6,
    .cc-panel-description,
    .location-info-item span,
    .location-info-item div {
        color: #000000 !important;
    }
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS - SMOOTH AS BUTTER
   ========================================================================== */
.cc-selection-card,
.cc-header-icon,
.cc-sidebar,
.cc-panel,
button,
.pressure-result-card {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.cc-selection-card:hover,
.cc-selection-card.selected {
    will-change: transform, box-shadow, background;
}

button:hover {
    will-change: transform, box-shadow;
}

/* ==========================================================================
   BROWSER COMPATIBILITY FIXES
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
    .cc-form-input {
        font-size: 16px;
    }
    
    .Select-control {
        font-size: 16px !important;
    }
}

@-moz-document url-prefix() {
    .Select-menu {
        scrollbar-width: thin;
        scrollbar-color: var(--slate-300) transparent;
    }
}

@supports (-ms-ime-align: auto) {
    .cc-selection-card {
        border: 3px solid rgba(203, 213, 225, 0.6);
    }
}

/* ==========================================================================
   FINAL OVERRIDES - BULLETPROOF STYLING
   ========================================================================== */
._dash-loading {
    display: none !important;
}

._dash-devtools {
    display: none !important;
}

[data-dash-is-loading],
._dash-callback,
div[style*="Dash update available"],
div[class*="dash-update"],
div[class*="update-available"] {
    display: none !important;
}

#react-devtools-portal,
#react-devtools-container,
._dash-devtools-container {
    display: none !important;
}

.dash-dropdown {
    z-index: var(--z-dropdown) !important;
}

.Select-menu-outer {
    z-index: calc(var(--z-dropdown) + 10) !important;
}

button,
.cc-selection-card,
.cc-nav-link,
.cc-form-input,
.Select-control {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cc-form-input {
    user-select: text;
}

.cc-selection-card h4,
.cc-selection-card h5,
.cc-selection-card h6 {
    color: var(--premium-charcoal) !important;
}

.cc-selection-card p {
    color: var(--slate-600) !important;
}

.cc-panel-description {
    color: var(--premium-charcoal) !important;
}

.cc-nav-link {
    color: var(--premium-charcoal) !important;
}

.dash-radio-items label {
    color: var(--premium-charcoal) !important;
}

/* ==========================================================================
   CITY DISPLAY FIXES - ADDRESS UNKNOWN CITY ISSUE
   ========================================================================== */
.city-display,
.location-city,
div[id*="city"],
span[id*="city"] {
    color: var(--premium-charcoal) !important;
    font-weight: 600 !important;
    font-size: var(--text-base) !important;
}

.city-unknown,
.unknown-city {
    color: var(--slate-500) !important;
    font-style: italic !important;
    font-weight: 500 !important;
}

.structure-location-card .city-display,
.structure-location-card div:contains("City:"),
.location-info-item:has(i[class*="building"]) span,
.location-info-item:has(i[class*="city"]) span {
    color: var(--premium-charcoal) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   ADDITIONAL BUTTON FIXES - COMPREHENSIVE COVERAGE
   ========================================================================== */
button:not(#save-project):not(#calculate-btn):not(#add-opening-btn):not([id*="help-btn"]):not(#close-asce-modal):not(#open-asce-modal) {
    background: linear-gradient(135deg, #FFFFFF, #F8FAFC) !important;
    color: var(--brand-primary) !important;
    border: 3px solid rgba(24, 30, 87, 0.3) !important;
    box-shadow: var(--shadow-md) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

button:not(#save-project):not(#calculate-btn):not(#add-opening-btn):not([id*="help-btn"]):not(#close-asce-modal):not(#open-asce-modal):hover {
    background: linear-gradient(135deg, var(--slate-50), var(--slate-100)) !important;
    color: var(--brand-primary) !important;
    border-color: rgba(24, 30, 87, 0.5) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

.export-btn,
.report-btn,
.secondary-btn {
    background: linear-gradient(135deg, #FFFFFF, #F8FAFC) !important;
    color: var(--brand-primary) !important;
    border: 3px solid rgba(24, 30, 87, 0.3) !important;
    box-shadow: var(--shadow-md) !important;
}

.export-btn:hover,
.report-btn:hover,
.secondary-btn:hover {
    background: linear-gradient(135deg, var(--slate-50), var(--slate-100)) !important;
    color: var(--brand-primary) !important;
    border-color: rgba(24, 30, 87, 0.5) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ==========================================================================
   MINIMAL ELEGANT ADDRESS STATUS - PROFESSIONAL ENHANCEMENT
   Add this section to your cc_windows_doors.css file
   ========================================================================== */

/* Minimal Elegant Address Status Component */
.status-minimal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: #f0fdf4;
    color: #166534;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-sm);
    border-left: 3px solid var(--premium-emerald);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    margin-top: var(--space-sm);
}

.status-minimal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(22, 101, 52, 0.08), transparent);
    transition: left 0.5s ease;
}

.status-minimal:hover::before {
    left: 100%;
}

.status-minimal:hover {
    background: #dcfce7;
    border-left-width: 4px;
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    color: #14532d;
}

/* Icon styling that matches your existing pattern */
.status-minimal .location-icon,
.status-minimal .check-icon {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.status-minimal:hover .location-icon,
.status-minimal:hover .check-icon {
    transform: scale(1.1);
}

/* Enhanced address status container to match your existing styling */
.address-status-container {
    display: none !important;
    background: none !important;
    border: none !important;
}

/* Location pin icon that appears before the status - matches your existing style */
.location-pin {
    width: 1.5rem !important;
    height: 1.5rem !important;
    color: var(--premium-gold) !important;
    flex-shrink: 0 !important;
    transition: all var(--transition-normal) !important;
}

.address-status-container:hover .location-pin {
    transform: scale(1.1) !important;
    color: #d97706 !important;
}

/* Responsive adjustments that match your mobile optimization pattern */
@media (max-width: 768px) {
    .status-minimal {
        font-size: 13px;
        padding: 10px 16px;
        gap: 6px;
    }
    
    .status-minimal .location-icon,
    .status-minimal .check-icon {
        width: 1rem;
        height: 1rem;
    }
    
    .address-status-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-sm) !important;
        padding: var(--space-md) !important;
    }
    
    .location-pin {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

/* High contrast mode support - matches your accessibility pattern */
@media (prefers-contrast: high) {
    .status-minimal {
        border-left-width: 4px !important;
        background: #e6fffa !important;
        color: #065f46 !important;
        font-weight: 700 !important;
    }
    
    .status-minimal:hover {
        border-left-width: 5px !important;
        background: #ccfbf1 !important;
        color: #064e3b !important;
    }
}

/* Focus visible state for accessibility - matches your existing pattern */
.status-minimal:focus-visible {
    outline: 3px solid var(--premium-emerald) !important;
    outline-offset: 2px !important;
}

/* Print styles - matches your existing print optimization */
@media print {
    .status-minimal {
        background: #f0f0f0 !important;
        color: #000000 !important;
        border-left: 3px solid #000000 !important;
        box-shadow: none !important;
    }
    
    .status-minimal .location-icon,
    .status-minimal .check-icon {
        color: #000000 !important;
    }
}

/* PREVENT LAYOUT JUMPS DURING MANUAL INPUT */
.cc-content-area {
    min-height: 100vh;
    overflow-anchor: none;
}

.electric, 
#cc-engineering-analysis-display,
.parameter-section {
    transition: none !important;
}

/* Stabilize dynamic content during updates */
.electric-content,
.electric-wind,
.electric-details {
    min-height: fit-content;
    will-change: auto;
}

/* Prevent scroll jumping */
.cc-main-container {
    scroll-behavior: auto !important;
}

/* Remove transitions during input updates */
.wind-speed-input:focus ~ * {
    transition: none !important;
}

/* ==========================================================================
   END OF PREMIUM WIND ENGINEERING PLATFORM CSS
   COMPETITION-BEATING DESIGN COMPLETE - WOW FACTOR ACHIEVED!
   ALL CSS SYNTAX ERRORS FIXED - ALL VISUAL ISSUES RESOLVED!
   ========================================================================== */

   /* Fix Miami-Dade card icon spacing */
#county-guidance-container .status-message.warning .fas.fa-wind {
    margin-right: 12px !important;
    margin-bottom: 8px !important;
}

/* Fix Miami-Dade card title and content spacing */
#county-guidance-container .status-message.warning strong {
    display: block !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

/* Fix Florida Building Code Notice text color and spacing */
#florida-notice-container .status-message.info {
    color: #1f2937 !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

#florida-notice-container .status-message.info p {
    color: #374151 !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

/* Add proper vertical spacing between cards */
#county-guidance-container,
#florida-notice-container {
    margin-bottom: 20px !important;
}

/* Collier County Requirements Card - EXACT MOCKUP MATCH */
.collier-county-card {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.county-requirements-header {
    background: linear-gradient(90deg, #10b981, #059669);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.county-requirements-content {
    padding: 48px 24px 24px 24px;
}

.county-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 24px;
}

.status-column {
    text-align: center;
}

.check-icon {
    color: white;
    font-weight: bold;
}

.department-column {
    text-align: center;
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-top: 20px !important;
}

.jurisdiction-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.jurisdiction-dept {
    font-size: 0.85rem;
    color: #64748b;
}

.requirements-column {
    text-align: center;
}

.requirements-text {
    font-size: 0.9rem;
    color: #047857;
    font-weight: 500;
}

.verification-section {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 24px;
}

.verification-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
    text-align: center;
}

.verification-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.verification-link {
    display: block;
    color: #3b82f6;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
    transition: all 0.2s ease;
    white-space: pre-line;
}

.verification-link:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Alternative approach - target the header div directly */
.county-requirements-header {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

/* Hide the "Validated" text */
.county-requirements-header > *:last-child {
    display: none !important;
}

/* Building Code Compliance Card - EXACT MOCKUP MATCH */
.building-code-compliance-card {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.compliance-card-header {
    background: linear-gradient(90deg, #0018ff, #181E57);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.compliance-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.asce-badge {
    background: #e0e7ff;
    color: #4338ca;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
}

.compliance-card-content {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.compliance-icon {
    font-size: 2rem;
    color: #6366f1;
    flex-shrink: 0;
}

.compliance-text {
    flex: 1;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .county-top-row {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }
    
    .verification-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .compliance-card-content {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   ELECTRIC HOLOGRAM STRUCTURE LOCATION - PRODUCTION READY
   Add this CSS to the END of cc_windows_doors.css file
   After the line: "END OF PREMIUM WIND ENGINEERING PLATFORM CSS"
   ========================================================================== */

/* Main Container with Electric Pulse */
.electric {
    background: #ffffff;
    border-radius: 32px;
    border: 2px solid rgba(0, 24, 255, 0.15);
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 30px 60px rgba(0, 24, 255, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    margin-bottom: var(--space-xl);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Electric Pulse Background Animation */
.electric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 24, 255, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(24, 30, 87, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 40% 60%, rgba(0, 24, 255, 0.04) 0%, transparent 70%);
    animation: electricPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes electricPulse {
    0%, 100% { opacity: 0.3; }
    25% { opacity: 0.7; }
    50% { opacity: 0.5; }
    75% { opacity: 0.6; }
}

/* Content Container */
.electric-content {
    padding: 42px;
    position: relative;
    z-index: 1;
}

/* Header Styling with Gradient Text */
.electric-header {
    text-align: center;
    margin-bottom: 36px;
}

.electric-title {
    font-size: 22px;
    font-weight: 600;
    background: linear-gradient(135deg, #0018ff, #181E57);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1.3;
}

.electric-subtitle {
    font-size: 13px;
    color: #181E57;
    opacity: 0.7;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Main Grid Layout */
.electric-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 36px;
}

.electric-details {
    flex: 1;
    min-width: 0;
}

/* Individual Electric Lines with Animations */
.electric-line {
    display: flex;
    align-items: center;
    padding: 20px 28px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 24, 255, 0.1);
    border-radius: 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

/* Flowing Light Animation */
.electric-line::before {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 24, 255, 0.1), transparent);
    transition: all 0.6s ease;
    pointer-events: none;
}

/* Colored Accent Bar */
.electric-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 18px 18px 0;
    opacity: 0;
    transition: all 0.4s ease;
    transform: scaleY(0);
    pointer-events: none;
}

/* Hover Effects */
.electric-line:hover {
    background: #ffffff;
    border-color: rgba(0, 24, 255, 0.3);
    transform: translateX(12px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 24, 255, 0.15);
}

.electric-line:hover::before {
    left: 100%;
}

.electric-line:hover::after {
    opacity: 1;
    transform: scaleY(1);
}

/* Individual Line Colors (from mockup) */
.electric-line:nth-child(1)::after { background: #0018ff; }
.electric-line:nth-child(2)::after { background: linear-gradient(135deg, #0018ff, #181E57); }
.electric-line:nth-child(3)::after { background: #181E57; }
.electric-line:nth-child(4)::after { background: linear-gradient(135deg, #181E57, #0018ff); }
.electric-line:nth-child(5)::after { background: #0018ff; }

/* Text Styling */
.electric-label {
    font-size: 12px;
    font-weight: 700;
    color: #181E57;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    width: 85px;
    flex-shrink: 0;
    opacity: 0.8;
}

.electric-value {
    font-size: 17px;
    font-weight: 500;
    color: #181E57;
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Wind Speed Display with Rotating Effect */
.electric-wind {
    background: linear-gradient(135deg, #0018ff 0%, #181E57 100%);
    color: white;
    padding: 32px;
    border-radius: 24px;
    text-align: center;
    min-width: 140px;
    flex-shrink: 0;
    box-shadow: 
        0 0 60px rgba(0, 24, 255, 0.3),
        0 20px 40px rgba(24, 30, 87, 0.2);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

/* Rotating Wind Effect */
.electric-wind::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: windRotate 4s linear infinite;
    pointer-events: none;
}

@keyframes windRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.electric-wind-content {
    position: relative;
    z-index: 1;
}

.electric-wind-number {
    font-size: 44px;
    font-weight: 100;
    letter-spacing: -3px;
    margin-bottom: 4px;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.electric-wind-unit {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: 0.9;
    text-transform: uppercase;
}

.electric-wind-category {
    font-size: 11px;
    margin-top: 12px;
    opacity: 0.7;
    font-weight: 500;
    text-transform: uppercase;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .electric-content {
        padding: 24px;
    }
    
    .electric-grid {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }
    
    .electric-wind {
        margin-left: 0;
        width: 100%;
        min-width: auto;
        padding: 24px;
    }
    
    .electric-line {
        padding: 16px 20px;
        margin: 8px 0;
    }
    
    .electric-label {
        width: 70px;
        font-size: 11px;
    }
    
    .electric-value {
        font-size: 15px;
    }
    
    .electric-wind-number {
        font-size: 36px;
    }
}

/* Accessibility & Performance */
@media (prefers-reduced-motion: reduce) {
    .electric::before,
    .electric-wind::before {
        animation: none !important;
    }
    
    .electric-line::before {
        transition: none !important;
    }
    
    .electric-line:hover {
        transform: translateX(6px) !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .electric {
        border-width: 3px !important;
        border-color: #0018ff !important;
    }
    
    .electric-line {
        border-width: 2px !important;
        border-color: #0018ff !important;
    }
    
    .electric-label,
    .electric-value {
        color: #000000 !important;
        font-weight: 700 !important;
    }
}

/* Print Styles */
@media print {
    .electric {
        border: 2px solid #000 !important;
        box-shadow: none !important;
        background: white !important;
    }
    
    .electric::before,
    .electric-wind::before {
        display: none !important;
    }
    
    .electric-title {
        color: #000 !important;
    }
    
    .electric-label,
    .electric-value {
        color: #000 !important;
    }
    
    .electric-wind {
        background: #f0f0f0 !important;
        color: #000 !important;
    }
}

/* ==========================================================================
   OPTION 4: ENGINEERING REPORT STRUCTURE LOCATION - PROFESSIONAL DESIGN   
   ========================================================================== */

/* Engineering Report Container */
.engineering-report {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(24, 30, 87, 0.15);
    margin-bottom: 16px;        /* Reduced from var(--space-xl) */
    margin-top: 8px;            /* Add this - reduces top spacing */
    transition: all var(--transition-normal);
}

.engineering-report:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(24, 30, 87, 0.25);
}

/* Report Header with Blue Gradient */
.report-header {
    background: linear-gradient(135deg, #181E57 0%, #0018ff 80%) !important;
    color: white !important;
    padding: 16px 24px;
    position: relative;
    overflow: hidden;
}

.report-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0018ff 0%, #ffffff 50%, #0018ff 100%);
}

.report-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.engineering-report:hover .report-header::before {
    left: 100%;
}

.report-title {
    font-size: 18px;
    font-weight: 700;
    opacity: 1.0;
    margin-bottom: 4px;
    margin: 0;
    line-height: 1.3;
    text-align: left;
}

/* Report Body Content */
.report-body {
    padding: 20px 24px;
    background: #ffffff;
}

.report-field {
    margin-bottom: 12px;
    transition: all var(--transition-fast);
    padding: 8px 0;
    border-bottom: 1px solid rgba(24, 30, 87, 0.08);
}

.report-field:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.report-field:hover {
    background: rgba(24, 30, 87, 0.03);
    border-radius: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(24, 30, 87, 0.1);
}

.report-field-label {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
    display: block;
}

.report-field-value {
    font-size: 15px;
    font-weight: 600;
    color: #181E57;
    line-height: 1.3;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .report-header {
        padding: 12px 16px;
    }
    
    .report-body {
        padding: 16px;
    }
    
    .report-field {
        margin-bottom: 10px;
    }
    
    .report-field-value {
        font-size: 14px;
    }
    
    .report-title {
        font-size: 12px;
    }
    
    .report-subtitle {
        font-size: 10px;
    }
}

/* Performance optimizations */
.engineering-report,
.report-header,
.report-body,
.report-field {
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* Force all text inside form steps to be dark */
.form-step h6,
.form-step .step-title,
.form-step label,
.form-step span,
.form-step p {
    color: var(--premium-charcoal) !important;
}

.dashboard-header {
    background: linear-gradient(135deg, #10b981, #059669);
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.component-form-panel .form-step:first-child {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* ========================================
   COMPLETE ZONE CARDS SECTION - COLORS FIXED
   ======================================== */

/* Zone cards - Base styling (same as component cards) */
.zone-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 3px solid rgba(203, 213, 225, 0.6);
    border-radius: var(--radius-xl);
    padding: 8px 12px !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    width: 160px !important;
    height: 160px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px !important;
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
    margin-bottom: 0;
}

/* Force Zone 4 and Zone 5 to be shorter - using maximum CSS specificity */
div#pressure-zone-4,
div#pressure-zone-5,
.zone-card#pressure-zone-4,
.zone-card#pressure-zone-5,
#pressure-zone-4.zone-card,
#pressure-zone-5.zone-card {
    width: 160px !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    padding: 6px 12px !important;
    gap: 4px !important;
}

/* ALL zone card icons - consistent */
.zone-card i,
#pressure-zone-4 i,
#pressure-zone-5 i {
    color: #0018FF !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: block !important;
    transition: color 0.3s ease !important;
    flex-shrink: 0;
}

/* ALL zone labels - consistent */
.zone-label,
#pressure-zone-4 .zone-label,
#pressure-zone-5 .zone-label {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    color: #1f2937 !important;
    flex-shrink: 0;
}

/* ALL zone descriptions - consistent */
.zone-description,
#pressure-zone-4 .zone-description,
#pressure-zone-5 .zone-description {
    font-size: 13px !important;
    opacity: 0.7 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    flex-shrink: 0;
}

/* HOVER STATES - ALL WHITE TEXT AND ICONS */
.zone-card:hover {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
    color: var(--brand-white) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: var(--shadow-2xl), 0 0 30px rgba(24, 30, 87, 0.4) !important;
}

.zone-card:hover .zone-label,
.zone-card:hover .zone-description,
#pressure-zone-4:hover .zone-label,
#pressure-zone-4:hover .zone-description,
#pressure-zone-5:hover .zone-label,
#pressure-zone-5:hover .zone-description {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.zone-card:hover i,
#pressure-zone-4:hover i,
#pressure-zone-5:hover i {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* SELECTED STATES - ALL WHITE TEXT AND ICONS */
.zone-card.selected {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: var(--brand-white) !important;
    border: 4px solid var(--brand-white) !important;
    box-shadow: 
        0 25px 50px rgba(16, 185, 129, 0.6),
        0 0 50px rgba(16, 185, 129, 0.8),
        inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-6px) scale(1.08) !important;
}

.zone-card.selected .zone-label,
.zone-card.selected .zone-description,
#pressure-zone-4.selected .zone-label,
#pressure-zone-4.selected .zone-description,
#pressure-zone-5.selected .zone-label,
#pressure-zone-5.selected .zone-description {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.zone-card.selected i,
#pressure-zone-4.selected i,
#pressure-zone-5.selected i {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Responsive design */
@media (max-width: 800px) {
    .zone-card {
        width: 140px !important;
        height: 140px !important;
        padding: 10px 6px !important;
        gap: 2px !important;
        margin-bottom: 6px;
    }
    
    div#pressure-zone-4,
    div#pressure-zone-5,
    #pressure-zone-4,
    #pressure-zone-5 {
        width: 140px !important;
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        padding: 6px 8px !important;
        gap: 2px !important;
    }
    
    .zone-label {
        font-size: 14px !important;
    }
    
    .zone-description {
        display: none !important;
    }
    
    .zone-card i {
        font-size: 24px !important;
        margin: 0 !important;
    }
}

@media (max-width: 500px) {
    .zone-card {
        width: 130px !important;
        height: 130px !important;
        padding: 8px 4px !important;
        gap: 1px !important;
        margin-bottom: 4px;
    }
    
    div#pressure-zone-4,
    div#pressure-zone-5,
    #pressure-zone-4,
    #pressure-zone-5 {
        width: 130px !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        padding: 5px 6px !important;
        gap: 1px !important;
    }
    
    .zone-label {
        font-size: 13px !important;
    }
    
    .zone-description {
        display: none !important;
    }
    
    .zone-card i {
        font-size: 22px !important;
        margin: 0 !important;
    }
}

/* Dimensions */
.dimensions-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Dimensions */
.dimensions-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.dimension-group {
    display: flex;
    flex-direction: column;
}

.dimension-input,
.mark-input {
    padding: 0.75rem;
    border: 2px solid var(--slate-300);
    border-radius: 8px;
    font-size: 1rem;
}

.dimension-input:focus,
.mark-input:focus {
    border-color: var(--brand-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 30, 87, 0.1);
}

/* Effective Area Display */
.effective-area-display {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.area-label {
    font-weight: 600;
    color: #166534;
    font-size: 0.9rem;
}

.area-value {
    font-weight: 700;
    color: #16a34a;
    font-size: 1.1rem;
}

/* Calculate Button */
.calculate-button {
    width: 100%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(24, 30, 87, 0.3);
}

.calculate-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(24, 30, 87, 0.4);
}

/* Add Component Button */
.add-component-button {
    width: 100%;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.add-component-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

/* Stack metrics on smaller screens */
@media (max-width: 500px) {
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }
}

.metric-card {
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1;
    color: #1f2937 !important; /* FORCE DARK TEXT */
}

.metric-value.positive { color: #16a34a !important; }
.metric-value.negative { color: #dc2626 !important; }
.metric-value.neutral { color: #1f2937 !important; }

.metric-label {
    color: #6b7280 !important;
    font-weight: 600 !important;
}

.metric-value.positive { color: #16a34a !important; }
.metric-value.negative { color: #dc2626 !important; }
.metric-value.neutral { color: #1f2937 !important; }

.metric-label {
    font-size: 0.75rem;
    color: #6b7280 !important; /* FORCE GRAY TEXT */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Component List */
.component-list-section {
    padding: 0 1.5rem 1.5rem;
}

.list-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--premium-charcoal);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--slate-200);
}

.component-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.component-item {
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.component-item:hover {
    border-color: var(--slate-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.component-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.component-mark {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: white;
}

.window-mark { background: #3b82f6; }
.door-mark { background: #8b5cf6; }
.shutter-mark { background: #f59e0b; }

.component-type {
    font-weight: 600;
    color: var(--premium-charcoal);
}

.component-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.component-details {
    font-size: 0.8rem;
    color: var(--slate-600);
}

.component-pressure {
    font-weight: 700;
    font-size: 0.9rem;
}

.component-pressure.positive { color: #16a34a; }
.component-pressure.negative { color: #dc2626; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .component-type-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .zone-selection-grid {
        grid-template-columns: 1fr;
    }
    
    .dimensions-row {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}

/* Progressive stacking for component cards */
@media (max-width: 900px) {
    .component-type-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 600px) {
    .component-type-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .zone-selection-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Prevent dashboard content cutoff */
.project-dashboard-panel {
    overflow: visible;
    min-height: fit-content;
}

.component-list-section {
    padding: 0 1.5rem 1.5rem;
    overflow: visible;
}

.component-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    word-wrap: break-word;
}

.metric-card {
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
    overflow: visible;
    min-height: fit-content;
}

/* Ensure text doesn't get cut off */
.metric-label,
.metric-value {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    hyphens: auto;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .pressure-calc-layout {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .component-form-panel,
    .project-dashboard-panel {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    
    .form-step {
        padding: 1rem;
    }
    
    .dimensions-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Stack on mobile */
@media (max-width: 768px) {
    .three-column-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Two columns on tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .three-column-row {
        grid-template-columns: 1fr 1fr;
    }
    
    .three-column-row .dimension-group:first-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   RESPONSIVE THREE-COLUMN LAYOUT - MARK ID, WIDTH, HEIGHT
   ========================================================================== */

/* Three column responsive layout */
.three-column-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Stack on mobile */
@media (max-width: 768px) {
    .three-column-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Two columns on tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .three-column-row {
        grid-template-columns: 1fr 1fr;
    }
    
    .three-column-row .dimension-group:first-child {
        grid-column: 1 / -1;
    }
}
/* ==========================================================================
   CLEAN VERTICAL LAYOUT - CALCULATOR BUTTON THEN RESULTS
   ========================================================================== */

.form-step .calculate-button {
    width: 100%;
    margin-bottom: 1.5rem;
}

.form-step #pressure-results-display {
    margin-bottom: 1.5rem;
}

/* Give pressure cards proper spacing in vertical layout */
.form-step .results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .form-step .results-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ==========================================================================
   WIND PRESSURE CALCULATIONS - CLEAN VERTICAL LAYOUT
   ========================================================================== */

#calculate-btn,
.calc-button {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
    color: var(--brand-white) !important;
    box-shadow: var(--shadow-brand) !important;
    font-weight: 700 !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
    width: 100% !important;
    min-height: 56px !important;
    font-size: var(--text-lg) !important;
    border-radius: var(--radius-xl) !important;
    margin: var(--space-xl) 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

#calculate-btn:hover,
.calc-button:hover {
    box-shadow: 
        var(--shadow-2xl),
        0 0 40px rgba(24, 30, 87, 0.6) !important;
    transform: translateY(-4px) scale(1.03) !important;
}

#calculate-btn::after,
.calc-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        transparent 50%,
        rgba(255, 255, 255, 0.08) 100%);
    border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
    #calculate-btn,
    .calc-button {
        max-width: 400px;
        margin: var(--space-xl) auto !important;
    }
}

/* Live Effective Area Display */
#live-effective-area-new {
    font-weight: 700 !important;
    color: #10b981 !important;
    font-size: 1.1rem !important;
}

/* Section Titles in Pressure Calculations */
#cc-openings-panel .section-title {
    font-size: var(--text-xl) !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
    margin-bottom: var(--space-lg) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
}

/* Component List Styling */
#component-list-display {
    transition: all var(--transition-normal);
    min-height: 60px;
}

#component-list-display:hover {
    border-color: #9ca3af !important;
    background: #f1f5f9 !important;
}

/* ADD EXTRA SPACING BETWEEN SECTIONS IN PRESSURE CALCULATIONS */
#cc-openings-panel .parameter-section {
    margin-bottom: var(--space-2xl) !important;
    margin-top: var(--space-lg) !important;
}

/* FORCE PRESSURE ZONE CARDS TO MATCH COMPONENT CARDS - MAXIMUM SPECIFICITY */
div#pressure-zone-4.cc-selection-card,
div#pressure-zone-5.cc-selection-card,
#pressure-zone-4.cc-selection-card,
#pressure-zone-5.cc-selection-card {
    min-height: clamp(120px, 15vh, 160px) !important;
    max-height: 160px !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
}

/* FORCE THE GRID LAYOUT FOR PRESSURE ZONES - MATCH WIND PARAMETERS STYLE */
div[style*="grid-template-columns: repeat(2, 1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--space-md) !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    max-width: 600px !important;
    margin: 0 !important;
}

/* FORCE COMPONENT TYPE GRID TO MATCH WIND PARAMETERS STYLE */  
div[style*="grid-template-columns: repeat(3, 1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--space-md) !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    max-width: 800px !important;
    margin: 0 !important;
}

/* Mobile stacking for zones */
@media (max-width: 768px) {
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }
}

/* ADD COMPONENT BUTTON STYLING */
.add-component-button,
#add-component-btn-new {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    /* ... rest of styling ... */
}

/* REMOVE COMPONENT BUTTON */
.remove-component-btn:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-radius: 4px !important;
}

/* EDGE STRIP HOVER EFFECTS - PRESERVE BLACK TEXT */
.edge-strip-card h6 {
    color: white !important;
}

.edge-strip-card p {
    color: white !important;
}

.edge-strip-card button {
    color: white !important;
    background: rgba(255,255,255,0.2) !important;
}

/* On hover - keep white text white, help button changes */
.edge-strip-card:hover h6 {
    color: white !important;
}

.edge-strip-card:hover p {
    color: white !important;
}

.edge-strip-card:hover button {
    color: #1e3a8a !important;
    background: rgba(255,255,255,0.9) !important;
}

/* FORCE BLACK TEXT TO STAY BLACK */
.edge-strip-card #edge-strip-calculated-value,
.edge-strip-card:hover #edge-strip-calculated-value {
    color: #1f2937 !important;
    background: white !important;
}

/* FORCE ALL DIAGRAM NUMBERS TO BE BLACK ON HOVER */
.edge-strip-card:hover div[style*="display: flex"] {
    color: #000000 !important;
}

/* PRESSURE ZONE HELP TEXT - READABLE FORMATTING */
div[id*="help-content"] {
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 16px !important;
    line-height: 1.6 !important;
}

/* Make zone labels bold and separated */
div[id*="help-content"] strong {
    display: block !important;
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    border-bottom: 2px solid #3b82f6 !important;
    padding-bottom: 4px !important;
}

/* First zone - no top margin */
div[id*="help-content"] strong:first-child {
    margin-top: 0 !important;
}

/* Make all help text dark and readable */
div[id*="help-content"],
div[id*="help-content"] div,
div[id*="help-content"] p {
    color: #374151 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* Add spacing between definitions */
div[id*="help-content"] div {
    margin-bottom: 12px !important;
    padding-left: 8px !important;
}

/* ==========================================================================
   PROFESSIONAL COMPONENT TABLE LAYOUT - ADD TO END OF CSS FILE
   ========================================================================== */

/* Hover effects for component table */
.component-table-row:hover {
    background-color: #f8fafc !important;
}

.delete-component-btn:hover {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}

.clear-all-components-btn:hover {
    background-color: #0018ff !important;
}

/* Components table styling */
.components-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.components-table th {
    background: #0018ff;
    color: white;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    border: none;
}

.components-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}

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

.components-table tr:hover {
    background: #f8fafc;
}

/* Component table buttons */
.delete-component-btn {
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.clear-all-components-btn {
    background: #181E57;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;  
    transition: all 0.2s ease;
}

/* Component name styling */
.component-name {
    font-weight: 600;
    color: #181E57;
}

/* Zone badge styling */
.zone-badge {
    background: #181E57;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Responsive design for component table */
@media (max-width: 768px) {
    .components-table {
        font-size: 12px !important;
    }
    
    .components-table th,
    .components-table td {
        padding: 8px 12px !important;
    }
    
    .components-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .components-table thead,
    .components-table tbody,
    .components-table th,
    .components-table td,
    .components-table tr {
        display: block;
    }
    
    .components-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .components-table tr {
        border: 1px solid #e2e8f0;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 8px;
        background: white;
    }
    
    .components-table td {
        border: none;
        border-bottom: 1px solid #e2e8f0;
        position: relative;
        padding-left: 50% !important;
        white-space: normal;
        text-align: left;
    }
    
    .components-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #181E57;
    }
}

/* PROJECT COMPONENTS SECTION TITLE STYLING */
.section-title {
    color: #181E57 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    margin-bottom: var(--space-lg) !important;
    border-bottom: 2px solid #0018ff !important;
    padding-bottom: 8px !important;
    display: inline-block !important;
}

/* COMPONENT DIMENSIONS SPACING IMPROVEMENTS */
.parameter-section {
    margin-bottom: 32px;
}

.units-toggle {
    margin-bottom: 24px !important;
}

/* Fixed radio button spacing with readable text */
.dimension-units-toggle .dash-radioitems {
    display: flex !important;
    gap: 48px !important;
    justify-content: flex-end !important;
}

/* Target all possible radio button selectors */
.dimension-units-toggle input[type="radio"] {
    margin-right: 12px !important;
    margin-left: 0 !important;
}

.dimension-units-toggle .rc-radio {
    margin-right: 12px !important;
}

.dimension-units-toggle .rc-radio-input {
    margin-right: 12px !important;
}

/* Target text/label that comes after radio button */
.dimension-units-toggle label,
.dimension-units-toggle .dash-radioitems label,
.dimension-units-toggle span:not(.rc-radio) {
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-left: 12px !important;
    padding-left: 8px !important;
}

/* Alternative targeting for different Dash structures */
.dimension-units-toggle .rc-radio-wrapper span,
.dimension-units-toggle .rc-radio + span {
    margin-left: 12px !important;
    padding-left: 8px !important;
    color: #1f2937 !important;
}

.cc-form-row {
    display: flex;
    gap: 24px;
    margin-top: 24px;
}

.cc-form-group {
    flex: 1;
    min-width: 200px;
}

.dimension-input-wrapper {
    margin-bottom: 16px;
    position: relative;
}

.cc-form-label {
    margin-bottom: 8px;
    display: block;
    color: #1f2937 !important;
}

/* Mobile-friendly component cards */
@media (max-width: 768px) {
    .detail-item {
        text-align: center;
        padding: 12px 8px;
        background: rgba(248, 250, 252, 0.8);
        border-radius: 6px;
    }
    
    /* Stack details vertically on very small screens */
    @media (max-width: 480px) {
        .detail-item {
            grid-column: 1 / -1;
            text-align: left;
            padding: 8px 12px;
        }
    }
    
    /* Ensure delete buttons are touch-friendly */
    .delete-component-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation;
    }
    
    /* Component cards responsive spacing */
    .component-name {
        font-size: 15px !important;
        line-height: 1.3;
    }
    
    .component-zone {
        margin-top: 8px;
    }
}

/* ==========================================================================
   PRODUCT CERTIFICATION ENTRY - WHITE TEXT LABELS FIX
   ========================================================================== */

/* Manual Product Entry Section - White Labels */
.search-interface label,
.search-interface .cc-form-label {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Specifically target FL Number, NOA Number, Design Pressure labels */
label[for="manual-fl-number"],
label[for="manual-noa-number"], 
label[for="manual-positive-pressure"],
label[for="manual-negative-pressure"],
.search-interface label:contains("FL Number"),
.search-interface label:contains("NOA Number"),
.search-interface label:contains("Design Pressure") {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* All labels within search interface cards */
#add-manual-product-btn ~ * label,
.search-interface .cc-form-group label,
.search-interface div label {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Text content that might be labels */
.search-interface div:contains("FL Number:"),
.search-interface div:contains("NOA Number:"),
.search-interface div:contains("Design Pressure (+):"),
.search-interface div:contains("Design Pressure (-):") {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Force all text in search interface to be white except inputs */
.search-interface * {
    color: #ffffff !important;
}

/* Reset input text to be dark for readability */
.search-interface input,
.search-interface textarea {
    color: #1f2937 !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Reset button text */
.search-interface button {
    color: var(--brand-primary) !important;
}

/* ==========================================================================
   SPECIFIC FIX FOR PRODUCT CERTIFICATION ENTRY CARD SCROLLING
   ========================================================================== */

/* Allow only the Product Certification Details form to auto-adjust height */
.search-interface:last-child {
    min-height: 600px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Keep Selected Component section compact */
.search-interface:first-child {
    min-height: auto !important;
    height: fit-content !important;
    max-height: 200px !important;
    overflow: visible !important;
    padding: 12px !important;
}

/* Webkit scrollbar styling for the blue certification card */
.search-interface::-webkit-scrollbar {
    width: 10px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.search-interface::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px !important;
}

.search-interface::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.search-interface::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* Ensure the certification form content doesn't get cut off */
.search-interface .cc-form-group {
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
}

/* Make sure the button stays visible */
.search-interface .search-interface-button {
    margin-top: 12px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   ENHANCED KANBAN BOARD STYLING - MOBILE-FRIENDLY & PROFESSIONAL
   CLEANED VERSION - REMOVED PROBLEMATIC FIXED HEIGHTS
   ========================================================================== */

.kanban-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: var(--glass-bg);
    border-radius: var(--radius-xl);
    border: 2px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.kanban-header-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0;
}

.kanban-header-subtitle {
    font-size: var(--text-sm);
    color: var(--premium-charcoal);
    margin: var(--space-xs) 0 0 0;
}

.kanban-stats {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.progress-stat {
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg-dark);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    min-width: 80px;
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--premium-charcoal);
    font-weight: 600;
    text-transform: uppercase;
}

/* Enhanced Progress Stats - Colorful Numbers */
.progress-stat-blue .progress-stat-number {
    color: #2563eb !important;
    font-size: 1.75rem;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.progress-stat-orange .progress-stat-number {
    color: #ea580c !important;
    font-size: 1.75rem;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.progress-stat-green .progress-stat-number {
    color: #059669 !important;
    font-size: 1.75rem;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.progress-stat-yellow .progress-stat-number {
    color: #d97706 !important;
    font-size: 1.75rem;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.progress-stat-black .progress-stat-number {
    color: #374151 !important;
    font-size: 1.75rem;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.progress-stat-black .stat-label {
    color: #374151 !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.progress-stat-blue .stat-label {
    color: #2563eb !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.progress-stat-orange .stat-label {
    color: #ea580c !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.progress-stat-green .stat-label {
    color: #059669 !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.progress-stat-dark .progress-stat-number,
.progress-stat-dark .stat-label {
    color: #1f2937 !important;
}

/* FIXED: Responsive Kanban Board Grid - Better Breakpoints */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    width: 100%;
}

/* Responsive breakpoints for optimal viewing */
@media (min-width: 1400px) {
    .kanban-board {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
    }
}

@media (max-width: 1200px) {
    .kanban-board {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-md);
    }
}

@media (max-width: 900px) {
    .kanban-board {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

@media (max-width: 640px) {
    .kanban-board {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .kanban-container {
        padding: 0 var(--space-sm);
    }
    
    .kanban-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
    
    .kanban-stats {
        justify-content: center;
    }
}

/* FIXED: Kanban Column - Removed Fixed Heights, Content-First Design */
.kanban-column {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-xl);
    border: 2px solid var(--glass-border);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    /* REMOVED: min-height and max-height constraints */
    height: auto; /* Content determines height */
    transition: all var(--transition-normal);
    overflow: hidden;
    width: 100%;
}

.kanban-column:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
}

.kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 2px solid var(--glass-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    flex-shrink: 0;
}

/* Column Headers - Distinct Colors */
.pending-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.search-header {
    background: linear-gradient(135deg, #0018ff 0%, #181E57 100%) !important;
}

.verification-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

.completed-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.kanban-column-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}

.kanban-column-icon {
    font-size: var(--text-lg);
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.kanban-column-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.kanban-column-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.kanban-column-description {
    padding: 0 var(--space-lg);
    font-size: var(--text-sm);
    color: var(--premium-charcoal);
    margin: var(--space-sm) 0 var(--space-lg) 0;
    line-height: 1.4;
    flex-shrink: 0;
}

/* FIXED: Column Body - Content-First Design */
.kanban-column-body {
    flex: 1;
    padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* REMOVED: Fixed max-height that was cutting off content */
    height: auto; /* Content determines height */
    min-height: 200px; /* Minimum usable space */
    /* Keep overflow for when content is genuinely too long */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.kanban-column-body::-webkit-scrollbar {
    width: 6px;
}

.kanban-column-body::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-column-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.kanban-column-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Empty State Improvements */
.kanban-empty-message {
    text-align: center;
    padding: 24px 16px;
    color: #6b7280;
    font-size: 14px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    line-height: 1.5;
}

/* Enhanced Search Interface Responsive Design */
.search-column-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.search-interface {
    margin: 0 var(--space-lg) var(--space-lg) var(--space-lg);
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.search-interface-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.search-interface-icon {
    color: white !important;
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.search-interface-title {
    color: white !important;
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0;
    word-wrap: break-word;
}

.search-interface-description {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: var(--text-sm);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.4;
}

.search-interface-input {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    color: white !important;
    font-size: var(--text-sm);
    resize: vertical;
    min-height: 60px;
    margin-bottom: var(--space-md);
    transition: all var(--transition-normal);
    box-sizing: border-box;
}

.search-interface-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.search-interface-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.15) !important;
}

.search-interface-button {
    background: white;
    color: var(--brand-primary);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    justify-content: center;
}

.search-interface-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: var(--slate-50);
}

/* Force the Selected Component section to be taller */
.kanban-column .search-interface:first-of-type {
    min-height: 300px !important;
    height: auto !important;
    overflow: visible !important;
}

/* IMPROVED: Component Cards - Better Responsive Design */
.improved-component-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    cursor: grab;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #3b82f6;
    /* IMPROVED: Let content determine height */
    height: auto;
    min-height: 140px;
}

.improved-component-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #3b82f6;
}

.improved-component-card:active {
    cursor: grabbing;
    transform: scale(1.02);
}

/* Card Header */
.improved-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
    flex-wrap: wrap;
}

.component-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.component-id-text {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    word-wrap: break-word;
}

.component-type-text {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zone-badge {
    background: #3b82f6;
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Card Information Rows - Improved Vertical Layout */
.card-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    gap: 12px;
}

.card-info-row:hover {
    background: #f8fafc;
}

.card-info-row:last-child {
    margin-bottom: 0;
}

.card-icon {
    width: 16px;
    color: #6b7280;
    margin-right: 12px;
    flex-shrink: 0;
    text-align: center;
}

/* Text Styling */
.dimension-text {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.pressure-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pressure-positive {
    color: #059669;
    font-weight: 700;
    font-size: 14px;
}

.pressure-negative {
    color: #dc2626;
    font-weight: 700;
    font-size: 14px;
}

.pressure-unit {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}

.area-text {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

/* Legacy Component Cards - Keep for compatibility */
.component-card {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    cursor: grab;
    transition: all var(--transition-normal);
    position: relative;
    height: auto;
    margin-bottom: 16px;
}

.component-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-primary);
}

.component-card.dragging {
    opacity: 0.6;
    transform: rotate(3deg);
}

.component-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
    gap: 8px;
}

.component-id {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--brand-primary);
}

.component-type-badge {
    background: var(--premium-emerald);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.component-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.spec-label {
    color: var(--slate-600);
    font-weight: 500;
    min-width: 80px;
}

.spec-value {
    font-weight: 600;
    color: var(--premium-charcoal);
    text-align: right;
    word-wrap: break-word;
}

/* Floating Actions Panel */
.floating-actions-panel {
    position: relative;
    margin-top: var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    max-width: 100%;
}

.actions-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md) 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-primary);
}

.actions-panel-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.action-btn {
    background: var(--glass-bg-dark);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    color: var(--premium-charcoal);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

.action-btn:hover {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Enhanced Action Buttons */
.refresh-btn:hover {
    background: #059669 !important;
    color: white !important;
    border-color: #059669 !important;
}

.export-btn:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

.report-btn:hover {
    background: #f59e0b !important;
    color: white !important;
    border-color: #f59e0b !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .kanban-column {
        /* REMOVED: Fixed min/max heights that were problematic on mobile */
        height: auto;
    }
    
    .kanban-column-header {
        padding: var(--space-md);
    }
    
    .kanban-column-title {
        font-size: var(--text-sm);
    }
    
    .kanban-column-description {
        padding: 0 var(--space-md);
        margin: var(--space-sm) 0;
    }
    
    .kanban-column-body {
        padding: 0 var(--space-md) var(--space-md) var(--space-md);
        /* Keep minimum space but allow expansion */
        min-height: 150px;
    }
    
    .search-interface {
        margin: 0 var(--space-md) var(--space-md) var(--space-md);
        padding: var(--space-md);
    }
    
    .search-interface-input {
        min-height: 40px;
        font-size: 14px;
    }
    
    .search-interface-button {
        padding: var(--space-sm) var(--space-md);
        font-size: 13px;
    }
    
    .improved-component-card {
        margin-bottom: 12px;
        border-radius: 8px;
        padding: 16px;
        min-height: 120px;
    }
    
    .improved-card-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .card-info-row {
        padding: 6px 8px;
        margin-bottom: 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .component-id-text {
        font-size: 15px;
    }
    
    .component-type-text {
        font-size: 13px;
    }
    
    .zone-badge {
        padding: 4px 10px;
        font-size: 10px;
        align-self: flex-start;
    }
    
    .card-icon {
        width: 14px;
        margin-right: 8px;
    }
    
    .dimension-text,
    .pressure-positive,
    .pressure-negative {
        font-size: 13px;
    }
    
    .area-text {
        font-size: 13px;
    }
    
    .spec-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .spec-value {
        text-align: left;
    }
}

/* Mobile Responsiveness for Actions Panel */
@media (min-width: 768px) {
    .actions-panel-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .action-btn {
        flex: 1;
        min-width: 150px;
        max-width: 200px;
    }
}

@media (max-width: 640px) {
    .floating-actions-panel {
        position: static;
        margin-top: var(--space-xl);
        padding: var(--space-md);
    }
    
    .actions-panel-buttons {
        gap: var(--space-xs);
    }
    
    .action-btn {
        padding: var(--space-sm);
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .kanban-column-header-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-xs);
    }
    
    .kanban-column-title {
        font-size: 13px;
    }
    
    .kanban-column-description {
        font-size: 12px;
        text-align: center;
    }
    
    .improved-component-card {
        margin-bottom: 8px;
        border-radius: 8px;
        padding: 12px;
        min-height: 100px;
    }
    
    .card-info-row {
        padding: 6px 4px;
        margin-bottom: 6px;
    }
    
    /* Larger touch targets */
    .zone-badge {
        min-height: 28px;
        min-width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Drag and Drop States */
.improved-component-card.dragging {
    opacity: 0.6;
    transform: rotate(2deg) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.kanban-column.drag-over {
    background: rgba(59, 130, 246, 0.05);
    border-color: #3b82f6;
}

.kanban-column.drag-over .kanban-column-body {
    background: rgba(59, 130, 246, 0.02);
}

/* ==========================================================================
   SCROLLBAR STYLING FOR KANBAN CARDS WITH OVERFLOW CONTENT
   ========================================================================== */

/* Universal scrollbar styling for all kanban content areas */
.kanban-column-body,
.search-interface,
.verification-column-body,
.completed-column-body,
.pending-column-body {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(203, 213, 225, 0.7) transparent !important;
}

.kanban-column-body::-webkit-scrollbar,
.search-interface::-webkit-scrollbar,
.verification-column-body::-webkit-scrollbar,
.completed-column-body::-webkit-scrollbar,
.pending-column-body::-webkit-scrollbar {
    width: 8px !important;
}

.kanban-column-body::-webkit-scrollbar-track,
.search-interface::-webkit-scrollbar-track,
.verification-column-body::-webkit-scrollbar-track,
.completed-column-body::-webkit-scrollbar-track,
.pending-column-body::-webkit-scrollbar-track {
    background: rgba(248, 250, 252, 0.5) !important;
    border-radius: 4px !important;
}

.kanban-column-body::-webkit-scrollbar-thumb,
.search-interface::-webkit-scrollbar-thumb,
.verification-column-body::-webkit-scrollbar-thumb,
.completed-column-body::-webkit-scrollbar-thumb,
.pending-column-body::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.8) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.kanban-column-body::-webkit-scrollbar-thumb:hover,
.search-interface::-webkit-scrollbar-thumb:hover,
.verification-column-body::-webkit-scrollbar-thumb:hover,
.completed-column-body::-webkit-scrollbar-thumb:hover,
.pending-column-body::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.9) !important;
}



/* FORCE WIDER KANBAN CARDS - OVERRIDE ALL OTHER RULES */
.kanban-board {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.kanban-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.kanban-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    overflow: hidden !important;
}

@media (max-width: 1200px) {
    .kanban-board {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 900px) {
    .kanban-board {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 640px) {
    .kanban-board {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* FORCE VERTICAL STACKING - NUCLEAR OPTION */
.kanban-board {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

.kanban-column {
    width: 100% !important;
    margin-bottom: 24px !important;
}

/* FIX WHITE TEXT ON LIGHT BACKGROUND - CERTIFICATION FORMS */
.cc-form-label {
    color: #1f2937 !important; /* Dark gray instead of white */
    font-weight: 600 !important;
}

.cc-form-input {
    color: #374151 !important; /* Dark text for inputs */
    background: white !important;
    border: 1px solid #d1d5db !important;
}

.cc-form-input::placeholder {
    color: #9ca3af !important; /* Gray placeholder text */
}

/* Fix compliance status text */
.status-message {
    color: #374151 !important;
}

/* Fix any other white text in certification sections */
#state-specific-cert-fields label,
#state-specific-cert-fields .cc-form-label,
#state-specific-cert-fields div {
    color: #1f2937 !important;
}

/* Fix State Requirements header background */
#state-specific-cert-fields .status-message.success {
    background: #f0f9ff !important;  /* Light blue background */
    color: #1e40af !important;      /* Dark blue text */
    border: 1px solid #93c5fd !important;
}

/* Force all text inside the state requirements header to be dark */
#state-specific-cert-fields .status-message.success * {
    color: #1e40af !important;
}

/* Target the specific span text */
#state-specific-cert-fields .status-message.success span {
    color: #1e40af !important;
}

/* Force override any inline styles */
[id="state-specific-cert-fields"] .status-message.success {
    color: #1e40af !important;
}

/* Fix the flag icon color */
#state-specific-cert-fields .fas.fa-flag-usa {
    color: #1e40af !important;
}

/* Fix the flag icon color */
#state-specific-cert-fields .fas.fa-flag-usa {
    color: #1e40af !important;
}

/* Fix status messages */
.status-message.info,
.status-message.warning,
.status-message.success {
    color: #1f2937 !important;
}

/* Fix "No component selected" and similar empty state text */
.kanban-empty-message,
#selected-component-display {
    color: #374151 !important;
    background: white !important;
    border: 1px solid #d1d5db !important;
}

/* Fix any other text in kanban sections that might be white */
.search-interface div,
.kanban-column-body div {
    color: #374151 !important;
}

/* Component card selection styles */
.component-card {
    transition: all 0.3s ease;
    position: relative;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* When radio button is selected, highlight the entire card */
.component-card:has(input[type="radio"]:checked) {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2) !important;
    transform: translateY(-2px);
}

/* Style the radio button */
.component-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #10b981;
    cursor: pointer;
}

/* Add green checkmark when selected */
.component-card:has(input[type="radio"]:checked)::after {
    content: "✓ SELECTED";
    position: absolute;
    top: 8px;
    right: 8px;
    background: #10b981;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
}

/* Hover effect for better UX */
.component-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* ==========================================================================
   END OF PREMIUM WIND ENGINEERING PLATFORM CSS
   COMPETITION-BEATING DESIGN COMPLETE - WOW FACTOR ACHIEVED!
   ALL CSS SYNTAX ERRORS FIXED - ALL VISUAL ISSUES RESOLVED!
   ========================================================================== */

/* TAB ORDER FIX */
#pressure-zone-1, #pressure-zone-2, #pressure-zone-3, #pressure-zone-4, #pressure-zone-5 {
    position: static !important;
}

#pressure-zone-1::before, #pressure-zone-2::before, #pressure-zone-3::before, 
#pressure-zone-4::before, #pressure-zone-5::before {
    z-index: -1 !important;
}

/* Enhanced Completed Cards with Accordion Functionality */
.completed-card {
    background: white;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    transition: all 0.3s ease, height 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.completed-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Accordion Content Styling */
.accordion-content {
    transition: all 0.3s ease;
    overflow: hidden;
    background: #f8fafc;
    border-radius: 6px;
    margin-top: 8px;
    padding: 0;
}

.accordion-content[style*="block"] {
    padding: 12px;
    border: 1px solid #e2e8f0;
    animation: accordionSlideDown 0.3s ease;
}

.accordion-content[style*="none"] {
    padding: 0;
    border: none;
    animation: accordionSlideUp 0.3s ease;
}

/* Accordion Animations */
@keyframes accordionSlideDown {
    from {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@keyframes accordionSlideUp {
    from {
        max-height: 500px;
        opacity: 1;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    to {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Accordion Toggle Button Styling */
button[id*="accordion-toggle"] {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50% !important;
    color: #64748b !important;
    cursor: pointer !important;
    font-size: 12px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-weight: bold !important;
}

button[id*="accordion-toggle"]:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #475569 !important;
    transform: scale(1.05);
}

button[id*="accordion-toggle"]:active {
    transform: scale(0.95);
    background: #cbd5e1 !important;
}

/* Enhanced State Requirements Display */
.state-requirements {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 4px solid #3b82f6;
    padding: 12px;
    border-radius: 6px;
    margin-top: 8px;
}

.state-requirements strong {
    color: #1f2937;
    font-weight: 600;
}

/* Primary Identifier Styling */
.primary-identifier {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}

/* Compliance Status Enhanced Styling */
.compliance-status {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.compliance-status.compliant {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.compliance-status.non-compliant {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

/* Bulk Certification Indicator */
.bulk-indicator {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
    display: inline-block;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .completed-card {
        margin-bottom: 12px;
        padding: 16px;
    }
    
    .accordion-content[style*="block"] {
        padding: 16px;
    }
    
    /* Stack certification details vertically on mobile */
    .certification-details {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .certification-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    /* Larger touch targets for mobile */
    button[id*="accordion-toggle"] {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    button[id*="delete-completed-btn"] {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-height: 32px;
        min-width: 32px;
    }
}

@media (max-width: 480px) {
    .completed-card {
        padding: 12px;
        margin-bottom: 8px;
    }
    
    /* Single column layout for very small screens */
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
    
    .card-actions {
        align-self: flex-end;
        display: flex;
        gap: 8px;
    }
    
    /* Compact state requirements display */
    .state-requirements {
        padding: 8px;
        font-size: 11px;
    }
    
    .state-requirements div {
        margin-bottom: 2px !important;
    }
}

/* Container Auto-Adjustment */
.kanban-column-body {
    transition: height 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ensure smooth height transitions for the entire kanban column */
.kanban-column {
    transition: all 0.3s ease;
    overflow: visible;
}

.kanban-column.search-column {
    min-height: 800px;
    height: auto;
    max-height: none;
}

/* Enhanced Delete Button Styling */
button[id*="delete-completed-btn"] {
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 4px !important;
    color: #64748b !important;
    cursor: pointer !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
    transition: all 0.2s ease !important;
}

button[id*="delete-completed-btn"]:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    transform: scale(1.05);
}

/* Certification Details Grid */
.certification-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.certification-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dotted #e2e8f0;
}

.certification-row:last-child {
    border-bottom: none;
}

.certification-label {
    font-weight: 600;
    color: #374151;
    font-size: 12px;
}

.certification-value {
    color: #6b7280;
    font-size: 12px;
    text-align: right;
    word-break: break-word;
    max-width: 60%;
}

/* State-Specific Color Coding */
.state-florida .primary-identifier {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.state-texas .primary-identifier {
    background: linear-gradient(135deg, #7c2d12 0%, #92400e 100%);
}

.state-california .primary-identifier {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

/* Smooth Focus States for Accessibility */
button[id*="accordion-toggle"]:focus,
button[id*="delete-completed-btn"]:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading State for Accordion Content */
.accordion-content.loading {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Enhanced Scrollbar Styling for Accordion Content */
.accordion-content::-webkit-scrollbar {
    width: 4px;
}

.accordion-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
}

.accordion-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.accordion-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* PRODUCT CERTIFICATION LABELS - WHITE TEXT FIX */
#cc-products-panel .cc-form-label,
#cc-products-panel label {
    color: #ffffff !important;
}

/* Export Options Section */
.export-section {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.export-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.export-header i {
    color: #6b7280;
    margin-right: 8px;
}

.export-header span {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.export-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.export-btn:active {
    transform: translateY(0);
}

.print-btn:hover {
    border-color: #6b7280;
    background: #f9fafb;
}

.pdf-btn:hover {
    border-color: #dc2626;
    background: #fef2f2;
    color: #dc2626;
}

.excel-btn:hover {
    border-color: #059669;
    background: #f0fdf4;
    color: #059669;
}

.csv-btn:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.export-btn i {
    font-size: 16px;
    transition: color 0.2s ease;
}

.pdf-btn:hover i {
    color: #dc2626;
}

.excel-btn:hover i {
    color: #059669;
}

.csv-btn:hover i {
    color: #2563eb;
}

/* Print Styles - ENHANCED */
@media print {
    /* Hide everything except the report */
    body > *:not(#_dash-app-content) {
        display: none !important;
    }
    
    /* Hide navigation, sidebars, buttons */
    .cc-sidebar,
    .cc-header,
    .export-section,
    .export-buttons,
    button,
    .status-message {
        display: none !important;
    }
    
    /* Make report take full page */
    #auto-engineering-report-display {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    /* Ensure pages break correctly */
    .page-container {
        page-break-after: always;
        page-break-inside: avoid;
        margin: 0;
        padding: 40px;
        box-shadow: none;
    }
    
    /* Don't break after last page */
    .page-container:last-child {
        page-break-after: auto;
    }
    
    /* Prevent breaks inside critical elements */
    .info-grid,
    .diagram-container,
    .calculation-table,
    table,
    .formula-box {
        page-break-inside: avoid;
    }
    
    /* Reset any scroll-based positioning */
    * {
        position: static !important;
    }
}

/* ========================================
   ENGINEERING REPORT - ADDITIONAL PAGES CSS
   ======================================== */

/* Page Container */
.page-container {
    background: white;
    padding: 40px;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    page-break-after: always;
    page-break-inside: avoid;
    max-height: 900px;
    min-height: auto;
}

/* Page Header */
.page-header {
    border-bottom: 3px solid #0984e3;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: #2d3436;
    margin-bottom: 8px;
}

.page-subtitle {
    font-size: 16px;
    color: #636e72;
    font-weight: 400;
}

/* Section Styling */
.section {
    margin-bottom: 35px;
    page-break-inside: avoid;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dfe6e9;
}

/* Info Grid (2-column layout) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.info-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #0984e3;
}

.info-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #636e72;
    font-weight: 600;
    margin-bottom: 8px;
}

.info-value {
    font-size: 24px;
    font-weight: 700;
    color: #2d3436;
}

/* Diagram Container */
.diagram-container {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    margin-top: 30px;
    max-height: 450px;
    overflow: hidden;
}

.diagram-container img,
.diagram-container svg {
    max-width: 90% !important;
    max-height: 350px !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
}

.diagram-title {
    font-size: 14px;
    font-weight: 600;
    color: #636e72;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.building-diagram {
    max-width: 100%;
    height: auto;
}

/* Calculation Tables */
.calculation-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calculation-table th {
    background: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calculation-table td {
    padding: 15px;
    border-bottom: 1px solid #dfe6e9;
    color: #2d3436;
    font-size: 15px;
}

.calculation-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.calculation-table tr:hover {
    background-color: #e3f2fd;
}

/* Formula Box */
.formula-box {
    background: #f8f9fa;
    border: 2px solid #0984e3;
    border-radius: 8px;
    padding: 25px;
    margin: 20px 0;
    page-break-inside: avoid;
}

.formula {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #2d3436;
    line-height: 1.8;
    margin-bottom: 15px;
}

.formula-result {
    font-size: 20px;
    font-weight: 700;
    color: #0984e3;
    margin-top: 10px;
}

/* Print Styles */
@media print {
    .page-container {
        box-shadow: none;
        margin: 0;
        padding: 30px;
        page-break-after: always;
        page-break-inside: avoid;
    }
    
    .page-header {
        border-bottom-color: #000;
    }
    
    .section {
        page-break-inside: avoid;
    }
    
    .diagram-container {
        page-break-inside: avoid;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .page-container {
        padding: 20px;
    }
}

.regenerate-btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    width: 100%;
}

.regenerate-btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.regenerate-btn-warning:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.regenerate-section {
    margin-top: 20px;
    margin-bottom: 20px;
}