body {
    font-size: 15px;
}

.card {
    border-radius: 14px;
}

.table td,
.table th {
    vertical-align: middle;
}

.navbar-brand {
    font-size: 20px;
}

.btn {
    border-radius: 10px;
}

.finance-upload-box {

    position: relative;

    border: 2px dashed #d0d5dd;

    border-radius: 14px;

    padding: 30px;

    text-align: center;

    background: #fafafa;

    transition: all 0.2s ease;

    cursor: pointer;

    overflow: hidden;
}

.finance-upload-box:hover {

    border-color: #0d6efd;

    background: #f8fbff;
}

.finance-upload-content i {

    font-size: 40px;

    color: #0d6efd;
}

.finance-image-input {

    position: absolute;

    inset: 0;

    opacity: 0;

    cursor: pointer;
}

.finance-preview {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.finance-preview-item {

    position: relative;

    width: 120px;

    height: 120px;
}

.finance-preview-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 12px;

    border: 1px solid #dee2e6;
}

.finance-preview-remove {

    position: absolute;

    top: -6px;

    right: -6px;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #dc3545;

    color: white;

    border: none;

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;
}



    body{
        background: #f5f7fb;
    }

    .dashboard-header h2{
        font-size: 1.5rem;
        letter-spacing: -.3px;
    }

    .dashboard-header .subtitle{
        font-size: .92rem;
    }

    .dashboard-card{
        border: 0;
        border-radius: 18px;
        transition: all .22s ease;
        overflow: hidden;
    }

    .dashboard-card:hover{
        transform: translateY(-3px);
        box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08)!important;
    }

    .stat-card{
        position: relative;
    }

    .stat-icon{
        width: 46px;
        height: 46px;
        border-radius: 14px;

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

        font-size: 1.1rem;
    }

    .stat-label{
        font-size: .8rem;
        color: #6c757d;
    }

    .stat-value{
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1.2;
        margin-top: 6px;
    }

    .stat-desc{
        font-size: .78rem;
        color: #6c757d;
    }

    .quick-box{
        border-radius: 18px;
        transition: all .2s ease;
        border: 1px solid #eef1f5;
        background: #fff;
    }

    .quick-box:hover{
        transform: translateY(-3px);
        box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.06);
        border-color: #dfe5ec;
    }

    .quick-icon{
        width: 52px;
        height: 52px;
        border-radius: 14px;

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

        font-size: 1.2rem;
    }

    .section-title{
        font-size: 1rem;
        font-weight: 600;
    }

    .table{
        margin-bottom: 0;
    }

    .table th{
        font-size: .78rem;
        font-weight: 600;
        color: #6c757d;
        border-bottom-width: 1px;
    }

    .table td{
        font-size: .88rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        vertical-align: middle;
    }

    .table-light{
        --bs-table-bg: #f8fafc;
    }

    .btn-soft{
        border-radius: 999px;
        padding: .45rem .9rem;
        font-size: .82rem;
    }

    .mini-badge{
        font-size: .72rem;
        border-radius: 999px;
        padding: .35rem .6rem;
    }

    @media(max-width:768px){

        .stat-value{
            font-size: 1.1rem;
        }

        .dashboard-header{
            flex-direction: column;
            align-items: flex-start!important;
            gap: 1rem;
        }

    }

/* =========================================
   FINANCE WORK ITEM CARD
========================================= */

.finance-work-card{

    border-radius: 26px !important;

    overflow: hidden;

    border: 1px solid #fbfcfc !important;

    background: var(--bs-info-bg-subtle) !important;

    transition: all .25s ease;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);

}

.finance-work-card:hover{

    transform: translateY(-5px);

    border-color: #dbeafe !important;

    box-shadow:
        0 20px 40px rgba(15,23,42,.10);

}

/* =========================================
   SOFT BLOCK
========================================= */

.finance-soft-block{

    border-radius: 20px;

    padding: 16px 18px;

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

    backdrop-filter: blur(10px);

}

