@layer utilities {
    :root,
    body.density-comfortable {
        --density-row-height: 56px;
        --density-cell-padding: 1rem 1.25rem;
        --density-font-size: 0.875rem;
    }

    body.density-compact {
        --density-row-height: 40px;
        --density-cell-padding: 0.5rem 1rem;
        --density-font-size: 0.8125rem;
    }

    .table tbody tr {
        height: var(--density-row-height);
    }

    .table tbody td,
    .table thead th {
        padding: var(--density-cell-padding);
        font-size: var(--density-font-size);
    }

    .card-body {
        padding: var(--density-cell-padding);
    }

    .list-group-item {
        padding: var(--density-cell-padding);
        font-size: var(--density-font-size);
    }

    /* Sidebar toggle button — sibling of .theme-toggle. Same visual
       language: compact pill, icon + label, full-width inside the
       utility cluster. */
    .density-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        background: transparent;
        border: 0;
        color: inherit;
        font-size: 0.8125rem;
        text-align: left;
        cursor: pointer;
        border-radius: var(--radius-sm, 0.25rem);
        transition: background var(--duration-fast, 150ms) var(--ease-smooth, ease);
    }

    .density-toggle:hover {
        background: var(--surface-2);
    }

    .density-toggle i {
        width: 1rem;
        text-align: center;
        opacity: 0.7;
    }

    @media (prefers-reduced-motion: reduce) {
        .density-toggle { transition: none; }
    }
}