/* Custom styles that can't be easily done with Tailwind */
.status-badge {
    @apply px-2 py-1 rounded text-xs font-medium;
}

.status-2xx {
    @apply bg-green-100 text-green-800;
}

.status-4xx {
    @apply bg-yellow-100 text-yellow-800;
}

.status-5xx {
    @apply bg-red-100 text-red-800;
}
.method-get {
    @apply bg-blue-100 text-blue-800;
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#modalEndpoint {
    @apply text-sm bg-gray-100 p-1 rounded font-mono;
}

.dark .status-badge {
    @apply bg-opacity-20;
}
.method-post {
    @apply bg-purple-100 text-purple-800;
}

.method-put {
    @apply bg-yellow-100 text-yellow-800;
}

.method-delete {
    @apply bg-red-100 text-red-800;
}

.method-patch {
    @apply bg-green-100 text-green-800;
}

/* Smooth scroll for modal */
.modal-content {
    scroll-behavior: smooth;
}
#errorModal .bg-white {
    max-height: 90vh;
    overflow-y: auto;
}

/* Custom scrollbar for modal */
.modal-content::-webkit-scrollbar {
width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}