/* ============================================================
 CODSHIPX AI CRM R32-R1
 NATIVE UI + NAV STABILITY

 Scope:
 - Logged-in CRM setup verification visual only
 - AI Center parent glyph only
 - AI Center child icon visibility
 - Embedded Commercial / Communications / AI Center UI
 - Checkbox / radio normalization
============================================================ */


/* ============================================================
 1. HARD REFRESH
 Keep /codi/setup logic alive.
 Remove only the black blocking verification presentation.
============================================================ */

html body
div[role="status"][aria-busy="true"][style*="position: fixed"][style*="inset: 0"],

html body
div[role="status"][aria-busy="true"][style*="position:fixed"][style*="inset:0"]{

    visibility:
        hidden !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;

    background:
        transparent !important;
}


/* ============================================================
 2. AI CENTER MAIN NAV

 IMPORTANT:
 .nav-icon BOX must remain original navy UI.
 ONLY inner glyph changes colour.
============================================================ */

@keyframes cxR32AiGlyphHue{

    0%{
        filter:
            hue-rotate(0deg)
            saturate(1.55)
            brightness(1.08)
            drop-shadow(
                0 0 4px
                rgba(156,235,55,.20)
            );
    }

    25%{
        filter:
            hue-rotate(90deg)
            saturate(1.70)
            brightness(1.10)
            drop-shadow(
                0 0 4px
                rgba(40,215,216,.20)
            );
    }

    50%{
        filter:
            hue-rotate(180deg)
            saturate(1.70)
            brightness(1.10)
            drop-shadow(
                0 0 5px
                rgba(67,151,255,.20)
            );
    }

    75%{
        filter:
            hue-rotate(270deg)
            saturate(1.65)
            brightness(1.10)
            drop-shadow(
                0 0 5px
                rgba(173,94,255,.20)
            );
    }

    100%{
        filter:
            hue-rotate(360deg)
            saturate(1.55)
            brightness(1.08)
            drop-shadow(
                0 0 4px
                rgba(156,235,55,.20)
            );
    }
}


/* kill whole-box colour animation */

.rail-nav >
button[data-nav="AI Center"] >
.nav-icon{

    animation:
        none !important;

    filter:
        none !important;
}


/* SVG glyph */

.rail-nav >
button[data-nav="AI Center"] >
.nav-icon svg{

    color:
        #9ceb37 !important;

    animation:
        cxR32AiGlyphHue
        3.2s linear infinite !important;

    will-change:
        filter !important;
}


/* CSS / pseudo glyph fallback */

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

    animation:
        cxR32AiGlyphHue
        3.2s linear infinite !important;

    will-change:
        filter !important;
}


/* ============================================================
 3. AI CENTER CHILD NAV ICONS
 Never disappear in active state.
============================================================ */

.rail-nav
.cxr29-child[data-cxr29-suite="ai-center"]{

    min-height:
        50px !important;

    height:
        auto !important;

    border-radius:
        10px !important;

    overflow:
        visible !important;

    white-space:
        normal !important;
}


/* consistent monochrome icon shell */

.rail-nav
.cxr29-child[data-cxr29-suite="ai-center"]::before{

    display:
        grid !important;

    place-items:
        center !important;

    flex:
        0 0 32px !important;

    width:
        32px !important;

    height:
        32px !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    color:
        #9ceb37 !important;

    -webkit-text-fill-color:
        #9ceb37 !important;

    background:
        #0d2d4b !important;

    background-image:
        none !important;

    border:
        1px solid
        rgba(62,126,172,.42) !important;

    border-radius:
        8px !important;

    filter:
        none !important;

    text-shadow:
        0 0 8px
        rgba(156,235,55,.16) !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}


/* stable exact AI child glyphs */

.rail-nav
.cxr29-child[data-cxr29-view="quality"]::before{
    content:
        "✦" !important;
}

.rail-nav
.cxr29-child[data-cxr29-view="assist"]::before{
    content:
        "✎" !important;
}

.rail-nav
.cxr29-child[data-cxr29-view="sales"]::before{
    content:
        "↗" !important;
}

.rail-nav
.cxr29-child[data-cxr29-view="automation"]::before{
    content:
        "⚙" !important;
}


/* selected = icon still visible */

.rail-nav
.cxr29-child[data-cxr29-suite="ai-center"].active::before,

.rail-nav
.cxr29-child[data-cxr29-suite="ai-center"].is-active::before,

.rail-nav
.cxr29-child[data-cxr29-suite="ai-center"][aria-current="page"]::before{

    opacity:
        1 !important;

    visibility:
        visible !important;

    color:
        #b5ff48 !important;

    -webkit-text-fill-color:
        #b5ff48 !important;

    background:
        #103351 !important;

    border-color:
        rgba(156,235,55,.62) !important;

    filter:
        none !important;
}


