/* Base styling for the tab navigation */
.tab-nav {
    display: flex;
    border-bottom: 2px solid #e5e7eb; /* gray-200 */
    margin-bottom: -2px; /* Pulls content block up to align */
    z-index: 10;
    position: relative;
}

.tab-link {
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #6b7280; /* gray-500 */
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -2px; /* Aligns with the parent border */
    transition: all 0.2s ease-in-out;
}

.tab-link:hover {
    color: #1f2937; /* gray-800 */
}

/* Active tab styling */
.tab-link.active {
    color: #007BFF; /* Yubico-like blue */
    border-bottom-color: #007BFF;
}

/* Styling for the code content blocks (listingblock) */
.code-tabs .listingblock {
    display: none; /* Hide all code blocks by default */
    border-top: 2px solid #e5e7eb; /* gray-200 */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* Remove margin-top if the 'listingblock' class has one */
    margin-top: 0 !important;
}

/* Show the active code block */
.code-tabs .listingblock.active {
    display: block;
}

/* Ensure the <pre> tag inside doesn't have weird margins */
.code-tabs .listingblock pre {
    margin-top: 0 !important;
    /* The title is now removed by JS, so we don't need top-radius overrides */
}