/* Dark mode styles */
/* When html has class="dark", apply dark theme */

/* Background colors */
.dark .bg-gray-100 { background-color: #1f2937 !important; }
.dark .bg-gray-50 { background-color: #1f2937 !important; }
.dark .bg-white { background-color: #374151 !important; }

/* Text colors */
.dark .text-gray-900 { color: #f9fafb !important; }
.dark .text-gray-800 { color: #f3f4f6 !important; }
.dark .text-gray-700 { color: #e5e7eb !important; }
.dark .text-gray-600 { color: #d1d5db !important; }
.dark .text-gray-500 { color: #9ca3af !important; }

/* Border colors */
.dark .border-gray-200 { border-color: #4b5563 !important; }
.dark .border-gray-300 { border-color: #4b5563 !important; }

/* Input fields */
.dark input, .dark select, .dark textarea {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

.dark input::placeholder, .dark textarea::placeholder {
    color: #9ca3af !important;
}

/* Cards and panels */
.dark .bg-white.rounded-lg,
.dark .bg-white.shadow,
.dark .bg-white.border {
    background-color: #374151 !important;
}

/* Tables */
.dark table { background-color: #374151 !important; }
.dark th { background-color: #4b5563 !important; color: #f3f4f6 !important; }
.dark td { color: #e5e7eb !important; }
.dark tr:hover { background-color: #4b5563 !important; }
.dark .divide-gray-200 > * { border-color: #4b5563 !important; }

/* Sidebar - keep dark */
.dark .bg-gray-800 { background-color: #1f2937 !important; }
.dark .bg-gray-900 { background-color: #111827 !important; }

/* Hover states */
.dark .hover\:bg-gray-50:hover { background-color: #4b5563 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #4b5563 !important; }

/* Focus states */
.dark .focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6 !important; }
.dark .focus\:border-blue-500:focus { border-color: #3b82f6 !important; }

/* Buttons - keep their colors but adjust for dark */
.dark .bg-blue-600 { background-color: #2563eb !important; }
.dark .bg-green-500 { background-color: #22c55e !important; }
.dark .bg-red-500 { background-color: #ef4444 !important; }

/* Status badges */
.dark .bg-green-100 { background-color: #166534 !important; }
.dark .text-green-800 { color: #86efac !important; }
.dark .bg-red-100 { background-color: #991b1b !important; }
.dark .text-red-800 { color: #fca5a5 !important; }
.dark .bg-yellow-100 { background-color: #854d0e !important; }
.dark .text-yellow-800 { color: #fef08a !important; }

/* Main content area */
.dark main.bg-gray-100 { background-color: #111827 !important; }

/* Header */
.dark header.bg-white { background-color: #1f2937 !important; }
.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important; }

/* Dropdown menus */
.dark .bg-white.rounded-md.shadow-lg {
    background-color: #374151 !important;
}

/* Mobile table scrolling */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/* Ensure tables have minimum width for readability */
table.min-w-\[800px\] {
    min-width: 800px;
}

table.min-w-\[700px\] {
    min-width: 700px;
}

table.min-w-\[600px\] {
    min-width: 600px;
}

@media (max-width: 840px) {
    .overflow-x-auto::-webkit-scrollbar {
        height: 6px;
    }
    
    .overflow-x-auto::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .overflow-x-auto::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
}

/* Hide scrollbar for sidebar navigation */
.sidebar-nav {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.sidebar-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Dark mode: Paused badge needs better contrast */
.dark .bg-gray-200.text-gray-600 {
    background-color: #4b5563 !important;
    color: #e5e7eb !important;
}

/* Dark mode: Warning banner (yellow) */
.dark .bg-yellow-50 {
    background-color: rgba(161, 98, 7, 0.3) !important;
}
.dark .border-yellow-200 {
    border-color: #a16207 !important;
}
.dark .text-yellow-800 {
    color: #fef08a !important;
}
.dark .text-yellow-600 {
    color: #facc15 !important;
}

/* Dark mode: Critical banner (red) */
.dark .bg-red-50 {
    background-color: rgba(153, 27, 27, 0.3) !important;
}
.dark .border-red-200 {
    border-color: #991b1b !important;
}
.dark .text-red-600 {
    color: #fca5a5 !important;
}

/* Dark mode: Danger Zone section */
.dark .border-red-200 {
    border-color: #b91c1c !important;
}
.dark .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.4) !important;
}
.dark .text-red-800 {
    color: #fecaca !important;
}
.dark .text-red-600 {
    color: #fca5a5 !important;
}
.dark .bg-red-100 {
    background-color: rgba(153, 27, 27, 0.5) !important;
}
.dark .text-red-700 {
    color: #fca5a5 !important;
}

/* Custom scrollbar for saved reports */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.8);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.5);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.8);
}

/* =====================================================
   Mobile Responsive Styles
   ===================================================== */

/* Force horizontal scroll on all tables in mobile */
@media (max-width: 768px) {
    /* Wrap all tables in scrollable container */
    .table-container,
    .overflow-x-auto,
    div:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    /* Ensure tables don't shrink below readable size */
    table {
        min-width: 600px;
    }

    /* Smaller text in tables on mobile */
    table th,
    table td {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    /* Reduce padding on main content */
    main {
        padding: 1rem !important;
    }

    /* Stack cards on mobile */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Reduce card padding on mobile */
    .rounded-xl.shadow-lg .p-6 {
        padding: 1rem;
    }

    /* Smaller headings on mobile */
    h1.text-2xl {
        font-size: 1.25rem;
    }

    h2.text-xl {
        font-size: 1.125rem;
    }

    /* Hide non-essential columns on very small screens */
    .hide-mobile {
        display: none !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    table {
        min-width: 500px;
    }

    table th,
    table td {
        font-size: 0.7rem;
        padding: 0.4rem 0.5rem;
    }
}

/* Sidebar transition styles */
aside {
    will-change: transform, width;
}

/* Ensure content area adjusts when sidebar is collapsed */
@media (min-width: 768px) {
    .flex-1.min-w-0 {
        transition: margin-left 0.3s ease-in-out;
    }
}

/* Mobile overlay z-index */
.fixed.inset-0.bg-black {
    z-index: 40;
}

/* Sidebar should be above overlay */
aside.fixed {
    z-index: 50;
}

/* Better touch targets on mobile */
@media (max-width: 768px) {
    button,
    a.flex.items-center {
        min-height: 44px;
    }

    /* Larger tap targets for sidebar links when collapsed */
    aside.w-16 a {
        padding: 0.75rem;
    }
}

/* Prevent body scroll when mobile menu is open */
body.sidebar-open {
    overflow: hidden;
}

/* Alert bell animation */
@keyframes ring {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
    20%, 40%, 60%, 80% { transform: rotate(10deg); }
}

.alert-bell-ringing {
    animation: ring 1s ease-in-out infinite;
}

/* Responsive grid for dashboard cards */
@media (max-width: 640px) {
    .grid.gap-6 {
        gap: 1rem;
    }
}

/* Chart responsiveness */
@media (max-width: 768px) {
    canvas {
        max-width: 100%;
        height: auto !important;
    }
}

/* Form input responsiveness */
@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
}