/* ============================================================
 CODSHIPX AI CRM R30-R3-R1
 Exact user-request UI
============================================================ */


/* ============================================================
 1. CHILD NAV — ACTUALLY SMALLER
============================================================ */

.rail-nav .cxr29-submenu{
    padding:
        2px 8px 5px 43px !important;
}

.rail-nav .cxr29-child{
    width:172px !important;
    max-width:calc(100% - 4px) !important;

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

    margin:3px 0 !important;
    padding:4px 8px !important;

    gap:8px !important;

    border-radius:11px !important;

    border:
        1px solid rgba(112,143,183,.14) !important;

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

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

    transform:none !important;
}


/* icon shell */

.rail-nav .cxr29-child::before{
    content:"" !important;

    position:static !important;
    inset:auto !important;

    width:27px !important;
    height:27px !important;

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

    flex:0 0 27px !important;

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

    display:block !important;

    border-radius:8px !important;

    border:
        1px solid rgba(116,156,206,.20) !important;

    background-color:
        #0d294b !important;

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

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

    transform:none !important;

    overflow:hidden !important;

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


/* no old extra dot */

.rail-nav
.cxr29-child
.cxr29-dot{
    display:none !important;
}


/* text */

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

    display:block !important;

    color:#c9d4e3 !important;

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

    font-weight:760 !important;

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


/* hover */

.rail-nav
.cxr29-child:hover{
    border-color:
        rgba(158,218,49,.20) !important;

    background:
        linear-gradient(
            90deg,
            rgba(163,230,53,.04),
            rgba(17,42,74,.60)
        ) !important;

    transform:none !important;
}


/* active */

.rail-nav
.cxr29-child.active,

.rail-nav
.cxr29-child.is-active,

.rail-nav
.cxr29-child[aria-current="page"]{
    border-color:
        rgba(163,230,53,.27) !important;

    background:
        linear-gradient(
            90deg,
            rgba(163,230,53,.085),
            rgba(17,43,76,.75) 38%,
            rgba(9,30,56,.92)
        ) !important;

    box-shadow:
        inset 2px 0 0 #a3e635,
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    transform:none !important;
}


/* ACTIVE ICON MUST NEVER DISAPPEAR */

.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;

    border-color:
        rgba(183,237,78,.36) !important;

    background-color:
        #153a47 !important;

    box-shadow:
        0 0 0 2px rgba(163,230,53,.035),
        inset 0 1px 0 rgba(255,255,255,.06) !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:820 !important;
}


/* ============================================================
 2. REAL ICONS
============================================================ */

/* opportunities */
.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;
}

/* support */
.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%3Cpath d='M17 19c0 1.3-1.5 2-4 2h-1'/%3E%3C/svg%3E") !important;
}

/* automation */
.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;
}

/* analytics v2 */
.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;
}

/* email */
.cxr30r3-email::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%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") !important;
}

/* calendar */
.cxr30r3-calendar::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%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") !important;
}

/* omnichannel */
.cxr30r3-omnichannel::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='2.5'/%3E%3Ccircle cx='5' cy='7' r='2'/%3E%3Ccircle cx='19' cy='7' r='2'/%3E%3Ccircle cx='5' cy='17' r='2'/%3E%3Ccircle cx='19' cy='17' r='2'/%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;
}

/* connections */
.cxr30r3-connections::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='M9 15l-2.5 2.5a3.5 3.5 0 1 1-5-5L5 9a3.5 3.5 0 0 1 5 0'/%3E%3Cpath d='m15 9 2.5-2.5a3.5 3.5 0 1 1 5 5L19 15a3.5 3.5 0 0 1-5 0'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E") !important;
}


/* ============================================================
 3. AI CENTER — NEW ICON + DIFFERENT TEXT COLOR
============================================================ */

.rail-nav
.cxr30-ai-center{
    color:#d8c9ff !important;
}

.rail-nav
.cxr30-ai-center
.nav-icon{
    width:30px !important;
    height:30px !important;

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

    color:#62ddff !important;

    border-radius:9px !important;

    border:
        1px solid rgba(101,217,255,.28) !important;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(100,221,255,.18),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            #103557,
            #162650
        ) !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 5px 14px rgba(28,115,177,.12) !important;
}


/* remove old analytics-bars icon */
.rail-nav
.cxr30-ai-center
.nav-icon svg{
    display:none !important;
}


/* dedicated AI neural icon */
.rail-nav
.cxr30-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='%2362ddff' 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%3Cpath d='M12 3v3M12 18v3'/%3E%3C/svg%3E") !important;
}


/* Analytics stays purple/data */
.rail-nav
.cxr30-analytics{
    color:#cdbfff !important;
}

