/* =========================================================
   ARPA DIGITAL - ROUNDCUBE LOGIN
   ========================================================= */


/* =========================================================
   BASE / FUNDO
   ========================================================= */

html,
body.task-login {
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

body.task-login {
	overflow-x: hidden !important;

	background:
		radial-gradient(
			circle at 15% 20%,
			rgba(37, 99, 235, 0.12),
			transparent 32%
		),
		radial-gradient(
			circle at 85% 80%,
			rgba(59, 130, 246, 0.08),
			transparent 30%
		),
		linear-gradient(
			135deg,
			#f8fbff 0%,
			#f3f6fb 45%,
			#eef3f9 100%
		) !important;

	min-height: 100vh;
}


/* =========================================================
   RESET DO LAYOUT ORIGINAL DO ROUNDCUBE
   ========================================================= */

body.task-login #layout,
body.task-login #layout-content {
	position: static !important;

	inset: auto !important;

	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;

	width: 100% !important;
	max-width: none !important;

	height: auto !important;
	min-height: 100vh !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */

body.task-login .arpa-login-container {
	width: 100%;
	min-height: 100vh;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	padding: 40px 20px;

	box-sizing: border-box;
}


/* =========================================================
   CARD
   ========================================================= */

body.task-login .arpa-login-card {
	width: 100%;
	max-width: 420px;

	padding: 42px 42px 36px;

	box-sizing: border-box;

	background: rgba(255, 255, 255, 0.98);

	border: 1px solid rgba(15, 23, 42, 0.08);

	border-radius: 18px;

	box-shadow:
		0 20px 60px rgba(15, 23, 42, 0.10),
		0 4px 14px rgba(15, 23, 42, 0.05);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   LOGO
   ========================================================= */

body.task-login .arpa-login-logo {
	width: 100%;

	display: flex;

	align-items: center;
	justify-content: center;

	margin: 0 0 25px !important;

	padding: 0 !important;

	position: static !important;
}

body.task-login .arpa-login-logo #logo {
	display: block !important;

	position: static !important;

	inset: auto !important;

	width: auto !important;

	max-width: 150px !important;

	height: auto !important;

	max-height: 62px !important;

	margin: 0 auto !important;

	padding: 0 !important;
}


/* =========================================================
   CABEÇALHO
   ========================================================= */

body.task-login .arpa-login-header {
	margin: 0 0 30px;

	text-align: center;
}

body.task-login .arpa-login-header h2 {
	margin: 0 0 8px;

	color: #111827;

	font-size: 26px;
	font-weight: 600;

	line-height: 1.25;

	letter-spacing: -0.5px;
}

body.task-login .arpa-login-header p {
	margin: 0;

	color: #6b7280;

	font-size: 14px;
	font-weight: 400;

	line-height: 1.5;
}


/* =========================================================
   FORM
   ========================================================= */

body.task-login #login-form {
	position: static !important;

	width: 100% !important;

	max-width: none !important;

	height: auto !important;

	min-height: 0 !important;

	margin: 0 !important;

	padding: 0 !important;

	background: none !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   ESTRUTURA INTERNA
   ========================================================= */

body.task-login #login-form .form-group {
	width: 100% !important;

	margin: 0 0 16px !important;
}

body.task-login #login-form .row {
	width: 100% !important;

	margin-left: 0 !important;

	margin-right: 0 !important;
}


/* =========================================================
   INPUT GROUP
   ========================================================= */

body.task-login #login-form .input-group {
	width: 100% !important;

	height: 50px;

	display: flex !important;

	flex-wrap: nowrap !important;

	align-items: stretch !important;

	margin: 0 0 16px !important;
}


/* =========================================================
   ÁREA DO ÍCONE
   ========================================================= */

body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append {
	display: flex !important;

	flex: 0 0 auto !important;
}

body.task-login #login-form .input-group-text {
	width: 48px !important;

	min-width: 48px !important;

	height: 50px !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	box-sizing: border-box !important;

	padding: 0 !important;

	color: #64748b !important;

	background: #f8fafc !important;

	border: 1px solid #d9dee7 !important;

	border-right: 0 !important;

	border-radius: 10px 0 0 10px !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="email"],
body.task-login #login-form input[type="password"] {
	flex: 1 1 auto !important;

	width: 1% !important;

	min-width: 0 !important;

	height: 50px !important;

	margin: 0 !important;

	padding: 0 15px !important;

	box-sizing: border-box !important;

	color: #111827 !important;

	background: #ffffff !important;

	border: 1px solid #d9dee7 !important;

	border-radius: 10px !important;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif !important;

	font-size: 14px !important;

	outline: none !important;

	box-shadow: none !important;

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease !important;
}


/* Campo quando há ícone à esquerda */

body.task-login #login-form .input-group-prepend + input.form-control,
body.task-login #login-form .input-group-prepend + .form-control {
	border-radius: 0 10px 10px 0 !important;
}


/* Placeholder */

body.task-login #login-form input::placeholder {
	color: #9ca3af !important;

	opacity: 1;
}


/* Hover */

body.task-login #login-form input.form-control:hover,
body.task-login #login-form input[type="text"]:hover,
body.task-login #login-form input[type="email"]:hover,
body.task-login #login-form input[type="password"]:hover {
	border-color: #b9c1cc !important;
}


