// ==========================================================================
// Tag / Category — Add & Edit modal (centered dialog, portaled to <body>,
// so these rules live at root level).
// ==========================================================================
$tm-border: #e6e8ee;
$tm-text: #1a2233;
$tm-muted: #6b7280;
$tm-blue: #2f6bff;
$tm-blue-dark: #1f57e6;
$tm-surface: #f7f8fa;
$tm-err: #ef4444;

.bl-term-modal {
	width: 500px;
	max-width: calc(100vw - 40px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(15, 20, 30, 0.25);
	color: $tm-text;

	* {
		box-sizing: border-box;
	}

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 20px 22px;
		border-bottom: 1px solid $tm-border;
	}
	&__heading {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	&__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		background: rgba($tm-blue, 0.1);
		color: $tm-blue;
	}
	&__title {
		margin: 0;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.2;
		color: $tm-text;
	}
	&__close {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 1px solid $tm-border;
		border-radius: 9px;
		background: #fff;
		color: $tm-muted;
		cursor: pointer;
		transition: all 0.15s ease;

		&:hover {
			color: $tm-text;
			background: $tm-surface;
			border-color: rgba($tm-muted, 0.4);
		}
	}

	&__body {
		padding: 22px;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	&__field {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	&__label {
		font-size: 14px;
		font-weight: 700;
		color: $tm-text;
	}
	&__req {
		color: $tm-err;
	}

	// Type toggle
	&__type {
		display: flex;
		gap: 4px;
		padding: 4px;
		border: 1px solid $tm-border;
		border-radius: 10px;
		background: $tm-surface;
	}
	&__type-btn {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 44px;
		border: none;
		border-radius: 8px;
		background: transparent;
		color: $tm-muted;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.15s ease;

		svg {
			display: block;
		}
		&:hover {
			color: $tm-text;
		}
		&.is-active {
			background: #fff;
			color: $tm-blue;
			box-shadow: 0 1px 3px rgba(15, 20, 30, 0.12);
		}
	}

	&__input {
		width: 100%;
		height: 48px;
		padding: 0 14px;
		border: 1px solid $tm-border;
		border-radius: 10px;
		background: #fff;
		font-size: 14px;
		font-weight: 500;
		color: $tm-text;
		outline: none;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&::placeholder {
			color: #9aa1ad;
			font-weight: 400;
		}
		&:focus {
			border-color: $tm-blue;
			box-shadow: 0 0 0 3px rgba($tm-blue, 0.14);
		}
		&.is-error {
			border-color: $tm-err;
			box-shadow: 0 0 0 3px rgba($tm-err, 0.12);
		}
	}
	&__error {
		font-size: 12px;
		color: $tm-err;
	}

	&__footer {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		padding: 16px 22px;
		border-top: 1px solid $tm-border;
		background: $tm-surface;
	}
	&__btn {
		height: 46px;
		padding: 0 22px;
		border: 1px solid transparent;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.15s ease;

		&--ghost {
			background: #fff;
			border-color: $tm-border;
			color: $tm-text;
			&:hover {
				border-color: rgba($tm-blue, 0.5);
				color: $tm-blue;
			}
		}
		&--primary {
			background: $tm-blue;
			border-color: $tm-blue;
			color: #fff;
			box-shadow: 0 6px 16px rgba($tm-blue, 0.28);
			&:hover {
				background: $tm-blue-dark;
				border-color: $tm-blue-dark;
			}
			&:disabled {
				opacity: 0.55;
				cursor: not-allowed;
				box-shadow: none;
			}
		}
	}
}

// ---- Dark mode -----------------------------------------------------------
body.betterlinks-dark-mode .bl-term-modal {
	background: #2c3650;
	color: #e5e9f2;

	.bl-term-modal__header,
	.bl-term-modal__footer {
		border-color: #36405a;
	}
	.bl-term-modal__footer {
		background: #252f47;
	}
	.bl-term-modal__title {
		color: #e5e9f2;
	}
	.bl-term-modal__badge {
		background: rgba($tm-blue, 0.2);
	}
	.bl-term-modal__close {
		background: #252f47;
		border-color: #36405a;
		color: #9aa5bd;
		&:hover {
			color: #fff;
		}
	}
	.bl-term-modal__label {
		color: #e5e9f2;
	}
	.bl-term-modal__type {
		background: #252f47;
		border-color: #36405a;
	}
	.bl-term-modal__type-btn {
		color: #9aa5bd;
		&.is-active {
			background: #36405a;
			color: #6f97ff;
		}
	}
	.bl-term-modal__input {
		background: #252f47;
		border-color: #36405a;
		color: #e5e9f2;
		&::placeholder {
			color: #7c8698;
		}
	}
	.bl-term-modal__btn--ghost {
		background: #252f47;
		border-color: #36405a;
		color: #e5e9f2;
	}
}