/* ===================================
   MOBILE.CSS
   Applies to ALL pages
===================================*/

.mobile-nav{
    display:none;
}

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

@media screen and (max-width:992px){

.main{
    margin-left:0;
    width:100%;
    padding:20px;
}

.sidebar{
    display:none;
}

.mobile-nav{
    display:flex;
}

}

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

@media screen and (max-width:768px){

*{
    -webkit-tap-highlight-color:transparent;
}

body{

    display:block;

    padding-bottom:80px;

    overflow-x:hidden;

    background:#f4f6f9;

}

/* Hide Desktop Sidebar */

.sidebar{

    display:none;

}

/* Dashboard */

.main{

    width:100%;

    margin:0;

    padding:15px;

}

.topbar{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

    margin-bottom:20px;

}

.topbar h2{

    font-size:24px;

}

.topbar strong{

    font-size:15px;

}

/* Cards */

.cards{

    display:grid;

    grid-template-columns:1fr;

    gap:15px;

}

.card{

    padding:20px;

    border-radius:12px;

}

.card i{

    font-size:30px;

}

.card h1{

    font-size:30px;

}

.card p{

    font-size:15px;

}

/* Tables */

.table-section{

    padding:15px;

    overflow-x:auto;

}

table{

    min-width:650px;

}

table th{

    font-size:14px;

}

table td{

    font-size:14px;

    white-space:nowrap;

}

/* Forms */

form{

    width:100%;

}

input,
select,
textarea{

    width:100%;

    padding:12px;

    font-size:15px;

}

button,
.btn{

    width:100%;

    padding:13px;

    font-size:15px;

}

/* Images */

img{

    max-width:100%;

    height:auto;

}

/* Bottom Navigation */

.mobile-nav{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    height:70px;

    background:#ffffff;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:0 -3px 12px rgba(0,0,0,.12);

    z-index:9999;

}

.mobile-nav a{

    flex:1;

    text-decoration:none;

    color:#666;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    font-size:12px;

    height:100%;

}

.mobile-nav a i{

    font-size:22px;

    margin-bottom:4px;

}

.mobile-nav a:hover{

    color:#2563eb;

}

.mobile-nav a.active{

    color:#2563eb;

}

/* Hide Menu Button */

.menu-toggle{

    display:none;

}

}

/* ==========================
   SMALL PHONES
==========================*/

@media screen and (max-width:480px){

.main{

    padding:12px;

}

.topbar h2{

    font-size:20px;

}

.card{

    padding:18px;

}

.card h1{

    font-size:24px;

}

.card i{

    font-size:26px;

}

table th,
table td{

    font-size:13px;

}

.mobile-nav{

    height:65px;

}

.mobile-nav a i{

    font-size:20px;

}

.mobile-nav a{

    font-size:11px;

}

}


/* =====================================
   Cars List Mobile
=====================================*/

@media (max-width:768px){

.content-box{

    padding:15px;

}

.add-btn{

    width:100%;

    text-align:center;

    display:block;

    margin-bottom:15px;

}

.content-box table{

    display:block;

    width:100%;

}

.content-box tr{

    display:block;

    background:#fff;

    border-radius:12px;

    margin-bottom:18px;

    padding:15px;

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

}

.content-box tr:first-child{

    display:none;

}

.content-box td{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid #eee;

}

.content-box td:last-child{

    border-bottom:none;

}

.content-box td::before{

    content:attr(data-label);

    font-weight:bold;

    color:#2563eb;

}

.action{

    justify-content:center;

    gap:25px;

}

.action a{

    font-size:22px;

}

.status{

    padding:6px 12px;

}

}

/* ==========================================
   EXTRA SMALL DEVICES (399px and below)
==========================================*/

@media screen and (max-width:420px){

    body{
        padding-bottom:75px;
    }

    .main{
        padding:10px;
    }

    /* Topbar */

    .topbar{
        margin-bottom:15px;
        gap:8px;
    }

    .topbar h2{
        font-size:18px;
        line-height:1.3;
    }

    .topbar div{
        font-size:13px;
    }

    /* Content Box */

    .content-box{
        padding:10px;
        border-radius:10px;
    }

    /* Add Button */

    .add-btn{
        width:100%;
        display:block;
        padding:12px;
        font-size:14px;
        text-align:center;
        margin-bottom:15px;
    }

    .add-btn i{
        margin-right:6px;
    }

    /* Car Cards (mobile table rows) */

    .content-box tr{
        padding:12px;
        margin-bottom:15px;
        border-radius:10px;
    }

    .content-box td{
        padding:8px 0;
        font-size:12px;
        line-height:1.4;
        align-items:flex-start;
        gap:10px;
    }

    .content-box td::before{
        min-width:95px;
        font-size:12px;
        font-weight:600;
    }

    /* Status */

    .status{
        font-size:10px;
        padding:5px 10px;
        border-radius:14px;
    }

    /* Action Buttons */

    .action{
        justify-content:space-evenly !important;
        padding-top:8px;
    }

    .action a{
        width:34px;
        height:34px;
        display:flex;
        justify-content:center;
        align-items:center;
        border-radius:50%;
        background:#f3f4f6;
        font-size:15px;
        margin:0;
    }

    .action a:hover{
        background:#2563eb;
        color:#fff;
    }

    /* Bottom Navigation */

    .mobile-nav{
        height:65px;
    }

    .mobile-nav a{
        font-size:10px;
    }

    .mobile-nav a i{
        font-size:18px;
        margin-bottom:3px;
    }

    /* Forms */

    input,
    select,
    textarea{
        font-size:14px;
        padding:10px;
    }

    button,
    .btn{
        font-size:14px;
        padding:11px;
    }

}