<style>

body{
font-family:Arial;
background:#f5f7fb;
padding:25px;
}

h2{
margin-bottom:20px;
}
/* SMARTID PROGRESS BAR */

.progressBar{

display:flex;
gap:12px;

margin-bottom:25px;

}

.progressStep{

display:flex;
align-items:center;
gap:8px;

padding:10px 16px;

background:#eeeeee;

border-radius:25px;

font-size:14px;

color:#333;

}

.progressStep.active{

background:#2ecc71;
color:white;

}

.stepNumber{

width:22px;
height:22px;

display:flex;
align-items:center;
justify-content:center;

background:white;
color:#2ecc71;

border-radius:50%;

font-size:12px;
font-weight:bold;

}

.progressStep.active .stepNumber{

background:white;
color:#2ecc71;

}

.stepLabel{

font-weight:500;

}



/* CARD */

.card{
background:white;
padding:20px;
border-radius:8px;
margin-bottom:20px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

/* ======================================================
MODULE : ORDER MANAGER BATCH SUMMARY
FILE : dashboard.css
PURPOSE : Show eligible student count in STEP-2
PREFIX : sm-
CONFLICT RISK : LOW
====================================================== */

.sm-batch-summary{
background:#f7f9fc;
padding:20px;
border-radius:8px;
margin-bottom:20px;
font-size:16px;
}

/* BOTTOM STICKY NAVIGATION - Order Manager */

.stickySteps{

position:fixed;
bottom:0;
left:0;
width:100%;

background:#ffffff;
border-top:1px solid #ddd;

display:flex;
justify-content:center;
gap:15px;

padding:12px 10px;

box-shadow:0 -2px 6px rgba(0,0,0,0.05);

z-index:999;

}

.stepBtn{

background:#f2f2f2;
border:none;

padding:8px 14px;

border-radius:20px;

font-size:13px;
cursor:pointer;

}

.stepBtn.active{

background:#2ecc71;
color:white;

}

/* DESIGN BOX */

.designBox{
display:inline-block;
width:150px;
margin-right:25px;
text-align:center;
}

.designBox img{
width:100px;
border:1px solid #ddd;
border-radius:5px;
margin-bottom:6px;
}

.designBox button{
background:#444;
color:white;
border:none;
padding:6px 10px;
border-radius:4px;
cursor:pointer;
margin-bottom:5px;
}

.designBox input{
margin-top:5px;
}

/* LOCK BUTTON */

.lockBtn{
background:#007bff;
color:white;
padding:10px 18px;
border:none;
border-radius:4px;
cursor:pointer;
margin-top:10px;
}

/* SUCCESS BOX */

.successBox{
background:#e6f7ff;
border:1px solid #b3e0ff;
padding:10px;
margin-bottom:15px;
}

/* MODAL PREVIEW */

.modal{
display:none;
position:fixed;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
}

.modalContent{
background:white;
margin:5% auto;
padding:20px;
width:350px;
text-align:center;
border-radius:8px;
position:relative;
}

.modalContent img{
width:250px;
}

.closeModal{
position:absolute;
top:10px;
right:15px;
font-size:22px;
cursor:pointer;
}


body{

font-family:Arial;
background:#f5f7fb;
padding:20px;

}


h2{

margin-bottom:20px;

}


/* PROGRESS BAR */

.progressBar{

display:flex;
gap:10px;
margin-bottom:25px;

}


.progressStep{

padding:10px 16px;
background:#ddd;
border-radius:20px;
font-size:14px;

}


.progressStep.active{

background:#28a745;
color:white;

}


/* CARD */

.card{

background:white;
padding:20px;
border-radius:8px;
margin-bottom:20px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);

}


/* DESIGN */

.designBox{

display:inline-block;
margin-right:20px;
text-align:center;

}


.designBox img{

width:90px;
border:1px solid #ddd;
padding:3px;
border-radius:5px;

}


/* BUTTON */

.lockBtn{

background:#007bff;
color:white;
padding:10px 18px;
border:none;
border-radius:4px;
cursor:pointer;

}

.workArea{

padding:30px;
min-height:500px;

}



.stepTabs{

position:fixed;
bottom:0;
left:0;
width:100%;
background:#ffffff;
border-top:1px solid #ddd;
text-align:center;
padding:12px;

}



.stepTabs button{

padding:10px 18px;
margin:4px;
border:none;
background:#eee;
border-radius:20px;
cursor:pointer;

}



