/**
 * Dark mode styles for the developer portal
 * Applied when .dark class is on the html element
 */

/* Base dark mode backgrounds */
.dark body,
.dark .bg-gray-50 {
    background-color: #111827 !important;
}
.dark .bg-white {
    background-color: #1f2937 !important;
}
.dark .bg-gray-100 {
    background-color: #374151 !important;
}
.dark .bg-gray-200 {
    background-color: #4b5563 !important;
}

/* Dark mode 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;
}
.dark .text-gray-400 {
    color: #6b7280 !important;
}

/* Dark mode borders */
.dark .border-gray-200 {
    border-color: #374151 !important;
}
.dark .border-gray-300 {
    border-color: #4b5563 !important;
}
.dark .border-gray-100 {
    border-color: #374151 !important;
}
.dark .divide-gray-200 > :not(:last-child) {
    border-color: #374151 !important;
}
.dark .divide-gray-100 > :not(:last-child) {
    border-color: #374151 !important;
}

/* Dark mode shadows */
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
    --tw-shadow-color: rgba(0, 0, 0, 0.5);
}

/* Navigation and footer */
.dark nav {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}
.dark footer {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Status colors in dark mode */
.dark .bg-green-50 {
    background-color: rgba(6, 78, 59, 0.3) !important;
}
.dark .bg-green-100 {
    background-color: rgba(6, 78, 59, 0.4) !important;
}
.dark .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.3) !important;
}
.dark .bg-red-100 {
    background-color: rgba(127, 29, 29, 0.4) !important;
}
.dark .bg-yellow-50 {
    background-color: rgba(113, 63, 18, 0.3) !important;
}
.dark .bg-yellow-100 {
    background-color: rgba(113, 63, 18, 0.4) !important;
}
.dark .bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.3) !important;
}
.dark .bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.4) !important;
}
.dark .bg-orange-50 {
    background-color: rgba(124, 45, 18, 0.3) !important;
}
.dark .bg-orange-100 {
    background-color: rgba(124, 45, 18, 0.4) !important;
}
.dark .bg-amber-50 {
    background-color: rgba(120, 53, 15, 0.3) !important;
}

/* Status text colors */
.dark .text-green-800 {
    color: #86efac !important;
}
.dark .text-green-700 {
    color: #4ade80 !important;
}
.dark .text-green-600 {
    color: #22c55e !important;
}
.dark .text-red-800 {
    color: #fca5a5 !important;
}
.dark .text-red-700 {
    color: #f87171 !important;
}
.dark .text-red-600 {
    color: #ef4444 !important;
}
.dark .text-yellow-800 {
    color: #fcd34d !important;
}
.dark .text-yellow-700 {
    color: #facc15 !important;
}
.dark .text-blue-800 {
    color: #93c5fd !important;
}
.dark .text-blue-700 {
    color: #60a5fa !important;
}
.dark .text-amber-800 {
    color: #fbbf24 !important;
}
.dark .text-amber-700 {
    color: #f59e0b !important;
}
.dark .text-orange-900 {
    color: #fed7aa !important;
}
.dark .text-orange-700 {
    color: #fb923c !important;
}
.dark .text-orange-600 {
    color: #f97316 !important;
}

/* Status borders */
.dark .border-green-200 {
    border-color: #065f46 !important;
}
.dark .border-green-400 {
    border-color: #22c55e !important;
}
.dark .border-green-800 {
    border-color: #166534 !important;
}
.dark .border-red-200 {
    border-color: #991b1b !important;
}
.dark .border-red-300 {
    border-color: #b91c1c !important;
}
.dark .border-red-400 {
    border-color: #ef4444 !important;
}
.dark .border-yellow-200 {
    border-color: #92400e !important;
}
.dark .border-yellow-400 {
    border-color: #facc15 !important;
}
.dark .border-blue-200 {
    border-color: #1e40af !important;
}
.dark .border-blue-400 {
    border-color: #60a5fa !important;
}
.dark .border-amber-200 {
    border-color: #92400e !important;
}
.dark .border-orange-500 {
    border-color: #f97316 !important;
}

/* Forms */
.dark input:not([type="submit"]):not([type="button"]):not([type="reset"]),
.dark select,
.dark textarea {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

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

/* Tables */
.dark th,
.dark table th,
.dark thead th,
.dark table thead th {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}
.dark td,
.dark table td,
.dark tbody td,
.dark table tbody td {
    border-color: #374151 !important;
    color: #d1d5db !important;
}
.dark tbody tr:hover {
    background-color: #374151 !important;
}

/* Code blocks */
.dark code {
    background-color: #374151 !important;
}
.dark pre {
    background-color: #1f2937 !important;
}

/* Prism code blocks in dark mode */
.dark pre[class*="language-"],
.dark code[class*="language-"] {
    background-color: #1e1e2e !important;
}
.dark pre[class*="language-"] {
    border-color: #374151 !important;
}

/* Buttons with gray backgrounds in dark mode */
.dark .bg-gray-600 {
    background-color: #4b5563 !important;
}
.dark .bg-gray-700 {
    background-color: #374151 !important;
}
.dark .hover\:bg-gray-600:hover {
    background-color: #6b7280 !important;
}
.dark .hover\:bg-gray-700:hover {
    background-color: #4b5563 !important;
}

/* Orange buttons - keep them visible */
.dark .bg-orange-600 {
    background-color: #ea580c !important;
}
.dark .hover\:bg-orange-700:hover {
    background-color: #c2410c !important;
}

/* Red buttons */
.dark .bg-red-600 {
    background-color: #dc2626 !important;
}
.dark .hover\:bg-red-700:hover {
    background-color: #b91c1c !important;
}

/* Dropdown menus and modals */
.dark .ring-black {
    --tw-ring-color: #4b5563 !important;
}
.dark .ring-1 {
    --tw-ring-color: #4b5563 !important;
}

/* Links */
.dark a.text-orange-600,
.dark .text-orange-600 {
    color: #fb923c !important;
}
.dark a:hover.hover\:text-orange-500,
.dark .hover\:text-orange-500:hover {
    color: #fdba74 !important;
}

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

/* Focus rings */
.dark .focus\:ring-offset-2:focus {
    --tw-ring-offset-color: #1f2937 !important;
}