/* ============================================================
 CODSHIPX AI CRM R30-R4
 FINAL REFERENCE SIDEBAR
============================================================ */


/* ============================================================
 1. SIDEBAR BODY
============================================================ */

.rail{
    background:
        radial-gradient(
            circle at 30% 0%,
            rgba(30,70,116,.14),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #071b35 0%,
            #061a34 48%,
            #051830 100%
        ) !important;

    border-right:
        1px solid rgba(118,143,174,.10) !important;

    box-shadow:
        12px 0 34px rgba(5,20,43,.07) !important;
}


/* ============================================================
 2. LOGGED OUT WORKSPACE CARD
 Reference sidebar does not show the large CRM workspace card.
 Logged-in real workspace switcher remains untouched.
============================================================ */

.workspace-switcher.cx-r19-auth-workspace{
    display:none !important;
}


/* ============================================================
 3. MAIN NAV
============================================================ */

.rail-nav{
    padding:
        4px 12px 8px !important;

    gap:3px !important;
}

.rail-nav > button{
    min-height:43px !important;

    padding:
        6px 10px !important;

    gap:10px !important;

    color:#c2cede !important;

    border:
        1px solid transparent !important;

    border-radius:12px !important;

    background:
        transparent !important;

    box-shadow:none !important;

    transform:none !important;
}

.rail-nav > button:hover{
    color:#f7faff !important;

    background:
        rgba(255,255,255,.025) !important;

    transform:none !important;
}


/* Main icon shells */

.rail-nav > button .nav-icon{
    width:30px !important;
    height:30px !important;

    min-width:30px !important;
    flex:0 0 30px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:9px !important;

    color:#aebed1 !important;

    background:
        rgba(12,38,70,.78) !important;

    border:
        1px solid rgba(105,141,186,.15) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.rail-nav > button .nav-icon svg{
    width:18px !important;
    height:18px !important;
}


/* Main labels */

.rail-nav > button .nav-label{
    color:#c8d3e2 !important;

    font-size:12.8px !important;
    font-weight:730 !important;

    letter-spacing:-.05px !important;
}


/* ============================================================
 4. COMMERCIAL PARENT — REFERENCE ACTIVE STYLE
============================================================ */

.rail-nav
> button[data-nav="Commercial Intelligence"]{
    min-height:52px !important;

    padding:
        7px 10px !important;

    margin-top:2px !important;

    color:#fff !important;

    border:
        1px solid rgba(164,226,53,.24) !important;

    border-radius:13px !important;

    background:
        linear-gradient(
            135deg,
            rgba(24,51,84,.96),
            rgba(13,36,68,.98)
        ) !important;

    box-shadow:
        inset 3px 0 0 #a3e635,
        inset 0 1px 0 rgba(255,255,255,.045),
        0 7px 18px rgba(1,12,30,.10) !important;
}

.rail-nav
> button[data-nav="Commercial Intelligence"]
.nav-icon{
    width:34px !important;
    height:34px !important;

    min-width:34px !important;
    flex:0 0 34px !important;

    color:#a9e934 !important;

    border:
        1px solid rgba(164,227,52,.29) !important;

    background:
        linear-gradient(
            145deg,
            rgba(37,74,72,.50),
            rgba(16,44,67,.96)
        ) !important;
}

.rail-nav
> button[data-nav="Commercial Intelligence"]
.nav-label{
    color:#fff !important;

    font-size:13.4px !important;
    font-weight:820 !important;
}


/* ============================================================
 5. COMMERCIAL SUBMENU — REFERENCE POSITION
 Not far to the right.
============================================================ */

.rail-nav .cxr29-submenu{
    position:relative !important;

    box-sizing:border-box !important;

    padding:
        5px 8px 7px 28px !important;

    margin:0 !important;
}


/* No vertical timeline / extra decoration */

.rail-nav .cxr29-submenu::before,
.rail-nav .cxr29-submenu::after{
    display:none !important;
}


/* Child rows */

.rail-nav .cxr29-child{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;

    height:46px !important;
    min-height:46px !important;

    margin:4px 0 !important;

    padding:
        5px 10px !important;

    gap:10px !important;

    border-radius:11px !important;

    color:#c9d5e4 !important;

    border:
        1px solid rgba(104,139,181,.12) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.030),
            rgba(255,255,255,.018)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018) !important;

    transform:none !important;
}


/* Child icon */

