/* Custom CSS for Trans-it-Track */

:root {
    --primary-green: #198754;
    --dark-green: #1a5f3f;
    --light-green: #d1e7dd;
  }
  
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  
  /* Hero Section Gradient */
  .hero-section {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    min-height: 60vh;
    display: flex;
    align-items: center;
  }
  
  /* Custom Button Styles */
  .btn-success {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
  }
  
  .btn-success:hover {
    background-color: var(--dark-green);
    border-color: var(--dark-green);
  }
  
  .btn-outline-success {
    color: var(--primary-green);
    border-color: var(--primary-green);
  }
  
  .btn-outline-success:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
  }
  
  /* Card Enhancements */
  .card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
  }
  
  .card-header {
    border-bottom: none;
  }
  
  /* Form Enhancements */
  .form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }
  
  .form-select:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }
  
  /* Password Toggle Button */
  .input-group .btn {
    border-left: none;
  }
  
  /* Animation for cards */
  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .display-4 {
      font-size: 2.5rem;
    }
  
    .hero-section {
      min-height: 50vh;
    }
  }
  
  /* Loading animation */
  .btn.loading {
    position: relative;
    color: transparent;
  }
  
  .btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Success/Error Messages */
  .alert-custom {
    border-radius: 10px;
    border: none;
  }
  
  .alert-success-custom {
    background-color: var(--light-green);
    color: var(--dark-green);
  }
  
  .alert-danger-custom {
    background-color: #f8d7da;
    color: #721c24;
  }