/* =========================================================
   Login Redesign — new DGA green design
   Scoped with nld- prefix to avoid conflicts with template CSS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* Override font in the form panel */
.c-child {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* ── Welcome block ───────────────────────────────────────── */
.nld-welcome-block {
  border-bottom: 1px solid #D2D6DB;
  padding-bottom: 4px;
  margin-bottom: 16px;
}

.nld-welcome-heading {
  font-size: 26px;
  font-weight: 500;
  line-height: 44px;
  color: #111927;
}

.nld-welcome-sub {
  font-size: 16px;
  line-height: 24px;
  color: #1B8354;
}

/* ── Cards row ───────────────────────────────────────────── */
.nld-cards-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: nowrap;
  margin-bottom: 16px;
}

/* Mobile: stack cards vertically (Nafath first, then Faculty/Staff) */
@media (max-width: 640px) {
  .nld-cards-row {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .nld-login-card {
    width: 100%;
  }
}

.nld-login-card {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 16px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #D2D6DB;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.nld-card-icon-wrap {
  width: 40px;
  height: 40px;
  background: #F3FCF6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nld-card-icon-wrap img {
  width: 24px;
  height: 24px;
  filter: invert(36%) sepia(88%) saturate(468%) hue-rotate(110deg) brightness(88%) contrast(91%);
}

.nld-card-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #111927;
}

.nld-card-sub {
  font-size: 14px;
  line-height: 1.4;
  color: #384250;
}

/* ── Primary button (green) ──────────────────────────────── */
.nld-btn,
.nld-btn:link,
.nld-btn:visited {
  display: inline-block !important;
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: 6px !important;
  background-color: #1B8354 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  border: none !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: unset !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  line-height: 40px !important;
  vertical-align: middle !important;
}

.nld-btn:hover,
.nld-btn:focus {
  background-color: #166a43 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.nld-btn-full {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

/* ── Links list ──────────────────────────────────────────── */
.nld-links-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nld-links-list a,
.nld-links-list .nld-link {
  color: #1B8354 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: inline-block;
}

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

/* ── Back bar (empLogin) ─────────────────────────────────── */
.nld-back-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none !important;
  color: #384250 !important;
  margin-bottom: 4px;
}

.nld-back-bar img {
  width: 18px;
  height: 18px;
}

[dir="rtl"] .nld-back-arrow {
  transform: scaleX(-1);
}

.nld-back-label {
  font-size: 15px;
  font-weight: 500;
  color: #384250;
}

/* ── Section header ──────────────────────────────────────── */
.nld-section-header {
  border-bottom: 1px solid #D2D6DB;
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nld-section-sub {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: #111927;
}

/* ── Error alert ─────────────────────────────────────────── */
.nld-error-alert {
  background: #FEE2E2;
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}

.nld-error-close {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  line-height: 1;
}

.nld-error-close img {
  width: 16px;
  height: 16px;
  filter: invert(24%) sepia(80%) saturate(900%) hue-rotate(330deg);
}

/* ── Login form ──────────────────────────────────────────── */
.nld-form-wrapper {
  background: #F9FAFB;
  padding: 12px 12px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nld-form-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid #D2D6DB;
  padding-bottom: 16px;
}

.nld-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.nld-field-group label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111927 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

.nld-field-group input,
.nld-field-group .form-control {
  width: 100% !important;
  height: 42px !important;
  background: #ffffff !important;
  border: 1px solid #9DA4AE !important;
  border-radius: 6px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  color: #384250 !important;
  outline: none !important;
  box-shadow: none !important;
}

.nld-field-group input:focus,
.nld-field-group .form-control:focus {
  border-color: #1B8354 !important;
  box-shadow: 0 0 0 2px rgba(27,131,84,0.1) !important;
}

/* Override BootsFaces form-group margins inside nld wrappers */
.nld-field-group .form-group {
  margin-bottom: 0 !important;
}

/* ── MFA countdown timer ─────────────────────────────────── */
#remainingTime {
  font-size: 42px !important;
  text-align: center;
  color: #EF4444;
  font-family: 'IBM Plex Sans Arabic', monospace;
}

/* ==========================================================
   Background image + green overlay (login-bg.jpg)
   ========================================================== */

