@use 'sass:color';
@use "../constants" as *;
@use "../base/base-table-view";

.app-header {

	background: linear-gradient(135deg, $main-theme-color 0%, $gradient-primary-end 100%);

	.header-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 25px 0 25px;
	}
}

.header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.95em;
	color: $main-font-color;
}


.header-label {
	font-weight: 600;
	color: $text-body;
}

.log-path-display {
	display: flex;
	align-items: center;
	background-color: $block-bg-color;
	padding: 10px 25px;
	border-radius: 5px;
	margin-top: 30px;
	height: 44px;

	.log-path-text {
		flex: 1;
		margin-right: 15px;
	}

	.log-path-text span {
		font-family: monospace;
		font-size: 13px;
		color: $text-body;
	}

	.log-path-icons i {
		font-size: 20px;
		cursor: pointer;
		padding: 5px 10px 15px 10px;
		border-radius: 5px 5px 0 0;
	}

	.log-path-icons .fa-circle-info {
		color: $main-theme-color;
	}
}

.copy-stack-btn,
.copy-path-btn {
	position: absolute;
	right: 10px;
	top: 10px;
	background: #f2f4fb;
	padding: 5px;
	border-radius: 3px;
	cursor: pointer;
	z-index: 10;
	opacity: 0.8;
	transition: opacity 0.2s ease;
	border: 0;

	&:hover {
		opacity: 1;
		background: #e1e5f2;
	}

	svg {
		display: block;
		stroke: $main-theme-color;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
	}
}

