/* Futurense login.css — cleaned and responsive
   - Desktop: left carousel 50% / right login form 50%
   - Mobile: stacked, scrollable
   - Removed fixed positioning and global overflow hidden
   - Kept password-toggle, logo & button styles
*/

/* --- Base resets & box-sizing (safe) --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Top-level wrapper --- */
.login-wrapper {
  display: flex;
  flex-wrap: wrap; /* stacks on smaller screens */
  min-height: 100vh;
  align-items: stretch;
  width: 100%;
  background: #ffffff;
  gap: 0;
}

/* --- LEFT: Carousel (uses grid half by design) --- */
/* Mustache uses col-12 col-md-6, but we enforce 50% widths here */
.login-carousel {
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
  overflow: hidden;
  background: #000; /* fallback while images load */
  display: block;
}

/* Carousel images should cover their area */
.login-carousel .carousel-item,
.login-carousel .login-slide-image {
  height: 100%;
}

.login-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Carousel caption overlay (left aligned) */
.login-carousel .carousel-caption {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  right: 2rem;
  text-align: left;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  background: transparent;
  padding: 0;
  pointer-events: none; /* allows clickable elements inside the caption */
}

.login-carousel .carousel-caption * {
  pointer-events: auto;
}

.login-slide-caption {
  font-size: 1.1rem;
  line-height: 1.45;
  margin-bottom: 0.5rem;
  color: #fff;
}

.login-person-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}

.login-person-designation {
  font-size: 0.95rem;
  opacity: 0.95;
  color: #fff;
}

/* Carousel controls/indicators adjustments */
#loginCarousel .carousel-indicators {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

#loginCarousel .carousel-control-prev,
#loginCarousel .carousel-control-next {
  top: 50%;
  transform: translateY(-50%);
}

/* --- RIGHT: login panel (50% on desktop) --- */
.login-container {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  box-shadow: none !important; /* no shadow */
  /* padding: 40px 32px; */
  background: #ffffff;
  overflow: auto; /* allow internal scrolling if needed */
}

/* Inner panel that holds logo and form */
.panel-inner {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

/* --- Logo & header --- */
.login-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-header img {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  display: inline-block;
}

.login-title /* suman changed 27-11-2025 */ {
  /* font-size: 1.6rem; */
  /* font-weight: 600; */
  /* color: #222; */
  margin: 0.25rem 0 0.5rem;
  color: var(--Colors-Gray-gray915-special, #2d2d2d);
  text-align: center;
  font-family: "DM Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 33.6px */
  letter-spacing: -0.84px;
}

.login-subtitle {
  /* font-size: 0.95rem; */
  /* color: #666; */
  margin: 0 0 1.1rem;
  color: var(--Colors-Gray-gray600-base13, #7a7a7a);
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: -0.32px;
}

/* --- Form layout --- */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.login-form .form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  font-size: 0.95rem;
  color: #333;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-form .form-control:focus {
  outline: none;
  border-color: #8a42ff;
  box-shadow: 0 0 6px rgba(138, 66, 255, 0.15);
}

/* Labels & helper text */
.login-label {
  /* suman changed 27-11-2025 */
  display: block;
  /* font-weight: 600; */
  /* font-size: 0.95rem; */
  /* color: #444; */
  margin-bottom: 4px;
  text-align: left;
  color: var(--Colors-Gray-gray800-base15, #525252);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 22.4px */
  letter-spacing: -0.32px;
}

.login-description {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 4px;
  text-align: left;
}

/* Submit button */
#loginbtn {
  width: 100%;
  height: 44px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  border-radius: var(--radius-m, 8px);
  background: radial-gradient(
    63.97% 100% at 50% 100%,
    #9e87d0 0%,
    #3c1296 100%
  );
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.4) inset,
    0 2px 12px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#loginbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(106, 0, 255, 0.22);
}
#loginbtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(106, 0, 255, 0.12);
}

/* When Moodle renders button text normally, don't hide text. Remove any text-hiding hacks. */
#loginbtn {
  color: #fff !important;
}
#loginbtn::after {
  content: none !important;
}

/* Forgot password link */
.forgot-password {
  text-align: left;
  margin-top: 6px;
}
.forgot-password a {
  /* suman changed 27-11-2025 */
  /* color: #7a1fff; */
  text-decoration: none;
  /* font-weight: 500; */
  color: var(--Colors-Gray-gray500-base12, #8f8f8f);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
  letter-spacing: -0.28px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.forgot-password a:hover {
  text-decoration: underline;
  color: #5200cc;
}

/* Guest/cookie buttons & divider — keep hidden as before */
#page-login-index #loginguestbtn,
#page-login-index .guestlogin,
#page-login-index .login-guestaccess,
#page-login-index .login-cookie,
#page-login-index .cookiesnotice,
#page-login-index .login-divider {
  display: none !important;
  visibility: hidden !important;
}

/* Password toggle wrapper and button */
.password-wrapper {
  position: relative;
  width: 100%;
}
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
  padding-right: 44px; /* space for the toggle */
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #666;
  border-radius: 6px;
  padding: 0;
}

.password-toggle:focus {
  outline: 2px solid rgba(138, 66, 255, 0.18);
  outline-offset: 2px;
}
.password-toggle svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.password-toggle:hover {
  color: #5200cc;
}
.password-toggle.active {
  color: #7a1fff;
}