/* Replace old background.png with the new green building photo */
.c-scaffold {
  background-image:
    linear-gradient(rgba(7, 77, 49, 0.62), rgba(7, 77, 49, 0.62)),
    url("../images/login-bg.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* ==========================================================
   Logo: switch to SVG versions (RTL default, LTR override)
   ========================================================== */

.x-scaffold .c-logo {
  background-image: url(../images/icons/logo-rtl-new.svg) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

[dir=ltr] .x-scaffold .c-logo {
  background-image: url(../images/icons/logo.svg) !important;
}

/* ==========================================================
   Shadow background panel: green gradient + white text
   ========================================================== */

/* Replace the old white-fade gradient with a dark-green gradient
   so text and the Vision logo are readable over the photo */
.x-scaffold .c-shadow-background [slot=footer] {
  background: linear-gradient(
    rgba(7, 77, 49, 0) 0%,
    rgba(7, 77, 49, 0.55) 35%,
    rgba(7, 77, 49, 0.88) 100%
  ) !important;
}

/* University name — white */
.x-scaffold .c-shadow-background .c-footer-title,
[color=primary][dark-mode=off] .x-scaffold .c-shadow-background .c-footer-title,
[color=primary][dark-mode=on]  .x-scaffold .c-shadow-background .c-footer-title {
  color: #ffffff !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* Accreditation statement — semi-transparent white */
.x-scaffold .c-shadow-background .c-footer-subtitle,
[color=primary][dark-mode=off] .x-scaffold .c-shadow-background .c-footer-subtitle,
[color=primary][dark-mode=on]  .x-scaffold .c-shadow-background .c-footer-subtitle {
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* ==========================================================
   Footer icons → Vision 2030 SVG (filtered to white)
   ========================================================== */

/* Hide the original footer_icons.png */
.x-scaffold .c-shadow-background .c-footer-svg img {
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Show vision.svg in its place via ::before on the container */
.x-scaffold .c-shadow-background .c-footer-svg {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.x-scaffold .c-shadow-background .c-footer-svg::before {
  content: '';
  display: block;
  width: 130px;
  height: 60px;
  background: url(../images/icons/vision.svg) center / contain no-repeat;
  filter: brightness(0) invert(1);
}

/* ==========================================================
   RTL / LTR direction fixes
   ========================================================== */

/* Back arrow: leftArrow.svg points left (= "back" in LTR).
   In RTL the arrow must point right, so we flip it. */
[dir="rtl"] .nld-back-arrow {
  transform: scaleX(-1);
}

/* Cards flow naturally with flex-direction:row + dir attribute:
   RTL  → right-to-left  (correct for Arabic)
   LTR  → left-to-right  (correct for English)
   No extra rules needed. */

/* ==========================================================
   Compact header — collapse 230 px slot to auto-height navbar
   ========================================================== */

/* Remove top padding and white glow from the right panel */
.x-scaffold .c-child {
  padding-top: 0 !important;
  box-shadow: none !important;
}

/* Let the header slot shrink to its content height */
.x-scaffold .c-child [slot=header] {
  height: auto !important;
  min-height: 0 !important;
}

/* Logo + language in a horizontal bar */
.x-scaffold .c-child .c-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 0 16px !important;
  border-bottom: 1px solid #E5E7EB !important;
}

/* Hide page title from the template header — placed in content XHTML instead */
.x-scaffold .c-child .c-header .c-title {
  display: none !important;
}

/* ==========================================================
   Language toggle: compact bordered button with globe icon
   ========================================================== */

.x-lang .btn,
.x-lang a {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #D2D6DB !important;
  color: #384250 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  direction: ltr !important;
  text-decoration: none !important;
  width: auto !important;
}

.x-lang .btn::after,
.x-lang a::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../images/icons/globe.svg) center / contain no-repeat;
  flex-shrink: 0;
}

.x-lang .btn:hover,
.x-lang a:hover {
  background-color: #F3F4F6 !important;
  border-color: #9DA4AE !important;
  color: #384250 !important;
}

/* Override Bootstrap/BootsFaces purple active/primary styles */
[color=primary][dark-mode=off] .x-lang .btn,
[color=primary][dark-mode=on]  .x-lang .btn,
[color=primary][dark-mode=off] .x-lang a:link,
[color=primary][dark-mode=off] .x-lang a:visited,
[color=primary][dark-mode=on]  .x-lang a:link,
[color=primary][dark-mode=on]  .x-lang a:visited,
[color=primary][dark-mode=off] .x-lang a:link.c-active,
[color=primary][dark-mode=off] .x-lang a:visited.c-active,
[color=primary][dark-mode=on]  .x-lang a:link.c-active,
[color=primary][dark-mode=on]  .x-lang a:visited.c-active {
  background-color: transparent !important;
  color: #384250 !important;
}

/* ==========================================================
   Page title in content area (replaces c-title in header)
   ========================================================== */

.nld-page-title {
  font-size: 28px;
  font-weight: 600;
  color: #111927;
  line-height: 1.3;
  margin-bottom: 20px;
}