/* ============================================================
 CODSHIPX AI CRM R31-R6
 FINAL NATIVE COMMUNICATIONS UI + NAV AUTHORITY

 PART A
 - one visual selection only
 - semantic child classes are authoritative
 - no nonexistent data-cxr29-suite dependency

 PART B
 - Communications Email / Calendar / Omnichannel / Connections
   visually aligned with the main CRM design language
============================================================ */


/* ============================================================
 A. SIDEBAR — ONE REAL SELECTION
============================================================ */


/* ------------------------------------------------------------
 Standalone React main module wins.

 If Command / Inbox / CRM / Orders / Products / Automations /
 Campaigns / etc. owns .active, no old suite parent may look
 selected.
------------------------------------------------------------ */

body:has(
    .rail-nav > button.active
    :not([data-nav="Communications"])
){
}


body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button.cxr29-suite-active:not(.active),

body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="Communications"]:not(.active),

body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="Commercial Intelligence"]:not(.active),

body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="AI Center"]:not(.active){

    color:#c6d0df !important;

    background:
        transparent !important;

    border-color:
        transparent !important;

    box-shadow:
        none !important;

    transform:none !important;
}


body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button.cxr29-suite-active:not(.active)::before,

body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="Communications"]:not(.active)::before,

body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="Commercial Intelligence"]:not(.active)::before,

body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="AI Center"]:not(.active)::before{

    content:none !important;
    display:none !important;

    background:none !important;
    box-shadow:none !important;
}


body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="Communications"]:not(.active) .nav-icon,

body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="Commercial Intelligence"]:not(.active) .nav-icon,

body:has(
    .rail-nav > button.active:not([data-nav="Communications"]):not([data-nav="Commercial Intelligence"]):not([data-nav="AI Center"])
)
.rail-nav > button[data-nav="AI Center"]:not(.active) .nav-icon{

    color:#9eafc5 !important;

    background:
        rgba(15,48,81,.72) !important;

    border-color:
        rgba(87,121,158,.28) !important;

    box-shadow:none !important;
}


/* ------------------------------------------------------------
 Communications child is the selection authority.

 IMPORTANT:
 Current runtime is tagged by R30 semantic classes, not
 data-cxr29-suite attributes.
------------------------------------------------------------ */

body:has(
    .rail-nav .cxr29-child:is(
        .cxr30r3-email,
        .cxr30r3-calendar,
        .cxr30r3-omnichannel,
        .cxr30r3-connections
    ):is(
        .active,
        .is-active,
        [aria-current="page"]
    )
)
.rail-nav > button[data-nav="Communications"]{

    color:#d7e1ee !important;

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

    border-color:
        rgba(92,124,160,.17) !important;

    box-shadow:
        none !important;

    transform:none !important;
}


body:has(
    .rail-nav .cxr29-child:is(
        .cxr30r3-email,
        .cxr30r3-calendar,
        .cxr30r3-omnichannel,
        .cxr30r3-connections
    ):is(
        .active,
        .is-active,
        [aria-current="page"]
    )
)
.rail-nav > button[data-nav="Communications"]::before{

    content:none !important;
    display:none !important;

    background:none !important;
    box-shadow:none !important;
}


body:has(
    .rail-nav .cxr29-child:is(
        .cxr30r3-email,
        .cxr30r3-calendar,
        .cxr30r3-omnichannel,
        .cxr30r3-connections
    ):is(
        .active,
        .is-active,
        [aria-current="page"]
    )
)
.rail-nav > button[data-nav="Communications"] .nav-icon{

    color:#9eb0c7 !important;

    background:
        rgba(15,48,81,.72) !important;

    border-color:
        rgba(88,121,158,.28) !important;

    box-shadow:none !important;
}


/* ------------------------------------------------------------
 Commercial child is the selection authority.
------------------------------------------------------------ */

