/* ===========================
   Vans Finance
=========================== */

:root {
    
    --primary: #2196F3;
    --primary-dark: #1976D2;
    
    --background: #081B33;
    --surface: #112D4E;
    --surface2: #163A63;
    
    --text: #FFFFFF;
    --text2: #BFD8F8;
    
    --success: #22C55E;
    --danger: #EF4444;
    
    --radius: 18px;
    
    --shadow:
        0 10px 25px rgba(0, 0, 0, .35);
    
}

* {
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    font-family: Poppins, sans-serif;
    
}

html {
    
    scroll-behavior: smooth;
    
}

body {
    
    background: var(--background);
    
    color: var(--text);
    
    min-height: 100vh;
    
}

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

.sidebar {
    
    position: fixed;
    
    top: 0;
    
    left: -280px;
    
    width: 270px;
    
    height: 100vh;
    
    background: var(--surface);
    
    padding: 25px;
    
    transition: .3s;
    
    z-index: 999;
    
}

.sidebar.active {
    
    left: 0;
    
}

.logo {
    
    display: flex;
    
    align-items: center;
    
    gap: 15px;
    
    margin-bottom: 35px;
    
}

.logo-box {
    
    width: 55px;
    
    height: 55px;
    
    background: var(--primary);
    
    border-radius: 15px;
    
    display: flex;
    
    justify-content: center;
    
    align-items: center;
    
    font-size: 24px;
    
}

.logo span {
    
    color: var(--text2);
    
    font-size: 13px;
    
}

.sidebar nav {
    
    display: flex;
    
    flex-direction: column;
    
    gap: 10px;
    
}

.sidebar nav a {
    
    text-decoration: none;
    
    color: var(--text2);
    
    display: flex;
    
    align-items: center;
    
    gap: 15px;
    
    padding: 14px;
    
    border-radius: 12px;
    
    transition: .25s;
    
}

.sidebar nav a:hover {
    
    background: rgba(33, 150, 243, .15);
    
}

.sidebar nav .active {
    
    background: var(--primary);
    
    color: white;
    
}

/* ===================
MAIN
=================== */

main {
    
    padding: 18px;
    
    padding-bottom: 90px;
    
}

/* ===================
NAVBAR
=================== */

.navbar {
    
    display: flex;
    
    justify-content: space-between;
    
    align-items: center;
    
    margin-bottom: 25px;
    
}

.navbar button {
    
    border: none;
    
    background: var(--surface);
    
    color: white;
    
    width: 45px;
    
    height: 45px;
    
    border-radius: 12px;
    
    cursor: pointer;
    
}

.nav-action {
    
    display: flex;
    
    gap: 10px;
    
}
/* ===================
WELCOME
=================== */

.welcome{

    margin-bottom:20px;

}

.welcome h1{

    font-size:28px;

    margin-bottom:6px;

}

.welcome p{

    color:var(--text2);

    line-height:1.6;

}

/* ===================
SALDO
=================== */

.summary{

    margin-bottom:20px;

}

