/* ========== Month Dropdown (CSS only) ========== */
.mdp-panel {
	position: absolute;
	min-width: 220px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
	padding: 12px 12px 14px;
	z-index: 10000;
	display: none;
}

.mdp-header {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	align-items: center;
	margin-bottom: 10px;
}

.mdp-arrow {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 8px;
	background: #f6f7f9;
	cursor: pointer;
	user-select: none;
	font-size: 16px;
}

.mdp-arrow:hover { background: #eef3ff; border-color: #cddcff; }
.mdp-arrow.disabled {
	opacity: .5;
	cursor: default;
	pointer-events: none;
}

.mdp-year {
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: #222;
}

.mdp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 40px;
	gap: 8px;
}

.mdp-btn {
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 10px;
	background: #f7f8fa;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	line-height: 38px;
	text-align: center;
	user-select: none;
}
.mdp-btn:hover { background: #eef3ff; border-color: #cddcff; }
.mdp-btn.active {
	background: #3b82f6;
	border-color: #3b82f6;
	color: #fff;
}