body:has(
    .rail-nav .cxr29-child:is(
        .cxr30r3-opportunities,
        .cxr30r3-support,
        .cxr30r3-automation,
        .cxr30r3-analytics-child
    ):is(
        .active,
        .is-active,
        [aria-current="page"]
    )
)
.rail-nav > button[data-nav="Commercial Intelligence"]{

    color:#d7e1ee !important;

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

    border-color:
        rgba(92,124,160,.17) !important;

    box-shadow:none !important;

    transform:none !important;
}


body:has(
    .rail-nav .cxr29-child:is(
        .cxr30r3-opportunities,
        .cxr30r3-support,
        .cxr30r3-automation,
        .cxr30r3-analytics-child
    ):is(
        .active,
        .is-active,
        [aria-current="page"]
    )
)
.rail-nav > button[data-nav="Commercial Intelligence"]::before{

    content:none !important;
    display:none !important;

    background:none !important;
    box-shadow:none !important;
}


body:has(
    .rail-nav .cxr29-child:is(
        .cxr30r3-opportunities,
        .cxr30r3-support,
        .cxr30r3-automation,
        .cxr30r3-analytics-child
    ):is(
        .active,
        .is-active,
        [aria-current="page"]
    )
)
.rail-nav > button[data-nav="Commercial Intelligence"] .nav-icon{

    color:#9eb0c7 !important;

    background:
        rgba(15,48,81,.72) !important;

    border-color:
        rgba(88,121,158,.28) !important;

    box-shadow:none !important;
}


/* ------------------------------------------------------------
 Child itself remains selected.
------------------------------------------------------------ */

.rail-nav .cxr29-child:is(
    .active,
    .is-active,
    [aria-current="page"]
){

    position:relative !important;
    z-index:4 !important;
}


/* ============================================================
 B. COMMUNICATIONS NATIVE UI → MAIN CRM DESIGN LANGUAGE
============================================================ */

#cx22-root{

    --cx22-bg:#f7f9fc !important;
    --cx22-card:#ffffff !important;
    --cx22-ink:#13213c !important;
    --cx22-muted:#7889a4 !important;
    --cx22-line:#dfe6ee !important;

    --cx22-green:#94e214 !important;
    --cx22-green-dark:#6dac00 !important;

    --cx22-shadow:
        0 9px 26px rgba(31,52,80,.055) !important;

    color:#13213c !important;

    background:#f7f9fc !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
}


#cx22-root,
#cx22-root *{
    box-sizing:border-box !important;
}


/* ------------------------------------------------------------
 Main content canvas
------------------------------------------------------------ */

#cx22-root .cx22-main,
#cx22-root .cx22-content{

    min-width:0 !important;

    background:#f7f9fc !important;

    color:#13213c !important;
}


#cx22-root .cx22-content{

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

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:
        20px 22px
        68px !important;

    overflow:visible !important;
}


/* ------------------------------------------------------------
 HERO

 Old Communications standalone theme used large dark gradients.
 Native CRM mode should feel like the rest of the CRM.
------------------------------------------------------------ */

#cx22-root .cx22-hero{

    position:relative !important;

    width:100% !important;

    height:auto !important;
    min-height:118px !important;
    max-height:none !important;

    margin:0 0 14px !important;

    padding:
        21px 22px !important;

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

    gap:20px !important;

    color:#13213c !important;

    background:
        radial-gradient(
            circle at 93% 8%,
            rgba(148,226,20,.075),
            transparent 24%
        ),
        #ffffff !important;

    border:
        1px solid #dfe6ee !important;

    border-radius:
        15px !important;

    box-shadow:
        0 9px 26px rgba(31,52,80,.055) !important;

    overflow:visible !important;
}


#cx22-root .cx22-hero.email,
#cx22-root .cx22-hero.calendar,
#cx22-root .cx22-hero.timeline,
#cx22-root .cx22-hero.connections{

    color:#13213c !important;

    background:
        radial-gradient(
            circle at 94% 8%,
            rgba(148,226,20,.07),
            transparent 25%
        ),
        #ffffff !important;
}


