/* Custom login styles: black + green theme, centered, responsive */
:root{
  --green: #00b36b; /* refreshed green */
  --green-dark: #00995b;
  --green-contrast: #06120d;
  --card-bg: rgba(255,255,255,0.94); /* light card */
  --card-border: rgba(0,0,0,0.06);
  --text-dark: #1b1b1b;
  --text-muted: #5f6b78;
  --muted: #8a8a8a;
}

html, body{ height:100%; }

/* Page background */
body.login-page{
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)), url('../images/back2.jpg') center center / cover no-repeat !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: var(--text-light);
  overflow-y: hidden; /* remove vertical scrollbar */
  overflow-x: hidden;
}

/* Center the login panel vertically and horizontally */
body.login-page .main-wrapper{
  min-height: 100vh;
  display: flex;
  align-items: center; /* center vertically */
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

/* Remove extra spacing from legacy utility classes on login page */
body.login-page .mt-40,
body.login-page .mt-30{ margin-top: 0 !important; }
body.login-page .pt-50{ padding-top: 0 !important; }
body.login-page .panel-heading .text-center br{ display: none; }

/* Neutralize Bootstrap grid offsets for the login container to keep it centered */
body.login-page .col-md-offset-7.col-lg-5,
body.login-page .col-md-offset-2.col-md-10{
  float: none;
  margin: 0 auto;
}

/* Force a single centered column on desktop to avoid ultra-thin width */
body.login-page .col-md-offset-7{ margin-left: 0 !important; }
body.login-page .col-md-offset-2{ margin-left: 0 !important; }
body.login-page .col-lg-5,
body.login-page .col-md-10,
body.login-page .col-md-11,
body.login-page .col-md-12{
  width: 100% !important;
  float: none !important;
}

/* Login card (panel) */
.panel.login-box{
  background: var(--card-bg) !important; /* light card, remove black */
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10);
  overflow: hidden;
  width: 100%;
  max-width: 720px; /* wider card */
  margin: 0 auto; /* center */
  backdrop-filter: saturate(120%) blur(1px);
}

@media (min-width: 1200px){
  .panel.login-box{ max-width: 800px; }
}

.panel.login-box .panel-heading{
  background: linear-gradient(180deg, rgba(0,179,107,0.12), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}

.panel.login-box h5{
  color: var(--text-dark);
  letter-spacing: 0.6px;
  margin-top: 6px;
}

/* Form area */
.panel.login-box .panel-body{
  padding: 28px 26px 30px;
}

/* Make labels/inputs readable and ensure inputs fill width */
.admin-login .form-group{ margin-bottom: 18px; }
.admin-login .form-control{ width: 100%; font-size: 15px; }

/* Ensure the submit area has spacing */
.admin-login .form-group.mt-20{ margin-top: 14px; }

.admin-login .form-group label{
  color: var(--text-dark);
  display: block;
  text-align: center; /* center labels */
  font-weight: 700;
  margin-bottom: 8px;
}

/* Icons inside labels */
.admin-login .form-group label .fa{
  color: var(--green);
  margin-right: 6px;
}

/* Inputs - light design */
.admin-login .form-control{
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--text-dark);
  height: 46px;
  border-radius: 12px;
  text-align: center; /* center input text */
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.admin-login .form-control:focus{
  background-color: #ffffff;
  outline: none;
  border-color: rgba(0,179,107,0.55);
  box-shadow: 0 0 0 4px rgba(0,179,107,0.14), 0 2px 8px rgba(0,0,0,0.08);
}

.admin-login .form-control::placeholder{
  color: var(--text-muted);
  text-align: center; /* center placeholder */
}

/* Submit button */
.btn.login-btn{
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #00b36b, #00e38c);
  color: var(--green-contrast);
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 22px rgba(0, 179, 107, 0.32);
  font-size: 15px;
}

.btn.login-btn:hover{
  filter: brightness(0.99);
  box-shadow: 0 12px 26px rgba(0, 179, 107, 0.38);
}

.btn.login-btn:active{
  transform: translateY(1px);
}

/* Adjust logo */
.login-logo{
  height: 128px; /* enlarged */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
@media (max-width: 480px){
  .login-logo{ height: 96px; }
}

/* Helpers for spacing around the card on very small screens */
@media (max-width: 480px){
  .panel.login-box .panel-body{ padding: 22px 16px 24px; }
}

/* Optional: thin accent line at the top of the card */
.panel.login-box::before{
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #00b36b, #00e38c, transparent);
}

/* Reset link under submit button */
.reset-link{
  color: #00b36b;
  font-weight: 700;
}
.reset-link:hover{ color: #00a563; text-decoration: underline; }

/* Modal header color to match login button */
.modal-green{
  background: linear-gradient(135deg, #00b36b, #00e38c) !important;
  color: var(--green-contrast) !important;
}
.modal-green .close{ color: var(--green-contrast); opacity: 0.8; }
.modal-green .modal-title{ color: var(--green-contrast); font-weight: 700; }