/* ====================================================================
   Unio Suite — Login skin override (v5, hero como background-image)
   Coluna direita usa screenshot Figma como background (fidelidade total).
   ==================================================================== */

/* -------- Esconder elementos antigos do RC/Parresia skin -------- */

body.task-login #layout-settings-toolbox,
body.task-login #login-form .formbuttons p,
body.task-login #login-form p.oauthlogin,
body.task-login #login-form #rcmloginoauth,
body.task-login #login-footer,
body.task-login .voice,
body.task-login #taskmenu,
body.task-login #layout-menu,
body.task-login #main-menu-mobile,
body.task-login #login-image-content > img:not(.uniosuite-allowed) {
	display: none !important;
}

/* -------- Wrapper principal -------- */

.uniosuite-login {
	--us-primary: #6100f9;
	--us-primary-hover: #5300d6;
	--us-text: #171725;
	--us-subtitle: #656971;
	--us-placeholder: #adafb3;
	--us-stroke: #d0d2d4;
	--us-bg-light: #ffffff;

	display: grid !important;
	grid-template-columns: minmax(440px, 551px) 1fr !important;
	grid-template-rows: 1fr !important;
	width: 100% !important;
	min-height: 100vh !important;
	height: 100vh !important;
	background: var(--us-bg-light) !important;
	font-family: 'Inter', 'Public Sans', system-ui, -apple-system, sans-serif !important;
	overflow: hidden !important;
}

.uniosuite-login *,
.uniosuite-login *::before,
.uniosuite-login *::after { box-sizing: border-box; }

/* -------- Esquerda: panel branco com form -------- */

.uniosuite-login #login-form-content.uniosuite-login__panel,
.uniosuite-login .uniosuite-login__panel {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: row !important;
	padding: 56px 73px !important;
	background: var(--us-bg-light) !important;
	overflow-y: auto !important;
	width: auto !important;
}

.uniosuite-login__container {
	width: 100% !important;
	max-width: 405px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 32px !important;
	align-items: stretch !important;
}

/* Logo Mail — via background-image (evita parser RC duplicar paths em <img>) */
.uniosuite-login__brand {
	display: block !important;
	width: 147px !important;
	height: 64px !important;
	margin: 0 !important;
	background-image: url('/skins/parresia/images/uniosuite-logo-mail.png') !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: contain !important;
}

/* Heading */
.uniosuite-login__heading { margin: 0 !important; }
.uniosuite-login__heading h2 {
	font-family: 'Sora', 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 24px !important;
	line-height: 34px !important;
	letter-spacing: -0.456px !important;
	color: var(--us-text) !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}
.uniosuite-login__heading p {
	font-family: 'Inter', sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--us-subtitle) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* -------- Form Roundcube reestilizado -------- */

.uniosuite-login #login-form { margin: 0 !important; padding: 0 !important; width: 100% !important; }
.uniosuite-login #login-form table,
.uniosuite-login #login-form tbody,
.uniosuite-login #login-form tr {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
.uniosuite-login #login-form tr { margin-bottom: 16px !important; }
.uniosuite-login #login-form td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
.uniosuite-login #login-form td.title,
.uniosuite-login #login-form .title {
	display: block !important;
	margin-bottom: 4px !important;
	font-family: 'Public Sans', 'Inter', sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--us-text) !important;
	text-align: left !important;
}
.uniosuite-login #login-form td.title label {
	color: var(--us-text) !important;
	font-weight: 500 !important;
	font-family: 'Public Sans', 'Inter', sans-serif !important;
}
.uniosuite-login #login-form td.title label[for="rcmloginuser"]::after,
.uniosuite-login #login-form .us-required {
	color: #cc0000 !important;
	margin-left: 2px !important;
}

.uniosuite-login #login-form input[type="text"],
.uniosuite-login #login-form input[type="email"],
.uniosuite-login #login-form input[type="password"],
.uniosuite-login #login-form input.form-control {
	width: 100% !important;
	height: 56px !important;
	padding: 12px 16px !important;
	background: var(--us-bg-light) !important;
	border: 1px solid var(--us-stroke) !important;
	border-radius: 6px !important;
	font-family: 'Public Sans', 'Inter', sans-serif !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: var(--us-text) !important;
	box-shadow: none !important;
}
.uniosuite-login #login-form input::placeholder {
	color: var(--us-placeholder) !important;
	opacity: 1 !important;
}
.uniosuite-login #login-form input:focus {
	outline: none !important;
	border-color: var(--us-primary) !important;
	box-shadow: 0 0 0 3px rgba(97, 0, 249, 0.12) !important;
}

/* Botão Acessar conta */
.uniosuite-login #login-form p.formbuttons {
	display: block !important;
	margin: 24px 0 0 !important;
	padding: 0 !important;
}
.uniosuite-login #login-form #rcmloginsubmit,
.uniosuite-login #login-form button[type="submit"].mainaction {
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	background: var(--us-primary) !important;
	border: none !important;
	border-radius: 9999px !important;
	color: #ffffff !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	cursor: pointer !important;
	transition: background-color .15s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	text-transform: none !important;
}
.uniosuite-login #login-form #rcmloginsubmit:hover {
	background: var(--us-primary-hover) !important;
}
/* Esconder qualquer ícone (disco / Font Awesome / SVG / img) que skin parresia
   injete no botão submit via ::before/::after ou children. */
