/*========================================================
        DARK LAYOUT
=========================================================*/
.bg-authentication {
  background-color : #EFF2F7;
}
.bg-authentication .login-footer {
  padding : 0rem 1.5rem 0.5rem;
}
.bg-authentication .login-footer .footer-btn .btn {
  padding : 0.9rem 1.2rem !important;
  margin : 1rem 1rem 1rem 0rem;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .bg-authentication {
    width : 100%;
  }
}

/* ========================================
   MODERN LOGIN PAGE STYLING
======================================== */

/* Login Card */
.login-card-modern,
.login-card-modern.rounded-0,
.card.login-card-modern.rounded-0 {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Login Header - Override rounded-0 dari Bootstrap */
.login-card-modern .card-header.login-header-modern,
.login-card-modern .login-header-modern,
.card.login-card-modern .card-header.login-header-modern,
.login-card-modern > .card-header.login-header-modern,
.login-card-modern .card-header.login-header-modern.rounded-0,
.login-header-modern.rounded-0 {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
  border: none !important;
  padding: 2.5rem 2rem !important;
  text-align: center;
  border-top-right-radius: 16px !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  border-radius: 0 16px 0 0 !important;
}

.login-header-modern {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
  border: none !important;
  padding: 2.5rem 2rem !important;
  text-align: center;
  border-top-right-radius: 16px !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  border-radius: 0 16px 0 0 !important;
}

/* Override Bootstrap card-header default border-radius dan rounded-0 */
.login-card-modern .card-header:first-child,
.login-card-modern .card-header:first-child.rounded-0,
.card.login-card-modern .card-header.login-header-modern.rounded-0,
.login-card-modern .card-header.login-header-modern.rounded-0 {
  border-radius: 0 16px 0 0 !important;
  border-top-right-radius: 16px !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Force override rounded-0 untuk header biru - harus di akhir untuk override Bootstrap */
.card.login-card-modern .card-header.login-header-modern,
.login-card-modern .card-header.login-header-modern,
.login-card-modern .card-header.login-header-modern.rounded-0,
.card.login-card-modern .card-header.login-header-modern.rounded-0 {
  border-radius: 0 16px 0 0 !important;
  border-top-right-radius: 16px !important;
}

.login-title {
  color: #FFFFFF !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3;
}

.login-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
  font-weight: 400;
}

/* Login Body */
.login-body-modern {
  padding: 2.5rem 2rem !important;
}

.login-form-modern {
  max-width: 100%;
}

/* Form Group */
.form-group-modern {
  margin-bottom: 1.5rem;
}

.form-label-modern {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.5rem;
}

/* Input Wrapper */
.input-wrapper-modern {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-modern {
  position: absolute;
  left: 1rem;
  z-index: 2;
  color: #64748B;
  font-size: 1.1rem;
  pointer-events: none;
}

.form-control-modern {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 3rem !important;
  font-size: 0.95rem;
  border: 2px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF;
  color: #1E293B;
  transition: all 0.3s ease;
  outline: none;
}

.form-control-modern:focus {
  border-color: #1e40af !important;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1) !important;
  outline: none;
}

.form-control-modern::placeholder {
  color: #94A3B8;
  font-weight: 400;
}

.form-control-modern.is-invalid {
  border-color: #EF4444 !important;
}

.form-control-modern.is-invalid:focus {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Error Message */
.error-message-modern {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: #EF4444;
  font-size: 0.85rem;
  font-weight: 500;
}

.error-message-modern i {
  font-size: 1rem;
}

/* Form Options */
.form-options-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.remember-me-wrapper {
  flex: 1;
}

.checkbox-modern {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.checkbox-modern input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #1e40af;
}

.checkbox-label {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 500;
}

.forgot-password-wrapper {
  flex-shrink: 0;
}

.forgot-link {
  color: #1e40af;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.forgot-link:hover {
  color: #1e3a8a;
  text-decoration: underline;
}

/* Form Actions */
.form-actions-modern {
  margin-bottom: 1.5rem;
}

.btn-login-modern {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

.btn-login-modern:hover {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.4);
  color: #FFFFFF;
}

.btn-login-modern:active {
  transform: translateY(0);
}

.btn-login-modern i {
  font-size: 1.1rem;
}

/* Register Link */
.register-link-modern {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid #E2E8F0;
}

.register-text {
  color: #64748B;
  font-size: 0.9rem;
  margin: 0;
}

.register-link {
  color: #1e40af;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.register-link:hover {
  color: #1e3a8a;
  text-decoration: underline;
}

/* Login Footer */
.login-footer-modern {
  padding: 1.5rem 2rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  text-align: center;
}

.back-link-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748B;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.back-link-modern:hover {
  color: #1e40af;
  text-decoration: none;
}

.back-link-modern i {
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .login-header-modern {
    padding: 2rem 1.5rem !important;
  }

  .login-title {
    font-size: 1.5rem !important;
  }

  .login-body-modern {
    padding: 2rem 1.5rem !important;
  }

  .form-options-modern {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .forgot-password-wrapper {
    align-self: flex-end;
  }
}

/* ========================================
   FORCE OVERRIDE rounded-0 dari Bootstrap
   Harus di akhir file untuk override
======================================== */
.card.login-card-modern.rounded-0,
.login-card-modern.rounded-0 {
  border-radius: 16px !important;
}

.card.login-card-modern .card-header.login-header-modern.rounded-0,
.login-card-modern .card-header.login-header-modern.rounded-0,
.card.login-card-modern.rounded-0 .card-header.login-header-modern,
.login-card-modern.rounded-0 .card-header.login-header-modern {
  border-radius: 0 16px 0 0 !important;
  border-top-right-radius: 16px !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}