/* Final clean Login CSS - single-source-of-truth */

/* Page */
.login-page{
  background:linear-gradient(180deg,#f4f6f9 0%,#e9eef5 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.login-box{width:100%;max-width:420px;margin:0}
.login-logo{text-align:center;margin-bottom:18px}
.login-logo,.login-logo a{color:#333;font-size:28px;font-weight:600}

/* Card */
.card{border:1px solid #e0e6eb;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.04);background:#fff}
.card-body.login-card-body{padding:28px}
.login-box-msg{text-align:center;margin:0 0 14px;color:#555}

/* Input group - concise and robust */
.input-group{
  display:flex;
  align-items:center;
  width:100%;
  flex-wrap:nowrap; /* never wrap */
}

/* Input: reserve room on the right for the append icon so text cannot go under it */
.input-group > .form-control{
  flex:1 1 auto;
  min-width:0; /* allows shrinking */
  height:44px;
  padding:0.375rem 0.75rem;
  padding-right:56px; /* append width (44px) + gap (12px) */
  border:1px solid #cfd8df;
  border-radius:4px;
  box-sizing:border-box;
  background:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
}
.input-group > .form-control:focus{
  border-color:#007bff;
  box-shadow:0 0 0 0.12rem rgba(0,123,255,0.10);
  outline:none;
}

/* Append: inline, fixed-width element to the right of the input */
.input-group-append{
  display:inline-flex;
  flex:0 0 44px;
  width:44px;
  align-items:center;
  justify-content:center;
  margin-left:-1px; /* visually join to input */
  background:#f1f5f8;
  border-left:1px solid #cfd8df;
  box-sizing:border-box;
}
.input-group-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:44px;
  padding:0;
  background:transparent;
  border:none;
}
.input-group-text i, .input-group-text .fas{font-size:16px;color:#6c757d}

/* Visual join: do not show input right border to make the join seamless */
.input-group > .form-control{border-right:none}

/* Login row */
.login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  width:100%;
}
.form-check{display:flex;align-items:center;gap:8px}
.form-check-input{width:18px;height:18px;margin:0}
.form-check-label{margin:0;color:#444}

.btn-primary{
  background:#007bff;
  border-color:#007bff;
  color:#fff;
  padding:0.5rem 0.9rem;
  border-radius:4px;
}
.btn-primary:hover{background:#0069d9}

/* Mobile: stack remember + button */
@media (max-width:576px){
  .login-row{flex-direction:column;align-items:stretch}
  .form-check{width:100%}
  .login-row .btn{width:100%}
  .input-group > .form-control{padding-right:48px}
  .input-group-append{flex:0 0 36px;width:36px}
  .input-group-text{height:36px}
}

/* Defensive: remove inline absolute fallbacks if present */
.input-group-append[style], .input-group-text[style]{position:static !important;right:auto !important;top:auto !important;transform:none !important}

/* Final overrides: enforce stable inline append and prevent input text overlapping icons */
.input-group { flex-wrap: nowrap !important; }
.input-group > .form-control {
  min-width: 0 !important; /* allow the input to shrink instead of overflowing */
  padding-right: 64px !important; /* reserve space: append width + gap */
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.input-group-append {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: -1px !important; /* visually join */
  z-index: 10 !important;
  background: #f1f5f8 !important;
  border-left: 1px solid #cfd8df !important;
}
.input-group-text {
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Defensive: remove any absolute-position fallbacks that might remain */
.card-body.login-card-body .input-group-append[style],
.card-body.login-card-body .input-group-text[style] {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

@media (max-width: 576px) {
  .input-group > .form-control { padding-right: 48px !important; }
  .input-group-append { flex: 0 0 36px !important; width: 36px !important; }
  .input-group-text { height: 36px !important; }
}

/* End final overrides */