/* GENERAL */

body{

font-family: Arial, Helvetica, sans-serif;
margin:20px;
background:#f5f5f5;

}



/* LINKS */

a{

text-decoration:none;
color:white;
background:#e11d48;
padding:8px 12px;
border-radius:5px;
margin-right:5px;
display:inline-block;

}

a:hover{
background:#be123c;
}

/* TABLE */

table{

width:100%;
border-collapse:collapse;
background:white;

}

th{

background:#111827;
color:white;
padding:10px;
font-size:14px;

}

td{

padding:10px;
border-bottom:1px solid #ddd;
font-size:14px;

}

/* DETAILS COLUMN */

.order-details{
max-width:250px;
}

/* COPY CODE */

.copy-code{

cursor:pointer;
font-weight:bold;

}

.copy-code:hover{
color:#e11d48;
}

/* RUSH ORDER */

.rush-order{

background:#fff1f2;
border-left:6px solid #ef4444;

}

.rush-badge{

background:#ef4444;
color:white;
font-size:10px;
padding:3px 6px;
border-radius:4px;
margin-left:5px;

}

/* FORMS */

input, textarea, select{

width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:6px;
margin-top:5px;

}

button{

background:#e11d48;
color:white;
border:none;
padding:10px 15px;
border-radius:6px;
cursor:pointer;

}

button:hover{
background:#be123c;
}

/* BACK BUTTON */

.back-btn{
margin-bottom:10px;
}

/* MOBILE DESIGN */

@media (max-width:768px){

body{
margin:10px;
}

/* TABLE → MOBILE */

table, thead, tbody, th, td, tr{
display:block;
}

thead{
display:none;
}

tr{

background:white;
margin-bottom:10px;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
padding:10px;

}

td{

border:none;
padding:6px 0;

}

td:before{

font-weight:bold;
display:block;
color:#555;

}

/* COLUMN LABELS */

td:nth-child(1):before{content:"Order Code";}
td:nth-child(2):before{content:"Customer";}
td:nth-child(3):before{content:"Details";}
td:nth-child(4):before{content:"Status";}
td:nth-child(5):before{content:"Total";}
td:nth-child(6):before{content:"Downpayment";}
td:nth-child(7):before{content:"Balance";}
td:nth-child(8):before{content:"Target Date";}
td:nth-child(9):before{content:"Action";}

}

/* DASHBOARD CENTER */

.dashboard-container{

max-width:900px;
margin:auto;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);

}

/* SECTION TITLE */

.section-title{

margin-top:30px;
margin-bottom:10px;

}

/* GRID */

.dashboard-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:15px;

}

/* CARDS */

.card{

background:#f9fafb;
padding:20px;
border-radius:8px;
text-align:center;
border:1px solid #eee;

}

.card h4{

margin-bottom:10px;
color:#444;

}

.card p{

font-size:22px;
font-weight:bold;
color:#e11d48;

}

/* BUTTONS */

.btn{

background:#e11d48;
color:white;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
display:inline-block;
margin-bottom:15px;

}

.dashboard-actions{

margin-top:25px;
display:flex;
flex-wrap:wrap;
gap:10px;

}

.dashboard-actions a{

background:#e11d48;
color:white;
padding:10px 14px;
border-radius:6px;
text-decoration:none;

}

.dashboard-actions a:hover{

background:#be123c;

}

/* MOBILE */

@media (max-width:600px){

.dashboard-container{
padding:20px;
}

.card p{
font-size:20px;
}

}

/* INCOME GRID */

.income-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;

}

/* SMALLER CARDS */

.income-card{

padding:15px;

}

.income-card h4{

font-size:14px;
margin-bottom:5px;

}

.income-card p{

font-size:18px;
color:#e11d48;
font-weight:bold;

}

/* MOBILE FIX */

@media (max-width:600px){

.income-grid{

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

}

.income-card{

padding:12px;

}

.income-card h4{
font-size:13px;
}

.income-card p{
font-size:16px;
}

}
.dashboard{

max-width:1000px;
margin:auto;

}

.dash-header{

margin-bottom:20px;

}

.dash-header h2{

margin-bottom:5px;

}

.dash-section{

margin-top:25px;

}

.dash-grid{

display:grid;
gap:15px;

}

.income-grid{

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

}

.orders-grid{

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

}

.card{

background:white;
padding:18px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);

}

.card span{

font-size:13px;
color:#666;

}

.card h2{

margin-top:5px;
color:#e11d48;

}

.active{border-top:4px solid #3b82f6;}
.designing{border-top:4px solid #f59e0b;}
.printing{border-top:4px solid #8b5cf6;}
.delivery{border-top:4px solid #10b981;}
.completed{border-top:4px solid #6b7280;}

.dash-actions{

margin-top:30px;
display:flex;
gap:10px;
flex-wrap:wrap;

}

.dash-actions a{

background:#e11d48;
color:white;
padding:10px 14px;
border-radius:6px;
text-decoration:none;

}

.dash-actions a:hover{

background:#be123c;

}


.rush{
border-top:4px solid #ef4444;
}

.rush h2{
color:#ef4444;
}

@media (max-width:768px){

.income-grid{

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

}

.orders-grid{

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

}

.card h2{

font-size:20px;

}

}

.chart-box{

background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
margin-top:20px;

}

.delete-btn{

color:white;
background:#dc2626;
padding:5px 10px;
border-radius:4px;
text-decoration:none;

}

.delete-btn:hover{

background:#b91c1c;

}

.rush-box{
margin:10px 0 20px 0;
}

.rush-label{
display:flex;
align-items:center;
gap:10px;
font-weight:bold;
}

.rush-label input{
width:auto !important;
height:18px;
cursor:pointer;
}

.form-container{

max-width:500px;
margin:auto;
padding:20px;
background:white;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);

}

/* INPUTS */

input,
textarea,
button{

width:100%;
box-sizing:border-box;
padding:12px;
margin-top:5px;
margin-bottom:15px;
font-size:16px;

}

/* MOBILE */

@media (max-width:600px){

.form-container{

margin:10px;
padding:15px;

}

h2{

font-size:22px;

}

}

.graph-box{
display:none;
margin-top:20px;
}

.income-box{
display:none;
margin-top:20px;
}

.toggle-graph,
.toggle-income{
background:#e11d48;
color:white;
border:none;
padding:10px 16px;
border-radius:6px;
cursor:pointer;
margin-top:10px;
margin-bottom:10px;
}

.toggle-graph:hover,
.toggle-income:hover{
background:#be123c;
}

/* MESSENGER BUTTON */

.messenger-float{
position:fixed;
bottom:20px;
right:20px;
background:#0084ff;
color:white;
padding:12px 16px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

h2{
text-align:center;

font-size:26px;
margin-bottom:25px;
}