/**
 * Admin Dashboard Styles
 *
 * @package NoahShopBuilder
 */

.noah-shop-builder-dashboard-header {
	background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
	border-radius: 16px;
	padding: 16px;
	margin: 0 0 24px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

	.noah-shop-builder-header-container {
		max-width: 100%;
	}

	.noah-shop-builder-dashboard-nav {
		display: flex;
		justify-content: center;
		gap: 8px;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 12px;
		padding: 6px;
		position: relative;
		backdrop-filter: blur(10px);

		.nav-indicator {
			position: absolute;
			top: 6px;
			left: 6px;
			height: calc(100% - 12px);
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 8px;
			transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
			box-shadow:
				0 4px 12px rgba(102, 126, 234, 0.4),
				0 2px 4px rgba(102, 126, 234, 0.2);
			z-index: 0;
			pointer-events: none;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
				border-radius: 8px;
			}
		}

		.nav-button {
			position: relative;
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 12px 24px;
			border: none;
			background: transparent;
			color: #6b7280;
			font-size: 14px;
			font-weight: 500;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			z-index: 1;
			white-space: nowrap;

			svg {
				fill: currentcolor;
			}

			&:hover {
				color: #4f46e5;
			}

			&.active {
				color: #fff;
				z-index: 1;

				svg {
					filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
				}
			}

			&:active {
				transform: translateY(0);
			}
		}

		// Phones: icon-only tabs so the bar fits; the labels stay for screen readers.
		@media (max-width: 600px) {
			justify-content: space-between;
			gap: 4px;

			.nav-button {
				padding: 10px 16px;

				span {
					position: absolute;
					width: 1px;
					height: 1px;
					overflow: hidden;
					clip-path: inset(50%);
					white-space: nowrap;
				}
			}
		}
	}
}

@keyframes slideIn {

	0% {
		opacity: 0;
		transform: translateY(0) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(-2px) scale(1);
	}
}

.noah-shop-builder-wrapper {
	max-width: 1200px;
	margin: 20px auto;
	padding: 20px;

	h1 {
		font-size: 24px;
		margin-bottom: 20px;
		color: #1d2327;
	}

	p {
		font-size: 14px;
		line-height: 1.6;
		color: #50575e;
		margin-bottom: 20px;
	}

	.section {
		background: #fff;
		padding: 30px;
		margin-bottom: 20px;
		border: 1px solid #c3c4c7;
		border-radius: 4px;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	}

	.button-group {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		margin-top: 20px;

		button {
			margin: 0;
		}
	}
}

.noah-shop-builder-snackbars {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-start: 184px; // clear the admin menu
	z-index: 100000;

	.folded & {
		inset-inline-start: 60px;
	}

	@media (max-width: 782px) {
		inset-inline-start: 16px;
	}
}

// Blocks management styles
.noah-shop-builder-blocks {

	.blocks-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 30px;
		flex-wrap: wrap;
		gap: 20px;

		h1 {
			margin: 0 0 8px;
		}

		p {
			margin: 0;
		}

		.header-actions {
			display: flex;
			align-items: center;
			gap: 20px;

			.bulk-toggle {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 8px 16px;
				background: #f6f7f7;
				border-radius: 6px;

				label {
					margin: 0;
					font-size: 13px;
					font-weight: 500;
					color: #50575e;
				}

				.components-form-toggle {
					margin: 0;
				}
			}
		}
	}

	.blocks-category {
		margin-bottom: 40px;

		h2 {
			font-size: 18px;
			font-weight: 600;
			margin: 0 0 20px;
			color: #1d2327;
			padding-bottom: 10px;
			border-bottom: 2px solid #e8e8e8;
		}
	}

	.blocks-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 16px;
		margin-bottom: 20px;
	}

	.block-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		background: #fff;
		border: 1px solid #dcdcde;
		border-radius: 8px;
		transition: all 0.2s ease;

		&:hover {
			border-color: #2271b1;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		}

		.block-info {
			flex: 1;

			h3 {
				margin: 0 0 8px;
				font-size: 15px;
				font-weight: 600;
				color: #1d2327;
			}

		}

		.components-form-toggle {
			margin: 0;
			flex-shrink: 0;
		}
	}

	.blocks-footer {
		display: flex;
		justify-content: flex-end;
		padding-top: 20px;
		border-top: 1px solid #dcdcde;
	}
}