.dbg_lv-log-viewer {
	@extend .base-table-viewer-structure;

	.dtsb-searchBuilder {
		display: none;
		margin-top: 15px;

		.dtsb-buttonContainer {
			button {
				width: 30px;
				height: 30px;
				padding: 0;

			}

		.dtsb-delete {
				background: transparent;
				color: $danger-color;
				border-color: $danger-color;
			}
		}

		.dtsb-title {
			padding-top: 0 !important;
		}

		.dtsb-clearAll {
			margin-top: 5px;
			background-color: $danger-color;
			color: $white;
			border: none;

			&:hover {
				background-color: $danger-color-hover;
			}
		}

		.dtsb-add {
			background-color: $main-theme-color;
			border: none;

			&:hover {
				background-color: $main-theme-color-dark;
			}
		}
	}

	.content-wrapper {
		transition: all 0.3s ease;
	}


	.manual-debugging-instructions_or {
		margin-top: 30px;
		font-weight: bold;
		text-align: center;
	}

	.manual-debugging-instructions {
		text-align: center;
		display: block;
		margin: 10px auto;
		color: $main-theme-color;
	}

	.clear-log {
		i {
			color: $danger-color;
		}
	}


	.table-wrapper {
		margin: 20px auto;
		background: $block-bg-color;
		border-radius: 5px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		overflow: hidden;

		.dt-scroll {
			margin-top: 25px;
		}

		.more-dropdown {
			margin-right: 20px;

			.dropdown-toggle {
				background-color: $block-bg-color;
				border: 1px solid $border-color;
				border-radius: 4px;
				padding: 5px 10px;
				font-size: 14px;
				color: $main-font-color;
				cursor: pointer;

				&:hover {
					background-color: var(--bs-btn-hover-bg);
					color: $white;
				}
			}

			.dropdown-menu {
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 1000;
				display: none;
				background-color: $block-bg-color;
				border-radius: 5px;
				box-shadow: $block-box-shadow;
				border: none;
				&.show {
					display: block;
				}
			}
		}

		.more-menu {
			.dropdown-item {
				display: flex;
				align-items: center;
				gap: 5px;
				font-size: 14px;
				position: relative;

				i {
					font-size: 16px;

					&.fa-trash {
						color: $danger-color; // red
					}
				}

				&.pro-feature {
					&:hover {
						background-color: transparent;
					}

					// Apply opacity only to the text and icon, not the entire element
					i,
					span:not(.pro-badge) {
						opacity: 0.6;
						color: $text-secondary;
					}


					.pro-badge {
						top: -5px;
						left: 110px;
					}
				}
			}
		}

		.column-visibility-btn {
			height: 31px;
			margin-left: 15px;
		}

		.refresh-log {
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
		}

		.rotate-animation {
			animation: rotate 1s linear 1;
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		#dbg_lv_log-table {
			tbody {
				tr {
					td {
						vertical-align: text-top;

						.error-description,
						&.description,
						&.file,
						&.line {
							font-family: monospace;
							font-size: 13px;
						}

						&.dt-empty {
							text-align: center;
						}
					}
				}
			}

			.dlv-count-badge {
				display: inline-block;
				font-size: 13px;
				padding: 3px 8px;
				border-radius: 5px;
				text-align: center;

				&.dlv-count-single {
					background-color: $border-light;
					color: $text-muted;
				}

				&.dlv-count-multiple {
					background-color: $surface-blue-light;
					color: $main-theme-color;
				}
			}

			.badge {
				min-width: 65px;
				border-radius: 4px;
				font-weight: 500;
				margin-left: 10px;
				margin-right: 10px;

				&.notice-bg {
					background-color: $badge-notice-bg; // light green
					color: $success-color; // strong green
				}

				&.warning-bg {
					background-color: $badge-warning-bg;
					color: $badge-warning-color;
				}

				&.fatal-bg {
					background-color: $badge-fatal-bg; // light red
					color: $danger-color; // strong red
				}

				&.database-bg {
					background-color: $badge-database-bg; // light purple
					color: $badge-database-color; // strong purple
				}

				&.parse-bg {
					background-color: $badge-parse-bg; // light blue
					color: $badge-parse-color; // strong blue
				}

				&.deprecated-bg {
					background-color: $badge-deprecated-bg; // light gray
					color: $text-secondary; // muted dark gray
				}

				&.custom-bg {
					background-color: $badge-custom-bg; // light blue
					color: $badge-custom-color; // strong blue
				}
			}
		}
	}

	.bootstrap-switch {
		margin-right: 0;
	}

	.bootstrap-switch-on {
		background: $main-theme-color;
	}

	.log-not-found {
		background: $white;
		padding: 40px 30px;
		border-radius: 12px;
		box-shadow: 0 4px 15px rgba(0,0,0,.1);
		margin: 20px auto;

		.welcome-header {
			text-align: center;
			margin-bottom: 40px;

			.welcome-content {
				.welcome-title {
					font-size: 1.8rem;
					font-weight: 600;
					color: $text-body;
					margin-bottom: 15px;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10px;

					.welcome-icon {
						color: $main-theme-color;
					}
				}

				.welcome-subtitle {
					font-size: 1rem;
					color: $text-secondary;
				}

				.welcome-description {
					font-size: 0.95rem;
					color: $text-body;
					line-height: 1.5;
				}
			}
		}

		.action-section {
			.primary-action {
				text-align: center;
				margin-bottom: 30px;

				.start-debugging-btn {
					background: linear-gradient(135deg, $main-theme-color 0%, $gradient-primary-end 100%);
					border: none;
					padding: 12px 30px;
					font-size: 1rem;
					font-weight: 600;
					border-radius: 8px;
					box-shadow: 0 3px 10px rgba($main-theme-color, 0.25);
					transition: all 0.2s ease;
					display: inline-flex;
					align-items: center;
					gap: 8px;

					&:hover,
					&.btn-hover-effect {
						transform: translateY(-1px);
						box-shadow: 0 4px 15px rgba($main-theme-color, 0.35);
					}

					&:disabled {
						background: $text-secondary;
						cursor: not-allowed;
						transform: none;
						box-shadow: 0 2px 5px rgba($text-secondary, 0.2);

						&:hover {
							transform: none;
							box-shadow: 0 2px 5px rgba($text-secondary, 0.2);
						}
					}

					&.btn-success {
						background: linear-gradient(135deg, $success-color 0%, $success-color-medium 100%);
						box-shadow: 0 3px 10px rgba($success-color, 0.25);

						&:hover {
							transform: none;
							box-shadow: 0 3px 10px rgba($success-color, 0.25);
						}
					}

					&.btn-danger {
						background: linear-gradient(135deg, $danger-color 0%, $danger-color-dark 100%);
						box-shadow: 0 3px 10px rgba($danger-color, 0.25);

						&:hover {
							transform: none;
							box-shadow: 0 3px 10px rgba($danger-color, 0.25);
						}
					}
				}

				.action-description {
					margin-top: 10px;
					font-size: 0.85rem;
					color: $text-secondary;
					font-style: italic;
				}
			}

			.divider-section {
				display: flex;
				align-items: center;
				margin: 25px 0;
				gap: 15px;

				.divider-line {
					flex: 1;
					height: 1px;
					background: $border-muted;
				}

				.divider-text {
					font-weight: 500;
					color: $text-secondary;
					font-size: 0.9rem;
					padding: 0 10px;
				}
			}

			.manual-setup-section {
				text-align: center;

				.manual-debugging-instructions {
					display: inline-flex;
					align-items: center;
					gap: 8px;
					color: $main-theme-color;
					font-weight: 500;
					text-decoration: none;
					padding: 10px 16px;
					border: 1px solid $main-theme-color;
					border-radius: 6px;
					transition: all 0.2s ease;

					.toggle-icon {
						transition: transform 0.2s ease;
						font-size: 0.8rem;
					}

					&:hover {
						background: $main-theme-color;
						color: white;
					}
				}
			}
		}

		.instructions-section {
			margin-top: 25px;

			.instruction-card {
				border: 1px solid $border-muted;
				border-radius: 8px;
				width: 100%;

				.card-header {
					background: $surface-light;
					border-bottom: 1px solid $border-muted;
					padding: 20px;

					.instruction-title {
						margin: 0 0 5px 0;
						font-size: 1.2rem;
						font-weight: 600;
						color: $text-body;
						display: flex;
						align-items: center;
						gap: 8px;

						i {
							color: $main-theme-color;
						}
					}

					.instruction-subtitle {
						margin: 0;
						color: $text-secondary;
						font-size: 0.9rem;
					}
				}

				.card-body {
					padding: 20px;

					.instruction-steps {
						.step-item {
							display: flex;
							gap: 15px;
							margin-bottom: 20px;
							padding-bottom: 20px;
							border-bottom: 1px solid $surface-subtle;

							.step-number {
								flex-shrink: 0;
								width: 32px;
								height: 32px;
								background: $main-theme-color;
								color: white;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-weight: 600;
								font-size: 0.9rem;
							}

							.step-content {
								flex: 1;

								h5 {
									margin: 0 0 8px 0;
									font-size: 1rem;
									font-weight: 600;
									color: $text-body;
								}

								p {
									margin: 0 0 8px 0;
									color: $text-body;
									line-height: 1.5;
									font-size: 0.9rem;
								}

								code {
									background: $surface-light;
									border: 1px solid $border-muted;
									border-radius: 3px;
									padding: 2px 5px;
									font-size: 0.85rem;
									color: $main-theme-color;
									font-weight: 500;
								}

								.code-examples {
									margin-top: 8px;

									code {
										display: block;
										padding: 8px 10px;
										margin-bottom: 5px;
										background: $surface-light;
										border-left: 3px solid $main-theme-color;
									}
								}
							}
						}
					}
				}
			}
		}

		code {
			color: $main-theme-color;
		}
	}
}

// ── Infinite scroll mode ──────────────────────────────────────────────────────
// DataTables adds .dataTables_scrollBody when scrollY is set.
// Override default styles for a cleaner look.
.dataTables_scrollBody {
	// Custom scrollbar — webkit
	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.18);
		border-radius: 3px;

		&:hover {
			background: rgba(0, 0, 0, 0.32);
		}
	}
}

// // Hide the page-length selector when infinite scroll is active (paging: false
// // already removes pagination controls, but the length menu may still appear).
// .dataTables_length:has(+ .dataTables_filter) {
// 	// Only hide when no pagination wrapper is rendered.
// 	// (This selector intentionally left narrow — nothing to do when paging is on.)
// }