.finance-soft-block-primary{

    background: linear-gradient(
        180deg,
        #f0f7ff,
        #f8fbff
    );

}

.finance-soft-block-danger{

    background: linear-gradient(
        180deg,
        #fff5f5,
        #fffafa
    );

}

.finance-soft-block-success{

    background: linear-gradient(
        180deg,
        #f0fdf4,
        #f7fff9
    );

}

/* =========================================
   PROGRESS
========================================= */

.finance-progress{

    height: 8px;

    border-radius: 999px;

    background: #e2e8f0;

    overflow: hidden;

}

.finance-progress-bar{

    height: 100%;

    border-radius: 999px;

}

.finance-percent-good{

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

}

.finance-percent-danger{

    background: linear-gradient(
        90deg,
        #ef4444,
        #dc2626
    );

}

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

.finance-big-icon{

    width: 58px;

    height: 58px;

    border-radius: 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

}

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

.finance-summary-card{

    border-radius: 24px;

    transition: all .25s ease;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);

}

.finance-summary-card:hover{

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.08);

}

.finance-work-title{

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;

}


.finance-note-card{

    background: linear-gradient(
        180deg,
        #ffffff,
        #f8fafc
    );

    border: 1px solid #edf2f7;

    border-radius: 18px;

    padding: 16px 18px;

}

.finance-note-icon{

    width: 42px;

    height: 42px;

    border-radius: 14px;

    background: #eff6ff;

    color: #2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink: 0;

}


.finance-soft-danger-card{

    background-color: #fff5f5 !important;

    background-image: linear-gradient(
        180deg,
        #fff5f5,
        #fffafa
    ) !important;

    border: 1px solid #ffe2e2 !important;

}

.finance-soft-success-card{

    background-color: #f0fdf4 !important;

    background-image: linear-gradient(
        180deg,
        #f0fdf4,
        #f7fff9
    ) !important;

    border: 1px solid #dcfce7 !important;

}

.card.finance-soft-danger-card{

    background-color: #fff5f5 !important;

    background-image: linear-gradient(
        180deg,
        #fff5f5,
        #fffafa
    ) !important;

}

.card.finance-soft-success-card{

    background-color: #f0fdf4 !important;

    background-image: linear-gradient(
        180deg,
        #f0fdf4,
        #f7fff9
    ) !important;

}

.quick-box{

    border: 1.5px dashed #44474a;

    border-radius: 20px;

    background: linear-gradient(
        180deg,
        #ffffff,
        #fbfdff
    );

    transition: all .22s ease;

    height: 100%;

}

.quick-box:hover{
    background: var(--bs-primary-bg-subtle) !important;


}

.quick-icon{

    width: 54px;

    height: 54px;

    border-radius: 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size: 1.2rem;

}

.finance-hero-v2{

    background: linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    border-radius:24px;

    padding:28px;

    color:#fff;

    margin-bottom:16px;
}

.finance-project-title{

    font-size:32px;

    font-weight:700;

    margin-bottom:10px;
}

.finance-project-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    color:rgba(255,255,255,.75);

    font-size:.92rem;
}

.finance-kpi-card{

    background:rgba(255,255,255,.08);

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

    border-radius:18px;

    padding:18px;
}

.finance-kpi-label{

    color:rgba(
        255,
        255,
        255,
        .65
    );

    margin-bottom:8px;
}

.finance-kpi-value{

    font-size:1.5rem;

    font-weight:700;
}

.finance-nav-card{

    background:#fff;

    border-radius:18px;

    padding:12px;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.05);
}

.finance-nav-scroll{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.finance-nav-link{

    text-decoration:none;

    color:#64748b;

    padding:10px 16px;

    border-radius:12px;

    font-weight:600;

    transition:.2s;
}

.finance-nav-link:hover{

    background:#f1f5f9;

    color:#0f172a;
}

.finance-nav-link.active{

    background:#2563eb;

    color:#fff;
}