/* MCP Authentication Plugin Styles */

/*
 * --- Variables for Theming --- 
 * Easily customize the look and feel.
 */
:root {
	--mcp-auth-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--mcp-auth-font-size: 14px;
	--mcp-auth-text-color: #333;
	--mcp-auth-label-color: #555;
	--mcp-auth-primary-color: var(--primary);
	--mcp-auth-primary-hover-color: var(--primary-hover);
	--mcp-auth-border-color: #ddd;
	--mcp-auth-border-focus-color: var(--mcp-auth-primary-color);
	--mcp-auth-border-radius: 4px;
	--mcp-auth-input-padding: 10px 12px;
	--mcp-auth-button-padding: 10px 15px;
	--mcp-auth-form-row-margin: 15px 0;
	--mcp-auth-form-max-width: 600px;
	--mcp-auth-error-color: #dc3232;
	--mcp-auth-error-bg-color: #fdf8f8;
	--mcp-auth-error-border-color: var(--mcp-auth-error-color);
	--mcp-auth-success-color: #46b450;
	--mcp-auth-success-bg-color: #f8fdf8;
	--mcp-auth-success-border-color: var(--mcp-auth-success-color);
	--mcp-message-container-padding: 15px;
	--mcp-message-container-margin-bottom: 20px;
	--mcp-auth-padding: 15px;
	--mcp-auth-margin-large: 20px;
	--mcp-auth-margin-small: 5px;
	--mcp-auth-error-text-color: var(--mcp-auth-error-color);
	--mcp-auth-success-text-color: var(--mcp-auth-success-color);
}

/* --- Notice Styling --- */
.mcp-auth-notice {
	font-family: var(--mcp-auth-font-family);
	font-size: 16px;
	line-height: 1.5;
}

.mcp-auth-notice-success {
	background-color: var(--mcp-auth-success-color);
	color: white;
}

/* Override inline styles for themes that might conflict */
#mcp-registration-success-notice {
	font-family: var(--mcp-auth-font-family) !important;
}

