/**
 * Challenge Admin Styles
 * 
 * Custom styles for the Challenge model admin interface
 */

/* Smooth transitions for conditional fields */
.step-type-field,
.duration-field,
.check-in-frequency-field {
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
}

/* Hide conditional fields with smooth animation */
.step-type-field[style*="display: none"],
.duration-field[style*="display: none"],
.check-in-frequency-field[style*="display: none"] {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
}

/* Highlight the number_of_steps field to indicate it controls other fields */
.model-challenge [data-field-name="number_of_steps"] {
    border-left: 3px solid #007cba;
    padding-left: 10px;
    margin-bottom: 20px;
}

/* Style for the step configuration section */
.model-challenge .step-configuration {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
}

/* Add visual indicators for conditional fields */
.step-type-field label:after,
.duration-field label:after,
.check-in-frequency-field label:after {
    content: " *";
    color: #ff6b6b;
    font-weight: bold;
    margin-left: 3px;
}

/* Add help text styling */
.step-type-field .help-text,
.duration-field .help-text,
.check-in-frequency-field .help-text {
    font-style: italic;
    color: #666;
    margin-top: 5px;
    font-size: 0.9em;
}

/* Style for MultiFieldPanel headings */
.model-challenge .multi-field-panel h3 {
    color: #333;
    border-bottom: 2px solid #007cba;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* Improve form field spacing */
.model-challenge .field {
    margin-bottom: 20px;
}

/* Style for the number of steps field as it's the primary control */
.model-challenge [data-field-name="number_of_steps"] input {
    font-weight: bold;
    border: 2px solid #007cba;
    border-radius: 4px;
    padding: 8px;
}

/* Focus states for better accessibility */
.model-challenge input:focus,
.model-challenge select:focus,
.model-challenge textarea:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Responsive adjustments for mobile admin */
@media (max-width: 768px) {
    .model-challenge [data-field-name="number_of_steps"] {
        border-left: 2px solid #007cba;
        padding-left: 8px;
    }
    
    .model-challenge .step-configuration {
        padding: 10px;
        margin: 5px 0;
    }
}

/* Print styles */
@media print {
    .step-type-field,
    .duration-field,
    .check-in-frequency-field {
        display: block !important;
        opacity: 1 !important;
        max-height: none !important;
    }
}