/**
 * ============================================================================
 * MAX LOGIN LAYOUT - Customizações Modular
 * ============================================================================
 * 
 * Este arquivo contém TODAS as customizações de cores e layout para login.
 * IMPORTANTE: Todos os seletores são ESPECÍFICOS para não afetar outras páginas!
 * 
 * @version: 2.0.0 (Seletores Específicos)
 * @date: 2025-12-05
 */

/* === VARIÁVEIS DE COR === */
:root {
	--orange-energia: #FC4B08;
	--orange-energia-dark: #d63e05;
	--orange-energia-light: #fd7542;
	--orange-energia-surface: rgba(252, 73, 8, 0.596);
	--gray-400: #c7c7c7;
}

/* ============================================================================
   SELETORES ESPECÍFICOS APENAS PARA LOGIN
   ============================================================================ */

/* === BOTÕES DE LOGIN === */
.for-login .btn-login,
.for-signup .btn-signup,
.for-forgot .btn-forgot,
.for-login .btn-primary.btn-block,
.for-signup .btn-primary.btn-block,
.for-forgot .btn-primary.btn-block {
	background-color: var(--orange-energia) !important;
	border-color: var(--orange-energia) !important;
	color: white !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 2px 8px rgba(252, 75, 8, 0.3) !important;
}

.for-login .btn-login:hover,
.for-signup .btn-signup:hover,
.for-forgot .btn-forgot:hover,
.for-login .btn-primary.btn-block:hover,
.for-signup .btn-primary.btn-block:hover,
.for-forgot .btn-primary.btn-block:hover {
	background-color: var(--orange-energia-dark) !important;
	border-color: var(--orange-energia-dark) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(252, 75, 8, 0.4) !important;
}

.for-login .btn-login:active,
.for-signup .btn-signup:active,
.for-forgot .btn-forgot:active,
.for-login .btn-primary.btn-block:active,
.for-signup .btn-primary.btn-block:active,
.for-forgot .btn-primary.btn-block:active {
	transform: translateY(0) !important;
	box-shadow: 0 1px 4px rgba(252, 75, 8, 0.3) !important;
}

.for-login .btn-login:focus,
.for-signup .btn-signup:focus,
.for-forgot .btn-forgot:focus,
.for-login .btn-primary.btn-block:focus,
.for-signup .btn-primary.btn-block:focus,
.for-forgot .btn-primary.btn-block:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px var(--orange-energia-surface) !important;
}

/* === LINKS APENAS NA PÁGINA DE LOGIN === */
.for-login a,
.for-signup a,
.for-forgot a {
	color: var(--orange-energia);
}

.for-login a:hover,
.for-signup a:hover,
.for-forgot a:hover {
	color: var(--orange-energia-dark);
	text-decoration: underline;
}

.for-login .page-card-body .forgot-password-message > a:hover {
	color: var(--orange-energia) !important;
}

.for-login .sign-up-message a,
.for-signup .sign-up-message a,
.for-forgot .sign-up-message a {
	color: var(--orange-energia) !important;
}

.for-login .sign-up-message a:hover,
.for-signup .sign-up-message a:hover,
.for-forgot .sign-up-message a:hover {
	color: var(--orange-energia-dark) !important;
}

/* === INPUTS APENAS NA PÁGINA DE LOGIN === */
.for-login .form-control:focus,
.for-login input[type="text"]:focus,
.for-login input[type="email"]:focus,
.for-login input[type="password"]:focus,
.for-signup .form-control:focus,
.for-signup input[type="text"]:focus,
.for-signup input[type="email"]:focus,
.for-signup input[type="password"]:focus,
.for-forgot .form-control:focus,
.for-forgot input[type="text"]:focus,
.for-forgot input[type="email"]:focus,
.for-forgot input[type="password"]:focus {
	border-color: var(--orange-energia) !important;
	border-width: 2px !important;
	box-shadow: none !important;
	outline: none !important;
}

/* === PLACEHOLDER COLOR FOR INPUTS (LOGIN/SIGNUP/FORGOT) === */
/* Use the project's gray variable as requested */
.for-login input::placeholder,
.for-signup input::placeholder,
.for-forgot input::placeholder,
.for-login textarea::placeholder,
.for-signup textarea::placeholder,
.for-forgot textarea::placeholder,
.for-login .form-control::placeholder,
.for-signup .form-control::placeholder,
.for-forgot .form-control::placeholder {
	color: var(--gray-400) !important;
	opacity: 1 !important; /* ensure consistent visibility */
}

/* Vendor-prefixed placeholders for broader browser support */
.for-login input::-webkit-input-placeholder,
.for-signup input::-webkit-input-placeholder,
.for-forgot input::-webkit-input-placeholder,
.for-login textarea::-webkit-input-placeholder,
.for-signup textarea::-webkit-input-placeholder,
.for-forgot textarea::-webkit-input-placeholder,
.for-login .form-control::-webkit-input-placeholder,
.for-signup .form-control::-webkit-input-placeholder,
.for-forgot .form-control::-webkit-input-placeholder {
	color: var(--gray-600) !important;
	opacity: 1 !important;
}

.for-login input:-ms-input-placeholder,
.for-signup input:-ms-input-placeholder,
.for-forgot input:-ms-input-placeholder,
.for-login textarea:-ms-input-placeholder,
.for-signup textarea:-ms-input-placeholder,
.for-forgot textarea:-ms-input-placeholder,
.for-login .form-control:-ms-input-placeholder,
.for-signup .form-control:-ms-input-placeholder,
.for-forgot .form-control:-ms-input-placeholder {
	color: var(--gray-600) !important;
	opacity: 1 !important;
}

