/* Version Badge Styling */
.version-badge-link,
.version-badge-link:hover,
.version-badge-link:focus,
.version-badge-link:active,
.version-badge-link:visited {
    display: inline-block;
    text-decoration: none !important;
    background-image: none !important;
    border-bottom: none !important;
    color: inherit;
    transition: opacity 0.15s ease-in-out;
}

.version-badge-link:hover {
    opacity: 0.85;
}

.version-badge-container {
    display: inline-block;
        margin: 0 0 1rem 0;
    padding: 0;
}

.version-badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    color: #ffffff;
    border-radius: 1.25rem;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: none;
}

.version-badge-label {
    font-weight: 400;
    opacity: 1;
}

.version-badge-version {
    background: rgba(255, 255, 255, 0.12);
    padding: 0.125rem 0.5rem;
    border-radius: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
    border: none;
}


.dark .version-badge {
    background: #55B685;
        color: #000000;
        border: 2px solid rgba(85, 182, 133, 0.3);
        box-shadow: none;
    }

    .dark .version-badge-version {
        background: rgba(0, 0, 0, 0.1);
        color: #000000;
        border: none;
}

/* Cloud marker: subscription-gated sections and pages (Prowler Cloud / Prowler Private Cloud).
   Rendered as a trailing ::after glyph so sidebar labels stay left-aligned.
   Nested groups render as li[data-title] with a button toggle; top-level groups
   render as h3 headings. Every ungated group that shares a name with a gated one
   (Providers, Prowler Cloud, Prowler Lighthouse AI) is top-level,
   so plain li[data-title] selectors match only the gated nested groups, folded
   or unfolded. The Security tab group is top-level (h3) and always expanded,
   so it is selected through its sibling list content with :has().
   Pages are selected by their li id, which equals the page URL. The strict
   > div > div > span:first-child path targets the title span only, never the
   nested spans of a tag pill such as Coming Soon.
   Icon source: /images/icons/cloud-bold.svg. See AGENTS.md "Cloud Marker" convention. */
li[data-title="Prowler Cloud"] > button span:first-child::after,
li[data-title="Prowler Lighthouse AI"] > button span:first-child::after,
li[data-title="Providers"] > button span:first-child::after,
li[data-title="Scans"] > button span:first-child::after,
li[data-title="Prowler MCP"] > button span:first-child::after,
div:has(+ ul a[href="/security/encryption"]) h3 span::after,
li[id="/user-guide/compliance/tutorials/cross-provider-compliance"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-alerts"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-app-findings-triage"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-app-scan-configuration"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-cloud-aws-organizations"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-cloud-azure-management-groups"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-cloud-gcp-organizations"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-cloud-lighthouse-multi-llm"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-import-findings"] a > div > div > span:first-child::after,
li[id="/user-guide/tutorials/prowler-scan-scheduling"] a > div > div > span:first-child::after {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-left: 0.375rem;
    vertical-align: -0.125rem;
    background: url("/images/icons/cloud-bold.svg") no-repeat center / contain;
}
/* Wider sidebar: +2rem over the theme default (18rem) so gated labels with the
   cloud marker fit on one line. The content column offsets are coupled to the
   sidebar width and must shift by the same amount, hence the two companion
   overrides selected by their Tailwind arbitrary-value class substrings. */
@media (min-width: 1024px) {
    #sidebar {
        width: 20rem !important;
    }

    div[class*="pl-[23.7rem]"] {
        padding-left: 25.7rem !important;
    }
}

@media (min-width: 1280px) {
    div[class*="(100%-28rem)"] {
        width: calc(100% - 30rem) !important;
    }
}
