/* ============================================================
   STARS Mail — sign in
   The front door of the application, in the application's language: one
   centred column on the app's own ground, no imagery, no motion.

   Elastic's ui.js decorates Roundcube's login table (Bootstrap classes, an
   icon prefix, the label text moved into the placeholder, the label cell
   hidden inline, uppercase on the button). The rules marked "undo" put that
   back so the form reads as two labelled fields.
   ============================================================ */

body.task-login {
	background: var(--rc-surface-2);
	display: flex;
	min-height: 100%;
}
html body.task-login #layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100%;
	padding: 32px 20px;
	background: transparent;
	overflow: auto;
}
html body.task-login #layout-content {
	display: block;
	width: 100%;
	max-width: 400px;
	background: transparent;
	border: 0;
	text-align: left;
}

.stars-login {
	background: var(--rc-surface);
	border: 1px solid var(--rc-line);
	border-radius: var(--r-lg, 12px);
	padding: 36px 36px 32px;
}

.stars-login-mark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
	font-size: 15px;
	font-weight: 500;
	color: var(--rc-text);
}
.stars-login-mark svg { width: 24px; height: 24px; color: var(--rc-accent); flex: none; }
.stars-login-mark .tm { font-size: .55em; vertical-align: .6em; opacity: .65; }

.stars-login-title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--rc-text);
	margin: 0 0 6px;
}
.stars-login-lead {
	font-size: 14px;
	color: var(--rc-text-2);
	margin: 0 0 24px;
}

/* the way back, when this page was reached from "Add another account" */
.stars-login-back {
	margin: -14px 0 24px;
	font-size: 13px;
}
.stars-login-back a { color: var(--rc-accent); }

/* the form Roundcube renders */
/* Elastic pushes the form down with position:relative + top:20vh, which
   leaves the gap outside the flow and overflows the card. */
body.task-login #login-form {
	position: static;
	top: auto;
	margin: 0;
	width: 100%;
	max-width: none;
}
body.task-login table,
body.task-login tbody,
body.task-login tr { display: block; width: 100%; }
body.task-login td { display: block; width: 100%; padding: 0; border: 0; }
body.task-login td.title {
	display: block !important;   /* undo ui.js's inline hide */
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--rc-text-2);
}
body.task-login tr { margin-bottom: 16px; }
body.task-login td.title label { margin: 0; font-weight: 400; }

body.task-login input.form-control,
body.task-login #rcmloginuser,
body.task-login #rcmloginpwd {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	background: var(--rc-surface);
	border: 1px solid var(--rc-line-strong);
	border-radius: var(--r-sm, 4px);
	color: var(--rc-text);
	font-family: inherit;
	font-size: 15px;
	box-shadow: none;
	transition: border-color .12s cubic-bezier(.2, 0, 0, 1), box-shadow .12s cubic-bezier(.2, 0, 0, 1);
}
body.task-login input.form-control:hover { border-color: var(--rc-text-3); }
body.task-login input.form-control:focus {
	border-color: var(--rc-accent);
	box-shadow: 0 0 0 1px var(--rc-accent);
	outline: none;
}
body.task-login input::placeholder { color: var(--rc-text-3); opacity: 1; }

/* undo ui.js's input-group decoration */
body.task-login .input-group { display: block; border: 0; }
body.task-login .input-group-prepend,
body.task-login .input-group-append > .input-group-text.icon { display: none; }

/* the show / hide control login.js inserts */
body.task-login .stars-pwwrap { position: relative; }
body.task-login .stars-reveal {
	position: absolute;
	top: 0;
	right: 0;
	height: 44px;
	padding: 0 14px;
	border: 0;
	background: none;
	color: var(--rc-text-2);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	border-radius: var(--r-sm, 4px);
}
body.task-login .stars-reveal:hover { color: var(--rc-text); }

/* keep me signed in */
body.task-login .stars-remember { margin: 4px 0 0; }
body.task-login .stars-remember label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	color: var(--rc-text-2);
	cursor: pointer;
}
body.task-login .stars-remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
	accent-color: var(--rc-accent);
	cursor: pointer;
}
body.task-login .stars-remember label:hover .stars-remember-text { color: var(--rc-text); }

body.task-login p.formbuttons { margin: 20px 0 0; }
body.task-login button#rcmloginsubmit,
body.task-login .formbuttons .btn {
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: var(--r-md, 8px);
	background: var(--rc-accent);
	color: var(--rc-on-accent);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	text-transform: none !important;   /* undo ui.js's text-uppercase */
	letter-spacing: 0;
	cursor: pointer;
	transition: background .12s cubic-bezier(.2, 0, 0, 1);
}
body.task-login button#rcmloginsubmit:hover { background: var(--rc-accent-hover); }
body.task-login button#rcmloginsubmit:before { display: none; }
body.task-login button#rcmloginsubmit[disabled] { opacity: .6; cursor: default; }

/* inline validation, in the same voice as the rest */
body.task-login .stars-fielderror {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--rc-danger);
}
body.task-login input[aria-invalid="true"] { border-color: var(--rc-danger); }

/* Roundcube's own failure message, above the fields */
body.task-login #messagestack {
	position: static;
	transform: none;
	width: auto;
	max-width: none;
	margin: 0 0 20px;
	left: auto;
	bottom: auto;
}
body.task-login #messagestack div,
html.dark-mode body.task-login #messagestack div {
	display: block;
	background: var(--rc-danger-soft);
	color: var(--rc-danger);
	border: 0;
	border-radius: var(--r-sm, 4px);
	box-shadow: none;
	padding: 12px 14px;
	font-size: 13.5px;
	min-width: 0;
	opacity: 1;
}
body.task-login #messagestack div i.icon { display: none; }
body.task-login #messagestack .loading { display: none; }

.stars-login-help {
	margin: 22px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--rc-text-3);
}
.stars-login-help a { color: var(--rc-accent); }

body.task-login #login-footer {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 20px 0 0;
	font-size: 12px;
	color: var(--rc-text-3);
	background: transparent;
	border: 0;
	position: static;
}
body.task-login #login-footer a { color: var(--rc-text-3); }
body.task-login #login-footer .tm { font-size: .6em; vertical-align: .55em; }
body.task-login .noscriptwarning { font-size: 13px; color: var(--rc-warn); margin: 0 0 16px; }

@media screen and (max-width: 480px) {
	body.task-login #layout { padding: 16px 12px; }
	.stars-login { padding: 28px 22px 26px; border: 0; border-radius: 0; }
	body.task-login #layout-content { max-width: none; }
}

/* Roundcube puts the form's class on every input, hidden ones included, and
   Bootstrap's .form-control makes a hidden input a full-height block. */
body.task-login input[type="hidden"] { display: none !important; }

/* the second factor, wearing the sign-in page's clothes */
body.task-settings .stars-2fa .stars-2fa-field { margin: 0 0 4px; }
body.task-settings .stars-2fa .stars-2fa-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--rc-text-2);
}
body.task-settings .stars-2fa input.stars-code-input { width: 100%; height: 46px; font-size: 19px; }
body.task-settings .stars-2fa .formbuttons { margin: 20px 0 0; }
body.task-settings .stars-2fa button {
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: var(--r-md, 8px);
	background: var(--rc-accent);
	color: var(--rc-on-accent);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
}
body.task-settings .stars-2fa button:hover { background: var(--rc-accent-hover); }
body.task-settings .stars-2fa .stars-login-help { margin-top: 16px; }
body.task-settings .stars-2fa .stars-login-help a { color: var(--rc-accent); }