/* IBMEC Jr. Soluções palette, based on the supplied visual identity. */
:root {
	--ibmecjr-navy: #011126;
	--ibmecjr-navy-raised: #10233e;
	--ibmecjr-slate: #8297b5;
	--ibmecjr-white: #f2f2f0;
	--ibmecjr-border: #d6deea;
}

/* Frappe Desk */
.navbar {
	background-color: var(--ibmecjr-navy) !important;
	border-bottom: 1px solid var(--ibmecjr-slate) !important;
}

.navbar a,
.navbar button,
.navbar .navbar-brand,
.navbar .navbar-brand span,
.navbar svg {
	color: var(--ibmecjr-white) !important;
}

.navbar .app-logo,
.navbar .navbar-brand img {
	max-height: 34px;
	width: auto;
	object-fit: contain;
}

.btn-primary {
	background-color: var(--ibmecjr-navy) !important;
	border-color: var(--ibmecjr-navy) !important;
	color: var(--ibmecjr-white) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--ibmecjr-navy-raised) !important;
	border-color: var(--ibmecjr-slate) !important;
}

a,
.link-btn {
	color: #526f96;
}

.form-control:focus,
.control-input:focus,
.awesomplete input:focus {
	border-color: var(--ibmecjr-slate) !important;
	box-shadow: 0 0 0 0.18rem rgb(130 151 181 / 24%) !important;
}

