/*====================================================
RESTAURANT POS
Version 2.0
====================================================*/

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

body{

    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
    background:#f4f6fb;
    color:#222;

}

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

.sidebar{

    position:fixed;
    left:0;
    top:0;
    width:250px;
    height:100vh;

    background:#111827;

    color:#fff;

    overflow-y:auto;

    box-shadow:4px 0 18px rgba(0,0,0,.18);

    z-index:999;

}

.sidebar .logo{

    text-align:center;

    padding:25px;

    font-size:24px;

    font-weight:bold;

    border-bottom:1px solid rgba(255,255,255,.1);

}

.sidebar a{

    display:block;

    color:#d1d5db;

    text-decoration:none;

    padding:15px 22px;

    transition:.25s;

    font-size:15px;

}

.sidebar a i{

    width:25px;

}

.sidebar a:hover{

    background:#2563eb;

    color:white;

}

.sidebar a.active{

    background:#10b981;

    color:white;

    border-left:5px solid #fff;

}

.sidebar hr{

    border-color:#374151;

}

/*====================================================
CONTENU
====================================================*/

.main{

    margin-left:250px;

    padding:25px;

    min-height:100vh;

}

h1{

    color:#222;

    font-size:30px;

    margin-bottom:20px;

}

h2{

    color:#333;

}

/*====================================================
CARTES
====================================================*/

.card{

    border:none;

    border-radius:18px;

    box-shadow:0 6px 20px rgba(0,0,0,.08);

}

.card-header{

    border-radius:18px 18px 0 0 !important;

    font-weight:bold;

}

/*====================================================
POS
====================================================*/

.pos{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.products-area{

    width:65%;

}

.cart{

    width:35%;

    background:#1b1d2e;

    color:white;

    padding:20px;

    border-radius:20px;

    position:sticky;

    top:20px;

}

/*====================================================
RECHERCHE
====================================================*/

.search{

    height:45px;

    border:none !important;

    background:#fff !important;

    color:#222 !important;

    border-radius:12px;

}

.search::placeholder{

    color:#777;

}

/*====================================================
CATEGORIES
====================================================*/

.categories{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:15px 0;

}

.cat-btn{

    background:#292b45;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:25px;

    cursor:pointer;

    transition:.25s;

}

.cat-btn:hover{

    background:#ff7900;

}

/*====================================================
PRODUITS
====================================================*/

.products{

    display:grid;

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

    gap:15px;

}

.product-card{

    background:#24263d;

    color:white;

    border-radius:18px;

    padding:15px;

    text-align:center;

    transition:.25s;

}

.product-card:hover{

    transform:translateY(-4px);

}

.product-card img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:10px;

}

.product-card h3{

    font-size:16px;

    margin:8px 0;

}

.price{

    color:#ff7900;

    font-size:22px;

    font-weight:bold;

    margin:10px 0;

}

.btn-orange{

    width:100%;

    border:none;

    border-radius:20px;

    background:#ff7900;

    color:white;

    padding:10px;

    font-weight:bold;

    transition:.25s;

}

.btn-orange:hover{

    background:#ff9500;

}
/*====================================================
PANIER
====================================================*/

.cart h2{

    color:#fff;

    margin-bottom:20px;

}

.cart-item{

    background:#2b2e48;

    border-radius:18px;

    padding:15px;

    margin-bottom:15px;

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

    transition:.25s;

}

.cart-item:hover{

    transform:translateY(-2px);

}

.cart-item-title{

    font-size:18px;

    font-weight:bold;

    margin-bottom:10px;

}

.qty-box{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:10px;

}

.qty-btn{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

}

.qty-minus{

    background:#dc3545;

    color:white;

}

.qty-plus{

    background:#28a745;

    color:white;

}

.price-line{

    margin-top:10px;

    text-align:right;

    color:#ff9800;

    font-size:20px;

    font-weight:bold;

}

/*====================================================
TOTAL
====================================================*/

.total-box{

    background:#ff7900;

    color:white;

    border-radius:25px;

    padding:20px;

    margin:20px 0;

    text-align:center;

}

.total-box h2{

    margin:0;

    font-size:38px;

    color:white;

}

/*====================================================
FORMULAIRES
====================================================*/

.form-control,
.form-select,
textarea,
input,
select{

    background:#24263d !important;

    color:white !important;

    border:none !important;

    border-radius:12px !important;

}

.form-control::placeholder{

    color:#bbb !important;

}

/*====================================================
BOUTONS
====================================================*/

.btn{

    border-radius:10px;

    font-weight:600;

}

.payment-btn{

    height:85px;

    font-size:18px;

    border-radius:15px;

    transition:.2s;

}

.payment-btn:hover{

    transform:scale(1.03);

}

.payment-selected{

    background:#ff7900 !important;

    color:white !important;

    border:none !important;

}

.cancel{

    background:#dc3545;

    color:white;

    border:none;

    width:100%;

    padding:12px;

    border-radius:15px;

}

/*====================================================
TABLEAUX
====================================================*/

.table{

    background:white;

    border-radius:15px;

    overflow:hidden;

}

.table th{

    background:#ff7900;

    color:white;

    border:none;

}

.table td{

    vertical-align:middle;

}

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

.badge{

    border-radius:20px;

    padding:8px 12px;

}

/*====================================================
MODALS
====================================================*/

.modal-content{

    border:none;

    border-radius:18px;

}

.modal-header{

    background:#ff7900;

    color:white;

}

.modal-header .btn-close{

    filter:invert(1);

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#888;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#666;

}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:1200px){

.products{

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

}

}

@media(max-width:992px){

.main{

margin-left:0;

}

.sidebar{

position:relative;

width:100%;

height:auto;

}

.pos{

flex-direction:column;

}

.products-area,

.cart{

width:100%;

}

.products{

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

}

}

@media(max-width:576px){

.products{

grid-template-columns:1fr;

}

.product-card img{

width:80px;

height:80px;

}

.main{

padding:15px;

}

.sidebar .logo{

font-size:20px;

}

}

/* ==========================
TABLEAU DASHBOARD
========================== */

.dashboard-table{

    background:#24263d;
    border-radius:12px;
    overflow:hidden;

}

.dashboard-table table{

    color:white !important;

}

.dashboard-table thead{

    background:#ff7900;
    color:white;

}

.dashboard-table thead th{

    color:white;
    font-weight:bold;
    border:none;

}

.dashboard-table tbody tr{

    background:#2b2e48;
    transition:.2s;

}

.dashboard-table tbody tr:hover{

    background:#34385a;

}

.dashboard-table td{

    color:white;
    border-color:#3a3d5c;

}