/* merged-custom.css - Combined clean layout and working collapse */

/* Ensure the navbar is visible and properly aligned */
.navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 1rem !important;
}

.navbar-toggler {
    background-color: #46ac43;
    width: 48px;
    height: 38px;
    border: 1px solid transparent;
    margin-bottom: 15px;
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.navbar-toggler-icon {
    width: 28px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-brand {
    margin-right: auto !important;
}

/* Clean and responsive navigation list */
.navigationUl {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-bottom: 20px;
}

.navigationUl li {
    padding: 0 !important;
}

.navigationUl li a {
    display: block !important;
    padding: 0.5rem 1rem !important;
    color: inherit !important;
    text-decoration: none !important;
}

.navigationUl li a:hover {
    color: white !important;
    text-decoration: none !important;
}

/* Responsive behavior for collapse */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end;
        background-color: transparent !important;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        flex-direction: column !important;
        background-color: #fff !important;
        background-color: transparent !important;
    }

    .navbar-nav {
        width: 106%;
    }

    .navbar-nav .nav-item {
        text-align: center;
        width: 100%;
    }

    .navigationUl {
        align-items: normal;
        flex-direction: column !important;
    }

    .supLogo {
        margin-top: 15px;
    }

    .navbar-collapse.show {
        display: flex !important;
    }
}

.navbar-collapse.show {
    display: flex !important;
    flex-direction: column !important;
}

/* Apply white color to the rendered select element */
.ui-selectonemenu label,
.ui-selectonemenu .ui-selectonemenu-label,
.ui-selectonemenu .ui-selectonemenu-trigger {
    color: #FFFFFF !important;
}

/* When the component is focused or has no value */
.ui-selectonemenu .ui-selectonemenu-label.ui-inputfield {
    color: #FFFFFF !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
  color: white !important;
  fill: white !important;
}