/* Focus */

body.task-login #login-form input.form-control:focus,
body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="email"]:focus,
body.task-login #login-form input[type="password"]:focus {
	position: relative;

	border-color: #2563eb !important;

	box-shadow:
		0 0 0 3px rgba(37, 99, 235, 0.10) !important;

	z-index: 2;
}


/* =========================================================
   SELECT / DOMÍNIO
   ========================================================= */

body.task-login #login-form select {
	width: 100% !important;

	height: 50px !important;

	padding: 0 14px !important;

	color: #111827 !important;

	background: #ffffff !important;

	border: 1px solid #d9dee7 !important;

	border-radius: 10px !important;

	font-size: 14px !important;

	outline: none !important;

	box-shadow: none !important;
}


/* =========================================================
   BOTÃO
   ========================================================= */

body.task-login #login-form button,
body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"],
body.task-login #login-form .button,
body.task-login #login-form .btn,
body.task-login #login-form .mainaction {
	width: 100% !important;

	height: 50px !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	margin: 8px 0 0 !important;

	padding: 0 20px !important;

	box-sizing: border-box !important;

	color: #ffffff !important;

	background: linear-gradient(
		135deg,
		#2563eb 0%,
		#1d4ed8 100%
	) !important;

	border: 1px solid #2563eb !important;

	border-radius: 10px !important;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif !important;

	font-size: 14px !important;

	font-weight: 600 !important;

	text-transform: none !important;

	cursor: pointer !important;

	box-shadow:
		0 5px 14px rgba(37, 99, 235, 0.22) !important;

	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.08s ease !important;
}

body.task-login #login-form button:hover,
body.task-login #login-form input[type="submit"]:hover,
body.task-login #login-form .button:hover,
body.task-login #login-form .btn:hover {
	background: linear-gradient(
		135deg,
		#1d4ed8 0%,
		#1e40af 100%
	) !important;

	border-color: #1d4ed8 !important;

	box-shadow:
		0 8px 18px rgba(37, 99, 235, 0.28) !important;
}

body.task-login #login-form button:active,
body.task-login #login-form input[type="submit"]:active {
	transform: translateY(1px);
}


/* =========================================================
   AJUDA
   ========================================================= */

body.task-login .arpa-login-help {
	margin-top: 25px;

	padding-top: 22px;

	border-top: 1px solid #eef0f3;

	text-align: center;
}

body.task-login .arpa-login-help a {
	color: #2563eb;

	font-size: 13px;

	font-weight: 500;

	text-decoration: none;
}

body.task-login .arpa-login-help a:hover {
	text-decoration: underline;
}


/* =========================================================
   RODAPÉ
   ========================================================= */

body.task-login .arpa-login-bottom {
	display: flex;

	align-items: center;

	justify-content: center;

	gap: 8px;

	margin-top: 24px;

	color: #8a94a3;

	font-size: 12px;

	line-height: 1.5;

	text-align: center;
}

body.task-login .arpa-dot {
	color: #c2c7d0;
}


/* =========================================================
   ESCONDE RODAPÉ PADRÃO DO ROUNDCUBE
   ========================================================= */

body.task-login #login-footer {
	display: none !important;
}


/* =========================================================
   MENSAGENS / ALERTAS DO LOGIN
   ========================================================= */

body.task-login .alert {
	width: 100%;

	box-sizing: border-box;

	margin-bottom: 18px;

	border-radius: 10px;
}

body.task-login .alert-danger {
	background: #fef2f2 !important;

	color: #991b1b !important;

	border-color: #fecaca !important;
}

body.task-login .alert-warning {
	background: #fffbeb !important;

	color: #92400e !important;

	border-color: #fde68a !important;
}


/* =========================================================
   EVITA QUE ELEMENTOS ORIGINAIS FIQUEM COM TAMANHOS ERRADOS
   ========================================================= */

body.task-login .propform .form-control {
	max-width: none !important;
}

body.task-login #login-form table {
	width: 100% !important;
}

body.task-login #login-form td {
	padding: 0 !important;
}

body.task-login #login-form fieldset {
	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;
}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media screen and (max-width: 520px) {

	body.task-login .arpa-login-container {
		justify-content: center;

		padding: 24px 16px;
	}

	body.task-login .arpa-login-card {
		max-width: 100%;

		padding: 34px 24px 30px;

		border-radius: 15px;
	}

	body.task-login .arpa-login-logo #logo {
		max-width: 140px !important;

		max-height: 56px !important;
	}

	body.task-login .arpa-login-header {
		margin-bottom: 26px;
	}

	body.task-login .arpa-login-header h2 {
		font-size: 24px;
	}

	body.task-login .arpa-login-bottom {
		flex-wrap: wrap;

		margin-top: 20px;
	}
}


/* =========================================================
   CELULARES PEQUENOS
   ========================================================= */

@media screen and (max-width: 360px) {

	body.task-login .arpa-login-container {
		padding-left: 12px;

		padding-right: 12px;
	}

	body.task-login .arpa-login-card {
		padding-left: 20px;

		padding-right: 20px;
	}

	body.task-login .arpa-login-header h2 {
		font-size: 22px;
	}
}