/* ========================================
   CSS STYLING FOR GREENSOL APPLICATION
   ======================================== */

/* ======================
   GLOBAL RESET & BASE STYLES
   ====================== */
/* Universal box-sizing reset - ensures all elements calculate width/height including padding and borders
   This prevents unexpected layout issues and makes sizing more predictable */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ======================
   MAIN BODY & LAYOUT
   ====================== */
/* Main body styling with modern font stack and neutral background
   - Uses system fonts for native OS appearance and better performance
   - Light gray background provides subtle contrast for white content cards
   - Improved line-height for better readability
   - min-height ensures full viewport coverage */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
    color: #333;
    line-height: 1.6;
    min-height: 100vh;
    margin: 8px;
}

/* ======================
   NAVIGATION BANNER (EXACT COPY)
   ====================== */
#header {
    margin: 0 -8px;
    padding: 0;
}

.header {
    background-color: #eee;
    border-bottom: 1px solid #e6e6e6;
    padding: 27px 0;
    text-align: center;
    margin: 0;
    width: calc(100% + 16px);
}

.topnav {
    display: inline-block;
    list-style: none;
    line-height: 50px;
    margin: 0;
    padding: 0;
}


.topnav li {
    float: left;
    width: 130px;
    text-align: center;
}

.topnav li a {
    color: #818181;
    font-size: 15px;
    line-height: 30px;
    text-decoration: none;
}
    
.topnav li a:hover {
    color: #000;
}

.topnav li.active a {
    color: #f99600;
}

/* ======================
   FOOTER STYLING
   ====================== */
#footer {
    background-color: #eee;
    border-top: 1px solid #d8d8d8;
    padding: 30px 0;
    margin: 0 -8px;
    width: calc(100% + 16px);
}

#footer p {
    font-size: 12px;
    line-height: 30px;
    padding-left: 10px;
    margin: 0;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

#connect {
    float: right;
    margin-right: 30px;
}

#connect a {
    background: url(../images/icons.png) no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 0 10px;
}

#connect a.twitter {
    background-position: 0 -80px;
}

#connect a.twitter:hover {
    background-position: -40px -80px;
}

/* Main container for page content - responsive width with padding
   - Increased max-width to accommodate wider sections
   - Auto margins center the content
   - Responsive padding adapts to screen size */
.container {
    max-width: 2200px;
    width: 98%;
    margin: 0 auto;
    padding: 20px 10px;
}


/* ======================
   TYPOGRAPHY & HEADINGS
   ====================== */
/* Main heading styling - GreenSol branding
   - Large, bold font establishes visual hierarchy
   - Green color (#4caf50) represents the "green chemistry" theme
   - Centered alignment for balanced appearance */
h1 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    color: #4caf50;
}

/* Subtitle styling - Application description
   - Smaller, lighter text provides context without competing with main heading
   - Gray color creates visual hierarchy
   - Centered to match main heading */
.subtitle {
    text-align: center;
    color: #C0C0C0;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* ======================
   SECTION STYLING (.section class)
   ====================== */
/* Primary content container styling
   - White background creates clear content boundaries against gray page background
   - Rounded corners (16px) provide modern, friendly appearance
   - Subtle shadow adds depth and visual separation from background
   - Padding ensures content doesn't touch edges
   - Margin creates spacing between sections
   - Border provides subtle definition */
.section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin: 0 auto 20px auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 0.5px solid #e0e0e0;
    width: 100%;
    max-width: 2000px;
}

/* Section title styling
   - Consistent typography for section headers
   - Slightly larger than body text to establish hierarchy
   - Margin provides breathing room from content */
.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

/* ======================
   MOLECULAR EDITOR STYLING
   ====================== */
/* Editor container - centers the molecular drawing component */
.editor {
    text-align: center;
    margin-bottom: 15px;
}

/* JSME molecular editor container styling
   - Border and rounded corners match overall design language
   - Inline-block allows centering while maintaining container behavior
   - Shadow adds depth to distinguish interactive element */
