/* =========================================================
   GLOBAL MODAL
========================================================= */

.rcGlobalModal {

    border: none;

    border-radius: 20px;

    overflow: hidden;
}

/* =========================================================
   PROFILE WRAP
========================================================= */

.rcProfileWrap {

    background: #f8f9fd;
}

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

.rcProfileHeader {

    height: 80px;

    padding: 0 16px;

    background: #fff;

    border-bottom: 1px solid #ececf4;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;
}

.rcProfileLeft {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}

.rcProfileLogo {

    width: 42px;

    height: 42px;

    border-radius: 14px;

    background: var(--brand-gradient);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    font-weight: 700;

    flex-shrink: 0;
}

.rcProfileTitle {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    color: var(--headingcolor);

    line-height: 1.2;
}

.rcProfileMeta {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: 4px;
}

.rcProfileMeta span {

    font-size: 11px;

    color: var(--mutedtext);

    background: #f3f4fa;

    border-radius: 999px;

    padding: 3px 10px;
}

/* =========================================================
   ACTIONS
========================================================= */

.rcProfileActions {

    display: flex;

    align-items: center;

    gap: 8px;
}

.rcIconBtn {

    width: 36px;

    height: 36px;

    border: none;

    border-radius: 12px;

    background: #f3f4fa;

    color: var(--headingcolor);

    font-size: 16px;

    transition: var(--smooth);
}

.rcIconBtn:hover {

    background: var(--maincolor);

    color: #fff;
}

/* =========================================================
   BODY
========================================================= */

.rcProfileBody {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 300px;

    gap: 14px;

    padding: 14px;
}

/* =========================================================
   CARDS
========================================================= */

.rcProfileCard {

    background: #fff;

    border-radius: 18px;

    padding: 14px;

    margin-bottom: 14px;

    border: 1px solid #efeff6;
}

.rcCardHead {

    font-size: 14px;

    font-weight: 700;

    color: var(--headingcolor);

    margin-bottom: 12px;
}

/* =========================================================
   INFO GRID
========================================================= */

.rcInfoGrid {

    display: grid;

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

    gap: 12px;
}

.rcInfoItem label {

    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    text-transform: uppercase;

    color: var(--mutedtext);

    font-weight: 700;
}

.rcInfoItem p {

    margin: 0;

    font-size: 13px;

    color: var(--headingcolor);

    line-height: 1.5;

    word-break: break-word;
}

/* =========================================================
   ADDRESS
========================================================= */

.rcAddressBox {

    font-size: 13px;

    line-height: 1.7;

    color: var(--headingcolor);
}

/* =========================================================
   DIRECTORS
========================================================= */

.rcDirectorGrid {

    display: grid;

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

    gap: 12px;
}

.rcDirectorMiniCard {

    background: #fafbff;

    border: 1px solid #efeff6;

    border-radius: 16px;

    padding: 12px;
}

.rcDirectorMiniCard h5 {

    margin: 0 0 4px;

    font-size: 14px;

    font-weight: 700;
}

.rcDirectorMiniCard h5 a {

    color: var(--headingcolor);

    text-decoration: none;
}

.rcDirectorMiniCard span {

    font-size: 11px;

    color: var(--mutedtext);
}

.rcDirectorData {

    margin-top: 10px;
}

.rcDirectorData p {

    margin: 0 0 5px;

    font-size: 12px;

    color: var(--mutedtext);

    word-break: break-word;
}

.rcDirectorData strong {

    font-size: 13px;

    color: var(--headingcolor);
}

/* =========================================================
   MINI ACTIONS
========================================================= */

.rcMiniActions {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 10px;
}

.rcMiniActionBtn {

    width: 30px;

    height: 30px;

    border: none;

    border-radius: 10px;

    background: #fff;

    color: var(--headingcolor);

    font-size: 14px;
}

/* =========================================================
   TIMELINE
========================================================= */

.rcTimeline {

    position: relative;
}

.rcTimelineItem {

    position: relative;

    padding-left: 22px;

    margin-bottom: 16px;
}

.rcTimelineDot {

    position: absolute;

    left: 0;

    top: 4px;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--maincolor);
}

.rcTimelineContent {

    background: #fafbff;

    border-radius: 14px;

    padding: 12px;

    border: 1px solid #efeff6;
}

.rcTimelineTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
}

.rcTimelineTop strong {

    font-size: 13px;

    color: var(--headingcolor);
}

