/* ==============================================================
   MSV CONNECT - UNIFIED BRAND THEME
   UI / VISUAL ONLY
   No PHP actions, API calls, DB queries, wallet or lead logic here.
   ============================================================== */

:root{
    --msv-pink:#f20b73;
    --msv-pink-dark:#d80765;
    --msv-cyan:#09b9c9;
    --msv-cyan-dark:#0697aa;
    --msv-navy:#102849;
    --msv-navy-2:#173b62;
    --msv-green:#2fb83b;
    --msv-bg:#f7f9fc;
    --msv-card:#ffffff;
    --msv-text:#18243a;
    --msv-muted:#657184;
    --msv-border:#e4e9f0;
    --msv-shadow:0 8px 28px rgba(16,40,73,.07);
}

html,body{
    font-family:'Poppins',Arial,Helvetica,sans-serif !important;
}

body:not(.login-bg){
    color:var(--msv-text) !important;
    background:var(--msv-bg) !important;
}

/* ---------- SIDEBAR ---------- */
.app-sidebar{
    background:linear-gradient(180deg,var(--msv-navy) 0%,#142f50 55%,#0c223e 100%) !important;
    box-shadow:5px 0 24px rgba(16,40,73,.16) !important;
    border-right:0 !important;
}

.app-sidebar .logo{
    background:rgba(255,255,255,.035) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.app-menu>ul>li>a{
    color:#eaf0f7 !important;
    border-radius:9px !important;
    margin:3px 9px !important;
    transition:background .18s ease,transform .18s ease !important;
}

.app-menu>ul>li>a:hover,
.app-menu>ul>li.active-page>a,
.app-menu>ul>li.open>a{
    color:#fff !important;
    background:linear-gradient(90deg,rgba(242,11,115,.88),rgba(9,185,201,.55)) !important;
    transform:translateX(2px);
    box-shadow:0 7px 18px rgba(0,0,0,.12);
}

.app-menu>ul>li>a .material-icons,
.app-menu>ul>li>a .material-icons-outlined,
.app-menu>ul>li>a i{
    color:inherit !important;
}

.accordion-menu li>a>i.has-sub-menu{color:#dce6f1 !important;}

.app-menu>ul>li ul{
    background:#0c223e !important;
    border-radius:10px !important;
    margin:3px 9px 8px !important;
    box-shadow:none !important;
}

.app-menu>ul>li ul li a{
    color:#d9e4ef !important;
    border-radius:8px !important;
    margin:2px 5px !important;
}

.app-menu>ul>li ul li a:hover,
.app-menu>ul>li ul li a.active{
    color:#fff !important;
    background:rgba(9,185,201,.18) !important;
}

/* ---------- TOP HEADER ---------- */
.app-header,
.app-header::before{
    background:#fff !important;
    box-shadow:0 4px 20px rgba(16,40,73,.08) !important;
    border-bottom:1px solid var(--msv-border) !important;
}

.app-header .navbar{
    background:#fff !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.app-header .navbar .container-fluid{
    min-height:78px !important;
    padding-left:20px !important;
    padding-right:20px !important;
}

.app-header #navbarNav{
    display:flex !important;
    align-items:center !important;
}

.app-header .logo-icon{display:none !important;}
.app-header .sidebar-user-switcher{margin:0 !important;padding:0 !important;}
.app-header .sidebar-user-switcher a{
    display:flex !important;
    align-items:center !important;
    min-height:70px !important;
}

#cmplogo{
    width:158px !important;
    max-width:158px !important;
    height:62px !important;
    max-height:62px !important;
    object-fit:contain !important;
    object-position:left center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
}

.app-header .nav-notifications-toggle{
    background:#f8fafc !important;
    border:1px solid var(--msv-border) !important;
    border-radius:50% !important;
    width:46px !important;
    height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:3px !important;
    box-shadow:none !important;
}

.app-header .nav-notifications-toggle img{
    width:35px !important;
    height:35px !important;
    object-fit:contain !important;
}

.wallet-top-right{
    background:linear-gradient(90deg,var(--msv-pink),var(--msv-cyan)) !important;
    border:0 !important;
    border-radius:10px !important;
    box-shadow:0 7px 20px rgba(9,185,201,.17) !important;
}

/* ---------- PAGE BACKGROUND / HEADER ---------- */
.app-container,
.app-content,
.content-wrapper{
    background:
        radial-gradient(circle at 92% 5%,rgba(9,185,201,.065),transparent 24%),
        radial-gradient(circle at 8% 88%,rgba(242,11,115,.045),transparent 24%),
        var(--msv-bg) !important;
}

.content-wrapper{
    min-height:calc(100vh - 78px) !important;
}

.page-description{
    background:#fff !important;
    border:1px solid var(--msv-border) !important;
    border-left:5px solid var(--msv-pink) !important;
    border-radius:14px !important;
    padding:18px 22px !important;
    margin-bottom:20px !important;
    box-shadow:var(--msv-shadow) !important;
    position:relative;
    overflow:hidden;
}

.page-description::after{
    content:"";
    position:absolute;
    right:-40px;
    top:-50px;
    width:160px;
    height:160px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(242,11,115,.07),rgba(9,185,201,.08));
    pointer-events:none;
}

