/* ==================================================
   SMARTBRIDGE DASHBOARD CSS
   Version: 1.0
   ================================================== */


/* ==================================================
   ROOT VARIABLES
   ================================================== */

:root{

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;

    --success:#198754;
    --warning:#ffc107;
    --danger:#dc3545;
    --info:#0dcaf0;

    --dark:#0f172a;
    --dark-light:#1e293b;

    --light:#f8fafc;
    --white:#ffffff;

    --border:#e5e7eb;

    --text:#334155;
    --text-light:#64748b;

    --sidebar-width:260px;

    --radius:16px;

    --shadow:
        0 2px 10px rgba(0,0,0,.04);

    --shadow-lg:
        0 10px 30px rgba(0,0,0,.08);

}


/* ==================================================
   RESET
   ================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background:var(--light);

    color:var(--text);

    overflow-x:hidden;

}

a{
    text-decoration:none;
}


/* ==================================================
   DASHBOARD LAYOUT
   ================================================== */

.dashboard-wrapper{

    display:flex;

    min-height:100vh;

}

.main-content{

    flex:1;

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

    min-height:100vh;

}

.content-wrapper{

    padding:25px;

}


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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:var(--sidebar-width);

    height:100vh;

    background:var(--dark);

    color:#fff;

    display:flex;

    flex-direction:column;

    z-index:999;

}


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

.sidebar-brand{

    padding:25px 20px;

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

}

.brand-link{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

}

.brand-logo{

    width:45px;

    height:45px;

    border-radius:12px;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:18px;

}

.brand-text h5{

    margin:0;

    font-size:18px;

}

.brand-text small{

    color:#94a3b8;

}


/* ==================================================
   USER PROFILE
   ================================================== */

.sidebar-user{

    padding:20px;

    display:flex;

    align-items:center;

    gap:12px;

}

.user-avatar{

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}

.user-name{

    color:#fff;

    font-weight:600;

}

.user-status{

    font-size:12px;

    color:#94a3b8;

}

.status-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--success);

    display:inline-block;

    margin-right:5px;

}


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

.sidebar-menu{

    flex:1;

    padding:10px;

}

.sidebar-menu ul{

    list-style:none;

}

.sidebar-menu li{

    margin-bottom:6px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#cbd5e1;

    padding:14px 16px;

    border-radius:12px;

    transition:.3s;

}

.sidebar-menu a:hover{

    background:var(--dark-light);

    color:#fff;

}

.sidebar-menu a.active{

    background:var(--primary);

    color:#fff;

}

.sidebar-menu i{

    font-size:18px;

}


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

.sidebar-footer{

    padding:15px;

    border-top:
        1px solid rgba(255,255,255,.08);

}

.logout-link{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    padding:12px;

    border-radius:12px;

}

.logout-link:hover{

    background:#dc3545;

    color:#fff;

}


/* ==================================================
   TOPBAR
   ================================================== */

.topbar{

    background:#fff;

    height:70px;

    padding:0 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

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

}

.topbar-title{

    font-size:22px;

    font-weight:700;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:20px;

}


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

.dashboard-card{

    background:#fff;

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.dashboard-card .card-body{

    padding:20px;

}


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

.stat-card{

    background:#fff;

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-3px);

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

}

.stat-title{

    color:var(--text-light);

    font-size:14px;

}

.stat-value{

    font-size:28px;

    font-weight:700;

}


/* ==================================================
   TABLES
   ================================================== */

.table-container{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

}

.table{

    margin-bottom:0;

}

.table thead{

    background:#f8fafc;

}


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

.form-control,
.form-select{

    border-radius:12px;

    min-height:50px;

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

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:none;

}


/* ==================================================
   BUTTONS
   ================================================== */

.btn{

    border-radius:12px;

    padding:10px 18px;

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:var(--primary-dark);

}


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

.badge-pending{
    background:#fff3cd;
    color:#856404;
}

.badge-active{
    background:#d1e7dd;
    color:#0f5132;
}

.badge-completed{
    background:#cff4fc;
    color:#055160;
}

.badge-rejected{
    background:#f8d7da;
    color:#842029;
}


/* ==================================================
   ALERTS
   ================================================== */

.alert{

    border:none;

    border-radius:12px;

}


/* ==================================================
   NOTIFICATIONS
   ================================================== */

.notification-count{

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--danger);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

}


/* ==================================================
   INVESTMENT CALCULATOR
   ================================================== */

.calculator-result{

    background:#f8fafc;

    padding:15px;

    border-radius:12px;

}


/* ==================================================
   OFFCANVAS MOBILE SIDEBAR
   ================================================== */

.offcanvas-sidebar{

    background:var(--dark);

    color:#fff;

}

.topbar-left{
    display:flex;
    align-items:center;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.user-avatar-sm{
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:14px;
}

.dropdown-menu{
    border:none;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.dropdown-item{
    padding:10px 15px;
}


.topbar,
.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #ffffff;
}


.progress {
    height: 10px;
    border-radius: 50px;
    background: #edf2f7;
}

.progress-bar {
    border-radius: 50px;
}

.dashboard-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}


.calculator-result {
    padding: 20px;
    border-radius: 12px;
    background: #f8fafc;
    text-align: center;
}

.calculator-result h4 {
    margin-bottom: 0;
}

.dashboard-card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.list-group-item {
    background: transparent;
    border-color: rgba(0,0,0,.08);
}

.notification-item:last-child {
    border-bottom: none !important;
}

.notification-item.bg-light {
    border-left: 4px solid var(--primary);
    padding-left: 15px;
}