/* JD M&R skin — extiende Elastic. Hereda todo el CSS base y aplica el branding JD encima.
   Colores de marca tomados de www.jdmrservices.com: navy #0F172B + acento naranja #F99C00. */
@import url("../../elastic/styles/styles.min.css");

:root {
	--jd-navy:   #0F172B;
	--jd-navy-2: #020618;
	--jd-panel:  #1D293D;
	--jd-orange: #F99C00;
	--jd-orange-2: #FFB22E;
	--jd-green:  #00BB7F;
}

/* ====================== PANTALLA DE LOGIN ====================== */
body.task-login #layout,
.task-login #layout-content {
	background: radial-gradient(130% 120% at 50% -10%, #1D293D 0%, #0F172B 52%, #020618 100%) !important;
}

.task-login #layout-content {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Logo JD grande, con brillo suave.
   top:0 anula el top:16vh de Elastic que empujaba todo hacia abajo (centrado real). */
.task-login #logo {
	max-width: 160px !important;
	width: 160px !important;
	max-height: none !important;
	height: auto !important;
	top: 0 !important;
	margin-bottom: 1.5rem !important;
	filter: drop-shadow(0 8px 24px rgba(0,0,0,.55));
}

/* Tarjeta del formulario. top:0 anula el top:20vh de Elastic. */
.task-login #login-form {
	top: 0 !important;
	background: rgba(15, 23, 43, .72) !important;
	border: 1px solid rgba(249, 156, 0, .28) !important;
	border-radius: 16px !important;
	padding: 1.75rem 1.75rem 1.25rem !important;
	box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
	backdrop-filter: blur(6px);
	max-width: 400px;
	width: min(92vw, 400px);
}

.task-login #login-form label { color: #cdd7e6 !important; font-weight: 600; }

.task-login #login-form .form-control {
	background: rgba(2, 6, 24, .6) !important;
	border: 1px solid rgba(205, 215, 230, .18) !important;
	color: #eef3fb !important;
	border-radius: 10px !important;
}
.task-login #login-form .form-control:focus {
	border-color: var(--jd-orange) !important;
	box-shadow: 0 0 0 3px rgba(249, 156, 0, .22) !important;
}

/* Botón de entrar — naranja JD */
.task-login #rcmloginsubmit,
.task-login .formbuttons .button.mainaction {
	background: linear-gradient(180deg, var(--jd-orange-2), var(--jd-orange)) !important;
	border: none !important;
	color: #0F172B !important;
	font-weight: 800 !important;
	letter-spacing: .3px;
	width: 100%;
	border-radius: 10px !important;
	padding: .7rem 1rem !important;
	box-shadow: 0 8px 20px rgba(249, 156, 0, .28) !important;
	text-transform: uppercase;
}
.task-login #rcmloginsubmit:hover { filter: brightness(1.06); }

.task-login #login-footer { color: #8b97ad !important; margin-top: 1rem; text-align: center; }
/* Pie de marca bajo el formulario de login (bilingüe, aditivo por CSS) */
.task-login #login-form::after {
	content: "JD M&R Services · Correo corporativo · Corporate mail";
	display: block;
	margin-top: 1.1rem;
	padding-top: .9rem;
	border-top: 1px solid rgba(249, 156, 0, .18);
	color: #7f8ba1;
	font-size: .72rem;
	letter-spacing: .3px;
	text-align: center;
}

/* ====================== DENTRO DEL WEBMAIL ====================== */
/* Barra de menú de aplicaciones (izquierda) en navy JD */
#layout-menu,
.menu.toolbar,
#taskmenu {
	background: linear-gradient(180deg, var(--jd-navy) 0%, var(--jd-navy-2) 100%) !important;
}
#taskmenu a { color: #aeb9cb !important; }
#taskmenu a:hover { color: #ffffff !important; }
#taskmenu a.selected,
#taskmenu a.active {
	color: var(--jd-orange) !important;
	box-shadow: inset 3px 0 0 var(--jd-orange);
}

/* Botones de acción primaria */
.btn-primary,
button.btn.btn-primary,
.button.mainaction,
a.button.mainaction {
	background: var(--jd-orange) !important;
	border-color: var(--jd-orange) !important;
	color: #0F172B !important;
	font-weight: 700 !important;
}
.btn-primary:hover,
.button.mainaction:hover { background: var(--jd-orange-2) !important; }

/* Acentos: elemento de lista seleccionado, enlaces de acción */
.listing li.selected > a,
.listing tr.selected > td,
#messagelist tr.selected td {
	box-shadow: inset 3px 0 0 var(--jd-orange);
}
a.active, .pagenav a:hover { color: var(--jd-orange); }

/* Logo cuadrado (512x512) bien dimensionado en la barra superior de la app */
#layout-menu .menu-logo img,
.topbar img.logo,
#topline img.logo,
img#logo {
	max-height: 34px !important;
	width: auto !important;
	object-fit: contain;
}
.task-login #logo { max-height: none !important; } /* en login manda la regla grande de arriba */