/* =========================================
   QUEENELS ADMIN MOBILE FRAMEWORK v1.0
========================================= */

/* Page Header */

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.page-title h3{
    font-size:28px;
    font-weight:700;
    margin:0;
}

.page-title p{
    color:#6c757d;
    margin-top:5px;
    margin-bottom:0;
}

/* Summary Cards */

.summary-card{
    border:none;
    border-radius:15px;
    transition:.3s;
}

.summary-card:hover{
    transform:translateY(-3px);
}

.summary-card .card-body{
    padding:20px;
}

.summary-card h6{
    color:#6c757d;
    margin-bottom:10px;
    font-size:14px;
}

.summary-card h3{
    margin:0;
    font-weight:700;
}

/* Search */

.search-box{
    position:relative;
}

.search-box input{
    padding-left:45px;
    border-radius:12px;
}

.search-box i{
    position:absolute;
    left:15px;
    top:14px;
    color:#999;
}

/* Tables */

.table-card{
    border:none;
    border-radius:15px;
}

.table thead{
    background:#f8f9fa;
}

.table td,
.table th{
    vertical-align:middle;
}

/* Mobile Cards */

.mobile-card{

    display:none;

    border-radius:15px;

    padding:18px;

    margin-bottom:15px;

    background:#fff;

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

}

.mobile-card h5{

    font-size:17px;

    margin-bottom:10px;

}

.mobile-card p{

    margin-bottom:6px;

}

.mobile-actions{

    display:flex;

    gap:10px;

    margin-top:15px;

}

.mobile-actions .btn{

    flex:1;

}

/* Responsive */

@media(max-width:768px){

    .page-title h3{

        font-size:22px;

    }

    /* ==========================================
       PAGES THAT USE MOBILE CARDS
    ========================================== */

    .customer-table .table-responsive,
    .staff-table .table-responsive,
    .expense-table .table-responsive,
    .booking-table .table-responsive{

        display:none;

    }

    .customer-table .mobile-card,
    .staff-table .mobile-card,
    .expense-table .mobile-card,
    .booking-table .mobile-card{

        display:block;

    }

    /* ==========================================
       PAGES THAT KEEP TABLES
    ========================================== */

    .quotation-table,
    .invoice-table,
    .receipt-table,
    .payment-table,
    .report-table{

        display:block !important;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

    .page-header{

        align-items:flex-start;

    }

    .page-header .btn{

        width:100%;

    }

    .summary-card{

        margin-bottom:15px;

    }

}