/* ============================================================
   ATT CRM
   MASTER UI STYLESHEET
   v1.1 — LOCKED DASHBOARD DESIGN / MOBILE KPI FIX
   ============================================================ */


/* ============================================================
   01. CRM DESIGN TOKENS
   ============================================================ */

.crm-app{
    --crm-navy-1:#070d1d;
    --crm-navy-2:#0b1429;
    --crm-navy-3:#111c35;

    --crm-blue:#3f6df6;
    --crm-blue-2:#3264ef;
    --crm-purple:#7548ef;

    --crm-bg:#f5f7fb;
    --crm-white:#ffffff;

    --crm-text:#182238;
    --crm-text-2:#344054;
    --crm-muted:#7d879a;
    --crm-muted-2:#9aa4b5;

    --crm-border:#e6eaf1;
    --crm-border-soft:#edf0f5;

    --crm-green:#18a878;
    --crm-green-bg:#eaf8f2;

    --crm-red:#ed476b;
    --crm-red-bg:#fff0f3;

    --crm-orange:#e79a0b;
    --crm-orange-bg:#fff3dd;

    --crm-purple-bg:#f1ebff;

    --crm-sidebar-width:214px;
    --crm-topbar-height:68px;

    --crm-radius-sm:9px;
    --crm-radius:14px;
    --crm-radius-lg:18px;

    --crm-shadow:
        0 7px 25px rgba(25,35,55,.055);

    --crm-shadow-hover:
        0 14px 35px rgba(25,35,55,.10);

    --crm-font:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* ============================================================
   02. HARD RESET — CRM SCOPE ONLY
   ============================================================ */

.crm-app,
.crm-app *,
.crm-app *::before,
.crm-app *::after{
    box-sizing:border-box;
}

.crm-app{
    width:100%;
    min-height:100vh;

    margin:0;
    padding:0;

    font-family:var(--crm-font);
    font-size:14px;
    line-height:1.45;

    color:var(--crm-text);

    background:var(--crm-bg);

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.crm-app h1,
.crm-app h2,
.crm-app h3,
.crm-app h4,
.crm-app p{
    margin:0;
}

.crm-app button,
.crm-app input,
.crm-app textarea,
.crm-app select{
    font:inherit;
}

.crm-app button{
    border:0;
    outline:0;
    cursor:pointer;
}

.crm-app input,
.crm-app textarea,
.crm-app select{
    outline:0;
}

.crm-app img,
.crm-app svg{
    max-width:100%;
}

.crm-app ::-webkit-scrollbar{
    width:6px;
    height:6px;
}

.crm-app ::-webkit-scrollbar-thumb{
    border-radius:20px;
    background:#cbd1dc;
}

.crm-app ::-webkit-scrollbar-track{
    background:transparent;
}


/* ============================================================
   03. APPLICATION SHELL
   ============================================================ */

.crm-app{
    display:flex;
    position:relative;
}

.crm-main{
    width:calc(100% - var(--crm-sidebar-width));
    min-height:100vh;

    margin-left:var(--crm-sidebar-width);

    background:var(--crm-bg);
}


/* ============================================================
   04. DESKTOP SIDEBAR
   ============================================================ */

.crm-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;

    z-index:100;

    width:var(--crm-sidebar-width);

    display:flex;
    flex-direction:column;

    padding:21px 12px 13px;

    color:#fff;

    background:
        radial-gradient(
            circle at 40% -15%,
            rgba(79,91,255,.17),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--crm-navy-2) 0%,
            var(--crm-navy-1) 100%
        );

    border-right:1px solid rgba(255,255,255,.045);
}


/* ============================================================
   05. BRAND
   ============================================================ */

.crm-brand{
    display:flex;
    align-items:center;

    gap:10px;

    padding:0 9px 27px;
}

.crm-brand-logo{
    width:37px;
    height:37px;

    flex:0 0 37px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #3e75ff 0%,
            #7749ee 100%
        );

    font-size:12px;
    font-weight:900;

    box-shadow:
        0 8px 23px rgba(69,80,235,.30);
}

.crm-brand-text{
    min-width:0;

    display:flex;
    flex-direction:column;
}

.crm-brand-text strong{
    color:#fff;

    font-size:15px;
    line-height:1.1;
    font-weight:850;

    letter-spacing:-.3px;
}

.crm-brand-text span{
    margin-top:3px;

    color:#687694;

    font-size:7px;
    font-weight:650;
}


/* ============================================================
   06. SIDEBAR NAVIGATION
   ============================================================ */

.crm-sidebar-nav{
    flex:1;

    overflow-y:auto;

    padding-right:1px;
}

.crm-sidebar-section-title{
    padding:0 11px 8px;

    color:#626f8c;

    font-size:8px;
    line-height:1;

    font-weight:850;
    letter-spacing:1.1px;
}

.crm-sidebar-section-gap{
    margin-top:24px;
}