.rail-nav
.cxr30-analytics
.nav-icon{
    color:#cbb8ff !important;

    background:
        linear-gradient(
            145deg,
            #30275f,
            #191c47
        ) !important;

    border:
        1px solid rgba(202,184,255,.24) !important;
}


/* ============================================================
 4. TOPBAR — COMPLETELY NEW COMMAND DOCK
============================================================ */

.topbar{
    height:78px !important;
    flex-basis:78px !important;

    padding:
        0 22px 0 28px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.985),
            rgba(249,251,254,.975)
        ) !important;

    border-bottom:
        1px solid rgba(203,213,225,.72) !important;

    box-shadow:
        0 5px 20px rgba(13,34,62,.04) !important;
}


/* One dark dock */
.topbar-right{
    padding:5px !important;
    gap:5px !important;

    border-radius:18px !important;

    border:
        1px solid rgba(92,124,161,.27) !important;

    background:
        radial-gradient(
            circle at 93% 0%,
            rgba(151,224,55,.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #07182f,
            #0a213e 58%,
            #091a32
        ) !important;

    box-shadow:
        0 12px 30px rgba(5,20,42,.15),
        inset 0 1px rgba(255,255,255,.055) !important;
}


/* Search integrated */
.topbar-right
.global-search{
    width:390px !important;
    min-width:390px !important;

    height:44px !important;

    padding:
        0 7px 0 11px !important;

    margin:0 !important;

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

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

    box-shadow:
        inset 0 0 0 1px rgba(132,160,192,.11) !important;
}

.topbar-right
.global-search:hover{
    background:
        rgba(255,255,255,.062) !important;
}

.topbar-right
.global-search:focus-within{
    background:
        rgba(255,255,255,.072) !important;

    box-shadow:
        inset 0 0 0 1px rgba(163,230,53,.28),
        0 0 0 3px rgba(163,230,53,.045) !important;
}

.topbar-right
.global-search > svg{
    width:16px !important;
    height:16px !important;

    color:#65dcff !important;
    stroke:#65dcff !important;
}

.topbar-right
.global-search input{
    color:#eef5fc !important;

    font-size:11.8px !important;
    font-weight:650 !important;
}

.topbar-right
.global-search input::placeholder{
    color:#8fa4bd !important;
    opacity:1 !important;
}


/* keyboard capsule */
.topbar-right
.global-search kbd{
    min-width:42px !important;
    height:30px !important;

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

    padding:0 8px !important;

    color:#dcf7a0 !important;

    border:
        1px solid rgba(163,226,59,.22) !important;

    border-radius:9px !important;

    background:
        linear-gradient(
            180deg,
            rgba(163,230,53,.12),
            rgba(163,230,53,.055)
        ) !important;

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

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


/* bell */
.topbar-right
.round-button{
    width:44px !important;
    height:44px !important;

    margin:0 !important;

    border-radius:13px !important;

    color:#c2d1e2 !important;

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

    border:
        1px solid rgba(131,160,191,.14) !important;

    box-shadow:none !important;
}

.topbar-right
.round-button:hover{
    color:#fff !important;

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

    transform:none !important;
}


/* Login + logged-in Ask Codi */
.topbar-right
.cxr30-top-login,

.topbar-right
.cxr30-top-ask-codi,

.topbar-right
.codi-mini{
    min-width:108px !important;
    height:44px !important;

    padding:
        0 15px !important;

    margin:0 !important;

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

    gap:7px !important;

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

    color:#102607 !important;

    background:
        linear-gradient(
            135deg,
            #c3f950,
            #95e51e 56%,
            #72ce0b
        ) !important;

    box-shadow:
        0 7px 18px rgba(110,198,13,.21),
        inset 0 1px rgba(255,255,255,.42) !important;

    font-size:11.5px !important;
    font-weight:880 !important;

    text-decoration:none !important;
}

.topbar-right
.cxr30-top-login:hover,

.topbar-right
.cxr30-top-ask-codi:hover,

.topbar-right
.codi-mini:hover{
    transform:translateY(-1px) !important;

    filter:brightness(1.025) !important;

    box-shadow:
        0 9px 22px rgba(110,198,13,.27),
        inset 0 1px rgba(255,255,255,.45) !important;
}


/* ============================================================
 5. RESPONSIVE
============================================================ */

@media(max-width:1200px){

    .topbar-right
    .global-search{
        width:300px !important;
        min-width:300px !important;
    }
}

@media(max-width:960px){

    .topbar-right
    .global-search{
        width:235px !important;
        min-width:235px !important;
    }

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

@media(max-width:760px){

    .topbar-right
    .global-search{
        display:none !important;
    }

    .rail-nav
    .cxr29-child{
        width:166px !important;
    }
}


/* CODSHIPX_AI_CRM_R30_R3_R1_EXACT_UI_END */