/* Prevent body content from being hidden under the fixed navbar */
body {
    padding-top: 64px; /* Height of the fixed navbar */
  }
  
  /* Optional: smooth dropdown transition for elegance */
  .dropdown-transition {
    transition: all 150ms ease-in-out;
  }
  
  /* Optional: ensure focus outlines are visible for accessibility */
  :focus {
    outline: 2px solid #60A5FA; /* Tailwind's blue-400 */
    outline-offset: 2px;
  }

  img {
    max-height: 40px; /* Ensure the logo size is appropriate */
    height: auto;
  }

  .fs-5 {
    font-size: 1.25rem;
  }

  /* Ensure spacing between nav links */
  .d-flex {
    display: flex;
    gap: 10px; /* Add space between each button */
  }
  

  /* Style for both Employee link and Login button to make them look the same */
  .nav-link-button {
    background-color: #415972;
    border: 1px solid transparent; /* Same border style */
    text-align: center; /* Make sure the text is centered */
  }

  .nav-link {
    padding: 10px 15px; /* Ensure enough padding inside each button */
    margin-right: 10px; /* Space between buttons */
    border: 1px solid transparent; /* Prevents touching when hovered */
    border-radius: 5px; /* Keeps the rounded corners consistent */
  }
  

  a.nav-link {
    background-color: #415972;
    border: 1px solid transparent; /* Same border style */
    text-align: center; /* Make sure the text is centered */
  }
    
  .nav-link:last-child {
    margin-right: 0; /* No margin on the last button */
  }
  
  /* Add hover effect to maintain separation */
  .nav-link-hover:hover {
    background-color: #415972; /* Your hover color */
    border-color: #415972; /* Border color to match the hover background */
  }
  
  /* Ensure active button gets the same hover effect */
  .nav-link-active {
    background-color: #415972; /* Same as hover color */
    border-color: #415972; /* Matches the hover color */
  }

nav a {
text-decoration: none;
}

.nav {
    background-color: #415972
}

/* Secondary navbar styles */
/* Secondary navbar styling */
.nav-tabs {
    border-bottom: 0;}

.nav-tabs .nav-link {
    background-color: #415972; /* blue1 background */
    color: white;
    border: none;
    margin-right: 5px;
    position: relative; /* For the indicator positioning */}

.nav-tabs .nav-link:hover {
    background-color: #2c3e50; /* blue2 for hover state */
    color: white;
    border: none;}

/* Active tab styling */
  .nav-tabs .nav-link.active {
    background-color: #2c3e50; /* blue2 for active state */
    color: white !important; /* Force white text */
    border: none;}

.charges-tabs .nav-link.active::after {
    display: none !important;
    content: none !important;}


/* Reset Bootstrap default tab styling */
.charges-tabs {
    border-bottom: 0 !important;}

.charges-tabs .nav-item {
    margin-bottom: 0 !important; /* Remove any bottom margin that might create space */}

.charges-tabs .nav-link {
    color: white;
    background-color: #415972; /* blue1 */
    border: 0 !important;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
    padding: 10px 15px;
    font-size: 1.25rem;
    text-decoration: none !important; /* Ensure no text decoration */
    box-shadow: none !important;
    outline: none !important;}

/* Override Bootstrap's active tab styles with extreme specificity */
  .charges-tabs .nav-link.active,
  .charges-tabs .nav-item.show .nav-link,
  #chargesTab .nav-link.active {
    color: white !important;
    background-color: #2c3e50 !important; /* blue2 */
    border: 0 !important;
    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;}

/* Hover effect */
  .charges-tabs .nav-link:hover:not(.active) {
    background-color: #36495e; /* slightly lighter than blue2 */
    border: 0 !important;}

/* Full-width container for the tabs - ensure no borders */
  .tabs-container {
    background-color: #415972;
    width: 100%;
    padding: 10px 0 0 0;
    border: 0 !important;}

/* Direct styling for the ID-based selector for maximum specificity */
  #chargesTab {
    border-bottom: 0 !important;}

/* Directly target any after pseudo-elements that might be adding lines */
  .charges-tabs .nav-link::after,
  .charges-tabs .nav-link.active::after,
  #chargesTab .nav-link::after,
  #chargesTab .nav-link.active::after {
    display: none !important;
    content: none !important;
    border: 0 !important;}

/* Reset before pseudo-elements too */
  .charges-tabs .nav-link::before,
  .charges-tabs .nav-link.active::before,
  #chargesTab .nav-link::before,
  #chargesTab .nav-link.active::before {
    display: none !important;
    content: none !important;
    border: 0 !important;}