:root{ --primary:#2e7d32; --brown:#6d4c41; --green:#6eea8d; }
.btn-success{ background-color: var(--primary); border-color: var(--primary); }
.navbar-brand i{ margin-right:.35rem; }

/* Carousel caption custom positioning */
.carousel-caption-custom {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
}

/* Carousel arrow icons - black color */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}

/* Carousel inner container - 60% width and centered */
.carousel-inner {
  width: 60%;
  margin: 0 auto;
}

/* Landing page content centering */
.landing-hero {
  text-align: center;
}

.landing-section-title {
  text-align: center;
}

/* Mobile-First Responsive Enhancements */
@media (max-width: 768px) {
  /* Ensure tables never overflow on mobile */
  .table-responsive {
    font-size: 0.85rem;
  }
  
  /* Better spacing for mobile cards */
  .card {
    margin-bottom: 1rem;
  }
  
  /* Adjust button sizes for mobile */
  .btn-group .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
  }
  
  /* Better form controls on mobile */
  .form-control-sm, .form-select-sm {
    font-size: 0.85rem;
  }
  
  /* Responsive badges */
  .badge {
    font-size: 0.7rem;
  }
  
  /* Container padding for mobile */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Navbar improvements for mobile */
  .navbar-nav .dropdown-menu {
    position: static !important;
    transform: none !important;
    border: none;
    box-shadow: none;
    margin-top: 0.5rem;
  }
  
  /* Forms stack better on mobile */
  .row.g-3 .col-md-3,
  .row.g-3 .col-md-4,
  .row.g-3 .col-md-2 {
    margin-bottom: 0.5rem;
  }
}

/* Medium screens adjustments */
@media (max-width: 992px) {
  /* Stack form elements better on medium screens */
  .btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-group .btn {
    border-radius: 0.375rem !important;
    margin-bottom: 0.25rem;
  }
  
  /* Better table text wrapping on medium screens */
  .table td {
    word-wrap: break-word;
    max-width: 150px;
  }
}

/* Ensure images are always responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Better modal sizing on mobile */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  /* Stack modal buttons on very small screens */
  .modal-footer .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .modal-footer {
    flex-direction: column;
  }
}

/* DataTables responsive enhancements */
@media (max-width: 768px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center;
    margin-top: 1rem;
  }
}

/* Card hover effects */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
}

#lastAdoptedCarousel {
  height: auto;
  min-height: 30vw; /* 30% of viewport width */
  max-height: 60vh; /* Maximum 60% of viewport height */
}

@media (max-width: 768px) {
  #lastAdoptedCarousel {
    min-height: 200px;
    max-height: 300px;
  }
}

@media (min-width: 1200px) {
  #lastAdoptedCarousel {
    min-height: 350px;
    max-height: 450px;
  }
}