.rail-nav .cxr29-child::before{
    position:static !important;
    inset:auto !important;

    width:32px !important;
    height:32px !important;

    min-width:32px !important;
    min-height:32px !important;

    flex:0 0 32px !important;

    margin:0 !important;

    display:block !important;

    border-radius:9px !important;

    opacity:1 !important;
    visibility:visible !important;

    background-color:
        rgba(11,40,72,.94) !important;

    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:17px 17px !important;

    border:
        1px solid rgba(104,153,205,.16) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03) !important;

    transform:none !important;
}


/* child text */

.rail-nav .cxr29-child > span:last-child{
    min-height:0 !important;

    color:#cbd6e5 !important;

    font-size:11.6px !important;
    line-height:1.1 !important;

    font-weight:720 !important;

    white-space:nowrap !important;
}


/* hover */

.rail-nav .cxr29-child:hover{
    color:#fff !important;

    border-color:
        rgba(161,218,56,.18) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.040),
            rgba(255,255,255,.023)
        ) !important;

    transform:none !important;
}


/* ============================================================
 6. SELECTED CHILD — AUTOMATION V2 STYLE
============================================================ */

.rail-nav .cxr29-child.active,
.rail-nav .cxr29-child.is-active,
.rail-nav .cxr29-child[aria-current="page"]{
    color:#fff !important;

    border:
        1px solid rgba(163,230,53,.62) !important;

    background:
        linear-gradient(
            135deg,
            rgba(25,52,83,.98),
            rgba(14,35,65,.99)
        ) !important;

    box-shadow:
        inset 2px 0 0 #a3e635,
        inset 0 1px 0 rgba(255,255,255,.045),
        0 5px 14px rgba(1,12,30,.10) !important;
}

.rail-nav .cxr29-child.active::before,
.rail-nav .cxr29-child.is-active::before,
.rail-nav .cxr29-child[aria-current="page"]::before{
    opacity:1 !important;
    visibility:visible !important;

    background-color:
        rgba(28,61,68,.96) !important;

    border-color:
        rgba(173,232,65,.33) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 2px rgba(163,230,53,.025) !important;
}

.rail-nav .cxr29-child.active > span:last-child,
.rail-nav .cxr29-child.is-active > span:last-child,
.rail-nav .cxr29-child[aria-current="page"] > span:last-child{
    color:#fff !important;
    font-weight:810 !important;
}


/* ============================================================
 7. FORCE CHILD ICONS
============================================================ */

.cxr30r3-opportunities::before{
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-5 4 3 7-8'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E") !important;
}

.cxr30r3-support::before{
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 13h3v6H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M20 13h-3v6h2a1 1 0 0 0 1-1z'/%3E%3C/svg%3E") !important;
}

.cxr30r3-automation::before{
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='5' cy='6' r='2'/%3E%3Ccircle cx='19' cy='6' r='2'/%3E%3Ccircle cx='5' cy='18' r='2'/%3E%3Ccircle cx='19' cy='18' r='2'/%3E%3Cpath d='M7 7.4 9.7 10M17 7.4 14.3 10M7 16.6 9.7 14M17 16.6 14.3 14'/%3E%3C/svg%3E") !important;
}

.cxr30r3-analytics-child::before{
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V10'/%3E%3Cpath d='M10 19V5'/%3E%3Cpath d='M15 19v-6'/%3E%3Cpath d='M20 19V8'/%3E%3Cpath d='M3 19h19'/%3E%3C/svg%3E") !important;
}


/* ============================================================
 8. DIVIDER BELOW COMMERCIAL GROUP
============================================================ */

.rail-nav .cxr29-submenu{
    border-bottom:
        1px solid rgba(118,144,178,.13) !important;

    padding-bottom:12px !important;

    margin-bottom:8px !important;
}


/* ============================================================
 9. AI CENTER — NORMAL LIME STYLE, NO CYAN/PURPLE
============================================================ */

.rail-nav
> button[data-nav="AI Center"]{
    min-height:46px !important;

    color:#c7d3e3 !important;

    background:
        transparent !important;

    border:
        1px solid transparent !important;

    box-shadow:none !important;
}