/* child label cannot ellipsis / disappear */

.rail-nav
.cxr29-child[data-cxr29-suite="ai-center"]
span:last-child{

    min-width:
        0 !important;

    overflow:
        visible !important;

    text-overflow:
        clip !important;

    white-space:
        normal !important;

    line-height:
        1.2 !important;
}


/* ============================================================
 4. NATIVE SUITE FOUNDATION
 Main CRM visual language.
============================================================ */

#cx-r29-native-host{

    --cx-r32-bg:
        #f7f9fc;

    --cx-r32-card:
        #ffffff;

    --cx-r32-ink:
        #0c1930;

    --cx-r32-muted:
        #74839a;

    --cx-r32-line:
        #dce5ee;

    --cx-r32-lime:
        #8ddd00;

    --cx-r32-lime-dark:
        #4d7d00;

    --cx-r32-blue:
        #3ba8ee;

    --cx-r32-shadow:
        0 8px 24px
        rgba(26,47,73,.055);

    color:
        var(--cx-r32-ink) !important;

    font-family:
        inherit !important;
}


/* native module canvas */

#cx-r29-native-host
.cx-r29-suite-root,

#cx-r29-native-host
.cx21-app,

#cx-r29-native-host
.cx22-app,

#cx-r29-native-host
.cx23-app{

    background:
        transparent !important;

    color:
        var(--cx-r32-ink) !important;
}


/* ============================================================
 5. REMOVE "ROUNDED BOX INSIDE BOX" HEADERS
 This is the Customer email / Tickets style problem.
============================================================ */

#cx-r29-native-host
.cx21-panel-head,

#cx-r29-native-host
.cx22-panel-head,

#cx-r29-native-host
.cx23-panel-head{

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    border-radius:
        0 !important;

    overflow:
        visible !important;

    padding:
        0 !important;
}


/* ============================================================
 6. MAIN SURFACES
 Small radius only. No giant pills / capsules.
============================================================ */

#cx-r29-native-host
:is(
    .cx21-hero,
    .cx22-hero,
    .cx23-hero,
    .cx21-panel,
    .cx22-panel,
    .cx23-panel,
    .cx21-metric,
    .cx22-metrics article,
    .cx23-metrics article,
    .cx22-provider,
    .cx23-result,
    .cx23-table article,
    .cx23-drafts article,
    .cx21-ticket,
    .cx21-auto,
    .cx22-readonly-banner,
    .cx22-status-note
){

    border-radius:
        10px !important;
}


/* normal CRM cards */

#cx-r29-native-host
:is(
    .cx21-panel,
    .cx22-panel,
    .cx23-panel,
    .cx21-metric,
    .cx22-metrics article,
    .cx23-metrics article,
    .cx22-provider,
    .cx21-ticket,
    .cx21-auto
){

    background:
        var(--cx-r32-card) !important;

    border:
        1px solid
        var(--cx-r32-line) !important;

    color:
        var(--cx-r32-ink) !important;

    box-shadow:
        var(--cx-r32-shadow) !important;
}


/* do not clip titles / controls */

#cx-r29-native-host
:is(
    .cx21-panel,
    .cx22-panel,
    .cx23-panel,
    .cx21-metric,
    .cx22-metrics article,
    .cx23-metrics article
){

    overflow:
        visible !important;
}


/* ============================================================
 7. HERO / AI CENTER SURFACE
 Light CRM card, subtle AI accent.
============================================================ */

#cx-r29-native-host
.cx23-hero,

#cx-r29-native-host
.cx-r29-suite-ai-center
.cx23-hero{

    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #ffffff 68%,
            #f1fadf 100%
        ) !important;

    border:
        1px solid
        #dce9c7 !important;

    color:
        var(--cx-r32-ink) !important;

    box-shadow:
        var(--cx-r32-shadow) !important;
}


#cx-r29-native-host
.cx23-hero h1,

#cx-r29-native-host
.cx23-hero h2,

#cx-r29-native-host
.cx23-hero strong{

    color:
        var(--cx-r32-ink) !important;
}


#cx-r29-native-host
.cx23-hero p{

    color:
        var(--cx-r32-muted) !important;
}


/* ============================================================
 8. AI METRIC CARDS
 Remove heavy dark cards from screenshots.
============================================================ */

#cx-r29-native-host
.cx23-metrics article{

    background:
        #ffffff !important;

    border:
        1px solid
        var(--cx-r32-line) !important;
}


#cx-r29-native-host
.cx23-metrics article strong{

    color:
        var(--cx-r32-ink) !important;
}