/* Remove decorative old standalone blobs. */

#cx22-root .cx22-hero::before,
#cx22-root .cx22-hero::after{

    opacity:.08 !important;
    box-shadow:none !important;
}


/* kicker */

#cx22-root .cx22-kicker{

    display:block !important;

    margin:0 0 7px !important;

    color:#78b91b !important;

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

    font-weight:850 !important;

    letter-spacing:.11em !important;

    text-transform:uppercase !important;

    white-space:normal !important;

    overflow:visible !important;
}


/* hero title */

#cx22-root .cx22-hero h1{

    margin:
        0 0 7px !important;

    color:#13213c !important;

    font-size:24px !important;
    line-height:1.16 !important;

    font-weight:820 !important;

    letter-spacing:-.45px !important;

    white-space:normal !important;

    overflow:visible !important;
}


/* hero description */

#cx22-root .cx22-hero p{

    max-width:760px !important;

    margin:0 !important;

    color:#7889a4 !important;

    font-size:12px !important;
    line-height:1.55 !important;

    font-weight:500 !important;

    white-space:normal !important;

    overflow:visible !important;
}


/* right hero metrics/status */

#cx22-root .cx22-hero-metrics,
#cx22-root .cx22-actions{

    position:relative !important;
    z-index:2 !important;

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

    gap:9px !important;

    flex-wrap:wrap !important;
}


#cx22-root .cx22-hero-metrics span,
#cx22-root .cx22-status-note{

    min-width:108px !important;
    min-height:60px !important;

    padding:
        11px 13px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    border:
        1px solid #e0e7ef !important;

    border-radius:
        12px !important;

    background:
        #f8fafc !important;

    box-shadow:none !important;

    color:#13213c !important;

    overflow:visible !important;
}


#cx22-root .cx22-hero-metrics strong,
#cx22-root .cx22-status-note strong{

    color:#13213c !important;

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

    font-weight:800 !important;
}


#cx22-root .cx22-hero-metrics span,
#cx22-root .cx22-status-note span{

    color:#8190a5 !important;

    font-size:9px !important;
    line-height:1.35 !important;
}


/* ------------------------------------------------------------
 METRIC CARDS

 This specifically fixes the visible clipped cards such as
 THREADS / Customer email and SCHEDULE / Meetings.
------------------------------------------------------------ */

#cx22-root .cx22-metrics{

    width:100% !important;

    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:12px !important;

    margin:
        0 0 14px !important;

    overflow:visible !important;
}


#cx22-root .cx22-metrics article{

    position:relative !important;

    min-width:0 !important;

    height:auto !important;
    min-height:102px !important;
    max-height:none !important;

    padding:
        16px 18px 17px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    gap:5px !important;

    color:#13213c !important;

    background:#ffffff !important;

    border:
        1px solid #dfe6ee !important;

    border-radius:
        14px !important;

    box-shadow:
        0 7px 21px rgba(31,52,80,.045) !important;

    overflow:visible !important;
}


#cx22-root .cx22-metrics article > span{

    display:block !important;

    margin:0 !important;

    color:#79bd22 !important;

    font-size:10px !important;
    line-height:1.2 !important;

    font-weight:850 !important;

    letter-spacing:.08em !important;

    text-transform:uppercase !important;

    white-space:normal !important;

    overflow:visible !important;
}


#cx22-root .cx22-metrics article > strong{

    display:block !important;

    margin:0 !important;

    color:#15213a !important;

    font-size:20px !important;
    line-height:1.22 !important;

    font-weight:760 !important;

    letter-spacing:-.25px !important;

    white-space:normal !important;

    overflow:visible !important;

    text-overflow:clip !important;
}


