/* GlycoTraj Plugin CSS
 * 
 * This CSS file is scoped to the GlycoTraj plugin using the container class.
 * All styles should be prefixed with the plugin container class to avoid conflicts.
 * 
 * Usage:
 * - Use .plugin-glycotraj as the root selector
 * - Prefix all custom classes with .glycotraj- (from get_css_class_prefix())
 * - This ensures styles only affect the GlycoTraj plugin
 */

/* Phone responsive styles */
@media (max-width: 768px) {
    /* Remove left padding from plugin container on phones */
    .plugin-glycotraj.plugin-ui-container {
        padding-left: 0 !important;
    }
    
    /* GlycoTraj: stack Configuration below Input Files on phones */
    .plugin-glycotraj .glycotraj-input-config-container {
        flex-direction: column !important;
    }
    
    .plugin-glycotraj .glycotraj-input-config-container .upload-section {
        flex: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 1.25rem;
    }
    
    .plugin-glycotraj .glycotraj-input-config-container .config-section {
        flex: none !important;
        width: 100% !important;
        min-width: auto !important;
    }
    
    /* GlycoTraj results: stack molecule viewer below download buttons on phones */
    .plugin-glycotraj .glycotraj-results-table-molecule-container {
        flex-direction: column !important;
    }
    
    /* Download container: full width on phones */
    .plugin-glycotraj .glycotraj-results-download-container {
        flex: none !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 1.25rem;
    }
    
    /* Molecule viewer container: full width on phones */
    .plugin-glycotraj .glycotraj-results-viewer-container {
        flex: none !important;
        width: 100% !important;
        min-width: auto !important;
    }
}

/* Note: You can still use global classes like 'dark-table', 'btn-info', etc.
 * but plugin-specific styles should be scoped to avoid conflicts.
 */