/* Webhooks subscriptions — Figma layout (webhooks.html) */

.profile-webhooks-page .profile-webhooks-panel {
	border-radius: 1rem;
	background: var(--pf-modal-bg, rgb(17, 22, 35));
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 0.8px solid rgb(45, 58, 79);
}

html[data-theme="light"] .profile-webhooks-page .profile-webhooks-panel {
	background: var(--pf-modal-bg, #ffffff);
	border-color: rgba(0, 0, 0, 0.07);
}

.profile-webhooks-page .profile-webhooks-panel .profile-panel-section {
	padding: 2rem;
}

.profile-webhooks-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.profile-webhooks-head-text {
	flex: 1;
	min-width: 0;
}

.profile-webhooks-title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--text);
}

.profile-webhooks-page .subs-quota-panel {
	margin: 0;
}

.profile-webhooks-head-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	flex: 1 1 14rem;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.profile-webhooks-page .profile-api-btn-create {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 1.15rem 0.55rem 0.85rem;
	border-radius: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 500;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 28%, transparent);
}

.profile-webhooks-page .profile-api-btn-create svg {
	flex-shrink: 0;
	margin-top: 0.15rem;
}

.profile-webhooks-page .profile-webhooks-head-actions.profile-api-keys-head-actions .profile-api-create-blocked-hint {
	margin-left: 0;
	max-width: 100%;
}

.profile-webhooks-plan-blocked {
	margin-bottom: 1rem;
}

.profile-webhooks-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 0;
}

.profile-webhooks-page .profile-webhook-card {
	padding: 1.25rem;
	border-radius: 0.75rem;
	border: 0.8px solid rgb(45, 58, 79);
	background: var(--pf-modal-bg, rgb(17, 22, 35));
	box-shadow: none;
	transition: border-color 0.15s ease;
}