.rail-nav
> button[data-nav="AI Center"]
.nav-icon{
    width:32px !important;
    height:32px !important;

    min-width:32px !important;
    flex:0 0 32px !important;

    border-radius:9px !important;

    color:#a3e635 !important;

    background:
        rgba(11,39,70,.90) !important;

    border:
        1px solid rgba(115,151,195,.15) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* old actual SVG stays hidden; use clean lime AI icon */
.rail-nav
> button[data-nav="AI Center"]
.nav-icon svg{
    display:none !important;
}

.rail-nav
> button[data-nav="AI Center"]
.nav-icon::before{
    content:"" !important;

    width:18px !important;
    height:18px !important;

    display:block !important;

    background:
        center / 18px 18px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='5' cy='7' r='1.5'/%3E%3Ccircle cx='19' cy='7' r='1.5'/%3E%3Ccircle cx='5' cy='17' r='1.5'/%3E%3Ccircle cx='19' cy='17' r='1.5'/%3E%3Cpath d='M7 8.2 9.7 10M17 8.2 14.3 10M7 15.8 9.7 14M17 15.8 14.3 14'/%3E%3C/svg%3E") !important;
}

.rail-nav
> button[data-nav="AI Center"]
.nav-label{
    color:#cbd6e5 !important;

    background:none !important;

    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;

    font-size:12.8px !important;
    font-weight:730 !important;
}

.rail-nav
> button[data-nav="AI Center"]
.nav-badge{
    margin-left:auto !important;

    padding:
        3px 8px !important;

    color:#c8f86d !important;

    background:
        rgba(163,230,53,.10) !important;

    border:
        1px solid rgba(163,230,53,.25) !important;

    border-radius:999px !important;

    font-size:9px !important;
    font-weight:900 !important;

    letter-spacing:.6px !important;
}


/* ============================================================
 10. ANALYTICS MAIN ICON — NORMAL, NOT PURPLE
============================================================ */

.rail-nav
> button[data-nav="Analytics"]
.nav-icon,

.rail-nav
> button.cxr30-analytics
.nav-icon{
    color:#aebed1 !important;

    background:
        rgba(12,38,70,.78) !important;

    border:
        1px solid rgba(105,141,186,.15) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.rail-nav
> button[data-nav="Analytics"]
.nav-label,

.rail-nav
> button.cxr30-analytics
.nav-label{
    color:#c8d3e2 !important;
}


/* ============================================================
 11. ORDERS
============================================================ */

.rail-nav
> button[data-nav="Orders"]{
    min-height:46px !important;
}


/* ============================================================
 12. LOGGED-OUT FOOTER — ONE REFERENCE CARD
============================================================ */

.rail-footer:has(.cx-r19-auth-note){
    margin:
        12px 14px 16px !important;

    padding:
        16px 16px 14px !important;

    display:block !important;

    border-radius:14px !important;

    border:
        1px solid rgba(108,143,185,.17) !important;

    background:
        linear-gradient(
            145deg,
            rgba(20,47,80,.80),
            rgba(11,33,64,.92)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* Secure copy */

.rail-footer
.cx-r19-auth-note{
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;

    gap:7px !important;

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;
}

.rail-footer
.cx-r19-auth-note
span{
    color:#fff !important;

    font-size:11.5px !important;
    font-weight:820 !important;
}

.rail-footer
.cx-r19-auth-note
small{
    color:#9fb0c7 !important;

    font-size:10.4px !important;
    line-height:1.5 !important;
}


/* Login button becomes simple link inside same card */

.rail-footer
.user-chip.cx-r19-auth-user{
    width:auto !important;
    min-height:0 !important;

    margin:
        18px 0 0 !important;

    padding:0 !important;

    display:inline-flex !important;
    align-items:center !important;

    gap:7px !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    color:#a3e635 !important;
}

.rail-footer
.user-chip.cx-r19-auth-user
.cx-r19-login-glyph{
    display:none !important;
}

.rail-footer
.user-chip.cx-r19-auth-user
> span:nth-child(2){
    display:block !important;
}

.rail-footer
.user-chip.cx-r19-auth-user
strong{
    color:#a3e635 !important;

    font-size:10.8px !important;
    font-weight:850 !important;
}

.rail-footer
.user-chip.cx-r19-auth-user
small{
    display:none !important;
}

.rail-footer
.user-chip.cx-r19-auth-user
> b{
    color:#a3e635 !important;

    font-size:11px !important;
}


/* ============================================================
 13. RESPONSIVE
============================================================ */

@media(max-width:960px){

    .rail-nav .cxr29-submenu{
        padding-left:22px !important;
    }
}


/* CODSHIPX_AI_CRM_R30_R4_REFERENCE_SIDEBAR_END */