/* =========================================================
   login.css
   Dark video background + glass UI for MAXTRI login pages
   Scope: body.login-page
   ========================================================= */

/* ---------- Base ---------- */
html, body {
  height: 100%;
}

body.login-page {
  background: #000;
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- Video Background ---------- */
body.login-page #login-bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

body.login-page .login-video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: -1;
}

/* ---------- Remove light backgrounds from theme ---------- */
body.login-page .app-theme-white.app-container,
body.login-page .app-container,
body.login-page .app-container .app-container {
  background: transparent !important;
}

body.login-page .bg-white {
  background-color: transparent !important;
}

/* ---------- Login Box (optional but recommended) ---------- */
body.login-page .app-login-box {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 2.2rem;
  backdrop-filter: blur(6px);
}

/* ---------- Typography ---------- */
body.login-page h1,
body.login-page h2,
body.login-page h3,
body.login-page h4,
body.login-page h5,
body.login-page h6,
body.login-page .h1,
body.login-page .h2,
body.login-page .h3,
body.login-page .h4,
body.login-page .h5,
body.login-page .h6 {
  color: #fff !important;
}

body.login-page .text-muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Divider (you use: <div class="divider row"></div>) */
body.login-page .divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 1.2rem 0;
}

/* ---------- Links ---------- */
/* default link color */
body.login-page a,
body.login-page .nav-link,
body.login-page .btn-link,
body.login-page .link-primary {
  color: #7A7A7A !important;
  text-decoration: none;
}

/* hover link color */
body.login-page a:hover,
body.login-page .nav-link:hover,
body.login-page .btn-link:hover,
body.login-page .link-primary:hover {
  color: #fff !important;
}

/* ---------- Inputs (your requested colors) ---------- */
body.login-page .form-control {
  background: #FFFFFF0F !important;      /* translucent white */
  border: 1px solid #FFFFFF21 !important; /* translucent border */
  color: #fff !important;
}

body.login-page .form-control::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

body.login-page .form-control:focus {
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Button (your requested colors + skew grow hover) ---------- */
body.login-page .btn-primary {
  background: #FFFFFF0F !important;      /* translucent white */
  border: 1px solid #FFFFFF21 !important; /* translucent border */
  color: #fff !important;

  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* overlay animation */
body.login-page .btn-primary::after {
  content: "";
  background: #fff;
  position: absolute;
  z-index: -1;

  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;

  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.3s ease;
}

body.login-page .btn-primary:hover::after {
  transform: skewX(-45deg) scale(1, 1);
  transition: all 0.3s ease-out;
}

/* On hover, the overlay becomes white -> make text dark for contrast */
body.login-page .btn-primary:hover {
  color: #000 !important;
}

/* Keep focus outline nice */
body.login-page .btn-primary:focus,
body.login-page .btn-primary:active:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Optional: make "Probleme mit Login?" look like a link ---------- */
body.login-page .btn.btn-link {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ---------- Optional: improve small footer nav spacing ---------- */
body.login-page .nav .nav-link {
  padding: 0.25rem 0.6rem;
}

/* ---------- Select (Bootstrap form-select) ---------- */
body.login-page .form-select {
  background-color: #FFFFFF0F !important;
  border: 1px solid #FFFFFF21 !important;
  color: #fff !important;

  /* damit der Browser-Dropdown-Pfeil nicht schwarz wirkt */
  background-image: none !important;
}

/* Optional: eigener Pfeil (weiß) */
body.login-page .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4.2 6.2a.75.75 0 0 1 1.06 0L8 8.94l2.74-2.74a.75.75 0 1 1 1.06 1.06l-3.27 3.27a.75.75 0 0 1-1.06 0L4.2 7.26a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
}

/* Focus */
body.login-page .form-select:focus {
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.12) !important;
}

/* Dropdown items (Browser/OS abhängig – funktioniert in vielen Fällen) */
body.login-page .form-select option {
  color: #000;         /* Lesbarkeit im Dropdown */
  background: #fff;
}

/* Optional: Popover-Icon Background (du hast bg-white im input-group-text) */
body.login-page .input-group-text.bg-white {
  background: #FFFFFF0F !important;
  border: 1px solid #FFFFFF21 !important;
}

/* Icon-Farbe im Dark Mode */
body.login-page .input-group-text i {
  color: #fff !important;
}