.inline-search {
    max-width: 200px;
    /* the entire inline-search should actually use .input-group-flat, but that causes some weird css problems inside the dropdown menu */
    #searchTerm {
        border-right: 0;
    }
}

@media (min-width: 360px) {
    .inline-search {
        max-width: 235px;
    }
}

@include media-breakpoint-up(md) {
    .inline-search {
        max-width: 325px;
    }
    .search-dropdown {
        width: 500px;
    }
}

/* Format the company title in the left navigation, as Tabler is optimized for an image only */
h1.navbar-brand a {
    span {
        display: inline-block;
        padding-top: 0.5rem;
    }
    &:hover {
        text-decoration: none;
    }
}

.page-actions .dropdown-menu,
#export-buttons .dropdown-menu,
.inline-search .dropdown-menu {
    /* bootstrap thead.sticky-top has z-index 1020 and the reporting form dropdowns hide behind that */
    z-index: 1021;
}

/* reduce the default font size for the brand header */
.navbar {
    --tblr-navbar-brand-font-size: 1rem;
}

/* user shortcuts dropdown */
.user-shortcuts {
    .dropdown-menu-card {
        min-width: 260px;
    }
    .user-shortcuts-icon {
        background-color: var(--tblr-bg-surface-secondary);
        color: var(--tblr-gray-500);
        height: 3.125rem;
        width: 3.125rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