/* --- General Form Styling --- */
.mcp-auth-form {
	font-family: var(--mcp-auth-font-family);
	font-size: var(--mcp-auth-font-size);
	color: var(--mcp-auth-text-color);
	width: 100%;
	max-width: var(--mcp-auth-form-max-width);
	margin: 2em auto; /* Center the form somewhat */
	padding: 2em;
	background-color: #fff;
	border: 1px solid var(--mcp-auth-border-color);
	border-radius: var(--mcp-auth-border-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mcp-auth-form-row {
	margin: var(--mcp-auth-form-row-margin);
	width: 100%;
}

.mcp-auth-form label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	color: var(--mcp-auth-label-color);
}

.mcp-auth-form input[type='text'],
.mcp-auth-form input[type='email'],
.mcp-auth-form input[type='password'] {
	width: 100%;
	padding: var(--mcp-auth-input-padding);
	border: 1px solid var(--mcp-auth-border-color);
	border-radius: var(--mcp-auth-border-radius);
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
	transition: border-color 0.2s ease-in-out;
}

.mcp-auth-form input[type='text']:focus,
.mcp-auth-form input[type='email']:focus,
.mcp-auth-form input[type='password']:focus {
	border-color: var(--mcp-auth-border-focus-color);
	outline: none;
	box-shadow: 0 0 0 1px var(--mcp-auth-border-focus-color);
}

/* --- Button Styling --- */
.mcp-auth-submit-button {
	background-color: var(--mcp-auth-primary-color);
	color: #fff;
	border: none;
	padding: var(--mcp-auth-button-padding);
	border-radius: var(--mcp-auth-border-radius);
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	text-align: center;
	width: 100%;
	transition: background-color 0.2s ease-in-out;
}

.mcp-auth-submit-button:hover,
.mcp-auth-submit-button:focus {
	background-color: var(--mcp-auth-primary-hover-color);
	outline: none;
}

/* --- Message Styling (Errors, Success & Info) --- */
.mcp-message-container {
	padding: var(--mcp-message-container-padding);
	margin-bottom: var(--mcp-message-container-margin-bottom);
	border: 1px solid transparent;
	border-radius: var(--mcp-auth-border-radius);
}

.mcp-message-container ul {
	margin: 0;
	padding-left: 20px;
}

.mcp-auth-error {
	font-weight: 600;
	padding: var(--mcp-message-container-padding);
	color: var(--mcp-auth-error-color);
	background-color: var(--mcp-auth-error-bg-color);
	border-color: var(--mcp-auth-error-border-color);
}

.mcp-auth-success {
	padding: var(--mcp-message-container-padding);
	font-weight: 600;
	color: var(--mcp-auth-success-color);
	background-color: var(--mcp-auth-success-bg-color);
	border-color: var(--mcp-auth-success-border-color);
}

.mcp-auth-info {
	padding: var(--mcp-message-container-padding);
	font-weight: 600;
	color: #0073aa;
	background-color: #f0f8ff;
	border-color: #0073aa;
}

.mcp-auth-message-container {
	max-width: var(--mcp-auth-form-max-width);
	padding: var(--mcp-auth-padding);
	border: 1px solid transparent;
	border-radius: var(--mcp-auth-border-radius);
	margin-bottom: var(--mcp-auth-margin-large);
}

/* Ensure proper styling for message container paragraphs */
.mcp-auth-message-container p {
	margin: 0 0 0.5em;
}

.mcp-auth-message-container p:last-child {
	margin-bottom: 0;
}

/* Styling for JS-added inline errors */
.mcp-auth-form .mcp-field-error-message {
	color: var(--mcp-auth-error-color);
	font-size: 0.9em;
	margin-top: 5px;
	display: none; /* Hidden by default */
}

.mcp-auth-form input.mcp-input-error {
	border-color: var(--mcp-auth-error-color);
}

.mcp-auth-form input.mcp-input-error:focus {
	box-shadow: 0 0 0 1px var(--mcp-auth-error-color);
}

/* Inline Field Error Messages */
.mcp-auth-error-message {
	display: block; /* Ensure it appears on its own line */
	color: var(--mcp-auth-error-text-color);
	font-size: 0.875em; /* Slightly smaller text */
	margin-top: var(--mcp-auth-margin-small);
}

/* Terms and Conditions Box */
.mcp-auth-terms-box {
	max-height: 150px; /* Adjust as needed */
	overflow-y: auto; /* Enable vertical scrolling */
	border: 1px solid var(--mcp-auth-border-color);
	padding: var(--mcp-auth-padding);
	margin-bottom: var(--mcp-auth-margin-large);
	background-color: #f9f9f9; /* Light background for contrast */
	font-size: 0.9em;
}

.mcp-auth-terms-box p {
	margin-bottom: 1em; /* Space between paragraphs inside the box */
}

/* Terms Agreement Checkbox Row */
.mcp-auth-terms-agreement input[type='checkbox'] {
	/* Align checkbox with label text */
	vertical-align: middle;
	margin-right: var(--mcp-auth-margin-small);
}

.mcp-auth-terms-agreement label {
	display: inline-block; /* Allow label to sit next to checkbox */
	vertical-align: middle;
	margin-bottom: 0; /* Override default p > label margin */
}

/* Links below form (e.g., Lost Password, Register, Log in) */
.mcp-auth-links {
	margin-top: 1.5rem; /* Add space above the links */
	text-align: center; /* Optional: Center the links */
}

.mcp-auth-links a {
	margin: 0 0.5em; /* Add some space between links if there are multiple */
}

/* Login Form Specific Styles */
.mcp-auth-rememberme {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.mcp-auth-rememberme label {
	margin-bottom: 0;
}

.mcp-auth-image__wrapper {
	width: 100px;
	height: 100px;
}

.mcp-auth-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mcp-auth-form form {
	width: 100%;
}

.mcp-auth-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
}

.mcp-auth-form-container {
	width: 100%;
	max-width: var(--mcp-auth-form-max-width);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --- Resend Verification Form --- */
.mcp-auth-resend-form {
	width: var(--mcp-auth-form-max-width); /* Take full width of its container */
	margin-top: var(--mcp-auth-margin-large); /* Space above the resend form */
	padding: var(--mcp-auth-padding); /* Padding inside the box */
	border: 1px solid var(--mcp-auth-border-color); /* Subtle border */
	border-radius: var(--mcp-auth-border-radius);
	background-color: #f9f9f9; /* Light background like terms box */
}

.mcp-auth-resend-form h4 {
	margin-top: 0;
	margin-bottom: var(--mcp-auth-margin-small);
	font-size: 1.1em;
	text-align: center;
}

.mcp-auth-resend-form p {
	margin-bottom: var(--mcp-auth-margin-large);
	text-align: center;
}

/* Ensure form elements within resend form inherit styles */
.mcp-auth-resend-form .mcp-auth-form-row {
	/* Inherits margin from general rules, maybe remove bottom margin for tighter layout? */
	/* margin-bottom: var(--mcp-auth-margin-small); */
}

.mcp-auth-resend-form label {
	/* Inherits styling */
}

.mcp-auth-resend-form input[type='email'] {
	/* Inherits styling */
}

.mcp-auth-resend-form .mcp-auth-submit-button {
	/* Inherits styling */
}

/* =============================================================================
   Password Strength Meter Styles
   ============================================================================= */

.mcp-password-strength-meter {
	margin-top: 8px;
	margin-bottom: 8px;
	transform-origin: top;
	will-change: opacity, max-height;
	width: 100%;
	/* Prevent layout shift */
	min-height: 0;
}

.mcp-strength-bar {
	width: 100%;
	height: 6px;
	background-color: #e5e5e5;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}

.mcp-strength-fill {
	height: 100%;
	transition: width 0.3s ease, background-color 0.3s ease;
	border-radius: 3px;
}

/* Strength level colors */
.mcp-strength-fill.very-weak {
	background-color: #dc3232;
}

.mcp-strength-fill.weak {
	background-color: #ff8c00;
}

.mcp-strength-fill.fair {
	background-color: #ffd700;
}

.mcp-strength-fill.good {
	background-color: #7ad03a;
}

.mcp-strength-fill.strong {
	background-color: #46b450;
}

.mcp-strength-text {
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 8px;
	transition: opacity 0.2s ease;
}

.mcp-strength-text.very-weak {
	color: #dc3232;
}

.mcp-strength-text.weak {
	color: #ff8c00;
}

.mcp-strength-text.fair {
	color: #b8860b;
}

.mcp-strength-text.good {
	color: #7ad03a;
}

.mcp-strength-text.strong {
	color: #46b450;
}

.mcp-strength-requirements {
	font-size: 12px;
	color: #666;
}

.mcp-strength-requirements ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcp-strength-requirements li {
	margin-bottom: 4px;
	padding-left: 20px;
	position: relative;
	/* Transition moved to later in file for better organization */
}

.mcp-strength-requirements li:before {
	content: '✗';
	position: absolute;
	left: 0;
	color: #dc3232;
	font-weight: bold;
}

.mcp-strength-requirements li.mcp-req-met:before {
	content: '✓';
	color: #46b450;
}

.mcp-strength-requirements li.mcp-req-met {
	color: #46b450;
}

.mcp-strength-requirements li.mcp-req-unmet {
	color: #666;
}

/* Strength meter visibility states */
.mcp-strength-meter-hidden {
	pointer-events: none;
}

.mcp-strength-meter-visible {
	pointer-events: auto;
}

/* Add subtle animation to requirements list items */
.mcp-strength-requirements li {
	transition: color 0.3s ease, opacity 0.3s ease;
}

.mcp-strength-requirements li.mcp-req-met {
	animation: checkmark-pulse 0.3s ease-out;
}

@keyframes checkmark-pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/* Smooth color transitions for strength bar */
.mcp-strength-bar {
	background: linear-gradient(to right, #f5f5f5 0%, #e5e5e5 100%);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Add subtle glow effect on stronger passwords */
.mcp-strength-fill.good,
.mcp-strength-fill.strong {
	box-shadow: 0 0 3px rgba(70, 180, 80, 0.5);
}

/* Mobile-friendly touch targets */
@media (pointer: coarse) {
	.mcp-password-strength-meter {
		margin-top: 12px;
		margin-bottom: 12px;
	}
	
	.mcp-strength-requirements li {
		margin-bottom: 6px;
		font-size: 13px;
	}
}

/* Responsive design */
@media (max-width: 480px) {
	.mcp-strength-requirements {
		font-size: 11px;
	}
}

/* =============================================================================
   Admin Settings Page AJAX Styles
   ============================================================================= */

/* AJAX action buttons */
.mcp-ajax-action {
	position: relative;
	transition: all 0.3s ease;
}

.mcp-ajax-action.mcp-loading {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.mcp-ajax-action .mcp-button-loading {
	display: none;
}

.mcp-ajax-action.mcp-loading .mcp-button-text {
	display: none;
}

.mcp-ajax-action.mcp-loading .mcp-button-loading {
	display: inline;
	animation: pulse 1.5s ease-in-out infinite;
}

/* Enhanced button hover effects */
.mcp-ajax-action:hover:not(.mcp-loading) {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Page status overview enhancements */
.mcp-page-overview-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 20px;
	margin: 15px 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mcp-quick-status-grid {
	display: flex;
	gap: 15px;
	margin-top: 15px;
	flex-wrap: wrap;
}

.quick-status-item {
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #f9f9f9;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: all 0.2s ease;
	min-width: 200px;
}

.quick-status-item:hover {
	background: #f5f5f5;
	border-color: #ccc;
}

/* Success indicators */
.quick-status-item strong {
	color: #333;
	font-weight: 600;
}

/* Notification animations */
.mcp-notification {
	animation: slideInDown 0.4s ease-out;
	border-left: 4px solid #0073aa;
}

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

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

@keyframes slideInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0%, 100% { 
		opacity: 1; 
	}
	50% { 
		opacity: 0.5; 
	}
}

/* Loading states for different button types */
.mcp-ajax-action.button-primary.mcp-loading {
	background-color: #007cba;
	border-color: #007cba;
}

.mcp-ajax-action.button-secondary.mcp-loading {
	background-color: #f6f7f7;
	border-color: #ddd;
	color: #555;
}

/* Enhanced status grid responsiveness */
@media (max-width: 768px) {
	.mcp-quick-status-grid {
		flex-direction: column;
		gap: 10px;
	}
	
	.quick-status-item {
		min-width: auto;
		width: 100%;
	}
	
	.mcp-page-overview-card {
		padding: 15px;
	}
}

/* Status indicator improvements */
.mcp-validation-message {
	margin: 8px 0;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.4;
}

.mcp-validation-message.notice-success {
	background-color: #d4f4dd;
	border-color: #46b450;
	color: #2e7d32;
}

.mcp-validation-message.notice-warning {
	background-color: #fff3cd;
	border-color: #ffc107;
	color: #000;
}

.mcp-validation-message.notice-error {
	background-color: #f8d7da;
	border-color: #dc3545;
	color: #721c24;
}

/* Improved button group spacing */
.mcp-page-overview-card .button + .button {
	margin-left: 8px;
}

/* Enhanced admin form styling */
.mcp-auth-admin-form {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 20px;
	margin: 20px 0;
}

.mcp-auth-admin-form .form-table th {
	padding-left: 0;
}

.mcp-auth-admin-form .form-table td {
	padding-bottom: 20px;
}

/* Success state animations */
.mcp-ajax-action.success-state {
	background-color: #46b450 !important;
	border-color: #46b450 !important;
	color: #fff !important;
	animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

/* Error state styling */
.mcp-ajax-action.error-state {
	background-color: #dc3232 !important;
	border-color: #dc3232 !important;
	color: #fff !important;
	animation: shake 0.6s ease-out;
}

@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-5px);
	}
	75% {
		transform: translateX(5px);
	}
}

/* Tooltip-like help text */
.mcp-help-text {
	font-size: 12px;
	color: #666;
	font-style: italic;
	margin-top: 4px;
}

/* Enhanced loading spinner */
.mcp-loading-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #0073aa;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 6px;
	vertical-align: middle;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Dropdown highlighting effects for instant feedback */
.mcp-highlight-success {
	background-color: #d4f4dd !important;
	border-color: #46b450 !important;
	box-shadow: 0 0 8px rgba(70, 180, 80, 0.3) !important;
	transition: all 0.3s ease !important;
}

.mcp-highlight-success.mcp-highlight-fade {
	background-color: #fff !important;
	border-color: #7e8993 !important;
	box-shadow: none !important;
	transition: all 2s ease !important;
}

/* Dropdown feedback styling */
.mcp-dropdown-feedback {
	display: inline-block;
	margin-left: 10px;
	color: #46b450;
	font-weight: 600;
	font-size: 13px;
	animation: feedbackSlideIn 0.3s ease-out;
}

@keyframes feedbackSlideIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Validation message update animation */
.mcp-validation-message.mcp-message-updated {
	animation: messageUpdate 0.6s ease-out;
	border-left: 4px solid #46b450 !important;
}

@keyframes messageUpdate {
	0% {
		background-color: rgba(70, 180, 80, 0.1);
		transform: scale(1);
	}
	50% {
		background-color: rgba(70, 180, 80, 0.2);
		transform: scale(1.02);
	}
	100% {
		background-color: transparent;
		transform: scale(1);
	}
}

/* Enhanced validation message styling */
.mcp-validation-message.notice-success {
	background-color: #d4f4dd;
	border-color: #46b450;
	color: #2e7d32;
}

.mcp-validation-message.notice-warning {
	background-color: #fff3cd;
	border-color: #ffc107;
	color: #000;
}

.mcp-validation-message.notice-error {
	background-color: #f8d7da;
	border-color: #dc3545;
	color: #721c24;
}