/**
 * Admin appointment modal styles
 * Source migrated from html-appointment-modal.php inline styles
 */
@use "variables" as *;

/* Unified under .wc-appointment-modal-content; removing .wc-backbone-modal-content duplicates */

/* Merged into single .wc-appointment-modal-content block above to reduce duplication */

.wc-appointment-modal-content {
	position: relative;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	max-height: 75vh;

	// Busy overlay handled by container (.wc-backbone-modal-main.is-busy).
	// No loader inside content; loader sits in header.

	.wc-appointment-modal-form {
		display: none;

		&.loaded {
			display: block;
		}
	}

	// Top-level sections inside the modal
	.wc-appointment-form-section {
		&.wc-appointment-details,
		&.wc-appointment-customer,
		&.wc-appointment-order,
		&.wc-appointment-billing-details {
			display: none;
		}

		&.wc-appointment-status {
			display: flex;
			gap: 12px;
			align-items: flex-end;

			.form-field {
				flex: 1 1 0;
			}
		}
	}

	// Inline rows for product + quantity and status + customer status
	.wc-appointment-product-row {
		display: flex;
		gap: 12px;
		align-items: flex-end;

		.form-field {
			flex: 1 1 auto;
		}

		.wc-appointment-qty-field {
			flex: 0 0 160px;
			display: none;

			input[type="number"] {
				width: 100%;
				max-width: 100%;
			}
		}
	}

	.wc-appointment-customer-order-row {
		display: flex;
		column-gap: 12px;
		align-items: flex-end;
		flex-wrap: wrap;

		.form-field {
			flex: 1 1 0;
			min-width: 140px;
			width: auto; // override global width: 100%
		}

		@media ( max-width: 768px ) {
			> .wc-appointment-customer-field {
				flex: 0 0 100%;
			}
		}
	}

	// Shared header styles for expandable sections
	.wc-appointment-billing-details,
	.wc-appointment-addons {

		background-color: #eee;
		margin: 0 -10px 10px;
		padding: 0 10px;

		h4 {
			margin: 0;
			padding: 13px 0;
			font-size: 13px;
			font-weight: 500;
			color: #23282d;
			cursor: pointer;
			position: relative;
			padding-right: 24px;

			&:hover {
				color: var( --wp-admin-theme-color, #007cba );
			}

			&::after {
				content: "▴";
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY( -50% );
			}
		}

		.wc-appointment-billing-body,
		.wc-appointment-addons-body {
			margin-top: 1.5em;
		}

		&.collapsed {
			background-color: transparent;

			&:hover {
				background-color: #eee;
			}

			.wc-appointment-billing-body,
			.wc-appointment-addons-body {
				display: none;
			}

			h4 {
				&::after {
					content: "▾";
				}
			}
		}
	}

	// Billing header and collapsible behavior
	.wc-appointment-billing-details {

		// Compact name/location/contact/payment/region rows
		.wc-appointment-billing-name-fields,
		.wc-appointment-billing-location-fields,
		.wc-appointment-billing-contact-fields,
		.wc-appointment-billing-payment-fields,
		.wc-appointment-billing-region-fields {
			display: flex;
			gap: 12px;

			.form-field {
				flex: 1 1 0;
			}
		}

		@media ( max-width: 768px ) {
			.wc-appointment-billing-name-fields,
			.wc-appointment-billing-location-fields,
			.wc-appointment-billing-region-fields,
			.wc-appointment-billing-contact-fields,
			.wc-appointment-billing-payment-fields {
				flex-direction: column;
				gap: 0;

				.form-field {
					&.form-field-first,
					&.form-field-last {
						margin-left: 0;
						margin-right: 0;
					}
				}
			}
		}
		// Ensure bottom margin on last child in rows
		.wc-appointment-billing-name-fields .form-field:last-child,
		.wc-appointment-billing-location-fields .form-field:last-child,
		.wc-appointment-billing-contact-fields .form-field:last-child,
		.wc-appointment-billing-payment-fields .form-field:last-child,
		.wc-appointment-billing-region-fields .form-field:last-child {
			margin-bottom: 1.2em;
		}

		.wc-appointment-billing-account-fields {
			margin: 1em 0 2.2em;
		}
	}

	// Datetime layout
	.wc-appointment-datetime-fields {
		display: flex;
		gap: 12px;
		align-items: flex-end;
		flex-wrap: nowrap;

		.form-field {
			flex: 1;
			display: none;
			position: relative;

			// Hide native time picker dropdown while keeping input type=time
			input[type="time"] {
				appearance: textfield;
				-webkit-appearance: none;
				font-variant-numeric: tabular-nums;
			}

			input[type="time"]::-webkit-calendar-picker-indicator {
				display: none !important;
			}

			input[type="time"]::-webkit-inner-spin-button {
				display: none;
				-webkit-appearance: none;
				margin: 0;
			}

			.time-suggestions {
				position: absolute;
				top: calc( 100% + 4px );
				left: 0;
				width: 100%;
				display: none;
				max-height: 240px;
				overflow: auto;
				background: #fff;
				border: 1px solid #dcdcde;
				border-radius: 4px;
				box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
				z-index: 1000;

				&.is-visible {
					display: block;
				}

				.time-option {
					display: flex;
					align-items: center;
					gap: 8px;
					padding: 8px 10px;
					cursor: pointer;
					line-height: 1.4;

					.time-value {
						font-variant-numeric: tabular-nums;
					}

					.time-duration {
						color: #777;
					}

					.selected-mark {
						color: $wp-primary;
					}

					&:hover {
						background-color: #f7f7f7;
					}

					&.is-focused {
						background-color: #f0f7ff;
					}

					&.is-selected {
						border-left: 3px solid $wp-primary;
					}

					&.is-recommended {
						background-color: #f6fbff;
					}
				}
			}
		}

		@media ( max-width: 768px ) {
			flex-direction: column;
			gap: 0;
		}
	}

	@media ( max-width: 768px ) {
		.wc-appointment-datetime-fields > .wc-appointment-time-range,
		.wc-appointment-datetime-fields > .wc-appointment-date-range,
		.wc-appointment-datetime-fields > .wc-appointment-month-range,
		.wc-appointment-datetime-fields > .wc-appointment-staff-field {
			flex: 0 0 100%;
			max-width: 100%;
		}
	}

	.wc-appointment-time-range,
	.wc-appointment-date-range,
	.wc-appointment-month-range {
		display: flex;
		gap: 12px;
		align-items: flex-end;
		width: 100%;

		.form-field {
			flex: 1 1 auto;
			min-width: 140px;
			position: relative; // anchor dropdown to the field
		}
	}

	@media ( min-width: 769px ) {
		.wc-appointment-datetime-fields {
			flex-wrap: nowrap;
		}

		/* Single date and staff: 25% each */
		.wc-appointment-datetime-fields > .wc-appointment-date-field,
		.wc-appointment-datetime-fields > .wc-appointment-staff-field {
			max-width: 25%;
		}

		/* Ranges (time/date/month): 50% each */
		.wc-appointment-datetime-fields > .wc-appointment-time-range,
		.wc-appointment-datetime-fields > .wc-appointment-date-range,
		.wc-appointment-datetime-fields > .wc-appointment-month-range {
			flex: 0 0 50%;
			max-width: 50%;
		}
	}

	.wc-appointment-date-field {
		min-width: 180px;
	}

	// Availability status styling
	.wc-appointment-availability {
		margin-bottom: 5px;
	}

	// Form controls inside modal
	.form-field {
		width: 100%;
		margin-top: 0;
		margin-bottom: 1.2em;

		label {
			display: block;
			margin-bottom: 8px;
			font-size: 13px;
			font-weight: 500;

			.required {
				color: #d63638;
			}
		}

		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="month"],
		input[type="date"],
		input[type="time"],
		select {
			width: 100%;
			max-width: 100%;

			&:focus {
				border-color: #007cba;
				box-shadow: 0 0 0 1px #007cba;
				outline: none;
			}
		}

		// Default-hidden fields; specific sections will override visibility
		&.wc-appointment-existing-customer,
		&.wc-appointment-manual-entry,
		&.wc-appointment-existing-order,
		&.wc-appointment-staff-field,
		&.wc-appointment-date-field,
		&.wc-appointment-time-field,
		&.wc-appointment-duration-field {
			display: none;
		}
	}

	// Add-ons.
	.wc-pao-addon {
		legend.wc-pao-addon-name {
			padding: 6px 0;
		}
	}

	.ui-datepicker-trigger {
		margin-left: 6px;
		vertical-align: middle;
	}

	.wc-appointment-inline-notice,
	#appointment-availability-status,
	#wc-appointment-success-panel {
		&.notice,
		.notice {
			display: block;
			padding: 8px 10px;
			margin: 0 0 20px;
			border: 0;
			box-shadow: none;
			border-left: 4px solid #ccd0d4;

			&.notice-success {
				border-left-color: #46b450;
			}

			&.notice-error {
				border-left-color: #dc3232;
			}

			&.notice-info {
				border-left-color: #00a0d2;
			}

		}

		.wc-appointment-success-actions-top {
			margin: 2.5em 0 1.5em;
		}
	}
}