#cx22-root .cx22-metrics article > small{

    display:block !important;

    margin:0 !important;

    color:#8795a8 !important;

    font-size:10px !important;
    line-height:1.4 !important;

    font-weight:500 !important;

    white-space:normal !important;

    overflow:visible !important;
}


/* ------------------------------------------------------------
 MAIN PANELS
------------------------------------------------------------ */

#cx22-root .cx22-panel{

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:
        14px 0 0 !important;

    padding:
        18px 19px !important;

    color:#13213c !important;

    background:#ffffff !important;

    border:
        1px solid #dfe6ee !important;

    border-radius:
        14px !important;

    box-shadow:
        0 8px 24px rgba(31,52,80,.05) !important;

    overflow:visible !important;
}


#cx22-root .cx22-panel-head{

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

    gap:14px !important;

    margin:
        0 0 14px !important;
}


#cx22-root .cx22-panel-head h2{

    margin:
        3px 0 0 !important;

    color:#15213a !important;

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

    font-weight:790 !important;

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


#cx22-root .cx22-panel-head > span{

    color:#8492a5 !important;

    font-size:10px !important;
    line-height:1.3 !important;
}


/* ------------------------------------------------------------
 Rows / Lists / Timeline / Provider surfaces
------------------------------------------------------------ */

#cx22-root
:is(
    .cx22-thread-row,
    .cx22-event-row,
    .cx22-timeline-row,
    .cx22-account-row,
    .cx22-provider
){

    min-width:0 !important;

    color:#26364f !important;

    background:#ffffff !important;

    border:
        1px solid #e2e8f0 !important;

    border-radius:
        12px !important;

    box-shadow:none !important;

    overflow:visible !important;
}


#cx22-root
:is(
    .cx22-thread-row,
    .cx22-event-row,
    .cx22-timeline-row,
    .cx22-account-row,
    .cx22-provider
):hover{

    border-color:
        #d4dfeb !important;

    background:
        #fbfcfe !important;
}


/* ------------------------------------------------------------
 Omnichannel channel cards
------------------------------------------------------------ */

#cx22-root .cx22-channel-strip{

    display:grid !important;

    grid-template-columns:
        repeat(5,minmax(0,1fr)) !important;

    gap:10px !important;

    margin:
        14px 0 !important;

    overflow-x:auto !important;
    overflow-y:visible !important;
}


#cx22-root .cx22-channel-strip article{

    min-height:86px !important;

    padding:
        14px 15px !important;

    background:#ffffff !important;

    border:
        1px solid #dfe6ee !important;

    border-radius:
        13px !important;

    box-shadow:
        0 6px 18px rgba(31,52,80,.04) !important;

    overflow:visible !important;
}


/* ------------------------------------------------------------
 Inputs
------------------------------------------------------------ */

#cx22-root
:is(
    input,
    select,
    textarea
){

    color:#24344d !important;

    background:#ffffff !important;

    border:
        1px solid #d9e2ec !important;

    border-radius:
        10px !important;

    box-shadow:none !important;

    font-size:12px !important;
    line-height:1.35 !important;
}


#cx22-root
:is(
    input,
    select
){

    min-height:40px !important;

    padding:
        0 11px !important;
}


#cx22-root textarea{

    padding:
        10px 11px !important;
}


#cx22-root
:is(
    input,
    select,
    textarea
):focus{

    outline:none !important;

    border-color:
        #9acb57 !important;

    box-shadow:
        0 0 0 3px rgba(148,226,20,.09) !important;
}


/* ------------------------------------------------------------
 Buttons
------------------------------------------------------------ */

#cx22-root .cx22-btn{

    min-height:38px !important;

    padding:
        8px 12px !important;

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

    gap:6px !important;

    color:#324258 !important;

    background:#ffffff !important;

    border:
        1px solid #d7e0ea !important;

    border-radius:
        10px !important;

    box-shadow:none !important;

    font-size:11px !important;
    line-height:1.2 !important;

    font-weight:760 !important;

    text-decoration:none !important;
}