.stepTabs button.active{

background:#28a745;
color:white;

}

/* SUCCESS MESSAGE */

.successBox{

background:#e6f7ff;
border:1px solid #b3e0ff;
padding:10px;
margin-bottom:15px;

}

.tabContent{
display:none;
}

.tabContent.active{
display:block;
}

.btn-view{
    background:#4a6cf7;
    color:#fff;
    padding:6px 10px;
    text-decoration:none;
    border-radius:4px;
    font-size:12px;
    font-weight:bold;
}

.btn-view:hover{
    background:#3954c7;
}


/* ===== PREMIUM UI BASE ===== */

body{
margin:0;
font-family:system-ui;
background:#f4f6f8;
}

.header{
background:#1976d2;
color:#fff;
padding:15px;
display:flex;
align-items:center;
gap:15px;
}

.header img{
height:40px;
}

.container{
padding:20px;
}

/* ===== TABS ===== */

.tabs{
display:flex;
gap:10px;
margin-bottom:15px;
flex-wrap:wrap;
}

.tabBtn{
background:#e3f2fd;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.tabBtn.active{
background:#1976d2;
color:#fff;
}

.tabContent{
display:none;
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.tabContent.active{
display:block;
}

/* ===== PROGRESS BAR ===== */

.progress{
background:#eee;
height:22px;
border-radius:12px;
overflow:hidden;
margin-top:10px;
}

.progress div{
background:#4CAF50;
height:100%;
}

/* ===== TABLE ===== */

table{
width:100%;
border-collapse:collapse;
}

td,th{
padding:8px;
border-bottom:1px solid #eee;
}

th{
background:#fafafa;
}

table{
    width:100%;
    border-collapse:collapse;
}

table td{
    padding:8px;
    border-bottom:1px solid #e0e6ed;
    font-size:13px;
}

/* TABLE HEADER STYLE */

table thead th{
    background:#2c3e50;
    color:#ffffff;
    padding:10px;
    font-weight:bold;
    text-transform:uppercase;
    font-size:13px;
    border-bottom:2px solid #1a252f;
}

/* TABLE ROW DIFFERENTIATION */

table tbody tr:nth-child(even){
    background:#f5f7fa;
}

table tbody tr:nth-child(odd){
    background:#ffffff;
}

table tbody tr:hover{
    background:#e8f0fe;
}

/* ===== CARDS (Growth Solutions) ===== */

.cardGrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:12px;
}

.card{
background:#ffffff;
padding:16px;
border-radius:10px;
border:1px solid #e6e6e6;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
transition:0.2s;
}

.card:hover{
transform:translateY(-2px);
}

.card h4{
margin:0 0 6px 0;
color:#1976d2;
}

.support{
margin-top:15px;
padding:10px;
background:#e3f2fd;
border-radius:6px;
}

/* ORDER MANAGER SECTION */

.orderTitle{
font-size:22px;
font-weight:600;
margin-bottom:15px;
color:#1976d2;
}

.orderStep{
font-size:15px;
font-weight:500;
margin-bottom:8px;
color:#444;
}

.orderBox{
padding:12px;
background:#f7f9fc;
border-radius:6px;
border:1px solid #e6e6e6;
margin-top:8px;
}

/* ===== SMARTID HEALTH ENGINE PREMIUM ===== */

.healthEngine{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:12px;
margin:15px 0;
}

.healthCard{
background:#fff;
padding:14px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
border-left:5px solid #ccc;
transition:.2s;
}

.healthCard:hover{
transform:translateY(-2px);
}

.hLabel{
font-size:13px;
color:#666;
}

.hValue{
font-size:22px;
font-weight:bold;
margin-top:6px;
}

.healthCard.total{ border-color:#607D8B; }
.healthCard.draft{ border-color:#FF9800; }
.healthCard.awaiting{ border-color:#2196F3; }
.healthCard.ready{ border-color:#4CAF50; }
.healthCard.attention{ border-color:#E91E63; }

.sm-batch-summary{
font-size:18px;
margin-bottom:20px;
}

.cardTypeSelect{
background:#f7f7f7;
padding:15px;
border-radius:6px;
}

.primaryBtn{
background:#27ae60;
color:white;
padding:12px 20px;
border:none;
border-radius:5px;
cursor:pointer;
font-size:16px;
}

</style>