/* custom-login-style.css */

/* Full height login container */
.login-container {
  min-height: 100vh;
  padding: 2rem;
}

/* Card wrapper */
.custom-card {
  max-width: 1100px;
  /* increased from 1000px */
  width: 100%;
  background-color: white;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

/* Left panel background */
.left-panel {
  background-image: url('../img/login-side-bg.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 500px;
  /* ensure visible height */
}

/* Right panel padding and width */
.right-panel {
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Form elements larger */
.right-panel input.form-control {
  height: 50px;
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

/* --------------------- 3D BUTTON ---------------------*/
.btn-3d {
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.4rem;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease-in-out;
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
  text-align: center;
}

.btn-3d:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Button Variants */
.btn-offwhite-3d {
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  /* off-white gradient */
  box-shadow: 0 5px 0 #c0c0c0;
  /* 3D shadow */
  color: #343a40;
  /* dark gray text for contrast */
  border: 1px solid #dee2e6;
}

.btn-offwhite-3d:hover {
  color: #000;
}

.btn-primary-3d {
  background: linear-gradient(to bottom, #0d6efd, #0a58ca);
  box-shadow: 0 5px 0 #084298;
  color: white;
}

.btn-primary-3d:hover {
  color: white;
}

.btn-success-3d {
  background: linear-gradient(to bottom, #66bb6a, #43a047);
  /* deeper green gradient */
  box-shadow: 0 5px 0 #2e7d32;
  /* strong green for 3D shadow */
  color: white;
  /* black text for better contrast on light green */
}

.btn-success-3d:hover {
  color: white;
}

.btn-danger-3d {
  background: linear-gradient(to bottom, #dc3545, #bb2d3b);
  box-shadow: 0 5px 0 #842029;
  color: white;
}

.btn-danger-3d:hover {
  color: white;
}

.btn-warning-3d {
  background: linear-gradient(to bottom, #ffc107, #e0a800);
  box-shadow: 0 5px 0 #997404;
  color: black;
}

.btn-warning-3d:hover {
  color: black;
}

.btn-info-3d {
  background: linear-gradient(to bottom, #0dcaf0, #31d2f2);
  box-shadow: 0 5px 0 #0aa2c0;
  color: black;
}

.btn-info-3d:hover {
  color: black;
}

.btn-secondary-3d {
  background: linear-gradient(to bottom, #6c757d, #5a6268);
  box-shadow: 0 5px 0 #343a40;
  color: white;
}

.btn-secondary-3d:hover {
  color: white;
}

/* Custom Colors */

.btn-gray-3d {
  background: linear-gradient(to bottom, #adb5bd, #6c757d);
  box-shadow: 0 5px 0 #495057;
  color: white;
}

.btn-gray-3d:hover {
  color: black;
}

.btn-purple-3d {
  background: linear-gradient(to bottom, #6f42c1, #5a32a3);
  box-shadow: 0 5px 0 #43237b;
  color: white;
}

.btn-purple-3d:hover {
  color: white;
}

.btn-black-3d {
  background: linear-gradient(to bottom, #343a40, #212529);
  box-shadow: 0 5px 0 #121416;
  color: white;
}

.btn-black-3d:hover {
  color: white;
}

.btn-yellow-3d {
  background: linear-gradient(to bottom, #fcd307, #d4b100);
  box-shadow: 0 5px 0 #b29400;
  color: black;
}

.btn-yellow-3d:hover {
  color: black;
}

.btn-3d:active,
.btn-3d.active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  color: inherit !important;
  /* Keep original text color */
}

.btn-gray-3d:active,
.btn-gray-3d.active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #495057;
  color: white !important;
}

.btn-warning-3d:active,
.btn-warning-3d.active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #997404;
  color: black !important;
}
/* Logo larger */
.right-panel .logo {
  width: 80px;
  height: auto;
}

/* Footer text spacing */
.footer-text {
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.5rem;

  margin-bottom: 0;

}

.input-group .form-control,
.input-group-text {
  height: 50px;        /* your existing height */
  font-size: 1rem;
  padding: 0 1rem;
}

.input-group .input-group-text:first-child {
  border-radius: 8px 0 0 8px;  /* left rounded */
}

.input-group .form-control:last-child {
  border-radius: 0 8px 8px 0;  /* right rounded */
}

.input-group .form-control:focus {
  z-index: 1;  /* ensures border appears above icon */
  box-shadow: none;  /* optional if you don’t want default blue shadow */
}