/* =========================
   GLOBAL
========================= */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Segoe UI',sans-serif;
background:#f4f7f7;
}

.container{
max-width:100%;
padding:12px;
margin:auto;
}


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

.card{
background:white;
display:flex;
flex-direction:column;
align-items:stretch;
padding:15px;
border-radius:15px;
margin-bottom:15px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
overflow:hidden;
}

.title{
font-weight:bold;
margin-bottom:10px;
color:#2e7d77;
}


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

.table-wrapper{
width:100%;
overflow-x:auto;
}

table{
width:100%;
border-collapse:collapse;
}

th, td{
padding:12px;
border-bottom:1px solid #eee;
font-size:14px;
}

th{
background:#e0f2f1;
}


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

.btn{
padding:6px 12px;
border:none;
border-radius:10px;
background:#26a69a;
color:white;
cursor:pointer;
font-size:13px;
display:inline-block;
text-decoration:none;
}

.btn:hover{
opacity:0.9;
}


/* =========================
   STATUS
========================= */

.lunas{
color:#2e7d32;
font-weight:bold;
}

.belum{
color:#c62828;
font-weight:bold;
}


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

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


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

.summary-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:10px;
}

.summary-item{
padding:15px;
border-radius:12px;
font-size:14px;
}


/* FORCE CENTER PAGINATION */

/* FORCE ABSOLUTE CENTER PAGINATION */

.pagination-outer{

position:relative;

width:100%;

height:auto;

margin-top:40px;

margin-bottom:30px;

}


.pagination{

position:relative;

left:50%;

transform:translateX(-50%);

display:inline-flex;

gap:12px;

}



.page-btn{

padding:8px 18px;

background:#26a69a;

color:white;

border-radius:20px;

border:none;

cursor:pointer;

font-size:14px;

}


.page-btn.active{

background:#2e7d77;

}




/* =========================
   DESKTOP / MOBILE CONTROL
========================= */

/* default desktop */



/* MOBILE CARD COMPACT */

.panitia-card{

background:#ffffff;
border-radius:12px;
padding:10px 12px;
margin-bottom:10px;

box-shadow:0 1px 4px rgba(0,0,0,0.08);

}

.panitia-nama{

font-size:14px;
font-weight:600;
color:#2e7d77;
margin-bottom:2px;

}

.panitia-instansi{

font-size:12px;
color:#777;
margin-bottom:4px;

}

.panitia-status{

font-size:12px;
font-weight:bold;
margin-bottom:6px;

}

.panitia-aksi{

display:flex;
gap:6px;

}

.panitia-aksi .btn{

padding:5px 10px;
font-size:12px;
border-radius:8px;

}


/* =========================
   MOBILE CARD WITH BORDER TABLE STYLE
========================= */

.panitia-card{

background:#ffffff;

border:1px solid #e0e0e0;

border-radius:12px;

margin-bottom:12px;

overflow:hidden;

box-shadow:0 1px 3px rgba(0,0,0,0.08);

}


/* header */

.panitia-nama{

padding:10px 12px;

font-size:15px;

font-weight:600;

color:#2e7d77;

border-bottom:1px solid #eeeeee;

}


/* instansi */

.panitia-instansi{

padding:8px 12px;

font-size:13px;

color:#666;

border-bottom:1px solid #eeeeee;

background:#fafafa;

}


/* status */

.panitia-status{

padding:8px 12px;

font-size:13px;

font-weight:bold;

border-bottom:1px solid #eeeeee;

}


/* tombol */

.panitia-aksi{

padding:8px 12px;

display:flex;

gap:8px;

flex-wrap:wrap;

}


/* mobile only */

@media(max-width:768px){

#mobile_container{

padding:5px;

}

}
/* MOBILE CARD TABLE STYLE */

.panitia-card{

border:1px solid #ddd;

border-radius:10px;

margin-bottom:12px;

background:white;

overflow:hidden;

}


/* setiap baris */

.panitia-row{

padding:10px 12px;

border-bottom:1px solid #e0e0e0;

}


/* hilangkan border terakhir */

.panitia-row:last-child{

border-bottom:none;

}


/* nama */

.panitia-nama{

font-weight:bold;

color:#2e7d77;

font-size:15px;

}


/* instansi */

.panitia-instansi{

font-size:13px;

color:#666;

background:#fafafa;

}


/* status */

.panitia-status{

font-size:13px;

}


/* aksi */

.panitia-aksi{

display:flex;

gap:6px;

flex-wrap:wrap;

}