/* =========================================================
   Login pages — card layout (templates/juLoginCardTemplate.xhtml)
   Used by main.xhtml, empLogin.xhtml and stdLogin.xhtml.

   One centred card over the university photo: green-tinted banner,
   green/gold strip, body. Sizes and colours follow the DGA platforms
   code (same look as the ju-room-booking login page).

   Self-contained: the card template does not load
   login-selection-layout.css or login-redesign.css.
   Class prefix: lc-  (ju-* hooks are kept from the previous template).
   ========================================================= */

/* ── Shell shield ─────────────────────────────────────────
   Copied from login-selection-layout.css.
   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: #161616;
}

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;
  height: auto !important;     /* was fixed to the viewport: the photo stopped at the first screen */
  min-height: 100vh !important;
  min-height: 100dvh;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  font-size: 16px;
  line-height: 1.5;
}

/* Single column for the whole page (between PF widgets below). */
html.ju-login-selection-shell body.ju-login-body > .ju-login-root {
  flex: 1 0 auto !important;   /* grow with the content, never shrink below it */
  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 0 auto !important;   /* grow with the content, never shrink below it */
  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;
  /* university photo behind the whole page (the navbar on top is opaque white) */
  background:
    linear-gradient(180deg, rgba(7, 77, 49, 0.82), rgba(7, 77, 49, 0.66)),
    url('../images/login-bg.jpg') center / cover no-repeat;
  background-color: #074d31;   /* fallback under the photo */
}

html.ju-login-selection-shell .ju-navbar     { order: 1 !important; }
html.ju-login-selection-shell .lc-stage      { 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;
  gap: 16px;
  width: 100% !important;
  max-width: 100% !important;
}

/* 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 {
  display: block;
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* Language toggle (secondary outline button) */
.ju-lang-btn,
.ju-lang-btn:link,
.ju-lang-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid #d2d6db;
  border-radius: 4px;
  font-size: 14px;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  color: #161616 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ju-lang-btn:hover { background: #f3f4f6; border-color: #9da4ae; }
.ju-lang-btn:focus-visible { outline: 2px solid #161616; outline-offset: 0; }
.ju-lang-btn .globe-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Stage: the card column ─────────────────────────────── */
.lc-stage {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 40px 16px;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}

.lc-login {
  width: 100%;
  max-width: 632px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Card ───────────────────────────────────────────────── */
.lc-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 32px 64px -12px rgba(16, 24, 40, 0.32);
  overflow: hidden;
  color: #161616;
}

.lc-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 24px;
  background: #f3fcf6;
}

.lc-banner-copy { min-width: 0; }

.lc-banner .lc-title {
  margin: 0 0 8px;
  padding: 0;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #161616;
}

.lc-description {
  max-width: 340px;
  margin: 0;
  color: #384250;
  font-size: 14px;
  line-height: 20px;
}

/* Tilted green tile holding the page icon */
.lc-banner-art {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 24px;
  background: linear-gradient(135deg, #25935f, #14573a);
  box-shadow: 0 12px 24px -8px rgba(20, 87, 58, 0.45);
  transform: rotate(-6deg);
}
.lc-banner-art img {
  width: 56px;
  height: 56px;
  filter: brightness(0) invert(1);
}
[dir="rtl"] .lc-banner-art img.lc-dir-icon { transform: scaleX(-1); }

/* Decorative strip in the system colours (green and gold) */
.lc-strip {
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    #1b8354 0 24px,
    #f3fcf6 24px 32px,
    #dba102 32px 44px,
    #f3fcf6 44px 52px
  );
}

.lc-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  font-size: 16px;
}

/* JSF form wrappers keep the same vertical rhythm */
.lc-body form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.lc-heading {
  margin: 0 0 4px;
  padding: 0;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #161616;
}

/* Notices shown when a sign-in method is switched off */
.lc-notice {
  display: block;
  color: #b42318;
  font-size: 14px;
  line-height: 20px;
}
.lc-notice--strong { font-weight: 700; }

/* ── Tabs (one per sign-in method) ──────────────────────── */
.lc-tabs {
  position: relative;
  display: none;            /* shown by the script once the tabs are wired */
  align-items: center;
  gap: 3px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.lc-tabs-ready .lc-tabs { display: flex; }
.lc-tabs-single .lc-tabs { display: none; }

.lc-tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  border-radius: 9999px;
  background: #d2d6db;
  z-index: 0;
}

