.dtp-container {
	position: relative;
}

.dtp-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1040;
}

.dtp-popup {
	display: none;
	position: fixed;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	width: 90%;
	max-width: 800px;
	max-height: 70vh;
	overflow-y: none;
	z-index: 1050;
}

.dtp-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: #4b6cb7;
	color: white;
	margin-bottom: 20px;
}

.dtp-nav-btn {
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	padding: 5px 10px;
}

.dtp-calendar-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	max-height: 55vh;
    overflow-y: auto;
}

.dtp-month {
	margin-bottom: 20px;
}

.dtp-month-title {
	text-align: center;
	padding: 10px;
	background: #4b6cb7;
	color: white;
	margin-bottom: 10px;
}

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

.dtp-table th,
.dtp-table td {
	padding: 8px;
	text-align: center;
	border: 1px solid #eee;
}

.dtp-table th {
	background: #f8f9fa;
}

.dtp-table td {
	cursor: pointer;
	transition: background 0.2s;
}

.dtp-table td:hover:not(.dtp-disabled):not(.dtp-other-month) {
	background: #f0f0f0;
}

.dtp-weekend {
	color: #dc3545;
}

.dtp-disabled {
	color: #ccc;
	background: #f8f9fa;
	cursor: default;
}

.dtp-other-month {
	color: #999;
}

.dtp-selected {
	background: #2196F3 !important;
	color: white !important;
}

.dtp-temp-selected {
	background: #64B5F6 !important;
	color: white !important;
}

.dtp-in-range {
	background: #e3f2fd;
}

.dtp-hint {
	text-align: center;
	padding: 10px;
	color: #666;
	font-size: 14px;
	margin-bottom: 15px;
}

.dtp-time-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px 0;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 4px;
}

.dtp-time-label {
	margin-right: 10px;
	font-weight: bold;
}

.dtp-time-selector {
	display: flex;
	align-items: center;
}

.dtp-hour-select,
.dtp-minute-select {
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 4px;
	width: 70px;
	text-align: center;
}

.dtp-time-selector span {
	margin: 0 5px;
	font-weight: bold;
}

.dtp-buttons {
	display: flex;
	justify-content: flex-end;
	margin-top: 15px;
	gap: 10px;
}

.dtp-cancel-btn,
.dtp-apply-btn {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.dtp-cancel-btn {
	background: #f5f5f5;
	color: #333;
}

.dtp-apply-btn {
	background: #4b6cb7;
	color: white;
}

.dtp-cancel-btn:hover {
	background: #e0e0e0;
}

.dtp-apply-btn:hover {
	background: #3a5ba5;
}
.dtp-clear-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #6c757d;  /* グレー系 */
    color: white;
}

.dtp-clear-btn:hover {
    background: #5a6268;  /* ダークグレー */
}

.dtp-nav-btn.dtp-prev::before,
.dtp-nav-btn.dtp-next::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.dtp-nav-btn.dtp-prev::before {
    border-right: 10px solid #fff;  /* 左向き三角形 */
}

.dtp-nav-btn.dtp-next::before {
    border-left: 10px solid #fff;   /* 右向き三角形 */
}

@media (max-width: 767px) {
	.dtp-popup {
		width: 95%;
		top: 50%;	
		max-width: none;
		max-height: 90vh;
		overflow-y: auto;
	}
	
	.dtp-calendar-grid {
		grid-template-columns: 1fr;
	}
	
	.dtp-nav {
		display: flex;
		margin-bottom: 0px;
		justify-content: center;
	}
	.dtp-hint {
		margin-bottom: 0px;
	}
	.dtp-time-container {
		flex-direction: row;
		margin: 5px 0px;
	}
	
	.dtp-time-label {
		margin-bottom: 0px;
		margin-right: 0;
	}
	
	/* 1年分カレンダー表示モードのモバイル最適化 */
	.dtp-month {
		margin-bottom: 8px;
	}
	
	.dtp-month-title {
		padding: 5px;
		margin-bottom: 5px;
		font-size: 14px;
	}
	
	.dtp-table th,
	.dtp-table td {
		padding: 4px;
		font-size: 12px;
	}
}