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

/* Example: Scoped table styles */
.plugin-glycoshield .glycoshield-table {
    border-collapse: collapse;
    width: 100%;
    background-color: #1a202c;
    border: 1px solid #4a5568;
}

.plugin-glycoshield .glycoshield-table-header {
    background-color: #2d3748;
    color: #ffffff;
    padding: 0.625rem;
    text-align: left;
}

.plugin-glycoshield .glycoshield-table-cell {
    color: #a0aec0;
    padding: 0.5rem;
}

/* Example: Scoped button styles */
.plugin-glycoshield .glycoshield-button-primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.plugin-glycoshield .glycoshield-button-primary:hover {
    background-color: #0056b3;
}

/* Example: Scoped form input styles */
.plugin-glycoshield .glycoshield-input {
    background-color: #2d3748;
    color: #ffffff;
    border: 1px solid #4a5568;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.plugin-glycoshield .glycoshield-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.125rem rgba(0, 123, 255, 0.25);
}

/* Mapping form grid container */
.plugin-glycoshield .glycoshield-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9375rem;
}

/* Spacing between label and input in mapping form */
.plugin-glycoshield .glycoshield-form-field .form-label {
    display: block;
}

/* Mapping form container */
.plugin-glycoshield .glycoshield-form-container {
    background-color: #1a202c;
    padding: 1.25rem;
    border-radius: 0.3125rem;
    border: 1px solid #4a5568;
}

/* Full width button */
.plugin-glycoshield .glycoshield-button-full-width {
    width: 100%;
}

/* Action buttons container */
.plugin-glycoshield .glycoshield-action-buttons {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.625rem;
}

.plugin-glycoshield .glycoshield-action-buttons .btn-info,
.plugin-glycoshield .glycoshield-action-buttons .btn-secondary {
    flex: 1;
}

/* Glycan selection visualization heading */
.plugin-glycoshield .glycoshield-visualization-heading {
    color: white;
    margin-bottom: 0.9375rem;
    margin-top: 1.25rem;
}

/* Glycofig SVG image styling */
.plugin-glycoshield .glycoshield-glycofig-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
    background-color: white;
    width: 100%;
}

/* Phone responsive styles */
@media (max-width: 768px) {
    /* Remove left padding from plugin container on phones */
    .plugin-glycoshield.plugin-ui-container {
        padding-left: 0 !important;
    }
    
    /* Container for upload and config sections - make vertical */
    .plugin-glycoshield .upload-config-container {
        flex-direction: column !important;
    }
    
    /* Upload and config sections - full width, no flex */
    .plugin-glycoshield .upload-section,
    .plugin-glycoshield .config-section {
        flex: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .plugin-glycoshield .upload-section {
        margin-bottom: 1.25rem;
    }
    
    /* Make upload buttons stack vertically */
    .plugin-glycoshield .upload-section > div {
        flex-direction: column !important;
        gap: 0.625rem !important;
    }
    
    /* Remove margins from individual upload button containers */
    .plugin-glycoshield .upload-section > div > div {
        flex: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Upload area width 80% on phones */
    .plugin-glycoshield .upload-area {
        width: 80% !important;
        margin: 0 auto !important; /* Center the upload area */
    }
    
    /* Config section: remove min-width on phones */
    .plugin-glycoshield .config-section {
        min-width: auto !important;
    }
    
    /* Configuration inputs: stack vertically on phones */
    .plugin-glycoshield .config-content > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.9375rem !important;
    }
    
    /* Mapping section: ensure vertical layout for buttons */
    .plugin-glycoshield .mapping-section {
        display: flex;
        flex-direction: column;
    }
    
    /* On phones: stack form and mappings vertically */
    .plugin-glycoshield .mapping-form-mappings-container {
        flex-direction: column !important;
    }
    
    /* Mapping form section: full width on phones */
    .plugin-glycoshield .mapping-form-section {
        flex: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 1.25rem;
    }
    
    /* Mappings list section: full width on phones */
    .plugin-glycoshield .mappings-list-section {
        flex: none !important;
        width: 100% !important;
        min-width: auto !important;
    }
    
    /* Action buttons: full width on phones */
    .plugin-glycoshield .mapping-section .glycoshield-action-buttons {
        width: 100%;
    }
    
    /* Results section: stack molecule viewer below results table on phones */
    /* Target the flex container that holds table and molecule viewer */
    .plugin-glycoshield .results-table-molecule-container {
        flex-direction: column !important;
    }
    
    /* Results table container: full width on phones */
    .plugin-glycoshield .results-table-container {
        flex: none !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 1.25rem;
    }
    
    /* Molecule viewer container: full width on phones */
    .plugin-glycoshield .results-molecule-viewer {
        flex: none !important;
        width: 100% !important;
        min-width: auto !important;
    }
    
    /* Show icon, hide text on phones */
    .plugin-glycoshield .mapping-remove-icon {
        display: inline-block;
    }
    
    .plugin-glycoshield .mapping-remove-text {
        display: none !important;
    }
    
    /* Hide individual columns on phone, show merged column */
    .plugin-glycoshield .mapping-chain-col,
    .plugin-glycoshield .mapping-residue-col,
    .plugin-glycoshield .mapping-glycan-type-col {
        display: none !important;
    }
    
    /* Show merged column on phone */
    .plugin-glycoshield .mapping-merged-col {
        display: table-cell !important;
    }
}

/* Desktop: hide merged column, show individual columns */
@media (min-width: 769px) {
    .plugin-glycoshield .mapping-merged-col {
        display: none !important;
    }
    
    .plugin-glycoshield .mapping-chain-col,
    .plugin-glycoshield .mapping-residue-col,
    .plugin-glycoshield .mapping-glycan-type-col {
        display: table-cell !important;
    }
    
    /* Show text, hide icon on desktop */
    .plugin-glycoshield .mapping-remove-icon {
        display: none !important;
    }
    
    .plugin-glycoshield .mapping-remove-text {
        display: inline !important;
    }
}

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