.wrapper {
	padding: 30px;
}

.calendar-card {
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 16px;
}

/* buttons */
.fc-button {
	background: #2563eb !important;
	border: none !important;
	color: #fff !important;
	border-radius: 8px !important;
}

/* segmented right buttons */
.fc .fc-button-group {
	background: #2563eb;
	border-radius: 8px;
	overflow: hidden;
}
.fc .fc-button-group .fc-button {
	background: transparent !important;
	border-radius: 0 !important;
}
.fc-button-active {
	background: rgba(255,255,255,0.2) !important;
}

/* events */
.fc-event {
	border: none !important;
	border-radius: 4px !important;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 4px !important;
}
.event-am { background:#ff7a18 !important; }
.event-ar { background:#3b82f6 !important; }
.event-nb { background:#06b6d4 !important; }
.event-aa { background:#84cc16 !important; }
.event-ja { background:#6366f1 !important; }
.event-sa { background:#ef4444 !important; }

/* modal */
#eventModal {
	display:none;
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.5);
	align-items:center;
	justify-content:center;
	z-index:9999;
}
#eventModal .box {
	background:#fff;
	padding:20px;
	border-radius:10px;
	width:320px;
}



.classic-select {
	position: relative;
	display: inline-block;
}

.classic-select select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	padding: 6px 32px 6px 8px;
	font-size: 14px;
	border: 1px solid #888;
	color: #fff;
	border-radius: 2px;
	cursor: pointer;
	margin-bottom: 10px;
}

/* Right-side arrow box */
.classic-select::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 26px;
	height: 77%;
	border-left: 1px solid #888;
	pointer-events: none;
}

/* Arrow triangle */
.classic-select::before {
	content: "";
	position: absolute;
	right: 9px;
	top: 40%;
	transform: translateY(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #fff;
	pointer-events: none;
}


			/* ==============================
			   CALENDAR CONTAINER
			   ============================== */
			   #calendar {
			   	background: #1f1f1f;
			   	border-radius: 12px;
			   	padding: 12px;
			   	color: #e5e7eb;
			   }
			/* ==============================
			   FULLCALENDAR GRID
			   ============================== */
			   .fc-theme-standard td,
			   .fc-theme-standard th {
			   	border-color: #2e2e2e;
			   }
			   .fc-col-header-cell {
			   	background: #1b1b1b;
			   	color: #cbd5e1;
			   	font-weight: 600;
			   }
			   .fc-daygrid-day,
			   .fc-timegrid-slot {
			   	background: #1f1f1f;
			   }
			   .fc-daygrid-day-number {
			   	color: #9ca3af;
			   }
			   /* Today highlight */
			   .fc-day-today {
			   	background: rgba(59,130,246,0.15) !important;
			   }
			/* ==============================
			   EVENTS
			   ============================== */
			   .fc-event {
			   	border-radius: 6px;
			   	font-weight: 600;
			   	font-size: 13px;
			   	text-align: center;
			   	color: #ffffff !important;
			   }
			   /* Month view blocks */
			   .fc-daygrid-event {
			   	padding: 4px 6px;
			   }
			/* ==============================
			   TIME GRID
			   ============================== */
			   .fc-timegrid-slot {
			   	height: 48px;
			   	border-color: #2e2e2e;
			   }
			   .fc-timegrid-axis {
			   	font-size: 13px;
			   	color: #9ca3af;
			   }
			   /* Scrollbar */
			   .fc-timegrid-body {
			   	overflow-y: auto !important;
			   }
			   .fc-scroller::-webkit-scrollbar {
			   	width: 8px;
			   }
			   .fc-scroller::-webkit-scrollbar-thumb {
			   	background: #3a3a3a;
			   	border-radius: 6px;
			   }
			/* ==============================
			   TOOLBAR BUTTONS
			   ============================== */
			   .fc .fc-button {
			   	background: #2563eb !important;
			   	border: none !important;
			   	color: #ffffff !important;
			   	border-radius: 6px;
			   	font-weight: 500;
			   }
			   .fc .fc-button:hover {
			   	background: #1d4ed8 !important;
			   }
			   .fc .fc-button-active {
			   	background: #1e40af !important;
			   }
			/* ==============================
			   MODAL (POPUP)
			   ============================== */
			   .modal-overlay {
			   	position: fixed;
			   	inset: 0;
			   	background: rgba(0,0,0,.6);
			   	display: flex;
			   	align-items: center;
			   	justify-content: center;
			   	z-index: 9999;
			   }
			   .modal-box {
			   	background: #1f1f1f;
			   	width: 760px;
			   	border-radius: 12px;
			   	padding: 20px;
			   	color: #e5e7eb;
			   	border: 1px solid #2e2e2e;
			   }
			   .modal-header {
			   	display: flex;
			   	justify-content: space-between;
			   	align-items: center;
			   }
			   .modal-header h3 {
			   	color: #ffffff;
			   }
			   .modal-header button {
			   	font-size: 22px;
			   	border: none;
			   	background: none;
			   	cursor: pointer;
			   	color: #9ca3af;
			   }
			   .modal-header button:hover {
			   	color: #ffffff;
			   }
			/* ==============================
			   FORM GRID
			   ============================== */
			   .grid {
			   	display: grid;
			   	grid-template-columns: repeat(2,1fr);
			   	gap: 16px;
			   	margin-top: 20px;
			   }
			   .field label {
			   	font-size: 13px;
			   	color: #9ca3af;
			   }
			   .field input {
			   	width: 100%;
			   	padding: 10px;
			   	border-radius: 8px;
			   	border: 1px solid #2e2e2e;
			   	background: #111111;
			   	color: #e5e7eb;
			   }
			   .field.full {
			   	grid-column: span 2;
			   }
			/* ==============================
			   BUTTONS
			   ============================== */
			   .modal-footer {
			   	display: flex;
			   	gap: 10px;
			   	justify-content: flex-end;
			   	margin-top: 20px;
			   }
			   .btn {
			   	padding: 10px 14px;
			   	border-radius: 8px;
			   	border: none;
			   	cursor: pointer;
			   	color: #fff;
			   	font-weight: 500;
			   }
			   .btn.blue { background:#2563eb; }
			   .btn.green { background:#16a34a; }
			   .btn.orange { background:#d97706; }
			   .btn.gray {
			   	background:#2e2e2e;
			   	color:#e5e7eb;
			   }

			   .card{background:#242425;border-radius:12px;max-width:1100px;margin:25px auto;border:1px solid #3d3d3d}
			   .card-header{padding:20px 24px;border-bottom:1px solid #3d3d3d;display:flex;justify-content:space-between}
			   .card-header h3{margin:0;font-size:18px;color:#f8fafc}
			   table{width:100%;border-collapse:collapse}
			   thead th{padding:14px 24px;font-size:13px;color:#ffe883;border-bottom:1px solid #3d3d3d;text-align:left}
			   tbody td{padding:16px 24px;border-bottom:1px solid #3d3d3d;color:#e5e7eb}
			   .pagination{padding:16px;display:flex;justify-content:center}
			   .pagination-list{list-style:none;display:flex;gap:6px;padding:0;margin:0}
			   .pagination-list li{min-width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid #3d3d3d;background:#242425}
			   .pagination-list li a,.pagination-list li span{color:#e5e7eb;text-decoration:none;font-size:13px}
			   .pagination-list li.active{background:#2563eb;border-color:#2563eb}