.balance-card{

    background:linear-gradient(
    135deg,
    #2196F3,
    #1565C0);

    border-radius:22px;

    padding:25px;

    box-shadow:var(--shadow);

}

.balance-card span{

    opacity:.9;

}

.balance-card h2{

    font-size:34px;

    margin:12px 0;

}

.balance-card small{

    opacity:.85;

}

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

.cards{

    display:grid;

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

    gap:15px;

    margin-bottom:22px;

}

.card{

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

    backdrop-filter:blur(12px);

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

    border-radius:18px;

    padding:18px;

    transition:.3s;

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.card i{

    font-size:22px;

    color:var(--primary);

    margin-bottom:12px;

}

.card span{

    display:block;

    color:var(--text2);

    font-size:14px;

}

.card h3{

    margin-top:10px;

    font-size:24px;

}

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

.box{

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

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

    backdrop-filter:blur(12px);

    border-radius:18px;

    padding:20px;

    margin-bottom:22px;

}

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.section-title h2{

    font-size:18px;

}

.section-title a{

    text-decoration:none;

    color:var(--primary);

    font-size:14px;

}

/* ===================
CHART
=================== */

#financeChart{

    width:100%;

    height:260px;

}
/* ===================
QUICK MENU
=================== */

.quick-menu {
    
    display: grid;
    
    grid-template-columns: repeat(4, 1fr);
    
    gap: 14px;
    
    margin-bottom: 22px;
    
}

.quick-menu a {
    
    text-decoration: none;
    
    color: white;
    
    background: rgba(255, 255, 255, .05);
    
    border: 1px solid rgba(255, 255, 255, .08);
    
    border-radius: 18px;
    
    padding: 18px 10px;
    
    display: flex;
    
    flex-direction: column;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 10px;
    
    transition: .3s;
    
}

.quick-menu a:hover {
    
    background: var(--primary);
    
    transform: translateY(-5px);
    
}

.quick-menu i {
    
    font-size: 24px;
    
}

.quick-menu span {
    
    font-size: 13px;
    
}

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

.empty {
    
    text-align: center;
    
    padding: 35px 20px;
    
}

.empty i {
    
    font-size: 55px;
    
    color: var(--primary);
    
    margin-bottom: 15px;
    
}

.empty h3 {
    
    margin-bottom: 8px;
    
}

.empty p {
    
    color: var(--text2);
    
    line-height: 1.6;
    
}

/* ===================
BOTTOM NAVIGATION
=================== */

.bottom-nav {
    
    position: fixed;
    
    left: 0;
    
    bottom: 0;
    
    width: 100%;
    
    height: 70px;
    
    background: #102A4C;
    
    border-top: 1px solid rgba(255, 255, 255, .08);
    
    display: flex;
    
    justify-content: space-around;
    
    align-items: center;
    
    z-index: 999;
    
}

.bottom-nav a {
    
    text-decoration: none;
    
    color: var(--text2);
    
    display: flex;
    
    flex-direction: column;
    
    align-items: center;
    
    gap: 4px;
    
    font-size: 12px;
    
}

.bottom-nav a i {
    
    font-size: 20px;
    
}

.bottom-nav .active {
    
    color: var(--primary);
    
}

/* Tombol Tengah */

.add-btn {
    
    width: 58px;
    
    height: 58px;
    
    border-radius: 50%;
    
    background: var(--primary);
    
    display: flex !important;
    
    justify-content: center;
    
    align-items: center;
    
    margin-top: -28px;
    
    color: white !important;
    
    box-shadow: 0 10px 25px rgba(33, 150, 243, .4);
    
}

.add-btn i {
    
    font-size: 24px !important;
    
}

/* ===================
OVERLAY
=================== */

.overlay {
    
    position: fixed;
    
    inset: 0;
    
    background: rgba(0, 0, 0, .45);
    
    opacity: 0;
    
    visibility: hidden;
    
    transition: .3s;
    
    z-index: 998;
    
}

.overlay.active {
    
    opacity: 1;
    
    visibility: visible;
    
}
/* ===================
ANIMATION
=================== */

.card,
.box,
.balance-card {
    
    animation: fadeUp .5s ease;
    
}

@keyframes fadeUp {
    
    from {
        
        opacity: 0;
        
        transform: translateY(20px);
        
    }
    
    to {
        
        opacity: 1;
        
        transform: translateY(0);
        
    }
    
}

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

::-webkit-scrollbar {
    
    width: 6px;
    
}

::-webkit-scrollbar-track {
    
    background: #081B33;
    
}

::-webkit-scrollbar-thumb {
    
    background: #2196F3;
    
    border-radius: 10px;
    
}

::-webkit-scrollbar-thumb:hover {
    
    background: #1976D2;
    
}

/* ===================
BUTTON
=================== */

button {
    
    transition: .3s;
    
}

button:hover {
    
    transform: scale(.95);
    
}

/* ===================
LINK
=================== */

a {
    
    transition: .3s;
    
}

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

@media (max-width:768px) {
    
    .cards {
        
        grid-template-columns: repeat(2, 1fr);
        
    }
    
    .quick-menu {
        
        grid-template-columns: repeat(4, 1fr);
        
    }
    
}

@media (max-width:480px) {
    
    .cards {
        
        grid-template-columns: 1fr;
        
    }
    
    .quick-menu {
        
        grid-template-columns: repeat(2, 1fr);
        
    }
    
    .balance-card h2 {
        
        font-size: 30px;
        
    }
    
    .navbar h2 {
        
        font-size: 18px;
        
    }
    
    .section-title h2 {
        
        font-size: 16px;
        
    }
    
}

/* ===================
DESKTOP
=================== */

@media (min-width:1024px) {
    
    body {
        
        display: flex;
        
    }
    
    .sidebar {
        
        left: 0;
        
    }
    
    main {
        
        margin-left: 270px;
        
        width: calc(100% - 270px);
        
        padding: 30px;
        
    }
    
    .bottom-nav {
        
        display: none;
        
    }
    
    .cards {
        
        grid-template-columns: repeat(4, 1fr);
        
    }
    
    .quick-menu {
        
        grid-template-columns: repeat(4, 1fr);
        
    }
    
}
.progress{

width:100%;

height:28px;

background:#1b3d63;

border-radius:50px;

overflow:hidden;

margin:20px 0;

}

.progress-bar{

height:100%;

width:0;

background:linear-gradient(
90deg,
#22C55E,
#2196F3);

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

color:white;

transition:.5s;

}
/* ===================================
   Vans Finance - Transaksi
=================================== */

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-group input {
    width: 100%;
    padding: 14px;
    border: none;
    outline: none;
    border-radius: 12px;
    background: #16375d;
    color: #fff;
    font-size: 15px;
}

.filter-group input::placeholder {
    color: #9bb7d7;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 16px;
    margin-bottom: 15px;
    background: #123055;
    border-radius: 16px;
    transition: .3s;
}

.history-item:hover {
    transform: translateY(-3px);
}

.history-item h3 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 5px;
}

.history-item p {
    color: #8fb4d8;
    font-size: 14px;
    margin-bottom: 5px;
}

.history-item small {
    color: #6d8eb0;
}

.history-item button,
.history-item .save-btn {
    
    padding: 8px 14px;
    
    border: none;
    
    border-radius: 10px;
    
    cursor: pointer;
    
    text-decoration: none;
    
    color: white;
    
    font-size: 13px;
    
    transition: .3s;
    
}

.history-item button {
    
    background: #ef4444;
    
}

.history-item button:hover {
    
    background: #dc2626;
    
}

.history-item .save-btn {
    
    background: #2196f3;
    
}

.history-item .save-btn:hover {
    
    background: #1976d2;
    
}

.empty {
    
    text-align: center;
    
    padding: 60px 20px;
    
}

.empty i {
    
    font-size: 60px;
    
    color: #2196f3;
    
    margin-bottom: 20px;
    
}

.empty h3 {
    
    color: white;
    
    margin-bottom: 10px;
    
}

.empty p {
    
    color: #9bb7d7;
    
}
/* =====================================
   Vans Finance Form UI
===================================== */

.box {
    background: #102844;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}

.box h2,
.box h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 22px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #9FC4FF;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    
    width: 100%;
    
    padding: 15px 18px;
    
    border: 2px solid transparent;
    
    border-radius: 14px;
    
    background: #17395E;
    
    color: #fff;
    
    font-size: 15px;
    
    outline: none;
    
    transition: .3s;
    
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #8EA9C9;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    
    border-color: #2196F3;
    
    background: #1D456F;
    
    box-shadow: 0 0 15px rgba(33, 150, 243, .35);
    
}

.save-btn {
    
    width: 100%;
    
    padding: 15px;
    
    border: none;
    
    border-radius: 14px;
    
    background: linear-gradient(135deg, #2196F3, #0D6EFD);
    
    color: #fff;
    
    font-size: 16px;
    
    font-weight: bold;
    
    cursor: pointer;
    
    transition: .3s;
    
}

.save-btn:hover {
    
    transform: translateY(-2px);
    
    box-shadow: 0 8px 20px rgba(33, 150, 243, .4);
    
}

.save-btn:active {
    
    transform: scale(.98);
    
}

input[type="date"]::-webkit-calendar-picker-indicator {
    
    filter: invert(1);
    
    cursor: pointer;
    
}

select {
    
    appearance: none;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    
    background-position: right 15px center;
    
    background-size: 18px;
    
}