/* Layout shell matching login_html/css/styles.css (selection.html)
   High specificity + !important: PrimeFaces / BootsFaces / RTL must not force
   body or shell into flex-row (that pins footer left & navbar right in RTL). */

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

html.ju-login-selection-shell,
html.ju-login-selection-shell body.ju-login-body {
  height: 100%;
  margin: 0;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  background: #ffffff;
  color: #111927;
}

html.ju-login-selection-shell body.ju-login-body {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Single column for the whole page (between PF widgets below). */
html.ju-login-selection-shell body.ju-login-body > .ju-login-root {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-self: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html.ju-login-selection-shell .ju-page-shell {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-self: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html.ju-login-selection-shell .ju-navbar {
  order: 1 !important;
}

html.ju-login-selection-shell .ju-main-split {
  order: 2 !important;
}

html.ju-login-selection-shell .ju-page-footer {
  order: 3 !important;
}

/* Top bar / bottom bar: reset floats & vertical writing (narrow side strip bug) */
html.ju-login-selection-shell .ju-navbar,
html.ju-login-selection-shell .ju-page-footer {
  position: relative !important;
  float: none !important;
  clear: both !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* Navbar */
.ju-navbar {
  flex: 0 0 auto !important;
  background: #ffffff;
  border-bottom: 1px solid #E5E7EB;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Let the language links participate in the navbar flex row (JSF form wrapper). */
.ju-navbar .ju-lang-form {
  display: flex;
  align-items: center;
  margin: 0;
}

.ju-navbar .ju-nav-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Language toggle — matches selection .lang-btn */
.ju-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #D2D6DB;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  cursor: pointer;
  color: #384250;
  text-decoration: none !important;
  transition: background 0.2s;
}

.ju-lang-btn:hover {
  background: #F9FAFB;
  color: #384250;
  text-decoration: none !important;
}

.ju-lang-btn .globe-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Main split */
.ju-main-split {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ju-panel-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #E5E7EB;
  overflow-y: auto;
}

.ju-form-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 32px;
  overflow-y: auto;
  min-height: 0;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}

.ju-page-title {
  display: block;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: #111927;
  margin: 0 0 16px;
}

/* Image panel */
.ju-panel-image {
  width: 47vw;
  max-width: 47vw;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

@media (max-width: 1024px) {
  .ju-panel-image { display: none; }
}

.ju-panel-image .ju-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(7, 77, 49, 0.62), rgba(7, 77, 49, 0.62)),
    url('../images/login-bg.jpg') center / cover no-repeat;
}

.ju-panel-image .ju-image-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 32px 80px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  gap: 8px;
  color: #ffffff;
  z-index: 1;
}

.ju-panel-image .ju-uni-name {
  font-size: 28px;
  font-weight: 500;
  line-height: 44px;
}

.ju-panel-image .ju-uni-desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 8px;
}

.ju-panel-image .ju-vision-logo {
  margin-top: 16px;
  height: 60px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Footer bar */
.ju-page-footer {
  flex: 0 0 auto !important;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
  padding: 20px 32px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.ju-footer-inner {
  display: flex;
  flex-direction: column !important;
  writing-mode: horizontal-tb !important;
  gap: 16px;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 640px) {
  .ju-footer-inner {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
  }
}

.ju-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ju-footer-copy {
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  margin: 0;
}

.ju-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ju-footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ju-footer-link,
.ju-footer-links a {
  font-size: 12px;
  color: #1B8354 !important;
  text-decoration: none !important;
}

.ju-footer-link:hover,
.ju-footer-links a:hover {
  text-decoration: underline !important;
}

.ju-footer-brand img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(66%) sepia(6%) saturate(267%) hue-rotate(169deg) brightness(92%) contrast(87%);
}

.ju-footer-brand a {
  display: inline-flex;
  align-items: center;
}

/* Desktop ordering:
   LTR: meta LEFT, logos RIGHT
   RTL: meta RIGHT, logos LEFT */
@media (min-width: 640px) {
  :dir(ltr) .ju-footer-meta { order: 1; }
  :dir(ltr) .ju-footer-brand { order: 2; }

  :dir(rtl) .ju-footer-meta { order: 2; }
  :dir(rtl) .ju-footer-brand { order: 1; }
}

/* LTR: match screenshot (text block left, logos right, links on one line) */
@media (min-width: 640px) {
  :dir(ltr) .ju-footer-meta {
    align-items: flex-start;
  }

  :dir(ltr) .ju-footer-copy {
    text-align: left;
  }

  :dir(ltr) .ju-footer-links {
    flex-wrap: nowrap;
  }
}

/* RTL */
:dir(rtl) .ju-footer-inner {
  /* Keep physical layout stable so ordering is predictable:
     logos on the left, text/links on the right */
  direction: ltr;
}

:dir(rtl) .ju-footer-meta {
  align-items: stretch;

}

:dir(rtl) .ju-footer-copy {
  text-align: right;
}

:dir(rtl) .ju-footer-links {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* Card row responsive rules live in login-redesign.css (loads after this file). */

.nld-login-card {
  border: none !important;
  outline: 1px solid #D2D6DB;
  justify-content: space-between;
  gap: 16px;
}

.nld-card-label {
  line-height: 28px;
}

@media (max-width: 720px) {
  .ju-form-scroll {
    padding: 16px 18px;
  }
}