.crm-sidebar-link{
    width:100%;
    min-height:38px;

    display:flex;
    align-items:center;

    gap:10px;

    margin:2px 0;
    padding:0 11px;

    border-radius:9px;

    color:#aab5ca;
    background:transparent;

    text-align:left;

    font-size:11px;
    font-weight:600;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.crm-sidebar-link:hover{
    color:#fff;
    background:rgba(255,255,255,.055);

    transform:translateX(1px);
}

.crm-sidebar-link-active{
    color:#fff;

    background:
        linear-gradient(
            100deg,
            #3670f6,
            #7548ec
        );

    box-shadow:
        0 8px 21px rgba(62,76,224,.26);
}

.crm-sidebar-icon{
    width:18px;

    flex:0 0 18px;

    display:grid;
    place-items:center;

    color:currentColor;

    font-size:14px;
    line-height:1;
}

.crm-sidebar-arrow{
    margin-left:auto;

    color:#6f7c97;

    font-size:16px;
}


/* ============================================================
   07. SIDEBAR USER
   ============================================================ */

.crm-sidebar-user{
    display:flex;
    align-items:center;

    gap:9px;

    margin-top:10px;
    padding:10px;

    border:1px solid rgba(255,255,255,.07);

    border-radius:11px;

    background:rgba(255,255,255,.045);
}

.crm-user-avatar{
    width:31px;
    height:31px;

    flex:0 0 31px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #426fff,
            #7549ed
        );

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

.crm-user-details{
    min-width:0;
    flex:1;

    display:flex;
    flex-direction:column;
}

.crm-user-details strong{
    overflow:hidden;

    color:#fff;

    font-size:10px;
    line-height:1.2;
    font-weight:750;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.crm-user-details span{
    margin-top:2px;

    color:#73809c;

    font-size:7px;
}

.crm-user-more{
    padding:2px;

    color:#7e8aa4;
    background:transparent;

    font-size:16px;
}


/* ============================================================
   08. TOP BAR
   ============================================================ */

.crm-topbar{
    position:sticky;
    top:0;

    z-index:80;

    height:var(--crm-topbar-height);

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

    padding:0 27px;

    border-bottom:1px solid rgba(226,230,238,.85);

    background:
        rgba(245,247,251,.91);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.crm-desktop-page-title{
    display:flex;
    align-items:center;

    gap:10px;
}

.crm-desktop-page-title span{
    color:#929caf;

    font-size:8px;
    font-weight:850;

    letter-spacing:.9px;
}

.crm-desktop-page-title h1{
    color:#182238;

    font-size:17px;
    line-height:1;
    font-weight:850;

    letter-spacing:-.35px;
}

.crm-mobile-brand{
    display:none;
}


/* ============================================================
   09. TOP BAR ACTIONS
   ============================================================ */

.crm-topbar-actions{
    display:flex;
    align-items:center;

    gap:9px;
}

.crm-search-button{
    width:200px;
    height:37px;

    display:flex;
    align-items:center;

    gap:7px;

    padding:0 10px;

    border:1px solid var(--crm-border);

    border-radius:9px;

    color:#98a2b3;
    background:#fff;

    box-shadow:
        0 2px 7px rgba(20,30,50,.025);

    font-size:10px;

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

.crm-search-button:hover{
    border-color:#cdd5e4;

    box-shadow:
        0 4px 14px rgba(20,30,50,.055);
}

.crm-search-symbol{
    font-size:15px;
    line-height:1;
}

.crm-search-placeholder{
    flex:1;

    overflow:hidden;

    text-align:left;

    white-space:nowrap;
}

.crm-search-button kbd{
    padding:3px 5px;

    border:1px solid #e1e5ec;
    border-radius:5px;

    color:#8994a8;
    background:#f7f8fb;

    font-size:8px;
}

.crm-notification-button{
    position:relative;

    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    border:1px solid var(--crm-border);

    border-radius:9px;

    color:#68748a;
    background:#fff;

    font-size:14px;
}

.crm-notification-count{
    position:absolute;

    top:4px;
    right:4px;

    min-width:13px;
    height:13px;

    display:grid;
    place-items:center;

    padding:0 3px;

    border-radius:20px;

    color:#fff;
    background:var(--crm-red);

    font-size:7px;
    line-height:1;
    font-weight:850;
}

.crm-topbar-avatar{
    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #416fff,
            #7749ed
        );

    font-size:11px;
    font-weight:850;
}


/* ============================================================
   10. DASHBOARD CONTAINER
   ============================================================ */

.crm-dashboard{
    width:100%;
    max-width:1500px;

    margin:0 auto;

    padding:27px 27px 48px;
}


/* ============================================================
   11. DESKTOP WELCOME
   ============================================================ */

.crm-welcome{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:21px;
}

.crm-date{
    display:block;

    margin-bottom:5px;

    color:#8490a5;

    font-size:9px;
    font-weight:600;
}

.crm-welcome h2{
    color:#172137;

    font-size:23px;
    line-height:1.15;
    font-weight:850;

    letter-spacing:-.75px;
}

.crm-welcome h2 span{
    margin-left:4px;
}

.crm-welcome-content p{
    margin-top:5px;

    color:#7c8799;

    font-size:10px;
}

.crm-welcome-actions{
    display:flex;
    align-items:center;

    gap:8px;
}

.crm-primary-button,
.crm-secondary-button{
    height:39px;

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

    gap:6px;

    padding:0 14px;

    border-radius:9px;

    font-size:10px;
    font-weight:750;

    white-space:nowrap;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.crm-primary-button{
    color:#fff;

    background:
        linear-gradient(
            105deg,
            #396df7,
            #7648ef
        );

    box-shadow:
        0 8px 20px rgba(67,76,220,.23);
}

.crm-primary-button:hover{
    transform:translateY(-1px);

    box-shadow:
        0 11px 25px rgba(67,76,220,.30);
}

.crm-secondary-button{
    color:#59667c;

    border:1px solid var(--crm-border);

    background:#fff;
}

.crm-secondary-button:hover{
    transform:translateY(-1px);

    box-shadow:
        0 7px 17px rgba(20,30,50,.06);
}


/* ============================================================
   12. MOBILE WELCOME — HIDDEN DESKTOP
   ============================================================ */

.crm-mobile-welcome{
    display:none;
}


/* ============================================================
   13. KPI CARDS — DESKTOP
   ============================================================ */

.crm-kpi-grid{
    display:grid;

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

    gap:12px;

    margin-bottom:16px;
}

.crm-kpi-card{
    min-width:0;

    min-height:129px;

    padding:15px 16px;

    border:1px solid var(--crm-border);

    border-radius:13px;

    background:#fff;

    box-shadow:var(--crm-shadow);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.crm-kpi-card:hover{
    transform:translateY(-2px);

    box-shadow:var(--crm-shadow-hover);
}

.crm-kpi-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:8px;
}

.crm-kpi-icon{
    width:30px;
    height:30px;

    flex:0 0 30px;

    display:grid;
    place-items:center;

    border-radius:8px;

    font-size:13px;
    line-height:1;
    font-weight:850;
}

.crm-kpi-blue{
    color:#3764dd;
    background:#eaf0ff;
}

.crm-kpi-red{
    color:#dc3d61;
    background:#ffedf1;
}

.crm-kpi-orange{
    color:#bd7600;
    background:#fff2d8;
}

.crm-kpi-green{
    color:#17845f;
    background:#e6f8ef;
}

.crm-kpi-money{
    color:#17845f;
    background:#e6f8ef;
}

.crm-growth{
    display:inline-flex;
    align-items:center;

    min-height:18px;

    padding:0 6px;

    border-radius:20px;

    font-size:7px;
    font-weight:850;

    white-space:nowrap;
}

.crm-growth-positive{
    color:#16845d;
    background:#eaf8f1;
}

.crm-growth-negative{
    color:#db4263;
    background:#fff0f3;
}

.crm-kpi-number{
    display:block;

    margin-top:13px;

    color:#172238;

    font-size:23px;
    line-height:1;

    font-weight:850;

    letter-spacing:-.7px;
}

.crm-kpi-title{
    display:block;

    margin-top:6px;

    color:#49556a;

    font-size:9px;
    line-height:1.1;
    font-weight:750;
}

.crm-kpi-description{
    display:block;

    margin-top:5px;

    color:#9ba4b3;

    font-size:7px;
    line-height:1;
}


/* ============================================================
   14. GENERIC CARDS
   ============================================================ */

.crm-card{
    min-width:0;

    padding:17px;

    border:1px solid var(--crm-border);

    border-radius:14px;

    background:#fff;

    box-shadow:var(--crm-shadow);
}

.crm-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:15px;

    margin-bottom:13px;
}

.crm-card-header h3{
    color:#172137;

    font-size:11px;
    line-height:1.2;
    font-weight:850;
}

.crm-card-header p{
    margin-top:3px;

    color:#9aa3b3;

    font-size:8px;
    line-height:1.3;
}

.crm-view-link{
    flex:0 0 auto;

    padding:2px 0;

    color:#3565eb;
    background:transparent;

    font-size:8px;
    font-weight:750;
}


/* ============================================================
   15. MAIN ANALYTICS
   ============================================================ */

.crm-main-analytics{
    display:grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(320px,.85fr);

    gap:13px;

    margin-bottom:13px;
}


/* ============================================================
   16. PERIOD SWITCHER
   ============================================================ */

.crm-period-switcher{
    display:flex;

    gap:3px;

    padding:3px;

    border-radius:7px;

    background:#f5f7fb;
}

.crm-period-switcher button{
    padding:5px 7px;

    border-radius:5px;

    color:#7d8798;
    background:transparent;

    font-size:7px;
    font-weight:650;
}

.crm-period-switcher button:hover{
    color:#4266d6;
}

.crm-period-switcher .crm-period-active{
    color:#3261e7;
    background:#fff;

    box-shadow:
        0 2px 7px rgba(16,24,40,.06);
}


/* ============================================================
   17. LEADS CHART
   ============================================================ */

.crm-chart{
    height:245px;

    display:flex;

    position:relative;
}

.crm-chart-y-axis{
    width:32px;

    flex:0 0 32px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:5px 0 27px;

    color:#a4adbc;

    font-size:7px;

    text-align:right;
}

.crm-chart-area{
    position:relative;

    flex:1;

    min-width:0;

    margin-left:9px;

    overflow:hidden;
}

.crm-chart-gridline{
    height:1px;

    position:relative;

    margin-bottom:45px;

    background:#edf0f5;
}

.crm-chart-gridline:first-child{
    margin-top:5px;
}

.crm-line-chart{
    position:absolute;

    top:5px;
    left:0;
    right:0;

    width:100%;
    height:205px;

    overflow:visible;
}

.crm-chart-tooltip{
    position:absolute;

    top:7px;
    right:4px;

    display:flex;
    flex-direction:column;

    padding:6px 8px;

    border:1px solid #e7eaf0;

    border-radius:7px;

    background:#fff;

    box-shadow:
        0 5px 18px rgba(16,24,40,.08);
}

.crm-chart-tooltip strong{
    color:#344054;

    font-size:8px;
    font-weight:800;
}

.crm-chart-tooltip span{
    margin-top:1px;

    color:#9aa3b3;

    font-size:7px;
}

.crm-chart-labels{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    display:flex;
    justify-content:space-between;

    color:#98a2b3;

    font-size:7px;
}


/* ============================================================
   18. FOLLOW-UP DESKTOP
   ============================================================ */

.crm-followup-list{
    display:flex;
    flex-direction:column;

    gap:0;
}

.crm-followup-item{
    min-height:47px;

    display:flex;
    align-items:center;

    gap:8px;

    padding:7px 4px;

    border-bottom:1px solid #f0f2f6;
}

.crm-followup-item:last-child{
    border-bottom:0;
}

.crm-contact-avatar{
    width:30px;
    height:30px;

    flex:0 0 30px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:8px;
    line-height:1;
    font-weight:850;
}

.crm-contact-blue{
    color:#3262d7;
    background:#e9efff;
}

.crm-contact-purple{
    color:#7144d2;
    background:#f0eaff;
}

.crm-contact-orange{
    color:#b87505;
    background:#fff0d5;
}

.crm-contact-green{
    color:#17835f;
    background:#e4f8ef;
}

.crm-contact-teal{
    color:#168e89;
    background:#e1f7f5;
}

.crm-followup-person{
    min-width:0;
    flex:1;

    display:flex;
    flex-direction:column;
}

.crm-followup-person strong{
    overflow:hidden;

    color:#344054;

    font-size:8px;
    line-height:1.15;
    font-weight:750;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.crm-followup-person span{
    overflow:hidden;

    margin-top:2px;

    color:#9aa3b3;

    font-size:7px;
    line-height:1;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.crm-followup-time{
    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:2px;
}

.crm-followup-time strong{
    color:#475467;

    font-size:7px;
    line-height:1;
}

.crm-lead-hot,
.crm-lead-warm,
.crm-lead-cold{
    display:inline-flex;
    align-items:center;

    min-height:15px;

    padding:0 5px;

    border-radius:12px;

    font-size:6px;
    line-height:1;
    font-weight:850;
}

.crm-lead-hot{
    color:#d63c5c;
    background:#fff0f3;
}

.crm-lead-warm{
    color:#b96e00;
    background:#fff2d9;
}

.crm-lead-cold{
    color:#3564cf;
    background:#eaf0ff;
}


/* ============================================================
   19. LOWER ANALYTICS
   ============================================================ */

.crm-lower-analytics{
    display:grid;

    grid-template-columns:
        minmax(300px,.72fr)
        minmax(0,1.28fr);

    gap:13px;
}


/* ============================================================
   20. SOURCE DISTRIBUTION
   ============================================================ */

.crm-source-content{
    min-height:135px;

    display:flex;
    align-items:center;

    gap:25px;
}

.crm-donut-wrapper{
    flex:0 0 135px;

    display:grid;
    place-items:center;
}

.crm-donut{
    width:126px;
    height:126px;

    position:relative;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        conic-gradient(
            #396cf5 0 52%,
            #20a783 52% 77%,
            #f1a315 77% 92%,
            #8254ed 92% 100%
        );
}

.crm-donut::after{
    content:"";

    position:absolute;

    width:78px;
    height:78px;

    border-radius:50%;

    background:#fff;
}

.crm-donut-center{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.crm-donut-center strong{
    color:#263248;

    font-size:14px;
    line-height:1;
    font-weight:850;
}

.crm-donut-center span{
    margin-top:3px;

    color:#98a2b3;

    font-size:7px;
}

.crm-source-list{
    flex:1;

    display:flex;
    flex-direction:column;

    gap:9px;
}

.crm-source-list > div{
    display:flex;
    align-items:center;
    justify-content:space-between;

    color:#657086;

    font-size:8px;
}

.crm-source-list > div span{
    display:flex;
    align-items:center;

    gap:6px;
}

.crm-source-list strong{
    color:#475467;

    font-size:8px;
}

.crm-source-dot{
    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;
}

.crm-source-website{
    background:#396cf5;
}

.crm-source-whatsapp{
    background:#20a783;
}

.crm-source-referral{
    background:#f1a315;
}

.crm-source-walkin{
    background:#8254ed;
}


/* ============================================================
   21. RECENT LEADS TABLE
   ============================================================ */

.crm-recent-table-wrapper{
    width:100%;

    overflow:auto;
}

.crm-recent-table{
    width:100%;

    min-width:560px;

    border-collapse:collapse;
}

.crm-recent-table th{
    padding:7px;

    color:#98a2b3;

    border-bottom:1px solid #eceff4;

    font-size:6px;
    line-height:1;
    font-weight:850;

    letter-spacing:.55px;

    text-align:left;

    white-space:nowrap;
}

.crm-recent-table td{
    padding:8px 7px;

    color:#5d687c;

    border-bottom:1px solid #f0f2f6;

    font-size:7px;
    line-height:1.1;

    white-space:nowrap;
}

.crm-recent-table tbody tr:hover{
    background:#fafbfe;
}

.crm-status{
    display:inline-flex;
    align-items:center;

    min-height:18px;

    padding:0 6px;

    border-radius:20px;

    font-size:6px;
    line-height:1;
    font-weight:850;
}

.crm-status-hot{
    color:#d63c5c;
    background:#fff0f3;
}

.crm-status-warm{
    color:#ae6d00;
    background:#fff2d9;
}


/* ============================================================
   22. MOBILE-ONLY ELEMENTS — DEFAULT OFF
   ============================================================ */

.crm-mobile-quick-stats,
.crm-mobile-followups,
.crm-mobile-pipeline,
.crm-mobile-bottom-nav,
.crm-mobile-lead-list{
    display:none;
}


/* ============================================================
   23. SEARCH / MODAL SYSTEM
   ============================================================ */

.crm-overlay{
    position:fixed;

    inset:0;

    z-index:500;

    display:none;

    align-items:center;
    justify-content:center;

    padding:20px;

    background:
        rgba(5,10,23,.48);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.crm-overlay.crm-overlay-open{
    display:flex;
}

.crm-search-modal,
.crm-lead-modal{
    width:min(540px,100%);

    max-height:90vh;

    overflow:auto;

    padding:22px;

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 25px 80px rgba(0,0,0,.18);

    animation:crmModalIn .18s ease both;
}

@keyframes crmModalIn{
    from{
        opacity:0;
        transform:translateY(8px) scale(.985);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.crm-search-modal-header,
.crm-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:15px;
}

.crm-search-modal-header span,
.crm-modal-header span{
    color:#396cf5;

    font-size:8px;
    font-weight:850;

    letter-spacing:1px;
}

.crm-search-modal-header h3,
.crm-modal-header h3{
    margin-top:3px;

    color:#182238;

    font-size:18px;
    line-height:1.2;
    font-weight:850;
}

.crm-search-modal-header button,
.crm-modal-header > button{
    width:31px;
    height:31px;

    flex:0 0 31px;

    display:grid;
    place-items:center;

    border-radius:8px;

    color:#667085;
    background:#f3f5f9;

    font-size:18px;
}

.crm-search-input-container{
    height:45px;

    display:flex;
    align-items:center;

    gap:9px;

    margin-top:18px;
    padding:0 11px;

    border:1px solid #dfe4ec;

    border-radius:9px;

    background:#fff;
}

.crm-search-input-container > span{
    color:#98a2b3;
}

.crm-search-input-container input{
    width:100%;
    height:100%;

    padding:0;

    border:0;

    color:#344054;
    background:transparent;

    font-size:11px;
}

.crm-search-input-container input::placeholder{
    color:#a0a8b7;
}

.crm-search-modal > p{
    margin-top:9px;

    color:#98a2b3;

    font-size:8px;
}


/* ============================================================
   24. ADD LEAD FORM
   ============================================================ */

.crm-form-grid{
    display:grid;

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

    gap:12px;

    margin-top:20px;
}

.crm-lead-modal label{
    display:flex;
    flex-direction:column;

    gap:5px;
}

.crm-lead-modal label > span{
    color:#475467;

    font-size:9px;
    font-weight:750;
}

.crm-lead-modal input,
.crm-lead-modal textarea{
    width:100%;

    border:1px solid #dfe4ec;

    border-radius:8px;

    padding:9px 10px;

    color:#344054;
    background:#fff;

    outline:0;

    font-size:10px;

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}

.crm-lead-modal input{
    height:38px;
}

.crm-lead-modal textarea{
    resize:vertical;
    min-height:90px;
}

.crm-lead-modal input:focus,
.crm-lead-modal textarea:focus{
    border-color:#7190f7;

    box-shadow:
        0 0 0 3px rgba(63,109,246,.09);
}

.crm-lead-modal input::placeholder,
.crm-lead-modal textarea::placeholder{
    color:#a0a8b7;
}

.crm-form-full{
    margin-top:12px;
}

.crm-form-actions{
    display:flex;
    justify-content:flex-end;

    gap:8px;

    margin-top:16px;
}


/* ============================================================
   25. MOBILE SIDEBAR OVERLAY
   ============================================================ */

.crm-sidebar-overlay{
    display:none;
}


/* ============================================================
   26. TABLET
   ============================================================ */

@media(max-width:1100px){

    :root{
        --crm-sidebar-width:200px;
    }

    .crm-sidebar{
        width:var(--crm-sidebar-width);
    }

    .crm-main{
        width:calc(100% - var(--crm-sidebar-width));

        margin-left:var(--crm-sidebar-width);
    }

    .crm-kpi-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .crm-main-analytics{
        grid-template-columns:
            minmax(0,1.3fr)
            minmax(280px,.8fr);
    }

    .crm-lower-analytics{
        grid-template-columns:1fr;
    }

    .crm-source-content{
        justify-content:center;
    }
}


/* ============================================================
   27. MOBILE — PRIMARY RESPONSIVE MODE
   ============================================================ */

@media(max-width:760px){

    /* --------------------------------------------------------
       Mobile app shell
       -------------------------------------------------------- */

    .crm-app{
        display:block;

        width:100%;
        min-height:100dvh;

        background:#080e1f;
    }

    .crm-main{
        width:100%;
        max-width:100%;
        min-width:0;

        min-height:100dvh;

        margin-left:0;

        padding-bottom:86px;

        overflow-x:hidden;

        background:
            linear-gradient(
                180deg,
                #090f20 0%,
                #0c1428 100%
            );
    }


    /* --------------------------------------------------------
       Mobile sidebar
       -------------------------------------------------------- */

    .crm-sidebar{
        left:-280px;

        width:270px;

        transition:left .22s ease;

        box-shadow:
            15px 0 50px rgba(0,0,0,.32);
    }

    .crm-sidebar.crm-sidebar-open{
        left:0;
    }

    .crm-sidebar-overlay{
        display:none;
    }

    .crm-sidebar-overlay.crm-sidebar-overlay-open{
        position:fixed;

        inset:0;

        z-index:90;

        display:block;

        background:
            rgba(4,8,19,.56);
    }


    /* --------------------------------------------------------
       Mobile topbar
       -------------------------------------------------------- */

    .crm-topbar{
        height:62px;

        padding:0 14px;

        background:
            rgba(9,15,31,.94);

        border-bottom:
            1px solid rgba(255,255,255,.065);

        color:#fff;
    }

    .crm-desktop-page-title{
        display:none;
    }

    .crm-mobile-brand{
        display:flex;
        align-items:center;

        gap:8px;
    }

    .crm-mobile-menu{
        width:35px;
        height:35px;

        display:grid;
        place-items:center;

        border-radius:9px;

        color:#c8d1e3;
        background:#141e36;

        font-size:17px;
    }

    .crm-mobile-logo{
        width:25px;
        height:25px;

        display:grid;
        place-items:center;

        border-radius:7px;

        color:#fff;

        background:
            linear-gradient(
                135deg,
                #3c72ff,
                #7548ef
            );

        font-size:7px;
        font-weight:900;
    }

    .crm-mobile-brand strong{
        color:#fff;

        font-size:14px;
        line-height:1;
        font-weight:800;
    }

    .crm-topbar-actions{
        margin-left:auto;

        gap:7px;
    }

    .crm-search-button{
        width:35px;
        height:35px;

        justify-content:center;

        padding:0;

        border-color:
            rgba(255,255,255,.06);

        color:#b9c4d9;
        background:#141e36;

        box-shadow:none;
    }

    .crm-search-placeholder,
    .crm-search-button kbd{
        display:none;
    }

    .crm-notification-button{
        width:35px;
        height:35px;

        color:#b9c4d9;
        background:#141e36;

        border-color:
            rgba(255,255,255,.06);
    }

    .crm-topbar-avatar{
        width:35px;
        height:35px;

        font-size:11px;
    }


    /* --------------------------------------------------------
       Mobile dashboard
       -------------------------------------------------------- */

    .crm-dashboard{
        width:100%;
        max-width:none;
        min-width:0;

        margin:0;

        padding:
            20px 14px 25px;
    }


    /* --------------------------------------------------------
       Mobile welcome
       -------------------------------------------------------- */

    .crm-welcome{
        display:none;
    }

    .crm-mobile-welcome{
        display:block;

        margin-bottom:15px;

        color:#fff;
    }

    .crm-mobile-welcome > span{
        display:block;

        color:#fff;

        font-size:19px;
        line-height:1.2;
        font-weight:850;

        letter-spacing:-.55px;
    }

    .crm-mobile-welcome p{
        margin-top:5px;

        color:#8492ad;

        font-size:10px;
    }

    .crm-mobile-welcome strong{
        color:#fff;
    }


    /* --------------------------------------------------------
       Mobile compact stats
       -------------------------------------------------------- */

    .crm-mobile-quick-stats{
        display:grid;

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

        gap:5px;

        margin-bottom:12px;
    }

    .crm-mobile-quick-stats > div{
        min-width:0;

        min-height:48px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        padding:6px 3px;

        border:
            1px solid rgba(255,255,255,.075);

        border-radius:10px;

        background:
            linear-gradient(
                145deg,
                #111a31,
                #10182c
            );
    }

    .crm-mobile-quick-stats span{
        overflow:hidden;

        color:#7d8aa5;

        font-size:6px;
        line-height:1;

        font-weight:650;

        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .crm-mobile-quick-stats strong{
        margin-top:4px;

        color:#fff;

        font-size:11px;
        line-height:1;

        font-weight:850;

        white-space:nowrap;
    }

    .crm-mobile-stat-alert strong{
        color:#ff6484;
    }


    /* --------------------------------------------------------
       MOBILE KPI CARDS
       LOCKED DESIGN: 2-column KPI grid.
       These are intentionally visible on mobile.
       -------------------------------------------------------- */

    .crm-kpi-grid{
        display:grid!important;

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

        gap:10px;

        margin-bottom:12px;
    }

    .crm-kpi-card{
        min-width:0;
        min-height:112px;

        padding:14px;

        border:
            1px solid #e7ebf2;

        border-radius:15px;

        background:#fff;

        box-shadow:
            0 7px 22px rgba(20,30,50,.07);
    }

    .crm-kpi-card:hover{
        transform:none;
        box-shadow:
            0 7px 22px rgba(20,30,50,.07);
    }

    .crm-kpi-icon{
        width:30px;
        height:30px;

        flex-basis:30px;

        border-radius:9px;

        font-size:13px;
    }

    .crm-growth{
        min-height:18px;
        padding:0 6px;
        font-size:7px;
    }

    .crm-kpi-number{
        margin-top:13px;

        font-size:23px;
        letter-spacing:-.7px;
    }

    .crm-kpi-title{
        margin-top:6px;

        font-size:9px;
    }

    .crm-kpi-description{
        margin-top:5px;

        font-size:7px;
    }


    /* --------------------------------------------------------
       Desktop analytics completely OFF on mobile.
       Dedicated mobile cards are used.
       --------------------------------------------------------

    .crm-main-analytics,
    .crm-lower-analytics{
        display:none!important;
    }


    /* --------------------------------------------------------
       Today's follow-ups
       -------------------------------------------------------- */

    .crm-mobile-followups{
        display:block;

        margin-bottom:10px;

        padding:15px;

        border:
            1px solid rgba(255,255,255,.075);

        border-radius:15px;

        color:#fff;

        background:
            linear-gradient(
                145deg,
                #111b34,
                #10182e
            );

        box-shadow:
            0 8px 30px rgba(0,0,0,.15);
    }

    .crm-mobile-followups .crm-card-header,
    .crm-mobile-pipeline .crm-card-header{
        margin-bottom:12px;
    }

    .crm-mobile-followups .crm-card-header h3,
    .crm-mobile-pipeline .crm-card-header h3{
        color:#fff;
    }

    .crm-mobile-followups .crm-card-header p{
        color:#7887a4;
    }

    .crm-mobile-view-all{
        flex:0 0 auto;

        padding:2px 0;

        color:#5b8cff;

        background:transparent;

        font-size:8px;
        font-weight:750;
    }

    .crm-mobile-followup-list{
        display:flex;
        flex-direction:column;

        gap:6px;
    }

    .crm-mobile-followup{
        min-width:0;

        display:flex;
        align-items:center;

        gap:8px;

        padding:9px;

        border:
            1px solid rgba(255,255,255,.045);

        border-radius:10px;

        background:
            linear-gradient(
                145deg,
                #18233e,
                #162039
            );
    }

    .crm-mobile-followup > div:nth-child(2){
        min-width:0;

        flex:1;

        display:flex;
        flex-direction:column;
    }

    .crm-mobile-followup > div:nth-child(2) strong{
        overflow:hidden;

        color:#fff;

        font-size:8px;
        line-height:1.15;
        font-weight:750;

        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .crm-mobile-followup > div:nth-child(2) span{
        overflow:hidden;

        margin-top:2px;

        color:#8391ac;

        font-size:7px;
        line-height:1;

        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .crm-mobile-followup-right{
        display:flex;
        flex-direction:column;
        align-items:flex-end;

        gap:3px;
    }

    .crm-mobile-followup-right strong{
        color:#dce4f3;

        font-size:7px;
        line-height:1;
    }

    .crm-call-button{
        width:29px;
        height:29px;

        flex:0 0 29px;

        display:grid;
        place-items:center;

        border-radius:9px;

        color:#3bd198;
        background:#163b31;

        font-size:11px;
    }

    .crm-call-button:active{
        transform:scale(.94);
    }

    .crm-mobile-followups-button{
        width:100%;
        height:36px;

        margin-top:9px;

        border-radius:9px;

        color:#fff;

        background:
            linear-gradient(
                105deg,
                #356df6,
                #7648ef
            );

        box-shadow:
            0 7px 17px rgba(66,75,220,.20);

        font-size:9px;
        font-weight:750;
    }


    /* --------------------------------------------------------
       My Pipeline
       -------------------------------------------------------- */

    .crm-mobile-pipeline{
        display:block;

        padding:15px;

        color:#fff;

        border:
            1px solid rgba(255,255,255,.075);

        border-radius:15px;

        background:
            linear-gradient(
                145deg,
                #111b34,
                #10182e
            );

        box-shadow:
            0 8px 30px rgba(0,0,0,.14);
    }

    .crm-mobile-pipeline-grid{
        display:grid;

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

        gap:6px;
    }

    .crm-pipeline-box{
        min-height:63px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        border:
            1px solid rgba(255,255,255,.05);

        border-radius:9px;
    }

    .crm-pipeline-box strong{
        color:#fff;

        font-size:16px;
        line-height:1;
        font-weight:850;
    }

    .crm-pipeline-box span{
        margin-top:4px;

        color:#9aa7bf;

        font-size:7px;
        line-height:1;
    }

    .crm-pipeline-new{
        background:
            linear-gradient(
                145deg,
                #17365c,
                #142845
            );
    }

    .crm-pipeline-hot{
        background:
            linear-gradient(
                145deg,
                #452333,
                #281a2a
            );
    }

    .crm-pipeline-quotation{
        background:
            linear-gradient(
                145deg,
                #4b3620,
                #2b241a
            );
    }

    .crm-pipeline-negotiation{
        background:
            linear-gradient(
                145deg,
                #292044,
                #201a34
            );
    }


    /* --------------------------------------------------------
       Mobile bottom navigation
       -------------------------------------------------------- */

    .crm-mobile-bottom-nav{
        position:fixed;

        left:9px;
        right:9px;
        bottom:9px;

        z-index:200;

        height:63px;

        display:grid;

        grid-template-columns:
            repeat(5,1fr);

        align-items:center;

        padding:4px 6px;

        border:
            1px solid rgba(255,255,255,.10);

        border-radius:18px;

        background:
            rgba(13,22,43,.95);

        box-shadow:
            0 14px 42px rgba(0,0,0,.34);

        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
    }

    .crm-mobile-nav-item{
        position:relative;

        width:100%;
        height:53px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:3px;

        color:#72809b;

        background:transparent;
    }

    .crm-mobile-nav-item span{
        font-size:16px;
        line-height:1;
    }

    .crm-mobile-nav-item small{
        font-size:7px;
        line-height:1;

        font-weight:750;
    }

    .crm-mobile-nav-item:active{
        transform:scale(.95);
    }

    .crm-mobile-nav-active{
        color:#fff;
    }

    .crm-mobile-nav-active span{
        color:#5d89ff;
    }

    .crm-mobile-add-button{
        width:45px;
        height:45px;

        justify-self:center;

        display:grid;
        place-items:center;

        border-radius:14px;

        color:#fff;

        background:
            linear-gradient(
                135deg,
                #3e70ff,
                #7548ee
            );

        box-shadow:
            0 9px 24px rgba(63,87,236,.42);

        font-size:24px;
        line-height:1;
    }

    .crm-mobile-add-button:active{
        transform:scale(.93);
    }

    .crm-mobile-nav-followups i{
        position:absolute;

        top:3px;
        right:8px;

        min-width:14px;
        height:14px;

        display:grid;
        place-items:center;

        padding:0 3px;

        border-radius:20px;

        color:#fff;
        background:#ef476f;

        font-size:6px;
        line-height:1;
        font-style:normal;
        font-weight:850;
    }


    /* --------------------------------------------------------
       Mobile lead list
       -------------------------------------------------------- */

    .crm-mobile-lead-list{
        display:none;
    }


    /* --------------------------------------------------------
       Mobile modal
       -------------------------------------------------------- */

    .crm-overlay{
        align-items:flex-end;

        padding:10px;
    }

    .crm-search-modal,
    .crm-lead-modal{
        width:100%;

        max-height:90dvh;

        border-radius:
            18px 18px 12px 12px;

        padding:18px;
    }

    .crm-form-grid{
        grid-template-columns:1fr;
    }

    .crm-form-actions{
        padding-bottom:2px;
    }
}


/* ============================================================
   28. SMALL MOBILE — 360px
   ============================================================ */

@media(max-width:380px){

    .crm-dashboard{
        padding-left:10px;
        padding-right:10px;
    }

    .crm-mobile-welcome > span{
        font-size:18px;
    }

    .crm-mobile-quick-stats{
        gap:4px;
    }

    .crm-mobile-quick-stats > div{
        min-height:46px;
    }

    .crm-mobile-quick-stats span{
        font-size:5.5px;
    }

    .crm-mobile-quick-stats strong{
        font-size:10px;
    }

    .crm-mobile-followups,
    .crm-mobile-pipeline{
        padding:13px;
    }

    .crm-mobile-followup{
        padding:8px;
    }

    .crm-call-button{
        width:27px;
        height:27px;

        flex-basis:27px;
    }

    .crm-mobile-bottom-nav{
        left:6px;
        right:6px;
        bottom:6px;
    }
}


/* ============================================================
   29. VERY SMALL MOBILE — 330px
   ============================================================ */

@media(max-width:340px){

    .crm-dashboard{
        padding-left:8px;
        padding-right:8px;
    }

    .crm-mobile-quick-stats > div{
        border-radius:8px;
    }

    .crm-mobile-quick-stats span{
        font-size:5px;
    }

    .crm-mobile-quick-stats strong{
        font-size:9px;
    }

    .crm-mobile-pipeline-grid{
        gap:4px;
    }

    .crm-pipeline-box{
        min-height:58px;
    }

    .crm-pipeline-box strong{
        font-size:14px;
    }

    .crm-mobile-bottom-nav{
        height:60px;
    }
}


/* ============================================================
   30. DESKTOP LARGE SCREEN
   ============================================================ */

@media(min-width:1500px){

    .crm-dashboard{
        padding-left:34px;
        padding-right:34px;
    }

    .crm-topbar{
        padding-left:34px;
        padding-right:34px;
    }

    .crm-kpi-card{
        min-height:132px;
    }
}


/* ============================================================
   31. ACCESSIBILITY / MOTION
   ============================================================ */

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

    .crm-app *,
    .crm-app *::before,
    .crm-app *::after{
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important;
    }
}


/* ============================================================
   32. SAFE AREA — MOBILE DEVICES
   ============================================================ */

@media(max-width:760px){

    .crm-main{
        padding-bottom:
            calc(86px + env(safe-area-inset-bottom));
    }

    .crm-mobile-bottom-nav{
        bottom:
            calc(9px + env(safe-area-inset-bottom));
    }
}