/* ===== JCSBK Self-Service-Password Theme ===== */
/* Farbschema übernommen vom Keycloak-Login-Theme (jcsbk.css) für konsistenten Wiedererkennungswert */
/* Portiert von SSP 1.3 (Bootstrap 3: panel/panel-body/input-group-addon) auf SSP 1.8.2 (Bootstrap 5: card/card-body/input-group-text) */

html, body {
  background: linear-gradient(135deg, #1e3a6e 0%, #2d5fa6 60%, #29abe2 100%) !important;
  min-height: 100vh;
  padding-top: 0 !important;
  font-size: 12pt;
  color: #ffffff;
}

body > .container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card.card-success {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  max-width: none;
}

.card-body {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  padding: 2.5rem;
  max-width: 420px;
}

.card.card-success::after {
  content: '';
  display: block;
  width: 350px;
  height: 231px;
  min-width: 350px;
  background-image: url('../images/jcsbk-logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.25));
}

img.logo {
  display: none;
}

.title.alert.alert-success {
  background: transparent;
  border: none;
  color: #ffffff;
}

.title h1 {
  font-size: 1.3rem;
  color: #ffffff;
  text-align: center;
}

label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.form-control {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: #ffffff;
}

.form-control:focus {
  background: rgba(255, 255, 255, 0.22);
  border-color: #e87722;
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 119, 34, 0.4);
  color: #ffffff;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.btn-primary,
.btn-success {
  background-color: #e87722;
  border-color: #e87722;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background-color: #cf6510;
  border-color: #cf6510;
  box-shadow: 0 4px 12px rgba(232, 119, 34, 0.45);
}

a {
  color: #29abe2;
}

a:hover {
  color: #e87722;
  text-decoration: underline;
}

.alert-danger, .alert-warning {
  background: rgba(232, 119, 34, 0.2);
  border-color: #e87722;
  border-radius: 8px;
  color: #ffffff;
}

.alert-success {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4caf50;
  border-radius: 8px;
  color: #ffffff;
}

.result p {
  font-size: 14pt;
  color: #ffffff;
}

.result i.fa {
  font-size: 18pt;
  margin-right: 10px;
}

.help i.fa {
  font-size: 14pt;
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.8);
}

.help {
  color: rgba(255, 255, 255, 0.8);
}

.nav-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.nav-tabs > li > a {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom-color: transparent;
}

textarea {
  resize: vertical;
}

@media (max-width: 900px) {
  .card.card-success {
    flex-direction: column;
  }
  .card.card-success::after {
    width: 200px;
    height: 132px;
    min-width: 200px;
  }
  .card-body {
    max-width: 90vw;
  }
}

label,
.control-label,
.form-horizontal .control-label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.alert-success {
  background: rgba(232, 119, 34, 0.25) !important;
  border: 1px solid #e87722 !important;
  color: #ffffff !important;
}

.alert-success h1,
.alert-success p,
.alert-success label {
  color: #ffffff !important;
}

.alert-info {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.alert-info .input-group-text {
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

.btn-success {
  background-color: #14a677 !important;
  border-color: #14a677 !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #108a63 !important;
  border-color: #108a63 !important;
}

.card-body {
  max-width: 520px !important;
}

.card-body {
  border-top: 3px solid #e87722 !important;
}

.input-group-text {
  background: rgba(232, 119, 34, 0.18) !important;
  border: 1px solid rgba(232, 119, 34, 0.35) !important;
  color: #ffffff !important;
}

.alert-info .input-group-text {
  background: rgba(232, 119, 34, 0.18) !important;
  border: 1px solid rgba(232, 119, 34, 0.35) !important;
}

.navbar-brand .fa-home {
  color: #e87722 !important;
}

.popover {
  color: #e87722 !important;
}

.popover-body,
.popover-header {
  color: #e87722 !important;
}

.popover a {
  color: #e87722 !important;
}

/* Fix 1.8.2: Kartenbreite fest, damit Menue nicht umbricht */
.card-body {
  width: 520px;
  max-width: 90vw !important;
}

/* Fix 1.8.2: Navbar im Glas-Look statt Bootstrap-5-Grau */
.navbar {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  box-shadow: none !important;
  margin-bottom: 1.5rem;
}

.navbar-brand,
.navbar .nav-link {
  color: #ffffff !important;
  font-size: 1rem;
}

.navbar .nav-link.active,
.navbar .nav-link:hover,
.navbar-brand:hover {
  color: #e87722 !important;
  text-decoration: none;
}