.rcTimelineTop span {

    font-size: 11px;

    color: var(--mutedtext);
}

.rcTimelineContent p {

    margin: 0;

    font-size: 12px;

    line-height: 1.7;

    color: var(--textcolor);
}

.rcTimelineMeta {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: 10px;
}

.rcTimelineMeta span {

    font-size: 10px;

    background: #f3f4fa;

    color: var(--mutedtext);

    border-radius: 999px;

    padding: 3px 8px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.rcProfileSidebar {

    position: sticky;

    top: 0;

    height: max-content;
}

/* =========================================================
   FORMS
========================================================= */

.rcFormGroup {

    margin-bottom: 12px;
}

.rcFormGroup label {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    color: var(--mutedtext);

    font-weight: 700;
}

.rcInput,
.rcTextarea {

    width: 100%;

    border: none;

    background: #f5f6fb;

    border-radius: 14px;

    padding: 0 12px;

    min-height: 42px;

    outline: none;

    font-size: 13px;

    color: var(--headingcolor);
}

.rcTextarea {

    padding-top: 12px;

    min-height: 90px;

    resize: none;
}

/* =========================================================
   MINI STATS
========================================================= */

.rcMiniStats {

    display: grid;

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

    gap: 10px;
}

.rcMiniStat {

    background: #fafbff;

    border-radius: 14px;

    padding: 12px;

    border: 1px solid #efeff6;
}

.rcMiniStat span {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    color: var(--mutedtext);
}

.rcMiniStat strong {

    font-size: 16px;

    color: var(--headingcolor);
}

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

.rcEmptyState {

    padding: 20px;

    text-align: center;

    font-size: 13px;

    color: var(--mutedtext);
}

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

@media(max-width:1200px) {

    .rcProfileBody {

        grid-template-columns: 1fr;
    }

    .rcInfoGrid {

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

    .rcDirectorGrid {

        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .rcInfoGrid {

        grid-template-columns: 1fr;
    }

    .rcProfileHeader {

        height: auto;

        padding: 14px;

        align-items: flex-start;

        flex-direction: column;
    }
}

/* =========================================================
   TIMELINE PAGES
========================================================= */

.rcTimelinePage{

    background:#f8f9fd;

    min-height:600px;
}

.rcTimelineHeader{

    height:64px;

    padding:0 16px;

    background:#fff;

    border-bottom:1px solid #ececf4;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.rcTimelineHeader h3{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:var(--headingcolor);
}

.rcTimelineHeader span{

    font-size:12px;

    color:var(--mutedtext);
}

/* =========================================================
   SCROLLABLE
========================================================= */

.rcTimelineScrollable{

    max-height:78vh;

    overflow:auto;

    padding:14px;
}

/* =========================================================
   COMM CARD
========================================================= */

.rcCommCard{

    background:#fff;

    border-radius:16px;

    padding:14px;

    margin-bottom:12px;

    border:1px solid #ececf4;
}

.rcCommTop{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

    margin-bottom:10px;
}

.rcCommTop h5{

    margin:0 0 4px;

    font-size:14px;

    font-weight:700;

    color:var(--headingcolor);
}

.rcCommTop span{

    font-size:11px;

    color:var(--mutedtext);
}

.rcCommTop small{

    font-size:11px;

    color:var(--mutedtext);
}

/* =========================================================
   META
========================================================= */

.rcCommMeta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:10px;
}

.rcCommMeta span{

    font-size:10px;

    padding:4px 8px;

    border-radius:999px;

    background:#f3f4fa;

    color:var(--mutedtext);
}

/* =========================================================
   NOTES
========================================================= */

.rcCommNotes{

    font-size:12px;

    line-height:1.7;

    color:var(--textcolor);

    background:#fafbff;

    border-radius:12px;

    padding:10px;
}
/* =========================================================
   ACTIVE TOP BUTTON
========================================================= */

.rcIconBtn.active{

    background:var(--brand-gradient);

    color:#fff;

    box-shadow:
    0 10px 24px rgba(91,17,255,.18);
}

/* =========================================================
   DIRECTOR PROFILE
========================================================= */

.rcDirectorProfile{

    padding:16px;
}

/* =========================================================
   TOP
========================================================= */

.rcDirectorTop{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:14px;

    margin-bottom:16px;
}

.rcDirectorLeft{

    display:flex;

    align-items:center;

    gap:12px;
}

.rcDirectorAvatar{

    width:54px;

    height:54px;

    border-radius:18px;

    background:var(--brand-gradient);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;
}

.rcDirectorLeft h2{

    margin:0 0 6px;

    font-size:20px;

    font-weight:800;
}

.rcDirectorMeta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

.rcDirectorMeta span{

    height:28px;

    padding:0 10px;

    border-radius:999px;

    background:#f4f6fb;

    display:flex;

    align-items:center;

    font-size:11px;

    color:var(--mutedtext);
}

/* =========================================================
   GRID
========================================================= */

.rcDirectorGrid{

    display:grid;

    grid-template-columns:
    minmax(0,1.4fr)
    minmax(320px,.8fr);

    gap:14px;
}

/* =========================================================
   CARD
========================================================= */

.rcMiniCard{

    background:#fff;

    border:1px solid #ececf4;

    border-radius:18px;

    padding:14px;

    margin-bottom:14px;
}

.rcMiniTitle{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:14px;

    font-size:13px;

    font-weight:700;

    color:var(--headingcolor);
}

/* =========================================================
   COMPANY GRID
========================================================= */

.rcCompanyGrid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(220px,1fr));

    gap:10px;
}

