/* ── Mobile: cards instead of table (≤ 767px) ── */
@media (max-width: 767px) {
    body.page-platform-catalog-products [data-controller="table"],
    body.page-platform-receipts [data-controller="table"] {
        display: none !important;
    }
}

/* Collapsible sidebar — desktop only (≥ 992px) */
@media (min-width: 992px) {

    /* ── Sidebar: sticky in normal flow, pushes content ─────── */

    .aside {
        position: sticky !important;
        top: 0;
        height: 100vh !important;
        width: 64px !important;
        flex: 0 0 64px !important;
        max-width: none !important;
        overflow: hidden;
        transition: width 0.22s ease, flex-basis 0.22s ease;
    }

    .aside:hover {
        width: 240px !important;
        flex: 0 0 240px !important;
    }

    /* ── Content: fills remaining space, shrinks on sidebar open */

    .site-content {
        flex: 1;
        min-width: 0;
    }

    /* ── Prevent text from wrapping ──────────────────────────── */

    .aside .nav-link,
    .aside .header-brand {
        white-space: nowrap;
    }

    /* ── Fade in menu text on hover ──────────────────────────── */

    .aside .text-break,
    .aside .scroll-to-top,
    .aside .header-brand p {
        opacity: 0;
        transition: opacity 0.08s ease;
    }

    .aside:hover .text-break,
    .aside:hover .scroll-to-top,
    .aside:hover .header-brand p {
        opacity: 1;
        transition: opacity 0.2s ease 0.1s;
    }

    /* ── Section titles & dividers: collapse height when closed ─ */

    .aside li.nav-item.mt-3 {
        max-height: 0 !important;
        overflow: hidden;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transition: max-height 0.22s ease, margin 0.22s ease;
    }

    .aside:hover li.nav-item.mt-3 {
        max-height: 48px !important;
        margin-top: 1rem !important;
        margin-bottom: 0.25rem !important;
        transition: max-height 0.22s ease 0.05s, margin 0.22s ease 0.05s;
    }

    .aside li.divider {
        max-height: 0 !important;
        overflow: hidden;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transition: max-height 0.22s ease, margin 0.22s ease;
    }

    .aside:hover li.divider {
        max-height: 16px !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        transition: max-height 0.22s ease 0.05s, margin 0.22s ease 0.05s;
    }

    /* ── Profile section ─────────────────────────────────────── */

    .aside .profile-container {
        padding: 0.5rem !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .aside .profile-container > a.col-10 {
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        opacity: 0;
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 0% !important;
        transition: max-width 0.22s ease, opacity 0.12s ease;
    }

    .aside:hover .profile-container {
        padding: 0.75rem !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .aside:hover .profile-container > a.col-10 {
        width: auto !important;
        max-width: 83.33% !important;
        flex: 0 0 83.33% !important;
        opacity: 1;
        transition: max-width 0.22s ease, opacity 0.2s ease 0.1s;
    }

    .aside .profile-container > a:not(.col-10) {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0.25rem 0.5rem !important;
    }
}