/* Smooth transition for the details card */
#branch-details-card {
  transition: all 0.3s ease-in-out;
}
/* Modern Minimalist Branch List Item */
.branch-item {
  position: relative;
  padding-left: 1rem;
  transition: all 0.2s ease;
}
.branch-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background-color: #0087cc; /* Primary Blue */
  transition: height 0.2s ease;
  border-radius: 99px;
}
.branch-item:hover {
  background-color: #f8fafc; /* Slate 50 */
  color: #0087cc;
}
/* Active State: Full height bar and distinct color */
.branch-item.active {
  background-color: #f0f9ff; /* Blue 50 */
  color: #0087cc;
  font-weight: 600;
}
.branch-item.active::before {
  height: 70%;
}
/* Validation Styles */
.input-error {
  border-color: #ef4444 !important; /* Red-500 */
  background-color: #fef2f2 !important; /* Red-50 */
  box-shadow: 0 0 0 1px #ef4444 !important; /* Focus ring effect */
}
.input-success {
  border-color: #76ae42 !important; /* Green-500 */
  background-color: #f0fdf4 !important;
}
.error-text {
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}