/* Punnett Square Generator WordPress Plugin Styles */
.clac360-punnett-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #F5F5F5;
    color: #111111;
    line-height: 1.6;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.clac360-punnett-container * {
    box-sizing: border-box;
}

/* Main container layout - FIXED: Side-by-side on large screens */
.clac360-punnett-container .container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.clac360-punnett-container .input-output-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

/* Desktop layout: side by side */
@media (min-width: 992px) {
    .clac360-punnett-container .input-output-container {
        flex-direction: row;
        align-items: flex-start; /* Align panels at the top */
    }
    
    .clac360-punnett-container .input-panel {
        width: 45%;
        min-width: 45%;
    }
    
    .clac360-punnett-container .results-panel {
        width: 55%;
        min-width: 55%;
    }
}

/* Panel title with colorblind toggle inline - FIXED */
.clac360-punnett-container .panel-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #ccc !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    gap: 20px !important;
    width: 100% !important;
}

.clac360-punnett-container .panel-title span:first-child {
    flex-grow: 1;
    min-width: 0; /* Allow text to shrink if needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colorblind toggle positioning - FIXED */
.clac360-punnett-container .colorblind-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    flex-shrink: 0 !important; /* Prevent toggle from shrinking */
    white-space: nowrap !important;
}

.clac360-punnett-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    flex-shrink: 0;
}

/* Enhanced Colorblind Mode Styles */
.clac360-punnett-container.colorblind {
    /* Add high contrast borders */
    --border-enhanced: #000000;
    --accent-enhanced: #0000AA;
    --secondary-enhanced: #AA5500;
}

.clac360-punnett-container.colorblind .button-primary {
    background-color: #0000AA !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    position: relative;
}

.clac360-punnett-container.colorblind .button-primary:after {
    content: " ▶" !important;
    font-weight: bold !important;
}

.clac360-punnett-container.colorblind .button-secondary {
    background-color: #AA5500 !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    position: relative;
}

.clac360-punnett-container.colorblind .button-secondary:after {
    content: " ↻" !important;
    font-weight: bold !important;
}

.clac360-punnett-container.colorblind .button-neutral {
    background-color: #666666 !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
}

.clac360-punnett-container.colorblind .accent-text {
    text-decoration: underline !important;
    font-weight: bold !important;
    text-decoration-thickness: 2px !important;
}

.clac360-punnett-container.colorblind .step-calculation {
    border-left: 6px solid #0000AA !important;
    border-right: 3px solid #000000 !important;
    background-color: #F0F0F0 !important;
}

.clac360-punnett-container.colorblind .punnett-cell {
    border: 3px solid #000000 !important;
    background-color: #FFFFFF !important;
}

.clac360-punnett-container.colorblind .radio-option input[type="radio"] {
    border: 2px solid #000000 !important;
    background-color: #FFFFFF !important;
}

.clac360-punnett-container.colorblind .radio-option input[type="radio"]:checked {
    background-color: #0000AA !important;
}

.clac360-punnett-container.colorblind .primary-input, 
.clac360-punnett-container.colorblind .secondary-input {
    border: 3px solid #000000 !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

.clac360-punnett-container.colorblind .chart-container canvas {
    border: 2px solid #000000 !important;
}

.clac360-punnett-container.colorblind .result-label {
    border-bottom: 2px dashed #000000 !important;
}

.clac360-punnett-container.colorblind .result-value {
    color: #0000AA !important;
    font-weight: bold !important;
}

/* Input panel adjustments for better visibility */
.clac360-punnett-container .input-group {
    margin-bottom: 30px !important; /* Increased spacing */
}

.clac360-punnett-container .primary-input,
.clac360-punnett-container .secondary-input {
    padding: 14px 15px !important; /* Increased padding for better text visibility */
    height: 52px !important; /* Increased height for better text visibility */
    font-size: 16px !important; /* Larger font for better readability */
    line-height: 1.4 !important;
    border: 2px solid #444444 !important;
    border-radius: 8px !important;
    background-color: #f9f9f9 !important;
    color: #111111 !important;
    width: 100% !important;
    margin-top: 5px !important;
    display: block !important;
}

/* Textarea specific adjustments */
.clac360-punnett-container textarea.secondary-input {
    min-height: 100px !important; /* Ample height for textarea */
    resize: vertical !important;
    padding: 12px !important;
    line-height: 1.5 !important;
}

/* Radio group adjustments */
.clac360-punnett-container .radio-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

.clac360-punnett-container .radio-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    background: #f9f9f9 !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
}

/* Button group adjustments - increased spacing from input fields */
.clac360-punnett-container .button-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 40px !important; /* Increased margin from last input field */
    margin-bottom: 30px !important;
    padding-top: 20px !important;
    border-top: 2px dashed #ddd !important;
}

