/*
 * ThreeSixOh! Sidebar Vector Icons
 *
 * Icon-only enhancement.
 * Does not alter sidebar row width, padding, spacing, active states,
 * typography, or alignment.
 *
 * SVG masks avoid platform-dependent Unicode/font glyph rendering.
 */

/* ---------------------------------------------------------
   COMMON VECTOR ICON GEOMETRY
   --------------------------------------------------------- */

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-automation
> .nav-group-toggle::before,

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-ripple
> .nav-group-toggle::before,

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-messages::before,

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-report-issue::before,

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-warner-tools::before {
    content: "" !important;

    display: inline-block !important;

    /* Preserve the 22px icon column established by alignment fix */
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #67d8d3 !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: 18px 18px !important;
    mask-size: 18px 18px !important;

    font-size: 0 !important;
    line-height: 0 !important;
}

/* Existing embedded Automation/Ripple character icons stay hidden. */

body.tso-shell-enabled
.tso-sidebar-nav
.nav-automation-direct
> span[aria-hidden="true"] {
    display: none !important;
}

body.tso-shell-enabled
.tso-sidebar-nav
.nav-ripple-direct
> .nav-ripple-icon {
    display: none !important;
}

/* ---------------------------------------------------------
   AUTOMATION ? GEAR
   --------------------------------------------------------- */

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-automation
> .nav-group-toggle::before {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94a7.9 7.9 0 0 0 .05-.94 7.9 7.9 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.3 7.3 0 0 0-1.62-.94L14.39 2.8a.5.5 0 0 0-.49-.4h-3.8a.5.5 0 0 0-.49.4l-.36 2.52c-.58.24-1.12.55-1.62.94L5.24 5.3a.5.5 0 0 0-.61.22L2.71 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.9 7.9 0 0 0-.05.94c0 .32.02.63.05.94l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .61.22l2.39-.96c.5.39 1.04.7 1.62.94l.36 2.52a.5.5 0 0 0 .49.4h3.8a.5.5 0 0 0 .49-.4l.36-2.52c.58-.24 1.12-.55 1.62-.94l2.39.96a.5.5 0 0 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94a7.9 7.9 0 0 0 .05-.94 7.9 7.9 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.3 7.3 0 0 0-1.62-.94L14.39 2.8a.5.5 0 0 0-.49-.4h-3.8a.5.5 0 0 0-.49.4l-.36 2.52c-.58.24-1.12.55-1.62.94L5.24 5.3a.5.5 0 0 0-.61.22L2.71 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.9 7.9 0 0 0-.05.94c0 .32.02.63.05.94l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .61.22l2.39-.96c.5.39 1.04.7 1.62.94l.36 2.52a.5.5 0 0 0 .49.4h3.8a.5.5 0 0 0 .49-.4l.36-2.52c.58-.24 1.12-.55 1.62-.94l2.39.96a.5.5 0 0 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------
   RIPPLE ? CONCENTRIC WAVES
   --------------------------------------------------------- */

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-ripple
> .nav-group-toggle::before {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E") !important;

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------
   MESSAGES ? ENVELOPE
   --------------------------------------------------------- */

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-messages::before {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.5l9 5.6 9-5.6V7H3Zm18 10V9.85l-8.47 5.27a1 1 0 0 1-1.06 0L3 9.85V17h18Z'/%3E%3C/svg%3E") !important;

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.5l9 5.6 9-5.6V7H3Zm18 10V9.85l-8.47 5.27a1 1 0 0 1-1.06 0L3 9.85V17h18Z'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------
   REPORT ISSUE ? ALERT CIRCLE
   --------------------------------------------------------- */

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-report-issue::before {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-13h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E") !important;

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-13h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------
   WARNER TOOLS ? WRENCH
   --------------------------------------------------------- */

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-warner-tools::before {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22.2 5.7a6.1 6.1 0 0 1-7.6 7.6L7.1 20.8a2.8 2.8 0 1 1-4-4l7.5-7.5a6.1 6.1 0 0 1 7.6-7.6l-3.6 3.6.7 3.4 3.4.7 3.5-3.7ZM5.1 17.5a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E") !important;

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22.2 5.7a6.1 6.1 0 0 1-7.6 7.6L7.1 20.8a2.8 2.8 0 1 1-4-4l7.5-7.5a6.1 6.1 0 0 1 7.6-7.6l-3.6 3.6.7 3.4 3.4.7 3.4.7 3.5-3.7ZM5.1 17.5a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E") !important;
}

/*
 * Fix malformed mask fallback above with the canonical Warner Tools shape.
 * This later declaration intentionally wins.
 */
body.tso-shell-enabled
.tso-sidebar-nav
> .nav-warner-tools::before {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22.2 5.7a6.1 6.1 0 0 1-7.6 7.6L7.1 20.8a2.8 2.8 0 1 1-4-4l7.5-7.5a6.1 6.1 0 0 1 7.6-7.6l-3.6 3.6.7 3.4 3.4.7 3.5-3.7ZM5.1 17.5a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E") !important;

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22.2 5.7a6.1 6.1 0 0 1-7.6 7.6L7.1 20.8a2.8 2.8 0 1 1-4-4l7.5-7.5a6.1 6.1 0 0 1 7.6-7.6l-3.6 3.6.7 3.4 3.4.7 3.5-3.7ZM5.1 17.5a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E") !important;
}

/* Slight emphasis when active; geometry remains unchanged. */

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-automation.active
> .nav-group-toggle::before,

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-ripple.active
> .nav-group-toggle::before,

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-messages.active::before,

body.tso-shell-enabled
.tso-sidebar-nav
> .nav-report-issue.active::before {
    background-color: #8ef0eb !important;
}
