@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .report-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {

    .sidebar {
        width: 70px;
    }

    .logo-area {
        padding: 0;
        justify-content: center;
    }

    .logo {
        font-size: 0;
    }

        .logo::before {
            content: "O";
            font-size: 25px;
        }

    .menu a {
        justify-content: center;
        padding: 13px 5px;
    }

        .menu a span:not(.menu-icon),
        .menu-title {
            display: none;
        }

    .main-content {
        margin-left: 70px;
        width: calc(100% - 70px);
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .content {
        padding: 18px;
    }

    .topbar {
        padding: 0 18px;
    }
}

@media (max-width: 550px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        height: 70px;
    }

    .page-title p {
        display: none;
    }

    .content {
        padding: 12px;
    }

    .customer-toolbar {
        flex-direction: column;
    }

        .customer-toolbar .search-box {
            width: 100%;
        }

    .followup-card {
        flex-direction: column;
        align-items: flex-start;
    }
}