/**
 * MicAppTemplate — Auth Pages Styles
 *
 * Mobile-first auth layout: centered card, brand area, forms.
 * Used for login, register, forgot-password, and reset-password.
 *
 * @package MicAppTemplate
 * @since   1.0.0
 */

/* ==========================================================================
   Auth Layout — Full-screen centered
   ========================================================================== */

.mat-auth-layout {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--mat-space-4);
	background: var(--mat-surface-bg);
	background-image:
		radial-gradient(ellipse at 20% 50%, var(--mat-color-primary-light) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 20%, var(--mat-color-accent-light, var(--mat-color-primary-light)) 0%, transparent 50%);
	background-attachment: fixed;
}

.mat-auth-container {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	animation: matFadeInUp 0.4s var(--mat-ease-out);
}

.mat-auth-card {
	padding: var(--mat-space-6) var(--mat-space-5);
	border-radius: var(--mat-radius-xl);
	box-shadow: var(--mat-shadow-lg);
}

/* ==========================================================================
   Brand Area
   ========================================================================== */

.mat-auth-brand {
	text-align: center;
	margin-bottom: var(--mat-space-6);
}

.mat-auth-brand__icon,
.mat-auth-brand__logo {
	display: inline-block;
	margin-bottom: var(--mat-space-3);
}

.mat-auth-brand__logo {
	width: 48px;
	height: 48px;
	border-radius: var(--mat-radius-lg);
	object-fit: contain;
}

.mat-auth-brand__title {
	font-size: var(--mat-text-2xl);
	font-weight: var(--mat-weight-bold);
	color: var(--mat-text-heading);
	margin-bottom: var(--mat-space-1);
}

.mat-auth-brand__subtitle {
	font-size: var(--mat-text-sm);
	color: var(--mat-text-muted);
	line-height: 1.5;
}

/* ==========================================================================
   Auth Form
   ========================================================================== */

.mat-auth-form {
	margin-bottom: var(--mat-space-2);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.mat-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--mat-space-2);
	padding: var(--mat-space-3) var(--mat-space-4);
	border-radius: var(--mat-radius-lg);
	font-size: var(--mat-text-sm);
	line-height: 1.5;
	margin-bottom: var(--mat-space-5);
	animation: matFadeIn 0.3s var(--mat-ease-out);
}

.mat-alert__icon {
	flex-shrink: 0;
	margin-top: 1px;
}

.mat-alert--error {
	background: var(--mat-error-light, hsl(0, 90%, 96%));
	color: var(--mat-color-error);
	border: 1px solid var(--mat-color-error);
	border-inline-start-width: 3px;
}

.mat-alert--success {
	background: var(--mat-success-light, hsl(142, 70%, 95%));
	color: var(--mat-success, hsl(142, 70%, 30%));
	border: 1px solid var(--mat-color-success);
	border-inline-start-width: 3px;
}

.mat-alert--warning {
	background: var(--mat-warning-light, hsl(38, 90%, 95%));
	color: var(--mat-warning, hsl(38, 90%, 35%));
	border: 1px solid var(--mat-color-warning, hsl(38, 90%, 50%));
	border-inline-start-width: 3px;
}

.mat-alert--info {
	background: var(--mat-info-light, hsl(210, 90%, 95%));
	color: var(--mat-info, hsl(210, 90%, 35%));
	border: 1px solid var(--mat-color-info, hsl(210, 90%, 50%));
	border-inline-start-width: 3px;
}

/* ==========================================================================
   Input Icon Enhancements
   ========================================================================== */

.mat-input-icon-wrap {
	position: relative;
}

.mat-input-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--mat-text-muted);
	pointer-events: none;
	z-index: 1;
}

/* --left / --right are legacy names: they mean leading / trailing, and
   resolve to the inline start / end so the icons follow the text direction. */
.mat-input-icon--left {
	inset-inline-start: var(--mat-space-3);
}

.mat-input-icon--right {
	inset-inline-end: var(--mat-space-3);
	pointer-events: auto;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mat-input-icon--right:hover {
	color: var(--mat-color-primary);
}

.mat-input--with-icon-left {
	padding-inline-start: calc(var(--mat-space-3) + 20px + var(--mat-space-2));
}

.mat-input--with-icon-right {
	padding-inline-end: calc(var(--mat-space-3) + 20px + var(--mat-space-2));
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.mat-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--mat-space-2);
	cursor: pointer;
	font-size: var(--mat-text-sm);
	color: var(--mat-text-secondary);
	user-select: none;
}

.mat-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.mat-checkbox__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 2px solid var(--mat-border-color);
	border-radius: var(--mat-radius-sm);
	transition: all var(--mat-transition-fast);
	flex-shrink: 0;
}

.mat-checkbox input:checked + .mat-checkbox__mark {
	background: var(--mat-color-primary);
	border-color: var(--mat-color-primary);
}

