/*
==============================================================
 CODSHIPX AI CRM R30-R1
 PREMIUM NAV + TOPBAR VISUAL POLISH
 CSS ONLY / NO DOM SCAN / NO MUTATION OBSERVER
==============================================================
*/

/* -----------------------------------------------------------
   SIDEBAR — premium spacing
----------------------------------------------------------- */

.rail-nav{
    gap:5px !important;
}

.rail-nav button{
    border-radius:14px !important;
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.rail-nav button:not(.active):hover{
    color:#f7fbff !important;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        ) !important;
}


/* -----------------------------------------------------------
   COMMERCIAL / COMMUNICATIONS / AI CENTER CHILD MENU
----------------------------------------------------------- */

.rail-nav .cxr29-submenu{
    padding-top:3px !important;
    padding-bottom:6px !important;
}

.rail-nav .cxr29-child{
    width:100% !important;
    min-height:56px !important;
    height:auto !important;

    margin:5px 0 !important;
    padding:9px 12px !important;

    display:flex !important;
    align-items:center !important;
    gap:12px !important;

    position:relative !important;

    border:
        1px solid rgba(117,145,183,.14) !important;

    border-radius:16px !important;

    color:#b9c7da !important;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 4px 12px rgba(1,10,28,.055) !important;

    text-decoration:none !important;

    transition:
        transform .18s ease,
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}


/* Child icon capsule */

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

    transform:none !important;

    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;

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

    border:
        1px solid rgba(115,153,203,.22) !important;

    border-radius:12px !important;

    color:#9bdc2b !important;

    background:
        linear-gradient(
            145deg,
            rgba(23,53,91,.98),
            rgba(9,32,62,.98)
        ) !important;

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

    font-size:16px !important;
    line-height:1 !important;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}


/* Clean old tiny indicator from current R29 children */

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


/* Child label */

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

    color:#c3cede !important;

    font-size:13px !important;
    font-weight:760 !important;
    letter-spacing:-.08px !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* Hover — subtle, not bright green */

.rail-nav .cxr29-child:hover{
    transform:translateX(2px) !important;

    color:#fff !important;

    border-color:
        rgba(155,216,36,.23) !important;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(155,216,36,.065),
            transparent 46%
        ),
        linear-gradient(
            135deg,
            rgba(20,47,82,.96),
            rgba(10,31,59,.98)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 9px 22px rgba(1,10,28,.16) !important;
}

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

    border-color:
        rgba(163,230,53,.32) !important;

    transform:translateY(-1px) !important;
}

.rail-nav .cxr29-child:hover > span:last-child{
    color:#f6f9fd !important;
}


/* -----------------------------------------------------------
   SELECTED CHILD
   Dark premium state instead of solid bright green
----------------------------------------------------------- */

.rail-nav .cxr29-child.active,
.rail-nav .cxr29-child.is-active,
.rail-nav .cxr29-child[aria-current="page"]{
    transform:translateX(1px) !important;

    color:#fff !important;

    border-color:
        rgba(163,230,53,.34) !important;

    background:
        radial-gradient(
            circle at 92% 18%,
            rgba(163,230,53,.11),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #112a4d 0%,
            #0b203d 54%,
            #091b34 100%
        ) !important;

    box-shadow:
        inset 4px 0 0 #a3e635,
        inset 0 1px 0 rgba(255,255,255,.065),
        0 11px 26px rgba(0,10,27,.23),
        0 0 0 1px rgba(163,230,53,.025) !important;
}

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

    border-color:
        rgba(180,237,75,.39) !important;

    background:
        radial-gradient(
            circle at 28% 18%,
            rgba(202,248,113,.18),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(80,123,46,.25),
            rgba(18,48,69,.96)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.085),
        0 0 0 4px rgba(163,230,53,.035),
        0 8px 20px rgba(0,10,27,.19) !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:#f9fbff !important;
    font-weight:840 !important;
    text-shadow:
        0 1px 12px rgba(255,255,255,.055) !important;
}


/* -----------------------------------------------------------
   Historical/native child compatibility
----------------------------------------------------------- */

.cxr26-submenu-link.active,
.cxr26-submenu-link[aria-current="page"],
.cxr28-native-child.active,
.cxr28-native-child.is-active,
.cxr28-native-child[aria-current="page"]{
    color:#f9fbff !important;

    border-color:
        rgba(163,230,53,.30) !important;

    background:
        linear-gradient(
            135deg,
            #112a4d,
            #0a1e39
        ) !important;

    box-shadow:
        inset 3px 0 0 #a3e635,
        0 8px 22px rgba(0,10,27,.18) !important;
}


/* -----------------------------------------------------------
   MAIN SIDEBAR ACTIVE NAV
----------------------------------------------------------- */

.rail-nav > button.active{
    color:#f8fbff !important;

    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(163,230,53,.08),
            transparent 43%
        ),
        linear-gradient(
            135deg,
            rgba(17,42,77,.98),
            rgba(9,29,56,.98)
        ) !important;

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

    box-shadow:
        inset 3px 0 0 #a3e635,
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 21px rgba(0,10,27,.16) !important;
}

.rail-nav > button.active .nav-icon{
    color:#baf052 !important;

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

    box-shadow:
        inset 0 0 0 1px rgba(163,230,53,.16),
        0 5px 14px rgba(112,175,15,.08) !important;
}


