/*
 * Tabler 1.4.0 as bundled here ships NO chevron on `.accordion-button` at all
 * (no ::after content, no background-image) - it expects a `.accordion-button-toggle`
 * child element instead, which none of our accordion panels render. Without this,
 * an accordion looks like a plain button and nobody can tell it opens.
 * Do not delete this as "redundant with Bootstrap" - Bootstrap's default chevron
 * is exactly what is missing.
 *
 * The button is already `display: flex`, so `margin-left: auto` pins the icon to
 * the right edge instead of absolute positioning. Colour comes from a CSS mask
 * (not a hardcoded stroke in the SVG) so it inherits `currentColor` and stays
 * correct in both the light and dark theme the app switches at runtime.
 *
 * Own file, not app.css: app.css is customer-only (it opens with a bare
 * `*{...}` rule overriding --tblr-primary and font-family, plus unscoped
 * header.navbar / .page-body rules) and is not safe to load in the admin
 * layout. This file has no such baggage, so both layouts link it directly.
 */
.accordion-button::after {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6l6 -6"/%3E%3C/svg%3E') no-repeat center / 1.25rem;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6l6 -6"/%3E%3C/svg%3E') no-repeat center / 1.25rem;
    transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}