/* Badge styles for documentation */
.badge-new {
    display: inline-block !important;
    background-color: #28a745 !important;
    color: white !important;
    font-size: 0.65em !important;
    font-weight: bold !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Badge in sidebar navigation - ALWAYS visible regardless of parent state */
.toctree-l1 a .badge-new,
.toctree-l1.current-page a .badge-new,
.toctree-l1:not(.current-page) a .badge-new,
li.toctree-l1 a .badge-new,
li.toctree-l1.current-page a .badge-new,
li.toctree-l1:not(.current-page) a .badge-new,
.sidebar-tree .toctree-l1 a .badge-new,
.sidebar-tree .toctree-l1.current-page a .badge-new,
.sidebar-tree .toctree-l1:not(.current-page) a .badge-new,
.reference.internal .badge-new {
    font-size: 0.6em !important;
    padding: 2px 6px !important;
    margin-left: 6px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #28a745 !important;
    color: white !important;
    position: relative !important;
    z-index: 10 !important;
}

/* CRITICAL: Force badge visibility even when parent link has reduced opacity/visibility */
/* This overrides any theme styles that might dim inactive links */
.toctree-l1:not(.current-page) a .badge-new,
.toctree-l1 a:not(.current) .badge-new,
li.toctree-l1:not(.current-page) a .badge-new {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    background-color: #28a745 !important;
    color: white !important;
    /* Break inheritance from parent's opacity */
    position: relative !important;
    z-index: 100 !important;
}

/* Override any inherited styles from parent link */
.toctree-l1 a .badge-new {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    /* Prevent inheritance of parent's opacity */
    filter: none !important;
}

/* Ensure badge is always visible in all states */
a.reference.internal .badge-new,
a.reference.internal:not(.current) .badge-new {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Ensure badge is visible on all link states in header */
h1 .badge-new,
h1 a .badge-new {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Add badge via CSS ONLY for "NodeRED + Rocket Home" link by href */
/* Only apply to links that contain "nodered.html" in href */
.toctree-l1 a[href*="nodered.html"]:after,
.toctree-l1 a[href="/docs/nodered.html"]:after,
li.toctree-l1 a[href*="nodered.html"]:after {
    content: "NEW" !important;
    display: inline-block !important;
    background-color: #28a745 !important;
    color: white !important;
    font-size: 0.6em !important;
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 100 !important;
    white-space: nowrap !important;
}

/* Ensure badge is visible even when parent link has reduced opacity */
.toctree-l1:not(.current-page) a[href*="nodered.html"]:after,
li.toctree-l1:not(.current-page) a[href*="nodered.html"]:after,
.toctree-l1.current-page a[href*="nodered.html"]:after,
li.toctree-l1.current-page a[href*="nodered.html"]:after {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    background-color: #28a745 !important;
    color: white !important;
}