@import 'stickybanner-styles';

/* ===================================
   MODERN ADMIN UI - v2.0 Design System
   Inspired by: Apple, Notion, Basecamp, Things3
   =================================== */

/* Variables */
$color-primary: #2563eb;
$color-primary-hover: #1d4ed8;
$color-success: #10b981;
$color-gray-50: #f9fafb;
$color-gray-100: #f3f4f6;
$color-gray-200: #e5e7eb;
$color-gray-300: #d1d5db;
$color-gray-400: #9ca3af;
$color-gray-600: #4b5563;
$color-gray-700: #374151;
$color-gray-900: #111827;

$border-radius: 12px;
$border-radius-sm: 8px;
$spacing-xs: 8px;
$spacing-sm: 12px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

/* Container Wrapper */
.wrap.hdsb-settings-page {
	max-width: 1200px;
	margin: 0;
	padding: $spacing-xl 20px $spacing-xl 0;
	background: transparent;
}

/* Page Header with Save Button */
.hdsb-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: $spacing-lg;
	gap: $spacing-lg;

	h1 {
		font-size: 28px;
		font-weight: 700;
		color: $color-gray-900;
		margin: 0 0 $spacing-xs 0;
		letter-spacing: -0.02em;
	}

	p.hdsb-subtitle {
		font-size: 15px;
		color: $color-gray-600;
		margin: 0;
	}

	.hdsb-header-actions {
		flex-shrink: 0;
	}
}

/* Enable Banner Section with iOS Toggle */
.hdsb-enable-section {
	background: white;
	border-radius: $border-radius;
	padding: $spacing-lg;
	margin-bottom: $spacing-lg;
	box-shadow: $shadow-sm;
	border: 1px solid $color-gray-200;

	.hdsb-enable-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: $spacing-lg;
	}

	.hdsb-toggle-wrapper {
		display: flex;
		align-items: center;
		gap: $spacing-md;
	}

	.hdsb-toggle-text {
		font-size: 15px;
		font-weight: 500;
		color: $color-gray-900;
		user-select: none;
	}

	.hdsb-enable-save {
		flex-shrink: 0;
	}
}

/* iOS-Style Toggle Switch */
.hdsb-toggle-input {
	display: none !important;
	opacity: 0;
	position: absolute;
	pointer-events: none;
}

.hdsb-toggle-label {
	position: relative;
	display: inline-block;
	width: 51px;
	height: 31px;
	background-color: $color-gray-300;
	border-radius: 100px;
	cursor: pointer;
	transition: background-color 0.3s ease;

	&:hover {
		background-color: $color-gray-400;
	}
}

.hdsb-toggle-slider {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 27px;
	height: 27px;
	background-color: white;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
}

.hdsb-toggle-input:checked + .hdsb-toggle-label {
	background-color: $color-success;

	&:hover {
		background-color: darken($color-success, 5%);
	}

	.hdsb-toggle-slider {
		transform: translateX(20px);
	}
}

/* 2-Column Layout */
.hdsb-two-column-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: $spacing-lg;
	margin-bottom: $spacing-lg;

	@media (max-width: 1024px) {
		grid-template-columns: 1fr;
	}
}

.hdsb-column-main {
	background: white;
	border-radius: $border-radius;
	box-shadow: $shadow-sm;
	border: 1px solid $color-gray-200;
	overflow: hidden;
}

.hdsb-column-sidebar {
	.hdsb-sidebar-card {
		background: white;
		border-radius: $border-radius;
		box-shadow: $shadow-sm;
		border: 1px solid $color-gray-200;
		overflow: hidden;

		h3 {
			font-size: 16px;
			font-weight: 600;
			color: $color-gray-900;
			margin: 0;
			padding: $spacing-lg;
			border-bottom: 1px solid $color-gray-200;
			letter-spacing: -0.01em;
		}
	}
}