.lc-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #6c727e;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
}
.lc-tab::after {
  content: '';
  display: none;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  height: 3px;
  border-radius: 9999px;
  background: #161616;
}
.lc-tab:hover { background: #f3f4f6; color: #161616; }
.lc-tab:hover::after { display: block; }
.lc-tab:focus { outline: none; }
.lc-tab:focus-visible { outline: 2px solid #161616; color: #161616; }
.lc-tab.active { color: #161616; font-weight: 500; }
.lc-tab.active::after { display: block; background: #1b8354; }

.lc-tab-icon { display: inline-flex; width: 20px; height: 20px; }
/* icons are recoloured with filters: grey when idle, primary green when active */
.lc-tab-icon img { width: 20px; height: 20px; filter: brightness(0) invert(46%); }
.lc-tab:hover .lc-tab-icon img { filter: brightness(0) invert(9%); }
.lc-tab.active .lc-tab-icon img {
  filter: brightness(0) invert(36%) sepia(88%) saturate(468%) hue-rotate(110deg) brightness(88%) contrast(91%);
}

/* ── Tab panel ──────────────────────────────────────────── */
.lc-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 4px;
}
/* Without JavaScript every panel stays visible, one under the other. */
.lc-tabs-ready .lc-panel:not(.active) { display: none; }

.lc-option {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lc-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #f3fcf6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* recolor the icons to the primary green */
.lc-icon-wrap img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(36%) sepia(88%) saturate(468%) hue-rotate(110deg) brightness(88%) contrast(91%);
}

.lc-option-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #161616;
}

.lc-option-text {
  color: #384250;
  font-size: 14px;
  line-height: 20px;
}

/* ── Primary button (BootsFaces renders <button class="btn …">) ── */
.lc-btn,
.btn.lc-btn,
.btn.lc-btn:link,
.btn.lc-btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: fit-content !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #1b8354 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 0.15s ease;
}
.btn.lc-btn:hover,
.lc-btn:hover { background: #166a45 !important; color: #ffffff !important; }
.btn.lc-btn:active,
.lc-btn:active { background: #14573a !important; outline: 2px solid #161616 !important; }
.btn.lc-btn:focus,
.lc-btn:focus { color: #ffffff !important; outline: none !important; }
.btn.lc-btn:focus-visible,
.lc-btn:focus-visible { outline: 2px solid #161616 !important; outline-offset: 0 !important; }
.btn.lc-btn[disabled],
.lc-btn[disabled] { background: #d2d6db !important; color: #6c727e !important; cursor: not-allowed !important; }

/* forward arrow: points left in Arabic, right in English */
.lc-btn::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="ltr"] .lc-btn::after { transform: scaleX(-1); }
.lc-btn[disabled]::after { display: none; }

/* logout page: the single «back to login options» button */
.lc-done { display: flex; justify-content: center; padding: 8px 0; }

/* ── Links list ─────────────────────────────────────────── */
.lc-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #d2d6db;
  font-size: 14px;
  line-height: 20px;
}

.lc-links a,
.lc-links a:link,
.lc-links a:visited {
  color: #1b8354 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400;
  text-decoration: none !important;
  border-radius: 2px;
  cursor: pointer;
}
.lc-links a:hover { text-decoration: underline !important; }
.lc-links a:focus-visible { outline: 2px solid #161616; }

/* ── Back link ──────────────────────────────────────────── */
.lc-back,
.lc-back:link,
.lc-back:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #384250 !important;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none !important;
  border-radius: 2px;
}
.lc-back:hover { color: #1b8354 !important; }
.lc-back:hover .lc-back-label { text-decoration: underline; }
.lc-back:focus-visible { outline: 2px solid #161616; }
.lc-back img { width: 18px; height: 18px; }

/* leftArrow.svg points left (= "back" in LTR); in RTL it must point right */
[dir="rtl"] .lc-back-arrow { transform: scaleX(-1); }

/* ── Form area (BootsFaces well / form-group / form-control) ── */
.lc-body .well,
.lc-well {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.lc-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.lc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.lc-body .form-group { margin: 0 !important; width: 100%; }

.lc-body label {
  display: block;
  max-width: 100%;
  margin: 0 0 8px;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  line-height: 20px;
  font-weight: 500 !important;
  color: #161616 !important;
}
.lc-field > label { margin: 0; }

.lc-body input[type="text"],
.lc-body input[type="password"],
.lc-body .form-control {
  display: block;
  width: 100% !important;
  height: 40px !important;
  padding: 0 8px !important;
  background: #ffffff !important;
  border: 1px solid #9da4ae !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
  color: #384250 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lc-body .form-control::placeholder { color: #6c727e; }
.lc-body .form-control:hover { border-color: #384250 !important; }
/* dark underline on focus, as in the platforms-code input */
.lc-body input[type="text"]:focus,
.lc-body input[type="password"]:focus,
.lc-body .form-control:focus {
  border-color: #384250 !important;
  box-shadow: inset 0 -2px 0 #0c111b !important;
}

/* Bootstrap grid inside the card: plain full-width blocks */
.lc-body .row { margin: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.lc-body .row::before,
.lc-body .row::after { display: none !important; }
.lc-body [class*="col-"] {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.lc-body hr,
.lc-body .ui-separator {
  width: 100%;
  margin: 12px 0 0;
  border: 0;
  border-top: 1px solid #d2d6db;
  background: none;
}

/* MFA text and countdown */
.lc-body .lc-mfa-text {
  color: #384250;
  font-size: 14px;
  line-height: 22px;
}

#remainingTime {
  margin: 0;
  font-family: 'IBM Plex Sans Arabic', monospace;
  font-size: 40px !important;
  line-height: 48px;
  text-align: center;
  color: #b42318;
}

/* ── Messages (p:messages) as platforms-code alerts ─────── */
.lc-body .ui-messages {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}
.lc-body .ui-messages:empty { display: none; }

.lc-body .ui-messages > div {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 16px;
  padding-inline-start: 24px;
  border: 1px solid #d2d6db;
  border-radius: 8px;
  background: #ffffff;
  background-image: none;
  color: #384250;
  text-shadow: none;
  overflow: hidden;
}
.lc-body .ui-messages > div:last-child { margin-bottom: 0; }
.lc-body .ui-messages > div::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 8px;
  height: 100%;
  background: #6c727e;
}
.lc-body .ui-messages .ui-messages-error { border-color: #fecdca; background: #fffbfa; }
.lc-body .ui-messages .ui-messages-error::before { background: #f04437; }
.lc-body .ui-messages .ui-messages-fatal { border-color: #fecdca; background: #fffbfa; }
.lc-body .ui-messages .ui-messages-fatal::before { background: #f04437; }
.lc-body .ui-messages .ui-messages-warn { border-color: #fedf89; background: #fffcf5; }
.lc-body .ui-messages .ui-messages-warn::before { background: #f79009; }
.lc-body .ui-messages .ui-messages-info { border-color: #abefc6; background: #f6fef9; }
.lc-body .ui-messages .ui-messages-info::before { background: #17b26a; }

/* theme sprite icons do not fit the alert */
.lc-body .ui-messages [class*="-icon"]:not(.ui-icon-close) { display: none !important; }

.lc-body .ui-messages ul {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
}
.lc-body .ui-messages li { margin: 0; padding: 0; }
.lc-body .ui-messages [class*="-summary"] { font-weight: 500; margin: 0; }
.lc-body .ui-messages [class*="-detail"] { margin: 0; margin-inline-start: 4px; }

/* ── University block under the card ────────────────────── */
.lc-uni {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 8px 16px 0;
  color: #ffffff;
}
.lc-uni-name {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.lc-uni-desc {
  max-width: 520px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.85);
}
.lc-vision-logo {
  margin-top: 8px;
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ── Footer: no bar — a quiet line over the page background ── */
.ju-page-footer {
  flex: 0 0 auto !important;
  display: flex;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 32px;
  background: transparent;
  color: #ffffff;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}

.ju-footer-inner {
  width: 100%;
  max-width: 1280px;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  writing-mode: horizontal-tb !important;
}
@media (min-width: 640px) {
  .ju-footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}

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

.ju-footer-links {
  display: flex;
  justify-content: center;
  gap: 8px 24px;
  flex-wrap: wrap;
}
@media (min-width: 640px) {
  .ju-footer-links { justify-content: flex-start; }
}

.ju-footer-link,
.ju-footer-link:link,
.ju-footer-link:visited,
.ju-footer-links a {
  font-size: 14px;
  line-height: 20px;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 2px;
}
.ju-footer-link:hover,
.ju-footer-links a:hover { color: rgba(255, 255, 255, 0.8) !important; text-decoration: underline !important; }
.ju-footer-links a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.ju-footer-copy {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.75);
}

.ju-footer-brand {
  display: flex;
  align-items: center;
  gap: 24px;
}
.ju-footer-brand a { display: inline-flex; align-items: center; border-radius: 2px; }
.ju-footer-brand a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.ju-footer-brand img {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  /* white over the page background */
  filter: brightness(0) invert(1);
}

/* ── Entrance animation ─────────────────────────────────── */
@keyframes lc-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-enter { animation: lc-fade-up 280ms cubic-bezier(0.2, 0, 0, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .lc-enter { animation: none; }
}

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 480px) {
  .ju-navbar { padding: 12px 16px; }
  .ju-navbar .ju-nav-logo { height: 40px; }
  .lc-stage { padding: 24px 12px 32px; }
  .lc-banner { padding: 24px 16px; }
  .lc-banner-art { display: none; }
  .lc-body { padding: 16px; }
  .lc-banner .lc-title { font-size: 20px; line-height: 28px; }
  /* three tabs must fit a phone screen without scrolling */
  .lc-tab { padding: 12px 10px; }
  .lc-tab::after { width: calc(100% - 20px); }
  .lc-tab-icon { display: none; }
  .ju-page-footer { padding: 0 16px; }
}