/* =========================================================
   DiveMeetManager
   DMM ICON SYSTEM
   Clean version for normalized transparent SVG assets
   ========================================================= */


/* =========================================================
   1. BASE ICON
   ========================================================= */

.icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-origin: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    overflow: visible;
}


/* =========================================================
   2. ICON SIZE CLASSES
   ========================================================= */

.icon-sm {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.icon-md {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
}

.icon-lg {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
}

.icon-xl {
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
}


/* =========================================================
   3. DASHBOARD ICON CONTAINER
   ========================================================= */

.dashboard-card-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 80px;
    margin: 0 0 20px 0;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
}

    .dashboard-card-icon .icon {
        display: block;
        width: 80px;
        height: 80px;
        flex: 0 0 80px;
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        box-sizing: border-box;
        overflow: visible;
    }


/* =========================================================
   4. ICON FILE DEFINITIONS
   ========================================================= */

.icon-diver {
    background-image: url("../icons/synchronized_divers_icon_exact.svg");
}

.icon-teams {
    background-image: url("../icons/dmm-teams-icon-exact.svg");
}

.icon-meets {
    background-image: url("../icons/meets_header_exact.svg");
}

.icon-scoring {
    background-image: url("../icons/dive_score_badge.svg");
}

.icon-judge {
    background-image: url("../icons/diving_score_judge_exact.svg");
}

.icon-reports {
    background-image: url("../icons/reports_icon_exact.svg");
}

.icon-management {
    background-image: url("../icons/meet_management_icon.svg");
}

.icon-users {
    background-image: url("../icons/users.svg");
}

.icon-schedule {
    background-image: url("../icons/diving_calendar_exact.svg");
}

/* =========================================================
   5. ACCOUNT / PROFILE ICON
   ========================================================= */

/*
 * The profile SVGs are transparent.
 * The dashboard supplies the blue rounded-square treatment.
 * The profile artwork itself is never altered.
 */

.dashboard-card-icon .icon-account {
    background-color: transparent;
    border-radius: 0;
}


/* =========================================================
   6. NAVIGATION ICONS
   ========================================================= */

.site-navigation .icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    box-sizing: border-box;
    vertical-align: middle;
}


/*
 * IMPORTANT:
 * No individual navigation icon gets a different size.
 *
 * Because the SVG assets have now been normalized to the same
 * visible artwork footprint, one rule controls all of them.
 */

.site-navigation .icon-management,
.site-navigation .icon-teams,
.site-navigation .icon-diver,
.site-navigation .icon-meets,
.site-navigation .icon-scoring,
.site-navigation .icon-judge,
.site-navigation .icon-reports,
.site-navigation .icon-users,
.site-navigation .icon-account {
    background-size: 100% 100%;
}


/* =========================================================
   7. ADMINISTRATOR IMAGE ICONS
   ========================================================= */

/*
 * Some administrator pages use <img> rather than a background
 * image. All normalized SVGs therefore receive one common size.
 */

.admin-icon img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
}


/* =========================================================
   8. SITE LOGO ICON
   ========================================================= */

.site-logo .icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* =========================================================
   9. LOGIN ICON
   ========================================================= */

.login-logo .icon {
    display: inline-block;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* =========================================================
   10. EMPTY STATE ICON
   ========================================================= */

.empty-state-icon .icon {
    display: block;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


    /* =========================================================
   11. IMG FALLBACK SUPPORT
   ========================================================= */

    .icon img,
    .dashboard-card-icon img,
    .site-navigation .icon img,
    .site-logo .icon img,
    .login-logo .icon img,
    .empty-state-icon .icon img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        object-fit: contain;
        object-position: center center;
    }


/* =========================================================
   12. DASHBOARD CARD ALIGNMENT
   ========================================================= */

.dashboard-card {
    position: relative;
}

.dashboard-card-icon {
    align-self: flex-start;
}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .icon {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    .icon-sm {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .icon-md {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    .icon-lg {
        width: 80px;
        height: 80px;
        flex: 0 0 80px;
    }

    .icon-xl {
        width: 100px;
        height: 100px;
        flex: 0 0 100px;
    }

    .dashboard-card-icon {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
        margin-bottom: 16px;
    }

        .dashboard-card-icon .icon {
            width: 64px;
            height: 64px;
            flex: 0 0 64px;
            background-size: 100% 100%;
        }

        .dashboard-card-icon .icon-account {
            border-radius: 13px;
        }

    .site-navigation .icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        flex: 0 0 38px;
        background-size: 100% 100%;
    }

    .site-logo .icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .login-logo .icon {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
    }

    .empty-state-icon .icon {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
    }
}


/* =========================================================
   14. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 400px) {

    .dashboard-card-icon {
        width: 60px;
        height: 60px;
        flex: 0 0 60px;
    }

        .dashboard-card-icon .icon {
            width: 60px;
            height: 60px;
            flex: 0 0 60px;
        }

        .dashboard-card-icon .icon-account {
            border-radius: 12px;
        }
}


/* =========================================================
   15. ACCESSIBILITY
   ========================================================= */

.icon[role="img"] {
    outline: none;
}


/* =========================================================
   16. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .icon {
        transition: none;
    }
}


/* =========================================================
   17. ACCOUNT ARTWORK FILES
   ========================================================= */

.icon-account-male {
    background-image: url("../icons/profile_male_exact.svg");
}

.icon-account-female {
    background-image: url("../icons/profile_female_exact.svg");
}

.icon-account-nongender {
    background-image: url("../icons/profile_gender_neutral_exact.svg");
}


/* =========================================================
   18. HEADER ICON PRESENTATION
   ---------------------------------------------------------
   Header SVGs remain transparent and fit inside the nav boxes.
   ========================================================= */

.site-header .site-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.site-header .site-logo-management-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.site-header .site-navigation > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

    .site-header .site-navigation > a .icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        flex: 0 0 34px !important;
        margin: 0 !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        border-radius: 0 !important;
    }

    .site-header .site-navigation > a:first-child,
    .site-header .site-navigation > a:last-child {
        min-height: 50px !important;
    }


/* =========================================================
   19. DASHBOARD PANEL ICON PRESENTATION
   ---------------------------------------------------------
   The blue rounded square belongs to the panel container,
   not to the SVG artwork.
   ========================================================= */

.dashboard-card-icon,
.admin-dashboard .admin-icon {
    background: #2196d2 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

    .dashboard-card-icon .icon,
    .admin-dashboard .admin-icon .icon {
        background-color: transparent !important;
        border-radius: 0 !important;
        background-size: contain !important;
    }


/* =========================================================
   20. AUTHENTICATED HEADER ICON FIXES
   ---------------------------------------------------------
   Meets uses a transparent header-only asset.
   The dashboard continues using the blue-square Meets asset.
   ========================================================= */

.site-header .site-navigation .dmm-icon-meets {
    background-image: url("../icons/meets_header_exact.svg") !important;
    background-color: transparent !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
}

/* =========================================================
   20. AUTHENTICATED HEADER ICONS
   ========================================================= */

.site-header .site-navigation .icon-logout {
    background-image: url("../icons/logout_icon_exact.svg") !important;
    background-color: transparent !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 0 !important;
}