/* =========================================================
   BRILINK TRANSACTION SYSTEM
   Mobile First
========================================================= */

:root{

    --primary:#005BAC;
    --primary-dark:#004785;
    --secondary:#00AEEF;

    --success:#16a34a;
    --danger:#dc2626;
    --warning:#f59e0b;

    --bg:#f4f7fb;
    --surface:#ffffff;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#e5e7eb;

    --radius:18px;

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

    --transition:.25s;

    --header-height:72px;

    --bottom-nav-height:72px;

}

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    font-family:'Poppins',sans-serif;

    color:var(--text);

    font-size:14px;

}

a{

    text-decoration:none;

}

button{

    border:none;

    outline:none;

}

.page{

    min-height:100vh;

    padding-bottom:110px;

}

/* =========================================================
   LOADING
========================================================= */

#loading-page{

    position:fixed;

    inset:0;

    background:white;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

}

.loading-box{

    text-align:center;

}

.loading-logo{

    width:100px;

    height:100px;

    border-radius:50%;

    background:#eef5ff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:25px;

}

.loading-logo i{

    font-size:48px;

    color:var(--primary);

}

/* =========================================================
   LOGIN
========================================================= */

.login-container{

    max-width:420px;

    margin:auto;

    padding:40px 20px;

}

.login-header{

    text-align:center;

    margin-top:40px;

}

.login-logo{

    width:110px;

    height:110px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:25px;

    box-shadow:var(--shadow);

}

.login-logo i{

    font-size:50px;

    color:var(--primary);

}

.login-card{

    margin-top:35px;

    background:white;

    border-radius:22px;

    padding:25px;

    box-shadow:var(--shadow);

}

.login-footer{

    text-align:center;

    margin-top:25px;

    color:var(--text-light);

    font-size:12px;

}

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

.header{

    height:var(--header-height);

    background:linear-gradient(
        135deg,
        #005BAC,
        #0d84ff
    );

    color:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    border-bottom-left-radius:25px;

    border-bottom-right-radius:25px;

    box-shadow:0 8px 20px rgba(0,91,172,.25);

}

.header-back{

    width:40px;

    height:40px;

    border-radius:50%;

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

    color:white;

}

.header-profile{

    width:42px;

    height:42px;

    border-radius:50%;

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

    color:white;

    font-size:22px;

}

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

.saldo-card{

    margin-top:20px;

    background:linear-gradient(
        135deg,
        #005BAC,
        #0d84ff
    );

    color:white;

    border-radius:22px;

    padding:25px;

    box-shadow:var(--shadow);

}

.saldo-label{

    opacity:.8;

}

.saldo-value{

    font-size:34px;

    font-weight:700;

    margin-top:8px;

}

.saldo-footer{

    margin-top:15px;

    opacity:.75;

}

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

.summary-card{

    background:white;

    border-radius:20px;

    padding:18px;

    box-shadow:var(--shadow);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.summary-card h5{

    margin-top:10px;

    margin-bottom:0;

    font-weight:700;

}

.summary-card i{

    font-size:34px;

}

.summary-card.income i{

    color:var(--success);

}

.summary-card.outcome i{

    color:var(--danger);

}

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

.menu-title{

    font-size:16px;

    font-weight:600;

    margin:25px 5px 15px;

}

.quick-menu{

    display:grid;

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

    gap:12px;

}

.quick-item{

    background:var(--surface);

    border-radius:18px;

    height:92px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow);

    transition:.2s;

}

.quick-item:active{

    transform:scale(.95);

}

.quick-item i{

    font-size:26px;

    color:var(--primary);

}

.quick-item span{

    margin-top:8px;

    font-size:12px;

    color:var(--text);

}

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

.transaction-card{

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

    background:#fff;

    border-radius:14px;

    padding:12px 14px;

    margin-bottom:10px;

    box-shadow:var(--shadow);

}

.transaction-left{

    display:flex;
    align-items:center;
    flex:1;

}

.transaction-left h6{

    margin:0;

    font-size:17px;

    font-weight:600;

}

.transaction-left small{

    display:block;

    line-height:16px;

}

.transaction-icon{

    width:36px;

    height:36px;

    margin-right:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:16px;

}

.transaction-icon.income{

    background:#EAF8EE;

    color:#198754;

}

.transaction-icon.outcome{

    background:#FDECEC;

    color:#DC3545;

}

.transaction-card .text-end{

    min-width:110px;

    text-align:right;

}

.transaction-card strong{

    display:block;

    font-size:18px;

    font-weight:700;

    margin-bottom:6px;

}

.transaction-card .btn{

    width:28px;

    height:28px;

    padding:0;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

.transaction-card .btn + .btn{

    margin-left:4px;

}

.transaction-card .btn i{

    font-size:12px;

}
/* =========================================================
   BADGE
========================================================= */

.badge-in{

    background:#dff7e8;

    color:#12843d;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

}

.badge-out{

    background:#ffe5e5;

    color:#d72d2d;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

}

/* =========================================================
   FILTER
========================================================= */

.filter-card{

    background:#fff;

    border-radius:18px;

    padding:18px;

    margin-bottom:20px;

    box-shadow:var(--shadow);

}

/* =========================================================
   HISTORY SUMMARY
========================================================= */

/*.history-summary{*/

/*    display:grid;*/

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

/*    gap:12px;*/

/*    margin-bottom:20px;*/

/*}*/

/*.summary-item{*/

/*    background:#fff;*/

/*    border-radius:18px;*/

/*    padding:15px;*/

/*    text-align:center;*/

/*    box-shadow:var(--shadow);*/

/*}*/

.history-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    gap:12px;
    margin-bottom:20px;
}