#cx-r29-native-host
.cx23-metrics article span,

#cx-r29-native-host
.cx23-metrics article small{

    color:
        var(--cx-r32-muted) !important;
}


/* status / empty result area */

#cx-r29-native-host
.cx23-result{

    background:
        #f8fafc !important;

    border:
        1px solid
        var(--cx-r32-line) !important;

    color:
        var(--cx-r32-ink) !important;

    box-shadow:
        none !important;
}


/* ============================================================
 9. TYPOGRAPHY
============================================================ */

#cx-r29-native-host
:is(
    h1,
    h2,
    h3,
    h4
){

    color:
        var(--cx-r32-ink) !important;

    font-family:
        inherit !important;
}


#cx-r29-native-host
:is(
    p,
    small
){

    color:
        var(--cx-r32-muted) !important;
}


#cx-r29-native-host
:is(
    .cx21-kicker,
    .cx22-kicker,
    .cx23-hero > span,
    .cx23-panel-head > span
){

    color:
        var(--cx-r32-blue) !important;

    font-weight:
        800 !important;

    letter-spacing:
        .12em !important;
}


/* ============================================================
 10. INPUTS / SELECTS / TEXTAREAS
============================================================ */

#cx-r29-native-host
input:not([type="checkbox"]):not([type="radio"]),

#cx-r29-native-host
select,

#cx-r29-native-host
textarea{

    background:
        #ffffff !important;

    color:
        var(--cx-r32-ink) !important;

    border:
        1px solid
        #d7e1eb !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;

    font-family:
        inherit !important;
}


#cx-r29-native-host
input:not([type="checkbox"]):not([type="radio"]):focus,

#cx-r29-native-host
select:focus,

#cx-r29-native-host
textarea:focus{

    border-color:
        #9ccb55 !important;

    box-shadow:
        0 0 0 3px
        rgba(141,221,0,.09) !important;

    outline:
        none !important;
}


/* ============================================================
 11. CHECKBOX / RADIO
 Fix giant browser checkbox shown in screenshot.
============================================================ */

#cx-r29-native-host
input[type="checkbox"]{

    appearance:
        auto !important;

    -webkit-appearance:
        checkbox !important;

    width:
        16px !important;

    min-width:
        16px !important;

    max-width:
        16px !important;

    height:
        16px !important;

    min-height:
        16px !important;

    max-height:
        16px !important;

    padding:
        0 !important;

    margin:
        0 !important;

    border-radius:
        3px !important;

    box-shadow:
        none !important;

    accent-color:
        var(--cx-r32-lime) !important;

    flex:
        0 0 16px !important;
}


#cx-r29-native-host
input[type="radio"]{

    appearance:
        auto !important;

    -webkit-appearance:
        radio !important;

    width:
        16px !important;

    min-width:
        16px !important;

    max-width:
        16px !important;

    height:
        16px !important;

    min-height:
        16px !important;

    max-height:
        16px !important;

    padding:
        0 !important;

    margin:
        0 !important;

    box-shadow:
        none !important;

    accent-color:
        var(--cx-r32-lime) !important;

    flex:
        0 0 16px !important;
}


/* checkbox label row */

#cx-r29-native-host
label:has(
    > input[type="checkbox"]
),

#cx-r29-native-host
label:has(
    > input[type="radio"]
){

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    width:
        auto !important;
}


/* ============================================================
 12. BUTTON SYSTEM
============================================================ */

#cx-r29-native-host
:is(
    .cx21-btn,
    .cx22-btn,
    .cx23-btn
){

    border-radius:
        8px !important;

    font-family:
        inherit !important;

    font-weight:
        750 !important;

    box-shadow:
        none !important;
}


/* lime action */

#cx-r29-native-host
:is(
    .cx21-btn.primary,
    .cx22-btn.primary,
    .cx23-btn.primary
){

    background:
        var(--cx-r32-lime) !important;

    border-color:
        var(--cx-r32-lime) !important;

    color:
        #132100 !important;
}


/* secondary */

#cx-r29-native-host
:is(
    .cx21-btn.ghost,
    .cx22-btn.ghost,
    .cx23-btn.ghost
){

    background:
        #ffffff !important;

    border-color:
        var(--cx-r32-line) !important;

    color:
        var(--cx-r32-ink) !important;
}


/* ============================================================
 13. CONTENT SPACING
============================================================ */

#cx-r29-native-host
:is(
    .cx21-content,
    .cx22-content,
    .cx23-content
){

    padding:
        20px 22px 56px !important;
}


/* ============================================================
 R32-R1 END
============================================================ */

/* CODSHIPX_AI_CRM_R32_R1_NATIVE_UI_NAV_STABILITY_END */