.historylink, .edit-billy-user-button {
    padding: 0.5rem 1rem;
    display: block;
    margin-left: 0.5rem;
}

.djangoql-toggle {
    margin-left: 10px
}

.breadcrumbs {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Bulk-actions bar on phones and tablets. Unfold copies the results-table width onto the bar, which is wider
   than the bar's padded interior, and lets the action <select> keep the width of its widest option, so the
   "Run" button lands past the right edge of the screen. */
@media (max-width: 1023px) {
    #changelist-actions {
        max-width: 100%;
    }

    #changelist-actions select {
        min-width: 0;
    }
}

/* Unfold marks the active page tab (e.g. Full view / Simple view on the customer page) only with a thin
   underline. Give every tab the same pill geometry and fill the active one, so it is obvious which view is
   open and the labels stay on one baseline. The selectors lean on Unfold's own markup (`md:mr-8` on the tab
   items, `-mb-px` on the active link), so re-check this when bumping django-unfold. */
#content > div > ul > li.md\:mr-8 > a {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 0;
    border-bottom: 0;
}

#content > div > ul > li.md\:mr-8 > a.-mb-px,
#content > div > ul > li.md\:mr-8 > a.-mb-px:hover {
    background: rgb(var(--color-primary-600));
    color: #fff;
}

/* Horizontal filter selectors (user groups and permissions, "filter_horizontal"). Unfold caps the whole widget at
   42rem with 24rem boxes, which ellipsises most permission names. Let the boxes share the row's width and be
   dragged bigger from the corner handle. The select inside already fills its box. */
@media (min-width: 1024px) {
    /* Element selectors only to outrank Unfold's own rules, which load after this file */
    div.selector {
        max-width: none;
    }

    div.selector-available,
    div.selector-chosen {
        flex: 1 1 auto;
        width: 24rem;
        min-width: 16rem;
        resize: both;
        overflow: auto;
    }
}