/* Shared login surface: all hash routes use the same responsive layout. */
html:has(.for-login) { background: #030b18; }
body:has(.for-login) {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(135deg, #030b18, #06162b 72%, #10233e) !important;
}
body:has(.for-login) .main-section,
body:has(.for-login) .container,
body:has(.for-login) .page_content,
body:has(.for-login) .page-content-wrapper,
body:has(.for-login) .web-page-content,
body:has(.for-login) main {
  width: 100%; max-width: none; margin: 0 !important; padding: 0 !important;
  background: transparent;
}
body:has(.for-login) .page-head,
body:has(.for-login) .web-footer { display: none !important; }
body:has(.for-login)::before,
body:has(.for-login)::after {
  content: ""; position: fixed; pointer-events: none;
  width: 260px; height: 380px; border: 1px solid rgb(130 151 181 / 18%);
  border-radius: 16px; transform: rotate(34deg);
}
body:has(.for-login)::before { top: -180px; right: -110px; }
body:has(.for-login)::after { bottom: -240px; left: -140px; }
:is(.for-login,.for-email-login,.for-forgot,.for-login-with-email-link,.for-signup) {
  position: relative; box-sizing: border-box; width: 100%;
  min-height: 100vh; min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)) !important;
  margin: 0 !important; align-content: center;
}
body:has(.for-login) .page-card {
  position: relative; box-sizing: border-box; width: 100%; max-width: 420px;
  height: auto !important; min-height: 0 !important; margin: 0 auto !important;
  padding: 0 !important; gap: 0 !important; overflow: hidden;
  border: 1px solid #33455e; border-radius: 12px !important;
  background: #fff; box-shadow: 0 16px 48px rgb(0 0 0 / 18%);
}
body:has(.for-login) .page-card-head {
  margin: 0 !important; padding: 32px 28px !important; gap: 0 !important;
  display: flex; align-items: center !important; justify-content: center;
  background: #08192f; text-align: center !important;
}
body:has(.for-login) .page-card-head img.app-logo {
  display: block; width: 244px !important; max-width: 100% !important;
  height: auto !important; max-height: none !important; margin: 0 auto !important;
  object-fit: contain; opacity: 1;
}
body:has(.for-login) .page-card-head-text { display: none !important; }
body:has(.for-login) .form-signin {
  width: 100%; max-width: none; padding: 28px !important; margin: 0 !important;
  gap: 24px !important; box-sizing: border-box;
}
body:has(.for-login) .page-card-body { padding: 0 !important; gap: 20px !important; }
body:has(.for-login) .page-card-actions { padding: 0 !important; gap: 12px !important; }
body:has(.for-login) .form-control {
  box-sizing: border-box; height: 46px !important; min-height: 46px;
  font-size: 16px !important; padding: 11px 12px !important;
  border: 1px solid #ccd3dd; border-radius: 6px; background: #fff; color: #17263a;
}
body:has(.for-login) .password-field input { padding-right: 44px !important; }
body:has(.for-login) label { font-size: 14px !important; font-weight: 500; color: #344256 !important; }
body:has(.for-login) .es-button {
  min-height: 46px; height: auto; padding: 12px 14px;
  font-size: 14px; font-weight: 600; line-height: 20px;
  border-radius: 6px; background: #f1f4f8; color: #253c59;
}
body:has(.for-login) .es-button[data-variant="solid"] { background: #122b49; color: #fff; }
body:has(.for-login) .es-button[data-variant="solid"]:hover { background: #1b3a60; }
body:has(.for-login) .es-button:disabled { opacity: .55; cursor: not-allowed; }
body:has(.for-login) a { color: #405c7d !important; font-size: 14px; }
body:has(.for-login) a:focus-visible,
body:has(.for-login) button:focus-visible,
body:has(.for-login) .toggle-password:focus-visible { outline: 2px solid #8297b5; outline-offset: 3px; }
body:has(.for-login) .sign-up-message { padding: 0 28px 24px; }
body:has(.for-login) .ibmec-access-note { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: #526174; }
body:has(.for-login) .ibmec-flow-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #17263a; }
body:has(.for-login) .toggle-password { cursor: pointer; }
@media (max-width: 480px) {
  :is(.for-login,.for-email-login,.for-forgot,.for-login-with-email-link,.for-signup) {
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) !important;
  }
  body:has(.for-login) .page-card-head { padding: 28px 24px !important; }
  body:has(.for-login) .page-card-head img.app-logo { width: 224px !important; }
  body:has(.for-login) .form-signin { padding: 24px !important; }
}
@media (max-height: 600px) {
  :is(.for-login,.for-email-login,.for-forgot,.for-login-with-email-link,.for-signup) { align-content: start; }
}

/* Consistent IBMEC Jr. finish for the authenticated Desk and its first paint. */
html, body { color: #24354a; }
body:has(.navbar) { background: #f5f7fa !important; }
body:has(.navbar) .navbar,
body:has(.navbar) header.navbar,
body:has(.navbar) .sticky-top .navbar {
	background: #06172c !important;
	border-bottom: 1px solid #233b59 !important;
	box-shadow: 0 2px 8px rgb(3 13 29 / 14%);
}
body:has(.navbar) .navbar :is(a, button, .navbar-brand, .navbar-brand span, svg, .icon) {
	color: #f2f2f0 !important;
}
body:has(.navbar) .navbar :is(.app-logo, .navbar-brand img) {
	width: auto !important;
	max-width: 180px;
	max-height: 38px !important;
	object-fit: contain;
}
body:has(.navbar) .navbar .search-bar,
body:has(.navbar) .navbar .search-bar input {
	border-color: #40536c;
	border-radius: 6px;
	background: #10233e;
	color: #f2f2f0;
}
body:has(.navbar) .layout-main-section-wrapper,
body:has(.navbar) .layout-main-section,
body:has(.navbar) .workspace-page,
body:has(.navbar) .page-container {
	background-color: #f5f7fa;
}
body:has(.navbar) .layout-main-section { border-radius: 8px; }
body:has(.navbar) .page-head { border-bottom: 1px solid #e0e5ec; }
body:has(.navbar) .page-title .title-text,
body:has(.navbar) .page-head h1,
body:has(.navbar) .workspace-title {
	color: #142941;
	font-weight: 600;
}
body:has(.navbar) .workspace-sidebar {
	background: #fff;
	border-right: 1px solid #e2e7ee;
}
body:has(.navbar) .standard-sidebar-item.selected {
	border-radius: 5px;
	background: #eaf0f7;
	color: #122b49;
}
body:has(.navbar) .widget,
body:has(.navbar) .quick-list-row,
body:has(.navbar) .shortcut-widget-box,
body:has(.navbar) .link-item {
	border-color: #e1e6ed;
	border-radius: 7px;
	box-shadow: 0 1px 3px rgb(16 35 62 / 5%);
}
body:has(.navbar) .widget:hover,
body:has(.navbar) .shortcut-widget-box:hover,
body:has(.navbar) .link-item:hover {
	border-color: #aab8ca;
	box-shadow: 0 3px 10px rgb(16 35 62 / 9%);
}
body:has(.navbar) .btn-primary,
body:has(.navbar) .btn-primary:focus {
	border-color: #122b49 !important;
	background: #122b49 !important;
	color: #fff !important;
}
body:has(.navbar) .btn-primary:hover { background: #1b3a60 !important; }
body:has(.navbar) .form-control:focus,
body:has(.navbar) .control-input:focus {
	border-color: #8297b5 !important;
	box-shadow: 0 0 0 2px rgb(130 151 181 / 22%) !important;
}
body:has(.splash) .splash {
	position: fixed !important;
	z-index: 2000;
	inset: 0;
	display: grid !important;
	place-content: center;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: linear-gradient(135deg, #030b18, #06172c 72%, #10233e) !important;
}
body:has(.splash) .splash img {
	width: min(260px, 68vw) !important;
	max-width: 68vw !important;
	max-height: 100px;
	object-fit: contain;
}
@media (max-width: 767px) {
	body:has(.navbar) .navbar :is(.app-logo, .navbar-brand img) { max-width: 130px; max-height: 32px !important; }
	body:has(.navbar) .layout-main-section { padding: 12px !important; }
	body:has(.splash) .splash img { width: min(220px, 64vw) !important; }
}