@media (max-width: 1180px) {
    .grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split-layout-form-wide,
    .split-layout-purchase-wide,
    .inventory-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .grid-three,
    .split-layout {
        grid-template-columns: 1fr;
    }

    .meta-form-grid-expense,
    .meta-form-grid-purchase,
    .detail-entry-expense,
    .detail-entry-purchase,
    .recipe-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-shell.is-sidebar-hidden .sidebar {
        display: flex;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(84vw, 300px);
        transform: translateX(-102%);
        transition: transform 0.22s ease;
        z-index: 30;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .topbar {
        grid-template-columns: auto 1fr;
    }

    .topbar-company-block {
        justify-content: flex-start;
    }

    .topbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .topbar-company-title,
    .topbar-company-switcher,
    .topbar-user-line {
        white-space: normal;
        text-align: left;
    }

    .mobile-only {
        display: inline-flex;
    }
}

@media (max-width: 720px) {
    .page-wrap {
        width: min(var(--max-page), calc(100% - (var(--shell-inline-space) * 2)));
        margin-inline: auto;
        padding: 18px;
        border-radius: 22px;
    }

    .page-hero,
    .grid-two,
    .grid-four,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .compact-toolbar,
    .catalog-summary-grid,
    .meta-form-grid-expense,
    .meta-form-grid-purchase,
    .detail-entry-expense,
    .detail-entry-purchase,
    .recipe-row {
        grid-template-columns: 1fr;
    }

    .page-hero {
        align-items: start;
    }
}

@media (max-width: 860px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .brand-copy h1 {
        font-size: 32px;
    }

    .form-panel h2 {
        font-size: 30px;
    }
}