/* ================================
   GLOBAL MOBILE FIRST RESET
================================ */


*{

    box-sizing:border-box;

}


body{

    margin:0;

    padding:0;

    font-family:
    Arial,
    sans-serif;

    background:#f8fafc;

}





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


.sidebar{

    position:fixed;

    left:0;

    top:0;

    width:240px;

    height:100vh;

}





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


.main{


    margin-left:240px;

    padding:20px;


}




/* ================================
   TOP BAR
================================ */


.topbar{


    display:flex;

    justify-content:space-between;

    align-items:center;

    background:white;

    padding:15px;

    border-radius:10px;

    margin-bottom:20px;


}






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


.box,
.form-box,
.content-box{


    background:white;

    border-radius:12px;

    padding:20px;

    box-shadow:

    0 5px 15px rgba(0,0,0,.05);


}







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


@media(max-width:768px){



body{

    padding-bottom:70px;

}





/* Hide desktop sidebar */


.sidebar{


    display:none;


}





.main{


    margin-left:0;

    padding:15px;


}





.topbar{


    flex-direction:column;

    align-items:flex-start;

    gap:10px;


}





/* Tables become cards */


table{


    border:0;


}



table thead{


    display:none;


}



table tr{


    display:block;

    background:white;

    margin-bottom:15px;

    border-radius:12px;

    padding:15px;

    box-shadow:

    0 3px 10px rgba(0,0,0,.08);


}



table td{


    display:flex;

    justify-content:space-between;

    border:none;

    padding:8px 0;


}



table td:before{


    content:attr(data-label);

    font-weight:bold;

    color:#64748b;


}





/* Forms */


.form-grid{


    display:block!important;


}



.form-group{


    margin-bottom:15px;


}



input,
select,
textarea,
button{


    width:100%;

    font-size:16px;


}





/* Buttons */


.action-btn,
.add-btn{


    width:100%;

    text-align:center;

    display:block;


}





/* Images */


.gallery{


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


}





}

.mobile-nav{


display:none;


}



@media(max-width:768px){



.mobile-nav{


display:flex;

position:fixed;

bottom:0;

left:0;

right:0;

height:65px;

background:white;

border-top:1px solid #ddd;

justify-content:space-around;

align-items:center;

z-index:999;


}



.mobile-nav a{


text-decoration:none;

color:#64748b;

font-size:12px;

text-align:center;


}



.mobile-nav i{


display:block;

font-size:20px;

margin-bottom:4px;


}



}