.uniosuite-login #login-form #rcmloginsubmit::before,
.uniosuite-login #login-form #rcmloginsubmit::after,
.uniosuite-login #login-form .button.mainaction::before,
.uniosuite-login #login-form .button.mainaction::after,
.uniosuite-login #login-form .formbuttons button::before,
.uniosuite-login #login-form .formbuttons button::after {
	content: none !important;
	display: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
}
.uniosuite-login #login-form #rcmloginsubmit > i,
.uniosuite-login #login-form #rcmloginsubmit > svg,
.uniosuite-login #login-form #rcmloginsubmit > img,
.uniosuite-login #login-form #rcmloginsubmit > .icon {
	display: none !important;
}

/* Esqueci a senha — colado à esquerda, abaixo do campo senha (injetado por JS) */
.uniosuite-login__forgot,
.uniosuite-login #us-forgot-link,
.uniosuite-login #login-form a#us-forgot-link,
.uniosuite-login #login-form .uniosuite-login__forgot {
	display: block !important;
	float: none !important;  /* override do skin parresia que tem float:right em a dentro de #login-form */
	clear: both !important;
	text-align: left !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--us-primary) !important;
	text-decoration: none !important;
	cursor: pointer !important;
}
.uniosuite-login__forgot:hover,
.uniosuite-login #us-forgot-link:hover { text-decoration: underline !important; }

/* Separador "ou" */
.uniosuite-login__divider {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin: 0 !important;
}
.uniosuite-login__divider::before,
.uniosuite-login__divider::after {
	content: '' !important;
	flex: 1 !important;
	height: 1px !important;
	background: var(--us-stroke) !important;
}
.uniosuite-login__divider span {
	font-family: 'Inter', sans-serif !important;
	font-size: 16px !important;
	color: var(--us-placeholder) !important;
}

/* Botão SSO Parresia (=> Keycloak OAuth) */
.uniosuite-login .uniosuite-login__sso-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	height: 44px !important;
	padding: 10px 16px !important;
	border: 1px solid var(--us-stroke) !important;
	border-radius: 9999px !important;
	background: var(--us-bg-light) !important;
	color: var(--us-text) !important;
	font-family: 'Sora', 'Inter', sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	margin: 0 !important;
}
.uniosuite-login .uniosuite-login__sso-btn:hover {
	background: #faf8ff !important;
	border-color: var(--us-primary) !important;
	text-decoration: none !important;
}
.uniosuite-login__sso-icon {
	display: inline-block !important;
	width: 26px !important;
	height: 19px !important;
	flex-shrink: 0 !important;
	background-image: url('/skins/parresia/images/parresia-bird.svg') !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
}

/* -------- Direita: hero = background-image direto do Figma -------- */

.uniosuite-login #login-image-content.uniosuite-login__hero,
.uniosuite-login .uniosuite-login__hero {
	position: relative !important;
	display: block !important;
	overflow: hidden !important;
	width: auto !important;
	height: 100vh !important;
	min-height: 100vh !important;
	margin: 0 !important;
	padding: 0 !important;
	background-image: url('/skins/parresia/images/uniosuite-hero.png') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
.uniosuite-login #login-image-content > img {
	display: none !important;
}

/* -------- Mobile -------- */
@media only screen and (max-width: 960px) {
	.uniosuite-login {
		grid-template-columns: 1fr !important;
		height: auto !important;
		min-height: 100vh !important;
		overflow: auto !important;
	}
	.uniosuite-login__hero { display: none !important; }
	.uniosuite-login__panel { padding: 32px 24px !important; }
}

/* -------- Body / layout -------- */
body.task-login { overflow: auto !important; background: var(--us-bg-light) !important; }
body.task-login #layout,
body.task-login #print-layout { width: 100% !important; height: 100vh !important; }


/* === Tela de acesso bloqueado (tool-gate) === */
.uniosuite-login__blocked { display: none; }
.us-tool-denied .uniosuite-login__heading,
.us-tool-denied #login-form,
.us-tool-denied form[name="login-form"],
.us-tool-denied .uniosuite-login__divider,
.us-tool-denied #sso-parresia-btn { display: none !important; }
.us-tool-denied .uniosuite-login__blocked {
	display: flex !important; flex-direction: column; align-items: flex-start;
	gap: 14px; margin-top: 22px;
}
.uniosuite-login__blocked-icon {
	width: 64px; height: 64px; border-radius: 16px; display: flex;
	align-items: center; justify-content: center; color: var(--us-primary);
	background: rgba(97,0,249,.08);
}
.uniosuite-login__blocked h2 {
	margin: 4px 0 0 !important; font-family: 'Sora','Inter',sans-serif !important;
	font-weight: 600 !important; font-size: 26px !important; line-height: 1.2 !important;
	color: var(--us-text) !important;
}
.uniosuite-login__blocked p {
	margin: 0 !important; font-family: 'Inter',sans-serif !important; font-size: 15px !important;
	line-height: 1.55 !important; color: var(--us-subtitle) !important; max-width: 430px;
}
.uniosuite-login__blocked-btn {
	display: inline-flex; align-items: center; justify-content: center; height: 48px;
	padding: 0 24px; margin-top: 8px; background: var(--us-primary); color: #fff !important;
	font-family: 'Inter',sans-serif; font-weight: 600; font-size: 15px; border-radius: 10px;
	text-decoration: none; transition: background-color .15s ease;
}
.uniosuite-login__blocked-btn:hover { background: var(--us-primary-hover); }
.uniosuite-login__blocked-help { font-size: 13px !important; color: var(--us-placeholder) !important; }
