/* 檔案上傳區域樣式 */
.upload-area {
		border: 2px dashed #dee2e6;
		border-radius: 8px;
		padding: 30px;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s;
		background: #f8f9fa;
}
.upload-area:hover {
		border-color: #0d6efd;
		background: #e7f3ff;
}
.upload-area.dragover {
		border-color: #0d6efd;
		background: #cfe2ff;
}
/* 檔案預覽區域 */
.file-preview-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 15px;
		margin-top: 20px;
}
.file-preview-item {
		position: relative;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		padding: 10px;
		background: white;
		transition: all 0.2s;
}
.file-preview-item:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transform: translateY(-2px);
}
.file-preview-item img {
		width: 100%;
		height: 120px;
		object-fit: cover;
		border-radius: 4px;
		margin-bottom: 8px;
}
.file-preview-item .file-icon {
		width: 100%;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8f9fa;
		border-radius: 4px;
		margin-bottom: 8px;
}
.file-preview-item .file-icon i {
		font-size: 3rem;
		color: #6c757d;
}
.file-preview-item .file-name {
		font-size: 0.85rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 5px;
		font-weight: 500;
}
.file-preview-item .file-size {
		font-size: 0.75rem;
		color: #6c757d;
}
.file-preview-item .delete-btn {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: rgba(220, 53, 69, 0.9);
		color: white;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.2s;
}
.file-preview-item:hover .delete-btn {
		opacity: 1;
}
.file-preview-item .delete-btn:hover {
		background: #dc3545;
}
/* 上傳類型按鈕 */
.upload-type-tabs {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;
		flex-wrap: wrap;
}
.upload-type-tabs .btn {
		flex: 1;
		min-width: 100px;
}
/* 範圍滑桿樣式 */
.range-value {
		display: inline-block;
		min-width: 50px;
		text-align: center;
		font-weight: 600;
		color: #0d6efd;
}
/* 顏色選擇器樣式 */
.color-input-wrapper {
		display: flex;
		gap: 10px;
		align-items: center;
}
.color-input-wrapper input[type="color"] {
		width: 60px;
		height: 40px;
		border: 1px solid #dee2e6;
		border-radius: 4px;
		cursor: pointer;
}
/* 標籤樣式 */
.tag-input-container {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px;
		border: 1px solid #dee2e6;
		border-radius: 4px;
		min-height: 45px;
		cursor: text;
}
.tag-item {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 0.5rem .75rem;
		background: #0d6efd;
		color: white;
		border-radius: 5rem;
		font-size: 1rem;
}
.tag-item:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.tag-color-preview {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: inline-block;
		margin-right: 0.5rem;
		border: 2px solid #fff;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.color-picker-wrapper {
		display: flex;
		gap: 0.5rem;
		align-items: center;
}
.color-picker-wrapper input[type="color"] {
		width: 50px;
		height: 40px;
		border: none;
		border-radius: 0.375rem;
		cursor: pointer;
}
.tag-item .remove-tag {
		cursor: pointer;
		font-weight: bold;
}
.tag-input {
		border: none;
		outline: none;
		flex: 1;
		min-width: 150px;
		padding: 5px;
}
/* 評分星星樣式 */
.rating-stars {
		display: inline-flex;
		gap: 5px;
		font-size: 1.5rem;
}
.rating-stars i {
		cursor: pointer;
		color: #dee2e6;
		transition: color 0.2s;
}
.rating-stars i.active, .rating-stars i:hover {
		color: #ffc107;
}
/* 切換開關樣式 */
.form-switch .form-check-input {
		width: 3rem;
		height: 1.5rem;
		cursor: pointer;
}
/* 分隔線樣式 */
.section-divider {
		border-top: 2px solid #e9ecef;
		margin: 30px 0;
}
.section-title {
		color: #0d6efd;
		font-weight: 600;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 2px solid #e9ecef;
}
/* 圖表 */
.chart-container {
		position: relative;
		height: 300px;
		width: 100%;
}
.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2rem;
}
.page-title {
		font-size: 1.75rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 0.75rem;
}
.beta-badge {
		background: linear-gradient(135deg, #86C68C 0%, #7EC8E3 100%);
		color: white;
		padding: 0.25rem 0.75rem;
		border-radius: 12px;
		font-size: 0.75rem;
		font-weight: 600;
}
.chart-card {
		background: white;
		border-radius: 0.75rem;
		padding: 1.5rem;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		margin-bottom: 1.5rem;
}
.chart-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1.5rem;
}
.chart-title {
		font-size: 1.1rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 0.5rem;
}
.chart-icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.1rem;
}
.chart-icon.column {
		background-color: #E8F5E9;
		color: #4CAF50;
}
.chart-icon.money {
		background-color: #E3F2FD;
		color: #2196F3;
}
.chart-icon.scatter {
		background-color: #FFF3E0;
		color: #FF9800;
}
.chart-icon.pie {
		background-color: #FCE4EC;
		color: #E91E63;
}
.chart-actions {
		display: flex;
		gap: 0.5rem;
}
.chart-placeholder {
		width: 100%;
		height: 300px;
		background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
		border-radius: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--text-secondary);
		font-size: 0.9rem;
}
.metric-value {
		font-size: 1.5rem;
		font-weight: 600;
		color: var(--text-primary);
}
.metric-change {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.25rem 0.5rem;
		border-radius: 12px;
		font-size: 0.875rem;
		font-weight: 500;
}
.metric-change.positive {
		background-color: #E8F5E9;
		color: #4CAF50;
}
.metric-change.negative {
		background-color: #FFEBEE;
		color: #F44336;
}
/* 上傳對話框遮罩 */
.upload-dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 9998;
		animation: fadeIn 0.3s;
}
/* 上傳對話框 */
.upload-dialog {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		border-radius: 12px;
		width: 90%;
		max-width: 700px;
		max-height: 90vh;
		overflow: hidden;
		z-index: 9999;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
		animation: slideUp 0.3s;
		display: flex;
		flex-direction: column;
}
@keyframes slideUp {
		from {
				opacity: 0;
				transform: translate(-50%, -40%);
		}
		to {
				opacity: 1;
				transform: translate(-50%, -50%);
		}
}
/* 對話框標題 */
.upload-dialog-header {
		padding: 20px;
		border-bottom: 1px solid #dee2e6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;
}
.upload-dialog-header h5 {
		margin: 0;
		font-size: 1.25rem;
		color: #333;
}
/* 對話框內容 */
.upload-dialog-body {
		padding: 20px;
		overflow-y: auto;
		flex-grow: 1;
}
/* 對話框底部 */
.upload-dialog-footer {
		padding: 15px 20px;
		border-top: 1px solid #dee2e6;
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		flex-shrink: 0;
}
/* 上傳區域 */
.upload-area {
		border: 2px dashed #dee2e6;
		border-radius: 8px;
		padding: 40px 20px;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s;
		background: #f8f9fa;
}
.upload-area:hover {
		border-color: #0d6efd;
		background: #e7f1ff;
}
.upload-area.dragover {
		border-color: #0d6efd;
		background: #e7f1ff;
		transform: scale(1.02);
}
/* 圖片預覽容器 */
.image-preview-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 15px;
		margin-top: 20px;
}
.image-preview-item {
		position: relative;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		overflow: hidden;
		background: #f8f9fa;
}
.image-preview-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
}
.image-preview-info {
		padding: 8px;
		background: white;
}
.image-preview-info small {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #6c757d;
}
.image-preview-remove {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: rgba(220, 53, 69, 0.9);
		color: white;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
}
.image-preview-remove:hover {
		background: #dc3545;
		transform: scale(1.1);
}
/* URL 圖片預覽 */
.url-image-preview {
		margin-top: 15px;
		padding: 15px;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		background: #f8f9fa;
		text-align: center;
}
.url-image-preview img {
		max-width: 100%;
		height: auto;
		border-radius: 4px;
}
/* 影片預覽容器 */
.video-preview-container {
		margin-top: 20px;
}
.video-preview-item {
		border: 1px solid #dee2e6;
		border-radius: 8px;
		padding: 15px;
		background: #f8f9fa;
}
.video-preview-item video {
		width: 100%;
		border-radius: 4px;
}
/* 嵌入預覽 */
.embed-preview {
		margin-top: 15px;
}
.embed-preview iframe {
		width: 100%;
		border-radius: 8px;
}
/* file manager */
.file-browser {
		display: flex;
		height: calc(100vh - 200px);
		min-height: 500px;
}
.folder-tree {
		width: 250px;
		border-right: 1px solid #dee2e6;
		overflow-y: auto;
		padding: 1rem;
		background: #f8f9fa;
}
.folder-item {
		padding: 0.5rem;
		cursor: pointer;
		border-radius: 0.25rem;
		transition: all 0.3s;
		display: flex;
		align-items: center;
		gap: 0.5rem;
}
.folder-item:hover {
		background: #e9ecef;
}
.folder-item.active {
		background: #0d6efd;
		color: white;
}
.folder-item .bi-chevron-right {
		transition: transform 0.3s;
}
.folder-item.expanded .bi-chevron-right {
		transform: rotate(90deg);
}
.subfolder {
		margin-left: 1.5rem;
		display: none;
}
.subfolder.show {
		display: block;
}
.file-content {
		flex: 1;
		overflow-y: auto;
		padding: 1rem;
}
.breadcrumb-custom {
		background: #f8f9fa;
		padding: 0.75rem 1rem;
		border-radius: 0.375rem;
		margin-bottom: 1rem;
}
.view-toggle {
		display: flex;
		gap: 0.5rem;
}
.view-toggle .btn {
		padding: 0.375rem 0.75rem;
}
.file-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
}
.file-card {
		border: 1px solid #dee2e6;
		border-radius: 0.375rem;
		padding: 1rem;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s;
		position: relative;
}
.file-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transform: translateY(-2px);
}
.file-card.selected {
		border-color: #0d6efd;
		background: #e7f1ff;
}
.file-card .file-icon {
		font-size: 3rem;
		margin-bottom: 0.5rem;
}
.file-card .file-name {
		font-size: 0.875rem;
		word-break: break-word;
		margin-bottom: 0.25rem;
}
.file-card .file-size {
		font-size: 0.75rem;
		color: #6c757d;
}
.file-card .checkbox {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
}
.file-list-view .file-item {
		display: flex;
		align-items: center;
		padding: 0.75rem;
		border-bottom: 1px solid #dee2e6;
		cursor: pointer;
		transition: all 0.3s;
}
.file-list-view .file-item:hover {
		background: #f8f9fa;
}
.file-list-view .file-item.selected {
		background: #e7f1ff;
}
.file-list-view .file-icon {
		font-size: 1.5rem;
		margin-right: 1rem;
}
.file-list-view .file-info {
		flex: 1;
}
.upload-zone {
		border: 2px dashed #dee2e6;
		border-radius: 0.375rem;
		padding: 3rem;
		text-align: center;
		transition: all 0.3s;
		cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover {
		border-color: #0d6efd;
		background: #f8f9fa;
}
.storage-info {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 1rem;
		border-radius: 0.375rem;
}
/* 響應式設計 */
@media (max-width: 768px) {
		.upload-dialog {
				width: 95%;
				max-height: 95vh;
		}
		.upload-dialog-header, .upload-dialog-body, .upload-dialog-footer {
				padding: 15px;
		}
		.image-preview-container {
				grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
				gap: 10px;
		}
		.image-preview-item img {
				height: 100px;
		}
}