/* === CHECKBOX APENAS NA PÁGINA DE LOGIN === */
.for-login input[type="checkbox"]:checked,
.for-signup input[type="checkbox"]:checked,
.for-forgot input[type="checkbox"]:checked {
	background-color: var(--orange-energia) !important;
	border-color: var(--orange-energia) !important;
}

.for-login input[type="checkbox"]:checked::after,
.for-signup input[type="checkbox"]:checked::after,
.for-forgot input[type="checkbox"]:checked::after {
	border-color: white !important;
}

/* === DARK MODE - ESPECÍFICO PARA LOGIN === */
[data-theme="dark"] .for-login .btn-login,
[data-theme="dark"] .for-signup .btn-signup,
[data-theme="dark"] .for-forgot .btn-forgot,
[data-theme="dark"] .for-login .btn-primary.btn-block,
[data-theme="dark"] .for-signup .btn-primary.btn-block,
[data-theme="dark"] .for-forgot .btn-primary.btn-block {
	background-color: var(--orange-energia) !important;
	border-color: var(--orange-energia) !important;
	box-shadow: 0 2px 8px rgba(252, 75, 8, 0.4) !important;
}

[data-theme="dark"] .for-login .btn-login:hover,
[data-theme="dark"] .for-signup .btn-signup:hover,
[data-theme="dark"] .for-forgot .btn-forgot:hover,
[data-theme="dark"] .for-login .btn-primary.btn-block:hover,
[data-theme="dark"] .for-signup .btn-primary.btn-block:hover,
[data-theme="dark"] .for-forgot .btn-primary.btn-block:hover {
	background-color: var(--orange-energia-light) !important;
	border-color: var(--orange-energia-light) !important;
	box-shadow: 0 4px 12px rgba(252, 75, 8, 0.5) !important;
}

[data-theme="dark"] .for-login a,
[data-theme="dark"] .for-signup a,
[data-theme="dark"] .for-forgot a {
	color: var(--orange-energia-light);
}

/* ============================================================================
   CUSTOMIZAÇÕES DE LAYOUT - LOGO
   ============================================================================ */

.for-login .page-card-head img.app-logo,
.for-signup .page-card-head img.app-logo,
.for-forgot .page-card-head img.app-logo {
	max-height: 150px !important;
}

/* Configuração Base para Elementos Animados */
.for-login .page-card,
.for-signup .page-card,
.for-forgot .page-card,
.for-login .page-card-head img.app-logo,
.for-signup .page-card-head img.app-logo,
.for-forgot .page-card-head img.app-logo,
.for-login .form-group,
.for-signup .form-group,
.for-forgot .form-group,
.for-login .btn-login,
.for-signup .btn-signup,
.for-forgot .btn-forgot,
.for-login .btn-primary.btn-block,
.for-signup .btn-primary.btn-block,
.for-forgot .btn-primary.btn-block,
.for-login .sign-up-message,
.for-signup .sign-up-message,
.for-forgot .sign-up-message,
.for-login .forgot-password-message,
.for-signup .forgot-password-message,
.for-forgot .forgot-password-message {
	animation-duration: 0.8s !important;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important; /* Easing suave */
	animation-fill-mode: both !important;
}

/* 1. Card (Container) */
.for-login .page-card,
.for-signup .page-card,
.for-forgot .page-card {
	animation-name: fadeInUpModern;
	animation-delay: 0.1s;
}

/* 2. Logo */
.for-login .page-card-head img.app-logo,
.for-signup .page-card-head img.app-logo,
.for-forgot .page-card-head img.app-logo {
	animation-name: scaleInModern;
	animation-delay: 0.2s;
}

/* 3. Inputs (Cascata para efeito sequencial) */
.for-login .form-group:nth-of-type(1),
.for-signup .form-group:nth-of-type(1),
.for-forgot .form-group:nth-of-type(1) {
	animation-name: fadeInUpModern;
	animation-delay: 0.3s;
}

.for-login .form-group:nth-of-type(2),
.for-signup .form-group:nth-of-type(2),
.for-forgot .form-group:nth-of-type(2) {
	animation-name: fadeInUpModern;
	animation-delay: 0.4s;
}

.for-login .form-group:nth-of-type(3),
.for-signup .form-group:nth-of-type(3),
.for-forgot .form-group:nth-of-type(3) {
	animation-name: fadeInUpModern;
	animation-delay: 0.5s;
}

/* 4. Botões */
.for-login .btn-login,
.for-signup .btn-signup,
.for-forgot .btn-forgot,
.for-login .btn-primary.btn-block,
.for-signup .btn-primary.btn-block,
.for-forgot .btn-primary.btn-block {
	animation-name: fadeInUpModern;
	animation-delay: 0.6s;
}

/* 5. Links de rodapé */
.for-login .sign-up-message,
.for-signup .sign-up-message,
.for-forgot .sign-up-message,
.for-login .forgot-password-message,
.for-signup .forgot-password-message,
.for-forgot .forgot-password-message {
	animation-name: fadeInUpModern;
	animation-delay: 0.7s;
}

/* ============================================================================
   FIM DO ARQUIVO
   ============================================================================ */