/*
 * LibreBooking 7.1 — classic-inspired appearance
 *
 * An additive override based on the supplied 2.8.x and 7.1 stylesheets.
 * Keep the 7.x Bootstrap 5 CSS; do not replace it with the 2.x CSS.
 *
 * Place in:  Web/css/librebooking-classic-override.css
 * Configure: 'css.extension.file' => 'librebooking-classic-override.css'
 */

/* Original 2.x colours, expressed through 7.x theme variables. */
[data-bs-theme='default'] {
  --primary: #53577f;
  --primary-hover: #5d628e;
  --primary-disabled: #a7a9bc;
  --text-color-btn: #fff;

  --bs-link-color: #669999;
  --bs-link-hover-color: #428181;
  --bs-link-color-rgb: 102, 153, 153;
  --bs-link-hover-color-rgb: 66, 129, 129;
}

/* Subtle warm white background from the old interface. */
body {
  background-color: #fbfbfb;
}

/*
 * Login image: the old 2.x stylesheet had
 *   #page-login .login-icon img { max-width: 100%; }
 * That login-specific rule is absent from the supplied 7.x stylesheet.
 *
 * Width AND height limits help when reusing a large legacy logo.
 * Adjust the two pixel values to taste.
 */
#page-login .login-icon img,
.login-icon img,
.login-logo img,
img.login-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 320px);
  max-height: 110px;
  object-fit: contain;
  margin-inline: auto;
}

#page-login .login-icon,
.login-icon {
  text-align: center;
  padding-bottom: 7px;
}

/* Echo the flatter, lightly bordered old login panel. */
#page-login .default-box,
#page-login .card,
.login-page .card {
  background-color: #f8f8f8;
  border: 1px solid #99988e;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

#page-login .default-box-header,
#page-login .card-header,
.login-page .card-header {
  background-color: #58545d;
  color: #fff;
  border-color: #99988e;
}

#page-login .default-box-header a,
#page-login .card-header a,
.login-page .card-header a {
  color: #e9e9e9;
}

/* Old-style login support/registration links and notices. */
#page-login .login-links,
.login-links {
  text-align: center;
}

#page-login .register {
  text-align: right;
  padding-top: 7px;
}

#page-login #announcements .announcement {
  background-color: #fff;
  border: 1px solid #99988e;
  border-radius: 2px;
  box-shadow: 0 0 5px 1px rgb(0 0 0 / 12%);
  padding: 5px;
  margin-bottom: 20px;
}

@media (max-width: 575.98px) {
  #page-login .login-icon img,
  .login-icon img,
  .login-logo img,
  img.login-logo {
    max-width: min(100%, 260px);
    max-height: 90px;
  }
}