/* Custom styles for the assessment system */

/* Drag and Drop styles */
.draggable-item {
    transition: all 0.2s ease;
}

.draggable-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.drop-zone {
    transition: all 0.2s ease;
    min-height: 4rem;
}

.drop-zone.drag-over {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.drag-feedback {
    pointer-events: none;
    position: absolute;
    z-index: 1000;
    opacity: 0.8;
    max-width: 300px;
}

/* Animation for correct/incorrect feedback */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-animation {
    animation: pulse 0.5s ease-in-out;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .draggable-item {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
    
    .drop-zone {
        min-height: 3.5rem;
    }
}

/* Optional CSS to make the scrollbar look nicer */
/* Add this to your custom.css file if you want */

/* Scrollbar styling for the results modal */
.max-h-80::-webkit-scrollbar {
    width: 6px;
}

.max-h-80::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.max-h-80::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.max-h-80::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Additional CSS styles for dual drag-and-drop question */

/* Draggable item styles */
.draggable-concern,
.draggable-stakeholder {
    transition: all 0.2s ease;
}

.draggable-concern:hover,
.draggable-stakeholder:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Drop zone styles */
.drop-zone-concern,
.drop-zone-relationship {
    transition: all 0.2s ease;
}

/* Tab styles */
.tab-content {
    transition: opacity 0.3s ease;
}

/* Correct/incorrect highlights — scoped to the dual drag-drop's zones and items
   so they don't restyle Tailwind's bg-*/border-* utilities everywhere (BUGS.md #11) */
.drop-zone-concern.bg-green-50,
.draggable-stakeholder.bg-green-50 {
    background-color: rgba(236, 253, 245, 0.8);
}

.drop-zone-concern.bg-red-50,
.draggable-stakeholder.bg-red-50 {
    background-color: rgba(254, 242, 242, 0.8);
}

.drop-zone-concern.border-green-300,
.draggable-concern.border-green-300,
.draggable-stakeholder.border-green-300 {
    border-color: rgba(110, 231, 183, 1);
}

.drop-zone-concern.border-red-300,
.draggable-concern.border-red-300,
.draggable-stakeholder.border-red-300 {
    border-color: rgba(252, 165, 165, 1);
}

/* Multiple item container in relationship drop zones */
.dropped-items-container {
    min-height: 1rem;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .draggable-concern,
    .draggable-stakeholder {
        font-size: 0.875rem;
    }
    
    .drop-zone-concern,
    .drop-zone-relationship {
        min-height: 5rem;
    }
}
/* Additional CSS styles for the business structure toggle board */

/* Smooth toggle transitions */
.toggle-knob {
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.toggle-track {
    transition: background-color 0.2s ease-in-out;
}

.toggle-text {
    transition: color 0.2s ease-in-out;
}

/* Table row hover effect */
#questions-container tr:hover {
    background-color: rgba(243, 244, 246, 0.8);
}

/* Toggle label hover effect */
.toggle-label:hover {
    opacity: 0.9;
}

/* Responsive table adjustments */
@media (max-width: 768px) {
    #questions-container th, 
    #questions-container td {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    #questions-container .toggle-label {
        width: 3rem;
        height: 1.5rem;
    }
    
    #questions-container .toggle-knob {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Animation for feedback */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#feedback-question-10 {
    animation: fadeIn 0.5s ease-out;
}

/* Highlight glow for correct/incorrect toggle knobs — scoped so every other
   element with a plain Tailwind border-*-500 doesn't get a glow ring (BUGS.md #11) */
.toggle-knob.border-green-500 {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

.toggle-knob.border-red-500 {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
}

/* Custom scrollbar for table */
.overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* CSS for Wizard Navigation */

/* Fade transitions for questions */
#questions-container .question-container {
    transition: opacity 0.3s ease-out;
}

/* Progress indicator styling */
.progress-indicator {
    transition: all 0.2s ease;
    position: relative;
}

.progress-indicator:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active indicator styling */
.progress-indicator.ring-2 {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Progress status colors with better contrast — scoped to the dashboard
   indicators instead of redefining the Tailwind utilities (BUGS.md #11) */
.progress-indicator.bg-gray-200 {
    background-color: #e5e7eb; /* Neutral */
}

.progress-indicator.bg-yellow-200 {
    background-color: #fef08a; /* Current question */
}

.progress-indicator.bg-green-200 {
    background-color: #bbf7d0; /* Completed */
}

/* Navigation button effects */
#wizard-navigation button {
    transition: all 0.2s ease;
}

#wizard-navigation button:not(:disabled):hover {
    transform: translateY(-1px);
}

#wizard-navigation button:not(:disabled):active {
    transform: translateY(0);
}

/* Disabled button styling */
#wizard-navigation button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Save button pulse animation */
@keyframes savePulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

#save-progress-btn:hover {
    animation: savePulse 1.5s infinite;
}

/* Progress dashboard styling */
#progress-dashboard {
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .progress-indicator {
        height: 2rem;
        width: 2rem;
        font-size: 0.75rem;
    }
    
    #wizard-navigation button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* For screens that support hover */
@media (hover: hover) {
    .progress-indicator:hover {
        transform: translateY(-2px);
    }
}

/* Sticky navigation for longer questions */
@media (min-height: 800px) {
    #wizard-navigation {
        position: sticky;
        bottom: 1rem;
        padding: 1rem;
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        border-radius: 0.5rem;
        z-index: 10;
        margin-top: 2rem;
        border: 1px solid #e5e7eb;
    }
}


/* Style for the Save & Exit button in the navigation */
#save-exit-btn {
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

#save-exit-btn:hover {
    background-color: #dbeafe;
    transform: translateY(-1px);
}

/* Style for saved assessment notice at the top */
#saved-assessment-notice {
    margin-bottom: 1rem;
}

/* Add some spacing between rearranged elements */
#progress-dashboard {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}