/* =========================================================
   PAGE
========================================================= */

.rcPageContainer{

    padding:16px 18px;
}

/* =========================================================
   HEADER
========================================================= */

.rcPageHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-bottom:16px;
}

.rcPageTitle{

    margin:0;

    font-size:28px;

    font-weight:800;

    color:var(--headingcolor);

    line-height:1.1;
}

.rcPageText{

    margin-top:4px;

    font-size:12px;

    color:var(--mutedtext);
}

/* =========================================================
   TOOLBAR
========================================================= */

.rcTableToolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    background:#fff;

    border:1px solid #ececf4;

    border-radius:18px;

    padding:12px;

    margin-bottom:14px;
}

.rcToolbarLeft,
.rcToolbarRight{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;
}

/* =========================================================
   SEARCH
========================================================= */

.rcTableSearch{

    width:260px;

    height:42px;

    background:#f7f8fc;

    border:1px solid #ececf4;

    border-radius:14px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 14px;
}

.rcTableSearch i{

    font-size:16px;

    color:var(--mutedtext);
}

.rcTableSearch input{

    width:100%;

    border:none;

    background:none;

    outline:none;

    font-size:12px;

    color:var(--headingcolor);
}

/* =========================================================
   SELECTS
========================================================= */

.rcTableSelect{

    height:42px;

    min-width:140px;

    border:1px solid #ececf4;

    background:#f7f8fc;

    border-radius:14px;

    padding:0 14px;

    outline:none;

    font-size:12px;

    color:var(--headingcolor);
}

/* =========================================================
   TABLE WRAP
========================================================= */

.rcTableWrap{

    background:#fff;

    border:1px solid #ececf4;

    border-radius:20px;

    overflow:hidden;
}

/* =========================================================
   TABLE
========================================================= */

.rcDataTable{

    width:100%;

    border-collapse:collapse;
}

.rcDataTable thead th{

    background:#fafbff;

    border-bottom:1px solid #ececf4;

    padding:14px 14px;

    font-size:10px;

    font-weight:700;

    color:#8d95a5;

    text-transform:uppercase;

    letter-spacing:.4px;

    white-space:nowrap;
}

.rcDataTable tbody td{

    padding:12px 14px;

    border-bottom:1px solid #f3f4f8;

    vertical-align:middle;
}

.rcDataTable tbody tr{

    transition:var(--smooth);

    cursor:pointer;
}

.rcDataTable tbody tr:hover{

    background:#fafbff;
}

/* =========================================================
   COMPANY CELL
========================================================= */

.rcCompanyCell{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:280px;
}

.rcCompanyLogo{

    width:40px;

    height:40px;

    border-radius:14px;

    background:var(--brand-gradient);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

    flex-shrink:0;
}

.rcCompanyInfo{

    min-width:0;
}
.rcCompanyInfo h4{
    font-size: 1rem;
}

.rcCompanyLink{

    display:block;

    font-size:13px;

    font-weight:700;

    color:var(--headingcolor);

    text-decoration:none;

    margin-bottom:3px;

    line-height:1.3;
}

.rcCompanyLink:hover{

    color:var(--maincolor);
}