#jsme_container {
    border: 0.5px solid #C0C0C0;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ======================
   FORM AND INPUT STYLING
   ====================== */
/* Control section container - centers form elements */
.controls {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

/* Select dropdown styling
   - Generous padding improves touch targets and visual appeal
   - Consistent border treatment matches other form elements
   - White background ensures readability
   - Subtle shadow adds depth
   - Minimum width prevents cramped appearance
   - Margin provides spacing from other elements */
select {
    padding: 12px 16px;
    border: 0.5px solid #C0C0C0;
    border-radius: 8px;
    background: white;
    color: #333;
    font-size: 16px;
    margin-bottom: 20px;
    min-width: 200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Select focus state - provides visual feedback during interaction
   - Removes default browser outline
   - Green border color matches application theme
   - Indicates active state to user */
select:focus {
    outline: none;
    border-color: #4caf50;
}

/* ======================
   BUTTON STYLING
   ====================== */
/* Primary button styling
   - Green background (#4caf50) reinforces green chemistry theme
   - White text provides maximum contrast for readability
   - Borderless design creates clean, modern appearance
   - Generous padding improves touch targets and visual weight */
.analyze-button {
    background: #4caf50;
    color: white;
    border: none;
    padding: 14px 48px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 3px 6px rgba(76, 175, 80, 0.3);
}

.analyze-button:hover {
    background: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
}

.analyze-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}

.analyze-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ======================
   OUTPUT DISPLAY STYLING
   ====================== */
/* Output container styling
   - Light gray background distinguishes output from input areas
   - Consistent border and radius treatment
   - Padding ensures content doesn't touch edges */
.output {
    border: 0.5px solid #C0C0C0;
    border-radius: 12px;
    padding: 20px;
    background: #f9f9f9;
}

/* Output label styling
   - Small, uppercase text creates clear section identification
   - Gray color provides subtle hierarchy
   - Letter spacing improves readability of uppercase text
   - Margin provides separation from content */
.output-label {
    font-size: 14px;
    font-weight: 500;
    color: #C0C0C0;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* SMILES chemical notation display
   - Monospace font ensures consistent character spacing for chemical formulas
   - White background distinguishes from container
   - Flexbox centers content both horizontally and vertically
   - Word-breaking properties handle long chemical strings gracefully
   - Scrollable when content exceeds container height
   - Consistent border treatment matches design language */
.smiles {
    font-family: 'Courier New', monospace;
    padding: 20px 16px;
    background: white;
    border: 0.5px solid #C0C0C0;
    border-radius: 8px;
    min-height: 60px;
    max-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    line-height: 1.4;
}

/* Active state for SMILES display - indicates valid chemical structure
   - Green color and border match application theme
   - Provides visual feedback for successful analysis */
.smiles.active {
    color: #4caf50;
    border-color: #4caf50;
}

/* ======================
   RESULTS DISPLAY STYLING
   ====================== */
/* Results container spacing */
.results {
    margin-top: 20px;
}

/* ======================
   LOADING AND ERROR STATES
   ====================== */
/* Loading and no-results styling
   - Centered text provides clear user feedback
   - Generous padding creates visual importance
   - Gray color indicates secondary information
   - Italic text style distinguishes from regular content */
.loading, .no-results {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
}

/* Loading state - green color indicates active processing */
.loading {
    color: #4caf50;
}


/* ======================
   CHART AND VISUALIZATION STYLING
   ====================== */
/* Chart container - provides spacing from other content */
.chart-container {
    margin-top: 15px;
}

/* Chart wrapper styling
   - White background creates clear boundaries for visualizations
   - Consistent border and shadow treatment
   - Padding ensures charts don't touch edges
   - Margin provides spacing between multiple charts */
.chart-wrapper {
    margin-bottom: 20px;
    border: 0.5px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Chart title styling
   - Medium font size provides hierarchy without overwhelming
   - Bold weight emphasizes importance
   - Centered alignment balances with chart content
   - Margin provides separation from chart */
.chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

/* Chart plot containers
   - Full width and height utilize available space
   - Initially hidden, shown when charts are rendered
   - Allows for responsive chart sizing */
.chart-plot {
    width: 100%;
    height: 100%;
    display: none;
}

/* 3D scatter chart specific styling */
#scatter3dChart {
    width: 100%;
    height: 100%;
    display: none;
}

/* ======================
   RESPONSIVE DESIGN ELEMENTS
   ====================== */
/* Mobile and tablet responsive design
   - Breakpoint at 768px targets common tablet/mobile sizes
   - Adjustments ensure usability on smaller screens */
@media (max-width: 768px) {
    /* Reduce container padding for more content space */
    .container {
        width: 98%;
        max-width: none;
        padding: 10px 5px;
    }
    
    /* Maintain section width on mobile */
    .section {
        padding: 15px;
        width: 100%;
    }
    
    /* Reduce main heading size for mobile screens */
    h1 {
        font-size: 2rem;
    }
    
    /* Force molecular editor to full width on mobile
       - Important flag overrides inline styles from JSME library */
    #jsme_container {
        width: 100% !important;
        max-width: 100% !important;
        height: 380px !important;
    }
    
    /* Mobile-friendly button styling */
    .btn {
        padding: 16px 24px;
        font-size: 18px;
        min-height: 44px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }
    
    /* Mobile-friendly select dropdown */
    select {
        padding: 16px;
        font-size: 18px;
        min-height: 44px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 20px;
        display: block;
    }
    
    /* Stack charts vertically on mobile */
    .charts-side-by-side {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Set specific chart heights for mobile optimization */
    .chart-plot {
        height: 300px !important;
    }
    
    /* Taller height for 3D charts to maintain usability */
    #scatter3dChart {
        height: 400px !important;
    }
    
    /* Chart wrapper mobile adjustments */
    .chart-wrapper {
        height: auto !important;
        min-height: 350px;
        flex: none !important;
    }
    
    /* Mobile-friendly navigation */
    .topnav li {
        width: auto;
        min-width: 100px;
    }
    
    .topnav li a {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    
    /* Mobile-friendly SMILES display */
    .smiles {
        font-size: 14px;
        padding: 16px;
        min-height: 80px;
        max-height: 120px;
    }
    
    
}


/* Additional mobile breakpoint for very small screens */
@media (max-width: 480px) {
    /* Further reduce padding on very small screens */
    .container {
        padding: 8px 4px;
    }
    
    .section {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    /* Smaller heading on very small screens */
    h1 {
        font-size: 1.8rem;
    }
    
    /* Ultra-compact JSME editor */
    #jsme_container {
        height: 320px !important;
    }
    
    /* Compact chart heights */
    .chart-plot {
        height: 250px !important;
    }
    
    #scatter3dChart {
        height: 300px !important;
    }
    
    /* Smaller font sizes */
    .section-title {
        font-size: 1rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
}

/* ========================================
   INLINE STYLES CONVERTED TO CLASSES
   ======================================== */

/* Logo styles */
.logo-image {
    display: block;
    margin: 0 auto;
    max-width: 400px;
    height: auto;
}

/* Editor instructions */
.editor-instructions {
    margin-bottom: 15px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    text-align: center;
}

.editor-instructions p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* Analysis section */
.analysis-section {
    display: none;
}



/* Close button */
.close-btn {
    background: #f44336;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.3s ease;
}

.close-btn:hover {
    background: #d32f2f;
}

/* References box - inherits section styling for consistent width and appearance */
.references-box {
    display: none;
    /* Section styling already applied via .section class */
    /* Width and max-width inherited from .section class - no override needed */
}

.references-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 0.5px solid #e0e0e0;
    padding-bottom: 10px;
}

.references-title {
    color: #333;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.references-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}