// Datepicker visibility in admin modal
// Ensure jQuery UI datepicker from Product Add-Ons displays above the Backbone modal overlay.
.wc-backbone-modal {
	#ui-datepicker-div,
	.ui-datepicker,
	.wc_pao_datepicker,
	.wc-pao-datepicker-in-admin-modal {
		z-index: 1000000 !important;
	}
}

// Busy/loader rules moved to container and header
.wc-backbone-modal-main {
	position: relative;

	&.is-busy {
		.wc-appointment-modal-content {
			filter: blur( 2px );
			pointer-events: none;
		}
	}
}

.wc-backbone-modal-header {
	position: relative;

	.wc-appointment-modal-loading {
		display: none;
		position: absolute;
		right: 65px;
		top: 50%;
		transform: translateY( -50% );
		text-align: center;
		padding: 0;
		color: #666;

		.spinner,
		p {
			margin: 0;
		}

		&.is-busy {
			display: inline-flex;
			align-items: center;
			gap: 10px;
		}
	}

	// Inline header action link placed next to the title
	.wc-appointment-header-link {
		margin-left: 12px;
		font-size: 13px;
		font-weight: 400;
		text-decoration: none;
	}

	.wc-appointment-header-link:hover {
		text-decoration: underline;
	}
}

.wc-backbone-modal-footer {
	.wc-appointment-footer-price {
		float: left;
		text-align: left;
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 30px;

		#appointment_price_spinner.spinner {
			display: none;
			vertical-align: middle;
		}

		#appointment_price_spinner.spinner.is-active {
			display: inline-block;
		}

		.button-link {
			text-decoration: none;
		}
	}
}