.rcCompanyMini{

    border:none;

    background:#f8f9fd;

    border-radius:14px;

    padding:12px;

    text-align:left;

    transition:var(--smooth);
}

.rcCompanyMini:hover{

    background:#f1ebff;
}

.rcCompanyMini strong{

    display:block;

    font-size:12px;

    margin-bottom:5px;

    color:var(--headingcolor);
}

.rcCompanyMini span{

    font-size:11px;

    color:var(--mutedtext);
}

/* =========================================================
   TIMELINE
========================================================= */

.rcTimelineList{

    max-height:620px;

    overflow:auto;

    padding-right:4px;
}

.rcTimelineItem{

    display:flex;

    gap:10px;

    margin-bottom:14px;
}

.rcTimelineDot{

    width:10px;

    height:10px;

    border-radius:50%;

    margin-top:6px;

    flex-shrink:0;
}

.rcTimelineDot.call{

    background:#7c3aed;
}

.rcTimelineDot.update{

    background:#ff6b00;
}

.rcTimelineContent{

    flex:1;

    min-width:0;
}

.rcTimelineTop{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:10px;

    margin-bottom:5px;
}

.rcTimelineTop strong{

    font-size:12px;

    color:var(--headingcolor);
}

.rcTimelineTop small{

    font-size:10px;

    color:var(--mutedtext);

    white-space:nowrap;
}

.rcTimelineText{

    font-size:11px;

    color:var(--mutedtext);

    margin-bottom:6px;
}

.rcTimelineNote{

    background:#f8f9fd;

    border-radius:12px;

    padding:10px;

    font-size:11px;

    line-height:1.7;

    color:var(--textcolor);
}


/* =========================================================
   COMPANY TIMELINE
========================================================= */

.rcTimelinePage{

    padding:24px;

    display:flex;
    flex-direction:column;

    gap:22px;

}

/* =========================================================
   TOP BAR
========================================================= */

.rcTimelineTopBar{

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

    gap:20px;

    flex-wrap:wrap;

}

.rcTimelineTitle h2{

    font-size:28px;
    font-weight:800;

    color:var(--headingcolor);

    margin-bottom:4px;

}

.rcTimelineTitle p{

    color:var(--mutedtext);

    font-size:14px;

    margin:0;

}

/* =========================================================
   FILTERS
========================================================= */

.rcTimelineFilters{

    display:flex;
    align-items:center;
    gap:10px;

    flex-wrap:wrap;

}

.timelineFilterBtn{

    border:none;

    height:42px;

    padding:0 18px;

    border-radius:var(--capsule);

    background:#fff;

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

    color:var(--textcolor);

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

    transition:var(--smooth);

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

    gap:8px;

    cursor:pointer;

}

.timelineFilterBtn:hover{

    background:var(--lightprimary);

    color:var(--maincolor);

    border-color:var(--maincolor);

    transform:translateY(-1px);

}

.timelineFilterBtn.active{

    background:var(--btn-secondary-bg);

    color:#fff;

    border-color:transparent;

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

}

/* =========================================================
   WRAPPER
========================================================= */

.rcTimelineWrapper{

    display:flex;
    flex-direction:column;

    gap:18px;

    max-height:75vh;

    overflow:auto;

    padding-right:6px;

}