/* -----------------------------------------------------------
   TOPBAR — premium command bar
----------------------------------------------------------- */

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

    padding-left:30px !important;
    padding-right:30px !important;

    background:
        radial-gradient(
            circle at 91% 0%,
            rgba(155,216,36,.075),
            transparent 24%
        ),
        radial-gradient(
            circle at 72% 110%,
            rgba(67,112,190,.045),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.985),
            rgba(249,252,255,.955)
        ) !important;

    border-bottom:
        1px solid rgba(193,204,218,.68) !important;

    box-shadow:
        0 7px 28px rgba(14,35,67,.055),
        inset 0 1px 0 rgba(255,255,255,.98) !important;

    -webkit-backdrop-filter:
        blur(20px) saturate(145%) !important;

    backdrop-filter:
        blur(20px) saturate(145%) !important;
}


/* Breadcrumb / context */

.page-ident{
    min-width:0 !important;
}

.page-ident small{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;

    color:#7d8ca1 !important;

    font-size:10.5px !important;
    font-weight:850 !important;

    letter-spacing:1.02px !important;
    line-height:1.2 !important;
}

.page-ident small::before{
    content:"" !important;

    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;

    border-radius:50% !important;

    background:#9bd824 !important;

    box-shadow:
        0 0 0 4px rgba(155,216,36,.10),
        0 0 12px rgba(155,216,36,.24) !important;
}

.page-ident strong{
    margin-top:6px !important;

    color:#0b1930 !important;

    font-size:18px !important;
    font-weight:850 !important;

    letter-spacing:-.32px !important;
    line-height:1.08 !important;
}


/* -----------------------------------------------------------
   SEARCH
----------------------------------------------------------- */

.global-search{
    width:clamp(
        310px,
        30vw,
        430px
    ) !important;

    height:50px !important;

    padding:
        0 10px 0 12px !important;

    gap:9px !important;

    color:#75869d !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.99),
            rgba(247,250,253,.97)
        ) !important;

    border:
        1px solid #dce4ed !important;

    border-radius:15px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 5px 16px rgba(16,40,73,.045) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

.global-search:hover{
    border-color:#cbd7e3 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 7px 20px rgba(16,40,73,.065) !important;
}

.global-search:focus-within{
    border-color:
        rgba(139,195,28,.56) !important;

    background:#fff !important;

    box-shadow:
        0 0 0 4px rgba(155,216,36,.09),
        0 8px 24px rgba(16,40,73,.075) !important;
}

.global-search input{
    color:#12213a !important;

    font-size:12.5px !important;
    font-weight:620 !important;
}

.global-search input::placeholder{
    color:#95a2b4 !important;
    opacity:1 !important;
}

.global-search kbd{
    min-width:36px !important;
    height:28px !important;

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

    padding:0 7px !important;

    color:#6f7d91 !important;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f4f7fa
        ) !important;

    border:
        1px solid #d8e0e8 !important;

    border-radius:8px !important;

    box-shadow:
        0 2px 5px rgba(18,40,70,.055),
        inset 0 1px 0 #fff !important;

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


/* -----------------------------------------------------------
   TOPBAR ACTIONS
----------------------------------------------------------- */

.topbar-right{
    gap:10px !important;
}

.round-button,
.round-user{
    width:50px !important;
    height:50px !important;

    border:
        1px solid #dce4ed !important;

    border-radius:15px !important;

    box-shadow:
        0 5px 16px rgba(15,38,70,.045) !important;
}

.round-button{
    color:#64758d !important;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f8fafc
        ) !important;

    transition:
        transform .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.round-button:hover{
    transform:translateY(-1px) !important;

    color:#203754 !important;

    border-color:#cbd6e2 !important;

    box-shadow:
        0 9px 22px rgba(15,38,70,.075) !important;
}

.round-button svg{
    width:19px !important;
    height:19px !important;
    stroke-width:1.9 !important;
}

.round-button i{
    width:7px !important;
    height:7px !important;

    top:7px !important;
    right:8px !important;

    background:#e15e69 !important;

    box-shadow:
        0 0 0 2px #fff !important;
}


/* Login / Codi compact CTA */

.codi-mini{
    height:50px !important;

    padding:
        0 18px !important;

    color:#2a410f !important;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(173,228,66,.17),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #f5fbe8,
            #edf7d9
        ) !important;

    border:
        1px solid rgba(145,196,42,.32) !important;

    border-radius:15px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 7px 18px rgba(108,156,25,.075) !important;

    font-size:12px !important;
    font-weight:850 !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

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

    border-color:
        rgba(135,190,28,.48) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 10px 23px rgba(108,156,25,.11) !important;
}


/* -----------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------- */

@media (max-width:1180px){

    .topbar{
        padding-left:22px !important;
        padding-right:22px !important;
    }

    .global-search{
        width:290px !important;
    }
}

@media (max-width:960px){

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

    .page-ident strong{
        font-size:16.5px !important;
    }

    .global-search{
        width:240px !important;
    }

    .round-button,
    .round-user,
    .codi-mini{
        height:46px !important;
    }

    .round-button,
    .round-user{
        width:46px !important;
    }
}

@media (max-width:760px){

    .topbar{
        padding-left:14px !important;
        padding-right:14px !important;
    }

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

    .page-ident small{
        font-size:9.5px !important;
        letter-spacing:.8px !important;
    }

    .rail-nav .cxr29-child{
        min-height:52px !important;
    }
}


/* Accessibility */

@media (prefers-reduced-motion:reduce){

    .rail-nav button,
    .rail-nav .cxr29-child,
    .rail-nav .cxr29-child::before,
    .global-search,
    .round-button,
    .codi-mini{
        transition:none !important;
    }
}

/* CODSHIPX_AI_CRM_R30_R1_PREMIUM_NAV_TOPBAR_END */