.clac360-punnett-container .button {
    padding: 14px 28px !important; /* Larger buttons */
    height: 52px !important;
    min-height: 52px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: none !important;
}

/* Panel layout adjustments */
.clac360-punnett-container .input-panel,
.clac360-punnett-container .results-panel {
    padding: 30px !important; /* Increased padding */
    background-color: #E0E0E0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    height: fit-content !important;
    min-height: 600px !important; /* Ensure minimum height for side-by-side layout */
}

/* Chart container adjustments */
.clac360-punnett-container .chart-container {
    height: 320px !important; /* Increased chart height */
    margin-top: 30px !important;
    position: relative !important;
}

/* Step calculation adjustments */
.clac360-punnett-container .step-calculation {
    padding: 25px !important;
    margin-bottom: 30px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-left: 5px solid #4A90E2 !important;
}

.clac360-punnett-container .step-content {
    padding: 18px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    min-height: 80px !important;
}

/* CSV import section adjustments */
.clac360-punnett-container .csv-import-section {
    margin-top: 40px !important;
    padding: 25px !important;
    border: 2px dashed #999 !important;
    border-radius: 10px !important;
}

/* Dropdown/select box adjustments - specific for formula selection if any */
.clac360-punnett-container select {
    padding: 14px 15px !important;
    height: 52px !important;
    font-size: 16px !important;
    border: 2px solid #444444 !important;
    border-radius: 8px !important;
    background-color: #f9f9f9 !important;
    color: #111111 !important;
    width: 100% !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
}

/* Ensure text is fully visible in all input fields */
.clac360-punnett-container input[type="text"]:focus,
.clac360-punnett-container input[type="text"]:hover,
.clac360-punnett-container textarea:focus,
.clac360-punnett-container textarea:hover,
.clac360-punnett-container select:focus,
.clac360-punnett-container select:hover {
    border-color: #4A90E2 !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2) !important;
    outline: none !important;
}

/* Results panel content adjustments */
.clac360-punnett-container .results-content {
    padding: 15px 0 !important;
}

.clac360-punnett-container .result-item {
    margin-bottom: 25px !important;
    padding-bottom: 25px !important;
    border-bottom: 2px solid #ddd !important;
}

.clac360-punnett-container .result-label {
    font-size: 1.2rem !important;
    margin-bottom: 12px !important;
}

.clac360-punnett-container .result-value {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}

/* Analysis and recommendation sections */
.clac360-punnett-container .analysis-section,
.clac360-punnett-container .recommendation-section {
    padding: 25px !important;
    margin-top: 30px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 10px !important;
}

/* Loading indicator */
.clac360-punnett-container .loading {
    padding: 30px !important;
    font-size: 18px !important;
}

/* Error and success messages */
.clac360-punnett-container .error-message,
.clac360-punnett-container .success-message {
    padding: 20px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
}

/* Trademark styling */
.clac360-punnett-container .trademark {
    margin-top: 40px !important;
    padding: 15px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #666 !important;
    border-top: 1px solid #ddd !important;
    width: 100% !important;
}

/* Responsive design */
@media (max-width: 992px) {
    .clac360-punnett-container .input-output-container {
        flex-direction: column !important;
    }
    
    .clac360-punnett-container .input-panel,
    .clac360-punnett-container .results-panel {
        width: 100% !important;
        margin-bottom: 30px !important;
        min-height: auto !important;
    }
    
    .clac360-punnett-container .button-group {
        flex-direction: column !important;
    }
    
    .clac360-punnett-container .button {
        width: 100% !important;
    }
    
    .clac360-punnett-container .panel-title {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 768px) {
    .clac360-punnett-container {
        padding: 15px !important;
    }
    
    .clac360-punnett-container .input-panel,
    .clac360-punnett-container .results-panel {
        padding: 20px !important;
    }
    
    .clac360-punnett-container .primary-input,
    .clac360-punnett-container .secondary-input,
    .clac360-punnett-container select {
        padding: 12px !important;
        height: 48px !important;
        font-size: 15px !important;
    }
    
    .clac360-punnett-container .button {
        padding: 12px 20px !important;
        height: 48px !important;
        font-size: 15px !important;
    }
    
    .clac360-punnett-container .chart-container {
        height: 250px !important;
    }
    
    .clac360-punnett-container .panel-title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .clac360-punnett-container .colorblind-toggle {
        align-self: flex-start !important;
    }
}

/* Accessibility improvements */
.clac360-punnett-container input:focus,
.clac360-punnett-container button:focus,
.clac360-punnett-container select:focus {
    outline: 3px solid #4A90E2 !important;
    outline-offset: 2px !important;
}

/* Print styles */
@media print {
    .clac360-punnett-container .button,
    .clac360-punnett-container .csv-import-section,
    .clac360-punnett-container .colorblind-toggle {
        display: none !important;
    }
}