/* Quote / caption styling (keeps visual look) */
.blockquote {
  position: relative;
  padding: 16px 18px;
  margin: 0 0 12px 0;
  background: transparent;
  border: none;
}

.blockquote p {
  font-style: italic;
  font-size: 1.15rem;
  /* color: #fff; */
  margin: 0;
}

.blockquote::before {
  content: "“";
  position: absolute;
  top: -12px;
  left: 6px;
  font-size: 56px;
  /* color: rgba(255, 255, 255, 0.95); */
  /* font-family: Georgia, serif; */
  pointer-events: none;
}

/* --- Responsive: below medium screens -> stacked & scrollable --- */
@media (max-width: 991.98px) {
  .login-carousel,
  .login-container {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .login-carousel .carousel-item,
  .login-carousel .login-slide-image {
    min-height: 220px;
    height: auto;
  }

  .login-carousel .carousel-caption {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  .panel-inner {
    padding: 0 6px;
  }

  .login-header img {
    /* max-width: 260px; */
    margin: 0 auto 12px;
  }
  .login-title {
    font-size: 1.35rem;
  }
  .login-subtitle {
    font-size: 0.95rem;
  }

  /* Center the form on mobile */
  .login-container {
    align-items: flex-start;
    padding: 20px 16px;
  }
  .login-form {
    gap: 10px;
  }
  .login-description,
  .login-label {
    text-align: center;
  }
  .forgot-password {
    text-align: center;
  }
}

/* Small phones: tighten spacing */
@media (max-width: 480px) {
  .login-slide-caption {
    font-size: 0.98rem;
  }
  .blockquote::before {
    font-size: 42px;
    top: -8px;
  }
  .panel-inner {
    padding: 0 8px;
  }
  #loginbtn {
    height: 44px;
    font-size: 1rem;
  }
}

/* ---------- Desktop: force full-viewport halves, remove panel shadow ---------- */
/* Only apply full-viewport behavior on wider screens (desktop) */
/* ---------- Desktop: remove all page scrolling and ensure exact-fit halves ---------- */
@media (min-width: 992px) {
  /* Force full viewport and remove page scroll */
  html,
  body,
  #page,
  .login-wrapper {
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* remove page scroll on desktop */
  }

  /* Ensure wrapper is full height */
  .login-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    height: 100vh;
  }

  /* Left and right are halves, fill viewport exactly */
  .login-carousel,
  .login-container {
    flex: 0 0 50%;
    max-width: 50%;
    /* height: 100vh; */
    min-height: 100vh;
    overflow: hidden; /* no scrollbars from these halves */
  }

  /* Carousel image: cover full half */
  .login-carousel .carousel-item,
  .login-carousel .login-slide-image {
    height: 100vh;
    min-height: 100vh;
  }
  .login-slide-image {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
  }

  /* Panel inner: center but keep the content compact to avoid overflow */
  .login-container .panel-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 12px 20px; /* smaller padding to save vertical space */
    box-sizing: border-box;
  }

  /* Remove decorative shadows and backgrounds so visual area is compact */
  .login-container .card,
  .login-container form,
  .panel-inner {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
  }

  /* Reduce logo maximum height so it can't push layout taller than viewport */
  .login-header img {
    /* max-height: 72px;  */
    height: 100px;
    width: 100%;
    margin-bottom: 8px;
  }

  /* Reduce title/subtitle spacing and font-size to conserve vertical space */
  .login-title {
    font-size: 1.35rem;
    margin: 0 0 6px;
  }
  .login-subtitle {
    font-size: 16px;
    margin: 0 0 10px;
  }

  /* Make form content compact and allow minimal internal scroll only if necessary */
  .panel-inner .login-form {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    gap: 8px;
    /* reserve space for logo + titles: adjust if you change logo size */
    max-height: calc(
      100vh - 120px
    ); /* 120px accounts for logo/title + safe paddings */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Visually hide internal scrollbar on supported browsers while keeping scroll functionality */
  .panel-inner .login-form::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .panel-inner .login-form {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Tighten button/input sizing */
  .login-form .form-control {
    padding: 10px 12px;
    border-radius: 6px;
  }
  #loginbtn {
    height: 40px;
    border-radius: 6px;
    font-size: 0.98rem;
  }

  /* Small vertical spacing adjustments */
  .login-header {
    margin-bottom: 8px;
  }
  .forgot-password {
    margin-top: 6px;
    margin-bottom: 0;
    text-align: left;
  }

  /* Safety: ensure #page padding is removed even if Moodle re-adds it */
  #page {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ---------- Mobile: stacked + scrollable (unchanged behavior) ---------- */
@media (max-width: 991.98px) {
  /* allow normal stacking & scrolling on phones */
  .login-carousel,
  .login-container {
    height: auto;
    min-height: auto;
  }

  .panel-inner {
    padding: 18px;
  }
  .login-header img {
    max-height: 96px;
  }
}

#page-login-index #region-main-box {
  padding: 0px !important;
}

#page-login-index #page-footer {
  display: none !important;
}

/* suman added css 27-11-2025 start------> */
.pagelayout-login #page div[role="main"] {
  height: 100%;
  width: 100%;
}

/* suman added css 27-11-2025 end------> */