.mat-checkbox input:checked + .mat-checkbox__mark::after {
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.mat-checkbox input:focus-visible + .mat-checkbox__mark {
	box-shadow: 0 0 0 3px var(--mat-color-primary-light);
}

/* ==========================================================================
   Password Strength Indicator
   ========================================================================== */

.mat-password-strength {
	margin-top: var(--mat-space-2);
	display: flex;
	align-items: center;
	gap: var(--mat-space-2);
}

.mat-password-strength__bar {
	flex: 1;
	height: 4px;
	background: var(--mat-border-color);
	border-radius: 2px;
	overflow: hidden;
}

.mat-password-strength__fill {
	height: 100%;
	width: 0;
	border-radius: 2px;
	transition: width 0.3s var(--mat-ease-out), background-color 0.3s var(--mat-ease-out);
}

.mat-password-strength__label {
	white-space: nowrap;
	font-weight: var(--mat-weight-medium);
}

/* Strength levels */
.mat-password-strength[data-strength="weak"] .mat-password-strength__fill {
	width: 25%;
	background: var(--mat-color-error);
}
.mat-password-strength[data-strength="weak"] .mat-password-strength__label {
	color: var(--mat-color-error);
}

.mat-password-strength[data-strength="fair"] .mat-password-strength__fill {
	width: 50%;
	background: var(--mat-color-warning, hsl(38, 90%, 50%));
}
.mat-password-strength[data-strength="fair"] .mat-password-strength__label {
	color: var(--mat-color-warning, hsl(38, 90%, 50%));
}

.mat-password-strength[data-strength="good"] .mat-password-strength__fill {
	width: 75%;
	background: var(--mat-color-info, hsl(210, 90%, 50%));
}
.mat-password-strength[data-strength="good"] .mat-password-strength__label {
	color: var(--mat-color-info, hsl(210, 90%, 50%));
}

.mat-password-strength[data-strength="strong"] .mat-password-strength__fill {
	width: 100%;
	background: var(--mat-color-success);
}
.mat-password-strength[data-strength="strong"] .mat-password-strength__label {
	color: var(--mat-color-success);
}

/* ==========================================================================
   Social Login
   ========================================================================== */

/* Divider: "or continue with" */
.mat-social-divider {
	display: flex;
	align-items: center;
	gap: var(--mat-space-3);
	margin: var(--mat-space-5) 0;
}

.mat-social-divider::before,
.mat-social-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--mat-border-color);
}

.mat-social-divider__text {
	font-size: var(--mat-text-xs);
	color: var(--mat-text-muted);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: var(--mat-weight-medium);
}

/* Social button base */
.mat-btn--social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mat-space-3);
	font-weight: var(--mat-weight-medium);
	border: 1px solid var(--mat-border-color);
	background: var(--mat-surface-card);
	color: var(--mat-text-primary);
	transition:
		background-color var(--mat-transition-fast),
		border-color var(--mat-transition-fast),
		box-shadow var(--mat-transition-fast);
	text-decoration: none;
	cursor: pointer;
}

.mat-btn--social:hover {
	background: var(--mat-surface-bg);
	border-color: var(--mat-text-muted);
	box-shadow: var(--mat-shadow-sm);
}

.mat-btn--social:active {
	transform: scale(0.98);
}

.mat-btn--social .mat-btn__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

/* Google-specific styling */
.mat-btn--google:hover {
	border-color: #4285f4;
	box-shadow: 0 1px 3px rgba(66, 133, 244, 0.2);
}

/* Telegram-specific styling */
.mat-btn--telegram:hover {
	border-color: #0088cc;
	box-shadow: 0 1px 3px rgba(0, 136, 204, 0.2);
}

/* Social buttons container */
.mat-social-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--mat-space-3);
}

/* ==========================================================================
   Auth Footer (links section)
   ========================================================================== */

.mat-auth-footer {
	text-align: center;
	margin-top: var(--mat-space-5);
	padding-top: var(--mat-space-4);
	border-top: 1px solid var(--mat-border-color);
}

.mat-link {
	color: var(--mat-color-primary);
	transition: color var(--mat-transition-fast);
}

.mat-link:hover {
	color: var(--mat-color-primary-dark);
}

.mat-link--bold {
	font-weight: var(--mat-weight-semibold);
}

/* ==========================================================================
   Helper Classes
   ========================================================================== */

.mat-row--between {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.mat-row--gap {
	display: flex;
	flex-wrap: wrap;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes matFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

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

/* ==========================================================================
   Responsive — Tablet  (>= 768px)
   ========================================================================== */

@media (min-width: 768px) {
	.mat-auth-card {
		padding: var(--mat-space-8) var(--mat-space-8);
	}

	.mat-auth-container {
		max-width: 440px;
	}
}

/* ==========================================================================
   Responsive — Desktop (>= 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
	.mat-auth-container {
		max-width: 460px;
	}

	.mat-auth-card {
		padding: var(--mat-space-10) var(--mat-space-10);
	}
}