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

.mysp_monsis_report_modal{

	position:fixed;
	inset:0;

	display:none;

	align-items:center;
	justify-content:center;

	padding:20px;

	background:rgba(0,0,0,.55);

	z-index:999999;

	box-sizing:border-box;

}

.mysp_monsis_report_modal.show{

	display:flex;

}

.mysp_monsis_report_modal_box{

	position:relative;

	width:900px;
	max-width:100%;

	max-height:92vh;

	background:#fff;

	border-radius:10px;

	display:flex;
	flex-direction:column;

	overflow:hidden;

	box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.mysp_monsis_report_close{
	position:absolute;
	top:10px;
	right:10px;
	z-index:10;
	width:32px;
	height:32px;

	background:#fff;
	color:red;

	border:1px solid #ddd;
	border-radius:50%;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:18px;
	font-weight:600;

	padding:0;
	margin:0;

	line-height:1;

	cursor:pointer;

	box-sizing:border-box;
}


.mysp_monsis_report_close:hover{
	background:black;
	color:red;
	font-weight:bold;
}

.mysp_monsis_report_content{

	padding:25px;

	overflow:auto;

}

.mysp_monsis_report_table,
.mysp_monsis_report_table tbody,
.mysp_monsis_report_table tr,
.mysp_monsis_report_table td{
	border:1px solid #e5e7eb !important;
	font-family: "Poppins", sans-serif;
}


@media(max-width:786px){

	.mysp_monsis_report_table thead{
		display:none;
	}


	.mysp_monsis_report_table,
	.mysp_monsis_report_table tbody,
	.mysp_monsis_report_table tr,
	.mysp_monsis_report_table td{
		border: none !important;
		display:block;
		width:100%;
	}


	.mysp_monsis_report_table tr{

		margin-bottom:15px;
		background:#fff;
		border-radius:10px;
		box-shadow:0 2px 8px rgba(0,0,0,.1);
		padding:15px;

	}


	.mysp_monsis_report_table td{

		display:flex;
		justify-content:space-between;
		padding:8px 0;
		border:none;

	}


	.mysp_monsis_report_table td:before{

		font-weight:600;
		color:#555;

	}


	.mysp_monsis_report_table td:nth-child(1):before{
		content:"PERIODE";
	}

	.mysp_monsis_report_table td:nth-child(2):before{
		content:"HARI KE";
	}

	.mysp_monsis_report_table td:nth-child(3):before{
		content:"MENGISI";
	}

	.mysp_monsis_report_table td:nth-child(4):before{
		content:"TIDAK MENGISI";
	}

	.mysp_monsis_report_table td:nth-child(5):before{
		content:"PERSENTASE";
	}

	.mysp_monsis_report_table td:nth-child(6):before{
		content:"STATUS";
	}

}

/* ==========================================================
   TITLE
========================================================== */

.mysp_monsis_report_title{
	margin:0 0 10px;
	font-size:24px;
	font-weight:700;
	text-align:center;
	color:#0f4c81;
	font-family: "Poppins", sans-serif;
}

.mysp_monsis_report_academic{
	text-align:center;
	color:#666;
	margin-bottom:25px;
	font-family: "Poppins", sans-serif;
}


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

.mysp_monsis_report_summary{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:15px;
	margin-bottom:30px;
	font-family: "Poppins", sans-serif;
}

.mysp_report_card{

	padding:20px;

	background:#fff;

	border:1px solid #e5e7eb;

	border-radius:10px;

	text-align:center;

	box-shadow:0 3px 8px rgba(0,0,0,.05);

}

.mysp_report_card .label{

	font-size:13px;

	color:#666;

	margin-bottom:10px;

}

.mysp_report_card .value{

	font-size:30px;

	font-weight:700;

	line-height:1;

}

.mysp_report_card .value.success{

	color:#16a34a;

}

.mysp_report_card .value.danger{

	color:#dc2626;

}

.mysp_report_card .value.primary{

	color:#0f4c81;

}


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

.mysp_monsis_report_table{

	width:100%;

	border-collapse:collapse;

	background:#fff;

}

.mysp_monsis_report_table th{

	padding:14px 12px;

	background:#0f4c81;

	color:#fff;

	font-weight:600;

	text-align:center;

}

.mysp_monsis_report_table td{

	padding:14px 12px;

	text-align:center;

	border-bottom:1px solid #ececec;

}

.mysp_monsis_report_table tbody tr:nth-child(even){

	background:#fafafa;

}

.mysp_monsis_report_table tbody tr:hover{

	background:#f3f8fc;

}


/* ==========================================================
   PROGRESS
========================================================== */

.mysp_report_progress{

	width:120px;

	height:10px;

	background:#ececec;

	border-radius:20px;

	overflow:hidden;

	margin:0 auto 6px;

}

.mysp_report_progress span{

	display:block;

	height:100%;

	background:#16a34a;

}


/* ==========================================================
   BADGE
========================================================== */

.mysp_report_badge{

	display:inline-block;

	padding:6px 12px;

	border-radius:30px;

	font-size:12px;

	font-weight:600;

	color:#fff;

	white-space:nowrap;

}

.mysp_report_badge.green{

	background:#16a34a;

}

.mysp_report_badge.yellow{

	background:#f59e0b;

}

.mysp_report_badge.red{

	background:#dc2626;

}


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

@media(max-width:768px){

	.mysp_monsis_report_modal{

		padding:10px;

	}

	.mysp_monsis_report_modal_box{

		width:100%;

		max-height:96vh;

	}

	.mysp_monsis_report_content{

		padding:15px;

	}

	.mysp_monsis_report_title{

		font-size:20px;

	}

	.mysp_monsis_report_summary{

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

		gap:10px;

	}

	.mysp_report_card{

		padding:15px 10px;

	}

	.mysp_report_card .value{

		font-size:24px;

	}

	.mysp_monsis_report_table{

		font-size:13px;

	}

	.mysp_monsis_report_table th,
	.mysp_monsis_report_table td{

		padding:8px 6px;

	}

	.mysp_report_progress{

		width:70px;

	}

	.mysp_report_badge{

		font-size:11px;

		padding:4px 8px;

	}

}


.mysp_report_badge.gray{

	background:#9ca3af;

}