.summary-item{
    width:100%;
    background:#fff;
    border-radius:18px;
    padding:15px;
    text-align:center;
    box-shadow:var(--shadow);
}

.summary-item small{
    color:var(--text-light);
}

.summary-item h5{
    margin-top:8px;
    margin-bottom:0;
}

/* =========================================================
   MASTER
========================================================= */

.master-card{

    background:#fff;

    border-radius:18px;

    padding:18px;

    margin-bottom:12px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:var(--shadow);

}

.master-card h6{

    margin-bottom:4px;

}

.master-card small{

    color:var(--text-light);

}

.btn-edit{

    width:38px;

    height:38px;

    border-radius:10px;

    background:#eef5ff;

    color:var(--primary);

}

.btn-delete{

    width:38px;

    height:38px;

    border-radius:10px;

    background:#ffe9e9;

    color:#d72d2d;

    margin-left:6px;

}

/* =========================================================
   FORM
========================================================= */

.form-control,

.form-select{

    border-radius:14px !important;

    height:48px;

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

    box-shadow:none !important;

}

.form-control:focus,

.form-select:focus{

    border-color:var(--primary);

}

textarea.form-control{

    height:auto;

    min-height:110px;

    resize:none;

}

/* =========================================================
   TRANSACTION TYPE
========================================================= */

.transaction-type{

    display:flex;

    gap:10px;

}

.transaction-type button{

    flex:1;

    height:48px;

    border-radius:14px;

    background:#f1f3f5;

    color:#555;

    font-weight:600;

    transition:.2s;

}

.transaction-type button.active{

    background:var(--primary);

    color:white;

}

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

.empty-data{

    text-align:center;

    padding:60px 20px;

    color:#888;

}

.empty-data i{

    font-size:60px;

    margin-bottom:15px;

    display:block;

}

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

.bottom-nav{

    position:fixed;

    left:50%;

    transform:translateX(-50%);

    bottom:15px;

    width:calc(100% - 20px);

    max-width:600px;

    height:72px;

    background:#ffffff;

    border-radius:22px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:
        0 15px 40px rgba(0,0,0,.15);

    z-index:900;

}

.nav-item{

    flex:1;

    height:100%;

    background:none;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#8b949e;

    transition:.25s;

}

.nav-item.active{

    color:var(--primary);

}

.nav-item i{

    font-size:22px;

}

.nav-item span{

    font-size:11px;

    margin-top:3px;

}

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

.nav-center{

    width:64px;

    height:64px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #005BAC,
        #0D84FF
    );

    color:white;

    margin-top:-35px;

    font-size:28px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 10px 25px rgba(0,91,172,.35);

    transition:.2s;

}

.nav-center:active{

    transform:scale(.94);

}

/* =========================================================
   LOADING
========================================================= */

.loading-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(4px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.loading-dialog{

    width:220px;

    background:white;

    border-radius:18px;

    padding:25px;

    text-align:center;

    box-shadow:var(--shadow);

}

/* =========================================================
   MODAL PAGE
========================================================= */

.modal-page{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:white;

    z-index:9500;

    overflow:auto;

    display:none;

}

.modal-page.show{

    display:block;

    animation:slideUp .25s;

}

.modal-header-custom{

    height:70px;

    background:linear-gradient(
        135deg,
        #005BAC,
        #0D84FF
    );

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

}

.modal-header-custom button{

    width:40px;

    height:40px;

    border-radius:50%;

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

    color:white;

}

.modal-body-custom{

    padding:20px;

}

/* =========================================================
   TOAST
========================================================= */

.toast{

    border:none;

    border-radius:16px;

    overflow:hidden;

}

.toast-header{

    background:var(--primary);

    color:white;

}

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

.btn{

    border-radius:14px;

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes slideUp{

    from{

        transform:translateY(25px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

.fade-in{

    animation:fade .25s;

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

::-webkit-scrollbar{

    width:7px;

}

::-webkit-scrollbar-thumb{

    background:#d5dbe3;

    border-radius:20px;

}

/* =========================================================
   TABLET
========================================================= */

@media(min-width:768px){

    .page{

        max-width:760px;

        margin:auto;

    }

    .bottom-nav{

        max-width:760px;

    }

}

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

@media(min-width:1200px){

    body{

        background:#edf2f7;

    }

    .page{

        max-width:900px;

    }

    .bottom-nav{

        max-width:900px;

    }

}

/* =========================================================
   DARK MODE
========================================================= */

body.dark{

    --bg:#101418;

    --surface:#1b222a;

    --text:#f3f4f6;

    --text-light:#b5bcc6;

    --border:#333b45;

}

.media-group{
    margin-bottom:18px;
}

.media-group-title{
    font-size:13px;
    font-weight:600;
    color:#666;
    margin-bottom:8px;
}

.media-grid{

    display:grid;

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

    gap:8px;

}

.media-item{

    border:1px solid #ddd;

    border-radius:10px;

    padding:10px;

    cursor:pointer;

    transition:.2s;

    background:#fff;

}

.media-item:hover{

    border-color:#0d6efd;

}

.media-item.active{

    background:#0d6efd;

    color:#fff;

    border-color:#0d6efd;

}