/* ---------------------------------------------------------------------------
   Sidebar competition logos
   ---------------------------------------------------------------------------
   A small crest sits before each top-level league and cup name in the left
   navigation. The image is the competition's current sponsor logo, already
   returned by dbo.GetLeagues as vwLeagueSeasons.LogoURL, so this is presentation
   only - no new data is fetched.

   Only LEVEL 1 entries carry a logo. Provinces and streams sit under a parent
   that already shows it, and repeating one badge down a whole sub-menu is noise.

   Sizing is fixed in both axes and the box reserves its space before the image
   loads, so a slow or missing logo cannot reflow the menu. Logos are remote S3
   PNGs of assorted aspect ratios - object-fit keeps them whole rather than
   stretched.
--------------------------------------------------------------------------- */

#sidebar-menu .dz-league-logo {
    width: 20px;
    height: 20px;
    min-width: 20px;          /* stops flex from crushing it on narrow screens */
    margin-right: 10px;
    object-fit: contain;
    object-position: center;
    vertical-align: middle;
    border-radius: 3px;
    /* Most of these badges are dark-on-transparent; a light chip keeps them
       legible against the dark sidebar without touching the source images. */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1px;
    flex-shrink: 0;
}

/* The anchors are laid out as flex rows so the crest and the label stay on one
   line and long competition names wrap under themselves, not under the badge. */
#sidebar-menu ul li a.dz-has-logo {
    display: flex;
    align-items: center;
}

#sidebar-menu ul li a.dz-has-logo > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* The theme draws the dropdown caret with an ::after on .has-arrow; flex would
   otherwise let it collapse. */
#sidebar-menu ul li a.dz-has-logo.has-arrow::after {
    flex: 0 0 auto;
    margin-left: 8px;
}

/* An unreachable logo is hidden by the onerror handler rather than left as a
   broken-image glyph. Keep the rule so the class is self-documenting. */
#sidebar-menu .dz-league-logo[hidden] {
    display: none !important;
}

/* Collapsed (icon-only) sidebar: the menu shows just the top-level entries, so
   the crest becomes the icon and the label is hidden by the theme. */
@media (min-width: 992px) {
    body[data-sidebar-size="sm"] #sidebar-menu .dz-league-logo {
        margin-right: 0;
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    body[data-sidebar-size="sm"] #sidebar-menu ul li a.dz-has-logo {
        justify-content: center;
    }

    body[data-sidebar-size="sm"] #sidebar-menu ul li:hover > a.dz-has-logo {
        justify-content: flex-start;
    }

    body[data-sidebar-size="sm"] #sidebar-menu ul li:hover > a.dz-has-logo .dz-league-logo {
        margin-right: 10px;
    }
}

/* Phones: the sidebar is a full overlay, so there is room for the badge, but
   trim the gap a little to protect the label on narrow devices. */
@media (max-width: 480px) {
    #sidebar-menu .dz-league-logo {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-right: 8px;
    }
}