/* =====================================================
   AJO BANKER - GLOBAL APPLICATION CSS
   Version: Clean Foundation
===================================================== */


/* ==============================
   IMPORTS
============================== */

@import "variables.css";
@import "reset.css";


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

*,
*::before,
*::after{

    box-sizing:border-box;

}


html,
body{

    width:100%;
    min-height:100%;

}


body{

    margin:0;

    font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

    background:#EFF6FF;

    color:#0F172A;

    overflow-x:hidden;

}


a{

    text-decoration:none;

    color:inherit;

}


img{

    max-width:100%;

    display:block;

}



/* ==============================
   APPLICATION STRUCTURE
============================== */


.app{

display:flex;

min-height:100vh;

}

.main{

flex:1;

display:flex;

flex-direction:column;

margin-left:260px;

transition:margin-left .3s ease;

}

.main.collapsed{

margin-left:80px;

}





/*
 Content area sits below navbar

 Sidebar controls width.
 Navbar controls top spacing.

*/

.content{

margin-top:70px;

padding:25px;

}



/* ==============================
   PAGE TITLES
============================== */


.page-title{

    font-size:26px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:20px;

}


.page-subtitle{

    color:#64748B;

    font-size:15px;

}



/* ==============================
   CONTAINERS
============================== */


.container{

    width:100%;

    max-width:1200px;

    margin:auto;

}



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


.card{

    background:#FFFFFF;

    border-radius:16px;

    padding:20px;


    border:

    1px solid #E2E8F0;


    box-shadow:

    0 5px 20px rgba(15,23,42,.05);


}



.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}



.card-title{

    font-size:18px;

    font-weight:700;

    color:#0F172A;

}



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


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;


    padding:

    11px 20px;


    border-radius:10px;


    border:none;


    cursor:pointer;


    font-size:14px;

    font-weight:600;


    transition:.2s ease;

}



.btn:hover{

    transform:translateY(-1px);

}



/* Primary */

.btn-primary{

    background:#1E3A8A;

    color:white;

}



.btn-primary:hover{

    background:#162D6B;

}



/* Success */

.btn-success{

    background:#10B981;

    color:white;

}


.btn-success:hover{

    background:#047857;

}




/* Secondary */

.btn-secondary{

    background:#64748B;

    color:white;

}




/* Danger */

.btn-danger{

    background:#DC2626;

    color:white;

}




/* Outline */


.btn-outline{

    background:white;

    border:

    1px solid #1E3A8A;

    color:#1E3A8A;

}


.btn-outline:hover{

    background:#EFF6FF;

}



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


.badge{

    display:inline-flex;

    align-items:center;

    padding:

    5px 12px;


    border-radius:20px;


    font-size:12px;

    font-weight:600;

}



.badge-success{

    background:#D1FAE5;

    color:#047857;

}



.badge-warning{

    background:#FEF3C7;

    color:#92400E;

}



.badge-danger{

    background:#FEE2E2;

    color:#991B1B;

}





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


.stats-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:20px;

}



.stat-card{

    background:#fff;

    padding:20px;

    border-radius:15px;


    border:

    1px solid #E2E8F0;


    display:flex;

    align-items:center;

    gap:15px;


}



.stat-icon{

    width:55px;

    height:55px;

    border-radius:14px;


    background:#EFF6FF;

    color:#1E3A8A;


    display:flex;

    align-items:center;

    justify-content:center;

}



.stat-card h6{

    margin:0;

    color:#64748B;

    font-size:13px;

}



.stat-card h2{

    margin-top:8px;

    margin-bottom:0;

    color:#1E3A8A;

}



/* ==============================
   GLOBAL RESPONSIVENESS
============================== */

@media (max-width:768px){

.main{

margin-left:0 !important;

width:100%;

}

@media(max-width:768px){


.content{

    padding:15px;

}



.page-title{

    font-size:21px;

}



.card{

    padding:15px;

}



.stats-grid{

    grid-template-columns:

    1fr;

}


}



@media(max-width:480px){


.content{

    padding:12px;

}



.btn{

    width:100%;

}


}