/* Footer */
.hdsb-footer {
	margin-top: $spacing-xl;
	padding-top: $spacing-lg;
	border-top: 1px solid $color-gray-200;
	text-align: center;

	p {
		margin: 0;
		font-size: 13px;
		color: $color-gray-600;

		a {
			color: $color-primary;
			text-decoration: none;
			font-weight: 500;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

/* Preview Section */
.hdsb-preview-section {
	background: white;
	border-radius: $border-radius;
	padding: $spacing-lg;
	margin-bottom: $spacing-lg;
	box-shadow: $shadow-sm;
	border: 1px solid $color-gray-200;

	#preview_banner {
		margin: 0;
		border-radius: $border-radius-sm;
		box-shadow: $shadow-md;
		overflow: hidden;
	}
}

/* Modern Form Grid Layout */
.hdsb-form-grid {
	padding: $spacing-lg;
	display: flex;
	flex-direction: column;
	gap: $spacing-lg;
}

.hdsb-form-row {
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;
}

/* Color Row: 2 columns */
.hdsb-color-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: $spacing-lg;

	@media (max-width: 782px) {
		grid-template-columns: 1fr;
	}
}

/* Individual Form Field */
.hdsb-form-field {
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;

	label {
		font-size: 14px;
		font-weight: 600;
		color: $color-gray-900;
		margin: 0;
	}

	/* Input Fields */
	input[type='text'],
	input[type='url'],
	input[type='number'],
	textarea {
		width: 100%;
		padding: 10px 14px;
		border: 1px solid $color-gray-300;
		border-radius: $border-radius-sm;
		font-size: 15px;
		transition: all 0.2s ease;
		background: white;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;

		&:focus {
			outline: none;
			border-color: $color-primary;
			box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
		}

		&::placeholder {
			color: $color-gray-400;
		}
	}

	textarea {
		min-height: 80px;
		resize: vertical;
	}

	/* Description Text */
	p.description {
		margin: 0 0 $spacing-xs 0;
		font-size: 13px;
		color: $color-gray-600;
		line-height: 1.5;
	}
}

/* Radio Group */
.hdsb-radio-group {
	display: flex;
	gap: $spacing-md;
	margin-top: $spacing-xs;
}

.hdsb-radio-label {
	display: flex;
	align-items: center;
	gap: $spacing-sm;
	padding: $spacing-sm $spacing-md;
	border: 1px solid $color-gray-300;
	border-radius: $border-radius-sm;
	transition: all 0.2s ease;
	cursor: pointer;
	font-size: 15px;
	color: $color-gray-700;
	background: white;

	&:hover {
		border-color: $color-gray-400;
		background: $color-gray-50;
	}

	input[type='radio'] {
		margin: 0;
		cursor: pointer;
	}

	input[type='radio']:checked + span {
		font-weight: 600;
		color: $color-primary;
	}
}

/* Checkbox Label */
.hdsb-checkbox-label {
	display: flex;
	align-items: center;
	gap: $spacing-sm;
	padding: $spacing-sm $spacing-md;
	border: 1px solid $color-gray-300;
	border-radius: $border-radius-sm;
	transition: all 0.2s ease;
	cursor: pointer;
	font-size: 15px;
	color: $color-gray-700;
	background: white;

	&:hover {
		border-color: $color-gray-400;
		background: $color-gray-50;
	}

	input[type='checkbox'] {
		width: 20px;
		height: 20px;
		border-radius: 6px;
		border: 2px solid $color-gray-300;
		cursor: pointer;
		transition: all 0.2s ease;
		margin: 0;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		position: relative;

		&:checked {
			background: $color-primary;
			border-color: $color-primary;

			&::after {
				content: '';
				position: absolute;
				left: 5px;
				top: 2px;
				width: 4px;
				height: 8px;
				border: solid white;
				border-width: 0 2px 2px 0;
				transform: rotate(45deg);
			}
		}

		&:focus {
			outline: none;
			box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
		}
	}
}


/* Color Picker Inputs */
.wp-picker-container {
	.wp-color-result {
		border-radius: $border-radius-sm;
		border: 1px solid $color-gray-300;
		box-shadow: $shadow-sm;
		height: 32px;
		padding: 0 0 0 40px;

		&:hover {
			border-color: $color-gray-400;
		}

		&:after {
			font-size: 13px;
			line-height: 32px;
			padding-right: 8px;
		}
	}

	.wp-color-result-text {
		line-height: 32px;
	}
}

/* Responsive Design */
@media (max-width: 782px) {
	.hdsb-page-header {
		flex-direction: column;
		align-items: flex-start;

		.hdsb-header-actions {
			width: 100%;
		}
	}

	.hdsb-enable-section {
		.hdsb-enable-inner {
			flex-direction: column;
			align-items: flex-start;

			.hdsb-enable-save {
				width: 100%;

				.button {
					width: 100%;
				}
			}
		}
	}

	.hdsb-radio-group {
		flex-direction: column;
	}
}

/* Banner Preview Styles */
.hdsb-stickybanner {
	display: flex;
}

#preview_banner {
	margin: 0;
}