// Welcome page styles
.noah-shop-builder-welcome {

	h2 {
		font-size: 18px;
		font-weight: 600;
		margin: 0 0 20px;
		color: #1d2327;
	}

	h3 {
		margin: 0 0 8px;
		font-size: 15px;
		font-weight: 600;
		color: #1d2327;
	}

	.welcome-hero {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border: none;
		border-radius: 8px;

		h1,
		p {
			color: #fff;
		}

		p {
			max-width: 640px;
			font-size: 15px;
		}

		.components-button.is-primary {
			background: #fff;
			color: #4f46e5;
		}

		.components-button.is-secondary {
			color: #fff;
			box-shadow: inset 0 0 0 1px #fff;
		}
	}

	.welcome-steps {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 16px;
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: noah-step;

		li {
			counter-increment: noah-step;
			margin: 0;
			padding: 20px;
			background: #f6f7f7;
			border-radius: 8px;

			&::before {
				content: counter(noah-step);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 28px;
				height: 28px;
				margin-bottom: 12px;
				background: #4f46e5;
				color: #fff;
				font-weight: 600;
				border-radius: 50%;
			}
		}

		p {
			margin: 0;
		}
	}

	.welcome-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 16px;
	}

	.welcome-card {
		padding: 20px;
		border: 1px solid #dcdcde;
		border-radius: 8px;

		p {
			margin: 0;
		}
	}

	.welcome-card-icon {
		display: inline-flex;
		margin-bottom: 12px;
		padding: 8px;
		background: #eef2ff;
		color: #4f46e5;
		border-radius: 8px;

		svg {
			fill: currentcolor;
		}
	}

	.welcome-columns {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;

		.section {
			margin-bottom: 0;
		}
	}
}

// Item badges (Badges component): blocks, modules, starter designs.
// Add-ons style their own badge keys.
.noah-badges {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;

	.badge {
		display: inline-block;
		padding: 2px 8px;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.6;
		text-transform: uppercase;
		border-radius: 3px;
		letter-spacing: 0.3px;
		background: #f0f0f1;
		color: #50575e;
	}

	.badge-new {
		background: #e7f5ff;
		color: #1971c2;
	}

	.badge-beta {
		background: #fff3bf;
		color: #f59e0b;
	}
}

// Module settings modal (rendered outside the dashboard wrapper).
.noah-module-settings {
	width: min(480px, calc(100vw - 32px));

	.noah-module-settings__fields {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.noah-module-settings__actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 24px;
	}
}

// Modules page styles
.noah-shop-builder-modules {

	.modules-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 16px;
		margin-bottom: 24px;
	}

	.module-card {
		padding: 20px;
		background: #fff;
		border: 1px solid #dcdcde;
		border-radius: 8px;

		h3 {
			margin: 0 0 8px;
			font-size: 15px;
			font-weight: 600;
			color: #1d2327;
		}

		p {
			margin: 0;
		}

		&.is-active {
			border-color: var(--wp-admin-theme-color, #3858e9);
		}

		.module-card-settings {
			margin-top: 16px;
		}
	}

	> h2 {
		margin: 8px 0 12px;
		font-size: 15px;
	}

	.module-card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 12px;
	}

	.module-icon {
		display: inline-flex;
		padding: 8px;
		background: #f6f7f7;
		color: #50575e;
		border-radius: 8px;

		svg {
			fill: currentcolor;
		}
	}

	.badge-upcoming {
		display: inline-block;
		padding: 2px 8px;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		background: #fff3bf;
		color: #8a6100;
		border-radius: 3px;
	}

	.modules-note {
		padding-top: 20px;
		border-top: 1px solid #dcdcde;

		p {
			margin: 0;
		}
	}
}