#cx22-root .cx22-btn.primary{

    color:#14230c !important;

    background:
        linear-gradient(
            135deg,
            #a2eb2c,
            #82d70a
        ) !important;

    border-color:
        #8bd513 !important;

    box-shadow:
        0 5px 13px rgba(127,191,27,.11) !important;
}


#cx22-root .cx22-btn.ghost{

    background:
        #f8fafc !important;
}


#cx22-root .cx22-btn.danger{

    color:#b33a43 !important;

    background:#fff7f7 !important;

    border-color:
        #f0d5d8 !important;
}


/* ------------------------------------------------------------
 Empty states / read-only surfaces
------------------------------------------------------------ */

#cx22-root .cx22-empty-inline{

    min-height:76px !important;

    padding:
        16px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    gap:5px !important;

    color:#7b8aa0 !important;

    background:#f9fbfd !important;

    border:
        1px dashed #d8e1eb !important;

    border-radius:
        12px !important;

    overflow:visible !important;
}


#cx22-root .cx22-empty-inline strong{

    color:#25364f !important;

    font-size:12px !important;
}


#cx22-root
:is(
    .cx22-readonly,
    .cx22-readonly-banner,
    .cx22-chip
){

    border-radius:
        9px !important;
}


/* ------------------------------------------------------------
 Drawer / modal visual parity
------------------------------------------------------------ */

#cx22-root
:is(
    .cx22-modal-card,
    .cx22-drawer-card
){

    color:#13213c !important;

    background:#ffffff !important;

    border:
        1px solid #dce4ee !important;

    border-radius:
        16px !important;

    box-shadow:
        0 22px 55px rgba(20,39,65,.17) !important;
}


/* ------------------------------------------------------------
 Tables
------------------------------------------------------------ */

#cx22-root table{

    width:100% !important;

    color:#26364f !important;

    background:#ffffff !important;

    border-collapse:
        separate !important;

    border-spacing:0 !important;
}


#cx22-root th{

    color:#7b8ba0 !important;

    background:#f8fafc !important;

    font-size:10px !important;

    font-weight:800 !important;
}


#cx22-root td{

    color:#34445b !important;

    font-size:11px !important;
}


/* ------------------------------------------------------------
 Generic top-level content clipping kill.

 Do NOT touch modal backdrop/table scrolling internals.
------------------------------------------------------------ */

#cx22-root .cx22-content > .cx22-hero,
#cx22-root .cx22-content > .cx22-panel,
#cx22-root .cx22-content > .cx22-metrics,
#cx22-root .cx22-content > .cx22-channel-strip{

    height:auto !important;

    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;
}


/* ============================================================
 RESPONSIVE
============================================================ */

@media(max-width:1180px){

    #cx22-root .cx22-metrics{

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }


    #cx22-root .cx22-hero{

        align-items:flex-start !important;

        flex-direction:column !important;
    }
}


@media(max-width:700px){

    #cx22-root .cx22-content{

        padding:
            14px 12px
            76px !important;
    }


    #cx22-root .cx22-hero{

        min-height:0 !important;

        padding:
            17px 16px !important;

        border-radius:
            13px !important;
    }


    #cx22-root .cx22-hero h1{

        font-size:
            21px !important;
    }


    #cx22-root .cx22-metrics{

        grid-template-columns:
            1fr !important;
    }


    #cx22-root .cx22-metrics article{

        min-height:
            92px !important;
    }


    #cx22-root .cx22-panel{

        padding:
            15px !important;

        border-radius:
            13px !important;
    }


    #cx22-root .cx22-channel-strip{

        grid-template-columns:
            repeat(5,minmax(110px,1fr)) !important;
    }
}


/* CODSHIPX_AI_CRM_R31_R6_NATIVE_UI_NAV_FINAL_END */