.icon-spinner {
    display: none;
}

.htmx-request .icon-spinner {
    display: inline-flex;
}

.htmx-request .htmx-hide-on-request {
    display: none;
}

.notes-counter .notes-counter-badge {
    transform: translate(80%, -50%) scale(1) !important;
    transform-origin: top right !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    height: 1rem;
    padding: 0 0.35rem;
}

/* The toast container is a popover so it shows above an open modal (top layer).
   Reset the browser's popover styling and keep the daisyUI position. */
#toast-container {
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
    width: max-content;
    max-width: calc(100vw - 2rem);
}

#toast-container:popover-open {
    inset: auto 1rem 1rem auto;
}

/* A tooltip needs a pointer. On a phone it never shows, but its pseudo-elements still
   take part in layout and widened the order table past the screen (#70). */
@media (max-width: 639px) {
    .tooltip::before,
    .tooltip::after {
        display: none;
    }
}

/* On a phone the rows are cards (#70): the per-cell table borders would draw a line
   under every field. Only the card itself keeps a border. */
@media (max-width: 639px) {
    #orders-table-body td {
        border-bottom: 0;
    }
}