/* Custom styles for Building Defect Detection Agent */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #374151;
}

/* Navigation Styles */
.nav-btn {
    @apply px-4 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200 border border-transparent;
}

.nav-btn.active {
    @apply text-blue-600 bg-blue-50 border-blue-200;
}

/* Section Management */
.section {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
}

.section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Custom Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Drag and Drop Styles */
.dropzone-hover {
    @apply border-blue-400 bg-blue-50;
}

.photo-preview-item {
    @apply relative overflow-hidden rounded-lg border-2 border-gray-200 hover:border-blue-400 transition-colors;
}

.photo-preview-item img {
    @apply w-full h-32 object-cover;
}

.photo-preview-item .remove-btn {
    @apply absolute top-2 right-2 bg-red-500 text-white w-6 h-6 rounded-full flex items-center justify-center text-xs hover:bg-red-600 transition-colors cursor-pointer;
}

/* Analysis Results */
.defect-item {
    @apply border-l-4 p-4 mb-4 rounded-r-lg shadow-sm;
}

.defect-item.critical {
    @apply border-red-500 bg-red-50;
}

.defect-item.high {
    @apply border-orange-500 bg-orange-50;
}

.defect-item.medium {
    @apply border-yellow-500 bg-yellow-50;
}

.defect-item.low {
    @apply border-blue-500 bg-blue-50;
}

/* Work Order Styles */
.work-order-card {
    @apply bg-white rounded-lg shadow-md p-6 border-l-4 hover:shadow-lg transition-shadow;
}

.work-order-card.critical {
    @apply border-red-500;
}

.work-order-card.high {
    @apply border-orange-500;
}

.work-order-card.medium {
    @apply border-yellow-500;
}

.work-order-card.low {
    @apply border-green-500;
}

.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-badge.open {
    @apply bg-red-100 text-red-800;
}

.status-badge.in-progress {
    @apply bg-yellow-100 text-yellow-800;
}

.status-badge.completed {
    @apply bg-green-100 text-green-800;
}

/* Chart Containers */
.chart-container {
    position: relative;
    width: 100%;
    height: 300px;
}

/* Fix chart canvas positioning and sizing */
canvas {
    max-width: 100% !important;
    height: auto !important;
}

#analytics-section canvas {
    position: relative !important;
    max-height: 400px !important;
}

#priorityChart, #defectTypesChart {
    max-height: 300px !important;
}

#trendsChart {
    max-height: 400px !important;
}

#buildingChart, #resolutionChart {
    max-height: 300px !important;
}

/* Ensure chart containers maintain proper layout */
#analytics-section .relative {
    position: relative;
    width: 100%;
}

#analytics-section .h-80 {
    height: 20rem;
}

#analytics-section .h-96 {
    height: 24rem;
}

/* Fix any chart overflow issues */
#analytics-section {
    overflow-x: hidden;
}

#analytics-section .bg-white {
    overflow: hidden;
}

/* Loading Animations */
.loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Notification Styles */
.notification {
    @apply fixed top-4 right-4 bg-white shadow-lg rounded-lg p-4 border-l-4 z-50;
    min-width: 300px;
    animation: slideIn 0.3s ease-out;
}

.notification.success {
    @apply border-green-500;
}

.notification.error {
    @apply border-red-500;
}

.notification.warning {
    @apply border-yellow-500;
}

.notification.info {
    @apply border-blue-500;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Image Analysis Overlay */
.image-analysis-overlay {
    position: relative;
    overflow: hidden;
}

.defect-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #ef4444;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive Grid */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Connection Status */
.connection-status {
    @apply flex items-center;
}

.connection-status.offline .status-indicator {
    @apply bg-red-500;
}

.connection-status.online .status-indicator {
    @apply bg-green-500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nav-btn {
        @apply px-2 py-1 text-xs;
    }
    
    .nav-btn i {
        display: none;
    }
    
    .responsive-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-container {
        height: 250px;
    }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        @apply bg-gray-900 text-white;
    }
    
    .dark-mode .bg-white {
        @apply bg-gray-800;
    }
    
    .dark-mode .text-gray-900 {
        @apply text-white;
    }
    
    .dark-mode .text-gray-600 {
        @apply text-gray-300;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .section:not(.active) {
        display: none !important;
    }
    
    .bg-gradient-to-r {
        background: #1f2937 !important;
        color: white !important;
    }
}

/* Accessibility Improvements */
.focus\:ring-2:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Custom Button Variants */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 transition-all duration-200;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-medium hover:bg-gray-300 focus:ring-2 focus:ring-gray-400 transition-all duration-200;
}

.btn-danger {
    @apply bg-red-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-red-700 focus:ring-2 focus:ring-red-500 transition-all duration-200;
}

.btn-success {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 focus:ring-2 focus:ring-green-500 transition-all duration-200;
}

/* Loading States */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #f3f4f6;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}