/* =========================================================
   SCROLLBAR
========================================================= */

.rcTimelineWrapper::-webkit-scrollbar{

    width:8px;

}

.rcTimelineWrapper::-webkit-scrollbar-track{

    background:var(--scrollbar-track);

    border-radius:20px;

}

.rcTimelineWrapper::-webkit-scrollbar-thumb{

    background:var(--scrollbar-thumb);

    border-radius:20px;

}

.rcTimelineWrapper::-webkit-scrollbar-thumb:hover{

    background:var(--scrollbar-thumb-hover);

}

/* =========================================================
   CARD
========================================================= */

.rcTimelineCard{

    background:#fff;

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

    border-radius:22px;

    padding:20px;

    display:flex;

    gap:18px;

    transition:var(--smooth);

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

    position:relative;

    overflow:hidden;

}

.rcTimelineCard::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:5px;

    background:var(--brand-gradient);

    opacity:.85;

}

.rcTimelineCard:hover{

    transform:translateY(-3px);

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

}

/* =========================================================
   ICON
========================================================= */

.rcTimelineIcon{

    min-width:54px;
    width:54px;

    height:54px;

    border-radius:18px;

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

    color:#fff;

    font-size:22px;

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

}

.rcTimelineIcon.purple{

    background:var(--primary-gradient);

}

.rcTimelineIcon.orange{

    background:linear-gradient(
        135deg,
        #ff9332,
        #ff6b00
    );

}

.rcTimelineIcon.green{

    background:linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

}

.rcTimelineIcon.blue{

    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );

}

.rcTimelineIcon.whatsapp{

    background:linear-gradient(
        135deg,
        #25d366,
        #128c7e
    );

}

/* =========================================================
   BODY
========================================================= */

.rcTimelineBody{

    flex:1;

    min-width:0;

}

/* =========================================================
   HEAD
========================================================= */

.rcTimelineHead{

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

    gap:18px;

    margin-bottom:14px;

}

.rcTimelineHead h4{

    font-size:17px;
    font-weight:700;

    color:var(--headingcolor);

    margin-bottom:5px;

    line-height:1.4;

}

.rcTimelineHead span{

    color:var(--mutedtext);

    font-size:12px;

    font-weight:500;

}

.rcTimelineTime{

    white-space:nowrap;

    font-size:12px;

    color:var(--mutedtext);

    background:var(--surface2);

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

    border-radius:var(--capsule);

    padding:8px 12px;

}

/* =========================================================
   MESSAGE
========================================================= */

.rcTimelineMessage{

    font-size:14px;

    color:var(--textcolor);

    line-height:1.8;

    margin-bottom:14px;

    word-break:break-word;

}

/* =========================================================
   META
========================================================= */

.rcTimelineMetaWrap{

    display:flex;
    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.rcTimelineBadge{

    height:34px;

    padding:0 14px;

    border-radius:var(--capsule);

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

    background:var(--lightprimary);

    color:var(--maincolor);

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

    letter-spacing:.5px;

    text-transform:uppercase;

}

.rcTimelineMeta{

    min-height:34px;

    padding:8px 14px;

    border-radius:var(--capsule);

    background:var(--surface2);

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

    color:var(--textcolor);

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

    display:flex;
    align-items:center;

    gap:6px;

}

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

.rcEmptyState{

    min-height:260px;

    background:#fff;

    border:1px dashed var(--bordercolor);

    border-radius:24px;

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

    color:var(--mutedtext);

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

}

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

@media(max-width:991px){

    .rcTimelinePage{

        padding:16px;

    }

    .rcTimelineTopBar{

        flex-direction:column;
        align-items:flex-start;

    }

    .rcTimelineFilters{

        width:100%;

        overflow:auto;

        flex-wrap:nowrap;

        padding-bottom:4px;

    }

    .rcTimelineFilters::-webkit-scrollbar{

        height:4px;

    }

    .rcTimelineHead{

        flex-direction:column;

    }

    .rcTimelineTime{

        width:max-content;

    }

    .rcTimelineCard{

        padding:16px;

    }

    .rcTimelineIcon{

        min-width:46px;
        width:46px;

        height:46px;

        font-size:18px;

    }

}

@media(max-width:575px){

    .rcTimelineCard{

        flex-direction:column;

    }

    .rcTimelineIcon{

        border-radius:14px;

    }

}