.page-description h1,
.page-description h2,
.page-description h3{
    color:var(--msv-navy) !important;
    font-weight:700 !important;
}
.page-description h5,.page-description p{color:var(--msv-muted) !important;}

/* ---------- CARDS ---------- */
.card:not([class*="gradient-"]),
.widget,
.form-card,
.table-card,
.card-body{
    border-color:var(--msv-border) !important;
}

.card:not([class*="gradient-"]){
    background:#fff !important;
    color:var(--msv-text) !important;
    border:1px solid var(--msv-border) !important;
    border-radius:14px !important;
    box-shadow:var(--msv-shadow) !important;
}

.card:not([class*="gradient-"]) a{color:var(--msv-navy) !important;}

/* Branded dashboard status gradients */
.gradient-purple{
    background:linear-gradient(135deg,var(--msv-pink),#c50975) !important;
}
.gradient-blue{
    background:linear-gradient(135deg,var(--msv-cyan),#1675cf) !important;
}
.gradient-orange{
    background:linear-gradient(135deg,#1e527b,var(--msv-navy)) !important;
}
.gradient-red{
    background:linear-gradient(135deg,#e83a70,var(--msv-pink)) !important;
}
.gradient-approved{
    background:linear-gradient(135deg,#30a846,#5bcf58) !important;
}
.gradient-processing{
    background:linear-gradient(135deg,var(--msv-cyan),#2476c9) !important;
}
.gradient-pending-leads{
    background:linear-gradient(135deg,var(--msv-pink),#ba177a) !important;
}
.gradient-disbursed{
    background:linear-gradient(135deg,var(--msv-navy),#2d6f93) !important;
}

[class*="gradient-"]{
    border-radius:15px !important;
    box-shadow:0 12px 28px rgba(16,40,73,.14) !important;
}
[class*="gradient-"] a,[class*="gradient-"] h2,[class*="gradient-"] p,[class*="gradient-"] span{color:#fff !important;}

/* ---------- FORMS ---------- */
.form-label,label{
    color:#27364e;
}

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="file"]{
    border:1px solid #dbe2ea !important;
    border-radius:9px !important;
    background:#fff !important;
    color:var(--msv-text) !important;
    box-shadow:none !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus{
    border-color:var(--msv-cyan) !important;
    box-shadow:0 0 0 3px rgba(9,185,201,.12) !important;
    outline:0 !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    border:1px solid #dbe2ea !important;
    border-radius:9px !important;
    min-height:40px !important;
    background:#fff !important;
}

.input-group-text{
    background:linear-gradient(135deg,#f7fbff,#fff4f9) !important;
    color:var(--msv-navy) !important;
    border-color:#dbe2ea !important;
    font-weight:600 !important;
}

/* ---------- BUTTONS ---------- */
.btn{
    border-radius:9px !important;
    font-weight:600 !important;
    transition:transform .15s ease,box-shadow .15s ease !important;
}
.btn:hover{transform:translateY(-1px);}

.btn-primary,
button.btn-primary,
input.btn-primary{
    color:#fff !important;
    border:0 !important;
    background:linear-gradient(90deg,var(--msv-pink),var(--msv-cyan)) !important;
    box-shadow:0 7px 18px rgba(9,185,201,.16) !important;
}
.btn-primary:hover,.btn-primary:focus{
    background:linear-gradient(90deg,var(--msv-pink-dark),var(--msv-cyan-dark)) !important;
}

.btn-success{
    background:linear-gradient(135deg,#23a63c,#59c94f) !important;
    border-color:transparent !important;
}
.btn-info{
    background:linear-gradient(135deg,var(--msv-cyan),#3185d3) !important;
    border-color:transparent !important;
    color:#fff !important;
}
.btn-secondary{
    background:var(--msv-navy) !important;
    border-color:var(--msv-navy) !important;
}

/* ---------- TABLES ---------- */
.table-responsive{
    background:#fff;
    border:1px solid var(--msv-border);
    border-radius:14px;
    box-shadow:var(--msv-shadow);
    overflow:auto;
}

table.table{
    margin-bottom:0 !important;
    color:var(--msv-text) !important;
}
.table thead th,
table thead th{
    background:var(--msv-navy) !important;
    color:#fff !important;
    border-color:#254463 !important;
    font-weight:600 !important;
    white-space:nowrap;
}
.table tbody td,
table tbody td{
    border-color:#eef1f5 !important;
    vertical-align:middle !important;
}
.table tbody tr:nth-child(even){background:#fbfcfe !important;}
.table tbody tr:hover{background:#f2fbfc !important;}

/* ---------- NAV / PAGINATION / DROPDOWNS ---------- */
.nav-tabs{
    border-bottom:1px solid var(--msv-border) !important;
}
.nav-tabs .nav-link{
    color:var(--msv-muted) !important;
    border-radius:9px 9px 0 0 !important;
}
.nav-tabs .nav-link.active{
    color:var(--msv-pink) !important;
    font-weight:600 !important;
    border-color:var(--msv-border) var(--msv-border) #fff !important;
}

.dropdown-menu{
    border:1px solid var(--msv-border) !important;
    border-radius:12px !important;
    box-shadow:0 14px 35px rgba(16,40,73,.13) !important;
}
.dropdown-item:hover{background:#f2fbfc !important;color:var(--msv-navy) !important;}

.page-link{
    color:var(--msv-navy) !important;
    border-color:var(--msv-border) !important;
}
.page-item.active .page-link{
    color:#fff !important;
    border-color:transparent !important;
    background:linear-gradient(135deg,var(--msv-pink),var(--msv-cyan)) !important;
}

/* ---------- ALERTS / MODALS ---------- */
.alert{border-radius:10px !important;border-width:1px !important;}
.modal-content{
    border:0 !important;
    border-radius:16px !important;
    box-shadow:0 22px 60px rgba(16,40,73,.20) !important;
}
.modal-header{
    border-bottom:1px solid var(--msv-border) !important;
    background:linear-gradient(90deg,#fff7fb,#f2fbfc) !important;
}
.modal-title{color:var(--msv-navy) !important;font-weight:700 !important;}

/* ---------- LINK / HEADINGS ---------- */
a{color:#087ca8;}
a:hover{color:var(--msv-pink);}
h1,h2,h3,h4,h5,h6{color:var(--msv-navy);}

/* ---------- LOGIN / AUTH PAGES ---------- */
body.login-bg,
body.msv-auth-page{
    min-height:100vh !important;
    height:auto !important;
    padding:30px 15px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    background:
        radial-gradient(circle at 9% 8%,rgba(242,11,115,.12),transparent 27%),
        radial-gradient(circle at 90% 8%,rgba(9,185,201,.13),transparent 28%),
        linear-gradient(135deg,#ffffff 0%,#f9fbfd 60%,#fff7fb 100%) !important;
    position:relative !important;
}
body.login-bg::before{
    content:"" !important;
    position:fixed !important;
    inset:auto 0 0 0 !important;
    height:180px !important;
    background:linear-gradient(165deg,transparent 30%,rgba(242,11,115,.08) 31%,rgba(9,185,201,.09) 75%,transparent 76%) !important;
    pointer-events:none !important;
}

.login-container,
.app-auth-container#MainLog{
    position:relative !important;
    z-index:2 !important;
    width:410px !important;
    max-width:94vw !important;
    height:auto !important;
    margin:0 auto !important;
    padding:32px !important;
    text-align:left !important;
    background:#fff !important;
    border:1px solid var(--msv-border) !important;
    border-radius:18px !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 20px 55px rgba(16,40,73,.13) !important;
    color:var(--msv-text) !important;
}

.login-container > div:first-child,
.app-auth-container#MainLog > div:first-child{
    text-align:center !important;
}

.login-container img,
.app-auth-container#MainLog img{
    object-fit:contain;
}

.login-container .form-label,
.app-auth-container#MainLog .form-label,
.login-container label,
.app-auth-container#MainLog label{
    color:#27364e !important;
    font-weight:600 !important;
    text-align:left !important;
}

.login-container .form-control,
.app-auth-container#MainLog .form-control,
.app-auth-container#MainLog input,
.app-auth-container#MainLog select,
.app-auth-container#MainLog textarea{
    min-height:44px !important;
    border-radius:9px !important;
}

.login-container .btn-primary,
.app-auth-container#MainLog .btn-primary{
    width:100% !important;
    min-height:45px !important;
    margin-top:5px !important;
}

.login-container p[style*="courier"]{
    color:var(--msv-navy) !important;
    background:#f5fafc !important;
    border:1px dashed var(--msv-cyan) !important;
    border-radius:9px !important;
    padding:8px !important;
    margin-top:7px !important;
    text-align:center !important;
}

.msv-login-links{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    margin-top:15px !important;
}
.msv-quick-btn{
    min-height:49px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    padding:10px 9px !important;
    border:1px solid var(--msv-border) !important;
    border-radius:10px !important;
    box-shadow:none !important;
    font-size:12px !important;
    font-weight:600 !important;
    transition:.18s ease !important;
}
.msv-quick-btn:hover{transform:translateY(-1px) !important;box-shadow:0 8px 20px rgba(16,40,73,.08) !important;}
.register-btn{background:#fff3f8 !important;color:var(--msv-pink) !important;}
.privacy-btn{background:#eefbfd !important;color:#078fa0 !important;}
.contact-btn{background:#f3f6fa !important;color:var(--msv-navy) !important;}
.apk-btn{background:#effaf1 !important;color:#218c36 !important;}
.msv-login-footer{color:var(--msv-muted) !important;text-align:center !important;}

/* Signup page uses a normal body instead of login-bg */
body:has(.app-auth-container#MainLog){
    min-height:100vh !important;
    background:
        radial-gradient(circle at 9% 8%,rgba(242,11,115,.10),transparent 27%),
        radial-gradient(circle at 90% 8%,rgba(9,185,201,.12),transparent 28%),
        var(--msv-bg) !important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
    .app-header .navbar .container-fluid{min-height:68px !important;padding-left:12px !important;padding-right:12px !important;}
    .app-header .sidebar-user-switcher a{min-height:60px !important;}
    #cmplogo{width:125px !important;max-width:125px !important;height:52px !important;max-height:52px !important;}
    .page-description{padding:14px 16px !important;border-radius:11px !important;}
    .feature-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:576px){
    .login-container,.app-auth-container#MainLog{
        width:94vw !important;
        max-width:94vw !important;
        padding:22px 18px !important;
        border-radius:15px !important;
    }
    .msv-login-links{grid-template-columns:1fr 1fr !important;}
    .wallet-top-right-label{display:none !important;}
    .page-description h1{font-size:23px !important;}
}