/* ============================================================
   Table toolbar (search + category filter)
   ============================================================ */
.table-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

    .table-toolbar #foodSearch {
        max-width: 280px;
    }

    .table-toolbar #categoryFilter {
        max-width: 220px;
    }

    .table-toolbar .form-control:focus,
    .table-toolbar .form-select:focus {
        border-color: var(--magenta);
        box-shadow: 0 0 0 .2rem rgba(194,23,138,.18);
    }

/* ---------- Sortable headers ---------- */
.table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.4rem;
}

    .table th.sortable:hover {
        background: #f6e8f2;
    }

    /* Sort direction arrows */
    .table th.sortable::after {
        content: "\2195"; /* up-down arrow, idle */
        position: absolute;
        right: .6rem;
        opacity: .35;
        font-size: .8rem;
    }

    .table th.sortable.sort-asc::after {
        content: "\2191";
        opacity: 1;
    }
    /* up */
    .table th.sortable.sort-desc::after {
        content: "\2193";
        opacity: 1;
    }
/* down */