html[data-theme="light"] .profile-webhooks-page .profile-webhook-card {
	background: var(--pf-modal-bg, #ffffff);
	border-color: rgba(45, 58, 79, 0.18);
}

.profile-webhooks-page .profile-webhook-card:hover {
	border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

.profile-webhook-card__paused.profile-api-create-blocked-hint--warning {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 1rem;
	padding: 0;
	border: none;
	background: transparent;
	color: #fbbf24;
	font-size: 0.8125rem;
	line-height: 1.35;
	text-align: left;
	max-width: 100%;
}

.profile-webhook-card__paused .profile-api-create-blocked-icon {
	flex-shrink: 0;
	margin: 0;
	width: 1rem;
	height: 1rem;
	color: #f59e0b;
}

.profile-webhook-card__paused .profile-api-create-blocked-hint-text {
	white-space: normal;
	word-break: break-word;
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.35;
}

html[data-theme="light"] .profile-webhook-card__paused.profile-api-create-blocked-hint--warning {
	color: #d97706;
}

.profile-webhook-type {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}

.profile-webhook-type--spot {
	background: rgba(59, 130, 246, 0.2);
	color: #60a5fa;
}

.profile-webhook-type--futures {
	background: rgba(39, 195, 112, 0.2);
	color: #4ade80;
}

.profile-webhook-type--spot-futures {
	background: rgba(168, 85, 247, 0.2);
	color: #c084fc;
}

.profile-webhook-type--funding {
	background: rgba(251, 191, 36, 0.2);
	color: #fbbf24;
}

.profile-webhook-type--unknown {
	background: rgba(139, 156, 179, 0.15);
	color: rgb(139, 156, 179);
}

.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__http {
	flex-shrink: 0;
}

.profile-webhooks-page .profile-webhook-card__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.25rem;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.profile-webhooks-page .profile-webhook-card__details {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 2rem;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.profile-webhooks-page .profile-webhook-card__detail--uuid {
	flex: 1 1 12rem;
	min-width: 10rem;
	max-width: min(100%, 22rem);
	overflow: hidden;
}

.profile-telegram-page .profile-webhook-card__details {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 2rem;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.profile-telegram-page .profile-webhook-card .profile-api-rest-card__detail {
	flex: 0 0 auto;
}

.profile-telegram-page .profile-webhook-card__detail--uuid {
	flex: 1 1 12rem;
	min-width: 10rem;
	max-width: min(100%, 22rem);
}

.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__detail {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__detail-label {
	margin-bottom: 0.25rem;
	line-height: 1.2;
}

.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__detail-value {
	display: flex;
	align-items: center;
	height: 1.3125rem;
	font-size: 0.875rem;
	line-height: 1.3125rem;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.profile-webhooks-page .profile-webhook-card__detail-value--uuid {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}


.profile-webhooks-page .profile-webhook-card__uuid-row {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 100%;
	flex-wrap: nowrap;
}

.profile-webhooks-page .profile-webhook-card__uuid-text {
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.3125rem;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1 1 auto;
}

.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__detail-value .profile-api-rest-copy-btn {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	padding: 0;
	margin: 0;
}

.profile-webhooks-page .profile-webhook-card__url {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__path-wrap {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.profile-webhooks-page .profile-webhook-card__actions .profile-payment-btn {
	text-decoration: none;
}

.profile-webhooks-page .profile-webhook-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0.5rem;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border-top: none;
	align-self: flex-end;
}

.profile-webhooks-page .profile-webhook-card__actions .profile-payment-btn {
	height: auto;
	min-height: 1.875rem;
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	box-sizing: border-box;
}

.profile-webhooks-empty {
	margin: 0;
}

@media (max-width: 1024px) {
	.profile-webhook-deliveries-page .profile-webhook-card__meta-row,
	.profile-webhooks-page .profile-webhook-card__meta-row {
		flex-direction: column;
		align-items: stretch;
	}

	.profile-webhooks-page .profile-webhook-card__actions {
		justify-content: flex-start;
		align-self: stretch;
	}

	.profile-webhooks-page .profile-webhook-card__details,
	.profile-telegram-page .profile-webhook-card__details {
		gap: 1.25rem;
	}

	.profile-webhooks-page .profile-webhook-card__detail--uuid,
	.profile-telegram-page .profile-webhook-card__detail--uuid {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.profile-webhooks-page .profile-webhook-card__detail-value--uuid {
		max-width: 100%;
	}
}

@media (max-width: 720px) {
	.profile-webhooks-head {
		flex-direction: column;
		align-items: stretch;
	}

	.profile-webhooks-head-actions {
		align-self: stretch;
		max-width: 100%;
		flex: 0 1 auto;
		width: 100%;
	}

	.profile-webhooks-page .profile-webhook-card__details {
		flex-direction: column;
		align-items: stretch;
	}

	.profile-webhooks-page .webhooks-plan-blocked,
	.profile-telegram-page .webhooks-plan-blocked {
		box-sizing: border-box;
		max-width: 100%;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

@media (max-width: 640px) {
	.profile-webhooks-page .profile-webhooks-head-actions.profile-api-keys-head-actions {
		align-items: stretch;
		width: 100%;
		max-width: 100%;
	}

	.profile-webhooks-page .profile-webhooks-head-actions.profile-api-keys-head-actions .profile-api-create-blocked-hint--warning {
		white-space: normal;
		text-align: left;
		align-self: stretch;
	}

	.profile-webhooks-page .profile-api-btn-create {
		width: 100%;
		justify-content: center;
		align-self: stretch;
		box-sizing: border-box;
	}

	.profile-webhooks-page .wh-form-actions--with-enabled .profile-api-btn-create,
	.profile-telegram-page .wh-form-actions--with-enabled .profile-api-btn-create {
		width: auto;
		align-self: auto;
		flex: 0 0 auto;
	}

	.profile-webhooks-page .wh-form-actions--with-enabled .wh-enabled-row--prominent,
	.profile-telegram-page .wh-form-actions--with-enabled .wh-enabled-row--prominent {
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}

	.profile-webhooks-page .wh-form-actions--with-enabled .wh-enabled-label,
	.profile-telegram-page .wh-form-actions--with-enabled .wh-enabled-label {
		flex: 0 0 auto;
	}

	/* Card header: type → status → URL (full width, like UUID row) */
	.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__header {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
	}

	.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__header-left {
		display: contents;
	}

	.profile-webhooks-page .profile-webhook-card .profile-webhook-type {
		order: 1;
		align-self: flex-start;
	}

	.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__http {
		order: 2;
		justify-content: flex-start;
		align-self: flex-start;
	}

	.profile-webhooks-page .profile-webhook-card .profile-api-rest-card__path-wrap {
		order: 3;
		display: flex;
		align-items: center;
		gap: 0.375rem;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.profile-webhooks-page .profile-webhook-card__url {
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (max-width: 960px) {
	.profile-telegram-page #tg-form > .wh-form-actions:not(.wh-form-actions--with-enabled) .profile-api-btn-create {
		width: 100%;
		justify-content: center;
		align-self: stretch;
		box-sizing: border-box;
		white-space: nowrap;
	}
}