@charset "UTF-8";
/**
 * Custom Boostrap 5 variable overrides and functions
 **/
/*!
 * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2023 Fonticons, Inc.
 */
@font-face {
  font-family: "Font Awesome Kit";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/custom-icons.woff2") format("woff2"), url("../webfonts/custom-icons.ttf") format("truetype");
}
.fak, .fa-kit {
  font-family: "Font Awesome Kit";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

.fak.fa-bibliopolis:before, .fa-kit.fa-bibliopolis:before {
  content: "\e000";
}

.fak.fa-bookrouter:before, .fa-kit.fa-bookrouter:before {
  content: "\e001";
}

/* ============================================================
   Login Page (BookRouter) – Refactored
   ============================================================ */
body.login {
  /* Layout */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Background — bg-login.jpg washed into the brand navy→cobalt via a
     blended gradient overlay (CSS-only tint; the source image is
     untouched). Only the left splash shows it — the right column is
     covered by the form panel. */
  background-image: linear-gradient(rgba(15, 30, 61, 0.6), rgba(43, 77, 155, 0.5)), url("../images/bg-login.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
}

/* Mobile page padding + safe area */
.login-page-inner {
  width: 100%;
}

/* Stepper / right column base surface */
#login-steps {
  /* Round cards a touch inside the form column */
  /* Make inputs feel tappable on mobile */
  /* "Logging into:" separator */
}
#login-steps .card,
#login-steps .br-panel,
#login-steps .login-panel {
  border-radius: 12px;
}
#login-steps .form-control,
#login-steps .form-select {
  min-height: 44px;
}
#login-steps .footer.text-muted {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
#login-steps .login-mask {
  /* Constrain form column width when stacked */
}
#login-steps .login-mask .login-column {
  background-color: var(--mdb-gray-100);
}

/* Stepper mobile footer overrides */
.stepper-mobile-footer {
  background-color: var(--mdb-gray-100);
  position: static !important;
}

/* Remove MDB checkbox focus glow (you had both variants; keep both safely) */
.form-check-input:focus::before,
.form-check-input:checked:focus::before,
.form-check-input:checked:focus:before {
  box-shadow: none;
}

/* Logo block */
#login-page-logo {
  margin-bottom: 0.75rem;
  /* If you ever re-enable the small Bibliopolis icon, keep this ready */
}
#login-page-logo #navbar-brand-logo {
  max-width: 10%;
  height: auto;
}
#login-page-logo img.img-fluid {
  max-width: 300px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}

@media (max-width: 420px) {
  #login-page-logo img.img-fluid {
    max-width: 68%;
  }
}
/* Ajax response spacing */
#ajax-response {
  margin-top: 1rem;
}
#ajax-response .alert {
  margin-bottom: 0;
}

/* Alpha panel styling (soft, readable, not competing with the form) */
.br-panel-soft {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  line-height: 1.35;
}
.br-panel-soft .fw-semibold {
  letter-spacing: 0.2px;
}
.br-panel-soft a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 575.98px) {
  .br-panel-soft {
    padding: 0.85rem !important;
  }
  h4 {
    font-size: 1.1rem !important;
  }
  .cp_login_top p {
    font-size: 0.9rem;
  }
}
/* Forgot password tap target */
.forgot-password {
  position: relative;
}
.forgot-password a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

/* Mobile footer bar under the login card */
.login-mobile-footer {
  padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}
.login-mobile-footer a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-column .footer {
  padding-bottom: 0;
}

/* ============================================================
   Desktop (lg+) split layout rules
   ============================================================ */
@media (max-width: 991.98px) {
  #login-steps .login-column {
    border: 2px solid #0d6efd;
    border-radius: 0.5rem;
  }
}
@media (max-width: 767.98px) {
  .login-column {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
@media (min-width: 576px) {
  #login-page-logo img.img-fluid {
    margin: 0;
  }
}
@media (min-width: 992px) {
  #login-steps {
    background-color: var(--mdb-gray-100);
  }
  /* Full-height columns */
  #login-design {
    position: relative;
    height: 100vh;
  }
  .container-fluid {
    width: 100vw;
    height: 100vh;
  }
  #login-page-logo img.img-fluid {
    margin-left: 0;
  }
  /* Ensure the immediate rows fill the column height */
  #login-steps > .login-mask,
  .login-mask > .row {
    height: 100%;
  }
  #login-steps > .row {
    justify-content: center;
    align-items: center;
  }
  /* Make the left design column overlay behave */
  #login-steps .login-column {
    background-color: transparent;
  }
  #login-design .login-mask {
    position: absolute;
    inset: 0; /* top/left/right/bottom */
  }
}

/*# sourceMappingURL=login.css.map */