.rcSubText{

    display:block;

    font-size:11px;

    color:var(--mutedtext);

    line-height:1.4;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

/* =========================================================
   DIRECTOR CHIPS
========================================================= */

.rcDirectorChips{

    display:flex;

    align-items:center;

    gap:6px;

    flex-wrap:wrap;

    max-width:220px;
}

.rcDirectorChip{

    height:28px;

    padding:0 10px;

    border:none;

    background:#f3f5fb;

    border-radius:999px;

    font-size:11px;

    font-weight:600;

    color:var(--headingcolor);

    transition:var(--smooth);

    max-width:180px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.rcDirectorChip:hover{

    background:var(--lightprimary);

    color:var(--maincolor);
}

/* =========================================================
   MINI INFO
========================================================= */

.rcMiniInfo strong{

    display:block;

    font-size:12px;

    color:var(--headingcolor);

    margin-bottom:3px;

    line-height:1.3;
}

.rcMiniInfo span{

    font-size:11px;

    color:var(--mutedtext);
}

/* =========================================================
   BADGES
========================================================= */

.rcStatusBadge,
.rcPriorityBadge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:28px;

    padding:0 10px;

    border-radius:999px;

    font-size:10px;

    font-weight:700;
}

/* =========================================================
   STATUS
========================================================= */

.status-new{

    background:#edf2ff;

    color:#3557ff;
}

.status-contacted{

    background:#fff2e8;

    color:#ff7b00;
}

.status-replied{

    background:#f3ecff;

    color:#6d28ff;
}

.status-qualified{

    background:#e9f7ff;

    color:#0c7cd5;
}

.status-won{

    background:#e9fff1;

    color:#159a55;
}

.status-lost{

    background:#ffecec;

    color:#df3a3a;
}

/* =========================================================
   PRIORITY
========================================================= */

.priority-hot{

    background:#ffe7e7;

    color:#d92d20;
}

.priority-high{

    background:#fff2e8;

    color:#ff6b00;
}

.priority-medium{

    background:#f3ecff;

    color:#6d28ff;
}

.priority-low{

    background:#eef4ff;

    color:#457bff;
}

/* =========================================================
   ACTIVITY
========================================================= */

.rcActivityMini{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;
}

.rcActivityMini span{

    height:26px;

    padding:0 8px;

    border-radius:999px;

    background:#f5f7fb;

    display:flex;

    align-items:center;

    gap:5px;

    font-size:10px;

    font-weight:600;

    color:#697386;
}

.rcActivityMini i{

    font-size:12px;
}

/* =========================================================
   ASSIGNED
========================================================= */

.rcAssignedUser{

    font-size:12px;

    font-weight:600;

    color:var(--headingcolor);
}

/* =========================================================
   EMPTY
========================================================= */

.rcEmptyState{

    padding:50px 20px;

    text-align:center;

    font-size:13px;

    color:var(--mutedtext);
}

/* =========================================================
   LOADER
========================================================= */

.rcTableLoader{

    height:240px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.rcTableLoader i{

    font-size:30px;

    color:var(--maincolor);

    animation:spin 1s linear infinite;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

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

@media(max-width:991px){

    .rcPageHeader{

        flex-direction:column;

        align-items:flex-start;
    }

    .rcTableToolbar{

        flex-direction:column;

        align-items:stretch;
    }

    .rcToolbarLeft,
    .rcToolbarRight{

        width:100%;
    }

    .rcTableSearch{

        width:100%;
    }

    .rcTableSelect{

        flex:1;
    }

}

/* =========================================================
   TOOLBAR
========================================================= */

.rcTableToolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    background:#fff;

    border:1px solid #ececf4;

    border-radius:20px;

    padding:14px;

    margin-bottom:14px;
}

.rcToolbarLeft,
.rcToolbarRight{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;
}

/* =========================================================
   INPUT BOX
========================================================= */

.inputBox{

    position:relative;

    min-width:180px;
}

.inputBox input,
.inputBox select{

    width:100%;

    height:42px;

    border:1px solid #ececf4;

    background:#f8f9fd;

    border-radius:14px;

    padding:0 38px 0 14px;

    outline:none;

    font-size:12px;

    color:var(--headingcolor);

    transition:var(--smooth);

    appearance:none;
}

.inputBox input:focus,
.inputBox select:focus{

    border-color:#d8ccff;

    background:#fff;

    box-shadow:
    0 0 0 4px rgba(122,31,255,.06);
}

.inputBox .inputIcon{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    font-size:15px;

    color:#8f96a8;

    pointer-events:none;
}

/* =========================================================
   SEARCH WIDTH
========================================================= */

.rcSearchInput{

    width:300px;
}

/* =========================================================
   FILTER WIDTHS
========================================================= */

.rcSmallSelect{

    width:150px;
}

.rcLimitSelect{

    width:90px;
}

/* =========================================================
   PAGINATION
========================================================= */

.rcPaginationWrap{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding:14px 18px;

    border-top:1px solid #f1f2f7;

    background:#fff;
}

.rcPaginationInfo{

    font-size:12px;

    color:var(--mutedtext);
}

.rcPagination{

    display:flex;

    align-items:center;

    gap:6px;
}

.rcPagination button{

    width:34px;

    height:34px;

    border:none;

    border-radius:12px;

    background:#f5f6fb;

    color:var(--headingcolor);

    font-size:12px;

    font-weight:700;

    transition:var(--smooth);
}

.rcPagination button:hover{

    background:#ece7ff;

    color:var(--maincolor);
}

.rcPagination button.active{

    background:var(--brand-gradient);

    color:#fff;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:991px){

    .rcTableToolbar{

        flex-direction:column;

        align-items:stretch;
    }

    .rcToolbarLeft,
    .rcToolbarRight{

        width:100%;
    }

    .rcSearchInput{

        width:100%;
    }

    .inputBox{

        flex:1;
    }

}

/* =========================================================
   SERIAL NUMBER
========================================================= */

.rcSerialNumber{

    width:28px;

    height:28px;

    border-radius:10px;

    background:#f3f5fb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

    color:var(--headingcolor);
}