@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import "colors2025.css";

    body {
        background-color: #f8f9fa;
        font-family: 'Poppins', sans-serif;
    }

    /* Typography styles for h1 - h5 using Poppins */
    h1, h2, h3, h4, h5 {
        font-family: 'Poppins', sans-serif;
        color: #333;
        font-weight: 600;
        line-height: 1.2;
    }
    h1 {
        font-size: 2.5rem;
        color: #0056b3;
    }
    h2 {
        font-size: 2rem;
        color: #007bff;
    }
    h3 {
        font-size: 1.75rem;
        color: #0056b3;
    }
    h4 {
        font-size: 1.5rem;
        color: #004085;
    }
    h5 {
        font-size: 1.25rem;
        color: #333;
    }
    h6 {
        font-size: 1rem;
        color: #FFF;
    }  

  .navbar-nav .nav-link {
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 10px 15px;
  }

  .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  } 

/*Fullscreen styling only when the navbar is expanded */
@media (max-width: 991.98px) {
    .fullscreen-navbar.collapse.show {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(26, 48, 87, 0.85);
        z-index: 1050;
    }

    .fullscreen-navbar .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .fullscreen-navbar .nav-link {
        font-size: 1.5rem;
        color: #ffffff;
        margin: 1rem;
        transition: color 0.3s ease;
    }

    .fullscreen-navbar .nav-link:hover {
        color: #9ddbec;
    }
}

.dropdown-menu-custom .dropdown-item {
    font-size: 1.25rem;
    color: #1a3057;
    background-color: transparent;
    transition: color 0.3s ease, background-color 0.3s ease;
  }

  .dropdown-menu-custom .dropdown-item:hover {
    color: #9ddbec;
    background-color: rgba(26, 48, 87, 0.5);
  }

.unit-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow wrapping to manage content on small screens */
    gap: 10px;
}


.unit-name {
    font-size: calc(1.5rem + 1vw); /* Dynamic font size based on viewport width */
    max-width: 100%;
    font-weight: 600; /* Ensure the font is bold enough to remain legible when shrunk */
  }
/*
  .manage-unit-btn {
    transition: background-color 0.3s ease, transform 0.3s ease;
    background: linear-gradient(90deg, rgba(0, 123, 255, 1) 0%, rgba(0, 175, 215, 1) 100%);
  }
  .manage-unit-btn:hover {
    background-color: #004085;
    color: #ffffff;
    transform: scale(1.05);
  }*/
  .manage-unit-btn:hover {
      color: #0d2a44 !important;
      font-weight: bold;
  }
  .manage-unit-btn i {
    margin-right: 5px; /* Add some space between the icon and text */
  }
 

@media (max-width: 576px) {
    .unit-name {
        font-size: 1rem; /* Set a minimum readable size for very small screens */
    }
    .unit-badge {
      font-size: 0.5rem; /* Decrease badge size further on mobile */
      padding: 0.15em 0.25em; /* Adjust padding for mobile */
    }
}

#manageUnits .collapse {
    transition: height 0.3s ease;
}

  .admin-panel .link-hover {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }

  .admin-panel .link-hover:hover {
    background: var(--bg-darknavy);
    color: #ffffff !important;
    transform: scale(1.02);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  }

  .hover-bg-highlight:hover {
    background-color: var(--bs-light);
  }

  .admin-panel .link-hover:focus {
    outline: 2px dashed #ffffff;
    background-color: var(--bg-darknavy);
  }

  .admin-panel .list-group-item {
    padding: 12px 20px;
  }


/* Custom light background classes for Bootstrap */

.bg-light-info {
    background-color: #e8f4fc !important; /* Softer version of info background */
}

.bg-light-warning {
    background-color: #fff9e6 !important; /* Softer version of warning background */
}

.bg-light-success {
    background-color: #eaf7eb !important; /* Softer version of success background */
}

.bg-light-primary {
    background-color: #eef4fc !important; /* Softer version of primary background */
}

.bg-light-secondary {
    background-color: #f6f6f6 !important; /* Softer version of secondary background */
}

.bg-light-danger {
    background-color: #fdecea !important; /* Softer version of danger background */
}