@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

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

body{
    font-family:'Inter',sans-serif;
    background:#f1f5f9;
    color:#0f172a;
}

/* =========================
   LAYOUT
========================= */

.main-layout{
    display:flex;
    min-height:100vh;
}

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

.sidebar{
    width:250px;
    background:#172033;
    min-height:100vh;
    padding:25px 20px;
    position:fixed;
    top:0;
    left:0;
    overflow-y:auto;
    z-index:999;
}

.sidebar h2{
    color:#fff;
    margin-bottom:30px;
    font-size:28px;
}

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.sidebar nav a{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#d1d5db;
    padding:14px 16px;
    border-radius:14px;
    transition:0.3s;
    font-weight:500;
}

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

/* =========================
   MAIN CONTENT
========================= */

.main-content{
    margin-left:250px;
    width:calc(100% - 250px);
    padding:20px;
}

/* =========================
   TOPBAR
========================= */

.topbar{
    background:#fff;
    border-radius:20px;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:15px;
}

.topbar-left h2{
    font-size:32px;
}

.topbar-right{
    font-size:15px;
}

/* =========================
   HAMBURGER
========================= */

#mobileMenuBtn{
    display:none;
}

/* =========================
   PAGE CONTENT
========================= */

.page-content{
    padding:5px;
}

/* =========================
   CARD
========================= */

.card-box{
    background:#fff;
    border-radius:18px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.card-header{
    margin-bottom:20px;
}

.card-header h2{
    font-size:24px;
}

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

.dashboard-cards{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:20px;
}

.dashboard-card{
    background:#fff;
    border-radius:18px;
    padding:25px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.dashboard-card h3{
    color:#64748b;
    margin-bottom:10px;
}

.dashboard-card h1{
    font-size:38px;
    color:#2563eb;
}

/* =========================
   GRID
========================= */

.dashboard-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

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

button,
.btn{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    cursor:pointer;
    transition:0.3s;
    font-size:15px;
}

button:hover,
.btn:hover{
    opacity:0.9;
}

/* =========================
   INPUT
========================= */

input,
select,
textarea{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:12px;
    margin-top:5px;
    font-size:15px;
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

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

.pos-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

.products,
.cart-area{
    background:#fff;
    padding:20px;
    border-radius:18px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

/* =========================
   PRODUCT
========================= */

.product-item{
    border:1px solid #eee;
    border-radius:14px;
    padding:18px;
    margin-bottom:15px;
    transition:0.3s;
}

.product-item:hover{
    border-color:#2563eb;
}

.product-item h4{
    margin-bottom:10px;
}

.product-item h3{
    margin-top:10px;
    color:#2563eb;
}

/* =========================
   CART
========================= */

.cart-item{
    border-bottom:1px solid #eee;
    padding:15px 0;
}

.qty-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0;
}

.qty-actions button{
    width:35px;
    height:35px;
    padding:0;
}

/* =========================
   BARCODE
========================= */

.barcode-box{
    background:#fff;
    padding:20px;
    border-radius:18px;
    margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

/* =========================
   REPORT
========================= */

.report-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin:20px 0;
}

.report-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.report-card h3{
    margin-bottom:10px;
    color:#64748b;
}

.report-card h2{
    color:#2563eb;
}

/* =========================
   TABLE
========================= */

.table-wrapper{
    overflow-x:auto;
}

.table-modern{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.table-modern th{
    background:#2563eb;
    color:#fff;
    padding:15px;
    text-align:left;
}

.table-modern td{
    padding:14px;
    border-bottom:1px solid #eee;
}

.table-modern tr:hover{
    background:#f8fafc;
}

/* =========================
   LOGIN
========================= */

.login-body{
    margin:0;
    padding:0;
    background:#f1f5f9;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.login-card{
    background:#fff;
    width:100%;
    max-width:420px;
    padding:40px;
    border-radius:24px;
    box-shadow:
    0 10px 30px rgba(0,0,0,0.1);
}

.login-logo{
    text-align:center;
    margin-bottom:20px;
}

.login-logo img{
    width:80px;
    max-width:100%;
    height:auto;
}

.login-card h1{
    text-align:center;
    margin-bottom:10px;
}

.login-card p{
    text-align:center;
    color:#64748b;
    margin-bottom:30px;
}

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

@media(max-width:768px){

    body{
        overflow-x:hidden;
    }

    /* SIDEBAR */

    .sidebar{
        left:-260px;
        transition:0.3s;
        width:220px;
    }

    .sidebar.show-sidebar{
        left:0;
    }

    /* MAIN */

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

    /* TOPBAR */

    .topbar{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        padding:18px;
    }

    .topbar-left{
        width:100%;
    }

    .topbar-left h2{
        font-size:24px;
    }

    /* HAMBURGER */

    #mobileMenuBtn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:50px;
        height:50px;
        border:none;
        border-radius:14px;
        background:#2563eb;
        color:#fff;
        font-size:30px;
        cursor:pointer;
    }

    /* GRID */

    .dashboard-cards,
    .dashboard-grid-2,
    .pos-grid{
        grid-template-columns:1fr;
    }

    /* POS ORDER */

    .products{
        order:1;
    }

    .cart-area{
        order:2;
    }

    /* BUTTON */

    button,
    .btn{
        width:100%;
    }

    /* TABLE */

    .table-modern{
        min-width:650px;
    }

    /* LOGIN */

    .login-card{
        padding:30px 25px;
    }

}

/* DESKTOP ONLY */

@media(min-width:769px){

    #mobileMenuBtn{
        display:none !important;
    }

    .sidebar{
        left:0 !important;
    }

}

.user-info{

    display:flex;
    align-items:center;
    gap:12px;

    font-size:14px;

    background:#f8fafc;

    padding:10px 15px;

    border-radius:12px;
}

.warehouse-badge{

    background:#2563eb;
    color:#fff;

    padding:8px 12px;

    border-radius:10px;

    font-size:13px;

    font-weight:600;
}