:root {
      --primary: #4d5628; /* Olive green */
      --secondary: #a56a42; /* Terracotta */
      --light-cream: #f8f5f0; /* Background */
      --dark-olive: #3a4120; /* Darker olive */
      --card-bg: #ffffff; /* Pure white for forms */
      --red: #a60000;
    }
    
    body.login-page {
      background: 
        /* Organic watercolor texture */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 800 800"><g opacity="0.05"><path fill="%234d5628" d="M800 0H0v800h800V0zM400 400c0 100-50 200-150 200s-150-100-150-200 50-200 150-200 150 100 150 200z"/><path fill="%23a56a42" d="M600 200c0 100-50 200-150 200s-150-100-150-200 50-200 150-200 150 100 150 200z"/></g></svg>'),
        linear-gradient(135deg, #f9f6f1 0%, #e8e0d2 100%);
      background-attachment: fixed;
      font-family: 'Poppins', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
    }
    
    .login-box {
      width: 380px;
    }
    
    .login-logo img {
      height: 160px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    
    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      overflow: hidden;
    }
    
    /* Logo header section - now with light background */
    .card-header {
      background: var(--light-cream);
      text-align: center;
      border-bottom: 3px solid var(--secondary); /* Terracotta accent line */
    }
    
    .login-card-body {
      padding: 2rem;
      background: var(--card-bg);
    }
    
    .btn-primary {
      background-color: var(--primary);
      border-color: var(--primary);
      padding: 8px 20px;
    }
    
    .btn-primary:hover {
      background-color: var(--dark-olive);
      border-color: var(--dark-olive);
    }
    
    .form-control {
      border-left: none;
    }
    
    .input-group-prepend{
      background-color: var(--primary);
    }
    .login-card-body .input-group .input-group-text, .register-card-body .input-group .input-group-text
    {
      border: 1px solid var(--primary);
    }
    input{
      border: 1px solid !important;
      border-radius: unset !important;
    }
    a {
      color: var(--secondary);
    }
    .input-group-text .fas{
      color: var(--card-bg);
    }
    
    a:hover {
      color: #8a5736;
    }
    .card-header {    
      padding: 0px !important;
    }
    .loginscreen img{
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
    @media (max-width: 768px) {
      .login-box, .register-box {
          margin-top: .5rem;
          width: 90%;
      }
    }

  /* Custom invalid input styling */
  .is-invalid {
    border-color: var(--red) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
  }
  
  /* Error message styling */
  .invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: var(--red);
  }
  
  .is-invalid ~ .invalid-feedback {
    display: block;
  }