/* ---------- Global ---------- */

body{
font-family:Segoe UI, Arial;
background:#F4F9FF;
margin:0;
}


/* ---------- Topbar ---------- */

.topbar{
background:#0078D4;
color:white;
padding:14px 18px;
font-size:18px;
font-weight:600;
display:flex;
align-items:center;
}

.menu-btn{
background:none;
border:none;
color:white;
font-size:24px;
margin-right:12px;
cursor:pointer;
}


/* ---------- Layout ---------- */

.layout{
display:flex;
min-height:calc(100vh - 55px);
width:100%;
}


/* ---------- Sidebar ---------- */

.sidebar{
width:180px;
min-width:180px;
background:white;
border-right:1px solid #e5e5e5;
padding-top:20px;
transition:0.25s;
}

.sidebar a{
display:block;
padding:12px 20px;
text-decoration:none;
color:#333;
font-weight:500;
}

.sidebar a:hover{
background:#E6F2FB;
color:#0078D4;
}


/* ---------- Content ---------- */

.content{
flex:1;
padding:25px;
overflow:hidden;
}


/* ---------- Cards ---------- */

.card{
background:white;
padding:20px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
margin-bottom:20px;
width:100%;
}


/* ---------- Table ---------- */

table{
width:100%;
border-collapse:collapse;
margin-top:10px;
}

th{
background:#0078D4;
color:white;
padding:10px;
text-align:left;
}

td{
padding:10px;
border-bottom:1px solid #eee;
}


/* ---------- Buttons ---------- */

button{
background:#0078D4;
border:none;
color:white;
padding:10px 15px;
border-radius:4px;
cursor:pointer;
}

button:hover{
background:#005A9E;
}


/* ---------- Inputs ---------- */

input{
padding:8px;
width:100%;
margin-bottom:10px;
border:1px solid #ccc;
border-radius:4px;
}


/* ---------- Forms ---------- */

.form-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:10px;
}


/* ---------- Billing Layout ---------- */

.billing-grid{
display:grid;
grid-template-columns:65% 35%;
gap:20px;
}

.summary{
text-align:center;
}

.summary h2{
font-size:28px;
color:#0078D4;
}


/* ---------- Scanner ---------- */

#scanner{
margin-top:10px;
width:100%;
max-width:320px;
border-radius:6px;
overflow:hidden;
}

#scanner video{
width:100%;
height:auto;
}


/* ---------- Table Wrapper ---------- */

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


/* ---------- Footer ---------- */

.footer{
text-align:center;
padding:15px;
background:#111;
color:white;
font-size:13px;
}


/* ---------- Overlay ---------- */

.overlay{
display:none;
}


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

@media(max-width:1200px){

.billing-grid{
grid-template-columns:1fr;
}

}


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

@media(max-width:768px){

.layout{
display:block;
}


/* Sidebar drawer */

.sidebar{
position:fixed;
left:-200px;
top:0;
width:200px;
height:100%;
z-index:1000;
background:white;
box-shadow:2px 0 15px rgba(0,0,0,0.2);
}

.sidebar.show{
left:0;
}


/* Overlay */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
display:none;
z-index:900;
}

.overlay.show{
display:block;
}


/* Content spacing */

.content{
padding:18px;
}


/* Form stack */

.form-grid{
grid-template-columns:1fr;
}


/* Billing vertical */

.billing-grid{
grid-template-columns:1fr;
}


/* Scanner width */

#scanner{
max-width:100%;
}


/* Table size */

table{
font-size:14px;
}

}